@font-face {
    font-family: Gotham;
    src: url('../fonts/Gotham-Book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Gotham;
    src: url('../fonts/Gotham-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Gotham;
    src: url('../fonts/Gotham-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Gotham;
    src: url('../fonts/Gotham-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat;
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap
}

:root {
    --green: #03624b;
    --green-dark: #175345;
    --navy: #12254d;
    --orange: #f07e28;
    --paper: #f8f7f5;
    --mint: #eaf0ec;
    --ink: #121212;
    --muted: #777;
    --white: #fff;
    --gutter: clamp(24px, 5.55vw, 80px);
    --radius: 20px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 20px/1.35 Gotham, Arial, sans-serif
}

button, input, textarea, select {
    font: inherit
}

button, a {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

a {
    color: inherit
}

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

h1, h2, h3, p, dl, dd {
    margin: 0
}

h2 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -.02em;
    text-transform: uppercase
}

h2 em {
    color: var(--green);
    font-style: normal
}

h3 {
    font-weight: 500
}

p {
    line-height: 1.35
}

.container {
    width: calc(100% - 2 * var(--gutter));
    max-width: 1280px;
    margin-inline: auto
}

.section {
    padding: 70px 0;
    overflow: hidden
}

.section__intro {
    margin-top: 20px;
    max-width: 970px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 14px 30px;
    border: 0;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font: 500 18px/1.2 Gotham, Arial, sans-serif;
    transition: background .18s, color .18s, transform .18s
}

.button--primary {
    background: var(--orange);
    color: #fff
}

.button--primary:hover {
    background: var(--navy)
}

.button--secondary {
    background: #fff;
    color: #111
}

.button--secondary:hover {
    background: var(--mint)
}

.button--green {
    background: var(--green);
    color: #fff
}

.button:active {
    transform: translateY(1px)
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--green);
    text-decoration: none;
    font-size: 18px
}

.text-link img {
    width: 28px;
    height: 28px;
    object-fit: contain
}

.eyebrow {
    text-transform: uppercase;
    font-size: 20px
}

.muted {
    color: var(--muted)
}

:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 5px
}

[hidden] {
    display: none !important
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 30;
    background: #fff;
    padding: 12px
}

.skip-link:focus {
    top: 12px
}

input, textarea {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #eee;
    padding: 15px 20px;
    color: #111;
    font-size: 16px
}

textarea {
    min-height: 115px;
    resize: vertical
}

input::placeholder, textarea::placeholder {
    color: #858585
}

input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
    flex-shrink: 0
}

.form-message {
    font-size: 14px;
    line-height: 1.4;
    margin-top: 12px
}

.form-message:empty {
    display: none
}

.carousel-buttons {
    display: flex;
    gap: 12px
}

.circle-button {
    border: 1px solid var(--green);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    display: grid;
    place-items: center
}

.circle-button img {
    width: 24px;
    height: 24px;
    object-fit: contain
}

.circle-button--prev img {
    transform: rotate(180deg)
}

.circle-button:hover {
    background: var(--mint)
}

.circle-button:disabled {
    opacity: .35;
    cursor: default
}

.dialog {
    border: 0;
    border-radius: 18px;
    max-width: min(860px, calc(100vw - 32px));
    padding: 64px 28px 28px;
    max-height: calc(100dvh - 32px);
    background: var(--paper);
    color: var(--ink)
}

.dialog::backdrop {
    background: rgba(3, 20, 15, .86);
}

.dialog__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--green);
    font: 32px/1 Arial, sans-serif
}

.dialog__body img {
    max-height: 72dvh;
    margin: auto;
    object-fit: contain
}

.dialog__body h2 {
    font-size: 28px;
    margin: 12px 0 24px
}

.dialog__body p {
    margin: 20px 0
}

.dialog__body .button {
    margin-top: 20px
}

#load-error {
    padding: 24px
}

@media (min-width: 1441px) {
    .hero {
        min-height: 806px
    }
}

@media (max-width: 1000px) {
    body {
        font-size: 18px
    }

    h2 {
        font-size: 32px
    }

    .section {
        padding: 52px 0
    }

    .button {
        font-size: 16px;
        padding: 14px 22px
    }
}

@media (max-width: 600px) {
    body {
        font-size: 16px
    }

    h2 {
        font-size: 24px;
        line-height: 1.2
    }

    .section {
        padding: 40px 0
    }

    .section__intro {
        font-size: 14px;
        margin-top: 18px
    }

    .button {
        font-size: 14px;
        min-height: 44px;
        padding: 8px 18px;
        border-radius: 6px
    }

    .eyebrow {
        font-size: 15px
    }

    .text-link {
        font-size: 14px
    }

    .circle-button {
        width: 38px;
        height: 38px
    }

    .dialog {
        padding: 60px 20px 24px
    }

    .dialog__body h2 {
        font-size: 23px
    }

    input, textarea {
        padding: 10px 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }

    *, *::before, *::after {
        transition: none !important;
        animation: none !important
    }
}

/* Общие окна: отдельная кнопка закрытия и затемнение страницы. */
html.has-dialog {
    overflow: hidden
}

.dialog__close:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px
}

.dialog--gallery {
    background: transparent;
    max-width: min(960px, calc(100vw - 24px));
    width: max-content;
    overflow: auto;
    padding: 62px 12px 10px
}

.dialog--gallery .dialog__close {
    color: white;
    top: 8px;
    right: 12px
}

.gallery__image img {
    display: block;
    border-radius: 14px;
    max-height: calc(100dvh - 200px);
    width: auto;
    max-width: 100%;
    object-fit: contain
}

.gallery__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 20px;
    color: white
}

.gallery__controls button {
    border: 1px solid #ffffff80;
    background: transparent;
    border-radius: 50%;
    color: white;
    width: 44px;
    height: 44px;
    font: 24px Arial, sans-serif
}

.gallery__controls button:hover {
    background: var(--green)
}

.gallery__controls span {
    font-size: 15px;
    min-width: 50px;
    text-align: center
}

.gallery__controls :focus-visible {
    outline-color: white
}

@media (max-width: 600px) {

    .dialog--gallery {
        padding: 60px 4px 8px
    }

    .dialog__body h2 {
        margin-top: 0
    }

    .gallery__controls {
        gap: 24px
    }

    input,
    textarea {
        border-radius: 6px;
    }
}