/* Vella · Beauty Packaging — premium ivory/bronze editorial system (GEO-native) */
:root{
  --ivory:#F6F2EA; --ivory-soft:#EDE7DA; --ink:#1c1a17; --ink-soft:#3a352e;
  --bronze:#a87e4f; --bronze-deep:#8a6638; --plum:#5a4458;
  --rule:rgba(28,26,23,.14); --rule-soft:rgba(28,26,23,.07);
  --muted:rgba(28,26,23,.55); --whisper:rgba(28,26,23,.34);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font-family:'IBM Plex Sans',-apple-system,system-ui,sans-serif;font-weight:300;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.serif{font-family:'Fraunces',Georgia,serif}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit;text-decoration:none}
em.g{font-family:'Fraunces',serif;font-style:italic;font-weight:300;color:var(--bronze-deep)}
em.p{font-family:'Fraunces',serif;font-style:italic;font-weight:300;color:var(--plum)}

/* top bar + nav */
.bar{display:flex;justify-content:space-between;align-items:center;padding:18px 5vw;border-bottom:1px solid var(--rule)}
.logo{font-family:'Fraunces',serif;font-weight:400;font-size:23px;letter-spacing:.5px}
.logo .dot{color:var(--bronze)}
.logo small{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);display:block;margin-top:-2px;font-weight:400}
nav{display:flex;gap:30px;align-items:center;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
nav a{color:var(--muted);transition:color .2s}
nav a:hover,nav a.on{color:var(--ink)}
nav a.cta{color:#fff;background:var(--bronze);padding:9px 18px;border-radius:2px}
nav a.cta:hover{background:var(--bronze-deep);color:#fff}

/* hero */
.hero{padding:13vh 5vw 10vh;max-width:1100px}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-deep);display:flex;align-items:center;gap:14px;margin-bottom:4vh}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--rule);max-width:240px}
h1.display{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(40px,6.4vw,82px);line-height:1.04;letter-spacing:-.02em}
.hero p.sub{max-width:600px;margin-top:4vh;font-size:18px;color:var(--ink-soft);line-height:1.6}
.btn{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:15px 30px;border:1px solid var(--ink);margin-top:5vh;transition:all .2s}
.btn:hover{background:var(--ink);color:var(--ivory)}
.btn.fill{background:var(--bronze);border-color:var(--bronze);color:#fff;margin-right:12px}
.btn.fill:hover{background:var(--bronze-deep);border-color:var(--bronze-deep)}

/* page head (inner) */
.phead{padding:10vh 5vw 6vh;border-bottom:1px solid var(--rule);max-width:1100px}
.phead h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(34px,5.2vw,64px);line-height:1.05;letter-spacing:-.02em}
.phead p{max-width:640px;margin-top:3vh;color:var(--ink-soft);font-size:17px}

/* sections */
section{padding:8vh 5vw;border-bottom:1px solid var(--rule-soft);max-width:1180px}
section.dark{background:var(--ink);color:var(--ivory);max-width:none;padding-left:max(5vw,calc((100vw - 1180px)/2 + 5vw));padding-right:max(5vw,calc((100vw - 1180px)/2 + 5vw))}
section.dark .eyebrow{color:#cda978}.section.dark .eyebrow::after{background:rgba(246,242,234,.18)}
.eyebrow.lt{color:#cda978}.eyebrow.lt::after{background:rgba(246,242,234,.2)}
h2.h{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(28px,4vw,50px);line-height:1.08;letter-spacing:-.015em;max-width:840px}
.lede{max-width:660px;margin-top:3vh;font-size:17px;color:var(--ink-soft)}
.dark .lede{color:rgba(246,242,234,.78)}
.answer{background:var(--ivory-soft);border-left:3px solid var(--bronze);padding:20px 26px;margin:4vh 0;max-width:760px;font-size:17px;line-height:1.6}
.dark .answer{background:rgba(246,242,234,.08);border-color:#cda978}

/* value cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--rule-soft);border:1px solid var(--rule);margin-top:6vh}
.card{background:var(--ivory);padding:30px 28px}
.dark .cards{background:rgba(246,242,234,.12);border-color:rgba(246,242,234,.16)}
.dark .card{background:var(--ink)}
.card .n{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-deep)}
.dark .card .n{color:#cda978}
.card h3{font-family:'Fraunces',serif;font-weight:400;font-size:22px;margin:14px 0 10px}
.card p{font-size:14.5px;color:var(--ink-soft)}
.dark .card p{color:rgba(246,242,234,.72)}

/* category grid */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:6vh}
.cat{border:1px solid var(--rule);padding:28px 26px;transition:all .2s;display:block}
.cat:hover{border-color:var(--bronze);transform:translateY(-2px)}
.cat .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cat h3{font-family:'Fraunces',serif;font-weight:400;font-size:24px;margin:12px 0 10px}
.cat p{font-size:14px;color:var(--ink-soft)}
.cat .more{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-deep);margin-top:16px;display:inline-block}

/* steps */
.steps{margin-top:6vh;border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:70px 1fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--rule-soft)}
.step .no{font-family:'Fraunces',serif;font-size:34px;color:var(--bronze)}
.step h3{font-family:'Fraunces',serif;font-weight:400;font-size:22px;margin-bottom:8px}
.step p{font-size:15px;color:var(--ink-soft);max-width:680px}

/* faq */
.faq{margin-top:5vh;max-width:820px}
.faq .q{font-family:'Fraunces',serif;font-weight:400;font-size:20px;padding:3vh 0 1vh;border-top:1px solid var(--rule)}
.faq .a{font-size:15px;color:var(--ink-soft);padding-bottom:1vh;line-height:1.6}

/* spec list */
.spec{list-style:none;margin-top:4vh;max-width:760px}
.spec li{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule-soft);font-size:15px}
.spec li b{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:160px;font-weight:500;padding-top:2px}
.spec li span{color:var(--ink-soft)}

/* form */
.rfq{max-width:680px;margin-top:5vh}
.rfq label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 0 7px}
.rfq input,.rfq textarea,.rfq select{width:100%;background:var(--ivory-soft);border:1px solid var(--rule);padding:13px 15px;font-family:inherit;font-size:15px;color:var(--ink)}
.rfq textarea{min-height:120px;resize:vertical}
.rfq button{margin-top:24px;background:var(--bronze);color:#fff;border:none;padding:15px 36px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.rfq button:hover{background:var(--bronze-deep)}

/* footer */
footer{background:var(--ink);color:var(--ivory);padding:8vh 5vw 5vh}
footer .big{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(26px,4vw,46px);line-height:1.1;max-width:780px}
footer .big em{font-style:italic;color:#cda978}
footer .cols{display:flex;flex-wrap:wrap;gap:5vw;margin-top:6vh;padding-top:4vh;border-top:1px solid rgba(246,242,234,.16)}
footer .col{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;line-height:2.3;color:rgba(246,242,234,.55)}
footer .col b{color:var(--ivory);display:block;margin-bottom:6px;letter-spacing:.14em}
footer .col a:hover{color:#cda978}
footer .fine{margin-top:5vh;font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(246,242,234,.34);letter-spacing:.05em;line-height:1.8}
@media(max-width:680px){nav{gap:16px;font-size:10px}.step{grid-template-columns:1fr;gap:6px}.spec li{flex-direction:column;gap:4px}}