/* ── RA'NO COLLECTION · BRAND PORTFOLIO ──────────────────────────
   A presentation piece, not a shop. Editorial rhythm, serif display,
   and motion that reveals rather than decorates. */
:root{
  --ink:#0b0a0c;
  --ink-2:#141317;
  --paper:#faf8f5;
  --paper-2:#f1ede7;
  --line:#e0dad1;
  --soft:#67646e;
  --faint:#a6a1aa;
  --gold:#b08e4d;
  --gold-soft:#dcbd7e;
  --nav-h:62px;
  --gut:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --serif:"Cormorant Garamond",Georgia,serif;
}
@media (min-width:900px){ :root{ --nav-h:88px; --gut:56px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Jost","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.72; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; }
img,video{ display:block; max-width:100%; }
p,li{ overflow-wrap:break-word; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
section[id]{ scroll-margin-top:var(--nav-h); }
::selection{ background:var(--gold); color:#fff; }

.wrap{ max-width:1260px; margin-inline:auto; padding-inline:var(--gut); }
.eyebrow{
  margin:0 0 14px; font-size:10px; letter-spacing:.38em;
  text-transform:uppercase; color:var(--gold);
}

/* ── INTRO CURTAIN ───────────────────────────────────────────────
   Holds the first paint for a beat so the hero video can arrive
   behind it, then lifts. Removed entirely if motion is reduced. */
.curtain{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:center;
  transition:transform 1.1s var(--ease-out), opacity .6s ease .5s;
}
.curtain__in{ text-align:center; color:#fff; }
.curtain__mark{
  font-family:var(--serif); font-size:clamp(28px,6vw,58px);
  letter-spacing:.16em; text-transform:uppercase; font-weight:300;
  opacity:0; animation:cIn 1.1s var(--ease-out) .15s forwards;
}
.curtain__bar{
  width:min(180px,40vw); height:1px; margin:22px auto 0;
  background:rgba(255,255,255,.22); position:relative; overflow:hidden;
}
.curtain__bar::after{
  content:""; position:absolute; inset:0; background:var(--gold-soft);
  transform:scaleX(0); transform-origin:left;
  animation:cBar 1.5s var(--ease) .25s forwards;
}
@keyframes cIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes cBar{ to{ transform:scaleX(1); } }
body.loaded .curtain{ transform:translateY(-101%); opacity:0; pointer-events:none; }

/* ── CURSOR ──────────────────────────────────────────────────────
   A quiet ring that trails the pointer; pointer devices only. */
.cursor{
  position:fixed; top:0; left:0; z-index:150; pointer-events:none;
  width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%;
  border:1px solid rgba(176,142,77,.6);
  transition:width .3s var(--ease), height .3s var(--ease),
             margin .3s var(--ease), background .3s var(--ease), opacity .3s;
  opacity:0;
}
.cursor.on{ opacity:1; }
.cursor.big{ width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(176,142,77,.1); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ── NAV ─────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:100;
  display:flex; align-items:center; padding-inline:var(--gut);
  transition:background .5s var(--ease), color .5s var(--ease),
             border-color .5s, transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav--solid{ background:rgba(250,248,245,.9); backdrop-filter:blur(16px) saturate(1.3); border-bottom-color:var(--line); }
.nav--over{ color:#fff; }
.nav--hide{ transform:translateY(-100%); }      /* out of the way when reading */
body.menu-open .nav{ background:var(--paper); color:var(--ink); transform:none; }

.nav__logo{ display:flex; align-items:center; flex:0 0 auto; margin-right:32px; }
.nav__mark{ width:auto; height:26px; }
.nav__mark--light{ display:none; }
.nav--over .nav__mark--dark{ display:none; }
.nav--over .nav__mark--light{ display:block; }
body.menu-open .nav__mark--dark{ display:block; }
body.menu-open .nav__mark--light{ display:none; }
@media (min-width:900px){ .nav__mark{ height:34px; } }

.nav__links{ display:none; }
@media (min-width:900px){
  .nav__links{
    display:flex; gap:30px; margin-inline:auto; white-space:nowrap;
    font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  }
  .nav__links a{ position:relative; padding-block:5px; overflow:hidden; }
  .nav__links a::after{
    content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:right;
    transition:transform .5s var(--ease-out);
  }
  .nav__links a:hover::after,.nav__links a.is-here::after{ transform:scaleX(1); transform-origin:left; }
}

.lang{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.lang__o{
  padding:6px 9px; border-radius:999px; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; opacity:.55;
  transition:opacity .3s var(--ease), background .3s var(--ease);
}
.lang__o:hover{ opacity:1; }
.lang__o.is-on{ opacity:1; background:rgba(176,142,77,.18); color:var(--gold); }
@media (max-width:899px){ .lang--desk{ display:none; } }
.lang--drawer{ margin-top:28px; padding-top:22px; border-top:1px solid var(--line); gap:6px; }
.lang--drawer .lang__o{ font-size:12px; padding:8px 15px; border:1px solid var(--line); }
@media (min-width:900px){ .lang--drawer{ display:none; } }

.burger{ width:26px; height:16px; position:relative; margin-left:auto; }
@media (min-width:900px){ .burger{ display:none; } }
.burger span{ position:absolute; left:0; width:100%; height:1.4px; background:currentColor; transition:transform .4s var(--ease), opacity .3s; }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:7px; } .burger span:nth-child(3){ top:14px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:98; background:var(--paper);
  padding:calc(var(--nav-h) + 34px) var(--gut) 36px;
  display:flex; flex-direction:column; gap:2px;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease-out); visibility:hidden;
}
body.menu-open .drawer{ clip-path:inset(0 0 0 0); visibility:visible; }
.drawer > a{
  font-family:var(--serif); font-size:clamp(28px,8vw,40px); letter-spacing:.01em;
  padding-block:13px; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(16px);
}
body.menu-open .drawer > a{ animation:dIn .6s var(--ease-out) forwards; }
body.menu-open .drawer > a:nth-child(1){ animation-delay:.16s; }
body.menu-open .drawer > a:nth-child(2){ animation-delay:.22s; }
body.menu-open .drawer > a:nth-child(3){ animation-delay:.28s; }
body.menu-open .drawer > a:nth-child(4){ animation-delay:.34s; }
body.menu-open .drawer > a:nth-child(5){ animation-delay:.40s; }
body.menu-open .drawer > a:nth-child(6){ animation-delay:.46s; }
@keyframes dIn{ to{ opacity:1; transform:none; } }

/* ── HERO ────────────────────────────────────────────────────── */
.hero{ position:relative; min-height:100svh; overflow:hidden; background:#000; display:flex; }
.hero__poster,.hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero video{ z-index:1; opacity:0; transition:opacity 1.4s var(--ease); }
.hero video.ready{ opacity:1; }
.hero__media{ position:absolute; inset:0; will-change:transform; }   /* parallax target */
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.12) 26%,rgba(0,0,0,.36) 62%,rgba(0,0,0,.88) 100%);
}
.hero__body{
  position:relative; z-index:3; color:#fff; margin-top:auto;
  padding:0 var(--gut) clamp(70px,13vh,130px); width:100%;
  max-width:1260px; margin-inline:auto;
}
.hero__kicker{
  margin:0 0 20px; font-size:10px; letter-spacing:.36em;
  text-transform:uppercase; color:var(--gold-soft);
}
.hero__title{
  margin:0; font-family:var(--serif); font-weight:300; line-height:.98;
  font-size:clamp(48px,11.5vw,124px); letter-spacing:.02em; text-transform:uppercase;
}
.hero__tag{
  margin:20px 0 0; font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,3.6vw,32px); color:var(--gold-soft); letter-spacing:.02em;
}
.hero__lead{ margin:24px 0 0; max-width:56ch; font-size:15.5px; color:rgba(255,255,255,.8); }
.hero__scroll{
  position:absolute; z-index:3; left:50%; bottom:26px; transform:translateX(-50%);
  color:rgba(255,255,255,.65); font-size:9.5px; letter-spacing:.32em; text-transform:uppercase;
}
.hero__scroll span{ display:block; padding-bottom:28px; position:relative; }
.hero__scroll span::after{
  content:""; position:absolute; left:50%; bottom:0; width:1px; height:20px;
  background:rgba(255,255,255,.5); animation:drop 2.2s var(--ease) infinite;
}
@keyframes drop{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* words of the hero headline rise in one after another */
.ln{ display:block; overflow:hidden; }
.ln > span{
  display:inline-block; transform:translateY(105%);
  transition:transform 1.05s var(--ease-out);
}
body.loaded .ln > span{ transform:none; }
body.loaded .ln:nth-child(2) > span{ transition-delay:.09s; }
.hero__tag,.hero__lead,.hero__kicker{
  opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
body.loaded .hero__kicker{ opacity:1; transform:none; transition-delay:.15s; }
body.loaded .hero__tag{ opacity:1; transform:none; transition-delay:.5s; }
body.loaded .hero__lead{ opacity:1; transform:none; transition-delay:.62s; }

/* ── SECTIONS ────────────────────────────────────────────────── */
.sec{ padding-block:clamp(70px,12vw,150px); position:relative; }
.sec--tint{ background:var(--paper-2); }
.sec--dark{ background:var(--ink); color:#fff; }
.sec--dark .eyebrow{ color:var(--gold-soft); }
.sec--intro{ padding-block:clamp(60px,10vw,120px); }
.sec__head{ margin-bottom:clamp(32px,5vw,62px); max-width:24ch; }
.sec__title{
  margin:0; font-family:var(--serif); font-weight:300; line-height:1.08;
  font-size:clamp(32px,5.6vw,62px); letter-spacing:.01em;
}
.sec__lead{ margin:16px 0 0; color:var(--soft); font-size:15.5px; max-width:52ch; }

/* headline words revealed as the section arrives */
.rt{ display:inline-block; overflow:hidden; vertical-align:top; }
.rt > i{
  display:inline-block; font-style:inherit; transform:translateY(104%);
  transition:transform .95s var(--ease-out);
}
.rt.in > i{ transform:none; }

.lede{
  margin:0 0 clamp(44px,6vw,76px); max-width:60ch;
  font-family:var(--serif); font-size:clamp(21px,2.9vw,32px);
  line-height:1.48; color:var(--ink-2);
}
.wide{ max-width:66ch; margin:0 0 22px; }
.sec--dark .wide{ color:rgba(255,255,255,.82); }
.role{ margin:0 0 24px; color:var(--gold); font-size:13px; letter-spacing:.06em; }

/* three pillars */
.pils{ display:grid; gap:clamp(24px,4vw,44px); grid-template-columns:1fr; }
@media (min-width:760px){ .pils{ grid-template-columns:repeat(3,1fr); } }
.pil{ border-top:1px solid var(--line); padding-top:24px; position:relative; }
.pil::before{
  content:""; position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease-out);
}
.pil.in::before{ transform:scaleX(1); }
.pil__n{ display:block; font-size:10px; letter-spacing:.3em; color:var(--gold); margin-bottom:12px; }
.pil__t{ margin:0 0 8px; font-family:var(--serif); font-weight:400; font-size:27px; }
.pil__d{ margin:0; color:var(--soft); font-size:14.5px; }

/* text beside an image */
.split{ display:grid; gap:clamp(30px,5vw,68px); align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--rev .split__img{ order:-1; }
}
.split__txt p{ margin:0 0 20px; max-width:60ch; }
.split__txt p:last-child{ margin-bottom:0; }
.split__img{ margin:0; overflow:hidden; background:var(--paper-2); }
.split__img img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/5;
  transform:scale(1.12); transition:transform 1.5s var(--ease-out);
}
.split__img.in img{ transform:scale(1); }

/* an image that slides behind its own mask */
.mask{ position:relative; overflow:hidden; }
.mask::after{
  content:""; position:absolute; inset:0; background:var(--paper);
  transform:scaleY(1); transform-origin:bottom;
  transition:transform 1.15s var(--ease-out);
}
.sec--tint .mask::after{ background:var(--paper-2); }
.mask.in::after{ transform:scaleY(0); }

.pull{
  margin:clamp(44px,6vw,80px) 0; padding-left:clamp(18px,3vw,34px);
  border-left:2px solid var(--gold);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(22px,3.4vw,36px); line-height:1.38; max-width:32ch;
}
.pull--light{ border-color:var(--gold-soft); color:#fff; }

/* full-bleed parallax band */
.bleed{ margin:0; overflow:hidden; background:var(--paper-2); position:relative; height:clamp(300px,64vh,720px); }
.bleed img{
  width:100%; height:124%; object-fit:cover; position:absolute; top:-12%; left:0;
  will-change:transform;
}

/* craft techniques */
.cfts{ display:grid; gap:clamp(20px,3vw,34px); grid-template-columns:1fr; margin-top:clamp(44px,6vw,76px); }
@media (min-width:760px){ .cfts{ grid-template-columns:repeat(3,1fr); } }
.cft{ border-top:1px solid var(--line); padding-top:22px; position:relative; }
.cft::before{
  content:""; position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease-out);
}
.cft.in::before{ transform:scaleX(1); }
.cft h3{ margin:0 0 8px; font-family:var(--serif); font-weight:400; font-size:25px; }
.cft p{ margin:0; color:var(--soft); font-size:14.5px; }

/* editorial gallery */
.gal{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.6vw,20px); margin-top:clamp(44px,6vw,80px); }
.gal figure{ margin:0; overflow:hidden; background:var(--paper-2); }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out); }
.gal figure.in img{ transform:scale(1); }
.gal img{ transform:scale(1.1); }
.g1{ grid-column:span 7; aspect-ratio:4/5; }
.g2{ grid-column:span 5; aspect-ratio:3/4; align-self:end; }
.g3{ grid-column:span 5; aspect-ratio:3/4; }
.g4{ grid-column:span 7; aspect-ratio:4/5; align-self:start; }
@media (max-width:700px){ .g1,.g2,.g3,.g4{ grid-column:span 12; aspect-ratio:4/5; } }

/* the reel, shown as a vertical film strip */
.reel{ background:var(--ink); color:#fff; padding-block:clamp(60px,10vw,130px); overflow:hidden; }
.reel__in{ display:grid; gap:clamp(28px,5vw,70px); align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){ .reel__in{ grid-template-columns:.9fr 1.1fr; } }
.reel__frame{
  position:relative; margin:0 auto; width:min(340px,80vw); aspect-ratio:9/16;
  overflow:hidden; background:#000; box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.reel__frame video,.reel__frame img{ width:100%; height:100%; object-fit:cover; }
.reel__frame video{ position:absolute; inset:0; opacity:0; transition:opacity 1s var(--ease); }
.reel__frame video.ready{ opacity:1; }
.reel__txt p{ color:rgba(255,255,255,.8); max-width:52ch; }
.reel__sound{
  margin-top:22px; display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.reel__sound:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.reel__sound svg{ width:16px; height:16px; }
.reel__sound .s-on{ display:none; }
.reel__sound.is-on .s-off{ display:none; }
.reel__sound.is-on .s-on{ display:block; }

/* founder timeline */
.tl{ list-style:none; margin:36px 0 0; padding:0; }
.tl__i{
  display:flex; gap:18px; padding-block:14px;
  border-top:1px solid var(--line); font-size:14.5px;
  opacity:0; transform:translateX(-14px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.tl__i.in{ opacity:1; transform:none; }
.tl__y{ flex:0 0 86px; color:var(--gold); letter-spacing:.04em; }
.tl__t{ color:var(--soft); }

/* manifesto */
.man__lines p{
  margin:0 0 20px; max-width:52ch;
  font-family:var(--serif); font-size:clamp(21px,3.2vw,32px); line-height:1.42;
}
.man__list{ list-style:none; margin:clamp(32px,5vw,58px) 0; padding:0; }
.man__list li{
  padding-block:12px; border-top:1px solid rgba(255,255,255,.14);
  font-size:clamp(15px,2vw,19px); color:rgba(255,255,255,.9);
}
.man__close{
  margin:0; max-width:44ch; font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,2.9vw,29px); color:var(--gold-soft); line-height:1.42;
}

/* three words */
.words{ padding-block:clamp(60px,10vw,130px); text-align:center; overflow:hidden; }
.words__w{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(14px,4vw,54px); margin-top:22px; }
.words__w span{
  font-family:var(--serif); font-weight:300; text-transform:uppercase;
  font-size:clamp(26px,5.6vw,62px); letter-spacing:.05em;
}
.words__w span + span::before{ content:"·"; color:var(--gold); margin-right:clamp(14px,4vw,54px); }

/* a slow horizontal band of the three words */
.ticker{ overflow:hidden; padding-block:clamp(26px,4vw,44px); border-block:1px solid var(--line); }
.ticker__in{ display:flex; gap:44px; width:max-content; animation:slide 34s linear infinite; }
.ticker span{
  font-family:var(--serif); font-size:clamp(22px,3.4vw,40px);
  text-transform:uppercase; letter-spacing:.14em; color:var(--faint); white-space:nowrap;
}
.ticker span::after{ content:"·"; margin-left:44px; color:var(--gold); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* contact */
.cts{ display:grid; gap:0; grid-template-columns:1fr; }
@media (min-width:700px){ .cts{ grid-template-columns:repeat(2,1fr); column-gap:clamp(24px,4vw,60px); } }
.ct{
  display:flex; flex-direction:column; gap:5px; position:relative;
  padding-block:22px; border-top:1px solid var(--line);
  transition:color .35s var(--ease), padding-left .35s var(--ease);
}
.ct::before{
  content:""; position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.ct:hover{ color:var(--gold); padding-left:10px; }
.ct:hover::before{ transform:scaleX(1); }
.ct__l{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint); }
.ct__v{ font-size:17px; }
.city{ margin:32px 0 0; color:var(--soft); font-size:14px; }

/* footer */
.foot{ background:var(--ink); color:rgba(255,255,255,.55); padding-block:34px; font-size:12.5px; }
.foot__in{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; }
.foot p{ margin:0; }

/* scroll progress hairline */
.prog{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:120;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
}

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .rv,.tl__i{ opacity:1; transform:none; transition:none; }
  .ln > span,.rt > i{ transform:none; transition:none; }
  .mask::after{ display:none; }
  .split__img img,.gal img{ transform:none; }
  .bleed img{ height:100%; top:0; }
  .hero__kicker,.hero__tag,.hero__lead{ opacity:1; transform:none; }
  .ticker__in{ animation:none; }
  .hero__scroll span::after{ animation:none; }
  .curtain{ display:none; }
  .cursor{ display:none; }
}