/* === about.css — About Us ===
   Reuses the site's design tokens from style.css (:root) and the same
   editorial grammar as the homepage / service-visa page.
   Scoped to .yh-about so nothing leaks to other pages.
   English-focused content build. All colours/spacing from :root tokens. */

.yh-about .ab-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.yh-about .ab-wrap--narrow { max-width: 62rem; }

/* Section rhythm ------------------------------------------------------ */
.yh-about .ab-section { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--c-cream); }
.yh-about .ab-section--alt { background: #fff; }

/* The global `.page-hero ~ section::before` paints a full-width cream bleed at
   z-index:-1 (covers the hero edges). It sits ABOVE the section's own
   background, so it overrides our variant colours - re-tint it per variant. */
.yh-about .ab-section--alt::before { background: #fff; }

/* Philosophy stays light (cream) - the split image supplies the visual
   interest, so it never clashes with the black footer below. */
.yh-about .ab-section--feature { position: relative; }

/* Eyebrow (italic serif, rust, flanked by rules) --------------------- */
.yh-about .ab-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-rust);
  margin-bottom: 1.4rem;
}
.yh-about .ab-eyebrow--center { justify-content: center; }
.yh-about .ab-eyebrow::before,
.yh-about .ab-eyebrow--center::after {
  content: '';
  width: 34px; height: 1px;
  background: currentColor;
  flex: 0 0 auto;
}

/* Section heading ----------------------------------------------------- */
.yh-about .ab-title {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.4vw + 0.9rem, 3rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--c-black);
  margin: 0 0 1.6rem;
}
.yh-about .ab-title em { font-style: italic; color: var(--c-rust); }
.yh-about .ab-title--center { text-align: center; }

/* Story: pull-quote + narrative -------------------------------------- */
.yh-about .ab-lead {
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1.1vw + 0.9rem, 2rem);
  line-height: 1.4;
  color: var(--c-black);
}
.yh-about .ab-lead em { color: var(--c-rust); }

.yh-about .ab-prose { max-width: 40rem; margin: 0 auto; }
.yh-about .ab-prose p {
  margin: 0 0 1.3rem;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.0625rem);
  line-height: 1.85;
  color: var(--ink-muted);
}
.yh-about .ab-prose p:last-child { margin-bottom: 0; }
.yh-about .ab-prose strong {
  font-weight: 500;
  color: var(--c-black);
}

/* Story — editorial timeline ----------------------------------------- */
.yh-about .ab-story__head { max-width: 44rem; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.yh-about .ab-story__lead {
  margin: 1.3rem 0 0;
  font-family: var(--font-en-serif); font-style: italic;
  font-size: clamp(1.15rem, 0.8vw + 0.9rem, 1.55rem); line-height: 1.5; color: var(--ink-muted);
}
.yh-about .ab-story__lead em { color: var(--c-rust); font-style: italic; }
/* Desktop: keep the intro lead on a single line (spans the full column,
   font scales with viewport so it never wraps or overflows). */
@media (min-width: 861px) {
  .yh-about .ab-story__head { max-width: none; }
  .yh-about .ab-story__lead { white-space: nowrap; font-size: min(1.4vw, 1.05rem); }
}

.yh-about .ab-timeline { max-width: 62rem; }
.yh-about .ab-mile {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: clamp(1.5rem, 3.2vw, 3rem);
}
.yh-about .ab-mile__aside { text-align: right; padding-top: 0.05rem; }
.yh-about .ab-mile__year {
  display: block; font-family: var(--font-en-serif); font-weight: 400;
  font-size: clamp(2.1rem, 1.9vw + 1.1rem, 3.4rem); line-height: 1;
  letter-spacing: -0.015em; color: var(--c-rust); white-space: nowrap;
}
.yh-about .ab-mile__label {
  display: inline-block; margin-top: 0.7rem; padding-top: 0.55rem;
  border-top: 1px solid rgba(124, 60, 27, 0.28);
  font-family: var(--font-sans); font-weight: 500;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
}
.yh-about .ab-mile__body {
  padding: 0 0 clamp(3rem, 6vw, 4.75rem) clamp(1.75rem, 4vw, 3rem);
  position: relative;
}
.yh-about .ab-mile:last-child .ab-mile__body { padding-bottom: 0; }
/* connector line — drawn top-to-bottom on reveal */
.yh-about .ab-mile__body::after {
  content: ''; position: absolute; left: 0; top: 0.2rem; bottom: 0; width: 1px;
  background: var(--line-strong);
  transform: scaleY(0); transform-origin: top center;
  z-index: 0;
}
/* node — filled rust dot with a soft double ring */
.yh-about .ab-mile__body::before {
  content: ''; position: absolute; left: -5.5px; top: 0.5rem;
  width: 11px; height: 11px; border-radius: 50%; background: var(--c-rust);
  box-shadow: 0 0 0 5px var(--c-cream), 0 0 0 6px rgba(124, 60, 27, 0.22);
  transform: scale(0); z-index: 2;
}

/* --- Timeline entrance choreography (keyed off .reveal.is-in) --------- */
.yh-about .ab-mile.is-in .ab-mile__body::after  { animation: ab-draw 0.85s var(--ease-out) 0.12s forwards; }
.yh-about .ab-mile.is-in .ab-mile__body::before { animation: ab-pop 0.55s var(--ease-out) 0.5s forwards; }
.yh-about .ab-mile.is-in .ab-mile__year   { animation: ab-year 0.75s var(--ease-out) 0.18s both; }
.yh-about .ab-mile.is-in .ab-mile__label  { animation: ab-rise 0.7s var(--ease-out) 0.42s both; }
.yh-about .ab-mile.is-in .ab-mile__title  { animation: ab-rise 0.7s var(--ease-out) 0.3s both; }
.yh-about .ab-mile.is-in .ab-mile__body p { animation: ab-rise 0.7s var(--ease-out) 0.38s both; }
.yh-about .ab-mile.is-in .ab-mile__figure { animation: ab-rise 0.8s var(--ease-out) 0.5s both; }
/* keep the whole-block reveal gentle so the inner motion reads */
.yh-about .ab-mile.reveal { transform: translateY(14px); transition-duration: 0.8s; }

@keyframes ab-draw { to { transform: scaleY(1); } }
@keyframes ab-pop  { 0% { transform: scale(0); } 62% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes ab-year { from { opacity: 0; transform: translateX(-14px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes ab-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .yh-about .ab-mile__body::after  { transform: scaleY(1); }
  .yh-about .ab-mile__body::before { transform: scale(1); }
  .yh-about .ab-mile.is-in .ab-mile__body::after,
  .yh-about .ab-mile.is-in .ab-mile__body::before,
  .yh-about .ab-mile.is-in .ab-mile__year,
  .yh-about .ab-mile.is-in .ab-mile__label,
  .yh-about .ab-mile.is-in .ab-mile__title,
  .yh-about .ab-mile.is-in .ab-mile__body p,
  .yh-about .ab-mile.is-in .ab-mile__figure { animation: none; }
}
.yh-about .ab-mile__title {
  font-family: var(--font-en-serif); font-size: clamp(1.3rem, 1vw + 0.85rem, 1.7rem);
  line-height: 1.25; color: var(--c-black); margin: 0 0 0.95rem;
}
.yh-about .ab-mile__body p {
  margin: 0 0 1.1rem; font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.0625rem); line-height: 1.85; color: var(--ink-muted);
}
.yh-about .ab-mile__body p:last-child { margin-bottom: 0; }
.yh-about .ab-mile__figure { margin: 2rem 0 0; max-width: 300px; }
.yh-about .ab-mile__figure-media {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 20px 44px rgba(24, 23, 21, 0.16);
}
.yh-about .ab-mile__figure img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0; display: block;
}
.yh-about .ab-mile__figure figcaption {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 1.1rem; font-family: var(--font-en-serif); font-style: italic;
  font-size: 0.92rem; color: var(--c-rust);
}
.yh-about .ab-mile__figure figcaption::before {
  content: ''; width: 26px; height: 1px; background: var(--c-rust); flex: 0 0 auto;
}
/* progress rail is a mobile-only affordance */
.yh-about .ab-story__rail { display: none; }

@media (max-width: 640px) {
  /* Our Story: horizontal swipe slider with a CONTINUOUS timeline line.
     Each slide keeps the stacked format — year + label on top, a node dot
     on the running line, then the body text below — and the slides sit
     edge-to-edge so their border-top lines join into one line across the
     whole track. A fixed aside height keeps every line at the same level. */
  .yh-about .ab-timeline {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: var(--gutter);
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.25rem;
    scrollbar-width: none;
    /* soft fade on the right edge hints there's more to swipe */
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 99%);
            mask-image: linear-gradient(to right, #000 86%, transparent 99%);
    /* drives the progress rail below as you swipe */
    scroll-timeline: --ab-story x;
  }
  .yh-about .ab-timeline::-webkit-scrollbar { display: none; }
  .yh-about .ab-mile {
    display: block;
    flex: 0 0 80%;
    scroll-snap-align: start;
    opacity: 1 !important;
    transform: none !important;
  }
  /* header: year over label; fixed height so the line lands at the same y
     on every slide, and right padding keeps it clear of the next slide */
  .yh-about .ab-mile__aside {
    text-align: left;
    padding: 0 1.5rem 0 0;
    min-height: 5.5rem;
  }
  .yh-about .ab-mile__year  { font-size: clamp(2.4rem, 11vw, 3rem); }
  .yh-about .ab-mile__label { letter-spacing: 0.18em; }
  /* running line spans the full slide width; text is inset on the right so
     columns don't touch, but the border stays continuous across slides */
  .yh-about .ab-mile__body {
    position: relative;
    margin-top: 1.6rem;
    padding: 2rem 1.5rem 0 0;
    border-top: 1px solid var(--line-strong);
  }
  .yh-about .ab-mile__body::after { display: none; }   /* drop the vertical line */
  .yh-about .ab-mile__body::before {                    /* node sits on the line */
    top: -6px; left: 0.15rem;
    width: 12px; height: 12px;
    transform: scale(1);                             /* always visible without .is-in */
  }
  .yh-about .ab-mile__figure { margin-top: 1.75rem; max-width: 180px; }
  .yh-about .ab-mile__figure-media { aspect-ratio: 3 / 4; }

  /* progress rail beneath the track — fills as you swipe (scroll-driven) */
  .yh-about .ab-story__rail {
    display: block;
    height: 2px;
    margin-top: 1.75rem;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
  }
  .yh-about .ab-story__rail span {
    display: block;
    height: 100%;
    background: var(--c-rust);
    border-radius: inherit;
    transform-origin: left center;
    transform: scaleX(0.3);
    animation: ab-rail linear both;
    animation-timeline: --ab-story;
  }
  @keyframes ab-rail { from { transform: scaleX(0.3); } to { transform: scaleX(1); } }
}

/* Stats band (pulled from the homepage figures) ---------------------- */
.yh-about .ab-stats { padding: clamp(3rem, 6vw, 5rem) 0; }
.yh-about .ab-stats .ab-eyebrow { justify-content: center; display: flex; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.yh-about .ab-stats__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.yh-about .ab-stat {
  text-align: center;
  padding: 0.5rem clamp(0.75rem, 3vw, 2rem);
}
.yh-about .ab-stat + .ab-stat { border-left: 1px solid var(--line); }
.yh-about .ab-stat__num {
  display: block; font-family: var(--font-en-serif); font-weight: 400;
  font-size: clamp(2.5rem, 3.5vw + 1rem, 4.2rem); line-height: 1; color: var(--c-rust);
}
.yh-about .ab-stat__label {
  display: block; margin-top: 0.9rem;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 640px) {
  .yh-about .ab-stats__row { grid-template-columns: 1fr; gap: 0; }
  .yh-about .ab-stat { padding: clamp(1.5rem, 5vw, 2rem) 0; }
  .yh-about .ab-stat + .ab-stat { border-left: none; border-top: 1px solid var(--line); }
}

/* Client — sticky two-column (aside left, numbered list right) -------- */
.yh-about .ab-client__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.yh-about .ab-client__aside {
  position: sticky;
  top: calc(var(--nav-h, 80px) + 2rem);
}
.yh-about .ab-client__aside .ab-title { margin: 1rem 0 0; }
.yh-about .ab-client__intro {
  margin: 1.4rem 0 0;
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.15rem); line-height: 1.8; color: var(--ink-muted);
}
.yh-about .ab-client__item {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-top: 1px solid var(--line);
}
.yh-about .ab-client__item:first-child { padding-top: 0; border-top: none; }
.yh-about .ab-client__title {
  font-family: var(--font-en-serif);
  font-size: clamp(1.3rem, 1vw + 0.85rem, 1.7rem);
  line-height: 1.25; color: var(--c-black); margin: 0 0 0.8rem;
}
.yh-about .ab-client__text {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(0.9rem, 0.3vw + 0.82rem, 1rem);
  line-height: 1.8; color: var(--ink-muted); margin: 0;
}
@media (max-width: 820px) {
  .yh-about .ab-client__grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.75rem); }
  .yh-about .ab-client__aside { position: static; }
}

/* Philosophy: full-width image banner + centered quote --------------- */
.yh-about .ab-section--feature .ab-eyebrow { color: var(--c-rust); }
.yh-about .ab-phil { padding: 0; }
.yh-about .ab-phil__banner { margin: 0; overflow: hidden; }
.yh-about .ab-phil__banner img {
  width: 100%; height: clamp(280px, 40vw, 500px);
  object-fit: cover; object-position: center 38%; display: block;
}
.yh-about .ab-phil__content { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); }
.yh-about .ab-phil__quote-wrap {
  max-width: 52rem; margin: 0 auto; text-align: center; position: relative;
}
.yh-about .ab-phil__quote-wrap::before {
  content: '\201C';
  position: absolute; top: -0.5em; left: 50%; transform: translateX(-50%);
  font-family: var(--font-en-serif); line-height: 1;
  font-size: clamp(5rem, 10vw, 9rem); color: var(--c-rust); opacity: 0.13;
  pointer-events: none; z-index: 0;
}
.yh-about .ab-phil__quote-wrap > * { position: relative; z-index: 1; }
.yh-about .ab-feature__quote {
  font-family: var(--font-en-serif);
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.5rem);
  line-height: 1.4;
  color: var(--c-black);
  margin: 0 0 2rem;
}
.yh-about .ab-feature__quote em { font-style: italic; color: var(--c-rust); }
.yh-about .ab-feature__by {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.yh-about .ab-feature__rule { width: 46px; height: 1px; background: var(--line-strong); margin-bottom: 0.9rem; }
.yh-about .ab-feature__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--c-black);
}
.yh-about .ab-feature__role {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.yh-about .ab-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin: clamp(3rem, 6vw, 5rem) 0 0;
}
.yh-about .ab-pair__item { text-align: center; }
.yh-about .ab-pair__quote {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1vw + 0.8rem, 1.6rem);
  line-height: 1.45;
  color: var(--c-black);
  margin: 0 0 1rem;
}
.yh-about .ab-pair__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-rust);
}
/* Divider above the supporting pair */
.yh-about .ab-pair { border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
  .yh-about .ab-pair { grid-template-columns: 1fr; gap: 2.5rem; }
  .yh-about .ab-eyebrow { justify-content: center; }
}