/* ==========================================================================
   Seed2Sapling Education - site stylesheet
   Hand-coded static site. Plain CSS, no framework, no build step.
   Every colour on the site comes from the token block below. Never write a
   raw hex in a rule; add a token here instead if one is genuinely missing.
   ========================================================================== */

:root{
  --green:#557635;        /* primary: buttons, active states, headings on cream */
  --brown:#6D3F18;        /* headings, and text on cream where green is too light */
  --cream:#FBF3E7;        /* default page background */
  --cream-alt:#F8F4EA;    /* alternating band background */
  --blue:#386CA9;         /* links and secondary accents */
  --yellow:#ECC072;       /* fill and rule only. NEVER text on cream */
  --coral:#EB8572;        /* fill and rule only. NEVER text on cream */
  --ink:#221E1F;          /* long body copy */
  --white:#FFFFFF;

  /* one tint per product group */
  --tint-teachers:#F6D0C2;
  --tint-curriculum:#F5DEB6;
  --tint-student:#D6D8C0;
  --tint-assessment:#C0CAD4;
  --tint-spaces:#EFE2CD;
  --tint-leadership:#D3C3B0;
  --lilac:#ABA3D0;        /* chevron / zone accent, also the 5th cycle colour */

  /* type */
  --font-head:"Marcellus","Palatino Linotype",Palatino,Georgia,serif;
  --font-body:"Alegreya Sans","Segoe UI",system-ui,sans-serif;

  /* spacing scale - use these and nothing outside them */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  --radius-card:10px;
  --radius-input:6px;
  --shadow:0 1px 2px rgba(0,0,0,.06);
}

/* ---- reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}   /* the page body never scrolls sideways */
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:18px;line-height:1.6;}
img,svg{max-width:100%;height:auto;display:block}
iframe{max-width:100%;display:block}   /* no height:auto: an iframe's height attr must hold */
figure{margin:0}
p,ul,ol,table,blockquote{margin:0 0 var(--s3)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:2px}

/* ---- type -------------------------------------------------------------- */
/* Marcellus has one weight, 400, and no italic. Every heading is 400.
   Hierarchy comes from size, colour and spacing, never from weight. */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;line-height:1.2;
  color:var(--brown);margin:0 0 var(--s3)}
h1{font-size:clamp(32px,5.6vw,44px)}
h2{font-size:clamp(26px,4.4vw,32px);margin-top:var(--s5)}
h3{font-size:24px;margin-top:var(--s4)}
h4{font-size:20px}
.hero h1,.h-hero{font-size:clamp(34px,5.2vw,56px);margin-top:0}
.lead{font-size:21px}
.caption,figcaption{font-size:15px;color:var(--brown);margin-top:var(--s1)}
small{font-size:15px}
strong{font-weight:700}
.eyebrow{font-family:var(--font-body);font-size:15px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green);
  margin:0 0 var(--s2)}
.measure{max-width:56ch}   /* ch = width of '0'; 56ch is ~75 real characters */

/* heading underline built from the house brush stroke */
.brush-h{display:table;padding-bottom:18px;text-wrap:balance;
  background:url(../images/illustration-brush-underline.png) no-repeat left bottom;
  background-size:100% 14px}   /* display:table shrink-wraps the stroke to the words */

/* ---- links ------------------------------------------------------------- */
a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--green)}
.arrow-link{font-weight:700;text-decoration:none}
.arrow-link::after{content:" \2192"}
.arrow-link:hover{text-decoration:underline}

/* ---- layout ------------------------------------------------------------ */
.container{max-width:1140px;margin:0 auto;padding-left:24px;padding-right:24px}
.band{padding-top:var(--s6);padding-bottom:var(--s6)}
.band>.container>:first-child,.eyebrow+h2,.eyebrow+h3{margin-top:0}
main>.band:first-child{padding-bottom:var(--s4)}   /* the one-line title heroes on media, reflections, contact, careers */
.band-cream{background:var(--cream)}
.band-cream-alt{background:var(--cream-alt)}
.band-white{background:var(--white)}
/* Dark bands: full bleed, cream text, two per page maximum.
   Never put a hand-drawn illustration on a dark band. */
.band-proof{background:var(--brown);color:var(--cream)}
.band-action{background:var(--green);color:var(--cream)}
.band-editorial{background:var(--blue);color:var(--white)}
.band-proof h2,.band-action h2,.band-proof h3,.band-action h3{color:var(--cream)}
.band-editorial h2,.band-editorial h3{color:var(--white)}
.band-proof a,.band-action a{color:var(--cream)}
.band-editorial a{color:var(--white)}

.grid-2{display:grid;gap:var(--s4)}
.grid-3{display:grid;gap:var(--s3)}
@media(min-width:700px){
  .grid-2{grid-template-columns:1fr 1fr;align-items:start}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

/* ---- buttons ----------------------------------------------------------- */
.btn{display:inline-block;font-family:var(--font-body);font-size:18px;font-weight:700;
  padding:12px 28px;border-radius:var(--radius-input);text-decoration:none;
  border:2px solid transparent;cursor:pointer;text-align:center}
.btn-primary{background:var(--green);color:var(--cream)}
.btn-primary:hover{background:var(--brown);color:var(--cream)}
.btn-secondary{background:transparent;color:var(--brown);border-color:var(--green)}
.btn-secondary:hover{background:var(--green);color:var(--cream)}
/* the only button allowed on a dark band */
.btn-on-dark{background:var(--yellow);color:var(--brown)}
.btn-on-dark:hover{background:var(--cream);color:var(--brown)}
.btn-row{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s4) 0 var(--s3)}
@media(max-width:699px){
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%}
}

/* ---- cards built on the hand-drawn card PNGs --------------------------- */
/* The four illustration-card-*.png files are hand-drawn boxes. border-image
   keeps their drawn corners while the middle stretches with the text. */
.card{border-style:solid;border-width:28px 34px 34px 28px;border-color:transparent;
  border-image-slice:300 fill;border-image-repeat:stretch;
  padding:var(--s2) var(--s2) var(--s1)}
.card-pink{border-image-source:url(../images/illustration-card-pink.png)}
.card-green{border-image-source:url(../images/illustration-card-green.png)}
.card-blue{border-image-source:url(../images/illustration-card-blue.png)}
.card-lilac{border-image-source:url(../images/illustration-card-lilac.png)}
.card h3{margin-top:0}
.card :last-child{margin-bottom:0}

/* plain tinted card for the six offering groups */
.tint-card{border-radius:var(--radius-card);padding:var(--s3);box-shadow:var(--shadow)}
.tint-card h3{margin-top:0}
.tint-teachers-bg{background:var(--tint-teachers)}
.tint-curriculum-bg{background:var(--tint-curriculum)}
.tint-student-bg{background:var(--tint-student)}
.tint-assessment-bg{background:var(--tint-assessment)}
.tint-spaces-bg{background:var(--tint-spaces)}
.tint-leadership-bg{background:var(--tint-leadership)}

/* ---- quotes ------------------------------------------------------------ */
/* Feature pull-quote: the child-with-banner illustration carries the text.
   Below 700px the overlay text would fall under 17px, so the quote goes
   static and the illustration is dropped. */
.pullquote{position:relative;max-width:820px;margin:var(--s5) auto}
.pullquote img{width:100%;height:auto}
.pullquote blockquote{position:absolute;left:27%;right:7%;top:10%;bottom:12%;
  display:flex;flex-direction:column;justify-content:center;margin:0;
  font-size:clamp(17px,2.2vw,21px);line-height:1.4;color:var(--ink)}
.pullquote blockquote footer{font-size:.8em;color:var(--brown);margin-top:10px;font-weight:700}
@media(max-width:699px){
  .pullquote img{display:none}
  .pullquote blockquote{position:static;border-left:6px solid var(--blue);
    padding:var(--s1) 0 var(--s1) var(--s3)}
}
/* Quieter quote for pages carrying several quotes */
.quote{border-left:6px solid var(--yellow);padding:var(--s1) 0 var(--s1) var(--s3);
  margin:var(--s4) 0;font-size:21px;line-height:1.5;max-width:56ch}
.quote footer{font-size:16px;color:var(--brown);margin-top:var(--s1)}
.quote footer strong{display:inline}
.quote p:last-of-type{margin-bottom:0}

/* ---- tables ------------------------------------------------------------ */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--tint-spaces)}
th{font-family:var(--font-head);font-weight:400;color:var(--brown)}

/* ---- lists ------------------------------------------------------------- */
ul,ol{padding-left:24px}
li{margin-bottom:var(--s1)}
.list-plain{list-style:none;padding:0}

/* ---- forms ------------------------------------------------------------- */
label{display:block;font-weight:700;margin-bottom:6px;color:var(--brown)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--white);
  border:1px solid var(--brown);border-radius:var(--radius-input);
  padding:10px 12px;margin-bottom:var(--s3)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--blue);outline-offset:1px}
.checks{list-style:none;padding:0;margin:0 0 var(--s3)}
.checks li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.checks input{width:24px;height:24px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--green)}
.checks label{font-weight:400;margin:0;color:var(--ink)}
.field-error input,.field-error textarea{border:2px solid var(--coral)}
.error-text{color:var(--brown);font-weight:700;font-size:15px;margin:-16px 0 var(--s3)}
.error-text::before{content:"";display:inline-block;width:10px;height:10px;
  background:var(--coral);border-radius:50%;margin-right:6px}

/* ---- breadcrumbs -------------------------------------------------------- */
.crumbs{font-size:15px;margin-bottom:var(--s3);padding:6px 12px;border-radius:var(--radius-input);display:inline-block}
.crumbs a{color:var(--brown)}
.crumbs span[aria-current]{color:var(--brown);font-weight:700}
.crumbs .sep{padding:0 6px;color:var(--brown)}
@media(max-width:699px){
  .crumbs{font-size:14px;line-height:1.5;padding:4px 10px}
  .crumbs a{display:inline-block;padding:6px 0}
  .crumbs .sep{padding:0 4px}
}

/* ---- header ------------------------------------------------------------ */
.site-header{background:var(--cream);border-bottom:1px solid var(--tint-spaces);
  position:sticky;top:0;z-index:60;box-shadow:0 1px 6px rgba(109,63,24,.08)}
.site-header .container{display:flex;align-items:center;gap:var(--s3);
  padding-top:14px;padding-bottom:14px;max-width:1280px}
.site-logo{order:1;flex:none}
.site-logo img{width:160px;height:60px;object-fit:contain}
.site-nav{order:2;margin-left:auto}
.site-nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.site-nav a{color:var(--brown);text-decoration:none;font-weight:500;font-size:16px;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--green);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.header-cta{order:3;white-space:nowrap}
.nav-toggle{display:none;background:none;border:2px solid var(--green);border-radius:var(--radius-input);
  padding:6px 10px;font:inherit;font-size:15px;font-weight:700;color:var(--brown);cursor:pointer}
@media(max-width:1099px){
  /* logo left, Partner with us right, everything else behind the Menu button.
     The button never goes inside the hamburger. */
  .site-header .container{flex-wrap:wrap;gap:10px}
  .site-logo{margin-right:auto}
  .site-logo img{width:118px;height:44px}
  .header-cta{order:2;padding:8px 12px;font-size:15px}
  .nav-toggle{display:block;order:3}
  .site-nav{display:none;order:4;width:100%;margin-left:0}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:0;padding:var(--s1) 0}
  .site-nav li{border-top:1px solid var(--tint-spaces);margin:0}
  .site-nav a{display:block;padding:12px 4px;white-space:normal}
}

/* ---- closing action band ------------------------------------------------ */
.band-action{text-align:center}
.band-action .h-close{font-size:32px;margin:0 0 var(--s4)}

/* ---- footer -------------------------------------------------------------- */
.site-footer{background:var(--brown);color:var(--cream);font-size:16px}
.site-footer a{color:var(--cream)}
/* the yellow button keeps brown text on the dark bands: .band-action a and
   .site-footer a (0,1,1) were beating .btn-on-dark (0,1,0) and painting it cream */
.band-action a.btn-on-dark,.site-footer a.btn-on-dark,
.band-action a.btn-on-dark:hover,.site-footer a.btn-on-dark:hover{color:var(--brown)}
.site-footer .container{padding-top:var(--s6);padding-bottom:var(--s4)}
.footer-cols{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-bottom:var(--s5)}
@media(min-width:700px){.footer-cols{grid-template-columns:repeat(5,1fr);gap:var(--s3)}}
.fcol h4{color:var(--yellow);font-size:17px;margin:0 0 var(--s2);letter-spacing:.04em}
.fcol h4 + ul + h4{margin-top:var(--s3)}
.fcol ul{list-style:none;padding:0;margin:0 0 var(--s2)}
.fcol li{margin-bottom:8px}
.fcol a{color:var(--cream);text-decoration:none}
.fcol a:hover{text-decoration:underline;color:var(--cream)}
.footer-reach{border-top:1px solid var(--yellow);padding-top:var(--s4);
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.footer-reach p{margin:0}
.footer-reach .btn{margin-left:auto}
.footer-legal{margin-top:var(--s4);font-size:15px;display:flex;gap:var(--s3);flex-wrap:wrap}
.footer-legal a{color:var(--cream)}
@media(max-width:699px){
  /* column headings become tappable accordions, all closed except Reach us */
  .fcol h4{border-top:1px solid var(--yellow);padding:12px 0;margin:0;cursor:pointer;position:relative}
  .fcol h4::after{content:"+";position:absolute;right:4px;font-family:var(--font-body)}
  .fcol h4.open::after{content:"\2013"}
  .fcol ul{display:none;padding-bottom:var(--s2)}
  .fcol h4.open + ul{display:block}
  .footer-cols{gap:0;margin-bottom:var(--s4)}
  .footer-reach .btn{margin-left:0;width:100%}
  .fcol h4+ul+h4{margin-top:0}
  .fcol ul{margin-bottom:0}
  .footer-legal{gap:var(--s1) var(--s3)}
  .footer-legal p{flex-basis:100%}
  .footer-legal a{display:inline-block;padding:10px 0}
}

/* ---- media / video ------------------------------------------------------- */
.video-frame{position:relative;aspect-ratio:16/9;background:var(--brown);border-radius:var(--radius-card);overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* watch shelf: plain links with thumbnails, used on Media and Reflections */
.watch-shelf{display:grid;gap:var(--s3);grid-template-columns:1fr;list-style:none;padding:0}
@media(min-width:700px){.watch-shelf{grid-template-columns:repeat(3,1fr)}}
.watch-shelf img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-card)}   /* hqdefault is 4:3 with bars */
.watch-shelf a{color:var(--brown);text-decoration:none;font-weight:700}
.watch-shelf a:hover{color:var(--green)}
.watch-shelf .caption{font-weight:400}

/* article card, used on Reflections Corner */
.post-card{background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.post-card h3{margin:0;font-size:22px}
.post-card .caption{margin:0}

/* ---- offering page template ---------------------------------------------- */
/* Seven parts, same order, on all 22 offering pages. The group tint appears
   on the breadcrumb and nowhere else on the page. One dark band maximum:
   the closing action band. */
.offer-hero{display:grid;gap:var(--s4);align-items:center}
@media(min-width:700px){.offer-hero{grid-template-columns:6fr 5fr}}
.offer-hero img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-card)}
/* type hero, for the nine pages with no photograph: the H1 and standfirst set
   large on the group tint, one house illustration beside them, used small */
.type-hero{padding:var(--s6) 0}
.type-hero .offer-hero{grid-template-columns:1fr;gap:var(--s3)}
@media(min-width:700px){.type-hero .offer-hero{grid-template-columns:8fr 4fr}
  .type-hero .offer-hero:not(:has(img)){grid-template-columns:1fr}
  .type-hero .offer-hero:not(:has(img))>div{max-width:760px}}
.type-hero h1{font-size:clamp(34px,4.6vw,50px)}
.type-hero img{aspect-ratio:auto;object-fit:contain;max-height:260px;background:var(--white);
  padding:var(--s2)}
.crumbs.on-tint{background:none}
.offer-body{max-width:760px}   /* parts 2 to 6 read as one centred article; 712px of content */
.offer-body{margin-left:auto;margin-right:auto}
.receives{background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow);
  padding:var(--s3) var(--s4);margin:var(--s5) 0}
.receives h2{margin-top:0}
.receives ul{max-width:56ch;margin-bottom:0}
.receives ul + p{margin:var(--s3) 0 0}
.receives li{margin-bottom:10px}
.from-classroom{display:grid;gap:var(--s4);align-items:center}
@media(min-width:700px){.from-classroom{grid-template-columns:3fr 2fr}}
.from-classroom img{border-radius:var(--radius-card);max-height:420px;object-fit:cover}
.band-action .also{margin-top:var(--s4);font-size:17px}
@media(max-width:699px){.band-action .also a{display:inline-block;padding:6px 2px}}
.tier{border-left:6px solid var(--green);padding:var(--s1) 0 var(--s1) var(--s3);margin-bottom:var(--s3)}
.tier h3{margin-top:0}
.tier p.plus{font-weight:700;color:var(--brown)}

/* ---- helpers ------------------------------------------------------------- */
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.img-round{border-radius:var(--radius-card)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* keyboard users: first tab stop jumps past the header to <main id="main"> */
.skip-link{position:absolute;left:8px;top:-100px;z-index:100;background:var(--green);color:var(--cream);
  padding:10px 16px;border-radius:var(--radius-input);text-decoration:none;font-weight:700}
.skip-link:focus{top:8px}
/* deep-link targets land with clearance and a rule above them */
:target{scroll-margin-top:96px}
.anchor-rule{position:relative;padding-top:var(--s5);margin-top:var(--s5)}
/* the rule is a pseudo as wide as the .offer-body content (712px), because the
   heading itself is display:table and shrink-wraps to its words */
.anchor-rule::before{content:"";position:absolute;left:0;top:0;height:2px;background:var(--yellow);
  width:min(712px,calc(100vw - 48px))}

/* ===== Offerings v2 components (2026-09-07) =====
   Shared by offerings.html and the offering pages. Infographics are built in HTML
   with these classes, never pasted as images. */

/* Chevron-tabbed journey cards, from the July-2022 brochure p5 template:
   a coloured chevron tab over a pale box. Text on the tab is ink (brown fails on pink). */
.chev-row{display:grid;gap:var(--s3);margin:var(--s4) 0;align-items:start}
@media(min-width:700px){.chev-row{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.chev-row.cols-4{grid-template-columns:repeat(4,1fr)}.chev-row.cols-5{grid-template-columns:repeat(5,1fr)}}
.chev{display:flex;flex-direction:column;min-width:0}
.chev-tab{position:relative;padding:14px 36px 14px 18px;color:var(--ink);font-family:var(--font-head);font-size:20px;line-height:1.2;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%)}
.chev-tab small{display:block;font-family:var(--font-body);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;color:var(--ink)}
.chev-body{flex:1;padding:var(--s3) var(--s2);border:1.5px solid rgba(34,30,31,.5);border-top:0;
  border-radius:0 0 6px 3px / 0 0 4px 7px;transform:rotate(-.15deg)}
.chev:nth-child(even) .chev-body{transform:rotate(.15deg);border-radius:0 0 3px 6px / 0 0 7px 4px}
.chev-body h3{font-size:18px;margin:0 0 4px;line-height:1.25}
.chev-body h3 a{color:var(--brown)}
.chev-body p{margin:0 0 var(--s2);font-size:16px;line-height:1.45}
.chev-body p:last-child{margin-bottom:0}
.chev-teal .chev-tab{background:#99D5CC}.chev-teal .chev-body{background:#E4F4F0}
.chev-yellow .chev-tab{background:#F9E286}.chev-yellow .chev-body{background:#FCF4D4}
.chev-lilac .chev-tab{background:#ABA3D0}.chev-lilac .chev-body{background:#E7E4F2}
.chev-pink .chev-tab{background:#F0739D}.chev-pink .chev-body{background:#FBDDE7}
.chev-green .chev-tab{background:#C4E39A}.chev-green .chev-body{background:#EBF4DE}
.chev-tab.chev-quote{font-style:italic}

/* Numbered process steps (the brochure's 4-stage wheels, laid out as cards) */
.steps{display:grid;gap:var(--s3);margin:var(--s3) 0;padding:0;list-style:none;counter-reset:step;align-items:start}
@media(min-width:700px){.steps{grid-template-columns:1fr 1fr}}
.step{position:relative;padding:var(--s3) var(--s3) var(--s3) 76px;background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow);margin:0}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:22px;top:22px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-head);font-size:21px;color:var(--ink);background:var(--yellow)}
.step:nth-child(2)::before{background:var(--coral)}
.step:nth-child(3)::before{background:var(--lilac)}
.step:nth-child(4)::before{background:#C4E39A}
.step:nth-child(5)::before{background:var(--tint-teachers)}
.step h3{margin:0 0 6px;font-size:20px}
.step p,.step ul{margin:0}
.step ul{padding-left:18px}
.step li{margin-bottom:4px}

/* Three tiles: hearts-on / heads-on / hands-on, or teachers / students / school */
.triad{display:grid;gap:var(--s2);margin:var(--s3) 0;align-items:start}
@media(min-width:700px){.triad{grid-template-columns:repeat(3,1fr)}}
.triad>div{padding:var(--s2) var(--s3) var(--s3);border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow);border-top:6px solid var(--coral)}
.triad>div:nth-child(2){border-top-color:var(--blue)}
.triad>div:nth-child(3){border-top-color:var(--green)}
.triad h3{margin:0 0 6px;font-size:19px}
.triad p,.triad ul{margin:0}
.triad ul{padding-left:18px}
.triad li{margin-bottom:4px}

/* Two columns: Seed2Sapling provides / The school provides */
.provide{display:grid;gap:var(--s3);margin:var(--s3) 0;align-items:start}
@media(min-width:700px){.provide{grid-template-columns:1fr 1fr}}
.provide>div{padding:var(--s3);border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow)}
.provide>div:first-child{background:var(--tint-curriculum)}
.provide h3{margin:0 0 var(--s1);font-size:20px}
.provide ul{margin:0;padding-left:20px}
.provide li{margin-bottom:6px}
.provide li:last-child{margin-bottom:0}

/* Zone / feature cards, 3 to 6 of them */
.zones{display:grid;gap:var(--s2);margin:var(--s3) 0;align-items:start}
@media(min-width:560px){.zones{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.zones{grid-template-columns:repeat(3,1fr)}.zones.cols-2{grid-template-columns:1fr 1fr}.zones.cols-4{grid-template-columns:repeat(4,1fr)}
  /* inside the 712px article column four or five across gives 145-190px cards, so cap at 3 (or 2x2) */
  .offer-body .zones.cols-4{grid-template-columns:1fr 1fr}
  .offer-body .zones.themes-5{grid-template-columns:repeat(3,1fr)}}
.zone{padding:var(--s2) var(--s3);border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow);border-left:6px solid var(--coral)}
.zone:nth-child(6n+2){border-left-color:var(--blue)}
.zone:nth-child(6n+3){border-left-color:var(--green)}
.zone:nth-child(6n+4){border-left-color:var(--yellow)}
.zone:nth-child(6n+5){border-left-color:var(--brown)}
.zone:nth-child(6n+6){border-left-color:var(--lilac)}
.zone h3{margin:0 0 4px;font-size:18px}
.zone p,.zone ul{margin:0;font-size:16px}
.zone ul{padding-left:18px}
.zone small{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--brown);margin-bottom:2px}

/* Three big numbers */
.stat-row{display:grid;gap:var(--s2);margin:var(--s3) 0;text-align:center}
@media(min-width:560px){.stat-row{grid-template-columns:repeat(3,1fr)}}
.stat-row>div{padding:var(--s2)}
.stat-row .n{font-family:var(--font-head);font-size:44px;color:var(--green);line-height:1}
.stat-row .l{font-size:16px;margin-top:6px}

/* Developmental arc, up to 6 stops */
.arc{display:grid;gap:var(--s2);margin:var(--s3) 0;padding:0;list-style:none}
@media(min-width:560px){.arc{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.arc{grid-template-columns:repeat(6,1fr)}.offer-body .arc{grid-template-columns:repeat(3,1fr)}}
.arc li{padding:var(--s2);background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow);border-top:6px solid var(--green);margin:0}
.arc li:nth-child(1){border-top-color:#C4E39A}
.arc li:nth-child(2){border-top-color:var(--yellow)}
.arc li:nth-child(3){border-top-color:var(--coral)}
.arc li:nth-child(4){border-top-color:var(--blue)}
.arc li:nth-child(5){border-top-color:#ABA3D0}
.arc li small{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--brown)}
.arc li h3{margin:2px 0 6px;font-size:17px;line-height:1.25}
.arc li p{margin:0;font-size:15px}

/* Learn2Learn strip on the offerings index */
.l2l-strip{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;justify-content:space-between;
  margin:var(--s3) 0 0;padding:var(--s3);border-radius:var(--radius-card);background:#E6EDD8;color:var(--brown);
  border-left:8px solid var(--green);box-shadow:var(--shadow)}
.l2l-strip p{margin:0;font-size:18px;line-height:1.4}
.l2l-strip strong{font-family:var(--font-head);font-weight:400;font-size:24px;display:block;margin-bottom:4px}
.l2l-strip a.btn{white-space:nowrap}

/* hero "on this page" list, shared by the multi-component pages */
.on-this-page{list-style:none;padding:0;margin:var(--s3) 0 0}
.on-this-page li{margin-bottom:6px}

/* equal tab heights so the boxes below line up whatever the tab text wraps to */
.chev-tab{min-height:86px;display:flex;flex-direction:column;justify-content:center}
.chev-row.cols-5 .chev-tab{font-size:18px;min-height:100px;padding-right:30px}
.chev-row.cols-5 .chev-body{padding:var(--s2)}

/* Learn2Learn wheel (offerings.html + offerings/learn2learn.html): SVG on wide screens, stacked tinted list below 700px */
.l2l-figure{margin:var(--s4) auto;max-width:840px}
.l2l-figure figcaption{text-align:center;font-size:15px;color:var(--brown);margin-top:var(--s1)}
.l2l-wheel{display:block;width:100%;height:auto}
.l2l-wheel-list{display:none}
@media(max-width:699px){
  .l2l-wheel{display:none}
  .l2l-wheel-list{display:block}
  .l2l-wheel-list .centre{background:var(--green);color:var(--cream);border-radius:var(--radius-card);padding:14px 18px;text-align:center;font-size:20px;margin:0 0 var(--s2)}
  .l2l-wheel-list .centre strong{font-family:var(--font-head);font-weight:400}
  .l2l-wheel-list .wl{border-radius:var(--radius-card);padding:14px 18px;margin-bottom:var(--s2)}
  .l2l-wheel-list h3{margin:0 0 6px;font-size:20px}
  .l2l-wheel-list ul{margin:0;padding-left:20px}
}

/* ---- journey map (school-partnerships, leadership, teachers-mentoring) ----
   Moved here from school-partnerships.html on 2026-09-08 so the two
   offering journey pages share it. Cards may carry a photo (.j-photo) across
   the line or stand alone; .j-kicker is the small step label above the h2. */
/* journey map: one dotted line growing down the page, a card either side of it.
   The SVG line is drawn by the small script at the foot of the page from the
   real marker positions, so it stays aligned at every width. Decorative only:
   with scripts off the cards simply sit on the plain background. */
.journey{position:relative;max-width:1100px;margin:0 auto;padding-top:var(--s2)}
.journey-line{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.journey-line path{fill:none;stroke:var(--green);stroke-opacity:.45;stroke-width:4;
  stroke-linecap:round;stroke-dasharray:.5 14}
.j-place{position:relative;z-index:1;display:grid;grid-template-columns:1fr 96px 1fr;
  align-items:start;scroll-margin-top:calc(96px + var(--s3))}
.j-place+.j-place{margin-top:var(--s6)}
.j-marker{grid-column:2;grid-row:1;width:60px;height:60px;margin:var(--s2) auto 0;border-radius:50%;
  background:var(--green);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 7px var(--cream-alt)}
.j-marker svg{width:38px;height:38px}
.j-marker .mkf{fill:var(--cream)}
.j-marker .mks{fill:none;stroke:var(--cream);stroke-width:1.7;stroke-linecap:round}
.j-marker .mkd{fill:var(--green)}
.j-card{background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow);
  padding:var(--s3) var(--s4) var(--s4)}
.j-left .j-card{grid-column:1;grid-row:1}
.j-right .j-card{grid-column:3;grid-row:1}
/* the step photo sits across the line from its card, vertically centred */
.j-photo{margin:0;grid-row:1;align-self:start;justify-self:center;width:min(100%,440px);margin-top:var(--s3)}
.j-left .j-photo{grid-column:3}
.j-right .j-photo{grid-column:1}
.j-photo img{width:100%;height:auto;display:block;border-radius:var(--radius-card);
  box-shadow:var(--shadow)}
.j-card h2{margin-top:var(--s1);font-size:clamp(24px,2.3vw,28px)}
.j-card .quote{margin-bottom:0}
.looks-like{background:var(--cream);border-radius:var(--radius-card);padding:var(--s2) var(--s3);
  margin:0 0 var(--s3)}
.looks-like p{margin:0 0 var(--s1)}
.looks-like .links{font-size:16px}
@media(max-width:699px){
  /* strict single column: line down the left edge, every card to its right */
  .j-place{grid-template-columns:44px 1fr;column-gap:var(--s2)}
  .j-left .j-card,.j-right .j-card{grid-column:2;grid-row:2}
  .j-photo,.j-left .j-photo,.j-right .j-photo{grid-column:2;grid-row:1;width:100%;
    margin:0 0 var(--s2)}
  .j-marker{grid-column:1;grid-row:1;width:40px;height:40px;margin:2px 0 0;
    box-shadow:0 0 0 5px var(--cream-alt)}
  .j-marker svg{width:25px;height:25px}
  .j-place+.j-place{margin-top:var(--s5)}
  .j-card{padding:var(--s2) var(--s2) var(--s3)}
}
.j-kicker{font-family:var(--font-body);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin:0 0 4px;font-weight:700}
.j-card .j-kicker+h2{margin-top:0}
.j-card .looks-like p:last-child{margin-bottom:0}
.j-hero{padding-bottom:var(--s3)}
.j-hero h1{margin-bottom:var(--s2)}
.j-hero .lead{margin:0}
.j-close{margin:var(--s5) auto 0;max-width:56ch;text-align:center;font-size:18px}