/* About Us — /about/
   Scoped to body.page-about. Page hero, figure, arch frame, points list and label are shared (site.css).
   The dentists are set three-up in arch frames; Dr. Adli's bio opens on her credentials, set along one hairline. */

/* Shared bits on this page */
.page-about .ab-lede { margin-bottom: 1.3em; font-family: var(--f-display); font-size: var(--fs-lead); font-weight: 300; line-height: 1.32; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }

/* ---------- Intro statement ---------- */
.page-about .ab-intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 28px; }
.page-about .ab-intro__label { grid-column: 1 / span 3; align-self: start; margin-top: 1.05em; }
.page-about .ab-intro__lead {
  grid-column: 4 / -1; margin: 0;
  font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.9rem); font-weight: 300; line-height: 1.18; letter-spacing: -.022em;
  color: var(--ink); text-indent: 2.6em; text-wrap: pretty;
}
.page-about .ab-intro__lead a {
  font-style: italic; text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 1px; text-underline-offset: .16em;
  transition: color .3s, text-decoration-color .3s;
}
.page-about .ab-intro__lead a:hover { color: var(--ink-3); text-decoration-color: var(--ink-3); }

/* ---------- Our approach: the title held beside four numbered commitments ---------- */
.page-about .ab-values { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.page-about .ab-values__head { position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-about .ab-values__title { max-width: 13ch; }
.page-about .ab-values__list { border-top-color: var(--line-strong); }
.page-about .ab-values__list .points__title { font-size: var(--fs-h3); font-weight: 300; line-height: 1.15; letter-spacing: -.015em; }
.page-about .ab-values__list > li { padding: clamp(26px, 2.6vw, 36px) 0; }


/* ---------- Our story: the coast in wide format, then the long copy beside a sticky photo ---------- */
.page-about .ab-story__head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; margin-bottom: var(--space-block); }
.page-about .ab-story__title { font-family: var(--f-display); font-size: var(--fs-h1); font-weight: 300; line-height: .96; letter-spacing: -.045em; margin-left: -.04em; }
.page-about .ab-story__aerial { aspect-ratio: 21 / 9; }
.page-about .ab-story__aerial img { position: absolute; left: 0; top: -9%; height: 118%; object-position: 50% 62%; }
.page-about .ab-story__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; margin-top: var(--space-block); }
.page-about .ab-story__aside { position: sticky; top: calc(var(--header-h) + 32px); }
.page-about .ab-story__ilwu { aspect-ratio: 4 / 5; }
.page-about .ab-story__ilwu img { object-position: 46% 50%; }
.page-about .ab-story__copy { padding-top: 14px; }

/* ---------- The dentists: three portraits on ink, each in an arch frame ---------- */
.page-about .ab-team { overflow: hidden; }
.page-about .ab-team__glow {
  position: absolute; right: -16%; top: -38%; width: min(78vw, 1150px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(224, 138, 94, .15), rgba(224, 138, 94, .04) 55%, transparent);
}
.page-about .ab-team__inner { position: relative; }
.page-about .ab-team__sub { color: var(--on-ink-muted); text-wrap: balance; }
.page-about .ab-team__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 64px); margin: 0; padding: 0; list-style: none; }
.page-about .ab-doc { --frame: 10px; display: flex; flex-direction: column; }
.page-about .ab-doc__media { margin: var(--frame); }
.page-about .ab-doc__media .arch__frame { inset: calc(var(--frame) * -1); }
.page-about .ab-doc__img { --ar: .8; background: var(--ink-2); }
.page-about .ab-doc__img img { object-position: 50% 16%; transition: transform 1.6s var(--ease-out); }
.page-about .ab-doc:hover .ab-doc__img img { transform: scale(1.04); }
/* Dr. Rafiee's photo has a caption baked into its lower edge; crop it out. */
.page-about .ab-doc__img--crop img { height: 117%; object-position: 50% 0; transform-origin: 50% 0; }
.page-about .ab-doc__name { margin-top: 32px; font-family: var(--f-display); font-size: clamp(1.6rem, 2.3vw, 2.2rem); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; color: var(--on-ink); }
.page-about .ab-doc__role { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line-ink); }
.page-about .ab-doc__cred { font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink); }
.page-about .ab-doc__spec { font-size: .95rem; color: var(--on-ink-muted); }

/* ---------- Dr. Adli ---------- */
.page-about .ab-bio__head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-about .ab-bio__title { font-family: var(--f-display); font-size: var(--fs-h2); font-weight: 300; line-height: 1.02; letter-spacing: -.035em; }
/* Her portrait, in an arch, stays beside the bio while it scrolls; two photos from her Global Dental Relief trips to Guatemala close the column. */
.page-about .ab-bio__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.page-about .ab-bio__portrait { position: sticky; top: calc(var(--header-h) + 46px); width: min(100% - 28px, 440px); margin: 14px 14px 0; }
.page-about .ab-bio__portrait-img { --ar: .72; }
.page-about .ab-bio__portrait-img img { object-position: 50% 40%; }
.page-about .ab-bio__copy { padding-top: 14px; }
.page-about .ab-bio__media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: clamp(56px, 6vw, 88px); }
.page-about .ab-bio__fig .figure__img { aspect-ratio: 1; }
.page-about .ab-bio__fig--a { grid-column: 1 / span 8; }
.page-about .ab-bio__fig--a .figure__img { aspect-ratio: 4 / 3; }
.page-about .ab-bio__fig--a img { object-position: 50% 40%; }
/* The second photo overlaps the first on a porcelain mat. */
.page-about .ab-bio__fig--b { grid-column: 6 / -1; margin-top: -22%; padding: clamp(10px, 1.2vw, 16px) 0 0 clamp(10px, 1.2vw, 16px); background: var(--porcelain); }

/* ---------- Credentials: four marks on one hairline ----------
   The practice's first year, then Dr. Adli's advanced training (all from the bio). The hairline draws in from the
   left; each mark settles onto it in turn. */
.page-about .ab-since { position: relative; margin: clamp(56px, 6.5vw, 96px) 0 var(--space-block); }
.page-about .ab-since__line {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--line-strong) 82%, transparent);
}
.page-about .ab-since__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 3.4vw, 56px);
  margin: 0; padding: 0; list-style: none;
}
.page-about .ab-since__item { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: clamp(30px, 3.2vw, 44px); }
/* A ring marks each date on the line; the practice's own year is filled in sun. */
.page-about .ab-since__item::before {
  content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid var(--sun-deep); background: var(--porcelain);
}
.page-about .ab-since__item--origin::before { border-color: var(--sun); background: var(--sun); }
.page-about .ab-since__yr {
  font-family: var(--f-display); font-size: clamp(2.3rem, 4vw, 3.9rem); font-weight: 300; line-height: .9; letter-spacing: -.035em;
  font-variant-numeric: lining-nums; color: var(--ink); white-space: nowrap;
}
.page-about .ab-since__yr sup { font-size: .4em; vertical-align: .9em; }
.page-about .ab-since__what {
  margin-top: clamp(18px, 1.8vw, 26px);
  font-family: var(--f-display); font-size: var(--fs-h4); font-style: italic; font-weight: 300; line-height: 1.3; color: var(--ink);
}
.page-about .ab-since__org {
  margin-top: 10px;
  font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .page-about .ab-intro__label { grid-column: 1 / -1; margin-top: 0; }
  .page-about .ab-intro__lead { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .page-about .ab-intro__lead { text-indent: 1.6em; }
  .page-about .ab-values, .page-about .ab-story__row, .page-about .ab-bio__row { grid-template-columns: minmax(0, 1fr); }
  /* relative, not static: the figure's corner ticks are absolutely placed against it. */
  .page-about .ab-values__head, .page-about .ab-story__aside { position: relative; top: auto; }
  .page-about .ab-story__aerial { aspect-ratio: 16 / 10; }
  .page-about .ab-story__aside { order: 2; max-width: 520px; }
  .page-about .ab-bio__portrait { position: relative; top: auto; width: min(100% - 28px, 440px); }
  .page-about .ab-bio__media { max-width: 620px; }

  .page-about .ab-team__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .ab-since__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .page-about .ab-since__line { display: none; }
  .page-about .ab-since__item { border-top: 1px solid var(--line-strong); }
  .page-about .ab-since__yr { font-size: clamp(2rem, 5.4vw, 3rem); }
}

@media (max-width: 640px) {
  .page-about .ab-intro__lead { text-indent: 0; }
  .page-about .ab-story__title { font-size: clamp(4rem, 21vw, 6rem); }
  .page-about .ab-story__aerial { aspect-ratio: 4 / 3; }
  .page-about .ab-story__aerial img { object-position: 54% 60%; }
  /* Each dentist becomes a row: portrait beside name and credentials. */
  .page-about .ab-team__list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-ink); }
  .page-about .ab-doc { --frame: 8px; display: grid; grid-template-columns: 38% minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line-ink); }
  .page-about .ab-doc__media { grid-row: 1 / 3; }
  .page-about .ab-doc__name { align-self: end; margin: 0; font-size: 1.5rem; }
  .page-about .ab-doc__role { align-self: start; margin-top: 12px; padding-top: 12px; }

  .page-about .ab-bio__fig--a { grid-column: 1 / span 9; }
  .page-about .ab-bio__fig--b { grid-column: 4 / -1; }
  .page-about .ab-bio__portrait { margin-inline: 12px; width: auto; }
  .page-about .ab-bio__portrait .arch__frame { inset: -12px; }

  .page-about .ab-since__list { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .page-about .ab-since__item { padding-top: 22px; }
  .page-about .ab-since__yr { font-size: clamp(2.2rem, 11vw, 2.8rem); }
  .page-about .ab-since__what { margin-top: 12px; }
}