/* ============ TOKENS ============ */
:root{
  --navy:#0B1A46;        /* deep brand navy - footer, plates, headings */
  --navy-deep:#071230;
  --blue:#1B4BE0;        /* primary action blue */
  --blue-700:#1539B0;    /* hover / pressed */
  --blue-soft:#4E7EF0;   /* secondary blue */
  --blue-light:#4E7EF0;  /* legacy alias */
  --cyan:#26B7F5;        /* logo accent only */
  --sky:#EDF2FF;         /* pale blue section wash */
  --white:#FFFFFF;
  --ink:#0C1425;
  --ink-soft:#56617A;
  --line:#DFE6F3;
  --amber:#4E7EF0;       /* legacy alias - the brand has no second hue */

  --display:'Archivo', 'Inter', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'Inter', sans-serif;

  --radius:14px;
  --wrap:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--white);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-0.01em; color:var(--navy);}
em{font-style:italic; color:var(--blue);}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:999px;
  font-family:var(--body); font-weight:600; font-size:0.95rem;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  cursor:pointer; border:1.5px solid transparent;
}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 8px 20px -8px rgba(27,75,224,.55);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(27,75,224,.6);}
.btn-ghost{border-color:var(--line); color:var(--navy);}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px);}
.btn-small{padding:9px 18px; font-size:.88rem;}
.btn-large{padding:16px 32px; font-size:1.05rem;}

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex; align-items:center; gap:28px; padding:16px 28px;}
.logo{font-family:var(--display); font-weight:600; font-size:1.35rem; color:#fff;}
.logo .dot{color:var(--amber);}
.main-nav{display:flex; gap:26px; margin-left:auto;}
.main-nav a{color:#C2D0EE; font-size:.95rem; font-weight:500; transition:color .2s;}
.main-nav a:hover{color:#fff;}
.header-inner .btn-small{margin-left:8px;}
.nav-toggle{display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:none; border:none; cursor:pointer; padding:12px; min-width:48px; min-height:48px;}
.nav-toggle span{width:22px; height:2px; background:#fff; border-radius:2px;}

/* ============ HERO ============ */
.hero{padding:88px 0 70px; background:linear-gradient(180deg, var(--sky) 0%, #fff 100%);}
.hero-inner{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;}
.eyebrow{font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--blue); text-transform:uppercase; margin-bottom:16px;}
.eyebrow-dark{color:var(--blue);}
.hero h1{font-size:clamp(2.3rem, 4.2vw, 3.4rem); line-height:1.08; margin-bottom:20px;}
.hero-sub{color:var(--ink-soft); font-size:1.08rem; max-width:480px; margin-bottom:30px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* Hero visual panel */
.hero-panel{display:flex; justify-content:center;}
.dot-red,.dot-amber,.dot-green{width:10px; height:10px; border-radius:50%;}
.dot-red{background:#C3D2F2;} .dot-amber{background:#8FB2F8;} .dot-green{background:#4E7EF0;}
@keyframes blink{50%{opacity:0;}}

/* ============ TRUST STRIP ============ */
.trust-strip{padding:20px 0;}

/* ============ SECTIONS GENERIC ============ */
section{padding:90px 0;}
.section-sub{color:var(--ink-soft); max-width:560px; margin-top:14px; font-size:1.05rem;}
h2{font-size:clamp(1.8rem,3vw,2.5rem); margin-top:6px;}

/* ============ SERVICES ============ */
.services{background:#fff;}
.service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:48px;}
.service-card{
  background:#fff; border-radius:var(--radius); padding:32px 26px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(11,26,70,.03);
}
.service-card:hover{transform:translateY(-6px); box-shadow:0 26px 48px -26px rgba(11,26,70,.28); border-color:#C9D7F5;}
.service-icon{color:var(--blue); width:44px; height:44px; margin-bottom:18px;}
.service-tag{display:block; font-family:var(--mono); font-size:.74rem; color:var(--blue-light); letter-spacing:.04em; margin-bottom:10px;}
.service-card h3{font-size:1.2rem; margin-bottom:10px; color:var(--navy);}
.service-card p{color:var(--ink-soft); font-size:.94rem;}

.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:64px; padding-top:48px; border-top:1px solid var(--line);}
.stat{text-align:center;}
.stat-num{font-family:var(--display); font-size:2.6rem; font-weight:600; color:var(--blue); display:block;}
.stat-label{color:var(--ink-soft); font-size:.9rem;}

/* ============ WORK ============ */
.work{background:var(--sky);}
.work-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:48px;}
.work-card{background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease;}
.work-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -18px rgba(11,26,70,.25);}
.work-thumb{height:160px; background:linear-gradient(135deg,var(--blue),var(--navy));}
.thumb-1{background:linear-gradient(135deg,#1B4BE0,#0B1A46);}
.thumb-2{background:linear-gradient(135deg,#4E7EF0,#1B4BE0);}
.thumb-3{background:linear-gradient(135deg,#4E7EF0,#0B1A46);}
.work-card h3{font-size:1.05rem; padding:20px 20px 8px; color:var(--navy);}
.work-card p{padding:0 20px 22px; color:var(--ink-soft); font-size:.92rem;}

/* ============ ABOUT ============ */
.about{background:#fff;}
.about-inner{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.about-points{display:flex; flex-direction:column; gap:28px;}
.about-point h4{color:var(--navy); font-size:1.05rem; margin-bottom:6px; font-family:var(--body); font-weight:700;}
.about-point p{color:var(--ink-soft); font-size:.95rem;}

/* ============ CTA ============ */
.cta{background:var(--navy); color:#fff; text-align:center;}
.cta h2{color:#fff;}
.cta p{color:#C2D0EE; max-width:480px; margin:16px auto 30px; font-size:1.05rem;}

/* ============ FOOTER (compact, single-row) ============ */
.site-footer{background:var(--navy); color:#C2D0EE; padding-top:34px;}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:18px 32px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.footer-brand p{margin:0; font-size:.86rem; color:#9FB1DC;}
.footer-links{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.footer-links a{font-size:.88rem; color:#C2D0EE; transition:color .2s;}
.footer-links a:hover{color:#fff;}
.footer-sep{width:1px; height:14px; background:rgba(255,255,255,.18);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 20px; padding:14px 28px; font-size:.8rem; color:#8698C9;}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .about-inner{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .work-grid{grid-template-columns:repeat(2,1fr);}
  .stats-row{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column; align-items:flex-start; gap:18px;}
  .main-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--navy);
    flex-direction:column; padding:20px 28px; gap:16px;
    display:none;
  }
  .main-nav.open{display:flex;}
  .nav-toggle{display:flex;}
  .header-inner .btn-small{display:none;}
}
@media (max-width:560px){
  .service-grid{grid-template-columns:1fr;}
  .work-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  /* The near-zero global duration above would make the testimonial marquee's
     infinite animation flicker/jump rather than cleanly stop, since it never
     actually disables the animation — it just makes each loop near-instant.
     This explicitly turns it off and makes it a normal scrollable row instead,
     which is the correct fallback for this OS-level accessibility setting. */
  .review-track{animation:none; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* ============ TECHY BACKGROUND LAYERS ============ */
/* Grid-line pattern retired site-wide — flat, faint dot/line grids read as an
   AI-template background rather than an intentional design choice. */
.tech-grid-bg{display:none;}
@keyframes gridDrift{from{background-position:0 0,0 0;} to{background-position:42px 42px,42px 42px;}}

.blob{
  position:absolute; border-radius:50%; filter:blur(60px); z-index:0; pointer-events:none;
  opacity:.35; animation:blobFloat 12s ease-in-out infinite;
  --px:0px; --py:0px;
}
.blob-1{width:340px; height:340px; background:var(--blue-light); top:-60px; right:6%; animation-delay:0s;}
.blob-2{width:260px; height:260px; background:var(--amber); bottom:-40px; left:2%; animation-delay:-4s; opacity:.22;}
.blob-3{width:200px; height:200px; background:var(--navy); top:40%; right:30%; animation-delay:-8s; opacity:.12;}
@keyframes blobFloat{
  0%,100%{transform:translate(var(--px,0px),var(--py,0px)) scale(1);}
  33%{transform:translate(calc(var(--px,0px) + 20px), calc(var(--py,0px) - 24px)) scale(1.08);}
  66%{transform:translate(calc(var(--px,0px) - 16px), calc(var(--py,0px) + 18px)) scale(0.94);}
}
.hero{position:relative; overflow:hidden;}
.hero .wrap{position:relative; z-index:2;}



/* ============ NAV ACTIVE + UNDERLINE ============ */
.main-nav a{position:relative; padding-bottom:3px;}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--amber); transition:width .25s ease;
}
.main-nav a:hover::after,.main-nav a.active::after{width:100%;}
.main-nav a.active{color:#fff;}

/* ============ PAGE FADE-IN ============ */
body{opacity:0; animation:pageIn .6s ease forwards;}
@keyframes pageIn{to{opacity:1;}}

/* ============ SUBPAGE HERO ============ */
.page-hero{padding:64px 0 56px; position:relative; overflow:hidden; background:linear-gradient(180deg,var(--sky) 0%, #fff 100%);}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{font-size:clamp(2rem,4vw,2.9rem);}
.page-hero p{color:var(--ink-soft); max-width:560px; margin-top:14px; font-size:1.05rem;}
.breadcrumb{font-family:var(--mono); font-size:.78rem; color:var(--blue); margin-bottom:14px; letter-spacing:.04em;}

/* ============ MARQUEE TICKER ============ */


/* ============ TILT CARDS ============ */
.tilt{transition:transform .15s ease, box-shadow .3s ease; transform-style:preserve-3d; will-change:transform;}

/* ============ DETAILED SERVICE BLOCKS (services.html) ============ */
.service-detail{padding:70px 0; border-bottom:1px solid var(--line);}
.service-detail:last-child{border-bottom:none;}
.service-detail-inner{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.service-detail:nth-child(even) .service-detail-inner{direction:rtl;}
.service-detail:nth-child(even) .service-detail-inner > *{direction:ltr;}
.service-visual{
  aspect-ratio:4/3; border-radius:18px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--sky),#fff);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.service-visual .glow-ring{
  position:absolute; width:220px; height:220px; border-radius:50%;
  border:2px dashed rgba(27,75,224,.35); animation:spin 14s linear infinite;
}
.service-visual .glow-ring.r2{width:150px; height:150px; animation-duration:9s; animation-direction:reverse; border-color:rgba(78,126,240,.4);}
@keyframes spin{from{transform:rotate(0);} to{transform:rotate(360deg);}}
.service-visual .visual-icon{position:relative; z-index:2; width:70px; height:70px; color:var(--blue);}
.service-detail-copy .service-tag{margin-bottom:12px;}
.service-detail-copy h3{font-size:1.7rem; margin-bottom:14px;}
.service-detail-copy p{color:var(--ink-soft); margin-bottom:20px;}
.feature-list{list-style:none; display:flex; flex-direction:column; gap:12px;}
.feature-list li{display:flex; align-items:flex-start; gap:10px; font-size:.95rem; color:var(--ink);}
.feature-list li svg{color:var(--blue); flex-shrink:0; width:18px; height:18px; margin-top:2px;}

.skill-bars{display:flex; flex-direction:column; gap:16px; margin-top:22px;}
.skill-bar-row{display:flex; flex-direction:column; gap:6px;}
.skill-bar-label{display:flex; justify-content:space-between; font-size:.85rem; color:var(--ink-soft); font-family:var(--mono);}
.skill-bar-track{height:7px; border-radius:99px; background:var(--sky); overflow:hidden;}
.skill-bar-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue),var(--blue-light)); width:0%; transition:width 1.1s cubic-bezier(.2,.8,.2,1);}

/* ============ FILTER TABS (work.html) ============ */
.filter-tabs{display:flex; gap:12px; flex-wrap:wrap; margin:36px 0 8px;}
.filter-tab{
  padding:9px 20px; border-radius:999px; border:1.5px solid var(--line); background:#fff;
  font-size:.88rem; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:.25s ease;
}
.filter-tab:hover{border-color:var(--blue); color:var(--blue);}
.filter-tab.active{background:var(--blue); border-color:var(--blue); color:#fff;}
.work-card{transition:transform .3s ease, box-shadow .3s ease, opacity .3s ease;}
.work-card.hidden{display:none;}
.work-thumb{position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.work-thumb svg{width:44px; height:44px; color:rgba(255,255,255,.85); position:relative; z-index:2;}
.work-thumb::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform:translateX(-100%); transition:transform .6s ease;
}
.work-card:hover .work-thumb::after{transform:translateX(100%);}
.work-cat{display:inline-block; font-family:var(--mono); font-size:.7rem; color:var(--blue); background:var(--sky); padding:3px 10px; border-radius:99px; margin:16px 20px -6px;}

/* ============ TIMELINE (about.html) ============ */
.timeline{position:relative; margin-top:56px; padding-left:32px;}
.timeline::before{
  content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line);
}
.timeline::after{
  content:''; position:absolute; left:6px; top:6px; width:2px; height:0%; background:var(--blue);
  transition:height 1.4s ease;
}
.timeline.in-view::after{height:calc(100% - 12px);}
.timeline-item{position:relative; padding-bottom:44px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  position:absolute; left:-32px; top:2px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:2.5px solid var(--blue); z-index:2;
}
.timeline-item h4{color:var(--navy); font-size:1.05rem; margin-bottom:6px;}
.timeline-item p{color:var(--ink-soft); font-size:.94rem; max-width:520px;}

/* ============ TEAM / VALUES GRID ============ */
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:20px;}
.values-grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:20px;}
.value-card{background:var(--sky); border-radius:var(--radius); padding:26px; transition:transform .3s ease, background .3s ease;}
.value-card:hover{transform:translateY(-5px); background:#fff; box-shadow:0 16px 32px -16px rgba(27,75,224,.28);}
.value-card h4{color:var(--navy); margin-bottom:8px; font-size:1.02rem;}
.value-card p{color:var(--ink-soft); font-size:.9rem;}

@media (max-width:900px){
  .service-detail-inner{grid-template-columns:1fr;}
  .service-detail:nth-child(even) .service-detail-inner{direction:ltr;}
  .values-grid, .values-grid-4{grid-template-columns:1fr;}
}

/* ============ SPA VIEW SWITCHING ============ */
.view{display:none;}
.view.active{display:block; animation:viewIn .5s ease;}
@keyframes viewIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}

/* ============ GRADIENT TEXT ============ */
.gradient-text{
  background:linear-gradient(90deg,var(--blue),var(--blue-light),var(--amber),var(--blue));
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradientMove 6s ease infinite;
}
@keyframes gradientMove{0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;}}

/* ============ HERO FLOATING BADGES ============ */
.hero-badges{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}
.hero-badges .floaty{
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px;
  font-size:.85rem; font-weight:600; color:var(--navy); box-shadow:0 8px 18px -10px rgba(11,26,70,.25);
  animation:floatY 3.4s ease-in-out infinite; animation-delay:var(--d);
}
@keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}

.hero-panel{position:relative;}

/* ============ CARD LINK ============ */
.card-link{display:inline-block; margin-top:14px; font-size:.86rem; font-weight:700; color:var(--blue);}

/* ============ PROGRESS RINGS ON STATS ============ */
.stat{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;}
.ring{position:absolute; top:-38px; left:50%; transform:translateX(-50%); width:96px; height:96px; z-index:0;}
.ring-track{fill:none; stroke:var(--sky); stroke-width:6;}
.ring-fill{fill:none; stroke:var(--blue); stroke-width:6; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; transform:rotate(-90deg); transform-origin:60px 60px; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);}
.stat-num{margin-top:52px; position:relative; z-index:1;}

/* ============ REVIEWS (shared bits used by the live marquee below) ============ */
.stars{color:var(--amber); font-size:1.1rem; letter-spacing:2px; margin-bottom:12px;}
.review-quote{color:var(--ink); font-size:.98rem; font-style:italic; margin-bottom:18px; line-height:1.6;}

@media (max-width:560px){
  .review-card{width:300px;}
}

/* ============ SCROLL CUE ============ */
.scroll-cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3;
  width:26px; height:42px; border:2px solid var(--blue-light); border-radius:20px;
  display:flex; justify-content:center; padding-top:7px;
}
.scroll-cue span{width:4px; height:8px; border-radius:2px; background:var(--blue); animation:scrollCueMove 1.6s ease infinite;}
@keyframes scrollCueMove{0%{opacity:1; transform:translateY(0);} 70%{opacity:0; transform:translateY(14px);} 100%{opacity:0;}}

/* ============ PULSE HIGHLIGHT ON DEEP-LINK ============ */
.pulse-highlight{animation:highlightPulse 1.3s ease; border-radius:18px;}
@keyframes highlightPulse{
  0%{box-shadow:0 0 0 0 rgba(27,75,224,.4);}
  70%{box-shadow:0 0 0 26px rgba(27,75,224,0);}
  100%{box-shadow:0 0 0 0 rgba(27,75,224,0);}
}

/* ============ HERO ENTRANCE STAGGER ============ */
.hero-copy .eyebrow{opacity:0; animation:heroIn .7s ease forwards; animation-delay:.15s;}
.hero-copy h1{opacity:0; animation:heroIn .7s ease forwards; animation-delay:.3s;}
.hero-copy .hero-sub{opacity:0; animation:heroIn .7s ease forwards; animation-delay:.45s;}
.hero-copy .hero-actions{opacity:0; animation:heroIn .7s ease forwards; animation-delay:.6s;}
.hero-copy .hero-badges{opacity:0; animation:heroIn .7s ease forwards; animation-delay:.75s;}
.hero-panel{opacity:0; animation:heroIn .8s ease forwards; animation-delay:.4s;}
@keyframes heroIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}

/* ============ MOCK: BROWSER (Web Dev) ============ */
.mock-browser{width:100%; max-width:340px; margin:0 auto; background:#fff; border-radius:14px; border:1px solid var(--line); box-shadow:0 24px 50px -20px rgba(11,26,70,.3); overflow:hidden;}
.mock-browser-bar{display:flex; gap:6px; padding:12px 14px; background:var(--sky);}
.mock-browser-dot{width:8px; height:8px; border-radius:50%; background:var(--line);}
.mock-browser-body{padding:22px 20px 28px; display:flex; flex-direction:column; gap:12px;}
.mock-line{height:10px; border-radius:5px; background:var(--sky); animation:lineGrow 2.2s ease-in-out infinite;}
.mock-line.w1{width:60%;} .mock-line.w2{width:88%;} .mock-line.w3{width:40%; animation-delay:.3s;}
.mock-block{height:64px; border-radius:10px; margin:6px 0; background:linear-gradient(120deg,var(--sky),var(--blue-light),var(--sky)); background-size:200% 100%; animation:blockShine 2.6s ease-in-out infinite;}
@keyframes lineGrow{0%,100%{opacity:.45;} 50%{opacity:1;}}
@keyframes blockShine{0%{background-position:0% 0;} 100%{background-position:200% 0;}}

/* ============ MOCK: CART (E-commerce) ============ */
.mock-cart{position:relative; width:100%; max-width:260px; margin:40px auto 20px; display:flex; align-items:center; justify-content:center;}
.mock-cart-icon{width:110px; height:110px; color:var(--blue);}
.mock-cart-drop{position:absolute; font-size:1.5rem; animation:dropIn 2.4s ease-in-out infinite;}
.d1{left:6%; top:-30px; animation-delay:0s;}
.d2{left:50%; top:-40px; animation-delay:.7s;}
.d3{right:6%; top:-30px; animation-delay:1.4s;}
@keyframes dropIn{
  0%{transform:translateY(0) scale(1); opacity:0;}
  15%{opacity:1;}
  55%{transform:translateY(60px) scale(.85); opacity:1;}
  70%{transform:translateY(66px) scale(.6); opacity:0;}
  100%{opacity:0;}
}
.mock-price-tag{
  position:absolute; bottom:-6px; right:8%; background:var(--navy); color:#fff; font-family:var(--mono);
  font-size:.75rem; padding:5px 12px; border-radius:999px; animation:tagPop 2.4s ease-in-out infinite;
}
@keyframes tagPop{0%,60%{opacity:0; transform:scale(.7);} 75%{opacity:1; transform:scale(1.05);} 90%{transform:scale(1);} 100%{opacity:0;}}

/* ============ MOCK: CHAT (AI) ============ */
.mock-chat{width:100%; max-width:300px; margin:20px auto; display:flex; flex-direction:column; gap:12px;}
.mock-bubble{padding:12px 16px; border-radius:16px; font-size:.88rem; max-width:80%; opacity:0; animation:bubbleIn .5s ease forwards;}
.mock-bubble.in{background:var(--sky); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px; animation-delay:.2s;}
.mock-bubble.typing{background:var(--sky); align-self:flex-start; display:flex; gap:5px; padding:14px 18px; border-bottom-left-radius:4px; animation-delay:.9s;}
.mock-bubble.typing span{width:6px; height:6px; border-radius:50%; background:var(--blue-light); animation:typingDot 1s ease-in-out infinite;}
.mock-bubble.typing span:nth-child(2){animation-delay:.15s;} .mock-bubble.typing span:nth-child(3){animation-delay:.3s;}
.mock-bubble.out{background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; animation-delay:1.8s;}
@keyframes bubbleIn{to{opacity:1;}}
@keyframes typingDot{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-5px); opacity:1;}}

/* ============ MOCK: PHONE FEED (Social) ============ */
.mock-phone{position:relative; width:150px; height:260px; margin:0 auto; border:4px solid var(--navy); border-radius:26px; overflow:hidden; background:#fff; box-shadow:0 24px 50px -20px rgba(11,26,70,.3);}
.mock-feed{display:flex; flex-direction:column; gap:8px; padding:10px; animation:feedScroll 6s linear infinite;}
.mock-post{height:70px; border-radius:10px; flex-shrink:0; background:linear-gradient(135deg,var(--blue-light),var(--blue));}
.mock-post:nth-child(2n){background:linear-gradient(135deg,var(--amber),var(--blue-light));}
.mock-post:nth-child(3n){background:linear-gradient(135deg,var(--navy),var(--blue));}
@keyframes feedScroll{0%{transform:translateY(0);} 100%{transform:translateY(-50%);}}
.mock-heart{position:absolute; bottom:14px; right:14px; font-size:1.3rem; opacity:0; animation:heartPop 3s ease-in-out infinite;}
@keyframes heartPop{0%,70%{opacity:0; transform:scale(.5);} 82%{opacity:1; transform:scale(1.2);} 92%{opacity:1; transform:scale(1);} 100%{opacity:0;}}

/* ============ TOOLS GRID ============ */
.tools-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:36px;}
.tool-chip{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 14px;
  display:flex; flex-direction:column; align-items:center; gap:10px; font-weight:600; font-size:.88rem; color:var(--navy);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tool-chip:hover{transform:translateY(-5px); box-shadow:0 16px 30px -16px rgba(27,75,224,.3); border-color:var(--blue-light);}
.tool-mono{
  width:40px; height:40px; border-radius:10px; background:var(--sky); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:.85rem;
}
@media (max-width:900px){.tools-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.tools-grid{grid-template-columns:repeat(2,1fr);}}

/* ============ TRUST STRIP (avatars + rating, under marquee) ============ */
.trust-strip{background:#fff; padding:34px 0; border-bottom:1px solid var(--line);}
.trust-inner{display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap; text-align:left;}
.avatar-cluster{display:flex; align-items:center;}
.avatar-cluster .mini-avatar{
  width:42px; height:42px; border-radius:50%; border:3px solid #fff; margin-left:-14px;
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:.82rem; color:#fff;
  box-shadow:0 4px 10px -4px rgba(11,26,70,.3);
}
.avatar-cluster .mini-avatar:first-child{margin-left:0;}
.trust-copy{display:flex; flex-direction:column; gap:2px;}
.trust-copy .trust-stars{color:var(--amber); font-size:.95rem; letter-spacing:1px;}
.trust-copy strong{color:var(--navy); font-family:var(--display); font-size:1.02rem;}
.trust-copy span{color:var(--ink-soft); font-size:.86rem;}
.trust-divider{width:1px; height:36px; background:var(--line);}
.trust-tags{display:flex; gap:10px; flex-wrap:wrap; font-family:var(--mono); color:var(--navy); font-size:.82rem;}
.trust-tags span{background:var(--sky); padding:6px 14px; border-radius:999px;}
@media (max-width:700px){ .trust-divider{display:none;} .trust-inner{justify-content:center;} }

.service-card{position:relative; overflow:hidden;}
@keyframes motionPulse{0%,100%{transform:scale(1); opacity:.6;} 50%{transform:scale(1.9); opacity:1;}}

/* ============ INDUSTRIES / NICHES GRID ============ */
.industries{background:var(--sky);}
.industries .industry-card{background:#fff; border-color:var(--line);}
.industries .industry-card:hover{background:var(--sky);}
.industries .industry-icon{background:var(--sky);}
.industries .industry-card:hover .industry-icon{background:#fff;}
.industry-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px;}
.industry-card{
  background:var(--sky); border-radius:var(--radius); padding:26px 22px; text-align:left;
  border:1px solid transparent; transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
  position:relative; overflow:hidden;
}
.industry-card:hover{transform:translateY(-6px); background:#fff; border-color:var(--line); box-shadow:0 20px 40px -18px rgba(27,75,224,.28);}
.industry-icon{
  width:52px; height:52px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:16px; box-shadow:0 8px 18px -10px rgba(11,26,70,.2);
  animation:industryFloat 3.6s ease-in-out infinite;
}
.industry-card:nth-child(2n) .industry-icon{animation-delay:-1.2s;}
.industry-card:nth-child(3n) .industry-icon{animation-delay:-2.4s;}
@keyframes industryFloat{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-6px) rotate(-4deg);}}
.industry-card h4{color:var(--navy); font-size:1.02rem; margin-bottom:8px;}
.industry-card p{color:var(--ink-soft); font-size:.88rem; line-height:1.5;}
.industry-card .industry-glow{
  position:absolute; width:120px; height:120px; border-radius:50%; background:var(--blue-light);
  opacity:0; filter:blur(40px); top:-40px; right:-40px; transition:opacity .4s ease;
}
.industry-card:hover .industry-glow{opacity:.25;}
@media (max-width:900px){ .industry-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .industry-grid{grid-template-columns:1fr;} }

/* ============ WHY TRUST US ============ */
.trust-why{background:#fff;}
.trust-why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px;}
.trust-why-card{background:var(--sky); border-radius:var(--radius); padding:28px 22px; text-align:center; border:1px solid transparent; transition:transform .3s ease, box-shadow .3s ease, background .3s ease;}
.trust-why-card:hover{background:#fff; border-color:var(--line);}
.trust-why-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -18px rgba(27,75,224,.28);}
.trust-why-icon{
  width:54px; height:54px; margin:0 auto 16px; border-radius:50%; background:var(--sky); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  animation:floatY 3.4s ease-in-out infinite;
}
.trust-why-card:nth-child(2n) .trust-why-icon{animation-delay:-1s;}
.trust-why-card:nth-child(3n) .trust-why-icon{animation-delay:-2s;}
.trust-why-card h4{color:var(--navy); font-size:1rem; margin-bottom:8px;}
.trust-why-card p{color:var(--ink-soft); font-size:.88rem;}
@media (max-width:900px){ .trust-why-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .trust-why-grid{grid-template-columns:1fr;} }

/* ============ TESTIMONIAL MARQUEE (replaces static grid) ============ */
.reviews{background:var(--sky); overflow:hidden;}
.review-rating-summary{display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap;}
.review-rating-summary .big-rating{font-family:var(--display); font-size:2.2rem; color:var(--navy); font-weight:600;}
.review-rating-summary .rating-stars{color:var(--amber); font-size:1.1rem; letter-spacing:2px;}
.review-rating-summary span.rating-note{color:var(--ink-soft); font-size:.88rem; font-family:var(--body);}
.review-track-wrap{margin-top:44px; position:relative;}
.review-track-wrap::before, .review-track-wrap::after{
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.review-track-wrap::before{left:0; background:linear-gradient(90deg, var(--sky), transparent);}
.review-track-wrap::after{right:0; background:linear-gradient(270deg, var(--sky), transparent);}
.review-track{display:flex; gap:22px; width:max-content; animation:reviewScroll 42s linear infinite;}
.review-track-wrap:hover .review-track{animation-play-state:paused;}
@keyframes reviewScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.review-card{
  background:#fff; border-radius:var(--radius); padding:28px; border:1px solid var(--line);
  width:360px; flex-shrink:0; transition:transform .3s ease, box-shadow .3s ease;
}
.review-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -18px rgba(11,26,70,.25);}
.review-card .review-top{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.review-avatar{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600; color:#fff; font-size:.92rem; flex-shrink:0;
}
.review-meta{display:flex; flex-direction:column; gap:4px; border-top:none; padding-top:0;}
.review-name{font-weight:700; font-size:.9rem; color:var(--navy);}
.review-role{font-size:.78rem; color:var(--ink-soft);}
.review-disclaimer{text-align:center; font-size:.8rem; color:var(--ink-soft); margin-top:28px; opacity:.75;}

/* ============ FAQ ACCORDION ============ */
.faq{background:#fff;}
.faq-list{max-width:760px; margin-top:44px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px; background:none; border:none; text-align:left; cursor:pointer;
  font-family:var(--display); font-size:1.05rem; color:var(--navy); font-weight:600;
}
.faq-icon{
  width:28px; height:28px; border-radius:50%; background:var(--sky); color:var(--blue); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:transform .35s ease, background .3s ease;
}
.faq-item.open .faq-icon{transform:rotate(45deg); background:var(--blue); color:#fff;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.faq-a p{color:var(--ink-soft); font-size:.95rem; padding:0 4px 22px; max-width:640px; line-height:1.6;}
.faq-item.open .faq-a{max-height:200px;}

/* ============ WORK PAGE: HERO STAT ROW ============ */
.page-hero-stats{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;}
.page-hero-stats span{font-family:var(--mono); font-size:.8rem; color:var(--navy); background:#fff; border:1px solid var(--line); padding:6px 14px; border-radius:999px;}

/* ============ WORK CARD: MINI VISUAL MOCKUPS ============ */
.work-thumb{height:180px; padding:18px;}
.work-thumb svg{width:auto;} /* legacy override safety */

.mini-mock{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}

/* --- web: mini browser with loading lines --- */
.mini-browser{width:150px; background:rgba(255,255,255,.97); border-radius:9px; padding:9px 11px 13px; box-shadow:0 14px 30px -12px rgba(0,0,0,.4);}
.mini-browser-dots{display:flex; gap:4px; margin-bottom:8px;}
.mini-browser-dots span{width:5px; height:5px; border-radius:50%; background:rgba(11,26,70,.22);}
.mini-browser-line{height:6px; border-radius:3px; background:var(--sky); margin-bottom:6px; animation:lineGrow 2.2s ease-in-out infinite;}
.mini-browser-line.w1{width:70%;} .mini-browser-line.w2{width:100%;} .mini-browser-line.w3{width:45%; animation-delay:.3s;}
.mini-browser-block{height:26px; border-radius:6px; margin-top:4px; background:linear-gradient(120deg,var(--sky),var(--blue-light),var(--sky)); background-size:200% 100%; animation:blockShine 2.6s ease-in-out infinite;}

/* --- ecom: cart with items dropping --- */
.mini-cart{position:relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center;}
.mini-cart svg{width:64px; height:64px; color:#fff; opacity:.95;}
.mini-cart-drop{position:absolute; font-size:1.1rem; animation:dropIn 2.2s ease-in-out infinite;}
.mini-cart-drop.c1{left:14%; top:-6px; animation-delay:0s;}
.mini-cart-drop.c2{left:50%; top:-14px; transform:translateX(-50%); animation-delay:.6s;}
.mini-cart-drop.c3{right:14%; top:-6px; animation-delay:1.2s;}
.mini-cart-tag{position:absolute; bottom:2px; right:6%; background:var(--navy); color:#fff; font-family:var(--mono); font-size:.62rem; padding:3px 9px; border-radius:999px; animation:tagPop 2.2s ease-in-out infinite;}

/* --- ai: mini chat bubbles --- */
.mini-chat{width:140px; display:flex; flex-direction:column; gap:7px;}
.mini-chat .mb{padding:7px 11px; border-radius:12px; font-size:.68rem; max-width:78%; opacity:0; animation:bubbleIn .5s ease forwards; line-height:1.3;}
.mini-chat .mb.in{background:rgba(255,255,255,.9); color:var(--navy); align-self:flex-start; border-bottom-left-radius:3px; animation-delay:.2s;}
.mini-chat .mb.typing{background:rgba(255,255,255,.9); align-self:flex-start; display:flex; gap:4px; padding:9px 12px; border-bottom-left-radius:3px; animation-delay:.9s;}
.mini-chat .mb.typing span{width:4px; height:4px; border-radius:50%; background:var(--blue); animation:typingDot 1s ease-in-out infinite;}
.mini-chat .mb.typing span:nth-child(2){animation-delay:.15s;} .mini-chat .mb.typing span:nth-child(3){animation-delay:.3s;}
.mini-chat .mb.out{background:var(--navy); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; animation-delay:1.8s;}

/* --- social: mini scrolling phone feed --- */
.mini-phone{position:relative; width:92px; height:150px; border:3px solid rgba(255,255,255,.85); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.15);}
.mini-feed{display:flex; flex-direction:column; gap:6px; padding:7px; animation:feedScroll 6s linear infinite;}
.mini-post{height:40px; border-radius:7px; flex-shrink:0; background:rgba(255,255,255,.55);}
.mini-post:nth-child(2n){background:rgba(255,255,255,.85);}
.mini-post:nth-child(3n){background:rgba(255,255,255,.35);}
.mini-heart{position:absolute; bottom:8px; right:8px; font-size:.95rem; opacity:0; animation:heartPop 3s ease-in-out infinite;}

/* --- live badge on each thumb --- */
.work-live{
  position:absolute; top:12px; left:14px; display:flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:.66rem; color:#fff; opacity:.85; letter-spacing:.03em;
}
.work-live .dot{width:6px; height:6px; border-radius:50%; background:#7FA8F7; animation:motionPulse 1.8s ease-in-out infinite;}

/* ============ WORK CARD: TOOL TAGS ============ */
.work-tags{display:flex; gap:6px; flex-wrap:wrap; padding:0 20px 20px;}
.work-tags span{font-family:var(--mono); font-size:.7rem; color:var(--blue); background:var(--sky); padding:4px 10px; border-radius:999px;}

/* ============ WORK PAGE: INCLUDED IN EVERY BUILD ============ */
.included{background:var(--sky);}
.included-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px;}
.included-card{background:#fff; border-radius:var(--radius); padding:26px 22px; border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease;}
.included-card:hover{transform:translateY(-5px); box-shadow:0 18px 36px -18px rgba(27,75,224,.28);}
.included-num{font-family:var(--mono); font-size:.78rem; color:var(--blue-light); margin-bottom:10px; display:block;}
.included-card h4{color:var(--navy); font-size:1rem; margin-bottom:8px;}
.included-card p{color:var(--ink-soft); font-size:.88rem;}
@media (max-width:900px){ .included-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .included-grid{grid-template-columns:1fr;} }

/* ============ TEAM GRID ============ */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:20px;}
.team-card{background:#fff; border-radius:var(--radius); padding:28px 22px; border:1px solid var(--line); text-align:center; transition:transform .3s ease, box-shadow .3s ease;}
.team-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -18px rgba(27,75,224,.28);}
.team-icon{font-size:2rem; margin-bottom:14px;}
.team-card h4{color:var(--navy); margin-bottom:8px; font-size:1.05rem;}
.team-card p{color:var(--ink-soft); font-size:.9rem;}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr;}}


/* ============ HEADER CTA (visibility fix) ============ */
.btn-header-cta{
  background:linear-gradient(135deg, var(--blue), var(--blue-soft));
  color:var(--navy);
  border:none;
  box-shadow:0 6px 18px -6px rgba(78,126,240,.55);
}
.btn-header-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -6px rgba(78,126,240,.7);
  color:var(--navy);
}

/* ============ BRAND MARK ============ */
/* Traced directly from the supplied logo file - the outline is the artwork
   itself, not a redraw, so the mark is pixel-faithful at any size. */
.brand-mark{width:auto; height:26px; display:block; flex:none;}
.brand-mark .wv-navy{fill:#0A1A55;}
.brand-mark .wv-check{fill:url(#wvCheckGrad);}
.brand-lockup{display:inline-flex; align-items:center; gap:12px;}
.brand-word{
  font-family:var(--display); font-weight:700; font-size:1.22rem; letter-spacing:-.02em;
  color:var(--navy); line-height:1; white-space:nowrap;
}
/* On navy the logo sits on its own white plate, so the artwork itself is
   never altered or recoloured. */
.brand-lockup--light .brand-mark{
  background:#fff; padding:9px 12px; border-radius:10px; height:44px; box-sizing:content-box;
}
.brand-lockup--light .brand-word{color:#fff;}
.brand-lockup:hover .brand-mark{transform:translateY(-1px);}
.brand-mark{transition:transform .25s ease;}

/* ============ HERO: THE DELIVERY FLOOR ============ */
/* Four stations, one per service, each with a person visibly at work and a
   screen showing that discipline: a site being built, a store taking
   orders, a workflow running itself, a channel growing. Finished work is
   walked to the client, who signs off. All hand-built SVG + CSS. */
.hero-panel{position:relative;}
.studio-stage{
  position:relative; width:100%; max-width:560px; margin:0 auto;
  transform:translateY(calc(var(--sp,0) * -16px));
  transition:transform .05s linear;
  --skin-a:#EFBB92; --skin-b:#C88A5F; --skin-c:#8E5B3C; --skin-d:#DDA377;
  --hair-a:#2B2A33; --hair-b:#3E2A22; --hair-c:#141420; --hair-d:#4A3327;
  --shirt-a:#1B4BE0; --shirt-b:#0B1A46; --shirt-c:#4E7EF0; --shirt-d:#334463;
}
.wv-scene{width:100%; height:auto; display:block; overflow:visible;}

.wv-room{fill:#fff; stroke:var(--line); stroke-width:1.5; filter:drop-shadow(0 28px 54px rgba(11,26,70,.16));}
.wv-hline{stroke:#DCE5F6; stroke-width:1.5;}
.wv-shadow{fill:rgba(11,26,70,.05);}
.wv-shadow-sm{fill:rgba(11,26,70,.09);}

/* --- desks, monitors, chairs --- */
.wv-chair{fill:#D5DFF3;}
.wv-desk{fill:#F4F7FE; stroke:#DBE3F5; stroke-width:1.4;}
.wv-desk-leg{fill:#DDE5F5;}
.wv-keyboard{fill:#DEE6F6;}
.wv-mon-shell{fill:#fff; stroke:#CFDAF0; stroke-width:1.6;}
.wv-mon-screen{fill:#F6F9FF;}
.wv-mon-neck,.wv-mon-foot{fill:#D2DCF1;}

/* --- the people --- */
.wv-station-1 .wv-head,.wv-station-1 .wv-neck{fill:var(--skin-a);}
.wv-station-1 .wv-hair{fill:var(--hair-a);}
.wv-station-1 .wv-torso,.wv-station-1 .wv-sleeve{fill:var(--shirt-a);}
.wv-station-1 .wv-hand{fill:var(--skin-a);}
.wv-station-2 .wv-head,.wv-station-2 .wv-neck{fill:var(--skin-b);}
.wv-station-2 .wv-hair,.wv-station-2 .wv-bun{fill:var(--hair-b);}
.wv-station-2 .wv-torso,.wv-station-2 .wv-sleeve{fill:var(--shirt-b);}
.wv-station-2 .wv-hand{fill:var(--skin-b);}
.wv-station-3 .wv-head,.wv-station-3 .wv-neck{fill:var(--skin-c);}
.wv-station-3 .wv-hair,.wv-station-3 .wv-longhair{fill:var(--hair-c);}
.wv-station-3 .wv-torso,.wv-station-3 .wv-sleeve{fill:var(--shirt-c);}
.wv-station-3 .wv-hand{fill:var(--skin-c);}
.wv-station-4 .wv-head,.wv-station-4 .wv-neck{fill:var(--skin-d);}
.wv-station-4 .wv-hair{fill:var(--hair-d);}
.wv-station-4 .wv-torso,.wv-station-4 .wv-sleeve{fill:var(--shirt-d);}
.wv-station-4 .wv-hand{fill:var(--skin-d);}
.wv-sleeve,.wv-sleeve-w,.wv-sleeve-c{stroke:rgba(255,255,255,.5); stroke-width:1.2;}
.wv-smile,.wv-smile-c{fill:none; stroke:#8A5A3C; stroke-width:1.5; stroke-linecap:round;}
.wv-specs{fill:none; stroke:#33405C; stroke-width:1.2; opacity:.85;}
.wv-eyes{fill:#22212A; transform-box:fill-box; transform-origin:center; animation:wvBlink 6.5s infinite;}
.wv-station-2 .wv-eyes{animation-delay:1.3s;}
.wv-station-3 .wv-eyes{animation-delay:2.6s;}
.wv-station-4 .wv-eyes{animation-delay:3.9s;}
@keyframes wvBlink{0%,94%,100%{transform:scaleY(1);} 96%{transform:scaleY(.12);} 98%{transform:scaleY(1);}}
.wv-headbob{transform-box:fill-box; transform-origin:50% 100%; animation:wvHeadBob 3.4s ease-in-out infinite;}
.wv-station-2 .wv-headbob{animation-duration:3.9s; animation-delay:-1.1s;}
.wv-station-3 .wv-headbob{animation-duration:3.1s; animation-delay:-2.2s;}
.wv-station-4 .wv-headbob{animation-duration:3.6s; animation-delay:-.7s;}
@keyframes wvHeadBob{0%,100%{transform:translateY(0) rotate(-2.4deg);} 50%{transform:translateY(-1.5px) rotate(2.4deg);}}
.wv-arm{transform-box:fill-box; transform-origin:50% 0;}
.wv-arm-l{animation:wvArmL 1.05s ease-in-out infinite;}
.wv-arm-r{animation:wvArmR 1.05s ease-in-out infinite; animation-delay:-.5s;}
.wv-station-2 .wv-arm{animation-duration:1.3s;}
.wv-station-3 .wv-arm{animation-duration:.92s;}
.wv-station-4 .wv-arm{animation-duration:1.16s;}
@keyframes wvArmL{0%,100%{transform:rotate(-8deg);} 50%{transform:rotate(-16deg);}}
@keyframes wvArmR{0%,100%{transform:rotate(8deg);} 50%{transform:rotate(16deg);}}

/* --- discipline plates --- */
.wv-plate rect{fill:var(--navy);}
.wv-plate-txt{
  font-family:var(--body); font-size:12.5px; font-weight:600;
  letter-spacing:.12em; fill:#fff;
}


/* --- finished work leaving each desk --- */
.wv-out-box{fill:var(--blue); stroke:#fff; stroke-width:1.2;}
.wv-out-tape{stroke:rgba(255,255,255,.85); stroke-width:1.4;}
.wv-out{opacity:0; transform-box:fill-box; transform-origin:center; animation:wvOut 6s ease-in-out infinite;}
.wv-station-2 .wv-out{animation-delay:1.5s;}
.wv-station-3 .wv-out{animation-delay:3s;}
.wv-station-4 .wv-out{animation-delay:4.5s;}
@keyframes wvOut{
  0%{opacity:0; transform:translateY(6px) scale(.6);}
  8%{opacity:1; transform:translateY(0) scale(1);}
  26%{opacity:1; transform:translateY(-14px) scale(1);}
  40%{opacity:0; transform:translateY(-30px) scale(.85);}
  100%{opacity:0; transform:translateY(-30px) scale(.85);}
}

/* --- screen 1: a website being built --- */
.wv-scr-bar{fill:var(--navy);}
.wv-scr-dot{fill:rgba(255,255,255,.5);}
.wv-code{fill:#C6D4F3; transform-box:fill-box; transform-origin:0% 50%; animation:wvType 3.6s ease-in-out infinite;}
.wv-code-key{fill:var(--blue-soft);}
.wv-code-2{animation-delay:.3s;} .wv-code-3{animation-delay:.6s;} .wv-code-4{animation-delay:.9s;}
@keyframes wvType{0%{transform:scaleX(0);} 45%{transform:scaleX(1);} 88%{transform:scaleX(1);} 100%{transform:scaleX(0);}}
.wv-buildblock{fill:var(--sky); stroke:var(--blue-soft); stroke-width:1.2; transform-box:fill-box; transform-origin:center; animation:wvBlockIn 3.6s ease-in-out infinite;}
.wv-buildline{fill:var(--blue-soft); opacity:.5;}
@keyframes wvBlockIn{0%{transform:scale(.7); opacity:0;} 20%{transform:scale(1.05); opacity:1;} 34%,88%{transform:scale(1); opacity:1;} 100%{transform:scale(.92); opacity:0;}}
.wv-bar-track{fill:#E7EDFA;}
.wv-bar-run{fill:var(--blue); animation:wvRun 2.4s ease-in-out infinite alternate;}
@keyframes wvRun{from{transform:translateX(0);} to{transform:translateX(42px);}}

/* --- screen 2: a store taking orders --- */
.wv-tile{fill:#E7EDFA;}
.wv-tile-2{animation:wvTilePulse 4s ease-in-out infinite; animation-delay:.5s;}
.wv-tile-3{animation:wvTilePulse 4s ease-in-out infinite; animation-delay:2s;}
@keyframes wvTilePulse{0%,100%{fill:#E7EDFA;} 50%{fill:#CFDCFA;}}
.wv-cart-bg{fill:var(--navy);}
.wv-cart-glyph{fill:none; stroke:#fff; stroke-width:1.5; stroke-linejoin:round;}
.wv-cart-wheel{fill:#fff;}
.wv-cart-icon{transform-box:fill-box; transform-origin:center; animation:wvCartBob 2.2s ease-in-out infinite;}
.wv-checkout{fill:var(--blue);}
.wv-checkout-txt{fill:rgba(255,255,255,.9);}
@keyframes wvCartBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-2.5px);}}
.wv-order-badge{fill:var(--blue);}
.wv-node-line{fill:var(--blue-soft); opacity:.6;}
.wv-order-num{font-family:var(--body); font-size:6.5px; font-weight:700; fill:#fff;}
.wv-order-pop{opacity:0; transform-box:fill-box; transform-origin:center; animation:wvOrderPop 3.2s ease-in-out infinite;}
@keyframes wvOrderPop{
  0%{opacity:0; transform:translateY(8px) scale(.5);}
  14%{opacity:1; transform:translateY(0) scale(1.12);}
  22%,62%{opacity:1; transform:translateY(0) scale(1);}
  78%,100%{opacity:0; transform:translateY(-8px) scale(.85);}
}

/* --- screen 3: a workflow running itself --- */
.wv-flow-path{fill:none; stroke:var(--blue-soft); stroke-width:1.8; opacity:.55; stroke-dasharray:3 4; animation:wvDash 2s linear infinite;}
@keyframes wvDash{to{stroke-dashoffset:-14;}}
.wv-node{fill:#fff; stroke:var(--blue-soft); stroke-width:1.5;}
.wv-node-1{animation:wvNodeOn 3s ease-in-out infinite;}
.wv-node-2{animation:wvNodeOn 3s ease-in-out infinite; animation-delay:.5s;}
.wv-node-3{animation:wvNodeOn 3s ease-in-out infinite; animation-delay:1s;}
@keyframes wvNodeOn{0%,100%{fill:#fff;} 24%{fill:var(--sky); stroke:var(--blue);} 60%{fill:#fff;}}
.wv-flow-dot{fill:var(--blue); animation:wvFlowDot 3s linear infinite;}
@keyframes wvFlowDot{
  0%{transform:translate(-70px,-46px); opacity:0;}
  8%{opacity:1;}
  46%{transform:translate(-50px,-30px); opacity:1;}
  84%{transform:translate(-30px,-46px); opacity:1;}
  92%,100%{transform:translate(-30px,-46px); opacity:0;}
}
.wv-gear-body{fill:var(--blue-soft);}
.wv-gear-hole{fill:#F6F9FF;}
.wv-gear{transform-box:fill-box; transform-origin:center; animation:wvSpin 6s linear infinite;}
@keyframes wvSpin{to{transform:rotate(360deg);}}
.wv-task{fill:#E7EDFA;}
.wv-tick circle{fill:var(--blue);}
.wv-tick path{fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.wv-tick{opacity:0; transform-box:fill-box; transform-origin:center; animation:wvTick 3s ease-in-out infinite;}
.wv-tick-2{animation-delay:1.2s;}
@keyframes wvTick{0%,20%{opacity:0; transform:scale(.4);} 32%{opacity:1; transform:scale(1.15);} 40%,80%{opacity:1; transform:scale(1);} 94%,100%{opacity:0; transform:scale(.8);}}

/* --- screen 4: an audience growing --- */
.wv-post{fill:#fff; stroke:#DCE5F6; stroke-width:1.3;}
.wv-post-av{fill:var(--blue-soft);}
.wv-post-line{fill:#DCE5F6;}
.wv-heart{fill:var(--blue); transform-box:fill-box; transform-origin:center; animation:wvHeart 1.8s ease-in-out infinite;}
@keyframes wvHeart{0%,100%{transform:scale(.92);} 40%{transform:scale(1.12);} 60%{transform:scale(1);}}
.wv-float circle{fill:var(--blue-soft);}
.wv-float{opacity:0; animation:wvFloatUp 2.6s ease-in-out infinite;}
.wv-float-2{animation-delay:.85s;} .wv-float-3{animation-delay:1.7s;}
@keyframes wvFloatUp{0%{opacity:0; transform:translateY(4px);} 25%{opacity:1;} 100%{opacity:0; transform:translateY(-18px);}}
.wv-gbar{fill:#CFDCFA; transform-box:fill-box; transform-origin:50% 100%; animation:wvGbar 3s ease-in-out infinite;}
.wv-gbar-hot{fill:var(--blue);}
.wv-gbar-2{animation-delay:.2s;} .wv-gbar-3{animation-delay:.4s;} .wv-gbar-4{animation-delay:.6s;}
@keyframes wvGbar{0%,100%{transform:scaleY(.62);} 50%{transform:scaleY(1);}}

/* --- the handover --- */
.wv-torso-w,.wv-sleeve-w{fill:var(--blue);}
.wv-head-w,.wv-neck-w,.wv-hand-w{fill:var(--skin-d);}
.wv-hair-w{fill:var(--hair-d);}
.wv-trouser{fill:var(--navy);} .wv-trouser-c{fill:#33405C;} .wv-shoe{fill:#1B2540;}
.wv-box{fill:var(--blue); stroke:#123AB4; stroke-width:1.2;}
.wv-box-tape{stroke:rgba(255,255,255,.9); stroke-width:1.6;}
.wv-walk{animation:wvWalk 7s linear infinite;}
@keyframes wvWalk{
  0%{transform:translateX(30px); opacity:0;}
  5%{opacity:1;}
  60%{transform:translateX(420px); opacity:1;}
  70%{transform:translateX(446px); opacity:1;}
  80%{transform:translateX(474px); opacity:0;}
  100%{transform:translateX(474px); opacity:0;}
}
.wv-walk-bob{animation:wvBob .34s ease-in-out infinite alternate;}
@keyframes wvBob{from{transform:translateY(0);} to{transform:translateY(-2.5px);}}
.wv-leg{transform-box:fill-box; transform-origin:50% 0; animation:wvStep .68s ease-in-out infinite;}
.wv-leg-b{animation-delay:-.34s;}
@keyframes wvStep{0%,100%{transform:rotate(20deg);} 50%{transform:rotate(-20deg);}}
.wv-arm-carry{transform-box:fill-box; transform-origin:50% 0; animation:wvCarry .68s ease-in-out infinite alternate;}
@keyframes wvCarry{from{transform:rotate(-29deg);} to{transform:rotate(-36deg);}}
.wv-carry{animation:wvHandoff 7s linear infinite;}
@keyframes wvHandoff{0%,60%{opacity:1;} 64%,99%{opacity:0;} 100%{opacity:1;}}

.wv-torso-c,.wv-sleeve-c{fill:var(--blue-soft);}
.wv-head-c,.wv-neck-c,.wv-hand-c{fill:var(--skin-a);}
.wv-hair-c{fill:var(--hair-c);}
.wv-eyes-c{animation-delay:2.1s;} .wv-eyes-w{animation-delay:.9s;}
.wv-client{transform-box:fill-box; transform-origin:50% 100%; animation:wvCheer 7s ease-in-out infinite;}
@keyframes wvCheer{
  0%,58%{transform:translateY(0) rotate(0);}
  64%{transform:translateY(-7px) rotate(-2deg);}
  70%{transform:translateY(0) rotate(0);}
  76%{transform:translateY(-4px) rotate(1.5deg);}
  82%,100%{transform:translateY(0) rotate(0);}
}
.wv-arm-c{transform-box:fill-box; transform-origin:50% 0; animation:wvClientArm 7s ease-in-out infinite;}
@keyframes wvClientArm{0%,52%{transform:rotate(10deg);} 62%{transform:rotate(56deg);} 76%{transform:rotate(47deg);} 90%,100%{transform:rotate(10deg);}}
.wv-received{opacity:0; transform-box:fill-box; transform-origin:center; animation:wvReceived 7s ease-in-out infinite;}
@keyframes wvReceived{
  0%,62%{opacity:0; transform:translateX(14px) scale(.7);}
  68%{opacity:1; transform:translateX(0) scale(1.06);}
  74%,90%{opacity:1; transform:translateX(0) scale(1);}
  96%,100%{opacity:0; transform:translateX(0) scale(.9);}
}
.wv-cheer-star{fill:var(--blue); opacity:0; transform-box:fill-box; transform-origin:center; animation:wvCheerPop 7s ease-out infinite;}
.wv-cheer-2{animation-delay:.13s;} .wv-cheer-3{animation-delay:.26s;}
@keyframes wvCheerPop{
  0%,64%{opacity:0; transform:translateY(10px) scale(.4);}
  70%{opacity:1; transform:translateY(0) scale(1.15);}
  76%{transform:translateY(-2px) scale(1);}
  88%{opacity:1; transform:translateY(-10px) scale(.95);}
  94%,100%{opacity:0; transform:translateY(-18px) scale(.8);}
}

/* --- floating status tags around the panel --- */
.sf-tag{
  position:absolute; display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; font-size:.78rem; font-weight:600; color:var(--navy);
  box-shadow:0 16px 30px -16px rgba(11,26,70,.45); white-space:nowrap;
  opacity:0; animation:sfTagPop 14s ease-in-out infinite;
}
.sf-tag-dot{width:8px; height:8px; border-radius:50%; display:block; background:var(--blue);}
.sf-tag-dot.dot-soft{background:var(--blue-soft);}
.sf-tag-check{width:14px; height:14px; fill:none; stroke:var(--blue); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.sf-tag-1{top:4%; left:-5%;}
.sf-tag-2{top:26%; right:-5%; animation-delay:3.5s;}
.sf-tag-3{bottom:26%; left:-6%; animation-delay:7s;}
.sf-tag-4{bottom:5%; right:-4%; animation-delay:10.5s;}
@keyframes sfTagPop{
  0%{opacity:0; transform:translateY(10px) scale(.92);}
  3%{opacity:1; transform:translateY(0) scale(1);}
  20%{opacity:1; transform:translateY(-4px) scale(1);}
  25%{opacity:0; transform:translateY(-10px) scale(.95);}
  100%{opacity:0; transform:translateY(10px) scale(.92);}
}

@media (max-width:900px){
  .studio-stage{max-width:520px; margin-top:16px;}
  .sf-tag-1,.sf-tag-3{left:-2%;} .sf-tag-2,.sf-tag-4{right:-2%;}
}
@media (max-width:560px){
  .studio-stage{max-width:100%;}
  .sf-tag{font-size:.68rem; padding:6px 11px;}
  .sf-tag-1,.sf-tag-3{left:0;} .sf-tag-2,.sf-tag-4{right:0;}
}

@media (prefers-reduced-motion:reduce){
  .wv-scene *{animation:none !important;}
  .studio-stage{transform:none !important;}
  .wv-out,.wv-received,.wv-cheer-star,.wv-tick,.wv-order-pop,.wv-float,.sf-tag{opacity:1 !important;}
  .wv-walk{transform:translateX(300px) !important;}
  .sf-tag{transform:none !important;}
}

/* ============ LIVE OPS RADAR (replaces marquee + trust strip) ============ */
/* A control-room HUD: a dial bezel with tick marks, two counter-rotating
   sweep beams, sonar pings pulsing out from the core, and a softly
   drifting grid behind it all — so the panel reads as a live monitoring
   console running round-the-clock, not a static stat block. */
.ops-radar-section{background:linear-gradient(180deg,#fff 0%, var(--sky) 100%); padding:64px 0; overflow:hidden; position:relative;}
.ops-grid-bg{display:none;}
.ops-radar{display:flex; align-items:center; gap:56px; flex-wrap:wrap; position:relative;}

.ops-radar-scope{
  position:relative; width:260px; height:260px; flex:0 0 260px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0%, #EEF3FE 55%, #E1E9FA 100%);
  box-shadow:0 0 0 1px var(--line), inset 0 1px 2px rgba(255,255,255,.9), 0 30px 60px -32px rgba(11,26,70,.28), 0 0 44px -18px rgba(27,75,224,.22);
}
/* outer dashed bezel, slowly turning like a dial */
.orb-bezel{
  position:absolute; inset:-14px; border-radius:50%;
  border:1.5px dashed rgba(27,75,224,.22);
  animation:orbSpinSlow 32s linear infinite;
}
@keyframes orbSpinSlow{to{transform:rotate(360deg);}}
/* fine tick marks around the rim, like an instrument dial */
.orb-ticks{
  position:absolute; inset:-4px; border-radius:50%;
  background:repeating-conic-gradient(rgba(11,26,70,.16) 0deg 1.1deg, transparent 1.1deg 15deg);
  -webkit-mask:radial-gradient(circle, transparent 91%, #000 92%, #000 97%, transparent 98%);
  mask:radial-gradient(circle, transparent 91%, #000 92%, #000 97%, transparent 98%);
  animation:orbSpinSlow 90s linear infinite reverse;
}
.orb-ring{position:absolute; border-radius:50%; border:1px solid rgba(11,26,70,.10);}
.orb-ring-1{inset:0;}
.orb-ring-2{inset:22%;}
.orb-ring-3{inset:42%;}
.orb-cross{position:absolute; background:rgba(11,26,70,.08);}
.orb-cross-h{top:50%; left:4%; right:4%; height:1px;}
.orb-cross-v{left:50%; top:4%; bottom:4%; width:1px;}
.orb-sweep{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(27,75,224,.30), rgba(27,75,224,.05) 26%, transparent 60%);
  animation:orbSweep 5s linear infinite;
}
.orb-sweep-2{
  background:conic-gradient(from 180deg, rgba(78,126,240,.24), rgba(78,126,240,.04) 18%, transparent 48%);
  animation:orbSweepReverse 8s linear infinite;
}
@keyframes orbSweep{to{transform:rotate(360deg);}}
@keyframes orbSweepReverse{to{transform:rotate(-360deg);}}
/* sonar pings pulsing outward from the core, continuously, staggered */
.orb-pulse-ring{
  position:absolute; top:50%; left:50%; width:62px; height:62px; border-radius:50%;
  transform:translate(-50%,-50%) scale(1); border:1.5px solid rgba(27,75,224,.35);
  opacity:0; animation:sonarPing 3.6s ease-out infinite;
}
.op-1{animation-delay:0s;}
.op-2{animation-delay:1.2s;}
.op-3{animation-delay:2.4s;}
@keyframes sonarPing{
  0%{transform:translate(-50%,-50%) scale(1); opacity:.5;}
  100%{transform:translate(-50%,-50%) scale(3.4); opacity:0;}
}
.orb-blip{
  position:absolute; left:var(--bx); top:var(--by); transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
  box-shadow:0 0 0 1px var(--line), 0 6px 16px -6px rgba(11,26,70,.28);
  animation:blipPing 3.2s ease-in-out infinite; animation-delay:var(--bd,0s);
}
.orb-blip-sm{width:22px; height:22px; font-size:.68rem;}
@keyframes blipPing{
  0%,100%{box-shadow:0 0 0 1px var(--line), 0 0 0 0 rgba(27,75,224,.35); transform:translate(-50%,-50%) scale(1);}
  30%{box-shadow:0 0 0 1px var(--line), 0 0 0 9px rgba(27,75,224,0); transform:translate(-50%,-50%) scale(1.12);}
}
.orb-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; background:var(--blue);
  display:flex; align-items:center; justify-content:center;
  animation:coreGlow 2.4s ease-in-out infinite;
}
@keyframes coreGlow{0%,100%{box-shadow:0 0 20px rgba(27,75,224,.4);} 50%{box-shadow:0 0 32px rgba(27,75,224,.55);}}
.orb-core-label{font-family:var(--mono); font-weight:700; color:#fff; font-size:.78rem; letter-spacing:.03em;}
/* corner brackets framing the dial, blinking gently like a live feed */
.orb-corner{position:absolute; width:16px; height:16px; border:2px solid rgba(27,75,224,.4); animation:cornerBlink 3s ease-in-out infinite;}
.orb-corner.tl{top:-12px; left:-12px; border-right:none; border-bottom:none;}
.orb-corner.tr{top:-12px; right:-12px; border-left:none; border-bottom:none; animation-delay:.4s;}
.orb-corner.bl{bottom:-12px; left:-12px; border-right:none; border-top:none; animation-delay:.8s;}
.orb-corner.br{bottom:-12px; right:-12px; border-left:none; border-top:none; animation-delay:1.2s;}
@keyframes cornerBlink{0%,100%{opacity:.4;} 50%{opacity:.9;}}

.ops-radar-copy{flex:1 1 320px; min-width:280px;}
.ops-radar-copy .eyebrow{color:var(--blue); display:inline-flex; align-items:center;}
.ops-radar-copy h3{color:var(--navy); font-size:1.7rem; margin:6px 0 12px;}
.ops-radar-sub{color:var(--ink-soft); font-size:1rem; max-width:480px; margin-bottom:22px;}
/* pulsing live-status dot beside "Always on" */
.live-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--blue);
  margin-right:8px; animation:liveDotPulse 1.8s ease-in-out infinite;
}
@keyframes liveDotPulse{
  0%{box-shadow:0 0 0 0 rgba(27,75,224,.45);}
  70%{box-shadow:0 0 0 8px rgba(27,75,224,0);}
  100%{box-shadow:0 0 0 0 rgba(27,75,224,0);}
}
.ops-radar-ticker{position:relative; height:26px;}
.ops-ticker-line{
  position:absolute; left:0; right:0; font-family:var(--mono); font-size:.86rem; color:var(--ink-soft);
  display:flex; align-items:center;
  opacity:0; animation:tickerCycle 12s linear infinite;
}
.ops-ticker-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--blue);
  margin-right:8px; flex:none; box-shadow:0 0 6px rgba(27,75,224,.5);
  animation:tickerDotBlink 1.1s ease-in-out infinite;
}
@keyframes tickerDotBlink{0%,100%{opacity:1;} 50%{opacity:.25;}}
.ops-ticker-1{animation-delay:0s;}
.ops-ticker-2{animation-delay:3s;}
.ops-ticker-3{animation-delay:6s;}
.ops-ticker-4{animation-delay:9s;}
@keyframes tickerCycle{
  0%{opacity:0; transform:translateY(6px);}
  4%{opacity:1; transform:translateY(0);}
  22%{opacity:1; transform:translateY(0);}
  27%{opacity:0; transform:translateY(-6px);}
  100%{opacity:0;}
}
@media (max-width:760px){
  .ops-radar{justify-content:center; text-align:center;}
  .ops-radar-scope{width:220px; height:220px; flex-basis:220px;}
  .ops-radar-sub{margin-left:auto; margin-right:auto;}
  .ops-ticker-line{justify-content:center;}
}

/* ============ CONTACT SECTION / FORM ============ */
.contact-section{background:var(--sky);}
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start;}
.contact-copy .section-sub{margin-bottom:20px;}
.contact-alt{
  display:inline-block; font-family:var(--mono); font-size:.85rem; color:var(--blue);
  border-bottom:1px solid rgba(27,75,224,.35); padding-bottom:2px; margin-bottom:28px;
  transition:border-color .2s;
}
.contact-alt:hover{border-color:var(--blue);}
.contact-socials{margin-top:0;}

.contact-form{
  background:#fff; border-radius:var(--radius); padding:34px 32px;
  box-shadow:0 30px 60px -30px rgba(11,26,70,.25); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:18px;
}
.form-row{display:flex; flex-direction:column; gap:6px; position:relative;}
.form-row label{font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; color:var(--navy); text-transform:uppercase;}
.form-row input, .form-row textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  background:#fbfcff; transition:border-color .2s, box-shadow .2s;
  resize:vertical;
}
.form-row input:focus, .form-row textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(27,75,224,.12);
}
.form-row.invalid input, .form-row.invalid textarea{border-color:#D14343;}
.form-error{font-size:.78rem; color:#D14343; min-height:1em;}
.form-hp{position:absolute !important; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; left:-9999px;}
.contact-form .btn{justify-content:center; position:relative;}
.cf-btn-spinner{
  display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.contact-form.sending .cf-btn-text{opacity:.6;}
.contact-form.sending .cf-btn-spinner{display:inline-block;}
.contact-form.sending .btn{pointer-events:none;}
@keyframes spin{to{transform:rotate(360deg);}}
.form-status{font-size:.88rem; min-height:1.2em; font-family:var(--mono);}
.form-status.ok{color:var(--blue);}
.form-status.err{color:#D14343;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:36px;} }

/* ============ FOOTER (redesigned) ============ */
.site-footer{position:relative; overflow:hidden;}
.footer-glow{
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:640px; height:280px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(78,126,240,.35), transparent 75%);
  filter:blur(10px); pointer-events:none;
}
.footer-cta{
  position:relative; text-align:center; padding:64px 28px 56px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-cta h2{color:#fff; margin-bottom:22px;}
.footer-socials{display:flex; gap:12px; margin-top:20px;}
.footer-inner .footer-socials{margin-top:0;}
.social-icon{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#C2D0EE; border:1.5px solid rgba(255,255,255,.18);
  transition:transform .25s ease, color .25s ease, border-color .25s ease, background .25s ease;
}
.social-icon svg{width:18px; height:18px;}
.social-icon:hover{transform:translateY(-4px) scale(1.06); color:#fff; border-color:transparent;}
.social-instagram:hover{background:var(--blue);}
.social-facebook:hover{background:var(--blue);}
.social-linkedin:hover{background:#0A66C2;}
.contact-socials .social-icon{color:var(--navy); border-color:var(--line);}
.contact-socials .social-icon:hover{color:#fff;}

@media (max-width:560px){ .footer-cta h2{font-size:1.5rem;} }

/* ============ FOOTER EMAIL LINK ============ */
.footer-email{
  display:inline-block; margin-top:10px; font-family:var(--mono); font-size:.86rem;
  color:#9FB1DC; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.footer-email:hover{color:#fff; border-color:#fff;}

/* ============ LEGAL PAGES ============ */
.legal-copy{max-width:720px;}
.legal-copy h3{margin-top:34px; margin-bottom:10px; font-size:1.15rem;}
.legal-copy h3:first-child{margin-top:0;}
.legal-copy p{color:var(--ink-soft); font-size:.98rem; margin-bottom:6px;}
.legal-copy a{color:var(--blue); border-bottom:1px solid rgba(27,75,224,.3);}


/* ============================================================
   V2 LAYER — brand shell, navigation, motion system
   Loaded last so it wins over the base rules above.
   ============================================================ */

/* ---------- page load curtain ---------- */
.preloader{
  position:fixed; inset:0; z-index:9999; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .5s ease, visibility .5s ease;
}
.preloader.done{opacity:0; visibility:hidden;}
.preloader .brand-mark{height:52px;}
.preloader .brand-mark path{stroke-dasharray:var(--len,180); stroke-dashoffset:var(--len,180); animation:wvDraw 1.1s cubic-bezier(.6,.05,.3,1) forwards;}
.preloader .wv-b{animation-delay:.13s !important;}
.preloader .wv-c{animation-delay:.26s !important;}
.preload-bar{width:150px; height:3px; border-radius:2px; background:var(--line); overflow:hidden;}
.preload-bar span{display:block; height:100%; width:40%; border-radius:2px; background:var(--blue); animation:preloadRun 1.1s ease-in-out infinite;}
@keyframes preloadRun{0%{transform:translateX(-110%);} 100%{transform:translateX(260%);}}

/* ---------- utility bar ---------- */
.topbar{background:var(--navy); color:#C9D6F5; font-size:.8rem;}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:9px 28px; flex-wrap:wrap;}
.topbar-item{display:inline-flex; align-items:center; gap:8px;}
.topbar-item .ico{width:15px; height:15px; color:var(--blue-soft);}
.topbar-links{display:flex; align-items:center; gap:18px;}
.topbar-links a{display:inline-flex; align-items:center; gap:7px; color:#C9D6F5; transition:color .2s ease;}
.topbar-links a:hover{color:#fff;}
.topbar-links .ico{width:15px; height:15px;}
@media (max-width:760px){ .topbar-item{display:none;} .topbar-inner{justify-content:center; padding:8px 20px;} }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled{box-shadow:0 10px 30px -22px rgba(11,26,70,.55);}
.header-inner{display:flex; align-items:center; gap:30px; padding:14px 28px; transition:padding .3s ease;}
.site-header.scrolled .header-inner{padding:9px 28px;}
.main-nav{display:flex; gap:28px; margin-left:auto;}
.main-nav a{color:var(--ink-soft); font-size:.94rem; font-weight:500; transition:color .2s;}
.main-nav a:hover,.main-nav a.active{color:var(--navy);}
.main-nav a::after{background:var(--blue); height:2px;}
.nav-toggle span{background:var(--navy);}
.header-inner .btn-small{margin-left:4px;}
.scroll-progress{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent;}
.scroll-progress span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--blue-soft));}
@media (max-width:900px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; padding:18px 28px; gap:2px;
    display:none; box-shadow:0 20px 40px -26px rgba(11,26,70,.5);
  }
  .main-nav.open{display:flex; animation:navDrop .28s ease;}
  .main-nav a{padding:12px 0; border-bottom:1px solid var(--line); font-size:1rem;}
  .main-nav a:last-child{border-bottom:none;}
  @keyframes navDrop{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}}
}

/* ---------- buttons ---------- */
.btn{position:relative; overflow:hidden;}
.btn-primary{background:var(--blue); box-shadow:0 10px 24px -10px rgba(27,75,224,.6);}
.btn-primary:hover{background:var(--blue-700); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(27,75,224,.62);}
.btn-primary::after{
  content:''; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); transition:left .55s ease;
}
.btn-primary:hover::after{left:130%;}
.btn-ghost{border-color:var(--line); color:var(--navy); background:#fff;}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue);}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(27,75,224,.35); outline-offset:2px; border-radius:8px;
}

/* ---------- hero copy ---------- */
.hero{padding:76px 0 78px;}
.hero-inner{grid-template-columns:1.02fr 1fr; gap:48px;}
/* Sized to sit comfortably beside the illustration - big enough to lead,
   never so big it eats the fold or crowds the paragraph under it. */
.hero h1{font-size:clamp(1.85rem,2.7vw,2.3rem); letter-spacing:-.015em; line-height:1.2; margin-bottom:18px;}
.hero h1 .gradient-text{white-space:nowrap;}
/* the manual break holds the two-line shape on desktop; below tablet the
   line is short enough to wrap on its own */
@media (max-width:700px){ .hero h1{font-size:clamp(1.7rem,5.6vw,2.1rem);} .h1-br{display:none;} }
.hero-sub{max-width:520px; font-size:1.06rem;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--body);
  font-size:.76rem; font-weight:700; letter-spacing:.16em; color:var(--blue);
  text-transform:uppercase; margin-bottom:18px;
}
.eyebrow::before{content:''; width:26px; height:2px; background:var(--blue); border-radius:2px;}
.hero-proof{
  display:flex; gap:0; margin-top:30px; border-top:1px solid var(--line); padding-top:20px; flex-wrap:wrap;
}
.hero-proof div{padding-right:26px; margin-right:26px; border-right:1px solid var(--line);}
.hero-proof div:last-child{border-right:none; padding-right:0; margin-right:0;}
.hero-proof b{display:block; font-family:var(--display); font-size:1.5rem; color:var(--navy); line-height:1.1;}
.hero-proof span{font-size:.82rem; color:var(--ink-soft);}
.hero-copy .hero-proof{opacity:0; animation:heroIn .7s ease forwards; animation-delay:.75s;}
.hero-availability{
  display:flex; align-items:center; gap:10px; margin-top:20px;
  font-size:.88rem; color:var(--ink-soft);
}
.hero-copy .hero-availability{opacity:0; animation:heroIn .7s ease forwards; animation-delay:.9s;}
.live-dot{
  width:9px; height:9px; border-radius:50%; background:var(--blue); flex:none;
  box-shadow:0 0 0 0 rgba(27,75,224,.5); animation:livePulse 2.2s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(27,75,224,.5);}
  70%{box-shadow:0 0 0 10px rgba(27,75,224,0);}
  100%{box-shadow:0 0 0 0 rgba(27,75,224,0);}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-proof div{padding-right:18px; margin-right:18px;}
}

/* ---------- shared icon styling ---------- */
.ico{width:22px; height:22px; display:block;}
.icon-chip{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:var(--sky); color:var(--blue); margin-bottom:16px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease;
}
.icon-chip .ico{width:23px; height:23px;}
.industry-card:hover .icon-chip,.trust-why-card:hover .icon-chip,.team-card:hover .icon-chip{
  background:var(--blue); color:#fff; transform:translateY(-3px) rotate(-4deg);
}

/* ---------- section rhythm + reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1);}
.reveal.in-view{opacity:1; transform:none;}
h2{letter-spacing:-.02em;}
.section-sub{color:var(--ink-soft); max-width:640px;}

/* ---------- cards ---------- */
.service-card,.industry-card,.trust-why-card,.work-card,.review-card,.faq-item,.team-card{
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .3s ease;
}
.service-card:hover,.industry-card:hover,.trust-why-card:hover{
  transform:translateY(-6px); box-shadow:0 26px 44px -28px rgba(11,26,70,.42); border-color:#C9D7F5;
}

/* ---------- marquee pause on hover ---------- */
.review-track-wrap:hover .review-track{animation-play-state:paused;}

/* ---------- ops strip (light, recoloured, emoji-free) ---------- */
.orb-blip span .ico{width:18px; height:18px; color:var(--blue);}
.ops-ticker-line .ico{width:16px; height:16px; color:var(--blue); flex:none;}
.ops-ticker-line{display:flex; align-items:center; gap:10px;}

/* ---------- back to top ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px -18px rgba(11,26,70,.5); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .25s ease, color .25s ease;
}
.to-top.show{opacity:1; visibility:visible; transform:none;}
.to-top:hover{background:var(--blue); color:#fff; border-color:var(--blue);}

/* ---------- footer ---------- */
.site-footer{background:var(--navy); color:#B9C7EA;}
.footer-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:40px; padding:56px 28px 42px;}
.footer-col h5{
  font-family:var(--body); font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; margin-bottom:18px;
}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.footer-col a{color:#B9C7EA; font-size:.92rem; transition:color .2s ease, transform .2s ease; display:inline-block;}
.footer-col a:hover{color:#fff; transform:translateX(3px);}
.footer-about p{font-size:.94rem; color:#9FB1DC; margin:16px 0 20px; max-width:330px; line-height:1.65;}
.footer-social{display:flex; gap:10px;}
.footer-social a{
  width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); color:#fff; transition:background .25s ease, transform .25s ease;
}
.footer-social a:hover{background:var(--blue); transform:translateY(-3px);}
.footer-note{display:flex; align-items:center; gap:9px; font-size:.86rem; color:#9FB1DC; margin-top:14px;}
.footer-note .ico{width:16px; height:16px; color:var(--blue-soft);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 24px;
  padding:18px 28px; border-top:1px solid rgba(255,255,255,.1); font-size:.83rem; color:#8698C9;
}
.footer-bottom a{color:#8698C9;}
.footer-bottom a:hover{color:#fff;}
@media (max-width:900px){ .footer-top{grid-template-columns:1fr 1fr; gap:34px;} }
@media (max-width:560px){ .footer-top{grid-template-columns:1fr;} }

/* ---------- forms ---------- */
.form-row input,.form-row textarea{
  border:1.5px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.form-row input:focus,.form-row textarea:focus{
  border-color:var(--blue); box-shadow:0 0 0 4px rgba(27,75,224,.12); outline:none;
}
.form-row.invalid input,.form-row.invalid textarea{border-color:#D14343;}
.form-error{color:#D14343; font-size:.8rem;}
.form-status.ok{color:var(--blue);}
.form-status.err{color:#D14343;}

/* ---------- misc polish ---------- */
.rating-stars,.stars{color:var(--blue-soft); letter-spacing:2px;}
.big-rating{color:var(--navy);}
::selection{background:rgba(27,75,224,.16); color:var(--navy);}
html{scroll-padding-top:96px;}

/* product/engagement glyphs inside the animated mockups */
.mock-cart-drop svg,.mini-cart-drop svg{width:1em; height:1em; display:block; color:var(--blue);}
.mock-heart svg,.mini-heart svg{width:1.1em; height:1.1em; display:block; color:var(--blue);}

/* ---------- final responsive + dark-section corrections ---------- */
@media (max-width:900px){
  .header-inner .btn-small{display:inline-flex; margin-left:auto; order:2;}
  .nav-toggle{order:3;}
  .main-nav{order:4;}
  .brand-word{font-size:1.08rem;}
  .brand-mark{height:23px;}
}
@media (max-width:420px){
  .header-inner{gap:12px; padding:12px 18px;}
  .header-inner .btn-small{padding:8px 14px; font-size:.82rem;}
}
.ops-radar-copy .eyebrow{color:var(--blue);}
.ops-radar-copy .eyebrow::before{display:none;}
.cta .eyebrow::before,.page-hero .eyebrow::before{background:var(--blue-soft);}
.footer-glow{background:radial-gradient(circle at 20% 0%, rgba(27,75,224,.28), transparent 60%);}

/* service-card icon accents + CTA block */
.service-icon{
  width:52px; height:52px; padding:12px; border-radius:14px;
  background:var(--sky); color:var(--blue);
  transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.service-card:hover .service-icon{background:var(--blue); color:#fff; transform:translateY(-3px);}
.icon-web,.icon-ecom,.icon-ai,.icon-social{color:var(--blue);}
.cta-inner{text-align:center; max-width:720px; margin:0 auto;}

/* ---------- preloader (fill-based mark, so it fades rather than draws) ---- */
.preloader .brand-mark{height:56px; animation:preMark .9s cubic-bezier(.2,.8,.2,1) both;}
@keyframes preMark{from{opacity:0; transform:scale(.88) translateY(8px);} to{opacity:1; transform:none;}}

/* ---------- work grid: niche label ---------- */
.work-niche{
  position:absolute; left:12px; bottom:12px; z-index:3;
  background:rgba(255,255,255,.94); color:var(--navy);
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; box-shadow:0 8px 18px -10px rgba(11,26,70,.6);
}
.work-grid{margin-top:36px;}

/* ---------- service deep-dive blocks ---------- */
.service-deep{
  display:grid; grid-template-columns:1.25fr 1fr; gap:44px;
  max-width:var(--wrap); margin:44px auto 0; padding:38px 28px 0;
  border-top:1px solid var(--line);
}
.service-deep h4{
  font-family:var(--body); font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); margin-bottom:20px;
}
.sd-steps{list-style:none; display:flex; flex-direction:column; gap:20px; counter-reset:sd;}
.sd-steps li{display:flex; gap:16px;}
.sd-step-n{
  flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--sky); color:var(--blue); font-size:.8rem; font-weight:700; font-family:var(--display);
  transition:background .3s ease, color .3s ease;
}
.sd-steps li:hover .sd-step-n{background:var(--blue); color:#fff;}
.sd-steps h5{font-family:var(--display); font-size:1rem; color:var(--navy); margin-bottom:5px;}
.sd-steps p{font-size:.93rem; color:var(--ink-soft); line-height:1.62;}
.sd-side{display:flex; flex-direction:column; gap:18px;}
.sd-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;}
.sd-tools{display:flex; flex-wrap:wrap; gap:8px;}
.sd-tool{
  background:var(--sky); color:var(--navy); border:1px solid #D6E1F8;
  font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:8px;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.sd-tool:hover{background:var(--blue); color:#fff; border-color:var(--blue); transform:translateY(-2px);}
.sd-gets{list-style:none; display:flex; flex-direction:column; gap:11px;}
.sd-gets li{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ink); line-height:1.5;}
.sd-gets svg{width:16px; height:16px; flex:none; margin-top:3px; color:var(--blue);}
.sd-note{font-size:.85rem; color:var(--ink-soft); padding-left:2px; border-left:3px solid var(--blue); padding:4px 0 4px 12px;}
@media (max-width:900px){
  .service-deep{grid-template-columns:1fr; gap:30px; padding:32px 28px 0;}
}


/* ---------- top bar: icon-only social links ---------- */
.topbar-links{gap:6px;}
.topbar-links a{
  width:32px; height:32px; border-radius:9px; justify-content:center;
  background:rgba(255,255,255,.06); transition:background .22s ease, color .22s ease, transform .22s ease;
}
.topbar-links a:hover{background:var(--blue); color:#fff; transform:translateY(-1px);}
.topbar-links .ico{width:16px; height:16px;}

/* ---------- review avatars: plain, no brand fill over a person ---------- */
.review-avatar{
  width:46px; height:46px; border-radius:50%; flex:none;
  background:#fff !important; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy); box-shadow:inset 0 0 0 4px #fff;
}
.review-avatar svg{width:30px; height:30px; display:block;}

/* ============================================================
   WORK THUMBNAILS — one animated scene per project
   ============================================================ */
.work-thumb{padding:0; overflow:hidden;}
.tb{width:100%; height:100%; display:block;}
.tb-panel{fill:rgba(255,255,255,.13); stroke:rgba(255,255,255,.34); stroke-width:1.2;}
.tb-bar{fill:rgba(255,255,255,.3);}
.tb-dot{fill:rgba(255,255,255,.65);}
.tb-soft{fill:rgba(255,255,255,.34);}
.tb-solid{fill:rgba(255,255,255,.8);}
.tb-card{fill:rgba(255,255,255,.2); stroke:rgba(255,255,255,.3); stroke-width:1;}
.tb-card-on{fill:rgba(255,255,255,.9);}
.tb-row{fill:rgba(255,255,255,.16); stroke:rgba(255,255,255,.26); stroke-width:1;}
.tb-field{fill:rgba(255,255,255,.16); stroke:rgba(255,255,255,.42); stroke-width:1;}
.tb-caret{fill:#fff;}
.tb-cta{fill:#fff;}
.tb-slot{fill:rgba(255,255,255,.26);}
.tb-slot-on{fill:#fff;}
.tb-txt{font-family:var(--body); font-size:9px; font-weight:600; fill:rgba(255,255,255,.92); letter-spacing:.01em;}
.tb-txt-on{fill:var(--navy);}
.tb-badge rect,.tb-badge circle{fill:#fff;}
.tb-tick circle{fill:#fff;}
.tb-tick path{fill:none; stroke:var(--navy); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.tb-map{fill:none; stroke:rgba(255,255,255,.3); stroke-width:1.2;}
.tb-pin path{fill:#fff;} .tb-pin-hole{fill:var(--blue);}
.tb-gauge-track{fill:none; stroke:rgba(255,255,255,.25); stroke-width:9; stroke-linecap:round;}
.tb-gauge{fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round; stroke-dasharray:152; stroke-dashoffset:152;}
.tb-needle path{fill:#fff;} .tb-needle-hub{fill:#fff;}
.tb-search{fill:none; stroke:rgba(255,255,255,.8); stroke-width:1.4;}
.tb-cart{fill:none; stroke:#fff; stroke-width:2; stroke-linejoin:round;}
.tb-cart-w{fill:#fff;}
.tb-swatch{fill:rgba(255,255,255,.55);}
.tb-swatch:nth-of-type(2n){fill:rgba(255,255,255,.85);}
.tb-bag{fill:rgba(255,255,255,.75);} .tb-bag-top{fill:none; stroke:#fff; stroke-width:1.6; stroke-linejoin:round;}
.tb-ring{fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round;}
.tb-arrow{fill:#fff;}
.tb-lens{fill:rgba(255,255,255,.14); stroke:#fff; stroke-width:2.4;}
.tb-lens-h{stroke:#fff; stroke-width:3; stroke-linecap:round; fill:none;}
.tb-plus{stroke:#fff; stroke-width:2; stroke-linecap:round; fill:none;}
.tb-sync{fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round;}
.tb-flowline{fill:none; stroke:rgba(255,255,255,.6); stroke-width:1.6; stroke-dasharray:200; stroke-dashoffset:200;}
.tb-node{fill:#fff;}
.tb-col{fill:rgba(255,255,255,.5);}
.tb-col:nth-of-type(even){fill:rgba(255,255,255,.75);}
.tb-trend{fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:200; stroke-dashoffset:200;}
.tb-bubble-in{fill:rgba(255,255,255,.22); stroke:rgba(255,255,255,.34); stroke-width:1;}
.tb-bubble-out{fill:#fff;}
.tb-dot3{fill:var(--navy);}
.tb-level{fill:#fff; transform-box:fill-box; transform-origin:0% 50%;}
.tb-alert rect{fill:#fff;}
.tb-stamp rect{fill:none; stroke:#fff; stroke-width:2.4;}
.tb-stamp-t{font-family:var(--display); font-size:12px; font-weight:700; fill:#fff; letter-spacing:.1em;}
.tb-tile{fill:rgba(255,255,255,.5);}
.tb-like path{fill:#fff;}
.tb-avatar{fill:rgba(255,255,255,.7);}
.tb-play circle{fill:#fff;} .tb-play-t{fill:var(--navy);}
.tb-divider{fill:#fff;}
.tb-counter rect{fill:#fff;}
.tb-score rect{fill:rgba(255,255,255,.9);}
.tb-ping circle{fill:none; stroke:#fff; stroke-width:2;}

/* --- motion vocabulary --- */
.tb [class*="an-"]{transform-box:fill-box; transform-origin:center;}
.an-pulse{animation:tbPulse 2.4s ease-in-out infinite;}
@keyframes tbPulse{0%,100%{opacity:.7; transform:scale(.97);} 50%{opacity:1; transform:scale(1.03);}}
.an-blink{animation:tbBlink 1.2s ease-in-out infinite;}
@keyframes tbBlink{0%,100%{opacity:.25;} 50%{opacity:1;}}
.an-pop{animation:tbPop 3.4s ease-in-out infinite;}
@keyframes tbPop{0%{opacity:0; transform:scale(.6);} 12%{opacity:1; transform:scale(1.06);} 20%,74%{opacity:1; transform:scale(1);} 88%,100%{opacity:0; transform:scale(.9);}}
.an-rise{animation:tbRise 3.4s ease-in-out infinite;}
@keyframes tbRise{0%{opacity:0; transform:translateY(10px);} 16%,72%{opacity:1; transform:translateY(0);} 90%,100%{opacity:0; transform:translateY(-8px);}}
.an-fill{transform-origin:0% 50% !important; animation:tbFill 3s ease-in-out infinite;}
@keyframes tbFill{0%{transform:scaleX(0);} 45%{transform:scaleX(1);} 88%{transform:scaleX(1);} 100%{transform:scaleX(0);}}
.an-grow{transform-origin:50% 100% !important; animation:tbGrow 3s ease-in-out infinite;}
@keyframes tbGrow{0%,100%{transform:scaleY(.55);} 50%{transform:scaleY(1);}}
.an-slide{animation:tbSlide 4s ease-in-out infinite;}
@keyframes tbSlide{0%,100%{transform:translateX(0);} 50%{transform:translateX(-8px);}}
.an-spin{animation:tbSpin 5s linear infinite;}
@keyframes tbSpin{to{transform:rotate(360deg);}}
.an-draw{animation:tbDraw 3.4s ease-in-out infinite;}
@keyframes tbDraw{0%{stroke-dashoffset:200;} 45%,80%{stroke-dashoffset:0;} 100%{stroke-dashoffset:200;}}
.tb-gauge.an-draw{animation:tbDrawG 3.4s ease-in-out infinite;}
@keyframes tbDrawG{0%{stroke-dashoffset:152;} 45%,80%{stroke-dashoffset:38;} 100%{stroke-dashoffset:152;}}
.an-needle{animation:tbNeedle 3.4s cubic-bezier(.3,.9,.3,1) infinite;}
@keyframes tbNeedle{0%{transform:rotate(-72deg);} 45%,80%{transform:rotate(46deg);} 100%{transform:rotate(-72deg);}}
.an-fly{animation:tbFly 3.2s ease-in-out infinite;}
@keyframes tbFly{0%{opacity:0; transform:translate(40px,40px) scale(.8);} 15%{opacity:1;} 70%{opacity:1; transform:translate(140px,26px) scale(.9);} 80%,100%{opacity:0; transform:translate(146px,30px) scale(.4);}}
.an-zoom{animation:tbZoom 4s ease-in-out infinite;}
@keyframes tbZoom{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(14px,-10px) scale(1.12);}}
.an-swap{animation:tbSwap 4s ease-in-out infinite;}
@keyframes tbSwap{0%,45%{opacity:1;} 55%,100%{opacity:.45;}}
.an-travel{animation:tbTravel 3.4s ease-in-out infinite; fill:#fff;}
@keyframes tbTravel{0%{transform:translate(66px,60px); opacity:0;} 10%{opacity:1;} 55%{transform:translate(108px,60px);} 75%{transform:translate(140px,60px); opacity:1;} 90%,100%{opacity:0; transform:translate(140px,60px);}}
.an-stamp{animation:tbStamp 3.4s cubic-bezier(.2,1.4,.4,1) infinite;}
@keyframes tbStamp{0%,25%{opacity:0; transform:rotate(-12deg) scale(1.8);} 38%{opacity:1; transform:rotate(-12deg) scale(1);} 84%{opacity:1;} 96%,100%{opacity:0;}}
.an-drain{animation:tbDrain 4s ease-in-out infinite;}
@keyframes tbDrain{0%{transform:scaleX(1);} 60%,100%{transform:scaleX(.22);}}
.an-heart{animation:tbHeart 2s ease-in-out infinite;}
@keyframes tbHeart{0%,100%{transform:scale(.9); opacity:.8;} 40%{transform:scale(1.18); opacity:1;} 60%{transform:scale(1);}}
.an-wipe{animation:tbWipe 4.4s ease-in-out infinite; clip-path:inset(0 50% 0 0);}
@keyframes tbWipe{0%,100%{clip-path:inset(0 78% 0 0);} 50%{clip-path:inset(0 14% 0 0);}}
.an-wipe-line{animation:tbWipeLine 4.4s ease-in-out infinite;}
@keyframes tbWipeLine{0%,100%{transform:translateX(-67px);} 50%{transform:translateX(22px);}}
.an-slideup{animation:tbSlideUp 4.2s ease-in-out infinite;}
@keyframes tbSlideUp{0%{opacity:0; transform:translateY(24px);} 12%,28%{opacity:1; transform:translateY(0);} 42%,100%{opacity:0; transform:translateY(-24px);}}
.an-stack{animation:tbStack 3.6s ease-in-out infinite;}
@keyframes tbStack{0%{opacity:0; transform:translate(10px,10px) scale(.94);} 20%,74%{opacity:1; transform:none;} 92%,100%{opacity:0;}}
.an-ping{animation:tbPing 2.6s ease-out infinite;}
@keyframes tbPing{0%{opacity:.9; transform:scale(.3);} 70%,100%{opacity:0; transform:scale(1.5);}}
.tb .d1{animation-delay:.15s;} .tb .d2{animation-delay:.35s;} .tb .d3{animation-delay:.55s;}
.tb .d4{animation-delay:.8s;} .tb .d5{animation-delay:1.05s;}

@media (prefers-reduced-motion:reduce){
  .tb *{animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important; clip-path:none !important;}
}

/* ============================================================
   PROOF BAND — replaces the empty progress rings
   ============================================================ */
.proof-band{
  position:relative; margin-top:56px; border-radius:22px; overflow:hidden;
  background:linear-gradient(135deg,#F4F7FF 0%,#E8EFFC 55%,#F4F7FF 100%);
  border:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr);
  box-shadow:0 30px 60px -40px rgba(11,26,70,.22);
}
.proof-band::after{
  content:''; position:absolute; top:0; bottom:0; left:-30%; width:26%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-16deg); animation:proofSheen 7s ease-in-out infinite; pointer-events:none;
}
@keyframes proofSheen{0%{left:-30%;} 55%,100%{left:120%;}}
.proof-item{
  position:relative; padding:34px 26px 30px; border-right:1px solid var(--line);
  transition:background .3s ease;
}
.proof-item:last-child{border-right:none;}
.proof-item:hover{background:rgba(27,75,224,.045);}
.proof-ico{
  width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--blue); margin-bottom:18px;
  box-shadow:0 6px 16px -9px rgba(11,26,70,.3), 0 0 0 1px var(--line);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease;
}
.proof-ico .ico{width:20px; height:20px;}
.proof-item:hover .proof-ico{background:var(--blue); color:#fff; transform:translateY(-3px);}
.proof-figure{
  display:flex; align-items:baseline; gap:2px;
  font-family:var(--display); font-weight:700; font-size:2.5rem; color:var(--navy); line-height:1;
  letter-spacing:-.03em;
}
.proof-figure em{font-style:normal; font-size:1.5rem; color:var(--blue);}
.proof-label{margin-top:9px; font-size:.95rem; font-weight:600; color:var(--navy);}
.proof-sub{margin-top:5px; font-size:.82rem; color:var(--ink-soft); line-height:1.5;}
.proof-bar{display:block; height:3px; border-radius:2px; background:rgba(11,26,70,.08); margin-top:18px; overflow:hidden;}
.proof-bar i{
  display:block; height:100%; border-radius:2px; width:var(--w,100%);
  background:linear-gradient(90deg,var(--blue),var(--blue-soft));
  transform:scaleX(0); transform-origin:0 50%; transition:transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.proof-band.in-view .proof-bar i{transform:scaleX(1);}
.proof-item:nth-child(2) .proof-bar i{transition-delay:.12s;}
.proof-item:nth-child(3) .proof-bar i{transition-delay:.24s;}
.proof-item:nth-child(4) .proof-bar i{transition-delay:.36s;}
.proof-live{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:.78rem; font-weight:600; color:var(--navy);
}
.proof-live span{
  width:8px; height:8px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 0 0 rgba(27,75,224,.5); animation:livePulse 2.2s ease-out infinite;
}
@media (max-width:900px){ .proof-band{grid-template-columns:repeat(2,1fr);}
  .proof-item:nth-child(2){border-right:none;}
  .proof-item:nth-child(1),.proof-item:nth-child(2){border-bottom:1px solid var(--line);} }
@media (max-width:520px){ .proof-band{grid-template-columns:1fr;}
  .proof-item{border-right:none; border-bottom:1px solid var(--line);}
  .proof-item:last-child{border-bottom:none;} }

/* ---------- about: standards strip ---------- */
.about-standards-sec{padding:54px 0 6px;}
.about-standards{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.std{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .3s ease;
}
.std:hover{transform:translateY(-5px); box-shadow:0 24px 40px -28px rgba(11,26,70,.4); border-color:#C9D7F5;}
.std-ico{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--sky); color:var(--blue); margin-bottom:15px;
  transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.std:hover .std-ico{background:var(--blue); color:#fff; transform:translateY(-2px) rotate(-4deg);}
.std-ico .ico{width:20px; height:20px;}
.std h4{font-family:var(--display); font-size:1.02rem; color:var(--navy); margin-bottom:7px; line-height:1.3;}
.std p{font-size:.88rem; color:var(--ink-soft); line-height:1.55;}
@media (max-width:900px){ .about-standards{grid-template-columns:1fr 1fr; gap:18px;} }
@media (max-width:520px){ .about-standards{grid-template-columns:1fr;} }
/* ==========================================================================
   RESPONSIVE LAYER
   Loaded last so it wins over everything above.

   Device coverage this is built and checked against:
     · 4K / iMac / ultrawide      1920px and up
     · Desktop                    1440 – 1919
     · MacBook 14"/16", laptops   1200 – 1439
     · MacBook Air 13", small PC  1024 – 1199
     · iPad landscape             1024 · iPad portrait 768 – 834
     · Large phones (Pro Max, Ultra)  414 – 480
     · Standard phones            375 – 413
     · Small Android (Galaxy A-series, older SE)  320 – 374
     · Any phone in landscape     (short-viewport rules)

   Platform notes handled below: iOS Safari zoom-on-focus, iOS rubber-band
   overscroll, notch/home-indicator safe areas, Safari's need for the
   -webkit- backdrop-filter prefix, Android Chrome tap highlights, and
   Windows/macOS trackpad vs touch hover behaviour.
   ========================================================================== */

/* --------------------------------------------------------------- 1. ROOT */
:root{
  /* One gutter value drives every edge on the site, so nothing can drift
     out of alignment between sections at any width. */
  --gutter:clamp(18px, 4.2vw, 28px);
  --sec-y:clamp(52px, 6.6vw, 90px);
}

html{
  -webkit-text-size-adjust:100%;   /* stops iOS inflating text in landscape */
  text-size-adjust:100%;
  scroll-padding-top:96px;
}
body{
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;   /* no grey flash on Android taps */
  text-rendering:optimizeLegibility;
}

/* Nothing may push the page sideways, whatever the width. */
img, svg, video, canvas, iframe{max-width:100%;}
h1, h2, h3, h4, p, li, a, span{overflow-wrap:break-word;}

.wrap{padding-inline:var(--gutter);}
section{padding:var(--sec-y) 0;}

/* Safe areas: iPhone notch / Dynamic Island in landscape, and the home
   indicator strip at the bottom. Without these, edge content sits under
   the rounded corners on an iPhone held sideways. */
@supports (padding:max(0px)){
  .wrap,
  .header-inner,
  .topbar-inner,
  .footer-top,
  .footer-bottom,
  .footer-cta{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
  }
  .footer-bottom{padding-bottom:max(18px, env(safe-area-inset-bottom));}
  .to-top{
    right:max(22px, env(safe-area-inset-right));
    bottom:max(22px, calc(env(safe-area-inset-bottom) + 12px));
  }
}

/* Safari still needs the prefix for the frosted header. */
.site-header{
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
}

/* --------------------------------------------- 2. TOUCH vs POINTER DEVICES */
/* Hover lifts are lovely with a mouse and awkward on a touchscreen, where
   they stick after a tap. Everything hover-driven is gated to real pointers. */
@media (hover:none){
  .service-card:hover, .industry-card:hover, .trust-why-card:hover,
  .work-card:hover, .review-card:hover, .value-card:hover, .std:hover,
  .btn:hover, .btn-primary:hover, .btn-ghost:hover, .social-icon:hover,
  .footer-social a:hover, .topbar-links a:hover, .proof-item:hover,
  .team-card:hover, .sd-tool:hover{
    transform:none;
  }
  .btn:active{transform:scale(.97);}
  .work-card:active, .service-card:active, .industry-card:active{transform:scale(.995);}
  /* the marquee can't be paused by hovering on a phone, so let it be dragged */
  .review-track-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .review-track-wrap::-webkit-scrollbar{display:none;}
}

/* Every tappable thing clears the 44px minimum Apple and Google both use. */
@media (pointer:coarse){
  .main-nav a, .footer-col a, .filter-tab, .faq-q, .card-link{
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .footer-col a, .card-link{display:inline-flex;}
  /* round icon buttons need width AND height, or they turn into ovals */
  .topbar-links a, .footer-social a, .social-icon{
    min-width:44px; min-height:44px;
  }
  .btn{padding:14px 24px;}
  .btn-small{padding:11px 18px;}
}

/* -------------------------------------------------------- 3. FORM CONTROLS */
/* iOS Safari zooms the whole page in when a focused input is under 16px.
   Locking the field text to 16px on touch widths removes that jump entirely. */
.form-row input, .form-row textarea{
  -webkit-appearance:none;
  appearance:none;
  border-radius:10px;
  max-width:100%;
}
@media (max-width:1024px){
  .form-row input, .form-row textarea{font-size:16px;}
}
.contact-form{padding:clamp(22px, 4vw, 34px);}
.form-row textarea{min-height:120px;}

/* --------------------------------------------------- 4. TYPE SCALE, FLUID */
.hero h1{font-size:clamp(1.72rem, 1.05rem + 2.1vw, 2.4rem);}
.page-hero h1{font-size:clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem);}
h2{font-size:clamp(1.45rem, 1.05rem + 1.5vw, 2.15rem); line-height:1.22;}
.section-sub, .hero-sub{font-size:clamp(.95rem, .9rem + .2vw, 1.06rem);}
.service-detail-copy h3{font-size:clamp(1.3rem, 1.1rem + .7vw, 1.7rem);}

/* ============================ 5. WIDTH BREAKPOINTS ======================== */

/* ---- 1920+ : 4K, iMac, ultrawide ---------------------------------------- */
@media (min-width:1920px){
  :root{--wrap:1400px;}
  .hero h1{font-size:2.7rem;}
  .hero-sub{max-width:600px;}
  .studio-stage{max-width:620px;}
  .work-grid, .service-grid{gap:26px;}
}

/* ---- 1440 – 1919 : standard desktop ------------------------------------- */
@media (min-width:1440px) and (max-width:1919px){
  :root{--wrap:1260px;}
  .studio-stage{max-width:580px;}
}

/* ---- 1200 – 1439 : MacBook 14"/16", most laptops ------------------------ */
@media (max-width:1439px){
  .hero-inner{gap:44px;}
  .studio-stage{max-width:520px;}
}

/* ---- 1024 – 1199 : MacBook Air 13", small laptops, iPad landscape -------- */
@media (max-width:1199px){
  .hero-inner{grid-template-columns:1.05fr .95fr; gap:36px;}
  .studio-stage{max-width:460px;}
  .work-grid{grid-template-columns:repeat(3,1fr);}
  .included-grid{grid-template-columns:repeat(2,1fr);}
  .tools-grid{grid-template-columns:repeat(4,1fr);}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:28px;}
  .sf-tag{font-size:.72rem; padding:6px 12px;}
  .service-deep{gap:32px;}
}

/* ---- ≤ 1023 : iPad portrait, small tablets ------------------------------ */
@media (max-width:1023px){
  html{scroll-padding-top:80px;}
  .hero{padding:clamp(34px,5vw,60px) 0 clamp(44px,6vw,64px);}
  .hero-inner{grid-template-columns:1fr; gap:34px;}
  .hero-copy{max-width:640px;}
  .hero-sub{max-width:none;}
  .hero-panel{order:2;}
  .studio-stage{max-width:min(520px, 88vw);}
  .work-grid{grid-template-columns:repeat(2,1fr);}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .trust-why-grid{grid-template-columns:repeat(2,1fr);}
  .proof-band{grid-template-columns:repeat(2,1fr);}
  .about-standards{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:repeat(3,1fr); gap:16px;}
  .values-grid-4{grid-template-columns:repeat(2,1fr); gap:16px;}
  .contact-grid{grid-template-columns:1fr; gap:32px;}
  .ops-radar{gap:36px;}
  .service-deep{grid-template-columns:1fr; gap:28px; padding-inline:0;}
  .review-card{width:min(340px, 76vw);}
  .review-track-wrap::before, .review-track-wrap::after{width:40px;}
}

/* ---- ≤ 900 : the point the nav collapses -------------------------------- */
@media (max-width:900px){
  .header-inner{gap:14px; padding-block:12px;}
  .main-nav{
    max-height:calc(100vh - 120px);      /* fallback for older iOS Safari */
    max-height:calc(100dvh - 120px);     /* correct once the URL bar shrinks */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .values-grid, .values-grid-4{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; align-items:flex-start; text-align:left;}
  .timeline{padding-left:26px;}
  .faq-q{font-size:1rem; padding:19px 2px;}
}

/* ---- ≤ 768 : phones landscape / small tablets --------------------------- */
@media (max-width:768px){
  .work-grid{grid-template-columns:repeat(2,1fr); gap:16px;}
  .industry-grid{grid-template-columns:repeat(2,1fr);}
  .service-grid{grid-template-columns:repeat(2,1fr); gap:16px;}
  .hero-proof{gap:14px 0;}
  .hero-proof div{padding-right:16px; margin-right:16px;}
  .hero-proof b{font-size:1.3rem;}
  .work-thumb{height:150px;}
  .page-hero-stats span{font-size:.74rem; padding:5px 11px;}
  .review-rating-summary .big-rating{font-size:1.9rem;}
  .footer-cta{padding:48px var(--gutter) 44px;}
}

/* ---- ≤ 620 : all phones, portrait --------------------------------------- */
@media (max-width:620px){
  html{scroll-padding-top:72px;}
  .service-grid, .work-grid, .industry-grid,
  .trust-why-grid, .included-grid, .about-standards,
  .proof-band{grid-template-columns:1fr;}
  .tools-grid{grid-template-columns:repeat(3,1fr);}

  .hero{padding:26px 0 44px;}
  .hero-actions{gap:10px;}
  .hero-actions .btn{flex:1 1 auto; justify-content:center; min-width:150px;}
  .hero-proof{border-top:1px solid var(--line); padding-top:16px; margin-top:24px;}
  .hero-proof div{
    flex:1 1 30%; border-right:1px solid var(--line);
    padding-right:12px; margin-right:12px;
  }
  .hero-proof b{font-size:1.15rem;}
  .hero-proof span{font-size:.74rem;}

  /* the floating status pills sit inside the panel edge on a phone,
     so they can never push the page sideways */
  .sf-tag-1, .sf-tag-3{left:2%;}
  .sf-tag-2, .sf-tag-4{right:2%;}
  .sf-tag{font-size:.66rem; padding:5px 10px; gap:6px;}
  .sf-tag-3{display:none;}

  .work-thumb{height:170px;}
  .filter-tabs{gap:8px; margin:26px 0 4px;}
  .filter-tab{font-size:.82rem; padding:8px 14px;}
  .review-card{width:min(300px, 82vw); padding:22px;}
  .review-track{gap:14px;}
  .footer-top{grid-template-columns:1fr; gap:28px;}
  .footer-col h5{margin-bottom:12px;}
  .proof-item{
    padding:26px var(--gutter) 24px;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .proof-item:last-child{border-bottom:none;}
  .proof-figure{font-size:2.1rem;}
  .ops-radar-scope{width:min(220px, 62vw); height:min(220px, 62vw); flex-basis:auto;}
  .sd-card{padding:20px;}
  .contact-form{padding:22px 18px;}
  .timeline-item{padding-bottom:34px;}
  .btn-large{padding:14px 26px; font-size:.98rem;}
}

/* ---- ≤ 480 : large phones ----------------------------------------------- */
@media (max-width:480px){
  .header-inner{gap:10px; padding-inline:max(16px, env(safe-area-inset-left));}
  .brand-word{font-size:1rem;}
  .brand-mark{height:21px;}
  .cta-word{display:none;}          /* "Start a project" → "Start" */
  .btn-header-cta{padding:9px 14px; font-size:.8rem;}
  .nav-toggle{padding:9px; min-width:42px; min-height:42px;}

  .hero h1{line-height:1.24;}
  .hero-sub{font-size:.95rem;}
  .hero-actions .btn{width:100%;}
  .studio-stage{max-width:100%;}
  .sf-tag-2, .sf-tag-4{font-size:.62rem;}
  .work-thumb{height:158px;}
  .tools-grid{grid-template-columns:repeat(2,1fr);}
  .review-rating-summary{gap:10px;}
  .footer-cta{padding:40px 18px 38px;}
  .to-top{width:44px; height:44px;}
  .sf-readout{font-size:.58rem;}
}

/* ---- ≤ 374 : Galaxy A-series, iPhone SE, older Android ------------------- */
@media (max-width:374px){
  :root{--gutter:15px;}
  .brand-word{font-size:.94rem;}
  .btn-header-cta{padding:8px 12px; font-size:.76rem;}
  .hero h1{font-size:1.62rem;}
  .hero-proof div{flex:1 1 100%; border-right:none; margin-right:0; padding-right:0;}
  .hero-proof{gap:10px;}
  .work-thumb{height:140px;}
  .proof-figure{font-size:1.85rem;}
  .sf-tag{display:none;}    /* nothing useful left to read at this width */
  .faq-q{font-size:.94rem;}
}

/* -------------------------------- 6. SHORT VIEWPORTS (phone in landscape) */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:24px 0 32px;}
  .scroll-cue{display:none;}
  .main-nav{max-height:calc(100vh - 90px); max-height:calc(100dvh - 90px);}
  .preloader .brand-mark{height:40px;}
  section{padding:44px 0;}
}

/* The ten niche cards fill their rows at any width instead of leaving one
   or two stranded on a half-empty last row. */
.industry-grid{grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr));}
@media (max-width:620px){ .industry-grid{grid-template-columns:1fr;} }

/* ------------------------------------------------- 7. COMPONENT FIXES */
/* The FAQ answer was capped at 200px, which clipped the longer answers once
   they wrapped onto more lines on a narrow screen. */
.faq-item.open .faq-a{max-height:560px;}

/* Horizontal scrollers get momentum on iOS and hidden scrollbars everywhere. */
.table-scroll, .review-track-wrap{-webkit-overflow-scrolling:touch;}

/* The work filter row scrolls sideways instead of stacking three rows deep. */
@media (max-width:560px){
  .filter-tabs{
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    padding-bottom:6px; margin-bottom:2px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .filter-tabs::-webkit-scrollbar{display:none;}
  .filter-tab{flex:0 0 auto; scroll-snap-align:start;}
}

/* Long email addresses and URLs must never widen a card. */
.footer-col a, .contact-alt, .form-status{overflow-wrap:anywhere;}

/* ----------------------------------------------------- 8. HIGH-DPI SCREENS */
/* Retina and Android XHDPI panels render hairlines heavier than they should. */
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){
  .work-card, .service-card, .industry-card, .std, .sd-card,
  .review-card, .contact-form{border-width:.5px;}
}

/* ------------------------------------------------------- 9. PRINT / SAVE PDF */
@media print{
  .topbar, .site-header, .to-top, .scroll-cue, .preloader,
  .hero-panel, .ops-radar-section, .review-track-wrap, .footer-cta{display:none !important;}
  .view{display:block !important;}
  body{color:#000; background:#fff;}
  a{color:#000; text-decoration:underline;}
  section{padding:18px 0; break-inside:avoid;}
  .reveal{opacity:1 !important; transform:none !important;}
}

/* ------------------------------------------- 10. FORCED COLOURS / CONTRAST */
@media (forced-colors:active){
  .btn, .work-card, .service-card, .std, .sd-card{border:1px solid CanvasText;}
  .brand-mark .wv-navy{fill:CanvasText;}
}

/* Smooth scrolling is motion too - honour the OS setting. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* --------------------------------------------- 11. LAST-RESORT OVERFLOW NET */
/* If anything ever grows wider than the viewport on a device we have not
   seen, this keeps the page from scrolling sideways rather than letting a
   single element break the whole layout. */
html, body{max-width:100%;}
/* clip (not hidden) so position:sticky on the header keeps working */
.view{overflow-x:clip;}
@supports not (overflow:clip){ .view{overflow-x:hidden;} }