:root{
  --paper:#FAFAF8;
  --paper-dim:#F3F2ED;
  --ink:#141311;
  --muted:#7f7a71;
  --muted-soft:#a8a299;
  --hair: rgba(20,19,17,0.14);
  --hair-soft: rgba(20,19,17,0.08);
  --accent:#8c6a3f;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:inherit;}
img{display:block;max-width:100%;}
.serif{font-family:'Bodoni Moda', serif;}

/* ---------- layout helpers ---------- */
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 1.75rem;
}
.section{ padding:6.5rem 0; }
.section-tight{ padding:4rem 0; }
.hair-top{ border-top:1px solid var(--hair); }
.hair-bottom{ border-bottom:1px solid var(--hair); }

.eyebrow{
  font-size:0.7rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
}
.section-head{ margin-bottom:3rem; }
.section-head h2{
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight:500;
  margin-top:0.6rem;
}
.section-head p{
  color:var(--muted);
  font-weight:400;
  max-width:640px;
  margin-top:0.9rem;
  font-size:1.02rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.95rem 1.9rem;
  font-size:0.85rem;
  font-weight:500;
  letter-spacing:0.02em;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
  cursor:pointer;
  font-family:'Inter',sans-serif;
}
.btn:hover{ background:var(--accent); border-color:var(--accent); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--hair);
}
.btn-ghost:hover{ background:transparent; border-color:var(--ink); color:var(--ink); }

/* ---------- nav ---------- */
header.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:1.4rem 0;
  transition:background .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom:1px solid transparent;
}
header.site-nav.scrolled{
  background:rgba(250,250,248,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
  padding:1rem 0;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
}
.brand-lockup img{ width:30px; height:30px; }
.brand-lockup .brand-text{ line-height:1.05; }
.brand-lockup .brand-text .name{
  font-family:'Bodoni Moda', serif;
  font-size:1.05rem;
  letter-spacing:0.06em;
  font-weight:500;
}
.brand-lockup .brand-text .sub{
  font-size:0.55rem;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--muted);
}
nav.links{
  display:flex;
  align-items:center;
  gap:2.1rem;
}
nav.links a{
  font-size:0.82rem;
  text-decoration:none;
  color:var(--muted);
  transition:color .2s ease;
}
nav.links a:hover, nav.links a.active{ color:var(--ink); }
nav.links .btn{ padding:0.7rem 1.35rem; font-size:0.78rem; }
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--ink);
  padding:4px;
}
.mobile-panel{
  position:fixed;
  inset:0;
  background:var(--paper);
  z-index:99;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease;
}
.mobile-panel.open{ opacity:1; visibility:visible; }
.mobile-panel a{
  font-family:'Bodoni Moda', serif;
  font-size:1.8rem;
  text-decoration:none;
  color:var(--ink);
}

@media (max-width:860px){
  nav.links{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- footer ---------- */
footer.site-footer{
  padding:4rem 0 2.5rem;
  border-top:1px solid var(--hair);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem;
}
.footer-grid .brand-lockup{ margin-bottom:1rem; }
.footer-grid p{ color:var(--muted); font-size:0.92rem; max-width:320px; }
.footer-col h4{
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted-soft);
  margin-bottom:1rem;
}
.footer-col a{
  display:block;
  font-size:0.9rem;
  color:var(--muted);
  text-decoration:none;
  margin-bottom:0.7rem;
  transition:color .2s ease;
}
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  padding-top:2rem;
  border-top:1px solid var(--hair-soft);
  font-size:0.72rem;
  letter-spacing:0.05em;
  color:var(--muted-soft);
}
@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
}

/* ---------- hero canvas ---------- */
canvas#field{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* ---------- generic components ---------- */
.pillar-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
}
.pillar-card{
  background:var(--paper);
  padding:2.75rem;
}
.pillar-card .num{
  font-family:'Bodoni Moda', serif;
  font-style:italic;
  color:var(--accent);
  font-size:1rem;
  margin-bottom:1.3rem;
}
.pillar-card h3{
  font-family:'Bodoni Moda', serif;
  font-size:1.4rem;
  font-weight:500;
  margin-bottom:0.7rem;
}
.pillar-card p{ color:var(--muted); font-size:0.95rem; }
@media (max-width:700px){ .pillar-grid{ grid-template-columns:1fr; } }

.filter-rail{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-bottom:2.5rem;
}
.filter-pill{
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0.55rem 1.05rem;
  border:1px solid var(--hair);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:all .2s ease;
}
.filter-pill:hover{ border-color:var(--ink); color:var(--ink); }
.filter-pill.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.brand-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
}
.brand-card{
  background:var(--paper);
  padding:2.4rem;
  transition:opacity .25s ease, background .25s ease;
}
.brand-card.hidden{ display:none; }
.brand-card .mono{
  font-family:'Bodoni Moda', serif;
  font-style:italic;
  font-size:1.6rem;
  color:var(--muted-soft);
  margin-bottom:1.4rem;
}
.brand-card .cat{
  font-size:0.65rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:0.6rem;
}
.brand-card h3{
  font-family:'Bodoni Moda', serif;
  font-size:1.25rem;
  font-weight:500;
  margin-bottom:0.6rem;
}
.brand-card p{ color:var(--muted); font-size:0.88rem; }
@media (max-width:900px){ .brand-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .brand-grid{ grid-template-columns:1fr; } }

.category-block{ padding:3.5rem 0; }
.category-block + .category-block{ border-top:1px solid var(--hair); }
.category-block .cat-layout{
  display:flex;
  gap:3.5rem;
  flex-wrap:wrap;
}
.category-block .cat-label{
  flex:0 0 220px;
}
.category-block .cat-label h2{
  font-family:'Bodoni Moda', serif;
  font-size:1.7rem;
  font-weight:500;
}
.category-block .cat-items{
  flex:1 1 500px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
}
@media (max-width:700px){ .category-block .cat-items{ grid-template-columns:1fr; } }

.trust-panel{
  background:var(--ink);
  color:var(--paper);
  padding:3.5rem;
}
.trust-panel h2{
  font-family:'Bodoni Moda', serif;
  font-size:2rem;
  font-weight:500;
  margin-bottom:1.3rem;
}
.trust-panel p{ color:rgba(250,250,248,0.72); font-size:0.98rem; margin-bottom:0.8rem; }
.trust-panel p.emph{ color:var(--paper); font-weight:500; }

.opp-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
}
.opp-card{ background:var(--paper); padding:2.4rem; }
.opp-card h3{ font-family:'Bodoni Moda', serif; font-size:1.15rem; font-weight:500; margin-bottom:0.6rem; }
.opp-card p{ color:var(--muted); font-size:0.9rem; }
@media (max-width:900px){ .opp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .opp-grid{ grid-template-columns:1fr; } }

.who-list{ list-style:none; }
.who-list li{
  display:flex;
  align-items:center;
  gap:0.8rem;
  padding:0.85rem 0;
  border-bottom:1px solid var(--hair-soft);
  font-size:1.02rem;
  color:var(--muted);
}
.who-list li::before{
  content:'';
  width:5px; height:5px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

.platform-row{
  display:flex;
  flex-wrap:wrap;
  gap:2.5rem;
  justify-content:center;
}
.platform-row span{
  font-family:'Bodoni Moda', serif;
  font-size:1.1rem;
  color:var(--muted-soft);
}

/* ---------- forms ---------- */
.form-panel{
  border:1px solid var(--hair);
  padding:2.75rem;
  background:var(--paper);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem;
  margin-bottom:1.4rem;
}
.field{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.4rem; }
.field label{ font-size:0.78rem; color:var(--muted); }
.field label .req{ color:#a13d2b; margin-left:2px; }
.field input, .field textarea{
  border:1px solid var(--hair);
  background:transparent;
  padding:0.85rem 1rem;
  font-family:'Inter',sans-serif;
  font-size:0.95rem;
  color:var(--ink);
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.field textarea{ resize:vertical; min-height:110px; }
.field.invalid label{ color:#a13d2b; }
.field.invalid input, .field.invalid textarea{ border-color:#a13d2b; background:rgba(161,61,43,0.04); }
.field-msg{ font-size:0.78rem; font-weight:500; color:#a13d2b; display:none; }
.field.invalid .field-msg{ display:block; }
.form-note{ font-size:0.75rem; color:var(--muted-soft); text-align:center; margin-top:1rem; }
.form-error{ color:#a13d2b; font-size:0.9rem; font-weight:500; margin-bottom:1.2rem; padding:0.9rem 1.1rem; border:1px solid rgba(161,61,43,0.35); background:rgba(161,61,43,0.05); }
.form-success{
  border:1px solid var(--hair);
  padding:3rem;
  text-align:center;
}
.form-success h3{ font-family:'Bodoni Moda', serif; font-size:1.5rem; margin-bottom:0.8rem; }
.form-success p{ color:var(--muted); }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top:6rem;
}
.hero-inner{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:880px;
  margin:0 auto;
}
.hero h1{
  font-family:'Bodoni Moda', serif;
  font-weight:500;
  font-size:clamp(2.6rem, 6.6vw, 5rem);
  line-height:1.08;
  margin-bottom:1.6rem;
}
.hero h1 em{ font-style:italic; color:var(--accent); }
.hero p.lead{
  color:var(--muted);
  font-size:clamp(1rem, 1.6vw, 1.2rem);
  max-width:620px;
  margin:0 auto 2.4rem;
}
.hero .cta-row{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

.page-hero{
  padding:9.5rem 0 4rem;
  text-align:center;
}
.page-hero h1{
  font-family:'Bodoni Moda', serif;
  font-weight:500;
  font-size:clamp(2.4rem, 5.6vw, 4rem);
  line-height:1.1;
}
.page-hero h1 em{ font-style:italic; color:var(--accent); }
.page-hero p{ color:var(--muted); max-width:600px; margin:1.3rem auto 0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
