/* ============================================================
   Bench Ready - global stylesheet
   Shared by every page: design tokens, loader, header, buttons,
   sections, cards, footer and the mobile dock.
   Extracted verbatim from the original landing pages; the only
   addition is the site-navigation block at the end.
   ============================================================ */

:root{
  /* slate-graphite spectrum : layered, never flat black */
  --bg-0:#151A21;   /* deepest : utility bar, footer */
  --bg-1:#1F252E;   /* page base */
  --bg-2:#28303B;   /* alternate bands */
  --bg-3:#303945;   /* cards and panels */
  --bg-4:#3A4452;   /* raised / hover */
  --line:#465162;
  --line-soft:#3A4452;

  --cream:#F7F5F0;
  --text-2:#DDE2EA;
  --muted:#B4BDCB;

  --gold:#FFDE59;       /* exact brand yellow from the logo */
  --gold-deep:#E0B93A;
  --gold-dim:rgba(255,222,89,.14);
  --wa:#25D366;
  --cat-boys:#7FA8E8;
  --cat-girls:#E894AF;
  --cat-coed:#6FD3A8;
  --cat-intl:#B79BE8;

  --logo:url("../assets/images/logo.png");
  --emblem:url("../assets/images/emblem.png");
  --sp:clamp(58px,7vw,108px);
  --edge:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.8,.28,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--cream);background:var(--bg-1);
  font-family:'Montserrat',system-ui,sans-serif;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.14;margin:0}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--edge);position:relative}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:radial-gradient(700px 500px at 50% 42%,#242C36 0%,#161B22 62%,#10141A 100%);
  animation:loaderOut .55s var(--ease) 2.5s forwards;
}
.loader-inner{display:grid;justify-items:center;gap:24px}
.loader-badge{position:relative;display:grid;place-items:center;padding:34px}
.loader-mark{
  width:clamp(112px,20vw,152px);aspect-ratio:1;
  opacity:0;animation:markIn 1s var(--ease) .12s forwards;
}
.loader-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.loader-ring circle{
  fill:none;stroke:var(--gold);stroke-width:1;opacity:.5;
  stroke-dasharray:1 5;stroke-linecap:round;
  transform-origin:50% 50%;animation:spin 9s linear infinite;
}
.loader-bar{width:170px;height:2px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
.loader-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold));animation:fill 2.3s var(--ease) .15s forwards}
.loader-word{
  font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);
  opacity:0;animation:riseIn .9s var(--ease) .6s forwards;
}
@keyframes markIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fill{to{width:100%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- shared bits ---------- */
.eyebrow{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  color:var(--gold);display:flex;align-items:center;gap:14px;margin-bottom:18px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.mark{background:var(--logo) center/contain no-repeat;mix-blend-mode:screen;display:block;flex:none}
@supports not (mix-blend-mode:screen){ .mark{mix-blend-mode:normal} }

/* ---------- utility bar ---------- */
.util{background:var(--bg-0);border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--muted)}
.util .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;padding-top:9px;padding-bottom:9px}
.util strong{color:var(--gold);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.util a{text-decoration:none}
.util a:hover{color:var(--cream)}
.util-contact{display:flex;flex-wrap:wrap;gap:6px 22px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(31,37,46,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);transition:box-shadow .3s var(--ease),background .3s var(--ease)}
header.stuck{background:rgba(24,29,37,.96);box-shadow:0 12px 34px rgba(0,0,0,.34)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:11px;padding-bottom:11px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
/* the mark is white and yellow on black : screen blending drops the black
   so it sits on the page colour with no box around it */
.brand .mark{height:52px;width:52px;background-image:var(--emblem)}
.wordmark{font-weight:800;letter-spacing:.16em;font-size:15px;line-height:1;white-space:nowrap}
.wordmark span{color:var(--gold)}
.wordmark small{display:block;font-weight:500;font-size:8.5px;letter-spacing:.22em;color:var(--muted);margin-top:6px}
.head-actions{display:flex;align-items:center;gap:10px}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.04em;
  padding:13px 22px;border-radius:3px;text-decoration:none;border:1px solid transparent;
  min-height:46px;overflow:hidden;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-wa{background:var(--wa);color:#04240F}
.btn-wa:hover{background:#1FBE5B;box-shadow:0 10px 24px rgba(37,211,102,.24)}
.btn-gold{background:var(--gold);color:#191400}
.btn-gold:hover{background:#FFE87F;box-shadow:0 10px 24px rgba(255,222,89,.22)}
.btn-app{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn-app:hover{background:var(--gold);color:#191400;box-shadow:0 10px 24px rgba(255,222,89,.2)}
.btn-ghost{border-color:var(--line);color:var(--cream);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,222,89,.08)}
.icon-btn{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:3px;color:var(--muted);background:rgba(255,255,255,.03);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{color:var(--gold);border-color:var(--gold);background:rgba(255,222,89,.1);transform:translateY(-2px)}

/* ---------- hero ---------- */
.hero{
  padding:clamp(56px,9vw,112px) 0 var(--sp);position:relative;overflow:hidden;
  background:linear-gradient(168deg,#2F3945 0%,#28303C 42%,#222933 74%,var(--bg-1) 100%);
  border-bottom:1px solid var(--line-soft);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 380px at 8% -10%,rgba(255,222,89,.17),transparent 66%),
    radial-gradient(620px 340px at 98% 108%,rgba(120,158,214,.14),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 78px,rgba(255,255,255,.024) 78px 79px);
}
.hero-mark{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(430px,42vw);aspect-ratio:1;opacity:.15;pointer-events:none;
  background-image:var(--emblem);
  animation:floaty 11s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 16px))}}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(34px,5.4vw,62px);max-width:15ch;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-sub{margin-top:24px;max-width:54ch;color:var(--text-2);font-size:clamp(15px,1.6vw,17.5px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line-soft);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero-meta span{display:flex;align-items:center;gap:9px}
.dot{width:5px;height:5px;background:var(--gold);border-radius:50%;flex:none;animation:pulse 3.4s ease-in-out infinite}
.hero-meta span:nth-child(2) .dot{animation-delay:.5s}
.hero-meta span:nth-child(3) .dot{animation-delay:1s}
.hero-meta span:nth-child(4) .dot{animation-delay:1.5s}
.hero-meta span:nth-child(5) .dot{animation-delay:2s}
@keyframes pulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* ---------- sections ---------- */
section{padding:var(--sp) 0;position:relative}
.band{
  background:
    radial-gradient(900px 420px at 88% 8%,rgba(255,222,89,.05),transparent 62%),
    var(--bg-2);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.sec-head{max-width:62ch;margin-bottom:clamp(34px,4vw,54px)}
.sec-head h2{font-size:clamp(26px,3.6vw,42px)}
.sec-head p{margin-top:16px;color:var(--text-2)}

/* ---------- split copy + figure ---------- */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center;margin-bottom:clamp(34px,4vw,54px)}
.desk{display:block;width:100%;height:auto;max-width:460px;margin-left:auto}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:5px;overflow:hidden}
.pillar{background:var(--bg-3);padding:30px 26px;transition:background .25s var(--ease)}
.pillar:hover{background:var(--bg-4)}
.pillar h3{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;letter-spacing:.02em;margin-bottom:10px}
.pillar p{font-size:14px;color:var(--muted)}
.pillar svg{width:34px;height:34px;color:var(--gold);margin:0 auto 20px;display:block}

/* ---------- programme cards ---------- */
.prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.card{
  position:relative;background:var(--bg-3);border:1px solid var(--line-soft);border-top:3px solid var(--gold);
  border-radius:5px;padding:32px 28px;display:flex;flex-direction:column;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.card:hover{transform:translateY(-5px);background:#343E4B;box-shadow:0 22px 48px rgba(0,0,0,.34)}
.card .card-fig{position:absolute;right:-26px;top:-18px;width:150px;color:var(--gold);opacity:.075;pointer-events:none;transition:opacity .3s var(--ease),transform .4s var(--ease)}
.card:hover .card-fig{opacity:.15;transform:translateY(4px) rotate(-3deg)}
.card .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;position:relative}
.card h3{font-size:26px;margin:12px 0 6px;position:relative}
.card .lede{font-size:14.5px;color:var(--text-2);margin-bottom:22px;position:relative}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:13px;position:relative}
.card li{padding-left:20px;position:relative;font-size:14px;color:var(--muted)}
.card li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--gold)}
.card li b{color:var(--cream);font-weight:600;display:block;font-size:14px;margin-bottom:2px}
.card .who{margin-top:auto;padding-top:26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);position:relative}
.card .who::before{content:"";display:block;width:34px;height:1px;background:var(--line);margin-bottom:14px}

/* ---------- boarding schools ---------- */
.scene-frame{
  border:1px solid var(--line-soft);border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,#2B333F,#242B35);margin-bottom:30px;
}
.scene{display:block;width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:20px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:9px}
.legend i{width:9px;height:9px;border-radius:2px;flex:none}

.schools{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px}
.school{
  background:var(--bg-3);border:1px solid var(--line-soft);border-left:6px solid var(--line);
  border-radius:4px;padding:14px 16px;
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.school:hover{transform:translateY(-3px);background:#343E4B}
.school b{display:block;font-size:14px;font-weight:600;color:var(--cream);line-height:1.35}
.school span{display:block;margin-top:5px;font-size:12px;color:var(--muted)}
.school.boys{border-left-color:var(--cat-boys)}
.school.girls{border-left-color:var(--cat-girls)}
.school.coed{border-left-color:var(--cat-coed)}
.school.intl{border-left-color:var(--cat-intl)}

/* ---------- app ---------- */
.app-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.app-grid p{color:var(--text-2);margin-top:16px}
.app-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.app-note{margin-top:16px;font-size:12.5px;color:var(--muted)}
.quote{border-left:2px solid var(--gold);padding:6px 0 6px 26px;font-family:'Playfair Display',serif;font-size:clamp(20px,2.6vw,28px);line-height:1.35}

/* phone mock : gives the app section something to look at */
.phone{
  width:min(260px,72vw);margin:0 auto;aspect-ratio:9/17.6;border-radius:28px;
  background:linear-gradient(165deg,#3C4654,#252C36);border:1px solid var(--line);
  box-shadow:0 30px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);
  padding:12px;display:flex;flex-direction:column;gap:9px;position:relative;
}
.phone::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:64px;height:5px;border-radius:5px;background:rgba(255,255,255,.16)}
.phone .scr{background:#1C222B;border-radius:18px;flex:1;padding:26px 14px 14px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.phone .p-mark{width:40px;height:40px;margin:0 auto 4px;background-image:var(--emblem)}
.phone .row{height:11px;border-radius:3px;background:rgba(255,255,255,.09)}
.phone .row.w70{width:70%}
.phone .row.w45{width:45%}
.phone .tile{height:46px;border-radius:6px;background:rgba(255,222,89,.12);border:1px solid rgba(255,222,89,.24)}
.phone .tile.alt{background:rgba(255,255,255,.06);border-color:var(--line-soft)}
.phone .live{display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.phone .live i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s ease-in-out infinite}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:34px}
.contact-grid h3{font-family:'Montserrat',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.contact-grid a{text-decoration:none;transition:color .2s var(--ease)}
.contact-grid a:hover{color:var(--gold)}
.contact-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14.5px;color:var(--text-2)}
.socials{display:flex;gap:10px;margin-top:4px}

/* ---------- footer ---------- */
footer{background:var(--bg-0);border-top:1px solid var(--line-soft);padding:52px 0 100px}
.foot-top{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px;color:var(--muted)}
.foot-links a{text-decoration:none;transition:color .2s var(--ease)}
.foot-links a:hover{color:var(--gold)}
.copy{margin-top:34px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:12.5px;color:#8A94A4;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ---------- mobile dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:8px;padding:10px var(--edge) calc(10px + env(safe-area-inset-bottom));
  background:rgba(21,26,33,.97);border-top:1px solid var(--line-soft);backdrop-filter:blur(14px)}
.dock .btn{flex:1;padding:12px 6px;font-size:12.5px;gap:7px}
.dock .btn:hover{transform:none}
.dock .btn svg{width:16px;height:16px}

@media (max-width:900px){
  .app-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .desk{margin:0 auto;max-width:400px}
  .hero-mark{width:min(300px,56vw);opacity:.07;right:-16%}
}
@media (max-width:760px){
  .head-actions{display:none}
  .brand .mark{height:44px;width:44px}
  .wordmark{font-size:13.5px}
  header .wrap{padding-top:9px;padding-bottom:9px}
  .dock{display:flex}
  footer{padding-bottom:112px}
  .util-tag{display:none}
  .card .card-fig{width:118px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  #loader{display:none}
  .rv{opacity:1;transform:none}
}

header .wrap{position:relative}


/* ---------- site navigation --------------------------------------------
   Added when the five pages were joined into one site. Purely additive:
   new class names only, so no existing header rule is touched.

   The header already carries the brand block plus five action controls,
   which fills the 1180px content column. A row of inline links does not
   fit at any breakpoint without wrapping the header onto a second line
   and pushing every section down the page, so the links live behind a
   menu button that matches the icon buttons already in the header. Same
   navigation, same behaviour, identical header height at every width.
   ----------------------------------------------------------------------- */
.mainnav{display:flex;align-items:center;margin-left:auto}

.nav-toggle{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:3px;background:rgba(255,255,255,.03);
  color:var(--muted);cursor:pointer;padding:0;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.nav-toggle:hover{color:var(--gold);border-color:var(--gold);background:rgba(255,222,89,.1);transform:translateY(-2px)}
.nav-toggle[aria-expanded="true"]{color:var(--gold);border-color:var(--gold);background:rgba(255,222,89,.1)}
.nav-bars{display:grid;gap:4px;width:18px}
.nav-bars i{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.nav-menu{
  display:none;position:absolute;top:calc(100% + 10px);right:var(--edge);left:auto;z-index:70;
  min-width:262px;list-style:none;margin:0;padding:8px 0;
  flex-direction:column;align-items:stretch;
  background:rgba(24,29,37,.985);backdrop-filter:blur(14px);
  border:1px solid var(--line-soft);border-radius:5px;
  box-shadow:0 26px 54px rgba(0,0,0,.44);
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.nav-menu.open{display:flex;animation:navIn .22s var(--ease)}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav-menu li + li{border-top:1px solid var(--line-soft)}
.nav-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 22px;text-decoration:none;transition:color .2s var(--ease),background .2s var(--ease);
}
.nav-menu a:hover{color:var(--cream);background:rgba(255,255,255,.04)}
.nav-menu a[aria-current="page"]{color:var(--gold);background:rgba(255,222,89,.07)}

@media (max-width:760px){
  .nav-menu{left:var(--edge);right:var(--edge);min-width:0}
}

/* ---------- tablet header fix -------------------------------------------
   The original pages hid .head-actions and showed the mobile dock at 760px,
   but the brand plus the five action controls need about 940px to sit on one
   line. Between 761px and 940px the header therefore wrapped onto a second
   row and pushed the page into horizontal scroll - visible on an iPad in
   portrait. This moves the existing swap up to 960px so tablets get the same
   header and dock that phones already got. Nothing new is introduced: it is
   the rules the pages already had, applied over a slightly wider range.
   ------------------------------------------------------------------------- */
@media (max-width:960px){
  .head-actions{display:none}
  .dock{display:flex}
  footer{padding-bottom:112px}
}