:root {
  --twu-navy: #0f2440;
  --twu-deep-navy: #081625;
  --twu-slate: #596777;
  --twu-brass: #069ec6;
  --twu-dark-brass: #04627a;
  --twu-paper: #f2f5f7;
  --twu-white: #ffffff;
  --twu-ink: #152235;
  --twu-grid-line: rgba(6, 158, 198, 0.24);
  --twu-line: rgba(15, 36, 64, 0.16);
  --twu-line-strong: rgba(15, 36, 64, 0.28);
  --twu-shadow-sm: 0 10px 30px rgba(8, 22, 37, 0.08);
  --twu-shadow-md: 0 18px 50px rgba(8, 22, 37, 0.11);
  --twu-shadow-lg: 0 28px 80px rgba(8, 22, 37, 0.14);
  --twu-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --twu-wide: 1240px;
  /* One shared vertical rhythm so adjacent sections never double up
     into oversized gaps. Section = big band padding; flow = spacing
     between elements inside a band. */
  --twu-space-section: clamp(3.25rem, 6vw, 5rem);
  --twu-space-flow: clamp(2rem, 4vw, 3.25rem);
}

* {
  box-sizing: border-box;
}

html {
  /* Stop iOS Safari's automatic text inflation from resizing copy
     unpredictably after rotation or inside wide flex/grid parents. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  background: var(--twu-paper);
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--twu-brass);
  color: var(--twu-deep-navy);
}

:where(a, button, input, select, summary, textarea) {
  touch-action: manipulation;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--twu-brass);
  outline-offset: 3px;
}

.twu-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--twu-line);
  background: rgba(242, 245, 247, 0.96);
  box-shadow: 0 8px 30px rgba(8, 22, 37, 0.05);
  backdrop-filter: blur(16px);
}

.twu-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.8rem 1rem;
  transform: translateY(-180%);
  background: var(--twu-brass);
  color: var(--twu-deep-navy);
  font-weight: 700;
}

.twu-skip-link:focus {
  transform: translateY(0);
}

.twu-utility-bar {
  min-height: 34px;
}

.twu-utility-inner {
  min-height: 34px;
}

.twu-utility-inner p {
  margin: 0;
}

.twu-utility-links {
  gap: 1rem;
}

.twu-utility-links a {
  color: var(--twu-paper);
  text-decoration-color: rgba(242, 245, 247, 0.45);
  text-underline-offset: 0.2em;
}

.twu-site-search {
  width: min(200px, 20vw);
  margin: 0;
}

.twu-site-search .wp-block-search__inside-wrapper {
  gap: 0;
}

.twu-site-search .wp-block-search__input {
  width: 100%;
  min-height: 30px;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(242, 245, 247, 0.4);
  border-right: 0;
  background: transparent;
  color: var(--twu-paper);
  font-size: 0.75rem;
}

.twu-site-search .wp-block-search__input::placeholder {
  color: rgba(242, 245, 247, 0.62);
}

.twu-site-search .wp-block-search__button {
  width: 38px;
  min-width: 38px;
  height: 30px;
  margin: 0;
  padding: 0.35rem;
  border: 1px solid rgba(242, 245, 247, 0.4);
  background: transparent;
  color: var(--twu-paper);
  overflow: visible;
}

.twu-header-inner {
  /* The header group uses a default (unconstrained) layout, so the
     alignwide class alone does not cap this row. Constrain it here so
     the logo and nav align exactly with page content at every width. */
  width: min(var(--twu-wide), 100% - 2rem);
  margin-inline: auto;
  /* The header group's default layout applies a block-gap margin
     (1.5rem) to every child after the first. With the utility bar
     removed (0.4.23) this row is now that second child, so the gap
     landed as dead space above the logo. Zero it so the row centres
     symmetrically inside its min-height. */
  margin-block: 0 !important;
  min-height: 84px;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  transition: min-height 240ms var(--twu-ease);
}

.twu-utility-inner {
  width: min(var(--twu-wide), 100% - 2rem);
}

.twu-brand {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.twu-brand img {
  display: block;
  width: auto;
  height: clamp(52px, 5.5vw, 68px);
  transition: height 240ms var(--twu-ease);
}

/* Compact header once the visitor scrolls: motion layer toggles the
   class; without JS the header simply stays at full height. */
.twu-site-header.is-scrolled .twu-header-inner {
  min-height: 62px;
}

.twu-site-header.is-scrolled .twu-brand img {
  height: clamp(42px, 4.5vw, 52px);
}

.twu-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--twu-brass);
  pointer-events: none;
}

.twu-primary-navigation {
  margin-left: auto;
}

.twu-primary-navigation .wp-block-navigation-item__content {
  position: relative;
  padding-block: 0.85rem;
  text-decoration: none;
}

.twu-primary-navigation .wp-block-navigation-item__content::after {
  position: absolute;
  right: 0;
  bottom: 0.45rem;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  background: var(--twu-brass);
  transition: transform 220ms var(--twu-ease);
}

.twu-primary-navigation .wp-block-navigation-item__content:hover::after,
.twu-primary-navigation .current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

.twu-nav-cta a {
  min-height: 46px;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--twu-brass);
  background: var(--twu-brass);
  color: var(--twu-deep-navy) !important;
  text-decoration: none;
}

.twu-nav-cta a::after {
  display: none;
}

.twu-site-footer {
  margin-top: 0;
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: 2rem;
  border-top: 4px solid var(--twu-brass);
}

.twu-footer-status {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(242, 245, 247, 0.22);
}

.twu-footer-status p,
.twu-footer-legal p {
  margin: 0;
}

.twu-footer-grid {
  gap: clamp(2rem, 4vw, 4rem);
}

.twu-footer-grid h3 {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(242, 245, 247, 0.16);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.twu-footer-grid .wp-block-navigation-item__content {
  color: rgba(242, 245, 247, 0.76);
  text-decoration: none;
}

.twu-footer-grid .wp-block-navigation-item__content:hover {
  color: var(--twu-white);
  text-decoration: underline;
  text-decoration-color: var(--twu-brass);
  text-underline-offset: 0.25em;
}

.twu-brand--footer img {
  width: auto;
  height: 84px;
  max-width: 100%;
}

.twu-footer-brand p {
  max-width: 36ch;
  color: rgba(242, 245, 247, 0.72);
}

.twu-footer-legal {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(242, 245, 247, 0.16);
  color: rgba(242, 245, 247, 0.58);
}

.twu-hero {
  position: relative;
  overflow: hidden;
  min-height: min(760px, 82vh);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  background-color: var(--twu-navy);
  background-image:
    radial-gradient(circle at 78% 36%, rgba(6, 158, 198, 0.15), transparent 26%),
    linear-gradient(rgba(6, 158, 198, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 158, 198, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Optional looping background video. The <video> element carries no
   autoplay attribute: the motion layer starts playback only for
   motion-OK visitors, so no-JS and reduced-motion visitors see the
   static poster. A navy wash plus the existing grid texture keeps the
   foreground text at readable contrast either way. */
.twu-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* The hero group uses WP's constrained layout, which caps direct
     children at content width and centers them; that squeezed the
     video into a narrow band. Force the media layer truly full-bleed. */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.twu-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82);
}

.twu-hero__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(100deg, rgba(15, 36, 64, 0.94) 0%, rgba(15, 36, 64, 0.82) 45%, rgba(15, 36, 64, 0.6) 100%),
    linear-gradient(rgba(6, 158, 198, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 158, 198, 0.05) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}

/* Root-level page bands manage their own padding; WordPress's default
   blockGap between them let the cream body background peek through as
   stripes between full-bleed sections. Zero it at the root. */
#twu-main > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* The Home template now renders the page-owned post-content, so the
   modules live one level deeper. Zero the root blockGap there too, and
   between main and the footer template part, so the silver body
   background cannot reappear as stripes around full-bleed sections. */
#twu-main > .wp-block-post-content,
#twu-main .wp-block-post-content > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Articles are the one case the rule above overreaches on. An article
   puts its paragraphs, headings and lists directly at the root of
   post-content, so "zero every root child" strips the whole vertical
   rhythm: measured on a published article, every gap between every
   paragraph, heading and list was 0px and the copy ran together.

   Interior pages escape it because their content sits inside a
   .twu-page-body wrapper, so only the wrapper is zeroed and WordPress's
   blockGap still applies to everything within. This gives articles that
   same rhythm back rather than inventing a second scale for them: one
   blockGap between blocks, and the page heading spacing above headings.

   Scoped to .twu-article and to text-flow children only, so the
   full-bleed bands this zeroing exists to protect are untouched. */
#twu-main.twu-article > .wp-block-post-content > :where(p, ul, ol, dl, blockquote, figure, pre, table, .wp-block-group, .wp-block-buttons, .wp-block-embed, .wp-block-separator, .wp-block-image) {
  margin-block-start: var(--wp--style--block-gap, 1.5rem) !important;
}

#twu-main.twu-article > .wp-block-post-content > :where(h2, h3, h4) {
  margin-block-start: clamp(2.25rem, 4.5vw, 3.5rem) !important;
}

#twu-main.twu-article > .wp-block-post-content > :where(h3, h4) {
  margin-block-start: 2rem !important;
}

#twu-main.twu-article > .wp-block-post-content > :first-child {
  margin-block-start: 0 !important;
}

body .wp-site-blocks > main {
  margin-block: 0 !important;
}

body .wp-site-blocks > main + .wp-block-template-part {
  margin-block-start: 0 !important;
}

/* Full-width parallax band: oversized image drifts on scroll behind a
   navy wash, with the institutional status rail overlaid. Without JS
   or with reduced motion it is simply a static image band. */
.twu-parallax-band {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(380px, 46vw, 580px);
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  overflow: hidden;
  background: var(--twu-deep-navy);
}

/* WordPress prints is-layout-flow on this group, which gives every child
   after the first a 24px block-gap margin. On an absolutely positioned
   child that margin still offsets the box, even with top and bottom both
   set to 0: the box is placed by its margin edge, so the overlay began
   24px down the band and resolved 24px shorter than it.

   The result was a strip across the top of every band where the image
   was not dimmed at all, which is what read as the overlay not fitting
   the picture. Measured on production before the fix: band 560px,
   overlay 536px, 24px undimmed. The same margin was also pushing the
   headline panel 24px below true centre.

   Nothing inside a band wants block-gap; every layer here is positioned
   by hand. Same trap, and same fix, as .twu-division-index cards. */
.twu-parallax-band > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.twu-parallax-band__media {
  position: absolute;
  inset: -16% 0;
  z-index: 0;
  margin: 0;
  width: 100% !important;
  max-width: none !important;
}

.twu-parallax-band__media img,
.twu-parallax-story .wp-block-cover__image-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  will-change: transform;
}

.twu-parallax-story.wp-block-cover {
  display: flex;
  min-height: clamp(380px, 46vw, 580px) !important;
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.twu-parallax-story .wp-block-cover__image-background {
  inset: -9% 0;
  height: 118%;
}

.twu-parallax-story::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(rgba(6, 158, 198, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 158, 198, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.twu-parallax-story .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.twu-parallax-band__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  max-width: none !important;
  background:
    linear-gradient(180deg, rgba(8, 22, 37, 0.9) 0%, rgba(8, 22, 37, 0.52) 48%, rgba(8, 22, 37, 0.9) 100%),
    linear-gradient(rgba(6, 158, 198, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 158, 198, 0.05) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
  pointer-events: none;
}

.twu-parallax-band .twu-status-rail__grid {
  position: relative;
  z-index: 2;
  width: min(var(--twu-wide), 100% - 2rem);
  margin-inline: auto;
  border: 1px solid rgba(6, 158, 198, 0.35);
  background: rgba(8, 22, 37, 0.68);
}

/* 2026-08 media banners. They reuse the parallax band's media and
   overlay layers and replace the status rail with a copy panel. Each
   source photograph was composed with its subject on the right and open
   space on the left, so the panel is pinned left and capped short of
   halfway; that is what keeps the headline off the subject. */
.twu-media-banner {
  display: flex;
  min-height: clamp(340px, 46vw, 560px);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.twu-media-banner__panel {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* The WordPress constrained layout centres any width-capped child, the
   same trap fixed in the section heads and the wide division card. */
.twu-media-banner__panel > * {
  max-width: 46ch;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.twu-media-banner__panel h2 {
  margin: 0.35rem 0 0;
  text-wrap: balance;
}

.twu-media-banner__lede {
  margin-top: 0.9rem;
  color: rgba(242, 245, 247, 0.88);
  font-size: 1.05rem;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .twu-media-banner__panel > * {
    max-width: none;
  }
}

/* Contained editorial figures from the same set. */
.twu-media-figure {
  margin-block: clamp(2rem, 5vw, 3.5rem);
}

.twu-media-figure .twu-editorial-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* The note used to hold a six-word disclaimer, so it was set as a tiny
   uppercase mark in the corner at 38% opacity. It now holds a real
   caption about what the picture shows, and at that size a full sentence
   was both unreadable and wrapping across the corner of the image. It is
   now a legible caption sitting under the panel copy, on the same left
   edge, with a scrim behind the lower band so text stays readable over a
   bright photograph. */
/* Centred by translating half its own width rather than by percentage
   padding. The first version padded the note by calc((100% - 1240px) / 2),
   where 100% resolves against the band. When the band itself was mis-sized
   that padding grew past the note's own max-width, the content box
   collapsed, and the caption rendered as a one-word-wide vertical column
   down the middle of the image. Percentage padding that depends on a
   parent this rule does not control was the wrong tool. */
.twu-parallax-band__note {
  position: absolute;
  right: auto;
  bottom: clamp(0.9rem, 2.2vw, 1.6rem);
  left: 50%;
  z-index: 2;
  box-sizing: border-box;
  width: min(1240px, 100cqw - 2rem);
  max-width: none;
  padding-inline: 0;
  transform: translateX(-50%);
  color: rgba(242, 245, 247, 0.78);
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-transform: none;
  text-wrap: pretty;
}

.twu-parallax-band__note::before {
  position: absolute;
  z-index: -1;
  content: "";
  inset: -1.4rem -50vw -2.4rem;
  background: linear-gradient(to top, rgba(8, 22, 37, 0.72), rgba(8, 22, 37, 0));
  pointer-events: none;
}

/* A band placed inside the page body is a child of a constrained group,
   so WordPress caps its alignfull at the content measure and it renders
   as a wide box rather than edge to edge.

   Three things this rule learned the hard way, measured on production at
   1440 and 375:

   1. It cannot use :where(). At zero specificity the whole selector
      scored (0,1,0) and lost to WordPress's own constrained-layout rule,
      so width: 100vw applied but the negative margins did not. The band
      then started at the parent's left edge and ran 345px past the right
      edge of the viewport.
   2. The margins need !important, because the rule being beaten sets
      them with !important too.
   3. It cannot use 100vw, which counts the scrollbar. The band came out
      wider than the visible page and pushed a sideways scrollbar. The
      obvious patch, overflow-x: clip, is wrong twice over: on the page
      body it clips the very breakout this rule exists to create, and on
      .wp-site-blocks it would wrap the site header.

   So the width comes from a container query instead. .wp-site-blocks is
   the full-width wrapper and its inline size is the scrollbar-free page
   width, so 100cqw is exactly the room available. Nothing is clipped and
   no containing block is introduced for the header.

   Measured in headless Chrome at 1440, before and after:
     before  band left 327, width 1424, horizontal overflow 337
     after   band left 0,   width 1414, horizontal overflow 0
   Header position: sticky in both, so this changes nothing for it.

   On a browser too old for container queries the 100cqw declarations are
   simply dropped and the band renders at content width, which is where
   it sat before any of this. It degrades, it does not break. */
.wp-site-blocks {
  container-type: inline-size;
}

.twu-page-body .twu-parallax-band,
.wp-block-post-content .twu-parallax-band,
.entry-content .twu-parallax-band {
  width: 100cqw !important;
  max-width: 100cqw !important;
  margin-left: calc(50% - 50cqw) !important;
  margin-right: calc(50% - 50cqw) !important;
}

/* Now that the band really does span the viewport, its panel has to be
   pulled back to the content measure or the headline sits against the
   left edge of the screen. */
.twu-parallax-band .twu-media-banner__panel {
  width: min(1240px, 100% - 2rem);
  max-width: none;
  margin-inline: auto;
}

/* ch is font-relative, so the shared 46ch cap on panel children resolved
   to 1226px against the x-large headline size and let the headline run
   the full width of the band. The headline gets its own measure. */
.twu-parallax-band .twu-media-banner__panel h2 {
  max-width: 18ch;
}

.twu-parallax-band .twu-media-banner__panel .twu-media-banner__lede {
  max-width: 52ch;
}

.twu-parallax-story__content {
  position: relative;
  z-index: 2;
  width: min(var(--twu-wide), calc(100% - 2rem));
  margin-inline: auto;
}

.twu-parallax-story__panel {
  max-width: 44rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid rgba(6, 158, 198, 0.42);
  border-left: 4px solid var(--twu-brass);
  background: rgba(8, 22, 37, 0.8);
  box-shadow: var(--twu-shadow-md);
  color: rgba(242, 245, 247, 0.82);
  backdrop-filter: blur(4px);
}

.twu-parallax-story__panel .twu-kicker {
  color: var(--twu-brass);
}

/* The panel is a WP constrained group, which force-centers any child
   narrower than the panel via margin-inline auto !important. Pin the
   width-capped headline and paragraph to the left edge so they align
   with the kicker (same fix as the page-hero H1). */
.twu-parallax-story__panel h2 {
  max-width: 16ch;
  margin-top: 0.8rem;
  margin-left: 0 !important;
  color: var(--twu-paper);
  text-wrap: balance;
}

.twu-parallax-story__panel p:last-child {
  max-width: 58ch;
  margin-bottom: 0;
  margin-left: 0 !important;
}

.twu-hero::before,
.twu-hero::after {
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.twu-hero::before {
  inset: 24px;
  border: 1px solid var(--twu-grid-line);
}

.twu-hero::after {
  top: 24px;
  right: 24px;
  width: 96px;
  height: 96px;
  border-top: 3px solid var(--twu-brass);
  border-right: 3px solid var(--twu-brass);
}

.twu-hero-grid {
  position: relative;
  z-index: 2;
  gap: clamp(3rem, 6vw, 6.5rem);
}

.twu-hero h1 {
  max-width: 12ch;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.twu-hero .wp-block-buttons {
  gap: 0.75rem;
  margin-top: 2rem;
}

.twu-hero .wp-element-button {
  min-height: 50px;
  transition: transform 180ms var(--twu-ease), background 180ms ease, color 180ms ease;
}

.twu-hero .wp-element-button:hover {
  transform: translateY(-2px);
}

.twu-eyebrow,
.twu-section-label {
  margin-bottom: 1rem;
  color: var(--twu-dark-brass);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.twu-eyebrow,
.twu-section-label--light {
  color: var(--twu-brass);
}

.twu-direct-answer {
  max-width: 690px;
  color: rgba(242, 245, 247, 0.88);
}

.twu-hero .is-style-outline .wp-block-button__link {
  border-color: rgba(242, 245, 247, 0.86);
  background: rgba(242, 245, 247, 0.04);
  color: var(--twu-white) !important;
}

.twu-hero .is-style-outline .wp-block-button__link:hover {
  background: var(--twu-paper);
  color: var(--twu-deep-navy) !important;
}

.twu-section {
  padding-top: var(--twu-space-section);
  padding-bottom: var(--twu-space-section);
}

.twu-blueprint {
  position: relative;
  min-height: 520px;
  padding: 1.25rem;
  border: 1px solid rgba(6, 158, 198, 0.48);
  background: rgba(8, 22, 37, 0.72);
  box-shadow: var(--twu-shadow-lg);
}

.twu-blueprint::before,
.twu-blueprint::after {
  position: absolute;
  width: 36px;
  height: 36px;
  content: "";
  pointer-events: none;
}

.twu-blueprint::before {
  top: -1px;
  left: -1px;
  border-top: 3px solid var(--twu-brass);
  border-left: 3px solid var(--twu-brass);
}

.twu-blueprint::after {
  right: -1px;
  bottom: -1px;
  border-right: 3px solid var(--twu-brass);
  border-bottom: 3px solid var(--twu-brass);
}

.twu-blueprint__header,
.twu-blueprint__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--twu-brass);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.twu-blueprint__header {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(242, 245, 247, 0.16);
}

.twu-blueprint__core {
  --twu-scan-y: -10%;
  display: grid;
  position: relative;
  place-items: center;
  min-height: 132px;
  margin: 1rem 0;
  overflow: hidden;
  border: 1px solid rgba(6, 158, 198, 0.42);
  background:
    linear-gradient(rgba(242, 245, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 245, 247, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  text-align: center;
}

.twu-blueprint__core::after {
  position: absolute;
  top: var(--twu-scan-y);
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 158, 198, 0.85), transparent);
  box-shadow: 0 0 14px rgba(6, 158, 198, 0.28);
  content: "";
  pointer-events: none;
}

.twu-blueprint__core span,
.twu-blueprint__core small {
  color: rgba(242, 245, 247, 0.58);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.twu-blueprint__core strong {
  color: var(--twu-paper);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.08;
}

.twu-blueprint__sequence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: rgba(242, 245, 247, 0.18);
  list-style: none;
}

.twu-blueprint__sequence li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0 0.75rem;
  min-width: 0;
  padding: 0.8rem;
  background: var(--twu-deep-navy);
}

.twu-blueprint__sequence li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--twu-brass);
  color: var(--twu-brass);
  font-size: 0.66rem;
  font-weight: 700;
}

.twu-blueprint__sequence strong {
  color: var(--twu-paper);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.twu-blueprint__sequence small {
  overflow: hidden;
  color: rgba(242, 245, 247, 0.56);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twu-blueprint__footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(242, 245, 247, 0.16);
  color: rgba(242, 245, 247, 0.58);
}

.twu-status-rail {
  border-top: 1px solid rgba(242, 245, 247, 0.16);
  border-bottom: 1px solid rgba(242, 245, 247, 0.16);
}

.twu-status-rail__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.twu-status-rail__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 0.75rem;
  padding: 1.5rem;
  border-left: 1px solid rgba(242, 245, 247, 0.14);
}

.twu-status-rail__item:last-child {
  border-right: 1px solid rgba(242, 245, 247, 0.14);
}

.twu-status-rail__item > span,
.twu-status-rail__item .twu-status-index {
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--twu-brass);
  font-size: 0.7rem;
  font-weight: 700;
}

.twu-status-rail__item strong,
.twu-status-rail__item .twu-status-title {
  margin: 0;
  color: var(--twu-paper);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1rem;
  line-height: 1.2;
}

.twu-status-rail__item small,
.twu-status-rail__item .twu-status-detail {
  margin: 0.25rem 0 0;
  color: rgba(242, 245, 247, 0.58);
  font-size: 0.8rem;
}

.twu-section-intro {
  gap: clamp(2rem, 6vw, 6rem);
  margin-bottom: 2.5rem;
}

.twu-section-intro h2 {
  max-width: 15ch;
  text-wrap: balance;
}

/* Stacked section intro: label, wide balanced heading, then a lede
   paragraph at readable measure. Replaces the old two-column intro
   whose right column squeezed its paragraph into a skinny strip. */
.twu-section-head {
  margin-bottom: var(--twu-space-flow);
}

.twu-section-head h2 {
  max-width: 24ch;
  text-wrap: balance;
}

.twu-section-lede {
  max-width: 56ch;
  margin-top: 1rem;
  color: var(--twu-slate);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* WordPress prints margin-left/right: auto !important on every child of
   a constrained-layout group. Both of the rules above cap their width,
   so that auto margin centred them inside the 760px head while the
   label and the card grid below stayed pinned left: the heading sat 60px
   in and the lede 98px in, against a section that is otherwise flush.
   This is the same trap the hero H1 hit in 0.4.7 and the story bands in
   0.4.21, and it needs !important to beat WordPress's own. */
.twu-section-head > h2,
.twu-section-head > .twu-section-lede,
.twu-section-head > .twu-section-label {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.twu-division-section {
  position: relative;
  overflow: hidden;
}

/* Removed in 0.6.1: a full-height 1px hairline was drawn down the right
   of this section at right: calc((100vw - min(1240px, 100vw - 2rem)) / 2).
   Two problems. It aligned to nothing, because the grid inside is capped
   at the wide size while the rule was positioned off the raw viewport,
   so it floated in the padding a few pixels clear of the card edge.
   And 100vw ignores the scrollbar, so the offset was wrong by the
   scrollbar width on every page that scrolls, which is all of them.
   It read as a stray mark rather than as structure. */

.twu-division-index {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--twu-line-strong);
}

/* The group carries WordPress's is-layout-flow class, which prints a
   24px block-gap margin on every child except the first. Inside a grid
   that margin does not collapse into the gap: it pushes each card down
   and, because a stretched grid item sizes to the row minus its own
   margins, leaves it 24px shorter than the row. Measured on production:
   card one 350px tall at the row top, every other card 326px and 24px
   low, with the grid's hairline background showing through the gap.
   The column-gap here is a deliberate 1px hairline, so the flow margin
   is not wanted at all. */
.twu-division-index > .twu-division-card {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Cards flow two per row. With an even card count (the six-division
   lineup) every row is a clean pair; with an odd count the final card
   closes the section full width via the :last-child:nth-child(odd)
   rules below so no card is ever stranded half-width. */
.twu-division-card {
  position: relative;
  grid-column: span 6;
  display: flex;
  min-height: 300px;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
  background: var(--twu-white);
  color: var(--twu-ink);
  text-decoration: none;
  transition: color 220ms ease, background 220ms ease, transform 220ms var(--twu-ease);
}

.twu-division-card:nth-child(1) {
  background: var(--twu-navy);
  color: var(--twu-paper);
}

/* When the card count is odd, the final card closes the section full
   width with an explicit grid so its shape is deterministic at every
   width: code label across the top, icon on the left edge (sharing the
   same left line as the label and the description), headline directly
   beside the icon, description below-left, button on the right. With
   an even card count (six divisions), :nth-child(odd) never matches
   the last card and the grid stays a clean two-up all the way down. */
.twu-division-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "code  code  code"
    "glyph title title"
    "desc  desc  button";
  align-items: center;
  column-gap: clamp(1.25rem, 2.5vw, 2rem);
  row-gap: 1rem;
}

/* Same auto-margin trap as the section head, and worse here because each
   of these sits in its own grid area: the code label was centred across
   the full three-column span and the headline centred inside the title
   area, so neither lined up with the icon or the description below.
   An auto margin beats justify-self on a grid item, so the margin has to
   be zeroed rather than only setting the alignment. */
.twu-division-card:last-child:nth-child(odd) .twu-division-card__code {
  grid-area: code;
  justify-self: start;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.twu-division-card:last-child:nth-child(odd) .twu-division-card__glyph {
  grid-area: glyph;
  justify-self: start;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The headline sits beside the icon. The column gap supplies the space
   between them, so it needs no padding of its own. */
.twu-division-card:last-child:nth-child(odd) > h3 {
  grid-area: title;
  justify-self: start;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.twu-division-card:last-child:nth-child(odd) > p:not(.twu-division-card__code) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.twu-division-card:last-child:nth-child(odd) > p:not(.twu-division-card__code) {
  grid-area: desc;
  max-width: 46ch;
}

.twu-division-card:last-child:nth-child(odd) > .wp-block-buttons {
  grid-area: button;
  margin-top: 0;
  margin-left: 0;
  justify-self: end;
}

.twu-division-card::after {
  position: absolute;
  right: 1.5rem;
  bottom: 1.4rem;
  content: "↗";
  color: var(--twu-dark-brass);
  font-size: 1.35rem;
}

.twu-division-card:nth-child(1)::after {
  color: var(--twu-brass);
}

.twu-division-card:hover,
.twu-division-card:focus-within {
  z-index: 2;
  transform: translateY(-3px);
  background: var(--twu-paper);
  box-shadow: var(--twu-shadow-sm);
}

.twu-division-card:nth-child(1):hover,
.twu-division-card:nth-child(1):focus-within {
  background: var(--twu-deep-navy);
}

.twu-division-card__code {
  margin: 0;
  color: var(--twu-dark-brass);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.twu-division-card:nth-child(1) .twu-division-card__code {
  color: var(--twu-brass);
}

.twu-division-card__glyph {
  display: flex;
  width: 88px;
  height: 54px;
  align-items: end;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(6, 158, 198, 0.45);
  border-radius: 8px;
  background-color: rgba(6, 158, 198, 0.1);
  background-image:
    linear-gradient(rgba(15, 36, 64, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 36, 64, 0.06) 1px, transparent 1px);
  background-size: 12px 12px;
  transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

/* Each division icon chip carries its own accent hue so the six cards
   read as siblings, not clones. */
.twu-icon-division-technical { border-color: rgba(30, 87, 128, 0.5); background-color: rgba(30, 87, 128, 0.09); }
.twu-icon-division-business { border-color: rgba(4, 98, 122, 0.5); background-color: rgba(4, 98, 122, 0.1); }
.twu-icon-division-investor { border-color: rgba(15, 36, 64, 0.4); background-color: rgba(15, 36, 64, 0.08); }
.twu-icon-division-fleet { border-color: rgba(63, 178, 210, 0.55); background-color: rgba(63, 178, 210, 0.14); }
.twu-icon-division-research { border-color: rgba(89, 103, 119, 0.45); background-color: rgba(89, 103, 119, 0.1); }

.twu-division-card:hover .twu-division-card__glyph {
  background-color: rgba(6, 158, 198, 0.18);
  border-color: var(--twu-brass);
  box-shadow: 0 6px 18px rgba(6, 158, 198, 0.22);
}

.twu-division-card:nth-child(1) .twu-division-card__glyph {
  border-color: rgba(242, 245, 247, 0.22);
  background-image:
    linear-gradient(rgba(242, 245, 247, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 245, 247, 0.06) 1px, transparent 1px);
}

.twu-division-card__glyph i {
  width: 12px;
  height: 55%;
  border: 1px solid var(--twu-brass);
}

.twu-division-card__glyph i:nth-child(2) {
  height: 100%;
}

.twu-division-card__glyph i:nth-child(3) {
  height: 72%;
}

.twu-division-card__glyph svg {
  width: 100%;
  height: 100%;
}

.twu-division-card:nth-child(1) .twu-icon-line {
  stroke: var(--twu-paper);
}

.twu-division-card > strong,
.twu-division-card > h3 {
  max-width: 14ch;
  margin: 0;
  color: inherit;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1.08;
}

.twu-division-card > span:not(.twu-division-card__code):not(.twu-division-card__glyph),
.twu-division-card > p:not(.twu-division-card__code) {
  max-width: 44ch;
  margin: 0;
  color: var(--twu-slate);
  line-height: 1.55;
}

.twu-division-card:nth-child(1) > span:not(.twu-division-card__code):not(.twu-division-card__glyph),
.twu-division-card:nth-child(1) > p:not(.twu-division-card__code) {
  color: rgba(242, 245, 247, 0.7);
}

.twu-division-card em,
.twu-division-card > .wp-block-buttons {
  margin-top: auto;
}

.twu-division-card em {
  padding: 0 2rem 0 0;
  background: transparent;
  box-shadow: none;
  color: var(--twu-dark-brass);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twu-division-card__link .wp-block-button__link {
  padding: 0.55rem 1.2rem;
  border: 1.5px solid rgba(6, 158, 198, 0.55);
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--twu-dark-brass);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twu-division-card__link .wp-block-button__link:hover,
.twu-division-card__link .wp-block-button__link:focus-visible {
  border-color: var(--twu-brass);
  background: rgba(6, 158, 198, 0.1);
}

.twu-division-card:nth-child(1) em,
.twu-division-card:nth-child(1) .twu-division-card__link .wp-block-button__link {
  color: var(--twu-brass);
}

.twu-audience-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 2.5rem;
  border-top: 1px solid rgba(15, 36, 64, 0.24);
  border-left: 1px solid rgba(15, 36, 64, 0.24);
}

.twu-audience-grid a {
  position: relative;
  display: flex;
  min-height: 190px;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem;
  border-right: 1px solid rgba(15, 36, 64, 0.24);
  border-bottom: 1px solid rgba(15, 36, 64, 0.24);
  color: var(--twu-ink);
  text-decoration: none;
  transition: background 180ms ease, transform 180ms var(--twu-ease), box-shadow 180ms ease;
}

.twu-audience-grid a:hover {
  background: rgba(6, 158, 198, 0.1);
  transform: translateY(-3px);
  box-shadow: var(--twu-shadow-sm);
}

.twu-audience-grid strong {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.25rem;
  line-height: 1.15;
}

.twu-audience-grid span {
  color: var(--twu-slate);
  font-size: 0.94rem;
  line-height: 1.5;
}

.twu-colleges {
  border-top: 1px solid rgba(15, 36, 64, 0.1);
  border-bottom: 1px solid rgba(15, 36, 64, 0.1);
}

/* Two cards per row everywhere, equal width and equal height (owner
   decision 2026-07-19). The important flags defend the grid against
   generated layout styles that print after this stylesheet. */
.twu-college-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: 1px;
  margin: 2.25rem 0;
  background: rgba(15, 36, 64, 0.2);
  border: 1px solid rgba(15, 36, 64, 0.2);
}

.twu-college-card {
  position: relative;
  display: flex;
  min-height: 240px;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--twu-white);
  color: var(--twu-ink);
  text-decoration: none;
  transition: background 180ms ease, transform 180ms var(--twu-ease), box-shadow 180ms ease;
}

.twu-college-card::after {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  content: "↗";
  color: var(--twu-dark-brass);
  font-size: 1.4rem;
}

.twu-college-card:hover,
.twu-college-card:focus-within {
  background: var(--twu-paper);
  transform: translateY(-3px);
  box-shadow: var(--twu-shadow-sm);
}

.twu-college-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.twu-college-card__icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgba(6, 158, 198, 0.35);
  border-radius: 8px;
  background-color: rgba(6, 158, 198, 0.08);
  background-image:
    linear-gradient(rgba(15, 36, 64, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 36, 64, 0.05) 1px, transparent 1px);
  background-size: 14px 14px;
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.twu-college-card:hover .twu-college-card__icon {
  border-color: var(--twu-brass);
  background-color: rgba(6, 158, 198, 0.16);
  box-shadow: 0 6px 18px rgba(6, 158, 198, 0.22);
}

.twu-college-card__icon svg {
  width: 38px;
  height: 38px;
}

.twu-icon-line {
  stroke: var(--twu-navy);
}

.twu-icon-accent {
  stroke: var(--twu-brass);
}

.twu-division-card__glyph,
.twu-college-card__icon {
  margin: 0;
}

.twu-division-card__glyph::after,
.twu-college-card__icon::after {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 320ms var(--twu-ease);
}

.twu-division-card:hover .twu-division-card__glyph::after,
.twu-division-card:focus-within .twu-division-card__glyph::after {
  transform: scale(1.12) rotate(-3deg);
}

.twu-college-card:hover .twu-college-card__icon::after,
.twu-college-card:focus-within .twu-college-card__icon::after {
  transform: scale(1.14);
}

.twu-icon-division-university::after { background-image: url("../icons/division-university.svg"); }
.twu-icon-division-business::after { background-image: url("../icons/division-business.svg"); }
.twu-icon-division-investor::after { background-image: url("../icons/division-investor.svg"); }
.twu-icon-division-fleet::after { background-image: url("../icons/division-fleet.svg"); }
.twu-icon-division-research::after { background-image: url("../icons/division-research.svg"); }
.twu-icon-division-technical::after { background-image: url("../icons/division-technical.svg"); }
.twu-icon-college-feasibility::after { background-image: url("../icons/college-feasibility.svg"); }
.twu-icon-college-systems::after { background-image: url("../icons/college-systems.svg"); }
.twu-icon-college-science::after { background-image: url("../icons/college-science.svg"); }
.twu-icon-college-operations::after { background-image: url("../icons/college-operations.svg"); }
.twu-icon-college-maintenance::after { background-image: url("../icons/college-maintenance.svg"); }
.twu-icon-college-compliance::after { background-image: url("../icons/college-compliance.svg"); }

.twu-college-card__number {
  width: 44px;
  height: 44px;
  display: grid;
  margin: 0;
  place-items: center;
  border: 1px solid var(--twu-brass);
  color: var(--twu-dark-brass);
  font-size: 0.78rem;
  font-weight: 700;
}

.twu-college-card strong,
.twu-college-card > h3 {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.35rem;
  line-height: 1.2;
}

.twu-college-card > span:last-child,
.twu-college-card > p:not(.twu-college-card__number):not(.twu-card-link) {
  margin: 0;
  color: var(--twu-slate);
  line-height: 1.55;
}

.twu-college-card .twu-card-link {
  margin: auto 0 0;
  padding-right: 2rem;
}

.twu-college-card .twu-card-link a {
  color: var(--twu-dark-brass);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.twu-note {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--twu-brass);
  background: rgba(6, 158, 198, 0.09);
}

.twu-system-map ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 2rem;
  list-style: none;
  border: 1px solid rgba(15, 36, 64, 0.24);
  background-image:
    linear-gradient(rgba(15, 36, 64, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 36, 64, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.twu-system-map li {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
  padding: 1rem;
  border: 1px solid rgba(15, 36, 64, 0.28);
  background: var(--twu-paper);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 180ms ease, border-color 180ms ease;
}

.twu-system-map li:hover {
  border-color: var(--twu-brass);
  background: var(--twu-white);
}

.twu-system-map li span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--twu-brass);
  color: var(--twu-dark-brass);
}

.twu-inquiry {
  position: relative;
  overflow: hidden;
  padding-top: var(--twu-space-section);
  padding-bottom: var(--twu-space-section);
  border-top: 4px solid var(--twu-brass);
  background-image:
    linear-gradient(rgba(242, 245, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 245, 247, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
}

.twu-inquiry::after {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(6, 158, 198, 0.22);
  content: "";
  transform: rotate(45deg);
  pointer-events: none;
}

.twu-page-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.75rem, 5.5vw, 4rem);
  padding-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
  background-image:
    linear-gradient(rgba(15, 36, 64, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 36, 64, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  border-bottom: 1px solid var(--twu-line);
}

/* The old decorative panel (::before) and free-floating corner label
   caused overlap and clipping whenever layout math shifted; the label
   is now a self-contained chip pinned to the hero's top right, sized
   by its own text and removed on narrow screens. */
.twu-page-hero::after {
  position: absolute;
  top: 1.4rem;
  right: max(1.25rem, calc((100% - 1240px) / 2));
  z-index: 1;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(6, 158, 198, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  content: "TWU / INFORMATION";
  color: var(--twu-dark-brass);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
  pointer-events: none;
}

.twu-division--university .twu-page-hero::after { content: "TWU / DIVISION 01 / UNIVERSITY"; }
.twu-division--technical-academy .twu-page-hero::after { content: "TWU / DIVISION 02 / TECHNICAL ACADEMY"; }
.twu-division--business-school .twu-page-hero::after { content: "TWU / DIVISION 03 / BUSINESS SCHOOL"; }
.twu-division--investor-academy .twu-page-hero::after { content: "TWU / DIVISION 04 / INVESTOR ACADEMY"; }
.twu-division--fleet-academy .twu-page-hero::after { content: "TWU / DIVISION 05 / FLEET ACADEMY"; }
.twu-division--research-institute .twu-page-hero::after { content: "TWU / DIVISION 06 / RESEARCH INSTITUTE"; }

/*
 * Per-division hero motifs. The palette is fixed by DESIGN.md, so each
 * division is distinguished by drafting pattern, not by hue: University
 * keeps the standard square grid; Technical Academy uses a compact service
 * grid; Business School uses a diagonal hatch; Investor Academy a wide
 * sparse grid; Fleet Academy horizontal lane lines; Research Institute a
 * dot matrix. Each also gets a 3px brass top rule so interior pages read as
 * "inside a division."
 */
.twu-division .twu-page-hero {
  border-top: 3px solid var(--twu-brass);
}

.twu-division--technical-academy .twu-page-hero {
  background-image:
    linear-gradient(rgba(15, 36, 64, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 36, 64, 0.055) 1px, transparent 1px);
  background-size: 36px 36px;
}

.twu-division--business-school .twu-page-hero {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(15, 36, 64, 0.045) 0,
    rgba(15, 36, 64, 0.045) 1px,
    transparent 1px,
    transparent 18px
  );
  background-size: auto;
}

.twu-division--investor-academy .twu-page-hero {
  background-image:
    linear-gradient(rgba(15, 36, 64, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 36, 64, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
}

.twu-division--fleet-academy .twu-page-hero {
  background-image: linear-gradient(rgba(15, 36, 64, 0.055) 1px, transparent 1px);
  background-size: 100% 26px;
}

.twu-division--research-institute .twu-page-hero {
  background-image: radial-gradient(rgba(15, 36, 64, 0.14) 1px, transparent 1.5px);
  background-size: 26px 26px;
}

.twu-page-hero > * {
  position: relative;
  z-index: 1;
}

/* Full-width heading block: shrinking the block used to trigger the
   constrained layout's auto margins and center the title against the
   left-aligned lede. The teal rule anchors the whole header column. */
.twu-page-hero h1 {
  max-width: 100%;
  margin-top: 1rem;
  padding-left: clamp(0.9rem, 1.5vw, 1.25rem);
  border-left: 5px solid var(--twu-brass);
  overflow-wrap: break-word;
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.twu-page-hero .twu-direct-answer {
  max-width: 62ch;
  /* Pin left: WordPress's constrained layout auto-centers any child
     narrower than the content width, which is what pushed the old
     title off-axis from its lede. */
  margin-top: 1.1rem;
  margin-right: auto !important;
  margin-left: 0 !important;
  color: var(--twu-slate);
  font-size: 1.08rem;
  line-height: 1.7;
}

.twu-kicker {
  display: inline-block;
  margin-bottom: 0;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--twu-brass);
  color: var(--twu-dark-brass);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.twu-page-body {
  position: relative;
  padding-top: clamp(2.75rem, 5vw, 4rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.twu-page-meta-shell {
  padding: 0 clamp(1rem, 4vw, 3rem) clamp(2rem, 3vw, 2.75rem);
  background: var(--twu-white);
}

/* The page body, metadata row, and footer form one continuous ending.
   Override the root block gap so the paper background cannot reappear
   as an empty stripe between those template blocks. */
body .wp-site-blocks > .twu-page-meta-shell,
body .wp-site-blocks > .twu-page-meta-shell + .wp-block-template-part {
  margin-block-start: 0 !important;
}

.twu-page-meta {
  display: flex;
  width: min(100%, var(--twu-wide));
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-inline: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--twu-line-strong);
  color: var(--twu-slate);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.twu-page-meta a {
  color: var(--twu-academy-navy);
  font-weight: 650;
  text-decoration-color: var(--twu-brass);
  text-underline-offset: 0.2em;
}

.twu-page-body h2 {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--twu-line);
  font-size: var(--wp--preset--font-size--x-large);
  text-wrap: balance;
}

.twu-page-body h2:first-child {
  margin-top: 0;
}

.twu-page-body h3 {
  margin-top: 2rem;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
}

.twu-page-body > p,
.twu-page-body > ul,
.twu-page-body > ol {
  max-width: 72ch;
}

.twu-page-body ul.wp-block-list {
  padding-left: 1.25rem;
}

.twu-page-body ul.wp-block-list li {
  margin-bottom: 0.5rem;
  color: var(--twu-ink);
}

.twu-breadcrumbs {
  margin-bottom: 1.25rem;
  color: var(--twu-slate);
  font-size: 0.8rem;
}

.twu-breadcrumbs a {
  color: var(--twu-slate);
  text-decoration: underline;
}

.twu-breadcrumbs__sep {
  margin: 0 0.4rem;
  color: rgba(21, 34, 53, 0.35);
}

.twu-breadcrumbs [aria-current] {
  color: var(--twu-ink);
  font-weight: 600;
}

.twu-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.twu-chip {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  min-width: 190px;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(15, 36, 64, 0.18);
  background: var(--twu-white);
}

.twu-chip__icon {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
}

.twu-chip strong {
  color: var(--twu-navy);
  font-size: 0.92rem;
}

.twu-chip span {
  color: var(--twu-dark-brass);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twu-role-grid {
  display: grid;
  gap: 1px;
  margin: 2rem 0;
  background: rgba(15, 36, 64, 0.14);
  border: 1px solid rgba(15, 36, 64, 0.14);
}

.twu-role {
  scroll-margin-top: 1.5rem;
  padding: 1.75rem;
  background: var(--twu-white);
  transition: background 180ms ease, transform 180ms var(--twu-ease);
}

.twu-role:hover {
  transform: translateY(-2px);
  background: var(--twu-paper);
}

.twu-role h3 {
  margin: 0 0 0.5rem;
  color: var(--twu-navy);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.2rem;
}

.twu-role p {
  margin: 0 0 1rem;
  color: var(--twu-slate);
}

.twu-role a.twu-role-link {
  color: var(--twu-dark-brass);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.twu-role a.twu-role-link:hover {
  text-decoration: underline;
}

.twu-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0;
  list-style: none;
}

.twu-related-links a {
  color: var(--twu-navy);
  font-weight: 600;
}

.twu-faq {
  margin-top: 1rem;
}

.twu-faq-item {
  padding: 1.5rem;
  border-top: 1px solid rgba(15, 36, 64, 0.14);
  background: var(--twu-white);
}

.twu-faq-item:last-child {
  border-bottom: 1px solid rgba(15, 36, 64, 0.14);
}

.twu-faq-q {
  margin: 0 0 0.6rem;
  color: var(--twu-navy);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.18rem;
}

.twu-faq-a {
  margin: 0;
  color: var(--twu-slate);
}

details.twu-faq-item {
  padding: 0;
}

details.twu-faq-item summary {
  min-height: 54px;
  padding: 1.25rem 3rem 1.25rem 1.5rem;
  cursor: pointer;
  color: var(--twu-navy);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
}

details.twu-faq-item .twu-faq-a {
  padding: 0 1.5rem 1.5rem;
}

.twu-glossary {
  display: grid;
  gap: 1px;
  margin: 1.5rem 0;
  background: rgba(15, 36, 64, 0.14);
  border: 1px solid rgba(15, 36, 64, 0.14);
}

.twu-glossary-item {
  padding: 1.25rem 1.5rem;
  background: var(--twu-white);
  transition: background 180ms ease;
}

.twu-glossary-item:hover {
  background: var(--twu-paper);
}

/* .twu-glossary-term/.twu-glossary-definition are the same entry styled
   as native heading/paragraph blocks (gutenberg_migration.py converts
   <dt>/<dd> to <h3>/<p> since neither has a native block equivalent);
   both selector sets must stay in sync so migrated and legacy markup
   render identically. */
.twu-glossary-item dt,
.twu-glossary-item .twu-glossary-term {
  margin: 0 0 0.35rem;
  color: var(--twu-navy);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.05rem;
  font-weight: 700;
}

.twu-glossary-item dd,
.twu-glossary-item .twu-glossary-definition {
  margin: 0;
  color: var(--twu-slate);
}

.twu-editorial-standard {
  border-top: 1px solid var(--twu-line);
  border-bottom: 1px solid var(--twu-line);
}

.twu-editorial-standard > .wp-block-group > p:not(.twu-section-label) {
  max-width: 74ch;
}

.twu-standard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.5rem;
  padding: 1px;
  background: var(--twu-line-strong);
}

.twu-standard-grid article,
.twu-standard-grid .twu-standard-card {
  min-height: 220px;
  padding: 1.5rem;
  background: var(--twu-paper);
}

.twu-standard-grid article > span,
.twu-standard-grid .twu-standard-card__number {
  margin: 0;
  color: var(--twu-dark-brass);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.twu-standard-grid h3 {
  margin: 2rem 0 0.75rem;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.2rem;
}

.twu-standard-grid p:not(.twu-standard-card__number) {
  margin: 0;
  color: var(--twu-slate);
  font-size: 0.94rem;
}

.twu-source-block,
.twu-review-block {
  margin-block: 2.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--twu-line);
  border-left: 4px solid var(--twu-brass);
  background: var(--twu-white);
  box-shadow: var(--twu-shadow-sm);
}

.twu-source-block :last-child,
.twu-review-block :last-child {
  margin-bottom: 0;
}

:where(.twu-page-body, .wp-block-post-content) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 0.9rem;
  border: 1px solid #73808f;
  border-radius: 2px;
  background: var(--twu-white);
  color: var(--twu-ink);
  font: inherit;
}

:where(.twu-page-body, .wp-block-post-content) textarea {
  min-height: 160px;
  resize: vertical;
}

:where(.twu-page-body, .wp-block-post-content) label {
  color: var(--twu-navy);
  font-weight: 700;
}

.wp-block-query .wp-block-post {
  padding-block: 1.5rem;
  border-top: 1px solid var(--twu-line);
}

.wp-block-query .wp-block-post-title a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.twu-primary-navigation .current-menu-item > .wp-block-navigation-item__content,
.twu-primary-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
  text-decoration: underline;
  text-decoration-color: var(--twu-brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.twu-search-hero,
.twu-error-page {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 4vw, 3rem);
  background-image:
    linear-gradient(rgba(15, 36, 64, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 36, 64, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

.twu-search-hero::after,
.twu-error-page::after {
  position: absolute;
  top: 2rem;
  right: max(1rem, calc((100vw - 1240px) / 2));
  width: clamp(80px, 12vw, 180px);
  height: clamp(80px, 12vw, 180px);
  border-top: 2px solid var(--twu-brass);
  border-right: 2px solid var(--twu-brass);
  content: "";
  pointer-events: none;
}

.twu-search-hero > *,
.twu-error-page > * {
  position: relative;
  z-index: 1;
}

.twu-search-hero h1,
.twu-error-page h1 {
  max-width: 17ch;
  text-wrap: balance;
}

.twu-search-form {
  max-width: 760px;
  margin-top: 2rem;
}

.twu-search-form .wp-block-search__label {
  color: var(--twu-navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twu-search-form .wp-block-search__inside-wrapper {
  margin-top: 0.55rem;
  padding: 0;
  border: 1px solid var(--twu-line-strong);
  background: var(--twu-white);
}

.twu-search-form .wp-block-search__input {
  min-height: 54px;
  border: 0;
  background: transparent;
  color: var(--twu-ink);
  font: inherit;
}

.twu-search-form .wp-block-search__button {
  min-height: 54px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--twu-line-strong);
  border-radius: 0;
  background: var(--twu-brass);
  color: var(--twu-deep-navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twu-search-results {
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 4vw, 3rem);
  background: var(--twu-white);
}

.twu-search-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--twu-line-strong);
  list-style: none;
}

.twu-search-card {
  min-height: 190px;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  background: var(--twu-paper);
  transition: background 180ms ease;
}

.twu-search-card:hover {
  background: var(--twu-white);
}

.twu-search-card .wp-block-post-title {
  margin-top: 0;
}

.twu-search-card .wp-block-post-excerpt__more-link {
  color: var(--twu-dark-brass);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.twu-search-query .wp-block-query-pagination {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--twu-line-strong);
}

.twu-empty-state {
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px solid var(--twu-line-strong);
  background: var(--twu-paper);
}

.twu-empty-state h2 {
  max-width: 22ch;
  text-wrap: balance;
}

.twu-error-page {
  min-height: 72vh;
}

.twu-error-page__inner {
  width: 100%;
}

.twu-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: 1px;
  background: var(--twu-line-strong);
}

.twu-route-card {
  min-height: 190px;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--twu-white);
}

.twu-route-card h2 {
  margin-top: 0;
  font-family: var(--wp--preset--font-family--display);
}

.twu-route-card p:last-child {
  margin-top: auto;
  margin-bottom: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.twu-route-card a {
  color: var(--twu-dark-brass);
}

.twu-media-feature {
  margin-block: var(--twu-space-flow);
}

.twu-media-slot {
  margin: 0;
  border: 1px solid var(--twu-line-strong);
  background: var(--twu-white);
  box-shadow: var(--twu-shadow-md);
}

.twu-media-slot__frame {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  padding: 1.5rem;
  background-color: var(--twu-deep-navy);
  background-image:
    linear-gradient(rgba(63, 178, 210, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 178, 210, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--twu-paper);
}

.twu-media-slot__frame::before,
.twu-media-slot__frame::after {
  position: absolute;
  width: 12%;
  height: 18%;
  content: "";
  pointer-events: none;
}

.twu-media-slot__frame::before {
  top: 1rem;
  left: 1rem;
  border-top: 1px solid var(--twu-brass);
  border-left: 1px solid var(--twu-brass);
}

.twu-media-slot__frame::after {
  right: 1rem;
  bottom: 1rem;
  border-right: 1px solid var(--twu-brass);
  border-bottom: 1px solid var(--twu-brass);
}

.twu-media-slot__index,
.twu-media-slot__status {
  position: absolute;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.twu-media-slot__index {
  top: 1rem;
  right: 1rem;
  color: var(--twu-brass);
}

.twu-media-slot__status {
  bottom: 1rem;
  left: 1rem;
  color: var(--twu-paper);
}

.twu-media-slot__drawing {
  display: grid;
  width: min(54%, 420px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.4rem, 1.4vw, 1rem);
  align-items: end;
}

.twu-media-slot__drawing i {
  display: block;
  min-height: clamp(38px, 8vw, 96px);
  border: 1px solid rgba(242, 245, 247, 0.55);
  border-top: 3px solid var(--twu-brass);
  background: rgba(242, 245, 247, 0.04);
}

.twu-media-slot__drawing i:nth-child(2) {
  min-height: clamp(62px, 12vw, 145px);
}

.twu-media-slot__drawing i:nth-child(3) {
  min-height: clamp(48px, 10vw, 118px);
}

.twu-media-slot__drawing i:nth-child(4) {
  min-height: clamp(76px, 15vw, 180px);
}

.twu-media-slot__play {
  display: grid;
  width: clamp(74px, 10vw, 112px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--twu-brass);
  border-radius: 50%;
  background: rgba(63, 178, 210, 0.08);
  color: var(--twu-brass);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.twu-media-slot figcaption {
  padding: 1rem 1.25rem;
  color: var(--twu-slate);
  font-size: 0.82rem;
  line-height: 1.55;
}

.twu-media-slot figcaption strong {
  color: var(--twu-navy);
}

.twu-editorial-media {
  position: relative;
  margin-block: var(--twu-space-flow);
}

.twu-editorial-media--systems {
  max-width: 64rem;
}

.twu-editorial-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(63, 178, 210, 0.45);
  background: var(--twu-deep-navy);
  box-shadow: var(--twu-shadow-md);
}

.twu-editorial-figure::before,
.twu-editorial-figure::after {
  position: absolute;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  content: "";
  pointer-events: none;
}

.twu-editorial-figure::before {
  top: 1rem;
  left: 1rem;
  border-top: 1px solid var(--twu-brass);
  border-left: 1px solid var(--twu-brass);
}

/* Anchored to the top so the bracket can never collide with the
   caption, whose height varies with text length and viewport. */
.twu-editorial-figure::after {
  top: 1rem;
  right: 1rem;
  border-top: 1px solid var(--twu-brass);
  border-right: 1px solid var(--twu-brass);
}

.twu-editorial-figure picture,
.twu-editorial-figure img {
  display: block;
  width: 100%;
}

.twu-editorial-figure img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--twu-navy);
}

.twu-editorial-figure__caption {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  align-items: start;
  padding: 1rem 1.25rem 1.1rem;
  color: rgba(242, 245, 247, 0.82);
  background:
    linear-gradient(90deg, rgba(63, 178, 210, 0.1), transparent 42%),
    var(--twu-deep-navy);
  font-size: 0.92rem;
  line-height: 1.55;
}

.twu-editorial-figure__state {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: center;
  padding-inline: 0.55rem;
  border: 1px solid rgba(63, 178, 210, 0.55);
  color: var(--twu-paper);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.twu-explorer-section {
  position: relative;
  overflow: hidden;
}

.twu-explorer-section::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(242, 245, 247, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 245, 247, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  content: "";
  pointer-events: none;
}

.twu-explorer-section > * {
  position: relative;
}

/* Two even columns of equal-size closed cards. align-items:start lets
   an opened card grow without stretching its row partner; the rows
   below simply move down. Collapses to one column on small screens. */
.twu-system-explorer {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.9rem;
  align-items: start;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.twu-system-explorer summary {
  min-height: 92px;
}

.twu-system-explorer details {
  border: 1px solid rgba(6, 158, 198, 0.3);
  background: rgba(8, 22, 37, 0.72);
  transition: border-color 220ms ease, background 220ms ease;
}

.twu-system-explorer details:hover,
.twu-system-explorer details[open] {
  border-color: rgba(6, 158, 198, 0.6);
  background: rgba(8, 22, 37, 0.88);
}

.twu-system-explorer details[open] {
  border-left: 4px solid var(--twu-brass);
}

.twu-system-explorer summary,
.twu-pathfinder summary {
  position: relative;
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 3rem 1rem 1.25rem;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.02rem;
  font-weight: 700;
  list-style: none;
}

.twu-system-explorer summary::-webkit-details-marker,
.twu-pathfinder summary::-webkit-details-marker {
  display: none;
}

.twu-system-explorer summary::after,
.twu-pathfinder summary::after {
  position: absolute;
  right: 1.15rem;
  content: "+";
  color: var(--twu-brass);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 1.4rem;
  font-weight: 400;
}

.twu-system-explorer details[open] summary::after,
.twu-pathfinder details[open] summary::after {
  content: "−";
}

.twu-system-explorer summary span {
  color: var(--twu-brass);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.twu-system-explorer details > div,
.twu-pathfinder details > div {
  padding: 0 1.25rem 1.5rem;
}

.twu-system-explorer details > div p,
.twu-pathfinder details > div p {
  margin-top: 0;
}

.twu-system-explorer details > .wp-block-paragraph,
.twu-pathfinder details > .wp-block-paragraph {
  margin: 0;
  padding: 0 1.25rem 1rem;
}

.twu-system-explorer details > .wp-block-buttons,
.twu-pathfinder details > .wp-block-buttons {
  margin: 0;
  padding: 0 1.25rem 1.5rem;
}

.twu-system-explorer details > .wp-block-buttons .wp-block-button__link,
.twu-pathfinder details > .wp-block-buttons .wp-block-button__link {
  padding: 0.55rem 1.15rem;
  border: 1.5px solid rgba(6, 158, 198, 0.55);
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.twu-pathfinder details > .wp-block-buttons .wp-block-button__link:hover,
.twu-pathfinder details > .wp-block-buttons .wp-block-button__link:focus-visible {
  border-color: var(--twu-brass);
  background: rgba(6, 158, 198, 0.1);
}

.twu-system-explorer details > .wp-block-buttons .wp-block-button__link:hover,
.twu-system-explorer details > .wp-block-buttons .wp-block-button__link:focus-visible {
  border-color: var(--twu-brass);
  background: rgba(6, 158, 198, 0.16);
}

.twu-system-explorer a {
  color: var(--twu-brass);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.twu-system-explorer summary:focus-visible,
.twu-pathfinder summary:focus-visible {
  outline: 3px solid var(--twu-brass);
  outline-offset: -3px;
}

/* Route picker: the question cards run full width in two equal columns.
   Six cards crammed into one 441px column left them stacked in a narrow
   strip beside a decorative crest that carried no information, and the
   cards themselves read as inconsistent widths. Two columns across the
   full measure gives every card the same width and halves the height of
   the section.

   The crest is hidden rather than deleted because it lives in the saved
   page content, not in this theme. Removing it properly is one edit in
   the editor: delete the right-hand column of the Choose your route
   block. Until then this keeps it off the front end. */
.twu-pathfinder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
  margin-top: 0;
}

/* Cards must not be re-centred or capped by the constrained-layout
   auto margins, or the two columns end up visibly unequal. */
.twu-pathfinder > details {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.twu-pathfinder-columns {
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: 2.5rem;
}

/* The remaining column takes the full measure. The inline flex-basis
   WordPress writes on a column block has to be overridden explicitly;
   hiding its sibling alone would leave this one at its old share. */
.twu-pathfinder-columns > .wp-block-column:not(.twu-pathfinder-brand) {
  flex-basis: 100% !important;
  max-width: none;
}

.twu-pathfinder-brand {
  display: none !important;
}

.twu-pathfinder-brand__figure {
  display: grid;
  place-items: center;
  margin: 0;
}

.twu-pathfinder-brand__figure img {
  width: min(360px, 82%);
  height: auto;
  filter: drop-shadow(0 20px 44px rgba(8, 22, 37, 0.16));
}

/* Two columns need roughly 340px each to hold a question without the
   summary text wrapping to four lines. Below that, one column. */
@media (max-width: 780px) {
  .twu-pathfinder {
    grid-template-columns: 1fr;
  }
}

.twu-pathfinder details {
  border: 1px solid var(--twu-line-strong);
  background: var(--twu-white);
  box-shadow: var(--twu-shadow-sm);
}

.twu-pathfinder details[open] {
  border-left: 4px solid var(--twu-brass);
}

.twu-pathfinder details {
  color: var(--twu-slate);
}

.twu-pathfinder a {
  color: var(--twu-dark-brass);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.twu-evidence-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 1px;
  background: var(--twu-line-strong);
  list-style: none;
}

.twu-evidence-workflow li {
  min-width: 0;
  background: var(--twu-paper);
}

.twu-evidence-workflow details {
  height: 100%;
}

.twu-evidence-workflow summary {
  position: relative;
  display: grid;
  min-height: 150px;
  align-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 1.25rem 2.5rem;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1rem;
  font-weight: 700;
  list-style: none;
}

.twu-evidence-workflow summary::-webkit-details-marker {
  display: none;
}

.twu-evidence-workflow summary::after {
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  content: "+";
  color: var(--twu-dark-brass);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 1.25rem;
}

.twu-evidence-workflow details[open] summary::after {
  content: "−";
}

.twu-evidence-workflow summary span {
  color: var(--twu-dark-brass);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.twu-evidence-workflow details > div {
  padding: 0 1.25rem 1.5rem;
  color: var(--twu-slate);
  font-size: 0.9rem;
}

.twu-evidence-workflow details > div p {
  margin: 0;
}

.twu-evidence-workflow summary:focus-visible {
  outline: 3px solid var(--twu-brass);
  outline-offset: -3px;
}

@media (min-width: 700px) {
  .twu-glossary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 700px) {
  .twu-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The decorative rail and corner label need full desktop width to sit
   clear of headline and answer text. Both disappear before they can
   crowd the constrained content column. */
@media (max-width: 1100px) {
  .twu-page-hero::before,
  .twu-page-hero::after {
    display: none;
  }
}

/* The Glossary/About/Contact nav items exist for the mobile overlay
   only; on desktop those pages already live in the utility bar. */
@media (min-width: 1081px) {
  .twu-primary-navigation .twu-nav-utility {
    display: none;
  }
}

/* The primary nav collapses to the overlay menu below 1080px: six
   labels plus the CTA and the wordmark cannot share one row at
   tablet widths without crushing. The open menu is a full-screen
   deep-navy panel matching the site's dark bands: large display-font
   links, generous tap targets, the utility pages as a secondary
   group, and the Request Information CTA anchored at the end. */
@media (max-width: 1080px) {
  /* Root cause of the unusable mobile menu: backdrop-filter on the
     sticky header makes it a CSS containing block for fixed-position
     descendants, so the core overlay's inset 0 resolved against the
     header strip instead of the viewport and the whole menu rendered
     inside a roughly 100px-tall band. The header background is 96%
     opaque paper, so dropping the blur at these widths is visually
     indistinguishable and frees the overlay to fill the screen. */
  .twu-site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--twu-line-strong);
    border-radius: 2px;
    background: var(--twu-white);
    color: var(--twu-navy);
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container-open svg {
    width: 26px;
    height: 26px;
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  /* The mobile menu is a LIGHT paper panel with dark navy text, not a
     dark panel. iOS Safari repeatedly dropped the dark background on
     some devices (even in longhand form), leaving pale text sitting on
     the header's paper fallback, invisible. A light panel with dark
     text stays readable whether iOS honours our background or falls
     back to paper, so it cannot regress to unreadable text. The
     background-color carries !important to survive any WordPress.com or
     Jetpack global-style override, with a literal-hex line beneath the
     var() line as a second net. */
  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
    padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    background-color: #f2f5f7 !important;
    background-color: var(--twu-paper, #f2f5f7) !important;
    background-image:
      linear-gradient(rgba(15, 36, 64, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15, 36, 64, 0.05) 1px, transparent 1px);
    background-size: 36px 36px;
    color: #0f2440;
    color: var(--twu-navy, #0f2440);
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--twu-line-strong);
    border-radius: 2px;
    background: var(--twu-white);
    color: var(--twu-navy);
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
    width: 26px;
    height: 26px;
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    padding-top: 4.25rem;
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    border-bottom: 1px solid var(--twu-line);
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 58px;
    padding: 1rem 0.25rem;
    color: #0f2440;
    color: var(--twu-navy, #0f2440);
    font-family: var(--wp--preset--font-family--display);
    font-size: 1.3rem;
    font-weight: 600;
  }

  /* The desktop hover-underline pseudo-element draws a stray hairline
     inside the overlay; the overlay has its own current-page marker. */
  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
    display: none;
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
    padding-left: 0.9rem;
    border-left: 3px solid var(--twu-brass);
    color: var(--twu-dark-brass);
    /* The overlay uses the brass left bar as its active marker; the
       global desktop active-page underline is redundant here. */
    text-decoration: none;
  }

  /* Secondary group: the utility pages, visually stepped down. */
  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .twu-nav-utility .wp-block-navigation-item__content {
    min-height: 48px;
    padding-block: 0.7rem;
    color: var(--twu-slate);
    font-family: var(--wp--preset--font-family--body);
    font-size: 1rem;
    font-weight: 500;
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.twu-nav-utility) + .twu-nav-utility {
    margin-top: 1.5rem;
  }

  /* CTA: a full-width brass block anchoring the menu. */
  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .twu-nav-cta {
    margin-top: 2rem;
    border-bottom: 0;
  }

  .twu-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .twu-nav-cta a {
    justify-content: center;
    min-height: 56px;
    color: var(--twu-deep-navy) !important;
    font-family: var(--wp--preset--font-family--body);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
  }
}

@media (max-width: 1000px) {
  .twu-header-inner {
    min-height: 74px;
  }

  .twu-brand img {
    height: 56px;
    width: auto;
  }

  .twu-status-rail__grid,
  .twu-standard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .twu-status-rail__item:nth-child(3),
  .twu-status-rail__item:nth-child(4) {
    border-top: 1px solid rgba(242, 245, 247, 0.14);
  }

  .twu-division-card,
  .twu-division-card:nth-child(1),
  .twu-division-card:nth-child(2) {
    grid-column: span 6;
    min-height: 280px;
  }

  .twu-division-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .twu-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .twu-college-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .twu-evidence-workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .twu-footer-grid {
    flex-wrap: wrap !important;
  }

  .twu-footer-grid > .twu-footer-brand {
    flex-basis: 100% !important;
  }
}

/* Tablet band only: brand spans full width, the three link columns
   share one even 3-up row beneath it, rather than a 2 + 1 split that
   stranded the Information column alone. Scoped with a min-width so it
   cannot outrank the <=700px single-column stack rule below (the
   :not() selector's specificity would otherwise win there). */
@media (min-width: 701px) and (max-width: 860px) {
  .twu-footer-grid > .wp-block-column:not(.twu-footer-brand) {
    flex: 1 1 calc(33.333% - 1.5rem) !important;
  }
}

@media (max-width: 700px) {
  .twu-utility-links {
    display: none !important;
  }

  .twu-utility-inner {
    justify-content: center !important;
  }

  .twu-brand img {
    height: 46px;
    width: auto;
  }

  .twu-hero {
    min-height: auto;
    padding-top: 3.5rem;
  }

  .twu-hero::before {
    inset: 12px;
  }

  .twu-blueprint {
    min-height: 0;
    padding: 1rem;
  }

  .twu-blueprint__sequence {
    grid-template-columns: 1fr;
  }

  .twu-blueprint__footer {
    flex-wrap: wrap;
  }

  .twu-status-rail__grid,
  .twu-standard-grid {
    grid-template-columns: 1fr;
  }

  .twu-status-rail__item,
  .twu-status-rail__item:nth-child(n) {
    border: 0;
    border-bottom: 1px solid rgba(242, 245, 247, 0.14);
  }

  .twu-division-card,
  .twu-division-card:nth-child(n),
  .twu-division-card:last-child {
    grid-column: 1 / -1;
    min-height: 250px;
    /* display: flex is load-bearing for the fifth card: its wide
       variant is a grid on larger screens, so without an explicit
       display reset the stack rules below would silently not apply
       and the card would keep its desktop shape. With it, all five
       cards share one identical stacked layout. */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1rem;
  }

  .twu-division-card:last-child .twu-division-card__code {
    flex-basis: auto;
  }

  .twu-division-card:last-child > h3 {
    max-width: 14ch;
  }

  .twu-division-card:last-child > p:not(.twu-division-card__code) {
    flex: 0 1 auto;
    max-width: 44ch;
  }

  .twu-division-card:last-child > .wp-block-buttons {
    margin-top: auto;
    margin-left: 0;
  }

  /* The decorative corner arrow shares the bottom-right corner with
     each card's button once cards stack; drop it on phones. */
  .twu-division-card::after {
    display: none;
  }

  .twu-pathfinder {
    grid-template-columns: 1fr;
  }

  .twu-pathfinder details:last-of-type {
    grid-column: auto;
  }

  .twu-section-intro {
    display: block;
  }

  .twu-page-hero::before,
  .twu-page-hero::after {
    display: none;
  }

  .twu-audience-grid,
  .twu-college-grid,
  .twu-system-map ol {
    grid-template-columns: 1fr !important;
  }

  .twu-audience-grid a,
  .twu-college-card {
    min-height: 0;
  }

  .twu-page-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .twu-route-grid {
    grid-template-columns: 1fr;
  }

  .twu-system-explorer {
    grid-template-columns: 1fr !important;
  }

  .twu-editorial-media {
    margin-block: 2.5rem;
  }

  .twu-editorial-figure::before {
    top: 0.7rem;
    left: 0.7rem;
  }

  .twu-editorial-figure::after {
    top: 0.7rem;
    right: 0.7rem;
  }

  .twu-parallax-band .twu-status-rail__grid {
    width: 100%;
    border-inline: 0;
  }

  .twu-editorial-figure__caption {
    grid-template-columns: 1fr;
    padding: 0.9rem 1rem 1rem;
  }

  .twu-evidence-workflow {
    grid-template-columns: 1fr;
  }

  .twu-evidence-workflow summary {
    min-height: 96px;
  }

  .twu-search-form .wp-block-search__inside-wrapper {
    align-items: stretch;
    flex-direction: column;
  }

  .twu-search-form .wp-block-search__button {
    min-height: 48px;
    border-top: 1px solid var(--twu-line-strong);
    border-left: 0;
  }

  .twu-header-inner {
    min-height: 70px;
  }

  .twu-footer-grid > .wp-block-column,
  .twu-footer-grid > .twu-footer-brand {
    flex-basis: 100% !important;
  }
}

/* Landscape phones: short viewports need much tighter vertical bands
   so the hero and page heroes do not fill multiple screens. */
@media (max-height: 480px) and (orientation: landscape) {
  .twu-hero {
    min-height: auto;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .twu-page-hero {
    padding-top: 1.75rem;
    padding-bottom: 1.5rem;
  }

  .twu-section,
  .twu-inquiry {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .twu-utility-bar {
    display: none;
  }

  .twu-header-inner {
    min-height: 56px;
  }
}

/* Ultrawide: scale the drafting-grid texture up so it does not read
   as noise, and keep the hero from towering on very tall monitors. */
@media (min-width: 2000px) {
  .twu-hero {
    min-height: min(820px, 74vh);
    background-size: 56px 56px;
  }

  .twu-page-hero {
    background-size: 44px 44px;
  }

  .twu-inquiry {
    background-size: 48px 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ */
/* 0.4.3 polish: button system, statement parallax, interaction detail */
/* ------------------------------------------------------------------ */

/* Buttons: crisper type, a whisker of radius, and a lift + arrow-slide
   on hover. The arrow space is always reserved so nothing reflows. */
#twu-main .wp-block-button__link {
  border-radius: 2px;
  font-weight: 650;
  letter-spacing: 0.02em;
  transition:
    transform 240ms var(--twu-ease),
    box-shadow 240ms ease,
    background-color 240ms ease,
    color 240ms ease,
    border-color 240ms ease;
}

#twu-main .wp-block-button__link:hover,
#twu-main .wp-block-button__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(6, 158, 198, 0.28);
}

#twu-main .wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(6, 158, 198, 0.2);
}

.twu-hero .wp-block-button__link::after,
.twu-inquiry .wp-block-button__link::after,
.twu-pathfinder .wp-block-button__link::after,
.twu-system-explorer .wp-block-button__link::after,
.twu-division-card__link .wp-block-button__link::after {
  display: inline-block;
  margin-left: 0.45em;
  content: "\2192";
  opacity: 0;
  transform: translateX(-6px);
  transition: transform 240ms var(--twu-ease), opacity 240ms ease;
}

.twu-hero .wp-block-button__link:hover::after,
.twu-hero .wp-block-button__link:focus-visible::after,
.twu-inquiry .wp-block-button__link:hover::after,
.twu-inquiry .wp-block-button__link:focus-visible::after,
.twu-pathfinder .wp-block-button__link:hover::after,
.twu-pathfinder .wp-block-button__link:focus-visible::after,
.twu-system-explorer .wp-block-button__link:hover::after,
.twu-system-explorer .wp-block-button__link:focus-visible::after,
.twu-division-card__link .wp-block-button__link:hover::after,
.twu-division-card__link .wp-block-button__link:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

/* Text-style buttons inside cards and accordions lift less; the arrow
   carries the motion. */
.twu-pathfinder .wp-block-button__link:hover,
.twu-system-explorer .wp-block-button__link:hover,
.twu-division-card__link .wp-block-button__link:hover {
  transform: none;
  box-shadow: none;
}

/* Pathfinder buttons sit flush left inside their cards. */
.twu-pathfinder details > .wp-block-buttons,
.twu-system-explorer details > .wp-block-buttons {
  justify-content: flex-start;
}

/* Centered branded-statement variant of the parallax story band. */
.twu-parallax-story--statement .wp-block-cover__inner-container {
  display: grid;
}

.twu-parallax-story__panel--statement {
  max-width: 54rem;
  margin-inline: auto;
  border-left: 1px solid rgba(6, 158, 198, 0.42);
  border-top: 4px solid var(--twu-brass);
  text-align: center;
}

.twu-parallax-story__panel--statement h2 {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
}

.twu-parallax-story__panel--statement p:last-child {
  max-width: 60ch;
  margin-inline: auto;
}

.twu-parallax-story__panel--statement .twu-kicker {
  border-color: rgba(6, 158, 198, 0.6);
}

@media (max-width: 900px) {
  .twu-pathfinder {
    grid-template-columns: 1fr;
  }

  .twu-pathfinder details:last-of-type {
    grid-column: auto;
  }

  .twu-system-explorer {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------------ */
/* 0.4.6 storytelling layer: marquee, stats band, badge, image wipes  */
/* ------------------------------------------------------------------ */

/* Continuous discipline marquee. Pure CSS loop: the track holds two
   identical copies, so translating minus fifty percent loops cleanly.
   Paused on hover and disabled entirely under reduced motion. */
.twu-marquee {
  overflow: hidden;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(6, 158, 198, 0.4);
  border-bottom: 1px solid rgba(6, 158, 198, 0.4);
}

.twu-marquee__viewport {
  width: 100vw;
  max-width: none !important;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.twu-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 2.4rem;
  padding-right: 2.4rem;
  animation: twu-marquee 30s linear infinite;
  will-change: transform;
}

.twu-marquee__track span {
  color: rgba(242, 245, 247, 0.88);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.twu-marquee__track i {
  color: var(--twu-brass);
  font-size: 0.55rem;
  font-style: normal;
}

.twu-marquee:hover .twu-marquee__track {
  animation-play-state: paused;
}

@keyframes twu-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Model-at-a-glance stats band with count-up values and a slowly
   rotating crest badge, sticker-style, in the top right corner. */
.twu-stats {
  position: relative;
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.twu-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid rgba(6, 158, 198, 0.3);
  background: rgba(6, 158, 198, 0.3);
}

.twu-stats__item {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.1rem, 2vw, 1.75rem);
  background: rgba(8, 22, 37, 0.72);
}

.twu-stats__value {
  color: var(--twu-brass);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.twu-stats__label {
  color: var(--twu-paper);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.twu-stats__note {
  color: rgba(242, 245, 247, 0.62);
  font-size: 0.86rem;
  line-height: 1.5;
}

.twu-stats__badge {
  position: absolute;
  top: clamp(1.25rem, 3vw, 2.25rem);
  right: clamp(1.25rem, 5vw, 4.5rem);
  display: grid;
  width: 132px;
  height: 132px;
  place-items: center;
}

.twu-stats__badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: twu-rotate 26s linear infinite;
}

.twu-stats__badge-mark {
  width: 54px;
  height: auto;
}

@keyframes twu-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1100px) {
  .twu-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .twu-stats__badge {
    display: none;
  }
}

@media (max-width: 700px) {
  .twu-marquee__track {
    animation-duration: 22s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .twu-marquee__track,
  .twu-stats__badge-ring {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* 0.4.8: interior College grid at two even columns                    */
/* ------------------------------------------------------------------ */

/* On interior pages (the Colleges page especially) the six College
   cards read better as two generous columns of equal-size cards. The
   Home page keeps its three-column grid. */
.twu-page-body .twu-college-grid {
  grid-auto-rows: 1fr;
}

.twu-page-body .twu-college-card {
  height: 100%;
  min-height: 0;
}

/* ------------------------------------------------------------------ */
/* 0.4.10: defeat WordPress layout interference inside the two grids   */
/* ------------------------------------------------------------------ */

/* WordPress prints `margin-inline: auto !important` plus a max-width on
   every child of a constrained group. Inside a CSS grid those auto
   margins cancel stretching, shrinking each card to its text width.
   Restore full-cell, equal-size cards. */
.twu-system-explorer > details,
.twu-system-explorer > .wp-block-details {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  min-height: 92px;
}

/* On classic-content pages the paragraph auto-formatter wraps the six
   College card links in an invisible <p>, so the grid sees one item.
   Dissolve any such wrapper so the cards themselves are the grid items,
   and pin them to full cell size. */
.twu-college-grid > p {
  display: contents;
}

/* The live renderer separates the card links with injected <br /> tags,
   which become invisible grid items and push every card into column
   one. Remove them from layout entirely. */
.twu-college-grid > br,
.twu-college-grid > p > br {
  display: none;
}

.twu-college-grid .twu-college-card {
  width: auto;
  max-width: none !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------ */
/* 0.4.14 polish: scroll cue, card spotlight, animated accordions      */
/* ------------------------------------------------------------------ */

/* Hero scroll cue. Injected by the motion layer for motion-OK visitors
   only, so no-JS and reduced-motion pages never carry the node. A brass
   segment sweeps down the line on a slow loop. */
.twu-scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  transform: translateX(-50%);
  color: rgba(242, 245, 247, 0.68);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  pointer-events: none;
}

.twu-scroll-cue::after {
  width: 1px;
  height: 44px;
  content: "";
  background: linear-gradient(to bottom, var(--twu-brass) 50%, rgba(6, 158, 198, 0.14) 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  animation: twu-scroll-cue 2.4s var(--twu-ease) infinite;
}

@keyframes twu-scroll-cue {
  0% {
    background-position: 0 100%;
  }

  60%,
  100% {
    background-position: 0 -100%;
  }
}

@media (max-width: 700px) {
  .twu-scroll-cue {
    display: none;
  }
}

/* Cursor spotlight on the division and College cards: a soft teal
   radial highlight follows the pointer. Coordinates come from the
   motion layer (desktop, motion-OK only); without them the gradient
   never shows because opacity stays 0 on non-hover-capable devices. */
@media (hover: hover) {
  .twu-division-card::before,
  .twu-college-card::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    opacity: 0;
    background: radial-gradient(230px circle at var(--twu-mx, 50%) var(--twu-my, 50%), rgba(6, 158, 198, 0.13), transparent 68%);
    transition: opacity 260ms ease;
    pointer-events: none;
  }

  .twu-division-card:hover::before,
  .twu-college-card:hover::before {
    opacity: 1;
  }

  /* The University card hovers to deep navy; brighten its spotlight so
     it stays visible on the dark surface. */
  .twu-division-card:nth-child(1)::before {
    background: radial-gradient(250px circle at var(--twu-mx, 50%) var(--twu-my, 50%), rgba(63, 178, 210, 0.22), transparent 68%);
  }

  /* Keep card content painting above the spotlight layer. */
  .twu-division-card > *,
  .twu-college-card > * {
    position: relative;
  }
}

/* Animated accordion open/close via interpolate-size, where supported.
   Progressive enhancement: browsers without support keep the instant
   native toggle, and reduced-motion visitors are excluded. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .twu-pathfinder__item,
    .twu-system-explorer__item,
    details.twu-faq-item {
      interpolate-size: allow-keywords;
    }

    .twu-pathfinder__item::details-content,
    .twu-system-explorer__item::details-content,
    details.twu-faq-item::details-content {
      height: 0;
      overflow: clip;
      transition: height 320ms var(--twu-ease), content-visibility 320ms allow-discrete;
    }

    .twu-pathfinder__item[open]::details-content,
    .twu-system-explorer__item[open]::details-content,
    details.twu-faq-item[open]::details-content {
      height: auto;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .twu-scroll-cue::after {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* 0.4.15 polish: view transitions, grain, footer motion, link/scroll  */
/* ------------------------------------------------------------------ */

/* Cross-document View Transitions: same-origin link navigations cross-
   fade instead of hard-cutting. Zero JS, zero markup change. Browsers
   without support (anything but Chromium today) simply navigate as
   before; there is no unsupported state to guard against. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: var(--twu-ease);
  }
}

/* Reduced-motion visitors get the shortest possible cross-fade rather
   than a full page-content motion event. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
  }
}

/* Shared film-grain texture for dark bands: a tiled SVG turbulence
   pattern at very low opacity, blended on top of the flat navy fills
   for a less sterile, more tactile surface. Decorative only.
   .twu-hero is deliberately excluded: it already owns ::before for its
   corner-frame decoration, and already carries a video/grid texture.

   Each parent gets its own stacking context (position + explicit
   z-index), and the grain sits at z-index -1 within it. Per the CSS
   stacking spec a stacking context paints its own background first,
   then negative-z-index children, then normal in-flow content, so the
   grain is guaranteed to land above the navy fill and below every
   child, without touching any child's position or z-index at all. */
.twu-stats,
.twu-inquiry,
.twu-status-rail,
.twu-site-footer {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.twu-stats::before,
.twu-inquiry::before,
.twu-status-rail::before,
.twu-site-footer::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Footer texture: the same fine grid used in the header/hero language,
   at footer-appropriate contrast against deep navy. */
.twu-site-footer {
  background-image:
    linear-gradient(rgba(6, 158, 198, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 158, 198, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Editorial imagery: a slow zoom on hover signals interactivity without
   shifting layout. .twu-editorial-figure already clips overflow (see
   the base rule above), so the zoom never spills past its frame. */
.twu-editorial-figure img {
  transition: transform 500ms var(--twu-ease);
}

.twu-editorial-figure:hover img {
  transform: scale(1.035);
}

/* Animated underline for inline content links: a thin offset rule that
   grows in from the left and brightens to teal, replacing the flat
   browser-default underline set in theme.json. Buttons and navigation
   already carry their own hover systems and are excluded. */
.twu-page-body a:not(.wp-element-button),
.wp-block-post-content a:not(.wp-element-button),
.twu-faq-a a,
.twu-glossary-item dd a {
  text-decoration: none;
  background-image: linear-gradient(var(--twu-brass), var(--twu-brass));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 240ms var(--twu-ease), color 240ms ease;
}

.twu-page-body a:not(.wp-element-button):hover,
.wp-block-post-content a:not(.wp-element-button):hover,
.twu-faq-a a:hover,
.twu-glossary-item dd a:hover {
  color: var(--twu-dark-brass);
  background-size: 100% 1.5px;
}

/* Themed scrollbar: a slim teal thumb on the site's paper track,
   matching the brand palette instead of the OS default. */
html {
  scrollbar-color: var(--twu-brass) var(--twu-paper);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--twu-paper);
}

::-webkit-scrollbar-thumb {
  border: 2px solid var(--twu-paper);
  border-radius: 6px;
  background-color: var(--twu-brass);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--twu-dark-brass);
}

/* ------------------------------------------------------------------ */
/* 0.4.19: mobile polish pass                                          */
/* ------------------------------------------------------------------ */

/* Phones and small tablets. */
@media (max-width: 700px) {
  /* The sticky header (utility bar + logo row) eats a big slice of a
     phone screen while reading. Fold the utility bar away once the
     visitor scrolls; it returns at the top of the page. Without the
     motion layer the header simply keeps both rows. */
  .twu-utility-bar {
    overflow: hidden;
    max-height: 60px;
    transition: max-height 240ms var(--twu-ease);
  }

  .twu-site-header.is-scrolled .twu-utility-bar {
    max-height: 0;
    min-height: 0;
  }

  /* The hero corner bracket still sat at the desktop 24px offset after
     the frame tightened to 12px on phones; align it and scale it down
     so it stops crowding the headline area. */
  .twu-hero::after {
    top: 12px;
    right: 12px;
    width: 64px;
    height: 64px;
  }

  /* Cover story bands carry fixed 520-580px desktop heights inline;
     on a phone that is most of a screen of mostly-empty image. Let the
     panel content set the height with breathing room instead. */
  .twu-parallax-story {
    min-height: 440px !important;
  }

  /* Learning-format chips: full-width rows instead of a ragged pile
     of content-sized boxes. */
  .twu-chip {
    width: 100%;
  }

  /* Once the inquiry band's columns stack, its right-justified button
     reads as misaligned floating space; align with the copy above. */
  .twu-inquiry .wp-block-buttons.is-content-justification-right {
    justify-content: flex-start !important;
  }
}

/* Small phones: primary actions become full-width thumb targets so
   paired buttons stack cleanly instead of wrapping ragged. */
@media (max-width: 480px) {
  .twu-hero .wp-block-buttons,
  .twu-inquiry .wp-block-buttons,
  .twu-page-body > .wp-block-buttons {
    width: 100%;
  }

  .twu-hero .wp-block-button,
  .twu-inquiry .wp-block-button,
  .twu-page-body > .wp-block-buttons .wp-block-button {
    width: 100%;
  }

  .twu-hero .wp-block-button__link,
  .twu-inquiry .wp-block-button__link,
  .twu-page-body > .wp-block-buttons .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  /* Stats band: two tight columns of long uppercase labels start
     colliding under 480px; a single column keeps each stat readable. */
  .twu-stats__grid {
    grid-template-columns: 1fr;
  }
}

/* Small phones: the display preset bottoms out at 3rem, which runs the
   home hero headline five lines deep and pushes its actions below the
   fold. One step down keeps the display weight without the sprawl.
   The preset class needs !important because WordPress emits its own
   !important font-size for has-*-font-size utility classes. */
@media (max-width: 480px) {
  .twu-hero h1.has-xx-large-font-size {
    font-size: 2.6rem !important;
  }
}

/* ------------------------------------------------------------------ */
/* 0.4.23: single-header redesign + hero responsiveness               */
/* ------------------------------------------------------------------ */

/* Footer search: relocated here from the removed header utility bar.
   Styled for the dark footer, full-width within the brand column. */
.twu-footer-search {
  margin-top: 1.75rem;
  max-width: 360px;
}

.twu-footer-search .wp-block-search__label {
  display: block;
  margin-bottom: 0.5rem;
  color: rgba(242, 245, 247, 0.72);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.twu-footer-search .wp-block-search__inside-wrapper {
  border: 1px solid rgba(242, 245, 247, 0.28);
}

.twu-footer-search .wp-block-search__input {
  min-height: 46px;
  padding: 0.5rem 0.85rem;
  border: 0;
  background: rgba(242, 245, 247, 0.06);
  color: var(--twu-paper);
  font-size: 0.95rem;
}

.twu-footer-search .wp-block-search__input::placeholder {
  color: rgba(242, 245, 247, 0.5);
}

.twu-footer-search .wp-block-search__button {
  min-height: 46px;
  margin: 0;
  padding: 0 1.15rem;
  border: 0;
  background: var(--twu-brass);
  color: var(--twu-deep-navy);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 200ms ease;
}

.twu-footer-search .wp-block-search__button:hover {
  background: var(--twu-white);
}

/* Hero and blueprint on phones/tablets, below WP's 781px column-stack
   point. The hero becomes a self-contained banner: the video covers
   only the text area, and the TWU / FACILITY SYSTEM 01 blueprint breaks
   out below as its own full-bleed deep-navy band, so it reads as a
   distinct section instead of floating on the video. Desktop keeps the
   blueprint as the hero's right column, unchanged. */
@media (max-width: 781px) {
  .twu-hero {
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Force the two hero columns to stack. WordPress's own column
     stacking never triggered here: the 58%-width text column plus the
     auto-width blueprint column fit in one row, so the flex container
     never wrapped, leaving the blueprint as a cramped strip floating on
     the video. flex-direction:column (with !important, since WP's
     .wp-block-columns.is-layout-flex is more specific) guarantees the
     vertical stack on every phone. */
  .twu-hero-grid {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  /* Text column: a proper video-backed banner. Overrides the inline
     flex-basis:58% (a stylesheet !important beats a non-!important
     inline style) so it spans full width above the blueprint band. */
  .twu-hero-grid > .wp-block-column:not(.twu-hero-diagram) {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(2rem, 7vw, 3rem);
    padding-bottom: clamp(2.25rem, 7vw, 3rem);
  }

  .twu-hero h1 {
    max-width: 20ch;
  }

  .twu-hero .twu-direct-answer {
    max-width: 46ch;
  }

  /* Lighten the video wash on phones so the truck-wash footage actually
     reads, while staying dark enough for white text contrast. */
  .twu-hero__media::after {
    background:
      linear-gradient(180deg, rgba(15, 36, 64, 0.64) 0%, rgba(15, 36, 64, 0.8) 100%),
      linear-gradient(rgba(6, 158, 198, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(6, 158, 198, 0.05) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
  }

  /* Blueprint breaks out below the video into its own full-bleed
     deep-navy band. Because the grid is now flex-direction:column, the
     column's width is the cross axis and is respected, so the 100vw
     breakout works. The selector matches the column's specificity so
     it wins over the full-width text-column rule above. */
  .twu-hero-grid > .twu-hero-diagram {
    position: relative;
    z-index: 2;
    flex: 0 0 auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: clamp(1.75rem, 6vw, 2.5rem) clamp(1rem, 5vw, 1.75rem) !important;
    background-color: var(--twu-deep-navy) !important;
    border-top: 3px solid var(--twu-brass);
  }

  .twu-hero-diagram .twu-blueprint {
    max-width: 32rem;
    margin-inline: auto;
    box-shadow: none;
  }
}

/* Small phones: keep the hero headline and answer tightly contained. */
@media (max-width: 480px) {
  .twu-hero h1.has-xx-large-font-size {
    font-size: 2.4rem !important;
  }

  .twu-hero .twu-direct-answer.has-large-font-size {
    font-size: 1.02rem;
  }
}

/* ------------------------------------------------------------------
   Glossary A to Z jump index (built client-side by
   twu-glossary-index.js; these rules only ever match when it runs)
   ------------------------------------------------------------------ */

.twu-glossary-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--twu-line, rgba(15, 36, 64, 0.14));
  background: var(--twu-white, #fff);
}

.twu-glossary-index__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--twu-navy, #0f2440);
  border: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

a.twu-glossary-index__letter:hover,
a.twu-glossary-index__letter:focus-visible {
  color: var(--twu-dark-brass, #04627a);
  border-color: var(--twu-brass, #069ec6);
  background: rgba(6, 158, 198, 0.08);
}

.twu-glossary-index__letter--empty {
  color: rgba(89, 103, 119, 0.38);
}

/* Anchored terms land below the sticky header instead of under it. */
.twu-glossary-term {
  scroll-margin-top: 120px;
}