*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline-offset: 0;
  outline: 2px solid transparent; /* For focus visibility */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-size: 100%; /* Base size, adjusted in media queries */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  height: 100%;
}

body {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  line-height: var(--line-height-base, 1.7);
  color: var(--color-text-base, var(--color-dark, #1a1a1a));
  background-color: var(--color-background-body, var(--color-white, #ffffff));
  overflow-x: hidden; /* Prevent horizontal scroll */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1; /* Push footer down */
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block; /* Prevents bottom space */
  vertical-align: middle;
}

/* Accessible focus outline */
:focus-visible {
  outline: 3px solid var(--color-focus-outline, var(--color-secondary, #fca311));
  outline-offset: 2px;
  border-radius: var(--border-radius-sm, 4px);
  z-index: 9999;
}
/* Remove default outline when :focus-visible isn't matching */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Basic Form Reset */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
  border: 1px solid var(--color-border, #ced4da); /* Basic border for consistency */
  border-radius: var(--border-radius-sm, 4px);
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  border: none; /* Reset button border specifically */
  padding: 0; /* Reset button padding specifically */
  border-radius: 0;
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
textarea {
  overflow: auto;
  resize: vertical;
}
input,
textarea {
  padding: var(--spacing-sm) var(--spacing-md); /* Add consistent padding */
}
input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted, #555);
    opacity: 0.8;
}
select {
    padding: var(--spacing-sm) var(--spacing-md);
    appearance: none; /* Basic style reset */
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    background-size: 16px 12px;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* ==========================================================================
   2. Variables
   ========================================================================== */
:root {
  /* Colors */
  --color-primary: #0b3d66;       /* Deep Corporate Blue */
  --color-primary-dark: #072a47;   /* Darker shade */
  --color-primary-light: #d6e3ed; /* Lighter tint */
  --color-secondary: #fca311;     /* Vibrant Orange/Gold Accent */
  --color-secondary-dark: #d98e0e; /* Darker shade */
  --color-secondary-light: #fdeecd;/* Lighter tint */
  --color-accent: #1f7a8c;        /* Supporting Teal */
  --color-accent-dark: #155761;    /* Darker shade */
  --color-accent-light: #d8eff2;   /* Lighter tint */
  --color-dark: #1a1a1a;           /* Near Black */
  --color-medium: #555;           /* Medium Grey Text */
  --color-light: #f8f9fa;         /* Light Background */
  --color-grey: #e9ecef;          /* Lighter Grey Borders/Backgrounds */
  --color-white: #ffffff;
  --color-text-base: var(--color-dark);
  --color-text-muted: var(--color-medium);
  --color-text-inverted: var(--color-white);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-secondary);
  --color-border: #ced4da;
  --color-background-body: var(--color-white);
  --color-background-light: var(--color-light);
  --color-background-dark: var(--color-dark);
  --color-focus-outline: var(--color-secondary);
  --color-success: #198754;
  --color-error: #dc3545;
  --color-warning: #ffc107;
  --color-info: #0dcaf0;
  --color-success-bg: #d1e7dd;
  --color-success-text: #0f5132;
  --color-error-bg: #f8d7da;
  --color-error-text: #842029;
  --color-warning-bg: #fff3cd;
  --color-warning-text: #664d03;

  /* Typography */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-accent: 'Georgia', Times, 'Times New Roman', serif;
  --font-size-base: 1rem;        /* 16px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-base: 1.7;
  --line-height-heading: 1.3;
  --letter-spacing-tight: -0.5px;
  --letter-spacing-normal: normal;
  --letter-spacing-wide: 0.5px;

  /* Spacing & Sizing */
  --spacing-unit: 0.25rem; /* 4px */
  --spacing-xs: calc(var(--spacing-unit) * 2);  /* 8px */
  --spacing-sm: calc(var(--spacing-unit) * 4);  /* 16px */
  --spacing-md: calc(var(--spacing-unit) * 6);  /* 24px */
  --spacing-lg: calc(var(--spacing-unit) * 8);  /* 32px */
  --spacing-xl: calc(var(--spacing-unit) * 12); /* 48px */
  --spacing-xxl: calc(var(--spacing-unit) * 16);/* 64px */
  --spacing-xxxl: calc(var(--spacing-unit) * 24);/* 96px */

  --section-padding-base: var(--spacing-xxxl); /* 96px */
  --section-padding-sm: var(--spacing-xl);   /* 48px */
  --section-padding-lg: calc(var(--spacing-xxxl) * 1.5); /* 144px */

  --container-max-width: 1280px;
  --container-padding: 20px;

  /* Borders & Shadows */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 10px;
  --border-radius-pill: 50px;
  --border-radius-circle: 50%;
  --border-width: 1px;
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.06); /* Subtle */
  --shadow-md: 0 6px 15px rgba(0, 0, 0, 0.08); /* Slightly more prominent */
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12); /* Noticeable */
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --transition-duration-base: 0.25s; /* Slightly faster base */
  --transition-duration-fast: 0.15s;
  --transition-duration-slow: 0.4s;
  --transition-timing-function: ease-in-out; /* Standard ease */
  --transition-base: all var(--transition-duration-base) var(--transition-timing-function);
  --transition-fast: all var(--transition-duration-fast) var(--transition-timing-function);
  --transition-slow: all var(--transition-duration-slow) var(--transition-timing-function);

  /* Z-Index Layer Stack */
  --z-index-back: -1;
  --z-index-base: 1;
  --z-index-content: 10;
  --z-index-sticky: 1000;
  --z-index-dropdown: 1010;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-tooltip: 1080;
  --z-index-navigation: 1100; /* Header/Mobile Menu */
  --z-index-overlay: 1200; /* General purpose overlay */
}

/* ==========================================================================
   3. Utility Classes
   ========================================================================== */
/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text Color */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }
.text-white { color: var(--color-white); }
.text-dark { color: var(--color-dark); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

/* Text Transformation & Decoration */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-decoration-none { text-decoration: none; }
.text-underline { text-decoration: underline; }
.text-nowrap { white-space: nowrap; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Display */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-inline-grid { display: inline-grid; }
.d-none { display: none; }

/* Image Utilities */
.img-responsive { max-width: 100%; height: auto; }
.img-rounded { border-radius: var(--border-radius-md); }
.img-circle { border-radius: var(--border-radius-circle); }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.img-contain { width: 100%; height: 100%; object-fit: contain; }
.img-shadow--sm { box-shadow: var(--shadow-sm); }
.img-shadow--md { box-shadow: var(--shadow-md); }
.img-shadow--lg { box-shadow: var(--shadow-lg); }

/* Background Utilities */
.bg--light { background-color: var(--color-background-light); }
.bg--dark { background-color: var(--color-background-dark); color: var(--color-text-inverted); }
.bg--primary { background-color: var(--color-primary); color: var(--color-text-inverted); }
.bg--secondary { background-color: var(--color-secondary); color: var(--color-dark); }
.bg--gradient--light { background: linear-gradient(180deg, var(--color-white) 0%, var(--color-light) 100%); }
.bg--gradient--primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: var(--color-text-inverted); }
.bg--cover { background-size: cover; background-position: center center; background-repeat: no-repeat; }

/* Parallax Background */
.bg--parallax {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; /* Needed for overlays */
}
/* Disable parallax if reduced motion or on touch/smaller screens */
@media (prefers-reduced-motion: reduce), (pointer: coarse), (max-width: 991.98px) {
  .bg--parallax { background-attachment: scroll; }
}

/* Margin & Padding Utilities (Generate these if needed, keeping CSS size down is good too) */
/* Example: */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mt-xxl { margin-top: var(--spacing-xxl) !important; }
.mb-xxl { margin-bottom: var(--spacing-xxl) !important; }

.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pt-sm { padding-top: var(--spacing-sm) !important; }
.pb-sm { padding-bottom: var(--spacing-sm) !important; }
.pt-md { padding-top: var(--spacing-md) !important; }
.pb-md { padding-bottom: var(--spacing-md) !important; }
.pt-lg { padding-top: var(--spacing-lg) !important; }
.pb-lg { padding-bottom: var(--spacing-lg) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }
.pt-xxl { padding-top: var(--spacing-xxl) !important; }
.pb-xxl { padding-bottom: var(--spacing-xxl) !important; }

/* ==========================================================================
   4. Typography
   ========================================================================== */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin-top: 0;
  margin-bottom: 0.8em; /* Consistent bottom margin */
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-tight);
}

h1, .h1 { font-size: clamp(2.2rem, 5vw + 0.5rem, 3.5rem); font-weight: var(--font-weight-extrabold); } /* Slightly reduced max */
h2, .h2 { font-size: clamp(1.8rem, 4vw + 0.4rem, 2.8rem); } /* Slightly reduced max */
h3, .h3 { font-size: clamp(1.5rem, 3.5vw + 0.3rem, 2rem); } /* Slightly reduced max */
h4, .h4 { font-size: clamp(1.2rem, 3vw + 0.2rem, 1.5rem); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-normal); }
h5, .h5 { font-size: 1.1rem; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-normal); }
h6, .h6 { font-size: 1rem; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); } /* Changed color */

p { margin-bottom: 1.4em; color: var(--color-text-base); }
p:last-child { margin-bottom: 0; }

p.lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  line-height: 1.8;
  margin-bottom: 1.8em; /* Increased margin */
}

a { color: var(--color-link); text-decoration: none; transition: color var(--transition-fast), opacity var(--transition-fast); }
a:hover, a:focus { color: var(--color-link-hover); text-decoration: underline; }

strong, b { font-weight: var(--font-weight-bold); color: inherit; }
em, i { font-style: italic; }

blockquote {
  font-family: var(--font-accent);
  font-size: 1.2rem; /* Slightly smaller */
  font-style: italic;
  border-left: 4px solid var(--color-secondary); /* Thinner border */
  padding: var(--spacing-lg) var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  background-color: var(--color-light);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  position: relative;
  color: var(--color-text-muted); /* Muted text */
}
blockquote::before {
    content: '“';
    font-family: var(--font-accent);
    font-size: 5rem; /* Smaller quote mark */
    color: var(--color-grey);
    position: absolute;
    top: 0;
    left: 0.2em;
    line-height: 1;
    z-index: 0;
    opacity: 0.6;
    pointer-events: none;
}
blockquote p { margin-bottom: 0.8em; position: relative; z-index: 1; }
blockquote footer {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-top: var(--spacing-md);
  position: relative;
  z-index: 1;
}
blockquote footer::before { content: "— "; }
blockquote cite { font-weight: var(--font-weight-semibold); color: var(--color-primary); font-style: normal; }

ul, ol { margin-bottom: 1.3em; padding-left: 1.5em; } /* Reduced padding */
li { margin-bottom: 0.6em; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; margin-top: 0.6em; }

dl dt { font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--spacing-xs); }
dl dd { margin-left: 0; margin-bottom: var(--spacing-md); padding-left: 1.2em; border-left: 2px solid var(--color-grey); } /* Thinner border */

hr { border: 0; height: var(--border-width); background-color: var(--color-border); margin: var(--spacing-xxl) 0; }
hr.hr--short { width: 80px; margin-left: auto; margin-right: auto; background-color: var(--color-secondary); height: 4px; border-radius: 2px; }
hr.hr--left { width: 60px; margin-left: 0; margin-right: auto; background-color: var(--color-secondary); height: 4px; border-radius: 2px; }

/* Inline Icons */
.icon { display: inline-block; vertical-align: middle; width: 1em; height: 1em; fill: currentColor; }
.icon--inline { margin-right: var(--spacing-xs); margin-top: -0.1em; width: 1.1em; height: 1.1em; }
.icon--left { margin-right: var(--spacing-xs); }
.icon--right { margin-left: var(--spacing-xs); }

/* Section Title Styles */
.section-title { margin-bottom: 1.5em; position: relative; } /* Reduced bottom margin */
.section-title--center { text-align: center; padding-bottom: 25px; }
.section-title--center::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 4px; /* Slightly smaller */
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 2px;
}
.section-title--left { text-align: left; padding-bottom: 15px; }
.section-title--left::after {
  content: ''; display: block; width: 70px; height: 4px;
  background-color: var(--color-secondary); border-radius: 2px; margin-top: 15px;
}

/* Section Intro */
.section-intro {
  max-width: 850px; margin-left: auto; margin-right: auto; margin-bottom: 3em; /* Reduced bottom margin */
  font-size: var(--font-size-lg); color: var(--color-text-muted); line-height: 1.8;
}
.section-intro--center { text-align: center; }
.section-intro--left { text-align: left; margin-left: 0; max-width: none; }

/* ==========================================================================
   5. Layout (Container, Grid)
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}
.container--fluid { width: 100%; padding: 0 var(--container-padding); }
.container--narrow { max-width: 900px; }
.container--wide { max-width: 1440px; }

.section-padding { padding-top: var(--section-padding-base); padding-bottom: var(--section-padding-base); }
.section-padding--sm { padding-top: var(--section-padding-sm); padding-bottom: var(--section-padding-sm); }
.section-padding--lg { padding-top: var(--section-padding-lg); padding-bottom: var(--section-padding-lg); }
.section-padding--no-top { padding-top: 0; }
.section-padding--no-bottom { padding-bottom: 0; }

.grid { display: grid; gap: var(--spacing-lg); }
.grid--gap-sm { gap: var(--spacing-sm); }
.grid--gap-md { gap: var(--spacing-md); }
.grid--gap-lg { gap: var(--spacing-lg); }
.grid--gap-xl { gap: var(--spacing-xl); }

.grid--1-col { grid-template-columns: 1fr; }
.grid--2-cols { grid-template-columns: repeat(2, 1fr); }
.grid--3-cols { grid-template-columns: repeat(3, 1fr); }
.grid--4-cols { grid-template-columns: repeat(4, 1fr); }
.grid--auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--auto-fit--lg { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Biased grid - consider if content truly fits this well */
.grid--2-cols-biased { grid-template-columns: 1fr 1.5fr; } /* Adjusted ratio */
.grid--2-cols-biased--reverse { grid-template-columns: 1.5fr 1fr; } /* Adjusted ratio */

.grid--items-start { align-items: start; }
.grid--items-center { align-items: center; }
.grid--items-end { align-items: end; }
.grid--items-stretch { align-items: stretch; } /* Default align-items is stretch for grid */
.grid--justify-center { justify-items: center; }

/* ==========================================================================
   6. Header & Navigation (Includes Mobile Menu Fix)
   ========================================================================== */

/* Header Block */
.site-header--v4 {
  background-color: var(--color-white);
  padding: var(--spacing-sm) 0;
  border-bottom: var(--border-width) solid var(--color-grey);
  transition: padding var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), background-color var(--transition-base);
  z-index: var(--z-index-navigation);
  position: relative; /* Changed from sticky by default */
}

/* Header -- Sticky Modifier (Applied via JS) */
.site-header--v4.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: var(--spacing-xs) 0;
  background-color: rgba(255, 255, 255, 0.98); /* Slightly less transparent */
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(5px);
  animation: slideDownHeader 0.3s ease-out forwards;
}
@keyframes slideDownHeader {
  from { transform: translateY(-100%); opacity: 0.8; }
  to { transform: translateY(0); opacity: 1; }
}
/* Add padding to body when header is sticky (handled by JS usually) */
body.sticky-header-active {
    /* Example: padding-top: height-of-sticky-header; */
    /* This needs to be calculated and applied by JS based on header height */
}

/* Header Container */
.header-container--v4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-lg); /* Increased gap */
}

/* Logo */
.logo--v4 { flex-shrink: 0; }
.logo__svg { display: block; height: 55px; width: auto; max-width: 200px; transition: height var(--transition-base); }
.is-sticky .logo__svg { height: 45px; }

/* --- Desktop Navigation --- */
.main-nav--v4 {
    /* Desktop: takes space between logo and contact */
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Center nav items horizontally */
}

.main-menu--v4 {
    /* Desktop: visible flex row */
    display: flex;
    list-style: none;
    align-items: center;
    gap: var(--spacing-xl); /* Increased gap */
    padding: 0; /* Reset padding */
    margin: 0; /* Reset margin */
}

.main-menu__item { position: relative; }

.main-menu__link {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem; /* Standardized size */
  color: var(--color-text-base);
  text-decoration: none;
  padding: var(--spacing-md) 0; /* Vertical padding for click area */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  transition: color var(--transition-fast);
}

.main-menu__link::after { /* Underline effect */
  content: '';
  position: absolute;
  bottom: calc(var(--spacing-md) - 12px); /* Position underline */
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--color-secondary);
  border-radius: 1.5px;
  transition: width var(--transition-base) var(--transition-timing-function);
}

.main-menu__link:hover,
.main-menu__link:focus,
.main-menu__item:hover > .main-menu__link, /* Target link when hovering item */
.main-menu__link.active,
.main-menu__link[aria-current="page"] {
    color: var(--color-primary); /* Consistent hover color */
}

.main-menu__link:hover::after,
.main-menu__link:focus::after,
.main-menu__link.active::after,
.main-menu__link[aria-current="page"]::after {
    width: 100%; /* Show underline */
}

.main-menu__link.active,
.main-menu__link[aria-current="page"] {
    font-weight: var(--font-weight-bold);
}

.dropdown-arrow {
  width: 0.8em; /* Slightly smaller arrow */
  height: 0.8em;
  stroke-width: 2.5px;
  color: var(--color-medium);
  transition: transform var(--transition-fast);
  margin-left: var(--spacing-xs);
  opacity: 0.7;
}
.main-menu__item:hover > .main-menu__link .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

/* Submenu / Mega Menu (Desktop) */
.submenu--v4, .mega-menu--v4 {
  display: block;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%; /* Position below parent */
  left: 0;
  background-color: var(--color-white);
  list-style: none;
  padding: var(--spacing-sm) 0; /* Vertical padding */
  margin: 0;
  min-width: 240px; /* Min width for standard dropdown */
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  border-top: 3px solid var(--color-secondary);
  z-index: var(--z-index-dropdown);
  transform: translateY(10px);
  transition: opacity var(--transition-fast), visibility 0s linear var(--transition-duration-fast), transform var(--transition-fast);
  pointer-events: none; /* Prevent interaction when hidden */
}

.mega-menu--v4 {
  left: 50%; /* Start from center */
  transform: translateX(-50%) translateY(10px); /* Center align and offset */
  width: auto; /* Let content define width */
  max-width: 90vw; /* Prevent overflow */
  min-width: 700px; /* Ensure decent width */
  display: flex;
  padding: var(--spacing-lg) var(--spacing-xl);
  gap: var(--spacing-xl);
}

/* Show submenu on hover/focus */
.main-menu__item.has-submenu:hover > .submenu--v4,
.main-menu__item.has-submenu:focus-within > .submenu--v4,
.main-menu__item.mega-menu-parent:hover > .mega-menu--v4,
.main-menu__item.mega-menu-parent:focus-within > .mega-menu--v4 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* Move into position */
  transition-delay: 0s;
  pointer-events: auto;
}
.main-menu__item.mega-menu-parent:hover > .mega-menu--v4,
.main-menu__item.mega-menu-parent:focus-within > .mega-menu--v4 {
    transform: translateX(-50%) translateY(0); /* Correct transform for mega menu */
}


.submenu__link {
  display: block;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-base);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.submenu__link:hover, .submenu__link:focus {
    background-color: var(--color-light);
    color: var(--color-primary);
    text-decoration: none;
}

/* Mega Menu Specifics */
.mega-menu__column { flex: 1; min-width: 180px; }
.mega-menu__column--highlight {
    flex-basis: 30%; /* Adjust width */
    background-color: var(--color-light);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
}
.mega-menu__heading {
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mega-menu__list { list-style: none; padding: 0; margin: 0; }
.mega-menu__list--columns { column-count: 2; column-gap: var(--spacing-lg); }
.mega-menu__item { margin-bottom: var(--spacing-xs); }
.mega-menu__link {
    /* Inherits from .submenu__link */
    padding: 6px var(--spacing-xs) 6px 0; /* Adjust padding */
    white-space: normal; /* Allow wrapping */
}
.mega-menu__link:hover, .mega-menu__link:focus {
    background: none;
    padding-left: 5px; /* Indent on hover */
}
.mega-menu__image { max-width: 100%; border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-md); }
.mega-menu__text { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--spacing-md); line-height: 1.6; }
.mega-menu__cta { margin-top: var(--spacing-sm); }

/* --- Mobile Menu Toggle --- */
.menu-toggle--v4 {
  /* ** FIX: Hidden on Desktop by default ** */
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  z-index: calc(var(--z-index-navigation) + 1); /* Above menu panel */
  color: var(--color-primary);
  align-items: center;
  gap: var(--spacing-xs);
  line-height: 1; /* Ensure consistent height */
}

.hamburger-icon { width: 24px; height: 18px; position: relative; }
.hamburger-icon__line {
    display: block; position: absolute; left: 0; width: 100%; height: 3px;
    background-color: currentColor; border-radius: 1.5px;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
}
.hamburger-icon__line--1 { top: 0; }
.hamburger-icon__line--2 { top: 50%; transform: translateY(-50%); }
.hamburger-icon__line--3 { bottom: 0; }

/* Active State (X) */
.menu-toggle--v4[aria-expanded="true"] .hamburger-icon__line--1 { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-toggle--v4[aria-expanded="true"] .hamburger-icon__line--2 { opacity: 0; }
.menu-toggle--v4[aria-expanded="true"] .hamburger-icon__line--3 { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

.menu-toggle__text { font-family: var(--font-heading); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }

/* --- Mobile Submenu Toggle --- */
.submenu-toggle {
    /* ** FIX: Hidden on Desktop by default ** */
    display: none;
    align-items: center; justify-content: center;
    width: 44px; /* Touch target size */
    height: 44px; /* Touch target size */
    position: absolute; /* Position within the list item */
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    background: none; border: none; padding: 0;
    cursor: pointer; color: var(--color-medium);
    font-size: 1.5rem; line-height: 1;
}
.submenu-toggle .plus-minus { display: inline-block; width: 1em; text-align: center; transition: transform var(--transition-fast); font-weight: bold; }
.submenu-toggle[aria-expanded="true"] .plus-minus { transform: rotate(45deg); }

/* Header Contact (Desktop) */
.header-contact--v4 {
    display: flex; /* Visible on desktop */
    align-items: center;
    gap: var(--spacing-lg);
    flex-shrink: 0;
}
.phone-link--v4 {
    font-family: var(--font-heading); font-weight: var(--font-weight-semibold); color: var(--color-primary);
    display: flex; align-items: center; gap: var(--spacing-xs);
    text-decoration: none; transition: color var(--transition-fast);
}
.phone-link--v4:hover, .phone-link--v4:focus { color: var(--color-secondary); text-decoration: none; }
.phone-link--v4 .icon--phone { width: 1.1em; height: 1.1em; stroke-width: 2px; }
.header-cta--v4 { /* Uses button styles */ }

/* Body class when mobile menu is open */
body.mobile-menu-active { overflow: hidden; }

/* ==========================================================================
   7. Hero Section
   ========================================================================== */

.hero--v4 {
  position: relative;
  color: var(--color-white);
  min-height: 75vh; /* Slightly taller */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-padding-lg) var(--container-padding);
  overflow: hidden;
  text-align: center;
}
.hero--video {}

.hero__background {
    position: absolute; inset: 0; z-index: var(--z-index-back);
    background-color: var(--color-primary-dark); /* Darker fallback */
}
.hero__bg-image, .hero__bg-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
}
.hero__bg-video { z-index: 1; }
.hero__bg-image { z-index: 0; }

.hero__overlay {
    position: absolute; inset: 0;
    /* Slightly darker gradient */
    background: linear-gradient(rgba(11, 61, 102, 0.7), rgba(0, 20, 40, 0.88));
    z-index: var(--z-index-base);
}

.hero__container { position: relative; z-index: var(--z-index-content); width: 100%; }
.hero__content--v4 { max-width: 1000px; margin: 0 auto; } /* Wider content area */

.hero__title {
    color: var(--color-white);
    font-size: clamp(2.5rem, 6vw + 0.5rem, 4.2rem); /* Slightly adjusted max */
    font-weight: var(--font-weight-extrabold);
    line-height: 1.2; /* Tighter leading */
    margin-bottom: 0.6em;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); /* Refined shadow */
}

.hero__subtitle {
    font-size: clamp(1.1rem, 2.5vw + 0.2rem, 1.4rem); /* Slightly smaller max */
    color: rgba(255, 255, 255, 0.95);
    font-weight: var(--font-weight-normal);
    line-height: 1.7;
    margin-bottom: 2.5em; /* More space */
    max-width: 850px; /* Wider subtitle */
    margin-left: auto; margin-right: auto;
}

.hero__cta-group--v4 {
    display: flex; justify-content: center; align-items: center;
    gap: var(--spacing-lg); flex-wrap: wrap;
    margin-bottom: 3.5em; /* More space */
}

.trust-badges--v4 {
    margin-top: var(--spacing-xl);
    display: flex; justify-content: center;
    gap: var(--spacing-lg) var(--spacing-xl); /* Adjusted gap */
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem; /* Slightly smaller */
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.3px;
}
.trust-badge { display: flex; align-items: center; gap: var(--spacing-xs); }
.trust-badge__icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; }
.trust-badge__icon[fill="currentColor"] { stroke: none; fill: var(--color-secondary); } /* Example: Fill rating star */
.trust-badge__text { line-height: 1.4; }

.hero__scroll-down {
    position: absolute; bottom: var(--spacing-xl); left: 50%;
    transform: translateX(-50%); z-index: var(--z-index-content);
    color: var(--color-white); opacity: 0.7;
    transition: opacity var(--transition-base), transform var(--transition-base);
    animation: bounce 2.5s infinite ease-in-out;
    padding: var(--spacing-xs); border-radius: 50%; background: rgba(0,0,0,0.15); border: none;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.hero__scroll-down:hover { opacity: 1; transform: translateX(-50%) translateY(4px); animation-play-state: paused; background: rgba(0,0,0,0.25); }
.hero__scroll-down svg { width: 28px; height: 28px; stroke-width: 1.5px; }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-8px); }
  60% { transform: translateX(-50%) translateY(-4px); }
}

/* ==========================================================================
   8. Buttons & Links
   ========================================================================== */

.button {
  display: inline-block;
  font-family: var(--font-heading); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  line-height: 1.5;
  text-align: center; text-decoration: none; white-space: nowrap;
  vertical-align: middle; cursor: pointer; user-select: none;
  border: var(--border-width) solid transparent;
  padding: 0.8em 2em; /* Slightly more padding */
  border-radius: var(--border-radius-pill);
  transition: var(--transition-base);
  box-shadow: var(--shadow-sm);
}
.button:hover, .button:focus {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  opacity: 0.95; /* Slight opacity change on hover */
}
.button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
  opacity: 1;
}
.button:disabled, .button.is-disabled {
  opacity: 0.65; pointer-events: none; box-shadow: none; transform: none;
}

/* Specific Button Styles */
.button--primary { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.button--primary:hover, .button--primary:focus { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-white); }

.button--secondary { background-color: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-dark); }
.button--secondary:hover, .button--secondary:focus { background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color: var(--color-dark); }

.button--accent { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.button--accent:hover, .button--accent:focus { background-color: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-white); }

.button--outline-primary { background-color: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.button--outline-primary:hover, .button--outline-primary:focus { background-color: var(--color-primary); color: var(--color-white); }

.button--outline-secondary { background-color: transparent; border-color: var(--color-secondary); color: var(--color-secondary); }
.button--outline-secondary:hover, .button--outline-secondary:focus { background-color: var(--color-secondary); color: var(--color-dark); }

.button--outline-white { background-color: transparent; border-color: var(--color-white); color: var(--color-white); }
.button--outline-white:hover, .button--outline-white:focus { background-color: var(--color-white); color: var(--color-primary); }

/* Button Sizes */
.button--small { font-size: var(--font-size-sm); padding: 0.6em 1.5em; }
.button--large { font-size: var(--font-size-lg); padding: 0.9em 2.2em; }

/* Button Shapes */
.button--rounded { border-radius: var(--border-radius-md); }
.button--square { border-radius: 0; }

/* Button Icons */
.button--icon-left, .button--icon-right { display: inline-flex; align-items: center; gap: var(--spacing-sm); /* Increased gap */ }
.button--icon-left .icon { order: -1; }

/* Button Pulse Effect (Subtle) */
.button--pulse:hover { animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(from var(--color-secondary) r g b / 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(from var(--color-secondary) r g b / 0); }
  100% { box-shadow: 0 0 0 0 rgba(from var(--color-secondary) r g b / 0); }
}
/* Adjust pulse color for other button types if needed */
.button--primary.button--pulse:hover { /* Example for primary */
    animation-name: pulse-primary;
}
@keyframes pulse-primary {
  0% { box-shadow: 0 0 0 0 rgba(from var(--color-primary) r g b / 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(from var(--color-primary) r g b / 0); }
  100% { box-shadow: 0 0 0 0 rgba(from var(--color-primary) r g b / 0); }
}

/* Loading State (Ensure colors contrast) */
.button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.button.is-loading::after {
    content: ''; position: absolute; width: 1.2em; height: 1.2em; top: 50%; left: 50%;
    margin-top: -0.6em; margin-left: -0.6em; border: 2px solid currentColor; /* Use text color */
    border-right-color: transparent; /* Create notch */ border-radius: 50%;
    animation: spinner-border .75s linear infinite;
    opacity: 0.7;
}
/* Adjust spinner color based on button background */
.button--primary.is-loading::after { border-color: rgba(255, 255, 255, 0.7); border-right-color: transparent; }
.button--secondary.is-loading::after { border-color: rgba(0, 0, 0, 0.5); border-right-color: transparent; }
.button--accent.is-loading::after { border-color: rgba(255, 255, 255, 0.7); border-right-color: transparent; }
.button--outline-primary.is-loading::after { border-color: var(--color-primary); border-right-color: transparent; opacity: 0.7; }
.button--outline-secondary.is-loading::after { border-color: var(--color-secondary); border-right-color: transparent; opacity: 0.7; }
.button--outline-white.is-loading::after { border-color: var(--color-white); border-right-color: transparent; opacity: 0.7; }

@keyframes spinner-border { to { transform: rotate(360deg); } }

/* Text Links */
.link { color: var(--color-link); text-decoration: underline; font-weight: var(--font-weight-semibold); }
.link:hover, .link:focus { color: var(--color-link-hover); }

.learn-more-link {
    display: inline-flex; align-items: center; gap: var(--spacing-xs);
    font-weight: var(--font-weight-bold); color: var(--color-primary);
    text-decoration: none; border-bottom: 2px solid transparent; /* Add space for hover effect */
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.learn-more-link:hover, .learn-more-link:focus {
    color: var(--color-secondary);
    text-decoration: none; /* Remove default underline */
    border-bottom-color: var(--color-secondary); /* Underline on hover */
}
.learn-more-link .icon--arrow-right { transition: transform var(--transition-fast); }
.learn-more-link:hover .icon--arrow-right, .learn-more-link:focus .icon--arrow-right { transform: translateX(4px); }

/* ==========================================================================
   9. Common Sections (Refinements)
   ========================================================================== */

/* ----- Intro Section ----- */
.intro--v4 { /* Padding handled by .section-padding */ }
.intro__image-wrap { position: relative; }
.intro__image { border-radius: var(--border-radius-lg); /* Softer rounding */ }
.intro__text-wrap {}

/* ----- Client Focus Section ----- */
.client-focus--v4 {}
.client-card {
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl) var(--spacing-lg);
    color: var(--color-white);
    background-size: cover;
    background-position: center center;
    position: relative;
    overflow: hidden;
    display: flex; /* Align content */
    flex-direction: column;
    justify-content: center;
    min-height: 450px; /* Ensure decent height */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4); /* Text shadow for readability */
}
.client-card__content { position: relative; z-index: 2; }
.client-card__title { color: var(--color-white); margin-bottom: 0.7em; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.client-card__description { color: rgba(255, 255, 255, 0.95); margin-bottom: 1.5em; line-height: 1.8; }
.client-card .button { margin-top: var(--spacing-sm); }

/* ----- How It Works Section ----- */
.how-it-works--v4 { position: relative; }
/* Add connectors for desktop view using pseudo-elements */
.steps-container--v4.grid--4-cols {
    position: relative;
}
@media (min-width: 992px) { /* Show connectors only on desktop */
    .steps-container--v4.grid--4-cols > .step-item--v4:not(:last-child)::after {
        content: '';
        position: absolute;
        top: calc(32px + var(--spacing-md) / 2); /* Align with icon center */
        left: calc(100% + var(--spacing-lg) / 2); /* Position between items */
        width: calc(var(--spacing-lg) * 1.5); /* Span the gap */
        height: 2px;
        background: linear-gradient(to right, var(--color-accent), var(--color-secondary));
        transform: translateX(-50%); /* Center the line */
        opacity: 0.5;
        z-index: var(--z-index-back);
    }
     /* Adjust connector for 3rd item if grid breaks differently */
    .steps-container--v4.grid--4-cols > .step-item--v4:nth-child(4n)::after {
        display: none; /* No connector after last item in row */
    }
}

.step-item--v4 {
    text-align: center; padding: var(--spacing-lg) var(--spacing-md);
    background: var(--color-white); border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md); border-top: 5px solid var(--color-accent);
    display: flex; flex-direction: column; height: 100%; /* Equal height cards */
    position: relative; /* For number positioning */
}
.step-item__number {
    position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
    background-color: var(--color-secondary); color: var(--color-dark);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: var(--font-weight-bold);
    font-size: 1.1rem; box-shadow: var(--shadow-sm);
}
.step-item__icon { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md); color: var(--color-primary); }
.step-item__icon svg { width: 50px; height: 50px; stroke-width: 1.2px; }
.step-item__title { font-size: 1.3rem; margin-bottom: 0.6em; color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.step-item__description { font-size: var(--font-size-base); color: var(--color-text-muted); line-height: 1.65; margin-top: auto; } /* Push description down */


/* ----- Product Highlight Section ----- */
.product-highlight--v4 {}
.grid--product-cards { gap: var(--spacing-lg); }
.product-card--v4 {
    display: flex; flex-direction: column; height: 100%; /* Ensure equal height */
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden; /* Clip image rounding */
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.product-card--v4:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.product-card__image-wrap { position: relative; overflow: hidden; aspect-ratio: 16 / 10; } /* Fixed aspect ratio */
.product-card__image { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: var(--spacing-lg); flex-grow: 1; display: flex; flex-direction: column; }
.product-card__title { font-size: 1.25rem; margin-bottom: 0.6em; color: var(--color-primary); }
.product-card__description { font-size: var(--font-size-base); color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--spacing-md); flex-grow: 1; }
.product-card__link { margin-top: auto; /* Push link to bottom */ align-self: flex-start; /* Align left */ }

/* ----- Testimonials Section ----- */
.testimonials--v4 {}
/* Assumes a JS slider like Slick or Swiper is used */
.testimonial-carousel--v4 { position: relative; /* For controls positioning */ }
.testimonial-carousel__track { display: flex; /* Required by most sliders */ }
.testimonial-carousel__slide {
    flex-shrink: 0; /* Required by most sliders */
    width: 100%; /* Base width */
    padding: 0 var(--spacing-md); /* Space between slides */
}
.testimonial-card {
    background-color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border-left: 5px solid var(--color-primary); /* Use primary color */
    margin: var(--spacing-md) 0; /* Adjust margin */
    min-height: 280px; /* Ensure minimum height */
    display: flex;
    flex-direction: column;
}
.testimonial-card::before { display: none; } /* Remove large quote mark */
.testimonial-card__rating { margin-bottom: var(--spacing-md); color: var(--color-secondary); }
.testimonial-card__rating svg { width: 20px; height: 20px; margin-right: 2px; }
.testimonial-card__text { font-family: var(--font-body); font-style: normal; font-size: 1.05rem; line-height: 1.7; color: var(--color-text-base); margin-bottom: var(--spacing-lg); flex-grow: 1; }
.testimonial-card__footer { margin-top: auto; font-size: var(--font-size-base); }
.testimonial-card__footer::before { display: none; }
.testimonial-card__name { font-weight: var(--font-weight-bold); color: var(--color-primary); display: block; }
.testimonial-card__location { font-size: var(--font-size-sm); color: var(--color-text-muted); display: block; margin-top: var(--spacing-xs); }

/* Carousel Controls */
.carousel-controls--v4 { display: flex; justify-content: center; align-items: center; margin-top: var(--spacing-lg); gap: var(--spacing-md); }
.carousel-button {
    background-color: transparent; border: 1px solid var(--color-border);
    color: var(--color-primary); width: 44px; height: 44px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--transition-base);
}
.carousel-button:hover, .carousel-button:focus { background-color: var(--color-light); border-color: var(--color-primary); color: var(--color-primary); }
.carousel-button svg { width: 24px; height: 24px; stroke-width: 2; }
.carousel-dots { display: flex; gap: var(--spacing-sm); }
.carousel-dot {
    width: 12px; height: 12px; border-radius: 50%; background-color: var(--color-grey);
    border: none; padding: 0; cursor: pointer; transition: background-color var(--transition-fast);
}
.carousel-dot.is-active { background-color: var(--color-secondary); } /* Active dot style */

/* ----- CTA Section ----- */
.cta--v4 { position: relative; }
.cta__overlay--gradient {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(rgba(11, 61, 102, 0.85), rgba(0, 20, 40, 0.92)); /* Darker overlay */
}
.cta__container { position: relative; z-index: 2; }
.cta__content--v4 { max-width: 850px; margin: 0 auto; }
.cta__title--alt-font { font-family: var(--font-heading); color: var(--color-white); font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.8em; }
.cta__text--lead { color: rgba(255, 255, 255, 0.9); font-size: 1.15rem; line-height: 1.8; margin-bottom: 2em; }
.cta__button-group { display: flex; justify-content: center; align-items: center; gap: var(--spacing-lg); flex-wrap: wrap; }

/* ----- Blog Snippet Section ----- */
.blog-snippet--v4 {}
.grid--blog-cards {} /* Uses product card grid */
.blog-card--v4 { /* Reuse product card styles or customize */
    /* Example customization: */
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex; flex-direction: column; height: 100%;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.blog-card--v4:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.blog-card__image-link {}
.blog-card__image { aspect-ratio: 16 / 10; object-fit: cover; }
.blog-card__content { padding: var(--spacing-lg); flex-grow: 1; display: flex; flex-direction: column; }
.blog-card__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--spacing-sm); }
.blog-card__date {}
.blog-card__category { color: var(--color-accent); font-weight: var(--font-weight-semibold); text-decoration: none; }
.blog-card__category:hover { text-decoration: underline; }
.blog-card__title { font-size: 1.2rem; margin-bottom: 0.6em; line-height: 1.4; }
.blog-card__title a { color: var(--color-primary); text-decoration: none; }
.blog-card__title a:hover { color: var(--color-secondary); text-decoration: underline; }
.blog-card__excerpt { color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--spacing-md); flex-grow: 1; }
.blog-card__read-more { margin-top: auto; align-self: flex-start; /* Uses learn-more-link styles */ }


/* Common More Link Style */
.more-link--v4 { margin-top: var(--spacing-xl); }

/* ==========================================================================
   10 to 18. Page Specific Styles (Placeholders)
   ========================================================================== */
/* Add specific page styles here as needed */
/* e.g., .page-about .timeline {} */
/* e.g., .page-contact .contact-form {} */

/* ==========================================================================
   19. Footer
   ========================================================================== */
.site-footer--v4 {
    background-color: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.8);
    padding-top: var(--section-padding-base);
    font-size: var(--font-size-base);
}
.footer-container--v4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: var(--spacing-xl);
    padding-bottom: var(--section-padding-base);
}
.footer-col {}
.footer-col--about {}
.footer-logo-link { display: inline-block; margin-bottom: var(--spacing-lg); }
.footer-logo--v4 { height: 60px; width: auto; max-width: 220px; }
.footer-col__text { color: rgba(255, 255, 255, 0.75); line-height: 1.7; margin-bottom: var(--spacing-lg); }
.footer-col__text--small { font-size: var(--font-size-sm); margin-bottom: var(--spacing-sm); }

.social-media--v4 { display: flex; gap: var(--spacing-lg); margin-top: var(--spacing-lg); }
.social-media__link {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: inline-block; /* Needed for transform */
}
.social-media__link:hover, .social-media__link:focus {
    color: var(--color-white);
    transform: scale(1.1);
}
.social-media__link svg { width: 24px; height: 24px; fill: currentColor; }

.footer-col--links {}
.footer-col__title {
    font-family: var(--font-heading);
    font-size: 1.1rem; font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-col__title--sub { font-size: 1rem; margin-top: var(--spacing-lg); border-bottom: none; }

.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list__item { margin-bottom: var(--spacing-sm); }
.footer-list__link { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color var(--transition-fast), padding-left var(--transition-fast); }
.footer-list__link:hover, .footer-list__link:focus { color: var(--color-white); padding-left: 5px; text-decoration: underline; }

.footer-col--contact {}
.footer-address { font-style: normal; margin-bottom: var(--spacing-lg); line-height: 1.6; }
.footer-address strong { color: var(--color-white); display: block; margin-bottom: var(--spacing-xs); }
.footer-address__note { display: block; font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.6); margin-top: var(--spacing-xs); }

.footer-contact-list { list-style: none; padding: 0; margin: 0 0 var(--spacing-lg) 0; }
.footer-contact-list__item { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.footer-contact-list__item .icon { flex-shrink: 0; color: var(--color-secondary); }
.footer-contact__link { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.footer-contact__link:hover, .footer-contact__link:focus { color: var(--color-white); text-decoration: underline; }

/* Newsletter Form */
.newsletter-form--v4 { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.newsletter-form__input {
    flex-grow: 1;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    padding: 0.7em 1em;
    border-radius: var(--border-radius-sm);
    min-width: 200px; /* Prevent excessive shrinking */
}
.newsletter-form__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter-form__button {
    /* Uses button styles */
    flex-shrink: 0;
    border-radius: var(--border-radius-sm); /* Match input */
    padding: 0.7em 1.5em; /* Match input roughly */
}

.form-status-message {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    width: 100%; /* Span full width */
    display: none; /* Hidden initially */
}
.form-status-message.success { background-color: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success); display: block; }
.form-status-message.error { background-color: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error); display: block; }


/* Footer Bottom */
.footer-bottom--v4 {
    background-color: rgba(0, 0, 0, 0.2); /* Slightly darker band */
    padding: var(--spacing-lg) 0;
    margin-top: var(--section-padding-base);
    text-align: center;
    font-size: var(--font-size-sm);
}
.footer-bottom__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping */
    gap: var(--spacing-md);
}
.footer-bottom__copyright { color: rgba(255, 255, 255, 0.6); margin: 0; }
.footer-legal-nav {}
.footer-legal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm) var(--spacing-lg); }
.footer-legal-list__item {}
.footer-legal-list__link { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.footer-legal-list__link:hover, .footer-legal-list__link:focus { color: var(--color-white); text-decoration: underline; }

/* ==========================================================================
   20. Components
   ========================================================================== */

/* Checklists */
.checklist--v4 { list-style: none; padding: 0; margin: var(--spacing-lg) 0; }
.checklist__item { display: flex; align-items: flex-start; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.checklist__icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--color-primary); margin-top: 0.2em; /* Align better with text */ }
.checklist__text { flex-grow: 1; line-height: 1.65; }
.checklist__text strong { font-weight: var(--font-weight-semibold); color: var(--color-dark); }

/* Accordion (Basic Structure - Needs JS for functionality) */
.accordion {}
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__header {}
.accordion__button { /* Style as a button */
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; padding: var(--spacing-md) 0;
    background: none; border: none; text-align: left;
    font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
    font-size: 1.1rem; color: var(--color-primary); cursor: pointer;
}
.accordion__button::after { /* Indicator */
    content: '+'; font-size: 1.5rem; font-weight: bold;
    color: var(--color-medium); transition: transform var(--transition-fast);
}
.accordion__button[aria-expanded="true"]::after { transform: rotate(45deg); }
.accordion__content {
    max-height: 0; overflow: hidden;
    transition: max-height var(--transition-slow) ease-in-out, padding var(--transition-slow) ease-in-out;
    padding: 0 var(--spacing-lg);
}
.accordion__item.is-open .accordion__content {
    max-height: 1000px; /* Arbitrary large height */
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);
}
.accordion__content p:last-child { margin-bottom: 0; }

/* Other components (Modals, Tabs etc.) would go here */

/* ==========================================================================
   21. Animations & Transitions
   ========================================================================== */
/* Scroll Animation Placeholders (Requires JS Intersection Observer) */
.js-animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--transition-timing-function), transform 0.6s var(--transition-timing-function);
}
.js-animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Example specific animations */
[data-animation="fadeIn"] { /* Base fade */ }
[data-animation="fadeInDown"] { transform: translateY(-30px); }
[data-animation="fadeInUp"] { transform: translateY(30px); }
[data-animation="fadeInLeft"] { transform: translateX(-40px); }
[data-animation="fadeInRight"] { transform: translateX(40px); }
/* Add delays using transition-delay based on data-delay attribute (applied by JS or inline) */

/* ==========================================================================
   22. Back to Top Button
   ========================================================================== */
.back-to-top--v4 {
    position: fixed;
    bottom: 30px; right: 30px;
    width: 48px; height: 48px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    z-index: var(--z-index-sticky);
    opacity: 0; visibility: hidden; /* Hidden by default */
    transform: translateY(20px) scale(0.9);
    transition: opacity var(--transition-base), visibility 0s linear var(--transition-duration-base), transform var(--transition-base);
}
.back-to-top--v4:hover, .back-to-top--v4:focus {
    background-color: var(--color-secondary);
    color: var(--color-dark);
    transform: translateY(-2px) scale(1); /* Hover effect */
}
.back-to-top--v4.is-visible {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
    transition-delay: 0s;
}
.back-to-top--v4.is-hidden { /* Explicit hidden state */
    opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.9);
}
.back-to-top--v4 svg { width: 24px; height: 24px; stroke-width: 2.5px; }

/* ==========================================================================
   23. Print Styles
   ========================================================================== */
@media print {
  body { background-color: var(--color-white); color: var(--color-black); font-size: 12pt; }
  a { text-decoration: underline; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
  a[href^="#"] { display: none; } /* Hide internal links */
  img { max-width: 100% !important; page-break-inside: avoid; }
  h1, h2, h3, h4, h5, h6 { color: #000; page-break-after: avoid; }
  p, blockquote, ul, ol { page-break-inside: avoid; }
  .site-header, .site-footer, .hero, .cta, .back-to-top, .menu-toggle, .carousel-controls, .video, .map-embed, .js-animate-on-scroll { display: none !important; }
  .container { max-width: 100%; padding: 0; }
  .section-padding { padding: 2cm 0; }
  .grid { display: block; } /* Stack grid items */
  .product-card, .step-item, .blog-card { page-break-inside: avoid; margin-bottom: 1cm; border: 1px solid #ccc; box-shadow: none; }
  .bg--light, .bg--gradient--light { background: none; }
  .text-primary, .text-secondary, .text-accent { color: #000; }
}

/* ==========================================================================
   24. Responsive Design (Refinements & Mobile Menu Fix)
   ========================================================================== */

/* --- XL Devices (~1400px and up) --- */
@media (min-width: 1400px) {
  :root { --container-max-width: 1320px; --font-size-base: 1.05rem; }
  .mega-menu--v4 { padding: var(--spacing-xl) var(--spacing-xxxl); min-width: 800px; }
}

/* --- Large Devices (~1200px to 1399px) --- */
@media (max-width: 1399.98px) {
   /* Adjustments if needed */
}

/* --- Medium Devices (Tablets, ~992px to 1199px) --- */
@media (max-width: 1199.98px) {
  :root { --container-max-width: 960px; }
  .grid--4-cols { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } /* Adjust minmax */
  .mega-menu--v4 { padding: var(--spacing-lg) var(--spacing-xl); min-width: 600px; }
  .header-contact--v4 { gap: var(--spacing-md); }
  .main-menu--v4 { gap: var(--spacing-lg); } /* Reduce gap slightly */
}

/* --- Small Devices (Tablets & Large Phones, ~768px to 991px) --- */
@media (max-width: 991.98px) {
  :root { font-size: 93.75%; } /* 15px base */
  .container { max-width: 720px; }
  .section-padding { padding-top: calc(var(--section-padding-base) * 0.85); padding-bottom: calc(var(--section-padding-base) * 0.85); }
  .section-padding--lg { padding-top: calc(var(--section-padding-lg) * 0.85); padding-bottom: calc(var(--section-padding-lg) * 0.85); }

  /* *** MOBILE HEADER & NAVIGATION ACTIVATION *** */
  .menu-toggle--v4 {
      display: inline-flex; /* ** FIX: Show the hamburger button ** */
      order: 3; /* Position after logo/contact */
      margin-left: var(--spacing-sm);
  }

  .main-nav--v4 {
      order: 1; /* Navigation structure comes first */
      flex-grow: 0; /* Don't expand */
      position: static; /* Reset position */
  }

  .logo--v4 { order: 2; flex-grow: 1; padding-right: var(--spacing-md); }
  .header-contact--v4 {
      order: 3; /* Contact comes last */
      margin-left: auto; /* Push to right */
      /* Optionally hide parts of contact info */
      /* .phone-link--v4 { display: none; } */
  }

  /* Mobile Menu Panel */
  .main-menu--v4 {
      /* Hide desktop row display */
      display: none;
      /* Style as a full-width dropdown panel */
      flex-direction: column;
      position: absolute;
      top: 100%; /* Position below header */
      left: 0;
      width: 100%;
      max-height: calc(100vh - 60px); /* Limit height, adjust 60px based on header height */
      overflow-y: auto;
      background-color: var(--color-white);
      box-shadow: var(--shadow-lg);
      border-top: var(--border-width) solid var(--color-grey);
      z-index: calc(var(--z-index-navigation) - 1); /* Below header, above content */
      padding: var(--spacing-md) 0; /* Panel padding */
      gap: 0; /* Reset gap */
      /* Animation */
      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
      transform: translateY(-10px);
      opacity: 0;
      visibility: hidden;
  }
  .main-menu--v4.is-active {
      display: flex; /* Show the menu */
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
  }

  /* Mobile Menu Items & Links */
  .main-menu__item {
      width: 100%;
      border-bottom: 1px solid var(--color-grey);
      margin: 0;
      position: relative; /* For submenu toggle */
  }
  .main-menu__item:last-child { border-bottom: none; }
  .main-menu__link {
      display: flex;
      justify-content: space-between; /* Push toggle to right */
      align-items: center;
      padding: var(--spacing-md) var(--spacing-lg);
      width: 100%;
      font-weight: var(--font-weight-semibold); /* Bolder mobile links */
  }
  .main-menu__link::after { display: none; } /* Hide desktop underline */
  .main-menu__item.has-submenu > .main-menu__link .dropdown-arrow { display: none; } /* Hide desktop arrow */

  /* Mobile Submenu & Toggle */
  .main-menu__item .submenu-toggle {
      display: inline-flex; /* ** FIX: Show the '+' toggle button ** */
      position: absolute; /* Absolute positioning */
      right: 0; /* Align to the right */
      top: 0;
      height: 100%; /* Make it full height of parent */
      width: 60px; /* Wider touch target */
      transform: none; /* Reset transform */
      z-index: 2; /* Above link */
  }
  .main-menu__link { padding-right: 60px; /* Make space for toggle */ }


  .main-menu__item .submenu--v4,
  .main-menu__item .mega-menu--v4 {
      /* Mobile Submenu Panel */
      display: block; /* Ensure it takes space for transition */
      max-height: 0; /* Collapsed by default */
      overflow: hidden;
      position: static; /* Not absolute */
      box-shadow: none; border-top: none; padding: 0; transform: none;
      transition: max-height var(--transition-slow) ease-in-out, padding var(--transition-slow) ease-in-out;
      background-color: var(--color-light); /* Subtle background */
      opacity: 1; visibility: visible; pointer-events: auto; /* Reset desktop states */
      min-width: auto; /* Reset desktop width */
      width: 100%;
  }
  .main-menu__item .submenu--v4.is-open,
  .main-menu__item .mega-menu--v4.is-open {
      max-height: 1500px; /* Expand (Arbitrarily large) */
      padding-top: var(--spacing-sm); /* Add padding when open */
      padding-bottom: var(--spacing-md);
  }
  .main-menu__item .submenu__link {
      padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-xl); /* Indent mobile sublinks */
      font-size: 0.95rem;
  }

  /* Mobile Mega Menu */
  .mega-menu--v4 { display: block !important; padding: 0; flex-direction: column; gap: 0; max-width: 100%; }
  .mega-menu__column { padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-xl); }
  .mega-menu__column--highlight { padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--spacing-xl); margin: 0 var(--spacing-md); }
  .mega-menu__heading { font-size: 0.9rem; }
  .mega-menu__list--columns { column-count: 1; }
  .mega-menu__image { display: none; } /* Hide promo image on mobile */


  /* Other Tablet Adjustments */
  .grid--3-cols, .grid--4-cols { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .grid--2-cols-biased, .grid--2-cols-biased--reverse { grid-template-columns: 1fr; }
  .how-it-works--v4 .steps-container--v4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .footer-container--v4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .testimonial-carousel__slide { width: calc(50% - var(--spacing-md) * 2); } /* Show 2 slides */
}

/* --- Extra Small Devices (Phones, below 768px) --- */
@media (max-width: 767.98px) {
  :root { font-size: 87.5%; } /* 14px base */
  .container { max-width: 100%; padding: 0 15px; } /* Full width */
  .section-padding { padding-top: calc(var(--section-padding-base) * 0.7); padding-bottom: calc(var(--section-padding-base) * 0.7); }
  .section-padding--lg { padding-top: calc(var(--section-padding-lg) * 0.7); padding-bottom: calc(var(--section-padding-lg) * 0.7); }

  /* Stack grids */
  .grid--2-cols, .grid--3-cols, .grid--4-cols,
  .grid--auto-fit, .grid--auto-fit--lg { grid-template-columns: 1fr; }
  .grid { gap: var(--spacing-md); }

  .hero__title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero__subtitle { font-size: 1rem; }
  .hero__cta-group--v4 { flex-direction: column; gap: var(--spacing-md); }
  .hero__cta-group--v4 .button { width: 90%; max-width: 320px; }
  .trust-badges--v4 { gap: var(--spacing-md); justify-content: flex-start; text-align: left; } /* Align left */
  .trust-badge { width: calc(50% - var(--spacing-md)); } /* Two badges per row */

  /* Hide header contact block entirely on smaller screens */
  .header-contact--v4 { display: none; }

  /* Footer stacking */
  .footer-container--v4 { text-align: left; } /* Align text left */
  .footer-col { margin-bottom: var(--spacing-xl); }
  .social-media--v4 { justify-content: flex-start; }
  .newsletter-form--v4 { max-width: 100%; }
  .footer-bottom__container { flex-direction: column; text-align: center; gap: var(--spacing-md); }
  .footer-legal-list { justify-content: center; }

  /* Adjust testimonial carousel */
  .testimonial-carousel__slide { width: calc(100% - var(--spacing-md) * 2); } /* Show 1 slide */

  .client-card { min-height: auto; } /* Let content define height */
}

/* --- Smallest Devices (Portrait Phones, below 576px) --- */
@media (max-width: 575.98px) {
  .hero--v4 { min-height: 70vh; } /* Adjust height */
  .hero__title { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .hero__scroll-down { bottom: var(--spacing-lg); width: 40px; height: 40px; }
  .hero__scroll-down svg { width: 24px; height: 24px; }

  .button--large { font-size: 1rem; padding: 0.8em 1.5em; }
  .button--small { font-size: 0.8rem; padding: 0.5em 1em; }

  .menu-toggle__text { display: none; } /* Hide "Menu" text */
  .menu-toggle--v4 { padding: var(--spacing-xs); }

  .back-to-top--v4 { width: 40px; height: 40px; bottom: 15px; right: 15px; }
  .back-to-top--v4 svg { width: 20px; height: 20px; }

  .step-item__icon svg { width: 40px; height: 40px; }
  .step-item__number { width: 32px; height: 32px; font-size: 1rem; top: -16px; }
  .step-item__title { font-size: 1.15rem; }

  .footer-container--v4 { gap: var(--spacing-lg); }
}