/* Perla Chocolate · A3 "Noir & Beige"
   Fonts must contain ə Ə and Cyrillic (Noto Serif Display + Mulish do; Bodoni Moda and Jost do not).
   Dark cocoa is the stage; Perla box beige is the brand colour (logo, accents, buttons).
   One full-beige section (companies) uses the .is-box token override. */
:root{
  --ink:#16110e;       /* page background, night cocoa */
  --cocoa:#221915;     /* raised dark surfaces */
  --cream:#efe9e0;     /* main text on dark */
  --dim:#a69b8f;       /* secondary text on dark */
  --beige:#cbbfae;     /* Perla box beige, accent on dark */
  --box:#d8cfc2;       /* Perla box beige, full surfaces */
  --char:#2b2521;      /* logo charcoal, text on beige */
  --hair:rgba(203,191,174,.26);
  --display:"Noto Serif Display",Didot,"Bodoni 72",Georgia,serif;
  --body:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:max(20px,env(safe-area-inset-left,0px));
  --gutr:max(20px,env(safe-area-inset-right,0px));
  --hdr:72px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);font:300 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:1px solid var(--beige);outline-offset:3px}
.in-g{padding-left:var(--gut);padding-right:var(--gutr)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lbl{font:400 11px/1.4 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--beige)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--beige);padding:15px 26px;font:400 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--cream);background:transparent;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.btn:hover,.btn:focus-visible{background:var(--beige);color:var(--ink)}
.btn.fill{background:var(--beige);color:var(--ink)}
.btn.fill:hover,.btn.fill:focus-visible{background:var(--cream);border-color:var(--cream)}
.btn.sm{padding:11px 18px}

/* ---------- header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--ink)}
.hdr{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:40;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.hdr.scrolled{background:rgba(22,17,14,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--hair)}
.hdr .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--hdr);max-width:1400px;margin:0 auto}
.logo{display:block;width:112px;aspect-ratio:900/392;background:var(--beige);-webkit-mask:url(/assets/img/logo-mask.png) center/contain no-repeat;mask:url(/assets/img/logo-mask.png) center/contain no-repeat;flex:none}
.nav{display:flex;gap:30px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--dim);transition:color .2s}
.nav a:hover{color:var(--cream)}
.right{display:flex;align-items:center;gap:18px}
.langs{display:flex;gap:2px}
.langs a{color:var(--dim);font:400 12px/1 var(--body);letter-spacing:.14em;padding:8px 6px;text-decoration:none}
.langs a:hover{color:var(--cream)}
.langs a[aria-current="true"]{color:var(--beige)}
.menu-btn{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;position:relative}
.menu-btn i{position:absolute;left:11px;right:11px;height:1px;background:var(--cream);transition:transform .35s}
.menu-btn i:nth-of-type(1){top:18px}
.menu-btn i:nth-of-type(2){top:25px}
.menu-btn[aria-expanded="true"] i:nth-of-type(1){transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-of-type(2){transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:980px){
  .nav,.hdr .btn.sm{display:none}
  .menu-btn{display:block}
  .hdr .right>.langs{display:none}
}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:39;background:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + 30px);padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.menu-links{display:grid;gap:6px}
.menu-links a{font:400 clamp(38px,11vw,56px)/1.15 var(--display);text-decoration:none}
.menu-links a:active{color:var(--beige)}
.menu-foot{display:grid;gap:22px}
.menu-foot .langs a{font-size:14px;padding:8px 10px 8px 0}
.menu-open{overflow:hidden}
.menu-open .hdr{background:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--cocoa)}
.hero-poster,.hero-poster img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-poster img,.hero-video{transform:scale(calc(1.06 - var(--p,0)*.06));will-change:transform}
.hero-video{opacity:0;transition:opacity 1.2s ease}
.hero-video.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,17,14,.6) 0%,rgba(22,17,14,0) 20%,rgba(22,17,14,.5) 40%,rgba(22,17,14,.86) 60%,rgba(22,17,14,.95) 100%);pointer-events:none}
.hero .lbl{text-shadow:0 1px 12px rgba(22,17,14,.8)}
@media (min-aspect-ratio:1/1){.hero::after{background:linear-gradient(180deg,rgba(22,17,14,.6) 0%,rgba(22,17,14,0) 26%,rgba(22,17,14,.1) 50%,rgba(22,17,14,.9) 100%)}}
.hero-txt{position:absolute;z-index:2;left:0;right:0;bottom:clamp(44px,9vh,96px)}
.hero-inner{max-width:1400px;margin:0 auto;display:grid;gap:22px}
.hero h1{font-size:clamp(46px,8.4vw,128px);line-height:.98;letter-spacing:-.015em}
.hero h1 em{color:var(--beige)}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px}
.hero-row p{max-width:34ch;color:var(--dim)}
.scrollcue{position:absolute;z-index:2;right:var(--gutr);bottom:44px;writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
@media (max-width:700px){.scrollcue{display:none}}

/* entrance: text rises once on load (visible without JS) */
.js .hero-inner>*{animation:rise 1.2s cubic-bezier(.2,.7,.1,1) both}
.js .hero-inner>*:nth-child(2){animation-delay:.12s}
.js .hero-inner>*:nth-child(3){animation-delay:.24s}
@keyframes rise{from{transform:translateY(26px);opacity:.01}to{transform:none;opacity:1}}

.max{max-width:1400px;margin:0 auto;width:100%}
.cover{width:100%;height:100%;object-fit:cover}
h2{font-size:clamp(36px,5.4vw,72px);line-height:1.02;letter-spacing:-.01em}
h2 em{color:var(--beige)}
section{scroll-margin-top:var(--hdr)}

/* reveal on scroll: starts visible-ish, never hidden */
.js .rv{transition:transform 1.1s cubic-bezier(.2,.7,.1,1),opacity 1.1s}
.js .rv:not(.in){transform:translateY(30px);opacity:.35}

/* ---------- craft ---------- */
.craft{padding-block:clamp(90px,14vw,180px)}
.craft .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,110px);align-items:center}
.craft .copy{display:grid;gap:28px}
.craft .copy p{color:var(--dim);max-width:46ch}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:1px solid var(--hair);padding-top:26px}
.facts b{display:block;font:400 26px/1.1 var(--display);color:var(--cream);margin-bottom:6px}
.facts span{font-size:13px;color:var(--dim)}
.craft .media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cocoa)}
.craft .media .cap{position:absolute;left:18px;bottom:16px;font:italic 400 20px var(--display);text-shadow:0 1px 12px rgba(0,0,0,.5)}
@media (max-width:820px){.craft .grid{grid-template-columns:minmax(0,1fr)}.facts{grid-template-columns:minmax(0,1fr)}}

/* ---------- video chapter ---------- */
.chapter{position:relative;height:clamp(420px,75vh,820px);overflow:hidden;margin:0;background:var(--cocoa)}
.chapter video{position:absolute;inset:0}
.chapter::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,17,14,.78),rgba(22,17,14,0) 55%)}
.chapter .word{position:absolute;z-index:2;left:var(--gut);bottom:clamp(28px,6vw,70px);margin:0;font:italic 400 clamp(54px,11vw,170px)/.9 var(--display);color:var(--cream)}
.chapter .word small{display:block;font:400 11px var(--body);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--beige);margin-bottom:14px}

/* ---------- collection ---------- */
.coll{padding-block:clamp(90px,12vw,160px) 40px;display:grid;gap:44px}
.coll .head-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}
.coll .t{display:grid;gap:16px}
.coll .head p{color:var(--dim);max-width:38ch}
.rail{display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);padding-left:var(--gut);padding-right:var(--gutr);padding-bottom:20px;scrollbar-width:thin;scrollbar-color:var(--beige) transparent}
.rail:focus-visible{outline-offset:-2px}
.card{flex:0 0 clamp(250px,28vw,380px);scroll-snap-align:start;display:grid;gap:14px;margin:0}
.card .ph{aspect-ratio:4/5;overflow:hidden;background:var(--cocoa)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.card:hover img{transform:scale(1.05)}
.card .meta{display:grid;gap:8px;border-top:1px solid var(--hair);padding-top:14px}
.card .mt{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card .nm{font:400 28px/1.1 var(--display)}
.card .tp{font-size:12px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--beige)}
.card .ln{font:italic 400 17px/1.4 var(--display);color:var(--dim)}
.card .no{font:italic 400 15px var(--display);color:var(--beige)}
@media (max-width:600px){.card{flex-basis:76vw}}
@media (min-width:900px){
  .rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;max-width:calc(1400px + var(--gut) + var(--gutr));margin:0 auto;width:100%}
}

/* ---------- companies: the one full-beige "box" section ---------- */
.companies{--cream:var(--char);--dim:#5a5047;--beige:#4a3428;--hair:rgba(43,37,33,.2);--cocoa:var(--box);background:var(--box);color:var(--char);padding-block:clamp(90px,12vw,160px)}
.companies .wrap{display:grid;gap:clamp(56px,8vw,110px)}
.companies .btn.fill{color:var(--box)}
.c-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:end}
.c-head .t{display:grid;gap:22px}
.c-head .side{display:grid;gap:26px}
.c-head .side p{color:var(--dim);max-width:44ch}
.c-band{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--char)}
.c-band video{position:absolute;inset:0}
.c-band::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,17,14,.55),transparent 55%)}
.c-band span{position:absolute;left:clamp(16px,3vw,32px);bottom:clamp(14px,2.4vw,26px);z-index:2;font:italic 400 clamp(22px,2.6vw,34px) var(--display);color:#f6f1ea}
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3.5vw,56px)}
.svc article{border-top:1px solid var(--hair);padding:26px 0 34px;display:grid;gap:12px;align-content:start}
.svc .k{font:400 11px/1.4 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--beige)}
.svc h3{font-size:clamp(25px,2.3vw,31px);line-height:1.12}
.svc p{color:var(--dim);font-size:16px}
.how{display:grid;gap:30px}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.5vw,36px);counter-reset:s}
.how li{counter-increment:s;display:grid;gap:10px;align-content:start}
.how li::before{content:counter(s);font:italic 400 44px/1 var(--display);color:var(--beige)}
.how b{font:400 22px/1.2 var(--display)}
.how span{color:var(--dim);font-size:15px}
.reach{background:var(--ink);color:#efe9e0;padding:clamp(30px,5vw,72px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,70px);align-items:center;position:relative}
.reach::before{content:"";position:absolute;inset:12px;border:1px solid rgba(216,207,194,.22);pointer-events:none}
.reach .lbl{color:#cbbfae}
.reach h3{font-size:clamp(32px,4vw,54px);line-height:1.05;margin-top:16px}
.reach h3 em{color:#cbbfae}
.reach p{color:#a69b8f;margin-top:18px;max-width:44ch}
.acts{display:grid;gap:12px;position:relative}
.act{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border:1px solid rgba(216,207,194,.35);text-decoration:none;color:#efe9e0;transition:background .3s,color .3s;flex-wrap:wrap}
.act>a{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;flex:1;color:inherit;text-decoration:none}
a.act:hover,a.act:focus-visible,div.act:hover{background:#d8cfc2;color:#16110e}
.act.main{background:#d8cfc2;color:#16110e;border-color:#d8cfc2}
.act.main:hover,.act.main:focus-visible{background:#efe9e0}
.act b{font:400 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase}
.act span{font:400 18px var(--display);overflow-wrap:anywhere}
.act button,.line button{background:none;border:0;color:inherit;font:400 11px var(--body);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;opacity:.8;padding:6px 0}
.promise{display:flex;align-items:center;gap:10px;font-size:13px;color:#a69b8f;margin-top:4px}
.promise::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#7fae7a;box-shadow:0 0 0 4px rgba(127,174,122,.18)}
@media (max-width:980px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}.how ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.c-head,.reach{grid-template-columns:minmax(0,1fr)}.c-band{aspect-ratio:4/3}}
@media (max-width:600px){.svc,.how ol{grid-template-columns:minmax(0,1fr)}.reach{padding:34px 22px}.act>a{flex-basis:100%}.act span{overflow-wrap:normal}}

/* ---------- atelier strip ---------- */
.atelier{padding-block:clamp(90px,12vw,150px)}
.atelier-in{display:grid;gap:40px}
.atelier .t{display:grid;gap:16px}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.strip figure{margin:0;aspect-ratio:9/14;overflow:hidden;position:relative;background:var(--cocoa)}
.strip figure:nth-child(even){margin-top:60px}
.strip figcaption{position:absolute;left:12px;bottom:10px;font:italic 400 17px var(--display);z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.6)}
@media (max-width:760px){.strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1*var(--gutr));padding-right:var(--gutr)}.strip figure{flex:0 0 64%;scroll-snap-align:start}.strip figure:nth-child(even){margin-top:0}}

/* ---------- contact ---------- */
.contact{border-top:1px solid var(--hair);padding-block:clamp(80px,10vw,130px) calc(50px + env(safe-area-inset-bottom,0px))}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px)}
.c-left{display:grid;gap:24px;align-content:start}
.contact .grid{align-items:end}
.lines{display:grid;border-top:1px solid var(--hair)}
.line{display:flex;justify-content:space-between;align-items:center;gap:6px 14px;padding:20px 0;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.line .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);flex-basis:100%}
.line .v{font:400 22px var(--display);text-decoration:none;overflow-wrap:anywhere}
.line .v:hover{color:var(--beige)}
.line button{color:var(--beige)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-top:70px;font-size:13px;color:var(--dim)}
.logo.lg{width:180px}
@media (max-width:820px){.contact .grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- floating WhatsApp ---------- */
.wa{position:fixed;z-index:30;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:var(--beige);color:var(--ink);display:grid;place-items:center;border:1px solid rgba(22,17,14,.35);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .2s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:26px;height:26px}
.menu-open .wa{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero-inner>*{animation:none}
  .hero-poster img,.hero-video{transform:none}
}