/* Term — the system for this site.
   One committed pole: deep blue ground rules, an amber rule under a small-caps
   label, record-card modules on white, tabular figures down every column of
   numbers. The client asked for a light ground, so there is one palette here,
   no second one and no theme script anywhere on the site. */
:root{
  --blue:#16325C;
  --blue-d:#0E2242;
  --blue-lt:#E8EDF5;
  --amber:#A85C0B;
  --amber-lt:#E8A33D;
  --paper:#FFFFFF;
  --grey:#F1F3F6;
  --line:#D7DCE4;
  --ink:#1A2233;
  --ink-2:#4B5568;
  --measure:64ch;
  --gut:20px;
  --rule:3px;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,0.95rem + 0.15vw,18px);
  line-height:1.6;
}
h1,h2,h3,h4{font-family:var(--serif);color:var(--blue);line-height:1.2;
  text-wrap:balance;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(1.8rem,1.15rem + 2.1vw,2.9rem)}
h2{font-size:clamp(1.35rem,1.05rem + 1.1vw,1.95rem)}
h3{font-size:1.08rem;color:var(--ink)}
p{margin:0 0 1em}
a{color:var(--blue);text-underline-offset:.18em}
a:hover{color:var(--amber)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
img{max-width:100%;height:auto;display:block}
address{font-style:normal}
[hidden]{display:none}
.wrap{width:min(1140px,100% - 2*var(--gut));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;
  padding:.6em 1em;z-index:90}
.skip:focus{left:0}

/* the preview banner: its own colours, in flow, covering nothing */
.owpreview{background:#0E2242;color:#FFFFFF;padding:12px var(--gut);
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;
  text-align:center}
.owpreview p{margin:0;font-size:.95rem}
.owcta{display:inline-block;background:#FFFFFF;color:#0E2242;text-decoration:none;
  padding:9px 16px;min-height:24px;border-radius:2px;font-size:.9rem;font-weight:600}
.owcta:hover{background:#E8A33D;color:#0E2242}

/* header ----------------------------------------------------------------- */
.sitehead{background:var(--paper);border-bottom:1px solid var(--line)}
/* The menu panel is positioned by the whole header row, not by the nav, which
   is only as tall as its trigger: anchored to the nav it opened on top of the
   header's own booking button. */
.headrow{position:relative;display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 22px;padding:12px 0}
.brandlink{flex:0 0 auto;line-height:0;text-decoration:none}
.plaque{display:block;background:var(--paper);padding:2px 0}
.plaque img{width:200px;height:auto}
.plaque.foot img{width:220px}
.nav{position:static;display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  flex:1 1 auto;justify-content:flex-end}
.nav ul{list-style:none;margin:0;padding:0}
.bar{display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:flex-end}
.nav a{display:inline-block;padding:8px 10px;min-height:24px;white-space:nowrap;
  font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);border-bottom:2px solid transparent}
.nav a:hover{color:var(--blue);border-bottom-color:var(--amber-lt)}
.nav a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
.more{position:static}
.more summary{cursor:pointer;list-style:none;display:inline-block;padding:8px 10px;
  min-height:24px;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:2px solid transparent;white-space:nowrap}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" +";color:var(--amber)}
.more[open] summary::after{content:" \2212"}
.more summary:hover{color:var(--blue);border-bottom-color:var(--amber-lt)}
/* the panel is anchored to the BAR, never to its trigger, and its closed state
   is restated here rather than left to the UA default */
.more:not([open]) .morepanel{display:none}
.morepanel{position:absolute;right:var(--gut);top:100%;z-index:50;
  display:flex;flex-direction:column;min-width:14rem;
  max-width:calc(100vw - 2*var(--gut));
  background:var(--paper);border:1px solid var(--line);border-top:var(--rule) solid var(--amber);
  box-shadow:0 8px 26px rgba(22,50,92,.16);padding:6px}
.morepanel a{border-bottom:0;padding:10px 12px;text-transform:none;font-size:.9rem;
  letter-spacing:0}
.dup{display:none}
.w-menu{display:none}
.cta{display:inline-block;padding:12px 20px;min-height:24px;background:var(--blue);
  color:#fff;text-decoration:none;border:2px solid var(--blue);border-radius:2px;
  font-size:.9rem;letter-spacing:.02em}
.cta:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.cta.quiet{background:transparent;color:var(--blue)}
.cta.quiet:hover{background:var(--blue);color:#fff}
/* When the row is wide enough the button sits beside the nav; when it is not,
   it wraps and stays on the right, under the nav it followed. Pinned left with
   the rest of the row empty beside it, a wrapped button reads as a mistake
   rather than as a second row. */
.headcta{flex:0 0 auto;margin-left:auto;padding:10px 16px;font-size:.82rem}
/* Above this width the wordmark, the six-item bar, the More control and the
   booking button all fit one row -- but only just, so the spacing tightens here
   rather than letting the button drop onto a second row of its own with the
   width of the page empty beside it. The labels never shrink to achieve it. */
@media (min-width:1160px){
  .headrow{gap:10px 12px}
  .nav{gap:2px}
  .nav a,.more summary{padding-inline:8px}
}
@media (min-width:1000px){
  .sitehead{position:sticky;top:0;z-index:40}
  /* NAV-07: a sticky header reserves the offset in the same breakpoint */
  [id]{scroll-margin-top:104px}
}
/* below the width where the full bar fits, the bar is shed and the disclosure
   carries every page. Measured, not guessed: six uppercase labels plus the
   trigger stop fitting one row at about 1060px. */
@media (max-width:1060px){
  .bar{display:none}
  .dup{display:block}
  .w-more{display:none}
  .w-menu{display:inline}
  .more summary{border:1px solid var(--line);border-radius:2px;padding:9px 14px}
}
@media (max-width:560px){
  .plaque img{width:158px}
  .headcta{padding:9px 12px;font-size:.76rem}
}

/* modules ---------------------------------------------------------------- */
.mod,.pagehead,.hero,.toc{padding:clamp(34px,4.4vw,58px) var(--gut);
  margin-inline:auto;width:min(1140px,100%)}
/* A full-bleed tinted band has to land its CONTENT on the same left edge as a
   white band, not its background. The white band is 1140 wide with a gutter
   inside it, so the tinted band's padding is the centring margin PLUS that same
   gutter -- without the gutter the text jogged 20px left every second section
   on a wide screen. */
.mod.tint{background:var(--grey);border-block:1px solid var(--line);
  width:100%;max-width:none;
  padding-inline:max(var(--gut),calc((100% - 1140px)/2 + var(--gut)))}
.pagehead{padding-bottom:0}
.label{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin:0 0 10px;font-weight:600;
  border-bottom:var(--rule) solid var(--amber);display:inline-block;padding-bottom:6px}
.lead{max-width:var(--measure);font-size:1.06rem;color:var(--ink-2)}
.mod p,.mod li{max-width:none}
.mod > p{max-width:var(--measure)}
.more a{font-size:.95rem}
.figure{font-size:1.3rem;font-family:var(--serif);color:var(--blue);
  font-variant-numeric:tabular-nums}

/* hero ------------------------------------------------------------------- */
.herorow{display:grid;gap:clamp(20px,3vw,40px);align-items:center;
  justify-content:center}
@media (min-width:880px){.herorow{grid-template-columns:1fr 1fr}}
.herotext{max-width:var(--measure)}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.2em}

/* One image treatment sitewide. Unbounded, an interior photograph grew to a
   whole screen between two short sections on a wide display, and was enlarged
   past the frame's own resolution. The cap is on the figure's width, not a
   max-height on something sized by aspect-ratio. */
.shot{margin:0;max-width:640px}
.hero .shot{max-width:none}
.shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;
  border:1px solid var(--line);border-radius:2px}
.shot figcaption{margin-top:10px;font-size:.92rem;color:var(--ink-2);
  border-left:var(--rule) solid var(--amber-lt);padding-left:12px}
@media (max-width:640px){.shot img{aspect-ratio:3/2}}

/* lists ------------------------------------------------------------------ */
.ruled{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ruled li{padding:12px 0;border-bottom:1px solid var(--line)}
.ruled.two{grid-template-columns:1fr}
@media (min-width:700px){.ruled.two{grid-template-columns:1fr 1fr;column-gap:44px}}
.steps{margin:0;padding:0 0 0 1.4em;display:grid;gap:0}
.steps li{padding:12px 0;border-bottom:1px solid var(--line)}
.steps li::marker{color:var(--amber);font-weight:700}
.plain{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.names{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:1fr}
.names li{padding:11px 0;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:1.06rem;color:var(--blue)}
@media (min-width:660px){.names{grid-template-columns:repeat(3,1fr);column-gap:36px}}

/* cards: 13 programs, a set the intake sizes, stepping 1 -> 2 */
.cards{display:grid;gap:18px;grid-template-columns:1fr;align-items:start}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--paper);border:1px solid var(--line);border-top:var(--rule) solid var(--blue);
  border-radius:2px;padding:20px 22px}
.card h2{font-size:1.14rem;margin-bottom:.35em}
.card p{margin:0;color:var(--ink-2)}

/* rates ------------------------------------------------------------------ */
.rates{margin:0;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.rates caption{text-align:left;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);padding-bottom:10px}
.rates th,.rates td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);
  vertical-align:top;font-weight:400}
.rates th{color:var(--ink);padding-right:24px}
.rates td{color:var(--blue);font-family:var(--serif);width:40%}
dl.rates{display:grid;gap:0}
dl.rates .rate{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--line)}
dl.rates dt{color:var(--ink)}
dl.rates dd{margin:0;color:var(--blue);font-family:var(--serif)}

/* toc: the one convenience on the longest page */
.toc{padding-block:0}
.toc ul{list-style:none;margin:0;padding:14px 18px;display:flex;flex-wrap:wrap;
  gap:8px 22px;background:var(--blue-lt);border-left:var(--rule) solid var(--blue);
  border-radius:2px}
.toc a{font-size:.9rem}

/* people, quotes, qa ----------------------------------------------------- */
.people{margin:0;display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:820px){.people{grid-template-columns:repeat(3,1fr);column-gap:32px}}
.person{padding:14px 0;border-bottom:1px solid var(--line)}
.person dt{font-family:var(--serif);font-size:1.08rem;color:var(--blue);margin-bottom:.3em}
.person dd{margin:0;color:var(--ink-2);font-size:.95rem}
.quotes{display:grid;gap:18px;grid-template-columns:1fr;align-items:start;
  max-width:var(--measure)}
.quote{margin:0;background:var(--paper);border:1px solid var(--line);
  border-left:var(--rule) solid var(--amber);border-radius:2px;padding:20px 22px}
.quote p{font-family:var(--serif);font-size:1.06rem;margin:0 0 .6em}
.quote cite{font-style:normal;font-size:.88rem;color:var(--ink-2)}
.pull{margin:0;border-left:var(--rule) solid var(--amber);padding:2px 0 2px 20px;
  max-width:54ch}
.pull p{font-family:var(--serif);font-size:clamp(1.15rem,1rem + .9vw,1.5rem);
  line-height:1.4;color:var(--blue);margin:0 0 .5em}
.pull cite{font-style:normal;font-size:.9rem;color:var(--ink-2)}
.qa{display:grid;gap:0}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;padding:14px 0;font-family:var(--serif);font-size:1.06rem;
  color:var(--blue);list-style:none;display:flex;gap:12px;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"+";color:var(--amber);font-family:var(--sans);
  font-weight:700;flex:0 0 auto}
.qa details[open] summary::before{content:"\2212"}
.qa details p{margin:0 0 14px;padding-left:24px;color:var(--ink-2);
  max-width:var(--measure)}

/* facts and map ---------------------------------------------------------- */
.factrow{display:grid;gap:24px;grid-template-columns:1fr;align-items:start}
@media (min-width:760px){.factrow{grid-template-columns:repeat(3,1fr)}}
.fact h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--sans);color:var(--ink-2);margin-bottom:.8em}
.addr{font-family:var(--serif);font-size:1.06rem;line-height:1.5;color:var(--blue)}
.mapwrap{border:1px solid var(--line);border-radius:2px;overflow:hidden}
.mapwrap iframe{display:block;width:100%;height:clamp(320px,44vw,470px);border:0}

/* footer ----------------------------------------------------------------- */
.sitefoot{background:var(--blue-d);color:#EAEFF7;margin-top:0;
  padding:clamp(36px,4.5vw,58px) 0 0}
.footgrid{display:grid;gap:30px;grid-template-columns:1fr;align-items:start}
/* Four columns at a tablet width pushed the hours past the right edge — every
   page scrolled sideways and the opening hours were off screen — and squeezed
   the page labels until they broke after their first word. The counts step
   1 -> 2 -> 4, and the four-column stage waits until there is room for it. */
@media (min-width:640px){.footgrid{grid-template-columns:1fr 1fr}}
/* The four-column step waits for 1160, which is where the four tracks measured
   clean: at 1040 the programme list ran over the hours and printed on top of
   them. That did not widen the page, so it never showed as overflow -- it was
   two columns of text occupying the same space. The step is where the content
   fits, measured, not where a tablet is assumed to end. */
@media (min-width:1160px){.footgrid{grid-template-columns:1fr 1fr 1.7fr 1.1fr}}
.footgrid > *{min-width:0}
.footcol .label{color:var(--amber-lt);border-bottom-color:var(--amber-lt)}
.farm,.sitefoot .plain{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* The programme list runs in ONE column inside its footer track. Two-up split
   it into cells too narrow for its own names, so each one broke at its own
   hyphen -- "Middle-" above "school mathematics". A longer footer is the
   cheaper of the two, and the names are what a parent is scanning for. */
.farm.cols{grid-template-columns:1fr}
.sitefoot a{color:#EAEFF7}
.sitefoot a:hover{color:var(--amber-lt)}
.footaddr{margin-bottom:14px;font-family:var(--serif);font-size:1.02rem;color:#EAEFF7}
.footbrand .plaque{border-radius:2px;padding:10px 12px;margin-bottom:14px;
  display:inline-block}
.footrule{border-top:1px solid rgba(234,239,247,.24);margin-top:30px;padding:16px 0}
.footrule p{margin:0;font-size:.88rem;color:#C6D2E6}

/* motion: one rhythm, inside the guard; everything legible without it */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .mod{animation:rise both;animation-timeline:view();
      animation-range:entry 0% entry 50%}
    @keyframes rise{from{opacity:.001;transform:translateY(14px)}
      to{opacity:1;transform:none}}
  }
}