/* ============================================================
   WGAN CONSUMER — Global Stylesheet
   Premium · Corporate · Minimal
   ============================================================ */

:root {
  /* Palette */
  --bg:        #f4f4f1;
  --panel:     #ffffff;
  --text:      #111111;
  --muted:     #666666;
  --faint:     #999999;

  --primary:   #111111;          /* dominant dark — corporate */
  --accent:    #c9a14a;          /* warm gold — premium marker */
  --accent-dk: #a07c30;
  --green-hint:#1a3a20;          /* subtle WGAN green — used sparingly */

  --border:    rgba(17,17,17,.10);
  --border-md: rgba(17,17,17,.16);

  /* Layout */
  --max:       1100px;
  --radius:    14px;

  /* Type */
  --serif:     "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  --sans:      "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family:     var(--sans);
  font-size:       16px;
  line-height:     1.65;
  color:           var(--text);
  background:      var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering:  optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container {
  max-width:  var(--max);
  margin:     0 auto;
  padding:    0 24px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position:   sticky;
  top:        0;
  z-index:    50;
  background: rgba(244,244,241,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 0;
  gap:             16px;
}

/* Brand lockup */
.brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  text-decoration: none;
}

.brand-wordmark {
  font-family:    var(--serif);
  font-weight:    700;
  font-size:      22px;
  letter-spacing: .22em;
  color:          var(--primary);
  line-height:    1;
}

.brand-divider {
  color:        var(--border-md);
  font-weight:  300;
  font-size:    16px;
}

.brand-sub {
  font-family:    var(--sans);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .32em;
  color:          var(--muted);
  text-transform: uppercase;
  line-height:    1;
}

/* Nav */
.nav {
  display: flex;
  gap:     28px;
  list-style: none;
  margin:  0;
  padding: 0;
}

.nav a {
  font-size:      13px;
  font-weight:    500;
  letter-spacing: .06em;
  color:          var(--muted);
  transition:     color .18s ease;
}

.nav a:hover { color: var(--primary); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding:         96px 0 88px;
  background:      var(--bg);
  border-bottom:   1px solid var(--border);
  position:        relative;
  overflow:        hidden;
}

.hero::before {
  content:  "";
  position: absolute;
  inset:    0;
  background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(201,161,74,.07) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  position:   relative;
  max-width:  620px;
}

.eyebrow {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .36em;
  color:          var(--accent);
  text-transform: uppercase;
  margin:         0 0 20px;
  display:        flex;
  align-items:    center;
  gap:            10px;
}

.eyebrow::before {
  content:     "";
  display:     inline-block;
  width:       28px;
  height:      1px;
  background:  var(--accent);
  flex-shrink: 0;
}

.hero-title {
  font-family:  var(--serif);
  font-size:    clamp(72px, 10vw, 108px);
  font-weight:  900;
  letter-spacing: .14em;
  color:        var(--primary);
  line-height:  .95;
  margin:       0 0 20px;
}

.hero-tagline {
  font-family:    var(--serif);
  font-size:      clamp(16px, 2.2vw, 20px);
  font-weight:    400;
  font-style:     italic;
  color:          var(--accent-dk);
  letter-spacing: .04em;
  margin:         0 0 24px;
}

.hero-launch {
  font-size:      12px;
  font-weight:    500;
  letter-spacing: .12em;
  color:          var(--muted);
  text-transform: uppercase;
  margin:         0 0 28px;
}

.hero-body {
  font-size:   17px;
  color:       var(--muted);
  max-width:   480px;
  line-height: 1.7;
  margin:      0 0 36px;
}

.cta-btn {
  display:      inline-flex;
  align-items:  center;
  gap:          8px;
  background:   var(--primary);
  color:        #fff;
  font-size:    13px;
  font-weight:  600;
  letter-spacing: .08em;
  padding:      14px 28px;
  border-radius: 6px;
  transition:   background .2s ease, transform .18s ease;
}

.cta-btn:hover {
  background:  var(--green-hint);
  transform:   translateY(-1px);
}

/* ============================================================
   SHARED SECTION PARTS
   ============================================================ */
.section-label {
  font-size:      10.5px;
  font-weight:    700;
  letter-spacing: .40em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  14px;
  display:        flex;
  align-items:    center;
  gap:            10px;
}

.section-label::before {
  content:     "";
  display:     inline-block;
  width:       22px;
  height:      1px;
  background:  var(--accent);
  flex-shrink: 0;
}

.section-title {
  font-family:  var(--serif);
  font-size:    clamp(30px, 4vw, 44px);
  font-weight:  700;
  color:        var(--primary);
  line-height:  1.12;
  margin:       0 0 12px;
}

.section-body {
  font-size:  17px;
  color:      var(--muted);
  max-width:  560px;
  line-height: 1.7;
  margin:     0 0 48px;
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-section {
  padding:        96px 0;
  border-bottom:  1px solid var(--border);
}

.about-grid {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       56px;
  margin-top: 40px;
}

.about-text p {
  font-size:   16.5px;
  color:       var(--muted);
  line-height: 1.75;
  margin:      0 0 18px;
}

.about-text p:last-child { margin-bottom: 0; }

.about-values {
  display:        flex;
  flex-direction: column;
  gap:            28px;
}

.value-item {
  padding:       20px 24px;
  background:    var(--panel);
  border:        1px solid var(--border);
  border-left:   3px solid var(--accent);
  border-radius: var(--radius);
}

.value-label {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color:          var(--primary);
  margin-bottom:  8px;
}

.value-item p {
  margin:      0;
  font-size:   14.5px;
  color:       var(--muted);
  line-height: 1.6;
}

/* ============================================================
   BRANDS SECTION
   ============================================================ */
.brands-section {
  padding:       96px 0;
  border-bottom: 1px solid var(--border);
  background:    var(--panel);
}

.brand-cards {
  display:   grid;
  grid-template-columns: repeat(3, 1fr);
  gap:       24px;
}

.brand-card {
  padding:       32px 28px;
  border-radius: var(--radius);
  border:        1px solid var(--border);
  position:      relative;
  transition:    transform .2s ease, box-shadow .2s ease;
}

.brand-card:hover {
  transform:   translateY(-3px);
  box-shadow:  0 16px 48px rgba(17,17,17,.08);
}

.brand-card--active {
  background: var(--bg);
  border-color: var(--accent);
}

.brand-card--soon {
  background: var(--panel);
}

.brand-card--future {
  background: var(--panel);
  opacity:    .72;
}

.brand-card-tag {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  14px;
}

.brand-card-name {
  font-family:  var(--serif);
  font-size:    24px;
  font-weight:  700;
  color:        var(--primary);
  margin:       0 0 12px;
}

.brand-card-desc {
  font-size:   14.5px;
  color:       var(--muted);
  line-height: 1.65;
  margin:      0 0 20px;
}

.brand-card-link {
  font-size:      13px;
  font-weight:    600;
  letter-spacing: .04em;
  color:          var(--accent-dk);
  transition:     color .15s ease;
}

.brand-card-link:hover { color: var(--primary); }

.brand-card-placeholder {
  font-size:      12px;
  font-weight:    500;
  letter-spacing: .12em;
  color:          var(--faint);
  text-transform: uppercase;
}

/* ============================================================
   VISION SECTION
   ============================================================ */
.vision-section {
  padding: 96px 0;
}

.vision-inner {
  max-width: 680px;
  margin:    0 auto;
  text-align: center;
}

.vision-inner .section-label {
  justify-content: center;
}

.vision-inner .section-label::before { display: none; }

.vision-body {
  font-size:   17px;
  color:       var(--muted);
  line-height: 1.75;
  margin:      0 0 18px;
}

.vision-quote {
  font-family:  var(--serif);
  font-size:    clamp(18px, 2.5vw, 22px);
  font-weight:  500;
  font-style:   italic;
  color:        var(--primary);
  border:       none;
  margin:       40px 0 0;
  padding:      28px 32px;
  background:   var(--panel);
  border-radius: var(--radius);
  border-left:  4px solid var(--accent);
  text-align:   left;
  line-height:  1.5;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background:    var(--primary);
  color:         rgba(255,255,255,.75);
  padding:       56px 0 0;
}

.footer-inner {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             48px;
  padding-bottom:  48px;
  border-bottom:   1px solid rgba(255,255,255,.10);
}

.footer-wordmark {
  font-family:    var(--serif);
  font-size:      28px;
  font-weight:    700;
  letter-spacing: .18em;
  color:          #ffffff;
  display:        block;
  margin-bottom:  8px;
}

.footer-tagline {
  font-size:   13px;
  font-style:  italic;
  color:       rgba(255,255,255,.50);
  margin:      0;
}

.footer-links-group {
  display: flex;
  gap:     48px;
}

.footer-col {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.footer-col-label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color:          var(--accent);
  margin:         0 0 4px;
}

.footer-col a {
  font-size:  14px;
  color:      rgba(255,255,255,.60);
  transition: color .15s ease;
}

.footer-col a:hover { color: #ffffff; }

.footer-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         20px 0;
  font-size:       13px;
  color:           rgba(255,255,255,.40);
  flex-wrap:       wrap;
  gap:             8px;
}

.footer-bottom strong { color: rgba(255,255,255,.65); }
.footer-copy { margin: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .brand-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 32px;
  }

  .footer-links-group {
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero { padding: 64px 0 56px; }
  .about-section,
  .brands-section,
  .vision-section { padding: 64px 0; }
}

@media (max-width: 480px) {
  .nav { gap: 18px; }
  .hero-title { letter-spacing: .10em; }
  .vision-quote { padding: 20px 20px; }
}