/* =========================================================
   Artimus Solutions — Site Stylesheet
   ========================================================= */

:root{
  --navy-900:#0a1830;
  --navy-800:#0f2447;
  --navy-700:#16305e;
  --bg:#f6f8fc;
  --surface:#ffffff;
  --text:#1c2b45;
  --muted:#5b6b85;
  --border:#e4e9f2;

  /* Single accent family — dark to light blue. No other hues used for
     icons, gradients or accents anywhere on the site. */
  --blue-1:#0b2a52;
  --blue-2:#123f74;
  --blue-3:#1a5c99;
  --blue-4:#2c80c4;
  --blue-5:#4fa2dc;
  --blue-6:#84c3ea;
  --blue-7:#c3e3f7;

  --gradient: linear-gradient(120deg, var(--blue-1), var(--blue-3) 50%, var(--blue-6));
  --gradient-soft: linear-gradient(120deg, rgba(11,42,82,.16), rgba(26,92,153,.14) 50%, rgba(132,195,234,.12));

  --radius:14px;
  --radius-sm:8px;
  --shadow-sm: 0 2px 10px rgba(15,36,71,.06);
  --shadow-md: 0 10px 30px rgba(15,36,71,.10);
  --shadow-lg: 0 24px 60px rgba(15,36,71,.16);
  --header-h:76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Poppins','Inter',sans-serif;
  color:var(--navy-900);
  line-height:1.25;
  margin:0 0 .5em;
}
p{ margin:0 0 1em; color:var(--muted); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy-900); color:#fff;
  padding:10px 16px; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Buttons ---------- */
/* No border on the base class — a "border: Npx solid transparent" behind a
   gradient/solid fill on a 999px pill is what caused gradient corner
   bleed in some renderers (background-clip alone didn't fully solve it
   everywhere). Solid-fill variants have no border at all; .btn-outline*
   gets a real, visible border with padding reduced to match, so every
   variant renders at the same size regardless of border. translateZ(0)
   forces its own compositing layer, which also helps some renderers
   rasterize the rounded corner cleanly under a gradient.
*/
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:.96rem;
  border:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap; transform:translateZ(0);
}
.btn:hover{ transform:translateY(-2px) translateZ(0); }
.btn-sm{ padding:9px 18px; font-size:.88rem; }
.btn-gradient{ background:var(--gradient); color:#fff; box-shadow:var(--shadow-sm); }
.btn-gradient:hover{ box-shadow:var(--shadow-md); }
.btn-outline{ border:2px solid rgba(255,255,255,.5); padding:11px 24px; color:#fff; }
.btn-outline.btn-sm{ padding:7px 16px; }
.btn-outline:hover{ background:rgba(255,255,255,.12); }
.btn-navy{ background:var(--navy-800); color:#fff; }
.btn-navy:hover{ background:var(--navy-900); }
.btn-light{ background:#fff; color:var(--navy-900); }
.btn-light:hover{ box-shadow:var(--shadow-md); }
.btn-outline-navy{ border:2px solid var(--border); padding:11px 24px; color:var(--navy-800); background:#fff; }
.btn-outline-navy.btn-sm{ padding:7px 16px; }
.btn-outline-navy:hover{ border-color:var(--blue-4); color:var(--blue-4); }
.btn-block{ width:100%; justify-content:center; }
.icon-sm{ width:16px; height:16px; flex-shrink:0; }
.icon-md{ width:22px; height:22px; flex-shrink:0; }

/* ---------- Header ---------- */
.site-header{
  /* Solid background, not backdrop-filter: blur() on this ancestor would create a new
     containing block for the fixed-position mobile nav panel nested inside it, trapping
     that panel within the header's own box instead of the viewport. */
  position:sticky; top:0; z-index:100; background:#fff;
  border-bottom:1px solid var(--border); height:var(--header-h);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:100%; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ width:44px; height:44px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.15rem; color:var(--navy-900); }
.brand-name em{ font-style:normal; font-weight:600; color:var(--blue-4); }
.brand-sub{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

.main-nav ul{ display:flex; gap:2px; }
.nav-item{ position:relative; }
.main-nav a, .nav-parent{
  display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:999px; font-weight:600; font-size:.94rem;
  color:var(--text); transition:background .15s ease, color .15s ease; background:none; border:none; font-family:inherit;
}
.main-nav a:hover, .nav-parent:hover{ background:var(--bg); color:var(--blue-4); }
.main-nav a.active{ background:var(--navy-900); color:#fff; }
.nav-caret{ width:12px; height:12px; transition:transform .18s ease; flex-shrink:0; }
.nav-item.open .nav-caret{ transform:rotate(180deg); }

.dropdown-panel{
  position:absolute; top:calc(100% + 10px); left:0; min-width:280px; background:#fff; border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:10px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:150;
}
.nav-item.open .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-panel a{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; border-radius:10px; }
.dropdown-panel a:hover{ background:var(--bg); }
.dropdown-panel a strong{ font-size:.9rem; font-weight:600; color:var(--navy-900); }
.dropdown-panel a span{ font-size:.78rem; color:var(--muted); font-weight:400; }
/* The solid navy "active" pill (.main-nav a.active) is meant for the top
   nav bar — inherited as-is here it filled a dropdown item with a dark
   background while its <span> description stayed --muted grey, nearly
   unreadable. A light tinted highlight reads correctly inside the panel
   instead, and wins on specificity over .main-nav a.active without
   needing !important. */
.dropdown-panel a.active{ background:var(--blue-7); }
.dropdown-panel a.active strong{ color:var(--navy-900); }
.dropdown-panel a.active span{ color:var(--blue-2); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-phone{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:.9rem; color:var(--navy-800); }
.header-phone:hover{ color:var(--blue-4); }
.nav-toggle{
  display:none; background:none; border:none; padding:6px; color:var(--navy-900);
}
.icon-menu, .icon-close{ width:26px; height:26px; }
.icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* ---------- Flash messages ---------- */
.flash-wrap{ padding-top:20px; }
.flash{ padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:10px; font-weight:600; font-size:.92rem; }
.flash-success{ background:#e6f6ea; color:#1e7a37; border:1px solid #b9e6c4; }
.flash-error{ background:#fdeaea; color:#b3261e; border:1px solid #f5c2c2; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; background:linear-gradient(180deg, var(--navy-900), var(--navy-800));
  padding:96px 0 110px; color:#fff;
}
.hero-blobs{ position:absolute; inset:0; z-index:0; opacity:.5; filter:blur(70px); pointer-events:none; }
.hero-blobs span{ position:absolute; width:340px; height:340px; border-radius:50%; }
.hero-blobs span:nth-child(1){ background:var(--blue-3); top:-120px; left:-80px; }
.hero-blobs span:nth-child(2){ background:var(--blue-5); bottom:-140px; right:-60px; }
.hero-blobs span:nth-child(3){ background:var(--blue-4); top:40%; left:55%; width:260px; height:260px; }
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }

/* Large full-bleed photo-slideshow hero (used once real featured project
   photos exist) — real photos crossfade behind the same hero copy, with
   a bottom-anchored overlay for legibility, evoking a "banner slideshow"
   pattern rather than our default two-column diagram hero. */
.hero-banner{
  padding:0; min-height:min(88vh, 780px); display:flex; align-items:flex-end;
}
.hero-banner-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  display:block; position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; pointer-events:none; transition:opacity 1.4s ease;
}
/* Only the currently-visible slide is a live click target — the stacked,
   invisible ones sit behind it and must not steal the click. */
.hero-slide.active{ opacity:1; pointer-events:auto; cursor:pointer; }
.hero-slide:focus-visible{ outline:3px solid #7fb0ff; outline-offset:-3px; }
/* A small "this photo is a project, click it" tag pinned to the corner of
   the active slide — fades with the slide it belongs to since it's a child
   of the same element, no extra JS needed to keep it in sync. */
.hero-slide-caption{
  position:absolute; top:26px; right:26px; z-index:1;
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(8,16,32,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28); color:#fff;
  padding:9px 16px 9px 15px; border-radius:999px;
  font-size:.8rem; font-weight:600; letter-spacing:.01em;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
  pointer-events:none;
}
.hero-slide-caption svg{ width:14px; height:14px; }
.hero-slide:hover .hero-slide-caption,
.hero-slide:focus-visible .hero-slide-caption{
  background:rgba(37,99,235,.85); border-color:rgba(255,255,255,.55); transform:translateY(-2px);
}
/* Manual prev/next controls, so a visitor doesn't have to wait out the
   5s auto-advance to see a specific slide. Fixed near the top of the
   banner rather than true vertical-center — the hero copy is bottom-
   anchored and reaches surprisingly high, so centering would put the
   left arrow right on top of the paragraph text; this band stays clear
   of it on every slide count. */
.hero-arrow{
  position:absolute; top:130px; z-index:3;
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(8,16,32,.5); border:1px solid rgba(255,255,255,.3); color:#fff;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.hero-arrow:hover{ background:rgba(37,99,235,.8); border-color:rgba(255,255,255,.55); transform:translateY(-2px); }
.hero-arrow .icon{ width:20px; height:20px; }
.hero-arrow-prev{ left:20px; }
.hero-arrow-next{ right:20px; }
.hero-arrow-prev .icon{ transform:rotate(180deg); }
@media (max-width:640px){
  .hero-arrow{ top:96px; width:36px; height:36px; }
  .hero-arrow .icon{ width:16px; height:16px; }
  .hero-arrow-prev{ left:12px; }
  .hero-arrow-next{ right:12px; }
}
.hero-banner-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Darkened further through the middle band (not just the bottom) — real
     project photos vary a lot in brightness, and the headline sits well
     above the bottom edge, so it needs real contrast too, not just the
     stats/CTA row. */
  background:linear-gradient(0deg, rgba(6,12,26,.95) 0%, rgba(6,12,26,.86) 30%, rgba(6,12,26,.62) 60%, rgba(6,12,26,.32) 100%);
}
.hero-banner-content{ position:relative; z-index:2; max-width:800px; padding:160px 0 64px; }
/* Belt-and-braces legibility insurance on top of the gradient — holds up
   even against a bright, busy photo the gradient alone doesn't fully tame. */
.hero-banner-content h1,
.hero-banner-content .lead,
.hero-banner-content .lead-sub{ text-shadow:0 2px 16px rgba(0,0,0,.5); }
@media (max-width:640px){
  .hero-banner{ min-height:80vh; }
  .hero-banner-content{ padding:120px 0 44px; }
  .hero-slide-caption{ top:16px; right:16px; padding:7px 13px 7px 12px; font-size:.72rem; }
}
.hero h1{ color:#fff; font-size:clamp(2rem,4vw,3rem); margin-bottom:18px; }
/* A brighter, lighter-toned gradient than the brand --gradient (which
   starts near-black navy) — that reads fine on solid buttons, but as
   clipped text over a dark photo/overlay the dark end was nearly
   invisible. A soft blue glow behind it helps it pop off the dark hero. */
.hero h1 .grad-text{
  background:linear-gradient(120deg, var(--blue-5), var(--blue-6) 45%, var(--blue-7));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 16px rgba(0,0,0,.5), 0 0 34px rgba(79,162,220,.4);
}
.hero p.lead{
  color:#eef3fc; font-size:1.1rem; font-weight:500; line-height:1.65; letter-spacing:.005em;
  max-width:560px; margin-bottom:16px; text-align:justify;
}
.hero p.lead-sub{
  color:#cdd9f2; font-size:.98rem; font-weight:450; line-height:1.65;
  max-width:540px; margin-bottom:30px; text-align:justify;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
.hero-meta{ display:flex; gap:28px; flex-wrap:wrap; }
.hero-meta div{ display:flex; flex-direction:column; }
.hero-meta strong{ font-family:'Poppins',sans-serif; font-size:1.5rem; }
.hero-meta span{ font-size:.8rem; color:#b9c7e6; }

.hero-visual{ position:relative; }
.hero-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:20px;
  padding:26px; backdrop-filter:blur(6px);
}
.hero-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hero-mini{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px;
  padding:16px; display:flex; flex-direction:column; gap:10px;
}
.hero-mini .icon{ width:26px; height:26px; }
.hero-mini:nth-child(1) .icon{ color:var(--blue-6); }
.hero-mini:nth-child(2) .icon{ color:var(--blue-5); }
.hero-mini:nth-child(3) .icon{ color:var(--blue-6); }
.hero-mini:nth-child(4) .icon{ color:var(--blue-5); }
.hero-mini strong{ font-size:.86rem; font-weight:600; color:#fff; }

/* ---------- Hero transformation flow (the "visual language") ---------- */
.hero-flow{ display:flex; flex-direction:column; gap:12px; }
.hero-flow-step{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px;
  padding:15px 18px; font-size:.92rem; font-weight:600; color:#e7edf9; display:flex; align-items:center; gap:10px;
}
.hero-flow-step span.tag{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#8fa0c2; display:block; margin-bottom:2px; }
.hero-flow-step.problem{ border-color:rgba(255,255,255,.1); color:#c4d0e6; }
.hero-flow-step.brand{ background:var(--gradient); border:none; color:#fff; }
.hero-flow-step.result{ background:rgba(255,255,255,.09); }
.hero-flow-arrow{ display:flex; justify-content:center; color:var(--blue-6); opacity:.8; }
.hero-flow-arrow svg{ width:18px; height:18px; transform:rotate(90deg); }

/* ---------- Section basics ---------- */
section{ padding:88px 0; }
.section-tight{ padding:60px 0; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 52px; }
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-4); margin-bottom:12px;
}
.section-head h2{ font-size:clamp(1.6rem,3vw,2.3rem); }
.section-head p{ font-size:1.02rem; }
.bg-surface{ background:var(--surface); }
.bg-navy{ background:linear-gradient(180deg,var(--navy-800),var(--navy-900)); color:#fff; }
.bg-navy h2, .bg-navy h3{ color:#fff; }
.bg-navy p{ color:#b7c3da; }
.bg-navy .eyebrow{ color:var(--blue-6); }
.bg-tint{ background:linear-gradient(180deg,#fff,var(--bg)); }

/* ---------- Grids & Cards ---------- */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 26px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }

.icon-tile{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; color:#fff; overflow:hidden;
}
.icon-tile .icon{ width:28px; height:28px; }
.icon-tile .service-visual-img{ width:100%; height:100%; object-fit:cover; }
/* A service with a real uploaded photo gets a proper wide banner instead
   of being squeezed into the small square icon slot — cropping a real
   photo down to 56px reads as a broken thumbnail, not a design choice.
   Bleeds to the card's own edges (negative-margined by its padding) with
   rounded top corners matching the card. */
.service-card-photo{
  width:calc(100% + 52px); aspect-ratio:16/10; margin:-30px -26px 18px; overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0;
}
.service-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.service-card:hover .service-card-photo img{ transform:scale(1.04); }
.service-card-photo img{ transition:transform .35s ease; }
/* Eight tonal steps, all one accent family — dark to light blue. */
.grad-1{ background:linear-gradient(135deg,var(--blue-1),var(--blue-3)); }
.grad-2{ background:linear-gradient(135deg,var(--blue-2),var(--blue-4)); }
.grad-3{ background:linear-gradient(135deg,var(--blue-3),var(--blue-5)); }
.grad-4{ background:linear-gradient(135deg,var(--blue-4),var(--blue-6)); }
.grad-5{ background:linear-gradient(135deg,var(--blue-1),var(--blue-4)); }
.grad-6{ background:linear-gradient(135deg,var(--blue-2),var(--blue-5)); }
.grad-7{ background:linear-gradient(135deg,var(--blue-3),var(--blue-6)); }
.grad-8{ background:linear-gradient(135deg,var(--blue-1),var(--blue-6)); }

.service-card h3{ font-size:1.12rem; margin-bottom:10px; }
.service-card p{ font-size:.94rem; margin-bottom:16px; }
/* The short description now comes from a rich-text editor, so it renders
   as a <div> (a <p> can't legally nest inside another <p>). Style both
   the wrapper directly — for legacy plain-text entries with no inner
   markup — and any <p> Quill wraps new content in, so either shows the
   same size/spacing as before. */
.service-short, .service-short p{ font-size:.94rem; margin-bottom:16px; }
.service-short p:last-child{ margin-bottom:0; }
.service-points{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.service-points li{ display:flex; gap:8px; align-items:flex-start; font-size:.88rem; color:var(--muted); }
.service-points .icon{ width:16px; height:16px; color:var(--blue-4); margin-top:3px; flex-shrink:0; }
.service-link{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.88rem; color:var(--blue-4); margin-top:8px; }

/* ---------- Why choose us ---------- */
.why-grid{ grid-template-columns:repeat(5,1fr); }
.why-card{ text-align:center; padding:26px 18px; }
.why-card .icon-tile{ margin:0 auto 16px; }
.why-card h3{ font-size:.98rem; margin-bottom:0; }
.why-card p{ font-size:.86rem; margin:8px 0 0; }

/* ---------- Stats strip ---------- */
.stats-strip{
  background:var(--navy-900); border-radius:20px; padding:36px 20px; display:grid;
  grid-template-columns:repeat(4,1fr); gap:20px; margin-top:60px; position:relative; overflow:hidden;
}
.stats-strip::before{
  content:""; position:absolute; inset:0; background:var(--gradient); opacity:.1;
}
.stat{ text-align:center; position:relative; z-index:1; }
.stat strong{ display:block; font-family:'Poppins',sans-serif; font-size:2.1rem; color:#fff; }
.stat span{ font-size:.82rem; color:#a9b6cf; }

/* ---------- Industries strip on home ---------- */
.industry-strip{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.industry-pill{
  display:flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm); font-weight:600; font-size:.92rem;
}
.industry-pill .icon{ width:20px; height:20px; color:var(--blue-4); }

/* ---------- Six pillars (Manage / Automate / Connect / Track / Analyze / Transform) ---------- */
.pillars-grid{ grid-template-columns:repeat(3,1fr); }
.pillar-card{ text-align:left; }
.pillar-card .icon-tile{ margin-bottom:16px; }

/* ---------- CTA banner ---------- */
.cta-banner{ display:block; background:var(--gradient); }
.cta-banner-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:44px 24px; flex-wrap:wrap;
}
.cta-banner h3{ color:#fff; font-size:1.4rem; margin-bottom:6px; }
.cta-banner p{ color:rgba(255,255,255,.9); margin:0; }
.cta-banner .btn-light{ flex-shrink:0; }

/* ---------- Page header (inner pages) ---------- */
.page-header{
  background:linear-gradient(180deg,var(--navy-900),var(--navy-800)); color:#fff; padding:64px 0 56px; text-align:center;
  position:relative; overflow:hidden;
}
.page-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--gradient);
}
.page-header h1{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:12px; }
.page-header p{ color:#b7c3da; max-width:640px; margin:0 auto; }
.breadcrumb{ font-size:.84rem; color:#8fa0c2; margin-bottom:14px; }
.breadcrumb a{ color:#c4d0e6; }
.breadcrumb a:hover{ color:#fff; }

/* ---------- About page ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about-visual{
  background:var(--navy-900); border-radius:20px; padding:36px; position:relative; overflow:hidden;
}
.about-visual::before{ content:""; position:absolute; inset:0; background:var(--gradient-soft); }
.about-visual-inner{ position:relative; z-index:1; display:grid; gap:16px; }
.about-badge{
  display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:18px;
}
.about-badge .icon{ width:24px; height:24px; color:var(--blue-6); flex-shrink:0; margin-top:2px; }
.about-badge strong{ display:block; color:#fff; font-size:.96rem; margin-bottom:4px; }
.about-badge span{ color:#a9b6cf; font-size:.85rem; }

.vm-grid{ grid-template-columns:repeat(2,1fr); }
.vm-card{ border-top:4px solid; }
.vm-card.vision{ border-color:var(--blue-3); }
.vm-card.mission{ border-color:var(--blue-5); }
.vm-card h3{ display:flex; align-items:center; gap:10px; }
.vm-card .icon{ width:22px; height:22px; }
.vm-card.vision .icon{ color:var(--blue-3); }
.vm-card.mission .icon{ color:var(--blue-5); }

.policy-list{ display:grid; gap:16px; }
.policy-item{ display:flex; gap:16px; align-items:flex-start; }
.policy-num{
  width:38px; height:38px; border-radius:50%; background:var(--gradient); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.92rem;
}
.policy-item h4{ margin-bottom:4px; font-size:1rem; }
.policy-item p{ margin:0; font-size:.92rem; }

.locations-grid{ grid-template-columns:repeat(4,1fr); }
.location-card{ text-align:center; }
.location-card .icon-tile{ margin:0 auto 14px; }
.location-card h3{ font-size:1.05rem; margin-bottom:4px; }
.location-card span{ font-size:.82rem; color:var(--muted); }

/* ---------- Services / Products page (alternating detail blocks) ---------- */
.service-block{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center; padding:56px 0;
  border-bottom:1px solid var(--border);
}
.service-block:last-child{ border-bottom:none; }
.service-block:nth-child(even){ direction:rtl; }
.service-block:nth-child(even) > *{ direction:ltr; }
.service-visual{
  border-radius:20px; padding:44px; display:flex; align-items:center; justify-content:center; min-height:220px;
  position:relative; overflow:hidden;
}
.service-visual .icon{ width:88px; height:88px; color:#fff; position:relative; z-index:1; }
.service-visual::before{ content:""; position:absolute; inset:0; opacity:.9; }
.service-visual .service-visual-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.service-detail-points{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-top:20px; }
.service-detail-points li{ display:flex; gap:10px; align-items:flex-start; font-size:.94rem; color:var(--text); }
.service-detail-points .icon{ width:18px; height:18px; color:var(--blue-4); margin-top:3px; flex-shrink:0; }
/* Detail points saved through the rich checklist editor come through as a
   real <ul><li> straight from Quill — reskinned here with a checkmark
   bullet (to match the icon-led look above) instead of Quill's own list
   markers, while keeping whatever bold/colour formatting was applied
   inside each point. */
.service-detail-points-rich ul{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-top:20px;
  list-style:none; padding:0;
}
.service-detail-points-rich li{
  position:relative; padding-left:26px; font-size:.94rem; color:var(--text);
}
.service-detail-points-rich li::before{
  content:"\2713"; position:absolute; left:0; top:0; color:var(--blue-4); font-weight:700;
}
.service-tag{
  display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-4); margin-bottom:10px;
}

/* Product-specific additions inside a .service-block */
.product-designed-for{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.product-designed-for span{
  padding:6px 13px; border-radius:999px; background:var(--bg); border:1px solid var(--border);
  font-size:.8rem; font-weight:600; color:var(--navy-800);
}
.product-future{
  margin-top:22px; padding:16px 18px; background:var(--bg); border:1px solid var(--border); border-radius:12px;
}
.product-future strong{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--blue-4); margin-bottom:8px; }
.product-future ul{ display:flex; flex-wrap:wrap; gap:8px; }
.product-future li{ font-size:.82rem; padding:5px 11px; background:#fff; border:1px solid var(--border); border-radius:999px; color:var(--text); }
.product-note{
  margin-top:18px; padding:16px 18px; border-left:3px solid var(--blue-4); background:var(--bg); border-radius:0 10px 10px 0;
  font-size:.92rem; color:var(--text);
}
.product-cta{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }

/* Workflow / process chain — reused for hero concept and product workflows */
.flow-chain{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; margin-top:8px; }
.flow-step{
  flex:1 1 130px; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:14px 12px;
  text-align:center; font-weight:600; font-size:.84rem; color:var(--navy-800); display:flex; align-items:center; justify-content:center;
}
.flow-arrow{ display:flex; align-items:center; justify-content:center; color:var(--blue-4); flex-shrink:0; width:22px; }
.flow-arrow svg{ width:18px; height:18px; }

/* ---------- Industries page ---------- */
.industry-card{ text-align:left; }
.industry-card .icon-tile{ margin-bottom:16px; }
.industry-card h3{ font-size:1.1rem; }

/* ---------- Institutional solutions tag grid ---------- */
.tag-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tag-item{
  display:flex; align-items:center; gap:10px; padding:13px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; font-size:.9rem; font-weight:500; color:var(--text);
}
.tag-item .icon{ width:16px; height:16px; color:var(--blue-4); flex-shrink:0; }

/* ---------- Projects / Clients page ---------- */
.client-marquee-wrap{ overflow:hidden; padding:20px 0; }
.client-grid{ grid-template-columns:repeat(3,1fr); }
.client-card{
  display:flex; align-items:center; gap:14px; padding:22px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.client-avatar{
  width:44px; height:44px; border-radius:12px; background:var(--gradient); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:'Poppins',sans-serif;
}
.client-avatar-logo{ background:#fff; border:1px solid var(--border); padding:5px; }
.client-avatar-logo img{ width:100%; height:100%; object-fit:contain; }
.client-card span{ font-weight:600; font-size:.94rem; color:var(--navy-800); }

.projects-empty{
  text-align:center; background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius);
  padding:64px 28px;
}
.projects-empty .icon-tile{ margin:0 auto 22px; width:70px; height:70px; }
.projects-empty .icon-tile .icon{ width:34px; height:34px; }
.projects-empty h3{ font-size:1.3rem; }
.projects-empty p{ max-width:480px; margin:0 auto 22px; }

/* Real project cards (uploaded via /admin/projects) */
/* CSS Grid stretches every item to the tallest one in its row by default —
   fine for cards with similar content, but portfolio cards vary a lot
   (photo count, description length), so the shorter ones were getting
   padded out with empty space to match their tallest row-mate. */
.portfolio-grid{ align-items:start; }
.portfolio-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; border-radius:14px; }
/* Briefly pulses the card someone was deep-linked to from the homepage
   hero slideshow, so it's obvious which project they landed on. */
@keyframes cardHighlightPulse{
  0%{ box-shadow:0 0 0 0 rgba(37,99,235,.55); }
  70%{ box-shadow:0 0 0 14px rgba(37,99,235,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,99,235,0); }
}
.portfolio-card.highlight{ animation:cardHighlightPulse 1.3s ease-out 2; }
.portfolio-cover{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.portfolio-body{ padding:22px 24px; }
.portfolio-badge{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; color:#fff;
}
.portfolio-badge-hardware{ background:var(--blue-2); }
.portfolio-badge-software{ background:var(--blue-4); }
.portfolio-badge-both{ background:var(--gradient); }
/* Cover for a Service/Product card with no uploaded photo — same slot as
   a real project's cover photo, so hardware/software catalog cards and
   real case-study cards line up in one grid, just with a big centered
   icon on a gradient tile instead of a photo. Not clickable (no lightbox
   behind it), unlike a real .portfolio-cover photo. */
.portfolio-cover.portfolio-cover-icon{ display:flex; align-items:center; justify-content:center; cursor:default; }
.portfolio-cover-icon .icon{ width:44px; height:44px; color:#fff; }
.portfolio-mini-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:14px; }
.portfolio-mini-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; cursor:pointer; transition:opacity .15s ease, transform .15s ease; }
.portfolio-mini-gallery img:hover{ opacity:.82; transform:scale(1.03); }
.portfolio-cover{ cursor:pointer; }

/* ---------- Photo lightbox (Projects page) ---------- */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(8,14,26,.94); z-index:500; padding:24px;
  display:none; align-items:center; justify-content:center;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-image{ max-width:88vw; max-height:82vh; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.lightbox-close, .lightbox-arrow{
  position:absolute; border:none; background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .15s ease;
}
.lightbox-close:hover, .lightbox-arrow:hover{ background:rgba(255,255,255,.24); }
.lightbox-close{ top:20px; right:20px; width:44px; height:44px; }
.lightbox-arrow{ top:50%; transform:translateY(-50%); width:52px; height:52px; }
.lightbox-prev{ left:16px; }
.lightbox-prev svg{ transform:rotate(180deg); }
.lightbox-next{ right:16px; }
.lightbox-counter{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#fff; font-size:.84rem;
  font-weight:600; background:rgba(255,255,255,.12); padding:6px 16px; border-radius:999px;
}
@media (max-width:640px){
  .lightbox-arrow{ width:42px; height:42px; }
  .lightbox-close{ width:38px; height:38px; top:12px; right:12px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}

/* Rendered rich-text from the admin's description editor (Quill) */
.portfolio-description{ font-size:.9rem; color:var(--muted); }
.portfolio-description p{ margin:0 0 .6em; color:inherit; }
.portfolio-description p:last-child{ margin-bottom:0; }
.portfolio-description ul, .portfolio-description ol{ margin:0 0 .6em; padding-left:1.3em; list-style:revert; }
.portfolio-description a{ color:var(--blue-4); text-decoration:underline; }
.portfolio-description strong{ color:var(--text); }

/* ---------- Homepage project slideshow (auto-scrolling horizontal strip) ---------- */
.slideshow-scroller{
  display:flex; gap:18px; overflow-x:auto; padding:6px 6px 18px;
  -webkit-overflow-scrolling:touch;
  /* No scroll-snap here on purpose — it fights the continuous JS-driven
     auto-scroll in main.js (the browser would keep correcting scrollLeft
     back to a card boundary mid-animation). Manual drag/scroll/swipe still
     works fine via native overflow-x without it. */
}
.slideshow-scroller::-webkit-scrollbar{ height:8px; }
.slideshow-scroller::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; }
.slideshow-scroller::-webkit-scrollbar-track{ background:transparent; }
.slideshow-card{
  flex:0 0 auto; width:300px; border-radius:16px; overflow:hidden; position:relative;
  box-shadow:var(--shadow-sm); background:var(--surface); border:1px solid var(--border);
}
.slideshow-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.slideshow-caption{ position:absolute; left:0; right:0; bottom:0; padding:16px; background:linear-gradient(0deg, rgba(10,24,48,.88), transparent); }
.slideshow-caption strong{ display:block; color:#fff; font-size:.94rem; }
.slideshow-caption span{ color:#c3e3f7; font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:640px){
  .slideshow-card{ width:240px; }
}

.scope-grid{ grid-template-columns:repeat(3,1fr); margin-top:50px; }
.scope-card{ padding:24px; }
.scope-card .icon-tile{ width:44px; height:44px; margin-bottom:12px; }
.scope-card .icon-tile .icon{ width:22px; height:22px; }
.scope-card h4{ font-size:1rem; margin-bottom:6px; }
.scope-card p{ font-size:.88rem; margin:0; }

/* ---------- How We Work ---------- */
.how-steps{ display:flex; flex-direction:column; gap:0; max-width:760px; margin:0 auto; }
.how-step{ display:grid; grid-template-columns:60px 1fr; gap:22px; padding:26px 0; border-bottom:1px solid var(--border); }
.how-step:last-child{ border-bottom:none; }
.how-step-num{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Poppins',sans-serif; font-weight:700; font-size:1rem;
}
.how-step-num .icon{ width:24px; height:24px; }
.how-step h3{ font-size:1.08rem; margin-bottom:5px; }
.how-step p{ margin:0; font-size:.93rem; }
.how-signature{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:56px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:.98rem; color:var(--navy-800);
}
.how-signature span.step{ padding:9px 18px; background:var(--surface); border:1px solid var(--border); border-radius:999px; }
.how-signature svg{ width:16px; height:16px; color:var(--blue-4); }

/* ---------- AI page ---------- */
.ai-example{
  background:var(--navy-900); color:#fff; border-radius:20px; padding:36px; position:relative; overflow:hidden; margin-top:8px;
}
.ai-example::before{ content:""; position:absolute; inset:0; background:var(--gradient-soft); }
.ai-example-inner{ position:relative; z-index:1; }
.ai-example .eyebrow{ color:var(--blue-6); }
.ai-example p{ color:#dbe6f7; font-size:1.02rem; margin:0; }
.ai-example p strong{ color:#fff; }

/* ---------- Automation page ---------- */
.transform-list{ display:flex; flex-direction:column; gap:12px; max-width:720px; margin:0 auto; }
.transform-row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; padding:16px 22px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
}
.transform-before{ text-align:right; color:var(--muted); font-weight:600; font-size:.94rem; }
.transform-after{ color:var(--navy-800); font-weight:700; font-size:.94rem; }
.transform-arrow{ color:var(--blue-4); flex-shrink:0; display:flex; }
.transform-arrow svg{ width:20px; height:20px; }

/* ---------- Case studies ---------- */
.case-study{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px 30px; }
.case-study-head{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.case-study-head .icon-tile{ margin-bottom:0; flex-shrink:0; }
.case-study-head h3{ font-size:1.2rem; margin-bottom:4px; }
.case-study-head span{ font-size:.84rem; color:var(--muted); font-weight:600; }
.case-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; }
.case-block h4{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--blue-4); margin-bottom:6px; font-weight:700; }
.case-block p{ font-size:.92rem; margin:0; color:var(--text); }
.case-outcome{ grid-column:1/-1; padding-top:6px; border-top:1px solid var(--border); }
.case-outcome ul{ display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; margin-top:10px; }
.case-outcome li{ display:flex; gap:8px; align-items:flex-start; font-size:.9rem; color:var(--text); }
.case-outcome .icon{ width:16px; height:16px; color:var(--blue-4); margin-top:3px; flex-shrink:0; }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:.95fr 1.15fr; gap:44px; align-items:start; }
.contact-info-card{ background:var(--navy-900); color:#fff; border-radius:20px; padding:36px; position:relative; overflow:hidden; }
.contact-info-card::before{ content:""; position:absolute; inset:0; background:var(--gradient-soft); }
.contact-info-inner{ position:relative; z-index:1; }
.contact-info-card h3{ color:#fff; }
.contact-row{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.contact-row:last-of-type{ border-bottom:none; }
.contact-row .icon{ width:20px; height:20px; color:var(--blue-6); flex-shrink:0; margin-top:2px; }
.contact-row strong{ display:block; font-size:.88rem; color:#fff; margin-bottom:2px; }
.contact-row span, .contact-row a{ font-size:.9rem; color:#b7c3da; }
.contact-row a:hover{ color:#fff; }
.location-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.location-tags span{
  padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  font-size:.8rem;
}

.form-card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:36px; box-shadow:var(--shadow-sm); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.86rem; font-weight:600; margin-bottom:7px; color:var(--navy-800); }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--border);
  font-family:inherit; font-size:.94rem; background:#fbfcfe; transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue-4); box-shadow:0 0 0 3px rgba(44,128,196,.14); background:#fff;
}
.field textarea{ resize:vertical; min-height:120px; }
.map-embed{ border-radius:20px; overflow:hidden; border:1px solid var(--border); margin-top:24px; }
.map-embed iframe{ width:100%; height:320px; border:0; display:block; }

/* ---------- 404 ---------- */
.error-page{ text-align:center; padding:120px 0; }
.error-code{
  font-family:'Poppins',sans-serif; font-size:clamp(4rem,12vw,7rem); font-weight:800;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:0;
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-900); color:#c4d0e6; padding-top:64px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1.1fr; gap:30px; padding-bottom:48px; }
.footer-col h4{ color:#fff; font-size:.95rem; margin-bottom:18px; letter-spacing:.02em; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.88rem; color:#a9b6cf; transition:color .15s ease; }
.footer-col a:hover{ color:#fff; }
.footer-about p{ color:#a9b6cf; font-size:.88rem; margin:16px 0 18px; }
.brand-footer .brand-name{ color:#fff; }
.brand-footer .brand-name em{ color:var(--blue-6); }
.social-links{ display:flex; gap:10px; }
.social-links a{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center;
  justify-content:center; font-size:.72rem; font-weight:700; color:#fff; border:1px solid rgba(255,255,255,.14);
}
.social-links a:hover{ background:var(--gradient); }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; font-size:.86rem; }
.footer-contact .icon{ width:16px; height:16px; color:var(--blue-6); margin-top:3px; flex-shrink:0; }
.footer-contact a{ color:#a9b6cf; }
.footer-locations{ margin-top:14px; font-size:.82rem; color:#8fa0c2; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:20px 0; }
.footer-bottom-inner{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; color:#8fa0c2; }

/* ---------- Floating actions ---------- */
.float-actions{ position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:12px; z-index:90; }
.float-btn{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); border:none; color:#fff; transition:transform .18s ease;
}
.float-btn:hover{ transform:scale(1.08); }
.float-whatsapp{ background:#25d366; }
.float-call{ background:var(--navy-800); }
.float-top{
  background:#fff; color:var(--navy-800); border:1px solid var(--border); opacity:0; pointer-events:none;
  transform:translateY(10px); transition:opacity .2s ease, transform .2s ease;
}
.float-top.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.icon-top{ width:18px; height:18px; transform:rotate(-90deg); }

/* ---------- Sticky "don't see your requirement?" CTA (services/solutions) ---------- */
/* Bottom-LEFT deliberately — .float-actions above already owns bottom-right
   (WhatsApp/Call/back-to-top), so the two stacks never overlap. */
.sticky-cta{
  position:fixed; left:20px; bottom:20px; z-index:85; max-width:280px;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-md); padding:16px 18px 16px 16px;
  display:flex; flex-direction:column; gap:10px; animation:fadeInUp .4s ease both;
}
.sticky-cta[hidden]{ display:none; }
.sticky-cta-close{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--bg); border:none;
  color:var(--muted); transition:background .15s ease, color .15s ease;
}
.sticky-cta-close:hover{ background:var(--border); color:var(--navy-800); }
.sticky-cta-close .icon{ width:13px; height:13px; }
.sticky-cta-text{ padding-right:18px; }
.sticky-cta-text strong{ display:block; font-size:.9rem; color:var(--navy-800); margin-bottom:2px; }
.sticky-cta-text span{ display:block; font-size:.82rem; color:var(--muted); }
.sticky-cta .btn{ align-self:flex-start; }
@media (max-width:640px){
  .sticky-cta{ left:12px; right:12px; bottom:12px; max-width:none; padding:14px 16px 14px 40px; }
  /* On narrow screens the bottom-right float stack sits close enough to
     this full-width card's top-right corner that the close button —
     right-aligned, same corner the WhatsApp/Call stack occupies, and
     under it in z-index — could take the tap instead of the button
     beneath it. Moving the close button to the left corner sidesteps
     that collision entirely rather than trying to out-guess the card's
     height against the float stack's height. */
  .sticky-cta-close{ left:8px; right:auto; }
  .sticky-cta-text{ padding-right:0; }
  body.has-sticky-cta .float-actions{ bottom:104px; }
}

/* ---------- Reveal animation ---------- */
/* Lightweight load-time fade — CSS-only (no scroll/JS dependency), so
   content is never left stuck invisible while waiting on an observer. */
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.reveal{ animation:fadeInUp .5s ease both; }
@media (prefers-reduced-motion: reduce){ .reveal{ animation:none; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:repeat(3,1fr); }
  .pillars-grid{ grid-template-columns:repeat(2,1fr); }
  .locations-grid{ grid-template-columns:repeat(2,1fr); }
  .client-grid{ grid-template-columns:repeat(2,1fr); }
  .scope-grid{ grid-template-columns:repeat(2,1fr); }
  .tag-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .about-grid{ gap:36px; }
  .case-grid{ grid-template-columns:1fr; }
  .case-outcome ul{ grid-template-columns:1fr; }
}

@media (max-width: 860px){
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0; bottom:0; background:#fff; padding:20px 24px;
    transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s;
    overflow-y:auto;
  }
  .main-nav.open{ transform:translateY(0); opacity:1; visibility:visible; }
  .main-nav ul{ flex-direction:column; gap:4px; }
  .main-nav a, .nav-parent{ padding:14px 16px; font-size:1.02rem; width:100%; justify-content:space-between; }
  .dropdown-panel{
    position:static; box-shadow:none; border:none; background:var(--bg); margin:2px 0 6px; padding:6px;
    max-height:0; overflow:hidden; opacity:1; visibility:visible; transform:none; transition:max-height .2s ease;
  }
  .nav-item.open .dropdown-panel{ max-height:600px; }
  .dropdown-panel a{ padding:10px 14px; }
  .header-phone{ display:none; }
  .nav-toggle{ display:block; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .about-grid, .contact-grid, .vm-grid, .service-block{ grid-template-columns:1fr !important; direction:ltr !important; }
  .service-block{ padding:36px 0; }
  .service-visual{ min-height:160px; padding:30px; }
  .stats-strip{ grid-template-columns:repeat(2,1fr); }
  .flow-chain{ flex-direction:column; }
  .flow-arrow svg{ transform:rotate(90deg); }
  .transform-row{ grid-template-columns:1fr; text-align:center; gap:8px; }
  .transform-before, .transform-after{ text-align:center; }
}

@media (max-width: 640px){
  section{ padding:60px 0; }
  .grid-3, .grid-4, .why-grid, .pillars-grid, .locations-grid, .client-grid, .scope-grid, .tag-grid, .footer-grid{ grid-template-columns:1fr; }
  .hero{ padding:64px 0 80px; }
  .hero-card-grid{ grid-template-columns:1fr 1fr; }
  .cta-banner-inner{ flex-direction:column; text-align:center; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; }
  .form-row{ grid-template-columns:1fr; }
  .float-actions{ right:14px; bottom:14px; }
  .float-btn{ width:46px; height:46px; }
  .brand-sub{ display:none; }
  .how-step{ grid-template-columns:1fr; text-align:center; }
  .how-step-num{ margin:0 auto; }
  .how-signature{ flex-direction:column; }
  .how-signature svg{ transform:rotate(90deg); }
  .case-study-head{ flex-direction:column; text-align:center; }
}