/* RMC visual refresh. Load after site.css, cancer.css and trust.css. */
:root {
  --ink: #183c4a;
  --navy: #204957;
  --navy-2: #286171;
  --teal: #086f74;
  --teal-2: #30adb6;
  --mint: #e2f4f1;
  --mint-2: #f0f9f6;
  --ice: #f1f7fa;
  --paper: #fffefa;
  --sand: #faf7f1;
  --text: #344f5c;
  --muted: #526975;
  --line: #d8e5e9;
  --line-dark: #c9dee3;
  --pending: #845213;
  --trial: #275b91;
  --research: #655081;
  --danger: #963d3d;
  --shadow-sm: 0 7px 24px rgba(35, 80, 95, .06);
  --shadow: 0 14px 38px rgba(35, 80, 95, .08);
  --shadow-lg: 0 18px 48px rgba(35, 80, 95, .1);
  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 30px;
}

body { background: var(--paper); }
h1, h2, h3, h4 { color: var(--ink); }
.lead { color: #415e6c; }
.eyebrow, .eyebrow-light, .kicker { color: var(--teal); }
.text-light { color: var(--text); }
::selection { color: var(--ink); background: #ceeef0; }

/* A quiet, solid navigation surface keeps the brand and menus crisp. */
.topbar {
  background: #edf7f9;
  color: #42616d;
  border-bottom: 1px solid #dcebee;
}
.topbar a { color: #09686c; }
.header { background: #fffefa; backdrop-filter: none; border-bottom-color: var(--line); }
.nav > a, .nav-group > button { color: #345460; }
.nav > a:hover, .nav-group > button:hover { color: var(--teal); }
.brand-copy strong { color: var(--ink); }
.mega, .nav.open { background: #fffefa; }
.mega a:hover { background: #edf8f8; }
.menu-btn { background: #fff; border-color: #b8d2d9; }

/* Teal is reserved for high-contrast actions; light blue carries large areas. */
.btn-primary {
  color: #fff;
  background: #08777c;
  border-color: #08777c;
  box-shadow: 0 5px 14px rgba(8, 119, 124, .12);
}
.btn-primary:hover { background: #05676c; border-color: #05676c; box-shadow: var(--shadow-sm); }
.btn-dark { background: #e4f2f5; color: #205664; border-color: #bbd7df; }
.btn-dark:hover { background: #d6eaf0; border-color: #84b7c3; }
.btn-light, .btn-outline { color: #245563; border-color: #aacbd4; background: #fff; }
.btn-light:hover, .btn-outline:hover { background: #f1fafb; border-color: #639eae; }
.btn:disabled { background: #e5edef; border-color: #bacbd1; color: #506770; box-shadow: none; cursor: not-allowed; }
.btn:disabled:hover { transform: none; }
.link-arrow { color: #086a70; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #08777c;
  outline-offset: 4px;
}

/* Distinct, bright section surfaces without large dark blocks. */
.section-white { background: #fffefa; }
.section-soft { background: #f1f7fa; }
.section-mint { background: #f0f9f6; }
.section-sand { background: #faf7f1; }
.section-dark, .section-navy {
  color: var(--text);
  background: #edf7fa;
  border-top: 1px solid #dcebef;
  border-bottom: 1px solid #dcebef;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4,
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: var(--ink); }
.section-dark .text-light, .section-dark .lead, .section-dark .section-head > p,
.section-navy .text-light, .section-navy .lead, .section-navy .section-head > p { color: var(--muted); }
.section-dark .eyebrow-light, .section-navy .eyebrow-light { color: var(--teal); }
.section-head { gap: 44px; }
.section-head > p { line-height: 1.75; }

/* Photography is clear and untinted; captions sit on their own solid surface. */
.hero {
  background: linear-gradient(112deg, #fffdf7 0%, #f4faf9 51%, #eaf5fa 100%);
}
.hero::before { background: none; }
.hero::after { background: none; }
.hero-grid { gap: 48px; }
.hero-visual {
  height: auto;
  aspect-ratio: 6 / 5;
  background: #e8f1f2;
  border: 1px solid #d3e3e6;
  box-shadow: var(--shadow-lg);
}
.hero-visual::after { background: none; box-shadow: none; }
.hero-visual img { object-position: center; }
.hero-caption {
  left: 18px;
  right: 18px;
  bottom: 18px;
  align-items: center;
  padding: 16px 18px;
  background: #fffefa;
  border: 1px solid #dae7e9;
  border-radius: 18px;
  color: var(--ink);
}
.hero-caption strong { color: var(--ink); font-size: 1.17rem; }
.hero-caption span { color: var(--muted); }
.hero-caption .trust-chip { color: var(--ink); background: #eaf6f4; border: 1px solid #c9e4df; box-shadow: none; }
.hero-caption .trust-chip span { color: var(--ink); }
.hero-stat-card { background: #fffefa; border-color: #d6e6e9; backdrop-filter: none; box-shadow: var(--shadow-sm); }
.hero-note { color: #4c6672; }
.trust-strip { background: #fffefa; border-color: var(--line); box-shadow: var(--shadow-sm); }
.trust-item { padding: 22px 24px; }
.trust-item span { color: var(--muted); }
.page-hero { background: linear-gradient(112deg, #fffdf7 0%, #f0f8fa 100%); border-bottom: 1px solid #e2edef; }
.breadcrumbs, .trust-breadcrumbs, .page-hero nav[aria-label="Breadcrumb"] { color: #526b77; }
.breadcrumbs i { color: var(--muted); }
.breadcrumbs a, .trust-breadcrumbs a { text-underline-offset: 4px; }
.breadcrumbs a:hover, .trust-breadcrumbs a:hover { text-decoration: underline; }
.page-hero-art, .path-art { background: #e8f1f2; }
.page-hero-art { border: 1px solid #d3e3e6; box-shadow: var(--shadow); }
.page-hero-art .visual-note, .path-art .visual-note {
  color: #365560;
  background: #fffefa;
  border: 1px solid #d4e5e8;
  backdrop-filter: none;
  font-size: .67rem;
}
.split-media { min-height: 0; aspect-ratio: 5 / 4; background: #e8f1f2; border: 1px solid #d3e3e6; box-shadow: var(--shadow); }
.split-media > picture { display: block; height: 100%; }
.split-media .corner-note { background: #fffefa; border: 1px solid #d4e5e8; backdrop-filter: none; }

/* Reusable editorial hero and photographic cards. */
.visual-editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: 48px;
}
.visual-editorial-grid > * { min-width: 0; }
.page-hero .visual-editorial-grid h1, .page-hero.visual-editorial-grid h1 {
  font-size: clamp(2.45rem, 3.7vw, 3.85rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.visual-editorial-grid .lead { font-size: 1.08rem; line-height: 1.75; }
.visual-editorial-grid .button-row { margin-top: 24px; }
.visual-editorial-grid .btn { font-size: .79rem; padding-inline: 19px; }
.visual-editorial-image {
  display: block;
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d5e5e9;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.visual-editorial-image > picture { display: block; }
.visual-editorial-image > img, .visual-editorial-image > picture > img, img.visual-editorial-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.visual-caption { display: block; padding: 13px 17px; margin: 0; color: #4e6772; background: #fff; font-size: .74rem; line-height: 1.55; }
.visual-card-image { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: center; background: #e8f1f2; }
picture.visual-card-image { overflow: hidden; }
picture.visual-card-image > img { width: 100%; height: 100%; object-fit: cover; }
.card-pad > .visual-card-image { width: calc(100% + 56px); max-width: none; margin: -28px -28px 24px; }

/* Borders, readable labels and restrained depth define cards. */
.card, .content-card, .source-item, .condition-card, .faq-item, .journey-grid a { border-color: var(--line); }
.card-hover:hover, .condition-card:hover { border-color: #9dc9d1; box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.entry-card::before { background: #43b8c0; }
.entry-card .num, .icon-box, .process-step .step-circle { background: #e2f2f5; color: #086a70; }
.method-card::after { background: #eaf6f7; }
.method-card ul, .check-list li { color: #486370; }
.path-card:hover .path-art img { transform: scale(1.015); }
.path-foot { color: #526c77; }
.badge, .tag { color: #326471; }
.badge { background: #eaf6f4; }
.tag { background: #eaf3f6; }
.status-pending { background: #fff3df; color: #845213; }
.status-confirmed { background: #e5f5ee; color: #096856; }
.status-trial { background: #eaf1fc; color: #275b91; }
.status-research { background: #f0eafa; color: #655081; }
.status-unverified { background: #f7eae7; color: #963d3d; }
.journey-grid a { box-shadow: none; transition: border-color .2s, background .2s; }
.journey-grid a:hover { background: #fbfefd; border-color: #9dc9d1; }
.journey-grid .eyebrow { margin-bottom: 5px; }
.journey-grid strong { color: var(--ink); }
.trust-topic { display: flex; flex-direction: column; }
.trust-topic .link-arrow { margin-top: auto; padding-top: 10px; }
#cancer-pathways .card:not(.card-pad):not(.path-card) { padding: 28px; }
#cancer-pathways .card:not(.card-pad):not(.path-card) > .visual-card-image { width: calc(100% + 56px); max-width: none; margin: -28px -28px 24px; }

/* The verification steps retain their existing responsive behaviour. */
.verify-step { background: #fff; border-color: #cee1e7; box-shadow: none; }
.verify-step .step-no { color: #087078; }
.verify-step .step-icon { background: #e2f3f5; color: #087078; }
.verify-step h3 { color: var(--ink); }
.verify-step p { color: #526975; font-size: .77rem; line-height: 1.65; }
.verify-step:not(:last-child)::after { color: #096e75; background: #d9eef2; }
.verification-standards span { color: #456470; background: #fff; border: 1px solid #d1e4e9; }
.process-step p { font-size: .75rem; line-height: 1.65; }
.process-step:not(:last-child)::after { background: #9ecbd3; }
.cta-panel { background: linear-gradient(112deg, #e8f5f9 0%, #edf8f4 100%); color: var(--text); border: 1px solid #cfe3e8; box-shadow: none; }
.cta-panel h2 { color: var(--ink); }
.cta-panel p { color: #466370; }
.cta-panel .eyebrow-light { color: var(--teal); }
.cta-panel::before, .cta-panel::after { border-color: #c9e4e8; }

/* Reading and enquiry surfaces: no change to form controls or step logic. */
.side-nav { background: #fff; border-color: #d4e4e9; box-shadow: var(--shadow-sm); }
.side-nav a { color: #496672; }
.side-nav a:hover { color: #086a70; background: #eef8f8; }
.side-nav .btn-primary { color: #fff; }
.side-nav .btn-primary:hover { color: #fff; background: #05676c; }
.side-nav .btn-dark, .side-nav .btn-light, .side-nav .btn-outline { color: #245563; }
.trust-answer { background: #eff8fa; border-color: #d3e5ea; border-left-color: #2297a2; }
.info-box { background: #f0f9f6; border-color: #cae4de; }
.info-box.warning { background: #fff8ec; border-color: #e8d7b7; }
.info-box p { color: #4d6570; }
.form-card { border-color: #cfe1e7; box-shadow: var(--shadow); }
.field label { color: #345560; font-size: .77rem; }
.field label small { color: #58707b; }
.field input, .field select, .field textarea { border-color: #a8c2cb; background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: #617681; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #08777c; box-shadow: 0 0 0 3px #e1f3f4; }
.field input[type="checkbox"] { accent-color: #08777c; }
.field-error { color: #9b3434; font-size: .73rem; }
.consent label { color: #4b6672; font-size: .77rem; }
.consent label a { text-decoration: underline; text-underline-offset: 3px; }
.form-note { color: #4e6874; background: #f0f7fa; font-size: .75rem; }
.steps-mini span { color: #526975; }

/* A light footer closes the page without an abrupt, heavy band. */
.footer { color: #4b6672; background: #edf5f7; border-top: 1px solid #d3e4e9; }
.footer .brand-copy strong, .footer-col strong { color: var(--ink); }
.footer .brand-copy span { color: #096b70; }
.footer-col a { color: #4b6672; font-size: .77rem; }
.footer-col a:hover, .footer-brand a:hover, .footer-bottom a:hover { color: #086a70; text-decoration: underline; text-underline-offset: 4px; }
.footer .brand:hover { text-decoration: none; }
.footer-brand p { color: #4b6672; }
.footer-bottom, .footer-disclaimer { border-top-color: #cfdee4; }
.footer-bottom { font-size: .72rem; }
.footer-disclaimer { color: #526b77; font-size: .71rem; line-height: 1.7; }
.mobile-cta { background: #fffefa; backdrop-filter: none; border-color: #c9dfe5; box-shadow: 0 6px 24px rgba(35, 80, 95, .13); }

@media (max-width: 1120px) {
  .hero-visual, .split-media { height: auto; aspect-ratio: 16 / 10; }
  .visual-editorial-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; }
  .page-hero .visual-editorial-grid h1, .page-hero.visual-editorial-grid h1 { font-size: clamp(2.25rem, 4vw, 3.3rem); }
}
@media (max-width: 900px) {
  .visual-editorial-grid { grid-template-columns: 1fr; gap: 32px; }
  .visual-editorial-image { max-width: 740px; }
  .visual-editorial-image > img, .visual-editorial-image > picture > img, img.visual-editorial-image { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .hero-grid { gap: 34px; }
  .hero-visual { height: auto; aspect-ratio: 4 / 3; border-radius: 24px; }
  .split-media { aspect-ratio: 4 / 3; }
  .hero-caption { left: 14px; right: 14px; bottom: 14px; padding: 13px 15px; border-radius: 14px; }
  .hero-caption strong { font-size: 1.08rem; }
  .hero-caption span { font-size: .72rem; }
  .trust-item { padding: 19px 21px; }
  .section-head { gap: 28px; }
  .page-hero .visual-editorial-grid h1, .page-hero.visual-editorial-grid h1 { font-size: clamp(2.15rem, 8vw, 3.3rem); }
  .visual-editorial-grid .lead { font-size: 1.06rem; }
  .visual-editorial-image { border-radius: 23px; }
  .visual-caption { font-size: .72rem; padding: 12px 15px; }
  .verify-step { min-height: 260px; }
}
@media (max-width: 460px) {
  .hero-visual { height: auto; aspect-ratio: 4 / 3; }
  .hero-caption { padding: 12px; }
  .hero-caption strong { font-size: 1rem; }
  .hero-caption span { font-size: .68rem; }
  .visual-editorial-grid .btn { width: 100%; }
  .visual-editorial-image > img, .visual-editorial-image > picture > img, img.visual-editorial-image { aspect-ratio: 4 / 3; }
}
@media print {
  body, .page-hero, .hero, .section-dark, .section-navy, .section-soft, .section-mint { background: #fff; }
  .visual-editorial-grid { display: block; }
  .visual-editorial-image { max-width: 360px; margin-top: 24px; box-shadow: none; break-inside: avoid; }
}

/* Full compositions and captions remain visible with the new landscape suite. */
.visual-refresh .visual-home-image { height: auto; aspect-ratio: auto; background: #fff; }
.visual-refresh .visual-home-image > picture { display: block; height: auto; }
.visual-refresh .visual-home-image > picture > img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.visual-refresh .visual-home-image .hero-caption { position: static; margin: 0; border: 0; border-radius: 0; padding: 18px 22px 8px; }
.visual-refresh .visual-home-image .hero-stat-card { position: static; width: auto; margin: 12px 20px; padding: 14px; box-shadow: none; }
.visual-refresh .visual-home-image .visual-caption { padding: 10px 22px 16px; }
.visual-refresh .visual-image-frame { aspect-ratio: auto; height: auto; min-height: 0; background: #fff; }
.visual-refresh .visual-image-frame > picture { display: block; height: auto; }
.visual-refresh .visual-image-frame > picture > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.visual-refresh .visual-image-frame .visual-note { position: static; display: block; margin: 0; padding: 11px 15px; border: 0; border-radius: 0; font-size: .7rem; background: #fff; color: #526975; }
.visual-refresh .visual-image-frame .corner-note { position: static; margin: 0; border: 0; border-radius: 0; padding: 16px; }
.visual-refresh .visual-anatomy > img { object-fit: contain !important; background: #f7fbfd; }
.visual-refresh .visual-editorial-image > picture > img { aspect-ratio: 3 / 2; }
@media (max-width: 760px) {
  .visual-refresh .visual-home-image .hero-caption { padding: 15px 17px 5px; }
  .visual-refresh .visual-home-image .visual-caption { padding: 8px 17px 14px; }
  .visual-refresh .visual-home-image .hero-stat-card { display: none; }
  .visual-refresh .visual-editorial-image { max-width: 620px; }
}
