/* ==========================================================================
   Questiverse Learning LLP
   The palette is taken from the three brands' own assets, not invented:
     #153D77 / #136AEF / #FA5305  all appear in the Eutopia, Skillozia and
     Skillesta wordmarks. Type is Poppins throughout.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink:        #0B1B33;
  --navy:       #153D77;
  --navy-deep:  #0E2A55;
  --blue:       #136AEF;
  --orange:     #FA5305;

  --paper:      #FFFFFF;
  --mist:       #EEF2F9;
  --mist-soft:  #F6F9FD;
  --line:       #D8E1EF;
  --slate:      #5A6C87;

  /* One family throughout. Poppins is geometric and round, so it takes much
     less negative tracking than a grotesque would — display sits at -.02em,
     and the small caps-style labels get positive tracking instead. */
  --display: "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --body:    "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --label:   "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --shell:   1180px;
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);

  --ease:    cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p  { margin: 0; }
ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff;
  padding: .75rem 1.15rem; z-index: 200;
  font: 500 .9rem/1 var(--body); border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; top: 0; }

/* ---------- shell ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- masthead mark ------------------------------------------------
   The real Questiverse wordmark, tagline removed — at masthead size the
   tagline would render about 4px tall and read as mush. The glyph standing
   in for the final "e" is scaled to 87% in the asset itself so it sits
   closer to the letter height. 32px here puts the letters at ~18px, just
   above the 15px nav text.
   The orange dot from the brand marks is still the page's one recurring
   ornament — it marks every section eyebrow.
   ------------------------------------------------------------------------ */
.mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.mark img { height: 32px; width: auto; }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.masthead.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 74px;
}
.masthead__nav {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem);
  font-size: .95rem; font-weight: 500;
}
.masthead__nav a { text-decoration: none; color: var(--slate); transition: color .2s var(--ease); }
.masthead__nav a:hover { color: var(--navy); }

.masthead__cta {
  color: var(--navy) !important;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .5rem 1.1rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.masthead__cta:hover { border-color: var(--navy); background: var(--mist-soft); }

/* ---------- shared bits ---------- */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--label);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1.6rem;
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); flex: none;
}
.eyebrow--invert { color: #9FB6D8; }

.section__title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.7vw, 3rem);
  letter-spacing: -.018em;
  line-height: 1.08;
  color: var(--navy);
}

.textlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .98rem;
  color: var(--blue); text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--blue) 35%, transparent);
  padding-bottom: 2px;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.textlink:hover { border-bottom-color: var(--blue); gap: .7rem; }

/* ==========================  HERO  ========================== */
.hero {
  padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(3.5rem, 8vw, 6.5rem);
  /* Plain white: the illustration has a flat white ground of its own, and a
     tinted radial would show a visible rectangle behind it. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
/* Single column by default. The hero figure, when present, promotes this to
   two columns — see "hero figure" below. */
.hero > .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.hero .eyebrow,
.hero__title,
.hero__body { grid-column: 1; }

.hero__title {
  font-family: var(--display);
  /* Capped so the longest forced line ("people who teach,") still fits
     column 1 on ONE visual line wherever the clipped line-mask is active
     (>=861px). Poppins sets much wider than a grotesque, so this ceiling is
     lower than it looks. See "hero figure" for the interaction. */
  font-size: clamp(2rem, 4.4vw, 3.9rem);
  font-weight: 600;
  letter-spacing: -.022em;
  /* Poppins carries taller ascenders/descenders than a grotesque, so the
     headline needs more leading than the 1.0 a tighter face would take. */
  line-height: 1.09;
  color: var(--navy);
  max-width: 17em;
}
/* Below the wide breakpoint the headline is one continuous flow — the forced
   breaks would wrap anyway and rag badly, so .line goes inline and nothing
   is clipped. The clipped line-mask is opted into at >=861px only (see
   MOTION), where each line is known to fit on one visual line. */
.hero__title .line,
.hero__title .line__in { display: inline; }
.hero__title em {
  font-style: normal;
  color: var(--blue);
}
.hero__dot,
.contact__dot { color: var(--orange); }

.hero__body {
  margin-top: clamp(1.75rem, 3.2vw, 2.6rem);
  max-width: 44ch;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;
}
.hero__body p { color: var(--slate); font-size: 1.09rem; }
.hero__body strong { font-weight: 600; color: var(--navy); }

/* ---------- hero figure ---------------------------------------------------
   The illustration is near-square, so it spans all three rows of the hero
   rather than sitting beside the paragraph. That narrows column 1, which is
   why the headline is broken into three short lines and capped at 3.9rem —
   each line must still fit column 1 on ONE visual line, or the clipped
   line-mask shears it. If you re-break the headline or resize the figure,
   re-check that. Two columns only above 1024px; below that it stacks. */
.hero__figure { margin: 0; }
.hero__figure img {
  width: 100%; height: auto;
  /* the artwork has its own flat white ground, so no container or crop */
}

@media (min-width: 1025px) {
  .hero > .shell:has(.hero__figure) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  }
  .hero__figure {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: end;
  }
}

/* ==========================  BRANDS  ========================== */
.brands {
  padding-block: clamp(3.75rem, 8.5vw, 7rem);
  background: var(--mist-soft);
  border-bottom: 1px solid var(--line);
}
.brands .section__title { max-width: 20ch; }

.brandlist {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex; flex-direction: column;
  gap: 0;
}

.brand {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 4.5vw, 4.5rem);
  padding-block: clamp(2.1rem, 4vw, 3.1rem);
  border-top: 1px solid var(--line);
}
.brand:last-child { border-bottom: 1px solid var(--line); }

.brand__id { padding-top: .35rem; }
.brand__logo { width: auto; }

/* Matched by X-HEIGHT, not by box height ----------------------------------
   All three are lowercase wordmarks, but their ink boxes enclose different
   things, so equal box heights read as unequal letters. Measured ratios of
   x-height to total ink height:

     eutopia    0.521   (its orange swoosh rises well above the ascenders)
     skillozia  0.674
     skillesta  0.756

   These heights put every x-height at ~19.5px:
     37 x 0.521 = 19.3  |  29 x 0.674 = 19.5  |  26 x 0.756 = 19.7

   Each source is also trimmed to its ink box so padding differences cannot
   skew the result, and each stays above 2x its display height:
     eutopia 589x169 · skillozia 657x135 · skillesta vector.
   If you swap a logo file, re-measure — don't reuse these numbers. */
.brand:nth-child(1) .brand__logo { height: 37px; }
.brand:nth-child(2) .brand__logo { height: 29px; }
.brand:nth-child(3) .brand__logo { height: 26px; }

.brand__role {
  font-family: var(--label);
  font-size: .715rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .7rem;
}
.brand__name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  letter-spacing: -.016em; line-height: 1.1;
  color: var(--navy);
  margin-bottom: .85rem;
}
.brand__desc {
  color: var(--slate);
  max-width: 58ch;
}
/* Capability lines. Set as a hairline-ruled two-column spec list rather than
   bullets — it reads as a datasheet, which is the register institutional
   buyers are reading in. No custom marker: the orange dot stays reserved for
   section eyebrows. */
.brand__points {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  max-width: 58ch;
}
.brand__points li {
  border-top: 1px solid var(--line);
  padding-block: .6rem;
  font-size: .925rem;
  line-height: 1.5;
  color: var(--slate);
}

.brand__links {
  margin-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .55rem;
}
.domain {
  font-family: var(--label);
  font-size: .82rem;
  text-decoration: none;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .42rem .95rem;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.domain::after { content: " ↗"; opacity: .45; }
.domain:hover {
  border-color: var(--blue); color: var(--blue);
  transform: translateY(-1px);
}

/* ==========================  COMPANY  ========================== */
.company { padding-block: clamp(3.75rem, 8.5vw, 7rem); }
.company__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.company__text { display: flex; flex-direction: column; gap: 1.25rem; }
.company__text p { color: var(--slate); }

.facts {
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.fact {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: 1rem;
  padding-block: .95rem;
  border-bottom: 1px solid var(--line);
}
.fact dt {
  font-family: var(--label);
  font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--slate);
  padding-top: .28rem;
}
.fact dd { font-weight: 500; color: var(--navy); }

/* ==========================  CONTACT  ========================== */
.contact {
  padding-block: clamp(3.75rem, 8.5vw, 7rem);
  background: var(--navy-deep);
  color: #EAF1FB;
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  column-gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.contact__title {
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -.018em; line-height: 1.04;
  color: #fff;
}
.contact__sub {
  margin-top: 1.4rem;
  max-width: 42ch;
  color: #A9C0E0;
}
.contact__actions {
  margin-top: 2.2rem;
  display: flex; flex-wrap: wrap; gap: .8rem;
}
.contact__note {
  margin-top: .9rem; min-height: 1.3em;
  font-family: var(--label); font-size: .78rem;
  color: #DCFF55;
}

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--body);
  font-size: .97rem; font-weight: 600;
  padding: .8rem 1.4rem;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: #E04A03; }
.btn--ghost {
  background: transparent; color: #EAF1FB;
  border-color: color-mix(in srgb, #EAF1FB 28%, transparent);
}
.btn--ghost:hover { border-color: #EAF1FB; background: rgba(255,255,255,.06); }

.contact__card {
  font-style: normal;
  background: color-mix(in srgb, #fff 6%, transparent);
  border: 1px solid color-mix(in srgb, #EAF1FB 15%, transparent);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.card__label {
  font-family: var(--label);
  font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: #8FA9CC;
  margin-bottom: .4rem;
}
.card__value {
  font-size: 1.02rem; font-weight: 500; color: #fff;
  margin-bottom: 1.5rem; word-break: break-word;
}
.card__value:last-child { margin-bottom: 0; }
.card__value a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.card__value a:hover { border-bottom-color: #fff; }
.card__value--addr { font-weight: 400; line-height: 1.6; color: #C9D9EE; font-size: .96rem; }

/* ==========================  FOOTER  ========================== */
/* The footer is light rather than dark ink so the Questiverse lockup can be
   used unmodified. Its wordmark is #004890, which scores only 1.91:1 against
   a #0B1B33 ground — below the 3:1 WCAG floor for graphics. On white it is
   fully legible and no reversed logo variant has to be invented. */
.foot {
  padding-block: 2.6rem;
  background: var(--paper);
  color: var(--slate);
  border-top: 1px solid var(--line);
}
.foot__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: 1.75rem;
}
.foot__logo { width: 178px; height: auto; }
.foot__legal {
  margin-top: .85rem;
  font-family: var(--label); font-size: .74rem; letter-spacing: .02em;
}
.foot__links {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  font-family: var(--label); font-size: .78rem;
}
.foot__links a {
  text-decoration: none; color: var(--slate);
  transition: color .2s var(--ease);
}
.foot__links a:hover { color: var(--navy); }

/* ==========================  MOTION  ==========================
   Reveals only apply once JS has confirmed it is running, so the page
   is fully legible with JavaScript disabled or broken.
   ============================================================== */
.js .js-reveal { opacity: 0; transform: translateY(14px); }
.js .js-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* Headline lines fade in at every width. */
.js .js-line { opacity: 0; }
.js .js-line.is-in { opacity: 1; transition: opacity .6s var(--ease); }

/* The clipped line-mask is a wide-viewport treatment only: it needs each
   .line to occupy exactly one visual line, which is only true once the
   headline stops wrapping.
   It is also observed on .js-line (the clipping parent) and never on
   .line__in — IntersectionObserver clips the intersection rect by ancestor
   overflow, so an element translated fully outside its clipping parent
   reports a ratio of 0 and would never reveal at all. */
@media (min-width: 861px) {
  .hero__title .line {
    display: block;
    overflow: hidden;
    padding-bottom: .18em;
    margin-bottom: -.18em;
  }
  .hero__title .line__in { display: block; }

  .js .js-line .line__in { transform: translateY(110%); }
  .js .js-line.is-in .line__in {
    transform: none;
    transition: transform .85s var(--ease);
  }
  .js .hero__title .line:nth-child(2).is-in .line__in { transition-delay: .08s; }
  .js .hero__title .line:nth-child(3).is-in .line__in { transition-delay: .16s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .js-reveal { opacity: 1 !important; transform: none !important; }
  .js .js-line { opacity: 1 !important; }
  .js .js-line .line__in { transform: none !important; }
  .btn:hover, .domain:hover { transform: none; }
}

/* ==========================  RESPONSIVE  ========================== */
@media (max-width: 960px) {
  .company__grid,
  .contact__grid { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
  .company__lead .section__title { max-width: 22ch; }
}

@media (max-width: 860px) {
  .hero__figure { margin-top: 2rem; }
  .brand { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem; }
  .brand__id { padding-top: 0; }
}

@media (max-width: 760px) {
  .brand__points { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .masthead__inner { height: 64px; }
  .masthead__nav { gap: .85rem; font-size: .88rem; }
  .masthead__cta { padding: .45rem .9rem; }
  .hero__title { letter-spacing: -.016em; }
  .fact { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding-block: .8rem; }
  .fact dt { padding-top: 0; }
  .foot__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .masthead__nav a:not(.masthead__cta) { display: none; }
}