/* GetAProgrammer — Apple-design pass
   Principles applied throughout (see WWDC "Designing Fluid Interfaces" /
   "Details of UI Typography" / "Principles of Great Design"):
   - System font stack, size-specific tracking + leading (never one fixed value)
   - Materials: translucent header, layered surfaces, scroll-edge blur — not hard dividers
   - Motion behaves like spring physics: critically-damped by default (--ease-spring),
     a touch of bounce only on momentum-driven micro-interactions (--ease-bounce)
   - Response: feedback fires on press, not on release; nothing waits on a timer
   - Reduced motion / transparency / contrast are real, tested states — not afterthoughts */

:root {
  --navy: #0b0b0c;          /* near-black canvas, not pure #000 (Apple avoids true black on OLED-agnostic web) */
  --navy-2: #17171a;
  --orange: #f4762e;
  --orange-dark: #d9611f;
  --red: #da1312;
  --red-dark: #b10f0e;
  --teal: var(--red);
  --slate: #6e6e73;         /* Apple's own secondary-label gray */
  --ink: #1d1d1f;           /* Apple's near-black label color */
  --bg: #ffffff;
  --bg-soft: #f5f5f7;       /* Apple's canonical light surface gray */
  --bg-navy-soft: #000000;
  --border: #d2d2d7;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 980px;
  --shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 2px 14px -4px rgba(0, 0, 0, 0.1);
  --max: 1200px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI Variable", "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  --font-body: var(--font);

  /* Motion: designer-friendly spring language (damping + response), translated to
     the nearest web-safe cubic-bezier equivalents. */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);   /* damping ~1.0 / response ~0.4 — repositions, sheets */
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);    /* quick UI settle — buttons, cards, nav */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* damping ~0.8 — only on momentum/press-release */
  --dur-press: 100ms;   /* response lives on the press — must feel instant */
  --dur-ui: 240ms;
  --dur-move: 400ms;

  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Typography: tracking + leading are size-specific, never fixed ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 600;
  margin: 0 0 0.5em; color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 650; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 650; }
h3 { font-size: 1.28rem; line-height: 1.25; letter-spacing: -0.012em; font-weight: 600; }
h4 { font-size: 0.98rem; line-height: 1.3; letter-spacing: -0.005em; font-weight: 600; }
p { margin: 0 0 1em; color: var(--slate); font-size: 1rem; letter-spacing: 0; }
.container { /*max-width: var(--max);*/ margin: 0 auto; padding: 0 28px; }
/*section { padding: 112px 0; }*/
.section-tight { padding: 56px 0; }
.mono { font-family: "SF Mono", "JetBrains Mono", "SFMono-Regular", Menlo, monospace; }

/* ---------- Buttons: pill-shaped, feedback on press not release ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.95rem;
  font-family: var(--font-display); letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; position: relative;
  transition: transform var(--dur-press) ease-out, background var(--dur-ui) var(--ease-snappy),
    box-shadow var(--dur-ui) var(--ease-snappy), border-color var(--dur-ui) var(--ease-snappy), color var(--dur-ui) ease;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.96); transition-duration: var(--dur-press); }
.btn .arrow { transition: transform var(--dur-ui) var(--ease-snappy); display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn-primary:hover { background: var(--red-dark); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); backdrop-filter: blur(20px); }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-outline:hover { border-color: var(--ink); background: var(--bg-soft); }
.btn-sm { padding: 9px 18px; font-size: .85rem; }

/* ---------- Header: translucent material, thickens on scroll (scroll-edge effect) ---------- */
header.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-ui) ease, border-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}
header.site-header.scrolled {
  background: rgba(255,255,255,.86);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 13px 28px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { width: auto; display: block; }
nav.primary-nav > ul { display: flex; gap: 2px; align-items: center; }
nav.primary-nav .nav-item { position: relative; display: flex; align-items: center; }
nav.primary-nav a.nav-link {
  font-weight: 500; font-size: 1rem; color: var(--ink); opacity: .82;
  padding: 9px 20px; position: relative; transition: opacity var(--dur-ui) ease;
  font-family: var(--font-display); letter-spacing: -0.005em; display: inline-flex; align-items: center;
}
nav.primary-nav a.nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui) var(--ease-snappy);
}
nav.primary-nav a.nav-link:hover { opacity: 1; }
nav.primary-nav a.nav-link:hover::after { transform: scaleX(1); }

/* ---------- Mega menu: materializes as an extension of the header's own
   glass, anchored flush under its trigger so there's zero dead hover-zone.
   CSS-driven (hover/focus-within) so it works with no JS dependency at all;
   JS only enhances the mobile accordion below. ---------- */
.mega-toggle { display: none; }
.mega-panel {
  position: absolute; top: 100%; left: 0; margin-top: 0;
  background: #fff; backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid var(--border); border-top: 1px solid var(--border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px 32px; display: flex; gap: 36px; align-items: flex-start;
  opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-spring), transform var(--dur-ui) var(--ease-spring), visibility 0s linear var(--dur-ui);
  z-index: 60;
}
/* Wide panels (Services, Technologies) keep the link grid and the CTA
   card side by side; narrow panels (a single list) stack the CTA card
   below instead — side-by-side at 340px was crushing the link column
   to near-nothing, which is the "CSS looks off" bug this replaces. */
.mega-panel.wide { width: min(880px, calc(100vw - 56px)); gap: 24px; }
.mega-panel.narrow { width: min(360px, calc(100vw - 56px)); flex-direction: column; gap: 20px; }
.nav-item:hover .mega-panel,
.nav-item:focus-within .mega-panel,
.nav-item.mega-open .mega-panel {
  opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto;
  transition: opacity var(--dur-ui) var(--ease-spring), transform var(--dur-ui) var(--ease-spring), visibility 0s linear 0s;
}
.mega-grid { display: grid; gap: 24px; flex: 1; min-width: 0; }
.mega-panel.narrow .mega-grid { flex: none; width: 100%; }
/* minmax(0, 1fr), not plain 1fr — grid tracks default to a content-based
   minimum, so a long label like "Custom Software Development" was forcing
   its column wider than its 1fr share and spilling the whole grid past the
   panel's own background instead of wrapping. This is that fix. */
.mega-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mega-grid-1 { display: block; }
.mega-col { min-width: 0; }
.mega-col h4 { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); margin: 0 0 12px; font-family: var(--font-display); }
.mega-col ul li { margin-bottom: 2px; }
.mega-col ul li a {
  display: block; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; font-size: .87rem; color: var(--ink);
  letter-spacing: -0.004em; line-height: 1.35; white-space: normal; overflow-wrap: break-word;
  transition: background var(--dur-press) ease-out, color var(--dur-press) ease-out;
}
.mega-col ul li a:hover { background: var(--bg-soft); color: var(--red); }
.mega-col.two-col ul { columns: 2; column-gap: 14px; }
.mega-side {
  flex-shrink: 0; width: 200px; background: var(--bg-soft); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 4px;
}
.mega-panel.narrow .mega-side { width: 100%; }
.mega-side h4 { font-size: .96rem; margin: 0 0 6px; letter-spacing: -0.012em; }
.mega-side p { font-size: .84rem; margin: 0 0 16px; letter-spacing: -0.004em; }
.mega-side .btn { width: 100%; justify-content: center; margin-bottom: 8px; }
.mega-viewall { font-size: .82rem; font-weight: 600; color: var(--red); font-family: var(--font-display); display: inline-flex; align-items: center; gap: 4px; }
.mega-viewall .arrow { transition: transform var(--dur-ui) var(--ease-snappy); }
.mega-viewall:hover .arrow { transform: translateX(3px); }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-phone { font-weight: 500; font-size: .84rem; color: var(--slate); font-family: var(--font-display); }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; -webkit-tap-highlight-color: transparent; }
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: transform var(--dur-ui) var(--ease-snappy), opacity var(--dur-ui) ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-close { display: none; }
.nav-backdrop { display: none; }

/* ---------- Homepage header: floats transparently over the hero image,
   solidifying to a dark glass bar once the page scrolls past it. Scoped to
   .site-header--overlay so every other page keeps the standard white header. ---------- */
header.site-header.site-header--overlay {
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(to bottom, rgba(11,11,12,.6), rgba(11,11,12,0));
  border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
header.site-header.site-header--overlay.scrolled {
  background: rgba(11,11,12,.82);
  backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom-color: rgba(255,255,255,.1);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
/*.site-header--overlay .logo img { filter: brightness(0) invert(1); }*/
.site-header--overlay nav.primary-nav a.nav-link { color: #fff; opacity: .82; }
.site-header--overlay nav.primary-nav a.nav-link::after { background: var(--orange); }
.site-header--overlay .nav-item.has-mega > a.nav-link::before {
  content: ""; width: 6px; height: 6px; margin-left: 7px; margin-top: -3px; right: 0; position: absolute;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); display: inline-block; opacity: .75;
}
.site-header--overlay .mega-toggle .chev { border-color: #fff; }
.site-header--overlay .nav-phone {
  display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  padding: 7px 16px 7px 12px; border-radius: var(--radius-pill);
}
.site-header--overlay .nav-phone::before {
  content: ""; width: 15px; height: 15px; flex-shrink: 0; background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.site-header--overlay .menu-toggle span { background: #fff; }
.site-header--overlay + .hero { padding-top: 132px; }

/* index.html — Header block: "bizen" dot-grid menu button.
   Layered on top of .site-header--overlay above; this only adds the
   always-visible app-grid toggle so the header matches the reference
   screenshot's right-most icon. It reuses the existing .menu-toggle
   button/JS (opens the same mobile nav sheet) — just re-skinned with a
   2x3 dot grid instead of the 3-line hamburger, using <i class="dot">
   so it doesn't collide with the hamburger's own "span" selectors above. */
.site-header--bizen .menu-toggle {
  position: relative; display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(255,255,255,.06);
  transition: background var(--dur-ui) ease, border-color var(--dur-ui) ease;
}
@media (max-width: 720px) {
  .site-header--bizen .menu-toggle { display: flex; }
}
.site-header--bizen .menu-toggle:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
/* Most pages still ship the older markup — six .dot spans directly inside
   the button — so the button itself is the grid there. Pages that wrap the
   dots in .menu-toggle-dots (to also support the close-icon overlay below)
   get the grid on that wrapper instead, leaving the button a plain flex
   center so the close "X" can sit on top of it. */
@media (max-width: 720px) {
  .site-header--bizen .menu-toggle:not(:has(.menu-toggle-dots)) {
    display: grid; grid-template-columns: repeat(2, 4px); grid-template-rows: repeat(3, 4px);
    gap: 4px; place-items: center; justify-content: center; align-content: center;
  }
}
.site-header--bizen .menu-toggle .menu-toggle-dots {
  display: grid; grid-template-columns: repeat(2, 4px); grid-template-rows: repeat(3, 4px); gap: 4px;
  transition: opacity var(--dur-ui) ease, transform var(--dur-ui) ease;
}
.site-header--bizen .menu-toggle .dot { width: 4px; height: 4px; border-radius: 50%; background: #fff; display: block; }
.site-header--bizen.scrolled .menu-toggle,
.site-header--bizen .menu-toggle[aria-expanded="true"] { background: rgba(255,255,255,.16); }
/* The dot-grid icon morphs into a plain X once the drawer is open, so the
   button always shows what tapping it will do next. */
.menu-toggle-close {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.5); transition: opacity var(--dur-ui) ease, transform var(--dur-ui) var(--ease-snappy);
  pointer-events: none;
}
.menu-toggle-close::before, .menu-toggle-close::after {
  content: ""; position: absolute; width: 16px; height: 2px; border-radius: 2px; background: #fff;
}
.menu-toggle-close::before { transform: rotate(45deg); }
.menu-toggle-close::after { transform: rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-dots { opacity: 0; transform: scale(.5); }
.menu-toggle[aria-expanded="true"] .menu-toggle-close { opacity: 1; transform: scale(1); }
@media (max-width: 720px) {
  .site-header--overlay + .hero { padding-top: 112px; }
  .site-header--overlay .nav-phone { display: none; }
  /* The mobile sheet is its own solid white surface (see nav.primary-nav
     below), so the overlay header's white-on-transparent styling must not
     leak into it — links go back to ink, chevron decoration is dropped. */
  .site-header--overlay nav.primary-nav a.nav-link { color: var(--ink); opacity: .82; }
  .site-header--overlay .nav-item.has-mega > a.nav-link::before { display: none; }
  .site-header--overlay .mega-toggle .chev { border-color: var(--ink); }
}

/* ---------- Glow: a soft, static field of color — depth without a mascot ---------- */
.glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.glow .g1 { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle, var(--orange), transparent 70%); top: -14%; left: -8%; }
.glow .g2 { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; background: radial-gradient(circle, var(--red), transparent 70%); bottom: -18%; right: -6%; opacity: .4; }
.glow.compact .g1 { width: 380px; height: 380px; top: -30%; right: -10%; left: auto; }
.glow.compact .g2 { width: 300px; height: 300px; bottom: -30%; left: -6%; right: auto; }

/* ---------- Hero: centered, type-led, one calm field of color behind it ---------- */
.hero {
  background: var(--navy); color: #fff; position: relative; overflow: hidden;
  padding: 96px 0 64px;
}
.hero .container { position: relative; z-index: 1; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); padding: 7px 16px 7px 12px; border-radius: var(--radius-pill);
  font-size: .74rem; font-weight: 600; letter-spacing: .03em; color: #ffb27a; margin-bottom: 26px;
  font-family: var(--font-display);
}
.hero-award{ width: 700px; margin: 30px 0;}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(218,19,18,.25); }
.hero h1 { color: #fff; margin: 0 auto 22px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--orange), var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { color: rgba(255,255,255,.68); font-size: 1.22rem; letter-spacing: -0.006em; max-width: 620px; margin: 0 auto 38px; line-height: 1.55; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* index.html — Hero block: "bizen" full-bleed video hero.
   Swaps the flat navy background for a looping background video with a
   dark overlay, and switches the hero from centered to left-aligned to
   match the reference layout — heading, lede, CTAs, a real stat line and
   a watermark. Scoped to .hero--video so every other page's .hero (flat
   color, centered) is untouched. */
.hero--video { padding: 168px 0 120px; min-height: 640px; display: flex; align-items: center; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero-video-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.72) 45%, rgba(11,11,12,.82) 100%);
}
.hero--video .container { position: relative; z-index: 2; text-align: left; margin-left: 0; }
.hero--video .eyebrow { margin-left: 0; }
.hero--video h1 { margin: 0 0 22px; }
.hero--video .lede { margin: 0 0 32px; }
.hero--video .hero-ctas { justify-content: flex-start; margin-bottom: 30px; }
.hero-stat { display: flex; align-items: baseline; gap: 8px; margin-bottom: 22px; font-family: var(--font-display); }
.hero-stat b { font-size: 1.7rem; font-weight: 650; letter-spacing: -0.02em; color: #fff; }
.hero-stat span { font-size: .92rem; color: rgba(255,255,255,.68); }
.hero-checklist { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; }
.hero-checklist li { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: rgba(255,255,255,.85); font-family: var(--font-display); }
.hero-checklist .check-icon { font-size: 1rem; line-height: 1; }
.hero-watermark {
  position: absolute; right: 4%; bottom: -2%; z-index: 1; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em;
  font-size: clamp(4rem, 14vw, 11rem); color: rgba(255,255,255,.07); white-space: nowrap;
}
@media (max-width: 720px) {
  .hero--video { padding: 132px 0 72px; min-height: 0; }
  .hero-watermark { display: none; }
}

/* index.html — Hero block: word-by-word fade + rise on the h1.
   .aw-main / .aw-em start empty and script.js splits each one's
   data-anim-text into per-word <span class="w"> elements with a staggered
   animation-delay, so the sentence appears one word at a time, fading in
   and rising slightly. The h1's aria-label carries the full sentence for
   screen readers/no-JS, so the empty spans never hurt a11y. */
.hero-anim-words .w {
  display: inline-block; opacity: 0; transform: translateY(14px);
  animation: hero-word-in 640ms var(--ease-snappy) forwards;
}
/* .w is inline-block so translateY can animate it, but an inline-block
   box isn't covered by its ancestor's background-clip:text paint (each
   one becomes its own atomic box) — so the em's gradient-clipped words
   were rendering invisible (transparent text, no background behind
   them). Re-declare the same gradient clip on each word inside em. */
.hero-anim-words em .w {
  background: linear-gradient(90deg, var(--orange), var(--red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes hero-word-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-anim-words .w { animation: none; opacity: 1; transform: none; }
}

/* Trust strip: a floating glass card that overlaps the hero's bottom edge */
.trust-strip { position: relative; z-index: 2; margin-bottom: 70px; }
.trust-strip .container {
  display: flex; flex-wrap: wrap; gap: 0; justify-content: space-between;
  background: rgba(255,255,255,.75); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 26px 34px;
}
.trust-num { display: flex; flex-direction: column; gap: 2px; padding: 6px 16px; }
.trust-num b { font-family: var(--font-display); font-size: 2.8rem; color: var(--ink); font-weight: 650; letter-spacing: -0.02em; }
.trust-num span { font-size: 1.1rem; color: var(--slate); letter-spacing: -0.002em; }

.page-hero {
  background: var(--navy); color: #fff; padding: 76px 0 60px; position: relative; overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; max-width: 760px; }
.page-hero .eyebrow { color: #ffb27a; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.9rem); }
.page-hero .lede { color: rgba(255,255,255,.68); font-size: 1.08rem; letter-spacing: -0.006em; max-width: 640px; margin-bottom: 8px; }
.page-hero .hero-ctas { margin-top: 30px; justify-content: flex-start; }
.breadcrumb { font-size: .8rem; color: rgba(255,255,255,.52); margin-bottom: 22px; font-family: var(--font-display); letter-spacing: -0.005em; }
.breadcrumb a { color: rgba(255,255,255,.78); }
.breadcrumb a:hover { color: var(--orange); }

/* ---------- Sections ---------- */
.kicker {
  color: var(--red); font-weight: 600; font-size: 1rem; letter-spacing: .04em;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); text-transform: none;
}
.kicker::before { content: ""; width: 16px; height: 2px; background: var(--red); display: inline-block; border-radius: 2px; }
.section-head { max-width: 700px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }
.section-head.center .kicker::before { display: none; }
.section-head h2 { margin-bottom: .4em; }
.section-head p { font-size: 1.1rem; letter-spacing: -0.006em; }

.bg-soft { background: var(--bg-soft); padding: 70px 0;}
.bg-navy { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy p { color: rgba(255,255,255,.68); }

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

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-ui) var(--ease-snappy), box-shadow var(--dur-ui) var(--ease-snappy), border-color var(--dur-ui) ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #c9c9ce; }
.card .icon { width: 44px; height: 44px; border-radius: 13px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 1.2rem; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: .94rem; margin-bottom: 14px; letter-spacing: -0.003em; }
.card .link { font-weight: 600; font-size: .85rem; color: var(--red); font-family: var(--font-display); display: inline-flex; align-items: center; gap: 4px; }
.card .link::after { content: "→"; transition: transform var(--dur-ui) var(--ease-snappy); }
.card .link:hover::after { transform: translateX(3px); }

.service-card { border-top: 2px solid var(--orange); }
.service-card.teal { border-top-color: var(--red); }
.service-card.navy { border-top-color: var(--ink); }

/* "How we work" process block (index.html) — a sticky photo on the left,
   the four steps running down a connected vertical line on the right, in
   the same sticky-left / scrolling-right pattern as .index-split-grid. */
.process-split { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 56px; align-items: start; }
.process-image {
  position: sticky; top: 96px; align-self: start; height: 460px; border-radius: var(--radius);
  background-size: cover; background-position: center; box-shadow: var(--shadow);
}
.process-steps-v { display: flex; flex-direction: column; }
.process-step-v { position: relative; display: flex; gap: 26px; padding-bottom: 48px; }
.process-step-v:last-child { padding-bottom: 0; }
.process-step-v:not(:last-child)::before {
  content: ""; position: absolute; left: 27px; top: 56px; bottom: -48px;
  border-left: 1.5px dashed var(--border);
}
.process-marker { position: relative; width: 56px; height: 56px; flex: none; }
.process-marker-circle {
  width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; position: relative; z-index: 2;
  transition: border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-snappy), box-shadow var(--dur-ui) ease;
}
.process-step-v:hover .process-marker-circle { border-color: var(--red); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.process-num {
  position: absolute; top: -6px; right: -6px; z-index: 3; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .68rem;
  display: flex; align-items: center; justify-content: center; letter-spacing: 0;
}
.process-step-v:hover .process-num { background: var(--red); }
.process-step-v-body { padding-top: 8px; }
.process-step-v-body h3 { margin-bottom: 8px; font-size: 1.15rem; }
.process-step-v-body p { font-size: .95rem; letter-spacing: -0.003em; margin: 0; }
@media (max-width: 991px) {
  .process-split { grid-template-columns: 1fr; gap: 32px; }
  .process-image { position: static; height: 260px; }
}

/* Editorial index list (used for the homepage service list) */
/* index.html — Services index block: sticky left title / scrolling right
   list. .index-split-grid puts the title in a fixed-width left column
   that sticks under the header while the visitor scrolls the six rows
   in the right column past it. */
.index-split-grid { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 56px; align-items: start; }
.index-split-left { position: sticky; top: 96px; align-self: start; }
.index-split-left .section-head { margin-bottom: 0; max-width: none; }
@media (max-width: 900px) {
  .index-split-grid { grid-template-columns: 1fr; gap: 28px; }
  .index-split-left { position: static; }
}
.index-list { border-top: 1px solid var(--border); }
.index-row {
  position: relative; z-index: 0; overflow: hidden;
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 24px;
  padding: 28px 20px; border-bottom: 1px solid var(--border); text-decoration: none;
  transition: padding-left var(--dur-ui) var(--ease-snappy), color var(--dur-ui) ease;
}
/* index.html — Services index block: per-row hover background image.
   Each <a class="index-row"> gets a real <span class="row-media"> as its
   first child, with the photo set directly via inline style (not a CSS
   var indirection) so it's a plain, inspectable element — different rows
   can point at different files. .row-media paints the photo; ::after
   lays a dark gradient over it for text contrast. Both fade/scale in on
   hover, and row text flips to white to stay readable on the photo. */
.index-row .row-media {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08);
  transition: opacity var(--dur-move) var(--ease-spring), transform var(--dur-move) var(--ease-spring);
}
.index-row::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11,11,12,.9) 40%, rgba(11,11,12,.5));
  opacity: 0; transition: opacity var(--dur-ui) ease;
}
.index-row:hover { padding-left: 28px; }
.index-row:hover .row-media, .index-row:hover::after { opacity: 1; transform: scale(1); }
.index-row:hover h3, .index-row:hover p { color: #fff; }
.index-row:hover .num { color: var(--orange); }
.index-row .num { font-family: var(--font-display); font-size: .92rem; color: var(--red); font-weight: 600; letter-spacing: -0.01em; transition: color var(--dur-ui) ease; }
.index-row h3 { margin: 0 0 5px; font-size: 1.3rem; transition: color var(--dur-ui) ease; }
.index-row p { margin: 0; font-size: .95rem; letter-spacing: -0.004em; transition: color var(--dur-ui) ease; }
.index-row .go {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--ink);
  transition: background var(--dur-ui) var(--ease-snappy), color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-snappy), border-color var(--dur-ui) ease;
  flex-shrink: 0;
}
.index-row:hover .go { background: var(--red); border-color: var(--red); color: #fff; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .index-row .row-media, .index-row::after { transition: none; transform: none; }
}

.pill-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { background: var(--bg-soft); border: 1px solid var(--border); padding: 8px 16px; border-radius: var(--radius-pill); font-size: .84rem; font-weight: 500; color: var(--ink); font-family: var(--font-display); }

.check-list li { position: relative; padding-left: 30px; margin-bottom: 14px; font-size: .97rem; color: var(--ink); letter-spacing: -0.003em; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: var(--red); font-weight: 700; background: rgba(218,19,18,.08); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .68rem; }

.num-list { counter-reset: step; }
.num-list li { position: relative; padding-left: 46px; margin-bottom: 22px; }
.num-list li::before {
  counter-increment: step; content: counter(step); position: absolute; left: 0; top: -3px;
  width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: #fff;
  font-weight: 600; font-size: .9rem; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
}
.num-list li b { display: block; color: var(--ink); margin-bottom: 3px; font-size: 1.03rem; font-family: var(--font-display); letter-spacing: -0.008em; }
.num-list li span { font-size: .93rem; color: var(--slate); }

/* Two-col feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.feature-panel { background: var(--bg-soft); border-radius: var(--radius-lg); padding: 42px; border: 1px solid var(--border); }

/* index.html — Growth section (progress rings + stat counter).
   .growth-media holds the photo with background-attachment:fixed — the
   classic CSS-only parallax trick (image stays pinned to the viewport
   while the section scrolls past it). Degrades gracefully wherever
   fixed backgrounds aren't supported (iOS Safari), and is disabled
   outright on small screens where they're prone to jank. .growth-wrap
   is the 5:7 split — left column holds three animated percentage rings
   (SVG circle, stroke-dashoffset driven by script.js on scroll-into-
   view), right column holds the heading/copy and one big count-up
   stat. Ring/counter numbers are placeholders until real figures are
   supplied — swap the data-target and data-percent values. */
.growth-sec { position: relative; overflow: hidden; padding: 400px 0 90px; color: #fff; }
.growth-media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-attachment: fixed;
}
/* Top band stays a clear, lightly-tinted photo; by ~40% down it's fully
   the site's navy so the content panel reads as solid, matching the
   reference's "photo banner into solid panel" look rather than one flat
   dark wash over the whole image. */
.growth-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,11,12,.18) 0%, rgba(11,11,12,.55) 26%, var(--navy) 42%, var(--navy) 100%);
}
.growth-overlay::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px);
  opacity: .5;
}
.growth-sec .container { position: relative; z-index: 2; }
.growth-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.growth-left p { color: rgba(255,255,255,.6); font-size: .85rem; margin-top: 24px; }
.progress-ring-row { display: flex; flex-wrap: wrap; gap: 28px 22px; }
.progress-ring { text-align: center; width: 120px; }
.progress-ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.progress-ring .ring-track { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 3; }
.progress-ring .ring-fill {
  fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 314; stroke-dashoffset: 314;
  transition: stroke-dashoffset 1.1s var(--ease-spring);
}
.progress-ring .ring-number {
  position: relative; top: -78px; display: block; font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 650; color: #fff;
}
.progress-ring h3 { margin: -18px 0 0; font-size: .82rem; font-weight: 600; color: #fff; line-height: 1.3; }
.growth-right .kicker {
  display: inline-flex; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  padding: 8px 16px; border-radius: 4px; font-size: .72rem; letter-spacing: .06em;
}
.growth-right .kicker::before { display: none; }
.growth-right h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 3rem); margin-top: 18px; }
.growth-right p { color: rgba(255,255,255,.68); }
.growth-stat {
  display: flex; align-items: baseline; gap: 18px; margin-top: 34px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.growth-counter { font-family: var(--font-display); font-size: 3.6rem; font-weight: 650; letter-spacing: -0.02em; color: #fff; margin: 0; }
.growth-stat p { margin: 0; max-width: 220px; font-size: .92rem; color: rgba(255,255,255,.68); }
@media (max-width: 900px) {
  .growth-sec { padding-top: 260px; }
  .growth-wrap { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .growth-media { background-attachment: scroll; }
  .growth-sec { padding: 80px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-ring .ring-fill { transition: none; }
}

/* index.html — "Why us" panel (inside .growth-sec's photo/navy panel).
   Bootstrap's grid (.row/.col-lg-7/.col-lg-5) handles the two-column
   layout and the checklist's own row-cols-sm-2 grid; these rules only
   add the visual treatment — a badge kicker, glass-card checklist items,
   and a frosted feature card — since the section sits on the dark
   parallax panel rather than the site's usual white background. */
.why-kicker {
  display: inline-flex; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  padding: 8px 16px; border-radius: 4px; font-size: .72rem; letter-spacing: .06em;
}
.why-kicker::before { display: none; }
.why-us-copy h2 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.5rem); margin-bottom: .5em; }
.why-us-copy > p { color: rgba(255,255,255,.68); font-size: 1.05rem; }
.why-check {
  height: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 16px 18px; color: rgba(255,255,255,.88); font-size: .92rem;
  letter-spacing: -0.003em; line-height: 1.4;
  transition: background var(--dur-ui) ease, border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-snappy);
}
.why-check:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); transform: translateY(-2px); }
.why-check-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(244,118,46,.18); color: var(--orange);
  display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700;
}
.why-feature-card {
  height: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.35);
}
.why-feature-card h3 { color: #fff; margin-bottom: .5em; }
.why-feature-card p { color: rgba(255,255,255,.68); }
.why-feature-badge {
  display: inline-flex; background: rgba(244,118,46,.16); color: #ffb27a; border: 1px solid rgba(244,118,46,.3);
  padding: 6px 14px; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 600; letter-spacing: .02em;
}
.why-feature-card .btn-outline { border-color: rgba(255,255,255,.3); color: #fff; margin-top: 18px; }
.why-feature-card .btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* index.html — Case studies ("Proof") section: an editorial row list
   instead of boxed cards — no background, no border, no box-shadow.
   Each .case-row is a 3-column grid (number / name+copy / result) with
   only a hairline divider between rows, an oversized ghost number, and
   a left accent bar that slides in on hover — the same "no block" list
   language as .index-row above, reused here for consistency. */
.case-list { border-top: 1px solid var(--border); }
.case-row {
  position: relative; display: grid; grid-template-columns: 72px 1.3fr 1fr; gap: 32px; align-items: start;
  padding: 40px 4px; border-bottom: 1px solid var(--border);
  transition: padding-left var(--dur-ui) var(--ease-snappy);
}
.case-row::before {
  content: ""; position: absolute; left: -4px; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--orange), var(--red));
  transform: scaleY(0); transform-origin: top; transition: transform var(--dur-move) var(--ease-spring);
}
.case-row:hover { padding-left: 20px; }
.case-row:hover::before { transform: scaleY(1); }
.case-num {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 650; letter-spacing: -0.02em;
  color: var(--border); line-height: 1;
}
.case-row-main .tag { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--red); background: rgba(218,19,18,.08); padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 12px; font-family: var(--font-display); }
.case-row-main h3 { font-size: 1.3rem; margin-bottom: 4px; }
.case-row-main p { margin: 0; }
.case-result {
  font-weight: 600; color: var(--ink); font-size: .95rem; font-family: var(--font-display);
  letter-spacing: -0.006em; line-height: 1.5;
}
.case-result::before { content: "Result — "; color: var(--red); }
@media (max-width: 720px) {
  .case-row { grid-template-columns: 40px 1fr; }
  .case-result { grid-column: 1 / -1; margin-left: 72px; }
  .case-num { font-size: 1.6rem; }
}

/* index.html — Case studies ("Proof") section, alternate style: a
   zigzag band list. Each .case-alt-row alternates background tint and
   text/quote order (nth-child(even) flips direction like .split.reverse
   does elsewhere) for rhythm, with a giant outlined "ghost" number
   behind the copy and the result styled as a proper pull-quote instead
   of a plain highlighted line. Swap the section's case-list markup for
   case-alt-list to use this version instead of the plain row list above. */
.case-alt-list { display: flex; flex-direction: column; }
.case-alt-row {
  position: relative; overflow: hidden; direction: ltr;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding: 56px 48px; border-radius: var(--radius-lg);
}
.case-alt-row:nth-child(odd) { background: var(--bg-soft); }
.case-alt-row:nth-child(even) { direction: rtl; }
.case-alt-row:nth-child(even) > * { direction: ltr; }
.case-alt-row + .case-alt-row { margin-top: 20px; }
.case-alt-ghost {
  position: absolute; top: 50%; right: 4%; transform: translateY(-50%); z-index: 0;
  font-family: var(--font-display); font-size: 11rem; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--border); pointer-events: none;
}
.case-alt-row:nth-child(even) .case-alt-ghost { right: auto; left: 4%; }
.case-alt-info { position: relative; z-index: 1; }
.case-alt-info .tag { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--red); background: rgba(218,19,18,.08); padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 14px; font-family: var(--font-display); }
.case-alt-info h3 { font-size: 1.8rem; margin-bottom: 8px; }
.case-alt-info p { margin: 0; }
.case-alt-result {
  position: relative; z-index: 1; margin: 0; padding-left: 22px; border-left: 3px solid var(--red);
  font-weight: 600; color: var(--ink); font-size: 1.08rem; font-family: var(--font-display);
  letter-spacing: -0.008em; line-height: 1.5; font-style: normal;
}
.case-alt-result::before { content: "Result — "; color: var(--red); }
@media (max-width: 860px) {
  .case-alt-row, .case-alt-row:nth-child(even) { grid-template-columns: 1fr; direction: ltr; gap: 24px; padding: 40px 28px; }
  .case-alt-ghost { font-size: 6rem; top: 24px; right: 5% !important; left: auto !important; transform: none; }
}

/* index.html — Case studies ("Proof") section, third style: a full-bleed
   horizontal scroll-snap carousel of colored cards — the "premium
   template" pattern (edge-to-edge track, prev/next buttons, snap-to-card
   scrolling) rather than a list. Cards cycle through the brand's own
   navy/red/orange tones (nth-child(4n+…)) instead of using photos. Same
   four case studies/content as the other two styles, just re-laid-out. */
.case-carousel-nav { display: flex; gap: 10px; }
.case-carousel-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: #fff;
  font-size: 1rem; cursor: pointer; color: var(--ink);
  transition: background var(--dur-ui) ease, color var(--dur-ui) ease, border-color var(--dur-ui) ease, transform var(--dur-press) ease-out;
}
.case-carousel-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.case-carousel-btn:active { transform: scale(0.94); }
.case-carousel-track-wrap {
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px 0 16px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.case-carousel-track-wrap::-webkit-scrollbar { display: none; }
.case-carousel-track { display: flex; gap: 24px; width: max-content; padding: 0 28px; }
.case-carousel-card {
  scroll-snap-align: start; flex: 0 0 360px; width: 360px; min-height: 380px;
  border-radius: var(--radius-lg); padding: 36px 32px; color: #fff; position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--dur-ui) var(--ease-snappy), box-shadow var(--dur-ui) var(--ease-snappy);
}
.case-carousel-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.case-carousel-card:nth-child(4n+1) { background: linear-gradient(145deg, var(--navy), var(--navy-2)); }
.case-carousel-card:nth-child(4n+2) { background: linear-gradient(145deg, var(--red), var(--red-dark)); }
.case-carousel-card:nth-child(4n+3) { background: linear-gradient(145deg, var(--orange), var(--orange-dark)); }
.case-carousel-card:nth-child(4n+4) { background: linear-gradient(145deg, var(--ink), #000); }
.case-carousel-quote { font-family: var(--font-display); font-size: 4rem; line-height: 1; opacity: .28; margin-bottom: -14px; }
.case-carousel-card .tag { align-self: flex-start; background: rgba(255,255,255,.16); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 14px; font-family: var(--font-display); }
.case-carousel-card h3 { color: #fff; font-size: 1.5rem; margin: 0 0 8px; }
.case-carousel-card p { color: rgba(255,255,255,.8); font-size: .92rem; margin: 0; }
.case-carousel-result { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); font-size: .86rem; font-weight: 600; color: #fff; line-height: 1.5; }
.case-carousel-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; font-size: .88rem; font-family: var(--font-display); }
.case-carousel-link .arrow { transition: transform var(--dur-ui) var(--ease-snappy); display: inline-block; }
.case-carousel-card:hover .arrow { transform: translateX(4px); }
@media (max-width: 520px) {
  .case-carousel-card { flex-basis: 82vw; width: 82vw; }
}

/* index.html — "How we work" section: horizontal step timeline.
   A shared hairline (.step-timeline::before) runs across the top; each
   .step-item hangs a dot + vertical connector down from that line onto
   an outlined step number, a small vertical "STEP" label, then the
   title/copy — replacing the plain 4-up icon card grid it had before. */
.step-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; padding-top: 72px; }
.step-timeline::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: var(--border); }
.step-item { position: relative; }
.step-item::before {
  content: ""; position: absolute; top: -66px; left: 5px; width: 1px; height: 60px; background: var(--border);
}
.step-dot {
  position: absolute; top: -70px; left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 4px rgba(218,19,18,.14);
}
.step-head { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 16px; }
.step-num {
  font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--border);
}
.step-label {
  writing-mode: vertical-rl; transform: rotate(180deg); margin-bottom: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red);
}
.step-item h3 { font-size: 1.14rem; margin-bottom: 6px; }
.step-item p { font-size: .92rem; margin: 0; }
@media (max-width: 860px) {
  .step-timeline { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
}
@media (max-width: 520px) {
  .step-timeline { grid-template-columns: 1fr; padding-top: 0; }
  .step-timeline::before { display: none; }
  .step-item::before, .step-dot { display: none; }
}

/* Testimonials */
.testimonial { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.testimonial p { font-style: normal; color: var(--ink); font-size: .98rem; letter-spacing: -0.004em; }
.testimonial .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonial .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .82rem; font-family: var(--font-display); }
.testimonial .who b { display: block; font-size: .88rem; color: var(--ink); font-family: var(--font-display); }
.testimonial .who span { font-size: .78rem; color: var(--slate); }

/* Testimonials carousel (index.html) — a scroll-snap track that shows all
   three cards side by side on desktop (no scrolling needed) and becomes a
   swipeable, arrow-driven slider once the cards no longer fit the viewport. */
.testimonial-carousel { max-width: 1120px; margin: 0 auto; }
.testimonial-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 4px 12px; margin: 0 -4px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-slide-item { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; min-width: 0; }
.testimonial-slide { position: relative; height: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 48px 32px 32px; text-align: center; }
.testimonial-quote-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 4rem; line-height: 1; color: var(--red);
  opacity: .12; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); pointer-events: none;
}
.testimonial-slide p { position: relative; font-size: 1rem; line-height: 1.55; letter-spacing: -0.006em; color: var(--ink); margin: 0 0 22px; }
.testimonial-slide .who { justify-content: center; margin-top: 0; }
.testimonial-slide .avatar { width: 42px; height: 42px; font-size: .85rem; background: var(--red); }
.testimonial-slide .who > div { text-align: left; }
.testimonial-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.testimonial-arrow {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; flex: none;
  transition: background var(--dur-ui) ease, border-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-snappy);
}
.testimonial-arrow:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }
@media (min-width: 992px) {
  .testimonial-controls {  }
}
@media (max-width: 991px) {
  .testimonial-slide-item { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 575px) {
  .testimonial-slide-item { flex: 0 0 88%; }
  .testimonial-slide { padding: 44px 24px 28px; }
}

/* Engagement model cards */
.model-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; position: relative; }
.model-card.featured { border: 1.5px solid var(--orange); }
.model-card .badge { position: absolute; top: -12px; left: 24px; background: var(--orange); color: #fff; font-size: .68rem; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill); letter-spacing: .02em; font-family: var(--font-display); }

/* CTA band: a dark glass card, same calm glow as the hero, always centered & pill CTAs */
.cta-band {
  background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 64px;
  text-align: center; position: relative; overflow: hidden;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin: 0 auto 10px; max-width: 560px; }
.cta-band p { color: rgba(255,255,255,.68); margin: 0 auto 30px; max-width: 460px; }
.cta-band .hero-ctas { margin: 0; }
/* .cta-side: same card, used as the left half of the FAQ/CTA split below —
   left-aligned copy, full column height, CTAs stacked to fill the width. */
.cta-band.cta-side { display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 48px 44px; }
.cta-band.cta-side h2 { margin: 0 0 12px; max-width: none; }
.cta-band.cta-side p { margin: 0 0 30px; max-width: none; }
.cta-band.cta-side .hero-ctas { flex-direction: column; align-items: stretch; margin: 0; }
.cta-band.cta-side .hero-ctas .btn { width: 100%; justify-content: center; }
@media (max-width: 991px) {
  .cta-band.cta-side { text-align: center; }
  .cta-band.cta-side h2, .cta-band.cta-side p { margin-left: auto; margin-right: auto; max-width: 480px; }
}

/* FAQ/CTA split (index.html): a dark CTA card on the left, a matching white
   panel holding the FAQ accordion on the right — equal-height Bootstrap
   columns so the two feel like one deliberate unit rather than two stacked
   sections. */
.faq-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px 44px; box-shadow: var(--shadow-sm); }
.faq-panel .section-head { margin-bottom: 28px; }
@media (max-width: 575px) {
  .cta-band.cta-side, .faq-panel { padding: 36px 24px; }
}

/* FAQ — Bootstrap accordion, restyled: flat rows, numbered markers, a
   red plus/minus toggle instead of Bootstrap's default chevron. */
.faq-accordion { max-width: none; margin: 0; }
.faq-accordion .accordion-item { background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0 !important; }
.faq-accordion .accordion-item:first-of-type, .faq-accordion .accordion-item:last-of-type { border-radius: 0; }
.faq-accordion .accordion-header { display: block; }
.faq-accordion .accordion-button {
  background: transparent; color: var(--ink); font-weight: 600; font-size: 1.02rem; font-family: var(--font-display);
  letter-spacing: -0.008em; padding: 22px 4px; box-shadow: none; gap: 16px;
}
.faq-accordion .accordion-button::after { display: none; }
.faq-accordion .accordion-button:not(.collapsed) { background: transparent; color: var(--ink); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: none; }
.faq-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft); color: var(--red);
  font-size: .78rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-ui) ease, color var(--dur-ui) ease;
}
.faq-accordion .accordion-button:not(.collapsed) .faq-num { background: var(--red); color: #fff; }
.faq-toggle-icon { flex: none; margin-left: auto; font-size: 1.3rem; font-weight: 400; color: var(--red); line-height: 1; transition: transform var(--dur-ui) var(--ease-spring); }
.faq-accordion .accordion-button:not(.collapsed) .faq-toggle-icon { transform: rotate(45deg); }
.faq-accordion .accordion-body { padding: 0 4px 24px 46px; font-size: .96rem; letter-spacing: -0.004em; color: var(--ink); }
.faq-accordion .accordion-body p { margin: 0; }

/* Industries */
/* index.html — Industries section: icon tiles with a numbered corner mark
   and a gradient underline that slides in on hover, replacing the plain
   flat bordered cards for a more modern feel. */
.industry-tile {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 8px;
  transition: transform var(--dur-ui) var(--ease-snappy), box-shadow var(--dur-ui) var(--ease-snappy), border-color var(--dur-ui) ease;
}
.industry-tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--red));
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-move) var(--ease-spring);
}
.industry-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.industry-tile:hover::after { transform: scaleX(1); }
.industry-tile .tag { font-size: 1.5rem; }
.industry-num {
  position: absolute;
    top: -42px;
    right: 20px;
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f6f6f7;
}
.industry-icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 6px;
  background: linear-gradient(135deg, rgba(244,118,46,.14), rgba(218,19,18,.14));
}
.industry-tile h3 { font-size: 1.1rem; margin-bottom: 2px; }

/* Footer */
footer.site-footer { background: var(--bg-navy-soft); color: rgba(255,255,255,.6); padding-top: 80px; position: relative; overflow: hidden; }
/* A quiet brand-color glow behind the top of the footer, echoing the hero's
   .glow treatment so the page ends on the same visual language it opened with. */
footer.site-footer::before {
  content: ""; position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 640px; height: 360px; max-width: 90vw; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(218,19,18,.16), transparent 72%); filter: blur(30px);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 54px; border-bottom: 1px solid rgba(255,255,255,.12); position: relative; z-index: 1; }
.footer-grid > div { position: relative; }
.footer-grid > div:not(:first-child)::before {
  content: ""; position: absolute; top: 2px; bottom: 12px; left: -16px; width: 1px; background: rgba(255,255,255,.09);
}
/* .footer-cols: the same footer columns laid out on Bootstrap's row/col grid
   instead of the fixed CSS grid above, so it inherits Bootstrap's real
   breakpoint stacking (col-12/col-6/col-lg-*) rather than a hand-rolled one. */
.footer-cols { padding-bottom: 54px; border-bottom: 1px solid rgba(255,255,255,.12); position: relative; z-index: 1; }
@media (min-width: 992px) {
  .footer-col-divider { border-left: 1px solid rgba(255,255,255,.09); }
}
footer .logo { color: #fff; }
.logo-chip { display: inline-flex; align-items: center; background: #fff; padding: 8px 12px; border-radius: 10px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }
.logo-chip img { height: 20px; }
footer .foot-desc { font-size: .88rem; color: rgba(255,255,255,.44); max-width: 260px; margin-top: 14px; line-height: 1.6; letter-spacing: -0.004em; }
footer h4 { position: relative; color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 12px; font-family: var(--font-display); }
footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--orange), var(--red)); }
footer ul li { margin-bottom: 11px; }
footer a { font-size: .87rem; color: rgba(255,255,255,.5); transition: color var(--dur-ui) ease; }
footer a:hover { color: var(--orange); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; font-size: .79rem; color: rgba(255,255,255,.34); flex-wrap: wrap; gap: 16px; position: relative; z-index: 1; }
.footer-bottom-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; font-size: .85rem; color: rgba(255,255,255,.75);
  transition: background var(--dur-ui) ease, border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-snappy), color var(--dur-ui) ease;
}
.social-row a:hover { background: linear-gradient(135deg, var(--orange), var(--red)); border-color: transparent; color: #fff; transform: translateY(-3px); }
.social-row a:active { transform: scale(0.9); }
.back-to-top {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: transparent;
  color: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; font-size: .95rem; flex: none;
  transition: background var(--dur-ui) ease, border-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-snappy);
}
.back-to-top:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); }
@media (max-width: 767px) {
  .footer-grid > div::before { display: none; }
}

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row.full { grid-template-columns: 1fr; }
label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; font-family: var(--font-display); letter-spacing: -0.003em; }
input, select, textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border);
  font-family: var(--font-body); font-size: .92rem; background: var(--bg-soft); color: var(--ink);
  transition: border-color var(--dur-ui) ease, background var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); background: #fff; box-shadow: 0 0 0 4px rgba(218,19,18,.1); }
.contact-info-card { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 36px; margin-bottom: 20px; position: relative; overflow: hidden; }
.contact-info-card h3 { color: #fff; position: relative; z-index: 1; }
.contact-info-card p, .contact-info-card a { color: rgba(255,255,255,.72); position: relative; z-index: 1; }
.contact-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; position: relative; z-index: 1; }
.contact-row .ic { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Extras: proof / result bands / tech groups / stats */
.proof-band { background: var(--navy); border-radius: var(--radius-lg); padding: 44px 48px; position: relative; overflow: hidden; }
.proof-band p { color: #fff; font-size: 1.28rem; margin: 0; line-height: 1.5; letter-spacing: -0.012em; position: relative; z-index: 1; font-family: var(--font-display); font-weight: 500; }
.result-band { background: var(--ink); border-radius: var(--radius); padding: 30px 36px; }
.result-band p { color: #fff; font-size: 1.05rem; font-weight: 600; margin: 0; line-height: 1.6; font-family: var(--font-display); letter-spacing: -0.008em; }
.tech-group-head { font-size: 1.05rem; color: var(--ink); font-weight: 600; margin: 36px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--border); font-family: var(--font-display); letter-spacing: -0.01em; }
.tech-group-head:first-child { margin-top: 0; }
.mega-links { columns: 2; column-gap: 24px; }
.mega-links li { break-inside: avoid; margin-bottom: 8px; }
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stats-strip .stat b { display: block; font-size: 2.1rem; color: var(--ink); font-weight: 650; font-family: var(--font-display); letter-spacing: -0.02em; }
.stats-strip .stat span { font-size: .85rem; color: var(--slate); }

/* Utilities */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.muted { color: var(--slate); }
.fade-in { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-move) var(--ease-spring), transform var(--dur-move) var(--ease-spring); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ---------- Accessibility: reduced motion / transparency / contrast are real states ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .fade-in { transform: none; transition: opacity 200ms ease; }
  .card:hover, .industry-tile:hover { transform: none; }
  .btn:active { transform: none; }
  .index-row:hover { padding-left: 4px; }
  .index-row:hover .go { transform: none; }
  .faq-item .faq-body { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  header.site-header, header.site-header.scrolled { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--border); }
  .trust-strip .container { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .btn-ghost { background: rgba(255,255,255,.92); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .card, .testimonial, .case-card, .model-card, .industry-tile, .form-card { border-width: 1.5px; border-color: var(--ink); }
  header.site-header { background: #fff; border-bottom-color: var(--ink); }
}

/* Responsive */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .trust-strip .container { justify-content: flex-start; gap: 22px 0; }
}
@media (max-width: 720px) {
  /* Mobile nav is a drawer anchored to the left edge, not a sheet dropping
     from the top — it slides in on translateX so it always tracks in from
     the same side the reader would expect a "menu" panel to live. */
  nav.primary-nav {
    position: fixed; top: 0; left: 0; bottom: 0; right: auto; z-index: 99;
    width: min(86vw, 340px); height: 100vh;
    background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 84px 22px 30px; transform: translateX(-100%); opacity: 1;
    transition: transform var(--dur-move) var(--ease-spring);
    max-height: 100vh; overflow-y: auto; border-bottom: none; border-right: 1px solid var(--border);
    box-shadow: 24px 0 60px -24px rgba(0,0,0,.35);
  }
  nav.primary-nav.open { transform: translateX(0); }
  nav.primary-nav > ul { flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; }
  nav.primary-nav a.nav-link { font-size: 1.15rem; padding: 13px 4px; width: 100%; }
  nav.primary-nav a.nav-link::after { display: none; }
  .menu-toggle { display: block; }

  /* An explicit close button inside the drawer itself, so it's obvious how
     to dismiss it even though the header's own toggle also morphs into an X. */
  .nav-close {
    display: flex; position: absolute; top: 20px; right: 20px; width: 36px; height: 36px;
    align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border);
    background: #fff; color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-close:hover { background: var(--bg-soft); }

  /* Dims the page behind the open drawer and gives touch users a large
     tap target to close it without hunting for the close button. */
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 98; background: rgba(10,14,20,.45);
    opacity: 0; visibility: hidden; transition: opacity var(--dur-ui) ease, visibility 0s linear var(--dur-ui);
  }
  .nav-backdrop.visible { opacity: 1; visibility: visible; transition: opacity var(--dur-ui) ease; }

  /* Mega menu becomes an inline accordion inside the sheet: no hover on
     touch, so a chevron button expands it and content stays in-flow
     (height-animated, same technique as the FAQ) rather than floating. */
  nav.primary-nav .nav-item { flex-wrap: wrap; }
  nav.primary-nav .nav-item.has-mega { border-bottom: 1px solid var(--border); }
  nav.primary-nav .nav-item.has-mega .nav-link { width: auto; flex: 1; }
  .mega-toggle {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
  }
  .mega-toggle .chev {
    width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
    transform: rotate(45deg); transition: transform var(--dur-ui) var(--ease-spring); margin-top: -3px;
  }
  .mega-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: 3px; }
  .mega-panel {
    position: static; flex-basis: 100%; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; border-radius: 0;
    padding: 0; width: auto; display: block;
    max-height: 0; overflow: hidden; transition: max-height var(--dur-move) var(--ease-spring);
  }
  .nav-item.mega-open .mega-panel { max-height: 900px; padding-bottom: 18px; }
  .mega-grid, .mega-grid-3, .mega-grid-5 { display: block; }
  .mega-col { margin-bottom: 16px; }
  .mega-col ul { columns: 1 !important; }
  .mega-col ul li a { padding: 9px 4px; margin: 0; font-size: .96rem; }
  .mega-side { display: none; }
  .nav-phone { display: none; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  section { padding: 68px 0; }
  .hero { padding: 80px 0 56px; }
  .trust-strip .container { flex-direction: column; align-items: flex-start; border-radius: var(--radius); padding: 22px 24px; }
  .trust-num { padding: 8px 0; flex-direction: row; align-items: baseline; gap: 8px; }
  .cta-band { padding: 40px 28px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .index-row { grid-template-columns: 32px 1fr; }
  .index-row .go { display: none; }
  .glow .g1, .glow .g2 { filter: blur(50px); opacity: .35; }
}



/* =========================================================
   RECRUITMENT PROCESS SECTION
   Unique classes: env-recruit-*
========================================================= */

.env-recruit-process-section {
    position: relative;
    overflow: hidden;
    padding: 0 0 50px;
    background-color: #fafafa;

    /* Soft geometric background */
    background-image:
        linear-gradient(45deg, rgba(225, 228, 230, 0.28) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(225, 228, 230, 0.22) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(225, 228, 230, 0.22) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(225, 228, 230, 0.18) 75%);
    background-size: 280px 280px;
    background-position:
        0 0,
        0 140px,
        140px -140px,
        -140px 0;
}


/* Main container */
.env-recruit-container {
    position: relative;
    z-index: 2;
    max-width: 1840px;
    margin: 0 auto;
    padding-left: 35px;
    padding-right: 35px;
}


/* =========================================================
   TOP LABEL
========================================================= */

.env-recruit-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 20px;

    border: 1px solid #d9dfe2;
    border-radius: 50px;

    background: rgba(255, 255, 255, 0.75);

    color: #071e26;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;

    margin-bottom: 18px;
}


/* =========================================================
   TITLE
========================================================= */

.env-recruit-title {
    margin: 0;

    color: #001b25;

    font-size: clamp(34px, 3.1vw, 52px);
    line-height: 1.15;

    font-weight: 700;
    letter-spacing: -1.2px;
}


/* =========================================================
   CARDS ROW
========================================================= */

.env-recruit-cards-row {
    margin-top: 48px;
}


/* =========================================================
   CARD
========================================================= */

.env-recruit-card {
    position: relative;

    height: 377px;

    padding: 40px 40px 30px;

    background: #ffffff;

    border-radius: 10px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

    /* Angled top-right / bottom-right shape */
    clip-path: polygon(
        0 0,
        75% 0,
        100% 25%,
        100% 100%,
        0 100%
    );
}


/* Card hover */

.env-recruit-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 50px rgba(0, 27, 37, 0.10);
}


/* =========================================================
   ICON
========================================================= */

.env-recruit-icon {
    width: 80px;
    height: 80px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #001f27;

    color: #ffffff;

    font-size: 27px;

    flex-shrink: 0;

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


.env-recruit-card:hover .env-recruit-icon {
    transform: scale(1.08) rotate(-4deg);

    background: #006b82;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.env-recruit-card-content {
    text-align: center;

    margin-top: 28px;
}


.env-recruit-card-content h3 {
    margin: 0;

    color: #06222a;

    font-size: 25px;
    line-height: 1.25;

    font-weight: 700;
}


.env-recruit-card-content p {
    max-width: 330px;

    margin: 20px auto 0;

    color: #63717d;

    font-size: 16px;
    line-height: 1.65;

    font-weight: 400;
}


/* =========================================================
   CARD BOTTOM
========================================================= */

.env-recruit-card-bottom {
    margin-top: auto;

    display: flex;
    align-items: center;

    gap: 14px;
}


.env-recruit-number {
    flex-shrink: 0;

    color: #60707a;

    font-size: 15px;
    font-weight: 400;
}


/* Horizontal line */

.env-recruit-line {
    height: 1px;

    flex: 1;

    background: #d5dce0;
}


/* =========================================================
   ARROW BUTTON
========================================================= */

.env-recruit-arrow {
    width: 56px;
    height: 27px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50px;

    background: #dfe5e8;

    color: #001f27;

    text-decoration: none;

    font-size: 13px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.env-recruit-arrow:hover {
    background: #001f27;

    color: #ffffff;

    transform: translateX(4px);
}


/* =========================================================
   BOTTOM TEXT
========================================================= */

.env-recruit-bottom-text {
    margin-top: 65px;

    color: #537082;

    font-size: 17px;
    line-height: 1.5;
}


.env-recruit-bottom-text a {
    color: #006b82;

    text-decoration: none;

    font-weight: 600;

    margin-left: 3px;
}


.env-recruit-bottom-text a i {
    margin-left: 4px;

    transition: transform 0.3s ease;
}


.env-recruit-bottom-text a:hover i {
    transform: translateX(5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {

    .env-recruit-process-section {
        padding: 65px 0 45px;
    }

    .env-recruit-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .env-recruit-cards-row {
        margin-top: 40px;
    }

    .env-recruit-card {
        height: 360px;
        padding: 35px 28px 27px;
    }

    .env-recruit-icon {
        width: 75px;
        height: 75px;
    }

    .env-recruit-card-content h3 {
        font-size: 22px;
    }

    .env-recruit-card-content p {
        font-size: 15px;
    }
}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 991.98px) {

    .env-recruit-title {
        font-size: 40px;
    }

    .env-recruit-card {
        height: 350px;
    }

    .env-recruit-card-content {
        margin-top: 22px;
    }

    .env-recruit-card-content h3 {
        font-size: 21px;
    }

    .env-recruit-card-content p {
        margin-top: 15px;
    }

    .env-recruit-bottom-text {
        margin-top: 50px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .env-recruit-process-section {
        padding: 55px 0 40px;
    }

    .env-recruit-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .env-recruit-label {
        font-size: 11px;
        padding: 9px 17px;
        margin-bottom: 15px;
    }

    .env-recruit-title {
        font-size: 34px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .env-recruit-cards-row {
        margin-top: 35px;
    }

    .env-recruit-card {
        height: auto;
        min-height: 360px;

        padding: 35px 25px 28px;

        /* Less aggressive angle on mobile */
        clip-path: polygon(
            0 0,
            82% 0,
            100% 12%,
            100% 100%,
            0 100%
        );
    }

    .env-recruit-icon {
        width: 72px;
        height: 72px;
        font-size: 24px;
    }

    .env-recruit-card-content h3 {
        font-size: 22px;
    }

    .env-recruit-card-content p {
        max-width: 400px;
        font-size: 15px;
    }

    .env-recruit-card-bottom {
        margin-top: 45px;
    }

    .env-recruit-bottom-text {
        margin-top: 40px;
        font-size: 15px;
        padding: 0 10px;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .env-recruit-process-section {
        padding-top: 45px;
    }

    .env-recruit-title {
        font-size: 30px;
    }

    .env-recruit-cards-row {
        margin-top: 30px;
    }

    .env-recruit-card {
        min-height: 340px;

        padding: 30px 22px 25px;
    }

    .env-recruit-icon {
        width: 68px;
        height: 68px;

        font-size: 22px;
    }

    .env-recruit-card-content {
        margin-top: 20px;
    }

    .env-recruit-card-content h3 {
        font-size: 20px;
    }

    .env-recruit-card-content p {
        font-size: 14px;
        line-height: 1.6;
    }

    .env-recruit-number {
        font-size: 14px;
    }

    .env-recruit-arrow {
        width: 52px;
    }
}


/* =========================================================
   ENV HISTORY / SERVICES SECTION
   All classes are unique: env-history-*
========================================================= */

.env-history-section {
    position: relative;
    width: 100%;
    padding: 70px 0 80px;
    background: #eef3f6;
    overflow: hidden;
}


/* Main row */

.env-history-row {
    position: relative;
}


/* =========================================================
   COMMON CARD
========================================================= */

.env-history-card {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 6px;

    box-shadow:
        0 15px 40px rgba(12, 35, 50, 0.10);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.env-history-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 50px rgba(12, 35, 50, 0.16);
}


/* =========================================================
   FIRST CARD
========================================================= */

.env-history-card-first {
    min-height: 400px;
    padding: 25px 0px 0;
    z-index: 5;
}


/* First card is lifted */

.env-history-card-first {
    transform: translateY(-38px);
}


.env-history-card-first:hover {
    transform: translateY(-44px);
}


/* =========================================================
   TOP CONTENT
========================================================= */

.env-history-top {
    position: relative;
    z-index: 3;
    text-align: center;
}


.env-history-label {
    display: block;

    margin-bottom: 7px;

    color: #ff493b;

    font-size: 14px;
    line-height: 1.2;

    font-weight: 700;

    text-transform: uppercase;
}


.env-history-title {
    margin: 0;

    color: #002b63;

    font-size: 22px;
    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   IMAGE
========================================================= */

.env-history-image-wrap {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 5px;
}


.env-history-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.env-history-card:hover .env-history-image {
    transform: scale(1.05);
}


/* =========================================================
   FIRST CARD IMAGE
========================================================= */

.env-history-first-image {
    position: relative;

    height: 296px;

    margin-top: 26px;

    /*
       Image extends outside the card
       to create the overlapping design.
    */
    margin-bottom: -34px;

    z-index: 4;
}


.env-history-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(24, 8, 42, 0.88),
            rgba(35, 16, 52, 0.72)
        );

    z-index: 1;
}


/* =========================================================
   FIRST CARD IMAGE TEXT
========================================================= */

.env-history-overlay-content {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 25px 35px;

    text-align: center;

    z-index: 2;
}


.env-history-overlay-content p {
    margin: 0;

    color: #ffffff;

    font-size: 17px;

    line-height: 1.65;

    font-weight: 500;
}


/* =========================================================
   ROUND ARROW
========================================================= */

.env-history-round-arrow {
    position: absolute;

    right: 135px;
    bottom: -30px;

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ff493b;

    color: #ffffff;

    text-decoration: none;

    font-size: 20px;

    z-index: 5;

    box-shadow:
        0 8px 20px rgba(255, 73, 59, 0.20);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.env-history-round-arrow:hover {
    background: #e93629;

    color: #ffffff;

    transform: translateX(5px);
}


/* =========================================================
   NORMAL CARDS
========================================================= */

.env-history-card-normal {
    min-height: 252px;

    padding: 0 20px 25px;

    margin-top: 0;
}


/* =========================================================
   NORMAL CARD IMAGE
========================================================= */

.env-history-card-normal .env-history-image-wrap {
    height: 188px;

    border-radius: 5px;
}


/* =========================================================
   RED CORNER ICON
========================================================= */

.env-history-corner {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 75px;
    height: 75px;

    background: #ff493b;

    /*
       Diagonal corner
    */
    clip-path: polygon(
        35% 0,
        100% 65%,
        100% 100%,
        0 100%,
        0 65%
    );

    display: flex;

    align-items: flex-end;
    justify-content: flex-end;

    padding: 13px;

    color: #ffffff;

    font-size: 25px;
}


/* =========================================================
   NORMAL CARD CONTENT
========================================================= */

.env-history-normal-content {
    text-align: center;

    padding-top: 25px;
}


.env-history-normal-content .env-history-label {
    margin-bottom: 7px;
}


.env-history-normal-content .env-history-title {
    font-size: 22px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .env-history-section {
        padding-top: 88px;
        padding-bottom: 95px;
    }

    .env-history-card-first {
        transform: translateY(-38px);
    }

    .env-history-card-first:hover {
        transform: translateY(-45px);
    }

    .env-history-round-arrow {
        right: 135px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .env-history-section {
        padding: 60px 0 70px;
    }

    .env-history-card-first {
        padding-left: 18px;
        padding-right: 18px;
    }

    .env-history-card-normal {
        padding-left: 18px;
        padding-right: 18px;
    }

    .env-history-first-image {
        height: 180px;
    }

    .env-history-card-normal .env-history-image-wrap {
        height: 180px;
    }

    .env-history-title {
        font-size: 20px;
    }

    .env-history-overlay-content {
        padding: 20px 25px;
    }

    .env-history-overlay-content p {
        font-size: 15px;
    }

    .env-history-round-arrow {
        right: 120px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .env-history-section {
        padding: 55px 0 70px;
    }

    /*
       Keep first card slightly higher
    */
    .env-history-card-first {
        transform: translateY(-25px);
    }

    .env-history-card-first:hover {
        transform: translateY(-30px);
    }

    .env-history-first-image {
        height: 190px;
    }

    .env-history-card-normal .env-history-image-wrap {
        height: 190px;
    }

    .env-history-round-arrow {
        right: 90px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .env-history-section {
        padding: 50px 0 60px;
    }


    /*
       On mobile the cards are stacked.
       Keep the first card lifted slightly.
    */

    .env-history-card-first {
        transform: translateY(-15px);

        margin-bottom: 20px;
    }

    .env-history-card-first:hover {
        transform: translateY(-20px);
    }


    .env-history-card-normal {
        margin-top: 0;
    }


    .env-history-first-image {
        height: 210px;
    }


    .env-history-card-normal .env-history-image-wrap {
        height: 210px;
    }


    .env-history-overlay-content {
        padding: 25px 30px;
    }


    .env-history-overlay-content p {
        font-size: 16px;
    }


    .env-history-round-arrow {
        right: 50%;
        transform: translateX(50%);

        bottom: -30px;
    }


    .env-history-round-arrow:hover {
        transform:
            translateX(calc(50% + 5px));
    }


    .env-history-title {
        font-size: 22px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .env-history-section {
        padding: 40px 0 50px;
    }


    .env-history-card-first {
        padding: 22px 15px 0;

        transform: translateY(-10px);
    }


    .env-history-card-first:hover {
        transform: translateY(-15px);
    }


    .env-history-card-normal {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 22px;
    }


    .env-history-first-image {
        height: 190px;

        margin-top: 22px;
    }


    .env-history-card-normal .env-history-image-wrap {
        height: 190px;
    }


    .env-history-overlay-content {
        padding: 20px 22px;
    }


    .env-history-overlay-content p {
        font-size: 14px;
        line-height: 1.55;
    }


    .env-history-label {
        font-size: 12px;
    }


    .env-history-title,
    .env-history-normal-content .env-history-title {
        font-size: 20px;
    }


    .env-history-corner {
        width: 68px;
        height: 68px;

        font-size: 21px;

        padding: 11px;
    }


    .env-history-round-arrow {
        width: 58px;
        height: 58px;

        font-size: 18px;
    }
}


/* =========================================================
   HOVER OVERLAY
========================================================= */

.env-history-hover-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    background: rgba(24, 8, 42, 0.88);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease,
        transform 0.4s ease;

    z-index: 3;
}


/* Body content */

.env-history-hover-body {
    width: 100%;

    text-align: center;

    transform: translateY(20px);

    transition:
        transform 0.45s ease;
}


.env-history-hover-body p {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    line-height: 1.65;

    font-weight: 500;
}


/* =========================================================
   MOUSE HOVER
========================================================= */

.env-history-card:hover .env-history-hover-overlay {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


.env-history-card:hover .env-history-hover-body {
    transform: translateY(0);
}



@media (min-width: 1300px) and (max-width: 1500px) {

h1 {font-size: clamp(2.5rem, 3vw, 4.5rem);}
.hero-watermark { bottom: -1%; font-size: clamp(4rem, 14vw, 6rem);}
.logo { width: 170px;}
nav.primary-nav a.nav-link { font-size: 14px;}

}  


@media (min-width: 1024px) and (max-width: 1300px) {

h1 {font-size: clamp(2.5rem, 3vw, 4.5rem);}
.hero-watermark { bottom: -1%; font-size: clamp(4rem, 14vw, 6rem);}
.logo { width: 170px;}
nav.primary-nav a.nav-link { font-size: 14px; padding: 9px 12px;}


}