/**
 * @file
 * HABD homepage bands (templates/paragraph/habd). Library beauty/habd.bands,
 * theme group, weight 43: after habd-base.css (41) and habd-shell.css (42).
 *
 * Conventions:
 * - Tokens, role tokens, grounds, the scoped reset and .habd-btn come from
 *   habd-base.css. Components read role tokens (--habd-heading, --habd-text,
 *   --habd-meta, --habd-label, --habd-line, --habd-accent), so a band is
 *   legible on any ground. Fixed-colour islands (white cards, photo panels)
 *   set their own colours.
 * - Component rules start with .habd.habd so they outrank the reset's
 *   .habd.habd :is(h1...h6) and .habd.habd a (0,2,1).
 * - No rule targets a <p>: paragraphs inherit type from their wrapper
 *   (habd-base.css neutralises the legacy p rules).
 * - px and clamp() only (html{font-size:10px} in style.css). Headings use
 *   the base clamp tokens with a per-band ceiling from the v1 design.
 * - Breakpoints inside .habd only: 1024px (tablet) and 640px (phone).
 */

/* ==========================================================================
   Page-level
   ========================================================================== */

/* style.css:16191 adds a 20px bottom margin to .field--name-field-content at
   768px and below, which opens a gap between the last band and the footer.
   .habd-page is added by beauty_preprocess_node__page__full() only on page
   nodes that hold habd bands. */
.habd-page .field--name-field-content {
  margin-bottom: 0;
}

/* ==========================================================================
   Band frame: padding, inner width, grounds, glows.
   ========================================================================== */
section.habd {
  --habd-pad-t: 80px;
  --habd-pad-b: 88px;
  --habd-pad-scale: 1;
  position: relative;
  padding-top: calc(var(--habd-pad-t) * var(--habd-pad-scale));
  padding-bottom: calc(var(--habd-pad-b) * var(--habd-pad-scale));
  overflow-wrap: break-word;
}
/* An in-page anchor target (e.g. #join-story) takes focus from
   habd-bands.js; the band itself shows no ring. */
section.habd[tabindex="-1"]:focus {
  outline: none;
}
/* The v1 design sets no font smoothing, so macOS keeps its default (auto)
   rendering. habd-base.css forces grayscale antialiasing on every .habd
   root, which thins Jost 300 on the dark grounds; the bands put the
   default back. */
section.habd.habd {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
section.habd > .habd-band__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);
}

/* Grounds, refined to the v1 design's band gradients. Header and footer are
   not <section>, so they keep the base grounds. */
section.habd[data-ground="forest-gradient"] { --habd-bg: linear-gradient(158deg, #143A28 0%, #0D2A1D 46%, #07160F 100%); }
section.habd[data-ground="cream-gradient"] { --habd-bg: linear-gradient(160deg, #FFFDF8 0%, #FDFAEC 46%, #F6EFDD 100%); }
section.habd[data-ground="champagne-gradient"] { --habd-bg: linear-gradient(120deg, #FFFDF8 0%, #F7F0DF 38%, #EFE2C4 72%, #E9D8B4 100%); }
section.habd.habd-feature-splits[data-ground="forest-gradient"] { --habd-bg: linear-gradient(168deg, #153A28 0%, #0D2A1D 40%, #07160F 100%); }
section.habd.habd-featured-people[data-ground="forest-gradient"] { --habd-bg: linear-gradient(155deg, #143A28 0%, #0D2A1D 44%, #07160F 100%); }
section.habd.habd-tag-wall[data-ground="forest-gradient"] { --habd-bg: linear-gradient(158deg, #0F3122 0%, #0B2318 46%, #050F0A 100%); }
section.habd.habd-expanding-panels[data-ground="cream-gradient"] { --habd-bg: linear-gradient(165deg, #FFFDF8 0%, #F5F1E6 42%, #EBE4D2 100%); }
section.habd.habd-testimonials[data-ground="cream-gradient"] { --habd-bg: linear-gradient(162deg, #FFFDF8 0%, #FDFAEC 48%, #F6EFDD 100%); }

/* Glows: size and offset per band (v1 design), read by the base
   .habd[data-glow]::before circle. */
section.habd[data-glow]::before {
  width: var(--habd-glow-size, 700px);
  height: var(--habd-glow-size, 700px);
}
section.habd[data-tone="dark"][data-glow]::before {
  background: radial-gradient(circle, rgba(229, 200, 140, var(--habd-glow-alpha, 0.15)), rgba(229, 200, 140, 0) 68%);
}
section.habd[data-tone="light"][data-glow]::before {
  background: radial-gradient(circle, rgba(201, 162, 74, var(--habd-glow-alpha, 0.16)), rgba(201, 162, 74, 0) 70%);
}
section.habd[data-glow="top-left"]::before { top: var(--habd-glow-y, -220px); left: var(--habd-glow-x, -160px); }
section.habd[data-glow="top-right"]::before { top: var(--habd-glow-y, -220px); right: var(--habd-glow-x, -160px); left: auto; }
section.habd[data-glow="bottom-left"]::before { bottom: var(--habd-glow-y, -240px); left: var(--habd-glow-x, -160px); top: auto; }
section.habd[data-glow="bottom-right"]::before { bottom: var(--habd-glow-y, -240px); right: var(--habd-glow-x, -160px); top: auto; left: auto; }
section.habd[data-glow="centre-left"]::before { top: 50%; left: var(--habd-glow-x, -300px); transform: translateY(-50%); }
section.habd[data-glow="top-centre"]::before {
  top: var(--habd-glow-y, -280px);
  left: var(--habd-glow-x, calc(50% - 410px));
}

/* ==========================================================================
   Shared pieces
   ========================================================================== */
section.habd .habd-section-header {
  gap: 14px;
  max-width: none;
}
/* The fading rule after the label belongs to the hero only (v1 design). */
section.habd .habd-section-header__label::after {
  display: none;
}
.habd.habd .habd-section-header__heading {
  line-height: 1.04;
  text-wrap: balance;
}
/* Accent words in large headings on light grounds: #9A7B2E is allowed at
   24px and up (--habd-gold-display). */
section.habd[data-tone="light"] .habd-section-header__heading .habd-accent {
  color: var(--habd-gold-display);
}
section.habd[data-tone="dark"] .habd-section-header__heading .habd-accent {
  color: var(--habd-gold);
}
.habd.habd .habd-section-header__lead {
  max-width: 600px;
  font-size: 18px;
  line-height: 1.6;
}

/* Header row: section header left, aside or button right. */
.habd.habd .habd-band__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 60px;
}
.habd.habd .habd-band__head > .habd-section-header {
  flex: 1 1 auto;
  min-width: 0;
}
/* The button sits on the heading's baseline (brief 18). The header's first
   baseline is its small label, so align on the last one (the h2); where
   'last baseline' is unsupported the button sits bottom right, like the
   other header rows. */
.habd.habd .habd-band__head--baseline {
  align-items: flex-end;
  align-items: last baseline;
}
.habd.habd .habd-band__aside {
  flex: 0 1 auto;
  max-width: 400px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--habd-meta);
  text-align: right;
  text-wrap: pretty;
}
.habd.habd .habd-band__actions {
  flex: none;
}

/* Rich text from the (basic_html) body field. Paragraph margins are
   neutralised by the base reset, so the flex gap spaces them. */
.habd.habd .habd-prose {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  text-wrap: pretty;
}
.habd.habd .habd-prose > * {
  margin: 0;
}
.habd.habd .habd-prose :is(ul, ol):not([class]) {
  margin: 0;
  padding-left: 1.3em;
}
.habd.habd .habd-prose strong,
.habd.habd .habd-prose b {
  font-weight: 500;
}
.habd.habd .habd-prose a {
  color: var(--habd-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.habd.habd .habd-prose a:hover {
  color: var(--habd-heading);
}
/* basic_html still offers a quote and inline images. Headings are demoted
   to paragraphs in PHP (_beauty_habd_prose_text()); these keep the rest in
   the band's type instead of the legacy blockquote (style.css:7996). */
.habd.habd .habd-prose blockquote {
  margin: 0;
  padding: 0 0 0 18px;
  border: 0;
  border-left: 2px solid var(--habd-gold-deep);
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.habd.habd .habd-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--habd-radius-s);
}

/* Text link: 13px uppercase, underlined, 44px tall hit area. */
.habd.habd .habd-textlink {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--habd-accent);
  text-decoration: underline;
  text-decoration-color: rgba(229, 200, 140, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.habd.habd .habd-textlink:hover,
.habd.habd .habd-textlink:focus-visible {
  color: var(--habd-accent);
  text-decoration-color: currentColor;
}

/* Buttons in bands, sized to the v1 design. Its pills set no line-height,
   so Jost's normal (about 1.45) applies: an outline pill is 54px tall, the
   Sign up 54px and the closing Sign up 67px. habd-base.css (PR 1, also used
   by the header and footer) keeps its tighter 1.1. Filled buttons carry a
   1px border the design's do not, so their padding is 1px less. */
section.habd.habd .habd-btn {
  line-height: 1.45;
}
section.habd.habd .habd-btn--primary:not(.habd-centred-band__signup) {
  padding: 16px 31px;
}
/* Header-row buttons (beside a band heading) are the design's smaller
   13px pill. */
section.habd.habd :is(.habd-band__actions, .habd-tag-wall__actions) .habd-btn {
  padding: 14px 26px;
  font-size: 13px;
}

/* Gold check circles. */
.habd.habd .habd-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(155deg, #F7E7BE, var(--habd-gold-deep));
  color: var(--habd-forest);
  font-family: var(--habd-sans);
  font-weight: 500;
  line-height: 1;
}
.habd.habd .habd-check--s {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  background: var(--habd-gold-deep);
  font-size: 11px;
}
.habd.habd .habd-check--m {
  width: 26px;
  height: 26px;
  font-size: 13px;
}
/* The self-hosted Jost has no U+2713, so the check fell through to a heavy
   Helvetica/Arial glyph. The design's stack ends in system-ui, whose check
   (and star) is thin. */
.habd.habd :is(.habd-check, .habd-proof-row__check, .habd-trust-mark__icon) {
  font-family: system-ui, -apple-system, 'Segoe UI Symbol', sans-serif;
  font-weight: 400;
}

/* Images and fallbacks that fill a fixed box. Every box below is
   positioned, so the image never depends on a percentage height. */
.habd.habd :is(.habd-hero__media, .habd-media-split__media, .habd-cta-strip__cover, .habd-panel__media, .habd-person-card__media, .habd-card__media) > :is(img, picture, .habd-fallback) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.habd.habd :is(.habd-hero__media, .habd-media-split__media, .habd-cta-strip__cover, .habd-panel__media, .habd-person-card__media, .habd-card__media) > picture > img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Grids whose length varies with data never leave an empty track. */
.habd.habd [class*="habd-grid--n"] {
  min-width: 0;
}

/* ==========================================================================
   02 Hero (habd_hero)
   ========================================================================== */
section.habd.habd-hero {
  --habd-pad-t: 72px;
  --habd-pad-b: 56px;
  overflow: hidden;
  isolation: isolate;
}
/* Top edge: a gold hairline fading left to right. */
section.habd.habd-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 0;
  background: linear-gradient(90deg, rgba(229, 200, 140, 0.55), rgba(229, 200, 140, 0.06) 60%, rgba(229, 200, 140, 0));
  pointer-events: none;
}
.habd.habd .habd-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* The scrim stack (brief section 02), top layer first: bottom fade, light
   source, then the main side-clearing scrim. Without a photo only the light
   source and fade sit over the ground. */
.habd.habd .habd-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 15, 10, 0.6) 0, rgba(5, 15, 10, 0) 200px),
    radial-gradient(70% 60% at 4% 0%, rgba(52, 110, 80, 0.22) 0%, rgba(13, 42, 29, 0) 58%);
}
.habd.habd-hero--photo .habd-hero__scrim {
  background:
    linear-gradient(to top, rgba(5, 15, 10, 0.6) 0, rgba(5, 15, 10, 0) 200px),
    radial-gradient(70% 60% at 4% 0%, rgba(52, 110, 80, 0.22) 0%, rgba(13, 42, 29, 0) 58%),
    linear-gradient(100deg, #0D2A1D 0 12%, rgba(13, 42, 29, 0.86) 44%, rgba(13, 42, 29, 0.5) 72%, rgba(13, 42, 29, 0.12) 100%);
}
.habd.habd .habd-hero__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 800px;
}
.habd.habd .habd-hero__label {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--habd-gold-deep);
}
.habd.habd .habd-hero__label::after {
  content: "";
  flex: none;
  width: 140px;
  height: 1px;
  background: linear-gradient(90deg, var(--habd-gold-deep), rgba(201, 162, 74, 0));
}
.habd.habd .habd-hero__title {
  position: relative;
  font-size: var(--habd-fs-h1);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--habd-ink-light);
  text-shadow: 0 2px 24px rgba(5, 15, 10, 0.55);
  overflow-wrap: break-word;
}
/* The soft gold glow behind the h1. */
.habd.habd .habd-hero__title::before {
  content: "";
  position: absolute;
  left: -80px;
  top: -70px;
  width: 660px;
  max-width: 120%;
  height: 300px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 200, 140, 0.22), rgba(229, 200, 140, 0) 68%);
  filter: blur(10px);
  pointer-events: none;
}
.habd.habd .habd-hero__accent {
  color: var(--habd-gold-light);
}
.habd.habd .habd-hero__lead {
  max-width: 620px;
  font-size: 22px;
  line-height: 1.6;
  color: var(--habd-ink-light-soft);
}

/* Search bar. */
.habd.habd .habd-search {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 780px;
  margin: 0;
  padding: 12px 12px 12px 30px;
  border-radius: var(--habd-radius-pill);
  background: linear-gradient(178deg, #FFFEFA, #F1EADA);
  box-shadow: 0 26px 54px rgba(4, 14, 9, 0.55), 0 2px 0 rgba(255, 255, 255, 0.7) inset, 0 0 0 1px rgba(201, 162, 74, 0.28);
}
.habd.habd .habd-search:focus-within {
  box-shadow: 0 26px 54px rgba(4, 14, 9, 0.55), 0 2px 0 rgba(255, 255, 255, 0.7) inset, 0 0 0 2px var(--habd-gold-deep);
}
.habd.habd .habd-search__ring {
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--habd-gold-deep);
  border-radius: 50%;
}
.habd.habd .habd-search__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 52px;
  min-height: 44px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font-size: 21px;
  font-weight: 300;
  line-height: normal;
  color: var(--habd-ink);
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}
.habd.habd .habd-search__input::placeholder {
  color: var(--habd-ink-meta);
  opacity: 1;
}
.habd.habd .habd-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
}
/* The design's outline:none is not copied: keyboard focus keeps a ring. */
.habd.habd .habd-search__input:focus-visible {
  outline: 2px solid var(--habd-gold-ink);
  outline-offset: 2px;
}
.habd.habd .habd-search__submit {
  flex: none;
  padding: 19px 39px;
  font-size: 15px;
}

.habd.habd .habd-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 44px;
  padding-top: 4px;
}
.habd.habd .habd-hero__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 44px;
}
.habd.habd .habd-trust-mark {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.habd.habd .habd-trust-mark__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
}
.habd.habd .habd-trust-mark--verified .habd-trust-mark__icon {
  background: linear-gradient(155deg, #F7E7BE, var(--habd-gold-deep));
  color: var(--habd-forest);
  box-shadow: 0 6px 16px rgba(201, 162, 74, 0.4), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.habd.habd .habd-trust-mark--expert .habd-trust-mark__icon {
  border: 1px solid var(--habd-gold-deep);
  color: var(--habd-gold-deep);
  font-size: 15px;
}
.habd.habd .habd-trust-mark__text {
  display: flex;
  flex-direction: column;
}
.habd.habd .habd-trust-mark__title {
  font-family: var(--habd-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--habd-ink-light);
}
.habd.habd .habd-trust-mark__line {
  font-size: 16px;
  color: var(--habd-meta-dark);
}
/* Over a photograph the scrim thins towards the right, where the second
   trust mark sits, and a bright photograph shows through even the phone's
   0.8 overlay: the line and the small label take the lighter inks (#C3D0C6,
   #E5C88C) so they stay at 4.5:1 or better. On the plain ground they keep
   the brief's #8FA396 and #C9A24A. Contrast sign-off list. */
.habd.habd-hero--photo .habd-trust-mark__line {
  color: var(--habd-ink-light-soft);
}
.habd.habd-hero--photo .habd-hero__label {
  color: var(--habd-gold);
}
.habd.habd .habd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}

/* ==========================================================================
   03 Two doors (habd_path_cards, habd_path_card)
   ========================================================================== */
section.habd.habd-path-cards {
  --habd-pad-t: 64px;
  --habd-pad-b: 70px;
  border-bottom: 1px solid #E4DCC6;
}
.habd.habd .habd-path-cards__head {
  align-items: baseline;
  margin-bottom: 30px;
}
.habd.habd .habd-path-cards__aside {
  font-size: 17px;
  line-height: 1.5;
  color: var(--habd-meta);
  text-align: right;
}
.habd.habd .habd-path-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.habd.habd .habd-path-cards__grid.habd-grid--n1 {
  grid-template-columns: minmax(0, 1fr);
}
.habd.habd .habd-path-card {
  display: flex;
}
.habd.habd .habd-path-card__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 240px;
  padding: 38px 40px 34px;
  border: 1px solid #E4DCC6;
  border-radius: var(--habd-radius-xl);
  background: #FFFFFF;
  color: var(--habd-ink-body);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.habd.habd .habd-path-card[data-tone="dark"] .habd-path-card__card {
  border-color: var(--habd-forest-line);
  background: var(--habd-forest);
  color: var(--habd-ink-light-soft);
}
.habd.habd a.habd-path-card__card:hover,
.habd.habd a.habd-path-card__card:focus-visible {
  border-color: var(--habd-gold-deep);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(31, 29, 26, 0.12);
  color: var(--habd-ink-body);
}
.habd.habd .habd-path-card[data-tone="dark"] a.habd-path-card__card:hover,
.habd.habd .habd-path-card[data-tone="dark"] a.habd-path-card__card:focus-visible {
  box-shadow: 0 18px 40px rgba(4, 14, 9, 0.34);
  color: var(--habd-ink-light-soft);
}
.habd.habd .habd-path-card__number {
  font-family: var(--habd-serif);
  font-size: 20px;
  line-height: 1;
  color: var(--habd-gold-ink);
}
.habd.habd .habd-path-card[data-tone="dark"] .habd-path-card__number {
  color: var(--habd-gold);
}
.habd.habd .habd-path-card__title {
  font-size: min(var(--habd-fs-h2), 46px);
  line-height: 1.04;
  color: var(--habd-forest);
}
.habd.habd .habd-path-card[data-tone="dark"] .habd-path-card__title {
  color: var(--habd-ink-light);
}
.habd.habd .habd-path-card__text {
  max-width: 460px;
  font-size: 18px;
  line-height: 1.6;
}
.habd.habd .habd-path-card__pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  margin-top: auto;
  padding: 13px 26px;
  border: 1px solid var(--habd-gold-display);
  border-radius: var(--habd-radius-pill);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--habd-gold-ink);
  transition: background-color 180ms ease;
}
.habd.habd .habd-path-card[data-tone="dark"] .habd-path-card__pill {
  border-color: var(--habd-gold);
  color: var(--habd-gold);
}
.habd.habd a.habd-path-card__card:hover .habd-path-card__pill {
  background: #F3EAD5;
}
.habd.habd .habd-path-card[data-tone="dark"] a.habd-path-card__card:hover .habd-path-card__pill {
  background: rgba(229, 200, 140, 0.1);
}

/* ==========================================================================
   04 Founder / 06 Whole industry (habd_media_split, habd_stat)
   ========================================================================== */
section.habd.habd-media-split {
  --habd-pad-t: 88px;
  --habd-pad-b: 88px;
  --habd-glow-size: 640px;
  --habd-glow-y: -200px;
  --habd-glow-x: -140px;
}
section.habd.habd-media-split--portrait {
  --habd-pad-t: 78px;
  --habd-pad-b: 84px;
}
.habd.habd .habd-media-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.habd.habd-media-split--portrait .habd-media-split__grid {
  grid-template-columns: minmax(0, 1fr) 420px;
}
.habd.habd-media-split--image-left.habd-media-split--half .habd-media-split__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.habd.habd-media-split--image-left.habd-media-split--portrait .habd-media-split__grid {
  grid-template-columns: 420px minmax(0, 1fr);
}
.habd.habd-media-split--image-left .habd-media-split__media {
  order: -1;
}
.habd.habd .habd-media-split__text {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.habd.habd-media-split--portrait .habd-media-split__text {
  gap: 24px;
}
/* The label sits as far above the heading as the column's own rhythm: 26px
   (Industry, v1 design), 24px (Founder, brief 04). The shared 14px header
   gap is for header rows. Headings wrap normally, so "Are You?" keeps its
   own line as in the design (balance moved it). */
.habd.habd-media-split .habd-section-header {
  gap: 26px;
}
.habd.habd-media-split--portrait .habd-section-header {
  gap: 24px;
}
.habd.habd-media-split .habd-section-header__heading {
  font-size: min(var(--habd-fs-h2), 58px);
  text-wrap: wrap;
}
.habd.habd-media-split--portrait .habd-section-header__heading {
  font-size: var(--habd-fs-h2);
}
.habd.habd .habd-media-split__body {
  max-width: 660px;
  font-size: 20px;
  line-height: 1.7;
  color: var(--habd-text);
}
.habd.habd-media-split--portrait .habd-media-split__body {
  font-size: 21px;
  line-height: 1.6;
}
.habd.habd .habd-media-split__media {
  position: relative;
  height: 560px;
  overflow: hidden;
  border-radius: var(--habd-radius-m);
}
.habd.habd-media-split--portrait .habd-media-split__media {
  height: 460px;
  border-radius: var(--habd-radius-l);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
}
.habd.habd ul.habd-media-split__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  padding-top: 22px;
  border-top: 1px solid var(--habd-line);
}
.habd.habd .habd-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.habd.habd .habd-stat__figure {
  font-family: var(--habd-serif);
  font-size: 42px;
  line-height: 1;
  color: var(--habd-accent);
}
.habd.habd-media-split[data-tone="light"] .habd-stat__figure {
  color: var(--habd-gold-display);
}
.habd.habd .habd-stat__label {
  font-size: 14px;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-meta);
}
.habd.habd .habd-media-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* ==========================================================================
   05 Partners (habd_logo_strip, habd_logo)
   ========================================================================== */
section.habd.habd-logo-strip {
  --habd-pad-t: 34px;
  --habd-pad-b: 34px;
  border-top: 1px solid var(--habd-line);
  border-bottom: 1px solid var(--habd-line);
}
.habd.habd .habd-logo-strip__row {
  display: flex;
  align-items: center;
  gap: 40px;
}
.habd.habd .habd-logo-strip__intro {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 340px;
}
.habd.habd .habd-logo-strip__line {
  font-size: 15px;
  line-height: 1.5;
  color: var(--habd-meta);
}
.habd.habd .habd-logo-strip__title {
  font-size: 22px;
  line-height: 1.2;
  color: var(--habd-accent);
}
.habd.habd .habd-logo-strip__logos {
  flex: 1 1 auto;
  display: flex;
  gap: 14px;
  min-width: 0;
}
.habd.habd .habd-logo {
  flex: 1 1 0;
  min-width: 0;
}
.habd.habd .habd-logo__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66px;
  padding: 8px;
  border-radius: var(--habd-radius-s);
  background: linear-gradient(178deg, #FFFEFA, #F1EADA);
  box-shadow: 0 6px 16px rgba(4, 14, 9, 0.4);
  color: #6E695C;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.habd.habd a.habd-logo__tile:hover,
.habd.habd a.habd-logo__tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(4, 14, 9, 0.5);
  color: #6E695C;
}
.habd.habd .habd-logo__name {
  font-family: var(--habd-serif);
  font-size: 19px;
  line-height: 1.15;
  text-align: center;
}
.habd.habd .habd-logo__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.habd.habd .habd-logo__image img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 50px;
  object-fit: contain;
}

/* ==========================================================================
   07 Proof of search (habd_proof_rows, habd_proof_row)
   ========================================================================== */
section.habd.habd-proof-rows {
  --habd-pad-t: 76px;
  --habd-pad-b: 72px;
}
.habd.habd .habd-proof-rows__stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.habd.habd-proof-rows .habd-section-header {
  max-width: 780px;
}
.habd.habd-proof-rows .habd-section-header__heading {
  font-size: min(var(--habd-fs-h2), 56px);
  line-height: 1.02;
}
.habd.habd .habd-proof-rows__aside {
  max-width: 340px;
  font-size: 19px;
  text-align: left;
}
.habd.habd .habd-proof-rows__list {
  display: flex;
  flex-direction: column;
}
.habd.habd .habd-proof-row {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--habd-line);
}
.habd.habd .habd-proof-row:last-child {
  border-bottom: 1px solid var(--habd-line);
}
.habd.habd .habd-proof-row__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--habd-gold);
  color: var(--habd-forest);
  font-size: 14px;
  line-height: 1;
}
.habd.habd .habd-proof-row__term {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--habd-serif);
  font-size: 40px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.05;
  color: var(--habd-heading);
}
.habd.habd .habd-proof-row__member {
  flex: none;
  width: 260px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--habd-meta);
}
.habd.habd .habd-proof-row__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--habd-meta);
  text-decoration: underline;
  text-decoration-color: rgba(143, 163, 150, 0.5);
  text-underline-offset: 4px;
}
.habd.habd .habd-proof-row__link:hover,
.habd.habd .habd-proof-row__link:focus-visible {
  color: var(--habd-heading);
  text-decoration-color: currentColor;
}
.habd.habd .habd-proof-row__position {
  flex: none;
  width: 160px;
  font-size: 13px;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
  color: var(--habd-label);
}
.habd.habd .habd-proof-rows__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}
.habd.habd .habd-proof-rows__body {
  max-width: 720px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--habd-text);
}
.habd.habd .habd-proof-rows__foot > .habd-btn {
  flex: none;
}

/* ==========================================================================
   08 Membership (habd_statement_rows, habd_statement_row), with the v2
   outcome block and the What members get card.
   ========================================================================== */
section.habd.habd-statement-rows {
  --habd-pad-t: 80px;
  --habd-pad-b: 88px;
  --habd-glow-size: 560px;
  --habd-glow-y: -180px;
  --habd-glow-x: -140px;
}
.habd.habd .habd-statement-rows__stack {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.habd.habd-statement-rows .habd-section-header {
  max-width: 700px;
}
.habd.habd-statement-rows .habd-section-header__heading {
  font-size: min(var(--habd-fs-h2), 50px);
}
.habd.habd .habd-statement-rows__list {
  display: flex;
  flex-direction: column;
}
.habd.habd .habd-statement-row {
  display: flex;
  padding: 26px 0;
  border-top: 1px solid #EAE1CC;
}
.habd.habd[data-tone="dark"] .habd-statement-row {
  border-top-color: var(--habd-line);
}
.habd.habd .habd-statement-row--end {
  justify-content: flex-end;
  text-align: right;
}
.habd.habd .habd-statement-row__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
}
.habd.habd .habd-statement-row__statement {
  font-family: var(--habd-serif);
  font-size: min(calc(1.6vw + 17px), 40px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--habd-heading);
}
.habd.habd[data-tone="light"] .habd-statement-row__statement {
  color: var(--habd-forest);
}
.habd.habd .habd-statement-row__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--habd-meta);
}

/* Outcome block: reads as the conclusion, so the 2px gold rule and the
   heading size both matter. */
.habd.habd .habd-statement-rows__outcome {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-top: 34px;
  border-top: 2px solid var(--habd-gold-deep);
}
.habd.habd .habd-statement-rows__outcome-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.habd.habd .habd-statement-rows__outcome-title {
  font-size: min(var(--habd-fs-h2), 54px);
  line-height: 1.04;
  text-wrap: balance;
}
.habd.habd .habd-statement-rows__outcome-body {
  font-size: 20px;
  line-height: 1.7;
  color: var(--habd-text);
}

/* The checklist card (white on any ground). */
.habd.habd .habd-statement-rows__card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 34px 36px;
  border: 1px solid #EBE3CF;
  border-radius: var(--habd-radius-xl);
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(31, 29, 26, 0.07);
}
.habd.habd .habd-statement-rows__card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 30px;
}
.habd.habd .habd-statement-rows__card-title {
  font-size: 34px;
  line-height: 1.1;
  color: var(--habd-ink);
}
.habd.habd .habd-statement-rows__card-note {
  font-size: 13px;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-gold-ink);
}
.habd.habd .habd-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 40px;
}
.habd.habd .habd-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.habd.habd .habd-checklist__text {
  font-size: 17px;
  line-height: 1.5;
  color: #3F3A31;
}
.habd.habd .habd-statement-rows__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   09 What makes us different (habd_feature_splits, habd_feature_split)
   ========================================================================== */
section.habd.habd-feature-splits {
  --habd-pad-t: 104px;
  --habd-pad-b: 112px;
  --habd-glow-size: 700px;
  --habd-glow-y: -240px;
  --habd-glow-x: -160px;
}
.habd.habd .habd-feature-splits__stack {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.habd.habd .habd-feature-splits__list {
  display: flex;
  flex-direction: column;
}
.habd.habd .habd-feature-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.habd.habd .habd-feature-split--single {
  grid-template-columns: minmax(0, 1fr);
}
/* A fading gold hairline between blocks, 44px either side. */
.habd.habd .habd-feature-split + .habd-feature-split {
  margin-top: 44px;
  padding-top: 44px;
}
.habd.habd .habd-feature-split + .habd-feature-split::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(229, 200, 140, 0.5), rgba(229, 200, 140, 0.05) 70%, rgba(229, 200, 140, 0));
}
.habd.habd .habd-feature-split__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.habd.habd .habd-feature-split__title {
  font-size: min(var(--habd-fs-h2-xl), 72px);
  line-height: 1;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.habd.habd .habd-feature-split__body {
  max-width: 580px;
  font-size: 21px;
  line-height: 1.65;
  color: var(--habd-text);
  text-wrap: pretty;
}
.habd.habd .habd-feature-split__figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 0%: a solid champagne first; gradient text where background-clip works. */
/* align-self: the span shrinks to its glyphs, so the gradient runs from
   cream to deep bronze across "0%" rather than across the whole column. */
.habd.habd .habd-feature-split__number {
  align-self: flex-start;
  font-family: var(--habd-serif);
  font-size: clamp(110px, calc(7.25vw + 63.6px), 168px);
  line-height: 0.85;
  color: var(--habd-gold);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .habd.habd[data-tone="dark"] .habd-feature-split__number {
    background: linear-gradient(150deg, #FFF6E2 6%, #E5C88C 38%, #A97F2E 74%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.habd.habd[data-tone="light"] .habd-feature-split__number {
  color: var(--habd-gold-display);
}
.habd.habd .habd-feature-split__figure-label {
  font-size: 14px;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-label);
}
.habd.habd .habd-feature-split__checks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.habd.habd .habd-feature-split__check {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(229, 200, 140, 0.34);
  border-radius: var(--habd-radius-m);
  background: rgba(229, 200, 140, 0.05);
}
.habd.habd .habd-feature-split__check-text {
  font-size: 19px;
  line-height: 1.4;
  color: var(--habd-heading);
}
.habd.habd[data-tone="dark"] .habd-feature-split__check-text {
  color: var(--habd-nav-active);
}
.habd.habd[data-tone="light"] .habd-feature-split__check {
  border-color: var(--habd-cream-line);
  background: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   10 The badge (habd_badge_panel, habd_numbered_row, fixed row 03)
   ========================================================================== */
section.habd.habd-badge-panel {
  --habd-pad-t: 92px;
  --habd-pad-b: 96px;
  --habd-glow-size: 900px;
  --habd-glow-y: -300px;
  --habd-glow-x: 42%;
  --habd-glow-alpha: 0.14;
}
.habd.habd .habd-badge-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 72px;
  align-items: start;
}
.habd.habd .habd-badge-panel__text {
  display: flex;
  flex-direction: column;
  gap: 34px;
  min-width: 0;
}
.habd.habd .habd-badge-panel__title {
  font-size: var(--habd-fs-h2-xl);
  line-height: 0.94;
  letter-spacing: -0.015em;
  color: var(--habd-gold);
  overflow-wrap: break-word;
  text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .habd.habd[data-tone="dark"] .habd-badge-panel__title {
    background: linear-gradient(122deg, #FFF6E2 4%, #E5C88C 32%, #A97F2E 56%, #F0DCAF 86%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.habd.habd[data-tone="light"] .habd-badge-panel__title {
  color: var(--habd-heading);
}
.habd.habd .habd-badge-panel__body {
  max-width: 560px;
  font-size: 21px;
  line-height: 1.6;
  color: var(--habd-ink-light-quiet);
}
.habd.habd[data-tone="light"] .habd-badge-panel__body {
  color: var(--habd-text);
}
.habd.habd .habd-badge-panel__quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
  margin: 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--habd-gold-deep);
}
/* blockquote: style.css:7996 adds padding, a 5px grey border and 20px. */
.habd.habd .habd-badge-panel__quote-text {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--habd-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--habd-heading);
  text-wrap: pretty;
}
.habd.habd .habd-badge-panel__cite {
  font-size: 15px;
  line-height: 1.5;
  color: var(--habd-meta);
}
.habd.habd .habd-badge-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.habd.habd .habd-badge-panel__rows {
  display: flex;
  flex-direction: column;
}
.habd.habd .habd-numbered-row {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid var(--habd-forest-line-2);
}
.habd.habd[data-tone="light"] .habd-numbered-row {
  border-bottom-color: var(--habd-line);
}
.habd.habd .habd-numbered-row:first-child {
  padding-top: 0;
}
.habd.habd .habd-numbered-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.habd.habd .habd-numbered-row__number {
  flex: none;
  width: 88px;
  font-family: var(--habd-serif);
  font-size: 48px;
  line-height: 1;
  color: var(--habd-accent);
}
.habd.habd .habd-numbered-row__content {
  min-width: 0;
}
.habd.habd .habd-numbered-row__title {
  font-family: var(--habd-sans) !important;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--habd-heading);
}
.habd.habd .habd-numbered-row__text {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--habd-meta);
}

/* ==========================================================================
   11 Search tags (habd_tag_wall, habd_tag)
   ========================================================================== */
section.habd.habd-tag-wall {
  --habd-pad-t: 84px;
  --habd-pad-b: 90px;
  --habd-glow-size: 700px;
  --habd-glow-y: -220px;
  --habd-glow-x: -160px;
  --habd-glow-alpha: 0.14;
}
.habd.habd .habd-tag-wall__stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.habd.habd-tag-wall .habd-section-header {
  max-width: 720px;
}
.habd.habd-tag-wall .habd-section-header__heading {
  font-size: min(var(--habd-fs-h2), 50px);
}
.habd.habd .habd-tag-wall__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 26px;
}
.habd.habd .habd-tag {
  font-family: var(--habd-serif);
  font-weight: 400;
  line-height: 1.1;
  color: var(--habd-heading);
  overflow-wrap: break-word;
  min-width: 0;
}
.habd.habd .habd-tag--s { font-size: 22px; }
.habd.habd .habd-tag--m { font-size: 25px; }
.habd.habd .habd-tag--l { font-size: 34px; }
.habd.habd .habd-tag--xl { font-size: 42px; }
/* Four upright colours, as the design rotates them (the variation is the
   design). On dark: cream #F5F1E6, light sage #A9B7AD, champagne #E5C88C
   and sage #8FA396, the quietest. The design's 2 and 4 (#8FA396, #6E8377)
   move one step lighter because #6E8377 fails AA here (3.49:1); the order
   of brightness is kept, and every step passes (5.29:1 or better on the
   wall's gradient). On light grounds the role inks give the same ramp.
   Contrast sign-off list. */
.habd.habd .habd-tag--style-1 { color: var(--habd-heading); }
.habd.habd .habd-tag--style-2 { color: var(--habd-text); }
.habd.habd[data-tone="dark"] .habd-tag--style-2 { color: var(--habd-ink-light-quiet); }
.habd.habd .habd-tag--style-3 { color: var(--habd-accent); }
.habd.habd .habd-tag--style-4 { color: var(--habd-meta); }
.habd.habd .habd-tag-wall__actions {
  display: flex;
  gap: 12px;
}

/* ==========================================================================
   12 Quick links (habd_expanding_panels, habd_panel)
   Default (no JS, and 1024px and below): every panel open, in a grid.
   Accordion (JS, 1025px and up): one row, one panel open.
   ========================================================================== */
section.habd.habd-expanding-panels {
  --habd-pad-t: 72px;
  --habd-pad-b: 76px;
  --habd-glow-size: 620px;
  --habd-glow-y: -180px;
  --habd-glow-x: -140px;
}
/* A 2px gold rule across the top edge, fading both ways. */
section.habd.habd-expanding-panels::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(201, 162, 74, 0), var(--habd-gold-deep) 40%, rgba(201, 162, 74, 0.1));
  pointer-events: none;
}
.habd.habd .habd-expanding-panels__stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.habd.habd-expanding-panels .habd-section-header__heading {
  font-size: min(var(--habd-fs-h2), 46px);
}
/* The one light-band h2 the v1 design sets in forest, not ink. */
.habd.habd-expanding-panels[data-tone="light"] .habd-section-header__heading {
  color: var(--habd-forest);
}
.habd.habd .habd-expanding-panels__aside {
  max-width: 380px;
}
.habd.habd .habd-panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.habd.habd .habd-panel {
  position: relative;
  min-width: 0;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid rgba(154, 123, 46, 0.5);
  border-radius: var(--habd-radius-l);
  background: #E7E2D4;
  box-shadow: 0 10px 24px rgba(31, 29, 26, 0.14);
  /* A dark island on any ground. */
  --habd-heading: var(--habd-ink-light);
  --habd-text: #D2DBD4;
  --habd-accent: var(--habd-gold);
  --habd-focus: var(--habd-gold);
  color: #D2DBD4;
}
.habd.habd .habd-panel__ground,
.habd.habd .habd-panel__media,
.habd.habd .habd-panel__scrim {
  position: absolute;
  inset: 0;
}
.habd.habd .habd-panel__ground {
  background: linear-gradient(160deg, #1B4C34, #0B2318 62%, #061410);
}
/* Grid mode (every panel open, text over most of the photo): a strong
   upward scrim, at least 0.72 even at the top, so the tag and number read
   on a light photograph. The accordion swaps in the design's two scrims
   below, each with a short top fade behind the number. */
.habd.habd .habd-panel__scrim {
  background: linear-gradient(to top, rgba(6, 20, 13, 0.95) 0%, rgba(6, 20, 13, 0.84) 55%, rgba(6, 20, 13, 0.72) 100%);
  pointer-events: none;
}
.habd.habd .habd-panel__number {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 2;
  font-family: var(--habd-serif);
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: var(--habd-gold);
  text-shadow: 0 1px 8px rgba(5, 15, 10, 0.85);
  pointer-events: none;
}
.habd.habd .habd-panel__toggle {
  display: none;
}
.habd.habd .habd-panel__body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}
.habd.habd .habd-panel__tag {
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-gold);
}
.habd.habd .habd-panel__title {
  font-size: 30px;
  line-height: 1.06;
  color: var(--habd-ink-light);
}
.habd.habd .habd-panel__copy {
  max-width: 380px;
  font-size: 16px;
  line-height: 1.5;
  color: #D2DBD4;
  text-wrap: pretty;
}
.habd.habd .habd-panel__link {
  margin-top: 6px;
}

@media (min-width: 1025px) {
  html.habd-js .habd.habd .habd-panels {
    display: flex;
    height: 380px;
  }
  html.habd-js .habd.habd .habd-panel {
    flex: 1 1 0;
    min-height: 0;
    cursor: pointer;
    border-color: rgba(154, 123, 46, 0.18);
    transition: flex 340ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 340ms ease, border-color 340ms ease;
  }
  html.habd-js .habd.habd .habd-panel.is-open {
    flex: 5.2 1 0;
    border-color: rgba(154, 123, 46, 0.5);
    box-shadow: 0 26px 56px rgba(31, 29, 26, 0.26);
  }
  /* Open: the brief's bottom-left radial, plus a top fade so the gold
     number reads on a bright photograph. */
  html.habd-js .habd.habd .habd-panel.is-open .habd-panel__scrim {
    background:
      linear-gradient(to bottom, rgba(5, 15, 10, 0.7) 0, rgba(5, 15, 10, 0.6) 36px, rgba(5, 15, 10, 0) 96px),
      radial-gradient(120% 80% at 20% 100%, rgba(6, 20, 13, 0.96) 0%, rgba(6, 20, 13, 0.55) 52%, rgba(6, 20, 13, 0.08) 100%);
  }
  /* Closed: the brief's upward scrim with its upper stops raised from
     0.55 and 0.35 to 0.78 and 0.62, because the vertical title (the
     toggle's visible name) runs up to 250px from the bottom, where the
     brief's scrim is too thin over a light photograph. */
  html.habd-js .habd.habd .habd-panel:not(.is-open) .habd-panel__scrim {
    background:
      linear-gradient(to bottom, rgba(5, 15, 10, 0.7) 0, rgba(5, 15, 10, 0.6) 36px, rgba(5, 15, 10, 0) 96px),
      linear-gradient(to top, rgba(5, 15, 10, 0.94), rgba(11, 35, 24, 0.78) 60%, rgba(20, 55, 38, 0.62));
  }
  /* The toggle covers the panel, so the whole panel is the hit area. */
  html.habd-js .habd.habd .habd-panel__toggle {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--habd-ink-light);
    cursor: pointer;
  }
  html.habd-js .habd.habd .habd-panel__toggle:focus-visible {
    outline-offset: -4px;
  }
  html.habd-js .habd.habd .habd-panel__vtitle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    height: 250px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--habd-serif);
    font-size: 21px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    color: var(--habd-ink-light);
    text-shadow: 0 1px 8px rgba(5, 15, 10, 0.85);
    transition: opacity 200ms ease;
  }
  /* Kept in the accessibility tree (it names the button); only hidden. */
  html.habd-js .habd.habd .habd-panel.is-open .habd-panel__vtitle {
    opacity: 0;
  }
  html.habd-js .habd.habd .habd-panel__body {
    width: min(380px, calc(100% - 44px));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  html.habd-js .habd.habd .habd-panel.is-open .habd-panel__body,
  html.habd-js .habd.habd .habd-panel:focus-within .habd-panel__body {
    visibility: visible;
    opacity: 1;
    transition: opacity 260ms ease 120ms, visibility 0s;
  }
  /* Clicks on the body fall through to the toggle, except on the link. */
  html.habd-js .habd.habd .habd-panel__link {
    pointer-events: auto;
  }
  /* If habd-bands.js has not enhanced the group, CSS still opens the panel
     under the pointer or holding focus. */
  html.habd-js .habd.habd .habd-panels:not(.is-enhanced) .habd-panel:is(:hover, :focus-within) {
    flex: 5.2 1 0;
  }
  html.habd-js .habd.habd .habd-panels:not(.is-enhanced) .habd-panel:is(:hover, :focus-within) .habd-panel__body {
    visibility: visible;
    opacity: 1;
  }
  html.habd-js .habd.habd .habd-panels:not(.is-enhanced):is(:hover, :focus-within) .habd-panel.is-open:not(:hover):not(:focus-within) {
    flex: 1 1 0;
  }
  html.habd-js .habd.habd .habd-panels:not(.is-enhanced):is(:hover, :focus-within) .habd-panel.is-open:not(:hover):not(:focus-within) .habd-panel__body {
    visibility: hidden;
    opacity: 0;
  }
}

/* ==========================================================================
   13 Featured professionals (habd_featured_people, habd_person_card)
   ========================================================================== */
section.habd.habd-featured-people {
  --habd-pad-t: 56px;
  --habd-pad-b: 60px;
  --habd-glow-size: 700px;
  --habd-glow-y: -240px;
  --habd-glow-x: -160px;
}
.habd.habd .habd-featured-people__stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.habd.habd-featured-people .habd-section-header {
  gap: 12px;
}
.habd.habd-featured-people .habd-section-header__heading {
  font-size: min(var(--habd-fs-h2), 40px);
  line-height: 1.05;
}
.habd.habd .habd-featured-people__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.habd.habd .habd-featured-people__grid.habd-grid--n1 { grid-template-columns: minmax(0, 1fr); }
.habd.habd .habd-featured-people__grid.habd-grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.habd.habd .habd-person-card {
  display: flex;
  min-width: 0;
}
.habd.habd .habd-person-card__card {
  position: relative;
  display: block;
  width: 100%;
  height: 360px;
  overflow: hidden;
  border-radius: var(--habd-radius-l);
  background: var(--habd-forest);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  color: var(--habd-ink-light-soft);
}
.habd.habd .habd-person-card__media {
  position: absolute;
  inset: 0;
}
.habd.habd .habd-person-card__media img {
  transition: transform 400ms ease;
}
.habd.habd a.habd-person-card__card:hover .habd-person-card__media img {
  transform: scale(1.03);
}
.habd.habd .habd-person-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 20, 13, 0.94) 14%, rgba(6, 20, 13, 0.25) 58%, rgba(6, 20, 13, 0.05));
  pointer-events: none;
}
.habd.habd .habd-person-card__body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.habd.habd .habd-person-card__discipline {
  font-size: 12px;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-gold);
}
.habd.habd .habd-person-card__name {
  font-size: 28px;
  line-height: 1.06;
  color: var(--habd-ink-light);
}
.habd.habd .habd-person-card__cta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-ink-light-soft);
  text-decoration: underline;
  text-decoration-color: rgba(195, 208, 198, 0);
  text-underline-offset: 4px;
  transition: text-decoration-color 180ms ease;
}
.habd.habd a.habd-person-card__card:hover .habd-person-card__cta,
.habd.habd a.habd-person-card__card:focus-visible .habd-person-card__cta {
  text-decoration-color: currentColor;
}

/* ==========================================================================
   15 Events rail (habd_event_rail) and the rail control
   ========================================================================== */
section.habd.habd-event-rail {
  --habd-pad-t: 76px;
  --habd-pad-b: 84px;
  border-top: 1px solid #EFE8D8;
}
.habd.habd .habd-event-rail__stack {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.habd.habd-event-rail .habd-section-header {
  gap: 12px;
  max-width: 700px;
}
.habd.habd-event-rail .habd-section-header__heading {
  font-size: min(var(--habd-fs-h2), 46px);
}
.habd.habd .habd-rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* ul: the reset's .habd.habd :is(ul, ol)[class] (0,3,1) zeroes padding, so
   this rule names the element to win it back. The padding gives the card
   shadows, the hover lift and the keyboard focus ring (2px, 3px out, on a
   card lifted 3px) room inside the scroller, which clips on every side;
   the negative margins cancel it out, and scroll-padding keeps the snapped
   card on the content edge. */
.habd.habd ul.habd-rail__track {
  display: flex;
  gap: 20px;
  margin: -10px -8px -30px;
  padding: 10px 8px 30px;
  scroll-padding-inline: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.habd.habd .habd-rail__track::-webkit-scrollbar {
  display: none;
}
.habd.habd .habd-rail__item {
  flex: none;
  width: 340px;
  scroll-snap-align: start;
}
.habd.habd .habd-rail__arrows {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.habd.habd .habd-rail__arrows[hidden] {
  display: none;
}
.habd.habd .habd-rail__arrow {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
/* Next is the filled arrow. Its glyph is forest, not the design's white:
   white on #C9A24A is 2.4:1 (WCAG 1.4.11); forest is 6.4:1 (contrast
   sign-off list). */
.habd.habd .habd-rail__arrow--next {
  border-color: var(--habd-gold-deep);
  background: var(--habd-gold-deep);
  color: var(--habd-forest);
}
.habd.habd .habd-rail__arrow--next:hover,
.habd.habd .habd-rail__arrow--next:focus-visible {
  border-color: var(--habd-gold);
  background: var(--habd-gold);
  color: var(--habd-forest);
}
.habd.habd .habd-rail__arrow[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}
.habd.habd .habd-rail__arrow--prev[aria-disabled="true"]:hover {
  background: transparent;
}
.habd.habd .habd-rail__arrow--next[aria-disabled="true"]:hover {
  border-color: var(--habd-gold-deep);
  background: var(--habd-gold-deep);
}

/* ==========================================================================
   16 HIV guide strip (habd_cta_strip)
   ========================================================================== */
section.habd.habd-cta-strip {
  --habd-pad-t: 34px;
  --habd-pad-b: 34px;
  --habd-glow-size: 560px;
  --habd-glow-y: -220px;
  --habd-glow-x: -120px;
  --habd-glow-alpha: 0.22;
  border-top: 1px solid #DCD5C3;
}
.habd.habd .habd-cta-strip__grid {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}
.habd.habd .habd-cta-strip__cover {
  position: relative;
  height: 118px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(31, 29, 26, 0.18);
}
.habd.habd .habd-cta-strip__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 620px;
}
.habd.habd .habd-cta-strip__label {
  font-size: 12px;
}
.habd.habd .habd-cta-strip__title {
  font-size: 28px;
  line-height: 1.1;
  color: var(--habd-heading);
}
.habd.habd[data-tone="light"] .habd-cta-strip__title {
  color: var(--habd-forest);
}
.habd.habd .habd-cta-strip__aside {
  font-size: 16px;
  line-height: 1.5;
  color: var(--habd-text);
  text-wrap: pretty;
}
.habd.habd .habd-cta-strip__action .habd-btn {
  padding: 14px 27px;
  font-size: 13px;
}

/* ==========================================================================
   17 Reviews (habd_testimonials, habd_testimonial)
   ========================================================================== */
section.habd.habd-testimonials {
  --habd-pad-t: 80px;
  --habd-pad-b: 88px;
  --habd-glow-size: 600px;
  --habd-glow-y: -220px;
  --habd-glow-x: -140px;
}
.habd.habd .habd-testimonials__stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.habd.habd-testimonials .habd-section-header {
  gap: 12px;
}
.habd.habd-testimonials .habd-section-header__heading {
  font-size: min(var(--habd-fs-h2), 48px);
}
.habd.habd .habd-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.habd.habd .habd-testimonial {
  display: flex;
  min-width: 0;
}
.habd.habd .habd-testimonial__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 28px;
  border: 1px solid #EBE3CF;
  border-radius: var(--habd-radius-xl);
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(13, 42, 29, 0.08);
}
/* Gold text on light is #7A611E (5.9:1 on the white card); the design's
   #C9A24A is 2.4:1, under the 3:1 a rating graphic needs. An unlit star is
   #B8A77A, still clearly apart from a lit one. Contrast sign-off list. */
.habd.habd .habd-testimonial__stars {
  font-size: 15px;
  letter-spacing: 0.28em;
  line-height: 1;
  color: var(--habd-gold-ink);
}
.habd.habd .habd-testimonial__star--off {
  color: #B8A77A;
}
.habd.habd .habd-testimonial__quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--habd-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  color: #3F3A31;
  text-wrap: pretty;
}
.habd.habd .habd-testimonial__by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #EFE8D8;
}
.habd.habd .habd-testimonial__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(155deg, #F7E7BE, var(--habd-gold-deep));
  box-shadow: 0 4px 10px rgba(201, 162, 74, 0.3);
  font-family: var(--habd-serif);
  font-size: 17px;
  line-height: 1;
  color: var(--habd-forest);
}
.habd.habd .habd-testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.habd.habd .habd-testimonial__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.habd.habd .habd-testimonial__name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--habd-forest);
}
.habd.habd .habd-testimonial__role {
  font-size: 14px;
  line-height: 1.4;
  color: var(--habd-ink-meta);
}

/* ==========================================================================
   18 Latest articles (habd_latest_articles), v2
   ========================================================================== */
section.habd.habd-latest-articles {
  --habd-pad-t: 76px;
  --habd-pad-b: 84px;
  border-top: 1px solid #EFE8D8;
}
.habd.habd .habd-latest-articles__stack {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.habd.habd-latest-articles .habd-section-header {
  gap: 12px;
}
.habd.habd-latest-articles .habd-section-header__heading {
  font-size: min(var(--habd-fs-h2), 46px);
}
.habd.habd .habd-latest-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.habd.habd .habd-latest-articles__item {
  display: flex;
  min-width: 0;
}
.habd.habd .habd-card--article {
  width: 100%;
  border-radius: var(--habd-radius-xl);
  box-shadow: 0 12px 30px rgba(31, 29, 26, 0.07);
}
.habd.habd .habd-card--article .habd-card__media {
  height: 196px;
}
.habd.habd .habd-card--article .habd-card__body {
  gap: 10px;
  padding: 24px 26px 28px;
}
/* Titles run to three lines without the card growing (brief 18): three
   lines of room, and a longer title is clamped (the full title stays in the
   link's accessible name). */
.habd.habd .habd-card--article .habd-card__title {
  display: -webkit-box;
  min-height: 3.3em;
  overflow: hidden;
  font-size: 28px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* ==========================================================================
   19a Mission / 19b Closing ask (habd_centred_band)
   ========================================================================== */
section.habd.habd-centred-band {
  --habd-pad-t: 90px;
  --habd-pad-b: 96px;
  --habd-glow-size: 820px;
  --habd-glow-y: -260px;
  --habd-glow-x: 38%;
  --habd-glow-alpha: 0.13;
}
section.habd.habd-centred-band--closing {
  --habd-pad-t: 108px;
  --habd-pad-b: 116px;
  --habd-glow-size: 860px;
  --habd-glow-y: -280px;
  --habd-glow-x: 34%;
  --habd-glow-alpha: 0.16;
}
.habd.habd .habd-centred-band__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.habd.habd-centred-band--closing .habd-centred-band__stack {
  gap: 22px;
}
.habd.habd .habd-centred-band__mark {
  width: 52px;
  height: auto;
}
.habd.habd .habd-centred-band__title {
  max-width: 1000px;
  font-size: min(var(--habd-fs-h2), 60px);
  line-height: 1.04;
  text-wrap: balance;
}
.habd.habd-centred-band--closing .habd-centred-band__title {
  font-size: min(var(--habd-fs-h2-xl), 84px);
  line-height: 1;
  text-shadow: 0 2px 26px rgba(5, 15, 10, 0.6);
}
.habd.habd .habd-centred-band__body {
  max-width: 780px;
  font-size: 20px;
  line-height: 1.7;
  color: var(--habd-ink-light-quiet);
}
.habd.habd[data-tone="light"] .habd-centred-band__body {
  color: var(--habd-text);
}
.habd.habd-centred-band--closing .habd-centred-band__body {
  max-width: 760px;
  font-size: 21px;
  line-height: 1.65;
  color: var(--habd-text);
}
.habd.habd .habd-centred-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}
.habd.habd-centred-band--closing .habd-centred-band__actions {
  margin-top: 14px;
}
/* The single most important button on the page. */
.habd.habd .habd-btn--primary.habd-centred-band__signup {
  padding: 22px 56px;
  border: 0;
  background: linear-gradient(178deg, #F2DEB4, var(--habd-gold));
  box-shadow: 0 18px 40px rgba(229, 200, 140, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  font-size: 16px;
}
.habd.habd .habd-btn--primary.habd-centred-band__signup:hover,
.habd.habd .habd-btn--primary.habd-centred-band__signup:focus-visible {
  background: linear-gradient(178deg, #F7E7BE, var(--habd-gold-light));
}
.habd.habd .habd-centred-band__note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--habd-meta);
}

/* ==========================================================================
   Weights. The band root is Jost 300 (habd-base.css). The v1 design gives
   its Cormorant numerals and figures, and its small tracked labels, no
   weight, so they are 400 there; they are 400 here too.
   ========================================================================== */
.habd.habd :is(.habd-path-card__number, .habd-stat__figure, .habd-stat__label, .habd-logo__name, .habd-proof-row__position, .habd-feature-split__number, .habd-feature-split__figure-label, .habd-statement-rows__card-note, .habd-numbered-row__number, .habd-panel__number, .habd-panel__vtitle, .habd-panel__tag, .habd-person-card__discipline, .habd-testimonial__avatar) {
  font-weight: 400;
}

/* ==========================================================================
   Tablet: 1024px and below
   ========================================================================== */
@media (max-width: 1024px) {
  section.habd {
    --habd-pad-scale: 0.8;
  }
  section.habd.habd-logo-strip,
  section.habd.habd-cta-strip {
    --habd-pad-scale: 1;
  }

  /* Header rows stack; asides and buttons drop under the heading, left. */
  .habd.habd .habd-band__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .habd.habd .habd-band__aside,
  .habd.habd .habd-path-cards__aside {
    max-width: 640px;
    text-align: left;
  }

  /* Hero. The content column (up to 800px) now covers most of the band, so
     the side-clearing scrim would leave the right end of the h1 and the
     second trust mark on a 0.5 to 0.12 veil. The scrim is still lighter to
     the right, but never below 0.72. The search text steps down to 18px so
     the placeholder fits at 768px. */
  .habd.habd-hero--photo .habd-hero__scrim {
    background:
      linear-gradient(to top, rgba(5, 15, 10, 0.6) 0, rgba(5, 15, 10, 0) 200px),
      radial-gradient(70% 60% at 4% 0%, rgba(52, 110, 80, 0.22) 0%, rgba(13, 42, 29, 0) 58%),
      linear-gradient(100deg, #0D2A1D 0 30%, rgba(13, 42, 29, 0.88) 65%, rgba(13, 42, 29, 0.72) 100%);
  }
  .habd.habd .habd-search__input {
    font-size: 18px;
  }
  .habd.habd .habd-hero__actions {
    margin-left: 0;
    width: 100%;
  }

  /* Two doors: 01 above 02. */
  .habd.habd .habd-path-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Founder / Industry: one column, image below. */
  .habd.habd .habd-media-split__grid,
  .habd.habd-media-split--portrait .habd-media-split__grid,
  .habd.habd-media-split--image-left.habd-media-split--half .habd-media-split__grid,
  .habd.habd-media-split--image-left.habd-media-split--portrait .habd-media-split__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .habd.habd-media-split--image-left .habd-media-split__media {
    order: 0;
  }
  .habd.habd .habd-media-split__media {
    height: 440px;
  }
  .habd.habd-media-split--portrait .habd-media-split__media {
    width: 100%;
    max-width: 420px;
    height: 460px;
  }

  /* Partners: intro above a 3-column grid of tiles. */
  .habd.habd .habd-logo-strip__row {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .habd.habd .habd-logo-strip__intro {
    max-width: none;
  }
  .habd.habd .habd-logo-strip__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Proof rows: check and term on line 1; member left, position right on
     line 2. */
  .habd.habd .habd-proof-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas:
      "check term term"
      ". member position";
    gap: 10px 20px;
  }
  .habd.habd .habd-proof-row__check { grid-area: check; align-self: center; }
  .habd.habd .habd-proof-row__term { grid-area: term; font-size: 34px; }
  .habd.habd .habd-proof-row__member { grid-area: member; width: auto; font-size: 18px; }
  .habd.habd .habd-proof-row__position { grid-area: position; width: auto; align-self: center; }
  .habd.habd .habd-proof-rows__foot {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Membership: statements keep the zigzag. */
  .habd.habd .habd-statement-rows__outcome {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* Difference: figure or checks go below. */
  .habd.habd .habd-feature-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }

  /* Badge: rows go below. */
  .habd.habd .habd-badge-panel__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  /* Tags step down. */
  .habd.habd .habd-tag--s { font-size: 20px; }
  .habd.habd .habd-tag--m { font-size: 23px; }
  .habd.habd .habd-tag--l { font-size: 30px; }
  .habd.habd .habd-tag--xl { font-size: 36px; }

  /* Quick links: a 2-column grid of open panels, no vertical titles. */
  .habd.habd .habd-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .habd.habd .habd-panel {
    min-height: 260px;
  }
  .habd.habd .habd-panel__body {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    justify-content: flex-end;
    min-height: 260px;
    max-width: none;
    padding: 48px 22px 22px;
  }

  /* Featured: 2 columns, the third full width at 300px. */
  .habd.habd .habd-featured-people__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .habd.habd .habd-featured-people__grid > .habd-person-card:nth-child(3):last-child {
    grid-column: 1 / -1;
  }
  .habd.habd .habd-featured-people__grid > .habd-person-card:nth-child(3):last-child .habd-person-card__card {
    height: 300px;
  }

  /* Guide strip: button on row 2. */
  .habd.habd .habd-cta-strip__grid {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .habd.habd .habd-cta-strip__action {
    grid-column: 2;
  }

  /* Reviews: 2 columns. */
  .habd.habd .habd-testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Articles: 2 columns; the third spans both, image left. */
  .habd.habd .habd-latest-articles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .habd.habd .habd-latest-articles__item:nth-child(3):last-child {
    grid-column: 1 / -1;
  }
  .habd.habd .habd-latest-articles__item:nth-child(3):last-child .habd-card {
    flex-direction: row;
  }
  .habd.habd .habd-latest-articles__item:nth-child(3):last-child .habd-card__media {
    width: 42%;
    height: auto;
    min-height: 220px;
  }
  .habd.habd .habd-latest-articles__item:nth-child(3):last-child .habd-card__title {
    min-height: 0;
  }
}

/* ==========================================================================
   Phone: 640px and below
   ========================================================================== */
@media (max-width: 640px) {
  section.habd {
    --habd-pad-scale: 0.66;
  }
  section.habd.habd-logo-strip,
  section.habd.habd-cta-strip {
    --habd-pad-scale: 0.85;
  }
  /* Small text on the gradient grounds. On a phone the text runs across the
     whole band, so it also sits over the darker stops: the champagne ground
     ends at #EFE2C4 (the 12px #7A611E label stays at 4.5:1 or better), and
     the tag wall's glow is fainter under the #8FA396 aside. */
  section.habd[data-ground="champagne-gradient"] {
    --habd-bg: linear-gradient(120deg, #FFFDF8 0%, #F7F0DF 45%, #EFE2C4 100%);
  }
  section.habd.habd-cta-strip {
    --habd-glow-alpha: 0.12;
  }
  section.habd.habd-tag-wall {
    --habd-glow-alpha: 0.08;
  }
  section.habd.habd .habd-section-header__heading {
    font-size: 34px;
  }
  /* Same weight (0,3,1) as the rule above, so these come after it. */
  section.habd.habd-media-split--portrait .habd-section-header__heading {
    font-size: 40px;
  }
  section.habd.habd-featured-people .habd-section-header__heading {
    font-size: 32px;
  }
  .habd.habd .habd-band__aside,
  .habd.habd .habd-section-header__lead {
    font-size: 17px;
  }

  /* Hero: full 0.8 overlay, 40px h1, stacked search, full-width buttons.
     habd-hero--photo is on the band root itself (.habd). */
  .habd.habd-hero--photo .habd-hero__scrim {
    background:
      linear-gradient(to top, rgba(5, 15, 10, 0.6) 0, rgba(5, 15, 10, 0) 200px),
      rgba(13, 42, 29, 0.8);
  }
  .habd.habd .habd-hero__content {
    gap: 24px;
  }
  .habd.habd .habd-hero__label::after {
    display: none;
  }
  .habd.habd .habd-hero__title {
    font-size: 40px;
    line-height: 1.02;
  }
  /* The glow stays behind the h1: at 300px tall it reached up over the
     label and down over the lead paragraph, lightening the ground under the
     13px and 18px text. */
  .habd.habd .habd-hero__title::before {
    left: -40px;
    top: -20px;
    width: 100%;
    height: calc(100% + 30px);
  }
  .habd.habd .habd-hero__lead {
    font-size: 18px;
  }
  .habd.habd .habd-search {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    border-radius: 24px;
  }
  .habd.habd .habd-search__ring {
    display: none;
  }
  .habd.habd .habd-search__input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    font-size: 16px;
  }
  .habd.habd .habd-search__submit {
    width: 100%;
    min-height: 52px;
    padding: 16px 24px;
  }
  .habd.habd .habd-hero__marks {
    flex-direction: column;
    gap: 18px;
  }
  .habd.habd .habd-hero__actions {
    flex-direction: column;
  }
  .habd.habd .habd-hero__actions .habd-btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Two doors */
  .habd.habd .habd-path-card__card {
    min-height: 0;
    padding: 28px 24px 26px;
  }
  .habd.habd .habd-path-card__title {
    font-size: 32px;
  }
  .habd.habd .habd-path-card__text {
    font-size: 17px;
  }

  /* Founder / Industry */
  .habd.habd .habd-media-split__body,
  .habd.habd-media-split--portrait .habd-media-split__body {
    font-size: 18px;
  }
  .habd.habd .habd-media-split__media,
  .habd.habd-media-split--portrait .habd-media-split__media {
    max-width: none;
    height: 360px;
  }
  .habd.habd .habd-stat__figure {
    font-size: 36px;
  }

  /* Partners: 2-column grid; the line is body text, so 16px. */
  .habd.habd .habd-logo-strip__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .habd.habd .habd-logo-strip__line {
    font-size: 16px;
  }

  /* Proof rows: term, then member and position stacked. */
  .habd.habd .habd-proof-row {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas:
      "check term"
      ". member"
      ". position";
    gap: 6px 16px;
  }
  .habd.habd .habd-proof-row__term {
    font-size: 28px;
  }
  .habd.habd .habd-proof-row__member {
    font-size: 17px;
  }
  .habd.habd .habd-proof-row__position {
    text-align: left;
  }
  .habd.habd .habd-proof-row__check {
    align-self: start;
    margin-top: 4px;
  }
  .habd.habd .habd-proof-rows__body {
    font-size: 17px;
  }

  /* Membership: all rows left, checklist one column. */
  .habd.habd .habd-statement-row--end {
    justify-content: flex-start;
    text-align: left;
  }
  .habd.habd .habd-statement-row__statement {
    font-size: 28px;
  }
  .habd.habd .habd-statement-row__text {
    font-size: 16px;
  }
  .habd.habd .habd-statement-rows__outcome-title {
    font-size: 34px;
  }
  .habd.habd .habd-statement-rows__outcome-body {
    font-size: 18px;
  }
  .habd.habd .habd-statement-rows__card {
    padding: 26px 22px;
  }
  .habd.habd .habd-statement-rows__card-title {
    font-size: 28px;
  }
  .habd.habd .habd-checklist {
    grid-template-columns: minmax(0, 1fr);
  }
  .habd.habd .habd-checklist__text {
    font-size: 16px;
  }

  /* Difference: 40px h2; 0% about 110px, label beneath. */
  .habd.habd .habd-feature-split__title {
    font-size: 40px;
  }
  .habd.habd .habd-feature-split__body {
    font-size: 18px;
  }
  .habd.habd .habd-feature-split__check {
    padding: 16px 18px;
  }
  .habd.habd .habd-feature-split__check-text {
    font-size: 17px;
  }

  /* Badge: 44px h2, 56px number column with 36px numbers, stacked buttons. */
  .habd.habd .habd-badge-panel__title {
    font-size: 44px;
    line-height: 1;
  }
  .habd.habd .habd-badge-panel__body {
    font-size: 18px;
  }
  .habd.habd .habd-badge-panel__quote-text {
    font-size: 22px;
  }
  .habd.habd .habd-badge-panel__cite {
    font-size: 16px;
  }
  .habd.habd .habd-badge-panel__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .habd.habd .habd-badge-panel__actions .habd-btn {
    white-space: normal;
    text-align: center;
  }
  .habd.habd .habd-numbered-row {
    gap: 14px;
  }
  .habd.habd .habd-numbered-row__number {
    width: 56px;
    font-size: 36px;
  }
  .habd.habd .habd-numbered-row__title {
    font-size: 19px;
  }

  /* Tags */
  .habd.habd .habd-tag-wall__tags {
    gap: 10px 18px;
  }
  .habd.habd .habd-tag--s { font-size: 19px; }
  .habd.habd .habd-tag--m { font-size: 22px; }
  .habd.habd .habd-tag--l { font-size: 26px; }
  .habd.habd .habd-tag--xl { font-size: 30px; }

  /* Quick links: stacked, all open, about 200px each. */
  .habd.habd .habd-panels {
    grid-template-columns: minmax(0, 1fr);
  }
  .habd.habd .habd-panel,
  .habd.habd .habd-panel__body {
    min-height: 200px;
  }

  /* Featured: one column. */
  .habd.habd .habd-featured-people__grid,
  .habd.habd .habd-featured-people__grid.habd-grid--n2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .habd.habd .habd-featured-people__grid > .habd-person-card .habd-person-card__card,
  .habd.habd .habd-featured-people__grid > .habd-person-card:nth-child(3):last-child .habd-person-card__card {
    height: 340px;
  }

  /* Events: 84vw cards with a peek of the next; touch scroll snaps. The
     arrows are hidden (habd-bands.js also leaves them hidden here). */
  .habd.habd .habd-rail__item {
    width: min(84vw, 320px);
  }
  .habd.habd .habd-rail__arrows {
    display: none;
  }
  .habd.habd .habd-card__meta {
    font-size: 16px;
  }

  /* Guide strip: cover full width, then text, then a full-width button. */
  .habd.habd .habd-cta-strip__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .habd.habd .habd-cta-strip__cover {
    height: 160px;
  }
  .habd.habd .habd-cta-strip__action {
    grid-column: auto;
  }
  .habd.habd .habd-cta-strip__action .habd-btn {
    width: 100%;
    white-space: normal;
  }
  .habd.habd .habd-cta-strip__title {
    font-size: 26px;
  }

  /* Reviews: one column. */
  .habd.habd .habd-testimonials__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .habd.habd .habd-testimonial__card {
    padding: 24px 22px;
  }
  .habd.habd .habd-testimonial__quote {
    font-size: 17px;
  }

  /* Articles: one column. */
  .habd.habd .habd-latest-articles__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .habd.habd .habd-latest-articles__item:nth-child(3):last-child .habd-card {
    flex-direction: column;
  }
  .habd.habd .habd-latest-articles__item:nth-child(3):last-child .habd-card__media {
    width: auto;
    height: 196px;
    min-height: 0;
  }
  .habd.habd .habd-card--article .habd-card__title {
    min-height: 0;
    font-size: 26px;
  }

  /* Mission and closing: full-width buttons (max 360px). */
  .habd.habd .habd-centred-band__title {
    font-size: 36px;
  }
  .habd.habd-centred-band--closing .habd-centred-band__title {
    font-size: 44px;
  }
  .habd.habd .habd-centred-band__body,
  .habd.habd-centred-band--closing .habd-centred-band__body {
    font-size: 18px;
  }
  .habd.habd .habd-centred-band__actions {
    width: 100%;
    max-width: 360px;
  }
  .habd.habd .habd-centred-band__actions .habd-btn {
    width: 100%;
    white-space: normal;
  }
  .habd.habd .habd-btn--primary.habd-centred-band__signup {
    padding: 20px 28px;
  }
  .habd.habd .habd-centred-band__note {
    font-size: 16px;
  }
}

/* ==========================================================================
   Motion. habd-base.css already zeroes transitions under reduced motion;
   these remove the movement itself.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .habd.habd a.habd-path-card__card:hover,
  .habd.habd a.habd-path-card__card:focus-visible,
  .habd.habd a.habd-card:hover,
  .habd.habd a.habd-card:focus-visible,
  .habd.habd a.habd-logo__tile:hover,
  .habd.habd a.habd-logo__tile:focus-visible {
    transform: none;
  }
  .habd.habd a.habd-person-card__card:hover .habd-person-card__media img {
    transform: none;
  }
  .habd.habd .habd-rail__track {
    scroll-behavior: auto;
  }
}