/* JayLM Studio Home: the studio's paper identity with the nine websites on real-time 3D devices, set after
   tmncreative.com (the reference Jose named): Mona Sans at light-to-medium weights for the big headings (600 display,
   500 names), one accent (vermilion), pill buttons, soft cards and device frames (var(--radius), var(--shadow) from
   site.css), paper and paper-2 bands with generous rhythm. Loads after site.css, pages.css and studio.css on the Home
   only. Home-only classes that would collide with site.css carry the hm- prefix. */

@property --glow { syntax: '<color>'; inherits: true; initial-value: #e6dac4; }

.page-home {
  --device: #1f2023;       /* fallback device frames */
  --device-2: #2a2b2f;
  --device-ring: #45474c;  /* the thin lighter ring inside the phone bezel */

  --t-display: clamp(2.75rem, 5.2vw, 5.6rem);
  --t-chapter: clamp(2.25rem, 3.6vw, 3.75rem);
  --t-quote: clamp(1.5rem, 2.4vw, 2.05rem);

  /* Where the devices sit on the stage (the glow is centred on them) */
  --gx: 74%; --gy: 46%; --grx: 30%; --gry: 42%;
}
@media (min-width: 900px) and (max-height: 760px) { .page-home { --t-display: clamp(2.5rem, 4.6vw, 4.8rem); } }

/* Base inside the Home's own content */
.page-home main p { max-width: 62ch; }
.page-home main h1, .page-home main h2, .page-home main h3 { color: var(--text); }
.page-home main ul, .page-home main ol { margin: 0; padding: 0; list-style: none; }
html:not(.home-js) .needs-js { display: none !important; }

/* Type roles: display 600, section headings 600, names 500; body copy unchanged */
.display { font-size: var(--t-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1; display: grid; overflow-wrap: anywhere; }
.display span { display: block; }
.display__indent { padding-left: 0.5em; }
.display__arrow { font-style: normal; color: var(--signal); margin-left: 0.12em; }
.hm-h2 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; max-width: 20ch; overflow-wrap: anywhere; text-wrap: balance; }
.lede { font-size: var(--t-lede); line-height: 1.45; color: var(--text-2); max-width: 36ch; }
.quote { font-family: var(--serif); font-weight: 400; font-size: var(--t-quote); line-height: 1.25; color: var(--text); }
.hm-head { display: grid; gap: 14px; }
.hm-head p { color: var(--text-2); font-size: var(--t-lede); line-height: 1.45; max-width: 48ch; }

/* Buttons: pills. Primary = ink fill with a trailing arrow, secondary = outline */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 1.5px solid transparent; max-width: 100%; overflow-wrap: anywhere; text-align: center; transition: background-color .2s, border-color .2s; }
.button--paper { background: var(--text); color: var(--on-light); border-color: var(--text); box-shadow: var(--shadow-s); }
.button--paper::after { content: '→'; font-weight: 500; transition: transform .2s var(--ease); }
.button--paper:hover { background: var(--ink-2); border-color: var(--ink-2); }
.button--paper:hover::after { transform: translateX(3px); }
.button--outline { background: transparent; color: var(--text); border-color: var(--line-strong); }
.button--outline:hover { border-color: var(--text); }

/* Layout primitives */
.step-body { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.hm-pricing, .offers, .hm-process, .hm-faq, .ask { padding: var(--pad-3) var(--gutter); }
.hm-pricing__inner, .offers__inner, .hm-process__inner, .hm-faq__inner, .ask__inner { max-width: var(--max); margin-inline: auto; }

/* The story: a sticky stage under chapters that scroll natively over it */
.hm-story { position: relative; }
.stage { position: sticky; top: 0; z-index: 0; height: 100svh; overflow: hidden; pointer-events: none; --glow: #e6dac4; transition: --glow .35s linear; }
/* A soft halo in the shown website's colour behind the devices: on the paper ground it reads as a tint, not a light */
.stage-glow { position: absolute; inset: 0; background: radial-gradient(var(--grx) var(--gry) at var(--gx) var(--gy), color-mix(in srgb, var(--glow) 22%, transparent), transparent 72%); }
.stage-canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.has-3d .stage-canvas { display: block; }
.has-3d .devices { display: none; }
.chapters { position: relative; z-index: 1; margin-top: -100svh; }
.hm-step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
.hm-step--note { min-height: 56svh; }
.step-text { max-width: 36rem; }
.hero { min-height: 100svh; }

/* Fallback devices (also what everyone sees until the first 3D frame, and without the CDN, WebGL or JS) */
.devices { position: absolute; }
.device--laptop { position: relative; z-index: 1; }
.screen { position: relative; overflow: hidden; background: #000; }
/* Only the shown capture has a box: the sixteen lazy ones never load unless a chapter or chip asks for them */
.screen img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.screen img.is-shown { display: block; }
.screen--laptop { aspect-ratio: 16 / 10; border: 3px solid var(--device); border-bottom-width: 12px; border-radius: 14px 14px 0 0; box-shadow: var(--shadow); }
.laptop__base { height: 12px; margin: 0 -1.5%; background: var(--device-2); border-radius: 0 0 10px 10px; }
.device--phone { position: absolute; right: -1%; bottom: -2%; width: 23%; z-index: 2; border: 3px solid var(--device); border-radius: 26px; background: #000; overflow: hidden; box-shadow: 0 0 0 4px var(--ground), var(--shadow); }
.screen--phone { aspect-ratio: 390 / 844; }
@media (min-width: 900px) {
  .devices { left: 52%; width: 44%; top: 46%; translate: 0 -50%; padding-bottom: 7%; }
  /* The shared bar is fixed over the page: the opening never slides under it */
  .hero { padding-top: calc(var(--bar-h) + 24px); }
}
@media (max-width: 899px) {
  /* Phones: no stage. The opening reads first, then the nine websites as a row of iPhone mockups that scrolls sideways
     while the page keeps scrolling vertically; the chapters are the cards of that row, each with its own capture.
     Nothing intercepts the scroll: the row is native scroll-snap, the script only follows it. */
  .stage { display: none; }
  .chapters { margin-top: 0; }
  .hm-step { min-height: 0; padding-block: 0; justify-content: flex-start; }
  .hero { padding-top: calc(var(--bar-h) + 28px); padding-bottom: 40px; }
  html:not(.ready) .hero { padding-top: 28px; }
  .scroll-hint { margin-top: 0; }
  .hm-story, .hm-work, .projects { min-width: 0; }
  .work__head { padding-top: 24px; }
  .work__controls { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
  .ctrl { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); font: 500 1.125rem/1 var(--sans); cursor: pointer; }
  .ctrl:disabled { color: var(--muted); border-color: var(--line); cursor: default; }
  .work__count { font-size: var(--t-meta); font-weight: 600; color: var(--text); min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; }
  /* Card width: at most 280 px; in portrait also capped by the height so the phone, its name and arrow fit one screen
     (never below 180 px — in landscape the height cap would collapse the cards, Codex's review of PR #31) */
  .page-home .projects { --card: min(68vw, 280px); display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 20px var(--gutter) 40px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  /* An end spacer as wide as the scrollport minus one card: the last cards can align at the row's start too, so the
     counter never falls back to an earlier card at the end of the row (Codex's review of the first release) */
  .page-home .projects::after { content: ''; flex: 0 0 max(0px, calc(100% - var(--card) - 20px)); }
  @media (orientation: portrait) { .page-home .projects { --card: max(180px, min(68vw, 280px, calc((100svh - 228px) * .462))); } }
  .page-home .projects::-webkit-scrollbar { display: none; }
  /* The card: wide enough to read, never taller than the screen minus the bar, the dock and the name under the phone,
     so the visitor sees what the website is and that it opens, together with the phone (measured at 320×700 to 414×844) */
  .chapter { position: relative; flex: 0 0 var(--card); width: var(--card); min-width: 0; scroll-snap-align: start; }
  .chapter .step-body { width: auto; margin: 0; display: grid; gap: 14px; }
  .chapter .step-body > * { min-width: 0; max-width: 100%; }
  /* The iPhone: a dark bezel with a thin lighter ring, the dynamic island, a status bar over the capture's own top bar */
  /* (site.css styles .phone for the Foster case: its border, width and clipping are undone here) */
  .phone--card { display: block; width: var(--card); padding: 10px; border: 0; overflow: visible; justify-self: start; background: var(--device); border-radius: 44px; box-shadow: inset 0 0 0 1.5px var(--device-ring), var(--shadow); }
  .phone__screen { position: relative; display: block; width: calc(var(--card) - 20px); height: calc((var(--card) - 20px) * 844 / 390); border-radius: 34px; overflow: hidden; background: var(--bar, #fff); color: var(--bar-text, var(--ink)); }
  .phone__island { position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 29%; height: 22px; border-radius: 999px; background: #000; z-index: 1; }
  .phone__status { position: absolute; left: 0; right: 0; top: 0; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 0; font-size: 12px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
  .phone__icons { display: inline-flex; align-items: center; gap: 4px; }
  .phone__icons svg { display: block; fill: currentColor; }
  .phone--card img { position: absolute; left: 0; top: 38px; display: block; width: 100%; height: calc(100% - 38px); object-fit: cover; object-position: top center; }
  .projects .chapter__still { display: none; }
}
@media (min-width: 900px) {
  .phone--card, .work__controls { display: none; }
}
/* Without the Home script (JavaScript off or the script failed) nothing can swap the screens, so the story becomes a
   static page: the devices once at the top with the first website, the opening, then each chapter with its own still
   (the <noscript> image in the chapter) instead of a pinned stage that would keep one website beside every name */
html:not(.home-js) .stage { position: absolute; top: 0; left: 0; right: 0; }
html:not(.home-js) .chapters { margin-top: 0; }
html:not(.home-js) .hm-step:not(.hero) { min-height: 0; padding-top: 24px; }
.chapter__still { display: block; width: 100%; max-width: 36rem; height: auto; margin-top: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--ground-2); }
@media (min-width: 900px) {
  html:not(.home-js) .chapter .step-body { align-items: start; }
  .chapter__still { max-width: none; margin-top: 0; }
}
@media (max-width: 360px) { .page-home { --t-lede: 1.0625rem; } .hero__text { gap: 12px; } .hero__actions .button { font-size: .9375rem; padding-inline: 18px; } }
/* Short phones (568-640 px tall): a tighter opening so the action stays on the first screen */
@media (max-width: 899px) and (max-height: 640px) {
  .hero__text { gap: 12px; }
}

/* Hero (first chapter): headline, lede, two actions, the price hint, nine previews, scroll hint */
.hero__text { display: grid; gap: 22px; justify-items: start; container-type: inline-size; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; max-width: 100%; }
.hero__hint { display: grid; gap: 2px; margin-top: -6px; font-size: var(--t-meta); line-height: 1.5; color: var(--muted); max-width: none; }
.hero__hint-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
/* Compact to the eye, 44 px to the thumb: the links keep the line height through negative margins */
.hero__hint-links a { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; color: var(--text); font-weight: 500; text-underline-offset: 4px; }
.hero__hint-sep { color: var(--line-strong); }
.chips { display: grid; gap: 10px; margin-top: 8px; width: 100%; }
.chips__label { color: var(--muted); font-size: var(--t-label); font-weight: 600; font-stretch: 90%; letter-spacing: .02em; }
.chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; font-size: 0.875rem; font-weight: 550; white-space: nowrap; transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease; }
.hm-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; }
.hm-chip:hover, .hm-chip:focus-visible { border-color: var(--text); color: var(--text); }
.hm-chip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--on-light); }
.hm-chip[aria-pressed="true"]::before { background: var(--signal); border-color: var(--signal); }
.scroll-hint { display: flex; align-items: center; gap: 12px; margin-top: 4px; color: var(--muted); font-size: var(--t-label); letter-spacing: .04em; }
.scroll-hint::before { content: ''; width: 36px; height: 1px; background: var(--line-strong); }
@media (max-width: 899px) {
  /* The widest display line is 6.6 em: 15 % of the column keeps the three lines whole down to 320 px, scrollbar or not */
  .display { font-size: min(var(--t-display), 15cqw); }
  .hero__text { gap: 16px; }
  .hero__actions > .button { flex: 1 1 100%; }
  /* The rail of names is a desktop control; on phones the row of phones itself is the navigation */
  .chips { display: none; }
}
@media (min-width: 900px) {
  .display__indent { padding-left: 1em; }
}

/* Chapters: a rail of names beside the devices (desktop), the cards of the row (phones) */
.work__head { display: grid; gap: 14px; }
.work__title { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; }
.work__head p { color: var(--text-2); font-size: var(--t-meta); line-height: 1.5; max-width: 46ch; }
.chapter .step-text { display: grid; gap: 8px; justify-items: start; position: relative; }
.chapter__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }
.chapter__name { font-size: var(--t-chapter); font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; color: var(--muted); transition: color 180ms ease; overflow-wrap: anywhere; text-wrap: balance; }
.chapter.is-active .chapter__name { color: var(--text); }
.chapter__kind { font-size: 1.0625rem; line-height: 1.4; color: var(--muted); }
.chapter__line { font-size: 1.0625rem; line-height: 1.45; color: var(--text-2); max-width: 36ch; }
.chapter__open { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); font-size: 1.25rem; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.chapter__open i { font-style: normal; transition: transform .2s var(--ease); }
.chapter__open:hover, .chapter__open:focus-visible { background: var(--text); border-color: var(--text); color: var(--on-light); }
.chapter__open:hover i { transform: translateX(2px); }
@media (min-width: 900px) {
  /* The text column takes at most 42 % of the width; the devices get the rest */
  .hm-step .step-body { display: grid; grid-template-columns: minmax(0, min(36rem, 42vw)) minmax(0, 1fr); gap: 48px; align-items: center; }
  .step-text { max-width: min(36rem, 42vw); }
  /* The rail: one continuous line down the nine names, a dot per chapter that fills when the chapter is the one shown */
  .page-home .projects { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; border-left: 1px solid var(--line); }
  .projects .step-body { width: 100%; margin: 0; padding-left: 32px; }
  .chapter .step-text { gap: 10px; }
  .chapter .step-text::before { content: ''; position: absolute; left: -39px; top: calc(max(var(--t-chapter), 44px) / 2 - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--ground); border: 1.5px solid var(--line-strong); transition: background-color 180ms ease, border-color 180ms ease; }
  .chapter.is-active .step-text::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent); }
  .chapter .chapter__open { opacity: .55; transition: opacity 180ms ease, background-color .2s, border-color .2s, color .2s; }
  .chapter.is-active .chapter__open, .chapter__open:hover, .chapter__open:focus-visible { opacity: 1; }
}
@media (max-width: 899px) {
  /* The card's text under the phone: the name with the arrow, the category, the rest of the line */
  .chapter .step-text { position: static; gap: 6px; }
  .chapter__row { gap: 12px; }
  .chapter__name { font-size: 1.5rem; line-height: 1.1; }
  .chapter__kind { font-size: 1rem; }
  .chapter__line { font-size: var(--t-meta); }
  /* The whole card opens the project: the name's arrow link stretches over the phone (one link, one tab stop) */
  .chapter__open::after { content: ''; position: absolute; inset: 0; }
}

/* Sections after the story: paper and paper-2 bands, cards on them */
.hm-story ~ section, .page-home .foot { position: relative; z-index: 1; }
.hm-pricing, .hm-faq { background: var(--ground); }
.offers, .hm-process, .ask { background: var(--ground-2); }

/* Pricing on the Home: the five packages as cards, the two care plans in a line each */
.hm-pricing__inner { display: grid; gap: 36px; }
.hm-plans { display: grid; gap: 16px; }
.hm-plan { display: grid; gap: 12px; align-content: start; padding: 26px 24px 28px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.hm-plan__name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.hm-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--text); max-width: none; }
.hm-plan__amount { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-plan__from, .hm-plan__unit { font-size: var(--t-meta); color: var(--muted); }
.hm-plan__fit { font-size: var(--t-meta); line-height: 1.5; color: var(--text-2); max-width: 36ch; }
.hm-plan__cta { justify-self: start; margin-top: 10px; min-height: 48px; padding: 10px 20px; font-size: 0.9375rem; }
.hm-plan__cta::after { content: none; }
.hm-care { display: grid; }
.hm-care li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: var(--t-meta); line-height: 1.5; color: var(--text-2); }
.hm-care li:last-child { border-bottom: 1px solid var(--line); }
.hm-care__name { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--text); font-weight: 600; font-size: 1.0625rem; text-underline-offset: 4px; }
.hm-care__price { color: var(--text); font-weight: 600; }
.hm-care__list { flex: 1 1 24ch; }
@media (min-width: 900px) {
  .hm-pricing__inner { gap: 40px; }
  .hm-plans { grid-template-columns: repeat(2, 1fr); gap: var(--col-gap); }
  .hm-plan { padding: 30px 28px 32px; }
  .hm-plan--custom { grid-column: 1 / -1; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto; grid-template-areas: 'name fit cta' 'price fit cta'; column-gap: 40px; align-items: center; }
  .hm-plan--custom .hm-plan__name { grid-area: name; align-self: end; }
  .hm-plan--custom .hm-plan__price { grid-area: price; align-self: start; }
  .hm-plan--custom .hm-plan__fit { grid-area: fit; max-width: 52ch; }
  .hm-plan--custom .hm-plan__cta { grid-area: cta; margin-top: 0; }
  .hm-care li { gap: 4px 20px; }
}
@media (min-width: 1300px) { .hm-plans { grid-template-columns: repeat(4, 1fr); } }

/* What I do: four quiet tiles on the paper-2 band, the facts under them */
.offers__inner { display: grid; gap: 32px; }
.hm-ledger { display: grid; gap: 14px; }
.hm-ledger li { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.hm-ledger a { display: grid; gap: 8px; height: 100%; padding: 24px 22px 26px; text-decoration: none; color: var(--text); border-radius: inherit; }
.hm-ledger strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.hm-ledger a:hover strong { text-decoration: underline; text-underline-offset: 5px; }
.hm-ledger span { font-size: var(--t-meta); line-height: 1.5; max-width: 36ch; color: var(--text-2); }
.hm-facts { display: grid; }
.hm-facts li { padding: 12px 0; font-size: var(--t-meta); color: var(--text); font-weight: 500; border-top: 1px solid var(--line); }
.hm-facts li:last-child { border-bottom: 1px solid var(--line); }
.hm-facts__link { font-weight: 600; color: var(--text); text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0 -12px 6px; vertical-align: middle; }
@media (min-width: 900px) {
  .offers__inner { gap: 40px; }
  .hm-ledger { grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); }
  .hm-ledger a { padding: 28px 26px 30px; }
  .hm-facts { grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
  .hm-facts li:last-child { border-bottom: 0; }
}

/* How a project works: the heading beside a card with the four steps on a rail of numbered dots */
.hm-process__inner { display: grid; gap: 32px; }
.hm-process__head { align-content: start; justify-items: start; gap: 16px; }
.process__link { font-weight: 600; color: var(--text); text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.hm-steps { display: grid; width: 100%; padding: 8px 24px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.hm-steps li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 4px 16px; padding: 20px 0 22px; border-top: 1px solid var(--line); }
.hm-steps li:first-child { border-top: 0; }
/* The rail runs through the dots from the first to the last step */
.hm-steps li::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.hm-steps li:first-child::before { top: 24px; }
.hm-steps li:last-child::before { bottom: auto; height: 24px; }
.hm-steps strong { color: var(--text); font-size: 1.125rem; font-weight: 600; align-self: center; }
.hm-steps p { grid-column: 2; font-size: var(--t-meta); line-height: 1.5; max-width: 40ch; color: var(--text-2); }
/* "You receive" under each step (the label and line are shared with Services, css/pages.css), the two notes under the card */
.hm-steps .step__receive { margin-top: 6px; }
.hm-process__notes { display: grid; gap: 8px; }
.hm-process__notes p { font-size: var(--t-meta); line-height: 1.5; color: var(--muted); max-width: 56ch; }
.steps__num { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--ground); color: var(--text); font-weight: 600; font-size: 0.875rem; }
.hm-steps li:first-child .steps__num { background: var(--signal); border-color: var(--signal); color: var(--ink); }
@media (min-width: 900px) {
  .hm-process__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: start; }
  .hm-process__notes { grid-column: 2; }
  .hm-steps { padding: 12px 32px; }
  .hm-steps li { padding: 24px 0 26px; }
  .hm-steps li:first-child::before { top: 28px; }
  .hm-steps li:last-child::before { height: 28px; }
}

/* Before you write: the heading beside the accordion (the details.faq rules are shared with Pricing and Services in css/pages.css) */
.hm-faq__inner { display: grid; gap: 28px; }
.hm-faq__list { display: grid; }
@media (min-width: 900px) {
  .hm-faq__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
}

/* The ask: the portrait as a rounded card beside the words and the action */
.ask__inner { display: grid; gap: 32px var(--col-gap); }
.ask__inner > * { min-width: 0; }
.crop { position: relative; overflow: hidden; background: var(--ground); border-radius: var(--radius); box-shadow: var(--shadow); }
.crop--portrait { width: min(100%, 360px); aspect-ratio: 4 / 5; }
.crop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.ask__text { display: grid; gap: 18px; justify-items: start; align-content: center; }
.ask__text p { color: var(--text-2); max-width: 48ch; }
.ask__text .quote { color: var(--text); margin-bottom: -6px; }
.ask__text .button { margin-top: 10px; }
@media (min-width: 900px) {
  .ask__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .crop--portrait { width: min(100%, 440px); }
}

/* Footer tagline (Home only) */
.page-home .foot__line { font: 400 var(--t-quote)/1.25 var(--serif); font-variation-settings: normal; letter-spacing: 0; color: var(--on-dark); max-width: 30ch; margin: 0 0 32px; }

@media (prefers-reduced-motion: reduce) {
  .stage, .chapter__name, .hm-chip, .chapter__open, .button--paper::after { transition: none; }
}