/* ===================================================================
   KASA — Interior Architecture & Design
   Design tokens
=================================================================== */
:root{
  --limestone: #D8CDBD;
  --travertine: #CDBDA7;
  --plaster: #F6F2EC;
  --bronze: #7C5F45;
  --espresso: #33271F;
  --charcoal: #2B2B2B;
  --offwhite: #FAF8F5;

  --serif: 'Cormorant Garamond', serif;
  --sans: 'Work Sans', sans-serif;

  --max-w: 1400px;
  --gutter: clamp(24px, 6vw, 96px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--plaster);
  color: var(--espresso);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- Typography ---------- */
h1,h2,h3,.serif{
  font-family: var(--serif);
  font-weight: 300;
  color: var(--espresso);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
h1{ font-size: clamp(2.6rem, 6vw, 5.4rem); }
h2{ font-size: clamp(2rem, 4vw, 3.4rem); }
h3{ font-size: clamp(1.3rem, 2vw, 1.8rem); font-style: italic; }

p{ font-size: 1rem; line-height: 1.85; color:#5c4f45; max-width: 54ch; }
.eyebrow{
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.68rem;
  color: var(--bronze);
  font-weight: 500;
}

/* ---------- Layout helpers ---------- */
.wrap{ max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
section{ position: relative; }
.pad{ padding: clamp(80px, 12vw, 180px) 0; }

/* ---------- Nav ---------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 28px var(--gutter);
  transition: background .5s var(--ease), padding .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.scrolled{
  background: rgba(246,242,236,0.86);
  backdrop-filter: blur(10px);
  padding: 16px var(--gutter);
  border-bottom: 1px solid rgba(51,39,31,0.08);
}
.nav .logo{
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.3em;
  color: var(--offwhite);
  transition: color .5s var(--ease);
}
.nav.scrolled .logo, .nav.on-light .logo{ color: var(--espresso); }
.nav ul{ display:flex; gap: clamp(20px, 3vw, 44px); list-style:none; margin:0; padding:0; }
.nav a.navlink{
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--offwhite); opacity: .85; transition: opacity .5s var(--ease), color .5s var(--ease);
  padding-bottom: 4px; border-bottom: 1px solid transparent;
}
.nav.scrolled a.navlink, .nav.on-light a.navlink{ color: var(--espresso); }
.nav a.navlink:hover{ opacity: 1; border-color: var(--bronze); }
.nav .menu-btn{ display:none; background:none; border:none; cursor:pointer; }

@media (max-width: 860px){
  .nav ul{
    position: fixed; inset: 0; height: 100dvh; width: 100%;
    background: var(--espresso); flex-direction: column;
    align-items: center; justify-content: center; gap: 32px;
    transform: translateY(-100%); transition: transform .6s var(--ease);
  }
  .nav ul.open{ transform: translateY(0); }
  .nav ul a{ color: var(--offwhite) !important; font-size: 0.9rem; }
  .nav .menu-btn{ display:block; z-index: 200; }
  .nav .menu-btn span, .nav .menu-btn span::before, .nav .menu-btn span::after{
    content:''; display:block; width:22px; height:1px; background: var(--offwhite);
    position:relative; transition: transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
  }
  .nav.scrolled .menu-btn span, .nav.scrolled .menu-btn span::before, .nav.scrolled .menu-btn span::after,
  .nav.on-light .menu-btn span, .nav.on-light .menu-btn span::before, .nav.on-light .menu-btn span::after{
    background: var(--espresso);
  }
  .nav .menu-btn span::before{ position:absolute; top:-7px; }
  .nav .menu-btn span::after{ position:absolute; top:7px; }
  .menu-btn.active span{ background: transparent !important; }
  .menu-btn.active span::before{ transform: translateY(7px) rotate(45deg); background: var(--offwhite) !important; }
  .menu-btn.active span::after{ transform: translateY(-7px) rotate(-45deg); background: var(--offwhite) !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap: 12px;
  border: 1px solid var(--bronze); color: var(--espresso);
  padding: 14px 30px; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 2px; transition: background .4s var(--ease), color .4s var(--ease);
}
.btn:hover{ background: var(--bronze); color: var(--offwhite); }
.btn.light{ border-color: rgba(250,248,245,.6); color: var(--offwhite); }
.btn.light:hover{ background: var(--offwhite); color: var(--espresso); }

/* ---------- Hero / Cinematic scroll (real photography) ---------- */
.cine-section{ height: 450vh; position: relative; background: #150f0b; }
.cine-sticky{
  position: sticky; top:0; height: 100vh; overflow: hidden;
}
.cine-frame{
  position:absolute; inset:0; opacity:0;
  transition: opacity 1.1s var(--ease);
}
.cine-frame.active{ opacity:1; }
.cine-frame img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.06);
  transition: transform 6s linear;
}
.cine-frame.active img{ transform: scale(1.16); }
.cine-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(21,15,11,.55) 0%, rgba(21,15,11,.25) 40%, rgba(21,15,11,.65) 100%);
}
.cine-copy{
  position: absolute; inset:0; z-index: 5; display:flex; align-items:center; justify-content:center;
  text-align:center; color: var(--offwhite);
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  padding: 0 24px; pointer-events:none;
}
.cine-copy.show{ opacity:1; transform: translateY(0); }
.cine-copy .eyebrow{ color: var(--limestone); }
.cine-copy h1{ color: var(--offwhite); margin: 14px 0 0; text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.cine-copy p.lead{ color: rgba(250,248,245,.82); margin: 22px auto 0; font-size:1.05rem; }
.cine-progress{
  position:absolute; bottom: 40px; left:50%; transform: translateX(-50%);
  display:flex; gap:8px; z-index:6;
}
.cine-progress span{ width:26px; height:2px; background: rgba(250,248,245,.28); transition: background .4s; }
.cine-progress span.active{ background: var(--limestone); }
.scroll-hint{
  position:absolute; bottom: 40px; right: var(--gutter); z-index:6;
  color: rgba(250,248,245,.6); font-size:0.68rem; letter-spacing:.22em; text-transform:uppercase;
  writing-mode: vertical-rl;
}

/* ---------- Mobile hero: no scroll-jacking, just a calm auto-advancing slideshow ---------- */
@media (max-width: 760px){
  .cine-section{ height: 100dvh; }
  .cine-sticky{ height: 100dvh; }
  .cine-copy h1{ font-size: clamp(2.1rem, 8vw, 2.8rem); }
  .cine-copy .lead{ font-size: 0.92rem; }
  .scroll-hint{ display:none; }
  .cine-progress{ bottom: 28px; }
}

/* ---------- Section: Intro / editorial ---------- */
.editorial{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,100px);
  align-items:center;
}
.editorial.reverse{ direction: rtl; }
.editorial.reverse > *{ direction: ltr; }
@media (max-width: 900px){ .editorial{ grid-template-columns: 1fr; } }
.editorial img{ width:100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

/* ---------- Featured grid ---------- */
.grid-2{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 24px; }
.grid-2 .tall{ aspect-ratio: 3/4; }
.grid-2 .short{ aspect-ratio: 4/3; }
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr; } }
.grid-2 img{ width:100%; height:100%; object-fit:cover; }
.card-cap{ margin-top: 18px; display:flex; justify-content:space-between; align-items:baseline; gap: 16px; }
.card-cap .name{ font-family: var(--serif); font-size: 1.4rem; }
.card-cap .loc{ font-size: 0.68rem; letter-spacing:.18em; text-transform:uppercase; color: var(--bronze); }

/* ---------- Services / Expertise list ---------- */
.expertise-list{ border-top: 1px solid rgba(51,39,31,.15); }
.expertise-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 30px 0; border-bottom: 1px solid rgba(51,39,31,.15);
  transition: padding-left .4s var(--ease);
}
.expertise-row:hover{ padding-left: 14px; }
.expertise-row .num{ font-family: var(--serif); font-style:italic; color: var(--travertine); font-size:1.1rem; width: 60px; }
.expertise-row .title{ font-family: var(--serif); font-size: 1.5rem; flex:1; }
.expertise-row .tag{ font-size: 0.68rem; letter-spacing:.18em; text-transform:uppercase; color: var(--bronze); }

/* ---------- Footer / contact invite ---------- */
.contact-invite{ background: var(--espresso); color: var(--offwhite); }
.contact-invite h2{ color: var(--offwhite); }
.contact-invite p{ color: rgba(250,248,245,.72); }
footer{ background: var(--espresso); color: rgba(250,248,245,.55); padding: 40px var(--gutter); font-size: 0.72rem; letter-spacing:.05em; }
.foot-row{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; max-width: var(--max-w); margin:0 auto; }
.foot-links{ display:flex; gap: 24px; list-style:none; padding:0; margin:0; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ---------- Coming soon pages ---------- */
.soon{
  min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background: var(--plaster); padding: 120px 24px 60px;
}
.soon .eyebrow{ margin-bottom: 18px; }
.soon p{ margin: 20px auto 0; }

/* ---------- Simple page hero (Studio / Projects) ---------- */
.page-hero{
  padding: clamp(160px,20vw,220px) 0 60px; background: var(--offwhite);
  border-bottom: 1px solid rgba(51,39,31,.1);
}
.page-hero .eyebrow{ margin-bottom: 16px; }

/* ---------- Values grid (Studio) ---------- */
.values{ display:grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
@media (max-width: 860px){ .values{ grid-template-columns: 1fr; } }
.values .value h3{ font-style:normal; margin: 0 0 10px; }

/* ---------- Journal teaser card ---------- */
.journal-row{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
@media (max-width: 900px){ .journal-row{ grid-template-columns: 1fr; } }
.journal-card img{ aspect-ratio: 4/3; object-fit:cover; margin-bottom: 18px; }
.journal-card .eyebrow{ margin-bottom: 8px; }
.journal-card h3{ font-style:normal; font-size: 1.25rem; }