/* ==================================================================
   Shared site styles (used by every page)
   Header, mobile menu, footer, primary button, credential badges'
   shine and scroll-reveal animation. Design tokens live in global.css.
   Breakpoints: tablet ≤ 1024px, mobile ≤ 600px.
   ================================================================== */

/* ------------------------------------------------------------------
   Header: fixed, transparent at the top, translucent white once the
   page scrolls (rgba so only the background is see-through, never the
   logo or links)
   ------------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-20);
  padding: 70px 90px 10px;
  background-color: transparent;
  transition: background-color 0.3s ease;
  font-family: var(--Body);
  font-size: 1rem;
  color: var(--Blue-dark);
}
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.9);
}
/* Inner pages (e.g. About): the header sits above the banner instead of
   over it, and still sticks to the top while scrolling */
.site-header--in-flow {
  position: sticky;
  background-color: var(--color-aliceblue);
}
.site-header--in-flow.is-scrolled {
  background-color: rgba(255, 255, 255, 0.7);
}
.site-header__brand {
  display: block;
  line-height: 0;
  flex-shrink: 0;
}
.site-header__logo {
  display: block;
  width: 18rem;
  height: auto;
}

/* Main navigation */
.site-nav {
  display: flex;
  align-items: center;
  gap: 2.562rem;
}
.site-nav__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-nav__link:hover {
  color: #10a9ee;
}
/* Homepage desktop: the transparent header sits over the hero photo, whose
   dark monitor can land behind the links depending on the viewport — give
   them a frosted pill so they stay legible on any background */
@media screen and (min-width: 1025px) {
  .site-header:not(.site-header--in-flow) .site-nav__link {
    padding: 0.5rem 1.125rem;
    border-radius: 150px;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
/* Link to the page you're on: light grey, no underline */
.site-nav__link[aria-current="page"],
.site-footer a[aria-current="page"] {
  color: #9aa7b4;
  text-decoration: none;
  cursor: default;
}

/* "Request service" pill in the header */
.site-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.625rem;
  border-radius: 150px;
  background: var(--blue-cian);
  color: var(--white);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

/* Hamburger button: hidden on desktop */
.site-header__toggle {
  display: none;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.site-header__toggle-bar {
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--Blue-dark);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Bars morph into an X while the menu is open */
.site-header.is-open .site-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .site-header__toggle-bar:nth-child(2) { opacity: 0; }
.site-header.is-open .site-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media screen and (max-width: 1024px) {
  .site-header {
    padding: 40px 40px 30px;
  }
  /* Opaque header while the panel is open so it doesn't mix with the page */
  .site-header.is-open {
    background-color: var(--white);
  }
  .site-header__toggle {
    display: flex;
  }
  /* Nav becomes a dropdown panel under the header */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.625rem 1.875rem 1.875rem;
    background-color: var(--white);
    box-shadow: var(--shadow-drop);
    font-size: 1.125rem;
  }
  .site-header.is-open .site-nav {
    display: flex;
  }
  .site-nav__link {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-slategray);
  }
  .site-nav__cta {
    margin-top: 1.25rem;
    font-size: 1rem;
  }
}
@media screen and (max-width: 600px) {
  .site-header {
    padding: 12px 20px;
  }
  .site-header__logo {
    width: 12.5rem;
  }
  .site-nav {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .site-nav__cta {
    font-size: 0.9375rem;
  }
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.site-footer {
  align-self: stretch;
  border-top: 1px solid var(--color-slategray);
  padding-bottom: 1.875rem;
  font-family: var(--Body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3rem;
  color: var(--blue-grey);
}
.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer a:not([aria-current]):hover {
  color: #10a9ee;
}
/* Desktop: logo · blurb on the left, links on the right
   (the 1fr column is the flexible space between the two groups) */
.site-footer__main {
  display: grid;
  grid-template-columns: 16rem minmax(0, 23rem) 1fr auto;
  column-gap: 4rem;
  align-items: start;
  padding: 3.75rem 0;
}
.site-footer__brand {
  grid-column: 1;
  line-height: 0;
}
.site-footer__logo {
  width: 100%;
  height: auto;
}
.site-footer__blurb {
  grid-column: 2;
  margin: 0;
}
.site-footer__links {
  grid-column: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 2.5rem;
}
.site-footer__bottom {
  border-top: 1px solid var(--color-slategray);
  padding-top: 1.75rem;
  text-align: center;
}
.site-footer__copyright {
  margin: 0;
}

/* Tablet: same order, tighter columns, no flexible spacer */
@media screen and (max-width: 1024px) {
  .site-footer__main {
    grid-template-columns: 12.5rem minmax(0, 1fr) auto;
    column-gap: 2.5rem;
    padding: 3rem 0;
  }
  .site-footer__links { grid-column: 3; }
}

/* Mobile: everything centered and stacked */
@media screen and (max-width: 600px) {
  .site-footer__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
  }
  .site-footer__brand {
    width: 12.5rem;
  }
  .site-footer__links {
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
   Page banner (inner pages: About, Services)
   Photo anchored right at full height; a light-blue wash fades from
   solid behind the text to clear over the photo, recreating the Figma
   gradients. Each page sets its photo with --banner-photo (and can
   reframe it with --banner-photo-x). Side margin follows the page's
   --page-margin; the text lines up with the homepage hero on desktop.
   ------------------------------------------------------------------ */
.page-banner {
  --banner-wash: linear-gradient(90deg,
    var(--color-aliceblue) 0%,
    rgba(214, 238, 250, 1) 22%,
    rgba(185, 226, 247, 0.85) 40%,
    rgba(170, 218, 243, 0.4) 58%,
    rgba(170, 218, 243, 0) 75%);
  margin-top: 5rem; /* breathing room below the header, as in Figma */
  min-height: 19.7rem; /* 315px, the Figma banner height */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 4rem var(--page-margin, 6rem) 4rem var(--Hero-pad-left);
  background:
    var(--banner-wash),
    linear-gradient(rgba(150, 205, 235, 0.18), rgba(150, 205, 235, 0.18)), /* soft blue tint over the photo */
    var(--banner-photo) var(--banner-photo-x, right) center / auto 100% no-repeat,
    rgb(185, 226, 247);
}
.page-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 0.812rem;
  max-width: 45rem;
}
.page-banner__title {
  margin: 0;
  font-family: var(--Headlines);
  font-size: 2.875rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--Blue-dark);
}
@media screen and (max-width: 1024px) {
  .page-banner {
    margin-top: 2.5rem;
    padding-left: var(--page-margin, 2.5rem);
    --banner-wash: linear-gradient(90deg,
      var(--color-aliceblue) 0%,
      rgba(214, 238, 250, 0.95) 35%,
      rgba(185, 226, 247, 0.7) 60%,
      rgba(170, 218, 243, 0.15) 85%);
  }
  .page-banner__title {
    font-size: 2.5rem;
  }
}
/* Mobile: text spans the width, so an even wash keeps it legible */
@media screen and (max-width: 600px) {
  .page-banner {
    min-height: 0;
    padding: 4rem 1.5rem;
    --banner-wash: linear-gradient(90deg,
      rgba(244, 251, 254, 0.92) 0%,
      rgba(214, 238, 250, 0.82) 60%,
      rgba(185, 226, 247, 0.6) 100%);
  }
  .page-banner__title {
    font-size: 1.875rem;
  }
}

/* ------------------------------------------------------------------
   Accepted insurance banner (homepage before Testimonials; Services
   before General & Small Parts)
   Blue gradient band; the photo sits on the right at full height and a
   blue wash fades into it from the left, as in the Figma mock-up.
   ------------------------------------------------------------------ */
.insurance-banner {
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  min-height: 14rem;
  display: flex;
  align-items: center;
  padding: 2.75rem 3.5rem;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-drop);
  color: var(--white);
  background:
    linear-gradient(90deg, #0b5baa 0%, #1c67b6 38%, rgba(40, 125, 200, 0.85) 55%, rgba(60, 150, 220, 0.25) 72%, rgba(60, 150, 220, 0) 85%),
    url('./assets/banner-medicare.webp') right center / auto 100% no-repeat,
    var(--blue-cian);
}
.insurance-banner__text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 30rem;
}
.insurance-banner__title {
  margin: 0;
  font-family: var(--Headlines);
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.insurance-banner__copy {
  margin: 0;
  font-family: var(--Body);
  font-size: 1.125rem;
  line-height: 1.55;
  opacity: 0.8; /* same as the CTA copy (.connect-with-our) */
}

@media screen and (max-width: 1024px) {
  .insurance-banner {
    padding: 2.25rem 2.5rem;
  }
  .insurance-banner__title {
    font-size: 2rem;
  }
}
/* Mobile: photo strip on top, text on the blue band below it; the blue
   fades up into the photo from the bottom */
@media screen and (max-width: 700px) {
  .insurance-banner {
    min-height: 0;
    align-items: flex-end;
    padding: 9.5rem 1.5rem 2rem;
    background:
      linear-gradient(0deg, #0b5baa 0%, #1c67b6 48%, rgba(40, 125, 200, 0.55) 60%, rgba(60, 150, 220, 0) 78%),
      url('./assets/banner-medicare.webp') right top / 120% auto no-repeat,
      var(--blue-cian);
  }
  .insurance-banner__title {
    font-size: 1.625rem;
  }
  .insurance-banner__copy {
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------
   Primary button (filled gradient pill with a white arrow circle)
   ------------------------------------------------------------------ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.625rem 0.625rem 1.625rem;
  border-radius: 150px;
  background: var(--blue-cian);
  color: var(--white);
  font-family: var(--Body);
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-primary__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--Blue-dark);
  font-size: 1.187rem;
  transition: transform 0.25s ease;
}
@media screen and (max-width: 600px) {
  .btn-primary {
    gap: 0.625rem;
    padding: 0.312rem 0.312rem 0.312rem 1.25rem;
    font-size: 0.9375rem;
  }
  .btn-primary__arrow {
    width: 1.875rem;
    height: 1.875rem;
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------
   Outline button: transparent fill, 2px blue-gradient border (masked
   ::before, so the inside stays truly see-through), blue text and a
   gradient arrow circle
   ------------------------------------------------------------------ */
.btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  box-sizing: border-box;
  padding: 0.312rem 0.312rem 0.312rem 1.25rem;
  border-radius: 100px;
  color: var(--Blue-dark);
  font-family: var(--Body);
  font-size: 1rem;
  line-height: 1.3rem;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--blue-cian);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.btn-outline__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--blue-cian);
  color: var(--white);
  font-size: 1.187rem;
  transition: transform 0.25s ease;
}
/* White-filled variant, for use on blue backgrounds */
.btn-outline--light {
  background: var(--white);
}
@media screen and (max-width: 600px) {
  .btn-outline {
    font-size: 0.9375rem;
  }
  .btn-outline__arrow {
    width: 1.875rem;
    height: 1.875rem;
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------
   CTA banner: blue band, text left, nurse standing on the bottom edge
   and popping out above it, button right (same as the homepage CTA)
   ------------------------------------------------------------------ */
.cta-banner {
  display: flex;
  align-items: center;
  gap: 3.75rem;
  padding: 1.375rem 3.75rem;
  border-radius: 14px;
  background: var(--blue-cian);
  box-shadow: var(--shadow-drop);
  color: var(--white);
  font-family: var(--Body);
}
.cta-banner__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 46rem;
}
.cta-banner__title {
  margin: 0;
  font-family: var(--Headlines);
  font-size: 1.688rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 2.194rem;
}
.cta-banner__copy {
  margin: 0;
  font-size: 1.063rem;
  line-height: 1.4rem;
  opacity: 0.8;
}
/* Reserves the nurse's width; the image is positioned so it doesn't
   add to the band's height */
.cta-banner__nurse {
  position: relative;
  flex: 0 0 8.75rem;
  align-self: stretch;
  margin-bottom: -1.375rem;
}
.cta-banner__nurse img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 12.15rem;
  width: auto;
}
.cta-banner .btn-outline {
  flex: 0 0 18.75rem;
}

/* Tablet: text on top, button underneath, nurse on the right */
@media screen and (min-width: 901px) and (max-width: 1200px) {
  .cta-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.75rem;
    grid-template-areas:
      "text   nurse"
      "button nurse";
    row-gap: 1.25rem;
    padding: 1.875rem 3.75rem;
  }
  .cta-banner__text { grid-area: text; max-width: none; }
  .cta-banner .btn-outline { grid-area: button; justify-self: start; width: 18.75rem; }
  .cta-banner__nurse { grid-area: nurse; margin-bottom: -1.875rem; }
}
/* Mobile: stacked, nurse centered at the bottom */
@media screen and (max-width: 900px) {
  .cta-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.875rem 1.875rem 0;
  }
  .cta-banner .btn-outline {
    flex: none;
  }
  .cta-banner__nurse {
    order: 3;
    flex: none;
    align-self: center;
    margin: 0.625rem 0 0;
  }
  .cta-banner__nurse img {
    position: static;
    transform: none;
    display: block;
  }
}

/* Hover only on devices with a real pointer (no sticky hover on taps) */
@media (hover: hover) {
  .site-nav__cta:hover,
  .btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 8px 20px rgba(11, 91, 170, 0.3);
  }
  .btn-primary:hover .btn-primary__arrow,
  .btn-outline:hover .btn-outline__arrow {
    transform: translateX(4px);
  }
  .btn-outline:hover {
    transform: translateY(-2px);
    background-color: rgba(16, 169, 238, 0.08);
    box-shadow: 0 8px 20px rgba(11, 91, 170, 0.15);
  }
  .btn-outline--light:hover {
    background-color: var(--white);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  }
}
.site-nav__cta:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible {
  outline: 3px solid rgba(16, 169, 238, 0.6);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Credentials: metallic shine sweeping across each badge.
   A bright diagonal stripe on the wrapper's ::after, blended with
   `overlay` so it brightens the badge's colors like polished metal and
   all but disappears over the light page background around it.
   (No CSS mask, so it also works when the file is opened locally.)
   Each badge shines once every 4s, staggered via --shine-delay (set
   per badge in the HTML) so they never shine together.
   ------------------------------------------------------------------ */
.badge-shine {
  position: relative;
  display: block;
  width: 13rem;
  line-height: 0;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate; /* keep the blend inside the badge */
}
/* Sizing lives on the wrapper; the image just fills it */
.badge-shine > img {
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
}
/* ::after = broad metallic glow (overlay), ::before = crisp glint (screen) */
.badge-shine::before,
.badge-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-size: 300% 100%;
  background-position: 100% 0; /* stripe parked off the left edge */
  animation: badge-shine 4s ease-in-out infinite;
  animation-delay: var(--shine-delay, 0s);
}
.badge-shine::before {
  z-index: 2;
  background-image: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 47%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 53%);
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}
.badge-shine::after {
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.28) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.28) 55%,
    rgba(255, 255, 255, 0) 62%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  mix-blend-mode: overlay;
}
/* Stagger by position in the row, in a deliberately irregular order
   (inherited, so it works whether badges sit directly in the row or in <li>s) */
.badge-row > :nth-child(2) { --shine-delay: 1.65s; }
.badge-row > :nth-child(3) { --shine-delay: 0.55s; }
.badge-row > :nth-child(4) { --shine-delay: 2.2s; }
.badge-row > :nth-child(5) { --shine-delay: 1.1s; }
@keyframes badge-shine {
  0% { background-position: 100% 0; }   /* off the left */
  25% { background-position: 0% 0; }    /* swept across in ~1s, off the right */
  100% { background-position: 0% 0; }   /* rest until the next cycle */
}
/* Mobile: 2 badges per row (the row is centered, so the 5th sits
   centered on its own line). Assumes the row gap is 1rem. */
@media screen and (max-width: 600px) {
  .badge-shine {
    width: calc((100% - 1rem) / 2);
    max-width: 13rem;
  }
}

/* ------------------------------------------------------------------
   Mobile/tablet floating "Request service" button + service picker
   (built by site.js). Hidden on desktop, where the header CTA is always
   in reach.
   ------------------------------------------------------------------ */
.request-fab {
  display: none;
}
@media screen and (max-width: 1024px) {
  .request-fab {
    position: fixed;
    left: 1.25rem;
    right: 1.25rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 26rem;
    margin: 0 auto;
    padding: 0.95rem 1.25rem;
    border: none;
    border-radius: 100px;
    background: var(--blue-cian);
    color: var(--white);
    font-family: var(--Body);
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 10px 28px rgba(11, 91, 170, 0.35);
    cursor: pointer;
    /* hidden until the page scrolls past the hero */
    opacity: 0;
    visibility: hidden;
    transform: translateY(140%);
    transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
  }
  .request-fab.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .request-fab:focus-visible {
    outline: 3px solid rgba(16, 169, 238, 0.6);
    outline-offset: 3px;
  }
  /* Room at the end of the page so the button never hides the copyright */
  body.has-request-fab {
    padding-bottom: 5.5rem;
  }
}

/* Bottom sheet */
.service-picker {
  width: 100%;
  max-width: 34rem;
  max-height: min(85vh, 46rem);
  margin: auto auto 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--blue-grey);
  font-family: var(--Body);
  overflow: visible;
}
.service-picker::backdrop {
  background: rgba(10, 30, 55, 0.45);
}
.service-picker[open] .service-picker__sheet {
  animation: sheet-up 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}
.service-picker__sheet {
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 46rem);
  border-radius: 20px 20px 0 0;
  background: var(--white);
  box-shadow: 0 -10px 40px rgba(11, 91, 170, 0.18);
  padding-bottom: env(safe-area-inset-bottom);
}
.service-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--color-slategray);
}
.service-picker__title {
  margin: 0;
  font-family: var(--Headlines);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--Blue-dark);
}
.service-picker__close {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: var(--color-aliceblue);
  color: var(--Blue-dark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.service-picker__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 1.25rem 1.5rem;
}
.service-picker__hint {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
}
.service-picker__group {
  margin-top: 1.25rem;
}
.service-picker__group-title {
  margin: 0 0 0.25rem;
  font-family: var(--Headlines);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--Blue-dark);
}
/* Desktop: centered dialog card instead of a bottom sheet */
@media screen and (min-width: 1025px) {
  .service-picker {
    margin: auto;
    max-width: 62rem;
  }
  /* One column per category, so every service is visible without scrolling */
  .service-picker__body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2rem;
    padding: 1rem 1.75rem 1.75rem;
  }
  .service-picker__hint,
  .service-picker__option--unsure {
    grid-column: 1 / -1;
  }
  .service-picker__option--unsure {
    justify-self: center;
    min-width: 20rem;
  }
  .service-picker__head {
    padding: 1.5rem 1.75rem 1rem;
  }
  .service-picker__sheet {
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(11, 91, 170, 0.25);
  }
  .service-picker[open] .service-picker__sheet {
    animation: picker-in 0.25s ease-out;
  }
  .service-picker__option:hover {
    background: var(--color-aliceblue);
  }
  .service-picker__option--unsure:hover {
    border-color: #10a9ee;
  }
}
@keyframes picker-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Each option is a full-width row with a comfortable tap target */
.service-picker__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-slategray);
  color: var(--Blue-dark);
  font-size: 1rem;
  text-decoration: none;
}
.service-picker__option::after {
  content: '→';
  color: #10a9ee;
}
.service-picker__option:active {
  background: var(--color-aliceblue);
}
.service-picker__option--unsure {
  justify-content: center;
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid rgba(16, 169, 238, 0.35);
  border-radius: 100px;
  font-weight: 500;
}
.service-picker__option--unsure::after {
  content: none;
}

/* ------------------------------------------------------------------
   Scroll reveal (classes added by site.js).
   Animates the individual `translate` property, not `transform`, so it
   never fights hover lifts.
   ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
}
.reveal.is-visible {
  animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms) both;
}
@keyframes reveal-up {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}

/* ------------------------------------------------------------------
   Smooth in-page scrolling; anchor targets land below the fixed header
   ------------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
}
[id] {
  scroll-margin-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .badge-shine::before, .badge-shine::after { animation: none; display: none; }
  .request-fab { transition: none; }
  .service-picker[open] .service-picker__sheet { animation: none; }
  .site-nav__cta, .btn-primary, .btn-primary__arrow, .btn-outline, .btn-outline__arrow {
    transition: none;
    transform: none !important;
  }
}