/* Layout: a multi-page site that reads like a journey across a map. Each page opens in the sky, with clouds
   and rolling hills, and ends on dark hills. Bold two-tone Poppins headlines carry each page, forest grounds the type,
   cream is the land. Colours from the Level Up flyer stand for the parts of Dupoto (see "Colour journey" below).
   Single light look by choice, matching the Dupoto brand kit. */
:root{
  --sage:#ABC085; --sage-deep:#6F8C4A;--sage-ink:#526737; --forest:#2C4435; --ink:#26352B;
  --cream:#FEF8EE; --linen:#F6ECDA; --honey:#F3C979; --cloud:#D8E8FF;
  --stone:#5B6656; --mist:#CFD9C3; --line:#E6DCC6; --white:#FFFFFF;
  --display:"Poppins",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --body:"Mulish","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:22px; --wrap:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);color:var(--forest);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.02em}
p,li,figcaption,blockquote{text-wrap:pretty}
p:has(>a.textlink:only-child){text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,5.4rem);font-weight:800;letter-spacing:-.035em;line-height:1}
h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800}
h3{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.lift{color:var(--sage-deep)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
section{padding-block:clamp(60px,8vw,110px)}
.tight{padding-top:0}
.eyebrow{font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-ink);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;border-top:3px dotted currentColor}
.lede{font-size:1.15rem;color:var(--stone);max-width:60ch}
.head{display:grid;gap:16px;margin-bottom:44px}
.head.center{justify-items:center;text-align:center}
.head.center .lede{margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:1rem;padding:14px 24px;border-radius:999px;border:2px solid var(--forest);text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s,color .15s;background:transparent;color:var(--forest);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--forest);color:var(--cream)}
.btn.honey{background:var(--honey);border-color:var(--honey);color:var(--forest)}
.btn.ghost-light{border-color:var(--cream);color:var(--cream)}
.btn .arr{transition:transform .15s}
@media (max-width:420px){.btn,.add{white-space:normal;line-height:1.3;text-align:left}}
.btn:hover .arr{transform:translateX(3px)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.textlink{font-family:var(--display);font-weight:600;color:var(--forest);text-decoration:none;border-bottom:2px dotted var(--sage-deep);padding-bottom:2px}
.textlink:hover{color:var(--sage-deep)}

/* announcement + nav */
.announce{background:var(--forest);color:var(--cream);font-size:.92rem;text-align:center;padding:10px 16px}
.announce a{color:var(--honey);font-weight:700;text-decoration:none}
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--cream) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px;position:relative}
.logo{flex:none;display:block}
.logo img{height:38px;width:auto;max-width:none}
.nav .primary{display:flex;gap:2px;align-items:center;margin:0 auto 0 22px}
.nav .primary a,#menu a{white-space:nowrap;font-family:var(--display);font-weight:500;font-size:.92rem;text-decoration:none;padding:8px 12px;border-radius:999px;color:var(--forest)}
.nav .primary a:hover,#menu a:hover{background:var(--linen)}
.nav .primary a[aria-current="page"],#menu a[aria-current="page"]{background:var(--forest);color:var(--cream)}
#menu{display:none;position:absolute;right:20px;top:calc(100% + 6px);width:min(300px,calc(100vw - 40px));list-style:none;margin:0;padding:10px;background:var(--white);border:1.5px solid var(--line);border-radius:22px;box-shadow:0 30px 50px -24px rgba(44,68,53,.45);flex-direction:column;gap:2px;z-index:45}
#menu.open{display:flex}
#menu a{display:block;font-size:1rem;padding:11px 14px;border-radius:14px}
#menu .sep{height:1px;background:var(--line);margin:6px 10px}
#menu .dup{display:none}
.lang{display:flex;background:var(--linen);border-radius:999px;padding:3px;flex:none}
.lang button{font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.06em;border:0;background:none;color:var(--stone);padding:7px 10px;border-radius:999px;cursor:pointer;line-height:1}
.lang button[aria-pressed="true"]{background:var(--forest);color:var(--cream)}
.nav .actions{display:flex;gap:10px;align-items:center}
.list-btn{white-space:nowrap;font-family:var(--display);font-weight:600;font-size:.9rem;background:var(--linen);border:0;border-radius:999px;padding:10px 16px;cursor:pointer;color:var(--forest);display:flex;gap:8px;align-items:center}
.list-btn .n{background:var(--forest);color:var(--cream);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:.78rem;padding:0 6px}
.nav .btn{padding:10px 18px;font-size:.9rem}
.burger{display:block;background:none;border:0;padding:8px;cursor:pointer;border-radius:12px}
.burger:hover,.burger[aria-expanded="true"]{background:var(--linen)}
.burger span{display:block;width:24px;height:2.5px;background:var(--forest);margin:5px 0;border-radius:2px}
@media (max-width:1100px){.nav .primary{display:none}#menu .dup{display:block}}
@media (max-width:700px){.list-btn .t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}
@media (max-width:560px){.nav .actions .btn{display:none}}
@media (max-width:620px){html[lang="cy"] .nav .actions .btn{display:none}}
@media (max-width:389px){.nav .wrap{gap:8px}.nav .actions{gap:6px}.nav .logo img{height:32px}.lang button{padding:7px 8px}.list-btn{padding:10px 12px}}
@media (max-width:339px){.nav .logo img{height:28px}.lang button{padding:7px 6px}.burger{padding:8px 6px}}
@media (min-width:1101px) and (max-width:1199px){html[lang="cy"] .list-btn .t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}

/* pages */
.page{animation:fade .35s ease}
@keyframes fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}

/* page hero (inner pages) */
.phero{padding-block:clamp(44px,6vw,84px) clamp(40px,5vw,70px)}
.phero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.phero .tx{display:grid;gap:22px;justify-items:start}
.phero .art{border-radius:180px 180px 26px 26px;overflow:hidden;border:6px solid var(--white);box-shadow:0 30px 60px -30px rgba(44,68,53,.45);aspect-ratio:5/5.2}
.phero .art img{width:100%;height:100%;object-fit:cover}
.phero.solo .wrap{grid-template-columns:1fr}
@media (max-width:900px){.phero .wrap{grid-template-columns:1fr}.phero .art{max-width:520px;width:100%}}
.phero .art.who{position:relative;background:var(--honey);aspect-ratio:5/6}
.phero .art.who img{position:absolute;left:50%;top:7%;width:106%;height:auto;max-width:none;object-fit:initial;transform:translateX(-50%)}
.who-q{position:absolute;left:14px;right:14px;bottom:14px;margin:0;display:grid;gap:2px;background:var(--white);border-radius:16px 16px 20px 20px;padding:12px 18px 13px;box-shadow:0 14px 30px -16px rgba(44,68,53,.55)}
.who-q .wq{font-family:var(--display);font-weight:700;font-size:clamp(1.08rem,.5vw + .98rem,1.32rem);line-height:1.25;color:var(--forest)}
.who-q b{font-size:.86rem;color:var(--ink)}
.who-q .wr{font-size:.8rem;color:var(--stone)}
@media (max-width:900px){.phero .art.who{aspect-ratio:5/5.7}}

/* home hero */
.hero{padding-block:clamp(40px,6vw,80px) clamp(56px,7vw,90px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.hero h1{font-size:clamp(2.8rem,7.2vw,6rem);line-height:.98}
.hero h1 .lift{display:block}
html[lang="cy"] h1{font-size:clamp(2.4rem,5.4vw,4.5rem)}
html[lang="cy"] .hero h1{font-size:clamp(2.5rem,6vw,5rem)}
html[lang="cy"] h2{font-size:clamp(1.85rem,3.9vw,3rem)}
html[lang="cy"] h2.h-md{font-size:clamp(1.7rem,3.1vw,2.4rem)}
html[lang="cy"] .bigc h2{font-size:clamp(2.2rem,5vw,4rem)}
html[lang="cy"] .band h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.hero .lede{margin-top:24px;font-size:1.22rem}
.hero .ctas{margin-top:32px}
.hero .q{margin-top:28px;font-family:var(--display);font-weight:600;color:var(--forest);display:flex;align-items:center;gap:12px;font-size:.98rem}
.hero .q img{width:44px}
.collage{position:relative;aspect-ratio:1/1.02;max-width:100%}
.collage .main{position:absolute;inset:4% 3% 4% 6%;border-radius:200px 200px 28px 28px;overflow:hidden;border:6px solid var(--white);box-shadow:0 30px 60px -30px rgba(44,68,53,.45)}
.collage .main img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.chip{position:absolute;display:flex;align-items:center;gap:8px;background:var(--white);border-radius:999px;padding:7px 16px 7px 7px;font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--forest);box-shadow:0 12px 30px -14px rgba(44,68,53,.5);animation:bob 6s ease-in-out infinite;max-width:80%}
.chip img{width:38px;height:38px;object-fit:contain;background:var(--cloud);border-radius:50%;padding:4px;flex:none}
.chip.c1{top:2%;right:4%}.chip.c2{top:44%;left:-2%;animation-delay:-2s}.chip.c3{bottom:4%;right:2%;animation-delay:-4s}
.chip.c3 img{background:var(--honey)}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.collage{max-width:540px;width:100%;margin-inline:auto}}

/* numbers */
.numbers{background:var(--sage)}
.numbers .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.num{padding:32px 20px;border-left:2px dotted rgba(44,68,53,.35);display:grid;gap:4px}
.num:first-child{border-left:0}
.num b{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4.5vw,3.3rem);color:var(--forest);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.num span{font-weight:600;color:var(--forest)}
@media (max-width:700px){.numbers .wrap{grid-template-columns:1fr 1fr}.num:nth-child(3){border-left:0}.num{border-top:2px dotted rgba(44,68,53,.35)}.num:nth-child(-n+2){border-top:0}}
.sdg-home{padding-block:clamp(36px,4.5vw,56px)}
.sdg-home .sdg-strip{margin-top:0}
.doc{max-width:760px;display:grid;gap:14px}
.doc h2{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:800;margin-top:24px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{color:var(--ink);font-size:1.03rem;line-height:1.65}
.doc ul{margin:0;padding-left:20px;display:grid;gap:12px}
.doc li b{font-family:var(--display);color:var(--forest)}
.legal .flinks a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.legal .flinks a:hover{color:var(--cream)}

/* problem */
.problem{background:var(--forest);color:var(--cream);position:relative;overflow:hidden}
.topo::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' fill='none' stroke='%23ABC085' stroke-opacity='.13' stroke-width='1.4'%3E%3Cpath d='M-20 120c80-60 160 40 260-10s170-90 300 0'/%3E%3Cpath d='M-20 160c90-50 170 50 260 0s190-80 300 10'/%3E%3Cpath d='M-20 200c100-40 170 60 270 10s180-70 290 20'/%3E%3Cpath d='M60 360c40-60 120-60 160-10s110 60 160 0'/%3E%3Cpath d='M80 390c40-40 100-40 140 0s110 40 150-10'/%3E%3Cpath d='M-20 470c120-30 220 30 330 0s150-30 230 10'/%3E%3Ccircle cx='420' cy='300' r='40'/%3E%3Ccircle cx='420' cy='300' r='70'/%3E%3Ccircle cx='420' cy='300' r='100'/%3E%3C/svg%3E");pointer-events:none}
.dark .wrap{position:relative}
.dark h2,.dark h3{color:var(--cream)}
.dark h2 .lift{color:var(--sage)}
.dark .eyebrow{color:var(--honey)}
.dark .lede{color:var(--mist)}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pain{border:1.5px solid rgba(171,192,133,.3);border-radius:var(--r);padding:26px;display:grid;gap:12px;align-content:start;background:rgba(254,248,238,.04)}
.pain .who{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.pain q{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--cream);line-height:1.3;quotes:"\201C" "\201D"}
.pain p{color:var(--mist);font-size:.96rem}
.answer{margin-top:28px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;background:var(--cream);color:var(--ink);border-radius:var(--r);padding:22px 26px}
.answer b{font-family:var(--display);font-size:1.3rem;color:var(--forest);display:block;line-height:1.25}
.answer span{color:var(--stone)}
@media (max-width:860px){.pains{grid-template-columns:1fr}.answer{grid-template-columns:1fr}.answer .btn{justify-self:start}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pillar{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:26px 22px;display:grid;gap:12px;align-content:start;text-decoration:none;transition:transform .15s,box-shadow .15s}
.pillar:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(44,68,53,.5)}
.pillar h3{font-size:1.25rem}
.pillar p{color:var(--stone);font-size:.96rem}
.pillar .go{font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--sage-ink)}
@media (max-width:980px){.pillars{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}

/* why grid */
.whys{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--forest)}
.why{padding:28px 26px 30px 0;border-bottom:1.5px solid var(--line);display:grid;gap:10px;align-content:start}
.why:nth-child(3n+2),.why:nth-child(3n){padding-left:26px;border-left:1.5px solid var(--line)}
.why .k{font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--sage-ink)}
.why h3{font-size:1.25rem}
.why p{color:var(--stone);font-size:.96rem}
@media (max-width:860px){.whys{grid-template-columns:1fr 1fr}.why:nth-child(n){padding-left:0;border-left:0;padding-right:16px}.why:nth-child(even){padding-left:18px;border-left:1.5px solid var(--line)}}
@media (max-width:540px){.whys{grid-template-columns:1fr}.why:nth-child(even){padding-left:0;border-left:0}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;z-index:0}
.step{display:grid;gap:12px;align-content:start}
.step .badge{width:64px;height:64px;border-radius:50%;background:var(--white);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--forest)}
.step h3{font-size:1.75rem;font-weight:800}
.step p{color:var(--stone)}
.step .k{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink)}
.trail{position:absolute;top:32px;left:64px;right:calc((100% - 44px) / 3 - 32px);border-top:3px dotted var(--sage);z-index:-1}
@media (max-width:820px){.steps{grid-template-columns:1fr}.trail{display:none}}

/* case study */
.case{background:var(--linen)}
.casegrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.casegrid .ph{border-radius:28px;overflow:hidden;aspect-ratio:4/3.3}
.casegrid .ph img{width:100%;height:100%;object-fit:cover}
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-block:24px}
.cstats div{background:var(--white);border-radius:16px;padding:14px 12px;display:grid;gap:2px}
.cstats b{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--forest);line-height:1;font-variant-numeric:tabular-nums}
.cstats span{font-size:.8rem;font-weight:700;color:var(--stone);line-height:1.3}
.tick{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tick li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--ink)}
.tick li::before{content:"";width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%232C4435' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.dark .tick li,.member .tick li{color:var(--mist)}
@media (max-width:900px){.casegrid{grid-template-columns:1fr}}
@media (max-width:480px){.cstats{grid-template-columns:1fr 1fr}}

/* voices */
.voices{background:var(--sage)}
.voices .eyebrow{color:var(--forest)}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.v{background:var(--cream);border-radius:var(--r);padding:28px;display:grid;gap:18px;align-content:space-between}
.v p{font-family:var(--display);font-weight:600;color:var(--forest);font-size:1.1rem;line-height:1.42}
.v.big{grid-column:span 2}
.v.big p{font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.35}
.v .who b{display:block;font-family:var(--display);color:var(--forest);font-size:.95rem}
.v .who span{font-size:.88rem;color:var(--stone)}
.v .who .face{font-size:.8rem;color:var(--forest)}
.v .who-row b{display:block}
@media (max-width:900px){.vgrid{grid-template-columns:1fr}.v.big{grid-column:auto}}

/* band CTA */
.band{background:var(--honey);border-radius:30px;padding:clamp(30px,5vw,60px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;position:relative;overflow:hidden}
.band h2{font-size:clamp(1.9rem,4vw,3rem)}
.band p{margin-top:12px;color:var(--forest);max-width:52ch}
.band > *{position:relative}
@media (max-width:820px){.band{grid-template-columns:1fr}}
.icons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.icn{background:rgba(254,248,238,.06);border:1.5px solid rgba(171,192,133,.25);border-radius:20px;padding:16px 10px 14px;cursor:pointer;display:grid;justify-items:center;gap:8px;color:var(--cream);font-family:var(--display);font-weight:600;font-size:.95rem;transition:background .15s,border-color .15s,transform .15s;position:relative}
.icn:hover{transform:translateY(-3px);border-color:var(--sage)}
.icn img{height:76px;width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.icn[aria-pressed="true"]{background:var(--cream);color:var(--forest);border-color:var(--cream)}
.icn .done{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--honey);color:var(--forest);font-size:.72rem;display:grid;place-items:center;font-weight:800}

@media (max-width:440px){.icons{gap:8px}.icn{font-size:.8rem;padding:12px 4px}.icn img{height:56px}}

/* teaser icons strip */
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,3vw,30px);margin-block:10px 30px}
.strip figure{margin:0;display:grid;justify-items:center;gap:6px;font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--forest)}
.strip img{height:clamp(54px,8vw,82px);width:auto}

/* relevance model */
.rm{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rmc{border-radius:var(--r);padding:30px 26px;display:grid;gap:10px;align-content:start}
.rmc:nth-child(1){background:var(--honey)}.rmc:nth-child(2){background:var(--sage)}.rmc:nth-child(3){background:var(--cloud)}
.rmc h3{font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:800}
.rmc b{font-family:var(--display);color:var(--forest)}
.rmc p{color:var(--ink)}
@media (max-width:820px){.rm{grid-template-columns:1fr}}

/* principles */
.princ{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--forest)}
.pr{padding:24px 18px 26px 0;display:grid;gap:8px;align-content:start}
.pr + .pr{padding-left:18px;border-left:1.5px solid var(--line)}
.pr .n{font-family:var(--display);font-weight:800;color:var(--sage-ink);font-size:.85rem}
.pr h3{font-size:1.45rem;font-weight:800}
.pr b{font-family:var(--display);font-weight:600;color:var(--forest);font-size:.98rem}
.pr p{color:var(--stone);font-size:.93rem}
@media (max-width:980px){.princ{grid-template-columns:1fr 1fr}.pr + .pr{padding-left:0;border-left:0}.pr{border-bottom:1.5px solid var(--line);padding-right:16px}.pr:nth-child(even){padding-left:18px;border-left:1.5px solid var(--line)}}
@media (max-width:520px){.princ{grid-template-columns:1fr}.pr:nth-child(even){padding-left:0;border-left:0}}

/* contrast */
.contrast{display:grid;gap:12px}
.crow{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;background:var(--white);border:1.5px solid var(--line);border-radius:18px;padding:18px 24px}
.crow .old{color:var(--stone);text-decoration:line-through;text-decoration-color:rgba(91,102,86,.45)}
.crow .new{font-family:var(--display);font-weight:700;color:var(--forest);font-size:1.1rem}
.crow .ar{color:var(--sage-ink);font-weight:800;font-size:1.3rem}
@media (max-width:560px){.crow{grid-template-columns:1fr}.crow .ar{display:none}}

/* triad people place time */
.triad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (min-width:926px) and (max-width:1059px){.triad{grid-template-columns:minmax(0,1fr)}}
.triad div{border:2px dotted var(--sage-deep);border-radius:var(--r);padding:24px;display:grid;gap:6px}
.triad h3{font-size:1.5rem;font-weight:800}
.triad p{color:var(--stone)}
@media (max-width:720px){.triad{grid-template-columns:1fr}}

/* programme catalogue */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.tabs button{font-family:var(--display);font-weight:600;font-size:.92rem;padding:10px 18px;border-radius:999px;border:2px solid var(--forest);background:transparent;color:var(--forest);cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--forest);color:var(--cream)}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.products{grid-template-columns:1fr}}
.prod{background:var(--white);border-radius:var(--r);padding:24px;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;border:1.5px solid var(--line);transition:transform .15s,box-shadow .15s}
.prod:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(44,68,53,.5)}
.prod .ptop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.prod .pic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;flex:none}
.prod .pic svg{width:28px;height:28px;fill:none;stroke:var(--forest);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tag{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--linen);color:var(--forest);white-space:nowrap}
.prod h3{font-size:1.22rem}
.prod .meta{font-size:.86rem;font-weight:700;color:var(--sage-ink);margin-top:4px}
.prod p{color:var(--stone);font-size:.96rem}
.prod .pfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 12px;padding-top:14px;border-top:1.5px dotted var(--line)}
.prod .fmt{font-size:.84rem;font-weight:700;color:var(--forest);flex:1 1 7.5em}
.add{font-family:var(--display);font-weight:600;font-size:.86rem;border-radius:999px;padding:9px 15px;border:2px solid var(--forest);background:transparent;color:var(--forest);cursor:pointer;white-space:nowrap}
@media (max-width:420px){.add{white-space:normal;line-height:1.3;text-align:left}}
.add:hover{background:var(--forest);color:var(--cream)}
.add.in{background:var(--sage);border-color:var(--sage);color:var(--forest)}
.note{margin-top:24px;font-size:.92rem;color:var(--stone);text-align:center}

/* studio showcase */
.studio{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,60px);align-items:center;padding-block:36px;border-top:2px dotted var(--line)}
.head + .studio{border-top:0;padding-top:0}
.studio .tx{display:grid;gap:14px;justify-items:start}
.studio h3{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800}
.studio p{color:var(--stone)}
.facts{display:flex;gap:8px;flex-wrap:wrap}
.facts span{background:var(--white);border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.86rem;font-weight:700;color:var(--forest)}
.tri{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:16/11}
.tri div{border-radius:18px;overflow:hidden;min-height:0}
.tri div:first-child{grid-row:span 2}
.tri img{width:100%;height:100%;object-fit:cover}
.studio.flip .tx{order:2}
@media (max-width:860px){.studio{grid-template-columns:1fr}.studio.flip .tx{order:0}}

/* process */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:s}
.proc{background:var(--white);border:1.5px solid var(--line);border-radius:20px;padding:22px 18px;display:grid;gap:8px;align-content:start;position:relative}
.proc .n{font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--sage-ink);letter-spacing:.1em;text-transform:uppercase}
.proc h3{font-size:1.1rem}
.proc p{font-size:.92rem;color:var(--stone)}
@media (min-width:981px){.process.four{grid-template-columns:repeat(4,1fr)}}
@media (max-width:980px){.process{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.process{grid-template-columns:1fr}}

/* inspection */
.frames{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fr{background:var(--cloud);border-radius:20px;padding:22px;display:grid;gap:8px;align-content:start}
.fr b{font-family:var(--display);font-size:1.25rem;color:var(--forest)}
.fr p{font-size:.93rem;color:#3E4E5A}
@media (max-width:900px){.frames{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.frames{grid-template-columns:1fr}}

/* membership */
.member{display:grid;grid-template-columns:1fr 1.1fr;background:var(--forest);color:var(--cream);border-radius:28px;overflow:hidden}
.member .ph{position:relative;min-height:320px}
.member .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.member .tx{padding:clamp(28px,4vw,48px);display:grid;gap:18px;align-content:center;justify-items:start}
.member h2,.member h3{color:var(--cream);font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800}
.pill{background:var(--honey);color:var(--forest);border-radius:999px;padding:6px 14px;font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.member p{color:var(--mist)}
@media (max-width:860px){.member{grid-template-columns:1fr}.member .ph{min-height:240px}}
.head.stick{align-content:start;align-self:start;position:sticky;top:110px}
@media (max-width:900px){.head.stick{position:static}}
.timeline{display:grid;gap:0;border-left:3px dotted var(--sage);margin-left:12px}
.tl{position:relative;padding:0 0 28px 30px;display:grid;gap:4px}
.tl::before{content:"";position:absolute;left:-11px;top:4px;width:19px;height:19px;border-radius:50%;background:var(--cream);border:3px solid var(--forest)}
.tl .when{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-ink)}
.tl h3{font-size:1.2rem}
.tl p{color:var(--stone);font-size:.96rem;max-width:60ch}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.role{border-radius:26px;padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;justify-items:start}
.role .btn{max-width:100%;white-space:normal;text-align:left;line-height:1.3;text-wrap:balance}
.role.a{background:var(--honey)}.role.b{background:var(--white);border:1.5px solid var(--line)}
.role h3{font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:800}
.role .sub{font-family:var(--display);font-weight:600;color:var(--forest)}
@media (max-width:820px){.roles{grid-template-columns:1fr}}

/* platform */
.plat-hero .wrap{grid-template-columns:1fr 1fr}
.plat-stage{position:relative;width:100%;max-width:600px;aspect-ratio:1/.92;justify-self:end}
.plat-photo{position:absolute;top:0;right:0;width:94%;height:84%;border-radius:30px;overflow:hidden;border:6px solid var(--white);box-shadow:0 30px 60px -30px rgba(44,68,53,.45);background:var(--sage)}
.plat-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.score-card{position:absolute;left:-3%;bottom:3%;width:min(290px,60%);border-radius:22px;padding:18px 22px 18px;background:linear-gradient(135deg,#F7D774 0%,var(--honey) 45%,#EDAE52 100%);color:var(--forest);box-shadow:0 26px 44px -20px rgba(44,68,53,.6);display:grid;gap:2px}
.score-card span{font-family:var(--display);font-weight:600;font-size:.84rem}
.score-card b{font-family:var(--display);font-weight:800;font-size:2rem;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
.score-card small{font-size:.8rem;font-weight:600;opacity:.85}
.score-card svg{position:absolute;right:18px;top:18px;width:22px;height:22px;fill:none;stroke:var(--forest);stroke-width:1.8;stroke-linejoin:round}
@media (max-width:600px){.score-card{width:auto;left:0;bottom:-2%;padding:12px 44px 12px 16px;border-radius:18px}.score-card span{font-size:.76rem}.score-card b{font-size:1.5rem}.score-card small{font-size:.72rem}.score-card svg{width:18px;height:18px;right:14px;top:13px}}
@media (max-width:900px){.plat-hero .wrap{grid-template-columns:1fr}.plat-stage{justify-self:center;margin-top:10px}.score-card{left:0}}
.purpose-sec{padding-top:clamp(80px,10vw,130px)}
.purpose{background:var(--sage);border-radius:32px;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(18px,4vw,50px);align-items:end;padding:0 clamp(22px,4vw,56px)}
.rocket{align-self:end;margin-top:-100px}
.rocket img{width:100%;max-width:380px;margin:0 auto}
.purpose-tx{padding-block:clamp(30px,5vw,56px);display:grid;gap:16px;justify-items:start}
.purpose-tx .eyebrow{color:var(--forest)}
.purpose-tx p{color:var(--ink);max-width:58ch}
.hl{background:linear-gradient(transparent 60%,var(--honey) 60%,var(--honey) 92%,transparent 92%);padding:0 .08em}
.formula{display:grid;grid-template-columns:116px 1fr;gap:16px;align-items:center;background:rgba(254,248,238,.6);border-radius:18px;padding:12px 18px 12px 12px}
.formula img{width:116px}
.formula b{font-family:var(--display);color:var(--forest);display:block;font-size:1.05rem}
.formula span{color:var(--ink);font-size:.94rem}
@media (max-width:860px){.purpose{grid-template-columns:1fr;align-items:start}.rocket{margin-top:-70px}.rocket img{max-width:230px}.purpose-tx{padding-top:0}}
@media (max-width:420px){.formula{grid-template-columns:84px 1fr}.formula img{width:84px}}
.tour2{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,48px);align-items:start}
.shot{margin:0;display:grid;gap:14px}
.shot-stage{position:relative;background:var(--sage);border-radius:26px;aspect-ratio:16/10.5;overflow:hidden}
.shot-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(10px,2.4vw,28px)}
.shot .figcap{font-family:var(--display);font-weight:600;color:var(--honey);font-size:1rem;text-align:center}
.mock-note.on-dark{color:var(--mist);margin-top:18px}
.zoomable{cursor:zoom-in}
.lightbox img{background:transparent}
@media (max-width:900px){.tour2{grid-template-columns:1fr}.tour2 .tourtabs{grid-template-columns:1fr 1fr}.tour2 .tourtabs button{padding:12px 14px}.tour2 .tourtabs button span{display:none}.tour2 .tourtabs button b{font-size:.98rem}}
.head.mb-0{margin-bottom:0}

/* organisations */
.vgal{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:16/9}
.vgal div{border-radius:20px;overflow:hidden;min-height:0;position:relative}
.vgal div:first-child{grid-row:span 2}
.vgal img{width:100%;height:100%;object-fit:cover}
.vgal figcaption{position:absolute;left:10px;bottom:10px;background:rgba(254,248,238,.92);color:var(--forest);font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:999px}
@media (max-width:640px){.vgal{aspect-ratio:auto;grid-template-columns:1fr;grid-template-rows:none}.vgal div{aspect-ratio:16/10}.vgal div:first-child{grid-row:auto}}
.vhead{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,5vw,72px);align-items:start}
.vhead>*{grid-column:1}
.vhead>.vmam{grid-column:2;grid-row:1/span 4;align-self:end;width:clamp(180px,24vw,300px);height:auto}
.vsays{margin:0;max-width:36ch;font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1vw + .95rem,1.55rem);line-height:1.32;color:var(--cream)}
.vsays span{color:var(--honey)}
@media (max-width:760px){.vhead{grid-template-columns:minmax(0,1fr)}.vhead>.vmam{grid-column:1;grid-row:auto;width:min(220px,62%)}}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:10px}
.fl{padding:20px 16px 20px 0;display:grid;gap:6px;align-content:start;position:relative}
.fl + .fl{padding-left:16px;border-left:2px dotted var(--sage)}
.fl .k{font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--honey)}
.fl h3{font-size:1.08rem;color:var(--cream)}
.fl p{font-size:.9rem;color:var(--mist)}
@media (max-width:900px){.flow{grid-template-columns:1fr}.fl + .fl{padding-left:0;border-left:0;border-top:2px dotted rgba(171,192,133,.5)}}
.uses{display:flex;flex-wrap:wrap;gap:10px}
.uses span{background:var(--white);border:1.5px solid var(--line);border-radius:999px;padding:10px 18px;font-family:var(--display);font-weight:600;color:var(--forest)}

/* community */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:110px;gap:10px}
.gallery div{border-radius:16px;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover}
.g1{grid-column:span 6;grid-row:span 2}.g2,.g3{grid-column:span 3;grid-row:span 2}
.cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:start}
.recap{display:grid;gap:16px}
.quote{margin:0;background:var(--honey);border-radius:var(--r);padding:24px;font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--forest);line-height:1.4}
.quote cite{display:block;margin-top:10px;font-family:var(--body);font-style:normal;font-weight:600;font-size:.88rem}
.quote.alt{background:var(--white);border:1.5px solid var(--line)}
.perks{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.perks li{display:grid;grid-template-columns:10px 1fr;gap:16px;align-items:start}
.perks li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--honey);margin-top:8px}
.perks b{font-family:var(--display);color:var(--forest);display:block}
.perks span{color:var(--stone);font-size:.95rem}
.dark .perks b{color:var(--cream)}.dark .perks span{color:var(--mist)}
.perks.two{grid-template-columns:1fr 1fr;gap:22px 30px}
@media (max-width:700px){.perks.two{grid-template-columns:1fr}}
.collab{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,50px);align-items:center}
.cycle{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cycle div{background:rgba(254,248,238,.07);border:1.5px solid rgba(171,192,133,.3);border-radius:16px;padding:14px;display:grid;gap:2px}
.cycle b{font-family:var(--display);color:var(--honey);font-size:.95rem}
.cycle span{font-size:.86rem;color:var(--mist)}
@media (max-width:860px){.cgrid,.collab{grid-template-columns:1fr}}
@media (max-width:420px){.cycle{grid-template-columns:1fr 1fr}}
.join{background:var(--forest);border-radius:28px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,48px);align-items:center;color:var(--cream)}
.join .ph{border-radius:20px;overflow:hidden;aspect-ratio:16/9;margin-bottom:20px;background:var(--ink)}
.join .ph img{width:100%;height:100%;object-fit:cover}
.join h3{color:var(--cream);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800}
.join p{color:var(--mist);margin-top:10px}
.join .tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.join .tags span{font-family:var(--display);font-size:.82rem;font-weight:600;color:var(--honey)}
@media (max-width:900px){.join{grid-template-columns:1fr}}

/* forms */
form.f{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form.f label{display:grid;gap:6px;font-size:.84rem;font-weight:700;color:var(--mist)}
.light-form form.f label,form.f.light label{color:var(--forest)}
form.f .full{grid-column:1/-1}
form.f input,form.f select,form.f textarea{width:100%;font:inherit;font-size:1rem;padding:13px 14px;border-radius:12px;border:2px solid transparent;background:var(--cream);color:var(--ink)}
form.f.light input,form.f.light select,form.f.light textarea{background:var(--white);border-color:var(--line)}
form.f textarea{min-height:120px;resize:vertical}
form.f input:focus,form.f select:focus,form.f textarea:focus{outline:none;border-color:var(--honey)}
.msg{display:none;grid-column:1/-1;border:1.5px dashed var(--sage);border-radius:14px;padding:14px;font-size:.94rem}
.dark .msg,.join .msg{background:rgba(254,248,238,.08);color:#E7EEDD}
.msg.show{display:block}
.msg b{color:var(--sage-ink)}
.join .msg b{color:var(--honey)}
.msg pre{white-space:pre-wrap;font-family:var(--body);font-size:.88rem;background:var(--white);border:1.5px solid var(--line);border-radius:10px;padding:12px;margin:10px 0 0;user-select:all;color:var(--ink)}
@media (max-width:480px){form.f{grid-template-columns:1fr}}

/* about */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.story p + p{margin-top:16px}
.story .big{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--forest);line-height:1.25;letter-spacing:-.015em}
.wealth{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.wealth span{background:var(--sage);color:var(--forest);font-family:var(--display);font-weight:600;padding:8px 16px;border-radius:999px}
@media (max-width:860px){.story{grid-template-columns:1fr}}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.person{background:var(--white);border:1.5px solid var(--line);border-radius:26px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.person .ph{background:var(--cloud);aspect-ratio:5/4;display:grid;place-items:end center;overflow:hidden}
.person .ph img{height:94%;width:auto;max-width:96%;object-fit:contain;object-position:bottom}

.person .tx{padding:22px;display:grid;gap:8px;align-content:start}
.person .role{font-family:var(--display);font-weight:600;color:var(--sage-ink);font-size:.9rem;padding:0}
.person p{color:var(--stone);font-size:.95rem}
@media (max-width:1000px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.team{grid-template-columns:1fr}.person .ph{aspect-ratio:16/11}}
.tone{display:flex;flex-wrap:wrap;gap:10px}
.tone span{border:2px solid var(--forest);border-radius:999px;padding:8px 18px;font-family:var(--display);font-weight:600;color:var(--forest)}
.places{display:flex;flex-wrap:wrap;gap:10px}
.places span{background:var(--linen);border-radius:12px;padding:10px 16px;font-weight:700;color:var(--forest)}

/* contact */
.cgrid2{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,60px);align-items:start}
.cbox{background:var(--white);border:1.5px solid var(--line);border-radius:26px;padding:clamp(22px,3vw,34px)}
.side{display:grid;gap:16px}
.sidecard{background:var(--forest);color:var(--cream);border-radius:22px;padding:24px;display:grid;gap:10px;justify-items:start}
.sidecard h3{color:var(--cream)}
.sidecard p{color:var(--mist);font-size:.95rem}
.sidecard.light{background:var(--linen);color:var(--ink)}
.sidecard.light h3{color:var(--forest)}
.sidecard.light p{color:var(--stone)}
.copyrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copyrow code{font-family:var(--body);font-weight:700;font-size:1.02rem;user-select:all}
.copy{font-family:var(--display);font-weight:600;font-size:.78rem;border-radius:999px;padding:5px 12px;border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.chosen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.chosen span{background:var(--sage);color:var(--forest);border-radius:999px;padding:6px 12px;font-size:.86rem;font-weight:700}
@media (max-width:900px){.cgrid2{grid-template-columns:1fr}}
.faq details{border-bottom:1.5px solid var(--line);padding-block:18px}
.faq summary{cursor:pointer;list-style:none;display:block;position:relative;padding-right:40px;font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--forest)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:1px;font-size:1.6rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;color:var(--stone);max-width:62ch}

/* real maps wall */
.mapwall{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,28px);margin-bottom:34px}
.mapwall figure{margin:0;background:var(--white);padding:10px 10px 12px;border-radius:6px;box-shadow:0 18px 30px -20px rgba(44,68,53,.55);transition:transform .2s}
.mapwall figure:hover{transform:translateY(-4px)}
.mapwall img{width:100%;aspect-ratio:10/7;object-fit:cover;border-radius:3px}
.mapwall figcaption{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--stone);margin-top:8px;text-align:center}
@media (max-width:700px){.mapwall{grid-template-columns:1fr 1fr}}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards3 img{width:100%;border-radius:10px;box-shadow:0 18px 30px -22px rgba(44,68,53,.6);aspect-ratio:10/7;object-fit:cover}
@media (max-width:760px){.cards3{grid-template-columns:1fr}}
.research{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.study{background:var(--white);border:1.5px solid var(--line);border-radius:20px;padding:24px;display:grid;gap:10px;align-content:start}
.study .k{font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-ink)}
.study h3{font-size:1.12rem;line-height:1.3}
.study p{font-size:.93rem;color:var(--stone)}
@media (max-width:860px){.research{grid-template-columns:1fr}}

/* audience switcher */
.aud{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.aud span{font-family:var(--display);font-weight:600;color:var(--stone);font-size:.9rem;margin-right:4px}
.aud a{font-family:var(--display);font-weight:600;font-size:.88rem;text-decoration:none;color:var(--forest);background:var(--white);border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;transition:border-color .15s,background .15s}
.aud a:hover{border-color:var(--forest);background:var(--linen)}

/* start here paths */
.paths3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.path3{border-radius:26px;padding:28px 26px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:14px;position:relative;border:1.5px solid var(--line);background:var(--white)}
.path3.mid{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.path3.mid h3,.path3.mid .step-n{color:var(--cream)}
.path3.mid p,.path3.mid li{color:var(--mist)}
.path3 .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.step-n{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink)}
.path3 h3{font-size:2rem;font-weight:800}
.path3 .for{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--forest);background:var(--linen);border-radius:12px;padding:8px 12px}
.path3.mid .for{background:rgba(254,248,238,.1);color:var(--honey)}
.path3 ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;align-content:start}
.path3 li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:.95rem;color:var(--ink)}
.path3 li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sage);margin-top:8px}
.path3 .btn{justify-self:start}
.path3 .badge3{position:absolute;top:-12px;left:26px;background:var(--honey);color:var(--forest);font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.pathline{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;font-family:var(--display);font-weight:600;color:var(--stone);font-size:.92rem;text-align:center;flex-wrap:wrap}
@media (max-width:900px){.paths3{grid-template-columns:1fr}}

/* check-up quiz */
.ck-hero{padding-block:clamp(44px,6vw,80px) clamp(30px,4vw,50px)}
.ck-tx{display:grid;gap:20px;justify-items:start}
.ck-hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,60px);align-items:center}
.ck-get{background:var(--forest);color:var(--cream);border-radius:26px;padding:26px;display:grid;gap:14px}
.ck-get h2{color:var(--honey);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.ck-get li{display:grid;grid-template-columns:10px 1fr;gap:14px;align-items:start}
.ck-get li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--honey);margin-top:7px}
.ck-get ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ck-get b{font-family:var(--display);display:block}
.ck-get span{color:var(--mist);font-size:.9rem}
.ck-meta{display:flex;gap:8px;flex-wrap:wrap}
.ck-meta span{background:var(--white);border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-family:var(--display);font-weight:600;font-size:.84rem;color:var(--forest)}
@media (max-width:900px){.ck-hero .wrap{grid-template-columns:1fr}}
.ck{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
@media (max-width:980px){.ck{grid-template-columns:1fr}.ck-side{position:static!important;order:-1}}
.quiz{display:grid;gap:14px}
.qrow{background:var(--white);border:1.5px solid var(--line);border-radius:22px;padding:22px 24px;display:grid;grid-template-columns:1fr;gap:6px;align-items:start;transition:border-color .2s,box-shadow .2s}
.qrow .qk{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-ink)}
.qrow .qt{font-family:var(--display);font-weight:600;color:var(--forest);font-size:1.12rem;line-height:1.35}
.qrow .opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.qrow .opts button{font-family:var(--display);font-weight:600;font-size:.88rem;border-radius:14px;padding:11px 10px;border:2px solid var(--line);background:var(--cream);color:var(--forest);cursor:pointer;display:grid;gap:2px;text-align:left;transition:background .15s,border-color .15s}
.qrow .opts button small{font-family:var(--body);font-weight:500;font-size:.74rem;color:var(--stone)}
.qrow .opts button:hover{border-color:var(--sage-deep)}
.qrow .opts button[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.qrow .opts button[aria-pressed="true"] small{color:var(--mist)}
.qrow.need{border-color:var(--honey);box-shadow:0 0 0 4px rgba(243,201,121,.45)}
.qrow.need .qk::after{content:"Answer this one";margin-left:8px;background:var(--honey);color:var(--forest);padding:2px 8px;border-radius:999px;letter-spacing:.06em}
html[lang="cy"] .qrow.need .qk::after{content:"Atebwch hwn"}
.qrow.done{border-color:var(--sage)}
.qrow.opt{border-style:dashed}
.qrow.opt.done{border-style:solid}
.qrow .qo{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:var(--linen);color:var(--stone);font-family:var(--body);font-weight:600;font-size:.74rem;line-height:1.5;vertical-align:middle}
.qrow .qh{color:var(--stone);font-size:.88rem;line-height:1.45}
@media (max-width:620px){.qrow .opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ck-side{position:sticky;top:100px;background:var(--white);border:1.5px solid var(--line);border-radius:22px;padding:22px;display:grid;gap:16px}
.ck-side h3{font-size:1.05rem}
.ck-icons{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.ck-icons button{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 12px 6px 8px;border:0;border-radius:12px;background:var(--linen);font-family:var(--display);font-weight:600;font-size:.84rem;color:var(--stone);text-align:left;cursor:pointer;transition:background .2s}
.ck-icons button:hover{background:var(--honey-soft)}
.ck-icons button img{width:28px;height:28px;object-fit:contain}
.ck-icons button .dot{width:22px;height:22px;margin-inline:3px;border-radius:50%;border:2.5px dotted var(--sage-deep)}
.ck-icons button .ct{font-variant-numeric:tabular-nums;font-size:.78rem}
.ck-icons button.on{background:var(--sage-pastel);color:var(--forest)}
@media (max-width:980px){.ck-icons{display:none}}
.qblock{display:grid;gap:12px}
.qblock + .qblock{margin-top:26px}
.qhead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:4px 2px}
.qhead img{width:64px;height:64px;object-fit:contain;background:var(--sky-soft);border-radius:18px;padding:7px}
.qhead .k{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-ink)}
.qhead h3{font-size:1.5rem;font-weight:800;margin-top:2px}
.qhead p{color:var(--stone);font-size:.95rem}
.qrow .opts.pills{display:flex;flex-wrap:wrap}
.qrow .opts.pills button{display:inline-block;padding:10px 15px;border-radius:999px}
.ctxline{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.ctxline > span{background:rgba(254,248,238,.12);color:var(--cream);font-size:.8rem;font-weight:700;padding:5px 12px;border-radius:999px}
.amap{gap:16px}
.arow{display:grid;grid-template-columns:36px minmax(0,1fr) 34px;gap:12px;align-items:start}
.arow img{width:36px;height:36px;object-fit:contain}
.arow .ah{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.arow b{font-family:var(--display);font-size:.95rem;color:var(--forest)}
.alv{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.arow.l4 .alv,.alv.l4{color:var(--sage-ink)}
.abar{height:10px;border-radius:10px;background:var(--linen);overflow:hidden;margin-top:6px}
.abar i{display:block;height:100%;border-radius:10px;background:var(--sage-deep)}
.arow.l1 .abar i,.arow.l2 .abar i{background:var(--honey-dot)}
.agap{margin-top:7px;font-size:.86rem;line-height:1.45;color:var(--stone)}
.agap .agk{font-weight:700;color:var(--forest)}
.agap q{color:var(--ink)}
.agans{display:table;margin-top:6px;background:var(--honey-soft);color:var(--forest);border-radius:10px;padding:3px 10px;font-size:.8rem;line-height:1.35}
.agans .ga{font-weight:700;margin-left:.3em}
.arow.l3 .agans{background:var(--linen)}
.apct{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--forest);font-variant-numeric:tabular-nums;text-align:right}
.gnote{font-size:.9rem;color:var(--forest);background:rgba(255,255,255,.55);border-radius:12px;padding:10px 12px}
.prio{display:grid;gap:14px}
.prio > h3{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800}
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:980px){.pcards{grid-template-columns:minmax(0,1fr)}}
.pc{background:var(--white);border:1.5px solid var(--line);border-radius:24px;padding:22px;display:grid;gap:14px;align-content:start}
.pch{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px;align-items:center}
.pch .pn{width:30px;height:30px;border-radius:50%;background:var(--forest);color:var(--cream);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.9rem}
.pch img{width:44px;height:44px;object-fit:contain}
.pch b{display:block;font-family:var(--display);font-size:1.12rem;color:var(--forest);line-height:1.2}
.pcb{display:grid;gap:6px}
.pcb h5{margin:10px 0 0;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-ink)}
.pcb h5:first-child{margin-top:0}
.pcb p{font-size:.94rem;color:var(--ink)}
.pcb .try{background:var(--honey-soft);border-radius:14px;padding:10px 12px}
.pgs{display:grid;gap:8px}
.pg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--linen);border-radius:14px;padding:10px 10px 10px 12px}
.pg b{display:block;font-family:var(--display);font-size:.9rem;color:var(--forest);line-height:1.25}
.pg small{display:block;font-size:.78rem;color:var(--stone);line-height:1.3;margin-top:2px}
.pg .add{padding:7px 11px;font-size:.78rem}
@media (max-width:420px){.pg{grid-template-columns:minmax(0,1fr)}.pg .add{justify-self:start}}
.res-grid.even{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.res-grid.even{grid-template-columns:minmax(0,1fr)}}
.plan{list-style:none;margin:0 0 0 9px;padding:0;display:grid;border-left:3px dotted var(--sage)}
.plan li{position:relative;padding:0 0 18px 24px;display:grid;gap:3px}
.plan li:last-child{padding-bottom:2px}
.plan li::before{content:"";position:absolute;left:-11px;top:2px;width:19px;height:19px;border-radius:50%;background:var(--cream);border:3px solid var(--forest);box-sizing:border-box}
.plan .w{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-ink)}
.plan p{color:var(--ink);font-size:.95rem}
.asks ol{margin:0;padding-left:22px;display:grid;gap:12px}
.asks li{font-family:var(--display);font-weight:600;color:var(--forest);line-height:1.4}
.asks li::marker{color:var(--sage-deep);font-weight:800}
.insp{gap:16px}
.insp .il{color:var(--stone);font-size:.95rem;max-width:70ch}
.irows{list-style:none;margin:0;padding:0;display:grid}
.irow{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:8px 22px;padding:16px 0;border-top:1.5px solid var(--line);align-items:start}
.irow:first-child{border-top:0;padding-top:4px}
.irow .ia{display:flex;align-items:center;gap:10px;min-width:0}
.irow .ia img{width:36px;height:36px;object-fit:contain;flex:none}
.irow .ia b{font-family:var(--display);font-size:.98rem;color:var(--forest);line-height:1.25}
.irow .ib{display:grid;gap:8px;min-width:0}
.ichs{display:flex;flex-wrap:wrap;gap:6px}
.ich{background:var(--sage);color:var(--forest);font-family:var(--display);font-weight:600;font-size:.82rem;line-height:1.3;padding:5px 12px;border-radius:999px}
.irow .is{font-size:.92rem;line-height:1.5;color:var(--ink)}
.irow .is .ik{font-weight:700;color:var(--forest)}
.insp .inote{font-size:.82rem;color:var(--stone)}
@media (max-width:700px){.irow{grid-template-columns:minmax(0,1fr)}}
.ck-bar{height:10px;background:var(--linen);border-radius:10px;overflow:hidden}
.ck-bar i{display:block;height:100%;width:0;background:var(--forest);border-radius:10px;transition:width .4s}
.ck-side .prog{font-family:var(--display);font-weight:600;color:var(--stone);font-size:.92rem}
.ck-side .prog b{color:var(--forest)}
.ck-side .btn{justify-content:center;white-space:normal;text-align:center}
.ck-side{min-width:0}
.ck-side small{color:var(--stone);font-size:.8rem;text-align:center}
.result{display:none;margin-top:34px;gap:20px}
.result.show{display:grid}
.res-top{background:var(--forest);color:var(--cream);border-radius:28px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,44px);align-items:center}
.score{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;text-align:center;background:conic-gradient(var(--honey) calc(var(--p)*1%),rgba(254,248,238,.12) 0)}
.score div{width:118px;height:118px;border-radius:50%;background:var(--forest);display:grid;place-content:center}
.score b{font-family:var(--display);font-size:2.6rem;font-weight:800;line-height:1;color:var(--cream);font-variant-numeric:tabular-nums}
.score small{font-size:.72rem;color:var(--mist);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.res-top h3{color:var(--cream);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800}
.res-top p{color:var(--mist);margin-top:10px;max-width:58ch}
.res-top .band{display:inline-block;background:var(--honey);color:var(--forest);font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:12px}
@media (max-width:640px){.res-top{grid-template-columns:1fr;justify-items:start}}
.res-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
@media (max-width:900px){.res-grid{grid-template-columns:1fr}}
.res-card{background:var(--white);border:1.5px solid var(--line);border-radius:24px;padding:24px;display:grid;gap:14px;align-content:start}
.res-card h4{font-size:1.1rem}
.areas{display:grid;gap:12px}
.area{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.area b{font-family:var(--display);font-size:.92rem;color:var(--forest);display:block;margin-bottom:5px}
.area .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.area .seg i{height:9px;border-radius:9px;background:var(--linen)}
.area .seg i.f{background:var(--sage-deep)}
.area .lvl{font-size:.78rem;font-weight:800;color:var(--stone);min-width:88px;text-align:right}
.area .lvl.s{color:var(--sage-ink)}
.focus{display:grid;gap:10px}
.focus div{background:var(--linen);border-radius:16px;padding:14px 16px;display:grid;gap:3px}
.focus b{font-family:var(--display);color:var(--forest)}
.focus span{font-size:.92rem;color:var(--stone)}
.strong{display:flex;flex-wrap:wrap;gap:8px}
.strong span{background:var(--sage);color:var(--forest);font-family:var(--display);font-weight:600;font-size:.85rem;padding:6px 12px;border-radius:999px}
.rec{background:var(--honey);border-radius:24px;padding:24px;display:grid;gap:12px}
.rec .k{font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--forest)}
.rec h4{font-size:1.8rem;font-weight:800}
.rec ul{margin:0;padding-left:18px;display:grid;gap:4px;color:var(--ink)}
.rec .ctas{gap:10px}
.res-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:4px}
.res-foot p{color:var(--stone);font-size:.9rem}

/* conference */
.conf{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,50px);align-items:center}
.conf-q{display:grid;gap:14px}
.conf-q .big-q{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.08;color:var(--forest);letter-spacing:-.02em}
.conf-q .big-q span{color:var(--sage-deep)}
.conf-q p:last-child{color:var(--stone)}
.speakers-all,.mer-film{margin-top:clamp(50px,7vw,90px)}
.conf-road{margin-top:clamp(20px,3vw,36px)}
.spgroup{display:grid;gap:18px;margin-bottom:44px}
.spgroup > .eyebrow{justify-self:center}
.spgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 22px}
.sp{flex:0 0 calc((100% - 110px)/6);min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
@media (max-width:1179px){.sp{flex-basis:calc((100% - 66px)/4)}}
.sp-ph{width:156px;height:156px;border-radius:50%;overflow:hidden;display:grid;place-items:end center;margin-bottom:10px}
.sp-ph img{width:100%;height:100%;object-fit:cover;object-position:top center}
.sp b{font-family:var(--display);color:var(--forest);font-size:1.02rem;line-height:1.2}
.sp small{color:var(--stone);font-size:.82rem;line-height:1.35;max-width:22ch;margin-bottom:6px}
.sp-li{margin-top:auto;display:inline-block;padding:5px 13px;border:1.5px solid var(--line);border-radius:999px;font-family:var(--display);font-weight:600;font-size:.75rem;color:var(--forest);text-decoration:none;transition:background .2s,border-color .2s}
.sp-li:hover,.sp-li:focus-visible{background:var(--sage-pastel);border-color:var(--sage)}
@media (max-width:899px){.sp-ph{width:140px;height:140px}}
@media (max-width:719px){.spgrid{gap:28px 12px}.sp{flex-basis:calc((100% - 12px)/2)}}
.confcard .mer-mark{line-height:0}
.confcard .mer-mark img{width:min(100%,330px);height:auto}
.mer-next{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);background:var(--white);border:1.5px solid var(--line);border-radius:28px;overflow:hidden;margin-bottom:14px}
.mn-main{padding:clamp(24px,4vw,44px);display:grid;gap:14px;align-content:start;justify-items:start}
.mn-logo{width:min(100%,300px);height:auto;margin:4px 0 2px}
.mn-main h3{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800}
.mn-main > p:not(.eyebrow){color:var(--stone)}
.mn-main .ctas{margin-top:6px}
.mn-with{background:var(--honey-soft);padding:clamp(24px,4vw,44px);display:grid;gap:16px;align-content:center}
.mn-logos{display:grid;gap:12px}
.mn-logos a{background:var(--white);border-radius:18px;display:grid;place-items:center;padding:16px 20px;min-height:100px;transition:transform .2s,box-shadow .2s}
.mn-logos a:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(44,68,53,.5)}
.mn-logos a:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.mn-logos img{width:auto;max-width:100%;max-height:62px}
.mn-logos .rcdi img{max-height:84px}
@media (max-width:860px){.mer-next{grid-template-columns:minmax(0,1fr)}.mn-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.mn-logos a{min-height:84px;padding:12px}.mn-logos img{max-height:46px}.mn-logos .rcdi img{max-height:62px}}
.confcard{background:var(--forest);color:var(--cream);border-radius:28px;padding:clamp(24px,4vw,40px);display:grid;gap:16px}
.confcard h3{color:var(--cream);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800}
.confcard .when{display:flex;flex-wrap:wrap;gap:8px}
.confcard .when span{background:rgba(254,248,238,.1);border-radius:999px;padding:6px 14px;font-weight:700;font-size:.88rem;color:var(--honey)}
.confcard p{color:var(--mist)}
.themes{display:flex;gap:8px;flex-wrap:wrap}
.themes span{background:var(--sage);color:var(--forest);font-family:var(--display);font-weight:700;border-radius:999px;padding:7px 16px}
.speakers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spk{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:12px}
.spk i{width:56px;height:56px;border-radius:50%;border:2px dashed var(--sage-deep);position:relative;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-weight:800;color:var(--forest);font-size:.95rem}
.spk b{font-family:var(--display);color:var(--forest);font-size:.95rem;display:block;line-height:1.2}
.spk small{color:var(--stone);font-size:.8rem;line-height:1.3;display:block}
@media (max-width:900px){.conf{grid-template-columns:1fr}}
@media (max-width:480px){.speakers{grid-template-columns:1fr}}
.cal{display:grid;gap:12px}
.calrow{display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:center;background:var(--white);border:1.5px solid var(--line);border-radius:18px;padding:18px 22px}
.calrow .d{font-family:var(--display);font-weight:800;color:var(--sage-ink);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}
.calrow h3{font-size:1.15rem}
.calrow p{color:var(--stone);font-size:.93rem}
@media (max-width:640px){.calrow{grid-template-columns:1fr}.calrow .btn{justify-self:start}}

.lightbox{position:fixed;inset:0;background:rgba(38,53,43,.85);z-index:90;display:grid;place-items:center;padding:20px;cursor:zoom-out}
.lightbox img{max-height:90vh;width:auto;max-width:100%;border-radius:14px}
.lightbox[hidden]{display:none}

/* big challenge */
.bigc{background:var(--honey);border-radius:30px;padding:clamp(26px,4.5vw,56px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,50px);align-items:center;position:relative;overflow:hidden}
.bigc .soon{display:inline-flex;align-items:center;gap:8px;background:var(--forest);color:var(--honey);font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.bigc .soon i{width:8px;height:8px;border-radius:50%;background:var(--honey);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.bigc h2{font-size:clamp(2.2rem,5vw,4rem);margin-top:16px;line-height:1}
.bigc p{color:var(--forest);margin-top:14px;max-width:52ch;font-size:1.08rem}
.bigc .tiers{display:grid;gap:10px}
.bigc .tier{background:rgba(254,248,238,.75);border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}
.bigc .tier img{width:44px;height:44px;object-fit:contain}
.bigc .tier b{font-family:var(--display);color:var(--forest);display:block}
.bigc .tier span{font-size:.88rem;color:var(--ink)}
@media (max-width:860px){.bigc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.bigc .btn{font-size:.94rem;padding:13px 20px}}
/* SDG alignment */
.sdg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4.5vw,60px);align-items:center;margin-bottom:clamp(28px,4vw,44px)}
.sdg-logo{width:clamp(160px,19vw,230px);height:auto}
.sdg-tx{display:grid;gap:16px;justify-items:start}
.threads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.thread{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:26px;display:grid;gap:10px;align-content:start}
.thread .k{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink)}
.thread h3{font-size:1.3rem}
.thread p{color:var(--stone);font-size:.96rem}
.goals{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.goals span{display:inline-flex;align-items:center;gap:8px;background:var(--cream);border:1.5px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;font-size:.84rem;font-weight:700;color:var(--forest);line-height:1.25}
.goals b{min-width:28px;height:28px;padding:0 7px;border-radius:999px;background:var(--forest);color:var(--cream);display:grid;place-items:center;font-family:var(--display);font-size:.78rem;flex:none}
@media (max-width:900px){.threads{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.sdg{grid-template-columns:minmax(0,1fr)}.sdg-logo{width:150px}}
.sdg-strip{margin-top:16px;display:grid;grid-template-columns:76px minmax(0,1fr);gap:18px;align-items:center;background:var(--white);border:1.5px solid var(--line);border-radius:22px;padding:14px 22px 14px 14px}
.sdg-strip img{width:76px;height:auto}
.sdg-strip p{color:var(--stone);font-size:.96rem}
.sdg-strip p b{color:var(--forest);font-family:var(--display);font-weight:700}
@media (max-width:520px){.sdg-strip{grid-template-columns:56px minmax(0,1fr);gap:14px}.sdg-strip img{width:56px}}
/* Impact: the challenge cards (flip cards in a hand) and the four-step climb for a school */
.cband :focus-visible{outline-color:var(--honey)}
.cband .head{margin-bottom:clamp(6px,1.4vw,18px)}
.hand{display:grid;justify-items:center}
.deck{list-style:none;margin:0;padding:clamp(40px,5vw,64px) 0 clamp(34px,4.4vw,56px);width:100%;display:flex;justify-content:center;align-items:flex-end}
.deck li{--w:clamp(150px,19.5vw,248px);--rot:0deg;--dy:0px;--z:1;--k:0;--n:0;flex:none;width:var(--w);aspect-ratio:560/778;margin-inline:calc(var(--w)*-.1);position:relative;z-index:var(--z);perspective:1400px;transform:translateY(var(--dy)) rotate(var(--rot));transform-origin:50% 135%;transition:transform .55s var(--spring)}
.deck li:nth-child(1){--rot:-12deg;--dy:30px;--k:2}
.deck li:nth-child(2){--rot:-6deg;--dy:10px;--z:3;--k:1;--n:1}
.deck li:nth-child(3){--z:5;--n:2}
.deck li:nth-child(4){--rot:6deg;--dy:10px;--z:3;--k:-1;--n:3}
.deck li:nth-child(5){--rot:12deg;--dy:30px;--k:-2;--n:4}
.deck li.on{--z:9;transform:translateY(-24px) rotate(0deg) scale(1.1)}
@media (hover:hover) and (pointer:fine){.deck li:not(.on):hover{--z:8;transform:translateY(calc(var(--dy) - 16px)) rotate(calc(var(--rot)*.45))}}
.fl{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--spring)}
.deck li.on .fl{transform:rotateY(180deg)}
.ff,.fb{position:absolute;inset:0;border-radius:calc(var(--w)*.06);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 38px -24px rgba(0,0,0,.7)}
.ff{transform:translateZ(0)}
.fb{transform:rotateY(180deg);background:var(--cc);padding:calc(var(--w)*.042)}
.cd{display:block;position:relative;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;line-height:0;overflow:hidden}
.cd img{width:100%;height:100%;object-fit:cover}
.cd::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 64%);transform:translateX(-130%);transition:transform .9s ease}
@media (hover:hover){.deck li:not(.on):hover .cd::after{transform:translateX(130%)}}
.cband .cd:focus-visible{outline:3px solid #fff;outline-offset:-7px}
.cb{position:relative;display:flex;flex-direction:column;gap:calc(var(--w)*.032);width:100%;height:100%;margin:0;padding:calc(var(--w)*.055) calc(var(--w)*.06) calc(var(--w)*.05);border:0;border-radius:calc(var(--w)*.04);background:var(--cream);color:var(--forest);font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.cband .cb:focus-visible{outline:3px solid var(--forest);outline-offset:-7px}
.bk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.bk-name{font-family:var(--display);font-weight:800;font-size:max(14px,calc(var(--w)*.066));line-height:1.12;letter-spacing:-.01em}
.bk-turn{flex:none;display:grid;place-items:center;width:max(22px,calc(var(--w)*.1));aspect-ratio:1;border-radius:50%;background:var(--linen);color:var(--forest)}
.bk-turn svg{width:62%;height:62%}
.bk-verb{align-self:flex-start;background:var(--cc);color:var(--ct);font-family:var(--display);font-weight:700;font-size:max(12.5px,calc(var(--w)*.054));line-height:1.3;padding:.16em .85em;border-radius:999px}
.bk-t{position:relative;z-index:1;flex:1 1 auto;min-height:0;font-family:var(--display);font-weight:600;font-size:max(13px,calc(var(--w)*.056));line-height:1.36;color:var(--forest)}
.bk-ways{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:5px}
.bk-ways span{background:var(--linen);color:var(--forest);font-weight:700;font-size:max(11.5px,calc(var(--w)*.047));line-height:1.4;padding:.1em .7em;border-radius:999px}
.bk-ic{position:absolute;right:-5%;bottom:3%;width:50%;height:auto;opacity:.12;pointer-events:none}
@keyframes deal{from{opacity:0;transform:translateX(calc(var(--k)*var(--w)*.78)) translateY(46px) rotate(0deg) scale(.9)}}
@keyframes rise{from{opacity:0;transform:translateY(34px) rotate(var(--rot)) scale(.94)}}
.hand.pre .deck li{opacity:0}
.hand.in .deck li{animation:deal .95s var(--spring) backwards;animation-delay:calc(var(--n)*90ms)}
.deck-hint{margin:0;display:inline-flex;align-items:center;gap:9px;background:var(--honey);color:var(--forest);font-weight:700;font-size:.92rem;line-height:1.25;padding:8px 16px 8px 13px;border-radius:12px;transform:rotate(-1.6deg);text-align:left}
.deck-hint svg{flex:none;width:18px;height:18px}
.deck-hint .hm{display:none}
.climb-h{margin:clamp(40px,5.4vw,76px) auto clamp(24px,3.4vw,36px);display:grid;gap:8px;justify-items:center;text-align:center;max-width:60ch}
.climb-h h3{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:800}
.climb-h p{color:var(--mist)}
.climb{--rise:clamp(14px,2.6vw,34px);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,16px);align-items:stretch}
.stp{--ic:54px;--bg:rgba(171,192,133,.10);--bd:rgba(171,192,133,.32);--fg:var(--cream);--sub:var(--mist);position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2vw,24px);border-radius:26px 26px 18px 18px;background:var(--bg);border:1.5px solid var(--bd);color:var(--fg)}
.stp:nth-child(1){margin-top:calc(var(--rise)*3)}
.stp:nth-child(2){margin-top:calc(var(--rise)*2);--ic:64px;--bg:rgba(171,192,133,.17);--bd:rgba(171,192,133,.44)}
.stp:nth-child(3){margin-top:var(--rise);--ic:76px;--bg:rgba(171,192,133,.26);--bd:rgba(171,192,133,.58)}
.stp:nth-child(4){--ic:90px;--bg:var(--honey);--bd:var(--honey);--fg:var(--forest);--sub:var(--ink)}
.stp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.stp .ic{display:grid;place-items:center;flex:none;width:calc(var(--ic) + 24px);aspect-ratio:1;border-radius:50%;background:var(--cream);box-shadow:0 12px 20px -12px rgba(0,0,0,.55)}
.stp .ic img{width:auto;height:var(--ic);max-width:76%;object-fit:contain}
.stp .k{background:var(--honey);color:var(--forest);font-family:var(--display);font-weight:700;font-size:.82rem;line-height:1.2;padding:5px 12px;border-radius:9px;transform:rotate(-3deg)}
.stp:nth-child(2) .k{transform:rotate(2deg)}
.stp:nth-child(3) .k{transform:rotate(-2deg)}
.stp:nth-child(4) .k{background:var(--forest);color:var(--cream);transform:rotate(2.5deg)}
.stp h4{margin:6px 0 0;font-family:var(--display);font-size:clamp(1.25rem,1.1vw + 1rem,1.5rem);font-weight:800;line-height:1.1;letter-spacing:-.015em;color:var(--fg)}
.stp p{margin:0;color:var(--sub);font-size:.96rem}
.stp .at{margin-top:auto;padding-top:12px;border-top:2px dotted color-mix(in srgb,var(--fg) 38%,transparent);display:grid;gap:2px}
.stp .at b{font-family:var(--display);font-weight:700;font-size:.84rem;color:var(--honey)}
.stp:nth-child(4) .at b{color:var(--forest)}
.stp .at span{color:var(--fg);font-weight:600;font-size:.96rem}
@keyframes stepIn{from{opacity:0;transform:translateY(34px)}}
.climb.pre .stp{opacity:0}
.climb.in .stp{animation:stepIn .7s var(--spring) backwards}
.climb.in .stp:nth-child(2){animation-delay:.12s}.climb.in .stp:nth-child(3){animation-delay:.24s}.climb.in .stp:nth-child(4){animation-delay:.36s}
@media (max-width:980px){.climb{grid-template-columns:repeat(2,minmax(0,1fr))}.climb .stp:nth-child(n){margin-top:0}}
.sample{margin-top:clamp(40px,5vw,68px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,3vw,34px);background:var(--cream);color:var(--ink);border-radius:30px;padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,38px) clamp(18px,2.4vw,26px) clamp(24px,3.4vw,44px);box-shadow:0 26px 44px -28px rgba(0,0,0,.7)}
.sample-pg{display:block;padding:0;border:0;background:none;cursor:zoom-in;width:clamp(78px,8.6vw,104px);aspect-ratio:300/424;border-radius:7px;overflow:hidden;line-height:0;box-shadow:0 16px 26px -14px rgba(0,0,0,.55),0 0 0 1px var(--line);transform:rotate(-4deg);transition:transform .35s var(--spring)}
.sample-pg:hover{transform:rotate(-1deg) scale(1.05)}
.sample-pg img{width:100%;height:100%;object-fit:cover}
.sample-t{display:grid;gap:6px;min-width:0}
.sample-t h3,.cband .sample-t h3{font-size:clamp(1.3rem,1.2vw + 1rem,1.7rem);font-weight:800;color:var(--forest)}
.sample-t p{color:var(--stone);max-width:52ch}
.sample-t .sample-n{font-size:.88rem}
html:not([lang="cy"]) .sample-n{display:none}
.sample .btn{white-space:nowrap}
.sample.pre{opacity:0}
.sample.in{animation:stepIn .7s var(--spring) backwards}
@media (max-width:1080px){
 .deck{justify-self:stretch;width:auto;margin-inline:-20px;padding:52px 20px 44px;justify-content:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .deck::-webkit-scrollbar{display:none}
 .deck li{--w:min(62vw,250px);margin-inline:0;scroll-snap-align:center;transform-origin:50% 100%}
 .deck li:nth-child(1){--rot:-2.2deg;--dy:0px}.deck li:nth-child(2){--rot:1.6deg;--dy:0px}.deck li:nth-child(3){--rot:-1deg;--dy:0px}.deck li:nth-child(4){--rot:2deg;--dy:0px}.deck li:nth-child(5){--rot:-1.8deg;--dy:0px}
 .deck li.on{transform:translateY(-8px) rotate(0deg) scale(1.04)}
 .hand.in .deck li{animation-name:rise}
 .deck-hint .hd{display:none}.deck-hint .hm{display:inline}
}
@media (max-width:760px){.sample{grid-template-columns:auto minmax(0,1fr)}.sample .btn{grid-column:1/-1;justify-self:start}}
@media (max-width:560px){.climb{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.sample{grid-template-columns:minmax(0,1fr);justify-items:start}.sample-pg{width:92px}}
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.proj{background:var(--white);border:1.5px solid var(--line);border-radius:26px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.proj .ph{aspect-ratio:16/8;overflow:hidden;position:relative}
.proj .ph img{width:100%;height:100%;object-fit:cover}
.proj .ph .tag{position:absolute;left:14px;top:14px;background:var(--cream)}
.proj .tx{padding:24px;display:grid;gap:10px;align-content:start}
.proj h3{font-size:1.4rem;font-weight:800}
.proj p{color:var(--stone);font-size:.96rem}
.proj .sdg{display:flex;gap:6px;flex-wrap:wrap}
.proj .sdg span{background:var(--linen);border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:700;color:var(--forest)}
@media (max-width:820px){.projects{grid-template-columns:1fr}}

/* partners */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.way{border-radius:26px;padding:30px 26px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:14px;border:1.5px solid var(--line);background:var(--white)}
.way:nth-child(2){background:var(--forest);border-color:var(--forest)}
.way:nth-child(2) h3,.way:nth-child(2) .k{color:var(--cream)}
.way:nth-child(2) p,.way:nth-child(2) li{color:var(--mist)}
.way .k{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink)}
.way h3{font-size:2rem;font-weight:800}
.way ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;align-content:start}
.way li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:.95rem}
.way li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sage);margin-top:8px}
.way .btn{justify-self:start;display:inline-block;max-width:100%;white-space:normal;text-align:left;line-height:1.3;text-wrap:balance}
.way .btn .arr{display:inline-block;margin-left:8px}
@media (max-width:1100px){.ways{gap:14px}.way{padding:26px 18px}.way h3{font-size:clamp(1.6rem,2.6vw,2rem)}.way .btn{padding:11px 16px;font-size:.9rem}}
@media (min-width:901px) and (max-width:1000px){.way{padding:26px 16px}.way .btn{padding:11px 13px;font-size:.86rem}}
@media (max-width:900px){.ways{grid-template-columns:1fr}}
.who4{display:flex;flex-wrap:wrap;gap:10px}
.who4 span{display:flex;align-items:center;gap:8px;background:var(--white);border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;font-family:var(--display);font-weight:600;color:var(--forest)}
.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.plist .pcard-cta:nth-child(odd){grid-column:1/-1}
.pcard{background:var(--white);border:1.5px solid var(--line);border-radius:22px;padding:22px;display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:start}
@media (max-width:480px){.pcard{grid-template-columns:1fr;gap:12px}}
.pcard .lg{width:104px;height:68px;border-radius:16px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--forest)}
.pcard h3{font-size:1.15rem}
.pcard .rl{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--sage-ink);margin:2px 0 6px;display:block}
.pcard p{color:var(--stone);font-size:.93rem}
.pcard .how{display:inline-block;margin-top:8px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--linen);color:var(--forest)}
@media (max-width:760px){.plist{grid-template-columns:1fr}}
.pstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items:center}

.pstrip small{flex:0 0 100%;text-align:center;margin-bottom:4px;font-family:var(--display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);font-size:.74rem}

/* platform: shared pieces */
.mock-note{font-size:.8rem;color:var(--stone);font-weight:600}
.loop{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.lp{background:var(--white);border:1.5px solid var(--line);border-radius:22px;padding:22px 18px;display:grid;gap:8px;align-content:start;position:relative}
.lp .n{font-family:var(--display);font-weight:800;color:var(--sage-ink);font-size:1.7rem;line-height:1}
.lp h3{font-size:1.2rem}
.lp p{color:var(--stone);font-size:.92rem}
@media (max-width:980px){.loop{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.loop{grid-template-columns:1fr}}
.tourtabs{display:grid;gap:10px}
.tourtabs button{text-align:left;background:rgba(254,248,238,.05);border:1.5px solid rgba(171,192,133,.3);border-radius:18px;padding:16px 20px;cursor:pointer;display:grid;gap:4px;color:var(--mist);font:inherit}
.tourtabs button b{font-family:var(--display);color:var(--cream);font-size:1.1rem}
.tourtabs button span{font-size:.92rem}
.tourtabs button[aria-selected="true"]{background:var(--cream);border-color:var(--cream);color:var(--stone)}
.tourtabs button[aria-selected="true"] b{color:var(--forest)}
.hosted{margin-top:22px;background:var(--forest);border-radius:22px;padding:20px 24px;display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;color:var(--cream)}
.hosted img{width:56px}
.hosted b{font-family:var(--display);display:block;font-size:1.1rem}
.hosted div span{color:var(--mist);font-size:.94rem}
@media (max-width:760px){.hosted{grid-template-columns:1fr}}

.gal-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px}
.phgal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.phgal figure{margin:0;position:relative;border-radius:18px;overflow:hidden;background:var(--linen);aspect-ratio:4/3}
.phgal figure img{width:100%;height:100%;object-fit:cover}
.phgal figcaption,.wsrow figcaption{position:absolute;left:10px;right:10px;bottom:10px;width:fit-content;max-width:calc(100% - 20px);background:rgba(254,248,238,.94);color:var(--forest);font-family:var(--display);font-weight:600;font-size:.76rem;line-height:1.3;padding:5px 10px;border-radius:10px}
@media (max-width:640px){.phgal{grid-template-columns:1fr}}

.wsrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:980px;margin:12px auto 0}
.wsrow figure{margin:0;position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:var(--linen)}
.wsrow img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.wsrow{grid-template-columns:1fr 1fr;gap:10px}}
.video{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/7;max-width:980px;margin:0 auto;background:var(--sage)}
@media (max-width:560px){.video{aspect-ratio:4/3}}
.video img{width:100%;height:100%;object-fit:cover;object-position:55% 30%}
.video .cap-l{position:absolute;bottom:16px;font-family:var(--display);font-weight:600;font-size:.82rem;border-radius:999px;padding:7px 14px}
.video .cap-l{left:16px;background:rgba(254,248,238,.94);color:var(--forest)}
@media (max-width:560px){.video .cap-l{font-size:.72rem;padding:6px 11px;left:12px;bottom:12px}}
.who-row{display:flex;align-items:center;gap:12px}
.face{width:46px;height:46px;border-radius:50%;flex:none;border:2px dashed var(--sage-deep);background:var(--linen);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--forest)}
.face.logo{border:1.5px solid var(--line);background:var(--white);padding:5px}
.face.logo img{width:100%;height:100%;object-fit:contain}
.face.photo{border:0;background:var(--sage);overflow:hidden;place-items:end center}
.face.photo img{width:100%;height:100%;object-fit:cover;object-position:top}

/* misc */
.on-sage{color:var(--cream)}

/* real logos */
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px clamp(22px,4vw,46px)}
.logos img{height:34px;width:auto;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.logos img:hover{filter:none;opacity:1}
.logo-real{display:inline-grid;place-items:center;width:252px;max-width:100%;height:78px;padding:12px 24px;border:1.5px solid var(--line);border-radius:14px;background:var(--white)}
.logo-real img{max-height:46px;width:auto;max-width:100%;object-fit:contain}
@media (max-width:600px){.logo-real{width:calc(50% - 6px);height:66px;padding:10px 14px}.logo-real img{max-height:38px}}
.pcard .lg.logo-img{background:var(--white);border:1.5px solid var(--line);padding:8px 10px}
.pcard .lg.logo-img{overflow:hidden}
.pcard .lg.logo-img img{max-width:84px;max-height:48px;width:auto;height:auto;object-fit:contain}

/* logo wall + person photos + products */
.wall{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.wall span{flex:0 0 calc((100% - 48px) / 5)}
@media (max-width:900px){.wall span{flex-basis:calc((100% - 36px) / 4)}}
@media (max-width:640px){.wall span{flex-basis:calc((100% - 12px) / 2)}}
.wall span{background:var(--white);border:1.5px solid var(--line);border-radius:16px;height:96px;display:grid;place-items:center;padding:12px 16px}
.wall img{max-height:52px;max-width:100%;width:auto;object-fit:contain}
.toolkit{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tk{background:var(--white);border:1.5px solid var(--line);border-radius:24px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.tk .im{background:var(--linen);height:240px;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}
.tk .im img{max-height:200px;max-width:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(44,68,53,.2))}
.tk .tx{padding:20px 22px;display:grid;gap:6px;align-content:start}
.tk h3{font-size:1.15rem}
.tk p{color:var(--stone);font-size:.93rem}
@media (max-width:860px){.toolkit{grid-template-columns:1fr}}

/* utilities */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(30px,5vw,64px);align-items:start}
.split.mid{align-items:center}
.head.mb-h{margin-bottom:28px}
.mt-1{margin-top:12px}.mt-2{margin-top:18px}.mt-3{margin-top:26px}
.bg-cloud{background:var(--cloud)}.bg-sage{background:var(--sage)}.bg-honey{background:var(--honey)}.bg-linen{background:var(--linen)}
.forest-sec{background:var(--forest);position:relative;overflow:hidden}
.sel{user-select:all}
.btn.center{justify-content:center}
.self-start{justify-self:start}
.h-md{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.pt-0{padding-top:0}.pb-0{padding-bottom:0}

/* footer */
footer{background:var(--ink);color:var(--mist);padding-block:70px 40px}
footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:34px}
footer h2{color:var(--cream);font-size:.95rem;margin-bottom:14px;letter-spacing:-.01em}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.95rem}
footer a{text-decoration:none}
footer a:hover{color:var(--honey)}
footer .wm{display:inline-block}
footer .wm img{display:block;height:48px;width:auto}
footer .big{font-family:var(--display);font-weight:800;color:var(--cream);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;margin-top:20px;letter-spacing:-.02em}
footer .big span{color:var(--sage)}
footer .legal{margin-top:50px;padding-top:24px;border-top:1px solid rgba(207,217,195,.18);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:#98A68F}
footer .legal .nw{white-space:nowrap}
@media (max-width:900px){footer .top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .top{grid-template-columns:1fr}}

/* shortlist drawer */
.scrim{position:fixed;inset:0;background:rgba(38,53,43,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--cream);z-index:70;transform:translateX(100%);transition:transform .25s ease;display:grid;grid-template-rows:auto 1fr auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1.5px solid var(--line)}
.drawer .dh h3{font-size:1.35rem}
.x{background:var(--linen);border:0;width:40px;height:40px;border-radius:50%;font-size:1.3rem;cursor:pointer;color:var(--forest)}
.dbody{overflow:auto;padding:20px 24px;display:grid;gap:10px;align-content:start}
.line{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:12px}
.line b{font-family:var(--display);font-size:.94rem;color:var(--forest);display:block}
.line small{color:var(--stone)}
.line button{background:none;border:0;color:var(--stone);cursor:pointer;font-size:.85rem;text-decoration:underline}
.empty{text-align:center;color:var(--stone);padding:30px 10px;display:grid;gap:14px;justify-items:center}
.empty img{width:110px}
.dfoot{padding:20px 24px;border-top:1.5px solid var(--line);display:grid;gap:12px;background:var(--linen)}
.dfoot p{font-size:.9rem;color:var(--stone)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);background:var(--forest);color:var(--cream);padding:12px 20px;border-radius:999px;font-family:var(--display);font-weight:600;font-size:.92rem;opacity:0;transition:all .2s;z-index:80;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* pastel fills */
.band,.bigc,.role.a,.rec,.quote:not(.alt),.rmc:nth-child(1){background:var(--honey-pastel)}
.rmc:nth-child(2){background:var(--sage-pastel)}
.sp-ph.bg-honey{background:var(--honey-pastel)}.sp-ph.bg-sage{background:var(--sage-pastel)}

/* ===== Colour journey (palette from the Level Up flyer and the brand kit, kept pastel) =====
   Each colour stands for one part of Dupoto, shown mostly as small dots and soft tints:
   honey = students & schools · sage = teachers & educators · sky = the platform · lime = families & community.
   Sage and forest stay the professional base. Every page opens in the sky, over the hills, and ends on dark hills. */
:root{--sky:#D5E7FF;--sky-lite:#EAF1FB;--peri:#B3C9FF;--lime:#D5E597;--flyer-cream:#FFF3DD;
  --honey-pastel:#F8E3B5;--sage-pastel:#D9E3C8;--lime-pastel:#E6EFC2;
  --honey-dot:#E8AE45;--sage-dot:#6F8C4A;--peri-dot:#86A6F5;--lime-dot:#AFC65A;--plain-dot:#C9C4B4;
  --honey-soft:#FAE9C9;--sage-soft:#E2EAD5;--lime-soft:#EEF5D5;--sky-soft:#E3EEFF;
  --cloud:var(--sky);--cloud-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='77 68 506 251'%3E%3Cg fill='%23FCFBF9'%3E %3Ccircle cx='150' cy='247' r='72'/%3E%3Ccircle cx='278' cy='203' r='133'/%3E%3Ccircle cx='458' cy='192' r='80'/%3E%3Ccircle cx='511' cy='248' r='71'/%3E %3Crect x='150' y='190' width='361' height='129'/%3E%3C/g%3E%3C/svg%3E")}

/* what each page stands for */
.page{--dotc:currentColor}
#p-schools,#p-checkup{--dotc:var(--honey-dot)}
#p-educators{--dotc:var(--sage-dot)}
#p-platform{--dotc:var(--peri-dot)}
#p-community{--dotc:var(--lime-dot)}

/* nav: the four colours are the key */
:is(.nav .primary,#menu) a{--dot:var(--plain-dot)}
:is(.nav .primary,#menu .dup) a[href="#schools"]{--dot:var(--honey-dot);--on:var(--honey-soft)}
:is(.nav .primary,#menu .dup) a[href="#educators"]{--dot:var(--sage-dot);--on:var(--sage-soft)}
:is(.nav .primary,#menu .dup) a[href="#platform"]{--dot:var(--peri-dot);--on:var(--sky-soft)}
:is(.nav .primary,#menu .dup) a[href="#community"]{--dot:var(--lime-dot);--on:var(--lime-soft)}
:is(.nav .primary,#menu) a::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dot);margin-right:8px;vertical-align:1px}
:is(.nav .primary,#menu .dup) a[aria-current="page"]{background:var(--on);color:var(--forest);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--dot) 45%,transparent)}

/* sky, clouds and hills */
.hero,.phero,.ck-hero{position:relative;isolation:isolate;overflow:hidden}
.hero{padding-bottom:clamp(100px,10vw,150px)}
.phero{padding-bottom:clamp(92px,9.5vw,140px)}
.phero.solo{padding-bottom:clamp(86px,9vw,124px)}
.ck-hero{padding-bottom:clamp(86px,9vw,130px)}
.hero::after,.phero::after,.ck-hero::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:-1px;height:clamp(56px,7.5vw,112px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23E3EBD3' d='M0 58C140 30 300 20 460 40C600 58 700 66 860 48C1020 30 1210 20 1440 46V120H0Z'/%3E%3Cpath fill='%23C9D8AE' d='M0 84C190 62 380 60 560 76C720 90 890 94 1060 78C1220 64 1340 62 1440 70V120H0Z'/%3E%3Cpath fill='none' stroke='%23FEF8EE' stroke-width='3.2' stroke-linecap='round' stroke-dasharray='0.1 12' vector-effect='non-scaling-stroke' d='M0 97C190 80 380 78 560 89C720 99 890 103 1060 93C1220 83 1340 81 1440 86'/%3E%3Cpath fill='%23FEF8EE' d='M0 108C250 99 520 99 790 106C1040 113 1260 110 1440 102V120H0Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;pointer-events:none}
.hero::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23E3EBD3' d='M0 58C140 30 300 20 460 40C600 58 700 66 860 48C1020 30 1210 20 1440 46V120H0Z'/%3E%3Cpath fill='%23C9D8AE' d='M0 84C190 62 380 60 560 76C720 90 890 94 1060 78C1220 64 1340 62 1440 70V120H0Z'/%3E%3Cpath fill='none' stroke='%23FEF8EE' stroke-width='3.2' stroke-linecap='round' stroke-dasharray='0.1 12' vector-effect='non-scaling-stroke' d='M0 104C190 88 380 86 560 97C720 107 890 111 1060 101C1220 91 1340 89 1440 94'/%3E%3C/svg%3E")}
.sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cl{position:absolute;display:block;aspect-ratio:506/251;background:var(--cloud-img) center/100% 100% no-repeat;filter:drop-shadow(0 12px 10px rgba(46,98,190,.13));animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(38px)}}
.sky .c1{width:clamp(100px,11vw,170px);top:1.5%;left:-2%;animation-duration:34s}
.sky .c2{width:clamp(56px,5.6vw,92px);top:3.5%;left:39%;animation-duration:25s;animation-delay:-8s}
.sky .c3{width:clamp(150px,20vw,300px);top:7%;right:-4%;animation-duration:38s;animation-delay:-14s}
.sky .c4{width:clamp(96px,11vw,170px);bottom:19%;left:45%;animation-duration:28s;animation-delay:-4s}
.sky .c4{display:none}
@media (max-width:900px){.sky .c2{display:none}}
.hero .eyebrow::before,.phero .eyebrow::before,.ck-hero .eyebrow::before{border-top-color:var(--dotc)}

/* dark hills under every page */
footer{position:relative}
footer::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(36px,5vw,72px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E %3Cpath fill='%233B5444' d='M0 44C130 18 280 8 420 28C550 46 650 50 790 32C950 12 1170 6 1440 34V80H0Z'/%3E %3Cpath fill='%2326352B' d='M0 64C210 44 410 42 630 56C810 68 990 70 1170 54C1290 44 1380 44 1440 48V80H0Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;pointer-events:none}

/* colour-coded blocks */
.pillar{border:0}
.pillar::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pd)}
.pillar:nth-child(1){background:var(--honey-soft);--pd:var(--honey-dot)}.pillar:nth-child(2){background:var(--sage-soft);--pd:var(--sage-dot)}.pillar:nth-child(3){background:var(--sky-soft);--pd:var(--peri-dot)}.pillar:nth-child(4){background:var(--lime-soft);--pd:var(--lime-dot)}
.pillar p{color:var(--ink)}.pillar .go{color:var(--forest)}
.team .person:nth-child(1) .ph{background:var(--honey-pastel)}.team .person:nth-child(2) .ph{background:var(--sky)}.team .person:nth-child(3) .ph{background:var(--sage-pastel)}.team .person:nth-child(4) .ph{background:var(--lime-pastel)}
.wealth span{background:var(--white);border:1.5px solid var(--line);color:var(--forest)}

/* catalogue: colour = who it's for */
.prod{--cl:var(--linen)}
.prod[data-cat="students"]{--cl:var(--honey-soft)}
.prod[data-cat="staff"]{--cl:var(--sage-soft)}
.prod[data-cat="community"]{--cl:var(--lime-soft)}
.prod[data-p="platform"]{--cl:var(--sky-soft)}
.prod .pic{background:var(--cl)}
.prod .tag{background:var(--white);border:1.5px solid var(--line)}
.tabs button{--c:var(--sage)}
.tabs [data-f="students"]{--c:var(--honey-dot)}.tabs [data-f="staff"]{--c:var(--sage-dot)}.tabs [data-f="community"]{--c:var(--lime-dot)}
.tabs [data-f="all"]{--c:conic-gradient(var(--honey-dot) 0 25%,var(--sage-dot) 0 50%,var(--peri-dot) 0 75%,var(--lime-dot) 0)}
.tabs button::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:8px;vertical-align:0}

/* pastel sections: colour lives in soft section backgrounds, not in the page openings */
:root{--sage-ground:#C9D8AE}
.numbers{background:var(--sage-ground)}
.voices{background:var(--sage-pastel)}
.voices .on-sage{color:var(--sage-ink)}
.case{background:var(--sage-soft)}
#p-home #start{background:var(--sage-soft)}
#p-home .case:not(#start),#p-schools .case,#p-about .case{background:var(--honey-soft)}
#p-impact .case{background:var(--lime-soft)}
.fr{background:var(--sky-lite)}
.lvl-sky{background:linear-gradient(180deg,#DFEBFE,var(--sky-lite))}

/* Level Up (the flyer, on the page) */
.lvl{border-radius:32px;overflow:hidden;background:var(--flyer-cream);box-shadow:0 34px 60px -44px rgba(44,68,53,.55)}
.lvl-sky{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(18px,4vw,44px);align-items:end;padding:clamp(30px,5vw,60px) clamp(22px,5vw,60px) 0;background:linear-gradient(180deg,var(--sky),#DFECFF)}
.lvl-sky .c1{top:auto;bottom:16%;left:-5%}.lvl-sky .c2{top:5%;left:46%}.lvl-sky .c3{top:3%;right:-6%}.lvl-sky .c4{bottom:5%;left:45%}
.lvl-intro{display:grid;gap:18px;justify-items:start;padding-bottom:clamp(30px,4.5vw,60px);align-self:center}
.lvl-intro .eyebrow{background:var(--white);color:var(--forest);padding:7px 14px 7px 12px;border-radius:999px;box-shadow:0 10px 22px -16px rgba(46,98,190,.6)}
.lvl-intro .eyebrow::before{width:9px;height:9px;border:0;border-radius:50%;background:var(--honey-dot)}
.lvl-intro h2{font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:.98}
.lvl-intro .lede{color:#46523F;font-size:1.1rem}
.lvl-intro .where{font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--forest);background:rgba(255,255,255,.75);padding:6px 14px;border-radius:999px}
.lvl-art{position:relative;padding-top:clamp(40px,5vw,70px);margin-right:calc(-1 * clamp(22px,5vw,60px))}
.lvl-art img{display:block;width:100%;height:auto;max-width:560px;margin-left:auto;filter:drop-shadow(0 18px 22px rgba(46,98,190,.2))}
.vt{position:absolute;z-index:1;background:var(--white);color:var(--forest);font-family:var(--display);font-weight:600;font-size:.82rem;line-height:1.2;padding:7px 15px;border-radius:999px;box-shadow:0 12px 22px -14px rgba(46,98,190,.7);animation:bob 6s ease-in-out infinite;white-space:nowrap}
.vt.v1{top:3%;left:8%}.vt.v2{top:15%;left:34%;animation-delay:-1.5s}.vt.v3{top:29%;left:2%;animation-delay:-3s}.vt.v4{top:0;right:12%;animation-delay:-4.5s}.vt.v5{top:44%;left:24%;animation-delay:-2s}.vt.v6{top:56%;left:0;animation-delay:-5s}
.lvl-grass{background:var(--sage);padding:20px clamp(22px,5vw,60px);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:center;text-align:center}
.lvl-grass .motto{background:var(--flyer-cream);color:var(--forest);font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,2.8vw,2.1rem);letter-spacing:-.02em;line-height:1.1;padding:10px 26px;border-radius:18px;box-shadow:0 6px 0 rgba(44,68,53,.2)}
.lvl-grass .lead2{font-family:var(--display);font-weight:700;color:var(--forest);font-size:clamp(1rem,1.6vw,1.2rem)}
.lvl-land{padding:clamp(30px,5vw,56px) clamp(22px,5vw,60px);display:grid;gap:clamp(26px,4vw,40px)}
.stages{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(22px,4vw,52px);align-items:center}
.stg{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}
.stg > div{border-radius:22px;padding:18px 14px;display:grid;justify-items:center;align-content:start;text-align:center;gap:4px;min-width:0}
.stg img{height:clamp(56px,6vw,76px);width:auto;margin-bottom:6px}
.stg b{font-family:var(--display);font-weight:800;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--forest);line-height:1.25}
.stg div span{font-size:.92rem;color:var(--ink)}
.stg .s1{background:var(--honey-pastel)}.stg .s2{background:var(--sky)}.stg .s3{background:var(--sage-pastel)}.stg .s4{background:var(--lime-pastel)}
.stg .more{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--white);color:var(--forest);font-family:var(--display);font-weight:800;font-size:.82rem;padding:6px 13px;border-radius:999px;box-shadow:0 8px 16px -8px rgba(44,68,53,.45);white-space:nowrap}
.stg-tx{display:grid;gap:14px}
.stg-tx h3{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;line-height:1.04}
.stg-tx h3 .lift{display:block}
.stg-tx p{color:var(--stone);font-size:1.05rem}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.steps3 > div{background:var(--white);border:1.5px solid #EEDFC4;border-radius:22px;padding:22px;display:grid;gap:8px;align-content:start}
.steps3 .k{width:34px;height:34px;border-radius:50%;background:var(--lime-pastel);display:grid;place-items:center;font-family:var(--display);font-weight:800;color:var(--forest)}
.steps3 h3{font-size:1.25rem}
.steps3 p{color:var(--stone);font-size:.95rem}
.path4{list-style:none;margin:0;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;background:var(--white);border-radius:18px;border:1.5px solid #EEDFC4}
.path4 li{display:flex;align-items:center;gap:8px}
.path4 li:not(:last-child)::after{content:"›";font-family:var(--display);font-weight:800;color:var(--sage-deep);font-size:1.25rem;line-height:1}
.path4 span{background:var(--lime-soft);border-radius:10px;padding:6px 12px;font-family:var(--display);font-weight:700;font-size:.88rem;color:var(--forest)}
.path4 li:last-child span{background:var(--honey-soft)}
.get3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);gap:14px;align-items:stretch}
.gcard{background:var(--white);border-radius:22px;padding:22px;display:grid;gap:8px;align-content:start;border:1.5px solid #EEDFC4}
.gcard h3{font-size:1.2rem}
.gcard p{color:var(--stone);font-size:.95rem}
.flyer{background:var(--white);border:1.5px solid #EEDFC4;border-radius:22px;padding:16px;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:center}
.flyer button{border:1px solid var(--line);padding:0;background:var(--white);border-radius:8px;overflow:hidden;cursor:zoom-in;width:clamp(72px,7vw,92px);box-shadow:0 12px 20px -12px rgba(38,53,43,.6);transition:transform .15s}
.flyer button:hover{transform:translateY(-3px) rotate(-1.5deg)}
.flyer img{width:100%;height:auto}
.flyer div{display:grid;gap:6px;justify-items:start;min-width:0}
.flyer h3{font-size:1.1rem}
.flyer p{font-size:.9rem;color:var(--stone)}
@media (max-width:1060px){.get3{grid-template-columns:1fr 1fr}.flyer{grid-column:1/-1}}
@media (max-width:900px){.lvl-sky{grid-template-columns:minmax(0,1fr)}.lvl-intro{padding-bottom:0}.lvl-art{max-width:540px;width:100%;justify-self:end}.stages{grid-template-columns:minmax(0,1fr)}.steps3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.get3{grid-template-columns:minmax(0,1fr)}.flyer{display:flex;flex-wrap:wrap}.flyer div{flex:1 1 100%}.path4{flex-direction:column;gap:4px}.path4 li{flex-direction:column;gap:4px}.path4 li:not(:last-child)::after{content:"↓";font-size:1rem}.vt{font-size:.74rem;padding:6px 12px}.vt.v5,.vt.v6{display:none}.stg > div{padding:16px 10px}.stg b{font-size:.76rem;letter-spacing:.04em}}

.ckband{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(22px,4vw,48px);align-items:center;background:var(--honey-soft);border-radius:30px;padding:clamp(24px,4vw,48px)}
.ckb-tx{display:grid;gap:14px;justify-items:start}
.ckb-tx h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.ckb-tx > p{color:var(--ink);font-size:1.05rem;max-width:52ch}
.ckb-meta{display:flex;flex-wrap:wrap;gap:8px}
.ckb-meta span{background:rgba(255,255,255,.7);border-radius:999px;padding:5px 12px;font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--forest)}
.ckb-areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ckb-areas li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;background:var(--white);border-radius:16px;padding:10px 12px}
.ckb-areas img{width:40px;height:40px;object-fit:contain}
.ckb-areas span{font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--forest);line-height:1.2}
@media (max-width:860px){.ckband{grid-template-columns:minmax(0,1fr)}}
.calrow.featured{border-color:var(--sage);background:var(--lime-soft)}
.h3s{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}

/* offering details pop-up */
.prod{cursor:pointer}
.prod .pbtns{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.prod .more{background:none;border:0;padding:8px 2px;font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--forest);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;cursor:pointer}
.prod .more:hover{color:var(--sage-ink)}
.odlg{--cl:var(--linen);border:0;padding:0;border-radius:26px;width:min(780px,calc(100vw - 32px));max-width:none;max-height:min(88vh,900px);background:var(--cream);color:var(--ink);box-shadow:0 40px 90px -30px rgba(20,40,30,.55);overflow:auto;overscroll-behavior:contain}
.odlg[data-cat="students"]{--cl:var(--honey-soft)}
.odlg[data-cat="staff"]{--cl:var(--sage-soft)}
.odlg[data-cat="community"]{--cl:var(--lime-soft)}
.odlg[data-p="platform"]{--cl:var(--sky-soft)}
.odlg::backdrop{background:rgba(26,40,32,.6)}
.od-in{position:relative;padding:34px 36px 30px}
.od-bar{position:sticky;top:0;height:0;display:flex;justify-content:flex-end;z-index:3}
.od-x{flex:none;margin:16px 16px 0 0;box-shadow:0 6px 16px -8px rgba(20,40,30,.45)}
.od-head{display:flex;gap:18px;align-items:flex-start;padding-right:48px}
.od-head .pic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;flex:none;background:var(--cl)}
.od-head .pic svg{width:32px;height:32px;fill:none;stroke:var(--forest);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.od-head .tag{background:var(--white);border:1.5px solid var(--line);display:inline-block}
.od-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-top:10px}
.od-head .meta{font-size:.92rem;font-weight:700;color:var(--sage-ink);margin-top:6px}
.od-lede{margin-top:18px;font-size:1.06rem;color:var(--stone)}
.od-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 0}
.od-facts div{background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:12px 16px}
.od-facts dt{font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-ink)}
.od-facts dd{margin:4px 0 0;font-weight:600;color:var(--forest);line-height:1.45}
.od-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 26px;margin-top:24px}
.od-cols h3{font-size:1.06rem}
.od-cols ul{margin:10px 0 0;padding-left:20px;display:grid;gap:7px;color:var(--ink)}
.od-cols li::marker{color:var(--sage-deep)}
.od-why{margin-top:20px;padding:14px 16px;border-radius:16px;background:var(--cl);color:var(--forest)}
.od-why b{display:block;font-family:var(--display);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--forest);margin-bottom:2px}
.od-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:26px;padding-top:20px;border-top:1.5px dotted var(--line)}
.od-cta .add{padding:12px 18px;font-size:.92rem}
html.od-open{overflow:hidden}
@media (max-width:640px){
 .odlg{width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0}
 .od-in{padding:24px 20px 22px}
 .od-head{gap:14px}
 .od-head .pic{width:52px;height:52px;border-radius:14px}
 .od-facts{grid-template-columns:1fr}
 .od-cta .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:no-preference){.odlg[open]{animation:odIn .22s ease}@keyframes odIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}}

/* resources section */
.res-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);margin:6px 0 38px}
.res-stats div{padding:18px 8px 18px 0}
.res-stats b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;color:var(--forest);letter-spacing:-.02em}
.res-stats span{display:block;margin-top:6px;font-size:.92rem;color:var(--stone);line-height:1.35}
#resources .res-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 18px}
.fold{grid-column:span 3;position:relative;background:var(--white);border:1.5px solid var(--line);border-radius:6px 22px 22px 22px;display:grid;grid-template-rows:auto 1fr;min-width:0}
.fold::before{content:"";position:absolute;left:-1.5px;top:-15px;width:96px;height:16px;background:var(--white);border:1.5px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}
.fold.wide{grid-column:span 6;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:none}
.fold.third{grid-column:span 2}
.fold-media{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;padding:22px;min-height:230px;background:var(--cream);border-radius:4px 20px 0 0;overflow:hidden}
.fold.wide .fold-media{border-radius:4px 0 0 20px}
.fold-media .gimg{border:0;padding:0;background:none;cursor:zoom-in;display:block;min-width:0}
.fold-media .gimg img{display:block;width:auto;max-width:100%;height:auto;max-height:300px;object-fit:contain}
.fold-media .gimg:focus-visible{outline:3px solid var(--forest);outline-offset:4px;border-radius:8px}
.fold.craft .fold-media{background:#FBF7EE;background-image:linear-gradient(rgba(44,68,53,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(44,68,53,.06) 1px,transparent 1px);background-size:26px 26px}
.fold.craft .fold-media img{max-height:340px}
.cards2 .gimg{flex:1 1 0}
.cards2 .gimg img{max-height:210px;margin:0 auto}
.fan{min-height:270px}
.fan .gimg{position:absolute;width:38%;max-width:170px;box-shadow:0 14px 26px -14px rgba(44,68,53,.55);border-radius:4px;transition:transform .2s}
.fan .gimg img{border-radius:4px}
.fan .gimg:nth-child(1){transform:translateX(-62%) rotate(-7deg)}
.fan .gimg:nth-child(2){transform:translateY(-4px);z-index:2}
.fan .gimg:nth-child(3){transform:translateX(62%) rotate(7deg)}
.fan .gimg:hover{z-index:3}
.screen img{border-radius:12px;box-shadow:0 18px 34px -18px rgba(44,68,53,.6)}
.fold.mt .fold-media{background:var(--sage-soft,#E9F0DD)}
.fold.mt .fold-media .gimg{width:100%;max-width:600px}
.fold.mt .fold-media .gimg img{width:100%;max-height:none}
.duo .gimg{flex:1 1 0}
.duo .gimg img{max-height:200px;margin:0 auto;box-shadow:0 10px 22px -14px rgba(44,68,53,.5)}
.fold.third .fold-media{min-height:200px;padding:16px}
.fold.third .fold-media img{max-height:200px}
.fold-tx{padding:22px 24px 24px;display:grid;gap:10px;align-content:start;min-width:0}
.fold-n{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.1em;color:var(--sage-ink)}
.fold-n em{font-style:normal;background:var(--honey);color:var(--forest);border-radius:999px;padding:2px 9px;margin-left:2px}
.fold-tx h3{font-size:1.32rem}
.fold-tx p{color:var(--stone);font-size:.97rem}
.fold-tx p b{color:var(--forest)}
.fold-chips{display:flex;flex-wrap:wrap;gap:6px}
.fold-chips span{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--line);border-radius:6px;padding:4px 8px;color:var(--forest);background:var(--cream)}
.fold-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.fold-tm{font-size:.74rem!important;line-height:1.45}
@media (max-width:980px){.fold.third{grid-column:span 3}}
@media (max-width:760px){
 .res-stats{grid-template-columns:1fr 1fr}
 .fold,.fold.third{grid-column:span 6}
 .fold.wide{grid-template-columns:1fr}
 .fold.wide .fold-media{border-radius:4px 20px 0 0}
 .fold-media{min-height:200px;padding:18px}
 .fan{min-height:240px}
}
/* pop-up photo, sample resources, small print */
.od-ph{margin:-34px -36px 22px;height:240px;background:var(--cl);overflow:hidden;border-radius:26px 26px 0 0}
.od-ph img{width:100%;height:100%;object-fit:cover;display:block}
.od-ph.fit{background:var(--cream)}
.od-ph.fit img{object-fit:contain;padding:14px}
.od-res{margin-top:24px}
.od-res h3{font-size:1.06rem}
.od-thumbs{display:flex;gap:12px;overflow-x:auto;padding:10px 2px 6px;scrollbar-width:thin}
.od-thumb{flex:none;width:132px;border:0;background:none;padding:0;cursor:zoom-in;display:grid;gap:6px;text-align:left}
.od-thumb img{width:132px;height:100px;object-fit:cover;object-position:top;border-radius:10px;border:1.5px solid var(--line);background:var(--white)}
.od-thumb span{font-size:.76rem;line-height:1.3;color:var(--stone)}
.od-note{margin-top:14px;font-size:.74rem;color:var(--stone);line-height:1.45}
@media (max-width:640px){.od-ph{margin:-24px -20px 18px;height:190px;border-radius:24px 24px 0 0}}
/* picture viewer */
.gal{border:0;padding:0;background:transparent;width:min(1100px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);overflow:visible}
.gal::backdrop{background:rgba(26,40,32,.82)}
.gal-in{position:relative;display:grid;gap:10px;justify-items:center}
.gal figure{margin:0;display:grid;gap:10px;justify-items:center}
.gal img{max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;border-radius:12px;background:var(--white);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.gal figcaption{color:var(--cream);font-family:var(--display);font-weight:600;font-size:.98rem;text-align:center;max-width:70ch}
.gal-x{position:absolute;top:-6px;right:-6px;z-index:2}
.gal-nav{display:flex;align-items:center;gap:14px;color:var(--mist);font-family:var(--display);font-weight:600;font-size:.9rem}
.gal-b{width:44px;height:44px;border-radius:50%;border:0;background:var(--cream);color:var(--forest);font-size:1.5rem;line-height:1;cursor:pointer}
.gal-b:hover{background:var(--honey)}

/* ==== Rhythm: one rule for the space between blocks, on every page ==========================================
   --sec is the standard gap. A coloured band keeps --sec of padding inside it. Two plain sections share ONE gap
   (the upper one's bottom padding), so the lower one drops its own top padding. A plain section straight after a
   band gets its own top padding, so nothing sits flush against colour. After a hero (which ends in a hill) the
   gap is shorter, because the hill already gives air. Scoped to .page>section so the check-up's question blocks
   (which are <section>s too) are not touched. */
:root{--sec:clamp(60px,8vw,110px)}
.page>section:not(.hero,.phero,.ck-hero,.problem,.case,.voices,.forest-sec,.dark,.pb-0)+section:not(.problem,.case,.voices,.forest-sec,.dark){padding-top:0}
.page>:is(.problem,.case,.voices,.forest-sec,.dark)+section{padding-top:var(--sec)}
.page>section.pb-0+section.tight{padding-top:var(--sec)}
.page>:is(.hero,.phero,.ck-hero)+section{padding-top:clamp(24px,3vw,40px)}
.qblock{padding-block:0}
.ctas.center{justify-content:center}
.conf-road{margin-top:clamp(40px,6vw,80px)}
/* the dashed "your organisation?" card looks like an add-button, so the whole card is the button */
.pcard-cta{position:relative;transition:border-color .15s}
.pcard-cta [data-partner]::after{content:"";position:absolute;inset:0;border-radius:inherit;cursor:pointer}
.pcard-cta:hover{border-color:var(--forest)}
/* ==== No lonely last card: when a grid drops to two columns, an odd last card spans the row ============ */
@media (min-width:541px) and (max-width:860px){.whys>:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:521px) and (max-width:980px){.princ>:last-child:nth-child(odd),.process>:last-child:nth-child(odd),.loop>:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:761px) and (max-width:980px){
  .fold.third:last-child{grid-column:span 6;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none}
  .fold.third:last-child .fold-media{border-radius:4px 0 0 20px}
}
.fold-chips span{border:0;border-radius:7px;background:var(--tag-bg);cursor:default}

/* ==== Touch comfort: controls are easy to hit =========================================================== */
/* a stacked two-column block already has a gap between its columns, so the heading block does not also add its own bottom margin */
.split>.head{margin-bottom:0}
/* resource pictures hold their shape while they load: the build writes each picture's own pixel size into --w and --h,
   so the box is the same size before and after the file arrives (no jump as you scroll) */
.gimg img[style*="--w"]{width:min(calc(var(--w)*1px),calc(var(--mh,300px)*var(--w)/var(--h)));aspect-ratio:var(--w)/var(--h);max-width:100%}
.fold-media{--mh:300px}
.fold.craft .fold-media{--mh:340px}
.cards2,.duo,.fold.third .fold-media{--mh:210px}
.duo,.fold.third .fold-media{--mh:200px}
.fold.mt .fold-media{--mh:2000px}
.faq details{padding-block:0}
.faq summary{padding-block:18px}
.faq details[open] summary{padding-bottom:8px}
.faq details p{margin-top:0;padding-bottom:18px}
.faq summary::after{top:15px}
.pcard .how{border-radius:9px}
@media (max-width:760px){
  footer ul{gap:0}
  footer .top a{display:inline-block;padding-block:6px}
  .lang button{padding:9px 12px}
  .sp-li{padding:8px 14px}
  .aud a{padding-block:10px}
}
@media (max-width:860px){.page>.phero+.purpose-sec{padding-top:calc(70px + clamp(24px,3vw,40px))}}

/* ==== Labels are not buttons =================================================================================
   Anything you can click has a solid fill or a 2px forest outline, a pointer and a hover. Anything you can't is
   a flat label: tinted, no outline, softer corners, default cursor. */
:root{--tag-bg:rgba(171,192,133,.26)}
.facts span,.uses span,.who4 span,.goals span,.wealth span,.tone span,.places span,.themes span,.proj .sdg span,.prod .tag,.tag,.how{border:0;border-radius:9px;cursor:default;box-shadow:none}
.facts span,.uses span,.who4 span,.goals span,.wealth span,.tone span,.prod .tag{background:var(--tag-bg)}
.uses span,.who4 span,.tone span{padding:8px 14px;font-size:.92rem}
.facts span{padding:6px 12px}
.goals span{padding:4px 12px 4px 4px;border-radius:12px}
.goals b{border-radius:8px}
.wealth span{padding:7px 14px}
.themes span{padding:6px 14px}
.prod .tag,.tag{padding:5px 10px}
.how{border-radius:9px}
/* facts shown as a checklist rather than as pills */
.ck-meta,.ckb-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0}
.ck-meta span,.ckb-meta span{display:inline-flex;align-items:center;gap:9px;background:none;border:0;border-radius:0;padding:0;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--forest);cursor:default}
.ck-meta span::before,.ckb-meta span::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--sage-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
/* the hero "I'm a…" choosers are real links: give them the outline + arrow of an action */
.aud a{border:1.5px solid var(--forest);padding:8px 14px 8px 16px;display:inline-flex;align-items:center;gap:8px}
.aud a::after{content:"→";font-size:.95em;transition:transform .15s}
.aud a:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.aud a:hover::after{transform:translateX(3px)}
/* the question bubbles over the hero photo are captions: give them a speech-bubble tail */
.chip{pointer-events:none;border-radius:22px}
.chip::after{content:"";position:absolute;width:14px;height:14px;background:var(--white);transform:rotate(45deg);border-radius:3px;z-index:-1}
.chip.c1::after{left:30px;bottom:-5px}
.chip.c2::after{right:34px;bottom:-5px}
.chip.c3::after{left:34px;top:-5px}

/* ==== Home: the free check-up band ======================================================================== */
.ckb-areas{background:var(--white);border-radius:24px;padding:clamp(10px,1.6vw,18px) clamp(16px,2.4vw,28px);gap:0 clamp(18px,3vw,36px)}
.ckb-areas li{background:none;border-radius:0;padding:11px 0;grid-template-columns:38px minmax(0,1fr);border-bottom:2px dotted var(--line)}
.ckb-areas li:nth-last-child(-n+2){border-bottom:0}
.ckb-areas img{width:38px;height:38px}
.ckb-areas span{font-weight:600}
@media (max-width:420px){.ckb-areas{grid-template-columns:minmax(0,1fr)}.ckb-areas li:nth-last-child(2){border-bottom:2px dotted var(--line)}}
/* skip link: first stop for keyboard users */
.skip{position:fixed;left:12px;top:-64px;z-index:100;background:var(--forest);color:var(--cream);padding:12px 18px;border-radius:12px;font-family:var(--display);font-weight:600;text-decoration:none;transition:top .15s}
.skip:focus{top:12px}
main:focus{outline:none}

/* ==== Friendly faces, the India duo and the world map (Contact page) ======================================
   The team sit in arches, heads popping out, tilted a little and straightening on hover. The map is real
   geography (Natural Earth, public domain). Honey = students, as everywhere else on the site. Pins, labels and the
   place buttons are HTML so every name translates; the SVG holds shapes only. */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
#p-contact .case{background:var(--honey-soft)}

/* -- the team -- */
.faces{overflow-x:clip}
.faces .head{position:relative}
.fteam{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3.4vw,44px) clamp(14px,2.2vw,28px)}
.fteam.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:480px;margin-inline:auto;gap:clamp(12px,2.4vw,28px)}
.fp{--tilt:0deg;position:relative;display:grid;justify-items:center;align-content:start;text-align:center;gap:4px;transform:rotate(var(--tilt));transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.fteam>.fp:nth-child(4n+1){--tilt:-2.2deg}.fteam>.fp:nth-child(4n+2){--tilt:1.8deg}.fteam>.fp:nth-child(4n+3){--tilt:-1.4deg}.fteam>.fp:nth-child(4n+4){--tilt:2.4deg}
.fp-ph{position:relative;width:100%;aspect-ratio:1/1}
.fp-ph::before{content:"";position:absolute;left:5%;right:5%;bottom:0;height:80%;background:var(--bg,var(--sky));border-radius:50% 50% 24px 24px/56% 56% 24px 24px}
.fp-ph img{position:absolute;left:-6%;bottom:0;width:112%;max-width:none;height:auto;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.fp-tag{position:relative;z-index:1;margin-top:-18px;transform:rotate(-3deg);background:var(--honey);color:var(--forest);font-family:var(--display);font-weight:700;font-size:.78rem;line-height:1.2;padding:5px 12px;border-radius:9px;cursor:default;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.fteam>.fp:nth-child(even) .fp-tag{transform:rotate(2.5deg)}
.fp h3{font-size:1.15rem;margin-top:8px}
.fp-tag+h3{margin-top:10px}
.fp-role{color:var(--stone);font-size:.9rem;line-height:1.4;max-width:24ch;text-wrap:balance}
@media (hover:hover){
  .fp:hover{transform:rotate(0deg) translateY(-8px)}
  .fp:hover .fp-ph img{transform:scale(1.05)}
  .fp:hover .fp-tag{transform:rotate(3deg) scale(1.07)}
}
@keyframes fpIn{from{opacity:0;transform:translateY(30px) scale(.94) rotate(var(--tilt))}}
.fteam.pre>.fp,.india.pre .fp{opacity:0}
.fteam.in>.fp,.india.in .fp{animation:fpIn .65s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i,0)*110ms)}
.spark{position:absolute;width:var(--s,24px);height:var(--s,24px);background:var(--honey-dot);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twinkle 3.8s ease-in-out infinite;animation-delay:var(--d,0s);pointer-events:none}
.spark.a{--s:30px;left:5%;top:4px}.spark.b{--s:18px;right:2.5%;top:6px;--d:1.2s}.spark.c{--s:22px;right:3%;bottom:40px;--d:2.2s;background:var(--sage-dot)}
@keyframes twinkle{50%{transform:scale(.5) rotate(30deg);opacity:.55}}
@media (max-width:900px){.spark{display:none}}
@media (max-width:900px){.fteam{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.fp h3{font-size:1.02rem}.fp-role{font-size:.82rem}.fp-tag{font-size:.72rem;padding:4px 10px}}

/* -- the India duo -- */
.india{position:relative;margin-top:clamp(44px,5.5vw,72px);background:var(--white);border:2px dotted var(--honey-dot);border-radius:34px;padding:clamp(26px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(22px,4vw,56px);align-items:center}
.india-tx{display:grid;gap:12px;justify-items:start}
.india-tx h3{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;line-height:1.08}
.india-tx p:not(.eyebrow){color:var(--stone);max-width:34ch;text-wrap:balance}
.india-ph{position:relative;padding-top:clamp(38px,4.4vw,52px)}
.fp-bubble{position:absolute;z-index:3;left:50%;top:0;transform:translateX(-50%) rotate(-3deg);background:var(--honey);color:var(--forest);font-family:var(--display);font-weight:700;font-size:clamp(.95rem,1.5vw,1.1rem);line-height:1.2;padding:10px 18px;border-radius:18px;white-space:nowrap}
.fp-bubble::after{content:"";position:absolute;left:50%;top:100%;width:16px;height:10px;margin-left:-8px;background:var(--honey);clip-path:polygon(0 0,100% 0,50% 100%)}
@keyframes bubbleBob{50%{transform:translateX(-50%) rotate(-3deg) translateY(-6px)}}
@keyframes bubbleIn{from{opacity:0;transform:translateX(-50%) rotate(-14deg) scale(.4)}}
.india.in .fp-bubble{animation:bubbleIn .6s cubic-bezier(.34,1.56,.64,1) .45s backwards,bubbleBob 3.4s ease-in-out 1.1s infinite}
.india.pre .fp-bubble{opacity:0}
@media (max-width:820px){
  .india{grid-template-columns:minmax(0,1fr);text-align:center}
  .india-tx{justify-items:center}
  .india-tx .eyebrow{justify-content:center}
  .india-ph{order:-1}
}

/* -- the map -- */
.wmband .head{margin-bottom:clamp(28px,4vw,48px)}
.wmband :focus-visible{outline-color:var(--honey)}
.wm-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);grid-template-areas:"world uk" "legend uk";grid-template-rows:auto 1fr;gap:clamp(22px,3vw,34px) clamp(22px,3.4vw,44px);align-items:start}
.wm-world{grid-area:world}.wm-uk{grid-area:uk}.wm-legend{grid-area:legend}
@media (max-width:1100px){.wm-wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"world" "legend" "uk";grid-template-rows:none}.wm-world{width:100%;max-width:920px;justify-self:center}.wm-uk{width:100%;max-width:440px;justify-self:center}}
.wm{margin:0;position:relative}
.wm-canvas{position:relative;width:100%;aspect-ratio:var(--w)/var(--h)}
.wm-canvas svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.wm-land{fill:rgba(171,192,133,.3);stroke:rgba(44,68,53,.9);stroke-width:.35;stroke-linejoin:round;fill-rule:evenodd}
.hl{fill:var(--honey);stroke:var(--forest);stroke-width:.5;stroke-linejoin:round;fill-rule:evenodd;cursor:pointer;transition:fill .2s,opacity .25s,stroke .2s}
.wm-uk .hl{stroke-width:1.3}
.wm-wrap.has-on .hl:not(.is-on){opacity:.4}
.hl.is-on{fill:#FFE4A6;stroke:var(--cream);stroke-width:1}
.wm-uk .hl.is-on{stroke-width:2}
.wm-pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.wm-pin i{position:relative;z-index:1;width:9px;height:9px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 2px var(--forest);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.wm-pin::before,.wm-pin::after{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid var(--honey);opacity:0;pointer-events:none}
.wm-pin.is-on{z-index:4}
.wm-pin.is-on i{transform:scale(1.5)}
.wm-pin.is-on::before{animation:wmRipple 1.5s ease-out infinite}
.wm-pin.uk{pointer-events:none}
.wm-pin.uk i,.wm-pin.uk::before,.wm-pin.uk::after{display:none}
@keyframes wmRipple{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(2.4)}}
@keyframes pinIn{from{opacity:0;transform:scale(.3)}}
.wm-ring{position:absolute;width:4.6%;aspect-ratio:1;transform:translate(-50%,-50%);border:1.5px dashed var(--honey);border-radius:50%;pointer-events:none}
.wm-tag{position:absolute;left:50%;bottom:calc(100% - 3px);transform:translate(-50%,6px);background:var(--cream);color:var(--forest);font:700 .78rem/1 var(--display);padding:7px 11px;border-radius:9px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:3}
.wm-tag::after{content:"";position:absolute;left:50%;top:100%;width:10px;height:6px;margin-left:-5px;background:var(--cream);clip-path:polygon(0 0,100% 0,50% 100%)}
.wm-pin.dn .wm-tag{bottom:auto;top:calc(100% - 3px);transform:translate(-50%,-6px)}
.wm-pin.dn .wm-tag::after{top:auto;bottom:100%;clip-path:polygon(50% 0,0 100%,100% 100%)}
.wm-pin.is-on .wm-tag{opacity:1;transform:translate(-50%,0)}
.wm-wrap.pre .hl{fill-opacity:0}
.wm-wrap.pre .wm-pin:not(.uk){opacity:0}
.wm-wrap.pre .wm-ring{opacity:0}
.wm-wrap.in .hl{transition:fill-opacity .8s ease calc(var(--i)*80ms),fill .2s,opacity .25s,stroke .2s}
.wm-wrap.in .wm-pin:not(.uk){animation:pinIn .55s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(.3s + var(--i)*80ms)}
.wm-wrap.in .wm-pin:not(.uk)::after{animation:wmRipple 2.2s ease-out 3;animation-delay:calc(.7s + var(--i)*80ms)}
.wm-wrap.in .wm-ring{transition:opacity .6s ease .5s}
.wm-uk{align-self:center;display:grid;align-content:start;justify-items:center;gap:14px;padding:22px 20px 26px;border:1.5px solid rgba(171,192,133,.32);border-radius:28px;background:rgba(254,248,238,.045)}
.wm-uk figcaption{display:grid;gap:3px;text-align:center}
.wm-uk figcaption b{font:600 .74rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--honey)}
.wm-uk figcaption span{color:var(--mist);font-size:.95rem}
.wm-uk .wm-canvas{max-width:300px}
.wm-name{position:absolute;transform:translate(-50%,-50%);font:700 .74rem/1 var(--display);letter-spacing:-.01em;color:var(--forest);text-shadow:0 0 2px var(--honey),0 0 2px var(--honey),0 0 4px var(--honey);pointer-events:none;white-space:nowrap;transition:color .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.wm-name[data-place="wales"]{font-size:.66rem}
.wm-name.is-on{transform:translate(-50%,-50%) scale(1.2)}
.wm-wrap.has-on .wm-name:not(.is-on){color:var(--cream);text-shadow:0 0 2px var(--forest),0 0 4px var(--forest)}
.wm-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 30px}
.wm-grp{display:grid;gap:9px;justify-items:center;align-content:start}
.wm-gh{font:600 .7rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.wm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.wm-chip{font:600 .9rem/1.2 var(--display);color:var(--cream);background:transparent;border:1.5px solid rgba(171,192,133,.6);border-radius:999px;min-height:40px;padding:8px 15px 8px 12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-align:left;transition:background .15s,color .15s,border-color .15s}
.wm-chip::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--honey)}
.wm-chip:hover,.wm-chip.is-on,.wm-chip[aria-pressed="true"]{background:var(--honey);border-color:var(--honey);color:var(--forest)}
.wm-chip:hover::before,.wm-chip.is-on::before,.wm-chip[aria-pressed="true"]::before{background:var(--forest)}
@media (max-width:600px){
  .wm-chip{min-height:42px;font-size:.86rem}
  .wm-tag{font-size:.72rem;padding:6px 9px}
  .wm-uk{padding:18px 14px 22px}
  .wm-name{font-size:.74rem}
}

/* -- About: six people, and the real list of places -- */
.team{grid-template-columns:repeat(3,minmax(0,1fr))}
.team .person:nth-child(5) .ph{background:var(--honey-pastel)}.team .person:nth-child(6) .ph{background:var(--linen)}
@media (max-width:1000px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.team{grid-template-columns:1fr}}
.places{gap:8px}.places span{padding:6px 14px;font-size:.92rem}
.sp-ph.bg-lime{background:var(--lime-pastel)}

/* ==== Resources (Schools page): one standard for every card ====================================================
   Cards in a row are the same height. The picture panels are the same size and the same warm tone, so the text starts at the
   same place in each card. Chips and buttons sit on the bottom edge. Every button is the same size. */
#resources .res-grid{align-items:stretch}
#resources .fold:not(.wide){--mh-card:270px}
#resources .fold.third:not(.wide){--mh-card:232px}
#resources .fold:not(.wide) .fold-media{height:var(--mh-card);min-height:0;background:var(--linen)}
#resources .fold:not(.wide) .fold-tx{display:flex;flex-direction:column}
#resources .fold-btns{margin-top:6px}
#resources .fold:not(.wide) .fold-tx>.fold-chips,#resources .fold:not(.wide) .fold-tx>.fold-btns{margin-top:auto}
#resources .fold:not(.wide) .fold-tx>.fold-chips+.fold-btns{margin-top:2px}
#resources .fold-btns .btn{min-width:13.2rem;min-height:48px;padding:10px 22px;font-size:.95rem;line-height:1.3;justify-content:center;text-align:center}
/* The Craft card (01) has two buttons in one row: "See inside" and the main "Explore the School Pack". They are exactly the same width,
   side by side or stacked. The main button's label is the longest, so it sets the width. */
#resources .fold.craft .fold-btns .btn{width:15rem;max-width:100%;min-width:0;padding-inline:12px;white-space:nowrap}
@media (max-width:760px){#resources .fold:not(.wide){--mh-card:240px}}
@media (max-width:560px){#resources .fold-btns .btn{flex:1 1 100%}}
@media (max-width:389px){#resources .fold-btns .btn{padding-inline:12px;font-size:.9rem}}
@media (max-width:339px){#resources .fold-tx{padding-inline:16px}}
@media (min-width:761px) and (max-width:980px){#resources .fold.third:last-child .fold-media{height:auto;min-height:232px}}
/* two cards per row (761-1100): the text column is narrow, so the two card-set buttons share the row as equal halves instead of stacking.
   That keeps the chips and buttons of cards 02 and 03 level. */
@media (min-width:761px) and (max-width:1100px){
  #resources .fold-btns.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #resources .fold-btns.pair .btn{min-width:0;padding-inline:10px}
}
@media (min-width:761px) and (max-width:940px){
  #resources .fold:not(.wide) .fold-tx{padding-inline:20px}
  #resources .fold-btns .btn{font-size:.9rem;padding-inline:16px}
  #resources .fold-btns.pair .btn{padding-inline:8px}
}
/* Welsh titles are longer: where one title in a row wraps to two lines, every title in that row gets two lines of room so the
   paragraphs below start level. (English titles all fit on one line.) */
@media (min-width:981px){html[lang="cy"] #resources .fold.third h3{min-height:2.16em}}
@media (min-width:761px) and (max-width:845px){html[lang="cy"] #resources .fold.third:not(:last-child) h3{min-height:2.16em}}
/* Picture viewer: the page counter ("1 / 7") sits on the dark backdrop. Give it its own dark ground so automatic contrast checkers,
   which cannot see a ::backdrop, read it correctly wherever the page behind is scrolled. Looks the same as before. */
.gal-nav #galN{background:rgba(26,40,32,.92);border-radius:999px;padding:3px 12px}
.gal-nav #galN:empty{display:none}

/* ==== About: the same friendly faces as Contact, and one student in the same style ======================================
   The student is a cutout in an arch with a hand-lettered tag, like the team; the quote sits in a speech bubble pointing at him.
   Dark forest card, honey bubble: it reads as a different moment from the white India card above it. */
#p-about .faces{background:var(--honey-soft)}
.faces-note{text-align:center;margin:clamp(24px,3.2vw,36px) auto 0;max-width:none;text-wrap:balance}
.svoice{position:relative;margin:clamp(44px,5.5vw,72px) 0 0;background:var(--forest);color:var(--cream);border-radius:34px;padding:clamp(28px,4.4vw,56px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(26px,4.4vw,60px);align-items:center}
.sv-tx{display:grid;gap:20px;justify-items:start;min-width:0}
.sv-tx .eyebrow{color:var(--honey)}
.sv-q{position:relative;margin:0;background:var(--honey);color:var(--forest);padding:clamp(22px,3.2vw,38px) clamp(22px,3.8vw,44px);border-radius:30px 30px 30px 8px;transform:rotate(-1.2deg)}
.sv-q p{margin:0;max-width:none;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.7vw,2.1rem);line-height:1.25;letter-spacing:-.012em;color:var(--forest);text-wrap:balance}
.sv-q p::before{content:"\201C";content:"\201C" / ""}
.sv-q p::after{content:"\201D";content:"\201D" / ""}
.sv-q::after{content:"";position:absolute;right:-17px;top:30%;width:20px;height:28px;background:var(--honey);clip-path:polygon(0 0,100% 50%,0 100%)}
.sv-who{display:grid;gap:2px;color:var(--mist);font-size:.96rem;line-height:1.4}
.sv-who b{color:var(--cream);font-family:var(--display);font-size:1.04rem}
.sv-ph{--tilt:1.6deg;width:min(100%,430px);justify-self:center}
@keyframes svIn{from{opacity:0;transform:rotate(-7deg) translateX(-26px) scale(.82)}}
.svoice.pre .sv-ph,.svoice.pre .sv-q{opacity:0}
.svoice.in .sv-ph{animation:fpIn .65s cubic-bezier(.34,1.56,.64,1) .1s backwards}
.svoice.in .sv-q{animation:svIn .7s cubic-bezier(.34,1.56,.64,1) .4s backwards}
@media (max-width:820px){
  .svoice{grid-template-columns:minmax(0,1fr);text-align:center}
  .sv-tx{justify-items:center}
  .sv-tx .eyebrow{justify-content:center}
  .sv-ph{order:-1;width:min(76%,340px)}
  .sv-q::after{right:auto;left:50%;top:-15px;margin-left:-14px;width:28px;height:18px;clip-path:polygon(0 100%,50% 0,100% 100%)}
}

/* Check-up results: the two cards side by side (plan / questions) are the same height */
.res-grid.even{align-items:stretch}

/* ==== Welsh headings that came out too big ===============================================================================
   The general Welsh <h2> size (a little smaller than English, for the longer words) was beating the size set for some smaller headings, so in
   Welsh the footer column titles, "What you'll get", "Send us an enquiry", the privacy and safeguarding section titles, and two of the
   bigger headings came out far bigger than their English versions. Each now keeps the size it has in English. */
html[lang="cy"] footer h2{font-size:.95rem}
html[lang="cy"] .ck-get h2{font-size:.82rem}
html[lang="cy"] h2.h3s{font-size:1.3rem}
html[lang="cy"] .doc h2{font-size:clamp(1.25rem,2.2vw,1.6rem)}
html[lang="cy"] .ckb-tx h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
html[lang="cy"] .member h2{font-size:clamp(1.8rem,3vw,2.5rem)}


/* ==== Playful details ==============================================================================================
   The About page showed the way: hand-lettered honey tags, speech bubbles, cut-outs, a few sparkles, everything landing with a little
   spring. The same few devices now turn up in other places, always around real content: the quotes are bubbles, captions are tags,
   the postcards are pinned up, the real Expert and Ambassador badges are stickers. Layout, type and colour are unchanged, nothing here
   adds a claim, and the movement stops for anyone who asks their device for less of it (the global reduced-motion rule). */
:root{--spring:cubic-bezier(.34,1.56,.64,1);--qm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='%232C4435' d='M0 48V28C0 12 9 3 24 0v9C16 11 12 16 12 24h12v24H0zm36 0V28C36 12 45 3 60 0v9c-8 2-12 7-12 15h12v24H36z'/%3E%3C/svg%3E")}
.spk{position:absolute;width:var(--s,22px);height:var(--s,22px);background:var(--c,var(--honey-dot));clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twinkle 3.8s ease-in-out infinite;animation-delay:var(--d,0s);pointer-events:none}

/* -- Home, "In their words": what people said is in a speech bubble, and the tail points at who said it -- */
.voices{overflow-x:clip}
.voices .vgrid{gap:clamp(30px,3.6vw,44px) clamp(16px,2vw,22px)}
.voices .v{--bub:var(--white);--tilt:0deg;--i:0;background:none;border-radius:0;padding:0;gap:0;align-content:stretch;grid-template-rows:minmax(0,1fr) auto;transform:rotate(var(--tilt));transition:transform .5s var(--spring)}
.voices .v:nth-child(1){--bub:var(--sky);--tilt:-.5deg}
.voices .v:nth-child(2){--bub:var(--honey-pastel);--tilt:.7deg;--i:1}
.voices .v:nth-child(3){--bub:var(--honey-pastel);--tilt:-.7deg;--i:2}
.voices .v:nth-child(4){--bub:var(--white);--tilt:.5deg;--i:3}
.voices .v:nth-child(5){--bub:var(--sky);--tilt:-.6deg;--i:4}
.voices .v>p{position:relative;display:grid;align-content:center;margin:0;background:var(--bub);padding:clamp(38px,3.8vw,46px) clamp(22px,2.8vw,32px) clamp(22px,2.6vw,28px);border-radius:28px 28px 28px 8px}
.voices .v>p::before{content:"";position:absolute;left:clamp(20px,2.4vw,28px);top:clamp(14px,1.6vw,18px);width:30px;height:23px;background:var(--qm) no-repeat 0 0/contain;opacity:.2}
.voices .v .who{position:relative;padding:22px 0 0 24px}
.voices .v .who::before{content:"";position:absolute;left:32px;top:-2px;width:22px;height:19px;background:var(--bub);clip-path:polygon(0 0,100% 0,0 100%)}
/* bubbles that share a row end together: every card takes a bubble row and a speaker row of the shared grid */
@supports (grid-template-rows:subgrid){
 .voices .vgrid{--vg:clamp(30px,3.6vw,44px);row-gap:0;margin-bottom:calc(-1*var(--vg))}
 .voices .v{grid-row:span 2;grid-template-rows:subgrid;padding-bottom:var(--vg)}
 .voices .v .who{align-self:start}
}
@media (hover:hover){.voices .v:hover{transform:rotate(0deg) translateY(-5px)}}
.vgrid.pre .v{opacity:0}
.vgrid.in .v{animation:fpIn .65s var(--spring) backwards;animation-delay:calc(var(--i,0)*110ms)}

/* -- Home, "The problem we solve": the three questions are bubbles on the dark band, each with a tag for who is asking -- */
.problem .pains{gap:clamp(30px,3.6vw,44px) clamp(18px,2.4vw,30px);align-items:stretch}
.problem .pain{--tilt:0deg;--tag:var(--honey);--i:0;position:relative;border:0;border-radius:0;background:none;padding:0;gap:0;grid-template-rows:auto auto 1fr;align-content:start;transform:rotate(var(--tilt));transition:transform .5s var(--spring)}
.problem .pain:nth-child(1){--tilt:-.7deg}
.problem .pain:nth-child(2){--tilt:.6deg;--tag:var(--sage);--i:1}
.problem .pain:nth-child(3){--tilt:-.5deg;--tag:var(--lime-pastel);--i:2}
.problem .pain q{display:block;position:relative;background:var(--cream);color:var(--forest);padding:clamp(20px,2.4vw,26px) clamp(20px,2.4vw,28px);border-radius:26px 26px 26px 8px;font-size:clamp(1.12rem,1.7vw,1.3rem)}
.problem .pain .who{position:relative;justify-self:start;margin:22px 0 0 22px;background:var(--tag);color:var(--forest);font-weight:700;font-size:.8rem;letter-spacing:0;text-transform:none;line-height:1.2;padding:5px 12px;border-radius:9px;transform:rotate(-3deg)}
.problem .pain .who::before{content:"";position:absolute;left:10px;bottom:100%;width:22px;height:24px;background:var(--cream);clip-path:polygon(0 0,100% 0,0 100%);transform:rotate(3deg);transform-origin:0 100%}
.problem .pain p{margin:16px 0 0;padding-inline:4px}
@media (hover:hover){.problem .pain:hover{transform:rotate(0deg) translateY(-5px)}}
.pains.pre .pain{opacity:0}
.pains.in .pain{animation:fpIn .65s var(--spring) backwards;animation-delay:calc(var(--i,0)*120ms)}

/* -- Home: photo captions are hand-lettered tags, the printed maps hang a little crooked -- */
.mapwall figure{--tilt:0deg;transform:rotate(var(--tilt));transition:transform .5s var(--spring)}
.mapwall figure:nth-child(3n+1){--tilt:-1deg}
.mapwall figure:nth-child(3n+2){--tilt:.8deg}
.mapwall figure:nth-child(3n){--tilt:-.6deg}
.mapwall figure:hover{transform:rotate(0deg) translateY(-6px)}
.mapwall figcaption{position:relative;z-index:1;width:fit-content;max-width:calc(100% - 8px);margin:-20px auto 0;padding:5px 12px;background:var(--honey);color:var(--forest);border-radius:9px;font-weight:700;font-size:.8rem;line-height:1.25;transform:rotate(-2.5deg)}
.mapwall figure:nth-child(even) figcaption{transform:rotate(2deg)}
.wsrow figcaption,.video .cap-l{background:var(--honey);color:var(--forest);font-weight:700;border-radius:9px;transform:rotate(-2deg);transform-origin:left bottom}
.wsrow figure:nth-child(even) figcaption{transform:rotate(1.8deg)}
.wsrow figure,.video{isolation:isolate}

/* -- Home, the six areas: each little picture gives a wiggle when you point at it -- */
@keyframes wiggle{0%,100%{transform:none}25%{transform:rotate(-9deg) scale(1.1)}60%{transform:rotate(7deg) scale(1.1)}}
@media (hover:hover){.ckb-areas li:hover img{animation:wiggle .6s var(--spring)}}

/* -- Approach: "Map it / Build it / Own it" are tags, and the teachers' postcards are pinned up with tape -- */
.steps .step .k{justify-self:start;background:var(--honey);color:var(--forest);font-size:.82rem;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.2;padding:5px 12px;border-radius:9px;transform:rotate(-3deg);transform-origin:left center;transition:transform .45s var(--spring)}
.steps .step:nth-child(3) .k{transform:rotate(2.2deg)}
.steps .step:nth-child(4) .k{transform:rotate(-1.8deg)}
@media (hover:hover){.steps .step:hover .k{transform:rotate(0deg) scale(1.07)}}
.postcards{gap:clamp(24px,3vw,34px) clamp(16px,2.4vw,26px);padding-top:10px}
.postcards .pc{--tilt:0deg;--i:0;position:relative;margin:0;transform:rotate(var(--tilt));transition:transform .5s var(--spring)}
.postcards .pc:nth-child(1){--tilt:-1.6deg}
.postcards .pc:nth-child(2){--tilt:1.2deg;--i:1}
.postcards .pc:nth-child(3){--tilt:-.9deg;--i:2}
.postcards .pc::before{content:"";position:absolute;z-index:1;left:50%;top:-12px;width:78px;height:24px;margin-left:-39px;background:rgba(243,201,121,.85);border-radius:3px;transform:rotate(-3deg);box-shadow:0 1px 2px rgba(44,68,53,.2)}
.postcards .pc:nth-child(2)::before{transform:rotate(2.5deg)}
.postcards .pc img{display:block}
@media (hover:hover){.postcards .pc:hover{transform:rotate(0deg) translateY(-6px)}}
.postcards.pre .pc{opacity:0}
.postcards.in .pc{animation:fpIn .65s var(--spring) backwards;animation-delay:calc(var(--i,0)*120ms)}

/* -- Educators: the real Dupoto badges, stuck on the two role cards and big where it says "Carry the badge" -- */
.roles .role{position:relative}
.role-badge{position:absolute;top:-22px;right:clamp(16px,3vw,30px);width:clamp(76px,9vw,96px);height:auto;aspect-ratio:1/1;transform:rotate(9deg);filter:drop-shadow(0 8px 10px rgba(44,68,53,.28));transition:transform .5s var(--spring)}
.roles .role.b .role-badge{transform:rotate(-8deg)}
.roles .role h3{padding-right:clamp(74px,9vw,100px)}
@media (hover:hover){.roles .role:hover .role-badge{transform:rotate(0deg) scale(1.08)}}
@media (max-width:820px){.role-badge{top:-14px}}
@media (max-width:380px){.role-badge{width:66px;right:12px;top:-16px}.roles .role h3{font-size:1.4rem;padding-right:66px}}
.bhead{position:relative;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(20px,5vw,72px)}
.bhead>div:first-child{display:grid;gap:16px;min-width:0}
.bh-badge{position:relative;width:clamp(150px,19vw,230px);justify-self:center}
.bh-badge img{display:block;width:100%;height:auto;aspect-ratio:1/1;transform:rotate(8deg);filter:drop-shadow(0 18px 24px rgba(0,0,0,.35));animation:bhFloat 6s ease-in-out infinite}
@keyframes bhFloat{0%,100%{transform:rotate(8deg)}50%{transform:rotate(5deg) translateY(-8px)}}
.bh-badge .spk:nth-of-type(1){--s:28px;left:-8%;top:6%}
.bh-badge .spk:nth-of-type(2){--s:18px;right:-4%;top:2%;--d:1.2s;--c:var(--sage)}
.bh-badge .spk:nth-of-type(3){--s:22px;right:2%;bottom:-2%;--d:2.2s}
@media (max-width:820px){.bhead{grid-template-columns:minmax(0,1fr)}.bh-badge{order:-1;width:124px;justify-self:start}}
.timeline .tl .when{justify-self:start;background:var(--honey);color:var(--forest);font-size:.8rem;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.2;padding:4px 11px;border-radius:9px;transform:rotate(-2.5deg);transform-origin:left center;margin-bottom:4px}
.timeline .tl:nth-child(even) .when{transform:rotate(1.8deg)}

/* -- Organisations and Community: a quote is a bubble with the speaker underneath. Blue for a leader, green for the community, as elsewhere on the site -- */
.page .quote,.page .quote.alt{--bub:var(--sky);--tilt:-.5deg;position:relative;background:none;border:0;border-radius:0;padding:0;transform:rotate(var(--tilt));transition:transform .5s var(--spring)}
.page .quote.alt{--tilt:.5deg}
.recap .quote:not(.alt){--bub:var(--lime-pastel)}
.page .quote>span{display:block;position:relative;background:var(--bub);padding:clamp(42px,4vw,48px) clamp(22px,2.8vw,30px) clamp(20px,2.4vw,26px);border-radius:26px 26px 26px 8px}
.page .quote>span::before{content:"";position:absolute;left:clamp(20px,2.4vw,28px);top:clamp(14px,1.6vw,18px);width:30px;height:23px;background:var(--qm) no-repeat 0 0/contain;opacity:.2}
.page .quote cite{position:relative;margin:0;padding:22px 0 0 24px;font-weight:700;font-size:.9rem;line-height:1.35}
.page .quote cite::before{content:"";position:absolute;left:32px;top:-2px;width:22px;height:19px;background:var(--bub);clip-path:polygon(0 0,100% 0,0 100%)}
.recap .quote+.quote{margin-top:22px}
.recap .quote.alt{--tilt:.6deg}
.recap .quote.alt cite{text-align:right;padding:22px 24px 0 0}
.recap .quote.alt cite::before{left:auto;right:32px;clip-path:polygon(0 0,100% 0,100% 100%)}
@media (hover:hover){.page .quote:hover{transform:rotate(0deg) translateY(-4px)}}

/* -- Schools: "Start here" is a sticker -- */
.path3 .step-n{display:inline-block;background:var(--honey);color:var(--forest);font-size:.78rem;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.2;padding:4px 11px;border-radius:9px;transform:rotate(-2.5deg)}
.path3.mid .step-n{background:var(--cream);color:var(--forest);transform:rotate(2deg)}
.path3:nth-child(3) .step-n{transform:rotate(-1.8deg)}

/* -- Logos give a little tilt when you point at them -- */
.logo-real{transition:transform .45s var(--spring),border-color .2s}
@media (hover:hover){
  .logo-real:hover{transform:rotate(-2deg) translateY(-3px);border-color:var(--forest)}
  .pstrip .logo-real:nth-of-type(even):hover{transform:rotate(2deg) translateY(-3px)}
}

/* -- Call-to-action bands: two quiet sparkles (not on the Platform page, which stays plain) -- */
div.band::before,div.band::after{content:"";position:absolute;pointer-events:none;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twinkle 3.8s ease-in-out infinite}
div.band::before{width:26px;height:26px;right:clamp(14px,3vw,36px);top:clamp(12px,2.2vw,22px);background:var(--honey-dot)}
div.band::after{width:16px;height:16px;right:clamp(46px,7vw,92px);top:clamp(30px,4.2vw,50px);background:var(--sage-dot);animation-delay:1.4s}
#p-platform div.band::before,#p-platform div.band::after{display:none}

/* -- Home: the video slot in "See it in action" (a placeholder until the film is ready) -- */
.video.vph{aspect-ratio:16/9;background:var(--forest);box-shadow:0 34px 60px -38px rgba(20,40,30,.55)}
.video.vph img{object-position:50% 40%}
.video.vph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,68,53,.16),rgba(44,68,53,.1) 45%,rgba(44,68,53,.5));pointer-events:none}
.video.vph .cap-l{z-index:1}
.vph-play{position:absolute;left:50%;top:50%;z-index:1;width:clamp(64px,9vw,96px);aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;background:var(--honey);color:var(--forest);display:grid;place-items:center;box-shadow:0 0 0 clamp(4px,.6vw,6px) var(--cream),0 18px 34px -10px rgba(20,40,30,.6)}
.vph-play svg{width:40%;height:40%;fill:currentColor;margin-left:6%}
.vph-play::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--cream);animation:vphPulse 2.8s ease-out infinite}
@keyframes vphPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.75);opacity:0}}
/* narrow phones: a slightly smaller button and tag, so the tag never touches the button's ring */
@media (max-width:380px){
 .vph-play{width:56px}
 .video.vph .cap-l{font-size:.68rem;padding:5px 10px;left:10px;bottom:10px}
}

/* -- Contact and About: Keith and Rebekah share one tag, stuck across both photos -- */
.fteam.two{--g:clamp(12px,2.4vw,28px);gap:var(--g)}
.fteam.two>.fp:first-child{z-index:2}
.fteam.two .fp-ph+h3{margin-top:10px}
.fteam.two .fp-tag.duo{position:absolute;right:0;bottom:-7px;margin:0;z-index:2;white-space:nowrap;transform:translateX(calc(50% + var(--g)/2)) rotate(-2.5deg)}
@media (hover:hover){
 .fteam.two .fp:hover .fp-tag.duo{transform:translateX(calc(50% + var(--g)/2)) rotate(2deg) scale(1.07)}
 /* the tag belongs to both photos: it wiggles when either one is hovered (Keith's card also carries it up) */
 .fteam.two:has(.fp:nth-child(2):hover) .fp-tag.duo{transform:translateX(calc(50% + var(--g)/2)) rotate(2deg) scale(1.07)}
}

/* -- iPhone and iPad -- */
/* Safari on iOS only passes a tap to the page's shared click handler when the thing tapped is a button or link, has its own click handler, or shows a pointer cursor.
   A touch screen shows no cursor, so the zoomable pictures and the full-screen picture viewer can safely say "pointer" there and the taps always arrive. */
@media (hover:none){
 .zoomable,.lightbox,.lightbox img{cursor:pointer}
}


/* ==== Things that answer you =========================================================================================
   The site already looks playful (bubbles, tags, tape, sparkles). These are the small things that react when somebody does something:
   the check-up mammoth walks along your school's map as you answer, the results arrive with a sparkle, "Add to shortlist" pops,
   buttons press in. Nothing here adds text or a claim, nothing moves on its own, and every movement stops for anyone who asks their
   device for less of it (the global reduced-motion rule, and the script checks it too). */

/* -- Check-up, "Your school's map": the progress bar is a route. Dots ahead, a solid path behind, a mammoth on the way, a flag at the end -- */
.ck-side .ck-bar{--mw:42px;--p:0;position:relative;overflow:visible;height:10px;margin-top:30px;background:none;border-radius:0}
.ck-bar::before{content:"";position:absolute;inset:3px 0;background:radial-gradient(circle,var(--sage-deep) 1.5px,transparent 2px) 0 50%/11px 4px repeat-x}
.ck-bar i{position:relative;z-index:1}
.ck-bar::after{content:"";position:absolute;left:100%;bottom:calc(100% - 3px);margin-left:3px;width:16px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M3 21V2' stroke='%232C4435' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M3.6 2.6 14.6 6.6 3.6 11z' fill='%23E8AE45' stroke='%232C4435' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 100%/contain;transform-origin:3px 100%;pointer-events:none}
.ck-walker{position:absolute;z-index:2;left:calc(var(--p)*(100% - var(--mw)));bottom:calc(100% - 4px);width:var(--mw);transition:left .4s;pointer-events:none}
.ck-mam{display:block;width:100%;height:auto;transform:scaleX(-1);transform-origin:50% 100%}
@keyframes mamWalk{0%,100%{transform:scaleX(-1) translateY(0) rotate(0)}25%{transform:scaleX(-1) translateY(-3px) rotate(-5deg)}75%{transform:scaleX(-1) translateY(-3px) rotate(5deg)}}
@keyframes mamHop{0%,100%{transform:scaleX(-1) translateY(0) rotate(0)}30%{transform:scaleX(-1) translateY(-13px) rotate(-7deg)}55%{transform:scaleX(-1) translateY(-13px) rotate(7deg)}78%{transform:scaleX(-1) translateY(-2px) rotate(0)}}
@keyframes flagWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg) scale(1.12)}60%{transform:rotate(7deg) scale(1.12)}}
.ck-bar.walk .ck-mam{animation:mamWalk .34s ease-in-out 2}
.ck-bar.done .ck-mam{animation:mamHop .85s var(--spring) .35s}
.ck-bar.done::after{animation:flagWave .8s var(--spring) .5s}
/* all answered: "All 21 answered." and "Ready when you are." sit on two tidy lines (they broke after "you" before) */
.ck-bar.done~.prog b{display:block}
/* the six areas: a finished area's picture gives a wiggle (same one as the six areas on the home page) */
.ck-icons button.on img{animation:wiggle .7s var(--spring)}
/* answers pop a little when chosen */
@keyframes optPop{0%{transform:scale(.94)}55%{transform:scale(1.045)}100%{transform:none}}
.qrow .opts button.pop{animation:optPop .38s var(--spring)}

/* -- Check-up results: a sparkle burst from the score ring (the same four-point star as the other sparkles on the site) -- */
.score{position:relative}
.burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:3}
.burst i{position:absolute;left:0;top:0;width:var(--s,14px);height:var(--s,14px);margin:calc(var(--s,14px)/-2) 0 0 calc(var(--s,14px)/-2);background:var(--c,var(--honey));clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:burstOut 1.05s cubic-bezier(.12,.75,.3,1) var(--d,0s) forwards}
@keyframes burstOut{0%{opacity:1;transform:translate(0,0) scale(.3) rotate(0)}65%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r))}}

/* -- "Add to shortlist": a pop and a ring when it goes in, and the count in the header bounces -- */
.add{position:relative;transition:transform .2s var(--spring),background .15s,color .15s}
.ck-side #qsee{position:relative}
@keyframes addPop{0%{transform:scale(.9)}55%{transform:scale(1.07)}100%{transform:none}}
@keyframes addRing{0%{opacity:.95;inset:-4px}100%{opacity:0;inset:-16px}}
@keyframes countBump{0%,100%{transform:scale(1)}40%{transform:scale(1.5)}}
.add.pop{animation:addPop .45s var(--spring)}
.add.pop::after,.btn.ring::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--honey-dot);pointer-events:none;animation:addRing .7s ease-out forwards}
.list-btn .n.bump{animation:countBump .5s var(--spring)}

@media (prefers-reduced-motion:reduce){.add.pop::after,.btn.ring::after,.burst{display:none}}

/* -- Every button gives a little when you press it -- */
.btn:active,.add:active,.list-btn:active,.qrow .opts button:active,.ck-icons button:active{transform:scale(.96)}


/* ==== The home-page video ============================================================================================
   Without a link the cover is the "Video coming soon" picture (styles in fun.css). With a link (the setting at the top of the page file,
   or assets/video.js on the website folder) the play circle becomes a real button over the whole cover, and pressing it plays the video in place. */
.video [hidden]{display:none!important}
.vph-hit{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vph-hit:focus-visible{outline:3px solid var(--honey);outline-offset:-10px}
.vph-hit .vph-play{transition:transform .25s var(--spring)}
.vph-hit:hover .vph-play,.vph-hit:focus-visible .vph-play{transform:translate(-50%,-50%) scale(1.08)}
.vph-hit:active .vph-play{transform:translate(-50%,-50%) scale(.95)}
.video.is-live .cap-l{pointer-events:none}
.video .vp{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;border:0;background:#000}
.video video.vp{object-fit:contain}
.video.is-playing::after{display:none}
/* the privacy notice's line about where the video comes from: shown by the script only when there is one */
#privVideo[hidden],#privVideo [hidden]{display:none!important}


/* ==== After an enquiry is prepared: "Prefer to talk it through? Book a free call with Elfyn" ============================
   A quiet line under the buttons, so the booking page is one tap away wherever an email address is offered. On the dark panels (the Mammoth Challenge
   form and the Campfire form) the link takes the honey colour so it can be read. */
.msg .bookline{margin:12px 0 0;font-size:.94rem;color:inherit}
.msg .bookline + pre{margin-top:12px}
.dark .msg .bookline .textlink,.join .msg .bookline .textlink{color:var(--honey);border-bottom-color:var(--honey)}
.dark .msg .bookline .textlink:hover,.join .msg .bookline .textlink:hover{color:var(--cream);border-bottom-color:var(--cream)}


/* ==== After the map: the report, and from map to mindset =============================================================
   Three pieces. (1) The Schools page: "After the map comes the conversation", the four steps, three promises and a sample report you can
   flip through. The sample is built from a real mapping session with the school and every student taken out; its pages are made in the
   look of the real report (forest-green cover, sage band, cream pages, honey notes). It shows results only: the cover, the findings at a glance, the nine territories and the students' own words. (2) The Approach page: a
   dark "From map to mindset" band. (3) The home page: a short band between the real maps and the closing call.
   Every piece is live text, so Welsh works, and nothing needs a picture beyond the nine icons the page already carries. */

/* -- The four steps and three promises -- */
.after .head{margin-bottom:clamp(28px,4vw,44px)}
.after-flow{list-style:none;margin:0 0 clamp(36px,5vw,56px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,36px)}
.after-flow li{position:relative;display:grid;gap:8px;align-content:start}
.after-flow .af-k{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;background:var(--sage);color:var(--forest);display:grid;place-items:center;font:800 1.05rem var(--display)}
.after-flow li:last-child .af-k{background:var(--honey)}
.after-flow li:not(:last-child)::after{content:"";position:absolute;top:21px;left:52px;right:calc(-1*clamp(18px,2.6vw,36px) + 8px);border-top:3px dotted var(--sage)}
.after-flow h3{font-size:1.2rem;font-weight:800;margin-top:6px}
.after-flow p{color:var(--stone);font-size:.96rem}
.after-notes{list-style:none;margin:0 0 clamp(48px,7vw,84px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.after-notes li{border-top:3px solid var(--forest);padding-top:14px;display:grid;gap:6px;align-content:start}
.after-notes b{font:700 1.05rem/1.25 var(--display);color:var(--forest)}
.after-notes p{color:var(--stone);font-size:.96rem}
@media (max-width:900px){
 .after-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .after-flow li::after{display:none}
}
@media (max-width:640px){
 .after-flow{grid-template-columns:minmax(0,1fr);gap:20px}
 .after-flow li{grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:4px}
 .after-flow .af-k{grid-row:1 / span 2}
 .after-flow h3{margin-top:0;align-self:center}
 .after-notes{grid-template-columns:minmax(0,1fr)}
}

/* -- The viewer: a list of the pages beside a stack of paper -- */
.rs-view{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:clamp(28px,4.4vw,64px);align-items:start}
.rs-side{display:grid;gap:14px;align-content:start}
.rs-side h3{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800}
.rs-side>p{color:var(--stone)}
.rs-tabs{display:grid;gap:2px;margin-top:6px}
.rs-tab{appearance:none;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;row-gap:1px;padding:10px 12px;border-radius:14px;transition:background .2s}
.rs-tab:hover{background:var(--sage-soft)}
.rs-tab[aria-selected="true"]{background:var(--linen)}
.rs-tn{grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;background:var(--sage-pastel);color:var(--forest);display:grid;place-items:center;font:800 .92rem var(--display);transition:background .2s,color .2s}
.rs-tab[aria-selected="true"] .rs-tn{background:var(--forest);color:var(--cream)}
.rs-tt{font:600 1rem/1.25 var(--display);color:var(--forest);align-self:end}
.rs-td{font-size:.86rem;line-height:1.4;color:var(--stone);align-self:start}
.rs-tab:focus-visible{outline:3px solid var(--forest);outline-offset:2px}

.rs-main{min-width:0}
.rs-stack{position:relative;display:grid;isolation:isolate;max-width:640px;margin-inline:auto;touch-action:pan-y}
.rs-stack::before,.rs-stack::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px;border:1px solid var(--line)}
.rs-stack::before{background:#F3E9D3;transform:translate(11px,11px) rotate(.7deg)}
.rs-stack::after{background:#F9F1DF;transform:translate(5px,5px) rotate(-.5deg)}
.rs-stamp{position:absolute;z-index:3;top:-16px;right:-6px;background:var(--honey);color:var(--forest);font:700 .8rem/1.2 var(--display);padding:6px 12px;border-radius:9px;transform:rotate(3deg);box-shadow:0 2px 0 rgba(38,53,43,.14);pointer-events:none}

.rs{grid-area:1 / 1;min-width:0;display:flex;flex-direction:column;gap:10px;background:#FFFDF8;border:1px solid var(--line);border-radius:10px;padding:clamp(18px,4.4vw,34px);
 font-size:.92rem;line-height:1.5;color:var(--ink);box-shadow:0 22px 38px -26px rgba(38,53,43,.55);
 visibility:hidden;opacity:0;transform:translateX(16px);transition:opacity .3s,transform .3s var(--spring),visibility 0s .3s}
.rs[data-pos="before"]{transform:translateX(-16px)}
.rs.on{visibility:visible;opacity:1;transform:none;transition:opacity .3s,transform .3s var(--spring),visibility 0s}
.rs p,.rs li{text-wrap:pretty}
.rs-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rs-eb{font:600 .66rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--sage-ink)}
.rs-logo{height:22px;width:auto;flex:none}
.rs-t{font:800 clamp(1.3rem,3.2vw,1.75rem)/1.1 var(--display);letter-spacing:-.02em;color:var(--forest);margin:6px 0 2px;text-wrap:balance}
.rs-lead{font-size:.92rem}
.rs-sh{font:700 1rem/1.3 var(--display);color:var(--forest);margin:10px 0 0}
.rs-mini{font:600 .62rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin:6px 0 0}
.rs-f{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:.7rem;color:var(--stone)}
.rs-pg{white-space:nowrap;flex:none}
.rs>.rs-h+.rs-t{margin-top:10px}
.rs-note{background:var(--honey-soft);border-radius:10px;padding:11px 14px;font-size:.86rem;line-height:1.5}
.rs-note b{color:var(--forest)}

/* page 1: the cover */
.rs-cover{padding:0;gap:0;background:var(--forest);color:var(--cream);overflow:hidden;border-color:var(--forest)}
.rs-cv-top{padding:clamp(20px,5vw,36px) clamp(20px,5vw,36px) max(19%,56px);display:grid;gap:12px;align-content:start}
.rs-cv-logo{height:40px;width:auto;justify-self:start;margin-bottom:10px}
.rs-cv-tag{font:600 .64rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.rs-cv-h{font:800 clamp(1.9rem,5.6vw,2.7rem)/1.04 var(--display);letter-spacing:-.025em;color:var(--cream);margin:0;text-wrap:balance}
.rs-cv-p{color:#E3EBD8;max-width:36ch;font-size:.98rem}
/* the lower, sage half: the mammoth steps up over the edge of the green, the facts about the report sit beside it, the note sits at the foot */
.rs-cv-bot{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,min(48%,230px)) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:clamp(16px,3.6vw,28px);background:var(--sage);color:var(--forest);padding:clamp(18px,4vw,26px) clamp(20px,5vw,36px) clamp(18px,4vw,28px)}
.rs-cv-mam{grid-column:1;grid-row:1;position:relative;z-index:1;width:100%;height:auto;margin-top:-37.3%;
 filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 10px rgba(20,34,26,.28))}
.rs-cv-meta{grid-column:2;grid-row:1;margin:0;display:grid;gap:11px;align-content:start}
.rs-cv-meta dt{font:700 .58rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--forest);opacity:.78}
.rs-cv-meta dd{margin:2px 0 0;font-size:.92rem;line-height:1.35;font-weight:700;color:var(--forest)}
.rs-cv-note{grid-column:1 / -1;grid-row:3;margin:0;padding-top:18px;font-size:.76rem;line-height:1.5;max-width:56ch}

/* page 2: at a glance */
.rs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:6px 0 0;border-top:2px solid var(--forest)}
.rs-stats>div{padding:10px 10px 4px 0;border-right:1px solid var(--line);margin-right:10px}
.rs-stats>div:last-child{border-right:0;margin-right:0}
.rs-stats dt{font:800 clamp(1.5rem,4vw,2rem)/1 var(--display);color:var(--forest);letter-spacing:-.03em}
.rs-stats dt i{font:600 .78rem var(--display);color:var(--stone);font-style:normal;letter-spacing:0;margin-left:1px}
.rs-stats dd{margin:4px 0 0;font-size:.78rem;line-height:1.4;color:var(--stone)}
.rs-five,.rs-bars,.rs-cards,.rs-chips{list-style:none;margin:0;padding:0}
.rs-five li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:9px 0;border-top:1px solid var(--line)}
.rs-five img{width:34px;height:34px;object-fit:contain}
.rs-five b{display:block;font:700 .92rem/1.3 var(--display);color:var(--forest)}
.rs-five span{display:block;font-size:.82rem;line-height:1.45}

/* page 3: the nine territories */
.rs-bars{display:grid;gap:7px;margin:6px 0}
.rs-bars li{display:grid;grid-template-columns:28px minmax(0,8.4em) minmax(0,1fr) 2.2ch;align-items:center;gap:8px 10px;padding:3px 0}
.rs-bars img{width:28px;height:28px;object-fit:contain}
.rs-bars .rs-bn{font:600 .84rem/1.2 var(--display);color:var(--forest)}
.rs-bars .rs-bar{position:relative;height:17px;border-radius:4px;background:var(--sage-soft)}
.rs-bars .rs-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v)/21*100%);background:var(--sage-deep);border-radius:4px}
.rs-bars .rs-bv{font:700 .86rem var(--display);color:var(--forest);text-align:right}

/* page 4: in their words */
.rs-cards{display:grid;gap:10px}
.rs-card{border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:#fff}
.rs-card-h{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center}
.rs-card-h img{width:36px;height:36px;object-fit:contain}
.rs-card-h b{display:block;font:700 .98rem/1.2 var(--display);color:var(--forest)}
.rs-card-h span{display:block;font-size:.78rem;line-height:1.3;color:var(--stone)}
.rs-card-h em{font:800 1.2rem/1 var(--display);color:var(--forest);font-style:normal;white-space:nowrap}
.rs-card-h em i{font:600 .72rem var(--display);color:var(--stone);font-style:normal}
.rs-card>p:not(.rs-mini){font-size:.82rem;line-height:1.45}
.rs-chips{display:flex;flex-wrap:wrap;gap:5px;margin:3px 0 2px}
.rs-chips li{background:var(--sage-pastel);color:var(--forest);border-radius:999px;padding:1px 10px;font-size:.76rem;line-height:1.6;font-style:italic}

/* the controls under the paper */
.rs-ctl{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:clamp(22px,3vw,30px)}
.rs-ctl button{appearance:none;width:48px;height:48px;border-radius:50%;border:2px solid var(--forest);background:var(--cream);color:var(--forest);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,color .2s,transform .2s var(--spring)}
.rs-ctl button:hover:not(:disabled){background:var(--forest);color:var(--cream)}
.rs-ctl button:active:not(:disabled){transform:scale(.93)}
.rs-ctl button:disabled{opacity:.32;cursor:default}
.rs-count{font:600 .95rem var(--display);color:var(--stone);min-width:4.2em;text-align:center}
.rs-count b{color:var(--forest);font-weight:800}

/* how to ask for a full sample */
.rs-more{margin-top:clamp(40px,5.5vw,64px)}
.rs-ask-cta{background:var(--honey-soft);border-radius:var(--r);padding:clamp(22px,3vw,34px) clamp(22px,4vw,44px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px clamp(24px,4vw,56px)}
.rs-ask-cta p{flex:1 1 320px;max-width:46ch;font:600 clamp(1.05rem,1.8vw,1.25rem)/1.4 var(--display);color:var(--forest)}
.rs-ask-cta .ctas{display:flex;flex-wrap:wrap;gap:12px}

@keyframes rsIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* narrower screens */
@media (max-width:960px){
 .rs-view{grid-template-columns:minmax(0,1fr);gap:26px}
 .rs-side{justify-items:center;text-align:center}
 .rs-side>p{max-width:56ch}
 .rs-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,44px);justify-content:center;gap:6px;margin-top:2px}
 .rs-tab{display:block;padding:0;border-radius:50%}
 .rs-tn{grid-row:auto;width:100%;height:auto;aspect-ratio:1;font-size:1rem}
 .rs-tab:hover{background:none}
 .rs-tab[aria-selected="true"]{background:none}
 .rs-tt,.rs-td{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:620px){
 .rs-stack{display:block}
 .rs{display:none}
 .rs.on{display:flex;animation:rsIn .34s var(--spring)}
 .rs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .rs-stats>div{margin-right:0;padding-right:10px}
 .rs-stats>div:nth-child(2){border-right:0}
 .rs-stats>div:nth-child(n+3){border-top:1px solid var(--line);margin-top:8px}
 .rs-bars li{grid-template-columns:26px minmax(0,7.4em) minmax(0,1fr) 2.2ch}
 .rs-stamp{right:0}
}
@media (max-width:380px){
 .rs{padding:16px 14px}
 .rs-card-h{grid-template-columns:30px minmax(0,1fr) auto;gap:9px}
 .rs-card-h img{width:30px;height:30px}
 .rs-f{flex-direction:column;gap:2px}
}

/* -- From map to mindset (the Approach page) -- */
.mind .head{margin-bottom:clamp(30px,4.4vw,52px)}
.mind-three{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vw,52px)}
.mind-three li{position:relative;display:grid;gap:8px;align-content:start;justify-items:start}
.mind-three li:not(:last-child)::after{content:"";position:absolute;top:48px;left:116px;right:calc(-1*clamp(22px,3.4vw,52px) + 14px);border-top:3px dotted rgba(171,192,133,.5)}
.mind .st,.mtm .st{position:relative;z-index:1;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 6px rgba(171,192,133,.24)}
.mind .st img,.mtm .st img{width:auto;height:54px;max-width:62px;object-fit:contain}
.mind-three h3{color:var(--cream);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:800;margin-top:12px;text-wrap:balance}
.mind-three b{font:700 .88rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--honey)}
.mind-three p{color:var(--mist);max-width:34ch}
.mind-end{margin-top:clamp(34px,5vw,56px);max-width:62ch;color:var(--mist);font-size:1.08rem;display:grid;gap:12px;justify-items:start}
.mind-end .textlink{color:var(--honey);border-bottom-color:var(--honey)}
.mind-end .textlink:hover{color:var(--cream);border-bottom-color:var(--cream)}
@media (max-width:860px){
 .mind-three{grid-template-columns:minmax(0,1fr);gap:30px}
 .mind-three li{grid-template-columns:96px minmax(0,1fr);column-gap:20px;align-items:start}
 .mind-three li:not(:last-child)::after{display:none}
 .mind .st{grid-row:1 / span 3}
 .mind-three h3{margin-top:4px}
}
@media (max-width:480px){
 .mind-three li{grid-template-columns:76px minmax(0,1fr);column-gap:16px}
 .mind .st{width:76px;height:76px}
 .mind .st img{height:44px;max-width:50px}
}

/* -- The home page band -- */
.mtm-band{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,68px);align-items:center;background:var(--linen);border-radius:calc(var(--r)*1.5);padding:clamp(28px,5vw,60px)}
.mtm-tx{display:grid;gap:16px;justify-items:start}
.mtm-tx h2{font-size:clamp(1.9rem,3.8vw,2.8rem)}
html[lang="cy"] .mtm-tx h2{font-size:clamp(1.9rem,3.8vw,2.8rem)}   /* the general Welsh h2 size would otherwise win here: keep the two languages the same size */
.mtm-tx>p{color:var(--stone);max-width:58ch}
.mtm-tx .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.mtm-stones{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,3vw,36px);position:relative}
.mtm-stones::before{content:"";position:absolute;left:14%;right:14%;top:calc(clamp(78px,9vw,104px)/2 + 18px);border-top:3px dotted var(--sage);z-index:0}
.mtm-stones li{position:relative;display:grid;justify-items:center;gap:4px;text-align:center;min-width:0;flex:0 1 auto}
.mtm-stones li:nth-child(1){margin-top:18px}
.mtm-stones li:nth-child(2){margin-top:0}
.mtm-stones li:nth-child(3){margin-top:30px}
.mtm .st{width:clamp(78px,9vw,104px);height:clamp(78px,9vw,104px);box-shadow:0 0 0 6px var(--sage-soft),0 14px 26px -16px rgba(38,53,43,.55)}
.mtm .st img{height:52%}
.mtm-stones b{font:700 .98rem var(--display);color:var(--forest);margin-top:8px}
.mtm-stones li>span:not(.st){font-size:.86rem;color:var(--stone)}
@media (max-width:900px){
 .mtm-band{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
 .mtm-stones{gap:8px}
 .mtm .st{width:72px;height:72px}
 .mtm-stones::before{top:54px}
}


/* ==== Partners page: the same playful touches as the rest of the site =====================================================
   The other pages already have hand-lettered tags, taped cards, stickers, sparkles and things that hop when you point at them.
   The Partners page was still plain, so it gets the same few devices, always around the real content: the "three ways" labels are
   tags, each partner's logo is a little sticker taped to its card, the "We've worked with" wall is pinned up a bit crooked, the
   "How partnering works" steps are tags, and the page finally shows the village it keeps talking about (a few of the nine icons on a
   dotted path, a campfire that flickers, a mammoth that strolls through and turns round to face them). Nothing here adds text or a claim, nothing is needed to read the
   page, and every movement stops for anyone who asks their device for less of it (the global reduced-motion rule, and the script
   checks it too). Everything is scoped to #p-partners. */

/* -- Three ways to partner: the label is a tag, the cards lift, the dark card gets two sparkles -- */
#p-partners .way{--tilt:0deg;--i:0;position:relative;transition:transform .5s var(--spring)}
#p-partners .way:nth-child(2){--i:1}
#p-partners .way:nth-child(3){--i:2}
#p-partners .way .k{justify-self:start;background:var(--honey);color:var(--forest);font-size:.82rem;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.2;padding:5px 12px;border-radius:9px;transform:rotate(-3deg);transform-origin:left center;transition:transform .45s var(--spring)}
#p-partners .way:nth-child(2) .k{transform:rotate(2.2deg)}
#p-partners .way:nth-child(3) .k{transform:rotate(-1.8deg)}
#p-partners .way:nth-child(2)::before,#p-partners .way:nth-child(2)::after{content:"";position:absolute;pointer-events:none;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twinkle 3.8s ease-in-out infinite}
#p-partners .way:nth-child(2)::before{width:26px;height:26px;right:clamp(16px,2.4vw,28px);top:clamp(16px,2.2vw,24px);background:var(--honey-dot)}
#p-partners .way:nth-child(2)::after{width:16px;height:16px;right:clamp(50px,5.4vw,66px);top:clamp(44px,4.6vw,54px);background:var(--honey);animation-delay:1.4s}
@media (hover:hover){
 #p-partners .way:hover{transform:translateY(-6px)}
 #p-partners .way:hover .k{transform:rotate(0deg) scale(1.07)}
}
#p-partners .ways.pre .way{opacity:0}
#p-partners .ways.in .way{animation:fpIn .65s var(--spring) backwards;animation-delay:calc(var(--i,0)*120ms)}

/* -- Who we partner with: little stickers in a few of the site's soft colours, each a touch crooked -- */
#p-partners .who4 span{--tilt:0deg;--i:0;transform:rotate(var(--tilt));transition:transform .5s var(--spring)}
#p-partners .who4 span:nth-child(4n+1){--tilt:-1.2deg}
#p-partners .who4 span:nth-child(4n+2){--tilt:1deg;background:var(--honey-pastel)}
#p-partners .who4 span:nth-child(4n+3){--tilt:-.8deg;background:var(--sky)}
#p-partners .who4 span:nth-child(4n){--tilt:1.2deg;background:var(--lime-pastel)}
#p-partners .who4 span:nth-child(2){--i:1}
#p-partners .who4 span:nth-child(3){--i:2}
#p-partners .who4 span:nth-child(4){--i:3}
#p-partners .who4 span:nth-child(5){--i:4}
#p-partners .who4 span:nth-child(6){--i:5}
#p-partners .who4 span:nth-child(7){--i:6}
@media (hover:hover){#p-partners .who4 span:hover{transform:rotate(0deg) translateY(-3px) scale(1.05)}}
#p-partners .who4.pre span{opacity:0}
#p-partners .who4.in span{animation:fpIn .55s var(--spring) backwards;animation-delay:calc(var(--i,0)*70ms)}

/* -- Our partners: the village. A few of the nine icons stand on a dotted path; the campfire flickers, the mammoth strolls through from the left and turns round to face the others, and a tap makes them hop -- */
#p-partners .vs{--vh:clamp(52px,8.2vw,96px);position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(4px,1.6vw,24px);margin:clamp(8px,1.4vw,18px) 0 clamp(26px,3.2vw,38px);padding:0 clamp(2px,1.4vw,20px) 9px;overflow-x:clip}
#p-partners .vs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:radial-gradient(circle,var(--sage-deep) 1.5px,transparent 2px) 0 50%/11px 4px repeat-x;opacity:.8}
#p-partners .vs-i{--tilt:0deg;--i:0;position:relative;display:block;flex:0 0 auto;line-height:0}
#p-partners .vs-i img{position:relative;display:block;height:var(--vh);width:auto;max-width:none;transform-origin:50% 100%}
#p-partners .vs-i.sm img{height:calc(var(--vh)*.76)}
#p-partners .vs-i.camp img{height:calc(var(--vh)*.84)}
#p-partners .vs-i.mam img{height:calc(var(--vh)*.9)}
#p-partners .vs-i:nth-child(2){--i:1}
#p-partners .vs-i:nth-child(3){--i:2}
#p-partners .vs-i:nth-child(4){--i:3}
#p-partners .vs-i:nth-child(5){--i:4}
#p-partners .vs-i:nth-child(6){--i:5}
/* the campfire: a warm pool of light that breathes, a few flickers, and two sparks */
#p-partners .vs-i.camp::before{content:"";position:absolute;left:50%;bottom:6%;width:210%;aspect-ratio:1/1;transform:translateX(-50%);background:radial-gradient(circle,rgba(243,201,121,.6) 0,rgba(243,201,121,.22) 38%,transparent 66%);pointer-events:none;animation:vsGlow 2.6s ease-in-out infinite}
#p-partners .vs-i.camp img{animation:campFlick 2.4s ease-in-out infinite}
#p-partners .vs-i.camp::after{content:"";position:absolute;right:-6px;top:6%;width:14px;height:14px;background:var(--honey-dot);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);pointer-events:none;animation:twinkle 3.2s ease-in-out infinite}
@keyframes campFlick{0%,100%{transform:scale(1,1) rotate(0deg)}22%{transform:scale(1.04,1.08) rotate(-1.6deg)}48%{transform:scale(.97,1.02) rotate(1.2deg)}74%{transform:scale(1.02,1.06) rotate(-.8deg)}}
@keyframes vsGlow{0%,100%{opacity:.55;transform:translateX(-50%) scale(.94)}50%{opacity:1;transform:translateX(-50%) scale(1.04)}}
/* things you point at give a wiggle (the same one as the six areas on the home page); a tap or click makes them hop */
@media (hover:hover){#p-partners .vs-i.hut:hover img,#p-partners .vs-i.tree:hover img{animation:wiggle .6s var(--spring)}
 #p-partners .vs-i.camp:hover::before{animation-duration:1.2s}
 #p-partners .vs-i.camp:hover img{animation-duration:1s}}
@keyframes vsHop{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-15px) rotate(-6deg)}55%{transform:translateY(-15px) rotate(6deg)}78%{transform:translateY(-2px) rotate(0)}}
@keyframes vsBob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(-3deg)}75%{transform:translateY(-4px) rotate(3deg)}}
/* the mammoth starts at the left end of the strip (left in % is a share of the strip's own width, so it works at every width and never leaves the strip or the screen),
   walks to the right end bobbing as it goes, then turns round (the picture faces left, so it is flipped while it walks right) */
@keyframes vsStroll{from{left:calc(-100% + var(--mw));opacity:0}12%{opacity:1}to{left:0;opacity:1}}
@keyframes vsTurn{0%,86.6%{scale:-1 1}100%{scale:1 1}}
/* arriving: each one pops up in turn, then the mammoth strolls through, bobbing as it goes */
#p-partners .vs.pre .vs-i{opacity:0}
#p-partners .vs.in .vs-i{animation:fpIn .6s var(--spring) backwards;animation-delay:calc(var(--i,0)*90ms)}
#p-partners .vs-i.mam{--mw:calc(var(--vh)*.964)}
#p-partners .vs-i.mam .mb{display:block;transform-origin:50% 100%}
#p-partners .vs.in .vs-i.mam{animation:vsStroll 2.6s cubic-bezier(.4,.05,.4,1) .7s backwards}
#p-partners .vs.in .vs-i.mam .mb{animation:vsBob .52s ease-in-out .7s 5 backwards,vsTurn 3s linear .7s backwards}
#p-partners .vs.in .vs-i.hop img{animation:vsHop .7s var(--spring)}
/* a touch screen shows no cursor, and iPhone and iPad only pass a tap on when something shows one */
#p-partners .vs-i{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
#p-partners .vs-i img{-webkit-user-drag:none}
/* phones: five of the seven, a little smaller */
@media (max-width:620px){
 #p-partners .vs{--vh:clamp(50px,17vw,72px)}
 #p-partners .vs-i.drop{display:none}
}

/* -- Our partners: every logo is a sticker taped to its card; the label is a tag; the card lifts when you point at it -- */
#p-partners .plist .pcard{--tilt:0deg;--i:0;position:relative;transition:transform .5s var(--spring),border-color .2s,box-shadow .35s}
#p-partners .plist .pcard:nth-child(even){--i:1}
#p-partners .plist .pcard:not(.pcard-cta)::before{content:"";position:absolute;z-index:1;left:calc(22px + 52px - 30px);top:10px;width:60px;height:20px;background:rgba(243,201,121,.85);border-radius:3px;transform:rotate(-4deg);box-shadow:0 1px 2px rgba(44,68,53,.18);pointer-events:none}
#p-partners .plist .pcard:nth-child(even):not(.pcard-cta)::before{transform:rotate(3deg)}
#p-partners .plist .pcard .lg.logo-img{transform:rotate(-2.4deg);transition:transform .5s var(--spring)}
#p-partners .plist .pcard:nth-child(even) .lg.logo-img{transform:rotate(2deg)}
#p-partners .plist .pcard .how{background:var(--honey);color:var(--forest);font-size:.8rem;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.2;padding:4px 11px;transform:rotate(-2deg);transform-origin:left center;transition:transform .45s var(--spring)}
#p-partners .plist .pcard:nth-child(even) .how{transform:rotate(1.8deg)}
@media (hover:hover){
 #p-partners .plist .pcard:not(.pcard-cta):hover{transform:translateY(-5px);border-color:var(--sage-deep);box-shadow:0 20px 30px -24px rgba(44,68,53,.5)}
 #p-partners .plist .pcard:hover .lg.logo-img{transform:rotate(0deg) scale(1.07)}
 #p-partners .plist .pcard:hover .how{transform:rotate(0deg) scale(1.07)}
}
#p-partners .plist .pcard.pre{opacity:0}
#p-partners .plist .pcard.in{animation:fpIn .65s var(--spring) backwards;animation-delay:calc(var(--i,0)*90ms)}
/* "Your organisation?": there is room around the campfire, so the "+" is a little campfire that flickers and throws sparks when you point at it */
#p-partners .pcard-cta .lg.camp{position:relative;overflow:visible;transform:rotate(-2deg);transition:transform .5s var(--spring)}
#p-partners .pcard-cta .lg.camp img{display:block;width:auto;height:52px;max-width:none;transform-origin:50% 100%;animation:campFlick 2.4s ease-in-out infinite}
#p-partners .pcard-cta .lg.camp::before,#p-partners .pcard-cta .lg.camp::after{content:"";position:absolute;pointer-events:none;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twinkle 3.4s ease-in-out infinite}
#p-partners .pcard-cta .lg.camp::before{width:14px;height:14px;right:8px;top:5px;background:var(--honey-dot)}
#p-partners .pcard-cta .lg.camp::after{width:9px;height:9px;left:11px;top:11px;background:var(--sage-dot);animation-delay:1.3s}
@media (hover:hover){#p-partners .pcard-cta:hover .lg.camp{transform:rotate(0deg) scale(1.06)}}

/* -- We've worked with: pinned up a little crooked; each tile straightens and lifts when you point at it, and they pop in like a wave -- */
#p-partners .wall span{--tilt:0deg;--i:0;transform:rotate(var(--tilt));transition:transform .5s var(--spring),border-color .2s,box-shadow .35s}
#p-partners .wall span:nth-child(4n+1){--tilt:-1.1deg}
#p-partners .wall span:nth-child(4n+2){--tilt:.8deg}
#p-partners .wall span:nth-child(4n+3){--tilt:-.6deg}
#p-partners .wall span:nth-child(4n){--tilt:1deg}
#p-partners .wall span:nth-child(5n+2){--i:1}
#p-partners .wall span:nth-child(5n+3){--i:2}
#p-partners .wall span:nth-child(5n+4){--i:3}
#p-partners .wall span:nth-child(5n){--i:4}
@media (hover:hover){#p-partners .wall span:hover{transform:rotate(0deg) translateY(-6px) scale(1.04);border-color:var(--forest);box-shadow:0 18px 26px -20px rgba(44,68,53,.5)}}
#p-partners .wall.pre span{opacity:0}
#p-partners .wall.in span{animation:fpIn .6s var(--spring) backwards;animation-delay:calc(var(--i,0)*70ms)}

/* -- How partnering works: the step labels are tags and the four cards pop in one after another -- */
#p-partners .process.four .proc{--tilt:0deg;--i:0;transition:transform .5s var(--spring)}
#p-partners .process.four .proc:nth-child(2){--i:1}
#p-partners .process.four .proc:nth-child(3){--i:2}
#p-partners .process.four .proc:nth-child(4){--i:3}
#p-partners .process.four .proc .n{justify-self:start;display:inline-block;background:var(--honey);color:var(--forest);font-size:.78rem;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.2;padding:4px 11px;border-radius:9px;transform:rotate(-2.5deg);transform-origin:left center;transition:transform .45s var(--spring)}
#p-partners .process.four .proc:nth-child(even) .n{transform:rotate(1.8deg)}
@media (hover:hover){
 #p-partners .process.four .proc:hover{transform:translateY(-5px)}
 #p-partners .process.four .proc:hover .n{transform:rotate(0deg) scale(1.07)}
}
#p-partners .process.four.pre .proc{opacity:0}
#p-partners .process.four.in .proc{animation:fpIn .65s var(--spring) backwards;animation-delay:calc(var(--i,0)*100ms)}