/* Branch page, part 2 (counsellor.css stays under 500 lines): the sections of the owner's reference design -
   hero statement, branch video, city tagline band, the batch table "at a glance", the exam chooser, the visit
   block and the closing call to action. Tokens, fonts and the one animation come from counsellor.css.
   Sizes and section padding were matched to the reference at 1280px on 15-10-2026. */
[hidden] { display: none !important; }
.button-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 800; }
.button-gold:hover { background: var(--gold-700); border-color: var(--gold-700); }
.section.white { background: #fff; }
.eyebrow-txt { display: block; font-size: 9px; font-weight: 900; letter-spacing: 1.8px; color: var(--red); text-transform: uppercase; }
.brand-place { line-height: 1.55; font-size: 11px; }
.brand-place small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.header-actions .button { white-space: nowrap; }

/* section heads: small label, big line, supporting sentence beside it on desktop */
.cs-head { margin-bottom: 28px; display: grid; gap: 12px; }
.cs-head h2 { font-size: 31px; line-height: 1.12; letter-spacing: -1.2px; margin-top: 10px; }
.cs-head p { color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 420px; }

/* hero statement */
.hero h1 { margin: 0; }
.hero h1 span { display: block; }
.hero h1 .h1-kick { font-size: 9px; font-weight: 900; letter-spacing: 1.2px; color: var(--navy); text-transform: uppercase; border: 1px solid var(--indigo-100); border-radius: 30px; padding: 8px 11px; width: max-content; max-width: 100%; }
.hero h1 .h1-a, .hero h1 .h1-b { font-size: 34px; line-height: 1.02; letter-spacing: -1.6px; font-weight: 700; color: var(--ink); margin: 0; }
.hero h1 .h1-a { margin-top: 20px; }
.hero h1 .h1-b { color: var(--red); margin-bottom: 18px; }
.hero .lead { margin-top: 0; }
.hero-facts .chip { margin-left: 0; }

/* branch video / branch still */
.video-panel { position: relative; background: var(--navy); color: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.video-tag { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--navy); border-radius: 30px; padding: 9px 12px; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.video-tag .ic { width: 13px; height: 13px; }
/* height: auto so the file's own width / height attributes cannot beat the 16:9 crop */
.video-panel .video-slot, .video-still img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #171032; border-radius: 0; }
.video-still { margin: 0; }
.video-panel .yt { border-radius: 0; }
.video-copy { padding: 17px 20px; }
.video-copy.pad { padding-top: 56px; }
.video-copy h2 { color: #fff; font-size: 18px; }
.video-copy p { color: #D5CFE4; font-size: 10px; line-height: 1.6; margin-top: 6px; }
.video-link { display: inline-block; margin-top: 10px; color: var(--gold); font-weight: 800; font-size: 11px; }

/* city tagline band */
.region-band { background: var(--paper); padding: 12px 0 34px; }
.region-box { --cream: #F2EFE9; position: relative; overflow: hidden; border-radius: 13px; background: var(--cream); min-height: 165px; }
.region-label { position: absolute; left: 16px; top: 14px; z-index: 1; }
.region-label .eyebrow-txt { color: #4B4557; }
.region-label b { display: block; margin-top: 8px; font-family: Georgia, "Noto Serif Devanagari", serif; font-size: 16px; color: #615A76; }
:lang(hi) .region-label b { font-family: var(--font); }

/* batch table */
.bfilter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.bfilter button { min-height: 38px; border: 1px solid var(--line); background: #fff; padding: 0 14px; border-radius: 30px; font-size: 11px; font-weight: 800; color: var(--ink); }
.bfilter button:hover { border-color: var(--field); }
.bfilter button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.btable-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow-x: auto; }
.btable { border-collapse: collapse; width: 100%; }
.btable th { text-align: left; background: #F4F1EC; font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase; padding: 14px 16px; color: #635D6D; font-weight: 700; white-space: nowrap; }
.btable td { padding: 17px 16px; border-top: 1px solid var(--line); font-size: 12px; vertical-align: middle; }
.btable td strong { display: block; font-size: 13px; font-weight: 700; }
.btable td small { display: block; color: var(--muted); font-size: 9px; margin-top: 5px; }
.btable .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; white-space: nowrap; padding: 0 13px; border: 0; border-radius: var(--r-sm); background: var(--red); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
:lang(en) .table-btn, :lang(en) .course-card .select-course { text-transform: uppercase; }
.table-btn:hover { background: var(--crimson-700); }
.table-note, .fine { font-size: 10px; color: var(--muted); line-height: 1.65; margin-top: 13px; }
.bfilter-none { font-size: 13px; color: var(--muted); margin-top: 13px; }
.no-batches { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.no-batches p + p { margin-top: 14px; }

/* exam chooser + the dark selection bar */
.course-card h3 { font-size: 15px; font-weight: 700; }
.course-card .select-course { font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.selection { margin-top: 18px; padding: 19px 22px; border-radius: 9px; background: var(--navy); color: #fff; display: grid; gap: 16px; }
.selection h3 { color: #fff; font-size: 15px; }
.selection #planExams { font-size: 11px; line-height: 1.6; color: #D2CDE1; margin-top: 5px; }
.slot-picker { margin-top: 14px; }
.slot-picker .eyebrow-txt { color: #C9C4E6; margin-bottom: 8px; }
.slots { display: flex; gap: 8px; flex-wrap: wrap; }
.slot { min-height: 34px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; padding: 0 13px; border-radius: 30px; font-size: 11px; font-weight: 800; }
.slot b { font-weight: 800; }
.slot:hover { background: rgba(255,255,255,.1); }
.slot.selected { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.pick-sum { margin-top: 14px; font-size: 11px; color: #C9C4E6; }
.pick-sum span { color: #fff; font-weight: 800; }
.selection .button { width: 100%; }

/* student journey, now a band of its own */
.wide-card .media-tabs { justify-content: space-between; }
.media-name { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #CFC9EE; }
.media-name .ic { width: 15px; height: 15px; }

/* photos: the width / height attributes on the file must not beat the crop */
.photo img { height: auto; }

/* visit */
.contact { display: grid; gap: 20px; }
.contact h2 { font-size: 31px; line-height: 1.12; margin: 10px 0 16px; letter-spacing: -1px; }
.contact-copy p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px; }
.contact-card h3 { font-size: 18px; margin: 7px 0 10px; }
.contact-card address { display: block; font-style: normal; color: var(--muted); font-size: 12px; line-height: 1.75; }
.phone { display: block; font-size: 25px; font-weight: 900; color: var(--red); margin: 18px 0 12px; font-variant-numeric: tabular-nums; }
/* the branch WhatsApp number, back beside the phone after the old "Reach us" tab became a section */
.wa { margin-top: 8px; }
.nearby { margin-top: 0; }

/* closing call to action */
.cta { background: var(--red); color: #fff; padding: 30px 0; }
.cta-row { display: grid; gap: 16px; align-items: center; }
.cta h2 { color: #fff; font-size: 22px; }
.cta p { color: #FFE0E3; font-size: 12px; margin-top: 6px; }

/* ---------- phone: the table becomes cards, so nothing scrolls sideways ---------- */
@media (max-width: 767px) {
  .btable-wrap { border: 0; background: none; overflow: visible; }
  .btable, .btable tbody, .btable tr, .btable td { display: block; }
  .btable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .btable tr { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: 14px 16px; }
  .btable tr + tr { margin-top: 10px; }
  .btable td { border: 0; padding: 7px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 12px; text-align: right; }
  .btable td::before { content: attr(data-th); flex: none; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; text-align: left; }
  .btable td:first-child, .btable td:last-child { display: block; text-align: left; }
  .btable td:first-child { padding-top: 0; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 4px; }
  .btable td:first-child::before, .btable td:last-child::before { display: none; }
  .btable td:last-child { padding: 12px 0 0; }
  .btable .table-btn { width: 100%; }
}
@media (min-width: 768px) {
  /* even photo tiles: the big one spans two rows, so nothing stretches to a photo's own height */
  .photos { grid-auto-rows: 140px; }
  .photos .photo img { height: 100%; aspect-ratio: auto; }
  .photo.big { grid-row: span 2; }
  /* five real photos need two rows, so the caption sits on the photo; a solid scrim keeps it readable */
  .photo figcaption { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; padding: 3px 7px; border-radius: 5px; background: rgba(32,24,71,.62); color: #fff; }
  .photo { position: relative; }
  .cs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; }
  .cs-head h2 { font-size: 37px; }
  .hero h1 .h1-a, .hero h1 .h1-b { font-size: 44px; letter-spacing: -2px; }
  .region-band { padding: 28px 0 46px; }
  .region-box { min-height: 290px; }
  .region-label { left: 28px; top: 24px; }
  .region-label b { font-size: 24px; }
  .selection { grid-template-columns: 1fr auto; align-items: center; gap: 25px; }
  .selection .button { width: auto; min-width: 200px; }
  .slot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 25px; }
  .contact { grid-template-columns: 1fr 1fr; gap: 45px; align-items: center; }
  .cta-row { grid-template-columns: 1fr auto; }
  .cta h2 { font-size: 27px; }
}
@media (min-width: 1024px) {
  #mainNav { gap: 24px; }
  #mainNav a { white-space: nowrap; }
  .photos { grid-auto-rows: 148px; }
  .hero h1 .h1-a, .hero h1 .h1-b { font-size: 54px; letter-spacing: -2.5px; }
  .cs-head h2, .contact h2 { font-size: 37px; }
  .region-box { min-height: 384px; }
}