/* ==========================================================================
   Teal & Sand — interactive components.
   Every value comes from tokens.css. No colour is hard-coded here.

   Measured contrast (implemented pairs):
     Ink on Sand        7.68:1      White on Teal   7.62:1
     Teal on White      7.62:1      Teal on Seafoam 6.68:1
     Sand on Teal       5.06:1      Ink on White   11.56:1
   Sand on White is 1.51:1, so Sand buttons on light grounds always carry a
   Deep teal border to keep the control boundary above 3:1.
   ========================================================================== */

/* ---------- semantic classes inherited from the compiled build ----------
   styles.css hard-codes a superseded grey on .editorial-subheading. Bring it
   onto the palette. :where() keeps this at zero specificity so an explicit
   colour utility on the element always wins — the same subheading is Ink on
   light grounds and White inside the Deep teal hero. */
:where(.editorial-subheading) { color: var(--sj-text-body); }

/* ---------- buttons ---------- */
.sj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.5rem;
  border-radius: var(--sj-radius);
  border: var(--sj-border-width) solid transparent;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Primary action — Warm sand with Dark grey text and a Deep teal boundary. */
.sj-btn-primary {
  background: var(--sj-bg-cta);
  color: var(--sj-text-on-cta);
  border-color: var(--sj-control-border);
}
.sj-btn-primary:hover {
  background: var(--sj-teal);
  color: var(--sj-white);
  border-color: var(--sj-teal);
}

/* Secondary on a light ground — Deep teal text and border. */
.sj-btn-secondary {
  background: transparent;
  color: var(--sj-text-link);
  border-color: var(--sj-control-border);
}
.sj-btn-secondary:hover {
  background: var(--sj-teal);
  color: var(--sj-white);
}

/* Secondary on a Deep teal ground — White text and border. */
.sj-btn-on-teal {
  background: transparent;
  color: var(--sj-text-on-teal);
  border-color: var(--sj-white);
}
.sj-btn-on-teal:hover {
  background: var(--sj-white);
  color: var(--sj-teal);
}

/* Primary action sitting on a Deep teal ground keeps Sand, and needs no
   teal border because Sand on Teal is already 5.06:1. */
.sj-btn-primary.sj-on-teal { border-color: var(--sj-sand); }
.sj-btn-primary.sj-on-teal:hover {
  background: var(--sj-white);
  color: var(--sj-teal);
  border-color: var(--sj-white);
}

/* ---------- text links ---------- */
/* Colour is never the only cue: links carry a persistent underline. */
.sj-a {
  color: var(--sj-text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sj-a:hover { text-decoration-thickness: 2px; }

.sj-a-on-teal {
  color: var(--sj-text-on-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sj-a-on-teal:hover { color: var(--sj-sand); }

/* ---------- caption panels over photography ----------
   Replaces the gradient scrims: a solid Deep teal panel guarantees 7.62:1
   for White copy regardless of what is behind it. */
.sj-caption {
  background: var(--sj-bg-authority);
  color: var(--sj-text-on-teal);
  border-radius: var(--sj-radius);
  padding: .875rem 1.125rem;
}
.sj-caption * { color: var(--sj-text-on-teal) !important; }
/* A Sand chip inside a caption panel keeps Ink: White on Sand is only 1.51:1. */
.sj-caption .sj-video__badge { color: var(--sj-text-on-cta) !important; }

/* ---------- focus ----------
   Deep teal on light grounds, White on dark. Both clear 3:1 against their
   adjacent colour. */
:focus-visible {
  outline: 3px solid var(--sj-control-border);
  outline-offset: 3px;
  border-radius: 3px;
}
[class*="bg-[#285B60]"] :focus-visible,
footer :focus-visible,
.sj-btn-on-teal:focus-visible,
.sj-a-on-teal:focus-visible {
  outline-color: var(--sj-white);
}

/* ---------- consistent rounding on media and form controls ---------- */
img,
.sj-form input,
.sj-form select,
.sj-form textarea { border-radius: var(--sj-radius); }
img[class*="rounded-full"] { border-radius: var(--sj-radius-pill); }

/* ---------- disabled ---------- */
.sj-btn[disabled],
.sj-btn[aria-disabled="true"] {
  background: var(--sj-seafoam);
  color: var(--sj-ink);
  border-color: var(--sj-ink);
  cursor: not-allowed;
}

/* Compact button for the navigation bar, so the CTA never crowds the links. */
.sj-btn-sm {
  padding: .625rem 1rem;
  gap: .375rem;
}

/* ==========================================================================
   Editorial layout components
   Added for the visual design and UX pass. Every value still resolves to
   tokens.css; nothing here hard-codes a colour.
   ========================================================================== */

/* ---------- split hero ----------
   Copy aligned to the container, photograph bleeding to the viewport edge.
   The portrait carries the page, so it is given real width rather than being
   boxed into a card. */
.sj-hero-editorial {
  background: var(--sj-bg-page);
  overflow: hidden;
}
.sj-hero-editorial__inner { display: grid; }
.sj-hero-editorial__copy {
  padding: var(--sj-space-8) var(--sj-gutter-mobile) var(--sj-space-6);
}
.sj-hero-editorial__media { position: relative; }
.sj-hero-editorial__media img,
.sj-hero-editorial__media picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Mobile: face first, then the proposition. */
@media (max-width: 1023px) {
  .sj-hero-editorial__inner { grid-template-rows: auto auto; }
  .sj-hero-editorial__media {
    grid-row: 1;
    aspect-ratio: 4 / 3;
    max-height: 46vh;
  }
  .sj-hero-editorial__copy { grid-row: 2; }
}

@media (min-width: 1024px) {
  .sj-hero-editorial__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 42vw);
    align-items: stretch;
    min-height: min(74vh, 680px);
  }
  .sj-hero-editorial__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sj-space-10) var(--sj-space-8) var(--sj-space-10)
             max(var(--sj-gutter), calc((100vw - var(--sj-content-max)) / 2));
  }
  .sj-hero-editorial__copy > * { max-width: 34rem; }
}

/* ---------- single credential band ----------
   One row, one place. Replaces the hero stat block and the separate strip
   that repeated it. */
.sj-credbar {
  background: var(--sj-bg-authority);
  color: var(--sj-text-on-teal);
  padding: var(--sj-space-6) 0;
}
.sj-credbar ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sj-space-4) var(--sj-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .sj-credbar ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sj-credbar li + li { border-left: 1px solid rgb(255 255 255 / .22); padding-left: var(--sj-space-3); }
@media (max-width: 767px) { .sj-credbar li:nth-child(odd) { border-left: 0; padding-left: 0; } }
.sj-credbar .sj-figure { color: var(--sj-sand); display: block; }
.sj-credbar .sj-credbar__label {
  display: block;
  margin-top: var(--sj-space-1);
  font-size: var(--sj-caption);
  line-height: var(--sj-lh-caption);
  color: var(--sj-text-on-teal);
}

/* ---------- framed photograph with an optional factual caption ---------- */
.sj-photo { margin: 0; }
.sj-photo__frame {
  display: block;
  width: 100%;
  border-radius: var(--sj-radius);
  overflow: hidden;
}
.sj-photo picture { display: block; width: 100%; height: 100%; }
.sj-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sj-photo figcaption {
  margin-top: var(--sj-space-2);
  font-size: var(--sj-caption);
  line-height: var(--sj-lh-caption);
  color: var(--sj-text-body);
}
.sj-photo--on-teal figcaption { color: var(--sj-text-on-teal); }

/* fixed ratios so a crop can be chosen per placement */
.sj-ratio-4x5 { aspect-ratio: 4 / 5; }
.sj-ratio-1x1 { aspect-ratio: 1 / 1; }
.sj-ratio-3x2 { aspect-ratio: 3 / 2; }
.sj-ratio-16x9 { aspect-ratio: 16 / 9; }

/* ---------- proof band: one large photograph beside the quotes ----------
   The photograph matches the height of the quote column rather than sitting
   as a small letterbox beside it. */
.sj-proof { display: grid; gap: var(--sj-space-6); }
@media (min-width: 900px) {
  .sj-proof {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--sj-space-8);
  }
}

/* Photograph first at full container width, quotes beneath. Used where the
   image is the evidence and deserves the whole measure. */
.sj-proof-stacked { display: grid; gap: var(--sj-space-6); }
.sj-proof-stacked__quotes { display: grid; gap: var(--sj-space-4); }
@media (min-width: 768px) {
  .sj-proof-stacked__quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sj-proof__quotes { display: grid; gap: var(--sj-space-4); }

/* ---------- speaker reel placeholder ----------
   Deliberately has no play control: there is no file to play yet. */
.sj-video { position: relative; border-radius: var(--sj-radius); overflow: hidden; }
.sj-video > .sj-photo,
.sj-video > picture { display: block; }
.sj-video__note {
  position: absolute;
  left: var(--sj-space-3);
  right: var(--sj-space-3);
  bottom: var(--sj-space-3);
  max-width: 34rem;
}
@media (min-width: 768px) {
  .sj-video__note { left: var(--sj-space-4); bottom: var(--sj-space-4); right: auto; }
}
.sj-video__badge {
  display: inline-block;
  background: var(--sj-bg-cta);
  color: var(--sj-text-on-cta);
  font-size: var(--sj-label);
  font-weight: 700;
  letter-spacing: var(--sj-track-label);
  text-transform: uppercase;
  padding: .25rem .625rem;
  border-radius: var(--sj-radius-pill);
  margin-bottom: var(--sj-space-1);
}

/* ---------- compact secondary routes ---------- */
.sj-routes { display: grid; gap: var(--sj-space-3); }
@media (min-width: 768px) { .sj-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sj-route {
  display: flex;
  flex-direction: column;
  gap: var(--sj-space-1);
  padding: var(--sj-space-3) var(--sj-space-4);
  background: var(--sj-bg-surface);
  border-radius: var(--sj-radius);
  text-decoration: none;
  color: var(--sj-text-body);
  border: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.sj-route:hover { border-color: var(--sj-control-border); }
.sj-route strong { color: var(--sj-text-link); font-family: var(--sj-font-heading); font-size: 1.125rem; }

/* ==========================================================================
   Spacing utilities the shipped Tailwind build never emitted.
   styles.css is a pre-compiled artefact with no source in this repository, so
   a class it omits silently renders as zero and collapses the layout. These
   are the seven the markup actually uses, at Tailwind's own scale
   (1 unit = 0.25rem). Audited with scratchpad/audit-spacing.cjs.
   ========================================================================== */
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-10 { margin-bottom: 2.5rem; }
.pl-5 { padding-left: 1.25rem; }
.gap-5 { gap: 1.25rem; }
/* the template's text-column rhythm follows the paragraph spacing token
   (20px, 16px on phones) rather than a fixed 20px */
.space-y-5 > :not(:last-child) { margin-block-end: var(--sj-gap-para); }

/* ==========================================================================
   Control dimensions
   Button heights live in typography.css, which loads after this file.
   The consent checkbox is a control too: 18px is below the 24px minimum
   target size, and it is the last thing between an enquiry and submission.
   ========================================================================== */
.sj-form input[type="checkbox"] {
  inline-size: 24px;
  block-size: 24px;
  min-inline-size: 24px;
  accent-color: var(--sj-teal);
}

/* ==========================================================================
   Banner (191026 v2): a light ground, copy on the left, and the photograph
   running the full height of the banner to the right-hand edge. Stacked on
   smaller screens: copy first, then the photograph edge to edge.
   The band beneath (.sj-band) carries the Deep teal.
   ========================================================================== */
.sj-hero {
  background: var(--sj-bg-page);
  color: var(--sj-text-heading);
  container-type: inline-size;
  overflow: hidden;
}
.sj-hero .container > .grid { gap: var(--sj-space-4); }
.sj-hero .container > .grid > * { grid-column: auto; }

/* Copy leads; the photograph follows it. */
.sj-hero__copy { order: 1; }
.sj-hero__media { order: 2; }
.sj-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sj-hero .sj-hero__media > *,
.sj-hero .sj-hero__media img { overflow: hidden; border-radius: 0; }
.sj-hero h1 { text-wrap: balance; }

/* Stacked: the photograph runs edge to edge under the copy, down to the band. */
@media (max-width: 1023px) {
  .sj-hero:has(.sj-hero__media) { padding-bottom: 0; }
  .sj-hero__media { margin-inline: calc(50% - 50cqw); }
  .sj-hero .sj-hero__media > * { aspect-ratio: 1 / 1; max-height: 32rem; width: 100%; }
}

/* Side by side: the photograph takes the right-hand 46% of the banner, full
   height; the copy keeps to the container's left edge. */
@media (min-width: 1024px) {
  .sj-hero.sj-section-hero { padding-block: 0; }
  .sj-hero .container { max-width: none; padding-inline: 0; }
  .sj-hero .container > .grid {
    grid-template-columns: minmax(0, 1fr) 46cqw;
    align-items: stretch;
    gap: 0;
    min-height: clamp(30rem, 72vh, 42rem);
  }
  /* The copy is centred in a banner whose height the screen sets, which
     leaves it roughly the 96px banner padding above and below. Its own
     minimum stays at 64px: more would stretch the banner, and with it the
     photograph, on the pages with longer copy. */
  .sj-hero__copy {
    align-self: center;
    padding-block: var(--sj-space-8);
    padding-inline: max(var(--sj-gutter), calc((100cqw - var(--sj-content-max)) / 2 + var(--sj-gutter))) var(--sj-space-8);
  }
  .sj-hero:not(:has(.sj-hero__media)) .sj-hero__copy { padding-block: var(--sj-hero-y); }
  .sj-hero__media { position: relative; }
  .sj-hero .sj-hero__media > * { position: absolute; inset: 0; aspect-ratio: auto; }
  /* a banner without a photograph is just its copy */
  .sj-hero:not(:has(.sj-hero__media)) .container > .grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* Copy colours on the light ground. */
.sj-hero .editorial-subheading,
.sj-hero .sj-hero__body { color: var(--sj-text-body); }
.sj-hero__copy > p.uppercase,
.sj-hero .sj-postnominal { color: var(--sj-text-link); }
.sj-hero .sj-a-on-teal { color: var(--sj-text-link); }
.sj-hero .sj-a-on-teal:hover { color: var(--sj-ink); }

/* Actions: the Sand button stays; the second action is a text link with an
   arrow. Both keep visible Deep teal focus on the light ground. */
.sj-hero .sj-btn-primary.sj-on-teal:hover {
  background: var(--sj-teal);
  color: var(--sj-white);
  border-color: var(--sj-teal);
}
.sj-hero .sj-btn-on-teal {
  background: transparent;
  border-color: transparent;
  color: var(--sj-text-link);
  padding-inline: .25rem;
}
.sj-hero .sj-btn-on-teal::after { content: "→" / ""; }
.sj-hero .sj-btn-on-teal:hover {
  background: transparent;
  color: var(--sj-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sj-hero .sj-btn-on-teal:focus-visible,
.sj-hero .sj-a-on-teal:focus-visible { outline-color: var(--sj-teal); }

/* ---------- band under every banner ----------
   Deep teal with White writing: the headline credential, then her roles. */
.sj-band {
  background: var(--sj-bg-authority);
  color: var(--sj-text-on-teal);
  padding-block: var(--sj-space-3);
}
.sj-band .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sj-space-1) var(--sj-space-6);
}
.sj-band__lead {
  margin: 0;
  font-family: var(--sj-font-heading);
  font-size: var(--sj-sub);
  font-weight: 600;
  line-height: var(--sj-lh-sub);
}
.sj-band__roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sj-space-1) var(--sj-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sj-secondary);
  font-weight: 600;
  line-height: var(--sj-lh-label);
}

/* ---------- credential band on a light ground ----------
   Guidelines 7.1 page order: "Header and teal hero -> light credentials".
   The band inverts now that the hero carries the teal. */
.sj-credbar {
  background: var(--sj-bg-surface);
  color: var(--sj-text-body);
}
.sj-credbar li + li { border-left-color: rgb(40 91 96 / .22); }
.sj-credbar .sj-figure { color: var(--sj-text-link); }
.sj-credbar .sj-credbar__label { color: var(--sj-text-body); }

/* ==========================================================================
   Homepage sections (SJ Website Updates — Homepage)
   ========================================================================== */

/* ---------- photograph beside copy ----------
   Photograph first on mobile. On desktop the photograph takes five parts to
   the copy's six; --reverse puts it on the right. */
.sj-split { display: grid; gap: var(--sj-space-6); }
@media (min-width: 900px) {
  .sj-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: var(--sj-space-8);
  }
  .sj-split--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .sj-split--reverse > :first-child { order: 2; }
}

/* ---------- "available for" chips ----------
   Labels, not controls: White with Deep teal text (7.62:1) and no border, so
   nothing reads as clickable. */
.sj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sj-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sj-chips li {
  padding: .375rem .875rem;
  border-radius: var(--sj-radius-pill);
  background: var(--sj-bg-page);
  color: var(--sj-text-link);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- three equal routes in the closing band ---------- */
.sj-cta-row { display: grid; gap: var(--sj-space-2); }
@media (min-width: 768px) { .sj-cta-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- post-nominals beside the wordmark ----------
   Footnote-sized and unboxed. Deep teal on White (7.62:1) in the header,
   Sand on Deep teal (5.06:1) in the footer. */
.sj-postnom {
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sj-text-link);
}
footer .sj-postnom { color: var(--sj-sand); }

/* ---------- opportunity cards (About) ----------
   The clinics block's format, four times; the action sits on a common line. */
.sj-opp { display: flex; flex-direction: column; gap: var(--sj-space-3); }
.sj-opp__action { margin-top: auto; padding-top: var(--sj-space-1); }

/* ---------- closing call to action ----------
   A Deep teal card inside a White band, so it never runs into the Deep teal
   footer. One heading, one short line, one action (the homepage keeps its
   three equal routes). */
.sj-closing { background: var(--sj-bg-page); }
/* the closing card follows the standard section gap and keeps a little more
   room below it, before the footer */
.sj-section.sj-closing { padding-block: var(--sj-section-y) var(--sj-cta-y); }
.sj-closing__card {
  display: grid;
  gap: var(--sj-space-4);
  padding: var(--sj-space-6) var(--sj-space-4);
  border-radius: var(--sj-radius);
  background: var(--sj-bg-authority);
  color: var(--sj-text-on-teal);
}
.sj-closing__card h2 { color: var(--sj-white); margin: 0; }
.sj-closing__sub {
  margin: var(--sj-gap-heading) 0 0;
  max-width: 60ch;
  color: var(--sj-text-on-teal);
}
.sj-closing__actions { display: flex; flex-wrap: wrap; gap: var(--sj-space-2); }
@media (min-width: 900px) {
  .sj-closing__card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--sj-space-8);
    padding: var(--sj-space-8);
  }
  .sj-closing__card--stacked { grid-template-columns: minmax(0, 1fr); }
  .sj-closing__card--stacked .sj-closing__actions { display: block; max-width: 48rem; }
}

/* 191026 CTA Updates: a Warm sand card, as in the mock-ups, with a "Let's talk"
   eyebrow, a solid Deep teal action and the booking contacts beneath it.
   The homepage keeps its Deep teal card. */
.sj-closing__card--light {
  background: var(--sj-sand);
  color: var(--sj-text-body);
}
.sj-closing__card--light h2 { color: var(--sj-text-heading); text-wrap: balance; }
.sj-closing__card--light .sj-closing__sub { color: var(--sj-text-body); text-wrap: pretty; }
.sj-closing__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sj-space-3); align-content: start; }
.sj-closing__card--light .sj-closing__actions {
  display: grid;
  width: max-content;
  max-width: 100%;
  gap: var(--sj-space-2);
}
.sj-closing__card--light .sj-btn-primary {
  background: var(--sj-teal);
  color: var(--sj-white);
  border-color: var(--sj-teal);
}
.sj-closing__card--light .sj-btn-primary:hover {
  background: var(--sj-seafoam);
  color: var(--sj-teal);
  border-color: var(--sj-teal);
}
.sj-closing__contact {
  display: grid;
  gap: var(--sj-space-1);
  margin: 0;
  font-size: var(--sj-secondary);
  line-height: var(--sj-lh-caption);
}
.sj-closing__contact a { justify-self: start; white-space: nowrap; }
/* the homepage card keeps its three equal routes across the full width */
.sj-closing__card--stacked.sj-closing__card--light .sj-closing__actions { display: block; width: auto; }
/* one fixed column on phones, so a long button wraps instead of widening the card */
@media (max-width: 899px) {
  .sj-closing__card--light { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- bespoke themes note under the keynote portfolio ---------- */
.sj-bespoke {
  display: grid;
  gap: var(--sj-space-3);
  padding: var(--sj-space-4);
  border-radius: var(--sj-radius);
  border: 1px solid var(--sj-control-border);
  background: var(--sj-bg-page);
}
@media (min-width: 900px) {
  .sj-bespoke { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sj-space-6); padding: var(--sj-space-4) var(--sj-space-6); }
}

/* ---------- opening paragraph directly under a banner ----------
   The following section supplies the space beneath it. */
.sj-section.sj-section-intro { padding-bottom: 0; }
.sj-intro { max-width: 46rem; margin: 0; }

/* ---------- media still (placeholder until the show image is supplied) ---------- */
.sj-media-still {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sj-space-1);
  padding: var(--sj-space-3);
  background: var(--sj-bg-page);
  color: var(--sj-text-link);
  border-bottom: 1px solid var(--sj-seafoam);
  text-align: center;
}
.sj-media-still__title { font-family: var(--sj-font-heading); font-weight: 600; color: var(--sj-text-heading); }
.sj-media-still__note {
  position: absolute;
  top: var(--sj-space-2);
  right: var(--sj-space-2);
  padding: .25rem .625rem;
  border-radius: var(--sj-radius-pill);
  border: 1px solid var(--sj-control-border);
  font-size: var(--sj-label);
  font-weight: 600;
  letter-spacing: var(--sj-track-label);
  text-transform: uppercase;
  color: var(--sj-text-link);
}
.sj-media-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.sj-media-still svg { width: 28px; height: 28px; }

/* ---------- numbered badges ----------
   .sj-figure sets display-size numerals; inside a 32px badge they overflowed
   and read as broken shapes. */
.rounded-full.sj-figure { font-size: .875rem; line-height: 1; }

/* ---------- SJ monogram beside the wordmark ---------- */
.sj-brand__mark { display: block; width: auto; height: 42px; border-radius: 0; }
@media (max-width: 639px) { .sj-brand__mark { height: 34px; } }

/* ---------- Enquire banner ----------
   The homepage banner's layout. Below the desktop breakpoint the portrait
   is cropped shorter, so the form is not pushed a full screen down. */
@media (max-width: 1023px) {
  .sj-hero--enquire .sj-hero__media .sj-ratio-4x5 { aspect-ratio: 4 / 3; }
}
/* the smallest phones: monogram, wordmark and menu button share 320px */
@media (max-width: 374px) {
  .sj-brand { gap: .5rem; }
  .sj-brand__mark { height: 28px; }
}

/* ==========================================================================
   Blog
   ========================================================================== */
.sj-posts {
  display: grid;
  gap: var(--sj-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .sj-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sj-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sj-post-card { height: 100%; }
.sj-post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--sj-radius);
  border: 1px solid transparent;
  background: var(--sj-bg-surface);
  color: var(--sj-text-body);
  text-decoration: none;
  transition: border-color .2s ease;
}
.sj-post-card__link:hover { border-color: var(--sj-control-border); }
.sj-post-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--sj-space-2); padding: var(--sj-space-4); }
.sj-post-card__meta {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--sj-track-label);
  text-transform: uppercase;
  color: var(--sj-text-link);
}
.sj-post-card__title { margin: 0; color: var(--sj-text-heading); }
.sj-post-card__dek { margin: 0; color: var(--sj-text-body); }
.sj-post-card__more {
  margin-top: auto;
  padding-top: var(--sj-space-2);
  font-weight: 600;
  color: var(--sj-text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* a post: one comfortable reading column */
.sj-article { max-width: 44rem; }
.sj-article__feature { margin-bottom: var(--sj-space-6); border: 1px solid var(--sj-seafoam); border-radius: var(--sj-radius); }
.sj-article__body p {
  margin: 0 0 1.25em;
  color: var(--sj-text-body);
}
.sj-article__body .sj-article__shout {
  margin: 1em 0;
  font-family: var(--sj-font-heading);
  font-weight: 700;
  letter-spacing: var(--sj-track-head);
  color: var(--sj-text-link);
}
.sj-article__back { margin-top: var(--sj-space-6); }
.sj-media-still .lucide-image { width: 28px; height: 28px; }