/* About: white page, wine text, parchment only behind photos. Our story beside the treatments, the founder's words, what
   we hold to, the people behind Welm, real patient stories, and one next step. */
.ab-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(40px, 6vw, 96px); max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-top: 64px; padding-bottom: 72px; }
.ab-eyebrow { display: inline-flex; align-items: center; gap: 14px; color: #47181c; font-size: 12.5px; font-weight: 600; letter-spacing: .26em; }
.ab-eyebrow::after { content: ""; width: 40px; height: 1px; background: rgba(71, 24, 28, .4); }
.ab-hero h1 { margin-top: 20px; color: #47181c; font: 500 clamp(46px, 5vw, 72px)/1.02 'Welm Display', Georgia, serif; letter-spacing: -.025em; text-wrap: balance; }
.ab-lede { max-width: 540px; margin-top: 22px; color: #6e3438; font-size: 19px; line-height: 1.6; }
.ab-lede em { color: #8a6636; font-style: italic; }
.ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.ab-actions .button { min-height: 52px; padding: 0 30px; border-radius: 999px; font-size: 15.5px; }
.ab-link { color: #47181c; font-size: 15.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
/* The name, told as a sum: well + calm = welm. */
.ab-name { display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; align-items: center; gap: 6px 22px; margin: 0; padding: 56px 40px; border-radius: 28px; background: radial-gradient(ellipse at 70% 0, #f7f1e9, #efe7dc 70%); aspect-ratio: 5 / 4; text-align: center; }
.ab-word { grid-column: 1 / -1; color: #47181c; font: italic 500 clamp(52px, 5.4vw, 80px)/1 'Welm Display', Georgia, serif; letter-spacing: -.02em; }
.ab-op { grid-column: 1 / -1; color: #8a6636; font: 300 34px/1 Jost, sans-serif; }
.ab-name img { grid-column: 1 / -1; justify-self: center; width: clamp(150px, 15vw, 210px); height: auto; margin-top: 4px; }
.ab-name figcaption { grid-column: 1 / -1; margin-top: 18px; color: #6e3438; font-size: 15.5px; }

.ab-page { max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; }
.ab-page h2, .ab-next h2 { color: #47181c; font: 500 clamp(34px, 3.6vw, 46px)/1.08 'Welm Display', Georgia, serif; }
.ab-page > section > .ab-eyebrow + h2 { margin-top: 16px; }
/* The founder's words as a centred pull quote between two hairlines (her portrait is in the team cards below). */
.ab-founder { max-width: 900px; margin: 96px auto 0; padding: 72px 0; border-top: 1px solid #e7e2dd; border-bottom: 1px solid #e7e2dd; text-align: center; }
.ab-founder blockquote { position: relative; margin: 26px 0 0; color: #47181c; font: 500 clamp(26px, 2.6vw, 36px)/1.35 'Welm Display', Georgia, serif; text-wrap: balance; }
.ab-founder blockquote::before { content: "“"; display: block; height: .55em; color: #c9a777; font-size: 2.4em; line-height: 1; }
.ab-sign { display: grid; justify-items: center; gap: 2px; margin-top: 26px; color: #6e3438; font-size: 15px; }
.ab-sign strong { color: #47181c; font-size: 17px; font-weight: 600; }
/* How Welm works: a connected timeline, no boxes. Across on desktop, down the side when stacked. */
.ab-how { padding-top: 24px; text-align: center; }
.ab-how ol { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 40px 0 0; padding: 0; list-style: none; }
.ab-how ol::before { content: ""; position: absolute; top: 24px; right: 16.6%; left: 16.6%; height: 1px; background: #e3d8cf; }
.ab-how li { position: relative; display: grid; justify-items: center; gap: 18px; }
.ab-num { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #47181c; color: #fbf6f0; font: 500 15px/1 Jost, sans-serif; font-variant-numeric: lining-nums tabular-nums; box-shadow: 0 0 0 8px #fff; }
.ab-how h3 { color: #47181c; font: 500 26px/1.15 'Welm Display', Georgia, serif; }
.ab-how li p { max-width: 320px; margin: 8px auto 0; color: #6e3438; font-size: 15.5px; line-height: 1.6; }
.ab-how li .ab-how-note { display: inline-flex; align-items: center; gap: 7px; max-width: none; margin-top: 12px; color: #7a5a2e; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.ab-how-note svg { flex: none; color: #8a6636; }
.ab-values { margin-top: 96px; text-align: center; }
.ab-values ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 32px 0 0; padding: 0; list-style: none; text-align: left; }
.ab-values li { padding: 8px 28px 8px 0; }
.ab-values li + li { padding-left: 28px; border-left: 1px solid #ece7e2; }
.ab-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #e3d8cf; border-radius: 50%; color: #8a6636; }
.ab-values h3 { margin-top: 16px; color: #47181c; font: 500 24px/1.15 'Welm Display', Georgia, serif; }
.ab-values li p { margin-top: 8px; color: #6e3438; font-size: 15.5px; line-height: 1.55; }
.ab-values .ab-note { color: #8b5d54; font-size: 13.5px; }
.ab-team { margin-top: 88px; scroll-margin-top: 96px; text-align: center; }
.ab-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; text-align: left; }
/* Team: large portrait cards. */
.ab-card { display: grid; overflow: hidden; border: 1px solid #e7e2dd; border-radius: 26px; color: #47181c; text-decoration: none; transition: border-color .15s, box-shadow .2s; }
.ab-card:hover { border-color: #47181c; box-shadow: 0 16px 34px rgba(71, 24, 28, .1); }
.ab-card-photo { overflow: hidden; background: #f1ece4; }
.ab-card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 20%; transition: transform .6s ease; }
.ab-card:hover .ab-card-photo img { transform: scale(1.03); }
.ab-card-text { display: grid; gap: 4px; padding: 22px 26px 24px; color: #6e3438; font-size: 15.5px; text-align: left; }
.ab-card-text strong { color: #47181c; font: 500 28px/1.15 'Welm Display', Georgia, serif; }
.ab-card-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: #47181c; font-weight: 500; }
.ab-card-go svg { transition: transform .15s; }
.ab-card:hover .ab-card-go svg { transform: translateX(3px); }
.ab-care { max-width: 640px; margin: 20px auto 0; color: #6e3438; font-size: 15px; line-height: 1.55; }
.ab-care a { color: #47181c; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* The patient-video section's layout is scoped to the home and product pages in testimonial.css; apply it here too. */
body[data-page="about"] .patient-story--product { margin-top: 72px; padding: 56px 24px 32px; background: #fff; color: #47181c; scroll-margin-top: 90px; text-align: center; }
/* Closing: the page's one wine surface, a rounded card above the footer. */
.ab-next { width: calc(100% - 2 * var(--gutter)); max-width: 1200px; margin: 72px auto 96px; padding: 80px 24px; border-radius: 32px; background: radial-gradient(ellipse at 50% 0, #5a1d23 0, #3a1317 65%); color: #fbf6f0; text-align: center; }
.ab-next-kicker { color: #d9c3a5; font: italic 500 22px/1.2 'Welm Display', Georgia, serif; }
.ab-next h2 { margin-top: 10px; color: #fbf6f0; }
.ab-next > p:not(.ab-next-kicker) { margin-top: 12px; color: #d2bcb4; font-size: 17px; }
.ab-next-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 28px; }
.ab-next .button { min-height: 54px; padding: 0 36px; border: 0; border-radius: 999px; background: #fbf6f0; color: #47181c; font-size: 16px; }
.ab-next .button:hover { background: #fff; }
.ab-next-link { color: #fbf6f0; font-size: 15.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1000px) {
  /* One column, centred on one 620px axis. */
  .ab-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 40px; }
  .ab-copy { max-width: 620px; margin-inline: auto; text-align: center; }
  .ab-eyebrow::before { content: ""; width: 40px; height: 1px; background: rgba(71, 24, 28, .4); }
  .ab-lede { margin-inline: auto; }
  .ab-actions { justify-content: center; }
  /* One column: the sum reads across, on one line. */
  .ab-name { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; width: 100%; max-width: 620px; margin-inline: auto; aspect-ratio: auto; padding: 36px 24px; }
  .ab-word { font-size: 50px; }
  .ab-op { font-size: 28px; }
  .ab-name img { width: 132px; margin-top: 6px; }
  .ab-name figcaption { flex-basis: 100%; margin-top: 10px; }
  .ab-founder, .ab-how, .ab-values, .ab-team { max-width: 620px; margin-inline: auto; }
  .ab-next { max-width: 620px; }
  /* Stacked: the steps run down the side, joined by a line between the numbers. */
  .ab-how ol { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 520px; margin-inline: auto; text-align: left; }
  .ab-how ol::before { display: none; }
  .ab-how li { grid-template-columns: 48px minmax(0, 1fr); justify-items: start; align-items: start; column-gap: 20px; padding-bottom: 32px; }
  .ab-how li:last-child { padding-bottom: 0; }
  .ab-how li:not(:last-child)::after { content: ""; position: absolute; top: 56px; bottom: 8px; left: 24px; width: 1px; background: #e3d8cf; }
  .ab-num { box-shadow: none; }
  .ab-how h3 { padding-top: 9px; }
  .ab-how li p { max-width: none; margin-inline: 0; }
  .ab-values ul { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .ab-values li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ab-team-grid { gap: 12px; }
  body[data-page="about"] .patient-story--product > * { max-width: 620px; margin-inline: auto; }
  .ab-card-text strong { font-size: 24px; }
  .ab-card-text { padding: 16px 18px 18px; }
}
@media (max-width: 700px) {
  .ab-hero { padding-top: 24px; padding-bottom: 48px; }
  .ab-hero h1 { font-size: 40px; }
  .ab-lede { font-size: 17px; }
  .ab-actions .button { width: 100%; }
  .ab-name { padding: 32px 18px; border-radius: 22px; }
  .ab-name { gap: 6px 10px; }
  .ab-word { font-size: 36px; }
  .ab-op { font-size: 22px; }
  .ab-name img { width: 96px; margin-top: 4px; }
  .ab-how, .ab-values, .ab-team { margin-top: 64px; }
  .ab-how li { column-gap: 16px; padding-bottom: 28px; }
  .ab-how h3 { font-size: 23px; }
  .ab-page h2, .ab-next h2 { font-size: 32px; }
  .ab-founder { margin-top: 64px; padding: 48px 0; }
  .ab-founder blockquote { font-size: 23px; }
  .ab-values ul { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ab-values li, .ab-values li + li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; border-left: 0; }
  .ab-values li + li { border-top: 1px solid #ece7e2; }
  .ab-icon { grid-row: span 3; width: 44px; height: 44px; }
  .ab-values h3 { margin-top: 0; font-size: 21px; }
  .ab-values li p { margin-top: 4px; }
  .ab-team-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="about"] .patient-story--product { margin-top: 48px; padding: 36px var(--gutter) 24px; }
  .ab-next { margin: 48px auto 56px; padding: 56px 20px; border-radius: 24px; }
  .ab-next .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ab-card, .ab-card-go svg, .ab-card-photo img { transition: none; } .ab-card:hover .ab-card-photo img { transform: none; } }