/* Hoggard IB — design system from "IB Homepage v2" (direction 1b, Bold grid).
   Sized so the masthead, tab bar, hero and pillar bar fit a 1366×768 laptop at 100% zoom. */
:root{
  /* John T. Hoggard school colors */
  --navy:#20396d;
  --sky:#5aa3d3;
  /* Shades derived from them */
  --ink:#172a52;          /* text, tab bar, footer, dark panels */
  --blue:var(--navy);     /* hero, page headers, eyebrow text */
  --tint:#dceaf6;         /* card and panel backgrounds */
  --tint-edge:#bcd8ee;    /* hairline border so tinted boxes stand off white */
  --sky-soft:#cfe5f4;     /* hover states, jump-link flash */
  --paper:#f3f6fa;
  --band:#fff;
  --flash:var(--sky-soft);
  --muted:#4a5a78;
  --rule:#d5e1ee;
  --on-ink-soft:#a9cbe6;
  --on-blue-soft:#d6e6f5;
  --stripe:#e4eef8;       /* flat fill for photo placeholders */
  --stripe-ink:#3d5378;
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:4px;
  /* Soft elevation: resting boxes, hover / raised panels, dropdown menus */
  --shadow-1:0 1px 2px rgb(23 42 82 / .06),0 4px 14px rgb(23 42 82 / .07);
  --shadow-2:0 10px 28px rgb(23 42 82 / .14);
  --shadow-3:0 18px 44px rgb(23 42 82 / .26);
  /* Content is 1200px wide; backgrounds run full width behind it. */
  --gutter:max(32px, calc((100vw - 1200px) / 2));
  --section-y:56px;
  --jump-offset:88px;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Archivo',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.page{background:var(--paper)}
.mono{font-family:'IBM Plex Mono',monospace}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:100}

/* Masthead */
.masthead{display:flex;justify-content:space-between;align-items:center;padding:14px var(--gutter);gap:16px;flex-wrap:wrap;background:#fff}
.brand{display:flex;align-items:center;gap:10px}
.brand:hover{text-decoration:none}
.brand-mark{width:38px;height:38px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text b{font-weight:800;font-size:16px}
.brand-text span{font-size:12px;color:var(--muted)}
.masthead-actions{display:flex;gap:8px;align-items:center}
.btn-apply{padding:10px 18px;background:var(--sky);color:var(--ink);font-weight:700;font-size:15px;display:flex;gap:8px;align-items:center}
.menu-toggle{display:none;padding:10px 16px;border:none;background:var(--ink);color:#fff;font:700 15px 'Archivo',sans-serif;cursor:pointer}

/* Tab bar */
.tabs{position:relative;z-index:20;padding:0 var(--gutter);background:var(--ink);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.tab{position:relative}
.tab > a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:15px clamp(10px,1.2vw,18px);color:#fff;border-right:1px solid #2a4170;font-size:clamp(13px,1.1vw,15px);font-weight:700}
.tab:first-child > a{border-left:1px solid #2a4170}
.tab > a::after{content:"▾";font-size:12px;color:var(--on-ink-soft)}
.tab > a:hover{text-decoration:none}
.tab:hover > a,.tab:focus-within > a,.tab.is-current > a{background:var(--blue)}
.tab-menu{display:none;position:absolute;top:100%;left:0;min-width:100%;width:260px;background:#fff;box-shadow:0 12px 32px rgb(23 42 82 / .18);border-top:4px solid var(--blue);padding:6px 0;flex-direction:column}
.tab:hover .tab-menu,.tab:focus-within .tab-menu{display:flex}
.tab-menu a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;font-size:15px;font-weight:500}
.tab-menu a::after{content:"→";color:var(--navy);font-weight:700;opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .2s}
.tab-menu a:hover::after,.tab-menu a:focus-visible::after{opacity:1;transform:none}
.tab-menu a:hover{background:var(--tint);text-decoration:none}
.tab-menu a[aria-current="page"]{font-weight:700;color:var(--blue)}

/* Shared blocks */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--blue);text-transform:uppercase}
.h2{margin:0;font-size:clamp(28px,2.8vw,40px);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.lede{margin:0;font-size:17px;line-height:1.55;max-width:68ch}
.more{font-weight:700;font-size:15px}
.placeholder{background:var(--stripe);display:flex;align-items:flex-end;padding:14px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--stripe-ink)}

/* Sections: alternating full-width bands, a rule between each, and a blue
   accent above every heading so it's clear where one section ends. */
.section,.body-section{position:relative;padding:var(--section-y) var(--gutter);display:flex;flex-direction:column;gap:24px;border-top:1px solid var(--rule);scroll-margin-top:var(--jump-offset)}
.section:nth-of-type(even),.body-section:nth-of-type(even){background:var(--band)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.section-head > div{display:flex;flex-direction:column;gap:8px}
.section-head .eyebrow::before,.body-section > h2::before{content:"";display:block;width:40px;height:4px;background:var(--blue);margin-bottom:12px}
.body-section > h2{margin:0;font-size:clamp(24px,2.2vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.body-section h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.prose{font-size:16px;line-height:1.65;max-width:72ch}
.prose p{margin:0 0 .9em}
.prose > :last-child{margin-bottom:0}

/* Arrival highlight after a jump link: the section's band flashes light blue and a
   bar sweeps down its left edge. */
.is-arrived{animation:arrive-bg 1.6s ease-out}
.is-arrived::after{content:"";position:absolute;left:0;top:0;width:6px;height:100%;background:var(--sky);transform-origin:top;animation:arrive-bar 1.6s ease-out forwards;pointer-events:none}
@keyframes arrive-bg{0%,25%{background-color:var(--flash)}}
@keyframes arrive-bar{0%{transform:scaleY(0);opacity:1}35%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* Sections ease in as they scroll into view (only when JS is running). */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  .is-arrived,.is-arrived::after{animation-duration:.01s}
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* Homepage hero */
/* The student photo spans the full width behind the hero, slightly blurred and
   dimmed; the blue information card (3:2, like the photo) floats on the left. */
.hero{position:relative;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);object-fit:cover;object-position:center 62%;filter:blur(3px);transform:scale(1.02)}
.hero::after{content:"";position:absolute;inset:0;background:rgb(23 42 82 / .32);pointer-events:none}
.hero-inner{position:relative;z-index:1;display:flex;align-items:center;min-height:clamp(520px,72vh,740px);padding:56px var(--gutter) 80px}
.hero-main{width:min(660px,58%);aspect-ratio:3/2;min-width:0;background:var(--ink);color:#fff;padding:36px 44px;display:flex;flex-direction:column;justify-content:center;gap:26px;box-shadow:var(--shadow-3)}
.hero-copy{display:flex;flex-direction:column;gap:18px}
.hero-main .kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-soft)}
.hero-main h1{margin:0;font-size:clamp(34px,3.4vw,50px);line-height:1.02;font-weight:800;letter-spacing:-.03em}
.hero-main p{margin:0;font-size:19px;line-height:1.5;max-width:480px;color:var(--on-blue-soft)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.cta.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgb(255 255 255 / .55)}
.cta.ghost:hover{background:rgb(255 255 255 / .12);box-shadow:inset 0 0 0 2px #fff}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:22px;border-top:1px solid rgb(255 255 255 / .2)}
.hero-stats div{display:flex;flex-direction:column;gap:4px}
.hero-stats b{font-size:clamp(28px,2.8vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff}
.hero-stats span{font-size:14px;line-height:1.4;color:var(--on-blue-soft)}
/* The four pillars sit on a raised white panel: about a quarter of it
   overlaps the bottom of the photo, the rest sits below. */
.pillars{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:-24px var(--gutter) 48px;padding:12px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-2)}
.pillar{background:var(--ink);color:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background .2s}
.pillar:hover{background:var(--blue);text-decoration:none}
.pillar span span{display:block}
.pillar .t{font-size:17px;font-weight:800;letter-spacing:-.01em}
.pillar .s{font-size:12px;color:var(--on-ink-soft);margin-top:2px}
.pillar .arrow{font-size:16px;transition:transform .2s}
.pillar:hover .arrow{transform:translateY(3px)}

.profile-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.profile-card{border-top:4px solid var(--blue);background:var(--tint);padding:16px;display:flex;flex-direction:column;gap:10px;min-height:92px}
.profile-card .n{font-size:12px;font-weight:700;color:var(--blue)}
.profile-card .name{font-size:18px;font-weight:700}

.two-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:8px}
.panel{background:var(--tint);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:14px}
.panel.ink{background:var(--ink);color:#fff}
.panel.ink .eyebrow{color:var(--on-ink-soft)}
.panel.blue{background:var(--blue);color:#fff}
.panel.blue .eyebrow{color:#cfe5f4}
.panel h3{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1;overflow-wrap:anywhere}
.panel p{margin:0;font-size:16px;line-height:1.55;max-width:460px}
.panel .more{margin-top:auto}
.tall{min-height:320px}

.carousel{position:relative;min-height:320px;background:var(--stripe);display:flex;flex-direction:column;justify-content:space-between;padding:16px}
.carousel-bar{display:flex;justify-content:space-between;align-items:center}
.dots{display:flex;gap:8px}
.dots button{width:24px;height:4px;padding:0;border:none;cursor:pointer;background:#9cc4e2}
.dots button[aria-current="true"]{background:var(--ink)}
.arrows{display:flex;gap:8px}
.arrows button{width:40px;height:40px;border:none;background:var(--ink);color:#fff;font-size:17px;cursor:pointer;font-family:inherit}

.rows{display:flex;flex-direction:column;gap:20px}
.rows .row{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:auto auto;row-gap:10px}
.rows .row .eyebrow{grid-column:1;grid-row:1;align-self:end}
.rows .row h3{grid-column:1;grid-row:2;align-self:start}
.rows .row p{grid-column:2;grid-row:1 / 3;align-self:center}
.rows .row .more{grid-column:3;grid-row:1 / 3;align-self:center;justify-self:start}
@media (max-width:860px){
  .rows .row{grid-template-columns:1fr;grid-template-rows:none}
  .rows .row .eyebrow,.rows .row h3,.rows .row p,.rows .row .more{grid-column:1;grid-row:auto}
}
.row{background:var(--tint);padding:clamp(20px,2.4vw,32px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));column-gap:32px;row-gap:8px;align-items:center}
.row.blue{background:var(--blue);color:#fff}
.row.blue .eyebrow{color:#cfe5f4}
.row .eyebrow{grid-column:1/-1}
.row h3{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.05;overflow-wrap:anywhere}
.row p{margin:0;font-size:16px;line-height:1.55;max-width:440px}

.split-7-5{display:grid;grid-template-columns:7fr 5fr;gap:8px}
.split-7-5 .placeholder{min-height:300px}

.section.latest{display:flex;flex-direction:column;gap:48px}
.latest h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.025em}
.latest-block,.insta-block{display:flex;flex-direction:column;gap:16px}
/* Latest: items side by side as cards. */
.news-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.news-list .news-empty{grid-column:1/-1;margin:0}
.news-item{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:20px 22px;background:#fff;border:1px solid var(--tint-edge);border-top-width:0;border-radius:var(--radius);box-shadow:var(--shadow-1);transition:transform .25s,box-shadow .25s}
.news-item::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--ink)}
.news-item:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-2)}
.news-item .d{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--blue)}
.news-item .t{font-size:19px;font-weight:700}
.news-item::after{content:"→";position:absolute;right:20px;bottom:18px;color:var(--sky);font-weight:700;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.news-item:hover::after{opacity:1;transform:none}
/* Instagram: three embedded posts. */
.insta-head{display:flex;justify-content:space-between;align-items:baseline}
.insta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.insta-follow{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;padding:22px 24px;border-radius:var(--radius);background:var(--tint);border:1px solid var(--tint-edge);box-shadow:var(--shadow-1);transition:transform .25s,box-shadow .25s}
.insta-follow:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-2)}
.insta-follow .t{font-size:19px;font-weight:800}
.insta-follow .s{font-size:15px;color:var(--muted)}
.insta-post{min-width:0}
.insta-post .instagram-media{margin:0!important;min-width:0!important;max-width:none!important;width:100%!important;border-radius:var(--radius)!important;box-shadow:var(--shadow-1)!important;border:1px solid var(--tint-edge)!important}

/* Contact band + footer (every page) */
.contact-band{margin:0;padding:36px var(--gutter);background:var(--blue);color:#fff;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.contact-band .q{font-size:14px;font-weight:500;color:#d6e6f5}
.contact-band .who{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.025em;display:block;margin-top:6px}
.contact-band .how{display:flex;flex-direction:column;gap:4px;font-size:16px;text-align:right}
.site-footer{padding:40px var(--gutter);background:var(--ink);color:#dbe4f0;display:grid;grid-template-columns:1.4fr repeat(5,minmax(0,1fr));gap:28px}
.site-footer .col{display:flex;flex-direction:column;gap:8px;font-size:14px}
.site-footer .col .h{font-weight:700;color:#fff;font-size:14px;padding-bottom:8px;border-bottom:1px solid #2f4675}
.site-footer .about{font-size:14px;line-height:1.5}
.site-footer .about b{font-weight:800;font-size:16px;color:#fff}
.site-footer .about a.u{text-decoration:underline}
.site-footer .about a.ig{font-weight:700;color:#fff}
.legal{padding:20px var(--gutter) 28px;font-size:12px;line-height:1.5;color:#4a5a78;background:var(--paper)}
.legal a{text-decoration:underline}

/* Interior pages */
.page-hero{padding:24px var(--gutter) 0}
.page-hero-inner{background:var(--blue);color:#fff;padding:32px 40px;display:flex;flex-direction:column;gap:10px}
.page-hero-inner .crumb{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--on-blue-soft)}
.page-hero-inner h1{margin:0;font-size:clamp(32px,3.6vw,48px);line-height:1;font-weight:800;letter-spacing:-.03em}
/* Sticky "on this page" bar — the light counterpart of the main tab bar:
   links share the full width in one row, hovering grows a dark-blue
   underline, and the section being read is a raised white tab with a full
   underline. */
.on-this-page{position:sticky;top:0;z-index:15;display:flex;flex-wrap:nowrap;gap:4px;padding:6px var(--gutter);margin-top:16px;background:rgb(243 246 250 / .94);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule);box-shadow:0 4px 12px rgb(23 42 82 / .08);overflow-x:auto;scrollbar-width:none}
.on-this-page::-webkit-scrollbar{display:none}
.on-this-page a{position:relative;flex:1 1 auto;justify-content:center;white-space:nowrap;background:transparent;color:var(--muted);padding:10px 12px 13px;font-weight:700;font-size:14px;display:flex;gap:6px;align-items:center;transition:background .2s,color .2s,box-shadow .2s}
.on-this-page a::after{content:"↓";font-weight:400;transition:transform .25s}
.on-this-page a::before{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:2px;background:var(--navy);transform:scaleX(0);transition:transform .25s ease-out}
.on-this-page a:hover{text-decoration:none;background:rgb(32 57 109 / .06);color:var(--ink)}
.on-this-page a:hover::before{transform:scaleX(.5)}
.on-this-page a:hover::after{transform:translateY(2px)}
.on-this-page a.is-active{background:#fff;color:var(--navy);box-shadow:var(--shadow-1)}
.on-this-page a.is-active::before{transform:scaleX(1)}
main > .body-section:first-child{border-top:none}

/* Content still needed — visible on purpose so nothing unverified ships silently */
.todo{border:2px dashed var(--blue);background:var(--tint);padding:16px 20px;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.6;color:var(--stripe-ink);max-width:900px}
.todo b{font-family:'Archivo',sans-serif;color:var(--blue);letter-spacing:.06em;font-size:11px;display:block;margin-bottom:4px}

.table-wrap{overflow-x:auto;border:1px solid var(--rule)}
.data-table{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
.data-table th{background:var(--ink);color:#fff;text-align:left;padding:10px 14px;font-weight:700;font-size:14px;line-height:1.4}
.data-table td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}
.data-table td:first-child{font-weight:600}
.data-table tbody tr:nth-child(even) td{background:var(--tint)}

.accordion{display:flex;flex-direction:column;gap:6px}
.accordion details{background:var(--tint);border-left:4px solid transparent;transition:border-color .2s}
.accordion details[open]{border-left-color:var(--blue)}
.accordion summary{cursor:pointer;list-style:none;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font-size:24px;font-weight:400;color:var(--blue);transition:transform .2s}
.accordion details[open] summary{background:var(--ink);color:#fff}
.accordion details[open] summary::after{transform:rotate(45deg);color:#fff}
.accordion .acc-body{padding:20px;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--rule);border-top:none}
.faq .acc-body p{margin:0;font-size:16px;line-height:1.6}

.contact-card{background:var(--tint);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:8px;font-size:16px;max-width:720px}
.contact-card .who{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.02em}

.prose h3{margin:1.2em 0 .4em}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.2em}
.prose li{margin:.3em 0}
.prose a,.data-table a,.rq-list a{text-decoration:underline;text-underline-offset:2px}
.box{background:var(--tint);padding:20px 24px;max-width:900px;border-left:4px solid var(--blue)}
.box h4{margin:1em 0 .3em;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.box h4:first-child{margin-top:0}
.note{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.rq-list{margin:0;padding-left:1.2em;font-size:15px;line-height:1.55;display:flex;flex-direction:column;gap:8px;max-width:900px}
.rq-list.cols{display:block;columns:2 280px;column-gap:40px}
.rq-list.cols li{margin-bottom:6px;break-inside:avoid}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--ink);color:#fff;padding:10px 18px;font-weight:800;font-size:17px;letter-spacing:-.01em}
.link-list{display:flex;flex-direction:column;gap:6px;max-width:820px}
.link-list a,.link-list .item{background:var(--tint);padding:14px 18px;display:flex;justify-content:space-between;gap:16px;font-weight:700;font-size:16px;text-decoration:none;border-left:4px solid var(--blue);transition:background .2s}
.link-list .item{border-left-color:var(--rule)}
.link-list a::after{content:"↗";font-weight:400}
.link-list a:hover{background:#dceaf6}
.link-list .sub{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:2px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:8px}
.stat{background:var(--tint);border-top:4px solid var(--blue);padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.stat b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.stat span{font-size:13px;font-weight:700;color:var(--blue)}

@media (max-width:1000px){
  .site-footer{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-footer .about{grid-column:1/-1}
  .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--gutter:16px;--section-y:44px;--jump-offset:64px}
  .hero-inner{min-height:0;padding:40px var(--gutter) 64px}
  .hero-main{width:100%;aspect-ratio:auto;padding:28px 24px}
  .pillars{margin:-36px var(--gutter) 36px;padding:8px}
  .split-7-5,.contact-band{grid-template-columns:1fr}
  .news-list{grid-template-columns:1fr}
  .insta-grid{grid-template-columns:1fr}
  .contact-band .how{text-align:left}
  .site-footer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu-toggle{display:block}
  .tabs{grid-template-columns:1fr}
  .js .tabs:not(.is-open){display:none}
  .tab > a{border-right:none;border-left:none;border-bottom:1px solid #2a4170}
  .tab:first-child > a{border-left:none}
  .tab > a::after{content:none}
  .tab-menu,.tab:hover .tab-menu,.tab:focus-within .tab-menu{display:flex;position:static;width:auto;box-shadow:none;border-top:none}
  .page-hero-inner{padding:24px}
  /* The jump bar scrolls sideways instead of wrapping on phones. */
  .on-this-page{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .on-this-page a{flex:none}
}
@media (max-width:520px){
  .pillars,.profile-grid,.site-footer{grid-template-columns:1fr}
  .brand-text span{display:none}
  .btn-apply,.menu-toggle{padding:9px 12px}
}

/* Embedded slides and documents */
.embed{margin:0;max-width:960px;display:flex;flex-direction:column;border:1px solid var(--rule);background:#fff}
.embed-frame{position:relative;width:100%}
.embed-slides .embed-frame{aspect-ratio:16/9.6}
.embed-pdf .embed-frame,.embed-doc .embed-frame{height:min(78vh,820px)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--tint)}
.embed figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 14px;background:var(--ink);color:#fff;font-size:14px;font-weight:700}
.embed figcaption a{color:var(--sky);white-space:nowrap}
.embed figcaption a::after{content:" ↗"}
.embed-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:12px}
.embed-pair .embed-pdf .embed-frame{height:min(70vh,640px)}

/* History of the IB */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:820px}
.compare > div{background:var(--tint);padding:16px 20px;border-top:4px solid var(--muted)}
.compare > div.alt{border-top-color:var(--blue)}
.compare h4{margin:0 0 8px;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.compare ul{margin:0;padding-left:1.1em;font-size:15px;line-height:1.7}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:8px}
.person{background:var(--tint);border-top:4px solid var(--blue);padding:16px 18px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5}
.person b{font-size:18px;font-weight:800}
.person .yrs{font-size:13px;font-weight:700;color:var(--blue)}
.person p,.person ol{margin:0}
.person ol{padding-left:1.2em}
.timeline{list-style:none;margin:0;padding:0;max-width:900px;border-left:3px solid var(--blue)}
.timeline > li{position:relative;display:grid;grid-template-columns:120px 1fr;gap:16px;padding:10px 0 10px 22px;font-size:15px;line-height:1.55}
.timeline > li::before{content:"";position:absolute;left:-8px;top:16px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:3px solid var(--blue)}
.timeline > li > b{font-weight:800;color:var(--blue)}
.timeline p{margin:0 0 4px}
.timeline ol{margin:4px 0 0;padding-left:1.2em}
.then-now{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch;max-width:820px}
.then-now > div:not(.arrow){background:var(--tint);padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.then-now > div:nth-child(3n){background:var(--ink);color:#fff}
.then-now .yr{font-size:12px;font-weight:700;color:var(--blue)}
.then-now > div:nth-child(3n) .yr{color:var(--on-ink-soft)}
.then-now b{font-size:20px;font-weight:800}
.then-now .arrow{display:flex;align-items:center;font-size:22px;color:var(--blue)}
.mission{border-left:4px solid var(--blue);background:var(--tint);padding:18px 22px;margin:0;max-width:820px;font-size:17px;line-height:1.65}
.mission + .mission{margin-top:20px}
.mission h3{margin:0 0 6px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.mission p{margin:0}
.cta{display:inline-flex;gap:10px;align-items:center;background:var(--sky);color:var(--ink);padding:14px 22px;font-weight:800;font-size:17px;align-self:flex-start}
.cta:hover{text-decoration:none;filter:brightness(1.05)}
@media (max-width:860px){
  .timeline > li{grid-template-columns:1fr;gap:2px}
  .compare{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------
   Rounded corners and light-blue accents (school colors).
   Section bands and the tab bar stay full width; boxes inside them round.
   ------------------------------------------------------------------ */
.brand-mark{border-radius:var(--radius-sm)}
.btn-apply,.menu-toggle,.cta,.arrows button{border-radius:var(--radius-sm)}
.btn-apply,.cta{color:var(--ink);transition:background .2s,box-shadow .2s}
.btn-apply:hover,.cta:hover{background:#74b3dc;text-decoration:none;box-shadow:0 6px 18px rgb(32 57 109 / .18)}

/* Tab bar: casts a shadow onto the page. The section you're in is a lighter
   tab with a light-blue underline; hovering a tab grows the underline in. */
.tabs{padding-top:6px;padding-bottom:6px;gap:4px;box-shadow:0 6px 18px rgb(23 42 82 / .28)}
.tab > a,.tab:first-child > a{position:relative;border:none;border-radius:var(--radius-sm);padding:11px clamp(10px,1.2vw,16px) 13px;color:#dbe4f0;transition:background .2s,color .2s}
.tab > a::before{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:2px;background:var(--sky);transform:scaleX(0);transition:transform .25s ease-out}
.tab > a::after{transition:transform .25s}
.tab:hover > a,.tab.is-open > a{background:rgb(255 255 255 / .08);color:#fff}
.tab:hover > a::before,.tab.is-open > a::before{transform:scaleX(.5)}
.tab.is-open > a::after{transform:rotate(180deg)}
.tab.is-current > a{background:var(--navy);color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255 / .08)}
.tab.is-current > a::before{transform:scaleX(1)}
.tab.is-current > a::after{color:var(--sky)}
.tab-menu{top:calc(100% + 6px);border-top:none;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-3);padding-top:10px}
.tab-menu a[aria-current="page"]{background:var(--tint);box-shadow:inset 3px 0 0 var(--sky)}

/* Heading accents and other thin bars get rounded ends, in light blue. */
.section-head .eyebrow::before,.body-section > h2::before{background:var(--sky);border-radius:2px}
.dots button{border-radius:2px}

/* Boxes */
.hero-main,.panel,.row,.carousel,.placeholder,
.page-hero-inner,.contact-card,.box,.todo,.mission,.link-list a,.link-list .item,
.compare > div,.person,.profile-card,.stat,.then-now > div:not(.arrow){border-radius:var(--radius)}
.pillar,.chips span,.on-this-page a,.accordion details{border-radius:var(--radius-sm)}
.table-wrap{border-radius:var(--radius);overflow:auto}
.embed{border-radius:var(--radius);overflow:hidden}
.accordion details{overflow:hidden;border-left:none}
.accordion .acc-body{border:none;border-top:1px solid var(--rule)}

/* Accent lines run dead straight along an edge, right into the corners,
   where the rounded edge of the box cuts them off. */
.profile-card,.stat,.person,.compare > div,
.box,.mission,.link-list a,.link-list .item,.accordion details{position:relative;overflow:hidden}
.profile-card,.stat,.person,.compare > div{border-top:none}
.box,.mission,.link-list a,.link-list .item{border-left:none}
.tab-menu::before,.profile-card::before,.stat::before,.person::before,.compare > div::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:1;pointer-events:none;background:var(--accent,var(--sky))}
.box::before,.mission::before,.link-list a::before,.link-list .item::before,.accordion details[open]::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:4px;z-index:1;pointer-events:none;background:var(--accent,var(--sky))}
.compare > div{--accent:var(--muted)}
.compare > div.alt,.link-list a{--accent:var(--sky)}
.link-list .item{--accent:var(--rule)}

/* Soft shadows: boxes rest slightly raised off the page. */
.page-hero-inner,.panel,.row,.carousel,.profile-card,.stat,
.person,.compare > div,.then-now > div:not(.arrow),.contact-card,.box,.mission,.link-list a,
.link-list .item,.accordion details,.table-wrap,.embed,.contact-band,.chips span{box-shadow:var(--shadow-1)}
.table-wrap,.embed{border-color:transparent}
.accordion details{transition:box-shadow .2s}
.accordion details:hover{box-shadow:var(--shadow-2)}
.todo{border-color:var(--sky)}
.timeline{border-left-color:var(--sky)}
.timeline > li::before{border-color:var(--sky)}
.timeline > li > b{color:var(--navy)}

/* Contact band sits inside the page margins as a rounded card. */
.contact-band{margin:48px var(--gutter);padding:32px 36px;border-radius:var(--radius)}

/* Hover lift on clickable cards. */
.pillar{transition:background .2s,transform .2s,box-shadow .2s}
.pillar:hover{background:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.pillar .arrow{color:var(--sky)}
.link-list a{transition:background .2s,box-shadow .2s,transform .2s}
.link-list a:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}

/* Dropdown menus (desktop). site.js adds .is-open after a short hover pause;
   without JavaScript, plain :hover still works. A closed (or closing) menu
   ignores the mouse so it can't catch the cursor on its way down the page.
   Open menus unroll downward, links fade in one after another, and the
   rest of the page dims behind them. */
@media (min-width:861px){
  /* The tab bar stays pinned to the top while scrolling. */
  /* The white masthead (logo + Apply) stays pinned while scrolling; the dark
     tab bar scrolls away with the page. */
  :root{--mast-h:68px;--jump-offset:150px}
  .masthead{position:sticky;top:0;z-index:40;transition:box-shadow .25s}
  .masthead.is-stuck{box-shadow:0 4px 16px rgb(23 42 82 / .12)}
  .tabs{position:relative;z-index:30}
  /* The section links float just below the masthead as a light-blue bar,
     with a gap so the two bars read as separate. */
  .on-this-page{top:calc(var(--mast-h) + 12px);margin:20px var(--gutter) 0;padding:6px;border:1px solid var(--tint-edge);border-radius:var(--radius);
    background:transparent;box-shadow:none;overflow:visible}
  /* The bar's own light-blue fill and shadow, layered above the strip. */
  .on-this-page::after{content:"";position:absolute;z-index:-1;inset:-1px;border:1px solid var(--tint-edge);border-radius:var(--radius);background:#dceaf6;box-shadow:var(--shadow-2);pointer-events:none}
  /* A solid strip behind the floating bar fills the gap under the masthead,
     so page content doesn't show through between the two bars. */
  /* Behind the floating bar, page content softly blurs and fades out as it
     scrolls up under it (frosted, fading to nothing ~40px below the bar),
     so there's no hard edge and no grey band. */
  .on-this-page::before{content:"";position:absolute;z-index:-1;left:calc(-1px - var(--gutter));right:calc(-1px - var(--gutter));top:-13px;bottom:-44px;
    background:rgb(255 255 255 / .72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 64px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 64px),transparent 100%);pointer-events:none}
  .tab-menu{display:flex;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);clip-path:inset(0 0 100% 0 round var(--radius));
    transition:opacity .18s ease-in,transform .18s ease-in,clip-path .2s ease-in,visibility 0s linear .2s}
  .tab.is-open .tab-menu,html:not(.js) .tab:hover .tab-menu,html:not(.js) .tab:focus-within .tab-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;clip-path:inset(0 0 0 0 round var(--radius));
    transition:opacity .22s ease-out,transform .22s ease-out,clip-path .28s ease-out,visibility 0s}
  /* Items glide right on hover and glide back when the cursor leaves. The
     staggered entrance delay applies only to the fade-in, never the glide. */
  .tab-menu a{opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s,background .2s,padding-left .28s cubic-bezier(.2,.7,.2,1)}
  .tab.is-open .tab-menu a,html:not(.js) .tab:hover .tab-menu a{opacity:1;transform:none}
  .tab.is-open .tab-menu a:nth-child(2){transition-delay:.04s,.04s,0s,0s}
  .tab.is-open .tab-menu a:nth-child(3){transition-delay:.08s,.08s,0s,0s}
  .tab.is-open .tab-menu a:nth-child(4){transition-delay:.12s,.12s,0s,0s}
  .tab.is-open .tab-menu a:nth-child(5){transition-delay:.16s,.16s,0s,0s}
  .tab.is-open .tab-menu a:nth-child(n+6){transition-delay:.2s,.2s,0s,0s}
  .tab-menu a:hover{padding-left:24px}
  body::after{content:"";position:fixed;inset:0;z-index:18;background:rgb(23 42 82 / .3);opacity:0;pointer-events:none;transition:opacity .25s}
  body.menu-open::after,html:not(.js) body:has(.tab:hover)::after{opacity:1}
}

/* ------------------------------------------------------------------
   Motion: the hero eases in on load, cards arrive one after another,
   accordions slide open, buttons respond to presses.
   ------------------------------------------------------------------ */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hero-main h1{animation:rise .7s .05s cubic-bezier(.2,.7,.2,1) both}
.hero-main p{animation:rise .7s .2s cubic-bezier(.2,.7,.2,1) both}
.hero-main{animation:fade .5s both}
.pillars{animation:rise .7s .3s cubic-bezier(.2,.7,.2,1) both}
.page-hero-inner{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.page-hero-inner h1{animation:rise .6s .08s cubic-bezier(.2,.7,.2,1) both}

.js .reveal .stagger > *{opacity:0;transform:translateY(14px);transition:opacity .45s ease-out,transform .45s ease-out,box-shadow .2s,background .2s;transition-delay:calc(var(--i,0) * 60ms)}
.js .reveal.is-visible .stagger > *{opacity:1;transform:none}
.js .reveal.is-visible .stagger > *:hover{transition-delay:0s}

/* Without JavaScript, accordions still open with a quick drop-in. With it,
   site.js animates the height open and closed instead. */
html:not(.js) .accordion details[open] .acc-body{animation:drop .3s ease-out}
.accordion summary{transition:background .2s,color .2s}
.accordion details:not([open]) summary:hover{background:var(--sky-soft)}

/* Cards lift a little under the cursor. */
.profile-card,.person,.stat,.panel,.row{transition:transform .25s,box-shadow .25s}
.profile-card:hover,.person:hover,.stat:hover,.panel:hover,.row:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.js .reveal.is-visible .stagger > .profile-card:hover,.js .reveal.is-visible .stagger > .person:hover,
.js .reveal.is-visible .stagger > .stat:hover,.js .reveal.is-visible .stagger > .panel:hover,
.js .reveal.is-visible .stagger > .row:hover{transform:translateY(-3px)}

/* "More" links: an underline slides in and the arrow nudges forward. */
.more{position:relative;display:inline-block;padding-bottom:3px}
.more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease-out}
.more:hover{text-decoration:none}
.more:hover::after,.more:focus-visible::after{transform:scaleX(1)}

/* Buttons respond when pressed. */
.btn-apply:active,.cta:active,.pillar:active,.link-list a:active,.on-this-page a:active,.arrows button:active{transform:scale(.97)}
.btn-apply,.cta,.on-this-page a,.arrows button{transition:background .2s,box-shadow .2s,transform .12s}

@media (prefers-reduced-motion:reduce){
  .hero-main,.hero-main h1,.hero-main p,.pillars,.page-hero-inner,.page-hero-inner h1,
  .accordion details[open] .acc-body{animation:none}
  .js .reveal .stagger > *{opacity:1;transform:none;transition:none}
  .tab-menu,.tab-menu a{transition:none!important;transform:none!important}
  .profile-card:hover,.person:hover,.stat:hover,.panel:hover,.row:hover{transform:none}
}

/* Easier reading: slightly larger body text and more line spacing. */
.prose{font-size:17px;line-height:1.7}
.lede{font-size:18px}
.faq .acc-body p{font-size:17px;line-height:1.7}
.rq-list,.timeline > li{font-size:16px}

/* Keyboard focus ring. */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:var(--radius-xs)}

@media (max-width:860px){
  .tabs{padding:6px var(--gutter)}
  .tab-menu,.tab:hover .tab-menu,.tab:focus-within .tab-menu{box-shadow:none;border-radius:0;padding-top:4px;background:transparent}
  .tab-menu a{color:#dbe4f0}
  .tab-menu a:hover{background:rgb(255 255 255 / .08)}
  .tab-menu a[aria-current="page"]{color:var(--sky);background:transparent;box-shadow:inset 3px 0 0 var(--sky)}
  .tab-menu::before{display:none}
  .contact-band{margin:32px var(--gutter);padding:24px}
}

/* ------------------------------------------------------------------
   Rotating carousels: Learner Profile traits and photo carousels.
   ------------------------------------------------------------------ */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rotator{position:relative;display:flex;flex-direction:column;gap:16px;outline:none}
/* Without JavaScript the items show as a simple grid. */
.rotator:not(.is-ready) .rotator-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.rotator.is-ready .rotator-track{position:relative;overflow:hidden;touch-action:pan-y}
.rotator.is-ready .rotator-item{position:absolute;left:50%;top:50%;cursor:pointer;user-select:none;
  transition:transform .8s cubic-bezier(.2,.75,.2,1),opacity .8s ease,background .5s,color .5s,box-shadow .5s}
.rotator.is-ready .rotator-item.is-center{cursor:default}
.rotator:not(.is-ready) .rotator-item{position:relative}
.rotator-controls{display:flex;align-items:center;justify-content:center;gap:14px}
.rotator-arrow{width:40px;height:40px;border:none;border-radius:50%;background:#fff;color:var(--ink);font-size:17px;cursor:pointer;box-shadow:var(--shadow-1);transition:background .2s,box-shadow .2s,transform .12s}
.rotator-arrow:hover{background:var(--sky-soft);box-shadow:var(--shadow-2)}
.rotator-arrow:active{transform:scale(.94)}
.rotator-dots{display:flex;gap:6px}
.rotator-dots button{width:8px;height:8px;padding:0;border:none;border-radius:4px;background:#a9c6de;cursor:pointer;transition:width .35s,background .35s}
.rotator-dots button[aria-current="true"]{width:26px;background:var(--navy)}

/* Learner Profile: the centred trait is a large dark-blue card. */
.rotator-traits .rotator-track{height:230px}
.trait{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px 28px;background:var(--tint);border:1px solid var(--tint-edge);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.rotator.is-ready .trait{width:min(380px,62%);height:190px}
.trait .n{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
.trait .name{font-size:clamp(26px,2.8vw,38px);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.trait.is-center{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:var(--shadow-2)}
.trait.is-center .n{color:var(--sky)}
.trait::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--sky)}
.trait{overflow:hidden}

/* Photo slideshows: one full-size photo filling the box (like the TOK photo),
   slowly cross-fading to the next. */
.slideshow{position:relative;min-height:320px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);background:var(--stripe)}
.slideshow .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;opacity:0;transition:opacity 1.2s ease}
.slideshow .slide.is-active,.slideshow:not(.is-ready) .slide:first-child{opacity:1}
.slideshow-dots{position:absolute;right:14px;bottom:14px;display:flex;gap:6px;padding:6px 8px;border-radius:999px;background:rgb(23 42 82 / .55)}
.slideshow-dots button{width:8px;height:8px;padding:0;border:none;border-radius:4px;background:rgb(255 255 255 / .55);cursor:pointer;transition:width .35s,background .35s}
.slideshow-dots button[aria-current="true"]{width:22px;background:#fff}

@media (max-width:860px){
  .rotator-traits .rotator-track{height:190px}
  .rotator.is-ready .trait{width:68%;height:160px;padding:18px 20px}
  .slideshow{min-height:240px}
  .hero-main{padding:28px 24px;gap:24px}
  .hero-stats{grid-template-columns:1fr;gap:12px}
  .hero-stats div{flex-direction:row;align-items:baseline;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .rotator.is-ready .rotator-item{transition:opacity .2s}
}

/* Hero stats arrive just after the headline. */
.hero-copy .kicker,.hero-actions{animation:rise .7s .12s cubic-bezier(.2,.7,.2,1) both}
.hero-actions{animation-delay:.3s}
.hero-stats{animation:rise .7s .4s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.hero-copy .kicker,.hero-actions,.hero-stats{animation:none}}

/* Light-blue boxes: a slightly deeper tint plus a hairline edge so they
   stand clearly off white without looking harsh. */
.panel:not(.blue):not(.ink),.row:not(.blue),.profile-card,.stat,.person,.compare > div,
.then-now > div:not(.arrow):not(:nth-child(3n)),.contact-card,.box,.mission,.link-list a,.link-list .item,
.accordion details,.chips span{border:1px solid var(--tint-edge)}
.chips span{border-color:var(--ink)}

/* More breathing room where cards lift on hover. */
.profile-grid,.people,.stat-row,.two-up,.split-7-5,.compare,.embed-pair{gap:20px}
.link-list,.accordion{gap:14px}

/* Coloured accent strips sit on top of the box's outline: the outline is
   left off along that edge, so the strip covers it and the curved corners
   cut the strip off cleanly. */
.profile-card,.stat,.person,.compare > div,.trait{border-top-width:0}
.box,.mission,.link-list a,.link-list .item,.accordion details[open]{border-left-width:0}

/* Hero card shadow sits above the general box-shadow rules. */
.hero-main{box-shadow:var(--shadow-3)}
.hero-bg{animation:fade 1s both}
@media (prefers-reduced-motion:reduce){.hero-bg{animation:none}}
@media (max-width:1000px){.pillars{margin-top:-40px}}

/* Menus under the last two tabs open toward the left so they stay on screen. */
.tab:nth-last-child(-n+2) .tab-menu{left:auto;right:0}

/* IB Diploma success rate: its own highlighted dark-blue panel. */
.success-panel{background:var(--ink);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow-2);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:20px;position:relative;overflow:hidden}
.success-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--sky)}
.success-title{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-soft)}
.success-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.success-grid div{display:flex;flex-direction:column;gap:6px;padding:14px 12px;border-radius:var(--radius-sm);background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .1);transition:background .2s,transform .2s}
.success-grid div:hover{background:rgb(255 255 255 / .12);transform:translateY(-2px)}
.success-grid b{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1}
.success-grid span{font-size:13px;font-weight:700;color:var(--sky)}
.success-grid div:last-child{background:var(--sky);border-color:var(--sky);color:var(--ink)}
.success-grid div:last-child span{color:var(--ink)}
@media (max-width:860px){.success-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:420px){.success-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Accordion contents are clipped while they animate open or closed. */
.accordion details.is-animating{overflow:hidden}

/* Section links: a little tighter on desktop so every page's links fit on one row. */
@media (min-width:861px){
  .on-this-page a{padding:10px 8px 13px;font-size:13.5px;gap:5px}
  .on-this-page a::before{left:8px;right:8px}
}
@media (min-width:861px){
  /* On narrower desktop screens, long labels wrap onto two lines rather than
     pushing the bar wider than the page. */
  .on-this-page a{white-space:normal;text-align:center;min-width:0;line-height:1.25}
}

/* Header logos: Hoggard V, a dividing line, then the IB World School logo. */
.brand{gap:16px}
.brand-logos{display:flex;align-items:center;gap:14px;flex:none}
.brand-logos img{display:block;height:46px;width:auto}
.logo-divider{width:2px;height:38px;border-radius:1px;background:var(--tint-edge)}
@media (max-width:520px){
  .brand{gap:10px}
  .brand-logos{gap:10px}
  .brand-logos img{height:38px}
  .logo-divider{height:30px}
}

/* A closing accordion item fades back to its closed colours as it folds up,
   instead of staying dark and then switching abruptly at the end. */
.accordion details.is-closing summary{background:var(--tint);color:var(--ink)}
.accordion details.is-closing summary::after{transform:none;color:var(--blue)}
.accordion details.is-closing::before{opacity:0}
.accordion details::before{transition:opacity .2s}
.accordion summary::after{transition:transform .25s,color .25s}

/* Pages with only two or three section links: each link gets an equal share
   of the bar with its label centred in it. */
.on-this-page:not(:has(> a:nth-child(4))) > a{flex:1 1 0}

/* Photos */
.photo{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);background:var(--stripe)}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo.wide{max-width:900px;aspect-ratio:4/3;max-height:460px;width:100%}
.photo.portrait{aspect-ratio:3/4}
.photo.fill{min-height:300px}
.with-photo{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:start}
.with-photo .stack{display:flex;flex-direction:column;gap:20px}
.with-photo > .photo:not(.portrait){aspect-ratio:4/3}
/* Page title block with a photo on the right. */
.page-hero-text{display:flex;flex-direction:column;gap:10px}
.page-hero-inner.has-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);align-items:stretch;padding:0;overflow:hidden;height:clamp(180px,17vw,240px)}
.page-hero-inner.has-photo .page-hero-text{padding:32px 40px;justify-content:center}
.page-hero-photo{display:block;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 45%}
@media (max-width:860px){
  .with-photo{grid-template-columns:1fr}
  .with-photo > .photo.portrait{max-width:420px}
  .page-hero-inner.has-photo{grid-template-columns:1fr;height:auto}
  .page-hero-inner.has-photo .page-hero-text{padding:24px}
  .page-hero-photo{min-height:180px;max-height:220px}
}

/* CAS slideshows: a little taller so portrait photos crop less. */
#service .two-up .panel.tall,#service .slideshow{min-height:400px}
.slideshow.tall{width:100%;max-width:900px;aspect-ratio:16/10;min-height:0}
@media (max-width:860px){#service .two-up .panel.tall{min-height:0}#service .slideshow{min-height:320px}}

@media (min-width:861px) and (max-width:1000px){.insta-grid.has-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Before Instagram's embed loads (or if it's blocked), each post shows as a tidy link card. */
.insta-post blockquote.instagram-media{background:#fff!important;padding:28px 20px!important;text-align:center;font-weight:700}
.insta-post blockquote.instagram-media a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

.news-item.no-link:hover{transform:none;box-shadow:var(--shadow-1)}
.news-item.no-link::after{content:none}

/* Latest cards: 1–2 side by side, 3 in a row, 4 as two rows of two, 5 as three then two. */
.news-list[data-count="3"],.news-list[data-count="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.news-list[data-count="3"] > *,.news-list[data-count="5"] > *{grid-column:span 2}
.news-list[data-count="5"] > :nth-child(n+4){grid-column:span 3}
@media (max-width:860px){
  .news-list[data-count] {grid-template-columns:1fr}
  .news-list[data-count] > :nth-child(n){grid-column:auto}
}

/* Newsletters page: one group per school year. */
.newsletter-list{display:flex;flex-direction:column;gap:14px}
.newsletter-list h3:not(:first-child){margin-top:14px}