/* ---------- Brand display face: Gotham Rounded ----------
   Licensed commercial font (Hoefler & Co). Supply your own webfont files in
   assets/fonts/ (see assets/fonts/README.txt). Until then, the display stack
   falls back to Nunito, a rounded geometric sans loaded from Google Fonts. */
@font-face {
  font-family: 'Gotham Rounded';
  src: url('../fonts/GothamRounded-Bold.woff2') format('woff2'),
       url('../fonts/GothamRounded-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham Rounded';
  src: url('../fonts/GothamRounded-Medium.woff2') format('woff2'),
       url('../fonts/GothamRounded-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham Rounded';
  src: url('../fonts/GothamRounded-Book.woff2') format('woff2'),
       url('../fonts/GothamRounded-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design Tokens — Pearl Silver & Obsidian Light Theme ---------- */
:root {
  /* 1. Surfaces & Canvas */
  --canvas-bg: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 50%, #F8FAFC 100%);
  --canvas-bg-solid: #F8FAFC;
  --surface-card: #FFFFFF;
  --surface-alt: #F1F5F9;
  --surface-soft: #F8FAFC;
  --surface-muted: #E2E8F0;
  --surface-dark: #0F172A;

  /* 2. Typography & Contrast */
  --headline-text: #0F172A;
  --body-text: #334155;
  --muted-text: #64748B;
  --text-tertiary: #475569;
  --text-inverse: #FFFFFF;

  /* 3. Borders & Separators */
  --border-light: #E2E8F0;
  --border-medium: #CBD5E1;
  --border-strong: #94A3B8;
  --subtle-border: #E2E8F0;
  --line-strong: #CBD5E1;

  /* 4. Brand & Accents */
  --brand-primary: #0F172A;
  --brand-primary-dark: #020617;
  --brand-accent: #334155;
  --primary-fill: #0F172A;
  --accent-cyan: #0F172A;
  --accent-strong: #0F172A;
  --accent-indigo: #0F172A;
  --accent-emerald: #0F172A;

  /* 5. Buttons & Gradients */
  --btn-primary-bg: #0F172A;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #1E293B;
  --grad-black-to-gray: linear-gradient(135deg, #0F172A 0%, #334155 100%);
  --grad-text-dark: linear-gradient(135deg, #0F172A 0%, #475569 100%);
  --color-site-gradient: linear-gradient(180deg, #A4ACB2 0%, #CBD3D8 50%, #EFF2F5 100%);
  --color-aurora-gradient: linear-gradient(135deg, #0F172A 0%, #334155 100%);

  /* 6. Shadows */
  --shadow-subtle: 0 4px 20px rgba(15, 23, 42, 0.04);
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 12px 36px rgba(15, 23, 42, 0.08);

  --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --container: 1240px;
}

*, *::before, *::after {
  box-sizing: border-box;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent !important;
}

a, button, input, select, textarea, [role="button"] {
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent !important;
}

html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--font-body);
  background: #F8FAFC !important;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 50%, #F8FAFC 100%) !important;
  min-height: 100vh;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--font-body) !important;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 50%, #F8FAFC 100%) fixed !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  font-size: var(--fs-body);
  overflow-x: hidden;
}

.light-rays-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
  display: block;
}

main {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--font-body);
}

section {
  position: relative;
  z-index: 1;
}

/* Typographic hierarchy — modern sans-serif display */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  color: var(--headline-text);
  text-transform: none;
  font-synthesis: none;
}
h1, h2 {
  line-height: 1.1;
  margin: 0 0 0.4em;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h3 {
  line-height: 1.28;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.005em;
}
h4 {
  font-family: var(--font-body);
  line-height: 1.25;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--headline-text);
  text-transform: none;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; color: var(--body-text); font-size: var(--fs-body); }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--primary-fill); color: #0a0b0c;
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 1000; font-weight: 700;
}
.skip-link:focus { left: 0; }

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

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-blue);
  margin: 0 0 1em;
}
.eyebrow::before {
  content: ''; width: 18px; height: 2px; flex-shrink: 0;
  background: var(--accent-blue);
  border-radius: 2px;
}
.section-head .eyebrow, .page-hero .eyebrow { justify-content: center; }

.text-gradient {
  color: #0f172a;
}

/* ---------- Motion ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1.0);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }

.btn-primary {
  background: #16181c;
  color: #ffffff !important;
  border: 1px solid #16181c;
  box-shadow: 0 4px 14px rgba(22, 24, 28, 0.20);
}
.btn-primary:hover {
  background: #2b2f36;
  border-color: #2b2f36;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(22, 24, 28, 0.30);
}

.btn-ghost {
  background: #ffffff;
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.btn-ghost:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #ffffff;
}

.btn-outline {
  background: transparent;
  color: var(--brand-primary);
  border: 1px solid var(--line-strong);
}
.btn-outline:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

.btn-light {
  background: #ffffff;
  color: var(--brand-primary);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.btn-light:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #ffffff;
}

.btn-sm { padding: 9px 16px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* ---------- Top Announcement Banner ---------- */
.top-banner {
  background: rgba(0, 35, 33, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0;
  position: relative;
  z-index: 501;
  color: #bbc7c6;
}
.top-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.top-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.top-banner-badge {
  background: rgba(203, 255, 252, 0.15);
  color: #cbfffc;
  border: 1px solid rgba(203, 255, 252, 0.3);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.top-banner-text {
  margin: 0;
  font-size: 0.82rem;
  color: #bbc7c6;
  font-weight: 500;
}
.top-banner-text strong {
  color: #ffffff;
}
.top-banner-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: #cbfffc;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.top-banner-link:hover {
  color: #fde9ff;
  text-decoration: underline;
}
.top-banner-close {
  background: transparent;
  border: none;
  color: #bbc7c6;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s ease;
  flex-shrink: 0;
}
.top-banner-close:hover {
  color: #ffffff;
}

/* ---------- Header Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: all 0.3s ease;
}


/* Enquiry Form Focus State */
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
  border-color: #0F172A !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1) !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
}
.site-header .container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: 76px;
}

.brand-logo {
  height: 40px;
  width: auto;
  max-width: 220px;
  display: block;
  object-fit: contain;
}
.footer-logo {
  height: 72px;
  width: auto;
  max-width: 320px;
  margin-bottom: 20px;
}

.site-header .brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #ffffff;
}
.site-header .brand-mark em {
  font-style: normal;
  font-weight: 600;
  color: #bbc7c6;
  font-size: 0.85em;
  margin-left: 3px;
  text-transform: lowercase;
}

.main-nav ul { display: flex; gap: 4px; flex-wrap: nowrap; }
.main-nav > ul > li > a {
  position: relative;
  display: flex; align-items: center; padding: 8px 14px; border-radius: 8px;
  font-weight: 600; font-size: 0.92rem; color: #0F172A !important;
  text-transform: none; letter-spacing: 0;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.main-nav > ul > li > a:hover, .main-nav > ul > li > a.active { color: #0F172A !important; background: rgba(255, 255, 255, 0.45) !important; }

.site-header .header-actions .btn-primary {
  background: linear-gradient(90deg, #fad1ff 0%, #fffdfa 35%, #edfffe 65%, #cbfffc 100%);
  color: #012624 !important;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  padding: 10px 22px;
}
.site-header .header-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(203, 255, 252, 0.3);
}

.site-header .nav-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.site-header .nav-toggle span {
  background: #ffffff;
}

/* ---------- Dropdown / mega menu ---------- */
.has-dropdown { position: relative; }
.caret {
  width: 5px; height: 5px; margin-left: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.has-dropdown:hover .caret, .has-dropdown:focus-within .caret { transform: rotate(225deg); }

.dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 8px;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px);
  border: 1px solid #CBD5E1 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12) !important;
  padding: 16px; min-width: 250px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 600;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown ul { display: flex; flex-direction: column; gap: 2px; }
.dropdown li a {
  display: block; padding: 9px 12px; border-radius: 6px;
  font-size: 0.85rem; font-weight: 600; color: #334155; white-space: nowrap; text-transform: none; letter-spacing: normal;
  transition: all 0.2s ease;
}
.dropdown li a:hover, .dropdown li a.active {
  background: #F1F5F9;
  color: #0F172A !important;
}
.dropdown-mega { display: flex; gap: 32px; min-width: 640px; padding: 24px; background: rgba(255, 255, 255, 0.98) !important; border: 1px solid #CBD5E1 !important; border-radius: 18px !important; box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12) !important; }
.dropdown-mega .dropdown-col { min-width: 170px; }
.dropdown-col-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: #0F172A; font-weight: 800; margin: 0 0 12px;
}

.header-actions { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--subtle-border);
  background: var(--surface-card); cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: #ffffff; margin: 0 auto; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero Section ---------- */
.hero {
  position: relative;
  background: var(--canvas-bg);
  padding: 40px 0 80px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -100px;
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center;
}
.hero-copy h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  margin-bottom: 0.4em;
  text-transform: uppercase;
  line-height: 1.08;
}
.hero-lead { font-size: 1.05rem; max-width: 48ch; color: var(--body-text); }
.hero-actions { display: flex; gap: 14px; margin: 28px 0 40px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--subtle-border); }
.hero-stats strong { 
  display: block; font-family: var(--font-display); font-size: 1.8rem;
  background: var(--chrome-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats span { font-size: 0.82rem; color: var(--muted-text); font-weight: 500; }

.hero-copy .eyebrow, .hero-copy h1, .hero-copy .hero-lead, .hero-copy .hero-actions, .hero-copy .hero-stats {
  opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-copy .eyebrow { animation-delay: 0.05s; }
.hero-copy h1 { animation-delay: 0.15s; }
.hero-copy .hero-lead { animation-delay: 0.25s; }
.hero-copy .hero-actions { animation-delay: 0.35s; }
.hero-copy .hero-stats { animation-delay: 0.45s; }

/* =========================================
   CLEAN & MODERN HERO SECTION DESIGN
========================================= */

.wp-clean-hero {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
    box-sizing: border-box;
    padding: 40px 0;
    background-color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* FADED FULLSCREEN BACKGROUND OVERLAY */
.wp-hero-bg-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.16;
    overflow: hidden;
}

.wp-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: contrast(0.95);
}

.wp-hero-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* CENTERED BRAND CONTENT */
.wp-hero-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
    padding: 30px 20px;
}

.wp-hero-logo {
    width: 100%;
    max-width: 760px;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
}

.wp-hero-tagline {
    margin-top: 28px;
    font-family: var(--font-body), Arial, sans-serif;
    font-size: clamp(15px, 1.8vw, 22px);
    letter-spacing: 6px;
    font-weight: 400;
    color: #222222;
    text-transform: uppercase;
}

.wp-hero-tagline strong {
    font-weight: 800;
    color: #000000;
}

.wp-hero-divider {
    width: 80px;
    height: 2px;
    background: #111111;
    margin: 22px auto;
}

.wp-hero-subtitle {
    font-family: var(--font-body), Arial, sans-serif;
    font-size: clamp(11px, 1.1vw, 15px);
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #333333;
    font-weight: 600;
    margin-bottom: 35px;
}

.wp-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-outline-dark {
    background: transparent;
    color: #111111;
    border: 1px solid #111111;
    padding: 12px 26px;
    border-radius: var(--radius-sm, 6px);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-outline-dark:hover {
    background: #111111;
    color: #ffffff;
    transform: translateY(-2px);
}

/* RIGHT SIDE 3D ARTWORK SHOWCASE */
.wp-hero-right {
    width: 100%;
}

.hero-visual-frame {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hero-visual-frame:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.18);
}

.hero-artwork-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 20px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .wp-clean-hero {
        min-height: calc(100vh - 72px);
        min-height: calc(100dvh - 72px);
        padding: 40px 0;
    }
    .wp-hero-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .wp-hero-left {
        align-items: center;
        text-align: center;
    }
    .wp-hero-logo {
        max-width: 460px;
    }
    .hero-visual-frame {
        max-width: 360px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .wp-clean-hero {
        min-height: calc(100vh - 72px);
        min-height: calc(100dvh - 72px);
        padding: 24px 0;
    }
    .wp-hero-logo {
        max-width: 340px;
    }
    .hero-visual-frame {
        max-width: 280px;
    }
}

/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 1024px) {
    .pure-code-hero {
        min-height: 850px;
        height: auto;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .hero-left-content {
        width: 100%;
        padding: 0 30px;
        text-align: center;
        z-index: 20;
    }

    .hero-logo {
        width: 80%;
        max-width: 480px;
        margin: 0 auto;
    }

    .hero-tagline {
        font-size: 15px;
        letter-spacing: 5px;
        margin-top: 25px;
    }

    .hero-divider {
        margin: 18px auto;
    }

    .hero-sub-tagline {
        font-size: 11px;
        letter-spacing: 4px;
    }

    .hero-right-visual {
        width: 100%;
        height: 570px;
        right: -25%;
        top: 430px;
        transform: rotate(-12deg);
    }

    .hero-target-area {
        right: 15%;
        top: 570px;
        width: 220px;
        height: 220px;
    }

    .target-circle { width: 190px; height: 190px; }
    .target-arrow { width: 135px; }

    .coin-btn { width: 85px; height: 85px; }
    .coin-icon { width: 20px; height: 20px; margin-bottom: 2px; }
    .coin-text { font-size: 8px; letter-spacing: 0.5px; }

    .coin-strategy { right: 14%; top: 500px; }
    .coin-creativity { right: 36%; top: 550px; }
    .coin-digital { right: 48%; top: 640px; }
    .coin-branding { right: 32%; top: 720px; }

    .dot-n1 { width: 35px; height: 35px; right: 20%; top: 470px; }
    .dot-n2 { width: 27px; height: 27px; right: 14%; top: 450px; }
    .dot-n3 { width: 18px; height: 18px; right: 10%; top: 435px; }
    .dot-n4 { width: 10px; height: 10px; right: 7%; top: 425px; }
}

@media (max-width: 600px) {
    .pure-code-hero {
        min-height: 800px;
        padding-top: 50px;
    }

    .hero-left-content {
        padding: 0 20px;
    }

    .hero-logo { width: 92%; }
    .hero-tagline { font-size: 11px; letter-spacing: 3px; }
    .hero-sub-tagline { font-size: 9px; letter-spacing: 2.5px; }

    .hero-right-visual {
        top: 410px;
        right: -42%;
        width: 125%;
        height: 480px;
    }

    .hero-target-area { top: 545px; right: 10%; }
    .coin-btn { width: 70px; height: 70px; }
    .coin-icon { width: 16px; height: 16px; margin-bottom: 2px; }
    .coin-text { font-size: 7px; }

    .coin-strategy { top: 475px; right: 10%; }
    .coin-creativity { top: 525px; right: 32%; }
    .coin-digital { top: 600px; right: 50%; }
    .coin-branding { top: 670px; right: 28%; }
}

.wp-service-buttons {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.wp-service-btn {
    pointer-events: auto;
    position: absolute;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #42464a 0%, #17191b 55%, #08090a 100%);
    border: 2px solid #5a5e62;
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 6px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.wp-service-btn::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
}

.wp-service-btn:hover {
    transform: scale(1.10) translateY(-4px);
    border-color: #ffffff;
    box-shadow: 
        0 22px 40px rgba(0, 0, 0, 0.75),
        0 0 25px rgba(255, 255, 255, 0.25),
        inset 0 3px 6px rgba(255, 255, 255, 0.6);
    color: #ffffff;
}

.wp-btn-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    stroke: #ffffff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.wp-btn-label {
    font-family: var(--font-display), 'Syne', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    line-height: 1.25;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Button Positions matching arc layout */
.wp-btn-strategy {
    right: 22%;
    top: 16%;
}

.wp-btn-creativity {
    right: 31%;
    top: 33%;
}

.wp-btn-digital {
    right: 38%;
    top: 51%;
}

.wp-btn-branding {
    right: 31%;
    top: 69%;
}

/* Tablet & Mobile Positioning */
@media (max-width: 1024px) {
    .wp-service-btn {
        width: 95px;
        height: 95px;
    }
    .wp-btn-icon {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
    }
    .wp-btn-label {
        font-size: 8.5px;
        letter-spacing: 0.8px;
    }
    .wp-btn-strategy { right: 14%; top: 480px; }
    .wp-btn-creativity { right: 34%; top: 540px; }
    .wp-btn-digital { right: 48%; top: 630px; }
    .wp-btn-branding { right: 30%; top: 710px; }
}

@media (max-width: 600px) {
    .wp-service-btn {
        width: 78px;
        height: 78px;
    }
    .wp-btn-icon {
        width: 20px;
        height: 20px;
        margin-bottom: 3px;
    }
    .wp-btn-label {
        font-size: 7.5px;
        letter-spacing: 0.5px;
    }
    .wp-btn-strategy { right: 8%; top: 460px; }
    .wp-btn-creativity { right: 30%; top: 515px; }
    .wp-btn-digital { right: 50%; top: 590px; }
    .wp-btn-branding { right: 26%; top: 660px; }
}

.hero-form-card {
  position: relative; overflow: hidden;
  background: var(--panel-gradient);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--subtle-border);
  opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.3s;
}
.hero-form-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #ffffff, #8b9298);
}
.hero-form-card h3 { font-size: 1.25rem; margin-bottom: 0.3em; }
.hero-form-card > p { font-size: 0.88rem; margin-bottom: 1.4em; color: var(--body-text); }

.enquiry-form { display: block; }
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; color: var(--muted-text); }
.form-row input, .form-row textarea, .form-row select {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--subtle-border); font-family: inherit; font-size: 0.9rem;
  background: var(--canvas-bg); color: var(--headline-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--muted-text); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(22, 24, 28, 0.08);
}
.form-row textarea { resize: vertical; }
.form-row select {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c828b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.form-row select:invalid { color: var(--muted-text); }

.form-alert { padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; }
.form-alert strong { display: block; margin-bottom: 2px; }
.form-alert p { margin: 0; font-size: 0.88rem; }
.form-alert.success { background: var(--success-tint); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.3); }
.form-alert.error { background: var(--error-tint); color: var(--error); border: 1px solid rgba(239, 68, 68, 0.3); }

/* ---------- Logo Strip ---------- */
.logo-strip {
  padding: 32px 0;
  background: var(--canvas-bg);
  border-top: 1px solid var(--subtle-border);
  border-bottom: 1px solid var(--subtle-border);
  overflow: hidden;
}
.logo-strip-label { text-align: center; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-text); margin-bottom: 18px; font-weight: 600; }
.logo-row {
  display: flex; align-items: center; gap: 44px; width: max-content;
  animation: marquee 24s linear infinite;
}
.logo-strip:hover .logo-row { animation-play-state: paused; }
.logo-row span {
  font-family: var(--font-display); font-weight: 700; color: var(--muted-text); font-size: 0.9rem;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7;
  transition: all 0.2s ease;
}
.logo-row span:hover { color: #111111; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .logo-row { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ---------- Sections ---------- */
.section { padding: 96px 0; position: relative; }
.section.alt { background: #ffffff; border-top: 1px solid var(--subtle-border); border-bottom: 1px solid var(--subtle-border); }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); text-transform: none; color: var(--headline-text); }
.section-lead { font-size: var(--fs-lead); color: var(--body-text); line-height: 1.6; }
.center-cta { text-align: center; margin-top: 44px; }
.center-cta .btn-primary,
.center-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 34px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fad1ff 0%, #fffdfa 35%, #edfffe 65%, #cbfffc 100%);
  color: #012624 !important;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  box-shadow: 0 8px 24px rgba(203, 255, 252, 0.25);
  transition: all 0.3s ease;
}
.center-cta .btn-primary:hover,
.center-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(250, 209, 255, 0.35);
}

.card-grid { display: grid; gap: 20px; }
.card-grid.three { grid-template-columns: repeat(3, 1fr); }

/* Service / Feature Cards — flat, hairline-bordered surfaces */
.feature-card, .news-card, .invest-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--subtle-border);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.feature-card:hover, .news-card:hover, .invest-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.card-media {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--subtle-border);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.feature-card:hover .card-media img, .news-card:hover .card-media img {
  transform: scale(1.05);
}

.split-image-frame, .real-image-frame {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--subtle-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  background: var(--surface-card);
}
.split-image-frame img, .illu-real-img {
  width: 100%;
  height: auto;
  max-height: 380px;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.split-visual-media:hover .illu-real-img {
  transform: scale(1.03);
}

.feature-card:nth-child(2), .feature-card.highlight {
  border-color: var(--subtle-border);
  box-shadow: none;
}

.feature-icon,
article [style*="width: 42px"],
article [style*="width: 44px"],
article [style*="width: 48px"] {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 9px !important;
  background: #F1F5F9 !important;
  color: #0F172A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.25s ease;
  padding: 0 !important;
}

.feature-icon svg,
article [style*="width: 42px"] svg,
article [style*="width: 44px"] svg,
article [style*="width: 48px"] svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  stroke: #0F172A !important;
  stroke-width: 1.8px !important;
}

.card-grid .feature-card:nth-child(1) .feature-icon,
.card-grid .feature-card:nth-child(2) .feature-icon,
.card-grid .feature-card:nth-child(3) .feature-icon {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}
.card-grid .feature-card:nth-child(1) .feature-icon svg,
.card-grid .feature-card:nth-child(2) .feature-icon svg,
.card-grid .feature-card:nth-child(3) .feature-icon svg {
  stroke: #0F172A !important;
}

.feature-card:hover .feature-icon,
article:hover [style*="width: 42px"],
article:hover [style*="width: 44px"],
article:hover [style*="width: 48px"] {
  transform: translateY(-2px) scale(1.05);
  background: #0F172A !important;
  border-color: #0F172A !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14) !important;
}
.feature-card:hover .feature-icon svg,
article:hover [style*="width: 42px"] svg,
article:hover [style*="width: 44px"] svg,
article:hover [style*="width: 48px"] svg {
  stroke: #FFFFFF !important;
}

.feature-card h3, .news-card h3, .invest-card h3 { font-size: var(--fs-h3); text-transform: none; color: var(--headline-text); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-weight: 600; color: var(--accent-blue); font-size: var(--fs-small);
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: gap 0.2s ease, border-color 0.2s ease;
}
.link-arrow:hover { gap: 9px; border-color: currentColor; }

.news-tag, .tag-pill {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
  border: 1px solid #bfdbfe;
  transition: all 0.22s ease;
}
.news-tag:hover, .tag-pill:hover {
  background: var(--accent-blue);
  color: #ffffff;
  border-color: var(--accent-blue);
}

/* ---------- Case study band ---------- */
.case-study-band {
  background: #0f172a;
  color: #ffffff;
  padding: 80px 0;
  border-top: 1px solid #1e293b;
  border-bottom: 1px solid #1e293b;
}
.case-study-inner { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
.case-study-stat { display: flex; align-items: flex-start; font-family: var(--font-display); }
.big-number, .big-number-suffix {
  font-size: clamp(4.5rem, 10vw, 7rem);
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1;
}
.big-number-suffix { font-size: clamp(2.5rem, 5vw, 4rem); margin-top: 6px; }
.case-study-copy h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); text-transform: uppercase; color: #ffffff; }
.case-study-copy p { color: #94a3b8; }

/* ---------- Stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.stat-card {
  background: #ffffff; border: 1px solid var(--subtle-border); border-radius: var(--radius-lg);
  padding: 36px 24px; box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); border-color: rgba(0, 0, 0, 0.2); }
.stat-number, .stat-suffix {
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem;
  color: #111111;
}
.stat-card p { margin-top: 10px; font-size: 0.88rem; color: var(--body-text); }

/* ---------- Careers preview ---------- */
.careers-preview {
  background: #ffffff;
  color: #111111;
  border-top: 1px solid var(--subtle-border);
  border-bottom: 1px solid var(--subtle-border);
}
.careers-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.careers-inner .eyebrow { color: var(--muted-text); }
.careers-inner h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); max-width: 640px; text-transform: uppercase; color: #111111; }
.careers-inner .section-lead { color: var(--body-text); margin: 0; }

/* ---------- CTA Band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: #ffffff;
  color: #111111; padding: 72px 0;
  border-top: 1px solid var(--subtle-border);
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1.5px, transparent 1.5px);
  background-size: 24px 24px; opacity: 0.6; pointer-events: none;
}
.cta-band-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { font-size: 2rem; max-width: 480px; text-transform: uppercase; color: #111111; }
.cta-band p { color: var(--body-text); max-width: 480px; margin: 0; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: #0F172A !important;
  color: #94A3B8 !important;
  padding: clamp(56px, 7vw, 84px) 0 36px;
  border-top: 1px solid #1E293B !important;
}

.footer-top-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 44px 48px;
  margin-bottom: 56px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  flex-wrap: wrap;
}

.footer-top-banner h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  color: #0F172A !important;
  margin: 0;
  letter-spacing: -0.02em;
}

.footer-top-banner p {
  color: #475569 !important;
  font-size: 1.02rem;
  margin: 8px 0 0;
  line-height: 1.55;
}

.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px 32px; }
.footer-brand p { color: #475569; margin-top: 14px; max-width: 34ch; font-size: 0.88rem; line-height: 1.6; }

.footer-col h4 {
  font-size: 0.82rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: #0F172A !important;
}

.footer-col ul li { margin-bottom: 12px; }
.footer-col a, .footer-col li {
  color: #64748B;
  font-size: 0.88rem;
  transition: all 0.2s ease;
  display: inline-block;
}
.footer-col a:hover {
  color: #0F172A !important;
  transform: translateX(4px);
}

.social-links { display: flex; gap: 12px; margin-top: 24px; }
.social-links a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #F1F5F9;
  display: flex; align-items: center; justify-content: center;
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.social-links a svg {
  width: 20px; height: 20px; fill: #0F172A;
  transition: transform 0.25s ease, fill 0.25s ease;
}
.hero-social-links {
  justify-content: center; margin-top: 34px; position: relative; z-index: 1;
}
.hero-social-links a {
  width: 50px; height: 50px;
  border: 1px solid #E2E8F0;
  background: #F1F5F9;
  color: #0F172A;
}
.hero-social-links a svg { width: 22px; height: 22px; fill: #0F172A; }

.social-links a:hover {
  background: #0F172A;
  color: #FFFFFF !important;
  border-color: #0F172A;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
}
.social-links a:hover svg {
  fill: #FFFFFF !important;
  transform: scale(1.12);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 56px;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  color: #838b8b;
}
.footer-bottom p { margin: 0; color: inherit; }
.footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-legal a { color: #838b8b; font-size: 0.82rem; transition: color 0.2s ease; }
.footer-legal a:hover { color: #0F172A !important; }

/* ---------- Anchor offset ---------- */
[id] { scroll-margin-top: 96px; }

/* ---------- Tag / pill list ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 999px;
  padding: 8px 16px; font-size: 0.85rem; font-weight: 600; color: #111111;
  transition: all 0.2s ease;
}
.tag-pill:hover {
  transform: translateY(-2px); border-color: #111111; color: #ffffff;
  background: #111111;
}
.tech-group { margin-bottom: 40px; }
.tech-group:last-child { margin-bottom: 0; }
.tech-group h3 { font-size: 1.1rem; margin-bottom: 16px; text-transform: uppercase; color: #111111; }

/* ---------- Service / industry hub ---------- */
.hub-group { margin-bottom: 64px; }
.hub-group:last-child { margin-bottom: 0; }
.hub-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.hub-group-head h2 { margin: 0; text-transform: uppercase; color: #111111; }

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); border-color: #111111; }
.testimonial-quote-mark {
  font-family: var(--font-display); font-size: 3.5rem; line-height: 1; margin-bottom: 4px;
  color: #111111; opacity: 0.2; display: block;
}
.testimonial-card p.quote { color: var(--body-text); font-size: 0.98rem; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #111111; color: #ffffff;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800;
  flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 0.9rem; color: #111111; }
.testimonial-author span { font-size: 0.8rem; color: var(--muted-text); }

/* ---------- Legal pages ---------- */
.legal-content { max-width: 780px; margin: 0 auto; color: var(--body-text); }
.legal-content h2 { margin-top: 2.2em; font-size: 1.3rem; text-transform: uppercase; color: #111111; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content ul { list-style: disc; padding-left: 22px; margin: 0 0 1em; }
.legal-content li { color: var(--body-text); margin-bottom: 6px; }
.legal-updated { color: var(--muted-text); font-size: 0.88rem; margin-bottom: 2.5em; }

/* ---------- Illustrations ---------- */
.illu { width: 100%; height: auto; display: block; }
.illu-wrap { position: relative; }
.illu-wrap.float .illu { animation: floatSoft 6s ease-in-out infinite; }

/* ---------- Split visual sections ---------- */
.split-visual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.split-visual.reverse .split-visual-media { order: 2; }
.split-visual.reverse .split-visual-copy { order: 1; }
.split-visual-copy h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); text-transform: uppercase; color: #ffffff; }
.split-visual-copy p { color: #bbc7c6; }
.split-visual-media, .split-visual-copy { min-width: 0; }
.split-visual-media { position: relative; }
.split-visual-media .illu-frame {
  background: rgba(0, 45, 42, 0.6);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-lg); padding: 22px;
  border: 1px solid rgba(203, 255, 252, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.4s ease;
}
.split-visual:hover .illu-frame { transform: translateY(-4px); border-color: rgba(203, 255, 252, 0.4); }

/* ---------- Glass card ---------- */
.glass-card {
  background: rgba(0, 45, 42, 0.6); backdrop-filter: blur(16px);
  border: 1px solid rgba(203, 255, 252, 0.2); border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color: #ffffff;
}

/* ---------- Pill badge row ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.badge-row .tag-pill { font-size: 0.8rem; padding: 6px 14px; }

/* ---------- Process rail ---------- */
.process-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process-rail::before {
  content: ''; position: absolute; top: 28px; left: 8%; right: 8%; height: 1px;
  background: rgba(203, 255, 252, 0.2);
}
.process-step { position: relative; text-align: center; }
.process-step-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0, 45, 42, 0.8); border: 1px solid rgba(203, 255, 252, 0.3);
  color: #cbfffc; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; position: relative; z-index: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease;
}
.process-step:hover .process-step-num { transform: scale(1.08); background: #cbfffc; color: #011716; }
.process-step h3 { font-size: 1rem; margin-bottom: 6px; text-transform: uppercase; color: #ffffff; }
.process-step p { font-size: 0.86rem; color: #bbc7c6; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 4px 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease;
}
.faq-item:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08) !important;
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 1.02rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #0F172A !important;
  text-transform: none !important; letter-spacing: 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex-shrink: 0; width: 9px; height: 9px;
  border-right: 2.2px solid #0F172A !important;
  border-bottom: 2.2px solid #0F172A !important;
  transform: rotate(45deg); transition: transform 0.25s ease;
  margin-right: 4px;
}
.faq-item[open] summary::after {
  transform: rotate(-135deg);
  border-color: #0F172A !important;
}
.faq-item p {
  padding: 0 0 18px; margin: 0; color: #334155 !important;
  text-transform: none; line-height: 1.65; font-size: 0.95rem;
}

/* ---------- Check list ---------- */
.check-list { list-style: none; padding: 0; margin: 0 0 24px; }
.check-list li {
  position: relative; padding-left: 28px; margin-bottom: 12px; font-size: 0.95rem; color: #edfffe; line-height: 1.55;
}
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 0; color: #cbfffc; font-weight: 800; font-size: 1rem;
}

/* ---------- Sparkle Star ---------- */
.contact-form-card, .hero-form-card { position: relative; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-lg); padding: 34px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); }
.contact-form-card::after, .hero-form-card::after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 24px;
  font-size: 1.8rem;
  color: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: #ffffff; color: #111111;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 16px 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08);
}
.cookie-banner-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cookie-banner-inner p { margin: 0; font-size: 0.85rem; max-width: 640px; color: var(--body-text); }
.cookie-banner-inner a { color: #111111; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ---------- Pull quote ---------- */
.pull-quote {
  max-width: 780px; margin: 0 auto; text-align: center; position: relative; padding: 0 20px;
}
.pull-quote-mark {
  font-family: var(--font-display); font-size: 4rem; line-height: 1;
  color: var(--muted-text); opacity: 0.4; margin-bottom: 4px; display: block;
}
.pull-quote p {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: #111111; line-height: 1.45; margin-bottom: 20px;
  text-transform: none;
}
.pull-quote-cite { font-size: 0.82rem; color: var(--muted-text); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Stat strip ---------- */
.stat-strip {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 56px;
  padding: 8px 0; text-align: center;
}
.stat-strip-item { min-width: 120px; }
.stat-strip-num {
  display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem);
  color: #111111;
}
.stat-strip-label { font-size: 0.82rem; color: var(--muted-text); margin-top: 6px; }

/* ---------- Numbered feature list row ---------- */
.feature-list { display: flex; flex-direction: column; gap: 4px; max-width: 780px; margin: 0 auto; }
.feature-list-row {
  display: flex; align-items: flex-start; gap: 22px;
  padding: 20px 4px; border-bottom: 1px solid var(--subtle-border);
  transition: transform 0.3s ease, padding-left 0.3s ease;
}
.feature-list-row:last-child { border-bottom: none; }
.feature-list-row:hover { transform: translateX(6px); padding-left: 8px; }
.feature-list-num {
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #111111;
  flex-shrink: 0; width: 32px;
}
.feature-list-row h3 { font-size: 1.02rem; margin-bottom: 4px; text-transform: uppercase; color: #111111; }
.feature-list-row p { margin: 0; font-size: 0.9rem; color: var(--body-text); text-transform: none; }

/* ---------- Page hero ---------- */
.page-hero,
.page-hero.blob-field {
  position: relative; overflow: hidden;
  margin-top: 0;
  padding: 32px 0 36px;
  background: var(--canvas-bg);
  text-align: center;
  border-bottom: 1px solid var(--subtle-border);
}

.blob {
  position: absolute !important;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  opacity: 0.12;
}
.blob-violet {
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
}
.blob-coral {
  background: radial-gradient(circle, #f43f5e 0%, transparent 70%);
}

.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(1.4rem, 2.5vw, 2.1rem); max-width: 680px; margin: 0 auto 0.3em; text-transform: uppercase; color: #111111; font-weight: 700; letter-spacing: 0.02em; line-height: 1.25; }
.page-hero .hero-lead { max-width: 560px; margin: 0 auto; font-size: 0.92rem; color: var(--body-text); line-height: 1.5; }

.page-hero .eyebrow, .page-hero h1, .page-hero .hero-lead {
  opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.page-hero .eyebrow { animation-delay: 0.05s; }
.page-hero h1 { animation-delay: 0.15s; }
.page-hero .hero-lead { animation-delay: 0.25s; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.two-col h2 { font-size: 1.4rem; text-transform: uppercase; color: #111111; }

/* ---------- Contact page ---------- */
.contact-layout { align-items: start; }
.contact-info { display: block; }
.contact-details { margin: 20px 0 28px; }
.contact-details li { margin-bottom: 18px; }
.contact-details strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-text); margin-bottom: 4px; }
.contact-details a, .contact-details span { font-size: 1rem; font-weight: 600; color: #111111; }
.contact-form-card {
  background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-lg);
  padding: 34px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* ---------- Services page ---------- */
.service-detail {
  display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start;
}
.service-detail.reverse .service-detail-icon { order: 2; }
.service-detail.reverse > div:last-child { order: 1; }
.service-detail-icon {
  width: 90px; height: 90px; border-radius: 16px;
  background: #111111;
  border: 1px solid #111111;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  color: #ffffff; display: flex; align-items: center; justify-content: center;
}
.service-detail-icon svg { width: 42px; height: 42px; stroke: #ffffff; }
.check-list { margin: 22px 0 28px; }
.check-list li {
  position: relative; padding-left: 28px; margin-bottom: 12px; color: var(--body-text);
}
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 14px;
  border-radius: 50%; background: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 2px #111111;
}
.check-list.compact { margin: 16px 0 20px; }
.check-list.compact li { font-size: 0.9rem; margin-bottom: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .case-study-inner { grid-template-columns: 1fr; text-align: center; }
  .case-study-stat { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .service-detail, .service-detail.reverse { grid-template-columns: 1fr; }
  .service-detail.reverse .service-detail-icon,
  .service-detail.reverse > div:last-child { order: initial; }
  .news-row { grid-template-columns: 1fr; }
  .split-visual, .split-visual.reverse { grid-template-columns: 1fr; }
  .split-visual.reverse .split-visual-media,
  .split-visual.reverse .split-visual-copy { order: initial; }
  .split-visual-media { max-width: 420px; margin: 0 auto; }
  .process-rail { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .process-rail::before { display: none; }
}

/* Drawer CTA — hidden on desktop (selector beats `.main-nav a`) */
.main-nav .mobile-cta { display: none; }

@media (max-width: 1180px) {
  .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    transform: none !important;
    will-change: auto !important;
  }
  .site-header.scrolled {
    background: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  }
  .nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #CBD5E1;
    background: #ffffff !important;
    cursor: pointer !important;
    z-index: 1000002 !important;
    position: relative !important;
    pointer-events: auto !important;
    margin-left: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  }
  .nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #111111 !important;
    margin: 0 auto;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .nav-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .main-nav {
    display: none !important;
    position: fixed !important;
    top: 76px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 76px) !important;
    height: calc(100dvh - 76px) !important;
    background: #FFFFFF !important;
    z-index: 999990 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 24px 60px !important;
    border-top: 1px solid #E2E8F0 !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
  }
  .main-nav.open {
    display: flex !important;
    flex-direction: column !important;
  }
  .main-nav > ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  .main-nav > ul > li {
    border-bottom: 1px solid var(--subtle-border);
  }
  /* Top-level rows — branded, roomy tap targets */
  .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 2px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--headline-text);
    border-radius: 0;
    background: transparent;
    text-transform: none;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
  }
  .main-nav > ul > li > a:hover,
  .main-nav > ul > li > a.active,
  .has-dropdown.mobile-open > a {
    background: transparent;
    color: var(--accent-strong) !important;
  }

  /* Chevron — clean, no box */
  .caret {
    margin-left: auto;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transform: none;
  }
  .caret::before {
    content: '';
    width: 9px;
    height: 9px;
    margin-top: -3px;
    border-right: 2px solid var(--muted-text);
    border-bottom: 2px solid var(--muted-text);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }
  .has-dropdown.mobile-open .caret::before {
    margin-top: 3px;
    transform: rotate(-135deg);
    border-color: var(--accent-strong);
  }

  /* Expanding submenus — stacked, indented, quiet */
  .dropdown, .dropdown-mega {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    min-width: auto !important;
    padding: 0 0 14px 2px !important;
    margin: 0 !important;
    display: none !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .has-dropdown.mobile-open .dropdown,
  .has-dropdown.mobile-open .dropdown-mega {
    display: flex !important;
  }
  .dropdown-mega .dropdown-col { min-width: 0 !important; margin-bottom: 6px; }
  .dropdown-col-label {
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
    color: var(--muted-text) !important;
    padding: 10px 12px 4px !important;
    margin: 0 !important;
  }
  .dropdown ul { gap: 0 !important; }
  .dropdown li a {
    display: block;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 500;
    padding: 12px 12px;
    background: transparent;
    color: var(--body-text);
    border-radius: 8px;
  }
  .dropdown li a:hover, .dropdown li a.active {
    background: var(--surface-alt);
    color: var(--headline-text) !important;
  }

  /* CTA inside the drawer (header CTA is hidden on mobile) */
  .header-actions .btn-primary { display: none; }
  .main-nav .mobile-cta {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 26px;
    padding: 15px 24px;
    font-size: 1rem;
  }
  /* Tablet & small-laptop: two-up grids, not a stretched single column */
  .card-grid.three { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band-inner, .careers-inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* True mobile: single column */
@media (max-width: 620px) {
  .card-grid.three { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .section { padding: 56px 0; }
  .hero-center { padding: 48px 0; }
}

/* ---------- Job Board Redesign ---------- */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.job-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.job-card:hover {
  transform: translateY(-6px);
  border-color: #0F172A;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.job-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.job-dept-pill {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0F172A;
  background: #F1F5F9;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
}

.job-tags {
  display: flex;
  gap: 8px;
}

.job-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748B;
  background: #F8FAFC;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #E2E8F0;
}

.job-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.job-desc {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 28px;
}

.job-card-action {
  margin-top: auto;
  padding-top: 20px;
}

.job-card-action .btn-block {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 24px;
}

.general-apply-box {
  margin-top: 48px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
}

.general-apply-info h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}

.general-apply-info p {
  font-size: 0.95rem;
  color: #334155;
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .jobs-grid { grid-template-columns: 1fr; }
  .general-apply-box { flex-direction: column; align-items: flex-start; }
}

/* ---------- Tech Matrix Redesign ---------- */
.tech-matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 36px;
}

.tech-cat-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.tech-cat-card:hover {
  transform: translateY(-6px);
  border-color: #0F172A;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.tech-cat-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.tech-cat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: #F1F5F9;
  color: #0F172A;
  border: 1px solid #E2E8F0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.tech-cat-icon svg { width: 24px; height: 24px; stroke: #0F172A !important; }

.tech-cat-info h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.tech-cat-info p {
  font-size: 0.88rem;
  color: #334155;
  margin: 0;
  line-height: 1.5;
}

.tech-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #E2E8F0;
}

.tech-pill-item {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  background: #F8FAFC;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  transition: all 0.25s ease;
}

.tech-pill-item:hover {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
  transform: translateY(-2px);
}

@media (max-width: 960px) {
  .tech-matrix-grid { grid-template-columns: 1fr; }
}

/* ---------- Non-stop Infinite Marquee ---------- */
.logo-strip {
  padding: 36px 0;
  background: var(--canvas-bg);
  border-top: 1px solid var(--subtle-border);
  border-bottom: 1px solid var(--subtle-border);
  overflow: hidden;
  text-align: center;
}

.logo-strip-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-text);
  margin-bottom: 24px;
}

.marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 22s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: 54px;
  padding-right: 54px;
}

.marquee-content span {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.40);
  white-space: nowrap;
  transition: color 0.25s ease, transform 0.25s ease;
}

.marquee-content span:hover {
  color: #111111;
  transform: scale(1.06);
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Hide AI Blobs completely */
.blob, .blob-field::before, .blob-violet, .blob-coral {
  display: none !important;
}

/* ---------- Human Agency UI Panels ---------- */
.human-ui-panel {
  background: #0f172a;
  color: #ffffff;
  border-radius: 12px;
  padding: 26px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  border: 1px solid #1e293b;
  position: relative;
  overflow: hidden;
}
.human-ui-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1e293b;
  margin-bottom: 20px;
}
.human-ui-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.human-ui-dot.red { background: #ef4444; }
.human-ui-dot.yellow { background: #f59e0b; }
.human-ui-dot.green { background: #10b981; }
.human-ui-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 6px;
}
.human-ui-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  margin-bottom: 8px;
}
.human-ui-metric .label { color: #cbd5e1; font-weight: 600; }
.human-ui-metric .value { color: #38bdf8; font-weight: 800; }
.human-ui-bar {
  width: 100%;
  height: 8px;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}
.human-ui-bar .fill {
  height: 100%;
  background: #2563eb;
  border-radius: 4px;
}
.human-ui-bar .fill.alt {
  background: #10b981;
}
.human-ui-grid-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #1e293b;
  font-size: 0.82rem;
  color: #94a3b8;
}
.human-ui-grid-stats strong {
  display: block;
  font-size: 1.25rem;
  color: #ffffff;
  font-weight: 800;
}
.code-preview {
  background: #020617;
  padding: 16px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.82rem;
  color: #38bdf8;
  overflow-x: auto;
  margin-bottom: 16px;
  border: 1px solid #1e293b;
}

/* =====================================================================
   REFINEMENT LAYER — editorial monochrome, applied last in the cascade.
   Removes the template "AI-generated" signals: global uppercase headings,
   heavy shadows, decorative dot/blob/sparkle noise, and jumpy hovers.
   ===================================================================== */

/* 1 — Sentence-case headings everywhere (labels stay uppercase separately) */
.section-head h2,
.case-study-copy h2,
.careers-inner h2,
.cta-band h2,
.split-visual-copy h2,
.hub-group-head h2,
.two-col h2,
.legal-content h2,
.feature-card h3, .news-card h3, .invest-card h3,
.tech-group h3,
.tech-cat-info h3,
.process-step h3,
.feature-list-row h3,
.job-title,
.page-hero h1,
.faq-item summary {
  text-transform: none;
  letter-spacing: -0.005em;
}
.faq-item summary { letter-spacing: 0; }

/* Rebalance heading colours onto the token ink */
.section-head h2, .hub-group-head h2, .two-col h2, .legal-content h2,
.careers-inner h2, .cta-band h2, .split-visual-copy h2,
.tech-group h3, .tech-cat-info h3, .process-step h3,
.feature-list-row h3, .job-title { color: var(--headline-text); }

/* 2 — Section rhythm */
.section { padding: var(--section-y) 0; }
.section.alt { background: var(--surface-card); border-top: 1px solid var(--subtle-border); border-bottom: 1px solid var(--subtle-border); }

/* 3 — Strip decorative noise */
.cta-band::before,
.page-hero::before,
.hero-form-card::before { display: none !important; content: none !important; }
.contact-form-card::after,
.hero-form-card::after { content: none !important; }

/* 4 — Flatten remaining shadow-heavy cards to hairline surfaces */
.stat-card, .testimonial-card, .job-card, .tech-cat-card, .faq-item, .general-apply-box {
  box-shadow: none;
  border-color: var(--subtle-border);
}
.stat-card:hover, .testimonial-card:hover, .job-card:hover, .tech-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}
.faq-item:hover { border-color: var(--line-strong); }

/* 5 — Calmer tag pills (no full colour-invert on hover) */
.tag-pill, .news-tag {
  background: var(--surface-card);
  border-color: var(--subtle-border);
  color: var(--body-text);
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.tag-pill:hover, .news-tag:hover {
  background: var(--surface-alt);
  color: var(--headline-text);
  border-color: var(--line-strong);
  transform: none;
}
.tech-pill-item:hover { transform: none; background: var(--brand-primary); }

/* 6 — Case-study band + dark surfaces onto the token ink */
.case-study-band { background: var(--surface-dark); border-color: #23262c; }
.human-ui-panel { background: var(--surface-dark); border-color: #23262c; box-shadow: var(--shadow-soft); }

/* 7 — Page hero: quieter, left-anchored option */
.page-hero { padding: clamp(40px, 6vw, 68px) 0 clamp(36px, 5vw, 56px); }
.page-hero h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; max-width: 720px; }
.page-hero .hero-lead { font-size: var(--fs-lead); max-width: 58ch; }

/* 8 — Split visual media frame: lighter */
.split-visual-media .illu-frame { box-shadow: none; border-color: var(--subtle-border); background: var(--surface-card); }
.split-visual:hover .illu-frame { border-color: var(--line-strong); transform: translateY(-3px); }

/* 9 — Comfortable reading measure on standalone prose */
.split-visual-copy p, .section-lead { max-width: var(--measure); }
.section-head .section-lead { margin-left: auto; margin-right: auto; }

/* 10 — Process rail: quieter number chips */
.process-step-num { box-shadow: none; border-color: var(--line-strong); }
.process-step:hover .process-step-num { transform: scale(1.04); }

/* 10b — Display-face numbers & prominent UI: never faux-bold, tighten tracking */
.stat-number, .stat-suffix, .big-number, .big-number-suffix, .stat-strip-num,
.process-step-num, .feature-list-num, .lede-title, .lede-facts b,
.statement p, .hero-stats strong, .marquee-content span, .job-title {
  font-synthesis: none;
}
.stat-number, .big-number, .stat-strip-num { letter-spacing: -0.02em; }

/* 11 — Focus-visible for keyboard users */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* =====================================================================
   HOMEPAGE — editorial composition
   ===================================================================== */

/* Hero: centred logo over WebGL Shader Banner — Exactly 100vh on EVERY screen size */
.hero-center {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: clamp(68px, 10vh, 90px) 16px clamp(24px, 5vh, 48px) !important;
  background: transparent !important;
  border-bottom: 1px solid #CBD5E1;
  box-sizing: border-box !important;
  transform: translateZ(0);
}
.hero-center-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.gradient-waves-canvas,
.ghost-fibers-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  display: block;
}
.hero-center-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-center-logo {
  width: min(504px, 80%);
  max-width: 504px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.08));
  transition: transform 0.3s ease;
}
.hero-center-logo:hover {
  transform: scale(1.02);
}
.hero-center-kicker-pill {
  margin: clamp(10px, 2vh, 20px) 0 clamp(8px, 1.5vh, 14px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.1vw, 0.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.hero-center-kicker {
  margin: 14px 0 0;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: #0F172A;
}
.hero-center-tagline {
  margin: 0 auto clamp(12px, 2.2vh, 22px);
  font-family: var(--font-body);
  font-size: clamp(0.88rem, 1.35vw, 1.12rem);
  line-height: 1.52;
  color: #334155;
  max-width: 580px;
  font-weight: 400;
}
.hero-center-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: clamp(10px, 1.8vh, 16px);
}
.hero-center-actions .btn-aurora {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: 1px solid #0F172A !important;
  padding: 14px 34px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15);
}
.hero-center-actions .btn-aurora:hover {
  background: #1E293B !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.25);
}
.hero-center-actions .btn-outline-aurora {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  padding: 14px 32px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.hero-center-actions .btn-outline-aurora:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
  transform: translateY(-2px);
}
.hero-social-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 36px;
}
.hero-social-links a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-social-links a svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.hero-social-links a:hover {
  background: #0F172A;
  color: #FFFFFF !important;
  border-color: #0F172A;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

/* Honest capability panel (replaces fake dashboard mockups) */
.capability-panel {
  border: 1px solid var(--subtle-border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  padding: 12px 30px;
}
.capability-panel .cap-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 0 16px; border-bottom: 1px solid var(--subtle-border);
}
.capability-panel .cap-head h4 {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted-text); margin: 0; font-weight: 700;
}
.capability-panel .cap-head span { font-size: 0.8rem; color: var(--muted-text); }
.capability-list { display: flex; flex-direction: column; }
.capability-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--subtle-border);
  font-size: 0.98rem; color: var(--headline-text); font-weight: 500;
}
.capability-list li:last-child { border-bottom: none; }
.capability-list li i { font-style: normal; color: var(--muted-text); font-size: 0.85rem; font-weight: 500; text-align: right; flex-shrink: 0; }

/* Sector experience strip (replaces fabricated client logos) */
.sector-band { padding: clamp(40px, 5vw, 60px) 0; border-bottom: 1px solid var(--subtle-border); }
.sector-band .sector-label {
  text-align: center; font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted-text); font-weight: 700; margin-bottom: 24px;
}
.sector-strip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 820px; margin: 0 auto; }
.sector-strip a {
  font-size: 0.9rem; font-weight: 500; color: var(--body-text);
  border: 1px solid var(--subtle-border); border-radius: 999px; padding: 9px 18px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.sector-strip a:hover { border-color: var(--line-strong); color: var(--headline-text); }

/* Editorial pull statement (no fabricated attribution) */
.statement { max-width: 900px; margin: 0 auto; text-align: center; }
.statement p {
  font-family: var(--font-display); font-weight: 600; font-style: normal;
  font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.3; color: var(--headline-text);
  letter-spacing: -0.015em; margin: 0; text-wrap: balance;
}
.statement p em { font-style: italic; }

/* Centred hero — tablet (stays full height) */
@media (max-width: 760px) {
  .hero-center-logo { width: min(420px, 88%); }
  .hero-center-kicker { letter-spacing: 0.22em; }
}
/* Centred hero — mobile */
@media (max-width: 480px) {
  .hero-center-logo { width: 86%; }
  .hero-center-kicker { letter-spacing: 0.18em; }
}

/* Blog — editorial list (a non-card pattern, for rhythm variety) */
.news-list { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line-strong); }
.news-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 36px;
  padding: 30px 4px; border-bottom: 1px solid var(--subtle-border);
  align-items: start; transition: padding-left 0.25s ease;
}
.news-row:hover { padding-left: 10px; }
.news-row .news-tag { align-self: start; margin: 0; }
.news-date { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-text); margin: 0 0 6px; font-weight: 600; }
.news-row-body h2 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 8px; }
.news-row-body p { margin: 0; color: var(--body-text); max-width: 60ch; }
@media (max-width: 640px) {
  .news-row { gap: 8px 0; padding: 24px 4px; }
  .news-row .news-tag { margin-bottom: 6px; }
}

/* ---------- Homepage booking form ---------- */
.booking-section { background: var(--color-liquid-abyss); border-top: 1px solid var(--subtle-border); border-bottom: 1px solid var(--subtle-border); }
.booking-layout {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start;
}
.booking-copy { padding-top: 6px; }
.booking-copy h2 { text-transform: none; font-size: clamp(2.2rem, 3.8vw, 3.2rem); font-weight: 700; line-height: 1.15; color: #ffffff; margin-bottom: 16px; }
.booking-points { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; list-style: none; padding: 0; }
.booking-points li {
  padding-left: 28px; position: relative; font-size: 1rem; color: #bbc7c6; line-height: 1.5;
}
.booking-points li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #cbfffc; background: transparent;
}
.bullet-icon {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #cbfffc; margin-right: 8px; vertical-align: middle;
}
.booking-points a { color: #cbfffc; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.booking-form-card { background: var(--color-liquid-kelp); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 40px; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.booking-form-card h3 { margin-bottom: 0.2em; }

@media (max-width: 860px) {
  .booking-layout { grid-template-columns: 1fr; gap: 32px; }
  .booking-form-card { max-width: none; }
}

/* ---------- Trusted-by client logo wall ---------- */
.trusted-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.trusted-head h2 {
  text-transform: none; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.15;
}
.trusted-accent { color: var(--accent-blue); }
.trusted-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.trusted-card {
  background: var(--surface-card); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md); height: 96px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.trusted-card:hover { border-color: var(--muted-text); background: var(--surface-alt); }
.trusted-card img { max-height: 40px; max-width: 80%; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: all 0.2s ease; }
.trusted-card:hover img { filter: none; opacity: 1; }
.trusted-placeholder { font-size: 0.78rem; font-weight: 600; color: var(--muted-text); letter-spacing: 0.03em; }

@media (max-width: 860px) {
  .trusted-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   AUROS GLOBAL EXACT ABYSSAL DARK THEME
========================================= */

.wp-auros-hero {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    padding: 80px 0 60px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.wp-auros-hero::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 75vw;
    height: 65vh;
    background: radial-gradient(circle at 75% 20%, rgba(2, 185, 176, 0.25) 0%, rgba(1, 23, 22, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.wp-auros-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-kicker-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #bbc7c6;
    margin-bottom: 20px;
    display: block;
}

.hero-auros-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5.5vw, 4.8rem);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.hero-auros-subtext {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    color: #bbc7c6;
    max-width: 580px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

.btn-aurora {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fad1ff 0%, #fffdfa 35%, #edfffe 65%, #cbfffc 100%);
    background-size: 200% 100%;
    background-position: 100% 0%;
    color: #012624 !important;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(203, 255, 252, 0.25);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-aurora:hover {
    background-position: 0% 0%;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(250, 209, 255, 0.35);
    color: #011716 !important;
}

.btn-outline-aurora {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 999px;
    background: rgba(203, 255, 252, 0.08);
    border: 1px solid rgba(203, 255, 252, 0.3);
    color: #edfffe !important;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline-aurora:hover {
    background: rgba(203, 255, 252, 0.2);
    border-color: #cbfffc;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.hero-sphere-box {
    position: relative;
    width: 100%;
    max-width: 620px;
    height: 500px;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-sphere-box canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* KINETIC DISPLAY TEXT */
.kinetic-display-section {
    padding: 100px 0 80px;
    background: transparent;
    overflow: hidden;
}

.kinetic-giant-text {
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 11vw, 9.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #0F172A;
    background-image: linear-gradient(135deg, #0F172A 0%, #334155 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 24px;
    white-space: nowrap;
}

.kinetic-subhead {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    font-weight: 600;
    line-height: 1.25;
    color: #0F172A;
    max-width: 820px;
    margin: 0 auto;
}

.gradient-word {
    background-image: linear-gradient(135deg, #0F172A 0%, #475569 50%, #0F172A 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: #0F172A !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
    padding-bottom: 0.18em !important;
    margin-bottom: -0.18em !important;
    line-height: 1.2 !important;
    overflow: visible !important;
}

h1, h2, h3, .hero-copy h1, .page-hero h1, .svc-detail-hero h1 {
    line-height: 1.2 !important;
    overflow: visible !important;
}

/* EXPLORE SECTION */
.explore-section {
    padding: 100px 0;
    background: transparent;
}

.explore-container-card {
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 64px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.explore-grid-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.explore-service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 0;
    border-bottom: 1px solid #E2E8F0;
    transition: border-color 0.3s ease;
}

.explore-service-row:last-child {
    border-bottom: none;
}

.explore-service-row:hover {
    border-bottom-color: #0F172A;
}

.explore-service-info h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 8px;
}

.explore-service-info p {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.6;
    margin: 0;
    max-width: 48ch;
}

.arrow-icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #0F172A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.explore-service-row:hover .arrow-icon-btn {
    background: #0F172A;
    color: #FFFFFF;
    transform: translate(3px, -3px);
}

/* WEPITCH IN NUMBERS */
.numbers-section {
    padding: 100px 0;
    background: transparent;
}

.numbers-grid-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 24px;
}

.number-card-highlight {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    border-radius: 20px;
    padding: 56px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    color: #0F172A;
}

.number-card-highlight .big-stat-val {
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 6.5vw, 6rem);
    font-weight: 800;
    line-height: 1;
    color: #0F172A;
}

.number-card-highlight .stat-lbl {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748B;
    max-width: 24ch;
}

.numbers-subgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.number-card-dark {
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 36px 32px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}

.number-card-dark .big-stat-val {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1;
    margin-bottom: 12px;
}

.number-card-dark .stat-lbl {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}

/* GLOBAL PRESENCE BANNER CARD */
.global-presence-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 64px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.05);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.global-presence-copy h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 16px;
}

.global-presence-copy p {
    font-size: 1.05rem;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* RESPONSIVE AUROS BREAKPOINTS */
/* About Page Image Card Dynamics */
.about-img-card:hover {
  transform: translateY(-6px);
  border-color: rgba(203, 255, 252, 0.4) !important;
}
.about-img-card:hover .about-img {
  transform: scale(1.06);
}

@media (max-width: 991px) {
    .explore-container-card { padding: 40px 24px; }
    .explore-grid-layout { grid-template-columns: 1fr; gap: 40px; }
    .numbers-grid-layout { grid-template-columns: 1fr; }
    .global-presence-card { grid-template-columns: 1fr; padding: 40px 28px; }
    .kinetic-giant-text { white-space: normal; }
}

/* ---------- LIGHT THEME OVERRIDES ---------- */

.main-nav, .main-nav ul, .main-nav a {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
.dropdown, .dropdown-mega, .dropdown-col, .dropdown li a {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
.dropdown, .dropdown-mega {
  background: #FFFFFF !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08) !important;
}
.dropdown-col-label {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--muted-text) !important;
}
.dropdown li a {
  color: var(--body-text) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}
.dropdown li a:hover {
  color: var(--headline-text) !important;
  background: var(--surface-alt) !important;
}
.site-header .header-actions .btn-primary {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

.btn-aurora, .btn-primary {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: 1px solid #0F172A !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-aurora:hover, .btn-primary:hover {
  background: #1E293B !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
}
.btn-outline-aurora, .btn-secondary {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
}
.btn-outline-aurora:hover, .btn-secondary:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  transform: translateY(-2px);
}

/* Universal Borderless & Zero-Padding Image Media System */
.split-visual-media {
  width: 100%;
}
.split-visual-media > div {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08) !important;
  background: transparent !important;
}
.split-visual-media img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: cover !important;
}

.site-footer {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 50%, #F8FAFC 100%) !important;
  color: #334155 !important;
  padding: clamp(56px, 7vw, 84px) 0 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
}
.footer-brand p {
  color: #334155 !important;
}
.footer-col h4 {
  font-size: 0.82rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: #0F172A !important;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }
.footer-col a {
  color: #334155 !important;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.footer-col a:hover {
  color: #0F172A !important;
  transform: translateX(4px);
}
.footer-bottom {
  border-top: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #334155 !important;
}
.footer-legal a {
  color: #334155 !important;
  font-weight: 600;
}
.footer-legal a:hover {
  color: #0F172A !important;
}
.footer-socials a {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: #0F172A !important;
}
.footer-socials a:hover {
  background: #0F172A !important;
  color: #FFFFFF !important;
}

input, select, textarea {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  border-radius: 12px !important;
  font-size: 0.95rem;
}
input:focus, select:focus, textarea:focus {
  border-color: #0F172A !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1) !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
}
option, optgroup {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-family: var(--font-body);
}
optgroup {
  font-weight: 800 !important;
  color: #0F172A !important;
  background-color: #F1F5F9 !important;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
::placeholder {
  color: #64748B !important;
  opacity: 1 !important;
}

/* =====================================================================
   HIGH-IMPACT VISIBLE MOTION & MICRO-INTERACTION SYSTEM
   ===================================================================== */

/* 1. MAGNETIC BUTTONS & SPECULAR SHEEN */
.specular-btn-active, .magnetic-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.2s ease !important;
  cursor: pointer;
}
.specular-btn-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(100px circle at var(--specular-x, 50%) var(--specular-y, 50%), rgba(255, 255, 255, 0.45) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.specular-btn-active:hover {
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22) !important;
}
.specular-btn-active:hover::after {
  opacity: 1;
}
.specular-btn-active:active {
  transform: scale(0.96) !important;
}

/* CLICK RIPPLE */
.btn-click-ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.5);
  animation: btnRipple 0.55s ease-out forwards;
  pointer-events: none;
  z-index: 3;
}
@keyframes btnRipple {
  to {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}

/* 2. 3D CARD TILT & ELEVATION */
.card-tilt-3d {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  transform-style: preserve-3d;
  will-change: transform;
}
.card-tilt-3d:hover {
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08), 0 0 0 1px #CBD5E1 !important;
  border-color: #CBD5E1 !important;
}

/* 3. CURSOR SPOTLIGHT ON CARDS */
.cursor-spotlight-card {
  position: relative;
  /* No overflow:hidden here — it clipped the border-glow ring, which is drawn
     just outside the padding box. The spotlight layer is already inset to the
     card and rounded to match, so it never escapes on its own. */
}
.cursor-spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--spotlight-x, -500px) var(--spotlight-y, -500px), rgb(var(--glow-rgb) / var(--glow-strength)), transparent 75%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.cursor-spotlight-card:hover::before {
  opacity: 1;
}
.cursor-spotlight-card > * {
  position: relative;
  z-index: 1;
}

/* 4. CLEAN NAVIGATION HOVER */
.main-nav a {
  transition: color 0.2s ease, background 0.2s ease !important;
}
.main-nav a:hover, .main-nav a.active {
  color: var(--headline-text) !important;
  background: var(--surface-alt) !important;
}

/* 5. HARD VISIBLE SCROLL REVEAL (SPRING PHYSICS) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 6. HERO AMBIENT FLOAT ANIMATION */
.hero-center-logo {
  animation: heroLogoBreathe 6s ease-in-out infinite alternate;
}
@keyframes heroLogoBreathe {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-6px) scale(1.01); }
}

.hero-center-kicker-pill {
  animation: kickerPulse 4s ease-in-out infinite alternate;
}
@keyframes kickerPulse {
  0% { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); }
  100% { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12); }
}

/* 7. STAGGERED DROPDOWN MENUS */
.staggered-menu-item {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dropdown, .dropdown-mega {
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

/* 8. UNIVERSAL POINTER CURSOR ACROSS FULL WEBSITE */
a, button, [role="button"], input[type="submit"], input[type="button"], select,
.btn, .btn-aurora, .btn-primary, .btn-secondary, .btn-ghost, .btn-outline-aurora,
.job-card, .tech-cat-card, .tech-pill-item, article, .brand, .brand-logo,
.faq-question, .faq-item, .sub-cta, .booking-pill, .slider-nav,
.card-tilt-3d, .about-img-card, .general-apply-box, .subpage-card,
.nav-link, .dropdown-item, .caret, summary, label[for], .client-logo-card {
  cursor: pointer !important;
}

/* CLIENT LOGO CARD HOVER SYSTEM */
.client-logo-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease !important;
}
.client-logo-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: #CBD5E1 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}
.client-logo-card svg {
  transition: transform 0.25s ease;
  max-width: 100%;
}
.client-logo-card:hover svg {
  transform: scale(1.05);
}

/* 9. CUSTOM FLOATING SELECT DROPDOWN COMPONENT */
.custom-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
}

.custom-select-trigger {
  width: 100%;
  min-height: 52px;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 12px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left;
  font-family: inherit;
  font-size: 0.95rem;
  color: #0F172A !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.custom-select-wrapper.is-open .custom-select-trigger,
.custom-select-trigger:focus {
  border-color: #0F172A !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1) !important;
  outline: none;
}

.custom-select-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: #0F172A;
  transition: transform 0.25s ease;
}

.custom-select-wrapper.is-open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.05);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}

.custom-select-wrapper.is-open .custom-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Custom Scrollbar for Dropdown */
.custom-select-menu::-webkit-scrollbar {
  width: 6px;
}
.custom-select-menu::-webkit-scrollbar-track {
  background: transparent;
}
.custom-select-menu::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 999px;
}
.custom-select-menu::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.custom-select-optgroup-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 14px 4px;
  margin-top: 4px;
  pointer-events: none;
}
.custom-select-optgroup-label:first-child {
  margin-top: 0;
}

.custom-select-option {
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: #334155;
  border-radius: 8px;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.custom-select-option:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.custom-select-option.is-selected {
  background: #0F172A;
  color: #FFFFFF;
  font-weight: 600;
}

/* ==========================================================================
   GLOBAL RESPONSIVE OPTIMIZATION SYSTEM (ALL SCREEN SIZES)
   Mobile (320px - 480px), Phablet (481px - 768px), Tablet (769px - 1024px),
   Desktop (1025px - 1440px), Wide Screen (1441px+)
   ========================================================================== */

/* Universal Responsive Containers & Layout */
.container {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 32px) !important;
  padding-right: clamp(16px, 4vw, 32px) !important;
  box-sizing: border-box !important;
}

/* Universal Fluid Responsive Grid System */
.responsive-client-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.responsive-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.responsive-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.responsive-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.responsive-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.responsive-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Large Screens & Desktops */
@media (min-width: 1440px) {
  .hero-center {
    padding: 100px 0 80px;
  }
}

/* Tablets & Small Laptops (max-width: 1024px) */
@media (max-width: 1024px) {
  .responsive-client-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .responsive-grid-4,
  .responsive-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .responsive-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .responsive-split-grid {
    gap: 36px;
  }
  .split-visual-media {
    gap: 32px;
  }
}

/* Medium Tablets & Phablets (max-width: 880px) */
@media (max-width: 880px) {
  .hero-center {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(68px, 10vh, 84px) 16px clamp(20px, 4vh, 36px) !important;
  }
  .responsive-client-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .responsive-split-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .responsive-grid-2,
  .responsive-grid-3,
  .responsive-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .hero-center-inner {
    padding: 0 16px;
  }
  .hero-center-logo {
    width: min(480px, 90%);
  }
  .hero-center-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    gap: 10px;
  }
  .hero-center-actions .btn {
    flex: 1 1 160px;
    text-align: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 0.88rem;
  }
}

/* Mobile Phones (max-width: 768px and max-width: 640px) */
@media (max-width: 768px) {
  .site-header .header-actions a.btn,
  .site-header .header-actions .btn-aurora,
  .site-header .header-actions .btn-primary {
    display: none !important;
  }
  .site-header .header-actions {
    gap: 0 !important;
  }
  .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    text-align: center !important;
  }
  .hero-copy {
    text-align: center !important;
    margin: 0 auto !important;
  }
  .hero-copy .eyebrow {
    justify-content: center !important;
  }
  .hero-actions {
    justify-content: center !important;
    margin: 20px 0 !important;
    gap: 12px !important;
  }
  .hero-stats {
    justify-content: center !important;
    gap: 20px !important;
  }
  .split-visual,
  .responsive-split-grid,
  .two-col,
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .split-visual.reverse {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
  .split-visual-media {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .split-visual-copy {
    text-align: left !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  /* Fluid Typography across all phone screens */
  h1, .hero-copy h1, .page-hero h1 {
    font-size: clamp(1.8rem, 6.5vw, 2.3rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.015em !important;
    word-break: break-word !important;
  }
  h2, .split-visual-copy h2, .section h2 {
    font-size: clamp(1.45rem, 5.2vw, 1.95rem) !important;
    line-height: 1.22 !important;
    word-break: break-word !important;
  }
  h3 {
    font-size: clamp(1.15rem, 4.2vw, 1.4rem) !important;
    line-height: 1.28 !important;
  }
  h4 {
    font-size: clamp(1.02rem, 3.8vw, 1.2rem) !important;
  }
  p, .hero-lead, .lead, .split-visual-copy p {
    font-size: clamp(0.9rem, 2.8vw, 1rem) !important;
    line-height: 1.55 !important;
  }

  /* Global section and container padding */
  .container, .container-sm, .container-lg, .site-header .container, .site-footer .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .section {
    padding: 36px 0 !important;
  }
  .page-hero, .hero-subpage {
    padding: 48px 0 28px !important;
    text-align: center !important;
  }

  /* Home Banner Full Height */
  .hero-center {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(60px, 10vh, 76px) 14px clamp(16px, 3vh, 28px) !important;
    box-sizing: border-box !important;
  }
  .hero-center-logo {
    width: min(380px, 88%);
    height: auto;
  }
  .hero-center-kicker-pill {
    margin: 12px 0 8px !important;
    font-size: 0.74rem !important;
    padding: 5px 14px !important;
  }
  .hero-center-tagline {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
    max-width: 440px !important;
  }
  .hero-center-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px !important;
  }
  .hero-center-actions .btn {
    padding: 8px 16px !important;
    font-size: 0.82rem !important;
  }
  .hero-social-links a {
    width: 32px !important;
    height: 32px !important;
  }

  /* Responsive Grids */
  .responsive-client-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .client-logo-card {
    height: 80px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  .client-logo-card img {
    max-height: 38px !important;
  }
  .responsive-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .responsive-grid-4,
  .responsive-grid-3,
  .responsive-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Cards, Bento, Articles on Phone */
  .feature-card,
  .service-card,
  .pillar-card,
  .method-card,
  .bento-card,
  .booking-form-card,
  .contact-form-card,
  .discovery-form,
  .story-card,
  .step-card,
  article,
  .split-visual-media > div {
    padding: clamp(18px, 4.5vw, 28px) clamp(14px, 3.5vw, 20px) !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Inputs & Form Controls */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .site-header-inner {
    padding: 10px 16px !important;
  }
  .brand-logo {
    max-height: 36px !important;
  }
}

/* Compact Mobile Screens (max-width: 380px) */
@media (max-width: 380px) {
  .hero-center {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 56px 12px 16px !important;
  }
  .hero-center-logo {
    width: min(290px, 86%) !important;
    height: auto !important;
  }
  .hero-center-tagline {
    font-size: 0.8rem !important;
    line-height: 1.38 !important;
    margin-bottom: 8px !important;
  }
  .responsive-client-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .client-logo-card {
    height: 70px !important;
    padding: 8px 10px !important;
  }
  .client-logo-card img {
    max-height: 30px !important;
  }
  .responsive-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ----------------------------------------------------
   ANIMATED 4-STEP PROCESS RAIL COMPONENT
---------------------------------------------------- */
.process-rail-wrapper {
  position: relative;
  width: 100%;
}

.process-connecting-line {
  position: absolute;
  top: 60px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.3) 50%, rgba(15, 23, 42, 0.1) 100%);
  z-index: 1;
  pointer-events: none;
}

.process-connecting-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 100%;
  background: linear-gradient(90deg, transparent, #0F172A, transparent);
  animation: processLinePulse 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes processLinePulse {
  0% { left: -10%; opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { left: 105%; opacity: 0; }
}

.process-step-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 24px;
  padding: 38px 24px 32px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.process-card-top-bar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #0F172A, #38BDF8, #0F172A);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 4px 4px 0 0;
}

.process-step-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.12);
  border-color: #0F172A;
}

.process-step-card:hover .process-card-top-bar {
  width: 100%;
}

.process-step-badge {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #0F172A;
  color: #0F172A;
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

.process-step-badge::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(15, 23, 42, 0.25);
  animation: badgeSpin 16s linear infinite;
  transition: border-color 0.3s ease;
}

@keyframes badgeSpin {
  100% { transform: rotate(360deg); }
}

.process-step-card:hover .process-step-badge {
  background: #0F172A;
  color: #FFFFFF;
  transform: scale(1.12);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}

.process-step-card:hover .process-step-badge::before {
  border-color: #0F172A;
  animation-duration: 6s;
}

.process-step-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.process-step-card:hover .process-step-tag {
  color: #0F172A;
}

.process-step-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
  line-height: 1.3;
}

.process-step-desc {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}

.process-step-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  margin-left: 4px;
}

@media (max-width: 880px) {
  .process-connecting-line {
    display: none;
  }
}

/* ----------------------------------------------------
   LUXURIOUS HOVER EFFECTS FOR CAPABILITY & FEATURE CARDS
---------------------------------------------------- */
.capability-card,
.feature-card {
  position: relative;
  background: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 24px !important;
  padding: clamp(22px, 3.2vw, 32px) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  isolation: isolate;
}

.capability-card::before,
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 3.5px;
  background: linear-gradient(90deg, #0F172A, #38BDF8, #0F172A);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  border-radius: 4px 4px 0 0;
}

.capability-card:hover,
.feature-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.12), 0 0 0 1px #0F172A !important;
  border-color: #0F172A !important;
}

.capability-card:hover::before,
.feature-card:hover::before {
  width: 100%;
}

/* Icon Box Animation */
.card-icon-box,
.feature-card .feature-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #F1F5F9 !important;
  color: #0F172A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  border: 1px solid #CBD5E1 !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-icon-box svg,
.feature-card .feature-icon svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

.capability-card:hover .card-icon-box,
.feature-card:hover .feature-icon {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
  transform: scale(1.08) rotate(4deg) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18) !important;
}

.capability-card:hover .card-icon-box svg,
.feature-card:hover .feature-icon svg,
.capability-card:hover .card-icon-box path,
.feature-card:hover .feature-icon path {
  stroke: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* CTA Explore Link Arrow Animation */
.capability-cta-link,
.feature-card a {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  margin-top: 12px !important;
}

.capability-cta-link .arrow-icon,
.feature-card a .arrow-icon {
  display: inline-block !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.capability-card:hover .capability-cta-link,
.feature-card:hover a {
  color: #0F172A !important;
}

.capability-card:hover .capability-cta-link .arrow-icon,
.feature-card:hover a .arrow-icon {
  transform: translateX(6px) scale(1.25) !important;
}


/* ==========================================================================
   Border Glow  —  reactbits.dev/components/border-glow
   A light source that tracks the cursor around the card's edge. Drawn on a
   ::after ring masked to the border box, so the card's own background and
   content are untouched and only the 1px edge lights up.
   ========================================================================== */
:root {
  --glow-rgb: 148 163 184;      /* slate-400, the palette's brightest neutral */
  --glow-strength: 0.55;
}

.border-glow-card {
  position: relative;
  isolation: isolate;
}
.border-glow-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    240px circle at var(--spotlight-x, -500px) var(--spotlight-y, -500px),
    rgb(var(--glow-rgb) / 0.95),
    rgb(var(--glow-rgb) / 0.25) 40%,
    transparent 70%);
  /* Punch out the middle so only the border ring paints. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
}
.border-glow-card:hover::after,
.border-glow-card:focus-within::after { opacity: 1; }

/* The spotlight wash sits under the content, the glow ring above it. */
.cursor-spotlight-card::before { z-index: 0; }
.cursor-spotlight-card > * { position: relative; z-index: 1; }

/* ==========================================================================
   Staggered mobile menu  —  reactbits.dev/components/staggered-menu
   ========================================================================== */
@media (max-width: 1024px) {
  .staggered-mobile-nav.nav-cascade > ul > li,
  .staggered-mobile-nav.nav-cascade > .mobile-cta {
    animation: nav-stagger-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--stagger-delay, 0ms);
  }
}
@keyframes nav-stagger-in {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive guardrails
   The page must never scroll sideways. Inline grids were converted to
   auto-fit/minmax so they collapse without a breakpoint; these catch the
   remaining offenders (wide media, long unbroken strings, tables).
   ========================================================================== */
/* overflow-x: hidden on html/body creates a scroll container, which breaks
   position: sticky — it detached the site header. `clip` suppresses the same
   sideways scroll without establishing that container, so the sticky header
   survives. The real overflow sources (fixed inline grids) are fixed at
   source anyway; this is a guardrail, not the fix. */
html { max-width: 100%; }
body { max-width: 100%; overflow-x: clip; }

img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

table { display: block; max-width: 100%; overflow-x: auto; }

/* Long URLs and code in copy are a classic source of horizontal overflow. */
p, li, td, dd, h1, h2, h3, h4 { overflow-wrap: break-word; }

@media (max-width: 768px) {
  /* Inline paddings authored for desktop leave very little room on a phone. */
  .container { padding-left: 18px; padding-right: 18px; }

  /* Neutralise inline two-column splits that were authored as flex rows. */
  [style*="display: flex"][style*="gap"] { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .container { padding-left: 14px; padding-right: 14px; }

  /* Buttons were nowrap with desktop padding, so a long label pushed past a
     320px viewport. Let them wrap and cap them to the column. */
  .btn, .btn-aurora, .btn-primary, .btn-outline, .btn-outline-aurora {
    max-width: 100%;
    white-space: normal;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }

  /* Two-up form rows have no room left at this width. */
  .form-row { grid-template-columns: 1fr !important; }

  /* Same reason as the inline grids: any leftover fixed track collapses. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .border-glow-card::after,
  .cursor-spotlight-card::before { transition: none !important; }
  .staggered-mobile-nav.nav-cascade > ul > li,
  .staggered-mobile-nav.nav-cascade > .mobile-cta { animation: none !important; }
}

/* ==========================================================================
   Mobile drawer CTA contrast
   `.main-nav a { color: … !important }` (0,1,1) outranks
   `.btn-aurora  { color: … !important }` (0,1,0), so the drawer's CTA was
   painted the same #0F172A as its own background — an invisible button.
   Both declarations are !important, so specificity decides; this restores the
   button's own colour with a selector that outranks the nav rule.
   ========================================================================== */
.main-nav .btn-aurora,
.main-nav .btn-primary,
.main-nav a.btn-aurora,
.main-nav a.btn-primary {
  color: #FFFFFF !important;
  background: #0F172A !important;
}
.main-nav .btn-outline-aurora,
.main-nav .btn-secondary,
.main-nav a.btn-outline-aurora {
  color: #0F172A !important;
  background: #FFFFFF !important;
}

/* ==========================================================================
   Responsive hero + device-size pass
   ..........................................................................
   .hero-center is authored with `height: 100dvh !important`, which locks the
   hero to exactly one screen. It holds ~380px of content, so on a phone that
   left a ~430px dead zone and pushed every real section below the fold. The
   !important on every property is also why the existing
   `@media (max-width: 480px) { .hero-center { padding: 48px 0 } }` never did
   anything — hence the !important here, to match the base rule's weight.

   Below the tablet breakpoint the hero becomes content-height with generous
   padding, so it fills the screen when the content is tall and shrinks when
   it isn't, instead of being pinned either way.
   ========================================================================== */

@media (max-width: 900px) {
  .hero-center {
    /* Fill exactly one screen so nothing from the next section shows until
       the visitor scrolls. The header is sticky and sits in normal flow, so
       its height has to come off the viewport or the hero overshoots by 76px
       and the page gains a pointless scroll. svh (not vh) keeps this stable
       while mobile browsers collapse their address bar. */
    height: auto !important;
    min-height: calc(100svh - var(--header-h, 76px)) !important;
    min-height: calc(100dvh - var(--header-h, 76px)) !important;
    /* Content sits toward the top, but not flush against the header — a
       flush-top block left ~210px of empty space below it and read as
       top-heavy. This is the middle ground between that and the original
       centred layout, whose 106px gap pushed the logo too far down. */
    align-items: flex-start !important;
    padding: clamp(44px, 8vh, 84px) 16px clamp(40px, 7vh, 64px) !important;
  }
  .hero-center-inner { gap: 16px; justify-content: flex-start; }
  .hero-center-logo { width: min(306px, 70%) !important; max-width: 306px !important; }
  .hero-center-tagline { font-size: 0.95rem; line-height: 1.6; }
}

@media (max-width: 600px) {
  .hero-center {
    padding: clamp(38px, 7vh, 72px) 14px clamp(34px, 6vh, 52px) !important;
  }
  .hero-center-logo { width: min(245px, 68%) !important; max-width: 245px !important; }
  .hero-center-kicker { font-size: 0.66rem; letter-spacing: 0.14em; }
  .hero-center-kicker-pill { padding: 7px 14px; }
  .hero-center-actions { width: 100%; gap: 10px; }
  .hero-center-actions .btn-aurora,
  .hero-center-actions .btn-outline-aurora { width: 100%; }
}

/* Landscape phones: a full-height hero is unusable at ~375px of height, and
   the breathing animation on the logo makes the little space left jitter. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-center {
    /* Deliberately NOT full-height here: one screen minus the header is
       ~300px, which cannot hold the logo, kicker, copy and two buttons. */
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 20px 32px !important;
  }
  .hero-center-logo {
    width: min(220px, 42%) !important;
    animation: none !important;
  }
  .hero-center-inner { gap: 12px; }
}

/* Very small screens (320px and folded devices). */
@media (max-width: 360px) {
  .hero-center-logo { width: min(228px, 80%) !important; }
  .hero-center-tagline { font-size: 0.88rem; }
  .hero-center-kicker { font-size: 0.6rem; letter-spacing: 0.1em; }
}

/* The cookie banner is fixed to the bottom and was covering the hero's social
   row on short screens; reserve room for it so nothing is permanently hidden. */
@media (max-width: 900px) {
  .hero-social-links { margin-bottom: 8px; }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* --------------------------------------------------------------------------
   Section rhythm. Desktop section padding is authored for a 1440px canvas and
   reads as large empty bands on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .section { padding-top: clamp(44px, 8vw, 64px); padding-bottom: clamp(44px, 8vw, 64px); }
  h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); line-height: 1.15; }
  h2 { font-size: clamp(1.45rem, 5.6vw, 1.9rem); line-height: 1.2; }
  h3 { font-size: clamp(1.1rem, 4.4vw, 1.3rem); }
}

/* Tablet: two-up rather than a single stretched column or a cramped three-up. */
@media (min-width: 601px) and (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}

/* ==========================================================================
   Clickable cards + touch targets
   ========================================================================== */
.is-card-clickable { cursor: pointer; }

/* The card is not itself focusable — the anchor inside still is, so there is
   one tab stop, not two. Showing the ring on the card makes that focus
   visible at the size the user actually clicks. */
.is-card-clickable:focus-within {
  outline: 2px solid var(--brand-primary, #0F172A);
  outline-offset: 3px;
}

/* WCAG 2.5.5 asks for 44x44 CSS px. Inline icon links and social buttons were
   well under that on touch. Applied only for coarse pointers so the desktop
   layout keeps its tighter rhythm. */
@media (pointer: coarse) {
  a.btn, button, .social-links a, .arrow-icon-btn, .nav-toggle,
  .cookie-banner-actions button, .theme-toggle {
    min-height: 44px;
    min-width: 44px;
  }
  .social-links a { display: inline-flex; align-items: center; justify-content: center; }
  .main-nav a { padding-top: 12px; padding-bottom: 12px; }

  /* Footer, in-card and brand links were 82x22 or similar. Grow the tap area
     with padding rather than min-height so inline flow is preserved and the
     visual rhythm does not jump. The card itself is already a large target
     (see .is-card-clickable); this is for the link inside it. */
  footer a, .footer-grid a, .footer-legal a, .footer-col a {
    display: inline-block;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .is-card-clickable a[href],
  .feature-card a[href],
  .cursor-spotlight-card a[href] {
    display: inline-block;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .cookie-banner a { display: inline-block; padding: 10px 0; }
  /* Hover-only affordances never fire on touch; don't hide anything behind them. */
  .cursor-spotlight-card::before,
  .border-glow-card::after { display: none; }
}

/* --------------------------------------------------------------------------
   Responsive media
   Intrinsic width/height attributes are now on every image so the browser can
   reserve the box; these keep them fluid regardless of those attributes.
   -------------------------------------------------------------------------- */
img, svg, video, canvas, picture { max-width: 100%; }
img:not([width]), img[style*="width: 100%"] { height: auto; }
img { height: auto; }

/* Media inside cards keeps its shape instead of letterboxing as columns
   reflow at different breakpoints. */
.card-media img, .split-visual-media img, .about-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   Contact page: form first on mobile
   .booking-copy precedes .booking-form-card in the DOM, which is the right
   reading order on desktop where they sit side by side. Once the grid
   collapses to one column that puts a screen of prose above the form — on
   the page whose entire job is the form. Reordering visually rather than
   moving the markup keeps the desktop source order and the tab order intact.
   ========================================================================== */
@media (max-width: 860px) {
  /* Grid items honour `order`, so no display override is needed — the
     wrapper keeps its inline `display: grid` and simply places the form
     first once the columns collapse. Applies to both wrapper names in use. */
  .contact-layout .booking-form-card,
  .booking-layout .booking-form-card { order: -1; }
  .contact-layout .booking-copy,
  .booking-layout .booking-copy { order: 1; padding-top: 0 !important; }
  .contact-layout { gap: 28px !important; }

  /* The hero above it is a title and a line of copy; it does not need
     70px of padding before the form appears. */
  .contact-hero-section { padding: 40px 0 16px !important; }
  .contact-booking-section { padding: 8px 0 64px !important; }
  .booking-form-card { padding: 26px 20px !important; border-radius: 18px !important; }
}