/* Maxy Institute · maxy.institute
   Source Sans 3, self-hosted. Variable woff2 subsets, weights 300-600 in range. */

@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/SourceSans3-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/SourceSans3-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/SourceSans3-greek-ext.woff2') format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/SourceSans3-greek.woff2') format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/SourceSans3-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/SourceSans3-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/SourceSans3-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#00204E;
  --accent:#2B5F9E;
  --tint:#EEF2F6;
  --body:#36424A;
  --muted:#5B6770;
  --muted-dark:#B9C2CC;
  --footer-muted:#8A939B;
  --white:#FFFFFF;
  --rule:rgba(0,32,78,.1);
  --rule-2:rgba(0,32,78,.15);
  --pad-y:110px;
  --pad-x:40px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:400;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:300;margin:0;text-wrap:pretty}
em{font-style:normal}
p{margin:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.on-dark :focus-visible{outline-color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:#fff;color:var(--navy);padding:12px 18px;font-size:14px}
.skip:focus{left:8px;top:8px}

.wrap{max-width:1200px;width:100%;margin:0 auto}
section{padding:var(--pad-y) var(--pad-x)}
.s-white{background:var(--white)}
.s-tint{background:var(--tint)}

/* ---- section head ---- */
.head{display:grid;grid-template-columns:minmax(220px,1fr) 2.2fr;gap:48px;margin-bottom:56px}
.head.wide{margin-bottom:64px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.kicker{font-size:13px;color:var(--muted)}
.head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12}

/* ---- hero ---- */
.hero{position:relative;min-height:94vh;display:flex;flex-direction:column;background:var(--navy)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(rgba(0,25,58,.66) 0%,rgba(0,25,58,.22) 40%),
  linear-gradient(90deg,rgba(0,25,58,.74) 0%,rgba(0,25,58,.08) 65%)}

.nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;max-width:1200px;width:100%;margin:0 auto;padding:28px var(--pad-x)}
.brandlink{display:flex;align-items:baseline;gap:9px}
.brandlink img{height:26px;width:auto;filter:brightness(0) invert(1)}
.brandlink span{font-size:21px;color:rgba(255,255,255,.85)}
.navlinks{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:14px 26px;font-size:13.5px}
.navlinks a{white-space:nowrap;color:rgba(255,255,255,.9);transition:color .15s}
.navlinks a:hover{color:#fff}
.navlinks a.pill{color:#fff;border:1px solid rgba(255,255,255,.6);padding:8px 18px;transition:background .15s,color .15s}
.navlinks a.pill:hover{background:#fff;color:var(--navy)}

.hero-body{position:relative;z-index:2;max-width:1200px;width:100%;margin:auto auto 0;padding:0 var(--pad-x) 72px}
.hero-eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:22px}
.hero h1{font-size:clamp(34px,5.2vw,68px);line-height:1.06;color:#fff;margin:0 0 26px;max-width:820px}
.hero-lede{font-size:18px;line-height:1.6;color:rgba(255,255,255,.85);max-width:600px;margin:0 0 34px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

.btn{display:inline-block;white-space:nowrap;padding:13px 26px;font-size:14.5px;font-weight:600;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;cursor:pointer;font-family:inherit}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--tint);color:var(--navy)}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.55);font-weight:400}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--body);color:#fff}
.btn-navy[disabled]{opacity:.6;cursor:progress}

/* ---- sector chips band ----
   Marquee: the chip set is duplicated in the markup (second copy aria-hidden),
   the track translates by exactly one set plus half the track gap, so the loop
   has no visible seam. Pure CSS, no script. --sb-gap must match in both places. */
.sectorband{
  --sb-gap:28px;
  --sb-cycle:52s;
  position:relative;
  background:var(--tint);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
  padding:14px 0;
}
.sectorband-track{
  display:flex;
  width:max-content;
  gap:var(--sb-gap);
  animation:sectorband-scroll var(--sb-cycle) linear infinite;
}
.sectorband:hover .sectorband-track,
.sectorband:focus-within .sectorband-track{animation-play-state:paused}
.sectorband-set{
  display:flex;
  gap:var(--sb-gap);
  margin:0;
  padding:0;
  list-style:none;
}
.sectorband-set li{
  flex:0 0 auto;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--white);
  border:1px solid var(--rule-2);
  padding:8px 16px;
  white-space:nowrap;
}
@keyframes sectorband-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - (var(--sb-gap) / 2)))}
}
@media (prefers-reduced-motion:reduce){
  .sectorband{overflow-x:auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
  .sectorband-track{animation:none;flex-wrap:nowrap}
  .sectorband-set[aria-hidden="true"]{display:none}
}

/* ---- prose columns ---- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;font-size:17px;line-height:1.65;color:var(--body);max-width:1020px}
.two-col>div p+p{margin-top:18px}
.two-col strong{color:var(--navy);font-weight:600}

/* ---- tile grids (hairline dividers via gap) ---- */
.tiles{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.tiles-3{grid-template-columns:repeat(3,1fr);margin-top:64px}
.tiles-4{grid-template-columns:repeat(4,1fr)}
.tiles-2{grid-template-columns:1fr 1fr;background:rgba(0,32,78,.12);border-color:rgba(0,32,78,.12);margin-top:40px}
.tile{padding:28px 30px}
.tile-tint{background:var(--tint)}
.tile-white{background:var(--white)}
.tile-label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.tile-text{font-size:15px;line-height:1.55;color:var(--body)}
.tile-name{font-size:24px;margin-bottom:10px;font-weight:300}
.tile.sm{padding:22px 24px}
.tile.sm .tile-label{font-size:11px;margin-bottom:8px}
.tile.sm .tile-text{font-size:14px;line-height:1.5}
.tiles-4 .tile{padding:30px 28px}
.tiles-4 .tile-label{font-size:11px;margin-bottom:12px}
.tiles-4 .tile-text{font-size:14px;line-height:1.6}

/* ---- consultant ---- */
.bio{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start}
.bio-portrait img{width:100%;display:block}
.bio-name{margin-top:18px;font-size:22px;color:var(--navy)}
.bio-role{font-size:13.5px;color:var(--muted);margin-top:4px}
.bio-text{font-size:17px;line-height:1.68;color:var(--body);max-width:640px}
.bio-text p+p{margin-top:18px}

/* ---- engagement arc ---- */
.arc{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-bottom:72px}
.arc-step{border-top:2px solid var(--navy);padding-top:20px}
.arc-num{font-size:12px;letter-spacing:.06em;color:var(--accent);margin-bottom:12px}
.arc-name{font-size:23px;margin-bottom:10px;font-weight:300}
.arc-body{font-size:14.5px;line-height:1.6;color:var(--body)}

.formats{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.format{padding:38px 40px}
.format-a{background:var(--tint);border:1px solid var(--rule)}
.format-b{background:var(--white);border:1px solid var(--navy)}
.format h3{font-size:27px;margin:0 0 12px}
.format p{font-size:15px;line-height:1.62;margin:0 0 18px}
.format ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.9}
.note{margin-top:32px;font-size:15px;color:var(--muted);max-width:720px}
.note strong{color:var(--navy);font-weight:600}

/* ---- curriculum footnote ---- */
.curric{margin-top:56px;border-top:1px solid rgba(0,32,78,.12);padding-top:28px;display:grid;grid-template-columns:minmax(220px,1fr) 2.2fr;gap:48px}
.curric .eyebrow{font-size:11.5px;letter-spacing:.14em;margin:0}
.curric p{font-size:15px;line-height:1.65;max-width:720px}

/* ---- client logo belt (§ 05 Proof) ----
   Same marquee mechanism as .sectorband: the logo set is duplicated in the
   markup (second copy aria-hidden, its links out of the tab order) and the
   track shifts by one full set plus half the track gap, so the loop has no
   visible seam. Pure CSS, no script, nothing fetched. --lb-gap must match in
   the rule and in the keyframe. */
.logobelt{
  --lb-gap:20px;
  --lb-cycle:64s;
  --lb-tile-h:118px;
  --lb-logo-h:44px;
  --lb-fade:60px;
  position:relative;
  overflow:hidden;
}
.logobelt::before,.logobelt::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:var(--lb-fade);
  z-index:2;
  pointer-events:none;
}
.logobelt::before{left:0;background:linear-gradient(90deg,var(--white),rgba(255,255,255,0))}
.logobelt::after{right:0;background:linear-gradient(270deg,var(--white),rgba(255,255,255,0))}
.logobelt-track{
  display:flex;
  width:max-content;
  gap:var(--lb-gap);
  animation:logobelt-scroll var(--lb-cycle) linear infinite;
}
.logobelt:hover .logobelt-track,
.logobelt:focus-within .logobelt-track{animation-play-state:paused}
.logobelt-set{
  display:flex;
  gap:var(--lb-gap);
  margin:0;
  padding:0;
  list-style:none;
}
.logobelt-set li{flex:0 0 auto}
.logobelt-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  height:var(--lb-tile-h);
  min-width:250px;
  padding:0 38px;
  background:var(--white);
  border:1px solid rgba(0,32,78,.12);
  transition:border-color .15s;
}
.logobelt-item:hover,
.logobelt-item:focus-visible{border-color:var(--accent)}
/* the rest state is greyscale so ten different brand palettes read as one row.
   The filter sits on the image, not the tile: on the tile it would grey the
   white tile background too. No opacity dip, because the lighter marks
   (Beacons' gold, G L Smith's tagline) stop being legible below full opacity. */
.logobelt-item img{
  display:block;
  height:var(--lb-logo-h);
  width:auto;
  max-width:190px;
  object-fit:contain;
  filter:grayscale(1);
  transition:filter .2s;
}
.logobelt-item:hover img,
.logobelt-item:focus-visible img{filter:grayscale(0)}
/* two clients set their name in HTML next to a square mark, so the mark is
   sized down and the name is set in the site's own display type */
.logobelt-item img.lb-mark{height:36px;max-width:36px}
/* optical rather than mathematical normalisation: a logo stacked into a deep
   block reads smaller than a wide one at the same pixel height, so the deep
   ones get a little more of the tile */
.logobelt-item img.lb-tall{height:calc(var(--lb-logo-h) + 16px)}
.logobelt-name{font-size:21px;font-weight:300;line-height:1;color:var(--navy);white-space:nowrap}
@keyframes logobelt-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - (var(--lb-gap) / 2)))}
}
@media (prefers-reduced-motion:reduce){
  .logobelt{overflow-x:auto}
  .logobelt::before,.logobelt::after{display:none}
  .logobelt-track{animation:none;width:auto}
  .logobelt-set[aria-hidden="true"]{display:none}
  .logobelt-item img{filter:none;transition:none}
}

/* ---- comparison ---- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1020px}
.compare div{padding-left:28px}
.compare .col-a{border-left:2px solid rgba(0,32,78,.2)}
.compare .col-b{border-left:2px solid var(--accent)}
.compare .lbl{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.compare .col-a .lbl{color:var(--muted)}
.compare .col-b .lbl{color:var(--accent)}
.compare p{font-size:15.5px;line-height:1.65;color:var(--body)}

/* ---- pricing ---- */
.pricing{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start}
.pricing-copy{font-size:16.5px;line-height:1.66;color:var(--body)}
.pricing-copy p{margin:0 0 18px}
.pricing-copy p.last{margin-bottom:28px}
.rates{border-top:2px solid var(--navy)}
.rate{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid rgba(0,32,78,.12)}
.rate-label{font-size:14.5px;color:var(--body)}
.rate-price{font-size:21px;white-space:nowrap;color:var(--navy);font-weight:300}
.rate-unit{font-size:11px;letter-spacing:.08em;color:var(--muted);margin-left:6px}

/* ---- enquiry ---- */
.enquire{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.enquire-copy{font-size:16px;line-height:1.66;color:var(--body)}
.enquire-copy p{margin:0 0 18px}
.enquire-copy ul{margin:0;padding-left:18px;line-height:1.9;font-size:14.5px}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .span2{grid-column:span 2}
label.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
input,textarea{background:#fff;border:1px solid rgba(0,32,78,.3);padding:13px 16px;font-size:14.5px;color:var(--body);font-family:inherit;width:100%}
textarea{resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.form-actions{grid-column:span 2;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-status{font-size:13px;color:var(--muted)}
.form-status.err{color:#8B2C2C}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---- footer ---- */
footer{background:var(--white);color:var(--muted);border-top:1px solid var(--rule-2);padding:56px var(--pad-x) 40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:44px}
.foot-brand a{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.foot-brand img{height:22px;width:auto}
.foot-brand a span{font-size:18px;color:var(--body)}
.foot-brand p{font-size:13.5px;line-height:1.6;max-width:300px}
footer h4{font-size:11px;letter-spacing:.14em;color:var(--footer-muted);margin:0 0 14px;font-weight:500;text-transform:uppercase}
.foot-links{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.foot-links a{color:var(--muted);transition:color .15s}
.foot-links a:hover{color:var(--accent)}
.foot-base{border-top:1px solid rgba(0,32,78,.12);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--footer-muted)}

/* ---- inner pages (privacy, 404) ---- */
.inner-head{background:var(--navy);padding:0 0 0}
.inner-head .navlinks a{color:rgba(255,255,255,.9)}
.page{padding:80px var(--pad-x) var(--pad-y)}
.page-body{max-width:760px;font-size:16.5px;line-height:1.7;color:var(--body)}
.page-body h1{font-size:clamp(32px,4vw,48px);line-height:1.1;margin:0 0 8px;color:var(--navy)}
.page-body h2{font-size:22px;margin:44px 0 12px;color:var(--navy);font-weight:600}
.page-body p{margin:0 0 16px}
.page-body ul{padding-left:20px;line-height:1.8}
.page-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.page-body a:hover{color:var(--navy)}
.page-date{font-size:13.5px;color:var(--muted);margin-bottom:36px}
.page-center{text-align:center;max-width:620px;margin:0 auto;padding:140px var(--pad-x) 160px}
.page-center .big{font-size:clamp(56px,9vw,110px);line-height:1;color:var(--navy);font-weight:300;margin-bottom:18px}

/* ---- booking widget (floating, bottom right) ---- */
.bk{position:fixed;right:20px;bottom:20px;z-index:60;width:min(360px,calc(100vw - 40px));display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-size:14px}
.bk[hidden]{display:none}
.bk-card{width:100%;background:var(--white);border:1px solid var(--rule-2);box-shadow:0 18px 40px rgba(0,32,78,.16);padding:20px 22px 22px;max-height:calc(100vh - 120px);overflow-y:auto}
.bk-card[hidden]{display:none}
.bk-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.bk-head img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;display:block}
.bk-who{font-size:15px;color:var(--navy);line-height:1.2}
.bk-role{font-size:12px;color:var(--muted);margin-top:2px}
.bk-close{margin-left:auto;background:none;border:0;padding:4px;cursor:pointer;color:var(--muted);font-family:inherit;font-size:16px;line-height:1}
.bk-close:hover{color:var(--navy)}
.bk-title{font-size:19px;font-weight:300;color:var(--navy);line-height:1.2;margin-bottom:8px}
.bk-copy{font-size:13.5px;line-height:1.55;color:var(--body);margin-bottom:16px}
.bk-scarce{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.bk-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}
.bk-day{background:var(--white);border:1px solid var(--rule-2);padding:9px 2px;text-align:center;cursor:pointer;font-family:inherit;color:var(--body);line-height:1.15;transition:border-color .15s,background .15s}
.bk-day:hover{border-color:var(--accent)}
.bk-day .d1{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bk-day .d2{display:block;font-size:17px;color:var(--navy);margin-top:3px}
.bk-day[aria-pressed="true"]{border-color:var(--navy);background:var(--tint)}
.bk-day[aria-pressed="true"] .d1{color:var(--accent)}
.bk-times{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bk-time{background:var(--white);border:1px solid var(--rule-2);padding:7px 12px;font-size:13.5px;font-family:inherit;color:var(--body);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.bk-time:hover{border-color:var(--accent)}
.bk-time[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.bk-tz{font-size:12px;color:var(--muted);margin-bottom:14px}
.bk-btn{display:block;width:100%;text-align:center;background:var(--navy);color:#fff;border:1px solid var(--navy);padding:12px 18px;font-size:14.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s}
.bk-btn:hover{background:var(--body);border-color:var(--body)}
.bk-btn[disabled]{opacity:.55;cursor:default}
.bk-form{display:grid;grid-template-columns:1fr;gap:9px;margin-top:4px}
.bk-form input{padding:11px 13px;font-size:14px}
.bk-when{font-size:13.5px;color:var(--navy);margin-bottom:10px}
.bk-back{background:none;border:0;padding:0;margin-top:10px;font-family:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bk-back:hover{color:var(--accent)}
.bk-msg{font-size:13.5px;line-height:1.6;color:var(--body)}
.bk-msg a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.bk-status{font-size:12.5px;color:var(--muted);min-height:1em}
.bk-status.err{color:#8B2C2C}
.bk-toggle{width:46px;height:46px;border-radius:50%;background:var(--navy);border:1px solid var(--navy);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,32,78,.24);transition:background .15s}
.bk-toggle:hover{background:var(--accent);border-color:var(--accent)}
.bk-toggle svg{width:18px;height:18px;transition:transform .18s}
.bk-toggle[aria-expanded="false"] svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.bk-toggle svg{transition:none}}

/* ================= RESPONSIVE ================= */
@media (max-width:1000px){
  :root{--pad-y:80px;--pad-x:28px}
  .head,.head.wide,.curric{grid-template-columns:1fr;gap:16px;margin-bottom:40px}
  .curric{gap:14px}
  .tiles-3{grid-template-columns:1fr 1fr}
  .tiles-4{grid-template-columns:1fr 1fr}
  .bio{grid-template-columns:1fr;gap:36px}
  .bio-portrait{max-width:320px}
  .arc{grid-template-columns:1fr 1fr;gap:28px;margin-bottom:48px}
  .pricing,.enquire{grid-template-columns:1fr;gap:40px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}

@media (max-width:720px){
  :root{--pad-y:64px;--pad-x:20px}
  .hero{min-height:auto}
  /* the horizontal veil does little at phone width; darken uniformly for contrast */
  .hero-veil{background:linear-gradient(rgba(0,25,58,.72) 0%,rgba(0,25,58,.62) 35%,rgba(0,25,58,.80) 100%)}
  .hero-lede{color:rgba(255,255,255,.92)}
  .nav{padding:20px var(--pad-x);gap:14px}
  .brandlink img{height:22px}
  .brandlink span{font-size:18px}
  .navlinks{gap:10px 16px;font-size:12.5px}
  .navlinks a.pill{padding:6px 14px}
  .hero-body{padding:72px var(--pad-x) 56px;margin-top:0}
  .hero h1{font-size:clamp(30px,8vw,40px);margin-bottom:20px}
  .hero-lede{font-size:16px;margin-bottom:28px}
  .cta-row{gap:10px}
  .btn{padding:12px 20px;font-size:14px}
  .two-col{grid-template-columns:1fr;gap:18px;font-size:16px}
  .two-col>div+div{margin-top:0}
  .tiles-3,.tiles-4,.tiles-2{grid-template-columns:1fr;margin-top:36px}
  .tile{padding:24px 22px}
  .arc{grid-template-columns:1fr;gap:24px}
  .formats,.compare{grid-template-columns:1fr;gap:20px}
  .format{padding:28px 24px}
  .logobelt{--lb-gap:14px;--lb-tile-h:92px;--lb-logo-h:34px;--lb-fade:28px;--lb-cycle:52s}
  .logobelt-item{min-width:186px;padding:0 24px;gap:11px}
  .logobelt-item img{max-width:140px}
  .logobelt-item img.lb-mark{height:28px;max-width:28px}
  .logobelt-item img.lb-tall{height:calc(var(--lb-logo-h) + 12px)}
  .logobelt-name{font-size:17px}
  .bio-text{font-size:16px}
  form{grid-template-columns:1fr}
  form .span2{grid-column:span 1}
  .form-actions{grid-column:span 1}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-base{flex-direction:column;gap:8px;padding-bottom:64px}
  .page-center{padding:90px var(--pad-x) 110px}
  /* keep the floating widget clear of the footer links and the enquiry form */
  .bk{right:14px;bottom:14px;width:calc(100vw - 28px)}
  .bk-card{max-height:calc(100vh - 96px);padding:18px 18px 20px}
  .bk-days{gap:5px}
}