:root{
  --bg:#F3EFE6;
  --ink:#141210;
  --muted:rgba(20,18,16,.70);
  --paper:#FFFEFB;
  --line:rgba(20,18,16,.10);
  --shadow:0 12px 30px rgba(20,18,16,.10);
  --radius:22px;
  --container:1240px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.45;
}
a{color:inherit}
.c{max-width:var(--container); margin:0 auto; padding:18px 16px}
.muted{color:rgba(20,18,16,.70)}
.small{font-size:13px}

.hdr{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,254,251,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(10px);
}
.hdr-in{display:flex; align-items:center; gap:14px}
.brand{font-weight:900; letter-spacing:.02em}
.nav{margin-left:auto; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.nav a{padding:8px 10px; border-radius:14px; text-decoration:none}
.nav a:hover{background:rgba(20,18,16,.06)}
.nav .cta{
  background:var(--ink);
  color:var(--paper);
  font-weight:800;
}

.hero{
  position:relative;
  min-height:74vh;
  display:flex;
  align-items:stretch;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
}
.hero-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease;
}
.hero-slide.is-active{opacity:1}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(243,239,230,.78) 0%, rgba(243,239,230,.42) 55%, rgba(243,239,230,.10) 100%);
}
.hero-content{
  position:relative;
  z-index:5;
  padding-top:90px;
  padding-bottom:56px;
}
.hero-box{
  max-width:720px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-radius:0;
  padding:36px 0;
  box-shadow:none;
  backdrop-filter:none;
  text-shadow:0 2px 10px rgba(255,255,255,.85);
}
.kicker{letter-spacing:.12em; text-transform:lowercase; font-weight:800; font-size:12px; color:var(--ink); opacity:1;}
.hero-box h1{margin:8px 0 6px; font-size:46px; line-height:1.05; color:var(--ink);}
.tagline{margin:0 0 16px; color:var(--ink);}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px;
  border-radius:16px;
  text-decoration:none;
  font-weight:800;
}
.btn.primary{background:var(--paper); color:var(--ink)}
.btn.ghost{background:transparent; color:var(--paper); border:1px solid rgba(255,255,255,.22)}
.btn:hover{transform:translateY(-1px)}

.section{padding:26px 0; border-bottom:1px solid rgba(20,18,16,.06)}
.section h2{margin:0 0 10px}
.ftr{padding:22px 0; border-top:1px solid var(--line); background:rgba(255,254,251,.82)}

@media (min-width: 920px){
  .c{padding:18px 24px}
}
@media (max-width: 920px){
  .hero{min-height:66vh}
  .hero-box h1{margin:8px 0 6px; font-size:46px; line-height:1.05; color:var(--ink);}
}
@media (max-width: 480px){
  .hero{min-height:64vh}
  .hero-box{
  max-width:720px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-radius:0;
  padding:36px 0;
  box-shadow:none;
  backdrop-filter:none;
  text-shadow:0 2px 10px rgba(255,255,255,.85);
}
  .hero-box h1{margin:8px 0 6px; font-size:46px; line-height:1.05; color:var(--ink);}
  .nav{gap:8px}
}

.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.brand-logo{height:28px; width:auto; display:block}
@media (max-width:480px){ .brand-logo{height:24px} }