/* ============================================
   COBUBO - DESIGN SYSTEM
   Pixel Perfect Flat | Clean Bold Systematic
   ============================================ */

@layer base, layout, components, utilities;

@layer base {

  :root {
    
    --color-primary: #0D5C63;
    --color-primary-dark: #093E44;
    --color-primary-light: #1A7A83;
    --color-accent: #E8A020;
    --color-accent-dark: #C4851A;
    --color-accent-light: #F0B84A;

    --color-surface: #F4F7F6;
    --color-surface-alt: #EAF0EF;
    --color-surface-dark: #1C2826;

    --color-text-primary: #111F1E;
    --color-text-secondary: #3D5250;
    --color-text-muted: #6B8280;
    --color-text-inverse: #F4F7F6;

    --color-border: #D0DEDD;
    --color-border-strong: #A8C0BE;

    --color-electric: #0D5C63;
    --color-heat: #C4521A;
    --color-water: #1A5FA8;

    --color-white: #FFFFFF;
    --color-black: #0A1514;

    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Work Sans', sans-serif;

    
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --text-3xl: clamp(2rem, 1.6rem + 2vw, 3rem);
    --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --text-hero: clamp(3rem, 2.5rem + 3vw, 5.5rem);

    
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    
    --container-max: 1200px;
    --container-padding: clamp(1rem, 5vw, 2rem);

    
    --nav-height: 72px;
  }

  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

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

  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1;
  }

  img {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul, ol {
    list-style: none;
  }

  button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
  }

  h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    line-height: 1.15;
    color: var(--color-text-primary);
  }
}

@layer layout {

  .main-navigation-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    block-size: var(--nav-height);
    display: flex;
    align-items: center;
    transition: background-color var(--transition-base), backdrop-filter var(--transition-base), border-color var(--transition-base);
    border-block-end: 1px solid transparent;
  }

  .main-navigation-header.main-navigation-header--scrolled {
    background-color: color-mix(in srgb, var(--color-surface) 85%, transparent);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-block-end-color: color-mix(in srgb, var(--color-border) 60%, transparent);
  }

  .main-navigation-container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }

  .main-navigation-logo-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .main-navigation-logo-image {
    block-size: 36px;
    inline-size: auto;
  }

  .main-navigation-links-wrapper {
    display: none;
    align-items: center;
    gap: var(--space-6);
    margin-inline-start: auto;
  }

  .main-navigation-link {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    padding-block: var(--space-2);
    position: relative;
    transition: color var(--transition-fast);
  }

  .main-navigation-link::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 2px;
    background-color: var(--color-accent);
    transition: inline-size var(--transition-base);
  }

  .main-navigation-link:hover,
  .main-navigation-link--active {
    color: var(--color-primary);
  }

  .main-navigation-link:hover::after,
  .main-navigation-link--active::after {
    inline-size: 100%;
  }

  .main-navigation-cta-button {
    display: none;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-accent);
    padding-block: var(--space-3);
    padding-inline: var(--space-6);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
  }

  .main-navigation-cta-button:hover {
    background-color: var(--color-accent-dark);
    transform: translateY(-1px);
  }

  .mobile-menu-toggle-button {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
    margin-inline-start: auto;
    min-block-size: 44px;
    min-inline-size: 44px;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu-toggle-bar {
    display: block;
    inline-size: 24px;
    block-size: 2px;
    background-color: var(--color-text-primary);
    transition: transform var(--transition-base), opacity var(--transition-fast);
    border-radius: var(--radius-full);
  }

  .mobile-menu-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background-color: var(--color-primary-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
  }

  .mobile-menu-fullscreen-overlay.mobile-menu-fullscreen-overlay--open {
    opacity: 1;
    pointer-events: all;
  }

  .mobile-menu-close-button {
    position: absolute;
    inset-block-start: var(--space-6);
    inset-inline-end: var(--space-6);
    color: var(--color-text-inverse);
    font-size: var(--text-2xl);
    min-block-size: 44px;
    min-inline-size: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), transform var(--transition-fast);
  }

  .mobile-menu-close-button:hover {
    color: var(--color-accent);
    transform: rotate(90deg);
  }

  .mobile-menu-navigation-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
  }

  .mobile-menu-navigation-link {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-text-inverse);
    transition: color var(--transition-fast), transform var(--transition-fast);
  }

  .mobile-menu-navigation-link:hover {
    color: var(--color-accent);
    transform: translateX(8px);
  }

  .main-site-footer {
    background-color: var(--color-surface-dark);
    color: var(--color-text-inverse);
    margin-block-start: auto;
  }

  .main-site-footer-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-block: var(--space-16);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .main-site-footer-logo {
    block-size: 32px;
    inline-size: auto;
    filter: brightness(0) invert(1);
    margin-block-end: var(--space-4);
  }

  .main-site-footer-brand-tagline {
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--color-text-inverse) 65%, transparent);
    max-inline-size: 280px;
    line-height: 1.6;
  }

  .main-site-footer-column-title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-accent);
    margin-block-end: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .main-site-footer-nav-link {
    display: block;
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent);
    padding-block: var(--space-1);
    transition: color var(--transition-fast), padding-inline-start var(--transition-fast);
  }

  .main-site-footer-nav-link:hover {
    color: var(--color-text-inverse);
    padding-inline-start: var(--space-2);
  }

  .main-site-footer-contact-item {
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-1);
  }

  .main-site-footer-contact-item i {
    color: var(--color-accent);
    inline-size: 16px;
    flex-shrink: 0;
  }

  .main-site-footer-bottom {
    border-block-start: 1px solid color-mix(in srgb, var(--color-border) 20%, transparent);
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-block: var(--space-6);
  }

  .main-site-footer-copyright {
    font-size: var(--text-xs);
    color: color-mix(in srgb, var(--color-text-inverse) 45%, transparent);
  }
}

@layer components {

  
  .homepage-hero-section {
    position: relative;
    padding-block-start: calc(var(--nav-height) + var(--space-16));
    padding-block-end: var(--space-24);
    padding-inline: var(--container-padding);
    background-color: var(--color-primary-dark);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    max-inline-size: 100%;
  }

  .homepage-hero-background-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(color-mix(in srgb, var(--color-primary-light) 8%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--color-primary-light) 8%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
  }

  .homepage-hero-content-wrapper {
    position: relative;
    z-index: 2;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    inline-size: 100%;
  }

  .homepage-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
    color: var(--color-accent-light);
    font-size: var(--text-xs);
    font-family: var(--font-heading);
    font-weight: 600;
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--radius-full);
    margin-block-end: var(--space-6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .homepage-hero-headline {
    font-size: var(--text-hero);
    font-weight: 800;
    color: var(--color-text-inverse);
    margin-block-end: var(--space-6);
    line-height: 1.05;
  }

  .homepage-hero-headline-accent {
    color: var(--color-accent);
  }

  .homepage-hero-subheadline {
    font-size: var(--text-lg);
    color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent);
    max-inline-size: 52ch;
    margin-block-end: var(--space-10);
    line-height: 1.6;
  }

  .homepage-hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-end: var(--space-12);
  }

  .homepage-hero-primary-cta {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-black);
    background-color: var(--color-accent);
    padding-block: var(--space-4);
    padding-inline: var(--space-8);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    min-block-size: 52px;
  }

  .homepage-hero-primary-cta:hover {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
  }

  .homepage-hero-secondary-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-inverse);
    padding-block: var(--space-4);
    padding-inline: var(--space-6);
    border: 1px solid color-mix(in srgb, var(--color-text-inverse) 30%, transparent);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
    min-block-size: 52px;
  }

  .homepage-hero-secondary-cta:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
  }

  .homepage-hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  .homepage-hero-trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
    font-weight: 500;
  }

  .homepage-hero-trust-item i {
    color: var(--color-accent);
    font-size: 0.875rem;
  }

  .homepage-hero-visual-wrapper {
    position: relative;
    z-index: 2;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    inline-size: 100%;
  }

  .homepage-hero-dashboard-mockup {
    background-color: color-mix(in srgb, var(--color-primary) 60%, var(--color-primary-dark));
    border: 1px solid color-mix(in srgb, var(--color-primary-light) 50%, transparent);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-inline-size: 480px;
  }

  .homepage-hero-dashboard-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    background-color: color-mix(in srgb, var(--color-primary-dark) 80%, transparent);
    border-block-end: 1px solid color-mix(in srgb, var(--color-primary-light) 30%, transparent);
  }

  .homepage-hero-dashboard-dots {
    display: flex;
    gap: var(--space-2);
  }

  .homepage-hero-dashboard-dots span {
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
  }

  .homepage-hero-dashboard-title {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text-inverse) 50%, transparent);
    margin-inline-start: auto;
  }

  .homepage-hero-dashboard-body {
    padding: var(--space-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .homepage-hero-stat-card {
    background-color: color-mix(in srgb, var(--color-primary-dark) 50%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary-light) 25%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: border-color var(--transition-fast);
  }

  .homepage-hero-stat-card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  }

  .homepage-hero-stat-card--primary {
    grid-column: 1 / -1;
    background-color: color-mix(in srgb, var(--color-primary-light) 25%, transparent);
    border-color: color-mix(in srgb, var(--color-primary-light) 40%, transparent);
  }

  .homepage-hero-stat-icon {
    font-size: var(--text-lg);
    color: var(--color-accent);
    margin-block-end: var(--space-2);
  }

  .homepage-hero-stat-label {
    font-size: var(--text-xs);
    color: color-mix(in srgb, var(--color-text-inverse) 55%, transparent);
    margin-block-end: var(--space-1);
    font-weight: 500;
  }

  .homepage-hero-stat-value {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-inverse);
  }

  .homepage-hero-stat-trend {
    font-size: var(--text-xs);
    color: color-mix(in srgb, var(--color-text-inverse) 50%, transparent);
    margin-block-start: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .homepage-hero-stat-trend--down {
    color: #4DB87A;
  }

  .homepage-hero-alert-card {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
    border-radius: var(--radius-md);
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-accent-light);
  }

  
  .homepage-features-overview-section {
    padding-block: var(--space-24);
    background-color: var(--color-white);
  }

  .homepage-features-overview-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .homepage-features-overview-header {
    margin-block-end: var(--space-12);
  }

  .homepage-features-overview-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-block-end: var(--space-4);
  }

  .homepage-features-overview-description {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-inline-size: 50ch;
  }

  .homepage-features-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .homepage-feature-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: border-color var(--transition-base), background-color var(--transition-base);
  }

  .homepage-feature-card:hover {
    border-color: var(--color-primary-light);
    background-color: color-mix(in srgb, var(--color-primary) 3%, var(--color-white));
  }

  .homepage-feature-card-icon-wrapper {
    inline-size: 52px;
    block-size: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    margin-block-end: var(--space-5);
  }

  .homepage-feature-card-icon-wrapper--electric {
    background-color: color-mix(in srgb, var(--color-electric) 12%, transparent);
    color: var(--color-electric);
  }

  .homepage-feature-card-icon-wrapper--heat {
    background-color: color-mix(in srgb, var(--color-heat) 12%, transparent);
    color: var(--color-heat);
  }

  .homepage-feature-card-icon-wrapper--water {
    background-color: color-mix(in srgb, var(--color-water) 12%, transparent);
    color: var(--color-water);
  }

  .homepage-feature-card-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-block-end: var(--space-3);
  }

  .homepage-feature-card-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-block-end: var(--space-5);
    line-height: 1.65;
  }

  .homepage-feature-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .homepage-feature-card-list li {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .homepage-feature-card-list li::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    flex-shrink: 0;
  }

  
  .homepage-how-it-works-section {
    padding-block: var(--space-24);
    background-color: var(--color-surface);
  }

  .homepage-how-it-works-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .homepage-how-it-works-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-block-end: var(--space-3);
  }

  .homepage-how-it-works-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-block-end: var(--space-12);
    max-inline-size: 20ch;
  }

  .homepage-how-it-works-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .homepage-step-item {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
  }

  .homepage-step-number {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: color-mix(in srgb, var(--color-primary) 15%, transparent);
    flex-shrink: 0;
    inline-size: 72px;
    line-height: 1;
    padding-block-start: var(--space-1);
  }

  .homepage-step-content {
    padding-block-end: var(--space-8);
  }

  .homepage-step-connector {
    block-size: var(--space-6);
    inline-size: 2px;
    background-color: var(--color-border);
    margin-inline-start: 35px;
  }

  .homepage-step-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-block-end: var(--space-3);
    color: var(--color-primary);
  }

  .homepage-step-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    max-inline-size: 55ch;
    line-height: 1.65;
  }

  
  .homepage-dashboard-showcase-section {
    padding-block: var(--space-24);
    background-color: var(--color-white);
  }

  .homepage-dashboard-showcase-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
  }

  .homepage-dashboard-showcase-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-block-end: var(--space-3);
  }

  .homepage-dashboard-showcase-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-block-end: var(--space-5);
  }

  .homepage-dashboard-showcase-text-body {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-block-end: var(--space-4);
    max-inline-size: 50ch;
  }

  .homepage-dashboard-showcase-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-block-start: var(--space-2);
    transition: gap var(--transition-fast), color var(--transition-fast);
  }

  .homepage-dashboard-showcase-link:hover {
    color: var(--color-accent);
    gap: var(--space-3);
  }

  .homepage-dashboard-showcase-image-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
  }

  .homepage-dashboard-showcase-image {
    inline-size: 100%;
    block-size: 320px;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }

  .homepage-dashboard-showcase-image-wrapper:hover .homepage-dashboard-showcase-image {
    transform: scale(1.03);
  }

  
  .homepage-alerts-section {
    padding-block: var(--space-24);
    background-color: var(--color-surface);
  }

  .homepage-alerts-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
  }

  .homepage-alerts-image-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
  }

  .homepage-alerts-image {
    inline-size: 100%;
    block-size: 320px;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }

  .homepage-alerts-image-wrapper:hover .homepage-alerts-image {
    transform: scale(1.03);
  }

  .homepage-alerts-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-block-end: var(--space-3);
  }

  .homepage-alerts-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-block-end: var(--space-5);
  }

  .homepage-alerts-body {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-block-end: var(--space-8);
    max-inline-size: 52ch;
  }

  .homepage-alerts-feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .homepage-alerts-feature-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
  }

  .homepage-alerts-feature-icon {
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--text-base);
  }

  .homepage-alerts-feature-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .homepage-alerts-feature-text strong {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-text-primary);
  }

  .homepage-alerts-feature-text span {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }

  
  .homepage-service-detail-section {
    padding-block: var(--space-24);
    background-color: var(--color-primary-dark);
  }

  .homepage-service-detail-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .homepage-service-detail-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-text-inverse);
    margin-block-end: var(--space-3);
  }

  .homepage-service-detail-subtitle {
    font-size: var(--text-base);
    color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
    margin-block-end: var(--space-10);
  }

  .homepage-service-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .homepage-service-detail-card {
    background-color: color-mix(in srgb, var(--color-primary-light) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary-light) 30%, transparent);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    cursor: pointer;
    transition: border-color var(--transition-base), background-color var(--transition-base);
  }

  .homepage-service-detail-card:hover,
  .homepage-service-detail-card:focus {
    border-color: var(--color-accent);
    background-color: color-mix(in srgb, var(--color-primary-light) 20%, transparent);
    outline: none;
  }

  .homepage-service-detail-card-front {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .homepage-service-detail-card-icon {
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    flex-shrink: 0;
  }

  .homepage-service-detail-card-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-inverse);
    flex: 1;
    min-inline-size: 120px;
  }

  .homepage-service-detail-card-preview {
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
    inline-size: 100%;
    margin-block-start: var(--space-1);
  }

  .homepage-service-detail-card-toggle {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    transition: gap var(--transition-fast);
  }

  .homepage-service-detail-card-expanded {
    max-block-size: 0;
    overflow: hidden;
    transition: max-block-size var(--transition-slow), padding var(--transition-slow);
  }

  .homepage-service-detail-card-expanded p {
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent);
    line-height: 1.65;
    padding-block-start: var(--space-4);
    padding-inline-start: calc(44px + var(--space-4));
  }

  .homepage-service-detail-card.homepage-service-detail-card--open .homepage-service-detail-card-expanded {
    max-block-size: 300px;
  }

  .homepage-service-detail-card.homepage-service-detail-card--open .homepage-service-detail-card-toggle i {
    transform: rotate(180deg);
  }

  
  .homepage-for-whom-section {
    padding-block: var(--space-24);
    background-color: var(--color-white);
  }

  .homepage-for-whom-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .homepage-for-whom-header {
    margin-block-end: var(--space-10);
  }

  .homepage-for-whom-title {
    font-size: var(--text-3xl);
    font-weight: 800;
  }

  .homepage-for-whom-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-block-end: var(--space-8);
  }

  .homepage-for-whom-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-base), transform var(--transition-base);
  }

  .homepage-for-whom-card:hover {
    border-color: var(--color-primary-light);
    transform: translateY(-3px);
  }

  .homepage-for-whom-card-image {
    inline-size: 100%;
    block-size: 220px;
    object-fit: cover;
  }

  .homepage-for-whom-card-content {
    padding: var(--space-6);
    background-color: var(--color-surface);
  }

  .homepage-for-whom-card-title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-block-end: var(--space-3);
  }

  .homepage-for-whom-card-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.65;
  }

  .homepage-for-whom-cta-wrapper {
    text-align: center;
  }

  .homepage-for-whom-cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    padding-block: var(--space-3);
    padding-inline: var(--space-6);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast), gap var(--transition-fast);
  }

  .homepage-for-whom-cta-link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    gap: var(--space-3);
  }

  
  .homepage-contact-cards-section {
    padding-block: var(--space-20);
    background-color: var(--color-surface-alt);
  }

  .homepage-contact-cards-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .homepage-contact-cards-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-block-end: var(--space-8);
  }

  .homepage-contact-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .homepage-contact-card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: border-color var(--transition-base), transform var(--transition-base);
    min-block-size: 80px;
  }

  .homepage-contact-card:hover {
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
  }

  .homepage-contact-card-icon-wrapper {
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    flex-shrink: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .homepage-contact-card:hover .homepage-contact-card-icon-wrapper {
    background-color: var(--color-primary);
    color: var(--color-white);
  }

  .homepage-contact-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .homepage-contact-card-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .homepage-contact-card-value {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-primary);
  }

  .homepage-contact-card-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  
  .homepage-service-areas-section {
    padding-block: var(--space-24);
    background-color: var(--color-white);
  }

  .homepage-service-areas-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .homepage-service-areas-header {
    margin-block-end: var(--space-10);
  }

  .homepage-service-areas-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-block-end: var(--space-4);
  }

  .homepage-service-areas-subtitle {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    max-inline-size: 55ch;
  }

  .homepage-service-areas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .homepage-service-areas-map-visual {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .homepage-service-areas-region {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    transition: border-color var(--transition-fast);
  }

  .homepage-service-areas-region:hover {
    border-color: var(--color-primary-light);
  }

  .homepage-service-areas-region i {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .homepage-service-areas-region--primary i {
    color: var(--color-accent);
  }

  .homepage-service-areas-region strong {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
  }

  .homepage-service-areas-region span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .homepage-service-areas-description-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-block-end: var(--space-5);
  }

  .homepage-service-areas-description-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-block-end: var(--space-4);
    max-inline-size: 52ch;
  }

  .homepage-service-areas-contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-block-start: var(--space-4);
    transition: gap var(--transition-fast), color var(--transition-fast);
  }

  .homepage-service-areas-contact-link:hover {
    color: var(--color-accent);
    gap: var(--space-3);
  }

  
  .inner-page-hero-section {
    padding-block-start: calc(var(--nav-height) + var(--space-12));
    padding-block-end: var(--space-16);
    background-color: var(--color-primary);
    padding-inline: var(--container-padding);
  }

  .inner-page-hero-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
  }

  .inner-page-hero-title {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--color-text-inverse);
    margin-block: var(--space-4);
  }

  .inner-page-hero-subtitle {
    font-size: var(--text-lg);
    color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent);
    max-inline-size: 58ch;
    line-height: 1.6;
  }

  
  .breadcrumb-navigation {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .breadcrumb-link {
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
    transition: color var(--transition-fast);
  }

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

  .breadcrumb-separator {
    font-size: var(--text-xs);
    color: color-mix(in srgb, var(--color-text-inverse) 40%, transparent);
  }

  .breadcrumb-current {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent-light);
  }

  
  .about-story-section {
    padding-block: var(--space-24);
    background-color: var(--color-white);
  }

  .about-story-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
  }

  .about-story-image-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
  }

  .about-story-image {
    inline-size: 100%;
    block-size: 340px;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }

  .about-story-image-wrapper:hover .about-story-image {
    transform: scale(1.03);
  }

  .about-story-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-block-end: var(--space-3);
  }

  .about-story-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-block-end: var(--space-5);
  }

  .about-story-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-block-end: var(--space-4);
    max-inline-size: 55ch;
  }

  .about-values-section {
    padding-block: var(--space-24);
    background-color: var(--color-surface);
  }

  .about-values-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .about-values-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-block-end: var(--space-10);
  }

  .about-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .about-value-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: border-color var(--transition-base), transform var(--transition-base);
  }

  .about-value-card:hover {
    border-color: var(--color-primary-light);
    transform: translateY(-3px);
  }

  .about-value-card-icon {
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    margin-block-end: var(--space-5);
  }

  .about-value-card-title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-block-end: var(--space-3);
  }

  .about-value-card-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.65;
  }

  .about-team-section {
    padding-block: var(--space-24);
    background-color: var(--color-white);
  }

  .about-team-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
  }

  .about-team-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-block-end: var(--space-5);
  }

  .about-team-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-block-end: var(--space-4);
    max-inline-size: 55ch;
  }

  .about-team-image-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
  }

  .about-team-image {
    inline-size: 100%;
    block-size: 320px;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }

  .about-team-image-wrapper:hover .about-team-image {
    transform: scale(1.03);
  }

  .about-contact-cta-section {
    padding-block: var(--space-20);
    background-color: var(--color-primary);
    text-align: center;
    padding-inline: var(--container-padding);
  }

  .about-contact-cta-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
  }

  .about-contact-cta-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-text-inverse);
    margin-block-end: var(--space-4);
  }

  .about-contact-cta-text {
    font-size: var(--text-lg);
    color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent);
    margin-block-end: var(--space-8);
    max-inline-size: 50ch;
    margin-inline: auto;
  }

  .about-contact-cta-button {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary-dark);
    background-color: var(--color-accent);
    padding-block: var(--space-4);
    padding-inline: var(--space-10);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    min-block-size: 52px;
  }

  .about-contact-cta-button:hover {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
  }

  
  .audit-intro-section {
    padding-block: var(--space-24);
    background-color: var(--color-white);
  }

  .audit-intro-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
  }

  .audit-intro-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-block-end: var(--space-5);
  }

  .audit-intro-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-block-end: var(--space-4);
    max-inline-size: 55ch;
  }

  .audit-intro-image-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
  }

  .audit-intro-image {
    inline-size: 100%;
    block-size: 340px;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }

  .audit-intro-image-wrapper:hover .audit-intro-image {
    transform: scale(1.03);
  }

  .audit-features-section {
    padding-block: var(--space-24);
    background-color: var(--color-surface);
  }

  .audit-features-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .audit-features-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-block-end: var(--space-12);
  }

  .audit-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .audit-feature-block {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: border-color var(--transition-base);
  }

  .audit-feature-block:hover {
    border-color: var(--color-primary-light);
  }

  .audit-feature-block-number {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: color-mix(in srgb, var(--color-primary) 15%, transparent);
    flex-shrink: 0;
    line-height: 1;
  }

  .audit-feature-block-title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-block-end: var(--space-3);
    color: var(--color-primary);
  }

  .audit-feature-block-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.65;
    max-inline-size: 55ch;
  }

  .audit-reporting-section {
    padding-block: var(--space-24);
    background-color: var(--color-white);
  }

  .audit-reporting-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
  }

  .audit-reporting-image-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
  }

  .audit-reporting-image {
    inline-size: 100%;
    block-size: 340px;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }

  .audit-reporting-image-wrapper:hover .audit-reporting-image {
    transform: scale(1.03);
  }

  .audit-reporting-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-block-end: var(--space-3);
  }

  .audit-reporting-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-block-end: var(--space-5);
  }

  .audit-reporting-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-block-end: var(--space-4);
    max-inline-size: 52ch;
  }

  .audit-reporting-feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
  }

  .audit-reporting-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--radius-full);
  }

  .audit-reporting-tag i {
    color: var(--color-accent);
  }

  .audit-integration-section {
    padding-block: var(--space-24);
    background-color: var(--color-surface);
  }

  .audit-integration-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .audit-integration-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-block-end: var(--space-4);
  }

  .audit-integration-subtitle {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-block-end: var(--space-10);
    max-inline-size: 55ch;
  }

  .audit-integration-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .audit-integration-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: border-color var(--transition-base), transform var(--transition-base);
  }

  .audit-integration-card:hover {
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
  }

  .audit-integration-card-icon {
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    margin-block-end: var(--space-4);
  }

  .audit-integration-card-title {
    font-size: var(--text-base);
    font-weight: 700;
    margin-block-end: var(--space-3);
  }

  .audit-integration-card-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.65;
  }

  .audit-cta-section {
    padding-block: var(--space-20);
    background-color: var(--color-primary);
    text-align: center;
    padding-inline: var(--container-padding);
  }

  .audit-cta-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
  }

  .audit-cta-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-inverse);
    margin-block-end: var(--space-4);
  }

  .audit-cta-text {
    font-size: var(--text-base);
    color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent);
    margin-block-end: var(--space-8);
    max-inline-size: 50ch;
    margin-inline: auto;
  }

  .audit-cta-button {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary-dark);
    background-color: var(--color-accent);
    padding-block: var(--space-4);
    padding-inline: var(--space-10);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    min-block-size: 52px;
  }

  .audit-cta-button:hover {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
  }

  
  .firms-overview-section {
    padding-block: var(--space-24);
    background-color: var(--color-white);
  }

  .firms-overview-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .firms-type-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
  }

  .firms-type-card-image-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
  }

  .firms-type-card-image {
    inline-size: 100%;
    block-size: 300px;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }

  .firms-type-card-image-wrapper:hover .firms-type-card-image {
    transform: scale(1.03);
  }

  .firms-type-card-icon {
    inline-size: 52px;
    block-size: 52px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    margin-block-end: var(--space-4);
  }

  .firms-type-card-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-block-end: var(--space-4);
  }

  .firms-type-card-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-block-end: var(--space-4);
    max-inline-size: 55ch;
  }

  .firms-type-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }

  .firms-type-tag {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border-radius: var(--radius-full);
  }

  .firms-quick-list-section {
    padding-block: var(--space-20);
    background-color: var(--color-surface);
  }

  .firms-quick-list-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .firms-quick-list-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-block-end: var(--space-8);
  }

  .firms-quick-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .firms-quick-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-base);
    font-weight: 500;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    min-block-size: 52px;
  }

  .firms-quick-item:hover {
    border-color: var(--color-primary-light);
    color: var(--color-primary);
  }

  .firms-quick-item i {
    color: var(--color-accent);
    inline-size: 20px;
    text-align: center;
    flex-shrink: 0;
  }

  .firms-not-for-section {
    padding-block: var(--space-20);
    background-color: var(--color-white);
  }

  .firms-not-for-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    max-inline-size: 800px;
  }

  .firms-not-for-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-block-end: var(--space-5);
  }

  .firms-not-for-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-block-end: var(--space-6);
    max-inline-size: 65ch;
  }

  .firms-not-for-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    transition: gap var(--transition-fast), color var(--transition-fast);
  }

  .firms-not-for-link:hover {
    color: var(--color-accent);
    gap: var(--space-3);
  }

  
  .contact-main-section {
    padding-block: var(--space-16);
    background-color: var(--color-surface);
  }

  .contact-main-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .contact-form-wrapper {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
  }

  .contact-wizard-progress-bar {
    display: flex;
    align-items: center;
    margin-block-end: var(--space-8);
  }

  .contact-wizard-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
  }

  .contact-wizard-step-number {
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--radius-full);
    background-color: var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    transition: background-color var(--transition-base), color var(--transition-base);
  }

  .contact-wizard-step-indicator--active .contact-wizard-step-number,
  .contact-wizard-step-indicator--completed .contact-wizard-step-number {
    background-color: var(--color-primary);
    color: var(--color-white);
  }

  .contact-wizard-step-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
  }

  .contact-wizard-step-indicator--active .contact-wizard-step-label {
    color: var(--color-primary);
  }

  .contact-wizard-step-connector {
    flex: 1;
    block-size: 2px;
    background-color: var(--color-border);
    margin-inline: var(--space-2);
    margin-block-end: var(--space-5);
    transition: background-color var(--transition-base);
  }

  .contact-wizard-step-connector--active {
    background-color: var(--color-primary);
  }

  .contact-form-step-panel {
    display: none;
  }

  .contact-form-step-panel--active {
    display: block;
  }

  .contact-form-step-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-block-end: var(--space-6);
  }

  .contact-form-field-group {
    margin-block-end: var(--space-5);
  }

  .contact-form-field-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-block-end: var(--space-2);
  }

  .contact-form-required-mark {
    color: var(--color-heat);
  }

  .contact-form-field-input,
  .contact-form-field-select,
  .contact-form-field-textarea {
    inline-size: 100%;
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    min-block-size: 48px;
    appearance: none;
  }

  .contact-form-field-input:focus,
  .contact-form-field-select:focus,
  .contact-form-field-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-white);
  }

  .contact-form-field-textarea {
    resize: vertical;
    min-block-size: 140px;
  }

  .contact-form-privacy-group {
    margin-block-start: var(--space-4);
  }

  .contact-form-privacy-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
  }

  .contact-form-privacy-checkbox {
    margin-block-start: 3px;
    flex-shrink: 0;
    inline-size: 18px;
    block-size: 18px;
    accent-color: var(--color-primary);
  }

  .contact-form-privacy-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
  }

  .contact-form-privacy-link {
    color: var(--color-primary);
    text-decoration: underline;
  }

  .contact-form-step-navigation {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    margin-block-start: var(--space-6);
    flex-wrap: wrap;
  }

  .contact-form-next-button,
  .contact-form-submit-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-primary);
    padding-block: var(--space-3);
    padding-inline: var(--space-6);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    min-block-size: 48px;
    cursor: pointer;
  }

  .contact-form-next-button:hover,
  .contact-form-submit-button:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
  }

  .contact-form-submit-button {
    background-color: var(--color-accent);
    color: var(--color-black);
  }

  .contact-form-submit-button:hover {
    background-color: var(--color-accent-dark);
  }

  .contact-form-back-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-secondary);
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), color var(--transition-fast);
    min-block-size: 48px;
    cursor: pointer;
    background: none;
  }

  .contact-form-back-button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .contact-info-sidebar-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
  }

  .contact-info-sidebar-title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-block-end: var(--space-6);
  }

  .contact-info-sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--color-border);
    transition: background-color var(--transition-fast);
    border-radius: var(--radius-md);
    padding-inline: var(--space-2);
  }

  .contact-info-sidebar-item:last-of-type {
    border-block-end: none;
  }

  a.contact-info-sidebar-item:hover {
    background-color: var(--color-surface);
  }

  .contact-info-sidebar-icon {
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .contact-info-sidebar-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .contact-info-sidebar-text strong {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .contact-info-sidebar-text span {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }

  .contact-info-sidebar-hours {
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  .contact-info-sidebar-hours-title {
    font-size: var(--text-sm);
    font-weight: 700;
    margin-block-end: var(--space-3);
  }

  .contact-info-sidebar-hours p {
    font-size: var(--text-sm
);
    color: var(--color-text-secondary);
    padding-block: var(--space-1);
  }

  .contact-map-section {
    padding-block: var(--space-16);
    background-color: var(--color-white);
  }

  .contact-map-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .contact-map-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-block-end: var(--space-6);
  }

  .contact-map-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
  }

  .contact-map-iframe {
    display: block;
    inline-size: 100%;
  }

  .contact-faq-section {
    padding-block: var(--space-20);
    background-color: var(--color-surface);
  }

  .contact-faq-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .contact-faq-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-block-end: var(--space-10);
  }

  .contact-faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .contact-faq-item {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: border-color var(--transition-base);
  }

  .contact-faq-item:hover {
    border-color: var(--color-primary-light);
  }

  .contact-faq-question {
    font-size: var(--text-base);
    font-weight: 700;
    margin-block-end: var(--space-3);
    color: var(--color-primary);
  }

  .contact-faq-answer {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.65;
  }

  
  .thanks-hero-section {
    padding-block-start: calc(var(--nav-height) + var(--space-16));
    padding-block-end: var(--space-24);
    background-color: var(--color-primary);
    text-align: center;
    padding-inline: var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 55vh;
  }

  .thanks-hero-content {
    max-inline-size: 600px;
    margin-inline: auto;
  }

  .thanks-hero-icon {
    font-size: 4rem;
    color: var(--color-accent);
    margin-block-end: var(--space-6);
    animation: thanks-icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  @keyframes thanks-icon-pop {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  .thanks-hero-title {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--color-text-inverse);
    margin-block-end: var(--space-5);
  }

  .thanks-hero-subtitle {
    font-size: var(--text-lg);
    color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent);
    line-height: 1.6;
  }

  .thanks-next-steps-section {
    padding-block: var(--space-20);
    background-color: var(--color-white);
  }

  .thanks-next-steps-container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    text-align: center;
  }

  .thanks-next-steps-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-block-end: var(--space-10);
  }

  .thanks-next-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-block-end: var(--space-12);
    text-align: start;
  }

  .thanks-next-step-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: border-color var(--transition-base);
  }

  .thanks-next-step-item:hover {
    border-color: var(--color-primary-light);
  }

  .thanks-next-step-icon {
    inline-size: 52px;
    block-size: 52px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    margin-block-end: var(--space-5);
  }

  .thanks-next-step-title {
    font-size: var(--text-base);
    font-weight: 700;
    margin-block-end: var(--space-3);
  }

  .thanks-next-step-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.65;
  }

  .thanks-return-wrapper {
    text-align: center;
  }

  .thanks-return-button {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-primary);
    padding-block: var(--space-4);
    padding-inline: var(--space-10);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    min-block-size: 52px;
  }

  .thanks-return-button:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
  }

  
  .legal-content-section {
    padding-block: var(--space-16);
    background-color: var(--color-white);
  }

  .legal-content-container {
    max-inline-size: 800px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .legal-content-body {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.75;
  }

  .legal-intro-paragraph {
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    line-height: 1.7;
    margin-block-end: var(--space-10);
    padding-block-end: var(--space-8);
    border-block-end: 2px solid var(--color-border);
  }

  .legal-section-heading {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-start: var(--space-10);
    margin-block-end: var(--space-4);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
  }

  .legal-section-heading:first-of-type {
    border-block-start: none;
    padding-block-start: 0;
  }

  .legal-subsection-heading {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-start: var(--space-6);
    margin-block-end: var(--space-3);
  }

  .legal-content-body p {
    margin-block-end: var(--space-4);
  }

  .legal-list {
    list-style: disc;
    padding-inline-start: var(--space-6);
    margin-block: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .legal-list li {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.65;
  }

  .legal-inline-link {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
  }

  .legal-inline-link:hover {
    color: var(--color-accent);
  }

  
  .legal-terms-block {
    margin-block-end: var(--space-8);
    padding-block-end: var(--space-8);
    border-block-end: 1px solid var(--color-border);
  }

  .legal-terms-block:last-child {
    border-block-end: none;
  }

  .legal-terms-block-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-block-end: var(--space-4);
  }

  
  .legal-cookies-category-block {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-block-end: var(--space-6);
  }

  .legal-cookies-category-block--necessary {
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    background-color: color-mix(in srgb, var(--color-primary) 4%, var(--color-white));
  }

  .legal-cookies-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-4);
    flex-wrap: wrap;
  }

  .legal-cookies-category-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    border: none;
    padding: 0;
  }

  .legal-cookies-category-badge {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    background-color: var(--color-border);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border-radius: var(--radius-full);
    white-space: nowrap;
  }

  .legal-cookies-category-badge--required {
    color: var(--color-primary-dark);
    background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  }

  
  .cookie-consent-corner-card {
    position: fixed;
    inset-block-end: var(--space-6);
    inset-inline-start: var(--space-6);
    z-index: 9000;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    max-inline-size: 320px;
    transform: translateX(calc(-100% - var(--space-6)));
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .cookie-consent-corner-card.cookie-consent-corner-card--visible {
    transform: translateX(0);
  }

  .cookie-consent-corner-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .cookie-consent-corner-card-icon {
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    flex-shrink: 0;
  }

  .cookie-consent-corner-card-text {
    flex: 1;
  }

  .cookie-consent-corner-card-title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-end: var(--space-1);
  }

  .cookie-consent-corner-card-description {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
  }

  .cookie-consent-corner-card-description a {
    color: var(--color-primary);
    text-decoration: underline;
  }

  .cookie-consent-corner-card-buttons {
    display: flex;
    gap: var(--space-2);
  }

  .cookie-consent-accept-button {
    flex: 1;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-primary);
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
    min-block-size: 36px;
    cursor: pointer;
    border: none;
  }

  .cookie-consent-accept-button:hover {
    background-color: var(--color-primary-dark);
  }

  .cookie-consent-settings-button {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), color var(--transition-fast);
    min-block-size: 36px;
    cursor: pointer;
    white-space: nowrap;
  }

  .cookie-consent-settings-button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .cookie-consent-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background-color: color-mix(in srgb, var(--color-black) 60%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }

  .cookie-consent-modal-overlay.cookie-consent-modal-overlay--open {
    opacity: 1;
    pointer-events: all;
  }

  .cookie-consent-modal-panel {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    max-inline-size: 520px;
    inline-size: 100%;
    max-block-size: 90dvh;
    overflow-y: auto;
    transform: translateY(16px);
    transition: transform var(--transition-base);
  }

  .cookie-consent-modal-overlay--open .cookie-consent-modal-panel {
    transform: translateY(0);
  }

  .cookie-consent-modal-title {
    font-size: var(--text-xl);
    font-weight: 800;
    margin-block-end: var(--space-2);
  }

  .cookie-consent-modal-description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-block-end: var(--space-6);
    line-height: 1.6;
  }

  .cookie-consent-modal-category {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-block-end: var(--space-3);
  }

  .cookie-consent-modal-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-2);
  }

  .cookie-consent-modal-category-name {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
  }

  .cookie-consent-modal-category-description {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
  }

  .cookie-consent-toggle {
    position: relative;
    inline-size: 44px;
    block-size: 24px;
    flex-shrink: 0;
  }

  .cookie-consent-toggle input {
    opacity: 0;
    inline-size: 0;
    block-size: 0;
    position: absolute;
  }

  .cookie-consent-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

  .cookie-consent-toggle-slider::before {
    content: '';
    position: absolute;
    block-size: 18px;
    inline-size: 18px;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    background-color: var(--color-white);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
  }

  .cookie-consent-toggle input:checked + .cookie-consent-toggle-slider {
    background-color: var(--color-primary);
  }

  .cookie-consent-toggle input:checked + .cookie-consent-toggle-slider::before {
    transform: translateX(20px);
  }

  .cookie-consent-toggle input:disabled + .cookie-consent-toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .cookie-consent-modal-actions {
    display: flex;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
    flex-wrap: wrap;
  }

  .cookie-consent-modal-save-button {
    flex: 1;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-primary);
    padding-block: var(--space-3);
    padding-inline: var(--space-5);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    min-block-size: 44px;
  }

  .cookie-consent-modal-save-button:hover {
    background-color: var(--color-primary-dark);
  }

  .cookie-consent-modal-accept-all-button {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-black);
    background-color: var(--color-accent);
    padding-block: var(--space-3);
    padding-inline: var(--space-5);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    min-block-size: 44px;
  }

  .cookie-consent-modal-accept-all-button:hover {
    background-color: var(--color-accent-dark);
  }

  .cookie-consent-reopen-button {
    position: fixed;
    inset-block-end: var(--space-6);
    inset-inline-start: var(--space-6);
    z-index: 8900;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-white);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
  }

  .cookie-consent-reopen-button:hover {
    background-color: var(--color-primary-dark);
    transform: scale(1.1);
  }

  .cookie-consent-reopen-button.cookie-consent-reopen-button--visible {
    display: flex;
  }

}

@layer utilities {

  

  @media (min-width: 640px) {
    .homepage-features-overview-grid {
      grid-template-columns: 1fr 1fr;
    }

    .homepage-feature-card--large {
      grid-column: 1 / -1;
    }

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

    .homepage-for-whom-grid {
      grid-template-columns: 1fr 1fr;
    }

    .homepage-service-detail-grid {
      grid-template-columns: 1fr 1fr;
    }

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

    .audit-features-grid {
      grid-template-columns: 1fr 1fr;
    }

    .audit-integration-grid {
      grid-template-columns: 1fr 1fr;
    }

    .firms-quick-list-grid {
      grid-template-columns: 1fr 1fr;
    }

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

    .thanks-next-steps-grid {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  @media (min-width: 768px) {
    .main-navigation-links-wrapper {
      display: flex;
    }

    .main-navigation-cta-button {
      display: inline-flex;
    }

    .mobile-menu-toggle-button {
      display: none;
    }

    .homepage-hero-section {
      grid-template-columns: 1fr 1fr;
      align-items: center;
      min-block-size: 100dvh;
    }

    .homepage-dashboard-showcase-container {
      grid-template-columns: 1fr 1fr;
    }

    .homepage-alerts-container {
      grid-template-columns: 1fr 1fr;
    }

    .homepage-service-areas-grid {
      grid-template-columns: 1fr 1fr;
    }

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

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

    .audit-intro-container {
      grid-template-columns: 1fr 1fr;
    }

    .audit-reporting-container {
      grid-template-columns: 1fr 1fr;
    }

    .firms-type-card {
      grid-template-columns: 1fr 1fr;
    }

    .firms-type-card--reverse .firms-type-card-image-wrapper {
      order: 2;
    }

    .contact-main-container {
      grid-template-columns: 1fr 380px;
    }

    .main-site-footer-container {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }

  @media (min-width: 1024px) {
    .homepage-features-overview-grid {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .homepage-feature-card--large {
      grid-column: 1;
    }

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

    .homepage-for-whom-grid {
      grid-template-columns: 1fr 1fr 1fr;
    }

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

    .audit-integration-grid {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .firms-quick-list-grid {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  
  body {
    overflow-x: hidden;
  }

  
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  
  ::selection {
    background-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
    color: var(--color-text-primary);
  }

  
  img {
    image-rendering: auto;
  }

  
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}