/* =========================================================
   Maths with Khalid: base (tokens, type, container)
   ========================================================= */
:root{
  --cream:#EFEDE3;--white:#FFFFFF;
  --indigo-100:#D7DCEE;--indigo-200:#C2C4DA;--indigo-400:#7886C7;--indigo-800:#252B5F;--indigo-950:#171A36;
  --amber-400:#FFD666;--amber-500:#FFC93C;
  /* motion tokens: one curve per job, four speeds */
  --ease-inout: cubic-bezier(.7, 0, .3, 1);   /* things moving between states */
  --ease-out: cubic-bezier(.5, .5, 0, 1);     /* instant reactions to hover/click */
  --dur-fast: .3s; --dur-primary: .5s; --dur-smooth: .7s; --dur-slow: .9s;
}

*{box-sizing:border-box;margin:0;padding:0}
img{display:block} /* as on your component pages; stops the gap under images */
/* ---------- your site type styles ---------- */
body { color: var(--indigo-950); font-family: DM Sans, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; background: var(--cream); }
h1 { letter-spacing: -.05em; margin-top: 0; margin-bottom: 0; font-family: Bricolage Grotesque, sans-serif; font-size: 5em; font-weight: 800; line-height: 1.1; }
h2 { letter-spacing: -.05em; margin-top: 0; margin-bottom: 0; font-family: Bricolage Grotesque, sans-serif; font-size: 3.5em; font-weight: 700; line-height: 1; }
h3 { letter-spacing: -.05em; margin-top: 0; margin-bottom: 0; font-family: Bricolage Grotesque, sans-serif; font-size: 2.5em; font-weight: 700; line-height: 1; }
h4 { margin-top: 0; margin-bottom: 0; font-size: 1.5em; font-weight: 600; line-height: 1.2; }
p { margin-top: 0; margin-bottom: 0; font-size: 1.125em; }
@media screen and (max-width: 479px) { p { font-size: 1em; } }

/* ---------- heading scale (one set for every page) ---------- */
@media screen and (max-width: 991px) {
  h1 { font-size: 4.5em; }
  h2 { font-size: 3.25em; }
  h3 { font-size: 2.25em; }
}
@media screen and (max-width: 767px) {
  h1 { font-size: 3.5em; }
  h2 { font-size: 2.75em; }
  h3 { font-size: 2em; }
  h4 { font-size: 1.375em; }
}
@media screen and (max-width: 479px) {
  h1 { font-size: 2.75em; }
  h2 { font-size: 2.25em; }
  h3 { font-size: 1.75em; }
  h4 { font-size: 1.25em; }
}
.eyebrow-mono { opacity: 0.6; font-family: "JetBrains Mono"; }
::selection { background-color: var(--indigo-400); color: #FFF; }


/* ---------- your logo + container rules ---------- */
.logo-wrapper {
  position: absolute;
  inset: 0%;
  z-index: 5;
  padding-top: 2em;
  padding-left: 2em;
  pointer-events: none;
  color: var(--white);
}

@media screen and (max-width: 479px) {
  .logo-wrapper {
    padding-left: 1.5em;
  }
}

.logo-container {
  display: flex;
  width: 201px;
  height: 3.5em;
  justify-content: flex-start;
  align-items: center;
  pointer-events: auto;
}

@media screen and (max-width: 767px) {
  .logo-container {
    width: 201px;
  }
}

.site-logo {
  height: 3em;
  justify-content: flex-start;
  align-items: stretch;
}

@media screen and (max-width: 767px) {
  .site-logo {
    height: 3em;
  }
}

.container {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 1600px;
  padding: 6em 7.5em;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}

.container.hero-container {
  padding-top: 9.5em;
  gap: 3em;
}

/* MWK: tablet step so the sides shrink gradually (120 > 64 > 32 > 24px) */
@media screen and (max-width: 991px) {
  .container {
    padding: 5em 4em;
  }
}

@media screen and (max-width: 767px) {
  .container {
    padding: 4em 2em;
  }
}

@media screen and (max-width: 479px) {
  .container {
    padding-right: 1.5em;
    padding-left: 1.5em;
  }
}


.container.medium { max-width: 1440px; }
.site-logo{--la:currentColor;--lb:var(--indigo-400);width:auto;display:block}
.logo-container{width:201px;color:inherit}
.site-logo{height:3em}


body { overflow-x: clip; }
.eyebrow-mono { font-size: 16px; } /* MWK: a text div in your Webflow build, so 16px, not the 1.125em paragraph size */

/* ---------- lenis.css (1.3.17) ---------- */
html.lenis, html.lenis body { height: auto; }
html, body { overscroll-behavior-x: none; }
html { overflow-anchor: none; background: var(--indigo-800); }
body { background: var(--indigo-800); } main { background: var(--cream); } /* MWK: Safari colours the bounce from the body, so the body is indigo-800 too; the page itself keeps its cream base */ /* MWK: the colour you see when a phone bounces past the top or bottom: every page starts and ends on indigo-800, so the bounce matches (it showed the page's light background before) */ /* MWK: stops the browser nudging the scroll position when content changes on screen (it fought the smooth scroll on Tuition as the text swapped) */ /* MWK: a sideways trackpad or mouse swipe never sends the browser back a page */
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* ---------- sections ---------- */
.section { position: relative; display: block; }
.section.is--indigo-800 { background: var(--indigo-800); color: var(--white); }
.section.is--indigo-200 { background: var(--indigo-200); }
.section.is--indigo-100 { background: var(--indigo-100); }
.section.is--cream { background: var(--cream); }
.section.is--white { background: var(--white); }
.section > .container { margin: 0 auto; }