/*
 * Основные стили для сайта "Кыргыз Чуй Бетон". Используйте CSS‑переменные для
 * цветов и отступов, чтобы упростить дальнейшее изменение палитры. Тема
 * основана на светлом фоне с яркими оранжевыми акцентами.
 */

/* CSS variables for colour palette */
:root {
  /* Brand colours – updated to match the new blue logo.  
     The primary colour is a deep blue sampled from the logo.  
     Hover colour is slightly darker to provide feedback on interaction. */
  --color-primary: #0d599d;
  --color-primary-hover: #0b4c85;
  /* RGB version of the primary colour for translucent effects */
  --color-primary-rgb: 13, 89, 157;
  /* Light theme palette */
  --color-bg: #fafafa;            /* основной фон */
  --color-surface: #ffffff;       /* поверхность карточек */
  --color-shade: #f3f4f6;         /* альтернативный фон */
  --color-text: #333333;          /* основной текст */
  --color-muted: #6b7280;         /* вторичный текст */
  --color-border: #e5e7eb;        /* рамки и разделители */
  --header-bg-scroll: rgba(255, 255, 255, 0.7); /* цвет фона шапки при скролле */
  --section-bg: var(--color-bg);    /* фоновый цвет секций */
  --section-alt: var(--color-shade);/* альтернативный фон */
}

/* Dark theme palette variables */
body.dark-theme {
  --color-bg: #101417;
  --color-surface: #1a1e23;
  --color-shade: #13171c;
  --color-text: #f5f5f5;
  --color-muted: #a0a0a0;
  --color-border: #2d333b;
  --header-bg-scroll: rgba(16, 20, 23, 0.75);
  --section-bg: #0f1317;
  --section-alt: #171d23;
  /* Lighten the primary accent colour in dark mode for better contrast.  The values
     here are brighter versions of the base blue used in the logo. */
       /* Slightly brighten the primary accent in dark mode to improve contrast.
          These values are lighter versions of the base blue so that text and
          buttons remain legible on dark backgrounds. */
       /* Updated primary colours for dark mode.  Use a brighter blue for
          improved contrast on dark surfaces. */
       --color-primary: #186db8;
       --color-primary-hover: #155fa5;
       --color-primary-rgb: 24, 109, 184;
}

/* Reset default margins and set global font */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* Use a UI sans-serif stack similar to the reference site. This includes generic UI fonts
     and emoji fonts to preserve symbols. */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  scroll-behavior: smooth;
  /* the header now overlays the hero, so no global padding-top is needed */

  /* Prevent horizontal scrolling on small devices. Without this property,
     certain elements can accidentally force the page width to exceed the
     viewport, causing the site to be slightly zoomed and allowing sideways
     scrolling. */
  overflow-x: hidden;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
}

/* Container helper for consistent widths */
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Header styling */
/* Base header styles */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: background-color 0.3s, box-shadow 0.3s;
}

/* Header background when scrolled */
.header.scrolled {
  background-color: var(--header-bg-scroll);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.logo-mark {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 0.25rem;
  padding: 0.5rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* New logo image. Set a consistent height and allow auto width to maintain aspect ratio.  */
.logo-img {
  height: 40px;
  width: auto;
  display: block;
}

    /* Logo variant visibility control.  There are two logo images in the HTML: one
       with the class `.colored` (blue) and one with the class `.white` (white).
       By default the coloured logo is shown and the white one is hidden.  When
       the header overlays the hero (not scrolled) or when the dark theme is
       active, we swap the visibility so that the white logo appears for better
       contrast.  We also reset any inherited filters on these classes. */
    .logo-img.colored {
      display: block;
      filter: none;
    }
    .logo-img.white {
      display: none;
      filter: none;
    }
    .header:not(.scrolled) .logo-img.colored {
      display: none;
    }
    .header:not(.scrolled) .logo-img.white {
      display: block;
    }
    body.dark-theme .logo-img.colored {
      display: none;
    }
    body.dark-theme .logo-img.white {
      display: block;
    }

/* Always display the logo in white when the dark theme is active.  This
   ensures the logo remains visible on dark backgrounds regardless of scroll
   position. */
/* Remove automatic filter inversions on the logo.  We control which
   logo version is shown via the `.colored` and `.white` classes,
   therefore the CSS filters that previously inverted the colours are
   removed.  This prevents unwanted yellow tinting on the logo. */
body.dark-theme .logo-img {
  filter: none;
}

/* When the header overlays the hero or when the dark theme is active, the
   `.colored` logo is hidden and the `.white` logo is displayed via display
   rules declared earlier.  No colour inversion is applied. */

.logo-text {
  display: none;
  flex-direction: column;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
}

.logo-text span:first-child {
  margin-bottom: 0.125rem;
}

@media (min-width: 640px) {
  .logo-text {
    display: flex;
  }
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 1.25rem;
  color: var(--color-text);
  cursor: pointer;
  margin-left: 0.75rem;
  padding: 0.4rem;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
/* Theme toggle icons (sun/moon) */
.theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}
.theme-toggle .moon-icon {
  display: none;
}
/* Show/hide icons based on theme */
body.dark-theme .theme-toggle .moon-icon {
  display: inline;
}
body.dark-theme .theme-toggle .sun-icon {
  display: none;
}
.theme-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), 0.05);
}

/* When header is at top, make theme toggle border light */
.header:not(.scrolled) .theme-toggle {
  border-color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 640px) {
  /* Already displayed globally; no override needed here */
}

/* Colour of sun/moon icons inside theme toggle */
.theme-toggle svg.icon {
  color: var(--color-text);
}
.header:not(.scrolled) .theme-toggle svg.icon {
  color: #fff;
}

/* Header navigation colours when at top (transparent header) */
.header:not(.scrolled) .nav a {
  color: #fff;
}
.header:not(.scrolled) .nav a:hover {
  color: var(--color-primary);
}
.header:not(.scrolled) .theme-toggle {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.header:not(.scrolled) .theme-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), 0.1);
}

/* Navigation */
.nav {
  display: none;
  gap: 1.5rem;
  align-items: center;
}

.nav a {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav a:hover {
  color: var(--color-primary);
}

@media (min-width: 640px) {
  /* Show the primary navigation from 640px and up. This aligns with the
     breakpoint where the hamburger menu is hidden. */
  .nav {
    display: flex;
  }
}

/* Header colours when at top (not scrolled) */
.header:not(.scrolled) .logo {
  color: #fff;
}
.header:not(.scrolled) .logo-mark {
  /* keep colored square but ensure visible */
  background-color: var(--color-primary);
  color: #fff;
}
.header:not(.scrolled) .logo-text span {
  color: #fff;
}
.header:not(.scrolled) .nav a {
  color: #fff;
}
.header:not(.scrolled) .nav a:hover {
  color: var(--color-primary);
}
.header:not(.scrolled) .header-cta .phone {
  color: #fff;
}
.header:not(.scrolled) .btn-outline {
  border-color: #fff;
  color: #fff;
}
.header:not(.scrolled) .btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.header:not(.scrolled) .theme-toggle {
  color: #fff;
}
.header:not(.scrolled) .hamburger span {
  background-color: #fff;
}

/* Header call-to-action (phone and button) */
/* Header call-to-action (phone and button) */
.header-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-cta .phone {
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.875rem;
}

/* Hide the phone number in the header between 640px and 800px wide.  This frees
   space for the navigation links on medium devices while keeping the call
   button and theme toggle visible. */
@media (min-width: 640px) and (max-width: 799px) {
  .header-cta .phone,
  .header-cta .btn-primary {
    display: none;
  }
}


/* Hamburger menu for mobile */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

@media (min-width: 640px) {
  /* Hide hamburger on tablet/desktop since the full menu and contact controls are visible */
  .hamburger {
    display: none;
  }
}

.hamburger span {
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  transition: transform 0.3s, opacity 0.3s;
}

/* Open mobile nav class toggled via JS */
/* Mobile navigation overlay */
@media (max-width: 639px) {
  .nav-open .nav {
    display: flex;
    flex-direction: column;
    /* Use fixed positioning so the menu overlays the page but sits under the header */
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background-color: var(--header-bg-scroll);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    padding: 1.5rem 1rem;
    z-index: 900;
    animation: navSlideDown 0.4s ease forwards;
    gap: 1rem;
  }
  .nav-open .nav a {
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 0;
  }

  /* When the mobile navigation is open, we no longer hide the call‑to‑action or theme toggle.  
     The mobile‑extra element has been removed from the markup, so no extra display settings are needed. */
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
  gap: 0.4rem;
}

/* Mobile menu extra controls (phone, order button, theme toggle) */
.mobile-extra {
  /* Hidden by default; shown only when nav-open on small screens via media query rules */
  display: none;
}
.mobile-extra .phone {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}
.mobile-extra .btn {
  width: fit-content;
}
.mobile-extra .theme-toggle {
  border-color: var(--color-border);
  margin-left: 0;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  color: #fff;
}

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

.btn-outline:hover {
  background-color: var(--color-shade);
  /* Keep the text colour the same on hover */
  color: var(--color-primary);
}

/* A smaller variant of the button used for actions inside cards.  It retains
   the general styling of the outline button but with reduced padding and font size. */
.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
}

/* Make sure small buttons inside grade cards span the full width and have
   appropriate spacing. */
.grade-card .btn-sm {
  margin-top: 0.75rem;
  width: 100%;
}

/* Hero section */
.hero {
  position: relative;
  /* On small screens the hero occupies the full viewport height; on larger screens
     it occupies 85% of the viewport to reveal the next section slightly */
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  text-align: center;
  /* top padding is compensated globally on body */
  padding-top: 0;
}

@media (max-width: 639px) {
  .hero {
    min-height: 100vh;
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* Use local image for the hero background so the site works offline. After
     reorganising the project structure, the image resides in assets/images. */
  background-image: url('../assets/images/hero.webp');
  background-size: cover;
  background-position: center;
  filter: brightness(0.6);
  z-index: -2;
}
.icon{
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
/* Overlay gradient to soften the image */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* In the light theme, apply a semi‑dark overlay to ensure the white text stands
     out clearly on the hero image.  The first stop uses 0.6 opacity and the
     second 0.3, as requested. */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
  z-index: -1;
}

/* Dark theme overlay slightly lighter to maintain contrast */
body.dark-theme .hero::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.badge {
  display: inline-block;
  background-color: rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-primary);
  border: 1px solid rgba(var(--color-primary-rgb), 0.3);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

/* Override the badge styling in the hero section so that the company name stands
   out clearly against the dark background.  We keep a faint tinted background
   and border using the primary colour but switch the text to white. */
.hero .badge {
  color: #ffffff;
  background-color: rgba(var(--color-primary-rgb), 0.2);
  border-color: rgba(var(--color-primary-rgb), 0.4);
}

.hero h1 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
  /* Use white text by default for good contrast on the dark overlay.  For the light theme
     we override this below. */
  color: #fff;
}

@media (min-width: 640px) {
  .hero h1 {
    font-size: 3rem;
  }
}

.hero .highlight {
  color: var(--color-primary);
}

.hero p {
  font-size: 1.125rem;
  color: #f0f0f0;
  margin-bottom: 2rem;
}

/* In dark mode, brighten the hero description text slightly so that it
   stands out better against the darkened background. */
body.dark-theme .hero p {
  color: #e5e5e5;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
    /* Center action buttons horizontally on larger screens */
    justify-content: center;
  }
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
  justify-items: center;
}

@media (min-width: 640px) {
  .hero-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}

.stat-icon {
  font-size: 1.5rem;
  color: var(--color-primary);
}

.stat-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: #ccc;
  line-height: 1.2;
}

/* Scroll down indicator */
.scroll-down {
  /* Position will be overridden for the hero section. */
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.75rem;
  color: #eee;
  animation: fadeInUp 1s ease forwards;
  opacity: 0;
}

/* Sequential animations for hero content elements. The hero is animated only when the section
   becomes visible via IntersectionObserver. Each direct child of .hero-content fades in and
   slides upward with a small delay relative to its order. */
.hero.section .hero-content > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.hero.section.visible .hero-content > * {
  opacity: 1;
  transform: translateY(0);
}
.hero.section.visible .hero-content > :nth-child(1) { transition-delay: 0s; }
.hero.section.visible .hero-content > :nth-child(2) { transition-delay: 0.1s; }
.hero.section.visible .hero-content > :nth-child(3) { transition-delay: 0.2s; }
.hero.section.visible .hero-content > :nth-child(4) { transition-delay: 0.3s; }
.hero.section.visible .hero-content > :nth-child(5) { transition-delay: 0.4s; }
.hero.section.visible .hero-content > :nth-child(6) { transition-delay: 0.5s; }

.scroll-down i {
  margin-top: 0.25rem;
  font-size: 1rem;
  animation: bounceDown 2s infinite;
}

/* Position the scroll indicator at the bottom of the hero section and animate the arrow. */
/* Position the scroll indicator at the bottom centre of the hero section.
   We centre it by anchoring it to both left and right edges and letting
   the auto margins centre the content.  The width is set to fit its
   content. */
/* Position the scroll indicator at the bottom of the hero section and
   centre it across the entire width. By using left:0 and right:0 with
   auto margins and width:100%, the text and arrow will be perfectly
   centred relative to the viewport. */
.hero .scroll-down {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

/* Ensure the cursor changes to a pointer when hovering over the scroll indicator
   itself or its children. Without this, some browsers may not display the
   pointer on nested SVG elements. */
.hero .scroll-down * {
  cursor: pointer;
}
.hero .scroll-down .icon {
  animation: bounceDown 2s infinite;
}

@keyframes bounceDown {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
  40% {transform: translateY(4px);} 
  60% {transform: translateY(2px);} 
}

/* About section */
/* About section */
/* About section */
.about {
  padding: 4rem 0;
  background-color: var(--section-alt);
}

/* Layout container for about section. Use grid so that on larger screens the left and right content sit side by side. */
.about-inner {
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) {
  .about-inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Left side of about section */
.about-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 700px;
}
.about-left h2 {
  font-size: 2rem;
  font-weight: 700;
}
.about-desc {
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* Stats group */
.about-stats {
  /* Use a flex layout to place stats inline with even gaps. */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
/* Individual stat item: display number and label inline without card background */
.about-stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.4rem;
  /* Each stat grows to occupy equal space across the row */
  flex: 1 1 0;
}
.about-stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}
.about-stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
  white-space: nowrap;
  margin: 0;
}

/* Right side of about section – feature cards grid */
.about-right {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.feature-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.feature-card:hover {
  transform: translateY(-4px);
  /* Add a subtle orange glow and lighten the card on hover */
  background-color: rgba(var(--color-primary-rgb), 0.04);
  box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.35), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.feature-icon {
  font-size: 1.75rem;
  color: var(--color-primary);
}
.feature-body h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-text);
}
.feature-body p {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Grades section */
.grades {
  padding: 4rem 0;
  background-color: var(--section-bg);
}

.grades h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5rem;
}

.section-description {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 2rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.grades-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .grades-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grades-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grade-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.grade-card.popular {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.grade-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  /* Add glow effect similar to feature cards */
  box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.35), 0 8px 16px rgba(0, 0, 0, 0.08);
}

.grade-card .grade-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  border-radius: 0.25rem;
}

.grade-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  color: var(--color-text);
}

.grade-card .grade-sub {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.grade-card .grade-strength {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.grade-card .grade-price {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.grade-card .grade-uses {
  list-style: none;
  padding-left: 1rem;
  margin-top: auto;
  margin-bottom: 0;
}

.grade-card .grade-uses li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}

.grade-card .grade-uses li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}


/* Layout for additional services */
.services-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .services-row {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.service-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}
.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.35), 0 8px 16px rgba(0, 0, 0, 0.08);
}
.service-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Titles and price labels in service items */
.service-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.service-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.service-content p {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-bottom: 0;
}

/* Service icon spacing: icons stay to the left of text */
.service-item .service-icon {
  margin-right: 0.75rem;
  margin-bottom: 0;
}

/* Extra services */
.extra-services {
  margin-top: 3rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.extra-services h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.services-list {
  list-style: none;
  padding-left: 1rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.services-list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.25rem;
}

.services-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 1rem;
  line-height: 1;
  top: 0.1rem;
}

/* Calculator section */
/* Calculator section */
.calculator {
  padding: 4rem 0;
  background-color: var(--section-alt);
}

.calculator-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.calculator h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Card container */
.calculator-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}
@media (min-width: 640px) {
  .calculator-card {
    flex-direction: row;
  }
}

.calc-left,
.calc-right {
  flex: 1;
}

.calc-left {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .calc-left {
    grid-template-columns: repeat(2, 1fr);
  }
}

.calc-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.calc-field label {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
}
.calc-field input,
.calc-field select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  font-size: 0.9rem;
  background-color: var(--color-surface);
  color: var(--color-text);
}

.calc-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--section-bg);
  border-radius: 0.5rem;
  padding: 1rem;
  gap: 1rem;
}
.result-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
  padding: 0.5rem 0;
}
.result-label {
  color: var(--color-muted);
}
.result-value {
  font-weight: 600;
  color: var(--color-primary);
}

.calculator-note {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Contacts section */
/* Contacts section */
.contacts {
  padding: 4rem 0;
  background-color: var(--section-bg);
}

.contacts-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.contacts h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Layout wrapper around contact cards and map. On small screens it stacks, on wide it uses two columns. */
.contacts-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}
@media (min-width: 960px) {
  .contacts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Grid layout for contact cards and map */
/* Grid layout for contact cards */
.contacts-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .contacts-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Contact card styling */
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.35), 0 8px 16px rgba(0, 0, 0, 0.08);
}

.contact-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.contact-card p {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: 0;
}
.contact-card p a {
  color: var(--color-text);
  text-decoration: none;
}
.contact-card p a:hover {
  color: var(--color-primary);
}
.contact-details h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-text);
}
.contact-details p,
.contact-details p a {
  font-size: 0.875rem;
  color: var(--color-muted);
}
.contact-details p a:hover {
  color: var(--color-primary);
}

    .contacts-map {
      flex: 1;
      position: relative;
      min-height: 300px;
    }
    .contacts-map iframe {
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 0.5rem;
    }
    /* Remove placeholder styles since we embed a real map. */
    .map-placeholder {
      display: none;
    }

/* Contact form */
.contact-form-wrapper {
  margin-top: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.contact-form-wrapper h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}
.form-field {
  display: flex;
  flex-direction: column;
}
.form-field label {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.form-field input,
.form-field textarea {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  font-size: 0.9rem;
  background-color: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
}

/* Footer */
/* Footer */
.footer {
  background-color: var(--section-alt);
  padding: 3rem 0;
  color: var(--color-text);
  font-size: 0.875rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  text-align: left;
}

.footer-about {
  max-width: 400px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-start;
}

/* Footer logo variants: show coloured logo by default and white logo only in dark mode. */
.footer-logo .footer-white {
  display: none;
}
.footer-logo .footer-coloured {
  display: block;
}
body.dark-theme .footer-logo .footer-coloured {
  display: none;
}
body.dark-theme .footer-logo .footer-white {
  display: block;
}
.footer-logo .logo-mark {
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.5rem;
  border-radius: 0.25rem;
  font-weight: 700;
  font-size: 1rem;
}
.footer-logo .logo-text {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text);
}
.footer-desc {
  margin-top: 0.5rem;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
}
@media (min-width: 640px) {
  .footer-inner {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  .footer-columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
.footer-col h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.footer-col p {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Links in the footer inherit the muted colour by default and only highlight on hover */
.footer-col p a {
  color: var(--color-text);
  text-decoration: none;
}
.footer-col p a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  margin-top: 2rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-muted);
}
@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* General section animations */
.section {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  /* Ensure anchor links scroll below the fixed header */
  scroll-margin-top: 80px;
}
.hero.section {
  /* Prevent the entire hero section (including the background image) from being
     animated by the generic .section styles. Only the hero content will animate.
     This avoids shifting the hero down on page load. */
  opacity: 1;
  transform: none;
  transition: none;
}
.section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade and slide‑in animation for individual items inside sections.
   Initially cards and stats are hidden and slide down slightly. When their
   parent section gains the 'visible' class, they fade and rise one after
   another using transition delays. */
.about-stat,
.feature-card,
.grade-card,
.service-item,
.contact-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.section.visible .about-stat,
.section.visible .feature-card,
.section.visible .grade-card,
.section.visible .service-item,
.section.visible .contact-card {
  opacity: 1;
  transform: translateY(0);
}

/* Delay sequence for about stats */
.section.visible .about-stat:nth-child(1) { transition-delay: 0.05s; }
.section.visible .about-stat:nth-child(2) { transition-delay: 0.15s; }
.section.visible .about-stat:nth-child(3) { transition-delay: 0.25s; }

/* Delay sequence for feature cards */
.section.visible .feature-card:nth-child(1) { transition-delay: 0.05s; }
.section.visible .feature-card:nth-child(2) { transition-delay: 0.15s; }
.section.visible .feature-card:nth-child(3) { transition-delay: 0.25s; }
.section.visible .feature-card:nth-child(4) { transition-delay: 0.35s; }

/* Delay sequence for grade cards (up to 7) */
.section.visible .grade-card:nth-child(1) { transition-delay: 0.05s; }
.section.visible .grade-card:nth-child(2) { transition-delay: 0.15s; }
.section.visible .grade-card:nth-child(3) { transition-delay: 0.25s; }
.section.visible .grade-card:nth-child(4) { transition-delay: 0.35s; }
.section.visible .grade-card:nth-child(5) { transition-delay: 0.45s; }
.section.visible .grade-card:nth-child(6) { transition-delay: 0.55s; }
.section.visible .grade-card:nth-child(7) { transition-delay: 0.65s; }

/* Delay sequence for service items */
.section.visible .service-item:nth-child(1) { transition-delay: 0.05s; }
.section.visible .service-item:nth-child(2) { transition-delay: 0.15s; }
.section.visible .service-item:nth-child(3) { transition-delay: 0.25s; }

/* Delay sequence for contact cards */
.section.visible .contact-card:nth-child(1) { transition-delay: 0.05s; }
.section.visible .contact-card:nth-child(2) { transition-delay: 0.15s; }
.section.visible .contact-card:nth-child(3) { transition-delay: 0.25s; }
.section.visible .contact-card:nth-child(4) { transition-delay: 0.35s; }

/* SVG icon defaults */
svg.icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
}
/* By default, draw SVG icons with outlines only (no fill). Individual icons can override this by specifying a fill attribute in the markup. */
svg.icon path,
svg.icon line,
svg.icon rect,
svg.icon polyline,
svg.icon polygon,
svg.icon circle {
  stroke: currentColor;
  fill: none;
  /* Use a slightly thinner stroke for outline icons to match the reference style */
  stroke-width: 1.7;
}

/* Adjust specific icon sizes */
.stat-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-primary);
}
.feature-icon svg.icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
}

/* Feature icon container styling */
/* Feature icon container styling */
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary);
  border-radius: 0.5rem;
  flex-shrink: 0;
}
.feature-icon svg.icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 2;
  /* Use currentColor for stroke; remove fill so the icon appears as an outline on coloured background */
  fill: none;
  stroke: currentColor;
  color: inherit;
}
.service-icon svg.icon,
  .contact-icon svg.icon,
  .footer-col svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  /* For icons inside coloured squares, remove fill to get outline appearance */
  fill: none;
  stroke-width: 2;
  stroke: currentColor;
  color: inherit;
}

/* Reduce footer icon sizes slightly for a more balanced look */
.footer-col svg.icon {
  width: 1rem;
  height: 1rem;
}

/* Status message styling for the contact form */
.form-status {
  margin-top: 1rem;
  font-size: 0.875rem;
}
.form-status.success {
  color: var(--color-primary);
}
.form-status.error {
  color: #e74c3c;
}

/* Hide the order button in the header on small screens to prevent overflow.
   Increase the breakpoint to ~600px so that on narrow devices there is enough room
   for the logo, phone number, theme toggle and hamburger menu without overlapping. */
@media (max-width: 600px) {
  .header-cta .btn-primary {
    display: none;
  }
}

/* Service and contact icon containers are defined near the end of the file */
.btn .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.25rem;
}
.scroll-down .icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 3;
}

/* Service and contact icons use tinted backgrounds and appropriate margins. */
.service-icon,
.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary);
  border-radius: 0.5rem;
  flex-shrink: 0;
}
/* Icon sizing inside coloured squares */
.service-icon svg.icon,
.contact-icon svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  color: inherit;
}
/* Specific margins for service vs contact: service items align horizontally,
   contact cards align vertically with icon above the heading. */
.service-item .service-icon {
  margin-right: 0.75rem;
  margin-bottom: 0;
}
.contact-card .contact-icon {
  margin-right: 0;
  margin-bottom: 0.5rem;
}

.contact-icon .icon {
    stroke: #25D366; 
}