/* ============================================================
   ARCHITECTURAL EYES — Knowledge Hub Styles
   Extends the existing design system. Uses same variables.
   ============================================================ */

/* ============ HUB HERO ============ */
.kh-hero{
  padding:10rem clamp(1.25rem,6vw,6rem) clamp(4rem,8vh,6rem);
  background:var(--dark);position:relative;overflow:hidden;
  min-height:60vh;display:flex;align-items:flex-end;
}
.kh-hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(176,141,76,.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 70%, rgba(176,141,76,.06) 0%, transparent 60%);
}
.kh-hero .wrap{position:relative;z-index:2}
.kh-hero h1{
  font-size:clamp(2.2rem,5vw,4rem);font-weight:300;
  color:#F5F1E6;max-width:18ch;
}
.kh-hero h1 em{color:var(--gold-pale);font-style:italic}
.kh-hero .lead{color:rgba(245,241,230,.55);margin-top:1.2rem;max-width:52ch}
.kh-hero-decos{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.kh-hero-decos .d{
  position:absolute;border:1px solid rgba(176,141,76,.12);transform:rotate(45deg);
}
.kh-hero-decos .d1{width:300px;height:300px;top:-80px;right:-60px}
.kh-hero-decos .d2{width:180px;height:180px;bottom:-40px;left:10%}
.kh-hero-decos .d3{width:90px;height:90px;top:30%;left:55%}

/* ============ HUB SEARCH ============ */
.kh-search-wrap{
  margin-top:2.6rem;position:relative;max-width:560px;
}
.kh-search{
  width:100%;padding:1rem 1.2rem 1rem 3.2rem;
  border:1px solid rgba(176,141,76,.35);background:rgba(16,14,11,.5);
  backdrop-filter:blur(10px);color:#F5F1E6;font-family:var(--font-b);
  font-size:.95rem;transition:border-color .3s,background .3s;
  outline:none;
}
.kh-search:focus{border-color:var(--gold);background:rgba(16,14,11,.7)}
.kh-search::placeholder{color:rgba(245,241,230,.35)}
.kh-search-icon{
  position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);
  color:var(--gold);pointer-events:none;
}
.kh-search-icon svg{width:18px;height:18px}
.kh-search-results{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:100;
  background:rgba(253,252,248,.97);backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:0 12px 40px rgba(23,20,15,.12);
  max-height:400px;overflow-y:auto;display:none;
}
.kh-search-results.active{display:block}
.kh-sr-item{
  display:flex;align-items:center;gap:1rem;
  padding:.85rem 1.2rem;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .2s;
}
.kh-sr-item:last-child{border-bottom:none}
.kh-sr-item:hover{background:var(--bg-warm)}
.kh-sr-type{
  font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);background:rgba(176,141,76,.1);padding:.25rem .6rem;
  white-space:nowrap;flex:none;
}
.kh-sr-title{font-weight:600;font-size:.88rem;color:var(--ink)}
.kh-sr-empty{padding:1.4rem;text-align:center;color:var(--ink-soft);font-size:.88rem}

/* ============ SECTION NAV (sticky tabs) ============ */
/* Make navbar visible over the dark hero of the Knowledge Hub when at the top */
#nav:not(.scrolled) {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#nav:not(.scrolled) .brand {
  color: #F5F1E6 !important;
}
#nav:not(.scrolled) .brand svg {
  color: var(--gold) !important;
}
#nav:not(.scrolled) .nav-links > li > a {
  color: #F5F1E6 !important;
  opacity: 0.85;
}
#nav:not(.scrolled) .nav-links > li > a:hover {
  color: var(--gold) !important;
  opacity: 1;
}
#nav:not(.scrolled) .nav-links > li.dropdown > a {
  color: #F5F1E6 !important;
}
#nav:not(.scrolled) #menu-toggle span {
  background: #F5F1E6 !important;
}

.kh-nav-bar{
  position:sticky;top:56px;z-index:50;
  background:rgba(253,252,248,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.kh-nav-bar::-webkit-scrollbar{display:none}
.kh-nav-inner{
  display:flex;align-items:center;gap:0;
  max-width:1280px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);
}
.kh-nav-tab{
  padding:.9rem 1.4rem;font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  border:none;background:none;cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .3s,border-color .3s;
  font-family:var(--font-b);
}
.kh-nav-tab:hover{color:var(--gold-deep)}
.kh-nav-tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ============ SECTION TITLES ============ */
.kh-section{
  padding:clamp(4rem,8vw,7rem) clamp(1.25rem,6vw,6rem);
}
.kh-section:nth-child(even){background:var(--bg-warm)}
.kh-section-head{margin-bottom:clamp(2rem,4vw,3.4rem)}
.kh-section-head .eyebrow{margin-bottom:.8rem}
.kh-section-head h2{
  font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:300;max-width:24ch;
}

/* ============ FEATURED GUIDES ============ */
.kh-guides-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
}
.kh-guide-card{
  background:#fff;border:1px solid var(--line);padding:2rem 1.8rem;
  display:flex;flex-direction:column;gap:.9rem;
  transition:border-color .4s,transform .5s var(--ease),box-shadow .5s;
  cursor:pointer;position:relative;overflow:hidden;
}
.kh-guide-card:hover{
  border-color:var(--gold);transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(23,20,15,.07);
}
.kh-guide-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.kh-guide-card:hover::after{transform:scaleX(1)}
.kh-guide-meta{
  display:flex;align-items:center;gap:.8rem;
  font-size:.64rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
}
.kh-guide-meta .kh-cat{color:var(--gold)}
.kh-guide-meta .kh-dot{
  width:4px;height:4px;background:var(--gold-pale);
  border-radius:50%;flex:none;
}
.kh-guide-card h3{
  font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:400;
  line-height:1.25;margin-top:.2rem;
}
.kh-guide-card p{
  font-size:.88rem;color:var(--ink-soft);font-weight:300;
  line-height:1.6;flex:1;
}
.kh-guide-card .kh-read{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);display:flex;
  align-items:center;gap:.5rem;margin-top:.4rem;
}
.kh-guide-card .kh-read::after{content:'→';transition:transform .35s}
.kh-guide-card:hover .kh-read::after{transform:translateX(5px)}

/* ============ LEARNING CATEGORIES ============ */
.kh-cats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;
}
.kh-cat-card{
  background:#fff;border:1px solid var(--line);padding:1.8rem 1.4rem;
  text-align:center;cursor:pointer;
  transition:border-color .4s,transform .5s var(--ease),box-shadow .5s;
}
.kh-cat-card:hover,.kh-cat-card.active{
  border-color:var(--gold);transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(23,20,15,.06);
}
.kh-cat-card.active{background:rgba(176,141,76,.04)}
.kh-cat-icon{
  width:52px;height:52px;margin:0 auto .8rem;color:var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.kh-cat-icon svg{width:36px;height:36px}
.kh-cat-card h4{
  font-family:var(--font-d);font-weight:500;font-size:1rem;
  margin-bottom:.3rem;
}
.kh-cat-card p{font-size:.76rem;color:var(--ink-soft)}
.kh-cat-count{
  display:inline-block;margin-top:.6rem;
  font-size:.58rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
  background:rgba(176,141,76,.08);padding:.2rem .6rem;
}

/* ============ FAQ SECTION ============ */
.kh-faq-cats{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;
}
.kh-faq-cat-btn{
  padding:.45rem 1rem;border:1px solid var(--line);background:var(--bg);
  font-family:var(--font-b);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  cursor:pointer;transition:all .3s;
}
.kh-faq-cat-btn:hover,.kh-faq-cat-btn.active{
  border-color:var(--gold);color:var(--gold-deep);background:var(--bg-warm);
}
.kh-faq-list{display:flex;flex-direction:column;gap:0}
.kh-faq-item{border-bottom:1px solid var(--line)}
.kh-faq-q{
  width:100%;padding:1.3rem 0;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;border:none;background:none;
  font-family:var(--font-b);font-size:.95rem;font-weight:600;
  color:var(--ink);text-align:left;cursor:pointer;
  transition:color .3s;
}
.kh-faq-q:hover{color:var(--gold-deep)}
.kh-faq-q .kh-faq-icon{
  width:28px;height:28px;flex:none;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);transition:transform .4s var(--ease),border-color .3s;
  transform:rotate(45deg);
}
.kh-faq-item.open .kh-faq-q .kh-faq-icon{
  transform:rotate(90deg);border-color:var(--gold);
}
.kh-faq-a{
  max-height:0;overflow:hidden;transition:max-height .5s var(--ease),padding .5s;
  padding:0 0 0 0;
}
.kh-faq-item.open .kh-faq-a{max-height:400px;padding:0 0 1.4rem 0}
.kh-faq-a p{
  font-size:.9rem;color:var(--ink-soft);font-weight:300;
  line-height:1.7;max-width:70ch;
}
.kh-faq-count{
  font-size:.78rem;color:var(--ink-soft);margin-bottom:1rem;
}

/* ============ COMPARISONS ============ */
.kh-compare-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
}
.kh-compare-card{
  background:#fff;border:1px solid var(--line);padding:2rem 1.8rem;
  cursor:pointer;display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .4s,transform .5s var(--ease),box-shadow .5s;
}
.kh-compare-card:hover{
  border-color:var(--gold);transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(23,20,15,.07);
}
.kh-compare-card .kh-vs{
  font-size:.62rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);
}
.kh-compare-card h3{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.25}
.kh-compare-card p{font-size:.82rem;color:var(--ink-soft);font-weight:300;flex:1}
.kh-compare-card .kh-read{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);display:flex;
  align-items:center;gap:.5rem;
}
.kh-compare-card .kh-read::after{content:'→';transition:transform .35s}
.kh-compare-card:hover .kh-read::after{transform:translateX(5px)}

/* ============ INDUSTRY SOLUTIONS ============ */
.kh-industry-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
}
.kh-industry-card{
  background:#fff;border:1px solid var(--line);padding:2rem 1.8rem;
  cursor:pointer;display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .4s,transform .5s var(--ease),box-shadow .5s;
}
.kh-industry-card:hover{
  border-color:var(--gold);transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(23,20,15,.07);
}
.kh-industry-card .kh-ind-icon{
  width:44px;height:44px;color:var(--gold);margin-bottom:.4rem;
}
.kh-industry-card h3{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.25}
.kh-industry-card p{font-size:.82rem;color:var(--ink-soft);font-weight:300;flex:1}
.kh-industry-card .kh-read{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);display:flex;
  align-items:center;gap:.5rem;margin-top:.4rem;
}
.kh-industry-card .kh-read::after{content:'→';transition:transform .35s}
.kh-industry-card:hover .kh-read::after{transform:translateX(5px)}

/* ============ CASE STUDY TEMPLATE & SWAROVSKI CASE STUDY ============ */
.kh-case-preview {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 100%;
  width: 100%;
}
.kh-case-preview h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 1.4rem; }
.kh-case-steps { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }
.kh-case-step {
  padding: 0.5rem 1.1rem; border: 1px solid var(--line);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  transition: border-color 0.3s, color 0.3s;
}
.kh-case-step:hover { border-color: var(--gold-pale); color: var(--gold-deep); }
.kh-case-desc {
  margin-top: 1rem; font-size: 0.96rem; color: var(--ink-soft);
  font-weight: 300; line-height: 1.85; max-width: 100%;
}
.kh-case-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: rgba(176, 141, 76, 0.12);
  color: var(--gold-deep);
  border: 1px solid rgba(176, 141, 76, 0.35);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  border-radius: 4px;
}
.kh-case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}
.kh-case-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.6rem;
  background: var(--bg-warm);
  padding: 1.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 2.2rem 0;
}
.kh-case-meta-item strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.kh-case-meta-item span {
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 500;
  font-family: var(--font-d);
}

/* Alternating Video + Text Rows (Bihar-style) */
.kh-case-film-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin: 3rem 0;
}
.kh-case-film-row.reverse {
  direction: rtl;
}
.kh-case-film-row.reverse > * {
  direction: ltr;
}
@media (max-width: 768px) {
  .kh-case-film-row,
  .kh-case-film-row.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
}

/* Bihar-style gold double-border frame */
.kh-case-fv-frame {
  position: relative;
  background: #fff;
  border: 1px solid var(--gold);
  padding: 10px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(23, 20, 15, 0.08);
}
.kh-case-fv-frame::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid var(--gold-pale);
  pointer-events: none;
  z-index: 2;
}
.kh-case-fv-frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}

.kh-case-film-text {
  padding: 0.5rem 0;
}
.kh-case-film-text .kh-case-film-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.8rem;
}
.kh-case-film-text h4 {
  font-family: var(--font-d);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.kh-case-film-text p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.8;
}
.kh-case-film-text .kh-film-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}
.kh-case-film-text .kh-film-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  padding: 0.35rem 0.8rem;
  border-radius: 20px;
}

.kh-case-content-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 3.5rem;
  align-items: start;
}
@media (max-width: 992px) {
  .kh-case-content-grid {
    grid-template-columns: 1fr;
  }
}

.kh-case-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.2rem;
}
.kh-case-tech-tag {
  background: var(--bg-warm);
  border: 1px solid var(--line);
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-deep);
  border-radius: 20px;
}

/* ============ DOWNLOAD CENTER ============ */
.kh-dl-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.4rem;
}
.kh-dl-card{
  background:#fff;border:1px solid var(--line);padding:1.8rem;
  display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .4s,transform .5s var(--ease),box-shadow .5s;
  position:relative;
}
.kh-dl-card:hover{
  border-color:var(--gold);transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(23,20,15,.06);
}
.kh-dl-card-head{display:flex;align-items:center;gap:1rem;margin-bottom:.3rem}
.kh-dl-icon{
  width:40px;height:40px;flex:none;border:1px solid var(--gold-pale);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:.58rem;font-weight:700;letter-spacing:.1em;
}
.kh-dl-card h4{font-family:var(--font-d);font-weight:500;font-size:1.05rem}
.kh-dl-card p{font-size:.82rem;color:var(--ink-soft);font-weight:300;flex:1;line-height:1.6}
.kh-dl-meta{
  display:flex;align-items:center;gap:.8rem;
  font-size:.62rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.3rem;
}
.kh-dl-badge{
  display:inline-block;padding:.2rem .6rem;
  background:rgba(176,141,76,.08);color:var(--gold);
  font-size:.56rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;
}

/* ============ TECHNOLOGY STACK ============ */
.kh-tech-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;
}
.kh-tech-card{
  background:#fff;border:1px solid var(--line);padding:1.8rem 1.4rem;
  text-align:center;cursor:pointer;
  transition:border-color .4s,transform .5s var(--ease),box-shadow .5s;
}
.kh-tech-card:hover,.kh-tech-card.active{
  border-color:var(--gold);transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(23,20,15,.06);
}
.kh-tech-card h4{
  font-family:var(--font-d);font-weight:500;font-size:1rem;
  margin-bottom:.4rem;
}
.kh-tech-card p{font-size:.76rem;color:var(--ink-soft);line-height:1.5}
.kh-tech-detail{
  margin-top:2rem;background:#fff;border:1px solid var(--gold-pale);
  padding:2rem;display:none;
}
.kh-tech-detail.active{display:block}
.kh-tech-detail h3{font-size:1.3rem;margin-bottom:.8rem}
.kh-tech-detail p{font-size:.92rem;color:var(--ink-soft);font-weight:300;line-height:1.7;max-width:70ch}

/* ============ INTERACTIVE TIMELINE ============ */
.kh-timeline-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: start;
  margin-top: 3rem;
}
.kh-timeline{position:relative;}
.kh-timeline::before{
  content:'';position:absolute;left:23px;top:0;bottom:0;width:1px;
  background:linear-gradient(var(--gold),var(--gold-pale),transparent);
}
.kh-tl-step{
  display:flex;gap:1.8rem;padding:1.4rem 0;position:relative;
  transition:opacity 0.3s;
  cursor: pointer;
}
.kh-tl-step:not(.active) {
  opacity: 0.6;
}
.kh-tl-step.active {
  opacity: 1;
}
.kh-tl-dot{
  width:48px;height:48px;flex:none;
  border:1px solid var(--gold-pale);transform:rotate(45deg);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);z-index:2;
  transition:border-color .4s,background .4s,transform .5s var(--ease);
}
.kh-tl-step.active .kh-tl-dot,
.kh-tl-step:hover .kh-tl-dot{
  border-color:var(--gold);background:var(--gold);
  transform:rotate(45deg) scale(1.1);
}
.kh-tl-num{
  transform:rotate(-45deg);font-size:.62rem;font-weight:700;
  letter-spacing:.15em;color:var(--gold);
  transition:color .3s;
}
.kh-tl-step.active .kh-tl-num,
.kh-tl-step:hover .kh-tl-num{color:#fff}
.kh-tl-content{padding-top:.3rem}
.kh-tl-day-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(176,141,76,0.08);
  padding: 0.25rem 0.65rem;
  display: inline-block;
  margin-bottom: 0.5rem;
  border-radius: 2px;
}
.kh-tl-content h4{
  font-family:var(--font-d);font-weight:500;font-size:1.1rem;
  margin-bottom:.3rem;
}
.kh-tl-content p{font-size:.82rem;color:var(--ink-soft);font-weight:300}

/* Sticky Illustration Preview Panel */
.kh-timeline-preview {
  position: sticky;
  top: 120px;
  z-index: 10;
}
.kh-tl-sticky-card {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 2.2rem;
  box-shadow: 0 10px 30px rgba(23, 20, 15, 0.04);
  text-align: center;
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
.kh-tl-sticky-card:hover {
  border-color: var(--gold-pale);
  transform: translateY(-2px);
}
.kh-tl-ill-header {
  margin-bottom: 1.6rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.kh-tl-ill-day {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.3rem;
}
.kh-tl-ill-title {
  font-family: var(--font-d);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}
.kh-tl-ill-body {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: opacity 0.2s ease-in-out;
}
.kh-tl-ill-body svg {
  max-height: 100%;
  max-width: 100%;
  transition: all 0.3s ease;
}

@media(max-width: 860px){
  .kh-timeline-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .kh-timeline-preview {
    position: relative;
    top: 0;
    margin-top: 1rem;
    order: -1;
  }
}

/* ============ ARTICLE VIEW ============ */
.kh-article-view{display:none}
.kh-article-view.active{display:block}
.kh-article-hero{
  padding:10rem clamp(1.25rem,6vw,6rem) clamp(3rem,6vh,5rem);
  background:var(--dark);position:relative;
}
.kh-article-hero .wrap{position:relative;z-index:2}
.kh-article-back{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-pale);border:none;background:none;cursor:pointer;
  margin-bottom:1.6rem;transition:color .3s;font-family:var(--font-b);
}
.kh-article-back:hover{color:var(--gold)}
.kh-article-back svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.kh-article-hero h1{
  font-size:clamp(2rem,4.2vw,3.4rem);font-weight:300;
  color:#F5F1E6;max-width:20ch;
}
.kh-article-hero .kh-guide-meta{margin-top:1.2rem;color:rgba(245,241,230,.5)}
.kh-article-hero .kh-guide-meta .kh-cat{color:var(--gold-pale)}

.kh-article-body{
  padding:clamp(3rem,6vw,5rem) clamp(1.25rem,6vw,6rem);
}
.kh-article-layout{
  display:grid;grid-template-columns:220px 1fr;gap:clamp(2rem,5vw,5rem);
  max-width:1280px;margin:0 auto;align-items:start;
}

/* Sticky sidebar TOC */
.kh-toc{
  position:sticky;top:120px;
}
.kh-toc-label{
  font-size:.62rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem;
}
.kh-toc ul{list-style:none;display:flex;flex-direction:column;gap:.3rem}
.kh-toc a{
  display:block;padding:.4rem .8rem;font-size:.78rem;color:var(--ink-soft);
  border-left:2px solid transparent;transition:color .3s,border-color .3s;
}
.kh-toc a:hover,.kh-toc a.active{
  color:var(--gold-deep);border-left-color:var(--gold);
}

/* Article content styling */
.kh-article-content{max-width:740px}
.kh-article-content h2{
  font-size:clamp(1.3rem,2vw,1.7rem);font-weight:400;
  margin:2.4rem 0 1rem;padding-top:1rem;
  border-top:1px solid var(--line);
}
.kh-article-content h2:first-child{border-top:none;margin-top:0;padding-top:0}
.kh-article-content p{
  font-size:.95rem;color:var(--ink-soft);font-weight:300;
  line-height:1.8;margin-bottom:1rem;
}
.kh-article-content strong{color:var(--ink);font-weight:600}
.kh-article-content em{color:var(--gold-deep)}
.kh-article-content ul,.kh-article-content ol{
  margin:1rem 0 1.4rem 1.2rem;
}
.kh-article-content li{
  font-size:.92rem;color:var(--ink-soft);font-weight:300;
  line-height:1.7;margin-bottom:.5rem;
}
.kh-article-content li strong{color:var(--ink)}
.kh-article-content table{
  width:100%;border-collapse:collapse;margin:1.4rem 0;
  font-size:.85rem;
}
.kh-article-content th{
  text-align:left;padding:.7rem 1rem;font-weight:700;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:2px solid var(--gold-pale);
  background:var(--bg-warm);
}
.kh-article-content td{
  padding:.65rem 1rem;border-bottom:1px solid var(--line);
  color:var(--ink-soft);font-weight:300;
}

/* Reading progress bar */
.kh-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;
  background:transparent;
}
.kh-progress-bar{
  height:100%;width:0;background:var(--gold);
  transition:width .15s linear;
}

/* Share bar */
.kh-share{
  display:flex;align-items:center;gap:.8rem;
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);
}
.kh-share-label{
  font-size:.62rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-soft);margin-right:.4rem;
}
.kh-share-btn{
  width:36px;height:36px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  background:none;cursor:pointer;color:var(--ink-soft);
  transition:border-color .3s,color .3s;
}
.kh-share-btn:hover{border-color:var(--gold);color:var(--gold)}
.kh-share-btn svg{width:16px;height:16px}
.kh-share-copied{
  font-size:.7rem;color:var(--gold);font-weight:600;
  opacity:0;transition:opacity .3s;
}
.kh-share-copied.show{opacity:1}

/* Related articles */
.kh-related{margin-top:clamp(3rem,6vw,5rem)}
.kh-related h3{font-size:clamp(1.2rem,1.8vw,1.5rem);margin-bottom:1.4rem}
.kh-related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
}

/* Prev/Next navigation */
.kh-prev-next{
  display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);
}
.kh-pn-link{
  padding:1.2rem 1.4rem;border:1px solid var(--line);
  cursor:pointer;transition:border-color .3s,background .3s;
  display:flex;flex-direction:column;gap:.3rem;
}
.kh-pn-link:hover{border-color:var(--gold-pale);background:var(--bg-warm)}
.kh-pn-link.next{text-align:right}
.kh-pn-label{
  font-size:.58rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft);
}
.kh-pn-title{font-family:var(--font-d);font-size:1rem;color:var(--ink)}

/* ============ COMPARISON DETAIL VIEW ============ */
.kh-compare-detail{display:none}
.kh-compare-detail.active{display:block}
.kh-compare-table{
  width:100%;border-collapse:collapse;margin:2rem 0;
}
.kh-compare-table th{
  padding:.8rem 1.2rem;font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;
  border-bottom:2px solid var(--gold-pale);
  background:var(--bg-warm);color:var(--ink-soft);text-align:left;
}
.kh-compare-table td{
  padding:.7rem 1.2rem;border-bottom:1px solid var(--line);
  font-size:.88rem;color:var(--ink-soft);font-weight:300;
}
.kh-compare-table tr:hover td{background:rgba(176,141,76,.03)}
.kh-pros-cons{
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0;
}
.kh-pros h4,.kh-cons h4{
  font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;margin-bottom:1rem;
}
.kh-pros h4{color:#4a8c6f}
.kh-cons h4{color:#a85c4a}
.kh-pros li,.kh-cons li{
  font-size:.88rem;color:var(--ink-soft);font-weight:300;
  margin-bottom:.5rem;line-height:1.6;
}
.kh-verdict{
  background:var(--bg-warm);border:1px solid var(--gold-pale);
  padding:2rem;margin:2rem 0;
}
.kh-verdict h4{
  font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.8rem;
}
.kh-verdict p{font-size:.92rem;color:var(--ink-soft);font-weight:300;line-height:1.7}

/* ============ INDUSTRY DETAIL VIEW ============ */
.kh-industry-detail{display:none}
.kh-industry-detail.active{display:block}
.kh-ind-solutions{margin:2rem 0}
.kh-ind-solutions li{
  padding:.8rem 0;border-bottom:1px solid var(--line);
  font-size:.92rem;color:var(--ink-soft);font-weight:300;
  display:flex;align-items:center;gap:.8rem;
}
.kh-ind-solutions li::before{
  content:'';width:7px;height:7px;flex:none;
  border:1px solid var(--gold);transform:rotate(45deg);
}

/* ============ BREADCRUMB ============ */
.kh-breadcrumb{
  display:flex;align-items:center;gap:.5rem;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
  padding:1rem clamp(1.25rem,6vw,6rem);
  border-bottom:1px solid var(--line);
}
.kh-breadcrumb a{color:var(--ink-soft);transition:color .3s}
.kh-breadcrumb a:hover{color:var(--gold)}
.kh-breadcrumb .sep{color:var(--gold-pale)}

/* ============ RESPONSIVE ============ */
@media(max-width:1020px){
  .kh-guides-grid,.kh-compare-grid,.kh-industry-grid,.kh-related-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .kh-cats-grid,.kh-tech-grid{grid-template-columns:repeat(2,1fr)}
  .kh-article-layout{grid-template-columns:1fr}
  .kh-toc{position:static;margin-bottom:2rem}
  .kh-pros-cons{grid-template-columns:1fr}
}
@media(max-width:860px){
  .kh-hero{min-height:auto;padding-top:8rem}
  .kh-guides-grid,.kh-compare-grid,.kh-industry-grid,.kh-related-grid,.kh-prev-next{
    grid-template-columns:1fr;
  }
  .kh-cats-grid,.kh-tech-grid{grid-template-columns:1fr 1fr}
  .kh-nav-tab{padding:.7rem 1rem}
}