::selection {
  background: var(--yellow);
  color: var(--ink);
}
.wrap {
  max-width: 1512px;
  margin: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: clamp(72px, 8vw, 130px);
}
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.7;
  margin-bottom: 20px;
}
.muted {
  color: var(--muted);
}
.green {
  color: var(--green-dark);
}
.on-dark {
  color: var(--cream);
  background: var(--forest);
}
.on-dark p {
  color: #e0e8dc;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 25px;
  min-height: 50px;
  border: 1px solid transparent;
  background: var(--green-dark);
  color: white;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.btn:hover {
  background: #236e2a;
  transform: translateY(-3px);
  box-shadow: 0 9px 24px #173d311c;
}
.btn.light {
  background: var(--cream);
  color: var(--forest);
}
.btn.outline {
  border-color: #ffffff85;
  background: transparent;
}
.btn.outline:hover {
  background: #ffffff15;
}
.karachi .text-link{
  display: block;
}
.karachi .journey-card{
  background: transparent;
}


.text-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-block: 7px;
  line-height: 1.6;
  display: none;
}
.text-link svg,
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.25s;
}
.text-link:hover svg,
.btn:hover svg {
  transform: translateX(4px);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
}
.skip {
  position: fixed;
  left: 20px;
  top: -100px;
  z-index: 200;
  background: var(--yellow);
  padding: 12px 22px;
}
.skip:focus {
  top: 12px;
}



main {
  padding-top: var(--header);
}
.hero {
  height: calc(100svh - var(--header));
  min-height: 650px;
  max-height: 1000px;
  position: relative;
  overflow: hidden;
  color: var(--cream);
  background: var(--forest);
      margin-top: 70px;

}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



.hero-slides,
.hero-shade {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center 46%;
  opacity: 0;
  transition: opacity 1.2s;
  transform: scale(1.02);
}
.hero-slide.active {
  opacity: 1;
  animation: cinema 22s ease-in-out infinite alternate;
}
.hero-shade {
  background: linear-gradient(
      90deg,
      rgba(7, 26, 18, 0.8) 0%,
      rgba(7, 26, 18, 0.63) 39%,
      rgba(7, 26, 18, 0.13) 75%,
      rgba(7, 26, 18, 0.12)
    ),
    linear-gradient(0deg, #09221838, transparent 40%);
}
.hero-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 55px;
  padding-top: 40px;
}
.hero h1 {
  max-width: 900px;
  position: relative;
  z-index: 2;
}
.hero h1 span {
  display: block;
}
.hero h1 .hero-line {
  overflow: hidden;
}
.hero h1 .hero-line > span {
  animation: hero-in 1s var(--ease) both;
}
.hero h1 .hero-line:nth-child(2) > span {
  animation-delay: 0.13s;
}
.hero h1 .hero-line:nth-child(3) > span {
  animation-delay: 0.26s;
}
.hero h1 .small-opening {
  font-size: 0.44em;
  letter-spacing: -0.025em;
  line-height: 1.4;
  margin-bottom: 12px;
  font-weight: 400;
}
.hero-sub {
  font-size: clamp(15px, 1.3vw, 18px);
  max-width: 480px;
  margin-top: 24px;
  color: #f2f1e7;
  animation: fade-up 0.9s 0.5s both;
}
.hero .actions {
  animation: fade-up 0.9s 0.7s both;
}
.hero .btn {
  background: var(--green);
  color: #082a12;
}
.hero .btn:hover {
  background: #60c858;
}
.hero .btn.outline {
  background: transparent;
  color: var(--cream);
}
.hero-foot {
  position: absolute;
  bottom: 35px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.scroll-cue svg {
  width: 18px;
  height: 28px;
  animation: nudge 2.4s ease-in-out infinite;
}
.hero-controls {
  display: flex;
  gap: 10px;
  margin-right: 36px;
}
.hero-dot {
  width: 46px;
  height: 32px;
  border: 0;
  background: transparent;
  position: relative;
  padding: 0;
}
.hero-dot:after {
  content: "";
  height: 2px;
  background: #ffffff70;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  transition: background 0.3s;
}
.hero-dot[aria-pressed="true"]:after {
  background: var(--yellow);
}
.hero-arc {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: clamp(70px, 15vw, 250px);
  height: clamp(70px, 15vw, 250px);
  border-radius: 100% 0 0 0;
  background: var(--cream);
  transform: translateY(var(--arc-y, 0));
  transform-origin: bottom right;
  pointer-events: none;
}
.hero-bird {
  position: absolute;
  right: 8%;
  top: 15%;
  width: clamp(64px, 8vw, 125px);
  z-index: 2;
  animation: hover-bird 3.8s ease-in-out infinite;
  filter: drop-shadow(0 10px 14px #0003);
}
.intro-top {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 10%;
  align-items: start;
}
.intro-top h2 {
  max-width: 520px;
}
.intro-copy {
  font-size: 17px;
  color: var(--muted);
}
.belief {
  margin-top: 65px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
  font-size: clamp(24px, 3.1vw, 46px);
  line-height: 1.45;
  letter-spacing: -0.035em;
  max-width: 1150px;
}
.belief span {
  transition: color 0.2s;
}
.belief .read-word {
  color: #b2b8a8;
}
.belief .read-word.lit {
  color: var(--green-dark);
}

.beliefabout {
  margin-top: 65px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
  font-size: clamp(24px, 3.1vw, 46px);
  line-height: 1.45;
  letter-spacing: -0.035em;
  max-width: 1150px;
}
.beliefabout span {
  transition: color 0.2s;
}
.beliefabout .read-word {
  color: #b2b8a8;
}
.beliefabout .read-word.lit {
  color: var(--green-dark);
}
.philosophy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 720px;
}
.philosophy-photo {
  overflow: hidden;
  position: relative;
  min-height: 600px;
  border-top-left-radius: 44%;
  background: #cbd4b7;
}
.philosophy-photo img {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translateY(var(--photo-y, 0));
  will-change: transform;
}
.philosophy-copy {
  padding: clamp(44px, 5.6vw, 92px);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.philosophy-copy h2 {
  font-size: clamp(33px, 3.25vw, 52px);
  max-width: 600px;
  margin-bottom: 27px;
}
.philosophy-copy .eyebrow {
  color: var(--yellow);
}
.philosophy-copy p {
  font-size: 15px;
  line-height: 1.8;
}
.philosophy-copy p + p {
  margin-top: 17px;
}
.philosophy-copy .text-link {
  align-self: flex-start;
  margin-top: 24px;
  color: var(--cream);
}
.flight-section {
  position: relative;
  height: 215vh;
  min-height: 1250px;
}
.flight-stage {
  position: sticky;
  top: var(--header);
  height: calc(100svh - var(--header));
  min-height: 610px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 7%;
  overflow: hidden;
  padding-block: 50px;
}
.flight-copy {
  position: relative;
  z-index: 2;
}
.flight-copy h2 {
  max-width: 580px;
}
.flight-copy .eyebrow {
  color: var(--green-dark);
}
.story-texts {
  position: relative;
  height: 210px;
  margin-top: 28px;
  max-width: 520px;
}
.story-text {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
  font-size: 18px;
  color: var(--muted);
  pointer-events: none;
}
.story-text.active {
  opacity: 1;
  transform: none;
}
.story-tabs {
  display: flex;
  gap: 28px;
  margin-top: 10px;
}
.story-tab {
  background: none;
  border: 0;
  border-top: 2px solid var(--line);
  padding: 12px 0 0;
  text-align: left;
  font-size: 13px;
  flex: 1;
  color: var(--muted);
  transition: border-color 0.3s, color 0.3s;
}
.story-tab[aria-pressed="true"] {
  border-color: var(--green-dark);
  color: var(--green-dark);
}
.story-tab span {
  display: block;
  font-size: 11px;
  margin-bottom: 3px;
  letter-spacing: 0.1em;
}
.flight-art {
  position: relative;
  aspect-ratio: 1/1;
  min-width: 0;
}
.flight-disc {
  position: absolute;
  inset: 9% 4% 9% 4%;
  border-radius: 50%;
  background: #efeccf;
  opacity: 0.65;
  transform: scale(var(--disc-scale, 0.92));
  transition: background 0.5s;
}
.flight-route {
  position: absolute;
  inset: 8%;
  overflow: visible;
  width: 84%;
  height: 84%;
  fill: none;
}
.flight-route .route-base {
  stroke: #a4b793;
  stroke-width: 1.3;
  stroke-dasharray: 4 8;
  opacity: 0.65;
}
.flight-route .route-draw {
  stroke: var(--green-dark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.route-bird {
  position: absolute;
  width: clamp(105px, 12vw, 190px);
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) rotate(-7deg);
  will-change: left, top, transform;
  filter: drop-shadow(0 23px 16px #183c3118);
}
.route-bird img {
  width: 100%;
  animation: hover-bird 2.8s ease-in-out infinite;
}
.flight-word {
  position: absolute;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #648160;
}
.flight-word:nth-of-type(2) {
  left: 5%;
  bottom: 17%;
}
.flight-word:nth-of-type(3) {
  right: 0;
  top: 16%;
}
.flight-counter {
  position: absolute;
  bottom: 6%;
  right: 8%;
  font-size: 14px;
  color: var(--green-dark);
}
.purpose {
  padding-block: 82px;
  border-top: 1px solid var(--line);
}
.purpose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
}
.purpose h2 {
  max-width: 580px;
}
.purpose .eyebrow {
  color: var(--green-dark);
}
.purpose-copy {
  color: var(--muted);
  font-size: 16px;
}
.purpose-end {
  font-weight: 600;
  color: var(--green-dark) !important;
  margin-top: 22px;
}
.journey {
  height: 185vh;
  min-height: 1250px;
  background: #f0f0df;
  border-top-right-radius: clamp(70px, 12vw, 180px);
}
.journey-stage {
  position: sticky;
  top: var(--header);
  min-height: 650px;
  height: calc(100svh - var(--header));
  padding-block: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.journey.karachi{}
.journey.karachi .journey-card, .journey.karachi .journey-card.active{
      background-color: transparent;

}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 60px;
  margin-bottom: 40px;
}
.section-head h2 {
  max-width: 700px;
}
.section-head p {
  max-width: 360px;
  color: var(--muted);
  font-size: 16px;
}
.journey .section-head {
  margin-bottom: 25px;
}
.journey .section-head h2 {
  font-size: clamp(32px, 3.2vw, 51px);
}
.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.journey-card {
  min-width: 0;
  position: relative;
  opacity: 0.66;
  transform: translateY(14px);
  transition: transform 0.6s var(--ease), opacity 0.6s;
}
.journey-card.active {
  opacity: 1;
  transform: translateY(0);
}
.journey-img {
  overflow: hidden;
  aspect-ratio: 1.65;
  background: #d2dac5;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 3px;
  transition: border-radius 0.8s;
}
.journey-card.active .journey-img {
  border-top-left-radius: 75px;
  border-bottom-right-radius: 55px;
}
.journey-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
  transform: scale(1.065);
}
.journey-card.active .journey-img img {
  transform: scale(1);
}
.journey-card:nth-child(3) .journey-img img {
  object-position: 58% 46%;
}
.journey-name {
  display: flex;
  gap: 15px;
  align-items: start;
  margin-top: 22px;
}
.stage-number {
  font-size: 27px;
  line-height: 1.25;
  color: #8b9780;
  font-weight: 400;
}
.journey-name h3 {
  font-size: 22px;
  letter-spacing: -0.025em;
  line-height: 1.4;
}
.journey-name p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.7;
}
.journey-name .text-link {
  color: var(--green-dark);
  font-size: 13px;
  margin-top: 10px;
  padding-bottom: 3px;
}
.journey-rail {
  height: 2px;
  background: #d3d9c6;
  margin-top: 30px;
  position: relative;
}
.journey-fill {
  position: absolute;
  inset: 0;
  background: var(--green-dark);
  transform: scaleX(0);
  transform-origin: left;
}
.journey-dots {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 10px;
}
.journey-stop {
  font-size: 12px;
  background: none;
  border: 0;
  padding: 3px 0;
  color: var(--muted);
}
.journey-stop[aria-pressed="true"] {
  color: var(--green-dark);
  font-weight: 600;
}
.journey-stop span {
  margin-right: 8px;
}
.journey-note {
  font-size: 14px;
  color: var(--muted);
  max-width: 960px;
  margin-top: 23px;
  line-height: 1.7;
}
.parents-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 10%;
  align-items: start;
}
.parents-intro {
  position: sticky;
  top: calc(var(--header) + 70px);
}
.parents-intro p {
  margin-top: 25px;
  color: var(--muted);
}
.reasons {
  list-style: none;
  padding: 0;
  margin: 0;
}
.reasons li {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  font-size: 17px;
  line-height: 1.65;
}
.reasons li:first-child {
  padding-top: 0;
}
.reasons .reason-num {
  font-size: 12px;
  color: var(--green-dark);
  padding-top: 5px;
}
.life-banner {
  position: relative;
  height: 560px;
  min-height: 480px;
  overflow: hidden;
  background: var(--forest);
  color: var(--cream);
}
.life-banner img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center 42%;
  transform: translateY(var(--photo-y, 0));
}
.life-banner:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0b281dbd, transparent 80%),
    linear-gradient(0deg, #0b281d45, transparent);
}
.life-banner .wrap {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
}
.life-banner h2 {
  max-width: 650px;
  font-size: clamp(42px, 5vw, 78px);
}
.life-banner p {
  max-width: 570px;
  font-size: 17px;
  margin-top: 24px;
}
.gallery-area {
  padding-block: 50px 95px;
}
.gallery {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  grid-template-rows: 230px 230px;
  gap: 18px;
}
.gallery-item {
  border: 0;
  padding: 0;
  overflow: hidden;
  background: #d0d6c4;
  position: relative;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.gallery-item:hover img {
  transform: scale(1.055);
}
.gallery-item:first-child {
  grid-row: span 2;
  border-top-left-radius: 100px;
}
.gallery-item:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}
.gallery-item:nth-child(5) {
  grid-column: 3;
  grid-row: 2;
  border-bottom-right-radius: 95px;
}
.gallery-item:after {
  content: "+";
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #fff8;
  backdrop-filter: blur(8px);
  color: var(--forest);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.25s, transform 0.25s;
}
.gallery-item:hover:after,
.gallery-item:focus-visible:after {
  opacity: 1;
  transform: none;
}
.gallery-bottom {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  margin-top: 25px;
  font-size: 13px;
  color: var(--muted);
}
.gallery-bottom .text-link {
  color: var(--green-dark);
}
.campuses {
  border-top: 1px solid var(--line);
}
.campus-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 8%;
}
.campus-intro h2 {
  max-width: 520px;
}
.campus-intro > p {
  color: var(--muted);
  margin-top: 26px;
  max-width: 430px;
  font-size: 16px;
}
.campus-list {
  border-top: 1px solid var(--line);
}
.campus {
  border-bottom: 1px solid var(--line);
}
.campus summary {
  list-style: none;
  display: grid;
  grid-template-columns: 135px 1fr 28px;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  cursor: pointer;
}
.campus summary::-webkit-details-marker {
  display: none;
}
.campus-thumb {
  width: 135px;
  height: 90px;
  object-fit: cover;
  transition: border-radius 0.4s;
}
.campus[open] .campus-thumb {
  border-top-left-radius: 32px;
}
.campus-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.campus-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 5px;
}
.campus-plus {
  font-size: 25px;
  font-weight: 400;
  transition: transform 0.3s;
}
.campus[open] .campus-plus {
  transform: rotate(45deg);
}
.campus-body {
  padding: 0 0 28px 159px;
  color: var(--muted);
  font-size: 14px;
  animation: fade-up 0.4s both;
}
.campus-body p + p {
  margin-top: 14px;
}
.campus-body address {
  font-style: normal;
  font-size: 13px;
  margin-top: 16px;
}
.campus-body .text-link {
  color: var(--green-dark);
  font-size: 13px;
  margin-top: 12px;
}
.closing {
  position: relative;
  overflow: hidden;
  background: var(--green-dark);
  color: var(--cream);
  padding-block: 100px;
}
.closing:after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -270px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: var(--yellow);
}
.closing-inner {
  display: grid;
  grid-template-columns: 1.5fr 0.6fr;
  gap: 12%;
  align-items: center;
  position: relative;
  z-index: 1;
}
.closing h2 {
  max-width: 800px;
}
.closing p {
  max-width: 620px;
  font-size: 17px;
  margin-top: 24px;
}
.closing-art {
  align-self: center;
  position: relative;
}
.closing-art img {
  width: 180px;
  max-width: 90%;
  animation: hover-bird 4s infinite;
  transform: rotate(-8deg);
}
.closing .text-link {
  color: var(--cream);
}
.site-footer {
  padding-block: 64px 28px;
  background: var(--cream);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 1fr 1.2fr;
  gap: 50px;
}
.footer-brand {
  width: 118px;
  height: 90px;
  object-fit: contain;
  object-position: left center;
}
.footer-tag {
  max-width: 280px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 19px;
}
.footer-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 20px;
}
.footer-links {
  display: grid;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.footer-links a:hover {
  color: var(--green-dark);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
}
.footer-bottom a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.motion-toggle {
  position: fixed;
  bottom: 20px;
  right: 22px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid #c9d4c4;
  background: #fffaf2ef;
  backdrop-filter: blur(12px);
  border-radius: 30px;
  box-shadow: 0 3px 16px #173d3112;
  font-size: 12px;
  line-height: 1.5;
  color: var(--forest);
}
.motion-toggle svg {
  width: 15px;
  height: 15px;
}
.motion-toggle:hover {
  background: white;
}
.lightbox {
  border: 0;
  padding: 0;
  max-width: min(1150px, 93vw);
  max-height: 92svh;
  background: #102d24;
  color: white;
  border-radius: 5px;
  overflow: hidden;
}
.lightbox::backdrop {
  background: #061c16e8;
  backdrop-filter: blur(12px);
}
.lightbox figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  max-height: 90svh;
}
.lightbox img {
  width: 100%;
  height: auto;
  max-height: 77svh;
  object-fit: contain;
  background: #102d24;
}
.lightbox figcaption {
  padding: 15px 65px 15px 24px;
  font-size: 14px;
  min-height: 57px;
}
.lightbox-close {
  position: absolute;
  right: 15px;
  top: 15px;
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest);
  font-size: 24px;
  line-height: 1;
  z-index: 2;
}
.lightbox-nav {
  position: absolute;
  top: 45%;
  border: 1px solid #fff6;
  border-radius: 50%;
  background: #173d3180;
  color: white;
  width: 44px;
  height: 44px;
  font-size: 22px;
}
.lightbox-prev {
  left: 15px;
}
.lightbox-next {
  right: 15px;
}
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js .reveal.visible {
  opacity: 1;
  transform: none;
}
.js .wipe {
  clip-path: inset(0 0 12% 0 round 0 0 25% 0);
  transition: clip-path 1.2s var(--ease);
}
.js .wipe.visible {
  clip-path: inset(0 round 0);
}
@keyframes cinema {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes hero-in {
  from {
    transform: translateY(110%);
  }
  to {
    transform: none;
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hover-bird {
  0%,
  100% {
    translate: 0 0;
    rotate: -3deg;
  }
  45% {
    translate: 7px -12px;
    rotate: 2deg;
  }
  75% {
    translate: -3px -4px;
    rotate: -1deg;
  }
}
@keyframes nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
html.motion-off {
  scroll-behavior: auto;
}
.motion-off *,
.motion-off *:before,
.motion-off *:after {
  animation: none !important;
  transition: none !important;
}
.motion-off .reveal,
.motion-off .wipe {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
.motion-off .belief .read-word {
  color: var(--green-dark);
}
.motion-off .beliefabout .read-word {
  color: var(--green-dark);
}
.motion-off .flight-section {
  height: auto;
  min-height: 0;
}
.motion-off .flight-stage {
  position: relative;
  top: 0;
  height: auto;
  min-height: 0;
  padding-block: 90px;
}
.motion-off .story-texts {
  height: auto;
}
.motion-off .story-text {
  position: static;
  opacity: 1;
  transform: none;
  margin-bottom: 24px;
}
.motion-off .story-tabs {
  display: none;
}
.motion-off .journey {
  height: auto;
  min-height: 0;
}
.motion-off .journey-stage {
  position: relative;
  top: 0;
  height: auto;
  padding-block: 75px;
}
.motion-off .journey-card {
  opacity: 1;
  transform: none;
}
.motion-off .journey-rail,
.motion-off .journey-dots {
  display: none;
}
.motion-off .hero-slide,
.motion-off .philosophy-photo img,
.motion-off .life-banner img {
  transform: none !important;
}
.motion-off .route-bird {
  left: 50% !important;
  top: 45% !important;
  transform: translate(-50%, -50%) !important;
}
.motion-off .flight-route .route-draw {
  stroke-dashoffset: 0 !important;
}
.motion-off .hero-arc {
  transform: none !important;
}
@media (min-width: 1700px) {
  .hero-content {
    padding-left: 100px;
  }
  .hero h1 {
    max-width: 1100px;
  }
}
@media (max-width: 1180px) {
  :root {
    --gutter: 40px;
  }
  .desktop-nav {
    gap: 17px;
  }
  .desktop-nav a {
    font-size: 12px;
  }
  .header-inner {
    gap: 15px;
  }
  .header-right {
    gap: 15px;
    margin-left: 7px;
  }
  .header-right .text-link {
    display: none;
  }
  .brand,
  .brand img {
    width: 98px;
  }
  .philosophy-copy {
    padding: 42px;
  }
  .philosophy-copy p {
    font-size: 14px;
  }
  .story-text {
    font-size: 16px;
  }
  .journey-name h3 {
    font-size: 20px;
  }
  .journey-name p {
    font-size: 13px;
  }
  .journey-note {
    font-size: 13px;
  }
  .footer-grid {
    gap: 30px;
  }
  .campus-grid {
    gap: 6%;
  }
  .campus summary {
    grid-template-columns: 105px 1fr 24px;
    gap: 20px;
  }
  .campus-thumb {
    width: 105px;
    height: 80px;
  }
  .campus-body {
    padding-left: 125px;
  }
}
@media (max-width: 960px) {
  :root {
    --header: 80px;
    --gutter: 28px;
  }
  .header-inner {
    gap: 20px;
  }
  .brand img {
    height: 65px;
  }
  .menu-toggle {
    display: block;
    order: 3;
  }
  .header-right {
    margin-left: auto;
    gap: 14px;
  }
 /*  .desktop-nav {
    display: none;
    position: absolute;
    top: var(--header);
    left: 0;
    right: 0;
    margin: 0;
    padding: 18px 28px 28px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 15px 20px #173d310d;
  } */
  .site-header.menu-open .desktop-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .desktop-nav a {
    padding: 15px 0;
    font-size: 16px;
  }
  .desktop-nav a:after {
    display: none;
  }
  .hero {
    min-height: 660px;
  }
  .hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  }
  .hero-bird {
    right: 7%;
    top: 12%;
    width: 85px;
  }
  .hero-shade {
    background: linear-gradient(90deg, #071a14d6, #071a147d 65%, #071a142b);
  }
  .intro-top {
    gap: 7%;
  }
  .intro-copy {
    font-size: 16px;
  }
  .philosophy {
    min-height: 0;
    grid-template-columns: 0.9fr 1.1fr;
  }
  .philosophy-photo {
    min-height: 680px;
  }
  .philosophy-copy {
    padding: 38px 30px;
  }
  .flight-stage {
    gap: 3%;
  }
  .story-texts {
    height: 250px;
  }
  .story-text {
    font-size: 16px;
  }
  .story-tabs {
    gap: 14px;
  }
  .journey {
    height: 165vh;
  }
  .journey-stage {
    min-height: 720px;
  }
  .journey-grid {
    gap: 16px;
  }
  .journey-name {
    gap: 10px;
  }
  .journey-name h3 {
    font-size: 17px;
  }
  .stage-number {
    font-size: 22px;
  }
  .journey-name p {
    font-size: 13px;
  }
  .journey .section-head {
    gap: 25px;
  }
  .journey .section-head p {
    font-size: 14px;
  }
  .parents-grid {
    gap: 8%;
  }
  .campus-grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 6%;
  }
  .campus summary {
    grid-template-columns: 90px 1fr 22px;
    gap: 15px;
  }
  .campus-thumb {
    width: 90px;
    height: 70px;
  }
  .campus-body {
    padding-left: 0;
  }
  .closing:after {
    right: -200px;
  }
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
  .footer-grid > div:last-child {
    grid-column: 2 / span 2;
  }
  .gallery {
    grid-template-rows: 180px 180px;
  }
}
@media (max-width: 760px) {
  :root {
    --gutter: 22px;
    --header: 76px !important;
  }
  .section {
    padding-block: 66px;
  }
  .header-inner {
    gap: 12px;
  }
  .header-apply .btn {
    padding: 7px 15px;
    min-height: 32px;
    font-size: 12px;
  }
  .cities {
    font-size: 10px;
  }
  .cities a,
  .cities span {
    padding-inline: 11px;
  }
  .brand,
  .brand img {
    width: 88px;
  }
  .menu-toggle {
    width: 40px;
    height: 40px;
    margin-left: 0;
  }
  .hero {
    height: calc(100svh - var(--header));
    min-height: 630px;
    max-height: 850px;
  }
  .hero-content {
    justify-content: flex-end;
    padding-bottom: 145px;
    padding-top: 60px;
  }
  .hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
    line-height: 1.15;
    max-width: 620px;
  }
  .hero h1 .small-opening {
    font-size: 0.46em;
  }
  .hero-sub {
    max-width: 360px;
    font-size: 14px;
    margin-top: 20px;
  }
  .hero .actions {
    gap: 18px;
    margin-top: 24px;
  }
  .hero .btn {
    font-size: 12px;
    padding: 13px 16px;
  }
  .hero-slide {
    object-position: 58% center;
  }
  .hero-shade {
    background: linear-gradient(0deg, #092218f0 2%, #0922189c 58%, #09221818),
      linear-gradient(90deg, #09221833, transparent);
  }
  .hero-foot {
    bottom: 33px;
  }
  .hero-controls {
    margin-right: 40px;
    gap: 7px;
  }
  .hero-dot {
    width: 30px;
  }
  .hero-bird {
    top: 8%;
    right: 9%;
    width: 66px;
  }
  .hero-arc {
    width: 77px;
    height: 77px;
  }
  .scroll-cue {
    font-size: 10px;
    gap: 7px;
  }
  .intro-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .intro-top h2 {
    max-width: 470px;
  }
  .intro-copy {
    font-size: 15px;
  }
  .belief {
    margin-top: 40px;
    padding-top: 30px;
    font-size: 27px;
    line-height: 1.48;
  }
  .beliefabout {
    margin-top: 40px;
    padding-top: 30px;
    font-size: 27px;
    line-height: 1.48;
  }
  .philosophy {
    grid-template-columns: 1fr;
  }
  .philosophy-photo {
    min-height: 360px;
    height: 60vw;
    max-height: 520px;
    border-top-left-radius: 150px;
  }
  .philosophy-copy {
    padding: 45px 26px 52px;
  }
  .philosophy-copy h2 {
    font-size: 35px;
  }
  .philosophy-copy p {
    font-size: 15px;
  }
  .flight-section {
    height: auto;
    min-height: 0;
  }
  .flight-stage {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    padding-block: 66px;
    gap: 20px;
    overflow: hidden;
  }
  .flight-copy {
    order: 2;
  }
  .flight-copy h2 {
    font-size: 38px;
  }
  .flight-art {
    order: 1;
    width: 85%;
    max-width: 430px;
    margin: 0 auto;
    aspect-ratio: 1.4;
  }
  .flight-disc {
    inset: 1% 15%;
  }
  .flight-route {
    display: none;
  }
  .route-bird {
    width: 150px;
    left: 50% !important;
    top: 45% !important;
    transform: translate(-50%, -50%) !important;
  }
  .flight-word,
  .flight-counter {
    display: none;
  }
  .story-texts {
    height: auto;
    margin-top: 25px;
  }
  .story-text {
    position: static;
    opacity: 1;
    transform: none;
    margin-bottom: 22px;
    font-size: 15px;
  }
  .story-tabs {
    display: none;
  }
  .purpose {
    padding-block: 58px;
  }
  .purpose-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .purpose-copy {
    font-size: 15px;
  }
  .journey {
    height: auto;
    min-height: 0;
    border-top-right-radius: 90px;
  }
  .journey-stage {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
    padding-block: 66px;
  }
  .section-head {
    display: block;
    margin-bottom: 30px;
  }
  .section-head p {
    margin-top: 22px;
    max-width: 500px;
  }
  .journey .section-head h2 {
    font-size: 35px;
  }
  .journey .section-head p {
    font-size: 15px;
  }
  .journey-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    margin-top: 15px;
  }
  .journey-card {
    opacity: 1;
    transform: none;
  }
  .journey-img {
    aspect-ratio: 1.6;
  }
  .journey-card .journey-img {
    border-top-left-radius: 55px;
    border-bottom-right-radius: 40px;
  }
  .journey-name {
    gap: 17px;
    margin-top: 20px;
  }
  .stage-number {
    font-size: 28px;
  }
  .journey-name h3 {
    font-size: 24px;
  }
  .journey-name p {
    font-size: 15px;
  }
  .journey-name .text-link {
    font-size: 14px;
  }
  .journey-rail,
  .journey-dots {
    display: none;
  }
  .journey-note {
    font-size: 14px;
    margin-top: 38px;
  }
  .parents-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .parents-intro {
    position: static;
  }
  .parents-intro p {
    font-size: 15px;
  }
  .reasons li {
    font-size: 15px;
    gap: 12px;
    padding-block: 20px;
    grid-template-columns: 26px 1fr;
  }
  .life-banner {
    height: 540px;
    min-height: 0;
  }
  .life-banner img {
    object-position: center;
  }
  .life-banner:after {
    background: linear-gradient(0deg, #092218dc, #09221855);
  }
  .life-banner .wrap {
    justify-content: flex-end;
    padding-bottom: 55px;
  }
  .life-banner h2 {
    font-size: 45px;
  }
  .life-banner p {
    font-size: 15px;
    margin-top: 18px;
  }
  .gallery-area {
    padding-block: 25px 65px;
  }
  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 175px 175px;
    gap: 12px;
  }
  .gallery-item:first-child {
    grid-column: span 2;
    grid-row: 1;
    border-top-left-radius: 60px;
  }
  .gallery-item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .gallery-item:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .gallery-item:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
  }
  .gallery-item:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
    border-bottom-right-radius: 50px;
  }
  .gallery-bottom {
    align-items: flex-start;
    font-size: 12px;
  }
  .gallery-bottom .text-link {
    font-size: 12px;
    white-space: nowrap;
  }
  .campus-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .campus-intro > p {
    font-size: 15px;
    max-width: none;
  }
  .campus summary {
    grid-template-columns: 105px 1fr 25px;
    gap: 20px;
  }
  .campus-thumb {
    width: 105px;
    height: 78px;
  }
  .campus-title {
    font-size: 23px;
  }
  .campus-body {
    padding-left: 0;
    font-size: 15px;
  }
  .campus-body address {
    font-size: 14px;
  }
  .closing {
    padding-block: 70px;
  }
  .closing-inner {
    grid-template-columns: 1fr;
  }
  .closing h2 {
    font-size: 36px;
    max-width: 540px;
  }
  .closing p {
    font-size: 15px;
  }
  .closing-art {
    display: none;
  }
  .closing:after {
    width: 230px;
    height: 230px;
    right: -130px;
    bottom: -130px;
  }
  .closing .actions {
    gap: 25px;
  }
  .site-footer {
    padding-block: 45px 80px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 35px 24px;
  }
  .footer-grid > div:first-child {
    grid-column: span 2;
  }
  .footer-grid > div:last-child {
    grid-column: span 2;
  }
  .footer-tag {
    max-width: 350px;
  }
  .footer-bottom {
    font-size: 11px;
    display: grid;
    gap: 12px;
    margin-top: 35px;
  }
  .motion-toggle {
    bottom: 14px;
    right: 14px;
    font-size: 11px;
    padding: 9px 12px;
  }
  .lightbox {
    max-width: 96vw;
  }
  .lightbox figcaption {
    font-size: 12px;
    padding-inline: 15px;
  }
  .lightbox-close {
    right: 10px;
    top: 10px;
  }
  .motion-off .flight-stage {
    padding-block: 65px;
  }
  .motion-off .journey-stage {
    padding-block: 66px;
  }
}
@media (min-width: 761px) and (max-height: 820px) {
  .journey {
    height: auto;
    min-height: 0;
  }
  .journey-stage {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
    padding-block: 70px;
  }
  .journey-card {
    opacity: 1;
    transform: none;
  }
  .journey-dots,
  .journey-rail {
    display: none;
  }
  .flight-section {
    height: auto;
    min-height: 0;
  }
  .flight-stage {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
    padding-block: 70px;
  }
  .story-texts {
    height: auto;
  }
  .story-text {
    position: static;
    opacity: 1;
    transform: none;
    margin-bottom: 22px;
    font-size: 16px;
  }
  .story-tabs {
    display: none;
  }
  .flight-art {
    align-self: center;
  }
  .parents-intro {
    position: static;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.js) {
    scroll-behavior: auto;
  }
  html:not(.js) *,
  html:not(.js) *:before,
  html:not(.js) *:after {
    animation: none !important;
    transition: none !important;
  }
  html:not(.js) .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  html:not(.js) .wipe {
    clip-path: none !important;
  }
  html:not(.js) .hero-slide {
    transform: none !important;
  }
}
/* Without JavaScript, every word and every learning stage remains available. */
html:not(.js) .flight-section,
html:not(.js) .journey {
  height: auto;
  min-height: 0;
}
html:not(.js) .flight-stage,
html:not(.js) .journey-stage {
  position: relative;
  top: 0;
  height: auto;
  padding-block: 70px;
}
html:not(.js) .story-texts {
  height: auto;
}
html:not(.js) .story-text {
  position: static;
  opacity: 1;
  transform: none;
  margin-bottom: 20px;
}
html:not(.js) .story-tabs,
html:not(.js) .journey-dots,
html:not(.js) .motion-toggle {
  display: none;
}
html:not(.js) .journey-card {
  opacity: 1;
  transform: none;
}
/* Normal-speed video playback; original artwork remains a loading/error fallback. */
.flight-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse at center, #000 38%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
.flight-art.video-ready .flight-video {
  opacity: 1;
}
.flight-art.video-ready > :not(.flight-video) {
  visibility: hidden;
}
.flight-art.video-ready {
  aspect-ratio: 16/10;
}
@media (max-width: 760px) {
  .flight-art.video-ready {
    width: 100%;
    max-width: 520px;
  }
}
.belief .type-letter {
  visibility: hidden;
  color: var(--green-dark);
  transition: none;
}
.belief .type-letter.written,
.motion-off .belief .type-letter {
  visibility: visible;
}

.beliefabout .type-letter {
  visibility: hidden;
  color: var(--green-dark);
  transition: none;
}
.beliefabout .type-letter.written,
.motion-off .beliefabout .type-letter {
  visibility: visible;
}


.hero-dot {
  display: block;
  cursor: default;
}
.hero-dot.active:after {
  background: var(--yellow);
}
/* Fill the hero edge to edge, including during image transitions. */
.hero-slide {
  max-width: none;
}
.hero-controls {
  margin-right: 0;
}

/* Campus network: a pinned overview with scroll-revealed map locations. */
.network-section {
  position: relative;
  min-height: 1500px;
  height: 190vh;
  background: #fbf9f3;
}
.network-stage {
  position: sticky;
  top: var(--header);
  min-height: 650px;
  height: calc(100svh - var(--header));
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: start;
  align-content: center;
  gap: 3%;
  padding-block: 45px;
}
.network-intro {
  display: grid;
  grid-template-columns: 1fr 28%;
  align-items: center;
  gap: 1%;
}
.network-copy .eyebrow {
  color: #526984;
  font-size: 13px;
  margin-bottom: 30px;
}
.network-copy h2 {
  font-size: clamp(36px, 3.7vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.055em;
}
.network-description {
  font-size: clamp(14px, 1.15vw, 19px);
  line-height: 1.65;
  color: #59687c;
  margin-top: 30px;
}
.network-map {
  width: 100%;
  height: auto;
  overflow: visible;
}
.map-land {
  fill: #eff0e6;
}
.map-roads {
  fill: none;
  stroke: #fbf9f3;
  stroke-width: 3;
}
.network-pin {
  fill: #217731;
  opacity: 0;
  transition: opacity 0.5s;
}
.network-pin.is-visible {
  opacity: 1;
}
.network-pin text {
  font-family: Poppins, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 600;
  fill: #272b30;
}
.pin-halo {
  fill: #217731;
  opacity: 0;
  transform: scale(0.4);
  transition: transform 0.6s, opacity 0.6s;
}
.network-pin.is-current .pin-halo {
  opacity: 0.12;
  transform: scale(1);
}
.network-cards {
  display: grid;
  gap: 20px;
}
.network-card {
  display: grid;
  grid-template-columns: 34% 1fr 44px;
  gap: 22px;
  align-items: center;
  padding: 16px;
  border: 1px solid #e6e5e0;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 12px 28px #45381806;
  transition: border-color 0.4s, background 0.4s, transform 0.3s;
}
.network-card.is-current {
  border-color: #bdcfb6;
  background: #fafcf8;
}
.network-card:hover {
  transform: translateY(-3px);
  border-color: #91b18a;
}
.network-photo {
  width: 100%;
  height: clamp(135px, 11.5vw, 210px);
  object-fit: cover;
  border-radius: 13px;
}
.network-card h3 {
  font-size: clamp(23px, 2vw, 36px);
  letter-spacing: -0.055em;
}
.network-location {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  margin: 8px 0 !important;
  line-height: 1.4;
}
.network-location svg {
  width: 13px;
  height: 19px;
  fill: #217731;
}
.network-card-description {
  font-size: clamp(13px, 1.06vw, 18px);
  color: #59687c;
  line-height: 1.45;
  margin: 0 !important;
}
.network-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #dce7d3;
  color: #104d19;
  font-size: 30px;
  transition: background 0.4s, color 0.4s;
}
.network-card.is-current .network-arrow {
  background: #217731;
  color: white;
}
.motion-off .network-section,
html:not(.js) .network-section {
  height: auto;
  min-height: 0;
}
.motion-off .network-stage,
html:not(.js) .network-stage {
  position: relative;
  height: auto;
  min-height: 0;
  padding-block: 80px;
}
.motion-off .network-pin,
html:not(.js) .network-pin {
  opacity: 1;
}
@media (max-width: 1100px) {
  .network-stage {
    gap: 25px;
    grid-template-columns: 1fr 1fr;
  }
  .network-card {
    gap: 13px;
    padding: 13px;
    grid-template-columns: 30% 1fr 33px;
  }
  .network-arrow {
    width: 33px;
    height: 33px;
    font-size: 25px;
  }
  .network-copy h2 {
    font-size: 38px;
  }
  .network-description {
    font-size: 14px;
  }
}
@media (max-width: 760px) {
  .network-section {
    height: auto;
    min-height: 0;
  }
  .network-stage {
    display: block;
    position: relative;
    height: auto;
    min-height: 0;
    padding-block: 65px;
  }
  .network-intro {
    grid-template-columns: 1fr 28%;
    margin-bottom: 36px;
  }
  .network-copy h2 {
    font-size: clamp(32px, 7vw, 48px);
  }
  .network-copy .eyebrow {
    font-size: 11px;
    margin-bottom: 22px;
  }
  .network-description {
    font-size: 14px;
    margin-top: 22px;
  }
  .network-cards {
    gap: 16px;
  }
  .network-card {
    grid-template-columns: 30% 1fr 32px;
    padding: 12px;
    gap: 14px;
    border-radius: 17px;
  }
  .network-photo {
    height: 145px;
  }
  .network-card h3 {
    font-size: 25px;
  }
  .network-card-description {
    font-size: 13px;
  }
  .network-location {
    font-size: 13px;
  }
  .network-pin text {
    font-size: 24px;
  }
}
@media (min-width: 761px) and (max-height: 750px) {
  .network-stage {
    min-height: 0;
    padding-block: 20px;
  }
  .network-photo {
    height: 120px;
  }
  .network-cards {
    gap: 12px;
  }
  .network-card {
    padding: 12px;
  }
  .network-copy h2 {
    font-size: 38px;
  }
  .network-description {
    font-size: 14px;
    margin-top: 22px;
  }
}

.network-card {
  grid-template-columns: 34% 1fr;
  transform: scale(var(--campus-scale, 1));
  transform-origin: center;
  transition: transform 0.3s ease-out, border-color 0.4s, background 0.4s;
  will-change: transform;
}
.network-card:hover {
  transform: scale(var(--campus-scale, 1));
}
.motion-off .network-card {
  transform: none;
}
@media (max-width: 1100px) {
  .network-card {
    grid-template-columns: 30% 1fr;
  }
}

@media (min-width: 961px) and (max-width: 1450px) {
  .desktop-nav {
    gap: 16px;
  }
  .desktop-nav a {
    font-size: 12px;
  }
  .header-right > .text-link {
    display: none;
  }
}

/* Concept 3: a continuous, scroll-led learning timeline. */
.flight-copy .eyebrow {
  font-size: 13.52px;
}
.flight-art {
  background: var(--cream);
  isolation: isolate;
}
.flight-video {
  opacity: 0 !important;
  mix-blend-mode: normal;
  mask-image: none;
}
.bird-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  visibility: hidden;
  pointer-events: none;
}
.flight-art.video-ready > .bird-canvas {
  visibility: visible;
}
.journey {
  height: auto;
  min-height: 0;
  padding-block: 95px;
  background: #f0f0df;
}
.journey-stage,
.motion-off .journey-stage,
html:not(.js) .journey-stage {
  position: relative;
  top: 0;
  height: auto;
  min-height: 0;
  padding-block: 0;
  display: block;
}
.journey .section-head {
  margin-bottom: 65px;
  align-items: end;
}
.journey .section-head h2 {
  font-size: clamp(35px, 4vw, 60px);
  max-width: 650px;
}
.journey-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}
.journey-grid:before,
.journey-grid:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #cbd2bc;
  transform: translateX(-50%);
}
.journey-grid:after {
  background: var(--green-dark);
  transform: translateX(-50%) scaleY(var(--journey-progress, 0));
  transform-origin: top;
}
.journey-card,
.journey-card.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12%;
  align-items: center;
  opacity: 1;
  transform: none;
  position: relative;
}
.journey-card:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--green-dark);
  background: #f0f0df;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: background 0.4s, box-shadow 0.4s;
}
.journey-card.active:before {
  background: var(--green-dark);
  box-shadow: 0 0 0 8px #287b3015;
}
.journey-card:nth-child(even) .journey-img {
  grid-column: 2;
  grid-row: 1;
}
.journey-card:nth-child(even) .journey-name {
  grid-column: 1;
  grid-row: 1;
}
.journey .journey-img {
  aspect-ratio: 1.42;
  border-radius: 70px 6px 70px 6px;
}
.journey .journey-card:nth-child(even) .journey-img {
  border-radius: 6px 70px 6px 70px;
}
.journey-img img {
  transform: scale(1.025);
}
.journey-name {
  display: block;
  margin: 0;
  padding: 20px 0;
}
.stage-number {
  font-size: 13px;
  letter-spacing: 0.15em;
  display: block;
  color: var(--green-dark);
  margin-bottom: 20px;
  font-weight: 600;
}
.journey-name h3 {
  font-size: clamp(29px, 3.1vw, 44px);
  line-height: 1.15;
}
.journey-name p {
  font-size: 16px;
  line-height: 1.8;
  max-width: 460px;
  margin-top: 22px;
}
.journey-name .text-link {
  font-size: 14px;
  margin-top: 22px;
}
.journey-rail,
.journey-dots {
  display: none;
}
.journey-note {
  max-width: 790px;
  text-align: center;
  font-size: 15px;
  margin: 65px auto 0;
  padding-top: 30px;
  border-top: 1px solid #cbd2bc;
}
@media (max-width: 760px) {
  .journey {
    padding-block: 65px;
    border-top-right-radius: 70px;
  }
  .journey .section-head {
    margin-bottom: 38px;
  }
  .journey .section-head p {
    margin-top: 18px;
  }
  .journey-grid {
    gap: 45px;
    padding-left: 28px;
    margin-top: 0;
  }
  .journey-grid:before,
  .journey-grid:after {
    left: 4px;
  }
  .journey-card,
  .journey-card.active {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .journey-card:before {
    left: -24px;
    top: 30px;
    width: 11px;
    height: 11px;
  }
  .journey-card:nth-child(even) .journey-img,
  .journey-card:nth-child(even) .journey-name {
    grid-column: auto;
    grid-row: auto;
  }
  .journey .journey-img,
  .journey .journey-card:nth-child(even) .journey-img {
    aspect-ratio: 1.45;
    border-radius: 42px 4px 42px 4px;
  }
  .journey-name {
    padding: 23px 0 0;
  }
  .stage-number {
    margin-bottom: 12px;
    font-size: 11px;
  }
  .journey-name h3 {
    font-size: 29px;
  }
  .journey-name p {
    font-size: 14px;
    margin-top: 15px;
  }
  .journey-name .text-link {
    margin-top: 17px;
  }
  .journey-note {
    text-align: left;
    margin-top: 38px;
    font-size: 14px;
  }
}
.motion-off .journey-grid:after,
html:not(.js) .journey-grid:after {
  transform: translateX(-50%) scaleY(1);
}

.city-selection {
  --city-art: url("../images/city-landmarks.png");
  min-height: calc(100svh - var(--header));
  padding-block: clamp(40px, 5vh, 70px) 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.city-intro {
  text-align: center;
  margin: 0 auto 42px;
}
.city-bird {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto 12px;
  animation: city-hover 5s ease-in-out infinite;
}
.city-intro p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 12px;
}
.city-intro h1 {
  font-size: clamp(42px, 5.2vw, 78px);
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.city-intro h1 span {
  color: var(--green-dark);
}
.city-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.city-card {
  display: block;
  min-width: 0;
  border-radius: 32px;
  transition: transform 0.45s var(--ease);
}
.city-picture {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 32px;
  aspect-ratio: 744/500;
  background: #d6dfc9;
  box-shadow: 0 18px 45px #173d3118;
  border: 1px solid #fff9;
}
.city-picture:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--city-art);
  background-repeat: no-repeat;
  background-size: 224.7312% 188%;
  background-position: 7.9741% 80.6818%;
  transition: transform 0.8s var(--ease);
}
.city-lahore .city-picture:before {
  background-position: 92.4569% 80.6818%;
}
.city-caption {
  display: block;
  margin-top: 21px;
  font-size: clamp(23px, 2.1vw, 32px);
  letter-spacing: -0.035em;
  font-weight: 600;
  text-align: center;
  color: var(--forest);
}
.city-card:hover {
  transform: translateY(-5px);
}
.city-card:hover .city-picture:before {
  transform: scale(1.045);
}
.city-card:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: 9px;
}
.city-card:hover .city-caption {
  color: var(--green-dark);
}
.city-selection + .site-footer {
  border-top: 1px solid var(--line);
}
@keyframes city-hover {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-6px) rotate(2deg);
  }
}
@media (max-width: 760px) {
  .city-selection {
    padding-block: 36px 55px;
    min-height: 0;
  }
  .city-intro {
    margin-bottom: 28px;
  }
  .city-bird {
    width: 59px;
    height: 59px;
    margin-bottom: 12px;
  }
  .city-intro p {
    font-size: 12px;
  }
  .city-intro h1 {
    font-size: clamp(36px, 8.3vw, 56px);
  }
  .city-options {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 540px;
    width: 100%;
    margin: auto;
  }
  .city-picture {
    border-radius: 24px;
  }
  .city-card {
    border-radius: 24px;
  }
  .city-caption {
    margin-top: 12px;
    font-size: 25px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .city-bird {
    animation: none;
  }
  .city-card,
  .city-picture:before {
    transition: none;
  }
  .city-card:hover,
  .city-card:hover .city-picture:before {
    transform: none;
  }
}

main {
  padding-top: 0;
}
.city-selection {
  min-height: 100svh;
}
html {
  scroll-padding-top: 0;
}
@media (max-width: 760px) {
  .city-selection {
    min-height: 100svh;
  }
}


.city-selection {
  max-width: 1672px;
  padding: clamp(32px, 8vh, 90px) clamp(22px, 4.15vw, 70px);
  min-height: 100svh;
}
.city-intro {
  margin-bottom: clamp(28px, 5.8vh, 58px);
}
.city-bird {
  width: 100px;
  height: 100px;
  margin-bottom: 22px;
  animation: none;
}
.city-intro h1 {
  font-size: clamp(44px, 5.3vw, 88px);
  font-weight: 600;
  letter-spacing: -0.045em;
}
.city-intro h1 span {
  color: #4c9816;
}
.city-options {
  gap: 34px;
}
.city-card,
.city-picture {
  border-radius: 32px;
}
.city-picture {
  aspect-ratio: 750/508;
  border: 0;
  box-shadow: 0 18px 38px #18261512;
}
.city-picture:before {
  background-size: 222.933333% 185.23622%;
  background-position: 7.483731% 80.600462%;
}
.city-lahore .city-picture:before {
  background-position: 92.624729% 80.600462%;
}
@media (min-width: 761px) {
  .city-selection {
    width: min(100%, calc((100svh - 320px) * 2.952756 + 174px));
  }
}
@media (max-width: 760px) {
  .city-selection {
    padding-block: 35px 40px;
  }
  .city-intro {
    margin-bottom: 28px;
  }
  .city-bird {
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
  }
  .city-intro h1 {
    font-size: clamp(35px, 8.4vw, 58px);
  }
  .city-options {
    gap: 24px;
  }
  .city-card,
  .city-picture {
    border-radius: 24px;
  }
}

.city-intro h1 {
  font-size: clamp(39.6px, 4.77vw, 79.2px);
}
.city-caption {
  font-size: clamp(20.7px, 1.89vw, 28.8px);
}
.city-options {
  transform: translateY(-3%);
}
.city-picture {
  aspect-ratio: 760/516;
}
.city-picture:before {
  background-size: 220% 182.364341%;
  background-position: 6.469298% 81.647059%;
}
.city-lahore .city-picture:before {
  background-position: 93.530702% 81.647059%;
}
@media (max-width: 760px) {
  .city-intro h1 {
    font-size: clamp(31.5px, 7.56vw, 52.2px);
  }
  .city-caption {
    font-size: 22.5px;
  }
}

.city-picture {
  aspect-ratio: 754/529;
}
.city-picture:before {
  background-size: 221.750663% 177.882798%;
  background-position: 7.08061% 83.495146%;
}
.city-lahore .city-picture:before {
  background-position: 93.028322% 83.495146%;
}

.city-intro {
  transform: translateY(-3svh);
}
.city-options {
  transform: translateY(calc(-3% - 3svh));
}







/*lahore*/

.vlc-lahore-page {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.vlc-lahore-page :where(h1, h2, h3, p, figure) {
  margin: 0;
}

.vlc-lahore-page :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.14;
  overflow-wrap: break-word;
}

.vlc-lahore-page h2 {
  font-size: clamp(34px, 3.7vw, 56px);
}

.vlc-lahore-page h3 {
  font-size: clamp(23px, 2.1vw, 30px);
}

.vlc-lahore-page a {
  color: inherit;
  text-decoration: none;
}

.vlc-lahore-page button {
  font: inherit;
  cursor: pointer;
}

.vlc-lahore-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vlc-lahore-page :where(a, button, summary):focus-visible {
  outline: 3px solid #80b44d;
  outline-offset: 5px;
}

.vlc-lahore-page ::selection {
  background: var(--lime);
  color: var(--forest);
}

.wrap {
  max-width: 1512px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* #main {
  padding-top: var(--header);
} */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--green);
  color: var(--paper) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition: background 200ms ease;
}

.btn:hover {
  background: #216728;
}

.text-link {
  display: inline-flex;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 28px;
}

.skip {
  position: fixed;
  top: -80px;
  left: 20px;
  z-index: 70;
  padding: 12px;
  background: var(--paper);
}

.skip:focus {
  top: 10px;
}

/* 02. Existing video source, framing and full-width banner treatment. */
.hero {
  position: relative;
  min-height: max(680px, calc(100svh - var(--header)));
  overflow: hidden;
  background: var(--forest);
  color: var(--cream);
}

.hero-photo {
  position: absolute;
  inset: 0;
}

.hero-photo .hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transform: scale(1.03);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #071d16e8, #071d1690 50%, #071d1622), linear-gradient(0deg, #071d1670, transparent 45%);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: inherit;
  padding-block: 55px;
}

.hero h1 {
  max-width: 1000px;
  margin-bottom: 24px;
  font-size: clamp(42px, 5.1vw, 76px);
}

.hero .lh-prose {
  max-width: 780px;
}

.hero .lh-prose p + p {
  margin-top: 12px;
}

.lh-hero__admissions {
  margin-top: 24px !important;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
}

.hero .actions {
  margin-top: 24px;
}

.hero .btn {
  background: #4ab145;
  color: #092914 !important;
}

.hero .lh-button--outline {
  background: transparent;
  border-color: #ffffff80;
  color: var(--cream) !important;
}

.hero .lh-button--outline:hover {
  background: #ffffff15;
}

.lh-hero__location {
  margin-top: 22px !important;
  font-size: 12px;
  letter-spacing: .1em;
}

.hero-corner {
  position: absolute;
  z-index: 1;
  bottom: -1px;
  right: -1px;
  width: 130px;
  height: 130px;
  border-radius: 100% 0 0;
  background: var(--cream);
}

/* 03. Reusable editorial layouts, scoped to this landing page. */
.lh-section {
  padding: clamp(60px, 6vw, 100px) var(--gutter);
}

.lh-editorial {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 9%;
}

.lh-sticky {
  position: sticky;
  top: calc(var(--header) + 30px);
}

.lh-eyebrow {
  margin-bottom: 18px !important;
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.lh-prose {
  color: var(--muted);
}

.lh-prose p + p {
  margin-top: 20px;
}

.lh-prose--light {
  color: #e1e8de;
}

.lh-emphasis {
  margin-top: 25px !important;
  color: var(--green);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.lh-sage, .lh-split--sage {
  background: var(--sage);
}

.lh-forest {
  background: var(--forest);
  color: var(--cream);
}

.lh-forest .lh-eyebrow, .lh-forest .text-link {
  color: var(--lime);
}

.lh-forest .lh-button--outline {
  border-color: #ffffff70;
  background: transparent;
  color: var(--cream) !important;
}

.lh-forest .lh-button--outline:hover {
  background: #ffffff12;
}

.lh-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.lh-photo {
  min-height: 550px;
}

.lh-split__copy {
  align-self: center;
  padding: clamp(40px, 5vw, 80px);
}

.lh-split__copy h2 {
  margin-bottom: 28px;
}

.lh-parallax {
  position: relative;
  overflow: hidden;
}

.lh-parallax img {
  position: absolute;
  inset: 0;
  transform: scale(var(--photo-scale, 1));
}

/* 04. Gulberg and its garden. */
.lh-campus {
  background: var(--paper);
}

.lh-campus__photo {
  height: clamp(320px, 38vw, 620px);
  margin-top: 42px !important;
  border-radius: 70px 4px 70px 4px;
}

.lh-campus__photo img {
  object-position: 50% 52%;
}

.lh-statement {
  margin-top: 48px !important;
  font-size: clamp(30px, 3.6vw, 54px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.035em;
}

/* 05. Community introduction; yellow event cards and story sections removed. */
.lh-community > .lh-editorial {
  display: block;
  text-align: center;
}

.lh-community h2 {
  max-width: 1000px;
  margin-inline: auto;
}

.lh-community .lh-prose {
  max-width: 940px;
  margin: 28px auto 0;
}

.lh-community > .actions {
  justify-content: center;
}

/* Review marker remains visible; the developer hides it for launch. */
.lh-families {
  padding-block: clamp(40px, 4vw, 64px);
  border-block: 2px solid #b4232d;
  background: #fff0ef;
  color: #b4232d;
}

.lh-families .lh-eyebrow {
  color: inherit;
}

.lh-developer-label {
  margin-bottom: 24px !important;
  font-size: 12px;
  font-weight: 600;
}

.lh-community [data-lahore-word-reveal] {
  font-size: 21px;
  font-weight: 700;
}

/* Body copy begins at the main heading, below any section label. */
@media (min-width: 761px) {
  .lh-editorial:not(.lh-community > .lh-editorial) > div:nth-child(2) {
    padding-top: var(--lh-copy-offset, 0px);
  }
}

.vlc-lahore-page [hidden] {
  display: none !important;
}

/* 06. Visit, admissions and the final invitation. */
.lh-visit {
  background: var(--paper);
}

/* Reference layout: a broad heading beside four open numbered columns. */
.lh-visit > .lh-editorial {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 4vw, 72px);
}

.lh-visit__points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lh-visit .lh-prose .lh-visit__point {
  display: flex;
  flex-direction: column;
  gap: 25px;
  min-width: 0;
  min-height: 170px;
  margin: 0;
  padding-inline: clamp(16px, 1.6vw, 30px);
  border-left: 1px solid var(--line);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.5;
}

.lh-visit .lh-prose .lh-visit__point:first-child {
  padding-left: 0;
  border-left: 0;
}

.lh-visit .lh-prose .lh-visit__point:last-child {
  padding-right: 0;
}

.lh-visit__number {
  align-self: flex-start;
  color: var(--green);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

.lh-visit__number::after {
  content: '';
  display: block;
  width: 30px;
  margin-top: 9px;
  border-bottom: 1px solid currentColor;
}

.lh-visit .lh-prose .lh-visit__note {
  margin-top: 28px;
}

@media (max-width: 1100px) {
  .lh-visit > .lh-editorial {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .lh-visit > .lh-editorial > .lh-prose {
    padding-top: 0;
  }

  .lh-visit h2 {
    max-width: 740px;
  }

  .lh-visit .lh-prose .lh-visit__point {
    min-height: 145px;
  }
}

@media (max-width: 760px) {
  .lh-visit__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 30px;
  }

  .lh-visit .lh-prose .lh-visit__point {
    min-height: 145px;
    padding-inline: 20px;
  }

  .lh-visit .lh-prose .lh-visit__point:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .lh-visit .lh-prose .lh-visit__point:nth-child(even) {
    padding-right: 0;
  }
}

.lh-visit__invitation {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.lh-visit__invitation .lh-emphasis {
  margin-top: 0 !important;
}

.lh-visit__invitation .lh-button--outline {
  border-color: var(--green);
  background: transparent;
  color: var(--green) !important;
}

.lh-visit__invitation .lh-button--outline:hover {
  background: var(--sage);
}

/* 07. Native motion, including whole-word appearance without a glow effect. */
.motion-toggle {
  position: fixed;
  z-index: 55;
  right: 20px;
  bottom: 20px;
  padding: 10px 16px;
  border: 1px solid #c7cdbd;
  border-radius: 30px;
  background: #fffbf5ed;
  color: var(--forest);
  font-size: 11px !important;
  box-shadow: 0 3px 12px #173d310b;
}

.no-js .motion-toggle {
  display: none;
}

.lh-motion .lh-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.lh-motion .lh-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.lh-word-reveal .lh-word {
  display: inline-block;
  visibility: hidden;
}

.lh-word-reveal .lh-word.is-written {
  visibility: visible;
}

.lh-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.motion-off .lh-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-off .lh-word {
  visibility: visible;
}

.motion-off .lh-parallax img {
  transform: none;
}

.motion-off *, .motion-off *::before, .motion-off *::after {
  animation: none !important;
  transition: none !important;
}

/* 08. Existing city navigation and footer layout. */
.site-header {
  height:var(--header);
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  background:var(--cream);
  transition:box-shadow .3s;
}

.site-header.scrolled {
  box-shadow:0 5px 30px #173d3110;
}

.header-inner {
  display:flex;
  align-items:center;
  height:100%;
  gap:26px;
  padding-inline:var(--gutter);
  max-width:1660px;
  margin:auto;
}

.brand {
  width:112px;
  flex:none;
}

.brand img {
  width:112px;
  height:75px;
  object-fit:contain;
}

.desktop-nav {
  display:flex;
  gap:clamp(15px,1.65vw,28px);
  align-items:center;
  margin-left:auto;
}

.desktop-nav a {
  font-size:14px;
  white-space:nowrap;
  position:relative;
}

.desktop-nav a:after {
  display: none;
}

.header-right {
  display:flex;
  align-items:center;
  gap:20px;
  margin-left:18px;
}

.header-right .text-link {
  font-weight:400;
  white-space:nowrap;
}

.header-apply {
  display:grid;
  gap:5px;
  justify-items:stretch;
}

.header-apply .btn {
  min-height:37px;
  padding:9px 20px;
}

.cities {
  display:flex;
  font-size:12px;
  line-height:1.7;
  border-radius:20px;
  overflow:hidden;
  background:#eee9df;
  text-align:center;
}

.cities a,.cities span {
  padding:1px 16px;
}

.cities [aria-current] {
  background:#ffda87;
}

.menu-toggle {
  display:none;
  background:none;
  border:1px solid var(--line);
  width:45px;
  height:45px;
  border-radius:4px;
  margin-left:auto;
}

.menu-toggle svg {
  width:22px;
  height:22px;
  vertical-align:middle;
}

.scroll-progress {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
}

.site-footer {
  padding-block:64px 28px;
  background:var(--cream);
}

.footer-grid {
  display:grid;
  grid-template-columns:1.6fr .8fr 1fr 1.2fr;
  gap:50px;
}

.footer-brand {
  width:118px;
  height:90px;
  object-fit:contain;
  object-position:left center;
}

.footer-tag {
  max-width:280px;
  font-size:13px;
  color:var(--muted);
  margin-top:19px;
}

.footer-title {
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  margin-bottom:20px;
}

.footer-links {
  display:grid;
  gap:10px;
  font-size:13px;
  color:var(--muted);
}

.footer-links a:hover {
  color:var(--green-dark);
}

.footer-bottom {
  border-top:1px solid var(--line);
  margin-top:48px;
  padding-top:25px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:var(--muted);
}

.footer-bottom a {
  text-decoration: none;
}

@media(max-width:1180px) {
  .desktop-nav {
    gap:17px;
  }
  .desktop-nav a {
    font-size:12px;
  }
  .header-inner {
    gap:15px;
  }
  .header-right {
    gap:15px;
    margin-left:7px;
  }
  .header-right .text-link {
    display:none;
  }
  .brand,.brand img {
    width:98px;
  }
  .footer-grid {
    gap:30px;
  }
}

@media(max-width:960px) {
  .header-inner {
    gap:20px;
  }
  .brand img {
    height:65px;
  }
  .menu-toggle {
    display:block;
    order:3;
  }
  .header-right {
    margin-left:auto;
    gap:14px;
  }
  .desktop-nav {
    display:none;
    position:absolute;
    top:var(--header);
    left:0;
    right:0;
    margin:0;
    padding:18px 28px 28px;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    box-shadow:0 15px 20px #173d310d;
  }
  .site-header.menu-open .desktop-nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
  }
  .desktop-nav a {
    padding:15px 0;
    font-size:16px;
  }
  .desktop-nav a:after {
    display:none;
  }
  .footer-grid {
    grid-template-columns:1.3fr 1fr 1fr;
  }
  .footer-grid>div:last-child {
    grid-column:2/span 2;
  }
}

@media(max-width:760px) {
  .header-inner {
    gap:12px;
  }
  .header-apply .btn {
    padding:7px 15px;
    min-height:32px;
    font-size:12px;
  }
  .cities {
    font-size:10px;
  }
  .cities a,.cities span {
    padding-inline:11px;
  }
  .brand,.brand img {
    width:88px;
  }
  .menu-toggle {
    width:40px;
    height:40px;
    margin-left:0;
  }
  .site-footer {
    padding-block:45px 80px;
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:35px 24px;
  }
  .footer-grid>div:first-child {
    grid-column:span 2;
  }
  .footer-grid>div:last-child {
    grid-column:span 2;
  }
  .footer-tag {
    max-width:350px;
  }
  .footer-bottom {
    font-size:11px;
    display:grid;
    gap:12px;
    margin-top:35px;
  }
}

@media(min-width:961px) and (max-width:1450px) {
  .desktop-nav {
    gap:16px;
  }
  .desktop-nav a {
    font-size:12px;
  }
  .header-right>.text-link {
    display:none;
  }
}

/* 09. Responsive reading order and motion preference. */
@media (max-width: 1100px) {
  .lh-editorial {
    gap: 6%;
  }
}

@media (max-width: 960px) {
  :root {
    --header: 80px;
  }
  .lh-split__copy {
    padding-inline: 35px;
  }
}

@media (max-width: 760px) {
  :root {
    --header: 76px;
    --gutter: 22px;
  }
  .hero {
    min-height: calc(100svh - var(--header));
  }
  .hero-content {
    padding-block: 46px 65px;
        line-height: 1.2;

  }
  .hero h1 {
    font-size: clamp(38px, 9vw, 62px);
        line-height: 1;

  }
  .hero .lh-prose {
    font-size: 14px;
  }
  .hero-corner {
    width: 70px;
    height: 70px;
  }
  .hero::after {
    background: linear-gradient(0deg, #071d16ed 5%, #071d1680 65%, #071d1633);
  }
  .hero .actions {
    gap: 15px;
  }
  .hero .btn {
    padding-inline: 17px;
    font-size: 12px;
  }
  .lh-section {
    padding-block: 50px;
  }
  .lh-editorial, .lh-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .lh-sticky {
    position: static;
  }
  .lh-split__copy {
    padding: 42px var(--gutter) 50px;
  }
  .lh-photo {
    min-height: 0;
    height: 75vw;
    max-height: 500px;
  }
  .lh-campus__photo {
    height: 60vw;
    min-height: 240px;
    border-radius: 45px 4px 45px 4px;
  }
  .lh-visit__invitation .actions {
    align-items: flex-start;
    gap: 22px;
  }
  .motion-toggle {
    right: 12px;
    bottom: 12px;
    padding: 8px 12px;
  }
}

@media (max-width: 420px) {
  .vlc-lahore-page .header-inner {
    gap: 8px;
    padding-inline: 16px;
  }
  .vlc-lahore-page .brand, .vlc-lahore-page .brand img {
    width: 70px;
  }
  .vlc-lahore-page .site-header .cities {
    width: 136px;
  }
  .vlc-lahore-page .menu-toggle {
    flex: 0 0 36px;
    width: 36px;
  }
  .lh-visit__invitation .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .lh-visit__invitation .text-link {
    align-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lh-motion .lh-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .lh-word-reveal .lh-word {
    visibility: visible;
  }
  .lh-parallax img {
    transform: none;
  }
}


/* Editorial story popup: an open cream canvas with layered photographs. */
.khi-story-dialog {
  width: min(1440px, 96vw);
  max-width: none;
  max-height: 94svh;
  padding: 0;
  border: 1px solid #173d3126;
  border-radius: 22px;
  background: var(--paper);
  color: var(--forest);
  overscroll-behavior: contain;
}
.khi-story-dialog::backdrop {
  background: #0b281dcc;
  backdrop-filter: blur(8px);
}
.khi-story-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
}
.khi-preview-label {
  display: inline-block;
  margin-left: 14px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
}
.khi-preview-label[hidden] {
  display: none;
}
.khi-story-close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid #173d3128;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest);
  font-size: 27px;
  line-height: 1;
}
.khi-story-page {
  padding: 12px clamp(24px, 5vw, 76px) 54px;
}
.khi-popup-intro,
.khi-popup-gallery {
  display: grid;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  background: transparent;
}
.khi-popup-intro {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  padding: 10px 0 48px;
  border-bottom: 1px solid #173d311c;
}
.khi-popup-copy {
  min-width: 0;
}
.khi-story-page .eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 11px;
  letter-spacing: .18em;
  margin-bottom: 24px;
}
.khi-story-page .eyebrow::after {
  content: '';
  width: 64px;
  height: 1px;
  background: #52776780;
}
.khi-popup-copy h2 {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.05em;
}
.khi-popup-copy h3 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.14;
}
.khi-popup-copy > p:not(.eyebrow) {
  max-width: 48ch;
  margin-top: 24px;
  color: #526459;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.7;
}
.khi-popup-triptych {
  position: relative;
  isolation: isolate;
  height: clamp(270px, 28vw, 390px);
}
.khi-popup-triptych figure {
  position: absolute;
  left: 17%;
  top: 16%;
  z-index: 1;
  width: 39%;
  height: 77%;
  overflow: hidden;
  border: 4px solid var(--paper);
  border-radius: 20px;
  background: #c1cdb8;
  box-shadow: 0 18px 28px #173d3126;
  transform: translateX(-50%) rotate(-8deg);
}
.khi-popup-triptych figure:nth-child(2) {
  left: 50%;
  top: 0;
  z-index: 3;
  width: 43%;
  height: 100%;
  transform: translateX(-50%);
}
.khi-popup-triptych figure:nth-child(3) {
  left: 83%;
  top: 16%;
  transform: translateX(-50%) rotate(8deg);
}
.khi-popup-triptych img,
.khi-gallery-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.khi-popup-gallery {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(34px, 5vw, 80px);
  padding-top: 36px;
}
.khi-popup-gallery__visual {
  position: relative;
  min-width: 0;
}
.khi-gallery-stack {
  position: relative;
  height: clamp(260px, 25vw, 350px);
  margin-inline: 28px;
  isolation: isolate;
}
.khi-gallery-stack figure {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 38%;
  height: 96%;
  overflow: hidden;
  border: 3px solid var(--paper);
  border-radius: 16px;
  background: #c1cdb8;
  box-shadow: 0 14px 26px #173d3122;
  transform: translateX(-50%);
}
.khi-gallery-stack [data-offset="-1"],
.khi-gallery-stack [data-offset="1"] {
  top: 10%;
  z-index: 2;
  height: 78%;
}
.khi-gallery-stack [data-offset="-1"] {
  left: 30%;
}
.khi-gallery-stack [data-offset="1"] {
  left: 70%;
}
.khi-gallery-stack [data-offset="-2"],
.khi-gallery-stack [data-offset="2"] {
  top: 18%;
  z-index: 1;
  height: 62%;
}
.khi-gallery-stack [data-offset="-2"] {
  left: 13%;
}
.khi-gallery-stack [data-offset="2"] {
  left: 87%;
}
.khi-gallery-controls {
  position: absolute;
  top: calc(50% + 18px);
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.khi-gallery-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid #173d3110;
  border-radius: 50%;
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 6px 20px #173d3110;
  font-size: 23px;
  pointer-events: auto;
}
#popup-gallery-count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 800px) {
  .khi-popup-intro,
  .khi-popup-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .khi-popup-intro {
    padding-bottom: 36px;
  }
  .khi-popup-triptych {
    width: 90%;
    height: 330px;
    max-width: 540px;
    margin-inline: auto;
  }
  .khi-popup-gallery > .khi-popup-copy {
    grid-row: 1;
  }
  .khi-gallery-stack {
    height: 310px;
  }
}
@media (max-width: 480px) {
  .khi-story-dialog {
    width: calc(100vw - 16px);
    max-height: 96svh;
    border-radius: 16px;
  }
  .khi-story-toolbar {
    padding: 10px 14px;
    font-size: 9px;
    letter-spacing: .06em;
  }
  .khi-preview-label {
    display: block;
    margin: 2px 0 0;
  }
  .khi-story-page {
    padding: 16px 20px 32px;
  }
  .khi-popup-triptych {
    height: 230px;
    width: 92%;
  }
  .khi-popup-triptych figure {
    border-width: 3px;
    border-radius: 13px;
  }
  .khi-gallery-stack {
    height: 245px;
    margin-inline: 18px;
  }
  .khi-gallery-stack figure {
    width: 43%;
    border-radius: 12px;
    border-width: 2px;
  }
  .khi-gallery-controls button {
    width: 36px;
    height: 36px;
  }
}

/* Text controls keep the story gallery free of arrow glyphs. */
.vlc-lahore-page .khi-gallery-controls button {
  width: auto;
  min-width: 76px;
  padding-inline: 14px;
  font-size: 12px;
}



/*lahore end*/


/*about */


@media (prefers-reduced-motion: reduce) {
  html:not(.js) {
    scroll-behavior: auto;
  }
  html:not(.js) *,
  html:not(.js) *:before,
  html:not(.js) *:after {
    animation: none !important;
    transition: none !important;
  }
  html:not(.js) .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  html:not(.js) .wipe {
    clip-path: none !important;
  }
  html:not(.js) .hero-slide {
    transform: none !important;
  }
}
/* Without JavaScript, every word and every learning stage remains available. */
html:not(.js) .flight-section,
html:not(.js) .journey {
  height: auto;
  min-height: 0;
}
html:not(.js) .flight-stage,
html:not(.js) .journey-stage {
  position: relative;
  top: 0;
  height: auto;
  padding-block: 70px;
}
html:not(.js) .story-texts {
  height: auto;
}
html:not(.js) .story-text {
  position: static;
  opacity: 1;
  transform: none;
  margin-bottom: 20px;
}
html:not(.js) .story-tabs,
html:not(.js) .journey-dots,
html:not(.js) .motion-toggle {
  display: none;
}
html:not(.js) .journey-card {
  opacity: 1;
  transform: none;
}
/* Normal-speed video playback; original artwork remains a loading/error fallback. */
.flight-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse at center, #000 38%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
.flight-art.video-ready .flight-video {
  opacity: 1;
}
.flight-art.video-ready > :not(.flight-video) {
  visibility: hidden;
}
.flight-art.video-ready {
  aspect-ratio: 16/10;
}
@media (max-width: 760px) {
  .flight-art.video-ready {
    width: 100%;
    max-width: 520px;
  }
}
.belief .type-letter {
  visibility: hidden;
  color: var(--green-dark);
  transition: none;
}
.belief .type-letter.written,
.motion-off .belief .type-letter {
  visibility: visible;
}
.sr-belief {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-dot {
  display: block;
  cursor: default;
}
.hero-dot.active:after {
  background: var(--yellow);
}
/* Fill the hero edge to edge, including during image transitions. */
.hero-slide {
  max-width: none;
}
.hero-controls {
  margin-right: 0;
}

.ad-banner {
  height: calc(100svh - var(--header));
  min-height: 440px;
  max-height: 1000px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--forest);
}
.ad-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.ad-banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #071b2059, #071b2030 65%, #071b201c);
}
.ad-banner h1 {
  position: relative;
  z-index: 1;
  color: white;
  font-size: clamp(44px, 10.8vw, 185px);
  letter-spacing: -0.035em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 5px 12px #0006;
  max-width: 94%;
  font-weight: 600;
}
.ad-campus {
  border-top: 0;
  padding-top: 0;
}
@media (max-width: 760px) {
  .ad-banner {
    height: 66svh;
    min-height: 390px;
  }
  .ad-banner > img {
    object-position: 45% center;
  }
  .ad-banner h1 {
    font-size: 11vw;
  }
}

.about-hero {
  height: calc(100svh - var(--header));
  min-height: 600px;
  max-height: 1000px;
  position: relative;
  color: var(--cream);
  background: var(--forest);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.about-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.about-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218b8, transparent 85%),
    linear-gradient(0deg, #092218b3, transparent 75%);
}
.about-hero .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: 80px;
}
.about-hero h1 {
  font-size: clamp(50px, 6.6vw, 100px);
  max-width: 1000px;
}
.about-hero h1 span {
  color: #e6ec9b;
}
.about-hero .lead {
  max-width: 520px;
  margin-top: 27px;
  color: #f0f2e8;
}
.about-hero .text-link {
  margin-top: 30px;
}
.about-mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  align-items: start;
}
.about-mission h2 {
  font-size: clamp(35px, 4.3vw, 65px);
}
.about-mission .copy {
  color: var(--muted);
  padding-top: 42px;
  font-size: 17px;
}
.about-vision {
  background: var(--forest);
  color: var(--cream);
  padding-block: 100px;
}
.vision-text {
  font-size: clamp(34px, 4.8vw, 73px);
  line-height: 1.3;
  letter-spacing: -0.045em;
  max-width: 1200px;
}
.vision-word {
  opacity: 0.2;
  transition: opacity 0.2s;
}
.vision-word.visible {
  opacity: 1;
}
.about-values-head {
  display: flex;
  justify-content: space-between;
  gap: 45px;
  align-items: flex-end;
  margin-bottom: 65px;
}
.about-values-head p {
  max-width: 400px;
  color: var(--muted);
}
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 55px 28px;
}
.about-value {
  grid-column: span 2;
}
.about-value:nth-child(1),
.about-value:nth-child(2) {
  grid-column: span 3;
}
.about-value img {
  width: 100%;
  aspect-ratio: 1.42;
  object-fit: cover;
  border-radius: 6px;
}
.about-value:first-child img {
  border-top-left-radius: 100px;
}
.about-value:last-child img {
  border-bottom-right-radius: 80px;
}
.value-title {
  display: flex;
  gap: 20px;
  align-items: center;
  margin: 22px 0 14px;
}
.value-title span {
  font-size: 13px;
  color: var(--green-dark);
}
.value-title h3 {
  font-size: 30px;
}
.about-value p {
  font-size: 15px;
  color: var(--muted);
  max-width: 510px;
}
.about-team {
  background: #eeeade;
}
.about-team-head {
  max-width: 730px;
  margin-bottom: 70px;
}
.leader {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 9%;
  align-items: center;
  padding-block: 55px;
  border-top: 1px solid var(--line);
}
.leader:nth-of-type(even) {
  grid-template-columns: 1.2fr 0.8fr;
}
.leader:nth-of-type(even) .leader-photo {
  order: 2;
}
.leader-photo {
  width: 100%;
  max-height: 550px;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 90px 6px 6px 6px;
}
.leader h3 {
  font-size: clamp(30px, 3.4vw, 50px);
  margin-bottom: 12px;
}
.leader .role {
  color: var(--green-dark);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.leader-bio {
  font-size: 15px;
  color: var(--muted);
}
.leader-bio p + p {
  margin-top: 18px;
}
.about-visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--green-dark);
  color: white;
}
.about-visit img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
}
.about-visit-copy {
  padding: clamp(45px, 6vw, 100px);
  align-self: center;
}
.about-visit-copy p {
  margin-top: 25px;
  max-width: 480px;
}
.about-visit-copy .eyebrow {
  margin-top: 0;
  color: var(--yellow);
}
.about-progress {
  position: fixed;
  top: var(--header);
  height: 2px;
  background: var(--green-dark);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 51;
}
.motion-off .vision-word {
  opacity: 1;
}
@media (max-width: 760px) {
  .about-hero {
    min-height: 600px;
    max-height: 850px;
  }
  .about-hero .wrap {
    padding-block: 60px;
  }
  .about-hero h1 {
    font-size: clamp(43px, 10vw, 70px);
  }
  .about-hero > img {
    object-position: 58% center;
  }
  .about-mission {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .about-mission .copy {
    padding-top: 0;
    font-size: 15px;
  }
  .about-vision {
    padding-block: 65px;
  }
  .about-values-head {
    display: block;
    margin-bottom: 40px;
  }
  .about-values-head p {
    margin-top: 25px;
  }
  .about-values-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-value,
  .about-value:nth-child(1),
  .about-value:nth-child(2) {
    grid-column: auto;
  }
  .about-value img {
    aspect-ratio: 1.4;
  }
  .leader,
  .leader:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 40px;
  }
  .leader:nth-of-type(even) .leader-photo {
    order: 0;
  }
  .leader-photo {
    max-height: 480px;
    object-position: center 18%;
  }
  .about-team-head {
    margin-bottom: 35px;
  }
  .about-visit {
    grid-template-columns: 1fr;
  }
  .about-visit img {
    min-height: 0;
    height: 320px;
  }
  .about-visit-copy {
    padding: 55px var(--gutter);
  }
}

@media (min-width: 961px) and (max-width: 1450px) {
  .desktop-nav {
    gap: 16px;
  }
  .desktop-nav a {
    font-size: 12px;
  }
  .header-right > .text-link {
    display: none;
  }
}
/* About headings use the wording and hierarchy of the live page. */
.about-mission h2.section-label {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 20px;
}
.about-mission .mission-statement {
  font-size: clamp(35px, 4.3vw, 65px);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -0.045em;
  max-width: 720px;
}
.about-vision h2.section-label {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 26px;
}
.about-vision .vision-text {
  margin: 0;
  font-weight: 600;
}
.about-values-head h2 {
  font-size: clamp(36px, 4.1vw, 62px);
}

/* Editorial story popup: an open cream canvas with layered photographs. */
.khi-story-dialog {
  width: min(1440px, 96vw);
  max-width: none;
  max-height: 94svh;
  padding: 0;
  border: 1px solid #173d3126;
  border-radius: 22px;
  background: var(--paper);
  color: var(--forest);
  overscroll-behavior: contain;
}
.khi-story-dialog::backdrop {
  background: #0b281dcc;
  backdrop-filter: blur(8px);
}
.khi-story-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.khi-preview-label {
  display: inline-block;
  margin-left: 14px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
}
.khi-preview-label[hidden] {
  display: none;
}
.khi-story-close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid #173d3128;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest);
  font-size: 27px;
  line-height: 1;
}
.khi-story-page {
  padding: 12px clamp(24px, 5vw, 76px) 54px;
}
.khi-popup-intro,
.khi-popup-gallery {
  display: grid;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  background: transparent;
}
.khi-popup-intro {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  padding: 10px 0 48px;
  border-bottom: 1px solid #173d311c;
}
.khi-popup-copy {
  min-width: 0;
}
.khi-story-page .eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-bottom: 24px;
}
.khi-story-page .eyebrow::after {
  content: "";
  width: 64px;
  height: 1px;
  background: #52776780;
}
.khi-popup-copy h2 {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.05em;
}
.khi-popup-copy h3 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.14;
}
.khi-popup-copy > p:not(.eyebrow) {
  max-width: 48ch;
  margin-top: 24px;
  color: #526459;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.7;
}
.khi-popup-triptych {
  position: relative;
  isolation: isolate;
  height: clamp(270px, 28vw, 390px);
}
.khi-popup-triptych figure {
  position: absolute;
  left: 17%;
  top: 16%;
  z-index: 1;
  width: 39%;
  height: 77%;
  overflow: hidden;
  border: 4px solid var(--paper);
  border-radius: 20px;
  background: #c1cdb8;
  box-shadow: 0 18px 28px #173d3126;
  transform: translateX(-50%) rotate(-8deg);
}
.khi-popup-triptych figure:nth-child(2) {
  left: 50%;
  top: 0;
  z-index: 3;
  width: 43%;
  height: 100%;
  transform: translateX(-50%);
}
.khi-popup-triptych figure:nth-child(3) {
  left: 83%;
  top: 16%;
  transform: translateX(-50%) rotate(8deg);
}
.khi-popup-triptych img,
.khi-gallery-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.khi-popup-gallery {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(34px, 5vw, 80px);
  padding-top: 36px;
}
.khi-popup-gallery__visual {
  position: relative;
  min-width: 0;
}
.khi-gallery-stack {
  position: relative;
  height: clamp(260px, 25vw, 350px);
  margin-inline: 28px;
  isolation: isolate;
}
.khi-gallery-stack figure {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 38%;
  height: 96%;
  overflow: hidden;
  border: 3px solid var(--paper);
  border-radius: 16px;
  background: #c1cdb8;
  box-shadow: 0 14px 26px #173d3122;
  transform: translateX(-50%);
}
.khi-gallery-stack [data-offset="-1"],
.khi-gallery-stack [data-offset="1"] {
  top: 10%;
  z-index: 2;
  height: 78%;
}
.khi-gallery-stack [data-offset="-1"] {
  left: 30%;
}
.khi-gallery-stack [data-offset="1"] {
  left: 70%;
}
.khi-gallery-stack [data-offset="-2"],
.khi-gallery-stack [data-offset="2"] {
  top: 18%;
  z-index: 1;
  height: 62%;
}
.khi-gallery-stack [data-offset="-2"] {
  left: 13%;
}
.khi-gallery-stack [data-offset="2"] {
  left: 87%;
}
.khi-gallery-controls {
  position: absolute;
  top: calc(50% + 18px);
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.khi-gallery-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid #173d3110;
  border-radius: 50%;
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 6px 20px #173d3110;
  font-size: 23px;
  pointer-events: auto;
}
#popup-gallery-count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 800px) {
  .khi-popup-intro,
  .khi-popup-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .khi-popup-intro {
    padding-bottom: 36px;
  }
  .khi-popup-triptych {
    width: 90%;
    height: 330px;
    max-width: 540px;
    margin-inline: auto;
  }
  .khi-popup-gallery > .khi-popup-copy {
    grid-row: 1;
  }
  .khi-gallery-stack {
    height: 310px;
  }
}
@media (max-width: 480px) {
  .khi-story-dialog {
    width: calc(100vw - 16px);
    max-height: 96svh;
    border-radius: 16px;
  }
  .khi-story-toolbar {
    padding: 10px 14px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }
  .khi-preview-label {
    display: block;
    margin: 2px 0 0;
  }
  .khi-story-page {
    padding: 16px 20px 32px;
  }
  .khi-popup-triptych {
    height: 230px;
    width: 92%;
  }
  .khi-popup-triptych figure {
    border-width: 3px;
    border-radius: 13px;
  }
  .khi-gallery-stack {
    height: 245px;
    margin-inline: 18px;
  }
  .khi-gallery-stack figure {
    width: 43%;
    border-radius: 12px;
    border-width: 2px;
  }
  .khi-gallery-controls button {
    width: 36px;
    height: 36px;
  }
  .khi-campus-card .khi-campus-stage {
    min-height: 0;
  }
}

/* Karachi About: current approved document, 20 October 2026. */
.about-hero h1 {
  max-width: 1050px;
  font-size: clamp(44px, 6vw, 86px);
}
.about-hero .lead {
  max-width: 760px;
  font-size: clamp(16px, 1.4vw, 20px);
}
.about-hero .actions {
  margin-top: 28px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.about-hero .text-link {
  margin-top: 0;
  display: block;
}
.about-hero .wrap {
  padding-block: 60px;
}
.about-intro {
  max-width: 1100px;
  text-align: center;
  font-size: clamp(20px, 2vw, 28px);
  padding-bottom: 24px;
}
.about-intro p:last-child {
  font-weight: 600;
  color: var(--forest);
}
.editorial-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 100px);
  align-items: start;
}
.editorial-split h2 {
  margin-bottom: 28px;
  color: var(--forest);
}
.on-dark h2 {
  color: var(--cream);
}
.reading-copy {
  font-size: 17px;
}
.reading-copy .text-link,
.reading-copy .btn {
  margin-top: 30px;
}
.section-lead {
  font-size: clamp(20px, 2vw, 27px);
  color: var(--forest);
  margin-top: 25px;
}
.story-photo {
  width: 100%;
  aspect-ratio: 1.45;
  object-fit: cover;
  border-radius: 16px;
  margin-top: 36px;
}
.bird-section {
  align-items: center;
}
.about-bird-art {
  position: relative;
  aspect-ratio: 1.3;
  min-width: 0;
}
.about-bird-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.about-bird-static {
  padding: 18%;
  opacity: 0;
}
.about-bird-animation:not([src]) {
  visibility: hidden;
}
.motion-off .about-bird-static {
  opacity: 1;
}
.motion-off .about-bird-animation {
  visibility: hidden;
}
.making-section {
  background: #e5ebd8;
}
.leadership-intro {
  max-width: 850px;
  margin-bottom: 45px;
}
.leadership-intro h2 {
  color: var(--forest);
  margin-bottom: 24px;
}
.leadership-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}
.leadership-card {
  grid-column: span 2;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
}
.leadership-card:nth-child(-n + 2) {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 42% 1fr;
  align-items: center;
}
.leadership-card > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3/4;
}
.leadership-card-copy {
  padding: clamp(20px, 2.4vw, 36px);
}
.leadership-card h3 {
  color: var(--forest);
}
.leader-role {
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
}
.leader-bio {
  color: var(--muted);
  margin-top: 24px;
}
.about-visit-copy .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-top: 24px;
}
.about-visit-copy .text-link {
  color: var(--cream);
}
@media (max-width: 960px) {
  .editorial-split {
    grid-template-columns: 1fr;
  }
  .about-bird-art {
    max-width: 650px;
    width: 100%;
    margin: auto;
  }
  .leadership-card:nth-child(-n + 2) {
    display: block;
  }
  .leadership-card > img {
    height: 320px;
    object-position: center 25%;
  }
  .leadership-card {
    grid-column: span 3;
  }
  .about-hero {
    max-height: none;
    height: auto;
    min-height: 650px;
  }
  .about-hero .wrap {
    padding-top: 90px;
  }
}
@media (max-width: 600px) {
  .leadership-cards {
    grid-template-columns: 1fr;
  }
  .leadership-card,
  .leadership-card:nth-child(-n + 2) {
    grid-column: auto;
  }
  .about-hero .wrap {
    padding-block: 55px;
  }
  .about-hero h1 {
    font-size: 44px;
  }
  .reading-copy {
    font-size: 16px;
  }
  .about-visit-copy .actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .header-inner {
    gap: 12px;
  }
  .header-right {
    min-width: 0;
  }
  .site-header .brand {
    flex-shrink: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .about-bird-static {
    opacity: 1;
  }
  .about-bird-animation {
    visibility: hidden;
  }
}
@media (max-width: 400px) {
  .site-header .header-inner {
    padding-inline: 12px;
    gap: 8px;
  }
  .site-header .brand,
  .site-header .brand img {
    width: 76px;
  }
  .site-header .cities {
    width: 140px;
  }
  .site-header .header-right {
    margin-left: auto;
  }
  .site-header .menu-toggle {
    width: 32px;
    height: 36px;
    flex: 0 0 32px;
    padding: 0;
  }
}

/* About refinements: editorial introduction, leadership slider and biographies. */
.about-intro {
  max-width: 1512px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  text-align: left;
  padding-bottom: 80px;
  font-size: clamp(19px, 1.8vw, 26px);
}
.about-intro-copy {
  padding-top: 24px;
}
.about-intro-photos {
  width: 100%;
  height: 440px;
  margin: 0;
}
.about-intro-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.editorial-split > .reading-copy {
  padding-top: clamp(38px, 4vw, 60px);
}
#our-story > .reading-copy {
  padding-top: 58px;
}
.bird-section > .reading-copy {
  padding-top: 0;
}
.leadership-intro > p {
  margin-left: clamp(0px, 2vw, 28px);
}
.leadership-slider {
  position: relative;
  margin-inline: -16px;
}
.leader-slider-controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 16px 18px;
}
.leader-slider-controls button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--forest);
  font-size: 24px;
  box-shadow: 0 5px 18px #173d3110;
}
.leader-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 22px 16px 38px;
  scroll-padding-inline: 16px;
}
.leader-track::-webkit-scrollbar {
  display: none;
}
.leader-slide {
  flex: 0 0 clamp(240px, 24vw, 310px);
  scroll-snap-align: center;
  transition: transform 0.35s;
  transform: scale(0.96);
  transform-origin: center;
}
.leader-slide.is-active {
  transform: scale(1.025);
}
.leader-open {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  border: 1px solid #173d3120;
  border-radius: 18px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 12px 28px #173d3110;
  transition: box-shadow 0.25s;
}
.leader-open:hover {
  box-shadow: 0 18px 36px #173d3125;
}
.leader-open > img,
.leader-open > .leader-portrait-placeholder {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center 23%;
}
.leader-slide-copy {
  display: block;
  min-height: 204px;
  padding: 25px 24px;
}
.leader-name {
  display: block;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.04em;
  line-height: 1.25;
  color: var(--forest);
}
.leader-slide-copy .leader-role {
  display: block;
  margin-top: 10px;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 400;
  min-height: 42px;
}
.leader-card-rule {
  display: block;
  width: 34px;
  height: 3px;
  background: #cfc59d;
  margin-block: 16px;
}
.leader-card-bio {
  font-size: 15px;
  color: var(--muted);
}
.leader-portrait-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(140deg, #e6ebdb, #b6c5aa);
  color: var(--forest);
}
.leader-portrait-placeholder > span {
  font-size: 66px;
  font-weight: 600;
  letter-spacing: -0.06em;
}
.leader-portrait-placeholder small {
  font-size: 12px;
  letter-spacing: 0.04em;
}
.leader-dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 8px 0;
}
.leader-dots button {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #bdc5b3;
}
.leader-dots button[aria-pressed="true"] {
  background: var(--forest);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.leader-dialog {
  width: min(1240px, 94vw);
  max-width: none;
  max-height: 92svh;
  padding: clamp(24px, 4vw, 60px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--cream);
  color: var(--ink);
  overscroll-behavior: contain;
}
.leader-dialog::backdrop {
  background: #102f29b5;
  backdrop-filter: blur(5px);
}
.leader-dialog-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.leader-dialog-portrait > img {
  width: 100%;
  height: auto;
  max-height: 650px;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 70px 6px 6px 6px;
}
.leader-dialog-portrait > .leader-portrait-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 70px 6px 6px 6px;
}
.leader-dialog-copy {
  padding-block: 30px;
}
.leader-dialog-copy h2 {
  font-size: clamp(30px, 3.5vw, 48px);
  color: var(--forest);
  margin-bottom: 12px;
}
.leader-dialog-role {
  font-weight: 600;
  font-size: 15px;
}
.leader-dialog-bio {
  margin-top: 26px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}
.leader-dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--forest);
  font-size: 26px;
  line-height: 1;
}
body.bio-open {
  overflow: hidden;
}
@media (max-width: 960px) {
  .about-intro {
    grid-template-columns: 1fr;
  }
  .about-intro-copy {
    padding-top: 0;
  }
  .about-intro-photos {
    max-width: 650px;
    justify-self: center;
  }
  .editorial-split > .reading-copy,
  #our-story > .reading-copy {
    padding-top: 0;
  }
  .leader-slide {
    flex-basis: 280px;
  }
}
@media (max-width: 600px) {
  .about-intro {
    padding-bottom: 36px;
  }
  .about-intro-photos {
    height: 290px;
    width: 100%;
  }
  .leader-slide {
    flex-basis: 250px;
  }
  .leader-open > img,
  .leader-open > .leader-portrait-placeholder {
    height: 280px;
  }
  .leader-slide-copy {
    padding: 22px;
    min-height: 200px;
  }
  .leader-dialog-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .leader-dialog {
    padding: 42px 22px 24px;
  }
  .leader-dialog-portrait > img,
  .leader-dialog-portrait > .leader-portrait-placeholder {
    max-height: 340px;
    aspect-ratio: 1;
    object-position: center 25%;
  }
  .leader-dialog-copy {
    padding-block: 16px;
  }
  .leadership-intro > p {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .leader-slide,
  .leader-open {
    transition: none;
  }
}
.motion-off .leader-slide,
.motion-off .leader-open {
  transition: none;
}
.leader-track {
  padding-inline: max(16px, calc((100% - clamp(240px, 24vw, 310px)) / 2));
  scroll-padding-inline: 0;
}
@media (max-width: 960px) {
  .leader-track {
    padding-inline: max(16px, calc((100% - 280px) / 2));
  }
}
@media (max-width: 600px) {
  .leader-track {
    padding-inline: max(16px, calc((100% - 250px) / 2));
  }
}

/* Reference correction: full leadership row, angled values montage and heading alignment. */
.about-intro {
  grid-template-columns: 1fr 1.12fr;
  gap: clamp(30px, 4vw, 65px);
  font-size: 17px;
}
.about-intro-copy h2 {
  font-size: clamp(34px, 3.7vw, 59px);
  color: var(--forest);
  margin-bottom: 28px;
}
.about-intro-copy > p {
  font-size: 17px;
  line-height: 1.8;
}
.about-intro-copy {
  padding-top: 0;
}
.about-values-montage {
  display: flex;
  align-items: center;
  width: 100%;
  height: 380px;
  gap: 4px;
  isolation: isolate;
}
.about-values-montage figure {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 88%;
  overflow: hidden;
  clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%);
  margin-inline: -11px;
}
.about-values-montage figure:nth-child(even) {
  transform: translateY(22px);
}
.about-values-montage figure:nth-child(odd) {
  transform: translateY(-12px);
}
.about-values-montage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s;
}
.about-values-montage figure:hover img {
  transform: scale(1.06);
}
.about-values-montage figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 55px 8px 20px 15px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: linear-gradient(transparent, #175743e8);
}
.about-values-montage figure:nth-child(2) figcaption {
  background: linear-gradient(transparent, #bd9437ee);
}
.about-values-montage figure:nth-child(3) figcaption {
  background: linear-gradient(transparent, #aa5248ee);
}
.about-values-montage figure:nth-child(4) figcaption {
  background: linear-gradient(transparent, #668b60ee);
}
.about-values-montage figure:nth-child(5) figcaption {
  background: linear-gradient(transparent, #387da5ee);
}
.editorial-split > .reading-copy {
  padding-top: 0;
}
#our-story > .reading-copy {
  padding-top: 48px;
}
#mission > .reading-copy {
  padding-top: 48px;
}
.leadership-intro > p {
  margin-left: 0;
}
.leadership-slider {
  margin-inline: 0;
  padding-inline: 30px;
}
.leader-track {
  gap: 18px;
  padding: 40px 8px 42px;
  align-items: center;
  scroll-snap-type: none;
  overflow-x: hidden;
}
.leader-slide {
  flex: 1 1 0;
  min-width: 0;
  transform: none;
  transition: flex 0.4s, transform 0.4s;
}
.leader-slide.is-active {
  flex: 1.32 1 0;
  transform: scale(1.035);
}
.leader-open > img,
.leader-open > .leader-portrait-placeholder {
  height: 260px;
}
.leader-slide.is-active .leader-open > img,
.leader-slide.is-active .leader-open > .leader-portrait-placeholder {
  height: 310px;
}
.leader-slide-copy {
  padding: 22px 16px;
  min-height: 190px;
}
.leader-name {
  font-size: clamp(17px, 1.55vw, 24px);
}
.leader-slide-copy .leader-role {
  font-size: 13px;
  min-height: 42px;
}
.leader-card-bio {
  font-size: 13px;
}
/* .leader-slider-controls {
  position: absolute;
  inset: 0 -35px 42px;
  padding: 0;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.leader-slider-controls button {
  pointer-events: auto;
  width: 64px;
  height: 48px;
  font-size: 11px;
  z-index: 2;
}
.leader-dots {
  padding-top: 10px;
} */
.khi-gallery-controls button {
  width: auto;
  min-width: 64px;
  padding-inline: 10px;
  border-radius: 24px;
  font-size: 11px;
}
@media (max-width: 1100px) and (min-width: 961px) {
  .leader-track {
    gap: 10px;
  }
  .leader-slide-copy {
    padding: 18px 12px;
  }
  .leader-open > img,
  .leader-open > .leader-portrait-placeholder {
    height: 220px;
  }
  .leader-slide.is-active .leader-open > img,
  .leader-slide.is-active .leader-open > .leader-portrait-placeholder {
    height: 260px;
  }
}
@media (max-width: 960px) {
  .about-intro {
    grid-template-columns: 1fr;
  }
  .about-values-montage {
    max-width: 720px;
    margin-inline: auto;
  }
  .editorial-split > .reading-copy,
  #our-story > .reading-copy,
  #mission > .reading-copy {
    padding-top: 0;
  }
  .leadership-slider {
    padding-inline: 0;
  }
  .leader-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding: 28px 16px 36px;
  }
  .leader-slide,
  .leader-slide.is-active {
    flex: 0 0 260px;
    scroll-snap-align: start;
    transform: none;
  }
  .leader-slide.is-active {
    transform: scale(1.025);
  }
  .leader-open > img,
  .leader-open > .leader-portrait-placeholder,
  .leader-slide.is-active .leader-open > img,
  .leader-slide.is-active .leader-open > .leader-portrait-placeholder {
    height: 280px;
  }
  .leader-name {
    font-size: 23px;
  }
  .leader-slider-controls {
    position: static;
    justify-content: flex-end;
    gap: 10px;
    padding-bottom: 10px;
  }
  .leader-slider-controls button {
    width: 72px;
  }
  .leader-slide-copy {
    min-height: 200px;
  }
}
@media (max-width: 600px) {
  .about-values-montage {
    height: 260px;
    gap: 2px;
  }
  .about-values-montage figure {
    margin-inline: -5px;
  }
  .about-values-montage figcaption {
    font-size: 8px;
    padding: 40px 2px 15px 5px;
  }
  .about-intro-copy h2 {
    font-size: 34px;
  }
  .leader-slide,
  .leader-slide.is-active {
    flex-basis: 240px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .leader-slide,
  .about-values-montage img {
    transition: none;
  }
}
.motion-off .leader-slide,
.motion-off .about-values-montage img {
  transition: none;
}
.about-values-montage figcaption {
  padding-right: 24%;
  padding-left: 4%;
  font-size: 11px;
}
@media (max-width: 600px) {
  .about-values-montage figcaption {
    font-size: 7px;
    padding-right: 24%;
    padding-left: 2%;
  }
}

/* Immediate leadership selection and scroll-driven closing statements. */
/* .leader-slide,
.leader-slide.is-active {
  transition: none;
}
.leader-slider-controls button {
  width: 48px;
  height: 48px;
  font-size: 26px;
} */
.scroll-typewriter {
  font-size: 1.05em;
  font-weight: 600;
}
.typewriter-ready .typewriter-char {
  visibility: hidden;
}
.typewriter-ready .typewriter-char.is-typed {
  visibility: visible;
}
.motion-off .typewriter-ready .typewriter-char {
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .typewriter-ready .typewriter-char {
    visibility: visible;
  }
}

/* Closing-line refinement: add 2px to the approved 5% larger size. */
.scroll-typewriter {
  font-size: calc(1.05em + 2px);
}
.closing-highlight {
  background: var(--yellow);
  color: var(--ink);
  padding: 3px 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Highlight appears together with each typed character. */
.typewriter-ready .closing-highlight {
  background: transparent;
  padding: 0;
}
.typewriter-ready .closing-highlight .typewriter-char.is-typed {
  background: var(--yellow);
  box-shadow: 0 3px 0 var(--yellow), 0 -3px 0 var(--yellow);
}
.motion-off .closing-highlight .typewriter-char {
  background: var(--yellow);
  box-shadow: 0 3px 0 var(--yellow), 0 -3px 0 var(--yellow);
}
@media (prefers-reduced-motion: reduce) {
  .closing-highlight .typewriter-char {
    background: var(--yellow);
    box-shadow: 0 3px 0 var(--yellow), 0 -3px 0 var(--yellow);
  }
}

/* Approved larger individual panels; body and panel-label type remain unchanged. */
@media (min-width: 961px) {
  .about-values-montage {
    height: 418px;
    gap: 4px;
    margin-left: -5%;
  }
  .about-values-montage figure {
    flex: none;
    width: calc((100% - 16px + 110px) / 5 * 1.1);
  }
}
.about-intro-copy > p:last-child {
  font-size: calc(17px * 1.05 + 2px);
}
@media (max-width: 960px) {
  .about-values-montage {
    height: 418px;
  }
}
@media (max-width: 600px) {
  .about-values-montage {
    height: 286px;
  }
  .about-values-montage figure {
    height: 88%;
  }
  .about-intro-copy > p:last-child {
    font-size: calc(16px * 1.05 + 2px);
  }
}





/* Leadership slider: smooth selection without layout shift, and centred arrow controls. Supersedes the earlier "immediate selection" rule. On desktop the cards are a fixed, larger width; cards beyond the edges are hidden and the arrows glide the row so the selected card comes into view (js/leadership.js). The selected card is emphasised with a scale transform only (no shadow): card widths and photo heights stay fixed, so no text re-wraps and nothing on the page moves while it animates. */
.leader-slider-controls button {
  display: grid;
  placeitems: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid #173d3133;
  borderradius: 50%;
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 8px 20px #173d3114;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
    transform 0.15s;
}
.leader-slider-controls button svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  strokelinecap: round;
  stroke-linejoin: round;
}
.leader-slider-controls button:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}
.leader-slider-controls button:active {
  transform: scale(0.94);
} /* Desktop: the cards start exactly at the content edge, in line with the heading; the arrows sit above the cards on the right (as on phones). */
@media (min-width: 961px) {
  .leadership-slider {
    padding-inline: 0;
  }
  .leader-slider-controls {
    position: static;
    inset: auto;
    display: flex;
    justify-content: flexend;
    gap: 12px;
    padding: 0;
  }
  .leader-track {
    gap: 28px;
    overflow-x: hidden;
    padding-inline: 0;
  }
  .leader-slide:first-child {
    transform-origin: left center;
  }
  .leader-slide:last-child {
    transform-origin: right center;
  }
  .leader-slide,
  .leader-slide.is-active {
    flex: 0 0 clamp(260px, 21vw, 310px);
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .leader-slide.is-active {
    position: relative;
    z-index: 1;
    transform: scale(1.06);
  }
  .leader-slide-copy {
    padding-inline: 14px;
  }
  .leader-open > img,
  .leader-open > .leader-portrait-placeholder,
  .leader-slide.is-active .leader-open > img,
  .leader-slide.is-active .leader-open > .leader-portraitplaceholder {
    height: 320px;
  }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .leader-open > img,
  .leader-open > .leader-portrait-placeholder,
  .leader-slide.is-active .leader-open > img,
  .leader-slide.is-active .leader-open > .leader-portraitplaceholder {
    height: 290px;
  }
} /* Names, titles and "Read bio" / "Coming soon" are centred on every card; "Read bio" / "Coming soon" are bold. */
.leader-name,
.leader-slide-copy .leader-role,
.leader-card-bio {
  text-align: center;
}
.leader-card-bio {
  display: block;
  font-weight: 600;
} /* Cards have no shadow in any state. */
.leader-open,
.leader-open:hover,
.leader-slide.is-active .leader-open {
  box-shadow: none;
} /* Phone and tablet keep the touch-scroll row. It runs edge to edge, with the first card starting in line with the heading; the selected card eases in. */
@media (max-width: 960px) {
  .leader-track {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-paddinginline: var(--gutter);
  }
  .leader-slide:first-child {
    transform-origin: left center;
  }
  .leader-slide,
  .leader-slide.is-active {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .leader-slide,
  .leader-slide.is-active,
  .leader-slider-controls button {
    transition: none;
  }
}
.motion-off .leader-slide,
.motion-off .leader-slide.is-active {
  transition: none;
}




/*about end*/

/*about lahore*/
/* Scoped variables and base structural rules */
.vlc-about-lahore-page {
  --cream: #fff7ed;
  --paper: #fffbf5;
  --green: #4ab145;
  --green-dark: #287b30;
  --forest: #173d31;
  --yellow: #eee75b;
  --ink: #2f2f2f;
  --muted: #64675f;
  --line: #dcded2;
  
  --ease: cubic-bezier(.2,.75,.25,1);
  --gutter: clamp(22px,5vw,88px);
}

/* Base HTML structure targeting the sandbox directly */
html:has(.vlc-about-lahore-page) {
  scroll-behavior: smooth;
  scroll-padding-top: 28px;
}

body:has(.vlc-about-lahore-page) {
  margin: 0;
  color: #2f2f2f; /* Fallback direct color match */
  background: #fff7ed; /* Fallback direct background match */
  font-family: Poppins,Arial,sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

body.bio-open:has(.vlc-about-lahore-page) {
  overflow: hidden;
}

html.motion-off:has(.vlc-about-lahore-page) {
  scroll-behavior: auto;
}

/* Nesting all structural element resets and utility components */
.vlc-about-lahore-page {

 

  button, a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    color: inherit;
    text-decoration: none;
  }

  button, input {
    font: inherit;
  }

  button {
    cursor: pointer;
  }

  img {
    display: block;
    max-width: 100%;
  }

  h1, h2, h3, p, figure {
    margin: 0;
  }

  h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.14;
  }

  h1 {
    font-size: clamp(42px,5.1vw,84px);
  }

  h2 {
    font-size: clamp(34px,3.7vw,56px); /* Set by established Lahore typography overrides */
  }

  h3 {
    font-size: clamp(22px,2vw,30px);
  }

  p+p {
    margin-top: 1em;
  }

  button:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 3px solid var(--green-dark);
    outline-offset: 6px;
  }

  .on-dark :focus-visible {
    outline-color: var(--yellow);
  }

  ::selection {
    background: var(--yellow);
    color: var(--ink);
  }

  #main {
    padding-top: 0;
  }

  /* Utility Layouts */
  .wrap {
    max-width: 1512px;
    margin: auto;
    padding-inline: var(--gutter);
  }

  .section {
    padding-block: clamp(72px,8vw,130px);
  }

  .eyebrow {
    font-size: 13px;
    letter-spacing: .17em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 20px;
    color: var(--green-dark);
  }

  .muted {
    color: var(--muted);
  }

  .green {
    color: var(--green-dark);
  }

  .on-dark {
    color: var(--cream);
    background: var(--forest);
  }

  .on-dark p {
    color: #e0e8dc;
  }

  .on-dark .reading-copy {
    color: var(--cream);
  }

  .on-dark .eyebrow {
    color: var(--cream);
  }

  .reading-copy {
    color: var(--muted);
    font-size: 16px;
  }

  /* Components: Buttons & Links */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 14px 25px;
    min-height: 50px;
    border: 1px solid transparent;
    background: var(--green-dark);
    color: white;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    transition: background .25s,transform .25s,box-shadow .25s;
  }

  .btn:hover {
    background: #236e2a;
    transform: translateY(-3px);
    box-shadow: 0 9px 24px #173d311c;
  }

  .btn.light {
    background: var(--cream);
    color: var(--forest);
  }

  .btn.outline {
    border-color: #ffffff85;
    background: transparent;
  }

  .btn.outline:hover {
    background: #ffffff15;
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid currentColor;
    padding-block: 7px;
    line-height: 1.6;
  }

  .text-link svg, .btn svg {
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform .25s;
  }

  .text-link:hover svg, .btn:hover svg {
    transform: translateX(4px);
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 30px;
  }

  .skip {
    position: fixed;
    left: 20px;
    top: -100px;
    z-index: 200;
    background: var(--yellow);
    padding: 12px 22px;
  }

  .skip:focus {
    top: 12px;
  }

  /* Hero Section Component */
  .about-hero {
    min-height: 680px;
    height: 90svh;
    position: relative;
    color: var(--cream);
    background: var(--forest);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }

  .about-hero>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
  }

  .about-hero:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#092218b8,transparent 85%),linear-gradient(0deg,#092218b3,transparent 75%);
  }

  .about-hero .wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: 80px;
  }

  .about-hero h1 {
    font-size: clamp(44px, 5.1vw, 76px);
    max-width: 1050px;
  }

  .about-hero h1 span {
    color: #e6ec9b;
  }

  .about-hero .eyebrow {
    color: var(--cream);
  }

  .about-hero .lead {
    max-width: 760px;
    font-size: clamp(16px,1.4vw,20px);
    margin-top: 27px;
    color: #f0f2e8;
  }

  .about-hero .text-link {
    margin-top: 0;
  }

  .about-hero .actions {
    margin-top: 28px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Mission Section Component */
  .about-mission {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    align-items: start;
  }

  .about-mission h2 {
    font-size: clamp(35px,4.3vw,65px);
  }

  .about-mission .copy {
    color: var(--muted);
    padding-top: 42px;
    font-size: 17px;
  }

  .about-mission h2.section-label {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--green-dark);
    margin-bottom: 20px;
  }

  .about-mission .mission-statement {
    font-size: clamp(35px,4.3vw,65px);
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -.045em;
    max-width: 720px;
  }

  #mission h2.closing-line {
    font-size: clamp(34px, 3.7vw, 59px);
    line-height: 1.14;
    letter-spacing: -.045em;
  }

  #mission > .reading-copy {
    color: var(--ink);
    font-size: 17px;
  }

  /* Vision Section Component */
  .about-vision {
    background: var(--forest);
    color: var(--cream);
    padding-block: 100px;
  }

  .about-vision .section-label {
    color: var(--cream);
  }

  .vision-text {
    font-size: clamp(34px,4.8vw,73px);
    line-height: 1.3;
    letter-spacing: -.045em;
    max-width: 1200px;
  }

  .vision-word {
    opacity: .2;
    transition: opacity .2s;
  }

  .vision-word.visible {
    opacity: 1;
  }

  .about-vision h2.section-label {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 26px;
  }

  .about-vision .vision-text {
    margin: 0;
    font-weight: 600;
  }

  /* Intro Layout Component */
  .about-intro {
    overflow: clip;
    max-width: 1512px;
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    gap: clamp(30px,4vw,65px);
    align-items: center;
    text-align: left;
    padding-bottom: 80px;
    font-size: 17px;
  }

  .about-intro-copy {
    padding-top: 0;
  }

  .about-intro-copy h2 {
    font-size: clamp(34px,3.7vw,59px);
    color: var(--forest);
    margin-bottom: 28px;
  }

  .about-intro-copy > p {
    font-size: 16px;
    line-height: 1.8;
  }

  .about-intro-copy > p:last-child {
    font-size: 19px;
  }

  .about-intro-copy>p:last-child {
    font-size: calc(17px * 1.05 + 2px);
  }

  .about-intro-photos {
    width: 100%;
    height: 440px;
    margin: 0;
  }

  .about-intro-photos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-intro p:last-child {
    font-weight: 600;
    color: var(--forest);
  }

  /* Values Section & Cards Component */
  .about-values-head {
    display: grid;
    align-items: start;
    margin-bottom: 54px;
    justify-content: space-between;
    gap: 45px;
  }

  .about-values-head p {
    max-width: none;
    color: var(--muted);
  }

  .about-values-head h2 {
    font-size: clamp(36px,4.1vw,62px);
  }

  .about-values-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    grid-auto-rows: 1fr;
  }

  .about-value,
  .about-value:nth-child(1),
  .about-value:nth-child(2) {
    --value-card-background: #f0f0df;
    display: flex;
    flex-direction: column;
    grid-column: auto;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid #cbd1be80;
    border-radius: 20px;
    background: var(--value-card-background);
    transition: border-color 200ms ease;
  }

  .about-value:nth-child(2),
  .about-value:nth-child(5) {
    --value-card-background: var(--paper);
  }

  .about-value:nth-child(3) {
    --value-card-background: #f7eee5;
  }

  .about-value:is(:hover, :focus-within) {
    border-color: var(--green-dark);
  }

  .about-value-media {
    position: relative;
    height: clamp(170px, 15vw, 220px);
  }

  .about-value .about-value-media img {
    width: 100%;
height: 100%;
border-radius: 0;
aspect-ratio: auto;
object-fit: cover;
}
.about-value-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(transparent 65%, var(--value-card-background));
}
.about-value-copy {
display: grid;
grid-template-rows: 24px 44px 1fr;
flex: 1;
align-content: start;
min-width: 0;
padding: 18px 24px 30px;
text-align: center;
}
.about-value h3 {
margin: 0;
color: var(--green-dark);
font-size: 17px;
line-height: 1.4;
letter-spacing: .02em;
}
.about-value .value-tagline {
margin: 0;
color: var(--forest);
font-size: 23px;
font-weight: 600;
line-height: 1.4;
}
.about-value p {
margin: 0;
font-size: 14px;
line-height: 1.8;
color: var(--muted);
max-width: 510px;
}
.value-title {
display: flex;
gap: 20px;
align-items: center;
margin: 22px 0 14px;
}
.value-title span {
font-size: 13px;
color: var(--green-dark);
}
.value-title h3 {
font-size: 30px;
}
.values-statement {
margin-top: 64px;
text-align: center;
font-weight: 600;
color: var(--forest);
font-size: clamp(24px, 3vw, 42px);
line-height: 1.4;
}
.values-word {
display: inline-block;
opacity: var(--values-word-opacity, 1);
filter: blur(var(--values-word-blur, 0px));
transform: translate3d(var(--values-word-offset, 0px), 0, 0);
will-change: transform, filter, opacity;
}
.values-caption.scroll-typewriter {
margin-top: 18px;
text-align: center;
font-size: 17px;
}
/* Values Montage Module */
.about-values-montage {
display: flex;
align-items: center;
width: 100%;
height: 380px;
gap: 4px;
isolation: isolate;
}
.about-values-montage figure {
position: relative;
flex: 1;
min-width: 0;
height: 88%;
overflow: hidden;
clip-path: polygon(24% 0,100% 0,76% 100%,0 100%);
margin-inline: -11px;
}
.about-values-montage figure:nth-child(even) {
transform: translateY(22px);
}
.about-values-montage figure:nth-child(odd) {
transform: translateY(-12px);
}
.about-values-montage img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .35s;
}
.about-values-montage figure:hover img {
transform: scale(1.06);
}
.about-values-montage figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 55px 8px 20px 15px;
color: white;
font-size: 10px;
font-weight: 600;
text-align: center;
background: linear-gradient(transparent,#175743e8);
padding-right: 24%;
padding-left: 4%;
font-size: 11px;
}
.about-values-montage figure:nth-child(2) figcaption {
background: linear-gradient(transparent,#bd9437ee);
}
.about-values-montage figure:nth-child(3) figcaption {
background: linear-gradient(transparent,#aa5248ee);
}
.about-values-montage figure:nth-child(4) figcaption {
background: linear-gradient(transparent,#668b60ee);
}
.about-values-montage figure:nth-child(5) figcaption {
background: linear-gradient(transparent,#387da5ee);
}
/* Split Layout Component */
.editorial-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px,6vw,100px);
align-items: start;
}
.editorial-split h2 {
margin-bottom: 28px;
color: var(--forest);
}
.editorial-split>.reading-copy {
padding-top: 0;
}
#our-story .reading-copy {
padding-top: 48px;
}
#mission>.reading-copy {
padding-top: 48px;
}
.section-lead {
font-size: clamp(20px,2vw,27px);
color: var(--forest);
margin-top: 25px;
}
.section-lead.scroll-typewriter {
font-size: clamp(20px, 2vw, 27px);
}
.story-photo {
width: 100%;
aspect-ratio: 1.45;
object-fit: cover;
border-radius: 16px;
margin-top: 36px;
}
/* Bird/Art Section Component */
.bird-section {
align-items: center;
}
.bird-section>.reading-copy {
padding-top: 0;
}
.about-bird-art {
position: relative;
aspect-ratio: 1.3;
min-width: 0;
}
.about-bird-art img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.about-bird-static {
padding: 18%;
opacity: 1;
}
.about-bird-animation {
opacity: 0;
}
.about-bird-animation:not([src]) {
visibility: hidden;
}
.bird-ready .about-bird-animation {
opacity: 1;
}
.bird-ready .about-bird-static {
opacity: 0;
}
.making-section {
background: #e5ebd8;
}
/* Timeline Module Component */
.about-timeline {
background: var(--forest);
overflow: clip;
}
.timeline-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(28px, 3vw, 48px);
max-width: 1040px;
}
.timeline-heading {
text-align: center;
}
.timeline-heading h2 {
font-size: clamp(46px, 5.6vw, 79px);
color: var(--cream);
}
.timeline-bird {
display: inline-block;
width: 1.1em;
height: auto;
margin-left: .12em;
vertical-align: -.12em;
}
.timeline-track {
position: relative;
display: grid;
gap: 44px;
min-width: 0;
padding-block: 30px;
}
.timeline-route {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
color: var(--forest);
pointer-events: none;
}
.about-timeline .timeline-route {
color: var(--cream);
opacity: .7;
}
.timeline-item {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
align-items: start;
gap: 40px;
}
.timeline-item .timeline-marker {
grid-column: 2;
grid-row: 1;
}
.timeline-item .timeline-card {
grid-column: 3;
grid-row: 1;
max-width: 400px;
}
.timeline-item:nth-of-type(odd) .timeline-card {
grid-column: 1;
justify-self: end;
text-align: right;
}
.timeline-marker {
position: relative;
z-index: 1;
width: 14px;
height: 14px;
margin-top: 7px;
border-radius: 50%;
background: var(--green);
}
.timeline-card {
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--cream);
}
.timeline-card h3 {
font-size: 21px;
line-height: 1.3;
letter-spacing: -.02em;
}
.timeline-card p {
margin-top: 10px;
font-size: 15.5px;
line-height: 1.65;
}
.timeline-card .timeline-subtitle {
font-weight: 600;
}
/* Cities Section Component */
.about-cities-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 36px;
margin-top: 56px;
}
.about-city-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 28px 4px 28px 4px;
background: var(--paper);
}
.about-city-card > img {
width: 100%;
height: 280px;
object-fit: cover;
}
.about-city-copy {
padding: 34px;
}
.about-city-copy h3 {
margin-bottom: 22px;
color: var(--forest);
}
.about-city-copy > p:not(.eyebrow) {
color: var(--muted);
}
.about-city-copy .text-link {
margin-top: 24px;
}
/* Team & Leadership Component Module */
.about-team {
background: #eeeade;
}
.about-team-head {
max-width: 730px;
margin-bottom: 70px;
}
.leadership-intro {
max-width: 850px;
margin-bottom: 45px;
}
.leadership-intro h2 {
color: var(--forest);
margin-bottom: 24px;
}
.leadership-intro>p {
margin-left: 0;
}
.leadership-cards {
display: grid;
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 24px;
}
.leadership-card {
grid-column: span 2;
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
background: var(--paper);
}
.leadership-card:nth-child(-n+2) {
grid-column: span 3;
display: grid;
grid-template-columns: 42% 1fr;
align-items: center;
}
.leadership-card>img {
height: 100%;
width: 100%;
object-fit: cover;
aspect-ratio: 3/4;
}
.leadership-card-copy {
padding: clamp(20px,2.4vw,36px);
}
.leadership-card h3 {
color: var(--forest);
}
.leader-role {
font-size: 14px;
font-weight: 600;
margin-top: 12px;
}
.leader-bio {
color: var(--muted);
margin-top: 24px;
}
.leader {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 9%;
align-items: center;
padding-block: 55px;
border-top: 1px solid var(--line);
}
.leader:nth-of-type(even) {
grid-template-columns: 1.2fr .8fr;
}
.leader:nth-of-type(even) .leader-photo {
order: 2;
}
.leader-photo {
width: 100%;
max-height: 550px;
aspect-ratio: 4/5;
object-fit: cover;
object-position: center 22%;
border-radius: 90px 6px 6px 6px;
}
.leader h3 {
font-size: clamp(30px,3.4vw,50px);
margin-bottom: 12px;
}
.leader .role {
color: var(--green-dark);
font-size: 12px;
letter-spacing: .15em;
text-transform: uppercase;
margin-bottom: 24px;
}
.leader-bio p+p {
margin-top: 18px;
}
/* Leadership Slider Component */
.leadership-slider {
max-width: 1150px;
margin-inline: auto;
padding: 0;
position: relative;
padding-inline: 30px;
}
.leader-slider-controls {
position: absolute;
inset: 0 -35px 42px;
padding: 0;
justify-content: space-between;
align-items: center;
pointer-events: none;
display: flex;
gap: 12px;
}
.leader-slider-controls button {
pointer-events: auto;
width: 64px;
height: 48px;
font-size: 26px;
z-index: 2;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--paper);
color: var(--forest);
box-shadow: 0 5px 18px #173d3110;
}
.leader-track {
position: relative;
display: flex;
align-items: center;
gap: 18px;
overflow-x: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: none;
scrollbar-width: none;
padding: 40px 8px 42px;
scroll-padding-inline: 16px;
padding-inline: max(16px,calc((100% - clamp(240px,24vw,310px))/2));
}
.leader-track {
    gap: 18px;
    padding: 40px 8px 42px;
    align-items: center;
    scroll-snap-type: none;
    overflow-x: hidden;
}
.leader-track::-webkit-scrollbar {
display: none;
}
.leader-track {
    gap: 30px;
}
.leader-slide {
flex: 1 1 0;
transform: none;

    scroll-snap-align: center;
    transition: transform .35s;
    transform: scale(.96);
    transform-origin: center;

    transition: flex .4s, transform .4s;    
}
.leader-slide.is-active {
flex: 1.32 1 0;
transform: scale(1.035);
}
.leader-open {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
align-items: center;
transition: border-color 200ms ease;
width: 100%;
padding: 0;
text-align: left;
border: 1px solid #173d3120;
border-radius: 18px;
background: var(--paper);
overflow: hidden;
}
.leader-open, .leader-open:hover {
box-shadow: none;
}
.leader-open>img, .leader-open>.leader-portrait-placeholder {
height: 260px;
width: 100%;
object-fit: cover;
object-position: center 23%;
}
.leader-slide.is-active .leader-open>img,
.leader-slide.is-active .leader-open>.leader-portrait-placeholder {
height: 310px;
}
.leader-open:is(:hover, :focus-visible) {
border-color: var(--green-dark);
}
.leader-slide-copy {
display: block;
min-height: 190px;
padding: 22px 16px;
}
.leader-name {
display: block;
font-weight: 600;
font-size: clamp(17px,1.55vw,24px);
letter-spacing: -.04em;
line-height: 1.25;
color: var(--forest);
        text-align: left;

}
.leader-slide-copy .leader-role {
display: block;
margin-top: 10px;
line-height: 1.5;
font-size: 13px;
font-weight: 400;
min-height: 42px;
text-align: left;
}
.leader-card-rule {
display: block;
width: 34px;
height: 3px;
background: #cfc59d;
margin-block: 16px;
}
.leader-card-bio {
font-size: 13px;
color: var(--muted);
display: inline-block;
border-bottom: 1px solid currentColor;
}
.leader-portrait-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: linear-gradient(140deg,#e6ebdb,#b6c5aa);
color: var(--forest);
}
.leader-portrait-placeholder>span {
font-size: 66px;
font-weight: 600;
letter-spacing: -.06em;
}
.leader-portrait-placeholder small {
font-size: 12px;
letter-spacing: .04em;
}
.leader-dots {
display: flex;
gap: 12px;
justify-content: center;
padding: 8px 0;
padding-top: 10px;
}
.leader-dots button {
width: 14px;
height: 14px;
padding: 0;
border: 0;
border-radius: 50%;
background: #bdc5b3;
}
.leader-dots button[aria-pressed="true"] {
background: var(--forest);
}
/* Leader Profiles Dialog Module */
.leader-dialog {
width: min(1240px,94vw);
max-width: none;
max-height: 92svh;
padding: clamp(24px,4vw,60px);
border: 1px solid var(--line);
border-radius: 22px;
background: var(--cream);
color: var(--ink);
overscroll-behavior: contain;
}
.leader-dialog::backdrop {
background: #102f29b5;
backdrop-filter: blur(5px);
}
.leader-dialog h2 {
font-size: clamp(30px, 3.5vw, 52px);
color: var(--forest);
margin-bottom: 12px;
}
.leader-dialog-layout {
display: grid;
grid-template-columns: minmax(240px,.85fr) minmax(0,1.4fr);
gap: clamp(30px,5vw,80px);
align-items: center;
}
.leader-dialog-portrait>img {
width: 100%;
height: auto;
max-height: 650px;
aspect-ratio: 3/4;
object-fit: cover;
border-radius: 70px 6px 6px 6px;
}
.leader-dialog-portrait>.leader-portrait-placeholder {
width: 100%;
aspect-ratio: 3/4;
border-radius: 70px 6px 6px 6px;
}
.leader-dialog-copy {
padding-block: 30px;
}
.leader-dialog-role {
font-weight: 600;
font-size: 15px;
}
.leader-dialog-bio {
margin-top: 26px;
font-size: 15px;
line-height: 1.85;
color: var(--muted);
}
.leader-dialog-close {
position: absolute;
top: 12px;
right: 14px;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--paper);
color: var(--forest);
font-size: 26px;
line-height: 1;
}
/* Visit Card Component Module */
.about-visit {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--green-dark);
color: white;
}
.about-visit img {
width: 100%;
height: 100%;
min-height: 480px;
object-fit: cover;
}
.about-visit-copy {
padding: clamp(45px,6vw,100px);
align-self: center;
}
.about-visit-copy p {
margin-top: 25px;
max-width: 480px;
}
.about-visit-copy .eyebrow {
margin-top: 0;
color: var(--yellow);
}
.about-visit-copy .actions {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: center;
margin-top: 24px;
}
.about-visit-copy .text-link {
color: var(--cream);
}
/* Scroll/Typewriter Core System */
.about-progress {
position: fixed;
top: 0;
height: 2px;
background: var(--green-dark);
width: 100%;
transform: scaleX(0);
transform-origin: left;
z-index: 51;
}
.scroll-typewriter,
.closing-line {
font-size: calc(1.05em + 2px);
font-weight: 600;
}
.typewriter-ready .typewriter-char {
visibility: hidden;
}
.typewriter-ready .typewriter-char.is-typed {
visibility: visible;
}
.closing-highlight {
background: var(--yellow);
color: var(--ink);
padding: 3px 4px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.typewriter-ready .closing-highlight {
background: transparent;
padding: 0;
}
.typewriter-ready .closing-highlight .typewriter-char.is-typed {
background: var(--yellow);
box-shadow: 0 3px 0 var(--yellow),0 -3px 0 var(--yellow);
}
/* Editorial Popup Module (khi-story-dialog) */
.khi-story-dialog {
width: min(1440px, 96vw);
max-width: none;
max-height: 94svh;
padding: 0;
border: 1px solid #173d3126;
border-radius: 22px;
background: var(--paper);
color: var(--forest);
overscroll-behavior: contain;
}
.khi-story-dialog::backdrop {
background: #0b281dcc;
backdrop-filter: blur(8px);
}
.khi-story-dialog h2 {
font-size: clamp(30px, 3.5vw, 52px);
}
.khi-story-toolbar {
position: sticky;
top: 0;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px 24px;
background: var(--paper);
font-size: 10px;
font-weight: 600;
letter-spacing: .12em;
}
.khi-preview-label {
display: inline-block;
margin-left: 14px;
color: var(--muted);
font-size: 10px;
font-weight: 400;
letter-spacing: 0;
}
.khi-preview-label[hidden] {
display: none;
}
.khi-story-close {
flex: 0 0 40px;
width: 40px;
height: 40px;
border: 1px solid #173d3128;
border-radius: 50%;
background: var(--cream);
color: var(--forest);
font-size: 27px;
line-height: 1;
}
.khi-story-page {
padding: 12px clamp(24px, 5vw, 76px) 54px;
}
.khi-popup-intro,
.khi-popup-gallery {
display: grid;
align-items: center;
gap: clamp(28px, 4vw, 64px);
background: transparent;
}
.khi-popup-intro {
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
padding: 10px 0 48px;
border-bottom: 1px solid #173d311c;
}
.khi-popup-copy {
min-width: 0;
}
.khi-story-page .eyebrow {
display: flex;
align-items: center;
gap: 22px;
font-size: 11px;
letter-spacing: .18em;
margin-bottom: 24px;
}
.khi-story-page .eyebrow::after {
content: '';
width: 64px;
height: 1px;
background: #52776780;
}
.khi-popup-copy h2 {
font-size: clamp(30px, 4vw, 58px);
line-height: 1.08;
letter-spacing: -.05em;
}
.khi-popup-copy h3 {
font-size: clamp(26px, 3vw, 42px);
line-height: 1.14;
}
.khi-popup-copy > p:not(.eyebrow) {
max-width: 48ch;
margin-top: 24px;
color: #526459;
font-size: clamp(15px, 1.35vw, 19px);
line-height: 1.7;
}
.khi-popup-triptych {
position: relative;
isolation: isolate;
height: clamp(270px, 28vw, 390px);
}
.khi-popup-triptych figure {
position: absolute;
left: 17%;
top: 16%;
z-index: 1;
width: 39%;
height: 77%;
overflow: hidden;
border: 4px solid var(--paper);
border-radius: 20px;
background: #c1cdb8;
box-shadow: 0 18px 28px #173d3126;
transform: translateX(-50%) rotate(-8deg);
}
.khi-popup-triptych figure:nth-child(2) {
left: 50%;
top: 0;
z-index: 3;
width: 43%;
height: 100%;
transform: translateX(-50%);
}
.khi-popup-triptych figure:nth-child(3) {
left: 83%;
top: 16%;
transform: translateX(-50%) rotate(8deg);
}
.khi-popup-triptych img,
.khi-gallery-stack img {
width: 100%;
height: 100%;
object-fit: cover;
}
.khi-popup-gallery {
grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
gap: clamp(34px, 5vw, 80px);
padding-top: 36px;
}
.khi-popup-gallery__visual {
position: relative;
min-width: 0;
}
.khi-gallery-stack {
position: relative;
height: clamp(260px, 25vw, 350px);
margin-inline: 28px;
isolation: isolate;
}
.khi-gallery-stack figure {
position: absolute;
top: 0;
left: 50%;
z-index: 3;
width: 38%;
height: 96%;
overflow: hidden;
border: 3px solid var(--paper);
border-radius: 16px;
background: #c1cdb8;
box-shadow: 0 14px 26px #173d3122;
transform: translateX(-50%);
}
.khi-gallery-stack [data-offset="-1"],
.khi-gallery-stack [data-offset="1"] {
top: 10%;
z-index: 2;
height: 78%;
}
.khi-gallery-stack [data-offset="-1"] {
left: 30%;
}
.khi-gallery-stack [data-offset="1"] {
left: 70%;
}
.khi-gallery-stack [data-offset="-2"],
.khi-gallery-stack [data-offset="2"] {
top: 18%;
z-index: 1;
height: 62%;
}
.khi-gallery-stack [data-offset="-2"] {
left: 13%;
}
.khi-gallery-stack [data-offset="2"] {
left: 87%;
}
.khi-gallery-controls {
position: absolute;
top: calc(50% + 18px);
left: 0;
right: 0;
z-index: 4;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
pointer-events: none;
}
.khi-gallery-controls button {
border: 1px solid #173d3110;
background: var(--paper);
color: var(--forest);
box-shadow: 0 6px 20px #173d3110;
pointer-events: auto;
width: auto;
min-width: 64px;
padding-inline: 10px;
border-radius: 24px;
font-size: 11px;
}
#popup-gallery-count {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Utility Components */
.motion-toggle {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 55;
padding: 10px 16px;
border: 1px solid var(--line);
border-radius: 30px;
background: var(--paper);
color: var(--forest);
font-size: 11px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* JavaScript State Modifiers */
.js .reveal {
opacity: 0;
transform: translateY(25px);
transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}
.js .timeline-card {
transition: none;
}
.js .reveal.visible {
opacity: 1;
transform: none;
}
.js .about-value.reveal {
transition: opacity 650ms var(--ease), transform 650ms var(--ease), border-color 200ms ease;
}
.motion-off .vision-word {
opacity: 1;
}
.motion-off .about-bird-static {
opacity: 1;
}
.motion-off .about-bird-animation {
visibility: hidden;
}
.motion-off .leader-slide,
.motion-off .leader-open {
transition: none;
}
.motion-off .about-values-montage img {
transition: none;
}
.motion-off .closing-highlight .typewriter-char {
background: var(--yellow);
box-shadow: 0 3px 0 var(--yellow),0 -3px 0 var(--yellow);
}
/* ==========================================================================
MEDIA QUERIES (Nested inside Sandbox Context)
========================================================================== */
@media(min-width:961px) {
.editorial-split > .reading-copy:last-child {
padding-top: var(--editorial-copy-offset, 0px);
}
#mission > .reading-copy {
padding-top: 48px;
}
.about-values-montage {
height: 418px;
gap: 4px;
margin-left: -5%;
}
.about-values-montage figure {
flex: none;
width: calc((100% - 16px + 110px)/5 * 1.1);
}
}
@media(max-width:1100px) {
.about-values-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media(max-width:1100px) and (min-width:961px) {
.leader-track {
gap: 10px;
}
.leader-slide-copy {
padding: 18px 12px;
}
.leader-open>img, .leader-open>.leader-portrait-placeholder {
height: 220px;
}
.leader-slide.is-active .leader-open>img,
.leader-slide.is-active .leader-open>.leader-portrait-placeholder {
height: 260px;
}
}
@media(max-width:1100px) and (min-width:761px) {
.about-values-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media(max-width:960px) {
.editorial-split {
grid-template-columns: 1fr;
}
.about-bird-art {
max-width: 650px;
width: 100%;
margin: auto;
}
.leadership-card:nth-child(-n+2) {
display: block;
}
.leadership-card>img {
height: 320px;
object-position: center 25%;
}
.leadership-card {
grid-column: span 3;
}
.about-hero {
max-height: none;
height: auto;
min-height: 650px;
}
.about-hero .wrap {
padding-top: 90px;
}
.about-intro {
grid-template-columns: 1fr;
}
.about-intro-photos {
max-width: 650px;
justify-self: center;
}
.editorial-split>.reading-copy,
#our-story .reading-copy,
#mission>.reading-copy {
padding-top: 0;
}
.leadership-slider {
padding-inline: 0;
}
.leader-track {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 16px;
padding: 28px 16px 36px;
padding-inline: max(16px,calc((100% - 280px)/2));
}
.leader-slide, .leader-slide.is-active {
flex: 0 0 260px;
scroll-snap-align: start;
transform: none;
}
.leader-slide.is-active {
transform: scale(1.025);
}
.leader-open>img,
.leader-open>.leader-portrait-placeholder,
.leader-slide.is-active .leader-open>img,
.leader-slide.is-active .leader-open>.leader-portrait-placeholder {
height: 280px;
}
.leader-name {
font-size: 23px;
}
.leader-slider-controls {
position: static;
justify-content: flex-end;
gap: 10px;
padding-bottom: 10px;
}
.leader-slider-controls button {
width: 72px;
}
.leader-slide-copy {
min-height: 200px;
}
.about-values-montage {
max-width: 720px;
margin-inline: auto;
height: 418px;
}
.timeline-heading h2 {
font-size: 48px;
}
.timeline-item {
gap: 24px;
}
.timeline-marker {
width: 12px;
height: 12px;
}
.timeline-card {
padding: 0;
}
.about-values-head,
.about-cities-grid {
grid-template-columns: minmax(0, 1fr);
}
.about-values-head {
gap: 0;
}
.editorial-split > .reading-copy:last-child {
padding-top: 0;
}
}
@media(max-width:800px) {
.khi-popup-intro,
.khi-popup-gallery {
grid-template-columns: minmax(0, 1fr);
gap: 30px;
}
.khi-popup-intro {
padding-bottom: 36px;
}
.khi-popup-triptych {
width: 90%;
height: 330px;
max-width: 540px;
margin-inline: auto;
}
.khi-popup-gallery > .khi-popup-copy {
grid-row: 1;
}
.khi-gallery-stack {
height: 310px;
}
}
@media(max-width:760px) {
.about-hero {
min-height: 600px;
max-height: 850px;
}
.about-hero .wrap {
padding-block: 60px;
}
.about-hero h1 {
font-size: clamp(43px,10vw,70px);
}
.about-hero>img {
object-position: 58% center;
}
.about-mission {
grid-template-columns: 1fr;
gap: 25px;
}
.about-mission .copy {
padding-top: 0;
font-size: 15px;
}
.about-vision {
padding-block: 65px;
}
.about-values-head {
display: block;
margin-bottom: 40px;
}
.about-values-head p {
margin-top: 25px;
}
.about-values-grid {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.about-value,
.about-value:nth-child(1),
.about-value:nth-child(2) {
grid-column: auto;
}
.about-value img {
aspect-ratio: 1.4;
}
.leader,
.leader:nth-of-type(even) {
grid-template-columns: 1fr;
gap: 30px;
padding-block: 40px;
}
.leader:nth-of-type(even) .leader-photo {
order: 0;
}
.leader-photo {
max-height: 480px;
object-position: center 18%;
}
.about-team-head {
margin-bottom: 35px;
}
.about-visit {
grid-template-columns: 1fr;
}
.about-visit img {
min-height: 0;
height: 320px;
}
.about-visit-copy {
padding: 55px var(--gutter);
}
.about-value-media {
height: 240px;
}
.about-value .value-tagline {
font-size: 23px;
}
}
@media(max-width:600px) {
.leadership-cards {
grid-template-columns: 1fr;
}
.leadership-card,
.leadership-card:nth-child(-n+2) {
grid-column: auto;
}
.about-hero .wrap {
padding-block: 55px;
}
.about-hero h1 {
font-size: 44px;
}
.reading-copy {
font-size: 16px;
}
.about-visit-copy .actions {
align-items: flex-start;
flex-direction: column;
}
.header-inner {
gap: 12px;
}
.header-right {
min-width: 0;
}
.site-header .brand {
flex-shrink: 0;
}
.about-intro {
padding-bottom: 36px;
}
.about-intro-photos {
height: 290px;
width: 100%;
}
.leader-slide {
flex-basis: 250px;
}
.leader-open>img,
.leader-open>.leader-portrait-placeholder {
height: 280px;
}
.leader-slide-copy {
padding: 22px;
min-height: 200px;
}
.leader-dialog-layout {
grid-template-columns: 1fr;
gap: 12px;
}
.leader-dialog {
padding: 42px 22px 24px;
}
.leader-dialog-portrait>img,
.leader-dialog-portrait>.leader-portrait-placeholder {
max-height: 340px;
aspect-ratio: 1;
object-position: center 25%;
}
.leader-dialog-copy {
padding-block: 16px;
}
.about-values-montage {
height: 260px;
gap: 2px;
}
.about-values-montage figure {
margin-inline: -5px;
}
.about-values-montage figcaption {
font-size: 7px;
padding: 40px 2px 15px 5px;
padding-right: 24%;
padding-left: 2%;
}
.about-intro-copy h2 {
font-size: 34px;
}
.leader-slide.is-active {
flex-basis: 240px;
}
:root {
--gutter: 22px;
}
.section {
padding-block: 64px;
}
.about-hero {
min-height: 640px;
height: 92svh;
}
.about-hero .wrap {
padding-block: 54px;
}
.about-hero .eyebrow {
font-size: 11px;
}
.about-hero .lead {
font-size: 15px;
}
.timeline-layout {
gap: 24px;
}
.timeline-heading {
text-align: left;
}
.timeline-heading h2 {
font-size: 46px;
}
.timeline-track {
gap: 36px;
}
.timeline-item {
grid-template-columns: 12px minmax(0, 1fr);
gap: 14px;
}
.timeline-item .timeline-marker {
grid-column: 1;
}
.timeline-item .timeline-card,
.timeline-item:nth-of-type(odd) .timeline-card {
grid-column: 2;
justify-self: stretch;
max-width: none;
text-align: left;
}
.timeline-marker {
width: 12px;
height: 12px;
}
.timeline-card {
padding: 0;
}
.timeline-card h3 {
font-size: 17.5px;
}
.timeline-card p {
font-size: 14.5px;
}
.about-values-grid {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.about-value .value-tagline {
font-size: 25px;
}
.about-city-card > img {
height: 220px;
}
.about-city-copy {
padding: 28px 24px;
}
.about-visit img {
height: 300px;
}
.about-values-montage {
height: 286px;
}
.about-values-montage figure {
height: 88%;
}
.about-intro-copy>p:last-child {
font-size: calc(16px * 1.05 + 2px);
}
}
@media(max-width:480px) {
.khi-story-dialog {
width: calc(100vw - 16px);
max-height: 96svh;
border-radius: 16px;
}
.khi-story-toolbar {
padding: 10px 14px;
font-size: 9px;
letter-spacing: .06em;
}
.khi-preview-label {
display: block;
margin: 2px 0 0;
}
.khi-story-page {
padding: 16px 20px 32px;
}
.khi-popup-triptych {
height: 230px;
width: 92%;
}
.khi-popup-triptych figure {
border-width: 3px;
border-radius: 13px;
}
.khi-gallery-stack {
height: 245px;
margin-inline: 18px;
}
.khi-gallery-stack figure {
width: 43%;
border-radius: 12px;
border-width: 2px;
}
.khi-gallery-controls button {
width: 36px;
height: 36px;
}
.khi-campus-card .khi-campus-stage {
min-height: 0;
}
}
@media(max-width:400px) {
.site-header .header-inner {
padding-inline: 12px;
gap: 8px;
}
.site-header .brand, .site-header .brand img {
width: 76px;
}
.site-header .cities {
width: 140px;
}
.site-header .header-right {
margin-left: auto;
}
.site-header .menu-toggle {
width: 32px;
height: 36px;
flex: 0 0 32px;
padding: 0;
}
}
@media(prefers-reduced-motion:reduce) {
.about-bird-static {
opacity: 1;
}
.about-bird-animation {
visibility: hidden;
}
.leader-slide, .about-values-montage img {
transition: none;
}
.js .reveal {
opacity: 1;
transform: none;
transition: none;
}
}
}
/*about lahore end*/



/*admissions*/




/* Five values arranged around one learning community. */
.values {
  position: relative;
  height: 300svh;
  min-height: 1900px;
  background: var(--cream);
  border-radius: 0;
  padding: 0;
}
.values-layout {
  position: sticky;
  top: var(--header);
  height: calc(100svh - var(--header));
  min-height: 590px;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 4%;
  align-items: center;
  padding-block: 38px;
  overflow: hidden;
}
.values-intro {
  position: relative;
  top: auto;
  z-index: 2;
}
.values-intro h2 {
  font-size: clamp(40px, 5.2vw, 78px);
  line-height: 1.08;
  max-width: 580px;
}
.value-descriptions {
  position: relative;
  min-height: 100px;
  max-width: 430px;
  margin-top: 28px;
}
.value-description {
  position: absolute;
  inset: 0;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
}
.value-description.active {
  opacity: 1;
  transform: none;
}
.values-count {
  margin-top: 22px;
  gap: 20px;
}
.values-track {
  width: 155px;
}
.values-track span {
  transition: width 0.4s;
}
.values-orbit {
  position: relative;
  width: 100%;
  max-width: min(720px, calc(100svh - var(--header) - 85px));
  aspect-ratio: 1;
  justify-self: center;
  isolation: isolate;
}
.orbit-ring {
  position: absolute;
  inset: 15%;
  border: 1px dashed #86a380;
  border-radius: 50%;
  opacity: 0.7;
}
.orbit-ring:before,
.orbit-ring:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  top: 15%;
  left: 12%;
}
.orbit-ring:after {
  top: auto;
  left: auto;
  right: 12%;
  bottom: 15%;
}
.values-centre {
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  overflow: hidden;
  outline: 1px solid #e8ddc7;
  outline-offset: 13px;
}
.values-centre img {
  object-position: 50% 50%;
}
.value-list {
  position: absolute;
  inset: 0;
}
.value {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 30%;
  aspect-ratio: 1;
  border: 1px solid #e8ddc7 !important;
  border-radius: 50%;
  padding: 12px;
  background: linear-gradient(135deg, #fffcf5, #faf6e9);
  color: var(--forest);
  box-shadow: 0 14px 28px #5a542b10;
  transition: background 0.45s, color 0.45s, box-shadow 0.45s, transform 0.45s;
  transform: translate(-50%, -50%);
}
.value-1 {
  left: 50%;
  top: 16%;
}
.value-2 {
  left: 16%;
  top: 43%;
}
.value-3 {
  left: 84%;
  top: 43%;
}
.value-4 {
  left: 29%;
  top: 82%;
}
.value-5 {
  left: 71%;
  top: 82%;
}
.value svg {
  width: 43%;
  height: 38%;
  flex-shrink: 0;
}
.value h3 {
  font-size: clamp(13px, 1.4vw, 22px);
  letter-spacing: -0.035em;
  color: inherit !important;
  line-height: 1.2;
}
.value.active {
  background: linear-gradient(135deg, #318e3d, #07522c);
  color: #fffaf0;
  border-color: #e5eddc !important;
  box-shadow: 0 15px 35px #276b322b;
  transform: translate(-50%, -50%) scale(1.06);
  z-index: 2;
}
.value .value-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 960px) and (min-width: 761px) {
  .values-layout {
    gap: 2%;
    grid-template-columns: 0.85fr 1.15fr;
  }
  .values-intro h2 {
    font-size: 46px;
  }
  .value-description {
    font-size: 14px;
  }
  .value-descriptions {
    min-height: 125px;
  }
  .value {
    gap: 4px;
    padding: 8px;
  }
}
@media (max-width: 760px) {
  .values {
    height: 300svh;
    min-height: 1600px;
  }
  .values-layout {
    height: calc(100svh - var(--header));
    min-height: 540px;
    padding-block: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
  }
  .values-intro {
    width: 100%;
  }
  .values-intro h2 {
    font-size: clamp(30px, 7.2vw, 42px);
    max-width: 100%;
    line-height: 1.12;
  }
  .values-intro h2 br {
    display: none;
  }
  .values-intro h2 br:after {
    content: " ";
  }
  .value-descriptions {
    margin-top: 15px;
    min-height: 66px;
    max-width: 440px;
  }
  .value-description {
    font-size: 14px;
    line-height: 1.65;
  }
  .values-count {
    margin-top: 9px;
    font-size: 11px;
  }
  .values-orbit {
    width: min(100%, 340px, calc(100svh - var(--header) - 260px));
    max-width: none;
    flex-shrink: 0;
  }
  .value {
    padding: 7px;
    gap: 4px;
  }
  .value h3 {
    font-size: clamp(10px, 3vw, 13px);
  }
  .values-centre {
    outline-offset: 7px;
  }
}
@media (max-height: 680px) {
  .values {
    height: auto;
    min-height: 0;
  }
  .values-layout {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
    padding-block: 55px;
  }
  .values-orbit {
    width: 100%;
    max-width: 550px;
  }
  .values-intro h2 {
    font-size: 40px;
  }
}
.motion-off .values,
html:not(.js) .values {
  height: auto;
  min-height: 0;
}
.motion-off .values-layout,
html:not(.js) .values-layout {
  position: relative;
  top: 0;
  height: auto;
  min-height: 0;
  padding-block: 70px;
}
.motion-off .value-descriptions,
html:not(.js) .value-descriptions {
  display: none;
}
.motion-off .values-count,
html:not(.js) .values-count {
  display: none;
}
.motion-off .values-layout,
html:not(.js) .values-layout {
  overflow: visible;
}
.motion-off .value .value-accessible,
html:not(.js) .value .value-accessible {
  position: static;
  clip-path: none;
  white-space: normal;
  width: auto;
  height: auto;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  margin-top: 5px;
}
.motion-off .values-orbit,
html:not(.js) .values-orbit {
  max-width: none;
  aspect-ratio: auto;
}
.motion-off .orbit-ring,
.motion-off .values-centre,
html:not(.js) .orbit-ring,
html:not(.js) .values-centre {
  display: none;
}
.motion-off .value-list,
html:not(.js) .value-list {
  position: static;
  display: grid;
  gap: 12px;
}
.motion-off .value,
html:not(.js) .value {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
  aspect-ratio: auto;
  padding: 18px;
  border-radius: 12px;
  box-shadow: none;
  background: #fffbf5;
  color: var(--forest);
}
.motion-off .value svg,
html:not(.js) .value svg {
  width: 38px;
  height: 36px;
}
.motion-off .value h3,
html:not(.js) .value h3 {
  font-size: 20px;
}
.motion-off .values-orbit {
  width: 100%;
}

/* Admissions: source content in the shared VLC visual language. */
.ad-hero {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 6%;
  align-items: center;
  padding-block: 70px 95px;
  min-height: calc(100svh - var(--header));
}
.ad-hero h2 {
  font-size: clamp(46px, 5.1vw, 79px);
  line-height: 1.07;
  max-width: 720px;
}
.ad-hero-copy > p:last-child {
  max-width: 590px;
  margin-top: 30px;
  color: var(--muted);
  font-size: 16px;
}
.ad-hero-photo {
  height: clamp(440px, 42vw, 660px);
  border-radius: 160px 8px 130px 8px;
  overflow: hidden;
  position: relative;
}
.ad-hero-photo img {
  object-position: 55% center;
}
.ad-process {
  background: var(--forest);
  color: var(--cream);
  border-radius: 0 100px 0 0;
}
.process-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 12%;
  align-items: start;
}
.process-intro {
  position: sticky;
  top: calc(var(--header) + 50px);
}
.process-intro > p {
  margin-top: 25px;
  color: #dde4d8;
  max-width: 320px;
}
.process-dial {
  position: relative;
  width: 190px;
  height: 190px;
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--lime);
}
#step-count {
  font-size: 72px;
  letter-spacing: -0.07em;
  line-height: 1;
}
.dial-total {
  font-size: 14px;
  align-self: center;
  margin-top: 30px;
}
.process-dial svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #ffffff25;
  stroke-width: 1;
  transform: rotate(-90deg);
}
.process-dial .dial-progress {
  stroke: var(--lime);
  stroke-width: 2;
  stroke-dasharray: 591;
  stroke-dashoffset: 473;
  transition: stroke-dashoffset 0.45s;
}
.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.process-step {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 22px;
  padding: 50px 0 65px;
  border-top: 1px solid #ffffff2b;
  min-height: 290px;
}
.process-step:last-child {
  border-bottom: 1px solid #ffffff2b;
}
.step-number {
  font-size: 15px;
  color: #d5ddc8;
  padding-top: 7px;
}
.process-step h3 {
  font-size: clamp(27px, 3.1vw, 43px);
  color: #b3c2af;
  transition: color 0.35s;
}
.process-step p {
  margin-top: 22px;
  color: #dbe3d6;
  font-size: 16px;
  max-width: 560px;
}
.process-step.active h3,
.process-step.active .step-number {
  color: var(--lime);
}
.ad-section-head {
  display: flex;
  gap: 50px;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 48px;
}
.ad-section-head > p {
  max-width: 380px;
  color: var(--muted);
}
.campus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px 35px;
}
.campus-card figure {
  aspect-ratio: 1.65;
  overflow: hidden;
  border-radius: 5px 80px 5px 5px;
}
.campus-card:nth-child(even) figure {
  border-radius: 80px 5px 5px 5px;
}
.campus-copy {
  padding-top: 25px;
}
.campus-copy .eyebrow {
  margin-bottom: 12px;
}
.campus-copy h3 {
  font-size: clamp(26px, 2.5vw, 36px);
}
.campus-copy p:last-child {
  color: var(--muted);
  margin-top: 17px;
  max-width: 510px;
}
.ad-table {
  background: #f0f0df;
  border-radius: 100px 0 0 0;
}
.age-table {
  border-top: 1px solid #bfc8b5;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}
th {
  font-weight: 600;
  color: var(--green);
  padding: 23px 20px;
  border-bottom: 1px solid #bfc8b5;
}
td {
  padding: 20px;
  border-bottom: 1px solid #d4d9c9;
}
td:first-child {
  font-weight: 600;
}
tbody tr:hover {
  background: #e4ead7;
}
.ad-faq {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 12%;
  align-items: start;
}
.faq-intro {
  position: sticky;
  top: calc(var(--header) + 50px);
}
.faq-intro p {
  margin-top: 25px;
  color: var(--muted);
}
.faq-list details {
  border-top: 1px solid var(--line);
  padding: 0;
}
.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}
summary {
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
.faq-list summary {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  padding: 25px 36px 25px 0;
  position: relative;
  letter-spacing: -0.02em;
}
.faq-list summary:after,
.footer-campuses summary:after {
  content: "+";
  position: absolute;
  right: 2px;
  color: var(--green);
  font-size: 25px;
  font-weight: 400;
  top: 20px;
}
.faq-list details[open] summary:after,
.footer-campuses details[open] summary:after {
  content: "−";
}
.faq-list details[open] summary {
  color: var(--green);
}
.faq-list details p {
  padding: 0 35px 27px 0;
  color: var(--muted);
  font-size: 15px;
}
.ad-tour {
  background: #eceedd;
}
.tour-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  align-items: start;
}
.tour-intro p {
  margin-top: 28px;
  color: var(--muted);
  max-width: 510px;
}
.ad-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
}
.hidden-fields-container {
  display: none;
}
.vlc-field {
  min-width: 0;
}
.vlc-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 9px;
  color: var(--forest);
}
input,
select,
textarea {
  font: inherit;
  font-size: 14px;
  max-width: 100%;
  width: 100%;
  background: #fffaf3;
  color: var(--ink);
  border: 1px solid #c5ccb8;
  border-radius: 4px;
  padding: 14px 15px;
}
textarea {
  resize: vertical;
  min-height: 140px;
  height: 140px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}
.vlc-field--wide,
.vlc-submit,
.form-status {
  grid-column: 1/-1;
}
.vlc-submit .btn {
  width: auto;
  cursor: pointer;
  min-width: 155px;
}
.form-status:empty {
  display: none;
}
.form-status {
  font-size: 13px;
}
.form-status a {
  text-decoration: underline;
}
.footer-campuses summary {
  position: relative;
  padding: 7px 22px 7px 0;
  font-size: 13px;
}
.footer-campuses summary:after {
  font-size: 16px;
  top: 3px;
}
.footer-campuses p {
  font-size: 12px;
  line-height: 1.7;
  margin: 8px 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.footer-campuses details {
  border-bottom: 1px solid var(--line);
}
.newsletter-form input[type="email"] {
  margin-bottom: 12px;
  font-size: 12px;
}
.newsletter-form .btn {
  width: auto;
  cursor: pointer;
}
.newsletter-form .form-status {
  margin-top: 12px;
}
.site-footer .footer-grid {
  grid-template-columns: 1.1fr 0.7fr 1.1fr 1fr;
  gap: 5%;
}
.desktop-nav a[aria-current="page"] {
  color: var(--green);
}
.no-js .process-dial {
  display: none;
}
.motion-paused .reveal {
  opacity: 1 !important;
  transform: none !important;
}
.motion-paused * {
  scroll-behavior: auto !important;
  transition: none !important;
}
.ad-tour,
.ad-age,
.ad-table {
  scroll-margin-top: var(--header);
}
@media (min-width: 1600px) {
  .ad-hero {
    min-height: 740px;
  }
}
@media (max-width: 1000px) {
  .ad-hero {
    gap: 5%;
    padding-block: 50px 65px;
    min-height: 650px;
  }
  .ad-hero h2 {
    font-size: 49px;
  }
  .ad-hero-photo {
    height: 480px;
    border-radius: 110px 5px 90px 5px;
  }
  .process-layout {
    gap: 8%;
    grid-template-columns: 1fr 1.2fr;
  }
  .process-step {
    min-height: 300px;
    gap: 14px;
  }
  .ad-faq,
  .tour-layout {
    gap: 7%;
  }
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
@media (max-width: 700px) {
  .ad-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 35px 60px;
    min-height: 0;
  }
  .ad-hero h2 {
    font-size: clamp(42px, 10.7vw, 66px);
  }
  .ad-hero .eyebrow {
    font-size: 10px;
    margin-bottom: 20px;
  }
  .ad-hero-copy > p:last-child {
    font-size: 14px;
    margin-top: 23px;
  }
  .ad-hero-photo {
    height: auto;
    aspect-ratio: 1.22;
    border-radius: 85px 5px 70px 5px;
  }
  .ad-process {
    border-radius: 0 65px 0 0;
  }
  .process-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .process-intro {
    position: static;
  }
  .process-dial {
    display: none;
  }
  .process-step {
    min-height: 0;
    padding: 30px 0 36px;
    grid-template-columns: 28px 1fr;
  }
  .process-step h3 {
    font-size: 28px;
  }
  .process-step p {
    font-size: 14px;
    margin-top: 17px;
  }
  .ad-section-head {
    display: block;
    margin-bottom: 33px;
  }
  .ad-section-head p {
    margin-top: 23px;
    font-size: 14px;
  }
  .campus-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .campus-copy p:last-child {
    font-size: 14px;
  }
  .campus-copy .eyebrow {
    font-size: 11px;
  }
  .ad-table {
    border-radius: 65px 0 0 0;
  }
  .age-table {
    border: 0;
  }
  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
  }
  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  tbody tr {
    padding: 16px 0;
    border-top: 1px solid #c5ccb8;
  }
  td {
    border: 0;
    padding: 6px 0;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    font-size: 12px;
  }
  td:before {
    content: attr(data-label);
    color: var(--green);
    font-size: 11px;
    font-weight: 400;
  }
  td:first-child {
    font-size: 17px;
    align-items: center;
  }
  .ad-faq {
    grid-template-columns: 1fr;
    gap: 33px;
  }
  .faq-intro {
    position: static;
  }
  .faq-list summary {
    font-size: 16px;
    padding-block: 21px;
  }
  .faq-list details p {
    font-size: 14px;
    padding-right: 12px;
  }
  .tour-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .tour-intro p {
    font-size: 14px;
  }
  .ad-form {
    gap: 20px 14px;
  }
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 35px 23px;
  }
  .footer-grid > div:first-child {
    grid-column: 1/-1;
  }
  .footer-grid > div:last-child {
    grid-column: 1/-1;
  }
  .newsletter-form {
    max-width: 390px;
  }
  .motion-toggle {
    font-size: 10px;
    bottom: 12px;
    right: 12px;
  }
  .promise h2 {
    font-size: 44px;
  }
}
@media (max-width: 360px) {
  .ad-form {
    grid-template-columns: 1fr;
  }
  .ad-hero h2 {
    font-size: 39px;
  }
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid > div {
    grid-column: 1/-1;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .process-step h3,
  .dial-progress {
    transition: none;
  }
}

input,
select,
textarea {
  scroll-margin-top: calc(var(--header) + 45px);
}

/* Full-screen opening from the earlier Admissions concept. */
.ad-banner {
  height: calc(100svh - var(--header));
  min-height: 440px;
  max-height: 1000px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--forest);
}
.ad-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.ad-banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #071b205e, #071b2040 60%, #071b2028);
}
.ad-banner h1 {
  position: relative;
  z-index: 1;
  color: white;
  font-size: clamp(44px, 10.8vw, 185px);
  letter-spacing: -0.035em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 5px 12px #0006;
  max-width: 94%;
  font-weight: 600;
}
.ad-hero {
  scroll-margin-top: var(--header);
}
@media (max-width: 700px) {
  .ad-banner {
    height: 66svh;
    min-height: 390px;
  }
  .ad-banner > img {
    object-position: 45% center;
  }
  .ad-banner h1 {
    font-size: 11vw;
  }
}
/* Keep the complete Admissions photograph intact inside the curved frame. */
.ad-hero-photo {
  background: #d9e6d0;
  isolation: isolate;
}
.ad-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  mask: none;
  clip-path: none;
  filter: none;
  mix-blend-mode: normal;
}

/* Add after the Admissions stylesheet. All rules apply only to the FAQ. */
.ad-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}
.ad-faq .faq-intro {
  position: sticky;
  top: calc(var(--header, 0px) + 40px);
}
.ad-faq .faq-intro p {
  margin-top: 20px;
  color: var(--muted, #64675f);
}
.ad-faq .faq-list {
  min-width: 0;
}
.ad-faq .faq-list details {
  border-top: 1px solid var(--line, #dcded2);
  padding: 0;
}
.ad-faq .faq-list details:last-child {
  border-bottom: 1px solid var(--line, #dcded2);
}
.ad-faq .faq-list summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 24px 40px 24px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.ad-faq summary::-webkit-details-marker {
  display: none;
}
.ad-faq .faq-list summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 21px;
  font-size: 25px;
  font-weight: 400;
  color: var(--green, #287b30);
}
.ad-faq .faq-list details[open] summary {
  color: var(--green, #287b30);
}
.ad-faq .faq-list details[open] summary::after {
  content: "−";
}
.ad-faq summary:hover {
  color: var(--green, #287b30);
}
.ad-faq summary:focus-visible {
  outline: 2px solid var(--green, #287b30);
  outline-offset: 4px;
}
.ad-faq .faq-answer {
  padding: 0 36px 26px 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted, #64675f);
  overflow-wrap: anywhere;
}
.ad-faq .faq-answer p {
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}
.ad-faq .faq-answer p + p {
  margin-top: 16px;
}
.ad-faq .faq-answer ul {
  margin: 14px 0 18px;
  padding-left: 22px;
}
.ad-faq .faq-answer li + li {
  margin-top: 8px;
}
.ad-faq .faq-answer a {
  color: var(--green, #287b30);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ad-faq .faq-campus-list {
  margin: 0;
}
.ad-faq .faq-campus-list > div {
  display: grid;
  grid-template-columns: minmax(90px, 0.45fr) minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line, #dcded2);
}
.ad-faq .faq-campus-list > div:last-child {
  border: 0;
}
.ad-faq .faq-campus-list dt {
  color: var(--forest, #173d31);
  font-weight: 600;
}
.ad-faq .faq-campus-list dd {
  margin: 0;
}
@media (max-width: 700px) {
  .ad-faq {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .ad-faq .faq-intro {
    position: static;
  }
  .ad-faq .faq-list summary {
    font-size: 16px;
    padding-block: 21px;
  }
  .ad-faq .faq-list summary::after {
    top: 18px;
  }
  .ad-faq .faq-answer {
    font-size: 14px;
    padding-right: 8px;
  }
  .ad-faq .faq-campus-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Admissions calculator: shares the page's full content width and gutters. */
#vlc-age-calculator {
  color: var(--ink);
  padding-block: 60px 65px;
}

#vlc-age-calculator p,
#vlc-age-calculator h2,
#vlc-age-calculator h3 {
  margin: 0;
}

#vlc-age-calculator .vlc-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

#vlc-age-calculator .vlc-eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  line-height: 1.6;
}

#vlc-age-calculator h2 {
  margin-top: 20px;
  font-size: clamp(36px, 4.1vw, 62px);
  line-height: 1.12;
}

#vlc-age-calculator h2 span {
  color: var(--green);
}

#vlc-age-calculator .vlc-description {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 590px;
}

#vlc-age-calculator .vlc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 32px 0 0;
  padding: 24px 0;
  list-style: none;
  border-block: 1px solid var(--line);
}

#vlc-age-calculator .vlc-steps li {
  display: flex;
  align-items: start;
  gap: 16px;
  min-width: 0;
  color: var(--forest);
  font-size: 16px;
  line-height: 1.6;
}

#vlc-age-calculator .vlc-steps li > span {
  color: var(--green);
  font-size: 26px;
  line-height: 1.3;
}

#vlc-age-calculator .vlc-steps small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

#vlc-age-calculator .vlc-calculator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: 5px 5px 70px 5px;
  overflow: hidden;
  background: #fffaf3;
}

#vlc-age-calculator .vlc-entry,
#vlc-age-calculator .vlc-result {
  padding: clamp(26px, 3vw, 44px);
  min-width: 0;
}

#vlc-age-calculator .vlc-entry h3 {
  margin-top: 14px;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.25;
}

#vlc-age-calculator .vlc-support {
  margin: 18px 0 26px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

#vlc-age-calculator label {
  display: block;
  margin-bottom: 10px;
  color: var(--forest);
  font-size: 14px;
  font-weight: 600;
}

#vlc-age-calculator input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 12px 16px;
  background: var(--cream);
  color: var(--forest);
  font: inherit;
  font-size: 16px;
}

#vlc-age-calculator .vlc-calculate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  min-height: 54px;
  margin-top: 14px;
  padding: 14px 20px;
  border: 0;
  border-radius: 4px;
  background: var(--green);
  color: white;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

#vlc-age-calculator .vlc-calculate:hover {
  background: #216728;
}
#vlc-age-calculator #vlc-error {
  margin-top: 10px;
  color: #a13425;
  font-size: 14px;
}
#vlc-age-calculator #vlc-error:empty {
  display: none;
}

#vlc-age-calculator .vlc-form-detail {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 13px;
}

#vlc-age-calculator .vlc-form-detail svg {
  flex: none;
}
#vlc-age-calculator .vlc-result {
  background: var(--forest);
  color: var(--cream);
}
#vlc-age-calculator .vlc-result-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

#vlc-age-calculator .vlc-result-label {
  color: #d5dfce;
  font-size: 11px;
  letter-spacing: 0.13em;
  line-height: 1.8;
}

#vlc-age-calculator .vlc-sprout {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff12;
  color: var(--lime);
}

#vlc-age-calculator .vlc-result h3 {
  margin-top: 15px;
  color: var(--lime);
  font-size: clamp(34px, 3.3vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

#vlc-age-calculator .vlc-result-rule {
  height: 1px;
  margin: 24px 0;
  background: #ffffff30;
}
#vlc-age-calculator .vlc-age-details {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 25px;
}
#vlc-age-calculator .vlc-age {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.4;
}
#vlc-age-calculator .vlc-range {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.65;
}
#vlc-age-calculator .vlc-note {
  margin-top: 22px;
  color: #d5dfce;
  font-size: 13px;
  line-height: 1.75;
}
#vlc-age-calculator .vlc-note:empty {
  display: none;
}

@media (max-width: 1000px) {
  #vlc-age-calculator .vlc-opening {
    grid-template-columns: minmax(0, 1fr);
  }
  #vlc-age-calculator .vlc-age-details {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #vlc-age-calculator .vlc-steps {
    gap: 20px;
  }
}

@media (max-width: 700px) {
  #vlc-age-calculator {
    padding-block: 40px 45px;
  }
  #vlc-age-calculator .vlc-opening,
  #vlc-age-calculator .vlc-calculator {
    grid-template-columns: 1fr;
    gap: 0;
  }
  #vlc-age-calculator .vlc-opening {
    gap: 28px;
  }
  #vlc-age-calculator h2 {
    font-size: clamp(34px, 8vw, 48px);
  }
  #vlc-age-calculator .vlc-description,
  #vlc-age-calculator .vlc-support {
    font-size: 14px;
  }
  #vlc-age-calculator .vlc-steps {
    margin-top: 28px;
    gap: 16px;
    padding-block: 20px;
  }
  #vlc-age-calculator .vlc-steps li {
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
  }
  #vlc-age-calculator .vlc-steps small {
    display: none;
  }
  #vlc-age-calculator .vlc-entry,
  #vlc-age-calculator .vlc-result {
    padding: 26px 24px;
  }
  #vlc-age-calculator .vlc-age-details {
    grid-template-columns: 1fr;
  }
}

/* Admissions 2027–28 content; existing header, footer, FAQ and process retained. */
.ad-updated h1,
.ad-updated h2,
.ad-updated h3,
.ad-updated p,
.ad-updated figure {
  margin: 0;
}
.ad-updated h1,
.ad-updated h2,
.ad-updated h3 {
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}
.ad-updated h1 {
  font-size: clamp(46px, 5.8vw, 82px);
  max-width: 900px;
}
.ad-updated h2 {
  font-size: clamp(36px, 4.1vw, 62px);
}
.ad-updated h3 {
  font-size: clamp(24px, 2.1vw, 32px);
}
.ad-updated a {
  color: inherit;
  text-decoration: none;
}
.ad-updated button,
.ad-updated select {
  font: inherit;
}
.ad-updated button,
.ad-updated summary {
  cursor: pointer;
}
.ad-updated img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ad-updated [hidden] {
  display: none !important;
}
.ad-updated :focus-visible {
  outline: 3px solid #80b44d;
  outline-offset: 5px;
}
.ad-updated ::selection {
  background: var(--lime);
  color: var(--forest);
}
.ad-updated .wrap {
  max-width: 1512px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ad-updated .section {
  padding-block: clamp(65px, 7vw, 105px);
}
.ad-updated .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dgreen);
  line-height: 1.6;
}
.ad-updated .actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
}
.ad-updated .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--dgreen);
  color: white;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.7;
}
.ad-updated .button:hover {
  background: #216728;
}
.ad-updated .button-outline {
  background: transparent;
  color: var(--cream);
  border-color: #fff7ed99;
}
.ad-updated .button-outline:hover {
  background: #fff7ed19;
}
.ad-updated .text-link {
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  color: var(--dgreen);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
}
.ad-updated .text-link:hover {
  color: var(--forest);
}
.ad-updated .skip {
  position: absolute;
  top: -80px;
  left: 20px;
  z-index: 10;
  padding: 12px;
  background: var(--cream);
}
.ad-updated .skip:focus {
  top: 15px;
}
.ad-updated .section-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 8%;
  align-items: end;
  margin-bottom: 42px;
}
.ad-updated .section-head p {
  color: var(--muted);
      max-width: 100%;

}
.ad-updated .section-head p + p {
  margin-top: 15px;
}
.ad-updated .number {
  color: var(--dgreen);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.ad-updated .sticky-intro {
  position: sticky;
  top: 45px;
  align-self: start;
}
.ad-updated .sticky-intro h2 {
  margin-top: 20px;
}
.ad-updated .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--forest);
  color: var(--cream);
}
.ad-updated .hero-photo,
.ad-updated .hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ad-updated .hero-photo {
  object-position: 50% 42%;
}
.ad-updated .hero-shade {
  background: linear-gradient(
    90deg,
    #092218ed 0%,
    #092218cb 48%,
    #09221848 100%
  );
}
.ad-updated .hero-copy {
  padding-block: clamp(70px, 8vw, 125px);
}
.ad-updated .hero .eyebrow {
  color: var(--lime);
  margin-bottom: 26px;
}
.ad-updated .hero h1 {
  max-width: 830px;
}
.ad-updated .hero-copy > p:not(.eyebrow) {
  max-width: 660px;
}
.ad-updated .hero-copy .hero-intake {
  font-size: 20px;
  font-weight: 600;
  margin-top: 26px;
  color: var(--lime);
}
.ad-updated .hero-intake + p {
  margin-top: 23px;
}
.ad-updated .hero-copy > p + p {
  margin-top: 16px;
}
.ad-updated .hero .text-link {
  color: var(--cream);
}
.ad-updated .hero-question {
  font-size: 13px;
  margin-top: 25px;
}
.ad-updated .hero-campuses {
  font-size: 12px;
  letter-spacing: 0.13em;
  margin-top: 26px;
}
.ad-updated .grade-control {
  max-width: 460px;
  width: 100%;
  justify-self: end;
}
.ad-updated .grade-control label {
  display: block;
  margin-bottom: 12px;
  color: var(--forest);
  font-size: 14px;
  font-weight: 600;
}
.ad-updated .grade-control select {
  width: 100%;
  background: #fffaf3;
  color: var(--forest);
  border: 1px solid #c5ccb8;
  border-radius: 4px;
  padding: 14px 16px;
  font-size: 16px;
}
.ad-updated .campus-result-title {
  font-size: 22px;
  letter-spacing: -0.025em;
}
.ad-updated .selection-status {
  min-height: 28px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.ad-updated .campus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px 32px;
  margin-top: 28px;
}
.ad-updated .campus-card {
  min-width: 0;
}
.ad-updated .campus-card figure {
  aspect-ratio: 1.85;
  overflow: hidden;
  border-radius: 5px 65px 5px 5px;
}
.ad-updated .campus-card:nth-child(even) figure {
  border-radius: 65px 5px 5px 5px;
}
.ad-updated .campus-copy {
  padding-top: 23px;
}
.ad-updated .campus-copy h3 {
  margin-top: 12px;
}
.ad-updated .campus-copy p:not(.eyebrow) {
  margin-top: 15px;
  color: var(--muted);
}
.ad-updated .campus-copy .actions {
  gap: 22px;
}
.ad-updated .future-campus {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  background: var(--forest);
  color: var(--cream);
}
.ad-updated .future-campus .eyebrow {
  color: var(--lime);
}
.ad-updated .future-campus .future-title {
  margin-block: 15px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.04em;
}
.ad-updated .future-campus > p:last-child {
  font-size: 14px;
}
.ad-updated .faq-contact {
  margin-top: -45px;
  padding-bottom: 70px;
}
.ad-updated .no-js .grade-control {
  display: none;
}
.ad-updated .why {
  background: #eef0df;
  border-radius: 0 100px 0 0;
}
.ad-updated .why-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 12%;
}
.ad-updated .why .sticky-intro .text-link {
  margin-top: 30px;
}
.ad-updated .reason {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px;
  padding: 32px 0;
  border-top: 1px solid #cbd3be;
}
.ad-updated .reason:first-child {
  padding-top: 0;
  border-top: 0;
}
.ad-updated .reason .number {
  padding-top: 5px;
}
.ad-updated .reason p {
  margin-top: 17px;
  color: var(--muted);
}
.ad-updated .process {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 12%;
}
.ad-updated .process-copy {
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.ad-updated .process-copy p {
  margin-top: 18px;
  max-width: 600px;
}
.ad-updated .process-copy .button {
  margin-top: 25px;
}
.ad-updated .stages {
  background: var(--forest);
  color: var(--cream);
}
.ad-updated .stages-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 9%;
}
.ad-updated .stages .eyebrow {
  color: var(--lime);
}
.ad-updated .stage-navigation {
  display: grid;
  gap: 14px;
  margin-top: 35px;
  font-size: 12px;
  /* letter-spacing: 0.08em; */
}
.ad-updated .stage-navigation a {
  color: #d5dfce;
}
.ad-updated .stage-navigation a.is-active {
  color: var(--lime);
}
.ad-updated .stage-card + .stage-card {
  margin-top: 55px;
}
.ad-updated .stage-card figure {
  aspect-ratio: 1.75;
  border-radius: 5px 65px 5px 5px;
  overflow: hidden;
}
.ad-updated .stage-copy {
  padding: 26px 0 0;
}
.ad-updated .stage-copy .eyebrow {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.ad-updated .stage-copy .eyebrow span {
  color: #d5dfce;
}
.ad-updated .stage-copy h3 {
  margin-top: 14px;
  font-size: clamp(30px, 3vw, 42px);
}
.ad-updated .stage-copy p:not(.eyebrow) {
  margin-top: 20px;
  color: #dfe7dc;
}
.ad-updated .stage-copy .stage-lead {
  color: var(--cream);
  font-size: 18px;
}
.ad-updated .stage-copy .availability {
  font-size: 13px;
}
.ad-updated .stages .text-link {
  color: var(--lime);
}
.ad-updated .stages .button {
  background: var(--lime);
  color: var(--forest);
}
.ad-updated .stages .button:hover {
  background: #e1dc51;
}
.ad-updated .visit-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  margin-top: 20px;
}
.ad-updated .visit-options article {
  border-block: 1px solid var(--line);
  padding: 24px 0;
}
.ad-updated .visit-options h3 {
  font-size: 23px;
  margin-bottom: 18px;
}
.ad-updated .phase6-visit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 34px;
  padding: 27px 30px;
  background: #eef0df;
  border-radius: 4px;
}
.ad-updated .phase6-visit h3 {
  font-size: 22px;
}
.ad-updated .phase6-visit p {
  margin-top: 8px;
  color: var(--muted);
}
.ad-updated .choice-link {
  display: block;
  font-size: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #cbd3be;
}
.ad-updated .choice-link:hover {
  color: var(--dgreen);
}
.ad-updated .closing-campuses {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.ad-updated .closing-campuses article {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.ad-updated .closing-campuses h3 {
  font-size: 22px;
}
.ad-updated .closing-campuses .button,
.ad-updated .closing-campuses .text-link {
  margin-top: 23px;
}
.ad-updated .coming-campus p {
  font-size: 13px;
  margin-top: 14px;
  color: var(--muted);
}
.ad-updated .closing-help {
  margin-top: 42px;
  color: var(--muted);
  font-size: 14px;
}
.ad-updated .closing-help a {
  margin-left: 12px;
}
.ad-updated .closing .eyebrow {
  margin-bottom: 20px;
}
.ad-updated .motion-toggle {
  position: fixed;
  bottom: 18px;
  right: 20px;
  z-index: 5;
  padding: 9px 15px;
  border: 1px solid #c9d4c4;
  border-radius: 30px;
  background: #fffaf2f0;
  color: var(--forest);
  font-size: 12px;
}
.js .ad-updated .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.js .ad-updated .reveal.visible,
.motion-paused .ad-updated .reveal {
  opacity: 1;
  transform: none;
}
.motion-paused .ad-updated * {
  scroll-behavior: auto !important;
  transition: none !important;
}
@media (max-width: 1000px) {
  .ad-updated .section-head {
    gap: 5%;
  }
  .ad-updated .why-grid,
  .ad-updated .process,
  .ad-updated .stages-grid {
    gap: 6%;
  }
  .ad-updated .closing-campuses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}
@media (max-width: 700px) {
  .ad-updated .section {
    padding-block: 55px;
  }
  .ad-updated .hero-copy {
    padding-block: 65px;
  }
  .ad-updated h1 {
    font-size: clamp(42px, 10vw, 64px);
  }
  .ad-updated h2 {
    font-size: clamp(34px, 8vw, 46px);
  }
  .ad-updated .hero-copy .hero-intake {
    font-size: 17px;
  }
  .ad-updated .hero-copy > p {
    font-size: 14px;
  }
  .ad-updated .hero-photo {
    object-position: 60% center;
  }
  .ad-updated .hero-shade {
    background: linear-gradient(90deg, #092218e8, #092218b3);
  }
  .ad-updated .section-head,
  .ad-updated .why-grid,
  .ad-updated .process,
  .ad-updated .stages-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .ad-updated .grade-control {
    justify-self: start;
    max-width: none;
  }
  .ad-updated .campus-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .ad-updated .campus-copy p,
  .ad-updated .reason p,
  .ad-updated .stage-copy p {
    font-size: 14px;
  }
  .ad-updated .sticky-intro {
    position: static;
  }
  .ad-updated .why {
    border-radius: 0 60px 0 0;
  }
  .ad-updated .stage-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 25px;
  }
  .ad-updated .stage-copy .stage-lead {
    font-size: 16px;
  }
  .ad-updated .visit-options {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ad-updated .visit-options article + article {
    border-top: 0;
  }
  .ad-updated .phase6-visit {
    display: block;
    padding: 25px;
  }
  .ad-updated .phase6-visit .button {
    margin-top: 22px;
  }
  .ad-updated .closing-campuses {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }
  .ad-updated .closing-campuses h3 {
    font-size: 19px;
  }
  .ad-updated .closing-campuses .button {
    padding-inline: 18px;
  }
  .ad-updated .closing-help a {
    margin: 12px 0 0;
  }
}
@media (max-width: 380px) {
  .ad-updated .closing-campuses {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .ad-updated .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.ad-updated .ad-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}
.ad-updated .ad-faq .faq-intro {
  position: sticky;
  top: calc(var(--header, 0px) + 40px);
}
.ad-updated .ad-faq .faq-intro p {
  margin-top: 20px;
  color: var(--muted, #64675f);
}
.ad-updated .ad-faq .faq-list {
  min-width: 0;
}
.ad-updated .ad-faq .faq-list details {
  border-top: 1px solid var(--line, #dcded2);
  padding: 0;
}
.ad-updated .ad-faq .faq-list details:last-child {
  border-bottom: 1px solid var(--line, #dcded2);
}
.ad-updated .ad-faq .faq-list summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 24px 40px 24px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.ad-updated .ad-faq summary::-webkit-details-marker {
  display: none;
}
.ad-updated .ad-faq .faq-list summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 21px;
  font-size: 25px;
  font-weight: 400;
  color: var(--dgreen, #287b30);
}
.ad-updated .ad-faq .faq-list details[open] summary {
  color: var(--dgreen, #287b30);
}
.ad-updated .ad-faq .faq-list details[open] summary::after {
  content: "−";
}
.ad-updated .ad-faq summary:hover {
  color: var(--dgreen, #287b30);
}
.ad-updated .ad-faq summary:focus-visible {
  outline: 2px solid var(--green, #287b30);
  outline-offset: 4px;
}
.ad-updated .ad-faq .faq-answer {
  padding: 0 36px 26px 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted, #64675f);
  overflow-wrap: anywhere;
}
.ad-updated .ad-faq .faq-answer p {
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}
.ad-updated .ad-faq .faq-answer p + p {
  margin-top: 16px;
}
.ad-updated .ad-faq .faq-answer ul {
  margin: 14px 0 18px;
  padding-left: 22px;
}
.ad-updated .ad-faq .faq-answer li + li {
  margin-top: 8px;
}
.ad-updated .ad-faq .faq-answer a {
  color: var(--green, #287b30);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ad-updated .ad-faq .faq-campus-list {
  margin: 0;
}
.ad-updated .ad-faq .faq-campus-list > div {
  display: grid;
  grid-template-columns: minmax(90px, 0.45fr) minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line, #dcded2);
}
.ad-updated .ad-faq .faq-campus-list > div:last-child {
  border: 0;
}
.ad-updated .ad-faq .faq-campus-list dt {
  color: var(--forest, #173d31);
  font-weight: 600;
}
.ad-updated .ad-faq .faq-campus-list dd {
  margin: 0;
}
@media (max-width: 700px) {
  .ad-updated .ad-faq {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .ad-updated .ad-faq .faq-intro {
    position: static;
  }
  .ad-updated .ad-faq .faq-list summary {
    font-size: 16px;
    padding-block: 21px;
  }
  .ad-updated .ad-faq .faq-list summary::after {
    top: 18px;
  }
  .ad-updated .ad-faq .faq-answer {
    font-size: 14px;
    padding-right: 8px;
  }
  .ad-updated .ad-faq .faq-campus-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Match the current Karachi photographic banner and heading scale. */
.ad-updated h2 {
  font-size: clamp(34px, 3.7vw, 56px);
}
.ad-updated .hero {
  display: flex;
  align-items: center;
  min-height: 650px;
  height: auto;
  max-height: none;
}
.ad-updated .hero-copy {
  padding-block: clamp(70px, 7vw, 110px);
  width: 100%;
}
.ad-updated .hero h1 {
  font-size: clamp(48px, 6.3vw, 92px);
  max-width: 1000px;
}
.ad-updated .hero-photo {
  width: 100%;
  height: 100%;
}
.ad-updated .hero-shade {
  background: linear-gradient(90deg, #0b241ded, #0b241d91 65%, #0b241d38);
}
.ad-updated .section-head {
  align-items: start;
}
.ad-updated .section-head > p {
  padding-top: 6px;
}
.ad-updated .ad-process .process-intro > .btn {
  margin-top: 30px;
}
.ad-updated .ad-process h2 {
  color: var(--cream);
}
.ad-updated .ad-process .process-step h3 {
  color: #c5d6be;
}
.ad-updated .ad-process .process-step.active h3 {
  color: var(--lime);
}
.ad-updated .process-step .step-number {
  color: var(--lime);
}
.ad-updated .ad-process .process-intro {
  top: calc(var(--header) + 35px);
}
.ad-updated .ad-process .process-intro > p {
  color: #dfe7dc;
}
.ad-updated .ad-process .process-intro > .btn {
  background: var(--lime);
  color: var(--forest) !important;
  transition: 0.3s;
}
.ad-updated .ad-grade-finder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
  background: #eef0df;
  padding: 32px;
  margin-bottom: 40px;
  border-radius: 12px;
}
.ad-updated #vlc-age-calculator {
  padding: 32px;
}
.ad-updated .ad-dob-form label,
.ad-updated .grade-control label {
  display: block;
  margin-bottom: 12px;
  color: var(--forest);
  font-size: 14px;
  font-weight: 600;
}
.ad-updated .ad-dob-entry {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.ad-updated .ad-dob-entry input {
  min-width: 0;
  flex: 1;
  width: 100%;
}
.ad-updated .ad-dob-entry .button {
  flex-shrink: 0;
}
.ad-updated .grade-control {
  max-width: none;
}
.ad-updated .grade-control select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23173d31' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 18px center;
  background-repeat: no-repeat;
  padding-right: 48px;
}
.ad-updated #vlc-error {
  color: #a52b25;
  font-size: 13px;
  margin-top: 8px;
}
.ad-updated .ad-grade-result {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--forest);
}
.ad-updated .ad-grade-result:empty {
  display: none;
}
.ad-updated .ad-booking {
  margin-top: 38px;
  padding: clamp(24px, 4vw, 50px);
  background: #eef0df;
  border-radius: 12px;
  scroll-margin-top: calc(var(--header) + 24px);
}
.ad-updated .ad-booking > h3 {
  margin-bottom: 28px;
}
.ad-updated .ad-booking .ad-form {
  max-width: 900px;
}
.ad-updated .ad-form [type="submit"] {
  width: auto;
}
.ad-updated .campus-result-title {
  margin-top: 20px;
}
.ad-updated .future-campus {
  min-height: 250px;
}
.ad-updated .faq-contact {
  margin-top: 25px;
}
@media (max-width: 1000px) {
  .ad-updated .ad-grade-finder {
    grid-template-columns: 1fr;
  }
  .ad-updated .ad-dob-entry {
    max-width: 600px;
  }
}
@media (max-width: 700px) {
  .ad-updated .hero {
    min-height: 620px;
  }
  .ad-updated .hero h1 {
    font-size: clamp(44px, 10vw, 64px);
  }
  .ad-updated h2 {
    font-size: 34px;
  }
  .ad-updated .ad-process .process-intro {
    position: static;
  }
  .ad-updated .ad-grade-finder,
  .ad-updated #vlc-age-calculator {
    padding: 24px;
  }
  .ad-updated .ad-dob-entry {
    flex-direction: column;
  }
  .ad-updated .ad-dob-entry input {
    min-height: 52px;
  }
  .ad-updated .ad-dob-entry .button {
    align-self: start;
  }
}
@media (forced-colors: active) {
  .ad-updated .grade-control select {
    appearance: auto;
    background-image: none;
  }
}

/* The banner owns one overlay; keep its copy above the photograph. */
.ad-updated .hero::after {
  content: none;
}
.ad-updated .hero-copy {
  position: relative;
  z-index: 1;
  color: var(--cream);
}
.ad-updated .hero h1 {
  color: var(--cream);
}

/* Visit content flows vertically; legacy .visit grid must not place its children. */
.ad-updated .visit {
  display: block;
  padding-bottom: 48px;
}
.ad-updated .ad-faq {
  padding-top: 48px;
}
.ad-updated .visit .section-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10%;
  margin-bottom: 36px;
}
.ad-updated .visit .section-head h2 {
  max-width: none;
}
.ad-updated .section-head p:last-child {
  max-width: none;
}
.ad-updated .visit > .eyebrow {
  margin-bottom: 18px;
}
.ad-updated .visit-options {
  margin-top: 0;
}
.ad-updated .visit-options article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffbf5;
}
.ad-updated .ad-booking {
  margin-top: 32px;
}
.ad-updated .ad-booking .ad-form {
  max-width: none;
}
.ad-updated .phase6-visit {
  margin-top: 30px;
  border-radius: 10px;
}
.ad-updated .phase6-visit > div {
  min-width: 0;
}
.ad-updated .phase6-visit .button {
  flex-shrink: 0;
}

/* Framed campus cards for the final application choices. */
.ad-updated .closing-campuses {
  gap: 24px;
  align-items: stretch;
}
.ad-updated .closing-campuses article {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffbf5;
  box-shadow: 0 8px 24px #173d3106;
}
.ad-updated .closing-campus__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1.35;
  object-fit: cover;
  border-radius: 8px;
}
.ad-updated .closing-campus__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-height: 205px;
  padding: 24px 14px 20px;
  text-align: center;
}
.ad-updated .closing-campus__copy h3 {
  color: var(--forest);
  margin-bottom: 16px;
}
.ad-updated .closing-campus__copy > p {
  margin: 0 0 20px;
}
.ad-updated .closing-campus__copy .button {
  margin-top: auto;
}
.ad-updated .closing-campus__copy .button-outline {
  color: var(--forest);
  border-color: var(--forest);
  background: transparent;
}
.ad-updated .closing-campus__copy .button-outline:hover {
  background: #173d3108;
}
@media (max-width: 700px) {
  .ad-updated .visit {
    padding-bottom: 36px;
  }
  .ad-updated .ad-faq {
    padding-top: 36px;
  }
  .ad-updated .visit .section-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ad-updated .visit-options {
    gap: 14px;
  }
  .ad-updated .visit-options article + article {
    border-top: 1px solid var(--line);
  }
  .ad-updated .phase6-visit .button {
    margin-top: 20px;
  }
  .ad-updated .closing-campuses {
    grid-template-columns: 1fr;
  }
  .ad-updated .closing-campus__copy {
    min-height: 185px;
  }
}

/* The text-only Phase 6 graphic must fit its mobile campus column too. */
.ad-updated .future-campus {
  width: 100%;
  max-width: 100%;
  aspect-ratio: auto;
}
@media (max-width: 440px) {
  .ad-updated .ad-form {
    grid-template-columns: 1fr;
  }
}

/* Keep the complete sticky introduction below the existing site header. */
.ad-updated .sticky-intro {
  top: calc(var(--header) + 32px);
}
.ad-updated .stage-navigation { font-size: 16px; letter-spacing: normal; line-height: 1.75; }
.ad-updated .stage-navigation a { color: #dfe7dc; }
.ad-updated .stage-navigation a.is-active { color: var(--lime); } 
@media (max-width: 700px) { 
  .ad-updated .stage-navigation { font-size: 14px; } 
}

/* Framed options in the available-campus chooser; filtering stays unchanged. */
.ad-updated .chooser .campus-grid {
  gap: 32px;
  align-items: stretch;
}
.ad-updated .chooser .campus-card {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffbf5;
  box-shadow: 0 8px 24px #173d3106;
  overflow: hidden;
}
.ad-updated .chooser .campus-card.admissionsnew{
align-items: unset;
    min-height: auto;
}
.ad-updated .chooser .campus-card figure,
.ad-updated .chooser .campus-card:nth-child(even) figure {
  flex-shrink: 0;
  width: 100%;
  border-radius: 8px;
}
.ad-updated .chooser .campus-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px;
}
.ad-updated .chooser .campus-copy .actions {
  padding-top: 28px;
  margin-top: auto;
}
.ad-updated .visit-options article {
  text-align: center;
}
@media (max-width: 700px) {
  .ad-updated .sticky-intro {
    position: static;
  }
  .ad-updated .chooser .campus-copy {
    padding: 22px 16px;
  }
  .ad-updated .chooser .campus-grid {
    gap: 24px;
  }
}

/* Campus visit form opens from the visit cards, with native focus trapping. */
.ad-tour-open {
  overflow: hidden;
}
.ad-updated #visit-options {
  scroll-margin-top: calc(var(--header) + 24px);
}
.ad-updated .ad-tour-dialog {
  width: min(940px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #eef0df;
  color: var(--ink);
  box-shadow: 0 24px 90px #071d1640;
  overflow: auto;
}
.ad-updated .ad-tour-dialog::backdrop {
  background: #09291fcc;
  backdrop-filter: blur(4px);
}
.ad-updated .ad-tour-dialog .ad-booking {
  margin: 0;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 0;
}
.ad-updated .ad-tour-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}
.ad-updated .ad-tour-dialog__header h3 {
  max-width: 680px;
}
.ad-updated .ad-tour-dialog__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #a5b49c;
  border-radius: 50%;
  background: #fffbf5;
  color: var(--forest);
  font: 26px/1 Arial, sans-serif;
}
.ad-updated .ad-tour-dialog__close:hover {
  background: #e4e8d7;
}
.ad-updated #admissions-faq {
  padding-bottom: 40px;
}
.ad-updated .closing-admission {
  padding-top: 40px;
}
.ad-updated .closing-admission > .eyebrow {
  margin-bottom: 20px;
}
.ad-updated .closing-admission .section-head {
  align-items: start;
}
.no-js .ad-tour-dialog {
  display: block;
  position: static;
  margin: 40px auto;
}
@media (max-width: 700px) {
  .ad-updated #admissions-faq {
    padding-bottom: 28px;
  }
  .ad-updated .closing-admission {
    padding-top: 28px;
  }
  .ad-updated .ad-tour-dialog__header {
    gap: 14px;
  }
  .ad-updated .ad-tour-dialog__header h3 {
    font-size: 26px;
  }
}


/*admissions end*/

/*admissions lahore*/
/* Lahore body-only page and source-specific editorial content. */

.admissions-lahore {
  /* --header: 0px; */
      --forest: #173d31;

}
.admissions-lahore .closing:after{
  display: none;
}
/* .admissions-lahore main {
  padding-top: 0;
} */

.admissions-lahore .ad-updated .hero {
  min-height: 100svh;
  height: auto;
}

.admissions-lahore .ad-updated .hero-copy {
  padding-block: clamp(80px, 8vw, 125px);
}

.admissions-lahore .ad-updated .hero-copy > p:not(.eyebrow):not(.hero-campuses):not(.hero-question) {
  max-width: 820px;
}

.admissions-lahore .hero-campuses {
  white-space: pre-line;
}

.admissions-lahore .ad-updated .hero-copy .hero-intake {
  color: #e6ec9b;
}

.admissions-lahore .ad-updated .hero .eyebrow {
  color: #e6ec9b;
}

.admissions-lahore .button {
  text-decoration: none;
}

.admissions-lahore .section-head {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 9%;
  align-items: start;
}

.admissions-lahore .ad-updated .section-head > p {
  max-width: none;
  padding-top: 0;
  font-size: 16px;
}

.admissions-lahore .ad-updated .section-head .lahore-editorial-copy p {
  max-width: none;
  color: var(--muted);
  font-size: 16px;
}

.admissions-lahore .lahore-editorial-copy p + p {
  margin-top: 22px;
}

.admissions-lahore .lahore-statement {
  margin-top: 32px;
  color: var(--forest);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 600;
  line-height: 1.35;
}

.admissions-lahore .ad-updated .why {
  border-radius: 0;
}

.admissions-lahore .ad-updated .sticky-intro {
  top: 45px;
}

.admissions-lahore .ad-updated .ad-grade-finder {
  margin-bottom: 0;
  align-items: start;
}

.admissions-lahore .ad-updated .grade-control {
  max-width: none;
}

.admissions-lahore .finder-help {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.admissions-lahore .ad-grade-result {
  grid-column: 1 / -1;
  padding-top: 28px;
  border-top: 1px solid #c5ccb8;
}

.admissions-lahore .ad-grade-result .eyebrow {
  margin: 0 0 18px;
}

.admissions-lahore .ad-grade-result h3 {
  margin-bottom: 12px;
  font-size: clamp(28px, 3vw, 42px);
}

.admissions-lahore .ad-grade-result > p:last-child {
  margin-top: 14px;
}

.admissions-lahore .ad-grade-finder > .actions {
  grid-column: 1 / -1;
  margin-top: 0;
}

.admissions-lahore .ad-updated .ad-faq .faq-review-note {
  padding: 18px;
  border: 1px dashed #bd3838;
  border-radius: 8px;
  background: #fff0ed;
  color: #9c2727;
  font-size: 13px;
}

.admissions-lahore .ad-updated .ad-faq .faq-intro {
  top: 40px;
}

.admissions-lahore .visit-options article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.admissions-lahore .ad-updated .ad-faq {
  padding-top: 75px;
}

.admissions-lahore .ad-tour-dialog label {
  display: block;
}

.admissions-lahore .motion-toggle {
  font: 400 12px/1.5 Poppins, Arial, sans-serif;
}

@media (max-width: 760px) {
  .admissions-lahore .section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  
  }

  .admissions-lahore .section-head p:last-child {
    margin-top: 0;
  
  }

  .admissions-lahore .ad-updated .section-head .lahore-editorial-copy p + p {
    margin-top: 22px;
  
  }

  .admissions-lahore .ad-updated .hero h1 {
    font-size: clamp(40px, 10vw, 64px);
  
  }

  .admissions-lahore .ad-updated .hero-copy {
    padding-block: 75px;
  
  }

  .admissions-lahore .ad-updated .hero-copy p {
    font-size: 16px;
  
  }

  .admissions-lahore .ad-updated .hero-copy .hero-campuses,
  .admissions-lahore .ad-updated .hero-copy .hero-question {
    font-size: 13px;
  
  }

  .admissions-lahore .ad-updated .ad-faq .faq-intro {
    position: static;
  
  }

  .admissions-lahore .ad-updated .visit-options {
    grid-template-columns: minmax(0, 1fr);
  
  }

  .admissions-lahore .ad-updated .visit-options article + article {
    border-left: 0;
    padding-left: 0;
  
  }
}

/* Keep outlined actions legible on the light finder panel. */

.admissions-lahore .ad-updated .ad-grade-finder .button-outline {
  border-color: var(--green);
  color: var(--forest);
  background: transparent;
}

.admissions-lahore .ad-updated .ad-grade-finder .button-outline:hover {
  background: var(--forest);
  color: var(--cream);
}

.admissions-lahore .ad-updated .section-head .lahore-editorial-copy p + p {
  margin-top: 22px;
}

/* ---------------------------------------------------------------------------
   Lahore refinements: no underlines, intro below the banner, stage finder with
   calendar, centred visit cards, closing band in the admissions-process theme,
   and a consistent vertical rhythm.
   --------------------------------------------------------------------------- */
body.admissions-lahore a,
body.admissions-lahore .button {
  text-decoration: none;
}

body.admissions-lahore .ad-updated .text-link {
  border-bottom: 0;
  padding-bottom: 0;
}

.ad-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Rhythm: every content section breathes the same way; labels sit apart from headings. */
body.admissions-lahore .ad-updated main > .section,
body.admissions-lahore .ad-updated > .section {
  padding-block: clamp(60px, 6vw, 96px);
}

body.admissions-lahore .ad-updated .section .eyebrow {
  margin-bottom: 18px;
}

body.admissions-lahore .ad-updated .section-head {
  margin-bottom: clamp(32px, 3.5vw, 48px);
}

body.admissions-lahore .ad-updated .section-head h2 + p,
body.admissions-lahore .ad-updated .section-head > div > p:not(.eyebrow) {
  margin-top: 18px;
}

/* Intro below the banner: heading left, copy right (same layout as the finder heading). */
body.admissions-lahore .ad-updated .ad-intro {
  padding-bottom: 0;
}

body.admissions-lahore .ad-updated .ad-intro .section-head {
  margin-bottom: 0;
}

/* Stage finder. */
body.admissions-lahore .ad-updated .ad-grade-finder {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 48px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 24px;
  background: #eef0df;
}

body.admissions-lahore .ad-updated .ad-dob-form label,
body.admissions-lahore .ad-updated .grade-control label {
  margin-bottom: 14px;
  color: var(--forest);
  font-size: 17px;
  font-weight: 600;
}

body.admissions-lahore .ad-updated .ad-dob-entry {
  gap: 16px;
}

body.admissions-lahore .ad-dob-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

body.admissions-lahore .ad-updated .ad-dob-field input,
body.admissions-lahore .ad-updated .grade-control select {
  height: 60px;
  border: 1.5px solid #c5ccb8;
  border-radius: 8px;
  background-color: #fffdf8;
  color: var(--forest);
  font-size: 17px;
}

body.admissions-lahore .ad-updated .ad-dob-field input {
  width: 100%;
  padding: 0 58px 0 20px;
}

body.admissions-lahore .ad-updated .grade-control select {
  padding: 0 48px 0 20px;
}

body.admissions-lahore .ad-dob-field input::placeholder {
  color: #9aa092;
}

body.admissions-lahore .ad-dob-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--forest);
  cursor: pointer;
  transform: translateY(-50%);
}

body.admissions-lahore .ad-dob-toggle:hover,
body.admissions-lahore .ad-dob-toggle[aria-expanded="true"] {
  background: #eef0df;
}

body.admissions-lahore .ad-updated .ad-dob-entry .button {
  min-height: 60px;
  padding: 0 28px;
  border-radius: 8px;
  font-size: 16px;
}

body.admissions-lahore #vlc-age-calculator .finder-help {
  margin-top: 12px;
  font-size: 14px;
}

body.admissions-lahore #vlc-age-calculator .ad-grade-result {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid #c5ccb8;
}

body.admissions-lahore #vlc-age-calculator .ad-grade-result .eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: .2em;
}

body.admissions-lahore #vlc-age-calculator .ad-grade-result h3 {
  margin: 0 0 10px;
  color: var(--forest);
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.1;
}

body.admissions-lahore #vlc-age-calculator .ad-grade-result .ad-grade-year {
  margin: 0 0 14px;
  color: var(--forest);
  font-size: 15px;
  font-weight: 600;
}

body.admissions-lahore #vlc-age-calculator .ad-grade-result #selection-status {
  max-width: 760px;
  margin: 0;
  color: var(--forest);
  font-size: 18px;
  line-height: 1.6;
}

body.admissions-lahore .ad-updated .ad-grade-finder > .actions {
  gap: 16px;
  margin-top: 28px;
}

body.admissions-lahore .ad-updated .ad-grade-finder > .actions .button {
  min-height: 58px;
  padding: 0 30px;
  border-radius: 8px;
  font-size: 16px;
}

body.admissions-lahore .ad-updated .ad-grade-finder .button-outline {
  border: 1.5px solid var(--green);
}

/* Calendar popover. */
body.admissions-lahore .ad-calendar, body.vlc-admissions-updated .ad-calendar{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  width: min(296px, calc(100vw - 32px));
  padding: 12px 12px 8px;
  border-radius: 14px;
  background: #fffdf9;
  color: var(--forest);
  box-shadow: 0 22px 48px #173d312e, 0 2px 6px #173d3114;
}

body.admissions-lahore .ad-calendar[hidden], body.vlc-admissions-updated .ad-calendar[hidden] {
  display: none;
}

body.admissions-lahore .ad-calendar button, body.vlc-admissions-updated .ad-calendar button{
  font: inherit;
  color: inherit;
  cursor: pointer;
}

body.admissions-lahore .ad-calendar button:focus-visible, body.vlc-admissions-updated .ad-calendar button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

body.admissions-lahore .ad-calendar__head, body.vlc-admissions-updated .ad-calendar__head {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  margin-bottom: 4px;
}

body.admissions-lahore .ad-calendar__nav, body.vlc-admissions-updated .ad-calendar__nav {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 22px;
  line-height: 1;
}

body.admissions-lahore .ad-calendar__nav:hover,
body.admissions-lahore .ad-calendar__day:not(:disabled):hover,
body.admissions-lahore .ad-calendar__option:not(:disabled):hover,
body.admissions-lahore .ad-calendar__clear:hover {
  background: #eef0df;
}

body.vlc-admissions-updated .ad-calendar__nav:hover,
body.vlc-admissions-updated .ad-calendar__day:not(:disabled):hover,
body.vlc-admissions-updated .ad-calendar__option:not(:disabled):hover,
body.vlc-admissions-updated .ad-calendar__clear:hover {
  background: #eef0df;
}

body.admissions-lahore .ad-calendar__title ,body.vlc-admissions-updated .ad-calendar__title {
  justify-self: center;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
}

body.admissions-lahore .ad-calendar__title::after, body.vlc-admissions-updated .ad-calendar__title::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}

body.admissions-lahore .ad-calendar__days, body.vlc-admissions-updated .ad-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 2px;
}

body.admissions-lahore .ad-calendar__weekday, body.vlc-admissions-updated .ad-calendar__weekday {
  padding: 4px 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

body.admissions-lahore .ad-calendar__day, body.vlc-admissions-updated .ad-calendar__day {
  justify-self: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 14px;
}

body.admissions-lahore .ad-calendar__day.is-outside {
  color: #a4a99c;
}

body.admissions-lahore .ad-calendar__day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--green);
}

body.admissions-lahore .ad-calendar__day.is-selected,
body.admissions-lahore .ad-calendar__option.is-selected {
  background: var(--green);
  color: var(--cream);
  font-weight: 600;
}

body.admissions-lahore .ad-calendar__day:disabled,
body.admissions-lahore .ad-calendar__option:disabled {
  opacity: .35;
  cursor: default;
}

body.admissions-lahore .ad-calendar__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-block: 6px;
}

body.admissions-lahore .ad-calendar__option {
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 14px;
}

body.admissions-lahore .ad-calendar__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #e4e6da;
}

body.admissions-lahore .ad-calendar__clear,
body.admissions-lahore .ad-calendar__today {
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
}

body.admissions-lahore .ad-calendar__clear {
  background: transparent;
}

body.admissions-lahore .ad-calendar__today {
  background: #eef0df;
  font-weight: 600;
}

/* Visit cards: centred, with the heading and link kept close together. */
body.admissions-lahore .ad-updated .visit-options article {
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

body.admissions-lahore .ad-updated .visit-options h3 {
  margin: 0;
}

/* Visit copy: the lead line sits beside the heading; the five pointers sit below in divided
   columns (as the Learning Journey visit steps), numbered 01–05 like the admissions process. */
body.admissions-lahore .ad-updated #visit .visit-lead {
  max-width: 520px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

body.admissions-lahore .ad-updated #visit .section-head {
  row-gap: clamp(28px, 3vw, 60px);
}

body.admissions-lahore .ad-updated #visit .lahore-editorial-copy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  counter-reset: visit-step;
}

body.admissions-lahore .ad-updated #visit .lahore-editorial-copy p {
  margin: 0;
  padding: 4px 22px;
  border-left: 1px solid #cbd1be;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  counter-increment: visit-step;
}

body.admissions-lahore .ad-updated #visit .lahore-editorial-copy p:first-child {
  padding-left: 0;
  border-left: 0;
}

body.admissions-lahore .ad-updated #visit .lahore-editorial-copy p:last-child {
  padding-right: 0;
}

body.admissions-lahore .ad-updated #visit .lahore-editorial-copy p::before {
  content: counter(visit-step, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  color: var(--green);
  font-size: 15px;
  font-weight: 400;
}

@media (max-width: 1000px) {
  body.admissions-lahore .ad-updated #visit .lahore-editorial-copy {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 28px;
  }

  body.admissions-lahore .ad-updated #visit .lahore-editorial-copy p:nth-child(n) {
    padding: 4px 22px;
    border-left: 1px solid #cbd1be;
  }

  body.admissions-lahore .ad-updated #visit .lahore-editorial-copy p:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }

  body.admissions-lahore .ad-updated #visit .lahore-editorial-copy p:nth-child(3n) {
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  body.admissions-lahore .ad-updated #visit .lahore-editorial-copy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }

  body.admissions-lahore .ad-updated #visit .lahore-editorial-copy p:nth-child(n) {
    padding: 4px 16px;
    border-left: 1px solid #cbd1be;
  }

  body.admissions-lahore .ad-updated #visit .lahore-editorial-copy p:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  body.admissions-lahore .ad-updated #visit .lahore-editorial-copy p:nth-child(even) {
    padding-right: 0;
  }
}

/* Closing band: the admissions-process theme (forest, cream copy, yellow action). */
body.admissions-lahore .ad-updated .closing {
  border-radius: 0 100px 0 0;
  background: var(--forest);
  color: var(--cream);
}

body.admissions-lahore .ad-updated .closing h2 {
  color: var(--cream);
}

body.admissions-lahore .ad-updated .closing .lahore-editorial-copy p {
  color: #dbe3d6;
}

body.admissions-lahore .ad-updated .closing .button {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--forest);
}

body.admissions-lahore .ad-updated .closing .button:hover {
  border-color: var(--cream);
  background: var(--cream);
}

body.admissions-lahore .ad-updated .closing .actions {
  margin-top: 30px;
}

@media (max-width: 760px) {
  body.admissions-lahore .ad-updated .ad-grade-finder {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  body.admissions-lahore .ad-updated .ad-dob-entry {
    flex-direction: column;
  }

  body.admissions-lahore .ad-updated .ad-dob-entry .button,
  body.admissions-lahore .ad-updated .ad-grade-finder > .actions .button {
    width: 100%;
  }

  body.admissions-lahore .ad-updated .ad-grade-result {
    margin-top: 8px;
  }

  body.admissions-lahore .ad-calendar {
    right: 0;
    width: auto;
    max-width: 296px;
  }

  body.admissions-lahore .ad-updated .closing {
    border-radius: 0 65px 0 0;
  }
}

/*admissions lahore end*/





/*community*/

/* 01. Theme, typography and common page-local controls. */
.vlc-community-page {
  --community-cream: #fff7ed;
  --community-paper: #fffbf5;
  --community-sage: #f0f0df;
  --community-forest: #173d31;
  --community-green: #287b30;
  --community-lime: #e6ec9b;
  --community-ink: #2f2f2f;
  --community-muted: #64675f;
  --community-line: #cbd1be;
  --community-gutter: clamp(22px, 5vw, 88px);
  margin: 0;
  background: var(--community-cream);
  color: var(--community-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.vlc-community-page *,
.vlc-community-page *::before,
.vlc-community-page *::after {
  box-sizing: border-box;
}

.vlc-community-page :where(h1, h2, h3, p, figure, ul) {
  margin: 0;
}

.vlc-community-page :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.14;
  overflow-wrap: break-word;
}

.vlc-community-page h2 {
  font-size: clamp(34px, 3.7vw, 56px);
}

.vlc-community-page h3 {
  font-size: clamp(24px, 2.2vw, 32px);
}

.vlc-community-page p {
  overflow-wrap: break-word;
}

.vlc-community-page a {
  color: inherit;
  text-decoration: none;
}

.vlc-community-page :where(a, button):focus-visible {
  outline: 3px solid var(--community-green);
  outline-offset: 5px;
}

.vlc-community-page img {
  display: block;
  max-width: 100%;
}

.vlc-community-page ::selection {
  background: var(--community-lime);
  color: var(--community-forest);
}

.vlc-community-section {
  padding: clamp(60px, 6vw, 100px) var(--community-gutter);
}

.vlc-community-eyebrow {
  margin-bottom: 18px;
  color: var(--community-green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.vlc-community-prose {
  color: var(--community-muted);
}

.vlc-community-prose p + p {
  margin-top: 20px;
}

.vlc-community-prose--light {
  color: #e1e8de;
}

.vlc-community-prose .vlc-community-prose__emphasis {
  color: var(--community-green);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  line-height: 1.4;
}

.vlc-community-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}

.vlc-community-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 25px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--community-lime);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition: background 200ms ease;
}

.vlc-community-page a.vlc-community-button {
  color: var(--community-forest);
}

.vlc-community-button:hover {
  background: var(--community-cream);
}

.vlc-community-page a.vlc-community-button--outline {
  border-color: #ffffff70;
  background: transparent;
  color: var(--community-cream);
}

.vlc-community-page a.vlc-community-button--outline:hover {
  background: var(--community-cream);
  color: var(--community-forest);
}

.vlc-community-text-link {
  display: inline-block;
  margin-top: 25px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.vlc-community-page .vlc-community-prose > .vlc-community-text-link {
  color: var(--community-forest);
}

.vlc-community-sticky {
  position: sticky;
  top: 105px;
  align-self: start;
}

/* Image overscan preserves the original gentle, native-scroll parallax. */
.vlc-community-parallax {
  position: relative;
  overflow: hidden;
  background: var(--community-sage);
}

.vlc-community-parallax > img {
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: calc(100% + 80px);
  object-fit: cover;
  transform: translateY(var(--community-media-shift, 0px));
}

/* 02. Opening: full-width photograph and the complete source introduction. */
.vlc-community-hero {
  position: relative;
  display: flex;
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
  overflow: hidden;
  background: var(--community-forest);
  color: var(--community-cream);
}

.vlc-community-hero__media {
  position: absolute;
  inset: 0;
}

.vlc-community-hero__media img {
  object-position: center 42%;
}

.vlc-community-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 45%, #09221845), linear-gradient(0deg, #071a1480, transparent 65%);
}

.vlc-community-hero__copy {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 100%;
  padding: 65px var(--community-gutter);
}

.vlc-community-breadcrumb {
  margin-bottom: 28px;
  color: var(--community-lime);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.vlc-community-breadcrumb a {
  border-bottom: 1px solid currentColor;
}

.vlc-community-hero h1 {
  max-width: 1080px;
  font-size: clamp(44px, 5.1vw, 78px);
}

.vlc-community-hero__lead {
  max-width: 700px;
  margin-top: 26px;
  color: #f0f2e8;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}

.vlc-community-hero a:focus-visible,
.vlc-community-houses a:focus-visible,
.vlc-community-fika a:focus-visible,
.vlc-community-closing a:focus-visible {
  outline-color: var(--community-lime);
}

.vlc-community-opening__story {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 8%;
  align-items: center;
  background: var(--community-paper);
}

.vlc-community-opening__statement {
  max-width: 550px;
  color: var(--community-green);
  font-size: clamp(34px, 3.7vw, 56px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.14;
}

/* 03. Everyday life: a sticky introduction and a natural sequence of moments. */
.vlc-community-everyday {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
}

.vlc-community-everyday__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: community-moment;
}

.vlc-community-everyday__moment {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 18px;
  padding: 34px 0;
  border-bottom: 1px solid var(--community-line);
  color: var(--community-forest);
  font-size: clamp(17.337px, 1.467vw, 17.505px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.35;
  counter-increment: community-moment;
}

.vlc-community-everyday__moment::before {
  content: counter(community-moment, decimal-leading-zero);
  padding-top: .35em;
  color: var(--community-green);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

.vlc-community-everyday__moment:first-child {
  padding-top: 0;
}

.vlc-community-everyday__close {
  margin-top: 28px;
}

/* 04. Student life: split introduction above ways of belonging. */
.vlc-community-students {
  background: var(--community-sage);
}

.vlc-community-students__intro {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
  margin-bottom: 45px;
}

.vlc-community-students__possibilities {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-top: 24px;
  border-top: 1px solid var(--community-line);
  color: var(--community-muted);
}

.vlc-community-students__possibilities p {
  padding-inline: 22px;
  line-height: 1.6;
}

.vlc-community-students__possibilities p:first-child {
  padding-left: 0;
}

.vlc-community-students__possibilities p + p {
  border-left: 1px solid var(--community-line);
}

.vlc-community-students__possibilities p:last-child {
  padding-right: 0;
}

/* 05. Houses: supplied logos above the names and a genuine sports photograph. */
.vlc-community-houses {
  background: var(--community-forest);
  color: var(--community-cream);
}

.vlc-community-houses__heading h2 {
  max-width: none;
}

.vlc-community-houses__heading h2 span {
  display: block;
}

.vlc-community-houses__names {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.vlc-community-houses__names li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: var(--community-lime);
  font-size: clamp(16px, 1.65vw, 24px);
  font-weight: 600;
  letter-spacing: .08em;
}

.vlc-community-houses__names img {
  width: min(100%, 240px);
  height: auto;
  transition: transform 250ms ease, filter 250ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .vlc-community-houses__names li:hover img {
    transform: translateY(-8px) scale(1.05);
    filter: drop-shadow(0 14px 16px #071f1a66);
  }
}

.vlc-community-houses__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7%;
  align-items: center;
  margin-top: 40px;
}

.vlc-community-houses__photo {
  min-height: 420px;
  border-radius: 4px 75px 4px 75px;
}

.vlc-community-page .vlc-community-prose--light > .vlc-community-text-link {
  color: var(--community-lime);
}

/* 06. Photograph/text splits shared only within this Community page. */
.vlc-community-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.vlc-community-split__photo {
  min-height: 560px;
}

.vlc-community-split__copy {
  align-self: center;
  padding: clamp(44px, 5vw, 80px);
}

.vlc-community-split__copy h2 + .vlc-community-prose {
  margin-top: 24px;
}

.vlc-community-split--reverse {
  background: var(--community-sage);
}

.vlc-community-split--reverse .vlc-community-split__photo {
  order: 2;
}

/* 07. Families encounter the child's work, then the reflection behind it. */
.vlc-community-learning {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 8%;
  background: var(--community-paper);
}

.vlc-community-learning__intro {
  align-self: start;
}

.vlc-community-learning__intro .vlc-community-prose {
  margin-top: 24px;
}

.vlc-community-learning__photo {
  height: clamp(330px, 32vw, 480px);
  border-radius: 75px 4px 75px 4px;
}

.vlc-community-learning__reflection {
  margin-top: 26px;
}

/* 08. Mothers Circles: editorial composition using the supplied story only. */
.vlc-community-mothers {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  column-gap: 8%;
  row-gap: 38px;
}

.vlc-community-mothers__intro .vlc-community-prose {
  margin-top: 24px;
}

.vlc-community-mothers__story {
  align-self: center;
}

.vlc-community-mothers__thought {
  grid-column: 1 / -1;
  max-width: 1200px;
  color: var(--community-green);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.3;
}

/* 09. Fika, inclusion and the wider community. */
.vlc-community-fika,
.vlc-community-inclusion,
.vlc-community-beyond {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
}

.vlc-community-fika {
  background: var(--community-forest);
  color: var(--community-cream);
}

.vlc-community-fika .vlc-community-eyebrow {
  color: var(--community-lime);
}

.vlc-community-inclusion {
  background: var(--community-sage);
}

.vlc-community-beyond {
  background: var(--community-paper);
}

/* 10. Familiar faces: the photograph stays while the moments pass. */
.vlc-community-people__intro {
  max-width: 1000px;
  margin-bottom: 45px;
}

.vlc-community-people__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7%;
  align-items: start;
}

.vlc-community-people__photo {
  position: sticky;
  top: 35px;
  height: clamp(420px, 43vw, 620px);
  border-radius: 75px 4px 75px 4px;
}

.vlc-community-people__moment {
  padding: 16px 0;
  border-bottom: 1px solid var(--community-line);
  color: var(--community-forest);
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.45;
}

.vlc-community-people__moment:first-child {
  padding-top: 0;
}

.vlc-community-people__moments > .vlc-community-prose {
  margin-top: 25px;
}

/* 11. Source heading only: no fabricated testimonials or empty quote cards. */
.vlc-community-page .vlc-community-voices {
  padding-block: clamp(40px, 4vw, 64px);
  background: var(--community-forest);
  color: var(--community-cream);
}

/* 12. Around the Circle: three framed cards opening Marketing stories. */
.vlc-community-around__heading {
  max-width: 950px;
}

.vlc-community-around__heading p {
  margin-top: 20px;
  color: var(--community-muted);
}

.vlc-community-around__stories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 38px;
}

.vlc-community-around__story {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  text-align: center;
  padding: 34px 24px;
  border: 1px solid var(--community-line);
  border-radius: 16px;
  background: var(--community-paper);
  box-shadow: 0 7px 22px #173d3108;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.vlc-community-around__story h3 {
  color: var(--community-forest);
}

.vlc-community-around__story p {
  margin-top: 16px;
  color: var(--community-muted);
}

.vlc-community-around__story:hover {
  transform: translateY(-4px);
  border-color: var(--community-green);
  box-shadow: 0 12px 26px #173d3112;
}

/* 13. Baby SNAP and the closing invitation. */
.vlc-community-baby {
  background: var(--community-paper);
}

.vlc-community-closing {
  background: var(--community-forest);
  color: var(--community-cream);
}

.vlc-community-closing h2 {
  max-width: 1150px;
}

.vlc-community-closing .vlc-community-prose {
  max-width: 1000px;
  margin-top: 28px;
}

.vlc-community-closing .vlc-community-actions {
  justify-content: center;
  margin-top: 38px;
}

.vlc-community-closing .vlc-community-text-link {
  margin-top: 0;
  color: var(--community-lime);
}

/* 14. Native scroll motion and complete-copy accessibility. */
.vlc-community-motion .vlc-community-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.vlc-community-motion .vlc-community-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.vlc-community-word-reveal .vlc-community-word {
  display: inline-block;
  visibility: hidden;
}

.vlc-community-word-reveal .vlc-community-word.is-written {
  visibility: visible;
}

.vlc-community-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 15. Responsive composition: keep all copy, photographs and actions readable. */
@media (max-width: 1000px) {
  .vlc-community-students__possibilities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 24px;
  }

  .vlc-community-students__possibilities p:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }

  .vlc-community-students__possibilities p:nth-child(3n) {
    padding-right: 0;
  }

  .vlc-community-split__copy {
    padding-inline: 35px;
  }
}

@media (max-width: 760px) {
  .vlc-community-section {
    padding-block: 50px;
  }

  .vlc-community-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  }

  .vlc-community-hero__copy {
    padding-block: 64px;
  }

  .vlc-community-hero h1 {
    font-size: clamp(40px, 9.5vw, 62px);
  }

  .vlc-community-hero__lead {
    font-size: 18px;
  }

  .vlc-community-hero__media::after {
    background: linear-gradient(90deg, #092218d9, #0922188f), linear-gradient(0deg, #071a14b3, transparent);
  }

  .vlc-community-opening__story,
  .vlc-community-everyday,
  .vlc-community-students__intro,
  .vlc-community-houses__body,
  .vlc-community-split,
  .vlc-community-learning,
  .vlc-community-mothers,
  .vlc-community-fika,
  .vlc-community-inclusion,
  .vlc-community-beyond,
  .vlc-community-people__body,
  .vlc-community-around__stories {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .vlc-community-sticky,
  .vlc-community-people__photo {
    position: static;
  }

  .vlc-community-houses__names {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vlc-community-houses__photo {
    min-height: 330px;
  }

  .vlc-community-split__photo {
    min-height: 0;
    height: 75vw;
    max-height: 500px;
  }

  .vlc-community-split--reverse .vlc-community-split__photo {
    order: 0;
  }

  .vlc-community-split__copy {
    padding: 42px var(--community-gutter) 50px;
  }

  .vlc-community-learning__photo {
    height: 330px;
  }

  .vlc-community-mothers__thought {
    grid-column: auto;
  }

  .vlc-community-people__photo {
    height: 370px;
  }

  .vlc-community-hero .vlc-community-actions,
  .vlc-community-closing .vlc-community-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .vlc-community-closing .vlc-community-text-link {
    align-self: flex-start;
  }
}

@media (max-width: 560px) {
  .vlc-community-students__possibilities {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 0;
  }

  .vlc-community-students__possibilities p {
    padding: 18px 0;
  }

  .vlc-community-students__possibilities p + p {
    border-left: 0;
    border-top: 1px solid var(--community-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vlc-community-motion .vlc-community-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .vlc-community-parallax > img,
  .vlc-community-houses__names li:hover img,
  .vlc-community-houses__names img,
  .vlc-community-around__story {
    transform: none;
    transition: none;
  }

  .vlc-community-word-reveal .vlc-community-word {
    visibility: visible;
  }
}


/* Current document update: existing page body and Marketing story popups. */
.vlc-community-hero { min-height: 610px; height: 88svh; max-height: 960px; }
.vlc-community-hero h1 { font-size: clamp(48px, 6.3vw, 92px); }
.vlc-community-page .vlc-community-developer-hide {
  background: #ffe7e5;
  color: #8e2525;
  border: 2px solid #c83b35;
}
.vlc-community-developer-note { margin-top: 20px; font-size: 13px; font-weight: 600; }
.vlc-community-page .vlc-community-around__story strong { font-weight: 700; }
.vlc-community-page .khi-story-dialog {
  --paper: var(--community-paper);
  --cream: var(--community-cream);
  --forest: var(--community-forest);
  --muted: var(--community-muted);
  font: inherit;
}
/* Editorial story popup: an open cream canvas with layered photographs. */
.khi-story-dialog {
  width: min(1440px, 96vw);
  max-width: none;
  max-height: 94svh;
  padding: 0;
  border: 1px solid #173d3126;
  border-radius: 22px;
  background: var(--paper);
  color: var(--forest);
  overscroll-behavior: contain;
}
.khi-story-dialog::backdrop {
  background: #0b281dcc;
  backdrop-filter: blur(8px);
}
.khi-story-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
}
.khi-preview-label {
  display: inline-block;
  margin-left: 14px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
}
.khi-preview-label[hidden] {
  display: none;
}
.khi-story-close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid #173d3128;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest);
  font-size: 27px;
  line-height: 1;
}
.khi-story-page {
  padding: 12px clamp(24px, 5vw, 76px) 54px;
}
.khi-popup-intro,
.khi-popup-gallery {
  display: grid;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  background: transparent;
}
.khi-popup-intro {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  padding: 10px 0 48px;
  border-bottom: 1px solid #173d311c;
}
.khi-popup-copy {
  min-width: 0;
}
.khi-story-page .eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 11px;
  letter-spacing: .18em;
  margin-bottom: 24px;
}
.khi-story-page .eyebrow::after {
  content: '';
  width: 64px;
  height: 1px;
  background: #52776780;
}
.khi-popup-copy h2 {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.05em;
}
.khi-popup-copy h3 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.14;
}
.khi-popup-copy > p:not(.eyebrow) {
  max-width: 48ch;
  margin-top: 24px;
  color: #526459;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.7;
}
.khi-popup-triptych {
  position: relative;
  isolation: isolate;
  height: clamp(270px, 28vw, 390px);
}
.khi-popup-triptych figure {
  position: absolute;
  left: 17%;
  top: 16%;
  z-index: 1;
  width: 39%;
  height: 77%;
  overflow: hidden;
  border: 4px solid var(--paper);
  border-radius: 20px;
  background: #c1cdb8;
  box-shadow: 0 18px 28px #173d3126;
  transform: translateX(-50%) rotate(-8deg);
}
.khi-popup-triptych figure:nth-child(2) {
  left: 50%;
  top: 0;
  z-index: 3;
  width: 43%;
  height: 100%;
  transform: translateX(-50%);
}
.khi-popup-triptych figure:nth-child(3) {
  left: 83%;
  top: 16%;
  transform: translateX(-50%) rotate(8deg);
}
.khi-popup-triptych img,
.khi-gallery-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.khi-popup-gallery {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(34px, 5vw, 80px);
  padding-top: 36px;
}
.khi-popup-gallery__visual {
  position: relative;
  min-width: 0;
}
.khi-gallery-stack {
  position: relative;
  height: clamp(260px, 25vw, 350px);
  margin-inline: 28px;
  isolation: isolate;
}
.khi-gallery-stack figure {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 38%;
  height: 96%;
  overflow: hidden;
  border: 3px solid var(--paper);
  border-radius: 16px;
  background: #c1cdb8;
  box-shadow: 0 14px 26px #173d3122;
  transform: translateX(-50%);
}
.khi-gallery-stack [data-offset="-1"],
.khi-gallery-stack [data-offset="1"] {
  top: 10%;
  z-index: 2;
  height: 78%;
}
.khi-gallery-stack [data-offset="-1"] {
  left: 30%;
}
.khi-gallery-stack [data-offset="1"] {
  left: 70%;
}
.khi-gallery-stack [data-offset="-2"],
.khi-gallery-stack [data-offset="2"] {
  top: 18%;
  z-index: 1;
  height: 62%;
}
.khi-gallery-stack [data-offset="-2"] {
  left: 13%;
}
.khi-gallery-stack [data-offset="2"] {
  left: 87%;
}
.khi-gallery-controls {
  position: absolute;
  top: calc(50% + 18px);
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.khi-gallery-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid #173d3110;
  border-radius: 50%;
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 6px 20px #173d3110;
  font-size: 23px;
  pointer-events: auto;
}
#popup-gallery-count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 800px) {
  .khi-popup-intro,
  .khi-popup-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .khi-popup-intro {
    padding-bottom: 36px;
  }
  .khi-popup-triptych {
    width: 90%;
    height: 330px;
    max-width: 540px;
    margin-inline: auto;
  }
  .khi-popup-gallery > .khi-popup-copy {
    grid-row: 1;
  }
  .khi-gallery-stack {
    height: 310px;
  }
}
@media (max-width: 480px) {
  .khi-story-dialog {
    width: calc(100vw - 16px);
    max-height: 96svh;
    border-radius: 16px;
  }
  .khi-story-toolbar {
    padding: 10px 14px;
    font-size: 9px;
    letter-spacing: .06em;
  }
  .khi-preview-label {
    display: block;
    margin: 2px 0 0;
  }
  .khi-story-page {
    padding: 16px 20px 32px;
  }
  .khi-popup-triptych {
    height: 230px;
    width: 92%;
  }
  .khi-popup-triptych figure {
    border-width: 3px;
    border-radius: 13px;
  }
  .khi-gallery-stack {
    height: 245px;
    margin-inline: 18px;
  }
  .khi-gallery-stack figure {
    width: 43%;
    border-radius: 12px;
    border-width: 2px;
  }
  .khi-gallery-controls button {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 700px) {
  .vlc-community-hero { min-height: 580px; height: 86svh; }
  .vlc-community-hero h1 { font-size: clamp(44px, 10vw, 64px); }
}




/*community end*/


/*community lahore*/

/* 01. Theme, typography and common page-local controls. */

.vlc-community-lahore {
  --community-cream: #fff7ed;
  --community-paper: #fffbf5;
  --community-sage: #f0f0df;
  --community-forest: #173d31;
  --community-green: #287b30;
  --community-lime: #e6ec9b;
  --community-ink: #2f2f2f;
  --community-muted: #64675f;
  --community-line: #cbd1be;
  --community-gutter: clamp(22px, 5vw, 88px);
  margin: 0;
  background: var(--community-cream);
  color: var(--community-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.vlc-community-lahore *, .vlc-community-lahore *::before, .vlc-community-lahore *::after {
  box-sizing: border-box;
}

.vlc-community-lahore :where(h1, h2, h3, p, figure, ul) {
  margin: 0;
}

.vlc-community-lahore :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.14;
  overflow-wrap: break-word;
}

.vlc-community-lahore h2 {
  font-size: clamp(34px, 3.7vw, 56px);
}

.vlc-community-lahore h3 {
  font-size: clamp(24px, 2.2vw, 32px);
}

.vlc-community-lahore p {
  overflow-wrap: break-word;
}

.vlc-community-lahore a {
  color: inherit;
  text-decoration: none;
}

.vlc-community-lahore :where(a, button):focus-visible {
  outline: 3px solid var(--community-green);
  outline-offset: 5px;
}

.vlc-community-lahore img {
  display: block;
  max-width: 100%;
}

.vlc-community-lahore ::selection {
  background: var(--community-lime);
  color: var(--community-forest);
}

.vlc-community-section {
  padding: clamp(60px, 6vw, 100px) var(--community-gutter);
}

.vlc-community-eyebrow {
  margin-bottom: 18px;
  color: var(--community-green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.vlc-community-prose {
  color: var(--community-muted);
}

.vlc-community-prose p + p {
  margin-top: 20px;
}

.vlc-community-prose--light {
  color: #e1e8de;
}

.vlc-community-prose .vlc-community-prose__emphasis {
  color: var(--community-green);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  line-height: 1.4;
}

.vlc-community-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}

.vlc-community-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 25px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--community-lime);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition: background 200ms ease;
}

.vlc-community-lahore a.vlc-community-button {
  color: var(--community-forest);
}

.vlc-community-button:hover {
  background: var(--community-cream);
}

.vlc-community-lahore a.vlc-community-button--outline {
  border-color: #ffffff70;
  background: transparent;
  color: var(--community-cream);
}

.vlc-community-lahore a.vlc-community-button--outline:hover {
  background: var(--community-cream);
  color: var(--community-forest);
}

.vlc-community-text-link {
  display: inline-block;
  margin-top: 25px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.vlc-community-lahore .vlc-community-prose > .vlc-community-text-link {
  color: var(--community-forest);
}

/* Image overscan preserves the original gentle, native-scroll parallax. */

.vlc-community-parallax {
  position: relative;
  overflow: hidden;
  background: var(--community-sage);
}

.vlc-community-parallax > img {
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: calc(100% + 80px);
  object-fit: cover;
  transform: translateY(var(--community-media-shift, 0px));
}

/* 02. Opening: full-width photograph and the complete source introduction. */

.vlc-community-hero {
  position: relative;
  display: flex;
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
  overflow: hidden;
  background: var(--community-forest);
  color: var(--community-cream);
}

.vlc-community-hero__media {
  position: absolute;
  inset: 0;
}

.vlc-community-hero__media img {
  object-position: center 42%;
}

.vlc-community-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 45%, #09221845), linear-gradient(0deg, #071a1480, transparent 65%);
}

.vlc-community-hero__copy {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 100%;
  /* padding: 65px var(--community-gutter); */
  padding: 10% 12%;
}

.vlc-community-breadcrumb {
  margin-bottom: 28px;
  color: var(--community-lime);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.vlc-community-breadcrumb a {
  border-bottom: 1px solid currentColor;
}

.vlc-community-hero h1 {
  max-width: 1080px;
  font-size: clamp(44px, 5.1vw, 78px);
}

.vlc-community-hero__lead {
  max-width: 700px;
  margin-top: 26px;
  color: #f0f2e8;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}

.vlc-community-hero a:focus-visible, .vlc-community-closing a:focus-visible {
  outline-color: var(--community-lime);
}

/* 05. Houses: supplied logos above the names and a genuine sports photograph. */

.vlc-community-lahore .vlc-community-prose--light > .vlc-community-text-link {
  color: var(--community-lime);
}

/* 06. Photograph/text splits shared only within this Community page. */

.vlc-community-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.vlc-community-split__photo {
  min-height: 560px;
}

.vlc-community-split__copy {
  align-self: center;
  padding: clamp(44px, 5vw, 80px);
}

.vlc-community-split__copy h2 + .vlc-community-prose {
  margin-top: 24px;
}

.vlc-community-split--reverse {
  background: var(--community-sage);
}

.vlc-community-split--reverse .vlc-community-split__photo {
  order: 2;
}

/* 11. Source heading only: no fabricated testimonials or empty quote cards. */

.vlc-community-lahore .vlc-community-voices {
  padding-block: clamp(40px, 4vw, 64px);
  background: var(--community-forest);
  color: var(--community-cream);
}

/* 12. Around the Circle: three framed cards opening Marketing stories. */

.vlc-community-around__heading {
  max-width: 950px;
}

.vlc-community-around__heading p {
  margin-top: 20px;
  color: var(--community-muted);
}

.vlc-community-around__stories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 38px;
}

.vlc-community-around__story {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  text-align: center;
  padding: 34px 24px;
  border: 1px solid var(--community-line);
  border-radius: 16px;
  background: var(--community-paper);
  box-shadow: 0 7px 22px #173d3108;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.vlc-community-around__story h3 {
  color: var(--community-forest);
}

.vlc-community-around__story p {
  margin-top: 16px;
  color: var(--community-muted);
}

.vlc-community-around__story:hover {
  transform: translateY(-4px);
  border-color: var(--community-green);
  box-shadow: 0 12px 26px #173d3112;
}

/* 13. Baby SNAP and the closing invitation. */

.vlc-community-closing {
  background: var(--community-forest);
  color: var(--community-cream);
}

.vlc-community-closing h2 {
  max-width: 1150px;
}

.vlc-community-closing .vlc-community-prose {
  max-width: 1000px;
  margin-top: 28px;
}

.vlc-community-closing .vlc-community-actions {
  justify-content: center;
  margin-top: 38px;
}

.vlc-community-closing .vlc-community-text-link {
  margin-top: 0;
  color: var(--community-lime);
}

/* 14. Native scroll motion and complete-copy accessibility. */

.vlc-community-motion .vlc-community-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.vlc-community-motion .vlc-community-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.vlc-community-word-reveal .vlc-community-word {
  display: inline-block;
  visibility: hidden;
}

.vlc-community-word-reveal .vlc-community-word.is-written {
  visibility: visible;
}

.vlc-community-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 15. Responsive composition: keep all copy, photographs and actions readable. */

@media (max-width: 1000px) {
  .vlc-community-split__copy {
    padding-inline: 35px;
  
  }
}

@media (max-width: 760px) {
  .vlc-community-section {
    padding-block: 50px;
  
  }

  .vlc-community-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  
  }

  .vlc-community-hero__copy {
    padding-block: 64px;
  
  }

  .vlc-community-hero h1 {
    font-size: clamp(40px, 9.5vw, 62px);
  
  }

  .vlc-community-hero__lead {
    font-size: 18px;
  
  }

  .vlc-community-hero__media::after {
    background: linear-gradient(90deg, #092218d9, #0922188f), linear-gradient(0deg, #071a14b3, transparent);
  
  }

  .vlc-community-split, .vlc-community-around__stories {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  
  }

  .vlc-community-split__photo {
    min-height: 0;
    height: 75vw;
    max-height: 500px;
  
  }

  .vlc-community-split--reverse .vlc-community-split__photo {
    order: 0;
  
  }

  .vlc-community-split__copy {
    padding: 42px var(--community-gutter) 50px;
  
  }

  .vlc-community-hero .vlc-community-actions, .vlc-community-closing .vlc-community-actions {
    align-items: stretch;
    flex-direction: column;
  
  }

  .vlc-community-closing .vlc-community-text-link {
    align-self: flex-start;
  
  }
}

@media (prefers-reduced-motion: reduce) {
  .vlc-community-motion .vlc-community-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  
  }

  .vlc-community-parallax > img, .vlc-community-around__story {
    transform: none;
    transition: none;
  
  }

  .vlc-community-word-reveal .vlc-community-word {
    visibility: visible;
  
  }
}

/* Current document update: existing page body and Marketing story popups. */

.vlc-community-hero {
  min-height: 610px;
  height: 88svh;
  max-height: 960px;
}

.vlc-community-hero h1 {
  font-size: clamp(48px, 6.3vw, 92px);
}

.vlc-community-lahore .vlc-community-developer-hide {
  background: #ffe7e5;
  color: #8e2525;
  border: 2px solid #c83b35;
}

.vlc-community-developer-note {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
}

.vlc-community-lahore .vlc-community-around__story strong {
  font-weight: 700;
}

.vlc-community-lahore .lhr-story-dialog {
  --paper: var(--community-paper);
  --cream: var(--community-cream);
  --forest: var(--community-forest);
  --muted: var(--community-muted);
  font: inherit;
}

/* Editorial story popup: an open cream canvas with layered photographs. */

.lhr-story-dialog {
  width: min(1440px, 96vw);
  max-width: none;
  max-height: 94svh;
  padding: 0;
  border: 1px solid #173d3126;
  border-radius: 22px;
  background: var(--paper);
  color: var(--forest);
  overscroll-behavior: contain;
}

.lhr-story-dialog::backdrop {
  background: #0b281dcc;
  backdrop-filter: blur(8px);
}

.lhr-story-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
}

.lhr-preview-label {
  display: inline-block;
  margin-left: 14px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
}

.lhr-preview-label[hidden] {
  display: none;
}

.lhr-story-close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid #173d3128;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest);
  font-size: 27px;
  line-height: 1;
}

.lhr-story-page {
  padding: 12px clamp(24px, 5vw, 76px) 54px;
}

.lhr-popup-intro, .lhr-popup-gallery {
  display: grid;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  background: transparent;
}

.lhr-popup-intro {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  padding: 10px 0 48px;
  border-bottom: 1px solid #173d311c;
}

.lhr-popup-copy {
  min-width: 0;
}

.lhr-story-page .eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 11px;
  letter-spacing: .18em;
  margin-bottom: 24px;
}

.lhr-story-page .eyebrow::after {
  content: '';
  width: 64px;
  height: 1px;
  background: #52776780;
}

.lhr-popup-copy h2 {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.05em;
}

.lhr-popup-copy h3 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.14;
}

.lhr-popup-copy > p:not(.eyebrow) {
  max-width: 48ch;
  margin-top: 24px;
  color: #526459;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.7;
}

.lhr-popup-triptych {
  position: relative;
  isolation: isolate;
  height: clamp(270px, 28vw, 390px);
}

.lhr-popup-triptych figure {
  position: absolute;
  left: 17%;
  top: 16%;
  z-index: 1;
  width: 39%;
  height: 77%;
  overflow: hidden;
  border: 4px solid var(--paper);
  border-radius: 20px;
  background: #c1cdb8;
  box-shadow: 0 18px 28px #173d3126;
  transform: translateX(-50%) rotate(-8deg);
}

.lhr-popup-triptych figure:nth-child(2) {
  left: 50%;
  top: 0;
  z-index: 3;
  width: 43%;
  height: 100%;
  transform: translateX(-50%);
}

.lhr-popup-triptych figure:nth-child(3) {
  left: 83%;
  top: 16%;
  transform: translateX(-50%) rotate(8deg);
}

.lhr-popup-triptych img, .lhr-gallery-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lhr-popup-gallery {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(34px, 5vw, 80px);
  padding-top: 36px;
}

.lhr-popup-gallery__visual {
  position: relative;
  min-width: 0;
}

.lhr-gallery-stack {
  position: relative;
  height: clamp(260px, 25vw, 350px);
  margin-inline: 28px;
  isolation: isolate;
}

.lhr-gallery-stack figure {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 38%;
  height: 96%;
  overflow: hidden;
  border: 3px solid var(--paper);
  border-radius: 16px;
  background: #c1cdb8;
  box-shadow: 0 14px 26px #173d3122;
  transform: translateX(-50%);
}

.lhr-gallery-stack [data-offset="-1"], .lhr-gallery-stack [data-offset="1"] {
  top: 10%;
  z-index: 2;
  height: 78%;
}

.lhr-gallery-stack [data-offset="-1"] {
  left: 30%;
}

.lhr-gallery-stack [data-offset="1"] {
  left: 70%;
}

.lhr-gallery-stack [data-offset="-2"], .lhr-gallery-stack [data-offset="2"] {
  top: 18%;
  z-index: 1;
  height: 62%;
}

.lhr-gallery-stack [data-offset="-2"] {
  left: 13%;
}

.lhr-gallery-stack [data-offset="2"] {
  left: 87%;
}

.lhr-gallery-controls {
  position: absolute;
  top: calc(50% + 18px);
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.lhr-gallery-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid #173d3110;
  border-radius: 50%;
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 6px 20px #173d3110;
  font-size: 23px;
  pointer-events: auto;
}

#popup-gallery-count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 800px) {
  .lhr-popup-intro, .lhr-popup-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  
  }

  .lhr-popup-intro {
    padding-bottom: 36px;
  
  }

  .lhr-popup-triptych {
    width: 90%;
    height: 330px;
    max-width: 540px;
    margin-inline: auto;
  
  }

  .lhr-popup-gallery > .lhr-popup-copy {
    grid-row: 1;
  
  }

  .lhr-gallery-stack {
    height: 310px;
  
  }
}

@media (max-width: 480px) {
  .lhr-story-dialog {
    width: calc(100vw - 16px);
    max-height: 96svh;
    border-radius: 16px;
  
  }

  .lhr-story-toolbar {
    padding: 10px 14px;
    font-size: 9px;
    letter-spacing: .06em;
  
  }

  .lhr-preview-label {
    display: block;
    margin: 2px 0 0;
  
  }

  .lhr-story-page {
    padding: 16px 20px 32px;
  
  }

  .lhr-popup-triptych {
    height: 230px;
    width: 92%;
  
  }

  .lhr-popup-triptych figure {
    border-width: 3px;
    border-radius: 13px;
  
  }

  .lhr-gallery-stack {
    height: 245px;
    margin-inline: 18px;
  
  }

  .lhr-gallery-stack figure {
    width: 43%;
    border-radius: 12px;
    border-width: 2px;
  
  }

  .lhr-gallery-controls button {
    width: 36px;
    height: 36px;
  
  }
}

@media (max-width: 700px) {
  .vlc-community-hero {
    min-height: 580px;
    height: 86svh;
  
  }

  .vlc-community-hero h1 {
    font-size: clamp(44px, 10vw, 64px);
  
  }
}

/* Lahore source content and review states. */

.community-lahore .vlc-community-hero {
  min-height: 100svh;
  height: auto;
  max-height: none;
}

.community-lahore .vlc-community-hero__copy {
  padding-block: clamp(80px, 8vw, 120px);
}

.community-lahore .vlc-community-hero__copy > p:not(.vlc-community-breadcrumb) {
  max-width: 850px;
  margin-top: 24px;
}

.community-lahore .vlc-community-hero__copy > p:not(.vlc-community-breadcrumb):not(.vlc-community-hero__lead):not(.vlc-community-welcome) {
  font-size: 17px;
}

.community-lahore .vlc-community-hero__copy > .vlc-community-welcome {
  color: var(--community-lime);
  font-size: 26px;
  font-weight: 600;
}

.community-lahore .vlc-community-split__copy .vlc-community-eyebrow {
  margin-bottom: 20px;
}

.community-lahore .vlc-community-button {
  text-decoration: none;
}

.community-lahore .vlc-community-pending-link {
  margin-top: 28px;
  padding: 20px;
  border: 1px dashed #c83b35;
  border-radius: 10px;
  background: #ffe7e5;
  color: #8e2525;
}

.community-lahore .vlc-community-pending-link .vlc-community-text-link {
  margin-top: 0;
}

.community-lahore .vlc-community-pending-link .vlc-community-developer-note {
  margin-top: 14px;
}

.community-lahore .vlc-community-around__heading p + p {
  max-width: 780px;
  font-size: 16px;
}

.community-lahore .vlc-community-around__story {
  height: 100%;
}

.community-lahore .vlc-community-around__story h3 {
  font-size: clamp(24px, 2.2vw, 32px);
}

.community-lahore .vlc-community-around__story p {
  max-width: 330px;
}

.community-lahore .vlc-community-closing > .vlc-community-prose {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 36px;
}

.community-lahore .vlc-community-closing .vlc-community-prose p + p {
  margin-top: 0;
}

.community-lahore .vlc-community-closing .vlc-community-prose p:last-child {
  grid-column: 1 / -1;
  margin-top: 12px;
}

.community-lahore .vlc-community-admissions {
  margin-top: 40px;
}

.community-lahore .vlc-community-admissions .vlc-community-text-link {
  margin: 0 0 0 12px;
}

.community-lahore .lhr-gallery-controls button {
  width: auto;
  min-width: 84px;
  padding-inline: 14px;
  border-radius: 24px;
  font-size: 13px;
}

.vlc-community-motion-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  padding: 10px 16px;
  border: 1px solid #cbd1be;
  border-radius: 24px;
  background: #fffbf5;
  color: #173d31;
  font: 400 12px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
}

.vlc-community-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vlc-community-skip:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 12px;
  z-index: 30;
  clip-path: none;
  background: #fffbf5;
}

.community-lahore.community-motion-paused *,
.community-lahore.community-motion-paused *::before,
.community-lahore.community-motion-paused *::after {
  transition: none !important;
  animation: none !important;
}

@media (max-width: 760px) {
  .community-lahore .vlc-community-hero h1 {
    font-size: clamp(40px, 10vw, 64px);
  
  }

  .community-lahore .vlc-community-hero__copy > p:not(.vlc-community-breadcrumb):not(.vlc-community-hero__lead):not(.vlc-community-welcome) {
    font-size: 16px;
  
  }

  .community-lahore .vlc-community-hero__copy > .vlc-community-welcome {
    font-size: 24px;
  
  }

  .community-lahore .vlc-community-closing > .vlc-community-prose {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  
  }

  .community-lahore .vlc-community-admissions .vlc-community-text-link {
    margin: 16px 0 0;
  
  }
}

/* Keep each story heading and summary on shared baselines. */

.community-lahore .vlc-community-around__story {
  justify-content: flex-start;
}

.community-lahore .vlc-community-around__story h3 {
  min-height: 2.3em;
}

/* ---------------------------------------------------------------------------
   Lahore page edits: intro section below the banner, Learning Journey video
   pop-up, numbered closing invitations and no underlined links.
   --------------------------------------------------------------------------- */
body.community-lahore a {
  text-decoration: none;
}

body.community-lahore .vlc-community-text-link {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Intro: section name on the left, the lines moved from the banner on the right. */
body.community-lahore .vlc-community-intro {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 9%;
  align-items: start;
  background: var(--community-paper);
}

body.community-lahore .vlc-community-intro h2 {
  color: var(--community-forest);
}

body.community-lahore .vlc-community-intro .vlc-community-prose {
  color: var(--community-muted);
  font-size: 17px;
  line-height: 1.75;
}

body.community-lahore .vlc-community-intro .vlc-community-prose p + p {
  margin-top: 22px;
}

/* Closing invitations: numbered, divided columns (as the admissions visit pointers);
   the last line stays below as a closing sentence. */
body.community-lahore .vlc-community-closing > .vlc-community-prose {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  max-width: none;
  counter-reset: invite;
}

body.community-lahore .vlc-community-closing > .vlc-community-prose p {
  margin: 0;
  padding: 4px 22px;
  border-left: 1px solid #fff7ed33;
  color: var(--community-cream);
  font-size: 16px;
  line-height: 1.6;
  counter-increment: invite;
}

body.community-lahore .vlc-community-closing > .vlc-community-prose p::before {
  content: counter(invite, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  color: var(--community-lime);
  font-size: 15px;
  font-weight: 400;
}

body.community-lahore .vlc-community-closing > .vlc-community-prose p:first-child {
  padding-left: 0;
  border-left: 0;
}

body.community-lahore .vlc-community-closing > .vlc-community-prose p:nth-last-child(2) {
  padding-right: 0;
}

body.community-lahore .vlc-community-closing > .vlc-community-prose p:last-child {
  grid-column: 1 / -1;
  margin-top: 36px;
  padding: 0;
  border-left: 0;
  color: #e1e8de;
  font-size: 18px;
}

body.community-lahore .vlc-community-closing > .vlc-community-prose p:last-child::before {
  content: none;
}

/* Learning Journey video pop-up. */
body.community-lahore .vlc-community-video-dialog {
  width: min(1000px, 94vw);
  max-width: none;
  padding: 0;
  border: 1px solid #173d3133;
  border-radius: 18px;
  background: var(--community-cream);
  color: var(--community-forest);
  overflow: hidden;
}

body.community-lahore .vlc-community-video-dialog::backdrop {
  background: #071a14c9;
  backdrop-filter: blur(5px);
}

body.community-lahore .vlc-community-video-dialog__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 22px;
}

body.community-lahore .vlc-community-video-dialog__toolbar h2 {
  font-size: 20px;
  letter-spacing: -.02em;
}

body.community-lahore .vlc-community-video-dialog__close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--community-line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

body.community-lahore .vlc-community-video-dialog__screen {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: #000;
}

body.community-lahore .vlc-community-video-dialog__screen iframe,
body.community-lahore .vlc-community-video-dialog__screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

body.community-lahore .vlc-community-video-dialog__note {
  color: #e1e8de;
  font-size: 16px;
}

@media (max-width: 1000px) {
  body.community-lahore .vlc-community-closing > .vlc-community-prose {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 28px;
  }

  body.community-lahore .vlc-community-closing > .vlc-community-prose p:nth-child(n):not(:last-child) {
    padding: 4px 22px;
    border-left: 1px solid #fff7ed33;
  }

  body.community-lahore .vlc-community-closing > .vlc-community-prose p:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  body.community-lahore .vlc-community-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 600px) {
  body.community-lahore .vlc-community-closing > .vlc-community-prose {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }

  body.community-lahore .vlc-community-closing > .vlc-community-prose p:nth-child(n):not(:last-child) {
    padding: 4px 16px;
    border-left: 1px solid #fff7ed33;
  }

  body.community-lahore .vlc-community-closing > .vlc-community-prose p:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

/* Closing: the two buttons sit on the same line as "Exploring VLC for your child? Visit Admissions". */
body.community-lahore .vlc-community-closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
}

body.community-lahore .vlc-community-closing > h2,
body.community-lahore .vlc-community-closing > .vlc-community-prose {
  flex: 0 0 100%;
}

body.community-lahore .vlc-community-closing > .vlc-community-admissions {
  order: 3;
  margin: 40px 0 0;
}

body.community-lahore .vlc-community-closing > .vlc-community-actions {
  order: 4;
  margin: 40px 0 0;
  justify-content: flex-start;
}

/* Around the Circle cards: heading and line sit close together. */
body.community-lahore .vlc-community-around__story {
  justify-content: center;
  min-height: 0;
  padding: 30px 26px;
}

body.community-lahore .vlc-community-around__story h3 {
  min-height: 0;
  margin: 0;
}

body.community-lahore .vlc-community-around__story p {
  margin-top: 10px;
}

@media (max-width: 760px) {
  body.community-lahore .vlc-community-closing > .vlc-community-actions {
    flex: 0 0 100%;
    margin-top: 24px;
  }
}

/*community lahore end*/


/*campuses*/

:root {
  /* --cream: #fff7ed;
  --paper: #fffbf5;
  --sage: #f0f0df;
  --forest: #173d31;
  --green: #287b30;
  --ink: #2f2f2f;
  --muted: #64675f;
  --line: #cbd1be; */
  /* --gutter: clamp(22px, 5vw, 88px); */
  --section-space: clamp(64px, 7vw, 112px);
   --sage: #f0f0df;
}


.campus-section { padding: var(--section-space) var(--gutter); }
.campus-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dgreen); }
.campus-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.campus-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 13px 23px;
  border: 1px solid var(--dgreen);
  border-radius: 4px;
  background: var(--dgreen);
  color: white;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition: background .2s, transform .2s;
}
.campus-button:hover { background: #216728; transform: translateY(-2px); }
.campus-button--outline { background: transparent; border-color: var(--forest); color: var(--forest); }
.campus-button--outline:hover { background: #173d310a; }
.campus-text-link { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid currentColor; color: var(--forest); font-weight: 600; font-size: 14px; }
.campus-text-link:hover { color: var(--green); }

/* Full-width hero, matching the Karachi learning pages. */
.campus-hero { position: relative; min-height: 610px; height: 88svh; max-height: 960px; display: grid; align-items: center; overflow: hidden; background: var(--forest); color: var(--cream); }
.campus-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0b241ded, #0b241d91 65%, #0b241d38), linear-gradient(0deg, #071a1470, transparent 60%); }
.campus-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.campus-hero__copy { position: relative; z-index: 1; padding: 80px var(--gutter); }
.campus-hero .campus-eyebrow { color: #e6ec9b; margin-bottom: 28px; }
.campus-hero h1 { max-width: 1000px; font-size: clamp(48px, 6.3vw, 92px); }
.campus-hero__lead { max-width: 760px; margin-top: 30px; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.55; color: #f1f2e8; }
.campus-hero .campus-button { margin-top: 38px; }

/* The four-campus overview. */
.campus-network { background: var(--paper); }
.campus-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8%; align-items: start; margin-bottom: 56px; }
.campus-intro > p { color: var(--muted); padding-top: 6px;    max-width: fit-content; }
.campus-network__statement { color: var(--forest); }
.campus-network__statement > span { display: block; }
.campus-network__one { color: #6a8b6c; }
.campus-network__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.campus-preview { padding: 8px; border: 1px solid #dcded2; border-radius: 14px; background: var(--paper); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.campus-preview:hover { transform: translateY(-5px); box-shadow: 0 14px 32px #173d3112; }
.campus-preview__image { width: 100%; height: auto; aspect-ratio: 1.12; object-fit: cover; border-radius: 8px; }
.campus-preview__copy { padding: 22px 15px 18px; text-align: center; }
.campus-preview h2 { color: var(--forest); font-size: clamp(23px, 1.9vw, 30px); letter-spacing: -.04em; }
.campus-preview p { font-size: 13px; margin-top: 12px; color: var(--muted); }
.campus-badge { display: inline-block; padding: 5px 9px; margin-top: 16px; background: #e7ebd6; color: var(--forest); border-radius: 3px; font-size: 11px; font-weight: 600; }

/* Stage guide: a simple comparison before campus details. */
.campus-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10%; align-items: start; }
.campus-section-head > p { color: var(--muted); padding-top: 6px; }
.campus-section-head .campus-eyebrow { margin-bottom: 23px; }
.campus-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 48px 0 32px; }
.campus-stage-card { padding: 8px; border: 1px solid #dcded2; border-radius: 14px; background: var(--paper); overflow: hidden; }
.campus-stage-card > img { width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; border-radius: 8px; }
.campus-stage-card__copy { padding: 26px 20px; text-align: center; }
.campus-stages h3 { color: var(--forest); }
.campus-stages p { margin-top: 16px; color: var(--muted); }
.campus-stages .campus-stages__locations { font-size: 14px; font-weight: 600; color: var(--forest); }

/* Native scroll chapters with a corresponding sticky photograph. */
.campus-journey { position: relative; background: var(--sage); }
.campus-journey__inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.campus-journey__media { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; background: var(--forest); border-radius: 0 0 110px 0; }
.campus-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.035); transition: opacity .5s ease, transform 1s ease; }
.campus-scene.is-active { opacity: 1; transform: none; }
.campus-journey__chapters { min-width: 0; padding-inline: clamp(30px, 4vw, 76px); }
.campus-card { min-height: 100svh; padding-block: 70px; border-bottom: 1px solid var(--line); }
.campus-card:last-child { border-bottom: 0; }
.campus-card__content { max-width: 660px; margin-inline: auto; }
.campus-card .campus-eyebrow { font-size: 14.4px; }
.campus-card h2 { margin-top: 22px; margin-bottom: 30px; color: var(--forest); }
.campus-card__content > p:not(.campus-eyebrow) { color: var(--muted); margin-top: 19px; }
.campus-facts { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.campus-facts h3 { font-size: 19.8px; color: var(--forest); }
.campus-facts dl { margin: 15px 0 0; }
.campus-facts dl > div { display: flex; gap: 8px; margin-top: 7px; font-size: 14.3px; }
.campus-facts dt { flex-shrink: 0; color: var(--forest); font-weight: 600; }
.campus-facts dd { margin: 0; color: var(--muted); }
.campus-opening { padding: 22px 0 0; margin-top: 28px; border-top: 1px solid var(--line); color: var(--forest); }
.campus-opening p + p { margin-top: 12px; }
.campus-card__mobile-image { display: none; }
.campus-progress { position: sticky; bottom: 0; height: 3px; background: #d1d8c8; z-index: 2; }
.campus-progress span { display: block; height: 100%; background: var(--green); transform: scaleX(var(--journey-progress, 0)); transform-origin: left; }

/* Campus finder: local recommendations, with no personal data submission. */
.campus-finder { background: var(--paper); }
.campus-finder .campus-section-head > p { padding-top: 40px; }
.campus-finder__panel { margin-top: 48px; padding: clamp(24px, 4vw, 54px); background: var(--sage); border-radius: 18px; }
.campus-finder__controls { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; }
.campus-field label, .campus-preferences legend { display: block; font-weight: 600; color: var(--forest); font-size: 15px; margin-bottom: 15px; }
.campus-field select { width: 100%; min-height: 52px; border: 1px solid #a5b49c; background: var(--paper); color: var(--ink); border-radius: 5px; padding: 10px 48px 10px 15px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23173d31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 16px; }
.campus-preferences { border: 0; margin: 0; padding: 0; min-width: 0; }
.campus-preferences__options { display: flex; gap: 10px; flex-wrap: wrap; }
.campus-preferences label { position: relative; cursor: pointer; }
.campus-preferences input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.campus-preferences span { display: inline-flex; align-items: center; min-height: 52px; padding: 11px 20px; border: 1px solid #a5b49c; border-radius: 5px; background: var(--paper); color: var(--forest); font-size: 14px; }
.campus-preferences input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.campus-finder__results { margin-top: 32px; padding-top: 28px; border-top: 1px solid #c5ceb8; }
.campus-finder__results h3 { color: var(--forest); font-size: 22px; }
.campus-finder__results p { color: var(--muted); margin-top: 14px; }
.campus-finder__results ul { padding: 0; margin: 20px 0 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.campus-finder__results li a { display: flex; align-items: center; gap: 16px; height: 100%; background: var(--paper); padding: 12px; border-radius: 5px; font-weight: 600; color: var(--forest); font-size: 14px; border: 1px solid #c5ceb8; }
.campus-option__image { flex: 0 0 88px; width: 88px; height: 80px; object-fit: cover; border-radius: 4px; }
.campus-option__copy { min-width: 0; text-align: left; }
.campus-finder__results li a:hover { border-color: var(--forest); }
.campus-finder__results small { display: block; font-size: 12px; font-weight: 400; margin-top: 4px; }
.campus-finder__panel > .campus-text-link { margin-top: 28px; }

/* Visits and the admissions handoff. */
.campus-visit { background: var(--cream); }
.campus-visit__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10%; }
.campus-visit .campus-eyebrow { margin-bottom: 24px; }
.campus-visit__copy { padding-top: 40px; color: var(--muted); }
.campus-visit__copy > p + p { margin-top: 18px; }
.campus-visit__future { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); }
.campus-visit__future h3 { color: var(--forest); }
.campus-visit__future p { margin: 15px 0 20px; color: var(--muted); }
.campus-closing { background: var(--forest); color: var(--cream); text-align: center; }
.campus-closing > p { margin-top: 24px; font-size: 18px; color: #e1e8dc; }
.campus-closing .campus-actions { justify-content: center; margin-top: 36px; }
.campus-closing .campus-button:first-child { background: #e6ec9b; color: var(--forest); border-color: #e6ec9b; }
.campus-closing .campus-button--outline { color: var(--cream); border-color: #d4dfc9; }
.campus-closing .campus-button--outline:hover { background: #ffffff12; }

@media (max-width: 1050px) {
  .campus-network__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campus-preview__image { aspect-ratio: 1.5; }
  .campus-finder__controls { grid-template-columns: 1fr; gap: 25px; }
  .campus-stages { gap: 24px; }
  .campus-stages h3 { font-size: 21px; }
}

@media (max-width: 760px) {
  .campus-hero { min-height: 580px; height: 86svh; }
  .campus-hero__copy { padding-block: 70px; }
  .campus-hero h1 { font-size: clamp(46px, 10vw, 68px); }
  .campus-hero__lead { font-size: 18px; }
  .campus-intro, .campus-section-head, .campus-visit__intro { grid-template-columns: 1fr; gap: 28px; }
  .campus-network__grid { gap: 16px; }
  .campus-preview h2 { font-size: 23px; }
  .campus-preview__copy { padding: 18px 8px 14px; }
  .campus-stages { grid-template-columns: 1fr; gap: 32px; margin-top: 35px; }
  .campus-stage-card__copy { padding: 24px 18px; }
  .campus-stages h3 { font-size: 25px; }
  .campus-journey__inner { display: block; }
  .campus-journey__media { display: none; }
  .campus-journey__chapters { padding-inline: var(--gutter); }
  .campus-card { min-height: 0; padding-block: 55px; }
  .campus-card__mobile-image { display: block; aspect-ratio: 1.3; width: 100%; height: auto; object-fit: cover; border-radius: 14px; margin-bottom: 28px; }
  .campus-card h2 { margin-top: 20px; margin-bottom: 24px; }
  .campus-card__content > p:not(.campus-eyebrow) { font-size: 15px; }
  .campus-facts dl > div { flex-wrap: wrap; gap: 2px 8px; }
  .campus-finder .campus-section-head > p, .campus-visit__copy { padding-top: 0; }
  .campus-finder__panel { margin-top: 32px; }
  .campus-finder__results ul { grid-template-columns: 1fr; }
  .campus-finder__results li a { gap: 12px; }
  .campus-option__image { flex-basis: 72px; width: 72px; height: 76px; }
  .campus-preferences span { padding-inline: 14px; }
  .campus-visit__future { margin-top: 45px; }
}

@media (max-width: 440px) {
  .campus-network__grid { grid-template-columns: 1fr; }
  .campus-preview__image { aspect-ratio: 1.5; }
  .campus-preview__copy { padding-inline: 15px; }
  .campus-preview h2 { font-size: 28px; }
  .campus-preview p { font-size: 14px; }
  .campus-actions { flex-direction: column; align-items: stretch; }
  .campus-preferences__options { display: grid; grid-template-columns: 1fr 1fr; }
  .campus-preferences span { justify-content: center; width: 100%; }
}

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

@media (forced-colors: active) {
  .campus-field select { appearance: auto; background-image: none; }
}

.lahore-hero {
  position: relative;
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
  overflow: hidden;
  background: var(--forest);
  color: var(--cream);
}
.lahore-hero__media { position: absolute; inset: 0; overflow: hidden; }
.lahore-hero__media img { width: 100%; height: 106%; object-fit: cover; object-position: center 50%; transform: translateY(var(--hero-shift, 0px)) scale(1.02); }
.lahore-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #092218e8 0%, #092218ca 36%, #09221867 73%, #09221826 100%), linear-gradient(0deg, #071a14b0, transparent 46%); }
.lahore-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; padding: 85px var(--gutter); }
.breadcrumb { margin-bottom: clamp(45px, 6vw, 90px); color: #f0f3dc; font-size: 12px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.lahore-hero h1 { max-width: 1060px; font-size: clamp(62px, 6.7vw, 112px); text-shadow: 0 2px 18px #08211726; }
.lahore-hero h1 em { display: block; font-style: normal; }
.lahore-hero__lead { max-width: 590px; margin-top: 35px; color: #f1f2e8; font-size: clamp(17px, 1.5vw, 21px); }
.lahore-hero__actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 38px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 12px 27px; border-radius: 4px; font-size: 14px; font-weight: 600; transition: background .25s ease, color .25s ease, transform .25s ease; }
.button:hover { transform: translateY(-3px); }
.button--outline { border: 1px solid #f3f7ec; }
.button--outline:hover { background: #ffffff22; }
.button--filled { background: #43b049; color: #0d2416; }
.button--filled:hover { background: #5ccc61; }

.lahore-campus { display: grid; grid-template-columns: minmax(0, 1.09fr) minmax(0, .91fr); min-height: 105svh; background: #f0f0df; }
.lahore-campus__media { min-height: 680px; overflow: hidden; border-radius: 0 0 155px 0; background: var(--forest); }
.lahore-campus__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: translateY(var(--campus-shift, 0px)) scale(1.055); }
.lahore-campus__content { display: flex; align-items: center; padding: 80px clamp(45px, 6.5vw, 120px); }
.lahore-campus__copy { max-width: 600px; }
.lahore-campus h2 { max-width: 580px; font-size: clamp(52px, 5.1vw, 84px); }
.lahore-campus p { margin-top: 39px; color: var(--muted); font-size: clamp(16px, 1.22vw, 19px); line-height: 1.9; }
.lahore-campus address { margin-top: 42px; padding-top: 27px; border-top: 1px solid #bdcbb9; color: var(--forest); font-size: 15px; font-style: normal; line-height: 2; overflow-wrap: anywhere; }
.js .reveal { opacity: .35; transform: translateY(38px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .lahore-campus { grid-template-columns: 1fr 1fr; }
  .lahore-campus__content { padding-inline: 36px; }
  .lahore-campus h2 { font-size: clamp(42px, 6vw, 58px); }
}

@media (max-width: 720px) {
  .lahore-hero { min-height: 650px; height: 100svh; max-height: 900px; }
  .lahore-hero__content { justify-content: flex-end; padding: 70px var(--gutter) 65px; }
  .lahore-hero__media img { object-position: 53% center; }
  .lahore-hero__media::after { background: linear-gradient(0deg, #0b241df2 0%, #0b241dc5 53%, #0b241d42 100%); }
  .breadcrumb { margin-bottom: 43px; }
  .lahore-hero h1 { font-size: clamp(49px, 11vw, 72px); }
  .lahore-hero__lead { margin-top: 26px; max-width: 350px; font-size: 15px; }
  .lahore-hero__actions { gap: 10px; margin-top: 28px; }
  .button { min-height: 47px; padding: 10px 20px; font-size: 13px; }
  .lahore-campus { display: block; min-height: 0; }
  .lahore-campus__media { height: min(78vw, 480px); min-height: 260px; border-radius: 0 0 0 100px; }
  .lahore-campus__content { padding: 66px var(--gutter) 86px; }
  .lahore-campus h2 { font-size: clamp(44px, 10vw, 61px); }
  .lahore-campus p { margin-top: 26px; font-size: 15px; }
  .lahore-campus address { margin-top: 33px; font-size: 14px; }
}

/*campuses end*/

/*campuses lahore*/

.lahore-hero {
  position: relative;
  display: grid;
  min-height: max(720px, 100svh);
  background: var(--forest);
  color: var(--cream);
}
.lahore-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.lahore-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lahore-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218e6, #09221855), linear-gradient(0deg, #071a1499, transparent);
}
.lahore-hero__content {
  position: relative;
  align-self: center;
  /* padding: 100px var(--gutter); */
  padding: 10% 12%;
}
.lahore-hero .breadcrumb {
  color: #e6ec9b;
  margin-bottom: 32px;
}
.lahore-hero h1 {
  max-width: 1060px;
  font-size: clamp(44px, 5.1vw, 78px);
}
.lahore-hero__lead {
  max-width: 850px;
  margin-top: 28px;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}
.lahore-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
}
.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.button--filled {
  background: var(--green);
  color: var(--cream);
}
.button--filled:hover {
  background: var(--forest);
  border-color: #cbd1be;
}
.text-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
}
.lc-section {
  padding: clamp(65px, 8vw, 120px) var(--gutter);
}
.lahore-campus, .lc-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #f0f0df;
}
.lahore-campus__media, .lc-split figure {
  min-height: 620px;
}
.lahore-campus__media img, .lc-split figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lahore-campus__content, .lc-split__copy {
  align-self: center;
  padding: clamp(48px, 5vw, 80px);
}
.lahore-campus p:not(.eyebrow), .lc-split__copy p {
  margin-top: 24px;
}
.lahore-campus address {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #cbd1be;
}
.lahore-campus .campus-grade {
  margin-top: 4px;
  font-weight: 600;
  color: var(--green);
}
.lc-editorial {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
  align-items: start;
  background: var(--paper);
}
.lc-copy p + p {
  margin-top: 22px;
}
.lc-copy {
  color: var(--muted);
}
.lc-dark {
  background: var(--forest);
  color: var(--cream);
}
.lc-dark .lc-copy {
  color: #e1e8de;
}
.lc-dark .eyebrow {
  color: #e6ec9b;
}
.lc-split--reverse figure {
  order: 2;
}
.lc-split__copy .text-link {
  margin-top: 30px;
}
.lc-spaces {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding-top: 0;
  background: var(--paper);
}
.lc-space-card {
  overflow: hidden;
  border: 1px solid #cbd1be;
  border-radius: 18px;
  background: #f0f0df;
}
.lc-space-card:nth-child(3n + 2) {
  background: #f5e8d9;
}
.lc-space-card:nth-child(3n) {
  background: #e7eee5;
}
.lc-space-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.lc-space-card__copy {
  padding: 28px;
  text-align: center;
}
.lc-space-card h3 {
  min-height: 2.5em;
  color: var(--green);
  font-size: 18px;
  letter-spacing: .02em;
  line-height: 1.3;
}
.lc-space-card p {
  margin-top: 16px;
  color: var(--forest);
}
.lc-statement {
  font-weight: 600;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.4;
}
.campus-word {
  opacity: var(--word-opacity, 1);
}
.campus-motion [data-campus-dynamic] {
  opacity: var(--card-opacity, 1);
  transform: translateY(var(--card-offset, 0px));
}
.lc-find {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}
.lc-find > div {
  align-self: center;
  padding: clamp(48px, 5vw, 80px);
}
.lc-find address {
  margin-top: 28px;
}
.lc-find figure {
  min-height: 620px;
}
.lc-find figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Designed at their level: 5-second classroom clip on the left (same method as the
   Learning Journey preview clips); it opens the full reel on Instagram. */
#at-their-level {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  grid-template-rows: auto 1fr;
  row-gap: 0;
}
/* The clip fills its column from the eyebrow to the last line of copy. */
#at-their-level .lc-video-link {
  grid-row: 1 / 3;
  align-self: stretch;
  aspect-ratio: auto;
  min-height: 420px;
}
#at-their-level .lc-preview-video {
  position: absolute;
  inset: 0;
}
#at-their-level .lc-heading,
#at-their-level .lc-copy {
  grid-column: 2;
}
#at-their-level .lc-copy {
  margin-top: 32px;
}
.lc-video-link {
  position: relative;
  display: block;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 18px;
  background: #102d24;
}
.lc-preview-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.lc-video-play {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #fff7edaa;
  border-radius: 50%;
  background: #09221866;
  color: var(--cream);
  font-size: 14px;
  pointer-events: none;
}
.lc-video-link:focus-visible {
  outline-offset: -6px;
}
/* Closing lines: bold and 3px larger than body copy; lime on the dark garden section. */
.lc-copy .lc-emphasis,
.lc-split__copy .lc-emphasis {
  font-size: 19px;
  font-weight: 600;
}
.lc-dark .lc-emphasis--lime {
  color: #e6ec9b;
}
@media (max-width: 1000px) {
  .lc-spaces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .lahore-hero {
    min-height: max(720px, 100svh);
  }
  .lahore-hero__content {
    padding-block: 80px;
  }
  .lahore-hero h1 {
    font-size: clamp(40px, 10vw, 58px);
  }
  .lahore-hero__lead {
    font-size: 18px;
  }
  .lahore-campus, .lc-split, .lc-editorial, .lc-find {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .lahore-campus, .lc-split, .lc-find {
    gap: 0;
  }
  .lahore-campus__media, .lc-split figure, .lc-find figure {
    min-height: 0;
    height: 75vw;
    max-height: 480px;
  }
  .lahore-campus__content, .lc-split__copy, .lc-find > div {
    padding: 48px var(--gutter) 60px;
  }
  .lc-find figure {
    order: -1;
  }
  .lc-split--reverse figure {
    order: 0;
  }
  .lc-spaces {
    grid-template-columns: minmax(0, 1fr);
  }
  .lc-space-card h3 {
    min-height: 0;
  }
  #at-their-level {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 28px;
  }
  #at-their-level .lc-video-link,
  #at-their-level .lc-heading,
  #at-their-level .lc-copy {
    grid-row: auto;
    grid-column: 1;
  }
  #at-their-level .lc-video-link {
    order: 2;
    justify-self: center;
    max-width: 360px;
    aspect-ratio: 9 / 16;
    min-height: 0;
  }
  #at-their-level .lc-copy {
    order: 3;
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .campus-motion [data-campus-dynamic] {
    opacity: 1;
    transform: none;
  }
  .campus-word {
    opacity: 1;
  }
}

/*campuses lahore end*/


/*learning-journey-karachi*/
/* 02. Theme, typography, and foundation ----------------------------------- */
.karachi-learning-page {
  --karachi-learning-cream: #fff7ed;
  --karachi-learning-paper: #fffbf5;
  --karachi-learning-sage: #f0f0df;
  --karachi-learning-forest: #173d31;
  --karachi-learning-green: #287b30;
  --karachi-learning-lime: #e6ec9b;
  --karachi-learning-ink: #2f2f2f;
  --karachi-learning-muted: #64675f;
  --karachi-learning-line: #cbd1be;
  --karachi-learning-gutter: clamp(22px, 5vw, 88px);
  --karachi-learning-size-subheading: clamp(22px, 2vw, 30px);
  margin: 0;
  background: var(--karachi-learning-cream);
  color: var(--karachi-learning-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.karachi-learning-page *,
.karachi-learning-page *::before,
.karachi-learning-page *::after {
  box-sizing: border-box;
}

.karachi-learning-page :where(h1, h2, h3, p, figure) {
  margin: 0;
}

.karachi-learning-page :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

.karachi-learning-page h2 {
  font-size: var(--karachi-learning-size-heading);
}

.karachi-learning-page h3 {
  font-size: var(--karachi-learning-size-subheading);
}

.karachi-learning-page :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.karachi-learning-page a {
  color: inherit;
  text-decoration: none;
}

.karachi-learning-page :where(a, button, summary):focus-visible {
  outline: 3px solid var(--karachi-learning-green);
  outline-offset: 4px;
}

.karachi-learning-page ::selection {
  background: var(--karachi-learning-lime);
  color: var(--karachi-learning-forest);
}

.karachi-learning-section {
  padding: clamp(75px, 8vw, 140px) var(--karachi-learning-gutter);
}

.karachi-learning-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--karachi-learning-green);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.karachi-learning-page a.karachi-learning-button {
  color: var(--karachi-learning-cream);
}

.karachi-learning-button:hover {
  background: var(--karachi-learning-forest);
}

/* 03. Full-screen photographic hero --------------------------------------- */
.karachi-learning-hero {
  position: relative;
  display: flex;
  min-height: 740px;
  height: calc(100svh - var(--karachi-learning-header));
  max-height: 1100px;
  overflow: hidden;
  background: var(--karachi-learning-forest);
  color: var(--karachi-learning-cream);
}

.karachi-learning-hero__media {
  position: absolute;
  inset: 0;
}

.karachi-learning-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.karachi-learning-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 42%, #09221845 80%), linear-gradient(0deg, #071a1480, transparent 60%);
}

.karachi-learning-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 64px var(--karachi-learning-gutter);
}

.karachi-learning-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.karachi-learning-stage {
  color: var(--karachi-learning-lime);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.karachi-learning-hero h1 {
  font-size: var(--karachi-learning-size-hero);
}

.karachi-learning-hero__lead {
  margin-top: 25px;
  color: #f0f2e8;
}

.karachi-learning-eyebrow {
  margin-bottom: 19px;
  color: var(--karachi-learning-green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Scroll reveals and reduced-motion fallback ------------------------------ */
.karachi-learning-motion .karachi-learning-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.karachi-learning-motion .karachi-learning-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .karachi-learning-motion .karachi-learning-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Responsive typography and hero ----------------------------------------- */
@media (max-width: 1320px) {
  .karachi-learning-page {
    --karachi-learning-header: 84px;
  }
}

@media (max-width: 960px) {
  .karachi-learning-hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  }
}

@media (max-width: 760px) {
  .karachi-learning-page {
    --karachi-learning-header: 80px;
    font-size: 15px;
  }

  .karachi-learning-section {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .karachi-learning-hero {
    height: auto;
    min-height: calc(100svh - var(--karachi-learning-header));
    max-height: none;
  }

  .karachi-learning-hero__copy {
    padding-top: 60px;
    padding-bottom: 70px;
  }

  .karachi-learning-breadcrumb {
    margin-bottom: 28px;
    font-size: 10px;
  }

  .karachi-learning-hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
  }

  .karachi-learning-hero__lead {
    font-size: 14px;
  }

  .karachi-learning-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922188f), linear-gradient(0deg, #071a1499, transparent);
  }
}

/* Page-specific composition polish. All selectors belong to this page only. */
.karachi-learning-page {
  --karachi-learning-header: 0px;
  --karachi-learning-size-hero: clamp(44px, 5.1vw, 78px);
  --karachi-learning-size-heading: clamp(34px, 3.7vw, 56px);
}

.karachi-learning-page main {
  padding-top: 0;
}

.karachi-learning-section {
  padding-block: clamp(65px, 7vw, 110px);
}

.karachi-learning-page p {
  overflow-wrap: break-word;
}

.karachi-learning-page [hidden] {
  display: none !important;
}

.karachi-learning-page .karachi-learning-hero {
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
}

.karachi-learning-hero__copy {
  max-width: 1512px;
  margin-inline: auto;
}

.karachi-learning-hero h1 {
  max-width: 1000px;
}

.karachi-learning-hero__lead {
  max-width: 730px;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}

.karachi-learning-breadcrumb {
  margin-bottom: 26px;
}

.karachi-learning-stage {
  margin-bottom: 18px;
}

/* Full-width body grid: consistent photographic splits and readable copy. */
.karachi-learning-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.karachi-learning-split__photo {
  margin: 0;
  overflow: hidden;
  background: var(--karachi-learning-sage);
}

.karachi-learning-split__photo img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.karachi-learning-split__copy {
  align-self: center;
  padding: clamp(45px, 5vw, 80px);
}

.karachi-learning-split__copy p:not(.karachi-learning-eyebrow) {
  margin-top: 20px;
  color: var(--karachi-learning-muted);
}

.karachi-learning-split__copy .karachi-learning-eyebrow {
  margin-bottom: 17px;
}

.karachi-learning-split--reverse {
  background: var(--karachi-learning-sage);
}

.karachi-learning-split--reverse .karachi-learning-split__photo {
  order: 2;
}

.karachi-learning-split__copy .karachi-learning-actions {
  margin-top: 28px;
}

.karachi-learning-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* Long source copy remains complete, arranged around a sticky introduction. */
.karachi-learning-editorial {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
  background: var(--karachi-learning-paper);
}

.karachi-learning-editorial__copy {
  max-width: 800px;
}

.karachi-learning-editorial__copy p {
  color: var(--karachi-learning-muted);
}

.karachi-learning-editorial__copy p + p {
  margin-top: 20px;
}

.karachi-learning-editorial--dark {
  background: var(--karachi-learning-forest);
  color: var(--karachi-learning-cream);
}

.karachi-learning-editorial--dark p {
  color: #e1e8de;
}

.karachi-learning-editorial--dark .karachi-learning-sticky {
  top: 40px;
}

.karachi-learning-editorial--dark .karachi-learning-sticky p {
  color: #e1e8de;
}

/* Learning evolves: three sequential, scroll-scrubbed motion-blur statements. */
.karachi-learning-evolution {
  display: block;
  overflow-x: clip;
}

.karachi-learning-evolution__intro {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
  align-items: start;
}

.karachi-learning-evolution__statements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: clamp(32px, 3.5vw, 50px);
}

.karachi-learning-evolution__statement {
  margin: 0;
  color: var(--karachi-learning-green);
  font-size: clamp(14px, 2vw, 32px);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.25;
}

.karachi-learning-evolution__statement--left { text-align: left; }
.karachi-learning-evolution__statement--center { text-align: center; }
.karachi-learning-evolution__statement--right { text-align: right; }

/* Content-sized spacing keeps the reveals close to the neighbouring sections. */
.karachi-learning-page .karachi-learning-evolution {
  min-height: 0;
  padding-block: clamp(44px, 4vw, 64px);
}

.karachi-learning-evolution__word {
  display: inline-block;
  opacity: var(--karachi-learning-word-opacity, 1);
  filter: blur(var(--karachi-learning-word-blur, 0px));
  transform: translate3d(var(--karachi-learning-word-offset, 0px), 0, 0);
  will-change: transform, filter, opacity;
}

.karachi-learning-evolution__accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .karachi-learning-evolution__intro { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .karachi-learning-evolution__statements { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 35px; }
  .karachi-learning-evolution__statement { font-size: clamp(18px, 5.6vw, 30px); }
  .karachi-learning-page .karachi-learning-evolution { padding-block: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .karachi-learning-evolution__word { transform: none; filter: none; opacity: 1; will-change: auto; }
}

.karachi-learning-pathway-map {
  --karachi-learning-pathway-gap: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--karachi-learning-pathway-gap);
  background: var(--karachi-learning-sage);
}

.karachi-learning-pathway-map__card {
  position: relative;
  min-width: 0;
  padding: 46px 16px 24px;
  text-align: center;
}

/* Milestones connect through their centers, from Early Years to Senior Years. */
.karachi-learning-pathway-map__card::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--karachi-learning-green);
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.karachi-learning-pathway-map__card::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  width: calc(100% + var(--karachi-learning-pathway-gap));
  height: 2px;
  background: var(--karachi-learning-green);
  pointer-events: none;
}

.karachi-learning-pathway-map__card:last-child::after {
  display: none;
}

.karachi-learning-pathway-map__card strong {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.6em;
  color: var(--karachi-learning-forest);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -.025em;
}

.karachi-learning-pathway-map__card p {
  margin-top: 16px;
  color: var(--karachi-learning-muted);
  font-size: 14px;
}

/* Zoom the content independently so pathway markers and connectors stay aligned. */
.karachi-learning-pathway-map__content {
  transform-origin: center;
}

@media (min-width: 1001px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .karachi-learning-pathway-map__content {
    transition: transform 280ms cubic-bezier(.2, .7, .2, 1);
  }

  .karachi-learning-pathway-map__card:hover .karachi-learning-pathway-map__content {
    transform: translateY(-8px) scale(1.12);
  }
}

.karachi-learning-pathway-map__card .karachi-learning-eyebrow {
  display: block;
  margin-bottom: 14px;
}

/* Lift the heading by 4% of viewport height; the description stays in place. */
.karachi-learning-cta .karachi-learning-cta__title {
  margin-block: -4svh 4svh;
}

.karachi-learning-cta .karachi-learning-actions {
  justify-content: center;
}

.karachi-learning-cta .karachi-learning-button {
  min-height: 52px;
}

@media (max-width: 1000px) {
  .karachi-learning-pathway-map {
    grid-template-columns: minmax(0, 1fr);
    --karachi-learning-pathway-gap: 18px;
  }

  .karachi-learning-pathway-map__card {
    padding: 22px 42px;
  }

  .karachi-learning-pathway-map__card::before {
    top: 25px;
    left: 10px;
  }

  .karachi-learning-pathway-map__card::after {
    top: 34px;
    left: 9px;
    width: 2px;
    height: calc(100% + var(--karachi-learning-pathway-gap));
  }

  .karachi-learning-pathway-map__card strong {
    min-height: 0;
  }

  .karachi-learning-editorial {
    gap: 6%;
  }

  .karachi-learning-split__copy {
    padding-inline: 35px;
  }
}

@media (max-width: 760px) {
  .karachi-learning-page .karachi-learning-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  }

  .karachi-learning-hero__copy {
    padding-block: 64px;
  }

  .karachi-learning-hero__lead {
    font-size: 18px;
  }

  .karachi-learning-section {
    padding-block: 60px;
  }

  .karachi-learning-split, .karachi-learning-editorial {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .karachi-learning-split--reverse .karachi-learning-split__photo {
    order: 0;
  }

  .karachi-learning-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.4;
  }

  .karachi-learning-split__copy {
    padding: 42px var(--karachi-learning-gutter) 50px;
  }

  .karachi-learning-split__copy p:not(.karachi-learning-eyebrow) {
    font-size: 15px;
  }

  .karachi-learning-editorial {
    gap: 28px;
  }

  .karachi-learning-editorial .karachi-learning-sticky {
    position: static;
  }

  .karachi-learning-pathway-map {
    --karachi-learning-pathway-gap: 14px;
  }

  .karachi-learning-pathway-map__card {
    padding-inline: 34px;
  }

  .karachi-learning-pathway-map__card strong {
    font-size: 20px;
  }

  .karachi-learning-pathway-map__card p {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .karachi-learning-pathway-map {
    grid-template-columns: minmax(0, 1fr);
  }

  .karachi-learning-hero h1 {
    font-size: 40px;
  }
}

/* Source audit and learning-stage emphasis, 20 October 2026. */
.karachi-learning-hero-shortcuts{margin-top:30px;gap:12px}
.karachi-learning-hero-shortcuts .karachi-learning-button{padding:12px 18px;font-size:13px;min-height:46px}
.karachi-learning-split__copy .karachi-learning-stage-range{margin:0 0 22px;color:var(--karachi-learning-forest);font-size:15px;font-weight:600;letter-spacing:.08em}
.karachi-learning-split__copy p.karachi-learning-feature{color:var(--karachi-learning-forest);font-weight:600}
.karachi-learning-split__copy p.karachi-learning-feature--snap{margin-top:30px;font-size:clamp(30px,3vw,44px);line-height:1.2;letter-spacing:-.04em}
.karachi-learning-split__copy p.karachi-learning-feature--snap-line{margin-top:10px;font-size:clamp(21px,2vw,28px);line-height:1.4}
.karachi-learning-split__copy p.karachi-learning-feature--example{font-size:18px;border-left:3px solid var(--karachi-learning-green);padding-left:18px;margin-top:18px}
.karachi-learning-split__copy p.karachi-learning-feature--conclusion{font-size:20px;line-height:1.6;margin-top:30px}
.karachi-learning-editorial__copy .karachi-learning-feature--progress{color:var(--karachi-learning-forest);font-size:20px;font-weight:600;margin-top:28px}
.karachi-learning-editorial__copy .karachi-learning-feature--questions{color:var(--karachi-learning-forest);font-size:20px;line-height:1.7;padding-left:20px;border-left:3px solid var(--karachi-learning-green)}
.karachi-learning-feature--questions strong{display:block}
.karachi-learning-cta .karachi-learning-actions{margin-top:4svh}
@media(max-width:760px){.karachi-learning-hero-shortcuts .karachi-learning-button{flex:1 1 43%}.karachi-learning-split__copy p.karachi-learning-feature--example{font-size:17px}.karachi-learning-split__copy p.karachi-learning-feature--conclusion,.karachi-learning-editorial__copy .karachi-learning-feature--progress,.karachi-learning-editorial__copy .karachi-learning-feature--questions{font-size:18px}}

/* Qualification arc treatment from the approved reference. */
.karachi-learning-qualifications{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-block:30px;gap:12px}
.qualification{position:relative;display:flex;align-items:center;min-width:0;min-height:174px;--qualification-accent:#e69a09}
.qualification+.qualification{border-left:1px solid #173d3112;padding-left:10px}
.qualification--oxford{--qualification-accent:#287d68}.qualification--edexcel{--qualification-accent:#5923b7}
.qualification-arc{position:absolute;left:-8px;top:0;height:174px;width:164px;max-width:100%;overflow:visible;color:var(--qualification-accent)}
.qualification-arc path{stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round}.qualification-arc circle{fill:currentColor}
.qualification-copy{position:relative;padding-left:24px;z-index:1;font-size:14px;line-height:1.45;color:var(--karachi-learning-ink)}
.qualification-copy strong{display:block;font-size:20px;line-height:1.3;letter-spacing:-.035em;color:var(--qualification-accent)}
.qualification--cambridge .qualification-copy strong{font-size:26px}
.karachi-learning-split__copy p.karachi-learning-feature--snap{font-size:clamp(21px,2vw,28px);line-height:1.4}
.karachi-learning-split__copy p.karachi-learning-feature--example,.karachi-learning-editorial__copy .karachi-learning-feature--questions{border-left:0;padding-left:0}
/* Words roll into place as the featured statement enters view. */
.learning-roll-mask{display:inline-block;overflow:hidden;vertical-align:bottom;perspective:500px}
.learning-roll-word{display:inline-block;transform-origin:50% 100%}
.learning-roll-ready .learning-roll-word{transform:translateY(110%) rotateX(-75deg);opacity:0;transition:transform .55s cubic-bezier(.2,.75,.25,1),opacity .4s;transition-delay:var(--roll-delay,0ms)}
.learning-roll-ready.is-rolled .learning-roll-word{transform:none;opacity:1}
@media(max-width:1100px) and (min-width:761px){.karachi-learning-qualifications{grid-template-columns:1fr}.qualification{min-height:158px}.qualification+.qualification{border-left:0;border-top:1px solid #173d3112;padding-left:0}.qualification-arc{height:158px}.qualification-copy{padding-left:38px;max-width:90%}}
@media(max-width:760px){.qualification-copy{font-size:13px;padding-left:22px}.qualification-copy strong{font-size:18px}.qualification--cambridge .qualification-copy strong{font-size:24px}}
@media(max-width:480px){.karachi-learning-qualifications{grid-template-columns:1fr;gap:16px}.qualification{min-height:158px}.qualification+.qualification{border-left:0;border-top:1px solid #173d3112;padding-left:0}.qualification-arc{height:158px;width:150px}.qualification-copy{padding-left:38px;font-size:15px}.qualification-copy strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){.learning-roll-ready .learning-roll-word{transform:none;opacity:1;transition:none}}

/* Scroll-scrubbed typewriter statements; question group keeps its roll reveal. */
.qualification+.qualification{border-left:0;border-top:0}
.learning-typewriter-ready .learning-typewriter-char{visibility:hidden}
.learning-typewriter-ready .learning-typewriter-char.is-typed{visibility:visible}
@media(prefers-reduced-motion:reduce){.learning-typewriter-ready .learning-typewriter-char{visibility:visible}}

/* Final approved discipline-example highlight. */
.karachi-learning-example-highlight{background:var(--karachi-learning-lime);color:var(--karachi-learning-forest);padding:3px 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}


/*end learning-journey-karachi*/

/*early-year*/

/* 02. Theme, typography, and foundation ----------------------------------- */
.karachi-early-page {
  --karachi-early-cream: #fff7ed;
  --karachi-early-paper: #fffbf5;
  --karachi-early-sage: #f0f0df;
  --karachi-early-forest: #173d31;
  --karachi-early-green: #287b30;
  --karachi-early-lime: #e6ec9b;
  --karachi-early-ink: #2f2f2f;
  --karachi-early-muted: #64675f;
  --karachi-early-line: #cbd1be;
  --karachi-early-gutter: clamp(22px, 5vw, 88px);
  --karachi-early-size-subheading: clamp(22px, 2vw, 30px);
  margin: 0;
  background: var(--karachi-early-cream);
  color: var(--karachi-early-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.karachi-early-page *,
.karachi-early-page *::before,
.karachi-early-page *::after {
  box-sizing: border-box;
}

.karachi-early-page :where(h1, h2, h3, p, figure) {
  margin: 0;
}

.karachi-early-page :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

.karachi-early-page h2 {
  font-size: var(--karachi-early-size-heading);
}

.karachi-early-page h3 {
  font-size: var(--karachi-early-size-subheading);
}

.karachi-early-page :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.karachi-early-page a {
  color: inherit;
  text-decoration: none;
}

.karachi-early-page :where(a, button, summary):focus-visible {
  outline: 3px solid var(--karachi-early-green);
  outline-offset: 4px;
}

.karachi-early-page ::selection {
  background: var(--karachi-early-lime);
  color: var(--karachi-early-forest);
}

.karachi-early-section {
  padding: clamp(75px, 8vw, 140px) var(--karachi-early-gutter);
}

.karachi-early-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--karachi-early-green);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.karachi-early-page a.karachi-early-button {
  color: var(--karachi-early-cream);
}

.karachi-early-button:hover {
  background: var(--karachi-early-forest);
}

/* 03. Full-screen photographic hero --------------------------------------- */
.karachi-early-hero {
  position: relative;
  display: flex;
  min-height: 740px;
  height: calc(100svh - var(--karachi-early-header));
  max-height: 1100px;
  overflow: hidden;
  background: var(--karachi-early-forest);
  color: var(--karachi-early-cream);
}

.karachi-early-hero__media {
  position: absolute;
  inset: 0;
}

.karachi-early-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.karachi-early-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 42%, #09221845 80%),
    linear-gradient(0deg, #071a1480, transparent 60%);
}

.karachi-early-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 64px var(--karachi-early-gutter);
}

.karachi-early-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.karachi-early-stage {
  color: var(--karachi-early-lime);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.karachi-early-hero h1 {
  font-size: var(--karachi-early-size-hero);
}

.karachi-early-hero__lead {
  margin-top: 25px;
  color: #f0f2e8;
}

/* 04. Approach and native scrolling chapters ------------------------------- */
.karachi-early-approach {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  background: var(--karachi-early-forest);
  color: var(--karachi-early-cream);
}

.karachi-early-approach p {
  max-width: 590px;
  color: #e1e8de;
}

.karachi-early-chapters__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.karachi-early-chapters__photo {
  position: sticky;
  align-self: start;
  overflow: hidden;
  background: var(--karachi-early-sage);
}

.karachi-early-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 550ms ease;
}

.karachi-early-scene.is-active {
  opacity: 1;
}

.karachi-early-chapter {
  display: flex;
  align-items: center;
  padding: 70px clamp(35px, 5vw, 90px);
  border-bottom: 1px solid var(--karachi-early-line);
}

.karachi-early-chapter__copy p {
  max-width: 520px;
  color: var(--karachi-early-muted);
}

.karachi-early-chapter__copy h3 {
  color: var(--karachi-early-forest);
}

.karachi-early-page .karachi-early-chapter__mobile {
  display: none;
}

.karachi-early-sticky {
  position: sticky;
  top: calc(var(--karachi-early-header) + 40px);
  align-self: start;
}

.karachi-early-sticky p {
  margin-top: 25px;
  color: var(--karachi-early-muted);
}

/* Closing action band ----------------------------------------------------- */
.karachi-early-cta {
  background: var(--karachi-early-forest);
  color: var(--karachi-early-cream);
}

.karachi-early-actions {
  margin-top: 32px;
}

.karachi-early-cta .karachi-early-button {
  background: var(--karachi-early-lime);
}

.karachi-early-page .karachi-early-cta a.karachi-early-button {
  color: var(--karachi-early-forest);
}

.karachi-early-cta .karachi-early-button:hover {
  background: var(--karachi-early-cream);
}

.karachi-early-cta .karachi-early-button--outline {
  border-color: #ffffff70;
  background: transparent;
}

.karachi-early-page .karachi-early-cta a.karachi-early-button--outline {
  color: var(--karachi-early-cream);
}

.karachi-early-page .karachi-early-cta a.karachi-early-button--outline:hover {
  color: var(--karachi-early-forest);
}

.karachi-early-cta a:focus-visible {
  outline-color: var(--karachi-early-lime);
}

/* Scroll reveals and reduced-motion fallback ------------------------------ */
.karachi-early-motion .karachi-early-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.karachi-early-motion .karachi-early-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .karachi-early-motion .karachi-early-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .karachi-early-scene {
    transition: none;
  }
}

/* Responsive typography and hero ----------------------------------------- */
@media (max-width: 1320px) {
  .karachi-early-page {
    --karachi-early-header: 84px;
  }
}

@media (max-width: 960px) {
  .karachi-early-hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  }
}

@media (max-width: 760px) {
  .karachi-early-page {
    --karachi-early-header: 80px;
    font-size: 15px;
  }

  .karachi-early-section {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .karachi-early-hero {
    height: auto;
    min-height: calc(100svh - var(--karachi-early-header));
    max-height: none;
  }

  .karachi-early-hero__copy {
    padding-top: 60px;
    padding-bottom: 70px;
  }

  .karachi-early-breadcrumb {
    margin-bottom: 28px;
    font-size: 10px;
  }

  .karachi-early-hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
  }

  .karachi-early-hero__lead {
    font-size: 14px;
  }

  .karachi-early-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922188f),
      linear-gradient(0deg, #071a1499, transparent);
  }
}

@media (max-width: 760px) {
  .karachi-early-chapters__grid {
    display: block;
  }

  .karachi-early-chapters__photo {
    display: none;
  }

  .karachi-early-chapter {
    display: block;
    min-height: 0;
    padding: 0 0 55px;
  }

  .karachi-early-page .karachi-early-chapter__mobile {
    display: block;
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
  }

  .karachi-early-chapter__copy {
    padding: 32px var(--karachi-early-gutter) 0;
  }

  .karachi-early-sticky {
    position: static;
  }
}

/* Page-specific composition polish. All selectors belong to this page only. */
.karachi-early-page {
  --karachi-early-header: 0px;
  --karachi-early-size-hero: clamp(44px, 5.1vw, 78px);
  --karachi-early-size-heading: clamp(34px, 3.7vw, 56px);
}

.karachi-early-page main {
  padding-top: 0;
}

.karachi-early-section {
  padding-block: clamp(65px, 7vw, 110px);
}

.karachi-early-page p {
  overflow-wrap: break-word;
}

.karachi-early-page [hidden] {
  display: none !important;
}

.karachi-early-page .karachi-early-hero {
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
}

.karachi-early-hero__copy {
  max-width: 1512px;
  margin-inline: auto;
}

.karachi-early-hero h1 {
  max-width: 1000px;
}

.karachi-early-hero__lead {
  max-width: 730px;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}

.karachi-early-breadcrumb {
  margin-bottom: 26px;
}

.karachi-early-stage {
  margin-bottom: 18px;
}

/* Full-width body grid: consistent photographic splits and readable copy. */
.karachi-early-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.karachi-early-split__photo {
  margin: 0;
  overflow: hidden;
  background: var(--karachi-early-sage);
}

.karachi-early-split__photo img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.karachi-early-split__copy {
  align-self: center;
  padding: clamp(45px, 5vw, 80px);
}

.karachi-early-split__copy p:not(.karachi-early-eyebrow) {
  margin-top: 20px;
  color: var(--karachi-early-muted);
}

.karachi-early-split__copy .karachi-early-eyebrow {
  margin-bottom: 17px;
}

.karachi-early-split__copy .karachi-early-actions {
  margin-top: 28px;
}

.karachi-early-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* Long source copy remains complete, arranged around a sticky introduction. */
.karachi-early-editorial {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10%;
  background: var(--karachi-early-paper);
}

.karachi-early-editorial__copy {
  max-width: 800px;
}

.karachi-early-editorial__copy p {
  color: var(--karachi-early-muted);
}

.karachi-early-editorial__copy p + p {
  margin-top: 20px;
}

.karachi-early-editorial--dark {
  background: var(--karachi-early-forest);
  color: var(--karachi-early-cream);
}

.karachi-early-editorial--dark p {
  color: #e1e8de;
}

.karachi-early-editorial--dark .karachi-early-sticky {
  top: 40px;
}

.karachi-early-editorial--dark .karachi-early-sticky p {
  color: #e1e8de;
}

/* Early/Elementary: retain chapter midpoint calculation and photo crossfade. */
.karachi-early-approach {
  gap: 8%;
}

.karachi-early-approach p + p {
  margin-top: 16px;
}

.karachi-early-chapters__photo {
  top: 0;
  height: 100svh;
  min-height: 530px;
}

.karachi-early-chapter {
  min-height: 78svh;
  padding-block: 65px;
}

.karachi-early-chapter__copy .karachi-early-chapter__title {
  margin-top: 0;
  margin-bottom: 18px;
  color: var(--karachi-early-green);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.karachi-early-chapter__copy h3 {
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.2;
}

.karachi-early-chapter__copy p {
  margin-top: 20px;
}

/* Builds: skill grid with short coloured accents and vertical dividers. */
.karachi-early-chapter__copy .karachi-early-builds {
  container: early-builds / inline-size;
  width: 100%;
  margin-top: 28px;
}

.karachi-early-builds .karachi-early-builds__label {
  margin: 0 0 14px;
  color: var(--karachi-early-green);
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 600;
  line-height: 1.5;
}

.karachi-early-builds__skills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.karachi-early-builds__skills li {
  --skill-accent: #f8bc42;
  position: relative;
  min-width: 0;
  padding: 0;
  color: var(--karachi-early-forest);
  font-size: clamp(13px, 2.35cqw, 16px);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.karachi-early-builds__skills li:not(:nth-child(3n + 1))::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -10px;
  border-left: 1px solid #173d3140;
}

.karachi-early-builds__skill--two-lines span {
  display: block;
}

.karachi-early-builds__skills li::after {
  content: "";
  display: block;
  width: 52px;
  max-width: 70%;
  height: 3px;
  margin-top: 9px;
  background: var(--skill-accent);
}

.karachi-early-builds__skills li:nth-child(6n + 2) {
  --skill-accent: #88af95;
}
.karachi-early-builds__skills li:nth-child(6n + 3) {
  --skill-accent: #a584b8;
}
.karachi-early-builds__skills li:nth-child(6n + 4) {
  --skill-accent: #f18577;
}
.karachi-early-builds__skills li:nth-child(6n + 5) {
  --skill-accent: #67b4e2;
}
.karachi-early-builds__skills li:nth-child(6n + 6) {
  --skill-accent: #a89ace;
}

/* Respond to the copy column's width, including the full-width mobile layout. */
@container early-builds (max-width: 480px) {
  .karachi-early-builds__skills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
  }

  .karachi-early-builds__skills li:nth-child(n)::before {
    content: none;
  }

  .karachi-early-builds__skills li:nth-child(even)::before {
    content: "";
  }
}

@container early-builds (max-width: 350px) {
  .karachi-early-builds__skill--two-lines,
  .karachi-early-builds__skill--mobile-wide {
    grid-column: 1 / -1;
  }

  .karachi-early-builds__skills .karachi-early-builds__skill--two-lines::before,
  .karachi-early-builds__skills
    .karachi-early-builds__skill--mobile-wide::before {
    content: none;
  }
}

/* Buttons complete the foundations section without a repeated headline. */
.karachi-early-page .karachi-early-cta {
  padding-top: 0;
  padding-bottom: clamp(44px, 4vw, 64px);
}

.karachi-early-cta .karachi-early-actions {
  justify-content: center;
  margin-top: 0;
}

.karachi-early-cta .karachi-early-button {
  min-height: 52px;
}

@media (max-width: 1000px) {
  .karachi-early-editorial {
    gap: 6%;
  }

  .karachi-early-split__copy {
    padding-inline: 35px;
  }
}

@media (max-width: 760px) {
  .karachi-early-page .karachi-early-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  }

  .karachi-early-hero__copy {
    padding-block: 64px;
  }

  .karachi-early-hero__lead {
    font-size: 18px;
  }

  .karachi-early-section {
    padding-block: 60px;
  }

  .karachi-early-split,
  .karachi-early-editorial {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .karachi-early-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.4;
  }

  .karachi-early-split__copy {
    padding: 42px var(--karachi-early-gutter) 50px;
  }

  .karachi-early-split__copy p:not(.karachi-early-eyebrow) {
    font-size: 15px;
  }

  .karachi-early-editorial {
    gap: 28px;
  }

  .karachi-early-editorial .karachi-early-sticky {
    position: static;
  }

  .karachi-early-chapters__photo {
    display: none;
  }

  .karachi-early-chapter {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .karachi-early-chapter__copy {
    padding: 38px var(--karachi-early-gutter) 50px;
  }

  .karachi-early-chapter__copy h3 {
    font-size: 32px;
  }
}

@media (max-width: 380px) {
  .karachi-early-hero h1 {
    font-size: 40px;
  }
}

/* SNAP chapter preview clips and full-video dialog. */
.early-video-open {
  padding: 0;
  border: 0;
  cursor: pointer;
  text-align: left;
  background: #102d24;
  color: var(--karachi-early-cream);
  font: inherit;
  overflow: hidden;
  position: relative;
}
.karachi-early-scene.early-video-open {
  position: absolute;
  pointer-events: none;
  visibility: hidden;
}
.karachi-early-scene.early-video-open.is-active {
  pointer-events: auto;
  visibility: visible;
}
.early-preview-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.early-video-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 40px 26px 24px;
  background: linear-gradient(transparent, #092218d9);
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
}
.early-video-play {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #fff7edaa;
  border-radius: 50%;
  font-size: 13px;
  flex-shrink: 0;
}
.early-video-open:focus-visible {
  outline: 3px solid var(--karachi-early-lime);
  outline-offset: -6px;
}
.early-film-dialog {
  width: min(1100px, 94vw);
  max-width: none;
  max-height: 94svh;
  padding: 0;
  border: 1px solid #173d3133;
  border-radius: 18px;
  background: var(--karachi-early-cream);
  color: var(--karachi-early-forest);
  overflow: auto;
}
.early-film-dialog::backdrop {
  background: #071a14c9;
  backdrop-filter: blur(5px);
}
.early-film-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
}
.early-film-toolbar h2 {
  font-size: 20px;
  letter-spacing: -0.02em;
}
.early-film-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--karachi-early-line);
  border-radius: 50%;
  font: inherit;
  font-size: 25px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.early-film-screen {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
}
.early-film-screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  border: 0;
}
.early-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.early-preview-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  border: 1px solid var(--karachi-early-line);
  border-radius: 999px;
  background: var(--karachi-early-cream);
  color: var(--karachi-early-forest);
  padding: 10px 16px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 4px 18px #173d3115;
}
body.early-film-open {
  overflow: hidden;
}
@media (max-width: 760px) {
  .karachi-early-page button.karachi-early-chapter__mobile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1.5;
  }
  .early-film-toolbar {
    padding: 14px;
  }
  .early-film-toolbar h2 {
    font-size: 16px;
  }
  .early-preview-toggle {
    bottom: 12px;
    right: 12px;
  }
  .early-video-caption {
    padding: 30px 22px 18px;
  }
}


/*early-year-end*/

/*elementary*/
/* 02. Theme, typography, and foundation ----------------------------------- */
.karachi-elementary-page {
  --karachi-elementary-cream: #fff7ed;
  --karachi-elementary-paper: #fffbf5;
  --karachi-elementary-sage: #f0f0df;
  --karachi-elementary-forest: #173d31;
  --karachi-elementary-green: #287b30;
  --karachi-elementary-lime: #e6ec9b;
  --karachi-elementary-ink: #2f2f2f;
  --karachi-elementary-muted: #64675f;
  --karachi-elementary-line: #cbd1be;
  --karachi-elementary-gutter: clamp(22px, 5vw, 88px);
  --karachi-elementary-size-subheading: clamp(22px, 2vw, 30px);
  margin: 0;
  background: var(--karachi-elementary-cream);
  color: var(--karachi-elementary-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.karachi-elementary-page *,
.karachi-elementary-page *::before,
.karachi-elementary-page *::after {
  box-sizing: border-box;
}

.karachi-elementary-page :where(h1, h2, h3, p, figure) {
  margin: 0;
}

.karachi-elementary-page :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

.karachi-elementary-page h2 {
  font-size: var(--karachi-elementary-size-heading);
}

.karachi-elementary-page h3 {
  font-size: var(--karachi-elementary-size-subheading);
}

.karachi-elementary-page :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.karachi-elementary-page a {
  color: inherit;
  text-decoration: none;
}

.karachi-elementary-page :where(a, button, summary):focus-visible {
  outline: 3px solid var(--karachi-elementary-green);
  outline-offset: 4px;
}

.karachi-elementary-page ::selection {
  background: var(--karachi-elementary-lime);
  color: var(--karachi-elementary-forest);
}

.karachi-elementary-section {
  padding: clamp(75px, 8vw, 140px) var(--karachi-elementary-gutter);
}

.karachi-elementary-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--karachi-elementary-green);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.karachi-elementary-page a.karachi-elementary-button {
  color: var(--karachi-elementary-cream);
}

.karachi-elementary-button:hover {
  background: var(--karachi-elementary-forest);
}

/* 03. Full-screen photographic hero --------------------------------------- */
.karachi-elementary-hero {
  position: relative;
  display: flex;
  min-height: 740px;
  height: calc(100svh - var(--karachi-elementary-header));
  max-height: 1100px;
  overflow: hidden;
  background: var(--karachi-elementary-forest);
  color: var(--karachi-elementary-cream);
}

.karachi-elementary-hero__media {
  position: absolute;
  inset: 0;
}

.karachi-elementary-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.karachi-elementary-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 42%, #09221845 80%),
    linear-gradient(0deg, #071a1480, transparent 60%);
}

.karachi-elementary-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 64px var(--karachi-elementary-gutter);
}

.karachi-elementary-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.karachi-elementary-stage {
  color: var(--karachi-elementary-lime);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.karachi-elementary-hero h1 {
  font-size: var(--karachi-elementary-size-hero);
}

.karachi-elementary-hero__lead {
  margin-top: 25px;
  color: #f0f2e8;
}

/* 04. Approach and native scrolling chapters ------------------------------- */
.karachi-elementary-approach {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  background: var(--karachi-elementary-forest);
  color: var(--karachi-elementary-cream);
}

.karachi-elementary-approach p {
  max-width: 590px;
  color: #e1e8de;
}

.karachi-elementary-chapters__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.karachi-elementary-chapters__photo {
  position: sticky;
  align-self: start;
  overflow: hidden;
  background: var(--karachi-elementary-sage);
}

.karachi-elementary-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 550ms ease;
}

.karachi-elementary-scene.is-active {
  opacity: 1;
}

.karachi-elementary-chapter {
  display: flex;
  align-items: center;
  padding: 70px clamp(35px, 5vw, 90px);
  border-bottom: 1px solid var(--karachi-elementary-line);
}

.karachi-elementary-chapter__copy p {
  max-width: 520px;
  color: var(--karachi-elementary-muted);
}

.karachi-elementary-chapter__copy h3 {
  color: var(--karachi-elementary-forest);
}

.karachi-elementary-page .karachi-elementary-chapter__mobile {
  display: none;
}

.karachi-elementary-sticky {
  position: sticky;
  top: calc(var(--karachi-elementary-header) + 100px);
  align-self: start;
}

.karachi-elementary-sticky p {
  margin-top: 25px;
  color: var(--karachi-elementary-muted);
}

/* Closing action band ----------------------------------------------------- */
.karachi-elementary-cta {
  background: var(--karachi-elementary-forest);
  color: var(--karachi-elementary-cream);
}

.karachi-elementary-cta h2 {
  max-width: 920px;
}

.karachi-elementary-cta p {
  margin-top: 25px;
  color: #e1e8de;
}

.karachi-elementary-actions {
  margin-top: 32px;
}

.karachi-elementary-cta .karachi-elementary-button {
  background: var(--karachi-elementary-lime);
}

.karachi-elementary-page .karachi-elementary-cta a.karachi-elementary-button {
  color: var(--karachi-elementary-forest);
}

.karachi-elementary-cta .karachi-elementary-button:hover {
  background: var(--karachi-elementary-cream);
}

.karachi-elementary-cta .karachi-elementary-button--outline {
  border-color: #ffffff70;
  background: transparent;
}

.karachi-elementary-page
  .karachi-elementary-cta
  a.karachi-elementary-button--outline {
  color: var(--karachi-elementary-cream);
}

.karachi-elementary-page
  .karachi-elementary-cta
  a.karachi-elementary-button--outline:hover {
  color: var(--karachi-elementary-forest);
}

.karachi-elementary-cta a:focus-visible {
  outline-color: var(--karachi-elementary-lime);
}

/* Scroll reveals and reduced-motion fallback ------------------------------ */
.karachi-elementary-motion .karachi-elementary-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.karachi-elementary-motion .karachi-elementary-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .karachi-elementary-motion .karachi-elementary-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .karachi-elementary-scene {
    transition: none;
  }
}

/* Responsive typography and hero ----------------------------------------- */
@media (max-width: 1320px) {
  .karachi-elementary-page {
    --karachi-elementary-header: 84px;
  }
}

@media (max-width: 960px) {
  .karachi-elementary-hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  }
}

@media (max-width: 760px) {
  .karachi-elementary-page {
    --karachi-elementary-header: 80px;
    font-size: 15px;
  }

  .karachi-elementary-section {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .karachi-elementary-hero {
    height: auto;
    min-height: calc(100svh - var(--karachi-elementary-header));
    max-height: none;
  }

  .karachi-elementary-hero__copy {
    padding-top: 60px;
    padding-bottom: 70px;
  }

  .karachi-elementary-breadcrumb {
    margin-bottom: 28px;
    font-size: 10px;
  }

  .karachi-elementary-hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
  }

  .karachi-elementary-hero__lead {
    font-size: 14px;
  }

  .karachi-elementary-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922188f),
      linear-gradient(0deg, #071a1499, transparent);
  }
}

@media (max-width: 760px) {
  .karachi-elementary-chapters__grid {
    display: block;
  }

  .karachi-elementary-chapters__photo {
    display: none;
  }

  .karachi-elementary-chapter {
    display: block;
    min-height: 0;
    padding: 0 0 55px;
  }

  .karachi-elementary-page .karachi-elementary-chapter__mobile {
    display: block;
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
  }

  .karachi-elementary-chapter__copy {
    padding: 32px var(--karachi-elementary-gutter) 0;
  }

  .karachi-elementary-sticky {
    position: static;
  }
}

/* Page-specific composition polish. All selectors belong to this page only. */
.karachi-elementary-page {
  --karachi-elementary-header: 0px;
  --karachi-elementary-size-hero: clamp(44px, 5.1vw, 78px);
  --karachi-elementary-size-heading: clamp(34px, 3.7vw, 56px);
}

.karachi-elementary-page main {
  padding-top: 0;
}

.karachi-elementary-section {
  padding-block: clamp(65px, 7vw, 110px);
}

.karachi-elementary-page p {
  overflow-wrap: break-word;
}

.karachi-elementary-page [hidden] {
  display: none !important;
}

.karachi-elementary-page .karachi-elementary-hero {
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
}

.karachi-elementary-hero__copy {
  max-width: 1512px;
  margin-inline: auto;
}

.karachi-elementary-hero h1 {
  max-width: 1000px;
}

.karachi-elementary-hero__lead {
  max-width: 730px;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}

.karachi-elementary-breadcrumb {
  margin-bottom: 26px;
}

.karachi-elementary-stage {
  margin-bottom: 18px;
}

/* Full-width body grid: consistent photographic splits and readable copy. */
.karachi-elementary-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.karachi-elementary-split__photo {
  margin: 0;
  overflow: hidden;
  background: var(--karachi-elementary-sage);
}

.karachi-elementary-split__photo img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.karachi-elementary-split__copy {
  align-self: center;
  padding: clamp(45px, 5vw, 80px);
}

.karachi-elementary-split__copy p:not(.karachi-elementary-eyebrow) {
  margin-top: 20px;
  color: var(--karachi-elementary-muted);
}

.karachi-elementary-split__copy .karachi-elementary-eyebrow {
  margin-bottom: 17px;
}

.karachi-elementary-split__copy .karachi-elementary-actions {
  margin-top: 28px;
}

.karachi-elementary-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* Long source copy remains complete, arranged around a sticky introduction. */
.karachi-elementary-editorial {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10%;
  background: var(--karachi-elementary-paper);
}

.karachi-elementary-editorial__copy {
  max-width: 800px;
}

.karachi-elementary-editorial__copy p {
  color: var(--karachi-elementary-muted);
}

.karachi-elementary-editorial__copy p + p {
  margin-top: 20px;
}

/* STAMP connection statement: the About Vision word-by-word scroll treatment. */
.karachi-elementary-disciplines {
  background: var(--karachi-elementary-forest);
  color: var(--karachi-elementary-cream);
}

.karachi-elementary-page .karachi-elementary-disciplines__statement {
  max-width: 1200px;
  font-size: clamp(34px, 4.8vw, 73px);
  line-height: 1.3;
  letter-spacing: -0.045em;
}

.karachi-elementary-disciplines__word {
  opacity: 0.2;
  transition: opacity 200ms ease;
}

.karachi-elementary-disciplines__word.is-lit {
  opacity: 1;
}

.karachi-elementary-disciplines__accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .karachi-elementary-disciplines__word {
    opacity: 1;
    transition: none;
  }
}

/* STAMP: retain chapter midpoint calculation and photo crossfade. */
.karachi-elementary-approach {
  gap: 8%;
}

.karachi-elementary-approach p + p {
  margin-top: 16px;
}

.karachi-elementary-chapters__photo {
  top: 0;
  height: 100svh;
  min-height: 530px;
}

.karachi-elementary-chapter {
  min-height: 78svh;
  padding-block: 65px;
}

.karachi-elementary-chapter__copy h3 {
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.2;
}

.karachi-elementary-chapter__copy p {
  margin-top: 20px;
}

.karachi-elementary-cta .karachi-elementary-actions {
  justify-content: center;
}

.karachi-elementary-cta .karachi-elementary-button {
  min-height: 52px;
}

@media (max-width: 1000px) {
  .karachi-elementary-editorial {
    gap: 6%;
  }

  .karachi-elementary-split__copy {
    padding-inline: 35px;
  }
}

@media (max-width: 760px) {
  .karachi-elementary-page .karachi-elementary-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  }

  .karachi-elementary-hero__copy {
    padding-block: 64px;
  }

  .karachi-elementary-hero__lead {
    font-size: 18px;
  }

  .karachi-elementary-section {
    padding-block: 60px;
  }

  .karachi-elementary-split,
  .karachi-elementary-editorial {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .karachi-elementary-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.4;
  }

  .karachi-elementary-split__copy {
    padding: 42px var(--karachi-elementary-gutter) 50px;
  }

  .karachi-elementary-split__copy p:not(.karachi-elementary-eyebrow) {
    font-size: 15px;
  }

  .karachi-elementary-editorial {
    gap: 28px;
  }

  .karachi-elementary-editorial .karachi-elementary-sticky {
    position: static;
  }

  .karachi-elementary-chapters__photo {
    display: none;
  }

  .karachi-elementary-chapter {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .karachi-elementary-chapter__copy {
    padding: 38px var(--karachi-elementary-gutter) 50px;
  }

  .karachi-elementary-chapter__copy h3 {
    font-size: 32px;
  }
}

@media (max-width: 380px) {
  .karachi-elementary-hero h1 {
    font-size: 40px;
  }
}

/* Banner statement and Head/Heart/Hands editorial treatment. */
.karachi-elementary-hero-statement {
  margin-top: 28px;
  font-size: clamp(18px, 1.65vw, 23px);
  line-height: 1.5;
  color: var(--karachi-elementary-cream);
}
.karachi-elementary-hero-statement p {
  margin: 0;
}
.karachi-elementary-cta.karachi-elementary-whole-child {
  background: var(--karachi-elementary-cream);
  color: var(--karachi-elementary-ink);
}
.karachi-elementary-three-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1100px;
  margin-inline: auto;
}
.karachi-elementary-pillar {
  padding: 15px 25px;
  text-align: center;
}
.karachi-elementary-pillar + .karachi-elementary-pillar {
  border-left: 1px solid #173d3140;
}
.karachi-elementary-pillar h2 {
  font-size: clamp(32px, 4.3vw, 64px);
  letter-spacing: -0.05em;
  line-height: 1.15;
  margin: 0;
}
.karachi-elementary-pillar:nth-child(2) h2 {
  color: var(--karachi-elementary-forest);
}
.karachi-elementary-whole-child .karachi-elementary-pillar p {
  margin-top: 18px;
  color: var(--karachi-elementary-muted);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.karachi-elementary-whole-child p.karachi-elementary-whole-child-description {
  max-width: 950px;
  margin: 54px auto 0;
  color: var(--karachi-elementary-muted);
  text-align: center;
  font-size: 17px;
  line-height: 1.8;
}
.karachi-elementary-page
  .karachi-elementary-whole-child
  a.karachi-elementary-button {
  background: var(--karachi-elementary-green);
  color: white;
}
.karachi-elementary-page
  .karachi-elementary-whole-child
  a.karachi-elementary-button--outline {
  background: transparent;
  border-color: var(--karachi-elementary-forest);
  color: var(--karachi-elementary-forest);
}
.karachi-elementary-page
  .karachi-elementary-whole-child
  a.karachi-elementary-button:hover {
  background: var(--karachi-elementary-forest);
  color: white;
}
.karachi-elementary-whole-child a:focus-visible {
  outline-color: var(--karachi-elementary-green);
}
@media (max-width: 600px) {
  .karachi-elementary-pillar {
    padding: 12px 8px;
  }
  .karachi-elementary-pillar h2 {
    font-size: clamp(25px, 7.3vw, 38px);
  }
  .karachi-elementary-whole-child .karachi-elementary-pillar p {
    font-size: 8px;
    letter-spacing: 0.08em;
    margin-top: 12px;
  }
  .karachi-elementary-whole-child p.karachi-elementary-whole-child-description {
    font-size: 15px;
    margin-top: 34px;
  }
}

/* Project-based learning and Head/Heart/Hands form one continuous section. */
.karachi-elementary-projects {
  row-gap: clamp(60px, 6vw, 90px);
}
.karachi-elementary-projects .karachi-elementary-whole-child {
  grid-column: 1 / -1;
  background: var(--karachi-elementary-paper);
  padding: 0;
}

/*elementary end*/

/*middle-years*/
/* 02. Theme, typography, and foundation ----------------------------------- */
.karachi-middle-page {
  --karachi-middle-cream: #fff7ed;
  --karachi-middle-paper: #fffbf5;
  --karachi-middle-sage: #f0f0df;
  --karachi-middle-forest: #173d31;
  --karachi-middle-green: #287b30;
  --karachi-middle-lime: #e6ec9b;
  --karachi-middle-ink: #2f2f2f;
  --karachi-middle-muted: #64675f;
  --karachi-middle-line: #cbd1be;
  --karachi-middle-gutter: clamp(22px, 5vw, 88px);
  --karachi-middle-size-subheading: clamp(22px, 2vw, 30px);
  margin: 0;
  background: var(--karachi-middle-cream);
  color: var(--karachi-middle-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.karachi-middle-page *,
.karachi-middle-page *::before,
.karachi-middle-page *::after {
  box-sizing: border-box;
}

.karachi-middle-page main {
  overflow-x: clip;
}

.karachi-middle-page :where(h1, h2, h3, p, figure) {
  margin: 0;
}

.karachi-middle-page :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

.karachi-middle-page h2 {
  font-size: var(--karachi-middle-size-heading);
}

.karachi-middle-page h3 {
  font-size: var(--karachi-middle-size-subheading);
}

.karachi-middle-page :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.karachi-middle-page a {
  color: inherit;
  text-decoration: none;
}

.karachi-middle-page :where(a, button):focus-visible {
  outline: 3px solid var(--karachi-middle-green);
  outline-offset: 4px;
}

.karachi-middle-page ::selection {
  background: var(--karachi-middle-lime);
  color: var(--karachi-middle-forest);
}

.karachi-middle-section {
  padding: clamp(75px, 8vw, 140px) var(--karachi-middle-gutter);
}

.karachi-middle-eyebrow {
  margin-bottom: 22px;
  color: var(--karachi-middle-green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.karachi-middle-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--karachi-middle-green);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  transition: background 200ms ease, transform 200ms ease;
}

.karachi-middle-page a.karachi-middle-button {
  color: var(--karachi-middle-cream);
}

.karachi-middle-button:hover {
  background: var(--karachi-middle-forest);
  transform: translateY(-2px);
}

.karachi-middle-actions {
  margin-top: 32px;
}

/* 03. Full-screen photographic hero --------------------------------------- */
.karachi-middle-hero {
  position: relative;
  display: flex;
  min-height: 740px;
  height: 100svh;
  max-height: 1100px;
  overflow: hidden;
  background: var(--karachi-middle-forest);
  color: var(--karachi-middle-cream);
}

.karachi-middle-hero__media {
  position: absolute;
  inset: 0;
}

/* The photograph is slightly oversized so it can drift with the scroll. */
.karachi-middle-hero__media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: center 43%;
  will-change: transform;
}

.karachi-middle-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 42%, #09221845 80%),
    linear-gradient(0deg, #071a1480, transparent 60%);
}

.karachi-middle-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 64px var(--karachi-middle-gutter);
}

.karachi-middle-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.karachi-middle-stage {
  color: var(--karachi-middle-lime);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.karachi-middle-hero h1 {
  font-size: var(--karachi-middle-size-hero);
}

.karachi-middle-hero__lead {
  margin-top: 25px;
  color: #f0f2e8;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.karachi-middle-hero a:focus-visible {
  outline-color: var(--karachi-middle-lime);
}

.karachi-middle-split__photo img {
  transition: transform 900ms ease;
}

.karachi-middle-split:hover .karachi-middle-split__photo img {
  transform: scale(1.03);
}

.karachi-middle-split__copy .karachi-middle-emphasis {
  padding-top: 22px;
  border-top: 1px solid var(--karachi-middle-line);
  color: var(--karachi-middle-green);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.45;
}

/* Copy starts level with the top of the photograph. */
.karachi-middle-split--top .karachi-middle-split__copy {
  align-self: start;
}

/* Scroll-derived typewriter: hidden characters keep their space. */
.karachi-middle-typing .karachi-middle-type-letter {
  visibility: hidden;
}

.karachi-middle-typing .karachi-middle-type-letter.written {
  visibility: visible;
}

.karachi-middle-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 05. The discipline examples lead into a scroll-revealed statement. */
.karachi-middle-page
  .karachi-middle-split__copy
  .karachi-middle-overview__examples {
  margin-top: 32px;
}

.karachi-middle-disciplines {
  background: var(--karachi-middle-forest);
  color: var(--karachi-middle-cream);
}

.karachi-middle-page .karachi-middle-disciplines__statement {
  max-width: 1200px;
  font-size: clamp(34px, 4.8vw, 73px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.3;
}

/* Whole words appear at their scroll position; hidden words retain their space. */
.karachi-middle-word-reveal .karachi-middle-disciplines__word {
  display: inline-block;
  visibility: hidden;
}

.karachi-middle-word-reveal .karachi-middle-disciplines__word.is-written {
  visibility: visible;
}

/* 07. Centred section headings --------------------------------------------- */
.karachi-middle-heading {
  max-width: 990px;
  margin: 0 auto clamp(42px, 6vw, 76px);
  text-align: center;
}

.karachi-middle-heading p:not(.karachi-middle-eyebrow) {
  max-width: 800px;
  margin: 22px auto 0;
  color: var(--karachi-middle-muted);
}

.karachi-middle-heading p:not(.karachi-middle-eyebrow) + p {
  margin-top: 8px;
}

/* 08. Foundations cards ---------------------------------------------------- */
.karachi-middle-foundations {
  background: var(--karachi-middle-paper);
}

.karachi-middle-foundations__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
}

.karachi-middle-foundations__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 4px 42px 4px 4px;
  background: var(--karachi-middle-sage);
  transition: transform 300ms ease, background 300ms ease;
}

.karachi-middle-foundations__card:hover {
  background: var(--karachi-middle-lime);
  transform: translateY(-6px);
}

.karachi-middle-foundations__card h3 {
  margin-bottom: 15px;
  color: var(--karachi-middle-forest);
}

.karachi-middle-foundations__card p {
  color: var(--karachi-middle-muted);
  font-size: 15px;
}

/* 09. Senior Years readiness: closing statement and next steps. */
.karachi-middle-cta {
  background: var(--karachi-middle-forest);
  color: var(--karachi-middle-cream);
}

.karachi-middle-cta .karachi-middle-actions {
  justify-content: center;
  margin-top: 38px;
}

.karachi-middle-cta .karachi-middle-button {
  background: var(--karachi-middle-lime);
}

.karachi-middle-page .karachi-middle-cta a.karachi-middle-button {
  color: var(--karachi-middle-forest);
}

.karachi-middle-cta .karachi-middle-button--outline {
  border-color: #ffffff70;
  background: transparent;
}

.karachi-middle-page .karachi-middle-cta a.karachi-middle-button--outline {
  color: var(--karachi-middle-cream);
}

.karachi-middle-cta .karachi-middle-button:hover {
  background: var(--karachi-middle-cream);
}

.karachi-middle-page
  .karachi-middle-cta
  a.karachi-middle-button--outline:hover {
  color: var(--karachi-middle-forest);
}

.karachi-middle-cta a:focus-visible {
  outline-color: var(--karachi-middle-lime);
}

/* 10. Scroll reveals and reduced-motion fallback --------------------------- */
.karachi-middle-motion .karachi-middle-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.karachi-middle-motion .karachi-middle-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.karachi-middle-motion
  .karachi-middle-foundations__grid
  .karachi-middle-reveal:nth-child(2) {
  transition-delay: 100ms;
}

.karachi-middle-motion
  .karachi-middle-foundations__grid
  .karachi-middle-reveal:nth-child(3) {
  transition-delay: 200ms;
}

/* Hover lift must not wait for the reveal delay. */
.karachi-middle-motion .karachi-middle-foundations__card.is-visible {
  transition: transform 300ms ease, border-color 300ms ease,
    background 300ms ease, opacity 650ms ease;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .karachi-middle-motion .karachi-middle-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .karachi-middle-word-reveal .karachi-middle-disciplines__word {
    visibility: visible;
  }

  .karachi-middle-typing .karachi-middle-type-letter {
    visibility: visible;
  }

  .karachi-middle-hero__media img {
    transform: none !important;
  }

  .karachi-middle-button,
  .karachi-middle-foundations__card,
  .karachi-middle-split__photo img {
    transition: none;
  }
}

/* 11. Responsive ----------------------------------------------------------- */
@media (max-width: 960px) {
  .karachi-middle-hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  }
}

@media (max-width: 760px) {
  .karachi-middle-page {
    font-size: 15px;
  }

  .karachi-middle-section {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .karachi-middle-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  }

  .karachi-middle-hero__copy {
    padding-top: 60px;
    padding-bottom: 70px;
  }

  .karachi-middle-breadcrumb {
    margin-bottom: 28px;
    font-size: 10px;
  }

  .karachi-middle-hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
  }

  .karachi-middle-hero__lead {
    font-size: 21px;
  }

  .karachi-middle-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922188f),
      linear-gradient(0deg, #071a1499, transparent);
  }

  .karachi-middle-split,
  .karachi-middle-foundations__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .karachi-middle-split--reverse .karachi-middle-split__photo {
    order: 0;
  }

  .karachi-middle-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.5;
  }

  .karachi-middle-split__copy {
    padding: 45px var(--karachi-middle-gutter) 55px;
  }

  .karachi-middle-foundations__card {
    min-height: 0;
  }

  .karachi-middle-actions .karachi-middle-button {
    width: 100%;
  }
}

/* Page-specific composition polish. All selectors belong to this page only. */
.karachi-middle-page {
  --karachi-middle-header: 0px;
  --karachi-middle-size-hero: clamp(44px, 5.1vw, 78px);
  --karachi-middle-size-heading: clamp(34px, 3.7vw, 56px);
}

.karachi-middle-page main {
  padding-top: 0;
}

.karachi-middle-section {
  padding-block: clamp(65px, 7vw, 110px);
}

.karachi-middle-page p {
  overflow-wrap: break-word;
}

.karachi-middle-page [hidden] {
  display: none !important;
}

.karachi-middle-page .karachi-middle-hero {
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
}

.karachi-middle-hero__copy {
  max-width: 1512px;
  margin-inline: auto;
}

.karachi-middle-hero h1 {
  max-width: 1000px;
}

.karachi-middle-hero__lead {
  max-width: 730px;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}

.karachi-middle-breadcrumb {
  margin-bottom: 26px;
}

.karachi-middle-stage {
  margin-bottom: 18px;
}

/* Full-width body grid: consistent photographic splits and readable copy. */
.karachi-middle-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.karachi-middle-split__photo {
  margin: 0;
  overflow: hidden;
  background: var(--karachi-middle-sage);
}

.karachi-middle-split__photo img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.karachi-middle-split__copy {
  align-self: center;
  padding: clamp(45px, 5vw, 80px);
}

.karachi-middle-split__copy p:not(.karachi-middle-eyebrow) {
  margin-top: 20px;
  color: var(--karachi-middle-muted);
}

.karachi-middle-split__copy .karachi-middle-eyebrow {
  margin-bottom: 17px;
}

.karachi-middle-split--reverse {
  background: var(--karachi-middle-sage);
}

.karachi-middle-split--reverse .karachi-middle-split__photo {
  order: 2;
}

.karachi-middle-split__copy .karachi-middle-actions {
  margin-top: 28px;
}

.karachi-middle-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* Middle overview: a small stage label leads directly into the source copy. */
.karachi-middle-page .karachi-middle-overview__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.5;
}

.karachi-middle-foundations__card {
  min-height: 300px;
  padding: 36px 30px;
}

@media (max-width: 1000px) {
  .karachi-middle-split__copy {
    padding-inline: 35px;
  }
}

@media (max-width: 760px) {
  .karachi-middle-page .karachi-middle-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  }

  .karachi-middle-hero__copy {
    padding-block: 64px;
  }

  .karachi-middle-hero__lead {
    font-size: 18px;
  }

  .karachi-middle-section {
    padding-block: 60px;
  }

  .karachi-middle-split--reverse .karachi-middle-split__photo {
    order: 0;
  }

  .karachi-middle-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.4;
  }

  .karachi-middle-split__copy {
    padding: 42px var(--karachi-middle-gutter) 50px;
  }

  .karachi-middle-split__copy p:not(.karachi-middle-eyebrow) {
    font-size: 15px;
  }

  .karachi-middle-foundations__card {
    min-height: 0;
  }
}

@media (max-width: 380px) {
  .karachi-middle-hero h1 {
    font-size: 40px;
  }
}

/* Middle Years stage heading, featured examples and connected conclusion. */
.karachi-middle-page .karachi-middle-overview__title {
  font-size: var(--karachi-middle-size-heading);
  line-height: 1.14;
  letter-spacing: -0.045em;
  text-transform: none;
  color: var(--karachi-middle-ink);
  margin-bottom: 24px;
}
.karachi-middle-page
  .karachi-middle-split__copy
  .karachi-middle-overview__examples
  p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--karachi-middle-forest);
  margin-top: 18px;
}
.karachi-middle-overview__examples mark {
  background: var(--karachi-middle-lime);
  color: var(--karachi-middle-forest);
  padding: 3px 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.karachi-middle-page .karachi-middle-disciplines__statement {
  font-size: calc(clamp(34px, 4.8vw, 73px) - 3px);
}
.karachi-middle-page .karachi-middle-disciplines {
  padding-block: clamp(42px, 4.5vw, 72px);
}
.karachi-middle-split__copy .karachi-middle-readiness p {
  font-size: 20px;
  font-weight: 600;
  color: var(--karachi-middle-forest);
  line-height: 1.6;
}
.karachi-middle-readiness .karachi-middle-actions {
  justify-content: flex-start;
  margin-top: 30px;
}
.karachi-middle-readiness .karachi-middle-button--outline {
  border-color: var(--karachi-middle-forest);
  background: transparent;
  color: var(--karachi-middle-forest);
}
.karachi-middle-readiness .karachi-middle-button--outline:hover {
  background: var(--karachi-middle-forest);
  color: var(--karachi-middle-cream);
}
@media (max-width: 760px) {
  .karachi-middle-page
    .karachi-middle-split__copy
    .karachi-middle-overview__examples
    p {
    font-size: 16px;
  }
  .karachi-middle-page .karachi-middle-split__copy .karachi-middle-readiness p {
    font-size: 18px;
  }
  .karachi-middle-page .karachi-middle-disciplines {
    padding-block: 40px;
  }
}
.karachi-middle-page
  .karachi-middle-readiness
  a.karachi-middle-button--outline {
  color: var(--karachi-middle-forest);
}
.karachi-middle-page
  .karachi-middle-readiness
  a.karachi-middle-button--outline:hover {
  color: var(--karachi-middle-cream);
}

/* Final statement scale: 30% smaller than the previously approved size. */
.karachi-middle-page .karachi-middle-disciplines__statement {
  font-size: calc((clamp(34px, 4.8vw, 73px) - 3px) * 0.7);
}
.karachi-middle-page .karachi-middle-disciplines {
  padding-block: clamp(29.4px, 3.15vw, 50.4px);
}
.karachi-middle-foundations .karachi-middle-eyebrow {
  font-size: 13.2px;
  font-weight: 600;
}
.karachi-middle-foundations .karachi-middle-eyebrow strong {
  font-weight: 700;
}
@media (max-width: 760px) {
  .karachi-middle-page .karachi-middle-disciplines {
    padding-block: 28px;
  }
}


/*middle-years-end*/

/*senior-years*/
.karachi-senior-page {
  --karachi-senior-cream: #fff7ed;
  --karachi-senior-paper: #fffbf5;
  --karachi-senior-sage: #f0f0df;
  --karachi-senior-forest: #173d31;
  --karachi-senior-green: #287b30;
  --karachi-senior-lime: #e6ec9b;
  --karachi-senior-ink: #2f2f2f;
  --karachi-senior-muted: #64675f;
  --karachi-senior-line: #cbd1be;
  --karachi-senior-gutter: clamp(22px, 5vw, 88px);
  --karachi-senior-size-subheading: clamp(22px, 2vw, 30px);
  margin: 0;
  background: var(--karachi-senior-cream);
  color: var(--karachi-senior-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.karachi-senior-page *,
.karachi-senior-page *::before,
.karachi-senior-page *::after {
  box-sizing: border-box;
}

.karachi-senior-page :where(h1, h2, h3, p, figure) {
  margin: 0;
}

.karachi-senior-page :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

.karachi-senior-page h2 {
  font-size: var(--karachi-senior-size-heading);
}

.karachi-senior-page h3 {
  font-size: var(--karachi-senior-size-subheading);
}

.karachi-senior-page :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.karachi-senior-page a {
  color: inherit;
  text-decoration: none;
}

.karachi-senior-page :where(a, button, summary):focus-visible {
  outline: 3px solid var(--karachi-senior-green);
  outline-offset: 4px;
}

.karachi-senior-page ::selection {
  background: var(--karachi-senior-lime);
  color: var(--karachi-senior-forest);
}

.karachi-senior-section {
  padding: clamp(75px, 8vw, 140px) var(--karachi-senior-gutter);
}

.karachi-senior-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--karachi-senior-green);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.karachi-senior-page a.karachi-senior-button {
  color: var(--karachi-senior-cream);
}

.karachi-senior-button:hover {
  background: var(--karachi-senior-forest);
}

/* 03. Full-screen photographic hero --------------------------------------- */
.karachi-senior-hero {
  position: relative;
  display: flex;
  min-height: 740px;
  height: calc(100svh - var(--karachi-senior-header));
  max-height: 1100px;
  overflow: hidden;
  background: var(--karachi-senior-forest);
  color: var(--karachi-senior-cream);
}

.karachi-senior-hero__media {
  position: absolute;
  inset: 0;
}

.karachi-senior-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.karachi-senior-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 42%, #09221845 80%),
    linear-gradient(0deg, #071a1480, transparent 60%);
}

.karachi-senior-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 64px var(--karachi-senior-gutter);
}

.karachi-senior-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.karachi-senior-stage {
  color: var(--karachi-senior-lime);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.karachi-senior-hero h1 {
  font-size: var(--karachi-senior-size-hero);
}

.karachi-senior-hero__lead {
  margin-top: 25px;
  color: #f0f2e8;
}

.karachi-senior-split__copy p {
  margin-top: 25px;
  color: var(--karachi-senior-muted);
}

.karachi-senior-sticky {
  position: sticky;
  top: calc(var(--karachi-senior-header) + 40px);
  align-self: start;
}

.karachi-senior-sticky p,

/* 07. Native FAQ disclosures ---------------------------------------------- */
/* Closing action band ----------------------------------------------------- */
.karachi-senior-cta {
  background: var(--karachi-senior-forest);
  color: var(--karachi-senior-cream);
}

.karachi-senior-cta h2 {
  max-width: 920px;
}

.karachi-senior-cta p {
  margin-top: 25px;
  color: #e1e8de;
}

.karachi-senior-actions {
  margin-top: 32px;
}

.karachi-senior-cta .karachi-senior-button {
  background: var(--karachi-senior-lime);
}

.karachi-senior-page .karachi-senior-cta a.karachi-senior-button {
  color: var(--karachi-senior-forest);
}

.karachi-senior-cta .karachi-senior-button:hover {
  background: var(--karachi-senior-cream);
}

.karachi-senior-cta .karachi-senior-button--outline {
  border-color: #ffffff70;
  background: transparent;
}

.karachi-senior-page .karachi-senior-cta a.karachi-senior-button--outline {
  color: var(--karachi-senior-cream);
}

.karachi-senior-page
  .karachi-senior-cta
  a.karachi-senior-button--outline:hover {
  color: var(--karachi-senior-forest);
}

.karachi-senior-cta a:focus-visible {
  outline-color: var(--karachi-senior-lime);
}

/* Scroll reveals and reduced-motion fallback ------------------------------ */
.karachi-senior-motion .karachi-senior-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.karachi-senior-motion .karachi-senior-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .karachi-senior-motion .karachi-senior-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Responsive typography and hero ----------------------------------------- */
@media (max-width: 1320px) {
  .karachi-senior-page {
    --karachi-senior-header: 84px;
  }
}

@media (max-width: 960px) {
  .karachi-senior-hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  }
}

@media (max-width: 760px) {
  .karachi-senior-page {
    --karachi-senior-header: 80px;
    font-size: 15px;
  }

  .karachi-senior-section {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .karachi-senior-hero {
    height: auto;
    min-height: calc(100svh - var(--karachi-senior-header));
    max-height: none;
  }

  .karachi-senior-hero__copy {
    padding-top: 60px;
    padding-bottom: 70px;
  }

  .karachi-senior-breadcrumb {
    margin-bottom: 28px;
    font-size: 10px;
  }

  .karachi-senior-hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
  }

  .karachi-senior-hero__lead {
    font-size: 14px;
  }

  .karachi-senior-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922188f),
      linear-gradient(0deg, #071a1499, transparent);
  }
}

@media (max-width: 760px) {
  .karachi-senior-split {
    gap: 0;
  }

  .karachi-senior-split--reverse .karachi-senior-split__photo {
    order: 0;
  }

  .karachi-senior-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.5;
  }

  .karachi-senior-split__copy {
    padding: 45px var(--karachi-senior-gutter) 55px;
  }

  .karachi-senior-sticky {
    position: static;
  }

  .karachi-senior-gallery img {
    aspect-ratio: 1.5;
  }
}

/* Page-specific composition polish. All selectors belong to this page only. */
.karachi-senior-page {
  --karachi-senior-header: 0px;
  --karachi-senior-size-hero: clamp(44px, 5.1vw, 78px);
  --karachi-senior-size-heading: clamp(34px, 3.7vw, 56px);
}

.karachi-senior-page main {
  padding-top: 0;
}

.karachi-senior-section {
  padding-block: clamp(65px, 7vw, 110px);
}

.karachi-senior-page p {
  overflow-wrap: break-word;
}

.karachi-senior-page [hidden] {
  display: none !important;
}

.karachi-senior-page .karachi-senior-hero {
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
}

.karachi-senior-hero__copy {
  max-width: 1512px;
  margin-inline: auto;
}

.karachi-senior-hero h1 {
  max-width: 1000px;
}

.karachi-senior-hero__lead {
  max-width: 730px;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}

.karachi-senior-breadcrumb {
  margin-bottom: 26px;
}

.karachi-senior-stage {
  margin-bottom: 18px;
}

/* Full-width body grid: consistent photographic splits and readable copy. */
.karachi-senior-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.karachi-senior-split__photo {
  margin: 0;
  overflow: hidden;
  background: var(--karachi-senior-sage);
}

.karachi-senior-split__photo img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.karachi-senior-split__copy {
  align-self: center;
  padding: clamp(45px, 5vw, 80px);
}

.karachi-senior-split__copy p:not(.karachi-senior-eyebrow) {
  margin-top: 20px;
  color: var(--karachi-senior-muted);
}

.karachi-senior-split__copy .karachi-senior-eyebrow {
  margin-bottom: 17px;
}

.karachi-senior-split--reverse {
  background: var(--karachi-senior-sage);
}

.karachi-senior-split--reverse .karachi-senior-split__photo {
  order: 2;
}

.karachi-senior-split__copy .karachi-senior-actions {
  margin-top: 28px;
}

.karachi-senior-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* Long source copy remains complete, arranged around a sticky introduction. */
.karachi-senior-editorial {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10%;
  background: var(--karachi-senior-paper);
}

.karachi-senior-editorial__copy {
  max-width: 800px;
}

.karachi-senior-editorial__copy p {
  color: var(--karachi-senior-muted);
}

.karachi-senior-editorial__copy p + p {
  margin-top: 20px;
}

.karachi-senior-editorial--dark {
  background: var(--karachi-senior-forest);
  color: var(--karachi-senior-cream);
}

.karachi-senior-editorial--dark p {
  color: #e1e8de;
}

.karachi-senior-editorial--dark .karachi-senior-sticky {
  top: 40px;
}

.karachi-senior-editorial--dark .karachi-senior-sticky p {
  color: #e1e8de;
}

/* Senior: academic highlight and application choices. */
.karachi-senior-academic-highlight {
  background: var(--karachi-senior-sage);
  text-align: center;
}

.karachi-senior-academic-highlight h2 {
  margin-top: 18px;
  color: var(--karachi-senior-green);
}

/* Keep words intact while letters resolve from motion blur. */
.karachi-senior-blur-word {
  display: inline-block;
  white-space: nowrap;
}
.karachi-senior-blur-letter {
  display: inline-block;
}
.is-blur-pending .karachi-senior-blur-letter {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .is-blur-pending .karachi-senior-blur-letter {
    opacity: 1;
  }
}

.karachi-senior-academic-highlight > p:last-child {
  margin-top: 20px;
  color: var(--karachi-senior-muted);
}

.karachi-senior-cta .karachi-senior-actions {
  justify-content: center;
}

.karachi-senior-cta .karachi-senior-button {
  min-height: 52px;
}

@media (max-width: 1000px) {
  .karachi-senior-editorial {
    gap: 6%;
  }

  .karachi-senior-split__copy {
    padding-inline: 35px;
  }
}

@media (max-width: 760px) {
  .karachi-senior-page .karachi-senior-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  }

  .karachi-senior-hero__copy {
    padding-block: 64px;
  }

  .karachi-senior-hero__lead {
    font-size: 18px;
  }

  .karachi-senior-section {
    padding-block: 60px;
  }

  .karachi-senior-split,
  .karachi-senior-editorial {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .karachi-senior-split--reverse .karachi-senior-split__photo {
    order: 0;
  }

  .karachi-senior-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.4;
  }

  .karachi-senior-split__copy {
    padding: 42px var(--karachi-senior-gutter) 50px;
  }

  .karachi-senior-split__copy p:not(.karachi-senior-eyebrow) {
    font-size: 15px;
  }

  .karachi-senior-editorial {
    gap: 28px;
  }

  .karachi-senior-editorial .karachi-senior-sticky {
    position: static;
  }
}

@media (max-width: 380px) {
  .karachi-senior-hero h1 {
    font-size: 40px;
  }
}

/* Approved qualification arc component from Learning Journey. */
.karachi-senior-qualifications {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 30px;
  gap: 12px;
}
.senior-qualification {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 174px;
  --senior-qualification-accent: #e69a09;
}
.senior-qualification + .senior-qualification {
  border-left: 1px solid #173d3112;
  padding-left: 10px;
}
.senior-qualification--oxford {
  --senior-qualification-accent: #287d68;
}
.senior-qualification--edexcel {
  --senior-qualification-accent: #5923b7;
}
.senior-qualification-arc {
  position: absolute;
  left: -8px;
  top: 0;
  height: 174px;
  width: 164px;
  max-width: 100%;
  overflow: visible;
  color: var(--senior-qualification-accent);
}
.senior-qualification-arc path {
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}
.senior-qualification-arc circle {
  fill: currentColor;
}
.senior-qualification-copy {
  position: relative;
  padding-left: 24px;
  z-index: 1;
  font-size: 14px;
  line-height: 1.45;
  color: var(--karachi-senior-ink);
}
.senior-qualification-copy strong {
  display: block;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.035em;
  color: var(--senior-qualification-accent);
}
.senior-qualification--cambridge .senior-qualification-copy strong {
  font-size: 26px;
}

.senior-qualification + .senior-qualification {
  border-left: 0;
  border-top: 0;
}
.karachi-senior-academic-highlight > p:not(.karachi-senior-eyebrow) {
  margin-top: 20px;
  color: var(--karachi-senior-muted);
}
.karachi-senior-academic-highlight .karachi-senior-actions {
  justify-content: center;
  margin-top: 32px;
}
.karachi-senior-page
  .karachi-senior-academic-highlight
  a.karachi-senior-button--outline {
  background: transparent;
  border-color: var(--karachi-senior-forest);
  color: var(--karachi-senior-forest);
}
.karachi-senior-page
  .karachi-senior-academic-highlight
  a.karachi-senior-button--outline:hover {
  background: var(--karachi-senior-forest);
  color: var(--karachi-senior-cream);
}
@media (max-width: 1100px) and (min-width: 761px) {
  .karachi-senior-qualifications {
    grid-template-columns: 1fr;
  }
  .senior-qualification {
    min-height: 158px;
  }
  .senior-qualification + .senior-qualification {
    padding-left: 0;
  }
  .senior-qualification-arc {
    height: 158px;
  }
  .senior-qualification-copy {
    padding-left: 38px;
    max-width: 90%;
  }
}
@media (max-width: 760px) {
  .senior-qualification-copy {
    font-size: 13px;
    padding-left: 22px;
  }
  .senior-qualification-copy strong {
    font-size: 18px;
  }
  .senior-qualification--cambridge .senior-qualification-copy strong {
    font-size: 24px;
  }
}
@media (max-width: 480px) {
  .karachi-senior-qualifications {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .senior-qualification {
    min-height: 158px;
  }
  .senior-qualification + .senior-qualification {
    padding-left: 0;
  }
  .senior-qualification-arc {
    height: 158px;
    width: 150px;
  }
  .senior-qualification-copy {
    padding-left: 38px;
    font-size: 15px;
  }
  .senior-qualification-copy strong {
    font-size: 22px;
  }
}

/* Senior results emphasis and restored section label. */
.karachi-senior-split__copy p.karachi-senior-results-statement {
  font-size: 18px;
}
.karachi-senior-editorial--dark
  .karachi-senior-sticky
  p.karachi-senior-multi-board-label {
  margin-top: 0;
  margin-bottom: 22px;
  color: var(--karachi-senior-lime);
}
@media (max-width: 760px) {
  .karachi-senior-split__copy p.karachi-senior-results-statement {
    font-size: 17px;
  }
}



/*senior-years end*/

/*learning-journey-lahore*/
/* 02. Theme, typography, and foundation ----------------------------------- */

.learning-lahore {
  --lj-cream: #fff7ed;
  --lj-paper: #fffbf5;
  --lj-sage: #f0f0df;
  --lj-forest: #173d31;
  --lj-green: #287b30;
  --lj-lime: #e6ec9b;
  --lj-ink: #2f2f2f;
  --lj-muted: #64675f;
  --lj-line: #cbd1be;
  --lj-gutter: clamp(22px, 5vw, 88px);
  --lj-size-subheading: clamp(22px, 2vw, 30px);
  margin: 0;
  background: var(--lj-cream);
  color: var(--lj-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.learning-lahore *, .learning-lahore *::before, .learning-lahore *::after {
  box-sizing: border-box;
}

.learning-lahore :where(h1, h2, h3, p, figure) {
  margin: 0;
}

.learning-lahore :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

.learning-lahore h2 {
  font-size: var(--lj-size-heading);
}

.learning-lahore h3 {
  font-size: var(--lj-size-subheading);
}

.learning-lahore :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.learning-lahore a {
  color: inherit;
  text-decoration: none;
}

.learning-lahore :where(a, button, summary):focus-visible {
  outline: 3px solid var(--lj-green);
  outline-offset: 4px;
}

.learning-lahore ::selection {
  background: var(--lj-lime);
  color: var(--lj-forest);
}

.lj-section {
  padding: clamp(75px, 8vw, 140px) var(--lj-gutter);
}

.lj-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--lj-green);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.learning-lahore a.lj-button {
  color: var(--lj-cream);
}

.lj-button:hover {
  background: var(--lj-forest);
}

/* 03. Full-screen photographic hero --------------------------------------- */

.lj-hero {
  position: relative;
  display: flex;
  min-height: 740px;
  height: calc(100svh - var(--lj-header));
  max-height: 1100px;
  overflow: hidden;
  background: var(--lj-forest);
  color: var(--lj-cream);
}

.lj-hero__media {
  position: absolute;
  inset: 0;
}

.lj-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.lj-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 42%, #09221845 80%), linear-gradient(0deg, #071a1480, transparent 60%);
}

.lj-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 64px var(--lj-gutter);
}

.lj-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lj-stage {
  color: var(--lj-lime);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lj-hero h1 {
  font-size: var(--lj-size-hero);
}

.lj-hero__lead {
  margin-top: 25px;
  color: #f0f2e8;
}

.lj-eyebrow {
  margin-bottom: 19px;
  color: var(--lj-green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Responsive typography and hero ----------------------------------------- */

@media (max-width: 1320px) {
  .learning-lahore {
    --lj-header: 84px;
  
  }
}

@media (max-width: 960px) {
  .lj-hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  
  }
}

@media (max-width: 760px) {
  .learning-lahore {
    --lj-header: 80px;
    font-size: 15px;
  
  }

  .lj-section {
    padding-top: 65px;
    padding-bottom: 65px;
  
  }

  .lj-hero {
    height: auto;
    min-height: calc(100svh - var(--lj-header));
    max-height: none;
  
  }

  .lj-hero__copy {
    padding-top: 60px;
    padding-bottom: 70px;
  
  }

  .lj-breadcrumb {
    margin-bottom: 28px;
    font-size: 10px;
  
  }

  .lj-hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
  
  }

  .lj-hero__lead {
    font-size: 14px;
  
  }

  .lj-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922188f), linear-gradient(0deg, #071a1499, transparent);
  
  }
}

/* Page-specific composition polish. All selectors belong to this page only. */

.learning-lahore {
  --lj-header: 0px;
  --lj-size-hero: clamp(44px, 5.1vw, 78px);
  --lj-size-heading: clamp(34px, 3.7vw, 56px);
}

.learning-lahore main {
  padding-top: 0;
}

.lj-section {
  padding-block: clamp(65px, 7vw, 110px);
}

.learning-lahore p {
  overflow-wrap: break-word;
}

.learning-lahore [hidden] {
  display: none !important;
}

.learning-lahore .lj-hero {
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
}

.lj-hero__copy {
  max-width: 1512px;
  margin-inline: auto;
}

.lj-hero h1 {
  max-width: 1000px;
}

.lj-hero__lead {
  max-width: 730px;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}

.lj-breadcrumb {
  margin-bottom: 26px;
}

.lj-stage {
  margin-bottom: 18px;
}

/* Full-width body grid: consistent photographic splits and readable copy. */

.lj-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.lj-split__photo {
  margin: 0;
  overflow: hidden;
  background: var(--lj-sage);
}

.lj-split__photo img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.lj-split__copy {
  align-self: center;
  padding: clamp(45px, 5vw, 80px);
}

.lj-split__copy p:not(.lj-eyebrow) {
  margin-top: 20px;
  color: var(--lj-muted);
}

.lj-split__copy .lj-eyebrow {
  margin-bottom: 17px;
}

.lj-split--reverse {
  background: var(--lj-sage);
}

.lj-split--reverse .lj-split__photo {
  order: 2;
}

.lj-split__copy .lj-actions {
  margin-top: 28px;
}

.lj-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* Long source copy remains complete, arranged around a sticky introduction. */

.lj-editorial {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
  background: var(--lj-paper);
}

.lj-editorial__copy {
  max-width: 800px;
}

.lj-editorial__copy p {
  color: var(--lj-muted);
}

.lj-editorial__copy p + p {
  margin-top: 20px;
}

.lj-editorial--dark {
  background: var(--lj-forest);
  color: var(--lj-cream);
}

.lj-editorial--dark p {
  color: #e1e8de;
}

.lj-editorial--dark .lj-sticky {
  top: 40px;
}

.lj-editorial--dark .lj-sticky p {
  color: #e1e8de;
}

/* Learning evolves: three sequential, scroll-scrubbed motion-blur statements. */

.lj-evolution {
  display: block;
  overflow-x: clip;
}

.lj-evolution__intro {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
  align-items: start;
}

.lj-evolution__statements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: clamp(32px, 3.5vw, 50px);
}

.lj-evolution__statement {
  margin: 0;
  color: var(--lj-green);
  font-size: clamp(14px, 2vw, 32px);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.25;
}

.lj-evolution__statement--left {
  text-align: left;
}

.lj-evolution__statement--center {
  text-align: center;
}

.lj-evolution__statement--right {
  text-align: right;
}

/* Content-sized spacing keeps the reveals close to the neighbouring sections. */

.learning-lahore .lj-evolution {
  min-height: 0;
  padding-block: clamp(44px, 4vw, 64px);
}

.lj-evolution__word {
  display: inline-block;
  opacity: var(--lj-word-opacity, 1);
  filter: blur(var(--lj-word-blur, 0px));
  transform: translate3d(var(--lj-word-offset, 0px), 0, 0);
  will-change: transform, filter, opacity;
}

@media (max-width: 760px) {
  .lj-evolution__intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
  
  }

  .lj-evolution__statements {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-top: 35px;
  
  }

  .lj-evolution__statement {
    font-size: clamp(18px, 5.6vw, 30px);
  
  }

  .learning-lahore .lj-evolution {
    padding-block: 36px;
  
  }
}

@media (prefers-reduced-motion: reduce) {
  .lj-evolution__word {
    transform: none;
    filter: none;
    opacity: 1;
    will-change: auto;
  
  }
}

.lj-pathway-map {
  --lj-pathway-gap: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lj-pathway-gap);
  background: var(--lj-sage);
}

.lj-pathway-map__card {
  position: relative;
  min-width: 0;
  padding: 46px 16px 24px;
  text-align: center;
}

/* Milestones connect through their centers, from Early Years to Senior Years. */

.lj-pathway-map__card::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lj-green);
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.lj-pathway-map__card::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  width: calc(100% + var(--lj-pathway-gap));
  height: 2px;
  background: var(--lj-green);
  pointer-events: none;
}

.lj-pathway-map__card:last-child::after {
  display: none;
}

.lj-pathway-map__card strong {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.6em;
  color: var(--lj-forest);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -.025em;
}

.lj-pathway-map__card p {
  margin-top: 16px;
  color: var(--lj-muted);
  font-size: 14px;
}

/* Zoom the content independently so pathway markers and connectors stay aligned. */

.lj-pathway-map__content {
  transform-origin: center;
}

@media (min-width: 1001px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lj-pathway-map__content {
    transition: transform 280ms cubic-bezier(.2, .7, .2, 1);
  
  }

  .lj-pathway-map__card:hover .lj-pathway-map__content {
    transform: translateY(-8px) scale(1.12);
  
  }
}

.lj-pathway-map__card .lj-eyebrow {
  display: block;
  margin-bottom: 14px;
}

/* Lift the heading by 4% of viewport height; the description stays in place. */

.lj-cta .lj-cta__title {
  margin-block: -4svh 4svh;
}

.lj-cta .lj-actions {
  justify-content: center;
}

.lj-cta .lj-button {
  min-height: 52px;
}

@media (max-width: 1000px) {
  .lj-pathway-map {
    grid-template-columns: minmax(0, 1fr);
    --lj-pathway-gap: 18px;
  
  }

  .lj-pathway-map__card {
    padding: 22px 42px;
  
  }

  .lj-pathway-map__card::before {
    top: 25px;
    left: 10px;
  
  }

  .lj-pathway-map__card::after {
    top: 34px;
    left: 9px;
    width: 2px;
    height: calc(100% + var(--lj-pathway-gap));
  
  }

  .lj-pathway-map__card strong {
    min-height: 0;
  
  }

  .lj-editorial {
    gap: 6%;
  
  }

  .lj-split__copy {
    padding-inline: 35px;
  
  }
}

@media (max-width: 760px) {
  .learning-lahore .lj-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  
  }

  .lj-hero__copy {
    padding-block: 64px;
  
  }

  .lj-hero__lead {
    font-size: 18px;
  
  }

  .lj-section {
    padding-block: 60px;
  
  }

  .lj-split, .lj-editorial {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  
  }

  .lj-split--reverse .lj-split__photo {
    order: 0;
  
  }

  .lj-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.4;
  
  }

  .lj-split__copy {
    padding: 42px var(--lj-gutter) 50px;
  
  }

  .lj-split__copy p:not(.lj-eyebrow) {
    font-size: 15px;
  
  }

  .lj-editorial {
    gap: 28px;
  
  }

  .lj-editorial .lj-sticky {
    position: static;
  
  }

  .lj-pathway-map {
    --lj-pathway-gap: 14px;
  
  }

  .lj-pathway-map__card {
    padding-inline: 34px;
  
  }

  .lj-pathway-map__card strong {
    font-size: 20px;
  
  }

  .lj-pathway-map__card p {
    font-size: 13px;
  
  }
}

@media (max-width: 380px) {
  .lj-pathway-map {
    grid-template-columns: minmax(0, 1fr);
  
  }

  .lj-hero h1 {
    font-size: 40px;
  
  }
}

/* Source audit and learning-stage emphasis, 20 October 2026. */

.lj-hero-shortcuts {
  margin-top:30px;
  gap:12px
}

.lj-hero-shortcuts .lj-button {
  padding:12px 18px;
  font-size:13px;
  min-height:46px
}

.lj-split__copy .lj-stage-range {
  margin:0 0 22px;
  color:var(--lj-forest);
  font-size:15px;
  font-weight:600;
  letter-spacing:.08em
}

.lj-editorial__copy .lj-feature--questions {
  color:var(--lj-forest);
  font-size:20px;
  line-height:1.7;
  padding-left:20px;
  border-left:3px solid var(--lj-green)
}

.lj-feature--questions strong {
  display:block
}

.lj-cta .lj-actions {
  margin-top:4svh
}

@media(max-width:760px) {
  .lj-hero-shortcuts .lj-button {
    flex:1 1 43%
  
  }

  .lj-editorial__copy .lj-feature--questions {
    font-size:18px
  
  }
}

/* Qualification arc treatment from the approved reference. */

.lj-editorial__copy .lj-feature--questions {
  border-left:0;
  padding-left:0
}

/* Lahore content additions: native scroll, accessible motion and source-specific layouts. */

.learning-lahore .learning-pathway-heading {
  grid-column: 1 / -1;
  margin-bottom: 18px;
}

.learning-lahore .learning-visit-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* Title on the left, the four visit steps in divided columns on the right. */

.learning-lahore .lj-cta > .lj-reveal {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  column-gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.learning-lahore .lj-cta > .lj-reveal > * {
  grid-column: 1 / -1;
}

.learning-lahore .lj-cta > .lj-reveal > .lj-eyebrow {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}

.learning-lahore .lj-cta > .lj-reveal > .lj-cta__title {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 0;
  font-size: var(--lj-size-heading);
}

.learning-lahore .lj-cta > .lj-reveal > .learning-visit-steps {
  grid-column: 2;
  grid-row: 1 / span 2;
  gap: 0;
  margin: 0;
  color: var(--lj-ink);
}

.learning-lahore .learning-visit-steps + p {
  margin-top: clamp(40px, 5vw, 64px);
}

.learning-visit-steps li {
  padding: 10px 22px;
  font-size: 18px;
  line-height: 1.6;
}

.learning-visit-steps li:first-child {
  padding-left: 0;
}

.learning-visit-steps li + li {
  border-left: 1px solid var(--lj-line);
}

.learning-visit-steps li:last-child {
  padding-right: 0;
}

.learning-lahore a {
  text-decoration: none;
}

.learning-lahore [data-learning-word-reveal] {
  font-weight: 600;
}

.learning-lahore .lj-editorial__copy p.learning-assessment-close {
  margin-top: 4px;
  color: var(--lj-green);
  font-size: 20px;
  line-height: 1.7;
}

.learning-lahore .lj-editorial__copy p.lj-feature--questions {
  margin-top: 0;
}

.learning-lahore .lj-editorial__copy p:not(.lj-feature--questions) + p.lj-feature--questions,
.learning-lahore .lj-editorial__copy p.lj-feature--questions + p:not(.lj-feature--questions) {
  margin-top: 20px;
}

.learning-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.learning-word {
  opacity: var(--word-opacity, 1);
}

.learning-motion .learning-enter {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.learning-motion .learning-enter.is-visible {
  opacity: 1;
  transform: none;
}

.learning-motion-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  padding: 10px 16px;
  border: 1px solid #cbd1be;
  border-radius: 24px;
  background: #fffbf5;
  color: #173d31;
  font: 400 12px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
}

@media (max-width: 760px) {
  .learning-lahore .lj-cta > .lj-reveal {
    display: block;
  
  }

  .learning-lahore .lj-editorial__copy p.learning-assessment-close {
    font-size: 18px;
  
  }

  .learning-lahore .lj-cta > .lj-reveal > .learning-visit-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
    margin-top: 32px;
  
  }

  .learning-visit-steps li {
    font-size: 16px;
  
  }

  .learning-visit-steps li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  
  }

  .learning-visit-steps li:nth-child(even) {
    padding-right: 0;
  
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-motion .learning-enter {
    opacity: 1;
    transform: none;
    transition: none;
  
  }
}

.learning-skip:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 12px;
  z-index: 50;
  background: #fffbf5;
}

/* The Lahore closing adds a section label above the main invitation. */

.learning-lahore .lj-cta .lj-cta__title {
  margin: 0 0 30px;
}

.learning-lahore .lj-cta .lj-eyebrow {
  margin-bottom: 20px;
}

.learning-lahore .lj-cta .learning-campus-name {
  margin-top: 24px;
  font-weight: 600;
}

/*end LJL*/
/*preschool-lahore*/
/* 02. Theme, typography, and foundation ----------------------------------- */

.learning-lahore {
  --lj-early-cream: #fff7ed;
  --lj-early-paper: #fffbf5;
  --lj-early-sage: #f0f0df;
  --lj-early-forest: #173d31;
  --lj-early-green: #287b30;
  --lj-early-lime: #e6ec9b;
  --lj-early-ink: #2f2f2f;
  --lj-early-muted: #64675f;
  --lj-early-line: #cbd1be;
  --lj-early-gutter: clamp(22px, 5vw, 88px);
  --lj-early-size-subheading: clamp(22px, 2vw, 30px);
  --lj-elementary-cream: #fff7ed;
  --lj-elementary-paper: #fffbf5;
  --lj-elementary-sage: #f0f0df;
  --lj-elementary-forest: #173d31;
  --lj-elementary-green: #287b30;
  --lj-elementary-lime: #e6ec9b;
  --lj-elementary-ink: #2f2f2f;
  --lj-elementary-muted: #64675f;
  --lj-elementary-line: #cbd1be;
  --lj-elementary-gutter: clamp(22px, 5vw, 88px);
  --lj-elementary-size-subheading: clamp(22px, 2vw, 30px);
  margin: 0;
  background: var(--lj-elementary-cream);
  color: var(--lj-elementary-ink);

  --lj-middle-cream: #fff7ed;
  --lj-middle-paper: #fffbf5;
  --lj-middle-sage: #f0f0df;
  --lj-middle-forest: #173d31;
  --lj-middle-green: #287b30;
  --lj-middle-lime: #e6ec9b;
  --lj-middle-ink: #2f2f2f;
  --lj-middle-muted: #64675f;
  --lj-middle-line: #cbd1be;
  --lj-middle-gutter: clamp(22px, 5vw, 88px);
  --lj-middle-size-subheading: clamp(22px, 2vw, 30px);
  margin: 0;
  background: var(--lj-middle-cream);
  color: var(--lj-middle-ink);


  --lj-senior-cream: #fff7ed;
  --lj-senior-paper: #fffbf5;
  --lj-senior-sage: #f0f0df;
  --lj-senior-forest: #173d31;
  --lj-senior-green: #287b30;
  --lj-senior-lime: #e6ec9b;
  --lj-senior-ink: #2f2f2f;
  --lj-senior-muted: #64675f;
  --lj-senior-line: #cbd1be;
  --lj-senior-gutter: clamp(22px, 5vw, 88px);
  --lj-senior-size-subheading: clamp(22px, 2vw, 30px);
  margin: 0;
  background: var(--lj-senior-cream);
  color: var(--lj-senior-ink);






  margin: 0;
  background: var(--lj-early-cream);
  color: var(--lj-early-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.learning-lahore *, .learning-lahore *::before, .learning-lahore *::after {
  box-sizing: border-box;
}

.learning-lahore :where(h1, h2, h3, p, figure) {
  margin: 0;
}

.learning-lahore :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

.learning-lahore h2 {
  font-size: var(--lj-early-size-heading);
}

.learning-lahore h3 {
  font-size: var(--lj-early-size-subheading);
}

.learning-lahore :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.learning-lahore a {
  color: inherit;
  text-decoration: none;
}

.learning-lahore :where(a, button, summary):focus-visible {
  outline: 3px solid var(--lj-early-green);
  outline-offset: 4px;
}

.learning-lahore ::selection {
  background: var(--lj-early-lime);
  color: var(--lj-early-forest);
}

.lj-early-section {
  padding: clamp(75px, 8vw, 140px) var(--lj-early-gutter);
}

/* 03. Full-screen photographic hero --------------------------------------- */

.lj-early-hero {
  position: relative;
  display: flex;
  min-height: 740px;
  height: calc(100svh - var(--lj-early-header));
  max-height: 1100px;
  overflow: hidden;
  background: var(--lj-early-forest);
  color: var(--lj-early-cream);
}

.lj-early-hero__media {
  position: absolute;
  inset: 0;
}

.lj-early-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.lj-early-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 42%, #09221845 80%), linear-gradient(0deg, #071a1480, transparent 60%);
}

.lj-early-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 64px var(--lj-early-gutter);
}

.lj-early-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lj-early-stage {
  color: var(--lj-early-lime);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lj-early-hero h1 {
  font-size: var(--lj-early-size-hero);
}

/* 04. Approach and native scrolling chapters ------------------------------- */

.lj-early-approach {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  background: var(--lj-early-forest);
  color: var(--lj-early-cream);
}

.lj-early-approach p {
  max-width: 590px;
  color: #e1e8de;
}

.lj-early-chapters__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.lj-early-chapters__photo {
  position: sticky;
  align-self: start;
  overflow: hidden;
  background: var(--lj-early-sage);
}

.lj-early-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 550ms ease;
}

.lj-early-scene.is-active {
  opacity: 1;
}

.lj-early-chapter {
  display: flex;
  align-items: center;
  padding: 70px clamp(35px, 5vw, 90px);
  border-bottom: 1px solid var(--lj-early-line);
}

.lj-early-chapter__copy p {
  max-width: 520px;
  color: var(--lj-early-muted);
}

.lj-early-chapter__copy h3 {
  color: var(--lj-early-forest);
}

.learning-lahore .lj-early-chapter__mobile {
  display: none;
}

.lj-early-sticky {
  position: sticky;
  top: calc(var(--lj-early-header) + 40px);
  align-self: start;
}

.lj-early-sticky p {
  margin-top: 25px;
  color: var(--lj-early-muted);
}

/* Scroll reveals and reduced-motion fallback ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .lj-early-scene {
    transition: none;
  
  }
}

/* Responsive typography and hero ----------------------------------------- */

@media (max-width: 1320px) {
  .learning-lahore {
    --lj-early-header: 84px;
  
  }
}

@media (max-width: 960px) {
  .lj-early-hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  
  }
}

@media (max-width: 760px) {
  .learning-lahore {
    --lj-early-header: 80px;
    font-size: 15px;
  
  }

  .lj-early-section {
    padding-top: 65px;
    padding-bottom: 65px;
  
  }

  .lj-early-hero {
    height: auto;
    min-height: calc(100svh - var(--lj-early-header));
    max-height: none;
  
  }

  .lj-early-hero__copy {
    padding-top: 60px;
    padding-bottom: 70px;
  
  }

  .lj-early-breadcrumb {
    margin-bottom: 28px;
    font-size: 10px;
  
  }

  .lj-early-hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
  
  }

  .lj-early-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922188f), linear-gradient(0deg, #071a1499, transparent);
  
  }
}

@media (max-width: 760px) {
  .lj-early-chapters__grid {
    display: block;
  
  }

  .lj-early-chapters__photo {
    display: none;
  
  }

  .lj-early-chapter {
    display: block;
    min-height: 0;
    padding: 0 0 55px;
  
  }

  .learning-lahore .lj-early-chapter__mobile {
    display: block;
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
  
  }

  .lj-early-chapter__copy {
    padding: 32px var(--lj-early-gutter) 0;
  
  }

  .lj-early-sticky {
    position: static;
  
  }
}

/* Page-specific composition polish. All selectors belong to this page only. */

.learning-lahore {
  --lj-early-header: 0px;
  --lj-early-size-hero: clamp(44px, 5.1vw, 78px);
  --lj-early-size-heading: clamp(34px, 3.7vw, 56px);
}

.learning-lahore main {
  padding-top: 0;
}

.lj-early-section {
  padding-block: clamp(65px, 7vw, 110px);
}

.learning-lahore p {
  overflow-wrap: break-word;
}

.learning-lahore [hidden] {
  display: none !important;
}

.learning-lahore .lj-early-hero {
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
}

.lj-early-hero__copy {
  max-width: 1512px;
  margin-inline: auto;
}

.lj-early-hero h1 {
  max-width: 1000px;
}

.lj-early-breadcrumb {
  margin-bottom: 26px;
}

.lj-early-stage {
  margin-bottom: 18px;
}

/* Full-width body grid: consistent photographic splits and readable copy. */

.lj-early-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.lj-early-split__photo {
  margin: 0;
  overflow: hidden;
  background: var(--lj-early-sage);
}

.lj-early-split__photo img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.lj-early-split__copy {
  align-self: center;
  padding: clamp(45px, 5vw, 80px);
}

.lj-early-split__copy p:not(.lj-early-eyebrow) {
  margin-top: 20px;
  color: var(--lj-early-muted);
}

.lj-early-split__copy .lj-early-eyebrow {
  margin-bottom: 17px;
}

/* Long source copy remains complete, arranged around a sticky introduction. */

.lj-early-editorial {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
  background: var(--lj-early-paper);
}

.lj-early-editorial__copy {
  max-width: 800px;
}

.lj-early-editorial__copy p {
  color: var(--lj-early-muted);
}

.lj-early-editorial__copy p + p {
  margin-top: 20px;
}

.lj-early-editorial--dark {
  background: var(--lj-early-forest);
  color: var(--lj-early-cream);
}

.lj-early-editorial--dark p {
  color: #e1e8de;
}

.lj-early-editorial--dark .lj-early-sticky {
  top: 40px;
}

.lj-early-editorial--dark .lj-early-sticky p {
  color: #e1e8de;
}

/* Early/Elementary: retain chapter midpoint calculation and photo crossfade. */

.lj-early-approach {
  gap: 8%;
}

.lj-early-approach p + p {
  margin-top: 16px;
}

.lj-early-chapters__photo {
  top: 0;
  height: 100svh;
  min-height: 530px;
}

.lj-early-chapter {
  min-height: 78svh;
  padding-block: 65px;
}

.lj-early-chapter__copy .lj-early-chapter__title {
  margin-top: 0;
  margin-bottom: 18px;
  color: var(--lj-early-green);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-early-chapter__copy h3 {
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.2;
}

.lj-early-chapter__copy p {
  margin-top: 20px;
}

/* Builds: skill grid with short coloured accents and vertical dividers. */

.lj-early-chapter__copy .lj-early-builds {
  container: early-builds / inline-size;
  width: 100%;
  margin-top: 28px;
}

.lj-early-builds .lj-early-builds__label {
  margin: 0 0 14px;
  color: var(--lj-early-green);
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 600;
  line-height: 1.5;
}

.lj-early-builds__skills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lj-early-builds__skills li {
  --skill-accent: #f8bc42;
  position: relative;
  min-width: 0;
  padding: 0;
  color: var(--lj-early-forest);
  font-size: clamp(13px, 2.35cqw, 16px);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.lj-early-builds__skills li:not(:nth-child(3n + 1))::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -10px;
  border-left: 1px solid #173d3140;
}

.lj-early-builds__skills li::after {
  content: '';
  display: block;
  width: 52px;
  max-width: 70%;
  height: 3px;
  margin-top: 9px;
  background: var(--skill-accent);
}

.lj-early-builds__skills li:nth-child(6n + 2) {
  --skill-accent: #88af95;
}

.lj-early-builds__skills li:nth-child(6n + 3) {
  --skill-accent: #a584b8;
}

.lj-early-builds__skills li:nth-child(6n + 4) {
  --skill-accent: #f18577;
}

.lj-early-builds__skills li:nth-child(6n + 5) {
  --skill-accent: #67b4e2;
}

.lj-early-builds__skills li:nth-child(6n + 6) {
  --skill-accent: #a89ace;
}

/* Respond to the copy column's width, including the full-width mobile layout. */

@container early-builds (max-width: 480px) {
  .lj-early-builds__skills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
  
  }

  .lj-early-builds__skills li:nth-child(n)::before {
    content: none;
  
  }

  .lj-early-builds__skills li:nth-child(even)::before {
    content: '';
  
  }
}

@media (max-width: 1000px) {
  .lj-early-editorial {
    gap: 6%;
  
  }

  .lj-early-split__copy {
    padding-inline: 35px;
  
  }
}

@media (max-width: 760px) {
  .learning-lahore .lj-early-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  
  }

  .lj-early-hero__copy {
    padding-block: 64px;
  
  }

  .lj-early-section {
    padding-block: 60px;
  
  }

  .lj-early-split, .lj-early-editorial {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  
  }

  .lj-early-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.4;
  
  }

  .lj-early-split__copy {
    padding: 42px var(--lj-early-gutter) 50px;
  
  }

  .lj-early-split__copy p:not(.lj-early-eyebrow) {
    font-size: 15px;
  
  }

  .lj-early-editorial {
    gap: 28px;
  
  }

  .lj-early-editorial .lj-early-sticky {
    position: static;
  
  }

  .lj-early-chapters__photo {
    display: none;
  
  }

  .lj-early-chapter {
    display: block;
    min-height: 0;
    padding: 0;
  
  }

  .lj-early-chapter__copy {
    padding: 38px var(--lj-early-gutter) 50px;
  
  }

  .lj-early-chapter__copy h3 {
    font-size: 32px;
  
  }
}

@media (max-width: 380px) {
  .lj-early-hero h1 {
    font-size: 40px;
  
  }
}

/* Lahore content additions: native scroll, accessible motion and source-specific layouts. */

.learning-lahore .learning-foundations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  background: #f0f0df;
}

.learning-lahore .learning-foundations__card {
  padding-top: 24px;
  border-top: 1px solid #cbd1be;
  text-align: center;
}

.learning-lahore .learning-foundations__card h3 {
  margin-bottom: 22px;
  color: #287b30;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.learning-lahore .learning-foundations__card p + p {
  margin-top: 16px;
}

.learning-lahore .learning-foundations__closing {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 28px;
  color: #173d31;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.3;
  font-weight: 600;
}

.learning-lahore a {
  text-decoration: none;
}

.learning-lahore [data-learning-word-reveal] {
  font-weight: 600;
}

.learning-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.learning-word {
  opacity: var(--word-opacity, 1);
}

.learning-motion .learning-enter {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.learning-motion .learning-enter.is-visible {
  opacity: 1;
  transform: none;
}

.learning-motion-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  padding: 10px 16px;
  border: 1px solid #cbd1be;
  border-radius: 24px;
  background: #fffbf5;
  color: #173d31;
  font: 400 12px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
}

@media (max-width: 760px) {
  .learning-lahore .learning-foundations {
    grid-template-columns: minmax(0, 1fr);
  
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-motion .learning-enter {
    opacity: 1;
    transform: none;
    transition: none;
  
  }
}

.learning-skip:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 12px;
  z-index: 50;
  background: #fffbf5;
}

/* Allow the longer Lahore skill labels to wrap without widening the page;
   each accent bar stays 9px under its own label, as on Karachi Early Years. */

.lj-early-builds__skills li {
  white-space: normal;
}

/* SNAP chapter preview clips and full-video dialog (same as Karachi Early Years). */

.lj-early-video-open {padding:0;border:0;cursor:pointer;text-align:left;background:#102d24;color:var(--lj-early-cream);font:inherit;overflow:hidden;position:relative}

.lj-early-scene.lj-early-video-open {position:absolute;pointer-events:none;visibility:hidden}

.lj-early-scene.lj-early-video-open.is-active {pointer-events:auto;visibility:visible}

.lj-early-preview-video {display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}

.lj-early-video-caption {position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:40px 26px 24px;background:linear-gradient(transparent,#092218d9);font-weight:600;font-size:14px;pointer-events:none}

.lj-early-video-play {display:grid;place-items:center;width:38px;height:38px;border:1px solid #fff7edaa;border-radius:50%;font-size:13px;flex-shrink:0}

.lj-early-video-open:focus-visible {outline:3px solid var(--lj-early-lime);outline-offset:-6px}

.lj-early-film-dialog {width:min(1100px,94vw);max-width:none;max-height:94svh;padding:0;border:1px solid #173d3133;border-radius:18px;background:var(--lj-early-cream);color:var(--lj-early-forest);overflow:auto}

.lj-early-film-dialog::backdrop {background:#071a14c9;backdrop-filter:blur(5px)}

.lj-early-film-toolbar {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px}

.lj-early-film-toolbar h2 {font-size:20px;letter-spacing:-.02em}

.lj-early-film-close {display:grid;place-items:center;width:36px;height:36px;background:transparent;border:1px solid var(--lj-early-line);border-radius:50%;font:inherit;font-size:25px;line-height:1;color:inherit;cursor:pointer;flex-shrink:0}

.lj-early-film-screen {position:relative;aspect-ratio:16/9;background:#000}

.lj-early-film-screen iframe {display:block;width:100%;height:100%;position:absolute;inset:0;border:0}

.lj-early-sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

body.lj-early-film-open {overflow:hidden}

@media(max-width:760px) {
  .learning-lahore button.lj-early-chapter__mobile {position:relative;display:block;width:100%;aspect-ratio:1.5}

  .lj-early-film-toolbar {padding:14px}

  .lj-early-film-toolbar h2 {font-size:16px}

  .lj-early-video-caption {padding:30px 22px 18px}
}

/*preschool-lahore end*/





/*elementary lahore*/
.lj-elementary-section {
  padding: clamp(75px, 8vw, 140px) var(--lj-elementary-gutter);
}

/* 03. Full-screen photographic hero --------------------------------------- */

.lj-elementary-hero {
  position: relative;
  display: flex;
  min-height: 740px;
  height: calc(100svh - var(--lj-elementary-header));
  max-height: 1100px;
  overflow: hidden;
  background: var(--lj-elementary-forest);
  color: var(--lj-elementary-cream);
}

.lj-elementary-hero__media {
  position: absolute;
  inset: 0;
}

.lj-elementary-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.lj-elementary-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 42%, #09221845 80%), linear-gradient(0deg, #071a1480, transparent 60%);
}

.lj-elementary-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 64px var(--lj-elementary-gutter);
}

.lj-elementary-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lj-elementary-stage {
  color: var(--lj-elementary-lime);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lj-elementary-hero h1 {
  font-size: var(--lj-elementary-size-hero);
}

/* 04. Approach and native scrolling chapters ------------------------------- */

.lj-elementary-approach {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  background: var(--lj-elementary-forest);
  color: var(--lj-elementary-cream);
}

.lj-elementary-approach p {
  max-width: 590px;
  color: #e1e8de;
}

.lj-elementary-chapters__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.lj-elementary-chapters__photo {
  position: sticky;
  align-self: start;
  overflow: hidden;
  background: var(--lj-elementary-sage);
}

.lj-elementary-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 550ms ease;
}

.lj-elementary-scene.is-active {
  opacity: 1;
}

.lj-elementary-chapter {
  display: flex;
  align-items: center;
  padding: 70px clamp(35px, 5vw, 90px);
  border-bottom: 1px solid var(--lj-elementary-line);
}

.lj-elementary-chapter__copy p {
  max-width: 520px;
  color: var(--lj-elementary-muted);
}

.lj-elementary-chapter__copy h3 {
  color: var(--lj-elementary-forest);
}

.learning-lahore .lj-elementary-chapter__mobile {
  display: none;
}

.lj-elementary-sticky {
  position: sticky;
  top: calc(var(--lj-elementary-header) + 40px);
  align-self: start;
}

.lj-elementary-sticky p {
  margin-top: 25px;
  color: var(--lj-elementary-muted);
}

/* Scroll reveals and reduced-motion fallback ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .lj-elementary-scene {
    transition: none;
  
  }
}

/* Responsive typography and hero ----------------------------------------- */

@media (max-width: 1320px) {
  .learning-lahore {
    --lj-elementary-header: 84px;
  
  }
}

@media (max-width: 960px) {
  .lj-elementary-hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  
  }
}

@media (max-width: 760px) {
  .learning-lahore {
    --lj-elementary-header: 80px;
    font-size: 15px;
  
  }

  .lj-elementary-section {
    padding-top: 65px;
    padding-bottom: 65px;
  
  }

  .lj-elementary-hero {
    height: auto;
    min-height: calc(100svh - var(--lj-elementary-header));
    max-height: none;
  
  }

  .lj-elementary-hero__copy {
    padding-top: 60px;
    padding-bottom: 70px;
  
  }

  .lj-elementary-breadcrumb {
    margin-bottom: 28px;
    font-size: 10px;
  
  }

  .lj-elementary-hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
  
  }

  .lj-elementary-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922188f), linear-gradient(0deg, #071a1499, transparent);
  
  }
}

@media (max-width: 760px) {
  .lj-elementary-chapters__grid {
    display: block;
  
  }

  .lj-elementary-chapters__photo {
    display: none;
  
  }

  .lj-elementary-chapter {
    display: block;
    min-height: 0;
    padding: 0 0 55px;
  
  }

  .learning-lahore .lj-elementary-chapter__mobile {
    display: block;
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
  
  }

  .lj-elementary-chapter__copy {
    padding: 32px var(--lj-elementary-gutter) 0;
  
  }

  .lj-elementary-sticky {
    position: static;
  
  }
}

/* Page-specific composition polish. All selectors belong to this page only. */

.learning-lahore {
  --lj-elementary-header: 0px;
  --lj-elementary-size-hero: clamp(44px, 5.1vw, 78px);
  --lj-elementary-size-heading: clamp(34px, 3.7vw, 56px);
}

.learning-lahore main {
  padding-top: 0;
}

.lj-elementary-section {
  padding-block: clamp(65px, 7vw, 110px);
}

.learning-lahore p {
  overflow-wrap: break-word;
}

.learning-lahore [hidden] {
  display: none !important;
}

.learning-lahore .lj-elementary-hero {
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
}

.lj-elementary-hero__copy {
  max-width: 1512px;
  margin-inline: auto;
}

.lj-elementary-hero h1 {
  max-width: 1000px;
}

.lj-elementary-breadcrumb {
  margin-bottom: 26px;
}

.lj-elementary-stage {
  margin-bottom: 18px;
}

/* Full-width body grid: consistent photographic splits and readable copy. */

.lj-elementary-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.lj-elementary-split__photo {
  margin: 0;
  overflow: hidden;
  background: var(--lj-elementary-sage);
}

.lj-elementary-split__photo img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.lj-elementary-split__copy {
  align-self: center;
  padding: clamp(45px, 5vw, 80px);
}

.lj-elementary-split__copy p:not(.lj-elementary-eyebrow) {
  margin-top: 20px;
  color: var(--lj-elementary-muted);
}

.lj-elementary-split__copy .lj-elementary-eyebrow {
  margin-bottom: 17px;
}

/* Long source copy remains complete, arranged around a sticky introduction. */

.lj-elementary-editorial {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
  background: var(--lj-elementary-paper);
}

.lj-elementary-editorial__copy {
  max-width: 800px;
}

.lj-elementary-editorial__copy p {
  color: var(--lj-elementary-muted);
}

.lj-elementary-editorial__copy p + p {
  margin-top: 20px;
}

/* STAMP: retain chapter midpoint calculation and photo crossfade. */

.lj-elementary-approach {
  gap: 8%;
}

.lj-elementary-approach p + p {
  margin-top: 16px;
}

.lj-elementary-chapters__photo {
  top: 0;
  height: 100svh;
  min-height: 530px;
}

.lj-elementary-chapter {
  min-height: 78svh;
  padding-block: 65px;
}

.lj-elementary-chapter__copy h3 {
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.2;
}

.lj-elementary-chapter__copy p {
  margin-top: 20px;
}

@media (max-width: 1000px) {
  .lj-elementary-editorial {
    gap: 6%;
  
  }

  .lj-elementary-split__copy {
    padding-inline: 35px;
  
  }
}

@media (max-width: 760px) {
  .learning-lahore .lj-elementary-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  
  }

  .lj-elementary-hero__copy {
    padding-block: 64px;
  
  }

  .lj-elementary-section {
    padding-block: 60px;
  
  }

  .lj-elementary-split, .lj-elementary-editorial {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  
  }

  .lj-elementary-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.4;
  
  }

  .lj-elementary-split__copy {
    padding: 42px var(--lj-elementary-gutter) 50px;
  
  }

  .lj-elementary-split__copy p:not(.lj-elementary-eyebrow) {
    font-size: 15px;
  
  }

  .lj-elementary-editorial {
    gap: 28px;
  
  }

  .lj-elementary-editorial .lj-elementary-sticky {
    position: static;
  
  }

  .lj-elementary-chapters__photo {
    display: none;
  
  }

  .lj-elementary-chapter {
    display: block;
    min-height: 0;
    padding: 0;
  
  }

  .lj-elementary-chapter__copy {
    padding: 38px var(--lj-elementary-gutter) 50px;
  
  }

  .lj-elementary-chapter__copy h3 {
    font-size: 32px;
  
  }
}

@media (max-width: 380px) {
  .lj-elementary-hero h1 {
    font-size: 40px;
  
  }
}

/* Lahore content additions: native scroll, accessible motion and source-specific layouts. */

.learning-lahore a {
  text-decoration: none;
}

.learning-lahore [data-learning-word-reveal] {
  font-weight: 600;
}

.learning-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.learning-word {
  opacity: var(--word-opacity, 1);
}

.learning-motion .learning-enter {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.learning-motion .learning-enter.is-visible {
  opacity: 1;
  transform: none;
}

.learning-motion-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  padding: 10px 16px;
  border: 1px solid #cbd1be;
  border-radius: 24px;
  background: #fffbf5;
  color: #173d31;
  font: 400 12px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .learning-motion .learning-enter {
    opacity: 1;
    transform: none;
    transition: none;
  
  }
}

.learning-skip:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 12px;
  z-index: 50;
  background: #fffbf5;
}

/* Future direction follows the forest editorial band used on the overview. */

.learning-lahore #journey-ahead {
  background: #173d31;
  color: #fff7ed;
}

.learning-lahore #journey-ahead h2,
.learning-lahore #journey-ahead .lj-elementary-editorial__copy p {
  color: #fff7ed;
}

.learning-lahore #journey-ahead .lj-elementary-eyebrow {
  margin: 0 0 20px;
  color: #e6ec9b;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
}

/* Chapters heading: one line across a shorter green band. */

.learning-lahore .lj-elementary-approach {
  padding-block: clamp(40px, 4vw, 64px);
}

.learning-lahore .lj-elementary-approach h2 {
  grid-column: 1 / -1;
}

/* Research … Reflect: the Head/Heart/Hands row from Karachi Elementary,
   one word per divided column, directly below the projects section. */

.learning-lahore .lj-elementary-process {
  margin: 0;
  padding: 0 var(--lj-elementary-gutter) clamp(65px, 7vw, 110px);
  background: var(--lj-elementary-paper);
}

.lj-elementary-process > span[aria-hidden="true"] {
  display: flex;
  justify-content: center;
}

.lj-elementary-process .learning-word {
  padding: 15px clamp(12px, 1.6vw, 25px);
  color: var(--lj-elementary-ink);
  font-size: clamp(24px, 2.5vw, 38px);
  letter-spacing: -.05em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.lj-elementary-process .learning-word + .learning-word {
  border-left: 1px solid #173d3140;
}

.lj-elementary-process .learning-word:nth-child(even) {
  color: var(--lj-elementary-forest);
}

/* Journey ahead: the habits spread across the full width in divided columns, followed by the
   closing copy, also full width. The copy column is unwrapped (display: contents) so its paragraphs share the
   section grid; it starts with four paragraphs, so the habits are children 5–11. */

.learning-lahore #journey-ahead .lj-elementary-editorial__copy {
  display: contents;
}

.learning-lahore #journey-ahead .lj-elementary-sticky {
  position: static;
}

.learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit {
  margin-top: 48px;
  padding: 4px 20px;
  border-left: 1px solid #fff7ed33;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}

.learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit + p:not(.lj-elementary-habit) {
  margin-top: 48px;
}

/* The closing line sits at the very end of the page, where a scroll-driven reveal could not finish,
   so it is shown in full. */

.learning-lahore #journey-ahead .lj-elementary-editorial__copy > p:last-of-type {
  color: var(--lj-elementary-lime);
  font-weight: 600;
}

@media (min-width: 1100px) {
  .learning-lahore #journey-ahead {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-sticky {
    grid-column: 1 / 4;
    grid-row: 1 / 5;
    padding-right: clamp(24px, 4vw, 64px);
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > * {
    grid-column: 4 / -1;
    padding-left: 5.5%;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit {
    grid-row: 5;
    grid-column: auto;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit ~ :not(.lj-elementary-habit) {
    grid-column: 1 / -1;
    padding-left: 0;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit:nth-child(5) {
    padding-left: 0;
    border-left: 0;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit:nth-child(11) {
    padding-right: 0;
  
  }
}

@media (max-width: 1099px) {
  .learning-lahore #journey-ahead {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  
  }

  .learning-lahore #journey-ahead > .lj-elementary-sticky,
  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > * {
    grid-column: 1 / -1;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-sticky {
    margin-bottom: 32px;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit {
    grid-column: auto;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit:nth-child(4n + 5) {
    padding-left: 0;
    border-left: 0;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit:nth-child(4n + 8) {
    padding-right: 0;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit:nth-child(n + 9) {
    margin-top: 28px;
  
  }
}

@media (max-width: 900px) {
  .lj-elementary-process > span[aria-hidden="true"] {
    flex-direction: column;
    align-items: center;
  
  }

  .lj-elementary-process .learning-word {
    width: 100%;
    max-width: 420px;
    padding: 14px 0;
    font-size: clamp(26px, 6vw, 34px);
  
  }

  .lj-elementary-process .learning-word + .learning-word {
    border-top: 1px solid #173d3140;
    border-left: 0;
  
  }
}

@media (max-width: 760px) {
  .learning-lahore #journey-ahead {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit:nth-child(n) {
    margin-top: 24px;
    padding: 4px 16px;
    border-left: 1px solid #fff7ed33;
    font-size: 16px;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit:nth-child(2n + 5) {
    padding-left: 0;
    border-left: 0;
  
  }

  .learning-lahore #journey-ahead .lj-elementary-editorial__copy > .lj-elementary-habit:nth-child(2n + 6) {
    padding-right: 0;
  
  }
}

/*elementary lahore end*/

/*middleyear lahore*/
/* 03. Full-screen photographic hero --------------------------------------- */

.lj-middle-hero {
  position: relative;
  display: flex;
  min-height: 740px;
  height: 100svh;
  max-height: 1100px;
  overflow: hidden;
  background: var(--lj-middle-forest);
  color: var(--lj-middle-cream);
}

.lj-middle-hero__media {
  position: absolute;
  inset: 0;
}

/* The photograph is slightly oversized so it can drift with the scroll. */

.lj-middle-hero__media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: center 43%;
  will-change: transform;
}

.lj-middle-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 42%, #09221845 80%), linear-gradient(0deg, #071a1480, transparent 60%);
}

.lj-middle-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 64px var(--lj-middle-gutter);
}

.lj-middle-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lj-middle-stage {
  color: var(--lj-middle-lime);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lj-middle-hero h1 {
  font-size: var(--lj-middle-size-hero);
}

.lj-middle-hero__lead {
  margin-top: 25px;
  color: #f0f2e8;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.lj-middle-hero a:focus-visible {
  outline-color: var(--lj-middle-lime);
}

.lj-middle-split__photo img {
  transition: transform 900ms ease;
}

.lj-middle-split:hover .lj-middle-split__photo img {
  transform: scale(1.03);
}

/* Copy starts level with the top of the photograph. */

.lj-middle-split--top .lj-middle-split__copy {
  align-self: start;
}

/* Hover lift must not wait for the reveal delay. */

@media (prefers-reduced-motion: reduce) {
  .lj-middle-hero__media img {
    transform: none !important;
  
  }

  .lj-middle-split__photo img {
    transition: none;
  
  }
}

/* 11. Responsive ----------------------------------------------------------- */

@media (max-width: 960px) {
  .lj-middle-hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  
  }
}

@media (max-width: 760px) {
  .learning-lahore {
    font-size: 15px;
  
  }

  .lj-middle-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  
  }

  .lj-middle-hero__copy {
    padding-top: 60px;
    padding-bottom: 70px;
  
  }

  .lj-middle-breadcrumb {
    margin-bottom: 28px;
    font-size: 10px;
  
  }

  .lj-middle-hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
  
  }

  .lj-middle-hero__lead {
    font-size: 21px;
  
  }

  .lj-middle-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922188f), linear-gradient(0deg, #071a1499, transparent);
  
  }

  .lj-middle-split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  
  }

  .lj-middle-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.5;
  
  }

  .lj-middle-split__copy {
    padding: 45px var(--lj-middle-gutter) 55px;
  
  }
}

/* Page-specific composition polish. All selectors belong to this page only. */

.learning-lahore {
  --lj-middle-header: 0px;
  --lj-middle-size-hero: clamp(44px, 5.1vw, 78px);
  --lj-middle-size-heading: clamp(34px, 3.7vw, 56px);
}

.learning-lahore main {
  padding-top: 0;
}

.learning-lahore p {
  overflow-wrap: break-word;
}

.learning-lahore [hidden] {
  display: none !important;
}

.learning-lahore .lj-middle-hero {
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
}

.lj-middle-hero__copy {
  max-width: 1512px;
  margin-inline: auto;
}

.lj-middle-hero h1 {
  max-width: 1000px;
}

.lj-middle-hero__lead {
  max-width: 730px;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}

.lj-middle-breadcrumb {
  margin-bottom: 26px;
}

.lj-middle-stage {
  margin-bottom: 18px;
}

/* Full-width body grid: consistent photographic splits and readable copy. */

.lj-middle-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.lj-middle-split__photo {
  margin: 0;
  overflow: hidden;
  background: var(--lj-middle-sage);
}

.lj-middle-split__photo img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.lj-middle-split__copy {
  align-self: center;
  padding: clamp(45px, 5vw, 80px);
}

.lj-middle-split__copy p:not(.lj-middle-eyebrow) {
  margin-top: 20px;
  color: var(--lj-middle-muted);
}

/* Middle overview: a small stage label leads directly into the source copy. */

@media (max-width: 1000px) {
  .lj-middle-split__copy {
    padding-inline: 35px;
  
  }
}

@media (max-width: 760px) {
  .learning-lahore .lj-middle-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  
  }

  .lj-middle-hero__copy {
    padding-block: 64px;
  
  }

  .lj-middle-hero__lead { font-size: 18px; } 
  /* Stack photo above copy; must follow the two-column base rule above. */ 
  .lj-middle-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }

  .lj-middle-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.4;
  
  }

  .lj-middle-split__copy {
    padding: 42px var(--lj-middle-gutter) 50px;
  
  }

  .lj-middle-split__copy p:not(.lj-middle-eyebrow) {
    font-size: 15px;
  
  }
}

@media (max-width: 380px) {
  .lj-middle-hero h1 {
    font-size: 40px;
  
  }
}
/* Middle Years: stack the photo/text section on phones. */ 
@media (max-width: 760px) { 
  .lj-middle-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* Lahore content additions: native scroll, accessible motion and source-specific layouts. */

.learning-lahore .learning-future-status {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  left: 5vw;
  right: 5vw;
  color: #fff7ed;
  font-size: 14px;
}

.learning-lahore a {
  text-decoration: none;
}

.learning-lahore [data-learning-word-reveal] {
  font-weight: 600;
}

.learning-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.learning-word {
  opacity: var(--word-opacity, 1);
}

.learning-motion .learning-enter {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.learning-motion .learning-enter.is-visible {
  opacity: 1;
  transform: none;
}

.learning-motion-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  padding: 10px 16px;
  border: 1px solid #cbd1be;
  border-radius: 24px;
  background: #fffbf5;
  color: #173d31;
  font: 400 12px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
}

@media (max-width: 760px) {
  .learning-lahore .learning-future-status {
    left: 22px;
    right: 22px;
    bottom: 18px;
    font-size: 12px;
  
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-motion .learning-enter {
    opacity: 1;
    transform: none;
    transition: none;
  
  }
}

.learning-skip:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 12px;
  z-index: 50;
  background: #fffbf5;
}

@media (max-width: 760px) {
  .learning-lahore .learning-future-status {
    bottom: 82px;
  
  }
}
/*middleyear lahore end*/

/*diploma lahore*/
/* 03. Full-screen photographic hero --------------------------------------- */

.lj-senior-hero {
  position: relative;
  display: flex;
  min-height: 740px;
  height: calc(100svh - var(--lj-senior-header));
  max-height: 1100px;
  overflow: hidden;
  background: var(--lj-senior-forest);
  color: var(--lj-senior-cream);
}

.lj-senior-hero__media {
  position: absolute;
  inset: 0;
}

.lj-senior-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.lj-senior-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed, #092218b8 42%, #09221845 80%), linear-gradient(0deg, #071a1480, transparent 60%);
}

.lj-senior-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 64px var(--lj-senior-gutter);
}

.lj-senior-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lj-senior-stage {
  color: var(--lj-senior-lime);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lj-senior-hero h1 {
  font-size: var(--lj-senior-size-hero);
}

.lj-senior-hero__lead {
  margin-top: 25px;
  color: #f0f2e8;
}

.lj-senior-split__copy p {
  margin-top: 25px;
  color: var(--lj-senior-muted);
}

/* Responsive typography and hero ----------------------------------------- */

@media (max-width: 1320px) {
  .learning-lahore {
    --lj-senior-header: 84px;
  
  }
}

@media (max-width: 960px) {
  .lj-senior-hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  
  }
}

@media (max-width: 760px) {
  .learning-lahore {
    --lj-senior-header: 80px;
    font-size: 15px;
  
  }

  .lj-senior-hero {
    height: auto;
    min-height: calc(100svh - var(--lj-senior-header));
    max-height: none;
  
  }

  .lj-senior-hero__copy {
    padding-top: 60px;
    padding-bottom: 70px;
  
  }

  .lj-senior-breadcrumb {
    margin-bottom: 28px;
    font-size: 10px;
  
  }

  .lj-senior-hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
  
  }

  .lj-senior-hero__lead {
    font-size: 14px;
  
  }

  .lj-senior-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922188f), linear-gradient(0deg, #071a1499, transparent);
  
  }
}

@media (max-width: 760px) {
  .lj-senior-split {
    gap: 0;
  
  }

  .lj-senior-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.5;
  
  }

  .lj-senior-split__copy {
    padding: 45px var(--lj-senior-gutter) 55px;
  
  }
}

/* Page-specific composition polish. All selectors belong to this page only. */

.learning-lahore {
  --lj-senior-header: 0px;
  --lj-senior-size-hero: clamp(44px, 5.1vw, 78px);
  --lj-senior-size-heading: clamp(34px, 3.7vw, 56px);
}

.learning-lahore main {
  padding-top: 0;
}

.learning-lahore p {
  overflow-wrap: break-word;
}

.learning-lahore [hidden] {
  display: none !important;
}

.learning-lahore .lj-senior-hero {
  min-height: 680px;
  height: 100svh;
  max-height: 1000px;
}

.lj-senior-hero__copy {
  max-width: 1512px;
  margin-inline: auto;
}

.lj-senior-hero h1 {
  max-width: 1000px;
}

.lj-senior-hero__lead {
  max-width: 730px;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}

.lj-senior-breadcrumb {
  margin-bottom: 26px;
}

.lj-senior-stage {
  margin-bottom: 18px;
}

/* Full-width body grid: consistent photographic splits and readable copy. */

.lj-senior-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
}

.lj-senior-split__photo {
  margin: 0;
  overflow: hidden;
  background: var(--lj-senior-sage);
}

.lj-senior-split__photo img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.lj-senior-split__copy {
  align-self: center;
  padding: clamp(45px, 5vw, 80px);
}

.lj-senior-split__copy p:not(.lj-senior-eyebrow) {
  margin-top: 20px;
  color: var(--lj-senior-muted);
}

/* Keep words intact while letters resolve from motion blur. */

@media (max-width: 1000px) {
  .lj-senior-split__copy {
    padding-inline: 35px;
  
  }
}

@media (max-width: 760px) {
  .learning-lahore .lj-senior-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  
  }

  .lj-senior-hero__copy {
    padding-block: 64px;
  
  }

  .lj-senior-hero__lead {
    font-size: 18px;
  
  }

  .lj-senior-split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  
  }

  .lj-senior-split__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.4;
  
  }

  .lj-senior-split__copy {
    padding: 42px var(--lj-senior-gutter) 50px;
  
  }

  .lj-senior-split__copy p:not(.lj-senior-eyebrow) {
    font-size: 15px;
  
  }
}

@media (max-width: 380px) {
  .lj-senior-hero h1 {
    font-size: 40px;
  
  }
}

/* Lahore content additions: native scroll, accessible motion and source-specific layouts. */

.learning-lahore .learning-future-status {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  left: 5vw;
  right: 5vw;
  color: #fff7ed;
  font-size: 14px;
}

.learning-lahore a {
  text-decoration: none;
}

.learning-lahore [data-learning-word-reveal] {
  font-weight: 600;
}

.learning-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.learning-word {
  opacity: var(--word-opacity, 1);
}

.learning-motion .learning-enter {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.learning-motion .learning-enter.is-visible {
  opacity: 1;
  transform: none;
}

.learning-motion-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  padding: 10px 16px;
  border: 1px solid #cbd1be;
  border-radius: 24px;
  background: #fffbf5;
  color: #173d31;
  font: 400 12px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
}

@media (max-width: 760px) {
  .learning-lahore .learning-future-status {
    left: 22px;
    right: 22px;
    bottom: 18px;
    font-size: 12px;
  
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-motion .learning-enter {
    opacity: 1;
    transform: none;
    transition: none;
  
  }
}

.learning-skip:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 12px;
  z-index: 50;
  background: #fffbf5;
}

@media (max-width: 760px) {
  .learning-lahore .learning-future-status {
    bottom: 82px;
  
  }
}

/*diploma lahore end*/









/*contact*/
/* 01. Theme and typography. */
.vlc-contact {
  --ct-cream: #fff7ed;
  --cm-cream: #fff7ed;
  --cm-paper: #fffbf5;
  --cm-forest: #173d31;
  --cm-green: #287b30;
  --cm-sage: #f0f0df;
  --cm-muted: #64675f;
  --cm-line: #cbd1be;
  --ct-paper: #fffbf5;
  --ct-sage: #f0f0df;
  --ct-forest: #173d31;
  --ct-green: #287b30;
  --ct-lime: #e6ec9b;
  --ct-ink: #2f2f2f;
  --ct-muted: #64675f;
  --ct-line: #cbd1be;
  --ct-gutter: clamp(22px, 5vw, 88px);
  margin: 0;
  background: var(--ct-cream);
  color: var(--ct-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.vlc-contact *,
.vlc-contact *::before,
.vlc-contact *::after {
  box-sizing: border-box;
}

.vlc-contact :where(h1, h2, h3, p, figure) {
  margin: 0;
}

.vlc-contact :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.14;
  overflow-wrap: break-word;
}

.vlc-contact h2 {
  font-size: clamp(34px, 3.7vw, 56px);
}

.vlc-contact h3 {
  font-size: clamp(23px, 2vw, 30px);
}

.vlc-contact a {
  color: inherit;
  text-decoration: none;
}

.vlc-contact :where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--ct-green);
  outline-offset: 5px;
}

.vlc-contact img {
  display: block;
  max-width: 100%;
}

.vlc-contact ::selection {
  background: var(--ct-lime);
  color: var(--ct-forest);
}

.vlc-contact [id] {
  scroll-margin-top: 36px;
}

.ct-section {
  padding: clamp(64px, 6vw, 100px) var(--ct-gutter);
}

.ct-eyebrow,
.ct-breadcrumb {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.ct-eyebrow {
  margin-bottom: 20px;
  color: var(--ct-green);
}

.ct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.ct-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 25px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--ct-green);
  color: var(--ct-cream);
  font: 600 14px/1.5 Poppins, Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.vlc-contact a.ct-button {
  color: var(--ct-cream);
}

.ct-button:hover {
  background: var(--ct-forest);
}

.vlc-contact a.ct-button--light {
  background: var(--ct-lime);
  color: var(--ct-forest);
}

.vlc-contact a.ct-button--light:hover {
  background: var(--ct-cream);
}

.vlc-contact a.ct-button--outline {
  border-color: #fff7ed80;
  background: transparent;
}

.vlc-contact a.ct-button--outline:hover {
  background: var(--ct-cream);
  color: var(--ct-forest);
}

.ct-text-link {
  display: inline-block;
  width: fit-content;
  color: var(--ct-green);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.vlc-contact a.ct-text-link {
  color: var(--ct-green);
}

/* 02. Photographic banner, matching the current Karachi pages. */
.ct-hero {
  position: relative;
  display: flex;
  min-height: 610px;
  height: 88svh;
  max-height: 960px;
  overflow: hidden;
  background: var(--ct-forest);
  color: var(--ct-cream);
}

.ct-hero__media {
  position: absolute;
  inset: 0;
}

.ct-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}

.ct-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #092218ed 0%, #092218c9 38%, #0922185e 72%, #09221829 100%),
    linear-gradient(0deg, #071a14a6, transparent 50%);
}

.ct-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 72px var(--ct-gutter);
}

.ct-breadcrumb {
  margin-bottom: 28px;
  color: var(--ct-lime);
}

.ct-hero h1 {
  max-width: 900px;
  font-size: clamp(48px, 6.3vw, 92px);
}

.ct-hero__lead {
  max-width: 660px;
  margin-top: 28px;
  color: #f1f2e8;
  font-size: clamp(17px, 1.4vw, 20px);
}

.ct-hero__lead p + p {
  margin-top: 18px;
}

/* 03. Contact routes. */
.ct-help {
  display: block;
}

.ct-help__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 6%;
  margin-bottom: 40px;
}

.ct-help__intro p {
  color: var(--ct-muted);
}

.ct-inquiry__intro,
.ct-general__intro {
  position: sticky;
  top: 36px;
  align-self: start;
}

.ct-help__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.ct-help__card {
  --ct-card-background: var(--ct-sage);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cbd1be80;
  border-radius: 20px;
  background: var(--ct-card-background);
  transition: border-color 200ms ease;
}

.ct-help__card:nth-child(2) {
  --ct-card-background: var(--ct-paper);
}

.ct-help__card:nth-child(3) {
  --ct-card-background: #f7eee5;
}

.ct-help__media {
  position: relative;
  height: clamp(200px, 18vw, 270px);
}

.ct-help__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-help__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 65%, var(--ct-card-background));
}

.ct-help__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 24px 30px;
}

.ct-help__card:is(:hover, :focus-within) {
  border-color: var(--ct-green);
}

.ct-help__card h3 {
  color: var(--ct-forest);
  font-size: clamp(22px, 1.8vw, 27px);
}

.ct-help__card p {
  margin-top: 18px;
  color: var(--ct-muted);
  font-size: 15px;
}

.ct-help__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: auto;
  padding-top: 26px;
}

/* 04. Admissions and general enquiry forms. */
.ct-inquiry,
.ct-general__layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
}

.ct-inquiry {
  background: var(--ct-sage);
}

.ct-inquiry__content {
  min-width: 0;
}

.ct-inquiry__intro > p,
.ct-general__intro > p {
  margin-top: 26px;
  color: var(--ct-muted);
}

.ct-whatsapp {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--ct-line);
}

.ct-whatsapp h3 {
  color: var(--ct-forest);
  font-size: 23px;
}

.ct-whatsapp p {
  margin-top: 12px;
  color: var(--ct-muted);
}

.ct-whatsapp .ct-text-link {
  margin-top: 16px;
}

.ct-response {
  margin-top: 20px;
  color: var(--ct-muted);
  font-size: 13px;
}

.ct-form {
  min-width: 0;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--ct-line);
  border-radius: 18px;
  background: var(--ct-paper);
}

.ct-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 20px;
}

.ct-field {
  min-width: 0;
}

.ct-field--wide {
  grid-column: 1 / -1;
}

.ct-field label {
  display: block;
  margin-bottom: 10px;
  color: var(--ct-forest);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

.ct-field :where(input, select, textarea) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 14px;
  border: 1px solid var(--ct-line);
  border-radius: 6px;
  background: #fffdf9;
  color: var(--ct-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}

.ct-field textarea {
  min-height: 150px;
  resize: vertical;
}

.ct-field select {
  padding-right: 30px;
  text-overflow: ellipsis;
}

.ct-field :where(input, textarea)::placeholder {
  color: #74776e;
  opacity: 1;
}

.ct-field :where(input, select, textarea):focus {
  border-color: var(--ct-green);
}

.ct-field [aria-invalid='true'] {
  border-color: #a23737;
}

.ct-form__submit {
  margin-top: 28px;
}

.ct-form__submit .ct-button {
  width: 100%;
  min-height: 54px;
  border-radius: 6px;
}

.ct-button:disabled {
  opacity: .65;
  cursor: wait;
}

.ct-form__status {
  margin-top: 18px;
  color: var(--ct-forest);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ct-form__status:empty {
  display: none;
}

/* 05. Campus directory: map with campus cards below it. */
.ct-section-heading {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
}

.ct-directory__intro {
  margin-bottom: 32px;
}

.ct-directory__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

/* Map frame. The map renders inside #campus-map (MapLibre + OpenFreeMap). */
.ct-directory__map {
  position: relative;
  height: clamp(420px, 62svh, 660px);
  overflow: hidden;
  border: 1px solid var(--ct-line);
  border-radius: 16px;
  background: #e8ece4;
}

.ct-directory__map-canvas {
  position: absolute;
  inset: 0;
}

.ct-directory__map-status {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80%, 350px);
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--ct-paper);
  color: var(--ct-muted);
  font-size: 13px;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ct-directory__reset {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 18px;
  padding: 10px 16px;
  border: 1px solid var(--ct-line);
  border-radius: 30px;
  background: var(--ct-paper);
  color: var(--ct-forest);
  font: 600 12px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
}

.vlc-contact .maplibregl-ctrl-attrib,
.vlc-contact .maplibregl-ctrl-attrib a {
  color: #3f574f;
  font-size: 10px;
  text-decoration: none;
}

/* Campus cards: one row below the map; each moves the map to its campus. */
.ct-directory__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ct-directory__campus {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--ct-line);
  border-radius: 14px;
  background: var(--ct-paper);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.ct-directory__campus:is(:hover, .is-active) {
  border-color: var(--ct-green);
  background: var(--ct-sage);
}

.ct-directory__campus img {
  width: 100%;
  height: clamp(76px, 9vw, 120px);
  margin-bottom: 8px;
  border-radius: 8px;
  object-fit: cover;
}

.ct-directory__campus-name {
  color: var(--ct-forest);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.2;
}

.ct-directory__campus-summary {
  margin-top: 4px;
  color: var(--ct-muted);
  font-size: 12px;
  line-height: 1.5;
}

.ct-directory__footnote {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 24px;
}

.ct-directory__footnote p {
  color: var(--ct-muted);
  font-size: 12px;
}

/* Map pins. Each marker is a div holding the pin button and its card. No
   position rule on .ct-pin: MapLibre positions each marker absolutely. A
   relative position would stack the pins in normal flow, so every pin after
   the first drifted away from its coordinates as the map zoomed. */
.ct-pin {
  width: 44px;
  height: 56px;
  color: var(--ct-forest);
}

.ct-pin__button {
  display: block;
  width: 44px;
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ct-pin svg {
  display: block;
  width: 44px;
  height: 56px;
  filter: drop-shadow(0 4px 5px #173d3130);
  transition: transform 200ms ease;
}

.ct-pin:is(:hover, :focus-within, .is-open) svg {
  transform: translateY(-3px);
}

.ct-pin.is-active {
  color: var(--ct-green);
}

/* Campus name above the pin. On hover, focus or tap it opens into a card
   with the campus photograph, address and actions. --ct-shift keeps the card
   inside the map; .is-below flips it under the pin when there is no room above. */
.ct-pin__label {
  --ct-shift: 0px;
  position: absolute;
  bottom: 66px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 5px 12px;
  border: 1px solid var(--ct-line);
  border-radius: 20px;
  background: var(--ct-paper);
  color: var(--ct-forest);
  text-align: left;
  white-space: nowrap;
  transform: translateX(calc(-50% + var(--ct-shift)));
}

/* Invisible bridge over the gap to the pin, so the card stays open while
   the pointer moves from the pin up to Directions or Book a Visit. */
.ct-pin__label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.ct-pin.is-below .ct-pin__label {
  top: 64px;
  bottom: auto;
}

.ct-pin.is-below .ct-pin__label::after {
  top: auto;
  bottom: 100%;
}

.ct-pin__label strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* Scoped under .ct-pin so the page-wide `.vlc-contact img` rule cannot show the photo. */
.ct-pin .ct-pin__photo,
.ct-pin .ct-pin__label address,
.ct-pin .ct-pin__actions {
  display: none;
}

.ct-pin:is(:hover, :focus-within, .is-open) {
  z-index: 2;
}

.ct-pin:is(:hover, :focus-within, .is-open) .ct-pin__label {
  align-items: stretch;
  width: max-content;
  max-width: min(440px, var(--ct-room, 440px));
  padding: 12px 22px 12px 12px;
  border: 2px solid var(--ct-green);
  border-radius: 16px;
  white-space: normal;
  box-shadow: 0 18px 36px -18px #173d3173;
}

.ct-pin:is(:hover, :focus-within, .is-open) .ct-pin__photo {
  display: block;
  flex: none;
  width: 150px;
  height: auto;
  min-height: 112px;
  border-radius: 8px;
  object-fit: cover;
}

.ct-pin:is(:hover, :focus-within, .is-open) .ct-pin__text {
  align-self: center;
}

.ct-pin:is(:hover, :focus-within, .is-open) .ct-pin__label strong {
  font-size: 17px;
  letter-spacing: -.02em;
}

.ct-pin:is(:hover, :focus-within, .is-open) .ct-pin__label address {
  display: block;
  max-width: 220px;
  margin-top: 6px;
  color: var(--ct-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.ct-pin:is(:hover, :focus-within, .is-open) .ct-pin__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

/* The page's own .ct-text-link and .ct-button, sized down for the card. */
.ct-pin__actions .ct-text-link {
  font-size: 13px;
}

.ct-pin__actions .ct-button {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 13px;
}

/* 06. Central Admissions contact and careers closing. */
.ct-admissions {
  background: var(--ct-forest);
  color: var(--ct-cream);
}

.ct-admissions .ct-eyebrow {
  color: var(--ct-lime);
}

.ct-admissions .ct-section-heading > div > p {
  margin-top: 26px;
  color: #e1e8de;
}

.ct-admissions__details {
  align-self: start;
  min-width: 0;
}

.ct-admissions__details > p {
  overflow-wrap: anywhere;
}

.ct-admissions__details > p + p {
  margin-top: 12px;
}

.ct-admissions :where(a, button):focus-visible,
.ct-hero :where(a, button):focus-visible {
  outline-color: var(--ct-lime);
}

.ct-careers {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10%;
  background: var(--ct-sage);
}

.ct-careers__copy p {
  color: var(--ct-muted);
}

.ct-careers__copy p + p {
  margin-top: 22px;
}

.ct-careers__copy .ct-button {
  margin-top: 28px;
}

/* 07. Native-scroll reveals. */
.ct-motion .ct-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.ct-motion .ct-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 08. Tablet and mobile. */
@media (min-width: 1680px) {
  .ct-section,
  .ct-hero__copy {
    padding-inline: max(var(--ct-gutter), calc((100vw - 1512px) / 2));
  }
}

@media (max-width: 1100px) {
  .ct-help,
  .ct-inquiry,
  .ct-general__layout,
  .ct-section-heading,
  .ct-careers {
    gap: 6%;
  }

  .ct-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-help__cards,
  .ct-directory__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ct-section {
    padding-block: 52px;
  }

  .ct-hero {
    min-height: 660px;
    height: 90svh;
    max-height: none;
  }

  .ct-hero__copy {
    padding-block: 56px;
  }

  .ct-hero h1 {
    font-size: clamp(44px, 10vw, 64px);
  }

  .ct-hero__lead {
    font-size: 16px;
  }

  .ct-hero__media img {
    object-position: 80% center;
  }

  .ct-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922189c);
  }

  .ct-help__intro,
  .ct-inquiry,
  .ct-general__layout,
  .ct-section-heading,
  .ct-careers {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .ct-help__intro,
  .ct-inquiry__intro,
  .ct-general__intro {
    position: static;
  }

  .ct-help__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .ct-form {
    padding: 24px 20px;
  }

  .ct-directory__map {
    height: 440px;
  }

  .ct-directory__nav {
    gap: 10px;
  }

  .ct-directory__campus img {
    height: 76px;
  }

  .ct-directory__campus-name {
    font-size: 16px;
  }

  .ct-pin:is(:hover, :focus-within, .is-open) .ct-pin__photo {
    width: 90px;
    min-height: 0;
    height: 90px;
  }

  .ct-pin:is(:hover, :focus-within, .is-open) .ct-pin__label address {
    max-width: 170px;
  }

  .ct-hero .ct-actions {
    gap: 12px;
  }
}

/* 09. Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .ct-motion .ct-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ct-button,
  .ct-help__card,
  .ct-help__media img,
  .ct-directory__campus,
  .ct-pin svg {
    transition: none;
  }
}

/*contact end*/

/*contact lahore*/
/* 02. Theme and typography ------------------------------------------------- */

.vlc-contact {
  --ct-cream: #fff7ed;
  --ct-paper: #fffbf5;
  --ct-sage: #f0f0df;
  --ct-forest: #173d31;
  --ct-green: #287b30;
  --ct-lime: #e6ec9b;
  --ct-ink: #2f2f2f;
  --ct-muted: #64675f;
  --ct-line: #cbd1be;
  --ct-gutter: clamp(22px, 5vw, 88px);
  --ct-size-hero: clamp(42px, 5.1vw, 84px);
  --ct-size-heading: clamp(34px, 3.7vw, 59px);
  --ct-size-subheading: clamp(22px, 2vw, 30px);
  --ct-size-body: 16px;
  margin: 0;
  background: var(--ct-cream);
  color: var(--ct-ink);
  font: 400 var(--ct-size-body)/1.75 Poppins, Arial, sans-serif;
}

.vlc-contact *,
.vlc-contact *::before,
.vlc-contact *::after {
  box-sizing: border-box;
}

.vlc-contact :where(h1, h2, h3, p) {
  margin: 0;
}

.vlc-contact :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

.vlc-contact h2 {
  font-size: var(--ct-size-heading);
}

.vlc-contact h3 {
  font-size: var(--ct-size-subheading);
}

.vlc-contact a {
  color: inherit;
  text-decoration: none;
}

.vlc-contact :where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--ct-green);
  outline-offset: 5px;
}

.vlc-contact ::selection {
  background: var(--ct-lime);
  color: var(--ct-forest);
}

.ct-section {
  padding: clamp(80px, 8vw, 140px) var(--ct-gutter);
}

/* 03. Full-screen hero ----------------------------------------------------- */

.ct-hero {
  position: relative;
  display: flex;
  min-height: 700px;
  height: 100svh;
  max-height: 1100px;
  overflow: hidden;
  background: var(--ct-forest);
  color: var(--ct-cream);
}

.ct-hero__media {
  position: absolute;
  inset: 0;
}

.ct-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.ct-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #092218ed 0%, #092218c9 38%, #0922185e 72%, #09221829 100%),
    linear-gradient(0deg, #071a14a6, transparent 50%);
}

.ct-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  /* padding: 90px var(--ct-gutter); */
  padding: 10% 12%;
}

.ct-breadcrumb {
  margin-bottom: 48px;
  color: #f0f3dc;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.ct-hero h1 {
  max-width: 850px;
  font-size: var(--ct-size-hero);
}

.ct-hero h1 span {
  color: var(--ct-lime);
}

.ct-hero__lead {
  max-width: 600px;
  margin-top: 32px;
  color: #f1f2e8;
  font-size: clamp(15px, 1.3vw, 19px);
}

/* 04. Inquiry layout ------------------------------------------------------- */

.ct-inquiry,
.ct-directory,
.ct-careers {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 10vw, 160px);
}

.ct-inquiry__intro,
.ct-directory__intro {
  position: sticky;
  top: 90px;
  align-self: start;
}

.ct-inquiry__intro > p,
.ct-directory__intro > p {
  max-width: 390px;
  margin-top: 25px;
  color: var(--ct-muted);
}

/* A compact interpretation of the reference within the VLC theme. */

.ct-inquiry {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(40px, 5vw, 90px);
}

.ct-inquiry__intro h2 span {
  color: var(--ct-green);
}

.ct-inquiry__intro > p {
  max-width: 300px;
}

/* 05. Form controls -------------------------------------------------------- */

.ct-form {
  min-width: 0;
  padding: clamp(28px, 3vw, 48px);
  border: 1px solid #dcded2;
  border-radius: 20px;
  background: var(--ct-paper);
}

.ct-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}

.ct-field {
  min-width: 0;
}

.ct-field--wide {
  grid-column: 1 / -1;
}

.ct-field label {
  display: block;
  margin-bottom: 10px;
  color: var(--ct-forest);
  font-size: 13px;
  font-weight: 600;
}

.ct-control {
  position: relative;
}

.ct-field :where(input, select, textarea) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 15px 14px 15px 48px;
  border: 1px solid var(--ct-line);
  border-radius: 8px;
  background: #fffdf9;
  color: var(--ct-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.ct-field textarea {
  min-height: 160px;
  resize: vertical;
}

.ct-field select {
  padding-right: 28px;
}

.ct-field :where(input, textarea)::placeholder {
  color: #74776e;
  opacity: 1;
}

.ct-field :where(input, select, textarea):focus {
  border-color: var(--ct-green);
  background: #fffdf9;
}

.ct-field [aria-invalid='true'] {
  border-color: #a23737;
}

.ct-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--ct-green);
  color: var(--ct-cream);
  font: 600 14px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.ct-button:hover {
  background: var(--ct-forest);
}

.ct-button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.ct-form__submit {
  margin-top: 30px;
}

.ct-form__submit .ct-button {
  width: 100%;
  min-height: 58px;
  border-radius: 8px;
  font-size: 15px;
}

.ct-form__status {
  margin-top: 18px;
  color: var(--ct-forest);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ct-form__status:empty {
  display: none;
}

/* 06. Campus directory ----------------------------------------------------- */

.ct-directory {
  background: var(--ct-sage);
}

.ct-eyebrow {
  padding-top: 4px;
  color: var(--ct-green);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 07. Careers -------------------------------------------------------------- */

.ct-careers {
  position: relative;
  overflow: hidden;
  background: var(--ct-forest);
  color: var(--ct-cream);
}

.ct-careers::before {
  content: '';
  position: absolute;
  left: -100px;
  bottom: -220px;
  width: 430px;
  height: 430px;
  border: 1px solid #e6ec9b30;
  border-radius: 50%;
  pointer-events: none;
}

.ct-careers__heading,
.ct-careers__copy {
  position: relative;
}

.ct-careers__copy p {
  max-width: 620px;
  color: #e1e8de;
}

.ct-careers__copy p + p {
  margin-top: 24px;
}

.ct-careers__copy .ct-button {
  margin-top: 34px;
}

.ct-button--light {
  background: var(--ct-lime);
}

.vlc-contact a.ct-button--light {
  color: var(--ct-forest);
}

.ct-button--light:hover {
  background: var(--ct-cream);
}

.ct-careers a:focus-visible {
  outline-color: var(--ct-lime);
}

/* Content stays visible by default, including when JavaScript is unavailable. */

.ct-motion .ct-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.ct-motion .ct-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 09. Tablet and mobile ---------------------------------------------------- */

@media (min-width: 1680px) {
  .ct-section {
    padding-right: max(var(--ct-gutter), calc((100vw - 1512px) / 2));
    padding-left: max(var(--ct-gutter), calc((100vw - 1512px) / 2));
  
  }
}

@media (max-width: 960px) {
  .ct-inquiry,
  .ct-directory,
  .ct-careers {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 40px;
  
  }

  .ct-form__grid {
    grid-template-columns: minmax(0, 1fr);
  
  }

  .ct-hero h1 {
    font-size: clamp(44px, 7.3vw, 70px);
  
  }
}

@media (max-width: 760px) {
  .ct-section {
    padding-top: 70px;
    padding-bottom: 70px;
  
  }

  .ct-hero {
    min-height: 630px;
    max-height: 920px;
  
  }

  .ct-hero__copy {
    padding-top: 70px;
    padding-bottom: 90px;
  
  }

  .ct-hero__media img {
    object-position: 85% center;
  
  }

  .ct-hero__media::after {
    background: linear-gradient(90deg, #092218db, #09221880), linear-gradient(0deg, #071a1499, transparent);
  
  }

  .ct-breadcrumb {
    margin-bottom: 34px;
    font-size: 10px;
  
  }

  .ct-hero h1 {
    font-size: clamp(39px, 8.2vw, 62px);
  
  }

  .ct-hero__lead {
    max-width: 500px;
    margin-top: 25px;
    font-size: 14px !important;
  
  }

  .ct-inquiry,
  .ct-directory,
  .ct-careers {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  
  }

  .ct-inquiry__intro,
  .ct-directory__intro {
    position: static;
  
  }

  .ct-inquiry__intro p,
.ct-directory__intro p,
.ct-careers__copy p {
    font-size: 15px;
  
  }

  .ct-form {
    padding: 24px 20px 30px;
    border-radius: 16px;
  
  }

  .ct-form__grid {
    gap: 24px;
  
  }
}

/* 10. Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ct-motion .ct-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  
  }

  .ct-field :where(input, select, textarea),
  .ct-button {
    transition: none;
  
  }
}

/* Contact help cards follow the approved Karachi design. */

.ct-help {
  display: block;
}

.ct-help__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 6%;
  margin-bottom: 40px;
}

.ct-help__intro p {
  color: var(--ct-muted);
}

.ct-inquiry__intro {
  position: sticky;
  top: 36px;
  align-self: start;
}

.ct-help__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.ct-help__card {
  --ct-card-background: var(--ct-sage);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cbd1be80;
  border-radius: 20px;
  background: var(--ct-card-background);
  transition: border-color 200ms ease;
}

.ct-help__card:nth-child(2) {
  --ct-card-background: var(--ct-paper);
}

.ct-help__card:nth-child(3) {
  --ct-card-background: #f7eee5;
}

.ct-help__media {
  position: relative;
  height: clamp(200px, 18vw, 270px);
}

.ct-help__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-help__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 65%, var(--ct-card-background));
}

.ct-help__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 24px 30px;
}

.ct-help__card:is(:hover, :focus-within) {
  border-color: var(--ct-green);
}

.ct-help__card h3 {
  color: var(--ct-forest);
  font-size: clamp(22px, 1.8vw, 27px);
}

.ct-help__card p {
  margin-top: 18px;
  color: var(--ct-muted);
  font-size: 15px;
}

.ct-help__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: auto;
  padding-top: 26px;
}

/* Lahore Contact content and routing. */

.contact-lahore .ct-hero {
  min-height: 100svh;
  height: auto;
  max-height: none;
}

.contact-lahore .ct-hero__copy {
  padding-block: clamp(75px, 8vw, 115px);
}

.contact-lahore .ct-hero__lead {
  max-width: 800px;
  font-size: clamp(18px, 1.7vw, 24px);
}

.contact-lahore .ct-breadcrumb {
  margin-bottom: 30px;
}

.ct-hero-details {
  margin-top: 28px;
}

.contact-lahore .ct-hero-details h2 {
  margin-bottom: 10px;
  font-size: 22px;
  letter-spacing: -.02em;
}

.ct-hero-details address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.ct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.vlc-contact a.ct-button {
  color: var(--ct-cream);
  text-decoration: none;
}

.vlc-contact a.ct-button--light {
  color: var(--ct-forest);
}

.vlc-contact a.ct-button--outline {
  border-color: var(--ct-green);
  background: transparent;
  color: var(--ct-forest);
}

.vlc-contact a.ct-button--outline:hover {
  background: var(--ct-forest);
  color: var(--ct-cream);
}

.vlc-contact .ct-hero a.ct-button--outline {
  border-color: #ffffff99;
  color: var(--ct-cream);
}

.ct-text-link {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.ct-help__card {
  text-decoration: none;
}

.contact-lahore .ct-help__card h3 {
  min-height: 5em;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.25;
}

.contact-lahore .ct-help__card p {
  margin-top: 14px;
  font-size: 15px;
}

.ct-contact-copy {
  align-self: start;
  color: var(--ct-muted);
}

.ct-contact-copy > p + p {
  margin-top: 20px;
}

.contact-lahore .ct-contact-copy > .ct-intake {
  margin-top: 30px;
  color: var(--ct-forest);
  font-size: 23px;
  font-weight: 600;
}

.contact-lahore .ct-contact-copy > .ct-grade {
  margin-top: 4px;
  color: var(--ct-green);
  font-weight: 600;
}

.contact-lahore .ct-direct-line {
  margin-top: 24px;
}

.contact-lahore .ct-contact-copy .ct-text-link {
  font-size: inherit;
  font-weight: 400;
}

.contact-lahore .ct-inquiry {
  row-gap: 22px;
}

.contact-lahore .ct-inquiry__intro > .ct-eyebrow {
  margin: 0 0 18px;
  color: var(--ct-green);
}

.contact-lahore .ct-field :where(input, select, textarea) {
  padding-left: 14px;
}

.contact-lahore [hidden] {
  display: none !important;
}

.contact-lahore .ct-response {
  grid-column: 2;
  color: var(--ct-muted);
  font-size: 14px;
}

.ct-collaborations {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 10vw, 160px);
  background: var(--ct-paper);
}

.ct-collaborations .ct-text-link {
  margin-top: 28px;
  color: var(--ct-green);
  font-size: 14px;
  font-weight: 600;
}

.contact-lahore .ct-careers .ct-eyebrow {
  margin-bottom: 18px;
  color: var(--ct-lime);
}

.ct-closing {
  text-align: center;
}

.ct-closing h2 {
  max-width: 900px;
  margin: 0 auto;
}

.ct-closing p {
  margin-top: 25px;
  color: var(--ct-muted);
}

.ct-closing .ct-text-link {
  margin-top: 25px;
  color: var(--ct-green);
}

.ct-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ct-skip:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 12px;
  clip-path: none;
  z-index: 30;
  background: var(--ct-paper);
}

.ct-motion-paused *,
.ct-motion-paused *::before,
.ct-motion-paused *::after {
  transition: none !important;
  animation: none !important;
}

@media (max-width: 1100px) {
  .ct-help__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  
  }
}

@media (max-width: 760px) {
  .contact-lahore .ct-hero__copy {
    padding-block: 75px;
            margin-top: 50px;

  
  }
  .vlc-contact a.ct-button{
    padding: 10px 20px;
    font-size: 12px;
    min-height: 20px;
  }

  .contact-lahore .ct-hero h1 {
    font-size: clamp(42px, 10vw, 64px);
  
  }

  .ct-help__cards,
  .ct-collaborations {
    grid-template-columns: minmax(0, 1fr);
  
  }

  .contact-lahore .ct-help__card h3 {
    min-height: 0;
    font-size: 24px;
  
  }

  .contact-lahore .ct-response {
    grid-column: 1;
  
  }

  .contact-lahore .ct-hero-details h2 {
    font-size: 22px;
  
  }
}

/* Keep the incoming inquiry anchor at the form's natural document position. */

.contact-lahore .ct-inquiry__intro {
  position: static;
}

.contact-lahore #inquiry-title {
  scroll-margin-top: 72px;
}

.contact-lahore .ct-help__intro {
  display: block;
}

/* Lahore page edits: no underlined links, centred help cards, no curve behind Careers. */
body.contact-lahore a {
  text-decoration: none;
}

body.contact-lahore .ct-text-link {
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--ct-cream);

}
body.contact-lahore .ct-help__actions .ct-text-link{
  color: var(--ct-green);
}
body.contact-lahore .ct-contact-copy .ct-text-link{
  color: var(--ct-green);
}
body.contact-lahore .ct-closing .ct-text-link{
  color: var(--ct-green);
}

body.contact-lahore .ct-help__body,
body.contact-lahore .ct-help__actions {
  align-items: center;
  text-align: center;
}

body.contact-lahore .ct-careers::before {
  content: none;
}

/*contact lahore end*/




/*pechs*/
.vlc-pechs-page {
  scroll-behavior: smooth;
}

.vlc-pechs {
  --pc-cream: #fff7ed;
  --pc-forest: #173d31;
  --pc-green: #287b30;
  --pc-muted: #64675f;
  --pc-line: #d5d9cb;
  --pc-gutter: clamp(22px, 5vw, 88px);
  margin: 0;
  background: var(--pc-cream);
  color: #2f2f2f;
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.vlc-pechs *,
.vlc-pechs *::before,
.vlc-pechs *::after {
  box-sizing: border-box;
}

.vlc-pechs :is(h1, h2, p, dl, dd) {
  margin: 0;
}

.vlc-pechs :is(h1, h2) {
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.12;
}

.vlc-pechs h2 {
  font-size: clamp(34px, 3.7vw, 59px);
}

.vlc-pechs a {
  color: inherit;
  text-decoration: none;
}

.vlc-pechs :is(a, button):focus-visible {
  outline: 3px solid var(--pc-green);
  outline-offset: 5px;
}

.vlc-pechs img {
  display: block;
  max-width: 100%;
}

/* 02. Shared page elements ----------------------------------------------- */
.pc-eyebrow,
.pc-breadcrumb {
  margin-bottom: 24px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.pc-eyebrow {
  color: var(--pc-green);
}

.pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

.pc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--pc-green);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition: background 180ms ease;
}

.pc-button:hover {
  background: #216728;
}

.pc-button--outline {
  border-color: #fff7ed99;
  background: transparent;
}

.pc-button--outline:hover {
  background: #ffffff1c;
}

/* 03. Photographic hero -------------------------------------------------- */
.pc-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding: 90px var(--pc-gutter);
  isolation: isolate;
  background: var(--pc-forest);
  color: var(--pc-cream);
}

.pc-hero__image,
.pc-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.pc-hero__image {
  object-fit: cover;
  object-position: center;
}

.pc-hero::after {
  content: '';
  background: linear-gradient(90deg, #08231bec, #08231bb0 47%, #08231b33);
}

.pc-hero__copy {
  max-width: 850px;
}

.pc-breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.pc-hero h1 {
  font-size: clamp(42px, 5.1vw, 84px);
}

.pc-hero h1 span {
  color: #e6ec9b;
}

.pc-hero__lead {
  max-width: 570px;
  margin-top: 30px !important;
  font-size: clamp(16px, 1.3vw, 19px);
}

/* 04. Overview: sticky introduction beside campus facts ------------------ */
.pc-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  scroll-margin-top: 32px;
}

.pc-overview__intro {
  padding: clamp(65px, 8vw, 125px) clamp(30px, 6vw, 100px) clamp(65px, 8vw, 125px) var(--pc-gutter);
  background: var(--pc-forest);
  color: var(--pc-cream);
}

.pc-overview__copy {
  position: sticky;
  top: 80px;
  max-width: 560px;
}

.pc-overview .pc-eyebrow {
  color: #e6ec9b;
}

.pc-overview__copy > p:last-child {
  margin-top: 30px;
  color: #dce5d9;
}

.pc-facts {
  display: grid;
  align-content: center;
  gap: 0;
  padding: clamp(45px, 5vw, 85px) var(--pc-gutter);
}

.pc-fact {
  padding: 30px 0;
  border-bottom: 1px solid var(--pc-line);
}

.pc-fact:last-child {
  border: 0;
}

.pc-fact dt {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--pc-forest);
  font-size: 20px;
  font-weight: 600;
}

.pc-fact svg {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--pc-green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-fact dd {
  padding-left: 41px;
  color: var(--pc-muted);
  overflow-wrap: anywhere;
}

.pc-fact a:hover {
  color: var(--pc-green);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 05. Gallery ------------------------------------------------------------ */
.pc-gallery {
  padding: clamp(65px, 8vw, 125px) var(--pc-gutter);
}

.pc-section-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 44px;
}

.pc-section-intro > p {
  color: var(--pc-muted);
}

.pc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.pc-photo {
  display: block;
  overflow: hidden;
  border-radius: clamp(45px, 6vw, 110px) 4px 4px 4px;
}

.pc-photo:nth-child(2) {
  margin-top: 55px;
  border-radius: 4px;
}

.pc-photo:nth-child(3) {
  border-radius: 4px 4px clamp(45px, 6vw, 110px) 4px;
}

.pc-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 0.92;
  object-fit: cover;
  transition: transform 500ms ease;
}

.pc-photo:hover img {
  transform: scale(1.035);
}

.pc-gallery__action {
  margin-top: 44px;
  text-align: center;
}

/* 06. Getting here ------------------------------------------------------- */
.pc-directions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--pc-forest);
  color: var(--pc-cream);
}

.pc-directions__copy {
  align-self: center;
  padding: clamp(65px, 7vw, 110px) var(--pc-gutter);
}

.pc-directions .pc-eyebrow {
  color: #e6ec9b;
}

.pc-directions__copy > p:not(.pc-eyebrow) {
  max-width: 510px;
  margin-top: 28px;
  color: #dce5d9;
}

.pc-map {
  min-height: 530px;
  overflow: hidden;
  border-radius: 110px 0 0 0;
  background: #e5e8de;
}

.pc-map img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 530px;
  object-fit: cover;
}

/* 07. Accessible photo viewer ------------------------------------------- */
.pc-lightbox {
  width: min(1120px, calc(100% - 40px));
  max-height: calc(100svh - 40px);
  padding: 24px;
  border: 0;
  border-radius: 12px;
  background: var(--pc-cream);
  color: var(--pc-forest);
}

.pc-lightbox::backdrop {
  background: #08231bed;
}

.pc-lightbox__toolbar,
.pc-lightbox__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pc-lightbox__toolbar {
  margin-bottom: 20px;
}

.pc-lightbox__bottom {
  margin-top: 20px;
}

.pc-lightbox__image {
  width: 100%;
  max-height: 66svh;
  object-fit: contain;
}

.pc-lightbox button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--pc-line);
  border-radius: 5px;
  background: transparent;
  color: var(--pc-forest);
  font: 600 13px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
}

.pc-lightbox button:hover {
  background: #f0f0df;
}

.pc-lightbox__bottom p {
  font-size: 13px;
  text-align: center;
}

.vlc-pechs:has(.pc-lightbox[open]) {
  overflow: hidden;
}

/* 08. Scroll reveals: opt in only after the observer is ready ------------- */
.pc-motion .pc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.pc-motion .pc-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 09. Tablet and mobile -------------------------------------------------- */
@media (max-width: 900px) {
  .pc-overview,
  .pc-directions {
    grid-template-columns: minmax(0, 1fr);
  }

  .pc-overview__copy {
    position: static;
    max-width: 680px;
  }

  .pc-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 36px;
  }

  .pc-fact:nth-last-child(-n + 2) {
    border: 0;
  }

  .pc-gallery__grid {
    gap: 16px;
  }

  .pc-map,
  .pc-map img {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .vlc-pechs {
    font-size: 15px;
  }

  .pc-hero {
    min-height: 85svh;
    padding-block: 70px;
  }

  .pc-hero::after {
    background: linear-gradient(0deg, #08231be6, #08231b8c);
  }

  .pc-breadcrumb {
    font-size: 10px;
  }

  .pc-actions {
    gap: 12px;
  }

  .pc-button {
    padding-inline: 20px;
    font-size: 13px;
  }

  .pc-facts {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 30px;
  }

  .pc-fact:nth-last-child(2) {
    border-bottom: 1px solid var(--pc-line);
  }

  .pc-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .pc-photo:nth-child(2) {
    margin-top: 0;
  }

  .pc-photo img {
    aspect-ratio: 1.25;
  }

  .pc-map {
    border-radius: 70px 0 0 0;
  }

  .pc-map,
  .pc-map img {
    min-height: 350px;
  }

  .pc-lightbox {
    width: calc(100% - 24px);
    padding: 16px;
  }

  .pc-lightbox__bottom {
    flex-wrap: wrap;
  }

  .pc-lightbox__bottom p {
    order: -1;
    flex-basis: 100%;
  }
}

/* 10. Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vlc-pechs-page {
    scroll-behavior: auto;
  }

  .pc-motion .pc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pc-photo img,
  .pc-button {
    transition: none;
  }
}
/*pechs end*/

/*dha */
.vlc-dha-page {
  scroll-behavior: smooth;
}

.vlc-dha {
  --pc-cream: #fff7ed;
  --pc-forest: #173d31;
  --pc-green: #287b30;
  --pc-muted: #64675f;
  --pc-line: #d5d9cb;
  --pc-gutter: clamp(22px, 5vw, 88px);
  margin: 0;
  background: var(--pc-cream);
  color: #2f2f2f;
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.vlc-dha *,
.vlc-dha *::before,
.vlc-dha *::after {
  box-sizing: border-box;
}

.vlc-dha :is(h1, h2, p, dl, dd) {
  margin: 0;
}

.vlc-dha :is(h1, h2) {
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.12;
}

.vlc-dha h2 {
  font-size: clamp(34px, 3.7vw, 59px);
}

.vlc-dha a {
  color: inherit;
  text-decoration: none;
}

.vlc-dha :is(a, button):focus-visible {
  outline: 3px solid var(--pc-green);
  outline-offset: 5px;
}

.vlc-dha img {
  display: block;
  max-width: 100%;
}

/* 02. Shared page elements ----------------------------------------------- */
.pc-eyebrow,
.pc-breadcrumb {
  margin-bottom: 24px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.pc-eyebrow {
  color: var(--pc-green);
}

.pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

.pc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--pc-green);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition: background 180ms ease;
}

.pc-button:hover {
  background: #216728;
}

.pc-button--outline {
  border-color: #fff7ed99;
  background: transparent;
}

.pc-button--outline:hover {
  background: #ffffff1c;
}

/* 03. Photographic hero -------------------------------------------------- */
.pc-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding: 90px var(--pc-gutter);
  isolation: isolate;
  background: var(--pc-forest);
  color: var(--pc-cream);
}

.pc-hero__image,
.pc-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.pc-hero__image {
  object-fit: cover;
  object-position: center;
}

.pc-hero::after {
  content: '';
  background: linear-gradient(90deg, #08231bec, #08231bb0 47%, #08231b33);
}

.pc-hero__copy {
  max-width: 850px;
}

.pc-breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.pc-hero h1 {
  font-size: clamp(42px, 5.1vw, 84px);
}

.pc-hero h1 span {
  color: #e6ec9b;
}

.pc-hero__lead {
  max-width: 570px;
  margin-top: 30px !important;
  font-size: clamp(16px, 1.3vw, 19px);
}

/* 04. Overview: sticky introduction beside campus facts ------------------ */
.pc-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  scroll-margin-top: 32px;
}

.pc-overview__intro {
  padding: clamp(65px, 8vw, 125px) clamp(30px, 6vw, 100px) clamp(65px, 8vw, 125px) var(--pc-gutter);
  background: var(--pc-forest);
  color: var(--pc-cream);
}

.pc-overview__copy {
  position: sticky;
  top: 80px;
  max-width: 560px;
}

.pc-overview .pc-eyebrow {
  color: #e6ec9b;
}

.pc-overview__copy > p:last-child {
  margin-top: 30px;
  color: #dce5d9;
}

.pc-facts {
  display: grid;
  align-content: center;
  gap: 0;
  padding: clamp(45px, 5vw, 85px) var(--pc-gutter);
}

.pc-fact {
  padding: 30px 0;
  border-bottom: 1px solid var(--pc-line);
}

.pc-fact:last-child {
  border: 0;
}

.pc-fact dt {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--pc-forest);
  font-size: 20px;
  font-weight: 600;
}

.pc-fact svg {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--pc-green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-fact dd {
  padding-left: 41px;
  color: var(--pc-muted);
  overflow-wrap: anywhere;
}

.pc-fact a:hover {
  color: var(--pc-green);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 05. Gallery ------------------------------------------------------------ */
.pc-gallery {
  padding: clamp(65px, 8vw, 125px) var(--pc-gutter);
}

.pc-section-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 44px;
}

.pc-section-intro > p {
  color: var(--pc-muted);
}

.pc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.pc-photo {
  display: block;
  overflow: hidden;
  border-radius: clamp(45px, 6vw, 110px) 4px 4px 4px;
}

.pc-photo:nth-child(2) {
  margin-top: 55px;
  border-radius: 4px;
}

.pc-photo:nth-child(3) {
  border-radius: 4px 4px clamp(45px, 6vw, 110px) 4px;
}

.pc-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 0.92;
  object-fit: cover;
  transition: transform 500ms ease;
}

.pc-photo:hover img {
  transform: scale(1.035);
}

.pc-gallery__action {
  margin-top: 44px;
  text-align: center;
}

/* 06. Getting here ------------------------------------------------------- */
.pc-directions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--pc-forest);
  color: var(--pc-cream);
}

.pc-directions__copy {
  align-self: center;
  padding: clamp(65px, 7vw, 110px) var(--pc-gutter);
}

.pc-directions .pc-eyebrow {
  color: #e6ec9b;
}

.pc-directions__copy > p:not(.pc-eyebrow) {
  max-width: 510px;
  margin-top: 28px;
  color: #dce5d9;
}

.pc-directions__media {
  min-height: 530px;
  overflow: hidden;
  border-radius: 110px 0 0 0;
  background: #e5e8de;
}

.pc-directions__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 530px;
  object-fit: cover;
}

/* 07. Accessible photo viewer ------------------------------------------- */
.pc-lightbox {
  width: min(1120px, calc(100% - 40px));
  max-height: calc(100svh - 40px);
  padding: 24px;
  border: 0;
  border-radius: 12px;
  background: var(--pc-cream);
  color: var(--pc-forest);
}

.pc-lightbox::backdrop {
  background: #08231bed;
}

.pc-lightbox__toolbar,
.pc-lightbox__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pc-lightbox__toolbar {
  margin-bottom: 20px;
}

.pc-lightbox__bottom {
  margin-top: 20px;
}

.pc-lightbox__image {
  width: 100%;
  max-height: 66svh;
  object-fit: contain;
}

.pc-lightbox button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--pc-line);
  border-radius: 5px;
  background: transparent;
  color: var(--pc-forest);
  font: 600 13px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
}

.pc-lightbox button:hover {
  background: #f0f0df;
}

.pc-lightbox__bottom p {
  font-size: 13px;
  text-align: center;
}

.vlc-dha:has(.pc-lightbox[open]) {
  overflow: hidden;
}

/* 08. Scroll reveals: opt in only after the observer is ready ------------- */
.pc-motion .pc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.pc-motion .pc-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 09. Tablet and mobile -------------------------------------------------- */
@media (max-width: 900px) {
  .pc-overview,
  .pc-directions {
    grid-template-columns: minmax(0, 1fr);
  }

  .pc-overview__copy {
    position: static;
    max-width: 680px;
  }

  .pc-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 36px;
  }

  .pc-fact:nth-last-child(-n + 2) {
    border: 0;
  }

  .pc-gallery__grid {
    gap: 16px;
  }

  .pc-directions__media,
  .pc-directions__media img {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .vlc-dha {
    font-size: 15px;
  }

  .pc-hero {
    min-height: 85svh;
    padding-block: 70px;
  }

  .pc-hero::after {
    background: linear-gradient(0deg, #08231be6, #08231b8c);
  }

  .pc-breadcrumb {
    font-size: 10px;
  }

  .pc-actions {
    gap: 12px;
  }

  .pc-button {
    padding-inline: 20px;
    font-size: 13px;
  }

  .pc-facts {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 30px;
  }

  .pc-fact:nth-last-child(2) {
    border-bottom: 1px solid var(--pc-line);
  }

  .pc-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .pc-photo:nth-child(2) {
    margin-top: 0;
  }

  .pc-photo img {
    aspect-ratio: 1.25;
  }

  .pc-directions__media {
    border-radius: 70px 0 0 0;
  }

  .pc-directions__media,
  .pc-directions__media img {
    min-height: 350px;
  }

  .pc-lightbox {
    width: calc(100% - 24px);
    padding: 16px;
  }

  .pc-lightbox__bottom {
    flex-wrap: wrap;
  }

  .pc-lightbox__bottom p {
    order: -1;
    flex-basis: 100%;
  }
}

/* 10. Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vlc-dha-page {
    scroll-behavior: auto;
  }

  .pc-motion .pc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pc-photo img,
  .pc-button {
    transition: none;
  }
}
/*dha end*/

/*clifton*/
.vlc-clifton-page {
  scroll-behavior: smooth;
}

.vlc-clifton {
  --pc-cream: #fff7ed;
  --pc-forest: #173d31;
  --pc-green: #287b30;
  --pc-muted: #64675f;
  --pc-line: #d5d9cb;
  --pc-gutter: clamp(22px, 5vw, 88px);
  margin: 0;
  background: var(--pc-cream);
  color: #2f2f2f;
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.vlc-clifton *,
.vlc-clifton *::before,
.vlc-clifton *::after {
  box-sizing: border-box;
}

.vlc-clifton :is(h1, h2, p, dl, dd) {
  margin: 0;
}

.vlc-clifton :is(h1, h2) {
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.12;
}

.vlc-clifton h2 {
  font-size: clamp(34px, 3.7vw, 59px);
}

.vlc-clifton a {
  color: inherit;
  text-decoration: none;
}

.vlc-clifton :is(a, button):focus-visible {
  outline: 3px solid var(--pc-green);
  outline-offset: 5px;
}

.vlc-clifton img {
  display: block;
  max-width: 100%;
}

/* 02. Shared page elements ----------------------------------------------- */
.pc-eyebrow,
.pc-breadcrumb {
  margin-bottom: 24px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.pc-eyebrow {
  color: var(--pc-green);
}

.pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

.pc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--pc-green);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition: background 180ms ease;
}

.pc-button:hover {
  background: #216728;
}

.pc-button--outline {
  border-color: #fff7ed99;
  background: transparent;
}

.pc-button--outline:hover {
  background: #ffffff1c;
}

/* 03. Photographic hero -------------------------------------------------- */
.pc-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding: 90px var(--pc-gutter);
  isolation: isolate;
  background: var(--pc-forest);
  color: var(--pc-cream);
}

.pc-hero__image,
.pc-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.pc-hero__image {
  object-fit: cover;
  object-position: center;
}

.pc-hero::after {
  content: '';
  background: linear-gradient(90deg, #08231bec, #08231bb0 47%, #08231b33);
}

.pc-hero__copy {
  max-width: 850px;
}

.pc-breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.pc-hero h1 {
  font-size: clamp(42px, 5.1vw, 84px);
}

.pc-hero h1 span {
  color: #e6ec9b;
}

.pc-hero__lead {
  max-width: 570px;
  margin-top: 30px !important;
  font-size: clamp(16px, 1.3vw, 19px);
}

/* 04. Overview: sticky introduction beside campus facts ------------------ */
.pc-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  scroll-margin-top: 32px;
}

.pc-overview__intro {
  padding: clamp(65px, 8vw, 125px) clamp(30px, 6vw, 100px) clamp(65px, 8vw, 125px) var(--pc-gutter);
  background: var(--pc-forest);
  color: var(--pc-cream);
}

.pc-overview__copy {
  position: sticky;
  top: 80px;
  max-width: 560px;
}

.pc-overview .pc-eyebrow {
  color: #e6ec9b;
}

.pc-overview__copy > p:last-child {
  margin-top: 30px;
  color: #dce5d9;
}

.pc-facts {
  display: grid;
  align-content: center;
  gap: 0;
  padding: clamp(45px, 5vw, 85px) var(--pc-gutter);
}

.pc-fact {
  padding: 30px 0;
  border-bottom: 1px solid var(--pc-line);
}

.pc-fact:last-child {
  border: 0;
}

.pc-fact dt {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--pc-forest);
  font-size: 20px;
  font-weight: 600;
}

.pc-fact svg {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--pc-green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-fact dd {
  padding-left: 41px;
  color: var(--pc-muted);
  overflow-wrap: anywhere;
}

.pc-fact a:hover {
  color: var(--pc-green);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 05. Gallery ------------------------------------------------------------ */
.pc-gallery {
  padding: clamp(65px, 8vw, 125px) var(--pc-gutter);
}

.pc-section-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 44px;
}

.pc-section-intro > p {
  color: var(--pc-muted);
}

.pc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.pc-photo {
  display: block;
  overflow: hidden;
  border-radius: clamp(45px, 6vw, 110px) 4px 4px 4px;
}

.pc-photo:nth-child(2) {
  margin-top: 55px;
  border-radius: 4px;
}

.pc-photo:nth-child(3) {
  border-radius: 4px 4px clamp(45px, 6vw, 110px) 4px;
}

.pc-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 0.92;
  object-fit: cover;
  transition: transform 500ms ease;
}

.pc-photo:hover img {
  transform: scale(1.035);
}

.pc-gallery__action {
  margin-top: 44px;
  text-align: center;
}

/* 06. Getting here ------------------------------------------------------- */
.pc-directions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--pc-forest);
  color: var(--pc-cream);
}

.pc-directions__copy {
  align-self: center;
  padding: clamp(65px, 7vw, 110px) var(--pc-gutter);
}

.pc-directions .pc-eyebrow {
  color: #e6ec9b;
}

.pc-directions__copy > p:not(.pc-eyebrow) {
  max-width: 510px;
  margin-top: 28px;
  color: #dce5d9;
}

.pc-directions__media {
  min-height: 530px;
  overflow: hidden;
  border-radius: 110px 0 0 0;
  background: #e5e8de;
}

.pc-directions__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 530px;
  object-fit: cover;
}

/* 07. Accessible photo viewer ------------------------------------------- */
.pc-lightbox {
  width: min(1120px, calc(100% - 40px));
  max-height: calc(100svh - 40px);
  padding: 24px;
  border: 0;
  border-radius: 12px;
  background: var(--pc-cream);
  color: var(--pc-forest);
}

.pc-lightbox::backdrop {
  background: #08231bed;
}

.pc-lightbox__toolbar,
.pc-lightbox__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pc-lightbox__toolbar {
  margin-bottom: 20px;
}

.pc-lightbox__bottom {
  margin-top: 20px;
}

.pc-lightbox__image {
  width: 100%;
  max-height: 66svh;
  object-fit: contain;
}

.pc-lightbox button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--pc-line);
  border-radius: 5px;
  background: transparent;
  color: var(--pc-forest);
  font: 600 13px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
}

.pc-lightbox button:hover {
  background: #f0f0df;
}

.pc-lightbox__bottom p {
  font-size: 13px;
  text-align: center;
}

.vlc-clifton:has(.pc-lightbox[open]) {
  overflow: hidden;
}

/* 08. Scroll reveals: opt in only after the observer is ready ------------- */
.pc-motion .pc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.pc-motion .pc-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 09. Tablet and mobile -------------------------------------------------- */
@media (max-width: 900px) {
  .pc-overview,
  .pc-directions {
    grid-template-columns: minmax(0, 1fr);
  }

  .pc-overview__copy {
    position: static;
    max-width: 680px;
  }

  .pc-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 36px;
  }

  .pc-fact:nth-last-child(-n + 2) {
    border: 0;
  }

  .pc-gallery__grid {
    gap: 16px;
  }

  .pc-directions__media,
  .pc-directions__media img {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .vlc-clifton {
    font-size: 15px;
  }

  .pc-hero {
    min-height: 85svh;
    padding-block: 70px;
  }

  .pc-hero::after {
    background: linear-gradient(0deg, #08231be6, #08231b8c);
  }

  .pc-breadcrumb {
    font-size: 10px;
  }

  .pc-actions {
    gap: 12px;
  }

  .pc-button {
    padding-inline: 20px;
    font-size: 13px;
  }

  .pc-facts {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 30px;
  }

  .pc-fact:nth-last-child(2) {
    border-bottom: 1px solid var(--pc-line);
  }

  .pc-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .pc-photo:nth-child(2) {
    margin-top: 0;
  }

  .pc-photo img {
    aspect-ratio: 1.25;
  }

  .pc-directions__media {
    border-radius: 70px 0 0 0;
  }

  .pc-directions__media,
  .pc-directions__media img {
    min-height: 350px;
  }

  .pc-lightbox {
    width: calc(100% - 24px);
    padding: 16px;
  }

  .pc-lightbox__bottom {
    flex-wrap: wrap;
  }

  .pc-lightbox__bottom p {
    order: -1;
    flex-basis: 100%;
  }
}

/* 10. Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vlc-clifton-page {
    scroll-behavior: auto;
  }

  .pc-motion .pc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pc-photo img,
  .pc-button {
    transition: none;
  }
}

/*clifton end*/


/* ======================================================================
   Karachi campus network — isolated concept preview
   Shared Poppins fonts and image assets; no main-page styles are imported.
   ====================================================================== */

.karachi-update {
  margin: 0;
  background: #fff7ed;
  color: #202c29;
  font: 400 16px/1.8 Poppins, Arial, sans-serif;
}

.karachi-update *,
.karachi-update *::before,
.karachi-update *::after {
  box-sizing: border-box;
}

/* 02. Map-led section -------------------------------------------------- */
.ku-network {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 760px;
  height: 100svh;
  max-height: 1200px;
  overflow: hidden;
  isolation: isolate;
}

.ku-copy {
  position: relative;
  z-index: 2;
  width: 46%;
  max-width: 750px;
  padding: 75px 0 75px clamp(28px, 5.5vw, 105px);
}

.ku-eyebrow {
  margin: 0 0 28px;
  color: #287b30;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ku-copy h1 {
  margin: 0;
  font-size: clamp(42px, 4.8vw, 76px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.1;
}

.ku-copy h1 span {
  color: #287b30;
}

.ku-description {
  max-width: 520px;
  margin: 32px 0 0;
  color: #526259;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.8;
  letter-spacing: -0.015em;
}

.ku-map {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.ku-map__plane {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  aspect-ratio: 1447 / 1087;
  transform: translateY(-50%);
}

.ku-map__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 03. HTML pins stay anchored to the map's own aspect ratio -------------- */
.ku-pin {
  position: absolute;
  display: flex;
  align-items: flex-start;
  min-height: 64px;
  color: #173d31;
  text-decoration: none;
  transform: translate(-26px, -100%);
  filter: drop-shadow(0 5px 10px #173d3140);
  -webkit-tap-highlight-color: transparent;
}

.ku-pin--pechs {
  left: 78.5%;
  top: 38%;
}

.ku-pin--clifton {
  left: 67.5%;
  top: 59%;
}

.ku-pin--dha {
  left: 84%;
  top: 68%;
}

.ku-pin__marker {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 67px;
  flex: none;
  overflow: visible;
  transition: transform 180ms ease;
  transform-origin: bottom center;
}

.ku-pin__marker path {
  fill: #218437;
  stroke: #fffdf8;
  stroke-width: 3;
}

.ku-pin__marker circle {
  fill: #fffdf8;
}

.ku-pin__label {
  min-width: 95px;
  padding: 10px 21px 10px 26px;
  margin: 9px 0 0 -19px;
  border: 1px solid #d9e1d4;
  border-radius: 0 30px 30px 0;
  background: #fffdf8;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease;
}

.ku-pin:hover .ku-pin__label,
.ku-pin:focus-visible .ku-pin__label {
  background: #173d31;
  color: #fff7ed;
}

.ku-pin:hover .ku-pin__marker {
  transform: translateY(-3px);
}

.ku-pin:focus-visible {
  outline: 3px solid #173d31;
  outline-offset: 6px;
  border-radius: 12px;
}

/* 04. Tablet and mobile: text first, followed by the full pin network ---- */
@media (max-width: 1000px) {
  .ku-network {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .ku-copy {
    width: 100%;
    max-width: 720px;
    padding: 65px clamp(24px, 6vw, 60px) 28px;
  }

  .ku-copy h1 {
    font-size: clamp(42px, 7vw, 64px);
  }

  .ku-description {
    max-width: 580px;
    font-size: 16px;
  }

  .ku-map {
    position: relative;
    inset: auto;
    overflow: hidden;
    aspect-ratio: 1447 / 1848;
  }

  .ku-map::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 85px;
    background: linear-gradient(#fff7ed, transparent);
    pointer-events: none;
  }

  .ku-map__plane {
    top: 0;
    left: -70%;
    width: 170%;
    transform: none;
  }
}

@media (max-width: 600px) {
  .ku-copy {
    padding-top: 50px;
  }

  .ku-eyebrow {
    margin-bottom: 23px;
    font-size: 11px;
  }

  .ku-description {
    margin-top: 26px;
    font-size: 15px;
  }

  .ku-pin {
    min-height: 55px;
    transform: translate(-21px, -100%);
  }

  .ku-pin__marker {
    width: 42px;
    height: 54px;
  }

  .ku-pin__label {
    min-width: 76px;
    padding: 9px 14px 9px 23px;
    margin-top: 5px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ku-pin__marker,
  .ku-pin__label {
    transition: none;
  }
}


/*karachi end*/


/*karachi new*/
/* Latest document layout; existing Karachi theme and map are retained. */
.karachi-updated strong  {
  font-weight: 600;
}

.karachi-updated .hero  {
  min-height: max(690px, calc(100svh - var(--header)));
  height: auto;
  max-height: none;
}

.karachi-updated .hero-content  {
  min-height: inherit;
  height: auto;
  padding-block: 90px 120px;
}

.karachi-updated .hero h1  {
  max-width: 900px;
  font-size: clamp(42px, 5.1vw, 78px);
  line-height: 1.12;
}

.karachi-updated .hero-sub  {
  max-width: 680px;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.7;
}

.hero-campuses  {
  margin-top: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
}

.khi-editorial  {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(35px, 7vw, 100px);
  align-items: start;
}

.khi-prose  {
  max-width: 70ch;
  color: var(--muted);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.8;
}

.khi-stage-summary  {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 52px;
}

.khi-stage-summary article  {
  padding-top: 24px;
  text-align: center;
}

.khi-stage-summary h3  {
  margin-bottom: 16px;
  font-size: 23px;
  color: var(--forest);
}

.khi-stage-summary p  {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.karachi-updated .journey .section-head h2  {
  max-width: 850px;
}

.karachi-updated .journey-name p  {
  max-width: 55ch;
}

.karachi-updated .journey-name p strong  {
  color: var(--forest);
}

.khi-circle__intro  {
  max-width: 750px;
  margin-top: 46px;
  color: var(--forest);
  font-size: 19px;
}

.khi-news-grid  {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.khi-news  {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  padding: 30px 24px;
  background: #e5ebda;
  border-radius: 26px 5px 26px 5px;
  color: var(--forest);
}

.khi-news h3  {
  font-size: 24px;
  line-height: 1.25;
}

.khi-news p  {
  margin: 0;
  font-size: 15px;
}

.khi-news .text-link  {
  margin-top: auto;
}

.khi-teaching  {
  padding-block: clamp(60px, 7vw, 100px);
}

.khi-split  {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(35px, 6vw, 90px);
  align-items: center;
}

.khi-feature-photo  {
  aspect-ratio: 1.1;
  overflow: hidden;
  border-radius: 75px 5px 75px 5px;
}

.khi-feature-photo img  {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.khi-teaching h2  {
  margin-bottom: 30px;
}

.khi-campus-options  {
  padding-block: 20px clamp(40px, 5vw, 40px);
}

.khi-campus-grid  {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.khi-campus-card  {
  padding: 30px 0;
  text-align: center;
}

.khi-campus-card h3  {
  color: var(--green-dark);
}

.khi-campus-card p  {
  font-size: 16px;
}

.khi-campus-stage  {
  margin-top: 20px;
  color: var(--forest);
  font-weight: 600;
}

.khi-campus-card .text-link  {
  margin-top: 24px;
}

.khi-campus-help  {
  margin-top: 24px;
  text-align: center;
}

.khi-campus-help .text-link  {
  margin-top: 12px !important;
    display: inline-block;
}

.karachi .closing .text-link{
      display: inline-block;

}

/* Keep this complete source section visible and red during developer review. */
.khi-hide-later  {
  border-block: 2px solid #c53636;
  background: #fbe2e2;
  color: #8c2020;
}

.khi-developer-label  {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.khi-statement  {
  color: var(--green-dark);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.4;
  font-weight: 600;
}

.khi-history .actions  {
  gap: 24px;
}

.karachi-updated .khi-visit  {
  position: relative;
  z-index: 1;
}

.khi-visit > div  {
  max-width: 940px;
}

.khi-admissions-open  {
  font-weight: 600;
}

.karachi-updated .closing .btn.outline  {
  color: var(--cream);
}

@media (max-width: 1100px)  {
  .khi-stage-summary, .khi-news-grid  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 760px)  {
  .karachi-updated .hero  {
    min-height: max(740px, calc(100svh - var(--header)));
  }

  .karachi-updated .hero-content  {
    padding-block: 70px 100px;
    justify-content: center;
  }

  .karachi-updated .hero h1  {
    font-size: clamp(38px, 8.2vw, 60px);
  }

  .karachi-updated .hero-sub  {
    font-size: 15px;
  }

  .khi-editorial, .khi-split, .khi-campus-grid  {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .khi-stage-summary  {
    gap: 24px;
  }

  .khi-stage-summary h3  {
    font-size: 20px;
  }

  .khi-stage-summary p  {
    font-size: 14px;
  }

  .khi-news-grid  {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .khi-feature-photo  {
    aspect-ratio: 1.4;
    border-radius: 45px 5px 45px 5px;
  }

  .khi-campus-grid  {
    gap: 0;
  }

  .karachi-updated .closing .actions  {
    align-items: stretch;
    gap: 14px;
  }

  .karachi-updated .closing .btn  {
    flex: 1 1 220px;
  }

  .karachi-updated .header-apply  {
    min-width: 0;
  }

  .karachi-updated .header-right  {
    margin-left: auto;
  }

  .karachi-updated .menu-toggle  {
    flex: 0 0 36px;
    width: 36px;
  }

}

/* Fit the logo, city switcher and menu inside the narrowest phone header. */
@media (max-width: 380px) {
  .karachi-updated .header-inner {
    padding-inline: 16px;
    gap: 8px;
  }
  .karachi-updated .brand,
  .karachi-updated .brand img {
    width: 70px;
  }
}

/* Learning-stage and campus photo cards follow the Lahore square-photo style. */
.khi-card-photo {
  aspect-ratio: 1;
  margin: 0 0 24px;
  overflow: hidden;
  border-radius: 8px;
  background: #e5ebda;
}

.khi-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 550ms ease, filter 550ms ease;
}

.khi-campus-card:focus-within .khi-card-photo img {
  transform: scale(1.05);
  filter: brightness(1.04);
}

@media (hover: hover) and (pointer: fine) {
  .khi-stage-summary article:hover .khi-card-photo img,
  .khi-campus-card:hover .khi-card-photo img {
    transform: scale(1.05);
    filter: brightness(1.04);
  }
}

/* The generic prose grey must not override this section's dark theme. */
.khi-teaching .khi-prose,
.khi-teaching h2 {
  color: var(--cream);
}

@media (max-width: 480px) {
  .khi-stage-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .khi-card-photo img {
    transition: none;
  }
  .khi-stage-summary article:hover .khi-card-photo img,
  .khi-campus-card:hover .khi-card-photo img,
  .khi-campus-card:focus-within .khi-card-photo img {
    transform: none;
    filter: none;
  }
}

.motion-off .khi-card-photo img {
  transition: none;
  transform: none !important;
  filter: none !important;
}

/* Campus cards: framed photography, left-aligned copy and an editorial divider. */
.khi-campus-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
  border: 1px solid #173d3120;
  border-radius: 18px;
  background: var(--paper);
  text-align: left;
}
.khi-campus-card .khi-card-photo {
  flex: none;
  aspect-ratio: 1.28;
  margin-bottom: 0;
  border-radius: 10px;
}
.khi-campus-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 24px 18px 18px;
}
.khi-campus-card h3 {
  color: var(--forest);
  font-size: clamp(28px, 2.5vw, 38px);
}
.khi-campus-card .khi-campus-stage {
  align-self: stretch;
  min-height: 58px;
  padding-bottom: 18px;
  margin-top: 12px;
  border-bottom: 1px solid #173d3126;
  color: #527767;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.khi-campus-card__body > p:not(.khi-campus-stage) {
  flex: 1;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}
.khi-campus-card .text-link {
  margin-top: 24px;
  color: var(--forest);
}

/* Editorial story popup: an open cream canvas with layered photographs. */
.khi-story-dialog {
  width: min(1440px, 96vw);
  max-width: none;
  max-height: 94svh;
  padding: 0;
  border: 1px solid #173d3126;
  border-radius: 22px;
  background: var(--paper);
  color: var(--forest);
  overscroll-behavior: contain;
}
.khi-story-dialog::backdrop {
  background: #0b281dcc;
  backdrop-filter: blur(8px);
}
.khi-story-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
}
.khi-preview-label {
  display: inline-block;
  margin-left: 14px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
}
.khi-preview-label[hidden] {
  display: none;
}
.khi-story-close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid #173d3128;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest);
  font-size: 27px;
  line-height: 1;
}
.khi-story-page {
  padding: 12px clamp(24px, 5vw, 76px) 54px;
}
.khi-popup-intro,
.khi-popup-gallery {
  display: grid;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  background: transparent;
}
.khi-popup-intro {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  padding: 10px 0 48px;
  border-bottom: 1px solid #173d311c;
}
.khi-popup-copy {
  min-width: 0;
}
.khi-story-page .eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 11px;
  letter-spacing: .18em;
  margin-bottom: 24px;
}
.khi-story-page .eyebrow::after {
  content: '';
  width: 64px;
  height: 1px;
  background: #52776780;
}
.khi-popup-copy h2 {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.05em;
}
.khi-popup-copy h3 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.14;
}
.khi-popup-copy > p:not(.eyebrow) {
  max-width: 48ch;
  margin-top: 24px;
  color: #526459;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.7;
}
.khi-popup-triptych {
  position: relative;
  isolation: isolate;
  height: clamp(270px, 28vw, 390px);
}
.khi-popup-triptych figure {
  position: absolute;
  left: 17%;
  top: 16%;
  z-index: 1;
  width: 39%;
  height: 77%;
  overflow: hidden;
  border: 4px solid var(--paper);
  border-radius: 20px;
  background: #c1cdb8;
  box-shadow: 0 18px 28px #173d3126;
  transform: translateX(-50%) rotate(-8deg);
}
.khi-popup-triptych figure:nth-child(2) {
  left: 50%;
  top: 0;
  z-index: 3;
  width: 43%;
  height: 100%;
  transform: translateX(-50%);
}
.khi-popup-triptych figure:nth-child(3) {
  left: 83%;
  top: 16%;
  transform: translateX(-50%) rotate(8deg);
}
.khi-popup-triptych img,
.khi-gallery-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.khi-popup-gallery {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(34px, 5vw, 80px);
  padding-top: 36px;
}
.khi-popup-gallery__visual {
  position: relative;
  min-width: 0;
}
.khi-gallery-stack {
  position: relative;
  height: clamp(260px, 25vw, 350px);
  margin-inline: 28px;
  isolation: isolate;
}
.khi-gallery-stack figure {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 38%;
  height: 96%;
  overflow: hidden;
  border: 3px solid var(--paper);
  border-radius: 16px;
  background: #c1cdb8;
  box-shadow: 0 14px 26px #173d3122;
  transform: translateX(-50%);
}
.khi-gallery-stack [data-offset="-1"],
.khi-gallery-stack [data-offset="1"] {
  top: 10%;
  z-index: 2;
  height: 78%;
}
.khi-gallery-stack [data-offset="-1"] {
  left: 30%;
}
.khi-gallery-stack [data-offset="1"] {
  left: 70%;
}
.khi-gallery-stack [data-offset="-2"],
.khi-gallery-stack [data-offset="2"] {
  top: 18%;
  z-index: 1;
  height: 62%;
}
.khi-gallery-stack [data-offset="-2"] {
  left: 13%;
}
.khi-gallery-stack [data-offset="2"] {
  left: 87%;
}
.khi-gallery-controls {
  position: absolute;
  top: calc(50% + 18px);
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.khi-gallery-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid #173d3110;
  border-radius: 50%;
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 6px 20px #173d3110;
  font-size: 23px;
  pointer-events: auto;
}
#popup-gallery-count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 800px) {
  .khi-popup-intro,
  .khi-popup-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .khi-popup-intro {
    padding-bottom: 36px;
  }
  .khi-popup-triptych {
    width: 90%;
    height: 330px;
    max-width: 540px;
    margin-inline: auto;
  }
  .khi-popup-gallery > .khi-popup-copy {
    grid-row: 1;
  }
  .khi-gallery-stack {
    height: 310px;
  }
}
@media (max-width: 480px) {
  .khi-story-dialog {
    width: calc(100vw - 16px);
    max-height: 96svh;
    border-radius: 16px;
  }
  .khi-story-toolbar {
    padding: 10px 14px;
    font-size: 9px;
    letter-spacing: .06em;
  }
  .khi-preview-label {
    display: block;
    margin: 2px 0 0;
  }
  .khi-story-page {
    padding: 16px 20px 32px;
  }
  .khi-popup-triptych {
    height: 230px;
    width: 92%;
  }
  .khi-popup-triptych figure {
    border-width: 3px;
    border-radius: 13px;
  }
  .khi-gallery-stack {
    height: 245px;
    margin-inline: 18px;
  }
  .khi-gallery-stack figure {
    width: 43%;
    border-radius: 12px;
    border-width: 2px;
  }
  .khi-gallery-controls button {
    width: 36px;
    height: 36px;
  }
  .khi-campus-card .khi-campus-stage {
    min-height: 0;
  }
}

/*karachi new end*/


/*application form*/

/* 01. Page foundation ---------------------------------------------------- */
.vlc-application {
  margin: 0;
  background: #fff7ed;
  color: #2f2f2f;
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.vlc-application * {
  box-sizing: border-box;
}

/* 02. Full-width photographic hero -------------------------------------- */
.ap-hero {
  position: relative;
  display: flex;
  align-items: center;
      margin-top: 80px;

  min-height: 92svh;
  padding: 90px clamp(22px, 5vw, 88px);
  isolation: isolate;
  color: #fff7ed;
  background: #173d31;
}

.ap-hero__image,
.ap-hero::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.ap-hero__image {
  object-fit: cover;
  object-position: center;
}

.ap-hero::after {
  content: '';
  background: linear-gradient(90deg, rgba(8, 35, 27, 0.92), rgba(8, 35, 27, 0.69) 50%, rgba(8, 35, 27, 0.25));
}

.ap-hero__copy {
  max-width: 900px;
}

.ap-breadcrumb,
.ap-eyebrow {
  margin: 0 0 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ap-hero h1 {
  margin: 0 0 30px;
  font-size: clamp(42px, 5.1vw, 84px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.12;
}

.ap-hero h1 span {
  color: #e6ec9b;
}

.ap-hero__copy > p:not(.ap-breadcrumb) {
  max-width: 690px;
  margin: 20px 0 0;
  font-size: clamp(16px, 1.3vw, 19px);
}

/* 03. Application layout ------------------------------------------------ */
.ap-application {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(60px, 7vw, 110px) clamp(20px, 5vw, 60px);
}

.ap-intro {
  margin-bottom: 44px;
}

.ap-eyebrow {
  margin-bottom: 16px;
  color: #287b30;
}

.ap-intro h2 {
  margin: 0;
  font-size: clamp(34px, 3.7vw, 59px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

@media (max-width: 640px) {
  .ap-hero {
    min-height: 85svh;
    padding-block: 70px;
  }

  .ap-hero::after {
    background: rgba(8, 35, 27, 0.76);
  }

  .vlc-application {
    font-size: 15px;
  }
}

/* 04. Introductory copy -------------------------------------------------- */
.ap-intro > p:last-child {
  max-width: 720px;
  margin: 22px 0 0;
  color: #64675f;
}

.ap-application .vlc-form a {
  color: #287b30;
  text-underline-offset: 4px;
}

/*application form end*/


/*beyond vlc*/
/* 02. Theme, typography and foundation ----------------------------------- */
.beyond-page {
  --vb-cream: #fff7ed;
  --vb-paper: #fffbf5;
  --vb-sage: #f0f0df;
  --vb-forest: #173d31;
  --vb-green: #287b30;
  --vb-lime: #e6ec9b;
  --vb-ink: #2f2f2f;
  --vb-muted: #64675f;
  --vb-line: #cbd1be;
  --vb-gutter: clamp(22px, 5vw, 88px);
  --vb-heading: clamp(34px, 3.7vw, 59px);
  margin: 0;
  background: var(--vb-cream);
  color: var(--vb-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.beyond-page *,
.beyond-page *::before,
.beyond-page *::after {
  box-sizing: border-box;
}

.beyond-page [hidden] {
  display: none !important;
}

.beyond-page :where(h1, h2, h3, p, ul, figure) {
  margin: 0;
}

.beyond-page :where(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

.beyond-page h2 {
  font-size: var(--vb-heading);
}

.beyond-page h3 {
  font-size: clamp(22px, 2vw, 30px);
}

.beyond-page :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.beyond-page a {
  color: inherit;
  text-decoration: none;
}

.beyond-page :where(a, summary):focus-visible {
  outline: 3px solid var(--vb-green);
  outline-offset: 5px;
}

.beyond-page ::selection {
  background: var(--vb-lime);
  color: var(--vb-forest);
}

.vb-section {
  padding: clamp(75px, 8vw, 140px) var(--vb-gutter);
}

.vb-section-title {
  max-width: 900px;
  margin-bottom: clamp(35px, 4vw, 60px);
}

.vb-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--vb-green);
}

.vb-icon {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
}

.vb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.vb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 27px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--vb-green);
  color: var(--vb-cream);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition: background 180ms ease, color 180ms ease;
}

.beyond-page a.vb-button {
  color: var(--vb-cream);
}

.vb-button:hover {
  background: var(--vb-forest);
}

/* 03. Full-width photograph hero ----------------------------------------- */
.vb-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 740px;
  height: 100svh;
  max-height: 1100px;
  background: var(--vb-forest);
  color: var(--vb-cream);
}

.vb-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.vb-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}

.vb-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed 0%, #092218c9 38%, #09221847 78%), linear-gradient(0deg, #071a14b3, transparent 50%);
}

.vb-hero__copy {
  position: relative;
  width: 100%;
  padding: 75px var(--vb-gutter);
}

.vb-hero .vb-eyebrow {
  max-width: 650px;
  color: var(--vb-lime);
  margin-bottom: 30px;
}

.vb-hero h1 {
  max-width: 1000px;
  font-size: clamp(46px, 5.1vw, 84px);
}

.vb-hero__lead {
  max-width: 720px;
  margin-top: 22px;
  font-size: clamp(25px, 2.6vw, 40px);
  letter-spacing: -0.035em;
  line-height: 1.35;
}

.vb-hero__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 710px;
  padding: 0;
  margin-top: 32px;
  list-style: none;
}

.vb-hero__highlights li {
  padding: 7px 14px;
  border: 1px solid #ffffff59;
  border-radius: 999px;
  color: #f2f3e8;
  font-size: 12px;
}

.vb-hero__dates {
  margin: 24px 0 30px;
  font-size: 17px;
  font-weight: 600;
}

.vb-hero .vb-button {
  background: #49b13c;
}

.vb-hero .vb-button:hover {
  background: var(--vb-lime);
}

.beyond-page .vb-hero a.vb-button {
  color: #0d241b;
}

.vb-hero .vb-button--outline {
  border-color: #ffffff80;
  background: transparent;
}

.beyond-page .vb-hero a.vb-button--outline {
  color: var(--vb-cream);
}

.beyond-page .vb-hero a.vb-button--outline:hover {
  color: var(--vb-forest);
}

.vb-hero a:focus-visible {
  outline-color: var(--vb-lime);
}

/* 04. Why VLC Beyond: Karachi's full-width philosophy layout -------------- */
.vb-story.vb-section {
  padding: 0 0 clamp(75px, 8vw, 140px);
}

.vb-story__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 720px;
  background: var(--vb-cream);
  color: var(--vb-cream);
}

.vb-story__photo {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  border-top-left-radius: 44%;
  background: var(--vb-cream);
  container-type: size;
}

/* Swap the panel's dimensions before rotating the sideways source. This keeps
   object-fit correct at every screen size without creating a duplicate asset. */
.vb-story__photo img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100cqh;
  max-width: none;
  height: 100cqw;
  object-fit: cover;
  object-position: 20% center;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.vb-story__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(44px, 5.6vw, 92px);
  background: var(--vb-forest);
}

.vb-story__copy > .vb-eyebrow {
  margin-bottom: 27px;
  color: #eee75b;
  font-size: 13px;
  line-height: 1.7;
}

.vb-story h2 {
  max-width: 600px;
  font-size: clamp(33px, 3.25vw, 52px);
}

.vb-story__copy > p:not(.vb-eyebrow) {
  margin-top: 17px;
  color: #e0e8dc;
  font-size: 15px;
  line-height: 1.8;
}

.vb-story__copy h2 + p {
  margin-top: 27px;
}

/* Match Karachi's wide, character-by-character scroll statement. */
.vb-belief {
  max-width: 1150px;
  margin: 65px var(--vb-gutter) 0;
  padding-top: 38px;
  color: var(--vb-green);
  font-size: clamp(24px, 3.1vw, 46px);
  line-height: 1.45;
  letter-spacing: -0.035em;
}

.vb-typing .vb-type-letter {
  visibility: hidden;
}

.vb-typing .vb-type-letter.written {
  visibility: visible;
}

.vb-belief__accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 05. Programme differences: sticky title and five editorial rows --------- */
.vb-difference {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(45px, 7vw, 110px);
  background: var(--vb-sage);
}

.vb-difference__intro,
.vb-faq__intro {
  position: sticky;
  top: 45px;
  align-self: start;
}

.vb-difference__item {
  padding: 30px 0;
  border-bottom: 1px solid var(--vb-line);
}

.vb-difference__item:first-child {
  padding-top: 0;
}

.vb-difference__item h3 {
  margin-bottom: 15px;
  color: var(--vb-forest);
}

.vb-difference__item p {
  max-width: 560px;
  color: var(--vb-muted);
}

/* 06. Complete course catalogue and accessible native disclosures -------- */
.vb-courses {
  background: var(--vb-cream);
  scroll-margin-top: 24px;
}

/* Category buttons wrap on small screens; the catalogue is grouped in HTML,
   so every course remains available when JavaScript is disabled. */
.vb-courses .vb-section-title {
  margin-bottom: 30px;
}

.vb-course-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 35px;
}

.vb-course-filter {
  min-height: 44px;
  padding: 11px 19px;
  border: 1px solid var(--vb-line);
  border-radius: 30px;
  background: var(--vb-paper);
  color: var(--vb-forest);
  font: 400 13px/1.5 Poppins, Arial, sans-serif;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.vb-course-filter:hover {
  border-color: var(--vb-green);
  background: var(--vb-sage);
}

.vb-course-filter[aria-pressed='true'] {
  border-color: var(--vb-forest);
  background: var(--vb-forest);
  color: var(--vb-cream);
}

.vb-course-filter:focus-visible {
  outline: 3px solid var(--vb-green);
  outline-offset: 4px;
}

.vb-filter-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vb-courses__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}

.vb-course {
  min-width: 0;
  border: 1px solid var(--vb-line);
  border-radius: 20px 4px 20px 4px;
  background: var(--vb-paper);
  overflow: hidden;
}

.vb-course:nth-child(3n + 2) {
  background: var(--vb-sage);
}

.vb-course summary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 238px;
  padding: 30px 27px;
  cursor: pointer;
  list-style: none;
}

.vb-course summary::-webkit-details-marker,
.vb-faq summary::-webkit-details-marker {
  display: none;
}

.vb-course__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--vb-line);
  border-radius: 50%;
  color: var(--vb-green);
  margin-bottom: 24px;
}

.vb-course__category {
  color: var(--vb-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-course h3 {
  margin-top: 9px;
  color: var(--vb-forest);
  font-size: 22px;
  overflow-wrap: anywhere;
}

.vb-disclosure {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
}

.vb-disclosure::before,
.vb-disclosure::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 2px;
  width: 14px;
  height: 2px;
  background: currentColor;
}

.vb-disclosure::after {
  transform: rotate(90deg);
}

.vb-course .vb-disclosure {
  position: absolute;
  top: 32px;
  right: 25px;
  color: var(--vb-green);
}

.beyond-page details[open] > summary .vb-disclosure::after {
  transform: none;
}

.vb-course[open] {
  background: var(--vb-forest);
  border-color: var(--vb-forest);
  color: var(--vb-cream);
}

.vb-course[open] h3,
.vb-course[open] .vb-disclosure,
.vb-course[open] .vb-course__icon {
  color: var(--vb-lime);
}

.vb-course[open] .vb-course__category {
  color: #e1e8de;
}

.vb-course[open] .vb-course__icon {
  border-color: #ffffff59;
}

.vb-course__body {
  padding: 0 27px 30px;
}

.vb-course__body p {
  margin-bottom: 26px;
  font-size: 14px;
  line-height: 1.8;
}

.vb-course__body .vb-button {
  background: var(--vb-lime);
}

.beyond-page .vb-course__body a.vb-button {
  color: var(--vb-forest);
}

.vb-course__body .vb-button:hover {
  background: var(--vb-cream);
}

.vb-course[open] summary:focus-visible,
.vb-course__body a:focus-visible {
  outline-color: var(--vb-lime);
  outline-offset: -6px;
}

/* 07. Student Showcase: all eight original photographs -------------------- */
.vb-showcase {
  background: var(--vb-sage);
}

.vb-showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.vb-showcase__photo {
  aspect-ratio: 4 / 5;
  border-radius: 40px 4px 35px 4px;
  overflow: hidden;
}

.vb-showcase__photo:nth-child(2n) {
  margin-top: 38px;
  border-radius: 4px 40px 4px 35px;
}

.vb-showcase__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 08. Eight programme gains ---------------------------------------------- */
.vb-gains {
  background: var(--vb-forest);
  color: var(--vb-cream);
}

.vb-gains__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 42px 24px;
  padding: 0;
  list-style: none;
}

.vb-gains__grid li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid #ffffff40;
  font-size: 17px;
}

.vb-gains__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: none;
  border: 1px solid #ffffff59;
  border-radius: 50%;
  color: var(--vb-lime);
}

/* 09. All 22 FAQs: sticky heading and a lined question list --------------- */
.vb-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(45px, 7vw, 110px);
}

.vb-faq__list {
  border-top: 1px solid var(--vb-line);
}

.vb-faq__item {
  border-bottom: 1px solid var(--vb-line);
}

.vb-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 25px 0;
  color: var(--vb-forest);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
  list-style: none;
  cursor: pointer;
}

.vb-faq__answer {
  padding: 0 44px 26px 0;
  color: var(--vb-muted);
  font-size: 15px;
}

/* 10. Closing enrolment band; intentionally no site footer ---------------- */
.vb-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--vb-sage);
}

.vb-cta h2 {
  max-width: 900px;
}

.vb-cta .vb-button {
  flex: none;
}

/* 11. Scroll reveals; native scroll position is never modified ------------ */
.vb-motion .vb-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.vb-motion .vb-reveal.is-visible {
  opacity: 1;
  transform: none;
      

}
.vb-motion .vb-reveal.is-visible h2{
padding-top: 30%;
}

/* 12. Tablet adaptations ------------------------------------------------- */
@media (max-width: 1100px) {
  .vb-story__copy {
    padding: 42px;
  }

  .vb-courses__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vb-gains__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-showcase__photo {
    aspect-ratio: 1.25;
  }

  .vb-cta h2 {
    max-width: 700px;
  }
}

/* 13. Mobile: consistent type scale and stacked editorial sections ------- */
@media (max-width: 760px) {
  .beyond-page {
    font-size: 15px;
  }

  .vb-section {
    padding: 70px var(--vb-gutter);
  }

  .vb-hero {
    min-height: 100svh;
    height: auto;
    max-height: none;
  }

  .vb-hero__copy {
    padding: 65px var(--vb-gutter) 75px;
  }

  .vb-hero h1 {
    font-size: clamp(42px, 10.5vw, 62px);
  }

  .vb-hero .vb-eyebrow {
    max-width: 340px;
    font-size: 10px;
    margin-bottom: 28px;
  }

  .vb-hero__lead {
    font-size: 26px;
  }

  .vb-hero__dates {
    font-size: 14px;
  }

  .vb-hero__highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 330px);
    gap: 9px;
  }

  .vb-hero__highlights li {
    padding: 7px 11px;
    font-size: 11px;
    text-align: center;
  }

  .vb-hero__media img {
    object-position: 66% center;
  }

  .vb-hero__media::after {
    background: linear-gradient(90deg, #092218e6, #0922188f), linear-gradient(0deg, #071a14c9, transparent);
  }

  .vb-actions {
    gap: 12px;
  }

  .vb-button {
    padding: 15px 20px;
    font-size: 13px;
  }

  .vb-story.vb-section {
    padding: 0 0 70px;
  }

  .vb-story__top {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .vb-story__photo {
    width: 100%;
    min-height: 360px;
    height: 60vw;
    max-height: 520px;
    border-top-left-radius: 150px;
  }

  .vb-story__copy {
    padding: 45px 26px 52px;
  }

  .vb-story h2 {
    font-size: 35px;
  }

  .vb-difference,
  .vb-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .vb-belief {
    margin-top: 40px;
    padding-top: 30px;
    font-size: 27px;
    line-height: 1.48;
  }

  .vb-difference__intro,
  .vb-faq__intro {
    position: static;
  }

  .vb-courses__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .vb-course summary {
    min-height: 225px;
    padding: 24px 18px;
  }

  .vb-course h3 {
    font-size: 19px;
  }

  .vb-course .vb-disclosure {
    top: 28px;
    right: 14px;
  }

  .vb-course__body {
    padding: 0 18px 24px;
  }

  .vb-course__category {
    font-size: 9px;
  }

  .vb-course__icon {
    width: 46px;
    height: 46px;
  }

  .vb-course__body .vb-button {
    width: 100%;
    padding-inline: 8px;
  }

  .vb-showcase__grid {
    gap: 14px;
  }

  .vb-showcase__photo {
    aspect-ratio: 4 / 5;
    border-radius: 28px 4px 22px 4px;
  }

  .vb-showcase__photo:nth-child(2n) {
    margin-top: 24px;
    border-radius: 4px 28px 4px 22px;
  }

  .vb-gains__grid {
    gap: 18px;
  }

  .vb-gains__grid li {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    font-size: 15px;
  }

  .vb-faq__item summary {
    font-size: 15px;
  }

  .vb-faq__answer {
    padding-right: 0;
    font-size: 14px;
  }

  .vb-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .vb-courses__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vb-course summary {
    min-height: 210px;
    padding: 26px;
  }

  .vb-course h3 {
    font-size: 22px;
    overflow-wrap: normal;
  }

  .vb-course .vb-disclosure {
    top: 30px;
    right: 26px;
  }

  .vb-course__body {
    padding: 0 26px 28px;
  }

  .vb-course__body .vb-button {
    width: auto;
    padding-inline: 22px;
  }
}

/* 14. Motion preference and print fallback ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vb-typing .vb-type-letter {
    visibility: visible;
  }

  .vb-motion .vb-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .vb-button {
    transition: none;
  }
}

@media print {
  .vb-typing .vb-type-letter {
    visibility: visible;
  }

  .vb-motion .vb-reveal {
    opacity: 1;
    transform: none;
  }

  .vb-difference__intro,
  .vb-faq__intro {
    position: static;
  }
}


/*beyond vlc end*/

/* ==========================================================================
   VLC Beyond Registration — page-specific body styles

   01. Centralized fonts and theme
   02. Programme hero
   03. Registration layout
   04. Fields and campus choices
   05. Sessions and fees
   06. Scroll reveals
   07. Tablet and mobile
   08. Reduced motion

   Uses shared fonts/images. No header or footer rules are included.
   ========================================================================== */
.beyond-registration-page {

  --vr-cream: #fff7ed;
  --vr-paper: #fffbf5;
  --vr-sage: #f0f0df;
  --vr-forest: #173d31;
  --vr-green: #287b30;
  --vr-lime: #e6ec9b;
  --vr-ink: #2f2f2f;
  --vr-muted: #64675f;
  --vr-line: #cbd1be;
  --vr-gutter: clamp(22px, 5vw, 88px);
  margin: 0;
  background: var(--vr-cream);
  color: var(--vr-ink);
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.beyond-registration-page *,
.beyond-registration-page *::before,
.beyond-registration-page *::after {
  box-sizing: border-box;
}

.beyond-registration-page :where(h1, h2, h3, p, ul) {
  margin: 0;
}

.beyond-registration-page :where(h1, h2, h3) {
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.045em;
}

.beyond-registration-page :where(input, select, button) {
  font: inherit;
}
.beyond-registration-page :where(input, select, button):focus-visible {
  outline: 3px solid var(--vr-green);
  outline-offset: 4px;
}

.beyond-registration-page [hidden] {
  display: none !important;
}

.beyond-registration-page ::selection {
  background: var(--vr-lime);
  color: var(--vr-forest);
}
.vr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 02. Programme hero ----------------------------------------------------- */

.vbre-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 740px;
  height: 100svh;
  max-height: 1100px;
  background: var(--vr-forest);
  color: var(--vr-cream);
}

.vbre-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.vbre-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}

.vbre-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #092218ed 0%, #092218c9 38%, #09221847 78%), linear-gradient(0deg, #071a14b3, transparent 50%);
}

.vbre-hero__copy {
  position: relative;
  width: 100%;
  padding: 75px var(--vr-gutter);
}

.vbre-eyebrow,
.vr-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.vbre-hero .vbre-eyebrow {
  max-width: 650px;
  margin-bottom: 30px;
  color: var(--vr-lime);
}

.vbre-hero h1 {
  font-size: clamp(42px, 5.1vw, 84px);
}

.vbre-hero__lead {
  max-width: 720px;
  margin-top: 22px;
  font-size: clamp(25px, 2.6vw, 40px);
  letter-spacing: -0.035em;
  line-height: 1.35;
}

.vbre-hero__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 710px;
  padding: 0;
  margin-top: 32px;
  list-style: none;
}

.vbre-hero__highlights li {
  padding: 9px 17px;
  border: 1px solid #fff7ed66;
  border-radius: 30px;
  font-size: 13px;
}

.vbre-hero__dates {
  margin-top: 27px;
  font-size: 17px;
}




/* 03. Registration layout ----------------------------------------------- */
.vr-registration {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 65px clamp(35px, 6vw, 95px);
  padding: clamp(80px, 8vw, 130px) var(--vr-gutter);
}

.vr-registration__intro {
  align-self: start;
  padding-top: 30px;
}

.vr-eyebrow {
  margin-bottom: 25px;
  color: var(--vr-green);
}

.vr-registration h2 {
  font-size: clamp(34px, 3.7vw, 59px);
}

.vr-registration h2 span {
  color: var(--vr-green);
}

/* The form owns both panels while they share the section's visual grid. */
.vr-form {
  display: contents;
}

.vr-form__card {
  min-width: 0;
  padding: clamp(25px, 3vw, 48px);
  border: 1px solid var(--vr-line);
  border-radius: 24px;
  background: var(--vr-paper);
  box-shadow: 0 20px 55px #173d3107;
}

/* 04. Fields and campus choices ----------------------------------------- */

.vr-fieldset {
  min-width: 0;
  padding: 0;
  margin: 0 0 28px;
  border: 0;
}

.vr-fieldset:last-child {
  margin-bottom: 0;
}

.vr-fieldset legend,
.vr-field label {
  display: block;
  padding: 0;
  margin-bottom: 10px;
  color: var(--vr-forest);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.vr-fieldset legend span,
.vr-field label span,
.vr-sessions h3 span {
  color: var(--vr-green);
}

.vr-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vr-choice {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 10px 17px;
  border: 1px solid var(--vr-line);
  border-radius: 30px;
  color: var(--vr-forest);
  font-size: 13px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.vr-choice:has(input:checked) {
  border-color: var(--vr-green);
  background: var(--vr-sage);
}

.vr-choice:has(input:focus-visible) {
  outline: 3px solid var(--vr-green);
  outline-offset: 3px;
}

.vr-choice input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--vr-green);
}

.vr-gates:has(.gate-set:not([hidden])) {
  padding-top: 22px;
  border-top: 1px solid var(--vr-line);
}

.vr-gates:not(:has(.gate-set:not([hidden]))) {
  display: none;
}

.vr-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
}

.vr-field {
  min-width: 0;
}

.vr-field input,
.vr-field select,
.vr-fieldset > select {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  border: 1px solid var(--vr-line);
  border-radius: 8px;
  background: var(--vr-paper);
  color: var(--vr-forest);
  font-size: 14px;
}

.vr-personal :disabled,
.vr-fieldset > select:disabled {
  opacity: 1;
  background: #f4f2e9;
  color: var(--vr-muted);
  -webkit-text-fill-color: var(--vr-muted);
  cursor: not-allowed;
}

.vr-field input::placeholder {
  opacity: 1;
  color: var(--vr-muted);
}

/* 05. Sessions and fees -------------------------------------------------- */

.vr-sessions {
  grid-column: 1 / -1;
  min-width: 0;
}

.vr-sessions h3 {
  margin-bottom: 25px;
  color: var(--vr-forest);
  font-size: clamp(22px, 2vw, 30px);
}

.asp-table-shell {
  overflow: hidden;
  border: 1px solid var(--vr-line);
  border-radius: 16px;
  background: var(--vr-paper);
}

.asp-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
  line-height: 1.65;
}

.asp-table th {
  padding: 18px 14px;
  background: var(--vr-forest);
  color: var(--vr-cream);
  font-size: 12px;
  font-weight: 600;
}

.asp-table td {
  padding: 22px 14px;
  border-top: 1px solid var(--vr-line);
  vertical-align: top;
}

.asp-table th:first-child,
.asp-selection {
  width: 48px;
  text-align: center;
}

.asp-table input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--vr-green);
  cursor: pointer;
}

.asp-empty {
  height: 150px;
  color: var(--vr-muted);
  text-align: center;
  vertical-align: middle !important;
}

.asp-act {
  display: block;
  color: var(--vr-forest);
  font-size: 16px;
  font-weight: 600;
}

.asp-venue {
  display: block;
  max-width: 280px;
  margin-top: 5px;
  color: var(--vr-muted);
  font-size: 12px;
}

.asp-fee {
  color: var(--vr-forest);
  font-weight: 600;
  white-space: nowrap;
}

.asp-badge {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--vr-line);
  border-radius: 20px;
  color: var(--vr-forest);
  font-size: 11px;
  line-height: 1.5;
}

.asp-row.is-selected {
  background: var(--vr-sage);
}

.asp-row.is-clash .asp-badge {
  border-color: #b88542;
  background: #fff0dc;
  color: #704714;
}

.asp-alert {
  padding: 20px 24px;
  margin-bottom: 22px;
  border: 1px solid #d5b786;
  border-radius: 12px;
  background: #fff0dc;
  color: #704714;
  font-size: 14px;
}

.asp-alert-title {
  margin-bottom: 6px;
  font-weight: 600;
}

.asp-summary {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 25px;
  padding: 24px 0;
  color: var(--vr-forest);
  font-size: 15px;
}

#aspTotal {
  font-weight: 600;
}

.vr-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--vr-line);
}

.vr-submit-row p {
  color: var(--vr-green);
  font-weight: 600;
}

#aspSubmit {
  min-width: 185px;
  min-height: 54px;
  padding: 14px 30px;
  border: 0;
  border-radius: 6px;
  background: var(--vr-forest);
  color: var(--vr-cream);
  font-size: 14px;
  font-weight: 600;
}

#aspSubmit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 06. Scroll reveals ---------------------------------------------------- */

.vr-motion .vr-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.vr-motion .vr-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 07. Tablet and mobile ------------------------------------------------- */

@media (max-width: 1050px) {
  .vr-registration {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .vr-registration__intro {
    padding-top: 0;
  }

  .vr-registration h2 br {
    display: none;
  }

}

/* Session rows become cards, retaining table semantics and all seven columns. */
@media (max-width: 900px) {
  .asp-table,
  .asp-table tbody {
    display: block;
  }

  .asp-table thead {
    display: block;
    padding: 15px 20px;
    background: var(--vr-forest);
  }

  .asp-table thead tr {
    display: block;
  }

  .asp-table th {
    display: none;
    padding: 0;
  }

  .asp-table th:first-child {
    display: block;
    width: auto;
    text-align: left;
  }

  .asp-table th:first-child::after {
    content: 'Activity';
    display: inline-block;
    margin-left: 16px;
    vertical-align: top;
    line-height: 26px;
  }

  .asp-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 25px;
    border-top: 1px solid var(--vr-line);
  }

  .asp-table td {
    display: block;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }

  .asp-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: var(--vr-muted);
    font-size: 11px;
  }

  .asp-selection {
    position: absolute;
    top: 25px;
    right: 20px;
    width: 30px;
  }

  .asp-activity {
    grid-column: 1 / -1;
    padding-right: 35px !important;
  }

  .asp-status {
    grid-column: 1 / -1;
  }

  .asp-empty {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 140px;
    padding: 25px !important;
  }
}

@media (max-width: 600px) {
  .beyond-registration-page {
    font-size: 15px;
  }

 

  .vr-registration {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .vr-form__card {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .vr-fields {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .vr-field input,
  .vr-field select,
  .vr-fieldset > select {
    font-size: 16px;
  }

  .vr-submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  .asp-row {
    gap: 18px;
    padding: 22px 20px;
  }
}

/* 08. Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .beyond-registration-page *,
  .beyond-registration-page *::before,
  .beyond-registration-page *::after {
    transition: none !important;
  }

  .vr-motion .vr-reveal {
    opacity: 1;
    transform: none;
  }
}


/*homepgae*/


.sticky-title {
  align-self: start;
  position: sticky;
  top: 64px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 50;
  padding: 12px 20px;
  background: var(--cream);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: translateY(0);
}
.photo {
  overflow: hidden;
  background: var(--sage);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 02. Video hero: no navigation/header */
.hero-homepage {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(780px, 100svh);
  padding-block: 90px 110px;
  isolation: isolate;
  background: var(--forest);
  color: var(--cream);
}
.hero-homepage-media, .hero-homepage-media::after {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-homepage-media {
  overflow: hidden;
}
.hero-homepage-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-homepage-media::after {
  content: '';
  z-index: 1;
  background: linear-gradient(90deg, #0b281dea 0%, #0b281dbd 46%, #0b281d44 100%);
}
.hero-homepage-copy {
  position: relative;
}
.hero-homepage-brand {
  width: 100px;
  height: 82px;
  object-fit: contain;
  padding: 8px;
  margin-bottom: 36px;
  background: var(--cream);
  border-radius: 5px;
}
.hero-homepage h1 {
  max-width: 850px;
}
.hero-homepage-lead {
  max-width: 660px;
  margin-top: 28px;
  font-size: clamp(19px, 1.75vw, 25px);
  line-height: 1.5;
}
.hero-homepage-detail {
  max-width: 650px;
  margin-top: 20px;
  opacity: 0.9;
}
.hero-homepage .button--outline:hover {
  background: #fff7ed18;
}
.hero-homepage-scroll {
  position: absolute;
  bottom: 30px;
  left: var(--gutter);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.hero-homepage-scroll span {
  display: inline-block;
  margin-left: 20px;
}
.video-toggle {
  position: absolute;
  top: 26px;
  right: var(--gutter);
  padding: 9px 17px;
  border: 1px solid #fff7ed55;
  border-radius: 100px;
  color: var(--cream);
  background: #173d3180;
  font-size: 12px;
}

/* 03. Welcome and approach */
.welcome {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 7vw, 120px);
}
.welcome-photo {
  height: 310px;
  max-width: 430px;
  margin-top: 45px;
  border-radius: 70px 8px 70px 8px;
}
.welcome-prose {
  padding-top: 42px;
}
.welcome-prose > p:first-child {
  font-size: 22px;
  line-height: 1.6;
}
.welcome-note {
  margin-top: 40px;
  padding: 30px;
  border-left: 3px solid var(--green);
  background: var(--paper);
}
.welcome-note p:first-child {
  font-size: 26px;
  font-weight: 600;
}
.welcome-note p:last-child {
  color: var(--green);
  font-weight: 600;
}
.panel, .panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.panel-copy h2 {
  margin-bottom: 32px;
}
.panel-photo {
  aspect-ratio: 0.88;
  border-radius: 100px 10px 100px 10px;
}
.story {
  padding-top: 40px;
}
.academic {
  display: block;
  background: var(--forest);
  color: var(--cream);
}
.academic .panel-photo {
  aspect-ratio: 0.84;
}
.academic .button {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--forest);
}
.statement {
  margin-top: 32px;
  font-size: clamp(24px, 2.3vw, 36px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.03em;
}

   /* Common Homepage Scroll page 2: Welcome section only. Text column on the left; photograph on the right in the page's rounded photo style (large top-left and bottom-right corners, as .panel-photo). Uses the page's tokens from styles.css (--forest, --green, --muted, --sage,--cream, --gutter, Poppins). Text rules are scoped under .vlc-welcome-split so the page-wide `.concise h2` size rule cannot override the heading. */
/* 01. Layout: same centred width and side margins as the rest of the page --- */ 

.vlc-welcome-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
  width: min(100%, 1600px);
  margin-inline: auto;
  padding: clamp(64px, 7vw, 120px) var(--gutter);
  background: var(--cream);
} /* 02. Text ------------------------------------------------------------------ */
.vlc-welcome-split .vlc-welcome-split__title {
  color: var(--forest);
  font-size: clamp(56px, 6.4vw, 104px) !important;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.02;
}
.vlc-welcome-split .vlc-welcome-split__intro,
.vlc-welcome-split .vlc-welcome-split__philosophy {
  max-width: 600px;
  color: var(--muted);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
}
.vlc-welcome-split .vlc-welcome-split__intro {
  margin-top: clamp(18px, 2vw, 28px);
}
.vlc-welcome-split .vlc-welcome-split__statement {
  max-width: 14.5em;
  margin-top: clamp(26px, 2.6vw, 40px);
  color: var(--green);
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.22;
  text-wrap: balance;
}
.vlc-welcome-split .vlc-welcome-split__philosophy {
  margin-top: clamp(22px, 2.4vw, 34px);
}
.vlc-welcome-split .vlc-welcome-split__note {
  margin-top: clamp(26px, 2.8vw, 40px);
  color: var(--forest);
  font-size: clamp(21px, 1.9vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.3;
}
.vlc-welcome-split .vlc-welcome-split__signoff {
  margin-top: 12px;
  font-size: clamp(14px, 1.05vw, 16px);
  letter-spacing: 0;
  line-height: 1.5;
} /* 03. Photograph: the page's rounded photo style ---------------------------- */
.vlc-welcome-split .vlc-welcome-split__photo {
  aspect-ratio: 0.88;
  overflow: hidden;
  border-radius: 100px 10px 100px 10px;
  background: var(--sage);
}
.vlc-welcome-split .vlc-welcome-split__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% center;
} /* 04. Tablet ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .vlc-welcome-split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
} /* 05. Phone: text first, photograph below ------------------------------------ */
@media (max-width: 760px) {
  .vlc-welcome-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-block: 56px;
  }
  .vlc-welcome-split .vlc-welcome-split__statement {
    max-width: 14em;
  }
  .vlc-welcome-split .vlc-welcome-split__photo {
    aspect-ratio: 1.2;
    border-radius: 60px 6px 60px 6px;
  }
}


/* 04. Journey and real learning */

.journey-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 70px;
}
.journey-intro .eyebrow {
  grid-column: 1 / -1;
}
.journey-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 56px var(--gutter) 0;
  max-width: 1600px;
  margin-inline: auto;
}
.journey-card {
  background: var(--paper);
  border-radius: 55px 6px 55px 6px;
  overflow: hidden;
}
.journey-card .photo {
  height: 260px;
}
.card-copy {
  padding: 32px;
}
.card-copy .eyebrow {
  color: var(--green);
  margin-bottom: 18px;
}
.card-lead {
  margin-block: 20px 16px;
  font-weight: 600;
  line-height: 1.5;
}
.learning {
  padding-top: 10px;
}
.learning-heading {
  max-width: 680px;
  margin-bottom: 48px;
}
.learning-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: center;
}
.learning-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gallery-large {
  grid-column: 1 / -1;
  height: 340px;
  border-radius: 70px 8px 0 0;
}
.gallery-small {
  height: 220px;
}
.gallery-small:last-child {
  border-bottom-right-radius: 70px;
}

/* 05. Values, decade and community */
.valueshome {
  background: var(--sage);
}
.valueshome-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}
.valueshome-context {
  margin-top: 36px;
}
.valueshome-row {
  display: flex;
  align-items: center;
  gap: 25px;
  padding-block: 30px;
  border-top: 1px solid #173d3126;
}
.valueshome-row h3 {
  margin-bottom: 12px;
}
.valueshome-number {
  align-self: flex-start;
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  padding-top: 8px;
}
.valueshome-circle {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: auto;
  border: 2px solid var(--green);
  border-radius: 50%;
}
.history {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
  align-items: center;
}
.history-marker {
  text-align: center;
}
.history-marker span {
  display: block;
  font-size: clamp(160px, 23vw, 340px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.1em;
  color: var(--green);
  padding-right: 0.1em;
}
.history-marker p {
  margin-top: 25px;
  letter-spacing: 0.2em;
  font-size: 13px;
}
.history-copy h2 {
  margin-bottom: 30px;
}
.community {
  background: var(--paper);
}
.community-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 90px;
}
.community-copy .eyebrow {
  grid-column: 1 / -1;
}
.community-copy .actionshome {
  grid-column: 2;
}
.community-gallery-home {
  display: grid;
  grid-template-columns: 1.25fr 0.7fr 1fr;
  gap: 22px;
  margin-top: 60px;
  align-items: center;
}
.community-gallery-home .photo {
  height: 320px;
  border-radius: 65px 6px 65px 6px;
}
.community-gallery-home .photo:nth-child(2) {
  height: 430px;
}

/* 06. Cities, admissions and final body section */
.cities-home > h2 {
  margin-bottom: 25px;
}
.cities-home > .lead {
  margin-bottom: 16px;
      font-size: clamp(20px, 2vw, 28px);
    line-height: 1.5;
}
.city-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 50px;
}
.city-card {
  overflow: hidden;
  border-radius: 80px 8px 80px 8px;
  background: var(--paper);
}
.city-card .photo {
  height: 330px;
}
.city-copy {
  padding: 38px;
}
.city-copy h3 {
  margin-bottom: 22px;
}
.city-copy p:not(.eyebrow) {
  min-height: 90px;
}
.city-copy .button {
  margin-top: 28px;
}
.admissions.homepage {
  background: var(--green);
  color: var(--cream);
}
.admissions-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: center;
}
.admissions-photo {
  height: 600px;
  border-radius: 80px 8px 80px 8px;
}
.admissions-copy h2 {
  margin-bottom: 30px;
  text-wrap: balance;
}
.admissions-open {
  margin-top: 30px;
  font-weight: 600;
}
.admissions .button {
  color: var(--forest);
  background: var(--cream);
  border-color: var(--cream);
}
.admissions .button--outline {
  color: var(--cream);
  background: transparent;
}
.admissions .button--outline:hover {
  background: #ffffff18;
}
.city-caption {
  margin-top: 28px;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-align: left;
    color:var(--cream);
}
.closing-home {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.eyebrow-home {
    margin-bottom: 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
}
.closing-home h2 {
  max-width: 1000px;
  margin-inline: auto;
}
.closing-lines {
  margin-top: 36px;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.8;
}
.closing-bird {
  width: 120px;
  height: 110px;
  object-fit: contain;
  margin: 45px auto 20px;
}
.closing-name {
  font-weight: 600;
}
.closing-place {
  margin-top: 12px;
  font-size: 14px;
}

/* 07. Modal city routing and film player */
dialog {
  width: min(620px, calc(100% - 32px));
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  padding: 52px;
  border: 0;
  border-radius: 45px 8px 45px 8px;
  color: var(--forest);
  background: var(--cream);
}
dialog::backdrop {
  background: #092218b3;
  backdrop-filter: blur(6px);
}
dialog h2 {
  font-size: clamp(30px, 3vw, 44px);
  margin-bottom: 24px;
}
.dialog-close {
  position: absolute;
  right: 18px;
  top: 12px;
  width: 44px;
  height: 44px;
  font-size: 30px;
  border: 0;
  color: var(--forest);
  background: transparent;
}
.dialog-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.film-dialog {
  width: min(1100px, calc(100% - 32px));
}
.film-dialog video {
  width: 100%;
  max-height: 65svh;
  background: var(--forest);
  border-radius: 6px;
}

/* 08. Progressive motion: content stays visible without JavaScript */
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.motion-ready .reveal.visible {
  opacity: 1;
  transform: none;
}
.word-muted {
  color: color-mix(in srgb, currentColor 36%, transparent);
  transition: color 160ms ease;
}
.word-muted.word-visible {
  color: inherit;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 09. Mobile: every paragraph and card remains in normal document flow */
@media (max-width: 1000px) {
  .welcome, .panel, .panel-inner, .learning-layout, .values-layout, .history, .admissions-layout {
    gap: 40px;
  }
  .journey-track {
    gap: 14px;
  }
  .card-copy {
    padding: 24px;
  }
  .journey-card .photo {
    height: 200px;
  }
  .community-copy {
    column-gap: 40px;
  }
  .community-gallery .photo {
    height: 250px;
  }
  .community-gallery .photo:nth-child(2) {
    height: 330px;
  }
  .admissions-photo {
    height: 540px;
  }
}
@media (max-width: 760px) {
  .hero-homepage {
    min-height: 100svh;
    padding-block: 86px 96px;
  }
  .hero-homepage-brand {
    width: 88px;
    height: 70px;
    margin-bottom: 28px;
  }
  .hero-homepage-media::after {
    background: linear-gradient(90deg, #0b281de8, #0b281dc2);
  }
  .hero-homepage-detail {
    font-size: 14px;
  }
  .hero-homepage-lead {
    font-size: 19px;
  }
  .video-toggle {
    top: 20px;
    right: 22px;
  }
  .welcome, .panel, .panel-inner, .journey-intro, .learning-layout, .values-layout, .history, .community-copy, .admissions-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sticky-title {
    position: static;
  }
  .welcome-photo {
    margin-top: 30px;
    height: 270px;
    max-width: none;
  }
  .welcome-prose {
    padding-top: 0;
  }
  .welcome-prose > p:first-child {
    font-size: 20px;
  }
  .welcome-note {
    padding: 24px;
  }
  .panel-photo, .academic .panel-photo {
    aspect-ratio: 1.2;
    border-radius: 60px 6px 60px 6px;
  }
  .journey-track {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 32px;
  }
  .journey-card .photo {
    height: auto;
    aspect-ratio: 1.5;
  }
  .card-copy {
    padding: 28px;
  }
  .learning {
    padding-top: 0;
  }
  .gallery-large {
    height: auto;
    aspect-ratio: 1.3;
  }
  .gallery-small {
    height: 180px;
  }
  .value-row {
    padding-block: 28px;
  }
  .history-marker span {
    font-size: 190px;
  }
  .history-marker {
    text-align: left;
  }
  .history-marker p {
    margin-top: 12px;
  }
  .community-copy .eyebrow, .community-copy .actionshome {
    grid-column: auto;
  }
  .community-copy .eyebrow {
    margin-bottom: 0;
  }
  .community-copy actionshome {
    margin-top: 0;
  }
  .community-gallery-home {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 36px;
  }
  .community-gallery-home .photo:first-child {
    grid-column: 1 / -1;
    height: 280px;
  }
  .community-gallery-home .photo:nth-child(2), .community-gallery .photo:last-child {
    height: 220px;
  }
  .community-gallery-home .photo {
    border-radius: 38px 6px 38px 6px;
  }
  .city-grid {
    grid-template-columns: 1fr;
  }
  .city-card {
    border-radius: 55px 6px 55px 6px;
  }
  .city-card .photo {
    height: 260px;
  }
  .city-copy {
    padding: 28px;
  }
  .city-copy p:not(.eyebrow) {
    min-height: 0;
  }
  .admissions-photo {
    height: 320px;
  }
  dialog {
    padding: 48px 25px 30px;
  }
}
@media (max-width: 380px) {
  .button {
    padding-inline: 19px;
  }
  .hero-homepage actionshome {
    display: grid;
    justify-items: start;
  }
  .gallery-small {
    height: 150px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .motion-ready .reveal {
    opacity: 1;
    transform: none;
  }
  .word-muted {
    color: inherit;
  }
  .sticky-title {
    position: static;
  }
}

/* 10. Sash-inspired version: stacked rounded panels and a pinned journey.
   The scroll container is the page itself; wheel and touch stay native. */
.immersive .hero-homepage {
  min-height: max(780px, 100svh);
}
.immersive .hero-homepage h1 {
  max-width: 960px;
}
.immersive .hero-homepage-copy {
  padding-bottom: 20px;
}
.immersive .hero-homepage::after {
  content: '';
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 34px;
  background: var(--cream);
  border-radius: 34px 34px 0 0;
}
.immersive .hero-homepage-scroll {
  bottom: 52px;
}
.immersive .welcome {
  padding-bottom: 120px;
}
.immersive .story-stack {
  padding-inline: 18px;
}
.immersive .story-stack .panel {
  position: sticky;
  top: 20px;
  min-height: calc(100svh - 40px);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(48px, 5vw, 80px) var(--gutter);
  border-radius: 40px 40px 0 0;
}
.immersive .story {
  background: var(--sage);
  box-shadow: 0 -6px 30px #173d3106;
}
.immersive .academic {
  top: 44px;
  margin-top: 90px !important;
}
.immersive .academic .panel-inner {
  padding: 0;
}
.immersive .story-stack .panel-photo {
  max-height: 650px;
  width: 100%;
}
.immersive .journey-intro {
  padding-bottom: 30px;
}
.immersive .journey {
  padding-bottom: 100px;
}
.immersive .journey-scroll {
  position: relative;
}
.immersive .journey-stage {
  padding-block: 25px;
}
.immersive .journey-track {
  display: flex;
  max-width: none;
  width: max-content;
  margin: 0;
  padding: 0 var(--gutter);
  gap: 28px;
}
.immersive .journey-card {
  flex: 0 0 auto;
  width: min(65vw, 820px);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 470px;
}
.immersive .journey-card .photo {
  height: 100%;
}
.immersive .journey-card .card-copy {
  align-self: center;
  padding: 40px;
}
.immersive .journey-card h3 {
  font-size: clamp(30px, 3vw, 46px);
}
.immersive.rail-ready .journey-scroll {
  height: 230svh;
}
.immersive.rail-ready .journey-stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.immersive .learning {
  padding-top: 40px;
}
.immersive .values {
  border-radius: 40px 40px 0 0;
}
.immersive .value-list {
  padding-bottom: 15px;
}
.immersive .value-row {
  padding: 34px;
  margin-bottom: 18px;
  background: var(--cream);
  border-radius: 22px;
  border: 0;
  min-height: 180px;
}
.immersive .history {
  padding-block: 120px;
}
.immersive .community {
  border-radius: 40px 40px 0 0;
}
.immersive .community-gallery-home .photo {
  transform-origin: center;
}
.immersive .cities-home {
  padding-block: 120px;
}
.immersive .city-card {
  position: relative;
  color: var(--cream);
  background: var(--forest);
  min-height: 650px;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.immersive .city-card .photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  height: 100%;
}
.immersive .city-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, #0b281df5 5%, #0b281d9e 55%, #0b281d15);
}
.immersive .city-copy {
  padding: 42px;
}
.immersive .city-copy h3 {
  font-size: clamp(30px, 3vw, 44px);
}
.immersive .city-copy .button {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--forest);
}
.immersive .admissions {
  border-radius: 40px 40px 0 0;
}
.immersive .closing-home {
  background: var(--forest);
  color: var(--cream);
}
.immersive .closing-home .eyebrow-home {
  color: #d6e59c;
  font: 400 12px/1.8 Poppins, Arial, sans-serif;
      text-align: center;
    width: 100%;
    max-width: none;
    font-weight: 600;
}

/* Non-script fallback keeps all journey cards visible in a standard grid. */
.immersive:not(.rail-ready) .journey-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: auto;
}
.immersive:not(.rail-ready) .journey-card {
  width: auto;
  display: block;
}
.immersive:not(.rail-ready) .journey-card .photo {
  height: 260px;
}
@media (max-width: 1000px) {
  .immersive .story-stack {
    padding-inline: 10px;
  }
  .immersive .story-stack .panel {
    top: 10px;
    padding: 50px var(--gutter);
  }
  .immersive .academic {
    top: 24px;
  }
  .immersive .journey-card {
    width: 85vw;
  }
  .immersive .journey-card .card-copy {
    padding: 30px;
  }
}
@media (max-width: 760px) {
  .immersive .welcome {
    padding-bottom: 76px;
  }
  .immersive .story-stack {
    padding-inline: 0;
  }
  .immersive .story-stack .panel {
    position: relative;
    top: auto;
    min-height: 0;
    padding-block: 65px;
    border-radius: 28px 28px 0 0;
  }
  .immersive .academic {
    top: auto;
    margin-top: 0 !important;
  }
  .immersive .journey, .immersive .history, .immersive .cities-home {
    padding-block: 76px;
  }
  .immersive.rail-ready .journey-scroll {
    height: auto;
  }
  .immersive.rail-ready .journey-stage {
    position: static;
    min-height: 0;
    display: block;
    padding-block: 15px 0;
    overflow: visible;
  }
  .immersive .journey-track, .immersive:not(.rail-ready) .journey-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: auto;
    transform: none !important;
  }
  .immersive .journey-card {
    display: block;
    width: 100%;
    min-height: 0;
  }
  .immersive .journey-card .photo {
    height: auto;
    aspect-ratio: 1.5;
  }
  .immersive .journey-card .card-copy {
    padding: 28px;
  }
  .immersive .value-row {
    padding: 26px;
    min-height: 0;
  }
  .immersive .city-card {
    min-height: 610px;
  }
  .immersive .city-copy {
    padding: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .immersive .story-stack .panel {
    position: relative;
    top: auto;
  }
  .immersive .academic {
    margin-top: 0 !important;
  }
  .immersive.rail-ready .journey-scroll {
    height: auto;
  }
  .immersive.rail-ready .journey-stage {
    position: static;
    min-height: 0;
  }
  .immersive .journey-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: auto;
    transform: none !important;
  }
  .immersive .journey-card {
    display: block;
    width: auto;
    min-height: 0;
  }
  .immersive .journey-card .photo {
    height: 250px;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .immersive .journey-track {
    grid-template-columns: 1fr;
  }
}

/* Phone layout bypasses both wrappers used for desktop pinning. */
@media (max-width: 760px) {
  .immersive .journey-scroll,
  .immersive .journey-stage {
    display: contents;
  }
  .immersive:not(.rail-ready) .journey-card .photo {
    height: auto;
    aspect-ratio: 1.5;
  }
}

/* 11. Values reference: cream canvas, colourful icons, individual scroll pops. */
.immersive #values {
  background: var(--cream);
  border-radius: 0;
}

#values .values-layout {
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 100px);
  align-items: start;
}

#values .values-intro {
  top: 64px;
}

#values h2 {
  max-width: 610px;
}

#values .eyebrow > span {
  color: #71ac73;
  opacity: 1;
}

#values .valueshome-context {
  margin-top: 32px;
}

#values .valueshome-button {
  gap: 20px;
  padding-inline: 30px;
  border-radius: 100px;
  background: var(--forest);
  border-color: var(--forest);
}

#values .valueshome-button:hover {
  background: #215340;
      transform: translateY(-2px);

}

#values .valueshome-button span {
  font-size: 24px;
  line-height: 1;
}

.immersive #values .valueshome-list {
  padding: 0;
}

.immersive #values .valueshome-row {
  display: grid;
  grid-template-columns: 116px 24px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 190px;
  padding: 20px 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#values .valueshome-icon {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--value-tint);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--value-tint) 48%, transparent);
}

#values .valueshome-icon svg {
  width: 64px;
  height: 64px;
  overflow: visible;
  filter: drop-shadow(0 4px 3px #173d3115);
}

#values .valueshome-number {
  align-self: start;
  padding-top: 27px;
  color: var(--value-accent);
  font-size: 16px;
  font-weight: 600;
}

#values .valueshome-copy h3 {
  margin-bottom: 12px;
  font-size: clamp(25px, 2.25vw, 34px);
}

#values .valueshome-copy p {
  font-size: 16px;
  line-height: 1.65;
}

#values .valueshome--curiosity {
  --value-tint: #e7f3d9;
  --value-accent: #629c64;
}


#values .valueshome--creativity {
    --value-tint: #ffefca;
    --value-accent: #d79400;
}

#values .valueshome--courage {
  --value-tint: #ffdfd4;
  --value-accent: #df4a2d;
}

#values .valueshome--compassion {
  --value-tint: #ffe7ec;
  --value-accent: #e54870;
}

#values .valueshome--community {
  --value-tint: #d9ecff;
  --value-accent: #207dc5;
}

.valueshome-ready #values .valueshome-row {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transform-origin: left center;
  transition: opacity 450ms ease, transform 650ms cubic-bezier(0.2, 0.85, 0.25, 1.15);
}

.valueshome-ready #values .valueshome-row.valueshome-popped {
  opacity: 1;
  transform: none;
}

.valueshome-ready #values .valueshome-popped .valueshome-icon {
  animation: vlc-valueshome-pop 700ms cubic-bezier(0.2, 0.85, 0.25, 1.1) both;
}

@keyframes vlc-valueshome-pop {
  0% { transform: scale(0.65) rotate(-8deg); }
  65% { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (max-width: 1000px) and (min-width: 761px) {
  #values .valueshome-layout {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 36px;
  }
  .immersive #values .valueshome-row {
    grid-template-columns: 86px 22px minmax(0, 1fr);
    gap: 14px;
  }
  #values .valueshome-icon {
    width: 86px;
    height: 86px;
  }
  #values .valueshome-icon svg {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 760px) {
  #values .valueshome-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  #values .valueshome-intro {
    position: static;
  }
  .immersive #values .valueshome-row {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0 20px;
    min-height: 180px;
    padding-block: 25px;
  }
  #values .valueshome-icon {
    grid-row: 1 / 3;
    width: 76px;
    height: 76px;
  }
  #values .valueshome-icon svg {
    width: 46px;
    height: 46px;
  }
  #values .valueshome-number {
    grid-column: 2;
    padding: 0 0 8px;
    align-self: end;
    font-size: 13px;
  }
  #values .valueshome-copy {
    grid-column: 2;
    align-self: start;
  }
  #values .valueshome-copy h3 {
    font-size: 25px;
    margin-bottom: 10px;
  }
  #values .valueshome-copy p {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #values .valueshome-intro {
    position: static;
  }
  .valueshome-ready #values .valueshome-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .valueshome-ready #values .valueshome-popped .valueshome-icon {
    animation: none;
  }
}

/* 12. Reference refinements: unnumbered editorial sections and scroll stories. */
.hero-homepage .hero-homepage-bird {
  width: 108px;
  height: 98px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  object-fit: contain;
}

/* Text gets a complete column, followed by the broad green statement. */
.immersive .editorial {
  display: block;
}
.editorial-top {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
.editorial-title h2 {
  max-width: 540px;
}
.editorial-copy {
  max-width: none;
  color: var(--muted);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.75;
}
.editorial-statement {
  margin-block: 60px;
  padding-top: 45px;
  border-top: 1px solid #173d3124;
  font-size: clamp(25px, 2.8vw, 42px);
  line-height: 1.5;
  letter-spacing: -0.035em;
  color: var(--green);
}
.welcome-bottom {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(35px, 6vw, 90px);
  align-items: center;
}
#welcome .welcome-photo {
  width: 100%;
  max-width: none;
  height: 440px;
  margin: 0;
}
#learning-in-action .learning-gallery {
  grid-template-columns: 1.35fr 1fr 0.8fr;
  gap: 22px;
}
#learning-in-action .learning-gallery .photo {
  grid-column: auto;
  min-width: 0;
  width: 100%;
  aspect-ratio: auto;
  height: 360px;
  border-radius: 65px 6px 65px 6px;
}

/* The values retain their icons and reveal sequence, without item numbers. */
.immersive #values .valueshome-row {
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 32px;
}

/* A single learning stage occupies the viewport while native page scroll advances it. */
#learning-journey .journey-scroll {
  display: block;
  height: auto;
  position: relative;
  margin: 48px 20px 0;
}
#learning-journey .journey-stage {
  display: block;
  position: relative;
  min-height: 0;
  padding: clamp(26px, 4vw, 60px);
  border-radius: 40px;
  background: #e7ecdc;
  overflow: visible;
}
#learning-journey .journey-scenes {
  display: grid;
  gap: 70px;
}
#learning-journey .journey-scene {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  align-items: center;
  gap: clamp(44px, 7vw, 110px);
  min-width: 0;
}
#learning-journey .journey-photo-stack {
  position: relative;
  isolation: isolate;
  margin: 18px;
}
#learning-journey .journey-photo-stack::before,
#learning-journey .journey-photo-stack::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 45px;
  background: var(--green);
  transform: rotate(-7deg);
}
#learning-journey .journey-photo-stack::after {
  background: var(--forest);
  transform: rotate(5deg);
}
#learning-journey .journey-photo-stack .photo {
  height: clamp(300px, 36vw, 470px);
  border-radius: 40px;
}
#learning-journey .card-copy {
  padding: 0;
}
#learning-journey .card-copy h3 {
  font-size: clamp(34px, 4vw, 60px);
}
#learning-journey .card-lead {
  margin-block: 28px 22px;
  color: var(--green);
  font-size: clamp(21px, 2.1vw, 30px);
}
#learning-journey .card-copy > p:last-child {
  max-width: 690px;
  font-size: clamp(16px, 1.35vw, 20px);
}
#learning-journey .journey-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 32px;
  padding-top: 25px;
  border-top: 1px solid #173d3126;
}
.journey-choices, .journey-arrows {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.journey-choice, .journey-arrows button {
  padding: 12px 20px;
  border: 1px solid #173d3138;
  border-radius: 100px;
  background: transparent;
  color: var(--forest);
  font-size: 14px;
  min-height: 48px;
}
.journey-choice[aria-pressed="true"] {
  background: var(--forest);
  color: var(--cream);
  outline: 2px solid #efbd56;
  outline-offset: 4px;
}
.journey-arrows button {
  width: 50px;
  padding: 0;
  font-size: 24px;
}
.journey-arrows button:disabled {
  opacity: 0.3;
  cursor: default;
}
.journey-ready #learning-journey .journey-scroll {
  height: calc(var(--journey-stage-height) + 180svh);
}
.journey-ready #learning-journey .journey-stage {
  position: sticky;
  top: 16px;
}
.journey-ready #learning-journey .journey-scenes {
  gap: 0;
}
.journey-ready #learning-journey .journey-scene {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
  transition: opacity 400ms ease, transform 550ms ease, visibility 400ms;
  pointer-events: none;
}
.journey-ready #learning-journey .journey-scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Decade: count, dates and growing rules form the opening scroll sequence. */
.decade {
  padding-inline: 20px;
}
.decade-panel {
  padding: 0 var(--gutter) 65px;
  background: radial-gradient(ellipse at 50% 15%, #f4f5e9, #e4ebd9);
  border-radius: 45px;
}
.decade-visual {
  padding-block: 40px 45px;
  text-align: center;
}
.decade-count-row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: clamp(15px, 2vw, 36px);
}
.decade-count {
  color: var(--green);
  font-size: clamp(140px, 17vw, 240px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.09em;
  min-width: 1.32em;
  padding-right: 0.09em;
}
.decade-year {
  font-size: clamp(16px, 1.8vw, 26px);
}
.decade-line {
  height: 1px;
  background: var(--green);
}
.decade-line--left {
  transform-origin: right;
}
.decade-line--right {
  transform-origin: left;
}
.decade-visual .eyebrow {
  color: var(--green);
  margin-block: 20px;
}
.decade-visual h2 {
  max-width: 1000px;
  margin-inline: auto;
}
.decade-ready .decade-timeline {
  height: 185svh;
  position: relative;
}
.decade-ready .decade-visual {
  position: sticky;
  top: 80px;
}
.decade-ready .decade-year {
  opacity: var(--date-progress, 0);
  transform: translateY(calc((1 - var(--date-progress, 0)) * 12px));
}
.decade-ready .decade-line {
  transform: scaleX(var(--line-progress, 0));
}
.decade-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1100px;
  margin-inline: auto;
  gap: 50px;
  font-size: clamp(16px, 1.35vw, 20px);
}
.decade-copy > div + div {
  padding-left: 50px;
  border-left: 1px solid #173d3130;
}
.decade-copy p + p {
  margin-top: 28px;
}
.decade-close {
  text-align: center;
  margin-top: 45px;
}
.decade-close::before {
  content: '';
  display: block;
  width: 85px;
  height: 1px;
  margin-inline: auto;
  background: #173d3130;
}
.decade-close .actions {
  justify-content: center;
}
.decade-close .button {
  border-radius: 100px;
}
.motion-ready [data-decade-copy] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.motion-ready [data-decade-copy].line-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1000px) {
  #learning-journey .journey-scene {
    gap: 40px;
  }
  #learning-journey .journey-photo-stack .photo {
    height: 340px;
  }
  .immersive #values .value-row {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 22px;
  }
}
@media (max-width: 760px) {
  .editorial-top, .welcome-bottom {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .editorial-statement {
    margin-block: 38px;
    padding-top: 30px;
  }
  #welcome .welcome-photo {
    height: 300px;
  }
  #learning-in-action .learning-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  #learning-in-action .learning-gallery .photo {
    height: 220px;
    border-radius: 40px 6px 40px 6px;
  }
  #learning-in-action .learning-gallery .photo:first-child {
    grid-column: 1 / -1;
    height: 300px;
  }
  .immersive #values .value-row {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 20px;
  }
  #values .value-icon {
    grid-row: auto;
  }
  #values .value-copy {
    align-self: center;
  }
  #learning-journey .journey-scroll {
    margin-inline: 12px;
  }
  #learning-journey .journey-stage {
    padding: 22px;
    border-radius: 28px;
  }
  #learning-journey .journey-scene {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  #learning-journey .journey-photo-stack {
    margin: 8px 16px;
  }
  #learning-journey .journey-photo-stack .photo {
    height: 210px;
    border-radius: 25px;
  }
  #learning-journey .card-copy h3 {
    font-size: 30px;
  }
  #learning-journey .card-lead {
    font-size: 18px;
    margin-block: 15px 12px;
  }
  #learning-journey .card-copy > p:last-child {
    font-size: 14px;
    line-height: 1.6;
  }
  #learning-journey .journey-controls {
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
    padding-top: 20px;
  }
  .journey-choices {
    gap: 8px;
  }
  .journey-choice {
    padding: 8px 12px;
    font-size: 11px;
    min-height: 40px;
  }
  .journey-arrows {
    display: none;
  }
  .decade {
    padding-inline: 12px;
  }
  .decade-panel {
    padding-inline: 22px;
    border-radius: 28px;
  }
  .decade-count-row {
    gap: 9px;
  }
  .decade-count {
    font-size: 120px;
  }
  .decade-year {
    font-size: 13px;
  }
  .decade-visual h2 {
    font-size: 32px;
  }
  .decade-copy {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .decade-copy > div + div {
    border: 0;
    padding: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-decade-copy] {
    opacity: 1;
    transform: none;
  }
}

/* 13. Page 2: shorter copy and a calmer, responsive type scale. */
.concise h1 { font-size: clamp(40px, 4.7vw, 72px); }
.concise h2 { font-size: clamp(30px, 3.25vw, 50px) !important; line-height: 1.15; }
.concise .prose, .concise .editorial-copy { font-size: clamp(16px, 1.28vw, 18px); line-height: 1.7; }
.concise .prose { max-width: 68ch; }
.concise .hero-homepage-lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.55; }
.concise .hero-homepage-detail { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; max-width: 66ch; }
.concise .editorial-statement { font-size: clamp(24px, 2.35vw, 34px); line-height: 1.45; margin-block: 42px; padding-top: 32px; }
.concise .statement { font-size: clamp(23px, 2.2vw, 32px); line-height: 1.45; }
.concise .welcome-note { margin-top: 24px; padding: 24px; }
.concise .welcome-note p:first-child { font-size: clamp(20px, 1.7vw, 25px); }
.concise #welcome .welcome-photo { height: 330px; }
.concise #learning-journey .card-copy h3 { font-size: clamp(30px, 3.3vw, 48px); }
.concise #learning-journey .card-lead { font-size: clamp(19px, 1.8vw, 25px); }
.concise #learning-journey .card-copy > p:last-child { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; }
.concise #values .valueshome-copy h3 { font-size: clamp(24px, 2vw, 30px); }
.concise #values .valueshome-copy p { font-size: 16px; line-height: 1.65; }
.concise .decade-copy { font-size: clamp(16px, 1.28vw, 18px); line-height: 1.7; }
.concise .section { padding-block: clamp(64px, 7vw, 110px); }
@media (max-width: 760px) {
  .concise h2 { font-size: 30px; }
  .concise .hero-homepage-copy { padding-bottom: 90px; }
  .concise #welcome .welcome-photo { height: 260px; }
  .concise .editorial-statement { margin-block: 30px; padding-top: 26px; }
  .concise #learning-journey .card-copy > p:last-child { font-size: 15px; line-height: 1.6; }
  .concise #values .valueshome-copy p { font-size: 15px; }
}
/* Give the short summaries a full reading column, without double gutters. */
@media (min-width: 761px) {
  .concise .story-stack .story, .concise .academic .panel-inner { grid-template-columns: 1.15fr .85fr; gap: clamp(36px, 5vw, 80px); }
  .concise .story-stack .academic { padding-inline: 0; }
}

/* 14. Comfortable panel insets, compact section rhythm and city interactions. */
.concise .section {
  padding-block: clamp(40px, 4vw, 64px);
}
.concise.immersive #welcome {
  padding-top: clamp(32px, 3vw, 48px);
  padding-bottom: clamp(40px, 4vw, 64px);
}
.concise.immersive .story-stack .academic {
  padding-inline: var(--gutter);
  margin-top: 36px !important;
}
.concise .panel-copy,
.concise .panel-photo,
.concise .editorial-top > *,
.concise .journey-intro > * {
  min-width: 0;
}
.concise .panel-copy {
  overflow-wrap: break-word;
}
.concise.immersive #learning-journey {
  padding-bottom: 28px;
}
.concise #learning-in-action {
  padding-top: 28px;
}
.concise #learning-journey .journey-intro {
  padding-bottom: 0;
}
.concise #learning-journey .journey-scroll {
  margin-top: 32px;
  margin-bottom: 24px;
}
.concise .welcome-note {
  background: transparent;
  border-left: 0;
  padding: 4px 0;
  margin-top: 22px;
}
.concise .welcome-note p:first-child {
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.4;
  color: var(--forest);
}
.concise .welcome-note p:last-child {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--forest);
}
.concise .city-card .photo img {
  transition: transform 550ms ease, filter 550ms ease;
}
.concise .city-card:focus-within .photo img {
  transform: scale(1.045);
  filter: brightness(1.1);
}
@media (hover: hover) and (pointer: fine) {
  .concise .city-card:hover .photo img {
    transform: scale(1.045);
    filter: brightness(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .concise .city-card .photo img {
    transition: none;
  }
  .concise .city-card:hover .photo img,
  .concise .city-card:focus-within .photo img {
    transform: none;
  }
}

/* Align both Welcome text columns to the same left edge. */
@media (min-width: 761px) {
  .concise #welcome .editorial-top {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(35px, 6vw, 90px);
  }
}

/*end homepage*/

/*babysnap*/

/* 01. Photographic hero */
.bs-hero {
  position: relative;
  isolation: isolate;
  min-height: min(850px, 100svh);
  display: flex;
  align-items: center;
  color: var(--cream);
  background: var(--forest);
      margin-top: 70px;

}
.bs-hero-image, .bs-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.bs-hero-image { object-fit: cover; object-position: 64% center; }
.bs-hero-shade { background: linear-gradient(90deg, #102f25eb 0%, #102f25bd 38%, #102f2530 78%); }
.bs-hero-copy { padding-block: 80px; }
.bs-hero h1 { max-width: 790px; }
.bs-hero-copy > p:not(.eyebrow) { max-width: 610px; margin-top: 28px; color: #f0f0e5; font-size: 17px; line-height: 1.8; }

/* 02. Registration: established form component with a sticky introduction */
.bs-registration {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
  scroll-margin-top: 24px;
}
.bs-registration-intro { position: sticky; top: 150px; }
.bs-registration-intro > p:last-child { max-width: 390px; margin-top: 24px; color: var(--muted); }
.bs-form { min-width: 0; }
.bs-parent { min-width: 0; border: 0; padding: 0; margin: 0; }
.bs-parent + .bs-parent { margin-top: 34px; }
.bs-parent > legend { font-weight: 600; font-size: 17px; padding: 0; margin-bottom: 20px; }
.bs-form a { color: var(--green); }

/* 03. All ten source photographs, with accessible full-size viewing */
.bs-moments { background: #e9eddf; }
.bs-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.bs-gallery-item { display: block; overflow: hidden; border-radius: 5px 55px 5px 5px; background: #d7decc; }
.bs-gallery-item:nth-child(5n + 1) { grid-column: span 2; }
.bs-gallery-item:nth-child(even) { border-radius: 55px 5px 5px 5px; }
.bs-gallery-item img { height: 100%; min-height: 260px; aspect-ratio: 1.1; object-fit: cover; transition: transform 450ms ease; }
@media (hover: hover) { .bs-gallery-item:hover img { transform: scale(1.035); } }
.bs-lightbox {
  width: min(1100px, calc(100% - 40px));
  max-height: calc(100svh - 40px);
  padding: 48px 24px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--paper);
  color: var(--forest);
}
.bs-lightbox::backdrop { background: #071d17df; }
.bs-lightbox img { max-height: calc(100svh - 150px); width: 100%; object-fit: contain; }
.bs-lightbox figcaption { padding-top: 12px; text-align: center; font-size: 14px; }
.bs-lightbox-close { position: absolute; right: 10px; top: 3px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--forest); font-size: 32px; cursor: pointer; }
html:has(.bs-lightbox[open]) { overflow: hidden; }
.motion-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity 650ms ease, transform 650ms ease; }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }

/* 04. Responsive and reduced motion */
@media (max-width: 1000px) {
  .bs-registration { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 32px; }
  .bs-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bs-gallery-item img { min-height: 220px; }
}
@media (max-width: 760px) {
  .bs-hero { min-height: 730px; }
  .bs-hero-copy { padding-block: 64px; }
  .bs-hero h1 { max-width: 570px; }
  .bs-hero-shade { background: linear-gradient(90deg, #102f25e6, #102f2599); }
  .bs-hero-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.8; }
  .bs-registration { grid-template-columns: 1fr; gap: 32px; }
  .bs-registration-intro { position: static; }
  .bs-registration-intro > p:last-child { max-width: 65ch; }
  .bs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bs-gallery-item img { min-height: 180px; }
  .bs-gallery-item:nth-child(5n + 1) img { aspect-ratio: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  .bs-gallery-item:hover img { transform: none; }
}


/* 05. Layered photo carousel: larger centre, receding side cards. */
.bs-moments { overflow: hidden; background: radial-gradient(ellipse at 0% 80%, #dce4d3 0%, transparent 45%), radial-gradient(ellipse at 100% 10%, #e5eadb 0%, transparent 40%), var(--cream); }
.bs-carousel { position: relative; max-width: 1600px; margin-inline: auto; }
.bs-carousel-ready .bs-gallery { display: block; position: relative; height: clamp(330px, 38vw, 530px); padding: 0; perspective: 1300px; touch-action: pan-y; }
.bs-carousel-ready .bs-gallery-item { position: absolute; top: 50%; left: 50%; width: clamp(220px, 26vw, 360px); height: 94%; border: 5px solid var(--paper); border-radius: 25px; box-shadow: 0 18px 28px #173d3120; transform: translate(-50%, -50%) translateX(var(--slide-x)) scale(var(--slide-scale)) rotateY(var(--slide-angle)); z-index: var(--slide-z); opacity: var(--slide-opacity); visibility: hidden; transition: transform 650ms cubic-bezier(.22,.7,.25,1), opacity 450ms ease, box-shadow 250ms ease; }
.bs-carousel-ready .bs-gallery-item.is-visible { visibility: visible; }
.bs-carousel-ready .bs-gallery-item img { height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; }
.bs-carousel-ready .bs-gallery-item.is-active { box-shadow: 0 22px 38px #173d3133; }
.bs-carousel-arrow { position: absolute; top: calc(50% - 35px); z-index: 20; width: 50px; height: 50px; border: 1px solid #173d3115; border-radius: 50%; background: var(--paper); color: var(--forest); font-size: 26px; cursor: pointer; box-shadow: 0 6px 18px #173d3115; }
.bs-carousel-prev { left: 20px; }
.bs-carousel-next { right: 20px; }
.bs-carousel-arrow:hover { background: #e5ebda; }
.bs-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.bs-carousel-dots button { width: 23px; height: 30px; border: 0; padding: 11px 0; background: transparent; cursor: pointer; }
.bs-carousel-dots button::after { content: ''; display: block; height: 6px; border-radius: 6px; background: #d2d4c9; transition: background-color 250ms ease; }
.bs-carousel-dots button[aria-current="true"] { width: 42px; }
.bs-carousel-dots button[aria-current="true"]::after { background: var(--green); }
.bs-carousel [hidden] { display: none; }
@media (hover: hover) {
  .bs-carousel-ready .bs-gallery-item:hover { box-shadow: 0 24px 42px #173d314a; }
  .bs-carousel-ready .bs-gallery-item:hover img { transform: scale(1.06); }
}
@media (max-width: 760px) {
  .bs-carousel-ready .bs-gallery { height: 350px; }
  .bs-carousel-ready .bs-gallery-item { width: 230px; border-width: 4px; border-radius: 20px; }
  .bs-carousel-arrow { width: 42px; height: 42px; font-size: 23px; }
  .bs-carousel-prev { left: 12px; }
  .bs-carousel-next { right: 12px; }
  .bs-carousel-dots { gap: 6px; }
  .bs-carousel-dots button { width: 18px; }
  .bs-carousel-dots button[aria-current="true"] { width: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-carousel-ready .bs-gallery-item:hover img { transform: none; }
}
/*babysnap end*/

/* 01. Page foundation ---------------------------------------------------- */
.vlc-careers {
  margin: 0;
  background: #fff7ed;
  color: #2f2f2f;
  font: 400 16px/1.75 Poppins, Arial, sans-serif;
}

.vlc-careers * {
  box-sizing: border-box;
}

/* 02. Full-width photographic hero -------------------------------------- */
.cr-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding: 90px clamp(22px, 5vw, 88px);
  isolation: isolate;
  color: #fff7ed;
  background: #173d31;
}

.cr-hero__image,
.cr-hero::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.cr-hero__image {
  object-fit: cover;
  object-position: center;
}

.cr-hero::after {
  content: '';
  background: linear-gradient(90deg, rgba(8, 35, 27, 0.92), rgba(8, 35, 27, 0.69) 50%, rgba(8, 35, 27, 0.25));
}

.cr-hero__copy {
  max-width: 850px;
}

.cr-breadcrumb,
.cr-eyebrow {
  margin: 0 0 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cr-hero h1 {
  margin: 0 0 30px;
  font-size: clamp(42px, 5.1vw, 84px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.12;
}

.cr-hero h1 span {
  color: #e6ec9b;
}

.cr-hero__copy > p:not(.cr-breadcrumb) {
  max-width: 690px;
  margin: 20px 0 0;
  font-size: clamp(16px, 1.3vw, 19px);
}

/* 03. Application layout ------------------------------------------------ */
.cr-application {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(60px, 7vw, 110px) clamp(20px, 5vw, 60px);
}

.cr-intro {
  margin-bottom: 44px;
}

.cr-eyebrow {
  margin-bottom: 16px;
  color: #287b30;
}

.cr-intro h2 {
  margin: 0;
  font-size: clamp(34px, 3.7vw, 59px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

@media (max-width: 640px) {
  .cr-hero {
    min-height: 85svh;
    padding-block: 70px;
  }

  .cr-hero::after {
    background: rgba(8, 35, 27, 0.76);
  }

  .vlc-careers {
    font-size: 15px;
  }
}


.vlc-about-lahore-page .action .btn.light{
 
}
.vlc-about-lahore-page {
    .btn.light {
        color: #287b30 !important;
    }
}
.aboutus{
    .btn.light.new {
        color: #287b30 !important;
        transition: 0.3s;
    }
    .btn.light.new:hover {
        background-color: var(--cream) ;
    }
}

/* Shared VLC footer. The campus content varies by city; the layout does not. */
.site-footer.wrap{background:var(--cream,#fff7ed);padding-block:30px 28px;    padding-top: 40px;}
.site-footer .footer-grid{display:grid;grid-template-columns:1.1fr .7fr 1.1fr 1fr;gap:5%;align-items:start}
.site-footer .footer-grid>div{min-width:0}
.site-footer .footer-brand{display:block;width:118px;height:90px;object-fit:contain;object-position:left center}
.site-footer .footer-tag{max-width:280px;font-size:13px;color:var(--muted,#64675f);margin-top:19px}
.site-footer .footer-title{font-size:14px;font-weight:600;letter-spacing:0;margin:0 0 20px}
.site-footer .footer-links{display:grid;gap:10px;font-size:13px;color:var(--muted,#64675f)}
.site-footer .footer-links a:hover,.site-footer .footer-campuses a:hover{color:var(--green,#287b30)}
.site-footer .footer-campuses details{border-bottom:1px solid var(--line,#dcded2)}
.site-footer .footer-campuses summary{display:block;position:relative;cursor:pointer;list-style:none;padding:7px 22px 7px 0;font-size:13px;line-height:1.65;color:var(--ink,#2f2f2f)}
.site-footer .footer-campuses summary::-webkit-details-marker{display:none}
.site-footer .footer-campuses summary::after{content:'+';position:absolute;right:2px;top:3px;color:#287b30;font-size:16px;font-weight:400}
.site-footer .footer-campuses details[open] summary::after{content:'−'}
.site-footer .footer-campuses p{font-size:12px;line-height:1.7;margin:8px 0;color:var(--muted,#64675f);overflow-wrap:anywhere}
.site-footer .footer-campuses p:last-child{margin-bottom:17px}
.site-footer .hidden-fields-container{display:none}
.site-footer .newsletter-form input[type=email]{display:block;width:100%;max-width:100%;padding:14px 15px;margin-bottom:12px;border:1px solid #c5ccb8;border-radius:4px;background:#fffaf3;color:var(--ink,#2f2f2f);font:inherit;font-size:12px}
.site-footer .newsletter-form input[type=email]:focus-visible,.site-footer summary:focus-visible{outline:2px solid var(--green,#287b30);outline-offset:4px}
.site-footer .newsletter-form .btn{width:auto;min-height:50px;padding:13px 24px;cursor:pointer}
.site-footer .newsletter-form .btn:disabled{opacity:.65;cursor:wait}
.site-footer .form-status{display:block;font-size:13px;line-height:1.55;margin-top:12px;color:var(--muted,#64675f);overflow-wrap:anywhere}
.site-footer .form-status:empty{display:none}
.site-footer .form-status a{text-decoration:underline;text-underline-offset:3px}
.site-footer .footer-bottom{border-top:1px solid var(--line,#dcded2);margin-top:48px;padding-top:25px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted,#64675f)}
@media(max-width:1000px){.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media(max-width:700px){.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:35px 23px}.site-footer .footer-grid>div:first-child,.site-footer .footer-grid>div:last-child{grid-column:1/-1}.site-footer .newsletter-form{max-width:390px}}
@media(max-width:360px){.site-footer .footer-grid{grid-template-columns:1fr}.site-footer .footer-grid>div{grid-column:1/-1}}


/* Social links in this prototype's footer only. */
.site-footer .footer-socials { display: flex; flex-wrap: wrap; gap: 12px; }
.site-footer .footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--line, #dcded2); border-radius: 50%; color: #287b30; transition: background-color .2s ease; }
.site-footer .footer-socials a:hover { background-color: #e6ecd9; }
.site-footer .footer-socials a:focus-visible { outline: 2px solid var(--green, #287b30); outline-offset: 4px; }
.site-footer .footer-socials svg { display: block; width: 23px; height: 23px; fill: #287b30; }

.site-footer .footer-social-groups {
  display: grid;
  gap: 26px;
}