/* КовроЧисты54 — «Чистый кант»
   Static layout and styling for the website based on design concept. */

/* =======================================
   1. DESIGN TOKENS & GLOBALS (From design/styles.css)
   ======================================= */
:root {
    /* Color Palette */
    --blue-900: #075a92; /* Brand, Trust */
    --blue-800: #086ca9;
    --blue-700: #087cc1; /* Water Blue, Links/Process */
    --blue-100: #dff1fa;
    --blue-050: #eff7fa; /* Mineral Light Background */

    --green-600: #56c431; /* Main CTA, Growth */
    --green-700: #419f25;
    --green-900: #2d6d20; /* Dark Green, Text/Focus */
    --lime-100: #eaf8df;

    /* Grayscale & Accent */
    --ink: #132f3f; /* Primary text color */
    --ink-soft: #486574; /* Secondary text / muted details */
    --muted: #526b77;
    --line: #d8e7ed; /* Light separator lines */
    --white: #fff;

    /* Utility & Shadows */
    --warm: #f3b33d; /* Action accent (Clean Thursday) */
    --error: #b83232;
    --success: #2d7d32;
    --shadow-sm: 0 8px 22px rgba(7,63,91,.08);
    --shadow-lg: 0 22px 60px rgba(7,63,91,.16);

    /* Sizing & Typography */
    --radius-sm: 12px;
    --radius-md: 22px;
    --radius-lg: 34px;
    --container: 1240px; /* Target container width (1440 minus padding) */
    --header: 82px; /* Header height */

    /* Font Stacks */
    --display: 'Fira Sans Condensed', Arial, sans-serif;
    --body: 'Manrope', Arial, system-ui, sans-serif;
    --ease: cubic-bezier(.2,.75,.25,1); /* Smooth transitions */
}

/* =======================================
   2. BASE STYLES & RESET (Core Structure)
   ======================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* Critical for mobile requirement: prevent horizontal scrollbar from content overflow */
    overflow-x: clip;
    min-width: 320px; /* Base minimum width for mobile testing */
}

body {
    background: var(--white);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: clip; /* Safety net for overflow */
    -webkit-font-smoothing: antialiased;
}

/* Images must be contained within their parents, ensuring no horizontal spillover */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit; /* Inherit color from parent text/context */
    text-decoration: none;
}

button, input, select {
    font: inherit;
}

h1, h2, h3, p {
    margin-top: 0; /* Reset default margins for layout control */
}

h1, h2, h3 {
    font-family: var(--display);
    line-height: .98;
    letter-spacing: -.025em;
}

/* =======================================
   3. LAYOUT & UTILITIES
   ======================================= */
.container {
    width: min(calc(100% - 64px), var(--container)); /* Center container, respecting viewport edges */
    margin-inline: auto;
}

.section {
    padding: 116px 0;
}

/* Accessibility Skip Link (Top of page) */
.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 12px 18px;
    background: var(--ink);
    color: white;
    border-radius: 8px;
    transform: translateY(-150%); /* Hidden by default */
    transition: transform .2s ease-in-out;
}

.skip-link:focus {
    /* Visible when focused for keyboard navigation */
    transform: translateY(0);
    outline: 3px solid var(--warm);
    outline-offset: 4px;
}

/* Focus states (Mandatory) */
:focus-visible {
    outline: 3px solid var(--warm);
    outline-offset: 4px;
    border-radius: 4px; /* For button/input elements that might have a border */
}

/* =======================================
   4. HEADER (Sticky & Navigation)
   ======================================= */
.site-header {
    height: var(--header);
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94); /* Slight transparency for effect */
    backdrop-filter: blur(14px); /* Modern blurred background */
    border-bottom: 1px solid rgba(7,90,146,.12);
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 28px; /* Spacing between elements */
}

.brand {
    width: 276px; /* Fixed width for logo consistency */
    flex: 0 0 auto;
}

.brand img {
    width: 100%;
    display: block;
}

/* Desktop Navigation (Hidden on mobile) */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 27px;
    margin-left: auto; /* Pushes nav and phone number to the right */
}

.desktop-nav a {
    font-size: .86rem;
    font-weight: 700;
    color: #365766; /* Muted dark blue for links */
    position: relative;
    white-space: nowrap;
}

/* Underline indicator on hover/focus (The "Kant" line) */
.desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%; /* Full width of the link element */
    bottom: -7px;
    height: 2px;
    background: var(--green-600);
    transition: right .25s var(--ease);
}

.desktop-nav a:hover::after {
    right: 0; /* Slides in from the right on hover */
}

/* Phone number display (Prominent, but secondary to CTA) */
.header-phone {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
    align-items: center;
    text-decoration: none;
}

.header-phone span {
    font-size: .65rem;
    color: var(--muted);
    margin-bottom: 3px;
}

.header-phone strong {
    font-family: var(--display);
    font-size: 1.13rem; /* Prominent phone number */
    color: var(--blue-900);
}

/* =======================================
   5. BUTTONS & CALLS TO ACTION (CTA)
   ======================================= */
.button {
    min-height: 52px;
    padding: 0 25px;
    border: 0;
    border-radius: 999px; /* Pill shape */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s;
}

.button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor; /* Use inherited color */
    stroke-width: 2.2;
    transition: transform .22s;
}

/* Hover and Active states for visual feedback */
.button:hover {
    transform: translateY(-2px);
}
.button:hover svg {
    transform: translateX(3px); /* Slight movement on hover */
}
.button:active {
    transform: translateY(1px);
}

/* Specific Button Styles */
.button-small {
    min-height: 44px;
    padding-inline: 20px;
    background: var(--blue-050);
    color: var(--blue-900);
}

.button-primary {
    /* Primary CTA (Green) */
    background: var(--green-600);
    color: #102d0a; /* Near black text on bright green */
    box-shadow: 0 9px 22px rgba(74,177,38,.2); /* Subtle lift/glow */
}

.button-primary:hover {
    background: #62d43b; /* Slightly lighter shade on hover */
    box-shadow: 0 12px 25px rgba(74,177,38,.26);
}

.button-dark {
    /* Secondary/Dark CTA (Black/Ink) */
    background: var(--ink);
    color: white;
}

/* Disabled state for forms/placeholders */
.button:disabled, .button[aria-disabled="true"] {
    opacity: .52;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Text Link Styling */
.text-link {
    font-size: .86rem;
    font-weight: 800;
    border-bottom: 1px solid rgba(19,47,63,.35); /* Subtle border for link effect */
    padding: 6px 0;
    transition: border-color .2s, color .2s;
}

.text-link:hover {
    color: var(--blue-700);
    border-color: var(--blue-700);
}


/* =======================================
   6. HERO SECTION (The main visual area)
   ======================================= */
.hero {
    position: relative;
    /* Gradient background transition from light blue to a very subtle green tint for softness */
    background: linear-gradient(120deg, #f7fbfd 0%, #eef8fb 72%, #e7f6e3 100%);
    min-height: calc(100vh - var(--header)); /* Ensure it fills remaining viewport height */
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

/* Diagonal "Kant" pattern overlay (The key design element) */
.hero-weave {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(7,90,146,.035) 1px,transparent 1px),
                      linear-gradient(90deg,rgba(7,90,146,.035) 1px,transparent 1px);
    background-size: 34px 34px; /* Density of the pattern */
    mask-image: linear-gradient(to right,#000,transparent 48%); /* Diagonal mask effect */
}

.hero-grid {
    position: relative;
    display: grid;
    /* Default desktop split (approx 56% text, 44% media) */
    grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr);
    align-items: center;
    gap: 50px; /* Spacing between copy and image */
}

/* Copy content styling */
.hero-copy {
    padding: 84px 0 76px;
    position: relative;
    z-index: 2;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--blue-900);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    margin: 0 0 21px;
}

.eyebrow > span {
    display: inline-block;
    width: 36px;
    height: 7px;
    background: repeating-linear-gradient(90deg, var(--green-600) 0 5px, transparent 5px 8px); /* Green "check" */
}

.eyebrow-light {
    color: #b9e1f4; /* Lighter blue for contrast */
}

/* Main title and subtitle emphasis */
.hero h1 {
    max-width: 700px;
    margin-bottom: 26px;
}

.hero h1 em {
    display: block; /* Ensures 'in Novosibirsk' is on a separate line for impact */
    color: var(--blue-900);
    font-style: normal;
}

.hero-lead {
    max-width: 620px;
    color: var(--ink-soft);
    font-size: 1.09rem;
    line-height: 1.75;
    margin-bottom: 30px;
}

/* Actions/CTAs */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* Key Facts List (Bullet points) */
.hero-facts {
    list-style: none;
    padding: 0;
    margin: 42px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Three columns on desktop */
    gap: 0;
    max-width: 600px;
}

.hero-facts li {
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    border-right: 1px solid var(--line); /* Separator line */
}

/* Ensure only the last item doesn't have a right border */
.hero-facts li:last-child {
    border-right: 0;
}

.hero-facts strong {
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--blue-900);
}

.hero-facts span {
    font-size: .7rem;
    color: var(--muted);
}

/* Media Area Styling */
.hero-media {
    align-self: stretch;
    position: relative;
    min-height: 630px; /* Base height for desktop view */
    margin-right: calc((100vw - min(calc(100vw - var(--container)),var(--container)))/-2); /* Complex margin calculation to prevent overflow on large screens if container is smaller than viewport, although clip should handle it */
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); /* Diagonal cut on the left edge */
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    object-position: 55% center; /* Focus point for visual balance */
}

/* The "Kant" stamp overlay on the image */
.hero-stamp {
    position: absolute;
    z-index: 2;
    left: 8%;
    bottom: 65px;
    background: var(--white);
    border-radius: 18px;
    padding: 14px 20px 14px 14px;
    display: flex;
    gap: 11px;
    align-items: center;
    box-shadow: var(--shadow-lg); /* Prominent shadow */
    font-size: .7rem;
    line-height: 1.35;
    color: var(--ink-soft);
}

.stamp-check {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lime-100); /* Light green/yellow */
    color: var(--green-900);
    font-weight: 900;
}

.hero-stamp strong {
    font-size: .84rem;
    color: var(--ink);
}

/* Visual Fringe for design flair (optional decorative element) */
.fringe {
    position: absolute;
    z-index: 3;
    left: 2.8%;
    top: 8%;
    bottom: 8%;
    width: 12px; /* Thin vertical line effect */
    background: repeating-linear-gradient(to bottom, var(--green-600) 0 16px, transparent 16px 24px);
    transform: rotate(5.3deg);
}


/* =======================================
   7. PROOF (Passport of Cleanliness)
   ======================================= */
.proof {
    background: var(--blue-900); /* Dark background for contrast */
    color: #fff;
    padding: 72px 0;
}

.proof-grid {
    display: grid;
    /* Layout: Intro block on the left, three proof cards on the right (flexible) */
    grid-template-columns: 1.35fr repeat(3, 1fr);
    gap: 0; /* No gap between intro and first card for flow */
}

.proof-intro {
    padding-right: 45px; /* Space between text and cards */
}

.proof-intro h2 {
    font-size: 2.35rem;
    margin: 0; /* Remove margin set globally */
}

/* Individual Proof Cards */
.proof-card {
    padding: 4px 28px 0; /* Padding is controlled to create vertical separation */
    border-left: 1px solid rgba(255,255,255,.16); /* Kant line between steps */
}

/* First card shouldn't have a left border if the intro takes up space, but we keep it consistent for simplicity/robustness. */
.proof-card:nth-child(1) {
    border-left: none;
    padding-left: 0;
}

.proof-number {
    font-family: var(--display);
    font-weight: 800;
    color: #a7ef8e; /* Accent color for numbers */
    font-size: .72rem;
}

.proof-card h3 {
    font-size: 1.32rem;
    margin-top: 18px; /* Spacing after the number/title break */
}

.proof-card p {
    color: #c5dbe5; /* Slightly lighter text color */
    font-size: .78rem;
    margin: 0;
    line-height: 1.7;
}


/* =======================================
   8. PRICING (Tariffs & Note)
   ======================================= */
.section-heading {
    margin-bottom: 54px;
}

.split-heading {
    display: grid;
    grid-template-columns: 1.4fr .6fr; /* Split content: Title | Subtext */
    gap: 90px;
    align-items: end; /* Align subtext to the bottom of the title block */
}

/* Left side (Title/Eyebrow) */
.split-heading > div {
    max-width: 760px;
}

.split-heading h2 {
    margin-bottom: 0; /* Controlled by parent layout */
}

/* Right side (Subtext note) */
.split-heading > p {
    color: var(--muted);
    margin: 0;
    padding-bottom: 7px;
}


.price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Three equal columns */
    gap: 22px;
}

/* Individual Tariff Card */
.price-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 24px 28px 31px;
    background: #fff;
    box-shadow: var(--shadow-sm); /* Standard card shadow */
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s;
}

/* Hover effect (lift) */
.price-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Featured Card Styling */
.price-card-featured {
    border-color: rgba(86,196,49,.7); /* Green border highlight for featured */
}

/* 'Popular' badge on the featured card */
.price-card-featured::after {
    content: "Популярно";
    position: absolute;
    right: 18px;
    top: 18px;
    padding: 5px 9px;
    background: var(--lime-100); /* Light green background */
    color: var(--green-900);
    border-radius: 999px;
    font-size: .61rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Rug Swatch (Visual representation of material) */
.rug-swatch {
    height: 112px; /* Fixed height for consistency */
    border-radius: 15px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    /* Patterning to simulate texture without being a photo */
}

.rug-swatch::before {
    content: "";
    position: absolute;
    inset: 10px 12px;
    /* Two intersecting gradients for pattern complexity */
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, transparent 2px 13px),
                repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 2px, transparent 2px 13px);
    border: 2px solid rgba(255,255,255,.7); /* White border for definition */
}

/* Specific material gradient colors */
.swatch-wool { background: linear-gradient(135deg, #0d76b8, #78c8e8); } /* Blue/Light Blue */
.swatch-silk { background: linear-gradient(135deg, #2f7996, #a8d8c9); } /* Teal/Mint */
.swatch-care { background: linear-gradient(135deg, #496c76, #efbd66); } /* Gray/Yellow */

/* Price labels and values */
.price-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--blue-700);
    font-weight: 800;
}

.price-card h3 {
    font-size: 1.72rem;
    min-height: 1.9em; /* Ensure height stability even if text wraps */
}

/* Price value display (Large, prominent) */
.price-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--muted);
}

.price-value strong {
    font-family: var(--display);
    font-size: 3.4rem; /* Massive price */
    line-height: 1;
    color: var(--ink);
}

/* Feature list items within cards */
.price-card ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.price-card li {
    font-size: .8rem;
    color: var(--ink-soft);
    line-height: 1.5;
}


/* =======================================
   9. ROUTE (Step-by-step process)
   ======================================= */
.route {
    background: var(--ink); /* Dark background for journey contrast */
    color: white;
    position: relative;
    overflow: hidden;
}

/* Decorative path element using pseudo-elements to represent the flow visually */
.route::before {
    content: "";
    position: absolute;
    width: 500px; /* Length of the abstract path */
    height: 500px;
    border: 100px solid rgba(8,124,193,.1); /* Subtle blue ring/path visualizer */
    border-radius: 50%;
    right: -250px;
    top: -250px;
}

.route-heading {
    max-width: 780px;
}

.route-heading p:last-child {
    color: #afc5cf; /* Light gray for secondary descriptive text */
    margin: 0;
}

/* The numbered list structure that represents the journey steps */
.route-list {
    list-style: none;
    padding: 0;
    margin: 64px 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Four steps in a row on desktop */
    position: relative;
}

/* Horizontal visual connector line (the 'Kant') between steps */
.route-list::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 27px; /* Vertically centered on the step indicators */
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--green-600) 0 12px, transparent 12px 20px);
}

.route-list li {
    position: relative;
    padding-right: 40px; /* Space for the number indicator */
}

/* The Step Indicator (The "node" on the Kant line) */
.route-index {
    position: relative;
    z-index: 2; /* Must be above the connector line */
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green-600);
    color: var(--ink); /* Dark text on bright green circle */
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 800;
    box-shadow: 0 0 0 8px rgba(19,47,63,.2); /* Soft shadow/halo effect */
}

/* Step Content */
.route-list h3 {
    margin-top: 30px; /* Space below the indicator to start step content */
    font-size: 1.45rem;
}

.route-list p {
    font-size: .78rem;
    color: #b3c9d2;
    margin: 0;
}


/* =======================================
   10. PROMO (Clean Thursday)
   ======================================= */
.promo {
    padding-block: 76px; /* Vertical padding for section isolation */
}

.promo-card {
    min-height: 250px;
    border-radius: var(--radius-lg); /* Large, soft corners */
    background: linear-gradient(110deg, #f8c250, #f3b33d); /* Warm accent gradient */
    padding: 44px 58px;
    display: grid;
    grid-template-columns: 140px 1fr auto; /* Badge | Content | CTA */
    align-items: center;
    gap: 44px;
    position: relative;
    overflow: hidden;
}

/* The badge containing the special offer */
.promo-badge {
    width: 128px;
    height: 128px;
    background: white;
    border-radius: 50% 50% 45% 55%/52% 45% 55% 48%; /* Asymmetrical shape */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-5deg);
    box-shadow: 0 15px 40px rgba(111,75,8,.18); /* Strong shadow for prominence */
}

.promo-badge span {
    font-family: var(--display);
    font-size: 1rem;
    color: var(--blue-900);
    font-weight: 800;
}

.promo-badge strong {
    font-family: var(--display);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--green-900); /* Green to show discount */
}

/* Promotional text content */
.promo-copy {
    position: relative;
    z-index: 2;
}

.promo-copy h2 {
    font-size: 3.5rem; /* Large, impactful headline */
    margin-bottom: 13px;
}

.promo-copy p:last-child {
    margin: 0;
    max-width: 610px;
}

/* CTA in promo card */
.promo-card .button {
    grid-column: 3; /* Place button in the third column slot */
    justify-self: start;
}


/* Decorative wave element (visual separation) */
.promo-weave {
    position: absolute;
    right: -80px;
    top: -70px;
    width: 330px;
    height: 330px;
    border: 2px dashed rgba(255,255,255,.5); /* Dashed white border */
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255,255,255,.08), 0 0 0 70px rgba(255,255,255,.06); /* Outer glow/ring */
}


/* =======================================
   11. OZONE (Ozonization service)
   ======================================= */
.ozone {
    background: var(--blue-050); /* Light background for a 'clean' feel */
}

.ozone-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 86px;
    align-items: center;
}

/* Image Container (Media) */
.ozone-media {
    position: relative;
}

/* Decorative border effect around the image, framing it like a badge or seal */
.ozone-media::before {
    content: "";
    position: absolute;
    left: -16px;
    top: -16px;
    width: 55%; /* Size relative to image container */
    height: 55%;
    border: 2px solid var(--green-600);
    border-radius: 28px;
    z-index: 0;
}

.ozone-media img {
    width: 100%;
    height: 500px; /* Fixed height for consistency */
    object-fit: cover;
    border-radius: 28px;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-lg);
    filter: saturate(.82); /* Desaturate slightly to look professional/clinical */
}

/* Ozone label stamp on image */
.ozone-label {
    position: absolute;
    z-index: 2;
    bottom: 24px;
    left: 24px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px); /* Frosted glass effect */
    border-radius: 15px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .72rem;
    font-weight: 700;
}

.ozone-label span {
    /* O3 symbol */
    font-family: var(--display);
    font-size: 1.45rem;
    color: var(--blue-700);
}

/* Copy content styling for Ozone section */
.ozone-copy {
    max-width: 520px;
}

.ozone-copy > p:not(.eyebrow) {
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* Check list for features */
.check-list {
    list-style: none;
    padding: 0;
    margin: 28px 0;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: .86rem;
    font-weight: 600;
}

.check-list span {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    background: var(--lime-100); /* Light green check background */
    border-radius: 50%;
    color: var(--green-900); /* Dark green checkmark color */
}

/* Ozone specific text link color */
.text-link-blue {
    color: var(--blue-900);
    border-color: rgba(7,90,146,.35);
}


/* =======================================
   12. ESTIMATE FORM MOCKUP (Non-functional)
   ======================================= */
.estimate {
    background: var(--blue-900); /* Dark background for form area */
    color: #fff;
}

.estimate-card {
    display: grid;
    /* Split layout: Copy text | Form/Results */
    grid-template-columns: .75fr 1.25fr;
    gap: 70px;
    align-items: center;
}

/* Copy section */
.estimate-copy h2 {
    font-size: 3.5rem; /* Large, dominant title */
}

.estimate-copy > p:last-child {
    color: #c0d9e5;
}


/* Form area styling */
.estimate-form {
    background: #fff;
    color: var(--ink);
    border-radius: 26px;
    padding: 26px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Three columns for inputs */
    gap: 13px;
    box-shadow: var(--shadow-lg);
}

/* Form label structure */
.estimate-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: .66rem;
    font-weight: 800;
    color: var(--muted);
}

/* Input field simulation */
.fake-input {
    height: 52px;
    border: 1px solid var(--line);
    border-radius: 12px; /* Rounded input style */
    padding: 0 15px;
    display: flex;
    align-items: center;
    color: var(--ink);
    font-size: .8rem;
    font-weight: 600;
    background: #fbfdfe; /* Very light gray input background */
}

/* Custom select indicator for material type */
.fake-select::after {
    content: "⌄";
    margin-left: auto; /* Align down arrow to the right edge of the field */
    color: var(--blue-700);
    font-size: 1rem;
}

/* Result Display Block */
.estimate-result {
    grid-column: 1 / -1; /* Span across all three columns */
    min-height: 62px;
    border-radius: 12px;
    background: var(--blue-050);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.estimate-result span {
    font-size: .7rem;
    color: var(--muted);
}

/* Calculated Price (Most prominent element in the form) */
.estimate-result strong {
    font-family: var(--display);
    font-size: 1.9rem;
    color: var(--blue-900);
}

/* Submit Button within the form container */
.estimate-form .button {
    align-self: stretch; /* Make button fill available column space */
    height: auto;
    margin-top: 10px; /* Slight separation from inputs */
}


/* =======================================
   13. CONTACTS (Information block)
   ======================================= */
.contacts {
    background: #fff;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr; /* Lead text | Phone card | Address card */
    gap: 22px;
    align-items: stretch; /* Ensures cards grow to the same height */
}

/* Lead Text Block */
.contact-grid > div:first-child {
    padding-top: 0; /* Align with top of structured elements */
}

.contact-grid h2 {
    font-size: 3.8rem;
}

.contact-lead {
    max-width: 520px;
    color: var(--muted);
    line-height: 1.6;
}

/* General card structure */
.contact-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to the left */
    gap: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.contact-caption {
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue-700);
    font-weight: 800;
}

/* Phone Link Styling */
.contact-card a {
    font-size: .84rem;
    font-weight: 700;
    text-decoration: underline; /* Make phone numbers obviously clickable/actionable */
    color: var(--blue-900);
}

/* Specific styling for the large main number */
.contact-card .contact-phone {
    font-family: var(--display);
    font-size: 2rem;
    color: var(--ink); /* Darker text than blue link */
    text-decoration: none; /* Remove underline from primary contact */
}

/* Address specific styling */
.contact-address strong {
    font-size: 1.06rem;
}

.contact-address p {
    font-size: .8rem;
    color: var(--muted);
}

/* Map note (contextual helper) */
.map-note {
    margin-top: auto; /* Pushes this element to the bottom of the card */
    padding: 7px 10px;
    background: var(--blue-050);
    border-radius: 8px;
    font-size: .63rem;
    color: var(--blue-900);
}


/* =======================================
   14. FOOTER (Site termination)
   ======================================= */
.site-footer {
    padding: 48px 0;
    background: #e8f3f7; /* Very light blue/gray for footer separation */
    border-top: 1px solid var(--line);
}

.footer-grid {
    display: grid;
    /* Footer layout adjusts columns based on available space, typically 4 blocks */
    grid-template-columns: 1fr 1fr .7fr 1.3fr;
    gap: 34px;
    align-items: center;
}

.footer-grid img {
    width: 255px; /* Slightly smaller logo in footer */
    height: auto;
}

.footer-grid p {
    margin: 0;
    font-size: .72rem;
    color: var(--ink-soft);
}

/* Footer navigation links stacked vertically for better readability/flow */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .75rem;
    font-weight: 700;
}

/* Legal/Meta disclaimer text on the far right */
.footer-meta {
    padding-left: 25px; /* Indent slightly from other footer items */
    border-left: 1px solid #c2d8e1; /* Subtle vertical separator line */
}


/* =======================================
   15. RESPONSIVE BREAKPOINTS (Adaptive Design)
   ======================================= */

/* Tablet View - Up to 1180px */
@media(max-width: 1180px) {
    /* Adjust header elements for smaller screens */
    .desktop-nav { display: none; } /* Hide full nav on tablet, rely on mobile menu button */
    .header-phone { margin-left: auto; }

    /* Hero adjustments */
    .hero-grid {
        grid-template-columns: 1fr .9fr; /* Narrower split for better balance */
    }
    .hero h1 { font-size: 4.7rem; }

    /* Proof section adjusts to two columns (Intro spans all) */
    .proof-grid {
        grid-template-columns: 1.2fr repeat(3, 1fr); /* Keep three cards but reduce padding/spacing if needed */
    }
    
    /* Promo card structure */
    .promo-card {
        grid-template-columns: 120px 1fr; /* Badge | Content + CTA (stacked or inline) */
    }
    .promo-card .button {
        grid-column: 2; /* Place button next to content block, not in its own column */
        justify-self: start;
    }

    /* Contacts layout shifts to two columns for better use of space */
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }
    .contact-grid > div:first-child {
        grid-column: 1/-1; /* Lead text spans both columns when moving to two-column grid */
    }

    /* Footer stacks items vertically in a narrower layout */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* Mid-size/Mobile View - Up to 820px (Standard Mobile Layout) */
@media(max-width: 820px) {
    /* Header consolidation */
    :root { --header: 72px; } /* Reduced header height */
    .container { width: min(calc(100% - 36px), var(--container)); } /* Slightly less horizontal padding */
    .section { padding: 82px 0; }

    /* Hide full desktop nav completely on mobile view, show burger placeholder */
    .desktop-nav, .header-phone, .desktop-cta { display: none; }
    .brand { width: 200px; flex: 0 0 auto; } /* Shrink logo to fit burger on narrow screens */
    .menu-button { display: flex !important; margin-left: auto; flex: 0 0 48px; } /* Show visual menu button, prevent flex-shrink */


    .ozone-media { max-width: 100%; overflow: hidden; }
    .ozone-media img { max-width: 100%; height: auto; }

    /* Hero section major restructuring (Mobile priority) */
    .hero { min-height: 680px; }
    .hero-grid {
        grid-template-columns: 1fr .8fr;
        overflow: hidden; /* Stacked, but slightly smaller media area first */
        gap: 25px;
    }

    /* Crucial mobile content reordering: Offer -> Photo (Text then Media) */
    .hero-copy { order: 2; padding-block: 60px;  overflow: hidden;}
    .hero-media { order: 1; min-height: 560px; margin-right: -18px; clip-path: polygon(0 10%,100% 0,100% 100%,0 100%); max-width: 100%; overflow: hidden; }
    /* The negative margin compensates for the structure change to keep visual flow */

    /* Text elements should now read first (Offer/H1) then see media */

    /* Proof section simplification: single column stack */
    .proof-grid {
        grid-template-columns: 1fr; /* Full width stacking */
    }
    .proof-intro {
        grid-column: 1/-1; /* Intro spans full width above the cards */
        padding: 0 0 36px; /* Add spacing below intro text */
    }
    .proof-card {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.16); /* Use top border instead of side border when stacked */
        padding: 25px 25px;
    }
    .proof-card:nth-child(2) { border-left: none; } /* Clear old left border on second element if needed for consistency, though it should be handled by the general rule now */

    /* Pricing shifts to two columns */
    .price-grid {
        grid-template-columns: 1fr 1fr;
    }
    .price-card:last-child {
        grid-column: 1/-1; /* Ensure the third card spans full width when there are only 2 active slots, but since we have 3 items, this will wrap it correctly into a second row */
    }

    /* Route steps become vertical stack */
    .route-list {
        grid-template-columns: 1fr; /* Single column flow for the route */
        gap: 0;
        margin-top: 42px;
    }
    /* Re-enable visual path elements for single column view, or simplify them */
    .route-list::before { display: none; }

    .route-list li {
        padding: 22px 0; /* Vertical padding between steps */
        display: grid;
        grid-template-columns: 48px 1fr; /* Step indicator and content in a row */
        gap: 18px;
        border-top: 1px solid rgba(255,255,255,.14); /* Use top border as separator */
    }
    .route-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }

    /* Promotion card shifts to a vertical stack/two-column layout */
    .promo-card {
        padding: 36px; /* Less padding on smaller screen */
        grid-template-columns: 105px 1fr; /* Badge | Content+CTA block */
    }
     /* Move CTA inside the content block for better flow, or keep it separate if space allows. Keeping it separate as grid column 2. */


    /* Ozone section becomes single column stack */
    .ozone-grid {
        grid-template-columns: 1fr; /* Full width stacking */
        gap: 55px;
    }

    /* Estimate Form shifts to two columns for better usability on mobile */
    .estimate-card {
        grid-template-columns: 1fr; /* Stacked layout */
        gap: 25px;
    }
    .estimate-form {
        grid-template-columns: 1fr 1fr; /* Two input columns */
    }

    /* Contacts card structure maintains its vertical nature but spans full width if needed */
    .contact-card {
        width: 100%;
    }
}


/* Smallest Mobile View - Up to 370px (Extreme optimization) */

/* Small Mobile - Up to 480px (covers 390px requirement) */
@media(max-width: 480px) {
    .container { width: calc(100% - 32px); }

    /* Hero: single column, remove negative margin */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .hero-media {
        margin-right: 0;
        min-height: 280px;
        clip-path: none;
    }
    .hero h1 { font-size: 2.6rem; line-height: .96; overflow-wrap: break-word; word-break: break-word; }
    .hero-lead { font-size: .95rem; }
    .hero-facts { grid-template-columns: 1fr 1fr 1fr; }
    .hero-facts li { padding-right: 10px; }
    .hero-facts strong { font-size: 1.15rem; }

    /* Promo: single column, reduce heading */
    .promo-card {
        grid-template-columns: 1fr;
        padding: 28px;
        gap: 20px;
    }
    .promo-badge { margin: 0 auto; }
    .promo-card .button { grid-column: 1; justify-self: start; }
    .promo-copy h2 { font-size: 2rem; overflow-wrap: break-word; word-break: break-word; }
    .promo-copy p { font-size: .9rem; }

    /* Contact: single column, reduce heading */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .contact-grid h2 { font-size: 2.4rem; overflow-wrap: break-word; word-break: break-word; }
    .contact-lead { max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
    .contact-card { width: 100%; max-width: 100%; box-sizing: border-box; }

    /* Estimate: single column, reduce heading */
    .estimate-card { grid-template-columns: 1fr; gap: 20px; }
    .estimate-copy h2 { font-size: 2.2rem; overflow-wrap: break-word; word-break: break-word; }
    .estimate-form { grid-template-columns: 1fr; }

    /* Price: single column */
    .price-grid { grid-template-columns: 1fr; }
    .price-card:last-child { grid-column: auto; }

    /* Route: single column */
    .route-list { grid-template-columns: 1fr; }
    .route-list li { grid-template-columns: 40px 1fr; gap: 14px; }

    /* Proof: single column */
    .proof-grid { grid-template-columns: 1fr; }
    .proof-intro { padding: 0 0 24px; }
    .proof-intro h2 { font-size: 1.8rem; }

    /* Footer: single column */
    .footer-grid { grid-template-columns: 1fr; gap: 16px; }

    /* General: prevent overflow from any element */
    h1, h2, h3, p, a, .text-link, .button-dark, .button {
        max-width: 100%;
        box-sizing: border-box;
    }
    h1, h2, h3 {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .text-link, .button-dark, .button {
        overflow-wrap: break-word;
    }

    /* Grid children: min-width 0 to prevent overflow */
    .hero-grid > *, .promo-card > *, .contact-grid > *,
    .estimate-card > *, .price-grid > *, .route-list > *,
    .proof-grid > *, .footer-grid > * {
        min-width: 0;
    }
}
@media(max-width: 370px) {
    :root { --header: 28px; } /* Very minimal header on tiny screens */

    .brand { width: 195px; } /* Shrink logo size */
    .hero h1 { font-size: 2.42rem; line-height: .95; margin-bottom: 20px; overflow-wrap: normal; word-break: break-word; }

    /* Facts list shrinks even more */
    .hero-facts strong { font-size: 1.08rem; }

    /* Button size adjustment */
    .button { padding-inline: 18px; }

    /* Contact phone sizes shrink */
    .contact-card .contact-phone { font-size: 1.7rem; }
}


/* =======================================
   16. PRINT STYLES (For documentation purposes)
   ======================================= */
@media print {
    .site-header, .service-strip, .hero-actions, .menu-button, .button { display: none !important; }
    .hero, .proof, .route, .estimate { background: #fff !important; color: #000 !important; }
    .section { padding: 32px 0; }
    .container { width: 100%; }

    /* Ensure content flows linearly */
    .hero-grid, .ozone-grid, .estimate-card, .contact-grid { display: block; gap: 20px; margin-bottom: 30px;}

    .hero-media{
        min-height: 300px;
        clip-path: none; /* Remove diagonal cut for print */
        margin: 20px 0;
    }

    /* Ensure price cards break cleanly on page turns if possible */
    .price-card, .contact-card {
        box-shadow: none;
        page-break-inside: avoid; /* Prevent card from being split across pages */
    }
}

/* =======================================
   17. JS-DRIVEN ENHANCEMENTS
   ======================================= */

/* Header scroll compact state */
.header-scrolled {
    box-shadow: 0 4px 20px rgba(7,63,91,.12);
}

/* Burger button base (hidden on desktop) */
.menu-button {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 12px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.menu-button span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center;
}

/* Burger → X animation */
.menu-button.menu-open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.menu-button.menu-open span:nth-child(2) {
    opacity: 0;
}
.menu-button.menu-open span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile nav overlay */
.mobile-nav {
    position: fixed;
    top: var(--header);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}

.mobile-nav--open {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.mobile-nav-links a {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    padding: 8px 16px;
    border-radius: 8px;
    transition: background .2s;
}

.mobile-nav-links a:hover,
.mobile-nav-links a:focus-visible {
    background: var(--blue-050);
}

.mobile-nav-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.mobile-nav-cta {
    margin-top: 12px;
}

/* Reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for grid children */
.proof-grid .reveal:nth-child(n+2) { transition-delay: .08s; }
.proof-grid .reveal:nth-child(n+3) { transition-delay: .16s; }
.proof-grid .reveal:nth-child(n+4) { transition-delay: .24s; }

.price-grid .reveal:nth-child(2) { transition-delay: .1s; }
.price-grid .reveal:nth-child(3) { transition-delay: .2s; }

.route-list .reveal:nth-child(2) { transition-delay: .1s; }
.route-list .reveal:nth-child(3) { transition-delay: .2s; }
.route-list .reveal:nth-child(4) { transition-delay: .3s; }

/* CTA pulse glow */
@keyframes cta-pulse {
    0%, 100% { box-shadow: 0 9px 22px rgba(74,177,38,.2); }
    50% { box-shadow: 0 9px 22px rgba(74,177,38,.32), 0 0 0 6px rgba(74,177,38,.07); }
}

.cta-pulse {
    animation: cta-pulse 2.8s ease-in-out infinite;
}

/* Reduced-motion override */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .cta-pulse {
        animation: none;
    }
    .mobile-nav {
        transition: none;
    }
    .menu-button span {
        transition: none;
    }
    html {
        scroll-behavior: auto;
    }
}