/* ==========================================================================
   Steady Scale — About
   Page-local styles. Scaffolding (.page-hero), the voice-of-customer device
   (.voc), the ruled list (.ruled-list), the image placeholder (.media), the
   forest Ground Band (.band-forest) and the icon well (.icon-well) all come
   from styles.css. This sheet only adds what About needs and nothing the other
   pages already define.

   Structural intent: About is the page where the brand's "human warmth over
   polish" principle has to be visible, not just claimed. The founder portrait
   is the largest single image on the site by design — the whole point is the
   connection between Michael and an owner reading in a stolen moment. Copy is
   arranged as a real story (a chronological road, not a card grid) so the
   ordering itself carries the argument: consultant → product → owner →
   Steady Scale.
   ========================================================================== */

/* ==========================================================================
   Hero — an editorial two-column setup (display heading beside the intro),
   then the mission handed to a full-bleed forest band below. The portrait is
   held back to the story section so it lands as a reveal, not decoration.
   ========================================================================== */
.about-hero { padding-bottom: clamp(2rem, 4vw, 3rem); } /* the forest band carries the close */
.about-hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); align-items: center; }
@media (min-width: 820px) {
  /* A real photograph carries the fold: warm documentary image on the left,
     heading and intro on the right. The photo sits opposite the forest band's
     emblem texture below, so the eye moves image-left, then texture-right. */
  .about-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: clamp(2.5rem, 5vw, 4rem);
  }
  .about-hero__copy { grid-column: 2; }               /* text right */
  .about-hero__media { grid-column: 1; grid-row: 1; } /* photo left */
}
.about-hero__media { margin: 0; }
.about-hero__media img {
  display: block;
  width: 100%;
  height: auto; /* let aspect-ratio drive the box, not the height attribute */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 42%; /* keep the owner's face in frame after the crop */
  border-radius: var(--radius-lg);
}
.about-hero__copy h1 { margin: 0 0 1.25rem; max-width: 13ch; }
.about-hero__copy .sub { margin: 0; max-width: 46ch; }

/* --- Mission: the page's opening Ground Band. The community setup happens on
   Sand above; this forest interrupt is the promise the whole page turns on.
   One bold statement, a terracotta signal, and the brand emblem bled off the
   right as a warm texture — its stacked chevrons are the "steady scale" idea
   made physical, so the band carries the mark without a pasted-logo look. --- */
.mission { position: relative; overflow: hidden; padding: clamp(3.25rem, 7vw, 5.5rem) 0; }
/* Warm bloom behind the emblem so the texture sits in a pool of terracotta
   light rather than floating on flat forest. */
.mission::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: -12%;
  top: 50%;
  width: 46rem;
  height: 46rem;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(217,123,74,.16), rgba(217,123,74,0) 62%);
}
/* The emblem itself — large, bleeding off the right edge (overflow-clipped by
   the section) so only the layered chevrons read, as texture not signage. */
.mission::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: -5rem;
  top: 50%;
  width: min(38rem, 56%);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: url("assets/logos/logo-emblem.webp") no-repeat center / contain;
  opacity: .2;
}
.mission > .container { position: relative; z-index: 1; }
/* On narrow screens the statement uses the full width, so pull the emblem
   further off-edge and lower it behind the type to protect legibility. */
@media (max-width: 640px) {
  .mission::after { right: -14rem; width: 26rem; opacity: .14; }
  .mission::before { right: -30%; }
}
.mission__rule {
  display: block;
  width: 2.75rem;
  height: 2px;
  background: var(--terracotta);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.mission__statement {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  line-height: 1.32;
  letter-spacing: -.01em;
  color: #F4F1EA;
  max-width: 32ch;
  text-wrap: balance;
}
/* The warm accent carries "the personal touch" — the human note against the
   structural forest, in the same peach the home hero uses on dark. */
.mission__statement em { font-style: italic; color: #E4B48F; }

/* ==========================================================================
   Our story — portrait + the founder's own words, then the road here.
   ========================================================================== */
.story { padding: var(--section-y) 0; border-top: 1px solid var(--line); }

.story__intro { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 860px) {
  /* Portrait a touch narrower than the prose so the words lead and the face
     anchors — not a 50/50 split, which would read as a gallery. */
  .story__intro { grid-template-columns: 0.85fr 1.15fr; }
}

/* The founder portrait — the site's largest image slot. Figure + caption so
   the name is part of the content, not overlaid on the placeholder. */
.portrait { margin: 0; }
.portrait .media { aspect-ratio: 4 / 5; }
.portrait figcaption {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.portrait .name { font-family: var(--font-serif); font-size: 1.25rem; color: var(--ink); }
.portrait .role {
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.story__lead h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  line-height: 1.14;
  margin-bottom: 1.25rem;
  max-width: 18ch;
}
.story__lead p { color: var(--ink); max-width: 52ch; text-wrap: pretty; }

/* --- The road here: a genuine chronological sequence, so it earns a timeline.
   A hairline rail with sage nodes — the order is the information, not decoration.
   Drawn per-item (::after between nodes) so the line ends exactly at the last
   dot instead of trailing past it. --- */
.road { margin-top: clamp(2.75rem, 6vw, 4.5rem); }
.road__head {
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}
/* Reset the ordered-list defaults: the global reset only clears <ul>, and raw
   decimal markers here would read as the numbered-scaffolding the system bans.
   The dots and the reading order carry the sequence; <ol> keeps the semantics. */
.road__list { position: relative; list-style: none; margin: 0; padding: 0; }
.road__item {
  position: relative;
  padding-left: 2.4rem;
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}
.road__item:last-child { padding-bottom: 0; }
/* Node marker: sage dot with a sand ring so it reads as sitting on the rail. */
.road__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5rem;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px var(--sand);
  z-index: 1;
}
/* Rail: only between one node and the next, so it terminates at the final dot. */
.road__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px;
  top: .5rem;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
/* The current, present-day node reads as the destination: forest dot, wider
   ring — the one place on the rail the eye should settle. */
.road__item--now::before { background: var(--forest); box-shadow: 0 0 0 4px var(--sand), 0 0 0 5px var(--sage-soft); }

.road__venture { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.2; color: var(--ink); }
.road__meta {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terracotta-ink);
  margin: .35rem 0 .6rem;
}
.road__desc { color: var(--ink-soft); max-width: 56ch; text-wrap: pretty; }
.road__desc strong { color: var(--ink); font-weight: 600; }

/* One node carries a photo — Vaya Con Tacos, the chapter where Michael became
   the owner rather than the advisor. A single inline image breaks the rhythm
   on purpose; it is the emotional pivot of the story. */
.road__media {
  margin-top: 1.1rem;
  aspect-ratio: 16 / 9;
  max-width: 34rem;
}

/* ==========================================================================
   Our philosophy — the belief beat, on a forest Ground Band.
   Orientation comes from the ground change, not another eyebrow.
   ========================================================================== */
.philosophy { max-width: 60rem; }
.philosophy h2 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  color: #fff;
  margin-bottom: 1.4rem;
  max-width: 20ch;
}
.philosophy p { color: #DAE2DB; font-size: 1.1rem; max-width: 58ch; margin-bottom: 1.1rem; text-wrap: pretty; }
.philosophy strong { color: #fff; font-weight: 600; }

/* The "hundreds of small improvements" made literal: the actual list of
   improvements as translucent chips on the band. This is content, not
   decoration — it's the argument that steady beats sudden, shown. */
.compound {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.25rem);
  border-top: 1px solid rgba(255,255,255,.14);
}
.compound__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: #F4F1EA;
  margin-bottom: 1.1rem;
}
.compound__list { display: flex; flex-wrap: wrap; gap: .6rem; }
.compound__list li {
  font-family: var(--font-sans);
  font-size: .92rem;
  font-weight: 500;
  color: #F4F1EA;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: .45rem .95rem;
}

/* ==========================================================================
   Our promise — the wide human photo, then the four commitments as ruled rows.
   No ticks: a check on every line is the SaaS tell the system bans, and the
   rows already read as a list.
   ========================================================================== */
.promise-section { max-width: 62rem; }
.promise-section h2 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); margin-bottom: .6rem; }
.promise-section__intro { color: var(--ink-soft); font-size: 1.1rem; max-width: 54ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

.promises { border-top: 1px solid var(--line); }
.promises li {
  display: flex;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line);
}
/* A quiet serif "always / never" marker instead of a check — it names the
   shape of each promise (a commitment or a boundary) and carries meaning a
   tick can't. */
.promises .mark {
  flex: none;
  width: 4.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem; /* body step */
  /* terracotta-ink (4.89:1 on Sand), not terracotta-deep (3.65:1): at body size
     these markers are normal-size text and must clear the 4.5:1 AA floor. */
  color: var(--terracotta-ink);
  line-height: 1.5;
}
.promises .text { font-size: 1.12rem; color: var(--ink); max-width: 48ch; text-wrap: pretty; }
.promises .text strong { font-weight: 600; }

/* ==========================================================================
   Motion — the road nodes stagger in sequence, matching the reading order.
   Gated on html.has-reveal, so no-JS and reduced-motion visitors get fully
   visible content.
   ========================================================================== */
html.has-reveal .road__item { opacity: 0; transform: translateY(14px); }
html.has-reveal .road.in .road__item {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.has-reveal .road.in .road__item:nth-child(2) { transition-delay: .08s; }
html.has-reveal .road.in .road__item:nth-child(3) { transition-delay: .16s; }
html.has-reveal .road.in .road__item:nth-child(4) { transition-delay: .24s; }
html.has-reveal .road.in .road__item:nth-child(5) { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html.has-reveal .road__item { opacity: 1; transform: none; }
  html.has-reveal .road.in .road__item { transition: none; }
}