/* SourcingPromo — the destination pages: the services hub and a single service, the occasion hub,
   one scene group and one scenario inside it, the FAQs, about, contact, the short quote form, its
   confirmation, the privacy page and the 404.

   Every rule is prefixed `pages-` so it can never reach another page's markup, and every value comes
   from tokens.css. Mobile first: one column, and the second column only from the width where the
   reading actually needs it. Nothing here needs JavaScript — the FAQ is a native details/summary. */

/* ---------- page rhythm ---------- */
.pages-hero__inner{display:grid;gap:1.5rem}
.pages-hero__copy{display:flex;flex-direction:column;gap:1rem;min-width:0}
.pages-hero__lede{max-width:65ch}
.pages-hero__actions{margin:.25rem 0 0}
.pages-hero__media{
  margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--sand-2);
}
.pages-hero__img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media (min-width:960px){
  .pages-hero--media .pages-hero__inner{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    align-items:center;gap:clamp(1.5rem,4vw,3rem);
  }
}

/* The service page's hero carries a second column even without a photograph: the copy on the left,
   and a card of the three lines a buyer reads first — what they send, what they get, when the first
   reply comes. It is read from the record, so it is never a promise the page does not keep below. */
@media (min-width:960px){
  .pages-hero--glance .pages-hero__inner{
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:clamp(1.5rem,4vw,3rem);align-items:start;
  }
}
.pages-glance{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1rem,2.4vw,1.5rem);display:flex;flex-direction:column;gap:.9rem;min-width:0;
}
.pages-glance__label{
  margin:0;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);
}
.pages-glance__list{margin:0;display:grid;gap:.85rem}
.pages-glance__list>div{display:grid;gap:.2rem;padding-top:.85rem;border-top:1px solid var(--line)}
.pages-glance__list>div:first-child{padding-top:0;border-top:0}
.pages-glance__list dt{font-size:var(--step--1);font-weight:650;color:var(--ink)}
.pages-glance__list dd{margin:0;font-size:var(--step--1);line-height:1.55;color:var(--ink-2)}
.pages-glance__foot{margin:0}

.pages-prose{max-width:var(--maxw-narrow)}
.pages-text{color:var(--ink-2);max-width:70ch;line-height:1.6;margin:0}
.pages-locked{max-width:34rem}

/* ---------- cards (services, occasions, related reading) ---------- */
.pages-cards,.pages-related__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.pages-card{min-width:0}
.pages-card__media{display:block}
.pages-card__img{width:100%;height:100%;object-fit:cover}
.pages-card__placeholder{width:100%;height:100%;letter-spacing:.08em}
.pages-card__text{margin:0;line-height:1.5}
.pages-card__foot{align-items:center}
.pages-card .link-arrow{align-self:flex-start}

/* ---------- a block of fixed wording ---------- */
.pages-block{max-width:88ch}
.pages-block+.pages-block{margin-top:clamp(2rem,4vw,3rem)}
.pages-block h2{margin-bottom:.6rem}
.pages-block .note+.cluster{margin-top:1.1rem}

/* ---------- a parent occasion's own children (taxonomy-occasion.php) ---------- */
.pages-subterms__title{
  margin:0;font-size:var(--step--1);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.pages-subterms__list{list-style:none;margin:0;padding:0}
.pages-subterms__list a.tag{text-decoration:none;border:1px solid transparent}
.pages-subterms__list a.tag:hover{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-dark)}
.pages-block--plain{max-width:74ch}
.pages-block-section .wrap>h2{margin-bottom:.6rem}
.pages-step h3,.pages-point h3{font-size:var(--step-1);margin-bottom:.3rem}
.pages-step p:last-child,.pages-point p:last-child{margin:0}

/* ---------- numbered steps ---------- */
.pages-steps{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:1.15rem}
@media (min-width:720px){
  .pages-steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
}
.pages-step{min-width:0}
.pages-step__num{
  margin:0 0 .35rem;font-family:var(--font-mono);font-size:var(--step--1);
  font-weight:600;letter-spacing:.1em;color:var(--brand-dark);
}
.pages-steps-section .wrap>h2{margin-bottom:.4rem}

/* ---------- points (four short claims) ---------- */
.pages-points{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:1.15rem}
@media (min-width:720px){
  .pages-points{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
}
.pages-point{min-width:0}

/* ---------- lists ---------- */
.pages-list{margin:.9rem 0 0;padding-left:1.15rem;display:grid;gap:.45rem;color:var(--ink-2);max-width:72ch}
.pages-list li{line-height:1.55}
.pages-list--check{list-style:none;padding-left:0}
.pages-list--check li{position:relative;padding-left:1.7rem}
.pages-list--check li::before{
  content:"";position:absolute;left:.15rem;top:.5em;
  width:.6rem;height:.32rem;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);
  transform:rotate(-45deg);
}

/* ---------- panels ---------- */
.pages-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.1rem,2.4vw,1.6rem);display:flex;flex-direction:column;gap:.8rem;min-width:0;
}
.pages-panel--sand{background:var(--sand)}
.pages-panel__title{font-size:var(--step-1)}
.pages-panel .note{max-width:58ch}
.pages-panel .cluster{margin:0}
.pages-panel .facts{margin:0}
.pages-about-lines{margin-top:1.25rem;max-width:44rem}
.pages-about-membership .pages-panel{max-width:50rem}

/* ---------- one service: reading column plus the quote panel ---------- */
.pages-service__inner{display:grid;gap:clamp(1.5rem,4vw,3rem)}
.pages-service__main{min-width:0}
@media (min-width:960px){
  .pages-service__inner{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
  .pages-service__aside{position:sticky;top:5.5rem;align-self:start}
}
.pages-related__block+.pages-related__block{margin-top:1.75rem}
.pages-related__title{font-size:var(--step-2);margin-bottom:1rem}

/* ---------- occasions: the product list ---------- */
.pages-head{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.4rem}
.pages-head h2{font-size:var(--step-2)}
.pages-products{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.pages-more{margin-top:1.5rem}
.pages-pagination{margin-top:1.75rem}
.pages-pagination .nav-links{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.pages-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;
  padding:0 .55rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--paper);color:var(--ink-2);font-size:var(--step--1);
  font-weight:600;text-decoration:none;
}
.pages-pagination .page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.pages-pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pages-pagination .screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- one scene group: how to tell it fits (taxonomy-occasion_group.php) ----------
   The signs a project belongs in the group sit beside their heading, so the block reads as one
   short answer rather than as a second paragraph of prose. */
.pages-fit__inner{display:grid;gap:.85rem}
@media (min-width:900px){
  .pages-fit__inner{
    grid-template-columns:minmax(0,16rem) minmax(0,1fr);
    gap:clamp(1.5rem,4vw,3rem);align-items:start;
  }
}
.pages-fit__title{margin:0;font-size:var(--step-1)}
.pages-fit__list{margin:0;max-width:72ch}
@media (min-width:900px){
  .pages-fit__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.75rem}
}

/* The service page's own version of that block.
   A service page reads in an article column beside the sidebar; putting the heading in a column of
   its own leaves the answer a strip a few hundred pixels wide, which is what made this block look
   broken. Here the heading sits above its answer, the whole answer is one readable measure, and the
   sand panel marks it as the "does this fit me" reply the reader came for. */
.pages-fit--service{
  padding:1.15rem 1.25rem 1.25rem;
  border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius);background:var(--sand);
}
.pages-fit--service .pages-fit__inner{grid-template-columns:minmax(0,1fr);gap:.55rem}
.pages-fit--service .pages-fit__title{font-size:var(--step-2);line-height:1.25;letter-spacing:-.02em}
.pages-fit--service .pages-fit__body{gap:.7rem;max-width:70ch}
.pages-fit--service .pages-fit__body .pages-list{margin-top:.1rem}
.pages-fit--service .pages-list--check li{line-height:1.5}
@media (min-width:720px){
  .pages-fit--service .pages-fit__list{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem 1.5rem;max-width:none;
  }
}

/* ---------- one scenario: the selection advice (taxonomy-occasion.php) ----------
   What buyers order here and the decisions that matter, in the reading column, with the two
   reference numbers the products themselves give in a panel beside it. */
.pages-scenario__group{margin:0;font-size:var(--step--1);color:var(--ink-2)}
.pages-scenario__group a{font-weight:600}
.pages-advice__inner{display:grid;gap:clamp(1.25rem,3vw,2rem)}
@media (min-width:940px){
  .pages-advice__inner{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
}
.pages-advice__copy{min-width:0}
.pages-advice__title{margin:0 0 .9rem;font-size:var(--step-2)}
.pages-advice__part+.pages-advice__part{margin-top:1.1rem}
.pages-advice__label{
  margin:0 0 .25rem;font-size:var(--step--1);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.pages-advice__text{margin:0;color:var(--ink-2);line-height:1.6;max-width:66ch}
.pages-advice__facts{
  background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1rem,2.4vw,1.4rem);display:flex;flex-direction:column;gap:.7rem;min-width:0;
}
.pages-advice__facts .facts{margin:0}
.pages-advice__facts dd{font-weight:650}
.pages-advice__facts .note{margin:0}
.pages-group-products .cat-hero__bar,
.pages-scenario-products .cat-hero__bar{margin-top:0;margin-bottom:clamp(.85rem,2vw,1.25rem)}

/* ---------- the FAQ disclosure ---------- */
.pages-faq__group{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.5rem}
.pages-faq__group:first-child{border-top:0;margin-top:0;padding-top:0}
.pages-faq__title{font-size:var(--step-2);margin-bottom:1rem}
.pages-faq__items{display:grid;gap:.6rem;max-width:80ch}
.pages-faq__item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:.85rem 1.05rem;
}
.pages-faq__item[open]{background:var(--sand);border-color:var(--line-strong)}
.pages-faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  list-style:none;cursor:pointer;font-size:1.0625rem;font-weight:600;line-height:1.35;
}
.pages-faq__q::-webkit-details-marker{display:none}
.pages-faq__marker{
  flex:0 0 auto;width:.7rem;height:.7rem;margin-top:.4rem;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .15s;
}
.pages-faq__item[open] .pages-faq__marker{transform:rotate(-135deg);border-color:var(--brand-dark)}
.pages-faq__answer{
  margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line);
  color:var(--ink-2);line-height:1.6;max-width:70ch;
}
.pages-faq__answer p{margin:0}
.pages-faq__answer p+p{margin-top:.6rem}
.pages-faq__q:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){.pages-faq__marker{transition:none}}

/* ---------- empty states ---------- */
.pages-empty{max-width:60ch;margin-inline:auto;display:flex;flex-direction:column;gap:.6rem}
.pages-empty p{margin:0}
.pages-empty__actions{justify-content:center;margin-top:.5rem}

/* ---------- the quote call to action ---------- */
.pages-cta{background:var(--sand);border-top:1px solid var(--line)}
.pages-cta__inner{display:grid;gap:1.25rem}
@media (min-width:860px){
  .pages-cta__inner{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:2rem}
}
.pages-cta__copy{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.pages-cta__actions{margin:0}

/* ---------- the 404 ---------- */
.pages-search{display:grid;gap:.5rem;margin-top:.5rem;max-width:36rem}
.pages-search__label{font-size:var(--step--1);font-weight:600;color:var(--ink-2)}
@media (min-width:560px){
  .pages-search{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .pages-search__label{grid-column:1/-1}
}
.pages-doors{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:1.1rem}
@media (min-width:720px){
  .pages-doors{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
}
.pages-door{
  background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;min-width:0;
}
.pages-door h3{font-size:var(--step-1)}
.pages-door h3 a{text-decoration:none}
.pages-door p{margin:0}
.pages-404__cta{margin-top:clamp(1.5rem,4vw,2.5rem)}

/* ---------- focus ---------- */
.pages-card .link-arrow:focus-visible,
.pages-door h3 a:focus-visible,
.pages-more a:focus-visible,
.pages-faq__q:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}

/* ---------- print: the page without its controls ---------- */
@media print{
  .pages-cta,.pages-pagination,.pages-search,.pages-faq__marker{display:none}
  .pages-faq__item{border:0;padding:0;background:none}
}

/* ---------- one service: the sections the record fills ----------
   Added for the expanded service page: the jump list on the hub, the placeholder frame that keeps
   its shape when no photograph is on file, the two fixed columns ("what we take on" beside "what you
   send us"), a step that carries the point at which the buyer approves, and the limits block. */
.pages-jump{display:flex;flex-direction:column;gap:.55rem}
.pages-jump__title{
  margin:0;font-size:var(--step--1);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.pages-jump__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pages-jump__list a.tag{text-decoration:none;border:1px solid transparent}
.pages-jump__list a.tag:hover{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-dark)}
.pages-jump__list a.tag:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}

.pages-hero__placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;aspect-ratio:4/3;padding:1rem;
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}

.pages-fit__body{min-width:0;display:flex;flex-direction:column;gap:.55rem}
.pages-fit__body .pages-list{margin-top:.35rem}

.pages-duo{display:grid;gap:clamp(1.25rem,3vw,2.25rem)}
@media (min-width:820px){
  .pages-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.pages-duo .pages-block{margin-top:0}
.pages-duo .pages-block+.pages-block{margin-top:0}

/* A step on a service page is a card: the step, then the point the buyer signs off, so the two are
   never read as one paragraph. */
.pages-steps--service{gap:1rem}
@media (min-width:720px){
  .pages-steps--service{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.pages-steps--service .pages-step{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(.9rem,2vw,1.15rem);display:flex;flex-direction:column;gap:.35rem;
}
.pages-step__confirm{
  margin:.45rem 0 0;padding-top:.55rem;border-top:1px dashed var(--line-strong);
  font-size:var(--step--1);color:var(--ink-2);line-height:1.5;
}
.pages-step__confirm span{
  display:block;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  font-size:.75rem;color:var(--brand-dark);margin-bottom:.15rem;
}

.pages-limits{max-width:72ch}
.pages-panel__source{margin:0;line-height:1.5}

/* --- scene pages ---
   The three scene pages: the hub (/occasions/), one scene group and one scenario inside it. They
   share one card system, the hub's spotlight band, the search results and the small bands that close
   the product list. Every value comes from tokens.css, so no colour is introduced here; mobile first,
   and the two-column band appears only from the width where the reading needs it. */

/* ---------- one card system across the three pages ----------
   A card's media keeps one frame whether or not a record holds a photograph, the body spacing is the
   same on all three pages, and the foot is a rule carrying the count on one side and the link on the
   other, so a row of cards is read across without one card's foot floating. */
.pages-cards>.pages-card{height:100%}
.pages-card .card__media{aspect-ratio:3/2}
.pages-card .card__body{gap:.5rem}
.pages-card .card__foot{
  align-items:baseline;border-top:1px solid var(--line);padding-top:.8rem;
}

/* The trail sits in a stack that already spaces its children, so it drops the margin the catalogue's
   own breadcrumbs carry. */
.pages-hero .cat-crumbs ol,
.pages-hero__copy .cat-crumbs ol{margin-bottom:0}

/* ---------- the hub: the name search and what it answers ---------- */
.pages-search-results__count{margin:0;font-size:var(--step-1);font-weight:650;color:var(--ink)}
.pages-search-results__nested{
  list-style:none;margin:0;padding:0 0 0 .85rem;display:grid;gap:.3rem;
  border-left:2px solid var(--line-strong);
}
.pages-search-results__nested a{
  font-size:var(--step--1);line-height:1.4;text-decoration:none;
}
.pages-search-results__nested a:hover{text-decoration:underline}
.pages-search-results__group{margin:0;font-size:var(--step--1);color:var(--ink-3)}
.pages-search-results__group a{font-weight:600;color:var(--ink-2)}

/* ---------- the hub: the spotlight band ----------
   The page's centrepiece: a wide photograph beside the owner's one sentence and the occasions inside
   the group that hold products. It is not a second hero — the h3 is a step below the page's own h1
   and the band sits on the sand, so the eye lands on it after the cards rather than before them. */
.pages-spotlight__band{display:grid;gap:clamp(1rem,2.5vw,1.75rem);align-items:center}
.pages-spotlight__media{
  margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--sand-2);
}
.pages-spotlight__img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.pages-spotlight__copy{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.pages-spotlight__title{font-size:var(--step-2);letter-spacing:-.02em}
.pages-spotlight__title a{text-decoration:none}
.pages-spotlight__note{margin:0;color:var(--ink-2);line-height:1.6;max-width:56ch}
.pages-spotlight__scenes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pages-spotlight__scenes a{
  display:inline-flex;padding:.35rem .75rem;border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);background:var(--paper);
  font-size:.9375rem;text-decoration:none;
}
.pages-spotlight__scenes a:hover{border-color:var(--ink);color:var(--ink)}
.pages-spotlight__scenes a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (min-width:860px){
  .pages-spotlight__band{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:clamp(1.5rem,4vw,3rem);
  }
  .pages-spotlight__band--text{grid-template-columns:minmax(0,1fr)}
  .pages-spotlight__band--text .pages-spotlight__copy{max-width:62ch}
}

/* ---------- the hub: the quick pick by recipient ---------- */
.pages-recipients__row{margin:0}

/* ---------- one scene group: the description under the purpose ---------- */
.pages-hero__desc{margin:0;color:var(--ink-2);line-height:1.6;max-width:62ch}

/* ---------- one scene group: the services this kind of project needs ---------- */
.pages-services__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.pages-service-card .card__body{gap:.4rem}

/* ---------- one scenario: the buyer's own tags, unlinked ---------- */
.pages-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}

/* ---------- one scenario: the owner's picks ----------
   `cat-grid--featured` holds two to four cards. auto-fit collapses the tracks a short list does not
   fill, so two picks share the row and four make a row of four, without a half-empty line. */
.pages-featured__note{margin:0;max-width:62ch}
.cat-grid--featured{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}

/* ---------- one scenario: the single entry into the services ---------- */
.pages-service-entry__line{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .9rem;margin:0;
  padding-top:1rem;border-top:1px solid var(--line);
  color:var(--ink-2);line-height:1.6;max-width:78ch;
}
.pages-service-entry__line .link-arrow{white-space:nowrap}

/* ---------- the services hub ----------
   The composition follows the owner's services reference: a two-column opening with a photograph,
   three ways in as one row of links, the eight services filed under three numbered stages, the
   client-protection promise on a tinted strip, and one dark closing band. It is set in the site's
   warm palette — warm white, thin warm-grey rules, the brand orange for icons, numerals and links —
   so the hub reads as the same site as the product pages rather than as a cooler template. */

/* the opening */
.pages-hero--photo .pages-hero__inner{display:grid;gap:clamp(1.25rem,3vw,2.5rem);align-items:center}
@media (min-width:900px){
  .pages-hero--photo .pages-hero__inner{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
}
.pages-hero--photo .pages-hero__media{
  margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--sand-2);
}
.pages-hero--photo .pages-hero__img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.pages-hero__copy--alone{max-width:80ch}
.pages-hero__title{font-size:clamp(2rem,1.2rem + 2.2vw,3.125rem);line-height:1.08;letter-spacing:-.025em;max-width:24ch}

/* the three ways in: an icon, the label over its one line, and the arrow that says it is a link */
.pages-start{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media (min-width:860px){.pages-start{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pages-start__card{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;
  padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);color:inherit;text-decoration:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.pages-start__icon{display:inline-flex;color:var(--brand)}
.pages-start__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pages-start__title{font-size:1rem;font-weight:650;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.pages-start__note{font-size:var(--step--1);line-height:1.45;color:var(--ink-2)}
.pages-start__arrow{display:inline-flex;color:var(--brand);transition:transform .15s ease}
.pages-start__card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.pages-start__card:hover .pages-start__arrow{transform:translateX(3px)}
.pages-start__card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.pages-start__foot{margin:1rem 0 0;max-width:82ch}

/* the three stages */
.pages-stages__title{margin:0 0 clamp(1.1rem,2.5vw,1.6rem);font-size:var(--step-2);letter-spacing:-.02em}
.pages-stages__list{display:flex;flex-direction:column;gap:clamp(1.6rem,3.5vw,2.6rem)}
.pages-stage__head{
  display:flex;gap:.85rem;align-items:baseline;margin:0 0 1rem;padding-bottom:.75rem;
  border-bottom:1px solid var(--line);
}
.pages-stage__num{
  margin:0;font-size:1.25rem;font-weight:700;line-height:1.1;color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.pages-stage__copy{min-width:0}
.pages-stage__title{margin:0;font-size:var(--step-1);font-weight:650;letter-spacing:-.01em}
.pages-stage__intro{margin:.2rem 0 0;font-size:var(--step--1);line-height:1.5;color:var(--ink-2)}
.pages-stage__grid{display:grid;gap:.75rem}
@media (min-width:720px){.pages-stage__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pages-service-card{
  display:flex;flex-direction:column;gap:.35rem;min-width:0;
  padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
}
.pages-service-card__title{
  display:flex;gap:.55rem;align-items:flex-start;margin:0;
  font-size:1.0625rem;font-weight:650;line-height:1.3;letter-spacing:-.01em;
}
.pages-service-card__title a{text-decoration:none}
.pages-service-card__icon{display:inline-flex;flex:none;margin-top:.05rem;color:var(--brand)}
.pages-service-card__note{margin:0;font-size:var(--step--1);line-height:1.5;color:var(--ink-2)}
.pages-service-card__link{margin:auto 0 0;padding-top:.45rem;font-size:var(--step--1);font-weight:600}
.pages-stages__note{margin:1.25rem 0 0}

/* the promise, on the brand's own tint rather than the reference's neutral peach */
.pages-protect{
  display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.25rem;
  border:1px solid #F1D9CC;border-radius:var(--radius-lg);background:var(--brand-tint);
}
.pages-protect__icon{display:inline-flex;flex:none;margin-top:.1rem;color:var(--brand-dark)}
.pages-protect__title{margin:0 0 .2rem;font-size:var(--step-0);font-weight:650;letter-spacing:-.01em}
.pages-protect__text{margin:0;max-width:88ch;font-size:var(--step--1);line-height:1.55;color:var(--ink-2)}

/* ---------- one service: the on-page index and the question block ---------- */
.pages-anchors{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.pages-anchors a{font-size:var(--step--1);color:var(--ink-2);text-decoration:none}
.pages-anchors a:hover{color:var(--ink);text-decoration:underline}
.pages-anchors a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}
.pages-limits__faq-title{margin:1.5rem 0 .7rem;font-size:var(--step-1)}

/* ---------- the projects behind the services, and the sample quotation ---------- */
.pages-evidence__title{margin:0 0 .5rem;font-size:var(--step-2);letter-spacing:-.02em}
.pages-evidence__note{margin:0 0 1.1rem;max-width:82ch}
.pages-evidence__grid{display:grid;gap:.9rem}
@media (min-width:720px){.pages-evidence__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pages-case-card{
  display:flex;flex-direction:column;gap:.4rem;
  padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
}
.pages-case-card__title{margin:0;font-size:1.0625rem;font-weight:650;line-height:1.3}
.pages-case-card__title a{text-decoration:none}
.pages-case-card__note{margin:0;font-size:var(--step--1);line-height:1.5;color:var(--ink-2)}
.pages-case-card__link{margin:auto 0 0;padding-top:.5rem;font-size:var(--step--1);font-weight:600}
.pages-evidence__sample{margin-top:clamp(2rem,4vw,3rem)}
.pages-evidence__sample .content-gate{margin-top:1rem}

/* ---------- the closing band, centred ----------
   It stays a light sand panel like every other page's closing call to action: the footer directly
   below it is ink, so the two blocks have to differ or they read as one block. */
.pages-cta--center .pages-cta__inner{display:block;text-align:center}
.pages-cta--center .pages-cta__copy{display:flex;flex-direction:column;gap:.6rem;align-items:center}
.pages-cta--center h2{margin:0;font-size:var(--step-2);letter-spacing:-.02em}
.pages-cta--center .lede{margin:0;max-width:64ch;color:var(--ink-2)}
.pages-cta--center .pages-cta__actions{justify-content:center;margin:1.1rem 0 0}
.pages-cta--center .pages-cta__fine{margin:.85rem 0 0;font-size:var(--step--1)}

/* ---------- print ---------- */
@media print{
  .pages-spotlight__media{display:none}
  .pages-search-results__nested{break-inside:avoid}
}