/* ===========================================================================
   components.css — additions used by the markdown compiler (Publisher/).
   style.css stays the source of truth for the existing design language;
   this file only adds components the hand-built pages never had.
   =========================================================================== */

/* ---- carousel ----------------------------------------------------------- */
.carousel{margin:26px 0 8px}
.carousel-head{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.carousel-head h2{margin:0!important}
.carousel-nav{margin-left:auto;display:flex;gap:8px}
.cbtn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  color:var(--gum-d);font-size:16px;font-weight:700;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.cbtn:hover{background:var(--sage-tint);border-color:var(--sage)}
.cbtn[disabled]{opacity:.35;cursor:default;background:#fff;border-color:var(--line)}

.carousel-track{display:grid;grid-auto-flow:column;gap:22px;margin:0;padding:4px 4px 18px;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--sage) var(--cream)}
.carousel-track > .card{scroll-snap-align:start}
.carousel-track.peek-2{grid-auto-columns:calc((100% - 22px)/2)}
.carousel-track.peek-3{grid-auto-columns:calc((100% - 44px)/3)}
.carousel-track.peek-4{grid-auto-columns:calc((100% - 66px)/4)}
.carousel-track::-webkit-scrollbar{height:8px}
.carousel-track::-webkit-scrollbar-track{background:var(--cream);border-radius:999px}
.carousel-track::-webkit-scrollbar-thumb{background:var(--sage);border-radius:999px}

@media(max-width:920px){
  .carousel-track.peek-3,.carousel-track.peek-4{grid-auto-columns:calc((100% - 22px)/2)}
}
@media(max-width:560px){
  .carousel-track.peek-2,.carousel-track.peek-3,.carousel-track.peek-4{grid-auto-columns:88%}
  .carousel-nav{display:none}
}

/* ---- image support inside fold-out rows (folds component) ---------------- */
.foldart img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foldart img.ph + ::after{z-index:2}

/* ---- team member role line ---------------------------------------------- */
.member p{margin:0 0 6px;font-size:14px;color:var(--muted)}

/* ---- band / split headings (replaces the inline styles in the hand-built pages) ---- */
.bandtitle{font-size:30px;margin:0 0 12px}
.band .bandtitle{color:#fff}
.band-cream .bandtitle{color:var(--gum-d)}
.bandbody{max-width:70ch}
.band .bandbody strong{color:#fff}
.bandactions{margin-top:22px}
.band .cards,.band-cream .cards{margin-top:26px}
.splittitle{font-size:30px;margin:0 0 14px;color:var(--gum-d)}

.band .steps{margin-top:26px}

/* ---- qsteps: numbered question cards in the how-we-work leaf style ------- */
/* (supersedes the .qboxes experiment above) */
.steps.qsteps{grid-template-columns:repeat(3,1fr);align-items:start}
.steps.qsteps.c2{grid-template-columns:repeat(2,1fr)}
details.qstep{padding:0}
details.qstep::after{display:none}
details.qstep summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;flex:1}
details.qstep summary::-webkit-details-marker{display:none}
details.qstep summary::marker{content:none}
.qsteps details:nth-child(4n+2) .stepart{background:linear-gradient(150deg,var(--ochre) 0%,#33544a 100%)}
.qsteps details:nth-child(4n+3) .stepart{background:linear-gradient(150deg,var(--river) 0%,#1d332c 100%)}
.qsteps details:nth-child(4n+4) .stepart{background:linear-gradient(150deg,var(--gum) 0%,var(--gum-d) 100%)}
details.qstep .qcue{margin-top:10px;color:var(--red);font-weight:600;font-size:13.5px}
details.qstep .qcue .less{display:none}
details.qstep[open] .qcue .more{display:none}
details.qstep[open] .qcue .less{display:inline}
details.qstep .qbody{padding:0 18px 16px;border-top:1px dashed var(--line)}
details.qstep .qbody p{margin:12px 0 0;font-size:14.5px;color:#4a4e49}
@media (max-width:900px){.steps.qsteps{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.steps.qsteps{grid-template-columns:1fr}}

/* ---- slides: LinkedIn-style story carousel (square designed slides) ------ */
.slides{position:relative;max-width:520px;margin:30px auto 14px}
.slidetrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:var(--radius);border:1px solid var(--line);background:#fff;box-shadow:0 14px 34px rgba(32,36,31,.10)}
.slidetrack::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;aspect-ratio:1/1;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;overflow:hidden;background:#fff}
/* text slide: leaf header band + roomy centred body */
.slidehead{position:relative;display:flex;align-items:center;gap:10px;padding:16px 20px;background:linear-gradient(150deg,var(--euca) 0%,#5f8681 100%);flex:0 0 auto}
.slidehead::after{content:"";position:absolute;inset:0;background:url(leaf-wave-white.svg) no-repeat right -90px top -90px;background-size:300px auto;opacity:.5;-webkit-mask-image:linear-gradient(115deg,transparent 30%,#000 90%);mask-image:linear-gradient(115deg,transparent 30%,#000 90%)}
.slide:nth-child(4n+2) .slidehead{background:linear-gradient(150deg,var(--ochre) 0%,#33544a 100%)}
.slide:nth-child(4n+3) .slidehead{background:linear-gradient(150deg,var(--river) 0%,#1d332c 100%)}
.slide:nth-child(4n+4) .slidehead{background:linear-gradient(150deg,var(--gum) 0%,var(--gum-d) 100%)}
.slidehead .n{display:inline-flex;width:30px;height:30px;border-radius:50%;flex:0 0 30px;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.75);color:#fff;align-items:center;justify-content:center;font-weight:700;font-size:14px;position:relative;z-index:1}
.slidehead .kick,.s-fill .kick{color:#fff;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}
.slidebody{padding:20px 26px 22px;display:flex;flex-direction:column;flex:1;min-height:0}
.slidebody .bodymain{margin:auto 0}
.slidebody h3{margin:0 0 12px;font-size:25px;line-height:1.2;color:var(--gum-d)}
.slidebody p{margin:0 0 12px;font-size:16.5px;line-height:1.5;color:#4a4e49}
.slidebody ul{margin:0;padding:0;list-style:none}
.slidebody li{font-size:16px;line-height:1.45;color:#4a4e49;margin:10px 0;padding-left:26px;position:relative}
.slidebody li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:4px;border:2px solid var(--sage-d)}
.slidebody .foot{margin:12px 0 0;font-weight:600;font-size:15px;color:var(--gum-d)}
/* cover + statement slides: full-bleed tone with the big leaf art */
.slide.s-fill{position:relative;padding:26px 28px;color:#fff;justify-content:flex-end;background:linear-gradient(150deg,var(--gum) 0%,var(--gum-d) 100%)}
.slide.s-fill.t-euca{background:linear-gradient(150deg,var(--euca) 0%,#5f8681 100%)}
.slide.s-fill.t-ochre{background:linear-gradient(150deg,var(--ochre) 0%,#33544a 100%)}
.slide.s-fill.t-river{background:linear-gradient(150deg,var(--river) 0%,#1d332c 100%)}
.slide.s-fill.t-red{background:linear-gradient(150deg,var(--red) 0%,#8f0c2f 100%)}
.slide.s-fill::after{content:"";position:absolute;inset:0;background:url(leaf-wave-white.svg) no-repeat right -140px top -120px;background-size:520px auto;opacity:.35;-webkit-mask-image:linear-gradient(115deg,transparent 25%,#000 85%);mask-image:linear-gradient(115deg,transparent 25%,#000 85%)}
.slide.s-fill>*{position:relative;z-index:1}
.slide.s-fill .kick{position:absolute;top:22px;left:28px}
.slide.s-fill .fillmain{margin:auto 0}
.slide.s-fill h3{margin:0 0 14px;font-size:34px;line-height:1.12;color:#fff}
.slide.s-fill p{margin:0;font-size:17px;line-height:1.5;color:rgba(255,255,255,.88)}
.slide.s-statement .fillmain{text-align:left}
.slide.s-fill .foot{margin-top:18px;font-weight:700;font-size:14px;letter-spacing:.04em;color:#fff}
.slide.s-fill .foot a{color:#fff}
/* image slide: full-bleed art with caption band */
.slide.s-image{padding:0;position:relative}
.slide.s-image img{width:100%;height:100%;object-fit:cover}
.slide.s-image .caption{position:absolute;left:0;right:0;bottom:0;padding:12px 20px;background:rgba(26,51,45,.82);color:#fff;font-size:14.5px;line-height:1.4}
/* controls */
.sctrl{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--line);color:var(--gum-d);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(32,36,31,.2);z-index:2}
.sctrl:hover{background:#fff}
.sctrl:disabled{opacity:.3;cursor:default}
.sctrl.prev{left:-16px}
.sctrl.next{right:-16px}
.scount{position:absolute;top:12px;right:14px;background:rgba(32,36,31,.6);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;z-index:2}
@media (max-width:600px){
  .slide{aspect-ratio:auto;min-height:400px}
  .slide.s-fill h3{font-size:27px}
  .sctrl.prev{left:8px}.sctrl.next{right:8px}
}

/* ---- infographic: inline graphic blocks (compare / panels) --------------- */
.infographic{margin:26px 0 10px}
.infotitle{font-size:24px;margin:0 0 16px;color:var(--gum-d)}
.infocols{display:grid;gap:18px;align-items:stretch}
.infocols.c2{grid-template-columns:1fr 1fr}
.infocols.c3{grid-template-columns:1fr 1fr 1fr}
.infopanel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.infohead{position:relative;padding:14px 18px;background:linear-gradient(150deg,var(--euca) 0%,#5f8681 100%)}
.infohead::after{content:"";position:absolute;inset:0;background:url(leaf-wave-white.svg) no-repeat right -90px top -90px;background-size:300px auto;opacity:.5;-webkit-mask-image:linear-gradient(115deg,transparent 30%,#000 90%);mask-image:linear-gradient(115deg,transparent 30%,#000 90%)}
.infohead.t-ochre{background:linear-gradient(150deg,var(--ochre) 0%,#33544a 100%)}
.infohead.t-river{background:linear-gradient(150deg,var(--river) 0%,#1d332c 100%)}
.infohead.t-gum{background:linear-gradient(150deg,var(--gum) 0%,var(--gum-d) 100%)}
.infohead.t-red{background:linear-gradient(150deg,var(--red) 0%,#8f0c2f 100%)}
.infohead h3{margin:0;color:#fff;font-size:18px;position:relative;z-index:1}
.infohead .sub{display:block;color:rgba(255,255,255,.85);font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-top:3px;position:relative;z-index:1}
.infobody{padding:14px 18px 18px;flex:1}
.infobody ul{margin:0;padding-left:20px}
.infobody li{margin:7px 0;font-size:15px;color:#4a4e49}
.infobody p{margin:0;font-size:15px;color:#4a4e49}
.compare .infopanel.win{border-color:var(--sage-d);box-shadow:0 10px 26px rgba(32,36,31,.10)}
.compare .infopanel.lose .infobody li{color:#6a6e69}
.infoverdict{margin:16px 0 0;padding:12px 18px;border-left:4px solid var(--red);background:#eef3f0;border-radius:0 var(--radius) var(--radius) 0;font-size:15.5px}
@media (max-width:760px){.infocols.c2,.infocols.c3{grid-template-columns:1fr}}

/* widgets escape the 772px prose column like cards/steps do */
.prose>div.steps,.prose>div.infographic{max-width:none}
/* the slide carousel stays compact and centred on the page */
.prose>div.slides,div.slides{max-width:520px;margin-left:auto;margin-right:auto}
.grouphead[id]{scroll-margin-top:96px}

/* banner cards: the mark becomes a small kicker above the title (was overlapping) */
.card.banner .cardart{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.card.banner .cardart .mark{position:static;left:auto;bottom:auto;font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.85;z-index:1}