/* ORAZOI — brand site v1
   Identity: warm neutrals, Libre Baskerville, single clay accent. No gold, no logo mark. */

:root{
  --bone:#F4F1EA;
  --sand:#E4DCCF;
  --greige:#C9BEB0;
  --espresso:#2A2520;
  --charcoal:#3D3A35;
  --clay:#B07A5B;
  --muted:#8B8177;
  --body:#5d554a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bone);
  color:var(--espresso);
  font-family:'Libre Baskerville',Georgia,serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.8;
  min-height:100dvh;
  display:flex;flex-direction:column;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(130% 90% at 50% 120%, rgba(201,190,176,.28), transparent 55%);
}
main{position:relative;z-index:1;flex:1}

/* ---------- nav ---------- */
header{
  position:relative;z-index:2;
  padding:26px clamp(20px,5vw,56px) 0;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:1160px;margin:0 auto;
}
.nav-brand{
  font-family:'Libre Baskerville',serif;
  font-size:19px;letter-spacing:.3em;text-indent:.3em;
  color:var(--espresso);text-decoration:none;white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.6vw,30px);flex-wrap:wrap;justify-content:flex-end}
.nav-links a{
  font-family:'Inter',sans-serif;font-weight:300;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .35s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--espresso)}
.nav-cta{
  border:1px solid var(--greige);border-radius:2px;
  padding:9px 16px;color:var(--charcoal) !important;
  transition:border-color .35s ease,color .35s ease !important;
}
.nav-cta:hover{border-color:var(--clay);color:var(--clay) !important}

/* ---------- shared blocks ---------- */
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.center{text-align:center}
.eyebrow{
  font-family:'Inter',sans-serif;font-weight:300;
  font-size:11px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;
  color:var(--clay);
}
h1,h2,h3{font-weight:400;line-height:1.18;letter-spacing:.01em}
h1{font-size:clamp(38px,6.4vw,68px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:clamp(19px,2.2vw,24px)}
h1 em,h2 em{font-style:italic}
.lede{
  font-family:'Inter',sans-serif;font-weight:300;
  font-size:clamp(15px,1.7vw,17.5px);color:var(--body);
  max-width:36rem;
}
.center .lede{margin-left:auto;margin-right:auto}
p+p{margin-top:1.1em}
.prose{max-width:40rem;font-size:clamp(15px,1.7vw,16.5px);color:#4c453b}
.prose-serif{font-family:'Libre Baskerville',serif}
.rule{width:38px;height:3px;background:var(--clay);border:0;margin:24px auto}
.rule-left{margin-left:0}
section{padding:clamp(64px,10vh,124px) 0}
.tint{background:linear-gradient(180deg,rgba(228,220,207,.0),rgba(228,220,207,.45) 18%,rgba(228,220,207,.45) 82%,rgba(228,220,207,0))}

/* stacked lockup — design #2: Playfair, tight leading, short clay dash below */
.stack{
  font-family:'Playfair Display',serif;
  font-size:clamp(30px,4.4vw,46px);line-height:1.04;
  letter-spacing:.06em;text-indent:.06em;color:var(--espresso);
}
.stack span{display:block}

/* buttons & links */
.btn{
  display:inline-block;
  font-family:'Inter',sans-serif;font-weight:400;
  font-size:12px;letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;
  color:var(--bone);background:var(--espresso);
  padding:15px 30px;border:1px solid var(--espresso);border-radius:2px;
  text-decoration:none;cursor:pointer;
  transition:background .35s ease,color .35s ease;
}
.btn:hover{background:transparent;color:var(--espresso)}
.btn-ghost{background:transparent;color:var(--charcoal)}
.btn-ghost:hover{background:var(--espresso);color:var(--bone)}
.textlink{
  font-family:'Inter',sans-serif;font-weight:300;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);text-decoration:none;border-bottom:1px solid rgba(176,122,91,.35);
  padding-bottom:3px;transition:border-color .35s ease;
}
.textlink:hover{border-color:var(--clay)}

/* fade-in on scroll (progressive; content visible without JS) */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.no-js .reveal{opacity:1;transform:none}

/* values row */
.values{
  display:flex;justify-content:center;gap:clamp(18px,4vw,54px);
  flex-wrap:wrap;margin-top:34px;
}
.values div{
  font-family:'Inter',sans-serif;font-weight:300;
  font-size:12px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  color:var(--charcoal);
}
.values div::before{content:"";display:block;width:5px;height:5px;border-radius:50%;background:var(--clay);margin:0 auto 12px}

/* capsule swatches */
.swatches{display:flex;justify-content:center;gap:16px;margin-top:34px}
.swatches span{width:44px;height:44px;border-radius:50%;display:block;border:1px solid rgba(42,37,32,.12)}

/* forms */
.form-row{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px;
}
input,textarea{
  font-family:'Inter',sans-serif;font-weight:300;font-size:14px;
  color:var(--espresso);background:rgba(255,255,255,.55);
  border:1px solid var(--greige);border-radius:2px;
  padding:14px 16px;outline:none;min-width:0;
  transition:border-color .35s ease;
}
input::placeholder,textarea::placeholder{color:#a79c8e;letter-spacing:.04em}
input:focus,textarea:focus{border-color:var(--clay)}
.form-row input[type="email"]{flex:1 1 260px;max-width:340px}
.form-note{
  margin-top:16px;font-family:'Inter',sans-serif;font-weight:300;
  font-size:12px;color:var(--muted);
}
.form-success{
  display:none;margin-top:26px;font-style:italic;
  font-size:16.5px;color:var(--charcoal);
}
.contact-form{max-width:520px;margin:34px auto 0;display:flex;flex-direction:column;gap:12px;text-align:left}
.contact-form textarea{min-height:140px;resize:vertical}

/* FAQ */
.faq{max-width:680px;margin:0 auto;text-align:left}
.faq details{
  border-bottom:1px solid rgba(42,37,32,.14);
  padding:22px 4px;
}
.faq details:first-of-type{border-top:1px solid rgba(42,37,32,.14)}
.faq summary{
  cursor:pointer;list-style:none;
  font-size:clamp(16px,1.9vw,18.5px);
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Inter',sans-serif;font-weight:300;color:var(--clay);font-size:20px;transition:transform .3s ease}
.faq details[open] summary::after{content:"–"}
.faq .a{
  margin-top:14px;font-family:'Inter',sans-serif;font-weight:300;
  font-size:15px;color:var(--body);max-width:56ch;
}

/* footer */
footer{
  position:relative;z-index:1;
  border-top:1px solid rgba(42,37,32,.12);
  padding:44px clamp(20px,5vw,56px) 40px;
  text-align:center;
}
.foot-stack{
  font-family:'Playfair Display',serif;
  font-size:22px;line-height:1.05;letter-spacing:.06em;text-indent:.06em;
}
.foot-stack span{display:block}
.foot-stack::after{content:"";display:block;width:26px;height:2px;background:var(--clay);margin:14px auto 0}
.foot-links{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:26px;flex-wrap:wrap}
.foot-links a{
  font-family:'Inter',sans-serif;font-weight:300;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .35s ease;
}
.foot-links a:hover{color:var(--espresso)}
.foot-sep{width:4px;height:4px;border-radius:50%;background:var(--greige)}
.foot-copy{
  margin-top:24px;font-family:'Inter',sans-serif;font-weight:300;
  font-size:10.5px;letter-spacing:.16em;color:#a49a8d;text-transform:uppercase;
}
.foot-copy em{
  font-family:'Libre Baskerville',serif;font-style:italic;
  letter-spacing:normal;text-transform:none;font-size:12.5px;color:#8b8177;
}

/* hero */
.hero{padding:clamp(72px,14vh,150px) 0 clamp(56px,9vh,100px)}
.hero .lede{margin-top:26px}
.hero-actions{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media (max-width:640px){
  .nav{flex-direction:column;gap:16px}
  .nav-links{justify-content:center}
}