/* VALO brand tokens — single source of truth.
   Import this file on every page to keep colors consistent. */
:root{
  /* Core palette — light warm editorial direction */
  --valo-bg:        #f7f5ef;   /* warm cream paper */
  --valo-bg-2:      #ffffff;   /* clean white panels */
  --valo-soft:      #eeebe2;   /* soft raised surface */
  --valo-ink:       #161616;   /* near-black text */
  --valo-muted:     #606660;   /* muted secondary text */
  --valo-accent:    #355f52;   /* deep forest green */
  --valo-accent-2:  #9a6f32;   /* warm bronze gold */
  --valo-line:      rgba(90,86,78,.18);

  /* Legacy alias tokens used across older pages — kept in sync */
  --bg:      var(--valo-bg);
  --bg2:     var(--valo-soft);
  --panel:   var(--valo-bg-2);
  --soft:    var(--valo-soft);
  --ink:     var(--valo-ink);
  --txt:     var(--valo-ink);
  --dim:     var(--valo-muted);
  --muted:   var(--valo-muted);
  --accent:  var(--valo-accent);
  --accent2: var(--valo-accent-2);
  --line:    var(--valo-line);
}

/* Unified sticky top navigation for every VALO page */
nav.valo-nav,
body > nav{
  background: rgba(247,245,239,.9) !important;
  border-bottom: 1px solid var(--valo-line) !important;
  color: var(--valo-ink);
  backdrop-filter: blur(14px);
}
nav .nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:64px;
}
.brand.valo-brand,
nav a.brand{
  display:flex; align-items:center; gap:12px;
  color:var(--valo-ink); text-decoration:none;
  font-weight:600; letter-spacing:-.02em;
}
.brand.valo-brand img,
nav a.brand img{
  height:30px; width:auto; display:block;
}
.brand.valo-brand span,
nav a.brand span{
  color: var(--valo-muted);
  font-weight:500; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase;
}
nav .links{
  display:flex; gap:20px;
  color: var(--valo-muted); font-size:14px; flex-wrap:wrap;
}
nav .links a{ color: var(--valo-muted); text-decoration:none; }
nav .links a:hover{ color: var(--valo-accent); }

@media (max-width: 800px){
  nav .nav{ flex-wrap:wrap; padding:12px 0; }
  nav .links{
    gap:14px; font-size:12px; width:100%; order:2;
    padding-top:8px; border-top:1px solid var(--valo-line); margin-top:6px;
  }
}

/* Larger editorial headings — global upscale for h1/h2/hero across all pages */
h1,
.hero h1,
header h1,
.hero-title{
  font-size: clamp(56px, 9vw, 112px) !important;
  line-height: .96 !important;
  letter-spacing: -.06em !important;
}
h2,
.section-title,
.h2{
  font-size: clamp(40px, 6.2vw, 72px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}
.lead,
p.lead,
.kicker{
  font-size: clamp(20px, 2.2vw, 26px) !important;
  line-height: 1.5 !important;
}
@media (max-width: 640px){
  h1, .hero h1, header h1, .hero-title{
    font-size: clamp(44px, 11vw, 64px) !important;
  }
  h2, .section-title, .h2{
    font-size: clamp(32px, 8vw, 44px) !important;
  }
}

/* Brand-orange headings across all pages */
h1, .hero h1, header h1, .hero-title,
h2, .section-title, .h2{
  color: var(--valo-accent-2) !important;
}
h1 .gold, h2 .gold{ color: var(--valo-accent-2) !important; }

/* Readable rhythm for oversized headings across breakpoints */
h1, .hero h1, header h1, .hero-title{
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
  margin: 0 0 .5em !important;
  overflow-wrap: break-word;
  text-wrap: balance;
  hyphens: auto;
}
h2, .section-title, .h2{
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  margin: 0 0 .55em !important;
  overflow-wrap: break-word;
  text-wrap: balance;
}
@media (min-width: 900px){
  h1, .hero h1, header h1, .hero-title{ line-height: .98 !important; }
  h2, .section-title, .h2{ line-height: 1.04 !important; }
}
@media (max-width: 640px){
  h1, .hero h1, header h1, .hero-title{
    font-size: clamp(38px, 10vw, 56px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em !important;
  }
  h2, .section-title, .h2{
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;
  }
  .lead, p.lead, .kicker{
    font-size: clamp(17px, 4.6vw, 20px) !important;
    line-height: 1.5 !important;
  }
}