/***** GLOBAL *****/

/* fonts */
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../vendor/fonts/google-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../vendor/fonts/google-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* colors */
:root {
    --main-color: #be1522;
    --main-text-color: #ffffff;
    --second-color: #ffffff;
    --second-text-color: #232323;
    --third-color: #f3f0eb;
    --third-text-color: #232323;
    --dark-color: #1f1f1f;
    --dark-text-color: #ffffff;
    --muted-color: #5f5b56;
    --line-color: #e2ddd5;
}

/* base */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--second-color);
    color: var(--second-text-color);
    font-family: "Google Sans", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
}

main {
    flex: 1 0 auto;
}

a {
    color: var(--main-color);
}

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

/* typography */
h1,
h2,
h3,
h4,
h5,
h6,
.heading {
    font-weight: 500;
    line-height: 1.15;
}

h1 {
    font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem);
}

h2 {
    font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
}

h3 {
    font-size: 1.5rem;
}

/* layout */
.container {
    padding-left: 25px;
    padding-right: 25px;
}

section {
    padding-top: clamp(56px, 8vw, 104px);
    padding-bottom: clamp(56px, 8vw, 104px);
}

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

/* buttons */
.t-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.8em 1.6em;
    border: 1px solid transparent;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s ease;
}

.t-btn svg {
    width: 18px;
    height: 18px;
}

.t-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.t-btn.theme {
    background: var(--main-color);
    border-color: var(--main-color);
    color: var(--main-text-color);
}

.t-btn.theme:hover,
.t-btn.theme:focus-visible {
    background: var(--dark-color);
    border-color: var(--dark-color);
    color: var(--dark-text-color);
}

.t-btn.theme2 {
    background: var(--second-color);
    border-color: var(--second-color);
    color: var(--second-text-color);
}

.t-btn.theme2:hover,
.t-btn.theme2:focus-visible {
    background: var(--second-text-color);
    border-color: var(--second-text-color);
    color: var(--second-color);
}

.t-btn.theme3 {
    background: var(--third-color);
    border-color: var(--third-color);
    color: var(--third-text-color);
}

.t-btn.theme3:hover,
.t-btn.theme3:focus-visible {
    background: var(--third-text-color);
    border-color: var(--third-text-color);
    color: var(--second-color);
}

/* project card */
.project-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.project-card img {
    width: 100%;
    aspect-ratio: 3 / 2;
    margin-bottom: 14px;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.project-card .title {
    display: block;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.25;
}

.project-card .meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-color);
    font-size: 0.9375rem;
}

.project-card .meta svg {
    width: 16px;
    height: 16px;
}

.project-card:hover img {
    opacity: 0.85;
}

.project-card:hover .title {
    color: var(--main-color);
}

.project-card:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 4px;
}

/* photo grid */
.photo-grid {
    column-gap: 16px;
    columns: 3 280px;
}

.photo-grid .photo {
    display: block;
    margin-bottom: 16px;
    break-inside: avoid;
}

.photo-grid .photo img {
    width: 100%;
    transition: opacity 0.3s ease;
}

.photo-grid .photo:hover img {
    opacity: 0.85;
}

.photo-grid .photo:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

/* lightbox */
.lightbox .modal-content {
    align-items: center;
    justify-content: center;
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.lightbox .image {
    max-width: 100%;
    max-height: 100vh;
    padding: 56px 16px;
    object-fit: contain;
}

.lightbox .control {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    padding: 10px;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
    color: inherit;
}

.lightbox .control:hover,
.lightbox .control:focus-visible {
    background: var(--main-color);
}

.lightbox .close {
    top: 8px;
    right: 8px;
}

.lightbox .prev {
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
}

.lightbox .next {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.lightbox .counter {
    position: absolute;
    bottom: 12px;
    margin: 0;
    font-size: 0.9375rem;
}

/* page intro */
.gallery-page .intro-section,
.realizations-page .intro-section,
.realization-page .intro-section {
    padding-bottom: 0;
}

.gallery-page .intro-section .text,
.realizations-page .intro-section .text,
.realization-page .intro-section .text {
    max-width: 760px;
    color: var(--muted-color);
}

.gallery-page .intro-section .heading,
.realizations-page .intro-section .heading,
.realization-page .intro-section .heading {
    margin-bottom: 20px;
}

.realizations-page .intro-section .lead-title,
.realization-page .intro-section .lead-title {
    margin-bottom: 8px;
    font-size: 1.375rem;
    font-weight: 500;
}

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

    .t-btn,
    .project-card img,
    .photo-grid .photo img {
        transition: none;
    }
}

/***** HEADER *****/

/* header */
.header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--second-color);
    color: var(--second-text-color);
    border-bottom: 1px solid var(--line-color);
}

.header .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* logo */
.header .logo img {
    width: auto;
    height: 52px;
}

/* navigation */
.header .navigation ul {
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header .navigation a {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}

.header .navigation a:hover,
.header .navigation a[aria-current="page"] {
    color: var(--main-color);
}

/* actions */
.header .actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header .phone {
    align-items: center;
    gap: 8px;
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}

.header .phone svg {
    width: 18px;
    height: 18px;
    color: var(--main-color);
}

.header .menu-toggle,
.header .menu-close {
    display: inline-flex;
    padding: 0.625em;
    border: 0;
    background: transparent;
    color: inherit;
}

/* offcanvas */
.header .offcanvas {
    --bs-offcanvas-bg: var(--second-color);
    --bs-offcanvas-color: var(--second-text-color);
}

.header .offcanvas-header {
    justify-content: space-between;
}

.header .offcanvas .navigation ul {
    flex-direction: column;
    gap: 16px;
}

.header .offcanvas .navigation a {
    font-size: 1.25rem;
}

/***** HOME *****/

/* hero */
.home-page .hero-section {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(82vh, 780px);
    padding-top: 120px;
    padding-bottom: clamp(48px, 7vw, 88px);
    overflow: hidden;
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.home-page .hero-section .image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-page .hero-section::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.12) 100%);
    content: "";
}

.home-page .hero-section .container {
    position: relative;
    z-index: 1;
}

.home-page .hero-section .content {
    max-width: 780px;
}

.home-page .hero-section .eyebrow {
    margin-bottom: 12px;
    font-weight: 500;
}

.home-page .hero-section .heading {
    margin-bottom: 16px;
}

.home-page .hero-section .text {
    margin-bottom: 28px;
    font-size: 1.25rem;
}

.home-page .hero-section .t-btn.outline {
    border-color: var(--dark-text-color);
    color: var(--dark-text-color);
}

.home-page .hero-section .t-btn.outline:hover,
.home-page .hero-section .t-btn.outline:focus-visible {
    background: var(--dark-text-color);
    color: var(--dark-color);
}

/* offer */
.home-page .offer-section .icon svg {
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
    color: var(--main-color);
}

.home-page .offer-section .card {
    height: 100%;
    border: 0;
    border-top: 2px solid var(--line-color);
    border-radius: 0;
    padding-top: 20px;
    background: transparent;
}

.home-page .offer-section .title {
    margin-bottom: 10px;
    font-size: 1.375rem;
}

.home-page .offer-section .text {
    margin: 0;
    color: var(--muted-color);
}

/* about */
.home-page .about-section {
    background: var(--third-color);
    color: var(--third-text-color);
}

.home-page .about-section .heading {
    margin-bottom: 20px;
}

.home-page .about-section .text {
    margin-bottom: 28px;
}

.home-page .about-section .t-btn.theme3 {
    background: var(--second-color);
    border-color: var(--second-color);
}

.home-page .about-section .t-btn.theme3:hover,
.home-page .about-section .t-btn.theme3:focus-visible {
    background: var(--third-text-color);
    border-color: var(--third-text-color);
}

/* interior */
.home-page .interior-section > .container > .heading {
    max-width: 760px;
    margin-bottom: 40px;
}

.home-page .interior-section .card {
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.home-page .interior-section .image {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
    object-fit: cover;
}

.home-page .interior-section .title {
    margin-bottom: 10px;
}

.home-page .interior-section .text {
    margin: 0;
    color: var(--muted-color);
}

/* process */
.home-page .process-section {
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.home-page .process-section .heading {
    margin-bottom: 40px;
}

.home-page .process-section .steps {
    margin-bottom: 40px;
    padding: 0;
    list-style: none;
}

.home-page .process-section .card {
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
}

.home-page .process-section .number {
    display: block;
    margin-bottom: 8px;
    color: #ff6b75;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
}

.home-page .process-section .title {
    margin-bottom: 8px;
}

.home-page .process-section .text {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
}

/* work */
.home-page .work-section .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.home-page .work-section .heading {
    margin: 0;
}

/* video */
.home-page .video-section {
    padding-top: 0;
}

.home-page .video-section video {
    width: 100%;
    background: var(--dark-color);
}

/***** REALIZATIONS *****/

/* list */
.realizations-page .list-section .project-card .meta {
    margin-top: 2px;
}

/***** REALIZATION *****/

/* intro */
.realization-page .intro-section .back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
    color: var(--muted-color);
    text-decoration: none;
}

.realization-page .intro-section .back:hover {
    color: var(--main-color);
}

.realization-page .intro-section .back svg {
    width: 18px;
    height: 18px;
}

/* photos */
.realization-page .photos-section {
    padding-bottom: 32px;
}

.realization-page .photos-section .video {
    width: 100%;
    margin-bottom: 16px;
    background: var(--dark-color);
}

/* next */
.realization-page .next-section {
    padding-top: 0;
}

.realization-page .next-section .pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

/***** GALLERY *****/

/* photos */
.gallery-page .intro-section .buttons {
    margin-top: 24px;
}

.gallery-page .photos-section {
    padding-top: 40px;
}

/***** CONTACT *****/

/* form */
.contact-page .main-section .heading {
    margin-bottom: 28px;
}

.contact-page .main-section .form-control {
    border-color: var(--line-color);
    border-radius: 0;
    padding: 0.7em 0.9em;
}

.contact-page .main-section .form-control:focus,
.contact-page .main-section .form-check-input:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 0.2rem rgba(190, 21, 34, 0.18);
}

.contact-page .main-section .form-check-input:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.contact-page .main-section .website-field {
    position: absolute;
    left: -9999px;
}

/* info */
.contact-page .main-section .info {
    padding: clamp(20px, 3vw, 32px);
    background: var(--third-color);
    color: var(--third-text-color);
}

.contact-page .main-section .image {
    width: 100%;
    margin-bottom: 24px;
}

.contact-page .main-section .title {
    margin-bottom: 16px;
    font-size: 1.375rem;
}

.contact-page .main-section .details {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.contact-page .main-section .details li {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.contact-page .main-section .details svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 4px;
    color: var(--main-color);
}

.contact-page .main-section .tax {
    color: var(--muted-color);
    font-size: 0.9375rem;
}

.contact-page .main-section .social {
    display: flex;
    gap: 16px;
    margin: 0;
}

/* map */
.contact-page .map-section {
    padding: 0;
}

.contact-page .map-section iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

/***** FOOTER *****/

.footer {
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.footer a {
    color: inherit;
}

.footer a:hover {
    color: #ff8a92;
}

/* main */
.footer .main {
    padding-top: 56px;
    padding-bottom: 40px;
}

.footer .logo {
    display: inline-block;
    margin-bottom: 16px;
}

.footer .logo img {
    width: auto;
    height: 72px;
}

.footer .title {
    margin-bottom: 14px;
    font-size: 1.125rem;
}

.footer .text {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
}

/* links */
.footer .links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer .links li {
    margin-bottom: 8px;
}

.footer .links a {
    text-decoration: none;
}

/* contact */
.footer .contact p {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.78);
}

.footer .contact a {
    color: var(--dark-text-color);
}

.footer .contact .social {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
}

/* bottom */
.footer .bottom {
    padding-top: 20px;
    padding-bottom: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.9375rem;
}

.footer .bottom p {
    margin: 0;
}