/* natureconnect.earth, our own site. The look of the old Avada site (measured from it, 23 Oct 2026), built clean.
   avada-vars.css carries the old palette under its old names, so the pages written for the old site keep their colours. */
@import url(/fonts.css);
@import url(/avada-vars.css);

:root{
  --indigo:#2b3e78; --ink:#231f20; --text:#2b3e78; --muted:#59667d; --green:#65bc7b; --green-d:#2cbc63; --cyan:#47d2f3;
  --soft:#f4f6f8; --line:#e8ebef; --site:1248px; --gutter:16px;
  --awb-color7:#2b3e78;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:400 18px/1.6 Poppins,Arial,Helvetica,sans-serif;letter-spacing:.008em;overflow-x:hidden}
img,video,iframe{max-width:100%}
img{height:auto;display:block}
a{color:var(--indigo)}
p{margin:0 0 18px;color:var(--text)}
h1,h2,h3,h4,h5,h6{font-family:Poppins,Arial,sans-serif;color:var(--indigo);margin:0 0 .6em;line-height:1.15}
h1{font-size:52px;font-weight:700;letter-spacing:-.036em}
h2{font-size:38px;font-weight:700;letter-spacing:-.03em}
h3{font-size:28px;font-weight:700;letter-spacing:-.02em}
h4{font-size:22px;font-weight:600}
h5{font-size:18px;font-weight:600}
ul,ol{color:var(--text);padding-left:1.3em;margin:0 0 18px}
li{margin:0 0 6px}
blockquote{margin:24px 0;padding:4px 0 4px 22px;border-left:4px solid var(--cyan);color:var(--indigo);font-weight:600}
table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:16px}
td,th{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:8px 12px}

/* header */
.hd{background:#fff;position:relative;z-index:50}
.hd-in{max-width:var(--site);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;gap:24px}
.hd-logo img{width:100px;height:auto}
.nav{margin-left:auto}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.nav li{margin:0;position:relative}
.nav a{display:flex;align-items:center;gap:6px;padding:10px 14px;text-decoration:none;color:var(--indigo);font-size:16px;font-weight:500}
.nav a:hover,.nav a[aria-current=page]{color:var(--green-d)}
.nav .sub{display:none;position:absolute;left:0;top:100%;min-width:240px;background:#fff;border-top:3px solid var(--green);box-shadow:0 10px 30px rgba(35,31,32,.12);list-style:none;margin:0;padding:6px 0}
.nav .sub a{font-size:14px;font-weight:400;padding:10px 18px}
.nav .sub a:hover{background:#f9fafb}
.nav li:hover>.sub,.nav li:focus-within>.sub{display:block}
.chev{width:10px;height:10px;flex:none}
.menu-btn{display:none;margin-left:auto;border:0;background:var(--indigo);color:#fff;width:46px;height:42px;border-radius:6px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:22px;height:2.5px;background:#fff;border-radius:2px;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}.menu-btn span::before{top:-7px}.menu-btn span::after{top:7px}

/* sections and columns, laid out as the old pages were */
.sec{position:relative;background-size:cover;background-position:center}
.sec.fixed{background-attachment:fixed}
.row{max-width:var(--site);margin:0 auto;padding:0 var(--gutter);display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:4%}
.sec.full .row{max-width:none;padding:0}
.col{flex:0 0 var(--w);max-width:var(--w);min-width:0;margin:20px 0;display:flex;flex-direction:column;background-size:cover;background-position:center}
.row.gap .col{flex-basis:calc(var(--w) - 4% * (1 - var(--wf)));max-width:calc(var(--w) - 4% * (1 - var(--wf)))}
.col.center{align-self:center}
.col.shadow{box-shadow:0 6px 24px rgba(35,31,32,.08);border-radius:10px;overflow:hidden}
.it{margin:0 0 16px}.it:last-child{margin-bottom:0}
.it-title.center{text-align:center}.it-title.right{text-align:right}
.it-title h1,.it-title h2,.it-title h3,.it-title h4{margin:0}
.it-img img{width:100%;border-radius:6px}
.it-img.ratio img{aspect-ratio:var(--r);object-fit:cover;object-position:50% 35%}
.it-img.masked img{border-radius:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* a section's eyebrow above its heading */
.sec-eye{display:block;font:700 13px/1.2 Poppins,sans-serif;letter-spacing:.22em;text-transform:uppercase;margin:0 0 14px}
/* the staff page: one grid, every person the same */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:40px 28px;margin-top:34px}
.person{margin:0;text-align:center}
/* the teardrop frame: a fixed shape; the photo inside it is placed by three numbers and is never cut or stretched */
.tframe{position:relative;display:block;width:180px;aspect-ratio:480/579;margin:0 auto 16px;overflow:hidden;background:#e9eef4;-webkit-mask:url(/masks/mask-10.svg) center/100% 100% no-repeat;mask:url(/masks/mask-10.svg) center/100% 100% no-repeat}
.tframe img{position:absolute;max-width:none;height:auto;display:block}
.tframe img.tf-fill{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.person b{display:block;font:600 18px/1.3 Poppins,sans-serif;color:var(--indigo);letter-spacing:-.01em}
.person span{display:block;font-size:14.5px;line-height:1.4;color:#5d7280;margin-top:5px}
@media (max-width:860px){.people{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}.tframe{width:140px}.person b{font-size:16px}.person span{font-size:13px}}
/* a picture-title-button box (annual reports and the like) as our card: the whole picture on a soft panel, never cut */
.col-card{margin:14px 0}
.rcard{background:#fff;border:1px solid #dde6ea;border-radius:25px;box-shadow:0 8px 20px rgba(43,62,120,.10);overflow:hidden;display:flex;flex-direction:column;height:100%;transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s}
.rcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(43,62,120,.16)}
.row:has(> .col-card){justify-content:space-between}
.rcard-img{position:relative;display:block;aspect-ratio:1/1;background:#f2f4fa;border-bottom:4px solid #46D1F1}
.rcard-img img{position:absolute;inset:22px;width:calc(100% - 44px);height:calc(100% - 44px);object-fit:contain;filter:drop-shadow(0 10px 18px rgba(20,26,36,.18))}
.rcard-in{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.rcard.photo .rcard-img{aspect-ratio:16/10}
.rcard.photo .rcard-img img{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:none}
.rcard .eyebrow{color:#1682a0}.rcard .drop{background:#46D1F1}
.rcard h3{font-size:21px;line-height:1.25;font-weight:700;color:var(--indigo);margin:0 0 18px;letter-spacing:-.015em}
.rcard-btns{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
.rbtn{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:11px 22px;font:600 15px/1.2 Poppins,sans-serif;text-decoration:none;background:var(--indigo);color:#fff;border:2px solid var(--indigo);transition:background .15s,color .15s}
.rbtn:hover{background:#1a2750;border-color:#1a2750}
.rbtn.pdf{background:#fff;color:var(--indigo)}
.rbtn.pdf:hover{background:#f2f4fa}
.it-img figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:43px;padding:15px 36px;font:600 18px/1.2 Poppins,sans-serif;text-decoration:none;background:var(--indigo);color:#fff;border:2px solid var(--indigo);transition:background .15s}
.btn:hover{background:#243670}
.btn.small{font-size:13px;padding:9px 20px;background:var(--green);border-color:var(--green);color:#000}
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:center}
.counter{border-top:3px solid var(--cl,transparent);padding-top:14px}
.counter b{display:block;font-size:44px;line-height:1.1;color:var(--cn,var(--indigo));font-weight:700}
.counter span{display:block;color:var(--cb,var(--text));font-size:15px;margin-top:6px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px}
/* partners' logos: a slow, constant, seamless scroll (two copies of the row; the track moves by exactly one copy) */
.marquee{overflow:hidden;width:100%;padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq calc(var(--n) * 3.2s) linear infinite;will-change:transform}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
.mq-set{display:flex;align-items:center;gap:56px;padding-right:56px;flex:none}
.mq-set span{display:flex;align-items:center;justify-content:center;height:96px;flex:none}
.mq-set img{height:72px;width:auto;max-width:230px;object-fit:contain}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.mq-set[aria-hidden]{display:none}.mq-set{flex-wrap:wrap;justify-content:center}}
@media (max-width:860px){.mq-set{gap:34px;padding-right:34px}.mq-set span{height:72px}.mq-set img{height:54px;max-width:170px}}

/* story cards (home, News, categories): our visual language. Each carries its leverage point's colour (brand: Earth
   Orange whole-school stewardship, Malachite green economy pathways, Deep Indigo urban conservation), the teardrop
   eyebrow, the picture, the headline and the date */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{--acc:var(--indigo);--acc-d:var(--indigo);background:#fff;border:1px solid #dde6ea;border-radius:25px;box-shadow:0 8px 20px rgba(43,62,120,.10);overflow:hidden;transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s}
.card.lp1{--acc:#DA8857;--acc-d:#b4703a}.card.lp2{--acc:#00C82A;--acc-d:#00921f}.card.lp3{--acc:#2B3E78;--acc-d:#2B3E78}.card.lp0{--acc:#46D1F1;--acc-d:#1682a0}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(43,62,120,.16)}
.card-a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.card-img{aspect-ratio:16/10;background:#eef2f4;overflow:hidden;border-bottom:4px solid var(--acc)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.04)}
.card-in{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.eyebrow{display:flex;align-items:center;gap:7px;font:700 11px/1.2 Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-d);margin-bottom:10px}
.drop{display:inline-block;width:9px;height:12px;background:var(--acc);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;clip-path:path("M4.5 0C4.5 0 0 5.2 0 7.7A4.5 4.5 0 0 0 9 7.7C9 5.2 4.5 0 4.5 0Z");flex:none}
.card h3{font-size:19px;line-height:1.28;font-weight:700;color:var(--indigo);margin:0 0 12px;letter-spacing:-.015em;text-wrap:balance}
.card-date{font-size:13px;color:#5d7280;margin-top:auto}
.card-more{margin-top:12px;font-size:14px;font-weight:600;color:var(--indigo)}
.card:hover .card-more{color:var(--acc-d)}
.meta{font-size:12.5px;color:var(--ink)}
.meta a{color:#023a51;text-decoration:none}
.pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:46px;font:600 15px Poppins,sans-serif}
.pager a,.pager span{min-width:42px;height:42px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;text-decoration:none;color:var(--indigo);background:#fff;border:1.5px solid #dde6ea;transition:border-color .15s,background .15s}
.pager a:hover{border-color:var(--indigo)}
.pager .on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.pager .nx{padding:0 20px}
/* story lists: our own header and the programme chips */
.list-head{background:#fff;padding:46px var(--gutter) 30px;text-align:center}
.lh-in{max-width:980px;margin:0 auto}
.lh-div{width:210px;height:auto;margin:0 auto 18px}
.lh-eye{justify-content:center;color:#1682a0}.lh-eye .drop{background:#46D1F1}
.list-head h1{font-size:46px;letter-spacing:-.035em;margin:0 0 10px}
.lh-sub{font-size:18px;color:var(--indigo);opacity:.85;margin:0 auto 24px;max-width:640px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chip{--acc:#46D1F1;--acc-d:#1682a0;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;border:1.5px solid #dde6ea;background:#fff;color:var(--indigo);font:600 13.5px Poppins,sans-serif;text-decoration:none;transition:border-color .15s,background .15s}
.chip.lp1{--acc:#DA8857;--acc-d:#b4703a}.chip.lp2{--acc:#00C82A;--acc-d:#00921f}.chip.lp3{--acc:#2B3E78;--acc-d:#2B3E78}
.chip .drop{background:var(--acc)}
.chip:hover{border-color:var(--acc)}
.chip.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.chip.on .drop{background:#fff}
.list-body{background:#f4f6f8;padding:44px var(--gutter) 70px}
.lb-in{max-width:var(--site);margin:0 auto}
.card{min-width:0}
.posts{grid-template-columns:repeat(3,minmax(0,1fr))}

/* one article: laid out as Content Studio's preview of it (/shared/post-card.css .art in the portal), his rule:
   the article on the site looks exactly like the preview approvers judged */
.art-page{background:#f2f4fa;padding:40px var(--gutter) 56px}
.art{background:#fff;border-radius:16px;box-shadow:0 2px 6px rgba(43,62,120,.08);max-width:760px;margin:0 auto;overflow:hidden}
.art-in{padding:40px 48px 48px}
.art-h1{font-size:30px;line-height:1.2;font-weight:600;color:var(--indigo);margin:0 0 12px;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.art-meta{font-size:12px;color:#023A51;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid #dde6ea}
.art-meta a{color:#023A51}
.art-feat{margin:0 0 22px}
.art-hero{display:block;width:100%;height:auto;border-radius:6px;background:#eef2f4}
.art-body{color:var(--indigo)}
.art p.art-p,.art-body p{font-size:16.5px;line-height:1.75;color:var(--indigo);margin:0 0 18px}
.art h2.art-h2,.art-body h2{font-size:23px;line-height:1.3;font-weight:600;color:var(--indigo);margin:30px 0 10px;letter-spacing:-.01em}
.art-body h3{font-size:19px;line-height:1.3;font-weight:600;color:var(--indigo);margin:24px 0 8px}
.art blockquote.art-q,.art-body blockquote{border-left:4px solid #00C82A;background:#edfcf0;margin:22px 0;padding:14px 20px;font-size:17px;font-style:italic;font-weight:400;color:#5d7280;border-radius:0 10px 10px 0}
.art-body blockquote p{color:#5d7280;font-size:17px;margin:0}
.art figure.art-fig,.art-body figure{margin:22px 0}
.art-body img{display:block;max-width:100%;height:auto;border-radius:10px;margin:0 auto}
.art-body figcaption{font-size:12.5px;color:#7d96a3;margin-top:7px;font-style:italic;text-align:center}
.art .art-list,.art-body ul,.art-body ol{font-size:16.5px;line-height:1.75;color:var(--indigo);margin:0 0 18px;padding-left:26px}
.art-body li{margin:0 0 6px}
.art-body a{color:var(--indigo);text-decoration-color:#46D1F1;text-underline-offset:3px}
.art-body iframe,.art-body video{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:10px}
.art-body dl{display:inline-block;margin:0;padding:4px;vertical-align:top;max-width:32%}
.art-body table{font-size:15px}
.related{max-width:var(--site);margin:0 auto;padding:54px var(--gutter) 70px}
.related h2{text-align:center;font-size:30px;margin-bottom:28px}

/* footer */
.ft-top{background:var(--cyan)}
.ft-top .in{max-width:var(--site);margin:0 auto;padding:22px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.ft-top img{width:96px}
.social{display:flex;gap:10px}
.social a{width:32px;height:32px;border-radius:50%;background:var(--indigo);display:flex;align-items:center;justify-content:center}
.social svg{width:16px;height:16px;fill:#fff}
.ft{background:var(--indigo);color:#fff}
.ft .in{max-width:var(--site);margin:0 auto;padding:44px var(--gutter);display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:30px;font-size:14.5px;line-height:1.2}
.ft p{color:#fff;margin:0}
.ft .badges{display:flex;gap:14px;margin-bottom:22px}
.ft .badges img{width:146px;height:146px;border-radius:50%}
.ft h4{color:#fff;font-size:18px;margin:0 0 2px}
.ft h4.s{font-size:14.5px;margin-top:10px}
.ft .btn{margin:12px 0 4px}
.ft-note{background:#34437c;color:#fff;font-size:13.5px}
.ft-note .in{max-width:var(--site);margin:0 auto;padding:26px var(--gutter);line-height:1.25}
.ft-note p{color:#fff;margin:0 0 10px}
.ft-note a{color:#fff}

/* donation by card (PayFast) */
.payfast{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px auto 0;max-width:320px}
.payfast label{font-size:14px;font-weight:600;color:var(--indigo)}
.pf-row{display:flex;align-items:center;border:1.5px solid #c5d3da;border-radius:14px;overflow:hidden;width:100%;background:#fff}
.pf-row span{padding:0 12px;font-weight:700;color:var(--indigo)}
.pf-row input{border:0;flex:1;min-width:0;padding:12px 12px 12px 0;font:600 18px Poppins,sans-serif;color:var(--indigo);outline:none}
.pf-row:focus-within{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(70,209,241,.35)}
.payfast .btn{width:100%}
.pf-note{font-size:12.5px;color:#5d7280;text-align:center;margin:0}

/* cookie notice (our own) */
.cookie{position:fixed;left:16px;bottom:16px;max-width:380px;background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.18);padding:18px;z-index:60;font-size:14px;line-height:1.45}
.cookie p{color:var(--ink);font-size:14px;margin:0 0 12px}
.cookie .b{display:flex;gap:8px;flex-wrap:wrap}
.cookie button{font:600 14px Poppins,sans-serif;border-radius:999px;padding:9px 18px;cursor:pointer;border:2px solid var(--indigo);background:#fff;color:var(--indigo)}
.cookie button.yes{background:var(--indigo);color:#fff}

/* tablet and phone */
@media (max-width:1024px){
  h1{font-size:42px}h2{font-size:32px}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav a{padding:10px 9px;font-size:15px}
}
@media (max-width:860px){
  body{font-size:17px}
  h1{font-size:34px}h2{font-size:28px}h3{font-size:23px}
  .hd-in{padding:10px var(--gutter)}
  .hd-logo img{width:76px}
  .menu-btn{display:flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.12);margin:0;max-height:calc(100vh - 80px);overflow:auto}
  .nav.open{display:block}
  .nav>ul{flex-direction:column;gap:0;padding:6px 0}
  .nav a{padding:13px 20px;font-size:16px;border-bottom:1px solid var(--line)}
  .nav .sub{display:block;position:static;box-shadow:none;border:0;padding:0}
  .nav .sub a{padding-left:38px}
  .nav .chev{display:none}
  .col,.row.gap .col{flex-basis:100%;max-width:100%}
  .col.hide-small{display:none}
  .posts{grid-template-columns:minmax(0,1fr)}
  .list-head{padding:30px var(--gutter) 22px}.list-head h1{font-size:32px}
  .chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px;margin:0 calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
  .chip{flex:none}
  .art-page{padding:16px 10px 30px}
  .art-in{padding:22px 18px 28px}
  .art-h1{font-size:23px}
  .ft .in{grid-template-columns:1fr}
  .ft-top .in{flex-wrap:wrap}
}
@media (min-width:861px){.col.hide-large{display:none}}
@media print{.hd,.ft,.ft-top,.ft-note,.cookie{display:none}}

/* ===================================================================================================================
   THE DESIGN SYSTEM (the refresh, 23 Oct 2026): one look on every page. Each part of the site carries its leverage
   point's colour (brand): Whole-school stewardship Earth Orange, Green economy pathways Malachite, Urban conservation
   Deep Indigo with Soft Grey-Blue; the rest Deep Indigo with the Picton Blue connector. Sections are light, soft or
   dark (a photo under the brand's indigo, or an indigo fill). The old pages' own colours, fonts and sizes are gone.
   =================================================================================================================== */
body{--acc:#46D1F1;--acc-d:#1682a0;--acc-soft:#e8f9fd}
body.lp1{--acc:#DA8857;--acc-d:#b4703a;--acc-soft:#fbf0e8}
body.lp2{--acc:#00C82A;--acc-d:#00921f;--acc-soft:#e6faea}
body.lp3{--acc:#A2B8C3;--acc-d:#2B3E78;--acc-soft:#eef2f5}

/* sections */
.sec{padding:84px 0;background:#fff;color:var(--indigo)}
.sec + .sec:not(.soft):not(.dark){border-top:1px solid #eef1f4}
.sec.soft{background:#f4f6f8}
.sec.dark{background:var(--indigo);color:#fff}
.sec.photo{background:linear-gradient(180deg,rgba(26,39,80,.74),rgba(43,62,120,.6)),var(--photo) var(--photo-pos,center)/cover no-repeat}
.sec.hero{padding:118px 0 104px}
.sec.hero .row{max-width:1000px}
.sec .row{align-items:flex-start}
.col{margin:14px 0}
.it{margin:0 0 18px}
.it:last-child{margin-bottom:0}

/* type: one scale */
.sec h1,.sec h2,.sec h3,.sec h4,.sec h5{font-family:Poppins,Arial,sans-serif;color:var(--indigo);letter-spacing:-.025em;margin:0 0 .45em;text-wrap:balance}
.sec h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;font-weight:700}
.sec h2{font-size:clamp(28px,3.2vw,40px);line-height:1.12;font-weight:700}
.sec h3{font-size:clamp(20px,2vw,24px);line-height:1.25;font-weight:700}
.sec h4{font-size:19px;line-height:1.3;font-weight:600}
.sec h5{font-size:16px;line-height:1.3;font-weight:600}
.sec p,.sec li{font-size:17.5px;line-height:1.7;color:#3a4a6b}
.sec .it-html > p:first-child:not(.sec-eye):only-of-type{font-size:19px}
.sec strong,.sec b{color:var(--indigo)}
.sec a:not(.btn):not(.rbtn):not(.chip){color:var(--indigo);text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:4px}
.sec.dark h1,.sec.dark h2,.sec.dark h3,.sec.dark h4,.sec.dark h5,.sec.dark strong,.sec.dark b{color:#fff}
.sec.dark p,.sec.dark li{color:rgba(255,255,255,.9)}
.sec.dark a:not(.btn){color:#fff}
.it-title.center,.sec [style*="text-align: center"],.sec [style*="text-align:center"]{text-align:center}

/* eyebrow: small capitals with a teardrop, in the part's colour */
.sec-eye{display:inline-flex;align-items:center;gap:8px;font:700 12.5px/1.2 Poppins,sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase;color:var(--acc-d)!important;margin:0 0 14px!important}
.sec-eye::before{content:"";width:9px;height:12px;background:var(--acc);clip-path:path("M4.5 0C4.5 0 0 5.2 0 7.7A4.5 4.5 0 0 0 9 7.7C9 5.2 4.5 0 4.5 0Z");flex:none}
p.sec-eye,div.sec-eye{display:flex}
[style*="text-align: center"] > .sec-eye,.center .sec-eye,.it-title.center .sec-eye,p.sec-eye[style*="center"]{justify-content:center}
.sec.dark .sec-eye{color:#7fe3f8!important}.sec.dark .sec-eye::before{background:#46D1F1}

/* divider: three teardrops fading, drawn in the part's colour */
.divider{display:flex;justify-content:center;gap:7px;margin:0 auto 22px;padding-bottom:14px;width:120px;border-bottom:1px solid color-mix(in srgb,var(--acc) 35%,transparent)}
.divider i{width:14px;height:19px;background:var(--acc);clip-path:path("M7 0C7 0 0 8 0 12A7 7 0 0 0 14 12C14 8 7 0 7 0Z")}
.divider i:nth-child(2){opacity:.6}.divider i:nth-child(3){opacity:.3}
.divider.rule{border:0;width:auto;gap:0;align-items:center}
.divider.rule::before,.divider.rule::after{content:"";width:64px;height:1px;background:color-mix(in srgb,var(--acc) 45%,transparent);margin:0 10px}
.sec.dark .divider{border-color:rgba(255,255,255,.25)}.sec.dark .divider i{background:#46D1F1}

/* panels: a coloured box on the old pages is one of ours */
.panel{background:#fff;border:1px solid #e3e9ee;border-radius:22px;box-shadow:0 8px 24px rgba(43,62,120,.08);padding:28px 30px;align-self:stretch}
.sec.soft .panel{background:#fff}
.panel.dark{background:var(--indigo);border-color:transparent;color:#fff}
.panel.photo{background:linear-gradient(180deg,rgba(26,39,80,.7),rgba(43,62,120,.58)),var(--photo) center/cover}
.panel.dark h2,.panel.dark h3,.panel.dark h4,.panel.dark strong{color:#fff}.panel.dark p,.panel.dark li{color:rgba(255,255,255,.9)}
.col.shadow{box-shadow:none;border-radius:0}

/* highlight box, quote, number blocks */
.callout{background:var(--acc-soft)!important;border-radius:18px;padding:24px 28px!important;margin:22px 0;color:var(--indigo)}
.callout p{margin:0 0 10px}.callout p:last-child{margin:0}
.sec.dark .callout{background:rgba(255,255,255,.08)!important}
.quote,.sec blockquote{border-left:4px solid var(--acc);background:none;padding:6px 0 6px 22px;margin:24px 0;font-size:20px;line-height:1.5;font-weight:600;color:var(--indigo);font-style:normal}
.quote p,.sec blockquote p{font-size:inherit;color:inherit;margin:0 0 8px}
.sec.dark .quote,.sec.dark blockquote{color:#fff;border-color:#46D1F1}
.stats{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;gap:22px!important;max-width:1000px;margin:26px auto 0!important}
.stat,.cell{border-top:3px solid var(--acc);padding:16px 4px 0!important;border-left:0!important;text-align:left}
[style*="text-align: center"] .stat,.center .stat{text-align:center}
.stat-n{display:block;font:700 clamp(30px,3.4vw,42px)/1.05 Poppins,sans-serif!important;color:var(--indigo)!important;letter-spacing:-.02em}
.stat-t{display:block;font-size:15px!important;line-height:1.45;color:#5d7280!important;margin-top:8px}
.sec.dark .stat-n{color:#fff!important}.sec.dark .stat-t{color:rgba(255,255,255,.82)!important}.sec.dark .stat,.sec.dark .cell{border-color:#46D1F1}
.counters{gap:24px}
.counter{border-top:3px solid var(--acc);padding-top:16px;text-align:center}
.counter b{color:var(--indigo);font-size:clamp(32px,3.4vw,44px)}
.counter span{color:#5d7280}
.sec.dark .counter{border-color:#46D1F1}.sec.dark .counter b{color:#fff}.sec.dark .counter span{color:rgba(255,255,255,.85)}

/* buttons: one shape everywhere */
.btn,.sec a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 30px;font:600 16px/1.2 Poppins,sans-serif;text-decoration:none;background:var(--indigo);color:#fff!important;border:2px solid var(--indigo);transition:background .15s,color .15s,border-color .15s;margin:4px 6px 4px 0}
.btn:hover{background:#1a2750;border-color:#1a2750}
.btn.btn-ghost{background:transparent;color:var(--indigo)!important}
.btn.btn-ghost:hover{background:var(--indigo);color:#fff!important}
.sec.dark .btn{background:#fff;color:var(--indigo)!important;border-color:#fff}
.sec.dark .btn:hover{background:#e8f9fd;border-color:#e8f9fd}
.sec.dark .btn.btn-ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.8)}
.sec.dark .btn.btn-ghost:hover{background:#fff;color:var(--indigo)!important}
.it-btn{display:inline-block;margin-right:8px}
.it-title.center ~ .it-btn,.center .it-btn{text-align:center}

/* tables */
.sec table{border-radius:14px;overflow:hidden;border:1px solid #e3e9ee}
.sec th{background:var(--acc-soft);color:var(--indigo);font-weight:600}

@media (max-width:860px){
  .sec{padding:56px 0}.sec.hero{padding:74px 0 66px}
  .panel{padding:22px 20px}
  .sec p,.sec li{font-size:16.5px}
  .quote,.sec blockquote{font-size:18px}
}
/* tightened: numbers centred everywhere, quotes a centred reading width, centred eyebrows stay centred */
.stat,.cell,.counter{text-align:center}
.quote,.sec blockquote{max-width:780px;margin-left:auto;margin-right:auto}
.sec-eye.c{display:flex;justify-content:center}
.it-title.center + .it-html .sec-eye,.it-title.center .sec-eye{justify-content:center}
/* a rail: a line down the left in the part's colour (timelines, column dividers); a label: a short bold line */
.rail{border-left:3px solid var(--acc);padding-left:28px!important}
.sec.dark .rail{border-color:rgba(255,255,255,.35)}
.label{display:block;font:700 19px/1.3 Poppins,sans-serif;color:var(--indigo);margin:0 0 4px;letter-spacing:-.01em}
.sec.dark .label{color:#fff}
.rail > div{margin:0 0 22px}
.cell{text-align:left}
.stat,.counter{text-align:center}