/* Middle-page creative direction. Loaded after middle.css and theme-middle.css. */
.mid-intro, .mid-process, .mid-plan, .mid-transformation, .mid-founder, .mid-changes {
  font-family: "DM Sans", sans-serif;
  color: var(--ink, #20252B);
  font-size: 18px;
  line-height: 1.65;
}
.mid-intro *, .mid-process *, .mid-plan *, .mid-transformation *, .mid-founder *, .mid-changes * { box-sizing: border-box; }
.mid-intro h2, .mid-process h2, .mid-plan h2, .mid-transformation h2, .mid-founder h2, .mid-changes h2,
.mid-process h3, .mid-transformation h3 {
  font-family: "Manrope", sans-serif;
  letter-spacing: -.045em;
  font-weight: 800;
}
.mid-intro__topline, .mid-intro__footer, .mid-intro__scope, .mid-kicker,
.mid-stage__number, .mid-stage__figure figcaption, .mid-blueprint figcaption,
.mid-blueprint__sheethead, .mid-blueprint__row span, .mid-moment__index,
.mid-founder__statement > span, .mid-changes__number {
  font-family: "DM Sans", sans-serif;
}
.mid-kicker {
  color: var(--blue, #2563EB);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.35;
  text-transform: uppercase;
}
.mid-section-head h2, .mid-plan h2, .mid-transformation h2, .mid-founder h2, .mid-changes h2 {
  font-size: clamp(38px, 4.4vw, 66px);
  line-height: 1.08;
}

/* An energetic change of pace before the process. */
.mid-intro {
  position: relative;
  overflow: hidden;
  background: var(--blue, #2563EB);
  color: #fff;
}
.mid-intro::before {
  content: "";
  position: absolute;
  width: clamp(260px, 32vw, 470px);
  aspect-ratio: 1;
  right: -8%;
  top: -38%;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(255,255,255,.04), 0 0 0 100px rgba(255,255,255,.035);
  pointer-events: none;
}
.mid-intro__inner { position: relative; padding-top: 32px; padding-bottom: 30px; }
.mid-intro__topline, .mid-intro__footer {
  color: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,.35);
  font-size: 11px;
  letter-spacing: .08em;
}
.mid-intro__topline { padding-bottom: 22px; }
.mid-intro__grid {
  grid-template-columns: minmax(0,1.15fr) minmax(270px,.65fr);
  gap: clamp(45px,8vw,125px);
  align-items: end;
  padding: clamp(88px,10vw,150px) 0 clamp(85px,9vw,140px);
}
.mid-intro__title { max-width: 850px; color: #fff; font-size: clamp(55px,7vw,104px); line-height: .99 !important; }
.mid-intro__title > span { color: var(--lavender, #E9E4FF); }
.mid-intro__title small { margin-top: 28px; color: #fff; font-size: clamp(20px,2vw,28px); font-weight: 600; letter-spacing: -.025em; }
.mid-intro__copy { max-width: 460px; }
.mid-intro__copy p { color: #fff; font-size: clamp(18px,1.5vw,21px); line-height: 1.6; }
.mid-intro__scope { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 38px; padding-top: 25px; border-color: rgba(255,255,255,.35); color: #fff; font-size: 11px; }
.mid-intro__scope span:first-child { display: grid; place-items: center; width: 76px; height: 76px; margin-right: 8px; border-radius: 50%; background: var(--orange, #FF7849); color: var(--navy, #14213D); font-family: "Manrope", sans-serif; font-size: 24px; letter-spacing: -.06em; }
.mid-intro__scope span:last-child { text-align: left; }
.mid-intro__footer { padding-top: 22px; }

/* Three different photo compositions tell one connected story. */
.mid-process { background: #fff; color: var(--ink, #20252B); padding: clamp(85px,9vw,140px) 0 clamp(90px,10vw,150px); }
.mid-process h2, .mid-process h3 { color: var(--navy, #14213D); }
.mid-process .mid-kicker, .mid-section-head h2 span { color: var(--blue, #2563EB); }
.mid-section-head { max-width: 830px; margin-bottom: clamp(55px,7vw,105px); }
.mid-section-head h2 { margin-top: 18px; }
.mid-process__list { display: block; list-style: none; margin: 0; padding: 0; }
.mid-stage { position: relative; display: grid; min-width: 0; padding: 0; align-items: center; gap: clamp(40px,6vw,95px); }
.mid-stage + .mid-stage { margin-top: clamp(85px,10vw,150px); }
.mid-stage::before { display: none; }
.mid-stage--one { grid-template-columns: minmax(0,1.15fr) minmax(0,.72fr); }
.mid-stage--two { grid-template-columns: minmax(0,.7fr) minmax(0,1fr); padding-left: 6%; }
.mid-stage__content { min-width: 0; }
.mid-stage__number {
  position: static;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--lavender, #E9E4FF);
  color: var(--navy, #14213D);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}
.mid-stage--two .mid-stage__number { background: var(--orange, #FF7849); }
.mid-stage--three .mid-stage__number { background: var(--sky, #DDEEFF); }
.mid-stage h3 { max-width: 510px; margin: 22px 0 18px; font-size: clamp(29px,3vw,44px); line-height: 1.15; }
.mid-stage__content p { max-width: 510px; font-size: 17px; line-height: 1.7; }
.mid-stage__figure { position: relative; min-width: 0; margin: 0; }
.mid-stage__figure img { width: 100%; object-fit: cover; background: var(--sky, #DDEEFF); }
.mid-stage--one .mid-stage__figure img { aspect-ratio: 1.2; border-radius: 3px 90px 3px 3px; }
.mid-stage--two .mid-stage__figure img { aspect-ratio: 1.05; border-radius: 100px 3px 3px 3px; }
.mid-stage__figure figcaption { margin-top: 12px; color: #5a6679; font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.35; }
.mid-stage__flow { position: absolute; right: -18px; bottom: 14%; display: flex; align-items: center; gap: 18px; padding: 16px 19px; border-radius: 50px; background: var(--orange, #FF7849); box-shadow: 0 10px 28px rgba(20,33,61,.15); }
.mid-stage__flow i { position: relative; width: 12px; height: 12px; border: 2px solid var(--navy, #14213D); border-radius: 50%; }
.mid-stage__flow i:not(:last-child)::after { content: ""; position: absolute; width: 18px; height: 2px; left: 10px; top: 3px; background: var(--navy, #14213D); }
.mid-stage--three { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 0; align-items: end; }
.mid-stage--three .mid-stage__figure { grid-column: 1 / 9; grid-row: 1; }
.mid-stage--three .mid-stage__figure img { aspect-ratio: 1.45; border-radius: 3px 3px 3px 90px; }
.mid-stage--three .mid-stage__content { position: relative; z-index: 1; grid-column: 7 / 13; grid-row: 1; margin-bottom: 40px; padding: clamp(30px,4vw,60px); background: var(--lavender, #E9E4FF); }
.mid-process__cta { margin-top: 55px; }
.mid-process__cta .book-button { max-width: 100%; margin-top: 0; padding: 18px 24px; background: var(--navy, #14213D); border: 1px solid var(--navy, #14213D); border-radius: 4px; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; text-align: center; }
.mid-process__cta .book-button:hover { background: var(--blue, #2563EB); border-color: var(--blue, #2563EB); color: #fff; }

/* A tactile, light document rather than an interface panel. */
.mid-plan { padding: clamp(90px,10vw,150px) 0; background: var(--lavender, #E9E4FF); color: var(--navy, #14213D); }
.mid-plan__layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.75fr); gap: clamp(55px,9vw,140px); align-items: center; }
.mid-plan h2 { max-width: 750px; margin-top: 18px; color: var(--navy, #14213D); }
.mid-plan .mid-kicker { color: #234fb0; }
.mid-plan__copy { max-width: 670px; margin-top: 33px; }
.mid-plan__copy p { color: var(--ink, #20252B); font-size: 18px; line-height: 1.7; }
.mid-plan__copy p + p { margin-top: 22px; }
.mid-blueprint { position: relative; margin: 0; padding: 25px; background: transparent; box-shadow: none; }
.mid-blueprint::before { content: ""; position: absolute; inset: 7% 2% 0 5%; border-radius: 50%; background: #d3caff; }
.mid-blueprint figcaption { position: relative; margin-bottom: 17px; color: #445373; font-size: 11px; letter-spacing: .03em; text-transform: none; }
.mid-blueprint__sheet { position: relative; min-height: 370px; margin: 0; padding: clamp(25px,3vw,42px); background: #fff; border: 1px solid #e4e3e7; box-shadow: 0 22px 50px rgba(20,33,61,.17), 8px 8px 0 rgba(255,255,255,.65); transform: rotate(3deg); }
.mid-blueprint__sheethead { gap: 15px; padding-bottom: 50px; color: var(--blue, #2563EB); font-size: 10px; letter-spacing: .08em; }
.mid-blueprint__row { grid-template-columns: 28px 1fr; gap: 14px; min-height: 65px; padding: 17px 0; border-color: #dde2ec; font-size: 14px; }
.mid-blueprint__row span { color: var(--blue, #2563EB); font-size: 11px; }
.mid-blueprint__row strong { color: var(--navy, #14213D); }

/* A dark, immersive sequence with three distinct moments. */
.mid-transformation { overflow: hidden; padding: clamp(100px,11vw,165px) 0; background: var(--navy, #14213D); color: #fff; }
.mid-transformation h2, .mid-transformation h3 { color: #fff; }
.mid-transformation .mid-kicker { color: #b9cfff; }
.mid-transformation__heading { max-width: 970px; margin-bottom: clamp(65px,8vw,120px); }
.mid-transformation__heading h2 { margin-top: 18px; font-size: clamp(47px,6.4vw,94px); line-height: 1.02; }
.mid-moments { border: 0; }
.mid-moment { display: grid; border: 0; padding: 0; gap: 0; }
.mid-moment__index { position: static; display: block; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; color: #a9c3fb; font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; line-height: 1; }
.mid-moment h3 { max-width: none; font-size: clamp(32px,3.8vw,55px); line-height: 1.1; }
.mid-moment p { max-width: 600px; color: #e3e9f7; font-size: 18px; line-height: 1.7; }
.mid-moment--first { grid-template-columns: 60px minmax(0,.9fr) minmax(0,.9fr); gap: clamp(20px,4vw,65px); align-items: start; padding: 35px 0 75px; border-top: 1px solid rgba(255,255,255,.32); }
.mid-moment--first .mid-moment__index { padding-top: 8px; }
.mid-moment--second { grid-template-columns: minmax(0,1.05fr) minmax(0,.8fr); align-items: center; gap: clamp(45px,7vw,105px); margin: 0 -2% 0 0; }
.mid-moment__image { margin: 0; }
.mid-moment__image img { width: 100%; aspect-ratio: 1.18; object-fit: cover; background: #304061; border-radius: 3px 100px 3px 3px; }
.mid-moment__body { padding: 20px 0; }
.mid-moment__body h3 { margin: 22px 0 20px; color: #fff; }
.mid-moment--third { grid-template-columns: 60px minmax(0,.75fr) minmax(0,1fr); gap: clamp(20px,4vw,65px); align-items: start; margin: 85px 0 0 12%; padding: 38px 0 0; border-top: 1px solid rgba(255,255,255,.32); }
.mid-moment--third .mid-moment__index { padding-top: 8px; color: #fff; background: transparent; border: 0; }
.mid-moment--third h3 { color: var(--orange, #FF7849); }

/* Warm typography introduces the people without suggesting a fictional portrait. */
.mid-founder { padding: clamp(95px,10vw,150px) 0 70px; background: var(--cream, #FAF9F6); color: var(--ink, #20252B); }
.mid-founder__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); gap: clamp(65px,10vw,160px); }
.mid-founder .mid-kicker { color: var(--blue, #2563EB); }
.mid-founder__heading h2 { max-width: 690px; margin-top: 18px; color: var(--navy, #14213D); }
.mid-founder__copy { max-width: 590px; }
.mid-founder__copy p { color: var(--ink, #20252B); font-size: 18px; line-height: 1.7; }
.mid-founder__copy p + p { margin-top: 24px; }
.mid-founder__statement { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: end; margin-top: clamp(75px,10vw,145px); padding: 45px clamp(30px,5vw,75px); border: 0; border-radius: 3px 90px 3px 3px; background: var(--orange, #FF7849); color: var(--navy, #14213D); }
.mid-founder__statement > span { color: var(--navy, #14213D); font-size: 11px; letter-spacing: .08em; }
.mid-founder__statement strong { font-size: clamp(42px,5.5vw,80px); line-height: 1; }

/* One feature, two editorial notes, and three supporting details. */
.mid-changes { padding: clamp(95px,10vw,150px) 0; background: var(--sky, #DDEEFF); color: var(--ink, #20252B); }
.mid-changes .mid-kicker { color: #1D4ED8; }
.mid-changes h2 { color: var(--navy, #14213D); }
.mid-changes__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.75fr); gap: clamp(45px,8vw,120px); align-items: center; max-width: none; margin-bottom: clamp(60px,7vw,100px); }
.mid-changes__head h2 { max-width: 750px; margin-top: 18px; }
.mid-changes__image { margin: 0; }
.mid-changes__image img { width: 100%; aspect-ratio: 1.22; object-fit: cover; background: #b7d2f5; border-radius: 100px 3px 3px 3px; }
.mid-changes__list { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 0 clamp(25px,3.5vw,55px); padding: 0; margin: 0; list-style: none; }
.mid-changes__list li { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 26px 0 35px; border-top: 1px solid #a6bddb; }
.mid-changes__list li:nth-child(1) { grid-column: span 5; padding: clamp(30px,4vw,55px); border: 0; border-radius: 3px 65px 3px 3px; background: var(--blue, #2563EB); color: #fff; }
.mid-changes__list li:nth-child(2) { grid-column: span 3; }
.mid-changes__list li:nth-child(3) { grid-column: span 4; }
.mid-changes__list li:nth-child(n+4) { grid-column: span 4; margin-top: 45px; }
.mid-changes__number { padding: 0; color: #1D4ED8; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.mid-changes__list li:first-child .mid-changes__number { color: #fff; }
.mid-changes__list p { max-width: none; font-size: 17px; line-height: 1.65; }
.mid-changes__list li:first-child p { font-size: clamp(19px,1.7vw,23px); }
.mid-changes__list p strong { font-weight: 800; }

@media (max-width: 900px) {
  .mid-intro__grid { grid-template-columns: 1fr; gap: 45px; padding: 80px 0; }
  .mid-intro__title { max-width: 770px; font-size: clamp(52px,9vw,80px); }
  .mid-intro__copy { max-width: 650px; }
  .mid-stage--one, .mid-stage--two { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; }
  .mid-stage--two { padding-left: 0; }
  .mid-stage--three .mid-stage__content { grid-column: 6 / 13; }
  .mid-plan__layout { gap: 45px; }
  .mid-blueprint { padding: 12px; }
  .mid-founder__grid { gap: 50px; }
  .mid-changes__list li:nth-child(1) { grid-column: span 6; }
  .mid-changes__list li:nth-child(2), .mid-changes__list li:nth-child(3) { grid-column: span 3; }
}
@media (max-width: 700px) {
  .mid-intro, .mid-process, .mid-plan, .mid-transformation, .mid-founder, .mid-changes { font-size: 17px; }
  .mid-section-head h2, .mid-plan h2, .mid-founder h2, .mid-changes h2 { font-size: clamp(37px,9vw,52px); }
  .mid-intro__inner { padding-top: 27px; padding-bottom: 27px; }
  .mid-intro__topline { font-size: 10px; }
  .mid-intro__grid { gap: 35px; padding: 74px 0 70px; }
  .mid-intro__title { font-size: clamp(46px,11vw,68px); }
  .mid-intro__title small { margin-top: 20px; font-size: 20px; }
  .mid-intro__copy p { font-size: 18px; }
  .mid-intro__scope { margin-top: 27px; }
  .mid-intro__scope span:first-child { width: 65px; height: 65px; font-size: 21px; }
  .mid-intro__footer { display: flex; flex-wrap: wrap; gap: 10px 25px; font-size: 10px; }
  .mid-process, .mid-plan, .mid-changes { padding: 85px 0 95px; }
  .mid-section-head { margin-bottom: 48px; }
  .mid-stage, .mid-stage--one, .mid-stage--two, .mid-stage--three { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .mid-stage + .mid-stage { margin-top: 78px; }
  .mid-stage--one .mid-stage__content { order: -1; }
  .mid-stage--two .mid-stage__content { order: 0; }
  .mid-stage--two .mid-stage__figure { order: 1; }
  .mid-stage--one .mid-stage__figure, .mid-stage--two .mid-stage__figure { margin-top: 28px; }
  .mid-stage--one .mid-stage__figure img { aspect-ratio: 1.18; border-radius: 3px 55px 3px 3px; }
  .mid-stage--two .mid-stage__figure { width: 91%; margin-left: auto; }
  .mid-stage--two .mid-stage__figure img { aspect-ratio: 1.05; border-radius: 65px 3px 3px 3px; }
  .mid-stage--three .mid-stage__figure img { aspect-ratio: 1.22; border-radius: 3px 3px 3px 60px; }
  .mid-stage--three .mid-stage__content { margin: 24px 0 0 7%; padding: 28px; }
  .mid-stage__number { width: 48px; height: 48px; }
  .mid-stage h3 { margin: 18px 0 15px; font-size: clamp(28px,7.5vw,38px); }
  .mid-stage__content p { font-size: 17px; }
  .mid-stage__flow { right: -8px; padding: 13px 15px; }
  .mid-process__cta { margin-top: 42px; }
  .mid-process__cta .book-button { width: 100%; justify-content: center; }
  .mid-plan__layout { grid-template-columns: 1fr; gap: 45px; }
  .mid-plan__copy { margin-top: 25px; }
  .mid-plan__copy p { font-size: 17px; }
  .mid-blueprint { width: 90%; max-width: 450px; margin: 0 auto; }
  .mid-blueprint__sheet { min-height: 320px; }
  .mid-blueprint__sheethead { padding-bottom: 35px; }
  .mid-transformation { padding: 95px 0 100px; }
  .mid-transformation__heading { margin-bottom: 60px; }
  .mid-transformation__heading h2 { font-size: clamp(43px,10.5vw,65px); }
  .mid-moment h3 { font-size: clamp(32px,8vw,44px); }
  .mid-moment p { font-size: 17px; }
  .mid-moment--first { grid-template-columns: 42px 1fr; gap: 16px; padding: 28px 0 55px; }
  .mid-moment--first p { grid-column: 2; margin-top: 4px; }
  .mid-moment--second { display: block; margin: 0; }
  .mid-moment__image img { aspect-ratio: 1.18; border-radius: 3px 65px 3px 3px; }
  .mid-moment__body { padding: 30px 0 0 8%; }
  .mid-moment__body h3 { margin: 18px 0 16px; }
  .mid-moment--third { grid-template-columns: 42px 1fr; gap: 16px; margin: 60px 0 0; padding-top: 28px; }
  .mid-moment--third p { grid-column: 2; margin-top: 4px; }
  .mid-founder { padding: 90px 0 50px; }
  .mid-founder__grid { grid-template-columns: 1fr; gap: 32px; }
  .mid-founder__copy p { font-size: 17px; }
  .mid-founder__statement { grid-template-columns: 1fr auto; gap: 16px; margin-top: 65px; padding: 32px 28px; border-radius: 3px 65px 3px 3px; }
  .mid-founder__statement strong { grid-column: 1 / -1; grid-row: 1; font-size: clamp(40px,10vw,60px); }
  .mid-founder__statement > span { grid-row: 2; }
  .mid-changes__head { grid-template-columns: 1fr; gap: 35px; margin-bottom: 50px; }
  .mid-changes__image { width: 90%; margin-left: auto; }
  .mid-changes__image img { aspect-ratio: 1.28; border-radius: 65px 3px 3px 3px; }
  .mid-changes__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .mid-changes__list li:nth-child(1) { grid-column: 1 / -1; margin: 0 0 30px; padding: 32px; }
  .mid-changes__list li:nth-child(2), .mid-changes__list li:nth-child(3) { grid-column: span 1; }
  .mid-changes__list li:nth-child(n+4) { grid-column: 1 / -1; margin-top: 0; }
  .mid-changes__list li { gap: 12px; padding: 22px 0 28px; }
  .mid-changes__list p { font-size: 16px; }
  .mid-changes__list li:first-child p { font-size: 19px; }
}
@media (max-width: 500px) {
  .mid-changes__list li:nth-child(2), .mid-changes__list li:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 390px) {
  .mid-intro__title { font-size: 43px; }
  .mid-intro__topline { font-size: 9px; }
  .mid-stage--three .mid-stage__content { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mid-intro *, .mid-process *, .mid-plan *, .mid-transformation *, .mid-founder *, .mid-changes * { animation: none !important; transition: none !important; }
  .js .mid-process .reveal, .js .mid-plan .reveal, .js .mid-transformation .reveal, .js .mid-founder .reveal, .js .mid-changes .reveal { opacity: 1; transform: none; }
}
