:root {
  --color-primary-base:    #1B4F72;
  --color-accent-base:     #2E86AB;
  --color-warm-base:       #F5F0E8;

  
  --color-primary-900:     color-mix(in oklch, var(--color-primary-base) 95%, black 5%);
  --color-primary-800:     var(--color-primary-base);
  --color-primary-700:     color-mix(in oklch, var(--color-primary-base), white 15%);
  --color-primary-600:     color-mix(in oklch, var(--color-primary-base), white 25%);
  --color-primary-200:     color-mix(in oklch, var(--color-primary-base), white 75%);
  --color-primary-100:     color-mix(in oklch, var(--color-primary-base), white 88%);
  --color-primary-50:      color-mix(in oklch, var(--color-primary-base), white 94%);

  
  --color-accent-700:      color-mix(in oklch, var(--color-accent-base), black 10%);
  --color-accent-600:      var(--color-accent-base);
  --color-accent-400:      color-mix(in oklch, var(--color-accent-base), white 30%);
  --color-accent-100:      color-mix(in oklch, var(--color-accent-base), white 85%);
  --color-accent-50:       color-mix(in oklch, var(--color-accent-base), white 93%);

  
  --color-paper-warm:      var(--color-warm-base);
  --color-paper-tinted:    color-mix(in oklch, var(--color-warm-base), var(--color-primary-base) 5%);
  --color-paper-white:     #FAFAF7;

  
  --color-text-primary:    #1A2332;
  --color-text-secondary:  #4A5568;
  --color-text-muted:      #718096;
  --color-text-on-dark:    #F0F4F8;

  
  --shadow-paper-sm:
    0 1px 3px color-mix(in oklch, var(--color-primary-base), transparent 85%),
    0 1px 2px color-mix(in oklch, var(--color-primary-base), transparent 90%);
  --shadow-paper-md:
    0 4px 6px color-mix(in oklch, var(--color-primary-base), transparent 85%),
    0 2px 4px color-mix(in oklch, var(--color-primary-base), transparent 88%);
  --shadow-paper-lg:
    0 10px 24px color-mix(in oklch, var(--color-primary-base), transparent 80%),
    0 4px 8px color-mix(in oklch, var(--color-primary-base), transparent 88%),
    0 1px 2px color-mix(in oklch, var(--color-primary-base), transparent 92%);
  --shadow-paper-top:
    0 -4px 12px color-mix(in oklch, var(--color-primary-base), transparent 88%),
    0 -1px 3px color-mix(in oklch, var(--color-primary-base), transparent 92%);
  --shadow-nav:
    0 2px 8px color-mix(in oklch, var(--color-primary-base), transparent 82%),
    0 1px 3px color-mix(in oklch, var(--color-primary-base), transparent 88%);
  --shadow-nav-scroll:
    0 4px 16px color-mix(in oklch, var(--color-primary-base), transparent 75%),
    0 2px 6px color-mix(in oklch, var(--color-primary-base), transparent 85%);
  --shadow-card:
    0 2px 8px color-mix(in oklch, var(--color-primary-base), transparent 88%),
    0 0 1px color-mix(in oklch, var(--color-primary-base), transparent 92%);
  --shadow-card-hover:
    0 8px 24px color-mix(in oklch, var(--color-primary-base), transparent 78%),
    0 2px 6px color-mix(in oklch, var(--color-primary-base), transparent 87%);

  
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  
  --nav-height: 72px;
}


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

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--color-paper-white);
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

ul { list-style: none; }

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


h1, h2, h3, h4, h5, h6 {
  font-family: 'Familjen Grotesk', sans-serif;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.section-eyebrow-label {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-sm);
}
.section-eyebrow-label--light { color: color-mix(in oklch, var(--color-accent-400), white 30%); }

.section-primary-heading {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  margin-bottom: var(--space-lg);
  color: var(--color-text-primary);
}
.section-primary-heading--light { color: var(--color-text-on-dark); }

.section-subheading-text {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-top: calc(-1 * var(--space-sm));
  margin-bottom: var(--space-2xl);
}

.section-body-text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}
.small-note-text { font-size: 0.85rem; color: var(--color-text-muted); }

.section-text-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  color: var(--color-accent-600);
  margin-top: var(--space-sm);
  transition: gap var(--transition-base), color var(--transition-base);
}
.section-text-link-arrow:hover {
  gap: var(--space-sm);
  color: var(--color-primary-800);
}


.paper-sheet-layer {
  background-color: var(--color-paper-white);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--shadow-paper-top);
  padding: var(--space-4xl) var(--space-xl);
  position: relative;
  z-index: 1;
}

.paper-sheet-layer--tinted {
  background-color: var(--color-paper-tinted);
}

.paper-sheet-layer--accent {
  background: linear-gradient(
    135deg,
    var(--color-primary-800) 0%,
    color-mix(in oklch, var(--color-primary-800), var(--color-accent-600) 35%) 100%
  );
}

.paper-sheet-layer--dark {
  background: linear-gradient(
    135deg,
    var(--color-primary-900) 0%,
    color-mix(in oklch, var(--color-primary-900), var(--color-accent-700) 25%) 100%
  );
}

@media (min-width: 768px) {
  .paper-sheet-layer {
    padding: var(--space-5xl) var(--space-3xl);
  }
}

@media (min-width: 1200px) {
  .paper-sheet-layer {
    padding: var(--space-5xl) calc((100vw - 1200px) / 2 + var(--space-3xl));
  }
}


.main-navigation-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-paper-white);
  box-shadow: var(--shadow-nav);
  transition: box-shadow var(--transition-base);
  height: var(--nav-height);
}

.main-navigation-container.nav-scrolled {
  box-shadow: var(--shadow-nav-scroll);
}

.main-navigation-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.main-navigation-logo-image {
  height: 36px;
  width: auto;
}

.main-navigation-links-list {
  display: none;
  align-items: center;
  gap: var(--space-xs);
}

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

.main-navigation-link {
  font-size: 0.9rem;
  font-weight: 500;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  transition: color var(--transition-base), background-color var(--transition-base);
}
.main-navigation-link:hover {
  color: var(--color-primary-800);
  background-color: var(--color-primary-50);
}
.main-navigation-link.active {
  color: var(--color-primary-800);
  background-color: var(--color-primary-100);
  font-weight: 600;
}

.main-navigation-mobile-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-base);
  flex-shrink: 0;
}
.main-navigation-mobile-toggle:hover {
  background-color: var(--color-primary-50);
}
@media (min-width: 900px) {
  .main-navigation-mobile-toggle { display: none; }
}

.mobile-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
}


.mobile-menu-curtain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: linear-gradient(
    160deg,
    var(--color-primary-900) 0%,
    color-mix(in oklch, var(--color-primary-900), var(--color-accent-700) 30%) 100%
  );
  z-index: 999;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

.mobile-menu-curtain-overlay.curtain-open {
  transform: translateY(0);
}

.mobile-menu-curtain-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--space-md);
  padding: var(--space-3xl) var(--space-xl);
}

.mobile-menu-curtain-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
}

.mobile-menu-curtain-item {
  opacity: 0;
  transform: translateY(-20px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.curtain-open .mobile-menu-curtain-item:nth-child(1) { transition-delay: 0.18s; }
.curtain-open .mobile-menu-curtain-item:nth-child(2) { transition-delay: 0.24s; }
.curtain-open .mobile-menu-curtain-item:nth-child(3) { transition-delay: 0.30s; }
.curtain-open .mobile-menu-curtain-item:nth-child(4) { transition-delay: 0.36s; }
.curtain-open .mobile-menu-curtain-item:nth-child(5) { transition-delay: 0.42s; }

.curtain-open .mobile-menu-curtain-item {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu-curtain-link {
  display: block;
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 600;
  color: var(--color-text-on-dark);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: color var(--transition-base), background-color var(--transition-base);
}
.mobile-menu-curtain-link:hover {
  color: var(--color-accent-400);
  background-color: color-mix(in oklch, white, transparent 90%);
}

.mobile-menu-curtain-close-button {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: color-mix(in oklch, var(--color-text-on-dark), transparent 30%);
  padding: var(--space-md) var(--space-xl);
  border: 1px solid color-mix(in oklch, white, transparent 75%);
  border-radius: var(--radius-full);
  margin-top: var(--space-xl);
  transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}
.mobile-menu-curtain-close-button:hover {
  color: var(--color-text-on-dark);
  border-color: color-mix(in oklch, white, transparent 50%);
  background-color: color-mix(in oklch, white, transparent 88%);
}


.homepage-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.homepage-hero-background-image-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.homepage-hero-background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.homepage-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--color-primary-900), transparent 10%) 0%,
    color-mix(in oklch, var(--color-primary-800), transparent 25%) 50%,
    color-mix(in oklch, var(--color-accent-700), transparent 40%) 100%
  );
}

.homepage-hero-content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + var(--space-3xl)) var(--space-xl) var(--space-5xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

@media (min-width: 900px) {
  .homepage-hero-content-wrapper {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.homepage-hero-text-block {
  max-width: 680px;
}

.homepage-hero-eyebrow-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-400);
  margin-bottom: var(--space-md);
  background-color: color-mix(in oklch, var(--color-accent-400), transparent 82%);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in oklch, var(--color-accent-400), transparent 60%);
}

.homepage-hero-main-heading {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 700;
  color: var(--color-text-on-dark);
  line-height: 1.1;
  margin-bottom: var(--space-lg);
}

.homepage-hero-subtitle-text {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: color-mix(in oklch, var(--color-text-on-dark), transparent 20%);
  line-height: 1.65;
  margin-bottom: var(--space-2xl);
  max-width: 520px;
}

.homepage-hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.homepage-hero-primary-cta-button {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-400));
  color: white;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px color-mix(in oklch, var(--color-accent-600), transparent 50%);
  transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
}
.homepage-hero-primary-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--color-accent-600), transparent 40%);
  filter: brightness(1.05);
}

.homepage-hero-secondary-cta-button {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border: 2px solid color-mix(in oklch, white, transparent 50%);
  color: white;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.homepage-hero-secondary-cta-button:hover {
  border-color: white;
  background-color: color-mix(in oklch, white, transparent 85%);
}

.homepage-hero-badge-wrapper {
  flex-shrink: 0;
}

.homepage-hero-response-badge {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: color-mix(in oklch, white, transparent 85%);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklch, white, transparent 60%);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-xl);
  color: white;
  font-size: 0.9rem;
}
.homepage-hero-response-badge i {
  font-size: 1.5rem;
  color: var(--color-accent-400);
}
.homepage-hero-response-badge strong {
  font-weight: 700;
  font-size: 1.1rem;
}

.homepage-hero-scroll-indicator {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: color-mix(in oklch, white, transparent 40%);
  font-size: 1.2rem;
  animation: heroScrollBounce 2s ease-in-out infinite;
}

@keyframes heroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}


.interior-page-hero-banner {
  background: linear-gradient(
    135deg,
    var(--color-primary-900) 0%,
    color-mix(in oklch, var(--color-primary-800), var(--color-accent-700) 40%) 100%
  );
  padding: calc(var(--nav-height) + var(--space-3xl)) var(--space-xl) var(--space-4xl);
  text-align: center;
}

.interior-page-hero-banner--legal {
  padding-bottom: var(--space-3xl);
}

.interior-page-hero-banner-content {
  max-width: 680px;
  margin: 0 auto;
}

.interior-page-hero-main-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-md);
}

.interior-page-hero-subtitle {
  font-size: 1.05rem;
  color: color-mix(in oklch, var(--color-text-on-dark), transparent 25%);
  line-height: 1.65;
}


.homepage-main-content { overflow-x: hidden; }

.homepage-intro-paper-section,
.homepage-gallery-paper-section,
.homepage-calculator-paper-section,
.homepage-cta-paper-section,
.why-us-intro-paper-section,
.why-us-process-paper-section,
.why-us-clients-paper-section,
.why-us-cta-paper-section,
.one-time-service-intro-paper-section,
.one-time-service-faq-paper-section,
.one-time-service-cta-paper-section,
.quote-form-paper-section,
.contact-page-main-paper-section,
.contact-page-map-paper-section,
.contact-page-faq-paper-section,
.legal-page-content-paper-section {
  position: relative;
  z-index: 1;
}

.homepage-intro-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .homepage-intro-content-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.homepage-intro-image-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-paper-lg);
  aspect-ratio: 4/3;
}

.homepage-intro-feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.homepage-intro-image-frame:hover .homepage-intro-feature-image {
  transform: scale(1.03);
}


.homepage-services-horizontal-scroll-section { overflow: hidden; }

.homepage-services-scroll-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
}

.homepage-horizontal-scroll-track-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: var(--space-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-200) transparent;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.homepage-horizontal-scroll-track-wrapper:active { cursor: grabbing; }
.homepage-horizontal-scroll-track-wrapper::-webkit-scrollbar { height: 4px; }
.homepage-horizontal-scroll-track-wrapper::-webkit-scrollbar-track { background: transparent; }
.homepage-horizontal-scroll-track-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--color-primary-200);
  border-radius: var(--radius-full);
}

.homepage-horizontal-scroll-track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
  padding: var(--space-md) 4px var(--space-md);
}

.service-card-wrapper {
  background-color: var(--color-paper-white);
  border: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 50%);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  width: 300px;
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.service-card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.service-card-icon-area {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--color-primary-100), var(--color-accent-100));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--color-primary-800);
  flex-shrink: 0;
}

.service-card-title-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.service-card-description-text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  flex: 1;
}

.service-card-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent-600);
  transition: gap var(--transition-base), color var(--transition-base);
}
.service-card-action-link:hover {
  gap: 10px;
  color: var(--color-primary-800);
}


.homepage-sticky-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .homepage-sticky-layout-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.homepage-sticky-image-column {
  position: relative;
}

@media (min-width: 900px) {
  .homepage-sticky-image-column {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-2xl));
  }
}

.homepage-sticky-image-inner {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-paper-lg);
  aspect-ratio: 3/4;
}

.homepage-sticky-feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homepage-sticky-scrollable-content-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
}

.homepage-sticky-content-block {
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 40%);
}
.homepage-sticky-content-block:last-child { border-bottom: none; }


.homepage-benefits-section-header {
  text-align: center;
  max-width: 580px;
  margin: 0 auto var(--space-3xl);
}

.homepage-benefits-grid-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .homepage-benefits-grid-layout { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .homepage-benefits-grid-layout { grid-template-columns: repeat(3, 1fr); }
}

.homepage-benefit-item-card {
  display: flex;
  gap: var(--space-md);
  background-color: color-mix(in oklch, white, transparent 80%);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklch, white, transparent 65%);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  transition: background-color var(--transition-base), transform var(--transition-base);
}
.homepage-benefit-item-card:hover {
  background-color: color-mix(in oklch, white, transparent 72%);
  transform: translateY(-2px);
}

.homepage-benefit-checkmark-icon {
  width: 40px;
  height: 40px;
  background-color: color-mix(in oklch, var(--color-accent-400), transparent 25%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.homepage-benefit-text-content { flex: 1; }

.homepage-benefit-item-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-xs);
}

.homepage-benefit-item-description {
  font-size: 0.875rem;
  line-height: 1.65;
  color: color-mix(in oklch, var(--color-text-on-dark), transparent 25%);
}


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

.homepage-gallery-masonry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .homepage-gallery-masonry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .homepage-gallery-item-wrapper--large {
    grid-column: span 2;
    grid-row: span 2;
  }
  .homepage-gallery-item-wrapper--wide {
    grid-column: span 2;
  }
}

.homepage-gallery-item-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-card);
}

.homepage-gallery-item-wrapper--large { aspect-ratio: 4/3; }

.homepage-gallery-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.homepage-gallery-item-wrapper:hover .homepage-gallery-item-image {
  transform: scale(1.06);
}

.homepage-gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--color-primary-900), transparent 20%) 0%,
    transparent 50%
  );
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.homepage-gallery-item-wrapper:hover .homepage-gallery-item-overlay {
  opacity: 1;
}

.homepage-gallery-item-caption {
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
}


.homepage-calculator-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .homepage-calculator-layout-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.homepage-calculator-form-wrapper {
  background-color: var(--color-paper-white);
  border: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 40%);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-paper-md);
}

.homepage-calculator-form-field-group {
  margin-bottom: var(--space-lg);
}

.homepage-calculator-field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.homepage-calculator-field-select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid color-mix(in oklch, var(--color-primary-200), transparent 30%);
  border-radius: var(--radius-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  background-color: var(--color-paper-white);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234A5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.homepage-calculator-field-select:focus {
  outline: none;
  border-color: var(--color-accent-600);
  box-shadow: 0 0 0 3px var(--color-accent-50);
}

.homepage-calculator-estimate-button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-accent-700));
  color: white;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  transition: opacity var(--transition-base), transform var(--transition-base);
  margin-bottom: var(--space-lg);
}
.homepage-calculator-estimate-button:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.homepage-calculator-result-display-area {
  min-height: 80px;
  background-color: var(--color-primary-50);
  border: 1.5px dashed var(--color-primary-200);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base);
}

.homepage-calculator-result-placeholder-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
}

.homepage-calculator-result-value-display {
  text-align: center;
}

.homepage-calculator-result-range-text {
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary-800);
}

.homepage-calculator-result-note-text {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}


.homepage-cta-content-wrapper {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.homepage-cta-main-heading {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-md);
}

.homepage-cta-supporting-text {
  font-size: 1.05rem;
  color: color-mix(in oklch, var(--color-text-on-dark), transparent 25%);
  margin-bottom: var(--space-2xl);
}

.homepage-cta-buttons-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

.homepage-cta-primary-action-button {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-400));
  color: white;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px color-mix(in oklch, var(--color-accent-600), transparent 50%);
  transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
}
.homepage-cta-primary-action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--color-accent-600), transparent 40%);
  filter: brightness(1.05);
}

.homepage-cta-secondary-action-button {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  border: 2px solid color-mix(in oklch, white, transparent 50%);
  color: white;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-full);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.homepage-cta-secondary-action-button:hover {
  border-color: white;
  background-color: color-mix(in oklch, white, transparent 85%);
}


.site-footer-wrapper {
  background: linear-gradient(
    160deg,
    var(--color-primary-900) 0%,
    color-mix(in oklch, var(--color-primary-900), var(--color-accent-700) 20%) 100%
  );
  color: var(--color-text-on-dark);
  margin-top: 0;
}

.site-footer-inner-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-xl) var(--space-3xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
}

@media (min-width: 768px) {
  .site-footer-inner-grid { grid-template-columns: 1.4fr 2fr; }
}

.site-footer-logo-image {
  height: 32px;
  width: auto;
  margin-bottom: var(--space-lg);
  filter: brightness(0) invert(1);
}

.site-footer-brand-description-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: color-mix(in oklch, var(--color-text-on-dark), transparent 30%);
  margin-bottom: var(--space-xl);
}

.site-footer-brand-cta-button {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-400));
  color: white;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-full);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.site-footer-brand-cta-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.site-footer-links-columns-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

@media (min-width: 600px) {
  .site-footer-links-columns-group { grid-template-columns: repeat(3, 1fr); }
}

.site-footer-column-heading {
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--color-text-on-dark), transparent 35%);
  margin-bottom: var(--space-md);
}

.site-footer-links-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.site-footer-nav-link {
  font-size: 0.875rem;
  color: color-mix(in oklch, var(--color-text-on-dark), transparent 25%);
  transition: color var(--transition-base);
}
.site-footer-nav-link:hover { color: var(--color-text-on-dark); }

.site-footer-contact-details-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.875rem;
  color: color-mix(in oklch, var(--color-text-on-dark), transparent 25%);
}
.site-footer-contact-details-list li i {
  color: var(--color-accent-400);
  margin-top: 2px;
  flex-shrink: 0;
}

.site-footer-bottom-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid color-mix(in oklch, white, transparent 88%);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
  text-align: center;
}

@media (min-width: 600px) {
  .site-footer-bottom-bar {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.site-footer-copyright-text {
  font-size: 0.8rem;
  color: color-mix(in oklch, var(--color-text-on-dark), transparent 45%);
}

.site-footer-legal-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

.site-footer-legal-link {
  font-size: 0.8rem;
  color: color-mix(in oklch, var(--color-text-on-dark), transparent 40%);
  transition: color var(--transition-base);
}
.site-footer-legal-link:hover { color: var(--color-text-on-dark); }


.interior-page-main-content { overflow-x: hidden; }


.why-us-intro-two-column-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .why-us-intro-two-column-grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

.why-us-intro-image-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-paper-lg);
  aspect-ratio: 4/3;
}

.why-us-intro-feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.why-us-intro-image-frame:hover .why-us-intro-feature-image { transform: scale(1.03); }

.why-us-process-section-header {
  text-align: center;
  max-width: 580px;
  margin: 0 auto var(--space-3xl);
}

.why-us-process-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .why-us-process-steps-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  .why-us-process-steps-grid { grid-template-columns: 1fr; }
}

.why-us-process-step-item {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

.why-us-process-step-number-badge {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-accent-600));
  color: white;
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in oklch, var(--color-primary-800), transparent 60%);
}

.why-us-process-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-text-primary);
}

.why-us-process-step-description {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.why-us-clients-section-header {
  text-align: center;
  max-width: 580px;
  margin: 0 auto var(--space-3xl);
}

.why-us-clients-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .why-us-clients-cards-grid { grid-template-columns: repeat(3, 1fr); }
}

.why-us-client-type-card {
  background-color: var(--color-paper-white);
  border: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 50%);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.why-us-client-type-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.why-us-client-type-icon-wrapper {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--color-primary-100), var(--color-accent-100));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--color-primary-800);
  margin-bottom: var(--space-lg);
}

.why-us-client-type-heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.why-us-client-type-description {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.why-us-client-type-features-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.why-us-client-type-features-list li {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  padding-left: 1.2rem;
  position: relative;
}
.why-us-client-type-features-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background-color: var(--color-accent-600);
  border-radius: var(--radius-full);
}


.one-time-service-intro-content-wrapper {
  max-width: 720px;
  margin: 0 auto var(--space-3xl);
}

.one-time-service-types-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .one-time-service-types-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .one-time-service-types-grid { grid-template-columns: repeat(3, 1fr); }
}

.one-time-service-type-card {
  background-color: var(--color-paper-white);
  border: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 50%);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.one-time-service-type-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.one-time-service-type-icon-circle {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--color-primary-100), var(--color-accent-100));
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-primary-800);
  margin-bottom: var(--space-md);
}

.one-time-service-type-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.one-time-service-type-description {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.one-time-service-type-details {
  margin-top: auto;
}

.one-time-service-detail-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-accent-700);
  background-color: var(--color-accent-50);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-weight: 500;
}

.one-time-service-faq-header {
  text-align: center;
  max-width: 580px;
  margin: 0 auto var(--space-2xl);
}

.one-time-service-faq-accordion-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.one-time-faq-item {
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 40%);
}

.one-time-faq-question-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: left;
  transition: color var(--transition-base);
}
.one-time-faq-question-button:hover { color: var(--color-primary-800); }

.one-time-faq-chevron-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-base), color var(--transition-base);
}

.one-time-faq-question-button[aria-expanded="true"] .one-time-faq-chevron-icon {
  transform: rotate(180deg);
  color: var(--color-accent-600);
}

.one-time-faq-answer-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}
.one-time-faq-answer-panel.faq-panel-open { max-height: 500px; }

.one-time-faq-answer-panel p {
  padding-bottom: var(--space-lg);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}


.quote-form-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .quote-form-layout-grid { grid-template-columns: 1fr 1.5fr; align-items: start; }
}

.quote-form-info-steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: var(--space-2xl) 0;
}

.quote-form-info-step-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.quote-form-info-step-number {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-accent-600));
  color: white;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quote-form-info-step-text strong {
  display: block;
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.quote-form-info-step-text p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.quote-form-contact-quick-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.quote-form-contact-quick-info p {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.quote-form-contact-quick-info i {
  color: var(--color-accent-600);
  width: 16px;
}

.quote-form-contact-quick-info a {
  color: var(--color-accent-600);
  font-weight: 500;
  transition: color var(--transition-base);
}
.quote-form-contact-quick-info a:hover { color: var(--color-primary-800); }


.quote-multistep-form-wrapper,
.contact-multistep-form-wrapper {
  background-color: var(--color-paper-white);
  border: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 40%);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-paper-md);
}

.quote-form-progress-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.quote-form-progress-step-dot {
  position: relative;
  width: 32px;
  height: 32px;
  background-color: var(--color-primary-100);
  border: 2px solid var(--color-primary-200);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
}
.quote-form-progress-step-dot::before {
  content: attr(data-step);
}
.quote-form-progress-step-dot--active {
  background-color: var(--color-primary-800);
  border-color: var(--color-primary-800);
  color: white;
}

.quote-form-progress-step-label {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.quote-form-progress-connector-line {
  flex: 1;
  height: 2px;
  background-color: var(--color-primary-200);
  border-radius: var(--radius-full);
  margin-bottom: 0;
}

.quote-form-step-panel-heading,
.contact-form-step-panel-heading {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--space-xl);
  color: var(--color-text-primary);
}

.contact-form-progress-bar-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.contact-form-progress-bar-track {
  flex: 1;
  height: 4px;
  background-color: var(--color-primary-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.contact-form-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-800), var(--color-accent-600));
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.contact-form-progress-step-label-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}


.contact-form-field-group {
  margin-bottom: var(--space-lg);
}

.contact-form-field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

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

.contact-form-field-input,
.contact-form-field-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid color-mix(in oklch, var(--color-primary-200), transparent 30%);
  border-radius: var(--radius-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  background-color: var(--color-paper-white);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  resize: vertical;
}

.contact-form-field-input:focus,
.contact-form-field-textarea:focus {
  outline: none;
  border-color: var(--color-accent-600);
  box-shadow: 0 0 0 3px var(--color-accent-50);
}

.contact-form-field-input.field-error,
.contact-form-field-textarea.field-error {
  border-color: #e53e3e;
}

.contact-form-privacy-checkbox-group {
  margin-top: var(--space-sm);
}

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

.contact-form-privacy-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.contact-form-privacy-checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in oklch, var(--color-primary-200), transparent 20%);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper-white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), border-color var(--transition-base);
  margin-top: 2px;
}

.contact-form-privacy-checkbox-input:checked + .contact-form-privacy-checkbox-custom {
  background-color: var(--color-primary-800);
  border-color: var(--color-primary-800);
}

.contact-form-privacy-checkbox-input:checked + .contact-form-privacy-checkbox-custom::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  margin-top: -2px;
}

.contact-form-privacy-label-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.contact-form-privacy-policy-link {
  color: var(--color-accent-600);
  text-decoration: underline;
  transition: color var(--transition-base);
}
.contact-form-privacy-policy-link:hover { color: var(--color-primary-800); }


.quote-form-next-step-button,
.contact-form-next-step-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-accent-700));
  color: white;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-full);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.quote-form-next-step-button:hover,
.contact-form-next-step-button:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.quote-form-step-two-buttons-row,
.contact-form-step-two-buttons-row {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
}

.quote-form-back-step-button,
.contact-form-back-step-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 12px 20px;
  border: 1.5px solid color-mix(in oklch, var(--color-primary-200), transparent 30%);
  color: var(--color-text-secondary);
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-full);
  transition: border-color var(--transition-base), color var(--transition-base), background-color var(--transition-base);
}
.quote-form-back-step-button:hover,
.contact-form-back-step-button:hover {
  border-color: var(--color-primary-800);
  color: var(--color-primary-800);
  background-color: var(--color-primary-50);
}

.quote-form-submit-action-button,
.contact-form-submit-action-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-400));
  color: white;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--color-accent-600), transparent 55%);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.quote-form-submit-action-button:hover,
.contact-form-submit-action-button:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}


.contact-page-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .contact-page-layout-grid { grid-template-columns: 1fr 1.5fr; align-items: start; }
}

.contact-page-info-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.contact-page-info-item-block {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.contact-page-info-item-icon-wrapper {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary-100), var(--color-accent-100));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-primary-800);
  flex-shrink: 0;
}

.contact-page-info-item-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.contact-page-info-item-value-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary-800);
  transition: color var(--transition-base);
}
.contact-page-info-item-value-link:hover { color: var(--color-accent-600); }

.contact-page-info-item-value-text {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.contact-page-map-section-header {
  max-width: 580px;
  margin: 0 auto var(--space-2xl);
}

.contact-page-map-embed-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-paper-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.contact-page-google-map-iframe {
  display: block;
}

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

.contact-page-faq-items-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .contact-page-faq-items-grid { grid-template-columns: repeat(2, 1fr); }
}

.contact-page-faq-item-card {
  background-color: var(--color-paper-white);
  border: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 50%);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.contact-page-faq-item-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.contact-page-faq-item-icon {
  font-size: 1.5rem;
  color: var(--color-accent-600);
  margin-bottom: var(--space-md);
}

.contact-page-faq-item-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.contact-page-faq-item-text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}


.thanks-page-body-wrapper {
  background: linear-gradient(
    160deg,
    var(--color-primary-50) 0%,
    var(--color-accent-50) 100%
  );
  min-height: 100vh;
}

.thanks-page-main-content-area {
  min-height: calc(100vh - var(--nav-height) - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-height) + var(--space-3xl)) var(--space-xl) var(--space-4xl);
  position: relative;
}

.thanks-page-background-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, color-mix(in oklch, var(--color-accent-100), transparent 40%) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, color-mix(in oklch, var(--color-primary-100), transparent 40%) 0%, transparent 50%);
  pointer-events: none;
}

.thanks-page-elevated-card-wrapper {
  background-color: var(--color-paper-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-4xl) var(--space-3xl);
  box-shadow:
    0 20px 60px color-mix(in oklch, var(--color-primary-base), transparent 75%),
    0 8px 24px color-mix(in oklch, var(--color-primary-base), transparent 85%),
    0 2px 6px color-mix(in oklch, var(--color-primary-base), transparent 90%);
  text-align: center;
  max-width: 520px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.thanks-page-card-icon-area {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-primary-100), var(--color-accent-100));
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-primary-800);
  margin: 0 auto var(--space-xl);
}

.thanks-page-card-main-heading {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
}

.thanks-page-card-supporting-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2xl);
}

.thanks-page-card-homepage-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-accent-700));
  color: white;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-full);
  transition: opacity var(--transition-base), transform var(--transition-base);
  box-shadow: 0 4px 16px color-mix(in oklch, var(--color-primary-800), transparent 55%);
}
.thanks-page-card-homepage-button:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}


.legal-page-document-wrapper {
  max-width: 860px;
  margin: 0 auto;
}

.legal-page-intro-block {
  margin-bottom: var(--space-3xl);
}

.legal-page-intro-paragraph {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
  background-color: var(--color-primary-50);
  border-left: 4px solid var(--color-accent-600);
  padding: var(--space-lg) var(--space-xl);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.legal-section-numbered-block,
.legal-section-lettered-block,
.legal-cookies-category-block {
  margin-bottom: var(--space-3xl);
}

.legal-section-summary-badge {
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-accent-50));
  border: 1px solid color-mix(in oklch, var(--color-accent-200, var(--color-accent-100)), transparent 20%);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: 1rem;
  color: var(--color-primary-800);
}

.legal-section-summary-badge--letter {
  background: linear-gradient(135deg, var(--color-accent-50), color-mix(in oklch, var(--color-accent-100), white 30%));
}

.legal-section-detail-content p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.legal-page-unordered-list {
  list-style: disc;
  padding-left: var(--space-xl);
  margin: var(--space-md) 0;
}

.legal-page-unordered-list li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.legal-page-inline-link {
  color: var(--color-accent-600);
  text-decoration: underline;
  transition: color var(--transition-base);
}
.legal-page-inline-link:hover { color: var(--color-primary-800); }


.legal-cookies-category-block {
  border: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 50%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.legal-cookies-category-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-paper-tinted));
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 50%);
}

.legal-cookies-category-icon-badge {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--color-primary-100), var(--color-accent-100));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-primary-800);
  flex-shrink: 0;
}

.legal-cookies-category-icon-badge--essential {
  background: linear-gradient(135deg, color-mix(in oklch, #22543d, white 70%), color-mix(in oklch, #22543d, white 80%));
  color: #22543d;
}

.legal-cookies-category-icon-badge--analytics {
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-accent-600), white 65%), color-mix(in oklch, var(--color-accent-600), white 75%));
  color: var(--color-accent-700);
}

.legal-cookies-category-icon-badge--marketing {
  background: linear-gradient(135deg, color-mix(in oklch, #744210, white 68%), color-mix(in oklch, #744210, white 78%));
  color: #744210;
}

.legal-cookies-category-title-group { flex: 1; }

.legal-cookies-category-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.legal-cookies-category-summary-text {
  font-size: 0.825rem;
  color: var(--color-text-muted);
}

.legal-cookies-category-body {
  padding: var(--space-xl);
}

.legal-cookies-category-body p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}
.legal-cookies-category-body p:last-child { margin-bottom: 0; }

.legal-cookies-table-wrapper {
  overflow-x: auto;
  margin-top: var(--space-md);
}

.legal-cookies-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.legal-cookies-details-table th {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
  font-weight: 700;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 2px solid var(--color-primary-200);
}

.legal-cookies-details-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 50%);
  color: var(--color-text-secondary);
}

.legal-cookies-details-table code {
  font-family: monospace;
  background-color: var(--color-primary-50);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
}


.cookie-consent-card-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 32px);
  max-width: 480px;
  background-color: var(--color-paper-white);
  border-radius: var(--radius-xl);
  box-shadow:
    0 8px 32px color-mix(in oklch, var(--color-primary-base), transparent 70%),
    0 2px 8px color-mix(in oklch, var(--color-primary-base), transparent 82%),
    0 0 0 1px color-mix(in oklch, var(--color-primary-200), transparent 40%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  overflow: hidden;
}

.cookie-consent-card-container.cookie-consent-hidden {
  transform: translateX(-50%) translateY(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
}

.cookie-consent-compact-view {
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 480px) {
  .cookie-consent-compact-view {
    flex-direction: row;
    align-items: center;
  }
}

.cookie-consent-compact-message {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  flex: 1;
}

.cookie-consent-policy-link {
  color: var(--color-accent-600);
  text-decoration: underline;
  transition: color var(--transition-base);
}
.cookie-consent-policy-link:hover { color: var(--color-primary-800); }

.cookie-consent-compact-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.cookie-consent-accept-all-button {
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-accent-700));
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: var(--radius-full);
  transition: opacity var(--transition-base);
  white-space: nowrap;
}
.cookie-consent-accept-all-button:hover { opacity: 0.88; }

.cookie-consent-open-settings-button {
  padding: 9px 18px;
  border: 1.5px solid color-mix(in oklch, var(--color-primary-200), transparent 30%);
  color: var(--color-text-secondary);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: var(--radius-full);
  transition: border-color var(--transition-base), color var(--transition-base), background-color var(--transition-base);
  white-space: nowrap;
}
.cookie-consent-open-settings-button:hover {
  border-color: var(--color-primary-800);
  color: var(--color-primary-800);
  background-color: var(--color-primary-50);
}

.cookie-consent-expanded-view {
  padding: var(--space-xl);
  border-top: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 50%);
}

.cookie-consent-expanded-heading {
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

.cookie-consent-category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary-200), transparent 60%);
}
.cookie-consent-category-item:last-of-type { border-bottom: none; }

.cookie-consent-category-info { flex: 1; }

.cookie-consent-category-name {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.cookie-consent-category-description {
  font-size: 0.775rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.cookie-consent-toggle-locked-indicator {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.cookie-consent-toggle-switch-label {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.cookie-consent-toggle-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-consent-toggle-slider {
  position: absolute;
  inset: 0;
  background-color: color-mix(in oklch, var(--color-primary-200), transparent 20%);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base);
}

.cookie-consent-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: var(--radius-full);
  transition: transform var(--transition-base);
  box-shadow: 0 1px 3px color-mix(in oklch, black, transparent 80%);
}

.cookie-consent-toggle-checkbox:checked + .cookie-consent-toggle-slider {
  background-color: var(--color-primary-800);
}
.cookie-consent-toggle-checkbox:checked + .cookie-consent-toggle-slider::before {
  transform: translateX(20px);
}

.cookie-consent-expanded-buttons-row {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.cookie-consent-save-preferences-button {
  padding: 9px 18px;
  border: 1.5px solid color-mix(in oklch, var(--color-primary-200), transparent 30%);
  color: var(--color-text-secondary);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: var(--radius-full);
  transition: border-color var(--transition-base), color var(--transition-base), background-color var(--transition-base);
}
.cookie-consent-save-preferences-button:hover {
  border-color: var(--color-primary-800);
  color: var(--color-primary-800);
  background-color: var(--color-primary-50);
}


body.mobile-menu-open { overflow: hidden; }


@media print {
  .main-navigation-container,
  .mobile-menu-curtain-overlay,
  .cookie-consent-card-container,
  .homepage-hero-scroll-indicator { display: none; }
}