/* ══════════════════════════════════════════════════════════
   LICAN MOB — atelier de mobilă la comandă
   ══════════════════════════════════════════════════════════ */

/* ── fonts ──────────────────────────────────────────────────
   Self-hosted. Both families are variable, so one file covers
   the whole weight range. latin-ext carries ă â î ș ț.
   ─────────────────────────────────────────────────────────── */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:italic;
  font-weight:300 500;
  font-display:swap;
  src:url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:italic;
  font-weight:300 500;
  font-display:swap;
  src:url("../fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Metric-matched stand-ins. Georgia/Arial are ~30% wider on screen than
   Cormorant/Inter at the same px, which is what made the text jump on first
   paint. size-adjust scales them to match, so a swap is imperceptible.
   Values measured against the real fonts — see README. */
@font-face{
  font-family:"Cormorant Fallback";
  src:local("Georgia"), local("Times New Roman");
  size-adjust:87.9%;          /* Cormorant is 0.8789× Georgia's width */
  ascent-override:104.7%;
  descent-override:33%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Inter Fallback";
  src:local("Helvetica Neue"), local("Arial");
  size-adjust:107%;           /* Inter is 1.0701× Helvetica's width */
  ascent-override:90.6%;
  descent-override:22.4%;
  line-gap-override:0%;
}

:root{
  --ink:        #080706;
  --ink-2:      #0c0a09;
  --ink-3:      #12100d;

  --cream:      #EFE7D9;
  --cream-70:   rgba(239,231,217,.70);
  --cream-45:   rgba(239,231,217,.45);
  --cream-22:   rgba(239,231,217,.22);
  --cream-10:   rgba(239,231,217,.10);

  --ember:      #C87A2E;
  --ember-lt:   #E0A050;
  --walnut:     #4A2F1E;

  /* "…Fallback" faces are metric-matched to the real ones, so the swap on
     first paint does not resize the text. Didot is deliberately NOT in this
     stack — it is much wider than Cormorant and caused a visible jump. */
  --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --sans:  "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad:   clamp(1.5rem, 5vw, 6rem);
  --ease:  cubic-bezier(.22,.61,.36,1);
  --slow:  cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,video,svg{ display:block; max-width:100%; }

::selection{ background:var(--ember); color:var(--ink); }

/* ── film grain ─────────────────────────────────────────── */
.grain{
  position:fixed; inset:-150%;
  z-index:9000;
  pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grainShift 700ms steps(4) infinite;
  will-change:transform;
}
@keyframes grainShift{
  0%  { transform:translate(0,0); }
  25% { transform:translate(-2%,1.5%); }
  50% { transform:translate(1.5%,-2%); }
  75% { transform:translate(-1%,-1%); }
  100%{ transform:translate(2%,1%); }
}

.vignette{
  position:fixed; inset:0;
  z-index:8990;
  pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,
             transparent 42%, rgba(0,0,0,.30) 78%, rgba(0,0,0,.62) 100%);
}

/* ── shared type ────────────────────────────────────────── */
.eyebrow{
  margin:0 0 1.4rem;
  font-size:.66rem;
  font-weight:400;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ember-lt);
}

.section-title{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.02;
  letter-spacing:-.012em;
}

.accent{ color:var(--ember-lt); }

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:8000;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.5rem var(--pad);
  transition:background .6s var(--ease), padding .6s var(--ease),
             border-color .6s var(--ease), backdrop-filter .6s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:.95rem var(--pad);
  background:rgba(8,7,6,.78);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--cream-10);
}

.nav__mark{
  display:flex; align-items:baseline; gap:.75rem;
  text-decoration:none; color:var(--cream);
}
.nav__mark-name{
  font-family:var(--serif);
  font-size:1.16rem;
  letter-spacing:.30em;
}
.nav__mark-sub{
  font-size:.58rem; letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--cream-45);
}
@media (max-width:640px){ .nav__mark-sub{ display:none; } }

.nav__links{ display:flex; gap:2.4rem; }
.nav__links a{
  position:relative;
  color:var(--cream-70);
  text-decoration:none;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:color .4s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:100%; height:1px; background:var(--ember);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--slow);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:900px){ .nav__links{ display:none; } }

.nav__cta{
  padding:.62rem 1.35rem;
  border:1px solid var(--cream-22);
  color:var(--cream);
  text-decoration:none;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:border-color .45s var(--ease), background .45s var(--ease),
             color .45s var(--ease);
}
.nav__cta:hover{
  border-color:var(--ember);
  background:var(--ember);
  color:var(--ink);
}

/* ══════════ 1. HERO ══════════ */
.hero{
  position:relative;
  height:340vh;              /* scroll runway for the scrub */
}
.hero__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.06);
  will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(8,7,6,.62) 0%, rgba(8,7,6,.14) 34%,
                    rgba(8,7,6,.30) 68%, rgba(8,7,6,.92) 100%),
    radial-gradient(80% 60% at 50% 55%, transparent 30%, rgba(8,7,6,.55) 100%);
}

.hero__copy{
  position:absolute;
  left:var(--pad); right:var(--pad); bottom:clamp(4rem,12vh,9rem);
  will-change:transform,opacity;
}
.hero__title{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3rem,13vw,11rem);
  line-height:.92;
  letter-spacing:.16em;
  text-indent:.16em;         /* balances the trailing letter-space */
}
.tracking-in{
  display:inline-block;
  animation:trackIn 2.6s var(--slow) .25s both;
}
@keyframes trackIn{
  0%   { opacity:0; letter-spacing:.62em; filter:blur(9px); }
  55%  { opacity:1; }
  100% { opacity:1; letter-spacing:0;     filter:blur(0); }
}

.hero__tagline{
  margin:1.7rem 0 0;
  font-family:var(--serif);
  font-size:clamp(1.05rem,2.3vw,1.65rem);
  font-style:italic;
  font-weight:300;
  letter-spacing:.02em;
  color:var(--cream-70);
  animation:fadeUp 1.5s var(--slow) 1.9s both;
}
.hero__meta{
  margin:1.5rem 0 0;
  font-size:.66rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--cream-45);
  animation:fadeUp 1.5s var(--slow) 2.3s both;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:translateY(0); }
}

.hero__scroll{
  position:absolute;
  right:var(--pad); bottom:clamp(4rem,12vh,9rem);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  animation:fadeUp 1.5s var(--slow) 2.7s both;
}
.hero__scroll-label{
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cream-45);
  writing-mode:vertical-rl;
}
.hero__scroll-line{
  width:1px; height:64px;
  background:linear-gradient(to bottom, var(--ember), transparent);
  animation:scrollPulse 2.4s var(--ease) infinite;
  transform-origin:top;
}
@keyframes scrollPulse{
  0%,100%{ transform:scaleY(.3); opacity:.4; }
  50%    { transform:scaleY(1);  opacity:1; }
}
@media (max-width:900px){ .hero__scroll{ display:none; } }

/* ══════════ 2. STORY ══════════ */
.story{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:clamp(7rem,18vh,13rem) var(--pad);
  overflow:hidden;
  isolation:isolate;
}
.story__media{
  position:absolute; top:-14%; left:0;
  width:100%; height:128%;
  z-index:-2;
  will-change:transform;
}
.story__video{ width:100%; height:100%; object-fit:cover; }
.story__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(8,7,6,.94) 0%, rgba(8,7,6,.74) 46%,
                    rgba(8,7,6,.42) 100%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 22%,
                    transparent 74%, var(--ink) 100%);
}

.story__inner{ max-width:44rem; }
.story__line{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.3rem,7vw,5.2rem);
  line-height:1.06;
  letter-spacing:-.015em;
}
.story__line span{ display:block; }
.story__line span:nth-child(2){ padding-left:.9em; color:var(--cream-70); }
.story__line span:nth-child(3){ padding-left:1.8em; color:var(--ember-lt); }

.story__body{
  margin-top:clamp(2.5rem,5vw,4rem);
  max-width:30rem;
  border-left:1px solid var(--cream-22);
  padding-left:1.9rem;
}
.story__body p{
  margin:0 0 1.15rem;
  color:var(--cream-70);
  font-size:1rem;
}
.story__body p:last-child{ margin-bottom:0; }

/* ══════════ 3. COLLECTION ══════════ */
.collection{
  position:relative;
  padding:clamp(7rem,16vh,12rem) var(--pad);
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(74,47,30,.20), transparent 70%),
    var(--ink);
}
.collection__head{ max-width:38rem; margin-bottom:clamp(4rem,9vh,7rem); }
.collection__lede{
  margin:1.7rem 0 0;
  color:var(--cream-45);
  max-width:28rem;
}

.collection__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(3rem,7vw,7rem);
  align-items:start;
}

.col__head{ margin-bottom:2.8rem; }
.col__title{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2rem,4.4vw,3.2rem);
  line-height:1;
  letter-spacing:.05em;
}
.col__rule{
  display:block;
  height:1px; margin:1.4rem 0 1rem;
  background:linear-gradient(to right, var(--ember), var(--cream-10) 55%, transparent);
}
.col__note{
  margin:0;
  font-size:.64rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-45);
}

.pieces{ list-style:none; margin:0; padding:0; }

.piece{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:2rem;
  padding:1.9rem 0;
  border-top:1px solid var(--cream-10);
  transition:border-color .5s var(--ease);
}
.piece:last-child{ border-bottom:1px solid var(--cream-10); }
.piece:hover{ border-top-color:var(--cream-22); }
.piece:hover .piece__name{ color:var(--ember-lt); transform:translateX(6px); }
.piece:hover .piece__price{ color:var(--cream); }

.piece__main{ flex:1 1 auto; min-width:0; }
.piece__name{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.35rem,2.6vw,1.9rem);
  line-height:1.2;
  letter-spacing:.01em;
  transition:color .45s var(--ease), transform .55s var(--slow);
}
.piece__desc{
  margin:.6rem 0 0;
  max-width:24rem;
  font-size:.86rem;
  line-height:1.65;
  color:var(--cream-45);
}

.piece__price{
  flex:0 0 auto;
  margin:.28rem 0 0;
  font-family:var(--serif);
  font-size:clamp(1.1rem,2.1vw,1.45rem);
  letter-spacing:.02em;
  color:var(--cream-70);
  white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums;
  transition:color .45s var(--ease);
}
.piece__from{
  display:block;
  font-family:var(--sans);
  font-size:.56rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--cream-45);
  margin-bottom:.28rem;
  text-align:right;
}
.piece__cur{
  font-size:.68em;
  letter-spacing:.12em;
  color:var(--cream-45);
}

.collection__foot{
  margin:clamp(3.5rem,7vh,5.5rem) 0 0;
  padding-top:2rem;
  border-top:1px solid var(--cream-10);
  font-size:.78rem;
  color:var(--cream-45);
  max-width:34rem;
}

/* ══════════ 4. BESPOKE ══════════ */
.bespoke{
  position:relative;
  padding:clamp(7rem,17vh,13rem) var(--pad);
  overflow:hidden;
  isolation:isolate;
}
.bespoke__media{
  position:absolute; top:-12%; left:0;
  width:100%; height:124%;
  z-index:-2;
  will-change:transform;
}
.bespoke__video{ width:100%; height:100%; object-fit:cover; }
.bespoke__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(8,7,6,.80) 26%,
                    rgba(8,7,6,.86) 72%, var(--ink) 100%);
}

.bespoke__head{ max-width:36rem; margin-bottom:clamp(4rem,9vh,7rem); }

.process{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.6rem,3vw,3rem);
}
.step{
  position:relative;
  padding-top:2.1rem;
  border-top:1px solid var(--cream-22);
}
.step::after{
  content:""; position:absolute; top:-1px; left:0;
  width:0; height:1px; background:var(--ember);
  transition:width 1.1s var(--slow);
}
.step.is-in::after{ width:100%; }
.step:nth-child(2)::after{ transition-delay:.14s; }
.step:nth-child(3)::after{ transition-delay:.28s; }
.step:nth-child(4)::after{ transition-delay:.42s; }

.step__num{
  display:block;
  font-size:.62rem; letter-spacing:.34em;
  color:var(--ember-lt);
  margin-bottom:1.1rem;
}
.step__name{
  margin:0 0 .8rem;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.3rem,2.4vw,1.75rem);
  line-height:1.15;
}
.step__desc{
  margin:0;
  font-size:.86rem;
  line-height:1.7;
  color:var(--cream-45);
}

.bespoke__note{
  margin:clamp(3.5rem,7vh,5.5rem) 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1rem,2vw,1.3rem);
  color:var(--cream-70);
}

/* ══════════ 5. CONTACT ══════════ */
.contact{
  position:relative;
  padding:clamp(7rem,16vh,12rem) var(--pad) 0;
  background:var(--ink-2);
}
.contact__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(3rem,7vw,6rem);
  align-items:start;
  padding-bottom:clamp(5rem,11vh,9rem);
  border-bottom:1px solid var(--cream-10);
}

.contact__address{
  margin:2.4rem 0 0;
  font-family:var(--serif);
  font-style:normal;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.55;
  color:var(--cream-70);
}

.hours{ margin:2.6rem 0 0; }
.hours__row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--cream-10);
  max-width:26rem;
}
.hours dt{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-70);
}
.hours dd{
  margin:0;
  font-family:var(--serif);
  font-size:1.05rem;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.hours__row--off dd{ color:var(--cream-45); font-style:italic; }

.contact__hint{
  margin:1.6rem 0 0;
  font-size:.78rem;
  color:var(--cream-45);
  font-style:italic;
}

.people{
  margin:2.8rem 0 0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:2rem clamp(1.5rem,3vw,2.6rem);
  max-width:32rem;
}
.person{
  padding-top:1.3rem;
  border-top:1px solid var(--cream-10);
}
.person__name{
  margin:0 0 .9rem;
  font-size:.64rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ember-lt);
}
.person__lines{
  margin:0 0 .45rem;
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.1rem .55rem;
  color:var(--cream-45);
  font-size:.9rem;
}
.person__lines:last-child{ margin-bottom:0; }
.person__lines a{
  color:var(--cream);
  text-decoration:none;
  font-family:var(--serif);
  font-size:1.08rem;
  letter-spacing:.02em;
  white-space:nowrap;
  border-bottom:1px solid var(--cream-22);
  padding-bottom:2px;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.person__lines a:hover{ color:var(--ember-lt); border-bottom-color:var(--ember); }

.contact__fax{
  margin:2.2rem 0 0;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(239,231,217,.30);
}

.contact__map{ position:relative; }
.map{
  width:100%; height:auto;
  border:1px solid var(--cream-10);
}
.map__pulse{ animation:mapPulse 3.4s var(--ease) infinite; transform-origin:318px 146px; }
@keyframes mapPulse{
  0%  { transform:scale(.6); opacity:.9; }
  70% { transform:scale(2.5); opacity:0; }
  100%{ transform:scale(2.5); opacity:0; }
}
.map__link{
  display:inline-block;
  margin-top:1.4rem;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-70);
  text-decoration:none;
  transition:color .4s var(--ease);
}
.map__link:hover{ color:var(--ember-lt); }

/* ── ofertă form ── */
.oferta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(3rem,7vw,6rem);
  align-items:start;
  padding:clamp(5rem,11vh,9rem) 0 clamp(6rem,13vh,10rem);
}
.oferta__head{ max-width:26rem; }
.oferta__lede{
  margin:1.7rem 0 0;
  color:var(--cream-45);
}

.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  margin-bottom:1.9rem;
}

.field{ position:relative; display:flex; flex-direction:column; }
.field label{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-45);
  margin-bottom:.75rem;
  transition:color .4s var(--ease);
}
.field:focus-within label{ color:var(--ember-lt); }

.field input,
.field select{
  width:100%;
  appearance:none; -webkit-appearance:none;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--cream-22);
  border-radius:0;
  padding:.7rem 0;
  color:var(--cream);
  font-family:var(--serif);
  font-size:1.16rem;
  letter-spacing:.02em;
  transition:border-color .45s var(--ease);
}
.field input::placeholder{ color:rgba(239,231,217,.24); font-style:italic; }
.field input:focus,
.field select:focus{
  outline:none;
  border-bottom-color:var(--ember);
}
.field select option{ background:var(--ink-3); color:var(--cream); }
.field select:invalid{ color:rgba(239,231,217,.30); }

.select-wrap{ position:relative; }
.select-wrap__chev{
  position:absolute; right:2px; top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--cream-45);
  font-size:.8rem;
}

.field.has-err input,
.field.has-err select{ border-bottom-color:#b4553a; }
.field__err{
  margin:.55rem 0 0;
  min-height:1em;
  font-size:.68rem;
  letter-spacing:.06em;
  color:#c2694c;
}

.btn{
  position:relative;
  margin-top:1rem;
  padding:1.05rem 2.6rem;
  background:transparent;
  border:1px solid var(--cream-22);
  color:var(--cream);
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  cursor:pointer;
  overflow:hidden;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn__label{ position:relative; z-index:2; }
.btn__line{
  position:absolute; inset:0; z-index:1;
  background:var(--ember);
  transform:scaleX(0); transform-origin:left;
  transition:transform .65s var(--slow);
}
.btn:hover{ border-color:var(--ember); color:var(--ink); }
.btn:hover .btn__line{ transform:scaleX(1); }
.btn:disabled{ opacity:.5; cursor:default; }
.btn:disabled:hover{ color:var(--cream); border-color:var(--cream-22); }
.btn:disabled:hover .btn__line{ transform:scaleX(0); }

.form__legal{
  margin:1.6rem 0 0;
  font-size:.68rem;
  color:var(--cream-45);
}

.form__status{
  margin:1.4rem 0 0;
  min-height:1.5em;
  font-family:var(--serif);
  font-size:1.05rem;
  font-style:italic;
  color:var(--ember-lt);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .6s var(--ease), transform .6s var(--slow);
}
.form__status.is-shown{ opacity:1; transform:translateY(0); }
.form__status.is-err{ color:#c2694c; }

/* ── footer ── */
.footer{
  padding:clamp(3.5rem,8vh,6rem) var(--pad);
  background:var(--ink);
  border-top:1px solid var(--cream-10);
}
.footer__inner{ text-align:center; }
.footer__mark{
  margin:0;
  font-family:var(--serif);
  font-size:1.5rem;
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--cream-70);
}
.footer__line{
  margin:1.1rem 0 0;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-45);
}
.footer__small{
  margin:2.2rem 0 0;
  font-size:.64rem;
  color:rgba(239,231,217,.28);
}

/* ── video fallback: if a clip fails to load, hold a warm wood-toned
     gradient rather than a black hole where the film should be ── */
video.is-broken{
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(200,122,46,.30), transparent 62%),
    radial-gradient(80% 70% at 78% 76%, rgba(74,47,30,.55), transparent 66%),
    linear-gradient(150deg, #16120e 0%, #0b0908 58%, #120d09 100%);
}

/* ── reveal-on-scroll ── */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1.15s var(--ease), transform 1.15s var(--slow);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ══════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════ */
@media (max-width:860px){

  body{ font-size:15px; }

  /* hero: no scrub runway — the clip loops instead */
  .hero{ height:100vh; height:100svh; }
  .hero__stage{ position:relative; }
  .hero__title{ letter-spacing:.10em; text-indent:.10em; }
  @keyframes trackIn{
    0%   { opacity:0; letter-spacing:.40em; filter:blur(7px); }
    55%  { opacity:1; }
    100% { opacity:1; letter-spacing:0;     filter:blur(0); }
  }

  .story{ min-height:auto; }
  .story__line span:nth-child(2){ padding-left:.5em; }
  .story__line span:nth-child(3){ padding-left:1em; }
  .story__body{ padding-left:1.3rem; }

  /* collection collapses to one elegant column */
  .collection__grid{
    grid-template-columns:1fr;
    gap:clamp(3.5rem,10vw,5rem);
  }
  .col + .col{
    padding-top:clamp(3rem,8vw,4rem);
    border-top:1px solid var(--cream-10);
  }
  .piece{
    flex-direction:column;
    align-items:flex-start;
    gap:.9rem;
    padding:1.6rem 0;
  }
  .piece__desc{ max-width:none; }
  .piece__price{
    display:flex; align-items:baseline; gap:.5rem;
    margin:0;
  }
  .piece__from{
    margin:0; text-align:left;
    position:relative; top:-1px;
  }
  .piece:hover .piece__name{ transform:none; }

  .process{ grid-template-columns:1fr; gap:0; }
  .step{ padding:1.8rem 0 2rem; }
  .step:last-child{ border-bottom:1px solid var(--cream-22); }

  .contact__grid,
  .oferta{ grid-template-columns:1fr; }
  .people{ grid-template-columns:1fr; gap:1.6rem; }
  .form__row{ grid-template-columns:1fr; gap:1.9rem; }
  .btn{ width:100%; }
}

@media (max-width:420px){
  .nav__cta{ padding:.55rem 1rem; font-size:.6rem; letter-spacing:.14em; }
  .nav__mark-name{ font-size:1rem; letter-spacing:.22em; }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .grain{ animation:none; }
  .hero{ height:100vh; }
  .hero__stage{ position:relative; }
}