:root{--ink:#25251f;--paper:#eae3d6;--sand:#b9a68d;--marine:#aebdc0;--pad:clamp(1rem,4vw,4rem);font-family:Vazirmatn,Tahoma,sans-serif;color:var(--ink);background:var(--paper);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body,figure,h1,h2,p{margin:0}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}
[lang=en]{font-family:Georgia,serif}
.eyebrow{letter-spacing:.24em;font-size:.66rem;direction:ltr}
.intro{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:linear-gradient(120deg,#a69c88,#c6b495);color:#fff;pointer-events:none;visibility:hidden}
.intro span{font-size:clamp(1.8rem,6vw,5rem);letter-spacing:.09em;direction:ltr}
.nav{position:fixed;z-index:5;top:0;left:0;right:0;display:flex;align-items:start;justify-content:space-between;padding:1.5rem var(--pad);color:#fff;background:linear-gradient(#211b1759,transparent)}
.nav.dark{color:var(--ink);background:linear-gradient(#eae3d6b8,transparent)}
.wordmark{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;letter-spacing:.13em;font-size:clamp(.86rem,2vw,1.25rem)}
.wordmark small{display:block;font:400 .55rem/2 Georgia,serif;letter-spacing:.25em}
.status,.menu{font-size:.8rem;white-space:nowrap}
.status i{display:inline-block;width:.4rem;height:.4rem;border-radius:50%;background:#d5b78d;margin-left:.35rem}
.menu{background:none;border:0;padding:0;cursor:pointer}
.nav nav{position:absolute;left:var(--pad);top:4rem;padding:.6rem 1.1rem;min-width:10rem;background:#eae3d6;color:var(--ink);border-radius:1rem;box-shadow:0 10px 40px #211b1722}
.nav nav a{display:block;padding:.6rem;border-bottom:1px solid #25251f22}
.nav nav a:last-child{border:0}
.hero{position:relative;min-height:100svh;display:grid;place-items:center;background:#534034;color:#fff;overflow:hidden;isolation:isolate}
.hero-pair,.hero-pair div,.hero-pair img{position:absolute;inset:0}
.hero-pair{display:grid;grid-template-columns:1fr 1fr;direction:ltr;z-index:-2}
.hero-pair div{position:relative;overflow:hidden}
.hero-pair img{transition:opacity 1.2s,transform 6s;transform:scale(1.015)}
.hero-pair img+img{opacity:0;transform:scale(1.09)}
.hero-pair div:first-child img{object-position:center 48%}
.hero-pair div:last-child img{object-position:center 38%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#21191288,transparent 32%),radial-gradient(ellipse,#23171077,#21170f24);z-index:-1}
.hero-type{text-align:center;padding:5rem 1rem 12rem}
.hero h1{font-size:clamp(3.6rem,12vw,10.5rem);font-weight:300;line-height:1.15;margin:.25em 0 .1em}
.hero p{font-size:clamp(.9rem,2vw,1.35rem)}
.hero-link{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-size:.8rem;white-space:nowrap}
.hero-link img{height:clamp(75px,13vh,150px);width:clamp(90px,11vw,150px);border-radius:1rem;margin:0 auto .6rem;transition:transform .35s}
.hero-link:hover img{transform:scale(1.06)}
.hero-link b{margin-right:.4rem}
.frame-index{position:absolute;bottom:2rem;left:var(--pad);font-size:.75rem;letter-spacing:.15em}
.gallery{height:240svh;background:linear-gradient(120deg,#a99f89,#cbb69a);color:white}
.gallery-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.gallery-focus{position:absolute;width:100%;height:100%;transform:scale(var(--scale,.24));border-radius:var(--radius,55px);overflow:hidden;z-index:-1}
.gallery-focus img{object-position:center 53%}
.gallery-focus::after{content:"";position:absolute;inset:0;background:#20160d25}
.gallery h2{font-size:clamp(2rem,7vw,6rem);font-weight:300;display:flex;justify-content:space-between;width:min(70%,65rem);text-shadow:0 2px 15px #21191266;opacity:var(--title-alpha,1)}
.tile{position:absolute;width:clamp(85px,15vw,220px);height:clamp(85px,16vh,185px);border-radius:1rem;transform:translate(var(--x,0),var(--y,0));opacity:var(--tile-alpha,1);z-index:-2}
.t1{top:16%;left:12%}.t2{top:19%;right:8%}.t3{bottom:12%;right:17%}.t4{bottom:14%;left:7%}
.pill{display:inline-flex;align-items:center;gap:.65rem;border:1px solid currentColor;border-radius:99px;padding:.6rem 1.1rem;font-size:.82rem}
.pill:hover{background:#ffffff35}
.gallery-next{position:absolute;bottom:9%;background:#241c1455}
.story{text-align:center;padding:clamp(5rem,13vw,10rem) var(--pad);background:#ddd4c4}
.story h2,footer h2{font-size:clamp(2.3rem,6vw,5.5rem);font-weight:300;line-height:1.25;margin:1.25rem 0 2rem}
.story img{width:min(100%,43rem);height:clamp(14rem,44vw,26rem);margin:auto;border-radius:10rem 10rem 1.3rem 1.3rem;object-position:center 40%}
.story p:last-child{max-width:30rem;margin:2rem auto 0;line-height:2}
.marine{height:170svh;background:var(--marine)}
.marine-stage{position:sticky;top:0;min-height:100svh;display:grid;grid-template-columns:1fr minmax(10rem,25vw) 1fr;gap:var(--pad);align-items:center;padding:6rem var(--pad) 4rem}
.marine h2{font-size:clamp(2.5rem,6vw,7rem);line-height:1.05;letter-spacing:.05em;text-align:right;font-weight:400;margin:1rem 0 1.5rem}
.marine h2 small{display:block;font-size:.7rem;letter-spacing:.22em;margin-top:.5rem}
.marine p{line-height:1.95}
.marine-image{height:clamp(20rem,59svh,42rem);border-radius:50vw;overflow:hidden}
.marine-image img{transform:scale(1.12) translateY(var(--marine-y,0%));object-position:48% 48%}
details{border-bottom:1px solid #25251f55;padding:1rem 0}
summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;font-size:clamp(1rem,2vw,1.7rem)}
summary::marker{content:""}summary::-webkit-details-marker{display:none}
details p{padding-top:.75rem;font-size:.88rem}
.number{font:400 .7rem Georgia,serif}
.brand-link{display:inline-block;margin-top:1.2rem;text-decoration:underline;text-underline-offset:.4em;font-size:.8rem}
footer{padding:7rem var(--pad) 1.25rem;text-align:center;background:#eae3d6}
footer .pill{margin:1.8rem 0 4rem}
.credits{display:flex;justify-content:space-between;border-top:1px solid #25251f33;padding-top:1rem;font-size:.75rem}
.progress{position:fixed;z-index:6;inset:auto 0 0;height:3px;background:#cfac7b;transform-origin:right;transform:scaleX(0);pointer-events:none}
.cursor{display:none}
@media(pointer:fine) and (prefers-reduced-motion:no-preference){.motion .cursor{display:block;position:fixed;top:0;left:0;z-index:8;width:27px;height:27px;border:1px solid white;border-radius:50%;mix-blend-mode:difference;pointer-events:none;opacity:0}.motion .cursor.visible{opacity:1}}
@media(max-width:740px){
.nav{padding-top:1rem}
.hero-pair{grid-template-columns:1fr;grid-template-rows:55% 45%}
.hero-pair div:first-child img{object-position:center 53%}
.hero-pair div:last-child img{object-position:center 35%}
.hero-type{padding-bottom:6rem}
.hero h1{font-size:clamp(3.2rem,14vw,6rem)}
.hero-link{bottom:auto}
.frame-index{display:none}
.gallery{height:180svh}
.gallery h2{width:90%;gap:1rem}
.t1{top:19%;left:5%}.t2{top:23%;right:5%}.t3{bottom:17%;right:5%}.t4{bottom:19%;left:5%}
.marine{height:auto}
.marine-stage{position:relative;grid-template-columns:1fr;padding:5rem var(--pad);gap:1.5rem}
.marine-image{height:23rem;width:min(68%,17rem);margin:auto}
.story img{border-radius:5rem 5rem 1rem 1rem}
}
@media(prefers-reduced-motion:reduce){
:root{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.gallery,.marine{height:auto}
.gallery-stage,.marine-stage{position:relative}
.gallery-focus{transform:scale(.4)}
}

.hero-card{display:block;position:relative;overflow:hidden;width:clamp(90px,11vw,150px);height:clamp(75px,13vh,150px);margin:0 auto .6rem;border-radius:1rem;isolation:isolate}
.hero-link .hero-card img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;transition:clip-path .65s cubic-bezier(.7,0,.2,1),transform .85s cubic-bezier(.2,.75,.25,1)}
.hero-card img+img{clip-path:inset(0 0 100% 0);transform:scale(1.18)}
.hero-pair img{transition:opacity .85s .23s,transform 6s,clip-path .95s .2s cubic-bezier(.7,0,.2,1)}
.hero-pair img+img{opacity:1;clip-path:inset(0 100% 0 0)}
.hero-pair div:last-child img+img{clip-path:inset(0 0 0 100%)}
.marine{height:280svh}
.marine-stage{height:100svh;overflow:hidden;isolation:isolate}
.marine-visual{position:relative}
.bottle{display:none;position:absolute;width:clamp(150px,25vw,320px);height:auto;left:50%;top:50%;transform:translate(-50%,-43%) translateX(var(--bottle-x,0px));opacity:var(--bottle-opacity,1);z-index:2;pointer-events:none;filter:drop-shadow(6px 18px 12px #1f32264a)}
.has-bottle .bottle{display:block}
.featured{margin-top:.65rem;font-size:.88rem}
@media(max-width:740px){
  .marine{height:auto}
  .marine-stage{height:auto;overflow:clip}
  .bottle{width:min(52vw,220px)}
}
@media(prefers-reduced-motion:reduce){.marine{height:auto}.marine-stage{height:auto}}

/* Scroll-driven chapters */
:root{font-family:"DM Sans",Arial,sans-serif;--paper:#eee7db;--ink:#292b28}
[lang=en]{font-family:inherit}
h1,h2,.intro span,.wordmark{font-family:"Playfair Display",Georgia,serif}
.hero h1 span,.story em{font-weight:400;font-style:italic}
.hero h1{font-size:clamp(3.3rem,10vw,10.5rem);letter-spacing:-.065em}
.hero-type{padding-bottom:6rem}
.hero::after{background:linear-gradient(0deg,#1c181382,transparent 35%),linear-gradient(90deg,#211b173e,#211b174e)}
.motion .hero-track{height:250svh}
.motion .hero{position:sticky;top:0}
.hero-pair img,.hero-link .hero-card img{transition:none}
.hero-pair img,.hero-pair img+img{transform:scale(var(--hero-scale,1.025))}
.hero-pair div:first-child img+img{clip-path:inset(0 var(--pair-wipe,100%) 0 0)}
.hero-pair div:last-child img+img{clip-path:inset(0 0 0 var(--pair-wipe,100%))}
.hero-link .hero-card img+img{clip-path:inset(var(--card-inset,50%) round 12px)}
.hero-link .hero-card{width:clamp(105px,13vw,175px);height:clamp(90px,15vh,160px)}
.gallery{background:linear-gradient(125deg,#827663,#baa589)}
.gallery h2{width:min(76%,68rem);font-size:clamp(2.3rem,6.6vw,6rem);letter-spacing:-.06em}
.chapter-label{position:absolute;left:var(--pad);top:6rem;letter-spacing:.2em;font-size:.64rem}
.story{position:relative;background:#eee7db;padding-block:clamp(6rem,13vw,11rem)}
.story img{transform:translateY(var(--story-drift,0px))}
.story h2{letter-spacing:-.045em}
.marine{height:auto;background:radial-gradient(ellipse at 50% 44%,#d6dfda 0%,#a8bbba 53%,#91a5a6 100%)}
.motion .marine{height:670svh}
.marine-stage{height:auto}
.motion .marine-stage{height:100svh}
.marine-image{box-shadow:0 22px 65px #22363829}
.marine-image img{filter:saturate(.84) brightness(.85)}
.bottle{width:clamp(175px,27vw,365px);transform:translate(-50%,-46%) translate(var(--bottle-x,0px),var(--bottle-lift,0px)) scale(var(--bottle-scale,1))}
.featured{color:#293d3e}
.nav nav{left:auto;right:var(--pad)}
.progress{height:2px;background:#c6a979;transform-origin:left}
footer{background:#ede5d7}
footer h2{letter-spacing:-.06em}
@media(max-width:740px){
  .motion .hero-track{height:205svh}
  .hero h1{font-size:clamp(2.75rem,11vw,5.5rem)}
  .hero-link .hero-card{width:100px;height:86px}
  .gallery h2{width:89%;font-size:clamp(1.65rem,7vw,3rem)}
  .motion .marine{height:480svh}
  .marine-stage{padding:4.4rem 1.25rem 1.6rem;grid-template-rows:auto minmax(0,1fr) auto;gap:.65rem}
  .motion .marine-stage{position:sticky}
  .marine h2{font-size:clamp(2rem,8vw,3.2rem);margin:.4rem 0;text-align:left}
  .marine-copy>p:last-child{font-size:.8rem;line-height:1.5}
  .marine-image{height:clamp(7rem,34svh,16rem)}
  .bottle{width:min(49vw,25svh)}
  details{padding:.45rem 0} details p{padding-top:.4rem;font-size:.75rem}
  .brand-link{margin-top:.4rem}
}
@media(max-height:570px){
  .motion .marine{height:auto}
  .motion .marine-stage{position:relative;height:auto}
  .motion .bottle{opacity:1;transform:translate(-50%,-46%)}
}
@media(min-width:741px){
  .hero-pair div:first-child img{object-position:center 51%}
  .hero-pair div:last-child img{object-position:center 36%}
  .hero-pair div:last-child img+img{object-position:center 48%}
}
@media(max-width:740px){
  .hero-pair div:first-child img{object-position:center 45%}
  .hero-pair div:last-child img{object-position:center 37%}
  .hero-pair div:last-child img+img{object-position:center 52%}
}

/* The opening and the inset share the same reversible scroll timeline. */
.motion .intro{visibility:visible;opacity:var(--intro-opacity,1);background:#b4a68f}
.intro span{transform:translateY(var(--intro-lift,0vh)) scale(var(--intro-scale,1))}
.intro small{position:absolute;bottom:8%;font-size:.65rem;letter-spacing:.27em}
.motion .hero-track{height:285svh}
.hero-type{display:contents}
.hero-type h1{position:absolute;top:18%;left:var(--pad);z-index:1}
.hero-type .eyebrow{position:absolute;top:15%;left:var(--pad)}
.hero-type p{position:absolute;bottom:18%;right:var(--pad);z-index:1}
.hero h1{font-size:clamp(2.8rem,6.5vw,7rem)}
.tile{transform:translate(var(--x,0),var(--y,0)) scale(var(--tile-scale,1))}
.gallery h2{transform:scale(var(--title-scale,1))}
.motion .marine-stage{perspective:1050px}
.motion .bottle{opacity:var(--bottle-opacity,0)}
.motion .marine-image{opacity:var(--set-opacity,1)}
.motion .marine-copy,.motion .marine-lines{
  opacity:var(--copy-opacity,0);
  transform:translate3d(0,var(--copy-y,28px),var(--copy-z,-180px)) rotateY(var(--copy-tilt,24deg));
  transform-origin:left center;
}
.motion .marine-lines{transform-origin:right center}
.motion .marine-copy:focus-within,.motion .marine-lines:focus-within{opacity:1;transform:none}
.volume{display:inline-block;margin-left:.35em;font-size:.76em;letter-spacing:.12em}
@media(max-width:740px){
  .motion .hero-track{height:235svh}
  .hero-type h1{top:19%}
  .hero-type p{bottom:15%}
}
@media(max-height:570px){
  .motion .marine-copy,.motion .marine-lines,.motion .bottle{opacity:1;transform:none}
  .motion .bottle{transform:translate(-50%,-46%)}
}

/* Product studio: depth separates the silhouette from the shelf photography. */
.marine{background:radial-gradient(ellipse at 50% 44%,#dce7e2 0%,#a6bcbb 49%,#829e9f 100%)}
.marine-visual::before{
  content:"";position:absolute;inset:-12% -24%;pointer-events:none;
  background:radial-gradient(ellipse,#eef8f3a8,transparent 66%);
  opacity:var(--product-light,.85)
}
.marine-visual::after{
  content:"";position:absolute;left:50%;bottom:0;width:64%;height:9%;pointer-events:none;
  background:radial-gradient(ellipse,#25434570,transparent 69%);
  transform:translateX(-50%);opacity:var(--product-light,.85)
}
.bottle{
  width:clamp(190px,29vw,390px);
  filter:blur(var(--product-focus,0px)) drop-shadow(13px 20px 21px #25434556)
}
.marine-image img{filter:saturate(.69) brightness(.77) contrast(.9)}
@media(max-width:740px){.bottle{width:min(54vw,30svh)}}