/* ==========================================================================
   Design tokens + foundation (pasted verbatim from spec)
   ========================================================================== */
:root {
  --brand: #00404D;
  /* dark teal — brand */
  --brand-80: rgba(0, 64, 77, .80);
  --brand-85: rgba(0, 64, 77, .85);
  --heading: #014B64;
  /* large teal headings */
  --body: #00404D;
  /* text on light background */
  --accent: #01DC9A;
  /* green pill */
  --bg-light: #F0F4F5;
  /* light cards/sections */
  --bg-strip: #DAE3E6;
  /* category headers in "Our Brands" */
  --logo: #47757F;
  /* brand logo color (already baked into the SVG) */
  --white: #fff;
  --container: 1180px;
  --radius: 24px;
}

* {
  box-sizing: border-box
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

body {
  margin: 0;
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--body);
  background: #fff;
  line-height: 1.5
}

img,
svg {
  display: block;
  max-width: 100%
}

a {
  color: inherit;
  text-decoration: none
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px
}

.serif {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  /* serif lowercase has a smaller x-height — compensate with a slight size increase */
  font-size: 1.18em;
}

.serif-cta {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.28em;
}

/* Green pill button (Next Review / Explore About) */
.pill {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  padding: 32px 40px
}

/* ==========================================================================
   Unified arrow (.arw) — ONE shape + ONE hover mechanic for every button/link.
   Markup everywhere: viewBox 0 0 24 16, line M1 8H23 + 45° head at x23.
   Default = full-length arrow (matches Figma). Hover/focus = line grows
   rightward and the head shoots the same distance out to stay on the tip.
   Size + thickness are set per context below; colour is currentColor.
   ========================================================================== */
.arw {
  flex: none;
  height: auto;
  overflow: visible;                 /* head can extend past the box on hover */
}

.arw .arrow-line,
.arw .arrow-head {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke; /* thickness stays in px regardless of width */
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

.arw .arrow-line {
  transform-origin: 1px 8px;
}

/* Hover / focus: identical everywhere. Line is 22u long; +35% pushes its right
   end out by 7.7u, and the head translates the same 7.7u to follow the tip. */
.pill:hover .arrow-line, .pill:focus-visible .arrow-line,
.audience-link:hover .arrow-line, .audience-link:focus-visible .arrow-line,
.contact-option:hover .arrow-line, .contact-option:focus-visible .arrow-line,
.library-link:hover .arrow-line, .library-link:focus-visible .arrow-line,
.form-submit:hover .arrow-line, .form-submit:focus-visible .arrow-line {
  transform: scaleX(1.35);
}

.pill:hover .arrow-head, .pill:focus-visible .arrow-head,
.audience-link:hover .arrow-head, .audience-link:focus-visible .arrow-head,
.contact-option:hover .arrow-head, .contact-option:focus-visible .arrow-head,
.library-link:hover .arrow-head, .library-link:focus-visible .arrow-head,
.form-submit:hover .arrow-head, .form-submit:focus-visible .arrow-head {
  transform: translateX(7.7px);
}

/* Per-context size + thickness */
.pill .arw {
  width: 30px;
  stroke-width: 2.5;
}

/* ==========================================================================
   Generic helpers
   ========================================================================== */
/* overflow-x: clip (not hidden!) — hides horizontal overflow but does NOT create
   a scroll container; otherwise html and body both become overflow-y:auto and cause
   double scrolling with jitter when scrolling up and down */
html {
  overflow-x: clip;
  /* reserve vertical scrollbar space on every page so layout width (and the
     full-bleed hero-band, anchored right:0 to the viewport) is identical
     whether or not the page scrolls */
  scrollbar-gutter: stable
}

body {
  overflow-x: clip
}

.pill {
  border: 0;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  width: 100%
}

/* .pill hover intentionally does NOT change background — the arrow-lengthening
   effect above is the only hover feedback (see .pill .arrow-line / .arrow-head). */

section {
  position: relative
}

/* Background pattern: vector lines from Figma + radial fade (like the white radial-overlay in the mockup) */
.tile {
  position: absolute;
  width: 965px;
  height: 965px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

.tile img {
  width: 1826px;
  max-width: none
}

.tile-hero {
  top: 604px;
  right: -454px;
  z-index: 1
}

/* @929,604: extends from hero into Innovation */

/* Full-bleed sections need their inner .container flush with the 1166 box
   (no extra inner padding) so cards can align exactly to x137 / x1303. */
.hero .band-wrap,
.innovation .container,
.testimonial .container,
.brands .container,
.cta .container {
  padding: 0
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--brand-80);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 20;
  transition: transform .3s ease;
}

.site-header.is-hidden {
  transform: translateY(-100%)
}

.header-inner {
  /* header content spans the same 1180 guide as the hero card / full-bleed
     sections (box 1180 + 24px padding each side), so nav aligns with content */
  max-width: calc(var(--container) + 48px);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 48px;
}

.logo {
  flex: none
}

.logo-img {
  height: 28px;
  width: auto
}

.nav {
  flex: 1 1 auto;
  min-width: 0
}

.nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
}

.nav a {
  font: 400 16px/1.3 "Manrope", sans-serif;
  letter-spacing: .32px;
  color: #fff;
  white-space: nowrap;
  transition: opacity .15s ease;
}

.nav a:hover {
  opacity: .8
}

/* Burger + mobile nav panel (hidden unless mobile media query enables them) */
.burger {
  display: none;
  flex: none;
  width: 28px;
  height: 20px;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, width .2s ease;
}

.burger:not(.is-open) span:nth-child(3) {
  width: 66%
}

.burger.is-open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg)
}

.burger.is-open span:nth-child(2) {
  opacity: 0
}

.burger.is-open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg)
}

.mobile-nav {
  display: none
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  height: 791px
}

.hero-media {
  position: absolute;
  inset: 0;
  height: 791px;
  overflow: hidden;
  z-index: 0
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.band-wrap {
  position: absolute;
  bottom: 0;
  left: calc(50% - 590px);
  right: 0;
  z-index: 2;
}

.hero-band {
  display: flex;
  height: 323px
}

.hero-card {
  position: relative;
  width: 668px;
  flex: none;
  height: 323px;
  background: var(--brand-80);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 24px 0 24px 0;
  padding: 78px 44px 0 70px;
  color: #fff;
}

/* White "patch" in the bottom-right corner: paints the area OUTSIDE the radius arc,
   so the rounding reads on the dark photo (like the Subtract layer in Figma) */
.hero-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle 24px at 0 0, rgba(255, 255, 255, 0) 0 23px, #fff 23.5px);
}

.hero-title {
  margin: 0;
  font: 400 68px/75px "Manrope", sans-serif;
  max-width: 560px;
}

.hero-title .serif {
  font-size: 1.18em;
  line-height: 75px
}

.hero-panel {
  flex: 1 1 auto;
  min-width: 480px;
  height: 323px;
  background: #fff;
  padding: 90px 40px 0 92px;
}

.hero-text {
  margin: 0;
  max-width: 406px;
  font: 400 18px/29px "Manrope", sans-serif;
  color: var(--body);
}

/* ==========================================================================
   From Innovation
   ========================================================================== */
.innovation {
  position: relative;
  padding: 157px 0 0
}

.innovation .container {
  position: relative;
  z-index: 4
}

.glow {
  /* exact ellipse from Figma (#00A6B9 + blur), center @125,424 from the card corner, glowing from beneath it */
  position: absolute;
  left: 125px;
  top: 424px;
  width: 751px;
  max-width: none;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.innovation-card {
  position: relative;
  z-index: 1;
  min-height: 550px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-light) 0%, #fff 100%);
  padding: 51px 0 51px 70px;
}

.innovation-text {
  position: relative;
  z-index: 1;
  max-width: 520px;
  padding-top: 2px
}

.innovation-heading {
  margin: 0 0 26px;
  font: 400 50px/53px "Manrope", sans-serif;
  color: var(--heading);
}

.innovation-copy {
  margin: 0;
  max-width: 498px;
  font: 400 16px/26px "Manrope", sans-serif;
  color: var(--body);
}

.innovation-media {
  /* light box under the man: #F1F1F3, 498px, flush with the card; rounding only on the right */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 498px;
  background: #F1F1F3;
  border-radius: 0 var(--radius) var(--radius) 0;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.archer-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom
}

.ata-badge {
  position: absolute;
  left: 644px;
  bottom: 52px;
  width: 108px;
  height: 108px;
  z-index: 3
}

/* ==========================================================================
   Testimonial
   ========================================================================== */
.testimonial {
  position: relative;
  background: #fff;
  overflow: visible
}

.testimonial::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--gray-h, 614px);
  background: var(--bg-light);
  z-index: 0;
  transition: height .25s ease
}

.testimonial .container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 173px 0 104px
}

.testimonial-card {
  width: 598px;
  flex: none;
  position: relative;
  z-index: 2;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.testimonial-top {
  background: var(--brand);
  padding: 70px
}

.testimonial-quote {
  margin: 0 0 40px;
  max-width: 458px;
  font: italic 400 20px/30px "Inter", sans-serif;
  color: rgba(255, 255, 255, .9);
}

.testimonial-name {
  margin: 0 0 6px;
  font: 500 42px/55px "Manrope", sans-serif;
  color: #fff;
}

.testimonial-role {
  margin: 0;
  font: 600 14px/1.4 "Manrope", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.12px;
  color: rgba(255, 255, 255, .7);
}

.testimonial-pill {
  border-radius: 0 0 var(--radius) var(--radius)
}

/* Review carousel: smooth fade + slight rise when text swaps (desktop + mobile) */
.testimonial-quote,
.testimonial-name,
.testimonial-role {
  transition: opacity .2s ease, transform .2s ease
}

.testimonial-top.is-swapping .testimonial-quote,
.testimonial-top.is-swapping .testimonial-name,
.testimonial-top.is-swapping .testimonial-role {
  opacity: 0;
  transform: translateY(8px)
}

.testimonial-photo {
  position: absolute;
  right: 0;
  top: -47px;
  height: 662px;
  width: auto;
  z-index: 1;
}

/* ==========================================================================
   Our Brands
   ========================================================================== */
.brands {
  position: relative;
  padding: 60px 0 145px
}

.brands .container {
  position: relative;
  z-index: 1
}

.brands-title {
  margin: 40px 0 52px 58px;
  font: 400 50px/53px "Manrope", sans-serif;
  color: var(--heading);
}

.brand-category {
  margin-bottom: 50px
}

.brand-category:last-child {
  margin-bottom: 0
}

.brand-category-head {
  height: 78px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-strip);
  display: flex;
  align-items: center;
  padding-left: 61px;
  font: 700 18px/25px "Manrope", sans-serif;
  text-transform: uppercase;
  letter-spacing: .72px;
  color: var(--body);
}

.brand-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg-light);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.brand-row {
  display: grid;
  grid-template-columns: 365px 524px 1fr;
  align-items: center;
  min-height: 112px;
  padding: 16px 40px 16px 0;
  border-bottom: 1px solid rgba(0, 64, 77, .08);
}

.brand-rows li:last-child .brand-row {
  border-bottom: none
}

.brand-logo {
  display: flex;
  align-items: center;
  padding-left: 70px;
}

.brand-logo img {
  width: auto;
  height: auto
}

.brand-desc {
  margin: 0;
  max-width: 400px;
  font: 400 16px/26px "Manrope", sans-serif;
  color: var(--body);
}

.brand-link {
  font: 400 16px/26px "Manrope", sans-serif;
  letter-spacing: .32px;
  color: var(--body);
}

.brand-link:hover {
  text-decoration: underline
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta {
  padding-bottom: 110px
}

.cta-media {
  height: 665px;
  overflow: hidden
}

.cta-media picture {
  display: block;
  width: 100%;
  height: 100%
}

.cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.cta-row {
  display: flex;
  justify-content: flex-end
}

.cta-card {
  position: relative;
  z-index: 2;
  width: 572px;
  margin-top: -318px;
  display: flex;
  flex-direction: column;
}

.cta-top {
  min-height: 318px;
  background: var(--brand-85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 54px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-heading {
  margin: 0 0 24px;
  font: 400 46px/49px "Manrope", sans-serif;
}

.cta-copy {
  margin: 0;
  max-width: 457px;
  font: 400 18px/29px "Manrope", sans-serif;
}

.cta-pill {
  border-radius: 0 0 var(--radius) var(--radius)
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--brand)
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 45px;
  padding-bottom: 40px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap
}

.footer-logo {
  height: 32px;
  width: auto
}

.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  margin: 0;
  padding: 0;
}

.footer-links a {
  font: 400 16px/1.3 "Manrope", sans-serif;
  letter-spacing: .32px;
  color: #fff;
}

.footer-links a:hover {
  opacity: .8
}

.footer-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  /* margin-left:auto pushes the language switcher + social block to the right */
}

.footer-lang-globe {
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, .5);
  flex: none;
}

.footer-lang-link {
  font: 600 13px/1 "Manrope", sans-serif;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .5);
  transition: color .15s ease;
}

.footer-lang-link:hover,
.footer-lang-link:focus-visible {
  color: #fff;
}

.footer-lang-link.is-active {
  color: #fff;
}

.footer-lang-divider {
  color: rgba(255, 255, 255, .28);
  font-size: 11px;
}

/* a vertical rule sets the language switcher apart from the social buttons */
.footer-social {
  display: flex;
  gap: 12px;
  margin-left: 14px;
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.social-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .15s ease;
}

.social-btn svg {
  width: 17px;
  height: 17px
}

.social-btn:hover {
  background: rgba(255, 255, 255, .22)
}

.footer-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin: 0;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 26px 0 32px;
}

.footer-copyright {
  margin: 0;
  font: 400 14px/21px "DM Sans", sans-serif;
  color: rgba(255, 255, 255, .75);
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.footer-bottom-right a {
  font: 400 14px/21px "DM Sans", sans-serif;
  color: rgba(255, 255, 255, .6);
}

.footer-bottom-right a:hover {
  color: #fff
}

.scroll-top {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background .15s ease;
}

.scroll-top svg {
  width: 12px;
  height: 12px
}

.scroll-top:hover {
  background: rgba(255, 255, 255, .22)
}

/* ==========================================================================
   ABOUT PAGE — desktop (reuses hero / cta / header / footer / glow / tile / pill)
   ========================================================================== */

/* active menu item (current page) */
.nav a[aria-current="page"] {
  position: relative
}

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: #fff;
}

/* ---------- Zetech ecosystem (clone of Innovation without the badge) ---------- */
.ecosystem {
  position: relative;
  padding: 157px 0 148px
}

.ecosystem .container {
  position: relative;
  z-index: 4;
  padding: 0
}

.ecosystem-card {
  position: relative;
  z-index: 1;
  min-height: 550px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-light) 0%, #fff 100%);
  padding: 51px 0 51px 70px;
}

.ecosystem-text {
  position: relative;
  z-index: 1;
  max-width: 498px
}

.ecosystem-heading {
  margin: 0 0 26px;
  font: 400 50px/53px "Manrope", sans-serif;
  color: var(--heading);
}

.ecosystem-copy {
  margin: 0;
  max-width: 498px;
  font: 400 16px/26px "Manrope", sans-serif;
  color: var(--body);
}

.ecosystem-copy+.ecosystem-copy {
  margin-top: 20px
}

.ecosystem-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 498px;
  border-radius: 0 var(--radius) var(--radius) 0;
  overflow: hidden;
  z-index: 1;
}

.ecosystem-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Mission / Vision (dark teal section) ---------- */
.mv {
  position: relative;
  background: var(--brand);
}

.mv-inner {
  position: relative;
  height: 712px;
  padding: 0;
}

.mv-media {
  position: absolute;
  left: 0;
  top: 138px;
  width: 568px;
  height: 673px;
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 2;
}

.mv-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-text {
  position: absolute;
  left: 676px;
  top: 162px;
  width: 453px;
  z-index: 1;
}

.mv-block+.mv-block {
  margin-top: 69px
}

.mv-heading {
  margin: 0 0 20px;
  font: 400 41px/43px "Manrope", sans-serif;
  color: #fff;
}

.mv-copy {
  margin: 0;
  max-width: 453px;
  font: 400 16px/26px "Manrope", sans-serif;
  color: #fff;
}

/* ---------- Peter Drucker quote ---------- */
.drucker {
  position: relative;
  margin-top: 219px;
  background: var(--bg-light);
}

.drucker-inner {
  position: relative;
  height: 501px;
  padding: 0;
}

.drucker-quote {
  position: absolute;
  left: 0;
  top: 117px;
  max-width: 718px;
  margin: 0;
}

.drucker-text {
  margin: 0 0 34px;
  font: italic 400 32px/43px "Source Serif 4", Georgia, serif;
  color: var(--body);
}

.drucker-cite {
  display: block;
  font: 600 14px/22px "Manrope", sans-serif;
  font-style: normal;
  color: rgba(0, 64, 77, .7);
}

.drucker-photo {
  position: absolute;
  right: 0;
  top: 117px;
  width: 368px;
  height: 465px;
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 2;
}

.drucker-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Our Values and Philosophy ---------- */
.values {
  position: relative;
  margin-top: 194px;
  padding-bottom: 142px;
}

.values .container {
  position: relative;
  z-index: 1;
  padding: 0;
}

.values-card {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-light) 0%, #fff 100%);
  padding: 56px 70px 82px;
}

.values-heading {
  margin: 0 0 40px;
  font: 400 50px/55px "Manrope", sans-serif;
  color: var(--heading);
  max-width: 620px;
}

.values-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
}

.values-copy {
  margin: 0;
  font: 400 16px/26px "Manrope", sans-serif;
  color: var(--body);
}

/* ==========================================================================
   OUR MODEL PAGE — desktop (reuses hero / cta / header / footer / pill / serif / tile)
   ========================================================================== */

.model .hero-panel {
  padding: 64px 40px 0 92px;
}

.model .hero-text {
  max-width: 421px;
}

/* ---------- How it works (icon grid) ---------- */
.works {
  position: relative;
  padding: 141px 0 159px;
  overflow: hidden;
}

.works .container {
  position: relative;
  z-index: 1;
}

.tile-works {
  top: -187px;
  right: -454px;
  z-index: 0;
}

.works-heading {
  margin: 0 0 59px;
  font: 400 50px/53px "Manrope", sans-serif;
  color: var(--heading);
}

.works-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 56px;
  align-items: start;
}

.work {
  max-width: 530px;
}

.work-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 14px;
}

.work-title {
  margin: 0 0 14px;
  font: 500 24px/34px "Manrope", sans-serif;
  color: var(--brand);
}

.work-copy {
  margin: 0;
  font: 400 16px/26px "Manrope", sans-serif;
  color: var(--body);
}

/* ---------- Leader and Team (dark teal band, image overhangs bottom) ---------- */
.leader {
  position: relative;
  background: var(--brand);
  height: 612px;
}

.leader-inner {
  position: relative;
  height: 612px;
  padding: 0;
}

.leader-text {
  position: absolute;
  left: 0;
  top: 160px;
  width: 498px;
}

.leader-heading {
  margin: 0 0 39px;
  font: 400 50px/53px "Manrope", sans-serif;
  color: #fff;
}

.leader-copy {
  margin: 0;
  font: 400 16px/26px "Manrope", sans-serif;
  color: rgba(255, 255, 255, .9);
}

.leader-media {
  position: absolute;
  right: 0;
  top: 138px;
  width: 568px;
  height: 574px;
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 2;
}

.leader-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Feature rows (alternating image / text) ---------- */
.rows {
  padding: 213px 0 164px;
}

.feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 99px;
}

.feature-row.reverse {
  flex-direction: row-reverse;
}

.feature-row+.feature-row {
  margin-top: 133px;
}

.feature-media {
  flex: none;
  width: 535px;
  height: 503px;
  border-radius: var(--radius);
  overflow: hidden;
}

.feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-text {
  flex: 1 1 auto;
  max-width: 498px;
}

.feature-heading {
  margin: 0 0 24px;
  font: 400 50px/55px "Manrope", sans-serif;
  color: var(--heading);
}

.feature-copy {
  margin: 0;
  font: 400 16px/26px "Manrope", sans-serif;
  color: var(--body);
}

/* ---------- Frederic Laloux quote (light band, photo overhangs bottom) ---------- */
.quote {
  position: relative;
  background: var(--bg-light);
  height: 501px;
  margin-bottom: 214px;
}

.quote-inner {
  position: relative;
  height: 501px;
  padding: 0;
}

.quote-block {
  position: absolute;
  left: 0;
  top: 104px;
  max-width: 698px;
  margin: 0;
}

.quote-text {
  margin: 0 0 34px;
  font: italic 400 30px/41px "Source Serif 4", Georgia, serif;
  color: var(--body);
}

.quote-cite {
  display: block;
  font: 600 14px/22px "Manrope", sans-serif;
  font-style: normal;
  letter-spacing: .98px;
  color: rgba(0, 64, 77, .7);
}

.quote-photo {
  position: absolute;
  right: 0;
  top: 117px;
  width: 368px;
  height: 465px;
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 2;
}

.quote-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   BRANDS & VENTURES PAGE — desktop (reuses hero / quote / cta / header / footer)
   ========================================================================== */

/* ---------- Portfolio grid (categories of brand cards) ---------- */
.portfolio {
  padding: 149px 0 134px;
}

.cat+.cat {
  margin-top: 90px;
}

.cat-title {
  margin: 0 0 48px;
  font: 400 50px/53px "Manrope", sans-serif;
  color: var(--heading);
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 40px;
  align-items: start;
}

.brand-card-img {
  width: 100%;
  aspect-ratio: 374 / 268;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.brand-card-desc {
  margin: 20px 0 0;
  max-width: 374px;
  font: 400 15px/24px "Manrope", sans-serif;
  color: var(--body);
}

/* ---------- Quote: photo-left variant (Gary Hamel) ---------- */
.quote-inner.reverse .quote-block {
  left: auto;
  right: 0;
}

.quote-inner.reverse .quote-photo {
  right: auto;
  left: 0;
}

/* Homepage quote — shared quote block, but with the homepage's own Figma sizes:
   taller photo (369x547, full portrait — same aspect as the source, so no crop),
   100px of gray band above and below the text, photo overhanging the band bottom. */
@media (min-width: 1201px) {
  .home .quote {
    height: auto;
    padding: 100px 0;
    margin-bottom: 198px;
  }

  .home .quote-inner {
    height: auto;
  }

  .home .quote-block {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    max-width: 698px;
    margin: 0 0 0 auto;
  }

  .home .quote-photo {
    top: 0;
    width: 369px;
    height: 547px;
  }

  .home .quote-text {
    margin: 0 0 36px;
    font-size: 24px;
    line-height: 33px;
  }

  .home .quote-name {
    margin: 0 0 12px;
    font: 500 30px/40px "Manrope", sans-serif;
    color: var(--brand);
  }

  .home .quote-role {
    margin: 0;
    font: 600 14px/22px "Manrope", sans-serif;
    letter-spacing: .98px;
    text-transform: uppercase;
    color: rgba(0, 64, 77, .6);
  }
}

/* ==========================================================================
   CULTURE & TEAM PAGE — desktop
   ========================================================================== */

/* Intro card is the same 550px glow-card used on About, with a slightly
   shorter trailing gap so the dark band starts at the Figma coordinate. */
.culture .culture-intro {
  padding-bottom: 135px;
}

.culture .culture-intro .ecosystem-heading {
  max-width: 498px;
}

.culture .culture-title-line {
  white-space: nowrap;
}

.culture .culture-intro .ecosystem-heading .serif {
  font-size: 1em;
}

/* Dark practice band: About's image-left pattern, with homepage heading size. */
.culture .culture-practice .mv-text {
  left: 675px;
  top: 152px;
  width: 428px;
}

.culture .culture-practice .mv-heading {
  margin: 0 0 30px;
  font: 400 50px/55px "Manrope", sans-serif;
}

.culture .culture-practice .mv-copy {
  max-width: 428px;
  color: rgba(255, 255, 255, .9);
}

/* One alternating row; its bottom gap lands the quote band at y=3199. */
.culture .culture-values {
  padding-bottom: 138px;
}

.culture .quote-block {
  top: 117px;
}

.culture .quote-text {
  margin-bottom: 42px;
}

.culture .quote {
  margin-bottom: 218px;
}

.culture .cta {
  padding-bottom: 111px;
}

.culture .site-footer {
  min-height: 229px;
}

.culture .cta-copy {
  max-width: 468px;
}

/* ==========================================================================
   LAUNCH PLATFORM PAGE — desktop
   ========================================================================== */

.launch .launch-intro {
  padding-bottom: 135px;
}

.launch .launch-intro .ecosystem-copy {
  max-width: 498px;
  font: 400 18px/29px "Manrope", sans-serif;
}

.launch .launch-practice .mv-text {
  left: 675px;
  top: 152px;
  width: 428px;
}

.launch .launch-practice .mv-heading {
  margin: 0 0 29px;
  font: 400 46px/50px "Manrope", sans-serif;
}

.launch .launch-practice .mv-copy {
  max-width: 428px;
  color: rgba(255, 255, 255, .9);
}

.launch .launch-offers {
  padding-bottom: 115px;
}

.launch .launch-offers .feature-heading {
  max-width: 411px;
  margin-bottom: 30px;
}

.launch-audience {
  padding: 0 0 173px;
}

.launch-audience .container {
  padding: 0;
}

.audience-heading {
  margin: 0 0 51px;
  font: 400 50px/60px "Manrope", sans-serif;
  color: var(--heading);
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.audience-card {
  min-height: 212px;
  display: flex;
  flex-direction: column;
}

.audience-title {
  margin: 0 0 20px;
  font: 400 28px/36px "Manrope", sans-serif;
  color: var(--heading);
}

.audience-copy {
  margin: 0;
  font: 400 16px/26px "Manrope", sans-serif;
  color: var(--body);
}

.audience-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  margin-top: 23px;
  font: 400 18px/29px "Manrope", sans-serif;
  color: var(--body);
}

.audience-link .arw {
  width: 22px;
  color: var(--accent);
  stroke-width: 1.8;
}

.launch .quote-block {
  top: 117px;
}

.launch .quote-text {
  margin-bottom: 42px;
}

.launch .quote-cite {
  text-transform: uppercase;
}

.launch .quote {
  margin-bottom: 218px;
}

.launch .cta {
  padding-bottom: 110px;
}

.launch .cta-heading {
  font: 400 36px/45px "Manrope", sans-serif;
}

.cta-heading-mobile {
  display: none;
}

.launch .cta-pill {
  min-height: 99px;
}

.launch .cta-copy {
  max-width: 457px;
}

.launch .site-footer {
  min-height: 230px;
}

/* ==========================================================================
   COMPANY-UNIVERSITY PAGE — desktop
   ========================================================================== */

.university .band-wrap {
  left: calc(50% - 583px);
}

.university .hero-card {
  padding-top: 59px;
}

.university .hero-title {
  max-width: 498px;
  font: 400 54px/66px "Manrope", sans-serif;
}

.university .hero-title .serif {
  line-height: 59px;
}

.university .hero-text {
  font: 400 16px/26px "Manrope", sans-serif;
}

.university-important .container,
.university-meaning .mv-inner,
.mentorship .container {
  max-width: 1166px;
}

.university-important .ecosystem-card {
  padding-top: 111px;
}

.university-important .ecosystem-heading {
  margin-bottom: 39px;
}

.university-important .ecosystem-copy {
  color: rgba(0, 64, 77, .9);
}

.university-meaning .mv-media {
  top: 139px;
  height: 672px;
}

.university-meaning .mv-text {
  left: 668px;
  top: 152px;
  width: 391px;
}

.university-meaning .mv-heading {
  margin-bottom: 36px;
  font: 400 41px/43px "Manrope", sans-serif;
}

.university-meaning .mv-copy {
  max-width: 391px;
  color: rgba(255, 255, 255, .9);
}

.mentorship {
  padding: 209px 0 145px;
}

.mentorship .container {
  position: relative;
  padding: 0;
}

.mentorship-card {
  position: relative;
  z-index: 1;
  min-height: 584px;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-light) 0%, #fff 100%);
}

.mentorship-glow {
  position: absolute;
  left: 125px;
  top: 459px;
  width: 751px;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.mentorship-text {
  position: absolute;
  left: 70px;
  top: 107px;
  width: 498px;
  z-index: 1;
}

.mentorship-heading {
  margin: 0 0 40px;
  font: 400 50px/53px "Manrope", sans-serif;
  color: var(--heading);
}

.mentorship-copy {
  width: 464px;
  margin: 0;
  font: 400 16px/26px "Manrope", sans-serif;
  color: rgba(0, 64, 77, .9);
}

.mentorship-diagram {
  position: absolute;
  right: 70px;
  top: 102px;
  width: 453px;
  height: 369px;
  z-index: 1;
}

.university-library {
  height: 613px;
  overflow: hidden;
}

.library-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.library-inner {
  position: relative;
  height: 100%;
  max-width: 1166px;
}

.library-card {
  position: absolute;
  left: 0;
  top: 178px;
  width: 486px;
}

.library-heading {
  margin: 0 0 37px;
  font: 400 46px/50px "Manrope", sans-serif;
  color: #fff;
}

.library-copy {
  margin: 0;
  font: 400 16px/26px "Manrope", sans-serif;
  color: #fff;
}

.library-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 217px;
  height: 54px;
  margin: 30px 0 0;
  padding: 0 20px;
  border-radius: 7px;
  background: var(--accent);
  font: 700 16px/23px "Manrope", sans-serif;
  color: var(--body);
}

.library-link .arw {
  width: 22px;
  color: #000;
  stroke-width: 1.8;
}

.university-quote {
  margin-bottom: 198px;
}

.university-quote .quote-block {
  top: 117px;
}

.university-quote .quote-text {
  margin-bottom: 42px;
  font: italic 400 32px/43px "Source Serif 4", Georgia, serif;
}

.university-quote .quote-cite {
  text-transform: uppercase;
}

.university-cta {
  padding-bottom: 110px;
}

.university-cta .cta-card {
  margin-top: -317px;
}

.university-cta .cta-heading {
  margin-bottom: 21px;
  font: 400 51px/58px "Manrope", sans-serif;
}

.university-cta .cta-top {
  min-height: 317px;
  padding: 58px 54px 0;
  justify-content: flex-start;
}

.university-cta .cta-pill {
  min-height: 100px;
}

.university .site-footer {
  min-height: 229px;
}

/* ==========================================================================
   CONTACT PAGE — desktop
   ========================================================================== */
.contact-main {
  position: relative;
  height: 1019px;
  overflow: hidden;
}

.contact-main::after {
  content: "";
  position: absolute;
  right: -454px;
  top: 604px;
  z-index: 0;
  width: 965px;
  height: 965px;
  background: url("assets/pattern-lines.png") 0 0 / 913px auto no-repeat;
  opacity: .18;
  -webkit-mask-image: radial-gradient(circle closest-side, #000, transparent);
  mask-image: radial-gradient(circle closest-side, #000, transparent);
  pointer-events: none;
}

.contact-stage {
  position: relative;
  z-index: 1;
  height: 791px;
}

.contact-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-band {
  position: absolute;
  left: calc(50% - 583px);
  right: 0;
  top: 468px;
  height: 323px;
  display: grid;
  grid-template-columns: 668px minmax(0, 1fr);
}

.contact-title-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 323px;
  padding: 0 70px;
  border-top-left-radius: 24px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 0;
  background: rgba(0, 64, 77, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* White "patch" in the bottom-right corner (same as .hero-card): paints the
   area OUTSIDE the radius arc white so the rounding reads on the dark photo */
.contact-title-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle 24px at 0 0, rgba(255, 255, 255, 0) 0 23px, #fff 23.5px);
}

.contact-title {
  margin: 0;
  font: 400 54px/62px "Manrope", sans-serif;
  color: #fff;
}

.contact-title .serif {
  font-size: 1.18em;
}

.contact-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  height: 323px;
  padding: 70px 32px 30px 92px;
  background: #fff;
}

.contact-option {
  display: flex;
  align-items: center;
  gap: 17px;
  width: max-content;
  max-width: 100%;
  min-height: 38px;
  font: 500 20px/32px "Manrope", sans-serif;
  color: var(--body);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

/* Hover: the whole row slides right together with the lengthening arrow (Figma) */
.contact-option:hover,
.contact-option:focus-visible {
  transform: translateX(12px);
}

.contact-option .arw {
  width: 22px;
  color: var(--accent);
  stroke-width: 1.8;
}

.contact-page .site-footer {
  min-height: 229px;
}

/* Contact forms */
.contact-dialog {
  position: absolute;
  inset: 0;
  width: min(794px, calc(100% - 40px));
  min-height: 811px;
  max-height: none;
  margin: clamp(48px, 11.4vh, 142px) auto auto;
  padding: 60px 74px 74px;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: var(--body);
  box-shadow: 0 18px 70px rgba(0, 64, 77, .16);
}

.contact-dialog::backdrop {
  background: rgba(0, 64, 77, .1);
}

.dialog-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 64, 77, .08);
  outline: 0;
  cursor: pointer;
  transition: background .2s ease;
}

.dialog-close:hover,
.dialog-close:focus-visible {
  background: rgba(0, 64, 77, .16);
}

.dialog-close span {
  position: absolute;
  left: 11px;
  top: 19px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--body);
}

.dialog-close span:first-child {
  transform: rotate(45deg);
}

.dialog-close span:last-child {
  transform: rotate(-45deg);
}

.dialog-title {
  margin: 0 0 35px;
  font: 400 40px/48px "Manrope", sans-serif;
  color: var(--body);
}

.form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 35px;
  row-gap: 24px;
}

.form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
  font: 400 18px/22px "Manrope", sans-serif;
  color: var(--body);
}

.form-field-wide {
  grid-column: 1 / -1;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 7px;
  outline: 0;
  background: rgba(0, 64, 77, .08);
  color: var(--body);
  font: 400 18px/26px "Manrope", sans-serif;
  transition: border-color .2s ease, background .2s ease;
}

.form-field input {
  height: 53px;
  padding: 0 14px;
}

.form-field textarea {
  height: 145px;
  padding: 12px 14px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--accent);
  background: rgba(0, 64, 77, .055);
}

.form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 150px;
  height: 56px;
  margin-top: 34px;
  padding: 0 28px;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font: 700 18px/26px "Manrope", sans-serif;
  letter-spacing: .18px;
  cursor: pointer;
  transition: background .2s ease;
}

.form-submit .arw {
  width: 24px;
  stroke-width: 2;
}

.form-status {
  min-height: 24px;
  margin: 14px 0 0;
  font: 400 14px/21px "Manrope", sans-serif;
  color: var(--body);
}

.form-status:empty {
  display: none;
}

/* ==========================================================================
   CAREERS PAGE — desktop
   ========================================================================== */
.careers-hero {
  height: 515px;
  overflow: hidden;
}

.careers-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.careers-hero-inner,
.careers-container,
.career-general-inner {
  max-width: 1201px;
  padding: 0;
}

.careers-hero-inner {
  position: relative;
  height: 100%;
  padding-top: 190px;
}

.careers-hero-title {
  margin: 0;
  font: 400 60px/66px "Manrope", sans-serif;
  color: #fff;
}

.careers-hero-copy {
  width: 530px;
  margin: 38px 0 0;
  font: 400 18px/29px "Manrope", sans-serif;
  color: rgba(255, 255, 255, .9);
}

.careers-positions {
  height: 929px;
  padding-top: 77px;
}

.careers-section-title {
  margin: 0 0 47px;
  font: 400 49px/52px "Manrope", sans-serif;
  color: var(--heading);
}

.vacancy-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.vacancy-card {
  position: relative;
  height: 305px;
  padding: 42px 60px;
  border-radius: 24px;
  background: var(--bg-light);
}

.vacancy-title {
  margin: 0;
  font: 500 30px/36px "Manrope", sans-serif;
  color: var(--body);
}

.vacancy-meta {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 24px;
  margin-top: 22px;
  font: 400 20px/24px "Manrope", sans-serif;
  color: var(--body);
}

.vacancy-location {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.vacancy-location svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: #00A6B9;
}

.vacancy-divider {
  opacity: .3;
}

.vacancy-copy {
  width: 802px;
  margin: 23px 0 0;
  font: 400 18px/27px "Manrope", sans-serif;
  color: var(--body);
}

.vacancy-apply {
  position: absolute;
  right: 60px;
  bottom: 57px;
  width: 133px;
  height: 49px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font: 700 15px/22px "Manrope", sans-serif;
  letter-spacing: .15px;
  cursor: pointer;
  transition: background .2s ease;
}

.vacancy-apply:hover,
.vacancy-apply:focus-visible {
  background: #00c98a;
}

.career-general {
  height: 642px;
}

.career-general-inner {
  display: grid;
  grid-template-columns: 489px 647px;
  column-gap: 65px;
  align-items: start;
}

.career-general-intro h2 {
  margin: 0 0 25px;
  font: 400 40px/48px "Manrope", sans-serif;
  color: var(--body);
}

.career-general-intro p {
  width: 489px;
  margin: 0;
  font: 400 18px/29px "Manrope", sans-serif;
  color: rgba(0, 64, 77, .9);
}

.career-general-form {
  margin-top: 6px;
}

.career-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 35px;
  row-gap: 27px;
}

.career-form-grid .form-field {
  gap: 11px;
}

.career-file-field {
  position: relative;
}

.career-file-input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}

.career-file-control {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 53px;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 7px;
  background: rgba(0, 64, 77, .08);
  color: var(--body);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.career-file-control svg {
  flex: none;
  width: 21px;
  height: 21px;
  color: var(--accent);
}

.career-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 14px/20px "Manrope", sans-serif;
}

.career-file-field:focus-within .career-file-control,
.career-file-field:hover .career-file-control {
  border-color: var(--accent);
  background: rgba(0, 64, 77, .055);
}

.career-general-submit {
  margin-top: 24px;
}

.careers-page .site-footer {
  min-height: 229px;
}

.career-dialog {
  min-height: 0;
}

.career-dialog .dialog-title {
  margin-bottom: 8px;
}

.career-dialog-vacancy {
  margin: 0 0 28px;
  font: 500 20px/29px "Manrope", sans-serif;
  color: rgba(0, 64, 77, .8);
}

/* ==========================================================================
   SOURCES OF KNOWLEDGE — desktop
   ========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.knowledge-panel[hidden] {
  display: none !important;
}

.knowledge-hero {
  height: 515px;
  overflow: hidden;
  color: #fff;
  background: var(--brand);
}

.knowledge-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knowledge-hero-inner,
.knowledge-container {
  max-width: 1248px;
}

.knowledge-hero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding-top: 200px;
}

.knowledge-hero-title {
  margin: 0;
  color: #fff;
  font: 400 60px/66px "Manrope", sans-serif;
  letter-spacing: -.9px;
}

.knowledge-hero-title .serif {
  font-size: 1em;
}

.knowledge-hero-copy {
  margin: 38px 0 0;
  color: #fff;
  font: 400 18px/29px "Manrope", sans-serif;
}

.knowledge-library {
  background: #fff;
}

.knowledge-layout {
  display: grid;
  grid-template-columns: 334px minmax(0, 807px);
  gap: 59px;
  align-items: start;
  padding-top: 100px;
}

.knowledge-mobile-control {
  display: none;
}

.knowledge-tabs {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 7px;
}

.knowledge-tabs button {
  position: relative;
  width: 359px;
  height: 64px;
  margin-left: -15px;
  padding: 0 15px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--body);
  text-align: left;
  font: 400 18px/31px "Manrope", sans-serif;
  cursor: pointer;
  transition: background-color .2s ease, padding-left .2s ease;
}

.knowledge-tabs button:hover {
  background: rgba(0, 64, 77, .045);
}

.knowledge-tabs button[aria-selected="true"] {
  padding-left: 15px;
  background: rgba(0, 64, 77, .08);
}

.knowledge-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.knowledge-panel[data-count="2"] {
  padding-bottom: 199px;
}

.knowledge-panel[data-category="values-philosophy"],
.knowledge-panel[data-category="clients"],
.knowledge-panel[data-category="productivity"] {
  padding-bottom: 194px;
}

.knowledge-panel[data-category="marketing"] {
  padding-bottom: 189px;
}

.knowledge-panel[data-category="team"] {
  padding-bottom: 168px;
}

.knowledge-panel[data-count="3"] {
  padding-bottom: 141px;
}

.knowledge-panel[data-count="4"] {
  padding-bottom: 117px;
}

.knowledge-book {
  display: grid;
  grid-template-columns: 291px minmax(0, 476px);
  gap: 40px;
  align-items: start;
  min-height: 440px;
}

.knowledge-book+.knowledge-book {
  margin-top: 80px;
}

.knowledge-cover {
  position: relative;
  width: 291px;
  height: 440px;
}

.knowledge-cover img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Book cover is a link now (opens the store/book page in a new tab) */
.knowledge-cover a {
  display: block;
  width: 100%;
  height: 100%;
  transition: box-shadow .2s ease;
}

.knowledge-cover a:hover,
.knowledge-cover a:focus-visible {
  box-shadow: 0 12px 30px rgba(0, 64, 77, .24);
}

.knowledge-book-copy {
  min-width: 0;
  color: var(--body);
}

.knowledge-book-copy h3 {
  margin: -6px 0 2px;
  color: var(--heading);
  font: 500 28px/39px "Manrope", sans-serif;
  letter-spacing: -.42px;
}

.knowledge-book-copy h3 a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}

.knowledge-book-copy h3 a:hover,
.knowledge-book-copy h3 a:focus-visible {
  color: var(--accent);
}

.knowledge-author {
  margin: 0;
  color: rgba(0, 64, 77, .72);
  font: 500 14px/22px "Manrope", sans-serif;
  letter-spacing: .84px;
  text-transform: uppercase;
}

.knowledge-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0 7px !important;
  color: rgba(0, 64, 77, .78);
  font: 400 14px/22px "Manrope", sans-serif !important;
}

.knowledge-note-icon {
  flex: none;
  color: var(--accent);
  font-size: 19px;
  line-height: 20px;
}

.knowledge-book-copy>p:not(.knowledge-author):not(.knowledge-note) {
  margin: 0;
  color: rgba(0, 64, 77, .92);
  font: 400 16px/26px "Manrope", sans-serif;
}

.knowledge-book-copy>p:not(.knowledge-author):not(.knowledge-note)+p {
  margin-top: 9px;
}

.knowledge-page .site-footer {
  min-height: 229px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1200px) {

  .container,
  .hero .band-wrap,
  .innovation .container,
  .testimonial .container,
  .brands .container,
  .cta .container {
    padding: 0 20px
  }


  .tile,
  .glow {
    display: none
  }

  .hero .band-wrap {
    padding: 0
  }

  /* ---------- Header / burger ---------- */
  .site-header {
    height: 80px
  }

  .header-inner {
    flex-wrap: nowrap;
    height: 100%;
    padding: 0 20px;
    justify-content: space-between;
    gap: 0
  }

  .nav {
    display: none
  }

  .burger {
    display: flex
  }

  .mobile-nav {
    display: block;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    /* frosted glass, same as the header (semi-transparent teal + blur) */
    background: var(--brand-80);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 19;
    transition: max-height .25s ease;
  }

  .mobile-nav.is-open {
    max-height: 520px
  }

  .mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 8px 20px 20px;
    display: flex;
    flex-direction: column
  }

  .mobile-nav a {
    display: block;
    padding: 14px 0;
    font: 400 16px/1.4 "Manrope", sans-serif;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }

  .mobile-nav li:last-child a {
    border-bottom: none
  }

  /* ---------- Hero ---------- */
  .hero {
    height: auto
  }

  .hero-media {
    position: static;
    inset: auto;
    height: 435px;
    min-height: 0;
    border-radius: 0 0 20px 0
  }

  .band-wrap {
    position: static;
    left: auto;
    right: auto;
    margin-top: -193px
  }

  .hero-band {
    display: block;
    height: auto
  }

  .hero-card {
    position: relative;
    width: auto;
    height: 193px;
    min-height: 0;
    margin: 0 0 0 20px;
    border-radius: 20px 0 20px 0;
    padding: 24px 40px;
    /* title vertically centered in the card, left-aligned */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero-title {
    font: 400 min(41px, 9.2vw)/1.1 "Manrope", sans-serif;
    max-width: 100%
  }

  .hero-title .serif {
    font-size: min(41px, 11.32vw);
    line-height: 1.1
  }

  /* white corner patch is only needed on desktop */
  .hero-card::after {
    display: none
  }

  .hero-panel {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 48px 20px 40px;
  }

  .hero-text {
    font: 400 min(18px, 4.09vw)/1.6 "Manrope", sans-serif;
    max-width: 400px
  }

  /* ---------- From Innovation ---------- */
  .innovation {
    padding: 0 0 24px;
    background: linear-gradient(180deg, var(--bg-light) 0%, #fff 100%);
  }

  .innovation .container {
    padding: 0
  }

  .innovation-card {
    position: static;
    min-height: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .innovation-text {
    max-width: 100%;
    padding: 32px 20px 0;
    order: 2
  }

  .innovation-heading {
    font: 400 min(40px, 9.09vw)/1.08 "Manrope", sans-serif;
    margin: 0 0 20px
  }

  .innovation-heading .serif {
    font-size: min(41px, 11.32vw);
  }

  .innovation-copy {
    max-width: 100%;
    font: 400 16px/26px "Manrope", sans-serif
  }

  .innovation-media {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    margin: 0;
    background: none;
    border-radius: 0;
    order: 1;
  }

  .archer-img {
    width: 314px;
    max-width: 100%;
    height: auto;
    margin-left: 50px;
  }

  .ata-badge {
    left: 20px;
    top: 336px;
    bottom: auto;
    width: 92px;
    height: 92px
  }

  /* ---------- Testimonial ---------- */
  .testimonial {
    padding: 0 0 64px;
    background: #fff
  }

  .testimonial::before {
    display: none
  }

  .testimonial .container {
    margin: 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #F2F4F5;
    border-radius: 24px;
    overflow: hidden;
  }

  .testimonial-photo {
    position: static;
    order: 1;
    align-self: center;
    width: 357px;
    max-width: 100%;
    height: auto;
    margin: 42px 0 0;
  }

  .testimonial-card {
    width: 100%;
    order: 2;
    border-radius: 0
  }

  .testimonial-top {
    padding: 40px 20px
  }

  .testimonial-quote {
    max-width: 100%;
    margin: 0 0 32px;
    font: italic 400 16px/24px "Inter", sans-serif;
    opacity: 0.8;
  }

  .testimonial-name {
    font: 500 min(28px, 6.36vw)/1.32 "Manrope", sans-serif;
    margin: 0 0 4px
  }

  .testimonial-role {
    font: 600 12px/16px "Manrope", sans-serif;
    letter-spacing: 1px
  }

  .testimonial-pill {
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 20px 28px;
    font-size: 15px;
  }

  .testimonial-pill svg {
    width: 24px
  }

  /* ---------- Our Brands ---------- */
  .brands {
    padding: 30px 0 64px
  }

  .brands-title {
    font: 400 min(40px, 9.09vw)/1.05 "Manrope", sans-serif;
    margin: 0 0 24px
  }

  .brands-title .serif {
    font-size: min(41px, 11.32vw);
  }

  .brand-category {
    margin-bottom: 32px
  }

  .brand-category-head {
    height: 64px;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-left: 20px;
    opacity: 0.67;
  }

  .brand-rows {
    border-radius: 0 0 var(--radius) var(--radius)
  }

  .brand-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-template-columns: none;
    min-height: 0;
    padding: 24px 20px;
    gap: 12px;
  }

  .brand-logo {
    padding-left: 0
  }

  .brand-logo img {
    max-height: 32px;
    width: auto
  }

  .brand-desc {
    max-width: 100%
  }

  /* ---------- CTA ---------- */
  .cta {
    position: relative;
    height: 563px;
    padding-bottom: 0
  }

  .cta-media {
    position: absolute;
    inset: 0;
    height: 563px
  }

  .cta .cta-row {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
  }

  .cta-card {
    width: 100%;
    min-width: 0;
    margin-top: 0
  }

  .cta-top {
    min-height: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 32px 24px;
  }

  .cta-heading {
    font: 400 min(39px, 8.80vw)/1.1 "Manrope", sans-serif;
    margin: 0 0 20px;
  }

  .cta-copy {
    max-width: 100%;
    font: 400 min(18px, 4.09vw)/1.6 "Manrope", sans-serif
  }

  .cta-pill {
    border-radius: 0 0 var(--radius) var(--radius)
  }

  /* ---------- Footer ---------- */
  .site-footer .container {
    padding: 0 20px
  }

  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    padding: 48px 0 32px
  }

  /* stacked footer → switcher centered, social row without the vertical rule */
  .footer-lang {
    margin-left: 0;
  }

  .footer-social {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .footer-brand {
    flex-direction: column;
    align-items: center;
    gap: 20px
  }

  .footer-logo {
    height: 36px
  }

  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 14px
  }

  .footer-links a {
    font: 400 16px/26px "Manrope", sans-serif
  }

  .footer-social {
    gap: 12px
  }

  .social-btn {
    width: 46px;
    height: 46px;
    border-radius: 8px
  }

  .social-btn svg {
    width: 24px;
    height: 24px
  }

  .footer-divider {
    display: none
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 0 0 40px
  }

  .footer-bottom-right {
    order: 1;
    gap: 24px
  }

  .footer-bottom-right a {
    font: 400 16px/24px "DM Sans", sans-serif
  }

  .scroll-top {
    display: none
  }

  .footer-copyright {
    order: 2;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 24px;
    font: 400 16px/24px "DM Sans", sans-serif;
  }

  /* ================= ABOUT PAGE — mobile ================= */

  /* ---------- ecosystem: image on top, text in a light card ---------- */
  .ecosystem {
    padding: 40px 0 48px
  }

  .ecosystem .container {
    padding: 0 20px
  }

  .ecosystem-card {
    position: static;
    min-height: 0;
    background: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .ecosystem-media {
    position: static;
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 460;
    border-radius: 24px 24px 0 0;
  }

  .ecosystem-text {
    order: 2;
    max-width: 100%;
    margin-top: 0;
    background: #f2f4f5;
    border-radius: 0 0 24px 24px;
    padding: 32px 24px;
  }

  .ecosystem-heading {
    font: 400 min(40px, 9.09vw)/1.08 "Manrope", sans-serif;
    margin: 0 0 16px;
  }

  .ecosystem-heading .serif {
    font-size: min(41px, 11.32vw)
  }

  .ecosystem-copy {
    max-width: 100%
  }

  /* ---------- Mission / Vision ---------- */
  .mv-inner {
    position: static;
    height: auto;
    max-width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .mv-media {
    position: static;
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 440 / 521;
    border-radius: 0;
  }

  .mv-text {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    padding: 40px 20px 48px;
  }

  .mv-block+.mv-block {
    margin-top: 32px
  }

  .mv-heading {
    font: 400 min(38px, 8.6vw)/1.05 "Manrope", sans-serif;
    margin: 0 0 14px;
  }

  /* ---------- Drucker: quote, round avatar below ---------- */
  .drucker {
    margin-top: 0
  }

  .drucker-inner {
    position: static;
    height: auto;
    padding: 48px 20px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .drucker-quote {
    position: static;
    left: auto;
    top: auto;
    max-width: 100%;
  }

  .drucker-text {
    font: italic 400 min(28px, 7vw)/1.36 "Source Serif 4", Georgia, serif;
    margin: 0 0 22px;
  }

  .drucker-cite {
    text-transform: uppercase;
    letter-spacing: 1.12px;
    color: rgba(0, 64, 77, .7);
  }

  /* avatar hangs down: the section background ends exactly at its center (like in Figma) */
  .drucker-photo {
    position: relative;
    z-index: 1;
    right: auto;
    top: auto;
    width: 190px;
    height: 190px;
    margin: 34px auto -95px;
    border-radius: 50%;
  }

  .drucker-photo img {
    object-position: center 18%
  }

  /* CTA on mobile: the heading wraps on its own, without a forced br */
  .about .cta-heading br {
    display: none
  }

  /* ---------- Values: single column ---------- */
  .values {
    margin-top: 0;
    padding: 140px 0 48px;
  }

  .values .container {
    padding: 0 20px
  }

  .values-card {
    padding: 32px 24px;
    background: #f2f4f5;
  }

  .values-heading {
    font: 400 min(40px, 9.09vw)/1.1 "Manrope", sans-serif;
    margin: 0 0 20px;
    max-width: 100%;
  }

  .values-heading .serif {
    font-size: min(41px, 11.32vw)
  }

  .values-cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ================= OUR MODEL PAGE — mobile ================= */

  /* hero panel: smaller top padding (the intro is long) */
  .model .hero-panel {
    padding: 48px 20px 40px;
  }

  /* ---------- How it works: single column ---------- */
  .works {
    padding: 40px 0 48px;
  }

  .works-heading {
    font: 400 min(40px, 9.09vw)/1.08 "Manrope", sans-serif;
    margin: 0 0 28px;
  }

  .works-heading .serif {
    font-size: min(41px, 11.32vw);
  }

  .works-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .work {
    max-width: 100%;
  }

  .work-title {
    font: 500 min(24px, 6vw)/1.3 "Manrope", sans-serif;
  }

  /* ---------- Leader and Team: photo on top, text below on a teal background ---------- */
  .leader {
    height: auto;
  }

  .leader-inner {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .leader-media {
    position: static;
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 440 / 521;
    border-radius: 0;
  }

  .leader-text {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    padding: 40px 20px 48px;
  }

  .leader-heading {
    font: 400 min(38px, 8.6vw)/1.05 "Manrope", sans-serif;
    margin: 0 0 20px;
  }

  .leader-heading .serif {
    font-size: min(39px, 10.5vw);
  }

  /* ---------- Feature rows: photo on top, text below ---------- */
  .rows {
    padding: 48px 0;
  }

  .feature-row,
  .feature-row.reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .feature-row+.feature-row {
    margin-top: 48px;
  }

  .feature-media {
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 376;
    border-radius: 20px;
    margin-bottom: 24px;
  }

  .feature-text {
    max-width: 100%;
  }

  .feature-heading {
    font: 400 min(34px, 8vw)/1.12 "Manrope", sans-serif;
    margin: 0 0 16px;
  }

  .feature-heading .serif {
    font-size: min(35px, 9.5vw);
  }

  /* ---------- Laloux quote: quote, round avatar below (background ends at its center) ---------- */
  .quote {
    height: auto;
    margin-bottom: 0;
  }

  .quote-inner {
    position: static;
    height: auto;
    padding: 48px 20px 0;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .quote-block {
    position: static;
    left: auto;
    top: auto;
    max-width: 100%;
  }

  .quote-text {
    font: italic 400 min(24px, 6vw)/1.42 "Source Serif 4", Georgia, serif;
    margin: 0 0 20px;
  }

  .quote-cite {
    text-transform: uppercase;
    letter-spacing: 1.12px;
  }

  .quote-photo {
    position: relative;
    right: auto;
    top: auto;
    z-index: 1;
    width: 190px;
    height: 190px;
    margin: 34px auto -95px;
    border-radius: 50%;
  }

  /* Homepage quote: big name + uppercase role, avatar framed on the face */
  .home .quote-name {
    display: block;
    margin: 0 0 6px;
    font: 500 min(26px, 6.4vw)/1.3 "Manrope", sans-serif;
    color: var(--brand);
  }

  .home .quote-role {
    display: block;
    margin: 0;
    font: 600 12px/1.5 "Manrope", sans-serif;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(0, 64, 77, .6);
  }

  .home .quote-photo img {
    object-position: 50% top;
    transform: scale(1.1);
    transform-origin: 0 top;
  }

  /* space for the hanging avatar before the CTA */
  .model .cta,
  .home .cta {
    margin-top: 160px;
  }

  /* CTA heading in 2 lines like in Figma (Manrope is wider than the original → reduce font size);
     button — in 1 line (smaller side padding + font size) */
  .model .cta-heading {
    font-size: min(31px, 7.2vw);
    line-height: 1.16;
  }

  .model .cta-pill {
    font-size: 20px;
    padding: 30px 26px;
    gap: 14px;
  }

  .model .cta-pill svg {
    width: 28px;
  }

  /* ================= BRANDS PAGE — mobile ================= */
  .portfolio {
    padding: 10px 0 40px;
  }

  .cat+.cat {
    margin-top: 48px;
  }

  .cat-title {
    font: 400 min(32px, 7.3vw)/1.1 "Manrope", sans-serif;
    margin: 0 0 24px;
  }

  .brand-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .brand-card-desc {
    max-width: 100%;
    font: 400 min(18px, 4.09vw)/1.6 "Manrope", sans-serif;
    margin-top: 16px;
  }

  /* CTA heading: large, in 2 lines (br before serif keeps the wrap); serif even larger */
  .ventures .cta-heading {
    font-size: min(34px, 7.6vw);
    line-height: 1.12;
  }

  .ventures .cta-heading .serif-cta {
    font-size: 1.5em;
    line-height: 1;
  }

  /* space for the hanging quote avatar before the CTA */
  .ventures .cta {
    margin-top: 160px;
  }

  /* ================= CULTURE & TEAM PAGE — mobile ================= */

  .culture .hero-media img {
    object-position: 44% center;
  }

  /* Starts at y=746 and keeps the 460px image + 588px copy card from Figma. */
  .culture .culture-intro {
    padding: 19px 0 81px;
  }

  .culture .culture-intro .ecosystem-media {
    aspect-ratio: 400 / 460;
  }

  .culture .culture-intro .ecosystem-text {
    min-height: 588px;
    padding: 33px 20px 42px;
  }

  .culture .culture-intro .ecosystem-heading {
    font: 400 min(40px, 9.09vw)/1.075 "Manrope", sans-serif;
    margin: 0 0 30px;
  }

  .culture .culture-intro .ecosystem-heading .serif {
    font-size: min(41px, 11.32vw);
  }

  .culture .culture-desktop-break {
    display: none;
  }

  .culture .culture-title-line {
    white-space: normal;
  }

  .culture .culture-practice .mv-text {
    width: auto;
    max-width: none;
    padding: 46px 20px 64px;
  }

  .culture .culture-practice .mv-heading {
    font: 400 min(41px, 9.32vw)/1.1 "Manrope", sans-serif;
    margin: 0 0 41px;
  }

  .culture .culture-practice .mv-heading .serif {
    font-size: min(42px, 11.32vw);
  }

  .culture .culture-values {
    padding: 66px 0 80px;
  }

  .culture .culture-values .feature-heading {
    font: 400 min(40px, 9.09vw)/1.075 "Manrope", sans-serif;
    margin: 0 0 29px;
  }

  .culture .culture-values .feature-heading .serif {
    font-size: min(41px, 11.32vw);
  }

  .culture .quote-inner {
    padding-top: 75px;
  }

  .culture .quote-block {
    top: auto;
  }

  .culture .quote-text {
    font: italic 400 min(28px, 6.36vw)/1.357 "Source Serif 4", Georgia, serif;
    margin: 0 0 42px;
  }

  .culture .quote-photo {
    margin: 46px auto -95px;
  }

  .culture .cta {
    margin-top: 165px;
    padding-bottom: 0;
  }

  .culture .quote {
    margin-bottom: 0;
  }

  .culture .cta-media img {
    object-position: 3% center;
  }

  .culture .cta-top {
    padding: 48px 20px 35px;
  }

  .culture .cta-heading {
    font-size: min(41px, 9.32vw);
    line-height: 1.12;
    margin-bottom: 19px;
  }

  .culture .cta-pill {
    padding: 34px 20px;
    gap: 14px;
    font-size: min(22px, 5vw);
  }

  .culture .cta-pill svg {
    width: 28px;
  }

  .culture .site-footer {
    min-height: 467px;
  }

  /* ================= LAUNCH PLATFORM PAGE — mobile ================= */

  .launch .hero-card {
    padding-top: 40px;
  }

  .launch .hero-title,
  .launch .hero-title .serif {
    line-height: 1.22;
  }

  .launch .launch-intro {
    padding: 20px 0 80px;
  }

  .launch .launch-intro .ecosystem-media {
    aspect-ratio: 400 / 460;
  }

  .launch .launch-intro .ecosystem-text {
    min-height: 500px;
    padding: 33px 20px 56px;
  }

  .launch .launch-intro .ecosystem-heading {
    margin: 0 0 30px;
    font: 400 min(40px, 9.09vw)/1.075 "Manrope", sans-serif;
  }

  .launch .launch-intro .ecosystem-copy {
    max-width: 100%;
    font: 400 16px/26px "Manrope", sans-serif;
  }

  .launch .launch-practice .mv-text {
    width: auto;
    max-width: none;
    padding: 47px 20px 65px;
  }

  .launch .launch-practice .mv-heading {
    margin: 0 0 24px;
    font: 400 min(40px, 9.09vw)/1.075 "Manrope", sans-serif;
  }

  .launch .launch-offers {
    padding: 66px 0 49px;
  }

  .launch .launch-offers .feature-media {
    margin-bottom: 25px;
  }

  .launch .launch-offers .feature-heading {
    margin: 0 0 29px;
    font: 400 min(40px, 9.09vw)/1.075 "Manrope", sans-serif;
  }

  .launch-audience {
    padding: 0 0 80px;
  }

  .launch-audience .container {
    padding: 0 20px;
  }

  .audience-heading {
    margin: 0 0 28px;
    font: 400 min(40px, 9.09vw)/1.225 "Manrope", sans-serif;
  }

  .audience-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .audience-card {
    min-height: 278px;
    padding: 28px 12px 28px 20px;
    background: #f2f4f5;
    border-radius: 20px;
  }

  .audience-link {
    margin-top: 23px;
  }

  .launch .quote-inner {
    padding-top: 75px;
  }

  .launch .quote-block {
    top: auto;
  }

  .launch .quote-text {
    margin: 0 0 42px;
    font: italic 400 min(28px, 6.36vw)/1.357 "Source Serif 4", Georgia, serif;
  }

  .launch .quote-photo {
    margin: 46px auto -95px;
  }

  .launch .quote {
    margin-bottom: 0;
  }

  .launch .cta {
    height: 595px;
    margin-top: 165px;
    padding-bottom: 0;
  }

  .launch .cta-media {
    height: 595px;
  }

  .launch .cta-media img {
    object-position: 78% center;
  }

  .launch .cta-top {
    padding: 48px 20px 36px;
  }

  .launch .cta-heading {
    margin-bottom: 19px;
    font: 400 min(43px, 9.77vw)/46.333px "Manrope", sans-serif;
  }

  .launch .cta-heading .serif-cta {
    font-size: 1.28em;
  }

  .launch .cta-heading-desktop {
    display: none;
  }

  .launch .cta-heading-mobile {
    display: inline;
  }

  .launch .cta-pill {
    padding: 34px 20px;
    gap: 14px;
    font-size: min(22px, 5vw);
  }

  .launch .cta-pill svg {
    width: 28px;
  }

  .launch .site-footer {
    min-height: 467px;
  }

  /* ================= COMPANY-UNIVERSITY PAGE — mobile ================= */

  .university .hero-media img {
    object-position: left center;
  }

  .university .band-wrap {
    left: auto;
  }

  .university .hero-card {
    padding: 28px 24px 0 44px;
  }

  .university .hero-title {
    max-width: 347px;
    font: 400 min(35px, 7.84vw)/1.22 "Manrope", sans-serif;
  }

  .university .hero-title .serif {
    font-size: 1.18em;
    line-height: 1.22;
  }

  .university .hero-panel {
    padding: 48px 20px 20px;
  }

  .university .hero-text {
    font: 400 18px/29px "Manrope", sans-serif;
  }

  .university-important {
    padding: 40px 0 80px;
  }

  .university-important .ecosystem-card {
    padding-top: 0;
  }

  .university-important .ecosystem-media {
    aspect-ratio: 400 / 460;
  }

  .university-important .ecosystem-text {
    min-height: 441px;
    padding: 33px 20px 49px;
  }

  .university-important .ecosystem-heading {
    margin-bottom: 30px;
    font: 400 min(40px, 9.09vw)/47px "Manrope", sans-serif;
  }

  .university-important .ecosystem-copy {
    font: 400 16px/26px "Manrope", sans-serif;
  }

  .university-meaning .mv-text {
    width: auto;
    max-width: none;
    padding: 47px 20px 63px;
  }

  .university-meaning .mv-media {
    height: auto;
    aspect-ratio: 440 / 521;
  }

  .university-meaning .mv-heading {
    margin-bottom: 24px;
    font: 400 min(41px, 9.32vw)/44.333px "Manrope", sans-serif;
  }

  .university-meaning .mv-copy {
    max-width: 400px;
  }

  .mentorship {
    padding: 52px 0 62px;
  }

  .mentorship .container {
    padding: 0 20px;
  }

  .mentorship-card {
    min-height: 0;
    overflow: visible;
    border-radius: 0;
    background: none;
  }

  .mentorship-glow {
    display: none;
  }

  .mentorship-text {
    position: static;
    width: 100%;
  }

  .mentorship-heading {
    min-height: 104px;
    margin-bottom: 20px;
    font: 400 min(40px, 9.09vw)/48px "Manrope", sans-serif;
  }

  .mentorship-copy {
    width: 100%;
    font: 400 15.5px/26px "Manrope", sans-serif;
  }

  .mentorship-diagram {
    position: static;
    width: 100%;
    height: 326px;
    margin-top: 28px;
  }

  .university-library {
    height: auto;
    overflow: visible;
    padding-bottom: 90px;
  }

  .library-media {
    position: static;
    width: calc(100% - 40px);
    height: 376px;
    margin: 0 20px;
    object-fit: cover;
    object-position: 100% center;
    border-radius: 20px;
  }

  .library-inner {
    height: auto;
    padding: 25px 20px 0;
  }

  .library-card {
    position: static;
    width: 100%;
  }

  .library-heading {
    margin-bottom: 20px;
    font: 400 min(40px, 9.09vw)/51.5px "Manrope", sans-serif;
    color: var(--heading);
  }

  .library-copy {
    font: 400 16px/26px "Manrope", sans-serif;
    color: var(--body);
  }

  .library-link {
    margin: 25px 0 0;
    color: #fff;
  }

  .library-link .arw {
    color: #fff;
  }

  .university-quote {
    margin-bottom: 0;
  }

  .university-quote .quote-inner {
    padding-top: 75px;
  }

  .university-quote .quote-block {
    top: auto;
  }

  .university-quote .quote-text {
    margin-bottom: 42px;
    font: italic 400 min(28px, 6.36vw)/38px "Source Serif 4", Georgia, serif;
  }

  .university-quote .quote-photo {
    margin: 46px auto -95px;
  }

  .university-cta {
    height: 563px;
    margin-top: 197px;
    padding-bottom: 0;
  }

  .university-cta .cta-media {
    height: 563px;
  }

  .university-cta .cta-media img {
    object-position: 57% center;
  }

  .university-cta .cta-card {
    margin-top: 0;
    transform: translateY(-1px);
  }

  .university-cta .cta-top {
    min-height: 293px;
    padding: 0 20px;
    justify-content: center;
  }

  .university-cta .cta-heading {
    margin-bottom: 19px;
    font: 400 min(43px, 9.77vw)/48px "Manrope", sans-serif;
  }

  .university-cta .cta-pill {
    min-height: 99px;
    padding: 34px 20px;
    gap: 14px;
    font-size: min(22px, 5vw);
  }

  .university-cta .cta-pill svg {
    width: 28px;
  }

  .university .site-footer {
    min-height: 467.5px;
  }

  /* ================= CONTACT PAGE — mobile ================= */
  .contact-main {
    height: 754px;
  }

  .contact-main::after {
    display: none;
  }

  .contact-stage {
    height: 435px;
  }

  .contact-photo {
    object-position: center;
  }

  .contact-band {
    left: 0;
    right: 0;
    top: 242px;
    height: 512px;
    display: block;
  }

  .contact-title-card {
    width: calc(100% - 20px);
    height: 193px;
    margin-left: 20px;
    padding: 0 44px;
    border-top-left-radius: 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 0;
  }

  .contact-title-card::after {
    display: none;
  }

  .contact-title {
    font: 400 min(35px, 7.95vw)/42px "Manrope", sans-serif;
  }

  .contact-options {
    gap: 7px;
    width: 100%;
    height: 319px;
    padding: 46px 20px 30px;
  }

  .contact-option {
    gap: 8px;
    min-height: 38px;
    font: 500 min(20px, 4.55vw)/32px "Manrope", sans-serif;
    white-space: nowrap;
  }

  .contact-option .arw {
    width: 20px;
  }

  .contact-page .site-footer {
    min-height: 467px;
  }

  .contact-dialog {
    width: calc(100% - 32px);
    min-height: 0;
    max-height: none;
    margin: 16px auto auto;
    padding: 58px 20px 28px;
    overflow: visible;
    border-radius: 20px;
  }

  .dialog-close {
    top: 14px;
    right: 14px;
  }

  .dialog-title {
    margin-bottom: 28px;
    font: 400 min(34px, 7.72vw)/42px "Manrope", sans-serif;
  }

  .form-fields {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .form-field,
  .form-field input,
  .form-field textarea {
    font-size: 16px;
  }

  .form-field textarea {
    height: 130px;
  }

  .form-submit {
    width: 150px;
    margin-top: 26px;
  }

  /* ================= CAREERS PAGE — mobile ================= */
  .careers-hero {
    height: 515px;
  }

  .careers-hero-media {
    object-position: 45% center;
  }

  .careers-hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 80px 20px 0;
  }

  .careers-hero-title {
    font: 400 min(50px, 11.36vw)/56px "Manrope", sans-serif;
  }

  /* RU: длинное «Присоединяйтесь» не влезает в 44px — чуть уменьшаем (EN не трогаем) */
  html[lang="ru"] .careers-hero-title {
    font: 400 min(40px, 10vw)/48px "Manrope", sans-serif;
  }

  .careers-hero-copy {
    width: 100%;
    max-width: 530px;
    margin-top: 24px;
    font: 400 min(18px, 4.09vw)/29px "Manrope", sans-serif;
  }

  .careers-positions {
    height: auto;
    padding: 64px 0 70px;
  }

  .careers-container,
  .career-general-inner {
    max-width: none;
    padding: 0 20px;
  }

  .careers-section-title {
    margin-bottom: 32px;
    font: 400 min(40px, 9.09vw)/44px "Manrope", sans-serif;
  }

  .vacancy-list {
    gap: 24px;
  }

  .vacancy-card {
    height: auto;
    padding: 30px 20px;
  }

  .vacancy-title {
    font: 500 min(28px, 6.36vw)/34px "Manrope", sans-serif;
  }

  .vacancy-meta {
    flex-wrap: wrap;
    gap: 8px 12px;
    height: auto;
    margin-top: 18px;
    font: 400 min(17px, 3.86vw)/24px "Manrope", sans-serif;
  }

  .vacancy-location {
    width: 100%;
  }

  /* локация — на своей строке; убираем разделитель, повисающий в начале второй строки */
  .vacancy-location + .vacancy-divider {
    display: none;
  }

  .vacancy-copy {
    width: 100%;
    margin-top: 20px;
    font: 400 16px/26px "Manrope", sans-serif;
  }

  .vacancy-apply {
    position: static;
    width: 133px;
    height: 49px;
    margin-top: 24px;
  }

  .career-general {
    height: auto;
    padding: 0 0 80px;
  }

  .career-general-inner {
    display: block;
  }

  .career-general-intro {
    margin-bottom: 40px;
  }

  .career-general-intro h2 {
    margin-bottom: 20px;
    font: 400 min(38px, 8.64vw)/46px "Manrope", sans-serif;
  }

  .career-general-intro p {
    width: 100%;
    font: 400 16px/26px "Manrope", sans-serif;
  }

  .career-general-form {
    margin-top: 0;
  }

  .career-form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .career-form-grid .form-field {
    gap: 10px;
  }

  .career-general-submit {
    margin-top: 26px;
  }

  .careers-page .site-footer {
    min-height: 467px;
  }

  .career-dialog-vacancy {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 26px;
  }

  /* ================= SOURCES OF KNOWLEDGE — mobile ================= */
  .knowledge-hero {
    height: 430px;
  }

  .knowledge-hero-media {
    object-position: 55% center;
  }

  .knowledge-hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    height: 100%;
    padding: 80px 20px 0;
  }

  .knowledge-hero-title {
    max-width: 400px;
    font: 400 min(48px, 10.91vw)/1.08 "Manrope", sans-serif;
    letter-spacing: -.7px;
  }

  .knowledge-hero-copy {
    margin-top: 26px;
    font: 400 16px/26px "Manrope", sans-serif;
  }

  .knowledge-library {
    padding: 32px 0 80px;
  }

  .knowledge-container {
    max-width: none;
    padding: 0 20px;
  }

  .knowledge-mobile-control {
    position: static;
    display: block;
    margin: -8px -6px 40px;
    padding: 8px 6px 14px;
    background: #fff;
  }

  .knowledge-mobile-control label {
    display: block;
    margin: 0 0 8px 2px;
    color: rgba(0, 64, 77, .7);
    font: 500 13px/19px "Manrope", sans-serif;
  }

  .knowledge-select-wrap {
    position: relative;
  }

  .knowledge-select-wrap select {
    width: 100%;
    height: 62px;
    padding: 0 52px 0 18px;
    border: 1px solid rgba(0, 64, 77, .08);
    border-radius: 16px;
    outline: none;
    background: var(--bg-light);
    color: var(--heading);
    -webkit-appearance: none;
    appearance: none;
    font: 500 18px/26px "Manrope", sans-serif;
  }

  .knowledge-select-wrap select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(1, 220, 154, .16);
  }

  .knowledge-select-wrap svg {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 16px;
    height: 10px;
    color: var(--body);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .knowledge-layout {
    display: block;
    padding-top: 0;
  }

  .knowledge-tabs {
    display: none;
  }

  .knowledge-panel[data-count] {
    padding-bottom: 0;
  }

  .knowledge-book {
    display: block;
    min-height: 0;
    padding: 58px 20px 32px;
    border-radius: 24px;
    background: var(--bg-light);
  }

  .knowledge-book+.knowledge-book {
    margin-top: 36px;
  }

  .knowledge-cover {
    width: min(291px, 73vw);
    height: auto;
    aspect-ratio: 291 / 440;
    margin: 0 auto;
  }

  .knowledge-book-copy {
    margin-top: 34px;
  }

  .knowledge-book-copy h3 {
    margin: 0 0 4px;
    font: 500 min(30px, 6.82vw)/1.28 "Manrope", sans-serif;
  }

  .knowledge-note {
    margin-top: 14px !important;
  }

  .knowledge-book-copy>p:not(.knowledge-author):not(.knowledge-note) {
    font: 400 16px/26px "Manrope", sans-serif;
  }

  .knowledge-page .site-footer {
    min-height: 467px;
  }
}

/* ==========================================================================
   Tablet (761-1200): mobile layout with a width-capped centered column
   ========================================================================== */
@media (min-width:761px) and (max-width:1200px) {

  .hero-media {
    height: 520px
  }

  .hero-card {
    max-width: 560px;
    margin-left: auto;
  }

  .hero-panel {
    max-width: 680px;
    margin: 0 auto;
  }

  .hero-text {
    max-width: 100%
  }

  .innovation-text {
    width: 100%;
    max-width: 680px;
    align-self: center;
  }

  .ata-badge {
    left: calc(50% - 219px)
  }

  .testimonial .container {
    margin: 0 auto;
    max-width: 640px;
  }

  .brands .container {
    max-width: 680px;
    margin: 0 auto;
  }

  .cta-card {
    max-width: 560px
  }

  .site-footer .container {
    max-width: 680px;
    margin: 0 auto;
  }

  /* About: center the content of new sections with a width cap */
  .ecosystem .container,
  .values .container {
    max-width: 680px;
    margin: 0 auto;
  }

  .ecosystem-media {
    aspect-ratio: 16 / 10
  }

  .drucker-inner {
    max-width: 680px;
    margin: 0 auto;
  }

  .mv-media {
    max-width: 680px;
    margin: 0 auto;
    border-radius: 24px;
  }

  .mv-text {
    max-width: 680px;
    margin: 0 auto;
  }

  /* Our Model: center the content of new sections with a width cap */
  .works .container,
  .rows .container,
  .quote-inner,
  .leader-inner {
    max-width: 680px;
    margin: 0 auto;
  }

  .leader-media {
    border-radius: 24px;
  }

  /* Brands: 2 columns of cards in a capped container */
  .portfolio .container {
    max-width: 680px;
    margin: 0 auto;
  }

  .ventures .brand-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }

  .culture .culture-intro .ecosystem-text {
    min-height: 0;
    padding: 32px 24px 40px;
  }

  .launch .launch-intro .ecosystem-text {
    min-height: 0;
    padding: 32px 24px 40px;
  }

  .launch-audience .container {
    max-width: 680px;
    margin: 0 auto;
  }

  .university-important .container,
  .mentorship .container,
  .library-inner {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  .university-meaning .mv-text {
    max-width: 680px;
  }

  .contact-main {
    height: 789px;
  }

  .contact-stage {
    height: 520px;
  }

  .contact-band {
    top: 277px;
  }

  .contact-title-card,
  .contact-options {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  .careers-hero-inner,
  .careers-container,
  .career-general-inner {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  .careers-hero-media {
    object-position: 35% center;
  }

  .knowledge-hero-inner,
  .knowledge-container {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .knowledge-book {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 32px;
    padding: 58px 30px 38px;
  }

  .knowledge-cover {
    width: 230px;
    margin: 0;
  }

  .knowledge-book-copy {
    margin-top: 0;
  }

  .knowledge-book-copy h3 {
    font-size: 26px;
  }
}

/* ==========================================================================
   LEGAL PAGES — Privacy Policy / Terms of Service
   ========================================================================== */
.legal-main {
  padding: clamp(112px, 6vw + 84px, 156px) 0 clamp(64px, 8vw, 104px);
}

.legal {
  max-width: 820px;
}

.legal h1 {
  margin: 0 0 10px;
  color: var(--heading);
  font: 600 clamp(34px, 5.2vw, 52px)/1.08 "Manrope", sans-serif;
  letter-spacing: -1px;
}

.legal .legal-updated {
  margin: 0 0 40px;
  color: rgba(0, 64, 77, .6);
  font: 500 13px/1.4 "Manrope", sans-serif;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.legal h2 {
  margin: 44px 0 12px;
  color: var(--heading);
  font: 600 clamp(21px, 2.4vw, 25px)/1.3 "Manrope", sans-serif;
  letter-spacing: -.4px;
}

.legal p,
.legal li {
  color: var(--body);
  font: 400 17px/1.72 "Manrope", sans-serif;
}

.legal p {
  margin: 0 0 16px;
}

.legal ul {
  margin: 0 0 18px;
  padding-left: 22px;
}

.legal li {
  margin: 0 0 9px;
}

.legal strong {
  font-weight: 700;
}

.legal a {
  color: var(--heading);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--accent);
}

.legal a:hover,
.legal a:focus-visible {
  text-decoration-color: currentColor;
}

/* ============================================================
   RU — подгонка размеров заголовков под раскладку EN-версии.
   Русский текст длиннее английского, поэтому на десктопе крупные
   заголовки чуть уменьшаем, чтобы строки ложились так же, как в EN.
   Скоуп строго html[lang="ru"] — английская версия не затрагивается.
   ============================================================ */
@media (min-width: 1201px) {
  /* hero-заголовки: уменьшены так, чтобы русский лёг в то же число строк, что EN */
  html[lang="ru"] .home .hero-title       { font-size: 60px; }
  html[lang="ru"] .about .hero-title      { font-size: 60px; }
  html[lang="ru"] .model .hero-title      { font-size: 44px; }
  html[lang="ru"] .ventures .hero-title   { font-size: 52px; }
  html[lang="ru"] .culture .hero-title    { font-size: 54px; }
  html[lang="ru"] .launch .hero-title     { font-size: 46px; }
  html[lang="ru"] .university .hero-title { font-size: 46px; }
  /* заголовки секций и CTA */
  html[lang="ru"] .home .innovation-heading { font-size: 38px; }
  html[lang="ru"] .home .cta-heading         { font-size: 42px; }
  html[lang="ru"] .about .values-heading     { font-size: 44px; }
  html[lang="ru"] .model .feature-heading    { font-size: 46px; }
  html[lang="ru"] .ventures .cta-heading     { font-size: 42px; }
  html[lang="ru"] .launch .cta-heading       { font-size: 32px; }
  html[lang="ru"] .careers-page #generalTitle{ font-size: 30px; }
}