/* ============================================================
   S01 US West Coast Document Translation — Tech & Immigration
   Theme: Deep Ink #0f172a + Deep Blue #0b1f3a + Violet Accent #533afd
   Cool white / light-purple backgrounds, Silicon Valley tech aesthetic
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
  /* Deep Ink / Navy palette */
  --ink-950: #0a0f1e;
  --ink-900: #0f172a;
  --ink-800: #131d35;
  --ink-700: #1a2744;
  --ink-600: #1e3a5f;

  /* Deep Blue */
  --navy-900: #0b1f3a;
  --navy-800: #0d2847;
  --navy-700: #0d5e8a;
  --navy-600: #0e7490;
  --navy-500: #0891b2;
  --navy-400: #22d3ee;
  --navy-100: #cffafe;
  --navy-50: #ecfeff;

  /* Violet accent */
  --violet-900: #4c1d95;
  --violet-800: #5b21b6;
  --violet-700: #6d28d9;
  --violet-600: #533afd;
  --violet-500: #7c3aed;
  --violet-400: #a78bfa;
  --violet-300: #c4b5fd;
  --violet-200: #ddd6fe;
  --violet-100: #ede9fe;
  --violet-50: #f3f0ff;

  /* Neutrals */
  --gray-900: #0f172a;
  --gray-800: #1e293b;
  --gray-700: #334155;
  --gray-600: #475569;
  --gray-500: #64748b;
  --gray-400: #94a3b8;
  --gray-300: #cbd5e1;
  --gray-200: #e2e8f0;
  --gray-100: #f1f5f9;
  --gray-50: #f8fafc;
  --white: #ffffff;

  /* Semantic */
  --bg-body: #f0f2ff;
  --bg-section: var(--white);
  --bg-alt: var(--violet-50);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --border-color: var(--gray-200);
  --border-light: var(--gray-100);
  --success: #15803d;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 30px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.16);
  --shadow-violet: 0 4px 14px rgba(83, 58, 253, 0.3);
  --shadow-ink: 0 4px 14px rgba(11, 31, 58, 0.25);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 820px;
  --header-height: 72px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Typography — normalized type scale */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;

  --fs-h1: clamp(1.8rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.35rem);
  --fs-h4: 1.05rem;
  --fs-display: clamp(2rem, 4.5vw, 3rem);
  --fs-display-large: clamp(1.6rem, 3.2vw, 2.3rem);
  --fs-lead: 1.15rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.1rem;
  --fs-small: 0.82rem;

  /* Spacing — normalized rhythm */
  --section-pad: var(--space-xl);
  --section-pad-lg: var(--space-2xl);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --gap-md: 1.5rem;
  --gap-lg: 2rem;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; overflow-wrap: anywhere; }

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-secondary);
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--violet-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--violet-800); }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin-bottom: 1rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--violet-600);
  color: var(--white);
  font-weight: 700;
  border-radius: 0 0 var(--radius-md) 0;
  transition: left var(--transition-fast);
}
.skip-link:focus { left: 0; }

/* --- Layout Container --- */
.container, .wrap {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.25rem, 4vw, 3.5rem);
}

main > *:not(.container):not(.wrap),
body > section:not(.container):not(.wrap) {
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.25rem, 4vw, 3.5rem);
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

/* Utility bar */
.utility-bar {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  padding: 6px 0;
  position: relative;
  overflow: hidden;
}
.utility-bar::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 120px;
  background: linear-gradient(90deg, transparent, rgba(83, 58, 253, 0.2));
}
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.utility-bar a {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}
.utility-bar a:hover { color: var(--violet-300); }
.utility-bar-left, .utility-bar-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.utility-phone {
  color: var(--violet-300);
  font-weight: 700;
}

/* Header inner */
.site-header .container {
  max-width: 1600px;
}
@media (max-width: 1700px) {
  .brand-tagline { display: none; }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--header-height);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.brand-logo {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--ink-800), var(--violet-600));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 800;
  font-size: 1.1rem;
  border: 1px solid rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.brand-logo::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: brandShine 4s ease-in-out infinite;
}
@keyframes brandShine {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink-800);
  letter-spacing: -0.01em;
}
.brand-tagline {
  font-size: 0.68rem;
  color: var(--violet-600);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Main nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 0.05rem;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem 0.24rem;
  font-size: 0.71rem;
  font-weight: 600;
  color: var(--gray-700);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.nav-link:hover,
.nav-item:hover > .nav-link {
  color: var(--violet-700);
  background: var(--violet-50);
}
.nav-link .caret {
  font-size: 0.6rem;
  color: var(--gray-400);
  transition: transform var(--transition-fast);
}
.nav-item:hover > .nav-link .caret {
  transform: rotate(180deg);
  color: var(--violet-600);
}

/* Mega menu */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 600px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  z-index: 1001;
}
.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.mega-menu-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mega-menu-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.mega-menu-col h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--violet-600);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--violet-100);
}
.mega-menu-col a {
  display: block;
  padding: 0.38rem 0;
  font-size: 0.86rem;
  color: var(--gray-600);
  font-weight: 500;
  transition: all var(--transition-fast);
}
.mega-menu-col a:hover {
  color: var(--violet-700);
  padding-left: 4px;
}

/* Simple dropdown */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-base);
  z-index: 1001;
}
.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  color: var(--gray-600);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.dropdown-menu a:hover {
  background: var(--violet-50);
  color: var(--violet-700);
}

/* Header CTA */
.header-cta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  color: var(--violet-700);
  font-size: 1.2rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
  background: linear-gradient(135deg, var(--violet-600), var(--violet-700));
  color: var(--white);
  box-shadow: var(--shadow-violet);
}
.btn:hover {
  background: linear-gradient(135deg, var(--violet-500), var(--violet-600));
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(83, 58, 253, 0.4);
}

/* Secondary / outline button variant */
.btn.secondary,
.btn.btn-secondary {
  background: var(--white);
  color: var(--violet-700);
  border: 2px solid var(--violet-300);
  box-shadow: none;
}
.btn.secondary:hover,
.btn.btn-secondary:hover {
  background: var(--violet-50);
  border-color: var(--violet-500);
  color: var(--violet-800);
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--violet-600), var(--violet-700));
  color: var(--white);
  box-shadow: var(--shadow-violet);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--violet-500), var(--violet-600));
  color: var(--white);
  box-shadow: 0 6px 20px rgba(83, 58, 253, 0.45);
  transform: translateY(-1px);
}

.btn-navy {
  background: var(--navy-700);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-navy:hover {
  background: var(--navy-600);
  color: var(--white);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-ghost, .btn-outline {
  background: transparent;
  border-color: var(--violet-300);
  color: var(--violet-700);
}
.btn-ghost:hover, .btn-outline:hover {
  background: var(--violet-50);
  border-color: var(--violet-600);
  color: var(--violet-800);
}

.btn-white {
  background: var(--white);
  color: var(--ink-800);
  border: 2px solid rgba(255,255,255,0.5);
}
.btn-white:hover {
  background: rgba(255,255,255,0.9);
  color: var(--violet-700);
  transform: translateY(-1px);
}

.btn-lg { padding: 0.85rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.45rem 0.85rem; font-size: 0.78rem; white-space: nowrap; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  padding: 1rem 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
}
.breadcrumb a {
  color: var(--violet-500);
  font-weight: 500;
}
.breadcrumb a:hover { color: var(--violet-700); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--navy-900) 40%, var(--violet-800) 100%);
  color: var(--white);
  padding: var(--section-pad-lg) 0;
  position: relative;
  overflow: hidden;
}
/* Tech grid overlay */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(83, 58, 253, 0.2) 0%, transparent 65%);
  border-radius: 50%;
}
.hero > .container,
.hero > .container.hero-grid,
.hero .wrap {
  position: relative;
  z-index: 1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero .eyebrow {
  color: var(--violet-300);
}
.hero h1, .hero .display-hero {
  color: var(--white);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.hero .body-lg,
.hero p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  line-height: 1.7;
}
.hero .btn-ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}
.hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
  color: var(--white);
}
.hero .btn {
  margin-top: 1.5rem;
}

.hero > .container > div:last-child svg,
.hero-grid > div:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   EYEBROW / DISPLAY TYPOGRAPHY
   ============================================================ */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--violet-600);
  margin-bottom: 0.75rem;
}

.display-hero {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink-900);
  margin-bottom: 1rem;
}

.display-large {
  font-size: var(--fs-display-large);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink-800);
  margin-bottom: 0.75rem;
}

.section-heading {
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: var(--ink-800);
  margin-bottom: 0.75rem;
}

.body-lg {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  line-height: 1.75;
}

.text-center { text-align: center; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  padding: var(--section-pad) 0;
}
.section-sm {
  padding: var(--space-lg) 0;
}
.section-tight {
  padding: var(--space-md) 0;
}

.section:nth-of-type(even),
.section.alt,
.section-sm.alt {
  background: var(--white);
}
.section:nth-of-type(odd) {
  background: var(--gray-50);
}
.section.page-head {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--navy-900) 50%, var(--violet-800) 100%);
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}
.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--violet-500);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ============================================================
   CARDS
   ============================================================ */
.related-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-lg);
  margin-top: 2rem;
}

.smooth-card,
.card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
.smooth-card::before,
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--violet-500), var(--navy-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.smooth-card:hover,
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--violet-100);
}
.smooth-card:hover::before,
.card:hover::before {
  transform: scaleX(1);
}
.smooth-card h4,
.card h3, .card h4 {
  color: var(--ink-700);
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.smooth-card p,
.card p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.smooth-card.text-center {
  text-align: center;
}
.smooth-card.text-center > div:first-child {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-100), var(--violet-50));
  color: var(--violet-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--violet-600);
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 0.75rem;
}
.card-link:hover { text-decoration: underline; color: var(--violet-800); }

/* ============================================================
   STAT ROW
   ============================================================ */
.stat-row {
  display: flex;
  gap: 3rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
.stat-row > div { text-align: center; }
.stat-num {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--violet-600);
  line-height: 1.1;
}
.stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  font-weight: 500;
}

/* ============================================================
   STAR RATING / REVIEWS
   ============================================================ */
.star-rating {
  color: #f59e0b;
  letter-spacing: 2px;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.review-card {
  break-inside: avoid;
}
.review-card p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}
.review-card strong {
  color: var(--ink-800);
  font-weight: 700;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border-color);
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}
.faq-item {
  border-bottom: 1px solid var(--border-color);
  background: var(--white);
}
.faq-q {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.1rem 0.5rem;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-800);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color var(--transition-fast);
}
.faq-q:hover { color: var(--violet-600); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "+";
  margin-left: auto;
  font-size: 1.4rem;
  color: var(--violet-500);
  font-weight: 300;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.faq-item[open] .faq-q::after {
  content: "\2212";
}
.faq-a {
  padding: 0 0.5rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.faq-a p { margin-bottom: 0.5rem; }

/* ============================================================
   QUOTE / FORM SECTION
   ============================================================ */
section[aria-label*="Quote"],
section[aria-label*="quote"],
.quote-band {
  background: linear-gradient(135deg, var(--ink-900), var(--navy-900));
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}
section[aria-label*="Quote"]::before,
.quote-band::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(83, 58, 253, 0.15) 0%, transparent 70%);
}
section[aria-label*="Quote"] .container,
.quote-band .container {
  position: relative;
  z-index: 1;
}
section[aria-label*="Quote"] h2,
.quote-band .section-heading {
  color: var(--white);
  text-align: center;
}
.quote-band .section-sub {
  color: rgba(255,255,255,0.7);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

section[aria-label*="Quote"] form,
.quote-band form,
.form-wrap form {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
}
.quote-band form label,
.form-wrap form label {
  align-self: stretch;
  text-align: center;
  font-weight: 600;
  color: var(--ink-900);
  font-size: 0.85rem;
}
.quote-band form input:not([type="file"]),
.quote-band form textarea,
.quote-band form select,
.form-wrap form input:not([type="file"]),
.form-wrap form textarea,
.form-wrap form select {
  align-self: stretch;
  text-align: center;
}
.quote-band form .file-field,
.form-wrap form .file-field {
  align-self: stretch;
  justify-content: center;
}
.quote-band form .file-field .file-name,
.form-wrap form .file-field .file-name { text-align: center; }
.quote-band form button[type="submit"],
.form-wrap form button[type="submit"] { align-self: center; }
section[aria-label*="Quote"] form label,
.form-wrap label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gray-700);
  margin-bottom: 0.35rem;
}
section[aria-label*="Quote"] form input,
section[aria-label*="Quote"] form select,
section[aria-label*="Quote"] form textarea,
.form-wrap input,
.form-wrap select,
.form-wrap textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  color: var(--text-primary);
  background: var(--gray-50);
  transition: all var(--transition-fast);
  margin-top: 0.25rem;
}
section[aria-label*="Quote"] form input:focus,
.form-wrap input:focus,
.form-wrap select:focus,
.form-wrap textarea:focus {
  outline: none;
  border-color: var(--violet-500);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.12);
}
section[aria-label*="Quote"] form .btn-primary,
.form-wrap .btn-primary {
  width: 100%;
  padding: 0.85rem;
  font-size: 1rem;
  margin-top: 0.5rem;
}
section[aria-label*="Quote"] form p,
.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* --- Custom English file picker --- */
.file-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px dashed rgba(15, 23, 42, 0.25);
  border-radius: 10px;
  padding: 0.5rem 0.85rem;
  background: var(--gray-50);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
}
.file-field:hover {
  border-color: var(--violet-600);
  background: #fff;
}
.file-field input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  font-size: 200px;
}
.file-field .file-btn {
  flex-shrink: 0;
  background: var(--violet-600);
  color: #fff;
  border-radius: 7px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  pointer-events: none;
}
.file-field .file-name {
  font-size: 0.85rem;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 58%;
  pointer-events: none;
}
.quote-band .file-field {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.2);
}

/* ============================================================
   DISCLAIMER (immigration / legal)
   ============================================================ */
.disclaimer {
  background: var(--violet-50);
  border-left: 4px solid var(--violet-500);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 1.5rem 0;
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.6;
}
.disclaimer strong {
  color: var(--violet-800);
  font-weight: 700;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--white);
  padding: var(--space-xl) 0;
  text-align: center;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.cta-band h2 {
  color: var(--ink-800);
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
.cta-band p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto 1.5rem;
}
.cta-band .cta-row,
.cta-band > div > div {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   LINK GRID
   ============================================================ */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-top: 2rem;
}
.link-grid a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-700);
  transition: all var(--transition-base);
}
.link-grid a::before {
  content: '\2192';
  color: var(--violet-500);
  font-weight: 700;
  flex-shrink: 0;
}
.link-grid a:hover {
  background: var(--violet-50);
  border-color: var(--violet-300);
  color: var(--violet-800);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   PAGE HEAD
   ============================================================ */
.page-head {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--navy-900) 50%, var(--violet-800) 100%);
  color: var(--white);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
}
.page-head::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(83, 58, 253, 0.15) 0%, transparent 70%);
  border-radius: 50%;
}
.page-head .container { position: relative; z-index: 1; }
.page-head .ph-title,
.page-head h1 {
  color: var(--white);
  font-size: clamp(1.8rem, 4.5vw, 2.75rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
  max-width: 800px;
}
.page-head .sub,
.page-head p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  max-width: 640px;
}

.page-head .stat-row,
.page-head > div > div:last-of-type {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.page-head > div > div > div {
  text-align: left;
}
.page-head > div > div > div > div:first-child {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--violet-300);
  line-height: 1.1;
}
.page-head > div > div > div > div:last-child {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  margin-top: 0.25rem;
}

.page-head > div > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  background: var(--violet-600);
  color: #fff;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.92rem;
  margin-top: 1.5rem;
  transition: all var(--transition-base);
  text-decoration: none;
}
.page-head > div > a:hover {
  background: var(--violet-500);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(83, 58, 253, 0.4);
}

/* ============================================================
   CONTENT SECTION
   ============================================================ */
.content-section {
  padding: var(--space-lg) 0;
}
.content-section .content-inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.content-section h2 {
  color: var(--ink-800);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.content-section p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.8;
}

/* ============================================================
   COPY PAGE CONTENT CLASSES
   ============================================================ */
.screen {
  padding: var(--space-xl) 0;
}
.screen--hero { padding: 0; }
.screen--hero-banner {
  background: var(--white);
  border-top: 1px solid var(--border-light);
}
.screen--cta-navigation { background: var(--violet-50); }
.screen--faq { background: var(--white); }
.screen--testimonials-reviews { background: var(--violet-50); }
.screen--pricing-tiers { background: var(--white); }
.screen--process-timeline { background: var(--violet-50); }

.lead {
  font-size: var(--fs-lead);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  max-width: 700px;
}

.stats-row {
  padding: var(--space-lg) 0;
  background: var(--white);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}
.stat-card {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--violet-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  transition: all var(--transition-base);
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--violet-300);
}
.stat-value {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--violet-600);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}
.stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.region-context {
  background: linear-gradient(135deg, var(--ink-800), var(--navy-800));
  color: var(--white);
  padding: var(--space-lg) 0;
  border-radius: var(--radius-lg);
  margin: var(--space-lg) 0;
}
.region-context h2, .region-context h3 { color: var(--white); }
.region-context p { color: rgba(255,255,255,0.8); }

.trustline-banner {
  background: var(--violet-50);
  border-left: 4px solid var(--violet-600);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 1.5rem 0;
}
.tl-title {
  font-weight: 700;
  color: var(--violet-800);
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.tl-text {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0;
}

/* In-content forms (not quote-band) */
main form:not([data-form]) {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin: 1.5rem auto;
  box-shadow: var(--shadow-sm);
  max-width: 680px;
}
main form:not([data-form]) label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gray-700);
  margin-bottom: 0.35rem;
  margin-top: 1rem;
}
main form:not([data-form]) input,
main form:not([data-form]) select,
main form:not([data-form]) textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  color: var(--text-primary);
  background: var(--gray-50);
  transition: all var(--transition-fast);
}
main form:not([data-form]) input:focus,
main form:not([data-form]) select:focus,
main form:not([data-form]) textarea:focus {
  outline: none;
  border-color: var(--violet-500);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.12);
}
main form:not([data-form]) .btn {
  margin-top: 1.25rem;
}

.container.faq {
  max-width: var(--container-narrow);
}
.faq details {
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 0;
}
.faq summary {
  font-weight: 600;
  color: var(--ink-800);
  cursor: pointer;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--violet-500);
  font-weight: 300;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p {
  margin-top: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.75;
}

/* Section links styling */
.section a:not(.btn):not(.card-link):not(.link-grid a) {
  color: var(--violet-600);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all var(--transition-fast);
}
.section a:not(.btn):not(.card-link):not(.link-grid a):hover {
  color: var(--violet-800);
  border-bottom-color: var(--violet-300);
}

.section .wrap > h2,
.section > div > h2 {
  color: var(--ink-800);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  margin-bottom: 1rem;
  font-weight: 700;
}

/* Section forms */
.section form,
.section .wrap form {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 2rem;
  margin: 1.5rem auto;
  box-shadow: var(--shadow-md);
  max-width: 600px;
}
.section form label,
.section .wrap form label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gray-700);
  margin-bottom: 0.35rem;
  margin-top: 1rem;
}
.section form input,
.section form select,
.section form textarea,
.section .wrap form input,
.section .wrap form select,
.section .wrap form textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  color: var(--text-primary);
  background: var(--gray-50);
  transition: all var(--transition-fast);
}
.section form input:focus,
.section form select:focus,
.section form textarea:focus,
.section .wrap form input:focus,
.section .wrap form select:focus,
.section .wrap form textarea:focus {
  outline: none;
  border-color: var(--violet-500);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.1);
}
.section form .btn,
.section .wrap form .btn {
  margin-top: 1.25rem;
  width: 100%;
}

/* ============================================================
   404 / SEARCH
   ============================================================ */
.notfound, .min-h {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 0;
}
.search-wrap {
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}
.search-input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 1rem;
  transition: border-color var(--transition-fast);
}
.search-input:focus {
  outline: none;
  border-color: var(--violet-500);
  box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.12);
}

.err {
  font-size: 0.78rem;
  color: var(--violet-600);
  margin-top: 0.25rem;
  display: block;
}

/* ============================================================
   FOOTER — fixed 5 columns, no wrap on desktop
   ============================================================ */
.site-footer {
  background: var(--ink-950);
  color: rgba(255, 255, 255, 0.65);
  padding: var(--space-xl) 0 0;
  overflow-x: auto;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--violet-500), var(--navy-500), var(--violet-500));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  padding-bottom: var(--space-lg);
}
.footer-grid a {
  white-space: nowrap;
}
.footer-brand-col .brand-name {
  color: var(--white);
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}
.footer-brand-col .brand-tagline {
  color: var(--violet-300);
  margin-bottom: 0.75rem;
  display: block;
}
.footer-brand-col p {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
}
.footer-col h4,
.footer-col h5 {
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(83, 58, 253, 0.4);
  display: inline-block;
}
.footer-col a,
.footer-col ul li a {
  display: block;
  padding: 0.28rem 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.55);
  transition: all var(--transition-fast);
}
.footer-col a:hover,
.footer-col ul li a:hover {
  color: var(--violet-300);
  padding-left: 4px;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem;
}
.footer-bottom-links a:hover { color: var(--violet-300); }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
th {
  background: var(--ink-800);
  color: var(--white);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}
tr:nth-child(even) td { background: var(--gray-50); }
tr:hover td { background: var(--violet-50); }

/* ============================================================
   MISC UTILITIES
   ============================================================ */
.small, .text-small, .text-xs { font-size: 0.82rem; }
.badge {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--violet-100);
  color: var(--violet-700);
}

main svg, section svg {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   COPY-PAGE COMPATIBILITY (grid / steps / hero wrap)
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
ol.steps {
  padding-left: 0;
  list-style: none;
  counter-reset: step;
  margin-top: 1.5rem;
}
ol.steps li {
  counter-increment: step;
  padding: 0.85rem 0 0.85rem 3rem;
  position: relative;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-600), var(--violet-700));
  color: var(--white);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(83, 58, 253, 0.3);
}
ol.steps li strong {
  color: var(--ink-800);
  font-weight: 700;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1400px)}@media (max-width:860px){
  .main-nav { display: none; }
  .mobile-menu-toggle { display: block; }
  .header-cta .btn { display: none; }

  .main-nav.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    align-items: stretch;
    gap: 0.25rem;
    max-height: 70vh;
    overflow-y: auto;
  }
  .main-nav.mobile-open .nav-item { width: 100%; }
  .main-nav.mobile-open .nav-link {
    padding: 0.75rem 1rem;
    justify-content: space-between;
    font-size: 0.9rem;
  }
  .main-nav.mobile-open .mega-menu,
  .main-nav.mobile-open .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    padding: 0.5rem 0 0.5rem 1.5rem;
    min-width: auto;
    display: none;
  }
  .main-nav.mobile-open .nav-item.open .mega-menu,
  .main-nav.mobile-open .nav-item.open .dropdown-menu {
    display: block;
  }
  .main-nav.mobile-open .mega-menu-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }}

@media (max-width: 768px) {
  :root {
    --space-xl: 3rem;
    --space-lg: 2rem;
  }

  .utility-bar { display: none; }
  .header-inner { min-height: 60px; }
  .brand-name { font-size: 1rem; }
  .brand-tagline { font-size: 0.62rem; }
  .brand-logo { width: 36px; height: 36px; font-size: 0.95rem; }

  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-grid > div:last-child { display: none; }

  .related-grid, .card-grid { grid-template-columns: 1fr; }
  .link-grid { grid-template-columns: 1fr; }
  .stat-row { gap: 1.5rem; }

  .form-grid { grid-template-columns: 1fr; }

  section[aria-label*="Quote"] form,
  .form-wrap form {
    padding: 1.5rem;
  }

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
  }

  .cta-band .cta-row,
  .hero .cta-row,
  .hero > .container > div > div[style*="flex"] {
    flex-direction: column;
  }
  .cta-band .btn,
  .hero .btn {
    width: 100%;
  }

  .section-heading, .display-large { text-align: left; }
}

/* Footer: ONLY collapse at 560px — desktop always 5 columns */
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .footer-brand-col { grid-column: 1 / -1; }

  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58vw;
  }
  .mobile-menu-toggle { flex-shrink: 0; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  section[aria-label*="Quote"] form { padding: 1.25rem; }
}

@media print {
  .site-header, .site-footer, .quote-band, .cta-band, .mobile-menu-toggle,
  section[aria-label*="Quote"] {
    display: none !important;
  }
  body { background: white; color: black; }
}

/* adjacent button gap */
.btn + .btn { margin-left: 0.75rem; }
/* mobile: stacked adjacent buttons need vertical gap */

@media (max-width: 640px) {
  .btn + .btn { margin-left: 0; margin-top: 0.75rem; }
}

/* ============================================================
   UI POLISH — imagery, motion, entrance reveals (S01 sample)
   ============================================================ */

/* --- Hero entrance (load-time, JS-free) --- */
.hero .hero-grid > div {
  animation: fadeUp .7s cubic-bezier(.22,.61,.36,1) both;
}
.hero .hero-grid > div:nth-child(2) { animation-delay: .18s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* --- Hero visual + floating stat cards --- */
.hero-visual {
  position: relative;
  width: 100%;
}
.hero-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255,255,255,0.14);
  transform: translateY(4px);
}
.hero-float-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 132px;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.96);
  color: var(--ink-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--violet-100);
  text-align: center;
  animation: floaty 6s ease-in-out infinite;
  backdrop-filter: blur(6px);
}
.hero-float-card.hfc-2 { animation-delay: 1.6s; }
.hfc-1 { top: 6%; left: -6%; }
.hfc-2 { bottom: 8%; right: -5%; }
.hfc-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--violet-600);
  line-height: 1;
}
.hfc-label {
  font-size: 0.72rem;
  color: var(--gray-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.hero-actions .btn { margin: 0; }

/* --- Generic framed image (used in split sections) --- */
.img-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  position: relative;
}
.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.img-frame:hover img { transform: scale(1.03); }
.img-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15,23,42,0.28));
  pointer-events: none;
}

/* --- Split two-column (media + text) --- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
}
.split.flip { grid-template-columns: 1fr 1.05fr; }
.split.flip .split-media { order: 2; }
.split-media { order: 1; }
.split-text h2 { margin-bottom: 1rem; }
.split-text ul.checks {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.75rem;
}
.split-text ul.checks li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.split-text ul.checks li::before {
  content: '\2713';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-600), var(--violet-700));
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* --- Scroll-reveal (JS-gated; visible by default without JS) --- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.22,.61,.36,1),
              transform .65s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }

/* --- Image strip (languages band) --- */
.img-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.img-strip .img-frame { height: 200px; }

/* --- Accessibility: honor reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-grid > div,
  .js .reveal,
  .hero-float-card {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html { scroll-behavior: auto; }
}

/* --- Responsive for new pieces --- */
@media (max-width: 900px) {
  .split, .split.flip { grid-template-columns: 1fr; gap: 1.5rem; }
  .split.flip .split-media { order: 1; }
  .hfc-1 { left: 2%; }
  .hfc-2 { right: 2%; }
}
@media (max-width: 768px) {
  .hero-float-card { min-width: 104px; padding: 0.7rem 0.9rem; }
  .hfc-num { font-size: 1.2rem; }
}

/* ============================================================
   FINAL FORM — Bento grid, glassmorphism, light parallax
   ============================================================ */

/* --- Bento grid (service category hub) --- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 138px;
  gap: 1.25rem;
  margin-top: 2.25rem;
}
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.3rem;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  color: var(--ink-800);
  text-decoration: none;
}
.bento-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--violet-300);
  color: var(--ink-800);
}
.bento-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--violet-500), var(--navy-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.bento-card:hover::after { transform: scaleX(1); }
.bento-card > * { position: relative; z-index: 1; }
.bento-lg   { grid-column: span 2; grid-row: span 2; }
.bento-tall { grid-row: span 2; }
.bento-wide { grid-column: span 2; }
.bento-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--violet-100), var(--violet-50));
  color: var(--violet-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 700;
  flex-shrink: 0;
}
.bento-title { font-size: 1.05rem; font-weight: 700; color: var(--ink-800); margin-top: .8rem; }
.bento-desc  { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; margin-top: .35rem; }
.bento-link  { font-size: .82rem; font-weight: 600; color: var(--violet-600); margin-top: .7rem; }
.bento-link::after { content: '\2192'; margin-left: .3rem; }

/* --- Glassmorphism band (dark, frosted cards) --- */
.glass-band {
  position: relative;
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--navy-900) 50%, var(--violet-800) 100%);
  padding: var(--section-pad) 0;
  overflow: hidden;
}
.glass-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.glass-band .container { position: relative; z-index: 1; }
.glass-band h2 { color: var(--white); text-align: center; }
.glass-band .gb-sub { color: rgba(255,255,255,0.7); text-align: center; max-width: 560px; margin: .6rem auto 0; }
.glass-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.glass-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(10,15,30,0.25);
  transition: transform .3s ease, background .3s ease;
}
.glass-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.12); }
.glass-card .gc-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.14);
  color: var(--violet-200);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700;
}
.glass-card h3 { color: var(--white); font-size: 1.05rem; margin: .8rem 0 .4rem; }
.glass-card p { color: rgba(255,255,255,0.74); font-size: .9rem; line-height: 1.65; margin: 0; }

/* --- Light parallax (JS-gated) --- */
.js [data-parallax] {
  will-change: transform;
}

/* --- Responsive for bento / glass --- */
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
  .glass-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-lg, .bento-tall, .bento-wide { grid-column: span 1; grid-row: auto; }
  .bento-card { min-height: 150px; }
}

/* --- Reduced motion also quiets bento/glass/parallax --- */
@media (prefers-reduced-motion: reduce) {
  .bento-card, .glass-card { transition: none !important; transform: none !important; }
  .js [data-parallax] { will-change: auto; }
}

/* ============================================================
   MARQUEE — continuous scrolling ticker band
   ============================================================ */
.marquee {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--navy-900) 50%, var(--violet-800) 100%);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  padding: 0.85rem 0;
  position: relative;
}
.marquee::before,
.marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 72px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink-900), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink-900), transparent); }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 0 0 auto;
  padding-right: 2rem;
}
.mq-item {
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.mq-item b { color: var(--violet-300); font-weight: 700; }
.mq-dot { color: var(--violet-500); font-size: 0.8rem; flex-shrink: 0; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ============================================================
   TESTIMONIALS — client feedback cards with avatars
   ============================================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.25rem;
}
.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--violet-300);
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 0.9rem; right: 1.35rem;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--violet-200);
  font-family: var(--font-serif);
  font-weight: 700;
  pointer-events: none;
}
.t-head { display: flex; align-items: center; gap: 0.85rem; }
.t-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1rem;
  background: linear-gradient(135deg, var(--violet-600), var(--navy-700));
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--violet-100);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.t-avatar.a2 { background: linear-gradient(135deg, var(--navy-600), var(--navy-800)); border-color: var(--navy-100); }
.t-avatar.a3 { background: linear-gradient(135deg, var(--violet-500), var(--violet-800)); border-color: var(--violet-200); }
.t-avatar.a4 { background: linear-gradient(135deg, var(--ink-700), var(--ink-900)); border-color: var(--gray-300); }
.t-avatar-img {
  width: 50px; height: 50px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--violet-100);
  flex-shrink: 0;
  display: block;
}
.t-meta { min-width: 0; }
.t-name { display: block; font-weight: 700; color: var(--ink-800); font-size: 0.98rem; }
.t-role { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.1rem; }
.testimonial-card .star-rating { font-size: 0.9rem; margin: 0; }
.testimonial-card p {
  font-size: 0.93rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   CONTENT VISUALS — process steps, category chips, choice cards
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.process-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.process-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--violet-300);
}
.p-num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--violet-500);
}
.p-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--violet-100), var(--violet-50));
  color: var(--violet-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0.9rem 0 0.7rem;
}
.process-card h3 { font-size: 1rem; color: var(--ink-800); margin-bottom: 0.35rem; }
.process-card p { font-size: 0.87rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}
.cat-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--violet-50);
  border: 1px solid var(--violet-100);
  color: var(--violet-800);
  font-size: 0.82rem; font-weight: 600;
  border-radius: var(--radius-full);
  padding: 0.45rem 0.9rem;
}
.cat-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet-500); }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.choice-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  color: var(--ink-800);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.choice-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--violet-300);
  color: var(--ink-800);
}
.choice-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--violet-100), var(--violet-50));
  color: var(--violet-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 0.9rem;
}
.choice-card h3 { font-size: 1rem; color: var(--ink-800); margin-bottom: 0.35rem; }
.choice-card p { font-size: 0.87rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 0.9rem; }
.choice-card .bento-link { margin-top: auto; }

@media (max-width: 960px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .choice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   POLISH PASS — trust strip, stats band, CTA upgrade,
   scroll helpers, rotor, page fade
   ============================================================ */

/* --- Trust / certification strip --- */
.trust-strip {
  background: var(--white);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 1.4rem 0;
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.25rem;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--gray-600);
  font-weight: 600;
  white-space: nowrap;
}
.trust-badge .tb-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--violet-50);
  color: var(--violet-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  border: 1px solid var(--violet-100);
  flex-shrink: 0;
}

/* --- Stats band --- */
.stats-band {
  background: linear-gradient(180deg, var(--violet-50), var(--white));
  border-top: 1px solid var(--border-light);
  padding: var(--space-xl) 0;
}
.stats-band .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat-item { text-align: center; }
.stat-item .stat-num {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 800;
  color: var(--violet-600);
  line-height: 1.1;
}
.stat-item .stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .stats-band .container { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}

/* --- CTA band upgrade (dark gradient + glass panel) --- */
.cta-band {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--navy-900) 50%, var(--violet-800) 100%);
  color: var(--white);
  padding: var(--section-pad) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.cta-band::after {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(83,58,253,0.22) 0%, transparent 70%);
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-xl);
  padding: 3rem 2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 48px rgba(10,15,30,0.35);
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.78); }
.cta-band .btn-ghost,
.cta-band .btn-outline {
  border-color: rgba(255,255,255,0.45);
  color: var(--white);
  background: rgba(255,255,255,0.06);
}
.cta-band .btn-ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: var(--white);
  color: var(--white);
}
@media (max-width: 640px) {
  .cta-inner { padding: 2.25rem 1.25rem; }
}

/* --- Scroll progress bar --- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--violet-500), var(--navy-500));
  z-index: 2000;
  transition: width 0.08s linear;
}

/* --- Back to top button --- */
.back-top {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 1500;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--violet-600), var(--violet-700));
  color: #fff;
  font-size: 1.15rem;
  box-shadow: var(--shadow-lg);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.back-top.show { opacity: 1; visibility: visible; transform: none; }
.back-top:hover { transform: translateY(-3px); background: linear-gradient(135deg, var(--violet-500), var(--violet-600)); }

/* --- Header shrink on scroll --- */
.site-header { transition: box-shadow .3s ease; }
.site-header.scrolled { box-shadow: var(--shadow-md); }

/* --- Hero keyword rotor --- */
.rotor { color: var(--violet-300); }
.rotor .rotor-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  white-space: nowrap;
  transition: opacity .5s ease, transform .5s ease;
}
.rotor .rotor-word.active { opacity: 1; transform: none; }

/* --- Page load fade + focus/selection/scrollbar polish --- */
.js body { animation: pageFade .45s ease; }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
::selection { background: var(--violet-200); color: var(--ink-900); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--violet-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--violet-500), var(--navy-600));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--violet-600), var(--navy-700)); }

@media (prefers-reduced-motion: reduce) {
  .js body { animation: none !important; }
  .rotor .rotor-word { transition: none !important; }
}

/* ============================================================
   BLUEPRINT ADDITIONS — process connector, industry cases,
   translator wall, FAQ, footer languages
   ============================================================ */

/* --- Process connector line --- */
.process-grid { position: relative; }
.process-grid::before {
  content: '';
  position: absolute;
  top: 46px; left: 12%; right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--violet-300) 0 9px, transparent 9px 18px);
  z-index: 0;
  pointer-events: none;
}
.process-card { position: relative; z-index: 1; }
@media (max-width: 768px) { .process-grid::before { display: none; } }

/* --- Industry cases filter --- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 2rem; }
.filter-btn {
  border: 1px solid var(--border-light);
  background: var(--white);
  color: var(--text-secondary);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
}
.filter-btn:hover { border-color: var(--violet-400); color: var(--violet-700); }
.filter-btn.active { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap-lg); }
.case-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--violet-200); }
.case-card.hide { display: none; }
.case-top { display: flex; align-items: center; justify-content: space-between; }
.case-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--violet-50); color: var(--violet-700);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.case-tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--violet-600); background: var(--violet-50); padding: 0.25rem 0.6rem; border-radius: 999px;
}
.case-card h3 { font-size: 1.05rem; color: var(--ink-900); }
.case-card p { font-size: 0.92rem; color: var(--text-muted); }
.case-result {
  font-size: 0.85rem; font-weight: 600; color: var(--navy-700);
  border-top: 1px dashed var(--border-light); padding-top: 0.7rem; margin-top: auto;
}

/* --- Translator wall --- */
.tw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--gap-lg); margin-top: 2rem; }
.tw-card {
  text-align: center; padding: 1.5rem 1rem;
  background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}
.tw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tw-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 0.9rem; border: 3px solid var(--white); box-shadow: var(--shadow-sm); }
.tw-card h4 { font-size: 0.98rem; color: var(--ink-900); margin-bottom: 0.15rem; }
.tw-card .tw-lang { font-size: 0.82rem; color: var(--text-muted); }
.iso-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin-top: 2.25rem; }
.iso-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: linear-gradient(135deg, var(--ink-900), var(--navy-900));
  color: #fff; padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem;
  box-shadow: var(--shadow-md);
}
.iso-badge .iso-note { font-weight: 500; color: rgba(255,255,255,0.72); font-size: 0.78rem; }

/* --- FAQ (native details/summary, zero JS) --- */
.faq-list { max-width: 800px; margin: 2rem auto 0; }
.faq-item {
  background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  margin-bottom: 0.9rem; overflow: hidden; transition: box-shadow var(--transition-base);
}
.faq-item[open] { box-shadow: var(--shadow-md); border-color: var(--violet-200); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.15rem 1.4rem;
  font-weight: 600; color: var(--ink-900);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--violet-600); transition: transform 0.25s ease; flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 1.4rem 1.2rem; color: var(--text-secondary); font-size: 0.95rem; }

/* --- Footer languages (SEO) + repeated switch --- */
.footer-langs { border-top: 1px solid var(--border-light); padding: 1.75rem 0 2.25rem; }
.footer-langs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.footer-langs-head h4 { font-size: 0.9rem; color: var(--ink-900); text-transform: uppercase; letter-spacing: 0.05em; }
.lang-switch { display: inline-flex; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; }
.lang-switch a { color: var(--text-muted); text-decoration: none; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid transparent; }
.lang-switch a.active { color: var(--violet-700); background: var(--violet-50); border-color: var(--violet-200); }
.footer-langs p { font-size: 0.85rem; line-height: 2; color: var(--text-muted); max-width: 1000px; }
.footer-langs p a { color: var(--text-secondary); }

/* --- Bento chips & badges (de-AI: concrete, varied content) --- */
.bento-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.chip {
  font-size: 0.74rem; font-weight: 600;
  color: var(--navy-700); background: var(--navy-50);
  border: 1px solid var(--navy-100); padding: 0.22rem 0.6rem; border-radius: 999px;
}
.bento-badges { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.b-badge {
  font-size: 0.8rem; font-weight: 800; color: #fff;
  background: var(--violet-600); padding: 0.3rem 0.8rem; border-radius: 999px;
}
.b-badge-hot { background: linear-gradient(135deg, #f43f5e, #e11d48); }

/* --- Services grid (redesigned: clean, equal-height, no truncation) --- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.svc-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.6rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--violet-500), var(--navy-500));
  opacity: 0; transition: opacity .25s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--violet-200); }
.svc-card:hover::before { opacity: 1; }
.svc-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, var(--violet-100), var(--violet-50));
  color: var(--violet-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.svc-title { font-size: 1.05rem; font-weight: 700; color: var(--ink-900); }
.svc-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; }
.svc-link { margin-top: auto; font-size: 0.85rem; font-weight: 600; color: var(--violet-600); }
.svc-link::after { content: '\2192'; margin-left: 0.3rem; display: inline-block; transition: transform .25s ease; }
.svc-card:hover .svc-link::after { transform: translateX(3px); }
@media (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .svc-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .svc-card { transition: none !important; } }


/* ===== L2 page additions: breadcrumb separator & review quote ===== */
.crumb-sep{ margin:0 .4rem; color:var(--text-muted); opacity:.75; }
.review-quote{ margin:1.6rem 0 0; padding:1.05rem 1.25rem; border-left:3px solid var(--violet-500); background:var(--bg-alt); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.review-quote p{ margin:0 0 .35rem; font-style:normal; color:var(--text-primary); }
.review-quote cite{ font-size:.82rem; color:var(--text-muted); font-style:normal; }


/* ============================================================
   S09 — BEGLAUBIGTE ÜBERSETZUNG · German Official Identity
   Distinct theme layered over the shared base system.
   Deep Prussian blue + gold "official seal" + serif display.
   Fine hairlines, restrained precision — not a SaaS clone.
   ============================================================ */
:root{
  --ink-950:#081722; --ink-900:#0b1f33; --ink-800:#0e2740; --ink-700:#12324f; --ink-600:#16405f;
  --navy-900:#081d33; --navy-800:#0a2440; --navy-700:#0c3a63; --navy-600:#0e4a7d; --navy-500:#1a5a92;
  --violet-900:#10304f; --violet-800:#143a5f; --violet-700:#1a4672; --violet-600:#1f5486; --violet-500:#2a65a0;
  --violet-400:#4c82b7; --violet-300:#7fa6cf; --violet-200:#b9cfe6; --violet-100:#dde9f2; --violet-50:#eef4f9;
  --gold:#b08d2f; --gold-strong:#99781f; --gold-soft:#cdb063; --gold-pale:#eadfc0;
  --bg-body:#f6f2e9; --bg-alt:#eef3f8; --bg-section:#ffffff;
  --text-primary:#1a2631; --text-secondary:#47586a; --text-muted:#6b7a88;
  --border-color:#e3dccb; --border-light:#efe9db;
  --success:#1f6f3f;
  --shadow-violet:0 4px 14px rgba(31,84,134,.28);
  --shadow-ink:0 4px 14px rgba(11,31,51,.22);
  --radius-md:6px; --radius-lg:10px; --radius-xl:16px;
}

/* Serif display headings, clean sans body */
body{font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-body);}
h1,h2,h3,h4,h5,
.section-heading,.eyebrow,.hero h1,.quote-band h2,.cta-band h2,
.hero-float-card .hfc-num,.hfc-label{font-family:var(--font-serif);}
.section-heading{letter-spacing:-0.01em;}

/* Eyebrow: serif small-caps gold with a fine rule */
.eyebrow{font-family:var(--font-serif);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-strong);font-weight:600;display:inline-flex;align-items:center;gap:.6rem;}
.eyebrow::before{content:'';width:1.7rem;height:2px;background:linear-gradient(90deg,var(--gold-strong),var(--gold-soft));display:inline-block;}
.section-alt .eyebrow::before,.section .eyebrow::before{background:linear-gradient(90deg,var(--gold-strong),var(--gold-soft));}

/* Hairline rule under section headings — official document feel */
.section-heading{position:relative;padding-bottom:.9rem;}
.section-heading::after{content:'';position:absolute;left:0;bottom:0;width:3rem;height:2px;background:var(--gold);}
.section-heading{text-align:center;}
.section-heading::after{left:50%;transform:translateX(-50%);}

/* Breadcrumb: serif, gold separators */
.breadcrumb{font-family:var(--font-serif);font-size:.86rem;color:var(--text-muted);}
.breadcrumb a{color:var(--violet-700);}
.breadcrumb .crumb-sep{color:var(--gold);}

/* Hero: Prussian gradient with a fine double border frame + seal */
.hero{background:linear-gradient(150deg,#0a1d33 0%,#0e2c4d 55%,#123a63 100%);position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:14px;border:1px solid rgba(211,176,99,.22);pointer-events:none;}
.hero .eyebrow{color:var(--gold-soft);}
.hero .eyebrow::before{background:linear-gradient(90deg,var(--gold-soft),var(--gold-pale));}
.hero h1{color:#fff;}
.hero .body-lg{color:rgba(238,244,249,.88);}
.hero-actions .btn-primary{background:var(--gold-strong);color:#fff;box-shadow:0 6px 18px rgba(153,120,31,.35);border:1px solid var(--gold-soft);}
.hero-actions .btn-primary:hover{background:var(--gold);}
.hero-actions .btn-white{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:none;}
.hero-actions .btn-white:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.65);}

/* Official seal motif on hero visual */
.hero-visual{position:relative;}
.hero-visual .img-frame-seal{position:absolute;top:-2.2rem;left:-2.2rem;width:6.2rem;height:6.2rem;border-radius:50%;
  border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(10,29,51,.4),0 0 0 5px var(--gold);z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;background:rgba(10,29,51,.86);}
.hero-visual .img-frame-seal::after{content:'BEGLAUBIGT';font-family:var(--font-serif);font-size:.5rem;letter-spacing:.18em;color:var(--gold-soft);}
.hero-visual .img-frame-seal b{font-family:var(--font-serif);font-size:1.05rem;color:var(--gold);line-height:1;}

/* Trust bar & badges: gold checks on dark */
.trust-bar .trust-item{color:rgba(238,244,249,.92);font-size:.9rem;}
.trust-icon{color:var(--gold-soft);}
.trust-strip{background:#0b2036;border-top:1px solid rgba(211,176,99,.25);}
.trust-badge{color:rgba(238,244,249,.9);}
.tb-icon{color:var(--gold-soft);}

/* Buttons: refined blue primary with subtle gold edge */
.btn-primary{background:var(--violet-700);color:#fff;border:1px solid var(--violet-600);box-shadow:0 4px 14px rgba(31,84,134,.28);}
.btn-primary:hover{background:var(--violet-600);}
.btn{font-family:var(--font-sans);}

/* Cards: fine border, paper surface, serif titles, gold tag */
.card{background:var(--bg-section);border:1px solid var(--border-color);border-radius:var(--radius-lg);
  box-shadow:0 1px 0 rgba(26,38,49,.03);position:relative;transition:var(--transition-base);}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--gold-soft);transform:translateY(-3px);}
.card h3{font-family:var(--font-serif);color:var(--ink-800);}
.case-icon{color:var(--gold-strong);}
.svc-link{color:var(--violet-600);font-weight:600;}

/* Card image: real image at top of card */
.card .card-img{
  width: 100%;
  height: 140px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: 0 0 1.25rem;
  background: var(--violet-50);
}
.card .card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.card:hover .card-img img{
  transform: scale(1.05);
}
/* Adjust card padding when it has an image (remove top padding) */
.card:has(.card-img){
  padding-top: 0;
}

/* Split media: fine official frame */
.img-frame{position:relative;border-radius:var(--radius-lg);padding:8px;background:#fff;border:1px solid var(--border-color);box-shadow:var(--shadow-md);}
.img-frame img{border-radius:calc(var(--radius-lg) - 5px);}

/* ISO badges: bordered seal-style */
.iso-badge{background:var(--bg-section);border:1px solid var(--gold-soft);color:var(--ink-800);border-radius:var(--radius-md);}
.iso-note{color:var(--text-muted);}
.iso-row{}

/* Quote form: paper card, serif labels, gold button */
.quote-band{background:linear-gradient(150deg,#081d33 0%,#0c2b4b 60%,#123a63 100%);}
.quote-band::before{background:radial-gradient(ellipse,rgba(211,176,99,.14) 0%,transparent 70%);}
.quote-band form{background:#fbf8f1;border:1px solid var(--gold-pale);border-radius:var(--radius-xl);}
.quote-band form label{font-family:var(--font-serif);font-weight:600;color:var(--ink-800);}
.quote-band form .btn-primary{background:var(--gold-strong);border-color:var(--gold-strong);}
.quote-band form .btn-primary:hover{background:var(--gold);}
.file-field .file-btn{background:var(--violet-700);color:#fff;}
.file-field .file-btn:hover{background:var(--violet-600);}

/* FAQ: bordered items, gold marker */
.faq-item{border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-section);}
.faq-item summary{font-family:var(--font-serif);font-weight:600;color:var(--ink-800);}
.faq-item summary::before{color:var(--gold-strong);}

/* CTA band: Prussian with gold */
.cta-band{background:linear-gradient(150deg,#0a1d33 0%,#0e2c4d 55%,#123a63 100%);}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(238,244,249,.85);}
.cta-band .btn-primary{background:var(--gold-strong);border-color:var(--gold-soft);}
.cta-band .btn-primary:hover{background:var(--gold);}
.cta-band .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.05);}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.14);}

/* Links grid */
.link-grid a{color:var(--violet-700);font-weight:500;}
.link-grid a::before{color:var(--gold-strong);}

/* Review quote */
.review-quote{border-left:3px solid var(--gold);background:var(--bg-alt);color:var(--text-primary);}
.review-quote cite{color:var(--text-muted);}

/* Footer / header bleed into base — ensure Prussian on dark surfaces */

/* S09 compat + process module */
.page-hero{padding:var(--space-lg) 0;background:var(--bg-body);}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:50%;border:2px solid var(--gold);color:var(--gold-strong);font-family:var(--font-serif);font-weight:700;font-size:1rem;margin-bottom:.7rem;background:var(--gold-pale);}

/* ============================================================
   S09 — Layout polish (ported from S01, kept German-official palette)
   Headings left / content centered / cards fill / compact form / button space
   ============================================================ */
/* Headings left, content centered */
.section-heading, .eyebrow{ text-align: left; }
.lead, .section-heading + p, p.lead{ margin-left: auto; margin-right: auto; }
.card-grid{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .card-grid{ grid-template-columns: 1fr; } }

/* Button breathing room after text/checklist in split sections */
.split-text ul.checks + .btn, .split-text p + .btn, .split-text .btn{ margin-top: 2.5rem; }

/* Compact form — Name+Email side by side, navy/gold */
.quote-band form.ft-form, .form-wrap form.ft-form{
  max-width: 560px; padding: 1.1rem 1.25rem 1.2rem; border-radius: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .85rem;
  align-items: stretch; text-align: left; margin: 0 auto;
}
.quote-band form.ft-form > *:nth-child(1){ grid-area: 1/1; }
.quote-band form.ft-form > *:nth-child(2){ grid-area: 2/1; }
.quote-band form.ft-form > *:nth-child(3){ grid-area: 1/2; }
.quote-band form.ft-form > *:nth-child(4){ grid-area: 2/2; }
.quote-band form.ft-form > *:nth-child(n+5){ grid-column: 1/-1; }
.quote-band form.ft-form label, .form-wrap form.ft-form label{
  align-self: end; text-align: left; font-size: .8rem; font-weight: 600; color: var(--ink-700); margin: 0; padding: 0;
}
.quote-band form.ft-form input, .quote-band form.ft-form textarea,
.quote-band form.ft-form select, .form-wrap form.ft-form input,
.form-wrap form.ft-form textarea, .form-wrap form.ft-form select{
  width: 100%; padding: .5rem .7rem; font-size: .9rem; border-radius: 8px;
  border: 1px solid var(--border-color); background: #fff; color: var(--ink-900);
}
.quote-band form.ft-form textarea, .form-wrap form.ft-form textarea{ min-height: 3.2rem; resize: vertical; }
.quote-band form.ft-form .file-field, .form-wrap form.ft-form .file-field{
  display: flex; align-items: center; justify-content: flex-start; gap: .6rem; padding: .42rem .7rem;
  border: 1px dashed var(--gold); border-radius: 8px; background: #fbfaf4;
}
.quote-band form.ft-form .file-btn, .form-wrap form.ft-form .file-btn{
  background: var(--gold); color: #fff; padding: .4rem .85rem; border-radius: 6px;
  font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.quote-band form.ft-form button, .form-wrap form.ft-form button{
  grid-column: 1/-1; margin-top: .25rem; padding: .62rem 1rem; font-size: .92rem; border-radius: 8px; width: 100%;
}

/* S09 — per-page accent (--pg-acc set inline on .hero), navy/gold-consistent */
.hero { --pg-acc: #b08d2f; }
.hero .eyebrow { color: var(--pg-acc); }
.hero .img-frame-seal { box-shadow: 0 0 0 2px var(--pg-acc); }
.hero-float-card.hfc-1 .hfc-num, .hero-float-card.hfc-2 .hfc-num { color: var(--pg-acc); }

/* ============================================================
   S09 — German Official Archive style
   Distinct skeleton from S01: rectilinear, serif-led, document/seal
   aesthetic on ivory "paper" with hairline gold rules.
   ============================================================ */
:root {
  --bg-body: #f6f4ec;
  --bg-alt: #efe9da;
  --bg-section: #fdfcf7;
  --text-primary: #14213a;
  --text-secondary: #2c3a54;
  --text-muted: #5b6472;
  --border-color: #c8c2b0;
  --border-light: #ddd8c8;
  --radius-lg: 2px;
  --radius-md: 2px;
  --radius-xl: 3px;
  --radius-sm: 2px;
  --radius-xs: 1px;
  --gold-deep: #99781f;
  --gold-hair: #c9a94e;
  --paper-line: rgba(11, 31, 58, 0.14);
}
body { background: var(--bg-body); color: var(--text-secondary); }

/* --- Serif-led typography (official print) --- */
h1, h2, h3, h4, .section-heading, .hero h1, .stat-num, .hero-float-card .hfc-num,
.cta-band h2, .quote-band h2, footer h4 {
  font-family: var(--font-serif) !important;
  letter-spacing: -0.01em;
  color: #14213a;
}
.section-heading { color: #14213a !important; }

/* --- Eyebrow: gold-stamp label --- */
.eyebrow {
  font-family: var(--font-serif) !important;
  color: var(--gold-deep) !important;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  font-weight: 600;
}
.hero .eyebrow { color: var(--gold-hair) !important; }

/* --- Hairline double-rule section dividers --- */
.section, .section.alt { position: relative; background: var(--bg-section); }
.section.alt { background: var(--bg-alt); }
.section::after, .section.alt::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; width: min(96%, 1200px); height: 0;
  border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--gold-hair);
}
.section:last-of-type::after, .section.alt:last-of-type::after { display: none; }

/* --- Hero: official certificate announcement --- */
.hero {
  background: #0b1f3a !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px) !important;
  background-size: 34px 34px !important;
  color: #f5f1e6;
  border-bottom: 3px solid var(--gold-hair);
}
.hero h1 { color: #f5f1e6; }
.hero .body-lg { color: #cfd3dc; }
.hero .hero-visual .img-frame-seal {
  box-shadow: 0 0 0 2px var(--pg-acc, var(--gold-hair)), 0 0 0 4px #0b1f3a, 0 0 0 5px var(--gold-hair);
}
.hero-float-card { background: #f6f4ec; border: 1px solid var(--gold-hair); border-radius: 2px; }
.hero-float-card .hfc-num { color: var(--gold-deep); }
.hero-float-card .hfc-label { color: #14213a; }

/* --- Buttons: rectilinear, letter-spaced --- */
.btn {
  border-radius: 2px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-serif) !important;
  box-shadow: none !important;
}
.btn-primary { background: var(--gold-deep) !important; color: #fff !important; }
.btn-primary:hover { background: #7f6517 !important; }
.btn-white { background: #14213a !important; color: #fff !important; border: 1px solid var(--gold-hair); }
.btn-ghost { background: transparent !important; color: var(--gold-deep) !important; border: 1px solid var(--gold-deep); }
.hero .btn-primary { background: var(--gold-hair) !important; color: #14213a !important; }

/* --- Archive file cards --- */
.card {
  background: #fdfcf7;
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--gold-deep);
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 1.6rem 1.4rem 1.4rem;
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--gold-deep); }
.card h3 { color: #14213a; }
.card .case-icon { color: var(--gold-deep); }

/* --- Trust strip: stamped seals --- */
.trust-strip { background: #14213a; border-bottom: 1px solid var(--gold-hair); }
.trust-badge { border: 1px solid rgba(201,169,78,0.45); border-radius: 2px; background: rgba(201,169,78,0.08); }
.trust-badge .tb-icon { color: var(--gold-hair); }

/* --- Stats band: ledger dividers --- */
.stats-band { background: #0b1f3a; border-top: 1px solid var(--gold-hair); border-bottom: 1px solid var(--gold-hair); }
.stats-grid .stat { border-left: 1px solid var(--gold-hair); }
.stats-grid .stat:first-child { border-left: none; }
.stat-num { color: var(--gold-hair) !important; }
.stat-label { color: #cfd3dc; }

/* --- Image frames: double hairline --- */
.img-frame {
  border-radius: 2px !important;
  border: 1px solid var(--border-color);
  box-shadow: none !important;
  position: relative;
  background: #fdfcf7;
}
.img-frame::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(11,31,58,0.25);
}

/* --- ISO row: official badges --- */
.iso-row { border: 1px solid var(--border-color); border-radius: 2px; padding: 0.7rem 1rem; }
.iso-badge { font-family: var(--font-serif) !important; }
.iso-badge .iso-note { color: var(--text-muted); }

/* --- FAQ: hairline ledgers --- */
.faq-item { border: 1px solid var(--border-color) !important; border-left: 3px solid var(--gold-deep) !important; border-radius: 2px !important; background: #fdfcf7 !important; box-shadow: none !important; }
.faq-item summary { font-family: var(--font-serif) !important; color: #14213a; }

/* --- Quote form: official ledger form --- */
.quote-band { background: #0b1f3a !important; border-top: 3px solid var(--gold-hair); border-bottom: 3px solid var(--gold-hair); }
.quote-band h2 { color: #f5f1e6; }
.quote-band p { color: #cfd3dc; }
.quote-band form.ft-form, .form-wrap form.ft-form {
  background: #fdfcf7 !important;
  border: 1px solid var(--gold-hair);
  box-shadow: none !important;
  border-radius: 2px;
}
.quote-band form.ft-form input, .quote-band form.ft-form textarea,
.quote-band form.ft-form select, .form-wrap form.ft-form input,
.form-wrap form.ft-form textarea, .form-wrap form.ft-form select {
  border: 1px solid #c8c2b0 !important;
  border-radius: 2px !important;
  background: #fff !important;
}
.quote-band form.ft-form input:focus, .quote-band form.ft-form textarea:focus,
.form-wrap form.ft-form input:focus, .form-wrap form.ft-form textarea:focus {
  border-color: var(--gold-deep) !important; outline: 1px solid var(--gold-deep);
}
.quote-band form.ft-form .file-field, .form-wrap form.ft-form .file-field {
  border: 1px dashed var(--gold-deep) !important;
  border-radius: 2px;
  background: #f6f1e2;
}
.quote-band form.ft-form button, .form-wrap form.ft-form button { border-radius: 2px !important; }
.quote-band form.ft-form label, .form-wrap form.ft-form label { color: #14213a !important; }

/* --- Review quote: official citation --- */
.review-quote { border-left: 3px solid var(--gold-deep) !important; border-radius: 0 !important; background: #f6f1e2 !important; }
.review-quote p { font-family: var(--font-serif) !important; font-style: italic; color: #2c3a54; }

/* --- CTA band --- */
.cta-band { background: #14213a !important; border-top: 3px solid var(--gold-hair); }
.cta-band h2 { color: #f5f1e6; }
.cta-band p { color: #cfd3dc; }

/* --- Breadcrumb: serif gold separators --- */
.breadcrumb { font-family: var(--font-serif) !important; }
.breadcrumb a { color: #14213a; }
.breadcrumb .crumb-sep { color: var(--gold-deep); }
.breadcrumb [aria-current="page"] { color: var(--gold-deep); }

/* --- Link grid --- */
.link-grid a { border: 1px solid var(--border-color) !important; border-radius: 2px !important; background: #fdfcf7 !important; }
.link-grid a:hover { border-color: var(--gold-deep) !important; color: var(--gold-deep) !important; }

/* --- Checks: official marks --- */
ul.checks li::before { color: var(--gold-deep) !important; }

/* --- Footer --- */
footer { background: #0b1f3a !important; border-top: 3px solid var(--gold-hair); }
footer h4 { color: #f5f1e6; }
footer a, footer li { color: #cfd3dc; }
footer .footer-grid { border-color: rgba(201,169,78,0.3); }

/* ===== S09 Gallery & Spec (ink + navy + violet) ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:1.5rem;}
.gallery-card{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,var(--navy-100,#e0f2fe),var(--navy-50,#f0f9ff));border:1px solid var(--navy-100,#e0f2fe);min-height:170px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .3s ease,box-shadow .3s ease;}
.gallery-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(13,94,138,.16);}
.gallery-visual{flex:1;display:flex;align-items:center;justify-content:center;padding:1rem;}
.gallery-visual .doc-icon{width:72px;height:88px;border-radius:6px;background:#fff;border:1px solid var(--navy-100,#e0f2fe);box-shadow:0 6px 16px rgba(13,94,138,.12);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--violet-600,#533afd);}
.gallery-caption{background:rgba(255,255,255,.92);backdrop-filter:blur(4px);padding:.85rem 1rem;font-size:.92rem;font-weight:700;color:var(--ink-900,#0f172a);border-top:1px solid var(--navy-100,#e0f2fe);}
.gallery-caption small{display:block;font-weight:500;color:var(--ink-600,#475569);margin-top:2px;}
.spec-table-wrap{margin-top:1.5rem;border-radius:16px;overflow:hidden;border:1px solid var(--navy-100,#e0f2fe);}
.spec-table{width:100%;border-collapse:collapse;font-size:.95rem;}
.spec-table th{background:linear-gradient(135deg,var(--ink-800,#131d35),var(--navy-700,#0d5e8a));color:#fff;text-align:left;padding:.85rem 1.25rem;font-weight:700;}
.spec-table td{padding:.8rem 1.25rem;border-top:1px solid var(--navy-100,#e0f2fe);vertical-align:top;}
.spec-table tbody tr:nth-child(odd){background:var(--navy-50,#f0f9ff);}
.spec-table tbody tr:nth-child(even){background:#fff;}
.spec-table td:first-child{font-weight:700;color:var(--ink-900,#0f172a);width:34%;}
.spec-table td:last-child{color:var(--ink-700,#334155);}
.spec-table .spec-val-gold{color:var(--violet-600,#533afd);font-weight:700;}
@media(max-width:600px){.spec-table th,.spec-table td{padding:.7rem .9rem;}}

/* ============================================================
   S09 — Premium polish (ported from S02, kept S09 ink+navy+violet)
   ============================================================ */
/* CTA breakpoint fix: only hide header CTA on narrow screens */
@media (max-width: 720px) {
  .site-header .header-cta .btn { display: none; }
}

/* adjacent button gap */
.btn + .btn { margin-left: 0.75rem; }
@media (max-width: 640px) {
  .btn + .btn { margin-left: 0; margin-top: 0.75rem; }
}

/* Titles left / grids filled / compact form */
.section-title { text-align: left; }

/* Fill card grids */
.card-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 1080px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .card-grid { grid-template-columns: 1fr; } }

/* Fill link grids */
.link-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .link-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .link-grid { grid-template-columns: 1fr; } }

/* Compact centered form */
.form-wrap { max-width: 640px; padding: 1.75rem 1.9rem; margin-left: auto; margin-right: auto; }
.form-wrap label { font-size: 0.85rem; font-weight: 600; }
.form-wrap input, .form-wrap select, .form-wrap textarea { padding: 0.55rem 0.8rem; font-size: 0.92rem; border-radius: 6px; }
.form-wrap button { margin-top: 0.4rem; }
.form-note { text-align: center; }

/* Button breathing room */
.hero .cta-row, .cta-band .cta-row, .quote-band .cta-row { margin-top: 1.5rem; gap: 0.9rem; }
.quote-band .section-title, .section .section-title { margin-bottom: 0.9rem; }

/* Hero: layered navy gradient + violet glow + bottom accent */
.hero, .screen--hero, .page-hero {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(124,58,237,0.10), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(14,116,144,0.16), transparent 55%),
    linear-gradient(160deg, var(--navy-50) 0%, #ffffff 42%, var(--navy-50) 100%);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}
.hero::after, .screen--hero::after, .page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--violet-500), var(--violet-300), transparent);
  opacity: 0.7;
}
.hero h1, .hero h2, .screen--hero h1, .screen--hero h2, .page-hero .ph-title {
  background: linear-gradient(120deg, var(--ink-900), var(--navy-700) 70%, var(--violet-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ink-900);
}
.hero .lead, .screen--hero .lead { color: var(--text-secondary); }

/* Cards: soft depth + hover lift */
.card {
  box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.06);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-xl); transform: translateY(-6px); border-color: var(--navy-100); }
.card .card-link { display: inline-block; margin-top: 0.6rem; font-size: 0.85rem; font-weight: 700; color: var(--violet-600); text-decoration: none; }
.card .card-link:hover { text-decoration: underline; }

/* Process cards */
.process-card {
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 6px 18px rgba(15,23,42,0.05);
  border-top: 3px solid var(--violet-500);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-top-color var(--transition-base);
}
.process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-top-color: var(--violet-600); }
.p-num { color: var(--violet-600); }

/* Testimonial cards */
.testimonial-card {
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 6px 18px rgba(15,23,42,0.05);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.t-avatar { background: linear-gradient(135deg, var(--ink-800), var(--navy-700)); color: var(--violet-500); }
.star-rating { color: var(--violet-500); }

/* Form focus */
.form-wrap {
  box-shadow: 0 2px 10px rgba(15,23,42,0.05), 0 12px 40px rgba(15,23,42,0.07);
  border: 1px solid var(--border-light);
}
.form-wrap input:focus, .form-wrap select:focus, .form-wrap textarea:focus {
  border-color: var(--violet-500);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
  outline: none;
}
.form-wrap button { width: 100%; }

/* FAQ refined */
.faq-item { transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.faq-item:hover { border-color: var(--navy-100); box-shadow: var(--shadow-sm); }
.faq-item[open] { border-color: var(--violet-300); box-shadow: 0 2px 8px rgba(124,58,237,0.08); }
.faq-item summary::after { color: var(--violet-600); }

/* CTA band */
.cta-band {
  background:
    radial-gradient(700px 260px at 15% 20%, rgba(124,58,237,0.10), transparent 60%),
    linear-gradient(135deg, var(--ink-900), var(--navy-800) 60%, var(--navy-700));
  color: var(--white);
  border-top: 3px solid var(--violet-500);
}
.cta-band h2, .cta-band p { color: var(--white); }

/* Feature strip */
.feature-strip .ft-item::before { color: var(--violet-600); }
.ft-item b { color: var(--ink-900); }

/* ============================================================
   S09 — CTA banner (ink + navy + violet) for S02-parity
   ============================================================ */
.cta-banner { background:
  radial-gradient(700px 260px at 15% 20%, rgba(124,58,237,0.10), transparent 60%),
  linear-gradient(135deg, var(--ink-900), var(--navy-800) 60%, var(--navy-700));
  color: #fff; padding: 3rem 0; text-align: center; position: relative; overflow: hidden; }
.cta-banner::before { content:''; position:absolute; top:0;left:0;right:0;bottom:0;
  background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:40px 40px; }
.cta-banner .container { position:relative; z-index:1; }
.cta-banner h2 { color:#fff; margin-bottom:0.5rem; }
.cta-banner p { color:rgba(255,255,255,0.8); max-width:560px; margin:0 auto 1.5rem; }

/* --- cookie consent banner --- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;background:var(--c-header,#16324f);color:#fff;border-radius:10px;box-shadow:0 8px 30px rgba(10,26,51,.18);}
.cookie-banner .cb-inner{max-width:960px;margin:0 auto;padding:14px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie-banner p{margin:0;font-size:.92rem}
.cookie-banner a{color:#fff;text-decoration:underline}
.cookie-banner .cb-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner .btn-sm{padding:8px 16px;font-size:.9rem;border-radius:6px;cursor:pointer}
.cookie-banner .btn-primary{background:var(--c-accent,#c8102e);border:none;color:#fff}
.cookie-banner .btn-outline{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff}
.cookie-banner[hidden]{display:none}
/* ============================================================
   S09 regen — menu & hero visual fixes (appended last, wins cascade)
   1) Hero headline: force light ivory color on navy hero (fix dark-on-dark)
   2) Header layout: keep CTA buttons from overlapping nav items
   3) Brand placeholder cleanup is content-side (see engine6)
   ============================================================ */
.hero h1,
.hero .display-hero,
.screen--hero h1,
.page-hero .ph-title {
  color: #f5f1e6 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #f5f1e6 !important;
}
.hero .eyebrow { color: var(--gold-hair, #c9a94e) !important; }
.hero p, .hero .lead, .hero .body-lg { color: rgba(245, 241, 230, 0.92) !important; }

/* header inner: prevent CTA crowding */
.header-inner { display: flex; align-items: center; gap: 1.25rem; }
.header-inner .header-cta { display: flex; gap: 0.6rem; margin-left: auto; flex-shrink: 0; }
.header-inner .main-nav { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1400px)}@media (max-width:860px){
  .header-inner .header-cta { display: none; }}

/* ============================================================
   S09 regen — final polish (round 2)
   1) header brand placeholder overflow: keep header single-line, truncate brand text
   2) hero h1: prevent mid-word break (overflow-wrap anywhere was too aggressive)
   3) duplicated CTA ghost: ensure .btn white-space nowrap
   ============================================================ */
html, body { overflow-wrap: normal; }
h1, h2, h3, .hero h1 { overflow-wrap: normal; word-break: normal; hyphens: manual; }

.header-inner .brand { flex-shrink: 0; max-width: 300px; overflow: hidden; }
.header-inner .brand-name {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.95rem; font-weight: 700;
}
.header-inner .btn { white-space: nowrap; }

/* keep mega menu trigger labels on one line */
.main-nav .nav-link { white-space: nowrap; }


/* --- S09 regen: vx-badges chip styling (was run-together) --- */
.vx-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vx-badges span{font-size:10px;letter-spacing:.07em;text-transform:uppercase;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 12px;color:rgba(255,255,255,.95);background:rgba(255,255,255,.08);display:inline-flex;align-items:center;gap:6px}
.trust-strip-inner{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.trust-badge{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* ===== S09 补齐模块（DE navy+violet） ===== */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.metric{border:1px solid rgba(10,15,30,.1);border-top:3px solid #533afd;background:#fff;padding:20px;text-align:center}
.metric .m-num{font-size:30px;font-weight:800;color:#533afd;line-height:1.1}
.metric .m-label{font-size:13px;color:#475569;margin-top:6px}
.live-chat{position:fixed;left:22px;bottom:26px;z-index:900;display:flex;flex-direction:column;gap:10px}
.lc-btn{width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.lc-wa{background:#25d366}
.lc-chat{background:linear-gradient(135deg,#0d2847,#533afd)}
.chatpop{position:fixed;left:22px;bottom:92px;z-index:950;width:300px;background:#fff;border:1px solid rgba(10,15,30,.1);border-top:4px solid #533afd;border-radius:12px;padding:20px;display:none;box-shadow:0 12px 30px rgba(10,15,30,.2)}
.chatpop.open{display:block}
.chatpop h4{margin:0 0 6px;color:#0b1f3a}
.chatpop p{margin:0 0 12px;font-size:13px;color:#475569}
.chatpop input,.chatpop textarea{width:100%;box-sizing:border-box;padding:11px;border:1px solid rgba(10,15,30,.15);border-radius:8px;margin-bottom:10px;font-size:14px}
.chatpop .btn{width:100%}
.back-to-top{position:fixed;right:22px;bottom:26px;width:46px;height:46px;border-radius:50%;background:#0b1f3a;color:#fff;border:1px solid #533afd;cursor:pointer;font-size:20px;z-index:900;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.3s;box-shadow:0 4px 14px rgba(11,31,58,.35)}
.back-to-top.show{opacity:1;pointer-events:auto}

/* ===== MODULE COMPLETION LAYER (Plan-A 2026-09-16) ===== */
.lx-testimonials .testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial-card{background:#fff;border:1px solid #e3e9f2;border-top:3px solid #2563eb;border-radius:12px;padding:20px}
.testimonial-card .t-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.t-avatar{width:40px;height:40px;border-radius:50%;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.t-name{display:block;font-weight:700;color:#0f172a;font-size:14px}
.t-role{display:block;color:#64748b;font-size:12.5px}
.star-rating{color:#f5a623;letter-spacing:2px;margin-bottom:6px}
.testimonial-card p{color:#475569;font-size:13.5px;margin:0}
.lx-pullquote .pull-quote{margin:0;padding:26px 30px;border-left:4px solid #2563eb;background:#f8fafc;border-radius:0 12px 12px 0}
.pull-quote p{font-size:19px;color:#0f172a;font-weight:600;margin:0 0 8px}
.pull-quote cite{color:#64748b;font-style:normal;font-size:13px}
.lx-metrics .metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.metric-card{background:linear-gradient(135deg,#0f172a,#1d3d6b);color:#fff;border-radius:12px;padding:18px;text-align:center}
.metric-num{font-size:26px;font-weight:800;color:#ffd9a8}
.metric-label{font-size:12.5px;opacity:.85;margin-top:4px}
.lx-gallery .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-item{margin:0}
.g-ph{height:150px;border-radius:10px;background:linear-gradient(135deg,#dbe4f0,#b9c9de)}
.g-ph.g2{background:linear-gradient(135deg,#f7e3d8,#eeceb9)}.g-ph.g3{background:linear-gradient(135deg,#e2e8f0,#cbd5e1)}
.gallery-item figcaption{font-size:12.5px;color:#64748b;margin-top:6px}
.lx-baseinfo .baseinfo-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:#f8fafc;border:1px solid #e3e9f2;border-radius:12px;padding:16px}
.bi-k{display:block;font-size:11.5px;text-transform:uppercase;color:#64748b;letter-spacing:.5px}
.bi-v{display:block;font-weight:700;color:#0f172a;font-size:14px;margin-top:2px}
.lx-tabs .tab-bar{display:flex;gap:8px;margin-bottom:12px}
.tab-btn{border:1px solid #dbe2ee;background:#fff;color:#0f172a;padding:8px 16px;border-radius:20px;cursor:pointer;font-size:13.5px}
.tab-btn.active{background:#0f172a;color:#fff;border-color:#0f172a}
.tab-panel{display:none;background:#fff;border:1px solid #e3e9f2;border-radius:12px;padding:18px;color:#475569;font-size:14px}
.tab-panel.active{display:block}
.lx-custom .custom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.custom-opt{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid #e3e9f2;border-radius:10px;padding:12px 14px;font-size:13.5px;color:#0f172a}
.lx-pricing .tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tier-card{position:relative;background:#fff;border:1px solid #e3e9f2;border-radius:14px;padding:22px;text-align:center}
.tier-card.featured{border-color:#2563eb;box-shadow:0 10px 30px rgba(0,0,0,.10)}
.tier-card h3{color:#0f172a;margin:0 0 6px}
.tier-price{font-size:30px;font-weight:800;color:#2563eb}
.tier-price span{font-size:13px;color:#64748b;font-weight:400}
.tier-card ul{list-style:none;padding:0;margin:12px 0 16px;color:#475569;font-size:13px}
.tier-card ul li{padding:5px 0;border-bottom:1px dashed #eef2f7}
.lx-compare .compare-wrap{overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;font-size:13.5px}
.compare-table th,.compare-table td{border:1px solid #e3e9f2;padding:10px 12px;text-align:left}
.compare-table th{background:#0f172a;color:#fff}
.compare-table td:first-child{font-weight:600;color:#0f172a}
.lx-demo .demo-box{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:center;background:#fff;border:1px solid #e3e9f2;border-radius:14px;padding:22px}
.demo-screen{background:#f1f5f9;border-radius:10px;padding:18px;min-height:150px}
.demo-line{height:10px;border-radius:5px;background:#cbd5e1;margin:8px 0}
.demo-line.w60{width:60%}.demo-line.w80{width:80%}.demo-line.w40{width:40%}
.demo-cta{margin-top:10px;font-size:12px;color:#2563eb;font-weight:700}
.demo-copy h3{color:#0f172a;margin:0 0 8px}.demo-copy p{color:#475569;font-size:13.5px}
.lx-countdown .cd-box{display:flex;justify-content:space-between;align-items:center;background:#fdf1ec;border:1px solid #f3c9ba;border-radius:12px;padding:14px 18px}
.cd-label{color:#0f172a;font-weight:600;font-size:14px}
.cd-timer{color:#2563eb;font-weight:700;font-size:14px}
.lx-casecards .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case-card{background:#fff;border:1px solid #e3e9f2;border-top:3px solid #0f172a;border-radius:12px;padding:18px}
.case-card h3{color:#0f172a;font-size:15.5px;margin:8px 0 6px}
.case-card p{color:#64748b;font-size:13px;margin:0}
.lx-casedetail .cd-card{background:#fff;border:1px solid #e3e9f2;border-radius:14px;padding:22px}
.cd-meta{color:#2563eb;font-size:12.5px;font-weight:700;margin:6px 0 10px}
.lx-team .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.team-card{text-align:center;background:#fff;border:1px solid #e3e9f2;border-radius:12px;padding:18px}
.team-card img{width:84px;height:84px;border-radius:50%;object-fit:cover}
.team-card h3{color:#0f172a;margin:10px 0 2px;font-size:15px}
.team-card p{color:#64748b;font-size:12.5px;margin:0}
.lx-requestdemo .rd-box{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(135deg,#0f172a,#1d3d6b);border-radius:14px;padding:22px 26px;color:#fff}
.rd-box h3{margin:0 0 4px;color:#fff}.rd-box p{margin:0;opacity:.85;font-size:13.5px}
.rd-box a.calendar-book{color:#ffd9a8;font-size:13px}
.lx-toc{background:#f8fafc;border-bottom:1px solid #e3e9f2;padding:10px 0}
.toc-title{font-weight:700;color:#0f172a;font-size:13px;margin-right:10px}
.lx-toc ol{display:inline;list-style:none;margin:0;padding:0}
.lx-toc li{display:inline;margin-right:14px;font-size:13px}
.lx-toc a{color:#2563eb;text-decoration:none}
.lx-dl .dl-box{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:2px dashed #2563eb;border-radius:14px;padding:20px 24px}
.dl-box h3{color:#0f172a;margin:0 0 4px}.dl-box p{margin:0;color:#64748b;font-size:13.5px}
.lx-blog .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.blog-card{background:#fff;border:1px solid #e3e9f2;border-radius:12px;padding:18px}
.blog-card h3{color:#0f172a;font-size:15px;margin:8px 0 6px}
.blog-card p{color:#94a3b8;font-size:12.5px;margin:0}
.lx-stats .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}
.stat b{display:block;font-size:26px;color:#0f172a;font-weight:800}
.stat span{color:#64748b;font-size:12.5px}
.lx-marquee{overflow:hidden;border-block:1px solid #e3e9f2;padding:12px 0;background:#fff}
.marquee-track{display:flex;gap:34px;white-space:nowrap;animation:lxmq 22s linear infinite;color:#64748b;font-weight:600;font-size:13.5px}
@keyframes lxmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lx-badges{display:flex;gap:6px;margin-bottom:8px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:#e2e8f0;color:#0f172a}
.badge-new{background:#dcfce7;color:#166534}
.badge-hot{background:#ffedd5;color:#9a3412}
.lx-btt{position:fixed;right:22px;bottom:88px;width:44px;height:44px;border-radius:50%;background:#0f172a;color:#fff;border:none;font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:.25s;z-index:60}
.lx-btt.on{opacity:.9;pointer-events:auto}
.lx-chat{position:fixed;right:22px;bottom:28px;width:52px;height:52px;border-radius:50%;background:#2563eb;color:#fff;border:none;font-size:14px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.25);z-index:60}
.lx-chat-panel{position:fixed;right:22px;bottom:92px;width:290px;background:#fff;border:1px solid #e3e9f2;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.18);padding:16px;display:none;z-index:60}
.lx-chat-panel.open{display:block}
.lx-chat-panel h4{margin:0 0 6px;color:#0f172a}
.lx-chat-panel p{margin:0 0 10px;color:#64748b;font-size:13px}
.lx-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:70}
.lx-modal.open{display:flex}
.lx-modal-box{background:#fff;border-radius:16px;max-width:420px;width:92%;padding:26px;position:relative}
.lx-modal-box h3{margin:0 0 6px;color:#0f172a}
.lx-modal-box p{margin:0 0 14px;color:#64748b;font-size:13.5px}
.lx-modal-box input{width:100%;box-sizing:border-box;border:1px solid #dbe2ee;border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:10px}
.lx-modal-x{position:absolute;right:12px;top:10px;border:none;background:none;font-size:18px;cursor:pointer;color:#94a3b8}
.lx-timeline .timeline{list-style:none;margin:0;padding:0}
.lx-timeline .timeline li{position:relative;padding:0 0 18px 28px;border-left:2px solid #2563eb;margin-left:8px}
.lx-timeline .timeline li:last-child{border-left-color:transparent}
.lx-timeline .timeline li:before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:#2563eb}
.lx-timeline .timeline b{color:#0f172a;margin-right:8px}
.lx-timeline .timeline span{color:#64748b;font-size:13.5px}
@media (max-width:900px){.lx-testimonials .testimonial-grid,.lx-gallery .gallery-grid,.lx-metrics .metric-row,.lx-baseinfo .baseinfo-row,.lx-pricing .tier-grid,.lx-casecards .case-grid,.lx-team .team-grid,.lx-blog .blog-grid,.lx-stats .stats-row{grid-template-columns:repeat(2,1fr)}.lx-demo .demo-box,.lx-custom .custom-grid{grid-template-columns:1fr}}
@media (max-width:600px){.lx-testimonials .testimonial-grid,.lx-metrics .metric-row,.lx-pricing .tier-grid,.lx-casecards .case-grid,.lx-team .team-grid,.lx-blog .blog-grid,.lx-stats .stats-row{grid-template-columns:1fr}}
/* ===== END MODULE COMPLETION LAYER ===== */

/* ==== S09 补齐样式 ==== */
.bi-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed #e2e8f0}
.bi-item:last-child{border-bottom:none}
.bi-item .bi-k{flex:0 0 auto}
.bi-item .bi-v{flex:1 1 auto;text-align:right}
.g-ph.g1{background:linear-gradient(135deg,#dfe7f3,#c3d3e7)}
.bc-sep{color:#94a3b8;margin:0 6px;font-size:13px}
.page-badges{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.page-badges span{background:#eef4ff;color:#2563eb;border:1px solid #d7e4ff;border-radius:999px;padding:5px 14px;font-size:12px;font-weight:600;white-space:nowrap}
.ui-ico{display:inline-flex;width:26px;height:26px;flex:0 0 auto}
.ui-ico svg{width:100%;height:100%}
.configuration{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.case-study{border-radius:14px;overflow:hidden}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ==== S09 首页 vx/rd 区块样式 ==== */
.vx-card{background:#fff;border:1px solid #e3e9f2;border-radius:14px;padding:16px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.vx-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.vx-title{font-size:11px;letter-spacing:.06em;font-weight:700;color:#2563eb;text-transform:uppercase}
.vx-live{color:#22c55e;font-size:14px;animation:pulse 1.6s infinite}
.vx-art svg{width:100%;height:auto;border-radius:8px;display:block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.request-demo{box-shadow:0 10px 30px rgba(15,23,42,.12)}

/* ==== S09 下拉菜单层级修复 ==== */
.mega-menu,.dropdown-menu{z-index:9999}
.site-header{z-index:1000}

/* ==== S09 内容居中 ==== */
.page-hero{text-align:center}
.page-hero .page-badges{justify-content:center}
.hero{text-align:center}
.hero .hero-grid{justify-content:center}
.hero-actions{justify-content:center}
.hero .container.hero-grid{align-items:center}
.section-heading{text-align:center}
.eyebrow{display:block;text-align:center}
.section .lead{text-align:center;margin-left:auto;margin-right:auto;max-width:760px}
.stats-band,.quote-band,.cta-band{text-align:center}
.lx-metrics,.lx-stats,.lx-pullquote{text-align:center}
.cta-band .container,.quote-band .container{text-align:center}
main form:not([data-form]){margin:1.5rem auto}

/* ===== 卡片满行修复（S09 全站 · 2026-09-21） =====
   目标：固定列数下卡片数不能整除列数时，末行出现右侧空白。
   方案：与 S02-S08 已批准修法一致——按卡数收敛列数或末行跨列补满。
   注：plain gallery/testimonial 与 lx 包裹变体通过直接子元素类名区分
   （gallery-card vs gallery-item）。 ===== */

/* 1) testimonial-grid 3 卡：601-900 两列断点下末卡跨满（plain+lx） */
@media (min-width: 601px) and (max-width: 900px) {
  .testimonial-grid:not(:has(> :nth-child(4))) > :nth-child(3):last-child { grid-column: 1 / -1; }
}
/* testimonial-grid 4 卡：>=901 三列下末卡跨满（plain+lx） */
@media (min-width: 901px) {
  .testimonial-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) > :nth-child(4):last-child { grid-column: 1 / -1; }
}

/* 2) gallery-grid（plain，直接子元素 .gallery-card）：
      3 卡 @501-900 末卡跨满（2/3 列区间）；4 卡 @601-900 末卡跨满（三列 3+1） */
@media (min-width: 501px) and (max-width: 900px) {
  .gallery-grid > .gallery-card:nth-child(3):last-child,
  .lx-gallery .gallery-grid > figure.gallery-item:nth-child(3):last-child { grid-column: 1 / -1; }
}
@media (min-width: 712px) and (max-width: 1080px) {
  .gallery-grid > .gallery-card:nth-child(4):last-child { grid-column: 1 / -1; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  .lx-gallery .gallery-grid > figure.gallery-item:nth-child(4):last-child { grid-column: 1 / -1; }
}
/* lx-gallery 包裹（直接子元素 figure/gallery-item）：<=600 两列 3 卡末卡跨满 */
@media (max-width: 600px) {
  .lx-gallery .gallery-grid:not(:has(> :nth-child(4))) > :nth-child(3):last-child { grid-column: span 2; }
}

/* 3) link-grid（a 元素直接子级）：>1080 四列区按卡数补满；561-1080 两列区奇数末卡跨满 */
@media (min-width: 1081px) {
  .link-grid > a:nth-child(5):last-child { grid-column: 1 / -1; }
  .link-grid > a:nth-child(7):last-child { grid-column: 1 / -1; }
  .link-grid > a:nth-child(5):nth-last-child(2),
  .link-grid > a:nth-child(6):last-child { grid-column: span 2; }
  .link-grid:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 561px) and (max-width: 1080px) {
  .link-grid > a:nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* 4) lx 系 3 卡容器（team/case/blog/tier）：601-900 两列末卡跨满 */
@media (min-width: 601px) and (max-width: 900px) {
  .lx-team .team-grid:not(:has(> :nth-child(4))) > :nth-child(3):last-child,
  .lx-casecards .case-grid:not(:has(> :nth-child(4))) > :nth-child(3):last-child,
  .lx-blog .blog-grid:not(:has(> :nth-child(4))) > :nth-child(3):last-child,
  .lx-pricing .tier-grid:not(:has(> :nth-child(4))) > :nth-child(3):last-child { grid-column: 1 / -1; }
}

/* 5) metrics 4 卡：601-900 三列下末卡跨满（<=600 auto-fit 两列满行） */
@media (min-width: 712px) and (max-width: 1080px) {
  .metrics:not(:has(> :nth-child(5))) > :nth-child(4):last-child { grid-column: 1 / -1; }
}

/* 6) error404 等内联 minmax(220px) 3 卡容器：501-900 末卡跨满 */
@media (min-width: 501px) and (max-width: 900px) {
  div[style*="minmax(220px,1fr)"] > :nth-child(3):last-child { grid-column: 1 / -1; }
}

/* 7) related-grid 3 卡（smooth-card）：601-1080 两列/三列下末卡跨满 */
@media (min-width: 601px) and (max-width: 1080px) {
  .related-grid:not(:has(> :nth-child(4))) > :nth-child(3):last-child { grid-column: 1 / -1; }
}

/* ===== FEATURE CARD GRID + UI-ICO FIX (2026-09-22) ===== */
.lx-featurecards .container{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lx-featurecards .smooth-card{position:relative;display:block}
.lx-featurecards .smooth-card h3{margin:10px 0 6px;font-size:1.05rem}
.ui-ico-wrap,.ui-ico{width:40px;height:40px;display:inline-block}
.ui-ico{color:#d94f2b;stroke:#d94f2b;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ui-ico circle,.ui-ico path{vector-effect:non-scaling-stroke}
.lx-featurecards .smooth-card .ui-ico-wrap{margin-bottom:2px}
@media (max-width:900px){.lx-featurecards .container{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.lx-featurecards .container{grid-template-columns:1fr}}
/* ===== END FEATURE CARD GRID + UI-ICO FIX ===== */

.ui-ico-img{width:100%;height:180px;object-fit:cover;display:block;border-radius:0}
/* S09 smooth-card as top-image card */
.smooth-card{
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  padding:0 !important; margin-bottom:24px;
}
.smooth-card .ui-ico-img{
  width:100%; height:180px; object-fit:cover; display:block;
}
.smooth-card h3{ padding:20px 24px 4px; margin:0; }
.smooth-card p{ padding:0 24px 24px; margin:0; }
.doc-icon-img{width:100%;height:120px;object-fit:cover;display:block}
/* S09-fix: prevent blank page from pageFade opacity */
body { animation: none !important; opacity: 1 !important; }

.t-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}


/* === P1 nav fix 2026-09-26: raise hamburger breakpoint to 1280px, prevent overlap === */
.brand, .brand-name, .brand-tagline, .brand-text { white-space: nowrap; }
.main-nav .nav-link { white-space: nowrap; }

@media (max-width: 1280px) {
  .main-nav { display: none; }
  .mobile-menu-toggle { display: block; }
  .main-nav.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
    padding: 1rem;
    align-items: stretch;
    gap: .25rem;
    max-height: 75vh;
    overflow-y: auto;
    z-index: 1000;
  }
  .main-nav.mobile-open .nav-item { width: 100%; }
  .main-nav.mobile-open .nav-link {
    padding: .75rem 1rem;
    justify-content: space-between;
    font-size: .9rem;
    white-space: normal;
  }
  .main-nav.mobile-open .mega-menu,
  .main-nav.mobile-open .dropdown-menu {
    position: static;
    box-shadow: none;
    display: none;
  }
}

/* === lingomere logo rollout 2026-09-28 === */
a.brand, header .brand, .main-header .brand, .site-header .brand, .m-hdr .brand {
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
.brand-logo, .brand .mark, .brand .lg, .brand .brand-mark {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  padding: 0 !important;
  max-width: none !important;
}
.brand-logo-img, .brand .mark img, .brand .lg img, .brand .brand-mark img {
  height: 72px !important;
  width: auto !important;
  max-width: none !important;
  border-radius: 0 !important;
  display: inline-block !important;
}
.brand-text, .brand .mark + span, .brand .lg + span, .brand .brand-mark + span {
  display: none !important;
}
.brand-logo::after, .brand .mark::after, .brand .lg::after, .brand .brand-mark::after {
  display: none !important;
}