:root:root:root{--moss:#56734C;--text-light:#6C6C67;--forest-light:#457456}.footer .footer-desc,.footer .footer-links a{color:rgba(250,246,240,0.72)}.footer .footer-contact,.footer .footer-contact a{color:rgba(250,246,240,0.78)}.footer .footer-bottom,.footer .footer-bottom span{color:rgba(250,246,240,0.7)}.footer .footer-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--cream);margin-bottom:16px}.hero-breadcrumb a{opacity:0.9}@media (max-width:430px){.header .th-announce{white-space:normal}.header .th-announce>span{display:block}.header .th-announce a{display:inline-block;margin-left:0;margin-top:4px;white-space:nowrap}}
/* PART 3 - reveal-on-scroll without waiting for hydration.

   base.css sets .reveal{opacity:0} and only adds .vis from an IntersectionObserver.
   In the WordPress original that observer ran from a classic script, so it fired
   almost immediately. Here it lived in a client component, so every .reveal block
   stayed invisible until the React bundle downloaded, parsed and hydrated - which
   on throttled 4G pushed LCP past 8s and Speed Index past 19s.

   Now .reveal is visible by default and only hidden once an inline head script has
   set html.js, which also starts the observer at DOMContentLoaded. Without JS the
   content is simply visible. The repeated :root raises specificity over the
   template sheets, which redeclare .reveal. */

:root:root:root .reveal {
  opacity: 1;
  transform: none;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(30px);
}

html.js .reveal.vis {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* PART 4 - reserve the form's space.

   The forms mount from a client portal into [data-form-mount]; without a
   reserved height the surrounding card collapses and then jumps, which measured
   0.555 CLS on /contact-us/. Only that page needs it: on / and /verify-insurance/
   the form sits in a card that already has height, and reserving space there made
   the hero gradient the LCP element and cost 3s. Released once the form paints. */

[data-form-mount="contact"] {
  min-height: 560px;
}

[data-form-mount]:has(.th-form) {
  min-height: 0;
}

@media (max-width: 640px) {
  [data-form-mount="contact"] {
    min-height: 620px;
  }
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--cream);
  color: var(--forest-deep);
  font-weight: 700;
}

.skip-link:focus {
  top: 16px;
}
