:root{
  --paper:#f5f0e8; --paper-soft:#ece5d8; --ink:#1a1816; --border:#dad3c4;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.font-display{font-family:'Cormorant Garamond','Times New Roman',serif;font-weight:500;letter-spacing:-.01em}
.italic{font-style:italic}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.container{max-width:1600px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.container{padding:0 40px}}
.btn{display:inline-block;border:1px solid var(--ink);padding:14px 28px;font-size:11px;letter-spacing:.25em;text-transform:uppercase;transition:.3s;cursor:pointer;background:transparent;color:var(--ink)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--paper);color:var(--ink)}
.btn-light{border-color:var(--paper);color:var(--paper)}
.btn-light:hover{background:var(--paper);color:var(--ink)}
.brochure-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:64px;padding-top:48px;border-top:1px solid var(--border)}
.brochure-cta-text{max-width:480px}
.brochure-cta .btn{flex-shrink:0}

/* HEADER */
.header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.4s}
.header.scrolled{background:rgba(245,240,232,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1600px;margin:0 auto}
@media(min-width:768px){.header-inner{padding:20px 40px}}
.logo{height:38px}
@media(min-width:768px){.logo{height:44px}}
.nav{display:none;gap:36px;align-items:center}
@media(min-width:768px){.nav{display:flex}}
.nav a{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(26,24,22,.6);transition:.3s;position:relative}
.nav a:hover, .nav a.active{color:var(--ink)}
.nav .submenu-parent{position:relative}
.submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--paper);border:1px solid var(--border);min-width:240px;padding:10px 0;box-shadow:0 10px 30px rgba(0,0,0,.1);opacity:0;visibility:hidden;transition:.2s;margin-top:18px}
.submenu-parent:hover .submenu{opacity:1;visibility:visible}
.submenu a{display:block;padding:10px 22px;font-size:12px}
.submenu a:hover{background:var(--paper-soft)}
.menu-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:40px;height:40px;background:none;border:none;cursor:pointer}
@media(min-width:768px){.menu-btn{display:none}}
.menu-btn span{display:block;width:24px;height:1px;background:var(--ink);transition:.3s}
.mobile-nav{display:none;background:var(--paper);border-top:1px solid var(--border);padding:24px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:18px 0;font-family:'Cormorant Garamond',serif;font-size:24px;border-bottom:1px solid var(--border)}
.header.transparent .nav a{color:rgba(245,240,232,.7)}
.header.transparent .nav a:hover, .header.transparent .nav a.active{color:var(--paper)}
.header.transparent .logo{filter:invert(1) brightness(2)}
.header.transparent .menu-btn span{background:var(--paper)}

/* Submenu Fix for Transparent Header */
.header.transparent .nav .submenu a {color: var(--ink) !important;}
.header.transparent .nav .submenu a:hover {background: var(--paper-soft) !important; color: var(--ink) !important;}

.cta-header{display:none;border:1px solid var(--ink);padding:11px 22px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;transition:.3s}
@media(min-width:768px){.cta-header{display:inline-block}}
.cta-header:hover{background:var(--ink);color:var(--paper)}
.header.transparent .cta-header{border-color:var(--paper);color:var(--paper)}
.header.transparent .cta-header:hover{background:var(--paper);color:var(--ink)}

/* HERO */
.hero{position:relative;height:100vh;overflow:hidden;background:var(--ink);color:var(--paper)}
.hero video,.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(26,24,22,.55),rgba(26,24,22,.35) 50%,rgba(26,24,22,.85))}

.hero-content{
  position:relative;
  z-index:10;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center; 
  max-width:1600px;
  margin:0 auto;
  padding:120px 24px 60px;
}
@media(min-width:768px){
  .hero-content{
    padding:140px 40px 80px;
  }
}

.hero-eyebrow-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-eyebrow-line {
  display: block;
  width: 35px;
  height: 1px;
  background: var(--paper);
  opacity: 0.6;
}

.hero h1{font-family:'Cormorant Garamond',serif;font-size:11vw;line-height:1.0;letter-spacing:-.01em;margin-top:20px;max-width:1200px;font-weight:500}
@media(min-width:768px){
  .hero h1{
    font-size: 6.2vw;
    line-height: 1.02;
    margin-top: 24px;
  }
}

.hero-bottom{margin-top:32px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
@media(min-width:768px){.hero-bottom{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.hero-bottom p{max-width:460px;color:rgba(245,240,232,.75);font-size:15px;line-height:1.55}

.hero .btn {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.hero .btn:hover {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
}

.hero h1 em {
  color: #b8a882;
}

/* PAGE HERO */
.page-hero{position:relative;overflow:hidden;padding:160px 24px 96px}
@media(min-width:768px){.page-hero{padding:224px 40px 128px}}
.page-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.page-hero .overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(245,240,232,.5),rgba(245,240,232,.3) 50%,var(--paper));pointer-events:none}
.page-hero .inner{position:relative;max-width:1600px;margin:0 auto}
.page-hero h1{font-family:'Cormorant Garamond',serif;font-size:64px;line-height:.95;margin-top:24px;font-weight:500}
@media(min-width:768px){.page-hero h1{font-size:112px}}
@media(min-width:1024px){.page-hero h1{font-size:160px}}

/* MARQUEE */
.marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--paper);overflow:hidden;padding:40px 0}
.marquee-track{display:flex;gap:64px;white-space:nowrap;animation:marquee 40s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee span{font-family:'Cormorant Garamond',serif;font-size:48px;color:rgba(26,24,22,.85);font-weight:500}
@media(min-width:768px){.marquee span{font-size:72px}}

/* SECTIONS */
section{padding:96px 24px}
@media(min-width:768px){section{padding:160px 40px}}
section .container{max-width:1600px;margin:0 auto}
.section-head{display:flex;flex-direction:column;gap:24px}
@media(min-width:768px){.section-head{flex-direction:row;align-items:flex-end;justify-content:space-between}}
h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:48px;line-height:1;letter-spacing:-.01em;margin-top:20px}
@media(min-width:768px){h2{font-size:88px}}
h3{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:-.005em}

/* MATERIALS GRID */
.mat-grid{margin-top:80px;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.mat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mat-grid{grid-template-columns:repeat(4,1fr)}}
.mat-card{display:block;position:relative;background:#000;color:var(--paper);overflow:hidden;transition:transform .4s}
.mat-card:hover{transform:translateY(-6px)}
.mat-card .img{aspect-ratio:3/4;width:100%;object-fit:cover;opacity:.7;transition:1s}
.mat-card:hover .img{transform:scale(1.05);opacity:.85}
.mat-card .info{position:absolute;left:0;right:0;bottom:0;padding:28px;background:linear-gradient(to top,rgba(0,0,0,.9),transparent)}
.mat-card .info h3{font-size:36px}
.mat-card .info .t{margin-top:8px;font-style:italic;color:rgba(245,240,232,.75);font-size:14px}

/* CRAFT FULL BLEED */
.craft{position:relative;height:90vh;background:var(--ink);color:var(--paper);padding:0;overflow:hidden}
.craft img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.craft .overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(26,24,22,.8),rgba(26,24,22,.3),transparent)}
.craft .inner{position:relative;max-width:1600px;height:100%;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;justify-content:center}
@media(min-width:768px){.craft .inner{padding:0 40px}}
.craft h2{color:var(--paper);max-width:760px}

/* PORTFOLIO GRID */
.port-grid{margin-top:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:768px){.port-grid{grid-template-columns:repeat(6,1fr);gap:20px}}
.port-card{position:relative;overflow:hidden;background:#000}
.port-card .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,24,22,.85),rgba(26,24,22,.1),transparent)}
.port-card .info{position:absolute;left:0;right:0;bottom:0;padding:24px;color:var(--paper)}
.port-card .info h4{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500}
.port-card .info .eyebrow{margin-top:4px;color:rgba(245,240,232,.75)}
.span-4{grid-column:span 2}.span-2{grid-column:span 2}
@media(min-width:768px){.span-4{grid-column:span 4}.span-2-tab{grid-column:span 2}.span-3{grid-column:span 3}}
.aspect-16-10{aspect-ratio:16/10}.aspect-4-5{aspect-ratio:4/5}.aspect-5-4{aspect-ratio:5/4}.aspect-21-9{aspect-ratio:21/9}.aspect-21-8{aspect-ratio:21/8}.aspect-16-11{aspect-ratio:16/11}

/* HALLMARK GRID */
.hall-grid{margin-top:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:768px){.hall-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.hall-card{display:block}
.hall-card .imgbox{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.hall-card img{width:100%;height:100%;object-fit:cover;transition:1.4s}
.hall-card:hover img{transform:scale(1.1)}
.hall-card .name{font-family:'Cormorant Garamond',serif;font-size:28px;margin-top:16px;font-weight:500}
.hall-card .tag{margin-top:4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(26,24,22,.5)}

/* TESTIMONIALS */
.test-grid{margin-top:80px;display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:768px){.test-grid{grid-template-columns:repeat(3,1fr)}}
.test-card{border-top:1px solid rgba(26,24,22,.15);padding-top:32px}
.test-card blockquote{margin-top:16px;font-size:18px;color:rgba(26,24,22,.8);line-height:1.6}
.test-card .quote{font-family:'Cormorant Garamond',serif;font-size:48px;color:rgba(26,24,22,.3);line-height:1}
.test-card figcaption{margin-top:32px}
.test-card figcaption .n{font-family:'Cormorant Garamond',serif;font-size:20px}

/* STATS */
.stats{background:var(--ink);color:var(--paper);padding:96px 24px}
@media(min-width:768px){.stats{padding:128px 40px}}
.stats-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stats .n{font-family:'Cormorant Garamond',serif;font-size:64px;font-weight:500}
@media(min-width:768px){.stats .n{font-size:96px}}
.stats .l{margin-top:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,232,.5)}

/* INDUSTRY 3-col */
.three-col{margin-top:64px;display:grid;grid-template-columns:1fr;gap:1px;background:var(--border)}
@media(min-width:768px){.three-col{grid-template-columns:repeat(3,1fr)}}
.three-col > div{background:var(--paper);padding:48px}
@media(min-width:768px){.three-col > div{padding:56px}}
.three-col h3{font-size:36px}
@media(min-width:768px){.three-col h3{font-size:48px}}
.three-col p{margin-top:20px;color:rgba(26,24,22,.65)}

/* CTA */
.cta{border-top:1px solid var(--border);padding:128px 24px;text-align:center}
@media(min-width:768px){.cta{padding:192px 40px}}
.cta h2{font-size:64px}
@media(min-width:768px){.cta h2{font-size:128px}}
.cta p{max-width:480px;margin:32px auto 0;color:rgba(26,24,22,.6)}
.cta-buttons{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* FOOTER */
footer{background:var(--ink);color:var(--paper);padding:80px 24px;}
@media(min-width:768px){footer{padding:96px 40px}}
.foot-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:768px){.foot-grid{grid-template-columns:5fr 2fr 2fr 3fr}}
.foot-grid h2{font-family:'Cormorant Garamond',serif;font-size:48px;line-height:1.05;font-weight:500;margin:0}
@media(min-width:768px){.foot-grid h2{font-size:72px}}
.foot-grid p{margin-top:24px;max-width:440px;font-size:14px;color:rgba(245,240,232,.6)}
.foot-grid .eyebrow{color:rgba(245,240,232,.4)}
.foot-grid ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px;font-size:14px}
.foot-grid a{color:rgba(245,240,232,.8)}
.foot-grid a:hover{color:var(--paper)}
.foot-grid address{margin-top:20px;font-style:normal;font-size:14px;color:rgba(245,240,232,.8);line-height:1.6}
.foot-bottom{max-width:1600px;margin:80px auto 0;border-top:1px solid rgba(245,240,232,.15);padding-top:32px;display:flex;flex-direction:column;gap:16px;font-size:12px;color:rgba(245,240,232,.4)}
@media(min-width:768px){.foot-bottom{flex-direction:row;justify-content:space-between;align-items:center}}

/* WHATSAPP */
.wa{position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:#25D366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:50;transition:.3s}
.wa:hover{transform:scale(1.1)}
@media(min-width:768px){.wa{bottom:32px;right:32px;width:64px;height:64px}}

/* PRODUCTS */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:64px}
.filter-btn{border:1px solid var(--border);padding:10px 20px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,24,22,.7);background:transparent;cursor:pointer;transition:.3s}
.filter-btn:hover{border-color:var(--ink);color:var(--ink)}
.filter-btn.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filter-count{margin-left:auto;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,24,22,.5)}
.prod-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:32px}
@media(min-width:640px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.prod-grid{grid-template-columns:repeat(4,1fr)}}
.prod-card{background:transparent;border:none;text-align:left;cursor:pointer;padding:0;font:inherit;color:inherit}
.prod-card .imgbox{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-soft)}
.prod-card img{width:100%;height:100%;object-fit:cover;transition:1.4s}
.prod-card:hover img{transform:scale(1.1)}
.prod-card .cat{position:absolute;left:12px;top:12px;background:var(--paper);padding:4px 8px;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.prod-card .meta{margin-top:16px;display:flex;justify-content:space-between;align-items:baseline}
.prod-card .name{font-family:'Cormorant Garamond',serif;font-size:24px}
.prod-card .origin{margin-top:4px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(26,24,22,.5)}
.prod-card .thick{font-size:12px;color:rgba(26,24,22,.4)}

/* PORTFOLIO 12-col grid */
.proj-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

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

@media (min-width: 1024px) {
  .proj-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    grid-auto-flow: dense; 
  }
}

.port-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 340px;
  background: var(--ink);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Image Positioning Fix for Auto Alignment */
.port-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.port-card:hover img {
  transform: scale(1.04);
}

.port-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 24, 22, 0.85) 0%, rgba(26, 24, 22, 0.25) 50%, transparent 100%);
  z-index: 1;
}

.port-card .info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px;
  color: var(--paper);
  z-index: 2;
}

.port-card .info h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 500;
  margin-top: 6px;
  line-height: 1.1;
}

.port-card .info .sub {
  margin-top: 4px;
  font-style: italic;
  font-size: 14px;
  color: rgba(245, 240, 232, 0.75);
}

@media (min-width: 1024px) {
  .proj-grid .port-card.bento-tall {
    grid-row: span 2;
    min-height: 640px; 
  }
  
  .proj-grid .port-card.bento-standard {
    grid-row: span 1;
    min-height: 308px;
  }
}

/* SERVICES */
.serv-grid{display:grid;grid-template-columns:1fr;gap:0 48px}
@media(min-width:768px){.serv-grid{grid-template-columns:repeat(2,1fr)}}
.serv-item{display:grid;grid-template-columns:1fr 5fr;gap:24px;border-bottom:1px solid var(--border);padding:40px 0}
.serv-item h3{font-size:28px}
@media(min-width:768px){.serv-item h3{font-size:42px}}
.serv-item p{margin-top:16px;color:rgba(26,24,22,.65);max-width:440px}
.service-list{list-style:none;margin:0;padding:0;max-width:440px;display:flex;flex-direction:column;gap:12px}
.service-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.5;color:rgba(26,24,22,.75)}
.service-list li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink)}

/* DARK SECTION */
.dark-sec{background:var(--ink);color:var(--paper)}
.dark-sec h2,.dark-sec h3{color:var(--paper)}
.dark-grid{margin-top:64px;display:grid;grid-template-columns:1fr;gap:1px;background:rgba(245,240,232,.15)}
@media(min-width:768px){.dark-grid{grid-template-columns:repeat(3,1fr)}}
.dark-grid > div{background:var(--ink);padding:40px}
.dark-grid h3{font-size:28px;margin-top:16px}
.dark-grid p{margin-top:16px;font-size:14px;color:rgba(245,240,232,.65)}

/* TABLE */
.price-table{width:100%;border-collapse:collapse;margin-top:48px}
.price-table th{text-align:left;padding:16px 0;border-bottom:1px solid rgba(26,24,22,.3);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,24,22,.6)}
.price-table td{padding:24px 0;border-bottom:1px solid rgba(26,24,22,.15)}
.price-table td.mat{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500}
@media(min-width:768px){.price-table td.mat{font-size:30px}}

/* FAQ */
details{border-bottom:1px solid var(--border);padding:24px 0}
details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500}
@media(min-width:768px){details summary{font-size:30px}}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:rgba(26,24,22,.4);font-size:24px;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:16px;max-width:720px;color:rgba(26,24,22,.65)}

/* CONTACT FORM */
.contact-grid{display:grid;grid-template-columns:1fr;gap:64px;max-width:1600px;margin:0 auto}
@media(min-width:768px){.contact-grid{grid-template-columns:5fr 7fr}}
.contact-info > div{margin-bottom:40px}
.contact-info p{margin-top:16px}
.contact-info .big{font-family:'Cormorant Garamond',serif;font-size:30px;line-height:1.2;font-weight:500}
.contact-info ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.contact-form{border:1px solid var(--border);background:rgba(255,255,255,.4);padding:32px;display:flex;flex-direction:column;gap:24px}
@media(min-width:768px){.contact-form{padding:48px}}
.contact-form label{display:block}
.contact-form .eyebrow{color:rgba(26,24,22,.4)}
.contact-form .input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);padding:12px 0;font-size:16px;color:var(--ink);outline:none;transition:.3s;font-family:inherit;margin-top:4px}
.contact-form .input:focus{border-color:var(--ink)}
.row-2{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.row-2{grid-template-columns:1fr 1fr}}
.map-frame{height:480px;width:100%;border:0;border-top:1px solid var(--border)}
em{font-style:italic;color:rgba(26,24,22,.85)}
.dark-sec em{color:rgba(245,240,232,.85)}
.hero em, .craft em, footer em{color:inherit}
.center{text-align:center}
.text-muted{color:rgba(26,24,22,.65)}

/* ── BENTO PORTFOLIO GRID ── */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 48px;
}
@media(min-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: 600px;
  }
}
.bento-left {
  height: 340px;
}
@media(min-width: 768px) {
  .bento-left {
    height: 100%;
  }
}
.bento-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 340px;
}
@media(min-width: 768px) {
  .bento-right {
    height: 100%;
  }
}
.bento-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
}
.bento-sm {
  height: 100%;
  min-height: 140px;
}
.bento-wide {
  flex: 1;
  min-height: 140px;
}
.bento-grid .port-card {
  position: relative;
  overflow: hidden;
  background: #000;
}
/* Bento Grid Image Fix */
.bento-grid .port-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s ease-out;
}

.bento-grid .port-card:hover img {
  transform: scale(1.06);
}
.bento-grid .port-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,24,22,.4), transparent 60%);
  transition: background .4s;
}
.bento-grid .port-card:hover .overlay {
  background: linear-gradient(to top, rgba(26,24,22,.25), transparent 60%);
}

/* ── CTA with background overlay ── */
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,24,22,.72) 0%, rgba(26,24,22,.65) 100%);
  z-index: 0;
}
.cta > * {
  position: relative;
  z-index: 1;
  color: var(--paper);
}
.cta h2{color:var(--paper) !important}
.cta p{color:rgba(245,240,232,.7) !important}
.cta .eyebrow{color:rgba(245,240,232,.5) !important}
.cta em {
  color: #b8a882;
}


/* --- SEARCH & COLOR CONTROLS --- */
.product-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.search-box, .color-select {
  padding: 10px 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  outline: none;
  transition: 0.3s;
}

.search-box {
  width: 220px;
  max-width: 220px;
}

.search-box::placeholder {
  color: rgba(26, 24, 22, 0.4);
}

.color-select {
  color: rgba(26, 24, 22, 0.7);
  cursor: pointer;
  min-width: 180px;
  appearance: none; /* Safari/Chrome dropdown arrow styling */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231a1816%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px top 50%;
  background-size: 8px auto;
  padding-right: 36px;
}

.color-select option {
  background: var(--paper);
  color: var(--ink);
}

.search-box:focus, .color-select:focus, .color-select:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* --- SMART PAGINATION --- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 56px;
  margin-bottom: 32px;
}

.page-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.page-btn:hover:not(:disabled), .page-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: var(--border);
}

.page-dots {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--ink);
  padding: 0 4px;
  letter-spacing: 2px;
}

/* STATS PORTFOLIO */
.stats-grid {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 40px;
  text-align: center; 
  justify-items: center; 
}

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