/* =========================================================
   SJ Infotech Modern - main stylesheet
   Palette is unchanged. Layout, type, spacing, motion refined.
   ========================================================= */

:root{
  /* --- Brand palette (unchanged) --- */
  --navy: #0a1f44;
  --navy-2: #0f2a5c;
  --ink: #0f172a;
  --muted: #5b6478;
  --muted-2: #8791a6;
  --line: #e6e9f2;
  --bg: #ffffff;
  --bg-soft: #f6f8fc;
  --teal: #a64e8f;
  --teal-2: #912e78;
  --indigo: #6b2056;
  --indigo-2: #471c38;
  --amber: #f59e0b;

  /* --- Shape --- */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  /* --- Elevation --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 2px 10px rgba(15, 23, 42, .06);
  --shadow-md: 0 12px 30px rgba(15, 23, 42, .10);
  --shadow-lg: 0 24px 60px rgba(10, 31, 68, .18);
  --shadow-brand: 0 14px 34px rgba(107, 32, 86, .22);

  /* --- Type --- */
  --ff-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-head: 'Sora', 'Plus Jakarta Sans', sans-serif;
  --fs-xs: 12.5px;
  --fs-sm: 13.5px;
  --fs-base: clamp(15px, .25vw + 14.2px, 16.5px);
  --fs-lead: clamp(16.5px, .5vw + 15px, 18.5px);
  --fs-h4: clamp(16px, .4vw + 15px, 18px);
  --fs-h3: clamp(18px, .6vw + 16.4px, 21px);
  --fs-h2: clamp(27px, 2.9vw + 12px, 42px);
  --fs-h1: clamp(33px, 4.4vw + 12px, 57px);

  /* --- Spacing rhythm --- */
  --sp-section: clamp(64px, 7.4vw, 104px);
  --sp-gap: clamp(20px, 2.1vw, 28px);
  --sp-gutter: clamp(20px, 3.4vw, 28px);

  /* --- Motion --- */
  --ease: cubic-bezier(.22, .68, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t-base: .3s;
  --t-slow: .6s;

  --header-h: 80px;
  --header-h-sticky: 66px;
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); -webkit-text-size-adjust:100%; }

/* `clip` (not `hidden`) keeps the off-canvas drawer from creating a
   sideways scrollbar while leaving position:sticky on the header intact. */
html, body{ overflow-x: clip; }

body{
  margin:0;
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--bg);
  line-height:1.68;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* lock scroll behind the mobile drawer without breaking sticky */
body.has-nav-open{ overflow:hidden; }

img{ max-width:100%; display:block; height:auto; }
svg{ flex-shrink:0; }
a{ color: inherit; text-decoration:none; transition: color var(--t-fast) var(--ease); }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }

h1,h2,h3,h4,h5{
  font-family: var(--ff-head); color: var(--navy); line-height:1.18;
  margin:0 0 .5em; font-weight:700; letter-spacing:-.015em;
  text-wrap: balance;
}
h1{ font-size: var(--fs-h1); letter-spacing:-.028em; }
h2{ font-size: var(--fs-h2); letter-spacing:-.022em; }
h3{ font-size: var(--fs-h3); }
h4{ font-size: var(--fs-h4); }
p{ margin:0 0 1em; color: var(--muted); text-wrap: pretty; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:700; }

.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--sp-gutter); }
.container-narrow{ max-width:880px; }
.icon{ width:1em; height:1em; }
.screen-reader-text{ position:absolute!important; clip:rect(0 0 0 0); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; }
.skip-link:focus{ position:fixed; top:10px; left:10px; z-index:9999; background:#fff; padding:10px 16px; border-radius:8px; box-shadow: var(--shadow-md); }

/* Consistent, visible keyboard focus everywhere */
:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; border-radius:4px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline:none; }

::selection{ background: rgba(107,32,86,.14); color: var(--navy); }

/* =========================================================
   Section rhythm
   ========================================================= */
.section{ padding: var(--sp-section) 0; position:relative; }
.section-head{ max-width:700px; margin:0 auto clamp(38px, 4.4vw, 60px); text-align:center; }
.section-head h2{ font-size: var(--fs-h2); margin-bottom:.45em; }
.section-head p{ font-size: var(--fs-lead); margin:0; }
.eyebrow{
  display:inline-block; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color: var(--teal-2); font-size: var(--fs-sm); margin-bottom:14px; line-height:1.4;
}
.section-cta{ text-align:center; margin-top: clamp(34px, 4vw, 50px); }
.grid{ display:grid; gap: var(--sp-gap); }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  padding: 14px 28px; border-radius: 999px; font-weight:700; font-size:15px; line-height:1.2;
  border: 2px solid transparent; white-space:nowrap; letter-spacing:.005em;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease);
}
/* soft sheen that sweeps across on hover */
.btn::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .7s var(--ease-out);
}
.btn:hover::before{ transform: translateX(120%); }
.btn > *{ position:relative; z-index:1; }
.btn .icon{ width:18px; height:18px; position:relative; z-index:1; transition: transform var(--t-base) var(--ease-out); }
.btn:hover .icon{ transform: translateX(4px); }
.btn:active{ transform: translateY(0) scale(.985); }

.btn-primary{ background: var(--indigo); color:#fff; box-shadow: 0 10px 24px rgba(107,32,86,.28); }
.btn-primary:hover{ background: var(--indigo-2); transform: translateY(-3px); box-shadow: 0 18px 34px rgba(107,32,86,.36); }
.btn-outline{ border-color: var(--line); color: var(--navy); background:#fff; }
.btn-outline:hover{ border-color: var(--indigo); color: var(--indigo); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.btn-light{ background:#fff; color: var(--indigo); }
.btn-light:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-outline-light{ border-color: rgba(255,255,255,.4); color:#fff; }
.btn-outline-light:hover{ border-color:#fff; background: rgba(255,255,255,.1); transform: translateY(-3px); }
.btn-lg{ padding:17px 34px; font-size:16px; }
.btn-sm{ padding:11px 22px; font-size:14px; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  height: var(--header-h); display:flex; align-items:center;
  transition: height var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.site-header.is-scrolled{
  height: var(--header-h-sticky);
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 26px rgba(15,23,42,.08);
}
/* solid bar while the drawer is open so nothing shows through */
body.has-nav-open .site-header{ background:#fff; box-shadow:none; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: clamp(14px, 2vw, 30px); width:100%; }

.site-logo{
  display:flex; align-items:center; gap:10px; font-family: var(--ff-head);
  font-weight:800; font-size:20px; color: var(--navy); flex-shrink:0; line-height:1; 
  transition: opacity var(--t-fast) var(--ease);
}
.site-logo:hover{ opacity:.82; }
/* WordPress prints the custom logo inside its own .custom-logo-link anchor,
   so both wrappers are matched to keep the logo inside the bar at every size. */
.custom-logo-link{ display:flex; align-items:center; line-height:0; flex-shrink:0; }
.custom-logo-link:hover{ opacity:.82; }
.site-logo img,
.custom-logo-link img{
  height: clamp(38px, 4vw, 52px); width:auto; max-width:250px;
  object-fit:contain; transition: height var(--t-base) var(--ease);
}
.site-header.is-scrolled .site-logo img,
.site-header.is-scrolled .custom-logo-link img{ height: clamp(32px, 3.3vw, 44px); }
.logo-mark{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; background: linear-gradient(135deg, var(--indigo), var(--teal));
  color:#fff; font-size:15px; font-weight:800; flex-shrink:0;
}

.primary-nav .nav-menu{ display:flex; align-items:center; gap: clamp(16px, 2.1vw, 34px); }
.primary-nav .nav-menu li{ position:relative; }
.primary-nav .nav-menu a{
  display:inline-block; font-weight:600; font-size:15px; color: var(--navy);
  position:relative; padding:8px 0; white-space:nowrap; letter-spacing:-.005em;
}
.primary-nav .nav-menu a::after{
  content:''; position:absolute; left:50%; bottom:0; width:0; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--indigo), var(--teal));
  transform: translateX(-50%); transition: width var(--t-base) var(--ease-out);
}
.primary-nav .nav-menu a:hover{ color: var(--indigo); }
.primary-nav .nav-menu a:hover::after,
.primary-nav .nav-menu .current-menu-item > a::after,
.primary-nav .nav-menu .current_page_item > a::after{ width:100%; }
.primary-nav .nav-menu .current-menu-item > a,
.primary-nav .nav-menu .current_page_item > a{ color: var(--indigo); }

.header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav-cta-mobile{ display:none; }

.menu-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:12px; padding:0;
  color: var(--navy); position:relative; width:44px; height:44px; flex-shrink:0;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.menu-toggle:hover{ border-color: var(--indigo); background: rgba(107,32,86,.05); }
.menu-toggle .icon{
  width:22px; height:22px; position:absolute; top:50%; left:50%; margin:-11px 0 0 -11px;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.menu-toggle .icon-close{ opacity:0; transform: rotate(-90deg) scale(.7); }
.menu-toggle.is-active .icon-open{ opacity:0; transform: rotate(90deg) scale(.7); }
.menu-toggle.is-active .icon-close{ opacity:1; transform: rotate(0) scale(1); }

.mobile-nav-overlay{
  position:fixed; inset:0; background: rgba(10,31,68,.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity:0; visibility:hidden; transition: opacity var(--t-base) var(--ease), visibility var(--t-base); z-index:98;
}
.mobile-nav-overlay.is-active{ opacity:1; visibility:visible; }

/* =========================================================
   Hero
   ========================================================= */
.hero{ position:relative; overflow:hidden; padding: clamp(56px, 7vw, 100px) 0 clamp(48px, 5.5vw, 74px); }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter: blur(70px); opacity:.35; }
.blob-1{ width:520px; height:520px; background: radial-gradient(circle at 30% 30%, var(--teal), transparent 70%); top:-160px; right:-120px; animation: float1 14s ease-in-out infinite; }
.blob-2{ width:420px; height:420px; background: radial-gradient(circle at 30% 30%, var(--indigo), transparent 70%); bottom:-160px; left:-100px; animation: float2 16s ease-in-out infinite; }
.grid-pattern{
  position:absolute; inset:0; opacity:.5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black 40%, transparent 90%);
}
@keyframes float1{ 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(-30px,30px);} }
@keyframes float2{ 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(30px,-20px);} }

.hero-inner{
  position:relative; z-index:1; display:grid;
  grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 62px); align-items:center;
}
.badge{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  padding:8px 16px; border-radius:999px; font-size:13px; font-weight:700; color: var(--navy);
  box-shadow: var(--shadow-sm); margin-bottom:22px; line-height:1.3;
}
.badge .icon{ color: var(--amber); width:16px; height:16px; }
.hero h1{ font-size: var(--fs-h1); margin-bottom:.4em; }
.hero-lead{ font-size: var(--fs-lead); max-width:540px; margin-bottom:0; }
.hero-actions{ display:flex; gap:14px; margin: clamp(24px,3vw,32px) 0 clamp(32px,4vw,46px); flex-wrap:wrap; }
.hero-trust{ display:flex; gap: clamp(24px, 3.6vw, 44px); flex-wrap:wrap; }
.hero-trust > div{ min-width:96px; }
.hero-trust strong{ display:block; font-family: var(--ff-head); font-size: clamp(22px,2.4vw,27px); color: var(--navy); line-height:1.2; }
.hero-trust span{ font-size: var(--fs-sm); color: var(--muted-2); }

.hero-visual{ position:relative; height:440px; }
.hero-card{ position:absolute; border-radius: var(--radius); background:#fff; box-shadow: var(--shadow-lg); border:1px solid var(--line); }
.card-main{ width:100%; max-width:420px; top:10px; left:0; overflow:hidden; animation: floaty 6s ease-in-out infinite; }
.hero-card-header{ display:flex; gap:7px; padding:14px 16px; border-bottom:1px solid var(--line); background: var(--bg-soft); }
.hero-card-header .dot{ width:10px; height:10px; border-radius:50%; }
.dot-red{ background:#ef4444; } .dot-yellow{ background:#f59e0b; } .dot-green{ background:#22c55e; }
.hero-card-body{ padding:22px; background: var(--navy); color:#e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13.5px; line-height:1.7; }
.code-line{ margin-bottom:12px; }
.code-tag{ color: var(--teal); }
.code-comment{ color:#64748b; }
.progress-bar{ height:6px; background: rgba(255,255,255,.12); border-radius:4px; overflow:hidden; margin-top:18px; }
.progress-bar span{ display:block; height:100%; width:78%; background: linear-gradient(90deg, var(--teal), var(--indigo)); animation: grow 2.4s ease-in-out infinite alternate; }
@keyframes grow{ from{ width:35%;} to{ width:85%;} }
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }

.card-float{ display:flex; align-items:center; gap:12px; padding:16px 18px; width:230px; }
.card-float .icon{ color: var(--indigo); flex-shrink:0; }
.card-float strong{ display:block; font-size:14px; color: var(--navy); }
.card-float span{ font-size:12px; color: var(--muted-2); }
.card-float-1{ top:0; right:0; animation: floaty 7s ease-in-out infinite; animation-delay:.4s; }
.card-float-2{ bottom:20px; right:40px; animation: floaty 6.5s ease-in-out infinite; animation-delay:1s; }

.scroll-cue{ position:relative; z-index:1; display:flex; justify-content:center; margin-top:40px; }
.scroll-cue span{ width:26px; height:42px; border:2px solid var(--muted-2); border-radius:14px; position:relative; display:block; }
.scroll-cue span::before{ content:''; position:absolute; top:8px; left:50%; width:4px; height:8px; background: var(--indigo); border-radius:2px; transform: translateX(-50%); animation: scrollcue 1.6s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ opacity:1; top:8px;} 100%{ opacity:0; top:20px;} }

/* =========================================================
   Stats bar
   ========================================================= */
.stats-bar{ background: var(--navy); padding: clamp(42px,5vw,58px) 0; position:relative; z-index:1; }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(24px,3vw,30px); text-align:center; }
.stat-item{ color:#fff; }
.stat-number, .stat-suffix{ font-family: var(--ff-head); font-size: clamp(28px,3.6vw,44px); font-weight:800; line-height:1.1; letter-spacing:-.02em; }
.stat-suffix{ color: var(--teal); }
.stat-item p{ color:#aab4cc; margin:8px 0 0; font-size:14px; line-height:1.5; }

/* =========================================================
   Cards - shared behaviour
   ========================================================= */
.services-grid{ grid-template-columns: repeat(3, 1fr); }
.service-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px,2.6vw,34px) clamp(22px,2.2vw,28px); height:100%;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
/* thin brand line that draws in along the top edge on hover */
.service-card::after{
  content:''; position:absolute; left:0; top:0; height:3px; width:0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--indigo), var(--teal));
  transition: width var(--t-slow) var(--ease-out);
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: rgba(107,32,86,.18); }
.service-card:hover::after{ width:100%; }
.service-icon{
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(107,32,86,.12), rgba(166,78,143,.12)); color: var(--indigo); margin-bottom:20px;
  transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease);
}
.service-card:hover .service-icon{ transform: translateY(-2px) scale(1.06); background: linear-gradient(135deg, rgba(107,32,86,.2), rgba(166,78,143,.2)); }
.service-card h3{ font-size: var(--fs-h3); margin-bottom:.5em; }
.service-card p{ font-size:14.5px; margin-bottom:16px; }
.card-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color: var(--indigo); }
.card-link .icon{ width:15px; height:15px; transition: transform var(--t-base) var(--ease-out); }
.card-link:hover{ color: var(--indigo-2); }
.card-link:hover .icon,
.service-card:hover .card-link .icon,
.project-card:hover .card-link .icon{ transform: translateX(5px); }

/* =========================================================
   Why section
   ========================================================= */
.why-inner{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px,5.4vw,70px); align-items:center; }
.why-graphic{ position:relative; width:100%; max-width:380px; aspect-ratio:1; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.why-graphic-sm{ max-width:280px; }
.why-ring{ position:absolute; border-radius:50%; border:1.5px dashed var(--line); }
.ring-1{ inset:0; animation: spin 26s linear infinite; }
.ring-2{ inset:14%; border-color: rgba(107,32,86,.25); animation: spin 20s linear infinite reverse; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.why-center{
  width:46%; aspect-ratio:1; border-radius:50%; background: linear-gradient(135deg, var(--indigo), var(--teal));
  display:flex; align-items:center; justify-content:center; color:#fff; box-shadow: var(--shadow-lg);
  transition: transform var(--t-slow) var(--ease-out);
}
.why-graphic:hover .why-center{ transform: scale(1.05); }
.why-center .icon{ width:38%; height:38%; }
.check-list{ margin:22px 0 30px; display:flex; flex-direction:column; gap:16px; }
.check-list li{ display:flex; align-items:flex-start; gap:12px; }
.check-list .icon{ flex-shrink:0; margin-top:3px; width:20px; height:20px; color: var(--teal); background: rgba(166,78,143,.12); border-radius:50%; padding:3px; box-sizing:content-box; transition: transform var(--t-base) var(--ease-out); }
.check-list li:hover .icon{ transform: scale(1.12); }
.check-list span{ font-size:15px; color: var(--muted); }
.check-list strong{ color: var(--navy); }

/* =========================================================
   Process
   ========================================================= */
.process-steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-gap); position:relative; }
.process-step{
  background: var(--bg-soft); border-radius: var(--radius); padding: clamp(26px,2.6vw,34px) clamp(22px,2.2vw,28px);
  position:relative; height:100%; border:1px solid transparent;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.process-step:hover{ transform: translateY(-6px); background:#fff; border-color: var(--line); box-shadow: var(--shadow-md); }
.step-num{ font-family: var(--ff-head); font-size:34px; font-weight:800; color: rgba(107,32,86,.18); display:block; margin-bottom:10px; line-height:1; transition: color var(--t-base) var(--ease); }
.process-step:hover .step-num{ color: rgba(107,32,86,.34); }
.process-step h3{ font-size: var(--fs-h4); }
.process-step p{ font-size:14px; margin:0; }

/* =========================================================
   Industries strip (home)
   ========================================================= */
.industries-strip{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.industry-chip{
  display:flex; align-items:center; gap:10px; padding:13px 20px; border-radius:999px; background:#fff;
  border:1px solid var(--line); font-weight:600; font-size:14px; color: var(--navy);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.industry-chip .icon{ color: var(--indigo); transition: transform var(--t-base) var(--ease-out); }
.industry-chip:hover{ border-color: var(--indigo); color: var(--indigo); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.industry-chip:hover .icon{ transform: scale(1.14); }

/* =========================================================
   Projects grid
   ========================================================= */
.projects-grid{ grid-template-columns: repeat(3,1fr); }
.project-card{
  display:block; background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; height:100%;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.project-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: rgba(107,32,86,.18); }
.project-thumb{ height:200px; position:relative; display:flex; align-items:flex-end; padding:18px; overflow:hidden; }
.project-thumb-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition: transform var(--t-slow) var(--ease-out);
}
.project-card:hover .project-thumb-img{ transform: scale(1.06); }
.project-thumb .project-tag{ position:relative; z-index:1; }
.thumb-1{ background: linear-gradient(135deg, #6b2056, #a64e8f); }
.thumb-2{ background: linear-gradient(135deg, #0a1f44, #6b2056); }
.thumb-3{ background: linear-gradient(135deg, #a64e8f, #0a1f44); }
.project-tag{
  background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.24);
  color:#fff; font-size:12px; font-weight:700; padding:6px 13px; border-radius:999px; line-height:1.4;
}
.project-info{ padding: clamp(20px,2.2vw,26px); }
.project-info h3{ font-size: var(--fs-h4); margin-bottom:.45em; }
.project-info p{ font-size:14px; margin-bottom:14px; }

/* =========================================================
   Testimonials
   ========================================================= */
.testimonials-grid{ grid-template-columns: repeat(3,1fr); }
.testimonial-card{
  background: var(--bg-soft); border-radius: var(--radius); padding: clamp(26px,2.6vw,34px);
  height:100%; border:1px solid transparent; display:flex; flex-direction:column;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.testimonial-card:hover{ transform: translateY(-6px); background:#fff; border-color: var(--line); box-shadow: var(--shadow-md); }
.quote-icon{ color: var(--indigo); opacity:.28; width:32px; height:32px; margin-bottom:14px; transition: opacity var(--t-base) var(--ease); }
.testimonial-card:hover .quote-icon{ opacity:.5; }
.testimonial-card p{ color: var(--navy); font-size:15px; margin-bottom:22px; flex:1; }
.testimonial-author{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:44px; height:44px; border-radius:50%; background: linear-gradient(135deg, var(--indigo), var(--teal));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;
}
.avatar-lg{ width:76px; height:76px; font-size:20px; margin:0 auto 16px; }
.testimonial-author strong{ display:block; font-size:14px; color: var(--navy); }
.testimonial-author span{ font-size:12.5px; color: var(--muted-2); }

/* =========================================================
   Page banner (inner pages)
   ========================================================= */
.page-banner{ position:relative; overflow:hidden; padding: clamp(52px,6vw,78px) 0 clamp(42px,4.6vw,62px); background: var(--bg-soft); }
.page-banner-inner{ position:relative; z-index:1; text-align:center; }
.breadcrumb{ display:flex; gap:8px; justify-content:center; font-size:13px; color: var(--muted-2); margin-bottom:16px; flex-wrap:wrap; }
.breadcrumb a{ color: var(--indigo); font-weight:600; }
.breadcrumb a:hover{ color: var(--indigo-2); text-decoration:underline; text-underline-offset:3px; }
.page-banner h1{ font-size: clamp(30px,3.4vw + 12px,46px); margin-bottom:.3em; }
.page-banner p{ max-width:620px; margin:0 auto; font-size: var(--fs-lead); }

/* =========================================================
   About page
   ========================================================= */
.about-story-inner{ display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px,5vw,64px); align-items:center; }
.about-stats{ display:flex; gap: clamp(24px,3.2vw,38px); margin-top:26px; flex-wrap:wrap; }
.about-stats strong{ display:block; font-family: var(--ff-head); font-size: clamp(22px,2.4vw,27px); color: var(--navy); line-height:1.2; }
.about-stats span{ font-size:13px; color: var(--muted-2); }
.mv-grid{ grid-template-columns: repeat(2,1fr); }
.mv-card{
  background: var(--bg-soft); border-radius: var(--radius); padding: clamp(28px,3vw,38px); height:100%;
  border:1px solid transparent; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.mv-card:hover{ transform: translateY(-6px); background:#fff; border-color: var(--line); box-shadow: var(--shadow-md); }
.mv-card h3{ font-size: clamp(19px,1.6vw,21px); }
.values-grid{ grid-template-columns: repeat(4,1fr); }
.team-grid{ grid-template-columns: repeat(4,1fr); text-align:center; }
.team-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: clamp(26px,2.6vw,32px) 20px; height:100%;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.team-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(107,32,86,.18); }
.team-card .avatar-lg{ transition: transform var(--t-base) var(--ease-out); }
.team-card:hover .avatar-lg{ transform: scale(1.06); }
.team-card h4{ font-size:16px; margin-bottom:4px; }
.team-card p{ font-size:13px; margin:0; }

/* =========================================================
   Services detail (services page)
   ========================================================= */
.service-detail-row{
  display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px,4.6vw,60px); align-items:center;
  padding: clamp(40px,4.6vw,58px) 0; border-bottom:1px solid var(--line);
}
.service-detail-row:last-child{ border-bottom:none; }
.service-detail-row.is-flipped{ direction: rtl; grid-template-columns: 1.2fr .8fr; }
.service-detail-row.is-flipped > *{ direction: ltr; }
.service-detail-copy h2{ font-size: clamp(23px,2.2vw,28px); }
.service-detail-copy p{ font-size:15.5px; }

/* =========================================================
   Industries page grid
   ========================================================= */
.industries-grid{ grid-template-columns: repeat(4,1fr); }
.industry-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: clamp(24px,2.4vw,30px); height:100%;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.industry-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(107,32,86,.18); }
.industry-card h3{ font-size:17px; }
.industry-card p{ font-size:13.5px; margin:0; }

/* =========================================================
   Projects page filters
   ========================================================= */
.filter-tabs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom: clamp(32px,3.8vw,44px); }
.filter-tab{
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 22px; font-weight:700; font-size:14px;
  color: var(--muted); line-height:1.4;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.filter-tab:hover{ border-color: var(--indigo); color: var(--indigo); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.filter-tab.is-active{ background: var(--navy); border-color: var(--navy); color:#fff; }
.filter-tab.is-active:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.project-card[hidden]{ display:none; }

/* =========================================================
   CTA banner (reused)
   ========================================================= */
.cta-banner-section{ padding: 0 0 var(--sp-section); }
.cta-banner{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--indigo), var(--navy));
  border-radius: 28px; padding: clamp(44px,5.4vw,68px) clamp(24px,4vw,44px); text-align:center; color:#fff;
}
.cta-banner::before{
  content:''; position:absolute; width:420px; height:420px; border-radius:50%; top:-190px; right:-120px;
  background: radial-gradient(circle, rgba(166,78,143,.5), transparent 68%); pointer-events:none;
}
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h2{ color:#fff; font-size: clamp(25px,2.6vw + 6px,35px); }
.cta-banner p{ color: rgba(255,255,255,.82); max-width:560px; margin:0 auto 28px; font-size: var(--fs-lead); }

/* =========================================================
   Contact page
   ========================================================= */
.contact-inner{ display:grid; grid-template-columns: 1.3fr .9fr; gap: clamp(36px,4.4vw,56px); align-items:start; }
.contact-form-wrap h2{ font-size: clamp(23px,2.2vw,28px); }
.form-honeypot{ position:absolute; left:-9999px; opacity:0; height:0; }
.contact-form{ margin-top:24px; display:flex; flex-direction:column; gap:20px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{ font-size:13.5px; font-weight:700; color: var(--navy); }
.form-field input, .form-field textarea{
  border:1.5px solid var(--line); border-radius: var(--radius-sm); padding:14px 16px; font-family:inherit; font-size:15px;
  color: var(--ink); background:#fff; width:100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.form-field textarea{ resize:vertical; min-height:130px; }
.form-field input::placeholder, .form-field textarea::placeholder{ color: var(--muted-2); }
.form-field input:hover, .form-field textarea:hover{ border-color: #d5dae8; }
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(107,32,86,.12); }
.form-notice{ padding:14px 18px; border-radius: var(--radius-sm); font-size:14px; font-weight:600; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.form-success{ background: rgba(166,78,143,.12); color: var(--teal-2); }
.form-error{ background: rgba(239,68,68,.1); color:#dc2626; }
.contact-info-wrap{ display:flex; flex-direction:column; gap:14px; }
.contact-info-card{
  display:flex; align-items:flex-start; gap:16px; background: var(--bg-soft); border-radius: var(--radius); padding:22px;
  border:1px solid transparent;
  transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.contact-info-card:hover{ transform: translateX(4px); background:#fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.contact-info-card .icon{ color: var(--indigo); flex-shrink:0; }
.contact-info-card strong{ display:block; color: var(--navy); font-size:14.5px; margin-bottom:4px; }
.contact-info-card span, .contact-info-card a{ font-size:14px; color: var(--muted); }
.contact-info-card a:hover{ color: var(--indigo); }
.contact-map{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); line-height:0; }
.contact-map iframe{ width:100%; display:block; border:0; }

/* =========================================================
   Blog listing
   ========================================================= */
.blog-grid{ grid-template-columns: repeat(3,1fr); }
.blog-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; height:100%;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.blog-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(107,32,86,.18); }
.blog-card-thumb{ height:180px; border-radius: var(--radius) var(--radius) 0 0; overflow:hidden; }
.blog-card-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform var(--t-slow) var(--ease-out); }
.blog-card:hover .blog-card-thumb img{ transform: scale(1.06); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background: var(--navy); color:#c7cfe3; }
.footer-cta{ background: linear-gradient(135deg, var(--indigo-2), var(--navy-2)); }
.footer-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding: clamp(42px,4.8vw,60px) 0; flex-wrap:wrap; }
.footer-cta-inner h2{ color:#fff; font-size: clamp(22px,2.2vw,28px); margin-bottom:8px; }
.footer-cta-inner p{ color: rgba(255,255,255,.78); margin:0; max-width:460px; }
.footer-cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.footer-main{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: clamp(30px,3.6vw,44px); padding: clamp(50px,6vw,74px) 0 clamp(36px,4.4vw,52px); }
.footer-logo{ color:#fff; margin-bottom:16px; }
/* the uploaded logo has an opaque white background, so on the dark footer
   it gets a tidy white chip with breathing room instead of a bare rectangle */
.footer-logo img{ background:#fff; padding:9px 13px; border-radius:12px; max-width:210px; }
.footer-col h4{ color:#fff; font-size:15px; margin-bottom:18px; letter-spacing:-.01em; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14px; color:#aab4cc; display:inline-block; transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out); }
.footer-col a:hover{ color: var(--teal); transform: translateX(4px); }
.footer-brand p{ color:#aab4cc; font-size:14px; margin-bottom:20px; max-width:340px; }
.social-links{ display:flex; gap:10px; }
.social-links a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#c7cfe3;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.social-links a:hover{ background: var(--indigo); color:#fff; transform: translateY(-3px); }
.social-links .icon{ width:16px; height:16px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; font-size:14px; color:#aab4cc; line-height:1.6; }
.footer-contact .icon{ flex-shrink:0; margin-top:4px; width:16px; height:16px; color: var(--teal); }
.footer-contact a:hover{ transform:none; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); }
.footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:13px; color:#8391b0; flex-wrap:wrap; gap:8px; }
.footer-bottom-inner p{ color:#8391b0; margin:0; }

.back-to-top{
  position:fixed; bottom: clamp(18px,3vw,28px); right: clamp(18px,3vw,28px); width:46px; height:46px; border-radius:50%; border:none;
  background: var(--indigo); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-brand); opacity:0; visibility:hidden; transform: translateY(12px); z-index:80;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base), transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background: var(--indigo-2); transform: translateY(-4px); }
.back-to-top .icon{ transform: rotate(-90deg); }

/* =========================================================
   Motion / reveal
   ========================================================= */
.reveal{
  opacity:0; transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms); will-change: opacity, transform;
}
.reveal.in-view{ opacity:1; transform: none; will-change:auto; }

/* stagger children of any grid marked .reveal-stagger */
.reveal-stagger > *:nth-child(1){ --d: 0ms; }
.reveal-stagger > *:nth-child(2){ --d: 80ms; }
.reveal-stagger > *:nth-child(3){ --d: 160ms; }
.reveal-stagger > *:nth-child(4){ --d: 240ms; }
.reveal-stagger > *:nth-child(5){ --d: 320ms; }
.reveal-stagger > *:nth-child(6){ --d: 400ms; }
.reveal-stagger > *:nth-child(7){ --d: 480ms; }
.reveal-stagger > *:nth-child(8){ --d: 560ms; }

/* =========================================================
   Generic entry content
   ========================================================= */
.entry-content h2, .entry-content h3{ margin-top:1.4em; }
.entry-content p{ color: var(--ink); }
.entry-content a{ color: var(--indigo); text-decoration: underline; text-underline-offset:3px; }
.entry-content a:hover{ color: var(--indigo-2); }
.entry-content img{ border-radius: var(--radius); }

/* =========================================================
   Responsive ladder
   Large laptop -> laptop -> tablet -> large phone -> phone
   ========================================================= */

/* --- Laptop --- */
@media (max-width: 1100px){
  .services-grid, .projects-grid, .testimonials-grid, .industries-grid{ grid-template-columns: repeat(2,1fr); }
  .values-grid, .team-grid{ grid-template-columns: repeat(2,1fr); }
  .process-steps{ grid-template-columns: repeat(2,1fr); }
  .hero-visual{ height:400px; }
  .card-float{ width:200px; padding:14px 16px; }
}

/* --- Collapse the nav before it can ever wrap --- */
@media (max-width: 1080px){
  .primary-nav{
    position:fixed; top:0; right:0; width:min(340px, 88vw); height:100vh; height:100dvh;
    background:#fff; box-shadow: var(--shadow-lg); z-index:99;
    padding: calc(var(--header-h) + 22px) 26px 34px; overflow-y:auto;
    transform: translateX(105%); transition: transform .38s var(--ease-out);
    visibility:hidden;
  }
  .primary-nav.is-active{ transform: translateX(0); visibility:visible; }
  .primary-nav .nav-menu{ flex-direction:column; align-items:stretch; gap:2px; }
  .primary-nav .nav-menu li{ border-bottom:1px solid var(--line); }
  .primary-nav .nav-menu li:last-child{ border-bottom:none; }
  .primary-nav .nav-menu a{
    display:block; padding:15px 6px; width:100%; font-size:16px;
    transform: translateX(14px); opacity:0;
    transition: transform .4s var(--ease-out), opacity .4s var(--ease-out), color var(--t-fast) var(--ease);
  }
  .primary-nav.is-active .nav-menu a{ transform: translateX(0); opacity:1; }
  .primary-nav .nav-menu a::after{ display:none; }
  .primary-nav .nav-menu a:hover,
  .primary-nav .nav-menu .current-menu-item > a{ color: var(--indigo); }
  /* staggered entrance for the drawer links */
  .primary-nav .nav-menu li:nth-child(1) a{ transition-delay:.06s; }
  .primary-nav .nav-menu li:nth-child(2) a{ transition-delay:.10s; }
  .primary-nav .nav-menu li:nth-child(3) a{ transition-delay:.14s; }
  .primary-nav .nav-menu li:nth-child(4) a{ transition-delay:.18s; }
  .primary-nav .nav-menu li:nth-child(5) a{ transition-delay:.22s; }
  .primary-nav .nav-menu li:nth-child(6) a{ transition-delay:.26s; }
  .primary-nav .nav-menu li:nth-child(7) a{ transition-delay:.30s; }
  .primary-nav .nav-menu li:nth-child(8) a{ transition-delay:.34s; }
  .nav-cta-mobile{ display:block; margin-top:26px; }
  .nav-cta-mobile .btn{ width:100%; }
  .menu-toggle{ display:block; }
}

/* --- Tablet --- */
@media (max-width: 960px){
  .hero-inner, .why-inner, .about-story-inner, .contact-inner{ grid-template-columns: 1fr; }
  .hero-inner{ gap:40px; }
  .hero-lead{ max-width:640px; }
  /* headline first on smaller screens - the decorative panel follows it */
  .hero-visual{ height:360px; order:0; margin-top:8px; }
  .why-visual{ order:-1; }
  .why-graphic{ max-width:320px; }
  .service-detail-row, .service-detail-row.is-flipped{ grid-template-columns: 1fr; direction: ltr; gap:32px; }
  .service-detail-visual{ order:-1; max-width:260px; margin:0 auto; }
  .contact-inner{ gap:40px; }
}

/* --- Large phone --- */
@media (max-width: 860px){
  .mv-grid, .values-grid, .team-grid, .industries-grid, .blog-grid{ grid-template-columns:1fr 1fr; }
  .footer-main{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-cta-inner{ flex-direction:column; text-align:center; align-items:center; }
  .footer-cta-inner p{ margin:0 auto; }
}

/* --- Phone --- */
@media (max-width: 720px){
  :root{ --header-h: 68px; --header-h-sticky: 60px; }
  /* floats are hidden here, so let the panel shrink to the card instead of
     reserving a fixed block of empty space */
  .hero-visual{ height:auto; }
  .card-float{ display:none; }
  .card-main{ position:relative; top:0; max-width:100%; }
  .services-grid, .projects-grid, .testimonials-grid, .process-steps, .blog-grid{ grid-template-columns:1fr; }
  .mv-grid, .values-grid, .team-grid, .industries-grid{ grid-template-columns:1fr 1fr; }
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap:30px 20px; }
  .form-row{ grid-template-columns:1fr; }
  .footer-main{ grid-template-columns:1fr; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; }
  .hero-actions .btn{ flex:1 1 auto; }
  .scroll-cue{ display:none; }
}

/* --- Small phone --- */
@media (max-width: 560px){
  .header-cta{ display:none; }
  .mv-grid, .values-grid, .team-grid, .industries-grid{ grid-template-columns:1fr; }
  .cta-banner{ border-radius: var(--radius-lg); }
  .project-thumb{ height:180px; }
  .btn{ padding:13px 24px; }
  .btn-lg{ padding:15px 28px; font-size:15px; }
  .hero-actions{ gap:12px; }
  .hero-actions .btn{ width:100%; }
  .filter-tab{ padding:9px 18px; font-size:13.5px; }
  .testimonial-card, .mv-card, .process-step{ padding:24px 22px; }
}

/* --- Very small phone --- */
@media (max-width: 400px){
  .stats-grid{ grid-template-columns:1fr; gap:26px; }
  .hero-trust{ gap:20px; }
  .industry-chip{ padding:11px 16px; font-size:13.5px; }
}

/* =========================================================
   Accessibility - honour reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .reveal{ opacity:1!important; transform:none!important; }
  .primary-nav .nav-menu a{ opacity:1!important; transform:none!important; }
}

/* =========================================================
   Print
   ========================================================= */
@media print{
  .site-header, .mobile-nav-overlay, .back-to-top, .footer-cta, .scroll-cue, .hero-bg{ display:none!important; }
  body{ color:#000; }
  .reveal{ opacity:1!important; transform:none!important; }
}