/* ==========================================================================
   ShopFront — About page
   --------------------------------------------------------------------------
   Loaded by about.html only, so no other page pays for it. The chrome this
   page shares with faq.html and contact.html — breadcrumb, page hero, page
   nav, media placeholders, CTA band — lives in page.css and is not
   re-implemented here. What follows is the About content and nothing else.

   Same rules as styles.css, and they are not negotiable:
     · no raw colour, no raw shadow, no off-grid spacing — tokens only;
     · logical properties throughout (dir="rtl", so inline-start = right);
     · the design is FLAT. Surfaces separate by border and tone; the
       --shadow-* calls resolve to none and are kept only so elevation
       stays a one-line edit in tokens.css.

   Contents
     01 · STATS BAND
     02 · STORY
     03 · TIMELINE
     04 · VALUES
     05 · DESIGN LANGUAGE
     06 · PROCESS
     07 · MATERIALS & QUALITY
     08 · WORKSHOP GALLERY
     09 · TEAM
     10 · VOICES
     11 · B2B PANEL
     12 · TRUST & CERTIFICATES
     13 · VISIT US
     14 · RESPONSIVE
     15 · MOTION, CONTRAST, PRINT
   ========================================================================== */


/* ==========================================================================
   01 · STATS BAND
   ========================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap-grid);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  text-align: center;
  transition: var(--transition-elevate), var(--transition-colors);
}
.stat:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-border-hover);
}

.stat__value {
  color: var(--brand-text);
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
}

.stat__label {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}


/* ==========================================================================
   02 · STORY
   ========================================================================== */

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--space-12);
  align-items: start;
}

.story__body {
  min-inline-size: 0;
}

.story__body > p {
  color: var(--fg-body);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
}
.story__body > p + p {
  margin-block-start: var(--space-4);
}

/* Lead paragraph. Slightly larger and darker, so the section has an entry
   point instead of four identical grey blocks. */
.story__lead {
  color: var(--fg-default) !important;
  font-size: var(--text-2xl) !important;
  font-weight: var(--weight-medium);
}

/* Pull quote. The rule is on the inline-start edge and mirrors with the
   direction, which a left-border would not. */
.pullquote {
  margin-block: var(--space-7);
  padding: var(--space-5) var(--space-6);
  border-inline-start: var(--border-heavy) solid var(--brand);
  border-radius: var(--radius-md);
  background: var(--bg-brand-subtle);
}

.pullquote p {
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.pullquote footer {
  margin-block-start: var(--space-3);
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

/* Two-up highlight cards closing the story column. */
.story__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-grid);
  margin-block-start: var(--space-7);
}

.story__note {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--radius-xl);
  background: var(--bg-surface-2);
}

.story__note b {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
.story__note b .icon {
  color: var(--brand);
}

.story__note span {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.story__media {
  position: sticky;
  inset-block-start: calc(var(--header-height-compact) + var(--space-16));
  display: grid;
  gap: var(--space-5);
  min-inline-size: 0;
}


/* ==========================================================================
   03 · TIMELINE
   --------------------------------------------------------------------------
   A horizontal rail on desktop, a vertical list on narrow screens. The
   spine is a pseudo-element on the list, not a border on each item, so the
   line is continuous and does not break between milestones.
   ========================================================================== */

.timeline {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-block-start: var(--space-10);
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline: var(--space-6);
  block-size: var(--border-thick);
  border-radius: var(--radius-pill);
  /* Reading direction is right-to-left, oldest to newest, so the line
     gains colour as it approaches today rather than fading toward it. */
  background: linear-gradient(
    to left,
    var(--border-default) 0%,
    var(--brand) 100%);
}

.milestone {
  position: relative;
  min-inline-size: 0;
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition: var(--transition-elevate), var(--transition-colors);
}
.milestone:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-border-hover);
}

/* The dot that pins the card to the spine. */
.milestone::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--space-10) * -1 + var(--space-1-5));
  inset-inline-start: var(--space-6);
  inline-size: var(--space-3-5);
  block-size: var(--space-3-5);
  border: var(--border-heavy) solid var(--bg-page);
  border-radius: var(--radius-circle);
  background: var(--brand);
}

.milestone__year {
  display: inline-block;
  margin-block-end: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.milestone__title {
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.milestone__text {
  margin-block-start: var(--space-2);
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* The current year reads as the end of the line, not as one more step. */
.milestone--now {
  border-color: var(--border-brand);
  background: var(--bg-brand-subtle);
}
.milestone--now .milestone__year {
  background: var(--brand);
  color: var(--fg-on-brand);
}


/* ==========================================================================
   04 · VALUES
   ========================================================================== */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid-lg);
}

.value-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  overflow: hidden;
  transition: var(--transition-elevate), var(--transition-colors);
}

/* A brand rule drawn along the block-start edge, revealed on hover. Flat by
   definition — it is a border, not a glow. */
.value-card::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--border-heavy);
  background: var(--gradient-brand-flat);
  scale: 0 1;
  transform-origin: right center;
  transition: scale var(--duration-base) var(--ease-out);
}
.value-card:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-border-hover);
}
.value-card:hover::after {
  scale: 1 1;
}

.value-card__title {
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.value-card__text {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* Numbered marker in the corner. Decorative, hence aria-hidden in markup. */
.value-card__no {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-5);
  color: var(--border-default);
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
  user-select: none;
}


/* ==========================================================================
   05 · DESIGN LANGUAGE
   ========================================================================== */

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-grid-lg);
}

.collection-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition: var(--transition-elevate), var(--transition-colors);
}
.collection-card:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-border-hover);
}

.collection-card__head {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
}

/* Monogram plate. The four fills are the --brandmark-* tokens, which are
   the one deliberate primitive exception in the system: they are fixed
   artefacts and must not invert with the theme. */
.collection-card__mark {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--space-12);
  block-size: var(--space-12);
  border-radius: var(--radius-md);
  color: var(--slate-0);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  font-style: normal;
  letter-spacing: var(--tracking-wide);
}

.collection-card--amber    .collection-card__mark { background: var(--brandmark-amber); }
.collection-card--graphite .collection-card__mark { background: var(--brandmark-graphite); }
.collection-card--crimson  .collection-card__mark { background: var(--brandmark-crimson); }
.collection-card--indigo   .collection-card__mark { background: var(--brandmark-indigo); }

.collection-card__name {
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.collection-card__text {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.collection-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-sm);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: var(--border-hairline) solid var(--border-subtle);
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}

.collection-card__foot b {
  color: var(--brand-text);
  font-weight: var(--weight-bold);
}


/* ==========================================================================
   06 · PROCESS
   --------------------------------------------------------------------------
   Five steps from sketch to parcel. The connector between steps is drawn
   on the item, not the container, so the last step simply omits it and no
   line dangles off the end of the row.
   ========================================================================== */

.process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  counter-reset: step;
  list-style: none;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  counter-increment: step;
  transition: var(--transition-elevate), var(--transition-colors);
}
.step:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-border-hover);
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  /* Physical inline-end in RTL is the left edge, i.e. the direction the
     flow reads toward. Logical properties keep that true if the document
     is ever served LTR. */
  inset-inline-end: calc(var(--space-5) * -1);
  inline-size: var(--space-5);
  block-size: var(--border-thin);
  background: var(--border-strong);
}

.step__no {
  display: grid;
  place-items: center;
  inline-size: var(--space-11);
  block-size: var(--space-11);
  border-radius: var(--radius-circle);
  background: var(--gradient-brand-vivid);
  color: var(--fg-on-brand);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
}
.step__no::before {
  content: counter(step);
}

.step__title {
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.step__text {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.step__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  color: var(--brand-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

/* The panorama that closes the section. */
.process-banner {
  margin-block-start: var(--space-8);
}


/* ==========================================================================
   07 · MATERIALS & QUALITY
   ========================================================================== */

.materials {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-grid);
}

.material {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--gap-inline-md);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  transition: var(--transition-colors);
}
.material:hover {
  border-color: var(--card-border-hover);
}

.material .icon-tile {
  grid-row: span 2;
}

.material__name {
  align-self: center;
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.material__spec {
  grid-column: 2;
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* Quality panel. Dark, so it separates from the white material cards
   beside it without needing a shade step. */
.quality {
  padding: var(--panel-pad);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  color: var(--panel-fg);
}

.quality__title {
  color: inherit;
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
}

.quality__intro {
  margin-block-start: var(--space-2);
  color: inherit;
  opacity: 0.82;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.quality__list {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  list-style: none;
}

.quality__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--gap-inline-md);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-hairline) solid var(--border-inverse);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
.quality__list li:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.quality__list .icon {
  margin-block-start: 0.15em;
  color: var(--brand-bright);
  font-size: var(--icon-md);
}

.quality__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-6);
}


/* ==========================================================================
   08 · WORKSHOP GALLERY
   --------------------------------------------------------------------------
   A six-cell mosaic: one wide lead slot and five supporting shots. Named
   areas rather than spans, so re-ordering the mosaic is one edit here and
   the markup never has to change.
   ========================================================================== */

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "lead lead two  three"
    "lead lead four five";
  gap: var(--gap-grid);
}

.mosaic > *:nth-child(1) { grid-area: lead; }
.mosaic > *:nth-child(2) { grid-area: two; }
.mosaic > *:nth-child(3) { grid-area: three; }
.mosaic > *:nth-child(4) { grid-area: four; }
.mosaic > *:nth-child(5) { grid-area: five; }

/* Inside the mosaic the frames stretch to fill their grid cell — the lead
   slot is two rows tall and must not be re-proportioned by a ratio. */
.mosaic .ph {
  block-size: 100%;
}


/* ==========================================================================
   09 · TEAM
   ========================================================================== */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-grid-lg);
}

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  text-align: center;
  transition: var(--transition-elevate), var(--transition-colors);
}
.member:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-border-hover);
}

.member__name {
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.member__role {
  color: var(--brand-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.member__text {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.member__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
}

.member__tags span {
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-pill);
  background: var(--bg-inset);
  color: var(--fg-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}


/* ==========================================================================
   10 · VOICES
   ========================================================================== */

.voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid-lg);
}

.voice {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition: var(--transition-colors);
}
.voice:hover {
  border-color: var(--card-border-hover);
}

/* Oversized quote mark opening the card. Kept in the flow rather than
   absolutely positioned in a corner: the quotes are Persian and set
   ragged-left, so a corner mark lands on top of the first line at some
   card widths and cannot be padded out of the way reliably. */
.voice__mark {
  align-self: flex-start;
  color: var(--border-brand);
  font-size: var(--icon-2xl);
}

.voice__text {
  color: var(--fg-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.voice__foot {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: var(--border-hairline) solid var(--border-subtle);
}

.voice__who {
  min-inline-size: 0;
}

.voice__who b {
  display: block;
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.voice__who span {
  display: block;
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}

.voice__foot .rating {
  margin-inline-start: auto;
}

/* The avatar slot is small; the label and the size hint would not fit. */
.voice__foot .ph--avatar {
  inline-size: var(--space-12);
  block-size: var(--space-12);
  flex: none;
}


/* ==========================================================================
   11 · B2B PANEL
   ========================================================================== */

.b2b {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-12);
  border-radius: var(--radius-4xl);
  background: var(--gradient-accent);
  color: var(--fg-on-accent);
}

.b2b__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-inline-size: 0;
}

.b2b__title {
  color: inherit;
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.b2b__text {
  color: inherit;
  opacity: 0.85;
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
}

.b2b__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  inline-size: 100%;
  margin-block: var(--space-2);
  list-style: none;
}

.b2b__list li {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  font-size: var(--text-md);
}

.b2b__list .icon {
  flex: none;
  color: var(--brand-bright);
}

.b2b__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-md);
}


/* ==========================================================================
   12 · TRUST & CERTIFICATES
   ========================================================================== */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-grid);
}

.trust-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  transition: var(--transition-colors);
}
.trust-card:hover {
  border-color: var(--card-border-hover);
}

.trust-card__title {
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.trust-card__text {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* The two eNAMAD-style seals, reusing the shared .trust-badge component
   from the footer on a light surface. */
.trust-seals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-grid);
  margin-block-start: var(--gap-grid);
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface-2);
}

.trust-seals p {
  flex: 1 1 16rem;
  align-self: center;
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}


/* ==========================================================================
   13 · VISIT US
   ========================================================================== */

.visit {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: stretch;
}

.visit__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.visit__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap-inline-md);
  align-items: start;
}

.visit__row b {
  display: block;
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.visit__row span,
.visit__row a {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
.visit__row a:hover {
  color: var(--brand-text);
}

.visit__hours {
  display: grid;
  gap: var(--space-2);
  margin-block-start: auto;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-brand-subtle);
}

.visit__hours div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-md);
  color: var(--fg-body);
  font-size: var(--text-md);
}

.visit__hours b {
  color: var(--brand-text);
  font-weight: var(--weight-bold);
}

.visit__map {
  min-inline-size: 0;
}
.visit__map .ph,
.visit__map .ph__frame {
  block-size: 100%;
}


/* ==========================================================================
   14 · RESPONSIVE
   --------------------------------------------------------------------------
   The same four breakpoints styles.css uses. The hero, breadcrumb, page nav
   and CTA band reflow in page.css; only the About content is handled here.
   ========================================================================== */

@media (max-width: 1240px) {
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collection-grid,
  .team-grid,
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Five steps at tablet width leave ~150px each, which is two words per
     line. Wrap to a 3+2 grid and drop the connectors, which no longer
     describe the reading order once the row breaks. */
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step:not(:last-child)::after { content: none; }
}

@media (max-width: 1150px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__media { position: static; }

  .materials,
  .visit { grid-template-columns: minmax(0, 1fr); }

  .value-grid,
  .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The timeline stops being a rail and becomes a list: five milestones
     side by side are unreadable below roughly 1100px. */
  .timeline {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--space-4);
    padding-block-start: 0;
    padding-inline-start: var(--space-8);
  }
  /* Spine and dots both move to the inline-start edge — the side the
     padding above reserved for them. Splitting the two (line on one edge,
     padding on the other) leaves the dots hanging off the viewport. */
  .timeline::before {
    inset-block: var(--space-3) var(--space-6);
    inset-inline-start: var(--space-3);
    inset-inline-end: auto;
    inline-size: var(--border-thick);
    block-size: auto;
    background: linear-gradient(to bottom, var(--border-default), var(--brand));
  }
  .milestone::before {
    inset-block-start: var(--space-6);
    /* Card edge sits at --space-8; the spine centre at --space-3 + 1px.
       Pulling back by 8 - 1.5 lands the 14px dot centred on the line. */
    inset-inline-start: calc(var(--space-8) * -1 + var(--space-1-5));
    inset-inline-end: auto;
  }

  .mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "lead lead"
      "two  three"
      "four five";
  }
}

@media (max-width: 800px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story__notes { grid-template-columns: minmax(0, 1fr); }
  .material-grid { grid-template-columns: minmax(0, 1fr); }

  .b2b {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-3xl);
  }
  .b2b__actions .btn { flex: 1 1 100%; }

  .visit__panel { padding: var(--space-6); }
}

@media (max-width: 540px) {
  .value-grid,
  .voices,
  .collection-grid,
  .team-grid,
  .trust-grid,
  .process { grid-template-columns: minmax(0, 1fr); }

  .mosaic {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lead" "two" "three" "four" "five";
  }
}


/* ==========================================================================
   15 · MOTION, CONTRAST, PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .stat,
  .milestone,
  .value-card,
  .collection-card,
  .step,
  .member {
    transition: none;
  }
  .stat:hover,
  .milestone:hover,
  .value-card:hover,
  .collection-card:hover,
  .step:hover,
  .member:hover {
    transform: none;
  }
  .value-card::after {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .stat,
  .milestone,
  .value-card,
  .collection-card,
  .step,
  .material,
  .member,
  .voice,
  .trust-card,
  .visit__panel {
    border-color: var(--fg-muted);
  }
}

@media print {
  .b2b__actions {
    display: none;
  }
  .b2b,
  .quality {
    background: none;
    color: #000;
    border: 1px solid #000;
  }
  .story__media {
    position: static;
  }
}