/* Longhorn CR — blog listing and article pages.
 *
 * Loaded AFTER Style/vg-header.css (and therefore after Duda's own sheets), so
 * these rules win on tie-break. Everything here is scoped to the two blog page
 * aliases — `blog` for the listing, `d1-internal-blog-post` for all six posts —
 * so nothing leaks into the 90 other pages.
 *
 * ONE responsive treatment serves all three device variants, matching the
 * pattern set by vg-header.css. Duda exported desktop/tablet/mobile copies of
 * every page, but the markup this file styles is identical in all three; the
 * breakpoints below do the work that Duda did with three separate stylesheets.
 *
 * Colour and type come from the site: navy rgb(12,36,48), coral #f26554,
 * 'Patua One' for display, 'Inter' for text. --lh-* vars are declared in
 * vg-header.css; the fallbacks keep this file readable on its own.
 *
 * A hardening block sits at the end. Duda's Style/desktop.css is ~1.2MB of
 * heavily !important-ed generic rules (`#dm .dmBody h2 { ... !important }` and
 * similar) that reach into any markup added to the page. The hardening block is
 * the minimum needed to hold this layout against them — see the note there.
 */

#dmRoot[data-page-alias="blog"],
#dmRoot[data-page-alias="d1-internal-blog-post"] {
  --lhb-navy: var(--lh-navy, rgb(12, 36, 48));
  --lhb-navy-deep: var(--lh-navy-deep, rgb(8, 25, 34));
  --lhb-accent: var(--lh-accent, #f26554);
  --lhb-accent-dark: var(--lh-accent-dark, #d9503f);
  --lhb-ink: #16242c;
  --lhb-ink-soft: #55666f;
  --lhb-rule: #dfe5e8;
  --lhb-paper: #ffffff;
  --lhb-band: #f2f5f6;
  --lhb-max: 1200px;
  --lhb-gap: 32px;
  --lhb-display: "Patua One", "Patua One Fallback", Georgia, serif;
  --lhb-text: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------- shell -- */

.lhb-wrap {
  max-width: var(--lhb-max);
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
}

.lhb-eyebrow {
  margin: 0 0 14px;
  font-family: var(--lhb-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lhb-accent);
}

/* ------------------------------------------------------- listing: grid -- */

.lhb-index .lhb-grid { margin-top: 40px; }

.lhb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lhb-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.lhb-card {
  display: flex;
  background: var(--lhb-paper);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(8, 25, 34, .10), 0 10px 26px rgba(8, 25, 34, .12);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease;
}

.lhb-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

/* 3:2, not 16:9. One of the six featured photos (140292c5, the standing-seam
   aerial) is letterboxed: 5% of its width on each side is black bar baked into
   the JPEG. A frame at the source's own 1.78 crops nothing and the bars show.
   3:2 crops 7.9% off each side, which clears them with room to spare, and the
   other five photos lose nothing that matters. Any frame ratio above ~1.60 here
   will put the bars back — see the aspect assertions in verify_render.py. */
.lhb-card__media {
  position: relative;
  overflow: hidden;
  background: #dfe5e8;
  aspect-ratio: 3 / 2;
}
/* aspect-ratio has been supported everywhere since 2021, but a padding box is
   the difference between a clean grid and a collapsed one on anything older. */
@supports not (aspect-ratio: 1) {
  .lhb-card__media { height: 0; padding-bottom: 66.67%; }
  .lhb-card__img { position: absolute; inset: 0; }
}

.lhb-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

/* The coral rule under the image is the hover tell that survives a still
   screenshot — it scales from the left rather than fading. */
.lhb-card__media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--lhb-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s cubic-bezier(.65, 0, .35, 1);
}

.lhb-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 26px 26px;
}

.lhb-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--lhb-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lhb-ink-soft);
}
.lhb-card__dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--lhb-accent);
}

.lhb-card__title {
  margin: 0 0 12px;
  font-family: var(--lhb-display);
  font-size: 22px;
  line-height: 1.24;
  font-weight: 400;
  color: var(--lhb-navy);
  transition: color .2s ease;
}

.lhb-card__excerpt {
  margin: 0 0 20px;
  font-family: var(--lhb-text);
  font-size: 15px;
  line-height: 1.62;
  color: var(--lhb-ink-soft);
}

.lhb-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--lhb-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lhb-accent);
}
.lhb-arrow,
.lhb-card__cta svg,
.lhb-related__all svg {
  width: 14px; height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.lhb-related__all { display: inline-flex; align-items: center; gap: 8px; }
.lhb-related__all:hover svg, .lhb-related__all:focus-visible svg { transform: translateX(4px); }

.lhb-card:hover,
.lhb-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(8, 25, 34, .12), 0 18px 40px rgba(8, 25, 34, .22);
}
.lhb-card:hover .lhb-card__img,
.lhb-card:focus-within .lhb-card__img { transform: scale(1.05); }
.lhb-card:hover .lhb-card__media::after,
.lhb-card:focus-within .lhb-card__media::after { transform: scaleX(1); }
.lhb-card:hover .lhb-card__title,
.lhb-card:focus-within .lhb-card__title { color: var(--lhb-accent-dark); }
.lhb-card:hover .lhb-card__cta svg,
.lhb-card:focus-within .lhb-card__cta svg { transform: translateX(4px); }

.lhb-card__link:focus-visible {
  outline: 3px solid var(--lhb-accent);
  outline-offset: 3px;
}

@media (max-width: 1023px) {
  .lhb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}
@media (max-width: 639px) {
  .lhb-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lhb-card__body { padding: 20px 20px 22px; }
  .lhb-card__title { font-size: 20px; }
}

/* ----------------------------------------------- article: header block -- */

.lhb-head {
  background: linear-gradient(180deg, var(--lhb-navy-deep) 0%, var(--lhb-navy) 100%);
  padding: 30px 0 44px;
  text-align: left;
}

.lhb-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  font-family: var(--lhb-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lhb-crumbs a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .2s ease; }
.lhb-crumbs a:hover, .lhb-crumbs a:focus-visible { color: var(--lhb-accent); }
.lhb-crumbs [aria-hidden] { color: rgba(255, 255, 255, .32); }
.lhb-crumbs [aria-current] { color: #fff; }

.lhb-title {
  max-width: 20ch;
  margin: 0;
  font-family: var(--lhb-display);
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.1;
  font-weight: 400;
  color: #fff;
}

/* Author / date / read time. A list so it reads as a set to a screen reader,
   with the bullets suppressed and replaced by rules. */
.lhb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--lhb-text);
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .74);
}
.lhb-meta li { display: flex; align-items: center; gap: 18px; }
.lhb-meta li + li::before {
  content: "";
  width: 1px; height: 13px;
  background: rgba(255, 255, 255, .28);
}
.lhb-meta__author { color: #fff; font-weight: 600; }

/* ------------------------------------------------------- article: hero -- */

.lhb-hero {
  margin: 0;
  background: var(--lhb-navy);
}
.lhb-hero img {
  display: block;
  width: 100%;
  height: clamp(260px, 34vw, 460px);
  object-fit: cover;
}

/* ------------------------------------------------------- article: body -- */

.lhb-body {
  background: var(--lhb-band);
  padding: 0 0 72px;
}

.lhb-sheet {
  max-width: 820px;
  margin: -44px auto 0;
  padding: 56px 60px 48px;
  background: var(--lhb-paper);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(8, 25, 34, .08), 0 18px 44px rgba(8, 25, 34, .13);
  box-sizing: border-box;
}

/* The measure — ~68 rendered characters per line.
   NOT `68ch`: `ch` is the advance width of "0", and Inter's digits are wider
   than its average lowercase letter, so 68ch measured out at 88 characters in
   the browser. 52ch is the value that actually renders 68. Verified against a
   real render rather than assumed — see probes/article.js.
   Full-width children (pull quotes, figures, callouts) opt back out below. */
.lhb-article {
  max-width: 52ch;
  margin: 0 auto;
  font-family: var(--lhb-text);
  font-size: 18px;
  line-height: 1.72;
  color: var(--lhb-ink);
  text-align: left;
}

.lhb-article > p {
  margin: 0 0 1.35em;
}

.lhb-article > .lhb-lead {
  font-size: 21px;
  line-height: 1.58;
  color: var(--lhb-navy);
  font-weight: 500;
  margin-bottom: 1.5em;
}

.lhb-article h2 {
  margin: 2.2em 0 .55em;
  font-family: var(--lhb-display);
  font-size: 27px;
  line-height: 1.24;
  font-weight: 400;
  color: var(--lhb-navy);
}
.lhb-article h2:first-child { margin-top: 0; }

.lhb-article h3 {
  margin: 1.9em 0 .5em;
  font-family: var(--lhb-text);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--lhb-navy);
}

/* A short coral rule above each h2 gives the sections a visible rhythm without
   adding another type size. */
.lhb-article h2::before {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--lhb-accent);
}
.lhb-article h2:first-child::before { margin-top: 0; }

.lhb-article strong { font-weight: 700; color: var(--lhb-navy); }
.lhb-article a { color: var(--lhb-accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.lhb-article a:hover, .lhb-article a:focus-visible { color: var(--lhb-navy); }

/* Lists — coral markers, indented off the measure rather than into it. */
.lhb-article ul,
.lhb-article ol {
  margin: 0 0 1.5em;
  padding: 0;
  list-style: none;
}
.lhb-article li {
  position: relative;
  margin: 0 0 .7em;
  padding-left: 30px;
}
.lhb-article ul > li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--lhb-accent);
  box-sizing: border-box;
}
.lhb-article ol { counter-reset: lhb-ol; }
.lhb-article ol > li { counter-increment: lhb-ol; }
.lhb-article ol > li::before {
  content: counter(lhb-ol);
  position: absolute;
  left: 0; top: .1em;
  font-size: 13px;
  font-weight: 700;
  color: var(--lhb-accent);
}
.lhb-article li strong { color: var(--lhb-navy); }

/* Pull quote. Not a duplicate of body copy — an existing paragraph promoted in
   place, so the sentence still appears exactly once on the page. */
.lhb-article .lhb-pull {
  position: relative;
  max-width: none;
  margin: 2.4em 0;
  padding: 4px 0 4px 30px;
  border-left: 4px solid var(--lhb-accent);
  font-family: var(--lhb-display);
  font-size: 25px;
  line-height: 1.36;
  font-weight: 400;
  color: var(--lhb-navy);
}
.lhb-article .lhb-pull p { margin: 0; }
.lhb-article .lhb-pull strong { font-weight: 400; }

/* Closing callout — phone number / next step at the foot of a post. */
.lhb-article .lhb-note {
  margin: 2.2em 0 1.4em;
  padding: 22px 26px;
  background: var(--lhb-band);
  border-radius: 3px;
  border-left: 4px solid var(--lhb-navy);
  font-size: 17px;
  line-height: 1.6;
}
.lhb-article .lhb-note p { margin: 0 0 .5em; }
.lhb-article .lhb-note p:last-child { margin-bottom: 0; }
.lhb-article .lhb-note a { color: var(--lhb-navy); font-weight: 700; }

/* Inline figure — breaks the measure to the full sheet width, captioned. */
.lhb-figure {
  max-width: none;
  width: 100%;
  margin: 2.6em 0;
}
.lhb-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
}
.lhb-figure figcaption {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 3px solid var(--lhb-accent);
  font-family: var(--lhb-text);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lhb-ink-soft);
}

@media (min-width: 1000px) {
  /* Let figures bleed past the measure into the sheet's padding, so images read
     as wider than the text without leaving the card. */
  .lhb-figure { width: calc(100% + 80px); margin-left: -40px; }
}

/* ------------------------------------------------- article: foot matter -- */

.lhb-foot {
  max-width: 52ch;
  margin: 40px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--lhb-rule);
}

.lhb-postnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--lhb-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lhb-postnav a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  align-items: center;
  gap: 8px;
  max-width: 46%;
  line-height: 1.5;
  color: var(--lhb-navy);
  text-decoration: none;
  transition: color .2s ease;
}
.lhb-postnav a:hover, .lhb-postnav a:focus-visible { color: var(--lhb-accent); }
.lhb-postnav .lhb-postnav__next { margin-left: auto; text-align: right; }
@media (max-width: 639px) {
  .lhb-postnav a { max-width: 100%; }
  .lhb-postnav .lhb-postnav__next { margin-left: 0; text-align: left; }
}

.lhb-share {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  font-family: var(--lhb-text);
}
.lhb-share__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lhb-ink-soft);
}
.lhb-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--lhb-rule);
  border-radius: 50%;
  color: var(--lhb-navy);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.lhb-share a svg { width: 16px; height: 16px; fill: currentColor; }
.lhb-share a:hover, .lhb-share a:focus-visible {
  background: var(--lhb-navy);
  border-color: var(--lhb-navy);
  color: #fff;
}

/* ---------------------------------------------------------- related -- */

.lhb-related {
  background: var(--lhb-band);
  padding: 0 0 76px;
}
.lhb-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}
.lhb-related__title {
  margin: 0;
  font-family: var(--lhb-display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  font-weight: 400;
  color: var(--lhb-navy);
}
.lhb-related__all {
  font-family: var(--lhb-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lhb-accent);
  text-decoration: none;
}
.lhb-related__all:hover, .lhb-related__all:focus-visible { color: var(--lhb-accent-dark); text-decoration: underline; }

/* -------------------------------------------------------------- CTA -- */

.lhb-cta {
  position: relative;
  background: var(--lhb-navy);
  padding: 62px 0;
  overflow: hidden;
}
/* A single coral hairline across the top ties the band to the rest of the page
   without adding another block of colour. */
.lhb-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lhb-accent);
}

.lhb-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.lhb-cta__text { max-width: 58ch; }
.lhb-cta__title {
  margin: 0 0 12px;
  font-family: var(--lhb-display);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.16;
  font-weight: 400;
  color: #fff;
}
.lhb-cta__body {
  margin: 0;
  font-family: var(--lhb-text);
  font-size: 16px;
  line-height: 1.66;
  color: rgba(255, 255, 255, .8);
}
.lhb-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  flex-shrink: 0;
}

.lhb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 3px;
  font-family: var(--lhb-text);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.lhb-btn--primary { background: var(--lhb-accent); color: #fff; }
.lhb-btn--primary:hover, .lhb-btn--primary:focus-visible { background: var(--lhb-accent-dark); transform: translateY(-1px); }
.lhb-btn--ghost { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.lhb-btn--ghost:hover, .lhb-btn--ghost:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .1); }

@media (max-width: 899px) {
  .lhb-cta__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
}

/* ------------------------------------------------------- responsive -- */

@media (max-width: 899px) {
  .lhb-head { padding: 24px 0 32px; }
  .lhb-sheet { padding: 42px 34px 38px; margin-top: -32px; }
  .lhb-article { font-size: 17px; }
  .lhb-article h2 { font-size: 24px; }
  .lhb-article .lhb-pull { font-size: 22px; }
}

@media (max-width: 639px) {
  .lhb-wrap { padding: 0 18px; }
  .lhb-head { padding: 18px 0 26px; }
  .lhb-title { max-width: none; }
  .lhb-sheet { padding: 30px 22px 30px; margin-top: -22px; border-radius: 3px; }
  .lhb-article { font-size: 16.5px; line-height: 1.7; }
  .lhb-article > .lhb-lead { font-size: 18.5px; }
  .lhb-article h2 { font-size: 22px; }
  .lhb-article .lhb-pull { font-size: 19px; padding-left: 20px; margin: 1.9em 0; }
  .lhb-article .lhb-note { padding: 18px 18px; font-size: 16px; }
  .lhb-body { padding-bottom: 48px; }
  .lhb-related { padding-bottom: 52px; }
  .lhb-cta { padding: 44px 0; }
  .lhb-btn { width: 100%; }
  .lhb-cta__actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lhb-card,
  .lhb-card__img,
  .lhb-card__media::after,
  .lhb-card__cta svg,
  .lhb-btn { transition: none; }
  .lhb-card:hover { transform: none; }
  .lhb-card:hover .lhb-card__img { transform: none; }
}

/* ===========================================================================
 * HARDENING
 *
 * Duda's Style/desktop.css (1.2MB) and each page's own inline block set generic
 * !important rules on `#dm .dmBody` descendants — headings, paragraphs, lists,
 * links, images — plus per-element `u_*` rules with `#dm .dmBody div.u_XXXX`
 * specificity. Anything added inside #dm_content inherits all of it: without
 * this block the h2s come back at Duda's sizes, list markers reappear, the card
 * links pick up the site's underline-on-hover, and images get Duda's margins.
 *
 * `#dmRoot` is the <body>, so `#dmRoot #dm` puts two IDs in the selector and
 * outranks Duda's single-ID rules even where they use !important. Same approach
 * as the hardening block in vg-header.css.
 *
 * Kept to what is actually needed to hold the layout — this is not a place to
 * restate the design.
 * ========================================================================= */

#dmRoot #dm .lhb-wrap,
#dmRoot #dm .lhb-head,
#dmRoot #dm .lhb-body,
#dmRoot #dm .lhb-related,
#dmRoot #dm .lhb-cta,
#dmRoot #dm .lhb-hero {
  width: auto !important;
  float: none !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  text-align: left !important;
}

#dmRoot #dm .lhb-grid {
  display: grid !important;
  float: none !important;
  width: auto !important;
}

#dmRoot #dm .lhb-card,
#dmRoot #dm .lhb-card * {
  box-sizing: border-box !important;
}

#dmRoot #dm .lhb-card {
  display: flex !important;
  float: none !important;
  width: auto !important;
  min-height: 0 !important;
  background-color: #fff !important;
  background-image: none !important;
}

#dmRoot #dm .lhb-card__link,
#dmRoot #dm .lhb-crumbs a,
#dmRoot #dm .lhb-postnav a,
#dmRoot #dm .lhb-share a,
#dmRoot #dm .lhb-btn,
#dmRoot #dm .lhb-related__all {
  text-decoration: none !important;
  background-image: none !important;
}

#dmRoot #dm .lhb-card__img,
#dmRoot #dm .lhb-hero img,
#dmRoot #dm .lhb-figure img {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: inherit;
  object-fit: cover !important;
}

#dmRoot #dm .lhb-card__title {
  font-family: var(--lhb-display) !important;
  font-size: 22px !important;
  line-height: 1.24 !important;
  font-weight: 400 !important;
  color: var(--lhb-navy) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  width: auto !important;
}
@media (max-width: 639px) {
  #dmRoot #dm .lhb-card__title { font-size: 20px !important; }
}
#dmRoot #dm .lhb-card:hover .lhb-card__title,
#dmRoot #dm .lhb-card:focus-within .lhb-card__title { color: var(--lhb-accent-dark) !important; }

#dmRoot #dm .lhb-title {
  font-family: var(--lhb-display) !important;
  font-size: clamp(32px, 4.4vw, 54px) !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  color: #fff !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 20ch !important;
}
@media (max-width: 639px) {
  #dmRoot #dm .lhb-title { max-width: none !important; }
}

#dmRoot #dm .lhb-article h2,
#dmRoot #dm .lhb-related__title,
#dmRoot #dm .lhb-cta__title {
  font-family: var(--lhb-display) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  width: auto !important;
  padding: 0 !important;
}
#dmRoot #dm .lhb-article h2 {
  font-size: 27px !important;
  line-height: 1.24 !important;
  color: var(--lhb-navy) !important;
  margin: 2.2em 0 .55em !important;
}
#dmRoot #dm .lhb-article h2:first-child { margin-top: 0 !important; }
#dmRoot #dm .lhb-article h3 {
  font-family: var(--lhb-text) !important;
  font-size: 19px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: var(--lhb-navy) !important;
  text-transform: none !important;
  text-align: left !important;
  margin: 1.9em 0 .5em !important;
  padding: 0 !important;
  width: auto !important;
}
@media (max-width: 899px) {
  #dmRoot #dm .lhb-article h2 { font-size: 24px !important; }
}
@media (max-width: 639px) {
  #dmRoot #dm .lhb-article h2 { font-size: 22px !important; }
}
#dmRoot #dm .lhb-related__title { color: var(--lhb-navy) !important; }
#dmRoot #dm .lhb-cta__title { color: #fff !important; }

#dmRoot #dm .lhb-article,
#dmRoot #dm .lhb-article p,
#dmRoot #dm .lhb-article li,
#dmRoot #dm .lhb-card__excerpt,
#dmRoot #dm .lhb-cta__body {
  font-family: var(--lhb-text) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  width: auto !important;
  float: none !important;
}
#dmRoot #dm .lhb-article,
#dmRoot #dm .lhb-article p { color: var(--lhb-ink) !important; }
#dmRoot #dm .lhb-article > p { margin: 0 0 1.35em !important; padding: 0 !important; }
#dmRoot #dm .lhb-article .lhb-pull,
#dmRoot #dm .lhb-article .lhb-pull p {
  font-family: var(--lhb-display) !important;
  color: var(--lhb-navy) !important;
  font-weight: 400 !important;
}
#dmRoot #dm .lhb-article .lhb-lead {
  color: var(--lhb-navy) !important;
  font-size: 21px !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
  margin: 0 0 1.5em !important;
}
@media (max-width: 639px) {
  #dmRoot #dm .lhb-article .lhb-lead { font-size: 18.5px !important; }
}
#dmRoot #dm .lhb-card__excerpt { color: var(--lhb-ink-soft) !important; }
#dmRoot #dm .lhb-cta__body { color: rgba(255, 255, 255, .8) !important; }

#dmRoot #dm .lhb-article ul,
#dmRoot #dm .lhb-article ol,
#dmRoot #dm .lhb-meta,
#dmRoot #dm .lhb-grid {
  list-style: none !important;
  padding-left: 0 !important;
}
#dmRoot #dm .lhb-article li {
  list-style: none !important;
  padding-left: 30px !important;
  margin: 0 0 .7em !important;
  background-image: none !important;
}
#dmRoot #dm .lhb-article li::marker { content: "" !important; }

#dmRoot #dm .lhb-meta li,
#dmRoot #dm .lhb-postnav a,
#dmRoot #dm .lhb-crumbs a,
#dmRoot #dm .lhb-crumbs span {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}
#dmRoot #dm .lhb-meta li { display: flex !important; }

#dmRoot #dm .lhb-related__all,
#dmRoot #dm .lhb-card__cta { color: var(--lhb-accent) !important; }
#dmRoot #dm .lhb-related__all:hover,
#dmRoot #dm .lhb-related__all:focus-visible { color: var(--lhb-accent-dark) !important; }

#dmRoot #dm .lhb-btn {
  color: #fff !important;
  border-radius: 3px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
}
@media (max-width: 639px) {
  #dmRoot #dm .lhb-btn { width: 100% !important; }
}
#dmRoot #dm .lhb-btn--primary { background-color: var(--lhb-accent) !important; background-image: none !important; }
#dmRoot #dm .lhb-btn--primary:hover,
#dmRoot #dm .lhb-btn--primary:focus-visible { background-color: var(--lhb-accent-dark) !important; }
#dmRoot #dm .lhb-btn--ghost { background-color: transparent !important; background-image: none !important; }

/* Duda hides animated elements until a runtime that never loads reveals them;
   lh-overrides.css already neutralises that globally, but the blog markup is
   new and must not inherit any leftover gate. */
#dmRoot #dm .lhb-head,
#dmRoot #dm .lhb-hero,
#dmRoot #dm .lhb-body,
#dmRoot #dm .lhb-related,
#dmRoot #dm .lhb-cta,
#dmRoot #dm .lhb-grid,
#dmRoot #dm .lhb-card {
  visibility: visible !important;
  opacity: 1 !important;
}

/* The band between the fixed header and .lhb-head is Duda's page background
   showing through. On a post page every other pixel of #dm_content is ours, so
   flattening it to the header-block navy removes a visible seam. The listing
   page keeps its own background — the cards are designed to sit on it. */
#dmRoot[data-page-alias="d1-internal-blog-post"] #dm .dmInner,
#dmRoot[data-page-alias="d1-internal-blog-post"] #dm .dmLayoutWrapper,
#dmRoot[data-page-alias="d1-internal-blog-post"] #dm #site_content,
#dmRoot[data-page-alias="d1-internal-blog-post"] #dm div.site_content {
  background-image: none !important;
  background-color: var(--lhb-navy-deep) !important;
}

/* Keyboard focus rings.
 * Duda sets `outline: none` on links across the site, which strips the focus
 * ring from everything added here — verified in a real render, not assumed.
 * Restated with #dmRoot #dm specificity so keyboard users can see where they
 * are. Coral on light surfaces, white on the coral button where coral-on-coral
 * would be invisible.
 */
#dmRoot #dm .lhb-card__link:focus-visible,
#dmRoot #dm .lhb-crumbs a:focus-visible,
#dmRoot #dm .lhb-postnav a:focus-visible,
#dmRoot #dm .lhb-share a:focus-visible,
#dmRoot #dm .lhb-related__all:focus-visible,
#dmRoot #dm .lhb-article a:focus-visible,
#dmRoot #dm .lhb-btn--ghost:focus-visible {
  outline: 3px solid var(--lhb-accent) !important;
  outline-offset: 3px !important;
}
#dmRoot #dm .lhb-btn--primary:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
}