/*
 Theme Name:   KEC Child Theme
 Theme URI:    https://karoleducation.com
 Description:  Karol Education Consultancy — custom child theme built on Astra Pro. Pixel-identical to the HTML prototype. Built by Zentu Media.
 Author:       Zentu Media
 Author URI:   https://zentumedia.com
 Template:     astra
 Version:      2.2
 Text Domain:  kec-child
*/

/* ═══════════════════════════════════════════════════════
   KEC — PREMIUM WEBSITE
   Navy + Gold brand for Karol Education Consultancy
   Built by Zentu Media for kec.zentumedia.com
   ═══════════════════════════════════════════════════════ */

/* ── RESET ASTRA DEFAULTS ── */
.ast-container { max-width: none !important; }
.ast-site-header-wrap, .main-header-bar { display: none !important; }
.ast-footer-overlay, .footer-widget-area, .site-footer { display: none !important; }

/* Strip ALL padding/margin from Astra's content wrappers so our full-width sections work */
body.ast-page-builder-template .entry-content,
.kec-page .entry-content,
.kec-page .entry-content > *,
.kec-page #content,
.kec-page #primary,
.kec-page .site-content,
.kec-page .ast-container,
.kec-page .container,
.kec-page article.page,
.kec-page .post-0 { 
  padding: 0 !important; 
  margin: 0 !important; 
  max-width: none !important;
  width: 100% !important;
}
.wp-site-blocks { padding: 0 !important; }
#page { padding-top: 0 !important; }

/* Astra sometimes hides overflow on #content — we need our sections to be visible */
.kec-page #content,
.kec-page #primary { overflow: visible !important; }

/* ── FIX: BUTTON HOVER TEXT VISIBILITY ── */
/* Primary button: gold bg — text must stay navy on hover */
.btn-primary:hover { color: var(--navy) !important; }
/* Nav CTA button */
.btn-nav:hover { color: var(--navy) !important; }
/* White button on dark sections */
.btn-white:hover { color: var(--navy) !important; }
/* Sidebar CTA */
.sidebar-cta:hover { color: var(--navy) !important; }
/* Form submit hover: gold bg, navy text */
.btn-form-submit:hover { color: var(--navy) !important; }
/* Secondary button: never loses white text */
.btn-secondary:hover { color: var(--white) !important; }
/* Outline button hover */
.btn-cta-outline:hover { color: var(--white) !important; }
/* All anchor-buttons inside dark CTA sections */
a.btn-primary:hover { color: var(--navy) !important; }

/* ── FIX: CURSOR GLOW — don't interfere with clickable elements ── */
.cursor-glow { position: fixed; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.12) 0%, transparent 65%); pointer-events: none !important; z-index: 1; transform: translate(-50%,-50%); transition: opacity .3s; opacity: 0; }
/* Ensure all interactive elements sit above the glow */


/* Scroll-animated elements are always visible — animations use transform only, never opacity */
/* This means no content can ever be invisible due to GSAP/ScrollTrigger failures */

:root {
  --navy:   #002D62;
  --navy-d: #001535;
  --navy-m: #0A3A7A;
  --navy-l: #EBF0F8;
  --gold:   #C9A227;
  --gold-d: #8A6E1A;
  --gold-l: #FBF3D8;
  --sand:   #D4A76A;
  --white:  #FFFFFF;
  --off:    #F7F8FA;
  --g100:   #E4EAEC;
  --g400:   #6B7E84;
  --g700:   #3A3A3A;
  --ff:     'Playfair Display', Georgia, serif;
  --fs:     'DM Sans', -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--fs); color: var(--g700); background: var(--white); overflow-x: hidden; overflow-y: auto; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ── PERFORMANCE ── */
/* Reduce layout recalculation on animated elements */
.site-header { will-change: background; }
.wa-fab { will-change: transform, opacity; }
.hero-card { will-change: transform, opacity; }
/* GPU-accelerate hover transitions on cards */
.svc-card, .why-card, .vid-full-card, .uni-card, .blog-card-small, .blog-featured-card {
  will-change: transform;
  transform: translateZ(0); /* promote to own layer */
}
/* Prevent font flash — fonts render with fallback immediately */
body { font-display: swap; }
/* Ensure images never cause layout shift */
img { width: auto; height: auto; }
/* Reduce paint area for fixed elements */



/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--navy-d); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* ── LAYOUT ── */
.w { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ── TOPBAR ── */
.topbar { background: var(--navy-d); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.topbar-i { display: flex; align-items: center; justify-content: space-between; }
.topbar a { font-size: 11.5px; color: rgba(255,255,255,.6); display: inline-flex; align-items: center; gap: 5px; margin-right: 20px; transition: color .2s; }
.topbar a:hover { color: var(--gold); }
.topbar a svg { width: 12px; height: 12px; }
.tsoc { display: flex; gap: 12px; }
.tsoc a { margin-right: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ── NAV ── */
.site-header {
  background: rgba(0,45,98,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: all .3s;
}
.site-header.scrolled { background: rgba(0,21,53,.97); box-shadow: 0 4px 32px rgba(0,0,0,.3); }
.nav-i { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.nav-logo { display: flex; align-items: center; gap: 10px; }
.logo-mark { font-family: var(--ff); font-size: 26px; font-weight: 800; color: var(--white); letter-spacing: .03em; line-height: 1; }
.logo-mark span { color: var(--gold); }
.logo-sub { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-top: 3px; }
.nav-divider { width: 1px; height: 28px; background: rgba(255,255,255,.12); margin: 0 16px; }
.navlinks { display: flex; align-items: center; gap: 2px; }
.navlinks > a, .nav-dropdown > a { padding: 7px 12px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.72); border-radius: 6px; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 4px; }
.navlinks > a:hover, .navlinks > a.act, .nav-dropdown > a:hover { color: var(--white); background: rgba(255,255,255,.1); }
.nav-dropdown { position: relative; }
/* Invisible bridge fills the gap between trigger link and dropdown so hover doesn't break */
.nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 20px; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--white); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  padding: 8px; min-width: 240px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  pointer-events: none; border: 1px solid rgba(0,0,0,.06); z-index: 200;
}
.nav-dropdown:hover .nav-dd-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.nav-dd-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; color: var(--g700); border-radius: 8px; transition: all .18s; }
.nav-dd-menu a:hover { background: var(--navy-l); color: var(--navy); }
.nav-dd-flag { font-size: 16px; }
.btn-nav { background: var(--gold); color: var(--navy); padding: 9px 20px; border-radius: 7px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; letter-spacing: .01em; box-shadow: 0 2px 10px rgba(0,0,0,.2); position: relative; overflow: hidden; isolation: isolate; transition: box-shadow .3s; }
.btn-nav:hover { background: var(--gold); box-shadow: 0 4px 14px rgba(0,0,0,.3); color: var(--navy); }
.btn-nav::after { content: ''; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .55s ease; pointer-events: none; }
.btn-nav:hover::after { left: 130%; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: all .3s; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE MENU PANEL ── */
.mobile-menu { display: none; flex-direction: column; background: #001535; width: 100%; }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 16px 24px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.82); border-bottom: 1px solid rgba(255,255,255,.06); display: block; }
.mobile-menu a:active { background: rgba(255,255,255,.08); }
.mobile-menu a.mobile-menu-cta { background: var(--gold); color: #002D62; font-weight: 700; margin: 14px 16px 8px; border-radius: 9px; text-align: center; border-bottom: none; padding: 16px; }

/* ══════════════════════════════════════════
   HERO - PREMIUM DARK WITH MESH + PARTICLES
   ══════════════════════════════════════════ */
.hero { background: var(--navy-d); min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 80px 0 60px; }
.hero-mesh { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(10,58,122,.7) 0%, transparent 70%), radial-gradient(ellipse 60% 80% at 20% 70%, rgba(201,162,39,.08) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 80% 80%, rgba(212,167,106,.06) 0%, transparent 50%), linear-gradient(160deg, #001535 0%, #002D62 45%, #001535 100%); }
.hero-cross-pattern { position: absolute; inset: 0; pointer-events: none; opacity: .03; background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px); background-size: 48px 48px; }
#hero-canvas { position: absolute; inset: 0; pointer-events: none !important; z-index: 0; }
.cursor-glow { position: fixed; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.12) 0%, transparent 65%); pointer-events: none !important; z-index: 1; transform: translate(-50%,-50%); transition: opacity .3s; opacity: 0; }
.hero-inner { display: grid; grid-template-columns: 1fr 460px; gap: 64px; align-items: center; position: relative; z-index: 10; }
.hero-line { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; opacity: 0; }
.hero-line-bar { width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5' stroke-opacity='.6'/%3E%3C/svg%3E") no-repeat center; background-size: contain; flex-shrink: 0; transition: none; }
.hero-line-text { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.hero h1 { font-family: var(--ff); font-size: clamp(32px, 4.5vw, 54px); font-weight: 800; color: var(--white); line-height: 1.1; margin-bottom: 20px; opacity: 0; }
.hero h1 .accent { color: var(--gold); }
.hero h1 .italic { font-style: italic; }
.hero-sub { font-size: 16px; color: rgba(255,255,255,.72); line-height: 1.82; max-width: 480px; margin-bottom: 36px; opacity: 0; font-weight: 300; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; opacity: 0; }
.btn-primary {
  background: var(--gold); color: var(--navy);
  padding: 14px 28px; border-radius: 8px; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer; letter-spacing: .01em;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  display: inline-flex; align-items: center; gap: 8px;
  position: relative; overflow: hidden; isolation: isolate;
  transition: box-shadow .3s;
}
.btn-primary::after {
  content: ''; position: absolute;
  top: -50%; left: -75%; width: 50%; height: 200%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn-primary:hover { background: var(--gold); box-shadow: 0 6px 22px rgba(0,0,0,.3); color: var(--navy); }
.btn-primary:hover::after { left: 130%; }
.btn-primary span, .btn-primary svg { position: relative; z-index: 1; }
.btn-secondary { background: rgba(255,255,255,.08); color: var(--white); padding: 14px 28px; border-radius: 8px; font-size: 14px; font-weight: 500; border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: all .25s; backdrop-filter: blur(10px); display: inline-flex; align-items: center; gap: 8px; }
.btn-secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.hero-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; opacity: 0; }
.hero-pill { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 6px 14px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 6px; backdrop-filter: blur(10px); transition: all .2s; }
.hero-pill:hover { background: rgba(255,255,255,.1); border-color: rgba(201,162,39,.4); color: var(--white); }
.hero-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.hero-pill-icon { font-size: 13px; flex-shrink: 0; }
.hero-card { position: relative; opacity: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.12); background: var(--navy-d); }
.hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(201,162,39,.7), transparent); }
/* Video wrapper: strict 16:9 ratio with no black gaps */
.hero-video-wrap { position: relative; width: 100%; padding-top: 56.25%; background: var(--navy-d); overflow: hidden; }
/* iframe fills wrapper exactly — no borders, no gaps */
.hero-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; }
/* WP Rocket lazy wrapper — ensure it fills container too */
.hero-video-wrap .rocket-lazyload-placeholder,
.hero-video-wrap .rll-youtube-player { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.hero-video-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,21,53,.95), transparent); padding: 24px 18px 14px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.hero-video-badge { background: var(--gold); color: var(--navy); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.hero-video-text { font-size: 12px; color: rgba(255,255,255,.75); line-height: 1.4; }
@keyframes float-badge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ── TRUST BAR ── */
.trust-bar { background: var(--white); padding: 0; border-bottom: 1px solid var(--g100); overflow: hidden; }
.trust-scroll { display: flex; width: max-content; animation: trust-marquee 28s linear infinite; }
.trust-scroll:hover { animation-play-state: paused; }
@keyframes trust-marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.trust-item { display: flex; align-items: center; gap: 9px; padding: 18px 32px; font-size: 12.5px; font-weight: 500; color: var(--g400); border-right: 1px solid var(--g100); white-space: nowrap; }
.trust-item-icon { font-size: 15px; color: var(--gold); }
.trust-item strong { color: var(--navy); }

/* ── STATS ── */
.stats-section { background: var(--navy); padding: 72px 0; position: relative; overflow: hidden; }
.stats-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,162,39,.5), transparent); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { padding: 40px 32px; text-align: center; border-right: 1px solid rgba(255,255,255,.08); position: relative; overflow: hidden; cursor: default; transition: background .3s; }
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(255,255,255,.04); }
.stat-item::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--gold); transition: width .4s ease; }
.stat-item:hover::after { width: 60%; }
.stat-num-big { font-family: var(--ff); font-size: clamp(44px,5vw,64px); font-weight: 800; color: var(--white); line-height: 1; margin-bottom: 8px; display: block; }
.stat-num-big .gold { color: var(--gold); }
.stat-label-big { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .1em; }
.stat-icon { display:flex; align-items:center; justify-content:center; margin-bottom: 10px; }
.stat-icon svg { opacity: .9; }
.kec-icon-f { width: 44px; height: 44px; border-radius: 11px; background: #001535; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kec-icon-f svg { display: block; }

/* ── SECTION SHARED ── */
.sec-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 14px; }
.sec-label::before { content: ''; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5' stroke-opacity='.6'/%3E%3C/svg%3E") no-repeat center; background-size: contain; flex-shrink: 0; }
.sec-h { font-family: var(--ff); font-size: clamp(26px,3.2vw,40px); font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: 12px; }
.sec-p { font-size: 15px; color: var(--g400); max-width: 520px; line-height: 1.82; font-weight: 300; }
.section-header { margin-bottom: 56px; }
.section-header .sec-p { margin-top: 8px; }

/* ── SERVICES ── */
.services-section { background: var(--off); padding: 100px 0; }
.svc-grid-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.svc-card { background: var(--white); border: 1px solid var(--g100); border-radius: 20px; padding: 32px 28px 28px; position: relative; overflow: hidden; transition: all .3s ease; display: flex; flex-direction: column; gap: 0; }
.svc-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--sand)); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 20px 56px rgba(0,45,98,.1); border-color: rgba(201,162,39,.2); }
.svc-card:hover::after { transform: scaleX(1); }
.svc-card.svc-dark { background: var(--gold-l); border-color: rgba(201,162,39,.25); }

.svc-card.svc-dark .svc-num { color: var(--gold-d); opacity: .25; }
.svc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.svc-icon-wrap { width: 50px; height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .3s; }
.svc-card:hover .svc-icon-wrap { transform: scale(1.08) rotate(-4deg); }

.svc-num { font-family: var(--ff); font-size: 36px; font-weight: 800; color: var(--gold); opacity: .18; line-height: 1; align-self: flex-end; }
.svc-card h3 { font-family: var(--ff); font-size: 17px; color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.svc-card p { font-size: 13.5px; color: var(--g400); line-height: 1.72; flex: 1; }

/* ── FOUNDER ── */
.founder-section { background: var(--white); padding: 100px 0; overflow: hidden; }
.founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.f-photo-side { position: relative; padding-bottom: 24px; }
.f-photo-frame { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 3/4; box-shadow: 0 24px 64px rgba(0,45,98,.18); }
.f-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.f-photo-placeholder { width: 100%; height: 100%; background: linear-gradient(160deg, var(--navy-l), #BDD0EF); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--navy-m); }
.f-photo-placeholder svg { width: 80px; height: 80px; opacity: .3; }
.f-photo-placeholder span { font-size: 13px; opacity: .5; text-align: center; }
.f-gold-block { position: absolute; top: -20px; right: -20px; bottom: 44px; left: 20px; background: linear-gradient(135deg, var(--gold), var(--sand)); border-radius: 24px; z-index: -1; opacity: .25; }
.f-badge-row { display: flex; gap: 12px; margin-top: 16px; padding: 0 4px; }
.f-stat-card { flex: 1; background: var(--white); border-radius: 14px; padding: 14px 16px; box-shadow: 0 8px 32px rgba(0,45,98,.14); border: 1px solid var(--g100); animation: float-badge 5s ease-in-out infinite; }
.f-stat-card .big { font-family: var(--ff); font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1; }
.f-stat-card .big span { color: var(--gold); }
.f-stat-card .small { font-size: 10px; color: var(--g400); margin-top: 3px; line-height: 1.4; }
.f-award-card { flex: 1; background: var(--navy); border-radius: 14px; padding: 14px 16px; box-shadow: 0 8px 28px rgba(0,21,53,.25); animation: float-badge 4s ease-in-out infinite reverse; }
.f-award-card .trophy { font-size: 16px; margin-bottom: 4px; }
.f-award-card .award-text { font-size: 11px; font-weight: 600; color: var(--gold); line-height: 1.4; }
.f-award-card .award-sub { font-size: 10px; color: rgba(255,255,255,.5); margin-top: 2px; }
.f-quote { font-family: var(--ff); font-size: clamp(20px,2.5vw,28px); font-weight: 600; color: var(--navy); line-height: 1.45; font-style: italic; margin-bottom: 28px; padding-left: 24px; border-left: 3px solid var(--gold); }
.f-body { font-size: 15px; color: var(--g400); line-height: 1.85; margin-bottom: 16px; font-weight: 300; }
.f-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.f-tag { display: flex; align-items: center; gap: 6px; background: var(--navy-l); color: var(--navy); padding: 6px 14px; border-radius: 24px; font-size: 12px; font-weight: 500; transition: all .2s; }
.f-tag:hover { background: var(--navy); color: var(--white); }
.f-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.btn-cta-outline { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--navy); color: var(--navy); padding: 13px 26px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .25s; background: transparent; }
.btn-cta-outline:hover { background: var(--navy); color: var(--white); }
.btn-cta-outline svg { width: 16px; height: 16px; transition: transform .2s; }
.btn-cta-outline:hover svg { transform: translateX(4px); }

/* ── TESTIMONIALS ── */
.testimonials-section { background: var(--navy-d); padding: 100px 0; overflow: hidden; max-width: 100vw; }
.testimonials-section .sec-label { color: rgba(201,162,39,.8); }
.testimonials-section .sec-label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(201,162,39,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5' stroke-opacity='.5'/%3E%3C/svg%3E"); background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; }
.testimonials-section .sec-h { color: var(--white); }
.testimonials-section .sec-p { color: rgba(255,255,255,.5); }
.bw-feature { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; overflow: hidden; margin: 48px 0 0; display: grid; grid-template-columns: 1fr 1fr; }
.bw-video { aspect-ratio: 16/9; overflow: hidden; }
.bw-video iframe { width: 100%; height: 100%; border: none; }
.bw-content { padding: 48px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(135deg, rgba(10,58,122,.5), rgba(0,21,53,.8)); }
.bw-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(201,162,39,.15); border: 1px solid rgba(201,162,39,.3); color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .1em; padding: 6px 14px; border-radius: 20px; margin-bottom: 20px; width: fit-content; }
.bw-content h3 { font-family: var(--ff); font-size: 24px; color: var(--white); margin-bottom: 14px; line-height: 1.35; }
.bw-content p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.8; font-weight: 300; }
.vid-scroll-wrap { position: relative; margin-top: 32px; overflow: hidden; max-width: 100%; }
.vid-scroll { display: flex; gap: 20px; padding: 8px 4px; will-change: transform; cursor: grab; }

.vid-scroll:active { cursor: grabbing; }
.vid-card { flex: 0 0 320px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; transition: border-color .3s, box-shadow .3s; position: relative; }
.vid-card:hover { background: rgba(255,255,255,.09); border-color: rgba(201,162,39,.3); transform: translateY(-3px); }
.vid-card-thumb { aspect-ratio: 16/9; overflow: hidden; position: relative; background: rgba(255,255,255,.03); }
.vid-card-thumb iframe { width: 100%; height: 100%; border: none; }
.vid-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.vid-play-btn { width: 52px; height: 52px; background: rgba(201,162,39,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform .2s; }
.vid-card:hover .vid-play-btn { transform: scale(1.1); }
.vid-placeholder-text { font-size: 12px; color: rgba(255,255,255,.4); text-align: center; }
.vid-info { padding: 16px 18px; }
.vid-info h4 { font-size: 14px; color: var(--white); font-weight: 600; margin-bottom: 4px; }
.vid-info p { font-size: 12px; color: rgba(255,255,255,.45); margin: 0; }
.vid-cta-row { text-align: center; margin-top: 40px; }
.vid-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; }
.vid-dot { width: 10px; height: 10px; border-radius: 9999px; background: rgba(255,255,255,.3); border: none; cursor: pointer; padding: 0; position: relative; overflow: visible; transition: width .35s cubic-bezier(.34,1.56,.64,1), background .25s; flex-shrink: 0; }
.vid-dot.active { width: 28px; background: var(--gold); }
.vid-dot:hover:not(.active) { background: rgba(255,255,255,.55); }
.vid-dot-ripple { position: absolute; inset: 0; border-radius: 9999px; background: rgba(201,162,39,.35); animation: vid-ripple .6s ease-out forwards; pointer-events: none; }
@keyframes vid-ripple { from { transform: scale(0.8); opacity: .6; } to { transform: scale(1.8); opacity: 0; } }
.vid-scroll-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.vid-nav-btn {
  background: none; border: none; padding: 4px;
  color: rgba(255,255,255,.5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color .2s; line-height: 1;
}
.vid-nav-btn:hover, .vid-nav-btn:active { color: var(--white); }
.vid-nav-btn:disabled { opacity: 0.2; cursor: default; }
.vid-nav-btn svg { width: 28px; height: 28px; flex-shrink: 0; }
.vid-count { font-size: 12px; color: rgba(255,255,255,.4); font-weight: 500; letter-spacing: .06em; }

/* ── LEAD FORM ── */
.form-section { background: var(--off); padding: 100px 0; position: relative; }
.form-grid { display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: start; }
.form-left h2 { font-family: var(--ff); font-size: clamp(26px,3.2vw,40px); color: var(--navy); line-height: 1.2; margin-bottom: 16px; }
.form-left p { font-size: 15px; color: var(--g400); line-height: 1.82; margin-bottom: 36px; font-weight: 300; }
.form-trust { display: flex; flex-direction: column; gap: 14px; }
.form-trust-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--white); border-radius: 12px; border: 1px solid var(--g100); transition: all .22s; }
.form-trust-item:hover { border-color: var(--gold); box-shadow: 0 4px 16px rgba(0,45,98,.08); }
.form-trust-ico { width: 36px; height: 36px; min-width: 36px; border-radius: 8px; background: var(--navy-l); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.form-trust-text h4 { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 1px; }
.form-trust-text p { font-size: 12px; color: var(--g400); margin: 0; }
.form-card { background: var(--white); border-radius: 24px; padding: 36px; box-shadow: 0 16px 64px rgba(0,45,98,.1); border: 1px solid var(--g100); position: relative; overflow: hidden; }
.form-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--navy), var(--gold), var(--sand)); }
.form-card-head { margin-bottom: 28px; }
.form-card-head h3 { font-family: var(--ff); font-size: 22px; color: var(--navy); margin-bottom: 4px; }
.form-card-head p { font-size: 13px; color: var(--g400); }
.fg { margin-bottom: 14px; }
.fg label { display: block; font-size: 11.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
.fg input, .fg select, .fg textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--g100); border-radius: 9px; font-size: 14px; color: var(--g700); background: var(--off); transition: all .2s; font-family: var(--fs); -webkit-appearance: none; min-height: 46px; line-height: 1.5; overflow: visible; text-overflow: ellipsis; }
.fg input:focus, .fg select:focus, .fg textarea:focus { outline: none; border-color: var(--navy); background: var(--white); box-shadow: 0 0 0 4px rgba(0,45,98,.06); }
.fg select { cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media(max-width:520px){ .frow { grid-template-columns: 1fr; } }
.btn-form-submit { width: 100%; background: var(--navy); color: var(--white); padding: 15px; border-radius: 10px; font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: all .25s; margin-top: 8px; position: relative; overflow: hidden; letter-spacing: .01em; }
.btn-form-submit::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); transition: left .5s ease; }
.btn-form-submit:hover { background: var(--gold); color: var(--navy); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.btn-form-submit:hover::before { left: 100%; }
.form-note { font-size: 11.5px; color: var(--g400); text-align: center; margin-top: 12px; line-height: 1.6; }

/* ── FAQ ── */
.faq-section { background: var(--white); padding: 100px 0; }
.faq-layout { display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: start; }
.faq-intro { position: sticky; top: 100px; }
.faq-intro h2 { font-family: var(--ff); font-size: clamp(26px,3vw,36px); color: var(--navy); line-height: 1.25; margin-bottom: 16px; }
.faq-intro p { font-size: 15px; color: var(--g400); line-height: 1.82; margin-bottom: 28px; font-weight: 300; }
.faq-cta-small { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--navy); padding: 10px 20px; border: 2px solid var(--navy); border-radius: 7px; cursor: pointer; transition: all .22s; background: transparent; }
.faq-cta-small:hover { background: var(--navy); color: var(--white); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
/* ── FAQ — Origin UI style with KEC brand ── */
.faq-wrap { background: rgba(255,255,255,.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; overflow: hidden; }
.faq-item { border-top: 1px solid rgba(255,255,255,.08); }
.faq-item:first-child { border-top: none; }
.faq-q { width: 100%; padding: 18px 22px; background: transparent; border: none; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--white); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--fs); line-height: 1.4; transition: background .2s; }
.faq-q:hover { background: rgba(255,255,255,.05); }
.faq-q:focus, .faq-q:focus-visible, .faq-q:active { background: transparent !important; outline: none !important; box-shadow: none !important; color: var(--white); }
.faq-light .faq-q:focus, .faq-light .faq-q:focus-visible, .faq-light .faq-q:active { background: transparent !important; outline: none !important; box-shadow: none !important; color: var(--navy); }

.faq-icon-wrap { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-icon-plus, .faq-icon-minus { position: absolute; inset: 0; transition: opacity .25s; color: rgba(255,255,255,.6); }
.faq-icon-plus { opacity: 1; }
.faq-icon-minus { opacity: 0; }
.faq-item.open .faq-icon-plus { opacity: 0; }
.faq-item.open .faq-icon-minus { opacity: 1; color: var(--gold); }
.faq-item.open .faq-q { color: var(--gold); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; }
.faq-item.open .faq-a { max-height: 600px; }
.faq-a p { padding: 0 22px 20px; font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.85; font-weight: 300; margin: 0; }

/* FAQ on light background (about, bangladesh pages) */
.faq-light .faq-wrap { background: var(--white); backdrop-filter: none; border-color: var(--g100); box-shadow: 0 4px 24px rgba(0,45,98,.06); }
.faq-light .faq-item { border-top-color: var(--g100); }
.faq-light .faq-q { color: var(--navy); }
.faq-light .faq-q:hover { background: var(--navy-l); }
.faq-light .faq-item.open .faq-q { color: var(--navy); }
.faq-light .faq-icon-plus, .faq-light .faq-icon-minus { color: var(--navy); }
.faq-light .faq-item.open .faq-icon-minus { color: var(--gold-d); }
.faq-light .faq-a p { color: var(--g400); }

/* ── CTA BANNER ── */
.cta-banner { background: var(--navy); padding: 80px 0; position: relative; overflow: hidden; text-align: center; }
.cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 120% at 50% 50%, rgba(10,58,122,.6) 0%, transparent 70%); }
.cta-banner-inner { position: relative; z-index: 1; }
.cta-banner h2 { font-family: var(--ff); font-size: clamp(26px,3.5vw,44px); color: var(--white); margin-bottom: 14px; line-height: 1.2; }
.cta-banner p { font-size: 15px; color: rgba(255,255,255,.65); max-width: 500px; margin: 0 auto 36px; line-height: 1.82; font-weight: 300; }
.cta-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.btn-white { background: var(--white); color: var(--navy); padding: 14px 28px; border-radius: 8px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: all .25s; }
.btn-white:hover { background: var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,.3); }

/* ── PAGE HERO (inner pages) ── */
.page-hero { background: var(--navy-d); padding: 80px 0 72px; position: relative; overflow: hidden; }
.dot-grid { position: absolute; inset: 0; pointer-events: none; opacity: .04; background-image: radial-gradient(rgba(255,255,255,.8) 1px, transparent 1px); background-size: 28px 28px; }
.page-hero-inner { max-width: 680px; position: relative; z-index: 1; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.breadcrumb a { font-size: 12px; color: rgba(255,255,255,.45); }
.breadcrumb span { font-size: 12px; color: rgba(255,255,255,.3); }
.breadcrumb a:hover { color: var(--gold); }
.page-hero h1 { font-family: var(--ff); font-size: clamp(28px,4vw,48px); color: var(--white); font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.page-hero p { font-size: 16px; color: rgba(255,255,255,.65); line-height: 1.82; font-weight: 300; max-width: 580px; }

/* ── FOOTER ── */
.kec-site-footer { background: var(--navy-d); border-top: 1px solid rgba(255,255,255,.06); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 2.5rem; padding-bottom: 3rem; align-items: start; }
/* Column headings and list items top-aligned and consistent */
.footer-col { display: flex; flex-direction: column; }
.footer-col h4 { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.footer-logo-wrap .logo-mark { font-size: 24px; }
.footer-logo-wrap .logo-sub { color: rgba(255,255,255,.3); margin-top: 4px; }
.footer-brand-p { font-size: 13px; color: rgba(255,255,255,.45); margin: 14px 0 20px; line-height: 1.8; max-width: 260px; font-weight: 300; }
.footer-soc { display: flex; gap: 8px; }
.footer-soc a { width: 34px; height: 34px; background: rgba(255,255,255,.06); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); transition: all .2s; border: 1px solid rgba(255,255,255,.06); }
.footer-soc a:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
/* footer-col h4 is defined above with the grid */
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,.52); transition: color .18s; }
.footer-col ul li a:hover { color: var(--gold); }
.footer-ci { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.footer-ci svg { width: 13px; height: 13px; color: var(--gold); margin-top: 2px; flex-shrink: 0; }
.footer-ci a, .footer-ci span { font-size: 13px; color: rgba(255,255,255,.52); line-height: 1.6; }
.footer-ci a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; }
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,.24); margin: 0; }
.footer-bl { display: flex; gap: 20px; }
.footer-bl a { font-size: 12px; color: rgba(255,255,255,.24); transition: color .18s; }
.footer-bl a:hover { color: var(--gold); }
.footer-credit { font-size: 11px; text-align: center; color: rgba(255,255,255,.25); margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.04); }
.footer-credit a { color: rgba(255,255,255,.4); text-decoration: none; transition: color .18s; }
.footer-credit a:hover { color: var(--white); }

/* WhatsApp FAB */
.wa-fab { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.45); cursor: pointer; transition: all .28s; opacity: 0; }
.wa-fab:hover { transform: scale(1.12); box-shadow: 0 8px 32px rgba(37,211,102,.55); }
.wa-fab svg { width: 28px; height: 28px; }

/* ── ABOUT PAGE SPECIFIC ── */
.story-section { background: var(--white); padding: 100px 0; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.story-content p { font-size: 15px; color: var(--g400); line-height: 1.85; margin-bottom: 18px; font-weight: 300; }
.story-aside {}
.story-quote-block { background: var(--navy-d); border-radius: 20px; padding: 32px; margin-bottom: 24px; }
.story-quote-block blockquote { font-family: var(--ff); font-size: 18px; font-style: italic; color: var(--white); line-height: 1.5; margin-bottom: 12px; border-left: 3px solid var(--gold); padding-left: 18px; }
.story-quote-block cite { font-size: 12px; color: rgba(255,255,255,.45); font-style: normal; }
.stats-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-mini-card { background: var(--off); border: 1px solid var(--g100); border-radius: 14px; padding: 20px; text-align: center; }
.stat-mini-num { font-family: var(--ff); font-size: 32px; font-weight: 800; color: var(--navy); line-height: 1; margin-bottom: 4px; }
.stat-mini-num span { color: var(--gold); }
.stat-mini-label { font-size: 11px; color: var(--g400); text-transform: uppercase; letter-spacing: .08em; }
.creds-section { background: var(--off); padding: 100px 0; }
.creds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.founder-portrait { border-radius: 24px; overflow: hidden; aspect-ratio: 3/4; box-shadow: 0 24px 64px rgba(0,45,98,.18); }
.founder-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.founder-portrait-placeholder { width: 100%; height: 100%; background: linear-gradient(160deg, var(--navy-l), #BDD0EF); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--navy-m); }
.founder-portrait-placeholder svg { width: 80px; height: 80px; opacity: .3; }
.cred-list { display: flex; flex-direction: column; gap: 18px; }
.cred-item { display: flex; gap: 14px; align-items: flex-start; }
.cred-icon { flex-shrink: 0; margin-top: 2px; }
.cred-text h4 { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.cred-text p { font-size: 13px; color: var(--g400); line-height: 1.6; font-weight: 300; }
.process-section { padding: 100px 0; }
.process-steps { display: flex; flex-direction: column; gap: 0; margin-top: 48px; }
.process-step-item { display: flex; gap: 24px; align-items: flex-start; padding: 28px 0; border-bottom: 1px solid var(--g100); }
.process-step-item:last-child { border-bottom: none; }
.process-num-circle { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: var(--ff); font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.process-content h4 { font-family: var(--ff); font-size: 17px; color: var(--navy); margin-bottom: 8px; }
.process-content p { font-size: 14px; color: var(--g400); line-height: 1.75; font-weight: 300; }
.behindwoods-section { background: var(--navy-d); padding: 100px 0; }
.bw-embed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.bw-video-wrap { border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; }
.bw-video-wrap iframe { width: 100%; height: 100%; border: none; }
.bw-copy .sec-h { color: var(--white); }
.bw-copy p { color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.8; font-weight: 300; }

/* ── COUNTRY PAGE SPECIFIC ── */
.country-intro { background: var(--white); padding: 100px 0; }
.country-intro-grid { display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: start; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.why-card { background: var(--off); border: 1px solid var(--g100); border-radius: 16px; padding: 24px; transition: all .3s; }
.why-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,45,98,.08); }
.why-icon { font-size: 24px; margin-bottom: 10px; }
.why-card h4 { font-family: var(--ff); font-size: 15px; color: var(--navy); margin-bottom: 8px; line-height: 1.35; }
.why-card p { font-size: 13px; color: var(--g400); line-height: 1.7; font-weight: 300; }
.country-sidebar { background: var(--navy-d); border-radius: 20px; padding: 32px; position: sticky; top: 100px; }
.country-sidebar h3 { font-family: var(--ff); font-size: 20px; color: var(--white); margin-bottom: 24px; }
.sidebar-stat { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-stat:last-of-type { border-bottom: none; margin-bottom: 20px; }
.sidebar-stat-label { font-size: 12px; color: rgba(255,255,255,.45); }
.sidebar-stat-value { font-size: 13px; color: var(--white); font-weight: 600; text-align: right; }
.sidebar-cta { display: block; text-align: center; background: var(--gold); color: var(--navy); padding: 13px; border-radius: 9px; font-size: 14px; font-weight: 700; transition: background .22s; margin-top: 20px; }
.sidebar-cta:hover { background: var(--gold-d); }
.fee-section { background: var(--off); padding: 80px 0; }
.fee-table-wrap { overflow-x: auto; margin-top: 36px; }
.fee-table { width: 100%; border-collapse: collapse; }
.fee-table th { background: var(--navy); color: var(--white); padding: 14px 20px; text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.fee-table th:first-child { border-radius: 10px 0 0 0; }
.fee-table th:last-child { border-radius: 0 10px 0 0; }
.fee-table td { padding: 14px 20px; font-size: 13.5px; border-bottom: 1px solid var(--g100); color: var(--g700); }
.fee-table tr:last-child td { font-weight: 700; color: var(--navy); background: var(--gold-l); }
.alert-box { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; background: #FFF8E1; border: 1px solid #E6C229; border-left: 4px solid var(--gold); border-radius: 12px; margin-top: 24px; }
.alert-box-icon { font-size: 18px; flex-shrink: 0; }
.alert-box p { font-size: 13.5px; line-height: 1.7; color: var(--g700); }
.uni-section { background: var(--white); padding: 80px 0; }
.uni-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
.uni-card { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--off); border: 1px solid var(--g100); border-radius: 12px; transition: all .22s; }
.uni-card:hover { border-color: var(--gold); background: var(--white); }
.uni-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.uni-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.uni-city { font-size: 11.5px; color: var(--g400); margin-top: 2px; }
.elig-life-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 80px 0; align-items: start; }
.check-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; }
.check-dot { width: 22px; height: 22px; min-width: 22px; background: var(--gold); color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.check-item span { font-size: 14px; color: var(--g700); line-height: 1.6; padding-top: 2px; }
.life-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.life-card { background: var(--off); border: 1px solid var(--g100); border-radius: 14px; padding: 20px; }
.life-icon { font-size: 22px; margin-bottom: 8px; }
.life-card h5 { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.life-card p { font-size: 12.5px; color: var(--g400); line-height: 1.65; font-weight: 300; }

/* ── GALLERY PAGE SPECIFIC ── */
.gallery-section { padding: 80px 0; background: var(--white); }
.bw-featured-block { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; background: var(--navy-d); border-radius: 20px; overflow: hidden; padding: 0; margin-bottom: 64px; }
.bw-vid { aspect-ratio: 16/9; overflow: hidden; }
.bw-vid iframe { width: 100%; height: 100%; border: none; }
.bw-text { padding: 40px; }
.bw-pill { display: inline-block; background: rgba(201,162,39,.15); border: 1px solid rgba(201,162,39,.3); color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .1em; padding: 6px 14px; border-radius: 20px; margin-bottom: 16px; }
.bw-text h3 { font-family: var(--ff); font-size: 22px; color: var(--white); margin-bottom: 12px; line-height: 1.35; }
.bw-text p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.8; font-weight: 300; }
.vid-full-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.vid-full-card { background: var(--navy-d); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; transition: all .3s; display: flex; flex-direction: column; }
.vid-full-card:hover { border-color: rgba(201,162,39,.3); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.25); }
/* Fixed 16:9 ratio box so all thumbnails are identical height */
.vid-full-thumb { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; background: rgba(10,30,62,.8); flex-shrink: 0; }
.vid-full-thumb iframe { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border: none !important; }
.vid-full-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.vid-poster { position: absolute; inset: 0; cursor: pointer; }
.vid-poster img { display: block; }
.vid-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.2); transition: background .2s; }
.vid-play-btn svg { width: 52px; height: 52px; background: rgba(201,162,39,.92); border-radius: 50%; padding: 14px; transition: transform .2s, background .2s; }
.vid-poster:hover .vid-play-btn { background: rgba(0,0,0,.35); }
.vid-poster:hover .vid-play-btn svg { transform: scale(1.1); background: #C9A227; }
.vid-full-info { padding: 16px 18px; flex: 1; }
.vid-full-info h4 { font-size: 14px; color: var(--white); font-weight: 600; margin-bottom: 4px; }
.vid-full-info p { font-size: 12px; color: rgba(255,255,255,.45); margin: 0; }

/* ── CONTACT PAGE SPECIFIC ── */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; padding: 80px 0; }
.contact-info-item { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; background: var(--off); border: 1px solid var(--g100); border-radius: 14px; margin-bottom: 12px; transition: all .22s; }
.contact-info-item:hover { border-color: var(--gold); }
.contact-info-icon { font-size: 22px; flex-shrink: 0; }
.contact-info-text h4 { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.contact-info-text a, .contact-info-text span { font-size: 14px; color: var(--g700); }
.contact-info-text a:hover { color: var(--navy); text-decoration: underline; }
.contact-social { display: flex; gap: 10px; margin: 24px 0; }
.contact-social a { width: 40px; height: 40px; background: var(--navy); color: var(--white); border-radius: 9px; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.contact-social a:hover { background: var(--gold); color: var(--navy); }
.map-placeholder { background: var(--g100); border-radius: 14px; height: 220px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--g400); margin-top: 16px; text-align: center; padding: 20px; }
.contact-form-card { background: var(--white); border-radius: 24px; padding: 36px; box-shadow: 0 16px 64px rgba(0,45,98,.1); border: 1px solid var(--g100); }
.contact-form-card h3 { font-family: var(--ff); font-size: 22px; color: var(--navy); margin-bottom: 24px; }

/* ── SCHEDULE PAGE SPECIFIC ── */
.schedule-layout { display: grid; grid-template-columns: 1fr 400px; gap: 64px; align-items: start; padding: 80px 0; }
.schedule-form-card { background: var(--white); border-radius: 24px; padding: 40px; box-shadow: 0 16px 64px rgba(0,45,98,.1); border: 1px solid var(--g100); position: relative; overflow: hidden; }
.schedule-form-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--navy), var(--gold), var(--sand)); }
.step-bar { display: flex; align-items: center; margin-bottom: 36px; }
.step-item { display: flex; align-items: center; gap: 8px; }
.step-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--g100); color: var(--g400); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: all .3s; flex-shrink: 0; }
.step-item.active .step-circle { background: var(--navy); color: var(--white); }
.step-item.done .step-circle { background: var(--gold); color: var(--navy); }
.step-label-text { font-size: 12px; font-weight: 600; color: var(--g400); }
.step-item.active .step-label-text { color: var(--navy); }
.step-connector { flex: 1; height: 2px; background: var(--g100); margin: 0 12px; }
.schedule-form-card h3 { font-family: var(--ff); font-size: 20px; color: var(--navy); margin-bottom: 24px; }
.trust-panel { background: var(--off); border: 1px solid var(--g100); border-radius: 20px; padding: 32px; margin-bottom: 24px; }
.trust-panel h3 { font-family: var(--ff); font-size: 20px; color: var(--navy); margin-bottom: 20px; }
.trust-pt { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.trust-pt-check { width: 22px; height: 22px; min-width: 22px; background: var(--navy); color: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.trust-pt p { font-size: 13.5px; color: var(--g700); line-height: 1.65; font-weight: 300; }
.dr-quote-mini { background: var(--navy); border-radius: 14px; padding: 20px 22px; margin-top: 20px; }
.dr-quote-mini p { font-family: var(--ff); font-size: 14px; font-style: italic; color: var(--white); line-height: 1.55; margin-bottom: 8px; }
.dr-quote-mini cite { font-size: 11px; color: rgba(255,255,255,.45); font-style: normal; }
.direct-contact { background: var(--white); border: 1px solid var(--g100); border-radius: 20px; padding: 28px; }
.direct-contact p { font-size: 13px; color: var(--g400); margin-bottom: 14px; }
.direct-btns { display: flex; flex-direction: column; gap: 10px; }
.direct-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: all .22s; }
.direct-btn-call { background: var(--navy); color: var(--white); }
.direct-btn-call:hover { background: var(--navy-d); }
.direct-btn-wa { background: #25D366; color: var(--white); }
.direct-btn-wa:hover { background: #1da851; }

/* ── BLOG PAGE SPECIFIC ── */
.blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; padding: 80px 0; align-items: start; }
.blog-featured-card { background: var(--white); border: 1px solid var(--g100); border-radius: 20px; overflow: hidden; margin-bottom: 32px; transition: all .3s; }
.blog-featured-card:hover { box-shadow: 0 16px 48px rgba(0,45,98,.1); border-color: rgba(201,162,39,.2); }
.blog-featured-img { aspect-ratio: 16/6; background: linear-gradient(135deg, var(--navy-l), #BDD0EF); display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 14px; }
.blog-featured-content { padding: 32px; }
.blog-cat { display: inline-block; background: var(--navy-l); color: var(--navy); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; margin-bottom: 12px; }
.blog-featured-content h2 { font-family: var(--ff); font-size: clamp(20px,2.5vw,28px); color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.blog-featured-content p { font-size: 14px; color: var(--g400); line-height: 1.75; font-weight: 300; margin-bottom: 12px; }
.blog-meta { font-size: 12px; color: var(--g400); }
.blog-grid-small { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.blog-card-small { background: var(--white); border: 1px solid var(--g100); border-radius: 16px; overflow: hidden; transition: all .3s; }
.blog-card-small:hover { border-color: rgba(201,162,39,.2); box-shadow: 0 8px 28px rgba(0,45,98,.07); transform: translateY(-3px); }
.blog-card-img { aspect-ratio: 16/8; background: linear-gradient(135deg, var(--navy-l), #C5D5EC); display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 12px; }
.blog-card-content { padding: 20px; }
.blog-card-content h4 { font-family: var(--ff); font-size: 15px; color: var(--navy); margin-bottom: 8px; line-height: 1.35; }
.blog-card-content p { font-size: 12.5px; color: var(--g400); line-height: 1.65; font-weight: 300; }
.blog-sidebar { position: sticky; top: 100px; }
.sidebar-box { background: var(--off); border: 1px solid var(--g100); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.sidebar-box h4 { font-family: var(--ff); font-size: 17px; color: var(--navy); margin-bottom: 12px; }
.newsletter-form-small { display: flex; flex-direction: column; gap: 8px; }
.newsletter-form-small input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--g100); border-radius: 8px; font-size: 13px; font-family: var(--fs); background: var(--white); }
.newsletter-form-small input:focus { outline: none; border-color: var(--navy); }
.newsletter-form-small button { width: 100%; padding: 10px; background: var(--navy); color: var(--white); border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--fs); transition: background .2s; }
.newsletter-form-small button:hover { background: var(--gold); color: var(--navy); }
.topics-list { display: flex; flex-direction: column; gap: 4px; }
.topic-link { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--g700); cursor: pointer; transition: all .18s; }
.topic-link:hover { background: var(--navy-l); color: var(--navy); }
.topic-count { font-size: 11px; background: var(--g100); color: var(--g400); padding: 2px 7px; border-radius: 10px; }


/* ── HERO VIDEO PLACEHOLDER ── */
.hero-video-placeholder { position: relative; width: 100%; padding-top: 56.25%; background: linear-gradient(135deg, var(--navy-d) 0%, var(--navy-m) 100%); overflow: hidden; }
.hero-video-placeholder-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.hvp-icon { font-size: 48px; opacity: .5; }
.hvp-text { font-family: var(--ff); font-size: 18px; color: rgba(255,255,255,.6); font-weight: 600; }
.hvp-sub { font-size: 12px; color: rgba(255,255,255,.35); text-align: center; padding: 0 20px; }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px} .hero-card{max-width:600px;margin:0 auto;width:100%}
  .svc-grid-new{grid-template-columns:repeat(2,1fr)}
  .founder-grid{grid-template-columns:1fr}
  .f-photo-side{max-width:360px;margin:0 auto}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .faq-layout{grid-template-columns:1fr}
  .faq-intro{position:static}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .bw-feature{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr}
  .creds-grid{grid-template-columns:1fr}
  .country-intro-grid{grid-template-columns:1fr}
  .country-sidebar{position:static}
  .bw-embed-grid{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr}
  .schedule-layout{grid-template-columns:1fr}
  .blog-layout{grid-template-columns:1fr}
  .blog-sidebar{position:static}
  .bw-featured-block{grid-template-columns:1fr}
  .vid-full-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .hamburger{display:flex}
  .navlinks{display:none !important}
  .nav-divider{display:none}
  .btn-nav{display:none}
  .nav-dropdown{display:none !important}
  .nav-dd-menu{display:none !important}
  .hero-card{display:block !important;opacity:1;max-width:100%;width:100%;margin-top:32px}
  .hero{padding:60px 0 40px;min-height:auto}
  /* Fix text overflow on mobile */
  .w{padding:0 16px}
  .hero-inner{padding:0}
  .hero h1{font-size:clamp(26px,7vw,38px);word-break:break-word;overflow-wrap:break-word}
  .hero-sub{font-size:15px}
  .hero-btns{flex-direction:column;gap:10px}
  .hero-btns .btn-primary, .hero-btns .btn-secondary{width:100%;justify-content:center;text-align:center}
  .topbar-i{flex-direction:column;gap:6px;align-items:flex-start}
  .topbar a{font-size:11px}
  .tsoc{margin-top:2px}
  .navlinks.open{display:flex !important;flex-direction:column;align-items:flex-start;width:100%;background:rgba(0,21,53,.98);padding:8px 0 16px;gap:2px;border-top:1px solid rgba(255,255,255,.08)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid-new{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
  .trust-item{padding:14px 20px}
  .hero-pills{display:none}
  .bw-feature{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .uni-grid{grid-template-columns:1fr 1fr}
  .elig-life-grid{grid-template-columns:1fr}
  .life-grid{grid-template-columns:1fr 1fr}
  .blog-grid-small{grid-template-columns:1fr}
  .vid-full-grid{grid-template-columns:1fr}
  .stats-mini{grid-template-columns:1fr 1fr}
  .schedule-layout{grid-template-columns:1fr;gap:32px;padding:40px 0}
  .contact-layout{grid-template-columns:1fr}
  .founder-grid{grid-template-columns:1fr}
  .post-layout{grid-template-columns:1fr}
  .post-content-area{padding:28px 20px}
  .f-photo-side{padding-bottom:0}
  .blog-layout{grid-template-columns:1fr}
  .country-intro-grid{grid-template-columns:1fr}
  .fee-table-wrap{overflow-x:auto}
  .bw-embed-grid{grid-template-columns:1fr}
  .creds-grid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr;gap:40px}
  * { max-width: 100%; box-sizing: border-box; }
  /* Page hero fix */
  .page-hero { padding: 60px 0 48px; }
  .page-hero h1 { font-size: clamp(24px,6vw,36px); word-break: break-word; }
  /* Schedule / Contact form cards */
  .schedule-form-card { padding: 24px 20px; border-radius: 16px; }
  .contact-form-card { padding: 24px 20px; border-radius: 16px; }
  /* Step bar - shrink labels on mobile */
  .step-label-text { font-size: 10px; }
  .step-circle { width: 28px; height: 28px; font-size: 12px; }
  .step-connector { margin: 0 6px; }
  /* Wrapper centering fix */
  .schedule-layout > div:first-child { width: 100%; }
  .schedule-form-card { width: 100%; box-sizing: border-box; }
}

/* ═══════════════════════════════════════════════════════
   BLOG POST (single.php)
   ═══════════════════════════════════════════════════════ */

/* ── POST HERO ── */
.post-hero { background: var(--navy-d); padding: 64px 0 56px; position: relative; overflow: hidden; }
.post-hero-inner { max-width: 760px; position: relative; z-index: 1; }
.post-cat-pill { display: inline-block; background: rgba(201,162,39,.15); border: 1px solid rgba(201,162,39,.3); color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; margin-bottom: 16px; }
.post-hero-title { font-family: var(--ff); font-size: clamp(26px,3.5vw,44px); font-weight: 800; color: var(--white); line-height: 1.2; margin-bottom: 20px; }
.post-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.post-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.5); }
.post-meta-item svg { color: var(--gold); flex-shrink: 0; }
.post-meta-sep { color: rgba(255,255,255,.2); font-size: 16px; }

/* ── FEATURED IMAGE ── */
.post-featured-img-wrap { background: var(--navy-d); padding-bottom: 0; }
.post-featured-img { border-radius: 0 0 20px 20px; overflow: hidden; max-height: 480px; }
.post-featured-img .post-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── POST LAYOUT ── */
.post-body-wrap { padding: 56px 0 80px; background: var(--off); }
.post-layout { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }

/* ── POST CONTENT ── */
.post-content-area { background: var(--white); border-radius: 20px; padding: 48px; border: 1px solid var(--g100); }
.post-content { font-size: 16px; line-height: 1.9; color: var(--g700); font-weight: 300; }
.post-content h2 { font-family: var(--ff); font-size: clamp(22px,2.5vw,30px); color: var(--navy); margin: 40px 0 16px; font-weight: 700; line-height: 1.25; }
.post-content h3 { font-family: var(--ff); font-size: clamp(18px,2vw,24px); color: var(--navy); margin: 32px 0 12px; font-weight: 600; }
.post-content h4 { font-size: 16px; font-weight: 700; color: var(--navy); margin: 24px 0 10px; }
.post-content p { margin-bottom: 20px; }
.post-content p:last-child { margin-bottom: 0; }
.post-content ul, .post-content ol { margin: 0 0 20px 24px; }
.post-content li { margin-bottom: 8px; line-height: 1.75; }
.post-content ul li::marker { color: var(--gold); }
.post-content ol li::marker { color: var(--navy); font-weight: 700; }
.post-content strong { font-weight: 700; color: var(--navy); }
.post-content em { font-style: italic; }
.post-content a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; transition: color .2s; }
.post-content a:hover { color: var(--gold-d); }
.post-content blockquote { border-left: 4px solid var(--gold); padding: 16px 24px; margin: 28px 0; background: var(--gold-l); border-radius: 0 12px 12px 0; }
.post-content blockquote p { font-family: var(--ff); font-size: 18px; font-style: italic; color: var(--navy); margin: 0; line-height: 1.6; }
.post-content img { max-width: 100%; border-radius: 12px; margin: 24px 0; box-shadow: 0 8px 32px rgba(0,45,98,.1); }
.post-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.post-content table th { background: var(--navy); color: var(--white); padding: 12px 16px; text-align: left; font-weight: 600; }
.post-content table td { padding: 12px 16px; border-bottom: 1px solid var(--g100); }
.post-content table tr:last-child td { font-weight: 700; color: var(--navy); background: var(--gold-l); }
/* Highlighted info boxes — use [info] shortcode or add class="kec-infobox" to p */
.post-content .kec-infobox,
.post-content .wp-block-callout { background: var(--navy-l); border-left: 4px solid var(--navy); padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 24px 0; font-size: 14.5px; }

/* ── POST TAGS ── */
.post-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--g100); }
.post-tags-label { font-size: 12px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .08em; }
.post-tag { background: var(--navy-l); color: var(--navy); font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 20px; transition: all .2s; text-decoration: none; }
.post-tag:hover { background: var(--navy); color: var(--white); }

/* ── SHARE ROW ── */
.post-share-row { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--g100); flex-wrap: wrap; }
.post-share-label { font-size: 13px; font-weight: 600; color: var(--navy); }
.post-share-btns { display: flex; gap: 10px; }
.post-share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all .22s; }
.post-share-wa { background: #25D366; color: var(--white); }
.post-share-wa:hover { background: #1da851; color: var(--white); }
.post-share-fb { background: #1877F2; color: var(--white); }
.post-share-fb:hover { background: #0d65d8; color: var(--white); }

/* ── AUTHOR CARD ── */
.post-author-card { display: flex; align-items: flex-start; gap: 16px; margin-top: 36px; padding: 24px; background: var(--off); border-radius: 16px; border: 1px solid var(--g100); }
.post-author-avatar { width: 56px; height: 56px; min-width: 56px; border-radius: 50%; background: var(--navy-l); display: flex; align-items: center; justify-content: center; color: var(--navy); }
.post-author-name { font-family: var(--ff); font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.post-author-bio { font-size: 13px; color: var(--g400); line-height: 1.65; font-weight: 300; }

/* ── POST NAVIGATION ── */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.post-nav-item { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--white); border: 1.5px solid var(--g100); border-radius: 14px; text-decoration: none; transition: all .22s; }
.post-nav-item:hover { border-color: var(--gold); box-shadow: 0 4px 20px rgba(0,45,98,.08); }
.post-nav-next { text-align: right; }
.post-nav-dir { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-d); }
.post-nav-next .post-nav-dir { justify-content: flex-end; }
.post-nav-title { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.4; }

/* ── SIDEBAR ── */
.post-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }

/* CTA Box */
.post-sidebar-cta { background: var(--navy); border-radius: 20px; padding: 28px; text-align: center; }
.post-sidebar-cta-icon { font-size: 32px; margin-bottom: 12px; }
.post-sidebar-cta h3 { font-family: var(--ff); font-size: 20px; color: var(--white); margin-bottom: 10px; }
.post-sidebar-cta p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.65; margin-bottom: 20px; font-weight: 300; }
.post-sidebar-cta-btn { display: block; background: var(--gold); color: var(--navy); padding: 12px 20px; border-radius: 9px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .22s; margin-bottom: 10px; }
.post-sidebar-cta-btn:hover { background: var(--gold-d); color: var(--navy); }
.post-sidebar-wa-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: #25D366; color: var(--white); padding: 11px 20px; border-radius: 9px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .22s; }
.post-sidebar-wa-btn:hover { background: #1da851; color: var(--white); }

/* Stats strip */
.post-sidebar-stats { background: var(--off); border: 1px solid var(--g100); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.post-sidebar-stat { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--g100); }
.post-sidebar-stat:last-child { padding-bottom: 0; border-bottom: none; }
.pss-num { font-family: var(--ff); font-size: 22px; font-weight: 800; color: var(--navy); }
.pss-label { font-size: 12px; color: var(--g400); text-align: right; }

/* Related posts */
.post-sidebar-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--navy); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--g100); }
.post-sidebar-related { background: var(--white); border: 1px solid var(--g100); border-radius: 16px; padding: 20px; }
.post-related-item { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--g100); transition: all .2s; }
.post-related-item:last-child { border-bottom: none; padding-bottom: 0; }
.post-related-item:first-of-type { padding-top: 0; }
.post-related-item:hover .post-related-title { color: var(--gold-d); }
.post-related-img { width: 60px; height: 48px; min-width: 60px; border-radius: 8px; overflow: hidden; }
.post-related-img img { width: 100%; height: 100%; object-fit: cover; }
.post-related-img-placeholder { background: var(--navy-l); }
.post-related-title { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.4; margin-bottom: 4px; }
.post-related-date { font-size: 11px; color: var(--g400); }

/* Topics */
.post-sidebar-topics { background: var(--white); border: 1px solid var(--g100); border-radius: 16px; padding: 20px; }
.post-topics-list { display: flex; flex-direction: column; gap: 2px; }
.post-topic-link { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--g700); text-decoration: none; transition: all .18s; }
.post-topic-link:hover { background: var(--navy-l); color: var(--navy); }
.post-topic-count { font-size: 11px; background: var(--g100); color: var(--g400); padding: 2px 8px; border-radius: 10px; }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; }
}
@media(max-width:768px) {
  .post-content-area { padding: 28px 20px; }
  .post-nav { grid-template-columns: 1fr; }
  .post-hero-title { font-size: 26px; }
  .post-share-row { flex-direction: column; align-items: flex-start; }
}