/* =====================================================================
   Siddhartha Global School — pages.css
   Everything the INNER PAGES and the NEW MENU need.

   It loads AFTER style-v8.css and never edits it. The homepage design is
   therefore untouched: delete this file and the homepage still looks
   exactly as it did, it just loses the drop-down menu.

   Sections in this file
     1  skip link
     2  contact strip above the header
     3  the menu — desktop bar, drop-downs, phone accordion
     4  page banner and breadcrumb
     5  page furniture — prose, cards, grids, tables
     6  page-specific blocks — blog, downloads, gallery, disclosure
     7  closing call to action, WhatsApp button, footer additions
     8  print
   ===================================================================== */

/* ---------- 1. skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--gold);color:#221900;
  padding:.7rem 1.2rem;font-weight:700;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- 2. contact strip ---------- */
.util-bar{background:var(--ink);color:#9FB6D4;font-size:.82rem;position:relative;z-index:1040}
.util-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:40px;flex-wrap:wrap;padding-block:.28rem}
.util-bar a,.util-bar span{color:#9FB6D4;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.util-bar a:hover{color:var(--gold)}
.util-left,.util-right{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.util-bar i{color:var(--gold);font-size:.9em}
.util-right a+a{margin-left:0}
@media(max-width:991.98px){
  .util-addr{display:none}
  .util-right a:not([aria-label]){display:none}
  .util-inner{justify-content:center;gap:.9rem}
}

/* ---------- 3. THE MENU ---------- */

/* On an inner page the header is a normal sticky bar, not the floating
   one the homepage uses over its video. */
.site-header.static-header{position:sticky;top:0;padding:0;background:#fff;
  box-shadow:0 10px 30px -24px rgba(11,30,60,.9)}
.site-header:not(.solid){padding:0}
.site-header:not(.solid) .head-top-inner{padding:.7rem 0}
.site-header.static-header .brand .mark{width:64px;height:64px;flex-basis:64px}
.inner-page section[id]{scroll-margin-top:96px}

/* ---------------------------------------------------------------------
   THE HEADER — one row, and the menu behind a button.

   Thirteen menu items and a logo do not fit across a laptop. Every attempt to
   make them fit produced either items touching each other or items so small
   they were hard to read. The best international school sites solve this the
   same way: logo on the left, one or two buttons on the right, everything
   else behind a single control. That is what this is.

   It also removes a whole class of bug: there is now ONE menu, used at every
   screen size, so the desktop and phone versions can never drift apart.
   --------------------------------------------------------------------- */
.head-top-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem 0}
.head-right{display:flex;align-items:center;gap:1rem}

.head-phone{display:none;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none}
@media(min-width:768px){.head-phone{display:inline-flex}}
.head-phone i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(242,194,48,.2);color:var(--brass);font-size:1rem;flex:0 0 40px}
.head-phone small{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;line-height:1.2}
.head-phone b{display:block;font-size:.95rem;font-weight:700;line-height:1.3}
.site-header:not(.solid) .head-phone{color:#fff}
.site-header:not(.solid) .head-phone small{color:rgba(255,255,255,.8)}
.site-header:not(.solid) .head-phone i{background:rgba(255,255,255,.16);color:var(--gold)}

/* the button that opens everything */
.burger{width:56px;height:56px;flex:0 0 56px;border:0;border-radius:12px;background:var(--gold);
  display:grid;place-content:center;gap:6px;cursor:pointer;transition:.3s var(--ease);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;
  transition:.3s var(--ease)}
.burger:hover{background:var(--ink)}
.burger:hover span{background:var(--gold)}
.burger:hover span:nth-child(1){transform:translateY(-2px)}
.burger:hover span:nth-child(3){transform:translateY(2px)}

/* the old wide bar is gone — make sure nothing is left drawing one */
.head-bar,.main-nav{display:none!important}

/* ---------------------------------------------------------------------
   THE MENU PANEL — wider, two columns on a desktop, with the pictures.
   --------------------------------------------------------------------- */
.menu-panel{width:min(760px,96vw)!important;background:linear-gradient(165deg,#123058,#0B1E3C);
  color:#C6D6EC;border:0}
.menu-panel .offcanvas-header{padding:1.1rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.panel-brand{font-family:var(--display);color:#fff;font-weight:600;font-size:1rem;line-height:1.2}
.menu-panel .offcanvas-body{padding:1.3rem 1.6rem 2.4rem}

.m-nav{display:grid;gap:.15rem}
@media(min-width:768px){.m-nav{grid-template-columns:1fr 1fr;gap:.15rem 2rem;align-items:start}}

.m-link{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;text-align:left;color:#fff;font-family:var(--display);
  font-size:1.02rem;font-weight:600;letter-spacing:0;padding:.7rem .2rem;
  border-bottom:1px solid rgba(255,255,255,.09);transition:.22s var(--ease);text-decoration:none}
.m-link:hover,.m-link:focus{color:var(--gold);padding-left:.5rem}
.m-toggle i{font-size:.8rem;color:var(--gold);transition:transform .3s var(--ease)}
.m-toggle[aria-expanded="true"] i{transform:rotate(45deg)}
.m-group{min-width:0}
.m-sub{padding:.3rem 0 .7rem}
.m-sublink{display:flex;align-items:center;gap:.7rem;color:#B9CBE4;font-size:.88rem;
  font-weight:500;padding:.45rem .5rem;border-radius:8px;text-decoration:none;
  transition:.2s var(--ease)}
.m-sublink:hover{color:#fff;background:rgba(255,255,255,.08)}
.m-sublink img{width:54px;height:40px;object-fit:cover;border-radius:6px;flex:0 0 54px;
  background:rgba(255,255,255,.12)}
.m-subico{width:54px;height:40px;flex:0 0 54px;border-radius:6px;display:grid;place-items:center;
  background:rgba(242,194,48,.18);color:var(--gold);font-size:1rem}

.menu-contact{margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.92rem;line-height:1.75}
.menu-contact h6{font-family:var(--text);font-size:.8rem;letter-spacing:.02em;color:var(--gold);
  font-weight:700;margin-bottom:.8rem}
.menu-contact a{color:#C6D6EC;text-decoration:none}
.menu-contact a:hover{color:#fff}
.panel-soc{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:1rem;transition:.25s var(--ease)}
.panel-soc.s-fb{background:#1877F2}
.panel-soc.s-ig{background:linear-gradient(45deg,#F09433,#DC2743,#BC1888)}
.panel-soc.s-yt{background:#FF0000}
.panel-soc:hover{transform:translateY(-3px);color:#fff}

/* the phone / tablet menu */
.m-nav{display:flex;flex-direction:column}
.m-link{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;text-align:left;color:#fff;font-family:var(--display);
  font-size:1.06rem;font-weight:600;letter-spacing:0;padding:.72rem 0;
  border-bottom:1px solid rgba(255,255,255,.09);transition:.25s var(--ease)}
.m-link:hover,.m-link:focus{color:var(--gold)}
.m-toggle i{font-size:.85rem;color:var(--gold);transition:.3s var(--ease)}
.m-toggle[aria-expanded="true"] i{transform:rotate(45deg)}
.m-sub{padding:.35rem 0 .6rem}
.m-sublink{display:flex;align-items:center;gap:.65rem;color:#B9CBE4;font-size:.9rem;
  font-weight:500;padding:.5rem .2rem .5rem .9rem;border-left:2px solid rgba(242,194,48,.4);
  margin-left:.2rem;text-decoration:none;transition:.25s var(--ease)}
.m-sublink:hover{color:#fff;border-left-color:var(--gold);background:rgba(255,255,255,.05)}
.m-sublink img{width:46px;height:34px;object-fit:cover;border-radius:5px;flex:0 0 46px;
  background:rgba(255,255,255,.12)}

/* ---------- 4. page banner ---------- */
.page-head{background:var(--grad-brand);background-size:cover;background-position:center;
  color:#C8D8EA;padding:clamp(52px,7vw,88px) 0 clamp(44px,6vw,68px);position:relative}
.page-head.has-photo{background-attachment:scroll}
.page-head h1{color:#fff;font-size:clamp(1.75rem,3.5vw,2.7rem);line-height:1.18;margin:0;font-weight:700}
.caps-headings .page-head h1{text-transform:uppercase;letter-spacing:.012em}
.page-head .accent-gold{color:var(--gold-hi)}
.page-head .eyebrow{color:var(--gold)}
.page-head .rule{width:88px;height:4px;background:var(--gold);border-radius:3px;margin-top:1.15rem}
.page-head-intro{margin:1.3rem 0 0;max-width:70ch;font-size:1.02rem;line-height:1.8;color:#CFDDEE}
.crumb{font-size:.85rem;color:#9FB6D4;margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.crumb a{color:#9FB6D4;text-decoration:none}
.crumb a:hover{color:#fff}
.crumb .current{color:var(--gold)}

/* ---------- 5. page furniture ---------- */
.sec-alt{background:var(--sand)}
.sec-white{background:#fff}
.prose{max-width:72ch}
.prose p{margin-bottom:1.15rem;line-height:1.85}
.prose h2{margin-top:2.6rem}
.prose h3{font-size:1.16rem;margin:2rem 0 .7rem}
.prose ul{padding-left:1.1rem;margin-bottom:1.3rem}
.prose li{margin-bottom:.5rem;line-height:1.75}
.prose strong,.prose b{color:var(--ink)}

.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem 1.4rem;
  height:100%;transition:.35s var(--ease)}
.info-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(242,194,48,.6)}
.info-card i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:rgba(242,194,48,.18);color:var(--brass);font-size:1.35rem;margin-bottom:1rem}
.info-card h3{font-size:1.08rem;margin:0 0 .5rem}
.info-card p{font-size:.93rem;line-height:1.72;margin:0;color:var(--body)}
.info-card .spec{display:inline-block;margin-top:.9rem;font-size:.74rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--green);
  background:rgba(31,138,59,.1);border-radius:999px;padding:.3rem .75rem}

/* photo + text rows that alternate left and right */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.split+.split{margin-top:clamp(2.4rem,5vw,4.2rem)}
.split:nth-child(even) .split-media{order:2}
.split-media{border-radius:110px 0 110px 0;overflow:hidden;background:var(--navy);
  box-shadow:var(--shadow);aspect-ratio:4/3}
.split-media img{width:100%;height:100%;object-fit:cover;display:block;transition:1.1s var(--ease)}
.split-media:hover img{transform:scale(1.05)}
@media(max-width:767.98px){
  .split{grid-template-columns:1fr}
  .split:nth-child(even) .split-media{order:0}
  .split-media{border-radius:70px 0 70px 0}
}

/* the key/value table used by disclosure and the result summary */
.data-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;margin-bottom:1.4rem}
.data-table th,.data-table td{padding:.85rem 1rem;border-bottom:1px solid var(--line);
  font-size:.93rem;line-height:1.65;vertical-align:top;text-align:left}
.data-table thead th{background:var(--ink);color:#fff;font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;border-bottom:0}
.data-table tbody th{width:38%;font-weight:600;color:var(--ink);background:var(--ivory)}
.data-table tbody tr:last-child th,.data-table tbody tr:last-child td{border-bottom:0}
.data-table td a{display:inline;color:var(--green);font-weight:600}
.data-table .srno{width:56px;color:var(--brass);font-weight:700;background:var(--ivory)}
@media(max-width:575.98px){
  .data-table th,.data-table td{display:block;width:100%}
  .data-table tbody th{border-bottom:0;padding-bottom:.25rem}
  .data-table .srno{display:none}
  .data-table td{padding-top:.25rem}
  .data-table thead{display:none}
}

/* numbered steps */
.steps{counter-reset:step;display:grid;gap:1rem}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem 1.5rem 1.5rem 4.6rem;transition:.3s var(--ease)}
.step:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:1.3rem;top:1.35rem;
  width:38px;height:38px;border-radius:50%;background:var(--gold);color:#221900;
  display:grid;place-items:center;font-weight:800;font-size:1rem}
.step h3{font-size:1.06rem;margin:0 0 .4rem}
.step p{font-size:.93rem;line-height:1.72;margin:0}
.step .when{display:inline-block;margin-top:.7rem;font-size:.76rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}

/* the vertical routine list */
.timeline{list-style:none;padding:0;margin:0;position:relative}
.timeline::before{content:"";position:absolute;left:88px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{display:grid;grid-template-columns:88px 1fr;gap:1.6rem;padding:.85rem 0;position:relative}
.timeline .t-time{font-weight:700;color:var(--brass);font-size:.88rem;text-align:right;padding-top:.1rem}
.timeline li::after{content:"";position:absolute;left:83px;top:1.15rem;width:12px;height:12px;
  border-radius:50%;background:var(--gold);border:3px solid var(--ivory)}
.timeline h4{font-size:1rem;margin:0 0 .25rem}
.timeline p{font-size:.9rem;line-height:1.7;margin:0;color:var(--body)}
@media(max-width:575.98px){
  .timeline::before,.timeline li::after{display:none}
  .timeline li{grid-template-columns:1fr;gap:.2rem}
  .timeline .t-time{text-align:left}
}

/* ---------- 6. page-specific blocks ---------- */

/* blog */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.5rem}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;height:100%;transition:.35s var(--ease)}
.post-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.post-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease)}
.post-card:hover .post-thumb img{transform:scale(1.06)}
.post-body{padding:1.35rem;display:flex;flex-direction:column;flex:1}
.post-cat{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);margin-bottom:.5rem}
.post-body h3{font-size:1.08rem;line-height:1.35;margin:0 0 .55rem}
.post-body h3 a{color:var(--ink);text-decoration:none}
.post-card:hover h3 a{color:var(--green)}
.post-body p{font-size:.9rem;line-height:1.7;margin:0 0 1rem;color:var(--body)}
.post-meta{margin-top:auto;font-size:.8rem;color:var(--muted);display:flex;gap:.8rem;flex-wrap:wrap}
.post-hero{aspect-ratio:21/9;border-radius:var(--r-lg);overflow:hidden;background:var(--navy);margin-bottom:2rem}
.post-hero img{width:100%;height:100%;object-fit:cover}

/* downloads */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.doc{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.15rem 1.2rem;text-decoration:none;transition:.3s var(--ease);height:100%}
a.doc:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.doc i{font-size:1.5rem;color:#C0392B;flex:0 0 auto;margin-top:.1rem}
.doc b{display:block;font-family:var(--display);font-size:.97rem;color:var(--ink);
  font-weight:600;line-height:1.35;margin-bottom:.2rem}
.doc small{display:block;font-size:.83rem;color:var(--muted);line-height:1.6}
.doc.is-missing{opacity:.55;cursor:default}
.doc.is-missing i{color:var(--muted)}

/* image gallery */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}
.album{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  background:var(--navy);text-decoration:none}
.album img{width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease)}
.album:hover img{transform:scale(1.07)}
.album::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,30,60,0) 35%,rgba(8,24,47,.9))}
.album-cap{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:2;color:#fff}
.album-cap b{display:block;font-family:var(--display);font-size:1.05rem;font-weight:600}
.album-cap small{font-size:.8rem;color:#C6D6EC}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem}
.photo-tile{aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--sand)}
.photo-tile img{width:100%;height:100%;object-fit:cover;transition:.9s var(--ease)}
.photo-tile:hover img{transform:scale(1.06)}

/* video gallery */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.video-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.video-frame{position:relative;aspect-ratio:16/9;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-card .vc-body{padding:1.1rem 1.2rem}
.video-card h3{font-size:1rem;margin:0 0 .25rem}
.video-card p{font-size:.86rem;color:var(--muted);margin:0}

/* results */
.result-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem 1.5rem;height:100%}
.result-card h3{font-size:1.12rem;margin:0 0 1rem;padding-bottom:.7rem;border-bottom:2px solid var(--gold);display:inline-block}
.result-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-top:.4rem}
.result-rows div{background:var(--ivory);border-radius:var(--r-md);padding:.9rem}
.result-rows b{display:block;font-size:1.5rem;color:var(--ink);line-height:1}
.result-rows span{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}

/* disclosure section headers */
.mpd-section{scroll-margin-top:110px;margin-bottom:2.8rem}
.mpd-section h2{display:flex;align-items:center;gap:.9rem;font-size:1.25rem;margin-bottom:1.2rem}
.mpd-section h2::after{display:none}
.mpd-letter{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--gold);
  display:grid;place-items:center;font-weight:800;font-size:1.15rem}
.mpd-jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.2rem}
.mpd-jump a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;
  font-size:.84rem;font-weight:600;color:var(--ink);text-decoration:none;transition:.25s var(--ease)}
.mpd-jump a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.note-box{background:#fff;border-left:4px solid var(--gold);border-radius:0 10px 10px 0;
  padding:1.05rem 1.25rem;font-size:.9rem;line-height:1.75;margin-top:1.8rem}

/* a small enquiry form on inner pages */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem}
.form-card .form-label{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);margin-bottom:.3rem}
.form-card .form-control,.form-card .form-select{border:1px solid var(--line);border-radius:8px;padding:.72rem .9rem}
.form-card .form-control:focus,.form-card .form-select:focus{border-color:var(--gold);
  box-shadow:0 0 0 .2rem rgba(242,194,48,.22)}

/* previous / next links at the foot of a page */
.pagenav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.6rem;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.pagenav a{font-weight:600;font-size:.92rem;color:var(--ink);text-decoration:none}
.pagenav a:hover{color:var(--green)}

/* ---------- 7. closing strip, WhatsApp, footer ---------- */
.page-cta{background:var(--grad-soft);padding:clamp(40px,6vw,70px) 0;color:#CFDDEE}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.page-cta h2{color:#fff;font-size:clamp(1.35rem,2.4vw,1.95rem);margin:0}
.page-cta h2::after{display:none}
.page-cta p{margin:0;font-size:.98rem}
.cta-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:1200;width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;font-size:1.6rem;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);transition:.3s var(--ease);text-decoration:none}
.wa-float:hover{transform:scale(1.08);color:#fff}
.foot-areas{font-size:.82rem;color:#8FA5C0;margin-top:.9rem;line-height:1.7}
.foot-plain{display:block;font-size:.94rem;color:#8FA5C0}

/* ---------- 8. print ---------- */
@media print{
  .util-bar,.site-header,.menu-panel,.page-cta,.wa-float,footer,.mpd-jump,.pagenav{display:none!important}
  .page-head{background:none!important;color:#000;padding:0 0 1rem}
  .page-head h1,.page-head .accent-gold{color:#000!important}
  body{font-size:11pt}
  .data-table th,.data-table td{border:1px solid #999}
}

/* icon badge standing in for a photo in the phone menu */
.m-subico{width:46px;height:34px;flex:0 0 46px;border-radius:5px;display:grid;place-items:center;
  background:rgba(242,194,48,.16);color:var(--gold);font-size:.95rem}

/* ---------- mandatory disclosure: A to E as tabs ---------- */
.mpd-tabs{display:flex;gap:.5rem;margin-bottom:2rem;overflow-x:auto;padding-bottom:.4rem;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.mpd-tab{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:.6rem .95rem;cursor:pointer;
  transition:.22s var(--ease);font-family:var(--text);text-align:left}
.mpd-tab b{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;flex:0 0 30px;
  background:var(--ink);color:var(--gold);font-size:.95rem;font-weight:800}
.mpd-tab span{font-size:.85rem;font-weight:600;color:var(--ink);white-space:nowrap}
.mpd-tab:hover{border-color:var(--gold);transform:translateY(-2px)}
.mpd-tab.active{background:var(--ink);border-color:var(--ink)}
.mpd-tab.active b{background:var(--gold);color:#221900}
.mpd-tab.active span{color:#fff}
/* one section at a time, but only once the script has taken over — with
   JavaScript off, every section stays visible and the page still works */
.js .mpd-section.is-hidden{display:none}


/* =====================================================================
   MOBILE

   THE BUG: style-v8.css sets .brand b{white-space:nowrap}. "Siddhartha
   Global School" on one unbreakable line is about 200px, the logo another
   84px, Apply Online 130px and the burger 56px — roughly 470px of content
   inside a 360px screen. The row could not shrink, so it overflowed to the
   right and took the burger button off the edge of the screen with it.
   The menu was not hidden; it was past the right-hand edge.

   The fix is to let the header shrink: the name wraps to two short lines,
   the logo comes down, Apply Online stands aside below 600px, and the
   burger is pinned so it can never be the thing that gets pushed out.
   ===================================================================== */

/* A page must never scroll sideways. If something does overflow, this stops
   it dragging the whole layout with it. */
html,body{max-width:100%;overflow-x:hidden}

@media(max-width:991.98px){
  .head-top-inner{padding:.45rem 0;gap:.6rem;min-width:0}
  .brand{min-width:0;flex:1 1 auto;gap:.6rem}
  .brand-text{min-width:0}
  /* the name may now wrap — this is the rule that was causing the overflow */
  .brand b{white-space:normal!important;font-size:.84rem;line-height:1.22;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .brand .mark,.site-header.solid .brand .mark{width:48px;height:48px;flex-basis:48px}
  .head-right{gap:.55rem;flex:0 0 auto}
  .burger{width:48px;height:48px;flex:0 0 48px;border-radius:10px}
  .burger span{width:20px}
}

@media(max-width:600px){
  /* Apply Online is the first thing to go: the same action is the gold
     button at the bottom of the menu panel and the WhatsApp button. */
  .head-right .btn-apply{display:none!important}
}

@media(max-width:420px){
  .brand-text{display:none}          /* the emblem alone is enough this narrow */
  .brand .mark,.site-header.solid .brand .mark{width:44px;height:44px;flex-basis:44px}
}

/* ---- the menu panel fills a phone screen ---- */
@media(max-width:767.98px){
  .menu-panel{width:100vw!important;max-width:100vw}
  .menu-panel .offcanvas-header{padding:.9rem 1.1rem}
  .menu-panel .offcanvas-body{padding:1rem 1.1rem 2.2rem}
  .m-nav{grid-template-columns:1fr}
  .m-link{font-size:1rem;padding:.78rem .2rem}
  .m-sublink{padding:.5rem .4rem}
}

/* ---- the contact strip ---- */
@media(max-width:767.98px){
  .util-bar{font-size:.76rem}
  .util-inner{justify-content:center;gap:.7rem;min-height:34px}
  .util-left a:nth-child(2),.util-addr{display:none}   /* keep the phone only */
  .util-right a:not([aria-label]){display:none}
}

/* ---- the floating things, which crowd a small screen ---- */
@media(max-width:991.98px){
  /* The social rail is no longer hidden on phones and tablets. It shows on
     the left edge (see the phone rules at the end of style-v8.css). */
  .wa-float{display:grid!important;right:14px;bottom:14px;width:50px;height:50px;font-size:1.45rem}
}

/* ---- page banners and content ---- */
@media(max-width:767.98px){
  .page-head{padding:clamp(34px,6vw,52px) 0 clamp(30px,5vw,44px)}
  .page-head h1{font-size:clamp(1.45rem,6.4vw,2rem)}
  .page-head-intro{font-size:.95rem}
  .crumb{font-size:.8rem;margin-top:1rem}
  .sec{padding:clamp(40px,8vw,64px) 0}
  .info-grid,.post-grid,.doc-grid,.album-grid,.video-grid{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .cta-box{flex-direction:column;align-items:flex-start}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1 1 auto;text-align:center}
  .step{padding:1.2rem 1.2rem 1.2rem 3.9rem}
  .step::before{left:1rem;top:1.2rem;width:32px;height:32px;font-size:.9rem}
  .mpd-tab span{white-space:normal;font-size:.8rem}
  .result-rows{grid-template-columns:repeat(2,1fr)}
  .form-card{padding:1.3rem}
  /* a sticky enquiry form on a phone eats the screen */
  .form-card[style*="sticky"]{position:static!important}
}

/* ---- tables become stacked rows rather than a sideways scroll ---- */
@media(max-width:575.98px){
  .data-table tbody th{width:100%;font-size:.88rem}
  .doc{padding:1rem}
  .timeline{padding-left:0}
}

/* The WhatsApp button and Sia's button both want the bottom-right corner and
   were landing on top of each other. WhatsApp moves up so both are reachable;
   on the homepage, where a Call / WhatsApp / Enquire bar already runs across
   the bottom, the floating WhatsApp button is redundant and steps aside. */
.wa-float{bottom:92px;right:18px}
@media(max-width:991.98px){.wa-float{bottom:86px;right:14px}}
body:has(.mobile-bar) .wa-float{display:none!important}

/* ---------- contact page ----------
   .info-card is height:100% so cards in a grid line up. On the contact page
   two cards are stacked in one column, so the first one stretched to the
   full column height and pushed "Getting here" out of the section and on top
   of the footer. Here the cards take their natural height instead.
   The big gold icon box is meant for the card's heading icon only, not for
   the small icons inside links (the map arrow, the social icons). */
.info-card.contact-card{height:auto}
.info-card.contact-card a i{display:inline-block;width:auto;height:auto;background:none;
  border-radius:0;margin:0;font-size:inherit;color:inherit}
.info-card.contact-card .fs-4 a i{font-size:1.5rem;color:var(--ink)}