/* =========================================================================
   Kujau Schadensanierung – Stylesheet
   Farbpalette aus dem Logo (Blau / Rot / Anthrazit), Mobile-First-Layout,
   keine externen Schriften/Icons.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Schrift (selbst gehostet, kein Drittanbieter-Tracking)
   Inter v4.0 von Rasmus Andersson, SIL Open Font License 1.1
   ------------------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/InterVariable.woff2") format("woff2-variations"),
         url("/assets/fonts/InterVariable.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
    --c-water:        #1e3a8a;
    --c-water-dark:   #14266b;
    --c-water-soft:   #dbe4ff;
    --c-fire:         #dc2626;
    --c-fire-dark:    #991b1b;
    --c-fire-soft:    #fde2e2;
    --c-mold:         #16a34a;
    --c-mold-soft:    #d6f3df;
    --c-ink:          #0f172a;
    --c-ink-2:        #1e293b;
    --c-muted:        #475569;
    --c-line:         #e2e8f0;
    --c-bg:           #ffffff;
    --c-bg-alt:       #f5f6f8;
    --c-bg-deep:      #0b1224;

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .04);
    --shadow-md: 0 6px 18px -8px rgba(15, 23, 42, .25), 0 18px 40px -22px rgba(15, 23, 42, .20);
    --shadow-lg: 0 18px 40px -16px rgba(15, 23, 42, .35);

    --container: 1180px;
    --gutter: clamp(1rem, 2vw + .5rem, 2rem);

    --header-h: 64px;
    --logo-size: 44px;

    --font-sans: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-display: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;

    --transition: 200ms cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------------------------------------------------
   2. Reset & Base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

html.is-nav-open,
html.is-nav-open body {
    overflow: hidden;
    touch-action: none;
}

@media (min-width: 880px) {
    html.is-nav-open,
    html.is-nav-open body {
        overflow: auto;
        touch-action: auto;
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--c-water);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover,
a:focus-visible {
    color: var(--c-fire);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--c-water);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--c-ink);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 .4em;
}

h1 { font-size: clamp(2.25rem, 4.5vw + 1rem, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 2.5vw + .8rem, 2.5rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }

p {
    margin: 0 0 1em;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 1000;
    background: var(--c-ink);
    color: #fff;
    padding: .65rem 1rem;
    border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   3. Topbar
   ------------------------------------------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--c-line);
    min-height: var(--header-h);
    padding-top: env(safe-area-inset-top);
}

@media (min-width: 600px) {
    :root { --header-h: 72px; --logo-size: 56px; }
}

.topbar.is-scrolled {
    box-shadow: var(--shadow-sm);
}

.topbar__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: .75rem;
}

@media (min-width: 600px) {
    .topbar__inner { gap: 1rem; }
}

.topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--c-ink);
    font-family: var(--font-display);
    flex: 1 1 auto;
    min-width: 0;
}

@media (min-width: 600px) {
    .topbar__brand { flex: 0 0 auto; gap: .65rem; }
}

.topbar__brand:hover {
    color: var(--c-ink);
}

.topbar__logo {
    height: var(--logo-size);
    width: auto;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

.topbar__name {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    font-size: .92rem;
    min-width: 0;
}

.topbar__name strong {
    color: var(--c-fire);
    font-weight: 800;
    letter-spacing: -.01em;
    font-size: 1.05rem;
    white-space: nowrap;
}

.topbar__name span {
    color: var(--c-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 600px) {
    .topbar__name strong { font-size: 1.1rem; }
    .topbar__name span  { font-size: .78rem; letter-spacing: .12em; }
}

@media (max-width: 359px) {
    .topbar__name span { display: none; }
}

.topbar__nav {
    display: none;
    margin-left: auto;
    gap: 1.5rem;
}

.topbar__nav a {
    color: var(--c-ink);
    font-weight: 500;
    font-size: .95rem;
    position: relative;
    padding: .25rem 0;
}

.topbar__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, var(--c-water), var(--c-fire));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.topbar__nav a:hover::after,
.topbar__nav a:focus-visible::after {
    transform: scaleX(1);
}

.topbar__call {
    display: none;
    align-items: center;
    gap: .65rem;
    background: var(--c-fire);
    color: #fff;
    padding: .55rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), transform var(--transition);
}

.topbar__call:hover,
.topbar__call:focus-visible {
    background: var(--c-fire-dark);
    color: #fff;
    transform: translateY(-1px);
}

.topbar__call-icon {
    width: 20px;
    height: 20px;
}

.topbar__call-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.topbar__call-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    opacity: .85;
    font-weight: 600;
}

.topbar__call-number {
    font-size: .98rem;
    font-weight: 700;
}

.topbar__burger {
    margin-left: auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--c-ink);
    border: 1px solid var(--c-line);
}

.topbar__burger-icon {
    width: 22px;
    height: 22px;
}

.topbar__burger-icon--close {
    display: none;
}

.topbar__burger[aria-expanded="true"] .topbar__burger-icon--open { display: none; }
.topbar__burger[aria-expanded="true"] .topbar__burger-icon--close { display: block; }

.topbar__mobile {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    padding: .25rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 18px 30px -18px rgba(15, 23, 42, .25);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
}

/* Wichtig: Mit display:flex haben wir oben die UA-Default-Regel
   [hidden] { display: none } ueberschrieben. Daher hier wieder explizit
   das hidden-Attribut respektieren, damit das Menue initial geschlossen ist. */
.topbar__mobile[hidden] {
    display: none;
}

.topbar__mobile a {
    color: var(--c-ink);
    font-weight: 500;
    padding: 1rem 0;
    border-bottom: 1px solid var(--c-line);
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
}

.topbar__mobile a:last-of-type {
    border-bottom: 0;
}

.topbar__mobile-call {
    margin-top: .75rem;
    background: var(--c-fire);
    color: #fff !important;
    border-radius: var(--radius-sm);
    padding: .9rem 1rem !important;
    justify-content: center;
    border-bottom: 0 !important;
    font-weight: 700;
}

.topbar__mobile-call svg {
    width: 18px;
    height: 18px;
}

@media (min-width: 880px) {
    .topbar__nav { display: inline-flex; }
    .topbar__call { display: inline-flex; margin-left: 1rem; }
    .topbar__burger { display: none; }
    .topbar__mobile { display: none !important; }
}

/* -------------------------------------------------------------------------
   4. Buttons & Chips
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .9rem 1.4rem;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.15;
    transition: transform var(--transition), background var(--transition),
                color var(--transition), box-shadow var(--transition);
    text-align: left;
    min-height: 48px;
    min-width: 0;
}

.btn small {
    display: block;
    font-weight: 500;
    opacity: .85;
    font-size: .8em;
    letter-spacing: .02em;
}

.btn__icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.btn--primary {
    background: var(--c-fire);
    color: #fff;
    box-shadow: 0 12px 28px -10px rgba(220, 38, 38, .55);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--c-fire-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(220, 38, 38, .6);
}

.btn--ghost {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(4px);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    transform: translateY(-2px);
}

.section--region .btn--primary {
    align-self: stretch;
}

@media (min-width: 768px) {
    .section--region .btn--primary { align-self: start; }
}

.chip {
    display: inline-block;
    padding: .35rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: .04em;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
}

.chip--water { background: rgba(30, 58, 138, .35); border-color: rgba(219, 228, 255, .45); }
.chip--fire  { background: rgba(220, 38, 38, .35); border-color: rgba(253, 226, 226, .45); }
.chip--mold  { background: rgba(22, 163, 74, .32); border-color: rgba(214, 243, 223, .45); }
.chip--dark  { background: rgba(15, 23, 42, .45); border-color: rgba(226, 232, 240, .35); }

/* -------------------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.25rem, 6vw + 1rem, 6rem) 0 clamp(3rem, 8vw + 1rem, 7rem);
    color: #fff;
    background: var(--c-ink);
}

/* Auf Mobile/Tablet soll der Hero den initial sichtbaren Viewport komplett
   fuellen, damit der User nicht direkt die naechste Section sieht.
   svh = small viewport height: rechnet ohne URL-Bar, vermeidet Layout-Spruenge. */
@media (max-width: 879px) {
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(100vh - var(--header-h));
        min-height: calc(100svh - var(--header-h));
    }
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero__bg-blue,
.hero__bg-red {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60%;
    will-change: transform;
}

.hero__bg-blue {
    left: -10%;
    background: radial-gradient(ellipse at 30% 40%, var(--c-water) 0%, var(--c-water-dark) 55%, transparent 75%);
    animation: hero-blue-drift 22s ease-in-out infinite;
}

.hero__bg-red {
    right: -10%;
    background: radial-gradient(ellipse at 70% 50%, var(--c-fire) 0%, var(--c-fire-dark) 55%, transparent 75%);
    mix-blend-mode: screen;
    animation: hero-red-drift 26s ease-in-out infinite;
}

@keyframes hero-blue-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(2%, -1%, 0) scale(1.08); }
}

@keyframes hero-red-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}

.hero__wave {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: clamp(110px, 22vw, 220px);
    pointer-events: none;
}

.hero__logo {
    position: absolute;
    top: 50%;
    right: -14%;
    transform: translate3d(0, -50%, 0);
    transform-origin: center;
    width: clamp(260px, 48vw, 580px);
    height: auto;
    opacity: .04;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
    animation: hero-logo-float 18s ease-in-out infinite;
    /* Logo komplett weiss einfaerben: brightness(0) -> alle Pixel schwarz,
       invert(1) -> alle Pixel weiss. So entsteht ein ruhiger, monochromer
       Brand-Watermark auf dem dunklen Hero. */
    filter: brightness(0) invert(1);
}

@keyframes hero-logo-float {
    0%, 100% { transform: translate3d(0, -50%, 0) scale(1);    opacity: .04; }
    50%      { transform: translate3d(-1.5%, -53%, 0) scale(1.04); opacity: .065; }
}

@media (min-width: 880px) {
    .hero__logo {
        right: -6%;
        opacity: .055;
        animation-name: hero-logo-float-lg;
    }
}

@keyframes hero-logo-float-lg {
    0%, 100% { transform: translate3d(0, -50%, 0) scale(1);    opacity: .055; }
    50%      { transform: translate3d(-1.5%, -53%, 0) scale(1.04); opacity: .085; }
}

.hero__content {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
    text-align: left;
}

.hero__eyebrow {
    display: inline-block;
    max-width: 100%;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: .35rem .85rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    white-space: nowrap;
}

.hero__eyebrow-extra {
    display: none;
}

@media (min-width: 520px) {
    .hero__eyebrow {
        letter-spacing: .25em;
    }

    .hero__eyebrow-extra {
        display: inline;
    }
}

.hero__title {
    color: #fff;
    margin: 0 0 .35em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.hero__title-mark {
    display: inline-block;
    background: linear-gradient(120deg, #fff 30%, var(--c-fire-soft) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-right: .15em;
}

.hero__claim {
    font-size: clamp(1.05rem, 1.6vw + .6rem, 1.55rem);
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
    max-width: 38ch;
    margin: 0 0 1rem;
    text-wrap: balance;
    hyphens: auto;
}

.hero__lead {
    color: rgba(255, 255, 255, .78);
    max-width: 56ch;
    font-size: 1rem;
    margin: 0 0 1.75rem;
    hyphens: auto;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2rem;
}

.hero__actions .btn {
    flex: 1 1 100%;
    text-align: center;
}

@media (min-width: 520px) {
    .hero__actions { gap: .85rem; }
    .hero__actions .btn { flex: 0 1 auto; text-align: left; }
}

.hero__chips {
    display: none;
}

@media (min-width: 520px) {
    .hero__chips {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin: 1.5rem 0 0;
        padding: 0;
        list-style: none;
    }
}

/* -------------------------------------------------------------------------
   6. Section base
   ------------------------------------------------------------------------- */
.section {
    padding: clamp(2.5rem, 6vw + 1rem, 6rem) 0;
}

.section--services { background: var(--c-bg-alt); }
.section--why      { background: #fff; }
.section--region   { background: var(--c-ink); color: #fff; }
.section--contact  { background: var(--c-bg-alt); }

.section__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section__head {
    max-width: 780px;
    margin: 0 0 clamp(2rem, 3vw + .5rem, 3.25rem);
}

.section__head--split {
    max-width: none;
    display: grid;
    gap: 1.5rem;
    align-items: end;
}

@media (min-width: 880px) {
    .section__head--split {
        grid-template-columns: 1.1fr 1fr;
        gap: 3rem;
    }
}

.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--c-fire);
    font-weight: 700;
    margin-bottom: .85rem;
}

.section__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--c-water), var(--c-fire));
}

.section--region .section__eyebrow,
.section--region .section__eyebrow::before { color: #fff; }
.section--region .section__eyebrow::before { background: linear-gradient(90deg, #fff, var(--c-fire)); }

.section--region .section__title { color: #fff; }
.section--region .section__lead  { color: rgba(255, 255, 255, .82); }

.section__title {
    text-wrap: balance;
}

.section__lead {
    color: var(--c-muted);
    font-size: 1.05rem;
    max-width: 60ch;
    margin: 0;
}

/* -------------------------------------------------------------------------
   7. Services
   ------------------------------------------------------------------------- */
.services {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

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

@media (min-width: 960px) {
    .services { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.service {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.25rem 1.25rem;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition),
                border-color var(--transition);
}

@media (min-width: 600px) {
    .service { padding: 1.75rem 1.5rem 1.5rem; }
}

.service::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent, var(--c-water)) 0%, var(--accent, var(--c-water)) 8px, transparent 8px);
    pointer-events: none;
    opacity: .9;
}

.service::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 64%;
    height: 6px;
    background: var(--accent, var(--c-water));
    transform: skewX(-26deg) translateX(-12px);
    transform-origin: left;
    border-radius: 0 4px 4px 0;
}

.service:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.service--water { --accent: var(--c-water); --accent-soft: var(--c-water-soft); }
.service--fire  { --accent: var(--c-fire);  --accent-soft: var(--c-fire-soft);  }
.service--mold  { --accent: var(--c-mold);  --accent-soft: var(--c-mold-soft);  }
.service--dark  { --accent: var(--c-ink);   --accent-soft: var(--c-line);       }

.service__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--accent-soft, var(--c-water-soft));
    color: var(--accent, var(--c-water));
    margin-bottom: 1.1rem;
    position: relative;
    z-index: 1;
}

.service__icon {
    width: 28px;
    height: 28px;
}

.service__title {
    margin-bottom: .35rem;
    color: var(--c-ink);
}

.service__text {
    margin: 0;
    color: var(--c-muted);
    font-size: .98rem;
}

/* -------------------------------------------------------------------------
   8. Why (editoriale Liste mit Trennlinien, statt wiederholter Cards)
   ------------------------------------------------------------------------- */
.why {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--c-line);
}

.why__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    row-gap: .1rem;
    padding: 1.4rem .25rem;
    border-bottom: 1px solid var(--c-line);
    align-items: baseline;
    position: relative;
    transition: background var(--transition);
}

.why__item:hover {
    background: linear-gradient(90deg, rgba(30, 58, 138, .04), transparent 80%);
}

.why__item:nth-child(even):hover {
    background: linear-gradient(90deg, rgba(220, 38, 38, .05), transparent 80%);
}

.why__number {
    grid-row: 1 / span 2;
    align-self: start;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 1.4vw + 1rem, 2.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--c-water);
    min-width: 2.4ch;
    padding-top: .15rem;
}

.why__item:nth-child(even) .why__number {
    color: var(--c-fire);
}

.why__body {
    align-self: center;
}

.why__title {
    margin: 0 0 .15rem;
    font-size: 1.1rem;
    color: var(--c-ink);
    line-height: 1.25;
}

.why__text {
    margin: 0;
    color: var(--c-muted);
    font-size: .98rem;
    max-width: 52ch;
    line-height: 1.55;
}

@media (min-width: 720px) {
    .why {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
    }
    .why__item { padding: 1.6rem .25rem; }
    .why__item:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 719px) {
    .why__item:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
   9. Region
   ------------------------------------------------------------------------- */
.section__inner--region {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .section__inner--region {
        grid-template-columns: auto 1fr auto;
        gap: 2.5rem;
    }
}

.region__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--c-water) 0%, var(--c-fire) 130%);
    color: #fff;
    box-shadow: 0 18px 36px -16px rgba(220, 38, 38, .55);
}

.region__pin {
    width: 38px;
    height: 38px;
}

/* -------------------------------------------------------------------------
   10. Contact
   ------------------------------------------------------------------------- */
.contact {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

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

.contact__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.25rem;
    color: var(--c-ink);
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition),
                box-shadow var(--transition);
}

@media (min-width: 600px) {
    .contact__card { padding: 1.65rem 1.5rem; }
}

.contact__card:hover,
.contact__card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

a.contact__card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-water), var(--c-fire));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

a.contact__card:hover::after,
a.contact__card:focus-visible::after {
    transform: scaleX(1);
}

.contact__card--phone:hover { border-color: var(--c-fire); }
.contact__card--mail:hover  { border-color: var(--c-water); }

.contact__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg-alt);
    color: var(--c-water);
    margin-bottom: .35rem;
}

.contact__card--phone .contact__icon { color: var(--c-fire); background: var(--c-fire-soft); }
.contact__card--mail  .contact__icon { color: var(--c-water); background: var(--c-water-soft); }

.contact__icon svg {
    width: 24px;
    height: 24px;
}

.contact__label {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--c-muted);
    font-weight: 700;
}

.contact__value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-ink);
    font-style: normal;
    line-height: 1.35;
}

.contact__value span {
    display: block;
}

.contact__cta {
    margin-top: auto;
    padding-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--c-water);
    font-weight: 600;
}

.contact__card--phone .contact__cta { color: var(--c-fire); }

.contact__arrow {
    width: 18px;
    height: 18px;
    transition: transform var(--transition);
}

a.contact__card:hover .contact__arrow,
a.contact__card:focus-visible .contact__arrow {
    transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.site-footer {
    background: var(--c-bg-deep);
    color: rgba(255, 255, 255, .8);
    padding: clamp(2.5rem, 4vw, 3.5rem) 0 1.25rem;
    margin-top: 0;
}

.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 720px) {
    .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

.site-footer__brand {
    display: flex;
    gap: .85rem;
    align-items: center;
}

.site-footer__brand img {
    height: 64px;
    width: auto;
    max-width: 100%;
    border-radius: 12px;
    background: #fff;
    padding: 8px 10px;
    object-fit: contain;
    flex: 0 0 auto;
}

.site-footer__brand strong {
    color: #fff;
    font-size: 1.05rem;
    display: block;
    line-height: 1.2;
}

.site-footer__brand span {
    font-size: .9rem;
    color: rgba(255, 255, 255, .7);
}

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-style: normal;
}

.site-footer__contact a {
    color: #fff;
    font-weight: 600;
    padding: .15rem 0;
    display: inline-block;
}

.site-footer__contact a:hover {
    color: var(--c-fire-soft);
}

.site-footer__legal {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.site-footer__legal a {
    color: rgba(255, 255, 255, .85);
    padding: .5rem 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.site-footer__legal a:hover {
    color: #fff;
}

.site-footer__copy {
    max-width: var(--container);
    margin: 2rem auto 0;
    padding: 1.5rem var(--gutter) 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .55);
    font-size: .85rem;
}

/* -------------------------------------------------------------------------
   12. Legal pages
   ------------------------------------------------------------------------- */
.legal {
    padding: clamp(2.5rem, 5vw, 5rem) 0 4rem;
    background: var(--c-bg);
}

.legal__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.legal__back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--c-muted);
    font-weight: 500;
    margin-bottom: 2rem;
}

.legal__back:hover {
    color: var(--c-ink);
}

.legal__back-icon {
    width: 18px;
    height: 18px;
}

.legal__back-icon--flip {
    transform: scaleX(-1);
}

.legal h1 {
    margin-bottom: 1rem;
}

.legal h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: .5rem;
    color: var(--c-ink);
}

.legal p {
    color: var(--c-muted);
}

.legal a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal__notice {
    background: var(--c-fire-soft);
    border-left: 4px solid var(--c-fire);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 1rem 0 2rem;
    color: var(--c-ink);
    font-size: .95rem;
}

/* -------------------------------------------------------------------------
   13. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}