/* =========================================================================
   Caring Hands — Combined section design language ("Aurora + Cinematic")
   Layered OVER styles.css + each page's inline styles. Hero is never touched.
   Classes (.aur-show / .aur-soft / .vidband) are applied by design-combo.js.
   ========================================================================= */
@keyframes aurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---- Showcase aurora: first content section after the hero ---- */
.aur-show{position:relative;overflow:hidden;
  background:linear-gradient(120deg,#EAF6FF,#F3FBFF,#EAFBF6);
  background-size:200% 200%;animation:aurora 18s ease infinite;}
.aur-show::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(41,171,226,.16),transparent 60%);
  top:-170px;left:-130px;filter:blur(22px);pointer-events:none;z-index:0;}
.aur-show::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(67,214,180,.14),transparent 60%);
  bottom:-170px;right:-130px;filter:blur(22px);pointer-events:none;z-index:0;}
.aur-show > .container{position:relative;z-index:1;}

/* ---- Soft gradient bands (everything else light, gently alternating) ---- */
.aur-soft{background:linear-gradient(180deg,#F6FBFE,#ECF5FB);}
.aur-soft.alt{background:linear-gradient(180deg,#EFF7FE,#E4F0FA);}

/* ---- Contain the decorative section glows so they never cause horizontal scroll
   (their ::before/::after sit at right/left:-130px; clip them to the section). ---- */
.section--cool,.section--warm{position:relative;overflow:hidden;}
html,body{overflow-x:hidden;}

/* ---- Card polish shared across both card systems ---- */
.scard,.card{border-radius:24px;}
.scard{box-shadow:0 14px 40px rgba(41,171,226,.10);}
.card{box-shadow:0 12px 36px rgba(41,171,226,.09);}
.scard:hover,.card:hover{box-shadow:0 30px 70px rgba(41,171,226,.20);}
.scard .ic{border-radius:50% 50% 50% 16px;}

/* ---- Multi-color icon chips (cycle of 6; brand blue stays the lead) ---- */
.scard:nth-child(6n+2) .ic,.card:nth-child(6n+2) .card__ic{background:linear-gradient(150deg,#43D6B4,#1BA98F);box-shadow:0 10px 22px rgba(67,214,180,.40);}
.scard:nth-child(6n+3) .ic,.card:nth-child(6n+3) .card__ic{background:linear-gradient(150deg,#7C9BF5,#4F6FE0);box-shadow:0 10px 22px rgba(124,155,245,.40);}
.scard:nth-child(6n+5) .ic,.card:nth-child(6n+5) .card__ic{background:linear-gradient(150deg,#F58FB4,#E0588F);box-shadow:0 10px 22px rgba(245,143,180,.40);}
.scard:nth-child(6n) .ic,.card:nth-child(6n) .card__ic{background:linear-gradient(150deg,#F5B65C,#E08F2E);box-shadow:0 10px 22px rgba(245,182,92,.40);}

/* =========================================================================
   Cinematic video band — applied to one feature band per page (.vidband)
   ========================================================================= */
.vidband{position:relative;overflow:hidden;background:#0B1F33!important;
  padding-block:clamp(96px,12vw,156px)!important;}
.vidband::before,.vidband::after{content:none!important;display:none!important;} /* kill inherited radial glows */
.vidband .vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.vidband .vov{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,27,45,.84) 0%,rgba(12,82,132,.80) 100%);}
.vidband > .container{position:relative;z-index:2;}
.vidband .section-head .eyebrow{color:#9bdcf7;}
.vidband .section-head .eyebrow::before{background:#9bdcf7;}
.vidband .section-head h2,.vidband .section-head .h-section{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4);}
.vidband .section-head p,.vidband .lead,.vidband .lead *{color:rgba(255,255,255,.9);}
/* cards floating on the video band */
.vidband .card,.vidband .gcard{background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.26)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 22px 54px rgba(0,0,0,.34);}
.vidband .card h3,.vidband .card h4,.vidband .gcard h4{color:#fff;}
.vidband .card p,.vidband .gcard p{color:rgba(255,255,255,.82);}
.vidband .card__link,.vidband .scard a{color:#9bdcf7;}
.vidband .card .tag{background:rgba(255,255,255,.16);color:#fff;}
.vidband .gcard .n{background:none;-webkit-text-fill-color:#fff;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35);}
.vidband .notice{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.22)!important;}
.vidband .notice,.vidband .notice *{color:rgba(255,255,255,.9)!important;}

/* Team cards — large, FULL (uncropped) photo on top + full bio below (About page).
   Masonry columns so the different photo shapes pack without cropping. */
.team { display: block; column-count: 3; column-gap: 24px; max-width: none; margin: 0; }
.member { display: block; break-inside: avoid; margin: 0 0 28px; padding: 0; overflow: hidden; text-align: left; }
.member .av { width: 100%; height: auto; margin: 0; border-radius: 0; font-size: 3.4rem;
  background: linear-gradient(150deg, var(--blue-tint), var(--blue-tint2)); }
.member .av img { width: 100%; height: auto; display: block; border-radius: 0; }
.member .av:not(:has(img)) { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.member__body { padding: 24px 28px 28px; }
.member__body h4 { font-size: 1.32rem; }
.member__body .role { margin-bottom: 12px; }
.member__body p { font-size: .96rem; line-height: 1.72; margin-top: 0; }
@media (max-width: 1024px) { .team { column-count: 2; } }
@media (max-width: 640px) { .team { column-count: 1; max-width: 470px; margin-inline: auto; } }

/* =========================================================================
   MOBILE-ONLY FIXES (≤760px) — desktop view is intentionally untouched
   ========================================================================= */
@media (max-width: 760px) {
  /* 1) Background band videos can crop to show faces on a tall phone screen.
     Hide the video on phones and show the clean dark gradient band instead. */
  .vidband .vbg { display: none !important; }

  /* 1b) HERO videos: on a tall phone the full video height shows, revealing the
     faces that the desktop framing crops out. Zoom in and frame on the face-free
     region so phones match the desktop look. Per-clip focus is set via inline
     --mzoom / --mfocus on each hero <video> (faces sit in different spots per clip).
     Default frames toward the top; Services overrides to the lower hands region.
     Desktop is untouched (no transform there). */
  .cHero--media .cHero__bg { transform: scale(var(--mzoom, 1.7)); transform-origin: center var(--mfocus, 16%); }
  /* MRI: landscape clip with the technician centered — on mobile, pan to the
     scanner on the right (face-free) instead of cropping to the man. */
  .cHero--media .mhero-right { transform: none !important; object-position: 90% center !important; }
  /* Foot Care: the foot sits center-right in the clip — shift the video left
     (pan the crop toward the foot) so it's clearly in frame on mobile. */
  .cHero--media .mhero-left { transform: none !important; object-position: 62% center !important; }

  /* 2) Mobile nav drawer was broken three ways:
     (a) the header's hide-on-scroll transform trapped the fixed drawer,
     (b) the dim overlay (z-index 104) painted over the drawer (trapped at z-100),
     (c) over a transparent navbar the links were white-on-white in the white drawer. */
  body.menu-open .navbar { transform: none !important; z-index: 110 !important; }
  .nav__menu { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav__menu a { color: var(--ink) !important; }
}