/* ═══════════════════════════════════════════════════════════
   MAASAHEB MASALE — Ultra Premium · Piano Black · Metallic Gold
   ═══════════════════════════════════════════════════════════ */

/* ── Metallic gold gradient ──────────────────────────────── */
:root {
  --B:   #000000;   /* pure piano black     */
  --B2:  #080808;
  --B3:  #111111;
  --B4:  #1a1a1a;
  --W:   #ffffff;   /* pure white           */
  --W2:  #e8e0d6;   /* warm white           */
  --W3:  #b8b0a4;   /* mid                  */
  --W4:  #7a7268;   /* muted                */

  /* Metallic gold — 6 stops */
  --G1:  #5c4208;
  --G2:  #a07010;
  --G3:  #c8941e;
  --G4:  #e8b830;
  --G5:  #f8d870;
  --G6:  #fff4c8;

  --GOLD: linear-gradient(105deg,
    var(--G1)  0%,
    var(--G2) 12%,
    var(--G4) 28%,
    var(--G6) 45%,
    var(--G5) 52%,
    var(--G4) 62%,
    var(--G2) 80%,
    var(--G1) 100%
  );

  --LINE: rgba(200,148,30,.2);
  --LINE2: rgba(248,216,112,.35);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Manrope', system-ui, sans-serif;
  --PAD:   clamp(1.6rem, 5.5vw, 7rem);
  --EASE:  cubic-bezier(.22,1,.36,1);
}

/* ── Shimmer keyframe (shared) ───────────────────────────── */
@keyframes SHIMMER {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes LOADBAR { to { width: 100%; } }
@keyframes TICK    { to { transform: translateX(-50%); } }
@keyframes PULSE   { 0%,100%{box-shadow:0 0 0 0 rgba(62,219,114,.6)}70%{box-shadow:0 0 0 10px rgba(62,219,114,0)} }
@keyframes SCROLLBAR { to { top: 150%; } }
@keyframes GRAIN   { 0%,100%{transform:translate(0,0)}33%{transform:translate(-3px,2px)}66%{transform:translate(2px,-3px)} }

/* ── Gold text mixin ─────────────────────────────────────── */
.g-text, .g-text * {
  background: var(--GOLD); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: SHIMMER 6s ease-in-out infinite;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body {
  background: var(--B);
  color: var(--W2);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
}
img  { display:block; max-width:100%; height:auto; }
a    { color:inherit; text-decoration:none; }
button { cursor:none; font-family:inherit; }
::selection { background:var(--G4); color:#000; }
em { font-style:italic; }

/* Grain overlay */
body::after {
  content:''; position:fixed; inset:0; z-index:9900;
  pointer-events:none; opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: GRAIN 8s steps(3) infinite;
}

/* ── Shared typography ───────────────────────────────────── */
.sec-title {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 6vw, 6rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--W);
}
/* italic em inside headings: static warm gold, no animation */
.sec-title em {
  font-style: italic;
  color: var(--G4);
  -webkit-text-fill-color: var(--G4);
}
.eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font-size: .66rem; font-weight: 600;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--G3); margin-bottom: 1.4rem;
}
.h-line {
  display:inline-block; width:36px; height:1px; flex-shrink:0;
  background: var(--G3);
}
.body {
  color: var(--W3);
  font-size: clamp(.96rem,1.4vw,1.08rem);
  line-height: 1.8; max-width: 56ch;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-pri {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:1rem 2.4rem; border-radius:100px;
  font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  background: var(--GOLD); background-size:300% 100%;
  color:#080500;
  box-shadow: 0 0 0 1px rgba(248,216,112,.3), 0 12px 40px -12px rgba(200,148,30,.6);
  animation: SHIMMER 5s ease-in-out infinite;
  transition: transform .3s var(--EASE), box-shadow .3s var(--EASE);
  border:none; cursor:none;
}
.btn-pri:hover {
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(248,216,112,.6), 0 20px 50px -12px rgba(200,148,30,.85);
}
.btn-sec {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:1rem 2.4rem; border-radius:100px;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  background:transparent; color:var(--W);
  border:1px solid rgba(255,255,255,.25);
  transition:all .3s var(--EASE); cursor:none;
}
.btn-sec:hover { border-color:var(--G4); color:var(--G5); transform:translateY(-3px); }
.btn-full { width:100%; justify-content:center; }

/* ── Layout ──────────────────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 var(--PAD); }

/* ── Cursor ──────────────────────────────────────────────── */
#cur,#cur2 { position:fixed; border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); }
#cur { width:36px; height:36px; border:1.5px solid rgba(255,255,255,.3); transition:width .4s var(--EASE),height .4s var(--EASE),border-color .4s,background .4s; }
#cur.h { width:72px; height:72px; border-color:var(--G4); background:rgba(200,148,30,.06); }
#cur2 { width:5px; height:5px; background:var(--G4); }
@media(hover:none){#cur,#cur2{display:none}body,button{cursor:auto}}

/* ── Loader ──────────────────────────────────────────────── */
.loader {
  position:fixed; inset:0; z-index:10000; background:var(--B);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--EASE),visibility .7s;
}
.loader.out { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s var(--EASE),visibility .5s; }
.loader-inner { text-align:center; }
.loader-logo-img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  border-radius: 50%;
  margin-bottom: .4rem;
  filter: drop-shadow(0 0 24px rgba(200,148,30,.5));
}
.loader-brand { font-size:.62rem; letter-spacing:.56em; color:var(--W4); margin:.8rem 0 2rem; }
.loader-line  { width:110px; height:1px; background:rgba(255,255,255,.08); margin:0 auto; overflow:hidden; }
.loader-line span { display:block; height:100%; width:0; background:var(--GOLD); background-size:300% 100%; animation:LOADBAR .9s var(--EASE) forwards, SHIMMER 3s ease-in-out infinite; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  position:fixed; inset:0 0 auto; z-index:500;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.6rem var(--PAD);
  transition:padding .4s var(--EASE),background .4s,backdrop-filter .4s;
}
.nav.on {
  padding:.9rem var(--PAD);
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--LINE);
}
.nav-brand { display:flex; align-items:center; gap:.65rem; font-family:var(--serif); font-size:1.1rem; color:var(--W); white-space:nowrap; }
/* real logo image in nav */
.nav-logo-img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(200,148,30,.4));
  transition: filter .3s;
}
.nav-brand:hover .nav-logo-img { filter: drop-shadow(0 4px 14px rgba(200,148,30,.7)); }
.nav-brand__name { color: var(--W); }
.nav-brand__name em { font-style:normal; color: var(--G4); }
.nav-mid { display:flex; gap:2rem; }
.nav-mid a {
  font-size:.76rem; font-weight:500; letter-spacing:.07em;
  color:var(--W3); position:relative; padding-bottom:3px; transition:color .3s;
}
.nav-mid a::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--G4); transition:width .3s var(--EASE); }
.nav-mid a:hover { color:var(--W); }
.nav-mid a:hover::after { width:100%; }
.nav-order {
  font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  padding:.72rem 1.7rem; border-radius:100px;
  background:var(--GOLD); background-size:300% 100%; color:#080500;
  box-shadow:0 0 0 1px rgba(248,216,112,.25);
  animation:SHIMMER 5s ease-in-out infinite;
  transition:transform .3s,box-shadow .3s; white-space:nowrap;
}
.nav-order:hover { transform:translateY(-2px); box-shadow:0 0 0 1px rgba(248,216,112,.6),0 10px 30px -8px rgba(200,148,30,.75); }
.nav-ham { display:none; flex-direction:column; gap:5px; background:none; border:none; }
.nav-ham span { display:block; width:24px; height:1.5px; background:var(--W); border-radius:2px; transition:.3s; }

/* Mobile nav */
.m-nav { position:fixed; inset:0; z-index:490; background:var(--B2); display:flex; flex-direction:column; align-items:center; justify-content:center; transform:translateX(100%); transition:transform .5s var(--EASE); }
.m-nav.open { transform:none; }
.m-nav-close { position:absolute; top:1.6rem; right:var(--PAD); font-size:1.5rem; color:var(--W4); background:none; border:none; }
.m-nav nav { display:flex; flex-direction:column; align-items:center; gap:2rem; }
.m-nav a { font-family:var(--serif); font-size:2.5rem; color:var(--W); transition:color .3s; }
.m-nav a:hover { color:var(--G4); }

/* ═══ HERO ══════════════════════════════════════════════════ */
.hero { position:relative; height:100vh; min-height:680px; display:flex; align-items:flex-end; overflow:hidden; }
/* ensure hero-body never climbs behind the fixed nav */
.hero-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-scrim {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(110deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 38%,transparent 66%),
    linear-gradient(180deg,rgba(0,0,0,.22) 0%,transparent 20%,transparent 55%,rgba(0,0,0,.98) 100%);
}
.hero-body {
  position:relative; z-index:2;
  padding:clamp(5rem,8vh,7rem) var(--PAD) clamp(5rem,9vh,8rem);
  max-width:1100px;
  width:100%;
  /* padding-top keeps the eyebrow clear of the fixed nav */
}
.hero-loc {
  display:flex; align-items:center; gap:.9rem;
  font-size:.64rem; font-weight:600; letter-spacing:.38em; text-transform:uppercase;
  color:var(--G4); margin-bottom:2.2rem;
  position:relative; z-index:3;
}
.hero-h {
  font-family:var(--serif);
  font-size:clamp(3.6rem,9.5vw,9.5rem);
  font-weight:400;
  line-height:.93;
  letter-spacing:-.03em;
  color:var(--W);
  margin-bottom:2.4rem;
}
.hero-h em {
  display:block; font-style:italic;
  background:linear-gradient(105deg, var(--G2) 0%, var(--G4) 30%, var(--G6) 50%, var(--G4) 70%, var(--G2) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:SHIMMER 5s ease-in-out infinite;  /* hero title gold — premium signature */
}
.hero-h span { display:block; }
.hero-tag { color:rgba(255,255,255,.75); font-size:clamp(1rem,1.4vw,1.18rem); margin-bottom:2.8rem; font-weight:300; letter-spacing:.03em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; }

.hero-meta {
  position:absolute; right:var(--PAD); bottom:clamp(5rem,8vh,7rem); z-index:2;
  display:flex; flex-direction:column; gap:1.8rem;
  text-align:right;
}
.hero-meta__item {
  font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:400;
  color:var(--W); line-height:1;
}
.hero-meta__item span {
  display:block; font-family:var(--sans);
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--W4);
  margin-top:.3rem;
}

.hero-scroll-cue {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--W4);
}
.hero-scroll-cue__bar { width:1px; height:46px; background:linear-gradient(var(--G4),transparent); position:relative; overflow:hidden; }
.hero-scroll-cue__bar::after { content:''; position:absolute; top:-100%; left:0; width:100%; height:50%; background:var(--G5); animation:SCROLLBAR 1.9s ease-in-out infinite; }

/* hero text — CSS-only, no JS needed */
.reveal-hero { opacity:0; transform:translateY(28px); }
.reveal-hero:nth-child(1) { animation:showHero .8s var(--EASE) .25s forwards; }
.reveal-hero:nth-child(2) { animation:showHero .9s var(--EASE) .4s forwards; }
.reveal-hero:nth-child(3) { animation:showHero .8s var(--EASE) .55s forwards; }
.reveal-hero:nth-child(4) { animation:showHero .8s var(--EASE) .7s forwards; }
@keyframes showHero { to { opacity:1; transform:none; } }

/* ═══ TICKER ════════════════════════════════════════════════ */
.ticker { overflow:hidden; background:var(--B2); border-top:1px solid var(--LINE); border-bottom:1px solid var(--LINE); padding:1.2rem 0; }
.ticker-track {
  display:flex; align-items:center; gap:2rem; white-space:nowrap; width:max-content;
  font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.5rem); font-style:italic; color:var(--W);
  animation:TICK 34s linear infinite;
}
.ticker-track b {
  font-style:normal; font-size:.7em; color:var(--G4);
}

/* ═══ MANIFESTO ═════════════════════════════════════════════ */
.manifesto {
  background:var(--B); padding:clamp(7rem,14vw,14rem) var(--PAD);
  display:flex; justify-content:center;
  position:relative;
}
.manifesto::before,
.manifesto::after {
  content:''; position:absolute; left:var(--PAD); right:var(--PAD); height:1px;
  background:linear-gradient(90deg,transparent,var(--G3),transparent);
}
.manifesto::before { top:0; }
.manifesto::after  { bottom:0; }
.manifesto-inner { max-width:1000px; width:100%; }
.manifesto-num {
  font-family:var(--serif); font-size:1rem; letter-spacing:.2em;
  color:var(--G3); margin-bottom:2rem;
}
.manifesto-q {
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.8rem,7vw,7.5rem);
  line-height:.96; letter-spacing:-.025em;
  color:var(--W);
  border:none; quotes:none;
  max-width:20ch;
}
.manifesto-q em {
  font-style:italic;
  color:var(--G4);
}
.manifesto-sub {
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--W4);
  margin-top:2.6rem;
}

/* ═══ PRODUCTS ══════════════════════════════════════════════ */
.products { background:var(--B); padding:0 0 clamp(6rem,10vw,10rem); }

.products-header {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,4rem); align-items:end;
  padding:clamp(5rem,8vw,8rem) var(--PAD) clamp(4rem,6vw,6rem);
  border-bottom:1px solid var(--LINE);
}
.products-header__left .sec-title { margin:.5rem 0 0; }
.products-header__right { color:var(--W3); font-size:clamp(1rem,1.4vw,1.1rem); max-width:50ch; padding-bottom:.5rem; line-height:1.8; }

/* editorial alternating rows */
.prod-row {
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid rgba(255,255,255,.06);
  min-height:62vh;
}
.prod-row--rev { direction:rtl; }
.prod-row--rev > * { direction:ltr; }
.prod-row__img {
  position:relative; overflow:hidden;
  min-height:580px;
}
.prod-row__img img { width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--EASE); display:block; }
.prod-row:hover .prod-row__img img { transform:scale(1.05); }
.prod-row__badge {
  position:absolute; top:2rem; left:2rem; z-index:2;
  font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:.46rem 1rem; border-radius:100px; display:flex; align-items:center; gap:.5rem;
  backdrop-filter:blur(12px);
}
.prod-row__badge.in-stock {
  background:rgba(0,0,0,.75);
  border:1px solid rgba(248,216,112,.35); color:var(--G5);
}
.prod-row__badge.in-stock::before { content:''; width:6px; height:6px; border-radius:50%; background:#3edb72; box-shadow:0 0 8px #3edb72; animation:PULSE 2s infinite; }
.prod-row__badge.made-to-order {
  background:rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.2); color:var(--W3);
}
.prod-row__body {
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3.5rem,6vw,7rem) clamp(3rem,5.5vw,7rem);
  background:var(--B2);
}
.prod-num {
  font-family:var(--serif); font-size:clamp(3.5rem,7vw,8rem); font-weight:300; line-height:1;
  color:var(--G3); opacity:.3; margin-bottom:1.6rem;
}
.prod-row__body h3 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,4vw,3.4rem); line-height:1.06;
  color:var(--W); margin-bottom:1.4rem;
}
.prod-row__body h3 em {
  display:block; font-style:italic; font-size:.55em;
  color:var(--G4); -webkit-text-fill-color:var(--G4);
}
.prod-desc { color:var(--W3); font-size:clamp(.92rem,1.2vw,1rem); line-height:1.78; max-width:48ch; margin-bottom:2rem; }
.prod-tags { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.4rem; }
.prod-tags span { font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--G4); border:1px solid var(--LINE); border-radius:100px; padding:.45rem 1rem; }

/* ═══ CRAFT VIDEO ═══════════════════════════════════════════ */
.craft { position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.craft-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.craft-scrim {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.24) 30%,rgba(0,0,0,.24) 66%,rgba(0,0,0,.9) 100%);
}
.craft-text { position:relative; z-index:2; max-width:780px; padding:var(--PAD); }
.craft-text .sec-title { font-size:clamp(3rem,7vw,6.5rem); }

/* ═══ PROCESS ═══════════════════════════════════════════════ */
.process { background:var(--B2); padding:clamp(6rem,11vw,11rem) var(--PAD); }
.process-head { max-width:640px; margin-bottom:clamp(3.5rem,6vw,6rem); }
.process-head .sec-title { margin:.6rem 0 0; }
.process-list { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--LINE); border-radius:16px; overflow:hidden; margin-bottom:clamp(2.5rem,4vw,4rem); }
.process-item {
  display:flex; gap:1.4rem; padding:clamp(1.8rem,2.8vw,2.6rem);
  border-right:1px solid var(--LINE); border-bottom:1px solid var(--LINE);
  background:var(--B2); position:relative; overflow:hidden;
  transition:background .4s var(--EASE);
}
.process-item:nth-child(3n)  { border-right:none; }
.process-item:nth-last-child(-n+3) { border-bottom:none; }
.process-item::before { content:''; position:absolute; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg, var(--G3), var(--G5), var(--G3)); transition:width .5s var(--EASE); }
.process-item:hover { background:var(--B3); }
.process-item:hover::before { width:100%; }
.process-item__n {
  font-family:var(--serif); font-size:2.2rem; line-height:1; flex-shrink:0;
  color:var(--G3); opacity:.5;
}
.process-item h3 { font-family:var(--serif); font-size:1.35rem; font-weight:500; color:var(--W); margin-bottom:.6rem; }
.process-item p  { color:var(--W4); font-size:.9rem; line-height:1.65; }
.process-gallery { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.process-fig { border-radius:14px; overflow:hidden; position:relative; aspect-ratio:16/10; }
.process-fig img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--EASE); }
.process-fig:hover img { transform:scale(1.05); }
.process-fig::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 50%,rgba(0,0,0,.7)); }
.process-fig figcaption { position:absolute; bottom:1rem; left:1.2rem; z-index:2; font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--W); text-shadow:0 2px 12px rgba(0,0,0,.9); }

/* ═══ HERITAGE ══════════════════════════════════════════════ */
.heritage {
  background:var(--B); display:grid; grid-template-columns:1fr 1fr;
  min-height:80vh; border-top:1px solid var(--LINE); border-bottom:1px solid var(--LINE);
}
.heritage-img-wrap { position:relative; overflow:hidden; }
.heritage-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.6s var(--EASE); }
.heritage:hover .heritage-img-wrap img { transform:scale(1.04); }
.heritage-img-wrap__overlay { position:absolute; inset:0; background:linear-gradient(transparent 40%,rgba(0,0,0,.72)); }
.heritage-img-wrap__cap { position:absolute; bottom:2rem; left:2rem; z-index:2; font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--W); text-shadow:0 4px 20px rgba(0,0,0,.9); }
.heritage-copy {
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(4rem,7vw,8rem) clamp(3rem,5vw,7rem);
  background:var(--B);
}
.heritage-copy .sec-title { margin:.6rem 0 1.8rem; }
.heritage-copy .body { color:var(--W3); margin-bottom:1rem; }
.heritage-copy .btn-pri { margin-top:2.6rem; align-self:flex-start; }

/* ═══ NUMBERS ═══════════════════════════════════════════════ */
.numbers { background:var(--B2); border-top:1px solid var(--LINE); }
.numbers-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--LINE); }
.number-item {
  background:var(--B2); padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3vw,3rem);
  text-align:center; transition:background .4s var(--EASE);
}
.number-item:hover { background:var(--B3); }
.number-item__n {
  font-family:var(--serif); font-size:clamp(2.8rem,5.5vw,5.5rem); font-weight:300; line-height:1; margin-bottom:.7rem;
  background:var(--GOLD); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:SHIMMER 5s ease-in-out infinite;  /* shimmer ONLY here — signature moment */
}
.number-item__l { font-size:.78rem; letter-spacing:.06em; color:var(--W4); max-width:18ch; margin:0 auto; line-height:1.5; }

/* ═══ MADE TO ORDER ═════════════════════════════════════════ */
.mto {
  background:var(--B); display:grid; grid-template-columns:1fr 1fr;
  min-height:80vh; border-bottom:1px solid var(--LINE);
}
.mto-img { overflow:hidden; position:relative; }
.mto-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 14s ease-in-out; }
.mto-img:hover img { transform:scale(1.06); }
.mto-copy {
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(4rem,7vw,8rem) clamp(3rem,5vw,7rem);
}
.mto-copy .sec-title { margin:.6rem 0 1.6rem; }
.mto-list { list-style:none; margin:2rem 0; }
.mto-list li { padding:.95rem 0 .95rem 2rem; border-bottom:1px solid var(--LINE); color:var(--W); font-size:.97rem; position:relative; transition:color .3s; }
.mto-list li::before { content:''; position:absolute; left:0; top:1.35rem; width:8px; height:8px; border-radius:50%; background:var(--G4); }
.mto-list li:hover { color:var(--G5); }

/* ═══ EXPORTS ═══════════════════════════════════════════════ */
.exports { background:var(--B2); padding:clamp(6rem,11vw,11rem) var(--PAD); }
.exports-head { max-width:740px; margin:0 auto clamp(4rem,7vw,7rem); }
.exports-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.exp-col {
  border:1px solid var(--LINE); border-radius:16px; padding:2.6rem;
  background:var(--B); position:relative; overflow:hidden;
  transition:transform .5s var(--EASE),border-color .5s,box-shadow .5s;
}
.exp-col::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--G4),transparent); opacity:0; transition:opacity .4s; }
.exp-col:hover { transform:translateY(-8px); border-color:rgba(248,216,112,.35); box-shadow:0 30px 70px -20px rgba(0,0,0,.9); }
.exp-col:hover::before { opacity:1; }
.exp-col__icon { width:48px; height:48px; margin-bottom:1.8rem; }
.exp-col__icon svg { width:100%; height:100%; stroke:var(--G4); }
.exp-col h3 { font-family:var(--serif); font-size:1.65rem; font-weight:400; color:var(--W); margin-bottom:.8rem; }
.exp-col p  { color:var(--W4); font-size:.92rem; line-height:1.68; }

/* ═══ STORY ═════════════════════════════════════════════════ */
.story { position:relative; padding:clamp(5rem,9vw,9rem) var(--PAD) clamp(7rem,12vw,12rem); overflow:hidden; }
.story-bg { position:absolute; inset:0; background:url('../assets/process-grinding.png') center/cover no-repeat; opacity:.06; filter:grayscale(.3); }
.story::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 120% 120% at 50% 50%,rgba(0,0,0,.2) 0%,var(--B) 75%); }

/* portrait photo above the story text */
.story-portrait {
  position:relative; z-index:1;
  max-width:780px; margin:0 auto clamp(3.5rem,5vw,5rem);
  border-radius:18px; overflow:hidden;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.9), 0 0 0 1px var(--LINE);
  aspect-ratio:16/10;
}
.story-portrait img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block;
  transition:transform 1.6s var(--EASE);
}
.story-portrait:hover img { transform:scale(1.04); }
.story-portrait__vignette {
  position:absolute; inset:0;
  background:
    linear-gradient(transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(rgba(0,0,0,.1) 0%, transparent 20%);
}

.story-inner { position:relative; z-index:1; max-width:1040px; margin:0 auto; text-align:center; }
.story-mark {
  font-family:var(--serif); font-size:clamp(6rem,15vw,14rem); line-height:.7;
  color:var(--G3); opacity:.3;
  margin-bottom:-.5rem;
}
.story-q {
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.8rem); line-height:1.46; color:var(--W);
  margin:.8rem 0 2.4rem; border:none;
}
.story-sign { font-size:.67rem; letter-spacing:.34em; text-transform:uppercase; color:var(--G4); }

/* ═══ ABOUT SECTION ════════════════════════════════════════ */
.about-section {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:80vh; border-top:1px solid var(--LINE); border-bottom:1px solid var(--LINE);
  background:var(--B);
}
.about-section__img {
  position:relative; overflow:hidden;
}
.about-section__img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.6s var(--EASE);
}
.about-section:hover .about-section__img img { transform:scale(1.04); }
.about-section__img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right, transparent 60%, var(--B) 100%),
             linear-gradient(transparent 50%, rgba(0,0,0,.5) 100%);
}
.about-section__copy {
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(4rem,7vw,8rem) clamp(3rem,5vw,7rem);
  background:var(--B);
}
.about-section__copy .sec-title { margin:.6rem 0 1.8rem; }
.about-section__copy .body { color:var(--W3); margin-bottom:1rem; max-width:50ch; }
.about-chips {
  display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.4rem;
}
.about-chips span {
  font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--G4); border:1px solid var(--LINE); border-radius:100px; padding:.55rem 1.2rem;
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.about-chips span:hover {
  background:var(--G4); color:#080500;
  border-color:var(--G4); transform:translateY(-2px);
}

/* ═══ CONTACT ═══════════════════════════════════════════════ */
.contact { background:var(--B); padding:clamp(6rem,11vw,11rem) var(--PAD); }
.contact-inner { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(4rem,7vw,8rem); max-width:1200px; margin:0 auto; }
.contact-left .sec-title { margin:.6rem 0 1.6rem; }
.contact-left .body { color:var(--W3); margin-bottom:3rem; }
.contact-details { display:grid; grid-template-columns:1fr 1fr; gap:1.8rem 2.4rem; }
.contact-details > div strong { display:block; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--G4); font-weight:600; margin-bottom:.55rem; }
.contact-details > div p { color:var(--W2); font-size:.95rem; line-height:1.7; }
.contact-link { color:var(--W); transition:color .3s; }
.contact-link:hover { color:var(--G4); }
.wa-link { color:#25d366 !important; display:inline-flex; align-items:center; }
.wa-link:hover { color:#20b958 !important; }
.ig-link { color:var(--W); display:inline-flex; align-items:center; }
.ig-link:hover { color:#e1306c !important; }

/* form */
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-content:start; }
.f-field { position:relative; }
.f-wide { grid-column:1/-1; }
.f-field input, .f-field textarea {
  width:100%; background:rgba(255,255,255,.03); border:1px solid var(--LINE);
  border-radius:12px; padding:1.4rem 1.1rem .65rem; color:var(--W);
  font-family:var(--sans); font-size:.97rem; font-weight:300; resize:vertical;
  transition:border-color .3s,background .3s; -webkit-appearance:none;
}
.f-field textarea { padding-top:1.55rem; min-height:120px; }
.f-field label { position:absolute; left:1.1rem; top:1rem; color:var(--W4); font-size:.92rem; pointer-events:none; transition:all .25s var(--EASE); }
.f-field input:focus, .f-field textarea:focus { outline:none; border-color:var(--G4); background:rgba(255,255,255,.05); }
.f-field input:focus + label,
.f-field input:not(:placeholder-shown) + label,
.f-field textarea:focus + label,
.f-field textarea:not(:placeholder-shown) + label { top:.4rem; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--G4); }
.f-wide .btn-pri { width:100%; justify-content:center; margin-top:.4rem; }
.f-note { font-size:.85rem; min-height:1.1rem; margin-top:.8rem; text-align:center; }

/* ═══ FOOTER ════════════════════════════════════════════════ */
.footer {
  border-top: 2px solid var(--LINE2);
  padding: clamp(3rem,5vw,5rem) var(--PAD) 0;
  background: var(--B2);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: clamp(2rem,4vw,4rem);
  padding-bottom: clamp(2.5rem,4vw,4rem);
  border-bottom: 1px solid var(--LINE);
}
.footer-brand { display:flex; align-items:flex-start; gap:1rem; }
.footer-logo-img { width:52px; height:52px; object-fit:contain; border-radius:50%; filter:drop-shadow(0 4px 14px rgba(200,148,30,.5)); flex-shrink:0; }
.footer-brand__text { display:flex; flex-direction:column; gap:.3rem; }
.footer-brand__name { font-family:var(--serif); font-size:1.25rem; color:var(--W); font-weight:400; }
.footer-brand__tag { font-size:.7rem; color:var(--G3); letter-spacing:.1em; }

.footer-nav { display:flex; flex-direction:column; gap:.85rem; }
.footer-nav a { font-size:.84rem; color:var(--W3); transition:color .3s, transform .3s; display:inline-block; }
.footer-nav a:hover { color:var(--G4); transform:translateX(4px); }

.footer-right { display:flex; flex-direction:column; gap:1rem; }
.footer-phone { font-family:var(--serif); font-size:1.4rem; color:var(--W); font-weight:400; transition:color .3s; }
.footer-phone:hover { color:var(--G4); }
.footer-email { font-size:.82rem; color:var(--W3); transition:color .3s; word-break:break-all; }
.footer-email:hover { color:var(--G4); }
.footer-contact-line { margin:0; }

/* Social icons */
.footer-social { display:flex; gap:.8rem; margin-top:.4rem; flex-wrap:wrap; }
.soc-icon {
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1.1rem;
  border:1px solid var(--LINE2);
  border-radius:100px;
  font-size:.72rem; font-weight:600; letter-spacing:.08em;
  color:var(--W2);
  transition:all .3s var(--EASE);
}
.soc-icon svg { width:16px; height:16px; flex-shrink:0; }
.soc-icon:hover { color:var(--B); border-color:var(--G4); background:var(--G4); }

.footer-bottom {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem;
  font-size:.76rem; color:var(--W3);
  padding:1.4rem 0;
}

/* ═══ LIVE DOT ══════════════════════════════════════════════ */
.live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#3edb72; box-shadow:0 0 0 0 rgba(62,219,114,.5); animation:PULSE 2s infinite; }

/* ═══ REVEAL ════════════════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .75s var(--EASE),transform .75s var(--EASE); }
.reveal.vis { opacity:1; transform:none; }

/* ═══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width:1200px) {
  .footer-top { grid-template-columns:1fr 1fr; }
  .footer-right { grid-column:1/-1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:1.6rem; }
  .footer-social { margin-top:0; }
}
@media (max-width:1000px) {
  .prod-row, .heritage, .mto, .contact-inner, .about-section { grid-template-columns:1fr; }
  .about-section__img { aspect-ratio:16/10; }
  .prod-row--rev { direction:ltr; }
  .prod-row__img { min-height:56vw; }
  .heritage-img-wrap { aspect-ratio:16/10; }
  .mto-img { aspect-ratio:16/10; }
  .products-header { grid-template-columns:1fr; }
  .numbers-grid { grid-template-columns:repeat(2,1fr); }
  .exports-cols { grid-template-columns:1fr 1fr; }
  .process-list { grid-template-columns:repeat(2,1fr); }
  .process-gallery { grid-template-columns:1fr; }
  .contact-inner { gap:clamp(2.5rem,5vw,4rem); }
}
@media (max-width:720px) {
  :root { --PAD:1.4rem; }
  .nav-mid, .nav-order { display:none; }
  .nav-ham { display:flex; }
  .hero-meta { display:none; }
  .hero-h { font-size:clamp(2.8rem,13vw,5.5rem); line-height:.95; }
  .hero-body { padding:clamp(4.5rem,8vh,6rem) var(--PAD) clamp(3rem,5vh,5rem); }
  .manifesto-q { font-size:clamp(2rem,9vw,4rem); }
  .sec-title { font-size:clamp(1.9rem,8vw,3.2rem); }
  .numbers-grid, .exports-cols, .process-list { grid-template-columns:1fr; }
  .contact-form { grid-template-columns:1fr; }
  .contact-details { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; gap:2rem; }
  .footer-right { flex-direction:column; align-items:flex-start; }
  .footer-social { flex-wrap:wrap; }
  .footer-bottom { flex-direction:column; gap:.5rem; }
  .prod-row { min-height:auto; }
  .prod-row__img { min-height:60vw; }
  .story-portrait { aspect-ratio:4/3; }
  .process-item { flex-direction:column; gap:.8rem; }
  .soc-icon span { display:none; }
  .soc-icon { padding:.7rem; border-radius:50%; }
  .soc-icon svg { width:20px; height:20px; }
}
@media (max-width:420px) {
  .hero-h { font-size:clamp(2.4rem,12vw,3.5rem); }
  .numbers-grid { grid-template-columns:1fr 1fr; }
  .footer-social { gap:.7rem; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal, .reveal-hero { opacity:1; transform:none; }
}