/* ============================================================
   CORVEX TECHNOLOGY LLC — SITE-WIDE STYLESHEET
   Single optimized stylesheet for all pages (Home, Services,
   Solutions, Portfolio, About, Contact, Privacy, Terms).

   This replaces the per-page inline <style> blocks. Every page
   should link only this file:
       <link href="css/style.css" rel="stylesheet">

   Two places rely on a body class to tell pages apart, since a
   couple of components legitimately look different from page to
   page (not accidental drift — noted inline below):
     <body class="page-home">   → Home
     <body class="page-about">  → About Us
   All other pages don't need a special class.

   Organization:
     1.  Reset / Normalize
     2.  Design Tokens
     3.  Base Typography
     4.  Layout Utilities
     5.  Buttons
     6.  Header / Navigation
     7.  Footer
     8.  Page Hero (shared inner-page hero)
     9.  Home — Hero
     10. Home — Trust Strip
     11. Home — What We Do
     12. Home — Tech Band
     13. Home — Why Choose
     14. Services — Quick Jump + Service Blocks
     15. Process (shared) + Process Card (services-page variant)
     16. FAQ (Services)
     17. Solutions — Intro + Technology/Industry Cards
     18. About — Story / Mission·Vision / Timeline / Values / Stats
     19. Contact — Form + Info Panel + Map
     20. Portfolio — Stats + Filters + Cards
     21. Team (shared — About & Contact both use this)
     22. CTA Band (shared, with one Home-only override)
     23. Legal (Privacy / Terms)
     24. Responsive Breakpoints (consolidated, mobile-first cascade)
     25. Motion Safety
============================================================ */


/* ============================================================
   1. RESET / NORMALIZE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

img, svg { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }

button, input, textarea, select {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
button { cursor: pointer; border: none; background: none; }

:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }


/* ============================================================
   2. DESIGN TOKENS
============================================================ */
:root {
  --navy-950: #0a1a35;
  --navy-900: #0e2148;
  --blue-700: #164fc4;
  --blue-600: #1c5ce0;
  --blue-500: #2f74f0;
  --blue-100: #e8f0ff;
  --ink: #16233f;
  --body-c: #5c6779;
  --muted: #8892a0;
  --bg-light: #f4f7fb;
  --border: #e6eaf1;
  --teal: #20c9a6;
  --white: #ffffff;
  --font-display: 'Poppins', 'Inter', -apple-system, sans-serif;
  --max: 1280px;
  --radius-m: 14px;
  --radius-l: 22px;
}


/* ============================================================
   3. BASE TYPOGRAPHY
============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  font-weight: 700;
}


/* ============================================================
   4. LAYOUT UTILITIES
============================================================ */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-600);
}

section { padding: 88px 0; }


/* ============================================================
   5. BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 24px;
  border-radius: 8px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary { background: var(--blue-700); color: #fff; }
.btn-primary:hover { background: var(--navy-900); box-shadow: 0 10px 24px rgba(22,79,196,0.28); transform: translateY(-1px); }

.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--blue-600); color: var(--blue-600); }

.btn-white { background: #fff; color: var(--blue-700); }
.btn-white:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.18); transform: translateY(-1px); }


/* ============================================================
   6. HEADER / NAVIGATION
============================================================ */
header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 32px;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo { height: 40px; width: auto; display: block; }

nav.primary ul { display: flex; align-items: center; gap: 30px; }
nav.primary a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .15s ease;
}
nav.primary a:hover { color: var(--blue-600); }
nav.primary .current { color: var(--blue-600); font-weight: 600; }
nav.primary svg { width: 12px; height: 12px; }

.header-cta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.menu-toggle { display: none; padding: 6px; color: var(--ink); }


/* ============================================================
   7. FOOTER
============================================================ */
footer { background: #fff; border-top: 1px solid var(--border); padding: 64px 0 28px; }

.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.footer-brand p { color: var(--body-c); font-size: 0.88rem; margin-top: 14px; max-width: 34ch; }
.footer-grid h4 { font-size: 0.85rem; margin-bottom: 16px; color: var(--ink); }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { font-size: 0.88rem; color: var(--body-c); }
.footer-grid a:hover { color: var(--blue-600); }

/* Base social row (footer usage). The Contact page's info-panel
   uses the same markup at a slightly larger size — scoped by its
   real ancestor below instead of a second global class. */
.social-row { display: flex; gap: 12px; margin-top: 6px; }
.social-row a {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.social-row a:hover { background: var(--blue-600); }
.social-row svg { width: 15px; height: 15px; }

.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.82rem; color: var(--muted);
}
.footer-bottom .links { display: flex; gap: 20px; }
.footer-bottom a:hover { color: var(--blue-600); }
.footer-bottom .current { color: var(--blue-600); font-weight: 600; }


/* ============================================================
   8. PAGE HERO (Services, Solutions, Portfolio, About, Contact,
      Privacy, Terms all share this dark banner)
============================================================ */
.page-hero {
  background: linear-gradient(160deg, var(--navy-950), var(--navy-900));
  color: #fff;
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; right: -8%; top: -30%;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,116,240,0.35), transparent 70%);
}
.page-hero .eyebrow { color: var(--teal); }
.page-hero h1 {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  margin: 12px 0 14px;
  max-width: 20ch;
}
.page-hero p { color: #aeb9cc; max-width: 56ch; font-size: 1rem; }
.page-hero .updated { color: #aeb9cc; font-size: 0.92rem; }

.crumb { display: flex; gap: 8px; align-items: center; margin-top: 22px; font-size: 0.85rem; color: #8fa0c2; }
.crumb a:hover { color: #fff; }
.crumb svg { width: 12px; height: 12px; }


/* ============================================================
   9. HOME — HERO
============================================================ */
.hero {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  padding: 64px 0 56px;
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
}
.hero-copy h1 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 20px; }
.hero-copy h1 .accent { color: var(--blue-700); display: block; }
.hero-copy p.lede { color: var(--body-c); font-size: 1.02rem; max-width: 46ch; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 38px; }

.trust-row { display: flex; gap: 30px; flex-wrap: wrap; }
.trust-row .item { display: flex; align-items: center; gap: 10px; max-width: 190px; }
.trust-row .badge {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-100); font-size: 1.1rem;
}
.trust-row .badge svg { width: 18px; height: 18px; color: var(--blue-700); }
.trust-row strong { display: block; font-size: 0.85rem; color: var(--ink); }
.trust-row span.sub { font-size: 0.8rem; color: var(--muted); }

.hero-visual { position: relative; }
.hero-visual-inner {
  position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 4/3;
  background:
    linear-gradient(200deg, rgba(10,26,53,0.55), rgba(22,79,196,0.25)),
    linear-gradient(135deg, #2a5a9c, #6f93c4 45%, #cfe1f2 100%);
}
.skyline-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.device-mock { position: absolute; left: 8%; right: 14%; bottom: 8%; top: 18%; }
.laptop { position: absolute; left: 0; bottom: 8%; width: 78%; }
.laptop-screen {
  background: #fff; border-radius: 6px 6px 0 0;
  border: 8px solid #1c2230; border-bottom: none;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/10;
}
.laptop-base { height: 12px; background: #2a2f3b; border-radius: 0 0 8px 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.25); }
.laptop-logo { display: flex; align-items: center; gap: 8px; }
.laptop-logo svg { width: 34px; height: 34px; }
.laptop-logo span { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }

.phone {
  position: absolute; right: 4%; bottom: 0; width: 24%;
  background: #1c2230; border-radius: 18px; padding: 6px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.3);
}
.phone-screen { background: #fff; border-radius: 12px; aspect-ratio: 9/18; display: flex; align-items: center; justify-content: center; }
.phone-screen svg { width: 46%; height: auto; }

.float-squares { position: absolute; top: 6%; left: 44%; width: 34%; }
.float-squares span {
  position: absolute; border-radius: 5px;
  background: linear-gradient(135deg, var(--blue-500), var(--teal));
  opacity: 0.9;
}


/* ============================================================
   10. HOME — TRUST STRIP
============================================================ */
.trust-strip { background: var(--bg-light); padding: 56px 0; }
.trust-strip .eyebrow { display: block; text-align: center; margin-bottom: 36px; color: var(--body-c); }

.trust-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.trust-cols .col { display: flex; gap: 16px; align-items: flex-start; }
.trust-cols .ic {
  width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.trust-cols .ic svg { width: 24px; height: 24px; color: var(--blue-700); }
.trust-cols h3 { font-size: 1rem; margin-bottom: 4px; }
.trust-cols p { font-size: 0.87rem; color: var(--body-c); }


/* ============================================================
   11. HOME — WHAT WE DO
============================================================ */
.services-grid-wrap { display: grid; grid-template-columns: 0.85fr 1.7fr; gap: 40px; align-items: start; }
.services-intro h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 14px 0 16px; }
.services-intro p { color: var(--body-c); margin-bottom: 26px; max-width: 38ch; }

.mini-card {
  margin-top: 28px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 22px; box-shadow: 0 6px 18px rgba(16,30,60,0.05);
}
.mini-card .ic { width: 38px; height: 38px; color: var(--blue-700); margin-bottom: 14px; }
.mini-card h4 { font-size: 1rem; margin-bottom: 6px; }
.mini-card p { font-size: 0.86rem; color: var(--body-c); margin-bottom: 12px; }

.learn-more { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--blue-600); }
.learn-more svg { width: 13px; height: 13px; }

.cards-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.service-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 26px 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(16,30,60,0.09); border-color: transparent; }
.service-card .ic {
  width: 46px; height: 46px; border-radius: 12px; background: var(--blue-100);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.service-card .ic svg { width: 22px; height: 22px; color: var(--blue-700); }
.service-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.service-card p { font-size: 0.88rem; color: var(--body-c); margin-bottom: 14px; }


/* ============================================================
   12. HOME — TECH BAND
============================================================ */
.tech-band { background: linear-gradient(160deg, var(--navy-950), var(--navy-900)); color: #fff; }
.tech-band-inner { display: flex; align-items: center; gap: 40px; justify-content: space-between; flex-wrap: wrap; }
.tech-band-copy { max-width: 380px; }
.tech-band-copy h2 { color: #fff; font-size: 1.5rem; margin-bottom: 12px; }
.tech-band-copy p { color: #aeb9cc; font-size: 0.92rem; }
.tech-band-copy .eyebrow { color: var(--teal); }

.tech-logos { display: flex; gap: 14px; flex-wrap: wrap; }
.tech-logo {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  padding: 14px 22px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; min-width: 90px;
}
.tech-logo.infor { background: #c8102e; border-color: #c8102e; }


/* ============================================================
   13. HOME — WHY CHOOSE
============================================================ */
.why-wrap { display: grid; grid-template-columns: 0.85fr 2fr; gap: 40px; align-items: start; }
.why-copy h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 14px 0; max-width: 16ch; }
.why-cols { display: grid; grid-template-columns: repeat(5,1fr); gap: 22px; }
.why-cols .col { text-align: left; }
.why-cols .ic {
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.why-cols .ic svg { width: 22px; height: 22px; color: var(--blue-700); }
.why-cols h3 { font-size: 0.97rem; margin-bottom: 6px; }
.why-cols p { font-size: 0.85rem; color: var(--body-c); }


/* ============================================================
   14. SERVICES — QUICK JUMP + SERVICE BLOCKS
============================================================ */
.service-jump {
  background: var(--bg-light); border-bottom: 1px solid var(--border);
  padding: 22px 0; position: sticky; top: 73px; z-index: 60;
}
.service-jump .wrap { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.service-jump .wrap::-webkit-scrollbar { display: none; }
.service-jump a {
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--border);
  color: var(--body-c); white-space: nowrap; transition: all .15s ease;
}
.service-jump a:hover, .service-jump a:focus-visible { border-color: var(--blue-600); color: var(--blue-600); background: #fff; }

.service-block { scroll-margin-top: 150px; }
.service-block + .service-block { border-top: 1px solid var(--border); }
.service-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.service-block:nth-child(even) .service-inner { direction: rtl; }
.service-block:nth-child(even) .service-inner > * { direction: ltr; }

.service-copy .ic-badge {
  width: 56px; height: 56px; border-radius: 16px; background: var(--blue-100);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.service-copy .ic-badge svg { width: 26px; height: 26px; color: var(--blue-700); }
.service-copy h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 14px; }
.service-copy > p { color: var(--body-c); margin-bottom: 22px; max-width: 50ch; }

.service-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.service-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--ink); }
.service-features svg { width: 17px; height: 17px; color: var(--teal); flex-shrink: 0; margin-top: 2px; }

.service-visual {
  position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 4/3.2;
  display: flex; align-items: center; justify-content: center;
}
.service-visual svg.mesh { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.6; }
.service-visual .glyph { width: 38%; height: 38%; position: relative; z-index: 2; color: #fff; opacity: 0.95; }


/* ============================================================
   15. PROCESS (shared) + PROCESS CARD (Services-page variant)

   Solutions and About use the plain numbered ".process-step".
   Services uses a boxed variant — given its own ".process-card"
   name below rather than reusing ".process-step" for a visually
   different component.
============================================================ */
.process-section { background: var(--bg-light); }
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

.process-step { position: relative; padding-left: 2px; }
.process-step .step-n {
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--blue-100);
  -webkit-text-stroke: 1.5px var(--blue-600); margin-bottom: 14px; display: block;
}
.process-step h3, .process-card h3 { font-size: 1rem; margin-bottom: 8px; }
.process-step p, .process-card p { font-size: 0.86rem; color: var(--body-c); }

.process-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-m); padding: 26px 22px; }
.process-card .step-n {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--blue-100);
  -webkit-text-stroke: 1.4px var(--blue-600); margin-bottom: 12px; display: block;
}


/* ============================================================
   16. FAQ (Services)
============================================================ */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink);
}
.faq-q svg { width: 18px; height: 18px; color: var(--blue-600); flex-shrink: 0; transition: transform .2s ease; }
.faq-item[open] .faq-q svg { transform: rotate(45deg); }
.faq-a { padding: 0 4px 22px; color: var(--body-c); font-size: 0.92rem; max-width: 70ch; }


/* ============================================================
   17. SOLUTIONS — INTRO + TECHNOLOGY/INDUSTRY CARDS
============================================================ */
.intro-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.intro-copy h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 16px; }
.intro-copy p { color: var(--body-c); max-width: 44ch; }
.intro-points { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.intro-point {
  background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 20px; display: flex; gap: 14px; align-items: flex-start;
}
.intro-point .ic { width: 36px; height: 36px; color: var(--blue-700); flex-shrink: 0; }
.intro-point h4 { font-size: 0.95rem; margin-bottom: 4px; }
.intro-point p { font-size: 0.83rem; color: var(--body-c); }

/* shared section header used by Solutions, Services (jump section), etc. */
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 14px; }
.section-head p { color: var(--body-c); }

.tech-solutions { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.solution-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 30px 26px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column;
}
.solution-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(16,30,60,0.09); border-color: transparent; }
.solution-card .ic {
  width: 52px; height: 52px; border-radius: 14px; background: var(--blue-100);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.solution-card .ic svg { width: 24px; height: 24px; color: var(--blue-700); }
.solution-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.solution-card > p { font-size: 0.89rem; color: var(--body-c); margin-bottom: 18px; }

.solution-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.solution-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.86rem; color: var(--ink); }
.solution-list svg { width: 15px; height: 15px; color: var(--teal); flex-shrink: 0; margin-top: 2px; }
.solution-card .learn-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--blue-600); }
.solution-card .learn-more svg { width: 13px; height: 13px; }

.industry-section { background: var(--bg-light); }
.industry-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.industry-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 24px 22px; display: flex; gap: 16px; align-items: flex-start;
  transition: transform .18s ease, box-shadow .18s ease;
}
.industry-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(16,30,60,0.08); }
.industry-card .ic {
  width: 44px; height: 44px; border-radius: 12px; background: var(--blue-100);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.industry-card .ic svg { width: 20px; height: 20px; color: var(--blue-700); }
.industry-card h3 { font-size: 1rem; margin-bottom: 6px; }
.industry-card p { font-size: 0.85rem; color: var(--body-c); }


/* ============================================================
   18. ABOUT — STORY / MISSION·VISION / TIMELINE / VALUES / STATS
============================================================ */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.story-copy h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 18px; }
.story-copy p { color: var(--body-c); margin-bottom: 16px; max-width: 52ch; }
.story-copy p:last-of-type { margin-bottom: 0; }
.story-visual {
  position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 4/3.4;
  background: linear-gradient(150deg, var(--navy-950), var(--blue-700));
}
.story-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-badge {
  position: absolute; left: 24px; bottom: 24px; right: 24px;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-m);
  padding: 20px 22px; color: #fff;
}
.story-badge .yr { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; }
.story-badge .yl { font-size: 0.82rem; color: #cfdaf0; margin-top: 2px; }

.mv-section { background: var(--bg-light); }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mv-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); padding: 34px 30px; }
.mv-card .ic {
  width: 52px; height: 52px; border-radius: 14px; background: var(--blue-100);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.mv-card .ic svg { width: 24px; height: 24px; color: var(--blue-700); }
.mv-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.mv-card p { color: var(--body-c); font-size: 0.94rem; }

.timeline { position: relative; max-width: 900px; margin: 0 auto; }
.timeline::before {
  content: ''; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 2px; background: var(--border);
}
.t-item { position: relative; padding: 0 0 40px 60px; }
.t-item:last-child { padding-bottom: 0; }
.t-item .dot {
  position: absolute; left: 0; top: 2px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue-700); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--border);
}
.t-item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.t-item p { font-size: 0.88rem; color: var(--body-c); }

.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.value-card { border: 1px solid var(--border); border-radius: var(--radius-m); padding: 26px 22px; transition: transform .18s ease, box-shadow .18s ease; }
.value-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(16,30,60,0.08); }
.value-card .ic { width: 38px; height: 38px; color: var(--blue-700); margin-bottom: 16px; }
.value-card h3 { font-size: 1rem; margin-bottom: 8px; }
.value-card p { font-size: 0.87rem; color: var(--body-c); }

.stats-band { background: linear-gradient(160deg, var(--navy-950), var(--navy-900)); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat-cell { font-family: var(--font-display); border-left: 1px solid rgba(255,255,255,0.14); padding-left: 18px; }
.stat-cell .n { font-size: 2.1rem; font-weight: 700; color: var(--teal); }
.stat-cell .l { font-size: 0.82rem; color: #aeb9cc; margin-top: 6px; }


/* ============================================================
   19. CONTACT — FORM + INFO PANEL + MAP
============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 44px; align-items: start; }

.info-panel { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 34px 30px; }
.info-panel h2 { font-size: 1.35rem; margin-bottom: 10px; }
.info-panel > p { color: var(--body-c); font-size: 0.92rem; margin-bottom: 26px; }

.info-item { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--border); }
.info-item:first-of-type { border-top: none; }
.info-item .ic {
  width: 42px; height: 42px; border-radius: 11px; background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.info-item .ic svg { width: 19px; height: 19px; color: var(--blue-700); }
.info-item strong { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 3px; }
.info-item a, .info-item span.val { font-size: 0.96rem; color: var(--ink); font-weight: 500; }
.info-item a:hover { color: var(--blue-600); }

/* the info panel's social row sits at a slightly larger size than the footer's */
.info-panel .social-row { margin-top: 26px; }
.info-panel .social-row a { width: 36px; height: 36px; }

.hours-note { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--body-c); }
.hours-note strong { display: block; color: var(--ink); font-size: 0.85rem; margin-bottom: 4px; }

.form-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); padding: 38px 34px; box-shadow: 0 14px 40px rgba(16,30,60,0.06); }
.form-panel h2 { font-size: 1.35rem; margin-bottom: 8px; }
.form-panel > p { color: var(--body-c); font-size: 0.92rem; margin-bottom: 26px; }

form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }

label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
label .opt { font-weight: 400; color: var(--muted); }
label .req { color: #d64550; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  border: 1.5px solid var(--border); border-radius: 9px; padding: 12px 14px;
  font-size: 0.94rem; color: var(--ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: #a7b0bf; }
input:focus, select:focus, textarea:focus { border-color: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-100); outline: none; }
textarea { resize: vertical; min-height: 130px; font-family: inherit; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6779' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  padding-right: 38px;
}

.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--body-c); }
.consent input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--blue-600); flex-shrink: 0; }

.form-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-note { font-size: 0.8rem; color: var(--muted); }

.map-strip { background: var(--bg-light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; }
.map-visual { position: relative; height: 280px; overflow: hidden; background: linear-gradient(135deg, #d9e5f7, #eef3fb); }
.map-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.map-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%); display: flex; flex-direction: column; align-items: center; }
.map-pin .dot {
  width: 44px; height: 44px; border-radius: 50% 50% 50% 0; background: var(--blue-700);
  transform: rotate(-45deg); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(22,79,196,0.35);
}
.map-pin .dot svg { width: 18px; height: 18px; color: #fff; transform: rotate(45deg); }
.map-pin .label {
  margin-top: 10px; background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; font-size: 0.82rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 6px 16px rgba(16,30,60,0.08);
}


/* ============================================================
   20. PORTFOLIO — STATS + FILTERS + CARDS
============================================================ */
.stats-strip { background: var(--bg-light); border-bottom: 1px solid var(--border); padding: 44px 0; }
.stats-strip .cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.stats-strip .n { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--blue-700); }
.stats-strip .l { font-size: 0.85rem; color: var(--body-c); margin-top: 4px; }

.filter-head { max-width: 640px; margin-bottom: 36px; }
.filter-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 14px; }
.filter-head p { color: var(--body-c); }

.filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.filter-tabs button {
  font-family: var(--font-display); font-weight: 600; font-size: 0.86rem;
  padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--border); color: var(--body-c);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-tabs button:hover { border-color: var(--blue-600); color: var(--blue-600); }
.filter-tabs button.active { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }

.portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.portfolio-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.portfolio-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(16,30,60,0.1); }

.pf-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pf-thumb svg.icon { width: 52px; height: 52px; color: rgba(255,255,255,0.92); position: relative; z-index: 2; }
.pf-thumb .mesh { position: absolute; inset: 0; opacity: 0.5; }
.pf-thumb .tag {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.35); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}
.pf-body { padding: 22px 22px 24px; }
.pf-body .industry {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--blue-600); margin-bottom: 8px; display: block;
}
.pf-body h3 { font-size: 1.08rem; margin-bottom: 8px; }
.pf-body p { font-size: 0.87rem; color: var(--body-c); margin-bottom: 16px; }
.pf-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border); }
.pf-view { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--blue-600); }
.pf-view svg { width: 13px; height: 13px; }
.pf-stack { display: flex; gap: 6px; }
.pf-stack span {
  font-family: var(--font-display); font-size: 0.66rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px;
}
.load-more { display: flex; justify-content: center; margin-top: 46px; }


/* ============================================================
   21. TEAM (shared by About & Contact)

   About shows 4 members (adds the CEO) so its grid needs 4
   columns instead of 3 — that's real, content-driven, and is
   the one deliberate override below. Every other team number
   (avatar size, card padding, font sizes) had drifted slightly
   between the two pages with no visual reason, so those are
   unified to one consistent set of values here.
============================================================ */
.team-head { max-width: 640px; margin-bottom: 48px; }
.team-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 14px; }
.team-head p { color: var(--body-c); }

.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.team-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 30px 26px; text-align: center; transition: transform .18s ease, box-shadow .18s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(16,30,60,0.1); }

.avatar {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 3px solid #fff; box-shadow: 0 0 0 3px var(--border);
}

.team-card .role-tag {
  display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.role-tag.leadership { background: #fde8ec; color: #c2185b; }
.role-tag.marketing { background: #fff2e6; color: #c2670c; }
.role-tag.design { background: #eee7ff; color: #6a3bd6; }
.role-tag.dev { background: var(--blue-100); color: var(--blue-700); }

.team-card h3 { font-size: 1.12rem; margin-bottom: 4px; }
.team-card .position { font-size: 0.85rem; color: var(--body-c); margin-bottom: 16px; }

.team-contact { display: flex; flex-direction: column; gap: 9px; padding-top: 16px; border-top: 1px solid var(--border); }
.team-contact a { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.86rem; color: var(--ink); font-weight: 500; }
.team-contact a:hover { color: var(--blue-600); }
.team-contact svg { width: 15px; height: 15px; color: var(--blue-700); flex-shrink: 0; }

.team-social { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.team-social a {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--body-c);
}
.team-social a:hover { border-color: var(--blue-600); color: var(--blue-600); }
.team-social svg { width: 13px; height: 13px; }

/* the one legitimate difference: About's grid has a 4th member (the CEO) */
body.page-about .team-grid { grid-template-columns: repeat(4,1fr); gap: 24px; }


/* ============================================================
   22. CTA BAND (shared, with one Home-only override)

   Home's closing CTA ("Let's Build Something Extraordinary
   Together") intentionally runs a bolder, shorter-line heading
   treatment than the CTA band on inner pages — kept as a scoped
   override rather than baked into the shared rule.
============================================================ */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--blue-700), var(--navy-950));
  color: #fff; border-radius: var(--radius-l); margin: 0 32px;
}
.cta-band .wrap { max-width: none; padding: 0; }
.cta-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap;
  padding: 48px 44px; position: relative; z-index: 2;
}
.cta-copy h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); max-width: 18ch; margin-bottom: 8px; }
.cta-copy p { color: #d7e2f7; max-width: 42ch; font-size: 0.92rem; }
.cta-contact { display: flex; flex-direction: column; gap: 14px; }
.cta-contact .row { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.cta-contact svg { width: 17px; height: 17px; color: var(--teal); flex-shrink: 0; }
.cta-contact strong { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #a9bde3; font-weight: 600; }
.cta-map { position: absolute; right: 0; bottom: 0; width: 46%; opacity: 0.16; z-index: 1; }

body.page-home .cta-copy h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  max-width: 14ch;
  margin-bottom: 12px;
}


/* ============================================================
   23. LEGAL (Privacy / Terms)
============================================================ */
.legal-grid { display: grid; grid-template-columns: 0.7fr 2fr; gap: 48px; align-items: start; }
.legal-toc { position: sticky; top: 96px; background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 24px 22px; }
.legal-toc h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; color: var(--muted); }
.legal-toc ol { display: flex; flex-direction: column; gap: 9px; counter-reset: toc; }
.legal-toc a { font-size: 0.87rem; color: var(--body-c); display: flex; gap: 8px; transition: color .15s ease; }
.legal-toc a:hover { color: var(--blue-600); }
.legal-toc a::before { counter-increment: toc; content: counter(toc) "."; color: var(--blue-600); font-weight: 600; flex-shrink: 0; }

.legal-content section.leg { scroll-margin-top: 100px; padding: 0 0 40px; }
.legal-content section.leg:last-child { padding-bottom: 0; }
.legal-content h2 { font-size: 1.3rem; margin-bottom: 14px; padding-top: 6px; }
.legal-content h3 { font-size: 1.02rem; margin: 20px 0 8px; }
.legal-content p { color: var(--body-c); margin-bottom: 14px; font-size: 0.96rem; max-width: 74ch; }
.legal-content ul { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.legal-content ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; color: var(--body-c); max-width: 70ch; }
.legal-content ul li svg { width: 15px; height: 15px; color: var(--blue-600); flex-shrink: 0; margin-top: 4px; }
.legal-content a.inline-link { color: var(--blue-600); font-weight: 600; }
.legal-content a.inline-link:hover { text-decoration: underline; }

.legal-note {
  background: var(--blue-100); border: 1px solid #cfe0fb; border-radius: var(--radius-m);
  padding: 18px 20px; margin-bottom: 28px; display: flex; gap: 12px; align-items: flex-start;
}
.legal-note svg { width: 20px; height: 20px; color: var(--blue-700); flex-shrink: 0; margin-top: 1px; }
.legal-note p { margin: 0; font-size: 0.88rem; color: var(--navy-900); }

.legal-divider { border: none; border-top: 1px solid var(--border); margin: 0 0 40px; }

.legal-cta { background: var(--bg-light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 48px 0; }
.legal-cta .inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.legal-cta h2 { font-size: 1.2rem; margin-bottom: 6px; }
.legal-cta p { color: var(--body-c); font-size: 0.92rem; }


/* ============================================================
   24. RESPONSIVE BREAKPOINTS (consolidated, largest to smallest)
============================================================ */
@media (max-width: 960px) {
  nav.primary { display: none; }
  .menu-toggle { display: block; }
  .hero-grid { grid-template-columns: 1fr; }
  .services-grid-wrap { grid-template-columns: 1fr; }
  .why-wrap { grid-template-columns: 1fr; }
  .team-grid, body.page-about .team-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .trust-cols { grid-template-columns: repeat(2,1fr); }
  .why-cols { grid-template-columns: repeat(2,1fr); }
  .intro-grid { grid-template-columns: 1fr; }
  .tech-solutions { grid-template-columns: 1fr 1fr; }
  .industry-grid { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .service-inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  section { padding: 56px 0; }
}

@media (max-width: 760px) {
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .mv-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stats-strip .cols { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .header-cta .btn-primary span { display: none; }
  .cta-band { margin: 0 20px; }
  .cta-inner { padding: 34px 24px; }
  .timeline::before { left: 15px; }
  .t-item { padding-left: 46px; }
  .t-item .dot { width: 32px; height: 32px; font-size: 0.72rem; }
  .form-panel { padding: 26px 22px; }
}

@media (max-width: 620px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .tech-solutions { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr; }
  .team-grid, body.page-about .team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  form { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .trust-cols { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .why-cols { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .intro-points { grid-template-columns: 1fr; }
  .team-grid, body.page-about .team-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   25. MOTION SAFETY
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}