/**
 * Next Is Here 2026 (charterholder LP, ticket #45840533).
 * Page-scoped styles: everything under .nih27 / #next-is-here-2027.
 * Chrome (menus, footer, .next-button*, fonts) comes from the shared
 * next-is-here-assets stylesheets. Cache-busting ?v= is appended by
 * templates/static-html-page.php.
 *
 * Type and colour come from the Figma comp `CAIA site updates - Desktop`,
 * frame Main (4087:1484), 1728px wide. Every desktop value below is the
 * literal comp value, so the page is 1:1 at a 1728px viewport; tablet and
 * mobile scale down from there.
 *
 * Figma reports Gotham with non-standard weights (325/350/400/425) and two
 * different style names ("Regular" and "Bold") that both render at the same
 * stroke weight in the exported comp. Measured against the PDF export, the
 * faces in use map to the four we actually ship in fonts.css:
 *
 *   Figma Book (325)             -> 400
 *   Figma Medium (350)           -> 500
 *   Figma Regular (400) / Bold   -> 700
 *   Figma Black (425)            -> 700 (no 900 in the licensed set)
 *
 * The comp's italic accents are Gotham Italic, not the Montserrat the layer
 * panel reports: the exported glyphs use Gotham's single-storey italic `a`.
 *
 * Line heights written as 100% in the comp are Figma's "Auto" (~1.2); the
 * explicit 119% / 150% / 180% values are reproduced exactly.
 *
 * Breakpoints: desktop (default) / tablet <=1024px / mobile <=640px. Each
 * one has its own comp: `CAIA site updates - Desktop` (1728), `- Tablet`
 * (1024) and `- Mobile` (402), all frame Main, all reproduced literally at
 * their own frame width.
 *
 * Hero artwork is CAIA's final export, one crop per breakpoint. The tablet
 * and mobile crops match this page's hero cards; the desktop one is cut for
 * the taller Stacker card, so it is anchored bottom here.
 */

.nih27 {
  /* Comp tokens (Figma §1.1). */
  --nih27-black: #000000;
  --nih27-white: #ffffff;
  --nih27-orange: #fd7518;
  --nih27-gray: #5f5f5f;
  --nih27-purple: #5050a7;
  --nih27-light-blue: #dfedf5;

  font-family: "Gotham A", "Gotham B", serif;
  color: var(--nih27-black);
}

.nih27 *,
.nih27 *::before,
.nih27 *::after {
  box-sizing: border-box;
}

/* The one rule outside .nih27. The inset hero below exposes the page canvas
   down both sides, and the shared chrome leaves html/body transparent, which
   Chrome paints dark for a visitor whose OS is in dark mode. */
body {
  background-color: #fff;
}

/* Comp content column: 1560px inside a 1728px frame (84px gutters). */
.nih27 .nih27-inner {
  width: min(1560px, 100% - 64px);
  margin: 0 auto;
  padding: 0;
}

/* The shared landing CSS gives main a dark background; content sections
   are light in the 2026 design. */
.nih27 section:not(.nih27-hero) {
  margin: 0;
  background-color: var(--nih27-white);
}

/* Italic orange accents. The comp sets them at two different weights: Book
   inside the intro headline, Bold inside the hero headline. */
.nih27 .nih27-accent {
  color: var(--nih27-orange);
  font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Hero                                                               */
/* ------------------------------------------------------------------ */

/* Both comps draw the hero as a card inset from the page edges with its two
   bottom corners rounded; the artwork bleeds off the top. */
.nih27-hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: stretch;
  margin: 0 30px;
  border-radius: 0 0 72px 72px;
  background-color: var(--nih27-white);
  /* CAIA's hero crops are cut to the Stacker card ratios; this card is much
     shallower (1668 x 660 against the crop's 1669 x 1092), so the artwork is
     anchored to its foot, which is where the cream clearing that carries the
     black panel copy sits. */
  background-image: url("/app/themes/caia2025/templates/static/next-is-here-assets/img/hero-wave.webp");
  background-size: cover;
  background-position: center bottom;
}

.nih27-hero .nih27-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Same placement as the Stacker LP: 333px wide, 53px down from the top of
   the hero card and 87px in from its right edge. The offset is 33 rather
   than 0 because this page's text column is 63px wider than Stacker's, so
   the two lockups would otherwise sit at different insets. */
.nih27-hero__logo {
  position: absolute;
  top: 53px;
  right: 33px;
}

.nih27-hero__logo img {
  display: block;
  width: 333px;
  height: auto;
}

.nih27-hero__logo:hover {
  opacity: 0.85;
  text-decoration: none;
}

/* display-hero: Gotham Black 220px / lh 90%. */
.nih27-hero__title {
  margin: 24px 0 0;
  color: var(--nih27-white);
  font-size: 220px;
  line-height: 0.9;
  text-align: left;
}

.nih27-hero__title strong {
  font-weight: 700;
}

/* "Gotham XLight" is declared in the shared theme.css against a caia.org URL
   that 404s, so this always falls back: 300 is the lightest face we actually
   ship and is the closest to the comp's extra-light cut. Same value as the
   sibling Stacker LP. At 400 the fallback ran wide enough to break "is here."
   onto two lines at 375px, where Stacker keeps it on one. */
.nih27-hero__title span {
  font-family: "Gotham XLight", "Gotham A", "Gotham B", serif;
  font-weight: 300;
}

.nih27-hero__panel {
  align-self: flex-end;
  max-width: 580px;
  text-align: right;
  color: var(--nih27-black);
}

/* h2-bold: 48px / lh 119%, with the "now" span in Gotham Bold Italic. */
.nih27-hero__headline {
  margin: 0 0 24px;
  font-size: 48px;
  line-height: 1.19;
  font-weight: 700;
}

.nih27-hero__headline .nih27-accent {
  font-weight: 700;
}

/* body-lg: Gotham Book 20px. */
.nih27-hero__teaser {
  margin: 0 0 32px;
  color: var(--nih27-black);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

.nih27-hero__cta {
  display: flex;
  justify-content: flex-end;
}

/* No arrows. The shared chrome stylesheet decorates every .next-button with
   pseudo-elements: a 24px inline chevron on ::after, and on --big-arrow a 55px
   disc (::before) plus its glyph (::after) floated 78px past the right edge.
   This page ships plain pills, so all of them are switched off here and the
   space they reserved is reclaimed. */
.nih27 .next-button::before,
.nih27 .next-button::after {
  content: none;
}

/* cta-md: Gotham Bold 28px, sentence case, centred in a 325x73 pill. The
   shared rule pushes label and chevron apart with space-between + a 20px gap
   and tracks the label out in caps; with no chevron the label centres. */
.nih27 .next-button {
  justify-content: center;
  gap: 0;
  padding: 21px 68px 20px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

/* --big-arrow pads the right edge for the disc (and --orange.--big-arrow
   re-declares the shorthand), so both are normalised. */
.nih27 .next-button--big-arrow {
  padding-right: 68px;
  margin-right: 0;
}

.nih27 .next-button--orange {
  background-color: var(--nih27-orange);
  border-color: var(--nih27-orange);
  color: var(--nih27-white);
}

.nih27 .next-button--orange:hover,
.nih27 .next-button--orange:focus-visible {
  background-color: var(--nih27-white);
  color: #c94f00;
  border-color: var(--nih27-orange);
}

/* ------------------------------------------------------------------ */
/* Intro: headline + copy                                             */
/* ------------------------------------------------------------------ */

.nih27-intro {
  padding: 90px 0 70px;
}

/* Comp columns: 1012px of headline, 456px of copy, 92px apart. */
.nih27-intro .nih27-inner {
  display: grid;
  grid-template-columns: 1fr 456px;
  gap: 92px;
  align-items: start;
}

/* h2: 48px / lh 150%, "today's markets" in Gotham Book Italic. */
.nih27-intro h2 {
  margin: 0;
  font-size: 48px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--nih27-black);
}

.nih27-intro h2 .nih27-accent {
  font-weight: 400;
}

/* body-lg: Gotham Book 20px, justified. "The CAIA Charter" is Bold in the
   comp; the client asked for it in orange italic as well (ticket #45840533),
   so it carries .nih27-accent and the weight rule below keeps it bold. */
.nih27-intro__copy {
  margin: 0;
  padding-top: 8px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  text-align: justify;
  color: var(--nih27-black);
}

.nih27-intro__copy strong {
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Three callouts                                                     */
/* ------------------------------------------------------------------ */

/* The section is a size container so the row below can scale itself against
   the page width. The tracks are content-sized (the three pills are all
   different lengths and the comp lets them be), so nothing here can be
   expressed as a fraction of the track -- it has to come from the width the
   row is given. 100cqw is the section width, i.e. the viewport minus the
   scrollbar, which is what 100vw would have got wrong. */
.nih27-callouts {
  container-type: inline-size;
  padding: 20px 0 80px;
}

/* Three rows (icon / pill / copy) so the columns can share them via subgrid
   below. row-gap stays 0: the spacing inside a column comes from the margins.
   The row is inset 32px either side of the text column, as in the comp, and
   the three 431px columns sit 102px apart.

   Below the 1624px frame the text column is (100cqw - 64px) rather than its
   full 1560px, and the pills are nowrap: at 20px they need every one of those
   1560px, so on a narrower desktop the row used to push a scrollbar onto the
   page. The inset and the gutter between the columns shrink on the same
   fraction as the column itself -- 32/1560 and 102/1560 -- so the row keeps
   the comp's proportions all the way down to the tablet breakpoint. Both are
   capped at the comp value, so 1624px and up are untouched.

   Every cqw value in this file is written twice: a browser that does not know
   the unit drops the second declaration and keeps the comp's fixed value,
   which is the layout this page shipped with. */
.nih27-callouts .nih27-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 102px;
  column-gap: clamp(0px, calc((100cqw - 64px) * 0.06538), 102px);
  row-gap: 0;
  padding: 0 32px;
  padding: 0 clamp(0px, calc((100cqw - 64px) * 0.02051), 32px);
}

.nih27-callout {
  text-align: center;
}

/* Subgrid keeps the icons, the pills and the copy of the three columns on
   shared baselines however many lines each label wraps to. */
@supports (grid-template-rows: subgrid) {
  .nih27-callout {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    justify-items: center;
  }
}

/* Double chevron, 32x38, 4px stroke (comp Group 20/26/27).
   Block, not inline-block: next to an inline-block pill the icon shared its
   line whenever the label was short enough to fit beside it, which put the
   icon at the side of "See the Whole Portfolio" instead of above it. */
.nih27-callout__icon {
  display: block;
  width: 32px;
  width: clamp(20px, calc((100cqw - 64px) * 0.02051), 32px);
  height: 38px;
  height: clamp(24px, calc((100cqw - 64px) * 0.02436), 38px);
  margin: 0 auto 26px;
  margin: 0 auto clamp(16px, calc((100cqw - 64px) * 0.01667), 26px);
  background-color: var(--nih27-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 38'%3E%3Cg fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5 16 17 29 5'/%3E%3Cpath d='M3 21 16 33 29 21'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 38'%3E%3Cg fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5 16 17 29 5'/%3E%3Cpath d='M3 21 16 33 29 21'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* pill-label: 20px / lh 180% in a stadium with a 2px black border. The
   180% leading is what gives the pill its 41px height.
   The label never wraps, so the pill can only stay inside its column by
   shrinking with it. Font size tracks the text column (20/1560, held 1.5%
   short of it so the borders, which are the one part that does not scale
   cleanly, still have room); the side padding and the border are in em, so
   the whole stadium keeps the comp's shape at any size. Capped at the comp's
   20px, so the section is unchanged at 1624px and up. The lower bound is
   below anything the desktop range can produce -- the tablet rules take over
   at 1024px, and they drop the pill altogether. */
.nih27-callout h3 {
  display: inline-block;
  margin: 0 0 30px;
  margin: 0 0 clamp(14px, calc((100cqw - 64px) * 0.01923), 30px);
  padding: 0 1.3em;
  border: 0.1em solid var(--nih27-black);
  border-radius: 60px;
  font-size: 20px;
  font-size: clamp(11px, calc((100cqw - 64px) * 0.01262), 20px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.8;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nih27-black);
}

/* body-sm: Gotham Book 16px, centred. It wraps, so it is not what pushed the
   row wide -- but left at 16px it ended up larger than the label above it
   once the pill started shrinking, so it comes down on the same fraction.
   The floor is the 14px the tablet frame uses, which is where this lands
   just before the 1024px breakpoint takes over. */
.nih27-callout p {
  margin: 0 auto;
  max-width: 340px;
  font-size: 16px;
  font-size: clamp(14px, calc((100cqw - 64px) * 0.01026), 16px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--nih27-black);
}

/* ------------------------------------------------------------------ */
/* Full-width divider image (tablet / mobile only)                    */
/* ------------------------------------------------------------------ */

.nih27-divider {
  display: none;
  margin: 0;
}

.nih27-divider img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Levels                                                             */
/* ------------------------------------------------------------------ */

.nih27-levels {
  padding: 10px 0 90px;
}

/* The media column carries roughly half the row in the comp; the two lists
   split the rest. */
.nih27-levels .nih27-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 2.2fr;
  gap: 48px;
}

/* Rule between the two lists, centred in the 48px gutter. */
.nih27-level + .nih27-level {
  position: relative;
}

.nih27-level + .nih27-level::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24px;
  width: 1px;
  background-color: #d8d8d8;
}

/* h2-level: 48px caps. */
.nih27-level h3 {
  margin: 0 0 28px;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--nih27-black);
}

.nih27-level ul {
  margin: 0;
  padding: 0 0 0 20px;
}

/* body-list: Gotham Book 20px / lh 180%, 20px between items. */
.nih27-level li {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--nih27-gray);
}

/* Image stacked over its CTA — in the comp the button sits below the image
   at the column's full width, not floating on top of it. */
.nih27-levels__media {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nih27-levels__image {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background-image: url("/app/themes/caia2025/templates/static/next-is-here-assets/img/levels-bloom.webp");
  background-size: cover;
  background-position: center;
}

/* cta-lg: Gotham Bold 36px on a full-width 80px pill. */
.nih27 .nih27-levels__cta {
  justify-content: center;
  width: 100%;
  padding: 20px 30px;
  font-size: 36px;
  line-height: 1;
  text-transform: none;
}

/* Brand violet for this CTA. border-color matches the fill so the pill reads
   solid: .next-button ships a 2px #4D4646 border that would otherwise outline
   it. Hover mirrors the --blue variant's inversion. */
.nih27 .nih27-levels__cta,
.nih27 .nih27-levels__cta-tablet .next-button {
  background-color: var(--nih27-purple);
  border-color: var(--nih27-purple);
  color: var(--nih27-white);
}

.nih27 .nih27-levels__cta:hover,
.nih27 .nih27-levels__cta:focus-visible,
.nih27 .nih27-levels__cta-tablet .next-button:hover,
.nih27 .nih27-levels__cta-tablet .next-button:focus-visible {
  background-color: var(--nih27-white);
  color: var(--nih27-purple);
}

.nih27-levels__cta-tablet {
  display: none;
  justify-content: flex-end;
  margin-top: 32px;
}

/* ------------------------------------------------------------------ */
/* Curriculum: Next in Practice                                       */
/* ------------------------------------------------------------------ */

.nih27-curriculum {
  padding: 0 0 90px;
}

/* body-lg-regular in caps, orange. */
.nih27-curriculum__eyebrow {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--nih27-orange);
}

/* The right block is 815px in the comp; minmax keeps the headline column
   usable between 1025px and the comp width, where 815px would starve it. */
.nih27-curriculum__top {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, 815px);
  gap: 60px;
  align-items: start;
  margin-bottom: 28px;
}

/* h1: Gotham 64px. */
.nih27-curriculum__top h2 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--nih27-black);
}

/* The right-hand block is set flush right in the comp. */
.nih27-curriculum__lead,
.nih27-curriculum__copy {
  text-align: right;
}

/* body-lg-bold, orange. */
.nih27-curriculum__lead {
  margin: 0 0 20px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--nih27-orange);
}

/* body-lg: Gotham Book 20px; the "Next in Practice" span is Bold Italic. */
.nih27-curriculum__copy {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--nih27-black);
}

.nih27-curriculum__copy strong {
  font-weight: 700;
  font-style: italic;
}

.nih27-curriculum__download {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 48px;
}

/* cta-lg as an underlined text link in the comp, not a button: no pill, no
   arrow disc. */
.nih27 .nih27-curriculum__link {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--nih27-gray);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.nih27 .nih27-curriculum__link:hover,
.nih27 .nih27-curriculum__link:focus-visible {
  color: var(--nih27-black);
}

/* Comp: five 312x642 cards, 20px apart. */
.nih27-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* The panel is a blue tint that clears to white around the half-way mark,
   behind the artwork.
   A size container as well: the card is 296px wide only on the 1624px frame
   and narrows with the grid below it, while the copy inside was fixed at
   24px. "Infrastructure" alone is 167px at that size, so on a 1200px screen
   it ran straight through the card's right padding and was clipped by the
   overflow below. Everything inside the card is sized against the card
   instead, so the copy keeps the comp's measure at any width. */
.nih27-card {
  position: relative;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  aspect-ratio: 312 / 642;
  border-radius: 60px;
  overflow: hidden;
  background-image: linear-gradient(180deg, var(--nih27-light-blue) 0%, var(--nih27-light-blue) 14%, var(--nih27-white) 45%);
}

/* 48 / 38 / 20 against the comp's 296px card. */
.nih27-card__body {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 48px 38px 20px;
  padding: min(48px, 16.216cqw) min(38px, 12.838cqw) min(20px, 6.757cqw);
}

/* curriculum-item-title / -body: both 24px (8.108% of the card), both grey. */
.nih27-card h3 {
  margin: 0 0 20px;
  margin: 0 0 min(20px, 6.757cqw);
  font-size: 24px;
  font-size: min(24px, 8.108cqw);
  line-height: 1.2;
  font-weight: 700;
  color: var(--nih27-gray);
}

.nih27-card p {
  margin: 0;
  font-size: 24px;
  font-size: min(24px, 8.108cqw);
  font-weight: 400;
  line-height: 1.2;
  color: var(--nih27-gray);
}

/* One artwork spans the whole row and each card is a window onto its slice —
   that is what gives every card a different crest instead of five copies of
   the same wave. Sized to 5 cards plus the 4 gaps between them. It covers the
   whole card rather than a strip under the copy: the wave rises to a
   different height in each slice and must not meet a straight clip edge. */
.nih27-card__media {
  position: absolute;
  inset: 0;
  background-image: url("/app/themes/caia2025/templates/static/next-is-here-assets/img/curriculum-wave.webp");
  background-repeat: no-repeat;
  background-size: calc(500% + 4 * 20px) auto;
  background-position-y: bottom;
}

/* A background-position percentage resolves against (area - image), which here
   is -(4·card + 4·gap). Wanting card n offset by -n·(card + gap) works out to
   exactly 25n% for every card width, so this stays correct as the grid flexes. */
.nih27-card:nth-child(1) .nih27-card__media {
  background-position-x: 0%;
}

.nih27-card:nth-child(2) .nih27-card__media {
  background-position-x: 25%;
}

.nih27-card:nth-child(3) .nih27-card__media {
  background-position-x: 50%;
}

.nih27-card:nth-child(4) .nih27-card__media {
  background-position-x: 75%;
}

.nih27-card:nth-child(5) .nih27-card__media {
  background-position-x: 100%;
}

/* ------------------------------------------------------------------ */
/* Join                                                               */
/* ------------------------------------------------------------------ */

.nih27-join {
  padding: 0 0 90px;
}

/* h1: Gotham 64px. */
.nih27-join h2 {
  margin: 0 0 32px;
  max-width: 1300px;
  font-size: 64px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--nih27-black);
}

/* body-lg: Gotham Book 20px, grey. */
.nih27-join p {
  margin: 0 0 40px;
  max-width: 1420px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--nih27-gray);
}

.nih27-join__cta {
  display: flex;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* FAQ                                                                */
/* ------------------------------------------------------------------ */

.nih27-faq {
  padding: 0 0 60px;
}

/* h1: Gotham 64px. */
.nih27-faq h2 {
  margin: 0 0 14px;
  font-size: 64px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--nih27-black);
}

/* body-lg: Gotham Book 20px. */
.nih27-faq__subhead {
  margin: 0 0 56px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--nih27-black);
}

/* The accordion is inset 32px either side of the text column, like the
   callout row, and its rules are 3px grey. */
.nih27 .accordion-custom {
  margin: 0 32px;
  border-bottom: 3px solid var(--nih27-gray);
}

/* Heading wrapper around each accordion trigger (ARIA APG pattern);
   the button carries all the visual styling. */
.nih27 .nih27-faq__q {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* faq-question: Gotham Medium 30px. */
.nih27 .accordion-custom .accordion-custom-button {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 38px 120px 38px 0;
  border: 0;
  border-top: 3px solid var(--nih27-gray);
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--nih27-black);
  text-align: left;
  cursor: pointer;
}

/* Comp Vector 5–10: a 64x32 chevron with a 7px orange stroke. The markup
   ships a "⌄" glyph, which is hidden and replaced by the mask. */
.nih27 .accordion-custom .accordion-custom-button span {
  position: absolute;
  right: 27px;
  top: 50%;
  width: 64px;
  height: 32px;
  margin-top: -16px;
  font-size: 0;
  background-color: var(--nih27-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M4 5 32 27 60 5' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M4 5 32 27 60 5' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.2s ease;
}

.nih27 .accordion-custom .accordion-custom-button.open span {
  transform: rotate(180deg);
}

.nih27 .accordion-custom .accordion-custom-button:focus-visible {
  outline: 3px dotted var(--nih27-orange);
  outline-offset: 2px;
}

/* The answer is set on a ~1200px measure and the comp leaves a deep gap
   under it before the next rule. */
.nih27 .accordion-custom .accordion-custom-content {
  display: none;
  padding: 0 300px 92px 0;
  background: none;
}

/* body-lg: Gotham Book 20px. */
.nih27 .accordion-custom .accordion-custom-content p {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--nih27-black);
}

/* The comp sets the link in the answer colour, underlined. */
.nih27 .accordion-custom .accordion-custom-content a {
  color: inherit;
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Bottom CTA                                                         */
/* ------------------------------------------------------------------ */

.nih27-bottom-cta {
  padding: 0 0 90px;
}

.nih27-bottom-cta .nih27-inner {
  display: flex;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Tablet (<=1024px)                                                  */
/* ------------------------------------------------------------------ */

/**
 * Figma comp `CAIA site updates - Tablet`, frame Main (1024 x 5134). Same
 * rules as the desktop frame: the values below are the comp's literals, so
 * the page is 1:1 at a 1024px viewport. Two structural differences from the
 * desktop comp: the outcome labels lose their pill outline and are plain
 * caps, and the curriculum cards are a flat tint with no artwork.
 */
@media all and (max-width: 1024px) {
  /* Comp content column: 932px inside a 1024px frame (46px gutters). */
  .nih27 .nih27-inner {
    width: min(932px, 100% - 64px);
  }

  /* Narrow layouts stack the copy over the middle of the artwork, where a
     right-edge fade reaches too late. Veil the lower half instead: the
     headline and teaser start around 40% of the hero height. */
  .nih27-hero {
    min-height: 865px;
    margin: 0 26px;
    background-image: url("/app/themes/caia2025/templates/static/next-is-here-assets/img/hero-wave-tablet.webp");
  }

  /* Explicit width: the inner sits inside the inset hero, so the desktop
     "100% - 64px" fallback would pull the copy 12px off the comp. */
  .nih27-hero .nih27-inner {
    width: min(932px, 100%);
    padding: 96px 27px 40px;
  }

  .nih27-hero__logo {
    top: 52px;
    right: 49px;
  }

  .nih27-hero__logo img {
    width: 165px;
  }

  .nih27-hero__title {
    font-size: 128px;
  }

  .nih27-hero__headline {
    font-size: 36px;
  }

  .nih27-hero__panel {
    max-width: 530px;
  }

  .nih27-hero__teaser {
    font-size: 14px;
  }

  /* 175x49 pill, Gotham Bold 16px. */
  .nih27 .next-button {
    padding: 15px 32px 14px;
    font-size: 16px;
  }

  .nih27 .next-button--big-arrow {
    padding-right: 32px;
  }

  .nih27-intro {
    padding: 78px 0 60px;
  }

  /* Still two columns here: 630px of headline against a 270px sidebar. */
  .nih27-intro .nih27-inner {
    grid-template-columns: 1fr 270px;
    gap: 22px;
  }

  .nih27-intro h2 {
    font-size: 36px;
    line-height: 1.3;
  }

  .nih27-intro__copy {
    padding-top: 4px;
    font-size: 14px;
  }

  .nih27-callouts {
    padding-bottom: 56px;
  }

  /* column-gap only: a row gap here would push the label off the icon. */
  .nih27-callouts .nih27-inner {
    column-gap: 24px;
    padding: 0;
  }

  .nih27-callout__icon {
    width: 20px;
    height: 24px;
    margin-bottom: 16px;
  }

  /* No pill on tablet: the comp sets the label as plain centred caps. */
  .nih27-callout h3 {
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
  }

  .nih27-callout p {
    max-width: 280px;
    font-size: 14px;
  }

  /* Full-bleed artwork between the outcomes and the levels, inset and
     rounded like the hero. */
  .nih27-divider {
    display: block;
    margin: 0 26px;
  }

  .nih27-divider img {
    height: 500px;
    border-radius: 40px;
  }

  .nih27-levels {
    padding: 55px 0 53px;
  }

  /* Two columns, each inset inside its half so the lists sit where the comp
     puts them (148-484 and 569-860 of the 1024 frame). Percentages, not the
     comp's pixels, so the insets hold as the column narrows. */
  .nih27-levels .nih27-inner {
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
  }

  .nih27-level:first-child {
    padding: 0 3% 0 11%;
  }

  .nih27-level + .nih27-level {
    padding: 0 12.7% 0 6.1%;
  }

  .nih27-level + .nih27-level::before {
    left: 1.5%;
  }

  .nih27-level h3 {
    margin-bottom: 30px;
    font-size: 36px;
  }

  .nih27-level li {
    font-size: 14px;
  }

  .nih27-levels__media {
    display: none;
  }

  /* The CTA keeps the page's right edge, outside the lists' insets. */
  .nih27-levels__cta-tablet {
    display: flex;
    grid-column: 1 / -1;
    margin-top: 24px;
  }

  .nih27-curriculum {
    padding-bottom: 90px;
  }

  .nih27-curriculum__top {
    grid-template-columns: minmax(200px, 1fr) minmax(0, 564px);
    gap: 24px;
  }

  .nih27-curriculum__eyebrow {
    margin-bottom: 14px;
    font-size: 15px;
  }

  .nih27-curriculum__top h2 {
    font-size: 36px;
  }

  .nih27-curriculum__lead {
    margin-bottom: 12px;
    font-size: 14px;
  }

  .nih27-curriculum__copy {
    font-size: 14px;
  }

  .nih27 .nih27-curriculum__link {
    font-size: 20px;
  }

  /* Five full-width rows, 111px tall on a 120px pitch. */
  .nih27-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .nih27-card__media {
    display: none;
  }

  /* Text-only rows here: no portrait ratio and a flat tint instead of the
     gradient that clears for the artwork. */
  .nih27-card {
    aspect-ratio: auto;
    border-radius: 30px;
    background-image: none;
    background-color: var(--nih27-light-blue);
  }

  .nih27-card__body {
    padding: 26px 52px;
  }

  .nih27-card h3 {
    margin-bottom: 16px;
    font-size: 20px;
  }

  .nih27-card p {
    font-size: 16px;
  }

  .nih27-join {
    padding-bottom: 95px;
  }

  .nih27-join h2 {
    margin-bottom: 18px;
    font-size: 36px;
  }

  .nih27-join p {
    margin-bottom: 40px;
    font-size: 14px;
  }

  .nih27-faq h2 {
    margin-bottom: 10px;
    font-size: 36px;
  }

  .nih27-faq__subhead {
    margin-bottom: 40px;
    font-size: 14px;
  }

  /* The rules run the full width of the text column here. */
  .nih27 .accordion-custom {
    margin: 0;
  }

  .nih27 .accordion-custom .accordion-custom-button {
    padding: 22px 80px 22px 0;
    font-size: 24px;
  }

  .nih27 .accordion-custom .accordion-custom-button span {
    right: 8px;
    width: 36px;
    height: 18px;
    margin-top: -9px;
  }

  .nih27 .accordion-custom .accordion-custom-content {
    padding: 16px 88px 45px 0;
  }

  .nih27 .accordion-custom .accordion-custom-content p {
    font-size: 14px;
  }

  .nih27-bottom-cta {
    padding-bottom: 64px;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (<=640px)                                                   */
/* ------------------------------------------------------------------ */

/**
 * Figma comp `CAIA site updates - Mobile`, frame Main (402 x 5169), plus the
 * measured full-frame export. The frame has no auto layout — every layer is
 * absolutely positioned — so the values below are the comp's positions read
 * back as flow spacing, not literal offsets.
 *
 * The mobile frame is its own design, not the tablet one scaled: the type
 * scale drops to 24 / 15 / 14 / 12 / 11 / 10, the pills shrink to 117x33,
 * the outcome chevrons are gone, the gutter rule between the two levels
 * becomes a 189px horizontal accent, and the download link is ranged left.
 *
 * The comp sets 10px body copy (hero teaser, intro copy, FAQ answers) with
 * "Auto" leading; that is below what we would normally ship on a phone and
 * is flagged in the handoff notes, but it is reproduced here as drawn.
 */
@media all and (max-width: 640px) {
  /* Comp content column: 354px inside a 402px frame (24px gutters). */
  .nih27 .nih27-inner {
    width: min(1560px, 100% - 48px);
  }

  /* Group 17: a 376x971 card at left 12, top -110, so 861px of it are on
     frame. The artwork keeps its colour down to roughly the two-thirds mark
     and clears to a pale blue under the copy — the same veil idea as tablet,
     held off for longer because the panel starts much further down. */
  .nih27-hero {
    min-height: 860px;
    margin: 0 12px;
    border-radius: 0 0 30px 30px;
    background-image: url("/app/themes/caia2025/templates/static/next-is-here-assets/img/hero-wave-mobile.webp");
  }

  /* Wordmark at the top of the card, panel hung off the bottom, as on the
     Stacker LP. */
  .nih27-hero .nih27-inner {
    width: min(932px, 100%);
    justify-content: space-between;
    padding: 125px 20px 24px;
  }

  /* The mobile comp draws neither the "Next is here." wordmark nor the hero
     lockup, but the client asked for both back on this frame (ticket
     #45840533) using the Stacker LP as the reference, so these carry that
     page's mobile metrics: a 139px lockup at the top right over an 87px
     wordmark. */
  .nih27-hero__logo {
    display: block;
    top: 39px;
    right: 1px;
  }

  .nih27-hero__logo img {
    width: 139px;
  }

  /* display: 87px / lh 90%, white. */
  .nih27-hero__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0 8px;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-size: 87px;
  }

  /* h-hero: 24px / lh 119%, Bold, flush right in a 290px measure ending at
     the 366px content edge; the teaser sits on the same right edge. */
  .nih27-hero__panel {
    max-width: 300px;
  }

  .nih27-hero__headline {
    margin-bottom: 21px;
    font-size: 24px;
  }

  /* text-small: 10px Book. */
  .nih27-hero__teaser {
    margin-bottom: 24px;
    font-size: 10px;
    line-height: 1.2;
  }

  /* Every pill in the comp is 117x33 with an 11px Bold label. The shared
     chrome adds a 2px border, so the padding is short by that much. */
  .nih27 .next-button,
  .nih27 .next-button--orange,
  .nih27 .next-button--dark {
    min-width: 117px;
    padding: 9px 20px 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .nih27 .next-button--big-arrow {
    padding-right: 20px;
  }

  /* The intro block is inset a further 16px in the comp (headline at 40,
     copy at 42) — deeper than every other text block on the page. */
  .nih27-intro {
    padding: 57px 0 0;
  }

  .nih27-intro .nih27-inner {
    grid-template-columns: 1fr;
    gap: 23px;
    padding: 0 16px;
  }

  /* h-statement: 24px / lh 130%. */
  .nih27-intro h2 {
    font-size: 24px;
    line-height: 1.3;
  }

  /* text-small: 10px Book, ranged left. */
  .nih27-intro__copy {
    padding-top: 0;
    font-size: 10px;
    line-height: 1.2;
    text-align: left;
  }

  /* Stacked, 78px apart. The comp drops the chevron icons here: the three
     outcomes are a caps label over centred copy and nothing else. */
  .nih27-callouts {
    padding: 91px 0 0;
  }

  .nih27-callouts .nih27-inner {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 78px;
  }

  .nih27-callout {
    display: block;
    grid-row: auto;
  }

  .nih27-callout__icon {
    display: none;
  }

  /* The comp sets the labels on a ~240px measure (two of the three wrap to
     a second line) over copy on a ~270px one. */
  .nih27-callout h3 {
    max-width: 245px;
    margin-bottom: 12px;
    text-wrap: balance;
  }

  .nih27-callout p {
    max-width: 270px;
    font-size: 12px;
  }

  /* 384px of artwork, inset and rounded like the hero. */
  .nih27-divider {
    margin: 80px 12px 0;
  }

  .nih27-divider img {
    height: 384px;
    border-radius: 30px;
  }

  /* One column. The comp insets the level blocks past the text column —
     rule and heading at ~49-61, bullets at 52, list text at 68 — which a
     single 28px inset on the block reproduces closely enough. */
  .nih27-levels {
    padding: 61px 0 50px;
  }

  .nih27-levels .nih27-inner {
    grid-template-columns: 1fr;
    gap: 39px;
  }

  .nih27-level:first-child,
  .nih27-level + .nih27-level {
    padding: 0 0 0 28px;
  }

  .nih27-level h3 {
    margin-bottom: 26px;
    font-size: 24px;
  }

  .nih27-level ul {
    padding-left: 24px;
  }

  .nih27-level li {
    margin-bottom: 11px;
    font-size: 12px;
    line-height: 1.2;
  }

  /* Line 16: the gutter rule becomes a 189px horizontal accent between the
     two stacked lists (comp: 1px #5050A7 at top 2449, left 49). */
  .nih27-level + .nih27-level::before {
    content: "";
    position: static;
    display: block;
    width: 189px;
    height: 1px;
    margin: 0 0 33px;
    background-color: var(--nih27-purple);
  }

  /* The CTA is a grid child, so the 39px row gap above already places it. */
  .nih27 .nih27-levels__cta-tablet {
    margin-top: 0;
  }

  .nih27-curriculum {
    padding-bottom: 55px;
  }

  .nih27-curriculum__top {
    grid-template-columns: 1fr;
    gap: 19px;
    margin-bottom: 0;
  }

  /* eyebrow: 12px Black caps, orange. */
  .nih27-curriculum__eyebrow {
    margin-bottom: 14px;
    font-size: 12px;
  }

  /* h-section: 24px Black. */
  .nih27-curriculum__top h2 {
    font-size: 24px;
  }

  /* The right-hand block of the desktop comp is a plain left-ranged column
     here, lead and copy both at 12px. */
  .nih27-curriculum__lead,
  .nih27-curriculum__copy {
    text-align: left;
  }

  .nih27-curriculum__lead {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .nih27-curriculum__copy {
    font-size: 12px;
    line-height: 1.2;
  }

  /* link-download: 14px Bold underlined. The comp's layer is a 557px box at
     left -286 with the text ranged right inside it, which lands the words on
     the text column's left edge — so it reads as a left-ranged link. */
  .nih27-curriculum__download {
    justify-content: flex-start;
    margin: 22px 0 40px;
  }

  .nih27 .nih27-curriculum__link {
    font-size: 14px;
  }

  /* Cards break out of the 24px text column to the comp's 12px card inset:
     376 wide, 110 tall, 10px apart. */
  .nih27-cards {
    margin: 0 -12px;
  }

  .nih27-card {
    min-height: 110px;
    border-radius: 32px;
  }

  .nih27-card__body {
    padding: 27px 33px;
  }

  .nih27-card h3 {
    margin-bottom: 12px;
    font-size: 15px;
  }

  .nih27-card p {
    font-size: 12px;
  }

  .nih27-join {
    padding-bottom: 69px;
  }

  /* text-lead: 24px. */
  .nih27-join h2 {
    margin-bottom: 25px;
    font-size: 24px;
  }

  .nih27-join p {
    margin-bottom: 17px;
    font-size: 12px;
  }

  .nih27-faq {
    padding-bottom: 33px;
  }

  .nih27-faq h2 {
    margin-bottom: 11px;
    font-size: 24px;
  }

  .nih27-faq__subhead {
    margin-bottom: 30px;
    font-size: 12px;
  }

  /* Lines 11-15: 1px rules across the full 354px text column. */
  .nih27 .accordion-custom {
    border-bottom-width: 1px;
  }

  /* faq-question: 12px Medium, indented 8px inside the rule. */
  /* 16px of padding rather than the comp's 14: it keeps the row above the
     44px minimum touch target and absorbs the comp's uneven row pitch. */
  .nih27 .accordion-custom .accordion-custom-button {
    padding: 16px 44px 16px 8px;
    border-top-width: 1px;
    font-size: 12px;
  }

  .nih27 .accordion-custom .accordion-custom-button span {
    right: 14px;
    width: 28px;
    height: 14px;
    margin-top: -7px;
  }

  /* text-small: 10px Book, indented with the question. */
  .nih27 .accordion-custom .accordion-custom-content {
    padding: 12px 0 48px 13px;
  }

  .nih27 .accordion-custom .accordion-custom-content p {
    font-size: 10px;
    line-height: 1.2;
  }

  .nih27-bottom-cta {
    padding-bottom: 31px;
  }
}

/* ------------------------------------------------------------------ */
/* Desktop fallback: no container query units                         */
/* ------------------------------------------------------------------ */

/* Every fluid value above is declared twice, so an engine that cannot parse
   cqw keeps the comp's fixed numbers. That restores the layout this page
   shipped with -- including the overflow this ticket is about, since the
   pill is nowrap and the card copy is clipped by the card's own overflow.

   So the same scaling is repeated here as a three-step ladder. Each step
   carries the value the fluid rules resolve to at the NARROW end of its
   range, which is the value that fits across the whole range: the row is
   (100vw - 64px) wide and each card is (100vw - 144px) / 5, both against
   their 1560px and 296px comp widths. Above 1624px the fixed declarations
   already are the comp, so there is no fourth step.

   The card copy has to come down with the rest and not merely wrap: the card
   is on a fixed aspect-ratio with overflow hidden, so text that does not fit
   is dropped off the bottom silently rather than pushing the page wide.

   Held to min-width 1025px so it cannot reach the tablet and mobile blocks
   above, which size everything explicitly and never needed any of this. */
@supports not (width: 1cqw) {
  /* Text column 961px (0.616 of the comp), card 176px (0.595). */
  @media all and (min-width: 1025px) and (max-width: 1199px) {
    .nih27-callouts .nih27-inner {
      column-gap: 62px;
      padding: 0 19px;
    }

    .nih27-callout__icon {
      width: 20px;
      height: 24px;
      margin-bottom: 16px;
    }

    .nih27-callout h3 {
      margin-bottom: 18px;
      font-size: 12px;
    }

    .nih27-callout p {
      font-size: 14px;
    }

    .nih27-card__body {
      padding: 28px 22px 12px;
    }

    .nih27-card h3 {
      margin-bottom: 12px;
      font-size: 14px;
    }

    .nih27-card p {
      font-size: 14px;
    }
  }

  /* Text column 1136px (0.728 of the comp), card 211px (0.713). */
  @media all and (min-width: 1200px) and (max-width: 1399px) {
    .nih27-callouts .nih27-inner {
      column-gap: 74px;
      padding: 0 23px;
    }

    .nih27-callout__icon {
      width: 23px;
      height: 27px;
      margin-bottom: 18px;
    }

    .nih27-callout h3 {
      margin-bottom: 21px;
      font-size: 14px;
    }

    .nih27-callout p {
      font-size: 14px;
    }

    .nih27-card__body {
      padding: 34px 27px 14px;
    }

    .nih27-card h3 {
      margin-bottom: 14px;
      font-size: 17px;
    }

    .nih27-card p {
      font-size: 17px;
    }
  }

  /* Text column 1336px (0.856 of the comp), card 251px (0.848). */
  @media all and (min-width: 1400px) and (max-width: 1623px) {
    .nih27-callouts .nih27-inner {
      column-gap: 87px;
      padding: 0 27px;
    }

    .nih27-callout__icon {
      width: 27px;
      height: 32px;
      margin-bottom: 22px;
    }

    .nih27-callout h3 {
      margin-bottom: 25px;
      font-size: 16px;
    }

    .nih27-callout p {
      font-size: 14px;
    }

    .nih27-card__body {
      padding: 40px 32px 16px;
    }

    .nih27-card h3 {
      margin-bottom: 16px;
      font-size: 20px;
    }

    .nih27-card p {
      font-size: 20px;
    }
  }
}