/* ============ MT BOX — Design System ============ */
:root{
  --ink:#0a0a0a;
  --paper:#f5f2ec;
  --paper-dim:#e8e3d9;
  --gold:#c9a24b;
  --gold-light:#e6c877;
  --line: rgba(245,242,236,0.18);
  --line-dark: rgba(10,10,10,0.12);
  --ff-serif:'Fraunces', serif;
  --ff-sans:'Manrope', sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:auto;}
body{
  font-family:var(--ff-sans);
  background:var(--ink);
  color:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--ff-serif); font-weight:450; line-height:1.05; letter-spacing:-0.01em;}
em{font-style:italic; color:var(--gold-light);}
section{position:relative;}

/* ============ Preloader ============ */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
#preloader.done{opacity:0; visibility:hidden; pointer-events:none;}
.pre-mark{width:44px; height:44px; animation:pulse 1.6s ease-in-out infinite;}
.pre-mark img{width:100%; height:100%; object-fit:contain;}
@keyframes pulse{0%,100%{opacity:.4; transform:scale(.94);}50%{opacity:1; transform:scale(1);}}
.pre-bar{width:180px; height:1px; background:var(--line); overflow:hidden;}
.pre-bar span{display:block; height:100%; width:0%; background:var(--gold); transition:width .3s linear;}

/* ============ Nav ============ */
#site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 5vw;
  transition:padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease);
}
#site-nav.scrolled{
  padding:16px 5vw;
  background:rgba(10,10,10,0.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-logo{display:flex; align-items:center; gap:10px;}
.nav-logo-img{height:30px; width:auto; display:block;}
.nav-links{display:flex; gap:34px; font-size:.85rem; letter-spacing:.02em;}
.nav-links a{opacity:.8; transition:opacity .25s;}
.nav-links a:hover{opacity:1;}
.nav-cta{
  font-size:.8rem; letter-spacing:.03em; border:1px solid var(--line);
  padding:10px 20px; border-radius:100px; transition:all .3s var(--ease);
}
.nav-cta:hover{background:var(--paper); color:var(--ink); border-color:var(--paper);}
#nav-burger{display:none; background:none; border:none; width:26px; height:18px; position:relative; cursor:pointer;}
#nav-burger span{position:absolute; left:0; right:0; height:1px; background:var(--paper); transition:all .3s;}
#nav-burger span:nth-child(1){top:0;} #nav-burger span:nth-child(2){top:8px;} #nav-burger span:nth-child(3){top:16px;}

#mobile-menu{
  position:fixed; inset:0; z-index:490; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transform:translateY(-100%); transition:transform .5s var(--ease);
  font-family:var(--ff-serif); font-size:1.6rem;
}
#mobile-menu.open{transform:translateY(0);}
.mm-cta{border:1px solid var(--line); padding:12px 26px; border-radius:100px; font-size:1rem; font-family:var(--ff-sans);}

/* ============ Hero (pinned eye-scrub) ============ */
#hero-pin{height:400vh; position:relative;}
#hero-stage{
  position:sticky; top:0; height:100vh; width:100%;
  overflow:hidden; background:#000;
  display:flex; align-items:center; justify-content:center;
}
#hero-video{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  height:100%; width:auto; max-width:none;
  filter:saturate(1.05) contrast(1.02);
}
@media(min-aspect-ratio: 9/16){
  #hero-video{ height:auto; width:100%; min-height:100%; }
}
.hero-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 22%, transparent 68%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
}
.hero-copy{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(720px, 86vw); text-align:center; z-index:2;
  padding-top:40px;
}
.hero-eyebrow{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-light); margin-bottom:18px;}
.hero-title{font-size:clamp(2.1rem, 5.2vw, 4.4rem); margin-bottom:22px; text-shadow:0 4px 30px rgba(0,0,0,.5);}
.hero-sub{font-size:clamp(.95rem, 1.3vw, 1.1rem); opacity:.85; max-width:52ch; margin:0 auto 30px; line-height:1.6;}
.hero-cta{
  display:inline-block; padding:15px 34px; background:var(--paper); color:var(--ink);
  border-radius:100px; font-size:.85rem; letter-spacing:.03em; font-weight:600;
  transition:transform .3s var(--ease), background .3s;
}
.hero-cta:hover{transform:translateY(-2px); background:var(--gold-light);}
.hero-scroll-hint{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; z-index:2;
}
.hero-scroll-line{width:1px; height:40px; background:var(--line); position:relative; overflow:hidden;}
.hero-scroll-line i{position:absolute; top:-40px; left:0; width:100%; height:100%; background:var(--gold-light); animation:scrollhint 1.8s ease-in-out infinite;}
@keyframes scrollhint{0%{top:-40px;}50%{top:0;}100%{top:40px;}}

/* ============ 3D Box Signature Moment ============ */
#box-pin{height:400vh; position:relative; background:#000;}
#box-stage{position:sticky; top:0; height:100vh; width:100%; overflow:hidden;}
#box-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.box-copy{
  position:absolute; left:7vw; top:50%; transform:translateY(-50%);
  max-width:420px; z-index:2; opacity:0;
}
.box-eyebrow{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-light); margin-bottom:16px;}
.box-title{font-size:clamp(2rem, 4vw, 3.2rem); margin-bottom:18px;}
.box-sub{opacity:.8; line-height:1.6; max-width:38ch;}

/* ============ Collection ============ */
#collection{background:var(--paper); color:var(--ink); padding:140px 0 60px;}
.section-head{padding:0 5vw 90px; max-width:900px;}
.eyebrow{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#8a7239; margin-bottom:18px;}
.eyebrow--light{color:var(--gold-light);}
.section-head h2{font-size:clamp(2rem, 4.4vw, 3.6rem); color:var(--ink);}

.cat-row{
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:6vw;
  padding:0 5vw; margin-bottom:130px;
}
.cat-row--reverse{grid-template-columns:.9fr 1.1fr;}
.cat-row--reverse .cat-text{order:2;}
.cat-row--reverse .cat-media{order:1;}
.cat-media{overflow:hidden; border-radius:4px; aspect-ratio:4/3;}
.cat-media--tall{aspect-ratio:3/4;}
.cat-media img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.2s var(--ease);}
.cat-media:hover img{transform:scale(1);}
.cat-index{font-family:var(--ff-serif); font-size:.85rem; color:var(--gold); letter-spacing:.1em;}
.cat-text h3{font-size:clamp(1.6rem, 2.6vw, 2.4rem); margin:14px 0 18px; color:var(--ink);}
.cat-text p{max-width:42ch; line-height:1.65; color:#3a362f;}

.cat-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-bottom:130px;}
.strip-item{position:relative; aspect-ratio:3/4; overflow:hidden;}
.strip-item img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease);}
.strip-item:hover img{transform:scale(1.08);}
.strip-item span{
  position:absolute; left:20px; bottom:20px; color:#fff; font-family:var(--ff-serif);
  font-size:1.1rem; text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.strip-item::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 45%);}

.cat-gallery{
  display:grid; grid-template-columns:repeat(6,1fr); gap:2px; padding:0 0;
}
.cat-gallery img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover;}

/* ============ Story ============ */
#story{background:var(--ink); padding:180px 5vw; display:flex; justify-content:center;}
.story-inner{max-width:900px; text-align:center;}
.story-quote{font-size:clamp(1.8rem, 4vw, 3.4rem); margin:24px 0 40px;}
.story-body{opacity:.75; line-height:1.75; max-width:62ch; margin:0 auto; font-size:1.05rem;}

/* ============ Custom / B2B ============ */
#custom{background:var(--paper); color:var(--ink); display:grid; grid-template-columns:1fr 1fr; align-items:stretch;}
.custom-media{overflow:hidden;}
.custom-media img{width:100%; height:100%; object-fit:cover; min-height:520px;}
.custom-text{padding:100px 6vw; display:flex; flex-direction:column; justify-content:center;}
.custom-text h2{font-size:clamp(1.9rem, 3vw, 2.8rem); margin:16px 0 22px; color:var(--ink);}
.custom-text > p{max-width:44ch; line-height:1.7; color:#3a362f; margin-bottom:26px;}
.custom-list{list-style:none; margin-bottom:36px;}
.custom-list li{padding:12px 0; border-top:1px solid var(--line-dark); color:#3a362f; position:relative; padding-left:20px;}
.custom-list li:last-child{border-bottom:1px solid var(--line-dark);}
.custom-list li::before{content:'—'; position:absolute; left:0; color:var(--gold);}
.custom-cta{font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:4px; width:fit-content; transition:opacity .3s;}
.custom-cta:hover{opacity:.6;}

/* ============ Contact ============ */
#contact{background:var(--ink); padding:160px 5vw 100px;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:8vw; max-width:1400px; margin:0 auto;}
.contact-info h2{font-size:clamp(2rem, 3.6vw, 3.2rem); margin:16px 0 44px;}
.contact-block{margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--line);}
.cb-label{display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light); margin-bottom:8px;}
.contact-block p{line-height:1.6; opacity:.9;}
.contact-block a:hover{color:var(--gold-light);}
.contact-map{margin-top:36px; border-radius:4px; overflow:hidden; border:1px solid var(--line);}
.contact-map iframe{width:100%; height:280px; border:0; filter:grayscale(.4) invert(.92) contrast(.9);}

.quote-form{background:rgba(245,242,236,.04); border:1px solid var(--line); border-radius:8px; padding:44px; height:fit-content;}
.qf-label{font-family:var(--ff-serif); font-size:1.4rem; margin-bottom:28px;}
.qf-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.quote-form label{display:block; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; opacity:.7; margin-bottom:20px;}
.quote-form input, .quote-form select, .quote-form textarea{
  display:block; width:100%; margin-top:8px; background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--paper); font-family:var(--ff-sans); font-size:.95rem; padding:8px 0; text-transform:none; letter-spacing:normal;
}
.quote-form select option{color:#000;}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{outline:none; border-color:var(--gold-light);}
.quote-form textarea{resize:vertical;}
.quote-form button{
  width:100%; padding:16px; background:var(--paper); color:var(--ink); border:none; border-radius:100px;
  font-weight:700; letter-spacing:.03em; cursor:pointer; transition:background .3s; margin-top:6px;
}
.quote-form button:hover{background:var(--gold-light);}
.qf-note{font-size:.72rem; opacity:.5; margin-top:14px; line-height:1.5; text-transform:none; letter-spacing:normal;}
.qf-success{display:none; margin-top:16px; color:var(--gold-light); font-size:.85rem;}
.qf-success.show{display:block;}

/* ============ Footer ============ */
#site-footer{background:#050505; padding:80px 5vw 30px;}
.footer-top{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line);}
.footer-logo-img{height:42px; width:auto; margin-bottom:6px;}
.footer-links{display:flex; flex-direction:column; gap:14px; font-size:.9rem; opacity:.85;}
.footer-links a:hover{color:var(--gold-light);}
.footer-contact{display:flex; flex-direction:column; gap:14px; font-size:.9rem; opacity:.85; align-items:flex-start;}
.footer-contact a:hover{color:var(--gold-light);}
.footer-bottom{padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.75rem; opacity:.45;}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  .hero-scroll-line i, .pre-mark{animation:none;}
  .cat-media img, .strip-item img{transition:none;}
}

/* ============ Responsive ============ */
@media(max-width:980px){
  .nav-links, .nav-cta{display:none;}
  #nav-burger{display:block;}
  .cat-row, .cat-row--reverse{grid-template-columns:1fr; gap:34px; margin-bottom:90px;}
  .cat-row--reverse .cat-text, .cat-row--reverse .cat-media{order:0;}
  .cat-strip{grid-template-columns:1fr; gap:16px;}
  .cat-gallery{grid-template-columns:repeat(3,1fr);}
  #custom{grid-template-columns:1fr;}
  .custom-media img{min-height:340px;}
  .contact-grid{grid-template-columns:1fr; gap:60px;}
  .footer-top{grid-template-columns:1fr; gap:30px;}
  .box-copy{left:6vw; right:6vw; max-width:none;}
}
@media(max-width:560px){
  .qf-row{grid-template-columns:1fr;}
  .cat-gallery{grid-template-columns:repeat(2,1fr);}
  .hero-title{font-size:2.1rem;}
}