:root{
  --tv-forest:#0b2a1a;
  --tv-forest-2:#0f3b25;
  --tv-gold:#c9a24a;
  --tv-cream:#f6f4ef;
  --tv-ink:#0b0f0c;
  --tv-muted:#5b6b61;
  --tv-card:#ffffff;
  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;}
body{color:var(--tv-ink); background: var(--tv-cream); line-height:1.55;}
a{color:inherit}
img{max-width:100%;height:auto}

.texture{
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(201,162,74,.12), transparent 60%),
    radial-gradient(900px 400px at 90% 20%, rgba(11,42,26,.10), transparent 55%),
    linear-gradient(180deg, #faf8f3, var(--tv-cream));
}

.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(246,244,239,.72);
  border-bottom: 1px solid rgba(11,42,26,.08);
}
.nav{
  max-width: var(--max);
  margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:24px; text-decoration:none;
}
.brand-logo{height:36px;width:auto;display:block; margin-left:-10px;}
.brand-mark{
  width:34px;height:34px;border-radius:10px;
  background: linear-gradient(135deg, var(--tv-forest), var(--tv-forest-2));
  border: 1px solid rgba(201,162,74,.5);
  position:relative;
}
.brand-mark:after{
  content:"";
  position:absolute; inset:7px 9px 9px 7px;
  border-radius:999px;
  border:2px solid rgba(201,162,74,.95);
  transform: rotate(-10deg);
}
.brand-name{
  font-weight: 750; letter-spacing:.2px;
  font-size: 18px;
}
.brand-name span{color: var(--tv-gold);}
.navlinks{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.navlinks a{
  text-decoration:none;
  padding:8px 10px;
  border-radius: 12px;
  color: rgba(11,15,12,.85);
}
.navlinks a:hover{background: rgba(11,42,26,.06);}
.navcta{
  display:flex; gap:10px; align-items:center;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration:none;
  font-weight:650;
  border: 1px solid rgba(11,42,26,.14);
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.btn.primary{
  background: linear-gradient(135deg, var(--tv-forest), var(--tv-forest-2));
  color: #fff;
  border: 1px solid rgba(201,162,74,.45);
}
.btn.primary:hover{filter: brightness(1.03);}
.btn:hover{transform: translateY(-1px); transition: 120ms ease;}
.small{font-size: 14px; color: var(--tv-muted);}

.container{max-width: var(--max); margin: 0 auto; padding: 0 18px;}
.section{padding: 64px 0;}
.section.compact{padding: 44px 0;}
.kicker{
  color: var(--tv-gold); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; font-size: 12px;
}
.h1{font-size: 46px; line-height: 1.08; margin: 10px 0 14px; letter-spacing:-.02em;}
.h2{font-size: 30px; line-height: 1.15; margin: 10px 0 14px; letter-spacing:-.01em;}
.lead{font-size: 18px; color: rgba(11,15,12,.78); max-width: 62ch;}

.hero{
  padding: 54px 0 34px;
}
.hero-grid{
  display:grid; grid-template-columns: 1.25fr .75fr; gap: 28px;
  align-items: start;
}
.hero-card{
  background: linear-gradient(135deg, rgba(11,42,26,.92), rgba(15,59,37,.92));
  border: 1px solid rgba(201,162,74,.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 26px 22px;
  color: #fff;
  position:relative;
  overflow:hidden;
}
.hero-card:before{
  content:"";
  position:absolute; inset:-50px -50px auto auto;
  width:220px; height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(201,162,74,.26), transparent 60%);
  transform: rotate(10deg);
}
.hero-card .lead{color: rgba(255,255,255,.84);}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.pillrow{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;
}
.pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  font-size: 13px;
  color: rgba(255,255,255,.88);
}
.side-panel{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(11,42,26,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.side-panel h3{margin:0 0 10px;font-size: 16px;}
.side-panel ul{margin:0; padding-left: 18px; color: rgba(11,15,12,.78);}
.side-panel li{margin:6px 0;}
.note{
  border-left: 3px solid var(--tv-gold);
  padding-left: 12px;
  margin-top: 14px;
  color: rgba(11,15,12,.72);
  font-size: 14px;
}

.grid{
  display:grid; gap:22px;
}
.grid.cols-3{grid-template-columns: repeat(3, 1fr);}
.grid.cols-2{grid-template-columns: repeat(2, 1fr);}
.card{
  background: var(--tv-card);
  border: 1px solid rgba(11,42,26,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card h3{margin:0 0 8px;font-size: 18px;}
.card p{margin:0;color: rgba(11,15,12,.74)}
.icon{
  width:38px;height:38px;border-radius: 14px;
  background: rgba(201,162,74,.14);
  border: 1px solid rgba(201,162,74,.35);
  display:flex;align-items:center;justify-content:center;
  font-weight: 800;
  color: var(--tv-forest);
  margin-bottom: 10px;
}

.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 14px;
}
.table th, .table td{
  border-bottom: 1px solid rgba(11,42,26,.10);
  padding: 12px 12px;
  text-align:left;
  font-size: 14px;
}
.table th{
  background: rgba(11,42,26,.05);
  color: rgba(11,15,12,.78);
  font-weight: 700;
}
.table tr:last-child td{border-bottom:none;}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  border: 1px solid rgba(11,42,26,.14);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(11,15,12,.78);
  background: rgba(255,255,255,.9);
}

.footer{
  border-top: 1px solid rgba(11,42,26,.10);
  padding: 30px 0;
  color: rgba(11,15,12,.70);
  font-size: 14px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;
  align-items:start;
}
.footer a{text-decoration:none;}
.footer a:hover{text-decoration:underline;}
.subtle{color: rgba(11,15,12,.62);}

.form{
  display:grid; gap:12px;
}
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,42,26,.16);
  background:#fff;
  font-size: 14px;
}
textarea{min-height:120px; resize: vertical;}
.form-row{display:grid; grid-template-columns: 1fr 1fr; gap: 12px;}


/* Mobile navigation */
.nav{position:relative;}
.navtoggle{display:none; border:1px solid rgba(11,42,26,.14); background:#fff; border-radius:14px; padding:10px 12px; box-shadow:0 4px 16px rgba(0,0,0,.05);}
.navtoggle-icon{display:block; width:18px; height:2px; background:rgba(11,15,12,.85); position:relative;}
.navtoggle-icon:before,.navtoggle-icon:after{content:""; position:absolute; left:0; width:18px; height:2px; background:rgba(11,15,12,.85);}
.navtoggle-icon:before{top:-6px;}
.navtoggle-icon:after{top:6px;}
.navmenu{display:flex; align-items:center; gap:16px; z-index:9999;}

@media (max-width: 900px){
  .hero-grid{grid-template-columns: 1fr;}
  .grid.cols-3{grid-template-columns: 1fr;}
  .grid.cols-2{grid-template-columns: 1fr;}
  .h1{font-size: 38px;}
  .form-row{grid-template-columns: 1fr;}
  .navtoggle{display:inline-flex;}
  .navmenu{display:none; position:absolute; z-index:9999; top:64px; left:12px; right:12px; background: rgba(246,244,239,.96); border:1px solid rgba(11,42,26,.12); border-radius:18px; box-shadow: var(--shadow); padding:12px; flex-direction:column; align-items:stretch; gap:10px;}
  .nav.open .navmenu{display:flex;}
  .navmenu .navlinks{display:flex; flex-direction:column; gap:6px;}
  .navmenu .navcta{display:flex; flex-direction:column; gap:10px;}
  .navcta{display:none;}
  .brand-logo{height:34px; margin-left:-10px;}
  .h1{font-size: 34px;}

}


.media{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06); background:#fff}
.media img{width:100%; height:auto; display:block}

.bullets{margin:12px 0 0 18px;padding:0}
.bullets li{margin:8px 0;color:var(--tv-muted);line-height:1.5}
.bullets b{color:var(--tv-ink)}


/* Section dividers */
.divider{height:1px;background:rgba(11,42,26,.08);margin:34px 0;border-radius:999px;}


/* Quality page spacing tweaks (only affects quality.html) */
.quality-page .grid{gap:34px;margin:28px 0;align-items:start;}
.quality-page .card{margin:0;}
.quality-page .media{margin:0;}
.quality-page .grid.cols-2{column-gap:34px;row-gap:34px;}
.quality-page .divider{margin:38px 0;}

/* Responsive tables */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius: var(--radius);}
.table{min-width:640px;}
@media (max-width: 700px){
  .table{min-width:560px;}
  .table th,.table td{padding:12px 12px;}
}


/* === Header Tweaks === */

/* Hide TerraVita text everywhere */
.brand-name{display:none !important;}

/* Mobile: center logo */
@media (max-width: 900px){
  .nav{position:relative;}
  .brand{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
}


/* === Catalogue Button Fix === */
.hero-actions .btn {
  min-width: 140px;
  text-align: center;
}

.hero-actions .btn:not(.primary) {
  padding: 10px 18px;
  font-weight: 700;
}


/* === Premium Catalogue Button Style === */
.hero-actions .btn:not(.primary) {
  background: transparent;
  border: 2px solid var(--tv-gold);
  color: #ffffff;
  font-weight: 700;
  padding: 10px 20px;
  min-width: 150px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(201,162,74,.25);
}

.hero-actions .btn:not(.primary):hover {
  background: var(--tv-gold);
  color: var(--tv-forest);
  transform: translateY(-2px);
  transition: all 150ms ease;
}