:root{
  --bg:#141516;
  --cream:#FFF8D7;
  --hairline:rgba(255,248,215,.30);
  --gold:rgba(201,169,98,.30);
  --panel:#1b1c1d;
  --font:'Zalando Sans SemiExpanded','Archivo','Montserrat',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);color:var(--cream);font-family:var(--font);
  font-weight:300;overflow:hidden;-webkit-font-smoothing:antialiased;
}
strong{font-weight:400}

/* ---------- progress + topbar ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;background:rgba(255,248,215,.08)}
.progress span{display:block;height:100%;width:0;background:var(--cream);transition:width .5s ease}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 1.6rem;font-size:.8rem;letter-spacing:.06em;
  text-transform:lowercase;font-weight:250;opacity:.9;
  pointer-events:none;
}
.counter{font-variant-numeric:tabular-nums}

/* ---------- deck / slides ---------- */
#deck{height:100dvh;scroll-snap-type:y mandatory;overflow-y:auto;scrollbar-width:none}
#deck::-webkit-scrollbar{display:none}
.slide{
  min-height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;position:relative;overflow:hidden;
}
.inner{width:min(1060px,92vw);margin:auto;padding:6rem 0}
.inner.narrow{width:min(760px,90vw)}

/* section head with hairline */
.sec-head{display:flex;align-items:center;gap:1.2rem;margin-bottom:2.6rem}
.sec-head .hairline{flex:1;height:1px;background:var(--hairline);transform-origin:left;animation:lineIn 1.1s ease both}
.sec-head h2{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:400;letter-spacing:.01em;white-space:nowrap}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.eyebrow{font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;opacity:.75;margin-bottom:1.4rem;font-weight:250}
.lede{font-size:clamp(1.25rem,2.6vw,1.8rem);line-height:1.5;margin-bottom:1.4rem;font-weight:300}
.body{font-size:clamp(1rem,1.8vw,1.25rem);line-height:1.65;opacity:.92;margin-bottom:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.chips span{border:1px solid var(--hairline);border-radius:999px;padding:.55rem 1.2rem;font-size:.9rem;font-weight:250;letter-spacing:.04em}

/* ---------- hero ---------- */
.hero{display:flex}
.hero-panel{
  flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:4rem 3rem;gap:1rem;background:var(--bg);z-index:2;
}
.hero-panel h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:400;line-height:1.08;letter-spacing:.01em}
.hero-panel .tagline{font-size:clamp(1.05rem,2vw,1.35rem);opacity:.85;margin:1rem 0 2.2rem}
.hero-media{flex:1;position:relative;min-height:100dvh}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.06) brightness(.96) saturate(1.05)}
.hero-media .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,.20) 0%,rgba(20,21,22,.60) 100%)}

/* circular CTA — signature motif */
.circle-cta{
  width:190px;height:190px;border-radius:50%;cursor:pointer;
  border:1px solid var(--cream);background:transparent;color:var(--cream);
  font-family:var(--font);font-size:1.05rem;font-weight:300;letter-spacing:.05em;line-height:1.4;
  transition:background .5s ease,color .5s ease,transform .3s ease;
  position:relative;
}
.circle-cta:hover{background:var(--cream);color:#121212;transform:scale(1.04)}
.circle-cta.small{width:150px;height:150px;font-size:.95rem}

/* ---------- numbered rows (services / agenda) ---------- */
.rows{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:1.6rem;
  padding:1.5rem .4rem;border-top:1px solid var(--hairline);
}
.row:last-child{border-bottom:1px solid var(--hairline)}
.row .num{font-size:1rem;font-weight:250;opacity:.5;min-width:2.2rem}
.row h3{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:400;margin-bottom:.5rem}
.row p{font-size:1rem;line-height:1.6;opacity:.88}
.row .arrow{
  margin-left:auto;flex:none;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--cream);display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;transition:background .35s,color .35s;
}
.row:hover .arrow{background:var(--cream);color:#121212}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.contact-lines{margin-top:2rem;display:flex;flex-direction:column;gap:.9rem}
.contact-lines p{display:flex;gap:1.4rem;font-size:1.05rem}
.contact-lines span{opacity:.55;font-weight:250;min-width:4.2rem}
form{display:flex;flex-direction:column;gap:1rem}
form input,form textarea{
  background:transparent;border:1px solid var(--hairline);border-radius:11px;
  padding:1rem 1.2rem;color:var(--cream);font-family:var(--font);font-size:1rem;font-weight:300;
  outline:none;transition:border-color .3s;resize:vertical;
}
form input::placeholder,form textarea::placeholder{color:rgba(255,248,215,.55)}
form input:focus,form textarea:focus{border-color:var(--cream)}
form button{
  background:radial-gradient(circle at 50% 30%,#2D2D2D,#212121);
  border:1px solid var(--hairline);border-radius:11px;color:var(--cream);
  font-family:var(--font);font-size:1.05rem;font-weight:400;letter-spacing:.06em;
  padding:1rem;cursor:pointer;transition:background .4s,color .4s;
}
form button:hover{background:var(--cream);color:#121212}
.form-ok{color:var(--cream);font-size:1rem;opacity:.9}

/* ---------- nav ---------- */
.deck-nav{position:fixed;right:1.4rem;bottom:1.4rem;z-index:40;display:flex;gap:.7rem}
.nav-btn{
  width:54px;height:54px;border-radius:50%;cursor:pointer;
  border:1px solid var(--cream);background:rgba(20,21,22,.55);color:var(--cream);
  font-size:1.25rem;backdrop-filter:blur(6px);transition:background .3s,color .3s,opacity .3s;
}
.nav-btn:hover{background:var(--cream);color:#121212}
.nav-btn:disabled{opacity:.25;cursor:default}
.nav-btn:disabled:hover{background:rgba(20,21,22,.55);color:var(--cream)}
.dots{position:fixed;right:1.7rem;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:.7rem}
.dots button{width:8px;height:8px;border-radius:50%;border:1px solid var(--cream);background:transparent;cursor:pointer;padding:0;opacity:.5;transition:all .3s}
.dots button.active{background:var(--cream);opacity:1;transform:scale(1.35)}

/* ---------- reveal on slide enter ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.slide.active .reveal{opacity:1;transform:none}
.slide.active .reveal:nth-child(1){transition-delay:.05s}
.slide.active .reveal:nth-child(2){transition-delay:.15s}
.slide.active .reveal:nth-child(3){transition-delay:.25s}
.slide.active .reveal:nth-child(4){transition-delay:.35s}
.slide.active .reveal:nth-child(5){transition-delay:.45s}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero{flex-direction:column}
  .hero-media{min-height:46dvh;order:-1}
  .hero-panel{padding:3rem 1.6rem}
  .contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .dots{display:none}
  .sec-head h2{white-space:normal}
  .row{gap:1rem}
  .row .arrow{width:42px;height:42px}
}