/* About's fixed editorial composition; all photographs come from secure slots. */
.about-brand-main { padding: 0; }
.about-brand-main + .brand-footer { margin-top: 0; }
.about-brand {
  color: var(--color-coffee);
  background: var(--color-sage);
  font-family: var(--font-interface);
  font-size: 1.125rem;
  line-height: 1.5;
}
.about-brand h1, .about-brand h2, .about-brand h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.about-brand h1, .about-brand h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); }
.about-brand p { margin: 0; overflow-wrap: anywhere; }
.about-brand p + p { margin-top: 1rem; }
.about-brand .about-script { font: 400 clamp(1.5rem, 2.1vw, 2rem)/1.5 var(--font-script); }
.about-photo picture, .about-photo img { display: block; width: 100%; height: auto; }
.about-photo img { object-fit: contain; }
.about-photo-placeholder { width: 100%; height: 100%; min-height: 12rem; background: var(--color-sage); }
.about-photo .about-photo-placeholder { aspect-ratio: 2 / 3; }
.about-background { position: absolute; inset: 0; z-index: -1; background: var(--section-base); }
.about-background picture, .about-background img { display: block; width: 100%; height: 100%; }
.about-background img { object-fit: cover; }
.about-background picture { opacity: var(--section-photo-opacity); }
.about-background::after { content: none; }

/* Header clearance, band, portrait and biography belong to this one minimum.
 * Intrinsic content can grow it; the fixed overlay header adds no flow height. */
.about-intro {
  --about-intro-clearance: .5rem;
  --about-portrait-band-inset: 2.5rem;
  --about-initial-viewport: 100vh;
  --about-portrait-available-height: max(20rem, calc(var(--about-initial-viewport) - var(--about-intro-clearance) - var(--about-portrait-band-inset)));
  padding-block: var(--about-intro-clearance) 0;
  align-content: start;
  overflow: visible;
}
@supports (height: 100svh) { .about-intro { --about-initial-viewport: max(100svh, 100dvh); } }
.brand-chrome-enabled .about-intro { --about-intro-clearance: calc(var(--brand-header-initial-height) + .5rem); }
.about-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  grid-template-rows: max-content minmax(min-content, 1fr);
  width: min(calc(100% - var(--brand-content-gutter) * 2), 73.125rem);
  margin-inline: auto;
  position: relative;
}
.about-intro__layout::before { content: ""; grid-column: 1 / -1; grid-row: 1; background: var(--color-coffee); }
/* Redistribute the same vertical space: lower the greeting without moving or
 * enlarging the band. Phones retain their separate portrait-clearance padding. */
.about-intro__heading { grid-column: 2; grid-row: 1; padding: 6rem 2rem 1rem; align-self: center; color: var(--color-ivory); }
.about-intro__heading .about-script { margin-top: .5rem; }
.about-intro__portrait {
  grid-column: 1; grid-row: 1 / 3; align-self: start;
  /* Match the approved portrait/text balance, even on a taller desktop. A
     short window can reduce it, but extra height must not enlarge it alone. */
  width: min(calc(100% - 1rem), calc(min(27rem, var(--about-portrait-available-height)) * var(--about-portrait-aspect, 2 / 3)));
  margin: var(--about-portrait-band-inset) auto 0; z-index: 1;
}
/* Validated rendition dimensions size the whole portrait, independent of srcset
 * density. Its image retains width:100% / height:auto; no crop or stretch. */
.about-intro__biography { grid-column: 2; grid-row: 2; padding: 2rem 2rem 1.5rem .5rem; min-width: 0; }
.about-feature { position: relative; height: clamp(18rem, 56.25vw, 60rem); margin: 0; background: var(--color-sage); }
.about-feature picture, .about-feature img { display: block; width: 100%; height: 100%; }
.about-feature img { object-fit: cover; }

.about-approach { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); gap: 0; padding: clamp(2rem, 4vw, 3rem); min-height: 44rem; color: var(--color-ivory); }
.about-approach__heading { grid-column: 2; grid-row: 1; align-self: start; justify-self: center; max-width: 100%; margin: 7rem 1rem 0 !important; text-align: center; color: var(--color-ivory); text-shadow: none; }
.about-approach__panel { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 2rem; background: color-mix(in srgb, var(--color-coffee) 90%, transparent); font-size: 1rem; line-height: 1.5; }
.about-approach__panel li + li { margin-top: 1.75rem; }
.about-approach__panel h3 { font-size: 1.25rem; margin-bottom: .75rem; }

.about-connect { position: relative; isolation: isolate; padding: 2.5rem var(--brand-content-gutter); }
.about-connect__collage { --about-connect-gap: clamp(1.75rem, 6.2vw, 5.5rem); display: grid; grid-template-columns: minmax(0, 13.2rem) minmax(0, 27.06rem) minmax(0, 13.2rem); gap: var(--about-connect-gap); width: min(88%, 64.5rem); margin-inline: auto; align-items: start; }
.about-connect__primary { --about-closing-extension: calc(var(--about-connect-gap) - .75rem); display: grid; grid-column: 2; grid-row: 1; min-width: 0; }
.about-connect__portrait-frame { display: contents; }
.about-connect__portrait { grid-area: 1 / 1; align-self: start; }
.about-connect__portrait { position: relative; }
.about-connect__portrait--tinted::after { content: ""; position: absolute; inset: 0; background: var(--photo-coffee-overlay); pointer-events: none; }
.about-connect__overlay { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; z-index: 1; }
.about-connect__panel { padding: 1.5rem 1rem; color: var(--color-ivory); text-align: center; }
.about-connect__panel h2 { font-size: clamp(1.75rem, 2.8vw, 2.75rem); margin-bottom: 1.25rem; }
.about-connect__panel p { font-size: 1rem; }
.about-connect__panel .brand-button { margin-top: 1.25rem; max-width: 100%; overflow-wrap: anywhere; }
.about-connect__closing { display: grid; margin-top: auto; min-width: 0; }
.about-connect__signature { grid-area: 1 / 1; width: min(18rem, 75%); justify-self: end; align-self: end; margin-block: 2rem 1rem; margin-right: calc(-1 * var(--about-closing-extension)); color: var(--color-ivory); text-align: right; }
.about-connect__signature .about-script { font-size: clamp(2rem, 3vw, 2.5rem); }
.about-connect__lao-mark { grid-area: 1 / 1; align-self: end; position: relative; z-index: 2; margin-bottom: 1rem; width: min(10rem, 40%); height: auto; transform: translateX(-50%); pointer-events: none; }
.about-connect__flourish { display: block; width: calc(14rem * 200 / 415); max-width: 100%; height: 14rem; object-fit: contain; margin: 1rem 0 0 auto; pointer-events: none; }
.about-connect__left { grid-column: 1; grid-row: 1; margin-top: 2rem; }
.about-connect__right { grid-column: 3; grid-row: 1; align-self: end; margin-bottom: 2rem; }
@media (max-width: 64rem) {
  .about-intro__layout { grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
  .about-intro__heading { padding: 4rem 1.5rem 1rem; }
  .about-intro__biography { padding: 1.5rem 1.5rem 1.5rem .5rem; }
  .about-approach { grid-template-columns: minmax(0, 57%) minmax(0, 43%); }
  .about-approach__panel { padding: 1.5rem; }
  .about-connect__collage { --about-connect-gap: 1.75rem; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
}
@media (max-width: 48rem) {
  .about-intro { padding-bottom: 2rem; }
  .about-intro__layout { grid-template-columns: minmax(0, 1fr); }
  .about-intro__heading { grid-column: 1; grid-row: 1; padding: 2rem 1.25rem 3rem; text-align: center; }
  .about-intro__portrait { grid-column: 1; grid-row: 2; width: min(72vw, 17.75rem); margin-top: -1.5rem; }
  .about-intro__portrait img { width: 100%; max-height: none; }
  .about-intro__biography { grid-column: 1; grid-row: 3; padding: 2rem 0 0; }
  .about-approach { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 2rem var(--brand-content-gutter); gap: 2rem; }
  .about-approach__heading { grid-column: 1; grid-row: 1; margin: 0 !important; }
  .about-approach__panel { grid-column: 1; grid-row: 2; padding: 1.5rem; }
  .about-connect { padding-block: 1.75rem; }
  .about-connect__collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .about-connect__primary { grid-column: 1 / -1; grid-row: 1; }
  .about-connect__primary { --about-closing-extension: min(5vw, 1.25rem); }
  .about-connect__signature { width: min(18rem, 90%); }
  .about-connect__portrait-frame { display: block; grid-area: 1 / 1; align-self: start; position: relative; min-width: 0; margin-bottom: 1.5rem; }
  .about-connect__lao-mark { position: absolute; left: 0; bottom: 0; margin: 0; width: min(10rem, 65%); transform: translate(-8%, 50%); }
  .about-connect__flourish { width: calc(12rem * 200 / 415); height: 12rem; }
  .about-connect__left { grid-column: 1; grid-row: 2; margin: 0; }
  .about-connect__right { grid-column: 2; grid-row: 2; margin: 0; }
}

/* Safe baseline, also used without script or if readiness/measurement fails.
 * The section-specific controller enables overlap only after measuring the copy. */
.about-connect__primary--flow .about-connect__overlay { grid-area: 2 / 1; }
.about-connect__primary--flow .about-connect__portrait-frame { margin-bottom: 2rem; }