/* Franchise page sections in the H10 look, laid out after the "About us 3" reference (Navis): a
   dark hero with figures and a photo, a photo with ticked points, a grid of feature cards and a
   grid of portrait photos (the contact part is the contact page's chat section). Light sections
   alternate between white and the light grey ground so each one reads as its own band. */

.about-story, .about-values, .about-photos {
  --gutter: clamp(24px, 5vw, 96px);
  position: relative;
  padding: clamp(80px, 11vh, 128px) var(--gutter);
  color: var(--h10-ink);
}
.about-story, .about-photos { background: #FFFFFF; }
.about-values { background: var(--surface-alt); }
.about__inner { width: 100%; max-width: 1480px; margin-inline: auto; }
.about__lead { margin: 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.9; color: var(--ink-muted); max-width: 56ch; }

/* heading: eyebrow, title and the short text under it */
.about__head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  margin-bottom: clamp(36px, 5vh, 56px);
}
.about__head .section-eyebrow { margin-bottom: 14px; }
.about__head .about__lead { max-width: 60ch; }

/* ---------- hero ---------- */
.about-hero {
  --gutter: clamp(24px, 5vw, 96px);
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: clamp(112px, 14vh, 150px) var(--gutter) clamp(56px, 8vh, 96px);
  background: radial-gradient(55% 70% at 22% 55%, rgba(242, 183, 5, 0.10), transparent 70%), var(--surface-dark);
  color: var(--text-on-dark);
}
.about-hero:dir(ltr) { background: radial-gradient(55% 70% at 78% 55%, rgba(242, 183, 5, 0.10), transparent 70%), var(--surface-dark); }
.about-hero__inner {
  width: 100%; max-width: 1480px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center; gap: clamp(40px, 6vw, 120px);
}
.about-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.about-hero__copy .section-eyebrow { margin: 0; }
.about-hero h1 { margin: 0; font-size: clamp(40px, 5vw, 80px); line-height: 1.2; font-weight: 700; text-wrap: balance; }
.about-hero h1 span { color: var(--h10-yellow); }
.about-hero__lead { margin: 0; max-width: 54ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.85; color: var(--muted-on-dark); }
.about-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.about-hero__or { font-size: 15px; font-weight: 600; color: var(--dim-on-dark); }
.about-hero .hotline { margin-top: 0; }

/* figures: a row of numbers with a thin rule above and between them */
.about-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  width: 100%; max-width: 620px; margin: 18px 0 0; padding-top: 26px;
  border-top: 1px solid var(--line-on-dark);
}
.about-stats > div { display: flex; flex-direction: column-reverse; gap: 6px; padding-inline: 0 20px; }
.about-stats > div + div { padding-inline-start: 20px; border-inline-start: 1px solid var(--line-on-dark); }
.about-stats dd { margin: 0; font-variant-numeric: tabular-nums; font-family: var(--font-sf); font-size: clamp(34px, 3.2vw, 52px); font-weight: 700; line-height: 1; color: var(--h10-yellow); }
.about-stats dt { font-size: 14px; line-height: 1.5; color: var(--muted-on-dark); }

/* portrait over a yellow block that sits a little behind and below it */
.about-hero__media { position: relative; margin: 0; justify-self: center; width: min(100%, 620px); }
.about-hero__media :is(img, video), .about-hero__block { will-change: transform; }
.about-hero__block {
  position: absolute; inset: 12% -7% -6% 14%;
  border-radius: 32px; background: var(--h10-yellow);
}
.about-hero__media:dir(ltr) .about-hero__block { inset: 12% 14% -6% -7%; }
/* a portrait photo (a poster) narrower, so the hero still fits the screen */
.about-hero__media--tall { width: min(100%, 400px, 46svh); }
.about-hero__media :is(img, video) {
  position: relative; display: block; width: 100%; height: auto; object-fit: cover;
  border-radius: 28px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
}

/* ---------- photo and ticked points ---------- */
.about-story__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 112px); }
.about-story--image-end .about-story__media { order: 2; }
.about-story__media { margin: 0; border-radius: 28px; overflow: hidden; background: var(--surface-mute); }
.about-story__media :is(img, video) { display: block; width: 100%; height: auto; object-fit: cover; }
/* the photo (or 16:9 clip) stays modest, centred in its half; a portrait one smaller still */
.about-story__media { justify-self: center; width: min(100%, 560px); }
.about-story__media--tall { width: min(100%, 340px); }
.about-story__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.about-story__text .section-eyebrow { margin: 0; }
.about-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 8px 0 0; padding: 0; list-style: none; width: 100%; }
.about-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 600; line-height: 1.6; }
.about-points__tick {
  display: grid; place-items: center; flex: none; margin-top: 2px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--h10-yellow); color: var(--h10-ink);
}
.about-points__tick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- feature cards ---------- */
/* white cards on the grey band; under the pointer a card fills yellow and lifts a little (200ms,
   the colours and the lift together), its icon circle swapping to ink. Touch screens skip it. */
.about-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.about-card {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px; padding: clamp(24px, 2.2vw, 32px);
  border-radius: 24px; background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(22, 24, 28, 0.04);
  transition: background-color 200ms ease, transform 200ms var(--ease-out), box-shadow 200ms ease;
}
.about-card__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: auto;
  border-radius: 50%; background: var(--h10-yellow); color: var(--h10-ink);
  transition: background-color 200ms ease, color 200ms ease;
}
.about-card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-card h3 { margin: 18px 0 0; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.4; font-weight: 700; }
.about-card p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink-muted); transition: color 200ms ease; }
/* highlighted card: ink ground, twice as wide, a larger title; under the pointer it turns yellow
   like the others (its title colour follows) */
.about-card--featured { grid-column: span 2; background: var(--h10-ink); color: #FFFFFF; transition: background-color 200ms ease, color 200ms ease, transform 200ms var(--ease-out), box-shadow 200ms ease; }
.about-card--featured h3 { font-size: clamp(22px, 2vw, 32px); max-width: 24ch; }
.about-card--featured p { max-width: 56ch; font-size: 16px; color: var(--muted-on-dark); }
@media (hover: hover) and (pointer: fine) {
  .about-card:hover { background: var(--h10-yellow); color: var(--h10-ink); transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(22, 24, 28, 0.35); }
  .about-card:hover .about-card__icon { background: var(--h10-ink); color: var(--h10-yellow); }
  .about-card:hover p { color: rgba(22, 24, 28, 0.78); }
}

/* ---------- photo grid ---------- */
.about-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.about-tile {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  border-radius: 24px; background: var(--surface-mute);
}
.about-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.about-tile__caption {
  position: absolute; inset: auto 0 0; padding: 48px 18px 16px;
  background: linear-gradient(to top, rgba(14, 15, 18, 0.82), transparent);
  color: #FFFFFF; font-size: 16px; font-weight: 700; line-height: 1.4;
}
.about-tile--card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(22px, 2vw, 30px); background: var(--h10-yellow);
}
.about-tile--card h3 { margin: 0; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.35; font-weight: 700; }
.about-tile--card p { margin: 0; font-size: 15px; line-height: 1.8; color: rgba(22, 24, 28, 0.78); }
.about-tile__btn { margin-top: auto; --ab-bg: var(--h10-ink); --ab-ring: var(--h10-ink); --ab-text: var(--h10-yellow); --ab-fill: #FFFFFF; --ab-text-on: var(--h10-ink); }
@media (hover: hover) and (pointer: fine) {
  .about-tile:hover img { transform: scale(1.04); }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .about-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .about-story, .about-values, .about-photos, .about-hero { --gutter: 16px; }
  .about-hero { padding-top: 104px; }
  .about-hero__inner, .about-story__inner { grid-template-columns: none; }
  .about-hero__media { width: min(92%, 520px); margin-top: 8px; }
  .about-hero__media--tall { width: min(72%, 340px); }
  .about-story--image-end .about-story__media { order: 0; }
  .about-story__media--tall { width: min(72%, 300px); }
  .about-points { grid-template-columns: none; }
  .about-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .about-tile { border-radius: 18px; }
  .about-tile__caption { padding: 40px 12px 12px; font-size: 14px; }
}
@media (max-width: 560px) {
  .about-cards { grid-template-columns: none; }
  .about-card { min-height: 0; }
  .about-card--featured { grid-column: auto; }
  .about-stats > div { padding-inline-end: 12px; }
  .about-stats > div + div { padding-inline-start: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-tile img { transition: none; }
  .about-card { transition: background-color 200ms ease; }
  .about-card:hover { transform: none; }
}