/* ===================================================================
   EXAMPAY — Design System
   Brand palette derived from the supplied Exampay identity.
   =================================================================== */

:root{
  /* ---- Palette sampled from the supplied logo ---- */
  --paper:        #FCFCFE;
  --paper-alt:    #F4F4FB;
  --primary:      #4B52A0;   /* Exampay indigo */
  --primary-dark: #23232D;   /* logo charcoal */
  --primary-light:#E8E9F4;
  --accent:       #CB9B39;   /* Exampay gold */
  --accent-dark:  #9A7225;
  --accent-light: #F8F1E3;
  --secondary:    #4B52A0;
  --secondary-light:#EEEFF7;
  --ink:          #23232D;
  --ink-soft:     #50505D;
  --ink-faint:    #777784;
  --line:         #DEDFF0;
  --white:        #FFFFFF;
  --success:      #4B52A0;
  --danger:       #23232D;

  /* ---- Type ---- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Scale ---- */
  --container: 1180px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(35,35,45,0.08);
  --shadow-md: 0 8px 24px rgba(35,35,45,0.10);
  --shadow-lg: 0 20px 48px rgba(75,82,160,0.18);
  --header-h: 88px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0 0 .5em; color:var(--ink); }
p{ margin:0 0 1em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
section{ padding:88px 0; }
@media (max-width:800px){ section{ padding:56px 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:0;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary); margin-bottom:14px;
}
.eyebrow::before{ content:none; display:none; }

.section-head{ max-width:720px; margin:0 0 44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); }
.section-head p{ color:var(--ink-soft); font-size:17px; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--radius-pill); font-weight:700; font-size:15px;
  border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--primary-dark); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--accent-dark); box-shadow:var(--shadow-md); color:var(--white); }
.btn-outline{ background:transparent; border-color:currentColor; color:var(--primary); }
.btn-outline:hover{ background:var(--primary); color:var(--white); border-color:var(--primary); }
.btn-ghost{ background:var(--white); color:var(--primary); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--primary); }
.btn-light{ background:rgba(255,255,255,.16); color:var(--white); border-color:rgba(255,255,255,.5); }
.btn-light:hover{ background:var(--white); color:var(--primary-dark); }
.btn-sm{ padding:9px 18px; font-size:13.5px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header{
  position:sticky; top:0; z-index:1000; height:var(--header-h);
  background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(75,82,160,.10);
  box-shadow:0 5px 24px rgba(35,35,45,.06);
  transition:box-shadow .2s ease, background .2s ease;
}
.site-header::before{
  content:''; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--primary) 0 72%,var(--accent) 72% 100%);
}
.site-header.is-scrolled{ background:rgba(255,255,255,.985); box-shadow:0 10px 32px rgba(35,35,45,.12); }
.header-inner{ max-width:1480px; margin:0 auto; padding:3px 32px 0; height:100%; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand{ display:flex; align-items:center; flex-shrink:0; padding:5px 0; }
.brand-logo{ width:202px; height:auto; border-radius:7px; transition:transform .2s ease; }
.brand:hover .brand-logo{ transform:translateY(-1px); }

.main-nav{ display:flex; align-items:center; justify-content:center; gap:2px; flex:1; }
.nav-item{ position:relative; }
.nav-link{ position:relative; display:flex; align-items:center; gap:6px; padding:11px 10px; border-radius:12px; font-weight:700; font-size:14px; line-height:1; white-space:nowrap; color:var(--ink); transition:background .18s ease,color .18s ease,transform .18s ease; }
.nav-link::after{ content:''; position:absolute; left:50%; bottom:4px; width:0; height:2px; border-radius:2px; background:var(--accent); transform:translateX(-50%); transition:width .18s ease; }
.nav-link:hover, .nav-item.open .nav-link, .nav-link.current{ background:var(--primary-light); color:var(--primary); transform:translateY(-1px); }
.nav-link:hover::after, .nav-item.open .nav-link::after, .nav-link.current::after{ width:24px; }
.nav-link .chev{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .15s ease; opacity:.7; }
.nav-item.open .nav-link .chev{ transform:rotate(-135deg); margin-top:2px; }

.dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:292px; background:rgba(255,255,255,.99); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius-md);
  box-shadow:0 22px 50px rgba(35,35,45,.16); padding:10px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .16s ease; z-index:50;
}
.nav-item.open .dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.dropdown a{ display:block; padding:12px 14px; border-radius:var(--radius-sm); font-size:14px; font-weight:700; color:var(--ink); transition:background .15s ease,color .15s ease,transform .15s ease; }
.dropdown a small{ display:block; font-weight:400; color:var(--ink-soft); font-size:12.5px; margin-top:2px; }
.dropdown a:hover{ background:var(--primary-light); color:var(--primary); transform:translateX(2px); }

.header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.signin-wrap{ position:relative; }
.signin-btn{ display:flex; align-items:center; gap:7px; padding:11px 17px; border-radius:var(--radius-pill); font-weight:700; font-size:14px; color:var(--primary-dark); border:1px solid var(--line); background:var(--white); box-shadow:0 4px 12px rgba(35,35,45,.05); transition:border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease; }
.signin-btn:hover{ border-color:rgba(75,82,160,.45); color:var(--primary); box-shadow:0 7px 18px rgba(75,82,160,.12); transform:translateY(-1px); }
.signin-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:210px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease; z-index:50;
}
.signin-wrap.open .signin-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.signin-menu a{ display:block; padding:11px 12px; border-radius:var(--radius-sm); font-size:14px; font-weight:700; transition:background .15s ease,color .15s ease,transform .15s ease; }
.signin-menu a:hover{ background:var(--primary-light); color:var(--primary); transform:translateX(2px); }
.header-actions > .btn-primary{ padding:11px 20px; border-color:rgba(154,114,37,.22); box-shadow:0 8px 18px rgba(203,155,57,.24); }
.header-actions > .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 11px 24px rgba(154,114,37,.28); }

.hamburger{ display:none; width:44px; height:44px; border-radius:13px; border:1px solid var(--line); background:var(--white); box-shadow:0 5px 14px rgba(35,35,45,.06); align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.hamburger span{ width:19px; height:2px; background:var(--primary); border-radius:2px; }

@media (max-width:1400px){
  .main-nav{ display:none; }
  .header-actions .btn-outline{ display:none; }
  .hamburger{ display:flex; }
}
@media (max-width:720px){
  :root{ --header-h:76px; }
  .header-inner{ padding:3px 20px 0; }
  .header-actions > .btn-primary{ display:none; }
  .brand-logo{ width:158px; }
}
@media (max-width:440px){
  .signin-wrap{ display:none; }
  .header-inner{ padding:3px 16px 0; }
}

/* Mobile nav drawer */
.mobile-nav{ position:fixed; inset:0; z-index:1100; display:none; }
.mobile-nav.open{ display:block; }
.mobile-nav .backdrop{ position:absolute; inset:0; background:rgba(35,35,45,.48); }
.mobile-nav .panel{ position:absolute; top:0; right:0; height:100%; width:min(380px,92vw); background:linear-gradient(180deg,var(--white),var(--paper-alt)); border-left:3px solid var(--accent); box-shadow:-18px 0 52px rgba(35,35,45,.22); padding:25px; overflow-y:auto; }
.mobile-nav .panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.mobile-nav .panel-head .brand-logo{ width:170px; }
.mobile-nav .close-btn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--white); color:var(--primary); font-size:18px; box-shadow:0 4px 12px rgba(35,35,45,.06); }
.mnav-group{ margin-bottom:4px; border-bottom:1px solid var(--line); }
.mnav-top{ display:flex; align-items:center; justify-content:space-between; padding:14px 6px; font-weight:700; font-size:15px; color:var(--primary-dark); }
.mnav-sub{ display:none; padding:0 4px 12px 12px; }
.mnav-group.open .mnav-sub{ display:block; }
.mnav-sub a{ display:block; padding:8px 0; color:var(--ink-soft); font-weight:600; font-size:14px; }
.mnav-top .chev{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .15s; }
.mnav-group.open .mnav-top .chev{ transform:rotate(-135deg); }
.mnav-cta{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }

/* ===================================================================
   HERO / GENERIC PAGE HEADER
   =================================================================== */
.hero{
  background:linear-gradient(145deg,#565EAD 0%, #434B96 100%);
  color:var(--white); padding:100px 0 110px; position:relative; overflow:hidden;
}
.hero::after{
  content:''; position:absolute; right:-120px; top:-160px; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(203,155,57,.38), transparent 68%);
}
.hero .container{ position:relative; z-index:1; }
.hero-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);gap:64px;align-items:center}
.hero-copy{min-width:0}
.hero h1{ color:var(--white); font-size:clamp(34px,4.2vw,56px); max-width:720px; }
.hero p.lead{ font-size:19px; max-width:640px; color:rgba(255,255,255,.88); margin-bottom:34px; }
.hero .btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

.page-hero{ background:var(--primary-light); padding:64px 0 56px; border-bottom:1px solid var(--line); }
.page-hero .eyebrow{ color:var(--primary); }
.page-hero h1{ font-size:clamp(28px,4vw,42px); max-width:760px; }
.page-hero p.lead{ font-size:17px; color:var(--ink-soft); max-width:640px; }
.breadcrumb{ font-size:13.5px; color:var(--ink-soft); margin-bottom:16px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--primary); }
.breadcrumb .sep{ opacity:.5; }

/* ===================================================================
   CARDS / CHIPS / GRIDS
   =================================================================== */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-sm); transition:box-shadow .18s ease, transform .18s ease; }
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:15px; margin-bottom:0; }
.card .icon{ width:52px; height:52px; border-radius:14px; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-size:22px; }

.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--radius-pill); background:var(--white); border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--primary-dark); }
.chip.solid{ background:var(--primary-light); border-color:transparent; }
.chip.accent{ background:var(--accent-light); color:var(--accent-dark); }
.chip-link{ transition:background .15s, border-color .15s; }
.chip-link:hover{ background:var(--primary); color:var(--white); border-color:var(--primary); }

/* ===================================================================
   CAROUSEL (Vision / Mission / Objectives)
   =================================================================== */
.carousel{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; min-height:340px; }
.carousel-track{ position:relative; min-height:340px; }
.carousel-slide{ position:absolute; inset:0; padding:52px 56px; opacity:0; visibility:hidden; transform:translateX(24px); transition:opacity .45s ease, transform .45s ease; display:flex; flex-direction:column; justify-content:center; }
.carousel-slide.active{ opacity:1; visibility:visible; transform:translateX(0); position:relative; }
.carousel-slide .tag{ font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.07em; font-size:12.5px; margin-bottom:12px; }
.carousel-slide h3{ font-size:26px; margin-bottom:14px; }
.carousel-slide p{ color:var(--ink-soft); font-size:16px; max-width:680px; }
.carousel-slide ul{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.carousel-slide ul li{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); font-size:15px; }
.carousel-slide ul li::before{ content:'✓'; color:var(--primary); font-weight:700; flex-shrink:0; }
.carousel-dots{ display:flex; justify-content:center; gap:9px; padding:0 0 26px; }
.carousel-dots button{ width:9px; height:9px; border-radius:50%; background:var(--line); border:none; padding:0; }
.carousel-dots button.active{ background:var(--primary); width:26px; border-radius:5px; }
@media (max-width:640px){ .carousel-slide{ padding:32px 26px; } }

/* ===================================================================
   TABS
   =================================================================== */
.tabs-nav{ display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:32px; }
.tab-btn{ padding:12px 20px; font-weight:700; font-size:14.5px; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; background:none; border-radius:0; }
.tab-btn.active{ color:var(--primary); border-color:var(--accent); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* Pill tabs (used for exam streams) */
.pill-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.pill-tab{ padding:11px 22px; border-radius:var(--radius-pill); font-weight:700; font-size:14.5px; background:var(--white); border:1px solid var(--line); color:var(--ink-soft); }
.pill-tab.active{ background:var(--primary); border-color:var(--primary); color:var(--white); }

/* ===================================================================
   TABLES
   =================================================================== */
.table-wrap{ overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--line); }
table.data-table{ width:100%; border-collapse:collapse; background:var(--white); font-size:15px; min-width:480px; }
table.data-table th{ background:var(--primary-light); color:var(--primary-dark); text-align:left; padding:14px 18px; font-size:13.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
table.data-table td{ padding:15px 18px; border-top:1px solid var(--line); color:var(--ink-soft); }
table.data-table tr:first-child td{ border-top:none; }
table.data-table td strong{ color:var(--ink); }

/* Compare table (with/without SIP) */
.compare-table{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--white); }
.compare-col{ padding:28px 30px; }
.compare-col.without{ background:var(--secondary-light); }
.compare-col.with{ background:var(--primary-light); }
.compare-col h4{ font-size:15px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:20px; }
.compare-col.without h4{ color:var(--secondary); }
.compare-col.with h4{ color:var(--primary); }
.compare-row{ display:flex; gap:10px; align-items:flex-start; padding:12px 0; border-top:1px dashed rgba(0,0,0,.08); font-size:14.5px; }
.compare-row:first-of-type{ border-top:none; }
.compare-col.without .compare-row::before{ content:'✕'; color:var(--secondary); font-weight:700; }
.compare-col.with .compare-row::before{ content:'✓'; color:var(--primary); font-weight:700; }
@media (max-width:720px){ .compare-table{ grid-template-columns:1fr; } }

/* ===================================================================
   FUNNEL CHART
   =================================================================== */
.funnel{ display:flex; flex-direction:column; gap:6px; max-width:640px; margin:0 auto; }
.funnel-row{ display:grid; grid-template-columns:1fr 140px; align-items:center; gap:16px; }
.funnel-bar-wrap{ background:var(--paper-alt); border-radius:var(--radius-sm); overflow:hidden; height:44px; position:relative; }
.funnel-bar{ height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); display:flex; align-items:center; padding-left:16px; color:var(--white); font-weight:700; font-size:13.5px; border-radius:var(--radius-sm); white-space:nowrap; transition:width 1s cubic-bezier(.2,.8,.2,1); }
.funnel-label{ font-size:13.5px; color:var(--ink-soft); font-weight:600; text-align:right; }
.funnel-label strong{ display:block; color:var(--ink); font-size:14.5px; }
.funnel-source{ font-size:12.5px; color:var(--ink-faint); margin-top:14px; font-style:italic; }

/* ===================================================================
   FLOW / STEPS (Plan of Action)
   =================================================================== */
.flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
@media (max-width:980px){ .flow{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .flow{ grid-template-columns:1fr; } }
.flow-step{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px 20px; position:relative; }
.flow-step .num{ width:34px; height:34px; border-radius:50%; background:var(--primary); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; margin-bottom:14px; }
.flow-step h4{ font-size:15.5px; margin-bottom:8px; }
.flow-step p{ font-size:13.5px; color:var(--ink-soft); margin-bottom:8px; }
.flow-step .outcome{ font-size:12px; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.03em; }

/* ===================================================================
   TIMELINE (vertical, About/journey pages)
   =================================================================== */
.mini-timeline{ display:flex; gap:14px; flex-wrap:wrap; }
.mini-timeline .stop{ flex:1; min-width:160px; background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px; }
.mini-timeline .stop .stage{ font-size:12px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; }
.mini-timeline .stop p{ font-size:13.5px; color:var(--ink-soft); margin:0; }

/* ===================================================================
   ATTAINMENT GAP DIAGRAM
   =================================================================== */
.gap-diagram{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; justify-content:center; }
.gap-node{ flex:1; min-width:160px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px 18px; text-align:center; box-shadow:var(--shadow-sm); }
.gap-node.highlight{ background:var(--primary); color:var(--white); border-color:var(--primary); }
.gap-node .icon{ font-size:26px; margin-bottom:10px; }
.gap-node h4{ font-size:14.5px; margin-bottom:6px; }
.gap-node p{ font-size:12.5px; color:var(--ink-soft); margin:0; }
.gap-node.highlight p{ color:rgba(255,255,255,.85); }
.gap-arrow{ align-self:center; font-size:22px; color:var(--accent); }
@media (max-width:760px){ .gap-diagram{ flex-direction:column; } .gap-arrow{ transform:rotate(90deg); } }

/* ===================================================================
   TESTIMONIALS / FACULTY / GALLERY (placeholder-safe)
   =================================================================== */
.avatar-badge{ width:64px; height:64px; border-radius:50%; background:linear-gradient(140deg,var(--primary-light),var(--accent-light)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--primary-dark); margin-bottom:16px; }
.placeholder-tag{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--secondary); background:var(--secondary-light); padding:4px 10px; border-radius:var(--radius-pill); margin-bottom:14px; }
.quote-card blockquote{ font-size:16px; font-style:italic; color:var(--ink); margin:0 0 16px; }
.quote-card .who{ font-weight:700; font-size:14px; }
.quote-card .role{ font-size:12.5px; color:var(--ink-soft); }

.gallery-grid{ width:min(100%,1030px); margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.gallery-grid figure{ margin:0; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); }
.gallery-grid .ph{ aspect-ratio: var(--ar, 1); background:linear-gradient(135deg,var(--primary-light),var(--paper-alt)); display:flex; align-items:center;justify-content:center; color:var(--primary); font-size:13px; font-weight:600; text-align:center; padding:14px;}
@media(max-width:800px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.gallery-grid{grid-template-columns:1fr}}

/* ===================================================================
   CALLOUTS / BANNERS
   =================================================================== */
.callout{ background:var(--primary-light); border:1px solid rgba(75,82,160,.20); border-radius:var(--radius-lg); padding:32px 34px; display:flex; gap:20px; align-items:flex-start; }
.callout .icon{ font-size:26px; flex-shrink:0; }
.callout h4{ font-size:16.5px; margin-bottom:8px; }
.callout p{ color:var(--ink-soft); margin:0; font-size:14.5px; }
.callout.warm{ background:var(--accent-light); border-color:rgba(203,155,57,.30); }
.callout.security{ background:var(--secondary-light); border-color:rgba(75,82,160,.22); }

.cta-band{ background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:var(--white); border-radius:var(--radius-lg); padding:52px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-band h3{ color:var(--white); font-size:28px; margin-bottom:8px; max-width:520px; }
.cta-band p{ color:rgba(255,255,255,.85); margin:0; }
.cta-band .btn-row{ display:flex; gap:12px; flex-wrap:wrap; }

.highlight-bar{ background:linear-gradient(120deg,var(--accent),var(--accent-dark)); color:var(--primary-dark); border-radius:var(--radius-lg); padding:36px 40px; text-align:center; box-shadow:var(--shadow-md); }
.highlight-bar h3{ font-size:24px; margin-bottom:10px; }
.highlight-bar p{ max-width:640px; margin:0 auto 18px; font-size:15.5px; color:rgba(35,35,45,.84); }

/* ===================================================================
   FORMS
   =================================================================== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:13.5px; font-weight:700; color:var(--ink); }
.field label .req{ color:var(--secondary); }
.field input, .field select, .field textarea{
  padding:13px 15px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--white);
  font-family:inherit; font-size:14.5px; color:var(--ink); transition:border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--primary); }
.field textarea{ resize:vertical; min-height:96px; }
.check-row{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); }
.check-row input{ margin-top:3px; }
.form-note{ font-size:12.5px; color:var(--ink-faint); margin-top:6px; }
.form-success{ display:none; text-align:center; padding:40px 20px; }
.form-success.show{ display:block; }
.form-success .icon{ width:64px; height:64px; border-radius:50%; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 18px; }

/* ===================================================================
   ACCORDION (FAQ)
   =================================================================== */
.accordion-item{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--white); margin-bottom:12px; overflow:hidden; }
.accordion-q{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; font-weight:700; font-size:15px; background:none; border:none; width:100%; text-align:left; }
.accordion-q .plus{ width:22px; height:22px; border-radius:50%; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; transition:transform .2s ease; }
.accordion-item.open .accordion-q .plus{ transform:rotate(45deg); }
.accordion-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.accordion-a-inner{ padding:0 22px 20px; color:var(--ink-soft); font-size:14.5px; }

/* ===================================================================
   ICON ROW (DPP objectives etc.)
   =================================================================== */
.icon-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:900px){ .icon-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .icon-row{ grid-template-columns:1fr; } }
.icon-row .item{ text-align:left; }
.icon-row .item .num{ font-family:var(--font-display); font-size:30px; color:var(--accent); font-weight:700; margin-bottom:10px; }
.icon-row .item h4{ font-size:15px; margin-bottom:6px; }
.icon-row .item p{ font-size:13.5px; color:var(--ink-soft); margin:0; }

/* ===================================================================
   DASHBOARD MOCK (sample illustration)
   =================================================================== */
.dash-mock{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:26px; }
.dash-mock .dash-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.dash-mock .dash-head h4{ margin:0; font-size:15px; }
.dash-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
.dash-stat{ background:var(--paper-alt); border-radius:var(--radius-sm); padding:16px; text-align:center; }
.dash-stat .val{ font-family:var(--font-display); font-size:24px; color:var(--primary); font-weight:700; }
.dash-stat .lbl{ font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin-top:4px; }
.dash-bars{ display:flex; align-items:flex-end; gap:10px; height:110px; padding:0 4px; }
.dash-bars .bar{ flex:1; background:linear-gradient(180deg,var(--accent),var(--primary)); border-radius:6px 6px 0 0; opacity:.85; }
@media (max-width:600px){ .dash-stats{ grid-template-columns:1fr; } }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{ background:linear-gradient(145deg,#5058A6,#414990); color:rgba(255,255,255,.92); padding:70px 0 0; margin-top:100px; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.14); }
@media (max-width:980px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand{ display:inline-flex; align-items:center; margin-bottom:18px; padding:6px 8px; border-radius:12px; background:var(--white); box-shadow:0 8px 24px rgba(0,0,0,.16); }
.footer-brand-logo{ width:205px; height:auto; border-radius:6px; }
.footer-mission{ font-size:14px; color:rgba(255,255,255,.68); max-width:280px; }
.footer-col h5{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin-bottom:16px; font-weight:700; }
.footer-col a, .footer-col span{ display:block; font-size:14px; color:rgba(255,255,255,.72); padding:6px 0; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; flex-wrap:wrap; gap:12px; font-size:13px; color:rgba(255,255,255,.55); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:14px; }
.footer-social a:hover{ background:var(--accent); border-color:var(--accent); color:var(--primary-dark); }
.footer-signin-button,.mnav-signin-button{border:0;background:transparent;font:inherit;cursor:pointer}.footer-signin-button{display:block;padding:6px 0;color:#fff;font-size:14px;font-weight:700;text-align:left}.footer-signin-button:hover{text-decoration:underline}.mnav-signin-button{width:100%;color:var(--primary);text-align:left}

/* ---- Legal content page ---- */
.legal-body{ max-width:760px; }
.legal-body h2{ font-size:20px; margin-top:36px; }
.legal-body p, .legal-body li{ color:var(--ink-soft); font-size:15px; }
.legal-body li{ margin-bottom:8px; }
.legal-body ul{ padding-left:20px; list-style:disc; }

/* ---- Floating WhatsApp ---- */
.whatsapp-fab{ position:fixed; bottom:26px; right:26px; width:58px; height:58px; border-radius:50%; background:var(--primary); border:3px solid var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(75,82,160,.34); z-index:900; color:var(--white); font-size:26px; transition:transform .15s ease; }
.whatsapp-fab:hover{ transform:scale(1.08); }

/* ---- Utility ---- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; gap:32px; } }
.badge-soft{ display:inline-block; padding:5px 12px; border-radius:var(--radius-pill); background:var(--accent-light); color:var(--accent-dark); font-size:12px; font-weight:700; }
.muted{ color:var(--ink-soft); }
.small{ font-size:13px; }
.divider{ height:1px; background:var(--line); border:none; margin:40px 0; }
.image-frame{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-md); }
.photo-ph{ aspect-ratio:4/3; background:linear-gradient(135deg,var(--primary-light) 0%, var(--paper-alt) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--primary); text-align:center; padding:20px; }
.photo-ph .icon{ font-size:34px; }
.photo-ph span{ font-size:13px; font-weight:600; max-width:220px; color:var(--ink-soft); }

section.alt{ background:var(--paper-alt); }
section.dark{ background:var(--primary-dark); color:rgba(255,255,255,.9); }
section.dark h2, section.dark h3, section.dark h4{ color:var(--white); }
section.dark .section-head p{ color:rgba(255,255,255,.72); }
/* ===================================================================
   PRODUCTION LANDING INTEGRATION — MEDIA, PARTNER FORM AND AUTH
   =================================================================== */
.hero .container{position:relative;z-index:1}
.hero-media-card{margin:0;border:1px solid rgba(255,255,255,.32);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.1);box-shadow:0 26px 60px rgba(20,22,50,.28);align-self:center}
.hero-media-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center}
.hero-media-card figcaption{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:13px 18px;background:rgba(22,24,45,.84);color:rgba(255,255,255,.76);font-size:12px}
.hero-media-card figcaption>span:first-child,.sample-media-label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--accent-dark);border-radius:999px;padding:5px 9px}
.hero-media-card .media-replace-copy{font-size:11px;color:rgba(255,255,255,.76);line-height:1.5}
.hero-media-card code,.media-file-note code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}
.media-story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.media-story-grid h2{font-size:clamp(28px,3.5vw,42px)}
.media-file-note{margin-top:24px;padding:15px 17px;border:1px solid var(--line);border-radius:12px;background:var(--white);display:flex;flex-direction:column;gap:5px;color:var(--ink-soft);font-size:12px}
.video-shell{position:relative;border-radius:22px;overflow:hidden;background:#11152a;box-shadow:var(--shadow-lg);border:1px solid rgba(75,82,160,.15)}
.video-shell video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;background:#11152a}
.video-shell .sample-media-label{position:absolute;left:14px;top:14px;pointer-events:none}
.media-gallery-item{position:relative!important;display:block!important;overflow:hidden!important;padding:0!important;background:#171a32!important;aspect-ratio:4/3!important}
.media-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.media-gallery-item span{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 10px;border-radius:9px;background:rgba(18,20,39,.8);color:#fff;font-size:11px;font-weight:700;backdrop-filter:blur(6px)}
.gallery-grid figure:hover .media-gallery-item img{transform:scale(1.025)}

.production-partner{background:linear-gradient(145deg,#565EAD,#454D98);color:#fff;scroll-margin-top:calc(var(--header-h) + 12px)}
.production-partner-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:start}
.production-partner .eyebrow{color:#F2D889}
.production-partner h2{color:#fff;font-size:clamp(30px,4vw,46px)}
.production-partner-copy>p{color:rgba(255,255,255,.68);max-width:470px}
.partner-benefits{display:grid;gap:12px;margin:26px 0}
.partner-benefits li{position:relative;padding-left:26px;color:rgba(255,255,255,.82);font-size:14px}
.partner-benefits li::before{content:'✓';position:absolute;left:0;color:#e5c36f;font-weight:800}
.partner-counter{display:inline-flex;align-items:baseline;gap:10px;padding:13px 16px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.06)}
.partner-counter strong{font-family:var(--font-display);font-size:24px;color:#e5c36f}.partner-counter span{font-size:12px;color:rgba(255,255,255,.6)}
.production-partner-form{padding:30px;border-radius:20px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.28);box-shadow:0 24px 60px rgba(31,36,97,.24);backdrop-filter:blur(8px)}
.pf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pf-field{margin-bottom:15px}
.pf-field label{display:block;margin-bottom:6px;color:rgba(255,255,255,.7);font-size:12px;font-weight:700}
.pf-field input,.pf-field select,.pf-field textarea{width:100%;padding:11px 13px;border:1px solid rgba(255,255,255,.62);border-radius:9px;background:rgba(255,255,255,.97);color:var(--ink);font:13.5px var(--font-body)}
.pf-field input::placeholder,.pf-field textarea::placeholder{color:#77798A}
.pf-field input:focus,.pf-field select:focus,.pf-field textarea:focus{outline:3px solid rgba(203,155,57,.2);border-color:#d9b75f}.pf-field textarea{min-height:92px;resize:vertical}
.pf-consent{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;margin:5px 0 15px;color:rgba(255,255,255,.67);font-size:11.5px;line-height:1.55;cursor:pointer}
.pf-consent input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--accent)}.pf-consent a{color:#f0d38b;text-decoration:underline}
.pf-submit{width:100%;padding:14px;border:0;border-radius:10px;background:var(--accent);color:#181929;font-weight:800;font-size:14px;cursor:pointer}.pf-submit:hover{background:#ddb459}.pf-submit:disabled{opacity:.58;cursor:not-allowed}
.pf-note{text-align:center;color:rgba(255,255,255,.46);font-size:11px;margin:11px 0 0}.pf-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.pf-success{display:none;text-align:center;padding:44px 18px}.pf-success.show{display:block}.pf-success .ok-icon{width:54px;height:54px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:rgba(77,191,139,.16);color:#6ee7ae;font-size:26px}.pf-success h3{color:#fff}.pf-success p{color:rgba(255,255,255,.65)}

.modal-backdrop{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(13,15,30,.78);backdrop-filter:blur(7px)}.modal-backdrop.show{display:flex}
.signin-modal-box{position:relative;width:min(460px,100%);padding:34px;border-radius:20px;background:#fff;text-align:center;box-shadow:0 32px 90px rgba(0,0,0,.42)}
.signin-brand-mark{width:48px;height:48px;margin:0 auto 15px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#efd68f,var(--accent));color:#252744;font-weight:800}
.signin-modal-box .eyebrow{color:var(--accent-dark);margin-bottom:4px}.signin-modal-box h3{font-size:28px}.signin-subtitle{color:var(--ink-soft);font-size:13.5px}
.signin-consent{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;margin-top:18px;padding:15px;text-align:left;border:1px solid var(--line);border-radius:11px;background:#f7f7fb;cursor:pointer}.signin-consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--accent)}.signin-consent-copy{font-size:11.5px;color:var(--ink-soft);line-height:1.6}.signin-consent-copy a{color:var(--accent-dark);font-weight:700;text-decoration:underline}
.signin-consent-error{display:none;margin-top:7px;color:#a93232;text-align:left;font-size:11.5px}.signin-status{display:none;margin-top:14px;padding:10px;border-radius:9px;background:#eef0f8;color:#424963;font-size:12px;text-align:left}
.signin-modal-box .btn-google{width:100%;min-height:49px;margin-top:18px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font-weight:700}.signin-modal-box .btn-google svg{width:18px;height:18px}.signin-modal-box .btn-google:disabled{opacity:.52;cursor:not-allowed}
.signin-secondary-button{width:100%;min-height:46px;margin-top:20px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-weight:700}.modal-close{position:absolute;right:13px;top:13px;width:34px;height:34px;border:0;border-radius:50%;background:#f0f1f6;color:#555b70;font-size:22px;line-height:1}.modal-close:hover{background:#e4e6ef}
[hidden]{display:none!important}
@media(max-width:900px){.media-story-grid,.production-partner-grid{grid-template-columns:1fr}.media-story-grid{gap:28px}.production-partner-grid{gap:34px}}
@media(max-width:600px){.hero-layout{gap:30px}.hero-media-card{border-radius:16px}.hero-media-card img{aspect-ratio:4/3;object-fit:cover}.hero-media-card figcaption{display:block}.hero-media-card figcaption>span{display:inline-block}.hero-media-card .media-replace-copy{display:block;margin-top:7px}.pf-row{grid-template-columns:1fr}.production-partner-form{padding:21px 18px}.modal-backdrop{align-items:flex-end;padding:12px}.signin-modal-box{padding:30px 21px 24px;border-radius:20px 20px 12px 12px}}
html,body{max-width:100%;overflow-x:hidden}.hero h1,.media-story-grid h2,.production-partner h2{overflow-wrap:anywhere}.hero-media-card,.video-shell,.production-partner-form{min-width:0}
.image-frame>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.map-sample-card{margin:0;background:#fff}.map-sample-card img{width:100%;height:auto;aspect-ratio:19/17;object-fit:contain;background:#f8f8fd}.map-sample-card figcaption{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 15px;border-top:1px solid var(--line);background:#fff;color:var(--ink-soft);font-size:11.5px}.map-sample-card figcaption strong{color:var(--primary);text-transform:uppercase;letter-spacing:.04em}.map-sample-card code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
@media(max-width:1040px){.hero-layout{grid-template-columns:1fr;gap:40px}.hero-copy{max-width:780px}.hero-media-card{width:min(100%,780px);margin:0 auto}.hero h1{max-width:800px}}
@media(max-width:720px){.signin-wrap{display:none}.header-inner{gap:10px}.hero{padding-top:68px}.hero-layout{gap:30px}.hero .btn-row .btn{flex:1 1 180px}.hero-media-card figcaption code{overflow-wrap:anywhere}}