/* Shared component styles: forms, galleries, sliders, FAQ and responsive UI */

/* Abstract animated background for offer section */

/* Keep quote form cards aligned at the top */

/* Green palette correction: removes the old burgundy/warm demo tint */

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

      .reveal {
        opacity: 1;
        transform: none;
      }
    }

@media (max-width: 1040px) {
      .process-dynamic .container::before {
        width: min(520px, 78vw);
        height: min(520px, 78vw);
        top: 48%;
      }

      .process-dynamic .container::after {
        left: -170px;
        bottom: 18%;
        width: min(420px, 70vw);
        height: min(420px, 70vw);
      }

      .materials-showcase,
      .material-panel {
        grid-template-columns: 1fr;
      }

      .material-stage {
        min-height: 760px;
      }

      .material-visual {
        min-height: 300px;
      }

      .hero-grid,
      .quote-wrap,
      .area-grid,
      .section-header {
        grid-template-columns: 1fr;
      }

      .hero-copy {
        padding: 34px 0 0;
      }

      .hero-media {
        min-height: 520px;
      }

      .features-grid,
      .services-grid,
      .materials-grid,
      .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .feature-journey {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      .feature-journey::before,
      .feature-journey::after {
        inset: 9%;
        border-radius: 42px;
      }

      .feature-column:first-child .feature-step:nth-child(2),
      .feature-column:last-child .feature-step:nth-child(1),
      .feature-column:first-child .feature-step:nth-child(2):hover,
      .feature-column:last-child .feature-step:nth-child(1):hover {
        transform: none;
      }

      .feature-column:first-child .feature-step::before,
      .feature-column:last-child .feature-step::before,
      .feature-column:first-child .feature-step::after,
      .feature-column:last-child .feature-step::after {
        display: none;
      }

      .feature-core {
        order: -1;
        width: min(100%, 360px);
        min-height: auto;
        border-radius: 999px;
      }

      .quote-options-grid {
        grid-template-columns: repeat(2, 1fr);
      }


      .services-viewport {
        padding-bottom: 0;
      }

      .services-slider .service-card {
        flex-basis: calc((100% - 18px) / 2);
      }

      .review-card {
        flex-basis: calc((100% - 18px) / 2);
      }

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

      .process-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .quote-panel {
        position: static;
      }


      .quote-abstract .quote-form {
        margin-top: 0;
      }
    }

@media (max-width: 780px) {
      .materials-showcase {
        padding: 12px;
        border-radius: 26px;
      }

      .materials-tabs {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        overflow: visible;
        padding-bottom: 0;
      }

      .material-tab {
        min-width: 0;
        width: 100%;
        grid-template-columns: 40px 1fr;
        padding: 14px;
        border-radius: 18px;
      }

      .material-tab:hover,
      .material-tab.active {
        transform: none;
      }

      .material-stage {
        min-height: 720px;
        border-radius: 24px;
      }

      .material-panel {
        padding: 26px;
      }

      .material-visual {
        min-height: 260px;
        border-radius: 22px;
      }

      .container {
        width: min(100% - 28px, var(--container));
      }

      .section {
        padding: 70px 0;
      }

      .site-header {
        padding: 10px 0;
      }

      .menu-btn {
        display: block;
      }

      .menu-btn {
        position: relative;
        z-index: 110;
      }

      body.menu-open {
        overflow: hidden;
      }

      .nav-links {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 10px;
        padding: 96px 24px 34px;
        border: 0;
        border-radius: 0;
        background:
          radial-gradient(circle at 20% 18%, rgba(111, 143, 100, 0.22), transparent 28%),
          radial-gradient(circle at 88% 74%, rgba(47, 93, 44, 0.18), transparent 32%),
          linear-gradient(135deg, rgba(246, 241, 234, 0.98), rgba(239, 231, 220, 0.98));
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
      }

      .nav-links::before {
        content: "Menu";
        position: absolute;
        left: 24px;
        top: 32px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      body.menu-open .nav-links {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
      }

      .nav-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 58px;
        padding: 16px 18px;
        border: 1px solid rgba(228, 221, 211, 0.95);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.72);
        color: var(--text);
        font-size: 20px;
        box-shadow: 0 16px 44px rgba(29, 27, 24, 0.07);
      }

      .nav-links a::after {
        content: "→";
        color: var(--accent);
      }

      .nav .btn {
        display: none;
      }

      .hero .eyebrow {
        margin-top: 16px;
      }

      .hero {
        padding: 34px 0 70px;
        background:
          linear-gradient(180deg, rgba(246, 241, 234, 0.97) 0%, rgba(246, 241, 234, 0.92) 54%, rgba(246, 241, 234, 0.66) 100%),
          url("https://images.unsplash.com/photo-1600489000022-c2086d79f9d4?auto=format&fit=crop&w=1400&q=85") center / cover no-repeat;
      }

      h1 {
        font-size: clamp(42px, 13vw, 62px);
      }

      h2 {
        font-size: clamp(32px, 10vw, 44px);
      }

      .hero-copy .lead,
      .lead {
        font-size: 16px;
      }

      .hero .hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .hero .hero-actions .btn {
        width: 100%;
        min-height: 54px;
      }

      .hero-media {
        min-height: 430px;
        padding: 10px;
        border-radius: 28px;
      }

      .hero-image {
        min-height: 410px;
        border-radius: 22px;
      }

      .floating-card {
        left: 18px;
        right: 18px;
        bottom: 18px;
        width: auto;
      }

      .stats-row {
        grid-template-columns: repeat(3, 1fr);
      }

      .features-grid,
      .services-grid,
      .materials-grid,
      .benefits-grid,
      .gallery-grid,
      .process-grid,
      .before-after,
      .contact-actions,
      .form-grid,
      .choice-grid {
        grid-template-columns: 1fr;
      }

      .feature-journey {
        padding: 18px;
        border-radius: 32px;
      }

      .feature-step {
        grid-template-columns: 46px 1fr;
        padding: 16px;
      }

      .feature-number {
        width: 46px;
        height: 46px;
      }

      .feature-core {
        width: min(100%, 310px);
        min-height: auto;
        padding: 28px;
        border-radius: 999px;
      }


      .quote-options-grid {
        grid-template-columns: 1fr;
      }

      .quote-options-grid .choice-content {
        width: 100%;
        min-width: 0;
      }


      .services-viewport {
        overflow: visible;
        padding-bottom: 0;
        border-radius: 0;
      }

      .services-slider .services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        transform: none !important;
      }

      .services-slider .service-card,
      .services-slider .service-card:nth-child(3n + 1),
      .services-slider .service-card:nth-child(3n + 2),
      .services-slider .service-card:nth-child(3n) {
        flex-basis: auto;
        width: 100%;
        border-radius: 24px;
        transform: none;
      }

      .services-slider .service-card:hover,
      .services-slider .service-card:nth-child(3n + 2):hover {
        transform: none;
      }

      .services-controls,
      .services-dots {
        display: none;
      }

      .review-card {
        flex-basis: 100%;
      }

      .reviews-controls {
        align-items: flex-start;
        flex-direction: column;
      }

      .gallery-item,
      .gallery-item.large {
        grid-column: auto;
        min-height: 300px;
      }

      .quote-form,
      .quote-panel,
      .contact-card,
      .area-map {
        padding: 22px;
        border-radius: 26px;
      }

      .quote-form {
        min-height: auto;
      }

      .form-actions {
        flex-direction: column-reverse;
      }

      .form-actions .btn {
        width: 100%;
      }

      .before-after {
        min-height: 480px;
        border-radius: 30px;
      }

      .before-after::before {
        inset: 12px;
        border-radius: 22px;
      }

      .ba-label {
        top: 22px;
      }

      .ba-label.before {
        left: 22px;
      }

      .ba-label.after {
        right: 22px;
      }

      .ba-content {
        left: 22px;
        right: 22px;
        bottom: 22px;
        display: block;
      }

      .ba-badge {
        display: inline-flex;
        margin-top: 16px;
      }

      .ba-handle::before {
        width: 62px;
        height: 62px;
      }

      .final-cta {
        padding: 42px 22px;
        border-radius: 30px;
      }

      .footer {
        padding-bottom: 92px;
      }

      .footer-row {
        flex-direction: column;
        align-items: flex-start;
      }

      .mobile-actions {
        display: block;
      }
    }

@media (max-width: 720px) {
      .footer-row {
        flex-direction: column;
        text-align: center;
      }

      .footer-socials {
        order: 1;
      }

      .footer-row {
        align-items: center;
      }
    }

@media (max-width: 1180px) {
      .gallery-modal__controls {
        flex-direction: column;
      }

      .gallery-modal__arrows {
        align-self: flex-end;
      }
    }

@media (max-width: 860px) {
      .gallery-modal {
        padding: 14px;
      }

      .gallery-modal__dialog {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(280px, 52vh) auto;
        height: auto;
        max-height: calc(100vh - 28px);
        overflow-y: auto;
        border-radius: 26px;
      }

      .gallery-modal__stage {
        height: 52vh;
        min-height: 280px;
        max-height: 520px;
      }

      .gallery-modal__content {
        padding: 24px;
      }
    }

@media (max-width: 560px) {
      .gallery-modal__dialog {
        grid-template-rows: minmax(240px, 46vh) auto;
      }

      .gallery-modal__stage {
        height: 46vh;
        min-height: 240px;
        max-height: 380px;
      }

      .gallery-modal__controls {
        align-items: flex-start;
        flex-direction: column;
      }
    }

/* Final quote section alignment fix
       Sticky positioning made the burgundy panel sit lower while scrolling.
       Keep both cards in the same grid row and align them by their top edge. */

@media (max-width: 1040px) {
      .quote-abstract .quote-panel,
      .quote-abstract .quote-form {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
      }
    }

/* Final polish: equal quote cards, custom selects, footer links open externally */

@media (max-width: 1040px) {
      .quote-abstract .quote-wrap,
      #wycena .quote-wrap {
        align-items: start !important;
      }

      .quote-abstract .quote-panel,
      .quote-abstract .quote-form,
      #wycena .quote-panel,
      #wycena .quote-form {
        height: auto !important;
      }

      .quote-abstract .quote-panel,
      #wycena .quote-panel {
        justify-content: flex-start;
      }
    }

/* Final mobile fixes: real fullscreen menu, mobile offer slider, horizontal material tabs */

@media (max-width: 780px) {
      .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: transparent;
        border-bottom: 0;
        backdrop-filter: none;
        pointer-events: none;
      }

      .site-header .nav {
        position: relative;
        z-index: 1200;
        pointer-events: auto;
      }

      body.menu-open .site-header {
        height: 100dvh;
      }

      .menu-btn {
        position: relative;
        z-index: 1300;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 16px 42px rgba(29, 27, 24, 0.12);
      }

      .nav-links {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1100 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 108px 22px 38px !important;
        overflow-y: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background:
          radial-gradient(circle at 18% 16%, rgba(111, 143, 100, 0.24), transparent 27%),
          radial-gradient(circle at 84% 78%, rgba(47, 93, 44, 0.18), transparent 30%),
          repeating-linear-gradient(0deg, rgba(47, 93, 44, 0.045) 0 1px, transparent 1px 38px),
          repeating-linear-gradient(90deg, rgba(47, 93, 44, 0.04) 0 1px, transparent 1px 38px),
          linear-gradient(135deg, rgba(246, 241, 234, 0.98), rgba(239, 231, 220, 0.98)) !important;
        box-shadow: none !important;
        backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-14px) scale(0.98);
        transition: opacity 0.26s ease, visibility 0.26s ease, transform 0.26s ease;
      }

      .nav-links::before {
        content: "Menu";
        position: fixed;
        left: 22px;
        top: 32px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .nav-links::after {
        content: "";
        position: fixed;
        left: 22px;
        right: 22px;
        top: 70px;
        height: 1px;
        background: rgba(47, 93, 44, 0.14);
      }

      body.menu-open .nav-links {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
      }

      .nav-links a {
        min-height: 62px !important;
        padding: 17px 20px !important;
        border-radius: 22px !important;
        background: rgba(255, 255, 255, 0.78) !important;
        border: 1px solid rgba(255, 255, 255, 0.72) !important;
        color: var(--text) !important;
        font-size: 21px !important;
        font-weight: 900 !important;
        box-shadow: 0 18px 46px rgba(29, 27, 24, 0.08) !important;
      }

      .nav-links a:hover {
        background: #fff !important;
      }

      .nav .btn {
        display: none !important;
      }

      body.menu-open {
        overflow: hidden;
      }

      /* Offer stays a real slider on mobile */
      .services-viewport {
        overflow: hidden !important;
        border-radius: 24px !important;
        padding: 0 !important;
      }

      .services-slider .services-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 16px !important;
        transform: translateX(0);
        transition: transform 0.42s cubic-bezier(.22,.8,.22,1);
        will-change: transform;
      }

      .services-slider .service-card,
      .services-slider .service-card:nth-child(3n + 1),
      .services-slider .service-card:nth-child(3n + 2),
      .services-slider .service-card:nth-child(3n) {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        border-radius: 24px !important;
        transform: none !important;
      }

      .services-controls {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 22px !important;
      }

      .services-dots {
        display: flex !important;
      }

      /* Materials mobile: horizontal scroll tabs */
      .materials-tabs {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 2px 12px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }

      .materials-tabs::-webkit-scrollbar {
        height: 6px;
      }

      .materials-tabs::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(47, 93, 44, 0.28);
      }

      .material-tab {
        flex: 0 0 min(62vw, 235px) !important;
        width: auto !important;
        min-width: min(62vw, 235px) !important;
        grid-template-columns: 36px 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 17px !important;
        scroll-snap-align: start;
      }

      .material-tab span {
        width: 34px !important;
        height: 34px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
      }

      .material-tab strong {
        font-size: 13px !important;
        line-height: 1.15 !important;
      }

      .material-tab small {
        margin-top: 3px !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
      }
    }

/* Final mobile refinements */

@media (max-width: 780px) {
      .nav-links {
        background:
          radial-gradient(circle at 18% 16%, rgba(111, 143, 100, 0.16), transparent 30%),
          radial-gradient(circle at 86% 78%, rgba(47, 93, 44, 0.12), transparent 32%),
          repeating-linear-gradient(0deg, rgba(47, 93, 44, 0.035) 0 1px, transparent 1px 40px),
          repeating-linear-gradient(90deg, rgba(47, 93, 44, 0.03) 0 1px, transparent 1px 40px),
          linear-gradient(135deg, #fbf6ee 0%, #f2e8dd 100%) !important;
        backdrop-filter: none !important;
      }

      .nav-links a {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(255, 255, 255, 0.95) !important;
      }

      .hero {
        background:
          linear-gradient(180deg, rgba(246, 241, 234, 0.82) 0%, rgba(246, 241, 234, 0.72) 52%, rgba(246, 241, 234, 0.46) 100%),
          url("https://images.unsplash.com/photo-1600489000022-c2086d79f9d4?auto=format&fit=crop&w=1400&q=85") center / cover no-repeat !important;
      }

      .services-slider .services-grid {
        transform: translateX(0);
      }

      .reviews-controls {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
      }

      .reviews-controls .slider-buttons {
        margin-left: auto;
      }
    }

@media (max-width: 860px) {
      .gallery-modal__dialog {
        grid-template-rows: minmax(360px, 68vh) auto !important;
      }

      .gallery-modal__stage {
        height: 68vh !important;
        min-height: 360px !important;
        max-height: none !important;
      }

      .gallery-modal__content {
        padding: 18px 20px 20px !important;
      }

      .gallery-modal__meta h3 {
        margin-bottom: 6px !important;
        font-size: 28px !important;
      }

      .gallery-modal__meta .eyebrow {
        margin-bottom: 10px !important;
      }
    }

@media (max-width: 560px) {
      .gallery-modal__dialog {
        grid-template-rows: minmax(390px, 70vh) auto !important;
        max-height: calc(100dvh - 20px) !important;
      }

      .gallery-modal__stage {
        height: 70vh !important;
        min-height: 390px !important;
      }

      .timeline-step:nth-child(2) .timeline-photo,
      .timeline-step:nth-child(2) .timeline-photo img,
      .timeline-step:nth-child(3) .timeline-photo,
      .timeline-step:nth-child(3) .timeline-photo img {
        min-height: 230px !important;
        height: 230px !important;
      }
    }

/* Final fixes: mobile header, hero image, counters/sliders, compact gallery modal */

@media (max-width: 780px) {
      .site-header {
        background: rgba(251, 246, 238, 0.94) !important;
        border-bottom: 1px solid rgba(228, 221, 211, 0.95) !important;
        backdrop-filter: blur(18px) !important;
        box-shadow: 0 12px 34px rgba(29, 27, 24, 0.08) !important;
      }

      body.menu-open .site-header {
        background: transparent !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
      }

      .hero {
        background:
          linear-gradient(180deg, rgba(246, 241, 234, 0.76) 0%, rgba(246, 241, 234, 0.66) 52%, rgba(246, 241, 234, 0.42) 100%),
          url("https://images.unsplash.com/photo-1600489000022-c2086d79f9d4?auto=format&fit=crop&w=1400&q=85") center / cover no-repeat !important;
      }

      .services-viewport {
        overflow: hidden !important;
        border-radius: 24px !important;
      }

      .services-slider .services-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 16px !important;
        will-change: transform;
      }

      .services-slider .service-card,
      .services-slider .service-card:nth-child(3n + 1),
      .services-slider .service-card:nth-child(3n + 2),
      .services-slider .service-card:nth-child(3n) {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 24px !important;
      }

      .services-controls {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 18px !important;
      }

      .services-dots {
        display: flex !important;
      }
    }

@media (max-width: 860px) {
      .gallery-modal {
        padding: 8px !important;
        align-items: center !important;
      }

      .gallery-modal__dialog {
        width: min(100%, 680px) !important;
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        overflow: hidden !important;
        border-radius: 24px !important;
      }

      .gallery-modal__stage {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
      }

      .gallery-modal__content {
        padding: 14px 16px 16px !important;
        gap: 10px !important;
        min-height: 0 !important;
      }

      .gallery-modal__meta .eyebrow {
        display: none !important;
      }

      .gallery-modal__meta h3 {
        margin: 0 0 4px !important;
        font-size: clamp(22px, 7vw, 30px) !important;
        line-height: 0.98 !important;
      }

      .gallery-modal__meta p {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
      }

      .gallery-modal__controls {
        padding-top: 10px !important;
        gap: 10px !important;
      }

      .gallery-modal__arrow {
        width: 42px !important;
        height: 42px !important;
        font-size: 20px !important;
      }

      .gallery-modal__counter {
        font-size: 13px !important;
      }

      .gallery-modal__dots {
        margin-top: 10px !important;
        gap: 7px !important;
      }

      .gallery-modal__close {
        top: 10px !important;
        right: 10px !important;
        width: 42px !important;
        height: 42px !important;
      }
    }

@media (max-width: 560px) {
      .gallery-modal__dialog {
        height: calc(100dvh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        border-radius: 20px !important;
      }

      .gallery-modal__content {
        padding: 12px 14px 14px !important;
      }

      .gallery-modal__meta h3 {
        font-size: 24px !important;
      }

      .gallery-modal__meta p {
        font-size: 12px !important;
      }

      .gallery-modal__controls {
        align-items: center !important;
        flex-direction: row !important;
      }

      .gallery-modal__arrows {
        gap: 8px !important;
      }

      .gallery-modal__dot {
        width: 8px !important;
        height: 8px !important;
      }

      .gallery-modal__dot.active {
        width: 24px !important;
      }
    }

/* Fix: gallery modal must sit above sticky mobile header */

@media (max-width: 780px) {
      .gallery-modal {
        z-index: 5000 !important;
        padding-top: max(12px, env(safe-area-inset-top)) !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
      }

      .gallery-modal__close {
        z-index: 10 !important;
      }
    }

@media (max-width: 420px) {
      .material-tab {
        flex-basis: min(70vw, 210px) !important;
        min-width: min(70vw, 210px) !important;
      }
    }