/* =========================================================
   RZMT — DEEPTECH FOR OOH MEDIA TECH
   Strictly aligned with RZMT Website UI/UX Design System Specification
   ========================================================= */

/* Typography Offline Embedding & Alias */
@font-face {
  font-family: "RZMT Sans";
  src: local("Roboto"), local("Segoe UI");
  font-weight: 400;
}
@font-face {
  font-family: "RZMT Sans";
  src: local("Roboto Medium"), local("Roboto-Medium"), local("Segoe UI Semibold");
  font-weight: 500;
}

:root {
  /* Specification Colour Palette */
  --bg: #FFFFFF;
  --text: #20262E;
  --muted: #68727F;
  --blue: #2563DF;
  --blue-hover: #174FBE;
  --coral: #FF5722;        /* Vibrant Logo Orange Accent */
  --orange: #FF5722;       /* Brand Logo Orange */
  --line: #E6EAF0;
  --soft: #F7F9FC;
  --pale-blue: #F1F5FC;
  --taaraa-heading: #213854;
  --closing-bg: #F6F8FC;
  --focus: #8FB4FF;
  
  /* Secondary Button Colors */
  --btn-sec-bg: #FFFFFF;
  --btn-sec-text: #35404D;
  --btn-sec-border: #DFE4EB;

  /* Sizing and Radii from Specification */
  --max-width: 1184px;
  --card-radius: 18px;    /* 16–22px */
  --btn-radius: 28px;     /* 28px */
  --form-radius: 7px;     /* 7px */
  
  /* Header Heights */
  --hdr-desktop: 88px;
  --hdr-tablet: 76px;
  --hdr-mobile: 70px;
}

/* Reset and Base Rules */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  font-family: "RZMT Sans", "Roboto", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;        /* Base body line height: 1.7 */
  font-size: 15px;         /* Mostly 13–16px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* =========================================================
   PREMIUM LOGO SPLASH PRELOADER
   Sequence: fade-in → scale reveal → breathe → fade-out
========================================================= */

/* Full-screen white stage */
.splash-loader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #FFFFFF;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Entrance: instantly visible */
  opacity: 1;
  visibility: visible;
  /* Exit transition — triggered by .loaded class */
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  overflow: hidden;
}

/* Exit state */
.splash-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Centre container — drives the staggered animation */
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Content block itself fades+rises in on entry */
  animation: splashContentEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Logo wrapper: scale-in then gentle breathe */
.splash-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  animation:
    splashLogoReveal  0.9s  cubic-bezier(0.16, 1, 0.3, 1) 0.15s both,
    splashLogoBreathe 3.2s  ease-in-out                   1.2s infinite;
  will-change: transform, opacity;
}

/* Logo image: horizontal clip-path wipe from left, then full */
.splash-logo-img {
  height: clamp(72px, 11vw, 108px);
  width: auto;
  display: block;
  /* Wipe reveal left → right */
  animation: splashLogoWipe 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
  will-change: clip-path, opacity;
  /* Crisp rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Subtle background ring — fades in behind logo, gives depth */
.splash-logo-wrap::before {
  content: "";
  position: absolute;
  width: clamp(160px, 22vw, 240px);
  height: clamp(160px, 22vw, 240px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,223,0.05) 0%, transparent 70%);
  animation: splashRingPulse 2.8s ease-in-out 1s infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Dot accent — small blue dot that pulses below the logo */
.splash-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563DF;
  margin-top: 28px;
  opacity: 0;
  animation: splashDotIn 0.5s ease 1.1s forwards,
             splashDotPulse 1.8s ease-in-out 1.7s infinite;
  will-change: transform, opacity;
}

/* ── Keyframes ─────────────────────────────────────────── */

/* Content block: rise up from slight below */
@keyframes splashContentEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Logo wrap: scale from 0.82 → 1 with opacity */
@keyframes splashLogoReveal {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Wipe the logo image left-to-right via clip-path */
@keyframes splashLogoWipe {
  from { clip-path: inset(0 100% 0 0); opacity: 0.4; }
  to   { clip-path: inset(0 0% 0 0);   opacity: 1;   }
}

/* Gentle breathing scale */
@keyframes splashLogoBreathe {
  0%,100% { transform: scale(1);     }
  50%     { transform: scale(1.035); }
}

/* Background glow ring pulse */
@keyframes splashRingPulse {
  0%,100% { transform: scale(0.88); opacity: 0;   }
  50%     { transform: scale(1.12); opacity: 1;   }
}

/* Dot entry */
@keyframes splashDotIn {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* Dot pulse */
@keyframes splashDotPulse {
  0%,100% { transform: scale(1);    opacity: 1;   }
  50%     { transform: scale(1.55); opacity: 0.5; }
}

/* ── Reduced motion: skip all animation, just show logo ── */
@media (prefers-reduced-motion: reduce) {
  .splash-logo-wrap,
  .splash-logo-img,
  .splash-content,
  .splash-logo-wrap::before,
  .splash-dot {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
  .splash-loader {
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
}

/* Accessible Skip Link */
.skip {
  position: absolute;
  left: -9999px;
  top: 16px;
  background: var(--blue);
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: var(--btn-radius);
  font-weight: 500;
  font-size: 13px;
  z-index: 1000;
  transition: left 0.2s;
}
.skip:focus {
  left: 24px;
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Container Wrap (Desktop: at least 56px per side; Mobile: 20px) */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 56px;
}
@media (max-width: 800px) {
  .wrap {
    padding: 0 28px;
  }
}
@media (max-width: 600px) {
  .wrap {
    padding: 0 20px;
  }
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Scroll Progress Bar */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--blue);
  width: 0%;
  z-index: 1100;
  transition: width 0.08s linear;
}

/* =========================================================
   TYPOGRAPHY SPECIFICATIONS & TRIO COLOR ACCENTS
========================================================= */
h1, h2, h3, h4 {
  font-family: "RZMT Sans", "Roboto", "Segoe UI", sans-serif;
  font-weight: 500;
  color: var(--text);
  line-height: 1.14;       /* Headings: generally around 1.12–1.16 */
  letter-spacing: -0.02em;
}

/* Logo Trio Colors (Black, Orange, Blue) */
.text-orange {
  color: #FF5722 !important; /* Vibrant Logo Orange */
}
.text-coral {
  color: #FF5722 !important; /* Logo Orange Accent */
}
.text-blue {
  color: var(--blue) !important;  /* Royal Blue #2563DF */
}
.text-dark {
  color: var(--text) !important;  /* Charcoal Black #20262E */
}

/* Main section headings: Approx 32–45px (Mobile: 31–35px), Medium 500 */
.sec-title {
  font-size: clamp(32px, 3.8vw, 45px);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.15;
}
@media (max-width: 600px) {
  .sec-title {
    font-size: clamp(31px, 7vw, 35px);
  }
}

/* Introductory paragraphs: 18px (Mobile: 15px), Line-height: 1.85–1.9 */
.intro-lead {
  font-size: 18px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 820px;
}
@media (max-width: 600px) {
  .intro-lead {
    font-size: 15px;
    line-height: 1.8;
  }
}

.sec-lead {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 760px;
  margin-bottom: 32px;
}

.sub-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8A9099;
  margin-bottom: 12px;
  display: block;
}

p {
  color: var(--muted);
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.7;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover {
  color: var(--blue-hover);
}

/* Keyboard Focus Outline */
:focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}

/* =========================================================
   BUTTONS & LINKS (PDF Page 4 Exact Sizing)
   Desktop: 13px, 50px min height, 12px vertical / 24px horizontal
   Mobile: 12px, 47px min height, 12px vertical / 19px horizontal
   Corner radius: 28px, Hover duration: 0.2s
========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--blue);
  color: #FFFFFF !important;
  font-family: "RZMT Sans", "Roboto", sans-serif;
  font-weight: 500;
  font-size: 13px;
  height: 50px;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--blue);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn:hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  transform: translateY(-2px); /* Rise slightly on hover */
  box-shadow: 0 6px 18px rgba(37, 99, 223, 0.25);
}

.btn.sec {
  background: var(--btn-sec-bg);
  color: var(--btn-sec-text) !important;
  border: 1px solid var(--btn-sec-border);
}
.btn.sec:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: var(--text) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(32, 38, 46, 0.08);
}

.btn-sm {
  height: 42px;
  min-height: 42px;
  padding: 8px 18px;
  font-size: 13px;
}

@media (max-width: 600px) {
  .btn {
    height: 47px;
    min-height: 47px;
    font-size: 12px;
    padding: 12px 19px;
  }
}

.btn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* Ice-blue CTA button variant */
.btn.btn-ice {
  background: #E0F2FE;
  color: #0C4A6E !important;
  border-color: #BAE6FD;
}
.btn.btn-ice:hover {
  background: #BAE6FD;
  border-color: #7DD3FC;
  color: #0C4A6E !important;
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.20);
}

.btn-row.justify-center {
  justify-content: center;
}

/* ── Home: company section wrapper ── */
.home-company-section {
  border-top: 1px solid var(--line);
}

/* Text link with animated arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
  color: var(--blue);
  cursor: pointer;
}
.text-link svg {
  transition: transform 0.2s ease;
}
.text-link:hover svg {
  transform: translateX(4px);
}

/* =========================================================
   WHITE NAVBAR (Matching Specification: 88px/76px/70px)
   Navigation: Regular 400, 14px (Mobile: 15px)
========================================================= */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
  height: var(--hdr-desktop);
  display: flex;
  align-items: center;
  transition: box-shadow 0.2s ease;
}
@media (max-width: 800px) {
  header { height: var(--hdr-tablet); }
}
@media (max-width: 600px) {
  header { height: var(--hdr-mobile); }
}

header.scrolled {
  box-shadow: 0 4px 20px rgba(32, 38, 46, 0.05);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 16px;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo-img {
  height: 38px;
  width: auto;
  display: block;
}

.header-center-nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.header-center-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
  list-style: none;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
.header-center-nav a {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.header-center-nav a:hover {
  color: var(--text);
}
.header-center-nav a.active {
  color: var(--text);
  font-weight: 500;
}
.header-center-nav a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* "Let's talk ↗" text link matching screenshot */
.nav-talk-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.nav-talk-link:hover {
  color: var(--blue-hover);
  transform: translateY(-1px) translateX(1px);
}
.nav-talk-link svg {
  transition: transform 0.2s ease;
}
.nav-talk-link:hover svg {
  transform: translate(2px, -2px);
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
}
@media (max-width: 800px) {
  .header-center-nav { display: none; }
  .menu-toggle { display: block; }
}

.mobile-nav-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
  padding: 24px;
  box-shadow: 0 12px 30px rgba(32, 38, 46, 0.1);
}
.mobile-nav-drawer.open {
  display: block;
}
.mobile-nav-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobile-nav-drawer a {
  font-size: 15px; /* 15px in the mobile menu */
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
  display: block;
  padding: 8px 0;
}
.mobile-nav-drawer a.active {
  color: var(--blue);
  font-weight: 500;
}

/* =========================================================
   SEPARATE PAGES ARCHITECTURE (No lengthy scroll)
========================================================= */
.site-page {
  display: none;
  opacity: 0;
  animation: fadeInPage 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.site-page.active {
  display: block;
}

@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Major Section Spacing: 70–125px */
.page-container {
  padding: 96px 0 108px;
  min-height: calc(100vh - var(--hdr-desktop) - 200px);
}
@media (max-width: 800px) {
  .page-container {
    padding: 72px 0 84px;
  }
}

/* =========================================================
   HOME PAGE SCREEN (EXACT MATCH TO USER UI SCREENSHOT)
   Homepage headline: Medium 500, up to 78px; 84px on wide screens (Mobile: 38px)
   With Blended Logo Watermark Behind Heading
========================================================= */
.home-screen-wrap {
  min-height: calc(100vh - var(--hdr-desktop));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 0 32px;
  background: #FFFFFF;
  text-align: center;
}

.home-center-content {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Eyebrow badge: • DEEPTECH. BUILT AROUND REALITY.
   Positioned directly on top of the headline */
.home-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #68727F;
  text-transform: uppercase;
  margin-bottom: 24px;
  width: 100%;
}
.home-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  display: inline-block;
}

/* Headline Wrapper with Blended Logo Watermark */
.home-headline-blend-wrap {
  position: relative;
  display: inline-block;
  max-width: 960px;
  margin: 0 auto;
}

/* Watermark logo REMOVED — no background logo on home page */

/* Headline: Technology solutions for real-world challenges.
   Three-color blend matching logo: dark (#20262E) · orange (#E8441A) · blue (#2563DF) */
.home-main-headline {
  position: relative;
  z-index: 1;
  font-size: clamp(38px, 6.2vw, 78px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.14;
  margin-bottom: 24px;
}

/* Dark charcoal words — "Technology", "for" */
.hl-dark {
  color: #20262E;
}

/* Orange words — "solutions", trailing "." */
.hl-orange {
  color: #E8441A;
}

/* Blue-to-orange gradient span — "real-world challenges" */
.hl-gradient {
  background: linear-gradient(95deg, #2563DF 0%, #1E4FBF 55%, #E8441A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Fallback for unsupported browsers */
  color: #2563DF;
}

/* Keep the trailing dot orange even inside gradient span */
.hl-orange {
  -webkit-text-fill-color: #E8441A;
  background: none;
  color: #E8441A;
}

/* Splash dot — REMOVED (clean logo only) */
.splash-dot { display: none !important; }

/* Responsive headline sizes */
@media (min-width: 1600px) { .home-main-headline { font-size: 84px; } }
@media (max-width: 600px)  { .home-main-headline { font-size: 38px; } }

/* Subtitle */
.home-subtext {
  font-size: 18px; /* Introductory paragraphs: 18px */
  line-height: 1.85; /* Selected paragraphs: 1.85–1.9 */
  color: var(--muted);
  max-width: 660px;
  margin: 0 auto 36px;
}
@media (max-width: 600px) {
  .home-subtext {
    font-size: 15px; /* Mobile: 15px */
    line-height: 1.75;
  }
}

/* Bottom Bar on Home Screen */
.home-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 36px;
  font-size: 11px;
  color: #94A3B8;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: 100%;
}
.home-scroll-hint {
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, transform 0.2s;
}
.home-scroll-hint:hover {
  color: var(--blue);
  transform: translateY(2px);
}

/* =========================================================
   LEFT & RIGHT COMBINE SCROLL ANIMATION
   Cinematic scroll integration across entire webpage
========================================================= */
.reveal-from-left {
  opacity: 0;
  transform: translate3d(-70px, 0, 0) scale(0.985);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-from-left.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.reveal-from-left.scrolled-out {
  opacity: 0.15;
  transform: translate3d(-40px, 0, 0) scale(0.99);
}

.reveal-from-right {
  opacity: 0;
  transform: translate3d(70px, 0, 0) scale(0.985);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-from-right.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.reveal-from-right.scrolled-out {
  opacity: 0.15;
  transform: translate3d(40px, 0, 0) scale(0.99);
}

/* Center elements reveal on scroll */
.reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.99);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.reveal-on-scroll.scrolled-out {
  opacity: 0.2;
  transform: translate3d(0, -16px, 0);
}

/* Step cards when using reveal-from-left / right */
.step-card.reveal-from-left,
.step-card.reveal-from-right {
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.step-card.reveal-from-left.revealed:hover,
.step-card.reveal-from-right.revealed:hover {
  transform: translate3d(0, -5px, 0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

@media (max-width: 800px) {
  .reveal-from-left {
    transform: translate3d(-30px, 0, 0) scale(0.99);
  }
  .reveal-from-right {
    transform: translate3d(30px, 0, 0) scale(0.99);
  }
}

/* =========================================================
   APPROACH PAGE & TAARAA OS CARD (PDF Page 6)
========================================================= */
.content-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.content-two-col.align-center {
  align-items: center;
}
@media (max-width: 800px) {
  .content-two-col {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.taaraa-card {
  background: var(--pale-blue); /* Pale blue #F1F5FC */
  border: 1px solid #DCE6F5;
  border-radius: var(--card-radius); /* 16–22px */
  padding: 44px;
  box-shadow: 0 10px 30px rgba(33, 56, 84, 0.04);
}
.taaraa-card h3 {
  color: var(--taaraa-heading); /* Deep blue-grey #213854 */
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 12px;
}
.taaraa-card .taaraa-sub {
  color: var(--blue);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.taaraa-card p {
  color: #354B64;
  line-height: 1.75;
  margin-bottom: 24px;
  font-size: 15px;
}
.taaraa-card .taaraa-meta {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 24px;
  display: block;
}

/* Bullet list per PDF */
.pdf-bullet-list {
  list-style: none;
  margin: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdf-bullet-list li {
  position: relative;
  padding-left: 20px;
  color: var(--text);
  font-size: 15px;
}
.pdf-bullet-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-size: 18px;
  line-height: 1.4;
}

/* =========================================================
   CAPABILITIES PAGE — SCROLL-DRIVEN PHOTO ALBUM
   Sticky stage. Cards swipe in/out like a photo album
   as user scrolls through the tall wrapper.
========================================================= */

/* ── WhatsApp CSS route guard ────────────────────────── */
body:not([data-route="contact"]) [class*="eapps-"],
body:not([data-route="contact"]) [id*="eapps-"],
body:not([data-route="contact"]) .elfsight-app-a855848b-05c7-48cc-88c3-85128b2549bc {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Section header above the album ── */
.caps-header-wrap {
  padding: 80px 0 48px;
  background: #FFFFFF;
}

/* ── Outer wrapper: tall so scrolling through it drives the stage ── */
.caps-album-wrapper {
  position: relative;
  /* 3 cards × ~90vh each — gives comfortable scroll travel */
  height: 280vh;
  background: #FFFFFF;
}

/* ── Sticky stage: stays pinned while wrapper scrolls past ── */
.caps-album-stage {
  position: sticky;
  top: 72px;                          /* below the 72px header */
  height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #FFFFFF;
}

/* ── Card stack container — all 3 cards overlap here ── */
.caps-album-cards {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: 380px;
  margin: 0 auto;
}

/* ── Individual card ── */
.caps-album-card {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, #1A3FA8 0%, #0F2774 100%);
  box-shadow:
    0 32px 64px rgba(15, 39, 116, 0.28),
    0 8px 24px rgba(15, 39, 116, 0.18);
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* default: waiting off-screen to the right */
  transform: translateX(100%) scale(0.94);
  opacity: 0;
  transition:
    transform 0.65s cubic-bezier(0.4, 0.0, 0.2, 1),
    opacity   0.55s cubic-bezier(0.4, 0.0, 0.2, 1),
    box-shadow 0.4s ease;
  will-change: transform, opacity;
  user-select: none;
}

/* Active — fully visible, centred */
.caps-album-card.is-active {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* Previous — exited to the left */
.caps-album-card.is-prev {
  transform: translateX(-100%) scale(0.94);
  opacity: 0;
}

/* ── Card internals ── */
.caps-card-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.caps-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.90);
  margin-bottom: 24px;
  flex-shrink: 0;
}

.caps-album-card h3 {
  font-size: 28px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.caps-album-card p {
  font-size: 15px;
  color: rgba(255,255,255,0.76);
  line-height: 1.75;
  margin: 0;
  max-width: 540px;
}

/* Scroll-for-next hint at card bottom */
.caps-card-swipe-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  color: rgba(255,255,255,0.40);
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* ── Progress dot indicators ── */
.caps-album-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}

.caps-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D1D9E6;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, width 0.3s;
}

.caps-dot.is-active {
  background: #2563DF;
  width: 28px;
  border-radius: 4px;
  transform: none;
}

/* ── Scroll hint label at bottom of stage ── */
.caps-album-scroll-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: #B0BAC8;
  text-transform: uppercase;
  transition: opacity 0.4s ease;
}

.caps-album-scroll-label.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── CTA below album ── */
.caps-cta-wrap {
  padding: 72px 0 96px;
  background: #FFFFFF;
}

/* ── Mobile: compact cards, touch-swipe ── */
@media (max-width: 700px) {
  .caps-album-wrapper { height: 320vh; }

  .caps-album-stage { top: 60px; height: calc(100vh - 60px); }

  .caps-album-cards {
    max-width: 100%;
    height: 320px;
    padding: 0 20px;
  }

  .caps-album-card {
    border-radius: 18px;
    padding: 36px 28px;
    inset: 0 20px;
  }

  .caps-album-card h3 {
    font-size: 21px;
  }

  .caps-album-card p {
    font-size: 14px;
  }

  .caps-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 18px;
  }

  .caps-header-wrap { padding: 56px 0 32px; }
  .caps-cta-wrap    { padding: 48px 0 64px; }
}

/* ── Reduced motion: show all cards statically ── */
@media (prefers-reduced-motion: reduce) {
  .caps-album-card {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(15,39,116,0.18);
  }
  .caps-album-cards { height: auto; }
  .caps-album-wrapper { height: auto; }
  .caps-album-stage {
    position: static;
    height: auto;
    overflow: visible;
  }
}

/* =========================================================
   OUR WORK PAGE (PDF Page 9): CENTER CUT SPLIT WITH VIDEO
========================================================= */
.work-video-wrapper {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: #0B111A;
  border: 1px solid var(--line);
  box-shadow: 0 20px 48px rgba(32, 38, 46, 0.08);
  line-height: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.work-video-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 54px rgba(32, 38, 46, 0.12);
}

.work-video {
  width: 100%;
  height: auto;
  max-height: 380px;
  display: block;
  object-fit: cover;
  border-radius: calc(var(--card-radius) - 1px);
}

/* =========================================================
   COMPANY PAGE (PDF Page 7-8)
   Interactive Step Cards with Hover Transition & Service Details
========================================================= */
.company-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}

.company-linkedin-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: #0A66C2;
  border: 1px solid #DFE4EB;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(10, 102, 194, 0.06);
}
.company-linkedin-badge:hover {
  background: #0A66C2;
  color: #FFFFFF;
  border-color: #0A66C2;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 102, 194, 0.2);
}
.company-linkedin-badge svg {
  flex-shrink: 0;
}

.company-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 44px 0 24px;
}
@media (max-width: 992px) {
  .company-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .company-steps {
    grid-template-columns: 1fr;
  }
}

.step-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 26px 22px 20px;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

/* Hover color transition & UX enhancement */
.step-card:hover {
  background: #F1F5FC;
  border-color: var(--blue);
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(37, 99, 223, 0.1);
}

.step-card.expanded {
  background: #F1F5FC;
  border-color: var(--blue);
  box-shadow: 0 16px 36px rgba(37, 99, 223, 0.12);
}

.step-card-main {
  flex-grow: 1;
}

.step-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  background: #F1F5FC;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 14px;
  transition: background 0.25s ease, color 0.25s ease;
}

.step-card:hover .step-num,
.step-card.expanded .step-num {
  background: var(--blue);
  color: #FFFFFF;
}

.step-card h3 {
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--text);
  transition: color 0.25s ease;
}

.step-card:hover h3,
.step-card.expanded h3 {
  color: #174FBE;
}

.step-card p {
  font-size: 14px;
  line-height: 1.65;
  color: #4B5563;
}

/* Uncover Service Details Accordion */
.step-details {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin-top 0.3s ease;
}

.step-card.expanded .step-details {
  max-height: 260px;
  opacity: 1;
  margin-top: 16px;
}

.step-service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed #CBD5E1;
  padding-top: 14px;
}

.step-service-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}

.step-service-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue);
  font-size: 15px;
  line-height: 1.2;
}

/* Card Footer with Plus Button on Lower Right Corner */
.step-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 12px;
}

.step-action-hint {
  font-size: 12px;
  font-weight: 500;
  color: #68727F;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.25s ease;
}

.step-card:hover .step-action-hint,
.step-card.expanded .step-action-hint {
  color: var(--blue);
}

.step-expand-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #DFE4EB;
  background: #FFFFFF;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-left: auto;
  box-shadow: 0 2px 6px rgba(32, 38, 46, 0.06);
}

.step-card:hover .step-expand-btn {
  border-color: var(--blue);
}

.step-card.expanded .step-expand-btn {
  background: var(--blue);
  color: #FFFFFF;
  border-color: var(--blue);
}

.step-expand-btn svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-card.expanded .step-expand-btn svg {
  transform: rotate(45deg);
}

/* =========================================================
   CONTACT PAGE (PDF Page 9)
========================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 800px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.contact-form {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 36px;
  box-shadow: 0 10px 30px rgba(32, 38, 46, 0.04);
}
@media (max-width: 600px) {
  .contact-form {
    padding: 24px;
  }
}

.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: var(--form-radius); /* 7px */
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(143, 180, 255, 0.45); /* Light blue #8FB4FF */
}
.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.form-status {
  font-size: 13px;
  margin-top: 14px;
  min-height: 20px;
}
.form-status.success {
  color: #059669;
}
.form-status.error {
  color: #DC2626;
}

/* =========================================================
   COMPACT WHITE FOOTER
========================================================= */
footer {
  background: #FFFFFF;
  border-top: 1px solid var(--line);
  padding: 24px 0 20px;
  margin-top: auto;
}

.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-brand-lockup .brand-logo-img {
  height: 28px;
  width: auto;
}

.footer-brand-lockup p {
  font-size: 13px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 16px;
  line-height: 1.4;
}

.footer-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-nav a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-nav a:hover {
  color: var(--blue);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-links {
  display: flex;
  gap: 16px;
}
.footer-links button,
.footer-links a {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-links button:hover,
.footer-links a:hover {
  color: var(--blue);
}

/* =========================================================
   FOOTER LINKEDIN ICON
========================================================= */
.footer-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0A66C2;
  text-decoration: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--line);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.footer-linkedin:hover {
  background: #0A66C2;
  color: #FFFFFF;
  border-color: #0A66C2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.2);
}

/* =========================================================
   PRIVACY & TERMS ACCESSIBLE MODALS (PDF Pages 10-11)
========================================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 22, 34, 0.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-backdrop.open {
  display: flex;
}

.modal-dialog {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  position: relative;
}
.modal-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
}
.modal-close-btn:hover {
  background: #E2E8F0;
}
.modal-dialog h2 {
  font-size: 26px;
  margin-bottom: 20px;
}
.modal-dialog h3 {
  font-size: 18px;
  margin: 24px 0 8px;
}
.modal-dialog p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* =========================================================
   CAREERS PAGE
========================================================= */
.careers-openings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.careers-role-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  background: #F7F9FC;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.careers-role-card:hover {
  box-shadow: 0 6px 24px rgba(32,38,46,0.07);
  transform: translateY(-2px);
}

.careers-role-info {
  flex: 1;
  min-width: 0;
}

.careers-role-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2563DF;
  background: #EEF3FF;
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.careers-role-card h4 {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 6px;
}

.careers-role-card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .careers-role-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 20px;
  }
}


/* =========================================================
   CAREER SLIDE PANEL
   Fixed right-side drawer, toggles open from Our Work
   "Career Info" button or Contact "Job Opening" dropdown.
========================================================= */

/* Backdrop */
.career-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.career-panel-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

/* Panel */
.career-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: #FFFFFF;
  box-shadow: -12px 0 48px rgba(15, 23, 42, 0.18);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.career-panel.open {
  transform: translateX(0);
}

/* Panel header bar */
.career-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.career-panel-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}

.career-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.career-panel-close:hover {
  background: #F1F5F9;
  color: var(--text);
}

/* Scrollable body */
.career-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 40px;
  overscroll-behavior: contain;
}

.career-panel-section-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

/* Individual role cards inside panel */
.career-panel-roles {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.career-panel-role {
  padding: 22px 20px;
  background: #F7F9FC;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: box-shadow 0.2s ease;
}
.career-panel-role:hover {
  box-shadow: 0 4px 16px rgba(32,38,46,0.07);
}

.career-panel-role h5 {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin: 8px 0 6px;
}

.career-panel-role p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.6;
}

.career-apply-btn {
  font-size: 12px;
  height: 36px;
  min-height: 36px;
  padding: 6px 14px;
}

/* Speculative CTA at bottom of panel */
.career-panel-speculative {
  padding: 20px;
  background: #EEF3FF;
  border-radius: 14px;
  border: 1px solid #C7D7F9;
}
.career-panel-speculative p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 14px;
}
.career-panel-speculative p strong {
  color: var(--text);
}

/* Mobile: full-width panel */
@media (max-width: 600px) {
  .career-panel {
    width: 100vw;
    border-radius: 0;
  }
  .career-panel-header { padding: 20px 20px 16px; }
  .career-panel-body   { padding: 20px 20px 32px; }
}

/* =========================================================
   "Get Started" contact form button
========================================================= */
.btn-get-started {
  width: 100%;
  justify-content: center;
  font-size: 14px;
  height: 52px;
  min-height: 52px;
  letter-spacing: 0.02em;
}

/* Contact form success state */
.form-success-state {
  text-align: center;
  padding: 40px 24px;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: #F7FFF4;
  display: none;
}
.form-success-state.visible {
  display: block;
}
.form-success-icon {
  width: 52px;
  height: 52px;
  background: #22C55E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: white;
}
.form-success-state h4 {
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.form-success-state p {
  font-size: 14px;
  color: var(--muted);
}

/* =========================================================
   COMPREHENSIVE ALIGNMENT & POLISH — Global overhaul
========================================================= */

/* ── 1. Section vertical rhythm ── */
.page-container {
  padding: 88px 0 100px;
}
@media (max-width: 800px) {
  .page-container {
    padding: 64px 0 80px;
  }
}
@media (max-width: 600px) {
  .page-container {
    padding: 48px 0 64px;
  }
}

/* ── 2. Two-col grid gap tightened for harmony ── */
.content-two-col {
  gap: 64px;
}
@media (max-width: 900px) {
  .content-two-col {
    gap: 40px;
  }
}
@media (max-width: 800px) {
  .content-two-col {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ── 3. sec-title — consistent top breathing room ── */
.sec-title {
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.18;
}

/* ── 4. sub-label — breathing before sec-title ── */
.sub-label {
  margin-bottom: 10px;
}

/* ── 5. sec-lead max-width & centering ── */
.sec-lead.mx-auto {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ── 6. Inline spans inside headings stay baseline ── */
.sec-title span,
.sec-title .text-blue,
.sec-title .hl-gradient,
.sec-title .hl-dark,
.sec-title .hl-orange {
  display: inline;
  vertical-align: baseline;
  line-height: inherit;
}

/* ── 7. Home hero — centre-align all children ── */
.home-center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.home-center-content .btn-row {
  margin-top: 32px;
}

/* ── 8. Company header row — label + LinkedIn side by side ── */
.company-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.company-header-row .sub-label {
  margin-bottom: 0;
}

/* ── 9. Step cards uniform height ── */
.company-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .company-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .company-steps {
    grid-template-columns: 1fr;
  }
}

/* ── 10. Caps header wrap — unified padding ── */
.caps-header-wrap {
  padding: 72px 0 36px;
}
@media (max-width: 800px) {
  .caps-header-wrap {
    padding: 56px 0 28px;
  }
}

/* ── 11. Collaboration CTA box — balanced padding ── */
.caps-cta-wrap {
  padding: 48px 0 80px;
}
.caps-cta-wrap .text-center {
  padding: 52px 48px;
}
@media (max-width: 600px) {
  .caps-cta-wrap {
    padding: 32px 0 56px;
  }
  .caps-cta-wrap .text-center {
    padding: 36px 24px;
  }
}

/* ── 12. Contact layout — balanced column widths ── */
.contact-layout {
  gap: 72px;
}
@media (max-width: 900px) {
  .contact-layout {
    gap: 48px;
  }
}

/* ── 13. Contact form internal spacing ── */
.contact-form {
  padding: 36px 36px 40px;
}
@media (max-width: 600px) {
  .contact-form {
    padding: 28px 20px 32px;
  }
}

/* ── 14. Form group labels flush & consistent ── */
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}
.form-group {
  margin-bottom: 20px;
}

/* ── 15. Footer grid — vertical alignment ── */
.footer-grid {
  align-items: start;
  padding-top: 0;
}

/* ── 16. Career panel — empty state styling ── */
.career-panel-empty {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  padding: 32px 24px;
  background: #F7F9FC;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
}

/* ── 17. Career panel header — no sub-label needed ── */
.career-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--line);
}
.career-panel-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

/* ── 18. Career panel body with empty state ── */
.career-panel-body {
  padding: 28px 28px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── 19. Work page two-col — video side proportional ── */
.work-video-wrapper {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0a0a0a;
}
.work-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 20. TAARAA card — consistent internal padding ── */
.taaraa-card {
  padding: 28px 28px 28px;
  border-radius: var(--card-radius);
}

/* ── 21. Home eyebrow row centred ── */
.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

/* ── 22. Home subtext max-width ── */
.home-subtext {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 23. btn-row gap refinement ── */
.btn-row {
  gap: 12px;
}

/* ── 24. Privacy / Terms modal heading ── */
.modal-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
}

/* ── Sub-label blue dot marker ── */
.sub-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  flex-shrink: 0;
}

/* =========================================================
   HOME CAPABILITIES SECTION — Box cards with scroll-up
========================================================= */
.home-caps-section {
  background: #F7F9FC;
  border-top: 1px solid var(--line);
  padding: 96px 0 108px;
}
@media (max-width: 800px) {
  .home-caps-section { padding: 64px 0 80px; }
}
@media (max-width: 600px) {
  .home-caps-section { padding: 48px 0 64px; }
}

/* Two-column layout: vertical label | content */
.home-caps-layout {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .home-caps-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Vertical rotated side label */
.home-caps-sidebar {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}
.home-caps-side-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C4CAD4;
  white-space: nowrap;
  user-select: none;
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
@media (max-width: 900px) {
  .home-caps-sidebar { display: none; }
}

/* Header block above grid */
.home-caps-header {
  margin-bottom: 44px;
}
.home-caps-header .sub-label {
  margin-bottom: 12px;
}
.home-caps-header .sec-title {
  margin-bottom: 16px;
}
.home-caps-header .intro-lead {
  max-width: 680px;
  margin: 0;
}

/* 2 × 2 card grid */
.home-caps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 680px) {
  .home-caps-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Individual capability card */
.home-cap-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px 30px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  /* Initial hidden state for reveal-up */
  opacity: 0;
  transform: translateY(40px);
}
.home-cap-card:hover {
  box-shadow: 0 8px 28px rgba(37, 99, 223, 0.09);
  border-color: rgba(37, 99, 223, 0.22);
}
/* Revealed state — staggered via CSS custom property --delay */
.home-cap-card.revealed {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity  0.60s ease          var(--delay, 0ms),
    transform 0.60s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* Icon badge */
.home-cap-card-icon {
  width: 44px;
  height: 44px;
  background: #EEF3FF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* Card title */
.home-cap-card-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.4;
}

/* Card description */
.home-cap-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* =========================================================
   REVEAL-UP: Generic scroll-triggered slide-up
========================================================= */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
}
.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity  0.60s ease          var(--delay, 0ms),
    transform 0.60s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms);
}

/* =========================================================
   REVEAL-WORDS: Paragraph "join together" fade-slide
========================================================= */
.reveal-words {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s ease 0.08s, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.reveal-words.revealed {
  opacity: 1;
  transform: translateY(0);
}