/* Diana Kucharska Aesthetics — responsive corrections, v9.
   Keep long content inside its grid and make only the review rail scroll horizontally. */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body{ overflow-x: clip; }
}
.container{ min-width: 0; }
img, video, svg{ max-width: 100%; }
button, input, textarea, select{ max-width: 100%; }
.btn{ max-width: 100%; min-width: 0; }
.hero-content, .hero-visual, .choice-body, .preview-copy, .compare-wrap, .gallery-intro, .gallery-grid, .reviews-intro, .reviews-content, .reviews-track, .about-content, .about-features, .faq-intro, .faq-list, .footer-column{
  min-width: 0;
}
.hero-layout{ grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); }
.choice-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.choice-card{ grid-template-columns: minmax(0,40%) minmax(0,60%); }
.preview-layout{ grid-template-columns: minmax(0,.84fr) minmax(0,1.3fr) minmax(0,.56fr); }
.compare{ width: 100%; max-width: 100%; }
.compare-before img{ max-width: none; }
.compare-input{ touch-action: pan-y; }
.gallery-layout{ grid-template-columns: minmax(0,.86fr) minmax(0,1.65fr); }
.gallery-grid{ grid-template-columns: repeat(4,minmax(0,1fr)); }
.reviews-layout{ grid-template-columns: minmax(0,.7fr) minmax(0,1.8fr); }
.reviews-content{ width: 100%; max-width: 100%; }
.reviews-intro{ max-width: 100%; }
.reviews-track{
  width: 100%; max-width: 100%; min-width: 0;
  grid-auto-columns: calc((100% - 28px)/3);
  margin-inline: 0;
  padding-inline: 0;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.review-card{ min-width: 0; }
.review-card blockquote, .review-author{ overflow-wrap: break-word; }
.about-section{ grid-template-columns: minmax(0,32%) minmax(0,37%) minmax(0,31%); }
.faq-layout{ grid-template-columns: minmax(0,.72fr) minmax(0,1.65fr); }
.faq-list details, .faq-list summary{ min-width: 0; }
.faq-list summary{ overflow-wrap: break-word; }
.footer-main{ grid-template-columns: minmax(0,1.2fr) repeat(3,minmax(0,1fr)) auto; }
.footer-column p, .footer-column a{ overflow-wrap: anywhere; }
.modal{ box-sizing: border-box; max-width: calc(100vw - 24px); }
.modal-gallery{ grid-template-columns: repeat(5,minmax(0,1fr)); }
.lightbox{ max-width: calc(100vw - 24px); }

@media (max-width:1190px) {
  .hero-layout{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .preview-layout{ grid-template-columns: minmax(0,.9fr) minmax(0,1.4fr); }
  .gallery-layout{ grid-template-columns: minmax(0,.86fr) minmax(0,1.65fr); }
  .reviews-layout{ grid-template-columns: minmax(0,.7fr) minmax(0,1.8fr); }
  .about-section{ grid-template-columns: minmax(0,34%) minmax(0,40%) minmax(0,26%); }
  .footer-main{ grid-template-columns: minmax(0,1.2fr) repeat(3,minmax(0,1fr)) auto; }
}

/* Tablets and small laptops */
@media (max-width:990px) {
  .container{ width: calc(100% - 48px); }
  .header-inner{ gap: 12px; }
  .header-actions{ flex-shrink: 0; }
  .mobile-menu{ padding-inline: 24px; max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-menu a{ min-height: 44px; display: flex; align-items: center; }
  .hero-layout{ min-height: 500px; }
  .hero-content{ padding: 48px 0; }
  
  .hero-visual--background-only{ height: 500px; }
  .choice-grid{ gap: 14px; }
  .choice-card{ grid-template-columns: minmax(0,35%) minmax(0,65%); }
  .choice-body{ padding: 20px; }
  .choice-body h3{ font-size: clamp(26px,3.2vw,34px); }
  .preview-layout{ grid-template-columns: minmax(0,.9fr) minmax(0,1.4fr); }
  .gallery-layout{ grid-template-columns: minmax(0,1fr); }
  .gallery-intro{ max-width: 600px; }
  .gallery-grid{ grid-template-columns: repeat(4,minmax(0,1fr)); }
  .gallery-more{ grid-column: 1; margin-top: -12px; }
  .reviews-layout{ grid-template-columns: minmax(0,1fr); gap: 25px; }
  .reviews-intro{ max-width: 550px; }
  .reviews-track{ grid-auto-columns: calc((100% - 28px)/3); }
  .about-section{ grid-template-columns: minmax(0,42%) minmax(0,58%); }
  .about-photo{ grid-row: span 2; }
  .about-features{ grid-column: 2; }
  .faq-layout{ grid-template-columns: minmax(0,.72fr) minmax(0,1.65fr); gap: 40px; }
  .footer-main{ grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
  .footer-social{ grid-column: 3; }
  .footer-brand{ min-width: 0; }
}

/* Phones: a single content column and an image-led hero. */
@media (max-width:700px) {
  html{ scroll-padding-top: 65px; }
  .container{ width: calc(100% - 36px); }
  .section{ padding: 48px 0; }
  .eyebrow{ letter-spacing: .18em; }
  h1, h2, h3{ overflow-wrap: normal; }
  .btn{ white-space: normal; line-height: 1.4; gap: 12px; padding-inline: 16px; }
  .btn .icon{ flex: 0 0 17px; }
  .site-header{ height: 65px; }
  .header-inner{ gap: 10px; }
  .brand{ min-width: 0; flex-shrink: 1; }
  .brand>span{ font-size: clamp(15px,4.4vw,19px); letter-spacing: .07em; }
  .brand small{ font-size: 7px; }
  .header-actions{ gap: 8px; }
  .menu-toggle{ flex: 0 0 44px; width: 44px; height: 44px; }
  .mobile-menu{ padding-inline: 18px; max-height: calc(100dvh - 65px); }
  .mobile-menu a{ font-size: 14px; }

  
  .hero-glow{
    background: linear-gradient(180deg,
      rgba(255,252,248,.96) 0%,
      rgba(255,252,248,.93) 29%,
      rgba(255,252,248,.72) 49%,
      rgba(255,252,248,.08) 76%,
      rgba(255,252,248,0) 100%);
  }
  .hero-layout{ display: block; min-height: 0; }
  .hero-content{ padding: 42px 0 310px; position: relative; z-index: 2; }
  .hero-content .eyebrow{ margin-bottom: 17px; }
  .hero-content h1{ font-size: clamp(41px,10.5vw,58px); line-height: 1.04; max-width: 540px; }
  .hero-lead{ max-width: 420px; font-size: 13px; line-height: 1.65; margin: 18px 0 22px; }
  .hero-content .button-row{ display: flex; flex-wrap: wrap; gap: 10px; }
  .hero-content .btn{ min-height: 46px; font-size: 11px; }
  .hero-content .microcopy{ max-width: 380px; font-size: 10px; line-height: 1.6; }
  .hero-visual--background-only{
    position: absolute; inset: 0; width: 100%; height: 100%;
    min-height: 0; overflow: visible; pointer-events: none;
  }
  .hero-visual--background-only .hero-signature{
    top: auto; bottom: 105px; right: 3%;
    font-size: clamp(24px,6.5vw,31px); line-height: 1.05;
    text-shadow: 0 2px 14px rgba(55,38,27,.48);
  }
  .hero-visual--background-only .hero-seal{ right: 2%; bottom: 17px; width: 76px; height: 76px; }
  .hero-seal .icon{ width: 18px; height: 18px; }

  .choices{ padding: 48px 0 52px; }
  .choices .section-heading{ margin-bottom: 25px; }
  .choice-grid{ grid-template-columns: minmax(0,1fr); gap: 14px; }
  .choice-card{ grid-template-columns: minmax(0,37%) minmax(0,63%); min-height: 0; }
  .choice-image{ min-height: 210px; }
  .choice-body{ padding: 20px; }
  .choice-body h3{ font-size: 30px; }
  .choice-body p{ font-size: 12px; line-height: 1.65; }
  .choice-body .btn{ min-height: 42px; font-size: 11px; }
  .preview-layout{ grid-template-columns: minmax(0,1fr); gap: 25px; }
  .preview-copy h2{ max-width: 100%; }
  .preview-copy>p:not(.eyebrow){ font-size: 13px; }
  .compare{ aspect-ratio: 1.4; }
  .compare-label{ font-size: 10px; }
  .gallery-section{ padding: 45px 0 55px; }
  .gallery-layout{ grid-template-columns: minmax(0,1fr); gap: 25px; }
  .gallery-intro{ max-width: 100%; }
  .gallery-intro>p:not(.eyebrow){ font-size: 13px; }
  .gallery-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .gallery-tile{ aspect-ratio: 1; }
  .gallery-more{ grid-column: 1; margin-top: 0; min-height: 44px; }
  .reviews-layout{ grid-template-columns: minmax(0,1fr); gap: 25px; }
  .reviews-intro{ width: 100%; max-width: 100%; }
  .reviews-intro h2{ max-width: 100%; }
  .reviews-intro>p:not(.eyebrow){ font-size: 12px; }
  .reviews-content{ min-width: 0; max-width: 100%; }
  .reviews-topline{ flex-wrap: wrap; gap: 12px; }
  .reviews-topline>span{ min-width: 0; overflow-wrap: anywhere; }
  .carousel-controls{ flex: 0 0 auto; margin-left: auto; }
  .reviews-track{
    grid-auto-columns: min(84%,300px);
    width: 100%; max-width: 100%; min-width: 0;
    margin-inline: 0; padding: 0 0 5px;
    gap: 12px; overflow-x: auto; overflow-y: hidden;
    scroll-padding-inline: 0;
  }
  .review-card{ min-height: 235px; padding: 20px; }
  .review-card blockquote{ font-size: 12px; }
  .about-section{ grid-template-columns: minmax(0,1fr); }
  .about-photo{ grid-row: auto; height: 440px; min-height: 440px; }
  .about-content{ padding: 42px 18px 25px; }
  .about-content>p:not(.eyebrow){ font-size: 13px; }
  .about-features{ grid-column: 1; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 18px 42px; }
  .about-features>div{ min-width: 0; align-items: flex-start; gap: 10px; }
  .about-features p{ font-size: 11px; overflow-wrap: break-word; }
  .faq-layout{ grid-template-columns: minmax(0,1fr); gap: 26px; }
  .faq-intro>p:not(.eyebrow){ max-width: 100%; font-size: 12px; }
  .faq-list summary{ min-height: 48px; font-size: 12px; line-height: 1.6; gap: 12px; }
  .faq-list details>p{ font-size: 12px; }
  .final-cta{ min-height: 300px; }
  .final-cta-inner{ padding: 55px 0; }
  .final-cta-inner>p:not(.eyebrow){ font-size: 12px; }
  .footer-main{ grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 18px; padding: 42px 0 35px; }
  .footer-brand{ grid-column: 1/-1; }
  .footer-brand>span{ font-size: 20px; }
  .footer-column{ min-width: 0; }
  .footer-social{ grid-column: 1/-1; flex-wrap: wrap; }
  .footer-bottom{ gap: 8px; }
  .modal{ width: calc(100vw - 24px); padding: 20px; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .modal-head{ gap: 12px; }
  .modal-head h2{ font-size: 32px; }
  .modal-gallery{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lightbox{ width: calc(100vw - 16px); height: calc(100dvh - 16px); max-width: calc(100vw - 16px); padding: 55px 12px 65px; }
  .lightbox figure{ min-width: 0; }
  .lightbox figure img{ max-height: calc(100% - 46px); }
}

@media (max-width:480px) {
  .hero-content{ padding-bottom: 285px; }
  .hero-content .button-row{ display: grid; grid-template-columns: minmax(0,1fr); width: 100%; max-width: 360px; }
  .hero-content .btn{ width: 100%; justify-content: space-between; min-height: 46px; padding-inline: 18px; font-size: 12px; }
  .choice-card{ grid-template-columns: minmax(0,1fr); }
  .choice-image{ height: 165px; min-height: 0; }
  .choice-image img{ object-position: center 46%; }
  .choice-body{ padding: 22px; }
  .choice-body .card-index{ margin-bottom: 8px; }
  .choice-body h3{ font-size: 32px; margin-bottom: 10px; }
  .choice-body p{ font-size: 13px; margin-bottom: 18px; }
  .choice-body .btn{ min-height: 44px; }
  .about-photo{ height: 390px; min-height: 390px; }
  .about-features{ grid-template-columns: minmax(0,1fr); gap: 18px; }
  .about-features>div{ gap: 14px; }
  .about-features p{ font-size: 12px; }
}

@media (max-width:360px) {
  .container{ width: calc(100% - 28px); }
  .brand>span{ font-size: 15px; }
  .brand small{ font-size: 6px; }
  .hero-content h1{ font-size: 40px; }
  .hero-content .eyebrow{ font-size: 8px; }
  .hero-content{ padding-top: 35px; padding-bottom: 265px; }
  .hero-visual--background-only .hero-signature{ font-size: 23px; bottom: 98px; }
  .hero-visual--background-only .hero-seal{ width: 70px; height: 70px; }
  .choice-image{ height: 145px; }
  .choice-body{ padding: 19px; }
  .reviews-track{ grid-auto-columns: min(88%,280px); }
  .review-card{ padding: 18px; }
  .footer-main{ gap: 26px 14px; }
}

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



/* v12 — compact continuous hero on phones. Photo remains the section background.
   No fixed 740px minimum, 310px spacer or duplicated foreground portrait. */
@media (max-width:700px) {
  .hero {
    position: relative;
    isolation: isolate;
    min-height: 0;
    background: #d9c8b8 url('../assets/hero-model-bg-v4.webp') 67% 43% / cover no-repeat;
    overflow: hidden;
  }
  .hero-glow {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg,
      rgba(255,252,248,.94) 0%,
      rgba(255,252,248,.88) 37%,
      rgba(255,252,248,.52) 62%,
      rgba(47,29,19,.16) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }
  .hero-layout {
    position: relative;
    z-index: 1;
    display: block;
    width: calc(100% - 36px);
    max-width: 540px;
    min-height: 0;
    margin-inline: auto;
  }
  .hero-content {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 30px 0 162px;
  }
  .hero-content .eyebrow {
    margin-bottom: 12px;
    font-size: 9px;
    letter-spacing: .16em;
  }
  .hero-content h1 {
    max-width: 100%;
    font-size: clamp(36px,9.6vw,48px);
    line-height: 1.02;
    overflow-wrap: normal;
  }
  .hero-lead {
    max-width: 420px;
    font-size: 13px;
    line-height: 1.55;
    margin: 13px 0 18px;
  }
  .hero-content .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }
  .hero-content .btn {
    min-height: 44px;
    padding: 0 16px;
    font-size: 11px;
    line-height: 1.3;
    gap: 10px;
  }
  .hero-content .microcopy {
    max-width: 380px;
    margin-top: 11px;
    font-size: 10px;
    line-height: 1.5;
  }
  .hero-visual--background-only {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    aspect-ratio: auto;
    background: none;
    overflow: visible;
    pointer-events: none;
  }
  .hero-visual--background-only::before { display: none; }
  .hero-visual--background-only > img { display: none !important; }
  .hero-visual--background-only .hero-signature {
    position: absolute;
    left: 2%;
    right: auto;
    top: auto;
    bottom: 24px;
    max-width: 68%;
    font-size: clamp(22px,5.8vw,27px);
    line-height: 1.04;
    color: #fff;
    text-shadow: 0 2px 13px rgba(40,26,18,.55);
    transform: rotate(-4deg);
  }
  .hero-visual--background-only .hero-signature span {
    display: block;
    margin-top: 10px;
    font-size: 7px;
    color: #fff;
    text-align: left;
    transform: rotate(4deg);
  }
  .hero-visual--background-only .hero-seal {
    position: absolute;
    right: 1%;
    bottom: 22px;
    width: 62px;
    height: 62px;
    gap: 4px;
  }
  .hero-visual--background-only .hero-seal .icon { width: 16px; height: 16px; }
  .hero-visual--background-only .hero-seal span { font-size: 6px; }
}
@media (max-width:480px) {
  .hero-content .button-row {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    width: 100%;
    max-width: 360px;
    gap: 9px;
  }
  .hero-content .btn {
    width: 100%;
    justify-content: space-between;
    min-height: 44px;
    padding-inline: 17px;
    font-size: 12px;
  }
}
@media (max-width:360px) {
  .hero-layout { width: calc(100% - 28px); }
  .hero-content { padding-top: 26px; padding-bottom: 148px; }
  .hero-content h1 { font-size: 36px; }
  .hero-visual--background-only .hero-signature { font-size: 21px; bottom: 20px; }
  .hero-visual--background-only .hero-seal { width: 56px; height: 56px; bottom: 17px; }
}
@media (max-width:700px) and (orientation:landscape) and (max-height:500px) {
  .hero-content { padding-bottom: 138px; }
  .hero-visual--background-only .hero-signature { bottom: 18px; }
}


/* v14 slider/gallery mobile refinements */
@media (max-width:700px){
  .compare-line .compare-handle{width:46px;height:46px}
  .compare-line .compare-handle b{font-size:22px}
  .compare-line .compare-handle small{top:53px;font-size:6px;padding:4px 7px}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gallery-tile{aspect-ratio:.88}
}
@media (max-width:360px){
  .compare-line .compare-handle{width:42px;height:42px}
  .compare-line .compare-handle small{display:none}
}