/* ─────────────────────────────────────────────────────────────
   The inner pages: services, guides, locations, the about page, and
   the About section on the home page.

   They are built from the home page's own parts (the chapter header,
   the scattered work rows, the department list, the contact form, the
   blue footer), so this file only adds what the home page never
   needed: reading-length copy, steps, questions and photographs.
   ───────────────────────────────────────────────────────────── */

html { background: var(--bg); }


/* ---------- opener ----------
   The chapter header from the home page, with the department's piece
   playing behind it on its own canvas. */
.lp-open {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lp-open .popen__geo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.lp-open .popen__geo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-open .popen__geo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 34%, rgba(0,0,0,0.78) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.0) 62%);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.crumbs a { text-decoration: none; transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: var(--green); }
.crumbs i { font-style: normal; color: var(--text-4); }
.crumbs [aria-current] { color: var(--text); }

.lp-title {
  align-self: end;
  margin: 0 0 4vh;
  max-width: 22ch;
  font-weight: 700;
  font-size: clamp(36px, 5.6vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.lp-title .t2 { display: block; font-weight: 400; color: var(--text-2); letter-spacing: -0.035em; }
.lp-open__foot {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 24px;
}
.lp-open__foot .pill { grid-column: 1 / 4; justify-self: start; }
.lp-kicker {
  grid-column: 4 / -1;
  margin: 0;
  font-family: var(--font);
  font-size: clamp(17px, 1.5vw, 26px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  max-width: 30em;
}

/* ---------- a labelled band: tag in the first column, content after ---------- */
.band {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px 0;
  padding: clamp(70px, 14vh, 170px) var(--gutter);
}
.band > .tag { grid-column: 1 / 2; align-self: start; padding-top: 1.1em; }
/* A block's label is its heading; it keeps the small tracked voice. */
h2.tag, h3.tag { margin: 0; font-weight: 600; line-height: inherit; }
.band > .band__main { grid-column: 2 / -1; min-width: 0; }
.band--tight { padding-top: clamp(40px, 7vh, 90px); padding-bottom: clamp(40px, 7vh, 90px); }
.band--rule { border-top: 1px solid var(--line); }

.lead {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(24px, 2.7vw, 48px);
  line-height: 1.26;
  letter-spacing: -0.01em;
  max-width: 25em;
}
.lead b { font-weight: 700; }
.lead + .sublead { margin-top: clamp(24px, 4vh, 48px); }
.sublead {
  margin: 0 0 0 auto;
  max-width: 34em;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
  color: var(--text-2);
}

/* ---------- what you get ---------- */
.points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 64px) clamp(28px, 4vw, 72px);
}
.point { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line-2); }
.point__n { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; color: var(--green); }
.point__t {
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(19px, 1.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.point__d { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.7; color: var(--text-2); }

/* ---------- reading sections ---------- */
.reads { padding: 0 var(--gutter); }
.read {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px 0;
  padding: clamp(48px, 9vh, 110px) 0;
  border-top: 1px solid var(--line);
}
.read__h {
  grid-column: 1 / 4;
  margin: 0;
  padding-right: clamp(20px, 4vw, 80px);
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.read__h b { font-weight: 700; }
.read__body { grid-column: 4 / -1; display: grid; gap: 1.1em; align-content: start; }
.read__body p { margin: 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.78; color: var(--text-2); max-width: 38em; }
.read__body a { color: var(--text); text-decoration-color: var(--line-3); text-underline-offset: 3px; transition: color var(--t-fast) var(--ease); }
.read__body a:hover { color: var(--green); }
.read__list { list-style: none; margin: 6px 0 0; padding: 0; max-width: 40em; }
.read__list li {
  position: relative;
  padding: 13px 0 13px 28px;
  border-top: 1px solid var(--line);
  font-size: clamp(14px, 1.08vw, 17px);
  line-height: 1.6;
  color: var(--text);
}
.read__list li::before {
  content: '';
  position: absolute;
  left: 2px; top: 1.45em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--grad);
}

/* A table for comparisons in the guides; scrolls sideways on a phone. */
.read__table { overflow-x: auto; max-width: 100%; }
.read__table table { border-collapse: collapse; width: 100%; min-width: 440px; font-size: clamp(13px, 1vw, 15px); }
.read__table th, .read__table td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); line-height: 1.55; }
.read__table th { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); border-top: 0; }
.read__table td { color: var(--text-2); }
.read__table td:first-child { color: var(--text); font-weight: 700; }

/* ---------- how it runs ---------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* One row on a wide screen however many steps there are (--n is set
     in the markup); pairs on a tablet; a single column on a phone. */
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
}
.step { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 26px; }
.step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line-2);
}
.step::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: var(--grad);
  transform: scaleX(var(--fill, 0));
  transform-origin: 0 50%;
}
.step__n {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-4);
}
.step__t { margin: 0; font-family: var(--font); font-weight: 700; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.25; }
.step__d { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.7; color: var(--text-2); }

/* ---------- work rows on an inner page ---------- */
.lp-work { padding-top: clamp(40px, 8vh, 100px); overflow-x: clip; }
.lp-work__head {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0 var(--gutter);
}
.lp-work__head .tag { grid-column: 1 / 2; padding-top: 1.1em; }
.lp-work__head h2 {
  grid-column: 2 / -1;
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(26px, 2.9vw, 52px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.lp-work__head h2 b { font-weight: 700; }

/* ---------- questions ---------- */
.faq { display: grid; }
.faq details { border-top: 1px solid var(--line-2); }
.faq details:last-child { border-bottom: 1px solid var(--line-2); }
.faq summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
  padding: clamp(18px, 2.6vh, 28px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  transition: color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green); }
.faq summary::after {
  content: '+';
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.1;
  color: var(--text-3);
  transition: transform var(--t-med) var(--ease), color var(--t-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--green); }
.faq details p {
  margin: 0;
  padding: 0 0 clamp(20px, 3vh, 32px);
  max-width: 44em;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
  color: var(--text-2);
}

/* ---------- keep going: a list of where to read next ---------- */
.nexts { list-style: none; margin: 0; padding: 0; }
.nexts a {
  display: grid;
  grid-template-columns: 2.6em 1fr auto;
  align-items: baseline;
  gap: 6px 14px;
  padding: clamp(16px, 2.6vh, 28px) 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-med) var(--ease);
}
.nexts li:last-child a { border-bottom: 1px solid var(--line); }
.nexts a:hover { color: var(--text); }
.nexts__n { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; color: var(--text-4); }
.nexts__t {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.nexts__c {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nexts a:hover .nexts__c { color: var(--green); transform: translateX(4px); }

/* ---------- an index: every page of one kind, in columns ---------- */
.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 0 clamp(24px, 3vw, 56px);
}
.index-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 22px 0 26px;
  border-top: 1px solid var(--line-2);
  text-decoration: none;
  color: var(--text);
}
.index-card__t {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  transition: color var(--t-fast) var(--ease);
}
.index-card:hover .index-card__t { color: var(--green); }
.index-card__d { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.index-group + .index-group { margin-top: clamp(50px, 9vh, 110px); }
.index-group__h {
  margin: 0 0 clamp(20px, 3vh, 36px);
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.index-group__h b { font-weight: 700; }
.index-group__p { margin: -8px 0 clamp(20px, 3vh, 36px); max-width: 44em; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.7; color: var(--text-2); }

/* ---------- the enquiry: the home page's contact, carried here ---------- */
.lp-enquire { min-height: 0; padding-top: 12vh; padding-bottom: 14vh; }
.lp-enquire .contact__word { margin-bottom: 7vh; font-size: clamp(54px, 10vw, 190px); }

/* ---------- the link band: every part of the site, above the footer ---------- */
.linkband {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 36px 0;
  padding: clamp(50px, 9vh, 110px) var(--gutter);
  border-top: 1px solid var(--line);
}
.linkband__col { grid-column: span 1; display: grid; gap: 14px; align-content: start; padding-right: 18px; }
.linkband__label { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-4); }
.linkband ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.linkband a { font-family: var(--font); font-size: 13px; line-height: 1.4; text-decoration: none; color: var(--text-2); transition: color var(--t-fast) var(--ease); }
.linkband a:hover { color: var(--green); }

/* ---------- photographs ----------
   Phone pictures taken in different rooms at different hours. Shown in
   black and white they sit together and with the rest of the page;
   the colour comes back under the pointer. */
.ph {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
}
.ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.96);
  transform: scale(1.08);
  transition: filter 900ms var(--ease);
  will-change: transform;
}
@media (hover: hover) { .ph:hover img { filter: grayscale(0) contrast(1) brightness(1); } }
.ph figcaption {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.ph::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(0deg, rgba(0,0,0,0.6), transparent);
  pointer-events: none;
}
.ph figcaption { z-index: 1; }

/* ---------- the founder's facts and the photo pair (About page) ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px 28px;
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
}
.facts dt { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); }
.facts dd { margin: 6px 0 0; font-family: var(--font); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.45; color: var(--text); }
.about__row--two {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 36px);
  align-items: end;
  padding: clamp(40px, 8vh, 100px) var(--gutter) 0;
}
.about__row--two .ph:nth-child(1) { grid-column: 1 / 5; aspect-ratio: 4 / 3; }
.about__row--two .ph:nth-child(2) { grid-column: 5 / 7; aspect-ratio: 4 / 5; }
.ph--land { aspect-ratio: 4 / 3 !important; }

/* ---------- the About page ---------- */
.ab-hero { position: relative; }
.ab-split {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(28px, 5vh, 60px) clamp(16px, 2vw, 36px);
  padding: clamp(60px, 12vh, 150px) var(--gutter);
  align-items: start;
}
.ab-split--rule { border-top: 1px solid var(--line); }
.ab-split > .tag { grid-column: 1 / -1; }
.ab-split__media { grid-column: 1 / 4; position: sticky; top: 14vh; }
.ab-split__media .ph { aspect-ratio: 4 / 5; max-height: 76vh; }
.ab-split__copy { grid-column: 4 / -1; display: grid; gap: clamp(20px, 3vh, 34px); padding-left: clamp(0px, 2vw, 44px); }
.ab-split--flip .ab-split__media { grid-column: 4 / -1; order: 2; }
.ab-split--flip .ab-split__copy { grid-column: 1 / 4; padding-left: 0; padding-right: clamp(0px, 2vw, 44px); }
.ab-h {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ab-h b { font-weight: 700; }
.ab-p { margin: 0; max-width: 36em; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.78; color: var(--text-2); }
.ab-p b { color: var(--text); font-weight: 700; }
.ab-p a { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 0.18em; }
.ab-p a:hover { text-decoration-color: var(--green); }
.ab-wide { padding: 0 var(--gutter); }
.ab-wide .ph { aspect-ratio: 21 / 9; }
.ab-pair {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 36px);
  padding: clamp(16px, 2vw, 36px) var(--gutter) 0;
}
.ab-pair .ph:nth-child(1) { grid-column: 1 / 4; aspect-ratio: 4 / 3; }
.ab-pair .ph:nth-child(2) { grid-column: 4 / -1; aspect-ratio: 4 / 3; }

/* The card that leads out to the founder's own site. Blue, like the
   footer: the one coloured surface on a dark page. */
.as-card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 24px;
  margin: clamp(40px, 8vh, 100px) var(--gutter);
  padding: clamp(32px, 5vw, 80px);
  min-height: 46vh;
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
  overflow: hidden;
}
.as-card::before {
  content: '';
  position: absolute;
  right: -12%; top: -40%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 9vw rgba(255, 255, 255, 0.05), 0 0 0 18vw rgba(255, 255, 255, 0.04);
  transition: transform 1.2s var(--ease);
}
.as-card:hover::before { transform: scale(1.06); }
.as-card > * { position: relative; }
.as-card__tag { grid-column: 1 / -1; align-self: start; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.as-card__t {
  grid-column: 1 / 5;
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.as-card__t b { font-weight: 700; }
.as-card__d { grid-column: 1 / 4; margin: 0; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.7; color: rgba(255,255,255,0.86); max-width: 34em; }
.as-card__go {
  grid-column: 5 / -1;
  justify-self: end;
  align-self: end;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.as-card__go i { font-style: normal; display: inline-block; margin-left: 8px; transition: transform var(--t-fast) var(--ease); }
.as-card:hover .as-card__go i { transform: translate(3px, -3px); }

/* ---------- glossary ---------- */
.glossary { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 clamp(24px, 3vw, 56px); }
.glossary > div { padding: 18px 0 22px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.glossary dt { font-family: var(--font); font-weight: 700; font-size: clamp(16px, 1.25vw, 20px); letter-spacing: -0.01em; }
.glossary dd { margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.glossary dd a { color: var(--text); text-decoration: none; white-space: nowrap; }
.glossary dd a:hover { color: var(--green); }
.glossary > div:target dt { color: var(--green); }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; align-content: center; gap: 28px; padding: 120px var(--gutter) 100px; }
.lost__n { margin: 0; font-weight: 400; font-size: clamp(110px, 24vw, 420px); line-height: 0.8; letter-spacing: -0.06em; }
.lost__t { margin: 0; font-family: var(--font); font-size: clamp(20px, 2.2vw, 36px); line-height: 1.3; max-width: 22em; }
.lost__links { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- inner-page footer: the home page's blue room, shorter ---------- */
.footer--inner { min-height: 78vh; min-height: 78svh; padding-top: 9vh; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .band > .tag { grid-column: 1 / -1; padding-top: 0; }
  .band > .band__main { grid-column: 1 / -1; }
  .lp-work__head .tag, .lp-work__head h2 { grid-column: 1 / -1; }
  .lp-work__head .tag { padding-top: 0; margin-bottom: 18px; }
  .read__h { grid-column: 1 / -1; padding-right: 0; }
  .read__body { grid-column: 1 / -1; }
  .linkband__col { grid-column: span 2; }
}

/* ---------- phones ---------- */
@media (max-width: 720px) {
  .lp-title { font-size: clamp(34px, 10.4vw, 60px); max-width: none; }
  .lp-open__foot { grid-template-columns: 1fr; gap: 22px; }
  .lp-open__foot .pill, .lp-kicker { grid-column: 1 / -1; }
  .lp-open__foot .pill { order: 2; }
  .lp-kicker { font-size: 17px; }
  .band { padding: 9vh var(--gutter); gap: 18px 0; }
  .lead { font-size: clamp(21px, 6vw, 30px); }
  .sublead { margin-left: 0; }
  .read { padding: 7vh 0; gap: 18px 0; }
  .read__h { font-size: clamp(25px, 7.4vw, 36px); }
  .nexts a { grid-template-columns: 2.2em 1fr; }
  .nexts__c { grid-column: 2 / -1; }
  .linkband__col { grid-column: span 3; }
  .linkband { gap: 30px 0; }
  .lp-enquire .contact__word { font-size: clamp(50px, 16vw, 100px); }
  .steps { grid-template-columns: 1fr; gap: 30px; }

  .about__row--two { padding-top: 6vh; gap: 12px; }
  .about__row--two .ph:nth-child(1), .about__row--two .ph:nth-child(2) { grid-column: 1 / -1; }

  .ab-split { padding: 8vh var(--gutter); }
  .ab-split__media, .ab-split--flip .ab-split__media { grid-column: 1 / -1; position: static; order: 0; }
  .ab-split__copy, .ab-split--flip .ab-split__copy { grid-column: 1 / -1; padding: 0; }
  .ab-wide .ph { aspect-ratio: 4 / 3; }
  .ab-pair .ph:nth-child(1), .ab-pair .ph:nth-child(2) { grid-column: 1 / -1; }
  .as-card { margin: 6vh var(--gutter); min-height: 0; padding: 32px 24px 28px; }
  .as-card__t, .as-card__d, .as-card__go { grid-column: 1 / -1; }
  .as-card__go { justify-self: start; margin-top: 12px; }
  .footer--inner { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ph img { transform: none; }
  .step::after { transform: scaleX(1); }
}