.bioclin-about {
  background: #f8f9fa;
  color: #191c1d;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}

.bioclin-about *, .bioclin-about *::before, .bioclin-about *::after { box-sizing: border-box; }
.bioclin-about h1, .bioclin-about h2, .bioclin-about h3, .bioclin-about p { margin-top: 0; }

.bioclin-about__hero { overflow: hidden; padding: 5.5rem 20px 6rem; background: linear-gradient(135deg, #fff 0%, #fff7f6 58%, #f7e6e3 100%); }
.bioclin-about__hero-inner, .bioclin-about__story, .bioclin-about__values, .bioclin-about__experience, .bioclin-about__cta { max-width: 1280px; margin: 0 auto; }
.bioclin-about__hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); gap: 5rem; align-items: center; }
.bioclin-about__eyebrow { margin-bottom: 1rem; color: #ad1917; font-size: .78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.bioclin-about__title { max-width: 720px; margin-bottom: 1.5rem; color: #870007; font-size: clamp(2.7rem, 5.2vw, 4.75rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; }
.bioclin-about__title em { color: #ad1917; font-family: "Source Serif 4", Georgia, serif; font-weight: 600; }
.bioclin-about__lead { max-width: 650px; margin-bottom: 2rem; color: #5b403d; font-size: 1.16rem; line-height: 1.75; }
.bioclin-about__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.bioclin-about__button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.35rem; border: 2px solid transparent; border-radius: .55rem; font-size: .95rem; font-weight: 700; text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s; }
.bioclin-about__button:hover { transform: translateY(-2px); }
.bioclin-about__button--primary { background: #ad1917; color: #fff; box-shadow: 0 10px 24px rgba(135, 0, 7, .18); }
.bioclin-about__button--primary:hover { background: #870007; }
.bioclin-about__button--secondary { border-color: #ad1917; color: #870007; }
.bioclin-about__button--secondary:hover { background: #fff; }

.bioclin-about__hero-visual { position: relative; min-height: 470px; border-radius: 2rem; background: linear-gradient(145deg, #870007, #ad1917); box-shadow: 0 28px 70px rgba(91, 64, 61, .2); }
.bioclin-about__hero-visual::before, .bioclin-about__hero-visual::after { position: absolute; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; content: ""; }
.bioclin-about__hero-visual::before { width: 330px; height: 330px; top: -85px; right: -70px; }
.bioclin-about__hero-visual::after { width: 230px; height: 230px; bottom: -70px; left: -55px; }
.bioclin-about__visual-mark { position: absolute; inset: 50% auto auto 50%; display: grid; width: 145px; height: 145px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; transform: translate(-50%, -50%); backdrop-filter: blur(8px); }
.bioclin-about__visual-mark .material-symbols-outlined { font-size: 70px; }
.bioclin-about__visual-card { position: absolute; z-index: 1; display: flex; align-items: center; gap: .85rem; width: min(285px, 78%); padding: 1rem 1.15rem; border-radius: 1rem; background: #fff; box-shadow: 0 14px 35px rgba(25,28,29,.18); }
.bioclin-about__visual-card--top { top: 2.2rem; left: -2rem; }
.bioclin-about__visual-card--bottom { right: -2rem; bottom: 2.2rem; }
.bioclin-about__visual-card > .material-symbols-outlined { display: grid; flex: 0 0 44px; height: 44px; place-items: center; border-radius: .7rem; background: #fdf2f2; color: #ad1917; }
.bioclin-about__visual-card strong, .bioclin-about__visual-card span { display: block; }
.bioclin-about__visual-card strong { margin-bottom: .15rem; color: #191c1d; }
.bioclin-about__visual-card div span { color: #5b403d; font-size: .82rem; }

.bioclin-about__story { padding: 6.5rem 20px; }
.bioclin-about__section-heading { max-width: 670px; margin-bottom: 2.5rem; }
.bioclin-about__section-heading h2, .bioclin-about__experience h2, .bioclin-about__cta h2 { margin-bottom: 1rem; color: #870007; font-size: clamp(2rem, 3.5vw, 3.15rem); letter-spacing: -.025em; line-height: 1.12; }
.bioclin-about__section-heading > p:last-child { color: #5b403d; font-size: 1.05rem; line-height: 1.7; }
.bioclin-about__section-heading--center { margin-right: auto; margin-left: auto; text-align: center; }
.bioclin-about__story-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 4.5rem; align-items: start; }
.bioclin-about__story-copy p { margin-bottom: 1rem; color: #5b403d; font-size: 1.08rem; line-height: 1.8; }
.bioclin-about__quote { margin: 0; padding: 2rem; border-left: 4px solid #ad1917; border-radius: 0 1rem 1rem 0; background: #fff; box-shadow: 0 10px 35px rgba(91,64,61,.08); }
.bioclin-about__quote .material-symbols-outlined { margin-bottom: 1rem; color: #ad1917; font-size: 2.2rem; }
.bioclin-about__quote p { margin: 0; color: #870007; font-family: "Source Serif 4", Georgia, serif; font-size: 1.35rem; font-style: italic; line-height: 1.55; }

.bioclin-about__values { padding: 6rem 20px; }
.bioclin-about__values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.bioclin-about__value-card { padding: 2rem 1.6rem; border: 1px solid #eadedc; border-radius: 1.1rem; background: #fff; transition: transform .2s, box-shadow .2s; }
.bioclin-about__value-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(91,64,61,.1); }
.bioclin-about__value-card > .material-symbols-outlined { display: grid; width: 52px; height: 52px; margin-bottom: 1.4rem; place-items: center; border-radius: .8rem; background: #fdf2f2; color: #ad1917; font-size: 27px; }
.bioclin-about__value-card h3 { margin-bottom: .65rem; color: #870007; font-size: 1.2rem; }
.bioclin-about__value-card p { margin-bottom: 0; color: #5b403d; line-height: 1.65; }

.bioclin-about__experience { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; align-items: center; padding: 6.5rem 20px; }
.bioclin-about__experience-copy > p:last-child { color: #5b403d; font-size: 1.05rem; line-height: 1.75; }
.bioclin-about__experience-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.bioclin-about__experience-list li { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: 1rem; background: #fff; box-shadow: 0 8px 25px rgba(91,64,61,.07); }
.bioclin-about__experience-list > li > .material-symbols-outlined { display: grid; flex: 0 0 48px; height: 48px; place-items: center; border-radius: .75rem; background: #fdf2f2; color: #ad1917; }
.bioclin-about__experience-list strong, .bioclin-about__experience-list span { display: block; }
.bioclin-about__experience-list strong { margin-bottom: .2rem; color: #191c1d; }
.bioclin-about__experience-list div span { color: #5b403d; font-size: .9rem; }

.bioclin-about__cta { display: flex; align-items: center; justify-content: space-between; gap: 3rem; margin-bottom: 6rem; padding: 3.5rem 4rem; border-radius: 1.5rem; background: linear-gradient(120deg, #870007, #ad1917); color: #fff; }
.bioclin-about__cta .bioclin-about__eyebrow, .bioclin-about__cta h2, .bioclin-about__cta p { color: #fff; }
.bioclin-about__cta h2 { margin-bottom: .65rem; }
.bioclin-about__cta p { margin-bottom: 0; opacity: .88; }
.bioclin-about__button--light { flex: 0 0 auto; background: #fff; color: #870007; }

@media (max-width: 900px) {
  .bioclin-about__hero-inner, .bioclin-about__story-grid, .bioclin-about__experience { grid-template-columns: 1fr; }
  .bioclin-about__hero-inner, .bioclin-about__experience { gap: 3rem; }
  .bioclin-about__hero-visual { min-height: 400px; margin: 0 2rem; }
  .bioclin-about__values-grid { grid-template-columns: repeat(2, 1fr); }
  .bioclin-about__cta { margin-right: 20px; margin-left: 20px; padding: 3rem; }
}

@media (max-width: 600px) {
  .bioclin-about__hero { padding-top: 4rem; padding-bottom: 4.5rem; }
  .bioclin-about__hero-visual { min-height: 340px; margin: 0; }
  .bioclin-about__visual-card--top { left: -.5rem; }
  .bioclin-about__visual-card--bottom { right: -.5rem; }
  .bioclin-about__story, .bioclin-about__values, .bioclin-about__experience { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .bioclin-about__values-grid { grid-template-columns: 1fr; }
  .bioclin-about__cta { align-items: flex-start; flex-direction: column; margin-bottom: 4rem; padding: 2.25rem 1.5rem; }
  .bioclin-about__button--light { width: 100%; }
}