/* Site-specific overrides for bewellmedical.com.

   Loaded after leap-theme.css and leap-foundation.css so the rules here win
   without having to edit either fleet-shared stylesheet. */

/* --- Footer photo ----------------------------------------------------------
   The Fulton Street building sits behind the booking card, anchored to the
   bottom edge: the street line always lands at the bottom of the page and the
   crop eats into the sky at the top. On a short footer only the storefronts
   show; the taller the footer gets, the more of the building and sky comes
   back in from the top. The <img> is decorative (alt=""), so moving it to a
   CSS background costs nothing semantically.

   The photo also stays pinned to the viewport while the FAQs and the footer
   card scroll over it. A fixed background is framed against the viewport, so
   `50% 100%` puts the street line on the bottom edge of the window — which is
   where the bottom of the page comes to rest once you have scrolled all the
   way down, and taller windows keep showing more of the building above it. */

.footer > .background-image-wrapper {
  background-image: url("../biz/bewell-20bedford-20location-20outside-2.webp");
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.footer > .background-image-wrapper > .full-image {
  display: none;
}

/* iOS Safari ignores fixed attachment; so does anyone who asked for less
   motion. Both fall back to a static photo anchored to the footer's own
   bottom edge, which frames the same way without the parallax. */
@media (prefers-reduced-motion: reduce) {
  .footer > .background-image-wrapper {
    background-attachment: scroll;
  }
}

/* --- Insurance section header ----------------------------------------------
   Heading left, tag pill right — the same row layout as Our Services and
   Our Care Team, instead of the stacked default. */

.insurance-section__header {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

/* --- Insurance grid dividers -----------------------------------------------
   The theme draws the grid lines as 1px layout gaps with the container's grey
   showing through. A 1px gap sits between two independently-rounded element
   edges, so at fractional device-pixel offsets a line can collapse to nothing
   (the row between Affinity and Cigna was dropping out). Painted inset lines
   belong to each tile's own box and cannot collapse.

   Four columns above 991px, two below — matching the theme's breakpoint. */

.insurance-section .feature-grid {
  grid-column-gap: 0;
  grid-row-gap: 0;
  background-color: transparent;
}

.insurance-section .feature-item {
  box-shadow: inset 1px 1px 0 0 #ddd;
}

/* the container's own border already draws the top and left edges */
.insurance-section .feature-item:nth-child(4n + 1) {
  box-shadow: inset 0 1px 0 0 #ddd;
}

.insurance-section .feature-item:nth-child(-n + 4) {
  box-shadow: inset 1px 0 0 0 #ddd;
}

.insurance-section .feature-item:first-child {
  box-shadow: none;
}

@media screen and (max-width: 991px) {
  .insurance-section .feature-item,
  .insurance-section .feature-item:nth-child(4n + 1),
  .insurance-section .feature-item:nth-child(-n + 4) {
    box-shadow: inset 1px 1px 0 0 #ddd;
  }

  .insurance-section .feature-item:nth-child(2n + 1) {
    box-shadow: inset 0 1px 0 0 #ddd;
  }

  .insurance-section .feature-item:nth-child(-n + 2) {
    box-shadow: inset 1px 0 0 0 #ddd;
  }

  .insurance-section .feature-item:first-child {
    box-shadow: none;
  }
}

/* --- Care team: two rows of five -------------------------------------------
   Each carousel slide is a column of two cards. The slider measures slides,
   not cards, so five slides per view now means ten providers on screen and
   the paging, dots and arrows keep working untouched. */

/* Scoped the same way the theme scopes its slide widths, so this beats
   leap-foundation.css's `.leap-slider-track > .carousel__slide {display:block}`.
   Without the flex column the two cards keep their own heights and the second
   row goes ragged. */
.provider-carousel .leap-slider-track > .provider-carousel__slide {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1.25rem;
}

/* Two equal grid rows keep the second row's top edge on the same line across
   all five columns, however long a name or specialty runs. */
.provider-carousel .provider-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The arrows are absolutely positioned at the carousel's bottom edge, so
   padding-bottom is the gap BETWEEN the cards and the arrows — keep it tight.
   The breathing room the section needs before the insurance band goes below
   the arrows, as margin. */
.provider-carousel {
  padding-bottom: 4rem;
  margin-bottom: 5rem;
}

/* One row below 1200px: two rows of five are a DESKTOP-ONLY treatment. Every
   phone and every tablet — iPad Pro portrait is 1024px, so 991 was too low —
   swipes a single row. This breakpoint must stay in step with the matchMedia in
   leap-site.js.

   leap-site.js normally gives each provider a slide of their own here, so the
   two-row grid just has to collapse to one auto row. `grid-auto-flow: column`
   is the belt-and-braces half: if that script is cached, blocked or fails, a
   slide still holding two cards lays them out SIDE BY SIDE instead of stacking
   them, so the second row cannot come back by any route. */
@media screen and (max-width: 1199px) {
  .provider-carousel .leap-slider-track > .provider-carousel__slide {
    grid-template-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

/* 992-1199 (large tablets): the theme still hands out five slides per view here,
   which after the split is five ~190px cards. Four reads better and keeps the
   5/4/3/2/1 ladder even. Range-limited on purpose — this file loads after the
   theme, so an open-ended max-width would also beat the theme's 767px and 479px
   steps and put four cards on a phone. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .provider-carousel .leap-slider-track > .provider-carousel__slide {
    flex: 0 0 calc((100% - 3.75rem) / 4);
    margin-right: 1.25rem;
  }
}

@media screen and (max-width: 479px) {
  .provider-carousel {
    padding-bottom: 3.75rem;
    margin-bottom: 3.5rem;
  }
}

/* --- Care team: shorter cards ----------------------------------------------
   The square photo crop was most of the card's height. A 4:3 crop takes a
   quarter off it and still keeps every face — the headshots are portraits
   anchored to the top (.object-fit-top). The body then only needs enough
   padding to sit the name and specialty comfortably, instead of the deep
   block that balanced the square photo. */

.provider-carousel .provider-card__media {
  aspect-ratio: 4 / 3;
}

/* Headshot crop anchor. The theme only sets
   `.full-image.object-fit-top { object-position: 50% 0% }` inside its
   max-width:479px block, so every width above 480px fell back to the default
   centre crop and sliced the top of the head off in the shallow 4:3 window.
   Anchor the crop to the TOP of the file at every width and let it run
   downward; the 4% keeps a sliver of headroom instead of hair flush to the
   card edge. leap-site.css loads after leap-theme.css, so this also replaces
   the phone rule — the crop is now identical at every breakpoint. */
.provider-card__media .full-image,
.provider-card__media .full-image.object-fit-top {
  object-position: 50% 4%;
}

.provider-carousel .provider-card__body {
  padding: 0.75rem 0.75rem 0.875rem;
}

.provider-carousel .provider-card__name {
  margin-bottom: 0.125rem;
  font-size: 1.0625rem;
}

.provider-carousel .provider-card__specialty {
  font-size: 0.9375rem;
  line-height: 1.35;
}

/* --- Care team: Read More ---------------------------------------------------
   Sits over the bottom-right corner of the headshot and opens the provider's
   bio in the same bottom drawer the services and technology cards use.
   The whole card is a click target for that same drawer (see the
   ".service-card, .provider-card" fallback in leap-foundation.js), so the
   headshot and the name open the bio too, not only the pill. */

.provider-card {
  cursor: pointer;
}

.provider-card__media {
  position: relative;
}

.provider-card__more {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 1px 2px rgb(16 24 40 / 10%), 0 6px 14px -6px rgb(16 24 40 / 25%);
  color: #0b5fa8;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  backdrop-filter: blur(2px);
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.provider-card__more:hover,
.provider-card__more:focus-visible,
.provider-card:hover .provider-card__more {
  background: #0b5fa8;
  color: #fff;
}

.provider-card__more-icon {
  display: inline-flex;
}

/* --- Provider bio pages ----------------------------------------------------
   No hero photo: a 220px headshot cannot carry a full-bleed header, and a flat
   brand panel keeps the white heading readable on every page. */

.provider-hero-fill {
  background-image: linear-gradient(140deg, #0b5fa8, #083f70);
}

.provider-bio__head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.provider-bio__photo {
  width: 7rem;
  height: 8.6rem;
  border-radius: 0.75rem;
  object-fit: cover;
  object-position: top;
  flex: none;
}

.provider-bio__role {
  margin: 0;
  color: #0b5fa8;
}

.provider-bio__where {
  margin: 0.25rem 0 0;
  color: #6b6b6b;
}

.provider-bio__cta {
  margin-top: 1.75rem;
}

/* --- Provider photo fallback -------------------------------------------
   A couple of newly added providers have no headshot on file yet. Same
   brand-blue panel as the bio hero, with initials, sized to fill the same
   box the real headshots use so the card/bio layout doesn't shift. */

.provider-card__initials,
.provider-bio__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #0b5fa8, #083f70);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.provider-card__initials {
  width: 100%;
  height: 100%;
  font-size: 1.75rem;
}

.provider-bio__initials {
  width: 7rem;
  height: 8.6rem;
  border-radius: 0.75rem;
  font-size: 1.75rem;
  flex: none;
}

/* --- Navbar phone dropdown -------------------------------------------------
   The corporate vanity number is the visible label; each location's direct
   line lives in a dropdown. Built on the existing .directions-menu component
   so the click, Escape, outside-click and ArrowDown handling comes for free. */

.site-nav__phone-menu {
  margin-left: 0;
  margin-right: 0;
}

.site-nav__phone-toggle {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.site-nav__phone-caret {
  width: 0.75rem;
  opacity: 0.55;
  transition: transform 180ms ease;
}

.site-nav__phone-menu .directions-menu__toggle.is-open .site-nav__phone-caret {
  transform: rotate(180deg);
}

.site-nav__phone-panel,
.site-nav__phone-panel.is-open {
  right: 0;
  left: auto;
  flex-direction: column;
  width: max-content;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.5rem;
  gap: 0.125rem;
  transform-origin: top right;
}

.site-nav__phone-panel-title {
  padding: 0.5rem 0.75rem 0.375rem;
  color: #6b6b6b;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phone-option {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.phone-option:hover,
.phone-option:focus-visible {
  background-color: #f3f4f6;
}

.phone-option__label {
  color: #6b6b6b;
  font-size: 0.8125rem;
}

.phone-option__number {
  color: #377699;
  font-size: 1rem;
  font-weight: 600;
}

/* Opening is driven by pointer intent in leap-site.js, not by :hover. A wheel
   scroll can drop the :hover state for a frame even though the pointer never
   left the sticky header, and that was closing the panel mid-scroll — JS state
   survives it. Touch and keyboard keep using leap-foundation.js's
   click/ArrowDown handlers, which set the same .is-open class. */
.site-nav__phone-menu.is-open .site-nav__phone-caret {
  transform: rotate(180deg);
}

.site-nav__phone-menu:focus-within > .site-nav__phone-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}

/* The panel hangs 0.75rem below the button. Without a bridge across that dead
   space the pointer leaves the menu on its way down and the panel closes
   before it can be reached. The bridge exists only while the panel is open, so
   it never intercepts clicks on the page underneath. */
.site-nav__phone-menu.is-open::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: max(100%, 15rem);
  height: 0.75rem;
}

/* --- Section tag icons ------------------------------------------------------
   The icon sits inside the pill, to the left of its label. Sized in em so it
   tracks the pill's type, and left on currentColor so it picks up the pill's
   own accent (teal on .section-tag.shine) instead of fighting it. */

.section-tag__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.4em;
  vertical-align: -0.16em;
  flex: none;
}

.section-tag__icon svg {
  width: 100%;
  height: 100%;
}

/* The insurance pill keeps its label in its own <div>, so centre the icon
   against the text there too. */
.feature-tag > div:first-child {
  display: inline-flex;
  align-items: center;
}

/* --- Location cards: office photo behind the text ---------------------------
   Each card shows its own building instead of the flat grey fill. The photo
   sits under a near-solid light wash: enough of the building reads through to
   place the location, but the navy copy and the hours grid keep essentially
   the contrast they had on the old background. */

.location-card--photo {
  background-color: #f4f5f7;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 40%;
}

.location-card--flatbush {
  background-image: linear-gradient(
      rgb(244 245 247 / 88%),
      rgb(244 245 247 / 88%)
    ),
    url("../biz/bewell-20flatbush-20outside-20photo.webp");
}

.location-card--bedford {
  background-image: linear-gradient(
      rgb(244 245 247 / 88%),
      rgb(244 245 247 / 88%)
    ),
    url("../biz/bewell-20bedford-20location-20outside.webp");
}

/* --- Location cards: email --------------------------------------------------
   Sits under the phone line and mirrors it. The address is long, so it steps
   down a size from the phone number and is allowed to break rather than push
   the card wider. */

.location-card__email {
  margin-top: 0.375rem;
  align-items: flex-start;
}

.location-card__email .contact-label {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.location-card__email-icon {
  display: inline-flex;
  width: 1.05rem;
  flex: none;
  color: #6b6b6b;
}

.location-card__email-icon svg {
  width: 100%;
  height: 100%;
}

/* --- Technology cards: the image opens the drawer ---------------------------
   Same target as "Learn more", so the whole picture is clickable. Hidden from
   assistive tech and taken out of the tab order because the "Learn more" link
   right below it already announces the same destination. */

a.technology-card__media {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Legal pages (Terms & Conditions, Privacy Policy) use the waiting-area artwork
   photos, which are bright enough that the default 37% hero scrim leaves the
   white heading under 4.5:1. Deepen the scrim on these pages only. */
[data-leap-page="legal"] .blog-image-overlay {
  background-color: #000000b3;
}

/* Hero value-prop strip.

   The mirrored Webflow build tags each card .loop-move-left and the theme sets
   animation-name: loop-move-left, but no matching @keyframes ever shipped, so
   the cards never moved and leap-foundation.css turned the strip into a
   hand-swipeable scroller instead. Desktop keeps the static 3x2 grid (the track
   wrapper dissolves via display: contents, and the duplicate cards are hidden);
   below 768px the track becomes a continuous marquee. The duplicate set is what
   makes the -50% loop seamless, so the two sets must stay identical. */
.hero__benefits-track {
  display: contents;
}

.hero__benefit--dup {
  display: none;
}

@keyframes leap-hero-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media screen and (max-width: 767px) {
  .hero__benefits {
    overflow-x: hidden;
    scroll-snap-type: none;
  }

  .hero__benefits-track {
    display: flex;
    flex: none;
    align-items: center;
    animation: leap-hero-marquee 30s linear infinite;
  }

  /* margin, not the parent's gap: the loop offset is exactly half the track, so
     every card must carry its own trailing space or the wrap lands 8px short. */
  .hero__benefits-track > .hero__benefit {
    margin-right: 1rem;
  }

  .hero__benefit--dup {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__benefits-track {
    animation: none !important;
  }
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .hero__benefits {
    overflow-x: auto;
  }
}

/* --- Insurance grid: logos were cut off on the right ------------------------
   .insurance-logo carries a fixed width: 11.25rem (180px) from the theme. In
   the two-column mobile grid that 180px plus the tile's own padding is wider
   than half a phone screen, and because a grid item's min-width defaults to
   auto the columns refused to shrink — the second column ran off the right
   edge. Let the tiles shrink and let the logo scale down inside them; the
   inline max-width: 11rem on each img still caps it at full size. */
@media screen and (max-width: 991px) {
  .insurance-section .feature-item {
    min-width: 0;
  }

  .insurance-section .insurance-logo {
    width: 100%;
  }
}

/* --- Testimonials: breathing room before the first card --------------------
   Below 480px .grid-3col turns into an edge-to-edge horizontal scroller and
   the section padding is nullified, so the first card sat flush against the
   screen edge, out of line with the "Testimonials" heading. 1.25rem matches
   the heading row's own mobile padding, so card and heading now share a left
   edge; scroll-padding keeps that inset when the strip snaps back. */
@media screen and (max-width: 479px) {
  #cards.grid-3col {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    scroll-padding-left: 1.25rem;
  }
}

/* --- Hero value-prop cards: no wrapped labels ------------------------------
   The theme pins each card to a fixed 170px below 480px, which broke "Clean
   Environment" onto two lines. The marquee loop is measured off the track, not
   off a per-card width, so the cards can size to their own text instead. */
@media screen and (max-width: 767px) {
  .hero__benefits-track > .hero__benefit {
    width: auto;
  }

  .hero__benefits-track .hero__benefit-label {
    white-space: nowrap;
  }
}

/* ── "Request an Appointment" CTA: animated rainbow gradient ───────────────
   Admin 2026-08-09 asked for the shifting multi-colour treatment used on
   primechoicedental.com. That site's palette/keyframes are reproduced, with the
   salmon and the two cyan stops deepened for label contrast (admin's call,
   see below) — every stop now clears 4.5:1 against the white label.
   WHY THE GRADIENT LIVES ON A ::before AND NOT ON THE BUTTON ITSELF —
   leap-foundation.css (FLEET-SHARED, do not edit) flattens this button with
   `background: linear-gradient(...) !important` for paint cost. That shorthand
   also sets `background-position: 0% 0% !important`, and per the CSS cascade an
   !important AUTHOR declaration outranks a keyframe animation. So any keyframe
   that animates `background-position` on the button element is silently pinned
   at 0% 0% and the button renders as a STATIC gradient — which is exactly what
   the first attempt at this shipped. Adding !important to our own rule cannot
   fix it; !important is the cause, not the cure.
   The fix: paint the animated gradient on a ::before layer that no !important
   rule touches. z-index:-1 + isolation:isolate puts it above the button's own
   background and below the in-flow label, so the label stays fully opaque.
   Respects prefers-reduced-motion (see below). */
.primary-button.animated-gradient-button {
  position: relative;
  isolation: isolate;
  /* Static fallback so the button is never bare if ::before is unsupported.
     Same palette, first and mid stop. */
  background: linear-gradient(-45deg, #164dd6, #0277bd) !important;
}

.primary-button.animated-gradient-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    -45deg,
    #164dd6,
    /* donor stop here was #00bcd4 — 2.30:1 under the white label.
       Deepened to a teal at 4.53:1 (admin, 2026-08-09). */
    #00838f,
    /* donor stop here was #ff8e8e — 2.2:1 under the white label.
       Deepened to a rose that clears 4.5:1 (admin, 2026-08-09). */
    #bf4a5a,
    #4158d0,
    #0277bd,
    /* donor stop here was #26c6da — 2.06:1 under the white label.
       Deepened to a blue-teal at 5.36:1 (admin, 2026-08-09). */
    #0e7490,
    #164dd6
  );
  background-size: 400% 400%;
  animation: leap-gradient-shift 8s ease-in-out infinite;
}

.primary-button.animated-gradient-button:hover::before {
  animation-duration: 3s;
}

@keyframes leap-gradient-shift {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primary-button.animated-gradient-button::before,
  .primary-button.animated-gradient-button:hover::before {
    animation: none;
    background-position: 25% 25%;
  }
}