:root {
  --navy: #1E2A4F;
  --sky: #6FC3EA;
  --cream: #FAF7F1;
  --deep-blue: #1C6FA5;
  --ink: #171B2E;
  --muted: #6E7390;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.section { padding: 96px 0; }
.section--navy { background: var(--navy); color: #F4F1EA; }
.section--cream { background: var(--cream); color: var(--ink); }
/* The page alternates cream and navy the whole way down, so any insertion
   collides with a neighbour. White is the third value: bright enough to break
   cleanly off navy above it, quiet enough to settle into cream below. */
.section--white { background: #fff; color: var(--ink); }

.kicker {
  font-size: 13px;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.kicker .rule { width: 32px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.kicker .rule::after {
  content: ""; position: absolute; left: 0; top: 5px; width: 32px; height: 2px;
  background: currentColor; opacity: 0.5;
}
.section--navy .kicker { color: var(--sky); }
.section--cream .kicker,
.section--white .kicker { color: var(--deep-blue); }

.btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--sky); color: var(--navy); }
.btn--primary:hover { background: var(--deep-blue); color: #fff; }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: var(--sky); color: var(--navy); border-color: var(--sky); }
.btn--sm { padding: 10px 18px; font-size: 11px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 16px 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: background 0.25s ease, color 0.25s ease;
}
.site-header.is-scrolled {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; }
.brand-mark { position: relative; display: block; text-decoration: none; }
.brand-mark__img { height: 24px; width: auto; display: block; transition: opacity 0.25s ease; }
.brand-mark__img--light { position: absolute; top: 0; left: 0; opacity: 0; }
.site-header.is-scrolled .brand-mark__img--dark { opacity: 0; }
.site-header.is-scrolled .brand-mark__img--light { opacity: 1; }
.site-header__actions { display: flex; align-items: center; gap: 10px; }

.site-nav { display: flex; align-items: center; gap: 26px; margin-right: 14px; }
.site-nav__link {
  font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: inherit; text-decoration: none; white-space: nowrap;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.site-nav__link:hover { border-bottom-color: var(--sky); }

/* Three bars that become an X when the panel is open. */
.site-header__burger {
  display: none;
  width: 34px; height: 34px; padding: 8px 6px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.site-header__burger span {
  display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.site-header__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header__burger.is-open span:nth-child(2) { opacity: 0; }
.site-header__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 90;
  background: var(--navy);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu__inner {
  display: flex; flex-direction: column; gap: 4px;
  padding: 96px 28px 28px;
}
.mobile-menu__link {
  font-family: var(--serif); font-size: 30px; line-height: 1.5;
  color: #fff; text-decoration: none; text-align: left;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
}
.mobile-menu__link:active { color: var(--sky); }
.mobile-menu__rule { border: 0; border-top: 1px solid rgba(255,255,255,0.18); margin: 18px 0; }

.site-footer { background: var(--navy); color: var(--muted); padding: 40px 0; }
.site-footer__inner { display: flex; flex-direction: column; gap: 10px; }
.site-footer__brand img { height: 20px; width: auto; display: block; }
.site-footer__sub { font-size: 13px; letter-spacing: 0.5px; }
.site-footer__link {
  align-self: flex-start;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; letter-spacing: 0.5px;
  color: var(--sky); text-decoration: underline; cursor: pointer;
}
.site-footer__link:hover { color: #fff; }

/* Apply is the ask. Sign in and Contact are for people who already know what
   they came for, so they lose their borders and let Apply be the only boxed
   control in the header. */
.site-header__quiet { border-color: transparent; }
.site-header__quiet:hover { border-color: var(--sky); }

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  /* Wordmark, Apply, burger. Three things, which is all that fits on a 390px
     screen without feeling cramped. Everything else moves into the panel. */
  .site-nav { display: none; }
  .site-header__signin { display: none; }
  .site-header__burger { display: flex; }
  .site-header__actions { gap: 8px; }
  .mobile-menu { display: block; }
  /* The bar has to sit above the panel so the X stays tappable. */
  .site-header { z-index: 100; }
  /* Panel is navy, so the bar's dark-on-cream logo and burger would vanish
     against it while open. */
  body.menu-open .site-header { background: transparent; color: #fff; }
  body.menu-open .brand-mark__img--dark { opacity: 0; }
  body.menu-open .brand-mark__img--light { opacity: 1; }
}

.hero {
  display: flex;
  min-height: 100vh;
  background: var(--navy);
  color: #fff;
}
.hero__media { width: 46%; flex-shrink: 0; position: relative; overflow: hidden; }
.hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.hero__content { flex: 1; display: flex; align-items: center; padding: 120px 64px; min-width: 0; }
.hero__inner { max-width: 640px; }
.hero h1 { font-size: clamp(32px, 4vw, 54px); }
.hero__sub { font-size: 19px; line-height: 1.6; margin-top: 26px; color: rgba(250, 247, 241, 0.85); }

@media (max-width: 860px) {
  .hero { flex-direction: column; min-height: auto; }
  .hero__media { width: 100%; height: 48vh; }
  .hero__content { padding: 48px 24px 56px; }
}
@media (max-width: 640px) {
  .hero__sub { font-size: 17px; }
}

.statement { font-size: clamp(32px, 5vw, 56px); max-width: 14em; }
.statement__body { font-size: 20px; line-height: 1.6; max-width: 640px; margin-top: 24px; color: #454A5E; }
.statement__closing { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--deep-blue); margin-top: 24px; }

.split__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.split__img { width: 100%; border-radius: 8px; display: block; }
.split__text h2 { font-size: clamp(28px, 4vw, 40px); max-width: 12em; }
.split__body { font-size: 18px; line-height: 1.6; margin-top: 20px; color: #C9CCDC; max-width: 520px; }

.split__note {
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--sky); margin-top: 16px;
}

.plain-list { list-style: none; margin-top: 24px; }
.plain-list li {
  font-size: 18px; font-weight: 500; padding-left: 26px; position: relative; margin-bottom: 10px;
}
.plain-list li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 12px; height: 2px; background: var(--sky);
}

@media (max-width: 860px) {
  .split__inner { grid-template-columns: 1fr; gap: 32px; }
}

.city { color: var(--deep-blue); font-weight: 700; font-style: italic; }
.section--navy .city { color: var(--sky); }

.goal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
.goal-item { border-top: 2px solid var(--sky); padding-top: 20px; }
.goal-number { font-family: var(--serif); font-size: 56px; font-weight: 700; color: var(--sky); line-height: 1; }
.goal-number--text { font-size: 28px; line-height: 1.25; color: #fff; }
.goal-label { font-size: 16px; color: #C9CCDC; margin-top: 12px; letter-spacing: 0.5px; }

@media (max-width: 860px) {
  .goal-row { grid-template-columns: 1fr; gap: 28px; }
}

.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.card { border: 1px solid #D6E4EC; border-radius: 10px; padding: 20px 18px; background: #fff; }
.card h3 { font-size: 19px; color: var(--navy); margin-bottom: 8px; }
.card p { font-size: 15px; line-height: 1.45; color: #454A5E; }

.builders { background: var(--navy); position: relative; overflow: hidden; }
.builders::before {
  content: "\201C";
  position: absolute; top: -70px; left: 24px; z-index: 0;
  font-family: var(--serif); font-size: 360px; line-height: 1;
  color: rgba(111,195,234,0.08);
  pointer-events: none;
}
.builders .container { position: relative; z-index: 1; }

@media (max-width: 860px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
}

#world-map { width: 100%; height: auto; margin-top: 48px; border-radius: 8px; display: block; }

.route-grid { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 26px; }
.route { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.route .arrow { color: var(--muted); font-weight: 400; margin: 0 8px; font-style: normal; }

.measure-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.measure-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 190px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.03);
}
.measure-item .icon { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.measure-item .label { font-family: var(--serif); font-size: 15px; font-weight: 700; color: #fff; }

@media (max-width: 560px) {
  .measure-item { min-width: 140px; }
}

/* ---------- News & Media ---------- */

.news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.news-head__title { max-width: 11em; }

.news-nav { display: flex; gap: 10px; flex-shrink: 0; padding-bottom: 6px; }
/* display:flex outranks the UA's [hidden] rule, so the attribute alone would
   leave the arrows on screen next to a single card. */
.news-nav[hidden] { display: none; }
.news-arrow {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; cursor: pointer;
  border: 1px solid #D6E4EC; border-radius: 50%;
  color: var(--navy);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.news-arrow svg { width: 18px; height: 18px; display: block; }
.news-arrow:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.news-arrow:disabled { opacity: 0.3; cursor: default; }

.news-track {
  display: flex;
  gap: 20px;
  margin-top: 44px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Room for the card's hover lift, which would otherwise be clipped by the
     scroll container. */
  padding-bottom: 8px;
  margin-bottom: -8px;
}
.news-track::-webkit-scrollbar { display: none; }

/* flex-grow is what makes one item look deliberate instead of stranded: a lone
   card fills the container as a wide banner, two split it, and from three on
   the min-width wins and the track starts scrolling. */
.press-card {
  container-type: inline-size;
  flex: 1 1 460px;
  min-width: min(460px, 84vw);
  scroll-snap-align: start;
}

.press-card__link {
  display: grid;
  grid-template-columns: 250px 1fr;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--navy);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Hairline of sky along the top edge, drawn in on hover. */
.press-card__link::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--sky);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s ease;
}
.press-card__link:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(30,42,79,0.22); }
.press-card__link:hover::after { transform: scaleX(1); }
.press-card__link:focus-visible { outline: 3px solid var(--deep-blue); outline-offset: 3px; }

.press-card__rail {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 32px 28px;
  background: rgba(255,255,255,0.04);
  border-right: 1px solid rgba(255,255,255,0.10);
}
.press-card__outlet {
  font-family: var(--serif); font-size: 25px; font-weight: 700;
  line-height: 1.05; letter-spacing: -0.5px; color: #fff;
}
.press-card__outlet-sub {
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #8E94B4; line-height: 1.5;
}
.press-card__tag {
  margin-top: auto;
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--sky);
  border: 1px solid rgba(111,195,234,0.4); border-radius: 3px;
  padding: 5px 9px;
}

.press-card__body {
  padding: 32px 34px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
}
.press-card__title {
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.24;
  color: #fff;
  letter-spacing: -0.3px;
}
.press-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 24px;
}
.press-card__date { font-size: 14px; letter-spacing: 0.4px; color: #C9CCDC; }
.press-card__cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--sky);
  white-space: nowrap;
}
.press-card__cta svg { width: 15px; height: 15px; display: block; transition: transform 0.25s ease; }
.press-card__link:hover .press-card__cta svg { transform: translateX(5px); }

/* Keyed to the card, not the viewport, so a card reflows when the track packs
   it tighter as coverage is added, not only when the window narrows. */

/* One item is the state the section ships in and the one most likely to look
   like an afterthought, so the card earns its width here: taller, wider rail,
   headline scaled up to carry a full container. */
@container (min-width: 880px) {
  .press-card__link { grid-template-columns: 310px 1fr; min-height: 232px; }
  .press-card__rail { padding: 40px 34px; }
  .press-card__outlet { font-size: 30px; }
  .press-card__body { padding: 40px 46px; gap: 34px; }
  .press-card__title { font-size: 33px; line-height: 1.2; max-width: 17em; text-wrap: balance; }
  .press-card__date { font-size: 15px; }
}

@container (max-width: 560px) {
  .press-card__link { grid-template-columns: 1fr; }
  .press-card__rail {
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 14px;
    padding: 20px 26px;
    border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .press-card__outlet { font-size: 20px; }
  .press-card__outlet-sub { display: none; }
  .press-card__tag { margin-top: 0; margin-left: auto; }
  .press-card__body { padding: 26px; gap: 22px; }
}

.news-foot { margin-top: 32px; }

@media (max-width: 640px) {
  .news-head { align-items: flex-start; }
  .news-nav { display: none; }
  .news-track { margin-top: 32px; }
  .news-foot .btn { width: 100%; text-align: center; }
}

/* ---------- Media page (/media) ---------- */

/* Top padding clears the fixed header. The band is short on purpose: the
   homepage owns the full-screen opening, this page owes the reader the
   coverage inside one screen. */
.media-hero {
  background: var(--navy);
  color: #fff;
  padding: 152px 0 84px;
}
.media-hero__title { font-size: clamp(34px, 5vw, 58px); max-width: 11em; }
.media-hero__sub {
  font-size: 18px; line-height: 1.6; margin-top: 22px;
  max-width: 40em; color: rgba(250, 247, 241, 0.82);
}

/* The index reuses .press-card wholesale rather than growing a second card
   component. Stacked in a one-column grid the card is wide enough to trip its
   own @container (min-width: 880px) rule, so it lands in the banner treatment
   the homepage uses for a lone item. Adding a second story needs no new CSS. */
.media-grid { display: grid; gap: 20px; }

/* ---------- Story page (/media/<slug>) ---------- */

/* The headline is the H1 here, not a card title: this URL is what gets pasted
   into social, so the first thing on screen has to be the thing the preview
   promised. */
.story-hero {
  background: var(--navy);
  color: #fff;
  padding: 132px 0 76px;
}
.story-hero__back {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--sky); text-decoration: none;
  margin-bottom: 34px;
}
.story-hero__back svg { width: 15px; height: 15px; display: block; transition: transform 0.25s ease; }
.story-hero__back:hover svg { transform: translateX(-4px); }

.story-hero__meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
  margin-bottom: 20px;
}
.story-hero__outlet {
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  letter-spacing: -0.4px; color: #fff;
}
.story-hero__sep { color: #5B6285; }
.story-hero__place,
.story-hero__date {
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #8E94B4;
}

/* No text-wrap: balance. On a headline this long it evens the line lengths by
   making three of the four short, which reads as a ragged accident. */
.story-hero__title { font-size: clamp(30px, 4.4vw, 50px); max-width: 15em; }
.story-hero__standfirst {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 2vw, 22px); line-height: 1.5;
  color: var(--sky); margin-top: 24px; max-width: 32em;
}

.story { background: var(--cream); padding: 68px 0 92px; }
/* A reading measure, left-aligned so it sits under the hero headline rather
   than floating in the middle of the page. */
.story__body { max-width: 720px; }

.story__byline {
  font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted);
}

/* No fade-out over the last paragraph: it greys a sentence that is perfectly
   readable and looks like a rendering fault. The cut is signalled honestly
   instead, by the rule and continuation line below. */
.story__excerpt { margin-top: 24px; }
.story__excerpt p { font-size: 18px; line-height: 1.7; color: #454A5E; }
.story__excerpt p + p { margin-top: 18px; }

.story__more {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted);
}
.story__more::after { content: ""; flex: 1; height: 1px; background: #DFE5EC; }

.story__quote {
  margin-top: 30px;
  border-left: 3px solid var(--sky);
  padding: 4px 0 4px 24px;
  max-width: 28em;
}
.story__quote p {
  font-family: var(--serif); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.42; color: var(--navy);
}
.story__quote p::before { content: "\201C"; }
.story__quote p::after { content: "\201D"; }
.story__quote cite {
  display: block; margin-top: 14px;
  font-style: normal; font-size: 13px; letter-spacing: 0.6px; color: var(--muted);
}

.story__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin-top: 38px;
  padding-top: 34px;
  border-top: 1px solid #DFE5EC;
}
/* Says where the click lands before it is made. An outbound link on a page
   whose whole job is one outbound link should not be a surprise. */
.story__source { font-size: 13px; color: var(--muted); max-width: 30em; }

@media (max-width: 640px) {
  .media-hero { padding: 116px 0 60px; }
  .story-hero { padding: 104px 0 56px; }
  .story-hero__back { margin-bottom: 26px; }
  .story { padding: 48px 0 64px; }
  .story__excerpt p { font-size: 17px; }
  .story__foot .btn { width: 100%; text-align: center; }
}

.media-cta__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px 48px;
}
.media-cta__title { font-size: clamp(26px, 3.4vw, 38px); max-width: 10em; }
.media-cta__body { font-size: 17px; line-height: 1.6; color: #454A5E; margin-top: 14px; max-width: 34em; }
/* The section already supplies the gap above it. */
.media-cta__actions { margin-top: 0; }

.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(30,42,79,0.65); }
.modal__panel {
  position: relative; z-index: 1; background: var(--cream); color: var(--ink);
  max-width: 440px; margin: 8vh auto 0; padding: 40px 32px; border-radius: 10px;
}
.modal__panel h3 { font-size: 26px; }
.modal__intro { font-size: 15px; color: var(--muted); margin-top: 10px; margin-bottom: 24px; }
.modal__close {
  position: absolute; top: 16px; right: 16px; background: none; border: none;
  font-size: 24px; cursor: pointer; color: var(--muted); line-height: 1;
}
.modal__form { display: flex; flex-direction: column; gap: 6px; }
.modal__form[hidden] { display: none; }
.modal__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 14px; color: var(--muted); }
.modal__input {
  font-size: 16px; padding: 12px 14px; border: 1px solid #D6E4EC; border-radius: 6px; font-family: var(--sans);
}
.modal__textarea { resize: vertical; min-height: 70px; }
.modal__submit { margin-top: 24px; width: 100%; text-align: center; }
.modal__submit:disabled { opacity: 0.6; cursor: default; }
.modal__honeypot { position: absolute; left: -9999px; }
.modal__error { color: #B23B3B; font-size: 14px; margin-top: 14px; }
.modal__success { text-align: center; padding: 30px 0 10px; font-family: var(--serif); font-size: 19px; color: var(--ink); }

body.no-scroll { overflow: hidden; }

@media (max-width: 480px) {
  .modal__panel { margin: 0; max-width: 100%; height: 100%; border-radius: 0; overflow-y: auto; }
}