/* Travenza · page-about.css — responsive layout for the About template.
   Uses the shared tokens in style.css (--gutter, --section-y, --radius-card, --f-display …).
   Breakpoints: 820px (stack 2-col layouts) · 560px (phones) · 400px (small phones). */

.ab-hero,
.ab-section { --ab-muted: #62625b; } /* AA-contrast grey for body/secondary copy on ivory */

/* ——— Hero ——— */
.ab-hero {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: var(--ivory);
  padding: clamp(112px, 14vw, 168px) var(--gutter) clamp(40px, 6vw, 72px);
}
.ab-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .25; z-index: -1; pointer-events: none; }
.ab-hero__inner { position: relative; width: 100%; max-width: 780px; }
.ab-hero__h1 {
  font-family: var(--f-display); font-weight: 900; color: var(--black);
  font-size: clamp(38px, 7vw, 90px);
  line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 clamp(16px, 2vw, 24px);
}
.ab-hero__h1 em { font-style: italic; color: var(--orange); }
.ab-hero__sub {
  font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; font-weight: 400;
  color: var(--ab-muted);
  max-width: 560px; margin: 0 auto; text-wrap: balance;
}

/* ——— Shared section frame ——— */
.ab-section { background: var(--ivory); padding: var(--section-y) var(--gutter); }
.ab-wrap { width: 100%; max-width: 1100px; margin: 0 auto; }
.ab-h2 {
  font-size: clamp(30px, 4.2vw, 56px); line-height: 1.12; letter-spacing: -.02em;
  max-width: none; margin-bottom: clamp(20px, 3vw, 32px);
}

/* Editorial copy coming from the editor: paragraphs need their own rhythm (global reset zeroes margins) */
.ab-prose { font-size: clamp(15.5px, 1.2vw, 16.5px); line-height: 1.75; color: var(--black); }
.ab-prose > * + * { margin-top: 1.1em; }
.ab-prose ul, .ab-prose ol { padding-left: 1.25em; }
.ab-prose li + li { margin-top: .4em; }
.ab-prose a { color: #9c5a15; text-decoration: underline; text-underline-offset: 3px; }
.ab-prose strong { font-weight: 600; }

/* ——— Who we are ——— */
.ab-who { padding-top: calc(var(--section-y) * .5); }
.ab-who__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px); align-items: center;
}
.ab-who__text { min-width: 0; }
.ab-who__media {
  min-width: 0; width: 100%;
  aspect-ratio: 7 / 6; min-height: 240px;
  border-radius: var(--radius-card); overflow: hidden;
  background: var(--ivory-2);
}
.ab-who__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No office photo (about_office_photo unset): the media column is simply not rendered. The heading then sits left with the copy
   beside it, the same heading | prose pairing as "How We Work" below (a centred heading over left-aligned prose read as unfinished).
   The columns stack, heading left, at tablet portrait and below. */
.ab-who__grid--solo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(24px, 6vw, 80px); }
.ab-who__grid--solo .ab-who__text { display: contents; }   /* heading and prose become the two grid cells */
.ab-who__grid--solo .ab-h2 { margin-bottom: 0; }

/* ——— How we work ——— */
.ab-how { background: var(--ivory-2); padding-block: calc(var(--section-y) * .75); }
.ab-how__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 6vw, 80px); align-items: start;
}
.ab-how .ab-h2 { margin-bottom: 0; }
.ab-how .ab-prose { min-width: 0; }

/* ——— Founders ——— */
.ab-founders { padding-block: calc(var(--section-y) * .75); }
.ab-founders .ab-h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.ab-founders__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.ab-founder {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 24px);
  background: var(--white); border: 1px solid var(--gray-light); border-radius: var(--radius-card);
  padding: clamp(20px, 2.6vw, 32px);
  box-shadow: 0 6px 24px rgba(26, 26, 26, .04);
}
.ab-founder__avatar {
  flex: none; width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
}
.ab-founder__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-founder__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-pale); color: var(--orange);
  font-family: var(--f-display); font-weight: 700; font-size: 30px; letter-spacing: .02em;
}
.ab-founder__body { min-width: 0; }
.ab-founder__name { font-family: var(--f-display); font-size: clamp(20px, 2vw, 22px); font-weight: 700; line-height: 1.25; color: var(--black); margin-bottom: 6px; }
.ab-founder__role { font-size: 14px; line-height: 1.55; color: var(--ab-muted); }

/* ——— Closing CTA strip (shared .enquiry-strip, tuned for this page) ——— */
.enquiry-strip p { max-width: 560px; margin-inline: auto; }

/* ——— Reveal robustness ——— */
html:not(.js) .reveal { opacity: 1; transform: none; }
/* style.css (<=560px) re-applies the hidden-state offset to revealed elements (same specificity, later in the file), leaving every
   revealed .reveal 16px low on phones: force the settled state. */
.js .reveal.visible, .js .reveal-left.visible, .js .reveal-right.visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ——— Tablet portrait and below: single column ——— */
@media (max-width: 820px) {
  .ab-who__grid, .ab-how__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-who__media { aspect-ratio: 16 / 10; min-height: 0; max-height: 340px; }
  .ab-how__grid { row-gap: 0; }
  .ab-how .ab-h2, .ab-who__grid--solo .ab-h2 { margin-bottom: 20px; }
  .ab-who__grid--solo { row-gap: 0; }
}

/* ——— Phones ——— */
@media (max-width: 560px) {
  .reveal { transform: translateY(14px); }
  .ab-hero { padding-top: 112px; }
  .ab-prose { font-size: 16px; line-height: 1.7; }
  .ab-founder__avatar { width: 72px; height: 72px; }
  .ab-founder__avatar--initials { font-size: 26px; }
  .enquiry-strip h2 br { display: none; }
  .enquiry-strip .btn-primary { display: flex; justify-content: center; width: 100%; max-width: 360px; margin-inline: auto; min-height: 52px; }
}