/* ===========================================================================
   Service pages — the long-form page behind each module card.

   These pages use the site's own chrome: the topbar and mark, the grain layer,
   .stage / .wrap / .block layout, the .shead section headers and the real
   footer. That is deliberate and it is most of the work — built with their own
   header and footer they read as a different site that happened to share a
   palette.

   What they do NOT take is the home page's machinery: no GSAP, no Lenis, no
   WebGL plexus, none of the thirty modules that each assume their own section
   exists. A service page is a document somebody arrived at from a search
   result and wants to read, so it loads in a fraction of the time. Nothing
   here carries .reveal either — that class starts at opacity:0 and waits for
   a script these pages do not load.

   This file adds only what the site has no pattern for: the long-form prose
   column, the sticky aside, the FAQ disclosures and the breadcrumb. Every
   colour is a token, so the light theme comes free and stays correct.
   ========================================================================== */

/* ---------- vertical rhythm and reading size ---------- */

/* Both are deliberately unlike the home page. That page is a sequence of
   separate arguments, each wanting air around it and a glanceable line of
   copy; these are one continuous document, where the same spacing reads as
   disconnection and the same 14.5px reads as fine print. Sections sit closer,
   and body copy runs 16.5-19px against a 66ch measure — about eleven words a
   line, which is what sustained reading wants. */

/* .block is padding-block:15vh, which is right on the home page where each
   section is a long argument that needs air around it. Here the sections are
   short and consecutive, so top and bottom padding meet and produce a 30vh
   void — about 285px of nothing between a heading and the text it introduces.
   These rules apply only on service pages, because this file loads only here. */
.stage > .block{ padding-block:clamp(22px,4vh,46px); }
/* The topbar is position:fixed, so the first thing on the page has to clear it
   or the breadcrumb renders underneath the navigation. The home page's hero
   uses padding-top:14vh for the same reason; this matches it, with a px floor
   so a short landscape window does not put them back on top of each other. */
.stage > .pg-head{ padding-block:clamp(96px,14vh,150px) 0; }
.stage > .pg-head + .block{ padding-top:clamp(20px,3.5vh,40px); }
.stage > .block:last-of-type{ padding-bottom:clamp(36px,7vh,80px); }

/* ---------- page head: breadcrumb, title, standfirst ---------- */

.pg-crumb{
  font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-bottom:18px;
}
.pg-crumb a{ color:var(--muted); }
.pg-crumb a:hover{ color:var(--accent); }
.pg-crumb span{ margin-inline:8px; }

/* The site's own h1 treatment, lifted from .hero h1: Source Sans at 550,
   uppercase, normal tracking. It previously carried .display — Syne 800 with
   -0.03em tracking — which is the boot wordmark's face, not a page title's. At
   56px that read as a shout rather than a heading, and the negative tracking
   closed the letters up at exactly the sizes a sentence-length title needs.

   Switching face also removes the wrapping problem that came with it: Syne's
   capitals were about a quarter wider than the source string implied, which is
   what pushed "DEPARTMENT," off a 390px screen. overflow-wrap stays as
   insurance for a future title with a longer word, and should never fire. */
.pg-head h1{
  font-family:var(--headline); font-weight:550;
  text-transform:uppercase; letter-spacing:normal;
  max-width:22ch; font-size:clamp(1.55rem,1rem + 2.6vw,3.3rem); line-height:1.06;
  overflow-wrap:break-word;
}
.pg-lede{ margin-top:20px; max-width:58ch; font-size:clamp(18px,16px + .45vw,21px); line-height:1.6; color:var(--muted); }
.pg-lede strong{ color:var(--ink); font-weight:600; }

/* ---------- two columns ---------- */

.pg-body{ display:grid; gap:clamp(34px,5vw,56px); }
@media (min-width:1000px){
  .pg-body{ grid-template-columns:minmax(0,1fr) 300px; align-items:start; gap:clamp(40px,5vw,72px); }
}

.pg-sec + .pg-sec{ margin-top:clamp(24px,3vw,36px); }
.pg-sec .shead{ margin-bottom:14px; }

/* --fs-prose is 14.5px, and tokens.css describes it as dense secondary copy:
   module summaries, FAQ answers, things read at a glance. These pages are the
   opposite — 900 words somebody arrived at deliberately. --fs-read is a local
   step up, declared once so paragraphs, lists and steps cannot drift apart. */
.pg-main{ --fs-read:clamp(16.5px, 15.2px + .32vw, 19px); }
.pg-main p{ margin-top:15px; max-width:66ch; font-size:var(--fs-read); line-height:1.7; color:var(--muted); }
.pg-main p strong{ color:var(--ink); font-weight:600; }
.pg-main a:not(.btn-primary):not(.btn-ghost){ color:var(--accent); border-bottom:1px solid transparent; transition:border-color .3s var(--ease-out); }
.pg-main a:not(.btn-primary):not(.btn-ghost):hover{ border-bottom-color:var(--accent); }

.pg-list{ margin-top:16px; display:grid; gap:10px; max-width:66ch; list-style:none; }
.pg-list li{ position:relative; padding-left:26px; font-size:var(--fs-read); line-height:1.65; color:var(--muted); }
.pg-list li::before{ content:""; position:absolute; left:0; top:.62em; width:11px; height:1px; background:var(--accent); }
.pg-list li strong{ color:var(--ink); font-weight:600; }

/* Same counter treatment as .next-list and .ok-steps, so a numbered sequence
   reads as one component wherever it appears rather than three. */
.pg-steps{ margin-top:18px; list-style:none; counter-reset:pgstep; display:grid; gap:15px; max-width:66ch; }
.pg-steps li{ counter-increment:pgstep; position:relative; padding-left:44px; font-size:var(--fs-read); line-height:1.7; color:var(--muted); }
.pg-steps li::before{
  content:counter(pgstep,decimal-leading-zero); position:absolute; left:0; top:.05em;
  font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.1em; color:var(--accent);
}
.pg-steps li strong{ display:block; color:var(--ink); font-weight:600; margin-bottom:3px; }

/* ---------- aside ---------- */

.pg-aside{ display:grid; gap:18px; }
@media (min-width:1000px){ .pg-aside{ position:sticky; top:96px; } }
.pg-card{ border:1px solid var(--line); background:var(--panel); padding:22px 22px 24px; }
.pg-card h2{
  font-family:var(--headline); font-size:var(--fs-2xs); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.pg-card p{ margin-top:12px; font-size:15px; line-height:1.65; color:var(--muted); }
.pg-card ul{ margin-top:12px; list-style:none; display:grid; gap:9px; }
.pg-card li{ font-size:15px; line-height:1.55; color:var(--muted); }
.pg-card a{ color:var(--ink); }
.pg-card a:hover{ color:var(--accent); }
.pg-kv{ display:grid; gap:3px; margin-top:14px; }
.pg-kv dt{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.pg-kv dd{ margin:0 0 10px; font-size:15px; color:var(--ink); }

/* ---------- FAQ ---------- */

.pg-faq{ margin-top:18px; max-width:68ch; }
.pg-faq details{ border-top:1px solid var(--line); padding:16px 0; }
.pg-faq details:last-of-type{ border-bottom:1px solid var(--line); }
.pg-faq summary{
  cursor:pointer; list-style:none; display:flex; gap:14px; align-items:baseline;
  font-size:clamp(17px,15.5px + .35vw,19.5px); font-weight:600; color:var(--ink);
}
.pg-faq summary::-webkit-details-marker{ display:none; }
.pg-faq summary::after{ content:"+"; margin-inline-start:auto; font-family:var(--mono); color:var(--accent); }
.pg-faq details[open] summary::after{ content:"\2212"; }
.pg-faq details p{ margin-top:12px; font-size:var(--fs-read); }

/* ---------- closing call to action ---------- */

.pg-cta{ border:1px solid var(--line); background:var(--panel); padding:clamp(26px,4vw,46px); }
.pg-cta h2{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.4rem,1rem + 1.6vw,2.1rem); line-height:1.05; letter-spacing:-.02em;
}
.pg-cta p{ margin-top:14px; max-width:58ch; font-size:clamp(16.5px,15.2px + .32vw,19px); line-height:1.7; color:var(--muted); }
.pg-cta-row{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- the link out of each module card, on the home page ---------- */

/* The whole .mod card opens the dialog, so this needs data-more on it and a
   guard in modal.js — without that, clicking it would open the dialog and
   navigate at the same time. */
.m-more{
  display:inline-flex; align-items:center; gap:7px; min-height:34px;
  font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid transparent;
  transition:color .3s var(--ease-out), border-color .3s var(--ease-out);
}
@media (hover:hover){ .m-more:hover{ color:var(--accent); border-bottom-color:var(--accent); } }
.m-bot{ flex-wrap:wrap; }

/* the same link, in the dialog's footer beside "Start a project" */
.cs-more{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid transparent;
  transition:color .3s var(--ease-out), border-color .3s var(--ease-out);
}
@media (hover:hover){ .cs-more:hover{ color:var(--accent); border-bottom-color:var(--accent); } }

@media (prefers-reduced-motion:reduce){
  .pg-main a, .m-more, .cs-more{ transition:none; }
}