/* Variant F: a plain, professional page for universities and corporate partners */
:root {
  --bg: #ffffff;
  --tint: #f5f4f8;
  --ink: #15121c;
  --ink-2: #4a4556;
  --ink-3: #6e6879;
  --line: #e4e1ea;
  --violet: #4b1fd6;
  --violet-ink: #3a14b0;
  --dark: #17132a;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --r: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }
.kicker { margin-bottom: 14px; color: var(--violet); font-size: 14px; font-weight: 600; }
.lead { color: var(--ink-2); font-size: 19px; max-width: 34em; }
.prose { color: var(--ink-2); }
.prose p + p { margin-top: 1em; }
.h2-wide { max-width: 22em; margin-bottom: 44px; }
h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }
h3 { font-size: 20px; line-height: 1.3; }

/* buttons */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 8px; background: var(--violet); color: #fff; font-weight: 600; font-size: 16px; text-decoration: none; transition: background .2s; }
.btn:hover { background: var(--violet-ink); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { background: var(--tint); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 32px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; }
.brand img { width: 30px; height: auto; filter: brightness(0); }   /* the logo file is white */
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { color: var(--ink-2); font-size: 15px; font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--ink); }
.menu { display: none; }

/* hero */
.hero { padding: 72px 0 0; }
.hero__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 24px; }
.hero__img { margin: 0; }
.hero__img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.hero__img figcaption { margin-top: 10px; color: var(--ink-3); font-size: 14px; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); margin: 72px 0 0; border-top: 1px solid var(--line); }
.figures div { padding: 28px 24px 40px 0; }
.figures div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.figures dt { font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -.02em; }
.figures dd { margin: 4px 0 0; color: var(--ink-3); font-size: 15px; line-height: 1.45; }

/* sections */
.sec { padding: 104px 0; }
.sec--tint, .band { background: var(--tint); }
.band { padding: 88px 0; }
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.split h2 { margin-bottom: 20px; }

/* offer */
.aud { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.aud__card { padding: 36px; border: 1px solid var(--line); border-radius: var(--r); }
.aud__card h3 { margin-bottom: 20px; font-size: 22px; }
.aud__card ul { margin: 0; padding: 0; list-style: none; }
.aud__card li { padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.aud__card li b { color: var(--ink); font-weight: 600; }

/* process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { padding: 28px; background: #fff; border-radius: var(--r); }
.steps__n { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 20px; border-radius: 50%; background: var(--violet); color: #fff; font-weight: 700; font-size: 15px; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 16px; }

/* results */
.case { padding: 32px; border: 1px solid var(--line); border-radius: var(--r); }
.case__tag { margin-bottom: 8px; color: var(--ink-3); font-size: 14px; font-weight: 500; }
.case h3 { margin-bottom: 16px; font-size: 22px; }
.case--feature { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; margin-bottom: 24px; }
.case--feature img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.case--feature .case__body { padding: 40px; }
.case--feature .case__body > p:not(.case__tag) { color: var(--ink-2); }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stats { margin: 0; padding: 0; list-style: none; }
.stats li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 16px; }
.stats b { color: var(--ink); font-weight: 700; }
.case--feature .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0; }
.case--feature .stats li { border: 0; padding: 0; font-size: 15px; }
.case--feature .stats b { display: block; color: var(--violet); font-size: 28px; letter-spacing: -.02em; }
blockquote { margin: 0; padding-left: 16px; border-left: 3px solid var(--violet); color: var(--ink-2); font-size: 16px; }
blockquote cite { display: block; margin-top: 6px; color: var(--ink-3); font-size: 14px; font-style: normal; }
.case__note { margin-top: 14px; color: var(--ink-3); font-size: 14px; }

/* pipeline */
.pipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pipe--two { grid-template-columns: repeat(2, 1fr); }
.pipe.pipe--two img { aspect-ratio: 16 / 9; }
.case--light { background: #fff; border: 0; }
.case--light { grid-template-columns: 1fr; }
.case--light img { min-height: 0; height: auto; aspect-ratio: 1200 / 553; }   /* the whole team, uncropped */
.case--light .case__body { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 48px; grid-template-rows: auto auto 1fr auto; }
.case--light .case__body > :not(.stats):not(.case__people) { grid-column: 1; }
.case--light .stats { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: 1fr; margin: 0; }
.case--light .case__people { grid-column: 1 / -1; margin-top: 20px; }
.case__people { margin-top: 4px; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.pipe article { padding: 24px; background: #fff; border-radius: var(--r); }
.pipe img, .pipe__ph { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 20px; border-radius: 6px; object-fit: cover; background: var(--tint); }
.pipe__ph { display: grid; place-items: center; color: var(--ink-3); font-size: 15px; font-weight: 500; }
.pipe h3 { margin-bottom: 8px; }
.pipe article > p:last-child { color: var(--ink-2); font-size: 16px; }

/* community */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* vision and mission */
.band--dark { background: var(--dark); color: #fff; }
.band--dark .kicker { color: #b9a7ff; }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.vm p:not(.kicker) { font-size: 21px; line-height: 1.5; color: #e9e6f2; }

/* team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.team img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; margin-bottom: 18px; border-radius: var(--r); background: var(--tint); }
.team .role { margin: 2px 0 12px; color: var(--violet); font-size: 15px; font-weight: 600; }
.team article > p:last-child { color: var(--ink-2); font-size: 15px; }

/* contact */
.contact { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; }
.contact h2 { margin-bottom: 20px; }
.info { margin: 0; padding: 8px 32px; background: #fff; border-radius: var(--r); }
.info div { padding: 20px 0; }
.info div + div { border-top: 1px solid var(--line); }
.info dt { color: var(--ink-3); font-size: 14px; }
.info dd { margin: 2px 0 0; font-weight: 500; }
.info a { text-decoration: none; }
.info a:hover { color: var(--violet); text-decoration: underline; }

.foot { padding: 28px 0 80px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.foot__in { display: flex; justify-content: space-between; gap: 16px; }
.foot a { text-decoration: none; }


/* tablet */
@media (max-width: 1000px) {
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figures div:nth-child(3) { padding-left: 0; border-left: 0; }
  .figures div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cases, .pipe { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: repeat(2, 1fr); }
}

/* phone */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .top__in { gap: 12px; height: 60px; }
  .top .btn--sm { display: none; }
  .menu { display: grid; gap: 6px; margin-left: auto; width: 44px; height: 44px; place-content: center; border: 0; background: none; cursor: pointer; }
  .menu span { width: 22px; height: 2px; background: var(--ink); transition: transform .2s; }
  .is-open .menu span:first-child { transform: translateY(4px) rotate(45deg); }
  .is-open .menu span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 16px 16px; background: #fff; border-bottom: 1px solid var(--line); }
  .is-open .nav { display: flex; }
  .nav a { padding: 14px 0; font-size: 17px; border-top: 1px solid var(--line); }
  .nav a:first-child { border-top: 0; }

  .hero { padding-top: 40px; }
  .hero__in, .split, .contact, .vm, .aud, .case--feature { grid-template-columns: 1fr; gap: 32px; }
  .hero__img img { aspect-ratio: 4 / 3; }
  .lead { font-size: 17px; }
  .actions .btn { width: 100%; justify-content: center; }
  .figures { margin-top: 48px; }
  .figures div, .figures div + div { padding: 20px 12px 24px 0; }
  .figures div:nth-child(even) { padding-left: 12px; }
  .sec { padding: 72px 0; }
  .band { padding: 64px 0; }
  .h2-wide { margin-bottom: 32px; }
  .aud { gap: 16px; }
  .aud__card { padding: 24px; }
  .steps, .cases, .pipe, .team { grid-template-columns: 1fr; gap: 16px; }
  .case--feature { gap: 0; }
  .case--feature:not(.case--light) img { min-height: 0; aspect-ratio: 4 / 3; }
  .case--light .case__body { grid-template-columns: 1fr; }
  .case--light .stats { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; gap: 12px; margin: 24px 0 0; }
  .case--feature .case__body { padding: 24px; }
  .case--feature .stats { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .case--feature .stats b { font-size: 21px; }
  .case--feature .stats li { font-size: 14px; }
  .case:not(.case--feature) { padding: 24px; }
  .team { gap: 32px; }
  .team img { aspect-ratio: 4 / 3; }
  .vm p:not(.kicker) { font-size: 18px; }
  .info { padding: 4px 20px; }
  .foot { padding-bottom: 88px; }
}