/* ============================================================
   VRGN Solar - Brand Stylesheet
   Palette + type scale pulled from vrgnsolar.com.
   Drop this in and use the .vrgn-* classes, or the --vrgn-*
   custom properties, anywhere.
   ============================================================ */

:root{
  /* --- Palette --- */
  --vrgn-gold:  #a2936c;   /* primary accent */
  --vrgn-sand:  #bbb79e;   /* secondary / soft accent */
  --vrgn-black: #000000;   /* background */
  --vrgn-ink:   #101010;   /* near-black surface */
  --vrgn-grey:  #404040;   /* muted text / hairlines */
  --vrgn-white: #ffffff;   /* text on dark */

  /* --- Type ---
     Brand font is Nexa (Light for headings, Regular for body).
     The fallback stack keeps it geometric where Nexa isn't installed. */
  --vrgn-font-head: "Nexa Light","Nexa","Century Gothic","Futura",-apple-system,"Segoe UI",sans-serif;
  --vrgn-font-body: "Nexa","Century Gothic","Futura",-apple-system,"Segoe UI",Arial,sans-serif;
}

/* --- Headings --- */
.vrgn-h1{ font-family:var(--vrgn-font-head); font-weight:400; font-size:clamp(40px,6vw,75px); line-height:1.05; letter-spacing:.005em; color:var(--vrgn-white); margin:0 0 .4em; }
.vrgn-h2{ font-family:var(--vrgn-font-head); font-weight:400; font-size:clamp(28px,4vw,36px); line-height:1.1;  color:var(--vrgn-white); margin:0 0 .5em; }
.vrgn-h3{ font-family:var(--vrgn-font-head); font-weight:400; font-size:clamp(22px,3vw,28px); line-height:1.2;  color:var(--vrgn-white); margin:0 0 .5em; }
.vrgn-h4{ font-family:var(--vrgn-font-head); font-weight:400; font-size:20px; line-height:1.4; color:var(--vrgn-white); margin:0 0 .5em; }

/* --- Body + inline --- */
.vrgn-body{ font-family:var(--vrgn-font-body); font-weight:400; font-size:18px; line-height:1.7; color:var(--vrgn-white); margin:0 0 1em; }
.vrgn-small{ font-family:var(--vrgn-font-body); font-size:14px; line-height:1.6; color:var(--vrgn-sand); }
.vrgn-link{ color:var(--vrgn-gold); text-decoration:none; border-bottom:1px solid rgba(162,147,108,.4); transition:border-color .15s ease; }
.vrgn-link:hover{ border-color:var(--vrgn-gold); }

/* --- Eyebrow / kicker: small uppercase gold label above a heading --- */
.vrgn-kicker{ font-family:var(--vrgn-font-body); font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--vrgn-gold); margin:0 0 .6em; }

/* --- Buttons --- */
.vrgn-btn{ display:inline-block; font-family:var(--vrgn-font-body); font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--vrgn-black); background:var(--vrgn-gold); padding:14px 26px; border:0; border-radius:8px; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.vrgn-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(162,147,108,.35); }
.vrgn-btn--outline{ background:transparent; color:var(--vrgn-gold); box-shadow:inset 0 0 0 1.5px var(--vrgn-gold); }
.vrgn-btn--outline:hover{ box-shadow:inset 0 0 0 1.5px var(--vrgn-gold), 0 12px 28px rgba(162,147,108,.32); }

/* --- Color utilities --- */
.vrgn-text-gold{ color:var(--vrgn-gold); }
.vrgn-text-sand{ color:var(--vrgn-sand); }
.vrgn-bg-dark{ background:var(--vrgn-black); color:var(--vrgn-white); }
.vrgn-bg-ink{ background:var(--vrgn-ink); color:var(--vrgn-white); }

/* --- Blockquote --- */
.vrgn-quote{ margin:.7em 0; padding:.45em 0 .45em 1.1em; border-left:3px solid var(--vrgn-gold);
  color:var(--vrgn-sand); font-style:italic; font-family:var(--vrgn-font-body); }
.vrgn-quote cite{ display:block; margin-top:.45em; font-style:normal; font-size:.85em; color:var(--vrgn-gold); }

/* --- Links (states) --- */
.vrgn-link:focus-visible{ outline:2px solid var(--vrgn-gold); outline-offset:2px; border-radius:2px; }

/* --- Custom scrollbar (brand gold) --- */
html{ scrollbar-color:var(--vrgn-gold) rgba(255,255,255,.06); scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); }
::-webkit-scrollbar-thumb{ background:var(--vrgn-gold); border-radius:6px; border:2px solid rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb:hover{ background:var(--vrgn-sand); }

/* --- Horizontal rule --- */
.vrgn-hr{ border:0; height:1px; background:linear-gradient(90deg, transparent, var(--vrgn-gold), transparent); margin:1.4em 0; }

/* --- Form inputs --- */
.vrgn-label{ display:block; font-family:var(--vrgn-font-body); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--vrgn-sand); margin-bottom:6px; }
.vrgn-input{ display:block; width:100%; font-family:var(--vrgn-font-body); font-size:15px; color:var(--vrgn-white); background:rgba(0,0,0,.3); border:1px solid rgba(162,147,108,.5); border-radius:8px; padding:11px 14px; outline:none; transition:border-color .15s ease; }
.vrgn-input:focus{ border-color:var(--vrgn-gold); box-shadow:0 0 0 3px rgba(162,147,108,.18); }
.vrgn-input::placeholder{ color:#8a7d63; }
textarea.vrgn-input{ min-height:90px; resize:vertical; }