/* ==========================================================================
   SECONDARY PAGE LAYOUTS  -  the arrangements each page composes
   ==========================================================================

   Each of the secondary pages (/emergency-care, /visiting-hours, the policies,
   /careers, ...) has its own layout in src/components/pages/. They are built
   from the pieces in src/components/sections/guide/PageParts.tsx, and those
   pieces keep the look guide.css gives them. This sheet adds only the
   arrangements: steps, timelines, grids of chapters, a document with a
   contents list, a band of help cards, the urgent band on Emergency Care.

   No new visual language: the navy, the blue, the line colour, the radii and
   the card shadow are guide.css's own variables and values. Logical
   properties throughout (inline-start, block-end) so Arabic mirrors itself.

   Loaded after guide.css and scoped the same way, to `.mph-page-guide`, via
   :where() - so a rule here wins over guide.css only by coming later, and
   selectors that must beat a compound guide.css rule repeat the class.
   ========================================================================== */

/* ─── Spacing helpers ─────────────────────────────────────────────────── */

:where(.mph-page-guide) .guide-intro.lay-center {
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

:where(.mph-page-guide) .lay-narrow {
  max-width: 860px;
  margin-inline: auto;
}

:where(.mph-page-guide) .guide-faq.lay-wide {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

:where(.mph-page-guide) .lay-after {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--guide-line);
}

:where(.mph-page-guide) .lay-wall {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

:where(.mph-page-guide) .guide-sb-btn + .guide-sb-btn {
  margin-top: 0.6rem;
}

/* ─── Two columns: main + second column, no sidebar ───────────────────── */

:where(.mph-page-guide) .lay-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

:where(.mph-page-guide) .lay-split--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:where(.mph-page-guide) .lay-split > * {
  margin-bottom: 0;
}

/* Intro on one side, the page's key help card (a schedule, a desk) on the other. */
:where(.mph-page-guide) .lay-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

:where(.mph-page-guide) .lay-feature .guide-intro {
  margin-bottom: 0;
}

:where(.mph-page-guide) .lay-feature .lay-sb-band {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

@media (max-width: 900px) {
  :where(.mph-page-guide) .lay-split,
  :where(.mph-page-guide) .lay-split--even,
  :where(.mph-page-guide) .lay-feature {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Help cards as a band ─────────────────────────────────────────────── */

:where(.mph-page-guide) .lay-sb-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: stretch;
}

/* Emergency Care: the desk and the way in, straight under the banner. */
:where(.mph-page-guide) .lay-urgent {
  background: linear-gradient(180deg, #f1f7fb 0%, #ffffff 100%);
  border-bottom: 1px solid var(--guide-line);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}

:where(.mph-page-guide) .lay-urgent .lay-sb-band {
  margin-top: 0;
}

/* ─── Summary cards ───────────────────────────────────────────────────── */

/* Steps: numbered, joined by a line, read left to right (right to left in Arabic). */
:where(.mph-page-guide) .guide-cards.lay-cards--steps {
  position: relative;
  counter-reset: step;
}

:where(.mph-page-guide) .guide-cards.lay-cards--steps .guide-card {
  position: relative;
}

:where(.mph-page-guide) .guide-cards.lay-cards--steps .guide-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 2.6rem;
  inset-inline-start: calc(100% + 0.1rem);
  width: 1.3rem;
  height: 2px;
  background: linear-gradient(90deg, var(--guide-blue), rgba(28, 151, 212, 0.2));
}

:where(.mph-page-guide) [dir='rtl'] .guide-cards.lay-cards--steps .guide-card:not(:last-child)::after,
:where([dir='rtl']) :where(.mph-page-guide) .guide-cards.lay-cards--steps .guide-card:not(:last-child)::after {
  background: linear-gradient(270deg, var(--guide-blue), rgba(28, 151, 212, 0.2));
}

/* List: the cards stacked as rows, icon beside the text. */
:where(.mph-page-guide) .guide-cards.lay-cards--list {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

:where(.mph-page-guide) .guide-cards.lay-cards--list .guide-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
}

:where(.mph-page-guide) .guide-cards.lay-cards--list .guide-card > :not(.guide-card-icon) {
  grid-column: 2;
}

:where(.mph-page-guide) .guide-cards.lay-cards--list .guide-card-icon {
  grid-row: span 3;
  margin: 0;
}

/* Duo: two large cards, side by side. */
:where(.mph-page-guide) .guide-cards.lay-cards--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

:where(.mph-page-guide) .guide-cards.lay-cards--duo .guide-card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

@media (max-width: 860px) {
  :where(.mph-page-guide) .guide-cards.lay-cards--steps,
  :where(.mph-page-guide) .guide-cards.lay-cards--duo {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.mph-page-guide) .guide-cards.lay-cards--steps .guide-card::after {
    display: none;
  }
}

/* ─── Contents as chips ───────────────────────────────────────────────── */

:where(.mph-page-guide) .guide-nav.lay-nav--chips {
  position: static;
  border: 0;
  padding: 0;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

:where(.mph-page-guide) .guide-nav.lay-nav--chips .guide-nav-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

:where(.mph-page-guide) .guide-nav.lay-nav--chips .guide-nav-list a {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--guide-line);
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
}

:where(.mph-page-guide) .guide-nav.lay-nav--chips .guide-nav-list a:hover,
:where(.mph-page-guide) .guide-nav.lay-nav--chips .guide-nav-list a:focus-visible {
  border-color: var(--guide-blue);
  color: var(--guide-blue);
  background: var(--guide-tint);
  transform: none;
}

/* ─── Chapters ────────────────────────────────────────────────────────── */

/* Timeline: a line down the marks, for a process the patient goes through. */
:where(.mph-page-guide) .guide-chapters.lay-chapters--timeline {
  position: relative;
  padding-inline-start: 0;
}

:where(.mph-page-guide) .guide-chapters.lay-chapters--timeline::before {
  content: '';
  position: absolute;
  inset-block: 21px;
  inset-inline-start: 20px;
  width: 2px;
  background: linear-gradient(180deg, var(--guide-blue), rgba(28, 151, 212, 0.12));
}

:where(.mph-page-guide) .guide-chapters.lay-chapters--timeline .guide-chapter {
  position: relative;
}

:where(.mph-page-guide) .guide-chapters.lay-chapters--timeline .guide-chapter > :not(.guide-chapter-head) {
  margin-inline-start: calc(42px + 0.9rem);
}

:where(.mph-page-guide) .guide-chapters.lay-chapters--timeline .guide-chapter-mark {
  position: relative;
  z-index: 1;
  border-radius: 50%;
}

/* Grid and catalogue: chapters as cards, read in any order. */
:where(.mph-page-guide) .guide-chapters.lay-chapters--grid,
:where(.mph-page-guide) .guide-chapters.lay-chapters--catalogue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

:where(.mph-page-guide) .guide-chapters.lay-chapters--catalogue {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

:where(.mph-page-guide) .lay-chapters--grid .guide-chapter,
:where(.mph-page-guide) .lay-chapters--catalogue .guide-chapter {
  background: #ffffff;
  border: 1px solid var(--guide-line);
  border-radius: 18px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 8px 30px rgba(4, 20, 33, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

:where(.mph-page-guide) .lay-chapters--grid .guide-chapter:hover,
:where(.mph-page-guide) .lay-chapters--catalogue .guide-chapter:hover {
  border-color: rgba(28, 151, 212, 0.3);
  box-shadow: 0 14px 36px rgba(4, 20, 33, 0.08);
  transform: translateY(-2px);
}

:where(.mph-page-guide) .lay-chapters--catalogue .guide-chapter h2 {
  font-size: 1.1rem;
}

:where(.mph-page-guide) .lay-chapters--catalogue .guide-chapter-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 0.9rem;
}

@media (max-width: 1080px) {
  :where(.mph-page-guide) .guide-chapters.lay-chapters--catalogue {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  :where(.mph-page-guide) .guide-chapters.lay-chapters--grid,
  :where(.mph-page-guide) .guide-chapters.lay-chapters--catalogue {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Policies ────────────────────────────────────────────────────────── */

/* A document with its contents list: Privacy. */
:where(.mph-page-guide) .lay-doc {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

:where(.mph-page-guide) .lay-doc-aside {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

:where(.mph-page-guide) .lay-doc-aside .guide-nav {
  position: static;
}

:where(.mph-page-guide) .lay-doc-aside .lay-sb-band {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

@media (max-width: 900px) {
  :where(.mph-page-guide) .lay-doc {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.mph-page-guide) .lay-doc-aside {
    position: static;
    order: 2;
  }
}

:where(.mph-page-guide) .guide-clause {
  scroll-margin-top: 120px;
  position: relative;
}

:where(.mph-page-guide) .lay-clause-num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  margin-bottom: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--guide-navy), var(--guide-blue));
  box-shadow: 0 8px 20px rgba(0, 78, 117, 0.22);
}

/* Articles: numbered, one reading column, no card chrome - Terms. */
:where(.mph-page-guide) .guide-clauses.lay-clauses--articles .guide-clause {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--guide-line);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 1.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.1rem;
}

:where(.mph-page-guide) .guide-clauses.lay-clauses--articles .guide-clause > :not(.lay-clause-num) {
  grid-column: 2;
}

:where(.mph-page-guide) .guide-clauses.lay-clauses--articles .lay-clause-num {
  grid-row: span 6;
  margin: 0;
}

/* Cards: clauses side by side - Patient Rights, Refunds. */
:where(.mph-page-guide) .guide-clauses.lay-clauses--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* Timeline: clauses in the order a patient acts on them - Cancellations. */
:where(.mph-page-guide) .guide-clauses.lay-clauses--timeline {
  position: relative;
  gap: 1.5rem;
}

:where(.mph-page-guide) .guide-clauses.lay-clauses--timeline::before {
  content: '';
  position: absolute;
  inset-block: 19px;
  inset-inline-start: 19px;
  width: 2px;
  background: linear-gradient(180deg, var(--guide-blue), rgba(28, 151, 212, 0.12));
}

:where(.mph-page-guide) .guide-clauses.lay-clauses--timeline .guide-clause {
  margin-inline-start: 58px;
}

:where(.mph-page-guide) .guide-clauses.lay-clauses--timeline .lay-clause-num {
  position: absolute;
  top: 1.75rem;
  inset-inline-start: -58px;
  border-radius: 50%;
  margin: 0;
  z-index: 1;
}

/* ═══ Card-style guide (Admission & Discharge, …) ══════════════════════════
   The hospital's reference design, 2026-09-26: highlight cards under the
   hero, a numbered "On this page" bar, every chapter a card. Built by
   components/sections/guide/CardGuide.tsx. */
.lay-cardguide {
  --cg-navy: #0b2f5b;
  --cg-blue: #004e75;
  --cg-accent: #1c97d4;
  --cg-wash: #eef6fc;
  --cg-line: #dbe8f3;
  --cg-text: #000000; /* black, as the home page (2026-09-30) */
}

.lay-cardguide .guide-body {
  background: linear-gradient(180deg, #f3f8fd 0%, #ffffff 60%);
}

.lay-cardguide .cg-circle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cg-wash);
  color: var(--cg-blue);
  font-size: 1.25rem;
}

.lay-cardguide .cg-circle--sm {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}

.lay-cardguide .cg-num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cg-wash);
  color: var(--cg-blue);
  font-size: 0.78rem;
  font-weight: 700;
}

.lay-cardguide .cg-num--lg {
  width: 46px;
  height: 46px;
  font-size: 1.15rem;
}

/* Highlight cards */
.lay-cardguide .cg-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  margin: 0 0 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--cg-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(11, 47, 91, 0.08);
}

.lay-cardguide .cg-highlight {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1.5rem;
}

.lay-cardguide .cg-highlight + .cg-highlight {
  border-inline-start: 1px solid var(--cg-line);
}

.lay-cardguide .cg-highlight-badge {
  display: block;
  color: var(--cg-navy);
  font-size: 0.95rem;
  font-weight: 600;
}

.lay-cardguide .cg-highlight h3 {
  margin: 0.15rem 0 0.5rem;
  color: var(--cg-navy);
  font-size: 1.2rem;
  font-weight: 700;
}

.lay-cardguide .cg-highlight p {
  margin: 0;
  color: var(--cg-text);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* On this page */
.lay-cardguide .cg-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0 0 1.75rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--cg-line);
  border-radius: 18px;
  background: #fff;
}

.lay-cardguide .cg-bar-label {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.85rem;
  padding-inline-end: 1.5rem;
  border-inline-end: 1px solid var(--cg-line);
  color: var(--cg-navy);
  font-size: 1.15rem;
  font-weight: 700;
}

.lay-cardguide .cg-bar-list {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lay-cardguide .cg-bar-list a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--cg-blue);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
}

.lay-cardguide .cg-bar-list a:hover {
  color: var(--cg-accent);
}

/* Chapters */
.lay-cardguide .cg-chapters {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* More room between the sections (2026-09-30); cards side by side keep
     their 1.25rem. */
  gap: 3rem 1.25rem;
  margin-bottom: 2.5rem;
}

.lay-cardguide .cg-span-3 { grid-column: span 3; }
.lay-cardguide .cg-span-4 { grid-column: span 4; }
.lay-cardguide .cg-span-6 { grid-column: span 6; }
.lay-cardguide .cg-span-12 { grid-column: 1 / -1; }
.lay-cardguide .cg-span-5 { grid-column: span 5; }
.lay-cardguide .cg-span-7 { grid-column: span 7; }
.lay-cardguide .cg-span-8 { grid-column: span 8; }

.lay-cardguide .cg-chapter--card {
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--cg-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(11, 47, 91, 0.05);
}

.lay-cardguide .cg-chapter {
  position: relative;
  scroll-margin-top: calc(var(--mph-stuck-header, 0px) + 24px);
  color: var(--cg-text);
  font-size: 0.93rem;
  line-height: 1.6;
}


.lay-cardguide .cg-chapter p {
  margin: 0 0 0.75rem;
}

.lay-cardguide .cg-chapter-head {
  margin-bottom: 1.1rem;
}

.lay-cardguide .cg-chapter-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lay-cardguide .cg-chapter-head--centred {
  margin: 1.5rem auto 1.25rem;
  max-width: 720px;
  text-align: center;
}

.lay-cardguide .cg-chapter-head--centred .cg-chapter-title {
  justify-content: center;
}

.lay-cardguide .cg-chapter-head--centred h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
}

.lay-cardguide .cg-eyebrow {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--cg-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.lay-cardguide .cg-chapter-intro {
  margin: 0.5rem 0 0 !important;
  color: var(--cg-text);
}

.lay-cardguide .cg-chapter-head h2 {
  margin: 0;
  color: var(--cg-navy);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
}

.lay-cardguide .cg-lede {
  color: var(--cg-blue);
  font-weight: 600;
}

.lay-cardguide .cg-lede--plain {
  color: var(--cg-text);
  font-weight: 400;
}

.lay-cardguide .cg-subhead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cg-navy);
  font-weight: 700;
}

.lay-cardguide .cg-ticks {
  margin: 0.25rem 0 0.75rem;
  padding: 0;
  list-style: none;
}

.lay-cardguide .cg-ticks li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.lay-cardguide .cg-tick {
  margin-top: 0.2rem;
  color: var(--cg-accent);
}

.lay-cardguide .cg-note {
  display: flex;
  grid-column: 1 / -1;
  gap: 0.85rem;
  align-items: flex-start;
  margin: 0.75rem 0 0 !important;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: var(--cg-wash);
  font-size: 0.88rem;
}

.lay-cardguide .cg-note i {
  margin-top: 0.15rem;
  color: var(--cg-blue);
  font-size: 1.15rem;
}

.lay-cardguide .cg-with-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 1.25rem;
  align-items: start;
}

.lay-cardguide .cg-photo {
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
}

.lay-cardguide .cg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lay-cardguide .cg-icon-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lay-cardguide .cg-icon-rows li {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 0.55rem 0;
}

.lay-cardguide .cg-icon-rows li + li {
  border-top: 1px dashed var(--cg-line);
}

.lay-cardguide .cg-lead-line {
  display: flex;
  gap: 1rem;
  align-items: center;
  color: var(--cg-navy);
  font-size: 1rem;
  font-weight: 500;
}

.lay-cardguide .cg-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.lay-cardguide .cg-tile {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: var(--cg-wash);
}

.lay-cardguide .cg-tile span:not(.cg-circle) {
  display: block;
  color: var(--cg-blue);
  font-size: 0.82rem;
  font-weight: 600;
}

.lay-cardguide .cg-tile b {
  color: var(--cg-navy);
  font-size: 1.35rem;
}

.lay-cardguide .cg-tile .cg-circle {
  background: #fff;
}

.lay-cardguide .cg-steps-wrap.has-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1.5rem;
  align-items: start;
}

.lay-cardguide .cg-steps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.lay-cardguide .cg-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.6rem;
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.45;
}

/* The line joining the numbers */
.lay-cardguide .cg-steps li::before {
  position: absolute;
  top: 14px;
  inset-inline: 0;
  height: 1.5px;
  background: var(--cg-line);
  content: '';
}

.lay-cardguide .cg-steps li:first-child::before {
  inset-inline-start: 50%;
}

.lay-cardguide .cg-steps li:last-child::before {
  inset-inline-end: 50%;
}

.lay-cardguide .cg-step-num {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #cfe6f7;
  color: var(--cg-blue);
  font-weight: 700;
}

.lay-cardguide .cg-steps-wrap .cg-note {
  /* Beside the steps, not under them. */
  grid-column: auto;
  margin-top: 0 !important;
}

.lay-cardguide .cg-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.lay-cardguide .cg-subcard {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--cg-line);
  border-radius: 16px;
}

/* Buttons */
.lay-cardguide .cg-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.lay-cardguide .cg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 1.35rem;
  border: 1.5px solid var(--cg-navy);
  border-radius: 999px;
  background: var(--cg-navy);
  color: #fff !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.lay-cardguide .cg-btn:hover {
  background: var(--cg-blue);
}

.lay-cardguide .cg-btn--outline {
  background: #fff;
  color: var(--cg-blue) !important;
}

.lay-cardguide .cg-btn--outline:hover {
  background: var(--cg-wash);
}

.lay-cardguide .cg-btn--block {
  width: 100%;
}

.lay-cardguide .cg-btn--block,
.lay-cardguide .cg-chapter--stepcard .cg-buttons {
  margin-top: auto;
}

.lay-cardguide .cg-btn-arrow {
  font-size: 0.8em;
}

/* Red: the important box, the red list and row */
.lay-cardguide .cg-tick--red {
  color: #dc2626;
}

.lay-cardguide .cg-alert {
  display: flex;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: #fdecee;
  color: #b91c1c;
}

.lay-cardguide .cg-alert > i {
  color: #dc2626;
  font-size: 1.9rem;
}

.lay-cardguide .cg-alert strong {
  display: block;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.lay-cardguide .cg-alert p {
  margin: 0.2rem 0 0 !important;
}

.lay-cardguide .cg-subcard--red {
  border-color: #f8d4d8;
  background: #fdf1f2;
}

.lay-cardguide .cg-subcard--red .cg-subhead {
  color: #c81e1e;
}

.lay-cardguide .cg-subcard--red .cg-circle {
  background: #fff;
  color: #dc2626;
}

.lay-cardguide .cg-chapter--alertrow {
  border-color: #f5c2c7 !important;
  background: #fdf2f3 !important;
}

.lay-cardguide .cg-chapter--alertrow h2 {
  color: #c81e1e !important;
}

.lay-cardguide .cg-alert-icon {
  color: #dc2626;
  font-size: 1.8rem;
}

.lay-cardguide .cg-alertrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lay-cardguide .cg-alertrow li {
  display: flex;
  gap: 0.6rem;
  padding-inline-end: 1rem;
}

.lay-cardguide .cg-alertrow li + li {
  padding-inline-start: 1rem;
  border-inline-start: 1px solid #f5c2c7;
}

/* Chips (insurance partners) */
.lay-cardguide .cg-with-photo--wide {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.lay-cardguide .cg-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.lay-cardguide .cg-chips li {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--cg-line);
  border-radius: 10px;
  background: #fff;
  color: var(--cg-navy);
  font-size: 0.86rem;
  font-weight: 500;
  text-align: center;
}

.lay-cardguide .cg-chips-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.lay-cardguide .cg-chips-foot small {
  margin-top: 1rem;
  font-size: 0.78rem;
}

/* Process (how it works) */
.lay-cardguide .cg-chapter--process {
  background: linear-gradient(135deg, #f1f7fd, #eaf3fb) !important;
}

.lay-cardguide .cg-process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lay-cardguide .cg-process li {
  position: relative;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.lay-cardguide .cg-process li:not(:last-child)::after {
  position: absolute;
  top: 18px;
  inset-inline-end: -1rem;
  color: var(--cg-accent);
  content: '\203A';
  font-size: 1.6rem;
}

.lay-cardguide .cg-process h3,
.lay-cardguide .cg-cards h3,
.lay-cardguide .cg-timeline h3 {
  margin: 0 0 0.3rem;
  color: var(--cg-navy);
  font-size: 1rem;
  font-weight: 700;
}

.lay-cardguide .cg-process p,
.lay-cardguide .cg-cards p,
.lay-cardguide .cg-timeline p {
  margin: 0 !important;
  font-size: 0.85rem;
}

.lay-cardguide .cg-step-num--solid {
  background: var(--cg-accent);
  color: #fff;
}

/* Icon cards (billing support, helpful information) */
.lay-cardguide .cg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

.lay-cardguide .cg-cards article {
  display: flex;
  gap: 0.85rem;
  padding: 1.1rem;
  border: 1px solid var(--cg-line);
  border-radius: 16px;
  background: #fff;
}

.lay-cardguide .cg-chapter--infocards .cg-cards article {
  flex-direction: column;
}

/* Step cards (four steps) */
.lay-cardguide .cg-chapter--stepcard {
  display: flex;
  flex-direction: column;
}

.lay-cardguide .cg-chapter--stepcard .cg-chapter-head h2 {
  font-size: 1.05rem !important;
}

.lay-cardguide .cg-chapter--stepcard .cg-photo {
  margin-bottom: 0.9rem;
  aspect-ratio: 16 / 10;
}

.lay-cardguide .cg-chapter--stepcard .cg-ticks li {
  font-size: 0.86rem;
}

/* Documents */
.lay-cardguide .cg-docs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1.5rem;
  align-items: start;
}

.lay-cardguide .cg-docs.has-photo {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) 260px;
}

.lay-cardguide .cg-docs .cg-photo {
  margin: -1.6rem 0 -1.6rem -1.75rem;
  border-radius: 20px 0 0 20px;
  aspect-ratio: auto;
  height: calc(100% + 3.2rem);
}

.lay-cardguide .cg-note--box {
  grid-column: auto;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 !important;
}

.lay-cardguide .cg-note--box strong {
  display: block;
  color: var(--cg-navy);
}

/* Timeline (what to expect) */
.lay-cardguide .cg-timeline {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.lay-cardguide .cg-timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.75rem;
  text-align: center;
}

.lay-cardguide .cg-timeline li::before {
  position: absolute;
  top: 32px;
  inset-inline: 0;
  height: 1.5px;
  background: var(--cg-line);
  content: '';
  z-index: 0;
}

.lay-cardguide .cg-timeline li:first-child::before { inset-inline-start: 50%; }
.lay-cardguide .cg-timeline li:last-child::before { inset-inline-end: 50%; }

.lay-cardguide .cg-circle--lg {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border: 1px solid var(--cg-line);
  background: #fff;
  font-size: 1.4rem;
}

/* Amenities (your comfort) */
.lay-cardguide .cg-chapter--amenities {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.lay-cardguide .cg-chapter--amenities .cg-chapter-head {
  margin: 0;
}

.lay-cardguide .cg-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lay-cardguide .cg-amenities li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  border-radius: 14px;
  background: var(--cg-wash);
  color: var(--cg-navy);
  font-size: 0.84rem;
  text-align: center;
}

.lay-cardguide .cg-amenities i {
  color: var(--cg-blue); /* the theme navy (2026-09-30) */
  font-size: 1.4rem;
}

@media (max-width: 1100px) {
  .lay-cardguide .cg-span-3 { grid-column: span 6; }

  .lay-cardguide .cg-docs,
  .lay-cardguide .cg-docs.has-photo,
  .lay-cardguide .cg-chapter--amenities {
    grid-template-columns: minmax(0, 1fr);
  }

  .lay-cardguide .cg-docs .cg-photo {
    margin: 0;
    height: auto;
    border-radius: 16px;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 1024px) {
  .lay-cardguide .cg-steps-wrap.has-note {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .lay-cardguide .cg-span-3,
  .lay-cardguide .cg-span-4,
  .lay-cardguide .cg-span-5,
  .lay-cardguide .cg-span-7,
  .lay-cardguide .cg-span-8,
  .lay-cardguide .cg-span-6 {
    grid-column: 1 / -1;
  }

  .lay-cardguide .cg-with-photo--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .lay-cardguide .cg-timeline {
    grid-auto-flow: row;
    gap: 1.25rem;
  }

  .lay-cardguide .cg-timeline li::before,
  .lay-cardguide .cg-process li::after {
    display: none;
  }

  .lay-cardguide .cg-alertrow li + li {
    padding-inline-start: 0;
    border: 0;
  }

  .lay-cardguide .cg-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .lay-cardguide .cg-bar-label {
    padding: 0 0 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--cg-line);
  }

  .lay-cardguide .cg-highlight + .cg-highlight {
    border-inline-start: 0;
    border-top: 1px solid var(--cg-line);
  }

  .lay-cardguide .cg-highlight {
    padding: 1rem 0;
  }
}

@media (max-width: 640px) {
  .lay-cardguide .cg-with-photo {
    grid-template-columns: minmax(0, 1fr);
  }

  .lay-cardguide .cg-steps {
    grid-auto-flow: row;
    gap: 1rem;
  }

  .lay-cardguide .cg-steps li::before {
    display: none;
  }
}

/* ─── 2026-09-27 additions: visitor information, feedback, rights, records ─ */

/* Highlight cards that jump to their section */
.lay-cardguide .cg-highlight--link {
  position: relative;
  color: inherit;
  text-decoration: none;
}

.lay-cardguide .cg-highlight--link:hover h3 {
  color: var(--cg-accent);
}

.lay-cardguide .cg-highlight-go {
  align-self: center;
  margin-inline-start: auto;
  color: var(--cg-blue);
}

/* Warm (beige) cards */
.lay-cardguide .cg-chapter--warm {
  border-color: #f3e3cc !important;
  background: #fdf8f1 !important;
}

.lay-cardguide .cg-chapter--warm .cg-circle {
  background: #fff;
  color: #b7791f;
}

.lay-cardguide .cg-chapter--warm .cg-tick {
  color: #c08a3e;
}

.lay-cardguide .cg-tick--warm {
  color: #c08a3e;
}

.lay-cardguide .cg-chapter-head[hidden] {
  display: none;
}

/* A heading with its icon: the intro sits under the title, beside the icon */
.lay-cardguide .cg-chapter-title:has(> .cg-circle:first-child) + .cg-chapter-intro {
  padding-inline-start: calc(52px + 1rem);
  margin-top: -0.35rem !important;
}

/* Visiting hours table */
.lay-cardguide .cg-hours {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border: 1px solid var(--cg-line);
  border-radius: 16px;
  background: #fff;
}

.lay-cardguide .cg-hours dl {
  flex: 1;
  margin: 0;
}

.lay-cardguide .cg-hours dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.55rem 0;
}

.lay-cardguide .cg-hours dl > div + div {
  border-top: 1px solid var(--cg-line);
}

.lay-cardguide .cg-hours dt {
  color: var(--cg-navy);
  font-weight: 700;
}

.lay-cardguide .cg-hours dd {
  margin: 0;
  color: var(--cg-text);
}

/* Contact rows (other ways to reach us) */
.lay-cardguide .cg-contacts {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lay-cardguide .cg-contacts li {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: #fff;
}

.lay-cardguide .cg-contacts h3 {
  margin: 0;
  color: var(--cg-navy);
  font-size: 1rem;
  font-weight: 700;
}

.lay-cardguide .cg-contacts a,
.lay-cardguide .cg-contacts b {
  display: block;
  color: var(--cg-blue);
  font-weight: 600;
  text-decoration: none;
}

.lay-cardguide .cg-contacts p {
  margin: 0.15rem 0 0 !important;
  font-size: 0.84rem;
}

/* Feedback form */
.lay-cardguide .cg-form-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.lay-cardguide .cg-form-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--cg-line);
  border-radius: 10px;
  background: #fff;
  color: var(--cg-navy);
  font-weight: 600;
  text-decoration: none;
}

.lay-cardguide .cg-form-tab.is-active {
  border-color: var(--cg-navy);
  background: var(--cg-navy);
  color: #fff;
}

.lay-cardguide .cg-form-body {
  display: grid;
  gap: 0.9rem;
  padding: 1.25rem;
  border: 1px solid var(--cg-line);
  border-radius: 16px;
  background: #fff;
}

.lay-cardguide .cg-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.lay-cardguide .cg-form-body label {
  display: grid;
  gap: 0.35rem;
}

.lay-cardguide .cg-form-body label > span {
  color: var(--cg-navy);
  font-size: 0.88rem;
  font-weight: 600;
}

.lay-cardguide .cg-form-body input,
.lay-cardguide .cg-form-body select,
.lay-cardguide .cg-form-body textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--cg-line);
  border-radius: 10px;
  background: #fff;
  color: var(--cg-navy);
  font: inherit;
  font-size: 0.9rem;
}

.lay-cardguide .cg-form-body input:focus,
.lay-cardguide .cg-form-body select:focus,
.lay-cardguide .cg-form-body textarea:focus {
  border-color: var(--cg-accent);
  outline: 2px solid rgba(28, 151, 212, 0.18);
}

.lay-cardguide .cg-form-submit {
  justify-self: start;
  padding: 0.85rem 1.8rem;
  cursor: pointer;
  font-family: inherit;
}

.lay-cardguide .cg-form-submit:disabled {
  opacity: 0.6;
}

.lay-cardguide .cg-form-note,
.lay-cardguide .cg-form-error {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 !important;
  font-size: 0.82rem;
}

.lay-cardguide .cg-form-error {
  color: #b91c1c;
}

.lay-cardguide .cg-form-done {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: 14px;
  background: var(--cg-wash);
  color: var(--cg-navy);
  font-weight: 600;
}

.lay-cardguide .cg-form-done i {
  color: #16a34a;
  font-size: 1.3rem;
}

/* The red list in a narrow card reads down, not across */
.lay-cardguide .cg-span-5 .cg-alertrow,
.lay-cardguide .cg-span-4 .cg-alertrow,
.lay-cardguide .cg-span-6 .cg-alertrow,
.lay-cardguide .cg-span-7 .cg-alertrow {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}

.lay-cardguide .cg-span-5 .cg-alertrow li + li,
.lay-cardguide .cg-span-4 .cg-alertrow li + li,
.lay-cardguide .cg-span-6 .cg-alertrow li + li,
.lay-cardguide .cg-span-7 .cg-alertrow li + li {
  padding-inline-start: 0;
  border: 0;
}

/* Records: the list of what records include, beside the explanation */
.lay-cardguide .cg-chapter--amenities .cg-amenities-wrap {
  padding: 1.1rem;
  border-radius: 16px;
  background: var(--cg-wash);
}

/* Icon above its label (2026-09-30). */
.lay-cardguide .cg-chapter--amenities .cg-amenities li {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  text-align: center;
}

/* Patient rights rows */
.lay-cardguide .cg-rights {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.lay-cardguide .cg-rights-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--cg-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(11, 47, 91, 0.05);
  scroll-margin-top: calc(var(--mph-stuck-header, 0px) + 24px);
}

.lay-cardguide .cg-rights-lead {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
}

.lay-cardguide .cg-rights-num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cg-navy);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
}

.lay-cardguide .cg-rights-lead h2 {
  margin: 0.35rem 0 0.5rem;
  color: var(--cg-navy);
  font-size: 1.3rem;
  font-weight: 700;
}

.lay-cardguide .cg-rights-lead p {
  margin: 0;
  color: var(--cg-text);
  font-size: 0.92rem;
}

.lay-cardguide .cg-rights-col {
  padding: 1.25rem 1.4rem;
  background: var(--cg-wash);
  font-size: 0.88rem;
}

.lay-cardguide .cg-rights-col--warm {
  background: #fdf8f1;
}

.lay-cardguide .cg-rights-col--wide {
  grid-column: span 2;
}

.lay-cardguide .cg-rights-col h3 {
  margin: 0 0 0.6rem;
  color: var(--cg-navy);
  font-size: 1rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .lay-cardguide .cg-rights-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .lay-cardguide .cg-rights-col--wide {
    grid-column: auto;
  }

  .lay-cardguide .cg-highlight-go {
    display: none;
  }
}

/* Medical records: what the records include, four to a row as in the design */
.guide-medical-records .cg-chapter--amenities .cg-amenities {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .guide-medical-records .cg-chapter--amenities .cg-amenities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══ Who We Are (2026-09-29) ═══════════════════════════════════════════ */
.guide-who-we-are .ww-legacy {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2rem;
}

.guide-who-we-are .ww-legacy h2 {
  margin: 0.3rem 0 1rem;
  color: var(--cg-navy);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
}

.guide-who-we-are .ww-legacy p {
  margin: 0 0 0.9rem;
  color: var(--cg-text);
  line-height: 1.7;
}

.guide-who-we-are .ww-legacy-photo img {
  width: 100%;
  border-radius: 180px 24px 24px 24px;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  box-shadow: 0 20px 50px rgba(11, 47, 91, 0.15);
}

.guide-who-we-are .ww-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--cg-line);
  border-radius: 20px;
  background: #fff;
}

.guide-who-we-are .ww-feature {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 0.25rem 1rem;
  color: var(--cg-navy);
  font-weight: 700;
}

.guide-who-we-are .ww-feature + .ww-feature {
  border-inline-start: 1px solid var(--cg-line);
}

.guide-who-we-are .ww-mission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  padding: 2.5rem;
  border-radius: 22px;
  background: linear-gradient(135deg, #0b2f5b, #004e75);
  color: #fff;
}

.guide-who-we-are .ww-mission-eyebrow {
  color: #9fd3f5;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.guide-who-we-are .ww-mission-lead h2 {
  margin: 0.5rem 0 1rem;
  color: #fff !important;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
}

.guide-who-we-are .ww-mission-lead p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  line-height: 1.6;
}

.guide-who-we-are .ww-mission-list {
  display: grid;
  gap: 1.75rem;
  padding-inline-start: 2.5rem;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
}

.guide-who-we-are .ww-statement {
  display: flex;
  gap: 1.1rem;
}

.guide-who-we-are .ww-statement-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.5rem;
}

.guide-who-we-are .ww-statement h3 {
  margin: 0 0 0.35rem;
  color: #fff !important;
  font-size: 1.15rem;
}

.guide-who-we-are .ww-statement p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.guide-who-we-are .ww-values h2 {
  margin: 0 0 1.25rem;
  color: var(--cg-navy);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
}

.guide-who-we-are .ww-values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  margin-bottom: 2.5rem;
}

.guide-who-we-are .ww-value {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--cg-line);
}

.guide-who-we-are .ww-value h3 {
  margin: 0 0 0.3rem;
  color: var(--cg-blue);
  font-size: 1.05rem;
  font-weight: 700;
}

.guide-who-we-are .ww-value p {
  margin: 0;
  color: var(--cg-text);
  font-size: 0.9rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .guide-who-we-are .ww-legacy,
  .guide-who-we-are .ww-mission,
  .guide-who-we-are .ww-values-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-who-we-are .ww-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0;
  }

  .guide-who-we-are .ww-feature + .ww-feature {
    border: 0;
  }

  .guide-who-we-are .ww-mission-list {
    padding-inline-start: 0;
    border: 0;
  }
}

/* A right with no list (e.g. "Sharing a Concern") reads across the row. */
.lay-cardguide .cg-rights-row--prose {
  grid-template-columns: minmax(0, 1fr);
}

.lay-cardguide .cg-rights-row--prose .cg-rights-lead p {
  max-width: 900px;
  margin-bottom: 0.6rem;
}

.lay-cardguide .cg-rights-col strong {
  color: var(--cg-navy);
}

/* Step cards: the optional photograph across the top of the card. */
.lay-cardguide .cg-chapter--stepcard .cg-photo--top {
  margin: -1.6rem -1.75rem 1.1rem;
  border-radius: 20px 20px 0 0;
  aspect-ratio: 16 / 9;
}

/* Required Documents on the dark theme, white text. */
.lay-cardguide .cg-chapter--documents {
  border-color: transparent !important;
  background: linear-gradient(135deg, #0b2f5b, #004e75) !important;
  color: rgba(255, 255, 255, 0.88);
}

.lay-cardguide .cg-chapter--documents h2,
.lay-cardguide .cg-chapter--documents .cg-ticks li,
.lay-cardguide .cg-chapter--documents p {
  color: #fff !important;
}

.lay-cardguide .cg-chapter--documents .cg-circle {
  background: #fff;
  color: var(--cg-blue);
}

.lay-cardguide .cg-chapter--documents .cg-tick {
  color: #7fc8ee;
}

.lay-cardguide .cg-chapter--documents .cg-note--box {
  background: rgba(255, 255, 255, 0.1);
}

.lay-cardguide .cg-chapter--documents .cg-note--box strong,
.lay-cardguide .cg-chapter--documents .cg-note--box i {
  color: #fff;
}


/* ==========================================================================
   The hospital's second reference designs (2026-10-01): Admission &
   Discharge and Plan Your Visit, in the site's own colours and type.
   ========================================================================== */

/* "On this page" with each chapter's icon instead of a number. */
.lay-cardguide .cg-bar-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cg-wash);
  color: var(--cg-blue);
  font-size: 0.85rem;
}

/* The dark card: theme gradient, white text, white icon discs. */
.lay-cardguide .cg-chapter--dark {
  position: relative;
  overflow: hidden;
  border-color: transparent !important;
  background: linear-gradient(135deg, #0b2f5b, #004e75) !important;
  color: #fff;
}

.lay-cardguide .cg-chapter--dark :is(h2, h3, p, li, b, .cg-step-text, .cg-lede) {
  color: #fff !important;
}

.lay-cardguide .cg-chapter--dark .cg-num {
  background: rgba(255, 255, 255, 0.14);
  color: #fff !important;
}

.lay-cardguide .cg-chapter--dark .cg-circle {
  background: #fff;
  color: var(--cg-blue);
}

.lay-cardguide .cg-chapter--dark .cg-circle i {
  color: var(--cg-blue) !important;
}

.lay-cardguide .cg-chapter--dark .cg-icon-rows li + li {
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* The chapter's own icon, large and faint in the corner. */
.lay-cardguide .cg-corner-icon {
  position: absolute;
  top: 1.35rem;
  inset-inline-end: 1.75rem;
  color: rgba(255, 255, 255, 0.3);
  font-size: 2.6rem;
  pointer-events: none;
}

/* Steps on the dark band: white numbers, a light line, the note across the foot. */
.lay-cardguide .cg-chapter--dark .cg-steps li::before {
  background: rgba(255, 255, 255, 0.35);
}

.lay-cardguide .cg-chapter--dark .cg-step-num {
  background: #fff;
  color: var(--cg-blue) !important;
}

.lay-cardguide .cg-chapter--dark .cg-steps-wrap.has-note {
  grid-template-columns: minmax(0, 1fr);
}

.lay-cardguide .cg-chapter--dark .cg-steps-wrap .cg-note {
  margin-top: 1.5rem !important;
}

.lay-cardguide .cg-chapter--dark .cg-note {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
}

.lay-cardguide .cg-chapter--dark .cg-note i {
  color: #fff;
  font-size: 1.25rem;
}

/* Doctor's Rounds: the photograph under the text, across the card's foot. */
.lay-cardguide.guide-admission-discharge .cg-chapter--lead .cg-with-photo {
  grid-template-columns: minmax(0, 1fr);
}

.lay-cardguide.guide-admission-discharge .cg-chapter--lead .cg-photo {
  margin: 0.5rem -1.75rem -1.6rem;
  border-radius: 0 0 20px 20px;
  aspect-ratio: 16 / 7;
}

/* The "Important" box: its heading on one line with the icon, text under it. */
.lay-cardguide .cg-note--box {
  padding: 1.25rem 1.35rem;
  border-radius: 16px;
}

.lay-cardguide .cg-note--box strong {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
}

.lay-cardguide .cg-note--box strong i {
  margin: 0;
  font-size: 1.3rem;
}

.lay-cardguide .cg-note--box p {
  margin: 0 !important;
  line-height: 1.6;
}

/* Contact Information: hours, the hospital's photograph over its address,
   and the numbers - three cards. */
.lay-cardguide.guide-plan-your-visit .ge-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lay-cardguide.guide-plan-your-visit .ge-panel--place {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.lay-cardguide.guide-plan-your-visit .ge-panel--place dl {
  margin: 0;
  padding: 1.15rem 1.35rem 1.3rem;
}

.lay-cardguide.guide-plan-your-visit .ge-place-photo {
  aspect-ratio: 16 / 9;
}

.lay-cardguide.guide-plan-your-visit .ge-place-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lay-cardguide.guide-plan-your-visit .ge-panel--facts {
  align-content: center;
  gap: 0;
}

.lay-cardguide.guide-plan-your-visit .ge-panel--facts .ge-fact {
  padding: 0.95rem 0;
}

.lay-cardguide.guide-plan-your-visit .ge-panel--facts .ge-fact + .ge-fact {
  border-top: 1px solid var(--cg-line);
}

.lay-cardguide.guide-plan-your-visit .ge-link i {
  margin-inline-start: 6px;
  font-size: 0.75em;
}

@media (max-width: 1100px) {
  .lay-cardguide.guide-plan-your-visit .ge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lay-cardguide.guide-plan-your-visit .ge-panel--hours {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .lay-cardguide.guide-plan-your-visit .ge-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* What to Expect: a dotted line between the steps. */
.lay-cardguide.guide-plan-your-visit .cg-timeline li::before {
  height: 0;
  border-top: 2px dotted #9cc9e6;
  background: none;
}

/* Your Comfort Matters: solid theme tiles, white icon and label. */
.lay-cardguide.guide-plan-your-visit .cg-chapter--amenities .cg-amenities-wrap {
  padding: 0;
  background: transparent;
}

.lay-cardguide.guide-plan-your-visit .cg-chapter--amenities .cg-amenities li {
  justify-content: center;
  min-height: 104px;
  padding: 1.1rem 0.6rem;
  background: linear-gradient(160deg, #004e75, #0b2f5b);
  box-shadow: 0 10px 22px rgba(0, 78, 117, 0.18);
  color: #fff;
  font-weight: 600;
}

.lay-cardguide.guide-plan-your-visit .cg-chapter--amenities .cg-amenities i {
  color: #fff;
  font-size: 1.6rem;
}

/* Helpful Information: the icon beside each card's text. */
.lay-cardguide.guide-plan-your-visit .cg-chapter--infocards .cg-cards article {
  flex-direction: row;
  align-items: flex-start;
}

/* Checklists on the dark card: white ticks, a hairline between the rows. */
.lay-cardguide .cg-chapter--dark .cg-ticks li {
  margin: 0;
  padding: 0.7rem 0;
}

.lay-cardguide .cg-chapter--dark .cg-ticks li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.lay-cardguide .cg-chapter--dark .cg-tick {
  color: #fff;
}

/* Numbered process on the dark band (records request, how it works). */
.lay-cardguide .cg-chapter--dark .cg-process li:not(:last-child)::after {
  color: rgba(255, 255, 255, 0.7);
}

/* The red card (Arrival and Triage): emergency red, white discs, red icons. */
.lay-cardguide .cg-chapter--red {
  background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
}

.lay-cardguide .cg-chapter--red .cg-num {
  background: #fff;
  color: #dc2626 !important;
}

.lay-cardguide .cg-chapter--red .cg-circle i {
  color: #dc2626 !important;
}

.lay-cardguide .cg-chapter--red .cg-icon-rows li + li {
  border-top: 1px dashed rgba(255, 255, 255, 0.35);
}

.lay-cardguide .cg-chapter--red .cg-alert {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(127, 29, 29, 0.35);
  color: #fff;
}

.lay-cardguide .cg-chapter--red .cg-alert > i {
  color: #fff;
}

/* "Important Information": a solid red card, white type and ticks. */
.lay-cardguide .cg-chapter--alertrow {
  border-color: transparent !important;
  background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
}

.lay-cardguide .cg-chapter--alertrow :is(h2, li, span) {
  color: #fff !important;
}

.lay-cardguide .cg-chapter--alertrow .cg-alert-icon,
.lay-cardguide .cg-chapter--alertrow .cg-tick--red {
  color: #fff;
}

.lay-cardguide .cg-chapter--alertrow .cg-alertrow li + li {
  border-color: rgba(255, 255, 255, 0.3);
}

.lay-cardguide :is(.cg-span-4, .cg-span-5, .cg-span-6, .cg-span-7) .cg-alertrow li + li {
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.35);
}

/* Emergency Care's highlight strip in the emergency red. */
.lay-cardguide.guide-emergency-care .cg-highlights {
  border-color: #f5c2c7;
  background: linear-gradient(180deg, #ffffff, #fff6f6);
}

.lay-cardguide.guide-emergency-care .cg-highlight + .cg-highlight {
  border-color: #f5c2c7;
}

.lay-cardguide.guide-emergency-care .cg-highlight .cg-circle {
  background: #fdecee;
  color: #dc2626;
}

.lay-cardguide.guide-emergency-care .cg-highlight :is(.cg-highlight-badge, h3) {
  color: #c81e1e;
}

/* Ticks on the dark cards: a white disc with the check in the theme blue. */
.lay-cardguide .cg-chapter--dark .cg-tick {
  border-radius: 50%;
  background: radial-gradient(circle, var(--cg-blue) 0 42%, transparent 44%);
  color: #fff;
  font-size: 1.3rem;
  margin-top: 0;
}

.lay-cardguide .cg-chapter--dark .cg-ticks li {
  align-items: center;
  gap: 0.85rem;
}

/*
 * Numbered steps on the dark band, as the design draws them: the number,
 * then the step's icon on a line that runs to the arrow, and the title and
 * text under the icon (2026-10-01).
 */
.lay-cardguide .cg-chapter--dark .cg-process {
  gap: 1.75rem 1.25rem;
  margin-top: 0.75rem;
}

.lay-cardguide .cg-chapter--dark .cg-process li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.75rem;
  align-items: center;
  /* Every step's text starts at the same height, however long the others. */
  align-content: start;
  padding-inline-end: 1.5rem;
}

.lay-cardguide .cg-chapter--dark .cg-process li:last-child {
  padding-inline-end: 0;
}

.lay-cardguide .cg-chapter--dark .cg-process .cg-step-num {
  grid-column: 1;
  grid-row: 1;
  width: 32px;
  height: 32px;
}

.lay-cardguide .cg-chapter--dark .cg-process .cg-circle {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: flex-start;
  gap: 0.75rem;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 1.3rem;
}

.lay-cardguide .cg-chapter--dark .cg-process .cg-circle i {
  color: #fff !important;
}

/* The line from the icon to the arrow. */
.lay-cardguide .cg-chapter--dark .cg-process .cg-circle::after {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  content: '';
}

.lay-cardguide .cg-chapter--dark .cg-process li > div {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

.lay-cardguide .cg-chapter--dark .cg-process h3 {
  margin-bottom: 0.4rem;
  font-size: 18px;
}

.lay-cardguide .cg-chapter--dark .cg-process li:not(:last-child)::after {
  top: 0;
  inset-inline-end: 0.2rem;
  line-height: 32px;
}

.lay-cardguide .cg-chapter--dark .cg-process li:last-child .cg-circle::after {
  display: none;
}

/* ==========================================================================
   Patient Rights as numbered cards (2026-10-02).
   ========================================================================== */
.lay-cardguide .cg-rights {
  gap: 1.5rem;
}

.lay-cardguide .cg-rcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--cg-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(11, 47, 91, 0.05);
  scroll-margin-top: calc(var(--mph-stuck-header, 0px) + 24px);
}

.lay-cardguide .cg-rcard.has-photo {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.lay-cardguide .cg-rcard-main {
  padding: 1.75rem 2rem;
}

.lay-cardguide .cg-rcard-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.lay-cardguide .cg-rcard .cg-rights-num {
  width: 52px;
  height: 52px;
  background: var(--cg-wash);
  color: var(--cg-blue);
  font-size: 1.5rem;
}

.lay-cardguide .cg-rcard-head h2 {
  margin: 0;
  color: var(--cg-blue);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 700;
}

.lay-cardguide .cg-rcard-body {
  padding-inline-start: calc(52px + 1rem);
}

.lay-cardguide .cg-rcard-body p {
  margin: 0 0 0.75rem;
  font-size: 16px;
  line-height: 1.6;
}

.lay-cardguide .cg-rcard-lede {
  font-weight: 500;
  font-size: 17px !important;
}

.lay-cardguide .cg-rcard .cg-ticks li {
  margin-bottom: 0.65rem;
  font-size: 16px;
  line-height: 1.55;
}

.lay-cardguide .cg-rcard .cg-ticks strong {
  color: var(--cg-blue);
}

.lay-cardguide .cg-rcard-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.lay-cardguide .cg-rcard .cg-note {
  margin-top: 1rem !important;
}

.lay-cardguide .cg-rcard .cg-note i {
  font-size: 1.3rem;
}

.lay-cardguide .cg-rcard-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The responsibilities card on the dark theme. */
.lay-cardguide .cg-rcard--dark {
  border-color: transparent;
  background: linear-gradient(135deg, #0b2f5b, #004e75);
}

.lay-cardguide .cg-rcard--dark :is(h2, p, li, strong) {
  color: #fff !important;
}

.lay-cardguide .cg-rcard--dark .cg-rights-num {
  background: #fff;
}

.lay-cardguide .cg-rcard--dark .cg-ticks li {
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  padding: 0.55rem 0;
}

.lay-cardguide .cg-rcard--dark .cg-tick {
  border-radius: 50%;
  background: radial-gradient(circle, var(--cg-blue) 0 42%, transparent 44%);
  color: #fff;
  font-size: 1.3rem;
  margin-top: 0;
}

.lay-cardguide .cg-rcard--dark .cg-corner-icon {
  top: 50%;
  inset-inline-end: 3rem;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.08);
  font-size: 9rem;
}

@media (max-width: 860px) {
  .lay-cardguide .cg-rcard.has-photo,
  .lay-cardguide .cg-rcard-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .lay-cardguide .cg-rcard-main {
    padding: 1.4rem 1.25rem;
  }

  .lay-cardguide .cg-rcard-body {
    padding-inline-start: 0;
  }

  .lay-cardguide .cg-rcard-photo {
    aspect-ratio: 16 / 9;
  }
}

/* Patient Relations: one card, text on the left and its button on the right. */
.lay-cardguide.guide-patient-rights .lay-sb-band {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.lay-cardguide.guide-patient-rights .lay-sb-band .guide-sb-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 2rem;
  align-items: center;
  padding: 1.5rem 2rem;
}

.lay-cardguide.guide-patient-rights .lay-sb-band .guide-sb-card > :not(.guide-sb-btn) {
  grid-column: 1;
}

.lay-cardguide.guide-patient-rights .lay-sb-band .guide-sb-btn {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: auto;
  margin: 0;
  padding-inline: 1.75rem;
}

@media (max-width: 700px) {
  .lay-cardguide.guide-patient-rights .lay-sb-band .guide-sb-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .lay-cardguide.guide-patient-rights .lay-sb-band .guide-sb-btn {
    grid-column: 1;
    grid-row: auto;
    margin-top: 1rem;
  }
}

.lay-cardguide.guide-patient-rights .lay-sb-band .guide-sb-badge {
  justify-self: start;
}

/* ==========================================================================
   FAQ band on the general pages, as on the department pages (2026-10-02):
   full-width light band, centred heading, 800px accordion.
   ========================================================================== */
:where(.mph-page-guide) .guide-faq-band {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 3.5rem 1.5rem;
  border-radius: 20px;
  background-color: var(--bg-light, #f4f8fb);
}

/* Full width where the page gives it the full width. */
:where(.mph-page-guide) .guide-faq-band.lay-wide {
  margin-inline: calc(50% - 50vw);
  padding: 5rem 1rem;
  border-radius: 0;
}

:where(.mph-page-guide) .guide-faq-inner {
  max-width: 800px;
  margin-inline: auto;
}

:where(.mph-page-guide) .guide-faq-head {
  margin-bottom: 2rem;
  text-align: center;
}

:where(.mph-page-guide) .guide-faq-head .section-badge {
  margin-bottom: 8px;
}

:where(.mph-page-guide) .guide-faq-head .section-title {
  margin-bottom: 0;
}