/* SourcingPromo — the destination pages: the solutions 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);
  }
}
.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}
}

/* ---------- 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}

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