/* ========================================================================== 
   Huda Academy — Academics overview (/academics/)

   The Academic Promise and Learning Pathway are the first two developed body
   sections. The sections after them remain independently replaceable through
   the section-by-section review loop.

   The final related-page mosaic is different: that pattern is already settled
   for interior navigation on /about/ and is reproduced here with acad-prefixed
   classes so neither page can accidentally restyle the other.
   ========================================================================== */

.acad {
  --acad-paper: #F8F4EE;
  --acad-tint: #EEE7DC;
  --acad-line: rgba(52,35,26,.16);
  --acad-soft: #68554D;
  /* Step 1 of the progression ramp. Steps 2-4 override it per card, so the
     accent deepens as the challenge does. Measured 5.30:1 at its worst against
     the card gradient; --tan was the natural first step and fails at 2.52. */
  --acad-prog-1: #B23B29;
  padding-bottom: 0;
  background: var(--acad-paper);
  color: var(--ink);
}

.acad-section__index small,
.acad-eyebrow,
.acad-feature__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Academic Promise: the same editorial hierarchy as the opening Mission
   section, expressed with the Academics page's existing type and palette. */
.acad-promise {
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: clamp(95px, 11vw, 170px) clamp(24px, 8vw, 140px);
  border-top: 1px solid var(--acad-line);
  background: var(--acad-paper);
}
.acad-promise__head {
  display: grid;
  grid-template-columns: minmax(160px, .34fr) minmax(0, 1.66fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  padding-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--acad-line);
}
.acad-promise__kicker {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 6px;
}
.acad-promise__kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  flex: none;
  background: var(--terracotta);
}
.acad-promise__kicker p,
.acad-promise__practice > span,
.acad-promise__label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.acad-promise__head .acad-eyebrow { margin-bottom: 14px; }
.acad-promise h2 {
  max-width: 920px;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(46px, 5vw, 74px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.025em;
}
.acad-promise__layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
  padding-top: clamp(36px, 4.5vw, 60px);
}
.acad-promise__narrative > p {
  margin: 0;
  color: #5C4C46;
  font-size: 18px;
  line-height: 1.8;
}
.acad-promise__narrative .acad-promise__lead {
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 600;
  line-height: 1.42;
}
.acad-promise__narrative > p + p { margin-top: 26px; }
/* THE PROMISE CARD FOLLOWS THE READER DOWN THIS SECTION. Client instruction,
   2026-09-19. It is the one sentence the whole section is arguing for, and the
   narrative beside it is 810px against the card's 306px, so without this the
   promise scrolls out of sight two paragraphs before the argument for it ends.
   504px of travel, which is enough for the behaviour to read as deliberate
   rather than as a jitter.

   `top: 112px` IS NOT ARBITRARY. `.topstack` in site.css is
   `position:sticky; top:calc(-1 * var(--banner-h))`, so the banner scrolls
   away and the NAV pins, measured at exactly 88px tall on this page. 112 is
   that 88 plus 24px of air. `.acr-meaning-head` elsewhere uses `top: 90px`,
   which clears the same nav by 2px and sits almost touching it; this is the
   same idea with room to breathe.

   `align-self: start` is redundant today - `.acad-promise__layout` already
   sets `align-items: start` - and is stated anyway, because it is the ONE
   declaration this behaviour cannot survive without. A grid item that
   stretches fills its row, and an element the full height of its containing
   block has nowhere to travel: sticky would silently do nothing and look like
   a browser bug. Changing the parent to `stretch` later must not quietly
   switch this off.

   `overflow: hidden` below is on the card ITSELF and is harmless - only an
   ANCESTOR's overflow re-parents a sticky element. That is also why site.css
   sets `html,body{overflow-x:clip}` rather than `hidden`, and the note there
   says so. Do not "tidy" it to hidden.

   Switched off below 760px, where the layout stops being two columns. */
.acad-promise__statement {
  position: sticky;
  top: 112px;
  align-self: start;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: clamp(42px, 4.8vw, 64px);
  background: linear-gradient(145deg, #79281E, #601F16);
  color: #FCF7EE;
  box-shadow: 0 30px 70px rgba(71,35,19,.13);
}
.acad-promise__noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .045;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.acad-promise__mark {
  display: block;
  margin-bottom: 25px;
  color: #CFAF82;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 66px;
  font-weight: 600;
  line-height: .7;
}
.acad-promise__label {
  display: block;
  margin-bottom: 26px;
  color: #FFD27A;
}
.acad-promise__statement p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 600;
  line-height: 1.45;
}
.acad-promise__practice {
  margin-top: clamp(40px, 5vw, 62px);
  padding-top: 34px;
  border-top: 1px solid var(--acad-line);
}
.acad-promise__practice > span { color: var(--terracotta-deep); }
.acad-promise__practice h3 {
  margin: 19px 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(29px, 2.6vw, 39px);
  font-weight: 600;
  line-height: 1.08;
}
.acad-promise__practice p {
  margin: 0;
  color: #5C4C46;
  font-size: 17px;
  line-height: 1.75;
}

.acad-section {
  padding: clamp(76px, 10vw, 144px) 0;
  border-top: 1px solid var(--acad-line);
  background: var(--acad-paper);
}
.acad-section--tint { background: var(--acad-tint); }
.acad-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
.acad-section__index {
  padding-top: 4px;
  color: var(--terracotta);
}
.acad-section__index span {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(76px, 9vw, 132px);
  font-weight: 600;
  line-height: .72;
  color: transparent;
  -webkit-text-stroke: 1px rgba(168,50,38,.38);
}
.acad-section__index small {
  display: block;
  margin-top: 24px;
  color: var(--terracotta-deep);
}
.acad-section__content { min-width: 0; }
.acad-eyebrow {
  margin: 0 0 16px;
  color: var(--terracotta);
}
.acad-section h2,
.acad-links h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.65rem, 5.4vw, 4.9rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.025em;
}
.acad-brief {
  max-width: 760px;
  margin: 28px 0 0;
  color: #4C3A31;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.72;
}
.acad-direction {
  max-width: 740px;
  margin: 34px 0 0;
  padding: 18px 20px;
  border-left: 3px solid var(--tan);
  background: rgba(255,255,255,.48);
  color: var(--acad-soft);
  font-size: .92rem;
  line-height: 1.65;
}
.acad-direction strong { color: var(--ink); }

/* Learning Pathway: promoted one-to-one from the approved lab direction.
   At desktop sizes the inner composition is deliberately 70vw, leaving the
   requested 15% breathing room on both sides. Below 1180px that fixed margin
   yields to safe responsive gutters so the five-stage story remains legible. */
.acad-pathway {
  --path-cream: #F2EFEB;
  --path-ink: #181411;
  --path-muted: #69635C;
  --path-wine: #6E2523;
  --path-gold: #C99544;
  --path-line: rgba(110,37,35,.22);
  position: relative;
  min-height: 780px;
  overflow: hidden;
  padding: clamp(70px, 8vw, 120px) 0 90px;
  border-top: 1px solid var(--acad-line);
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.78), transparent 36%),
    var(--path-cream);
  color: var(--path-ink);
}
.acad-pathway::before {
  content: "PATHWAY";
  position: absolute;
  top: 20px;
  left: 50%;
  color: rgba(110,37,35,.035);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(120px, 18vw, 290px);
  letter-spacing: -.06em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  translate: -50% 0;
}
.acad-pathway__inner {
  position: relative;
  z-index: 2;
  width: 70%;
  max-width: 1450px;
  margin: 0 auto;
}
.acad-pathway__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  align-items: end;
  gap: 60px;
  margin: 0 auto 76px;
}
.acad-pathway__kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 17px;
  color: var(--path-wine);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.acad-pathway__kicker::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}
.acad-pathway__heading h2 {
  max-width: 850px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 6vw, 92px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .94;
}
.acad-pathway__intro {
  margin: 0 0 5px;
  color: var(--path-muted);
  font-size: 17px;
  line-height: 1.65;
}
.acad-pathway__timeline { position: relative; }
.acad-pathway__rail {
  position: absolute;
  top: 30px;
  right: 9%;
  left: 9%;
  height: 1px;
  background: var(--path-line);
}
.acad-pathway__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--path-wine), var(--path-gold));
  transform: scaleX(0);
  transform-origin: left;
  animation: acad-pathway-draw 1.3s .25s cubic-bezier(.2, .75, .2, 1) forwards;
}
.acad-pathway__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 46px);
}
.acad-pathway__stage {
  position: relative;
  min-width: 0;
  padding-top: 76px;
}
.acad-pathway__stage::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  width: 1px;
  height: 30px;
  background: var(--path-line);
}
.acad-pathway__node {
  position: absolute;
  z-index: 2;
  top: 17px;
  left: 50%;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 6px solid var(--path-cream);
  border-radius: 50%;
  background: var(--path-wine);
  box-shadow: 0 0 0 1px var(--path-wine);
  color: #FFFFFF;
  font-size: 8px;
  font-weight: 700;
  opacity: 0;
  transform: scale(.4);
  translate: -50% 0;
  animation: acad-pathway-node 420ms cubic-bezier(.2, .8, .2, 1) forwards;
}
.acad-pathway__stage:nth-child(2) .acad-pathway__node { animation-delay: 170ms; }
.acad-pathway__stage:nth-child(3) .acad-pathway__node { animation-delay: 340ms; }
.acad-pathway__stage:nth-child(4) .acad-pathway__node { animation-delay: 510ms; }
.acad-pathway__stage:nth-child(5) .acad-pathway__node { animation-delay: 680ms; }
.acad-pathway__image {
  position: relative;
  height: clamp(150px, 15vw, 235px);
  overflow: hidden;
  background: #D5D1CB;
}
.acad-pathway__stage:first-child .acad-pathway__image { border-radius: 60px 0 0; }
.acad-pathway__stage:last-child .acad-pathway__image { border-radius: 0 60px 0 0; }
.acad-pathway__stage:nth-child(2) .acad-pathway__image,
.acad-pathway__stage:nth-child(4) .acad-pathway__image { margin-top: 34px; }
.acad-pathway__stage:nth-child(3) .acad-pathway__image {
  height: clamp(180px, 18vw, 276px);
  margin-top: -20px;
}
.acad-pathway__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(26,14,7,.24));
  pointer-events: none;
}
.acad-pathway__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.76) contrast(.96);
  transition: transform 550ms cubic-bezier(.2, .7, .2, 1), filter 400ms ease;
}
.acad-pathway__content { padding: 24px 4px 0; }
.acad-pathway__range {
  display: block;
  margin-bottom: 12px;
  color: var(--path-wine);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.acad-pathway__stage h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 2.2vw, 38px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
}
.acad-pathway__stage p {
  margin: 14px 0 0;
  color: var(--path-muted);
  font-size: 13px;
  line-height: 1.55;
}
.acad-pathway__stage a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  color: var(--path-wine);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}
.acad-pathway__stage a span {
  font-size: 16px;
  transition: transform 220ms ease;
}
.acad-pathway__stage a:focus-visible {
  outline: 3px solid var(--path-wine);
  outline-offset: 4px;
}
@keyframes acad-pathway-draw { to { transform: scaleX(1); } }
@keyframes acad-pathway-node { to { opacity: 1; transform: scale(1); } }

/* Section 03 turns vertical reading into a short, scroll-led journey. The
   heading stays spatially anchored while each program area gets its own card.
   The controller only moves transforms; without it, this remains a complete
   native horizontal scroller. */
.acad-horizontal {
  position: relative;
  border-top: 1px solid var(--acad-line);
  background: var(--acad-paper);
}
.acad-horizontal__sticky {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: clamp(30px, 5vh, 54px) 0 clamp(22px, 3.5vh, 38px);
}
.acad-horizontal__heading {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto clamp(22px, 3.2vh, 34px);
  text-align: left;
}
.acad-horizontal__heading h2 {
  margin: 0;
  max-width: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.025em;
}
.acad-horizontal__heading .acad-brief {
  max-width: 720px;
  margin-top: 16px;
  font-size: clamp(.94rem, 1.2vw, 1.08rem);
  line-height: 1.55;
}
.acad-horizontal__viewport {
  width: 100%;
  overflow: hidden;
}
.acad-horizontal__track {
  display: flex;
  gap: clamp(18px, 2vw, 28px);
  width: max-content;
  padding-inline: max(24px, calc((100vw - 1180px) / 2));
  will-change: transform;
}
.acad-horizontal__card {
  width: min(68vw, 700px);
  flex: 0 0 auto;
}
.acad-horizontal__media {
  height: clamp(210px, 36vh, 390px);
  overflow: hidden;
  background: #DAD4CA;
}
.acad-horizontal__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.015);
}
.acad-horizontal__content {
  margin-top: 16px;
}
.acad-horizontal__content h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 2.5vw, 2.35rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.015em;
}
.acad-horizontal__content p {
  max-width: 560px;
  margin: 7px 0 0;
  color: var(--acad-soft);
  font-size: .9rem;
  line-height: 1.55;
}
.acad-horizontal__progress {
  width: min(1180px, calc(100% - 48px));
  height: 2px;
  margin: clamp(20px, 3vh, 30px) auto 0;
  overflow: hidden;
  background: rgba(52,35,26,.16);
}
.acad-horizontal__progress-fill {
  width: 100%;
  height: 100%;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Two deliberately quiet editorial bands: a clear thought on the left and a
   concise explanation on the right, without decorative motion or fake data. */
.acad-simple {
  padding: clamp(82px, 9vw, 132px) 0;
  border-top: 1px solid var(--acad-line);
  background: var(--acad-paper);
}
.acad-simple--proof { background: var(--acad-tint); }
.acad-simple__inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: clamp(52px, 8vw, 120px);
  align-items: start;
}
.acad-simple__head h2 {
  max-width: 720px;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.5rem, 4.6vw, 4.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.025em;
}
.acad-simple__body {
  padding-top: 27px;
  color: #4C3A31;
}
.acad-simple__body > p {
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.75;
}
.acad-simple__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(134,37,27,.42);
  color: var(--terracotta-deep);
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}
.acad-simple__link::after {
  content: "\2192";
  font-size: 1rem;
  transition: transform 180ms cubic-bezier(.23, 1, .32, 1);
}
.acad-simple__link:active { transform: scale(.97); }
.acad-simple__link:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 5px;
}
.acad-proof-list {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--acad-line);
}
.acad-proof-list li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--acad-line);
}
.acad-proof-list strong {
  color: var(--terracotta-deep);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.acad-proof-list span {
  color: var(--acad-soft);
  font-size: .9rem;
  line-height: 1.55;
}

.acad-progression span {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.1;
}

/* FOUR CARDS THAT ESCALATE. The row list read as a table of contents; the
   section is arguing that what is asked of a child rises year on year, so the
   cards say that themselves rather than leaving it to the sentences:

     - the rule along the top thickens 2px -> 5px across the four
     - the numeral deepens #B23B29 -> #A83226 -> #92291F -> #86251B
     - the numeral is the ornament, set in the heading serif at 2.6rem,
       which is where the visual interest comes from. Scale contrast, not
       decoration: nothing here is added that is not already saying something.

   MEASURED, because escalating a colour is exactly how small text quietly
   stops being readable. Against the card face #F8F4EE and against the foot of
   its gradient #F9F1E7, worst case of each: the four numerals run 5.30, 6.18,
   7.31 and 8.54 to one against a 3:1 floor for large text; the body at
   --acad-soft holds 6.27 against a 4.5 floor. --tan was the obvious first step
   of the ramp and was dropped: it measures 2.52 and fails.

   NO HOVER STATE AND NO LIFT. These are not links and nothing here is
   clickable, so a shadow that rises under the cursor would be advertising an
   interaction that does not exist. The stages are already navigable from
   .acad-stage-list higher up the page.

   NO ANIMATION, so nothing depends on a transition finishing or on JS running
   at all - the cards are complete on first paint. */
.acad-progression {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: progression;
}
.acad-progression li {
  counter-increment: progression;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 30px;
  border: 1px solid var(--acad-line);
  border-top: 2px solid var(--acad-prog-1);
  /* A real two-stop gradient rather than a flat fill. Barely a step - the two
     ends are four luminance points apart - but it gives the card a foot and a
     head instead of one uniform plate. */
  background: linear-gradient(180deg, var(--acad-paper) 0%, #F9F1E7 100%);
}

/* The numeral. Cormorant sets figures beautifully at size and the page already
   pays for the face, so this costs nothing and is the single biggest reason
   the cards stopped looking plain. */
.acad-progression li::before {
  content: "0" counter(progression);
  order: 1;
  margin-bottom: 12px;
  color: var(--acad-prog-1);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  line-height: .8;
  letter-spacing: -.02em;
}

/* A gold hairline between the numeral and the heading. The palette carries
   --gold and nothing on this page was using it; at 1px it is warmth rather
   than an element, and it never has text on it.

   IN THE FLOW, NOT PINNED. The first version placed it absolutely at top:74px,
   which put it one pixel above the heading - touching it - and was a number
   picked to fit today's numeral rather than derived from anything. Any change
   to the numeral's size or the card's padding would have moved the text and
   left the rule behind. Ordering the flex children instead means the spacing
   is stated once, as margin, and the rule cannot drift. */
.acad-progression li::after {
  content: "";
  order: 2;
  width: 26px;
  height: 1px;
  margin-bottom: 16px;
  background: var(--gold);
}
.acad-progression span { order: 3; }
.acad-progression small { order: 4; }

.acad-progression span {
  display: block;
  margin-bottom: 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ink);
}
.acad-progression small {
  color: var(--acad-soft);
  font-size: .88rem;
  line-height: 1.6;
}

/* The escalation itself. Four steps, each thicker and deeper than the last. */
.acad-progression li:nth-child(1) { border-top-width: 2px; }
.acad-progression li:nth-child(2) { border-top-width: 3px; --acad-prog-1: #A83226; }
.acad-progression li:nth-child(3) { border-top-width: 4px; --acad-prog-1: #92291F; }
.acad-progression li:nth-child(4) { border-top-width: 5px; --acad-prog-1: #86251B; }

/* Settled interior related-page navigation, following /about/. */
.acad-links {
  padding: clamp(95px, 11vw, 170px) clamp(28px, 8vw, 140px);
  border-top: 1px solid var(--acad-line);
  background: var(--acad-tint);
}
.acad-links__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 50px;
}
.acad-links__head > p {
  max-width: 460px;
  margin: 0;
  color: var(--acad-soft);
  line-height: 1.65;
}
.acad-linkgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  grid-template-rows: repeat(2, 270px);
  gap: 18px;
}
.acad-feature {
  position: relative;
  isolation: isolate;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #86251B;
  color: #FFFFFF;
  text-decoration: none;
}
.acad-feature:first-child { grid-row: 1 / 3; }
.acad-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(29,14,5,.9), rgba(29,14,5,.08) 72%);
}
.acad-feature:not(:first-child)::after {
  background: linear-gradient(0deg,
    rgba(29,14,5,.93) 0%,
    rgba(29,14,5,.9) 46%,
    rgba(29,14,5,.4) 78%,
    rgba(29,14,5,.14) 100%);
}
.acad-feature__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
}
.acad-feature__media img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.acad-feature__body {
  position: relative;
  z-index: 2;
  display: block;
  padding: 34px;
}
.acad-feature__label {
  display: block;
  margin-bottom: 9px;
  color: #FFD27A;
}
.acad-feature__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #FFFFFF;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(26px, 3vw, 43px);
  font-weight: 600;
  line-height: 1.04;
}
.acad-arrow {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 50%;
  color: #FFFFFF;
  transition: background 200ms ease, color 200ms ease, transform 200ms cubic-bezier(.23, 1, .32, 1);
}
.acad-feature:active { transform: scale(.985); }
.acad-feature:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .acad-pathway__stage:hover .acad-pathway__image img {
    transform: scale(1.045);
    filter: saturate(.95) contrast(1);
  }
  .acad-pathway__stage a:hover span { transform: translateX(5px); }
  .acad-feature:hover .acad-feature__media img { transform: scale(1.05); }
  .acad-feature:hover .acad-arrow {
    background: #FFFFFF;
    color: var(--terracotta);
    transform: rotate(-35deg);
  }
  .acad-simple__link:hover::after { transform: translateX(4px); }
}

@media (max-width: 1200px) {
  /* Two up, then one. Four four-word headings side by side stop being
     readable well before the viewport runs out of room - at 1000px the
     cards were 230px wide and every heading had wrapped. */
  .acad-progression { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acad-pathway__inner { width: calc(100% - 56px); }
  .acad-pathway__grid { gap: 18px; }
  .acad-pathway__stage p { font-size: 12px; }
}

@media (max-width: 900px) {
  .acad-promise__layout {
    grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
    gap: 38px;
  }
  .acad-section__index span { font-size: 78px; }
  .acad-links__head { display: block; }
  .acad-links__head > p { margin-top: 24px; }
}

@media (max-width: 760px) {
  .acad-pathway {
    min-height: 0;
    padding: 70px 0;
  }
  .acad-pathway::before { display: none; }
  .acad-pathway__inner { width: calc(100% - 44px); }
  .acad-pathway__heading {
    display: block;
    margin-bottom: 50px;
  }
  .acad-pathway__intro {
    max-width: 500px;
    margin-top: 22px;
    font-size: 16px;
  }
  .acad-pathway__rail {
    top: 0;
    bottom: 0;
    left: 13px;
    width: 1px;
    height: auto;
  }
  .acad-pathway__rail::after {
    background: linear-gradient(180deg, var(--path-wine), var(--path-gold));
    transform: scaleY(0);
    transform-origin: top;
    animation-name: acad-pathway-draw-mobile;
  }
  .acad-pathway__grid { display: block; }
  .acad-pathway__stage {
    min-height: 210px;
    display: grid;
    grid-template-columns: minmax(120px, 36%) minmax(0, 1fr);
    gap: 22px;
    padding: 0 0 42px 42px;
  }
  .acad-pathway__stage::before { display: none; }
  .acad-pathway__node { top: 0; left: 13px; }
  .acad-pathway__image,
  .acad-pathway__stage:nth-child(n) .acad-pathway__image {
    height: 180px;
    margin: 0;
    border-radius: 0;
  }
  .acad-pathway__stage:first-child .acad-pathway__image { border-radius: 36px 0 0; }
  .acad-pathway__stage:last-child .acad-pathway__image { border-radius: 0 0 36px; }
  .acad-pathway__content { padding: 2px 0 0; }
  .acad-pathway__stage h3 { font-size: 30px; }
  .acad-pathway__stage p { font-size: 13px; }
  .acad-promise__head { display: block; }
  .acad-promise__kicker { margin-bottom: 32px; }
  .acad-promise__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .acad-promise__narrative { display: contents; }
  .acad-promise__lead { order: 1; }
  .acad-promise__narrative > p:not(.acad-promise__lead) { order: 2; }
  .acad-promise__statement {
    /* STATIC AGAIN. Above this width the card sits beside an 810px narrative
       and has somewhere to travel. Here the layout is a single flex column and
       the card is order:3 in the flow, so sticky would pin it over the
       paragraphs that follow it rather than beside them. */
    position: static;
    order: 3;
    width: 100%;
    margin-top: 36px;
    padding: 42px 30px;
  }
  .acad-promise__practice { order: 4; }
  .acad-shell { display: block; }
  .acad-section__index {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
  }
  .acad-section__index span {
    width: 48px;
    font-size: 48px;
    line-height: .8;
  }
  .acad-section__index small { margin-top: 0; }
  .acad-horizontal__card { width: 84vw; }
  .acad-horizontal__media { height: clamp(240px, 38vh, 350px); }
  .acad-simple__inner { display: block; }
  .acad-simple__body { max-width: 620px; padding-top: 28px; }
  .acad-linkgrid { display: block; }
  .acad-feature,
  .acad-feature:first-child {
    height: 320px;
    margin-top: 14px;
  }
  .acad-feature:first-child { height: 460px; margin-top: 0; }
}

@media (max-width: 560px) {
  .acad-shell { width: min(100% - 32px, 1180px); }
  .acad-promise { padding-inline: 24px; }
  .acad-simple__inner { width: calc(100% - 32px); }
  .acad-simple__head h2 { font-size: clamp(2.25rem, 11vw, 3.25rem); }
  .acad-proof-list li { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .acad-horizontal__heading,
  .acad-horizontal__progress { width: calc(100% - 32px); }
  .acad-horizontal__track { gap: 16px; padding-inline: 16px; }
  .acad-horizontal__sticky { padding-block: 26px 22px; }
  .acad-horizontal__heading { margin-bottom: 20px; }
  .acad-horizontal__heading h2 { font-size: clamp(2.15rem, 10.5vw, 3.1rem); }
  .acad-horizontal__heading .acad-brief { margin-top: 10px; }
  .acad-feature__body { padding: 23px 22px 26px; }
  .acad-feature:first-child { height: 400px; }
  .acad-feature:not(:first-child) { height: 300px; }
}

@media (max-width: 480px) {
  .acad-pathway__stage { grid-template-columns: 1fr; }
  .acad-pathway__image,
  .acad-pathway__stage:nth-child(n) .acad-pathway__image { height: 220px; }
}

@keyframes acad-pathway-draw-mobile { to { transform: scaleY(1); } }

/* Short landscape viewports cannot comfortably pin the full composition.
   They keep a native, touch-scrollable row with the same cards instead. */
@media (max-height: 560px) {
  .acad-horizontal { height: auto !important; }
  .acad-horizontal__sticky {
    position: relative;
    top: auto;
    height: auto;
    padding-block: 54px 44px;
  }
  .acad-horizontal__viewport { overflow-x: auto; scrollbar-width: thin; }
  .acad-horizontal__track { transform: none !important; will-change: auto; }
  .acad-horizontal__media { height: 280px; }
  .acad-horizontal__progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .acad-pathway *,
  .acad-pathway *::before,
  .acad-pathway *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .acad-horizontal { height: auto !important; }
  .acad-horizontal__sticky { position: relative; top: auto; height: auto; }
  .acad-horizontal__viewport { overflow-x: auto; scrollbar-width: thin; }
  .acad-horizontal__track { transform: none !important; will-change: auto; }
  .acad-horizontal__progress { display: none; }
}

@media (max-width: 420px) {
  .acad-promise { padding-inline: 18px; }
  .acad-promise__statement { padding: 38px 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .acad-feature__media img,
  .acad-arrow { transition: none; }
}

@media (max-width: 560px) {
  .acad-progression { grid-template-columns: 1fr; gap: 12px; }
}