/* ============================================================
   Bionical Solutions | The last mile microsite
   Shared stylesheet for the landing page and the perspective pages.
   ============================================================ */
:root {
  --navy: #0a599d;
  --deep: #083f70;
  --mid: #478cc7;
  --cyan: #4cc6e3;
  --lime: #b4d336;
  --amber: #fba819;
  --mint: #3fd5ae;
  --amber-text: #9a6100;
  --cyan-text: #116a82;
  --lime-text: #4f6410;
  --ink: #2d2d2d;
  --muted: #54718b;
  --wash: #eff6fb;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Urbanist";
  src: url("fonts/Urbanist-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Urbanist-Light";
  src: url("fonts/Urbanist-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "Urbanist-Medium";
  src: url("fonts/Urbanist-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Urbanist-Bold";
  src: url("fonts/Urbanist-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Urbanist-Black";
  src: url("fonts/Urbanist-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
}

body {
  font-family: "Urbanist", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #fafafa;
}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}
.kicker {
  font-size: 13px;
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.btn {
  display: inline-block;
  background: var(--amber);
  color: var(--deep);
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  padding: 14px 28px;
  text-decoration: none;
  font-size: 15px;
  border: none;
  cursor: pointer;
}
.btn.ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
}
sup.reg {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}
.src,
.stat p.src {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
  margin-bottom: 0;
}

/* HERO */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: var(--deep);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-color: #07365f;
}
.hero-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    #163850 43.24%,
    rgba(22, 56, 80, 0.8) 62.68%,
    rgba(22, 56, 80, 0.33) 92.26%
  );
}
.plect {
  position: absolute;
  z-index: 2;
  opacity: 0.9;
}
nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 22px 0;
  position: relative;
  z-index: 3;
}
nav img {
  height: 34px;
}
.hero-inner {
  position: relative;
  z-index: 3;
  padding: 44px 0 72px;
}
.hero-copy {
  max-width: 660px;
}
.hero .kicker {
  color: var(--cyan);
  margin-bottom: 16px;
}
.hero h1 {
  font-size: 44px;
  line-height: 1.04;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  margin-bottom: 16px;
}
.hero h1 em {
  color: var(--amber);
  font-style: normal;
}
.standfirst {
  font-size: 22px;
  line-height: 1.34;
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
  max-width: 680px;
}
.hero p.sub {
  font-size: 19px;
  line-height: 1.55;
  color: #dceaf6;
  margin-bottom: 30px;
  max-width: 560px;
}
.hero .cta {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* PROOF */
.proof {
  background: #fff;
  padding: 34px 0 48px;
}
.proof .kicker {
  color: var(--navy);
  text-align: center;
  margin-bottom: 28px;
  font-size: 19px;
}
.stats {
  display: flex;
  gap: 18px;
}
.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 22px 20px 16px;
}
.stat:nth-child(1) {
  border-top: 3px solid var(--amber);
}
.stat:nth-child(2) {
  border-top: 3px solid var(--mint);
}
.stat:nth-child(3) {
  border-top: 3px solid var(--cyan);
}
.stat:nth-child(4) {
  border-top: 3px solid var(--lime);
}
.stat .head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  min-height: 52px;
}
.stat .numblock {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stat .lbl {
  font-size: 12.5px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.stat .num {
  font-size: 32px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.stat .ico {
  width: 42px;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.stat .tag {
  font-size: 12.5px;
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.45;
  min-height: 36px;
  margin-bottom: 14px;
  color: var(--deep);
}
.stat .ico svg {
  width: 24px;
  height: 24px;
}
.stat:nth-child(1) .ico {
  background: #feeed2;
}
.stat:nth-child(2) .ico {
  background: #d9f7ef;
}
.stat:nth-child(3) .ico {
  background: #e0f5fb;
}
.stat:nth-child(4) .ico {
  background: #f0f6d5;
}
.stat p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  min-height: 130px;
}
.stat .src {
  margin-top: auto;
  padding-top: 14px;
  font-size: 10.5px;
  font-style: italic;
  line-height: 1.45;
  min-height: 0;
  border-top: 1px solid #f3f4f6;
}
.scale {
  display: flex;
  margin-top: 40px;
  margin-bottom: 8px;
  background: #163850;
}
.scale div {
  flex: 1;
  padding: 28px 32px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.scale div:last-child {
  border-right: none;
}
.scale b {
  display: block;
  font-size: 30px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  margin-bottom: 3px;
}
.scale p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 20px;
}

.scale div:nth-child(1) {
  border-bottom: 2px solid var(--lime);
}

.scale div:nth-child(1) b {
  color: var(--lime);
}

.scale div:nth-child(2) {
  border-bottom: 2px solid var(--mint);
}

.scale div:nth-child(2) b {
  color: var(--mint);
}

.scale div:nth-child(3) {
  border-bottom: 2px solid var(--cyan);
}

.scale div:nth-child(3) b {
  color: var(--cyan);
}

/* BELIEF + FORM ROW */
.belief {
  background: linear-gradient(135deg, #6a1b39 0%, #8f244d 45%, #b42d60 100%);
  color: #fff;
  padding: 56px 0;
}
.belief-inner {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}
.belief-copy {
  flex: 1.05;
  padding-top: 4px;
}
.belief h2 {
  font-size: 32px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  line-height: 1.13;
  margin-bottom: 18px;
}
.belief h2 span {
  color: var(--amber);
}
.belief p {
  font-size: 16.5px;
  line-height: 1.68;
  color: #fff;
  margin-bottom: 16px;
}
.belief p:last-of-type {
  margin-bottom: 20px;
}
.belief ul.signoff {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.belief ul.signoff li {
  position: relative;
  font-size: 15.5px;
  line-height: 1.5;
  color: #fff;
  padding: 0 0 11px 26px;
}
.belief ul.signoff li:last-child {
  padding-bottom: 0;
}
.belief ul.signoff li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
}
.belief form {
  flex: 1;
  max-width: 440px;
}
.belief form h3 {
  font-size: 24px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 8px;
}
.belief form p.form-lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 6px;
}

/* PERSPECTIVES */
.persp {
  padding: 52px 0;
  background: #fff;
}
.persp .kicker {
  color: var(--amber-text);
  margin-bottom: 10px;
}
.persp h2 {
  font-size: 32px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 26px;
}
.cards {
  display: flex;
  gap: 24px;
}
.card {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px;
  border-top: 1px solid var(--lime);
  border-right: 1px solid var(--lime);
  border-bottom: 1px solid var(--lime);
  border-left: 3px solid var(--lime);
  background: #fff;
}
.card img {
  height: 44px;
  width: 44px;
  align-self: flex-start;
  margin-bottom: 14px;
}
.card h3 {
  font-size: 18.5px;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 10px;
}
.card h3 .card-title-link {
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}
.card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 14px;
}
.card a {
  margin-top: auto;
  color: var(--navy);
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

/* FORM CARD */
form {
  padding: 28px;
  border-top: 3px solid #f3f4f6;
  border-right: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  border-left: 1px solid #f3f4f6;
  background: #fff;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
label {
  display: block;
  font-size: 13px;
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  color: var(--ink);
  margin: 14px 0 5px;
}
input,
textarea {
  width: 100%;
  padding: 11px 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  border: 1px solid #d3d6d9;
  background: #fff;
}
input::placeholder,
textarea::placeholder {
  color: #5e7285;
}
textarea {
  height: 62px;
  resize: vertical;
}
form .btn {
  width: 100%;
  margin-top: 18px;
  font-size: 16px;
}
form p.form-foot {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
}

/* PLATFORM / WHAT MED SELECT IS */
.platform {
  background: #fff;
  padding: 52px 0 30px;
}
.platform .kicker {
  color: var(--amber-text);
  margin-bottom: 10px;
}
.platform h2 {
  font-size: 32px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 14px;
}
.platform p.lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 75%;
  margin-bottom: 20px;
}
.platform a.more {
  display: inline-block;
  margin-top: 6px;
  color: var(--navy);
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 2px;
}

/* FOOTER SOCIAL */
.foot-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #dceaf6;
  text-decoration: none;
}
.soc svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.soc:hover {
  background: var(--amber);
  color: var(--deep);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .wrap {
    padding: 0 24px;
  }
  .hero h1 {
    font-size: 40px;
  }
  .standfirst {
    font-size: 20px;
  }
  .hero p.sub {
    font-size: 17px;
    max-width: none;
  }
  .stats {
    flex-wrap: wrap;
  }
  .stat {
    flex: 1 1 calc(50% - 9px);
  }
  .stat .tag {
    min-height: 0;
  }
  .stat p {
    min-height: 0;
  }
  .stat .head {
    min-height: 0;
  }
  .belief-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }
  .belief h2 {
    min-width: 0;
    font-size: 28px;
  }
  .belief form {
    max-width: none;
  }
  .cards {
    flex-wrap: wrap;
  }
  .card {
    flex: 1 1 100%;
  }
  .platform h2,
  .persp h2 {
    font-size: 27px;
  }
}
@media (max-width: 640px) {
  .wrap {
    padding: 0 20px;
  }
  nav {
    padding: 16px 0;
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero-bg {
    background-position: 72% center;
  }
  .hero-inner {
    padding: 28px 0 44px;
  }
  .hero h1 {
    font-size: 32px;
    line-height: 1.08;
  }
  .standfirst {
    font-size: 18px;
    margin-bottom: 14px;
  }
  .hero p.sub {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
  }
  .hero .cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero .cta .btn {
    text-align: center;
  }
  .plect {
    display: none;
  }
  .proof {
    padding: 38px 0 34px;
  }
  .proof .kicker {
    font-size: 16px;
  }
  .stat {
    flex: 1 1 100%;
  }
  .stat .num {
    font-size: 28px;
  }
  .scale {
    flex-direction: column;
  }
  .scale div {
    border-right: none;
    border-bottom: 1px solid #dde3e8;
  }
  .platform {
    padding: 32px 0 24px;
  }
  .proof {
    padding-top: 24px;
  }
  .belief,
  .persp {
    padding: 38px 0;
  }

  .platform h2,
  .persp h2 {
    font-size: 24px;
  }
  .platform p.lede {
    font-size: 16px;
  }
  .belief h2 {
    font-size: 24px;
  }
  .belief p {
    font-size: 15.5px;
  }
  .belief ul.signoff li {
    font-size: 14.5px;
    padding-left: 22px;
  }
  form {
    padding: 20px;
  }
  .foot {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
}

footer {
  background: var(--deep);
  color: #b9cfe3;
  padding: 20px 0;
}
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer img {
  height: 26px;
}
footer span {
  font-size: 13px;
}

/* tighten the gap between the platform section and proof */
#platform {
  padding-bottom: 60px;
}
#proof {
  padding-top: 60px;
  background: #f4f5f6;
}

/* WHAT COMES WITH EVERY PROGRAM */
.withevery {
  margin: 6px 0 18px;
  padding: 32px;
  border-left: 3px solid var(--cyan);
  background: #e0f5fb;
  max-width: none;
  display: flex;
  align-items: baseline;
  gap: 22px;
}
.we-label {
  font-size: 16px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  color: var(--navy);
  margin: 0;
  flex: 0 0 132px;
  line-height: 1.45;
}
ul.we-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: inline-grid;
  row-gap: 10px;
  column-gap: 32px;
  align-self: start;
  grid-template-columns: 50% 50%;
  grid-row: 1 / span 1;
  grid-column: 2 / span 1;
  justify-self: stretch;
}
ul.we-list li {
  position: relative;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
  padding-left: 16px;
}
ul.we-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}
/* PLATFORM BAND */
@media (max-width: 900px) {
  .withevery {
    flex-direction: column;
    gap: 10px;
  }
  .we-label {
    flex: none;
  }
  ul.we-list {
    grid-template-columns: 100%;
    grid-column: 1 / span 1;
  }
}
/* ============================================================
   PERSPECTIVE ARTICLE PAGES
   ============================================================ */
.top {
  position: relative;
  background: var(--deep);
  color: #fff;
  overflow: hidden;
}
.top nav {
  justify-content: space-between;
  padding: 24px 0 0;
}
a.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  padding: 11px 20px 11px 16px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
a.back span.arw {
  font-size: 19px;
  line-height: 1;
  color: var(--cyan);
}
a.back:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.head-inner {
  position: relative;
  z-index: 3;
  padding: 46px 0 72px;
  max-width: 820px;
}
.head-inner .kicker {
  color: var(--amber);
  margin-bottom: 18px;
}
.head-inner h1 {
  font-size: 50px;
  line-height: 1.03;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  margin-bottom: 20px;
  color: #fff;
}
.head-inner .standfirst {
  font-size: 21px;
  line-height: 1.42;
  font-family:
    "Urbanist-Medium", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  color: #dceaf6;
  max-width: 700px;
  margin-bottom: 26px;
}
.meta {
  font-size: 13px;
  color: #9fc4e0;
}
.meta b {
  color: #fff;
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
}

.article {
  padding: 56px 0 8px;
}
.col {
  max-width: 720px;
  margin: 0 auto;
}
.col p {
  font-size: 19.5px;
  line-height: 1.72;
  margin-bottom: 26px;
}
.col p.lede {
  font-size: 22px;
  line-height: 1.6;
  font-family:
    "Urbanist-Medium", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  color: #12395c;
}

.pull {
  margin: 40px 0 42px;
  padding: 6px 0 6px 30px;
  border-left: 5px solid var(--cyan);
}
.pull p {
  font-size: 25px;
  line-height: 1.4;
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  color: var(--deep);
  margin: 0;
}

.band {
  background: var(--wash);
  border-radius: 16px;
  padding: 30px 34px;
  margin: 44px 0;
}
.band .lbl {
  font-size: 12px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 20px;
}
.band .row {
  display: flex;
  gap: 26px;
}
.band .item {
  flex: 1;
}
.band .num {
  font-size: 38px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  line-height: 1;
  color: var(--deep);
  margin-bottom: 8px;
}
.band .cap {
  font-size: 14px;
  line-height: 1.45;
  color: #3c5a73;
}

.formband {
  background: var(--navy);
  color: #fff;
  margin-top: 56px;
  padding: 58px 0 62px;
  position: relative;
  overflow: hidden;
}
.formband-inner {
  display: flex;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.formband-copy {
  flex: 1;
}
.formband h2 {
  font-size: 33px;
  line-height: 1.16;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  margin-bottom: 16px;
}
.formband > .wrap > .formband-inner > .formband-copy > p {
  font-size: 18px;
  line-height: 1.6;
  color: #dceaf6;
  margin-bottom: 0;
  max-width: 440px;
}
.formband form {
  width: 430px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 14px;
  padding: 28px 28px 26px;
}
.formband form h3 {
  font-size: 20px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  color: var(--deep);
  margin-bottom: 16px;
}
.formband form label {
  display: block;
  font-size: 12.5px;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: #4e6a82;
  margin-bottom: 6px;
}
.formband form input,
.formband form textarea {
  width: 100%;
  border: 1px solid #7089a1;
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  margin-bottom: 15px;
  background: #fbfdff;
}
.formband form textarea {
  height: 88px;
  resize: vertical;
}
.formband form input::placeholder,
.formband form textarea::placeholder {
  color: #5e7285;
}
.formband form .btn {
  width: 100%;
  text-align: center;
  margin-top: 3px;
}
.formband form .form-foot {
  font-size: 12.5px;
  color: #54718b;
  margin-top: 12px;
  margin-bottom: 0;
  line-height: 1.45;
  max-width: none;
}

.related {
  padding: 62px 0 72px;
}
.related .kicker {
  color: var(--navy);
  margin-bottom: 26px;
}
.related .cards {
  display: flex;
  gap: 24px;
}
.related .card {
  flex: 1;
  border: 1px solid #d8e5ef;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--cyan);
  padding: 0;
}
.related .card:nth-child(2) {
  border-top-color: var(--lime);
}
.related .cbody {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.related .card h3 {
  font-size: 19px;
  line-height: 1.25;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  color: var(--deep);
  margin-bottom: 10px;
}
.related .card p {
  font-size: 14.5px;
  line-height: 1.5;
  color: #4e6a82;
  margin-bottom: 16px;
  flex: 1;
}
.related .card a {
  font-size: 14px;
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}

.draft-flag {
  background: #fff4dc;
  border: 1px solid #f0c976;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 30px;
  font-size: 14px;
  line-height: 1.5;
  color: #7a5400;
}

@media (max-width: 860px) {
  .formband-inner {
    flex-direction: column;
    gap: 32px;
  }
  .formband form {
    width: 100%;
  }
  .band .row,
  .related .cards {
    flex-direction: column;
  }
  .col p {
    font-size: 18px;
  }
}

/* Logo carries intrinsic width/height attributes for layout stability.
   width:auto keeps it scaling from the height rule instead of rendering at its intrinsic 552px. */
img {
  max-width: 100%;
}
nav img,
.nav-row img,
.foot img,
.top nav img {
  width: auto;
  height: 34px;
}
.foot img {
  height: 26px;
}
.nav-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 22px 0;
  position: relative;
  z-index: 3;
}

/* --------------------------------------------------------------
   Overrides. Keep these last in the file.
   -------------------------------------------------------------- */

/* The article rules share generic selectors with the landing page rules above.
   These reset the properties the article blocks do not declare for themselves. */
.formband form {
  box-shadow: none;
}
.related .card {
  box-shadow: none;
}
.formband form label {
  margin-top: 0;
}
.belief form p.form-foot {
  margin-bottom: 0;
}

/* .pull sits inside .col and ties with the 860px `.col p` rule on specificity.
   Keep this bump or the pull quote takes body size below 860px. */
.pull p,
.col .pull p {
  font-size: 25px;
}

/* Article standfirst and lede outrank the landing page responsive .standfirst
   rules, so their breakpoints are declared here. */
@media (max-width: 980px) {
  .head-inner h1 {
    font-size: 42px;
  }
  .head-inner .standfirst {
    font-size: 19px;
  }
}
@media (max-width: 860px) {
  .col .pull p {
    font-size: 21px;
  }
}
@media (max-width: 640px) {
  .head-inner {
    padding: 32px 0 52px;
  }
  .head-inner h1 {
    font-size: 31px;
  }
  .head-inner .standfirst {
    font-size: 17px;
  }
  .col p.lede {
    font-size: 19px;
  }
  .band {
    padding: 22px 20px;
  }
  .band .num {
    font-size: 31px;
  }
}

/* Below 1250px the decorative circles fall behind the headline copy, so they are
   hidden and the tint is strengthened to hold text contrast over the photograph.
   The tint below is declared after the 640px rule further up this file, so the
   mobile case is restated here. */
@media (max-width: 1250px) {
  .plect {
    display: none;
  }
}

/* Visible keyboard focus. Navy for white surfaces, the lighter ring for elements
   on a dark background. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--deep);
  outline-offset: 2px;
}
.top a:focus-visible,
.hero a:focus-visible,
.belief-copy a:focus-visible,
.formband-copy a:focus-visible,
footer a:focus-visible {
  outline-color: #ffd48a;
}

/* Screen-reader-only, except the skip link, which has to become visible on focus. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
a.vh:focus,
a.vh:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  clip: auto;
  overflow: visible;
  background: #fff;
  color: var(--deep);
  font-size: 15px;
  font-family: "Urbanist-Bold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(4, 32, 58, 0.35);
}

.u-off {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The hero kicker sits on a tinted photograph and uses a lighter tint of the brand
   amber to hold contrast. Every other amber on the site is unchanged. */
.hero .kicker {
  color: var(--cyan);
}

/* One featured perspective (September 2026 launch). Remove .card-featured when a second article ships. */
.card.card-featured {
  max-width: 720px;
}
.card.card-featured h3 {
  font-size: 22px;
}
.card.card-featured p {
  font-size: 15px;
}

/* Article subheads and the sources line */
.col h2 {
  font-size: 26px;
  line-height: 1.25;
  font-family:
    "Urbanist-Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  color: var(--navy);
  margin: 38px 0 14px;
}
.col p.sources {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 34px;
}

/* Positioned decoration, moved out of inline style attributes so a strict Content-Security-Policy
   (style-src without unsafe-inline) can be applied. */
.hero-bg {
  background-image: url(hero.webp);
}
.deco-1 {
  left: 58.6%;
  top: 11%;
  width: 42px;
  opacity: 0.95;
}
.deco-2 {
  left: 62.5%;
  top: 26%;
  width: 16px;
  opacity: 0.8;
}
.deco-3 {
  left: 59.8%;
  top: 42%;
  width: 25px;
  opacity: 0.9;
}
.deco-4 {
  left: 56.8%;
  top: 63%;
  width: 23px;
  opacity: 0.9;
  transform: rotate(32deg);
}
.deco-5 {
  left: 46.5%;
  top: 80%;
  width: 20px;
  opacity: 0.8;
}
.deco-6 {
  left: 62.8%;
  top: 87%;
  width: 13px;
  opacity: 0.75;
}
.deco-7 {
  right: -120px;
  bottom: -150px;
  width: 400px;
  height: 400px;
  z-index: 1;
}
.deco-8 {
  right: 210px;
  bottom: -70px;
  width: 230px;
  height: 230px;
  z-index: 1;
}