/**
 * @file
 * HABD component library (habd_lib_*), for the content pages. Library
 * beauty/habd.library, theme group, weight 43, after habd-base.css.
 *
 * Markup: templates/paragraph/habd-lib and templates/includes/habd/library.
 * Every selector is scoped to .hl (the band root, which is also .habd and so
 * reads the role tokens of its ground) and uses hl- classes only, so the
 * library and the homepage bands (habd-bands.css) never style each other.
 *
 * Measurements follow the content page designs
 * (docs/design_handoff_content_pages/designs): 86px band padding, 52px
 * serif h2 at weight 300, 19px body at 1.7, white cards with a 1px warm
 * border and 12-20px radius, gold number discs.
 */

/* ==========================================================================
   Grounds the homepage does not have, and ground-specific tokens.
   ========================================================================== */
.habd[data-ground="forest-dark"] { --habd-bg: #0A2016; }
.habd[data-ground="cream-warm"] { --habd-bg: linear-gradient(180deg, var(--habd-cream) 0%, #F7F0DE 100%); }
.habd[data-ground="champagne"] { --habd-bg: #F3EAD5; }
.habd[data-ground="blush"] { --habd-bg: linear-gradient(178deg, #F7E9E3 0%, #FBF3EA 60%, var(--habd-cream) 100%); }
.habd[data-ground="white"] { --habd-bg: #FFFFFF; }
.habd.hl[data-ground="champagne"] { border-top: 1px solid var(--habd-cream-line); border-bottom: 1px solid var(--habd-cream-line); }
.habd.hl[data-ground="blush"] { border-top: 1px solid #EFDCD2; border-bottom: 1px solid #EFDCD2; }
/* Rose label on blush: 5.6:1 on #F7E9E3. */
.habd.hl[data-ground="blush"] { --habd-label: #87563F; }

/* Role tokens for a card whose tone differs from its band's. */
.hl .hl-tone-light {
  --habd-heading: var(--habd-ink);
  --habd-text: var(--habd-ink-body);
  --habd-meta: var(--habd-ink-meta);
  --habd-label: var(--habd-gold-ink);
  --habd-line: var(--habd-cream-line);
  --habd-accent: var(--habd-gold-ink);
  --habd-outline-border: var(--habd-gold-display);
  --habd-outline-text: var(--habd-gold-ink);
  --habd-outline-hover: #F3EAD5;
  --habd-focus: var(--habd-gold-ink);
}
.hl .hl-tone-dark {
  --habd-heading: var(--habd-ink-light);
  --habd-text: var(--habd-ink-light-soft);
  --habd-meta: var(--habd-meta-dark);
  --habd-label: var(--habd-gold);
  --habd-line: var(--habd-forest-line);
  --habd-accent: var(--habd-gold);
  --habd-outline-border: var(--habd-gold);
  --habd-outline-text: var(--habd-gold);
  --habd-outline-hover: rgba(229, 200, 140, 0.1);
  --habd-focus: var(--habd-gold);
}

/* ==========================================================================
   Band frame.
   ========================================================================== */
/* style.css gives main.px-0 overflow:hidden on every page, which makes it a
   scroll container, so the jump strip and the long form's "On this page"
   list could not stick. clip trims the same overflow without being a
   scroll container (as habd-profile.css does for profiles). */
@supports (overflow: clip) {
  main.px-0:has(.hl) {
    overflow: clip;
  }
}
.habd.hl {
  --hl-pad: 86px;
  --hl-h1: clamp(42px, calc(3.4vw + 20px), 76px);
  --hl-h2: clamp(34px, calc(2.2vw + 20px), 54px);
  --hl-h3: clamp(24px, calc(0.8vw + 18px), 30px);
  --hl-body: 19px;
  --hl-card-bg: #FFFFFF;
  --hl-card-line: #EBE3CF;
  --hl-radius: 18px;
  --hl-shadow: 0 16px 36px rgba(31, 29, 26, 0.08);
  position: relative;
  display: block;
  padding-top: var(--hl-pad);
  padding-bottom: var(--hl-pad);
  overflow-wrap: break-word;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.habd.hl[tabindex="-1"]:focus { outline: none; }
.hl .hl-inner {
  position: relative;
  width: 100%;
  max-width: var(--habd-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--habd-gutter);
  padding-right: var(--habd-gutter);
}
@media (max-width: 1024px) {
  .habd.hl { --hl-pad: 72px; }
}
@media (max-width: 640px) {
  .habd.hl { --hl-pad: 56px; --hl-body: 17px; }
}

/* ==========================================================================
   Type: header, label, headings, prose.
   ========================================================================== */
/* Prose rules carry :not(#hl-reset), an ID's weight that matches nothing:
   style.css sets p {margin: 0} at 0,4,2 on every page node
   (body.path-node.page-node-type-page.has-glyphicons p), which would
   otherwise remove the space between paragraphs. */
.hl .hl-label {
  font-family: var(--habd-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-label);
}
.hl .hl-header {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 860px;
}
.hl .hl-header--centre {
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.habd.hl .hl-heading {
  font-weight: 300;
  color: var(--habd-heading);
  text-wrap: balance;
}
.habd.hl .hl-heading--h1 {
  font-size: var(--hl-h1);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.habd.hl :is(.hl-heading--h2, .hl-heading--h3) {
  font-size: var(--hl-h2);
  line-height: 1.04;
}
.hl .hl-accent {
  font-style: italic;
  color: var(--habd-accent);
}
.hl[data-tone="dark"] .hl-accent,
.hl .hl-tone-dark .hl-accent { color: var(--habd-gold); }

.hl .hl-prose {
  font-size: var(--hl-body);
  font-weight: 300;
  line-height: 1.7;
  color: var(--habd-text);
  text-wrap: pretty;
}
.habd.hl:not(#hl-reset) .hl-prose > * + * { margin-top: 16px; }
.hl .hl-lead {
  font-size: 21px;
  line-height: 1.6;
}
.hl .hl-intro { max-width: 760px; }
.habd.hl:not(#hl-reset) .hl-prose :is(h2, h3, h4, h5, h6) {
  font-family: var(--habd-serif) !important;
  font-weight: 400;
  line-height: 1.12;
  color: var(--habd-heading);
}
.habd.hl:not(#hl-reset) .hl-prose :is(h3, h4, h5, h6) { font-size: 26px; }
.habd.hl:not(#hl-reset) .hl-prose > :is(h2, h3, h4, h5, h6):not(:first-child) { margin-top: 28px; }
.habd.hl:not(#hl-reset) .hl-prose > :is(h2, h3, h4, h5, h6) + * { margin-top: 10px; }
.habd.hl:not(#hl-reset) .hl-prose strong { font-weight: 500; color: var(--habd-heading); }
.habd.hl:not(#hl-reset) .hl-prose a {
  color: var(--habd-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.habd.hl:not(#hl-reset) .hl-prose a:hover { text-decoration-thickness: 2px; }
.habd.hl:not(#hl-reset) .hl-prose :is(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 0;
  list-style: none;
}
.habd.hl:not(#hl-reset) .hl-prose ul > li {
  position: relative;
  padding-left: 22px;
}
.habd.hl:not(#hl-reset) .hl-prose ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--habd-gold-deep);
}
.habd.hl:not(#hl-reset) .hl-prose ol { counter-reset: hl-ol; }
.habd.hl:not(#hl-reset) .hl-prose ol > li {
  position: relative;
  padding-left: 34px;
  counter-increment: hl-ol;
}
.habd.hl:not(#hl-reset) .hl-prose ol > li::before {
  content: counter(hl-ol);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--habd-gold);
  color: var(--habd-forest);
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
}
.habd.hl:not(#hl-reset) .hl-prose blockquote {
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--habd-gold-deep);
  font-family: var(--habd-serif);
  font-size: clamp(24px, calc(0.9vw + 17px), 32px);
  font-style: italic;
  line-height: 1.3;
  color: var(--habd-heading);
}
.habd.hl:not(#hl-reset) .hl-prose blockquote :is(cite, footer) {
  display: block;
  margin-top: 12px;
  font-family: var(--habd-sans);
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--habd-label);
}
/* Ticked lists (a tab's box). */
.habd.hl:not(#hl-reset) .hl-prose--ticks ul > li { padding-left: 38px; }
.habd.hl:not(#hl-reset) .hl-prose--ticks ul > li::before {
  content: "✓";
  left: 0;
  top: 0.15em;
  width: 24px;
  height: 24px;
  background: var(--habd-gold);
  color: var(--habd-forest);
  font-size: 13px;
  line-height: 24px;
  text-align: center;
}

/* Buttons, pills. */
.hl .hl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.hl .hl-actions--centre { justify-content: center; }
.hl .hl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.hl .hl-chips--centre { justify-content: center; }
.hl .hl-chip {
  padding: 8px 16px;
  border: 1px solid var(--habd-outline-border);
  border-radius: var(--habd-radius-pill);
  font-size: 14px;
  line-height: 1.3;
  color: var(--habd-heading);
}
.hl[data-tone="dark"] .hl-chip { border-color: rgba(229, 200, 140, 0.45); background: rgba(229, 200, 140, 0.06); }

/* Images and slots. */
.hl .hl-img,
.hl .hl-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hl :is(.hl-hero__media, .hl-media__visual, .hl-card__media) > :is(img, picture, .habd-fallback) {
  display: block;
  width: 100%;
  height: 100%;
}
.hl :is(.hl-hero__media, .hl-media__visual, .hl-card__media) picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Hero.
   ========================================================================== */
.habd.hl-hero {
  --hl-pad: 96px;
  display: flex;
  align-items: center;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}
.habd.hl-hero.hl-hero--background { min-height: 640px; }
.hl-hero .hl-hero__inner {
  display: grid;
  gap: 56px;
  align-items: center;
}
.hl-hero.hl-hero--side .hl-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.hl-hero .hl-hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
}
.hl-hero .hl-hero__content .hl-actions,
.hl-hero .hl-hero__content .hl-chips { margin-top: 10px; }
.hl-hero .hl-hero__media {
  min-height: 460px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--habd-shadow-3);
}
.hl-hero .hl-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hl-hero .hl-hero__backdrop > * { width: 100%; height: 100%; }
.hl-hero .hl-hero__backdrop img { width: 100%; height: 100%; object-fit: cover; }
.hl-hero .hl-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(7, 22, 15, 0.94) 0%, rgba(7, 22, 15, 0.82) 45%, rgba(7, 22, 15, 0.35) 100%);
}
.hl-hero .hl-callout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
  padding: 20px 24px;
  border: 1px solid rgba(201, 162, 74, 0.42);
  border-left: 3px solid var(--habd-gold-deep);
  border-radius: 14px;
  background: rgba(229, 200, 140, 0.1);
}
.hl-hero .hl-callout__text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--habd-heading);
}
.hl-hero .hl-hero__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.hl-hero .hl-fact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  border: 1px solid rgba(229, 200, 140, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.hl-hero[data-tone="light"] .hl-fact { background: #FFFFFF; border-color: var(--hl-card-line); }
@media (max-width: 1024px) {
  .habd.hl-hero { --hl-pad: 84px; }
  .hl-hero.hl-hero--side .hl-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hl-hero .hl-hero__media { min-height: 320px; }
}

/* A soft gold glow on dark heroes, calls to action and photograph bands. */
.hl.hl-hero[data-tone="dark"]::after,
.hl.hl-cta[data-tone="dark"]:not(.hl-cta--panel)::after,
.hl.hl-media--backdrop[data-tone="dark"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hl.hl-hero[data-tone="dark"]::after { background: radial-gradient(60% 70% at 86% 18%, rgba(229, 200, 140, 0.18) 0%, rgba(10, 32, 22, 0) 66%); }
.hl.hl-cta[data-tone="dark"]:not(.hl-cta--panel)::after { background: radial-gradient(58% 80% at 50% 44%, rgba(229, 200, 140, 0.16) 0%, rgba(13, 42, 29, 0) 72%); }
.hl.hl-media--backdrop[data-tone="dark"]::after { background: radial-gradient(60% 60% at 16% 88%, rgba(229, 200, 140, 0.2) 0%, rgba(10, 32, 22, 0) 70%); }
.habd.hl-cta { isolation: isolate; }

/* ==========================================================================
   Facts (strip, hero figures, text and image figures).
   ========================================================================== */
.hl .hl-fact__figure {
  font-family: var(--habd-serif);
  font-size: clamp(36px, calc(1.8vw + 22px), 56px);
  font-weight: 400;
  line-height: 1;
  color: var(--habd-gold);
}
.hl[data-tone="light"] .hl-fact__figure { color: var(--habd-gold-display); }
.hl .hl-fact__label {
  font-size: 14px;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--habd-text);
}
.habd.hl-facts { --hl-pad: 54px; }
.hl-facts .hl-facts__inner {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.hl-facts .hl-facts__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hl-facts .hl-facts__list[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl-facts .hl-facts__list[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hl-facts .hl-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  text-align: center;
}
/* Dividers between facts on the same row only. */
.hl-facts .hl-fact + .hl-fact { border-left: 1px solid var(--habd-line); }
.hl-facts :is([data-count="5"], [data-count="6"]) > .hl-fact:nth-child(3n+1) { border-left: 0; }
@media (max-width: 900px) {
  .hl-facts .hl-facts__list[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-facts .hl-facts__list[data-count] > .hl-fact { border-left: 0; }
  .hl-facts .hl-facts__list[data-count] > .hl-fact:nth-child(even) { border-left: 1px solid var(--habd-line); }
}
@media (max-width: 480px) {
  .hl-facts .hl-facts__list[data-count] { grid-template-columns: minmax(0, 1fr); }
  .hl-facts .hl-facts__list[data-count] > .hl-fact:nth-child(even) { border-left: 0; }
}

/* ==========================================================================
   Text section.
   ========================================================================== */
.hl-section .hl-section__inner {
  display: flex;
  flex-direction: column;
}
.hl-section .hl-section__body {
  max-width: 860px;
  margin-top: 26px;
}
.hl-section.hl-section--centre .hl-section__inner { align-items: center; text-align: center; }
.hl-section.hl-section--centre .hl-section__body { max-width: 780px; }
.hl-section.hl-section--centre .hl-prose :is(ul, ol) { text-align: left; }

/* ==========================================================================
   Long form.
   ========================================================================== */
.hl-long-form .hl-long-form__inner {
  display: grid;
  grid-template-columns: minmax(0, 880px);
  justify-content: center;
  gap: 40px 72px;
}
.hl-long-form.hl-long-form--aside .hl-long-form__inner {
  grid-template-columns: 280px minmax(0, 880px);
  justify-content: start;
}
.hl-long-form .hl-long-form__head { grid-column: 1 / -1; }
.hl-long-form .hl-long-form__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
  position: sticky;
  top: calc(var(--habd-offset-top, 0px) + var(--habd-header-h) + 24px);
}
.hl-long-form .hl-toc {
  padding: 24px;
  border: 1px solid var(--hl-card-line);
  border-radius: 16px;
  background: var(--hl-card-bg);
  --habd-label: var(--habd-gold-ink);
}
.hl-long-form .hl-toc__title { margin-bottom: 14px; }
.hl-long-form .hl-toc__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.habd.hl-long-form .hl-toc__link {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--hl-card-line);
  font-size: 15px;
  line-height: 1.4;
  color: var(--habd-ink-body);
}
.habd.hl-long-form .hl-toc__link:hover,
.habd.hl-long-form .hl-toc__link:focus-visible {
  border-left-color: var(--habd-gold-deep);
  color: var(--habd-ink);
}
.hl-long-form .hl-aside-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border-radius: 16px;
  background: var(--habd-forest);
  color: var(--habd-ink-light-soft);
  --habd-focus: var(--habd-gold);
}
.hl-long-form .hl-aside-card__title {
  font-family: var(--habd-serif);
  font-size: 24px;
  line-height: 1.15;
  color: var(--habd-ink-light);
}
.hl-long-form .hl-aside-card__text { font-size: 16px; line-height: 1.6; }
.hl-long-form .hl-aside-card .habd-btn--green { background: var(--habd-gold); border-color: var(--habd-gold); color: var(--habd-forest); }
.habd.hl:not(#hl-reset) .hl-prose--article { font-size: 20px; line-height: 1.72; }
.habd.hl:not(#hl-reset) .hl-prose--article > * + * { margin-top: 20px; }
.habd.hl:not(#hl-reset) .hl-prose--article > h2 {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--habd-line);
  font-size: clamp(30px, calc(1vw + 22px), 40px);
  font-weight: 400;
  line-height: 1.1;
}
.habd.hl:not(#hl-reset) .hl-prose--article > h2:not(:first-child) { margin-top: 56px; }
.habd.hl:not(#hl-reset) .hl-prose--article > h3 { font-size: 28px; }
.habd.hl:not(#hl-reset) .hl-prose--article > h3:not(:first-child) { margin-top: 36px; }
.habd.hl:not(#hl-reset) .hl-prose--article > h4 { font-size: 22px; }
@media (max-width: 1024px) {
  .hl-long-form.hl-long-form--aside .hl-long-form__inner { grid-template-columns: minmax(0, 1fr); }
  .hl-long-form .hl-long-form__aside { position: static; }
}
@media (max-width: 640px) {
  .habd.hl:not(#hl-reset) .hl-prose--article { font-size: 18px; }
}

/* ==========================================================================
   Two column (and the rows it holds).
   ========================================================================== */
.hl-two-column .hl-two-column__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 64px;
  align-items: start;
}
.hl-two-column .hl-two-column__head .hl-actions { margin-top: 30px; }
.hl-two-column .hl-two-column__side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hl-two-column.hl-two-column--panel .hl-two-column__side {
  padding: 34px;
  border: 1px solid var(--hl-card-line);
  border-radius: 20px;
  background: var(--hl-card-bg);
  box-shadow: var(--hl-shadow);
  --habd-heading: var(--habd-ink);
  --habd-text: var(--habd-ink-body);
  --habd-accent: var(--habd-gold-ink);
  --habd-line: var(--habd-cream-line);
}
.hl-two-column .hl-two-column__rows-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--habd-heading);
}
@media (max-width: 1024px) {
  .hl-two-column .hl-two-column__inner { grid-template-columns: minmax(0, 1fr); }
}

.hl .hl-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hl .hl-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.hl .hl-row__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hl .hl-row__title {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--habd-heading);
}
.hl .hl-row__body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--habd-meta);
}
.hl .hl-row--ticks {
  padding: 20px 24px;
  border: 1px solid var(--hl-card-line);
  border-radius: 12px;
  background: var(--hl-card-bg);
}
.hl .hl-row--ticks .hl-row__mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--habd-gold);
  color: var(--habd-forest);
  font-size: 14px;
}
.hl .hl-rows--rules { gap: 13px; }
.hl .hl-row--rules {
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--habd-line);
}
.hl .hl-row--rules .hl-row__mark {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.8em;
  border-radius: 50%;
  background: var(--habd-gold-deep);
}
.hl .hl-row--rules .hl-row__title { font-weight: 300; color: var(--habd-text); }
.hl .hl-row--rules .hl-row__body { color: var(--habd-meta); }
.hl .hl-row--plain + .hl-row--plain { padding-top: 14px; border-top: 1px solid var(--habd-line); }
.hl .hl-rows--statements { gap: 18px; }
.hl .hl-row--statements {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--habd-line);
}
.hl .hl-row--statements:last-child { border-bottom: 0; padding-bottom: 0; }
.habd.hl .hl-row--statements .hl-row__title {
  font-family: var(--habd-serif);
  font-size: clamp(22px, calc(1vw + 15px), 29px);
  font-weight: 300;
  line-height: 1.34;
}
.hl .hl-row--statements .hl-row__body { font-size: 17px; }

/* ==========================================================================
   Card grid.
   ========================================================================== */
.hl-card-grid .hl-card-grid__inner,
.hl-steps .hl-steps__inner,
.hl-routes .hl-routes__inner,
.hl-quotes .hl-quotes__inner,
.hl-tabs .hl-tabs__inner,
.hl-listing .hl-listing__inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.hl :is(.hl-card-grid__inner, .hl-steps__inner, .hl-quotes__inner) > .hl-actions,
.hl .hl-split__body > .hl-actions { margin-top: 0; }
.hl .hl-card-grid__list,
.hl .hl-steps__list,
.hl .hl-routes__list,
.hl .hl-quotes__list,
.hl .hl-listing__list {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* data-columns is the effective count (hl.grid, capped by the number of
   items in PHP). */
.hl [data-columns="1"] { grid-template-columns: minmax(0, 1fr); }
.hl [data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl [data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hl [data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .hl [data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hl [data-columns="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hl [data-columns] { grid-template-columns: minmax(0, 1fr); }
}

.hl .hl-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hl-card-line);
  border-radius: var(--hl-radius);
  background: linear-gradient(178deg, #FFFFFF 0%, #FDF8EE 100%);
  box-shadow: var(--hl-shadow);
}
.hl[data-ground="blush"] .hl-card { border-color: #F0DFD4; box-shadow: 0 16px 36px rgba(120, 80, 64, 0.13); background: linear-gradient(178deg, #FFFFFF, #FDF6EE); }
.hl .hl-card--dark {
  border-color: rgba(229, 200, 140, 0.22);
  background: linear-gradient(170deg, var(--habd-forest-mid) 0%, var(--habd-forest) 100%);
  box-shadow: var(--habd-shadow-1);
}
.hl .hl-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.hl .hl-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
}
.hl .hl-card__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: linear-gradient(155deg, #F7E7BE, var(--habd-gold-deep));
  box-shadow: 0 10px 22px rgba(201, 162, 74, 0.34);
  font-family: var(--habd-serif);
  font-size: 25px;
  line-height: 1;
  color: #0A2016;
}
.hl .hl-card__kicker {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--habd-label);
}
.habd.hl .hl-card__title {
  font-size: var(--hl-h3);
  font-weight: 400;
  line-height: 1.08;
}
.hl .hl-card__text {
  font-size: 17px;
  line-height: 1.6;
}
.hl .hl-card__action {
  margin-top: auto;
  padding-top: 12px;
}
.habd.hl .hl-card__link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--habd-accent);
}
.habd.hl .hl-card__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   Numbered steps.
   ========================================================================== */
.hl .hl-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 28px;
  border: 1px solid var(--hl-card-line);
  border-radius: var(--hl-radius);
  background: var(--hl-card-bg);
  box-shadow: var(--hl-shadow);
}
.hl[data-tone="dark"] .hl-steps__list .hl-step {
  border-color: rgba(229, 200, 140, 0.2);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}
.hl[data-tone="light"] .hl-steps__list .hl-step {
  --habd-heading: var(--habd-ink);
  --habd-text: var(--habd-ink-body);
}
.hl .hl-step__number {
  font-family: var(--habd-serif);
  font-size: 44px;
  line-height: 1;
  color: var(--habd-gold-display);
}
.hl[data-tone="dark"] .hl-step__number { color: var(--habd-gold); }
.hl .hl-step__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.habd.hl .hl-step__title {
  font-size: var(--hl-h3);
  font-weight: 400;
  line-height: 1.1;
}
.hl .hl-step__text { font-size: 17px; line-height: 1.6; }
.hl .hl-step__detail {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--habd-label);
}
/* One column: a vertical list, number on the left. */
.hl-steps.hl-steps--list .hl-steps__list { max-width: 920px; gap: 14px; }
.hl-steps.hl-steps--list .hl-step {
  flex-direction: row;
  align-items: flex-start;
  gap: 26px;
}
.hl-steps.hl-steps--list .hl-step__number { flex: 0 0 64px; font-size: 40px; }

/* ==========================================================================
   Route cards.
   ========================================================================== */
.hl .hl-routes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl .hl-routes__list[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hl .hl-routes__list[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .hl .hl-routes__list[data-count] { grid-template-columns: minmax(0, 1fr); }
}
.hl .hl-route {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 38px 36px;
  border: 1px solid var(--hl-card-line);
  border-radius: 20px;
  background: var(--hl-card-bg);
  box-shadow: var(--hl-shadow);
  color: var(--habd-text);
}
.hl .hl-route--dark {
  border-color: rgba(229, 200, 140, 0.22);
  background: linear-gradient(170deg, var(--habd-forest-mid) 0%, var(--habd-forest) 70%, var(--habd-forest-deep) 100%);
  box-shadow: var(--habd-shadow-1);
}
.hl .hl-route__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.habd.hl .hl-route__title {
  font-size: clamp(28px, calc(0.8vw + 22px), 36px);
  font-weight: 400;
  line-height: 1.08;
}
.hl .hl-route__note { font-size: 18px; color: var(--habd-meta); }
.hl .hl-route__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hl .hl-route__steps .hl-step {
  flex-direction: row;
  gap: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hl .hl-route__steps .hl-step__number {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--habd-gold);
  font-family: var(--habd-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--habd-forest);
}
.hl .hl-route__steps .hl-step__body { gap: 4px; padding-top: 4px; }
.habd.hl .hl-route__steps .hl-step__title {
  font-family: var(--habd-sans) !important;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}
.hl .hl-route__steps .hl-step__text { font-size: 16px; line-height: 1.55; color: var(--habd-meta); }
.hl .hl-route__action { margin-top: auto; padding-top: 8px; }

/* ==========================================================================
   FAQ accordion.
   ========================================================================== */
.hl-accordion .hl-accordion__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 72px;
  align-items: start;
}
.hl-accordion .hl-accordion__head .hl-actions { margin-top: 30px; }
.hl-accordion .hl-accordion__list {
  padding: 8px 32px;
  border: 1px solid var(--hl-card-line);
  border-radius: 20px;
  background: var(--hl-card-bg);
  box-shadow: var(--hl-shadow);
  --habd-heading: var(--habd-ink);
  --habd-text: var(--habd-ink-body);
  --habd-accent: var(--habd-gold-ink);
  --habd-line: var(--habd-cream-line);
  --habd-focus: var(--habd-gold-ink);
}
.hl .hl-faq + .hl-faq { border-top: 1px solid var(--habd-line); }
.hl .hl-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}
.hl .hl-faq__question::-webkit-details-marker { display: none; }
.hl .hl-faq__title {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--habd-heading);
}
.hl .hl-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--habd-gold-display);
  border-radius: 50%;
}
.hl .hl-faq__icon::before,
.hl .hl-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--habd-gold-ink);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.hl .hl-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.hl .hl-faq[open] .hl-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.hl .hl-faq__answer {
  padding: 0 50px 26px 0;
  font-size: 18px;
}
@media (max-width: 1024px) {
  .hl-accordion .hl-accordion__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hl-accordion .hl-accordion__list { padding: 4px 20px; }
  .hl .hl-faq__answer { padding-right: 0; }
}

/* ==========================================================================
   Quotes.
   ========================================================================== */
.hl .hl-quote {
  display: flex;
  border-radius: var(--hl-radius);
}
.hl .hl-quote__figure {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 32px 30px;
}
.hl .hl-quote--dark {
  border: 1px solid rgba(229, 200, 140, 0.22);
  background: linear-gradient(170deg, var(--habd-forest-mid) 0%, var(--habd-forest) 100%);
  box-shadow: var(--habd-shadow-1);
}
.hl .hl-quote--light {
  border: 1px solid var(--hl-card-line);
  background: var(--hl-card-bg);
  box-shadow: var(--hl-shadow);
}
.hl .hl-quote__stars { letter-spacing: 3px; font-size: 16px; color: var(--habd-gold); }
.hl .hl-quote--light .hl-quote__stars { color: var(--habd-gold-deep); }
.habd.hl .hl-quote__text {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--habd-serif);
  font-size: 23px;
  font-style: italic;
  line-height: 1.4;
  color: var(--habd-heading);
}
.hl .hl-quote__text::before { content: "\201C"; }
.hl .hl-quote__text::after { content: "\201D"; }
.hl .hl-quote__cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--habd-line);
}
.hl .hl-quote--dark .hl-quote__cite { border-top-color: rgba(229, 200, 140, 0.22); }
.hl .hl-quote__name { font-size: 16px; font-weight: 500; color: var(--habd-heading); }
.hl .hl-quote__role { font-size: 14px; color: var(--habd-meta); }
/* One quote: a large pull quote, no card. */
.hl-quotes.hl-quotes--single .hl-quote {
  max-width: 980px;
  margin: 0 auto;
  border: 0;
  background: none;
  box-shadow: none;
}
.hl-quotes.hl-quotes--single .hl-quote__figure { align-items: center; padding: 0; text-align: center; }
.habd.hl-quotes.hl-quotes--single .hl-quote__text { font-size: clamp(28px, calc(1.6vw + 18px), 42px); line-height: 1.3; }
.hl-quotes.hl-quotes--single .hl-quote__cite { align-items: center; border-top: 0; padding-top: 0; }
.hl-quotes.hl-quotes--single .hl-quote__name { font-size: 13px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--habd-label); }
.hl-quotes.hl-quotes--single .hl-quote.hl-tone-dark,
.hl-quotes.hl-quotes--single .hl-quote.hl-tone-light {
  --habd-heading: inherit;
}
.hl-quotes.hl-quotes--single[data-tone="light"] .hl-quote { --habd-heading: var(--habd-ink); --habd-label: var(--habd-gold-ink); --habd-meta: var(--habd-ink-meta); }
.hl-quotes.hl-quotes--single[data-tone="dark"] .hl-quote { --habd-heading: var(--habd-ink-light); --habd-label: var(--habd-gold); --habd-meta: var(--habd-meta-dark); }

/* ==========================================================================
   Call to action.
   ========================================================================== */
.habd.hl-cta { --hl-pad: 96px; }
.hl-cta .hl-cta__box {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.hl-cta.hl-cta--centre .hl-cta__box { align-items: center; text-align: center; }
.hl-cta.hl-cta--centre .hl-header { max-width: 900px; }
.hl-cta .hl-cta__body { max-width: 720px; margin-top: 18px; }
.hl-cta.hl-cta--centre .hl-cta__body { margin-left: auto; margin-right: auto; }
.hl-cta .hl-cta__end .hl-actions { margin-top: 0; }
.hl-cta .hl-cta__note { margin-top: 16px; font-size: 14px; color: var(--habd-meta); }
.hl-cta.hl-cta--left .hl-cta__box {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px 64px;
}
.hl-cta.hl-cta--left .hl-cta__end { flex: 0 0 auto; }
@media (max-width: 900px) {
  .hl-cta.hl-cta--left .hl-cta__box { flex-direction: column; align-items: flex-start; }
}
/* As a panel: the band sits on the page's cream, the box carries the
   ground. */
.habd.hl.hl-cta--panel {
  --hl-pad: 64px;
  background: var(--habd-cream);
  border: 0;
}
.hl-cta.hl-cta--panel .hl-cta__box {
  padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 72px);
  border-radius: 24px;
  background: var(--habd-bg);
  box-shadow: var(--habd-shadow-3);
}
.hl-cta.hl-cta--panel[data-tone="light"] .hl-cta__box { box-shadow: var(--hl-shadow); border: 1px solid var(--hl-card-line); }

/* ==========================================================================
   Notice.
   ========================================================================== */
.habd.hl-notice { --hl-pad: 56px; }
.hl-notice .hl-notice__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 32px;
  border: 1px solid rgba(201, 162, 74, 0.42);
  border-left: 3px solid var(--habd-gold-deep);
  border-radius: 14px;
  background: rgba(229, 200, 140, 0.1);
}
.habd.hl-notice .hl-notice__text { font-size: 20px; line-height: 1.6; color: var(--habd-heading); }

/* ==========================================================================
   Jump strip.
   ========================================================================== */
.habd.hl-jump {
  --hl-pad: 18px;
  border-bottom: 1px solid var(--habd-line);
}
/* Sticky under the toolbar and the sticky header. Each band sits in its
   own field item, which a sticky element cannot leave, so the item holding
   the strip sticks. Where the header does not stick (habd-shell.css:
   below 1280px without JS, and short viewports) the strip sits under the
   toolbar alone. Jump targets and focus land clear of both (WCAG 2.4.11);
   76px is the strip's height. */
.field--item:has(> .hl-jump) {
  position: sticky;
  top: calc(var(--habd-offset-top, 0px) + var(--habd-header-h));
  z-index: 5;
}
html:has(.hl-jump) {
  scroll-padding-top: calc(var(--habd-offset-top, 0px) + var(--habd-header-h) + 76px + 12px) !important;
}
@media (max-width: 1279px) {
  html:not(.habd-js) .field--item:has(> .hl-jump) { top: var(--habd-offset-top, 0px); }
  html:not(.habd-js):has(.hl-jump) { scroll-padding-top: calc(var(--habd-offset-top, 0px) + 76px + 12px) !important; }
}
@media (max-height: 500px) {
  .field--item:has(> .hl-jump) { position: static; }
  html:has(.hl-jump) { scroll-padding-top: calc(var(--habd-offset-top, 0px) + 12px) !important; }
}
.hl-jump .hl-jump__inner {
  display: flex;
  align-items: center;
  gap: 18px 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hl-jump .hl-jump__inner::-webkit-scrollbar { display: none; }
.hl-jump .hl-jump__label { flex: 0 0 auto; }
.hl-jump .hl-jump__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.habd.hl-jump .hl-jump__link {
  display: inline-flex;
  padding: 9px 18px;
  border: 1px solid var(--habd-outline-border);
  border-radius: var(--habd-radius-pill);
  font-size: 14px;
  white-space: nowrap;
  color: var(--habd-heading);
  transition: background-color 0.2s ease;
}
.habd.hl-jump .hl-jump__link:hover,
.habd.hl-jump .hl-jump__link:focus-visible { background: var(--habd-outline-hover); color: var(--habd-heading); }

/* ==========================================================================
   Text and image.
   ========================================================================== */
.hl-media .hl-media__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px 80px;
  align-items: center;
}
.hl-media.hl-media--image-right .hl-media__visual { order: 2; }
.hl-media .hl-media__visual {
  min-height: 460px;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--hl-shadow);
}
.hl-media .hl-media__content {
  display: flex;
  flex-direction: column;
}
.hl-media .hl-media__body { margin-top: 24px; }
.hl-media .hl-media__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px;
  margin: 32px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--habd-line);
  list-style: none;
}
.hl-media .hl-fact { display: flex; flex-direction: column; gap: 6px; }
.hl-media .hl-fact__figure { font-size: 40px; }
.hl-media .hl-fact__label { font-size: 13px; }
/* Photograph behind the text. */
.habd.hl-media--backdrop {
  display: flex;
  align-items: flex-end;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}
.hl-media.hl-media--backdrop .hl-media__inner { grid-template-columns: minmax(0, 1fr); }
.hl-media.hl-media--backdrop .hl-header { max-width: 980px; }
.hl-media.hl-media--backdrop .hl-media__body { max-width: 720px; }
.habd.hl-media--backdrop .hl-heading--h2 { font-size: clamp(42px, calc(4vw + 16px), 88px); font-weight: 400; line-height: 0.96; }
.hl-media .hl-media__backdrop { position: absolute; inset: 0; z-index: -2; }
.hl-media .hl-media__backdrop > * { width: 100%; height: 100%; }
.hl-media .hl-media__backdrop img { width: 100%; height: 100%; object-fit: cover; }
.hl-media .hl-media__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(7, 22, 15, 0.97) 0%, rgba(7, 22, 15, 0.97) 34%, rgba(7, 22, 15, 0.72) 58%, rgba(7, 22, 15, 0.3) 100%);
}
@media (max-width: 1024px) {
  .habd.hl-media--backdrop { min-height: 480px; }
  .hl-media .hl-media__inner { grid-template-columns: minmax(0, 1fr); }
  .hl-media.hl-media--image-right .hl-media__visual { order: 0; }
  .hl-media .hl-media__visual { min-height: 300px; }
}

/* ==========================================================================
   Listing.
   ========================================================================== */
.hl-listing .hl-listing__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.hl .hl-listing__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .hl .hl-listing__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hl .hl-listing__list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Tabs.
   ========================================================================== */
.hl .hl-tabs {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hl .hl-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hl .hl-tabs__list[hidden] { display: none; }
.habd.hl .hl-tabs__tab {
  padding: 12px 22px;
  border: 1px solid var(--habd-cream-line);
  border-radius: var(--habd-radius-pill);
  background: #FFFFFF;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--habd-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.habd.hl .hl-tabs__tab:hover { background: #F7F0DE; }
.habd.hl .hl-tabs__tab.is-active,
.habd.hl .hl-tabs__tab[aria-selected="true"] {
  border-color: var(--habd-forest);
  background: var(--habd-forest);
  color: var(--habd-gold);
}
.hl .hl-tabs__panels {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hl .hl-tab {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--hl-card-line);
  border-radius: 20px;
  background: var(--hl-card-bg);
  box-shadow: var(--hl-shadow);
  --habd-heading: var(--habd-ink);
  --habd-text: var(--habd-ink-body);
  --habd-meta: var(--habd-ink-meta);
  --habd-label: var(--habd-gold-ink);
  --habd-accent: var(--habd-gold-ink);
  --habd-line: var(--habd-cream-line);
  --habd-focus: var(--habd-gold-ink);
}
.hl .hl-tab[hidden] { display: none; }
.habd.hl .hl-tab__heading {
  font-size: clamp(30px, calc(1vw + 22px), 40px);
  font-weight: 400;
  line-height: 1.08;
}
.hl .hl-tab__text { max-width: 880px; }
.hl .hl-tab__box {
  padding: 28px 30px;
  border: 1px solid var(--habd-cream-line);
  border-radius: 16px;
  background: #F3EAD5;
  font-size: 17px;
}
.habd.hl:not(#hl-reset) .hl-tab__box > :is(h3, h4, h5, h6) {
  font-family: var(--habd-sans) !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-gold-ink);
}
.habd.hl:not(#hl-reset) .hl-tab__box > :is(h3, h4, h5, h6):not(:first-child) { margin-top: 26px; }
.habd.hl:not(#hl-reset) .hl-tab__box > h5 {
  font-family: var(--habd-serif) !important;
  font-size: 21px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--habd-ink);
}

/* ==========================================================================
   Forced colours.
   ========================================================================== */
@media (forced-colors: active) {
  .hl :is(.hl-card, .hl-step, .hl-route, .hl-tab, .hl-row--ticks, .hl-accordion__list, .hl-notice__box, .hl-toc) {
    border: 1px solid CanvasText;
  }
}

/* ==========================================================================
   Options added after the first pages were mapped.
   ========================================================================== */

/* Captions under a photograph (hero beside the text, text and image). */
.hl :is(.hl-hero__media, .hl-media__visual) { position: relative; margin: 0; }
.hl .hl-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  border-radius: var(--habd-radius-pill);
  background: rgba(7, 22, 15, 0.78);
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--habd-ink-light);
}

/* Facts as small gold capitals over a line. */
.hl-facts.hl-facts--labels .hl-fact { gap: 10px; }
.habd.hl-facts--labels .hl-fact__figure {
  font-family: var(--habd-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-gold);
}
.hl-facts--labels[data-tone="light"] .hl-fact__figure { color: var(--habd-gold-ink); }
.habd.hl-facts--labels .hl-fact__label {
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

/* Card titles as small gold capitals. */
.habd.hl-card-grid--labels .hl-card__title {
  font-family: var(--habd-sans) !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--habd-label);
}
.hl-card-grid--labels .hl-card__body { gap: 12px; }

/* A line under the cards, steps or route cards. */
.hl .hl-band-note {
  font-size: 17px;
  line-height: 1.6;
  color: var(--habd-meta);
}
.hl :is(.hl-card-grid__inner, .hl-steps__inner, .hl-routes__inner) > .hl-band-note { margin-top: -16px; }
.hl .hl-band-note--centre { text-align: center; }

/* Header beside the items (card grid, quotes: align 'side'). */
.hl .hl-split__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hl.hl-split :is(.hl-card-grid__inner, .hl-quotes__inner) {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 64px;
  align-items: start;
}
.hl.hl-split .hl-split__head .hl-actions { margin-top: 30px; }
.habd.hl.hl-split .hl-heading--h2 { font-size: clamp(30px, calc(1.2vw + 20px), 44px); }
.hl.hl-split .hl-split__body > .hl-actions { margin-top: 0; }
@media (max-width: 1024px) {
  .hl.hl-split :is(.hl-card-grid__inner, .hl-quotes__inner) { grid-template-columns: minmax(0, 1fr); }
}

/* Whole card is the link: the title link covers the card. */
.hl .hl-card--whole { position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hl .hl-card--whole .hl-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.hl .hl-card--whole:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(31, 29, 26, 0.14); }
.hl .hl-card--whole:hover .hl-card__link { text-decoration: underline; text-underline-offset: 4px; }
.habd.hl .hl-card--whole .hl-card__cover:focus-visible { outline: none; }
.hl .hl-card--whole:has(.hl-card__cover:focus-visible) { outline: 2px solid var(--habd-focus); outline-offset: 3px; }

/* Five and six columns. */
.hl [data-columns="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hl [data-columns="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .hl :is([data-columns="5"], [data-columns="6"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hl :is([data-columns="5"], [data-columns="6"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hl :is([data-columns="5"], [data-columns="6"]) { grid-template-columns: minmax(0, 1fr); }
}
.hl [data-columns="5"] .hl-card__body,
.hl [data-columns="6"] .hl-card__body { padding: 24px 22px; }
.hl :is([data-columns="5"], [data-columns="6"]) .hl-step { padding: 24px 22px; }

/* Text and image, centred. */
.hl-media.hl-media--centre .hl-media__content { align-items: center; text-align: center; }
.hl-media.hl-media--backdrop.hl-media--centre { align-items: center; }
.hl-media.hl-media--backdrop.hl-media--centre .hl-header,
.hl-media.hl-media--backdrop.hl-media--centre .hl-media__body { margin-left: auto; margin-right: auto; }
.hl-media.hl-media--backdrop.hl-media--centre .hl-media__scrim {
  background: radial-gradient(90% 90% at 50% 50%, rgba(7, 22, 15, 0.9) 0%, rgba(7, 22, 15, 0.72) 60%, rgba(7, 22, 15, 0.55) 100%);
}

/* Two column: an image under the left-hand text. */
.hl-two-column .hl-two-column__media {
  margin-top: 30px;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--hl-shadow);
}
.hl-two-column .hl-two-column__media > * { width: 100%; height: 100%; }
.hl-two-column .hl-two-column__media img { width: 100%; height: 100%; object-fit: cover; }

/* Quote: a linked name. */
.habd.hl a.hl-quote__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Statement. */
.habd.hl-statement { --hl-pad: 72px; }
.hl-statement .hl-statement__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hl-statement.hl-statement--centre .hl-statement__inner { align-items: center; text-align: center; }
.hl .hl-statement__text {
  max-width: 1000px;
  font-family: var(--habd-serif);
  font-size: clamp(28px, calc(1.8vw + 18px), 46px);
  font-weight: 300;
  line-height: 1.22;
  color: var(--habd-heading);
  text-wrap: balance;
}
.habd.hl:not(#hl-reset) .hl-statement__text > * + * { margin-top: 12px; }
.hl .hl-statement__text :is(em, strong) { font-style: italic; font-weight: 300; color: var(--habd-accent); }
.hl[data-tone="dark"] .hl-statement__text :is(em, strong) { color: var(--habd-gold); }
.habd.hl .hl-statement__text a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Italic in text. */
.habd.hl:not(#hl-reset) .hl-prose em { font-style: italic; }

/* "As a panel" (text section, two column): the band sits on the page's
   cream and its inner box carries the ground, as the call to action's
   panel does. */
.habd.hl.hl--boxed {
  --hl-pad: 56px;
  background: var(--habd-cream);
  border: 0;
}
.hl.hl--boxed > .hl-inner > * { position: relative; }
.hl.hl--boxed > .hl-inner {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
  border-radius: 24px;
  background: var(--habd-bg);
  box-shadow: var(--habd-shadow-3);
  max-width: calc(var(--habd-max) - 2 * var(--habd-gutter));
  padding-left: clamp(24px, 5vw, 72px);
  padding-right: clamp(24px, 5vw, 72px);
}
.hl.hl--boxed[data-tone="light"] > .hl-inner { box-shadow: var(--hl-shadow); border: 1px solid var(--habd-cream-line); }
@media (max-width: 1488px) {
  .hl.hl--boxed > .hl-inner { width: calc(100% - 2 * var(--habd-gutter)); }
}

/* A band that continues the one before it (same ground, no label or
   heading; flagged by beauty_preprocess_node__page__full()). */
.habd.hl.hl--continues { padding-top: 0; }
.habd.hl.hl--continues[data-ground="champagne"],
.habd.hl.hl--continues[data-ground="blush"] { border-top: 0; }
/* On a gradient ground the continuing band takes the gradient's end
   colour, so there is no seam where the gradient would start again. */
.habd.hl.hl--continues[data-ground="forest-gradient"] { --habd-bg: var(--habd-forest-deep); }
.habd.hl.hl--continues[data-ground="cream-warm"] { --habd-bg: #F7F0DE; }
.habd.hl.hl--continues[data-ground="blush"] { --habd-bg: var(--habd-cream); }

/* Buttons never overflow a narrow screen: long labels wrap, and the large
   size steps down on phones. */
.habd.hl .hl-actions .habd-btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
.hl .hl-cta__end { max-width: 100%; }
@media (max-width: 640px) {
  .habd.hl .hl-actions .habd-btn--l {
    padding: 18px 28px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Components and options from the v2 design sheets
   (docs/design_handoff_content_pages 2/pages): article with contents,
   callout, definition rows, people, rate cards; FAQ layouts, ruled cards,
   number styles, button styles, full-bleed photographs.
   ========================================================================== */

/* An image area with no image yet: a plain warm box, no text (v2 README:
   "Image areas are empty, with no text"). */
.habd.hl .habd-fallback--empty {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: inherit;
  background: #EFE8D8;
}

/* A dark card on a blush band keeps its forest ground (the blush card rule
   is more specific than .hl-card--dark). */
.hl[data-ground="blush"] .hl-card.hl-card--dark {
  border-color: rgba(229, 200, 140, 0.22);
  background: linear-gradient(170deg, var(--habd-forest-mid) 0%, var(--habd-forest) 100%);
  box-shadow: var(--habd-shadow-1);
}

/* Facts strip: left aligned, no dividers (every sheet). */
.habd.hl-facts { --hl-pad: 40px; }
.hl-facts .hl-facts__list { gap: 32px 40px; }
.hl-facts .hl-fact {
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  text-align: left;
}
.hl-facts .hl-fact + .hl-fact,
.hl-facts .hl-facts__list[data-count] > .hl-fact:nth-child(even) { border-left: 0; }
.habd.hl-facts--figures .hl-fact__figure { font-size: clamp(38px, 4vw, 58px); line-height: 0.92; }
.hl-facts .hl-fact__label { letter-spacing: 0.16em; color: var(--habd-meta); }

/* Pills in a band's text: gold on a gold tint. */
.hl:not(.hl-hero) .hl-chips { gap: 10px 12px; }
.hl:not(.hl-hero) .hl-chip {
  padding: 11px 20px;
  border-color: rgba(201, 162, 74, 0.4);
  background: rgba(229, 200, 140, 0.14);
  font-size: 15px;
  color: var(--habd-gold-ink);
}
.hl:not(.hl-hero)[data-tone="dark"] .hl-chip { color: var(--habd-gold); }

/* Buttons as text links. */
.hl .hl-actions--text { gap: 12px 28px; }

/* --------------------------------------------------------------------------
   Card and step styles.
   -------------------------------------------------------------------------- */
/* Ruled: open columns under a 2px gold rule, no card. */
.hl-card-grid--ruled .hl-card-grid__list { gap: 32px 40px; }
.hl .hl-card-grid--ruled .hl-card,
.hl-card-grid--ruled .hl-card,
.hl[data-ground="blush"].hl-card-grid--ruled .hl-card {
  overflow: visible;
  border: 0;
  border-top: 2px solid var(--habd-gold-deep);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hl-card-grid--ruled .hl-card__body { padding: 22px 0 0; }
.hl-steps--ruled .hl-steps__list { gap: 28px 32px; }
.hl-steps--ruled .hl-step,
.hl[data-tone="dark"].hl-steps--ruled .hl-steps__list .hl-step {
  padding: 22px 0 0;
  border: 0;
  border-top: 2px solid var(--habd-gold-deep);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Numbers: a forest disc with a gold numeral, or a plain gold numeral. */
.hl-numbers--forest .hl-card__number {
  background: var(--habd-forest);
  box-shadow: 0 10px 22px rgba(13, 42, 29, 0.22);
  color: var(--habd-gold);
}
.hl-numbers--forest .hl-card--dark .hl-card__number { background: rgba(229, 200, 140, 0.14); box-shadow: none; }
.hl-numbers--plain .hl-card__number {
  justify-content: flex-start;
  width: auto;
  height: auto;
  margin-bottom: 4px;
  background: none;
  box-shadow: none;
  font-size: 34px;
  color: var(--habd-gold-display);
}
.hl-numbers--plain .hl-card--dark .hl-card__number { color: var(--habd-gold); }

/* --------------------------------------------------------------------------
   FAQ layouts.
   -------------------------------------------------------------------------- */
/* Stacked: the header above, one white card per question. */
.hl-accordion.hl-accordion--stacked .hl-accordion__inner,
.hl-accordion.hl-accordion--grid .hl-accordion__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}
.hl-accordion--stacked .hl-accordion__list,
.hl-accordion--grid .hl-accordion__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hl-accordion--stacked .hl-faq,
.hl-accordion--stacked .hl-faq + .hl-faq {
  overflow: hidden;
  border: 1px solid var(--habd-cream-line);
  border-radius: 14px;
  background: #FFFFFF;
}
.hl-accordion--stacked .hl-faq__question { padding: 26px 30px; gap: 30px; }
.hl-accordion--stacked .hl-faq__title { font-size: 20px; font-weight: 400; line-height: 1.35; }
.hl-accordion--stacked .hl-faq__icon { width: 34px; height: 34px; border-color: #E3DBC8; }
.hl-accordion--stacked .hl-faq__answer { padding: 0 80px 28px 30px; }
/* Grid: every answer open, two columns of cards. */
.hl-accordion--grid .hl-accordion__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.hl .hl-faq--open,
.hl .hl-faq--open + .hl-faq--open {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 26px 30px 28px;
  border: 1px solid var(--habd-cream-line);
  border-radius: 16px;
  background: #FFFFFF;
}
.habd.hl .hl-faq--open .hl-faq__title {
  font-family: var(--habd-sans) !important;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.34;
}
.hl .hl-faq--open .hl-faq__answer { padding: 0; font-size: 18px; line-height: 1.66; }
@media (max-width: 900px) {
  .hl-accordion--grid .hl-accordion__list { grid-template-columns: minmax(0, 1fr); }
  .hl-accordion--stacked .hl-faq__answer { padding-right: 30px; }
}

/* --------------------------------------------------------------------------
   Text and image: the photograph fills its half, edge to edge.
   -------------------------------------------------------------------------- */
.habd.hl-media--bleed { padding-top: 0; padding-bottom: 0; }
.hl-media.hl-media--bleed .hl-media__inner {
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1.15fr);
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}
.hl-media.hl-media--bleed.hl-media--image-right .hl-media__inner { grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr); }
.hl-media.hl-media--bleed .hl-media__visual {
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background: #EFE8D8;
  box-shadow: 0 24px 54px rgba(90, 74, 32, 0.2);
}
.hl-media.hl-media--bleed .hl-media__content { padding: 84px var(--habd-gutter); }
@media (max-width: 1024px) {
  .hl-media.hl-media--bleed .hl-media__inner,
  .hl-media.hl-media--bleed.hl-media--image-right .hl-media__inner { grid-template-columns: minmax(0, 1fr); }
  .hl-media.hl-media--bleed .hl-media__visual { aspect-ratio: 4 / 3; }
  .hl-media.hl-media--bleed .hl-media__content { padding: 56px var(--habd-gutter); }
}

/* --------------------------------------------------------------------------
   Article with contents: a sticky panel beside one 880px reading column.
   -------------------------------------------------------------------------- */
.habd.hl-article { padding-top: 56px; padding-bottom: 86px; }
.hl-article .hl-article__inner {
  display: grid;
  grid-template-columns: minmax(0, 880px);
  justify-content: center;
  gap: 56px;
  align-items: start;
}
.hl-article.hl-article--aside .hl-article__inner {
  grid-template-columns: 280px minmax(0, 880px);
  justify-content: start;
}
.hl-article .hl-article__aside {
  position: sticky;
  top: calc(var(--habd-offset-top, 0px) + var(--habd-header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: calc(100vh - var(--habd-offset-top, 0px) - var(--habd-header-h) - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.hl-article .hl-toc {
  padding: 24px 24px 26px;
  border: 1px solid #EBE3CF;
  border-radius: 16px;
  background: #FFFFFF;
}
.hl-article .hl-toc__title {
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--habd-gold-display);
}
.hl-article .hl-toc__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.habd.hl-article .hl-toc__link {
  display: block;
  padding: 6px 0;
  border-bottom: 1px solid #F5EFE0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.32;
  color: #3F3A31;
}
.habd.hl-article .hl-toc__link:hover,
.habd.hl-article .hl-toc__link:focus-visible { color: var(--habd-ink); text-decoration: underline; text-underline-offset: 3px; }
.hl-article .hl-aside-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 26px;
  border-radius: 16px;
  background: var(--habd-forest);
  --habd-focus: var(--habd-gold);
  --habd-outline-border: var(--habd-gold);
  --habd-outline-text: var(--habd-gold);
  --habd-outline-hover: rgba(229, 200, 140, 0.1);
}
.hl-article .hl-aside-card__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-gold);
}
.hl-article .hl-aside-card__text { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--habd-ink-light-soft); }
.hl-article .hl-aside-card__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.hl-article .hl-aside-card__actions .habd-btn { justify-content: center; text-align: center; white-space: normal; }
.hl-article .hl-article__column {
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-width: 0;
}
@media (max-width: 1100px) {
  .hl-article.hl-article--aside .hl-article__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hl-article .hl-article__aside { position: static; max-height: none; overflow: visible; }
}

/* A block in the article: no band frame, the column's type. */
.habd.hl.hl--in-article {
  --hl-body: 20px;
  --hl-h2: clamp(30px, calc(1vw + 22px), 40px);
  --hl-h3: 28px;
  padding: 0;
  border: 0;
  background: none;
}
.hl.hl--in-article > .hl-inner { max-width: none; padding-left: 0; padding-right: 0; }
.hl-article__column > .hl--follows { margin-top: -30px; }
.hl.hl--in-article .hl-header { gap: 16px; max-width: none; }
.hl.hl--in-article .hl-label { font-size: 12px; letter-spacing: 0.2em; }
.habd.hl.hl--in-article .hl-heading--h2 {
  font-size: var(--hl-h2);
  font-weight: 400;
  line-height: 1.06;
}
.habd.hl.hl--in-article:not(.hl--article-panel) .hl-heading--h2 { border-bottom: 1px solid var(--habd-cream-line); }
.habd.hl.hl--in-article:not(#hl-reset) .hl-prose { line-height: 1.72; }
.hl.hl--in-article :is(.hl-card-grid__inner, .hl-steps__inner, .hl-quotes__inner, .hl-routes__inner, .hl-definitions__inner, .hl-people__inner, .hl-rates__inner) { gap: 18px; }
.hl.hl--in-article :is(.hl-card-grid__list, .hl-steps__list, .hl-quotes__list) { gap: 18px; }
.hl.hl--in-article .hl-card { border-radius: 16px; }
.hl.hl--in-article .hl-card__body { padding: 30px 32px 32px; gap: 12px; }
.hl.hl--in-article .hl-card__text { font-size: 18px; line-height: 1.65; }
.hl.hl--in-article [data-columns="3"],
.hl.hl--in-article [data-columns="4"] { gap: 16px; }
.hl.hl--in-article .hl-actions { margin-top: 6px; }
.hl.hl--in-article.hl-long-form .hl-long-form__inner { display: flex; flex-direction: column; gap: 18px; }
.hl.hl--in-article.hl-accordion .hl-accordion__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.hl.hl--in-article.hl-statement .hl-statement__text { max-width: none; font-size: 32px; font-weight: 400; line-height: 1.16; }
/* On a ground other than the page's cream, the block is a rounded panel. */
.habd.hl.hl--in-article.hl--article-panel {
  padding: 44px 46px 46px;
  border-radius: 20px;
  background: var(--habd-bg);
}
.hl.hl--in-article.hl--article-panel[data-tone="light"] { border: 1px solid var(--habd-cream-line); }
@media (max-width: 640px) {
  .habd.hl.hl--in-article { --hl-body: 18px; }
  .habd.hl.hl--in-article.hl--article-panel { padding: 30px 24px; }
}

/* --------------------------------------------------------------------------
   Callout.
   -------------------------------------------------------------------------- */
.habd.hl-callout { --hl-pad: 56px; }
.hl-callout .hl-callout__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  max-width: 980px;
}
.hl.hl--in-article .hl-callout__box { max-width: none; }
.hl-callout .hl-callout__main {
  display: flex;
  flex: 1 1 420px;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.hl-callout .hl-callout__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-gold-display);
}
.hl-callout .hl-callout__title {
  font-family: var(--habd-serif);
  font-size: clamp(24px, calc(0.8vw + 18px), 30px);
  line-height: 1.16;
  color: var(--habd-forest);
}
.habd.hl-callout:not(#hl-reset) .hl-callout__text { font-size: 19px; line-height: 1.65; }
.habd.hl-callout:not(#hl-reset) .hl-callout__text > * + * { margin-top: 10px; }
.habd.hl-callout:not(#hl-reset) .hl-callout__text strong { font-weight: 400; color: var(--habd-ink); }
.hl-callout .hl-callout__note {
  font-family: var(--habd-serif);
  font-size: clamp(22px, calc(0.6vw + 18px), 28px);
  line-height: 1.2;
  color: var(--habd-gold-ink);
}
.hl-callout .hl-callout__figure {
  flex: none;
  font-family: var(--habd-serif);
  font-size: 56px;
  line-height: 0.92;
  color: var(--habd-gold-ink);
}
.hl-callout .hl-callout__caption { max-width: 560px; font-size: 19px; font-weight: 300; line-height: 1.6; color: var(--habd-text); }
.hl-callout .hl-callout__end { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; }
.hl-callout .hl-callout__end .hl-callout__figure { font-size: clamp(44px, calc(2vw + 26px), 62px); }
.hl-callout .hl-callout__caption--under { font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--habd-meta); }
.hl-callout .hl-actions { margin-top: 8px; }
.hl-callout--stat .hl-callout__box { flex-wrap: wrap; justify-content: flex-start; gap: 20px 40px; }
.hl-callout--stat .hl-callout__main { flex: 0 1 560px; }
/* Panels. */
.hl-callout--cream .hl-callout__box {
  padding: 26px 30px;
  border-left: 3px solid var(--habd-gold-deep);
  border-radius: 0 14px 14px 0;
  background: #F3EAD5;
}
.hl-callout--champagne .hl-callout__box {
  padding: 32px 36px;
  border: 1px solid var(--habd-cream-line);
  border-radius: 16px;
  background: #F3EAD5;
}
.hl-callout--champagne.hl-callout--stat .hl-callout__box { padding: 30px 34px; }
.hl-callout--dark .hl-callout__box {
  padding: 32px 36px;
  border-radius: 16px;
  background: var(--habd-forest);
}
.hl-callout--gold .hl-callout__box {
  padding: 36px 38px;
  border: 1px solid rgba(201, 162, 74, 0.45);
  border-radius: 18px;
  background: rgba(229, 200, 140, 0.1);
}
.hl-callout--white .hl-callout__box {
  padding: 30px 32px;
  border: 1px solid #EBE3CF;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(90, 74, 32, 0.07);
}
.hl-callout .hl-tone-dark .hl-callout__label { color: var(--habd-gold); }
.hl-callout .hl-tone-dark .hl-callout__title { color: var(--habd-ink-light); }
.habd.hl-callout:not(#hl-reset) .hl-tone-dark .hl-callout__text strong { color: var(--habd-ink-light); }
.hl-callout .hl-tone-dark :is(.hl-callout__note, .hl-callout__figure) { color: var(--habd-gold); }
.hl-callout .hl-tone-dark .hl-callout__caption { color: var(--habd-ink-light-soft); }
@media (max-width: 640px) {
  .hl-callout :is(.hl-callout--dark, .hl-callout--gold, .hl-callout--white) .hl-callout__box { padding: 26px 22px; }
  .hl-callout .hl-callout__end { align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Definition rows.
   -------------------------------------------------------------------------- */
.hl-definitions .hl-definitions__inner { display: flex; flex-direction: column; gap: 34px; }
.hl .hl-definitions__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hl .hl-definitions__list > .hl-definition {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: baseline;
  padding: 24px 28px;
  border: 1px solid #EBE3CF;
  border-radius: 14px;
  background: #FFFFFF;
}
.hl .hl-definition__term { font-size: 19px; font-weight: 400; line-height: 1.35; color: var(--habd-ink); }
.habd.hl:not(#hl-reset) .hl-definition__text { font-size: 18px; line-height: 1.6; }
.hl-definitions--inline .hl-definitions__list { gap: 11px; }
.hl.hl-definitions--inline .hl-definitions__list > .hl-definition {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px;
  border-radius: 12px;
}
.hl-definitions--inline .hl-definition__mark {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.75em;
  border-radius: 50%;
  background: var(--habd-gold-deep);
}
.hl-definitions--inline .hl-definition__line { font-size: 19px; font-weight: 300; line-height: 1.6; color: var(--habd-ink-body); }
.hl-definitions--inline .hl-definition__term { display: inline; font-weight: 500; }
.hl-definitions--inline .hl-definition__text { display: inline; }
.habd.hl-definitions--inline:not(#hl-reset) .hl-definition__text { font-size: inherit; }
.hl-definitions--inline .hl-definition__text > p:first-child { display: inline; }
@media (max-width: 900px) {
  .hl .hl-definitions__list > .hl-definition { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* --------------------------------------------------------------------------
   People.
   -------------------------------------------------------------------------- */
.hl-people .hl-people__inner { display: flex; flex-direction: column; gap: 32px; }
.hl .hl-people__list {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hl .hl-person {
  border: 1px solid #EBE3CF;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 16px 36px rgba(90, 74, 32, 0.1);
}
.hl .hl-person__portrait { overflow: hidden; background: #EFE8D8; }
.hl .hl-person__portrait :is(img, picture) { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl .hl-person__label { font-size: 12px; letter-spacing: 0.2em; line-height: 1.4; text-transform: uppercase; color: var(--habd-gold-display); }
.hl .hl-person__role { font-size: 14px; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; color: var(--habd-gold-display); }
.hl .hl-person__name { font-family: var(--habd-serif); color: var(--habd-ink); }
.habd.hl .hl-person__name a { color: inherit; }
.hl .hl-person__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.habd.hl .hl-person__heading { font-size: 32px; font-weight: 400; line-height: 1.08; color: var(--habd-ink); }
.habd.hl:not(#hl-reset) .hl-person__text { font-size: 19px; line-height: 1.7; }
.hl .hl-person__action { margin-top: 4px; }
/* Portrait beside the text, name and role under it. */
.hl .hl-person--panel {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 34px 36px 36px;
}
.hl .hl-person--panel .hl-person__side { display: flex; flex-direction: column; gap: 12px; }
.hl .hl-person--panel .hl-person__portrait { height: 240px; border-radius: 14px; }
.hl .hl-person--panel .hl-person__who { display: flex; flex-direction: column; gap: 2px; }
.hl .hl-person--panel .hl-person__name { font-size: 26px; line-height: 1.1; color: var(--habd-forest); }
/* Round portrait beside the name; the text under it. */
.hl .hl-person--round { display: flex; flex-direction: column; }
.hl .hl-person--round .hl-person__head { display: flex; align-items: center; gap: 22px; padding: 28px 30px 0; }
.hl .hl-person--round .hl-person__portrait {
  flex: none;
  width: 104px;
  height: 104px;
  border: 2px solid var(--habd-gold);
  border-radius: 50%;
  background: #F3EAD5;
}
.hl .hl-person--round .hl-person__who { display: flex; flex-direction: column; gap: 4px; }
.hl .hl-person--round .hl-person__name { font-size: 34px; line-height: 1.05; }
.hl .hl-person--round .hl-person__role { font-size: 15px; letter-spacing: 0.08em; }
.hl .hl-person--round .hl-person__body { gap: 12px; padding: 20px 30px 30px; }
.habd.hl:not(#hl-reset) .hl-person--round .hl-person__text { font-size: 18px; line-height: 1.66; }
/* One round portrait per row (an author card): portrait beside everything. */
.hl .hl-people__list[data-columns="1"] > .hl-person--round {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  column-gap: 26px;
  align-items: start;
  padding: 32px 34px 34px;
}
.hl .hl-people__list[data-columns="1"] > .hl-person--round .hl-person__head { display: contents; }
.hl .hl-people__list[data-columns="1"] > .hl-person--round .hl-person__portrait { grid-row: 1 / span 2; }
.hl .hl-people__list[data-columns="1"] > .hl-person--round .hl-person__who { gap: 8px; }
.hl .hl-people__list[data-columns="1"] > .hl-person--round .hl-person__body { grid-column: 2; padding: 8px 0 0; }
@media (max-width: 760px) {
  .hl .hl-person--panel { grid-template-columns: minmax(0, 1fr); padding: 26px 24px; }
  .hl .hl-person--panel .hl-person__side { flex-direction: row; align-items: center; gap: 18px; }
  .hl .hl-person--panel .hl-person__portrait { flex: none; width: 104px; height: 120px; }
  .hl .hl-people__list[data-columns="1"] > .hl-person--round { grid-template-columns: 72px minmax(0, 1fr); padding: 24px; }
  .hl .hl-people__list[data-columns="1"] > .hl-person--round .hl-person__portrait { width: 72px; height: 72px; }
}

/* --------------------------------------------------------------------------
   Rate cards.
   -------------------------------------------------------------------------- */
.hl-rates .hl-rates__inner { display: flex; flex-direction: column; gap: 34px; }
.hl .hl-rates__list {
  display: grid;
  gap: 20px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hl .hl-rate-card--card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px 38px 38px;
  border: 1px solid var(--habd-line);
  border-radius: 18px;
  background: #FFFFFF;
}
.hl[data-tone="dark"] .hl-rate-card--card { background: rgba(245, 241, 230, 0.06); }
.hl .hl-rate-card__head { display: flex; flex-direction: column; gap: 4px; }
.hl .hl-rate-card__kicker { font-size: 12px; letter-spacing: 0.2em; line-height: 1.4; text-transform: uppercase; color: var(--habd-label); }
.hl .hl-rate-card--card .hl-rate-card__note { font-size: 17px; font-weight: 300; color: var(--habd-meta); }
.habd.hl .hl-rate-card--card .hl-rate-card__title { font-size: 30px; font-weight: 400; line-height: 1.1; }
.hl .hl-rate-card__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hl .hl-rate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--habd-line);
}
.hl .hl-rate__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hl .hl-rate__title { font-size: 19px; font-weight: 400; color: var(--habd-heading); }
.hl .hl-rate__detail { font-size: 16px; font-weight: 300; color: var(--habd-meta); }
.hl .hl-rate__value { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 1px; }
.hl .hl-rate__figure { font-family: var(--habd-serif); font-size: 34px; line-height: 1; color: var(--habd-gold-ink); }
.hl[data-tone="dark"] .hl-rate__figure { color: var(--habd-gold); }
.hl .hl-rate__note { font-size: 15px; font-weight: 300; color: var(--habd-meta); }
.hl .hl-rate-card__action { margin-top: 4px; }
/* Package rows. */
.hl .hl-rate-card--row {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--habd-cream-line);
  border-radius: 20px;
  background: #FFFFFF;
}
.hl .hl-rate-card--row .hl-rate-card__panel { display: flex; flex-direction: column; background: var(--habd-forest); }
.hl .hl-rate-card--row .hl-rate-card__media { position: relative; flex: none; height: 262px; }
.hl .hl-rate-card--row .hl-rate-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 42, 29, 0.7), rgba(13, 42, 29, 0.05));
}
.hl .hl-rate-card--row .hl-rate-card__media > :is(img, picture, .habd-fallback) { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl .hl-rate-card--row .hl-rate-card__head { gap: 5px; padding: 26px 30px 30px; }
.habd.hl .hl-rate-card--row .hl-rate-card__title { font-size: 42px; font-weight: 400; line-height: 1; color: var(--habd-ink-light); }
.hl .hl-rate-card--row .hl-rate-card__price { font-size: 26px; font-weight: 300; color: var(--habd-gold); }
.hl .hl-rate-card--row .hl-rate-card__note { font-size: 16px; font-weight: 300; line-height: 1.45; color: var(--habd-ink-light-soft); }
.hl .hl-rate-card--row .hl-rate-card__main { display: flex; flex-direction: column; gap: 16px; padding: 34px 38px 36px; }
.habd.hl:not(#hl-reset) .hl-rate-card--row .hl-rate-card__text > p { font-size: 20px; line-height: 1.6; color: var(--habd-ink); }
.habd.hl:not(#hl-reset) .hl-rate-card--row .hl-rate-card__text ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 32px;
}
.habd.hl:not(#hl-reset) .hl-rate-card--row .hl-rate-card__text ul > li { font-size: 17px; line-height: 1.5; }
.hl .hl-rate-card--row .hl-rate-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #F0E9D7;
}
.hl .hl-rate-card--row .hl-rate-card__caption { max-width: 640px; font-size: 16px; font-style: italic; font-weight: 300; line-height: 1.5; color: var(--habd-ink-meta); }
@media (max-width: 900px) {
  .hl .hl-rate-card--row { grid-template-columns: minmax(0, 1fr); }
  .habd.hl:not(#hl-reset) .hl-rate-card--row .hl-rate-card__text ul { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .hl :is(.hl-callout__box, .hl-definition, .hl-person, .hl-rate-card, .hl-faq--open) { border: 1px solid CanvasText; }
}

/* Definition rows two across (short rows, such as a list of patterns). */
.hl .hl-definitions__list[data-columns="2"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.hl .hl-definitions__list[data-columns="2"] > .hl-definition { padding: 22px 26px; border-radius: 14px; }
@media (max-width: 760px) {
  .hl .hl-definitions__list[data-columns="2"] { grid-template-columns: minmax(0, 1fr); }
}
/* An inline row with a term and no explanation reads as plain text. */
.hl-definitions--inline .hl-definition__line > .hl-definition__term:only-child { font-weight: 300; color: var(--habd-ink-body); }
.hl-definitions--inline .hl-definitions__list[data-columns="2"] .hl-definition__line { font-size: 18px; }
/* The closing line of a panel in an article, in large serif type. */
.hl.hl--article-panel .hl-band-note {
  margin-top: 4px;
  font-family: var(--habd-serif);
  font-size: 30px;
  line-height: 1.2;
  color: var(--habd-heading);
}

/* Callout text: quotes as large italic serif lines, lists split by rules,
   and gold emphasis on the dark panels. */
.habd.hl-callout:not(#hl-reset) .hl-callout__text blockquote {
  padding: 0;
  border: 0;
  font-size: clamp(22px, calc(0.6vw + 18px), 28px);
  line-height: 1.24;
  color: var(--habd-forest);
}
.habd.hl-callout:not(#hl-reset) .hl-callout__text blockquote :is(cite, footer) {
  margin-top: 12px;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  color: var(--habd-ink-meta);
}
.habd.hl-callout:not(#hl-reset) .hl-callout__text > blockquote + blockquote { margin-top: 14px; }
.habd.hl-callout:not(#hl-reset) .hl-callout__text ul { gap: 11px; }
.habd.hl-callout:not(#hl-reset) .hl-callout__text ul > li { padding-bottom: 11px; border-bottom: 1px solid var(--habd-cream-line); font-size: 18px; }
.habd.hl-callout:not(#hl-reset) .hl-tone-dark .hl-callout__text strong,
.habd.hl.hl--article-panel[data-tone="dark"]:not(#hl-reset) .hl-prose strong { font-weight: 500; color: var(--habd-gold); }

/* Definition rows: the term over its explanation. */
.hl.hl-definitions--stacked .hl-definitions__list > .hl-definition {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* A ticked list split by rules, no cards. */
.hl.hl-definitions--ticks .hl-definitions__list { gap: 11px; }
.hl.hl-definitions--ticks .hl-definitions__list > .hl-definition {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 0 0 11px;
  border: 0;
  border-bottom: 1px solid #EBE3CF;
  border-radius: 0;
  background: none;
}
.hl-definitions--ticks .hl-definition__tick {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  border: 1px solid var(--habd-cream-line);
  border-radius: 50%;
  background: #F3EAD5;
  font-size: 13px;
  color: var(--habd-gold-ink);
}
.hl-definitions--ticks .hl-definition__line { font-size: 19px; font-weight: 300; line-height: 1.6; color: var(--habd-ink-body); }
.hl-definitions--ticks .hl-definition__term { font-weight: 300; color: inherit; }
/* Gold emphasis on dark cards, and gold card titles in a dark article
   panel (the design's lead lines). */
.habd.hl:not(#hl-reset) .hl-card--dark .hl-prose strong { color: var(--habd-gold); }
.habd.hl.hl--article-panel[data-tone="dark"] .hl-card--dark .hl-card__title { font-size: 26px; line-height: 1.16; color: var(--habd-gold); }

/* Quote cards as the design's testimonial card (N.9): a large gold opening
   mark, the quote in upright light sans, the name in gold capitals. The
   single pull quote keeps its large italic serif. */
.hl-quotes:not(.hl-quotes--single) .hl-quote__figure { gap: 14px; padding: 34px 34px 36px; }
.habd.hl-quotes:not(.hl-quotes--single) .hl-quote__text {
  font-family: var(--habd-sans);
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.65;
  color: var(--habd-text);
  white-space: pre-line;
}
.hl-quotes:not(.hl-quotes--single) .hl-quote__text::before {
  content: "\201C";
  display: block;
  margin-bottom: 8px;
  font-family: var(--habd-serif);
  font-size: 52px;
  line-height: 0.6;
  color: var(--habd-gold-deep);
}
.hl-quotes:not(.hl-quotes--single) .hl-quote__text::after { content: none; }
.hl-quotes:not(.hl-quotes--single) .hl-quote--dark .hl-quote__text::before { color: var(--habd-gold); }
.hl-quotes:not(.hl-quotes--single) .hl-quote__name {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--habd-label);
}
.hl-quotes:not(.hl-quotes--single) .hl-quote--dark .hl-quote__name { color: var(--habd-gold); }
.hl[data-tone="dark"].hl-quotes:not(.hl-quotes--single) .hl-quote--dark {
  border-color: var(--habd-forest-line);
  background: rgba(245, 241, 230, 0.06);
  box-shadow: none;
}

/* Champagne cards (tone "champagne"): the champagne fill, a warm border, no
   shadow; light role tokens. */
.hl .hl-tone-champagne {
  --habd-heading: var(--habd-ink);
  --habd-text: var(--habd-ink-body);
  --habd-meta: var(--habd-ink-meta);
  --habd-label: var(--habd-gold-ink);
  --habd-line: var(--habd-cream-line);
  --habd-accent: var(--habd-gold-ink);
  --habd-outline-border: var(--habd-gold-display);
  --habd-outline-text: var(--habd-gold-ink);
  --habd-focus: var(--habd-gold-ink);
}
.hl .hl-card.hl-card--champagne,
.hl[data-ground="blush"] .hl-card.hl-card--champagne {
  border-color: var(--habd-cream-line);
  background: #F3EAD5;
  box-shadow: none;
}
.hl .hl-quote--champagne { border: 1px solid var(--habd-cream-line); background: #F3EAD5; }
.hl .hl-route--champagne { background: #F3EAD5; box-shadow: none; }

/* FAQ as open rows split by rules, the heading on the left, questions in
   serif type, no card. */
.hl-accordion.hl-accordion--rules .hl-accordion__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 64px;
}
.hl-accordion--rules .hl-accordion__list {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hl-accordion--rules .hl-faq,
.hl-accordion--rules .hl-faq + .hl-faq { border-top: 1px solid #EAE1CC; }
.hl-accordion--rules .hl-faq:last-child { border-bottom: 1px solid #EAE1CC; }
.hl-accordion--rules .hl-faq__question { padding: 22px 0; gap: 20px; }
.habd.hl-accordion--rules .hl-faq__title {
  font-family: var(--habd-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--habd-forest);
}
.hl-accordion--rules .hl-faq__icon { width: 28px; height: 28px; border-color: var(--habd-gold-deep); }
.hl-accordion--rules .hl-faq__answer { padding: 0 40px 22px 0; font-size: 17px; line-height: 1.6; }
@media (max-width: 1024px) {
  .hl-accordion.hl-accordion--rules .hl-accordion__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Text and image, the image in a small fixed box (420 x 320) with its
   caption under it: the name in serif, the role in gold capitals. */
.hl-media.hl-media--inset .hl-media__inner {
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 40px 54px;
  align-items: start;
}
.hl-media.hl-media--inset.hl-media--image-right .hl-media__inner { grid-template-columns: minmax(0, 1fr) 420px; align-items: center; }
.hl-media.hl-media--inset .hl-media__visual {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: auto;
  min-height: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.hl-media.hl-media--inset .hl-media__visual > :is(img, picture, .habd-fallback),
.hl-media.hl-media--inset .hl-media__visual > .hl-img {
  height: 320px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(31, 29, 26, 0.18);
}
.hl-media .hl-media__caption { display: flex; flex-direction: column; gap: 4px; }
.hl-media .hl-media__caption-name { font-family: var(--habd-serif); font-size: 28px; line-height: 1.1; color: var(--habd-heading); }
.hl-media .hl-media__caption-role { font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--habd-label); }
@media (max-width: 1024px) {
  .hl-media.hl-media--inset .hl-media__inner,
  .hl-media.hl-media--inset.hl-media--image-right .hl-media__inner { grid-template-columns: minmax(0, 1fr); }
  .hl-media.hl-media--inset .hl-media__visual { max-width: 420px; }
}

/* Hero, centred. */
.hl-hero.hl-hero--centre .hl-hero__inner { justify-items: center; }
.hl-hero.hl-hero--centre .hl-hero__content { align-items: center; margin: 0 auto; text-align: center; }
.hl-hero.hl-hero--centre .hl-lead { max-width: 760px; }

/* A card with an image and no text is a photograph tile: the image fills
   the card. */
.hl .hl-card:has(> .hl-card__media):not(:has(.hl-card__title, .hl-card__text, .hl-card__kicker, .hl-card__action)) > .hl-card__body { display: none; }
.hl .hl-card:has(> .hl-card__media):not(:has(.hl-card__title, .hl-card__text, .hl-card__kicker, .hl-card__action)) > .hl-card__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }

/* In an article, a callout joined to the panel above it (same ground): one
   panel, the callout's box inside it. */
.habd.hl.hl--article-panel.hl--joined { padding-bottom: 22px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hl-article__column > .habd.hl.hl--article-panel.hl--joins {
  margin-top: -48px;
  padding-top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* A callout that continues the band before it (same ground) sits 34px under
   that band's content, full width, as part of the same section. */
.habd.hl.hl-callout.hl--continues {
  position: relative;
  margin-top: -52px;
}
.hl-callout.hl--continues .hl-callout__box { max-width: none; }
.hl-callout .hl-callout__box:has(> .hl-callout__end) > .hl-callout__main { max-width: 760px; }