/* ==========================================================================
   Sree Narayana College Nattika — Premium Design Layer
   --------------------------------------------------------------------------
   Extends the existing Webflow token system rather than replacing it.
   Structure and markup are untouched; this layer refines presentation only.

   0.  Preloader
   1.  Design tokens
   2.  Base & rendering
   3.  Typography system
   4.  Layout rhythm & spacing
   5.  Navigation
   6.  Buttons
   7.  Cards & surfaces
   8.  Media
   9.  Forms
   10. Footer
   11. Motion & reveal
   12. Accessibility & reduced motion
   13. Responsive refinement
   ========================================================================== */


/* ==========================================================================
   0. PRELOADER
   A full-screen white splash carrying the header mark, shown over the page
   while its resources load. initPreloader() in premium.js adds .is-hidden
   on window 'load' (or a safety timeout), which wipes it upward and off
   screen; .is-done then takes it out of flow entirely so it can never trap
   focus, block clicks, or linger for assistive tech.
   ========================================================================== */
.p-preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

/* The logo artwork carries the NAAC/DST-FIST/NIRF line under the wordmark,
   so the college name is a small fraction of the image's own height — it
   needs to run big to actually read. Nothing else is on screen competing
   for space, so it can afford to. */
.p-preloader-logo {
  width: min(460px, 80vw);
  height: auto;
  animation: p-preloader-pulse 1.6s ease-in-out infinite;
}

@keyframes p-preloader-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1); }
}

.p-preloader.is-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

.p-preloader.is-done { display: none; }

@media (prefers-reduced-motion: reduce) {
  .p-preloader { transition: none; }
  .p-preloader-logo { animation: none; }
}


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Ink (navy) scale — the institutional authority colour ------------- */
  --p-ink-900: #0d101d;
  --p-ink-800: #111425;
  --p-ink-700: #161a30;
  --p-ink-600: #1c223e;
  --p-ink-500: #1f2544;
  --p-ink-400: #454b66;
  --p-ink-300: #656a83;
  --p-ink-200: #9296a8;
  --p-ink-100: #c3c5d0;
  --p-ink-50:  #e8e9ee;

  /* --- Accent (gold) — used sparingly, for emphasis only ----------------- */
  --p-gold-50:  #fbf8f0;
  --p-gold-100: #f4ecd8;
  --p-gold-200: #e8d6ab;
  --p-gold-300: #d9bd78;
  --p-gold-400: #c9a552;
  --p-gold-500: #bf9333;
  --p-gold-600: #a17a26;
  --p-gold-700: #8f6b1f;  /* AA on white — use for accent *text* */
  --p-gold-800: #6d5117;

  /* --- Surfaces --------------------------------------------------------- */
  --p-surface:         #ffffff;
  --p-surface-subtle:  #faf9f6;
  --p-surface-muted:   #f3f2ed;
  --p-surface-ink:     var(--p-ink-500);

  /* --- Lines ------------------------------------------------------------ */
  --p-border:        rgba(31, 37, 68, 0.10);
  --p-border-strong: rgba(31, 37, 68, 0.18);
  --p-border-light:  rgba(255, 255, 255, 0.14);

  /* --- Elevation — layered, navy-tinted, never grey mush ---------------- */
  --p-shadow-xs: 0 1px 2px rgba(31, 37, 68, 0.05);
  --p-shadow-sm: 0 1px 3px rgba(31, 37, 68, 0.06), 0 1px 2px rgba(31, 37, 68, 0.04);
  --p-shadow-md: 0 4px 14px rgba(31, 37, 68, 0.07), 0 2px 5px rgba(31, 37, 68, 0.04);
  --p-shadow-lg: 0 14px 36px rgba(31, 37, 68, 0.10), 0 4px 10px rgba(31, 37, 68, 0.04);
  --p-shadow-xl: 0 28px 64px rgba(31, 37, 68, 0.14), 0 8px 18px rgba(31, 37, 68, 0.05);

  /* --- Spacing scale ---------------------------------------------------- */
  --p-space-3xs: 0.25rem;
  --p-space-2xs: 0.5rem;
  --p-space-xs:  0.75rem;
  --p-space-sm:  1rem;
  --p-space-md:  1.5rem;
  --p-space-lg:  2rem;
  --p-space-xl:  3rem;
  --p-space-2xl: 4rem;
  --p-space-3xl: 5.5rem;

  /* Section rhythm — fluid, so density scales with the viewport */
  --p-section-y: clamp(4.5rem, 8vw, 8.25rem);

  /* --- Radii — restrained. Premium reads sharp, not bubbly -------------- */
  --p-radius-sm: 3px;
  --p-radius:    6px;
  --p-radius-lg: 10px;

  /* --- Motion ----------------------------------------------------------- */
  --p-ease:      cubic-bezier(0.25, 1, 0.5, 1);
  --p-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --p-ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --p-dur-fast: 0.2s;
  --p-dur:      0.35s;
  --p-dur-slow: 0.6s;

  /* --- Typography ------------------------------------------------------- */
  --p-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --p-font-sans:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --p-text-display: clamp(2.5rem, 1.35rem + 3.6vw, 4.25rem);
  --p-text-h1:      clamp(2.125rem, 1.4rem + 2.3vw, 3.25rem);
  --p-text-h2:      clamp(1.75rem, 1.25rem + 1.6vw, 2.625rem);
  --p-text-h3:      clamp(1.3125rem, 1.1rem + 0.7vw, 1.75rem);
  --p-text-h4:      clamp(1.125rem, 1.03rem + 0.3vw, 1.3125rem);
  --p-text-body:    clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  --p-text-sm:      0.875rem;
  --p-text-xs:      0.75rem;

  /* --- Remap Webflow's semantic tokens onto the refined palette ---------- */
  --font--heading:   var(--p-font-display);
  --font--paragraph: var(--p-font-sans);

  --1-main-colors--primary:    var(--p-gold-500);
  --1-main-colors--secondary:  var(--p-ink-500);
  --1-main-colors--tertiary:   var(--p-gold-400);
  --1-main-colors--heading:    var(--p-ink-500);
  --1-main-colors--paragraph:  var(--p-ink-400);
  --1-main-colors--border:     var(--p-border);
  --1-main-colors--background: var(--p-ink-500);

  /* Remap the raw scales so every component inherits the new palette */
  --2-primary--primary-50:  var(--p-gold-50);
  --2-primary--primary-100: var(--p-gold-100);
  --2-primary--primary-200: var(--p-gold-200);
  --2-primary--primary-300: var(--p-gold-300);
  --2-primary--primary-400: var(--p-gold-400);
  --2-primary--primary-500: var(--p-gold-500);
  --2-primary--primary-600: var(--p-gold-600);
  --2-primary--primary-700: var(--p-gold-700);
  --2-primary--primary-800: var(--p-gold-800);
  --2-primary--primary-900: var(--p-gold-800);

  --3-secondary--secondary-50:  var(--p-ink-50);
  --3-secondary--secondary-100: var(--p-ink-100);
  --3-secondary--secondary-200: var(--p-ink-200);
  --3-secondary--secondary-300: var(--p-ink-300);
  --3-secondary--secondary-400: var(--p-ink-400);
  --3-secondary--secondary-500: var(--p-ink-500);
  --3-secondary--secondary-600: var(--p-ink-600);
  --3-secondary--secondary-700: var(--p-ink-700);
  --3-secondary--secondary-800: var(--p-ink-800);
  --3-secondary--secondary-900: var(--p-ink-900);

  --4-neutral--neutral-50:  var(--p-ink-50);
  --4-neutral--neutral-100: var(--p-ink-100);
  --4-neutral--neutral-200: var(--p-ink-200);
  --4-neutral--neutral-300: var(--p-ink-300);
  --4-neutral--neutral-400: var(--p-ink-400);
  --4-neutral--neutral-500: var(--p-ink-500);

  --6-radius--button:    var(--p-radius);
  --6-radius--primary:   var(--p-radius);
  --6-radius--secondary: var(--p-radius-lg);
}


/* ==========================================================================
   2. BASE & RENDERING
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  /* Anchor targets clear the sticky navigation. Smooth scrolling is left to
     the browser default — forcing it globally hijacks programmatic scrolls. */
  scroll-padding-top: 120px;
}

body {
  font-family: var(--p-font-sans);
  font-size: var(--p-text-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: var(--p-ink-400);
  background-color: var(--p-surface-subtle);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background-color: var(--p-gold-200);
  color: var(--p-ink-600);
}

/* Refined scrollbar — a small detail, but it signals care */
@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: var(--p-ink-100) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--p-surface-muted); }
::-webkit-scrollbar-thumb {
  background: var(--p-ink-100);
  border-radius: 10px;
  border: 2px solid var(--p-surface-muted);
}
::-webkit-scrollbar-thumb:hover { background: var(--p-ink-200); }

/* A short, elegant first paint. CSS-only, so it always completes. */
.page-wrapper { animation: p-page-in 0.5s var(--p-ease) both; }
@keyframes p-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ==========================================================================
   3. TYPOGRAPHY SYSTEM
   ========================================================================== */

/* Typeface and metrics apply to every heading. Colour deliberately does not:
   light-on-dark headings are excluded below so they keep their contrast. */
h1, h2, h3, h4, h5, h6,
.heading, .white-heading,
[class*="-title"]:not([class*="product-title"]),
[class*="px-title"] {
  font-family: var(--p-font-display) !important;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.16;
  text-wrap: balance;
}

/* Ink colour for headings on light surfaces only. Anything the template
   marked as white sits on photography or a dark panel — leave it alone. */
h1:not([class*="white"]), h2:not([class*="white"]),
h3:not([class*="white"]), h4:not([class*="white"]),
h5:not([class*="white"]), h6:not([class*="white"]),
.heading:not([class*="white"]),
[class*="-title"]:not([class*="product-title"]):not([class*="white"]),
[class*="px-title"]:not([class*="white"]) {
  color: var(--p-ink-500);
}

/* Dark surfaces set their own heading colour explicitly. */
.footer-black h1, .footer-black h2, .footer-black h3,
.footer-black h4, .footer-black h5, .footer-black h6,
.cta-block h1, .cta-block h2, .cta-block h3,
.main-banner h1, .main-banner h2,
.white-heading, .white-text, [class*="white-title"] {
  color: #fff;
}

h1 { font-size: var(--p-text-h1); letter-spacing: -0.022em; }
h2 { font-size: var(--p-text-h2); letter-spacing: -0.018em; }
h3 { font-size: var(--p-text-h3); line-height: 1.24; }
h4 { font-size: var(--p-text-h4); line-height: 1.3; letter-spacing: -0.008em; }
h5, h6 { line-height: 1.35; letter-spacing: -0.005em; }

/* The hero headline carries the most weight — give it room and optical size */
.hero-section h1,
._70px-title {
  font-size: var(--p-text-display);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.06;
}

p, li, label, blockquote, td, th,
input, textarea, select, button {
  font-family: var(--p-font-sans);
}

p {
  color: var(--p-ink-400);
  line-height: 1.75;
  text-wrap: pretty;
}

/* Body copy should never run past a comfortable measure */
.hero-section p,
.section p:not([class*="13px"]):not([class*="12px"]) {
  max-width: 62ch;
}

/* Small metadata labels stay sans — Playfair at 12px reads cheap */
._13px-text, ._13px-text-white, ._12px-semibold-neutral-100-uppercase,
.event-category, .sncpl-role, .sncq-role, .sncpl-org,
[class*="_12px"], [class*="_13px"] {
  font-family: var(--p-font-sans) !important;
  letter-spacing: 0.01em;
}

/* --- Eyebrow / section label ------------------------------------------- */
/* The small line above a section headline. A hairline rule + tracked caps
   is the cheapest, most reliable signal of editorial intent. */
._12px-semibold-neutral-100-uppercase,
.event-category {
  font-size: var(--p-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--p-gold-700);
}

/* Links */
a { transition: color var(--p-dur) var(--p-ease), opacity var(--p-dur) var(--p-ease); }

/* Animated underline for inline text links */
.link-hover {
  position: relative;
  background-image: linear-gradient(var(--p-gold-500), var(--p-gold-500));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--p-dur) var(--p-ease), color var(--p-dur) var(--p-ease);
}
.link-hover:hover { background-size: 100% 1px; }


/* ==========================================================================
   4. LAYOUT RHYTHM & SPACING
   ========================================================================== */

.container { max-width: 1280px; padding-left: clamp(1.25rem, 4vw, 2.5rem); padding-right: clamp(1.25rem, 4vw, 2.5rem); }

/* Replace the flat 100px margins with a fluid, consistent vertical rhythm */
.section {
  margin-top: var(--p-section-y);
  margin-bottom: var(--p-section-y);
}
.section.margin-bottom-230px { margin-bottom: calc(var(--p-section-y) * 1.4); }
.footer-section { margin-top: var(--p-section-y); }

/* Heading → supporting copy relationship */
.title-wrapper { display: flex; flex-direction: column; gap: var(--p-space-sm); }

/* --- Inner-page header -------------------------------------------------
   Every page except the homepage opens on this banner, so it carries most
   of the site's first impression. It needs presence and a legible, branded
   scrim rather than a flat dark wash over photography. */
.main-banner {
  padding-top: clamp(4.5rem, 9vw, 8rem);
  padding-bottom: clamp(4.5rem, 9vw, 8rem);
  background-position: 50% 42%;
  background-size: cover;
  position: relative;
  isolation: isolate;
}

.main-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(103deg,
      rgba(13, 16, 29, 0.90) 0%,
      rgba(31, 37, 68, 0.74) 46%,
      rgba(31, 37, 68, 0.42) 100%);
}

.main-banner .container { align-items: flex-start; }

.main-banner h1,
.main-banner ._38px-white-title {
  font-size: var(--p-text-h1);
  letter-spacing: -0.024em;
  line-height: 1.05;
  margin-bottom: 0.35em;
}

/* Breadcrumb reads as quiet metadata, not as navigation competing with the title */
.breadcrumb-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--p-space-xs);
}
.breadcrumb-block a,
.breadcrumb-block div,
.breadcrumb-block span {
  font-family: var(--p-font-sans);
  font-size: var(--p-text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.breadcrumb-block a:hover { color: var(--p-gold-300); }

/* Content surfaces sit on the warm base — instant tonal depth */
.section > .container > *,
.hero-section { position: relative; }


/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */

/* Utility bar above the main nav */
.top-bar, [class*="top-bar"] {
  background-color: var(--p-ink-500);
  letter-spacing: 0.01em;
}

.navbar {
  background-color: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  padding: 28px 0;
  transition: padding var(--p-dur) var(--p-ease),
              background-color var(--p-dur) var(--p-ease),
              box-shadow var(--p-dur) var(--p-ease),
              border-color var(--p-dur) var(--p-ease);
}

/* Elevated state, applied by premium.js once the page scrolls */
.navbar.is-scrolled {
  padding: 16px 0;
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--p-border);
  box-shadow: var(--p-shadow-md);
}

.site-logo { transition: transform var(--p-dur) var(--p-ease); }
.navbar.is-scrolled .site-logo { transform: scale(0.94); transform-origin: left center; }

/* The 2026 logo artwork carries the NAAC/DST-FIST/NIRF accreditation line
   beneath the wordmark, so the wordmark itself is a much smaller fraction of
   the image than the old wordmark-only mark was. It needs to run a lot
   bigger — and the header a bit taller — for the college name to actually
   read at a glance. The wrapper's own max-width (a %-of-nav cap set by the
   Webflow stylesheet, 20% by default) is removed entirely — on narrow
   viewports that percentage is smaller than the px sizes below, so it was
   silently re-clipping the logo on phones even after this file set a
   bigger .site-logo max-width. Sizing is driven by .site-logo alone now. */
.site-logo { max-width: 400px; }
.site-logo-wrapper.w--current { max-width: none; }

/* Nav links — tracked, with an animated indicator that grows from the left */
.nav-link, .w-nav-link {
  font-family: var(--p-font-sans) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--p-ink-500);
  position: relative;
}

.nav-menu-list > .nav-link::after,
.nav-menu-list > .nav-link-dropdown-wrapper > .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1.5px;
  width: 100%;
  background-color: var(--p-gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--p-dur) var(--p-ease);
}
.nav-menu-list > .nav-link:hover::after,
.nav-menu-list > .nav-link-dropdown-wrapper:hover > .nav-link::after,
.nav-menu-list > .nav-link.w--current::after { transform: scaleX(1); }

.nav-link:hover, .w-nav-link:hover { color: var(--p-gold-700); }

/* Dropdown panels */
.mega-menu-dropdown, .w-dropdown-list, .dropdown-contents, .mega-nav-dropdown-contents {
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-shadow-xl);
  border: 1px solid var(--p-border);
  overflow: hidden;
}

.department-menu-block, .dropdown-with-icon {
  border-radius: var(--p-radius);
  transition: background-color var(--p-dur) var(--p-ease),
              transform var(--p-dur) var(--p-ease);
}
.department-menu-block:hover, .dropdown-with-icon:hover {
  background-color: var(--p-gold-50);
  transform: translateX(3px);
}

/* Department mega-menu: a themed icon badge stands in for the mismatched
   stock photography the template shipped with. Same footprint as the old
   image slot (120x96, via Webflow's own .deparment-image-120px rule), so
   the menu's layout is unaffected. */
.dept-icon-link {
  /* The old photo's height came from a class on the <img> itself, which no
     longer exists now that a span/svg sits here instead — restore it
     explicitly so the badge keeps the same footprint the menu was built for. */
  min-height: 96px;
  background: linear-gradient(155deg, var(--p-gold-50) 0%, var(--p-ink-50) 130%);
  border: 1px solid var(--p-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--p-dur) var(--p-ease),
              border-color var(--p-dur) var(--p-ease);
}

.dept-icon {
  display: flex;
  color: var(--p-gold-700);
  transition: color var(--p-dur) var(--p-ease), transform var(--p-dur) var(--p-ease);
}
.dept-icon svg { width: 34px; height: 34px; }

.department-menu-block:hover .dept-icon-link {
  background: linear-gradient(155deg, var(--p-gold-100) 0%, var(--p-gold-50) 130%);
  border-color: var(--p-gold-300);
}
.department-menu-block:hover .dept-icon {
  color: var(--p-ink-500);
  transform: scale(1.08);
}

@media (max-width: 767px) {
  .dept-icon svg { width: 28px; height: 28px; }
}


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.primary-button, .secondary-button, .w-button, .sncp-btn,
a[class*="button" i]:not([class*="icon" i]),
button[class*="button" i] {
  font-family: var(--p-font-sans) !important;
  font-weight: 600;
  border-radius: var(--p-radius);
  transition: background-color var(--p-dur) var(--p-ease),
              color var(--p-dur) var(--p-ease),
              border-color var(--p-dur) var(--p-ease),
              box-shadow var(--p-dur) var(--p-ease),
              transform var(--p-dur) var(--p-ease);
}

.primary-button {
  background-color: var(--p-ink-500);
  color: #fff;
  padding: 15px 26px;
  box-shadow: var(--p-shadow-sm);
}
.primary-button:hover {
  background-color: var(--p-ink-600);
  box-shadow: var(--p-shadow-lg);
  transform: translateY(-2px);
}
.primary-button:active { transform: translateY(0); box-shadow: var(--p-shadow-sm); }

.secondary-button {
  border: 1px solid var(--p-border-strong);
  background-color: transparent;
  color: var(--p-ink-500);
}
.secondary-button:hover {
  border-color: var(--p-ink-500);
  background-color: var(--p-ink-500);
  color: #fff;
  transform: translateY(-2px);
}

/* The arrow inside a button should lead the eye on hover */
.primary-button .icon,
.primary-button .animation-icon,
[class*="button"] .animation-icon {
  transition: transform var(--p-dur) var(--p-ease);
}
.primary-button:hover .icon,
.primary-button:hover .animation-icon,
[class*="button"]:hover .animation-icon { transform: translateX(4px); }


/* ==========================================================================
   7. CARDS & SURFACES
   ========================================================================== */

.team-card, .sncpl-card, .sncq-card, .event-list,
.blog-card, .course-card, .product-card {
  background-color: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-shadow-sm);
  overflow: hidden;
  transition: transform var(--p-dur) var(--p-ease),
              box-shadow var(--p-dur) var(--p-ease),
              border-color var(--p-dur) var(--p-ease);
}

.team-card:hover, .sncpl-card:hover, .sncq-card:hover, .event-list:hover,
.blog-card:hover, .course-card:hover, .product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--p-shadow-lg);
  border-color: var(--p-border-strong);
}

/* Portrait cards — a tighter, more editorial photo treatment */
.sncpl-photo, .sncq-photo, .team-card-image {
  border-radius: var(--p-radius);
  transition: transform var(--p-dur-slow) var(--p-ease);
}

.sncpl-name, .sncq-name {
  font-family: var(--p-font-display) !important;
  color: var(--p-ink-500);
  letter-spacing: -0.01em;
}
.sncpl-role, .sncq-role {
  color: var(--p-gold-700);
  font-size: var(--p-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.sncpl-org { color: var(--p-ink-300); font-size: var(--p-text-sm); }

/* Pull-quote mark */
.sncq-mark { color: var(--p-gold-300); }

/* Numbers deserve display treatment — they carry the institution's proof.
   !important because something upstream (Webflow's own responsive rules,
   most likely) was quietly capping these back down to body-text size. */
.animated-counter, [class*="counter"] {
  font-family: var(--p-font-display) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--p-ink-500);
}

/* The size briefly renders correctly, then visibly shrinks a moment later —
   that's not a size problem, it's something (Webflow's own IX2 runtime,
   most likely, since these elements carry its data-w-id attributes) still
   applying a leftover scale transform to these specific elements after our
   CSS has already painted. Killing transform/animation here outright means
   nothing can shrink it again after the fact, regardless of the source. */
.animated-counter,
.animated-counter ._70px-title,
._70px-title {
  transform: none !important;
  animation: none !important;
}

.animated-counter ._70px-title,
._70px-title {
  font-size: 90px !important; /* plain fallback first, for any renderer that doesn't understand clamp() */
  font-size: clamp(4.5rem, 2.5rem + 8vw, 8rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--p-gold-700) !important;
  display: block !important;
}

/* --- Course catalog ------------------------------------------------------
   The Courses page used to run on a stock "online course marketplace"
   template — fake instructor names, star ratings, $ prices, "7 Weeks"
   durations — for degree programmes that don't have any of those things.
   Replaced with a plain categorised list of the real programmes on offer. */
.course-catalog {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-3xl);
}

.course-category-title {
  font-size: var(--p-text-h3);
  margin-top: 0;
  margin-bottom: var(--p-space-lg);
  padding-bottom: var(--p-space-md);
  border-bottom: 1px solid var(--p-border);
}

.course-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--p-space-md);
}

.course-chip {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow-xs);
  padding: var(--p-space-md) var(--p-space-lg);
  font-family: var(--p-font-sans);
  font-weight: 500;
  color: var(--p-ink-500);
  line-height: 1.4;
  transition: box-shadow var(--p-dur) var(--p-ease), transform var(--p-dur) var(--p-ease), border-color var(--p-dur) var(--p-ease);
}
.course-chip:hover {
  box-shadow: var(--p-shadow-sm);
  border-color: var(--p-border-strong);
  transform: translateY(-2px);
}


/* ==========================================================================
   8. MEDIA
   ========================================================================== */

img { max-width: 100%; }

/* Gentle zoom on hover — the container clips, the image scales */
.scale-on-hover,
.event-list-thumbnail-wrapper,
.gallery-full-image,
.mega-image-wrapper {
  overflow: hidden;
  border-radius: var(--p-radius);
}
.scale-on-hover img,
.event-list-thumbnail-wrapper img,
.gallery-full-image img,
.mega-image-wrapper img {
  transition: transform var(--p-dur-slow) var(--p-ease-expo);
  will-change: transform;
}
.scale-on-hover:hover img,
.event-list-thumbnail-wrapper:hover img,
.gallery-full-image:hover img,
.mega-image-wrapper:hover img { transform: scale(1.05); }

/* --- Hero background video ---------------------------------------------
   Campus footage playing behind the hero, held almost entirely beneath a
   white veil so it registers as faint movement rather than as video. The
   section's existing background image stays as the fallback, so if the
   video never loads nothing looks broken. */
/* No overflow clipping here: the video is already bounded by inset:0, and
   several hero elements animate in from outside the section — clipping
   would cut those entrances short. */
.hero-section { position: relative; isolation: isolate; }

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  z-index: 0;
  pointer-events: none;
  /* Slightly desaturated so the footage's colour never competes with the
     palette, without draining it to a grey ghost */
  filter: saturate(0.75) contrast(1);
  opacity: 0;
  transition: opacity 1.2s var(--p-ease);
}
.hero-bg-video.is-playing { opacity: 1; }

/* The veil. Heavier on the left, where the headline and body copy sit, so
   text contrast never depends on which frame is on screen — but light
   enough overall that the footage actually reads as a moving video, not
   a watermark. */
.hero-bg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.68) 32%,
      rgba(255, 255, 255, 0.48) 58%,
      rgba(255, 255, 255, 0.38) 100%);
}

/* Hero content sits above both layers. */
.hero-section > .container { position: relative; z-index: 2; }

@media (max-width: 767px) {
  /* Stacked layout puts text over the full width, so veil evenly — still a
     little heavier than desktop since small screens have less room for
     contrast to spare, but light enough that the video still reads. */
  .hero-bg-veil {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 255, 255, 0.7) 55%,
      rgba(255, 255, 255, 0.6) 100%);
  }
}

/* --- "Where Excellence Meets Innovation": themed duotone photo ---------
   A true two-colour duotone (via the #theme-duotone SVG filter defined
   inline in index.html) rather than a sepia/hue-rotate approximation —
   shadows map exactly to the ink navy, highlights to the accent gold, so
   the photo reads as part of the palette instead of competing with it. */
.dept-duotone-image {
  filter: contrast(1.08) url(#theme-duotone);
}

/* --- Hero figure: Sree Narayana Guru ----------------------------------
   A transparent cut-out, not a photograph. It gets no card treatment —
   no radius, border, shadow or crop, all of which would read as a mistake
   on a figure with no edges. Instead it floats on a soft halo that keeps
   it from looking pasted onto the page. */
.hero-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
}

.hero-image-wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(78%, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(191, 147, 51, 0.17) 0%,
    rgba(191, 147, 51, 0.08) 45%,
    rgba(191, 147, 51, 0) 70%);
  z-index: -1;
  pointer-events: none;
}

.hero-guru-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(320px, 33vw, 500px);
  margin-inline: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  animation: p-guru-in 1s var(--p-ease-expo) 0.15s both;
}

@keyframes p-guru-in {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* --- "Glimpse" campus video feature -------------------------------------
   Replaces the old three-video block (a full-bleed background video with
   two smaller autoplay videos nested on top of it, each with a play/pause
   button that was wired to random campus photos instead of icons). One
   video, one honestly-sized card, no broken buttons. */
.glimpse-panel {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  background: var(--p-surface-subtle);
  border-radius: 32px;
  padding: clamp(1.75rem, 4vw, 4rem);
}

.glimpse-text { flex: 1 1 42%; min-width: 280px; }

.glimpse-kicker {
  font-family: var(--p-font-sans);
  font-size: var(--p-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--p-gold-700);
  margin-bottom: var(--p-space-sm);
}

.glimpse-text h2 { margin-top: 0; margin-bottom: var(--p-space-md); }
.glimpse-text p { color: var(--1-main-colors--paragraph); max-width: 46ch; }

/* Dashed rule with a centred dot — a quiet full stop under the copy */
.glimpse-divider {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: 1px;
  margin-top: var(--p-space-lg);
  background-image: linear-gradient(to right, var(--p-border-strong) 50%, transparent 0%);
  background-size: 9px 1px;
  background-repeat: repeat-x;
}
.glimpse-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-gold-400);
  transform: translate(-50%, -50%);
}

.glimpse-video-card {
  flex: 1 1 52%;
  min-width: 280px;
  aspect-ratio: 16 / 9; /* matches the source video exactly — no cropping */
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--p-shadow-xl);
  border: 1px solid var(--p-border);
  background: var(--p-ink-900); /* letterboxing never shows raw white */
}
.glimpse-video-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .glimpse-panel {
    flex-direction: column;
    padding: 1.75rem;
    border-radius: 24px;
    gap: 1.75rem;
  }
  .glimpse-text, .glimpse-video-card { width: 100%; min-width: 0; }
  .glimpse-divider { max-width: none; }
}


/* ==========================================================================
   9. FORMS
   ========================================================================== */

.w-input, .w-select, input[type="text"], input[type="email"],
input[type="tel"], input[type="search"], textarea, select {
  font-family: var(--p-font-sans);
  font-size: var(--p-text-body);
  color: var(--p-ink-500);
  background-color: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 13px 16px;
  transition: border-color var(--p-dur) var(--p-ease),
              box-shadow var(--p-dur) var(--p-ease),
              background-color var(--p-dur) var(--p-ease);
}

.w-input::placeholder, textarea::placeholder { color: var(--p-ink-200); }

.w-input:focus, .w-select:focus, textarea:focus, select:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus {
  outline: none;
  border-color: var(--p-gold-400);
  box-shadow: 0 0 0 3px rgba(191, 147, 51, 0.14);
}

label, .w-form-label {
  font-size: var(--p-text-sm);
  font-weight: 500;
  color: var(--p-ink-500);
  letter-spacing: 0.005em;
}

.w-form-done {
  background-color: var(--p-gold-50);
  border: 1px solid var(--p-gold-200);
  border-radius: var(--p-radius);
  color: var(--p-ink-500);
}
.w-form-fail { border-radius: var(--p-radius); }


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

/* The footer is two distinct pieces: a floating admissions CTA card, and the
   dark footer proper (which carries its own background image). Colouring the
   whole section would flatten the card into its surroundings. */
.cta-block {
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-shadow-xl);
  overflow: hidden;
}

/* Belt-and-suspenders for the phone numbers in the admissions card: some
   mobile browsers auto-invert colour on pages with no declared colour
   scheme (fixed properly via the <meta name="color-scheme"> tag in <head>),
   which can turn this white-text-on-navy block into invisible white-on-
   white. Forcing every value here means it can't happen regardless. */
.snc-adm-contact,
.snc-adm-contact b,
.snc-adm-contact a {
  background: transparent !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

.footer-black { color: var(--p-ink-100); }

.footer-title {
  font-family: var(--p-font-sans) !important;
  font-size: var(--p-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--p-gold-300);
}

.footer-link-white, .footer-black a {
  color: var(--p-ink-100);
  transition: color var(--p-dur) var(--p-ease);
}
.footer-link-white:hover, .footer-black a:hover { color: #fff; }

.footer-black h1, .footer-black h2, .footer-black h3,
.footer-black h4, .footer-black h5, .footer-black h6 { color: #fff; }

.social-icon-links-gray {
  border: 1px solid var(--p-border-light);
  border-radius: 50%;
  transition: background-color var(--p-dur) var(--p-ease),
              border-color var(--p-dur) var(--p-ease),
              transform var(--p-dur) var(--p-ease);
}
.social-icon-links-gray:hover {
  background-color: var(--p-gold-500);
  border-color: var(--p-gold-500);
  transform: translateY(-2px);
}


/* ==========================================================================
   11. MOTION & REVEAL
   --------------------------------------------------------------------------
   Applied by premium.js only to elements Webflow's IX2 does not control,
   so the two animation systems never fight over the same element.
   ========================================================================== */

[data-p-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.75s var(--p-ease-expo),
              transform 0.75s var(--p-ease-expo);
  transition-delay: var(--p-reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-p-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Once revealed, drop the compositor hint so long pages stay cheap */
[data-p-reveal].is-revealed.is-settled { will-change: auto; }


/* ==========================================================================
   12. ACCESSIBILITY
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--p-gold-600);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Respect the user's motion preference — non-negotiable */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-p-reveal] { opacity: 1 !important; transform: none !important; }
  .page-wrapper { animation: none; }
}


/* ==========================================================================
   13. RESPONSIVE REFINEMENT
   ========================================================================== */

/* --- Tablet ------------------------------------------------------------ */
@media (max-width: 991px) {
  :root { --p-section-y: clamp(3.5rem, 7vw, 5.5rem); }

  .navbar { padding: 18px 0; }
  .navbar.is-scrolled { padding: 12px 0; }

  /* The mobile panel is a destination, not a collapsed desktop menu */
  .navbar-menu.w-nav-menu,
  .w-nav-overlay .w-nav-menu {
    background-color: var(--p-surface);
    box-shadow: var(--p-shadow-xl);
    padding: var(--p-space-md) var(--p-space-lg) var(--p-space-2xl);
  }

  .navbar-menu .nav-menu-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Each row is a full-width, comfortably tappable target with a hairline
     separator — the pattern people expect from a native mobile menu. */
  .navbar-menu .nav-link,
  .navbar-menu .w-nav-link,
  .navbar-menu .w-dropdown-toggle {
    font-size: 0.9375rem;
    letter-spacing: 0.03em;
    text-transform: none;
    padding: 15px 2px;
    border-bottom: 1px solid var(--p-border);
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
  }

  .navbar-menu .nav-link-dropdown-wrapper { width: 100%; }
  .navbar-menu .nav-link::after { display: none; }

  /* Nested dropdown contents sit flush inside the panel rather than floating */
  .navbar-menu .w-dropdown-list {
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding-left: var(--p-space-xs);
  }

  .w-nav-button { border-radius: var(--p-radius); padding: 12px; }
}

/* --- Mobile ------------------------------------------------------------ */
@media (max-width: 767px) {
  :root {
    --p-section-y: clamp(3rem, 11vw, 4.25rem);
    --p-text-display: clamp(2.125rem, 1.1rem + 5vw, 2.875rem);
  }

  body { line-height: 1.68; }

  .container { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* Full-measure copy on small screens — ch limits fight the viewport */
  .hero-section p, .section p { max-width: none; }

  /* The template hides the hero visual entirely below 768px, which left the
     mobile hero as text alone. Bring the figure back, sized for the screen. */
  .hero-image-wrapper {
    display: flex;
    width: 100%;
    margin-top: var(--p-space-lg);
  }
  .hero-guru-image { max-height: min(46vh, 300px); }
  .hero-image-wrapper::before { width: min(86%, 300px); }

  /* Buttons become comfortable, thumb-sized targets */
  .primary-button, .secondary-button, .w-button {
    padding: 14px 22px;
    min-height: 48px;
  }

  /* Cards get a touch more breathing room now that they're full width */
  .team-card, .sncpl-card, .sncq-card, .event-list { border-radius: var(--p-radius); }

  /* Hover lifts are meaningless on touch — and cause sticky states */
  .team-card:hover, .sncpl-card:hover, .sncq-card:hover, .event-list:hover,
  .primary-button:hover, .secondary-button:hover { transform: none; }

  h1, h2 { text-wrap: balance; }

  .site-logo { max-width: 300px; }
}

/* --- Small phones ------------------------------------------------------ */
@media (max-width: 400px) {
  :root { --p-text-display: clamp(1.875rem, 1rem + 4.5vw, 2.25rem); }
  .container { padding-left: 1rem; padding-right: 1rem; }

  .site-logo { max-width: 220px; }
}

/* --- Large desktop — use the space, don't just stretch ------------------ */
@media (min-width: 1600px) {
  :root { --p-section-y: 9rem; }
  .container { max-width: 1360px; }
}

/* Coarse pointers: remove all hover-dependent transforms */
@media (hover: none) {
  .scale-on-hover:hover img,
  .event-list-thumbnail-wrapper:hover img,
  .gallery-full-image:hover img { transform: none; }
}