/* ==========================================================================
   SAFETY FIRST INSURANCE SURVEYOR AND LOSS ASSESSOR PRIVATE LIMITED
   Corporate Stylesheet
   Designed for Clarity, Accessibility, and Professional Elegance
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400..800&display=swap");

/* --------------------------------------------------------------------------
   1. CSS Custom Properties / Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand Palette */
  --color-primary: #0A1F5C;
  /* Deep Royal Blue */
  --color-primary-dark: #061442;
  /* Midnight Blue */
  --color-primary-light: #14307F;
  /* Mid Royal Blue */
  --color-secondary: #0B3BB0;
  /* Strong Blue */
  --color-accent: #0045EE;
  /* Logo Blue */
  --color-accent-light: #7BA3FF;
  /* Soft Sky Blue */
  --color-accent-dark: #0032B3;
  /* Dark Logo Blue */
  --color-accent-hover: #003ACC;
  /* Button hover blue (slightly darker than Logo Blue) */

  /* Neutral Palette */
  --color-bg: #F8FAFC;
  /* Clean light page background */
  --color-bg-alt: #F1F5F9;
  /* Subtle section alternate background */
  --color-surface: #FFFFFF;
  /* Crisp white card background */
  --color-surface-hover: #FCFDFE;
  /* Slight hover state */

  /* Text & Border Colors */
  --color-text-main: #0F172A;
  /* Primary text (high contrast) */
  --color-text-muted: #475569;
  /* Secondary explanatory text */
  --color-text-light: #64748B;
  /* Captions and helper text */
  --color-text-inverse: #FFFFFF;
  /* Inverted text on dark backgrounds */
  --color-border: #E2E8F0;
  /* Subtle divider borders */
  --color-border-dark: #334155;
  /* Dark divider */

  /* Status & Placeholder Highlighting */
  --color-placeholder-bg: #FEF3C7;
  /* Soft amber for placeholder indicators */
  --color-placeholder-text: #92400E;
  /* Notice text for user action items */
  --color-placeholder-border: #F59E0B;
  --color-success: #059669;
  --color-error: #DC2626;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing Scale */
  --space-xs: 0.25rem;
  /* 4px */
  --space-sm: 0.5rem;
  /* 8px */
  --space-md: 1rem;
  /* 16px */
  --space-lg: 1.5rem;
  /* 24px */
  --space-xl: 2.5rem;
  /* 40px */
  --space-2xl: 4rem;
  /* 64px */
  --space-3xl: 6rem;
  /* 96px */

  /* Elevation Shadows */
  --shadow-sm: 0 1px 3px rgba(10, 31, 92, 0.06), 0 1px 2px rgba(10, 31, 92, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(10, 31, 92, 0.08), 0 2px 4px -2px rgba(10, 31, 92, 0.06);
  --shadow-lg: 0 10px 25px -3px rgba(10, 31, 92, 0.10), 0 4px 6px -4px rgba(10, 31, 92, 0.05);
  --shadow-xl: 0 20px 35px -5px rgba(10, 31, 92, 0.15), 0 8px 10px -6px rgba(10, 31, 92, 0.08);

  /* Border Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Header Height Offset */
  --header-height: 84px;

  /* Smooth Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & Universal Baseline
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-main);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button,
input,
select,
textarea {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

/* Accessible Skip Navigation Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 1rem;
}

/* Universal Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* --------------------------------------------------------------------------
   3. Typography & Section Headers
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.25;
  font-weight: 700;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-2xl);
}

.section-tag {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-dark);
  background-color: rgba(0, 69, 238, 0.12);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
  border: 1px solid rgba(0, 69, 238, 0.25);
}

.section-title {
  font-size: 2.25rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.section-subtitle {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Section Wrapper Spacing */
.section {
  padding: var(--space-3xl) 0;
}

.section-alt {
  background-color: var(--color-bg-alt);
}

/* --------------------------------------------------------------------------
   4. Buttons & Interactive Links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.875rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-align: center;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 14px rgba(0, 69, 238, 0.35);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 69, 238, 0.45);
}

.btn-outline-primary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
}

.btn-outline-light {
  background-color: transparent;
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-outline-light:hover {
  background-color: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-surface);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
}

/* Placeholder notification badge */
.placeholder-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background-color: var(--color-placeholder-bg);
  color: var(--color-placeholder-text);
  border: 1px dashed var(--color-placeholder-border);
  padding: 0.2rem 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  font-family: monospace;
}

/* --------------------------------------------------------------------------
   5. Top Header & Sticky Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-normal);
}

.site-header.is-scrolled {
  background-color: #FFFFFF;
  box-shadow: var(--shadow-md);
  border-bottom-color: transparent;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

/* Brand Link */
.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

.brand-logo-img {
  height: 52px;
  max-width: 290px;
  width: auto;
  object-fit: contain;
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.brand-descriptor {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Desktop Nav Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-main);
  padding: 0.4rem 0.2rem;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2.5px;
  background-color: var(--color-accent);
  transition: width var(--transition-normal);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-accent-dark);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-cta {
  margin-left: 0.5rem;
}

/* Mobile Hamburger Toggle */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  width: 44px;
  height: 44px;
  position: relative;
  color: var(--color-primary);
  border-radius: var(--radius-sm);
}

.mobile-nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  display: block;
  width: 24px;
  height: 2.5px;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.hamburger-icon {
  position: relative;
  margin: 0 auto;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.hamburger-icon::before {
  top: -8px;
}

.hamburger-icon::after {
  bottom: -8px;
}

/* Active Hamburger state */
.mobile-nav-toggle[aria-expanded="true"] .hamburger-icon {
  background-color: transparent;
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger-icon::before {
  transform: translateY(8px) rotate(45deg);
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger-icon::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6. Hero Section
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  background: linear-gradient(135deg, #061442 0%, #0A2275 60%, #0F3399 100%);
  color: var(--color-text-inverse);
  padding: var(--space-3xl) 0 calc(var(--space-3xl) + 2rem);
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle at 80% 20%, rgba(0, 69, 238, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-2xl);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-company-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 69, 238, 0.4);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
}

.hero-pill-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-accent);
}

.hero-pill-text {
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--color-accent-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-company-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: #CBD5E1;
  margin-bottom: var(--space-xs);
  letter-spacing: 0.01em;
}

.hero-title {
  font-size: 3rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

.hero-title span {
  color: var(--color-accent-light);
}

.hero-description {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #CBD5E1;
  max-width: 580px;
  margin-bottom: var(--space-xl);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Hero Key Indicators */
.hero-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-badge-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #E2E8F0;
}

.hero-badge-icon {
  width: 18px;
  height: 18px;
  color: var(--color-accent-light);
  flex-shrink: 0;
}

.hero-visual-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero-visual-img {
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   7. Highlights / Pillars Strip
   -------------------------------------------------------------------------- */
.highlights-strip {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
  margin-top: -1.5rem;
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  text-align: center;
}

.highlight-item {
  padding: 0.5rem 1rem;
}

.highlight-item:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: rgba(10, 31, 92, 0.05);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
}

.highlight-icon svg {
  width: 24px;
  height: 24px;
}

.highlight-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.highlight-desc {
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   8. About Us Section
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-2xl);
  align-items: flex-start;
}

.about-narrative h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.about-narrative p {
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.role-explanation-card {
  background-color: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  padding: var(--space-lg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-lg) 0;
  box-shadow: var(--shadow-sm);
}

.role-explanation-card h4 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.role-explanation-card p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Corporate Credentials Box */
.credentials-box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
}

.credentials-box-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
}

.credentials-box-header h4 {
  font-size: 1.25rem;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.credentials-box-header p {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-top: 0.25rem;
}

.credential-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--color-border);
}

.credential-item:last-child {
  border-bottom: none;
}

.credential-label {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
}

.credential-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   9. Services Section (8 Service Cards)
   -------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.service-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(0, 69, 238, 0.4);
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon-box {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: rgba(10, 31, 92, 0.05);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  transition: all var(--transition-normal);
}

.service-icon-box svg {
  width: 28px;
  height: 28px;
}

.service-card:hover .service-icon-box {
  background-color: var(--color-primary);
  color: var(--color-accent-light);
}

.service-card-title {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
  color: var(--color-primary);
}

.service-card-desc {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-md);
  flex-grow: 1;
}

.service-scope-list {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

.service-scope-item {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0;
}

.service-scope-item svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: auto;
  transition: color var(--transition-fast);
}

.service-card-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.service-card-link:hover {
  color: var(--color-accent-dark);
}

.service-card-link:hover svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   10. Why Choose Us Section
   -------------------------------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.why-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(10, 31, 92, 0.15);
}

.why-number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(0, 69, 238, 0.15);
  color: var(--color-accent-dark);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
}

.why-card-title {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.why-card-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Standalone spanning card for 5th item */
.why-card-wide {
  grid-column: span 2;
}

/* --------------------------------------------------------------------------
   11. Contact Section & Map Placeholder
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-2xl);
  align-items: flex-start;
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-cards-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-card-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.contact-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: rgba(10, 31, 92, 0.06);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-card-icon svg {
  width: 24px;
  height: 24px;
}

.contact-card-content h4 {
  font-size: 1.05rem;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.contact-card-content p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

/* Map Placeholder Container */
.map-placeholder-box {
  background-color: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  position: relative;
  background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
  background-size: 18px 18px;
}

.map-placeholder-icon {
  width: 52px;
  height: 52px;
  background-color: #FEE2E2;
  color: #DC2626;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.map-placeholder-icon svg {
  width: 26px;
  height: 26px;
}

.map-placeholder-box h4 {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.map-placeholder-box p {
  font-size: 0.85rem;
  color: var(--color-text-light);
  max-width: 380px;
  margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------
   12. Footer Section
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-primary-dark);
  color: #94A3B8;
  padding-top: var(--space-3xl);
  margin-top: auto;
  border-top: 3px solid var(--color-accent);
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Full company name in the footer: one colour, one size, evenly wrapped lines */
.footer-logo-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: #FFFFFF;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.footer-logo-subtitle {
  font-size: 0.8125rem;
  color: var(--color-accent-light);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-about-text {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #94A3B8;
}

.footer-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: var(--space-lg);
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background-color: var(--color-accent);
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-link-item a {
  font-size: 0.875rem;
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-link-item a:hover {
  color: var(--color-accent-light);
  transform: translateX(3px);
}

.footer-regulatory-notice {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #CBD5E1;
}

.footer-regulatory-notice strong {
  color: var(--color-accent-light);
}

.footer-bottom-bar {
  padding: var(--space-lg) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: 0.8125rem;
}

.footer-copyright {
  color: #64748B;
}

.footer-meta-list {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-meta-list a {
  color: #64748B;
}

.footer-meta-list a:hover {
  color: #E2E8F0;
}

/* --------------------------------------------------------------------------
   13. Responsive Breakpoints & Media Queries
   -------------------------------------------------------------------------- */

/* Large Tablets & Small Laptops (<= 1024px) */
@media (max-width: 1024px) {

  /* Keep the logo at its earlier width here so the menu has the same room as before */
  .brand-logo-img {
    height: 46px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-company-pill {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-badges-row {
    justify-content: center;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .highlights-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
  }

  .highlight-item:nth-child(2) {
    border-right: none;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-card-wide {
    grid-column: span 2;
  }

  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile & Tablets (<= 768px) */
@media (max-width: 768px) {
  :root {
    --header-height: 68px;
    --space-3xl: 3.5rem;
    --space-2xl: 2.25rem;
  }

  .nav-container {
    gap: 0.5rem;
  }

  .brand-logo-img {
    height: 44px;
    max-width: 220px;
  }

  .section-title {
    font-size: 1.85rem;
  }

  .hero-company-pill {
    max-width: 100%;
    padding: 0.35rem 0.75rem;
  }

  .hero-pill-text {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    white-space: normal;
  }

  .hero-company-name {
    font-size: 1rem;
    word-break: break-word;
  }

  .hero-title {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem);
    word-break: break-word;
  }

  .hero-badges-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .hero-badge-item {
    font-size: 0.8125rem;
  }

  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-bottom: 2px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem 1.5rem 2rem;
    gap: 1rem;
    box-shadow: var(--shadow-xl);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
  }

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

  .nav-link {
    padding: 0.75rem 0.5rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--color-bg-alt);
  }

  .nav-cta {
    margin-left: 0;
    margin-top: 0.5rem;
    width: 100%;
  }

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

  .highlight-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1.25rem;
  }

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

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

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

  .why-card-wide {
    grid-column: span 1;
  }

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

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

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

/* Small mobile devices (<= 480px) */
@media (max-width: 480px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .brand-logo-img {
    height: 40px;
    max-width: 195px;
  }

  .hero-title {
    font-size: 1.6rem;
  }

  .hero-pill-text {
    font-size: 0.68rem;
  }

  .hero-description {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .credentials-box {
    padding: 1.25rem 1rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .btn {
    width: 100%;
  }
}


/* ---- Custom logo additions ---- */
.footer-logo-badge {
  display: inline-flex;
  align-self: flex-start;
  background: #FFFFFF;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
}

.footer-logo-badge img {
  height: 60px;
  width: auto;
  display: block;
}

/* Footer plain text items (Registered Office) */
.footer-link-item span {
  font-size: 0.875rem;
  color: #94A3B8;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   14. Statistics Section (Customer Satisfaction, Accuracy, Insurance Partners)
   -------------------------------------------------------------------------- */
.stats-section {
  background: linear-gradient(135deg, #061442 0%, #0A2275 60%, #0F3399 100%);
  color: var(--color-text-inverse);
  padding: var(--space-2xl) 0;
}

.stats-section .section-header {
  margin-bottom: var(--space-xl);
}

.stats-section .section-tag {
  color: var(--color-accent-light);
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(123, 163, 255, 0.4);
}

.stats-section .section-title {
  color: #FFFFFF;
  margin-bottom: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
}

.stat-item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(123, 163, 255, 0.45);
  color: var(--color-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 30px;
  height: 30px;
}

.stat-value {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-xs);
}

.stat-suffix {
  color: var(--color-accent-light);
  margin-left: 0.08em;
}

.stat-label {
  font-size: 1rem;
  font-weight: 600;
  color: #CBD5E1;
}

/* Phones: one statistic per row, icon on the left */
@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .stat-item {
    flex-direction: row;
    gap: var(--space-lg);
    padding: var(--space-md) 0;
  }

  .stat-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .stat-icon {
    width: 52px;
    height: 52px;
  }

  .stat-icon svg {
    width: 26px;
    height: 26px;
  }

  .stat-value {
    font-size: 2.25rem;
    margin-bottom: 0;
  }

  .stat-label {
    font-size: 0.9375rem;
  }
}

/* --------------------------------------------------------------------------
   15. Our Clients Section (row of client names / logos that slides by itself)
   -------------------------------------------------------------------------- */
.clients-section {
  background-color: var(--color-surface);
  padding: var(--space-2xl) 0;
}

.clients-section .section-header {
  margin-bottom: var(--space-xl);
}

.clients-marquee {
  overflow: hidden;
}

/* Default layout (also used when motion is switched off): a centred, wrapping grid */
.clients-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.client-item {
  flex: 0 0 auto;
  width: 200px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.client-item img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  object-fit: contain;
}

.client-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
}

/* Sliding layout: main.js adds "is-animated" and repeats the list for a seamless loop */
.clients-marquee.is-animated {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.clients-marquee.is-animated .clients-track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  width: max-content;
  animation: clients-slide 30s linear infinite;
}

.clients-marquee.is-animated .client-item {
  margin-right: var(--space-md);
}

.clients-marquee.is-animated:hover .clients-track {
  animation-play-state: paused;
}

@keyframes clients-slide {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 600px) {
  .client-item {
    width: 160px;
    height: 76px;
  }
}

/* --------------------------------------------------------------------------
   16. Join Us Section ("Want to Work With Us?")
   -------------------------------------------------------------------------- */
.join-section {
  padding: var(--space-2xl) 0;
}

.join-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-xl) calc(var(--space-xl) + 0.5rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, #0045EE 0%, #0B3BB0 100%);
  box-shadow: var(--shadow-xl);
  color: var(--color-text-inverse);
}

.join-title {
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin-bottom: var(--space-sm);
}

.join-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
}

.join-btn {
  flex-shrink: 0;
}

/* White button for use on blue backgrounds */
.btn-light {
  background-color: #FFFFFF;
  color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(6, 20, 66, 0.25);
}

.btn-light:hover {
  background-color: #E6EDFF;
  transform: translateY(-2px);
}

.btn-light:focus-visible {
  outline-color: #FFFFFF;
}

@media (max-width: 768px) {
  .join-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--space-lg);
  }

  .join-title {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   17. Our Achievements Section (Happy Clients, Locations, Claims Completed)
   -------------------------------------------------------------------------- */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.achievement-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.achievement-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(0, 69, 238, 0.1);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

.achievement-icon svg {
  width: 28px;
  height: 28px;
}

.achievement-value {
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-xs);
}

.achievement-suffix {
  color: var(--color-accent);
  margin-left: 0.06em;
}

.achievement-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .achievements-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .achievement-card {
    padding: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   18. Inner Page Banner (top of the About, Services, Why Choose Us, Contact pages)
   -------------------------------------------------------------------------- */
.page-hero {
  background: linear-gradient(135deg, #061442 0%, #0A2275 60%, #0F3399 100%);
  color: var(--color-text-inverse);
  padding: var(--space-2xl) 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #CBD5E1;
  margin-bottom: var(--space-md);
}

.breadcrumb a {
  color: var(--color-accent-light);
}

.breadcrumb a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.page-hero-title {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: var(--space-sm);
}

.page-hero-subtitle {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #CBD5E1;
  max-width: 720px;
}

/* --------------------------------------------------------------------------
   19. Home Page Summaries (short blocks with a "Know More" button)
   -------------------------------------------------------------------------- */
.section-cta {
  text-align: center;
  margin-top: var(--space-xl);
}

/* About Us summary */
.about-teaser {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-2xl);
  align-items: center;
}

.about-teaser-text p {
  color: var(--color-text-muted);
  line-height: 1.75;
}

.about-teaser-text .section-cta {
  text-align: left;
  margin-top: var(--space-lg);
}

.about-teaser .role-explanation-card {
  margin: 0;
}

/* Why Choose Us summary: the five principles as small cards */
.why-mini-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.why-mini {
  flex: 1 1 180px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-sm);
}

.why-mini .why-number-badge {
  margin-bottom: 0;
  flex-shrink: 0;
}

.why-mini-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
}

/* Contact summary */
.contact-teaser {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .about-teaser {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 600px) {
  .why-mini {
    flex: 1 1 100%;
    max-width: none;
    flex-direction: row;
    text-align: left;
    padding: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   20. Google Map in the Contact Section
   -------------------------------------------------------------------------- */
.map-embed-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-color: var(--color-bg-alt);
}

.map-embed-box iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

/* --------------------------------------------------------------------------
   21. Short Home Page Summaries
   -------------------------------------------------------------------------- */
/* About Us summary: heading, two lines and the button, centred */
.home-summary {
  margin-bottom: 0;
}

.home-summary .section-title {
  text-wrap: balance;
}

/* Services summary: each service as a small tile with its icon and name only */
.services-grid.services-summary .service-card {
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}

.services-summary .service-icon-box {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.services-summary .service-icon-box svg {
  width: 22px;
  height: 22px;
}

.services-summary .service-card-title {
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .services-grid.services-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

@media (max-width: 600px) {
  .services-grid.services-summary .service-card {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
  }

  .services-summary .service-card-title {
    font-size: 0.9375rem;
  }
}

/* --------------------------------------------------------------------------
   22. Visual Refresh (glass buttons, softer panels, slim page banner)
   This section restyles the sections above without changing them.
   To go back to the earlier look, delete everything from this comment to the
   end of the file, and the @import line near the top of the file.
   -------------------------------------------------------------------------- */

/* 22.1 Colours, typeface, corners and shadows ------------------------------ */
:root {
  --color-bg: #F3F7FF;
  --color-bg-alt: #E8F0FF;
  --color-border: #D9E4F7;
  --color-text-muted: #44516E;
  --color-text-light: #5C6A88;
  --color-azure: #2E7BFF;
  --color-sky: #5CC8FF;

  --font-family: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(10, 31, 92, 0.05), 0 6px 16px -10px rgba(10, 31, 92, 0.18);
  --shadow-md: 0 2px 4px rgba(10, 31, 92, 0.05), 0 14px 30px -18px rgba(10, 31, 92, 0.30);
  --shadow-lg: 0 2px 6px rgba(10, 31, 92, 0.05), 0 22px 46px -24px rgba(10, 31, 92, 0.36);
  --shadow-xl: 0 4px 10px rgba(10, 31, 92, 0.06), 0 30px 60px -28px rgba(10, 31, 92, 0.45);

  /* Frosted glass surface used by panels and cards */
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.62) 100%);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 2px 6px rgba(10, 31, 92, 0.04), 0 22px 46px -28px rgba(10, 31, 92, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --glass-blur: blur(14px) saturate(150%);

  /* Blue used for the main button and for icons on hover */
  --blue-fill: linear-gradient(135deg, #0D4FEC 0%, #0045EE 50%, #0033C2 100%);

  /* Deep blue used by the home hero, page banner, statistics and Join Us panels */
  --blue-panel:
    radial-gradient(60rem 30rem at 92% -25%, rgba(73, 146, 255, 0.55), transparent 62%),
    radial-gradient(36rem 22rem at -6% 118%, rgba(92, 200, 255, 0.24), transparent 62%),
    linear-gradient(125deg, #06123F 0%, #0A2684 55%, #0D3FC8 100%);

  /* Fine survey grid drawn over the deep blue panels */
  --survey-grid:
    linear-gradient(rgba(160, 192, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 192, 255, 0.11) 1px, transparent 1px);
}

body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(52rem 36rem at -8% 4%, rgba(0, 69, 238, 0.10), transparent 62%),
    radial-gradient(46rem 34rem at 108% 38%, rgba(92, 200, 255, 0.17), transparent 62%),
    radial-gradient(50rem 36rem at 24% 104%, rgba(46, 123, 255, 0.11), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.015em;
}

.section-title {
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Small label above each heading: plain blue text between two short lines */
.section-tag,
.stats-section .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 0.75rem;
}

.section-tag {
  color: var(--color-accent);
}

.section-tag::before,
.section-tag::after {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, currentColor);
}

.section-tag::after {
  transform: scaleX(-1);
}

/* Tinted sections let the soft page background show through */
.section-alt {
  background-color: rgba(214, 227, 255, 0.42);
}

/* 22.2 Glass buttons ------------------------------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  padding: 0.9rem 1.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-weight: 700;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* The shine across the top of every button */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}

.btn-sm {
  padding: 0.6rem 1.25rem;
}

/* Main button: blue glass */
.btn-primary {
  background: var(--blue-fill);
  border-color: rgba(255, 255, 255, 0.34);
  color: #FFFFFF;
  text-shadow: 0 1px 1px rgba(0, 26, 110, 0.35);
  box-shadow: 0 12px 26px -10px rgba(0, 69, 238, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -10px 18px -10px rgba(0, 24, 110, 0.55);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0E4CE0 0%, #003ACC 55%, #002BA6 100%);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(0, 69, 238, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -10px 18px -10px rgba(0, 24, 110, 0.55);
}

/* "Know More" style button on light backgrounds: clear frosted glass */
.btn-outline-primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.55) 100%);
  border-color: rgba(0, 69, 238, 0.28);
  color: var(--color-accent-dark);
  box-shadow: 0 10px 22px -12px rgba(10, 31, 92, 0.42), inset 0 1px 0 #FFFFFF, inset 0 -8px 14px -10px rgba(0, 69, 238, 0.24);
}

.btn-outline-primary:hover {
  background: var(--blue-fill);
  border-color: rgba(255, 255, 255, 0.34);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(0, 69, 238, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -10px 18px -10px rgba(0, 24, 110, 0.55);
}

/* Second button on the deep blue hero: clear glass with white text */
.btn-outline-light {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.46);
  color: #FFFFFF;
  box-shadow: 0 12px 26px -14px rgba(0, 8, 50, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-outline-light:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.11) 100%);
  border-color: rgba(255, 255, 255, 0.8);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* "Join Us" on the deep blue panel: white frosted glass with blue text */
.btn-light {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-color: rgba(255, 255, 255, 0.95);
  color: var(--color-accent-dark);
  box-shadow: 0 14px 28px -14px rgba(0, 8, 50, 0.75), inset 0 1px 0 #FFFFFF, inset 0 -8px 14px -10px rgba(0, 69, 238, 0.3);
}

.btn-light:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.92) 100%);
  color: var(--color-accent-dark);
  transform: translateY(-2px);
}

/* 22.3 Header: frosted glass bar -------------------------------------------- */
.site-header {
  background-color: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 0 rgba(10, 31, 92, 0.06);
}

.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.84);
  border-bottom-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 14px 30px -20px rgba(10, 31, 92, 0.4);
}

/* Desktop menu: each link becomes a soft pill, no underline */
@media (min-width: 769px) {
  .nav-menu {
    gap: 0.25rem;
  }

  .nav-link {
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: color var(--transition-fast), background-color var(--transition-fast);
  }

  .nav-link::after {
    display: none;
  }

  .nav-link:hover,
  .nav-link.active {
    background-color: rgba(0, 69, 238, 0.09);
  }

  .nav-cta {
    margin-left: 0.6rem;
  }
}

/* Small laptops and tablets held sideways: a tighter menu so it stays on one line */
@media (min-width: 769px) and (max-width: 900px) {
  .nav-menu {
    gap: 0;
  }

  .nav-link {
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
  }

  .nav-cta {
    margin-left: 0.35rem;
  }
}

@media (max-width: 768px) {
  .nav-menu {
    border-bottom: 0;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }
}

/* 22.4 Home hero ------------------------------------------------------------ */
.hero-section {
  background: var(--blue-panel);
}

/* Survey grid behind the hero, fading out towards the edges */
.hero-section::before {
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--survey-grid);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 72% 42%, #000 0%, transparent 74%);
  mask-image: radial-gradient(ellipse at 72% 42%, #000 0%, transparent 74%);
}

.hero-company-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero-pill-dot {
  background-color: var(--color-sky);
  box-shadow: 0 0 10px var(--color-sky);
}

.hero-pill-text {
  color: #E1EBFF;
  letter-spacing: 0.01em;
  text-transform: none;
}

.hero-title {
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero-title span {
  color: #9DBEFF;
  background: linear-gradient(90deg, #A9C6FF 0%, #6FD0FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  color: #D3DEF7;
}

.hero-badges-row {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.hero-badge-icon {
  color: var(--color-sky);
}

/* The illustration already has its own rounded card, so it needs no second frame */
.hero-visual-img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 34px 44px rgba(0, 8, 50, 0.55));
}

/* 22.5 Glass panels and cards ------------------------------------------------ */
.highlights-strip,
.credentials-box,
.service-card,
.why-card,
.achievements-grid {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Icon badges: light blue glass with a blue icon */
.highlight-icon,
.service-icon-box,
.contact-card-icon,
.achievement-icon {
  background: linear-gradient(135deg, rgba(0, 69, 238, 0.13) 0%, rgba(92, 200, 255, 0.2) 100%);
  border: 1px solid rgba(0, 69, 238, 0.12);
  border-radius: 14px;
  color: var(--color-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Highlights strip under the hero */
.highlights-strip {
  margin-top: -3rem;
  padding: 1.75rem 0;
}

.highlight-icon {
  margin-bottom: 0.65rem;
}

/* 22.6 Inner page banner: a slim rounded panel instead of a tall band --------- */
.page-hero {
  background: none;
  padding: 1.25rem 0 0;
}

.page-hero>.container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.3rem;
  width: calc(100% - 3rem);
  max-width: 1152px;
  padding: 1.5rem 2rem;
  border-radius: var(--radius-xl);
  background: var(--blue-panel);
  box-shadow: 0 26px 50px -30px rgba(6, 18, 63, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.page-hero>.container::before,
.stats-section>.container::before,
.join-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--survey-grid);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 20%, #000 100%);
  pointer-events: none;
}

.page-hero-title {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0;
}

.page-hero .breadcrumb {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.07) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-size: 0.8125rem;
  color: #FFFFFF;
}

.page-hero .breadcrumb a {
  color: #CFE0FF;
}

.page-hero-subtitle {
  grid-column: 1 / -1;
  max-width: none;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #CFDBF7;
}

/* Less empty space between the banner and the content below it */
.page-hero+.section {
  padding-top: var(--space-2xl);
}

@media (max-width: 600px) {
  .page-hero>.container {
    grid-template-columns: 1fr;
    width: calc(100% - 2rem);
    padding: 1.25rem;
    row-gap: 0.5rem;
  }

  .page-hero .breadcrumb {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .page-hero-title {
    grid-row: 2;
  }
}

/* 22.7 Statistics: a rounded deep blue panel instead of a full-width band ----- */
.stats-section {
  background: none;
  padding: var(--space-lg) 0;
}

.stats-section>.container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 3rem);
  max-width: 1152px;
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-xl);
  background: var(--blue-panel);
  box-shadow: 0 30px 60px -34px rgba(6, 18, 63, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.stats-section .section-tag {
  color: #BBD2FF;
}

.stat-icon {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #BFE6FF;
}

.stat-suffix {
  color: var(--color-sky);
}

@media (max-width: 480px) {
  .stats-section>.container {
    width: calc(100% - 2rem);
    padding: var(--space-lg) 1.25rem;
  }
}

/* 22.8 Clients: glass pills --------------------------------------------------- */
.clients-section {
  background: none;
}

.client-item {
  height: 64px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px rgba(10, 31, 92, 0.05), 0 10px 22px -16px rgba(10, 31, 92, 0.4), inset 0 1px 0 #FFFFFF;
}

.clients-marquee {
  padding: 0.75rem 0 1.5rem;
}

.client-item img {
  max-height: 38px;
}

@media (max-width: 600px) {
  .client-item {
    height: 58px;
  }
}

/* 22.9 Services --------------------------------------------------------------- */
.service-card::before {
  display: none;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 69, 238, 0.22);
  box-shadow: 0 2px 6px rgba(10, 31, 92, 0.05), 0 30px 54px -28px rgba(0, 69, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.service-card:hover .service-icon-box {
  background: var(--blue-fill);
  border-color: transparent;
  color: #FFFFFF;
}

/* Services page: wide cards, two in a row, icon on the left */
.services-grid:not(.services-summary) {
  grid-template-columns: repeat(2, 1fr);
}

.services-grid:not(.services-summary) .service-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.25rem;
  align-content: start;
  padding: 1.75rem;
}

.services-grid:not(.services-summary) .service-card>* {
  grid-column: 2;
}

.services-grid:not(.services-summary) .service-card>.service-icon-box {
  grid-column: 1;
  grid-row: 1 / span 4;
  margin-bottom: 0;
}

.service-card-title {
  letter-spacing: -0.02em;
}

/* The three points under each service become small chips */
.service-scope-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-top: 0;
  padding-top: 0;
}

.service-scope-item {
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  border-radius: var(--radius-full);
  background-color: rgba(0, 69, 238, 0.07);
  color: #33426B;
  font-weight: 600;
}

.service-card-link {
  justify-self: start;
  color: var(--color-accent-dark);
}

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

@media (max-width: 480px) {
  .services-grid:not(.services-summary) .service-card {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .services-grid:not(.services-summary) .service-card>*,
  .services-grid:not(.services-summary) .service-card>.service-icon-box {
    grid-column: 1;
    grid-row: auto;
  }

  .services-grid:not(.services-summary) .service-card>.service-icon-box {
    margin-bottom: var(--space-md);
  }
}

/* Home page: each service as a glass pill */
.services-grid.services-summary .service-card {
  padding: 0.55rem 1.25rem 0.55rem 0.55rem;
  border-radius: var(--radius-full);
}

.services-summary .service-icon-box {
  border-radius: 50%;
}

@media (max-width: 600px) {
  .services-grid.services-summary .service-card {
    padding: var(--space-md) var(--space-sm);
    border-radius: var(--radius-lg);
  }
}

/* 22.10 Why Choose Us ---------------------------------------------------------- */
/* Why Choose Us page: five slim glass bars, number on the left */
.why-grid {
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 920px;
  margin: 0 auto;
}

.why-card {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  column-gap: 1.25rem;
  align-items: start;
  padding: 1.5rem 1.75rem;
}

.why-card:hover {
  transform: none;
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.why-card-wide {
  grid-column: auto;
}

.why-card .why-number-badge {
  grid-row: 1 / span 2;
  justify-content: flex-start;
  width: auto;
  height: auto;
  margin-bottom: 0;
  border-radius: 0;
  background: linear-gradient(135deg, #0045EE 0%, #2E7BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-accent);
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.why-card-title {
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

@media (max-width: 480px) {
  .why-card {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .why-card .why-number-badge {
    grid-row: auto;
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
  }
}

/* Home page: the five principles in one row with fine dividers, no boxes */
.why-mini-grid {
  gap: 0;
}

.why-mini {
  flex: 1 1 0;
  max-width: none;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.why-mini:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.why-mini .why-number-badge {
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(135deg, #0045EE 0%, #2E7BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-accent);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

@media (max-width: 860px) {
  .why-mini-grid {
    flex-direction: column;
    max-width: 420px;
    margin: 0 auto;
  }

  .why-mini {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0.25rem;
    text-align: left;
  }

  .why-mini:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .why-mini .why-number-badge {
    min-width: 2.75rem;
  }
}

/* 22.11 Achievements: one glass panel with two figures ------------------------- */
.achievements-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin: 0 auto;
  gap: 0;
  padding: var(--space-md) 0;
}

.achievement-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.achievement-card:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.achievement-suffix {
  color: var(--color-azure);
}

@media (max-width: 600px) {
  .achievements-grid {
    grid-template-columns: 1fr;
    padding: 0 var(--space-lg);
  }

  .achievement-card:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
}

/* 22.12 Join Us panel ------------------------------------------------------------ */
.join-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--blue-panel);
  box-shadow: 0 30px 60px -34px rgba(6, 18, 63, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 22.13 About page ----------------------------------------------------------------- */
.role-explanation-card {
  background: linear-gradient(135deg, rgba(0, 69, 238, 0.07) 0%, rgba(92, 200, 255, 0.12) 100%);
  border: 1px solid rgba(0, 69, 238, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.credentials-box-header h4 svg {
  color: var(--color-accent);
}

.credential-item {
  border-bottom-style: solid;
}

.credential-label {
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Items still to be filled in: a quiet blue dashed pill instead of a brown box */
.placeholder-tag {
  background-color: rgba(0, 69, 238, 0.06);
  border-color: rgba(0, 69, 238, 0.4);
  border-radius: var(--radius-full);
  color: #33426B;
  font-family: inherit;
  padding: 0.2rem 0.7rem;
}

/* 22.14 Contact page ------------------------------------------------------------------ */
/* Telephone, email and address: plain rows, no boxes */
.contact-card-item {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.contact-cards-stack {
  gap: var(--space-lg);
}

.contact-card-content p {
  margin-bottom: 0.1rem;
}

.contact-card-content a:hover {
  color: var(--color-accent);
}

/* "Open in Google Maps" keeps its own width instead of stretching */
.contact-info-panel>.btn {
  align-self: flex-start;
}

.map-embed-box {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
}

/* 22.15 Footer ---------------------------------------------------------------------------- */
.site-footer {
  background:
    radial-gradient(50rem 24rem at 100% 0%, rgba(46, 123, 255, 0.22), transparent 62%),
    linear-gradient(180deg, #071547 0%, #050F36 100%);
  border-top: 0;
  color: #A3B1D1;
}

.footer-about-text,
.footer-link-item a,
.footer-link-item span {
  color: #A3B1D1;
}

.footer-heading::after {
  background: linear-gradient(90deg, var(--color-azure), var(--color-sky));
  border-radius: 2px;
}

.footer-regulatory-notice {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.footer-regulatory-notice strong,
.footer-link-item a:hover {
  color: #BFD6FF;
}

.footer-copyright,
.footer-meta-list a {
  color: #8494B8;
}

/* 22.16 Accessibility and older browsers --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .btn,
  .service-card {
    transition: none;
  }

  .btn:hover,
  .service-card:hover {
    transform: none;
  }
}

/* Browsers without the frosted glass effect get a more solid header instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background-color: rgba(255, 255, 255, 0.97);
  }
}

/* ==========================================================================
   23. ABOUT PAGE: Leadership photos, Vision, Service Standards, Team, Why Us, Credentials
   ========================================================================== */

/* 23.1 Leadership: round photo with an information block on hover --------- */
.leaders-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl);
}

.leader-card {
  position: relative;
  width: 240px;
  text-align: center;
  outline: none;
}

.leader-photo-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto var(--space-lg);
}

.leader-photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #0A1F5C 0%, #0045EE 100%);
  border: 6px solid #FFFFFF;
  box-shadow: 0 0 0 2px rgba(0, 69, 238, 0.35), var(--shadow-lg);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  cursor: pointer;
}

.leader-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Initials shown until the photo file is added */
.leader-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
}

.leader-card:hover .leader-photo,
.leader-card:focus-within .leader-photo,
.leader-card:focus .leader-photo {
  transform: scale(1.04);
  box-shadow: 0 0 0 3px var(--color-accent), var(--shadow-xl);
}

/* The information block: hidden until hover, tap or keyboard focus */
.leader-info {
  position: absolute;
  top: 50%;
  left: calc(100% + 28px);
  z-index: 20;
  width: 360px;
  padding: 1.35rem 1.5rem;
  text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translate(-10px, -50%);
  transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
}

/* Small pointer arrow towards the photo */
.leader-info::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -9px;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transform: translateY(-50%) rotate(45deg);
}

.leader-card:hover .leader-info,
.leader-card:focus-within .leader-info,
.leader-card:focus .leader-info {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.leader-info-heading {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.leader-info p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.leader-info p+p {
  margin-top: 0.6rem;
}

.leader-info-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.leader-info-tags li {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(0, 69, 238, 0.1);
  color: var(--color-accent-dark);
}

.leader-name {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 0.15rem;
}

.leader-role {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-light);
}

/* Narrower screens: the information block opens below the photo */
@media (max-width: 900px) {
  .leader-info {
    top: calc(100% + 18px);
    left: 50%;
    width: min(340px, calc(100vw - 2rem));
    transform: translate(-50%, -8px);
  }

  .leader-info::before {
    top: -9px;
    left: 50%;
    border-left: 1px solid var(--color-border);
    border-bottom: none;
    border-top: 1px solid var(--color-border);
    transform: translateX(-50%) rotate(45deg);
    background: var(--color-accent);
    border-color: var(--color-accent);
  }

  .leader-card:hover .leader-info,
  .leader-card:focus-within .leader-info,
  .leader-card:focus .leader-info {
    transform: translate(-50%, 0);
  }
}

/* 23.2 Vision -------------------------------------------------------------- */
.vision-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-2xl) var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--blue-panel, linear-gradient(135deg, #061442 0%, #0A2275 60%, #0F3399 100%));
  color: #FFFFFF;
  box-shadow: 0 26px 50px -30px rgba(6, 18, 63, 0.75);
}

.vision-panel .section-tag {
  margin-bottom: var(--space-md);
}

.vision-title {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: var(--space-md);
}

.vision-text p {
  color: #CFDBF7;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.vision-points {
  display: grid;
  gap: var(--space-md);
}

.vision-point {
  padding: 1.1rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.vision-point h3 {
  font-size: 1rem;
  color: #FFFFFF;
  margin-bottom: 0.25rem;
}

.vision-point p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #CFDBF7;
}

/* 23.3 Service Standards: six numbered steps ------------------------------- */
.standards-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  counter-reset: none;
}

.standards-step {
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-lg);
  background: var(--glass-bg, #FFFFFF);
  border: 1px solid var(--glass-border, var(--color-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow, var(--shadow-sm));
}

.standards-step-no {
  display: block;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, #0045EE 0%, #2E7BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-accent);
}

.standards-step h3 {
  font-size: 1.125rem;
  color: var(--color-primary);
  margin-bottom: 0.3rem;
}

.standards-step p {
  font-size: 0.925rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* 23.4 Team and Reach ------------------------------------------------------ */
.team-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.team-fact {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--glass-bg, #FFFFFF);
  border: 1px solid var(--glass-border, var(--color-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow, var(--shadow-sm));
}

.team-fact-value {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}

.team-fact-suffix {
  font-size: 1.75rem;
}

.team-fact-label {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.team-detail-card {
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.team-detail-card h3 {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.team-detail-card>p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.office-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.office-list li {
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-bg-alt);
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.office-list strong {
  display: block;
  font-size: 0.975rem;
  color: var(--color-primary);
}

/* 23.5 Why Safety First ---------------------------------------------------- */
.why-sf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.why-sf-card {
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.why-sf-card h3 {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 0.35rem;
}

.why-sf-card p {
  font-size: 0.925rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* 23.6 About page: tablet and mobile --------------------------------------- */
@media (max-width: 1024px) {
  .vision-panel {
    grid-template-columns: 1fr;
  }

  .standards-steps,
  .why-sf-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .vision-panel {
    padding: var(--space-xl) var(--space-lg);
  }

  .standards-steps,
  .why-sf-grid {
    grid-template-columns: 1fr;
  }

  .team-fact-value {
    font-size: 2rem;
  }

  .leader-photo-wrap {
    width: 190px;
    height: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .leader-photo,
  .leader-info {
    transition: none;
  }
}

/* Vision tag readable on the dark blue panel */
.vision-panel .section-tag {
  color: #CFE0FF;
}

/* 23.7 About page: narrative full width, founder right after it ------------- */
.about-narrative-full {
  max-width: 900px;
  margin: 0 auto;
}

#about .leaders-grid {
  margin-top: var(--space-2xl);
}

/* Team card full width, four offices in one row */
.team-detail-full .office-list {
  grid-template-columns: repeat(4, 1fr);
}

/* 23.8 Empanelled With: scrolling insurer logos ----------------------------- */
.empanelled-block {
  margin-top: var(--space-2xl);
  text-align: center;
}

.empanelled-title {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.empanelled-subtitle {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* 23.9 Corporate Credentials: last section, two columns -------------------- */
.credentials-box-full {
  max-width: 1000px;
  margin: 0 auto;
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-xl);
}

/* Keep the dashed line under every item, including the last one in each column */
.credentials-grid .credential-item:last-child {
  border-bottom: 1px dashed var(--color-border);
}

.credentials-grid .credential-item:nth-last-child(-n + 2) {
  border-bottom: none;
}

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

  .credentials-grid .credential-item:nth-last-child(2) {
    border-bottom: 1px dashed var(--color-border);
  }

  .team-detail-full .office-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   24. LOGO STRIP (Home page "Our Clients" and About page "Empanelled With")
   Only the logos, no box behind them, sliding from right to left in a
   seamless loop. main.js leaves out any logo that cannot be loaded and
   then shows the strip (class "is-ready").
   ========================================================================== */
.clients-marquee {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.clients-marquee.is-ready {
  opacity: 1;
}

.client-item,
.clients-marquee.is-animated .client-item {
  width: 200px;
  height: 96px;
  padding: 0.5rem 1.25rem;
  margin-right: var(--space-lg);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.client-item .client-logo {
  max-width: 170px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 600px) {

  .client-item,
  .clients-marquee.is-animated .client-item {
    width: 150px;
    height: 80px;
    margin-right: var(--space-md);
  }

  .client-item .client-logo {
    max-width: 130px;
    max-height: 58px;
  }
}

/* ==========================================================================
   25. WHY CHOOSE US PAGE
   ========================================================================== */

/* 25.1 Promise and facts --------------------------------------------------- */
.wcu-intro-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.wcu-intro-title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-lg);
  max-width: 22ch;
}

.wcu-intro-text p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  max-width: 62ch;
}

.wcu-intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.wcu-facts {
  padding: var(--space-sm) var(--space-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.wcu-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.wcu-fact:last-child {
  border-bottom: none;
}

.wcu-fact dt {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.wcu-fact dd {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* 25.2 Six reasons: the first card is larger ------------------------------- */
.wcu-reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.wcu-reason {
  padding: var(--space-xl) var(--space-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

.wcu-reason h3 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.wcu-reason p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.wcu-reason-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-md);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 69, 238, 0.13) 0%, rgba(92, 200, 255, 0.2) 100%);
  border: 1px solid rgba(0, 69, 238, 0.12);
  color: var(--color-accent);
}

.wcu-reason-icon svg {
  width: 24px;
  height: 24px;
}

/* Lead card spans two columns and two rows, on deep blue */
.wcu-reason-lead {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-2xl) var(--space-xl);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--blue-panel, linear-gradient(125deg, #06123F 0%, #0A2684 55%, #0D3FC8 100%));
  border: none;
  box-shadow: 0 26px 50px -30px rgba(6, 18, 63, 0.75);
}

.wcu-reason-lead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--survey-grid);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(160deg, transparent 15%, #000 100%);
  mask-image: linear-gradient(160deg, transparent 15%, #000 100%);
}

.wcu-reason-lead .wcu-reason-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.wcu-reason-lead h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  color: #FFFFFF;
  margin-bottom: var(--space-md);
}

.wcu-reason-lead p {
  font-size: 1.0625rem;
  color: #CFDBF7;
  max-width: 54ch;
}

.wcu-dept-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-lg);
}

.wcu-dept-list li {
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  font-weight: 600;
  color: #FFFFFF;
}

/* 25.3 Inside every claim file: the survey file illustration --------------- */
.wcu-file-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-2xl);
  align-items: center;
}

.wcu-file-text .section-title {
  margin-top: var(--space-sm);
}

.wcu-file-text p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  max-width: 56ch;
}

.wcu-file {
  position: relative;
  margin: 0;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);
}

/* A second sheet peeking out behind, like a real file */
.wcu-file::before {
  content: "";
  position: absolute;
  inset: 8% 2% 0 10%;
  border-radius: var(--radius-lg);
  background: #DCE6FB;
  transform: rotate(4deg);
  box-shadow: var(--shadow-md);
}

.wcu-file-sheet {
  position: relative;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-top: 6px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  transform: rotate(-1.5deg);
}

.wcu-file-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
}

.wcu-file-org {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.wcu-file-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

.wcu-file-rows li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.8rem 0;
  border-bottom: 1px dashed var(--color-border);
}

.wcu-file-rows li:last-child {
  border-bottom: none;
}

.wcu-file-rows strong {
  display: block;
  font-size: 0.975rem;
  color: var(--color-primary);
}

.wcu-file-rows span {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Blue tick box */
.wcu-file-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 6px;
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* The red "Peer Reviewed" stamp: the one bold accent on the page */
.wcu-file-stamp {
  position: absolute;
  top: -1.75rem;
  right: -1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  background: rgba(255, 255, 255, 0.92);
  border: 3px double #C8102E;
  border-radius: 50%;
  color: #C8102E;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-14deg);
  opacity: 0.85;
  pointer-events: none;
}

/* 25.4 Six steps on a connecting line -------------------------------------- */
.wcu-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
}

/* Line joining the step numbers */
.wcu-steps::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 69, 238, 0.15), var(--color-accent), rgba(0, 69, 238, 0.15));
}

.wcu-step {
  position: relative;
  text-align: center;
  padding: 0 0.25rem;
}

.wcu-step-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  background: var(--blue-fill, var(--color-accent));
  border: 4px solid #FFFFFF;
  box-shadow: 0 8px 18px -8px rgba(0, 69, 238, 0.7);
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 800;
}

.wcu-step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.wcu-step p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* 25.5 Values on deep blue ------------------------------------------------- */
.wcu-values {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--blue-panel, linear-gradient(125deg, #06123F 0%, #0A2684 55%, #0D3FC8 100%));
  box-shadow: 0 26px 50px -30px rgba(6, 18, 63, 0.75);
}

.wcu-values::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--survey-grid);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 25%, #000 100%);
}

.wcu-values-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: var(--space-md);
}

.wcu-values-head p {
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.7;
  color: #CFDBF7;
}

.wcu-values-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}

.wcu-values-list li {
  padding: var(--space-lg) var(--space-md);
  border-top: 2px solid rgba(160, 192, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.wcu-values-list h3 {
  font-size: 1.05rem;
  color: #FFFFFF;
  margin-bottom: 0.35rem;
}

.wcu-values-list p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #CFDBF7;
}

/* 25.6 What we undertake and sectors --------------------------------------- */
.wcu-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.wcu-scope-card {
  padding: var(--space-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
}

.wcu-scope-card h2 {
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-md);
}

.wcu-scope-card>p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.wcu-tick-list li {
  position: relative;
  padding: 0.6rem 0 0.6rem 2rem;
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--color-text-main);
  border-bottom: 1px dashed var(--color-border);
}

.wcu-tick-list li:last-child {
  border-bottom: none;
}

.wcu-tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.wcu-sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.wcu-sector-list li {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(0, 69, 238, 0.2);
  border-radius: var(--radius-full);
  background: rgba(0, 69, 238, 0.06);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* 25.7 Call to action -------------------------------------------------------- */
.wcu-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-xl) calc(var(--space-xl) + 0.5rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, #0045EE 0%, #0B3BB0 100%);
  box-shadow: var(--shadow-xl);
}

.wcu-cta h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  color: #FFFFFF;
  margin-bottom: var(--space-sm);
}

.wcu-cta p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  max-width: 56ch;
}

.wcu-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  flex-shrink: 0;
}

/* 25.8 Why Choose Us page: tablet and mobile ------------------------------ */
@media (max-width: 1024px) {

  .wcu-intro-grid,
  .wcu-file-grid,
  .wcu-values {
    grid-template-columns: 1fr;
  }

  .wcu-reasons {
    grid-template-columns: repeat(2, 1fr);
  }

  .wcu-reason-lead {
    grid-row: auto;
  }

  .wcu-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-xl);
  }

  .wcu-steps::before {
    display: none;
  }

  .wcu-values-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .wcu-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {

  .wcu-reasons,
  .wcu-scope-grid {
    grid-template-columns: 1fr;
  }

  .wcu-reason-lead {
    grid-column: auto;
    padding: var(--space-xl) var(--space-lg);
  }

  .wcu-values-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .wcu-facts {
    padding: var(--space-xs) var(--space-lg);
  }

  .wcu-fact dd {
    font-size: 1.6rem;
  }

  /* Steps become a vertical list with the number on the left */
  .wcu-steps {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
  }

  .wcu-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: var(--space-md);
    text-align: left;
  }

  .wcu-step-no {
    grid-row: span 2;
    width: 48px;
    height: 48px;
    margin: 0;
  }

  .wcu-values {
    padding: var(--space-xl) var(--space-lg);
  }

  .wcu-values-list {
    grid-template-columns: 1fr;
  }

  .wcu-file {
    padding: var(--space-sm);
  }

  .wcu-file-sheet {
    padding: var(--space-lg);
    transform: none;
  }

  .wcu-file-stamp {
    width: 80px;
    height: 80px;
    font-size: 0.7rem;
    top: -1rem;
    right: -0.25rem;
  }

  .wcu-scope-card,
  .wcu-cta {
    padding: var(--space-lg);
  }

  .wcu-cta-actions {
    width: 100%;
  }
}

/* ==========================================================================
   26. CONTACT PAGE (no form: details on the left, map on the right)
   ========================================================================== */
#contact .contact-grid {
  align-items: stretch;
}

.contact-map {
  display: flex;
  min-height: 420px;
}

.contact-map iframe {
  flex: 1;
  height: auto;
  min-height: 420px;
}

.contact-card-content a {
  color: var(--color-primary);
  font-weight: 600;
}

.contact-card-content a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.contact-branches {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-light);
}

@media (max-width: 768px) {

  .contact-map,
  .contact-map iframe {
    min-height: 320px;
  }
}

/* ==========================================================================
   27. OPEN LAYOUT: NO BOXES
   Content now sits directly on the page instead of inside cards. Structure
   comes from thin lines, short blue accent bars, large numbers and plain
   icons. The deep blue panels become full-width bands with the survey grid.
   To go back to the boxed look, delete everything from this comment to the
   end of the file.
   ========================================================================== */

/* 27.1 Deep blue bands, edge to edge ------------------------------------------ */
.page-hero,
.stats-section,
.join-section,
#vision,
#values,
.wcu-cta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--blue-panel, linear-gradient(125deg, #06123F 0%, #0A2684 55%, #0D3FC8 100%));
}

/* Fine survey grid over every band */
.page-hero::before,
.stats-section::before,
.join-section::before,
#vision::before,
#values::before,
.wcu-cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--survey-grid);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 15%, #000 100%);
  pointer-events: none;
}

/* The inner boxes lose their own background, corners and shadow */
.page-hero>.container,
.stats-section>.container,
.join-card,
.vision-panel,
.wcu-values,
.wcu-cta {
  width: 100%;
  max-width: 1200px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.page-hero>.container::before,
.stats-section>.container::before,
.join-card::before,
.wcu-values::before {
  display: none;
}

.page-hero {
  padding: 2.75rem 0;
}

.page-hero>.container {
  padding: 0 1.5rem;
}

.page-hero-title {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
}

.page-hero+.section {
  padding-top: var(--space-3xl);
}

.stats-section {
  padding: var(--space-3xl) 0;
}

.stats-section>.container {
  padding: 0 1.5rem;
}

.join-section,
.wcu-cta-section {
  padding: var(--space-2xl) 0;
}

.join-card,
.vision-panel,
.wcu-values,
.wcu-cta {
  padding: 0 1.5rem;
  margin: 0 auto;
}

/* Two blue bands should not sit back to back with a gap between them */
#vision {
  padding: var(--space-3xl) 0;
}

/* Vision points and values: lines instead of glass tiles */
.vision-point {
  padding: 0.25rem 0 0.25rem 1.25rem;
  background: none;
  border: 0;
  border-left: 2px solid rgba(160, 192, 255, 0.55);
  border-radius: 0;
}

.vision-points {
  gap: var(--space-lg);
}

.wcu-values-list li {
  padding: var(--space-md) 0 0;
  background: none;
  border-radius: 0;
}

/* Icons on the blue bands: plain, no tinted tile */
.stat-icon {
  width: auto;
  height: auto;
  background: none;
  border: 0;
  box-shadow: none;
}

.stat-icon svg {
  width: 36px;
  height: 36px;
}

/* 27.2 Plain icons everywhere (no tinted squares or circles) --------------------- */
.highlight-icon,
.service-icon-box,
.contact-card-icon,
.achievement-icon,
.wcu-reason-icon,
.wcu-reason-lead .wcu-reason-icon {
  width: auto;
  height: auto;
  justify-content: flex-start;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-accent);
}

.highlight-icon svg,
.service-icon-box svg,
.contact-card-icon svg,
.achievement-icon svg,
.wcu-reason-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.6;
}

.service-card:hover .service-icon-box {
  background: none;
  color: var(--color-accent-dark);
}

/* 27.3 Shared "open item": a hairline on top with a short blue accent ------------- */
.standards-step,
.why-sf-card,
.wcu-reason,
.wcu-scope-card,
.services-grid:not(.services-summary) .service-card {
  position: relative;
  padding: 1.75rem 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}

.standards-step::before,
.why-sf-card::before,
.wcu-reason::before,
.wcu-scope-card::before,
.services-grid:not(.services-summary) .service-card::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--color-accent);
  opacity: 1;
  transition: width var(--transition-normal);
}

/* Hover: the accent line grows, nothing jumps */
.services-grid:not(.services-summary) .service-card:hover::before,
.why-sf-card:hover::before,
.wcu-reason:hover::before {
  width: 120px;
}

.services-grid:not(.services-summary) .service-card:hover,
.why-card:hover {
  transform: none;
  box-shadow: none;
}

.standards-steps,
.why-sf-grid,
.wcu-reasons {
  column-gap: var(--space-xl);
  row-gap: var(--space-2xl);
}

/* 27.4 Home page ---------------------------------------------------------------- */
/* Strip under the hero: four columns on the page, divided by thin lines */
.highlights-strip {
  margin-top: 0;
  padding: var(--space-2xl) 0 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.highlight-item {
  text-align: left;
  padding: 0 var(--space-lg);
}

.highlight-icon {
  margin-bottom: 0.75rem;
}

.highlight-title {
  font-size: 1.05rem;
}

.highlight-desc {
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Services summary: icon and name in a clean grid, divided by lines */
.services-grid.services-summary {
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.services-grid.services-summary .service-card {
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  padding: 1.35rem 1rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}

.services-grid.services-summary .service-card:not(:nth-child(4n)) {
  border-right: 1px solid var(--color-border);
}

.services-grid.services-summary .service-card:hover {
  transform: none;
  box-shadow: none;
}

.services-grid.services-summary .service-card:hover .service-card-title {
  color: var(--color-accent);
}

.services-summary .service-icon-box {
  margin-bottom: 0;
}

.services-summary .service-icon-box svg {
  width: 28px;
  height: 28px;
}

.services-summary .service-card-title {
  margin-bottom: 0;
  font-size: 1.05rem;
}

/* Achievements: two big figures with a line between, no panel */
.achievements-grid {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
}

.achievement-icon {
  justify-content: center;
}

.achievement-value {
  font-size: clamp(2.75rem, 6vw, 4rem);
}

/* 27.5 Services page -------------------------------------------------------------- */
.services-grid:not(.services-summary) {
  column-gap: var(--space-2xl);
  row-gap: var(--space-2xl);
}

.services-grid:not(.services-summary) .service-card {
  padding-top: 2rem;
}

.service-card-title {
  font-size: 1.35rem;
}

/* The three points under each service: a simple ticked list */
.service-scope-list {
  display: grid;
  gap: 0.35rem;
  margin: 0.25rem 0 1.25rem;
}

.service-scope-item {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-main);
}

/* 27.6 About page ------------------------------------------------------------------- */
.role-explanation-card {
  padding: 0.25rem 0 0.25rem 1.5rem;
  background: none;
  border: 0;
  border-left: 3px solid var(--color-accent);
  border-radius: 0;
}

.role-explanation-card h4 {
  font-size: 1.2rem;
}

/* Hide the "broken image" text while the founder photo is missing */
.leader-photo img {
  color: transparent;
  font-size: 0;
}

/* Team figures: big numbers separated by lines */
.team-facts {
  gap: 0;
  margin-bottom: var(--space-2xl);
}

.team-fact {
  padding: 0.5rem var(--space-lg);
  text-align: left;
  background: none;
  border: 0;
  border-left: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.team-fact:first-child {
  border-left: 0;
  padding-left: 0;
}

.team-fact-value {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}

.team-detail-card {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.office-list li {
  padding: 0.35rem 0 0.35rem 1rem;
  background: none;
  border-radius: 0;
  border-left: 2px solid var(--color-accent);
}

/* Corporate credentials: an open two-column register */
.credentials-box,
.credentials-box-full {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.credentials-box-header {
  border-bottom: 2px solid var(--color-primary);
}

.credentials-box-header h4 {
  font-size: 1.5rem;
}

/* 27.7 Why Choose Us page ---------------------------------------------------------- */
/* Figures beside the promise: an open list under a dark rule */
.wcu-facts {
  padding: 0;
  background: none;
  border: 0;
  border-top: 2px solid var(--color-primary);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.wcu-fact dd {
  font-size: 2.4rem;
}

/* The lead reason becomes a large statement across the full width */
.wcu-reason-lead {
  grid-column: 1 / -1;
  grid-row: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-lg);
  padding: 2rem 0 0;
  background: none;
  border-top: 1px solid var(--color-border);
  box-shadow: none;
  overflow: visible;
}

.wcu-reason-lead>* {
  grid-column: 2;
}

.wcu-reason-lead .wcu-reason-icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  color: var(--color-accent);
}

.wcu-reason-lead .wcu-reason-icon svg {
  width: 48px;
  height: 48px;
}

.wcu-reason-lead h3 {
  color: var(--color-primary);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
}

.wcu-reason-lead p {
  color: var(--color-text-muted);
  max-width: 70ch;
}

/* Departments and sectors: ticked words, no pills */
.wcu-dept-list,
.wcu-sector-list {
  gap: 0.6rem 1.75rem;
}

.wcu-dept-list li,
.wcu-sector-list li {
  padding: 0 0 0 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230045EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") left center / 16px no-repeat;
  border: 0;
  border-radius: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.wcu-scope-card {
  padding-top: 2rem;
}

.wcu-scope-grid {
  column-gap: var(--space-2xl);
}

/* Ticks in the "What we undertake" list: a blue tick, no square */
.wcu-tick-list li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230045EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 18px no-repeat;
  border-radius: 0;
}

/* 27.8 Contact page and footer --------------------------------------------------------- */
.map-embed-box {
  border: 0;
  box-shadow: none;
}

.footer-regulatory-notice {
  padding: 0 0 0 1rem;
  background: none;
  border: 0;
  border-left: 2px solid var(--color-accent);
  border-radius: 0;
  box-shadow: none;
}

/* 27.9 Tablet and mobile ----------------------------------------------------------------- */
@media (max-width: 1024px) {
  .services-grid.services-summary .service-card:not(:nth-child(4n)) {
    border-right: 0;
  }

  .services-grid.services-summary .service-card:nth-child(odd) {
    border-right: 1px solid var(--color-border);
  }

  .team-fact:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .team-facts {
    row-gap: var(--space-xl);
  }
}

@media (max-width: 768px) {
  .highlight-item {
    padding: 0 0 1.25rem;
  }

  .wcu-reason-lead {
    grid-template-columns: 1fr;
  }

  .wcu-reason-lead>*,
  .wcu-reason-lead .wcu-reason-icon {
    grid-column: 1;
    grid-row: auto;
  }

  .wcu-reason-lead .wcu-reason-icon {
    margin-bottom: var(--space-md);
  }
}

@media (max-width: 600px) {

  .services-grid.services-summary .service-card,
  .services-grid.services-summary .service-card:nth-child(odd) {
    border-right: 0;
    padding: 1.1rem 0;
  }

  .team-fact {
    padding-left: var(--space-md);
  }

  .join-card,
  .vision-panel,
  .wcu-values,
  .wcu-cta {
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {

  .page-hero>.container,
  .stats-section>.container {
    padding: 0 1rem;
  }
}

/* Icons line up with the heading, not the middle of the item */
.services-grid:not(.services-summary) .service-card>.service-icon-box,
.wcu-reason-lead .wcu-reason-icon {
  align-self: start;
  margin-top: 0.15rem;
}

/* ==========================================================================
   28. ABOUT PAGE: FOUR DIRECTORS BELOW THE FOUNDER
   Four smaller round photos in one row. Their information block opens
   below the photo, so it never runs off the edge of the screen.
   ========================================================================== */
.leaders-grid-team {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
  gap: var(--space-xl);
}

.leaders-grid-team .leader-card {
  width: 220px;
}

.leaders-grid-team .leader-photo-wrap {
  width: 180px;
  height: 180px;
}

.leaders-grid-team .leader-initials {
  font-size: 2.5rem;
}

.leaders-grid-team .leader-info {
  top: calc(100% + 18px);
  left: 50%;
  width: min(320px, calc(100vw - 2rem));
  transform: translate(-50%, -8px);
}

.leaders-grid-team .leader-info::before {
  top: -9px;
  left: 50%;
  border: 0;
  background: var(--color-accent);
  transform: translateX(-50%) rotate(45deg);
}

.leaders-grid-team .leader-card:hover .leader-info,
.leaders-grid-team .leader-card:focus-within .leader-info,
.leaders-grid-team .leader-card:focus .leader-info {
  transform: translate(-50%, 0);
}

@media (max-width: 600px) {
  .leaders-grid-team .leader-card {
    width: 100%;
    max-width: 260px;
  }
}

/* Founder and directors: hide the small tag boxes (years, department, qualification) */
.leader-info-tags {
  display: none;
}