:root {
     --background: #faf1e5;
     --text: #292623;
     --muted: #716b65;
     --accent: #a66c59;
     --line: #ded9d2;
     --soft: #e8e0d4;
     --dark: #292724;
}

* {
     box-sizing: border-box;
}

html {
     scroll-behavior: smooth;
}

body {
     margin: 0;
     background: var(--background);
     color: var(--text);
     font-family: "Inter", Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
}

button {
     font: inherit;
}


/* =========================================
   HEADER
========================================= */

.site-header {
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 32px 48px;
     border-bottom: 1px solid #2825221f;
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.logo {
     margin: 0;
     color: #282522;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 2px;
     white-space: nowrap;
     text-decoration: none;
}

.main-nav {
     display: flex;
     align-items: center;
     gap: 28px;
}

.main-nav a {
     color: #282522;
     font-size: 16px;
     font-weight: 500;
     letter-spacing: 0.6px;
     text-decoration: none;
     white-space: nowrap;
     transition: opacity 180ms ease;
}

.main-nav a:hover {
     opacity: 0.55;
}


/* =========================================
   MENU TOGGLE
========================================= */

.menu-toggle {
     display: none;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     padding: 0;
     border: none;
     background: transparent;
     cursor: pointer;
     gap: 6px;
     position: relative;
     z-index: 1000;
}

.menu-toggle span {
     display: block;
     width: 24px;
     height: 2px;
     background-color: #282522;
     border-radius: 1px;
     transition: all 300ms ease;
}

.menu-toggle.is-open span:nth-child(1) {
     transform: translateY(8px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
     opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
     transform: translateY(-8px) rotate(-45deg);
}


/* =========================================
   MOBILE MENU OVERLAY
========================================= */

.mobile-menu-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(40, 37, 34, 0.5);
     z-index: 999;
     display: flex;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity 300ms ease, visibility 300ms ease;
}

.mobile-menu-overlay.is-open {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
}

.mobile-menu {
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     max-width: 280px;
     height: 100%;
     background-color: #faf1e5;
     padding: 80px 24px 24px;
     display: flex;
     flex-direction: column;
     gap: 24px;
     transform: translateX(100%);
     transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
     overflow-y: auto;
}

.mobile-menu-overlay.is-open .mobile-menu {
     transform: translateX(0);
}

.mobile-menu a {
     display: block;
     color: #282522;
     font-size: 18px;
     font-weight: 500;
     letter-spacing: 0.6px;
     text-decoration: none;
     padding: 12px 0;
     border-bottom: 1px solid #ded9d2;
     transition: opacity 180ms ease;
}

.mobile-menu a:hover {
     opacity: 0.55;
}


/* =========================================
   HERO
========================================= */

.hero {
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 96px 48px 64px;
     display: flex;
     flex-direction: column;
     gap: 48px;
}

.hero-copy {
     width: 100%;
}

.hero-copy .eyebrow {
     margin: 0;
     color: #a66c59;
     font-size: 11px;
     line-height: 1.4;
     font-weight: 600;
     letter-spacing: 1.8px;
}

.hero-copy h1 {
     max-width: 900px;
     margin: 18px 0 0;
     color: #282522;
     font-family: "Cormorant", Georgia, serif;
     font-size: 68px;
     line-height: 0.98;
     font-weight: 500;
     letter-spacing: -1.8px;
}

.hero-copy .intro {
     max-width: 760px;
     margin: 18px 0 0;
     color: rgba(40, 37, 34, 0.72);
     font-size: 17px;
     line-height: 1.55;
}

.featured-project {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 16px;
}

.main-image {
     width: 100%;
     height: 385px;
     overflow: hidden;
     border-radius: 20px;
}

.project-images {
     width: 100%;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     margin-top: 10px;
}

.project-image {
     width: 100%;
     height: 500px;
     overflow: hidden;
     border-radius: 20px;
}

.main-image img,
.project-image img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     object-position: center;
}

.project-meta {
     width: 100%;
     margin-top: 30px;
     color: rgba(40, 37, 34, 0.62);
     font-size: 11px;
     line-height: 1.4;
     font-weight: 500;
     letter-spacing: 0.8px;
}


/* =========================================
   ABOUT
========================================= */

.about-section {
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 112px 48px;
     display: flex;
     align-items: flex-start;
     gap: 64px;
}

.about-section .section-label {
     flex: 0 0 auto;
     color: #a66c59;
     font-size: 11px;
     line-height: 1.4;
     font-weight: 600;
     letter-spacing: 1.8px;
}

.about-content {
     flex: 1 1 auto;
     max-width: 720px;
     margin-left: 175px;
}

.about-content h2 {
     max-width: 720px;
     margin: 0;
     color: #282522;
     font-family: "Cormorant", Georgia, serif;
     font-size: 52px;
     line-height: 1.02;
     font-weight: 500;
     letter-spacing: -1px;
}

.about-content p {
     max-width: 560px;
     margin: 24px 0 0;
     color: rgba(40, 37, 34, 0.72);
     font-size: 16px;
     line-height: 1.6;
}

.text-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     margin-top: 28px;
     color: #282522;
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.6px;
     text-decoration: none;
     transition: opacity 180ms ease;
}

.text-link:hover {
     opacity: 0.55;
}

.text-link span {
     font-size: 16px;
}

.help-button-arrow {
  font-family: Arial, sans-serif;
  font-style: normal;
  color: #282522;
}


/* =========================================
   SERVICES
========================================= */

.services-section {
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 112px 48px;
     border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line);
}

.services-section .section-label {
     color: var(--accent);
     font-size: 11px;
     line-height: 1.4;
     font-weight: 600;
     letter-spacing: 1.8px;
}

.services-content {
     margin-top: 48px;
}

.services-intro h2 {
     max-width: 760px;
     margin: 0;
     color: #282522;
     font-family: "Cormorant", Georgia, serif;
     font-size: 52px;
     line-height: 1.02;
     font-weight: 500;
     letter-spacing: -1px;
}

.services-list {
     width: 100%;
     margin-top: 64px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 40px;
}

.service-item {
     min-width: 0;
     padding-top: 24px;
     border-top: 1px solid var(--line);
}

.service-number {
     display: block;
     margin-bottom: 48px;
     color: var(--accent);
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
}

.service-content h3 {
     margin: 0;
     color: #282522;
     font-family: "Cormorant", Georgia, serif;
     font-size: 32px;
     line-height: 1.05;
     font-weight: 500;
     letter-spacing: -0.5px;
}

.service-content p {
     margin: 18px 0 0;
     color: rgba(40, 37, 34, 0.68);
     font-size: 14px;
     line-height: 1.65;
}


/* =========================================
   PROJECTS
========================================= */

.projects-section {
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 112px 48px;
     display: flex;
     flex-direction: column;
     gap: 40px;
}

.section-heading {
     width: 100%;
}

.section-heading h2 {
     margin: 0;
     color: #282522;
     font-family: "Cormorant", Georgia, serif;
     font-size: 54px;
     line-height: 1;
     font-weight: 500;
     letter-spacing: -1px;
}


/* =========================================
   GALLERY SLIDER
========================================= */

.gallery-slider {
    width: 100%;
}

.slider-wrapper {
    width: 100%;
    height: 520px;
    position: relative;
}

.slider-viewport {
    --slider-gap: 20px;

    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider-track {
    width: 100%;
    height: 100%;

    display: flex;

    gap: var(--slider-gap);

    transition:
        transform 600ms ease-in-out;

    will-change: transform;
}


/* Desktop:
   dokładnie 2 zdjęcia w widoku
   z równym odstępem między nimi.
*/

.slide {
    flex: 0 0 calc(
        (100% - var(--slider-gap)) / 2
    );

    height: 100%;
}

.slide-image {
    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 20px;

    cursor: pointer;
}

.slide-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 500ms ease;
}

.slide-image:hover img {
    transform: scale(1.02);
}


/* =========================================
   SLIDER ARROWS
========================================= */

.slider-button {
     position: absolute;
     top: 50%;
     z-index: 10;
     width: 42px;
     height: 42px;
     padding: 0;
     border: none;
     background: transparent;
     cursor: pointer;
     transform: translateY(-50%);
     opacity: 0.8;
     transition: opacity 180ms ease;
}

.slider-button::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 14px;
     height: 14px;
     border-top: 1.5px solid #282522;
     border-right: 1.5px solid #282522;
     border-radius: 2px;
}

.slider-prev {
     left: -58px;
}

.slider-prev::before {
     transform: translate(-35%, -50%) rotate(-135deg);
}

.slider-next {
     right: -58px;
}

.slider-next::before {
     transform: translate(-65%, -50%) rotate(45deg);
}

.slider-button:hover {
     opacity: 0.4;
}


/* =========================================
   SLIDER COUNTER
========================================= */

.slider-counter {
     margin-top: 14px;
     display: flex;
     justify-content: flex-end;
     gap: 6px;
     color: rgba(40, 37, 34, 0.65);
     font-size: 11px;
     letter-spacing: 1px;
}


/* =========================================
   EXPAND GALLERY
========================================= */

.gallery-toggle {
     margin-top: -8px;
     padding: 0;
     border: none;
     background: transparent;
     color: #282522;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 0.6px;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     transition: opacity 180ms ease;
}

.gallery-toggle:hover {
     opacity: 0.55;
}

.gallery-toggle-icon {
     font-size: 16px;
     transition: transform 300ms ease;
}

.gallery-toggle.is-open .gallery-toggle-icon {
     transform: rotate(180deg);
}

.gallery-expanded {
     width: 100%;
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     margin-top: -24px;
     transition:
         max-height 600ms ease,
         opacity 350ms ease,
         margin-top 400ms ease;
}

.gallery-expanded.is-open {
     max-height: 4000px;
     opacity: 1;
     margin-top: 0;
}

.gallery-grid {
     width: 100%;
     max-width: 1080px;
     margin: 0 auto;

     display: grid;

     grid-template-columns:
         repeat(4, minmax(0, 1fr));

     gap: 30px;
}

.gallery-thumbnail {
     width: 100%;
     aspect-ratio: 1 / 1;
     padding: 0;
     border: none;
     overflow: hidden;
     border-radius: 14px;
     background: transparent;
     cursor: pointer;
}

.gallery-thumbnail img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     transition: transform 350ms ease;
}

.gallery-thumbnail:hover img {
     transform: scale(1.06);
}


/* =========================================
   LIGHTBOX
========================================= */

.lightbox {
     position: fixed;
     inset: 0;
     z-index: 9999;
     background: rgba(25, 23, 21, 0.94);

     display: flex;
     align-items: center;
     justify-content: center;

     opacity: 0;
     visibility: hidden;

     transition:
         opacity 250ms ease,
         visibility 250ms ease;
}

.lightbox.is-open {
     opacity: 1;
     visibility: visible;
}

.lightbox img {
     max-width: 90vw;
     max-height: 88vh;
     object-fit: contain;
     border-radius: 12px;
}

.lightbox-close {
     position: absolute;
     top: 28px;
     right: 32px;
     width: 48px;
     height: 48px;
     border: none;
     background: transparent;
     color: #ffffff;
     font-size: 38px;
     cursor: pointer;
}


/* =========================================
   LIGHTBOX ARROWS
========================================= */

.lightbox-nav {
     position: absolute;
     width: 60px;
     height: 60px;
     padding: 0;
     border: none;
     background: transparent;
     color: rgba(255, 255, 255, 0.85);
     font-family: Arial, sans-serif;
     font-size: 42px;
     font-weight: 300;
     line-height: 1;
     cursor: pointer;

     display: flex;
     align-items: center;
     justify-content: center;

     opacity: 0.75;

     transition:
         opacity 180ms ease,
         transform 180ms ease;
}

.lightbox-prev {
     left: 32px;
}

.lightbox-next {
     right: 32px;
}

.lightbox-nav:hover {
     opacity: 1;
}

.lightbox-prev:hover {
     transform: translateX(-4px);
}

.lightbox-next:hover {
     transform: translateX(4px);
}


/* =========================================
   FOOTER
========================================= */

.site-footer {
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 28px 48px;

     display: flex;
     align-items: center;
     justify-content: space-between;
}

.site-footer span {
     color: rgba(40, 37, 34, 0.58);
     font-size: 10px;
     line-height: 1.4;
     font-weight: 500;
     letter-spacing: 1px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 809px) {

     .site-header {
         padding: 24px;
     }

     .logo {
         font-size: 11px;
     }

     .main-nav {
         gap: 18px;
     }

     .main-nav a {
         font-size: 10px;
     }

     .hero {
         padding: 72px 24px 48px;
         gap: 32px;
     }

     .hero-copy h1 {
         font-size: 52px;
     }

     .hero-copy .intro {
         font-size: 15px;
     }

     .main-image {
         height: 300px;
     }

     .project-image {
         height: 280px;
     }

     .about-section {
         padding: 80px 24px;
         flex-direction: column;
         gap: 40px;
     }

     .about-content {
         max-width: 100%;
         margin-left: 0;
     }

     .about-content h2 {
         max-width: 100%;
         font-size: 44px;
     }

     .services-section {
         padding: 80px 24px;
     }

     .services-content {
         margin-top: 40px;
     }

     .services-intro h2 {
         max-width: 100%;
         font-size: 44px;
     }

     .services-list {
         margin-top: 48px;
         gap: 24px;
     }

     .service-number {
         margin-bottom: 32px;
     }

     .service-content h3 {
         font-size: 27px;
     }

     .projects-section {
         padding: 72px 24px 80px;
         gap: 32px;
     }

     .section-heading h2 {
         font-size: 46px;
     }

     .slider-wrapper {
         height: 420px;
     }

     .slider-prev {
         left: -28px;
     }

     .slider-next {
         right: -28px;
     }

     .gallery-grid {
         grid-template-columns:
             repeat(3, minmax(0, 1fr));
     }

     .site-footer {
         padding: 24px;
     }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

     .site-header {
         padding: 22px 24px;
     }

     .menu-toggle {
         display: flex;
     }

     .main-nav {
         display: none;
     }

     .logo {
         font-size: 12px;
         letter-spacing: 1.7px;
     }

     .hero {
         padding: 56px 24px 40px;
         gap: 28px;
     }

     .hero-copy .eyebrow {
         font-size: 11px;
         letter-spacing: 1.5px;
     }

     .hero-copy h1 {
         margin-top: 14px;
         font-size: 42px;
         letter-spacing: -1px;
     }

     .hero-copy .intro {
         margin-top: 16px;
         font-size: 14px;
     }

     .main-image {
         height: 250px;
     }

     .project-images {
         gap: 8px;
     }

     .project-image {
         height: 120px;
     }

     .about-section {
         padding: 64px 24px;
         gap: 32px;
     }

     .about-section .section-label {
         font-size: 12px;
     }

     .about-content h2 {
         font-size: 38px;
         line-height: 1;
     }

     .about-content p {
         margin-top: 18px;
         font-size: 14px;
     }

     .services-section {
         padding: 64px 24px;
     }

     .services-section .section-label {
         font-size: 12px;
     }

     .services-content {
         margin-top: 32px;
     }

     .services-intro h2 {
         font-size: 38px;
         line-height: 1;
     }

     .services-list {
         margin-top: 40px;
         grid-template-columns: 1fr;
         gap: 0;
     }

     .service-item {
         padding: 24px 0;
     }

     .service-number {
         margin-bottom: 20px;
         font-size: 12px;
     }

     .service-content h3 {
         font-size: 28px;
     }

     .service-content p {
         margin-top: 10px;
         font-size: 13px;
         line-height: 1.6;
     }

     .projects-section {
         padding: 64px 24px;
         gap: 28px;
     }

     .section-heading h2 {
         font-size: 40px;
         letter-spacing: -0.8px;
     }

     .slider-wrapper {
         height: 500px;
     }

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

     .slider-button::before {
         width: 12px;
         height: 12px;
     }

     .gallery-grid {
         grid-template-columns:
             repeat(2, minmax(0, 1fr));

         gap: 8px;
     }

     .gallery-thumbnail {
         border-radius: 10px;
     }

     .lightbox-prev {
         left: 12px;
     }

     .lightbox-next {
         right: 12px;
     }

     .lightbox-close {
         top: 12px;
         right: 14px;
     }

     .site-footer {
         padding: 22px 24px;
     }

     .site-footer span {
         font-size: 8px;
         letter-spacing: 0.7px;
     }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 430px) {

     .site-header {
         padding: 20px;
     }

     .main-nav {
         gap: 10px;
     }

     .main-nav a {
         font-size: 8px;
     }

     .about-section {
         padding: 56px 20px;
     }

     .about-content h2 {
         font-size: 34px;
     }

     .services-section {
         padding: 56px 20px;
     }

     .services-intro h2 {
         font-size: 34px;
     }

     .service-content h3 {
         font-size: 24px;
     }

     .projects-section {
         padding: 56px 20px;
     }

     .section-heading h2 {
         font-size: 35px;
     }

     .site-footer {
         padding: 20px;
     }

     .site-footer span {
         font-size: 7px;
     }

}


/* =========================================
   CONTACT
========================================= */

.contact-section {
     width: calc(100% - 96px);
     max-width: 1280px;
     margin: 0 auto;
     padding: 90px 70px;
     background-color: #e8e0d4;
     border-radius: 20px;
     box-sizing: border-box;
}


/* =========================================
   CONTACT TITLE
========================================= */

.contact-section h2 {
     max-width: 780px;
     margin: 0;
     color: #282522;
     font-family: "Cormorant", Georgia, serif;
     font-size: 58px;
     line-height: 1;
     font-weight: 500;
     letter-spacing: -1.2px;
}


/* =========================================
   CONTACT CONTENT
========================================= */

.contact-content {
     width: 100%;
     display: grid;
     grid-template-columns:
         minmax(0, 1fr) auto;
     column-gap: 100px;
     align-items: start;
     margin-top: 55px;
}


/* =========================================
   CONTACT FORM
========================================= */

.contact-form {
     width: 100%;
     max-width: 680px;
     display: flex;
     flex-direction: column;
     gap: 26px;
}

.form-group {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 10px;
}

.form-group label {
     color: #282522;
     font-family: "Inter", Arial, sans-serif;
     font-size: 13px;
     font-weight: 500;
     letter-spacing: 0.2px;
}

.form-group input,
.form-group textarea {
     width: 100%;
     box-sizing: border-box;
     border: 1px solid rgba(40, 37, 34, 0.18);
     border-radius: 14px;
     outline: none;
     background-color: rgba(255, 255, 255, 0.38);
     color: #282522;
     font-family: "Inter", Arial, sans-serif;
     font-size: 15px;
     font-weight: 400;
     transition:
         border-color 180ms ease,
         background-color 180ms ease,
         box-shadow 180ms ease;
}

.form-group input {
     height: 58px;
     padding: 0 18px;
}

.form-group textarea {
     min-height: 190px;
     padding: 17px 18px;
     resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
     color: rgba(40, 37, 34, 0.42);
     opacity: 1;
}

.form-group input:focus,
.form-group textarea:focus {
     border-color: rgba(40, 37, 34, 0.45);
     background-color: rgba(255, 255, 255, 0.55);
     box-shadow:
         0 0 0 3px rgba(40, 37, 34, 0.05);
}


/* =========================================
   CONTACT BUTTON
========================================= */

.contact-button {
     width: fit-content;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     margin-top: 2px;
     padding: 16px 22px;
     border: none;
     border-radius: 12px;
     background-color: #282522;
     color: #ffffff;
     font-family: "Inter", Arial, sans-serif;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.3px;
     cursor: pointer;
     transition:
         transform 180ms ease,
         background-color 180ms ease,
         opacity 180ms ease;
}

.contact-button:hover {
     transform: translateY(-2px);
     background-color: #3a3734;
}

.contact-button:active {
     transform: translateY(0);
}

.contact-button-arrow {
  font-family: Arial, sans-serif;
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
  color: #ffffff;
  font-style: normal;
}


/* =========================================
   CONTACT DETAILS
========================================= */

.contact-details {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 58px;
     margin-top: 80px;
     margin-right: 15px;
     white-space: nowrap;
}

.contact-info-item {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     gap: 24px;
}

.contact-icon {
     width: 40px;
     height: 40px;
     object-fit: contain;
     flex-shrink: 0;
     display: block;
}

.contact-info-item a {
     display: block;
     color: #282522;
     font-family: "Inter", Arial, sans-serif;
     font-size: 20px;
     font-weight: 500;
     line-height: 1.2;
     text-decoration: none;
     transition:
         opacity 180ms ease,
         transform 180ms ease;
}

.contact-info-item a:hover {
     opacity: 0.65;
     transform: translateX(4px);
}


/* =========================================
   CONTACT TABLET
========================================= */

@media (max-width: 1000px) {

     .contact-section {
         width: calc(100% - 64px);
         padding: 80px 50px;
     }

     .contact-section h2 {
         font-size: 52px;
     }

     .contact-content {
         column-gap: 60px;
     }

     .contact-details {
         gap: 42px;
         margin-top: 70px;
         margin-right: 0;
     }

     .contact-icon {
         width: 34px;
         height: 34px;
     }

     .contact-info-item a {
         font-size: 17px;
     }

}


/* =========================================
   CONTACT MOBILE
========================================= */

@media (max-width: 750px) {

     .contact-section {
         width: calc(100% - 40px);
         padding: 65px 25px;
         border-radius: 18px;
     }

     .contact-section h2 {
         max-width: 100%;
         font-size: 44px;
         line-height: 1.02;
         letter-spacing: -0.8px;
     }

     .contact-content {
         display: flex;
         flex-direction: column;
         margin-top: 45px;
         gap: 50px;
     }

     .contact-form {
         max-width: 100%;
     }

     .form-group input {
         height: 56px;
     }

     .form-group textarea {
         min-height: 170px;
     }

     .contact-details {
         width: 100%;
         align-items: center;
         gap: 32px;
         margin: 0;
     }

     .contact-icon {
         width: 34px;
         height: 34px;
     }

     .contact-info-item {
         gap: 18px;
         justify-content: center;
         width: 100%;
     }

     .contact-info-item a {
         font-size: 17px;
         white-space: normal;
         text-align: center;
     }

}


/* =========================================
   CONTACT SMALL MOBILE
========================================= */

@media (max-width: 430px) {

     .contact-section {
         width: calc(100% - 28px);
         padding: 55px 20px;
         border-radius: 16px;
     }

     .contact-section h2 {
         font-size: 36px;
     }

     .contact-content {
         margin-top: 35px;
         gap: 42px;
     }

     .contact-form {
         gap: 22px;
     }

     .form-group input,
     .form-group textarea {
         font-size: 14px;
     }

     .form-group textarea {
         min-height: 150px;
     }

     .contact-button {
         width: 100%;
         padding: 16px 18px;
     }

     .contact-details {
         gap: 26px;
     }

     .contact-icon {
         width: 30px;
         height: 30px;
     }

     .contact-info-item {
         gap: 15px;
     }

     .contact-info-item a {
         font-size: 15px;
     }

}


/* =========================================
   POPUP
========================================= */

.popup {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 20px;
     background-color: rgba(40, 37, 34, 0.35);
     z-index: 9999;
     box-sizing: border-box;
}

.popup-content {
     position: relative;
     width: 100%;
     max-width: 420px;
     padding: 42px 50px;
     border-radius: 20px;
     background-color: #f7f4ef;
     box-sizing: border-box;
     text-align: center;
     box-shadow:
         0 20px 60px
         rgba(40, 37, 34, 0.18);
}

.popup-content p {
     margin: 0;
     color: #282522;
     font-family: "Inter", Arial, sans-serif;
     font-size: 16px;
     font-weight: 500;
     line-height: 1.5;
}

.popup-close {
     position: absolute;
     top: 12px;
     right: 16px;
     width: 32px;
     height: 32px;
     padding: 0;
     border: none;
     background: transparent;
     color: #282522;
     font-size: 28px;
     line-height: 1;
     cursor: pointer;
}

.popup-close:hover {
     opacity: 0.6;
}

@media (max-width: 600px) {

     .popup-content {
         max-width: 100%;
         padding: 38px 35px;
         border-radius: 16px;
     }

}


/* =========================================
   COOKIE BANNER
========================================= */

.cookie-banner {
     position: fixed;
     left: 24px;
     right: 24px;
     bottom: 24px;
     z-index: 9999;
     display: none;
     justify-content: center;
     pointer-events: none;
}

.cookie-banner-content {
     width: 100%;
     max-width: 650px;

     display: flex;
     align-items: center;
     justify-content: space-between;

     gap: 30px;

     padding: 18px 22px;

     background-color: #282522;

     border-radius: 16px;

     box-shadow:
         0 15px 50px
         rgba(0, 0, 0, 0.18);

     box-sizing: border-box;

     pointer-events: auto;

     animation:
         cookieSlideUp
         400ms ease
         forwards;
}

.cookie-banner p {
     margin: 0;
     color: rgba(255, 255, 255, 0.82);
     font-family: "Inter", Arial, sans-serif;
     font-size: 13px;
     line-height: 1.5;
}

.cookie-accept {
     flex-shrink: 0;
     padding: 11px 20px;
     border: none;
     border-radius: 10px;
     background-color: #e8e0d4;
     color: #282522;
     font-family: "Inter", Arial, sans-serif;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition:
         transform 180ms ease,
         opacity 180ms ease;
}

.cookie-accept:hover {
     transform: translateY(-1px);
     opacity: 0.9;
}

@keyframes cookieSlideUp {

     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }

}


@media (max-width: 600px) {

     .cookie-banner {
         left: 14px;
         right: 14px;
         bottom: 14px;
     }

     .cookie-banner-content {
         flex-direction: column;
         align-items: stretch;
         gap: 16px;
         padding: 20px;
     }

     .cookie-accept {
         width: 100%;
     }

}


/* =========================================
   GALLERY SLIDER — MOBILE
========================================= */

@media (max-width: 750px) {

    .slider-viewport {
        --slider-gap: 16px;
    }


    /*
      Telefon / tablet:
      jedno pełne zdjęcie w widoku.
    */

    .slide {
        flex: 0 0 100%;
        width: 100%;
    }


    .slide-image {
        border-radius: 16px;
    }


    /*
      Na telefonie slider
      obsługiwany jest swipem.
    */

    .slider-prev,
    .slider-next {
        display: none;
    }

}

/* =========================================
   SCROLL REVEAL ANIMATION
========================================= */

.animate-on-scroll {
  opacity: 0;

  transform: translateY(40px);

  transition:
    opacity 700ms ease,
    transform 700ms ease;

  will-change: opacity, transform;
}


.animate-on-scroll.is-visible {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

  .animate-on-scroll {
    opacity: 1;

    transform: none;

    transition: none;
  }

}