/* =========================================================
   1619 Studio – Hero styles
   Colors: #141414 black · #51372A brown · #D9BC72 gold
   ========================================================= */
:root{
  --black:#141414; --brown:#51372A; --gold:#D9BC72; --white:#ffffff;
  --text:#ffffff; --text-soft:rgba(255,255,255,.82); --line:rgba(255,255,255,.35);
  --sans:"Helvetica Neue",Helvetica,"Inter Tight",Arial,sans-serif;
  --script:"Yellowtail","Brush Script MT",cursive;
  --ease:cubic-bezier(.19,1,.22,1);
  --pad:clamp(20px,4.6vw,88px);
  color-scheme:light dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--black:#0f0f0f}}
:root[data-theme="dark"]{--black:#0f0f0f}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--black);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ===== Hero shell ===== */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
/* Backgrounds: default photos for the hero slides */
.bgs{position:absolute;inset:0;z-index:-1}
.bg{position:absolute;inset:0;background:var(--img,none),var(--fb);background-size:cover;background-position:center;opacity:0;transform:scale(1.14);transition:opacity 1.4s var(--ease),transform 9s linear}
.bg.on{opacity:1;transform:scale(1)}
.bg-1{--img:url(../images/photos/reception-lounge.webp);background-position:60% center;--fb:radial-gradient(60% 70% at 72% 40%,#cfc6bc,transparent 70%),linear-gradient(180deg,#a99d92,#7d7067)}
.bg-2{--img:url(../images/photos/cafe-lounge.webp);background-position:55% center;--fb:radial-gradient(60% 70% at 70% 35%,#c9c2b8,transparent 70%),linear-gradient(180deg,#8e857c,#5e554e)}
.bg-3{--img:url(../images/photos/living-room.webp);background-position:45% center;--fb:radial-gradient(60% 70% at 75% 40%,#d6c3ad,transparent 70%),linear-gradient(180deg,#a68f7a,#6f5a49)}
/* brand curtain (02): gold then brown sweep across, photo swaps underneath, panels pull away */
.bgs.instant .bg{transition:transform 9s linear}
.curtain{position:absolute;inset:0;z-index:2;pointer-events:none}
.curtain i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left}
.curtain .c1{background:var(--gold)}
.curtain .c2{background:var(--brown)}
.curtain.cover i{transform:scaleX(1)}
.curtain.in i{animation:c-in .8s cubic-bezier(.77,0,.18,1) both}
.curtain.in .c2{animation-delay:.09s}
.curtain.out i{animation:c-out .85s cubic-bezier(.77,0,.18,1) both}
.curtain.out .c1{animation-delay:.1s}
@keyframes c-in{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
@keyframes c-out{from{transform:scaleX(1);transform-origin:right}to{transform:scaleX(0);transform-origin:right}}
.bgs::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,20,.72) 0%,rgba(20,20,20,.38) 50%,rgba(20,20,20,.12) 100%),linear-gradient(0deg,rgba(20,20,20,.55) 0%,transparent 40%)}

/* ===== Header ===== */
header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px var(--pad) 0;position:relative;z-index:10}
.logo{display:flex;align-items:center;gap:10px;font-size:1.2rem;letter-spacing:.02em}
.logo img{display:block;height:clamp(44px,5.2vw,64px);width:auto;transition:opacity .4s}
.logo:hover img{opacity:.85}
nav.main{display:flex;gap:clamp(24px,5vw,90px)}
nav.main a,.phone{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;position:relative;padding:6px 0}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
nav.main a:hover::after{transform:scaleX(1);transform-origin:left}
.phone{font-size:1rem;letter-spacing:.02em;text-transform:none}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:1px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger i:first-child{top:17px}.burger i:last-child{top:25px}
.menu-open .burger i:first-child{top:21px;transform:rotate(45deg)}
.menu-open .burger i:last-child{top:21px;transform:rotate(-45deg)}

/* ===== Body grid ===== */
.stage{flex:1;display:grid;grid-template-columns:1fr auto;gap:24px;padding:clamp(28px,5vh,64px) var(--pad) 0}
.word{grid-column:1/-1;margin:0;font-weight:200;font-size:clamp(3.6rem,13.4vw,15rem);line-height:.82;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap;display:flex;overflow:hidden;padding-bottom:.04em}

.slides{display:grid;align-self:end;max-width:640px;margin-top:clamp(28px,5vh,56px)}
.slide{grid-area:1/1;visibility:hidden}
.slide.on{visibility:visible}
.ln{display:block}
.ln>*{display:block;clip-path:inset(0 100% 0 0);transform:translateX(-46px);transition:clip-path 1.1s var(--ease),transform 1.4s var(--ease)}
.slide.on .ln>*{clip-path:inset(0 0 0 0);transform:none}
.slide.on .ln:nth-child(1)>*{transition-delay:.1s}
.slide.on .ln:nth-child(2)>*{transition-delay:.22s}
.slide.on .ln:nth-child(3)>*{transition-delay:.36s}
.slide.on .ln:nth-child(4)>*{transition-delay:.5s}
.slide.out .ln>*{clip-path:inset(0 0 0 100%);transform:translateX(46px);transition-duration:.55s,.7s;transition-delay:0s}
/* gold button grows like a bar from the left (keeps its clipped corner) */
.ln>.btn{clip-path:polygon(0 0,0 0,0 16px,0 100%,0 100%);transform:none}
.slide.on .ln>.btn{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.slide.out .ln>.btn{clip-path:polygon(100% 0,100% 0,100% 16px,100% 100%,100% 100%)}
.tag{display:flex!important;align-items:center;gap:14px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.tag::before{content:"↘";font-size:1rem;letter-spacing:0}
.slide h1,.slide h2{font-weight:300;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.08;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 18px}
.lead{font-weight:300;font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.65;color:var(--text-soft);margin:0 0 30px;max-width:54ch}
.btn{display:inline-flex!important;width:max-content;align-items:center;gap:12px;background:var(--gold);color:var(--black);padding:19px 34px 19px 30px;font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--white);transform:translateX(-101%);transition:transform .6s var(--ease);z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn .arr{display:inline-block;transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translate(4px,-4px)}

.side{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right;padding-top:clamp(20px,4vh,40px)}
.tabs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tabs button{background:none;border:0;padding:4px 0;color:var(--text);font:inherit;font-size:1rem;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;opacity:.55;display:flex;align-items:center;gap:12px;margin-left:auto;transition:opacity .4s}
.tabs button::before{content:"";width:0;height:1px;background:var(--gold);transition:width .6s var(--ease)}
.tabs button,.script,nav.main a,.phone,.word{text-shadow:0 1px 18px rgba(0,0,0,.45)}
.tabs button:hover{opacity:.85}
.tabs button[aria-selected="true"]{opacity:1}
.tabs button[aria-selected="true"]::before{width:34px}
.script{font-family:var(--script);font-size:clamp(1.6rem,2.4vw,2.4rem);transform:rotate(-4deg);display:inline-block}
.script-wrap{display:block}

/* ===== Footer controls ===== */
.controls{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);padding:clamp(28px,5vh,52px) var(--pad) calc(30px + env(safe-area-inset-bottom,0px))}
.num{font-size:clamp(2.2rem,3.4vw,3.2rem);font-weight:300;color:transparent;-webkit-text-stroke:1px var(--text);line-height:1;min-width:2.2ch}
.tot{font-size:.85rem;letter-spacing:.12em;opacity:.8;white-space:nowrap}
.bar{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.bar i.run{animation:fill var(--dur,7000ms) linear forwards}
.paused .bar i.run{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.arrows{display:flex}
.arrows button{width:54px;height:54px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s}
.arrows button+button{border-left:0}
.arrows button:hover{background:var(--gold);border-color:var(--gold);color:var(--black)}
.arrows svg{width:18px;height:18px}

/* offset frame lines (signature detail) */
.frame{position:absolute;z-index:-1;border:1px solid var(--line);pointer-events:none;transition:clip-path 1.8s var(--ease) .6s;clip-path:inset(0 100% 100% 0)}
.ready .frame{clip-path:inset(0 0 0 0)}
.tabs{position:relative;padding:20px 0 20px 48px}
.tabs::after{content:"";position:absolute;inset:0 -22px -26px 0;border:1px solid var(--line);pointer-events:none;clip-path:inset(0 100% 100% 0);transition:clip-path 1.8s var(--ease) .6s}
.ready .tabs::after{clip-path:inset(0)}

/* ===== Mobile menu ===== */
.drawer{position:fixed;inset:0;z-index:9;background:var(--brown);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 var(--pad);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease)}
.menu-open .drawer{clip-path:inset(0)}
.drawer a{font-size:clamp(2rem,9vw,3rem);font-weight:300;text-transform:uppercase;letter-spacing:-.02em}
.drawer a:hover{color:var(--gold)}

@media (max-width:980px){
  nav.main,.phone{display:none}
  .burger{display:block}
  .stage{grid-template-columns:1fr}
  .side{flex-direction:row;align-items:flex-end;justify-content:space-between;text-align:left;padding-top:28px;order:3}
  .tabs{flex-direction:row;flex-wrap:wrap;gap:6px 18px}
  .tabs{padding:0}
  .tabs::after{display:none}
  .tabs button{font-size:.72rem;margin:0}
}
@media (max-width:560px){
  .bgs::after{background:linear-gradient(0deg,rgba(20,20,20,.8) 0%,rgba(20,20,20,.45) 60%,rgba(20,20,20,.3) 100%)}
  .script{display:none}
  .arrows button{width:46px;height:46px}
  .btn{padding:17px 26px 17px 22px}
  .tabs{gap:6px 14px}
  .tabs button::before{display:none}
  .tabs button[aria-selected="true"]{color:var(--gold)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
  .bar i{transform:scaleX(1)}
}