/* ===================================================================
   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:1420px){
  .header-inner{ gap:16px; padding:3px 20px 0; }
  .brand-logo{ width:175px; }
  .nav-link{ padding:10px 7px; font-size:13.5px; gap:4px; }
  .signin-btn{ padding:10px 14px; font-size:13.5px; }
  .header-actions > .btn-primary{ padding:10px 16px; font-size:13.5px; }
}
@media (max-width:1260px){
  .header-inner{ gap:8px; padding:3px 14px 0; }
  .brand-logo{ width:155px; }
  .nav-link{ padding:9px 5px; font-size:12.8px; gap:3px; }
  .main-nav{ gap:0; }
  .header-actions{ gap:8px; }
  .header-actions > .btn-primary{ display:none; }
  .signin-btn{ padding:9px 12px; font-size:13px; }
}
@media (max-width:1120px){
  .main-nav{ display:none; }
  .header-actions .btn-outline{ display:none; }
  .header-actions > .btn-primary{ display:inline-flex; }
  .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 .container.hero-layout{max-width:1520px}
.hero-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(520px,1.05fr);gap:56px;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{width:100%;margin:0;border:1px solid rgba(255,255,255,.36);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 26px 60px rgba(20,22,50,.28);align-self:center}
.hero-slides{position:relative;width:100%;aspect-ratio:1672/941;overflow:hidden;background:#071d3b}
.hero-slide{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;visibility:visible;transition:opacity .7s ease,visibility .7s ease}
.hero-slide:nth-child(1){animation:hero-slide-one 15s infinite}.hero-slide:nth-child(2){animation:hero-slide-two 15s infinite}.hero-slide:nth-child(3){animation:hero-slide-three 15s infinite}
[data-hero-carousel].carousel-ready .hero-slide{animation:none;visibility:hidden}.hero-slide.active,[data-hero-carousel].carousel-ready .hero-slide.active{opacity:1;visibility:visible;z-index:1}
@keyframes hero-slide-one{0%,30%{opacity:1}33.333%,100%{opacity:0}}@keyframes hero-slide-two{0%,30%{opacity:0}33.333%,63.333%{opacity:1}66.666%,100%{opacity:0}}@keyframes hero-slide-three{0%,63.333%{opacity:0}66.666%,96.666%{opacity:1}100%{opacity:0}}
.hero-carousel-controls{position:absolute;z-index:3;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px 9px;border:1px solid rgba(255,255,255,.48);border-radius:999px;background:rgba(20,23,52,.72);box-shadow:0 8px 24px rgba(15,18,45,.24);backdrop-filter:blur(8px)}
.hero-carousel-arrow{width:30px;height:30px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}.hero-carousel-arrow:hover,.hero-carousel-arrow:focus-visible{background:#fff;color:var(--primary);outline:none}
.hero-carousel-dots{display:flex;align-items:center;gap:8px}.hero-carousel-dots button{width:9px;height:9px;padding:0;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:transparent;cursor:pointer}.hero-carousel-dots button.active{width:24px;border-radius:999px;background:#fff}
.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-carousel-controls{bottom:8px;padding:4px 7px;gap:8px}.hero-carousel-arrow{width:27px;height:27px;font-size:21px}.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}}
@media(prefers-reduced-motion:reduce){.hero-slide{animation:none!important;transition:none}.hero-slide:first-child{opacity:1;visibility:visible}}

/* ===================================================================
   LANDING PAGE — SELECTIVE NAVY EXPERIENCE
   Navy is limited to the hero and sections that previously used the light
   alternate background. White sections and production components stay intact.
   =================================================================== */
.landing-glass .hero{padding:92px 0 104px;background:radial-gradient(circle at 76% 12%,rgba(83,158,217,.32),transparent 30%),radial-gradient(circle at 8% 88%,rgba(11,85,143,.38),transparent 28%),linear-gradient(135deg,#031c39 0%,#073d70 53%,#041a34 100%);border-bottom:1px solid rgba(116,190,242,.18)}
.landing-glass .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 52%,rgba(255,255,255,.04) 52% 64%,transparent 64%),radial-gradient(circle at 96% 10%,rgba(246,196,83,.17),transparent 13rem)}
.landing-glass .hero::after{right:-130px;top:-190px;width:520px;height:520px;background:radial-gradient(circle at 35% 35%,rgba(245,194,79,.25),transparent 67%)}
.landing-glass .hero .container.hero-layout{max-width:1440px}
.landing-glass .hero-layout{grid-template-columns:minmax(0,1fr) minmax(560px,680px);gap:52px}
.landing-glass .hero-copy{padding:22px 0}.landing-glass .hero h1{font-size:clamp(38px,4.1vw,58px);letter-spacing:-.025em;text-shadow:0 8px 28px rgba(0,12,32,.38)}
.landing-glass .hero p.lead{color:#d7e5f3;font-size:17px;line-height:1.72;max-width:650px}
.landing-glass .hero .eyebrow{color:#f4c452!important;letter-spacing:.1em}
.landing-glass .hero-media-card{max-width:680px;justify-self:end;padding:8px;border:1px solid rgba(133,207,255,.75);border-radius:30px;background:linear-gradient(145deg,rgba(100,183,239,.22),rgba(5,35,69,.42));box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 24px 70px rgba(0,13,36,.42),0 0 34px rgba(78,168,232,.18);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.landing-glass .hero-slides{border-radius:21px;background:#071f3d}.landing-glass .hero-slide{border-radius:20px}
.landing-glass .hero-carousel-controls{bottom:16px;border-color:rgba(141,207,255,.55);background:rgba(3,28,57,.72);box-shadow:0 8px 26px rgba(0,12,32,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.landing-glass .hero-carousel-dots button.active{background:#f4c452;border-color:#f4c452;box-shadow:0 0 12px rgba(244,196,82,.78)}

.landing-glass main>section.alt{position:relative;color:#eef6ff;background:radial-gradient(circle at 88% 18%,rgba(93,165,218,.2),transparent 28rem),linear-gradient(145deg,#123b64,#1c527e);border-top:1px solid rgba(149,204,241,.24);border-bottom:1px solid rgba(5,37,68,.2)}
.landing-glass main>section.alt>.container{position:relative;z-index:1}
.landing-glass main>section.alt h2,.landing-glass main>section.alt h3,.landing-glass main>section.alt h4{color:#fff}
.landing-glass main>section.alt .section-head p,.landing-glass main>section.alt .muted,.landing-glass main>section.alt p.muted,.landing-glass main>section.alt .small{color:#d4e3f1}
.landing-glass main>section.alt .eyebrow{color:#f4c452!important}
.landing-glass main>section.alt .card,.landing-glass main>section.alt .carousel,.landing-glass main>section.alt .flow-step,.landing-glass main>section.alt .image-frame,.landing-glass main>section.alt .photo-ph{background:#fbfdff;border:1px solid rgba(184,211,230,.9);box-shadow:0 16px 38px rgba(0,20,45,.22)}
.landing-glass main>section.alt .card h3,.landing-glass main>section.alt .card h4,.landing-glass main>section.alt .carousel h3,.landing-glass main>section.alt .flow-step h3,.landing-glass main>section.alt .flow-step h4{color:#17283d}
.landing-glass main>section.alt .card p,.landing-glass main>section.alt .carousel-slide p,.landing-glass main>section.alt .carousel-slide li,.landing-glass main>section.alt .flow-step p{color:#4f6073}
.landing-glass main>section.alt .card .small,.landing-glass main>section.alt .flow-step .small{color:#68798b}
.landing-glass main>section.alt .card .icon,.landing-glass main>section.alt .avatar-badge{background:#eef4fb;border:1px solid #cfdeeb;color:#355b80}
.landing-glass main>section.alt .carousel-dots button{background:#b8c9d8}.landing-glass main>section.alt .carousel-dots button.active{background:#c99a38}
.landing-glass main>section.alt .carousel-slide .tag,.landing-glass main>section.alt .placeholder-tag,.landing-glass main>section.alt .flow-step .num,.landing-glass main>section.alt .flow-step .outcome{color:#956b19}
.landing-glass main>section.alt .chip,.landing-glass main>section.alt .pill-tab{color:#18324e;background:#fff;border-color:#c9d9e7;box-shadow:0 5px 16px rgba(0,20,45,.1)}
.landing-glass main>section.alt .chip.solid{background:#edf4fa}.landing-glass main>section.alt .chip:hover,.landing-glass main>section.alt .chip-link:hover,.landing-glass main>section.alt .pill-tab.active{color:#102844;background:#f4c452;border-color:#f4c452}
.landing-glass main>section.alt .pill-tabs{background:rgba(5,38,70,.32);border:1px solid rgba(182,220,245,.35);padding:6px;border-radius:999px}
.landing-glass main>section.alt .two-col a[style]{color:#ffe08a!important}
.landing-glass main>section.alt .video-shell{border-color:rgba(171,217,246,.75);box-shadow:0 20px 48px rgba(0,18,43,.3)}
.landing-glass main>section.alt .gallery-grid figure{border-color:rgba(190,221,241,.8);box-shadow:0 14px 32px rgba(0,17,39,.25)}
.landing-glass main>section.alt .media-gallery-item span{background:rgba(3,24,49,.84);color:#fff}
.landing-glass main>section.alt .map-sample-card{background:#fff}.landing-glass main>section.alt .map-sample-card figcaption{background:#fff;border-color:#d7e2ec;color:#536579}.landing-glass main>section.alt .map-sample-card figcaption strong{color:#355b80}
.landing-glass main>section.alt .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}.landing-glass main>section.alt .btn-outline:hover{background:#fff;color:#173d62;border-color:#fff}
.landing-glass main>section.alt .compare-table{background:#f7fbff;border-color:#b9d0e1;box-shadow:0 18px 42px rgba(0,20,45,.22)}
.landing-glass main>section.alt .compare-col.without{background:#f4f1f6;color:#27384b}.landing-glass main>section.alt .compare-col.with{background:#e9f4fa;color:#20364a}
.landing-glass main>section.alt .compare-col h4{color:#153b60}.landing-glass main>section.alt .compare-row{color:#31485d;border-color:rgba(31,69,101,.13)}
.landing-glass main>section.alt .compare-col.without .compare-row::before{color:#a44848}.landing-glass main>section.alt .compare-col.with .compare-row::before{color:#166b5c}
.landing-glass main>section.alt .callout{background:linear-gradient(145deg,#fffaf0,#edf6fb);border-color:#d5c89f;box-shadow:0 18px 42px rgba(0,20,45,.2)}
.landing-glass main>section.alt .callout h4{color:#17334e}.landing-glass main>section.alt .callout p{color:#43586b}
.reach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.reach-card{min-height:190px;padding:25px 21px;border:1px solid rgba(183,216,239,.72);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(8,40,73,.24));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 32px rgba(0,20,45,.17)}
.landing-glass main>section.alt .reach-card span{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:#f4c452;color:#17334e;font-weight:800}
.landing-glass main>section.alt .reach-card h3{margin:18px 0 8px;color:#fff;font-size:19px}.landing-glass main>section.alt .reach-card p{margin:0;color:#d7e7f4;font-size:13.5px}
@media(max-width:900px){.reach-grid{grid-template-columns:1fr}.reach-card{min-height:0}}
.live-map-card{overflow:hidden;border-radius:26px!important;background:#f1f5fb!important}
.live-map-card img{display:block;width:100%;aspect-ratio:1328/1187;object-fit:cover;background:#f1f5fb}
.location-chips{gap:11px}.location-chips .chip{min-width:82px;justify-content:center}
.perspective-grid{gap:28px}
.perspective-card{min-height:330px;padding:34px 32px;display:flex;flex-direction:column;align-items:flex-start}
.perspective-label{display:inline-flex;padding:7px 13px;border-radius:999px;background:#eef1fb;color:#3c4b9c;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.perspective-card h3{margin:24px 0 12px;font-size:22px}.perspective-card>p{margin:0 0 25px;color:var(--ink-soft);font-size:15px;line-height:1.7}
.perspective-card .avatar-badge{margin-top:auto;width:46px;height:46px;font-size:15px}.perspective-card .who{margin-top:13px}
@media(max-width:900px){.perspective-grid{grid-template-columns:1fr}.perspective-card{min-height:0}}

@media(max-width:1180px){.landing-glass .hero-layout{grid-template-columns:1fr;gap:42px}.landing-glass .hero-copy{max-width:800px}.landing-glass .hero-media-card{width:min(100%,780px);max-width:780px;justify-self:center}.landing-glass .hero h1{max-width:800px}}
@media(max-width:720px){.landing-glass .hero{padding:62px 0 72px}.landing-glass .hero-copy{padding:0}.landing-glass .hero h1{font-size:clamp(35px,12vw,48px)}.landing-glass .hero p.lead{font-size:16px}.landing-glass .hero-media-card{padding:5px;border-radius:21px}.landing-glass .hero-slides,.landing-glass .hero-slide{border-radius:15px}}

/* ===================================================================
   HOMEPAGE UX REFINEMENT — 02 OCTOBER 2026
   Stronger SIP positioning, spacious glass rollout, richer foundation
   visualisation, replaceable faculty portraits and unified navy footer.
   =================================================================== */
.landing-glass .section-head.center{max-width:860px}
.landing-glass .section-head.center h2{letter-spacing:-.018em}

/* The fourth option is the business proposition, so it receives the
   strongest hierarchy after the hero instead of reading like a small banner. */
.landing-glass .sip-answer{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.55fr);gap:42px;align-items:center;margin-top:34px;padding:52px 56px;border:1px solid rgba(133,207,255,.62);border-radius:30px;background:radial-gradient(circle at 88% 10%,rgba(244,196,82,.22),transparent 17rem),linear-gradient(135deg,rgba(3,29,58,.96),rgba(7,67,115,.9));box-shadow:0 26px 65px rgba(0,18,43,.38),inset 0 1px 0 rgba(255,255,255,.16);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}
.landing-glass .sip-answer::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(112deg,transparent 0 63%,rgba(255,255,255,.055) 63% 75%,transparent 75%)}
.landing-glass .sip-answer::after{content:"SIP";position:absolute;right:22px;top:-42px;z-index:-1;font:800 190px/1 var(--font-display);color:rgba(255,255,255,.035);letter-spacing:-.08em}
.sip-answer-kicker{display:inline-flex;margin-bottom:14px;padding:7px 12px;border:1px solid rgba(244,196,82,.48);border-radius:999px;background:rgba(244,196,82,.12);color:#ffe08a;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.landing-glass .sip-answer h3{margin-bottom:14px;color:#fff!important;font-size:clamp(30px,3.2vw,44px);letter-spacing:-.025em}
.landing-glass .sip-answer-copy>p{max-width:820px;margin-bottom:24px;color:#d9e8f6!important;font-size:17px;line-height:1.75}
.sip-answer-points{display:flex;gap:12px;flex-wrap:wrap}
.sip-answer-points span{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid rgba(168,216,247,.28);border-radius:999px;background:rgba(255,255,255,.075);color:#f4f9ff;font-size:13px;font-weight:700}
.sip-answer-points b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f4c452;color:#092d53;font-size:10px}
.sip-answer-action{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:26px;border-left:1px solid rgba(166,215,246,.3)}
.sip-answer-label{color:#fff;font:600 21px/1.35 var(--font-display)}
.sip-answer-action .btn{width:100%;min-height:52px;box-shadow:0 14px 30px rgba(0,15,38,.3)}

/* The rollout is intentionally two columns: it is the operational core of
   the offer and needs room to be read, not ten compressed tiles. */
.landing-glass .rollout-flow{position:relative;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;counter-reset:rollout}
.landing-glass .rollout-flow::before{content:"";position:absolute;left:50%;top:28px;bottom:28px;width:1px;background:linear-gradient(180deg,transparent,rgba(155,211,246,.42) 8%,rgba(244,196,82,.5) 50%,rgba(155,211,246,.42) 92%,transparent)}
.landing-glass .rollout-flow .flow-step{position:relative;overflow:hidden;min-height:188px;padding:28px 30px;border:1px solid rgba(190,220,240,.88);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,248,253,.94));box-shadow:0 18px 38px rgba(0,20,45,.2),inset 0 1px 0 #fff;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.landing-glass .rollout-flow .flow-step::after{content:"";position:absolute;right:-45px;top:-55px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(80,168,228,.13),transparent 70%)}
.landing-glass .rollout-flow .flow-step:hover{transform:translateY(-4px);border-color:rgba(91,170,222,.85);box-shadow:0 24px 48px rgba(0,19,44,.28),inset 0 1px 0 #fff}
.rollout-flow .step-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}
.landing-glass .rollout-flow .flow-step .num{width:42px;height:42px;margin:0;background:linear-gradient(145deg,#123f6d,#2879ae);border:1px solid rgba(118,195,241,.55);box-shadow:0 8px 20px rgba(11,65,108,.22);color:#fff;font-size:13px}
.rollout-flow .step-kicker{color:#8b651e;font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.landing-glass .rollout-flow .flow-step h4{margin-bottom:9px;color:#142a42!important;font-size:20px}
.landing-glass .rollout-flow .flow-step p{max-width:520px;margin-bottom:18px;color:#506176!important;font-size:14.5px;line-height:1.65}
.landing-glass .rollout-flow .flow-step .outcome{display:inline-flex;align-items:center;gap:8px;color:#805a13;font-size:11px;letter-spacing:.07em}
.landing-glass .rollout-flow .flow-step .outcome::before{content:"";width:18px;height:2px;border-radius:2px;background:#d5a43c}

/* Richer explanatory chart; intentionally labelled as illustrative. */
.progress-chart-card{min-width:0;padding:30px;border:1px solid rgba(67,129,179,.28);border-radius:26px;background:radial-gradient(circle at 88% 8%,rgba(80,172,233,.12),transparent 17rem),linear-gradient(145deg,#fbfdff,#eff6fb);box-shadow:0 22px 54px rgba(24,61,92,.16),inset 0 1px 0 #fff}
.progress-chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
.progress-chart-head h4{max-width:430px;margin:5px 0 0;color:#183451;font-size:22px}
.chart-kicker{color:#3d70a0;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.chart-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;color:#53677a;font-size:10.5px;font-weight:700}
.chart-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chart-legend span::before{content:"";width:18px;height:4px;border-radius:4px}.chart-legend .early::before{background:#438fd2}.chart-legend .late::before{background:#d19a30}
.progress-chart{display:block;width:100%;height:auto;overflow:visible}
.progress-chart .chart-grid line{stroke:#dce9f2;stroke-width:1;stroke-dasharray:4 7}
.progress-chart .chart-axis line{stroke:#a9bfd0;stroke-width:1.5}
.progress-chart .axis-label{fill:#7890a3;font:700 10px var(--font-body);letter-spacing:.08em}
.progress-chart .early-area{fill:url(#earlyArea)}
.progress-chart .early-path{fill:none;stroke:url(#earlyLine);stroke-width:7;stroke-linecap:round}
.progress-chart .late-path{fill:none;stroke:url(#lateLine);stroke-width:6;stroke-linecap:round;stroke-dasharray:10 8}
.progress-chart .start-marker{stroke:#d4a440;stroke-width:1.5;stroke-dasharray:5 7;opacity:.7}
.progress-chart .marker-label{fill:#9b701f;font:700 11px var(--font-body)}
.progress-chart .milestone circle{fill:#fff;stroke:#3f91d3;stroke-width:5}
.progress-chart .milestone text{fill:#254765;font:700 11px var(--font-body);text-anchor:middle}
.progress-chart .x-labels text{fill:#647c90;font:700 11px var(--font-body);text-anchor:middle}
.chart-note{display:flex;align-items:flex-start;gap:9px;margin:5px 0 0;color:#64778a;font-size:11.5px;line-height:1.5}
.chart-note span{color:#c28d29;font-size:15px}

/* Replace the four files without touching markup when approved portraits arrive. */
.faculty-grid{gap:22px}
.faculty-card{position:relative;overflow:hidden;padding:28px 22px 30px;border-color:#d7e5ef;background:linear-gradient(160deg,#fff,#f5f9fc)}
.faculty-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#1e6195,#f0c252)}
.faculty-photo{position:relative;width:132px;height:132px;margin:2px auto 18px;padding:5px;border-radius:50%;background:linear-gradient(145deg,#f4c452,#5db3ec 48%,#173f6a);box-shadow:0 16px 34px rgba(29,80,119,.24),0 0 0 7px rgba(56,128,181,.07)}
.faculty-photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 24%;background:#0c3158}
.faculty-card h3{margin-bottom:8px;font-size:17px}
.faculty-card p strong{color:#254c70}
.faculty-card .small{display:inline-block;margin-top:7px;color:#738597;line-height:1.45}

/* Resource cards no longer depend on empty cover-image placeholders. */
.resource-grid{gap:22px}
.resource-card{overflow:hidden;padding:0 0 25px;border-color:#dbe5ed}
.resource-card h3,.resource-card>p{margin-left:22px;margin-right:22px}
.resource-card h3{min-height:46px;font-size:16px}
.resource-card>p{color:#416b8d;font-weight:700}
.resource-cover{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;aspect-ratio:16/9;margin-bottom:20px;padding:20px;overflow:hidden;background:radial-gradient(circle at 76% 20%,rgba(244,196,82,.5),transparent 22%),linear-gradient(140deg,#092a4c,#145e93);color:#fff;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.resource-cover::after{content:"";position:absolute;z-index:-1;right:-28px;bottom:-50px;width:150px;height:150px;border:1px solid rgba(122,201,247,.34);border-radius:50%;box-shadow:0 0 0 24px rgba(115,194,241,.07),0 0 0 52px rgba(115,194,241,.05)}
.resource-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.44);border-radius:15px;background:rgba(255,255,255,.12);color:#f8d66f;font:700 25px var(--font-display);backdrop-filter:blur(8px)}

/* Complete the navy conversion in the remaining homepage-only areas. */
.landing-glass .production-partner{background:radial-gradient(circle at 10% 12%,rgba(65,147,205,.22),transparent 23rem),linear-gradient(140deg,#061f3b,#0b416f 58%,#082b4f);border-top:1px solid rgba(136,205,245,.26);border-bottom:1px solid rgba(3,25,49,.65)}
.landing-glass .production-partner-form{background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.08));border-color:rgba(174,218,245,.42);box-shadow:0 26px 65px rgba(0,13,35,.38),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}
.landing-glass .partner-counter{background:rgba(255,255,255,.09);border-color:rgba(172,217,244,.3)}
.landing-glass .final-cta-section{padding:72px 0;background:linear-gradient(180deg,#fbfdff,#f2f7fb)}
.landing-glass .final-cta-section .cta-band{position:relative;overflow:hidden;padding:48px 52px;border:1px solid rgba(119,190,234,.55);background:radial-gradient(circle at 92% 15%,rgba(244,196,82,.22),transparent 14rem),linear-gradient(135deg,#082746,#0b4b7c);box-shadow:0 22px 52px rgba(15,59,94,.2)}
.landing-glass .site-footer{margin-top:0;padding-top:68px;background:radial-gradient(circle at 85% 12%,rgba(55,142,204,.17),transparent 25rem),linear-gradient(145deg,#041a32,#082d51 58%,#031425);border-top:1px solid rgba(130,198,240,.26)}
.landing-glass .site-footer .footer-top{border-bottom-color:rgba(167,210,238,.2)}
.landing-glass .site-footer .footer-col h5{color:#f4c452}
.landing-glass .site-footer .footer-col a,.landing-glass .site-footer .footer-col span,.landing-glass .site-footer .footer-mission{color:#c8d9e8}
.landing-glass .site-footer .footer-col a:hover{color:#fff}
.landing-glass .site-footer .footer-bottom{color:#94adbf}
.landing-glass .site-footer .footer-bottom a{color:#a9c0d1!important}
.landing-glass .site-footer .footer-bottom a:hover{color:#fff!important}

@media(max-width:960px){
  .landing-glass .sip-answer{grid-template-columns:1fr;padding:44px}.sip-answer-action{padding:24px 0 0;border-left:0;border-top:1px solid rgba(166,215,246,.3)}
  .landing-glass .rollout-flow{grid-template-columns:1fr}.landing-glass .rollout-flow::before{left:20px;top:0;bottom:0}.landing-glass .rollout-flow .flow-step{margin-left:18px}
  .progress-chart-head{flex-direction:column}.chart-legend{justify-content:flex-start}
}
@media(max-width:620px){
  .landing-glass .sip-answer{gap:28px;margin-top:26px;padding:32px 22px;border-radius:23px}.landing-glass .sip-answer h3{font-size:31px}.landing-glass .sip-answer-copy>p{font-size:15.5px}.sip-answer-points{display:grid}.sip-answer-points span{width:100%}.sip-answer-action{padding:22px 0 0}.sip-answer-label{font-size:19px}
  .landing-glass .rollout-flow .flow-step{min-height:0;margin-left:11px;padding:24px 22px}.landing-glass .rollout-flow::before{left:8px}.rollout-flow .step-head{margin-bottom:14px}
  .progress-chart-card{padding:22px 14px;border-radius:20px}.progress-chart-head{padding:0 7px}.progress-chart-head h4{font-size:19px}.progress-chart .milestone text,.progress-chart .marker-label{font-size:9px}.progress-chart .axis-label{font-size:8px}
  .faculty-photo{width:145px;height:145px}.landing-glass .final-cta-section .cta-band{padding:36px 24px}.landing-glass .final-cta-section .btn-row,.landing-glass .final-cta-section .btn{width:100%}
}

/* ---- Trusted Partner Schools Marquee Banner ---- */
.trusted-schools-section{
  padding:54px 0 60px;
  background:linear-gradient(180deg,#f8fafd 0%,#edf4fa 100%);
  border-top:1px solid #d4e3ef;
  border-bottom:1px solid #d4e3ef;
  position:relative;
  overflow:hidden;
}
.trusted-schools-header{
  text-align:center;
  max-width:720px;
  margin:0 auto 30px;
}
.trusted-schools-header h3{
  font-family:var(--font-display);
  font-size:clamp(22px,2.6vw,32px);
  color:var(--ink);
  margin:0 0 6px;
}
.trusted-schools-header p{
  color:var(--ink-soft);
  font-size:15px;
  margin:0;
}
.school-marquee-container{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:8px 0;
  mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
}
.school-marquee-track{
  display:flex;
  gap:24px;
  width:max-content;
  user-select:none;
}
.school-marquee-track:hover .school-marquee-group{
  animation-play-state:paused;
}
.school-marquee-group{
  display:flex;
  gap:24px;
  align-items:center;
  animation:schoolMarqueeScroll 45s linear infinite;
  will-change:transform;
}
.school-logo-card{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:104px;
  min-width:220px;
  padding:12px 20px;
  background:#ffffff;
  border:1px solid #d4e3ef;
  border-radius:18px;
  box-shadow:0 8px 22px rgba(18,52,85,.06);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.school-logo-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(18,52,85,.12);
  border-color:#b4d2e7;
}
.school-logo-card img{
  max-height:80px;
  max-width:190px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
@keyframes schoolMarqueeScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(calc(-100% - 24px));}
}
@media(max-width:768px){
  .trusted-schools-section{padding:42px 0 46px;}
  .school-logo-card{height:86px;min-width:180px;padding:10px 14px;}
  .school-logo-card img{max-height:64px;max-width:155px;}
  .school-marquee-group{gap:16px;}
  .school-marquee-track{gap:16px;}
  @keyframes schoolMarqueeScroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(calc(-100% - 16px));}
  }
}
@media(prefers-reduced-motion:reduce){
  .school-marquee-group{animation:none!important;}
  .school-marquee-track{overflow-x:auto;width:100%;justify-content:center;flex-wrap:wrap;}
}