/* =====================================================================
   Obesity Health Centre — components
   ---------------------------------------------------------------------
   Built on the logo's own alphabet: a circle, two half-discs meeting
   curve to curve (the "bowtie"), and a trailing half-disc.

   Three rules run through everything below, all inherited from the
   brand sheet's five-colour palette (see theme.css):

     · Corners are either fully round or perfectly square. The logo has
       no soft middle radius, so neither does the interface.
     · Depth is a flat offset block of colour, never a blur.
     · Text never sits on a photograph — a solid panel sits beside it.
   ===================================================================== */

/* ================= Header / Nav ================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid (not translucent+blurred) on purpose: backdrop-filter on an
     ancestor creates a new containing block for position:fixed
     descendants, which breaks the full-viewport mobile nav panel nested
     inside. The palette has no translucent value in any case. */
  background: var(--ohc-white);
  border-bottom: var(--rule);
}

/* The header needs more room than the standard content container —
   8 top-level nav items + logo + CTA don't fit 1240px. */
.site-header .container { max-width: 1600px; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: var(--header-h);
}

.nav-brand {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.nav-brand img { height: 42px; width: auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: var(--rule-strong);
  border-radius: var(--radius-pill);
  background: var(--ohc-white);
  color: var(--ohc-dark);
  cursor: pointer;
  flex: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--ohc-dark); color: var(--ohc-white); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] { background: var(--ohc-dark); color: var(--ohc-white); }

.nav-panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--ohc-white);
  overflow-y: auto;
  padding: var(--space-4) var(--container-pad) var(--space-7);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.nav-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nav-list > li { border-bottom: var(--rule); }

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--ohc-black);
  text-decoration: none;
  font-size: 1.0625rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] { color: var(--ohc-dark); }

.nav-sublist {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0 0 0 var(--space-3);
  border-left: 3px solid var(--ohc-medium);
  display: none;
}
.nav-sublist.is-open { display: block; }
.nav-sublist a {
  display: block;
  padding: var(--space-2) var(--space-1);
  color: var(--ohc-black);
  text-decoration: none;
  font-size: 0.95rem;
}
.nav-sublist a:hover { color: var(--ohc-dark); }

.nav-caret {
  width: 18px; height: 18px; flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-has-children[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav .nav-cta { display: none; }

/* Mobile-drawer-only CTA. Must be hidden at desktop, where .nav-panel
   becomes permanently visible/inline — otherwise it renders as a stray
   extra button inside the horizontal nav row. */
.nav-panel .nav-panel-cta { display: flex; }

/* Desktop nav breakpoint is deliberately much higher than the site's usual
   1024px. Measured at these type settings, the row needs:
     brand 184px + 8 nav items 1004px + CTA 157px + padding/gaps 64px
     = 1409px
   so the horizontal nav is only switched on once there is genuinely room
   for it. Below this the drawer is used, even on a 1366px laptop — a
   cramped, wrapping nav bar is worse than a clean drawer.

   If this breakpoint is ever lowered, re-measure first: eight top-level
   items is already more than the width comfortably allows. */
@media (min-width: 1440px) {
  .nav-toggle { display: none; }

  .nav-panel {
    position: static;
    inset: auto;
    background: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;
    flex: 1;
    min-width: 0;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: nowrap;
  }
  .nav-list > li { border-bottom: none; position: relative; }

  /* Uppercase echoes the wordmark, but at the wordmark's own tracking the
     eight items ran 110px wider than the row can hold — so the tracking is
     dialled back here and kept open only on eyebrows and small labels. */
  .nav-link {
    padding: var(--space-1) 0.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Current page is marked with the logo's circle, not a colour change
     alone — colour is never the only signal. */
  .nav-list > li > .nav-link[aria-current="page"] { position: relative; }
  .nav-list > li > .nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: var(--radius-pill);
    background: var(--ohc-dark);
  }

  .nav-sublist {
    display: block;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 230px;
    background: var(--ohc-white);
    border: var(--rule-strong);
    border-radius: var(--radius-none);
    padding: var(--space-2);
    border-left-width: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  }
  .nav-has-children:hover .nav-sublist,
  .nav-has-children:focus-within .nav-sublist,
  .nav-sublist.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-sublist a:hover { background: var(--ohc-light); }
  .nav-caret { display: none; }

  .nav .nav-cta { display: inline-flex; flex: none; }
  .nav-panel .nav-panel-cta { display: none; }
}

/* ================= Buttons ================= */
/* Pill-shaped, echoing the mark's circle. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem;
  letter-spacing: var(--track-tight);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

/* With no shadow to deepen on hover, states move between brand colours. */
.btn-primary {
  background: var(--ohc-dark);
  border-color: var(--ohc-dark);
  color: var(--ohc-white);
}
.btn-primary:hover {
  background: var(--ohc-black);
  border-color: var(--ohc-black);
  color: var(--ohc-white);
}

/* Light Blue fill with a Dark Blue edge. The edge is not decoration: on a
   .section-alt band the fill is the same colour as the background, and
   without the border the button would vanish into it. */
.btn-accent {
  background: var(--ohc-light);
  border-color: var(--ohc-dark);
  color: var(--ohc-dark);
}
.btn-accent:hover {
  background: var(--ohc-dark);
  border-color: var(--ohc-dark);
  color: var(--ohc-white);
}

.btn-secondary {
  background: transparent;
  color: var(--ohc-dark);
  border-color: var(--ohc-dark);
}
.btn-secondary:hover {
  background: var(--ohc-dark);
  color: var(--ohc-white);
}

.btn-ghost {
  background: transparent;
  color: var(--ohc-dark);
  padding-inline: 0.6rem;
  border-color: transparent;
}
.btn-ghost:hover { color: var(--ohc-black); }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  cursor: not-allowed;
}

.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Reversed sections: the dark-on-white pairings invert. */
.section-dark .btn-primary,
.split__panel .btn-primary {
  background: var(--ohc-white);
  border-color: var(--ohc-white);
  color: var(--ohc-dark);
}
.section-dark .btn-primary:hover,
.split__panel .btn-primary:hover {
  background: var(--ohc-light);
  border-color: var(--ohc-light);
  color: var(--ohc-dark);
}
.section-dark .btn-secondary,
.split__panel .btn-secondary {
  color: var(--ohc-white);
  border-color: var(--ohc-white);
}
.section-dark .btn-secondary:hover,
.split__panel .btn-secondary:hover {
  background: var(--ohc-white);
  color: var(--ohc-dark);
}
.section-dark .btn-ghost,
.split__panel .btn-ghost { color: var(--ohc-light); }
.section-dark .btn-ghost:hover,
.split__panel .btn-ghost:hover { color: var(--ohc-white); }

/* On a Dark Blue field the accent button's Dark Blue edge would disappear,
   so it takes the fill colour as its border instead. */
.section-dark .btn-accent,
.split__panel .btn-accent { border-color: var(--ohc-light); }
.section-dark .btn-accent:hover,
.split__panel .btn-accent:hover {
  background: var(--ohc-white);
  border-color: var(--ohc-white);
  color: var(--ohc-dark);
}

/* ================= Sections ================= */

.section {
  padding-block: var(--section-pad-y);
  position: relative;
}
.section-tight { padding-block: var(--space-6); }

.section-alt { background: var(--ohc-light); }

.section-dark {
  background: var(--ohc-dark);
  color: var(--ohc-white);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: var(--ohc-white); }
.section-dark .lead { color: var(--ohc-light); }
/* :not(.btn) matters — a bare `.section-dark a` rule (0,2,0) outranks
   .btn-accent's own colour (0,1,0) and paints the button's label Light Blue
   on its Light Blue fill. Same trap as .site-footer a below. */
.section-dark a:not(.btn) { color: var(--ohc-light); }
.section-dark a:not(.btn):hover { color: var(--ohc-white); }

/* Eyebrows reverse automatically inside a dark band. Without this the label
   inherits Dark Blue and disappears into the Dark Blue background — relying
   on authors to remember .eyebrow--on-dark every time is how that happens. */
.section-dark .eyebrow { color: var(--ohc-light); }
.section-dark .eyebrow::before { background: var(--ohc-white); }
.section-dark .eyebrow::after { background: var(--ohc-light); }

/* Medium Blue panel. Body copy on Medium Blue is Black (7.2:1); headings
   are Dark Blue and must stay at h2 size or larger (4.1:1 = AA large
   text only). Used sparingly, for a single band of emphasis. */
.section-mid {
  background: var(--ohc-medium);
  color: var(--ohc-black);
}
.section-mid h2,
.section-mid h3 { color: var(--ohc-dark); }

.section-head {
  max-width: 48rem;
  margin-bottom: var(--space-6);
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

.section-head h2 {
  font-size: var(--text-h1);
  letter-spacing: var(--track-tight);
}
.section-head .eyebrow + h2 { margin-top: var(--space-3); }
.section-head h2 + .lead { margin-top: var(--space-3); }

.lead {
  font-size: var(--text-lead);
  line-height: var(--lh-relaxed);
  max-width: var(--measure);
}
.section-head.center .lead { margin-inline: auto; }

/* ---------- The bowtie: a section divider drawn from the mark ----------
   Two half-discs meeting curve to curve, exactly as in the logo. Used to
   punctuate the page between major movements. */

.bowtie {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding-block: var(--space-6);
}
.bowtie::before,
.bowtie::after {
  content: "";
  display: block;
  width: 13px;
  height: 26px;
  background: var(--ohc-medium);
}
.bowtie::before { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.bowtie::after  { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.section-dark .bowtie::before,
.section-dark .bowtie::after { background: var(--ohc-light); }

/* ================= Page hero ================= */

.page-hero {
  padding-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  padding-bottom: var(--section-pad-y);
}
.page-hero .eyebrow { margin-bottom: var(--space-3); }
.page-hero h1 {
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tighter);
  max-width: 18ch;
}
.page-hero .lead {
  color: var(--ohc-black);
  margin-top: var(--space-4);
}
.page-hero .lead + .lead { margin-top: var(--space-3); }

.hero-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid.with-media { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); }
}

.hero-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ohc-light);
  position: relative;
}

/* ---------- Split panel ----------
   The replacement for text-over-photograph. A solid brand panel sits
   beside a full-height image, so contrast is guaranteed by construction
   rather than by an overlay the palette does not contain. */

.split {
  display: grid;
  grid-template-columns: 1fr;
}
.split__panel {
  background: var(--ohc-dark);
  color: var(--ohc-white);
  padding: clamp(2rem, 1.4rem + 3vw, 4.5rem) var(--container-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split__panel > * { max-width: 34rem; }
.split__panel h2 {
  color: var(--ohc-white);
  font-size: var(--text-h1);
}
.split__panel .lead {
  color: var(--ohc-light);
  margin-top: var(--space-3);
}
.split__panel .btn-row { margin-top: var(--space-5); }

.split__media { position: relative; min-height: 260px; }
.split__media img,
.split__media picture { width: 100%; height: 100%; object-fit: cover; }
.split__media .media { height: 100%; aspect-ratio: auto; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split__media { min-height: 460px; }
  /* Panel copy aligns to the page container edge, not the panel edge, so
     the text still lines up with the rest of the page. */
  .split__panel { padding-inline: clamp(2rem, 5vw, 5rem); }
  .split--media-first .split__media { order: -1; }
}

/* A light variant, for when a full dark band would be too heavy. */
.split--light .split__panel {
  background: var(--ohc-light);
  color: var(--ohc-black);
}
.split--light .split__panel h2 { color: var(--ohc-dark); }
.split--light .split__panel .lead { color: var(--ohc-black); }
.split--light .split__panel .btn-primary {
  background: var(--ohc-dark);
  border-color: var(--ohc-dark);
  color: var(--ohc-white);
}
.split--light .split__panel .btn-primary:hover {
  background: var(--ohc-black);
  border-color: var(--ohc-black);
}
.split--light .split__panel .btn-secondary {
  color: var(--ohc-dark);
  border-color: var(--ohc-dark);
}
.split--light .split__panel .btn-secondary:hover {
  background: var(--ohc-dark);
  color: var(--ohc-white);
}

/* ================= Numbered phase label ================= */

.phase-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-text-quiet);
}
/* The number sits inside the logo's circle. */
.phase-label .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--ohc-dark);
  color: var(--ohc-white);
  font-size: 0.8125rem;
  letter-spacing: var(--track-normal);
}
.section-dark .phase-label { color: var(--ohc-light); }
.section-dark .phase-label .num {
  background: var(--ohc-white);
  color: var(--ohc-dark);
}

/* ================= Cards ================= */

.card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--ohc-white);
  border: var(--rule);
  border-radius: var(--radius-none);
  padding: var(--space-5) var(--space-4);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover {
  background: var(--ohc-light);
  border-color: var(--ohc-dark);
}

.section-alt .card { border-color: var(--ohc-medium); }
.section-alt a.card:hover { background: var(--ohc-white); }

/* The icon plate is the logo's circle. */
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--ohc-light);
  color: var(--ohc-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  flex: none;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.card-icon svg { width: 26px; height: 26px; }
a.card:hover .card-icon,
.journey-card:hover .card-icon {
  background: var(--ohc-dark);
  color: var(--ohc-white);
}
.section-alt .card-icon { background: var(--ohc-medium); }

.card h3 { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.card p { font-size: var(--text-small); line-height: var(--lh-normal); }

.card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--ohc-dark);
}
.card-arrow svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
a.card:hover .card-arrow svg,
.journey-card:hover .card-arrow svg { transform: translateX(4px); }

/* ---------- Offset-block card ----------
   Flat depth: a solid brand-colour block sits behind and below the card
   instead of a blurred shadow. */
.card--block {
  position: relative;
  isolation: isolate;
}
.card--block::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--space-3) calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-3);
  background: var(--ohc-light);
}
.section-alt .card--block::before { background: var(--ohc-medium); }

/* ================= Journey selector ================= */

.journey-card {
  display: block;
  background: var(--ohc-white);
  border: var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.journey-card:hover {
  background: var(--ohc-light);
  border-color: var(--ohc-dark);
}
.journey-card .card-body { padding: var(--space-4); }
.journey-card h3 { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.journey-card p { font-size: var(--text-small); line-height: var(--lh-normal); }

/* ================= The continuum ================= */
/* A single line connecting the phases of care, terminated by the logo's
   circle. Order is clinically meaningful, so it is marked up as an <ol>
   and the line simply visualises that order. Progress is driven by
   js/thread.js writing --thread-progress. */

.thread {
  position: relative;
  padding-block: var(--space-5);
}

.thread-track { position: relative; }

/* the base (unfilled) line */
.thread-track::before {
  content: "";
  position: absolute;
  background: var(--ohc-medium);
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
}

/* the filled (progress) line, scaled from 0 by JS */
.thread-fill {
  position: absolute;
  left: 15px;
  top: 0;
  width: 2px;
  background: var(--ohc-dark);
  height: 100%;
  transform: scaleY(var(--thread-progress, 0));
  transform-origin: top;
  will-change: transform;
}

.thread-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.thread-step {
  position: relative;
  padding-left: 56px;
}

/* Ahead of the reader: an outlined circle. Reached: the logo's solid
   circle. The shape changes, not just the colour. */
.thread-dot {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--ohc-white);
  border: 3px solid var(--ohc-medium);
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.thread-step.is-active .thread-dot {
  border-color: var(--ohc-dark);
  background: var(--ohc-dark);
}
.section-alt .thread-dot { background: var(--ohc-light); }
.section-alt .thread-step.is-active .thread-dot { background: var(--ohc-dark); }

/* Inside the continuum the track already carries a circle for every step,
   so the phase number drops its own circle rather than sitting as a second
   dark disc a few pixels away from the first. */
.thread-step .phase-label .num {
  width: auto;
  height: auto;
  background: none;
  color: var(--ohc-dark);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--track-wider);
}
.section-dark .thread-step .phase-label .num { color: var(--ohc-light); }

.thread-step h3 { font-size: var(--text-h3); margin-block: var(--space-2) 0.35rem; }
.thread-step p { font-size: var(--text-small); line-height: var(--lh-normal); }

@media (min-width: 1024px) {
  .thread-track::before,
  .thread-fill { left: 50%; transform: translateX(-50%); }
  .thread-fill { transform: translateX(-50%) scaleY(var(--thread-progress, 0)); }

  .thread-steps { gap: var(--space-8); }

  .thread-step { width: calc(50% - 46px); padding-left: 0; }
  .thread-step:nth-child(odd) { margin-right: calc(50% + 46px); text-align: right; }
  .thread-step:nth-child(even) { margin-left: calc(50% + 46px); }
  .thread-step:nth-child(odd) .phase-label { flex-direction: row-reverse; }

  .thread-dot { left: auto; top: 4px; }
  .thread-step:nth-child(odd) .thread-dot { right: -58px; }
  .thread-step:nth-child(even) .thread-dot { left: -58px; }
}

/* ================= FAQ accordion ================= */

.faq-item { border-bottom: var(--rule); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 1.0625rem;
  color: var(--ohc-dark);
  cursor: pointer;
}
/* The toggle is the logo's circle. */
.faq-q svg {
  width: 32px;
  height: 32px;
  padding: 7px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--ohc-light);
  color: var(--ohc-dark);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.faq-q:hover svg { background: var(--ohc-dark); color: var(--ohc-white); }
.faq-q[aria-expanded="true"] svg {
  transform: rotate(45deg);
  background: var(--ohc-dark);
  color: var(--ohc-white);
}

.faq-a {
  overflow: hidden;
  height: 0;
  transition: height var(--dur-base) var(--ease-out);
}
.faq-a-inner { padding-bottom: var(--space-4); max-width: var(--measure); }

/* ================= Forms ================= */

.form-card {
  background: var(--ohc-white);
  border: var(--rule-strong);
  padding: clamp(var(--space-4), 3vw, var(--space-6));
}
.section-alt .form-card { border-color: var(--ohc-dark); }

.field { margin-bottom: var(--space-4); }
.field label,
.fieldset legend {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-small);
  color: var(--ohc-dark);
  margin-bottom: var(--space-1);
}
.field .hint { font-size: var(--text-caption); margin-top: 0.35rem; }

/* Form controls are essential UI, so their border is Dark Blue (9.4:1),
   never Medium Blue (2.3:1 — below the 3:1 minimum for controls). */
.input, select.input, textarea.input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--ohc-dark);
  border-radius: var(--radius-none);
  background: var(--ohc-white);
  color: var(--ohc-black);
  font-size: 1rem;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--ohc-dark); }
/* Focus fills the field rather than thickening its edge, so the box does
   not grow and shunt the rest of the form down by a pixel. */
.input:focus { background: var(--ohc-light); }
textarea.input { min-height: 120px; resize: vertical; }

.fieldset { border: none; padding: 0; margin: 0 0 var(--space-4); }

/* Chips size to their own label. A grid stretched every option to the
   column width, so a two-word answer sat in a 500px pill. */
.choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.choice { position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.choice span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  border: 2px solid var(--ohc-dark);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  color: var(--ohc-dark);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.choice span:hover { background: var(--ohc-light); }
.choice input:checked + span {
  background: var(--ohc-dark);
  color: var(--ohc-white);
  font-weight: var(--fw-medium);
}
.choice input:focus-visible + span {
  outline: 3px solid var(--ohc-dark);
  outline-offset: 2px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--text-small);
}
.consent input { margin-top: 0.3rem; flex: none; accent-color: var(--ohc-dark); }

/* The palette has no red or green, so form feedback is distinguished by
   shape and weight rather than hue: success is a filled brand panel,
   error is a heavy outlined one. Both carry an explicit text label. */
.form-status {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  margin-top: var(--space-4);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.success {
  background: var(--ohc-dark);
  color: var(--ohc-white);
  border: 2px solid var(--ohc-dark);
}
.form-status.error {
  background: var(--ohc-white);
  color: var(--ohc-black);
  border: 3px solid var(--ohc-black);
}

/* ================= Notices ================= */

.notice {
  border: var(--rule);
  border-left: 6px solid var(--ohc-dark);
  background: var(--ohc-white);
  padding: var(--space-4);
  font-size: var(--text-small);
}
.notice + .notice { margin-top: var(--space-3); }
.section-alt .notice { background: var(--ohc-white); border-color: var(--ohc-medium); border-left-color: var(--ohc-dark); }

.notice-strip {
  background: var(--ohc-light);
  border-block: var(--rule);
  padding-block: var(--space-3);
  font-size: var(--text-small);
}

.placeholder-banner {
  background: var(--ohc-light);
  border: 2px dashed var(--ohc-dark);
  padding: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.placeholder-banner svg { flex: none; width: 24px; height: 24px; color: var(--ohc-dark); margin-top: 2px; }
.placeholder-banner strong { display: block; color: var(--ohc-dark); margin-bottom: 0.2rem; }
.placeholder-banner p { font-size: var(--text-small); }

/* ================= Footer ================= */

.site-footer {
  background: var(--ohc-dark);
  color: var(--ohc-white);
  padding-block: var(--space-8) var(--space-5);
}
/* :not(.btn) matters — without it this rule outranks .btn-accent's own
   colour (0,2,0 beats 0,1,0) and paints the footer CTA's label Light Blue
   on a Light Blue fill, i.e. invisible. */
.site-footer a:not(.btn) { color: var(--ohc-light); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--ohc-white); text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); }
}

/* The horizontal lockup is 15.6:1, so height drives width hard: 22px tall
   is ~344px wide, which is the most the brand column can take. */
.footer-brand img { height: 22px; width: auto; margin-bottom: var(--space-4); }
.footer-brand p { font-size: var(--text-small); color: var(--ohc-light); max-width: 34ch; }

.footer-col h5 {
  font-family: var(--font-display);
  color: var(--ohc-white);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { font-size: var(--text-small); }

/* Sits between the footer columns and the legal line. Light Blue on Dark
   Blue via .btn-accent, so it reads as the one action in the footer. */
.footer-home {
  margin-top: var(--space-7);
  display: flex;
  justify-content: center;
}
.footer-home .btn svg {
  width: 18px;
  height: 18px;
  margin-right: 0.15rem;
}
.footer-home + .footer-legal { margin-top: var(--space-5); }

.footer-legal {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ohc-medium);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  font-size: var(--text-caption);
  color: var(--ohc-light);
}
.footer-legal .legal-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ================= Legal pages =================
   Privacy policy, terms of use and the accessibility statement. Long-form
   statutory copy: the job is legibility over a lot of scrolling, so the
   rhythm is set once here rather than with inline styles on 200 elements. */

.legal { color: var(--color-text-quiet); }
.legal h2 {
  font-size: var(--text-h3);
  color: var(--ohc-dark);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--rule);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  font-size: 1rem;
  color: var(--ohc-dark);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.legal p { margin-bottom: var(--space-3); max-width: var(--measure); }
.legal ul {
  margin: 0 0 var(--space-3);
  padding-left: 1.2em;
  max-width: var(--measure);
  display: grid;
  gap: 0.4rem;
}
.legal li { line-height: var(--lh-normal); }

/* Contact blocks inside the legal copy: label/value pairs, not prose. */
.legal ul.legal-details {
  list-style: none;
  padding-left: 0;
  gap: 0.5rem;
}
.legal ul.legal-details strong { color: var(--ohc-dark); }

/* ================= Tags ================= */

.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--ohc-light);
  color: var(--ohc-dark);
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
  border: 1px solid var(--ohc-light);
}
.tag.tag-alt {
  background: var(--ohc-white);
  border-color: var(--ohc-dark);
  color: var(--ohc-dark);
}
.section-alt .tag { background: var(--ohc-white); border-color: var(--ohc-white); }
.section-alt .tag.tag-alt { background: transparent; border-color: var(--ohc-dark); }
.section-dark .tag { background: var(--ohc-white); color: var(--ohc-dark); border-color: var(--ohc-white); }
.section-dark .tag.tag-alt { background: transparent; color: var(--ohc-light); border-color: var(--ohc-light); }

/* ================= Pull-quote ================= */

.pull-quote {
  position: relative;
  padding-left: var(--space-5);
  border-left: 6px solid var(--ohc-medium);
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--ohc-dark);
}
.pull-quote p + p {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  color: var(--ohc-black);
}
.section-dark .pull-quote { border-left-color: var(--ohc-light); }
.section-dark .pull-quote p { color: var(--ohc-white); }
.section-dark .pull-quote p + p { color: var(--ohc-light); }

/* ================= Checklist ================= */

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
/* The bullet is the logo's circle, with the tick inside it. */
.checklist li svg {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 4px;
  margin-top: 2px;
  border-radius: var(--radius-pill);
  background: var(--ohc-dark);
  color: var(--ohc-white);
}
.section-dark .checklist li svg { background: var(--ohc-white); color: var(--ohc-dark); }

/* ================= In-page table of contents ================= */

.page-toc {
  /* Sticky only applies once .with-toc becomes a real two-column layout
     (see the 1024px breakpoint) — on mobile this is a normal in-flow
     block, otherwise it overlaps the article as the page scrolls. */
  position: static;
  background: var(--ohc-light);
  padding: var(--space-4);
  max-height: 70vh;
  overflow-y: auto;
}
.page-toc h2 {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--ohc-dark);
  margin-bottom: var(--space-3);
}
.page-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.page-toc a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--ohc-black);
  text-decoration: none;
  font-size: var(--text-small);
  border-left: 3px solid transparent;
}
.page-toc a:hover,
.page-toc a.is-active {
  border-left-color: var(--ohc-dark);
  color: var(--ohc-dark);
  font-weight: var(--fw-semibold);
  background: var(--ohc-white);
}

.with-toc {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .with-toc { grid-template-columns: 270px 1fr; }
  .page-toc { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
}

/* ================= Quote card ================= */

.quote-card {
  background: var(--ohc-light);
  padding: clamp(var(--space-4), 3vw, var(--space-6));
}
.quote-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--ohc-dark);
}
.quote-card cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-small);
  color: var(--ohc-black);
}
.quote-card.is-placeholder {
  background: transparent;
  border: 2px dashed var(--ohc-medium);
}
.quote-card.is-placeholder blockquote { color: var(--ohc-black); font-weight: var(--fw-regular); }

/* ================= Vow / promise statements ================= */

.vow-list { display: grid; gap: var(--space-4); }
.vow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule);
}
.vow:last-child { border-bottom: none; padding-bottom: 0; }
/* The marker is the logo's half-disc. */
.vow .mark {
  flex: none;
  width: 14px;
  height: 28px;
  margin-top: 6px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--ohc-medium);
  font-size: 0;
}
.vow p {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-tight);
  color: var(--ohc-dark);
  line-height: var(--lh-snug);
}
.section-dark .vow { border-bottom-color: var(--ohc-medium); }
.section-dark .vow .mark { background: var(--ohc-light); }
.section-dark .vow p { color: var(--ohc-white); }

/* ================= Reveal (JS hook) ================= */

.js-reveal { opacity: 0; transform: translateY(18px); }
.no-js .js-reveal { opacity: 1; transform: none; }

/* =====================================================================
   Photography
   ---------------------------------------------------------------------
   Editorial policy: this site shows spaces, hands, equipment and
   clinicians — never a patient's body. See scripts/images.manifest.js.

   Photographs are reproduced in their natural colour. The brand system
   frames them; it does not tint them.

   Every media box declares its own aspect ratio in CSS (not inline), so
   the page reserves the right space before a single byte of image data
   arrives. The blurred LQIP sits behind as a background-image and the
   real photo simply paints over it as it decodes — no JS, no fade, no
   chance of a stuck-invisible image if a script fails.
   ===================================================================== */

figure { margin: 0; }

.media {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--ohc-light);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.media > picture,
.media > img { display: block; width: 100%; height: 100%; }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* Shown only when a derivative is missing from the manifest — the box still
   reserves its space so the layout does not jump. Run `npm run images`. */
.media-placeholder { width: 100%; height: 100%; background: var(--ohc-light); }

/* Copy the practice still has to supply before launch.
   Borrows the surrounding text colour rather than setting its own, because
   this marker appears both on the Dark Blue footer and on the white legal
   pages — a fixed Light Blue read at 1.2:1 against white. The dashed box is
   what marks it as unfinished; the palette has no red to do that job. */
.pending {
  border: 1px dashed currentColor;
  padding: 0 0.35em;
  font-style: normal;
}

/* Aspect presets — these MUST stay in step with PRESETS in
   scripts/images.manifest.js, or the reserved box won't match the file. */
.media--band      { aspect-ratio: 12 / 5; }
.media--wide      { aspect-ratio: 16 / 9; }
.media--landscape { aspect-ratio: 4 / 3; }
.media--portrait  { aspect-ratio: 3 / 4; }
.media--card      { aspect-ratio: 3 / 2; }
.media--square    { aspect-ratio: 1 / 1; }
.media--avatar    { aspect-ratio: 1 / 1; }
.media--diagram   { aspect-ratio: 1700 / 925; }
.media--poster    { aspect-ratio: 1410 / 1182; }

.media--flush { border-radius: 0; }

/* ---------- The arch ----------
   A media frame whose top is a true half-disc, taken straight from the
   mark's trailing shape. Reserved for portraits and single feature
   images, where it reads as a deliberate quotation of the logo. */
.media--arch { border-radius: var(--radius-pill) var(--radius-pill) 0 0; }

/* ---------- The lens ----------
   The negative shape between the two half-discs of the bowtie. */
.media--lens { border-radius: var(--radius-arch); }

.media-caption {
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  color: var(--ohc-dark);
  line-height: var(--lh-normal);
}
.media-figure { display: block; }

/* ---------- Full-bleed image band ----------
   A photographic breather between text sections. Placed as a direct
   child of <main> (outside .container) so it runs edge to edge. Height
   is fixed in CSS rather than by aspect ratio, so a 12:5 crop doesn't
   become a 400px-tall slab on a phone. */

.image-band {
  position: relative;
  overflow: hidden;
  height: clamp(240px, 40vw, 560px);
  background-color: var(--ohc-light);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.image-band img { width: 100%; height: 100%; object-fit: cover; }

/* The caption is a solid plate, not a gradient scrim — the palette has
   no translucent value, and a solid plate guarantees its own contrast. */
.image-band__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: min(100%, 46rem);
  background: var(--ohc-dark);
  color: var(--ohc-white);
  font-size: var(--text-caption);
  line-height: var(--lh-normal);
  letter-spacing: var(--track-wide);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--container-pad);
  border-radius: 0 var(--radius-pill) 0 0;
}
.image-band--inset { height: clamp(220px, 34vw, 460px); }

/* ---------- Offset media pair ----------
   Two frames in a side column, the second overlapping the first. */

.media-stack {
  position: relative;
  padding-bottom: clamp(2rem, 6vw, 4rem);
  padding-right: clamp(1.5rem, 5vw, 3.5rem);
}
.media-stack > .media:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  border: 6px solid var(--ohc-white);
}
.section-alt .media-stack > .media:last-child { border-color: var(--ohc-light); }

@media (max-width: 599px) {
  /* Overlap gets cramped on a phone — stack them plainly instead. */
  .media-stack { padding: 0; display: grid; gap: var(--space-3); }
  .media-stack > .media:last-child { position: static; width: 100%; border: 0; }
}

/* ---------- Cards with a photographic top ---------- */

.card--photo,
.journey-card--photo { padding: 0; overflow: hidden; }
.card--photo > .card-body,
.journey-card--photo > .card-body { padding: var(--space-4); }

.journey-card--photo .media img,
.card--photo .media img { transition: transform var(--dur-slow) var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .journey-card--photo:hover .media img,
  .card--photo:hover .media img { transform: scale(1.04); }
}

/* ---------- Team portraits ----------
   Portraits sit in the arch, so the team reads as part of the mark. */

.team-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .team-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* Square, not the half-disc arch used for the photographer's environmental
   portraits: the practice's headshots arrive as circular avatars with the
   circle already composed into the file, and an arch crop would slice through
   it. Square is the logo's other legal corner, so the tile stays on-system. */
.team-member .media { border-radius: 0; }
.team-member figcaption { margin-top: var(--space-3); }
.team-member .name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--ohc-dark);
  line-height: var(--lh-snug);
}
.team-member .role {
  display: block;
  font-size: var(--text-small);
  margin-top: 0.2rem;
}
/* How this person is booked — via the coordinator, or directly. */
.team-member .booking {
  display: block;
  font-size: var(--text-caption);
  margin-top: 0.4rem;
  color: var(--color-text-quiet);
}
.section-dark .team-member .name { color: var(--ohc-white); }
.section-dark .team-member .role { color: var(--ohc-light); }

/* ---------- Horizontal gallery strip ---------- */

.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 74%);
  gap: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
  /* bleed to the screen edges on small viewports so the strip reads as
     scrollable rather than as a clipped grid */
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  scrollbar-width: thin;
  scrollbar-color: var(--ohc-medium) transparent;
}
.gallery > * { scroll-snap-align: start; }

@media (min-width: 640px)  { .gallery { grid-auto-columns: minmax(260px, 44%); } }
@media (min-width: 1024px) { .gallery { grid-auto-columns: minmax(280px, 30%); } }

.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: var(--ohc-medium); border-radius: var(--radius-pill); }

.gallery-hint { font-size: var(--text-caption); color: var(--ohc-dark); margin-top: var(--space-1); }

/* ---------- Media inside a continuum step ---------- */

.thread-media { margin-top: var(--space-4); }

@media (min-width: 1024px) {
  /* Steps alternate either side of the centre line, which left the opposite
     half of every row empty while the photo sat stacked under its own text.
     The photo now crosses the line into that empty half, level with the
     heading it belongs to — so each row reads as one unit and the column
     stops running twice as long as it needs to.

     The step is `width: calc(50% - 46px)`, so a 100% + 92px offset clears the
     step's own width plus both 46px gutters and lands the photo flush against
     the far side of the track. */
  .thread-media {
    /* Fixed rather than max-width: out of the flow it has no parent to
       measure itself against and would collapse to its content. */
    width: 330px;
    max-width: none;
    position: absolute;
    top: 0;
    margin-top: 0;
  }
  .thread-step:nth-child(odd) .thread-media { left: calc(100% + 92px); }
  .thread-step:nth-child(even) .thread-media { right: calc(100% + 92px); }

  /* Taken out of the flow above, the photo no longer holds the row open, so a
     short step could let the next one slide up underneath it. */
  .thread-step { min-height: 240px; }
}

/* Phase photography reacts to the continuum's scroll progress: images
   ahead of the reader sit back, the active phase comes forward. Scoped
   to .thread.is-enhanced — a class thread.js only adds once it has
   successfully initialised — so images stay at full strength if GSAP
   never loads.

   This is the one place a non-palette value appears, and it is applied
   to a photograph rather than to the design: the images are photographic
   content, not brand surfaces, and desaturation carries no hue. */
.thread.is-enhanced .thread-media {
  filter: saturate(0.55);
  transition: filter var(--dur-slow) var(--ease-out);
}
.thread.is-enhanced .thread-step.is-active .thread-media { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .thread.is-enhanced .thread-media { filter: none; }
}

/* ---------- Figure captions on dark sections ---------- */

.section-dark .media-caption,
.section-dark .gallery-hint { color: var(--ohc-light); }

/* ================= Webinar announcement =================
   The practice's event poster beside the same details as real text. Sits
   directly under the home-page hero, so it is a Dark Blue band: the hero
   above it is white and the section below it is Light Blue, and a third
   light surface between the two would read as one long pale run rather
   than as an inserted announcement. Dark Blue also happens to be the
   poster's own ground, so the artwork sits in the band instead of on it.

   Everything here obeys the brand rules: five colours, square or pill
   corners only, and depth carried by a flat offset block (.card--block,
   reused on the poster) rather than by a shadow. */

.webinar {
  display: grid;
  gap: clamp(var(--space-5), 1rem + 5vw, var(--space-8));
  align-items: center;
}

/* The poster. Square corners — it is a media frame, not a button — and a
   Light Blue rule so the artwork's own white right-hand half has an edge
   against the Dark Blue band instead of bleeding into it. */
.webinar__poster {
  display: block;
  border: 2px solid var(--ohc-light);
  /* .card--block's offset block sits down-and-right of the frame; the border
     above is what separates the two blocks of colour. */
  transition: transform var(--dur-base) var(--ease-out);
}
.webinar__poster img {
  display: block;
  width: 100%;
  height: auto;
}
/* Lifts up and to the left, away from its offset block, so the gap between
   the two widens — the flat-colour equivalent of a card rising. */
.webinar__poster:hover { transform: translate(-3px, -3px); }

@media (prefers-reduced-motion: reduce) {
  .webinar__poster,
  .webinar__poster:hover { transition: none; transform: none; }
}

.webinar__detail > * + * { margin-top: var(--space-3); }
.webinar__detail h2 {
  font-size: var(--text-h1);
  letter-spacing: var(--track-tight);
  max-width: 18ch;
}
.webinar__detail .lead { max-width: 40ch; }
.webinar__detail .btn-row { margin-top: var(--space-5); }

.webinar__note {
  font-size: var(--text-small);
  line-height: var(--lh-normal);
  color: var(--ohc-light);
  max-width: 46ch;
}

/* ---------- The date block ----------
   A quotation of the poster's own date strip: the numeral large and set
   solid, the weekday, month and time stacked beside it. Light Blue ground
   with Dark Blue type (6.87:1), because Medium Blue can never carry text —
   the poster's own date strip is Medium Blue, and that is the one thing
   from the artwork this block deliberately does not copy. */

.webinar__when { margin-top: var(--space-4); }

.webinar__date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--ohc-light);
  color: var(--ohc-dark);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
}

.webinar__day {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.75rem, 2rem + 3vw, 3.75rem);
  line-height: 0.85;
  letter-spacing: var(--track-tighter);
}

.webinar__month {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: var(--text-small);
  line-height: 1.3;
}
.webinar__weekday {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.webinar__month > span:nth-child(2) { font-weight: var(--fw-semibold); }
.webinar__time {
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .webinar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Below the two-column breakpoint the poster is a full-width block, and
   .card--block's offset would push it past the container's right edge.
   The frame keeps its border; the offset block is what goes. */
@media (max-width: 899px) {
  .webinar__poster.card--block::before { content: none; }
}

/* ---------- Bands that a link scrolls to ----------
   The recorded webinars on Patient Resources reuse the poster-and-panel above,
   and carry one extra job: the page's hero row has a "Videos" button that
   scrolls down to them, so that band is an anchor target.

   Landing an anchor puts the element's top edge at the viewport's top edge,
   and the site header is sticky, 76px tall and paints over the top of it. The
   band survives that on a desktop, where a section's own padding is 91px, but
   not at phone width, where it drops to 56px: measured at 390px the heading's
   letter tops were cut off flat along the header's bottom edge. The scroll
   margin holds the band clear of the header, and the section keeps its own
   padding for the breathing space below it.

   Class, not id: both webinar bands sit under that header, and the home page's
   announcement is an anchor target on nobody's list, so this is inert there. */
.webinar-band { scroll-margin-top: var(--header-h); }

/* The same defect, measured on the rest of the page — Jason asked for it fixed
   after reviewing the Videos button. The hero row's other two buttons target
   (#guides) and (#education-list), and at phone width both land with their
   eyebrow under the sticky header for the identical reason: a section's own
   top padding (56px) is shorter than the header (76px). Written on :target
   rather than on each section, because every in-page link on the site lands
   this way and none of them should be a special case. The webinar band above
   keeps its own rule as well: :target only matches during hash navigation,
   whereas the band's rule also holds if something scrolls to it from script. */
:target { scroll-margin-top: var(--header-h); }