/* ==========================================================================
   Beyond Academics — imported content styling
   The pages under this section keep the *content and images* of the public
   shis.in pages, but their original Bootstrap/theme markup was reduced to plain
   semantic HTML on import. Everything here is scoped to .bx so nothing leaks
   into the rest of the site.
   ========================================================================== */
.bx{
  display:flow-root;
  font-size:15px;
  color:#374151;
  line-height:1.75;
}

/* ------------------------------------------------------------- typography */
.bx h1,.bx h2,.bx h3,.bx h4,.bx h5,.bx h6{
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--navy,#102147);
  line-height:1.25;
  margin:1.6em 0 .5em;
  font-weight:800;
  letter-spacing:-.01em;
}
.bx h1{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.bx h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.7rem)}
.bx h3{font-size:clamp(1.15rem,1rem + .6vw,1.35rem)}
.bx h4{font-size:1.1rem}
.bx h5{font-size:1rem}
.bx h6{
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--crimson,#bc2e31);
}
.bx > :first-child{margin-top:0}
.bx h1 + p,.bx h2 + p,.bx h3 + p{margin-top:.4em}

.bx p{margin:0 0 1.05em}
.bx strong,.bx b{color:var(--navy,#102147);font-weight:700}
.bx a{color:var(--crimson,#bc2e31);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(188,46,49,.3)}
.bx a:hover{border-bottom-color:currentColor}

.bx ul,.bx ol{margin:0 0 1.2em;padding-left:1.35em}
.bx li{margin:.35em 0}
.bx ul li::marker{color:var(--gold,#c9a227)}
.bx ol li::marker{color:var(--crimson,#bc2e31);font-weight:700}

.bx blockquote{
  margin:1.4em 0;
  padding:14px 20px;
  border-left:3px solid var(--gold,#c9a227);
  background:#faf8f2;
  border-radius:0 12px 12px 0;
  font-style:italic;
  color:#4b5563;
}

/* ------------------------------------------------------------------ images */
.bx img{
  max-width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid #e6e9f1;
  background:#fff;
  margin:.6em 0;
}
.bx p > img:only-child{margin:.9em 0}
.bx a > img{margin:0}

/* Gallery: consecutive images grouped on import. */
.bx-gal{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));
  gap:14px;
  margin:1.4em 0;
}
.bx-gal img,.bx-gal a{margin:0}
.bx-gal a{display:block;border-bottom:none}
.bx-gal img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .35s cubic-bezier(.22,.9,.3,1),box-shadow .35s;
}
.bx-gal a:hover img{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 30px -18px rgba(16,33,71,.5)}

/* ------------------------------------------------------------------ tables */
/* Tables are wide (prefect lists), so allow them to scroll on small screens. */
.bx table{
  width:100%;
  border-collapse:collapse;
  margin:1.4em 0;
  font-size:13.5px;
  background:#fff;
}
.bx caption{
  text-align:left;
  font-weight:800;
  font-size:13px;
  color:var(--navy,#102147);
  padding-bottom:8px;
}
.bx th,.bx td{
  border:1px solid #e2e6ef;
  padding:9px 12px;
  text-align:left;
  vertical-align:top;
}
.bx thead th,.bx th{
  background:#f4f6fb;
  color:var(--navy,#102147);
  font-weight:800;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.bx tbody tr:nth-child(even) td{background:#fafbfe}
.bx tbody tr:hover td{background:#fdf9ec}
.bx th h1,.bx th h2,.bx th h3,.bx th h4{
  margin:.15em 0;
  font-size:14px;
  text-transform:none;
  letter-spacing:0;
  color:inherit;
}
.bx td[colspan],.bx th[colspan]{text-align:center}
.bx .bx-gal:first-child{margin-top:0}

/* -------------------------------------------------- accordions (113 courses) */
.bx details.bx-acc{
  border:1px solid #e6e9f1;
  border-radius:14px;
  background:#fff;
  margin:0 0 10px;
  overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
.bx details.bx-acc[open]{
  border-color:rgba(201,162,39,.65);
  box-shadow:0 14px 30px -24px rgba(16,33,71,.5);
}
.bx details.bx-acc > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 18px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--navy,#102147);
  display:flex;
  align-items:center;
  gap:12px;
  transition:background .25s;
}
.bx details.bx-acc > summary::-webkit-details-marker{display:none}
/* Plain +/- markers: no icon-font dependency, always legible. */
.bx details.bx-acc > summary::before{
  content:"+";
  flex:0 0 auto;
  width:26px;height:26px;
  border-radius:8px;
  display:grid;place-items:center;
  font-size:16px;
  font-weight:800;
  line-height:1;
  color:#6b5200;
  background:linear-gradient(140deg,#fdf0cf,#f6e2ae);
}
.bx details.bx-acc[open] > summary::before{content:"\2212"}
.bx details.bx-acc > summary:hover{background:#fbfcfe}
.bx details.bx-acc[open] > summary{background:#fdfaf1}
.bx details.bx-acc > .bx-acc-body{padding:6px 18px 18px}
.bx details.bx-acc > .bx-acc-body img{margin:0}
.bx details.bx-acc > .bx-acc-body > img:only-child{max-width:100%}

/* Wide tables and long words must never blow out the layout. */
.bx{overflow-wrap:anywhere}

/* ---------------------------------------------------------- houses page styles */
.bx h1.houses-main-title{
  text-align:center;
  margin:2em 0 1.5em;
  padding:0 1em;
  font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);
  color:var(--crimson,#bc2e31);
  position:relative;
}
.bx h1.houses-main-title::after{
  content:"";
  display:block;
  width:80px;
  height:4px;
  background:linear-gradient(90deg,var(--gold,#c9a227),var(--crimson,#bc2e31));
  margin:1em auto 0;
  border-radius:2px;
}
.bx h2.houses-sub-title{
  text-align:center;
  margin:2.5em 0 1.5em;
  padding:0 1em;
  font-size:clamp(1.4rem,1.15rem + 1vw,1.8rem);
  color:var(--navy,#102147);
}
.bx .houses-intro{
  background:linear-gradient(135deg,#fdfaf1,#fff);
  border-left:4px solid var(--gold,#c9a227);
  border-radius:12px;
  padding:1.5em 2em;
  margin:2em 0;
  box-shadow:0 4px 12px rgba(16,33,71,.08);
}
.bx table.houses-table{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(16,33,71,.12);
  margin:2em 0;
}
.bx table.houses-table thead th{
  background:linear-gradient(135deg,#102147,#1a3a6b);
  color:#fff;
  padding:12px 14px;
  font-size:13px;
}
.bx table.houses-table tbody tr:hover td{
  background:#fef5e7;
  transform:scale(1.002);
  transition:all .2s ease;
}
.bx table.houses-table td[colspan]{
  background:#e8f4f8;
  font-weight:700;
  color:var(--navy,#102147);
}

/* ------------------------------------------------- student council page styles */
.bx .council-intro{
  background:linear-gradient(135deg,#f0f9ff,#fff);
  border-left:4px solid var(--crimson,#bc2e31);
  border-radius:12px;
  padding:1.5em 2em;
  margin:2em 0;
  box-shadow:0 4px 12px rgba(16,33,71,.08);
}
.bx .council-aims{
  background:#fdfaf1;
  border-radius:12px;
  padding:1.5em 2em;
  margin:2em 0;
  border:1px solid #f0e8d0;
}
.bx .council-aims h3{
  color:var(--crimson,#bc2e31);
  margin-top:0;
}
.bx .council-aims ul{
  margin:1em 0;
}
.bx .council-aims li{
  margin:.6em 0;
  padding-left:.5em;
}
.bx .head-leaders{
  background:linear-gradient(135deg,#102147,#1a3a6b);
  border-radius:16px;
  padding:2em;
  margin:2.5em 0;
  box-shadow:0 12px 28px rgba(16,33,71,.2);
  text-align:center;
}
.bx .head-leaders h1{
  color:#fff;
  margin:0 0 1.5em;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
}
.bx .head-leaders-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.5em;
  margin-top:1.5em;
}
.bx .leader-card{
  background:#fff;
  border-radius:12px;
  padding:1.5em;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transition:transform .3s ease,box-shadow .3s ease;
}
.bx .leader-card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.bx .leader-card .role{
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--crimson,#bc2e31);
  margin-bottom:.5em;
}
.bx .leader-card .name{
  font-size:1.25rem;
  font-weight:800;
  color:var(--navy,#102147);
  margin:.5em 0;
}
.bx .leader-card .details{
  font-size:14px;
  color:#6b7280;
  margin-top:.5em;
}
.bx h2.council-section-title{
  text-align:center;
  margin:3em 0 1.5em;
  padding:0 1em;
  font-size:clamp(1.4rem,1.15rem + 1vw,1.8rem);
  color:var(--navy,#102147);
  position:relative;
}
.bx h2.council-section-title::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  background:var(--gold,#c9a227);
  margin:.8em auto 0;
  border-radius:2px;
}
.bx table.council-table{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(16,33,71,.12);
  margin:2em 0;
}
.bx table.council-table thead th{
  background:linear-gradient(135deg,#102147,#1a3a6b);
  color:#fff;
  padding:12px 14px;
  font-size:12.5px;
}
.bx table.council-table tbody tr:hover td{
  background:#f0f9ff;
  transition:all .2s ease;
}
.bx table.council-table tbody tr:nth-child(odd){
  background:#fafbfe;
}

/* ======================================================= clubs page styles */
/* Anchored jump targets must clear the sticky site header. */
.bx #clubs-why,
.bx #clubs-incharge,
.bx .clubs-group{scroll-margin-top:104px}

/* --------------------------------------------------------------- intro box */
.bx .clubs-intro{
  background:linear-gradient(135deg,#fdfaf1,#fff 62%);
  border:1px solid #f0e8d0;
  border-left:4px solid var(--gold,#c9a227);
  border-radius:16px;
  padding:clamp(20px,2.6vw,34px) clamp(20px,3vw,40px);
  margin:0 0 clamp(28px,3.4vw,48px);
  box-shadow:0 10px 26px -20px rgba(16,33,71,.55);
}
.bx .clubs-intro-lead{
  font-size:clamp(15px,.9rem + .25vw,16.5px);
  color:#374151;
  margin:0;
  max-width:78ch;
}
.bx .clubs-stats{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(18px,3vw,48px);
  list-style:none;
  margin:clamp(18px,2.2vw,28px) 0 0;
  padding:clamp(16px,1.8vw,22px) 0 0;
  border-top:1px dashed #e2d9bf;
}
.bx .clubs-stats li{display:grid;gap:2px;margin:0}
.bx .clubs-stats strong{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--navy,#102147),var(--crimson,#bc2e31));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.bx .clubs-stats span{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#8b93a5;
}

/* ------------------------------------------------------------ section head */
.bx h2.clubs-sec-title{
  text-align:center;
  margin:clamp(30px,3.6vw,52px) 0 clamp(18px,2.2vw,30px);
  font-size:clamp(1.4rem,1.15rem + 1vw,1.85rem);
  color:var(--navy,#102147);
}
.bx h2.clubs-sec-title::after{
  content:"";
  display:block;
  width:64px;
  height:3px;
  background:linear-gradient(90deg,var(--gold,#c9a227),var(--crimson,#bc2e31));
  margin:.75em auto 0;
  border-radius:2px;
}

/* ----------------------------------------------------------- benefit cards */
.bx .clubs-benefits-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.bx .benefit-card{
  position:relative;
  background:#fff;
  border:1px solid #e6e9f1;
  border-radius:16px;
  padding:clamp(20px,2vw,28px);
  box-shadow:0 6px 18px -14px rgba(16,33,71,.5);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s,border-color .3s;
  overflow:hidden;
}
/* Thin accent rail that wipes in on hover. */
.bx .benefit-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,var(--gold,#c9a227),var(--crimson,#bc2e31));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s cubic-bezier(.22,.9,.3,1);
}
.bx .benefit-card:hover{
  transform:translateY(-4px);
  border-color:#dfe4ef;
  box-shadow:0 18px 34px -24px rgba(16,33,71,.55);
}
.bx .benefit-card:hover::before{transform:scaleY(1)}
.bx .benefit-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  margin:0 0 14px;
  font-size:18px;
  color:#6b5200;
  background:linear-gradient(140deg,#fdf0cf,#f6e2ae);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.35);
}
.bx .benefit-card h4{
  color:var(--navy,#102147);
  margin:0 0 .5em;
  font-size:1.06rem;
  letter-spacing:-.01em;
}
.bx .benefit-card p{
  font-size:14px;
  line-height:1.72;
  color:#4b5563;
  margin:0;
}

/* -------------------------------------------------------------- main title */
.bx h1.clubs-main-title{
  text-align:center;
  margin:clamp(34px,4.2vw,60px) 0 clamp(20px,2.4vw,30px);
  padding:0 1em;
  font-size:clamp(1.4rem,1.1rem + 1.2vw,2.05rem);
  line-height:1.28;
  color:var(--navy,#102147);
}
.bx h1.clubs-main-title::after{
  content:"";
  display:block;
  width:76px;
  height:3px;
  background:linear-gradient(90deg,var(--crimson,#bc2e31),var(--gold,#c9a227));
  margin:.8em auto 0;
  border-radius:2px;
}

/* --------------------------------------------------------------- jump pills */
.bx .clubs-jump{
  position:sticky;
  top:88px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 clamp(30px,3.6vw,48px);
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border:1px solid #e6e9f1;
  box-shadow:0 10px 26px -20px rgba(16,33,71,.6);
}
.bx .clubs-jump-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8b93a5;
  padding-right:4px;
}
.bx .clubs-jump a{
  border:1px solid #e3e7f0;
  border-radius:999px;
  padding:7px 15px;
  font-size:12.5px;
  font-weight:700;
  color:var(--navy,#102147);
  background:#fff;
  white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.bx .clubs-jump a:hover{
  background:var(--navy,#102147);
  border-color:var(--navy,#102147);
  color:#fff;
  transform:translateY(-1px);
}

/* ---------------------------------------------------------- band wrappers */
.bx .clubs-band{margin:0 0 clamp(34px,4.2vw,60px)}
.bx .clubs-band-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 clamp(16px,2vw,24px);
  padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,28px);
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,var(--navy,#102147) 0%,#1d3a72 62%,#24508f 100%);
  box-shadow:0 18px 34px -26px rgba(16,33,71,.9);
}
.bx .clubs-band-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:14px;
  font-size:19px;
  color:#3a2c00;
  background:linear-gradient(140deg,#fbeec4,#eecf83);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.8);
}
.bx .clubs-band-head h2{
  color:#fff;
  margin:0;
  font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);
  letter-spacing:-.01em;
}
.bx .clubs-band-head p{
  margin:.25em 0 0;
  font-size:13px;
  color:rgba(255,255,255,.74);
}
.bx .clubs-band--teacher .clubs-band-head{
  background:linear-gradient(135deg,#6d1b1e 0%,#9c2a2d 58%,#bc2e31 100%);
}

.bx .clubs-group{margin:0 0 clamp(26px,3.2vw,42px)}
.bx .clubs-group-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 14px;
  margin:0 0 clamp(14px,1.6vw,20px);
  padding:0 2px 12px;
  border-bottom:2px solid #eef1f7;
}
.bx .clubs-group-head h3{
  margin:0;
  font-size:clamp(1.02rem,.95rem + .4vw,1.22rem);
  color:var(--navy,#102147);
}
.bx .clubs-count{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#6b5200;
  background:linear-gradient(140deg,#fdf0cf,#f6e2ae);
  border-radius:999px;
  padding:4px 11px;
  white-space:nowrap;
}
.bx .clubs-group-note{
  flex:1 1 100%;
  margin:0;
  font-size:13px;
  color:#6b7280;
}

/* ------------------------------------------------------- full-width tables */
/* Every in-charge list is a plain table that fills the content column. There is
   no size cap and no scroll container: the whole roster sits in normal page
   flow, and columns wrap rather than forcing a scrollbar. */
.bx .table-scroll{
  width:100%;
  overflow-x:auto;
  border:1px solid #e6e9f1;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 26px -20px rgba(16,33,71,.6);
}

.bx table.clubs-table{
  width:100%;
  margin:0;
  font-size:13.5px;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
}
.bx table.clubs-table th,
.bx table.clubs-table td{
  padding:10px 12px;
  line-height:1.4;
  text-align:left;
  vertical-align:middle;
  border-right:1px solid #eef1f7;
  border-bottom:1px solid #eef1f7;
  background:#fff;
}
/* Drop the trailing rules so the wrapper's own border closes the box. */
.bx table.clubs-table tr > *:last-child{border-right:0}
.bx table.clubs-table tbody tr:last-child > *{border-bottom:0}

/* Fixed-height header rows keep the two-row head on one consistent rhythm.
   Borders are reset here because the shared `.bx th` rule paints a pale
   1px box that would show as light seams across the dark header. */
.bx table.clubs-table thead th{
  height:38px;
  padding:0 12px;
  white-space:nowrap;
  background:linear-gradient(135deg,var(--navy,#102147),#1d3a72);
  color:#fff;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:0;
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.bx table.clubs-table--pairs thead tr:nth-child(2) th{
  background:#1e3d78;
  font-size:11px;
  letter-spacing:.05em;
}
/* Banner row spanning the President / Vice President column blocks. */
.bx table.clubs-table thead th.clubs-grp{
  text-align:center;
  letter-spacing:.09em;
  border-right:2px solid rgba(255,255,255,.3);
}
.bx table.clubs-table thead th.clubs-grp--vp{
  background:linear-gradient(135deg,#1e3d78,#2a5596);
}

.bx table.clubs-table tbody td{color:#374151}
.bx table.clubs-table tbody tr:nth-child(even) td{background:#fafbfe}
.bx table.clubs-table tbody tr:hover td{background:#fdf6e4}

.bx table.clubs-table tbody .club-t-sl{
  width:1%;
  white-space:nowrap;
  text-align:center;
  color:#a2aab9;
  font-variant-numeric:tabular-nums;
}
.bx table.clubs-table tbody .club-t-name{
  width:1%;
  font-weight:700;
  color:var(--navy,#102147);
}
.bx table.clubs-table tbody .club-t-num{font-variant-numeric:tabular-nums;color:#6b7280}
.bx table.clubs-table tbody .club-t-strong{font-weight:600;color:#26334d}
.bx table.clubs-table tbody .club-t-gr{
  white-space:nowrap;
  font-weight:700;
  color:var(--crimson,#bc2e31);
}
.bx table.clubs-table tbody .club-t-members{color:#6b7280;font-size:12.5px}

/* Small club glyph beside each club name. */
.bx .club-icon--sm{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  margin-right:9px;
  border-radius:7px;
  font-size:11px;
  vertical-align:-4px;
  color:var(--navy,#102147);
  background:linear-gradient(140deg,#fdf0cf,#f2dfa8);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.4);
}

/* Eight columns must always fit inside the layout column, so keep only a small
   floor that stops the roster crushing on very narrow phones. Long club and
   student names wrap to a second line instead of pushing out a scrollbar. */
.bx table.clubs-table{min-width:560px}
.bx table.clubs-table--pairs{min-width:680px}
.bx table.clubs-table--pairs th.club-t-num{width:9%}
.bx table.clubs-table--pairs th.club-t-strong{width:17%}
.bx table.clubs-table--pairs th.club-t-gr{width:8%}
/* The sub-header labels may wrap; forcing them onto one line takes the width
   away from the student-name column and makes names wrap instead. */
.bx table.clubs-table--pairs thead tr:nth-child(2) th{white-space:normal}
.bx table.clubs-table--pairs th,
.bx table.clubs-table--pairs td{padding:9px 11px}

/* Column shares are set per table shape and read by the cells below. Each
   roster has a different column count, and the shared classes would otherwise
   fight on specificity. */
.bx table.clubs-table--pairs{--w-sl:5%;--w-club:22%}
.bx table.clubs-table--members{--w-sl:6%;--w-club:25%}
.bx table.clubs-table--basic{--w-sl:6%;--w-club:30%}
.bx table.clubs-table th.club-t-sl{width:var(--w-sl,6%)}
.bx table.clubs-table th.club-t-name{width:var(--w-club,26%)}
.bx table.clubs-table .club-t-members{width:28%}

@media(max-width:760px){
  .bx{font-size:14.5px}
  /* Generic legacy tables scroll themselves; .clubs-table scrolls via its
     .table-scroll wrapper so its pinned <thead> keeps working. */
  .bx table:not(.clubs-table){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bx th,.bx td{padding:7px 9px}
  .bx h1.houses-main-title,.bx h2.houses-sub-title{padding:0 .5em}
  .bx .houses-intro{padding:1.2em 1.5em}
  .bx .council-intro,.bx .council-aims{padding:1.2em 1.5em}
  .bx .head-leaders{padding:1.5em 1em}
  .bx .head-leaders-grid{grid-template-columns:1fr}
  .bx h2.council-section-title{padding:0 .5em}

  /* clubs */
  .bx .clubs-intro{padding:18px}
  .bx .clubs-stats{gap:18px 30px}
  .bx .clubs-benefits-grid{grid-template-columns:1fr}
  .bx h1.clubs-main-title{padding:0 .5em}
  .bx .clubs-jump{
    position:static;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .bx .clubs-jump::-webkit-scrollbar{display:none}
  .bx .clubs-jump-label{display:none}
  .bx .clubs-band-head{gap:12px;padding:14px 16px}
  .bx .clubs-band-icon{width:40px;height:40px;font-size:16px}
  .bx .clubs-group{scroll-margin-top:16px}
  .bx table.clubs-table--pairs{min-width:640px}
  .bx table.clubs-table th,
  .bx table.clubs-table td{padding:8px 9px}
}


/* ================================================ career guidance page styles */
/* --------------------------------------------------------------- intro box */
.bx .cg-intro{
  background:linear-gradient(135deg,#fdfaf1,#fff 62%);
  border:1px solid #f0e8d0;
  border-left:4px solid var(--gold,#c9a227);
  border-radius:16px;
  padding:clamp(20px,2.6vw,34px) clamp(20px,3vw,40px);
  margin:0 0 clamp(30px,3.6vw,52px);
  box-shadow:0 10px 26px -20px rgba(16,33,71,.55);
}
.bx .cg-intro p{
  margin:0 0 .95em;
  max-width:80ch;
  font-size:clamp(15px,.9rem + .2vw,16.5px);
  line-height:1.78;
  color:#374151;
}
.bx .cg-intro p:last-child{margin:0}

/* ----------------------------------------------------------- section heads */
.bx h2.cg-sec-title{
  font-size:clamp(1.32rem,1.1rem + .9vw,1.72rem);
  color:var(--navy,#102147);
  margin:0 0 .5em;
  letter-spacing:-.015em;
}
/* Centred variant keeps the gold/crimson rule used across the site. */
.bx h2.cg-sec-title:not(.cg-sec-title--left){
  text-align:center;
  margin:clamp(30px,3.6vw,52px) 0 clamp(18px,2.2vw,30px);
}
.bx h2.cg-sec-title:not(.cg-sec-title--left)::after{
  content:"";
  display:block;
  width:64px;
  height:3px;
  background:linear-gradient(90deg,var(--gold,#c9a227),var(--crimson,#bc2e31));
  margin:.75em auto 0;
  border-radius:2px;
}
.bx .cg-lede{
  text-align:center;
  margin:0 auto clamp(22px,2.6vw,34px);
  max-width:70ch;
  font-size:15.5px;
  color:#5b6478;
}

/* ------------------------------------------------- text / graphic 2-up split */
.bx .cg-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(24px,3.4vw,54px);
  align-items:center;
  margin:0 0 clamp(30px,3.6vw,50px);
}
.bx .cg-split--reverse{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.bx .cg-split--reverse .cg-split-copy{order:2}
.bx .cg-split--reverse .cg-figure{order:1}
.bx .cg-split-copy p{
  margin:0 0 .9em;
  font-size:15.5px;
  line-height:1.8;
  color:#3d4658;
}
.bx .cg-split-copy p:last-child{margin:0}
.bx .cg-figure{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e6e9f1;
  box-shadow:0 16px 34px -26px rgba(16,33,71,.6);
}
.bx .cg-figure img{display:block;width:100%;height:auto}

/* ------------------------------------------------------- the nine functions */
.bx .cg-roles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:clamp(12px,1.4vw,18px);
  list-style:none;
  margin:0;
  padding:0;
}
.bx .cg-role{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:start;
  margin:0;
  padding:clamp(15px,1.6vw,20px) clamp(16px,1.7vw,22px);
  background:#fff;
  border:1px solid #e6e9f1;
  border-radius:14px;
  box-shadow:0 6px 18px -16px rgba(16,33,71,.55);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s,border-color .3s;
}
.bx .cg-role:hover{
  transform:translateY(-3px);
  border-color:#dfe4ef;
  box-shadow:0 16px 30px -24px rgba(16,33,71,.55);
}
.bx .cg-role-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  font-size:15px;
  color:#6b5200;
  background:linear-gradient(140deg,#fdf0cf,#f6e2ae);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.35);
}
.bx .cg-role p{
  margin:0;
  font-size:14px;
  line-height:1.72;
  color:#414b5e;
}

/* --------------------------------------------------- programmes and sessions */
.bx .cg-events{
  display:grid;
  gap:clamp(20px,2.4vw,30px);
}
.bx .cg-event{
  position:relative;
  background:#fff;
  border:1px solid #e3e7f0;
  border-radius:18px;
  padding:clamp(20px,2.4vw,32px);
  box-shadow:0 12px 30px -26px rgba(16,33,71,.6);
}
/* Gold rail that ties each entry back to the section title rule. */
.bx .cg-event::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  border-radius:18px 0 0 18px;
  background:linear-gradient(180deg,var(--gold,#c9a227),var(--crimson,#bc2e31));
}
.bx .cg-event-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.8vw,22px);
  align-items:center;
}
.bx .cg-date{
  display:grid;
  place-items:center;
  align-content:center;
  width:78px;
  padding:9px 6px;
  border-radius:12px;
  background:linear-gradient(160deg,var(--navy,#102147),#1e3a6b);
}
.bx .cg-date-d{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.5rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  color:#fff;
}
.bx .cg-date-my{
  margin-top:3px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#e8c85a;
}
.bx .cg-event-title h3{
  margin:0;
  font-size:clamp(1.08rem,.98rem + .4vw,1.3rem);
  line-height:1.3;
  color:var(--navy,#102147);
  letter-spacing:-.01em;
}
.bx .cg-meta{
  margin:.4em 0 0;
  font-size:13px;
  font-weight:600;
  color:#8a6a08;
}
.bx .cg-quote{
  margin:clamp(16px,1.8vw,22px) 0 0;
  padding:clamp(14px,1.6vw,18px) clamp(16px,1.9vw,24px);
  background:#fbf8ef;
  border-left:3px solid var(--gold,#c9a227);
  border-radius:0 12px 12px 0;
}
.bx .cg-quote p{
  margin:0;
  font-size:15px;
  line-height:1.66;
  font-style:italic;
  color:#3d4658;
}
.bx .cg-quote cite{
  display:block;
  margin-top:.5em;
  font-size:12px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#5b6478;
}
/* Body copy runs beside the session photo on wide screens and stacks below it
   on narrower ones, so no entry becomes a wall of text or an oversized image. */
.bx .cg-event-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(18px,2.2vw,30px);
  align-items:start;
  margin-top:clamp(16px,1.8vw,22px);
}
.bx .cg-event-text p{
  margin:0 0 .9em;
  font-size:15px;
  line-height:1.8;
  color:#3d4658;
}
.bx .cg-event-text p:last-child{margin:0}
.bx .cg-shot{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  background:#f2f4f9;
  box-shadow:0 12px 26px -22px rgba(16,33,71,.65);
}
.bx .cg-shot img{display:block;width:100%;height:auto}

@media(max-width:900px){
  .bx .cg-split,
  .bx .cg-split--reverse{grid-template-columns:minmax(0,1fr)}
  .bx .cg-split--reverse .cg-split-copy{order:0}
  .bx .cg-split--reverse .cg-figure{order:0}
  .bx .cg-figure img{max-width:520px}
}
@media(max-width:760px){
  .bx .cg-intro{padding:18px}
  .bx .cg-roles{grid-template-columns:1fr}
  .bx .cg-event-body{grid-template-columns:minmax(0,1fr)}
  .bx .cg-event{padding:18px}
  .bx .cg-event-head{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .bx .cg-date{width:64px;padding:7px 4px}
  .bx .cg-date-d{font-size:1.2rem}
}

/* ============================================ counselling & SNE page styles
   Layout: a counsellor byline in the hero, a context split (copy + what the
   school is seeing), a three-step objective flow, a dark method band, an
   evenly tiled conditions grid and a closing provision card. Every rule is
   scoped under .bx so nothing leaks into the rest of the site. */

/* ---- hero aside: the counsellor byline card ---- */
.bx .snc-hero{
  display:grid;
  grid-template-columns:clamp(104px,30%,158px) minmax(0,1fr);
  gap:clamp(16px,2vw,24px);
  align-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  border-radius:22px;
  padding:clamp(16px,2vw,22px);
  box-shadow:0 40px 80px -52px rgba(0,0,0,.9);
  backdrop-filter:blur(4px);
}
.bx .snc-hero-photo{
  margin:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 18px 36px -22px rgba(0,0,0,.8);
}
.bx .snc-hero-photo img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:top center;
  margin:0;
  border:0;
  border-radius:0;
}
.bx .snc-hero-body{min-width:0}
.bx .snc-hero-kick{
  margin:0;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold,#c9a227);
}
.bx .snc-hero-name{
  margin:.35em 0 0;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.4rem,1.1rem + .8vw,1.8rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  color:#fff;
}
.bx .snc-hero-role{
  display:inline-block;
  width:fit-content;
  margin:.55em 0 0;
  padding:4px 13px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#231a00;
  background:linear-gradient(135deg,#e8cf6f,var(--gold,#c9a227));
}
.bx .snc-hero-line{
  margin:.8em 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:rgba(255,255,255,.82);
}

/* ---- context split: the copy beside what the school is seeing ---- */
.bx .snc-split{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,3vw,48px);
  align-items:start;
}
.bx .snc-split-copy>p{
  margin:0;
  max-width:64ch;
  font-size:15.5px;
  line-height:1.85;
  color:#3d4658;
}
.bx .snc-facts{
  background:linear-gradient(180deg,#fdfaf1,#fff);
  border:1px solid rgba(201,162,39,.4);
  border-radius:18px;
  padding:clamp(18px,2.2vw,28px);
  box-shadow:0 22px 48px -40px rgba(16,33,71,.55);
}
.bx .snc-facts-title{
  display:block;
  margin:0 0 14px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8a6d1c;
}
.bx .snc-facts ul{
  display:grid;
  gap:11px;
  margin:0;
  padding:0;
  list-style:none;
}
.bx .snc-facts li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:11px;
  align-items:start;
  margin:0;
  font-size:13.5px;
  line-height:1.65;
  color:#3d4658;
}
.bx .snc-facts li i{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:8px;
  font-size:11px;
  color:#6b5200;
  background:linear-gradient(140deg,#fdf0cf,#f6e2ae);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.35);
}
.bx .snc-facts-note{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px dashed rgba(201,162,39,.5);
  font-size:13px;
  line-height:1.7;
  color:#5b4a12;
}

/* ---- objective: the numbered three-step flow ---- */
.bx ol.snc-steps{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(12px,1.6vw,20px);
  margin:0;
  padding:0;
  list-style:none;
}
@media(min-width:820px){
  .bx ol.snc-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.bx .snc-steps li{
  margin:0;
  padding:clamp(18px,2.2vw,26px);
  background:#fff;
  border:1px solid #e6e9f1;
  border-radius:16px;
  box-shadow:0 16px 34px -30px rgba(16,33,71,.55);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s,border-color .3s;
}
.bx .snc-steps li:hover{
  transform:translateY(-3px);
  border-color:rgba(201,162,39,.45);
  box-shadow:0 22px 44px -28px rgba(16,33,71,.5);
}
.bx .snc-step-n{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-bottom:13px;
  border-radius:11px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--gold,#c9a227);
  background:linear-gradient(135deg,#16295a,#0b1730);
}
.bx .snc-steps h3{
  margin:0 0 6px;
  font-size:15px;
  font-weight:800;
  line-height:1.35;
  color:var(--navy,#102147);
}
.bx .snc-steps p{
  margin:0;
  font-size:13.5px;
  line-height:1.7;
  color:#4b5563;
}
.bx .snc-note{
  margin:clamp(18px,2.2vw,26px) 0 0;
  padding:14px 20px;
  background:#fbf8ef;
  border-left:3px solid var(--gold,#c9a227);
  border-radius:0 12px 12px 0;
  font-size:14px;
  line-height:1.75;
  color:#3d4658;
}

/* ---- method band: the definition of counselling ---- */
.bx .snc-band{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3.2vw,52px);
  align-items:center;
  padding:clamp(26px,3.4vw,50px);
  background:linear-gradient(140deg,#16295a,#0b1730);
  border-radius:22px;
  box-shadow:0 36px 74px -46px rgba(11,23,48,.9);
}
.bx .snc-band::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,transparent,var(--gold,#c9a227),transparent);
}
/* The crest artwork has a white ground, so at any usable opacity it reads as a
   pale rectangle on the navy band rather than a watermark. A soft gold glow
   ties the band to the site palette without that artefact. */
.bx .snc-band::after{
  content:"";
  position:absolute;
  right:-6rem;
  bottom:-7rem;
  width:24rem;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.16),transparent 68%);
  pointer-events:none;
}
.bx .snc-band>*{position:relative}
.bx .snc-band-kick{
  margin:0 0 10px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#e8cf6f;
}
.bx .snc-band h2{
  margin:0 0 16px;
  font-size:clamp(1.32rem,1.1rem + .9vw,1.72rem);
  letter-spacing:-.015em;
  color:#fff;
}
.bx .snc-band-copy p{
  margin:0;
  max-width:60ch;
  font-size:15.5px;
  line-height:1.85;
  color:rgba(255,255,255,.86);
}
.bx .snc-band-quote{
  margin:0;
  padding:clamp(20px,2.6vw,30px);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(201,162,39,.4);
  border-left:4px solid var(--gold,#c9a227);
  border-radius:0 18px 18px 0;
  font-family:'Lora',Georgia,serif;
  font-style:italic;
  font-size:clamp(15px,1.6vw,18px);
  line-height:1.8;
  color:#fff;
}
.bx .snc-band-quote p{margin:0}

/* ---- conditions: fifteen cards tiled so no row is left ragged ---- */
.bx ul.snc-conds{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(10px,1.2vw,16px);
  margin:0;
  padding:0;
  list-style:none;
}
@media(min-width:560px){
  .bx ul.snc-conds{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* odd count: let the final card take the whole row instead of a gap */
  .bx .snc-cond:last-child:nth-child(odd){grid-column:1/-1}
}
@media(min-width:900px){
  .bx ul.snc-conds{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bx .snc-cond:last-child:nth-child(odd){grid-column:auto}
}
.bx .snc-cond{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:13px;
  align-items:center;
  margin:0;
  padding:clamp(13px,1.5vw,17px) clamp(15px,1.7vw,20px);
  background:#fff;
  border:1px solid #e6e9f1;
  border-radius:14px;
  box-shadow:0 8px 20px -18px rgba(16,33,71,.55);
  transition:transform .28s cubic-bezier(.22,.9,.3,1),box-shadow .28s,border-color .28s;
}
.bx .snc-cond:hover{
  transform:translateY(-3px);
  border-color:rgba(201,162,39,.45);
  box-shadow:0 18px 32px -24px rgba(16,33,71,.5);
}
.bx .snc-cond-ico{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  font-size:15px;
  color:#6b5200;
  background:linear-gradient(140deg,#fdf0cf,#f6e2ae);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.35);
}
.bx .snc-cond-text{
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  color:#414b5e;
}

/* ---- closing card: what SHIS provides, beside the next step ---- */
.bx .snc-provides{
  display:block;
  padding:clamp(22px,3vw,40px);
  background:linear-gradient(135deg,#fdfaf1,#fff 62%);
  border:1px solid #f0e8d0;
  border-left:4px solid var(--gold,#c9a227);
  border-radius:18px;
  box-shadow:0 14px 34px -26px rgba(16,33,71,.55);
}
.bx .snc-provides-copy>p{
  margin:0;
  max-width:62ch;
  font-size:15.5px;
  line-height:1.85;
  color:#3d4658;
}
.bx .snc-provides-cta{
  padding-left:clamp(0px,2.4vw,36px);
  border-left:1px dashed rgba(201,162,39,.55);
}
.bx .snc-provides-cta h3{
  margin:0 0 8px;
  font-size:1rem;
  font-weight:800;
  color:var(--navy,#102147);
}
.bx .snc-provides-cta p{
  margin:0 0 16px;
  font-size:13.5px;
  line-height:1.7;
  color:#4b5563;
}
.bx a.snc-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 20px;
  border:0;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,#d34a4e,#a32427);
  box-shadow:0 12px 26px -14px rgba(188,46,49,.85);
  transition:background .25s,transform .25s,box-shadow .25s;
}
.bx a.snc-cta:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#16295a,#0b1730);
  box-shadow:0 16px 30px -16px rgba(16,33,71,.8);
}

@media(max-width:900px){
  .bx .snc-split,
  .bx .snc-band,
  .bx .snc-provides{grid-template-columns:minmax(0,1fr)}
  .bx .snc-provides-cta{
    padding-left:0;
    padding-top:18px;
    border-left:0;
    border-top:1px dashed rgba(201,162,39,.55);
  }
}
@media(max-width:560px){
  .bx .snc-hero{
    grid-template-columns:minmax(0,1fr);
    justify-items:center;
    text-align:center;
  }
  .bx .snc-hero-photo{max-width:170px}
  .bx .snc-hero-role{justify-self:center}
}
@media(prefers-reduced-motion:reduce){
  .bx .snc-steps li,
  .bx .snc-cond,
  .bx a.snc-cta{transition:none}
  .bx .snc-steps li:hover,
  .bx .snc-cond:hover,
  .bx a.snc-cta:hover{transform:none}
}

/* ---- No-points editorial refresh (Oct 2026): letter, statement, prose ---- */
.bx .snc-kick{
  margin:0 0 10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8a6d1c;
}
.bx .snc-kick--center{display:block;text-align:center}
.bx .snc-letter{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid #e6e9f1;
  border-radius:22px;
  padding:clamp(22px,3.2vw,44px);
  box-shadow:0 34px 70px -52px rgba(16,33,71,.55);
}
.bx .snc-letter::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,transparent,var(--gold,#c9a227),transparent);
}
.bx .snc-letter-grid{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(22px,3vw,48px);
  align-items:center;
}
.bx .snc-letter-photo{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:#0b1730;
  border:1px solid #e6e9f1;
  box-shadow:0 24px 48px -30px rgba(16,33,71,.6);
}
.bx .snc-letter-photo img{
  display:block;
  width:100%;
  aspect-ratio:4/4.6;
  object-fit:cover;
  object-position:top center;
  margin:0;border:0;border-radius:0;
}
.bx .snc-letter-photo figcaption{
  padding:14px 18px 16px;
  background:#fff;
  text-align:center;
}
.bx .snc-letter-photo figcaption strong{
  display:block;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px;
  font-weight:800;
  color:var(--navy,#102147);
}
.bx .snc-letter-photo figcaption span{
  display:block;
  margin-top:3px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8b93a5;
}
.bx .snc-letter-copy h2{
  margin:0 0 14px;
  font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);
  letter-spacing:-.015em;
  color:var(--navy,#102147);
}
.bx .snc-letter-copy p{
  margin:0 0 1em;
  font-size:15.5px;
  line-height:1.85;
  color:#3d4658;
}
.bx .snc-letter-copy p:last-child{margin:0}
.bx .snc-objective{
  text-align:center;
  background:linear-gradient(135deg,#fdfaf1,#fff 62%);
  border:1px solid #f0e8d0;
  border-radius:22px;
  padding:clamp(26px,3.4vw,50px) clamp(20px,3vw,48px);
  box-shadow:0 18px 40px -30px rgba(16,33,71,.5);
}
.bx .snc-objective .cg-sec-title{margin-top:0}
.bx .snc-objective-lead{
  margin:0 auto;
  max-width:72ch;
  font-size:clamp(15.5px,.95rem + .25vw,17.5px);
  line-height:1.85;
  color:#2b3446;
}
.bx .snc-objective-note{
  display:inline-block;
  margin:22px auto 0;
  max-width:68ch;
  padding:12px 22px;
  border-radius:999px;
  background:#fff;
  border:1px dashed rgba(201,162,39,.6);
  font-size:13.5px;
  line-height:1.7;
  color:#5b4a12;
}
.bx .snc-band--prose{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.bx .snc-conditions{
  background:#fff;
  border:1px solid #e6e9f1;
  border-radius:22px;
  padding:clamp(26px,3.4vw,50px) clamp(20px,3vw,48px);
  box-shadow:0 18px 40px -32px rgba(16,33,71,.5);
  text-align:center;
}
.bx .snc-conditions .cg-sec-title{margin-top:0}
.bx .snc-conditions-prose{
  margin:0 auto;
  max-width:76ch;
  font-family:'Lora',Georgia,serif;
  font-size:clamp(15px,.92rem + .3vw,17px);
  line-height:1.9;
  color:#2f3a4f;
}
.bx .ncc-camp-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;list-style:none;margin:0 0 6px;padding:0;
}
.bx .ncc-camp-list li{
  margin:0;display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid #e6e9f1;border-radius:14px;
  padding:14px 16px;font-size:14px;font-weight:700;color:var(--navy,#102147);
  box-shadow:0 8px 20px -18px rgba(16,33,71,.55);
}
.bx table.clubs-table tbody tr.clubs-empty td{
  padding:38px 20px;background:#fbf8ef;
}
.bx tr.clubs-empty strong{display:block;font-size:16px;color:var(--navy,#102147);margin-bottom:6px}
.bx tr.clubs-empty span{font-size:13.5px;color:#5b6478}

/* ---- Contact: info panel + form + map, same fields as live ---- */
.bx .ct-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:0;align-items:stretch;overflow:hidden;
  background:#fff;border:1px solid #e6e9f1;border-radius:22px;
  box-shadow:0 30px 60px -46px rgba(16,33,71,.6);
}
.bx .ct-info{
  background:linear-gradient(150deg,#a32427,#6d1b1e);
  color:#fff;padding:clamp(26px,3.2vw,44px);
}
.bx .ct-info h3{margin:0 0 6px;font-size:clamp(1.3rem,1.05rem + .7vw,1.65rem);color:#fff}
.bx .ct-hello{margin:0 0 22px;font-size:14.5px;color:rgba(255,255,255,.85)}
.bx .ct-line{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;
  margin:0 0 16px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.92);
}
.bx .ct-line:last-child{margin:0}
.bx .ct-line i{
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font-size:13px;
  color:#231a00;background:linear-gradient(140deg,#fbeec4,#eecf83);
}
.bx .ct-line a{color:#ffe9b8;font-weight:700;border:0}
.bx .ct-line a:hover{color:#fff}
.bx .ct-form{padding:clamp(24px,3vw,40px);display:grid;gap:14px;align-content:start}
.bx .ct-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bx .ct-form label{display:grid;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8b93a5}
.bx .ct-form input,.bx .ct-form textarea{
  width:100%;padding:12px 16px;border-radius:12px;
  border:1px solid #dfe4ef;background:#fbfcfe;
  font-size:14px;font-weight:500;color:#26334d;letter-spacing:0;text-transform:none;
  transition:border-color .2s,box-shadow .2s;
}
.bx .ct-form input:focus,.bx .ct-form textarea:focus{
  outline:none;border-color:rgba(201,162,39,.7);box-shadow:0 0 0 3px rgba(201,162,39,.18);background:#fff;
}
.bx .ct-form textarea{resize:vertical;min-height:110px}
.bx .ct-ok,.bx .ct-err{
  margin:0;padding:14px 18px;border-radius:12px;
  font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:#26334d;
  display:flex;gap:10px;align-items:flex-start;line-height:1.6;
}
.bx .ct-ok{background:#eef7ee;border:1px solid #bfe0bf}
.bx .ct-ok i{color:#1e7e34;margin-top:2px}
.bx .ct-err{background:#fdf0f0;border:1px solid #f0c0c0}
.bx .ct-err i{color:#a32427;margin-top:2px}
.bx .ct-send{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;
  padding:13px 34px;border:0;border-radius:999px;cursor:pointer;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,#d34a4e,#a32427);
  box-shadow:0 12px 26px -14px rgba(188,46,49,.85);
  transition:transform .25s,box-shadow .25s;
}
.bx .ct-send:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(188,46,49,.9)}
.bx .ct-map{border-radius:22px;overflow:hidden;border:1px solid #e6e9f1;box-shadow:0 24px 50px -38px rgba(16,33,71,.6)}
.bx .ct-map iframe{display:block;width:100%;height:min(68vw,480px);border:0}
@media(max-width:900px){
  .bx .ct-grid{grid-template-columns:minmax(0,1fr)}
  .bx .ct-row{grid-template-columns:minmax(0,1fr)}
}

/* ---- Birthday wall: festive party styling, same wishes ---- */
.bx .bday-party{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(150deg,#fff7f3 0%,#fdf2f7 45%,#fffbe9 100%);
  border:1px solid #f3ddcf;border-top:4px solid #e2543e;border-radius:24px;
  padding:clamp(30px,4vw,56px) clamp(20px,3vw,48px);
  box-shadow:0 30px 60px -40px rgba(226,84,62,.45);
}
.bx .bday-party::before,.bx .bday-party::after{
  content:"";position:absolute;width:180px;aspect-ratio:1;border-radius:50%;pointer-events:none;
}
.bx .bday-party::before{left:-70px;top:-70px;background:radial-gradient(circle,rgba(226,84,62,.16),transparent 68%)}
.bx .bday-party::after{right:-70px;bottom:-70px;background:radial-gradient(circle,rgba(201,162,39,.2),transparent 68%)}
.bx .bday-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 20px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,#e2543e,#a32427);
  box-shadow:0 12px 26px -14px rgba(226,84,62,.8);
}
.bx .bday-badge i{font-size:13px}
.bx .bday-badge--gold{color:#231a00;background:linear-gradient(135deg,#e8cf6f,var(--gold,#c9a227))}
.bx .bday-wish{
  margin:22px auto 0;max-width:62ch;
  font-family:'Lora',Georgia,serif;font-style:italic;
  font-size:clamp(16px,1rem + .5vw,20px);line-height:1.8;color:#5b3a2e;
}
.bx .bday-star{margin:28px auto 0;max-width:420px}
.bx .bday-photo{
  margin:0 auto;padding:10px;max-width:300px;
  background:#fff;border-radius:22px;
  border:1px solid #f0d9c8;
  box-shadow:0 26px 54px -30px rgba(163,36,39,.55);
}
.bx .bday-photo img{display:block;width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:top center;margin:0;border:0;border-radius:14px}
.bx .bday-name{
  margin:18px 0 0;font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(1.4rem,1.1rem + .8vw,1.9rem);letter-spacing:.01em;color:var(--navy,#102147);
}
.bx .bday-class{
  display:inline-block;margin-top:10px;padding:6px 18px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#6b5200;background:linear-gradient(140deg,#fdf0cf,#f6e2ae);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.4);
}
/* Placeholder artwork keeps its full "No Birthday" message inside the frame. */
.bx .bday-photo--art img{
  aspect-ratio:207/243;object-fit:contain;object-position:center;background:#fdf3dc;
}
.bx .ncc-camp-n{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  font-size:12px;font-weight:800;color:#f3d67c;background:linear-gradient(135deg,#16295a,#0b1730);
}
@media(max-width:760px){.bx .ncc-camp-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){
  .bx .snc-letter-grid,
  .bx .snc-band--prose{grid-template-columns:minmax(0,1fr)}
  .bx .snc-letter-photo{max-width:420px}
  .bx .snc-objective,.bx .snc-conditions{border-radius:18px}
}

/* ---- NCC highlights: 1 feature + 4 even cards, uniform photos ---- */
.bx .ncc-highlights{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.bx .ncc-highlights .leader-card{
  margin:0;
  text-align:center;
  display:flex;
  flex-direction:column;
}
.bx .ncc-highlights .leader-card .name,
.bx .ncc-highlights .leader-card .details{text-align:center}
.bx .ncc-highlights .leader-card--feature{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(18px,2.4vw,32px);
  align-items:center;
  text-align:left;
}
.bx .ncc-highlights .leader-card--feature .name,
.bx .ncc-highlights .leader-card--feature .details{text-align:left}
.bx .ncc-shot{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #e6e9f1;
  background:#f2f4f9;
}
.bx .ncc-shot img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  margin:0;border:0;border-radius:0;
}
.bx .leader-card--feature .ncc-shot img{aspect-ratio:16/10}
.bx .ncc-copy .name{margin:0 0 8px}
.bx .ncc-tag{
  display:inline-block;
  margin:0 0 10px;
  padding:4px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#6b5200;
  background:linear-gradient(140deg,#fdf0cf,#f6e2ae);
}
@media(max-width:760px){
  .bx .ncc-highlights{grid-template-columns:minmax(0,1fr)}
  .bx .ncc-highlights .leader-card--feature{grid-template-columns:minmax(0,1fr)}
  .bx .ncc-highlights .leader-card--feature .name,
  .bx .ncc-highlights .leader-card--feature .details{text-align:center}
}

/* ---- NCC identity design (same content, own look): olive + navy + tricolor ---- */
.bx .ncc-motto{
  position:relative;
  overflow:hidden;
  text-align:center;
  background:linear-gradient(150deg,#1a2b1f 0%,#243d2a 55%,#102147 130%);
  border-radius:22px;
  padding:clamp(28px,3.6vw,52px) clamp(20px,3vw,48px) clamp(30px,3.8vw,56px);
  box-shadow:0 36px 74px -46px rgba(11,23,48,.9);
  color:#fff;
}
.bx .ncc-motto::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#ff9933,#fff 50%,#138808);
}
.bx .ncc-badge{
  display:inline-block;
  padding:7px 16px;
  border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#ffe9b8;background:rgba(255,255,255,.08);border:1px solid rgba(201,162,39,.5);
}
.bx .ncc-badge i{color:var(--gold,#c9a227);margin-right:7px}
.bx .ncc-motto-text{
  margin:20px auto 0;max-width:72ch;
  font-size:clamp(15.5px,.95rem + .25vw,17.5px);line-height:1.85;color:rgba(255,255,255,.9);
}
.bx .ncc-quote{
  margin:20px auto 0;max-width:40ch;
  font-family:'Lora',Georgia,serif;font-style:italic;
  font-size:clamp(16px,1rem + .5vw,20px);line-height:1.6;color:#f3d67c;
}
.bx .ncc-tricolor{display:block;width:120px;height:4px;margin:22px auto 0;border-radius:2px;
  background:linear-gradient(90deg,#ff9933 0 33%,#f5f5f5 33% 66%,#138808 66% 100%);}
.bx .ncc-kick{
  margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#5c6b3c;
}
.bx .ncc-kick--light{color:#e8cf6f}
.bx .ncc-unit{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(22px,3vw,48px);align-items:center;
  background:#fff;border:1px solid #e3e6dc;border-top:4px solid #5c6b3c;border-radius:22px;
  padding:clamp(22px,3.2vw,44px);box-shadow:0 34px 70px -52px rgba(26,43,31,.55);
}
.bx .ncc-caretaker{margin:0;border-radius:18px;overflow:hidden;background:#101d13;border:1px solid #e3e6dc}
.bx .ncc-caretaker img{display:block;width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:top center;margin:0;border:0;border-radius:0}
.bx .ncc-caretaker figcaption{padding:14px 18px 16px;background:#fff;text-align:center}
.bx .ncc-caretaker figcaption strong{display:block;font-size:15px;font-weight:800;color:var(--navy,#102147)}
.bx .ncc-caretaker figcaption span{display:block;margin-top:3px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8b93a5}
.bx .ncc-unit-copy h2{margin:0 0 14px;font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);color:var(--navy,#102147)}
.bx .ncc-unit-copy p{margin:0 0 1em;font-size:15.5px;line-height:1.85;color:#3d4658}
.bx .ncc-unit-copy p:last-child{margin:0}
.bx .ncc-camps{
  background:linear-gradient(135deg,#f6f4e8,#fff 65%);
  border:1px solid #e6e1c8;border-left:4px solid #5c6b3c;border-radius:18px;
  padding:clamp(24px,3.2vw,44px);box-shadow:0 18px 40px -32px rgba(26,43,31,.5);
}
.bx .ncc-camps h2{margin:0 0 12px;font-size:clamp(1.3rem,1.05rem + .8vw,1.65rem);color:var(--navy,#102147)}
.bx .ncc-camps-route{
  display:inline-block;margin:0 0 16px;padding:9px 18px;border-radius:999px;
  background:#1a2b1f;color:#f3d67c;font-size:12.5px;font-weight:700;letter-spacing:.02em;
}
.bx .ncc-camps p{margin:0 0 1em;font-size:15.5px;line-height:1.85;color:#3d4658}
.bx .ncc-camps p:last-child{margin:0}
.bx .ncc-result{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(22px,3vw,48px);align-items:center;
  background:linear-gradient(140deg,#16295a,#0b1730);border-radius:22px;
  padding:clamp(26px,3.4vw,50px);box-shadow:0 36px 74px -46px rgba(11,23,48,.9);
  position:relative;overflow:hidden;
}
.bx .ncc-result::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,transparent,var(--gold,#c9a227),transparent)}
.bx .ncc-score{margin:12px 0;font-size:clamp(1.4rem,1.1rem + .8vw,1.9rem);font-weight:800;color:#fff;letter-spacing:-.01em}
.bx .ncc-score strong{color:#f3d67c}
.bx .ncc-result-main p{margin:0;color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.85}
.bx .ncc-result-main p+p{margin-top:12px}
.bx .ncc-result-quote{
  margin:0;padding:clamp(20px,2.6vw,30px);
  background:rgba(255,255,255,.06);border:1px solid rgba(201,162,39,.4);border-left:4px solid var(--gold,#c9a227);
  border-radius:0 18px 18px 0;font-family:'Lora',Georgia,serif;font-style:italic;
  font-size:clamp(15px,1.6vw,18px);line-height:1.8;color:#fff;
}
.bx .ncc-result-quote p{margin:0}
.bx .ncc-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.bx .ncc-card{
  margin:0;background:#fff;border:1px solid #e6e9f1;border-radius:16px;overflow:hidden;
  box-shadow:0 16px 34px -30px rgba(16,33,71,.55);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s;
}
.bx .ncc-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(16,33,71,.5)}
.bx .ncc-card--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.bx .ncc-card--wide .ncc-shot img{aspect-ratio:16/10}
.bx .ncc-card figcaption{padding:18px 20px;text-align:center}
.bx .ncc-card--wide figcaption{display:grid;align-content:center;text-align:left;padding:clamp(20px,2.6vw,32px)}
.bx .ncc-card figcaption strong{display:block;font-size:15px;font-weight:800;color:var(--navy,#102147);margin-bottom:6px}
.bx .ncc-card figcaption span{display:block;font-size:13.5px;line-height:1.7;color:#4b5563}
@media(max-width:900px){
  .bx .ncc-unit,.bx .ncc-result{grid-template-columns:minmax(0,1fr)}
  .bx .ncc-card--wide{grid-template-columns:minmax(0,1fr)}
  .bx .ncc-card--wide figcaption{text-align:center}
}
@media(max-width:760px){.bx .ncc-gallery{grid-template-columns:minmax(0,1fr)}}

/* ================================================= Kindergarten (KG) pages
   Layout: a facts strip under the programme statement, an age badge above each
   learning stage, highlight chips inside the facility splits. Scoped under .bx
   so nothing leaks into the rest of the site. */

/* ---- facts strip: age range, stages and play zones ---- */
.bx .kg-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(10px,1.4vw,16px);
  margin:clamp(20px,2.4vw,32px) 0 0;
  padding:0;
  list-style:none;
}
.bx .kg-fact{
  margin:0;
  padding:clamp(14px,1.7vw,20px) 14px;
  text-align:center;
  background:#fff;
  border:1px solid #e6e9f1;
  border-radius:16px;
  box-shadow:0 14px 30px -28px rgba(16,33,71,.6);
}
.bx .kg-fact b{
  display:block;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.25rem,1rem + .8vw,1.6rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--navy,#102147);
}
.bx .kg-fact span{
  display:block;
  margin-top:5px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#8b93a5;
}

/* ---- age badge: sits above each learning stage heading ---- */
.bx .kg-age{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  padding:6px 14px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6b5200;
  background:linear-gradient(140deg,#fdf0cf,#f6e2ae);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.35);
}
.bx .kg-age i{font-size:12px}
/* the stage heading follows the badge directly, so drop the h2 top gap */
.bx .cg-split-copy h2{margin:0 0 .55em}

/* ---- highlight chips: short capability lists ---- */
.bx .kg-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.bx .kg-chips li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:7px 14px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
  color:#414b5e;
  background:#fbf8ef;
  border:1px solid rgba(201,162,39,.35);
}
.bx .kg-chips i{font-size:11px;color:#c9a227}
.bx .kg-chips b{
  display:grid;
  place-items:center;
  min-width:24px;
  height:24px;
  border-radius:8px;
  font-size:11px;
  font-weight:800;
  color:#6b5200;
  background:linear-gradient(140deg,#fdf0cf,#f6e2ae);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.35);
}
@media(max-width:760px){
  .bx .kg-facts{grid-template-columns:minmax(0,1fr)}
  .bx .kg-chips li{font-size:12px}
}

/* Six key areas read best as three balanced columns on wide screens. */
@media(min-width:1024px){
  .bx .cg-roles--trio{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ================================================= E-Magazine (ELIXIR)
   Mirrors shis.in/e-magazine.php: a three-up grid of issue covers with the
   ELIXIR wordmark and the issue title underneath, the whole card opening the
   PDF. Scoped under .bx (plus one hero modifier) so nothing leaks site-wide. */

/* ---- hero: the latest cover standing in for the live banner slider ---- */
.pg-hero-media--cover{padding-bottom:0}
.pg-hero-media--cover .pg-hero-shot{background:#f5f5f5;overflow:hidden}
.pg-hero-media--cover .pg-hero-shot::after{display:none}
.pg-hero-media--cover .pg-hero-shot img{aspect-ratio:3/4;object-fit:contain;background:#f5f5f5}
.pg-hero-media--cover figcaption{
  display:block;
  margin-top:14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
@media(max-width:1023px){
  .pg-hero-media--cover{max-width:300px;margin-inline:auto;padding:0}
}
/* Keep the hero at a sane height: the cover is portrait, so cap its width
   instead of letting it stretch to the full 0.9fr hero column. */
@media(min-width:1024px){
  .pg-hero-media--cover{max-width:min(400px,100%);margin-left:auto;padding:0}
}

/* ---- issue grid: three covers per row, as on the live page ---- */
.bx .mg-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);
}
.bx .mg-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  border:1px solid #e6e9f1;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 16px 34px -30px rgba(16,33,71,.55);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s;
}
.bx .mg-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 46px -28px rgba(16,33,71,.5);
}
.bx .mg-cover{display:block;overflow:hidden;background:#f5f5f5}
/* The live page fixes the cover plate at 500px with object-fit:contain on a
   light ground; the same treatment keeps every A4 cover uncropped. */
.bx .mg-cover img{
  display:block;
  width:100%;
  height:480px;
  margin:0;
  border:0;
  border-radius:0;
  object-fit:contain;
  object-position:center;
  background:#f5f5f5;
  transition:transform .4s cubic-bezier(.22,.9,.3,1);
}
.bx .mg-card:hover .mg-cover img{transform:scale(1.03)}
.bx .mg-body{
  display:grid;
  gap:7px;
  justify-items:center;
  padding:16px 18px 18px;
  text-align:center;
}
.bx .mg-brand{
  font-family:'Playfair Display',Georgia,serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:.28em;
  text-indent:.28em;
  text-transform:uppercase;
  color:var(--crimson,#bc2e31);
}
.bx .mg-title{
  font-size:15px;
  font-weight:700;
  line-height:1.45;
  color:var(--navy,#102147);
}
.bx .mg-open{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8b93a5;
  transition:color .25s;
}
.bx .mg-open i{font-size:10px;transition:transform .25s}
.bx .mg-card:hover .mg-open{color:var(--crimson,#bc2e31)}
.bx .mg-card:hover .mg-open i{transform:translateX(3px)}

@media(max-width:991px){
  .bx .mg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bx .mg-cover img{height:400px}
}
@media(max-width:599px){
  .bx .mg-grid{grid-template-columns:minmax(0,1fr)}
  .bx .mg-cover img{height:430px}
}

/* ================================================= Alumni (registration + directory)
   The live reg_almuni.php form and view_alumni.php table restated in this
   site's editorial shell. Same fields, same labels, same records — only the
   layout is ours. Everything is scoped under .bx (plus the hero-free contact
   strip) so nothing leaks into the rest of the site. */

/* ---------------------------------------------------------- form card */
.bx .al-card{
  background:#fff;
  border:1px solid #e6e9f1;
  border-radius:20px;
  padding:clamp(20px,2.6vw,34px);
  box-shadow:0 30px 60px -46px rgba(16,33,71,.7);
}
.bx .al-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
  align-items:start;
}
.bx .al-field{
  display:grid;
  gap:7px;
  align-content:start;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy,#102147);
}
.bx .al-field b{color:var(--crimson,#bc2e31)}
.bx .al-field input:not([type=file]),
.bx .al-field select,
.bx .al-field textarea{
  font-family:inherit;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:#374151;
  border:1.5px solid #e0e4ec;
  border-radius:12px;
  padding:12px 14px;
  background:#f8fafc;
  outline:none;
  transition:border-color .25s,background .25s,box-shadow .25s;
  width:100%;
  box-sizing:border-box;
}
.bx .al-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#94a0b5 50%),linear-gradient(135deg,#94a0b5 50%,transparent 50%);background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.bx .al-field input:not([type=file]):focus,
.bx .al-field select:focus,
.bx .al-field textarea:focus{
  border-color:var(--gold,#c9a227);
  background:#fff;
  box-shadow:0 0 0 3px rgba(201,162,39,.18);
}
.bx .al-field textarea{resize:vertical;min-height:96px}
.bx .al-field--addr{grid-column:span 2}

/* ---- photo picker (same accept list and required flag as the live form) ---- */
.bx .al-file{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-height:50px;
  padding:9px 12px;
  border:1.5px dashed #cfd6e4;
  border-radius:12px;
  background:#f8fafc;
  cursor:pointer;
  transition:border-color .25s,background .25s;
}
.bx .al-file:hover{border-color:var(--gold,#c9a227);background:#fff}
.bx .al-file input[type=file]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.bx .al-file-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 15px;
  border-radius:999px;
  background:linear-gradient(135deg,#1b2f5e,#102147);
  color:#fff;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:0 10px 20px -12px rgba(16,33,71,.9);
  position:relative;
  pointer-events:none;
}
.bx .al-file-name{
  font-style:normal;
  font-size:12.5px;
  font-weight:600;
  color:#6b7280;
  overflow-wrap:anywhere;
  position:relative;
}
.bx .al-file:focus-within{border-color:var(--gold,#c9a227);box-shadow:0 0 0 3px rgba(201,162,39,.18)}

.bx .al-actions{grid-column:1/-1;display:flex;justify-content:flex-end}
.bx .al-submit{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:none;
  border-radius:12px;
  padding:15px 30px;
  background:linear-gradient(135deg,#d34a4e,#a32427);
  color:#fff;
  font-family:inherit;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 16px 30px -14px rgba(163,36,39,.7);
  transition:transform .25s,box-shadow .25s;
}
.bx .al-submit:hover{transform:translateY(-2px);box-shadow:0 20px 36px -14px rgba(163,36,39,.75)}
.bx .al-submit i{font-size:11px}

/* ------------------------------------------------- contact strip (live page prints this) */
.bx .al-contact{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.bx .al-contact-item{
  background:#fff;
  border:1px solid #e6e9f1;
  border-radius:16px;
  padding:22px 20px;
  text-align:center;
  box-shadow:0 18px 36px -32px rgba(16,33,71,.6);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s;
}
.bx .al-contact-item:hover{transform:translateY(-3px);box-shadow:0 24px 44px -28px rgba(16,33,71,.5)}
.bx .al-contact-ico{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin:0 auto 12px;
  border-radius:14px;
  background:linear-gradient(140deg,#fdf0cf,#f6e2ae);
  color:#6b5200;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.35);
  font-size:17px;
}
.bx .al-contact-item h4{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy,#102147);
}
.bx .al-contact-item p{margin:0;font-size:14px;line-height:1.7;color:#4b5563}

/* ---------------------------------------------------------- directory cards */
.bx .al-dir{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}
.bx .al-alum{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:18px;
  align-items:start;
  padding:18px;
  background:#fff;
  border:1px solid #e6e9f1;
  border-radius:18px;
  box-shadow:0 20px 40px -34px rgba(16,33,71,.65);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s;
}
.bx .al-alum:hover{transform:translateY(-4px);box-shadow:0 26px 48px -30px rgba(16,33,71,.55)}
.bx .al-alum-photo{
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  background:#f5f5f5;
  border:1px solid #e6e9f1;
}
.bx .al-alum-photo img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  border:0;
  border-radius:0;
  object-fit:cover;
  transition:transform .4s cubic-bezier(.22,.9,.3,1);
}
.bx .al-alum:hover .al-alum-photo img{transform:scale(1.04)}
.bx .al-alum-body{display:grid;gap:9px;align-content:start}
.bx .al-alum-status{
  justify-self:start;
  padding:5px 12px;
  border-radius:999px;
  background:#fbf8ef;
  border:1px solid rgba(201,162,39,.4);
  color:#6b5200;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.bx .al-alum-body h3{
  margin:0;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  color:var(--navy,#102147);
}
.bx .al-spec{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,auto));
  gap:8px 20px;
  margin:0;
}
.bx .al-spec div{display:grid;gap:2px}
.bx .al-spec dt{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8b93a5;
}
.bx .al-spec dd{margin:0;font-size:15px;font-weight:700;color:var(--navy,#102147)}
.bx .al-alum-links{display:grid;gap:6px;margin-top:2px}
.bx .al-alum-links a{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  font-weight:600;
  color:#3d4658;
  border-bottom:none;
  overflow-wrap:anywhere;
  transition:color .2s;
}
.bx .al-alum-links a i{color:var(--crimson,#bc2e31);font-size:12px;flex:none}
.bx .al-alum-links a:hover{color:var(--crimson,#bc2e31)}
.bx .al-dir-note{margin:26px 0 0;text-align:center;font-size:14.5px;color:#5b6478}

/* ---------------------------------------------------------- responsive */
@media(max-width:991px){
  .bx .al-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bx .al-field--addr{grid-column:1/-1}
  .bx .al-contact{grid-template-columns:minmax(0,1fr)}
}
/* Two cards side by side stop fitting below ~860px: the photo keeps its 150px
   track, which would squeeze the record into a ~150px column. */
@media(max-width:860px){
  .bx .al-dir{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
  .bx .al-grid{grid-template-columns:minmax(0,1fr)}
  .bx .al-actions{justify-content:stretch}
  .bx .al-submit{width:100%;justify-content:center}
}
@media(max-width:470px){
  .bx .al-alum{grid-template-columns:minmax(0,1fr)}
  .bx .al-alum-photo{max-width:220px}
}

/* ---- submission result (almuni_upload.php) ---- */
.bx .al-form-errors{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  padding:12px 16px;
  border-radius:12px;
  background:#fdecec;
  border:1px solid #f5c2c4;
  color:#a32427;
  font-size:13.5px;
  font-weight:800;
}
.bx .al-form-errors-list{margin:0;padding-left:1.2em;color:#7f1d1d;font-size:14.5px;line-height:1.8}
.bx .al-form-errors-list li::marker{color:#a32427}
.bx .al-actions .al-submit{text-decoration:none}
.bx .al-submit--ghost{
  background:linear-gradient(135deg,#1b2f5e,#102147);
  box-shadow:0 16px 30px -16px rgba(16,33,71,.8);
}
.bx .al-submit--ghost:hover{box-shadow:0 20px 36px -16px rgba(16,33,71,.85)}