/* ==========================================================================
   Acharya — v2 PROTOTYPE stylesheet (minimalist / Apple-lane exploration)
   NOT part of the one-stylesheet production rule in Docs/DEVELOPER_BRIEF.md —
   this file exists only inside /new-site/v2/ for side-by-side comparison.
   If this direction is approved, its tokens fold back into site.css and this
   file is deleted. Mobile-first: base = 360–420px, min-width steps at
   480 / 768 / 1024 / 1440.
   ========================================================================== */

:root {
  /* Near-monochrome palette. Orange appears in exactly three places on this
     page: the CTA buttons, the duotone hero photo, and lit-up words in the
     scroll statement. Nowhere else. */
  --ink:        #0B0B0C;   /* body/headings on white, ~19.5:1 */
  --ink-soft:   #55565B;   /* secondary text on white, ~7.1:1 */
  --paper:      #FFFFFF;
  --paper-soft: #F4F4F2;
  --line:       #E4E4E1;
  --surface-dark: #0B0B0C;
  --on-dark:    #F4F4F2;
  --accent:     #F49323;   /* brand orange — CTAs + reveal moments only */
  --accent-dark:#9A5300;   /* orange text on white, 5.8:1 — same AA pair as production site.css */
  --accent-on-dark: #F8AC4F; /* 9.3:1 on dark, same as production site.css */
  --focus:      #1A56DB;

  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Bigger, fewer sizes than the production scale — Apple-style typographic
     confidence. Mobile-first values; scaled up at breakpoints below. */
  --text-hero: 2.4rem;
  --text-display: 1.9rem;
  --text-h2: 1.5rem;
  --text-body: 1.0625rem;
  --text-small: 0.9rem;

  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --header-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.v2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

.v2 img { max-width: 100%; height: auto; display: block; }
.v2 p { margin: 0 0 var(--space-4); color: var(--ink-soft); }
.v2 h1, .v2 h2, .v2 h3 { font-family: var(--font-head); line-height: 1.1; margin: 0; color: var(--ink); letter-spacing: -0.01em; }

/*.v2 a { color: var(--accent-dark); }*/
.v2 :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.v2-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ink); color: var(--on-dark); padding: var(--space-3) var(--space-4);
}
.v2-skip:focus { left: var(--space-3); top: var(--space-3); }

.v2-container { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-4); }

/* ---------- Prototype banner (internal use only, remove on approval) ---------- */
.v2-banner {
  background: var(--ink); color: var(--on-dark); text-align: center;
  font-size: var(--text-small); padding: var(--space-2) var(--space-4);
}
.v2-banner a { color: var(--accent-on-dark); }

/* ---------- Header ---------- */
.v2-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.v2-header.is-scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}
.v2-header .v2-container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.v2-header img { height: 20px; width: auto; }
.v2-nav-links { display: none; }
.v2-header nav ul { list-style: none; display: flex; gap: var(--space-6); margin: 0; padding: 0; }
.v2-header nav a { color: var(--ink); text-decoration: none; font-size: var(--text-small); }
.v2-header nav a:hover { color: var(--accent-dark); }

.v2-header-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 var(--space-4);
  border-radius: 999px; background: var(--ink); color: var(--on-dark) !important;
  text-decoration: none; font-size: var(--text-small); font-weight: 500;
}

.v2-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--ink);
}

/* ---------- Hero with duotone → colour scroll reveal ---------- */
.v2-hero {
  position: relative;
  height: 92vh;
  min-height: 480px;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.v2-hero-media { position: absolute; inset: 0; }
.v2-hero-media .hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%;
  opacity: 0;
}
.v2-hero-media .hero-slide.is-active {
  opacity: 1;
}
.v2-hero-media .v2-scrim {
  position: absolute; inset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero-media .hero-slide { transition: none; }
}

.v2-hero-content {
  position: relative; z-index: 2;
  padding: 0 var(--space-4) var(--space-8);
  color: var(--on-dark);
  width: 100%;
}
.v2-hero-content h1 {
  font-size: var(--text-hero);
  color: var(--on-dark);
  max-width: 14ch;
  margin-bottom: var(--space-4);
}
.v2-hero-content p {
  color: rgba(244,244,242,.88);
  max-width: 34ch;
  font-size: 1rem;
  margin-bottom: var(--space-6);
}
.v2-scroll-cue {
  position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%);
  color: rgba(244,244,242,.7); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
}
.v2-scroll-cue svg { animation: v2-bob 1.8s ease-in-out infinite; }
@keyframes v2-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- Buttons ---------- */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-6);
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: var(--text-body);
  border: 1px solid transparent; transition: transform .15s ease, background .15s ease;
}
.v2-btn-primary { background: var(--accent); color: #1A1200; }
.v2-btn-primary:hover { background: #FFA83D; }
.v2-btn-ghost-on-dark { border-color: rgba(244,244,242,.55); color: var(--on-dark); }
.v2-btn-ghost-on-dark:hover { border-color: var(--on-dark); background: rgba(244,244,242,.08); }
.v2-btn-ghost { border-color: var(--line); color: var(--ink); }
.v2-btn-ghost:hover { border-color: var(--ink); }
.v2-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Sticky word-reveal statement ---------- */
.v2-statement-wrap { position: relative; height: 220vh; background: var(--paper); }
.v2-statement-pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--space-5);
}
.v2-statement {
  max-width: 20ch; text-align: center;
  font-family: var(--font-head);
  font-size: var(--text-display);
  line-height: 1.3;
}
.v2-statement .word { opacity: .16; transition: opacity .2s linear; }
.v2-statement .word.is-lit { opacity: 1; }
.v2-statement .word.is-accent.is-lit { color: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) {
  .v2-statement-wrap { height: auto; padding: var(--space-9) 0; }
  .v2-statement-pin { position: static; height: auto; }
  .v2-statement .word { opacity: 1; }
  .v2-statement .word.is-accent { color: var(--accent-dark); }
}

/* ---------- Reveal-on-scroll (fade + rise) ---------- */
.v2-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.v2-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .v2-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Section rhythm ---------- */
.v2-section { padding: var(--space-9) 0; }
.v2-section-dark { background: var(--surface-dark); color: var(--on-dark); }
.v2-section-dark h2, .v2-section-dark p { color: var(--on-dark); }
.v2-kicker {
  display: block; font-size: var(--text-small); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-3);
}
.v2-section-dark .v2-kicker { color: rgba(244,244,242,.6); }
.v2-section-head { max-width: none; margin-bottom: var(--space-7); }
.v2-section-head h2 {
  font-size: var(--text-display);
  margin-bottom: var(--space-3);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* ---------- Institution minimal grid ---------- */
.v2-inst-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.v2-inst-card {
  position: relative; background: var(--paper); aspect-ratio: 2/3; overflow: hidden;
  text-decoration: none; display: flex; align-items: flex-end;
}
.v2-inst-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .3s ease, transform .4s ease; }
.v2-inst-card:hover img, .v2-inst-card:focus-visible img { filter: grayscale(0); transform: scale(1.04); }
.v2-inst-card .v2-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,12,.75), rgba(11,11,12,0) 60%);}
.v2-inst-card span { position: relative; z-index: 1; color: var(--on-dark); padding: var(--space-4); font-family: var(--font-head); font-size: .95rem; }

.v2 .site-header {
  height: auto;
  min-height: 0;
  background: var(--paper);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.v2 .site-header .container {
  max-width: none;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto;
  grid-template-rows: 68px auto;
  align-items: center;
  gap: 0;
}
.v2 .site-header .site-logo {
  grid-column: 1;
  grid-row: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding-left: clamp(20px, 4vw, 56px);
}
.v2 .site-header .site-logo img {
  display: block;
  width: 168px;
  height: 24px;
  max-width: none;
}
.v2 .header-contact-tools {
  position: absolute;
  top: 0;
  right: 112px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: .78rem;
  white-space: nowrap;
}
.v2 .header-contact-tools a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 16px;
}
.v2 .header-contact-tools a:hover { color: var(--accent-dark); }
.v2 .header-contact-tools .header-hotline {
  display: block;
  flex: 0 1 auto;
}
.v2 .header-contact-tools .header-hotline img {
  display: block;
  width: auto;
  height: 35px;
  max-width: min(42vw, 360px);
}
.v2 .header-contact-tools i { margin-right: 4px; }
.v2 .site-header .site-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  width: 100%;
  padding: 3px clamp(16px, 3vw, 44px);
  background: #0B0B0C;
}
.v2 .site-nav > ul { gap: 4px; }
.v2 .site-nav > ul > li > a,
.v2 .site-nav > ul > li > details > summary {
  color: #fff;
  border-radius: 8px;
}
.v2 .site-nav > ul > li > a:hover,
.v2 .site-nav > ul > li > details > summary:hover,
.v2 .site-nav > ul > li > details[open] > summary {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.v2 .site-nav .nav-home a { padding-inline: 14px; }
.v2 .site-nav .nav-home i { font-size: .9rem; }
.v2 .site-nav .nav-events { margin-left: auto; }
.v2 .site-nav .nav-events a { padding-inline: 14px; }
.v2 .site-nav .nav-events i { margin-right: 6px; }
.v2 .site-nav details ul {
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(11,11,12,.18);
}
.v2 .site-nav details ul a { color: var(--ink); }
.v2 .site-nav details ul a:hover { background: var(--paper-soft); color: var(--accent-dark); }
.v2 .site-nav > ul > li > a,
.v2 .site-nav > ul > li > details > summary { font-size: .82rem; font-weight: 500; }
.v2 .site-nav .nav-cta { margin-left: 8px; }
.v2 .site-nav .nav-cta .btn { width: auto; min-height: 40px; padding-inline: 18px; background: #fff; color: #223983; border:2px solid #fff;}
.v2 .site-nav .nav-cta .btn:hover { background: #F49323; }
.v2 .site-header .search-toggle,
.v2 .site-header .nav-toggle {
  position: absolute;
  top: 12px;
  right: 16px;
}
.v2 .site-header .search-toggle { right: 60px; }
.v2 .site-header .nav-toggle { z-index: 2; }
.v2 .highlight1 { color: var(--accent-on-dark); }
.v2 .section-actions { margin-top: var(--space-6); }
.v2 .stats { background: #f5f5f7 !important; color: var(--on-dark); }
.v2 .stats .stat { border-color: rgba(244,244,242,.16); }
.v2 .stats .stat b { color: var(--accent-on-dark); font-family: var(--font-head); }
.v2 .stats .stat span { color: rgba(244,244,242,.72); }

/* ---------- AIT admissions banner ---------- */
/* The CRM registration form is taller than the banner artwork, so the widget
   sits in normal flow (not absolute) and the section grows to fit it. The
   artwork is pinned to the top at full width; the page background continues
   beneath it. */
.ait-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(500px, 33vw));
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: clamp(520px, 43vw, 700px);
  /* Apply buttons on this page link to #applynow; keep the form clear of the sticky header. */
  scroll-margin-top: var(--header-h, 72px);
  padding: clamp(16px, 5vh, 56px) clamp(16px, 2vw, 32px) clamp(24px, 4vh, 48px);
  background-color: #f4f4f2;
  background-image:
    url("../img/institutions/ait.webp");
  background-position: 0 0, left top;
  background-size: 100% 100%, 72% auto;
  background-repeat: no-repeat;
  overflow: hidden;
}
.ait-banner-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-width: 0;
  grid-column: 2;
  justify-self: end;
  overflow: hidden;
}
.ait-banner-widget .lsq-portal-widget,
.ait-banner-widget .acharya-register,
.ait-banner-widget [data-acharya-register-inline],
.ait-banner-widget iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* ---------- AIGS admissions banner ---------- */
/* Same layout as .ait-banner: the CRM form is taller than the artwork, so the
   widget sits in normal flow and the section grows to fit it. */
.aigs-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(500px, 33vw));
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: clamp(520px, 43vw, 700px);
  /* Apply buttons on this page link to #applynow; keep the form clear of the sticky header. */
  scroll-margin-top: var(--header-h, 72px);
  padding: clamp(16px, 5vh, 56px) clamp(16px, 2vw, 32px) clamp(24px, 4vh, 48px);
  background-color: #f4f4f2;
  background-image:
    url("../img/institutions/aigs.webp");
  background-position: 0 0, left top;
  background-size: 100% 100%, 72% auto;
  background-repeat: no-repeat;
  overflow: hidden;
}
.aigs-banner-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-width: 0;
  grid-column: 2;
  justify-self: end;
  overflow: hidden;
}
.aigs-banner-widget .lsq-portal-widget,
.aigs-banner-widget .acharya-register,
.aigs-banner-widget [data-acharya-register-inline],
.aigs-banner-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}

/* Same layout as .ait-banner. The ASD artwork's text reaches ~63% of the image and
   its bottom edge is white, so it is drawn at 92% width on a white section and fades
   to white where the form sits. */
.asd-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(500px, 33vw));
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: clamp(520px, 43vw, 700px);
  /* Apply buttons on this page link to #applynow; keep the form clear of the sticky header. */
  scroll-margin-top: var(--header-h, 72px);
  padding: clamp(16px, 5vh, 56px) clamp(16px, 2vw, 32px) clamp(24px, 4vh, 48px);
  background-color: #f4f4f2;
  background-image:
    url("../img/institutions/asd.webp");
  background-position: 0 0, left top;
  background-size: 100% 100%, 72% auto;
  background-repeat: no-repeat;
  overflow: hidden;
}
.asd-banner-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-width: 0;
  grid-column: 2;
  justify-self: end;
  overflow: hidden;
}
.asd-banner-widget .lsq-portal-widget,
.asd-banner-widget .acharya-register,
.asd-banner-widget [data-acharya-register-inline],
.asd-banner-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}
/* ---------- anrip admissions banner ---------- */
/* Same layout as .anrvsa-banner: heading spans ~72% of the artwork, so it is drawn at
   80% width and fades into the section colour where the form sits. */
.anrip-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(500px, 33vw));
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: clamp(520px, 43vw, 700px);
  /* Apply buttons on this page link to #applynow; keep the form clear of the sticky header. */
  scroll-margin-top: var(--header-h, 72px);
  padding: clamp(16px, 5vh, 56px) clamp(16px, 2vw, 32px) clamp(24px, 4vh, 48px);
  background-color: #f4f4f2;
  background-image:
    url("../img/institutions/anrip.webp");
  background-position: 0 0, left top;
  background-size: 100% 100%, 72% auto;
  background-repeat: no-repeat;
  overflow: hidden;
}
.anrip-banner-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-width: 0;
  grid-column: 2;
  justify-self: end;
  overflow: hidden;
}
.anrip-banner-widget .lsq-portal-widget,
.anrip-banner-widget .acharya-register,
.anrip-banner-widget [data-acharya-register-inline],
.anrip-banner-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}
/* ---------- Polytechnic admissions banner ---------- */
/* Same layout as .anrvsa-banner: heading spans ~69% of the artwork, so it is drawn at
   80% width and fades into the section colour where the form sits. */
.apt-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(500px, 33vw));
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: clamp(520px, 43vw, 700px);
  /* Apply buttons on this page link to #applynow; keep the form clear of the sticky header. */
  scroll-margin-top: var(--header-h, 72px);
  padding: clamp(16px, 5vh, 56px) clamp(16px, 2vw, 32px) clamp(24px, 4vh, 48px);
  background-color: #f4f4f2;
  background-image:
    url("../img/institutions/apt.webp");
  background-position: 0 0, left top;
  background-size: 100% 100%, 72% auto;
  background-repeat: no-repeat;
  overflow: hidden;
}
.apt-banner-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-width: 0;
  grid-column: 2;
  justify-self: end;
  overflow: hidden;
}
.apt-banner-widget .lsq-portal-widget,
.apt-banner-widget .acharya-register,
.apt-banner-widget [data-acharya-register-inline],
.apt-banner-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}
/* ---------- anrvsa admissions banner ---------- */
/* Same layout as .ait-banner / .aigs-banner. The heading spans ~72% of the artwork,
   so the artwork is drawn at 80% width and fades into the section colour. */
.anrvsa-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(500px, 33vw));
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: clamp(520px, 43vw, 700px);
  /* Apply buttons on this page link to #applynow; keep the form clear of the sticky header. */
  scroll-margin-top: var(--header-h, 72px);
  padding: clamp(16px, 5vh, 56px) clamp(16px, 2vw, 32px) clamp(24px, 4vh, 48px);
  background-color: #f4f4f2;
  background-image:
    url("../img/institutions/anrvsa.webp");
  background-position: 0 0, left top;
  background-size: 100% 100%, 72% auto;
  background-repeat: no-repeat;
  overflow: hidden;
}
.anrvsa-banner-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-width: 0;
  grid-column: 2;
  justify-self: end;
  overflow: hidden;
}
.anrvsa-banner-widget .lsq-portal-widget,
.anrvsa-banner-widget .acharya-register,
.anrvsa-banner-widget [data-acharya-register-inline],
.anrvsa-banner-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}
/* ---------- Pharmacy admissions banner ---------- */
/* Same layout as .anrvsa-banner: heading spans ~71% of the artwork, so it is drawn at
   80% width and fades into the section colour where the form sits. */
.pharmacy-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(500px, 33vw));
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: clamp(520px, 43vw, 700px);
  /* Apply buttons on this page link to #applynow; keep the form clear of the sticky header. */
  scroll-margin-top: var(--header-h, 72px);
  padding: clamp(16px, 5vh, 56px) clamp(16px, 2vw, 32px) clamp(24px, 4vh, 48px);
  background-color: #f4f4f2;
  background-image:
    url("../img/institutions/pharmacy.webp");
  background-position: 0 0, left top;
  background-size: 100% 100%, 72% auto;
  background-repeat: no-repeat;
  overflow: hidden;
}
.pharmacy-banner-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-width: 0;
  grid-column: 2;
  justify-self: end;
  overflow: hidden;
}
.pharmacy-banner-widget .lsq-portal-widget,
.pharmacy-banner-widget .acharya-register,
.pharmacy-banner-widget [data-acharya-register-inline],
.pharmacy-banner-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}
/* ---------- sncn admissions banner ---------- */
/* Same layout as .anrvsa-banner: heading spans ~71% of the artwork, so it is drawn at
   80% width and fades into the section colour where the form sits. */
.sncn-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(500px, 33vw));
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: clamp(520px, 43vw, 700px);
  /* Apply buttons on this page link to #applynow; keep the form clear of the sticky header. */
  scroll-margin-top: var(--header-h, 72px);
  padding: clamp(16px, 5vh, 56px) clamp(16px, 2vw, 32px) clamp(24px, 4vh, 48px);
  background-color: #f4f4f2;
  background-image:
    url("../img/institutions/sncn.webp");
  background-position: 0 0, left top;
  background-size: 100% 100%, 72% auto;
  background-repeat: no-repeat;
  overflow: hidden;
}
.sncn-banner-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-width: 0;
  grid-column: 2;
  justify-self: end;
  overflow: hidden;
}
.sncn-banner-widget .lsq-portal-widget,
.sncn-banner-widget .acharya-register,
.sncn-banner-widget [data-acharya-register-inline],
.sncn-banner-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}
/* ---------- snsn admissions banner ---------- */
.snsn-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(500px, 33vw));
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: clamp(520px, 43vw, 700px);
  /* Apply buttons on this page link to #applynow; keep the form clear of the sticky header. */
  scroll-margin-top: var(--header-h, 72px);
  padding: clamp(16px, 5vh, 56px) clamp(16px, 2vw, 32px) clamp(24px, 4vh, 48px);
  background-color: #f4f4f2;
  background-image:
    url("../img/institutions/snsn.webp");
  background-position: 0 0, left top;
  background-size: 100% 100%, 72% auto;
  background-repeat: no-repeat;
  overflow: hidden;

}
.snsn-banner-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-width: 0;
  grid-column: 2;
  justify-self: end;
  overflow: hidden;
}
.snsn-banner-widget .lsq-portal-widget,
.snsn-banner-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}
/* ---------- AIAHS admissions banner ---------- */
/* Same layout as .anrvsa-banner: heading spans ~72% of the artwork, so it is drawn at
   80% width and fades into the section colour where the form sits. */
.aiahs-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(500px, 33vw));
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: clamp(520px, 43vw, 700px);
  /* Apply buttons on this page link to #applynow; keep the form clear of the sticky header. */
  scroll-margin-top: var(--header-h, 72px);
  padding: clamp(16px, 5vh, 56px) clamp(16px, 2vw, 32px) clamp(24px, 4vh, 48px);
  background-color: #f4f4f2;
  background-image:
    url("../img/institutions/aiahs.webp");
  background-position: 0 0, left top;
  background-size: 100% 100%, 72% auto;
  background-repeat: no-repeat;
  overflow: hidden;
}
.aiahs-banner-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-width: 0;
  grid-column: 2;
  justify-self: end;
  overflow: hidden;
}
.aiahs-banner-widget .lsq-portal-widget,
.aiahs-banner-widget .acharya-register,
.aiahs-banner-widget [data-acharya-register-inline],
.aiahs-banner-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}

/* Wide course banners contain their own artwork and text. Preserve the full
   composition instead of applying the standard tall hero crop. */
.ait-course-banner {
  width: 100%;
  overflow: hidden;
  background: #111;
}
.ait-course-banner .hero-media {
  width: 100%;
}
.ait-course-banner .hero-media img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
}

@media (max-width: 767px) {
  .ait-banner {
    display: block;
    min-height: 0;
    padding: 446px 16px 24px;
    background-size: auto 430px;
    background-position: center top;
    background-color: #fff;
  }
  .ait-banner-widget {
    width: 100%;
  }
  .aigs-banner {
    display: block;
    min-height: 0;
    padding: 446px 16px 24px;
    background-image: url("../img/institutions/aigs.webp");
    background-size: auto 430px;
    background-position: center top;
    background-color: #fff;
  }
  .aigs-banner-widget {
    width: 100%;
  }
  .anrvsa-banner {
    display: block;
    min-height: 0;
    padding: 446px 16px 24px;
    background-image: url("../img/institutions/anrvsa.webp");
    background-size: auto 430px;
    background-position: center top;
    background-color: #fff;
  }
  .anrvsa-banner-widget {
    width: 100%;
  }
  .asd-banner {
    display: block;
    min-height: 0;
    padding: 446px 16px 24px;
    background-image: url("../img/institutions/asd.webp");
    background-size: auto 430px;
    background-position: center top;
    background-color: #fff;
  }
  .asd-banner-widget {
    width: 100%;
  }
  .aiahs-banner {
    display: block;
    min-height: 0;
    padding: 446px 16px 24px;
    background-image: url("../img/institutions/aiahs.webp");
    background-size: auto 430px;
    background-position: center top;
    background-color: #fff;
  }
  .aiahs-banner-widget {
    width: 100%;
  }
  .anrip-banner {
    display: block;
    min-height: 0;
    padding: 446px 16px 24px;
    background-image: url("../img/institutions/physio.webp");
    background-size: auto 430px;
    background-position: center top;
    background-color: #fff;
  }
  .anrip-banner-widget {
    width: 100%;
  }
  .pharmacy-banner {
    display: block;
    min-height: 0;
    padding: 446px 16px 24px;
    background-image: url("../img/institutions/pharmacy.webp");
    background-size: auto 430px;
    background-position: center top;
    background-color: #fff;
  }
  .pharmacy-banner-widget {
    width: 100%;
  }
  .sncn-banner {
    display: block;
    min-height: 0;
    padding: 446px 16px 24px;
    background-image: url("../img/institutions/scsn.webp");
    background-size: auto 430px;
    background-position: center top;
    background-color: #fff;
  }
  .sncn-banner-widget {
    width: 100%;
  }
  .apt-banner {
    display: block;
    min-height: 0;
    padding: 446px 16px 24px;
    background-image: url("../img/institutions/poly.webp");
    background-size: auto 430px;
    background-position: center top;
    background-color: #fff;
  }
  .apt-banner-widget {
    width: 100%;
  }
  .ait-course-banner .hero-media {
    height: clamp(180px, 48vw, 300px);
  }
  .ait-course-banner .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
  }
}

/* ---------- Compact experience index ---------- */
#inst-details {
  padding: 72px 0 88px !important;
  background: var(--paper-soft);
}
#inst-details .container { max-width: 1320px; }
#inst-details .row { margin-bottom: 28px; }
#inst-details .heading-2 {
  margin: 0;
  padding: 0 !important;
  color: var(--ink);
  font: 700 clamp(2rem, 4vw, 3.75rem)/1 var(--font-head);
  letter-spacing: -.04em;
}
#inst-details .experience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
#inst-details .grid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 178px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#inst-details .grid-item:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 14px 30px rgba(11,11,12,.1);
}
#inst-details .overlay,
#inst-details .content {
  position: static;
  width: auto;
  height: auto;
}
#inst-details .overlay { flex: 1; padding: 22px 22px 20px; }
#inst-details .content { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
#inst-details .grid-item h5 {
  position: absolute;
  top: 210px;
  left: 22px;
  right: 22px;
  z-index: 2;
  margin: 0;
  color: #fff;
  font: 500 1.55rem/1.1 var(--font-head);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
#inst-details .grid-item p {
  display: -webkit-box;
  margin: 0 0 17px;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
#inst-details .grid-item .btn {
  min-height: 0;
  margin-top: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  font: 600 .78rem/1 var(--font-body);
  text-decoration: none;
}
#inst-details .grid-item .btn::after { content: "  ->"; }
#inst-details .grid-item .btn:hover { color: var(--ink); }
#inst-details .grid-item > img {
  width: 100%;
  height: 250px;
  flex: 0 0 250px;
  object-fit: cover;
  filter: saturate(.8);
  border-top: 1px solid var(--line);
  transition: filter .25s ease, transform .35s ease;
}
#inst-details .grid-item:hover > img { filter: saturate(1.1); transform: scale(1.03); }

@media (max-width: 767px) {
  .v2 .site-header .site-nav { top: 68px; }
  #inst-details { padding: 52px 0 64px !important; }
  #inst-details .experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #inst-details .grid-item { min-height: 165px; }
  #inst-details .overlay { padding: 16px; }
  #inst-details .grid-item h5 {
    top: 155px;
    left: 16px;
    right: 16px;
    font-size: 1.2rem;
  }
  #inst-details .grid-item p { font-size: .8rem; -webkit-line-clamp: 4; }
  #inst-details .grid-item > img { height: 190px; flex-basis: 190px; }
}

@media (max-width: 480px) {
  #inst-details .experience-grid { grid-template-columns: 1fr; }
}

/* ---------- Campus-life vertical story ---------- */
.v2-story-item { display: grid; gap: var(--space-4); align-items: center; margin-bottom: var(--space-8); }
.v2-story-item img { border-radius: 16px; aspect-ratio: 4/3; object-fit: cover; }
.v2-story-item h3 { font-size: var(--text-h2); margin-bottom: var(--space-2); }
.v2-story-item:last-child { margin-bottom: 0; }

/* ---------- Habba feature section ---------- */
#habba .habba-layout,
#hostels .habba-layout {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
#habba .habba-copy,
#hostels .habba-copy {
  min-width: 0;
}
#habba .habba-copy > p,
#hostels .habba-copy > p {
  margin-bottom: var(--space-5);
}
#habba .habba-media,
#hostels .habba-media {
  overflow: hidden;
  border-radius: 10px;
}
#habba .habba-media img,
#hostels .habba-media img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  filter: grayscale(1);
}

@media (min-width: 768px) {
  #habba .habba-layout,
  #hostels .habba-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
  }
}

/* ---------- Closing CTA ---------- */
.v2-closing { text-align: center; }
.v2-closing h2 { font-size: var(--text-display); max-width: 16ch; margin: 0 auto var(--space-6); }
.v2-closing .v2-hero-actions { justify-content: center; }

/* ---------- Footer ---------- */
.v2-footer { border-top: 1px solid var(--line); padding: var(--space-7) 0; }
.v2-footer .v2-container { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-small); color: var(--ink-soft); }
.v2-footer a { color: var(--ink-soft); }
.v2-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.v2-back-link { display: inline-block; margin-top: var(--space-2); font-weight: 600; color: var(--accent-dark); }

/* ---------- Floating single CTA (mobile thumb reach) ---------- */
.v2-float-cta {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 90;
  min-height: 48px; padding: 0 var(--space-5);
  border-radius: 999px; background: var(--ink); color: var(--on-dark);
  display: inline-flex; align-items: center; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.v2-float-cta:hover { background: #000; }

/* =========================== Breakpoints =========================== */
@media (min-width: 480px) {
  :root { --text-hero: 2.8rem; --text-display: 2.1rem; }
}

@media (min-width: 768px) {
  :root {
    --text-hero: 3.6rem; --text-display: 2.5rem; --text-h2: 1.75rem;
  }
  .v2-nav-links { display: block; }
  .v2-menu-btn { display: none; }
  .v2-hero-content p { font-size: 1.125rem; }
  .v2-inst-grid { grid-template-columns: repeat(3, 1fr); }
  .v2-story-item { grid-template-columns: 1fr 1fr; }
  .v2-story-item:nth-child(even) .v2-story-media { order: 2; }
}

@media (min-width: 1024px) {
  :root { --text-hero: 4.4rem; --text-display: 3rem; }
  .v2-inst-grid { grid-template-columns: repeat(4, 1fr); }
  .v2-hero-content { padding-bottom: var(--space-9); }
}

@media (min-width: 1440px) {
  .v2-container { max-width: 1320px; }
}

/* colour */
.v2-inst-card img{
    filter: grayscale(100%);
    transition: filter .6s ease;
}
.v2-inst-card.active img{
    filter: grayscale(0%);
}

/* Acharya Happenings carousel controls */
.v2 #carouselExampleIndicators2 {
  margin-inline: 24px;
}
.v2 #carouselExampleIndicators2 .carousel-control-prev,
.v2 #carouselExampleIndicators2 .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #2f3032;
  opacity: 1;
  z-index: 3;
}
.v2 #carouselExampleIndicators2 .carousel-control-prev { left: -22px; }
.v2 #carouselExampleIndicators2 .carousel-control-next { right: -22px; }
.v2 #carouselExampleIndicators2 .carousel-control-prev-icon,
.v2 #carouselExampleIndicators2 .carousel-control-next-icon {
  width: 18px;
  height: 18px;
  background-size: 100% 100%;
}
.v2 #carouselExampleIndicators2 .carousel-control-prev:hover,
.v2 #carouselExampleIndicators2 .carousel-control-next:hover {
  background: #111214;
}

/* Desktop */
@media (min-width:768px) {
    .v2-inst-card:hover img {
        filter: grayscale(0);
    }
}
/* Mobile */
@media (max-width:767px) {
  .v2 .header-contact-tools { display: none; }
  .v2 #carouselExampleIndicators2 {
    margin-inline: 8px;
  }
  .v2 #carouselExampleIndicators2 .carousel-control-prev { left: 8px; }
  .v2 #carouselExampleIndicators2 .carousel-control-next { right: 8px; }
    .v2-inst-card.active img {
        filter: grayscale(0);
    }
}