/* Shared styles. Page styles live inline in the markup, as designed. */
hct-if { display: contents; }
hct-if[hidden], [hidden] { display: none !important; }
:focus-visible { outline: 3px solid #3E9BD6; outline-offset: 2px; }
* { -webkit-tap-highlight-color: transparent; }
/* Desktop: the zero-width mobile button group must not take a flex gap */
@media (min-width: 1200px) { [data-mobile-actions] { display: none; } }
/* Open mobile menu: lock page scroll; the menu has its own Call/Quote buttons, so hide the fixed bar */
nav[aria-label="Mobile"] { max-height: calc(100dvh - 64px) !important; }
html.menu-open { overflow: hidden; }
html.menu-open [data-mobile-bar] { display: none !important; }

/* ---------- animations (only when the visitor hasn't asked for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }

  /* scroll reveal: site.js adds .in when an element enters the viewport */
  html.anim .rv { opacity: 0; transform: translateY(22px); }
  html.anim .rv.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-delay, 0ms); }

  /* header shadow once the page scrolls */
  [data-ref="headerRef"] { transition: box-shadow .3s ease; }
  html.scrolled [data-ref="headerRef"] { box-shadow: 0 6px 24px rgba(19,41,75,.08); }

  /* cards lift, photos zoom */
  article { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
  article:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(19,41,75,.12); }
  article img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  article:hover img { transform: scale(1.05); }

  /* pill buttons */
  a[style*="border-radius:999px"], button[style*="border-radius:999px"] { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
  a[style*="border-radius:999px"]:hover, button[style*="border-radius:999px"]:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(19,41,75,.16); }
  a[style*="border-radius:999px"]:active, button[style*="border-radius:999px"]:active { transform: translateY(0) scale(.98); box-shadow: none; }

  /* arrows nudge right */
  .arw, a > span[aria-hidden="true"] { display: inline-block; transition: transform .25s ease; }
  a:hover .arw, a:hover > span[aria-hidden="true"] { transform: translateX(4px); }

  /* nav links & icons */
  a, summary { transition: color .2s ease; }
  nav[aria-label="Main"] a > span, nav[aria-label="Main"] button > span { animation: underline .35s ease-out both; transform-origin: left; }

  /* FAQ: smooth open, + turns into × */
  details[data-faq]::details-content { block-size: 0; overflow: hidden; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
  details[data-faq][open]::details-content { block-size: auto; }
  details[data-faq] summary > span[aria-hidden] { transition: transform .3s ease, background-color .3s ease; }
  details[data-faq][open] summary > span[aria-hidden] { transform: rotate(45deg); background-color: #E3EEF8 !important; }
  details[data-faq] summary:hover { color: #2A6FA3; }

  /* menus */
  #hct-other-services { animation: drop-in .25s cubic-bezier(.2,.7,.2,1); }
  nav[aria-label="Mobile"] { animation: drop-in .28s cubic-bezier(.2,.7,.2,1); }
  nav[aria-label="Mobile"] hct-if > div { animation: fade-in .3s ease; }

  /* quote form thank-you */
  [data-component="QuoteForm"] [data-if="sent"]:not([hidden]) > div { animation: pop-in .5s cubic-bezier(.2,.9,.3,1.2); }
  [data-component="QuoteForm"] [data-if="sent"]:not([hidden]) svg { animation: drip 1.2s ease-out .15s both; }

  /* mobile call/quote bar slides up on first load */
  [data-mobile-bar] { animation: bar-up .5s cubic-bezier(.2,.7,.2,1) .4s both; }
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes drip { 0% { transform: translateY(-14px); opacity: 0; } 60% { transform: translateY(2px); opacity: 1; } 100% { transform: none; } }
@keyframes underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bar-up { from { transform: translateY(100%); } to { transform: none; } }

/* hover & focus styles from the design */
.ho1:hover{background:#FFDD6B !important}
.ho2:hover{color:#2A6FA3 !important}
.ho3:hover{color:#13294B !important}
.ho4:hover{background:#FFDD6B !important;color:#13294B !important}
.fo5:focus{border-color:#3E9BD6 !important;box-shadow:0 0 0 3px rgba(62,155,214,.2) !important}
.ho6:hover{color:#6BB8E8 !important}
.ho7:hover{background:#DCEDF8 !important;color:#13294B !important}
.ho8:hover{border-color:#3E9BD6 !important}
.ho9:hover{background:#2A4A7A !important;color:#FFFFFF !important}