/* ==========================================================================
   ABOUT — this page's own layouts.

   /about loads home.css first (see extra_css), which is the shared standard:
   the masked 66px rule grid, the one-surface rule, the section rhythm, the
   type scale, the eyebrow pill, the card and the accent system. None of that
   is repeated here.

   What IS here is the design of this page's sections, and nothing is
   borrowed from a homepage section: no logo matrix, no numbered route with a
   flight path, no thin stats strip, no portrait plate. Same standard, own
   layouts.

   Conventions used throughout:
     --sec / --sec-ink / --sec-soft / --sec-tint   the accent system
                                                   (home.css §10a, set by the
                                                   accent-* class on .section)
     --r / --r-lg / --r-pill                        the radius scale
     --line / --body / --muted / --ink              the ink scale
   ========================================================================== */

/* ====================================================================== *
   1. HERO — statement left, portrait right, fact row along the foot.

   The portrait is a PLAIN frame on purpose: 4:5, hairline border, one soft
   shadow, caption underneath. The homepage's plate — corner ticks, an offset
   outline, a rule grid and a wash over the photo, a script caption on top of
   it — is a homepage device and stays on the homepage.
 * ====================================================================== */
.about-hero { padding-block: clamp(2.5rem, 5vw, 4rem); }

.about-hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 2.75rem);
  align-items: center;
}
@media (min-width: 900px) {
  .about-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}

.about-hero__title {
  margin: 1.125rem 0 0;
  max-width: 22ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.15rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
}
/* the script run is set larger than the sans beside it, because Caveat runs
   small at the same nominal size */
.about-hero__title .script {
  display: block;
  font-family: var(--font-script);
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--accent-500);
}

.about-hero__lede {
  max-width: 36rem;
  margin: 1.25rem 0 0;
  color: var(--body);
  font-size: var(--fs-lede);
  line-height: 1.62;
}

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.about-hero__figure {
  margin: 0;
  justify-self: center;
  max-width: 300px;
}
@media (min-width: 900px) {
  .about-hero__figure { justify-self: end; max-width: none; }
}
.about-hero__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 14%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--brand-950);
  box-shadow: 0 24px 46px -30px rgba(15, 23, 42, 0.6);
}
.about-hero__figure figcaption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.about-hero__figure-name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.about-hero__figure-role {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* the fact row: three label-over-value pairs, ruled off from the hero above
   and divided from each other */
.about-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
@media (min-width: 768px) {
  .about-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.about-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding-left: 1rem;
  border-left: 2px solid var(--sec-soft);
}
.about-hero__fact-label {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about-hero__fact-value {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ====================================================================== *
   2. OUR STORY — a ledger column beside the copy.

   The ledger carries the founding year at display size (the one hard fact
   the company has, which was previously buried mid-paragraph) and then the
   three places the business reaches, hung off a dotted rail. The rail is the
   site's flight-path motif — 2px dashes, the same `linear-gradient`
   dash trick as the route and the masthead flightline — pointed at geography
   instead of at process.
 * ====================================================================== */
.about-story__grid {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}
@media (min-width: 900px) {
  .about-story__grid {
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    /* the ledger is a bordered card, so it keeps its own height instead of
       stretching to the copy beside it and floating 250px of empty box */
    align-items: start;
  }
}

.about-story__ledger {
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  /* stacked, a 900px-wide ledger card reads as a mistake, so it keeps a
     card's width until it has a column of its own */
  max-width: 380px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--sec-bg1, #F3F7FE) 100%);
}
@media (min-width: 900px) {
  .about-story__ledger { max-width: none; }
}
.about-story__year {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}
.about-story__year-num {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.5vw, 3.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.about-story__year-cap {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
}

/* ---- the rail -------------------------------------------------------- */
.about-path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin: 1.5rem 0 0;
  padding: 1.5rem 0 0 1.5rem;
  border-top: 1px solid var(--line);
  list-style: none;
}
/* the dashes: two blue px out of every nine, so it reads as a flight path
   rather than as a border */
.about-path::before {
  content: '';
  position: absolute;
  top: calc(1.5rem + 4px);
  bottom: 10px;
  left: 4px;
  width: 2px;
  background-image: linear-gradient(180deg, var(--brand-300) 55%, transparent 0);
  background-size: 2px 9px;
  background-repeat: repeat-y;
  opacity: 0.85;
}
.about-path__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
.about-path__stop::before {
  content: '';
  position: absolute;
  top: 0.4375rem;
  left: -1.5rem;
  width: 10px;
  height: 10px;
  border: 2px solid var(--brand-300);
  border-radius: 50%;
  background: var(--surface);
}
.about-path__label {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about-path__value {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.45;
}

/* ---- the copy -------------------------------------------------------- */
.about-story__copy { min-width: 0; }
.about-story__copy .section-head { margin-bottom: 1.25rem; }

.about-story__standfirst {
  max-width: 42rem;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.012em;
}
.about-story__prose {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 42rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.about-story__prose p {
  margin: 0;
  color: var(--body);
  font-size: var(--fs-body);
  line-height: 1.72;
}

/* the two statements: quote-like, not carded — a tinted surface, an accent
   rule down the left, and the sentence set large enough to be read as a
   position rather than as body copy. They sit outside the story grid, so
   they take the full content width. */
.about-story__statements {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
@media (min-width: 768px) {
  .about-story__statements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.about-statement {
  position: relative;
  padding: clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--sec-bg1, #F3F7FE) 100%);
}
.about-statement::before {
  content: '';
  position: absolute;
  top: clamp(1.25rem, 2.6vw, 1.75rem);
  bottom: clamp(1.25rem, 2.6vw, 1.75rem);
  left: clamp(1rem, 2vw, 1.25rem);
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--sec), var(--accent-bright));
}
.about-statement__label {
  display: block;
  margin-bottom: 0.625rem;
  color: var(--sec-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.about-statement__text {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 500;
  line-height: 1.6;
}

/* ====================================================================== *
   3. WHAT WE DO — four rows.

   A list, not a grid of cards: the index in the display face on the left,
   the icon on a tinted tile, a hairline rule between rows, and the row
   lifting its own tint on hover. Reads top to bottom the way a service
   list actually does.
 * ====================================================================== */
.about-do__head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.about-do__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.about-do__row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem 1.25rem;
  padding: clamp(1.125rem, 2.2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s var(--ease);
}
@media (min-width: 768px) {
  .about-do__row {
    grid-template-columns: 3.25rem auto minmax(0, 1fr);
    gap: 1.25rem 1.75rem;
    padding-inline: 0.5rem;
  }
  /* the tint bleeds past the content edge so the row reads as one band */
  .about-do__row:hover { background: var(--sec-tint); }
}
.about-do__num {
  color: var(--sec);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.about-do__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--sec-soft);
  color: var(--sec-ink);
  font-size: 1.0625rem;
}
.about-do__body h3 {
  margin: 0 0 0.375rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.about-do__body p {
  max-width: 56rem;
  margin: 0;
  color: var(--body);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
/* below 768 the icon and index sit on one line above the copy */
@media (max-width: 767px) {
  .about-do__row { grid-template-columns: auto minmax(0, 1fr); }
  .about-do__num { grid-column: 2; grid-row: 1; align-self: center; }
  .about-do__icon { grid-row: 1 / span 2; }
  .about-do__body { grid-column: 2; }
}

/* ====================================================================== *
   4. WHERE WE WORK — sticky intro beside destination rows.
 * ====================================================================== */
.about-work__grid {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}
@media (min-width: 980px) {
  .about-work__grid {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  /* the intro holds while the six rows scroll past it */
  .about-work__intro {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}
.about-work__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.about-work__row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .about-work__row { gap: 1.25rem; padding: 1.25rem 0; }
}
.about-work__flag {
  flex: none;
  font-size: 1.5rem;
  line-height: 1.35;
}
.about-work__body h3 {
  margin: 0 0 0.25rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.about-work__body p {
  margin: 0;
  color: var(--body);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ====================================================================== *
   5. VISIT US — lead column, the three facts as rows, the ask last.
 * ====================================================================== */
.about-visit__wall { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

.about-visit {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.5rem, 3.2vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
@media (min-width: 980px) {
  .about-visit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
    align-items: center;
    gap: clamp(2rem, 4vw, 3rem);
  }
}
.about-visit__lead h2 {
  margin: 0.875rem 0 0.625rem;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  letter-spacing: -0.03em;
}
.about-visit__lead p {
  margin: 0;
  color: var(--body);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.about-visit__rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.about-visit__row dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about-visit__row dt i { color: var(--brand-600); font-size: 0.75rem; }
.about-visit__row dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.55;
}

.about-visit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (min-width: 980px) {
  .about-visit__actions {
    flex-direction: column;
    justify-content: center;
  }
  .about-visit__actions .btn { justify-content: center; }
}

/* ====================================================================== *
   6. CLOSING ASK — this page's own close, on the brand tint.
 * ====================================================================== */
.about-close__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 120% at 50% 0%, rgba(37, 89, 232, 0.10), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--brand-50) 100%);
  text-align: center;
}
/* the accent rule that marks the band as deliberate */
.about-close__panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 64px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--accent-500), var(--accent-bright));
  transform: translateX(-50%);
}
.about-close__slogan {
  display: block;
  color: var(--accent-500);
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}
.about-close__panel h2 {
  margin: 0.75rem auto 0;
  max-width: 24ch;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  letter-spacing: -0.032em;
}
.about-close__panel p {
  max-width: 44rem;
  margin: 1rem auto 0;
  color: var(--body);
  font-size: var(--fs-lede);
  line-height: 1.6;
}
.about-close__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}