:root{
  --cream:#f1ebdf;
  --cream2:#ece3d2;
  --ink:#1c1712;
  --ink-soft:#4a4038;
  --brown:#4a2f1f;
  --brown-dark:#2c1d13;
  --brown-leather:#5a3824;
  --rust:#c96c13;
  --black:#141010;
  --maxw:1180px;
  --headerh:84px;
  --sans:'Inter', sans-serif;
  --head:'Space Grotesk', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.6; padding-top:var(--headerh);}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
h1,h2,h3{font-family:var(--head); font-weight:700; margin:0; letter-spacing:-0.01em;}
.eyebrow{text-transform:uppercase; font-size:12px; letter-spacing:.14em; font-weight:600; color:var(--rust); display:block; margin-bottom:12px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:0; font-size:14px; font-weight:600;
  border:1.5px solid var(--brown); background:#fff; color:var(--brown);
  transition:all .2s ease; cursor:pointer;
}
.btn:hover{background:var(--brown); color:#fff;}
.btn.dark{background:var(--black); color:#fff; border-color:var(--black);}
.btn.dark:hover{background:var(--brown-dark);}
.btn.white{background:#fff; color:var(--ink); border-color:#fff;}
.btn.white:hover{background:var(--cream);}

/* HEADER */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
header.scrolled{background:#fff; border-bottom:1px solid #ece4d8;}
header.solid{background:#fff; border-bottom:1px solid #ece4d8;}
header.solid .logo-full{display:none;}
header.solid .logo-icon-word{display:flex;}
header.solid .navlinks{color:var(--ink);}
header.solid .cart{color:var(--ink);}
header.solid .menu-toggle{color:var(--ink);}
header.solid .btn.dark{background:var(--black); color:#fff; border-color:var(--black);}
.nav{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px;
  padding:16px 40px; max-width:1500px; margin:0 auto;
}
.logo{display:flex; align-items:center; gap:10px; position:relative;}
.logo img{height:38px; width:auto;}
.logo-full{display:block;}
.logo-icon-word{display:none; align-items:center; gap:10px;}
header.scrolled .logo-full{display:none;}
header.scrolled .logo-icon-word{display:flex;}
.logo-word{font-family:var(--head); line-height:1.1;}
.logo-word .l1{display:block; font-size:18px; font-weight:700; color:var(--ink);}
.logo-word .l2{display:block; font-size:10.5px; font-weight:500; color:var(--ink-soft); letter-spacing:.03em;}
.navlinks{display:flex; gap:30px; font-size:14px; font-weight:500; justify-content:center; color:#fff; transition:color .3s ease;}
header.scrolled .navlinks{color:var(--ink);}
.navlinks a{padding-bottom:4px; border-bottom:2px solid transparent; transition:border-color .2s;}
.navlinks a.active, .navlinks a:hover{border-color:var(--rust); color:var(--rust);}
.navcta{display:flex; align-items:center; gap:22px;}
.cart{font-size:14px; display:flex; align-items:center; gap:6px; color:#fff; transition:color .3s ease;}
header.scrolled .cart{color:var(--ink);}
.cart svg{width:20px; height:20px; stroke:currentColor; fill:none;}
.menu-toggle{display:none; background:none; border:none; font-size:24px; cursor:pointer; color:#fff;}
header.scrolled .menu-toggle{color:var(--ink);}
header .btn.dark{background:#fff; color:var(--ink); border-color:#fff;}
header.scrolled .btn.dark{background:var(--black); color:#fff; border-color:var(--black);}

/* HERO */
.hero{position:relative; min-height:640px; margin-top:calc(-1 * var(--headerh)); display:flex; align-items:center; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover;}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(74,47,31,.55) 0%, rgba(74,47,31,.32) 40%, rgba(74,47,31,.08) 70%, transparent 100%);
}
.hero-content{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:calc(var(--headerh) + 40px) 32px 70px; width:100%;}
.hero-content h1{font-size:clamp(34px,5vw,54px); line-height:1.1; color:#fff; max-width:560px;}
.hero-content p{font-size:15px; color:#f1ebe0; max-width:440px; margin:22px 0 30px;}

/* PAGE BANNER (inner pages) */
.page-banner{position:relative; min-height:360px; margin-top:calc(-1 * var(--headerh)); display:flex; align-items:center; overflow:hidden;}
.page-banner .hero-bg::after{background:linear-gradient(90deg, rgba(20,13,9,.72) 0%, rgba(20,13,9,.5) 45%, rgba(20,13,9,.25) 100%);}
.page-banner .hero-content{padding:calc(var(--headerh) + 60px) 32px 50px;}
.page-banner h1{font-size:clamp(30px,4.2vw,46px);}
.page-banner .crumbs{color:#e4d8c7; font-size:13px; margin-top:14px;}
.page-banner .crumbs a:hover{color:var(--rust);}

/* TICKER */
.ticker{background:var(--brown-dark); overflow:hidden; padding:14px 0; white-space:nowrap;}
.ticker-track{display:inline-flex; animation:ticker 32s linear infinite;}
.ticker-track span{
  display:inline-block; padding:0 28px; font-size:12.5px; letter-spacing:.03em;
  color:#c9b9a4; text-transform:uppercase; font-weight:500;
}
.ticker-track span::after{content:"•"; margin-left:28px; color:var(--rust);}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

section{padding:100px 0;}
.section-head{max-width:620px;}
.section-head.center{margin:0 auto; text-align:center;}

/* ABOUT */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.about-grid img{border-radius:6px;}
.about-text h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:18px;}
.about-text p{color:var(--ink-soft); margin:0 0 16px; font-size:15px;}

/* STORY (inner-page variant of about-grid: image stretches to match text column height) */
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:stretch;}
.story-grid .story-media{border-radius:6px; overflow:hidden; min-height:420px;}
.story-grid .story-media img{width:100%; height:100%; object-fit:cover;}
.story-grid .about-text{display:flex; flex-direction:column; justify-content:center;}

/* FEATURED CREATIONS */
.featured{
  background:
    linear-gradient(rgba(40,22,12,.72), rgba(40,22,12,.82)),
    url('../assets/3b1fed65-pngtree-brown-soft-leather-texture-leather-pattern-background-picture-image_1282016.png');
  background-size:cover; background-position:center;
  color:#fff; text-align:center;
}
.featured .section-head{margin:0 auto 50px;}
.featured h2{font-size:clamp(28px,3.6vw,42px); color:#fff; margin-bottom:16px;}
.featured p{color:#e4d8c7; font-size:15px;}
.featured .why-card h3{color:#fff;}
.featured .why-card p{color:#cdbfae;}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:46px; text-align:left;}
.card{position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/5;}
.card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.card:hover img{transform:scale(1.07);}
.card::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,6,3,.88) 0%, rgba(10,6,3,.1) 55%, transparent 80%);}
.card-label{position:absolute; left:20px; right:20px; bottom:18px; z-index:1;}
.card-label h3{font-size:19px; color:#fff; margin-bottom:6px;}
.card-label p{font-size:13px; color:#e4d8c7; margin:0;}

/* WHY CHOOSE US + PROCESS (cream) */
.cream-section{background:var(--cream);}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; margin-top:54px;}
.why-card .icon{width:56px; height:56px; margin:0 auto 18px;}
.why-card .icon img{width:100%; height:100%; object-fit:contain;}
.why-card h3{font-size:17px; margin-bottom:8px;}
.why-card p{color:var(--ink-soft); font-size:13.5px; margin:0;}

.process-head{margin-top:100px;}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:54px;}
.process-card .img-wrap{aspect-ratio:1; border-radius:6px; overflow:hidden; margin-bottom:18px;}
.process-card img{width:100%; height:100%; object-fit:cover;}
.process-card h3{font-size:16px; margin-bottom:6px; text-align:center;}
.process-card p{color:var(--ink-soft); font-size:13px; margin:0; text-align:center;}

/* GALLERY CAROUSEL (homepage) */
.gallery{background:var(--brown-dark); padding:60px 0;}
.gallery-track{
  display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth; padding:0 32px;
  scrollbar-width:none;
}
.gallery-track::-webkit-scrollbar{display:none;}
.gallery-track img{
  height:260px; width:200px; object-fit:cover; border-radius:6px; flex:0 0 auto;
}
.gallery-wrap{position:relative; max-width:var(--maxw); margin:0 auto;}
.arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3); color:#fff; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.arrow:hover{background:rgba(255,255,255,.25);}
.arrow.left{left:8px;}
.arrow.right{right:8px;}

/* MEET NANCY */
.meet{display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center;}
.meet img{border-radius:6px;}
.meet-text h2{font-size:clamp(26px,3.4vw,36px); margin-bottom:18px;}
.meet-text p{color:var(--ink-soft); margin:0 0 16px; font-size:15px;}
.meet-text p.lead{color:var(--ink); font-weight:600;}

/* CTA BANNER */
.cta-banner{position:relative; padding:120px 0; text-align:center; overflow:hidden;}
.cta-banner .bg{position:absolute; inset:0; z-index:0;}
.cta-banner .bg img{width:100%; height:100%; object-fit:cover;}
.cta-banner .bg::after{content:""; position:absolute; inset:0; background:rgba(10,7,5,.55);}
.cta-banner .inner{position:relative; z-index:1; max-width:620px; margin:0 auto; padding:0 32px;}
.cta-banner h2{font-size:clamp(26px,4vw,40px); color:#fff; margin-bottom:14px;}
.cta-banner p{color:#e4d8c7; margin-bottom:30px; font-size:15px;}

/* NEWSLETTER */
.newsletter{background:var(--black); padding:50px 0; text-align:center;}
.newsletter p{color:#cfc5b8; margin:0 0 20px; font-size:14px;}
.newsletter-form{display:flex; gap:10px; justify-content:center; max-width:420px; margin:0 auto;}
.newsletter-form input{
  flex:1; padding:12px 14px; border-radius:4px; border:1px solid #3a322a;
  background:#201a15; color:#fff; font-family:var(--sans); font-size:14px;
}
.newsletter-form button{
  padding:12px 22px; border-radius:4px; border:none; background:#fff; color:var(--ink);
  font-weight:600; cursor:pointer; font-size:14px;
}

/* FOOTER */
footer{background:var(--black); padding:50px 0 36px;}
.footer-rule{border-top:1px solid #2c2620; margin-bottom:36px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1.2fr; gap:40px;}
.footer-logo{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.footer-logo img{height:34px;}
.footer-logo .logo-word .l1{color:#f1ebdf;}
.footer-logo .logo-word .l2{color:#9c9186;}
.footer-col p{color:#9c9186; font-size:13.5px; margin:0;}
.footer-col h4{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--rust); margin-bottom:16px; font-weight:600;}
.footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; color:#d8d0c4; font-size:13.5px;}
.footer-col ul a, .footer-col ul span{font-size:13.5px; color:#d8d0c4;}
.footer-col ul a:hover{color:var(--rust);}
.footer-col ul a.contact-strong{color:#fff; font-weight:700;}
.footer-bottom{margin-top:44px; padding-top:22px; border-top:1px solid #2c2620; display:flex; justify-content:space-between; font-size:12.5px; color:#7a7267; flex-wrap:wrap; gap:10px;}

/* ===== INNER PAGE ADDITIONS ===== */

/* Stats row (About) */
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.stat-card{padding:30px 20px; border:1px solid #ece4d8; border-radius:6px;}
.stat-card .num{font-family:var(--head); font-size:40px; font-weight:700; color:var(--rust);}
.stat-card .label{font-size:13.5px; color:var(--ink-soft); margin-top:6px;}

/* Timeline (About) */
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:54px;}
.timeline-card{position:relative; padding-top:28px;}
.timeline-card .dot{width:14px; height:14px; border-radius:50%; background:var(--rust); margin-bottom:14px;}
.timeline-card .year{font-family:var(--head); font-weight:700; font-size:15px; color:var(--rust); margin-bottom:6px;}
.timeline-card h3{font-size:16px; margin-bottom:6px;}
.timeline-card p{color:var(--ink-soft); font-size:13.5px; margin:0;}

/* Product grid (Leather Creations) */
.filter-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:50px;}
.filter-pill{
  padding:9px 20px; border:1px solid var(--ink); border-radius:999px; font-size:13px; font-weight:600;
  cursor:pointer; background:#fff; transition:all .2s ease;
}
.filter-pill.active, .filter-pill:hover{background:var(--ink); color:#fff;}
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.product-card{border:1px solid #ece4d8; border-radius:6px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;}
.product-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(20,13,9,.1);}
.product-card .img-wrap{aspect-ratio:1; overflow:hidden;}
.product-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.product-card:hover img{transform:scale(1.06);}
.product-body{padding:22px 22px 26px;}
.product-body .cat{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--rust); font-weight:600; margin-bottom:8px; display:block;}
.product-body h3{font-size:18px; margin-bottom:8px;}
.product-body p{color:var(--ink-soft); font-size:13.5px; margin:0 0 16px;}
.product-body .row{display:flex; justify-content:space-between; align-items:center;}
.product-body .price{font-family:var(--head); font-weight:700; font-size:16px; color:var(--ink);}

/* Gallery page masonry (legacy, kept for compatibility) */
.masonry{columns:4 220px; column-gap:18px;}
.masonry img{width:100%; border-radius:6px; margin-bottom:18px; break-inside:avoid; transition:transform .35s ease, filter .35s ease; cursor:pointer;}
.masonry img:hover{transform:scale(1.015); filter:brightness(1.05);}
.masonry-dark{background:#fff; padding:100px 0;}
.masonry-dark .section-head h2{color:var(--ink);}
.masonry-dark .section-head p{color:var(--ink-soft);}
.masonry-dark .eyebrow{color:var(--rust);}

/* Gallery page — editorial bento grid */
.bento-grid{
  display:grid;
  grid-auto-flow:dense;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:170px;
  gap:18px;
}
.bento-item{
  position:relative; border-radius:8px; overflow:hidden; cursor:pointer;
  background:var(--brown-dark);
}
.bento-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.bento-item:hover img{transform:scale(1.06);}
.bento-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,6,3,.82) 0%, rgba(10,6,3,0) 45%);
  opacity:0; transition:opacity .3s ease;
}
.bento-item:hover::after{opacity:1;}
.bento-caption{
  position:absolute; left:18px; right:18px; bottom:-14px; z-index:1;
  opacity:0; transition:all .3s ease;
}
.bento-item:hover .bento-caption{opacity:1; bottom:16px;}
.bento-caption .tag{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--rust); font-weight:600; display:block; margin-bottom:4px;}
.bento-caption h3{font-size:15px; color:#fff;}
.bento-item.b-xl{grid-column:span 2; grid-row:span 2;}
.bento-item.b-wide{grid-column:span 2;}
.bento-item.b-tall{grid-row:span 2;}

@media (max-width: 900px){
  .bento-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .bento-item.b-xl{grid-column:span 2; grid-row:span 2;}
}
@media (max-width: 560px){
  .bento-grid{grid-template-columns:1fr; grid-auto-rows:220px;}
  .bento-item.b-xl, .bento-item.b-wide{grid-column:span 1;}
}

/* lightbox */
.lightbox{position:fixed; inset:0; background:rgba(10,7,5,.92); z-index:200; display:none; align-items:center; justify-content:center; padding:40px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:85vh; border-radius:6px;}
.lightbox .close{position:absolute; top:28px; right:36px; color:#fff; font-size:32px; cursor:pointer; background:none; border:none;}

/* Contact page */
.contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start;}
.contact-info-card{display:flex; gap:18px; padding:24px; border:1px solid #ece4d8; border-radius:6px; margin-bottom:18px;}
.contact-info-card .ic{
  width:44px; height:44px; border-radius:50%; background:rgba(201,108,19,.12); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.contact-info-card .ic svg{width:20px; height:20px; stroke:var(--rust); fill:none;}
.contact-info-card h3{font-size:15px; margin-bottom:4px;}
.contact-info-card p, .contact-info-card a{color:var(--ink-soft); font-size:14px; margin:0;}

.contact-form-col{position:sticky; top:calc(var(--headerh) + 24px);}
.contact-form-card{
  background:var(--cream); border:1px solid #ece0cd; border-radius:10px;
  padding:44px; box-shadow:0 30px 60px rgba(20,13,9,.06);
}
.contact-form-card h3{font-size:20px; margin-bottom:8px;}
.contact-form-card .sub{color:var(--ink-soft); font-size:14px; margin-bottom:28px;}
.contact-form{display:grid; gap:22px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.contact-form label{font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); display:block; margin-bottom:8px;}
.contact-form input, .contact-form textarea{
  width:100%; padding:16px 16px; border:1px solid #ddd2c2; border-radius:5px; font-family:var(--sans); font-size:14.5px;
  background:#fff; color:var(--ink);
}
.contact-form textarea{resize:vertical; min-height:200px;}
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--rust); outline-offset:1px;}
.contact-form .btn{padding:16px 32px; font-size:14.5px;}
.faq-item{border-bottom:1px solid #ece4d8; padding:22px 0;}
.faq-item h3{font-size:16px; margin-bottom:8px;}
.faq-item p{color:var(--ink-soft); font-size:14px; margin:0;}

@media (max-width: 900px){
  .contact-form-col{position:static;}
}

@media (max-width: 900px){
  .navlinks{display:none;}
  .menu-toggle{display:block;}
  .about-grid, .meet, .footer-grid, .contact-grid{grid-template-columns:1fr;}
  .cards, .why-grid, .process-grid, .stats-row, .timeline, .product-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .cards, .why-grid, .process-grid, .stats-row, .timeline, .product-grid{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .hero-content p{max-width:none;}
  .masonry{columns:2 150px;}
}