/* ============================================================
   La Isabella — Design system (Claude Design)
   Ink black · gold · cream · Roboto Slab + Inter
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#0D0D0D;
  --ink-2:#161616;
  --card:#1F1B14;          /* gold-tinted dark card */
  --gold:#C8860A;
  --gold-hi:#E0A62E;
  --cream:#F5F0E8;
  --cream-pure:#FEFCF9;
  --line-dark:rgba(245,240,232,.15);
  --line-light:rgba(13,13,13,.15);
  --maxw:1200px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--ink);color:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--gold-hi);}
::selection{background:var(--gold);color:var(--ink);}

.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* Headings */
.slab{font-family:'Roboto Slab',Georgia,serif;}
h1,h2,h3{font-family:'Roboto Slab',Georgia,serif;font-weight:900;letter-spacing:-.01em;line-height:1.12;}

/* Eyebrow */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}

/* Section shells */
.section{padding:clamp(64px,9vw,120px) 0;}
.section--cream{background:var(--cream);color:var(--ink);}
.section--ink{background:var(--ink);color:var(--cream);}
.section--cream .eyebrow{color:var(--gold);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-weight:600;font-size:15px;
     padding:15px 30px;border-radius:999px;transition:transform .2s,background .2s,color .2s,box-shadow .2s;cursor:pointer;border:0;}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{background:var(--gold-hi);color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 34px rgba(200,134,10,.35);}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid rgba(245,240,232,.4);}
.btn-ghost:hover{background:rgba(245,240,232,.08);color:var(--cream);transform:translateY(-2px);}
.section--cream .btn-ghost{color:var(--ink);border-color:rgba(13,13,13,.35);}
.section--cream .btn-ghost:hover{background:rgba(13,13,13,.05);color:var(--ink);}

/* Logo mark (family / tree of three circles) */
.mark{display:block;flex-shrink:0;}
.mark line,.mark circle{fill:none;}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
     padding:16px 28px;transition:background .3s,padding .3s,box-shadow .3s;}
.nav.scrolled{background:rgba(13,13,13,.9);backdrop-filter:blur(12px);padding:12px 28px;box-shadow:0 1px 0 rgba(200,134,10,.25);}
.brand{display:flex;align-items:center;gap:12px;}
.brand .brand-name{font-family:'Roboto Slab',serif;font-weight:900;font-size:20px;color:var(--cream-pure);letter-spacing:.01em;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{color:rgba(245,240,232,.82);font-size:14px;font-weight:500;letter-spacing:.01em;}
.nav-links a:hover{color:var(--cream-pure);}
.nav-links .btn{padding:10px 20px;font-size:13.5px;}
.nav-toggle{display:none;background:none;border:0;color:var(--cream);font-size:24px;cursor:pointer;line-height:1;}

/* FOOTER */
.foot{background:#0A0A0A;color:rgba(245,240,232,.6);padding:56px 0 40px;border-top:1px solid var(--line-dark);}
.foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start;}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.foot-brand .brand-name{font-family:'Roboto Slab',serif;font-weight:900;font-size:22px;color:var(--cream-pure);}
.foot-tagline{max-width:340px;font-size:14px;line-height:1.7;}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;}
.foot-links a{color:rgba(245,240,232,.65);font-size:14px;}
.foot-links a:hover{color:var(--cream-pure);}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;
             flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(245,240,232,.42);}

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

/* Mobile nav */
@media(max-width:880px){
  .nav-links{position:fixed;inset:0 0 auto 0;flex-direction:column;align-items:flex-start;gap:22px;
             background:rgba(13,13,13,.98);backdrop-filter:blur(16px);padding:92px 28px 34px;
             transform:translateY(-100%);transition:transform .35s;}
  .nav-links.open{transform:none;}
  .nav-toggle{display:block;z-index:70;}
}