/* ============================================================
   GMDS · about

   Loaded after pages.css, which supplies the room, the nav, the page head and
   the footer. This file is the founder, the company, the four steps and the
   service list.

   Same grammar as the rest of the site: one-pixel hairlines, sharp corners,
   violet for anything interactive, scarlet held back for display. The one
   thing this page has that no other page does is a photograph of a person,
   and it is the first and largest element on it for that reason.
   ============================================================ */

/* --- reveal on scroll ---------------------------------------------------
   Added by script, so every section is readable with JavaScript off. */

.will-in {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease);
}
.will-in.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .will-in { opacity: 1; transform: none; transition: none; }
}

/* --- the company --------------------------------------------------------- */

/* The small line above each section title.

   It lived in the founder block and went with it when that was removed, which
   left three kickers on this page as unstyled paragraphs: body size, sentence
   case, no tracking. Scarlet, tracked out and set in caps is what it always
   was, and it is what the same line does on every other page of the site. */
.story__kicker, .how__kicker, .does__kicker {
  margin: 0 0 0.8rem;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.28em; text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--scarlet-lit);
}

.story {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
  padding: clamp(2.5rem, 7vh, 4rem) 0;
  border-top: 1px solid var(--edge);
}

.story__title, .how__title, .does__title {
  margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-weight: 800; font-stretch: 118%;
  line-height: 1.02; letter-spacing: -0.035em;
  color: var(--paper);

  /* Even lines instead of a long one and a short one.

     "If something can be done better, it should be." was breaking as three
     ragged lines, the last of them two words, which is what made the section
     look wrong: a display heading is a shape before it is a sentence, and a
     shape with a stub on the bottom reads as a mistake. balance asks the
     browser to even the lines out. Ignored by anything that does not support
     it, which just gets the old ragged wrap. */
  text-wrap: balance;
}

.story__body { max-width: 40rem; }

/* The opening line of the column, brighter and a size up, so the paragraph
   under it reads as the explanation rather than as more of the same. */
.story__lede {
  margin: 0 0 1.2rem;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--paper);
}
.story__body p:not(.story__lede) {
  margin: 0 0 1.05rem;
  font-size: clamp(0.94rem, 1.05vw, 1.02rem);
  line-height: 1.68;
  color: var(--paper-dim);
}
.story__body p:last-child { margin-bottom: 0; }

/* The first inline links in this column. Underlined rather than coloured: two
   product names in the accent, in a section that already has a scarlet kicker
   above them, would be three red things competing. The underline is offset so
   it clears the descenders. */
.story__body a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--violet-a50);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 200ms var(--ease-out),
              text-decoration-color 200ms var(--ease-out);
}
.story__body a:hover,
.story__body a:focus-visible {
  color: var(--violet-soft);
  text-decoration-color: var(--violet);
}

/* --- how we work --------------------------------------------------------
   Four steps down a rule, lit as you reach them. The number turns and the
   segment of rule beside it fills, so where you are in the sequence is
   readable without counting.
   ---------------------------------------------------------------------- */

.how {
  padding: clamp(3rem, 8vh, 4.5rem) 0;
  border-top: 1px solid var(--edge);
}

/* Two columns, the same two the sections above use.

   Everything here was stacked down the left inside a 42rem cap, which left the
   whole right-hand side of a full-width section empty while the paragraph it
   could have held sat under the heading squeezing itself into 34rem.

   Placed by grid rather than by rewrapping the markup: the kicker and the
   title take the first column, the note takes the second and spans both rows,
   so the three elements stay siblings and the heading order a screen reader
   hears is unchanged. */
.how__head {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.how__kicker { grid-column: 1; grid-row: 1; }
.how__title  { grid-column: 1; grid-row: 2; }
.how__note   { grid-column: 2; grid-row: 1 / 3; }

@media (max-width: 860px) {
  /* One column again, and the note goes back under the title it belongs to. */
  .how__head { grid-template-columns: minmax(0, 1fr); }
  .how__kicker, .how__title, .how__note { grid-column: 1; grid-row: auto; }
}
.how__note {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.04rem);
  line-height: 1.65;
  color: var(--paper-dim);
  max-width: 46ch;
}

.how__list {
  list-style: none;
  margin: 0; padding: 0;
}

.how__step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.6rem, 4vh, 2.4rem) 0 clamp(1.6rem, 4vh, 2.4rem)
           clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid var(--edge);
}
.how__step:last-child { border-bottom: 1px solid var(--edge); }

/* The rail down the left, and the part of it that has filled. Two elements
   rather than a border, so the fill can be a scaled transform instead of a
   width that lays out. */
.how__step::before,
.how__step::after {
  content: '';
  position: absolute; left: 0; top: -1px; bottom: -1px;
  width: 2px;
}
.how__step::before { background: var(--edge); }
.how__step::after {
  background: oklch(64% 0.21 300);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 520ms var(--ease);
}
.how__step.is-at::after,
.how__step.is-done::after { transform: none; }

.how__n {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; font-stretch: 118%;
  line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ghost);
  transition: color 420ms var(--ease-out);
}
.how__step.is-done .how__n { color: var(--ghost-done); }
.how__step.is-at .how__n { color: var(--scarlet-lit); }

.how__text h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 800; font-stretch: 108%;
  line-height: 1.2; letter-spacing: -0.02em;
  color: var(--paper);
}
.how__text p {
  margin: 0;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.65;
  color: var(--paper-dim);
  max-width: 40rem;
}

@media (prefers-reduced-motion: reduce) {
  .how__step::after { transition: none; }
}

/* --- what we do ---------------------------------------------------------
   A reference list. Six headings you can scan in three seconds, with the
   detail there when a heading turns out to be the right one. One open at a
   time, because everything expanded is a wall of text with headings in it,
   which is what the closed state exists to avoid.
   ---------------------------------------------------------------------- */

.does {
  padding: clamp(3rem, 8vh, 4.5rem) 0;
  border-top: 1px solid var(--edge);
}

.does__head { max-width: 40rem; margin-bottom: clamp(1.8rem, 4.5vh, 2.6rem); }

.does__list { border-top: 1px solid var(--edge); }
.does__row { border-bottom: 1px solid var(--edge); }
.does__row h3 { margin: 0; font-size: inherit; font-weight: inherit; }

.does__head-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  width: 100%;
  padding: clamp(1rem, 2.6vh, 1.4rem) 0;
  border: 0; background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.does__head-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }

.does__n {
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--paper-mut);
  font-variant-numeric: tabular-nums;
  transition: color 260ms var(--ease-out);
}
.does__head-btn[aria-expanded="true"] .does__n { color: var(--scarlet-lit); }

.does__name {
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 700; font-stretch: 104%;
  line-height: 1.2; letter-spacing: -0.02em;
  color: var(--paper-dim);
  transition: color 260ms var(--ease-out), font-stretch 380ms var(--ease);
}
.does__head-btn:hover .does__name { color: var(--paper); }
.does__head-btn[aria-expanded="true"] .does__name {
  color: var(--paper);
  font-weight: 800; font-stretch: 114%;
}

/* A plus that becomes a minus. Two rules, one of which rotates out: no icon
   font, no SVG, and it animates on a transform. */
.does__sign {
  position: relative;
  flex: none;
  width: 0.85rem; height: 0.85rem;
}
.does__sign::before,
.does__sign::after {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 100%; height: 2px;
  margin-top: -1px;
  background: var(--paper-mut);
  transition: transform 380ms var(--ease), background 260ms var(--ease-out);
}
.does__sign::after { transform: rotate(90deg); }
.does__head-btn[aria-expanded="true"] .does__sign::before,
.does__head-btn[aria-expanded="true"] .does__sign::after {
  background: var(--scarlet-lit);
}
.does__head-btn[aria-expanded="true"] .does__sign::after { transform: rotate(0deg); }

/* grid-template-rows on ONE wrapper child, so the panel opens to whatever it
   needs and nothing is measured in JS. One child deliberately: with several,
   only the first row is declared and the rest land in implicit rows that
   never collapse, which is how the mobile menu on this site shipped stuck
   half open. */
.does__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease);
}
.does__panel > div { overflow: hidden; min-height: 0; }
.does__panel.is-open { grid-template-rows: 1fr; }

/* Indented to start under the heading rather than under the number. Copy that
   begins to the left of the thing it belongs to reads as a separate note. The
   1.1rem is the measured width of a two-digit number at this size and
   tracking; the gap after it is the same one the button uses. Checked at
   1440, 900, 620 and 390: the number comes out at 17.5px every time. */
.does__panel p {
  margin: 0;
  padding: 0 0 clamp(1.2rem, 3vh, 1.7rem)
           calc(1.1rem + clamp(0.9rem, 2.5vw, 1.6rem));
  max-width: 46rem;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.68;
  color: var(--paper-dim);
}

@media (prefers-reduced-motion: reduce) {
  .does__panel, .does__sign::before, .does__sign::after, .does__name { transition: none; }
}

/* --- the closing ask -----------------------------------------------------

   This used to sit under a row of registered facts, so it carried its own
   rule to separate itself from them. The facts are gone and the section's own
   rule is now three rem above it: keeping both drew two hairlines a hand's
   width apart, which reads as a mistake rather than as a division.
   ---------------------------------------------------------------------- */

.reg {
  padding: clamp(3rem, 8vh, 4.5rem) 0 clamp(4rem, 10vh, 6rem);
  border-top: 1px solid var(--edge);
}

.reg__end {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.reg__end p {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 700; font-stretch: 106%;
  line-height: 1.4; letter-spacing: -0.015em;
  color: var(--paper);
}

/* --- narrow -------------------------------------------------------------- */

@media (max-width: 900px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }

  .how__step { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
}

@media (max-width: 620px) {
      
  .reg__end { flex-direction: column; align-items: flex-start; }
}