/* V2 refinement: the work stays the interface. */

:root{
  --maxw:1440px;
  --nav-height:72px;
  --media-radius:2px;
}

html{
  color-scheme:dark;
  overflow-x:clip;
}
body{ overflow-x:clip; }
a,
button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(147,169,198,.22);
}
#top,
#order,
#work,
#hospitality,
#residence,
#skincare,
#jewelry,
#services,
#process,
#contact{
  scroll-margin-top:calc(var(--nav-height) + 1rem);
}
#order{ scroll-margin-top:0; }

.skip-link{
  position:fixed;
  top:.75rem;
  left:.75rem;
  z-index:300;
  padding:.7rem 1rem;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  font-weight:600;
  transform:translateY(-180%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }
.nav-sentinel{
  position:absolute;
  top:24px;
  left:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.nav{
  min-height:var(--nav-height);
  padding-top:max(1rem,env(safe-area-inset-top,0px));
  padding-right:max(var(--pad),env(safe-area-inset-right,0px));
  padding-bottom:1rem;
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));
}
.nav.is-stuck{
  padding-top:max(.8rem,env(safe-area-inset-top,0px));
  padding-right:max(var(--pad),env(safe-area-inset-right,0px));
  padding-bottom:.8rem;
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));
  background:rgba(11,11,12,.86);
  box-shadow:0 18px 48px rgba(0,0,0,.16);
}
.nav__cta,
.cta{
  white-space:nowrap;
}
.nav__cta:active,
.cta:active,
.row:active{
  transform:translateY(1px) scale(.99);
}

/* Hero: 3 columns wide, 2 on tablet, 1 full-width mixed reel on mobile. */
.hero{
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  align-items:flex-end;
  isolation:isolate;
}
.hero__wall{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px;
  background:rgba(243,239,231,.16);
}
.vcol{
  position:relative;
  min-width:0;
}
.vcol video{
  max-width:none;
  filter:saturate(1.02) contrast(1.01) brightness(.94);
  transform:scale(1.012);
  transition:filter .55s var(--ease), transform 1.2s var(--ease);
}
.vcol:nth-child(1) video{ object-position:48% center; }
.vcol:nth-child(2) video{ object-position:50% center; }
.vcol:nth-child(3) video{ object-position:52% center; }
.hero__scrim{
  background:
    linear-gradient(180deg, rgba(11,11,12,.38) 0%, rgba(11,11,12,.02) 24%, rgba(11,11,12,.06) 55%, rgba(11,11,12,.82) 100%),
    linear-gradient(90deg, rgba(11,11,12,.34) 0%, rgba(11,11,12,.08) 35%, transparent 67%);
}
.hero__index{
  position:absolute;
  z-index:2;
  top:calc(var(--nav-height) + .65rem);
  inset-inline:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  pointer-events:none;
}
.hero__project{
  min-width:0;
  padding:.7rem clamp(.75rem,2vw,2rem);
  pointer-events:none;
  color:rgba(243,239,231,.74);
  text-shadow:0 1px 18px rgba(11,11,12,.78);
  transition:color .35s var(--ease), transform .35s var(--ease);
}
.hero__project + .hero__project{
  border-left:1px solid rgba(243,239,231,.18);
}
.hero__project strong{
  display:block;
  overflow:hidden;
  font-family:var(--display);
  font-size:clamp(.66rem,.56rem + .32vw,.88rem);
  font-weight:500;
  letter-spacing:-.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hero__project span{
  display:block;
  margin-top:.18rem;
  font-size:.68rem;
  color:rgba(243,239,231,.48);
}
.hero__project:hover,
.hero__project:focus-visible{
  color:var(--ink);
  transform:translateY(-2px);
}
.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1.38fr) minmax(19rem,.62fr);
  grid-template-rows:auto;
  align-items:end;
  gap:clamp(2rem,4.6vw,4.5rem);
  padding-right:max(var(--pad),env(safe-area-inset-right,0px));
  padding-bottom:max(clamp(1.6rem,4.2vh,3.4rem),env(safe-area-inset-bottom,0px));
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));
}
.hero h1{
  grid-column:1;
  grid-row:1;
  max-width:18ch;
  font-size:clamp(2.8rem,1.5rem + 4.6vw,5.35rem);
  line-height:.98;
  text-shadow:0 2px 32px rgba(11,11,12,.72);
}
.hero__aside{
  display:flex;
  grid-column:2;
  grid-row:1;
  align-self:end;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(.85rem,1.2vw,1.05rem);
  padding-bottom:.25rem;
}
.hero__sub{
  max-width:34ch;
  margin:0;
  font-size:clamp(.96rem,.9rem + .25vw,1.08rem);
  line-height:1.48;
  color:rgba(243,239,231,.88);
}
.hero__row{
  margin:0;
}
.hero .cta{
  padding:.78rem 1.2rem;
}
.hero__eyebrow,
.scrollhint{
  display:none;
}

/* The portfolio becomes atmosphere, not a long sequence of case-study pages. */
.order{
  position:relative;
  display:flex;
  min-height:100vh;
  min-height:100dvh;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  padding:
    max(clamp(6.5rem,13vh,9rem),calc(var(--nav-height) + 2rem))
    max(var(--pad),env(safe-area-inset-right,0px))
    max(clamp(3.5rem,7vh,5.5rem),env(safe-area-inset-bottom,0px))
    max(var(--pad),env(safe-area-inset-left,0px));
  background:var(--bg);
}
.order__bg,
.order__shade{
  position:absolute;
  inset:0;
}
.order__bg{
  z-index:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px;
  background:rgba(243,239,231,.12);
}
.order__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72) contrast(1.04) brightness(.34);
}
.order__bg img:nth-child(1){ object-position:50% center; }
.order__bg img:nth-child(2){ object-position:50% center; }
.order__bg img:nth-child(3){ object-position:54% center; }
.order__shade{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(11,11,12,.86) 0%,rgba(11,11,12,.44) 32%,rgba(11,11,12,.92) 100%),
    linear-gradient(90deg,rgba(11,11,12,.76) 0%,rgba(11,11,12,.22) 58%,rgba(11,11,12,.58) 100%);
}
.order__in{
  position:relative;
  z-index:2;
  display:grid;
  align-self:stretch;
  width:min(100%,var(--maxw));
  margin-inline:auto;
  grid-template-columns:minmax(0,1.08fr) minmax(19rem,.72fr);
  grid-template-rows:minmax(min-content,1fr) auto auto;
  gap:clamp(1.75rem,3vw,2.4rem) clamp(2.5rem,7vw,7rem);
  align-items:start;
  padding-top:clamp(1.25rem,2.5vh,1.5rem);
}
.order__lead .label{
  display:block;
  color:var(--acc);
  line-height:1.2;
}
.order__lead h2{
  max-width:15ch;
  margin-top:.8rem;
  font-family:var(--display);
  font-size:clamp(2.5rem,1.35rem + 3.5vw,4.8rem);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.order__lead p{
  max-width:49ch;
  margin-top:1.2rem;
  color:rgba(243,239,231,.82);
  font-size:clamp(.95rem,.9rem + .22vw,1.06rem);
  line-height:1.55;
}
.order__prices{
  border-top:1px solid rgba(243,239,231,.34);
}
.order__price{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.45rem 1.5rem;
  align-items:baseline;
  padding:1.2rem 0 1.35rem;
  border-bottom:1px solid rgba(243,239,231,.2);
}
.order__price>span{
  color:rgba(243,239,231,.8);
  font-size:.82rem;
}
.order__price strong{
  font-family:var(--display);
  font-size:clamp(1.8rem,1.25rem + 1.5vw,2.65rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.order__price p{
  grid-column:1 / -1;
  margin:0;
  color:rgba(243,239,231,.72);
  font-size:.86rem;
  line-height:1.45;
}
.order__note{
  margin:.85rem 0 0;
  color:rgba(243,239,231,.68);
  font-size:.8rem;
  line-height:1.45;
}
.order__flow{
  display:grid;
  grid-column:1 / -1;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;
  padding:0;
  border-top:1px solid rgba(243,239,231,.34);
  list-style:none;
}
.order__flow li{
  min-width:0;
  padding:1.25rem clamp(1rem,3vw,2.5rem) .25rem 0;
}
.order__flow li+li{
  padding-left:clamp(1rem,3vw,2.5rem);
  border-left:1px solid rgba(243,239,231,.2);
}
.order__flow span{
  display:block;
  color:var(--acc);
  font-size:.72rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
}
.order__flow strong{
  display:block;
  margin-top:.55rem;
  font-family:var(--display);
  font-size:clamp(1.25rem,1.05rem + .55vw,1.7rem);
  font-weight:500;
  line-height:1.08;
}
.order__flow p{
  max-width:36ch;
  margin:.55rem 0 0;
  color:rgba(243,239,231,.78);
  font-size:.9rem;
  line-height:1.48;
}
.order__action{
  display:flex;
  grid-column:1 / -1;
  justify-content:flex-end;
}
.order__action .cta{
  padding:.82rem 1.2rem;
}
.foot__fine{
  line-height:1.35;
  text-align:center;
}
.foot__fine strong{
  display:block;
  color:var(--ink-soft);
  font-weight:500;
}
.foot__fine small{
  display:block;
  margin-top:.2rem;
  color:var(--ink-faint);
  font-size:.72rem;
}

@media (max-width:900px){
  .order{
    min-height:auto;
    align-items:flex-start;
  }
  .order__in{
    align-self:auto;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:2rem;
    padding-top:0;
  }
  .order__lead h2{
    max-width:17ch;
  }
  .order__prices{
    width:min(100%,34rem);
  }
}

@media (max-width:680px){
  .order{
    padding-top:clamp(6rem,14vh,7.5rem);
    padding-bottom:max(3.5rem,env(safe-area-inset-bottom,0px));
  }
  .order__bg{
    grid-template-columns:1fr;
  }
  .order__bg img:nth-child(n+2){
    display:none;
  }
  .order__bg img{
    filter:saturate(.68) contrast(1.04) brightness(.28);
  }
  .order__shade{
    background:linear-gradient(180deg,rgba(11,11,12,.84) 0%,rgba(11,11,12,.66) 38%,rgba(11,11,12,.94) 100%);
  }
  .order__lead h2{
    max-width:100%;
    font-size:clamp(2.3rem,10.7vw,2.9rem);
  }
  .order__in{
    gap:1.85rem;
  }
  .order__in>*{
    width:100%;
    min-width:0;
  }
  .order__price{
    grid-template-columns:1fr;
    gap:.35rem;
  }
  .order__price strong,
  .order__price p{
    grid-column:1;
  }
  .order__flow{
    grid-template-columns:1fr;
    min-width:0;
  }
  .order__flow li{
    display:grid;
    grid-template-columns:2.2rem minmax(0,1fr);
    gap:.35rem .75rem;
    padding:1rem 0 1.15rem;
  }
  .order__flow li+li{
    padding-left:0;
    border-top:1px solid rgba(243,239,231,.2);
    border-left:0;
  }
  .order__flow span{
    grid-column:1;
    grid-row:1 / 3;
    padding-top:.18rem;
  }
  .order__flow strong{
    grid-column:2;
    margin-top:0;
  }
  .order__flow p{
    grid-column:2;
    margin-top:.2rem;
  }
  .order__action{
    justify-content:flex-start;
  }
  .foot__fine{
    text-align:left;
  }
}

/* Portfolio: each film is close to viewport height, frames read as a sequence. */
.work{
  padding-block:clamp(5rem,11vh,9rem) 0;
}
.work__head{
  display:block;
  max-width:var(--maxw);
  padding-bottom:clamp(3rem,6vw,5rem);
  border-bottom:0;
}
.work__head h2{
  max-width:17ch;
  font-size:clamp(2.25rem,1.35rem + 3.4vw,4.4rem);
  line-height:1.02;
}
.work__head p{
  max-width:58ch;
  margin-top:1.25rem;
  font-size:1.02rem;
}
.piece{
  padding-block:clamp(3.5rem,8vh,6.5rem);
}
.piece + .piece{
  border-top-color:var(--line);
}
.piece__top{
  grid-template-columns:minmax(0,1fr) minmax(300px,48dvh);
  min-height:min(900px,calc(100dvh - 5.5rem));
  gap:clamp(2.5rem,7vw,7rem);
}
.piece:nth-of-type(even) .piece__top{
  grid-template-columns:minmax(300px,48dvh) minmax(0,1fr);
}
.piece__stage{
  width:min(100%,48dvh);
  justify-self:end;
  border-radius:var(--media-radius);
  box-shadow:0 58px 130px -68px rgba(0,0,0,.92);
}
.piece:nth-of-type(even) .piece__stage{
  justify-self:start;
}
.piece__cap{
  max-width:52rem;
}
.piece__cap h3{
  max-width:22ch;
  font-size:clamp(1.9rem,1.15rem + 2.2vw,3.35rem);
  line-height:1.04;
}
.piece__cap .note{
  max-width:53ch;
  margin-top:1.15rem;
  font-size:1.03rem;
  line-height:1.65;
}
.piece__tag{
  display:none;
}
.piece__spec{
  margin-top:1.9rem;
}
.strip{
  gap:.5rem;
  margin-top:clamp(2rem,4vw,3.25rem);
  padding-bottom:.85rem;
}
.strip figure{
  width:clamp(156px,20vw,286px);
  border-radius:var(--media-radius);
  filter:grayscale(.08) brightness(.96);
}
.strip figure:hover{
  transform:translateY(-3px);
}

/* Beauty keeps the product visible on entry, at a calmer scale than property. */
.piece--beauty .piece__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,43dvh);
  min-height:min(820px,calc(100dvh - 5.5rem));
  align-items:center;
}
.piece--beauty .piece__cap{
  width:min(100%,54rem);
}
.piece--beauty .piece__stage{
  align-self:center;
  justify-self:end;
  width:min(100%,43dvh);
  margin-top:0;
}

.still-piece{
  padding-block:clamp(5rem,11vh,9rem);
}
.still-piece__head{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(300px,.72fr);
  gap:clamp(2.5rem,7vw,7rem);
  align-items:end;
  max-width:none;
}
.still-piece__head h3{
  max-width:22ch;
  font-size:clamp(2rem,1.2rem + 2.7vw,3.8rem);
}
.still-piece__head .note{
  max-width:54ch;
  margin-top:1.2rem;
  font-size:1.02rem;
  line-height:1.65;
}
.still-grid{
  gap:clamp(.3rem,.7vw,.62rem);
}
.still-grid figure{
  border-radius:var(--media-radius);
  filter:grayscale(.06) brightness(.96);
}

/* Services and process: editorial rows instead of generic numbered cards. */
.menu__head{
  display:block;
}
.menu__head p{
  margin-top:1rem;
  max-width:50ch;
}
.row{
  grid-template-columns:minmax(7.5rem,.25fr) minmax(0,1fr) auto;
  gap:clamp(1rem,4vw,3.5rem);
}
.row:last-child{
  border-bottom:0;
}
.row__type{
  align-self:start;
  padding-top:.35rem;
  color:var(--acc);
  font-size:.82rem;
  font-weight:500;
}
.row__price,
.piece__spec,
.still-piece__meta{
  font-variant-numeric:tabular-nums;
}
.row__no{
  display:none;
}
.row:hover{
  background:rgba(243,239,231,.025);
}

.proc{
  display:block;
  padding-block:clamp(5rem,11vh,9rem);
}
.proc__title{
  margin-bottom:clamp(2rem,5vw,3.6rem);
  font-family:var(--display);
  font-size:clamp(2rem,1.2rem + 3vw,3.8rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.03em;
}
.proc__step{
  display:grid;
  grid-template-columns:clamp(2.5rem,4vw,4rem) minmax(12rem,.5fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);
  align-items:start;
  padding:clamp(1.7rem,3.5vw,2.7rem) 0;
  border-top:1px solid var(--line);
}
.proc__step .n{
  display:block;
  padding-top:.35rem;
  color:var(--acc);
  font-size:.78rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
}
.proc__step h3{
  margin:0;
  font-size:clamp(1.35rem,1.05rem + 1vw,2rem);
}
.proc__step p{
  max-width:52ch;
  font-size:1rem;
}

.contact__in{
  display:flex;
  min-height:82dvh;
  flex-direction:column;
  justify-content:flex-end;
}
.contact__in h2{
  font-size:clamp(2.6rem,1.35rem + 4.4vw,5.15rem);
}
.contact__in p{
  max-width:43ch;
}

@media (max-width:900px){
  .hero__in{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:.9rem;
  }
  .hero h1{
    grid-column:1;
    grid-row:1;
    max-width:16ch;
  }
  .hero__aside{
    grid-column:1;
    grid-row:2;
    gap:.8rem;
    padding-bottom:0;
  }
  .hero__sub{
    max-width:35ch;
  }
}

@media (max-width:1080px){
  .hero__wall,
  .hero__index{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .vcol:nth-child(3),
  .hero__project:nth-child(3){
    display:none;
  }
}

@media (max-width:820px){
  .piece__top,
  .piece:nth-of-type(even) .piece__top,
  .piece--beauty .piece__top{
    grid-template-columns:minmax(0,1fr);
    min-height:0;
  }
  .piece__stage,
  .piece:nth-of-type(even) .piece__stage,
  .piece--beauty .piece__stage{
    width:min(100%,43dvh);
    justify-self:center;
  }
  .still-piece__head{
    grid-template-columns:minmax(0,1fr);
    gap:1.25rem;
  }
}

@media (max-width:680px){
  :root{ --nav-height:64px; }
  .nav{
    padding-top:max(.625rem,env(safe-area-inset-top,0px));
    padding-bottom:.625rem;
  }
  .nav.is-stuck{
    padding-top:max(.625rem,env(safe-area-inset-top,0px));
    padding-bottom:.625rem;
  }
  .brand,
  .lang a,
  .nav__cta,
  .foot__soc a{
    display:inline-flex;
    min-height:44px;
    align-items:center;
  }
  .lang a{
    min-width:28px;
    justify-content:center;
  }
  .nav__r{ gap:.55rem; }
  .nav__cta{ padding:.5rem .8rem; }
  .hero{
    min-height:100vh;
    min-height:100dvh;
  }
  .hero__wall{
    grid-template-columns:minmax(0,1fr);
  }
  .hero__index{
    grid-template-columns:minmax(0,1fr);
  }
  .vcol:nth-child(n+2),
  .hero__project:nth-child(n+2){
    display:none;
  }
  .hero__index{
    top:calc(var(--nav-height) + .55rem);
  }
  .hero__project{
    padding:.5rem .45rem;
  }
  .hero__project strong{
    font-family:var(--sans);
    font-size:.62rem;
    letter-spacing:0;
  }
  .hero__project span{
    display:none;
  }
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(11,11,12,.48) 0%, rgba(11,11,12,.03) 24%, rgba(11,11,12,.08) 52%, rgba(11,11,12,.92) 100%);
  }
  .hero__in{
    padding-bottom:max(1.65rem,env(safe-area-inset-bottom,0px));
  }
  .hero h1{
    max-width:14ch;
    font-size:clamp(2.25rem,10.4vw,3.35rem);
  }
  .hero__sub{
    max-width:32ch;
    font-size:.92rem;
  }
  .hero .cta{
    padding:.7rem 1rem;
    font-size:.88rem;
  }
  .row{
    grid-template-columns:1fr;
    gap:.6rem;
  }
  .row__type,
  .row__price{
    grid-column:1;
  }
  .row__price{
    margin-top:.3rem;
  }
  .proc__step{
    grid-template-columns:2.3rem minmax(0,1fr);
    gap:.55rem .85rem;
  }
  .proc__step .n{
    grid-column:1;
    grid-row:1;
  }
  .proc__step h3{
    grid-column:2;
    grid-row:1;
  }
  .proc__step p{
    grid-column:2;
    grid-row:2;
  }
  .contact__in{
    min-height:72dvh;
  }
}

@media (prefers-reduced-motion:reduce){
  .nav,
  .skip-link,
  .vcol video,
  .hero__project,
  .nav__cta,
  .cta,
  .cta .arr,
  .row{
    transition:none;
  }
}

@media (max-width:360px){
  .nav{
    padding-right:max(.75rem,env(safe-area-inset-right,0px));
    padding-left:max(.75rem,env(safe-area-inset-left,0px));
  }
  .brand{
    font-size:1rem;
  }
  .nav__r{
    gap:.35rem;
  }
  .lang{
    gap:.1rem;
    font-size:.72rem;
  }
  .lang a{
    min-width:24px;
  }
  .nav__cta{
    padding-inline:.68rem;
    font-size:.76rem;
  }
}