/* ===== ABOVE THE FOLD ===== */
  .pdp-top{ padding: 28px 0 56px; }
  .pdp-top .crumbs{ font-size: 13px; color: var(--slate); margin-bottom: 18px; }
  .pdp-top .crumbs a:hover{ color: var(--brass-dk); }
  .pdp-grid{ display:grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: start; }
  @media (max-width: 1000px){ .pdp-grid{ grid-template-columns: 1fr; } }

  .gallery h1{ font-size: clamp(30px, 3.4vw, 44px); margin: 12px 0 6px; }
  .gallery .subtitle{ color: var(--slate); margin: 0 0 18px; font-size: 16px; line-height: 1.5; }
  .gallery .feats{ display:flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
  .gallery .stage{
    background: linear-gradient(135deg, var(--cream-2) 0%, var(--moss-soft) 100%);
    border-radius: var(--r-lg); aspect-ratio: 4/3;
    display:flex; align-items:center; justify-content:center;
    position: relative; overflow: hidden;
  }
  .gallery .stage img{ width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 20px 28px rgba(20,27,51,.18)); }
  .gallery .stage .zoom{
    position: absolute; top: 18px; right: 18px;
    background: rgba(20,27,51,.85); color: var(--cream);
    width: 36px; height: 36px; border-radius: 50%;
    display:flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px); z-index: 8;
  }
  .gallery .thumbs{ display:grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 14px; }
  .gallery .thumb{
    aspect-ratio: 1/1; border-radius: var(--r-md);
    background: var(--cream-2);
    cursor: pointer; transition: transform .15s ease, border-color .15s ease;
    border: 2px solid transparent; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .gallery .thumb:hover{ transform: translateY(-2px); }
  .gallery .thumb.is-on{ border-color: var(--ink); }
  .gallery .thumb img{ width: 100%; height: 100%; object-fit: cover; }

  .gallery .reviews-row{
    display:flex; align-items: center; gap: 16px; margin-top: 18px;
    padding: 14px 18px; background: var(--cream-2); border-radius: var(--r-md);
    flex-wrap: wrap; font-size: 13px;
  }
  .gallery .reviews-row .stars{ color: var(--brass); letter-spacing: 2px; font-size: 14px; }
  .gallery .reviews-row .badge-pill{ display:inline-flex; align-items:center; gap:6px; color: var(--slate); }

  /* Quote form */
  .quote-card{
    background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--hairline);
    overflow: hidden; box-shadow: var(--shadow-2);
    position: sticky; top: 96px;
  }
  .quote-card .head{
    padding: 18px 24px; background: var(--ink); color: var(--cream);
    display:flex; justify-content: space-between; align-items: center;
  }
  .quote-card .head h3{ color: var(--cream); margin: 0; font-size: 20px; }
  .quote-card .head .pill{ background: var(--brass); color: #fff; padding: 4px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
  .quote-card .body{ padding: 20px 24px; }
  .quote-card .row2{ display:flex; gap: 12px; }
  /* .quote-card .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } */
  .quote-card .field{ margin-bottom: 12px; }
  #quote br { display: none; }
  .quote-card .captcha{ display:flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--cream-2); border-radius: var(--r-sm); font-size: 13px; color: var(--slate); margin: 10px 0 14px; }
  .quote-card .captcha input{ width: 18px; height: 18px; margin: 0; }
  .quote-card button{ width: 100%; }
  .quote-card .reassure{
    padding: 14px 24px; background: var(--cream-2);
    display:flex; gap: 14px; align-items: center; justify-content: space-between;
    font-size: 12px; color: var(--slate); flex-wrap: wrap;
  }
  .quote-card .reassure span{ display:inline-flex; align-items:center; gap: 5px; line-height: 1; }
  .quote-card .clients-bar{
    background: var(--cream); padding: 16px 24px; border-top: 1px solid var(--hairline);
  }
  .quote-card .clients-bar .label{ font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--slate); text-align: center; margin-bottom: 12px; font-weight: 600;}
  .quote-card .clients-bar .lo-row{
    display:grid; grid-template-columns: repeat(4,1fr); gap: 14px;
    align-items: center; opacity: .8;
  }
  .quote-card .clients-bar .lo{ display:flex; align-items: center; justify-content: center; height: 28px; opacity: .75; }
  .quote-card .clients-bar .lo img{ max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); }

  /* Trust icons row */
  .trust-icons{
    display:grid; grid-template-columns: repeat(3,1fr); gap: 8px;
    padding: 14px 24px 22px; background: var(--cream);
    border-top: 1px solid var(--hairline);
  }
  .trust-icons .ti{ text-align: center; padding: 4px; }
  .trust-icons .ti .ico{ width: 32px; height: 32px; margin: 0 auto 6px; border-radius: var(--r-sm); background: var(--cream-2); color: var(--ink); display:flex; align-items:center; justify-content:center;}
  .trust-icons .ti .lbl{ font-size: 11px; color: var(--slate); line-height: 1.3; }

  /* ===== ANY BOX promo strip ===== */
  .pdp-anyany{
    text-align: center; background: var(--ink); color: var(--cream);
    padding: 32px 0;
  }
  .pdp-anyany h3{ color: var(--cream); margin: 0; font-size: clamp(22px, 2.6vw, 32px); }
  .pdp-anyany h3 .it{ font-style: italic; font-family: var(--ff-display); color: var(--brass); font-weight: 400; }

  /* ===== DESCRIPTION ===== */
  .desc-section{ padding: 64px 0; }

  .block-head{ margin-bottom: 28px; }
  .block-head h2{ margin: 10px 0 6px; }
  .block-head p{ color: var(--slate); margin: 0; max-width: 60ch; }

  /* Description: 2-col layout - prose + image collage */
  .desc-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
  @media (max-width: 900px){ .desc-grid{ grid-template-columns: 1fr; } }
  .desc-prose p{ color: var(--ink-2); font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
  .desc-collage{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
  }
  .desc-collage .ci{ border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1/1; background: var(--cream-2);}
  .desc-collage .ci img{ width: 100%; height: 100%; object-fit: cover; }
  .desc-collage .ci.wide{ grid-column: span 2; aspect-ratio: 16/9; }

  /* ===== WHY TRIBRID ===== */
  .why{ background: var(--cream-2); padding: 64px 0; }
  .why .row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
  @media (max-width: 900px){ .why .row{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 500px){ .why .row{ grid-template-columns: 1fr; } }
  .why-card{ background: var(--surface); padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--hairline); transition: all .25s ease; }
  .why-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: transparent; }
  .why-card .ic{ width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
  .why-card:nth-child(1) .ic{ background: var(--brass-soft); color: var(--brass-dk); }
  .why-card:nth-child(2) .ic{ background: var(--moss-soft); color: var(--moss); }
  .why-card:nth-child(3) .ic{ background: var(--plum-soft); color: var(--plum); }
  .why-card:nth-child(4) .ic{ background: var(--butter-soft); color: #7A5A0F; }
  .why-card h4{ font-size: 18px; margin: 0 0 6px; }
  .why-card p{ color: var(--slate); margin: 0; font-size: 14px; }

  /* ===== CUSTOMIZATIONS ===== */
  .customs{ padding: 64px 0; }
  .customs-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
  @media (max-width: 900px){ .customs-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 500px){ .customs-grid{ grid-template-columns: 1fr; } }
  .cust{
    background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--hairline);
    overflow: hidden; transition: all .25s ease; display: flex; flex-direction: column;
  }
  .cust:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: transparent; }
  .cust .photo{ aspect-ratio: 16/10; background: var(--cream-2); overflow: hidden; }
  .cust .photo img{ width: 100%; height: 100%; object-fit: cover; }
  .cust .body{ padding: 20px 22px; }
  .cust h4{ font-size: 17px; margin: 0 0 6px; }
  .cust p{ color: var(--slate); font-size: 13px; margin: 0; line-height: 1.5; }

  /* ===== FINISHES ===== */
  .finishes-pdp{ padding: 64px 0; background: var(--cream-2); }
  .fin-grid-pdp{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
  @media (max-width: 1000px){ .fin-grid-pdp{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 500px){ .fin-grid-pdp{ grid-template-columns: 1fr; } }
  .fin-pdp{
    aspect-ratio: 3/4; border-radius: var(--r-lg); overflow: hidden;
    position: relative; display:flex; flex-direction: column;
    box-shadow: var(--shadow-1);
  }
  .fin-pdp .photo{ flex: 1; overflow: hidden; }
  .fin-pdp .photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
  .fin-pdp:hover .photo img{ transform: scale(1.04); }
  .fin-pdp .photo::after{ content:""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(20,27,51,.6)); }
  .fin-pdp .meta{ position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; color: var(--cream); z-index: 1;}
  .fin-pdp .label{ font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
  .fin-pdp h4{ font-family: var(--ff-display); font-size: 18px; color: var(--cream); margin: 4px 0 0; }

  /* ===== SPECIFICATIONS ===== */
  .specs{ padding: 64px 0; }
  .specs-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
  @media (max-width: 800px){ .specs-grid{ grid-template-columns: 1fr; } }
  .spec-row{
    background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
    padding: 18px 22px; display: flex; flex-direction: column; gap: 4px;
    transition: border-color .2s ease;
  }
  .spec-row:hover{ border-color: var(--ink); }
  .spec-row .k{ font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--brass-dk); font-weight: 600; }
  .spec-row .v{ font-size: 15px; color: var(--ink); line-height: 1.4; }

  /* ===== FAQ ===== */
  .pdp-faq{ background: var(--cream-2); padding: 64px 0; }
  .faq-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
  @media (max-width: 800px){ .faq-grid{ grid-template-columns: 1fr; } }

  /* ===== REVIEWS ===== */
  .reviews{ padding: 64px 0; }
  .reviews .head{ display:flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
  .reviews .row{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 900px){ .reviews .row{ grid-template-columns: 1fr; } }
  .review-card{ background: var(--surface); padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--hairline); }
  .review-card .stars{ color: var(--brass); letter-spacing: 2px; margin-bottom: 8px; }
  .review-card h4{ font-family: var(--ff-display); font-weight: 500; font-size: 18px; margin: 0 0 8px; }
  .review-card p{ color: var(--slate); margin: 0; font-size: 14px; line-height: 1.6; }
  .review-card .who{ display:flex; gap: 10px; align-items: center; margin-top: 16px; font-size: 13px; }
  .review-card .av{ width: 32px; height: 32px; border-radius: 50%; background: var(--cream-2); display:inline-flex; align-items:center; justify-content:center; font-weight: 600; font-size: 12px; flex-shrink: 0; }
  .review-card .who small{ color: var(--slate); display: block; }

  /* ===== RELATED ===== */
  .rel{ padding: 64px 0; background: var(--cream-2); }
  .rel .row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
  @media (max-width: 1000px){ .rel .row{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 500px){ .rel .row{ grid-template-columns: 1fr; } }
  .rel .item{ background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; transition: all .25s ease; }
  .rel .item:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: transparent; }
  .rel .item .img{ aspect-ratio: 1/1; background: var(--cream-2); overflow: hidden; }
  .rel .item .img img{ width: 100%; height: 100%; object-fit: cover; }
  .rel .item .b{ padding: 14px 16px; display:flex; justify-content: space-between; align-items: center;}
  .rel .item h4{ margin: 0; font-size: 15px; line-height: 1.2; }
  .rel .item .arr{ font-size: 14px; color: var(--brass-dk); }