/* ==========================================
   BUILDING MATERIALS PAGE
========================================== */

.materials-page .section-padding,
.materials-page .section-padding-lg,
.materials-page .material-intro,
.materials-page .material-performance,
.materials-page .material-section,
.materials-page .integration-section{
    padding:70px 0;
}

.materials-page .materials-cta{
    padding:100px 0;
}

/* ==========================================
   BACKGROUNDS
========================================== */

.material-performance{
    background:#fafafa;
}

.material-section.alternate{
    background:#f8f8f8;
}

/* ==========================================
   INTRO SECTION
========================================== */

.materials-intro-section{
    padding:90px 0;
    background:#fff;
    overflow:hidden;
    position:relative;
}

.intro-badge{
    display:inline-block;
    padding:8px 18px;
    margin-bottom:20px;

    border-radius:30px;

    background:#f7f1df;
    color:#8c6a1d;

    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
}

.intro-title{
    font-size:60px;
    font-weight:300;
    line-height:1.1;
    margin-bottom:30px;
}

/* .intro-text p{
    font-size:18px;
    line-height:1.9;
    color:#666;
} */

/* ==========================================
   INTRO ANIMATIONS
========================================== */

.slide-right{
    opacity:0;
    transform:translateX(80px);
    animation:titleSlide 1s ease forwards;
}

.fade-up-content{
    opacity:0;
    transform:translateY(50px);
    animation:contentUp 1.2s ease forwards;
    animation-delay:.4s;
}

@keyframes titleSlide{
    to{
        opacity:1;
        transform:translateX(0);
    }
}

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

/* ==========================================
   INTRO FLOATING CARDS
========================================== */

.intro-visual{
    position:relative;
    height:400px;
}

.intro-visual::before{
    content:'';
    position:absolute;

    width:280px;
    height:280px;

    top:50px;
    right:40px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(212,175,55,.18),
        transparent 70%
    );

    animation:pulseGlow 4s ease infinite;
}

.floating-card{
    position:absolute;

    width:220px;
    padding:25px;

    background:#fff;
    border-radius:20px;

    box-shadow:
    0 20px 40px rgba(0,0,0,.08);

    animation:floatCard 6s ease-in-out infinite;
}

.floating-card span{
    display:block;

    color:#d4af37;

    font-size:28px;
    font-weight:700;

    margin-bottom:5px;
}

.card-1{
    top:20px;
    right:60px;
}

.card-2{
    top:140px;
    left:20px;
    animation-duration:7s;
}

.card-3{
    bottom:30px;
    right:10px;
    animation-duration:5s;
}

@keyframes floatCard{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}

@keyframes pulseGlow{
    0%,100%{
        transform:scale(1);
        opacity:.7;
    }
    50%{
        transform:scale(1.15);
        opacity:1;
    }
}

/* ==========================================
   SECTION DECORATION
========================================== */

.material-section{
    position:relative;
    overflow:hidden;
}

.material-section::before{
    content:'';
    position:absolute;

    top:-150px;
    right:-150px;

    width:350px;
    height:350px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(212,175,55,.08),
        transparent 70%
    );
}

/* ==========================================
   HEADINGS
========================================== */

.materials-page h2,
.materials-page h3{
    margin-bottom:20px;
    position:relative;
}

.material-section h3::after{
    content:'';

    position:absolute;
    left:0;
    bottom:-12px;

    width:70px;
    height:3px;

    background:#d4af37;
}

/* ==========================================
   BENEFIT BOXES
========================================== */

.benefit-box{
    height:100%;
    padding-top: 30px;
    border-top: 1px solid lightgray;
}

.benefit-box h5{
    margin-bottom:15px;
}

/* ==========================================
   FEATURE LIST
========================================== */

.feature-list{
    list-style:none;
    padding:0;
}

.feature-list li{
    position:relative;
    padding-left:28px;
    margin-bottom:12px;
}

.feature-list li::before{
    content:"✓";

    position:absolute;
    left:0;

    color:#d4af37;
    font-weight:700;
}

/* ==========================================
   FEATURE CARDS
========================================== */

.feature-card{
    height:100%;
    padding:30px 20px;

    background:#fff;
    border-radius:20px;

    text-align:center;

    box-shadow:
    0 8px 25px rgba(0,0,0,.05);

    transition:.35s ease;
}

.feature-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.12);
}

/* ==========================================
   IMAGES
========================================== */

.material-section img,
.material-performance img{
    transition:.6s ease;
}

.material-section img:hover,
.material-performance img:hover{
    transform:scale(1.04);
}

/* ==========================================
   CTA
========================================== */

.materials-cta{
    background:#282828;
    color:#fff;
}

.materials-cta h3,
.materials-cta p{
    color:#fff;
}

/*  */

.material-performance{
    padding:120px 0;
    background:#fff;
}

.material-performance{
    padding:120px 0;
    position:relative;
}
.sticky-column{
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.sticky-content{
    position:sticky;
    top:100px;
}

.material-performance .intro-title{
    font-size:52px;
    line-height:1.1;
    font-weight:300;
    margin-bottom:0;
}

.performance-content{
    padding-left:40px;
}

.performance-content p{
    font-size:16px;
    line-height:1.9;
    color:#666;
    margin-bottom:20px;
}

.product-showcase{
    padding:120px 0;
    background:#f5f4f1;
}



.section-label{
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:30px;
}

.sticky-content .intro-title{
    font-size:42px;
    line-height:1.05;
    font-weight:300;
}

.products-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.product-card img{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
}

.product-card{
    margin-bottom:20px;
}

/* .benefit-row{
    margin-top:3rem;
    margin-bottom:3rem;
} */

.materials-cta-buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
    margin-top:1.5rem;
}

.image-wrap{
    position:relative;
    overflow:hidden;
}

.image-wrap img{
    width:100%;
    object-fit:cover;
    display:block;
    height:420px;
}

/* .image-wrap:hover img{
    transform:scale(1.08);
} */

.view-btn{
    cursor: pointer;
    position:absolute;
    width:70px;
    height:40px;
    background:#2f3223;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10%;
    /* pointer-events:none; */
    opacity:0;
    transform:translate(-50%,-50%);
    transition:opacity .2s;
}

.image-wrap:hover .view-btn{
    opacity:1;
}

.product-card h5{
    margin-top:15px;
    font-size:28px;
    font-weight:400;
}

/* mobile */

@media(max-width:991px){

    .sticky-content{
        position:relative;
        top:auto;
        padding-right:0;
        margin-bottom:24px;
    }

    .products-grid{
        grid-template-columns:1fr;
    }

    .sticky-content .intro-title{
        font-size:42px;
    }
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:991px){

    .materials-page .section-padding,
    .materials-page .section-padding-lg,
    .materials-page .material-intro,
    .materials-page .material-performance,
    .materials-page .material-section,
    .materials-page .integration-section{
        padding:50px 0;
    }

    .materials-page .material-performance{
        padding: 0;
    }

    /* Needs the .materials-page prefix to beat the desktop 100px rule */
    .materials-page .materials-cta{
        padding:70px 0;
    }

    .materials-page .materials-intro-section{
        padding:60px 0;
    }

    /* The row's gutter already adds 24px above the first column, so no extra
       top margin here. */
    .benefit-row{
        margin-top:0;
        margin-bottom:2rem;
    }

    .intro-title{
        font-size:40px;
    }

    .intro-visual{
        height:300px;
        margin-top:40px;
    }

    .floating-card{
        width:180px;
        padding:20px;
    }
}


.product-feature-image{
    width:auto;
    max-width:100%;
    object-fit:contain;
    display:block;
}

.product-intro .col-lg-7{
    min-height:500px;
}

/* Accessories: tight tile strip under a section heading */
.accessories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.accessories-grid-item {
    overflow: hidden;
    background: #f4f4f4;
}

.accessories-grid-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.accessories-grid-item:hover img {
    transform: scale(1.04);
}

@media (min-width: 768px) {
    .accessories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .accessories-grid {
        grid-template-columns: repeat(var(--accessories-cols, 5), 1fr);
    }
}


/*  */

.home-hero-section {
    position: relative;
    /* height: 200vh;  */
}

.product-banner-bg {
    position: sticky;
    top: 0;
    height: 100vh;
}

.product-banner-img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    animation: productBannerSlide 0.5s ease-out forwards;
}

.product-banner-content {
    position: relative;
    z-index: 2;
    height: 100vh;
    display: flex;
    align-items: flex-end;
}

.product-intro,
.product-diagram {
    position: relative;
    z-index: 5;
    background: #fff;
}
@keyframes productBannerSlide {
    from {
        transform: translateX(-30%);
    }
    to {
        transform: translateX(0);
    }
}

.product-banner-title {
    opacity: 0;
    transform: translateY(40px);
    animation: productTitleReveal 0.5s ease forwards;
    animation-delay: 0.5s;
}

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


/* ── Title reveal animation ── */

/* ── Product Title Reveal Animation ── */
.headline-wrap {
  overflow: hidden;
}

.product-titles {
  font-weight: 400;
  /* font-size: clamp(36px, 5vw, 56px); */
  font-size: 40px;
  letter-spacing: -1px;
  line-height: 1.28;
  color: #212325;
}

.product-sub-titles {
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #212325;
}

.product-description{
    color: #4b4c4d;
}
.reveal-line-wrap {
  display: block;
  overflow: hidden;
  line-height: 1.3;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.reveal-line-inner {
  display: block;
  opacity: 0;
  transform: translateY(100%) skewY(1.5deg);
  transition:
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.reveal-line-inner.visible {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-line-inner {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Tablet & mobile: the text and image columns stack, so the fixed image
   column height only creates dead space. Space them with a row gap instead
   and let headings scale down with the viewport. */
@media (max-width: 991px) {
    .product-intro .col-lg-7 {
        min-height: 0;
    }

    .product-intro .row {
        row-gap: 32px;
    }

    .product-feature-image {
        max-height: 70vh;
    }

    .product-titles {
        font-size: clamp(28px, 4.5vw, 40px);
    }

    .product-sub-titles {
        font-size: clamp(22px, 3.5vw, 30px);
    }

    .product-banner-title {
        font-size: clamp(32px, 9vw, 44px);
        padding-right: 16px;
    }
}


/* dots */

/* SECTION */
.product-hotspot-section {
    padding: 80px 0;
}

/* WRAPPER */
.product-hotspot-wrapper{
    position: relative;
    width: fit-content;
    margin: 0 auto;
}
/* MAIN IMAGE */
.product-main-image{
    display:block;
    width:100%;
    max-width:1000px;
    height:auto;
}
/* HOTSPOT POSITION
   --hotspot-top / --hotspot-left are set inline per hotspot in
   inc/templates/panel-layout.php so the same values can place either the
   whole hotspot (desktop) or just the dot (stacked mobile layout). */
.hotspot {
    position: absolute;
    top: var(--hotspot-top);
    left: var(--hotspot-left);
    z-index: 10;
}

.hotspot.active {
    z-index: 9999;
}

/* DOT */
.hotspot-dot {
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 22px; /* fixed position */
    left: -20px;
    transform: none;
    box-shadow: 0 0 10px rgba(0,0,0,.15);
    cursor: pointer;
}

/* Number badge in the card header — only shown in the stacked mobile layout */
.hotspot-num {
    display: none;
}

/* CARD */
.hotspot-card {
    position: relative;
    background: rgba(255,255,255,.95);
    border-radius: 16px;
    overflow: hidden;
    width: fit-content;
    min-width: 360px;
    max-width: 450px;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* HEADER */
.hotspot-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:8px 10px;
}
/* LEFT CONTENT */
.hotspot-content{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
}

/* LABEL */
.hotspot-label{
    font-size:11px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#8d8d8d;
    white-space:nowrap;
}

/* TITLE */
.hotspot-content h4{
    margin:0;
    font-size:18px;
    font-weight:400;
    color:#111;
    line-height:1;
}

.hotspot-toggle{
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:rgba(89,28,28,.08);
    color:#591c1c;
    font-size:24px;
    cursor:pointer;

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

    transition:.3s;
}

/* ROTATE PLUS */
.hotspot.active .hotspot-toggle{
    transform:rotate(45deg);
}
/* DESCRIPTION */

.hotspot-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.hotspot-body-inner{
    padding:15px 20px 20px;
    border-top:1px solid #e5e5e5;
}

/* DESCRIPTION TEXT */
.hotspot-body p{
    margin:0;
    font-size:15px;
    line-height:1.7;
    color:#333;
}

.hotspot-list{
    margin:0;
    padding-left:18px;
    font-size:15px;
    line-height:1.7;
    color:#333;
}

.hotspot-list li{
    margin-bottom:4px;
}

.hotspot-list li:last-child{
    margin-bottom:0;
}

/* LEFT SIDE HOTSPOTS */
.hotspot-right .hotspot-dot{
    left: -20px;
    right: auto;
}

.hotspot-right .hotspot-card{
    margin-left: 0;
}

/* RIGHT SIDE HOTSPOTS */
.hotspot-left{
    transform: translateX(-100%);
}

.hotspot-left .hotspot-dot{
    left: auto;
    right: -20px;
    top: 22px;

}

.hotspot-left .hotspot-card{
    margin-right: 0;
}

/* RESPONSIVE */

/* Small desktop: cards still float beside the image but are narrower so the
   outermost ones don't run past the viewport edge. */
@media (max-width: 1199px) {
    /* Shrink the image so the cards hanging off both sides stay inside
       the viewport (each side needs roughly 200px of clearance). */
    .product-main-image {
        max-width: min(800px, calc(100vw - 420px));
    }

    .hotspot-card {
        min-width: 280px;
        max-width: 340px;
    }

    .hotspot-content h4 {
        font-size: 16px;
    }
}

/* Tablet & mobile: the image goes on top with numbered dots, and the cards
   stack underneath as a full-width accordion. The wrapper becomes a grid,
   each .hotspot dissolves (display: contents) so its dot can be pinned to
   the image cell (grid row 1) while its card flows into the rows below. */
@media (max-width: 991px) {

    .product-hotspot-section {
        padding: 32px 16px;
    }

    .product-hotspot-wrapper {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        width: 100%;
        max-width: 640px;
    }

    /* No margin here: the dots are placed as a percentage of this grid row,
       so the row must be exactly the image's height. */
    .product-main-image {
        grid-area: 1 / 1 / 2 / 2;
        max-width: 100%;
        margin: 0;
    }

    .hotspot,
    .hotspot-left,
    .hotspot-right {
        display: contents;
        transform: none;
    }

    .hotspot-dot,
    .hotspot-left .hotspot-dot,
    .hotspot-right .hotspot-dot {
        grid-area: 1 / 1 / 2 / 2;
        top: var(--hotspot-top);
        left: var(--hotspot-left);
        right: auto;
        width: 28px;
        height: 28px;
        transform: translate(-50%, -50%);
        background: #591c1c;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        line-height: 28px;
        text-align: center;
        box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 4px 12px rgba(0,0,0,.2);
        z-index: 2;
    }

    .hotspot-dot::before {
        content: attr(data-n);
    }

    .hotspot.active .hotspot-dot {
        background: #fff;
        color: #591c1c;
        border: 2px solid #591c1c;
        line-height: 24px;
    }

    .hotspot-card,
    .hotspot-left .hotspot-card,
    .hotspot-right .hotspot-card {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        background: #fff;
        border: 1px solid #ebe8e2;
        box-shadow: none;
    }

    .hotspot-header {
        padding: 10px 12px;
    }

    .hotspot-content {
        gap: 10px;
        min-width: 0;
    }

    .hotspot-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(89,28,28,.08);
        color: #591c1c;
        font-size: 12px;
        font-weight: 600;
    }

    .hotspot.active .hotspot-num {
        background: #fff;
        color: #591c1c;
        border: 2px solid #591c1c;
    }

    .hotspot-content h4 {
        font-size: 16px;
        line-height: 1.3;
    }

    .hotspot-toggle {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    .hotspot-body-inner {
        padding: 12px 14px 16px;
    }

    .hotspot-body p,
    .hotspot-list {
        font-size: 14px;
    }
}



/* Panel last sections */
/* Gallery duo — 60/40 portrait pair, images at full natural height.
   The narrower right image drifts down on scroll until it bottom-aligns
   with the taller left one (parallax driven by JS in panel-layout.php). */
.product-diagram {
    position: relative;
}

.diagram-scroll-wrapper {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 32px;
    align-items: start;
}

.diagram-left {
    grid-column: 1;
}

.diagram-right {
    grid-column: 2;
    will-change: transform;
}

.diagram-left-sticky,
.parallax-small-image {
    position: relative;
}

/* Full height: natural aspect ratio, never cropped */
.diagram-image-large,
.diagram-image-medium {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile: keep the 60/40 pairing, just tighten the gap */
@media (max-width: 768px) {
    .diagram-scroll-wrapper {
        gap: 16px;
    }
}

/* Phones: trim the vertical rhythm of the materials landing page. Kept at the
   end of the file so these override the earlier section/card rules. */
@media (max-width: 767px) {
    .materials-page .section-padding,
    .materials-page .section-padding-lg,
    .materials-page .material-intro,
    .materials-page .material-section,
    .materials-page .integration-section{
        padding:40px 0;
    }

    .materials-page .materials-intro-section{
        padding:48px 0 24px;
    }

    .intro-text p:last-child{
        margin-bottom:0;
    }

    .materials-page .materials-cta{
        padding:56px 0;
    }

    .materials-cta-buttons{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .benefit-row{
        margin-top:0;
        margin-bottom:1rem;
    }

    .benefit-box{
        padding-top:20px;
    }

    .sticky-content{
        margin-bottom:20px;
    }

    .products-grid{
        gap:24px;
    }

    .product-card{
        margin-bottom:0;
    }

    .product-card img,
    .image-wrap img{
        height:auto;
        aspect-ratio:4 / 3;
    }

    .product-card h5{
        margin-top:12px;
        font-size:22px;
    }
}