/* Kinetik · kinetik.it.com
   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}
/* one short line, so no wrapping width and a size that fits it edge to edge */
.hero h1{font-size:clamp(30px,3.7vw,52px);line-height:1.14;color:#fff;margin:0 0 22px}
.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}
/* secondary hero routes: text links, so the one button stays the one to press */
.hero-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;font-size:14px}
.hero-links a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.4);transition:color .15s,text-decoration-color .15s}
.hero-links a:hover{color:#fff;text-decoration-color:#fff}

.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:104s;
  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}
/* Full-measure variant: spans the section rather than the 720px reading cap. */
.note-wide{max-width:none}
.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;pointer-events:none}
.bk-card,.bk-toggle{pointer-events:auto}
.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+.bk-msg{margin-top:10px}
.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}
/* the chevron is a bare glyph: no circle, ground, border, fill or shadow.
   The 46px box is the tap area only, the mark inside it stays 18px. */
.bk-toggle{width:46px;height:46px;padding:0;background:none;border:0;border-radius:0;
  color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .15s}
.bk-toggle:hover{color:var(--accent);background:none}
.bk-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.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}
}

/* Eight links, so the row runs out of space before the burger takes over.
   Between the burger width and this one, the links close up rather than wrap
   to a second line. The labels stay as they are. */
@media (max-width:1080px){
  .navlinks{gap:12px 17px;font-size:13px}
  .navlinks a.pill{padding:8px 14px}
}

/* Below this width the eight links can no longer sit beside the wordmark. The
   wordmark keeps the left, a burger button takes the right, and the links drop
   into a panel under both. Above it, the desktop row is untouched. */
.navburger{display:none}

@media (max-width:900px){
  .nav{flex-wrap:wrap;align-items:center;gap:0;padding:18px var(--pad-x) 14px}
  /* the open panel sits over the hero photograph, so it needs its own ground */
  .nav.is-open{background:rgba(0,25,58,.96)}

  .navburger{display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-10px;padding:0;
    background:none;border:0;color:#fff;cursor:pointer;font-family:inherit}
  .navburger:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .navburger-bars{position:relative;display:block;width:24px;height:16px}
  .navburger-bars span{position:absolute;left:0;width:100%;height:2px;background:currentColor;
    transition:transform .18s ease,opacity .18s ease}
  .navburger-bars span:nth-child(1){top:0}
  .navburger-bars span:nth-child(2){top:7px}
  .navburger-bars span:nth-child(3){top:14px}
  .nav.is-open .navburger-bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.is-open .navburger-bars span:nth-child(2){opacity:0}
  .nav.is-open .navburger-bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .navlinks{display:none;flex:1 0 100%;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:0;font-size:16px;margin-top:14px;
    border-top:1px solid rgba(255,255,255,.2)}
  .nav.is-open .navlinks{display:flex}
  .navlinks a{white-space:normal;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.16)}
  .navlinks a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
  .navlinks a.pill{margin-top:18px;padding:13px 18px;text-align:center;
    border:1px solid rgba(255,255,255,.6)}
}

@media (prefers-reduced-motion:reduce){.navburger-bars span{transition:none}}

@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)}
  .brandlink img{height:22px}
  .brandlink span{font-size:18px}
  .hero-body{padding:56px var(--pad-x) 84px;margin-top:0}
  .hero h1{font-size:clamp(26px,5.6vw,34px);margin-bottom:18px}
  .hero-lede{font-size:16px;margin-bottom:26px}
  .hero-eyebrow{margin-bottom:16px}
  .cta-row{gap:10px}
  .cta-row .btn{display:block;width:100%;text-align:center}
  .hero-links{margin-top:18px;gap:8px 22px;font-size:13.5px}
  .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)}
  /* while the panel is closed only the round button is there, so the strip
     must not sit across the hero and swallow taps meant for the page */
  .bk:has(> .bk-card[hidden]){width:auto}
  .bk-card{max-height:calc(100vh - 96px);padding:18px 18px 20px}
  .bk-days{gap:5px}
}

/* ---- article share row (Insights posts) ----
   Plain anchors to the share endpoints plus one script-driven copy button.
   No third-party widgets, no external requests. */
.sharerow{margin-top:40px;padding-top:20px;border-top:1px solid var(--rule)}
.sharerow .share-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 14px}
.sharerow ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sharerow a,.sharerow button{display:inline-flex;align-items:center;gap:9px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;color:var(--navy);
  background:none;border:1px solid var(--rule-2);padding:11px 15px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.sharerow a:hover,.sharerow button:hover{background:var(--tint);border-color:var(--navy)}
.sharerow svg{width:16px;height:16px;flex:none;display:block}
.sharerow button.is-done{color:var(--accent);border-color:var(--accent);background:var(--tint)}
.sharerow a:focus-visible,.sharerow button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:640px){
  .sharerow a,.sharerow button{font-size:13.5px;padding:10px 13px;gap:8px}
}