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