/* ══════════════════════════════════════
   INLIN · Scenario Page Styles
   ══════════════════════════════════════ */

/* ── Light theme override for all scenario pages ── */
:root {
  --void:      #f5f3ef;
  --deep:      #edeae4;
  --panel:     #ffffff;
  --text:      rgba(20,16,10,0.86);
  --text-m:    rgba(20,16,10,0.68);
  --text-s:    rgba(20,16,10,0.60);
  --rim:       rgba(0,0,0,0.09);
  --rim-gold:  rgba(176,128,24,0.32);
  --rim-m:     rgba(0,0,0,0.14);
  --gold:      #b08018;
  --gold-l:    #c49820;
  --gold-d:    #8a6010;
  --gold-bg:   rgba(176,128,24,0.07);
  --magenta:   #b81870;
  --aluminum:  #4a8fa8;
}

/* ── NAV: light glass ── */
nav {
  background: rgba(245,243,239,0.97) !important;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.09) !important;
}
nav.scrolled { background: rgba(245,243,239,0.97) !important; }
.nav-logo { color: #1a1008 !important; }
.nav-links a { color: rgba(20,16,10,0.62) !important; }
.nav-links a:hover { color: #1a1008 !important; }
.nav-hamburger span { background: #1a1008 !important; }
.nav-mobile-menu { background: #f5f3ef !important; }
.nav-mobile-menu a { color: #1a1008 !important; }
.nav-dropdown-inner { background: rgba(245,243,239,0.98) !important; border-color: rgba(0,0,0,0.10) !important; }
.nav-dropdown-inner::before { background: rgba(245,243,239,0.98) !important; border-color: rgba(0,0,0,0.10) !important; }
.nav-dropdown a { color: rgba(20,16,10,0.62) !important; }
.nav-dropdown a:hover { color: var(--gold) !important; background: rgba(176,128,24,0.06) !important; }
.nav-dropdown li + li { border-top-color: rgba(0,0,0,0.07) !important; }

body { background: var(--void); }

/* ── HERO ── */
.sc-hero {
  position: relative;
  height: 68vh; min-height: 480px;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.sc-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,9,0.75) 0%, rgba(10,10,9,0.20) 60%, transparent 100%);
}
.sc-hero-inner {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  padding: 0 48px 56px;
  width: 100%;
}
.sc-back {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  display: inline-block; margin-bottom: 20px;
  transition: color 0.2s;
}
.sc-back:hover { color: var(--gold-l); }
.sc-cat {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-l); margin-bottom: 12px;
}
.sc-title {
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 96px);
  color: #ffffff; line-height: 0.95;
  letter-spacing: -0.02em; margin-bottom: 12px;
}
.sc-tagline {
  font-family: var(--display);
  font-size: clamp(18px, 2.5vw, 26px);
  color: rgba(255,255,255,0.60);
  font-style: italic;
}

/* ── LAYOUT ── */
.sc-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 0 48px;
}
.sc-wrap-narrow {
  max-width: 800px;
}
.sc-section {
  padding: 80px 0;
}
.sc-section-alt { background: var(--deep); }

/* ── INTRO GRID ── */
.sc-intro-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: start;
}
.sc-h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  color: var(--text); line-height: 1.08;
  margin-bottom: 20px;
}
.sc-body {
  font-size: 15px; color: var(--text-m);
  line-height: 1.85; margin-bottom: 24px;
}
.sc-body-center { text-align: center; margin-bottom: 40px; }
.sc-bullets {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.sc-bullets li {
  font-size: 14px; color: var(--text-m);
  padding-left: 20px; position: relative;
  line-height: 1.6;
}
.sc-bullets li::before {
  content: '—';
  position: absolute; left: 0;
  color: var(--gold); font-family: var(--mono);
}
.sc-bullets li strong { color: var(--text); }

/* ── PHOTO COLUMN ── */
.sc-photo-col { display: flex; flex-direction: column; gap: 12px; }
.sc-photo {
  width: 100%; display: block;
  border: 1px solid var(--rim);
}
.sc-photo-sm { max-height: 260px; object-fit: cover; object-position: center; }

/* ── SINGLE WIDE PHOTO ── */
.sc-photo-wide {
  width: 100%; max-height: 500px;
  object-fit: cover; object-position: center;
  display: block; border: 1px solid var(--rim);
  margin-bottom: 48px;
}

/* ── PRODUCT CARDS ── */
.sc-product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 32px;
}
.sc-product-card {
  background: #ffffff;
  border: 1px solid var(--rim);
  padding: 24px 20px;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.25s, transform 0.25s;
}
.sc-product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }
.sc-product-icon { font-size: 28px; margin-bottom: 12px; }
.sc-product-name {
  font-family: var(--display); font-size: 16px;
  color: var(--text); margin-bottom: 8px; line-height: 1.2;
}
.sc-product-desc { font-size: 13px; color: var(--text-m); line-height: 1.65; }
.sc-product-tag {
  display: inline-block; margin-top: 12px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-bg);
  border: 1px solid var(--rim-gold); padding: 3px 10px;
}

/* ── QUOTE FORM ── */
.sc-form { display: flex; flex-direction: column; gap: 0; }
.sc-form-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-bottom: 16px;
}
.sc-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sc-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-s);
}
.sc-input, .sc-select, .sc-textarea {
  background: #ffffff; border: 1px solid rgba(0,0,0,0.12);
  color: var(--text); padding: 12px 16px;
  font-family: var(--body-font); font-size: 15px;
  outline: none; border-radius: 0; width: 100%;
  transition: border-color 0.25s;
}
.sc-input:focus, .sc-select:focus, .sc-textarea:focus { border-color: var(--gold); }
.sc-input::placeholder, .sc-textarea::placeholder { color: rgba(20,16,10,0.28); }
.sc-textarea { resize: vertical; min-height: 110px; }
.sc-select { cursor: pointer; appearance: none; }
.sc-submit {
  width: 100%; padding: 16px; margin-top: 8px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--gold); color: var(--void);
  border: none; cursor: pointer;
  font-family: var(--body-font);
  transition: background 0.25s;
}
.sc-submit:hover { background: var(--gold-l); }

/* ── FOOTER ── */
footer { background: #1a2d3e; }
footer .footer-logo { color: #ffffff; }
footer .footer-logo em { color: #d4a843; }
footer .footer-tagline { color: rgba(255,255,255,0.55); }
footer .footer-email { color: #d4a843; }
footer .footer-col h4 { color: #d4a843; }
footer .footer-col ul li a { color: rgba(255,255,255,0.55); }
footer .footer-col ul li a:hover { color: #ffffff; }
footer .footer-bottom { color: rgba(255,255,255,0.32); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .sc-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sc-hero-inner { padding: 0 20px 40px; }
  .sc-wrap { padding: 0 20px; }
  .sc-section { padding: 56px 0; }
  .sc-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .sc-form-row { grid-template-columns: 1fr; }
  .sc-product-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .sc-product-grid { grid-template-columns: 1fr; }
}