:root{
  --bg:#0a0a0a; --bg2:#141414; --ink:#f2efea; --ink-dim:rgba(242,239,234,.55); --bronze:#b87b4b; --line:rgba(242,239,234,.14);
  --sans:"Albert Sans",system-ui,sans-serif; --serif:"Newsreader",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-family:var(--serif);font-style:italic;font-weight:200;color:var(--bronze)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:28px 40px;mix-blend-mode:difference;font-size:13px;letter-spacing:.32em;text-transform:uppercase}
.nav__brand{font-weight:400;letter-spacing:.5em}
.nav__right{display:flex;gap:32px}
.nav__right span{opacity:.5}

/* hero */
.hero{position:relative;height:100vh;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero__copy{position:absolute;left:6vw;bottom:12vh}
.hero__title{font-weight:200;font-size:clamp(96px,15vw,240px);line-height:.86;letter-spacing:.08em;margin-left:-.04em;white-space:nowrap}
.hero__tag{font-size:clamp(28px,3.4vw,52px);font-weight:200;margin-top:20px;letter-spacing:.01em}
.hero__sub{margin-top:24px;max-width:420px;color:var(--ink-dim);font-size:15px;line-height:1.7}
.hero__hint{position:absolute;right:6vw;bottom:8vh;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-dim)}
.hero__hint::after{content:"";display:block;width:1px;height:48px;background:var(--ink-dim);margin:14px auto 0}

/* cinematic scroll-scrub sections */
.cine{position:relative;height:100vh;overflow:hidden;background:#000}
.cine__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine__overlay{position:absolute;left:6vw;bottom:14vh;font-weight:200;font-size:clamp(56px,8.5vw,140px);line-height:.95;letter-spacing:.02em;display:flex;flex-direction:column;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.cine__overlay span{display:block;overflow:hidden}
.cine::after{content:"";position:absolute;inset:auto 0 0 0;height:22vh;background:linear-gradient(to top,var(--bg),transparent);pointer-events:none;opacity:.6}

/* generic type */
.h-big{font-weight:200;font-size:clamp(64px,10vw,168px);line-height:.92;letter-spacing:.01em}
.h-big span{display:block}
.h-mid{font-weight:200;font-size:clamp(48px,6.5vw,104px);line-height:.95}
.eyebrow{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--bronze);margin-bottom:28px}
.lede{font-size:clamp(17px,1.5vw,22px);color:var(--ink-dim);max-width:520px;margin:32px 0 48px;line-height:1.6}

/* specs */
.specs{padding:22vh 6vw 20vh;display:grid;grid-template-columns:1.2fr 1fr;gap:8vw;align-items:end;background:var(--bg)}
.specs__list{list-style:none;display:flex;flex-direction:column;gap:0}
.specs__list li{display:flex;align-items:baseline;justify-content:space-between;padding:34px 0;border-top:1px solid var(--line)}
.specs__list li:last-child{border-bottom:1px solid var(--line)}
.specs__list strong{font-weight:200;font-size:clamp(48px,5.5vw,92px);letter-spacing:-.01em;line-height:1}
.specs__list span{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}

/* materials */
.materials{display:grid;grid-template-columns:1fr 1.1fr;min-height:100vh;background:var(--bg2)}
.materials__text{padding:18vh 6vw;align-self:center}
.hairlines{list-style:none}
.hairlines li{padding:18px 0;border-top:1px solid var(--line);font-size:15px;letter-spacing:.06em;color:var(--ink)}
.hairlines li:last-child{border-bottom:1px solid var(--line)}
.materials__img{overflow:hidden;position:relative}
.materials__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}

/* features */
.features{padding:20vh 6vw;background:var(--bg)}
.rows{list-style:none;counter-reset:f}
.rows li{display:grid;grid-template-columns:80px 1fr 1fr;align-items:baseline;gap:4vw;padding:44px 0;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows span{font-size:12px;letter-spacing:.3em;color:var(--bronze)}
.rows h3{font-weight:200;font-size:clamp(28px,3.4vw,52px);letter-spacing:.01em}
.rows p{color:var(--ink-dim);font-size:16px;max-width:460px}

/* final */
.final{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.final__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.final__copy{position:relative;padding:0 6vw;max-width:720px}
.final__name{font-size:13px;letter-spacing:.5em;text-transform:uppercase;color:var(--ink-dim)}
.final__tag{font-weight:200;font-size:clamp(56px,7.5vw,124px);line-height:.95;margin:20px 0 28px}
.final__price{font-size:20px;letter-spacing:.1em;color:var(--ink-dim);margin-bottom:40px}
.final__cta{display:flex;gap:16px}
.btn{display:inline-block;padding:18px 34px;font-size:12px;letter-spacing:.35em;text-transform:uppercase;border:1px solid var(--ink);transition:background .3s,color .3s}
.btn--solid{background:var(--ink);color:#0a0a0a}
.btn--solid:hover{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#0a0a0a}
.foot{position:absolute;left:6vw;bottom:32px;font-size:11px;letter-spacing:.2em;color:var(--ink-dim)}
.foot__by{color:var(--ink);border-bottom:1px solid var(--bronze);padding-bottom:1px;transition:color .3s}
.foot__by:hover{color:var(--bronze)}
/* stills "breathe": slow ambient drift so no frame ever sits dead (see PROJECT.md advice note) */
@media (prefers-reduced-motion:no-preference){
  .hero__img{animation:breathe 14s ease-in-out infinite alternate}
  .final__img{animation:breathe 18s ease-in-out infinite alternate}
  @keyframes breathe{from{scale:1}to{scale:1.04}} /* stacks on top of GSAP transform scale */
}

/* ---------- responsive ---------- */
/* dynamic viewport units so iOS/Android address bars don't cause jumps */
.hero,.cine{height:100vh;height:100svh}
.final{min-height:100vh;min-height:100svh}

@media (max-width:1024px){
  .specs{grid-template-columns:1fr;gap:10vh;padding:16vh 6vw 14vh}
  .materials{grid-template-columns:1fr}
  .materials__text{padding:14vh 6vw 8vh}
  .materials__img{height:70vw;max-height:70svh}
  .rows li{grid-template-columns:48px 1fr;gap:16px 24px}
  .rows p{grid-column:2}
}

@media (max-width:640px){
  .nav{padding:20px 22px;font-size:11px;letter-spacing:.26em}
  .nav__right{gap:18px}
  .hero__copy{left:6vw;right:6vw;bottom:9svh}
  .hero__title{font-size:clamp(72px,24vw,120px);letter-spacing:.06em}
  .hero__tag{font-size:clamp(24px,7.5vw,34px);margin-top:12px}
  .hero__sub{font-size:14px;margin-top:16px;max-width:none}
  .hero__hint{display:none}
  .cine__overlay{left:6vw;right:6vw;bottom:10svh;font-size:clamp(40px,12.5vw,64px)}
  .h-big{font-size:clamp(52px,15vw,84px)}
  .h-mid{font-size:clamp(40px,11.5vw,60px)}
  .lede{font-size:16px;margin:24px 0 32px}
  .specs__list li{padding:24px 0;flex-direction:column;align-items:flex-start;gap:8px}
  .specs__list strong{font-size:clamp(44px,15vw,64px)}
  .features{padding:14vh 6vw}
  .rows li{padding:30px 0}
  .rows h3{font-size:clamp(24px,7.5vw,34px)}
  .rows p{font-size:15px}
  .final{align-items:flex-end}
  .final__img{object-position:70% center;opacity:.75}
  .final__copy{padding:0 6vw 18svh}
  .final__tag{font-size:clamp(44px,13vw,64px)}
  .final__price{margin-bottom:28px}
  .final__cta{flex-direction:column;gap:12px}
  .btn{text-align:center;padding:16px 24px}
  .foot{bottom:20px;font-size:10px;right:6vw}
}

/* portrait phones: keep the bottle (centre of the 16:9 frame) in view */
@media (max-aspect-ratio:3/4){
  .cine__video,.hero__img{object-position:50% 45%}
}

/* reveal helpers */
.line{display:block;overflow:hidden}
.line>div{display:block}
@media (prefers-reduced-motion:reduce){.hero__img,.materials__img img{transform:none}}