/* ==========================================================================
   KEFI HEALTHCARE  ·  SERVICE PAGES
   Shared by the 14 Nursing Care pages (and reusable by the rest).
   Depends on css/style.css for tokens, nav, footer and the page banner.
   ========================================================================== */

/* --------------------------------------------------------------
   1. GRID + UTILITY SHIMS
   The source markup uses a handful of Bootstrap utilities. These
   reimplement exactly the ones in use so the framework is not needed.
   -------------------------------------------------------------- */
.row{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 2.4vw, 36px);
  row-gap: clamp(30px, 4vw, 56px);
}
/* the span sits on the END edge so an offset can still move the start */
.col-lg-5  { grid-column: auto / span 5; }
.col-lg-6  { grid-column: auto / span 6; }
.col-lg-8  { grid-column: auto / span 8; }
.col-lg-10 { grid-column: auto / span 10; }
/* follows a col-lg-6, so it starts one track further along */
.offset-lg-1{ grid-column-start: 8; }
.row.justify-content-center > .col-lg-10{ grid-column: 2 / span 10; }
.row.justify-content-center > .col-lg-8 { grid-column: 3 / span 8; }
.row.align-items-center{ align-items:center; }

/* column ordering (used to put the photo first on wide screens) */
.order-1{ order:1; }
.order-2{ order:2; }
@media (min-width:1025px){
  .order-lg-1{ order:1; }
  .order-lg-2{ order:2; }
}

.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.m-0{ margin:0 !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:1rem; }
.mb-4{ margin-bottom:1.5rem; }
.mb-5{ margin-bottom:2.75rem; }
.mt-3{ margin-top:1rem; }
.mt-4{ margin-top:1.5rem; }
.mt-5{ margin-top:2.75rem; }
.me-2{ margin-right:.5rem; }
.opacity-75{ opacity:.78; }
.section-padding{ padding-block: clamp(62px, 7.5vw, 104px); }

.text-navy{ color: var(--ink); }
.text-muted{ color: var(--ink-3); }
.text-brand{ color: var(--magenta); }
.text-white{ color:#fff; }
.bg-light{ background: var(--paper-2); }

.display-md{
  font-size: clamp(1.75rem, 1.22rem + 1.85vw, 2.55rem);
  line-height:1.14;
  letter-spacing:-.028em;
}
.display-sm{
  font-size: clamp(1.45rem, 1.15rem + 1.05vw, 1.95rem);
  line-height:1.2;
  letter-spacing:-.022em;
}
h3.h4, .h4{
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  line-height:1.3;
}

/* --------------------------------------------------------------
   2. SECTION RHYTHM
   Alternating paper tones keep long pages from flattening out.
   -------------------------------------------------------------- */
.compassionate-care-section,
.iv-intro-section,
.hip-intro-section,
.knee-intro-section,
.hospital-intro-section,
.stroke-intro-section,
.surgical-intro-section,
.transplant-intro-section,
.suture-intro-section{
  position:relative;
  padding-block: clamp(62px, 7.5vw, 104px);
  background:
    radial-gradient(110% 55% at 92% -8%, rgba(187,62,151,.07), transparent 58%),
    radial-gradient(85% 50% at -6% 6%, rgba(90,46,145,.06), transparent 60%),
    var(--paper);
}

.why-choose-us-section,
.iv-types-section,
.care-services-section,
.hospital-services-section,
.stroke-program-section,
.pillars-section,
.aftercare-section,
.value-prop-section,
.procedure-section,
.reasons-section,
.stroke-diff-section{
  position:relative;
  padding-block: clamp(58px, 7vw, 96px);
  background: var(--paper-2);
}

/* hairline seam between stacked bands */
.why-choose-us-section,
.iv-types-section,
.care-services-section,
.hospital-services-section,
.stroke-program-section,
.pillars-section,
.aftercare-section,
.value-prop-section,
.procedure-section,
.reasons-section,
.stroke-diff-section{
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}

/* two tinted bands in a row would read as one: flip the second back */
.reasons-section,
.stroke-diff-section,
.aftercare-section{ background: var(--paper); }

/* unnamed sections in the source carry inline padding/background;
   those attributes are stripped, so anchor them here */
/* Only the three service pages that ship a truly anonymous section. Home page
   sections all carry an id, so they are excluded and keep their own styling. */
section:not([class]):not([id]){
  padding-block: clamp(58px, 7vw, 96px);
  background: var(--paper-2);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}

/* --------------------------------------------------------------
   3. SECTION HEADERS
   -------------------------------------------------------------- */
.section-header.text-center{
  margin-inline:auto;
  text-align:center;
}
.section-header.text-center .section-eyebrow{ justify-content:center; }
.section-header.text-center p{ margin-inline:auto; }

.section-header h2{ margin:0; }

.dark-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-head);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--plum);
  margin-bottom:18px;
}
.dark-eyebrow::before{ content:none; }

/* --------------------------------------------------------------
   4. INTRO SPLIT  (text + image)
   -------------------------------------------------------------- */
.compassionate-intro-grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(30px, 4.4vw, 66px);
  align-items:start;
}

.intro-text-col > h2{ margin:0 0 1.25rem; }

.intro-text-col p{
  font-size:1.02rem;
  line-height:1.82;
  color: var(--ink-3);
}
.intro-text-col p:last-child{ margin-bottom:0; }
.intro-text-col strong{ color: var(--plum); font-weight:700; }

/* Image frame: offset gradient plate behind a rounded photo */
.intro-image-wrapper{
  position:relative;
  border-radius: var(--r-xl);
  isolation:isolate;
}
.intro-image-wrapper::before{
  content:"";
  position:absolute;
  inset:18px -18px -18px 18px;
  border-radius: var(--r-xl);
  background: var(--grad);
  opacity:.16;
  z-index:-1;
}

/* When the photo leads, mirror the offset plate and give the text
   column the wider share so the proportions stay the same both ways. */
@media (min-width:1025px){
  .intro-image-col.order-lg-1 .intro-image-wrapper::before{
    inset:18px 18px -18px -18px;
  }
  .compassionate-intro-grid:has(.intro-image-col.order-lg-1){
    grid-template-columns: .92fr 1.08fr;
  }
}

.intro-image-wrapper > img,
.iv-intro-img,
.hip-intro-img,
.knee-intro-img,
.hospital-intro-img,
.stroke-intro-img,
.surgical-intro-img,
.transplant-intro-img,
.suture-intro-img{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio: 4 / 3.1;
  object-fit:cover;
  border-radius: var(--r-xl);
  border:1px solid var(--line);
  background:
    linear-gradient(120deg, rgba(90,46,145,.10) 0%, rgba(187,62,151,.10) 100%),
    var(--paper-2);
  box-shadow: var(--sh-3);
}

/* A missing photo keeps its own placeholder fill; only the alt text is
   suppressed, so the branded panel stays instead of a broken-image glyph. */
.intro-image-wrapper > img.img-missing,
.iv-intro-img.img-missing,
.hip-intro-img.img-missing,
.knee-intro-img.img-missing,
.hospital-intro-img.img-missing,
.stroke-intro-img.img-missing,
.surgical-intro-img.img-missing,
.transplant-intro-img.img-missing,
.suture-intro-img.img-missing{
  font-size:0;
  color:transparent;
}

/* branded placeholder shows through when a photo is absent */
.intro-image-wrapper,
.col-lg-5.offset-lg-1{ position:relative; }

/* The icon only appears once main.js flags a genuinely missing photo,
   so it never sits on top of real imagery. */
.intro-image-wrapper.has-placeholder::after,
.col-lg-5.has-placeholder::after{
  content:"\f03e";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  top:0; left:0; right:0;
  aspect-ratio: 4 / 3.1;
  display:grid;
  place-items:center;
  font-size:2rem;
  color: rgba(90,46,145,.26);
  border-radius: var(--r-xl);
  z-index:2;
  pointer-events:none;
}

.rounded-image{ border-radius: var(--r-xl); }
.shadow-lg{ box-shadow: var(--sh-3); }

/* Accent card that overlaps the intro image */
.advantage-card,
.specialized-card,
.recovery-plan-card,
.followup-card,
.empowerment-card,
.post-op-goal-card,
.expect-card,
.suture-types-card{
  position:relative;
  z-index:2;
  margin:-46px 22px 0 -22px;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
}
.advantage-card::before,
.specialized-card::before,
.recovery-plan-card::before,
.followup-card::before,
.empowerment-card::before,
.post-op-goal-card::before,
.expect-card::before,
.suture-types-card::before{
  content:"";
  position:absolute;
  left: clamp(22px, 2.4vw, 30px);
  top:0;
  width:44px; height:3px;
  border-radius:0 0 3px 3px;
  background: var(--grad);
}
.advantage-card h4,
.specialized-card h4,
.recovery-plan-card h4,
.followup-card h4,
.empowerment-card h4,
.post-op-goal-card h4,
.expect-card h4,
.suture-types-card h4{
  font-size:1.02rem;
  font-weight:800;
  color: var(--ink);
  margin:0 0 .6rem;
}
.advantage-card p,
.specialized-card p,
.recovery-plan-card p,
.followup-card p,
.empowerment-card p,
.post-op-goal-card p,
.expect-card p,
.suture-types-card p{
  font-size:.93rem;
  line-height:1.75;
  color: var(--ink-3);
  margin:0 0 .7rem;
}
.advantage-card p:last-child,
.specialized-card p:last-child,
.recovery-plan-card p:last-child,
.followup-card p:last-child,
.empowerment-card p:last-child,
.post-op-goal-card p:last-child,
.expect-card p:last-child,
.suture-types-card p:last-child{ margin-bottom:0; }

.suture-types-card strong{ color: var(--plum); font-weight:700; }

/* --------------------------------------------------------------
   5. CALLOUT PANEL
   -------------------------------------------------------------- */
.care-address-box{
  position:relative;
  padding: clamp(24px, 2.8vw, 34px) clamp(24px, 3vw, 38px);
  background: var(--paper-2);
  border:1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow:hidden;
}
.care-address-box::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background: var(--grad);
}
.care-address-box h3{
  font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem);
  font-weight:800;
  color: var(--ink);
  margin:0 0 .85rem;
}
.care-address-box h3 i{ color: var(--magenta); }
.care-address-box p{
  font-size:.97rem;
  line-height:1.8;
  color: var(--ink-3);
}
.care-address-box p:last-child{ margin-bottom:0 !important; }

/* The source styles these bullets inline; that is stripped, and the global
   reset removes markers, so the list gets its own branded bullet here. */
.care-address-box ul{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin:0;
  padding:0;
  list-style:none;
}
.care-address-box ul li{
  position:relative;
  padding-left:26px;
  font-size:.98rem;
  line-height:1.75;
  color: var(--ink-3);
}
.care-address-box ul li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.68em;
  width:8px; height:8px;
  border-radius:50%;
  background: var(--grad);
}

/* inside the image column it becomes a narrower note */
.intro-image-col .care-address-box{ margin-top:1.5rem; }

/* --------------------------------------------------------------
   5b. GROUP HEADINGS INSIDE A LONG SECTION
   Several pages stack two or three card grids in one section with a
   bare h2 between them. Without extra space above, the heading reads
   as part of the grid it follows rather than the one it introduces.
   -------------------------------------------------------------- */
.compassionate-care-section > .container > * + h2{
  margin-top: clamp(30px, 3.6vw, 54px);
  padding-top: clamp(26px, 3vw, 42px);
  border-top:1px solid var(--line-2);
}

/* --------------------------------------------------------------
   6. CARD GRIDS
   -------------------------------------------------------------- */
.care-services-grid,
.iv-types-grid,
.services-grid,
.program-grid,
.pillars-grid,
.transplant-grid,
.aftercare-grid,
.diff-grid,
.tracheostomy-grid,
.disease-grid,
.symptoms-grid,
.visit-grid,
.mv-grid,
.values-grid,
.perks-grid,
.response-grid,
.process-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(286px, 100%), 1fr));
  gap: clamp(18px, 2.1vw, 26px);
  align-items:stretch;
}

.pillars-grid,
.iv-types-grid{ grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* A grid holding only one or two cards would stretch them far wider than the
   cards in the grids around it. auto-fill keeps the track width instead, so
   card size stays consistent down the page. */
.care-services-grid:not(:has(> :nth-child(3))),
.services-grid:not(:has(> :nth-child(3))),
.program-grid:not(:has(> :nth-child(3))),
.transplant-grid:not(:has(> :nth-child(3))),
.aftercare-grid:not(:has(> :nth-child(3))),
.diff-grid:not(:has(> :nth-child(3))),
.tracheostomy-grid:not(:has(> :nth-child(3))),
.disease-grid:not(:has(> :nth-child(3))),
.symptoms-grid:not(:has(> :nth-child(3))),
.visit-grid:not(:has(> :nth-child(3))){
  grid-template-columns: repeat(auto-fill, minmax(min(286px, 100%), 1fr));
}

/* ---- the shared card ---- */
.care-detail-card,
.type-card,
.service-card,
.program-card,
.pillar-card,
.transplant-card,
.aftercare-card,
.diff-card,
.trach-card,
.disease-card,
.symptom-card,
.visit-card,
.mv-card,
.value-item,
.perk-card,
.response-card,
.process-step{
  position:relative;
  display:flex;
  flex-direction:column;
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    border-color .35s var(--ease);
}

/* gradient hairline draws across the top on hover */
.care-detail-card::before,
.type-card::before,
.service-card::before,
.program-card::before,
.pillar-card::before,
.transplant-card::before,
.aftercare-card::before,
.diff-card::before,
.trach-card::before,
.disease-card::before,
.symptom-card::before,
.visit-card::before,
.mv-card::before,
.value-item::before,
.perk-card::before,
.response-card::before,
.process-step::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .5s var(--ease-out);
}

.care-detail-card:hover,
.type-card:hover,
.service-card:hover,
.program-card:hover,
.pillar-card:hover,
.transplant-card:hover,
.aftercare-card:hover,
.diff-card:hover,
.trach-card:hover,
.disease-card:hover,
.symptom-card:hover,
.visit-card:hover,
.mv-card:hover,
.value-item:hover,
.perk-card:hover,
.response-card:hover,
.process-step:hover{
  transform: none;
  border-color: rgba(187,62,151,.26);
  box-shadow: var(--sh-3);
}
.care-detail-card:hover::before,
.type-card:hover::before,
.service-card:hover::before,
.program-card:hover::before,
.pillar-card:hover::before,
.transplant-card:hover::before,
.aftercare-card:hover::before,
.diff-card:hover::before,
.trach-card:hover::before,
.disease-card:hover::before,
.symptom-card:hover::before,
.visit-card:hover::before,
.mv-card:hover::before,
.value-item:hover::before,
.perk-card:hover::before,
.response-card:hover::before,
.process-step:hover::before{ transform: scaleX(1); }

/* ---- card icons ---- */
.care-detail-card > i,
.diff-card > i,
.type-icon,
.service-icon,
.program-icon,
.pillar-icon,
.transplant-icon,
.aftercare-icon,
.trach-icon,
.disease-icon,
.mv-icon,
.value-icon,
.perk-icon,
.response-icon-wrap{
  display:grid;
  place-items:center;
  width:54px; height:54px;
  flex:0 0 auto;
  margin-bottom:20px;
  border-radius:16px;
  background: var(--grad-soft);
  border:1px solid rgba(187,62,151,.16);
  color: var(--plum);
  font-size:1.26rem;
  transition: background .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease), transform .5s var(--ease-out);
}
.type-icon i,
.service-icon i,
.program-icon i,
.pillar-icon i,
.transplant-icon i,
.aftercare-icon i,
.trach-icon i,
.disease-icon i{ font-size:1.26rem; }

.care-detail-card:hover > i,
.diff-card:hover > i,
.type-card:hover .type-icon,
.service-card:hover .service-icon,
.program-card:hover .program-icon,
.pillar-card:hover .pillar-icon,
.transplant-card:hover .transplant-icon,
.aftercare-card:hover .aftercare-icon,
.trach-card:hover .trach-icon,
.disease-card:hover .disease-icon,
.mv-card:hover .mv-icon,
.value-item:hover .value-icon,
.perk-card:hover .perk-icon,
.response-card:hover .response-icon-wrap{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
  transform: none;
}

/* ---- card copy ---- */
.care-detail-card h3, .care-detail-card h4,
.type-card h3, .service-card h3, .program-card h3,
.pillar-card h3, .transplant-card h3,
.aftercare-card h4, .diff-card h4,
.trach-card h4, .trach-card h3,
.disease-card h4, .disease-card h3,
.symptom-card h4, .symptom-card h3,
.mv-card h3, .value-item h4, .perk-card h3, .response-card h3, .process-step h3{
  font-size: clamp(1.02rem, .96rem + .28vw, 1.16rem);
  font-weight:800;
  line-height:1.32;
  letter-spacing:-.015em;
  color: var(--ink);
  margin:0 0 .72rem;
  transition: color .35s var(--ease);
}
.care-detail-card:hover h3, .care-detail-card:hover h4,
.type-card:hover h3, .service-card:hover h3, .program-card:hover h3,
.pillar-card:hover h3, .transplant-card:hover h3,
.aftercare-card:hover h4, .diff-card:hover h4,
.trach-card:hover h4, .disease-card:hover h4,
.mv-card:hover h3, .value-item:hover h4, .perk-card:hover h3,
.response-card:hover h3, .process-step:hover h3{ color: var(--plum); }

.care-detail-card p,
.type-card p, .service-card p, .program-card p,
.pillar-card p, .transplant-card p,
.aftercare-card p, .diff-card p,
.trach-card p, .disease-card p, .symptom-card p,
.mv-card p, .value-item p, .perk-card p, .response-card p, .process-step p{
  font-size:.935rem;
  line-height:1.76;
  color: var(--ink-3);
  margin:0 0 .8rem;
}
.care-detail-card p:last-child,
.type-card p:last-child, .service-card p:last-child,
.program-card p:last-child, .pillar-card p:last-child,
.transplant-card p:last-child, .aftercare-card p:last-child,
.diff-card p:last-child, .trach-card p:last-child,
.disease-card p:last-child, .symptom-card p:last-child,
.mv-card p:last-child, .value-item p:last-child, .perk-card p:last-child,
.response-card p:last-child, .process-step p:last-child{ margin-bottom:0; }

/* symptom cards have no icon: give them a marker so they are not bare */
.symptom-card{ padding-left: clamp(30px, 3vw, 40px); }
.symptom-card::after{
  content:"";
  position:absolute;
  left: clamp(16px, 1.6vw, 20px);
  top: clamp(28px, 2.9vw, 36px);
  width:7px; height:7px;
  border-radius:50%;
  background: var(--grad);
}

/* a card asked to span the full row */
.care-detail-card.full-width-card,
.visit-card.full-width{
  grid-column: 1 / -1;
  flex-direction:row;
  align-items:flex-start;
  gap: clamp(18px, 2vw, 26px);
}
.care-detail-card.full-width-card > i{ margin-bottom:0; }
.full-width-content{ flex:1 1 auto; }

/* ---- numbered cards (wound care visit list) ---- */
.visit-card{ padding-top: clamp(28px, 3vw, 36px); }
.visit-card h3{
  display:flex;
  align-items:center;
  gap:14px;
  font-size: clamp(1rem, .95rem + .28vw, 1.12rem);
}
.visit-card .number{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:13px;
  background: var(--grad-soft);
  border:1px solid rgba(187,62,151,.16);
  font-family: var(--font-head);
  font-size:.95rem;
  font-weight:800;
  color: var(--plum);
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.visit-card:hover .number{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
}

/* --------------------------------------------------------------
   6b. EQUIPMENT CATALOGUE  (medical-equipment)
   A horizontal product card: image panel beside a benefit list.
   -------------------------------------------------------------- */
.equipment-section{
  position:relative;
  padding-block: clamp(62px, 7.5vw, 104px);
  background:
    radial-gradient(110% 55% at 92% -8%, rgba(187,62,151,.07), transparent 58%),
    var(--paper);
}

.equipment-card{
  position:relative;
  display:grid;
  grid-template-columns: minmax(min(230px, 100%), .38fr) 1fr;
  gap: clamp(22px, 2.8vw, 40px);
  align-items:center;
  padding: clamp(20px, 2.2vw, 26px);
  margin-bottom: clamp(18px, 2vw, 24px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-xl);
  overflow:hidden;
  isolation:isolate;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .35s var(--ease);
}
.equipment-card:last-child{ margin-bottom:0; }

.equipment-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .5s var(--ease-out);
}
.equipment-card:hover{
  transform: none;
  border-color: rgba(187,62,151,.26);
  box-shadow: var(--sh-3);
}
.equipment-card:hover::before{ transform: scaleX(1); }

/* Products sit on a tinted panel rather than being cropped. This also keeps
   the source's logo fallback looking deliberate when a photo is missing. */
.equipment-img-col{
  position:relative;
  border-radius: var(--r-lg);
  background:
    linear-gradient(120deg, rgba(90,46,145,.08) 0%, rgba(187,62,151,.08) 100%),
    var(--paper-2);
  border:1px solid var(--line-2);
  overflow:hidden;
}
.equipment-img-col img{
  width:100%;
  aspect-ratio: 4 / 3.2;
  object-fit:contain;
  padding: clamp(14px, 1.6vw, 20px);
  transition: transform .6s var(--ease-out);
}
.equipment-card:hover .equipment-img-col img{ transform: none; }
.equipment-img-col img.img-missing{ font-size:0; color:transparent; }

.equipment-info-col h3{
  font-size: clamp(1.1rem, 1rem + .45vw, 1.34rem);
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.018em;
  color: var(--ink);
  margin:0 0 1rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--line-2);
  transition: color .35s var(--ease);
}
.equipment-card:hover .equipment-info-col h3{ color: var(--plum); }

.equipment-info-col ul{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:0 0 clamp(18px, 2vw, 24px);
  padding:0;
  list-style:none;
}
.equipment-info-col ul li{
  position:relative;
  padding-left:27px;
  font-size:.93rem;
  line-height:1.65;
  color: var(--ink-3);
}
.equipment-info-col ul li::before{
  content:"\f00c";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:0; top:.1em;
  font-size:.62rem;
  width:17px; height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: var(--grad-soft);
  color: var(--plum);
}

.equipment-actions{ display:flex; flex-wrap:wrap; gap:12px; }

.btn-call{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 26px;
  border-radius: var(--r-pill);
  background: var(--grad);
  background-size:170% 100%;
  color:#fff;
  font-family: var(--font-head);
  font-size:.9rem;
  font-weight:700;
  box-shadow: 0 12px 26px -14px rgba(187,62,151,.85);
  transition: background-position .5s var(--ease), transform var(--t), box-shadow var(--t);
}
.btn-call i{ font-size:.82em; transition: transform var(--t); }
.btn-call:hover{
  color:#fff;
  background-position:100% 0;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -14px rgba(187,62,151,.95);
}
.btn-call:hover i{ transform: rotate(-14deg) scale(1.08); }

/* --------------------------------------------------------------
   7. COMPACT CHIP LIST  (care-item)
   -------------------------------------------------------------- */
.care-list-grid,
.disease-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: clamp(12px, 1.4vw, 16px);
}

.care-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease),
              transform .4s var(--ease-out), background .35s var(--ease);
}
.care-item:hover{
  transform: none;
  border-color: rgba(187,62,151,.26);
  box-shadow: var(--sh-2);
}

.care-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:13px;
  background: var(--grad-soft);
  border:1px solid rgba(187,62,151,.16);
  color: var(--plum);
  font-size:1rem;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.care-item:hover .care-icon{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
}

.care-item span{
  font-family: var(--font-head);
  font-size:.93rem;
  font-weight:600;
  line-height:1.5;
  color: var(--ink);
}

/* --------------------------------------------------------------
   8. CHECK LIST  (reason-item)
   -------------------------------------------------------------- */
.reasons-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(12px, 1.5vw, 18px);
}

.reason-item{
  display:flex;
  align-items:flex-start;
  gap:15px;
  padding:18px 22px;
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease-out);
}
.reason-item:hover{
  transform: none;
  border-color: rgba(187,62,151,.26);
  box-shadow: var(--sh-2);
}

.reason-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:26px; height:26px;
  margin-top:2px;
  border-radius:50%;
  background: var(--grad);
  color:#fff;
  font-size:.62rem;
}

.reason-text{
  margin:0;
  font-size:.955rem;
  line-height:1.72;
  color: var(--ink-2);
}

/* --------------------------------------------------------------
   9. PROSE PANEL  (procedure-content)
   -------------------------------------------------------------- */
.procedure-content{
  position:relative;
  padding: clamp(28px, 3.6vw, 48px) clamp(26px, 3.6vw, 52px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}
.procedure-content::before{
  content:"";
  position:absolute;
  left:0; top: clamp(28px, 3.6vw, 48px); bottom: clamp(28px, 3.6vw, 48px);
  width:4px;
  border-radius:0 4px 4px 0;
  background: var(--grad);
}
.procedure-content p{
  font-size:1.01rem;
  line-height:1.85;
  color: var(--ink-2);
}
.procedure-content p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------
   10. FEATURE ROW  (why choose us)
   -------------------------------------------------------------- */
.why-choose-us-section > .container > h2{ margin:0 0 clamp(34px, 4vw, 52px); }

.features-flex{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(226px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}

.feature-block{
  position:relative;
  padding: clamp(26px, 2.8vw, 34px) clamp(20px, 2.2vw, 26px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  text-align:center;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .35s var(--ease);
}
.feature-block:hover{
  transform: none;
  border-color: rgba(187,62,151,.26);
  box-shadow: var(--sh-3);
}

.feature-icon{
  display:grid;
  place-items:center;
  width:62px; height:62px;
  margin:0 auto 20px;
  border-radius:20px;
  background: var(--grad-soft);
  border:1px solid rgba(187,62,151,.16);
  color: var(--plum);
  font-size:1.42rem;
  transition: background .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease), transform .5s var(--ease-out);
}
.feature-block:hover .feature-icon{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
  transform: none;
}

.feature-title{
  font-size:1.03rem;
  font-weight:800;
  color: var(--ink);
  margin:0 0 .6rem;
}
.feature-desc{
  font-size:.92rem;
  line-height:1.72;
  color: var(--ink-3);
  margin:0;
}

/* --------------------------------------------------------------
   11. CTA BLOCKS
   -------------------------------------------------------------- */
.care-cta-final,
.cta-banner{
  position:relative;
  padding: clamp(38px, 4.6vw, 60px) clamp(26px, 4vw, 60px);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, #2B1244 0%, #4A2278 52%, #7E2F86 100%);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}
.cta-banner{
  /* this band runs full bleed between two coloured sections, so the
     breathing room is padding: a margin would show the white body
     through as a stripe above and below it */
  margin-block:0;
  padding-block: clamp(58px, 7vw, 96px);
  padding-inline:0;
  border-radius:0;
}
.cta-banner > .container{
  position:relative;
  z-index:1;
  padding-block: clamp(38px, 4.6vw, 60px);
}

.care-cta-final::after,
.cta-banner::after{
  content:"";
  position:absolute;
  right:-8%; top:-60%;
  width:520px; height:520px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(187,62,151,.45), transparent 64%);
  z-index:-1;
  pointer-events:none;
}
.care-cta-final::before,
.cta-banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:110px 100%;
  pointer-events:none;
}

.care-cta-final h3,
.cta-banner h3{
  position:relative;
  z-index:1;
  color:#fff !important;
  margin:0 0 1rem;
}
.care-cta-final p,
.cta-banner p{
  position:relative;
  z-index:1;
  max-width:62ch;
  margin:0 auto 1.9rem;
  font-size:1.01rem;
  line-height:1.8;
  color: rgba(255,255,255,.78) !important;
}

/* --------------------------------------------------------------
   12. BUTTONS
   -------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:16px 36px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1;
  cursor:pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
}

.btn-primary{
  background: var(--paper);
  color: var(--plum);
  box-shadow: 0 16px 34px -18px rgba(0,0,0,.6);
}
.btn-primary:hover{
  color: var(--plum);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,.7);
}

/* on a light band the primary button flips to the brand gradient */
.compassionate-care-section .btn-primary,
.value-prop-section .btn-primary{
  background: var(--grad);
  background-size:170% 100%;
  color:#fff;
  box-shadow: 0 16px 32px -16px rgba(187,62,151,.85);
}
.compassionate-care-section .care-cta-final .btn-primary,
.value-prop-section .care-cta-final .btn-primary{
  background: var(--paper);
  color: var(--plum);
  box-shadow: 0 16px 34px -18px rgba(0,0,0,.6);
}

.btn-outline-primary{
  background:transparent;
  color: var(--plum);
  border:1.5px solid rgba(90,46,145,.28);
}
.btn-outline-primary:hover{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
  transform: translateY(-2px);
}
.btn-sm{ padding:11px 22px; font-size:.86rem; }

/* a button sitting at the bottom of a card aligns the row */
.care-detail-card .btn{ margin-top:auto; align-self:flex-start; }

/* --------------------------------------------------------------
   12b. SHARED FORM CONTROLS
   Used by the careers application form (#apply). #contact restyles
   these for its dark panel further down.
   -------------------------------------------------------------- */
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

.form-group{
  position:relative;
  margin-bottom:16px;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:19px 18px 8px;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper-2);
  border:1.5px solid var(--line);
  border-radius: var(--r-md);
  outline:none;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.form-group textarea{
  min-height:128px;
  resize:vertical;
  line-height:1.7;
}
.form-group select{
  padding:17px 18px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--plum) 50%),
    linear-gradient(135deg, var(--plum) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% + 1px),
    calc(100% - 16px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color: var(--magenta);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(187,62,151,.10);
}

/* floating labels */
.form-group label{
  position:absolute;
  left:19px;
  top:17px;
  color: var(--ink-3);
  pointer-events:none;
  transform-origin:left top;
  transition: transform .24s var(--ease), color .24s var(--ease);
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label{
  transform: translateY(-10px) scale(.76);
  color: var(--magenta);
}

.btn-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  width:100%;
  padding:18px 30px;
  margin-top:6px;
  border-radius: var(--r-pill);
  background: var(--grad);
  background-size:170% 100%;
  color:#fff;
  font-family: var(--font-head);
  font-weight:700;
  box-shadow: 0 16px 32px -16px rgba(187,62,151,.9);
  transition: background-position .5s var(--ease), transform var(--t), box-shadow var(--t);
}
.btn-submit i{ transition: transform var(--t); }
.btn-submit:hover{
  background-position:100% 0;
  transform: translateY(-3px);
  box-shadow: 0 22px 42px -16px rgba(187,62,151,1);
}
.btn-submit:hover i{ transform: translateX(4px) rotate(8deg); }

/* --------------------------------------------------------------
   13-14. CONTACT SECTION  ("Get in Touch")
   A dark panel: the pitch on the left, a stripped back form on the
   right whose fields are nothing but a rule and a label.
   -------------------------------------------------------------- */
#contact{
  position:relative;
  padding-block: clamp(66px, 8vw, 116px);
  background: #120A1E;
  border-top:0;
  color: rgba(255,255,255,.72);
  overflow:hidden;
  isolation:isolate;
}
#contact::after{
  content:"";
  position:absolute;
  right:-10%; top:-30%;
  width:620px; height:620px;
  border-radius:50%;
  z-index:0;
  background: radial-gradient(circle, rgba(187,62,151,.18), transparent 66%);
  pointer-events:none;
}

/* The heading sits above the two columns again, and the left column keeps
   its original card treatment. Only the form on the right was restyled. */
#contact > .container{
  position:relative;
  z-index:1;
}
#contact .section-header{
  max-width:820px;
  margin-bottom: clamp(40px, 5vw, 66px);
}
#contact .contact-layout{
  display:grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(30px, 4vw, 58px);
  align-items:start;
}

#contact .section-eyebrow{ color:#E9A8D6; }
#contact .section-header h2{ color:#fff; }
#contact .section-header h2 .gradient-text{
  background: linear-gradient(110deg, #FFFFFF 0%, #F6D7EC 45%, #E9A8D6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

#contact .contact-info > p{
  color: rgba(255,255,255,.62);
  margin:0 0 2rem;
  max-width:46ch;
}

#contact .contact-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Soft light panels carrying a solid gradient icon tile, as in the
   reference. The left rule and the lift on hover are the additions:
   they give the row a direction and make it feel touchable. */
#contact .contact-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px 24px;
  background: rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
#contact .contact-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin:center;
  transition: transform .45s var(--ease-out);
}
#contact .contact-card:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(233,168,214,.34);
  transform: none;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.8);
}
#contact .contact-card:hover::before{ transform: scaleY(1); }

/* the icon tile is filled, not tinted */
#contact .contact-card-icon{
  flex:0 0 52px;
  width:52px; height:52px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background: var(--grad);
  border:0;
  color:#fff;
  font-size:1.06rem;
  box-shadow: 0 10px 22px -12px rgba(187,62,151,.9);
  transition: transform .45s var(--ease-out), box-shadow .4s var(--ease);
}
#contact .contact-card:hover .contact-card-icon{
  transform: none;
  box-shadow: 0 14px 28px -12px rgba(187,62,151,1);
}

#contact .contact-card h4{
  color: rgba(255,255,255,.5);
  letter-spacing:.16em;
  margin:0 0 .3rem;
}
#contact .contact-card p{
  color:#fff;
  font-weight:600;
  margin:0;
}
/* the address is the one line long enough to need wrapping room */
#contact .contact-card p{ word-break:normal; overflow-wrap:anywhere; }

/* ---- the form ---- */
#contact .contact-form{
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
#contact .contact-form::before{ display:none; }

#contact .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: clamp(20px, 2.4vw, 34px);
}

/* label above, rule below, nothing else */
#contact .form-group{
  position:relative;
  display:flex;
  flex-direction:column-reverse;
  margin-bottom: clamp(24px, 2.8vw, 36px);
}

#contact .form-group input,
#contact .form-group select,
#contact .form-group textarea{
  width:100%;
  padding:10px 2px;
  background:none;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.28);
  border-radius:0;
  color:#fff;
  box-shadow:none;
  transition: border-color .3s var(--ease);
}
#contact .form-group textarea{ min-height:96px; resize:vertical; }
#contact .form-group select{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
    linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 8px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
#contact .form-group select option{ background:#120A1E; color:#fff; }

#contact .form-group input:focus,
#contact .form-group select:focus,
#contact .form-group textarea:focus{
  outline:none;
  border-bottom-color:#E9A8D6;
  background:none;
  box-shadow:none;
}

/* the label is a plain caption now, not a floating overlay */
#contact .form-group label{
  position:static;
  transform:none;
  margin-bottom:4px;
  color: rgba(255,255,255,.55);
  pointer-events:auto;
  transition: color .3s var(--ease);
}
#contact .form-group:focus-within label{ color:#E9A8D6; }

#contact .form-group input::placeholder,
#contact .form-group textarea::placeholder{ color:transparent; }

/* squared outline button, as in the reference */
#contact .btn-submit{
  width:auto;
  min-width:220px;
  margin-top:8px;
  padding:16px 34px;
  border-radius:4px;
  background:none;
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:none;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), transform .35s var(--ease-out);
}
#contact .btn-submit:hover{
  background:#fff;
  border-color:#fff;
  color:#120A1E;
  transform: translateY(-2px);
  box-shadow:none;
}
#contact .btn-submit:hover i{ transform:none; }

@media (max-width:1024px){
  /* must be at least as specific as the desktop rule above, or the form
     column gets squeezed to nothing on a phone */
  #contact .contact-layout{ grid-template-columns:1fr; }
  #contact .contact-info > p{ max-width:none; }
}

@media (max-width:900px){
  #contact .form-row{ grid-template-columns:1fr; gap:0; }
  #contact .btn-submit{ width:100%; }
  #contact .contact-card:hover{ transform:none; }
}

/* --------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------- */
.faq-section{
  position:relative;
  padding-block: clamp(62px, 7.5vw, 104px);
  background: var(--paper-2);
  border-top:1px solid var(--line-2);
}

.faq-container{ max-width:920px; }

.faq-header{
  text-align:center;
  margin-bottom: clamp(34px, 4vw, 52px);
}
.faq-header .section-eyebrow{ justify-content:center; }
.faq-header h2{ margin:0; }

.faq-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.faq-item{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  overflow:hidden;
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease);
}
.faq-item:hover{ border-color: rgba(187,62,151,.22); }
.faq-item.is-open{
  border-color: rgba(187,62,151,.32);
  box-shadow: var(--sh-2);
}

.faq-question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding: clamp(19px, 2.1vw, 25px) clamp(20px, 2.3vw, 28px);
  text-align:left;
  font-family: var(--font-head);
  font-size: clamp(.97rem, .93rem + .2vw, 1.06rem);
  font-weight:700;
  line-height:1.45;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.faq-question:hover{ color: var(--plum); }
.faq-item.is-open .faq-question{ color: var(--plum); }

/* the source ships an empty div: draw the toggle with pseudo elements */
.faq-icon{
  position:relative;
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:11px;
  background: var(--grad-soft);
  border:1px solid rgba(187,62,151,.16);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .45s var(--ease-out);
}
.faq-icon::before,
.faq-icon::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:12px; height:2px;
  margin:-1px 0 0 -6px;
  border-radius:2px;
  background: var(--plum);
  transition: transform .4s var(--ease-out), background .4s var(--ease);
}
.faq-icon::after{ transform: rotate(90deg); }

.faq-item.is-open .faq-icon{
  background: var(--grad);
  border-color:transparent;
  transform: rotate(180deg);
}
.faq-item.is-open .faq-icon::before,
.faq-item.is-open .faq-icon::after{ background:#fff; }
.faq-item.is-open .faq-icon::after{ transform: rotate(0deg); }

.faq-answer{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease-out);
}
.faq-answer > *{ min-height:0; overflow:hidden; }
.faq-item.is-open .faq-answer{ grid-template-rows: 1fr; }

.faq-answer-inner{
  padding:0 clamp(20px, 2.3vw, 28px);
  font-size:.965rem;
  line-height:1.82;
  color: var(--ink-3);
}
.faq-item.is-open .faq-answer-inner{
  padding-bottom: clamp(20px, 2.3vw, 28px);
}

/* --------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------- */
@media (max-width:1024px){
  /* Collapse to one column. Keeping 12 tracks here would leave the
     combined column gaps wider than the container itself. */
  .row{
    grid-template-columns: 1fr;
    column-gap:0;
    row-gap: clamp(30px, 5vw, 46px);
  }
  .col-lg-5, .col-lg-6, .col-lg-8, .col-lg-10,
  .row.justify-content-center > .col-lg-10,
  .row.justify-content-center > .col-lg-8{ grid-column: auto; }
  .offset-lg-1{ grid-column-start: auto; }

  .compassionate-intro-grid{ grid-template-columns: 1fr; }
  .intro-image-wrapper::before{ inset:14px -14px -14px 14px; }

  .advantage-card, .specialized-card, .recovery-plan-card,
  .followup-card, .empowerment-card, .post-op-goal-card,
  .expect-card, .suture-types-card{ margin:-38px 16px 0 16px; }

  .contact-layout{ grid-template-columns: 1fr; }
  .contact-info > p{ max-width:none; }
}

@media (max-width:768px){
  .mb-5{ margin-bottom:2rem; }
  .mt-5{ margin-top:2rem; }

  .care-detail-card.full-width-card,
  .visit-card.full-width{ flex-direction:column; }
  .care-detail-card.full-width-card > i{ margin-bottom:20px; }

  .form-row{ grid-template-columns: 1fr; gap:0; }

  /* product image stacks above its description */
  .equipment-card{
    grid-template-columns: 1fr;
    align-items:stretch;
  }
  .equipment-card:hover{ transform:none; }
  .equipment-img-col img{ aspect-ratio: 16 / 9; }

  .care-detail-card:hover,
  .type-card:hover, .service-card:hover, .program-card:hover,
  .pillar-card:hover, .transplant-card:hover, .aftercare-card:hover,
  .diff-card:hover, .trach-card:hover, .disease-card:hover,
  .symptom-card:hover, .visit-card:hover,
  .feature-block:hover, .contact-card:hover,
  .reason-item:hover{ transform:none; }
  .care-item:hover{ transform:none; }

  .cta-banner{ margin-block:0; padding-block: clamp(42px, 6vw, 62px); }
}

@media (max-width:560px){
  .care-list-grid,
  .disease-list,
  .reasons-list,
  .features-flex,
  .care-services-grid,
  .iv-types-grid,
  .services-grid,
  .program-grid,
  .pillars-grid,
  .transplant-grid,
  .aftercare-grid,
  .diff-grid,
  .tracheostomy-grid,
  .disease-grid,
  .symptoms-grid,
  .visit-grid{ grid-template-columns: 1fr; }

  .btn{ width:100%; }
  .care-detail-card .btn{ align-self:stretch; }
}

/* ==========================================================================
   NURSING SERVICES PAGES
   Two blocks on these pages share the same classes and are told apart by a
   build time data-grid hook: the Why Choose reasons and the Services list.
   ========================================================================== */

/* ---- the Why Choose heading leads from the left, as in the reference ---- */
.page-nursing-services .compassionate-care-section > .container > h2:has(+ [data-grid="why"]){
  text-align:left !important;
  max-width:18ch;
  margin-bottom: clamp(26px, 3vw, 38px) !important;
}

/* --------------------------------------------------------------
   WHY CHOOSE  ·  dark cards on the light band
   -------------------------------------------------------------- */
/* The class is repeated so this outranks the earlier auto-fill rule for
   grids holding fewer than three cards, which otherwise left a two card
   Why Choose row only two thirds full. */
.care-services-grid[data-grid="why"]{
  display:grid;
  /* two to a row, whatever the card count */
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(18px, 2.1vw, 26px);
  align-items:stretch;
}
@media (max-width:700px){
  .care-services-grid[data-grid="why"]{ grid-template-columns: 1fr; }
}

[data-grid="why"] > .care-detail-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding: clamp(28px, 3vw, 38px);
  background: linear-gradient(160deg, #241038 0%, #35184F 58%, #43205C 100%);
  border:0;
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 24px 48px -30px rgba(36,16,56,.7);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
[data-grid="why"] > .care-detail-card::before{
  /* the shared gradient hairline would be invisible here */
  display:none;
}
[data-grid="why"] > .care-detail-card::after{
  content:"";
  position:absolute;
  right:-18%; top:-46%;
  width:280px; height:280px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(187,62,151,.26), transparent 66%);
  pointer-events:none;
}
[data-grid="why"] > .care-detail-card:hover{
  transform: none;
  box-shadow: 0 32px 60px -28px rgba(36,16,56,.85);
}

/* a light, open icon rather than a filled tile */
[data-grid="why"] > .care-detail-card > i{
  position:relative;
  z-index:1;
  width:auto; height:auto;
  margin:0 0 26px;
  padding:0;
  display:block;
  background:none !important;
  border:0 !important;
  border-radius:0;
  color: rgba(255,255,255,.78) !important;
  font-size:2rem !important;
  transition: color .4s var(--ease), transform .45s var(--ease-out);
}
[data-grid="why"] > .care-detail-card:hover > i{
  color:#F0A8D8 !important;
  transform: none;
}

[data-grid="why"] > .care-detail-card h4{
  position:relative;
  z-index:1;
  color:#fff !important;
  margin:0 0 .7rem;
}
[data-grid="why"] > .care-detail-card:hover h4{ color:#fff !important; }
[data-grid="why"] > .care-detail-card p{
  position:relative;
  z-index:1;
  color: rgba(255,255,255,.68) !important;
  margin:0;
}

/* --------------------------------------------------------------
   SERVICES  ·  bento of mixed tile widths
   -------------------------------------------------------------- */
.care-services-grid[data-grid="services"]{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(14px, 1.6vw, 20px);
  align-items:stretch;
}

/* the first and the sixth tile run double width, so each row reads 2+1+1 */
[data-grid="services"] > .care-detail-card{ grid-column: span 1; }
[data-grid="services"] > .care-detail-card:nth-child(6n+1),
[data-grid="services"] > .care-detail-card:nth-child(6n+6){ grid-column: span 2; }
[data-grid="services"] > .care-detail-card.full-width-card{ grid-column: 1 / -1; }

[data-grid="services"] > .care-detail-card{
  border-radius:10px;
  padding: clamp(22px, 2.3vw, 28px);
}

/* the wide tiles carry a tint so the bento reads as deliberate */
[data-grid="services"] > .care-detail-card:nth-child(6n+1),
[data-grid="services"] > .care-detail-card:nth-child(6n+6),
[data-grid="services"] > .care-detail-card.full-width-card{
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(187,62,151,.09), transparent 62%),
    var(--paper);
  border-color: rgba(187,62,151,.22);
}
[data-grid="services"] > .care-detail-card:nth-child(6n+1) > i,
[data-grid="services"] > .care-detail-card:nth-child(6n+6) > i{
  width:60px; height:60px;
  font-size:1.4rem;
}

@media (max-width:1024px){
  .care-services-grid[data-grid="services"]{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  [data-grid="services"] > .care-detail-card:nth-child(6n+1),
  [data-grid="services"] > .care-detail-card:nth-child(6n+6){ grid-column: span 2; }
}

@media (max-width:620px){
  .care-services-grid[data-grid="services"]{ grid-template-columns: 1fr; }
  [data-grid="services"] > .care-detail-card,
  [data-grid="services"] > .care-detail-card:nth-child(6n+1),
  [data-grid="services"] > .care-detail-card:nth-child(6n+6){ grid-column: span 1; }
  [data-grid="why"] > .care-detail-card:hover{ transform:none; }
  .page-nursing-services .compassionate-care-section > .container > h2:has(+ [data-grid="why"]){
    max-width:none;
  }
}

/* --------------------------------------------------------------
   BENEFITS  ·  two rows of paired tiles
   A twelve column field carries a 7+5 row over a 5+7 row, so the wide
   tile alternates sides. Both tiles in a row share a height, which keeps
   the block even instead of leaving one tall tile half empty.
   -------------------------------------------------------------- */
.care-services-grid[data-grid="benefits"]{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(16px, 1.7vw, 22px);
  align-items:stretch;
}

[data-grid="benefits"] > .care-detail-card{
  grid-column: auto / span 6;
  display:flex;
  flex-direction:column;
  border-radius:10px;
  padding: clamp(24px, 2.4vw, 32px);
  overflow:hidden;
  isolation:isolate;
}

[data-grid="benefits"] > .care-detail-card:nth-child(4n+1),
[data-grid="benefits"] > .care-detail-card:nth-child(4n+4){ grid-column: auto / span 7; }
[data-grid="benefits"] > .care-detail-card:nth-child(4n+2),
[data-grid="benefits"] > .care-detail-card:nth-child(4n+3){ grid-column: auto / span 5; }

/* the lead tile is the dark one, laid out with the icon beside the text
   so the extra width is used rather than left blank */
[data-grid="benefits"] > .care-detail-card:first-child{
  display:grid;
  grid-template-columns: auto minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(18px, 1.9vw, 26px);
  align-content:center;
  background:
    radial-gradient(120% 90% at 92% 6%, rgba(187,62,151,.40), transparent 62%),
    linear-gradient(160deg, #241038 0%, #35184F 58%, #43205C 100%);
  border:0;
}
[data-grid="benefits"] > .care-detail-card:first-child > i{
  grid-row: 1 / span 2;
  width:64px; height:64px;
  font-size:1.5rem;
  margin:0;
  color:#fff;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
[data-grid="benefits"] > .care-detail-card:first-child h4{
  align-self:end;
  margin:0 0 8px;
  color:#fff !important;
}
[data-grid="benefits"] > .care-detail-card:first-child p{
  color: rgba(255,255,255,.72) !important;
  margin:0;
}

/* the remaining three alternate light fills so the block is not flat */
[data-grid="benefits"] > .care-detail-card:nth-child(2){
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(187,62,151,.10), transparent 62%),
    var(--paper);
  border-color: rgba(187,62,151,.22);
}
[data-grid="benefits"] > .care-detail-card:nth-child(3){
  background: var(--paper-3);
  border-color: rgba(90,46,145,.16);
}
[data-grid="benefits"] > .care-detail-card:nth-child(4){
  background:
    radial-gradient(80% 120% at 0% 100%, rgba(90,46,145,.09), transparent 60%),
    var(--paper);
}

[data-grid="benefits"] > .care-detail-card p{ margin:0; }

@media (max-width:1024px){
  [data-grid="benefits"] > .care-detail-card,
  [data-grid="benefits"] > .care-detail-card:nth-child(4n+1),
  [data-grid="benefits"] > .care-detail-card:nth-child(4n+2),
  [data-grid="benefits"] > .care-detail-card:nth-child(4n+3),
  [data-grid="benefits"] > .care-detail-card:nth-child(4n+4){ grid-column: auto / span 6; }
  /* the lead tile and the last tile run full width so neither is left
     stranded beside an empty half */
  [data-grid="benefits"] > .care-detail-card:first-child,
  [data-grid="benefits"] > .care-detail-card:last-child{ grid-column: 1 / -1; }
}

@media (max-width:620px){
  .care-services-grid[data-grid="benefits"]{ grid-template-columns: 1fr; }
  [data-grid="benefits"] > .care-detail-card,
  [data-grid="benefits"] > .care-detail-card:first-child,
  [data-grid="benefits"] > .care-detail-card:nth-child(4n+1),
  [data-grid="benefits"] > .care-detail-card:nth-child(4n+2),
  [data-grid="benefits"] > .care-detail-card:nth-child(4n+3),
  [data-grid="benefits"] > .care-detail-card:nth-child(4n+4){ grid-column: auto / span 1; }
  [data-grid="benefits"] > .care-detail-card:first-child{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap:16px;
  }
  [data-grid="benefits"] > .care-detail-card:first-child > i{ grid-row: auto; }
}

/* --------------------------------------------------------------
   BLUEPRINT BANDS
   The Kefi Advantage, Why Choose Kefi and Warning Signs all borrow the
   drafting board treatment from Build Your Career on the careers page:
   a faint grid behind the band, the heading hard left under a solid
   chip, and the cards framed by a dashed guide.
   -------------------------------------------------------------- */
.care-services-section:has(> .container > .care-list-grid),
.stroke-diff-section,
.why-choose-us-section,
section:has(> .container > .symptoms-grid){
  position:relative;
  padding-block: clamp(58px, 7vw, 96px);
  background: var(--paper);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  overflow:hidden;
}

.care-services-section:has(> .container > .care-list-grid)::before,
.stroke-diff-section::before,
.why-choose-us-section::before,
section:has(> .container > .symptoms-grid)::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* the drafting grid is gone: it was the third frame competing with the
     dashed row outline and the card borders */
  background-image:none;
}

.care-services-section:has(> .container > .care-list-grid) > .container,
.stroke-diff-section > .container,
.why-choose-us-section > .container,
section:has(> .container > .symptoms-grid) > .container{
  position:relative;
  z-index:1;
}

/* ---- heading block: hard left, chip label ---- */
.care-services-section:has(> .container > .care-list-grid) .section-header,
.stroke-diff-section .section-header,
section:has(> .container > .symptoms-grid) > .container > .text-center{
  text-align:left !important;
  margin-inline:0;
  max-width:44ch;
  margin-bottom: clamp(34px, 4vw, 52px);
}

/* this one has no header wrapper, only a bare heading, so the container
   keeps its own centring and just the text swings left */
.why-choose-us-section > .container.text-center{ text-align:left !important; }
.why-choose-us-section > .container > h2{
  margin-bottom: clamp(34px, 4vw, 52px);
}

.care-services-section:has(> .container > .care-list-grid) .section-eyebrow,
.stroke-diff-section .section-eyebrow,
section:has(> .container > .symptoms-grid) .section-eyebrow{
  display:inline-flex;
  justify-content:flex-start;
  padding:7px 13px;
  margin-bottom:18px;
  border-radius:4px;
  background: var(--grad);
  color:#fff;
  letter-spacing:.14em;
}

.care-services-section:has(> .container > .care-list-grid) .section-header p,
.stroke-diff-section .section-header p,
section:has(> .container > .symptoms-grid) > .container > .text-center p{
  margin-inline:0;
  max-width:60ch;
}

/* ---- the framed guide around each row ---- */
.care-list-grid,
.diff-grid,
.features-flex,
.symptoms-grid{
  position:relative;
  display:grid;
  gap: clamp(18px, 2vw, 26px);
  align-items:stretch;
  padding:0;
  margin:0;
}
.care-list-grid::before,
.diff-grid::before,
.features-flex::before,
.symptoms-grid::before{ content:none; }

.care-list-grid,
.features-flex{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.symptoms-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
/* this row carries long copy, so two wide tiles beat four narrow ones */
.diff-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }

/* ---- a card ---- */
.care-list-grid > .care-item,
.diff-grid > .diff-card,
.features-flex > .feature-block,
.symptoms-grid > .symptom-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:0;
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
  transition: border-color .35s var(--ease), box-shadow .45s var(--ease-out);
}
/* the gradient rule wipes along the top edge, doing the brand work the
   heavy purple border used to do */
.care-list-grid > .care-item::before,
.diff-grid > .diff-card::before,
.features-flex > .feature-block::before,
.symptoms-grid > .symptom-card::before{
  content:"";
  display:block;
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .5s var(--ease-out);
}
.care-list-grid > .care-item:hover::before,
.diff-grid > .diff-card:hover::before,
.features-flex > .feature-block:hover::before,
.symptoms-grid > .symptom-card:hover::before{ transform: scaleX(1); }

.care-list-grid > .care-item:hover,
.diff-grid > .diff-card:hover,
.features-flex > .feature-block:hover,
.symptoms-grid > .symptom-card:hover{
  transform:none;
  border-color: rgba(187,62,151,.38);
  box-shadow: 0 22px 44px -28px rgba(58,24,96,.5);
}

/* ---- the filled icon tile ---- */
.care-list-grid > .care-item > .care-icon,
.diff-grid > .diff-card > i,
.features-flex > .feature-block > .feature-icon{
  width: clamp(50px, 4.4vw, 56px);
  aspect-ratio:1;
  height:auto;
  margin:0 0 clamp(18px, 2vw, 24px);
  display:grid;
  place-items:center;
  border:0;
  border-radius:18px;
  background: var(--grad);
  color:#fff;
  font-size:1.14rem;
  box-shadow: 0 14px 26px -16px rgba(187,62,151,.9);
  transition: box-shadow .4s var(--ease-out);
}
.care-list-grid > .care-item > .care-icon i,
.features-flex > .feature-block > .feature-icon i{ font-size:1.12rem; color:#fff; }
.care-list-grid > .care-item > .care-icon::after,
.features-flex > .feature-block > .feature-icon::after{ display:none; }

/* ---- titles: sentence case, ink at rest ---- */
.care-list-grid > .care-item > span,
.diff-grid > .diff-card h4,
.features-flex > .feature-block .feature-title,
.symptoms-grid > .symptom-card h3{
  margin:0 0 .75rem;
  padding:0;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.01em;
  line-height:1.3;
  transition: color .35s var(--ease);
}
.care-list-grid > .care-item:hover > span,
.diff-grid > .diff-card:hover h4,
.features-flex > .feature-block:hover .feature-title,
.symptoms-grid > .symptom-card:hover h3{ color: var(--plum); }

/* the label only cards have nothing after the title */
.care-list-grid > .care-item > span{ margin-bottom:0; }

.diff-grid > .diff-card p,
.features-flex > .feature-block .feature-desc,
.symptoms-grid > .symptom-card p{
  margin:0;
  padding:0;
  color: var(--ink-3);
  max-width:38ch;
}

@media (max-width:1024px){
  .care-list-grid,
  .diff-grid,
  .features-flex,
  .symptoms-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .care-services-section:has(> .container > .care-list-grid) .section-header,
  .stroke-diff-section .section-header,
  section:has(> .container > .symptoms-grid) > .container > .text-center,
  .why-choose-us-section > .container > h2{ max-width:none; }
}

@media (max-width:620px){
  .care-list-grid,
  .diff-grid,
  .features-flex,
  .symptoms-grid{
    grid-template-columns: 1fr;
    padding:12px;
  }
  .diff-grid > .diff-card p,
  .features-flex > .feature-block .feature-desc,
  .symptoms-grid > .symptom-card p{ max-width:none; }
}

/* --------------------------------------------------------------
   BLUEPRINT GRIDS INSIDE SHARED SECTIONS
   These rows sit in sections that also carry other content, so the
   drafting board is drawn inside the dashed frame rather than bled
   across the whole band.
   -------------------------------------------------------------- */
.care-services-grid[data-grid="blueprint"]{
  position:relative;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(18px, 2vw, 26px);
  align-items:stretch;
  padding:0;
  border-radius:0;
  background-image:none;
}
.care-services-grid[data-grid="blueprint"]::before{ content:none; }

/* These headings all carry text-center in the markup; the blueprint
   treatment used to override that to the left to match the dashed
   frame. With the frame gone they follow the markup again. */
.container > h2:has(+ .care-services-grid[data-grid="blueprint"]),
.container > h3:has(+ .care-services-grid[data-grid="blueprint"]),
.container > h2:has(+ p + .care-services-grid[data-grid="blueprint"]){
  margin-inline:auto;
  max-width:26ch;
}

/* ---- a card ---- */
[data-grid="blueprint"] > .care-detail-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
  transition: border-color .35s var(--ease), box-shadow .45s var(--ease-out);
}
[data-grid="blueprint"] > .care-detail-card::before{
  content:"";
  display:block;
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .5s var(--ease-out);
}
[data-grid="blueprint"] > .care-detail-card:hover::before{ transform: scaleX(1); }

[data-grid="blueprint"] > .care-detail-card:hover{
  transform:none;
  border-color: rgba(187,62,151,.38);
  box-shadow: 0 22px 44px -28px rgba(58,24,96,.5);
}

/* ---- the filled square: an icon here, a step number there ---- */
[data-grid="blueprint"] > .care-detail-card > i{
  width: clamp(50px, 4.4vw, 56px);
  aspect-ratio:1;
  height:auto;
  margin:0 0 clamp(18px, 2vw, 24px);
  display:grid;
  place-items:center;
  border:0;
  border-radius:18px;
  background: var(--grad);
  color:#fff;
  font-size:1.14rem;
  line-height:1;
  box-shadow: 0 14px 26px -16px rgba(187,62,151,.9);
  transition: box-shadow .4s var(--ease-out);
}
[data-grid="blueprint"] > .care-detail-card > i::after{ display:none; }

/* ---- titles: sentence case, ink at rest ---- */
[data-grid="blueprint"] > .care-detail-card h4{
  margin:0 0 .75rem;
  padding:0;
  color: var(--ink) !important;
  font-family: var(--font-head);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.01em;
  line-height:1.3;
  transition: color .35s var(--ease);
}
[data-grid="blueprint"] > .care-detail-card:hover h4{ color: var(--plum) !important; }

[data-grid="blueprint"] > .care-detail-card p{
  margin:0;
  padding:0;
  color: var(--ink-3) !important;
  max-width:38ch;
}

@media (max-width:1024px){
  .care-services-grid[data-grid="blueprint"]{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .container > h2:has(+ .care-services-grid[data-grid="blueprint"]),
  .container > h3:has(+ .care-services-grid[data-grid="blueprint"]),
  .container > h2:has(+ p + .care-services-grid[data-grid="blueprint"]){ max-width:none; }
}

@media (max-width:620px){
  .care-services-grid[data-grid="blueprint"]{
    grid-template-columns: 1fr;
    padding:14px;
  }
  [data-grid="blueprint"] > .care-detail-card p{ max-width:none; }
}

/* Each of these rows ends with one card that spans the whole width, so the
   column count is picked to leave no orphan slot in the rows above it. */
.care-services-grid[data-grid="blueprint"]:has(> :nth-child(3)):not(:has(> :nth-child(4))),
.care-services-grid[data-grid="blueprint"]:has(> :nth-child(5)):not(:has(> :nth-child(6))){
  grid-template-columns: repeat(2, minmax(0,1fr));
}

/* the spanning card keeps its side by side layout */
[data-grid="blueprint"] > .care-detail-card.full-width-card{
  grid-column: 1 / -1;
  flex-direction:row;
  align-items:flex-start;
  gap: clamp(18px, 2vw, 26px);
}
[data-grid="blueprint"] > .care-detail-card.full-width-card > i{ margin-bottom:0; }
[data-grid="blueprint"] > .care-detail-card.full-width-card p{ max-width:80ch; }

@media (max-width:620px){
  [data-grid="blueprint"] > .care-detail-card.full-width-card{ flex-direction:column; }
  [data-grid="blueprint"] > .care-detail-card.full-width-card > i{ margin-bottom:20px; }
}

/* the small marker dot belongs to the old card, not the blueprint one */
.symptoms-grid > .symptom-card::after{ display:none; }

/* --------------------------------------------------------------
   MEDICAL EQUIPMENT  ·  stacked cards
   Each card sticks a little lower than the one before it, so the row
   piles up as the page scrolls and the earlier cards stay visible as
   slivers behind the current one.
   -------------------------------------------------------------- */
.equipment-section > .container{ counter-reset: equip; }

.equipment-card{
  position:sticky;
  counter-increment: equip;
  grid-template-columns: minmax(0,1fr) minmax(0,1.08fr);
  gap: clamp(22px, 2.8vw, 44px);
  align-items:stretch;
  min-height: clamp(300px, 32vw, 392px);
  padding: clamp(18px, 2vw, 26px);
  margin-bottom: clamp(20px, 2.4vw, 32px);
  border-radius: clamp(24px, 2.6vw, 34px);
  border-color: rgba(28,18,48,.18);
  box-shadow: 0 -18px 40px -26px rgba(36,16,56,.60);
}

/* every card pins at the same height, so each one lands exactly on
   the card before it and the whole card, button included, stays
   inside the viewport */
.equipment-section .container > .equipment-card{
  top: calc(var(--nav-h) + 20px);
}

/* the entry animation fights the stack, so the stack is the animation */
.equipment-card[data-aos]{ opacity:1 !important; transform:none !important; }

/* text on the left, picture on the right, as in the reference */
.equipment-card > .equipment-info-col{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: clamp(10px, 1.4vw, 22px) clamp(6px, 1vw, 16px);
}
.equipment-card > .equipment-img-col{
  grid-column:2;
  grid-row:1;
  height:100%;
  border-radius: clamp(18px, 1.9vw, 26px);
}
.equipment-card > .equipment-img-col img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:contain;
}

/* the bracketed index above the title */
.equipment-info-col::before{
  content:"[ " counter(equip) " ]";
  display:block;
  text-align:center;
  font-family: var(--font-head);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.2em;
  color: var(--ink-3);
  margin-bottom:14px;
}

.equipment-info-col h3{
  text-align:center;
  margin:0 0 18px;
  padding-bottom:0;
  border-bottom:0;
}

/* the copy is full sentences, so the list stays ranged left inside a
   centred column rather than centring every line */
.equipment-info-col ul{
  max-width:44ch;
  margin-inline:auto;
}

.equipment-actions{ justify-content:center; }

@media (max-width:900px){
  .equipment-card,
  .equipment-section .container > .equipment-card:nth-child(n){
    position:relative;
    top:auto;
    grid-template-columns: 1fr;
    min-height:0;
    box-shadow:none;
  }
  .equipment-card > .equipment-img-col{
    grid-column:1;
    grid-row:1;
    height:auto;
  }
  .equipment-card > .equipment-info-col{
    grid-column:1;
    grid-row:2;
    padding:0;
  }
  .equipment-card > .equipment-img-col img{ aspect-ratio: 4 / 3.2; }
}

/* --------------------------------------------------------------
   The stack on phones. A pinned card only works if the whole card,
   button included, fits on screen, so the picture is sized against
   the viewport height and the spacing tightens up. Screens too short
   to hold a card keep the plain stacked blocks above.
   -------------------------------------------------------------- */
@media (max-width:900px) and (min-height:740px){
  /* :nth-child(n) only to match the specificity of the rule above,
     which switches the stack off for every phone */
  .equipment-section .container > .equipment-card:nth-child(n){
    position:sticky;
    top: calc(var(--nav-h-sm) + 14px);
    gap:16px;
    padding:15px;
    margin-bottom:18px;
    border-radius:22px;
    box-shadow: 0 -16px 34px -24px rgba(36,16,56,.55);
  }
  .equipment-card > .equipment-img-col img{
    height: clamp(104px, 16svh, 158px);
    aspect-ratio:auto;
    object-fit:contain;
    padding:10px;
  }
  .equipment-info-col::before{ margin-bottom:8px; }
  .equipment-info-col h3{ margin-bottom:10px; }
  .equipment-info-col ul{
    gap:6px;
    margin-bottom:14px;
  }
  .equipment-info-col ul li{ line-height:1.5; }
}

/* --------------------------------------------------------------
   THE FORM  ·  one treatment on every page
   Caption above the field, boxed inputs on white, full width submit.
   The panel is light even where the section around it is dark.
   -------------------------------------------------------------- */

/* only groups that carry a caption flip: the select groups hold a
   dropdown arrow instead, and reversing those would lift it above */
.form-group:has(> label){
  display:flex;
  flex-direction:column-reverse;
}
.form-group:has(> label) > label{
  position:static;
  top:auto; left:auto;
  transform:none !important;
  margin:0 0 8px;
  font-family: var(--font-head);
  font-size: var(--fs-small, .875rem);
  font-weight:700;
  color: var(--ink);
  pointer-events:auto;
}

.form-group{ margin-bottom:18px; }

.form-group input,
.form-group textarea{
  padding:14px 16px;
  background:#fff;
  border:1px solid rgba(28,18,48,.14);
  border-radius:8px;
}
.form-group select{
  padding:14px 42px 14px 16px;
  background-color:#fff;
  border:1px solid rgba(28,18,48,.14);
  border-radius:8px;
}
.form-group textarea{ min-height:112px; }

.form-group input::placeholder,
.form-group textarea::placeholder{ color: var(--ink-3); }

.btn-submit{
  width:100%;
  justify-content:center;
  border-radius:8px;
}

/* ---- the light panel inside the dark contact band ---- */
#contact .contact-form{
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--paper);
  border:1px solid rgba(28,18,48,.10);
  border-radius:16px;
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.65);
  overflow:visible;
}

#contact .form-row{ gap:18px; }
#contact .form-group{ margin-bottom:18px; }

#contact .form-group label{
  margin:0 0 8px;
  font-family: var(--font-head);
  font-weight:700;
  color: var(--ink);
}
#contact .form-group:focus-within label{ color: var(--plum); }

#contact .form-group input,
#contact .form-group textarea{
  padding:14px 16px;
  background:#fff;
  border:1px solid rgba(28,18,48,.14);
  border-radius:8px;
  color: var(--ink);
}
#contact .form-group select{
  padding:14px 42px 14px 16px;
  background-color:#fff;
  border:1px solid rgba(28,18,48,.14);
  border-radius:8px;
  color: var(--ink);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--plum) 50%),
    linear-gradient(135deg, var(--plum) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
#contact .form-group select option{ background:#fff; color: var(--ink); }
#contact .form-group textarea{ min-height:112px; }

#contact .form-group input:focus,
#contact .form-group select:focus,
#contact .form-group textarea:focus{
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px rgba(187,62,151,.10);
}

#contact .form-group input::placeholder,
#contact .form-group textarea::placeholder{ color: var(--ink-3); }

#contact .btn-submit{
  width:100%;
  min-width:0;
  justify-content:center;
  padding:16px 28px;
  border-radius:8px;
  border:0;
  background: var(--grad);
  color:#fff;
  text-transform:none;
  letter-spacing:.01em;
}
#contact .btn-submit:hover{
  background: var(--grad);
  color:#fff;
  transform:none;
  box-shadow: 0 18px 34px -18px rgba(187,62,151,.75);
}

@media (max-width:620px){
  #contact .form-row{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------
   HIGHLIGHT BOXES DROP BELOW THE INTRO ROW
   Beside a short column these boxes left a tall empty gap. Letting the
   image column dissolve into the grid puts the picture next to the
   text and the box on its own full width row underneath.
   -------------------------------------------------------------- */
.compassionate-intro-grid:has(> .intro-image-col > .care-address-box) > .intro-image-col{
  display:contents;
}
.compassionate-intro-grid:has(> .intro-image-col > .care-address-box) > .intro-text-col{
  grid-column:1;
  grid-row:1;
}
.compassionate-intro-grid > .intro-image-col > .intro-image-wrapper{
  grid-column:2;
  grid-row:1;
}
.compassionate-intro-grid > .intro-image-col > .care-address-box{
  grid-column: 1 / -1;
  grid-row:2;
  margin-top:0;
}

/* the two pages that use Bootstrap style columns instead */
.stroke-intro-section .row:has(.empowerment-card),
.hospital-intro-section .row:has(.recovery-plan-card){
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(30px, 4.4vw, 66px);
  align-items:start;
}
.stroke-intro-section .row:has(.empowerment-card) > [class*="col-lg-6"],
.hospital-intro-section .row:has(.recovery-plan-card) > [class*="col-lg-6"]{
  grid-column:1;
  grid-row:1;
  max-width:none;
  margin:0;
}
.stroke-intro-section .row:has(.empowerment-card) > [class*="col-lg-5"],
.hospital-intro-section .row:has(.recovery-plan-card) > [class*="col-lg-5"]{
  display:contents;
}
.stroke-intro-img,
.hospital-intro-img{
  grid-column:2;
  grid-row:1;
  width:100%;
}
.empowerment-card,
.recovery-plan-card{
  grid-column: 1 / -1;
  grid-row:2;
  margin-top:0;
}

@media (max-width:900px){
  .compassionate-intro-grid:has(> .intro-image-col > .care-address-box) > .intro-text-col,
  .compassionate-intro-grid > .intro-image-col > .intro-image-wrapper,
  .compassionate-intro-grid > .intro-image-col > .care-address-box,
  .stroke-intro-section .row:has(.empowerment-card) > [class*="col-lg-6"],
  .hospital-intro-section .row:has(.recovery-plan-card) > [class*="col-lg-6"],
  .stroke-intro-img,
  .hospital-intro-img,
  .empowerment-card,
  .recovery-plan-card{
    grid-column: 1 / -1;
    grid-row:auto;
  }
}

/* --------------------------------------------------------------
   SPLIT COLUMN ROWS  ·  the What We Offer treatment
   Heading holds the left column and stays put while the cards scroll
   inside their own column on the right.
   A Wound Care Visit Includes, and Type of Care Provided at KEFI.
   -------------------------------------------------------------- */
.value-prop-section > .container,
section:has(> .container > .tracheostomy-grid) > .container{
  display:grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(34px, 4.6vw, 72px);
  align-items:start;
}

/* the heading column */
.value-prop-section > .container > .row,
section:has(> .container > .tracheostomy-grid) > .container > .text-center{
  margin:0 !important;
  text-align:left !important;
  max-width:none;
}

/* Chrome pins a sticky grid item against the grid container's box rather
   than its own row, so a heading stuck directly on the column would hang
   on beside the closing call to action below it. The column instead
   stretches to its row and the inner block does the sticking, which ends
   the travel where the cards end. */
.value-prop-section > .container > .row{
  align-self:stretch;
  align-items:flex-start !important;
}
.value-prop-section > .container > .row > [class*="col-"]{
  position:sticky;
  top: calc(var(--nav-h) + 34px);
  max-width:none;
  flex:1 1 auto;
}

/* this one has no inner block, but its container holds a single row, so
   pinning the heading itself already stops at the end of the section */
section:has(> .container > .tracheostomy-grid) > .container > .text-center{
  position:sticky;
  top: calc(var(--nav-h) + 34px);
}
section:has(> .container > .tracheostomy-grid) > .container > .text-center p{
  margin-inline:0;
  max-width:42ch;
}

/* Anything else in the container, such as the closing call to action,
   belongs under both columns rather than squeezed into the heading one. */
.value-prop-section > .container > :not(.row):not(.visit-grid),
section:has(> .container > .tracheostomy-grid) > .container > :not(.text-center):not(.tracheostomy-grid){
  grid-column: 1 / -1;
}

/* The stack runs down its own column in the page's own scroll.
   It used to be a 68svh window with overflow-y:auto, which cost more
   than it gave: the wheel was captured until the inner stack bottomed
   out, so the reader could not reach the next section, and because the
   window was a fixed height while the heading beside it is only a
   couple of lines, the column left a tall empty band under the last
   card. Letting the stack flow means the row is exactly as tall as its
   cards and the sticky heading travels the whole way down beside it. */
.visit-grid,
.tracheostomy-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding: 4px 0;
  background-image:none;
  border-radius:0;
}
.visit-grid::before,
.tracheostomy-grid::before{ display:none; }

/* a card reads as a row: marker on the left, copy on the right */
.visit-grid > .visit-card,
.tracheostomy-grid > .trach-card{
  position:relative;
  flex:0 0 auto;
  display:grid;
  grid-template-columns: auto 1fr;
  align-items:start;
  column-gap: clamp(16px, 1.8vw, 22px);
  padding: clamp(22px, 2.4vw, 28px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
  text-align:left;
  transition: border-color .3s var(--ease), box-shadow .4s var(--ease-out);
}

/* the gradient hairline wipes across on hover, as on the home cards */
.visit-grid > .visit-card::before,
.tracheostomy-grid > .trach-card::before{
  content:"";
  display:block;
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .5s var(--ease-out);
}
.visit-grid > .visit-card:hover::before,
.tracheostomy-grid > .trach-card:hover::before{ transform: scaleX(1); }
.visit-grid > .visit-card:hover,
.tracheostomy-grid > .trach-card:hover{
  transform:none;
  border-color: rgba(187,62,151,.3);
  box-shadow: var(--sh-3);
}

/* the icon column */
.tracheostomy-grid > .trach-card > .trach-icon{
  grid-column:1;
  grid-row: 1 / span 2;
  width:52px; height:52px;
  aspect-ratio:auto;
  margin:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:14px;
  background: var(--grad);
  color:#fff;
  font-size:1.2rem;
  line-height:1;
  box-shadow: 0 10px 20px -12px rgba(187,62,151,.85);
  transition:none;
}
.tracheostomy-grid > .trach-card > .trach-icon i{ font-size:1.2rem; color:#fff; }
.tracheostomy-grid > .trach-card > .trach-icon::after{ display:none; }
.tracheostomy-grid > .trach-card h3{ grid-column:2; }
.tracheostomy-grid > .trach-card p{ grid-column:2; }

/* the step number lives inside the heading rather than beside it, so this
   card needs a single column: an empty icon column would indent every
   line by the column gap */
.visit-grid > .visit-card{ grid-template-columns: minmax(0,1fr); }
.visit-grid > .visit-card h3,
.visit-grid > .visit-card p{ grid-column: 1; }
.visit-grid > .visit-card h3{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap: clamp(14px, 1.6vw, 18px);
}
.visit-grid > .visit-card h3 > .number{
  flex:0 0 auto;
  width:52px; height:52px;
  aspect-ratio:auto;
  margin:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:14px;
  background: var(--grad);
  color:#fff;
  font-family: var(--font-head);
  font-size:1.2rem;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  box-shadow: 0 10px 20px -12px rgba(187,62,151,.85);
}

.visit-grid > .visit-card h3,
.tracheostomy-grid > .trach-card h3{
  margin:0 0 .6rem;
  padding:0;
  color: var(--ink) !important;
  font-family: var(--font-head);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.015em;
  line-height:1.3;
  transition: color .3s var(--ease);
}
.visit-grid > .visit-card:hover h3,
.tracheostomy-grid > .trach-card:hover h3{ color: var(--plum) !important; }

.visit-grid > .visit-card p,
.tracheostomy-grid > .trach-card p{
  margin:0 0 .6rem;
  padding:0;
  color: var(--ink-3) !important;
  max-width:none;
}
.visit-grid > .visit-card p:last-child,
.tracheostomy-grid > .trach-card p:last-child{ margin-bottom:0; }

@media (max-width:1024px){
  .value-prop-section > .container,
  section:has(> .container > .tracheostomy-grid) > .container{
    grid-template-columns: 1fr;
  }
  .value-prop-section > .container > .row,
  .value-prop-section > .container > .row > [class*="col-"],
  section:has(> .container > .tracheostomy-grid) > .container > .text-center{
    position:static;
  }
  .value-prop-section > .container > .row,
  section:has(> .container > .tracheostomy-grid) > .container > .text-center{
    margin-bottom: clamp(28px, 4vw, 40px) !important;
  }
  .visit-grid,
  .tracheostomy-grid{
    max-height:none;
    overflow:visible;
    padding:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
}

/* --------------------------------------------------------------
   PAIRED TILE ROWS  ·  the Benefits rhythm, 7+5 over 5+7
   KEFI Stroke Care Program, and Why Choose Kefi for Senior Care.
   -------------------------------------------------------------- */
.program-grid,
.features-flex{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(16px, 1.7vw, 22px);
  align-items:stretch;
  padding:0;
  background-image:none;
}
.program-grid::before,
.features-flex::before{ display:none; }

.program-grid > .program-card,
.features-flex > .feature-block{
  grid-column: auto / span 6;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  /* 16px matches the reframed cards; senior-care shows a reframed grid
     and this quartet on the same page, so two radii read as a slip */
  border-radius:16px;
  padding: clamp(24px, 2.4vw, 32px);
  overflow:hidden;
  isolation:isolate;
  box-shadow:none;
}
.program-grid > .program-card::before,
.features-flex > .feature-block::before{ display:none; }

.features-flex > .feature-block:nth-child(4n+1),
.features-flex > .feature-block:nth-child(4n+4){ grid-column: auto / span 7; }
.features-flex > .feature-block:nth-child(4n+2),
.features-flex > .feature-block:nth-child(4n+3){ grid-column: auto / span 5; }

/* The stroke programme runs four cards of near identical length, so the
   7/5 then 5/7 zigzag read as a mistake rather than a rhythm: the wide
   card changed sides between the rows and no two edges lined up. Equal
   halves give a plain 2x2 whose columns align down the page. */
.program-grid > .program-card{ grid-column: auto / span 6; }

/* the lead tile is dark, with its icon set beside the heading */
.program-grid > .program-card:first-child,
.features-flex > .feature-block:first-child{
  display:grid;
  grid-template-columns: auto minmax(0,1fr);
  column-gap: clamp(18px, 1.9vw, 26px);
  align-content:center;
  background:
    radial-gradient(120% 90% at 92% 6%, rgba(187,62,151,.40), transparent 62%),
    linear-gradient(160deg, #241038 0%, #35184F 58%, #43205C 100%);
  border:0;
}
/* a second paragraph would otherwise wrap into the icon column */
.program-grid > .program-card:first-child > :not(.program-icon),
.features-flex > .feature-block:first-child > :not(.feature-icon){ grid-column:2; }
.program-grid > .program-card:first-child > .program-icon,
.features-flex > .feature-block:first-child > .feature-icon{
  grid-column:1;
  grid-row: 1 / -1;
  align-self:center;
  margin:0;
  color:#fff;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
.program-grid > .program-card:first-child h3,
.features-flex > .feature-block:first-child .feature-title{
  margin:0 0 8px;
  color:#fff !important;
}
.program-grid > .program-card:first-child p,
.features-flex > .feature-block:first-child .feature-desc{
  color: rgba(255,255,255,.72) !important;
}

/* The stroke lead tile keeps the dark ground but drops the icon-beside,
   vertically centred layout. Its three neighbours set their icon above
   the heading and start at the top, so centring this one left a band of
   empty tile above and below the copy and none of the four headings sat
   on the same line. */
.program-grid > .program-card:first-child{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  align-content:normal;
}
.program-grid > .program-card:first-child > :not(.program-icon){ grid-column:auto; }
.program-grid > .program-card:first-child > .program-icon{
  grid-column:auto;
  grid-row:auto;
  align-self:flex-start;
  margin:0 0 clamp(16px, 1.6vw, 20px);
}

.program-grid > .program-card:nth-child(3n+2),
.features-flex > .feature-block:nth-child(3n+2){
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(187,62,151,.10), transparent 62%),
    var(--paper);
  border:1px solid rgba(187,62,151,.22);
}
.program-grid > .program-card:nth-child(3n+3),
.features-flex > .feature-block:nth-child(3n+3){
  background: var(--paper-3);
  border:1px solid rgba(90,46,145,.16);
}
.program-grid > .program-card:nth-child(3n+4),
.features-flex > .feature-block:nth-child(3n+4){
  background:
    radial-gradient(80% 120% at 0% 100%, rgba(90,46,145,.09), transparent 60%),
    var(--paper);
  border:1px solid var(--line);
}

.features-flex > .feature-block .feature-title{
  margin:0 0 .7rem;
  color: var(--ink) !important;
  font-family: var(--font-head);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.015em;
  line-height:1.3;
}
.features-flex > .feature-block .feature-desc{
  margin:0;
  color: var(--ink-3) !important;
  max-width:none;
}

.program-grid > .program-card:hover,
.features-flex > .feature-block:hover{
  transform:none;
  border-color: var(--magenta);
  box-shadow: 0 16px 34px -20px rgba(58,24,96,.45);
}
.program-grid > .program-card:first-child:hover,
.features-flex > .feature-block:first-child:hover{ border:0; }

@media (max-width:1024px){
  .program-grid > .program-card,
  .program-grid > .program-card:nth-child(4n+1),
  .program-grid > .program-card:nth-child(4n+2),
  .program-grid > .program-card:nth-child(4n+3),
  .program-grid > .program-card:nth-child(4n+4),
  .features-flex > .feature-block,
  .features-flex > .feature-block:nth-child(4n+1),
  .features-flex > .feature-block:nth-child(4n+2),
  .features-flex > .feature-block:nth-child(4n+3),
  .features-flex > .feature-block:nth-child(4n+4){ grid-column: auto / span 6; }
  /* .program-grid keeps its 2x2 here. Promoting the lead to full width
     would leave the fourth card alone on a half width row. */
  .features-flex > .feature-block:first-child{ grid-column: 1 / -1; }
}

@media (max-width:620px){
  .program-grid,
  .features-flex{ grid-template-columns: 1fr; }
  .program-grid > .program-card,
  .program-grid > .program-card:first-child,
  .program-grid > .program-card:nth-child(4n+1),
  .program-grid > .program-card:nth-child(4n+2),
  .program-grid > .program-card:nth-child(4n+3),
  .program-grid > .program-card:nth-child(4n+4),
  .features-flex > .feature-block,
  .features-flex > .feature-block:first-child,
  .features-flex > .feature-block:nth-child(4n+1),
  .features-flex > .feature-block:nth-child(4n+2),
  .features-flex > .feature-block:nth-child(4n+3),
  .features-flex > .feature-block:nth-child(4n+4){
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
  .program-grid > .program-card:first-child > .program-icon,
  .features-flex > .feature-block:first-child > .feature-icon{
    grid-column:1;
    grid-row:auto;
    margin-bottom:16px;
  }
  .program-grid > .program-card:first-child > :not(.program-icon),
  .features-flex > .feature-block:first-child > :not(.feature-icon){ grid-column:1; }
}

/* --------------------------------------------------------------
   EVEN QUARTET
   Four cards of one size read as a set. Our Specialized Care Plans
   and We Help You With both hold exactly four, so a two by two of
   matched tiles balances where a mixed bento left an odd one out.
   -------------------------------------------------------------- */
.disease-grid,
.hospital-services-section .services-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(18px, 2vw, 26px);
  align-items:stretch;
  padding:0;
  background-image:none;
}

/* Our Specialized Care Plans runs two paragraphs per card and they are
   nowhere near the same length: 218 characters against 540. Stretched to
   a shared row height, the shorter card carried close to 300px of empty
   tile inside its own border, which is what read as unbalanced. Each
   card now ends where its copy ends, so the space falls between the
   cards instead of inside them, and the two columns are set on their own
   tracks so a long card no longer drags its neighbour's height with it. */
.disease-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-items:start;
}
.disease-grid::before,
.hospital-services-section .services-grid::before{ display:none; }

.disease-grid > .disease-card,
.hospital-services-section .services-grid > .service-card{
  grid-column: auto / span 1;
  display:grid;
  grid-template-columns: auto minmax(0,1fr);
  column-gap: clamp(18px, 1.9vw, 24px);
  align-content:start;
  text-align:left;
  border-radius:14px;
  padding: clamp(24px, 2.5vw, 34px);
  background: var(--paper);
  border:1px solid var(--line);
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease);
}
.disease-grid > .disease-card::before,
.hospital-services-section .services-grid > .service-card::before{ display:none; }

/* the icon holds its own column so a second paragraph stays aligned */
.disease-grid > .disease-card > .disease-icon,
.hospital-services-section .services-grid > .service-card > .service-icon{
  grid-column:1;
  grid-row: 1 / -1;
  width:54px; height:54px;
  aspect-ratio:auto;
  margin:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:14px;
  background: var(--grad);
  color:#fff;
  font-size:1.25rem;
  line-height:1;
  box-shadow: 0 10px 20px -12px rgba(187,62,151,.85);
  transition:none;
}
.disease-grid > .disease-card > .disease-icon i,
.hospital-services-section .services-grid > .service-card > .service-icon i{
  font-size:1.25rem;
  color:#fff;
}
.disease-grid > .disease-card > .disease-icon::after,
.hospital-services-section .services-grid > .service-card > .service-icon::after{ display:none; }

.disease-grid > .disease-card > :not(.disease-icon),
.hospital-services-section .services-grid > .service-card > :not(.service-icon){ grid-column:2; }

.disease-grid > .disease-card h3,
.hospital-services-section .services-grid > .service-card h3{
  margin:0 0 .7rem;
  padding:0;
  color: var(--ink) !important;
  font-family: var(--font-head);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.015em;
  line-height:1.3;
  transition: color .35s var(--ease);
}
.disease-grid > .disease-card p,
.hospital-services-section .services-grid > .service-card p{
  margin:0 0 .6rem;
  padding:0;
  color: var(--ink-3) !important;
  max-width:none;
}
.disease-grid > .disease-card p:last-child,
.hospital-services-section .services-grid > .service-card p:last-child{ margin-bottom:0; }

.disease-grid > .disease-card:hover,
.hospital-services-section .services-grid > .service-card:hover{
  transform:none;
  border-color: rgba(187,62,151,.26);
  box-shadow: var(--sh-3);
}
.disease-grid > .disease-card:hover h3,
.hospital-services-section .services-grid > .service-card:hover h3{ color: var(--plum) !important; }

@media (max-width:620px){
  .disease-grid,
  .hospital-services-section .services-grid{ grid-template-columns: 1fr; }
  .disease-grid > .disease-card,
  .hospital-services-section .services-grid > .service-card{
    grid-template-columns: 1fr;
    row-gap:16px;
  }
  .disease-grid > .disease-card > .disease-icon,
  .hospital-services-section .services-grid > .service-card > .service-icon{
    grid-column:1;
    grid-row:auto;
  }
  .disease-grid > .disease-card > :not(.disease-icon),
  .hospital-services-section .services-grid > .service-card > :not(.service-icon){ grid-column:1; }
}

/* --------------------------------------------------------------
   SURGICAL AND RECOVERY
   -------------------------------------------------------------- */

/* 1. The highlight card beside the intro picture drops under the row.
   Eight pages share this shape, so the rule is keyed on the shape
   rather than on each page's card class. */
.row:has(> [class*="col-lg-5"] > div[class*="-card"]){
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(30px, 4.4vw, 66px);
  align-items:start;
}
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-6"]{
  grid-column:1;
  grid-row:1;
  max-width:none;
  margin:0;
}
/* the picture column dissolves so its two children place themselves */
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"]{
  display:contents;
}
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > img{
  grid-column:2;
  grid-row:1;
  width:100%;
}
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > div[class*="-card"]{
  grid-column: 1 / -1;
  grid-row:2;
  margin-top:0;
}

@media (max-width:900px){
  .row:has(> [class*="col-lg-5"] > div[class*="-card"]){ grid-template-columns: 1fr; }
  .row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-6"],
  .row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > img,
  .row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > div[class*="-card"]{
    grid-column: 1 / -1;
    grid-row:auto;
  }
}

/* --------------------------------------------------------------
   2. What To Expect During Removal  ·  the Care at Its Most
   Comfortable treatment: a spine of numbered steps on the left with
   the heading holding its own column beside them.
   -------------------------------------------------------------- */
.procedure-section > .container{
  display:grid;
  /* the heading column first, the steps beside it */
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(34px, 5vw, 72px);
  align-items:start;
}
.procedure-section > .container > .section-header{
  position:sticky;
  top: calc(var(--nav-h) + 40px);
  grid-column:1;
  grid-row:1;
  margin:0 !important;
  text-align:left !important;
  max-width:none;
}
.procedure-section > .container > .row{
  grid-column:2;
  grid-row:1;
  margin:0;
  display:block;
}
.procedure-section > .container > .row > [class*="col-"]{
  max-width:none;
  flex:1 1 auto;
  padding:0;
}

/* the steps */
.procedure-section .procedure-content{
  position:relative;
  counter-reset: step;
  padding-left:46px;
}
.procedure-section .procedure-content::before{
  content:"";
  position:absolute;
  left:19px; top:10px; bottom:10px;
  width:2px;
  border-radius:2px;
  background: linear-gradient(to bottom,
    rgba(187,62,151,.45), rgba(90,46,145,.28) 60%, transparent);
}
.procedure-section .procedure-content > p{
  position:relative;
  counter-increment: step;
  margin:0 0 clamp(26px, 3vw, 38px);
  color: var(--ink-3);
}
.procedure-section .procedure-content > p:last-child{ margin-bottom:0; }
.procedure-section .procedure-content > p::before{
  content: counter(step);
  position:absolute;
  left:-46px; top:-2px;
  width:40px; height:40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background: var(--paper);
  border:1px solid rgba(187,62,151,.24);
  color: var(--plum);
  font-family: var(--font-head);
  font-size:.94rem;
  font-weight:800;
  box-shadow: 0 0 0 5px var(--paper-2);
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease);
}
.procedure-section .procedure-content > p:hover::before{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
}

@media (max-width:1024px){
  .procedure-section > .container{ grid-template-columns: 1fr; }
  .procedure-section > .container > .section-header{
    position:static;
    grid-column:1;
    grid-row:1;
    margin-bottom: clamp(28px, 4vw, 40px) !important;
  }
  .procedure-section > .container > .row{ grid-column:1; grid-row:2; }
}
@media (max-width:620px){
  .procedure-section .procedure-content{ padding-left:34px; }
  .procedure-section .procedure-content::before{ left:13px; }
  .procedure-section .procedure-content > p::before{
    left:-34px;
    width:30px; height:30px;
    border-radius:10px;
    font-size:.82rem;
    box-shadow: 0 0 0 4px var(--paper-2);
  }
}

/* --------------------------------------------------------------
   3. After Suture/Staple Removal  ·  the Why Choose a Day Care
   Centre treatment: two dark cards to a row.
   -------------------------------------------------------------- */
.aftercare-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(18px, 2.1vw, 26px);
  align-items:stretch;
}
.aftercare-grid > .aftercare-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  grid-column:auto;
  padding: clamp(28px, 3vw, 38px);
  background: linear-gradient(160deg, #241038 0%, #35184F 58%, #43205C 100%);
  border:0;
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 24px 48px -30px rgba(36,16,56,.7);
  transition: box-shadow .45s var(--ease-out);
}
.aftercare-grid > .aftercare-card::before{ display:none; }
.aftercare-grid > .aftercare-card::after{
  content:"";
  position:absolute;
  right:-18%; top:-46%;
  width:280px; height:280px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(187,62,151,.26), transparent 66%);
  pointer-events:none;
}
.aftercare-grid > .aftercare-card:hover{
  transform:none;
  box-shadow: 0 32px 60px -28px rgba(36,16,56,.85);
}

/* a light, open icon rather than a filled tile */
.aftercare-grid > .aftercare-card > .aftercare-icon{
  position:relative;
  z-index:1;
  width:auto; height:auto;
  aspect-ratio:auto;
  margin:0 0 26px;
  padding:0;
  display:block;
  background:none !important;
  border:0 !important;
  border-radius:0;
  box-shadow:none;
  color: rgba(255,255,255,.78) !important;
  font-size:2rem !important;
  transition: color .4s var(--ease);
}
.aftercare-grid > .aftercare-card > .aftercare-icon i{
  color: rgba(255,255,255,.78) !important;
  font-size:2rem !important;
}
.aftercare-grid > .aftercare-card > .aftercare-icon::after{ display:none; }
.aftercare-grid > .aftercare-card:hover > .aftercare-icon i{ color:#F0A8D8 !important; }

.aftercare-grid > .aftercare-card h4{
  position:relative;
  z-index:1;
  margin:0 0 .7rem;
  color:#fff !important;
  font-family: var(--font-head);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.015em;
  line-height:1.3;
}
.aftercare-grid > .aftercare-card:hover h4{ color:#fff !important; }
.aftercare-grid > .aftercare-card p{
  position:relative;
  z-index:1;
  margin:0;
  color: rgba(255,255,255,.68) !important;
  max-width:none;
}

@media (max-width:700px){
  .aftercare-grid{ grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------
   4. Comprehensive Recovery Program  ·  the Benefits of KEFI's
   Palliative Care rhythm: 7+5 over 5+7, lead tile dark.
   -------------------------------------------------------------- */
.transplant-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(16px, 1.7vw, 22px);
  align-items:stretch;
}
.transplant-grid > .transplant-card{
  grid-column: auto / span 6;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  border-radius:10px;
  padding: clamp(24px, 2.4vw, 32px);
  overflow:hidden;
  isolation:isolate;
  box-shadow:none;
}
.transplant-grid > .transplant-card::before{ display:none; }

.transplant-grid > .transplant-card:nth-child(4n+1),
.transplant-grid > .transplant-card:nth-child(4n+4){ grid-column: auto / span 7; }
.transplant-grid > .transplant-card:nth-child(4n+2),
.transplant-grid > .transplant-card:nth-child(4n+3){ grid-column: auto / span 5; }

.transplant-grid > .transplant-card:first-child{
  display:grid;
  grid-template-columns: auto minmax(0,1fr);
  column-gap: clamp(18px, 1.9vw, 26px);
  align-content:center;
  background:
    radial-gradient(120% 90% at 92% 6%, rgba(187,62,151,.40), transparent 62%),
    linear-gradient(160deg, #241038 0%, #35184F 58%, #43205C 100%);
  border:0;
}
.transplant-grid > .transplant-card:first-child > :not(.transplant-icon){ grid-column:2; }
.transplant-grid > .transplant-card:first-child > .transplant-icon{
  grid-column:1;
  grid-row: 1 / -1;
  align-self:center;
  margin:0;
  color:#fff;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
.transplant-grid > .transplant-card:first-child h3{
  margin:0 0 8px;
  color:#fff !important;
}
.transplant-grid > .transplant-card:first-child p{ color: rgba(255,255,255,.72) !important; }

.transplant-grid > .transplant-card:nth-child(3n+2){
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(187,62,151,.10), transparent 62%),
    var(--paper);
  border:1px solid rgba(187,62,151,.22);
}
.transplant-grid > .transplant-card:nth-child(3n+3){
  background: var(--paper-3);
  border:1px solid rgba(90,46,145,.16);
}
.transplant-grid > .transplant-card:nth-child(3n+4){
  background:
    radial-gradient(80% 120% at 0% 100%, rgba(90,46,145,.09), transparent 60%),
    var(--paper);
  border:1px solid var(--line);
}

.transplant-grid > .transplant-card h3{
  margin:0 0 .7rem;
  color: var(--ink) !important;
  font-family: var(--font-head);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.015em;
  line-height:1.3;
}
.transplant-grid > .transplant-card p{
  margin:0;
  color: var(--ink-3) !important;
  max-width:none;
}

.transplant-grid > .transplant-card:hover{
  transform:none;
  border-color: var(--magenta);
  box-shadow: 0 16px 34px -20px rgba(58,24,96,.45);
}
.transplant-grid > .transplant-card:first-child:hover{ border:0; }

@media (max-width:1024px){
  .transplant-grid > .transplant-card,
  .transplant-grid > .transplant-card:nth-child(4n+1),
  .transplant-grid > .transplant-card:nth-child(4n+2),
  .transplant-grid > .transplant-card:nth-child(4n+3),
  .transplant-grid > .transplant-card:nth-child(4n+4){ grid-column: auto / span 6; }
  .transplant-grid > .transplant-card:first-child{ grid-column: 1 / -1; }
}
@media (max-width:620px){
  .transplant-grid{ grid-template-columns: 1fr; }
  .transplant-grid > .transplant-card,
  .transplant-grid > .transplant-card:first-child,
  .transplant-grid > .transplant-card:nth-child(4n+1),
  .transplant-grid > .transplant-card:nth-child(4n+2),
  .transplant-grid > .transplant-card:nth-child(4n+3),
  .transplant-grid > .transplant-card:nth-child(4n+4){
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
  .transplant-grid > .transplant-card:first-child > .transplant-icon{
    grid-column:1;
    grid-row:auto;
    margin-bottom:16px;
  }
  .transplant-grid > .transplant-card:first-child > :not(.transplant-icon){ grid-column:1; }
}

/* --------------------------------------------------------------
   The highlight card under the intro row: square it up with the rest
   of the page, and give it a hover of its own. It used to overlap the
   picture, which is where the side offsets came from.
   -------------------------------------------------------------- */
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > div[class*="-card"]{
  margin:0;
  transition: border-color .35s var(--ease), box-shadow .45s var(--ease-out),
              background .35s var(--ease);
}
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > div[class*="-card"]:hover{
  border-color: rgba(187,62,151,.34);
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(187,62,151,.07), transparent 62%),
    var(--paper);
  box-shadow: 0 40px 72px -34px rgba(58,24,96,.46);
}
/* the marker bar above the heading widens and brightens */
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > div[class*="-card"]::before{
  transition: width .45s var(--ease-out), opacity .35s var(--ease);
}
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > div[class*="-card"]:hover::before{
  width:72px;
}
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > div[class*="-card"] h3,
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > div[class*="-card"] h4{
  transition: color .35s var(--ease);
}
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > div[class*="-card"]:hover h3,
.row:has(> [class*="col-lg-5"] > div[class*="-card"]) > [class*="col-lg-5"] > div[class*="-card"]:hover h4{
  color: var(--plum) !important;
}

/* --------------------------------------------------------------
   PHYSIOTHERAPY AT HOME
   -------------------------------------------------------------- */

/* 1. The highlight box under the intro row had no hover of its own.
   Colour and the marker bar only, as everywhere else on the site. */
/* the box sits in the picture column on some pages and directly in the
   container on others, so the hover belongs to the component itself */
.care-address-box{
  transition: border-color .35s var(--ease), box-shadow .45s var(--ease-out),
              background .35s var(--ease);
}
.care-address-box:hover{
  border-color: rgba(187,62,151,.28);
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(187,62,151,.07), transparent 62%),
    var(--paper);
  box-shadow: 0 30px 60px -34px rgba(58,24,96,.40);
}
.care-address-box::before{
  transition: width .45s var(--ease-out);
}
.care-address-box:hover::before{ width:7px; }
.care-address-box h3{
  transition: color .35s var(--ease);
}
.care-address-box:hover h3{ color: var(--plum); }

/* --------------------------------------------------------------
   3. Services Offered by KEFI, KEFI's Physiotherapy Services and
   KEFI's Rehabilitation Services take the What We Offer treatment.
   These live in sections that carry plenty of other blocks, so the
   container becomes a twelve column field where everything still
   spans the full width and only this heading and its stack pair up.
   -------------------------------------------------------------- */
.container:has(> [data-grid="offer"]){
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  column-gap: clamp(34px, 4.6vw, 72px);
  align-items:start;
}
.container:has(> [data-grid="offer"]) > *{ grid-column: 1 / -1; }

.container > .offer-head{
  grid-column: 1 / span 5;
  align-self:stretch;
}
.offer-head > h2{
  position:sticky;
  top: calc(var(--nav-h) + 40px);
  margin:0 !important;
  text-align:left !important;
  max-width:none;
}

/* flows in the page for the same reason as .visit-grid above: an inner
   scroller here swallowed the wheel and stopped the reader reaching the
   next section */
.care-services-grid[data-grid="offer"]{
  grid-column: 6 / -1;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding: 4px 0;
}

/* a card reads as a row: icon on the left, copy on the right */
[data-grid="offer"] > .care-detail-card{
  position:relative;
  flex:0 0 auto;
  display:grid;
  grid-template-columns: auto 1fr;
  align-items:start;
  column-gap: clamp(16px, 1.8vw, 22px);
  padding: clamp(22px, 2.4vw, 28px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
  text-align:left;
  transition: border-color .3s var(--ease), box-shadow .4s var(--ease-out);
}
[data-grid="offer"] > .care-detail-card::before{
  content:"";
  display:block;
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .5s var(--ease-out);
}
[data-grid="offer"] > .care-detail-card:hover::before{ transform: scaleX(1); }
[data-grid="offer"] > .care-detail-card:hover{
  transform:none;
  border-color: rgba(187,62,151,.3);
  box-shadow: var(--sh-3);
}

[data-grid="offer"] > .care-detail-card > i{
  grid-column:1;
  grid-row: 1 / span 2;
  width:52px; height:52px;
  aspect-ratio:auto;
  margin:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:14px;
  background: var(--grad);
  color:#fff;
  font-size:1.2rem;
  line-height:1;
  box-shadow: 0 10px 20px -12px rgba(187,62,151,.85);
  transition:none;
}
[data-grid="offer"] > .care-detail-card > i::after{ display:none; }
[data-grid="offer"] > .care-detail-card h4,
[data-grid="offer"] > .care-detail-card p{ grid-column:2; }

[data-grid="offer"] > .care-detail-card h4{
  margin:0 0 .6rem;
  padding:0;
  color: var(--ink) !important;
  font-family: var(--font-head);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.015em;
  line-height:1.3;
  transition: color .3s var(--ease);
}
[data-grid="offer"] > .care-detail-card:hover h4{ color: var(--plum) !important; }
[data-grid="offer"] > .care-detail-card p{
  margin:0;
  padding:0;
  color: var(--ink-3) !important;
  max-width:none;
}

/* a card asked to span the row keeps its side by side layout */
[data-grid="offer"] > .care-detail-card.full-width-card{
  flex-direction:row;
}
[data-grid="offer"] > .care-detail-card.full-width-card > i{ margin:0; }

@media (max-width:1024px){
  .container:has(> [data-grid="offer"]){
    display:block;
  }
  .container > .offer-head{ margin-bottom: clamp(24px, 3vw, 34px); }
  .offer-head > h2{ position:static; }
  .care-services-grid[data-grid="offer"]{
    max-height:none;
    overflow:visible;
    padding:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
}

/* These tiles pair two to a row, so an odd count leaves the last one
   stranded beside an empty half. It takes the whole row instead. */
[data-grid="benefits"] > .care-detail-card:last-child:nth-child(odd){
  grid-column: 1 / -1;
}

/* The package chips carry a centring class from the source and no body
   copy, so the blueprint card has to range them left like the rest. */
[data-grid="blueprint"] > .care-detail-card.text-center{
  text-align:left !important;
  align-items:flex-start;
}
[data-grid="blueprint"] > .care-detail-card > i.mb-3{ margin-bottom:20px !important; }
[data-grid="blueprint"] > .care-detail-card > h4.m-0{ margin:0 !important; }

/* A grid of label only chips, with no body copy, reads better four to a
   row, as on Care Provided by KEFI. */
.care-services-grid[data-grid="blueprint"]:not(:has(> .care-detail-card p)){
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1024px){
  .care-services-grid[data-grid="blueprint"]:not(:has(> .care-detail-card p)){
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width:620px){
  .care-services-grid[data-grid="blueprint"]:not(:has(> .care-detail-card p)){
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------
   ICONS ON HOVER
   At rest the icon tile is left exactly as it is. Hovering its card
   turns the gradient around, so the tile shifts colour and nothing
   moves. Applies to every filled icon tile on the site.
   -------------------------------------------------------------- */
.care-detail-card > i,
.care-item > .care-icon,
.diff-card > i,
.feature-block > .feature-icon,
.trach-card > .trach-icon,
.disease-card > .disease-icon,
.service-card > .service-icon,
.aftercare-card > .aftercare-icon,
.transplant-card > .transplant-icon,
.program-card > .program-icon,
.visit-card h3 > .number,
.type-card > i,
.pillar-card > i,
.symptom-card > i,
.perk-card .perk-icon,
.response-card .response-icon-wrap,
.contact-card .contact-card-icon,
.equipment-card i,
.adv-icon,
.service-icon,
.why-dot{
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.care-detail-card:hover > i,
.care-item:hover > .care-icon,
.diff-card:hover > i,
.feature-block:hover > .feature-icon,
.trach-card:hover > .trach-icon,
.disease-card:hover > .disease-icon,
.service-card:hover > .service-icon,
.aftercare-card:hover > .aftercare-icon,
.transplant-card:hover > .transplant-icon,
.program-card:hover > .program-icon,
.visit-card:hover h3 > .number,
.type-card:hover > i,
.pillar-card:hover > i,
.perk-card:hover .perk-icon,
.response-card:hover .response-icon-wrap,
.contact-card:hover .contact-card-icon,
.advantage-card:hover .adv-icon{
  background: linear-gradient(120deg, #BB3E97 0%, #5A2E91 100%);
  box-shadow: 0 12px 24px -12px rgba(90,46,145,.9);
}

/* These icons sit open on the dark cards, with no tile behind them, so
   hovering only lifts their colour. Giving them a background here drew a
   pale square around the glyph. */
[data-grid="why"] > .care-detail-card:hover > i,
.aftercare-grid > .aftercare-card:hover > .aftercare-icon i{
  background:none !important;
  color:#F0A8D8 !important;
}

/* the lead tiles do carry a faint fill, so theirs lifts a little */
.features-flex > .feature-block:first-child:hover > .feature-icon,
.program-grid > .program-card:first-child:hover > .program-icon,
.transplant-grid > .transplant-card:first-child:hover > .transplant-icon,
[data-grid="benefits"] > .care-detail-card:first-child:hover > i{
  background: rgba(255,255,255,.2) !important;
  color:#F0A8D8 !important;
}

/* --------------------------------------------------------------
   HOW IT WORKS  ·  numbered steps on a dotted field
   -------------------------------------------------------------- */
.appointment-process-section{
  position:relative;
  background: var(--paper-2);
  overflow:hidden;
}
.appointment-process-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(90,46,145,.22) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(130% 100% at 50% 40%, #000 45%, transparent 88%);
  -webkit-mask-image: radial-gradient(130% 100% at 50% 40%, #000 45%, transparent 88%);
}
.appointment-process-section > .container{ position:relative; z-index:1; }

.appointment-process-section .section-header{
  max-width:none;
  margin-inline:auto;
  text-align:center;
  margin-bottom: clamp(46px, 6vw, 84px);
}
.appointment-process-section .section-header h2{
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0 auto;
  max-width:22ch;
}
.appointment-process-section .section-header p{ margin-inline:auto; }

.appointment-process-section .process-grid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(20px, 3vw, 48px);
  align-items:start;
  padding-top: clamp(30px, 4vw, 52px);
}
.appointment-process-section .process-step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
}
.appointment-process-section .process-step::before,
.appointment-process-section .process-step::after{ display:none; }

/* the outlined numeral, two digits wide */
.appointment-process-section .step-number{
  position:static;
  width:auto; height:auto;
  margin:0 0 clamp(18px, 2.2vw, 28px);
  display:block;
  background:none !important;
  border:0 !important;
  border-radius:0;
  box-shadow:none !important;
  color: transparent;
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 1.25rem + 1.7vw, 2.6rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  -webkit-text-stroke: 2px var(--ink);
  transition: -webkit-text-stroke-color .4s var(--ease), color .4s var(--ease);
}
/* The source numbers run 1, 2, 3, so the leading zero is drawn here.
   This pseudo element is a small gradient dot in the careers stylesheet,
   which loads later on this page, so its decoration is cleared too or it
   shows as a violet blob behind the digit. */
.appointment-process-section .step-number::before{
  content:"0";
  -webkit-text-stroke: inherit;
  display:inline;
  width:auto;
  height:auto;
  border-radius:0;
  background:none !important;
  box-shadow:none;
  transform:none;
}
.appointment-process-section .process-step:hover .step-number::before{
  background:none !important;
  transform:none;
}
.appointment-process-section .process-step:hover .step-number{
  -webkit-text-stroke-color: var(--magenta);
}

.appointment-process-section .process-step h3{
  margin:0 0 .7rem;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight:800;
  line-height:1.24;
  letter-spacing:-.02em;
  max-width:16ch;
}
.appointment-process-section .process-step p{
  margin:0;
  color: var(--ink-3);
  max-width:30ch;
}

@media (max-width:900px){
  .appointment-process-section .process-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .appointment-process-section .process-grid{ grid-template-columns: 1fr; }
  .appointment-process-section .process-step h3,
  .appointment-process-section .process-step p{ max-width:none; }
}

/* the copy describes a three step process, so three columns fill the row */
.appointment-process-section .process-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))){
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* the contact icons are set under an id, so the hover has to match it */
#contact .contact-card:hover .contact-card-icon{
  background: linear-gradient(120deg, #BB3E97 0%, #5A2E91 100%);
  box-shadow: 0 12px 24px -12px rgba(90,46,145,.9);
}

/* the three column rule above carries :has(), which outweighs a plain
   class selector, so the breakpoints have to repeat the qualifier */
@media (max-width:900px){
  .appointment-process-section .process-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))){
    grid-template-columns: repeat(2, minmax(0,1fr));
    row-gap: clamp(30px, 5vw, 48px);
  }
}
@media (max-width:560px){
  .appointment-process-section .process-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))){
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------
   SUBSCRIPTION PACKAGE  ·  what the plan includes
   Twenty seven inclusions, each only an icon and a short label. As
   tiles they made a wall of near empty boxes the eye could not count.
   They are a list of what you get, so they are set as an itemised
   sheet: one ruled row per inclusion, three to a line, the way a
   plan's contents page would list them. 27 items divide into exactly
   nine rows of three, so the closing row lands flush.
   -------------------------------------------------------------- */
[data-grid="package"]{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: clamp(20px, 2.6vw, 44px);
  row-gap:0;
  align-items:stretch;
  padding: clamp(18px, 2.2vw, 30px) clamp(16px, 2.2vw, 34px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 50px -38px rgba(58,24,96,.5);
}
[data-grid="package"]::before{ display:none; }

[data-grid="package"] > .care-detail-card{
  display:grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items:center;
  column-gap:14px;
  padding: 15px 10px;
  margin:0;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:8px;
  box-shadow:none;
  text-align:left !important;
  transition: background .3s var(--ease);
}
[data-grid="package"] > .care-detail-card::before,
[data-grid="package"] > .care-detail-card::after{ display:none; }

/* the last row of each column carries no rule, so the sheet ends clean */
[data-grid="package"] > .care-detail-card:nth-last-child(-n+3){ border-bottom:0; }

[data-grid="package"] > .care-detail-card > i{
  width:34px; height:34px;
  margin:0 !important;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:9px;
  background: rgba(187,62,151,.10);
  border:1px solid rgba(187,62,151,.20);
  color: var(--magenta);
  font-size:.82rem;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
[data-grid="package"] > .care-detail-card h4{
  margin:0 !important;
  font-family: var(--font-body);
  font-size: clamp(.86rem, .83rem + .12vw, .95rem) !important;
  font-weight:600;
  line-height:1.45;
  letter-spacing:0;
  color: var(--ink-2);
}

[data-grid="package"] > .care-detail-card:hover{
  background: var(--paper-3);
}
[data-grid="package"] > .care-detail-card:hover > i{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
}

@media (max-width:900px){
  [data-grid="package"]{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  [data-grid="package"] > .care-detail-card:nth-last-child(-n+3){ border-bottom:1px solid var(--line); }
  [data-grid="package"] > .care-detail-card:nth-last-child(-n+2){ border-bottom:0; }
}
@media (max-width:560px){
  [data-grid="package"]{ grid-template-columns: 1fr; }
  [data-grid="package"] > .care-detail-card:nth-last-child(-n+2){ border-bottom:1px solid var(--line); }
  [data-grid="package"] > .care-detail-card:last-child{ border-bottom:0; }
}