/* ===========================================================================
   THE BODY — About, phone + tablet (<= 1079px). On top of css/mobile.css.
   Adaptation (no mobile frames in Figma). See MOBILE-CONTRACT.md.
   Section ids from css/about.css. Base rules = tablet + phone; the
   phone-only (<= 599px) tweaks are at the end of the file.
   =========================================================================== */

/* short tracked labels ("What we believe", "Start here", legend) keep one line:
   their Figma box is a few px narrower than the tracked text in the browser */
.page .sec:not(.footer) .nw { width: auto; }

/* section rhythm: 36 + 36 = 72px between sections (contract: 56-72), more air after
   the hero and before the dark footer */
.page .sec[data-f="258:2"], .page .sec[data-f="259:2"], .page .sec[data-f="259:48"],
.page .sec[data-f="261:61"], .page .sec[data-f="261:104"], .page .sec[data-f="262:2"],
.page .sec[data-f="263:2"] { padding-top: 36px; padding-bottom: 36px; }
.page .sec[data-f="258:2"] { padding-top: 64px; }
.page .sec[data-f="263:2"] { padding-bottom: 64px; }
/* anchor targets (#approach from the hero, #founder from the footer) clear the fixed bar */
.page .sec[id] { scroll-margin-top: 44px; }

/* ---------- 01 hero ----------
   mobile.css's `.page .hero p.hm { text-wrap: pretty }` is a shorthand that also resets
   text-wrap-mode to wrap, so the "About The Body" eyebrow broke onto two lines */
.page .hero--about p.hm.nw { text-wrap-mode: nowrap; max-width: 100%; }

/* ---------- 02 what we are not (258:2) ----------
   The .strike bars are drawn at desktop coordinates: a real line-through replaces them. */
.page .sec[data-f="258:2"] { gap: 6px; }
.page .sec[data-f="258:2"] .strike { display: none; }
/* the strike is a bar on the text itself, drawn left to right (timing: css/about-ui.css) */
.page .sec[data-f="258:2"] [data-f="258:5"],
.page .sec[data-f="258:2"] [data-f="258:6"],
.page .sec[data-f="258:2"] [data-f="258:7"] { position: relative; width: fit-content; max-width: 100%; }
.page .sec[data-f="258:2"] .k-ghost::after {
  content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 2px; background: var(--body);
  transform-origin: left center; scale: 0 1; transition: scale .3s ease;
}
.page .sec[data-f="258:2"] .k-ghost.is-visible::after { scale: 1 1; transition: scale .7s cubic-bezier(.65,0,.35,1) var(--sd); }
@media (prefers-reduced-motion: reduce) {
  .page .sec[data-f="258:2"] .k-ghost::after { scale: 1 1; transition: none; }
}
.page .sec[data-f="258:2"] [data-f="258:4/clip"] { width: 100%; height: auto; overflow: visible; margin-top: 18px; }
.page .sec[data-f="258:2"] [data-f="258:9"] { margin-top: 14px; }

/* ---------- 04 two bodies (259:2): two comparison cards, stacked ---------- */
.page .sec[data-f="259:2"] { align-items: center; }
.page .sec[data-f="259:2"] [data-f="259:3"] { margin-bottom: 18px; }
.page .sec .ccard {
  width: 100%; height: auto; overflow: visible;
  display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 20px; row-gap: 0;
  padding: 30px 28px 32px;
  border-radius: 20px;
}
.page .sec .ccard > * { width: auto; min-width: 0; }
.page .sec .ccard > .nw,
.page .sec .ccard > h3,
.page .sec .ccard > .rule { grid-column: 1 / -1; }
.page .sec .ccard > h3 { margin-top: 10px; text-wrap: balance; }
.page .sec .ccard > .rule { margin: 18px 0 16px; }
.page .sec .ccard > .rule:first-of-type { margin-top: 20px; }
.page .sec .ccard > .up.k-mute { padding-top: 5px; }          /* label sits on the copy's first line */
/* the fork: one week splitting into two programmes, between the cards */
.page .sec[data-f="259:2"] [data-f="259:45"] { width: 30px; height: 86px; align-self: center; margin: 4px 0; }
.page .sec[data-f="259:2"] [data-f="259:47"] { margin-top: 22px; }

/* ---------- 07 brand line (260:29): the dark photo band, inset like the hero card ---------- */
.page .sec[data-f="260:29"] { padding: 20px 10px; }
.page .sec .band {
  position: relative; left: auto; top: auto; width: 100%; height: auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 72px calc(var(--gut) + 6px) 40px;
  border-radius: 24px;
}
.page .sec .band::after { background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.30) 40%, rgba(0,0,0,.50) 68%, rgba(0,0,0,.56) 100%); }
.page .sec .band [data-f="260:33"] { margin: 4px 0; }
.page .sec .band [data-f="260:37"] { width: 100%; height: 16px; margin-top: 30px; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }

/* ---------- 05 a full toolbox (259:48): the 4 x 2 grid becomes hairlined cells ----------
   Tablet: two columns, every item placed in its row. Phone (end of file): one column. */
.page .sec[data-f="259:48"] {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 0;
}
.page .sec[data-f="259:48"] > * { width: auto; min-width: 0; grid-column: 1 / -1; }
.page .sec[data-f="259:48"] .tline { display: none; }
.page .sec[data-f="259:48"] > [data-f="259:51"] { margin-top: 14px; margin-bottom: 18px; }
/* item label = top of a cell: the sage hairline from Figma's grid */
.page .sec[data-f="259:48"] > p.nw.k-clay,
.page .sec[data-f="259:48"] > p.nw.k-sage { border-top: 1px solid #a9b5a6; padding-top: 18px; margin-top: 16px; }
.page .sec[data-f="259:48"] > h3 { margin-top: 10px; }
.page .sec[data-f="259:48"] > [data-f="418:3"],
.page .sec[data-f="259:48"] > [data-f="418:8"] { margin-top: 10px; }
.page .sec[data-f="259:48"] > [data-f="418:3"],
.page .sec[data-f="259:48"] > [data-f="418:8"] { padding-bottom: 22px; border-bottom: 1px solid #a9b5a6; align-self: stretch; }

.page .sec[data-f="259:48"] > [data-f="259:56"] { grid-area: 3 / 1; }
.page .sec[data-f="259:48"] > [data-f="259:57"] { grid-area: 4 / 1; }
.page .sec[data-f="259:48"] > [data-f="259:59"] { grid-area: 3 / 2; }
.page .sec[data-f="259:48"] > [data-f="259:60"] { grid-area: 4 / 2; }
.page .sec[data-f="259:48"] > [data-f="259:72"] { grid-area: 5 / 1; }
.page .sec[data-f="259:48"] > [data-f="259:73"] { grid-area: 6 / 1; }
.page .sec[data-f="259:48"] > [data-f="259:75"] { grid-area: 5 / 2; }
.page .sec[data-f="259:48"] > [data-f="259:76"] { grid-area: 6 / 2; }
.page .sec[data-f="259:48"] > [data-f="259:78"] { grid-area: 7 / 1; }
.page .sec[data-f="259:48"] > [data-f="259:79"] { grid-area: 8 / 1; }
.page .sec[data-f="259:48"] > [data-f="259:85"] { grid-area: 7 / 2; }
.page .sec[data-f="259:48"] > [data-f="259:86"] { grid-area: 8 / 2; }
.page .sec[data-f="259:48"] > [data-f="259:82"] { grid-area: 9 / 1; }
.page .sec[data-f="259:48"] > [data-f="259:83"] { grid-area: 10 / 1; }
.page .sec[data-f="259:48"] > [data-f="418:3"]  { grid-area: 11 / 1; }
.page .sec[data-f="259:48"] > [data-f="418:5"]  { grid-area: 9 / 2; }
.page .sec[data-f="259:48"] > [data-f="418:6"]  { grid-area: 10 / 2; }
.page .sec[data-f="259:48"] > [data-f="418:8"]  { grid-area: 11 / 2; }
/* legend: each dot shares its label's cell */
.page .sec[data-f="259:48"] > [data-f="259:96"],
.page .sec[data-f="259:48"] > [data-f="259:97"] { grid-area: 12 / 1; }
.page .sec[data-f="259:48"] > [data-f="259:99"],
.page .sec[data-f="259:48"] > [data-f="259:100"] { grid-area: 12 / 2; }
.page .sec[data-f="259:48"] > [data-f="259:96"],
.page .sec[data-f="259:48"] > [data-f="259:99"] { width: 8px; height: 8px; align-self: center; margin-top: 24px; }
.page .sec[data-f="259:48"] > [data-f="259:97"],
.page .sec[data-f="259:48"] > [data-f="259:100"] { padding-left: 18px; margin-top: 24px; justify-self: start; }

/* ---------- 08 cedar barrel (261:61): copy, arch photo, then a vertical stage timeline ----------
   The four rings sit in a 44px left column on one sage line; heading + copy beside each. */
.page .sec[data-f="261:61"] {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 16px;
}
.page .sec[data-f="261:61"] > * { min-width: 0; grid-column: 1 / -1; }
.page .sec[data-f="261:61"] > [data-f="261:70"] { margin-top: 10px; }
.page .sec[data-f="261:61"] > .arch { margin-top: 26px; margin-bottom: 30px; }
.page .sec[data-f="261:61"] > .stage-line {
  grid-column: 1; grid-row: 6 / 13; justify-self: center; align-self: stretch;
  width: 1px; height: auto; margin-top: 22px;
}
.page .sec[data-f="261:61"] > .stage-ring { grid-column: 1; align-self: start; z-index: 1; }
.page .sec[data-f="261:61"] > [data-f="261:76"] { grid-row: 6 / span 2; }
.page .sec[data-f="261:61"] > [data-f="261:83"] { grid-row: 8 / span 2; }
.page .sec[data-f="261:61"] > [data-f="261:90"] { grid-row: 10 / span 2; }
.page .sec[data-f="261:61"] > [data-f="261:97"] { grid-row: 12 / span 2; }
.page .sec[data-f="261:61"] > h3 { grid-column: 2; margin-top: 8px; }
.page .sec[data-f="261:61"] > [data-f="261:79"]  { grid-row: 6; }
.page .sec[data-f="261:61"] > [data-f="261:86"]  { grid-row: 8; }
.page .sec[data-f="261:61"] > [data-f="261:93"]  { grid-row: 10; }
.page .sec[data-f="261:61"] > [data-f="261:100"] { grid-row: 12; }
.page .sec[data-f="261:61"] > [data-f="261:81"],
.page .sec[data-f="261:61"] > [data-f="261:88"],
.page .sec[data-f="261:61"] > [data-f="261:95"],
.page .sec[data-f="261:61"] > [data-f="261:102"] { grid-column: 2; width: auto; margin-top: -8px; margin-bottom: 14px; }
.page .sec[data-f="261:61"] > [data-f="261:81"]  { grid-row: 7; }
.page .sec[data-f="261:61"] > [data-f="261:88"]  { grid-row: 9; }
.page .sec[data-f="261:61"] > [data-f="261:95"]  { grid-row: 11; }
.page .sec[data-f="261:61"] > [data-f="261:102"] { grid-row: 13; margin-bottom: 0; }

/* ---------- 09 founder (261:104) ---------- */
.page .sec[data-f="261:104"] [data-f="261:120"] { aspect-ratio: 4 / 3.4; margin: 10px 0 14px; }
.page .sec[data-f="261:104"] [data-f="261:120"] > img { object-position: 50% 30%; }
.page .sec[data-f="261:104"] [data-f="261:122"] { margin-top: -6px; margin-bottom: 6px; }

/* ---------- 10 four directions (262:2): bordered cards, 2-up on tablet ---------- */
.page .sec[data-f="262:2"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.page .sec[data-f="262:2"] > * { min-width: 0; }
.page .sec[data-f="262:2"] > h2,
.page .sec[data-f="262:2"] > p { grid-column: 1 / -1; }
.page .sec[data-f="262:2"] > p { margin-bottom: 14px; }
.page .sec .world {
  width: 100%; height: auto; overflow: visible;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 26px 26px 18px;
  border-radius: 20px;
}
.page .sec .world > * { width: auto; }
.page .sec .world > h3 { margin-bottom: 4px; }
.page .sec .world > .explore {
  height: auto; margin-top: auto; padding: 10px 0;
  border-bottom: 0; text-decoration: underline 1px; text-underline-offset: 5px;
}

/* ---------- 12 closing (263:2): copy, buttons, then the two-photo collage ---------- */
.page .sec[data-f="263:2"] [data-f="263:11"] { margin-top: 12px; }
.page .sec[data-f="263:2"] [data-f="388:81"] {
  width: min(76%, 400px); align-self: flex-end;
  margin: 40px max(0px, calc(50% - 240px)) 0 0;
}
.page .sec[data-f="263:2"] [data-f="263:20"] {
  width: min(44%, 230px); z-index: 1;
  margin-top: calc(min(76%, 400px) * -0.56 - 16px);
  margin-left: max(0px, calc(50% - 270px));
}
.page .sec[data-f="263:2"] [data-f="283:21"] {
  position: absolute; right: -50px; bottom: 30px; left: auto; top: auto;
  width: 220px; height: 220px;
}

/* ===========================================================================
   PHONES (<= 599px)
   =========================================================================== */
@media (max-width: 599px) {
  /* 02: the struck lines step back from the heading */
  .page .sec[data-f="258:2"] [data-f="258:5"],
  .page .sec[data-f="258:2"] [data-f="258:6"],
  .page .sec[data-f="258:2"] [data-f="258:7"] { font-size: min(30px, 6.1vw); line-height: 1.25; white-space: nowrap; }   /* one line each, so the drawn strike crosses the whole line */

  /* 04: row label above its copy */
  .page .sec .ccard { grid-template-columns: minmax(0, 1fr); padding: 26px 22px 28px; }
  .page .sec .ccard > .up.k-mute { padding-top: 0; margin-bottom: 6px; }

  /* 07 */
  .page .sec .band { padding-top: 60px; padding-bottom: 32px; }
  .page .sec .band [data-f="260:33"] { font-size: 38px; }

  /* 05: one column, items in source order, legend side by side */
  .page .sec[data-f="259:48"] { column-gap: 0; }
  .page .sec[data-f="259:48"] > [data-f="259:56"], .page .sec[data-f="259:48"] > [data-f="259:57"],
  .page .sec[data-f="259:48"] > [data-f="259:59"], .page .sec[data-f="259:48"] > [data-f="259:60"],
  .page .sec[data-f="259:48"] > [data-f="259:72"], .page .sec[data-f="259:48"] > [data-f="259:73"],
  .page .sec[data-f="259:48"] > [data-f="259:75"], .page .sec[data-f="259:48"] > [data-f="259:76"],
  .page .sec[data-f="259:48"] > [data-f="259:78"], .page .sec[data-f="259:48"] > [data-f="259:79"],
  .page .sec[data-f="259:48"] > [data-f="259:85"], .page .sec[data-f="259:48"] > [data-f="259:86"],
  .page .sec[data-f="259:48"] > [data-f="259:82"], .page .sec[data-f="259:48"] > [data-f="259:83"],
  .page .sec[data-f="259:48"] > [data-f="418:3"],  .page .sec[data-f="259:48"] > [data-f="418:5"],
  .page .sec[data-f="259:48"] > [data-f="418:6"],  .page .sec[data-f="259:48"] > [data-f="418:8"] {
    grid-row: auto; grid-column: 1 / -1;
  }
  .page .sec[data-f="259:48"] > [data-f="418:3"] { padding-bottom: 0; border-bottom: 0; }
  .page .sec[data-f="259:48"] > [data-f="259:96"],
  .page .sec[data-f="259:48"] > [data-f="259:97"] { grid-area: 21 / 1; }
  .page .sec[data-f="259:48"] > [data-f="259:99"],
  .page .sec[data-f="259:48"] > [data-f="259:100"] { grid-area: 21 / 2; }

  /* 09: the founder portrait keeps its Figma proportion on a phone */
  .page .sec[data-f="261:104"] [data-f="261:120"] { aspect-ratio: 490 / 560; }

  /* 10: one card per row */
  .page .sec[data-f="262:2"] { grid-template-columns: minmax(0, 1fr); }

  /* 12: the 68px closing line eases to the page's h2 size, so it doesn't strand single words */
  .page .sec[data-f="263:2"] [data-f="263:6"] { font-size: 40px; line-height: 1.1; }
  .page .sec[data-f="263:2"] [data-f="283:21"] { width: 170px; height: 170px; right: -56px; bottom: 34px; }
}