/* ============================================================
   Tweaks — variant styles (applied via body data-* attrs)
   These re-shape FEEL across palette / rhythm / hero composition
   ============================================================ */

/* ---------- PALETTE: BRONZE HERITAGE ---------- */
body[data-palette="bronze"] {
  --orange-50:  #FBF5EB;
  --orange-100: #EFE0C5;
  --orange-300: #D1A85F;
  --orange-500: #A6792E;
  --orange-600: #845A1F;
  --orange-700: #553811;
  --purple-50:  #F3F0EC;
  --purple-100: #DDD4C6;
  --purple-300: #968670;
  --purple-500: #3D332A;
  --purple-600: #2A2218;
  --purple-700: #1A140F;
  --gradient-brand: linear-gradient(135deg, #A6792E 0%, #3D332A 100%);
  --gradient-warm:  linear-gradient(135deg, #D1A85F 0%, #968670 100%);
  --gradient-deep:  linear-gradient(135deg, #553811 0%, #1A140F 100%);
  --paper:   #FCF9F4;
  --paper-2: #F4ECDF;
}

/* ---------- PALETTE: SAGE × INK (calm professional) ---------- */
body[data-palette="sage"] {
  --orange-50:  #EBF2EC;
  --orange-100: #CFE1D2;
  --orange-300: #84AC8E;
  --orange-500: #4F8166;
  --orange-600: #3A6852;
  --orange-700: #234534;
  --purple-50:  #EBEEF1;
  --purple-100: #CED5DD;
  --purple-300: #788393;
  --purple-500: #36404E;
  --purple-600: #232B36;
  --purple-700: #141A22;
  --gradient-brand: linear-gradient(135deg, #4F8166 0%, #36404E 100%);
  --gradient-warm:  linear-gradient(135deg, #84AC8E 0%, #788393 100%);
  --gradient-deep:  linear-gradient(135deg, #234534 0%, #141A22 100%);
  --paper:   #FAFBF9;
  --paper-2: #EFF1EE;
}

/* ---------- PALETTE: SUNSET CORAL (warm gradient pop) ---------- */
body[data-palette="sunset"] {
  --orange-50:  #FFF0E5;
  --orange-100: #FFD3BC;
  --orange-300: #FF9472;
  --orange-500: #FB5135;
  --orange-600: #D6310F;
  --orange-700: #8E1A04;
  --purple-50:  #FBE8F1;
  --purple-100: #F4CADC;
  --purple-300: #DA6E9C;
  --purple-500: #A5306B;
  --purple-600: #781944;
  --purple-700: #4A0827;
  --gradient-brand: linear-gradient(135deg, #FB5135 0%, #A5306B 55%, #4A0827 100%);
  --gradient-warm:  linear-gradient(135deg, #FFB37A 0%, #FF9DB8 100%);
  --gradient-deep:  linear-gradient(135deg, #8E1A04 0%, #4A0827 100%);
  --paper:   #FFFAF6;
  --paper-2: #FFEEE3;
}

/* ============================================================
   RHYTHM — controls density, drama, surface treatment
   ============================================================ */

/* ---------- RHYTHM: EDITORIAL (type-forward, magazine-like) ---------- */
body[data-rhythm="editorial"] {
  font-family: "Cormorant Garamond", "Sarabun", Georgia, serif;
  --container: 1100px;
}
body[data-rhythm="editorial"] h1,
body[data-rhythm="editorial"] h2,
body[data-rhythm="editorial"] h3,
body[data-rhythm="editorial"] h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
body[data-rhythm="editorial"] h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight: 500; }
body[data-rhythm="editorial"] h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 500; }
body[data-rhythm="editorial"] .nav,
body[data-rhythm="editorial"] .btn,
body[data-rhythm="editorial"] .tag,
body[data-rhythm="editorial"] .eyebrow,
body[data-rhythm="editorial"] .review-stars,
body[data-rhythm="editorial"] .topbar,
body[data-rhythm="editorial"] footer {
  font-family: "Prompt", sans-serif;
}
body[data-rhythm="editorial"] section { padding: 110px 0; }
body[data-rhythm="editorial"] .section-head h2 { font-style: italic; }
body[data-rhythm="editorial"] .service-card,
body[data-rhythm="editorial"] .article-card,
body[data-rhythm="editorial"] .step,
body[data-rhythm="editorial"] .knowledge-item,
body[data-rhythm="editorial"] .review {
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,.08);
  background: transparent;
}
body[data-rhythm="editorial"] .knowledge-item { border-left-width: 1px; }
body[data-rhythm="editorial"] .service-card .img-wrap,
body[data-rhythm="editorial"] .article-card .img-wrap {
  filter: grayscale(0.25) contrast(1.05);
}
body[data-rhythm="editorial"] .hero {
  background: var(--paper);
}

/* ---------- RHYTHM: CINEMATIC (dark, dramatic, full-bleed) ---------- */
body[data-rhythm="cinematic"] {
  background: #0F0A14;
  color: #E8E2EE;
}
body[data-rhythm="cinematic"] h1,
body[data-rhythm="cinematic"] h2,
body[data-rhythm="cinematic"] h3,
body[data-rhythm="cinematic"] h4 { color: #FFFCF6; }
body[data-rhythm="cinematic"] p,
body[data-rhythm="cinematic"] .muted { color: #B5A8C0; }
body[data-rhythm="cinematic"] .nav {
  background: rgba(15, 10, 20, 0.86);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body[data-rhythm="cinematic"] .nav-links a { color: #B5A8C0; }
body[data-rhythm="cinematic"] .nav-links a:hover,
body[data-rhythm="cinematic"] .nav-links a.active {
  background: rgba(255,255,255,.06); color: #fff;
}
body[data-rhythm="cinematic"] .logo,
body[data-rhythm="cinematic"] .logo > div { color: #fff; }
body[data-rhythm="cinematic"] .hero {
  background:
    radial-gradient(900px 600px at 110% -10%, rgba(242, 107, 31, 0.30), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(167, 85, 220, 0.34), transparent 60%),
    #0F0A14;
}
body[data-rhythm="cinematic"] .service-card,
body[data-rhythm="cinematic"] .article-card,
body[data-rhythm="cinematic"] .step,
body[data-rhythm="cinematic"] .knowledge-item,
body[data-rhythm="cinematic"] .review,
body[data-rhythm="cinematic"] .calculator {
  background: #1A1322;
  color: #E8E2EE;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
body[data-rhythm="cinematic"] .service-card h3,
body[data-rhythm="cinematic"] .article-card h3,
body[data-rhythm="cinematic"] .knowledge-item h4,
body[data-rhythm="cinematic"] .review-name { color: #FFFCF6; }
body[data-rhythm="cinematic"] .service-card p,
body[data-rhythm="cinematic"] .article-card p,
body[data-rhythm="cinematic"] .review p { color: #B5A8C0; }
body[data-rhythm="cinematic"] .process,
body[data-rhythm="cinematic"] section[style*="paper-2"] {
  background: linear-gradient(180deg, #0F0A14 0%, #1A1322 100%) !important;
}
body[data-rhythm="cinematic"] .faq details { background: #1A1322; border-color: rgba(255,255,255,.08); color: #E8E2EE; }
body[data-rhythm="cinematic"] .faq summary { color: #FFFCF6; }
body[data-rhythm="cinematic"] .faq .answer { color: #B5A8C0; }
body[data-rhythm="cinematic"] .provinces-grid a {
  background: #1A1322; border-color: rgba(255,255,255,.08); color: #E8E2EE;
}
body[data-rhythm="cinematic"] .provinces-grid a:hover {
  background: rgba(242, 107, 31, 0.12); color: #fff;
}
body[data-rhythm="cinematic"] .field input,
body[data-rhythm="cinematic"] .field select,
body[data-rhythm="cinematic"] .field textarea {
  background: #251B30; border-color: rgba(255,255,255,.1); color: #fff;
}
body[data-rhythm="cinematic"] .field label { color: #E8E2EE; }
body[data-rhythm="cinematic"] .hero-badge { background: rgba(26, 19, 34, 0.92); }
body[data-rhythm="cinematic"] .hero-badge strong { color: #fff; }
body[data-rhythm="cinematic"] .hero-badge span { color: #B5A8C0; }
body[data-rhythm="cinematic"] .btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.12); }
body[data-rhythm="cinematic"] section { padding: 110px 0; }

/* ============================================================
   HERO — re-shape the opening composition
   ============================================================ */

/* ---------- HERO: BLEED (full-bleed image w/ text overlay) ---------- */
body[data-hero="bleed"] .hero {
  position: relative; padding: 0; min-height: 88vh;
  display: flex; align-items: center;
  overflow: hidden;
}
body[data-hero="bleed"] .hero-grid {
  grid-template-columns: 1fr; position: relative; z-index: 2;
  padding: 60px 0;
}
body[data-hero="bleed"] .hero > .container { max-width: 1100px; }
body[data-hero="bleed"] .hero h1,
body[data-hero="bleed"] .hero p.lead { color: #fff; max-width: 720px; }
body[data-hero="bleed"] .hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
body[data-hero="bleed"] .hero .brand-grad {
  background: linear-gradient(135deg, #FFB37A, #fff);
  -webkit-background-clip: text; background-clip: text;
}
body[data-hero="bleed"] .hero-visual {
  position: absolute; inset: 0; aspect-ratio: auto;
  border-radius: 0; box-shadow: none;
  width: 100%; height: 100%;
  z-index: 0;
}
body[data-hero="bleed"] .hero-visual img { filter: brightness(.75); }
body[data-hero="bleed"] .hero-visual::after {
  background: linear-gradient(90deg, rgba(15,10,20,.85) 0%, rgba(15,10,20,.55) 45%, rgba(15,10,20,.25) 100%);
}
body[data-hero="bleed"] .hero-badge {
  position: absolute; left: auto; right: 32px; bottom: 32px; top: auto;
  max-width: 320px;
}
body[data-hero="bleed"] .hero-stats { border-color: rgba(255,255,255,.2); }
body[data-hero="bleed"] .hero-stats .stat strong { color: #FFB37A; }
body[data-hero="bleed"] .hero-stats .stat span { color: rgba(255,255,255,.7); }
body[data-hero="bleed"] .hero .eyebrow {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff;
  backdrop-filter: blur(8px);
}

/* ---------- HERO: TYPE (no image; oversized type composition) ---------- */
body[data-hero="type"] .hero { padding: 100px 0 120px; }
body[data-hero="type"] .hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
}
body[data-hero="type"] .hero h1 {
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: .95;
  letter-spacing: -0.035em;
  font-weight: 700;
}
body[data-hero="type"] .hero p.lead {
  max-width: 700px; margin-left: auto; margin-right: auto;
  font-size: 1.25rem;
}
body[data-hero="type"] .cta-row { justify-content: center; }
body[data-hero="type"] .hero-stats {
  max-width: 700px; margin-left: auto; margin-right: auto;
}
body[data-hero="type"] .hero-visual { display: none; }
body[data-hero="type"] .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(242,107,31,.12), transparent 70%),
    radial-gradient(40% 40% at 50% 0%, rgba(107,45,140,.10), transparent 70%);
}