/* ============================================================
   KEY SECTORS — single consolidated page
   Content sourced from the official Investment Brochure
   ("Venture Arunachal — Your Next Investment Destination").
   Palette mirrors the site's brand values as literal hex — homepage.css
   :root is NOT loaded on inner pages, so tokens are self-defined here and
   kept in sync with css/style.css (body font, greys) manually.
   Everything is scoped under .key-sectors-page to avoid collisions.
   ============================================================ */

.key-sectors-page {
  --ks-ink: #00053c; /* Phase 3: unified to --text-heading */
  --ks-body: #444;
  --ks-muted: #5a6a80;
  --ks-line: #e7eaf0;
  --ks-primary: #fe5900;
  --ks-accent: #1a5fb4; /* overridden per-sector via inline style */
  color: var(--ks-body);
  background: #ffffff;
  font-family: "Poppins", sans-serif;
}

.key-sectors-page :is(h2, h3) { color: var(--ks-ink); }

/* smooth in-page jumps (page-scoped: stylesheet only loads here) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------
   1. Intro / thesis band
   --------------------------------------------------------------- */
.ks-intro { padding: 62px 0 40px; }
.ks-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: end;
}
.ks-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #c2410c; /* AA-compliant deep orange for small text (brand #fe5900 fails AA <18px) */
}
.ks-eyebrow::before {
  content: ""; width: 26px; height: 2px; background: #c2410c; display: inline-block;
}
.ks-intro .ks-title {
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.06; letter-spacing: -.02em; margin: 16px 0 0;
  color: var(--ks-ink); font-weight: 700;
}
.ks-intro .ks-title em {
  font-family: Georgia, serif;
  font-style: italic; font-weight: 400; color: var(--ks-primary);
}
.ks-lead { font-size: 17px; line-height: 1.7; color: var(--ks-body); margin: 0; }
.ks-lead strong { color: var(--ks-ink); font-weight: 600; }

/* Sector index — quick-jump chips */
.ks-index {
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--ks-line);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
/* Homepage variant: centered chips to match the centered section header */
.ks-index.ks-index-center { justify-content: center; }
.ks-index-label {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ks-muted); margin-right: 6px;
}
.ks-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--ks-line); border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--ks-ink); text-decoration: none;
  background: #fff; transition: border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.ks-chip i { font-size: 16px; color: var(--ks-muted); transition: color .18s; }
.ks-chip .ks-chip-num { font-size: 11px; font-weight: 700; color: var(--ks-muted); }
.ks-chip:hover, .ks-chip:focus-visible {
  border-color: var(--ks-primary); color: var(--ks-primary);
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(254,89,0,.14);
}
.ks-chip:hover i, .ks-chip:focus-visible i,
.ks-chip:hover .ks-chip-num, .ks-chip:focus-visible .ks-chip-num { color: var(--ks-primary); }

/* ---------------------------------------------------------------
   2. Sector blocks (alternating)
   --------------------------------------------------------------- */
.ks-sector {
  padding: 66px 0;
  border-top: 1px solid var(--ks-line);
  scroll-margin-top: 96px; /* clear the sticky header on anchor jump */
}
.ks-sector.ks-alt { background: #f7f9fc; }

.ks-sector-grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 54px; align-items: center;
}
.ks-sector.ks-alt .ks-sector-media { order: 2; }

/* Media / figure */
.ks-sector-media { position: relative; }
.ks-figure {
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 50px rgba(10,22,40,.16);
  aspect-ratio: 4 / 3;
}
.ks-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,22,40,.55));
}
.ks-badge {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  color: var(--ks-ink); font-size: 13px; font-weight: 600;
}
.ks-badge i { color: var(--ks-accent); font-size: 17px; }
.ks-num-tag {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ks-accent); color: #fff;
  font-weight: 700; font-size: 16px; letter-spacing: .02em;
  box-shadow: 0 8px 20px rgba(10,22,40,.28);
}

/* Content */
.ks-sector-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ks-accent);
}
.ks-sector-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--ks-accent); }
.ks-sector h2 {
  font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -.015em;
  margin: 13px 0 6px; font-weight: 700;
}
.ks-tagline {
  font-family: Georgia, serif; font-style: italic;
  font-size: 21px; color: var(--ks-accent); margin: 0 0 16px;
}
.ks-sector-lead { font-size: 15.5px; line-height: 1.72; margin: 0 0 22px; max-width: 60ch; }

/* Stat tiles — the signature device (real brochure figures) */
.ks-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 24px;
}
.ks-stat {
  padding: 16px 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--ks-line);
  border-top: 3px solid var(--ks-accent);
}
.ks-sector.ks-alt .ks-stat { background: #fff; }
.ks-stat-num {
  font-size: 24px; font-weight: 700; line-height: 1; color: var(--ks-ink);
  letter-spacing: -.02em;
}
.ks-stat-num span { color: var(--ks-accent); }
.ks-stat-label { font-size: 12px; line-height: 1.4; color: var(--ks-muted); margin-top: 7px; }

/* Investible opportunities */
.ks-points-title {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ks-muted); margin: 0 0 12px;
}
.ks-points {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px;
}
.ks-points li {
  position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: var(--ks-body);
}
.ks-points li::before {
  content: "\ea5e"; /* ri-check-line (remixicon) */
  font-family: "remixicon"; position: absolute; left: 0; top: 1px;
  color: var(--ks-accent); font-size: 16px; font-weight: normal;
}

/* Dossier / action row */
.ks-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ks-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: transform .16s, box-shadow .16s, background .16s, color .16s;
}
.ks-btn i { font-size: 17px; }
.ks-btn-outline { border: 1.5px solid var(--ks-accent); color: var(--ks-accent); background: #fff; }
.ks-btn-outline:hover { background: var(--ks-accent); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10,22,40,.18); }
.ks-btn-ghost { color: var(--ks-ink); border: 1.5px solid var(--ks-line); background: #fff; }
.ks-btn-ghost:hover { border-color: var(--ks-ink); transform: translateY(-2px); }

/* ---------------------------------------------------------------
   3. Investment Brochure CTA band (below the sectors)
   --------------------------------------------------------------- */
.ks-brochure {
  background: linear-gradient(135deg, #0a1628 0%, #16233f 55%, #1f2546 100%);
  color: #fff; padding: 70px 0; position: relative; overflow: hidden;
  scroll-margin-top: 96px; /* clear the sticky header on anchor jump, matching .ks-sector */
}
.ks-brochure::before {
  content: ""; position: absolute; right: -140px; top: -120px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(254,89,0,.22), transparent 68%); pointer-events: none;
}
.ks-brochure-grid {
  display: grid; grid-template-columns: 260px 1fr; gap: 54px; align-items: center;
  position: relative; z-index: 1;
}
.ks-brochure-cover {
  border-radius: 12px; overflow: hidden; transform: rotate(-3deg);
  box-shadow: 0 30px 60px rgba(0,0,0,.5); border: 5px solid rgba(255,255,255,.9);
}
.ks-brochure-cover img { width: 100%; display: block; }
.ks-brochure-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #ffb37a;
}
.ks-brochure-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--ks-primary); }
.ks-brochure h2 {
  color: #fff; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.02em;
  margin: 16px 0 12px; font-weight: 700;
}
.ks-brochure h2 em {
  font-family: Georgia, serif; font-style: italic; font-weight: 400; color: #ffb37a;
}
.ks-brochure p { color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.65; margin: 0 0 26px; max-width: 56ch; }
.ks-brochure-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ks-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 11px; font-size: 15px; font-weight: 600;
  text-decoration: none; transition: transform .16s, box-shadow .16s, background .16s, color .16s;
}
.ks-cta i { font-size: 19px; }
.ks-cta-primary {
  background: linear-gradient(135deg, #fe5900, #ff7a33); color: #fff;
  box-shadow: 0 14px 30px rgba(254,89,0,.36);
}
.ks-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(254,89,0,.5); color: #fff; }
.ks-cta-secondary { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.28); }
.ks-cta-secondary:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); color: #fff; }
.ks-brochure-meta { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.55); display: flex; gap: 18px; flex-wrap: wrap; }
.ks-brochure-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------
   Keyboard focus — match the site's visible-focus standard
   (light ring on the dark brochure band, accent ring on light bands)
   --------------------------------------------------------------- */
.ks-chip:focus-visible { outline: 2px solid var(--ks-primary); outline-offset: 2px; }
.ks-btn:focus-visible { outline: 3px solid var(--ks-accent); outline-offset: 3px; }
.ks-cta:focus-visible,
.ks-brochure-cover:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* ---------------------------------------------------------------
   4. Responsive
   --------------------------------------------------------------- */
@media (max-width: 991px) {
  .ks-intro-grid { grid-template-columns: 1fr; gap: 26px; }
  .ks-sector-grid { grid-template-columns: 1fr; gap: 30px; }
  .ks-sector.ks-alt .ks-sector-media { order: 0; }
  .ks-stats { grid-template-columns: repeat(4, 1fr); }
  .ks-brochure-grid { grid-template-columns: 200px 1fr; gap: 34px; }
}
@media (max-width: 767px) {
  .ks-intro { padding: 44px 0 30px; }
  .ks-sector { padding: 48px 0; }
  .ks-stats { grid-template-columns: repeat(2, 1fr); }
  .ks-points { grid-template-columns: 1fr; }
  .ks-figure { aspect-ratio: 16 / 10; }
  .ks-brochure { padding: 52px 0; }
  .ks-brochure-grid { grid-template-columns: 1fr; gap: 30px; justify-items: start; }
  .ks-brochure-cover { max-width: 200px; transform: rotate(-2deg); }
  .ks-brochure-actions { width: 100%; }
  .ks-cta { flex: 1; justify-content: center; }
}
@media (max-width: 420px) {
  .ks-stats { grid-template-columns: 1fr 1fr; }
  .ks-actions { width: 100%; }
  .ks-btn { flex: 1; justify-content: center; }
}