/* ==========================================================================
   Interior pages — shared by Services, About, Careers, Contact and the
   legal pages. Anything used on more than one of them lives here.
   ========================================================================== */

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

.page-hero {
  padding-block: clamp(var(--sp-10), 5vw, var(--sp-16)) clamp(var(--sp-8), 4vw, var(--sp-12));
  background:
    radial-gradient(70% 80% at 88% 0%, var(--teal-050) 0%, transparent 62%),
    radial-gradient(60% 70% at 0% 100%, var(--gold-100) 0%, transparent 60%),
    var(--bg);
}
.page-hero h1 { max-width: 26ch; }
.page-hero__lead {
  margin-top: var(--sp-6);
  max-width: 58ch;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.crumbs { margin-bottom: var(--sp-6); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-subtle);
}
.crumbs li { margin: 0; }
.crumbs li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--ink-300);
}
.crumbs a { color: var(--teal-700); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Sticky in-page navigation
   Offset below the sticky site header so the two never overlap.
   -------------------------------------------------------------------------- */

.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: rgba(253, 249, 242, 0.94);
  backdrop-filter: blur(10px);
  border-block: 1px solid var(--border);
}

.subnav__inner {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subnav__inner::-webkit-scrollbar { display: none; }

.subnav a {
  flex: none;
  padding: var(--sp-4) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 650;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-600);
  border-bottom: 3px solid transparent;
}
.subnav a:hover {
  color: var(--navy-800);
  border-bottom-color: var(--gold-500);
}

/* --------------------------------------------------------------------------
   Note card
   -------------------------------------------------------------------------- */

.note-card {
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
  background: var(--navy-050);
  border: 1px solid var(--navy-100);
  border-radius: var(--r-lg);
}
.note-card h3 { margin-bottom: var(--sp-4); font-size: var(--fs-lg); }
.note-card ul { margin: 0; padding-left: 1.15em; }
.note-card li { font-size: var(--fs-sm); color: var(--text-muted); }
.note-card p { font-size: var(--fs-sm); color: var(--text-muted); }

/* Used where the content is a caveat rather than a highlight. */
.note-card--plain {
  background: var(--cream-200);
  border-color: var(--cream-300);
  border-left: 4px solid var(--gold-500);
}

/* --------------------------------------------------------------------------
   Numbered steps
   -------------------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-6);
  counter-reset: step;
}
@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
}
@media (min-width: 68rem) {
  .steps--4 { grid-template-columns: repeat(4, 1fr); }
}

.steps li {
  margin: 0;
  padding: var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.steps__n {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--sp-5);
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 650;
}
.steps h3 { margin-bottom: var(--sp-3); font-size: var(--fs-lg); }
.steps p { font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Fine print
   -------------------------------------------------------------------------- */

.fine-print {
  display: flex;
  gap: var(--sp-3);
  max-width: 74ch;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}
.fine-print svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.15em;
  color: var(--teal-600);
}

/* --------------------------------------------------------------------------
   Shared CTA band layout
   -------------------------------------------------------------------------- */

.cta-split {
  display: grid;
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: center;
}
@media (min-width: 58rem) {
  .cta-split { grid-template-columns: 1.2fr 0.8fr; }
}

.cta-actions { display: grid; gap: var(--sp-4); justify-items: stretch; }
.cta-actions__note {
  font-size: var(--fs-xs);
  color: var(--text-invert-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Long-form prose — the legal pages
   -------------------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose h2 {
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-2xl);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
}
.prose p, .prose ul, .prose ol { margin-bottom: var(--sp-4); }
.prose li { color: var(--text-muted); }
.prose a { font-weight: 600; }

.updated {
  display: inline-block;
  margin-bottom: var(--sp-8);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--cream-200);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: clamp(var(--sp-8), 5vw, var(--sp-12));
}
/* Grid items default to min-width:auto, so one unbreakable string inside a
   column can push the whole track wider than the viewport. */
.contact-grid > * { min-width: 0; }

@media (min-width: 62rem) {
  .contact-grid { grid-template-columns: 1fr 1.1fr; align-items: start; }
}

.contact-methods {
  list-style: none;
  margin: 0 0 var(--sp-8);
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.contact-methods li { margin: 0; }

.contact-method {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease-out);
}
.contact-method:hover {
  transform: translateY(-2px);
  border-color: var(--teal-100);
  box-shadow: var(--shadow-md);
  color: var(--text);
}
.contact-method__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-700);
}
.contact-method__icon svg { width: 1.4rem; height: 1.4rem; }
.contact-method span { display: block; }
/* Lets the text column shrink instead of forcing the row wider. */
.contact-method > span:last-child { min-width: 0; }
.contact-method__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.contact-method__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--navy-800);
  /* An email address has no natural break point, so on a narrow phone it must
     be allowed to break anywhere rather than push the layout sideways. */
  overflow-wrap: anywhere;
}

.map-frame {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--cream-200);
  aspect-ratio: 16 / 10;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.map-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--sp-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}

.areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
}
.areas li { margin: 0; }
.areas span {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-700);
}

/* Highlighted band for hospital discharge planners, who are a distinct and
   time-pressured audience. */
.pro-band {
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  background: var(--navy-050);
  border: 1px solid var(--navy-100);
  border-left: 4px solid var(--teal-600);
  border-radius: var(--r-lg);
}
.pro-band h2 { font-size: var(--fs-2xl); }

/* --------------------------------------------------------------------------
   Careers page
   -------------------------------------------------------------------------- */

.role {
  display: grid;
  gap: var(--sp-4);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 48rem) {
  .role { grid-template-columns: 1fr auto; align-items: center; }
}
.role h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.role p { font-size: var(--fs-sm); color: var(--text-muted); }
.role__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--teal-700);
}
.role__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.role__meta svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
}

.form-card {
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

.licence-panel {
  display: grid;
  gap: var(--sp-6);
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 48rem) {
  .licence-panel { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 68rem) {
  .licence-panel { grid-template-columns: repeat(4, 1fr); }
}

.licence-item__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.licence-item__value {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--navy-800);
}

.menu-day {
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.menu-day h3 {
  margin-bottom: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--teal-700);
}
.menu-day dl { margin: 0; font-size: var(--fs-sm); }
.menu-day dt {
  font-weight: 650;
  color: var(--navy-800);
}
.menu-day dd {
  margin: 0 0 var(--sp-3);
  color: var(--text-muted);
}
.menu-day dd:last-child { margin-bottom: 0; }

/* ==========================================================================
   Payment page
   The Stripe Buy Button renders inside a Stripe-hosted iframe, so almost none
   of it is ours to style — the card around it does the work of making a
   third-party widget look like it belongs to this site.
   ========================================================================== */

.pay-card {
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--bg-raised);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.pay-card__title {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xl);
}

.pay-card__note {
  margin: var(--sp-4) auto 0;
  max-width: 34rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Minimum height reserves the space the button will occupy, so the page does
   not jump when the Stripe script finishes loading. */
.pay-card__button {
  display: flex;
  justify-content: center;
  min-height: 5rem;
  margin-top: var(--sp-8);
}
.pay-card__button > stripe-buy-button { width: 100%; max-width: 30rem; }

.pay-assure {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-10) 0 0;
  padding: var(--sp-6) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  text-align: left;
}
@media (min-width: 48rem) {
  .pay-assure { grid-template-columns: repeat(3, 1fr); }
}
.pay-assure li {
  display: flex;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-muted);
}
.pay-assure svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1em;
  color: var(--teal-700);
}