/* Shared template pieces measured from the reference's partner, customer and resource pages (11 Oct 2026).
   Line-grid hero, white main panel, chips and tags, step cards, FAQ rows, partner quote slider,
   customer story cards and the marquee CTA. Neutral placeholders only. */
.navspace{height:59px}
.wrap{width:calc(100% - 2*clamp(24px,4vw,48px));max-width:1280px;margin-inline:auto}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1em;height:1em;flex:0 0 auto}

/* buttons used on these templates */
.btn-line{background:#fff;color:#1D1D1D;box-shadow:inset 0 0 0 1px #1D1D1D}
.btn-text{background:none;padding-left:0;color:#1D1D1D}
.btn-text:hover{text-decoration:underline;transform:none}

/* chips and tags */
.txt-chip{display:inline-flex;align-items:center;height:34px;padding:0 14.4px;border-radius:1584px;background:#fff;border:1px solid #85817A;font:400 12px/18px var(--sans);color:#1D1D1D}
.txt-chip.sm{height:24px;padding:0 12px;border:0}
.cl-tag{display:inline-flex;align-items:center;height:29px;padding:0 12px;border-radius:30px;background:var(--oat-btn);font:500 12px/16.8px var(--mono);text-transform:uppercase;letter-spacing:.02em;color:#1D1D1D}
.eyebrow-b{font:700 12px/14.4px var(--sans);letter-spacing:1.08px;text-transform:uppercase}

/* line-grid hero (1px lines drawn by the gap between coloured cells) */
.lhero{background:var(--hb);color:#fff;overflow:hidden}
.lgrid{display:grid;gap:1px;padding:1px;background:rgba(255,255,255,.25);grid-template-columns:1fr 1fr}
.lgrid>*{background:var(--hb);padding:32px;min-width:0}
.lgrid .full{grid-column:1/-1}
.lgrid .p0{padding:0}
.lhero h1.h-hero{font:600 57.6px/57.6px var(--sans);letter-spacing:-2.304px;color:#fff;text-wrap:balance}
.lhero .lede{font:400 20px/28px var(--sans);color:#fff;text-wrap:balance}
.lhero .tail{height:64px}
/* white main panel that starts where the line grid ends */
.panel{position:relative;z-index:2;background:#fff;border-radius:16px 16px 0 0;margin-top:-64px}
@media (max-width:760px){.lgrid{grid-template-columns:1fr}.lgrid>*{padding:24px 20px}.lhero h1.h-hero{font-size:40px;line-height:42px;letter-spacing:-1.4px}}

/* type */
.h44{font:500 44px/48.4px var(--sans);letter-spacing:-.88px;text-wrap:balance}
.h32{font:500 32px/35.2px var(--sans);letter-spacing:-.64px}
.p20{font:400 20px/28px var(--sans)}
.p16{font:400 16px/22.4px var(--sans)}
@media (max-width:760px){.h44{font-size:34px;line-height:38px;letter-spacing:-.7px}.h32{font-size:26px;line-height:30px}.p20{font-size:18px;line-height:26px}}

/* numbered step cards */
.steps{display:grid;gap:24px}
.step{background:#EFEEEA;border:1px solid #E7E7E7;border-radius:16px;padding:19.2px;display:flex;flex-direction:column;gap:16px}
.step .n{font:500 64px/64px var(--sans);color:#979DA9}
.step h3{font:600 24px/28.8px var(--sans);letter-spacing:-.48px}
.step p{font:400 16px/22.4px var(--sans)}

/* FAQ */
.faq h2{margin-bottom:64px}
.faq details{border-bottom:1px solid #E6E3DC}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:59px;padding:16px 0;font:500 16px/19.2px var(--sans);letter-spacing:-.32px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:0 0 20px;transition:transform .3s var(--ease)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 0 20px;max-width:880px;color:#3D3B37;font:400 16px/24px var(--sans)}

/* partner quote slider: 960px cards that run off the right edge */
.tsec{overflow:hidden}
.tslider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:24px;padding-inline:max(clamp(24px,4vw,48px),calc((100vw - 1280px)/2));scroll-padding-inline:max(clamp(24px,4vw,48px),calc((100vw - 1280px)/2))}
.tslider::-webkit-scrollbar{display:none}
.tcard{flex:0 0 min(960px,88vw);height:461px;display:grid;grid-template-columns:384px 1fr;border-radius:16px;background:var(--tc,#FADF7C);scroll-snap-align:start;overflow:hidden}
.tcard .ph{border-radius:16px;height:100%;--phb:#CFC9BE}
.tcard .tx{padding:32px 32px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.tcard q{display:block;font:400 16px/22.4px var(--sans);max-width:512px;quotes:"\201C" "\201D";text-indent:-.4em}
.tcard .who b{display:block;font:400 16px/22.4px var(--sans)}
.tcard .who span{font:400 12.8px/17.92px var(--sans)}
.tnav{display:flex;gap:8px;margin-top:16px}
.cnav{display:flex;gap:16px}
.tnav button,.cnav button{width:38px;height:38px;border-radius:4px;border:1px solid #717989;background:#fff;cursor:pointer;display:grid;place-items:center}
.tnav button:disabled,.cnav button:disabled{opacity:.35;cursor:default}
@media (max-width:760px){.tcard{grid-template-columns:1fr;grid-template-rows:200px 1fr;height:auto;min-height:440px}}

/* customer story card (shared by the customers grid and the case study's "more" slider) */
.story{position:relative;display:block;border-radius:24px;overflow:hidden;background:var(--sb,#BEDFFE);color:var(--st,#1D1D1D);height:512px}
.story .ph{position:absolute;inset:0;--phb:var(--sb)}
.story .in{position:absolute;inset:0;padding:32px;display:flex;flex-direction:column}
.lmark{display:inline-flex;align-items:center;gap:8px;height:63px;font:700 22px/1 var(--sans);letter-spacing:-.02em}
.lmark i{width:26px;height:26px;border-radius:7px;background:currentColor;opacity:.85}
.story .qt{margin-top:0;font:600 25.6px/33.28px var(--sans);letter-spacing:-.512px;max-width:558px}
.story .num{font:500 76.8px/84.48px var(--sans);letter-spacing:-1.536px}
.story .lab{font:600 19.2px/24.96px var(--sans);letter-spacing:-.384px;max-width:372px;margin-top:12px;padding-top:12px;border-top:1px dashed color-mix(in srgb,currentColor 45%,transparent)}
.story .person{margin-top:auto;display:flex;align-items:center;gap:14px}
.story .person .av{width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.18)}
.story .person b{display:block;font:600 19.2px/24.96px var(--sans);letter-spacing:-.384px}
.story .person b+span{display:block;font:400 11.2px/14.56px var(--mono);text-transform:uppercase;letter-spacing:-.224px}
.story .bottom{margin-top:auto;padding-right:80px}
.cbtn{position:absolute;right:32px;bottom:32px;width:53px;height:53px;border-radius:12px;border:1px solid currentColor;display:grid;place-items:center}
.cbtn svg{width:16px;height:16px}
.cbtn .tip{position:absolute;bottom:calc(100% + 8px);right:0;white-space:nowrap;background:#078A52;color:#fff;border-radius:8px;padding:8px;font:400 12px/18px var(--sans);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.story:hover .cbtn .tip,.story:focus-visible .cbtn .tip{opacity:1;transform:none}
.story .in>*:not(.cbtn){position:relative}
@media (max-width:760px){.story{height:440px}.story .in{padding:24px}.cbtn{right:24px;bottom:24px}.story .num{font-size:60px;line-height:66px}.story .qt{font-size:22px;line-height:29px}}

/* marquee CTA (oat band with two scrolling columns of stat tiles) */
.mcta{position:relative;background:var(--oat-btn);padding:48px 0 32px;overflow:hidden}
.mcta .cap-t,.mcta .cap-b{position:absolute;left:0;right:0;height:58px;z-index:2}
.mcta .cap-t{top:0;background:var(--top,#fff);border-radius:0 0 16px 16px}
.mcta .cap-b{bottom:0;background:#F9F8F6;border-radius:16px 16px 0 0}
.mcta .grid{display:grid;grid-template-columns:1fr 576px;border-inline:1px solid #DAD4C8;min-height:495px}
.mcta .copy{padding:0 71px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border-right:1px solid #DAD4C8}
.mcta h2{margin-top:24px;font:500 61px/61px var(--sans);letter-spacing:-1.83px;max-width:515px}
.mcta h2 u{text-decoration-thickness:4px;text-underline-offset:6px}
.mcta .copy p{margin-top:16px;max-width:515px;text-wrap:balance}
.mcta .copy .btn{margin-top:20px}
.marq{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E6E4DD;height:495px;overflow:hidden}
.mcol2{display:flex;flex-direction:column;gap:1px;animation:mup 40s linear infinite}
.mcol2.dn{animation-name:mdn}
.marq:hover .mcol2{animation-play-state:paused}
@keyframes mup{to{transform:translateY(-50%)}}
@keyframes mdn{from{transform:translateY(-50%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.mcol2{animation:none}}
.mtile{background:#fff;padding:23px;flex:0 0 auto}
.mtile .t{height:247px;border-radius:16px;background:var(--mc,#7934F0);padding:16px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.mtile .t.ph{display:flex}
.mtile .t.ph::after{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%)}
.mtile b{font:600 17.45px/26.2px var(--sans)}
.mtile span{font:400 13.6px/20.4px var(--sans)}
.mtile .g{display:grid;grid-template-columns:auto 1fr;gap:1px;background:#D6D9DF;border-radius:8px;overflow:hidden;color:#1D1D1D;position:relative;z-index:1}
.mtile .g>*{background:#fff;padding:8.7px}
.mtile .g b{font:500 26px/39px var(--sans)}
.mtile .g span{font:400 9.9px/14.9px var(--sans);align-self:center}
.mtile .lg{width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.7)}
@media (max-width:1000px){.mcta .grid{grid-template-columns:1fr}.mcta .copy{padding:40px 24px;border-right:0}.marq{height:360px}.mcta h2{font-size:44px;line-height:46px}}
.ph[data-label=""]::after{display:none}

/* ---------- colour with meaning (14 Oct 2026): REKA forms on these templates ----------
   A form marked data-tone (programme, events, internships: orange, the call to act) shows its choice in that tone:
   the chosen card or chip is tinted and outlined, and the send button is the tone's button. Focus rings stay blue. */
.rkf[data-tone] .rcard input:checked+.c{background:var(--t-bg);box-shadow:inset 0 0 0 2px var(--t)}
.rkf[data-tone] .rcard input:checked+.c b::after{color:var(--t-ink)}
.rkf[data-tone] .rcard .c{transition:box-shadow .2s,background .2s,transform .3s var(--ease)}
.rkf[data-tone] .rcard:hover .c{transform:translateY(-2px)}
.rkf[data-tone] .rchip input:checked+.c{background:var(--t-btn);color:var(--t-btn-fg)}
.rkf[data-tone] .rchip:hover input:not(:checked)+.c{background:var(--t-bg)}
.rkf[data-tone] .send{background:var(--t-btn);color:var(--t-btn-fg)}
.rkf[data-tone] .send:hover{background:color-mix(in srgb,var(--t-btn) 88%,#000)}
@media (prefers-reduced-motion:reduce){.rkf[data-tone] .rcard:hover .c{transform:none}}

/* ---------- the tone text card (owner, 14 Oct 2026): a card's text sits on WHITE; the tone is an accent ----------
   .tone-white = a white card (no coloured bar: the owner removed that pattern), accent
   text in --t-ink, and a tinted hover. Linked cards also lift. The tint itself goes on a card's photo or visual area
   (a .ph inside a tone takes it automatically), never behind its text. Used by every text card on these pages. */
.tone-white{background:#fff!important;border:1px solid var(--line)!important;box-shadow:none;transition:background .25s,border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.tone-white.row{box-shadow:none}
.tone-white:hover{background:var(--t-bg)!important;border-color:transparent!important}
a.tone-white:hover,.tone-white:has(>a:hover){transform:translateY(-4px);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--t) 70%,transparent)}
.tone-white.row:has(>a:hover),a.tone-white.row:hover{transform:translateY(-3px);box-shadow:0 14px 30px -20px color-mix(in srgb,var(--t) 70%,transparent)}
@media (prefers-reduced-motion:reduce){.tone-white{transition:none}a.tone-white:hover,.tone-white:has(>a:hover){transform:none}}