/*
  Japan-US Dual Internship LP. The program asked for a look of its own, so
  everything here is scoped to .page-dual and sits on top of style.css; the
  header and footer are the site's and are not restyled. Headings are set
  in Boldonse; everything else stays in the site's families and weights.
  Japan and the U.S. each get one
  colour and keep it everywhere on the page: what Recruit promises is set in
  the Japan colour, what is expected of you in the U.S. colour.
*/
/* The program's headings are set in Boldonse (2026-10-28). It has one
   weight, so whatever uses it states 400 and turns synthesis off. */
@font-face {
  font-family: "Boldonse";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/boldonse-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Boldonse";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/boldonse-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.page-dual {
  /* Boldonse's capitals stand almost a full em tall and its letters are
     drawn close, so it takes more leading than the site's display lines and
     no negative tracking. */
  --dual-display: "Boldonse", var(--display);
  --dual-leading-display: 1.6;
  --dual-leading-title: 1.45;
  /* --dual-ink is in style.css's :root: the program's card thumbnail uses it. */
  --dual-ink-raised: #151d26;
  --dual-paper: var(--canvas);
  --dual-text: var(--text-primary);
  --dual-text-2: var(--text-secondary);
  --dual-text-3: var(--text-muted);
  --dual-on-ink: var(--text-inverse);
  --dual-on-ink-2: rgba(255, 255, 255, 0.78);
  --dual-on-ink-3: rgba(255, 255, 255, 0.62);
  --dual-line: rgba(22, 26, 29, 0.14);
  --dual-line-ink: rgba(255, 255, 255, 0.16);
  /* Japan and the U.S. On the ink both measure above 5:1; on paper only the
     deeper Japan ink is used for text. */
  --dual-jp: #ff6247;
  --dual-jp-ink: #b5371f;
  --dual-us: #6f9bff;
  --dual-us-ink: #2f5bd3;
  /* The hero's light only: each country's colour leaning warm at its core
     and cool at its edge, so its gradient turns in hue as well as fading. */
  --dual-jp-glow: #ff7a3d;
  --dual-jp-deep: #c22a5c;
  --dual-us-glow: #3fb2ff;
  --dual-us-deep: #4a34d6;
  /* Where the globe's countries breathe to: each colour a little over
     halfway to its deep. assets/dual-globe.js reads these and --dual-jp /
     --dual-us, so all four stay six-digit hex. */
  --dual-jp-pulse: #dd4353;
  --dual-us-pulse: #5b62e8;

  /* Boldonse sizes: its capitals are 1.19em against Instrument Sans's
     0.72em, so these sit about two thirds of the sans sizes they replaced. */
  --dual-text-title: clamp(40px, 7vw, 96px);
  --dual-text-h2: clamp(24px, 3.2vw, 46px);
  --dual-text-place: clamp(28px, 4.3vw, 64px);
  --dual-text-casebox: clamp(20px, 2.2vw, 30px);
  --dual-text-h3: clamp(21px, 2vw, 28px);
  --dual-text-lead: clamp(20px, 2vw, 27px);
  --dual-text-number: clamp(28px, 2.6vw, 36px);
  /* One drift of the hero's colour fields; the others run off it. */
  --dual-flow: 12s;

  background: var(--dual-paper);
}

/* The site balances li and dd because most of them are one or two lines.
   Here they run to four and six, and balancing those stops every line well
   short of the column. */
.dual-points p,
.dual-fit-list li,
.dual-list li,
.dual-facts dd,
.dual-steps li { text-wrap: pretty; }

/* ---------- shared type ---------- */

.dual-label {
  margin: 0;
  font-family: var(--label);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--dual-text-3);
}
.dual-h2 {
  margin: 0 0 48px;
  max-width: 18ch;
  font-family: var(--dual-display);
  font-size: var(--dual-text-h2);
  font-weight: var(--fw-regular);
  font-synthesis: none;
  line-height: var(--dual-leading-display);
  color: inherit;
}
.dual-h3 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--dual-text-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: inherit;
}
.dual-lead {
  margin: 0;
  font-size: var(--dual-text-lead);
  line-height: var(--leading-quote);
  letter-spacing: var(--tracking-snug);
  color: inherit;
}
/* The site's two measures, set by size: the lead is large enough to take the
   text measure, the 18px body would run to ~90 characters in it. */
.dual-measure { max-width: var(--measure-text); }
.dual-prose p {
  margin: 0;
  max-width: var(--measure-note);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--dual-text-2);
}
.dual-prose p + p { margin-top: 16px; }
.dual-note {
  display: block;
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--dual-text-3);
}

/* ---------- sections ---------- */

.dual-section { padding: 120px 0; }
.dual-section-tight { padding-top: 0; }
.dual-ink {
  background: var(--dual-ink);
  color: var(--dual-on-ink);
}
.dual-ink .dual-label,
.dual-hero .dual-label { color: var(--dual-on-ink-3); }
.dual-ink .dual-prose p { color: var(--dual-on-ink-2); }

/* ---------- header ---------- */

/* The program's own bar, on the ink it opens into. The artwork's two lines
   are weighted to the top, so it is lifted to put RECRUIT on the hairline's
   middle, as the Innovation Cup header does. */
.dual-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--dual-ink) 94%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--dual-line-ink);
  color: var(--dual-on-ink);
}
.dual-header .wrap {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
}
.dual-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 16px;
}
.dual-brand-mark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
}
.dual-brand-mark img {
  display: block;
  width: auto;
  height: 32px;
  transform: translateY(-4px);
}
.dual-brand-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 28px;
  background: var(--dual-line-ink);
}
.dual-brand-name,
.dual-footer-name {
  font-family: var(--dual-display);
  font-weight: var(--fw-regular);
  font-synthesis: none;
  line-height: 1;
  white-space: nowrap;
  color: var(--dual-on-ink);
}
.dual-brand-name {
  display: inline-block;
  padding: 14px 0;
  font-size: var(--text-xs);
  text-decoration: none;
}
.dual-nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
}
.dual-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  white-space: nowrap;
  color: var(--dual-on-ink-2);
  text-decoration: none;
  transition: color var(--motion) var(--ease-control);
}
.dual-nav a:hover,
.dual-nav a:focus-visible { color: var(--dual-on-ink); }
.dual-header-apply { flex: 0 0 auto; }

/* ---------- footer ---------- */

/* As the Innovation Cup site closes: the program's name, then the corporate
   lockup under a hairline. The lockup keeps the site footer's styling. */
.dual-footer { padding: 56px 0 40px; }
.dual-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}
.dual-footer-name {
  margin: 0;
  font-size: var(--text-md);
}
/* The page stands as a site of its own, and this is its way back to the
   careers site. */
.dual-footer-careers {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--dual-on-ink-2);
  text-decoration: none;
  transition: color var(--motion) var(--ease-control);
}
.dual-footer-careers:hover,
.dual-footer-careers:focus-visible { color: var(--dual-on-ink); }
.dual-footer-corp {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--dual-line-ink);
}

/* ---------- sticky apply (phones; see the 720px block) ---------- */

.dual-sticky-apply { display: none; }

/* ---------- side navigation ---------- */

/* A column of ticks in the right margin, one per section, the current one
   longer. It only exists where the margin can hold it, and only after the
   hero, so the first view keeps its composition. The names are ink pills
   that slide out on hover or focus, over the copy only while asked for. Over
   the ink sections the script sets .on-ink so the ticks stay visible. */
.dual-rail { display: none; }
@media (min-width: 1320px) {
  .dual-rail {
    position: fixed;
    top: 50%;
    right: 24px;
    z-index: calc(var(--z-header) - 1);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    translate: 0 -50%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms var(--ease-control), visibility 240ms;
  }
  .dual-rail.is-visible { opacity: 1; visibility: visible; }
  .dual-rail a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 30px;
    color: var(--dual-ink);
    text-decoration: none;
  }
  .dual-rail.on-ink a { color: var(--dual-on-ink); }
  .dual-rail-tick {
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.32;
    transition: width var(--motion) var(--ease-control), opacity var(--motion) var(--ease-control);
  }
  .dual-rail a:hover .dual-rail-tick,
  .dual-rail a:focus-visible .dual-rail-tick { opacity: 0.7; }
  .dual-rail a[aria-current="true"] .dual-rail-tick { width: 28px; opacity: 1; }
  .dual-rail-label {
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dual-ink) 90%, transparent);
    font-size: var(--text-xs);
    line-height: 1.3;
    white-space: nowrap;
    color: var(--dual-on-ink-2);
    opacity: 0;
    translate: 8px 0;
    transition: opacity var(--motion) var(--ease-control), translate var(--motion) var(--ease-control);
  }
  .dual-rail a[aria-current="true"] .dual-rail-label { color: var(--dual-on-ink); }
  .dual-rail:hover .dual-rail-label,
  .dual-rail:focus-within .dual-rail-label { opacity: 1; translate: 0 0; }
}

/* ---------- hero ---------- */

.dual-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px 0 104px;
  background: var(--dual-ink);
  color: var(--dual-on-ink);
}
.dual-hero-grid {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(68vh, 640px);
  padding-top: 64px;
}
.dual-title {
  margin: 0;
  font-family: var(--dual-display);
  font-size: var(--dual-text-title);
  font-weight: var(--fw-regular);
  font-synthesis: none;
  line-height: var(--dual-leading-title);
  text-wrap: initial;
}
.dual-title span { display: block; }
/* What the program is, in one sentence under the name. Broken at its comma,
   as the title is broken between its two lines. The colour fields drift
   under it, so it carries a soft shadow of the ink: body-size copy has to
   keep 4.5:1 wherever they are. */
.dual-hero-sub {
  margin: 24px 0 0;
  max-width: var(--measure-text);
  font-size: var(--dual-text-lead);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--dual-on-ink);
  text-shadow:
    0 0 20px color-mix(in srgb, var(--dual-ink) 85%, transparent),
    0 1px 3px color-mix(in srgb, var(--dual-ink) 70%, transparent);
}
.dual-hero-sub span { display: block; }
.dual-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: 56px;
}
.dual-deadline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--dual-on-ink);
}

/* The globe: land as dots on a sphere that is not drawn, turning slowly.
   assets/dual-globe.js paints it on a canvas the size of the hero, centred
   in `.dual-globe` with a radius of the box's width × --globe-w or height ×
   --globe-h, whichever is smaller. Here it stands on the right, taller
   than the hero so it runs off the top and the bottom, and only a little
   off the right so Japan and the U.S. both stay in view. */
.dual-globe-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dual-globe {
  --globe-w: .5;
  --globe-h: .5;
  position: absolute;
  top: 56%;
  right: 0;
  width: min(80vw, 1200px);
  aspect-ratio: 1;
  translate: 0 -50%;
  pointer-events: none;
}

/* Japan's red and the U.S. blue as two bodies of liquid on the ink: each
   one keeps reshaping its own outline while they drift into each other, so
   where one country ends and the other begins is never in the same place
   twice. Each body thins out towards its outline and is blurred well past
   it, so the shapes read as colour rather than objects; a flat fill would
   cut the overlap into a third patch. Screen blending adds the two where
   they meet, so neither country disappears under the other.
   Outline, drift and spin run on unrelated periods so the pattern does not
   visibly repeat. Decoration only, so it is hidden from assistive
   technology. */
.dual-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--dual-ink);
}
.dual-field span {
  position: absolute;
  border-radius: 72% 28% 54% 46% / 34% 66% 34% 66%;
  mix-blend-mode: screen;
  filter: blur(clamp(56px, 6.5vw, 112px));
}
.dual-field-jp {
  width: max(560px, 46vw);
  aspect-ratio: 1.3;
  top: -6%;
  right: 6%;
  background: radial-gradient(in oklab farthest-side at 40% 36%,
    var(--dual-jp-glow),
    var(--dual-jp) 18%,
    color-mix(in oklab, var(--dual-jp-deep) 80%, transparent) 58%,
    color-mix(in oklab, var(--dual-jp-deep) 20%, transparent));
  opacity: .74;
}
.dual-field-us {
  width: max(600px, 50vw);
  aspect-ratio: .85;
  bottom: -44%;
  right: -8%;
  background: radial-gradient(in oklab farthest-side at 58% 62%,
    var(--dual-us-glow),
    var(--dual-us) 18%,
    color-mix(in oklab, var(--dual-us-deep) 80%, transparent) 58%,
    color-mix(in oklab, var(--dual-us-deep) 20%, transparent));
  opacity: .6;
}
/* Dark gradients this wide step into visible rings on an 8-bit screen.
   A still, fine grain dithers the steps away. Overlay leaves the ink black,
   which needs the ink painted inside the field, or the grain shows grey. */
.dual-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  mix-blend-mode: overlay;
  opacity: .22;
}
@media (prefers-reduced-motion: no-preference) {
  .dual-field { animation: dual-field-in 1600ms ease-out both; }
  .dual-field-jp {
    animation:
      dual-flow-morph calc(var(--dual-flow) * .55) ease-in-out infinite alternate,
      dual-flow-jp var(--dual-flow) ease-in-out infinite alternate;
  }
  .dual-field-us {
    animation:
      dual-flow-morph calc(var(--dual-flow) * .7) ease-in-out infinite alternate-reverse,
      dual-flow-us calc(var(--dual-flow) * 1.25) ease-in-out infinite alternate;
  }
}
@keyframes dual-field-in { from { opacity: 0; } }
@keyframes dual-flow-morph {
  25% { border-radius: 28% 72% 70% 30% / 62% 26% 74% 38%; }
  50% { border-radius: 58% 42% 24% 76% / 76% 30% 70% 24%; }
  75% { border-radius: 24% 76% 62% 38% / 40% 72% 28% 60%; }
  to { border-radius: 76% 24% 40% 60% / 28% 46% 54% 72%; }
}
/* The red reaches towards the title least: the copy has to keep 3:1 over it
   at its closest. */
@keyframes dual-flow-jp {
  33% { transform: translate(-8%, 26%) rotate(80deg) scale(1.1); }
  66% { transform: translate(14%, 12%) rotate(160deg) scale(.9); }
  to { transform: translate(-4%, -12%) rotate(240deg) scale(1.06); }
}
@keyframes dual-flow-us {
  40% { transform: translate(-26%, -24%) rotate(-100deg) scale(.92); }
  to { transform: translate(-6%, -40%) rotate(-200deg) scale(1.12); }
}

/* Apply is the page's one action and every instance sits on the ink, so it
   alone is filled with the two countries' colours, Japan into the U.S., and
   gives off their light. The ink label holds above 6:1 along the whole
   gradient. It is drawn wide and low so the colour reads as a band rather
   than a block; the label and arrow stay together in the middle of it. */
.dual-cta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.dual-cta .btn {
  border: 0;
  background: var(--dual-us);
  background: linear-gradient(100deg in oklab, var(--dual-jp-glow), var(--dual-jp) 30%, var(--dual-us) 100%);
  color: var(--dual-ink);
  font-weight: var(--fw-semibold);
  box-shadow:
    -10px 10px 32px -12px color-mix(in srgb, var(--dual-jp) 70%, transparent),
    10px 10px 32px -12px color-mix(in srgb, var(--dual-us) 70%, transparent);
  transition: filter var(--motion) var(--ease-control), box-shadow var(--motion) var(--ease-control),
    transform var(--motion-press) var(--ease-control);
}
.dual-cta .btn:hover,
.dual-cta .btn:active {
  background: linear-gradient(100deg in oklab, var(--dual-jp-glow), var(--dual-jp) 30%, var(--dual-us) 100%);
  color: var(--dual-ink);
  filter: brightness(1.08) saturate(1.1);
  box-shadow:
    -12px 14px 40px -10px color-mix(in srgb, var(--dual-jp) 85%, transparent),
    12px 14px 40px -10px color-mix(in srgb, var(--dual-us) 85%, transparent);
}
.dual-cta .btn:focus-visible { outline: 2px solid var(--dual-on-ink); outline-offset: 3px; }
.dual-cta .btn-sm {
  min-width: 128px;
  padding: 0 18px;
  justify-content: center;
}
.dual-hero-actions .btn-lg,
.dual-apply-cta .btn-lg {
  min-width: 264px;
  min-height: 56px;
  padding: 0 28px;
  justify-content: center;
  gap: 12px;
  font-size: var(--text-md);
}

/* ---------- program overview ---------- */

.dual-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 72px;
  align-items: start;
}
.dual-overview .dual-lead { color: var(--dual-text); }
.dual-overview .dual-prose { margin-top: 32px; }
/* Level with the lead rather than the heading above it. */
.dual-overview-media { padding-top: calc(var(--dual-text-h2) * var(--dual-leading-display) + 48px); }

/* ---------- Japan-US ---------- */

.dual-route {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 80px 0 0;
  padding: 0;
  list-style: none;
}
/* The line joins the two stops: structure, the way a timeline's spine is. */
.dual-route::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 9px;
  right: calc(50% - 25px);
  height: 2px;
  background: linear-gradient(90deg, var(--dual-jp), var(--dual-us));
}
.dual-stop { position: relative; display: flex; flex-direction: column; gap: 12px; }
.dual-stop-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-bottom: 20px;
}
.dual-stop-jp .dual-stop-dot { background: var(--dual-jp); }
.dual-stop-us .dual-stop-dot { background: var(--dual-us); }
.dual-stop-place {
  font-family: var(--dual-display);
  font-size: var(--dual-text-place);
  font-weight: var(--fw-regular);
  font-synthesis: none;
  line-height: var(--dual-leading-display);
}
.dual-stop-site { font-size: var(--text-base); color: var(--dual-on-ink-2); }

/* The route is travelled, not shown: as it scrolls up to the middle of the
   screen the line draws from Japan, and the U.S. arrives as it gets there.
   Both are finished by the time the route sits where it is read, and a
   browser without scroll timelines shows the finished route. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dual-route { view-timeline: --dual-route block; }
    .dual-route::before {
      transform-origin: left center;
      animation: dual-route-draw auto linear both;
      animation-timeline: --dual-route;
      animation-range: entry 40% cover 40%;
    }
    .dual-stop-us {
      animation: dual-stop-arrive auto var(--ease-reveal) both;
      animation-timeline: --dual-route;
      animation-range: entry 70% cover 42%;
    }
  }
}
@keyframes dual-route-draw { from { transform: scaleX(0); } }
@keyframes dual-stop-arrive { from { opacity: 0.3; translate: -24px 0; } }

/* ---------- promise / expect ---------- */

.dual-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 64px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dual-point;
}
.dual-points li {
  counter-increment: dual-point;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 8px;
  padding: 36px 0 44px;
  border-top: 1px solid var(--dual-line);
}
.dual-points li::before {
  content: counter(dual-point, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--display);
  font-size: var(--dual-text-number);
  font-weight: var(--fw-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--dual-jp-ink);
}
.dual-points p {
  margin: 14px 0 0;
  max-width: var(--measure-note);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--dual-text-2);
}
.dual-ink .dual-points li { border-top-color: var(--dual-line-ink); }
.dual-ink .dual-points li::before { color: var(--dual-us); }
.dual-ink .dual-points p { color: var(--dual-on-ink-2); }

.dual-fit { margin-bottom: 72px; }
.dual-fit-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.dual-fit-list li {
  padding: 24px;
  border-radius: var(--radius-surface);
  background: var(--dual-ink-raised);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--dual-on-ink-2);
}
.dual-fit-list strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--display);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--dual-on-ink);
}

/* ---------- application to placement ---------- */

.dual-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: dual-step;
}
.dual-steps::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 20px;
  right: calc(25% - 4px);
  height: 1px;
  background: var(--dual-line);
}
.dual-steps li {
  counter-increment: dual-step;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 64px;
}
.dual-steps li::before {
  content: counter(dual-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dual-ink);
  color: var(--dual-on-ink);
  font-family: var(--display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.dual-steps li:last-child::before { background: var(--dual-jp-ink); }
.dual-step-name {
  font-family: var(--display);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
}
.dual-step-when { font-size: var(--text-sm); color: var(--dual-text-2); }
.dual-steps + .dual-note { margin-top: 32px; }

/* ---------- 2026 example ---------- */

/* Last year's program is the page's most concrete evidence for Promise and
   Expect, so it is framed as a case file rather than greyed back: a white
   frame lifted off the paper, a head with its tag, title and summary, and
   the four blocks ruled into quarters below. The head is tinted with the
   page's two colours, Japan into the U.S. as the Apply button runs, held
   pale and fading to the white of the blocks so it reads as a wash rather
   than a banner. Its title is a step under the section headings, so it does
   not compete with them. */
.dual-casebox {
  overflow: hidden;
  border: 1px solid var(--dual-line);
  border-radius: var(--radius-media);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(11, 16, 22, 0.04), 0 24px 48px -28px rgba(11, 16, 22, 0.22);
}
.dual-casebox-head {
  padding: 40px 56px 44px;
  background:
    linear-gradient(180deg, transparent, var(--white)),
    linear-gradient(100deg in oklab,
      color-mix(in oklab, var(--dual-jp) 13%, var(--white)),
      color-mix(in oklab, var(--dual-us) 15%, var(--white)));
}
.dual-casebox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dual-case-tag {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--dual-us-ink) 28%, transparent);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--label);
  font-size: var(--text-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--dual-us-ink);
}
.dual-case-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--dual-line);
  border-radius: var(--radius-control);
  background: var(--white);
  font-family: var(--action);
  font-size: var(--text-xs);
  font-weight: var(--fw-action);
  color: var(--dual-text);
  cursor: pointer;
  transition: border-color var(--motion) var(--ease-control), background var(--motion) var(--ease-control);
}
.dual-case-toggle:hover { border-color: var(--dual-text-3); background: var(--surface-subtle); }
.dual-case-toggle [aria-hidden] { font-size: 0.75em; color: var(--dual-text-2); }
.dual-casebox-title {
  margin: 24px 0 0;
  font-family: var(--dual-display);
  font-size: var(--dual-text-casebox);
  font-weight: var(--fw-regular);
  font-synthesis: none;
  line-height: var(--dual-leading-display);
}
.dual-casebox-lead {
  margin: 16px 0 0;
  max-width: 70ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--dual-text-2);
}
.dual-case {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--dual-line);
  background: var(--dual-line);
}
.dual-case[hidden] { display: none; }
.dual-case-block {
  padding: 40px 56px 48px;
  background: var(--white);
}
.dual-case-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
/* The marks the About page sets on its tiles, in the U.S. colour. A gradient
   at 34px reads as a smudge, so the two colours stay on the head alone. */
.dual-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--dual-us) 16%, var(--white));
  color: var(--dual-us-ink);
}
.dual-mark svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dual-case-block > * { margin: 0; }
.dual-case-block > * + * { margin-top: 12px; }
.dual-case-block p,
.dual-case-block li,
.dual-case-block dd {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--dual-text-2);
}
.dual-case-block strong,
.dual-info strong { color: var(--dual-text); font-weight: var(--fw-semibold); }
/* Who the participant worked with is the strongest thing last year's example
   can show; the roles carry the full text colour, at the size of the other
   three blocks so the four read as one set. */
.dual-case-block .dual-facts dd { color: var(--dual-text); }
.dual-case-block .dual-facts > div + div {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--dual-line);
}
.dual-case-block > .dual-case-title + * { margin-top: 20px; }

.dual-list { margin: 0; padding: 0; list-style: none; }
.dual-list li { position: relative; padding-left: 18px; }
.dual-list li + li { margin-top: 10px; }
.dual-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dual-text-3);
}
.dual-list-plain li { padding-left: 0; }
.dual-list-plain li::before { content: none; }
/* How the match was made is a sequence, so its steps carry numbers. */
.dual-list-numbered { counter-reset: dual-match; }
.dual-list-numbered li { counter-increment: dual-match; padding-left: 36px; }
.dual-list-numbered li + li { margin-top: 14px; }
.dual-list-numbered li::before {
  content: counter(dual-match);
  top: 0.1em;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--dual-us-ink);
  color: var(--dual-on-ink);
  font-family: var(--display);
  font-size: var(--text-3xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.dual-num { font-variant-numeric: tabular-nums; color: var(--dual-text-3); }

.dual-facts { margin: 0; }
.dual-facts > div + div { margin-top: 18px; }
.dual-facts dt {
  margin: 0 0 4px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--dual-text);
}
.dual-facts dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-body); color: var(--dual-text-2); }
.dual-facts dd .dual-note { margin-top: 6px; }

/* ---------- program information ---------- */

.dual-info { padding-top: 0; }
/* Without the script the tab list stays hidden and the four panels read one
   after another, each under its own heading; with it, the tab names the
   panel and the heading steps aside. */
.dual-tablist {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--dual-line);
}
.dual-tablist[hidden] { display: none; }
.dual-tab {
  position: relative;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  background: none;
  font-family: var(--display);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--dual-text-3);
  cursor: pointer;
  transition: color var(--motion) var(--ease-control);
}
.dual-tab:first-child { padding-left: 0; }
.dual-tab::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.dual-tab:first-child::after { left: 0; }
.dual-tab:hover { color: var(--dual-text); }
.dual-tab[aria-selected="true"] { color: var(--dual-text); }
.dual-tab[aria-selected="true"]::after { background: var(--dual-ink); }
.dual-tabpanel {
  padding: 32px 0 48px;
  border-top: 1px solid var(--dual-line);
}
.dual-tabpanel:focus-visible { outline-offset: 8px; }
.dual-tabpanel-title { margin-bottom: 24px; }
.dual-tabs.is-tabbed .dual-tabpanel { padding-top: 40px; border-top: 0; }
.dual-tabs.is-tabbed .dual-tabpanel-title { display: none; }
.dual-tabpanel[hidden] { display: none; }
.dual-tabpanel > .dual-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 64px;
}
.dual-tabpanel > .dual-facts > div + div { margin-top: 0; }
/* Selection is a sequence, the same kind as Application to Placement, so it
   is drawn with the same steps. The red last step there is the internship
   itself; selection ends before it, so it stays in ink. */
.dual-steps-selection { margin-top: 0; }
.dual-steps-selection li {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--dual-text-2);
}
.dual-steps-selection strong {
  font-family: var(--display);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}
.dual-steps-selection li:last-child::before { background: var(--dual-ink); }

.dual-apply {
  margin-top: 32px;
  padding: 56px;
  border-radius: var(--radius-media);
  background: var(--dual-ink);
  color: var(--dual-on-ink);
}
/* The page's conversion point, so it is set at the section headings' size
   rather than below them. */
.dual-apply .dual-h3 {
  font-family: var(--dual-display);
  font-size: var(--dual-text-h2);
  font-weight: var(--fw-regular);
  font-synthesis: none;
  line-height: var(--dual-leading-display);
  letter-spacing: normal;
}
.dual-apply-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 64px;
  margin-top: 36px;
}
.dual-apply .dual-label { color: var(--dual-on-ink-3); margin-bottom: 10px; }
.dual-apply-date {
  margin: 0;
  font-family: var(--display);
  font-size: var(--dual-text-number);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
/* Spelling out the zone is a note on the date, not part of it. */
.dual-apply-tz {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  color: var(--dual-on-ink-2);
}
.dual-apply-zone,
.dual-apply-grid p:not([class]) {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--dual-on-ink-2);
}
.dual-apply-cta { margin: 28px 0 0; }

/* ---------- smaller screens ---------- */

@media (max-width: 1180px) {
  .dual-nav { display: none; }
  .dual-header-apply { margin-left: auto; }
}
@media (max-width: 960px) {
  .dual-overview { grid-template-columns: 1fr; gap: 48px; }
  .dual-overview-media { padding-top: 0; }
  .dual-fit-list { grid-template-columns: 1fr; gap: 12px; }
  .dual-case { grid-template-columns: 1fr; }
  .dual-tabpanel > .dual-facts { grid-template-columns: 1fr; gap: 22px; }
  .dual-casebox-head,
  .dual-case-block { padding-left: 40px; padding-right: 40px; }
  .dual-apply-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Apply is in the hero and then in the bar at the foot of the window; on
     a phone the header keeps only the two names. */
  .dual-header-apply { display: none; }
  .dual-header .wrap { gap: 12px; height: 60px; }
  .dual-brand { gap: 12px; }
  .dual-brand-mark img { height: 24px; transform: translateY(-3px); }
  .dual-brand-divider { height: 22px; }
  .dual-section { padding: 72px 0; }
  .dual-section-tight,
  .dual-info { padding-top: 0; }
  .dual-h2 { margin-bottom: 32px; }
  /* About 90% of the first screen with the header, read on a slant: the
     title and the line under it at the top left, the globe right of centre
     and cut by the screen's edge, Apply across the foot. */
  .dual-hero {
    display: flex;
    min-height: calc(90vh - 61px);
    min-height: calc(90svh - 61px);
    padding: 16px 0 28px;
  }
  .dual-hero-sub { margin-top: 16px; font-size: var(--text-base); line-height: var(--leading-body); }
  .dual-hero-sub span { display: inline; }
  .dual-hero > .wrap { display: flex; flex-direction: column; width: 100%; }
  .dual-hero-grid { flex: 1; justify-content: flex-start; min-height: 0; padding-top: 40px; }
  .dual-hero-copy { display: flex; flex: 1; flex-direction: column; }
  .dual-hero-actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: auto; padding-top: 48px; }
  .dual-hero-actions .dual-cta { width: 100%; }
  .dual-hero-actions .btn-lg { width: 100%; min-width: 0; }
  .dual-hero .dual-deadline { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .dual-field span { filter: blur(56px); }
  /* Each colour behind its own country, as on the desktop: the red on the
     left under Japan, the blue on the right under the U.S. The red stays
     below the copy: the line under the title is body size and has to keep
     4.5:1. */
  .dual-field-jp { width: 360px; top: 44%; right: auto; left: -34%; }
  .dual-field-us { width: 420px; top: 40%; bottom: auto; right: -58%; }
  /* On a phone the globe stands between the copy and Apply, centred right
     of the middle and wider than the screen, so its right side is cut by
     the edge and its rim runs under the words. It is sized by the screen's
     width, not the room left over, so a short screen does not shrink it. */
  .dual-globe {
    --globe-w: .5;
    --globe-h: .5;
    top: 72%;
    right: auto;
    left: 50%;
    width: min(122vw, 560px);
    translate: -38% -50%;
  }
  .dual-route { margin-top: 48px; gap: 20px; }
  .dual-points { grid-template-columns: 1fr; }
  .dual-points li { grid-template-columns: 52px minmax(0, 1fr); padding: 28px 0 32px; }
  .dual-fit { margin-bottom: 48px; }
  /* Four steps across 358px leaves each about 80px; down the page they keep
     their words on one or two lines. The spine turns with them. */
  .dual-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
  .dual-steps::before { top: 20px; bottom: 20px; left: 19px; right: auto; width: 1px; height: auto; }
  .dual-steps li { padding: 8px 0 0 60px; min-height: 40px; }
  .dual-casebox { border-radius: var(--radius-surface); }
  .dual-casebox-head { padding: 24px 20px 28px; }
  .dual-casebox-top { flex-wrap: wrap; }
  .dual-casebox-title { margin-top: 18px; }
  .dual-case-block { padding: 28px 20px 32px; }
  /* No tabs on a phone (app.js leaves the tab list hidden below 720px): the
     four panels run down the page, each under its own heading. */
  .dual-tabpanel { padding: 28px 0 36px; }
  .dual-apply { padding: 32px 20px; border-radius: var(--radius-surface); }
  .dual-apply-cta .btn { width: 100%; }
  .dual-apply-cta .dual-cta { width: 100%; }

  /* Apply across the foot of the window once the hero's own has scrolled
     away (app.js); without the script it is always there. Only the button:
     the deadline is in the hero and How to Apply. The footer's ink runs on
     under the bar, so nothing is left beneath it at the end of the page. */
  .dual-sticky-apply {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--dual-ink) 94%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--dual-line-ink);
    transition: translate var(--motion) var(--ease-control), visibility 0s;
  }
  .dual-sticky-apply.is-suppressed {
    visibility: hidden;
    translate: 0 100%;
    transition: translate var(--motion) var(--ease-control), visibility 0s var(--motion);
  }
  .dual-sticky-apply .dual-cta,
  .dual-sticky-apply .btn { width: 100%; }
  .dual-sticky-apply .btn { min-height: 48px; }
  .dual-footer { padding-bottom: calc(40px + 72px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .dual-sticky-apply,
  .dual-sticky-apply.is-suppressed { transition: none; }
}