/*
 * MOSDEVELOPMENT PRAVO / unified visual language / 2026-10-16
 *
 * Presentation only: no display, grid-template, aspect-ratio, width, transform,
 * overflow, positioning or interaction changes to carousels, pages or forms.
 * Dark-to-light-to-dark navy waves repeat between top-level sections; structural
 * wrappers become transparent; true content tiles and photo cards remain.
 */
:root {
  --md-unity-deep: #061423;
  --md-unity-navy: #081b2e;
  --md-unity-mid: #0b2135;
  --md-unity-soft: #0d2237;
  --md-unity-gold: #e5c06e;
  --md-unity-hairline: rgba(197, 211, 222, .14);
  --md-unity-gold-line: rgba(229, 192, 110, .22);

  /*
   * One repeatable section wave:
   * deep navy under each heading -> visibly lighter blue in the body ->
   * soft, dark returning shore. Identical first and last stops mean
   * adjacent sections meet WITHOUT a contrasting horizontal seam.
   * The broad, translucent elliptical glow keeps it from looking like
   * straight strips while its alpha is zero at both section edges.
   */
  /* A single light-to-depth-to-light colour arc. Transparent diagonal
     washes break the rigid horizontal strip appearance without drawing
     shapes, circles, hard wave dividers or pseudo-element ornaments. */
  --md-unity-section:
    linear-gradient(157deg,
      transparent 0%, transparent 28%,
      rgba(28, 65, 92, .055) 48%,
      rgba(28, 65, 92, .025) 65%,
      transparent 85%),
    linear-gradient(205deg,
      transparent 0%, transparent 30%,
      rgba(3, 13, 27, .085) 49%,
      rgba(3, 13, 27, .04) 64%,
      transparent 84%),
    linear-gradient(180deg,
      #0d2237 0%, #0b2033 7%,
      #091b2c 15%, #071625 23%,
      #061423 31%, #061423 39%,
      #071728 51%, #081a2c 63%,
      #0a1e31 78%, #0c2135 91%,
      #0d2237 100%);

  /* The page canvas is a fallback behind the independently shaded sections. */
  --md-unity-canvas: linear-gradient(
    180deg,
    #061423 0%,
    #081a2b 31%,
    #0b2135 67%,
    #0d2237 79%,
    #081a2b 92%,
    #061423 100%
  );

  /* First section of inner pages also returns to deep navy at its lower edge. */
  --md-unity-opening: linear-gradient(
    180deg,
    #061423 0%,
    #061423 18%,
    #081a2b 43%,
    #0b2135 67%,
    #0d2237 82%,
    #091c2e 94%,
    #061423 100%
  );

  /* On compact home screens the hero ends light, handing its colour to the
     value strip; the strip darkens again just before "Основные направления". */
  --md-unity-home-hero-compact: linear-gradient(
    180deg,
    #03070d 0%,
    #050e1a 14%,
    #071624 34%,
    #0a1e31 64%,
    #0d2237 100%
  );
}

/* Global tone. Header artwork, fixed navigation, footer contacts and all
   responsive/layout behavior intentionally retain their original styles. */
html body { background-color: var(--md-unity-deep) !important; }
html body main { color: #f3f0ea; }
html[lang="ru"] body main :is(h1,h2,h3) {
  text-shadow: none !important;
  filter: none;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
}
html body main :is(.section-kicker,.knowledge-kicker,[class*="_kicker__"],[class*="_eyebrow__"],[class*="_sectionLabel__"]) {
  color: var(--md-unity-gold) !important;
  letter-spacing: .14em !important;
  text-shadow: none !important;
}
html body main :is(.section-heading h2,.knowledge-section-heading h2,[class*="_sectionHeading__"] h2) {
  letter-spacing: -.022em !important;
  line-height: 1.08 !important;
  text-shadow: none !important;
}

/* Make only the requested homepage section labels more prominent.
   Keep the serif H2 hierarchy, layouts and carousels unchanged. */
html body main.home-page :is(
  #services, #why, #process, #team, #useful, #contact, #faq,
  .desktop-company-leadership
) .section-kicker {
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.32 !important;
  letter-spacing: .15em !important;
}

/* Reuse one depth palette through complete routes rather than changing the
   background family when entering knowledge, documents or service pages. */
html body main:is(
  .home-page,
  .knowledge-shell:not(.knowledge-article-page),
  .directory-page,
  .directions-directory-page,
  #about-page,
  #partnership,
  #partnership-contact-page,
  #search-page
),
html body main[class*="_page__"] {
  background-color: var(--md-unity-deep) !important;
  background-image: var(--md-unity-canvas) !important;
}

/* Main home: retain the approved continuous hero/value-strip pair; soften and
   unify subsequent sections, including FAQ, contact, pricing and partnership. */
html body main.home-page > section:not(.hero):not(#value-strip) {
  background: var(--md-unity-section) !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}
html body main.home-page > section.hero {
  background: var(--md-unity-opening) !important;
}
/* Hero and the mobile benefits carousel stay on one uninterrupted surface. */
@media (max-width: 1000px) {
  html body main.home-page > section.hero {
    background: var(--md-unity-home-hero-compact) !important;
  }
}
html body main.home-page > section#value-strip {
  background: linear-gradient(
    180deg,
    #0d2237 0%,
    #0d2237 51%,
    #0c2136 69%,
    #0a1e32 81%,
    #081b2e 92%,
    #061423 100%
  ) !important;
}
html body main.home-page > section#value-strip + section {
  background: var(--md-unity-section) !important;
}

/* On mobile the experience statement and the "О компании" heading share one
   DOM section. Give the second heading its own deep-navy crest without adding
   a panel, a divider or any layout shift. Both swells have a soft falloff. */
@media (max-width: 1000px) {
  html body main.home-page > section#why.section-contrast {
    background:
      radial-gradient(ellipse 92% 26% at 56% 23%, rgba(25,58,85,.08), transparent 84%),
      radial-gradient(ellipse 95% 30% at 65% 72%, rgba(25,58,85,.10), transparent 85%),
      linear-gradient(
        180deg,
        #061423 0%,
        #08192a 15%,
        #0b2135 25%,
        #081a2b 31%,
        #061423 39%,
        #061423 47%,
        #08192a 62%,
        #0d2237 76%,
        #091d30 91%,
        #061423 100%
      ) !important;
  }
}
/* Match the dark end of the final section before the closing footer fade. */
html body main.home-page > footer.footer,
html body .footer {
  background: linear-gradient(
    180deg,
    #061423 0%,
    #081b2e 16%,
    #0a2034 31%,
    #091b2e 52%,
    #061321 76%,
    #03070d 100%
  ) !important;
  border-top: 0 !important;
}

/* Preserve the image-based featured service cards, leadership photographs,
   article illustrations and existing carousel geometry. Remove only the
   nested backgrounds around those components. */
html body main.home-page :is(
  .desktop-about-panel,
  #why .experience,
  #contact .contact-shell,
  #contact .contact-lazy-placeholder .contact-shell,
  #partnership .partnership-teaser-inner
) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
html body main.home-page #contact .contact-shell {
  border: 0 !important;
  border-radius: 0 !important;
}
html body main.home-page :is(
  .desktop-about-panel,
  #why .experience,
  #contact .contact-shell,
  .partnership-teaser-inner
)::before,
html body main.home-page :is(
  .desktop-about-panel,
  #why .experience,
  #contact .contact-shell,
  .partnership-teaser-inner
)::after {
  box-shadow: none !important;
}
html body main.home-page #faq .faq-list {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body main.home-page #faq .faq-item-native {
  background: transparent !important;
  box-shadow: none !important;
  border-color: var(--md-unity-hairline) !important;
}
/* The user-approved 3D gold art and swipe transforms are not changed. */
html body main.home-page #services .services-list > .service-item:not(:hover) {
  box-shadow: none !important;
}
html body main.home-page #process .process-card {
  background: rgba(7,20,34,.19) !important;
  border-color: var(--md-unity-hairline) !important;
  box-shadow: none !important;
}
html body main.home-page .partnership-teaser-inner {
  box-shadow: none !important;
}
html body main.home-page #contact :is(.schedule-grid,.mode-switch,.fields-grid) {
  box-shadow: none !important;
}

/* Knowledge landing: each section begins in the same navy and gently
   becomes lighter, without a second surface nested inside the section. */
html body main.knowledge-landing > section.knowledge-section,
html body main.knowledge-shell > section[class*="_catalogSection__"],
html body main.knowledge-shell > section[class*="_lightSection__"],
html body main.knowledge-shell > section[class*="_taskSection__"] {
  background: var(--md-unity-section) !important;
  border-block-color: transparent !important;
}
html body main.knowledge-landing > section:first-of-type {
  background: var(--md-unity-opening) !important;
}
html body main.knowledge-landing [data-testid="knowledge-entry"],
html body main.knowledge-landing [data-testid="knowledge-entry"] [role="tabpanel"],
html body main.knowledge-landing [class*="_landingEntryInner__"] {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
html body main.knowledge-landing [data-testid="knowledge-entry"] [role="tablist"] {
  background: transparent !important;
  box-shadow: none !important;
}
html body main.knowledge-landing [data-testid="knowledge-entry"] [class*="_previewRow__"] {
  background: rgba(8,24,40,.22) !important;
  border-color: var(--md-unity-hairline) !important;
  box-shadow: none !important;
}
html body main.knowledge-landing [data-testid="knowledge-entry"] [class*="_previewRow__"]:is(:hover,:focus-visible) {
  background: rgba(17,43,66,.45) !important;
  border-color: rgba(229,192,110,.4) !important;
}
html body main.knowledge-landing :is(
  [class*="_taskCard__"],
  [class*="_categoryCard__"],
  [class*="_resourceCard__"]
) {
  background: rgba(8,24,40,.2) !important;
  border-color: var(--md-unity-hairline) !important;
  box-shadow: none !important;
}
/* Full-bleed photo article cards intentionally keep their original images. */
html body main.knowledge-landing :is(
  [class*="_visualArticleCard__"],
  [class*="_immersiveArticleCard__"]
) {
  border-color: rgba(229,192,110,.16) !important;
  box-shadow: none !important;
}

/* Directions/topic directories: let actionable rows sit visually on the main
   surface, with quiet separators instead of heavy raised boxes. */
html body main:is(.directions-directory-page,.directory-page) :is(
  a.directory-row,
  a[class*="_card__"],
  [class*="_catalogSearch__"]
) {
  background: rgba(7,21,36,.19) !important;
  border-color: var(--md-unity-hairline) !important;
  box-shadow: none !important;
}
html body main:is(.directions-directory-page,.directory-page) :is(
  a.directory-row,
  a[class*="_card__"]
):is(:hover,:focus-visible) {
  background: rgba(15,40,63,.40) !important;
  border-color: rgba(229,192,110,.42) !important;
}

/* Knowledge articles, service details, document library and urgent guides
   share the same ambient background.  Do not flatten photographs, downloadable
   document previews, editor sheets, input fields or modal dialogs. */
html body main.knowledge-shell:not(.knowledge-article-page) > section.knowledge-section,
html body main.knowledge-shell:not(.knowledge-article-page) > section.knowledge-crosslinks,
html body main.knowledge-shell:not(.knowledge-article-page) > section[class*="_ctaShell__"],
html body main[class*="service_page__"] > section,
html body main[class*="downloads_page__"] > section,
html body main[class*="urgent_page__"] > section,
html body main[class*="about_page__"] > section {
  background-image: var(--md-unity-section) !important;
  border-block-color: transparent !important;
}
/* Article reading is ONE canvas, not a separate gradient painted on every
   child section. The main canvas ends at the knowledge footer's #0d2237. */
html body main.knowledge-article-page > :is(section,article) {
  background: transparent !important;
  background-image: none !important;
  border-block-color: transparent !important;
}
html body main.knowledge-article-page > [class*="_articleBody__"],
html body main.knowledge-article-page :is(
  [class*="_articleHighlights__"],
  [class*="_documentResources__"],
  [class*="_scenarioCenter__"],
  [class*="_articleMoreDetails__"],
  [class*="_articleCta__"]
) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body main.knowledge-article-page :is(
  [class*="_articleHighlights__"],
  [class*="_articleMoreDetails__"],
  [class*="_articleCta__"]
) {
  border-color: var(--md-unity-hairline) !important;
}
html body main.knowledge-article-page [class*="_articleHero__"]::before {
  opacity: .07 !important;
}
html body main.knowledge-article-page :is(
  [class*="_relatedCard__"],
  [class*="_documentResourceLink__"],
  [class*="_resourceCard__"]
):not([class*="_immersiveRelatedCard__"]) {
  background: rgba(7,21,36,.18) !important;
  border-color: var(--md-unity-hairline) !important;
  box-shadow: none !important;
}
html body main.knowledge-shell :is(
  [class*="_searchPanel__"],
  [class*="_catalogSearch__"],
  [class*="_notice__"],
  [class*="_searchShell__"]
) {
  box-shadow: none !important;
  border-color: var(--md-unity-hairline) !important;
  background: transparent !important;
}
html body main.knowledge-shell :is(
  [class*="_examplesSection__"],
  [class*="_examplesDisclosure__"],
  [class*="_documentGroup__"]
) {
  background: transparent !important;
  box-shadow: none !important;
}
/* Do not remove document/library entries: they are individual actions. */
html body main.knowledge-shell :is(
  [class*="_exampleCard__"],
  [class*="_taskCard__"],
  [class*="_relatedCard__"],
  [class*="_bestCard__"]
):not([class*="_immersiveRelatedCard__"]) {
  box-shadow: none !important;
  border-color: var(--md-unity-hairline) !important;
}

/* Individual service detail: outer panels are transparent, inner clickable
   topics remain distinguishable by fine hairlines. */
html body main[class*="service_page__"] :is(
  [class*="_twoColumns__"] > div,
  [class*="_steps__"] article,
  [class*="_cta__"]
) {
  background: transparent !important;
  box-shadow: none !important;
  border-color: var(--md-unity-hairline) !important;
}
html body main[class*="service_page__"] :is(
  [class*="_relatedCard__"],
  [class*="_compactSteps__"] article
) {
  background: rgba(9,27,44,.2) !important;
  border-color: var(--md-unity-hairline) !important;
  box-shadow: none !important;
}

/* About/partnership: remove panel-in-panel framing without touching the actual
   form controls, imagery or team/partner content. */
html body main#partnership > section,
html body main[class*="partnership_page__"] > section,
html body main[class*="about_page__"] > section {
  background-image: var(--md-unity-section) !important;
}
html body main#partnership :is(
  [class*="_introGrid__"],
  [class*="_cards__"] > [class*="_card__"],
  [class*="_partnerContact__"]
) {
  box-shadow: none !important;
}
html body main#partnership [class*="_cards__"] > [class*="_card__"] {
  background: rgba(9,27,44,.16) !important;
  border-color: var(--md-unity-hairline) !important;
}
html body main#partnership [class*="_heroGlow__"] {
  opacity: .2 !important;
}
html body main[class*="about_page__"] :is(
  [class*="_contentSection__"],
  [class*="_introGrid__"]
) {
  box-shadow: none !important;
}

/* Unify footer/readable controls, preserving the existing button dimensions,
   focus outlines, accordion disclosure icons and functionality. */
html body main :is(
  .gold-button,.outline-button,.form-submit,
  [class*="_primary__"],[class*="_secondary__"],
  [class*="_partnerSubmit__"]
) {
  box-shadow: none !important;
  text-shadow: none !important;
}
html body main :is(a,button,summary):focus-visible {
  outline-color: var(--md-unity-gold) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body main :is(.gold-button,.outline-button) { transition: none !important; }
}


/* 2026-10-18: Contact / pricing / FAQ form a seamless deep-navy flow.
   Keep dark navy under the headings longer and ease into a broad blue midsection.
   Match the two inter-section gaps; restore deep navy at each edge to avoid seams. */
html body main.home-page > section#contact.contact-section {
  background: var(--md-unity-section) !important;
  /* The contact-to-pricing gap mirrors the pricing-to-FAQ gap. */
  padding-bottom: clamp(46px, 5vw, 70px) !important;
}
html body main.home-page > section#faq.faq-section {
  background: var(--md-unity-section) !important;
  padding-top: clamp(42px, 4vw, 64px) !important;
  padding-bottom: clamp(60px, 7vw, 96px) !important;
}
html body main.home-page > section#pricing.pricing-section {
  background: var(--md-unity-section) !important;
  padding-top: clamp(42px, 4vw, 64px) !important;
  padding-bottom: clamp(46px, 5vw, 70px) !important;
}

/* FAQ remains an unboxed question list; pricing reads as a restrained
   price table, not as another set of FAQ rows. */
html body main.home-page #pricing .pricing-heading {
  margin-bottom: 25px;
}
html body main.home-page #pricing .pricing-list {
  /* Remove the abrupt top/bottom/left rectangular outline. */
  border: 0 !important;
  padding-left: 0 !important;
  background: none !important;
}
html body main.home-page #pricing .pricing-item {
  position: relative;
  border: 0 !important;
}
html body main.home-page #pricing .pricing-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, rgba(229, 192, 110, .18) 14%,
    rgba(229, 192, 110, .12) 72%, transparent 100%);
}
/* FAQ uses round +/- buttons; pricing uses simple, quieter chevrons. */
html body main.home-page #pricing :is(.pricing-arrow, .pricing-arrow-open),
html body main.home-page #pricing .pricing-toggle:hover :is(.pricing-arrow, .pricing-arrow-open) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 680px) {
  html body main.home-page > section#contact.contact-section {
    padding-bottom: 34px !important;
  }
  html body main.home-page > section#faq.faq-section {
    padding-top: 40px !important;
    padding-bottom: 65px !important;
  }
  html body main.home-page > section#pricing.pricing-section {
    padding-top: 40px !important;
    padding-bottom: 34px !important;
  }
  html body main.home-page #pricing .pricing-heading {
    margin-bottom: 23px;
  }
  html body main.home-page #pricing .pricing-list {
    padding-left: 0 !important;
  }
}


/*
 * 2026-10-18 / ABOUT — continuous deep-sea atmosphere.
 *
 * Do not restart a background gradient at every heading. A single, calm
 * full-page navy canvas carries all five editorial sections and the CTA.
 * Large, asymmetrically placed radial glows suggest underwater daylight:
 * light and shadow drift sideways, across section boundaries, with no
 * rectangular bands, straight transition lines or repetitive pattern.
 * Only /about is affected; the homepage and its components remain intact.
 */
html body main#about-page[class] {
  /* One uninterrupted dark-to-light ocean field, never restarted per section. */
  background-color: #081526 !important;
  background-image:
    radial-gradient(
      ellipse 115% 30% at 92% 34%,
      rgba(29, 68, 96, .08) 0%,
      rgba(19, 48, 73, .035) 58%,
      transparent 90%
    ),
    radial-gradient(
      ellipse 100% 38% at -20% 70%,
      rgba(27, 63, 91, .09) 0%,
      rgba(18, 45, 70, .035) 54%,
      transparent 90%
    ),
    radial-gradient(
      ellipse 96% 22% at 110% 91%,
      rgba(4, 15, 28, .20) 0%,
      transparent 88%
    ),
    linear-gradient(
      174deg,
      #061423 0%,
      #071829 19%,
      #091c2e 37%,
      #0a2033 55%,
      #0d2237 76%,
      #0b2135 86%,
      #081526 100%
    ) !important;
  background-repeat: no-repeat !important;
  border-color: transparent !important;
}

/* All actual content sections are visually open to the same shared canvas.
   Neutralize the previous per-section glows and their masks entirely. */
html body main#about-page section {
  background: transparent !important;
  background-image: none !important;
  border-block-color: transparent !important;
  box-shadow: none !important;
}
html body main#about-page section::before {
  content: none !important;
  display: none !important;
}

/* The footer begins at the same #081526 that ends the page canvas.
   Leave its existing typography, brand artwork and contact layout alone. */


/*
 * /about requisites: dark navy around the heading, easing into the lighter
 * blue of the shared ocean canvas. The overlay starts and ends transparent,
 * so neither the preceding leadership carousel nor the following CTA acquires
 * a hard horizontal edge or a repeated full-width stripe.
 */
html body main#about-page section#requisites {
  position: relative !important;
  isolation: isolate;
}
html body main#about-page section#requisites::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: -1;
  inset: -76px 0 -52px;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 125% 77% at 48% 33%,
      rgba(2, 10, 21, .92) 0%,
      rgba(3, 15, 29, .75) 36%,
      rgba(5, 23, 42, .38) 66%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 95% 45% at 85% 93%,
      rgba(28, 78, 112, .12),
      transparent 100%
    );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 20%,
    #000 62%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 20%,
    #000 62%,
    transparent 100%
  );
}

/*
 * 2026-10-18 / ABOUT FOOTER — uninterrupted final shoreline.
 * Match the exact end of /about's ocean canvas at the footer entrance;
 * move steadily into near-black, without a separate dark slab or divider.
 * The page backdrop must match the footer's final stop on iOS Safari,
 * including the area underneath the floating browser toolbar.
 */
html body main#about-page + footer.footer {
  margin-top: -1px !important;
  border-top: 0 !important;
  background:
    radial-gradient(
      ellipse 105% 56% at 88% 12%,
      rgba(24, 60, 88, .065) 0%,
      transparent 78%
    ),
    linear-gradient(
      180deg,
      #081526 0%,
      #081526 12%,
      #081421 28%,
      #07121f 46%,
      #050d18 68%,
      #040a12 84%,
      #03070d 100%
    ) !important;
}

/* No decorative outlined circle at the left of the shared footer. */
html body footer.footer::before {
  content: none !important;
  display: none !important;
}

/* Avoid a second, hard-tinted overlay at the /about -> footer seam. */
html body main#about-page + footer.footer::after {
  content: none !important;
  display: none !important;
}

/* When the footer ends before Safari's bottom inset, show the same dark
   colour below it rather than the site canvas's brighter blue fallback. */
html:has(body > main#about-page),
html:has(body > main#about-page) body {
  background-color: #03070d !important;
}

/*
 * 2026-10-18 / GLOBAL NAVY DEPTH CALIBRATION
 * Reference: the approved mobile home hero / benefit-strip palette.
 * Maximum blue brightness is #0d2237: the same deep sea as the hero's
 * closing stop, never the light cyan-blue previously used by pricing/FAQ.
 *
 * Only background paint changes. All HTML, carousels, typography, card
 * artwork, interaction layers and print document interiors remain intact.
 */

/* Route-wide fallback for every other top-level page, including legal
   information, searches, directory routes, profiles and client cabinets. */
html body > main:not(.home-page):not(#about-page):not(.knowledge-article-page) {
  background-color: var(--md-unity-deep) !important;
  background-image: var(--md-unity-canvas) !important;
}
/* Inner knowledge, directory and service section backgrounds use the same
   soft dark-to-muted-navy wave; never restart a brighter turquoise gradient. */
html body main.knowledge-shell:not(.knowledge-article-page) > :is(
  section.knowledge-section, section.knowledge-crosslinks, section.knowledge-cta,
  section[class*="_catalogSection__"], section[class*="_lightSection__"],
  section[class*="_taskSection__"], section[class*="_ctaShell__"]
) {
  background-color: var(--md-unity-deep) !important;
  background-image: var(--md-unity-section) !important;
  border-block-color: transparent !important;
}
html body main:is(#partnership, #partnership-contact-page) > section,
html body main[class*="service_page__"] > section,
html body main[class*="urgent_page__"] > section,
html body main[class*="downloads_page__"] > section {
  background-image: var(--md-unity-section) !important;
  border-block-color: transparent !important;
}
/* Articles must be continuous readable surfaces: one gentle ocean backdrop
   behind all content, no individual coloured bands or washed-out panels.
   Last stop matches the existing navy KnowledgeFooter entrance. */
html body main.knowledge-shell.knowledge-article-page {
  background-color: #061423 !important;
  background-image:
    radial-gradient(ellipse 90% 27% at 73% 72%, rgba(24,55,82,.07), transparent 86%),
    linear-gradient(180deg,
      #061423 0%, #071728 19%, #081a2b 39%,
      #091c2e 61%, #0b2135 83%, #0d2237 100%
    ) !important;
}
/* Preserve printable documents (including the editor's white sheets). */
@media print {
  html body > main:not(.home-page):not(#about-page):not(.knowledge-article-page),
  html body main.knowledge-shell.knowledge-article-page {
    background: none !important;
  }
}


/*
 * 2026-10-19 / HOME EDITORIAL POLISH
 * First pass: smoother depth, clearer hierarchy and consistent card finish.
 * Content, photography, 3D illustration assets, carousel sizes, mobile
 * swipe mechanics, forms, menu and accessibility behaviours are unchanged.
 */

/* Prevent headline shapes from fighting each other while preserving the
 * compact phone font sizes approved in the existing media rules. */
html body main.home-page :is(
  .section-heading h2,
  .contact-heading h2,
  .pricing-heading h2
) {
  letter-spacing: -.026em !important;
  line-height: 1.075 !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  text-wrap: balance;
}
html body main.home-page :is(
  #services .section-heading .muted,
  #useful .section-heading .muted,
  .hero .hero-lead
) {
  color: rgba(243, 240, 234, .82) !important;
}

/* A quiet, unified navy material for the two featured practices; retain
 * the original editorial layout, numbered titles and all links. */
html body main.home-page #services .featured-grid > .featured-card {
  border-radius: 18px !important;
  border-color: rgba(229, 192, 110, .22) !important;
  background:
    radial-gradient(ellipse 95% 78% at 96% 7%, rgba(35, 73, 100, .14), transparent 76%),
    linear-gradient(153deg, rgba(13, 32, 51, .93), rgba(6, 19, 34, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html body main.home-page #services .featured-grid > .featured-card:is(:hover,:focus-within) {
  border-color: rgba(229, 192, 110, .38) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 16px 32px rgba(0,0,0,.13) !important;
}

/* Editorial article covers keep their actual background images. Use only
 * the same corner geometry and hairline as featured cards. */
html body main.home-page #useful .articles-grid > .article-card {
  border-radius: 18px !important;
  border-color: rgba(229, 192, 110, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
html body main.home-page #useful .articles-grid > .article-card:is(:hover,:focus-within) {
  border-color: rgba(229, 192, 110, .39) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.14) !important;
}

/* Desktop direction rows receive a quiet focus/hover surface; no changes
 * to the phone carousel's size, active-card scale or swipe behaviour. */
@media (min-width: 1001px) {
  html body main.home-page #services .services-list > a.service-item {
    border-bottom-color: rgba(229, 192, 110, .17) !important;
    border-radius: 12px !important;
  }
  html body main.home-page #services .services-list > a.service-item:is(:hover,:focus-visible) {
    background: rgba(16, 39, 60, .34) !important;
    border-bottom-color: rgba(229, 192, 110, .32) !important;
  }
}
/* Reduce animations by preference, without modifying active carousel states. */
@media (prefers-reduced-motion: reduce) {
  html body main.home-page #services .featured-grid > .featured-card,
  html body main.home-page #useful .articles-grid > .article-card {
    transition: none !important;
  }
}


/* 2026-10-19 / NATURAL OCEAN TRANSITIONS v24
 *
 * Each chapter starts and ends at the EXACT approved #0d2237 hero colour.
 * A slow dark trough protects headings and then eases back to muted blue.
 * Low-contrast diagonal washes break up bands organically; never draw
 * circles, SVG ornaments, separate wavy dividers or sharp contours.
 * This file changes presentation only: no carousel geometry, interactions,
 * document interiors, forms, images, logo, or accessibility controls.
 */
html body main.home-page:not(#about-page) {
  --md-ocean-shore: #0d2237;
  --md-ocean-deep: #061423;
  --md-ocean-chapter: var(--md-unity-section);
  --md-ocean-chapter-alt:
    linear-gradient(203deg,
      transparent 0%, transparent 29%,
      rgba(27, 66, 95, .055) 48%,
      rgba(27, 66, 95, .025) 66%,
      transparent 85%),
    linear-gradient(153deg,
      transparent 0%, transparent 32%,
      rgba(3, 13, 27, .075) 49%,
      rgba(3, 13, 27, .03) 65%,
      transparent 85%),
    linear-gradient(180deg,
      #0d2237 0%, #0b2033 7%,
      #091b2c 15%, #071625 23%,
      #061423 31%, #061423 39%,
      #071728 51%, #081a2c 63%,
      #0a1e31 78%, #0c2135 91%,
      #0d2237 100%);
  background-color: var(--md-ocean-shore) !important;
  background-image: none !important;
}

/* Sibling edges share a colour. The heading trough now occupies the
   chapter, rather than being a narrow 24-100px dark line at its entrance. */
html body main.home-page > section:not(.hero):not(#value-strip) {
  position: relative !important;
  isolation: auto !important;
  background: var(--md-ocean-chapter) !important;
  border-block-color: transparent !important;
}
html body main.home-page > section:not(.hero):not(#value-strip):is(
  #why, #team, #contact, #faq, .desktop-company-leadership
) {
  background: var(--md-ocean-chapter-alt) !important;
}

/* Two headings on small screens belong to one #why chapter. Keeping the
   middle dark longer avoids creating TWO visible stripes in one section. */
@media (max-width: 1000px) {
  html body main.home-page > section#why.section-contrast {
    background:
      linear-gradient(157deg,
        transparent 0%, transparent 30%,
        rgba(23, 57, 84, .05) 51%,
        transparent 86%),
      linear-gradient(180deg,
        #0d2237 0%, #091b2e 12%,
        #071727 21%, #061423 32%,
        #061423 60%, #081a2c 75%,
        #0b2034 90%, #0d2237 100%) !important;
  }
}

/* No illustrated waves, shadows or decorative section pseudo-elements. */
html body main.home-page > section:not(.hero):not(#value-strip)::before,
html body main.home-page > section:not(.hero):not(#value-strip)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* The hero, benefit strip and first chapter touch at the same shade. */
html body main.home-page > section#value-strip {
  background-color: #0d2237 !important;
  background-image: linear-gradient(180deg,
    #0d2237 0%, #0d2237 48%,
    #0c2136 76%, #0d2237 100%) !important;
  border-block-color: transparent !important;
}
html body main.home-page > section.hero {
  background: linear-gradient(180deg,
    #03070d 0%, #050e1a 17%,
    #071624 37%, #0a1e31 68%,
    #0d2237 100%) !important;
}
/* Use a smooth waterline all the way into the dark footer. */
html body main.home-page > footer.footer {
  border-top: 0 !important;
  background-color: #0d2237 !important;
  background-image: linear-gradient(180deg,
    #0d2237 0%, #0c2134 14%,
    #0a1b2c 32%, #071523 53%,
    #050d18 76%, #03070d 100%) !important;
}

/* One quiet card material; image-based editorial covers are preserved. */
html body main.home-page #services .featured-grid > .featured-card {
  background: linear-gradient(157deg,
    rgba(13, 32, 51, .9) 0%, rgba(7, 20, 35, .95) 100%) !important;
  border-color: rgba(229, 192, 110, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html body main.home-page #services .featured-grid > .featured-card:is(:hover,:focus-within) {
  border-color: rgba(229, 192, 110, .34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 32px rgba(0,0,0,.13) !important;
}
html body main.home-page #process .process-card {
  background: rgba(8, 26, 43, .25) !important;
  border-color: rgba(197, 211, 222, .14) !important;
}
html body main.knowledge-landing :is(
  [class*="_taskCard__"],[class*="_categoryCard__"],[class*="_resourceCard__"]
) {
  background: rgba(9, 27, 44, .23) !important;
  border-color: rgba(197, 211, 222, .14) !important;
}

/* Editorial rhythm: tighter gaps, readable paragraph width and headlines
   that break between words rather than inside a word. */
html body main :is(.section-heading h2,.knowledge-section-heading h2) {
  text-wrap: balance;
  overflow-wrap: normal !important;
}
html body main.home-page :is(
  #services .section-heading, #useful .section-heading
) {
  max-width: 850px;
}
html body main.home-page :is(
  #services .section-heading .muted, #useful .section-heading .muted
) {
  max-width: 64ch;
}
html body main.home-page > section:is(#services,#useful,#partnership).section {
  padding-top: clamp(64px, 6.5vw, 94px) !important;
  padding-bottom: clamp(64px, 6.5vw, 94px) !important;
}
html body main.knowledge-article-page :is(
  [class*="_articleBody__"] p,
  [class*="_articleBody__"] li
) {
  line-height: 1.72;
}
@media (max-width: 680px) {
  html body main.home-page > section:is(#services,#useful,#partnership).section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body main.home-page #services .featured-grid > .featured-card {
    transition: none !important;
  }
}


/* 2026-10-19 / HERO AND MOBILE EDITORIAL v25
 * The permanent wordmark is in the site header, so the opening reads as one
 * composed headline + explanation + two clear actions. No decorative geometry,
 * radial glows, SVG waves, copied hero text, or viewport-height locks.
 * Keep the v24 navy shoreline and all carousel/card swipe dimensions.
 */

/* Main first-screen typography; avoid old condensed leading from legacy rules. */
html body main.home-page > section.hero .hero-copy {
  min-width: 0 !important;
  max-width: 100% !important;
}
html body main.home-page > section.hero h1 {
  color: #f4f0e8 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  letter-spacing: -.034em !important;
  text-shadow: none !important;
  text-wrap: balance;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
html body main.home-page > section.hero h1 .hero-title-primary {
  color: #f4f0e8 !important;
  -webkit-text-fill-color: #f4f0e8 !important;
}
html body main.home-page > section.hero h1 > span:not(.hero-title-primary) {
  color: #e5c06e !important;
  -webkit-text-fill-color: #e5c06e !important;
}
html body main.home-page > section.hero .hero-lead {
  color: rgba(244, 240, 232, .86) !important;
  letter-spacing: 0 !important;
  text-wrap: pretty;
}
html body main.home-page > section.hero .hero-sub {
  color: rgba(222, 230, 237, .69) !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}
html body main.home-page > section.hero .hero-actions {
  display: flex !important;
  align-items: stretch !important;
}
html body main.home-page > section.hero .hero-actions > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .004em !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: border-color .22s ease, background-color .22s ease, color .22s ease !important;
}
html body main.home-page > section.hero .hero-actions > a:focus-visible {
  outline: 2px solid #e5c06e !important;
  outline-offset: 3px !important;
}

/* Wide screens: readable opening beside the four unobtrusive value rows. */
@media (min-width: 1001px) {
  html body main.home-page > section.hero {
    padding: 0 !important;
    min-height: 0 !important;
  }
  html body main.home-page > section.hero > .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.32fr) minmax(305px, .68fr) !important;
    align-items: center !important;
    gap: clamp(28px, 3.5vw, 56px) !important;
    padding-top: clamp(46px, 5vw, 80px) !important;
    padding-bottom: clamp(49px, 5.3vw, 84px) !important;
  }
  html body main.home-page > section.hero h1 {
    max-width: 820px !important;
    margin: 0 0 20px !important;
    font-size: clamp(44px, 4.2vw, 66px) !important;
    line-height: 1.045 !important;
  }
  html body main.home-page > section.hero h1 > span {
    display: block !important;
  }
  html body main.home-page > section.hero .hero-lead {
    max-width: 66ch !important;
    margin: 0 0 13px !important;
    font-size: clamp(16px, 1.25vw, 18px) !important;
    line-height: 1.53 !important;
  }
  html body main.home-page > section.hero .hero-sub {
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }
  html body main.home-page > section.hero .hero-actions {
    margin: 25px 0 0 !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  html body main.home-page > section.hero .hero-actions > a {
    min-height: 52px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* Quiet typographic rail, not a fifth panel or a background ornament. */
  html body main.home-page > section.hero .hero-value-rail {
    width: 100% !important;
    min-width: 0 !important;
    align-self: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body main.home-page > section.hero .hero-value-item {
    grid-template-columns: 24px 68px minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 92px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(217, 228, 236, .12) !important;
  }
  html body main.home-page > section.hero .hero-value-item:last-child {
    border-bottom: 0 !important;
  }
  html body main.home-page > section.hero .hero-value-rail .value-illustration {
    width: 62px !important;
    height: 62px !important;
    object-fit: contain !important;
  }
  html body main.home-page > section.hero .hero-value-copy strong {
    font-size: clamp(20px, 1.65vw, 25px) !important;
    line-height: 1.15 !important;
    letter-spacing: -.019em !important;
  }
  html body main.home-page > section.hero .hero-value-copy small {
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
    color: rgba(224, 232, 240, .70) !important;
  }
}
@media (min-width: 1001px) and (max-width: 1170px) {
  html body main.home-page > section.hero > .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(295px, .8fr) !important;
    gap: 24px !important;
  }
  html body main.home-page > section.hero h1 {
    font-size: clamp(41px, 4vw, 47px) !important;
  }
}

/* Tablets keep the existing compact value strip; no desktop rail added. */
@media (min-width: 681px) and (max-width: 1000px) {
  html body main.home-page > section.hero {
    min-height: 0 !important;
    padding: 0 !important;
  }
  html body main.home-page > section.hero > .hero-grid {
    width: min(780px, calc(100% - 48px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 35px 0 18px !important;
  }
  html body main.home-page > section.hero h1 {
    margin: 0 0 17px !important;
    font-size: clamp(38px, 5.4vw, 52px) !important;
    line-height: 1.07 !important;
  }
  html body main.home-page > section.hero h1 > span {
    display: block !important;
  }
  html body main.home-page > section.hero .hero-lead {
    max-width: 68ch !important;
    margin: 0 0 12px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
  html body main.home-page > section.hero .hero-sub {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  html body main.home-page > section.hero .hero-actions {
    margin: 20px 0 0 !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  html body main.home-page > section.hero .hero-actions > a {
    min-height: 50px !important;
    padding: 11px 18px !important;
    font-size: 14.5px !important;
  }
}

/* Portrait phone: balanced line breaks, genuinely readable body text and
   full-width tap targets. Leave the fixed header and swipe cards untouched. */
@media (max-width: 680px) {
  html body main.home-page > section.hero {
    padding: 0 0 12px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  html body main.home-page > section.hero > .hero-grid {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin: 0 auto !important;
    padding: 18px 0 8px !important;
    gap: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body main.home-page > section.hero h1 {
    margin: 0 0 16px !important;
    max-width: 100% !important;
    font-size: clamp(31px, 8.2vw, 38px) !important;
    line-height: 1.075 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance !important;
  }
  html body main.home-page > section.hero h1 > span {
    display: block !important;
    margin-top: 0 !important;
  }
  html body main.home-page > section.hero h1 > span + span {
    margin-top: 6px !important;
  }
  html body main.home-page > section.hero .hero-lead {
    max-width: 44ch !important;
    margin: 0 0 12px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  html body main.home-page > section.hero .hero-sub {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
  }
  html body main.home-page > section.hero .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 20px 0 0 !important;
  }
  html body main.home-page > section.hero .hero-actions > a {
    width: 100% !important;
    min-height: 51px !important;
    padding: 12px 15px !important;
    font-size: 14.5px !important;
  }
  /* Keep CTA-to-value-carousel distance below the tested 72px limit. */
  html body main.home-page > section#value-strip {
    padding-top: 10px !important;
  }
}
@media (max-width: 359px) {
  html body main.home-page > section.hero h1 {
    font-size: 30px !important;
  }
  html body main.home-page > section.hero .hero-lead {
    font-size: 15px !important;
  }
  html body main.home-page > section.hero .hero-sub {
    font-size: 12.5px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body main.home-page > section.hero .hero-actions > a {
    transition: none !important;
  }
}


/* 2026-10-19 / GOLD ICON MATERIAL SYSTEM v26
 * The approved transparent matte WebP/AVIF artwork already contains its
 * intended gold pigments. NEVER hue-rotate, saturate, recolour, brighten,
 * mask, crop or replace the image itself. Unify only the external neutral
 * depth shadow; the same rendering works on desktop and swipe carousels.
 * No ornament containers, decorative circles or extra glowing highlights.
 */
:root {
  --md-artwork-gold: #e5c06e;
  --md-artwork-gold-soft: #c6a46c;
  --md-artwork-depth:
    drop-shadow(0 3px 5px rgba(0, 0, 0, .12))
    drop-shadow(0 10px 20px rgba(0, 0, 0, .19));
}

/* Approved 3D illustrations: hero value steps, legal services, work stages.
   Retain every existing responsive width, height, object-position and
   translation. Only shadow/rendered transparency is calibrated here. */
html body #value-strip#value-strip img.value-illustration,
html body main.home-page .hero-value-rail img.value-illustration,
html body #services#services img.service-premium-illustration,
html body #process#process img.process-illustration {
  filter: var(--md-artwork-depth) !important;
  object-fit: contain !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Heading numerals and the two typographic featured-practice glyphs use the
   same restrained gold family, not a competing bright yellow. */
html body main.home-page #services .featured-grid .card-icon {
  color: var(--md-artwork-gold) !important;
  text-shadow: none !important;
  filter: none !important;
}
html body main.home-page #services .featured-grid .card-no,
html body main.home-page #services .services-list .service-index,
html body main.home-page #value-strip .service-index,
html body main.home-page .hero-value-rail .service-index,
html body main.home-page #process .process-card > span {
  color: var(--md-artwork-gold-soft) !important;
  text-shadow: none !important;
}

/* Small vector symbols are flat by design (good at 20px): one warm-gold
   stroke, no metallic blur or 3D filter that would damage legibility. */
html body main.knowledge-landing [data-testid="knowledge-entry"] [role="tab"] svg,
html body main.knowledge-landing #tasks [class*="_taskArrow__"],
html body main.knowledge-landing #tasks [class*="_directionIcon__"] {
  color: var(--md-artwork-gold) !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Never animate/reprocess image pigments on hover or touch. Preserve each
   carousel's established active-card transform, focus state and drag model. */
@media (hover: hover) and (pointer: fine) {
  html body #services#services a.service-item:hover img.service-premium-illustration,
  html body #value-strip#value-strip .service-item:hover img.value-illustration,
  html body #process#process .process-card:hover img.process-illustration {
    filter: var(--md-artwork-depth) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #services#services img.service-premium-illustration,
  html body #value-strip#value-strip img.value-illustration,
  html body #process#process img.process-illustration {
    transition: none !important;
  }
}


/* 2026-10-19 / KNOWLEDGE EDITORIAL v27
 *
 * Knowledge Base as a first-class legal product: the search is primary,
 * navigation tabs are clear, and actionable rows/photo articles share a
 * restrained material palette. Pure presentation. No moving DOM elements,
 * no effects over the microphone, and no alterations to carousel dimensions,
 * text, image assets, links, voice state or keyboard interactions.
 * Section backgrounds retain the approved seamless v24 ocean treatment.
 */
html body main.knowledge-landing {
  --md-knowledge-panel: rgba(9, 26, 44, .34);
  --md-knowledge-panel-hover: rgba(15, 39, 61, .46);
  --md-knowledge-hairline: rgba(206, 221, 232, .15);
  --md-knowledge-goldline: rgba(229, 192, 110, .35);
  --md-knowledge-copy: rgba(228, 235, 241, .76);
}

/* Start with an editorial search interface, not nested cards or ornaments. */
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [role="tablist"] {
  margin-bottom: clamp(25px, 3.3vw, 39px) !important;
  border-bottom: 1px solid rgba(207, 221, 232, .2) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [role="tab"] {
  color: rgba(234, 239, 244, .72) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: color .22s ease, background-color .22s ease !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [role="tab"][aria-selected="true"] {
  color: #f1d59b !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [role="tab"]:not([aria-selected="true"]):hover {
  color: #f2eadb !important;
  background: rgba(215, 186, 131, .035) !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [role="tab"]::after {
  background: #e5c06e !important;
  height: 2px !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [role="tab"]:focus-visible {
  outline: 2px solid #e5c06e !important;
  outline-offset: -2px !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [role="tabpanel"] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_panelIntro__"] {
  margin-bottom: clamp(20px, 2.8vw, 29px) !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_panelIntro__"] h2 {
  font-size: clamp(36px, 4.3vw, 56px) !important;
  line-height: 1.065 !important;
  letter-spacing: -.032em !important;
  color: #f5f1ea !important;
  max-width: 18ch;
  text-wrap: balance;
  overflow-wrap: normal !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_panelIntro__"] p {
  font-size: clamp(15px, 1.4vw, 17px) !important;
  line-height: 1.58 !important;
  color: var(--md-knowledge-copy) !important;
  max-width: 70ch !important;
}

/* The existing SearchClient owns input/button positioning and microphone
   behaviour. Only its surface, focus and optical hierarchy change. */
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_searchWrap__"] {
  max-width: 1040px;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] input[class*="_searchBox__"] {
  min-height: 72px !important;
  border: 1px solid rgba(225, 199, 145, .38) !important;
  border-radius: 17px !important;
  background: linear-gradient(155deg, rgba(15, 38, 60, .84), rgba(8, 23, 39, .94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 12px 28px rgba(0,0,0,.085) !important;
  color: #f5f1ea !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] input[class*="_searchBox__"]:focus {
  border-color: rgba(235, 207, 151, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 0 3px rgba(229, 192, 110, .085) !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_placeholderViewport__"] {
  color: rgba(225, 233, 239, .60) !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_voiceSearch__"]:focus-visible,
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_clearSearch__"]:focus-visible {
  outline: 2px solid #e5c06e !important;
  outline-offset: 2px !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_previewRow__"] {
  border: 1px solid var(--md-knowledge-hairline) !important;
  border-radius: 16px !important;
  background: var(--md-knowledge-panel) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.027) !important;
}
html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_previewRow__"]:is(:hover,:focus-visible) {
  border-color: var(--md-knowledge-goldline) !important;
  background: var(--md-knowledge-panel-hover) !important;
}

/* Shared section hierarchy: no changes to the section gradient canvas. */
html body main.knowledge-landing :is(#directions, #tasks, #materials) [class*="_sectionHeading__"] h2 {
  font-size: clamp(36px, 4vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.027em !important;
  text-wrap: balance;
  hyphens: none !important;
  overflow-wrap: normal !important;
}
html body main.knowledge-landing :is(#directions, #tasks, #materials) [class*="_sectionHeading__"] p {
  color: var(--md-knowledge-copy) !important;
  line-height: 1.55 !important;
}

/* Direction cards stay the same carousel width/height, swipe and active scale.
   Just refine the finish and reading comfort. */
html body main.knowledge-landing #directions a[class*="_categoryCard__"] {
  border: 1px solid var(--md-knowledge-hairline) !important;
  border-radius: 18px !important;
  background: linear-gradient(150deg, rgba(15, 39, 61, .42), rgba(7, 22, 38, .33)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.027) !important;
}
html body main.knowledge-landing #directions a[class*="_categoryCard__"]:is(:hover,:focus-visible) {
  border-color: var(--md-knowledge-goldline) !important;
  background: linear-gradient(150deg, rgba(20, 47, 72, .53), rgba(8, 26, 44, .4)) !important;
}
html body main.knowledge-landing #directions a[class*="_categoryCard__"] [class*="_categoryNumber__"] {
  color: #c6a46c !important;
}
html body main.knowledge-landing #directions a[class*="_categoryCard__"] h3 {
  color: #f3f0ea !important;
  line-height: 1.14 !important;
  letter-spacing: -.022em !important;
  hyphens: none !important;
}
html body main.knowledge-landing #directions a[class*="_categoryCard__"] p {
  color: rgba(230, 237, 243, .74) !important;
  line-height: 1.5 !important;
}

/* Practical links: quiet clickable surfaces, no oversized gold rectangles. */
html body main.knowledge-landing #tasks a[class*="_taskCard__"] {
  border: 1px solid var(--md-knowledge-hairline) !important;
  border-radius: 17px !important;
  background: var(--md-knowledge-panel) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
html body main.knowledge-landing #tasks a[class*="_taskCard__"]:is(:hover,:focus-visible) {
  background: var(--md-knowledge-panel-hover) !important;
  border-color: var(--md-knowledge-goldline) !important;
}
html body main.knowledge-landing #tasks a[class*="_taskCard__"] h3 {
  color: #f3f0ea !important;
  letter-spacing: -.016em !important;
}
html body main.knowledge-landing #tasks a[class*="_taskCard__"] p {
  color: var(--md-knowledge-copy) !important;
}

/* Photographs remain their original assets/cover composition; the text and
   border are made calmer and clearer instead of adding opaque overlays. */
html body main.knowledge-landing #materials a[class*="_visualArticleCard__"] {
  border: 1px solid rgba(215, 224, 232, .18) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.11) !important;
}
html body main.knowledge-landing #materials a[class*="_visualArticleCard__"]:is(:hover,:focus-visible) {
  border-color: rgba(229,192,110,.43) !important;
  box-shadow: 0 17px 35px rgba(0,0,0,.16) !important;
}
html body main.knowledge-landing #materials a[class*="_visualArticleCard__"] h3 {
  color: #f7f4ef !important;
  letter-spacing: -.018em !important;
  line-height: 1.14 !important;
  text-shadow: 0 2px 14px rgba(2,7,14,.84) !important;
}
html body main.knowledge-landing #materials a[class*="_visualArticleCard__"] p {
  color: rgba(245, 247, 250, .89) !important;
  text-shadow: 0 2px 12px rgba(2,7,14,.84) !important;
}

/* Mobile: improve tap targets and readability without changing carousel
   geometry, fixed header, safe areas or microphone control positioning. */
@media (max-width: 680px) {
  html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [role="tablist"] {
    margin-bottom: 23px !important;
  }
  html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [role="tab"] {
    min-height: 68px !important;
  }
  html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_panelIntro__"] {
    margin-bottom: 18px !important;
  }
  html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_panelIntro__"] h2 {
    font-size: clamp(31px, 8vw, 37px) !important;
    line-height: 1.09 !important;
  }
  html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [class*="_panelIntro__"] p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] input[class*="_searchBox__"] {
    min-height: 60px !important;
    font-size: 16px !important;
    border-radius: 15px !important;
  }
  html body main.knowledge-landing :is(#directions, #tasks, #materials) [class*="_sectionHeading__"] h2 {
    font-size: clamp(30px, 8vw, 37px) !important;
    line-height: 1.09 !important;
  }
  html body main.knowledge-landing #directions a[class*="_categoryCard__"] p {
    line-height: 1.43 !important;
  }
  html body main.knowledge-landing #materials a[class*="_visualArticleCard__"] h3 {
    line-height: 1.13 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body main.knowledge-landing #search-results [data-testid="knowledge-entry"] [role="tab"] {
    transition: none !important;
  }
}


/* 2026-10-19 / LEGAL ARTICLE READING v28
 * Editorial-only refinements for individual /knowledge/[slug] articles.
 * Legal copy, TOC anchors, progress tracking, save/share, download routes,
 * related navigation, FAQ <details>, and the existing ocean canvas stay intact.
 * A narrow reading measure and distinct semantic highlights improve long
 * articles without adding decorative figures or repeating section gradients.
 */
html body main.knowledge-article-page {
  --md-article-ink: #f3f0ea;
  --md-article-text: rgba(239, 242, 244, .86);
  --md-article-muted: rgba(221, 230, 237, .70);
  --md-article-gold: #e5c06e;
  --md-article-line: rgba(215, 227, 237, .15);
  --md-article-panel: rgba(8, 25, 42, .36);
}

/* The hero retains its content and one continuous navy background. */
html body main.knowledge-article-page > section.knowledge-hero {
  border: 0 !important;
  padding-top: clamp(44px, 5.2vw, 76px) !important;
  padding-bottom: clamp(35px, 4.2vw, 58px) !important;
}
html body main.knowledge-article-page > section.knowledge-hero [class*="articleHeroInner"],
html body main.knowledge-article-page > article.knowledge-article-body {
  width: min(860px, calc(100% - 48px)) !important;
  max-width: 100%;
  margin-inline: auto !important;
}
html body main.knowledge-article-page > section.knowledge-hero [class*="articleMeta"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px 17px !important;
  margin-bottom: clamp(17px, 2.2vw, 27px) !important;
  color: #c6a46c !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  letter-spacing: .095em !important;
}
html body main.knowledge-article-page > section.knowledge-hero h1 {
  max-width: 17ch !important;
  margin: 0 !important;
  color: var(--md-article-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(39px, 5vw, 65px) !important;
  font-weight: 400 !important;
  line-height: 1.095 !important;
  letter-spacing: -.032em !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
  text-shadow: none !important;
}
html body main.knowledge-article-page > section.knowledge-hero [class*="articleLead"] {
  max-width: 67ch !important;
  margin-top: clamp(17px, 2.3vw, 27px) !important;
  color: var(--md-article-muted) !important;
  font-size: clamp(17px, 1.65vw, 20px) !important;
  line-height: 1.63 !important;
}

/* The article remains a single canvas; text uses a comfortable reading width. */
html body main.knowledge-article-page > article.knowledge-article-body {
  padding-top: clamp(30px, 4.5vw, 54px) !important;
  padding-bottom: clamp(64px, 7vw, 96px) !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="articleIntro"] {
  max-width: 68ch !important;
  margin: 24px 0 37px !important;
  color: #f1eee8 !important;
  font-size: clamp(19px, 2vw, 24px) !important;
  line-height: 1.61 !important;
  letter-spacing: -.01em !important;
}
html body main.knowledge-article-page > article.knowledge-article-body > section.knowledge-article-section {
  padding: clamp(26px, 3vw, 40px) 0 !important;
  border-top: 0 !important;
  background: transparent !important;
}
html body main.knowledge-article-page > article.knowledge-article-body > section.knowledge-article-section h2 {
  max-width: 25ch !important;
  margin: 0 0 clamp(15px, 2vw, 22px) !important;
  color: #f4f0e8 !important;
  font-size: clamp(30px, 3.1vw, 40px) !important;
  line-height: 1.14 !important;
  letter-spacing: -.023em !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}
html body main.knowledge-article-page > article.knowledge-article-body > section.knowledge-article-section :is(p, li) {
  max-width: 72ch;
  color: var(--md-article-text) !important;
  font-size: clamp(16.5px, 1.45vw, 18px) !important;
  line-height: 1.76 !important;
  letter-spacing: .002em;
  overflow-wrap: break-word;
}
html body main.knowledge-article-page > article.knowledge-article-body > section.knowledge-article-section p {
  margin: 0 0 17px !important;
}
html body main.knowledge-article-page > article.knowledge-article-body > section.knowledge-article-section p:last-child {
  margin-bottom: 0 !important;
}
html body main.knowledge-article-page > article.knowledge-article-body > section.knowledge-article-section ul {
  max-width: 74ch !important;
  margin: 13px 0 20px !important;
  padding-left: 24px !important;
}
html body main.knowledge-article-page > article.knowledge-article-body > section.knowledge-article-section li {
  padding-left: 3px;
  margin: 0 0 8px;
}
html body main.knowledge-article-page > article.knowledge-article-body > section.knowledge-article-section li::marker {
  color: var(--md-article-gold);
}

/* Semantic summary – distinguish the conclusions without adding a bright slab. */
html body main.knowledge-article-page > article.knowledge-article-body [class*="_articleHighlights__"] {
  margin: 0 0 34px !important;
  padding: clamp(19px, 2.7vw, 27px) !important;
  border: 1px solid rgba(229,192,110,.25) !important;
  border-left: 2px solid rgba(229,192,110,.64) !important;
  border-radius: 15px !important;
  background: var(--md-article-panel) !important;
  box-shadow: none !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="articleHighlightsLabel"] {
  margin: 0 0 15px !important;
  color: var(--md-article-gold) !important;
  font-size: 12px !important;
  letter-spacing: .13em !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="_articleHighlights__"] ul {
  margin: 0 !important;
  padding-left: 20px !important;
  gap: 10px !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="_articleHighlights__"] li {
  color: var(--md-article-text) !important;
  font-size: clamp(15px, 1.25vw, 16.5px) !important;
  line-height: 1.58 !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="_articleHighlights__"] li::marker {
  color: var(--md-article-gold);
}

/* TOC is already interactive; refine its legibility and active section. */
html body main.knowledge-article-page .article-toc {
  margin: 28px 0 16px !important;
  border: 1px solid var(--md-article-line) !important;
  border-radius: 16px !important;
  background: var(--md-article-panel) !important;
  box-shadow: none !important;
}
html body main.knowledge-article-page .article-toc > p {
  color: var(--md-article-gold) !important;
  margin-bottom: 13px !important;
}
html body main.knowledge-article-page .article-toc > div {
  gap: 1px 23px !important;
}
html body main.knowledge-article-page .article-toc a {
  min-width: 0;
  min-height: 42px;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(215, 227, 237, .11) !important;
  color: rgba(238,241,244,.79) !important;
  font-size: 14px !important;
  line-height: 1.46 !important;
  overflow-wrap: break-word;
}
html body main.knowledge-article-page .article-toc a span {
  color: #c6a46c !important;
}
html body main.knowledge-article-page .article-toc a.is-active,
html body main.knowledge-article-page .article-toc a:is(:hover,:focus-visible) {
  color: #f2d49a !important;
  border-bottom-color: rgba(229,192,110,.36) !important;
}
html body main.knowledge-article-page .article-toc a:focus-visible {
  outline: 2px solid var(--md-article-gold) !important;
  outline-offset: 2px !important;
}

/* Download templates and next-step links stay usable without large nested panels. */
html body main.knowledge-article-page > article.knowledge-article-body [class*="_documentResources__"] {
  margin: 25px 0 38px !important;
  padding: clamp(16px, 2vw, 25px) !important;
  border: 1px solid var(--md-article-line) !important;
  border-radius: 16px !important;
  background: rgba(9,28,47,.26) !important;
  box-shadow: none !important;
}
html body main.knowledge-article-page > article.knowledge-article-body a[class*="documentResourceLink"] {
  border-color: rgba(214,227,237,.16) !important;
  background: rgba(7,23,39,.33) !important;
  border-radius: 12px !important;
}
html body main.knowledge-article-page > article.knowledge-article-body a[class*="documentResourceLink"]:is(:hover,:focus-visible) {
  background: rgba(19,45,68,.46) !important;
  border-color: rgba(229,192,110,.43) !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="disclaimer"] {
  margin-top: 26px !important;
  padding: 20px 23px !important;
  border-color: var(--md-article-line) !important;
  border-left: 2px solid rgba(229,192,110,.54) !important;
  border-radius: 12px !important;
  background: rgba(6,20,35,.27) !important;
  color: var(--md-article-muted) !important;
  line-height: 1.62 !important;
}

/* FAQ answers read like editorial text, not separate boxed sections. */
html body main.knowledge-article-page > article.knowledge-article-body [class*="faqSection"] {
  margin-top: clamp(40px, 5vw, 65px) !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--md-article-line) !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="faqList"] {
  border-top: 1px solid var(--md-article-line) !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="faqItem"] {
  border-bottom: 1px solid var(--md-article-line) !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="faqItem"] summary {
  padding: 19px 42px 19px 0 !important;
  color: #f3f0ea !important;
  font-size: clamp(18px, 1.7vw, 20px) !important;
  line-height: 1.42 !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="faqItem"] summary::after {
  right: 5px !important;
  top: 17px !important;
  color: var(--md-article-gold) !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="faqItem"] summary:focus-visible {
  outline: 2px solid var(--md-article-gold) !important;
  outline-offset: 2px !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="faqItem"] p {
  color: var(--md-article-text) !important;
  max-width: 70ch !important;
  font-size: 16px !important;
  line-height: 1.69 !important;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="articleSources"] a {
  color: #e5c06e !important;
  text-underline-offset: 3px;
}
html body main.knowledge-article-page > article.knowledge-article-body [class*="articleSources"] a:focus-visible {
  outline: 2px solid #e5c06e !important;
  outline-offset: 3px !important;
}

/* Preserve the existing short FAQ and related resources even on small screens.
   Sticky global header and content-hash targets remain unaltered. */
@media (max-width: 680px) {
  html body main.knowledge-article-page > section.knowledge-hero {
    padding-top: 25px !important;
    padding-bottom: 27px !important;
  }
  html body main.knowledge-article-page > section.knowledge-hero [class*="articleHeroInner"],
  html body main.knowledge-article-page > article.knowledge-article-body {
    width: calc(100% - 28px) !important;
  }
  html body main.knowledge-article-page > section.knowledge-hero [class*="articleMeta"] {
    gap: 5px 11px !important;
    margin-bottom: 15px !important;
    font-size: 10.5px !important;
    line-height: 1.46 !important;
  }
  html body main.knowledge-article-page > section.knowledge-hero h1 {
    max-width: 100% !important;
    font-size: clamp(31px, 8.3vw, 39px) !important;
    line-height: 1.115 !important;
    letter-spacing: -.025em !important;
  }
  html body main.knowledge-article-page > section.knowledge-hero [class*="articleLead"] {
    margin-top: 13px !important;
    font-size: 16px !important;
    line-height: 1.53 !important;
  }
  html body main.knowledge-article-page > article.knowledge-article-body {
    padding-top: 22px !important;
    padding-bottom: 58px !important;
  }
  html body main.knowledge-article-page > article.knowledge-article-body [class*="articleIntro"] {
    margin: 20px 0 29px !important;
    font-size: clamp(18px, 4.75vw, 20px) !important;
    line-height: 1.56 !important;
  }
  html body main.knowledge-article-page > article.knowledge-article-body > section.knowledge-article-section {
    padding: 22px 0 !important;
  }
  html body main.knowledge-article-page > article.knowledge-article-body > section.knowledge-article-section h2 {
    max-width: 100% !important;
    margin-bottom: 13px !important;
    font-size: clamp(27px, 7.2vw, 34px) !important;
    line-height: 1.15 !important;
  }
  html body main.knowledge-article-page > article.knowledge-article-body > section.knowledge-article-section :is(p,li) {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  html body main.knowledge-article-page > article.knowledge-article-body [class*="_articleHighlights__"] {
    margin-bottom: 24px !important;
    padding: 18px 17px !important;
    border-radius: 13px !important;
  }
  html body main.knowledge-article-page .article-toc {
    margin: 20px 0 10px !important;
    border-radius: 14px !important;
  }
  html body main.knowledge-article-page .article-toc .article-toc-toggle {
    min-height: 52px !important;
    padding: 0 15px !important;
    color: var(--md-article-gold) !important;
  }
  html body main.knowledge-article-page .article-toc > div {
    gap: 0 !important;
    padding: 0 15px 11px !important;
  }
  html body main.knowledge-article-page .article-toc a {
    font-size: 14px !important;
    min-height: 43px !important;
    padding: 9px 0 !important;
  }
  html body main.knowledge-article-page > article.knowledge-article-body [class*="_documentResources__"] {
    margin: 20px 0 29px !important;
    padding: 17px !important;
  }
  html body main.knowledge-article-page > article.knowledge-article-body [class*="faqItem"] summary {
    font-size: 18px !important;
  }
  html body main.knowledge-article-page > article.knowledge-article-body [class*="faqItem"] p {
    font-size: 15px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body main.knowledge-article-page .article-toc a,
  html body main.knowledge-article-page > article.knowledge-article-body a[class*="documentResourceLink"] {
    transition: none !important;
  }
}

/* 2026-10-19 / MOBILE HEADER PAINT CLEARANCE — NO LEGACY TOP BAND */
/*
 * The global navigation is fixed. Older mobile CSS reserved its height on the
 * main wrapper, painting a navy padding stripe BEFORE the dark hero began.
 * Keep exactly one header clearance, but let the hero itself paint it.
 * The text/CTA offset stays the same and the approved gradient is uninterrupted.
 * Other routes, desktop layouts, iOS safe-area geometry and menu stay untouched.
 */
@media screen and (orientation: portrait) and (max-width: 760px) {
  html body > main.home-page {
    padding-top: 0 !important;
  }

  html body > main.home-page > section.hero {
    margin-top: 0 !important;
    padding-top: calc(var(--md-header-height) + env(safe-area-inset-top, 0px)) !important;
  }
}


/*
 * 2026-10-20 / ONE HEADER CLEARANCE, INCLUDING BREADCRUMB ROUTES
 *
 * The global header is fixed. A mobile route paints from the viewport top,
 * while its FIRST visible content element alone reserves header + safe-area.
 * On article/topic/document detail routes, breadcrumbs precede the hero:
 * the nav gets the clearance, never the hero again.
 * Preserve the existing home-page treatment and landscape/mobile menu.
 */
@media screen and (orientation: portrait) and (max-width: 760px) {
  html body > main:not(.home-page):has(> section:first-of-type),
  html body > main.directory-page {
    --md-page-header-clearance: calc(var(--md-header-height) + env(safe-area-inset-top, 0px));
    padding-top: 0 !important;
  }

  /* Ordinary pages put their heading inside the first full-width section. */
  html body > main:not(.home-page):not(:has(> nav.knowledge-breadcrumbs)) > section:first-of-type {
    padding-top: calc(var(--md-page-header-clearance) + 28px) !important;
  }

  /* Knowledge routes with standalone breadcrumbs paint the same continuous
     page surface from y=0, and start the first REAL content below the header. */
  html body > main:has(> nav.knowledge-breadcrumbs) > nav.knowledge-breadcrumbs {
    padding-top: calc(var(--md-page-header-clearance) + 14px) !important;
  }
  html body > main:has(> nav.knowledge-breadcrumbs) > section:first-of-type {
    padding-top: 28px !important;
  }

  /* Knowledge landing and topics index have no standalone breadcrumbs.
     The catalog section itself reserves the clearance. */
  html body > main.knowledge-landing > section#search-results:first-of-type,
  html body > main.knowledge-topics-directory > section:first-of-type {
    padding-top: var(--md-page-header-clearance) !important;
  }

  /* The documents page has its own hero inner padding after the breadcrumbs. */
  html body > main[data-tool-page="documents"] > section[data-tool-hero-shell]:first-of-type {
    padding-top: 0 !important;
  }

  /* Established reading gaps, not a second header-height. */
  html body > main.knowledge-article-page > section.knowledge-hero:first-of-type {
    padding-top: 25px !important;
  }
  html body > main.knowledge-topic-page > section.knowledge-topic-hero:first-of-type {
    padding-top: 20px !important;
  }

  /* Both direction and process directories begin in a plain div container. */
  html body > main.directory-page > div:first-of-type {
    padding-top: var(--md-page-header-clearance) !important;
  }
}