/* ==========================================================================
   Better Way Movement palette lock — loaded only on index.html, after style.css
   Navy #002F56 · Teal #4BB6BE · Citron #C3BC67 · Magenta #DE347C
   Purple #8B7BB0 · Oat #EEE7D6
   Nothing on this page may use a colour outside that list.
   ========================================================================== */

:root{
  --navy:#002F56; --teal:#4BB6BE; --citron:#C3BC67;
  --magenta:#DE347C; --purple:#8B7BB0; --oat:#EEE7D6;

  /* remap every inherited Floral Botanical token onto the six brand colours */
  --green:#002F56;
  --blush:#8B7BB0;
  --cream:#EEE7D6;
  --paper:#EEE7D6;
  --ink:#002F56;
  --body:#002F56;
  --gold:#DE347C;
  --rose:#8B7BB0;
  --sage:#4BB6BE;
  --green-soft:rgba(0,47,86,.72);
  --line:rgba(0,47,86,.26);
  --line-soft:rgba(0,47,86,.16);
}

body{background:var(--oat);color:var(--navy)}

/* --- chrome ------------------------------------------------------------- */
.copytag{background:var(--navy);color:var(--oat)}
header.site{background:rgba(238,231,214,.95);border-bottom:1px solid rgba(0,47,86,.14)}

/* --- hero --------------------------------------------------------------- */
/* the photo stays — desaturated and washed navy so it reads inside the palette */
.hero-img img.bg{filter:grayscale(1) contrast(1.04) brightness(.96)}
.hero-img::after{background:linear-gradient(180deg,
   rgba(0,47,86,.78) 0%,rgba(0,47,86,.62) 42%,rgba(0,47,86,.78) 100%)}
.hero-img h1,.hero-img .inner{color:var(--oat)}
.hero-img h1 em{color:var(--citron)}
.hero-img p{color:rgba(238,231,214,.95)}
.btn-gold{background:var(--magenta);color:var(--oat)}

/* --- the quote band ----------------------------------------------------- */
.rosewood{background:var(--purple);background-image:none}
.rosewood p{color:var(--oat)}
.rosewood p em{font-style:italic;color:var(--citron)}
.rosewood .attrib{color:rgba(238,231,214,.72)}

/* --- our goals ---------------------------------------------------------- */
section.goals{background:var(--oat)}
.goal .arch::after{border-color:rgba(238,231,214,.45)}
.goal .arch img{filter:drop-shadow(0 6px 16px rgba(0,47,86,.22))}
.goal .media::before{border-color:rgba(0,47,86,.28)}
.goal .num{color:var(--teal)}
.goal h3{color:var(--navy)}
.goal .hook{color:var(--magenta)}
.goal ul li{color:var(--navy)}
.goal ul li::before{background:var(--magenta)}
.goal ul li b{color:var(--navy);border-bottom-color:rgba(75,182,190,.85)}
.goal .pnote{color:rgba(0,47,86,.66)}

/* --- who we're looking for --------------------------------------------- */
section.deep{background:var(--navy);color:var(--oat)}
section.deep h2,section.deep h3{color:var(--oat)}
section.deep p{color:rgba(238,231,214,.92)}
.roles .r h3{color:var(--citron)}
.roles .r p{color:rgba(238,231,214,.9)}

/* --- meet ava / testimonial / restore ----------------------------------- */
.approach2{background:var(--purple)}
.approach2 h2,.approach2 p{color:var(--oat)}
.approach2 .txt::before{display:none}
.avaframe::before{background:var(--citron);background-image:none}
.avaframe .vlabel{color:var(--oat)}
.testi{background:var(--oat);background-image:none}
.testi .card4{background:var(--navy)}
.testi .inner4{border-color:rgba(238,231,214,.7)}
.testi p{color:var(--oat)}
.restore h2 em{color:var(--teal)}
.restore .fbmono{background:var(--citron);color:var(--navy)}

/* --- why fbm panel ------------------------------------------------------ */
.whyfbm .panel4{background:var(--citron)}
.whyfbm h2,.whyfbm .st,.whyfbm p{color:var(--navy)}

/* --- begin band --------------------------------------------------------- */
.begin2 img.bg{filter:grayscale(1) contrast(1.06)}
.begin2::after{background:var(--navy);opacity:.82;mix-blend-mode:normal}
.begin2 h2,.begin2 p{color:var(--oat)}
.begin2 h2 em{color:var(--citron)}
.begin2 .flowlbl{color:var(--citron)}
.begin2 .rail .st{color:var(--oat)}
.begin2 .rail::before{background:rgba(238,231,214,.6)}
.begin2 .rail .st::before{background:var(--citron)}
.begin2 .rail .st a{color:var(--teal)}
.btn-outline{border-color:var(--oat);color:var(--oat)}
.btn-outline:hover{background:var(--oat);color:var(--navy)}

/* --- footer ------------------------------------------------------------- */
footer.site{background:var(--navy)}
footer.site .begin h2 em{color:var(--citron)}
footer.site .begin .rule{background:var(--magenta)}
footer.site .begin .btn-tan{background:var(--magenta);color:var(--oat)}
footer.site button{background:var(--magenta);color:var(--oat)}
footer.site input{background:var(--oat);color:var(--navy)}
footer.site .fsoc a{border-color:rgba(238,231,214,.55)}
footer.site .fsoc svg{stroke:var(--oat)}

/* ==========================================================================
   Join / contact block
   ========================================================================== */
.join{background:var(--oat);padding:clamp(3.4rem,7vw,5.6rem) 0}
.join .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,6vw,5rem);
            align-items:start}
@media(max-width:920px){.join .grid{grid-template-columns:1fr;gap:2.6rem}}

.join h2{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08;color:var(--navy)}
.join h2 em{font-style:italic;color:var(--magenta)}
.join .rule{background:var(--magenta);margin:1.6rem 0}
.join .lead{color:var(--navy);max-width:34rem}
.join .sig{font-family:'Cormorant Garamond',serif;font-style:italic;
           color:rgba(0,47,86,.8);margin-top:1.4rem}

.meetnotes{margin-top:clamp(2.2rem,5vw,3.2rem)}
.meetnotes h3{font-family:'Cormorant Garamond',serif;font-weight:400;
              font-size:clamp(1.5rem,3vw,2.1rem);color:var(--navy);margin-bottom:1.2rem}
.meetnotes h3 em{font-style:italic;color:var(--teal)}
.meetnotes ul{list-style:none;margin:0;padding:0}
.meetnotes li{position:relative;padding-left:1.5rem;margin-bottom:.78rem;
              font-size:clamp(.98rem,1.5vw,1.04rem);line-height:1.5;color:var(--navy)}
.meetnotes li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:1px;
                      background:var(--teal)}
.meetnotes li b{font-weight:400;border-bottom:1px solid rgba(195,188,103,.9)}

.joinform{background:var(--oat);border:1px solid rgba(0,47,86,.2);
          padding:clamp(1.6rem,3.4vw,2.6rem)}
.joinform .formhead{border-bottom:1px solid rgba(0,47,86,.16);
                    padding-bottom:1.3rem;margin-bottom:1.6rem}
.joinform .formhead h3{font-family:'Cormorant Garamond',serif;font-weight:400;
                       font-size:clamp(1.7rem,3.4vw,2.3rem);color:var(--navy);margin:0}
.joinform .formhead h3 em{font-style:italic;color:var(--magenta)}
.joinform .formhead p{margin:.5rem 0 0;font-size:.98rem;color:rgba(0,47,86,.78)}

.joinform label{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
                color:rgba(0,47,86,.72);margin:1.2rem 0 .45rem}
.joinform label .opt{text-transform:none;letter-spacing:.04em;opacity:.7}
.joinform input[type=text],.joinform input[type=email],.joinform input[type=tel],
.joinform input:not([type]),.joinform textarea{
  width:100%;background:rgba(255,255,255,.55);border:1px solid rgba(0,47,86,.18);
  border-bottom:2px solid var(--teal);border-radius:3px 3px 0 0;
  padding:.85rem .95rem;font-family:'Ovo',Georgia,serif;font-size:1rem;color:var(--navy)}
.joinform textarea{min-height:7.5rem;resize:vertical}
.joinform input::placeholder,.joinform textarea::placeholder{color:rgba(0,47,86,.42)}
.joinform input:focus,.joinform textarea:focus{outline:none;border-bottom-color:var(--magenta)}

.joinform label.check{display:flex;align-items:flex-start;gap:.7rem;
                      font-size:.98rem;letter-spacing:0;text-transform:none;
                      color:var(--navy);margin:.7rem 0 0;cursor:pointer}
.joinform label.check input{accent-color:var(--magenta);width:17px;height:17px;margin-top:.15rem}

.joinform button{width:100%;margin-top:1.8rem;background:var(--magenta);color:var(--oat);
                 border:0;cursor:pointer;padding:1.05rem 1rem;border-radius:999px;
                 font-family:'Ovo',Georgia,serif;font-size:.74rem;letter-spacing:.26em;
                 text-transform:uppercase}
.joinform button:hover{background:var(--navy)}
.joinform #joinstatus{margin-top:.9rem;font-size:.95rem;color:var(--teal);min-height:1.2em}
.joinform .fine{margin-top:.6rem;font-size:.8rem;line-height:1.5;color:rgba(0,47,86,.6)}

/* ==========================================================================
   Header wordmark
   ========================================================================== */
.logolock.bwmlock{display:flex;flex-direction:column;line-height:1;text-decoration:none;
                  padding:.2rem 0}
.logolock.bwmlock img{display:none}
.bwmlock .l1{font-family:'Cormorant Garamond',serif;font-size:clamp(1.15rem,2.2vw,1.5rem);
             letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.bwmlock .l2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.15rem,2.2vw,1.5rem);
             letter-spacing:.16em;text-transform:uppercase;color:var(--magenta);margin-top:.16em}
.bwmlock .l3{font-family:'Ovo',Georgia,serif;font-size:.56rem;letter-spacing:.34em;
             text-transform:uppercase;color:rgba(0,47,86,.66);margin-top:.5em}

/* ==========================================================================
   Footer
   ========================================================================== */
.bigfoot{background:var(--navy);color:var(--oat);text-align:center;
         padding:clamp(3.2rem,7vw,5rem) 0 2.4rem}
.bigfoot .affil-label{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
                      color:rgba(238,231,214,.6)}
.bigfoot .logos{display:flex;align-items:center;justify-content:center;
                gap:clamp(1.6rem,4vw,3rem);flex-wrap:wrap;margin:1.4rem 0 clamp(2.4rem,5vw,3.6rem)}
.bigfoot .logos img{height:clamp(40px,6vw,58px);width:auto;
                    filter:brightness(0) invert(1);opacity:.86}

.bigfoot .bfbrand-row{display:flex;align-items:center;justify-content:center;
                      gap:clamp(1rem,2.4vw,1.8rem)}
.bigfoot .bfapple{height:clamp(58px,9vw,86px);width:auto}
.bigfoot .bwlock{display:flex;flex-direction:column;line-height:1;text-align:left}
.bigfoot .bwlock .l1,.bigfoot .bwlock .l2{font-family:'Cormorant Garamond',serif;
   font-size:clamp(1.5rem,3.6vw,2.4rem);letter-spacing:.14em;text-transform:uppercase}
.bigfoot .bwlock .l1{color:var(--oat)}
.bigfoot .bwlock .l2{color:var(--magenta);margin-top:.14em}
.bigfoot .bwlock .l3{font-family:'Ovo',Georgia,serif;font-size:.62rem;letter-spacing:.34em;
   text-transform:uppercase;color:var(--citron);margin-top:.7em}

.bigfoot .socials{display:flex;justify-content:center;gap:.9rem;margin:clamp(2rem,4vw,2.8rem) 0}
.bigfoot .socials a{width:42px;height:42px;border:1px solid rgba(238,231,214,.5);
                    border-radius:50%;display:grid;place-items:center}
.bigfoot .socials a:hover{background:var(--citron);border-color:var(--citron)}
.bigfoot .socials svg{width:18px;height:18px;fill:none;stroke:var(--oat);stroke-width:1.6}
.bigfoot .socials a:hover svg{stroke:var(--navy)}

.bigfoot .states{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
                 color:var(--citron)}
.bigfoot .bfemail{display:inline-block;margin-top:1rem;font-size:.78rem;letter-spacing:.22em;
                  text-transform:uppercase;color:var(--oat);text-decoration:none;
                  border-bottom:1px solid rgba(238,231,214,.4);padding-bottom:.3rem}
.bigfoot .bfemail:hover{border-bottom-color:var(--citron);color:var(--citron)}
.bigfoot .subhead{font-family:'Cormorant Garamond',serif;
                  font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.45;
                  max-width:26rem;margin:1.8rem auto 1.3rem;color:var(--oat)}
.bigfoot #subform{display:flex;gap:.6rem;max-width:26rem;margin:0 auto;flex-wrap:wrap}
.bigfoot #subform input{flex:1 1 12rem;background:var(--oat);border:0;border-radius:999px;
   padding:.9rem 1.2rem;font-family:'Ovo',Georgia,serif;font-size:.95rem;color:var(--navy)}
.bigfoot #subform button{background:var(--magenta);color:var(--oat);border:0;cursor:pointer;
   border-radius:999px;padding:.9rem 1.9rem;font-family:'Ovo',Georgia,serif;
   font-size:.7rem;letter-spacing:.24em;text-transform:uppercase}
.bigfoot #subform button:hover{background:var(--citron);color:var(--navy)}
.bigfoot .substatus{font-size:.9rem;margin-top:.9rem;min-height:1.2rem;color:var(--citron)}

.bigfoot .bflegal{margin-top:clamp(2.4rem,5vw,3.4rem);font-size:.8rem;
                  color:rgba(238,231,214,.7)}
.bigfoot .bflegal a{color:rgba(238,231,214,.7);text-decoration:none}
.bigfoot .bflegal a:hover{color:var(--citron)}
.bigfoot .bfnote{max-width:44rem;margin:1.2rem auto 0;padding-top:1.4rem;
                 border-top:1px solid rgba(238,231,214,.18);
                 font-size:.86rem;line-height:1.6;color:rgba(238,231,214,.66)}

/* ==========================================================================
   Heart & hands artwork (replaces every photograph on this page)
   ========================================================================== */
.hero-img{background:var(--navy)}
.hero-img img.bg.heartbg{filter:none;object-fit:contain;object-position:center;
                         width:min(96%,900px);height:100%;left:50%;transform:translateX(-50%);
                         opacity:.9}
.hero-img::after{background:radial-gradient(ellipse 58% 46% at 50% 50%,
   rgba(0,47,86,.86) 0%,rgba(0,47,86,.62) 55%,rgba(0,47,86,.5) 100%)}

.crowdart img,.heroheart img,.bigheart img{width:100%;height:auto;display:block}
.crowdart{align-self:center}
.heroheart img{max-width:420px;margin:0 auto}
.bigheart img{max-width:280px;margin:0 auto}

.heartpair{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:1rem;
           min-height:clamp(260px,34vw,420px)}
.heartpair .hp{width:min(44%,190px);border-radius:999px 999px 10px 10px;padding:1.4rem 1rem 0;
               display:flex;align-items:flex-end;justify-content:center}
.heartpair .hp.a{background:var(--teal)}
.heartpair .hp.b{background:var(--citron);margin-bottom:2.4rem}
.heartpair .hp img{width:100%;height:auto;display:block}

.hcirc{width:clamp(130px,17vw,180px);aspect-ratio:1;border-radius:50%;background:var(--c);
       margin:0 auto 1.2rem;display:flex;align-items:flex-end;justify-content:center;
       overflow:hidden}
.hcirc img{width:62%;height:auto;display:block}

.whyfbm .panelnote{margin-top:2.2rem;text-align:center;font-size:1rem;color:var(--navy)}
.whyfbm .panelnote a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* scrolling focus-areas marquee */
.marq{background:var(--navy);overflow:hidden;padding:1.1rem 0;
      margin:clamp(2.4rem,5vw,3.6rem) 0 0}
.mrail{display:flex;gap:2.4rem;white-space:nowrap;width:max-content;
       animation:mscroll 46s linear infinite}
.mrail span{font-family:'Cormorant Garamond',serif;font-size:clamp(1rem,2vw,1.3rem);
            letter-spacing:.1em;text-transform:uppercase;color:var(--oat)}
.mrail span::after{content:'\00B7';margin-left:2.4rem;color:var(--citron)}
@keyframes mscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mrail{animation:none}}

.begin2{background:var(--navy)}
.begin2 .in{align-items:center}
.begin2 .btn-outline{margin-left:.8rem}
@media(max-width:620px){.begin2 .btn-outline{margin:1rem 0 0}}

/* ==========================================================================
   About page
   ========================================================================== */
.abhero{background:var(--navy);color:var(--oat);text-align:center;
        padding:clamp(3.4rem,8vw,6rem) 0 clamp(3rem,6vw,4.6rem);position:relative}
.abhero .kicker{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
                color:var(--citron);margin-bottom:1.6rem}
.abhero h1{color:var(--oat);font-family:'Cormorant Garamond',serif;font-weight:300;
           font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.12}
.abhero h1 em{font-style:italic;color:var(--magenta)}
.abhero .abmark{width:clamp(74px,10vw,110px);height:auto;margin-top:2.2rem}

.biglead{font-family:'Cormorant Garamond',serif;font-size:clamp(1.4rem,3vw,2rem);
         line-height:1.35;color:var(--navy);margin-bottom:1.4rem}
.panellead{max-width:46rem;margin:0 auto 2.4rem;text-align:center;color:var(--navy)}
.panellead b{font-weight:400;border-bottom:1px solid rgba(0,47,86,.4)}
.whatwe{max-width:44rem;margin:0 auto}
.whatwe h3{font-family:'Cormorant Garamond',serif;font-weight:400;
           font-size:clamp(1.4rem,3vw,1.9rem);color:var(--navy);margin-bottom:1rem}
.whatwe ul{list-style:none;margin:0;padding:0}
.whatwe li{position:relative;padding-left:1.5rem;margin-bottom:.72rem;line-height:1.5;
           color:var(--navy)}
.whatwe li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:1px;
                   background:var(--navy)}
.whatwe li b{font-weight:400;border-bottom:1px solid rgba(0,47,86,.45)}

/* hero heart: let the artwork read, keep the type legible */
.hero-img img.bg.heartbg{opacity:1;width:min(90%,760px)}
.hero-img::after{background:rgba(0,47,86,.34)}
.hero-img h1,.hero-img p{text-shadow:0 2px 18px rgba(0,47,86,.95),0 0 42px rgba(0,47,86,.8)}
.hero-img .inner{padding-top:clamp(5rem,11vw,8rem);padding-bottom:clamp(5rem,11vw,8rem)}

/* nav: five items now, keep them on one line */
nav.main{flex-wrap:nowrap}
nav.main a{font-size:clamp(.72rem,1.15vw,.86rem);letter-spacing:.1em;white-space:nowrap}
@media(max-width:1080px){nav.main{flex-wrap:wrap;justify-content:center}}

/* let the heart artwork show at full strength; type rides on its own shadow */
.hero-img::after{background:transparent}
.hero-img .inner{padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(3rem,7vw,5rem)}
.hero-img img.bg.heartbg{width:min(84%,700px)}
.hero-img h1,.hero-img p{text-shadow:0 2px 10px rgba(0,47,86,1),0 0 30px rgba(0,47,86,.95),
                                     0 0 60px rgba(0,47,86,.85)}

/* ==========================================================================
   Process & Principals page
   ========================================================================== */
.ethos{background:var(--oat);padding:clamp(3.2rem,7vw,5rem) 0}
.ethos h2{font-size:clamp(2rem,4.4vw,3rem);line-height:1.14}
.ethos .subhead{font-family:'Cormorant Garamond',serif;font-weight:400;
                font-size:clamp(1.35rem,2.8vw,1.9rem);color:var(--navy);margin:2rem 0 .9rem}
.ethos p{margin-bottom:1.1rem}

.prin{background:var(--navy);padding:clamp(3.4rem,7vw,5.4rem) 0}
.prin h2{color:var(--oat)}
.prin h2 em{color:var(--magenta)}
.prin .rule{background:var(--magenta)}
.prin .plede{color:rgba(238,231,214,.85);margin-top:1rem}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,2.6rem);
       margin-top:clamp(2.6rem,5vw,3.8rem)}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}}
.parch{text-align:center}
/* arch shape with the zebra pattern offset behind it */
.arcbox{position:relative;width:100%;aspect-ratio:3/3.9;
        border-radius:999px 999px 8px 8px;background:var(--c);
        display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
        margin-bottom:1.2rem}
.parch{position:relative}
.parch::before{content:'';position:absolute;left:16px;top:16px;right:-16px;
               height:calc(100% - 5.4rem);
               background:url("img/bwm/zebra.png") center/150px auto repeat;
               border-radius:999px 999px 8px 8px;z-index:0}
.arcbox{position:relative;z-index:1}
.arcbox img{width:66%;height:auto;display:block}
.parch p{position:relative;z-index:1;font-family:'Cormorant Garamond',serif;
         font-size:clamp(1.05rem,1.9vw,1.28rem);line-height:1.32;color:var(--oat)}

/* how we achieve a better way */
.journey{background:var(--navy)}
.journey h2{color:var(--oat)}
.journey h2 em{color:var(--citron)}
.journey .lead{color:rgba(238,231,214,.9)}
.jgrid{grid-template-columns:1fr 1fr}
.jgrid::before{background-image:url("img/path.png");filter:hue-rotate(190deg) saturate(.5) brightness(1.4);
               opacity:.35;width:min(52%,260px)}
.jstep{display:flex;gap:.7rem;align-items:baseline;max-width:none;margin:0;
       font-family:'Cormorant Garamond',serif;font-size:clamp(1.05rem,1.9vw,1.3rem);
       line-height:1.3;color:var(--oat)}
.jstep .n{font-size:.72rem;letter-spacing:.14em;color:var(--citron);flex:0 0 auto}
.jstep.s1,.jstep.s2,.jstep.s3,.jstep.s4{grid-column:auto;justify-self:start;margin:0}

/* zebra block sits behind the arch only — never over the principle text */
.parch::before{left:18px;top:18px;right:auto;width:100%;height:auto;aspect-ratio:3/3.9}
.parch p{margin-top:.2rem}

/* principles as editorial rows — arch left, number + principle right, alternating */
.prin .pill-head{max-width:52rem;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.prin .pill-head h2{color:var(--oat);font-size:clamp(2rem,4.4vw,3rem)}
.prin .pill-head h2 em{color:var(--magenta)}
.prin .pill-head p{color:rgba(238,231,214,.86);margin-top:1.2rem}

.prow{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(2rem,5vw,4rem);
      align-items:center;padding:clamp(1.8rem,3.6vw,2.8rem) 0}
@media(max-width:820px){.prow{grid-template-columns:1fr;gap:1.6rem}}
.prow.flip .media{order:2}
@media(max-width:820px){.prow.flip .media{order:0}}
.prow .media{position:relative;display:flex;justify-content:center}
.prow .media::before{content:'';position:absolute;width:min(100%,240px);aspect-ratio:3/3.9;
  background:url("img/bwm/zebra.png") center/130px auto repeat;
  border-radius:999px 999px 8px 8px;transform:translate(20px,20px);z-index:0}
.prow.flip .media::before{transform:translate(-20px,20px)}
.prow .arcbox{position:relative;z-index:1;width:min(100%,240px);aspect-ratio:3/3.9;
  border-radius:999px 999px 8px 8px;background:var(--c);margin:0;
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.prow .arcbox img{width:66%;height:auto;display:block}
.prow .copy{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline}
@media(max-width:560px){.prow .copy{grid-template-columns:1fr}}
.prow .num{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.8vw,2.9rem);
           color:var(--citron);line-height:1}
.prow h3{font-family:'Cormorant Garamond',serif;font-weight:300;color:var(--oat);
         font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.18;margin:0}

/* ---- services / principals page: original FBM layout, brand skin ---------- */
.svc-hero{background:var(--navy)}
.svc-hero .panel{background:var(--oat)}
.svc-hero .panel h1{color:var(--navy)}
.svc-hero .panel h1 em{color:var(--magenta)}
.svc-hero .panel p{color:var(--navy)}
.btn-olive{background:var(--citron);color:var(--navy);border-color:var(--navy)}
.monogram{border-color:var(--citron);color:var(--navy);background:var(--oat)}
.svc-hero .shot .arcbox{width:100%;aspect-ratio:3/4;margin:0}

.greenband{background:var(--purple)}
.greenband::after{display:none}
.greenband h2,.greenband p{color:var(--oat)}
.greenband h2 em{color:var(--citron)}

.pill-head h2{color:var(--navy);font-size:clamp(2rem,4.4vw,3rem)}
.pill-head h2 em{font-style:italic;color:var(--magenta)}
.pill-head p{color:var(--navy);margin-top:1.2rem}

/* arch graphic + zebra offset block, in place of each pillar photo */
.pill .media{padding:0 1.5rem 1.5rem 0}
.pill .media::before{background:url("img/bwm/zebra.png") center/140px auto repeat}
.pill .arcbox{position:relative;z-index:1;width:100%;aspect-ratio:3/4.1;margin:0;
  border-radius:999px 999px 8px 8px;background:var(--c);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center}
.pill .arcbox img{width:64%;height:auto;display:block}
.pill .num{color:var(--citron)}
.pill h3{color:var(--navy);margin-bottom:0}

.chintz{background:var(--oat);background-image:none}
.chintz .card3{background:var(--purple)}
.chintz h2,.chintz p{color:var(--oat)}
.btn-green{background:var(--magenta);color:var(--oat)}
.svc-hero .shot .arcbox{border-radius:999px 999px 8px 8px;overflow:hidden;background:var(--c);
  display:flex;align-items:flex-end;justify-content:center}
.svc-hero .shot .arcbox img{width:58%;height:auto;display:block}

/* ==========================================================================
   Our Goals — betterwaymovement.com treatment
   woodland ground · big arch + offset zebra block · oat card on a teal edge
   ========================================================================== */
section.goals{background:url("img/bwm/woodland.png") center/520px auto repeat;
              padding:clamp(2.4rem,5vw,4rem) 0 clamp(3rem,6vw,4.6rem)}
.goals-head{background:var(--oat);border-radius:6px;padding:clamp(1.6rem,3vw,2.4rem) 2rem 1.8rem;
            margin-bottom:clamp(2rem,4vw,3rem)}
.goals-head h2{color:var(--navy)}
.goals-head h2 em{color:var(--magenta)}
.goals-head .rule{background:var(--magenta)}

.goal{grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3.4vw,3rem);align-items:center;
      padding:clamp(1.6rem,3.4vw,2.6rem) 0}
@media(max-width:900px){.goal{grid-template-columns:1fr}}

/* big arch, zebra block peeking out behind it */
.goal .arch{width:100%;max-width:none;aspect-ratio:3/3.55;border-radius:999px 999px 6px 6px}
.goal .arch::after{display:none}
.goal .arch img{height:80%}
.goal .media::before{content:'';position:absolute;width:52%;height:78%;border:0;border-radius:0;
  background:url("img/bwm/zebra.png") center/150px auto repeat;
  right:-4%;top:12%;left:auto;transform:none;z-index:0}
.goal.flip .media::before{background-image:url("img/bwm/zebra2.png");
  left:-4%;right:auto;transform:none}
.goal .arch{position:relative;z-index:1}

/* the copy sits on an oat card with a teal edge behind it */
.goal .copy{position:relative;background:var(--oat);
            padding:clamp(1.6rem,3vw,2.6rem) clamp(1.5rem,2.8vw,2.4rem);
            box-shadow:-14px 14px 0 var(--teal)}
.goal.flip .copy{box-shadow:14px 14px 0 var(--teal)}
@media(max-width:900px){.goal .copy,.goal.flip .copy{box-shadow:0 12px 0 var(--teal)}}

.goal .tline{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
             margin-bottom:.9rem}
.goal .num{font-size:clamp(2.4rem,5vw,3.6rem);color:var(--teal);line-height:.9}
.goal h3{font-size:clamp(1.9rem,4vw,2.9rem);color:var(--navy);line-height:1.05}
.goal .hook{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--navy);
            font-size:clamp(1.1rem,2vw,1.35rem);margin-bottom:1.2rem}
.goal ul li{font-size:clamp(.95rem,1.4vw,1.02rem);margin-bottom:.62rem}
.goal ul li::before{width:0;height:0;left:.15rem;top:.5em;
  border-radius:50%;box-shadow:0 0 0 2.5px var(--navy);background:none}
.goal ul li b{color:var(--navy);border-bottom:0;font-weight:400;
              text-decoration:underline;text-decoration-color:rgba(75,182,190,.9);
              text-underline-offset:3px}
.goal .pnote{margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(0,47,86,.18);
             font-family:'Cormorant Garamond',serif;font-style:italic;text-transform:none;
             letter-spacing:0;font-size:clamp(1rem,1.7vw,1.15rem);color:var(--navy)}
/* (zebra block geometry lives with the .goal .media::before rule further down —
   that later rule uses top/bottom/left/right insets and wins over width/height here) */

/* "How We Achieve a Better Way" — bigger type, readable numbers, citron squiggle,
   items scattered around it the way the original steps were */
.jgrid{align-items:start;row-gap:clamp(1.4rem,3vw,2.4rem)}
.jgrid::before{width:min(64%,340px);opacity:.9;filter:none;
  background:var(--citron);
  -webkit-mask:url("img/path.png") center/contain no-repeat;
          mask:url("img/path.png") center/contain no-repeat}

.jstep{font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.24;gap:.9rem;align-items:baseline}
.jstep .n{font-family:'Cormorant Garamond',serif;font-size:clamp(1rem,1.9vw,1.35rem);
          letter-spacing:.04em;color:var(--citron);opacity:1}

/* scatter */
.jstep:nth-child(4n+1){margin-left:0;margin-top:.4rem}
.jstep:nth-child(4n+2){margin-left:1.6rem;margin-top:-1.4rem}
.jstep:nth-child(4n+3){margin-left:2.4rem;margin-top:2rem}
.jstep:nth-child(4n+4){margin-left:.6rem;margin-top:.8rem}
@media(max-width:820px){.jstep{margin-left:0 !important;margin-top:0 !important}}
.jgrid::before{opacity:1 !important}
/* citron squiggle, baked into the asset so no filter/mask is involved */
.jgrid::before{background:url("img/bwm/path-citron.png") center/contain no-repeat !important;
               -webkit-mask:none !important;mask:none !important;
               filter:none !important;opacity:1 !important;width:min(64%,340px) !important}
.jgrid::before{opacity:.5 !important;width:min(54%,290px) !important}

/* ==========================================================================
   Better Way Principles — colour bands with hands rising through them
   ========================================================================== */
.bwprin{background:var(--oat);padding:0 0 clamp(2.4rem,5vw,4rem)}
.bwbanners{position:relative}
.bwband{position:relative;background:var(--band);color:var(--ink);
        min-height:clamp(120px,15vw,178px);display:flex;align-items:center;
        padding:1.2rem clamp(1.2rem,4vw,3rem)}
.bwband .bh{position:absolute;bottom:0;height:clamp(190px,24vw,290px);width:auto;
            z-index:2;pointer-events:none}
.bwband.left  .bh{left:clamp(1rem,6vw,7rem)}
.bwband.right .bh{right:clamp(1rem,6vw,7rem)}
.bwband.left  p{margin-left:clamp(8rem,26vw,20rem);text-align:left}
.bwband.right p{margin-right:clamp(8rem,26vw,20rem);text-align:right;margin-left:auto}
.bwband p{position:relative;z-index:1;margin:0;max-width:36rem;
          font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.1;
          font-size:clamp(1.5rem,3.6vw,2.9rem);letter-spacing:.01em;color:var(--ink)}
.bwband p em{font-style:italic;font-weight:300;
             font-size:.72em;letter-spacing:.02em;opacity:.92}
@media(max-width:760px){
  .bwband{min-height:150px}
  .bwband .bh{height:170px;opacity:.9}
  .bwband.left p{margin-left:6.5rem}
  .bwband.right p{margin-right:6.5rem}
}

/* ==========================================================================
   Goals rows — matched to betterwaymovement.com's exact geometry and type
   scale, recoloured. Zebra back-blocks at their true 560px scale.
   ========================================================================== */
.goals-head{background:#fff}
.goal{grid-template-columns:1.05fr 1fr;gap:clamp(2.2rem,6vw,5rem);
      padding:clamp(3rem,7vw,5rem) 0;align-items:center}
@media(max-width:820px){.goal{grid-template-columns:1fr;gap:2rem}}

.goal .media{position:relative;display:block}
.goal .media::before{content:'';position:absolute;top:14%;bottom:-14%;left:14%;right:-20%;
  width:auto;height:auto;transform:none;border:0;border-radius:0;z-index:0;
  background:url("img/bwm/z-magenta-white.png") center/560px auto}
.goal.flip .media::before{left:-20%;right:14%;transform:none}
.goal:nth-of-type(4n+2) .media::before{background-image:url("img/bwm/z-citron.png")}
.goal:nth-of-type(4n+3) .media::before{background-image:url("img/bwm/z-white-magenta.png")}
.goal:nth-of-type(4n)   .media::before{background-image:url("img/bwm/z-pink.png")}

.goal .arch{position:relative;z-index:1;width:min(100%,470px);max-width:none;
  aspect-ratio:4/5.7;border-radius:999px 999px 16px 16px;overflow:hidden;
  background:var(--tint);display:block;margin:0}
.goal.flip .arch{margin-left:auto}
.goal .arch img{position:absolute;bottom:-2%;left:50%;transform:translateX(-50%);
  height:76%;width:auto;display:block}
.goal.flip .arch img{transform:translateX(-50%) scaleX(-1)}

.goal .copy{position:relative;z-index:2;background:#fff;
  padding:clamp(1.3rem,2.4vw,2rem) clamp(1.3rem,2.4vw,1.9rem);
  box-shadow:clamp(12px,1.6vw,20px) clamp(12px,1.6vw,20px) 0 var(--teal)}
.goal.flip .copy{box-shadow:calc(-1*clamp(12px,1.6vw,20px)) clamp(12px,1.6vw,20px) 0 var(--teal)}

.goal .tline{display:flex;gap:1.3rem;align-items:flex-start;margin-bottom:0}
.goal .num{font-size:clamp(4rem,6.4vw,5.8rem);line-height:.9;color:var(--teal)}
.goal h3{font-size:clamp(2.4rem,3.9vw,3.1rem);line-height:1.12;padding-top:.4rem;
         color:var(--navy);text-wrap:balance}
.goal .hook{font-style:italic;color:var(--purple);font-size:1.42rem;line-height:1.45;
            margin:.7rem 0 0}
.goal ul{margin-top:1.1rem}
.goal ul li{font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.3rem;line-height:1.6;
            font-weight:300;color:#3a332e;max-width:36rem;margin:.95rem 0;padding-left:1.2rem}
.goal ul li::before{content:'\00B7';width:auto;height:auto;background:none;box-shadow:none;
  border-radius:0;left:0;top:0;font-weight:700;color:var(--teal);font-size:1.3rem}
.goal ul li b{font-weight:500;color:var(--magenta);border-bottom:0;text-decoration:none}
.goal .pnote{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--purple);
  margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(0,47,86,.16);
  max-width:36rem;font-size:1.24rem;text-transform:none;letter-spacing:0}

/* ==========================================================================
   Navy used sparingly — big navy fields become purple / teal
   ========================================================================== */
.hero-img{background:var(--purple)}
.hero-img::after{background:rgba(139,123,176,.28)}
section.deep{background:var(--purple)}
.journey{background:var(--purple)}
.bigfoot{background:var(--teal)}
.bigfoot .bwlock .l2{color:var(--magenta)}
.bigfoot .socials a:hover{background:var(--oat);border-color:var(--oat)}
.bigfoot .socials a:hover svg{stroke:var(--teal)}
.prin{background:var(--purple)}
.testi .card4{background:var(--purple)}
.begin2{background:var(--purple)}
.begin2::after{background:var(--purple);opacity:.84}
.marq{background:var(--teal)}
.mrail span{color:var(--navy)}
.mrail span::after{color:var(--oat)}
/* the hero keeps navy — it's the one field where the teal heart and oat type
   both hold up; everywhere else navy is now an accent only */
.hero-img{background:var(--navy)}
.hero-img::after{background:transparent}

/* ==========================================================================
   Page ground goes white (oat stays a type/accent colour on dark fields)
   ========================================================================== */
body{background:#fff}
header.site{background:rgba(255,255,255,.96)}
section:not(.goals):not(.deep):not(.prin):not(.bwprin):not(.svc-hero):not(.abhero):not(.hero-img):not(.join):not(.introwide):not(.whyfbm),
.join,.testi,.chintz,.ethos,.bwprin{background:#fff}
.testi{background-image:none}
.chintz{background-image:none}
.joinform{background:#fff}
.joinform input,.joinform textarea{background:#fff}
.bigfoot #subform input{background:#fff}

/* intro block: full-width copy, crowd graphic beneath it */
.introwide{padding:clamp(3.2rem,7vw,5.4rem) 0}
.introtxt h2{max-width:34rem;font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.14}
.introtxt .rule{margin:1.6rem 0 2.2rem}
.introtxt p{columns:2;column-gap:clamp(2rem,5vw,4rem);max-width:none}
.introtxt p+p{margin-top:1.1rem}
@media(max-width:820px){.introtxt p{columns:1}}
.peopleart{margin-top:clamp(2.4rem,5vw,3.6rem);text-align:center}
.peopleart img{width:min(100%,900px);height:auto;display:block;margin:0 auto}

/* goals sit on white, not the woodland pattern */
section.goals{background:#fff;background-image:none}
.goals-head{background:transparent}

/* Our Goals head — bordered pill, flourish, monogram oval (as on betterwaymovement.com) */
.goals-head{position:relative;text-align:center;padding:clamp(1rem,2vw,2rem) 0 0;
            background:transparent;border-radius:0;margin-bottom:clamp(2rem,4vw,3rem)}
.goals-head h2{display:inline-block;background:#fff;color:var(--navy);border-radius:999px;
  padding:clamp(1.4rem,2.6vw,2.2rem) clamp(2.6rem,5vw,4.2rem) clamp(1.2rem,2.2vw,1.8rem);
  position:relative;z-index:1;border:3px solid var(--navy);
  box-shadow:inset 0 0 0 6px #fff,inset 0 0 0 7px var(--navy);
  font-size:clamp(3.6rem,7.6vw,6rem);line-height:1.04}
.goals-head h2::after{content:'';display:block;height:clamp(26px,3.4vw,42px);
  width:clamp(170px,22vw,280px);margin:.7rem auto 0;
  background:url("img/bwm/flourish.png") center/contain no-repeat}
.goals-oval{position:absolute;right:0;top:2.5rem;width:clamp(260px,28vw,375px);
  aspect-ratio:1852/1350;background:#fff;border-radius:50%;
  transform:rotate(-9deg) translate(2.5%,4%);z-index:0}
.goals-mono{position:absolute;right:0;top:2.5rem;width:clamp(260px,28vw,375px);
  height:auto;opacity:1;z-index:1}
@media(max-width:700px){.goals-oval,.goals-mono{display:none}}

/* columns belong to the block, not to each paragraph — otherwise every
   paragraph splits across both columns and the reading order breaks */
.introtxt{columns:2;column-gap:clamp(2rem,5vw,4rem)}
.introtxt h2,.introtxt .rule{column-span:all}
.introtxt p{columns:auto;break-inside:avoid;margin-top:0;margin-bottom:1.1rem}
@media(max-width:820px){.introtxt{columns:1}}

/* head: pill left, monogram right, as on betterwaymovement.com */
.goals-head{text-align:left;margin-bottom:3rem}
/* flourish stays centred inside the pill, as on betterwaymovement.com */
.goals-head h2::after{margin-left:auto;margin-right:auto}
/* crowd graphic runs the full content width */
.peopleart img{width:100%;max-width:none}

/* cards lift off the white page with a faint oat tint */
.goal .copy,.goals-head h2,.goals-oval{background:#FAF7F0}

/* ==========================================================================
   Footer — three columns, laid out like the Floral Botanical Medicine footer
   ========================================================================== */
.bigfoot{background:#fff;color:var(--navy);
  text-align:left;padding:clamp(3rem,6vw,4.6rem) 0 clamp(2rem,4vw,3rem)}
.bigfoot .footgrid{display:grid;grid-template-columns:1fr 1.15fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:900px){.bigfoot .footgrid{grid-template-columns:1fr;text-align:center;
  justify-items:center;gap:3rem}}

/* left — logo lockup, tagline, socials */
.bigfoot .fbrandcol{display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:900px){.bigfoot .fbrandcol{align-items:center}}
.bigfoot .bfapple{height:clamp(72px,8vw,104px);width:auto;margin-bottom:1rem}
.bigfoot .bwlock{text-align:left}
@media(max-width:900px){.bigfoot .bwlock{text-align:center}}
/* keep the wordmark on one line in the narrower footer column */
.bigfoot .bwlock .l1,.bigfoot .bwlock .l2{white-space:nowrap;
  font-size:clamp(1.3rem,2.4vw,1.95rem)}
.bigfoot .bwlock .l3{color:rgba(238,231,214,.85)}
.bigfoot .ftagline{font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.45;color:var(--oat);
  max-width:17rem;margin:1.3rem 0 0}
.bigfoot .socials{justify-content:flex-start;margin:1.6rem 0 0}
@media(max-width:900px){.bigfoot .socials{justify-content:center}}

/* centre — newsletter */
.bigfoot .fsubcol{text-align:center}
.bigfoot .fsubcol .subhead{font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.3rem,2.3vw,1.75rem);line-height:1.35;color:var(--oat);
  margin:0 0 1.8rem}
.bigfoot #subform{flex-direction:column;align-items:stretch;gap:1rem;max-width:22rem;
  margin:0 auto}
.bigfoot #subform input{flex:none;border-radius:2px;text-align:left;padding:1rem 1.1rem}
.bigfoot #subform button{border-radius:2px;padding:1rem 1.4rem}

/* right — contact, affiliation, links */
.bigfoot .fcontactcol h4{font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.45rem);letter-spacing:.14em;text-transform:uppercase;
  color:var(--oat);margin:0 0 1rem}
.bigfoot .fcontactcol .bfemail,.bigfoot .fcontactcol .bfsite{display:block;margin:0 0 .55rem;
  font-family:'Ovo',Georgia,serif;font-size:.95rem;letter-spacing:.02em;text-transform:none;
  color:var(--oat);text-decoration:underline;text-underline-offset:4px;border:0}
.bigfoot .fcontactcol .bfemail:hover,.bigfoot .fcontactcol .bfsite:hover{color:var(--magenta)}
.bigfoot .fcontactcol .affil-label{margin:1.8rem 0 .8rem;text-align:left;
  color:rgba(238,231,214,.75)}
@media(max-width:900px){.bigfoot .fcontactcol .affil-label{text-align:center}}
.bigfoot .fcontactcol .logos{justify-content:flex-start;gap:1.2rem;margin:0}
@media(max-width:900px){.bigfoot .fcontactcol .logos{justify-content:center}}
.bigfoot .fcontactcol .logos img{height:clamp(34px,4vw,46px)}
.bigfoot .flinks{list-style:none;margin:1.8rem 0 0;padding:0}
.bigfoot .flinks li{margin-bottom:.5rem}
.bigfoot .flinks a{color:var(--oat);font-size:.95rem;text-decoration:underline;
  text-underline-offset:4px}
.bigfoot .flinks a:hover{color:var(--magenta)}

/* bottom band */
.bigfoot .bfbottom{max-width:52rem;margin:clamp(2.6rem,5vw,3.6rem) auto 0;
  padding-top:1.6rem;border-top:1px solid rgba(238,231,214,.28);
  text-align:center;font-size:.92rem;line-height:1.6;color:rgba(238,231,214,.82)}

/* white ground — everything that was oat-on-teal flips to navy.
   These must sit AFTER the column rules above, which set oat. */
.bigfoot .bwlock .l1{color:var(--navy)}
.bigfoot .bwlock .l3{color:rgba(0,47,86,.65)}
.bigfoot .ftagline,.bigfoot .fsubcol .subhead,.bigfoot .fcontactcol h4,
.bigfoot .fcontactcol .bfemail,.bigfoot .fcontactcol .bfsite,
.bigfoot .flinks a{color:var(--navy)}
.bigfoot .affil-label,.bigfoot .fcontactcol .affil-label{color:rgba(0,47,86,.6)}
.bigfoot .socials a{border-color:rgba(0,47,86,.4)}
.bigfoot .socials svg{stroke:var(--navy)}
.bigfoot .socials a:hover{background:var(--magenta);border-color:var(--magenta)}
.bigfoot .socials a:hover svg{stroke:#fff}
.bigfoot #subform input{background:#fff;border:1px solid rgba(0,47,86,.28);color:var(--navy)}
.bigfoot #subform input::placeholder{color:rgba(0,47,86,.45)}
.bigfoot #subform button{background:var(--magenta);color:#fff}
.bigfoot #subform button:hover{background:var(--navy);color:#fff}
.bigfoot .substatus{color:var(--navy)}
/* WCH marks are magenta / navy artwork already — the white-out filter has to go */
.bigfoot .logos img{filter:none;opacity:1}
.bigfoot .bfbottom{border-top-color:rgba(0,47,86,.2);color:rgba(0,47,86,.75)}

/* ==========================================================================
   Who we're looking for — citron ground, flourish, kit-coloured role icons
   ========================================================================== */
section.deep{background:var(--citron);color:var(--navy)}
section.deep h2,section.deep h3,section.deep p{color:var(--navy)}
section.deep h2 em{color:var(--magenta)}
section.deep .narrow{color:var(--navy)}
/* swiggle under the heading, in place of the plain rule */
section.deep .rule.mid{display:none}
section.deep h2::after{content:'';display:block;height:clamp(26px,3.4vw,42px);
  width:clamp(170px,22vw,280px);margin:1.1rem auto 1.6rem;
  background:url("img/bwm/flourish.png") center/contain no-repeat}
/* no disc behind the icons — the graphics themselves carry the block */
section.deep .roles .r img{width:190px;height:190px;padding:0;background:none;
  border-radius:0;box-shadow:none;margin:0 auto 1.3rem}
section.deep .roles .r h3{color:var(--navy);font-weight:700;
  font-size:clamp(1.15rem,1.8vw,1.34rem);letter-spacing:.09em;margin-bottom:.7rem}
section.deep .roles .r p{color:var(--navy);font-size:clamp(1.12rem,1.6vw,1.26rem);
  line-height:1.55}
section.deep .narrow{font-size:clamp(1.3rem,2.3vw,1.62rem);line-height:1.55}
/* section heading — bigger and heavier */
section.deep h2{font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(2.6rem,5.4vw,4.2rem);line-height:1.06}
/* 10 roles in a balanced 5 + 5, wider than the default wrap so the bigger
   type isn't wrapping every three words */
section.deep .roles{display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(2rem,3.4vw,3rem) clamp(1.4rem,2.4vw,2.2rem);
  width:min(100%,1320px);margin-left:auto;margin-right:auto}
section.deep .roles .r{flex:none;width:auto}
@media(max-width:1080px){section.deep .roles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){section.deep .roles{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   Join section — woodland wallpaper ground, copy on a white box
   ========================================================================== */
.join{background:linear-gradient(rgba(0,26,48,.44),rgba(0,26,48,.44)),
                url("img/bwm/woodland-v2.png") center top/700px auto repeat}
.join .grid>div:first-child{background:#fff;
  padding:clamp(1.6rem,3.4vw,2.6rem) clamp(1.4rem,3vw,2.4rem);
  box-shadow:0 10px 30px rgba(0,25,48,.3);align-self:start}

/* ==========================================================================
   Count me in — teal panel (kit --teal), cream fields, navy type
   ========================================================================== */
.joinform{background:var(--teal);border:0;border-radius:4px;
          padding:clamp(1.8rem,3.6vw,2.8rem)}
.joinform .formhead{border-bottom:1px solid rgba(0,47,86,.28)}
.joinform .formhead h3{color:var(--navy)}
.joinform .formhead h3 em{color:#FAF7F0}
.joinform .formhead p{color:rgba(0,47,86,.82)}

.joinform label{color:rgba(0,47,86,.78)}
.joinform input[type=text],.joinform input[type=email],.joinform input[type=tel],
.joinform input:not([type]),.joinform textarea{
  background:#FAF7F0;border:1px solid rgba(0,47,86,.2);
  border-bottom:2px solid var(--navy);color:var(--navy)}
.joinform input::placeholder,.joinform textarea::placeholder{color:rgba(0,47,86,.45)}
.joinform input:focus,.joinform textarea:focus{border-bottom-color:var(--magenta)}

.joinform label.check{color:var(--navy)}
.joinform label.check input{accent-color:var(--magenta)}

.joinform button{background:var(--magenta);color:#FAF7F0}
.joinform button:hover{background:var(--navy);color:#FAF7F0}
.joinform #joinstatus{color:var(--navy)}
.joinform .fine{color:rgba(0,47,86,.7)}

/* ==========================================================================
   Hero — magenta/plum stripe ground, Fraunces display type
   (exact type + copy + background from betterwaymovement.com)
   ========================================================================== */
/* header sits on white — nav was inheriting white-on-white */
header.site nav.main a{color:var(--navy)}
header.site nav.main a:hover,header.site nav.main a.on{border-bottom-color:var(--magenta)}

/* no min-height — the hero hugs its copy so the marquee sits right under the buttons */
.hero-img{background:#fff;
          text-align:left;justify-content:flex-start;min-height:0}
.hero-img::after{display:none}
/* top padding clears the fixed header; bottom stays tight so the marquee
   sits just under the buttons */
.hero-img .inner{width:100%;max-width:1180px;margin:0 auto;
                 padding:clamp(4rem,9vw,7rem) clamp(1.5rem,4vw,2.5rem)
                         clamp(1.6rem,3vw,2.4rem)}
.hero-img+.marq{margin-top:0}

.hero-img .kicker{display:inline-block;font-family:'Space Grotesk',sans-serif;
  text-transform:uppercase;letter-spacing:.26em;font-size:.74rem;font-weight:500;
  color:var(--magenta);margin-bottom:1.7rem;position:relative;text-shadow:none}

.hero-img h1{font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(4.2rem,14.5vw,11rem);line-height:1;letter-spacing:-.012em;
  text-wrap:balance;color:var(--navy);position:relative;text-shadow:none}
.hero-img h1 .off{font-style:italic;font-weight:400;color:var(--magenta)}

.hero-img .lead{max-width:48rem;margin:2.2rem 0 0;font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.55;
  color:var(--navy);opacity:.88;position:relative;text-shadow:none}
.hero-img .lead b{font-weight:500;color:var(--magenta)}

.hero-img .cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;position:relative}
.hero-img .cta-row .btn{display:inline-block;font-family:'Space Grotesk',sans-serif;
  font-weight:500;letter-spacing:.15em;text-transform:uppercase;font-size:.74rem;
  padding:1.05rem 2.1rem;border:1px solid var(--teal);border-radius:999px;
  background:var(--teal);color:var(--navy);text-decoration:none;
  transition:transform .2s,box-shadow .2s}
.hero-img .cta-row .btn:hover{transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(8,4,20,.35)}

/* hands-and-heart artwork sits right, copy runs left */
.hero-img img.bg.heartbg{left:auto;right:clamp(-1rem,1vw,2rem);top:50%;
  width:clamp(300px,40vw,620px);height:auto;transform:translateY(-50%);
  object-fit:contain;z-index:1;pointer-events:none;mix-blend-mode:multiply}
@media(max-width:860px){
  .hero-img img.bg.heartbg{width:min(80vw,440px);right:-6%;opacity:.32}
  .hero-img h1{font-size:clamp(3.2rem,13vw,5.5rem)}
}

/* ==========================================================================
   Goal cards — typography matched to the "04. Health" reference:
   Fraunces headings, Space Grotesk body, navy bolds (no magenta, no underline)
   ========================================================================== */
/* media column hugs the arch, so the zebra block's percentages measure against
   the arch rather than the taller copy column (align-items is set twice above) */
.goal{align-items:start}

.goal .num{font-family:'Fraunces',serif;font-weight:500;color:var(--teal)}
.goal h3{font-family:'Fraunces',serif;font-weight:600;color:var(--navy)}
.goal .hook{font-family:'Fraunces',serif;font-style:italic;font-weight:400;
            color:var(--navy)}
.goal ul li{font-weight:400;color:#3a332e}
.goal ul li::before{color:var(--navy)}
.goal ul li b{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:0}
.goal .pnote{font-family:'Fraunces',serif;font-style:italic;color:rgba(0,47,86,.72)}

/* ==========================================================================
   Roots, Practice & Areas of Focus — woodland wallpaper ground,
   tree-filled circles, white text boxes
   ========================================================================== */
/* wallpaper underneath, darkened just enough to hold cream type */
.whyfbm .panel4{
  background:linear-gradient(rgba(0,26,48,.44),rgba(0,26,48,.44)),
             url("img/bwm/woodland-v2.png") center top/700px auto repeat;
  border-radius:16px;padding:clamp(2.2rem,5vw,3.6rem) clamp(1.4rem,3.5vw,2.8rem)}
.whyfbm .panel4 h2{color:var(--oat);
  text-shadow:0 2px 6px rgba(0,25,48,.85),0 0 20px rgba(0,25,48,.6)}

/* solid circles in colours pulled from the woodland wallpaper, one heart each */
.whyfbm .hcirc{width:clamp(140px,18vw,196px);background:var(--fill);
  border:5px solid #FAF7F0;box-shadow:0 0 0 4px rgba(0,25,48,.5),0 10px 28px rgba(0,25,48,.45);
  margin-bottom:1.7rem;align-items:center}
.whyfbm .hcirc img{display:block;width:66%;height:auto}
/* fills chosen so each graphic's own colours still read against them */
.whyfbm .trio>div:nth-child(1) .hcirc{--fill:#908C4D}
.whyfbm .trio>div:nth-child(2) .hcirc{--fill:#001D37}
.whyfbm .trio>div:nth-child(3) .hcirc{--fill:var(--magenta)}

/* white square box behind each cell's copy */
.whyfbm .trio>div{display:flex;flex-direction:column}
.whyfbm .tbox{background:#fff;border-radius:0;flex:1;
  padding:clamp(1.2rem,2.4vw,1.7rem) clamp(1.1rem,2.2vw,1.5rem);
  box-shadow:0 8px 24px rgba(0,25,48,.28)}
.whyfbm .tbox h3{color:var(--navy);margin-bottom:.55rem}
.whyfbm .tbox p{color:var(--navy)}

/* ==========================================================================
   Our Goals — very light magenta / white awning stripe ground
   ========================================================================== */
section.goals{
  background:repeating-linear-gradient(90deg,
    #fff 0 34px,
    rgba(222,52,124,.07) 34px 68px);
  background-attachment:fixed}
@media(max-width:700px){
  section.goals{background:repeating-linear-gradient(90deg,
    #fff 0 22px, rgba(222,52,124,.07) 22px 44px);
    background-attachment:scroll}
}

/* ==========================================================================
   Quote card — washed-back woodland under a pink wash
   ========================================================================== */
.testi .card4{
  background:
    linear-gradient(rgba(222,52,124,.50),rgba(222,52,124,.50)),
    linear-gradient(rgba(0,26,48,.58),rgba(0,26,48,.58)),
    url("img/bwm/woodland-v2.png") center/620px auto repeat;
  border-radius:14px}
.testi .inner4{border-color:rgba(250,247,240,.8)}
.testi p,.testi .attr{color:#FAF7F0}
.testi p em{color:#FAF7F0}

/* ==========================================================================
   Come Find Us — pale citron awning stripe in place of the purple
   ========================================================================== */
.begin2{background:repeating-linear-gradient(90deg,
  #fff 0 34px,
  rgba(195,188,103,.30) 34px 68px)}
.begin2::after{display:none}
.begin2 h2,.begin2 p{color:var(--navy)}
.begin2 h2 em{color:var(--magenta)}
@media(max-width:700px){
  .begin2{background:repeating-linear-gradient(90deg,
    #fff 0 22px, rgba(195,188,103,.30) 22px 44px)}
}

/* ==========================================================================
   Focus panel text boxes — woodland instead of flat white, held back only
   enough to carry the type. Panel behind them goes darker so the boxes
   read as the *more visible* patch of wallpaper.
   ========================================================================== */
.whyfbm .panel4{
  background:linear-gradient(rgba(0,26,48,.84),rgba(0,26,48,.84)),
             url("img/bwm/woodland-v2.png") center top/700px auto repeat}
.whyfbm .tbox{
  background:linear-gradient(rgba(0,26,48,.66),rgba(0,26,48,.66)),
             url("img/bwm/woodland-v2.png") center/520px auto repeat;
  border:1px solid rgba(250,247,240,.45);
  box-shadow:0 10px 30px rgba(0,20,40,.45)}
.whyfbm .tbox h3{color:#FAF7F0;
  text-shadow:0 2px 6px rgba(0,18,36,.9),0 0 18px rgba(0,18,36,.75)}
.whyfbm .tbox p{color:#FAF7F0;
  text-shadow:0 1px 4px rgba(0,18,36,.95),0 0 14px rgba(0,18,36,.8)}

/* ==========================================================================
   Focus panel — connector line with three dots, copy straight on the ground.
   Panel now uses the same wash the text boxes had, so it reads as one field.
   ========================================================================== */
.whyfbm .panel4{
  background:linear-gradient(rgba(0,26,48,.66),rgba(0,26,48,.66)),
             url("img/bwm/woodland-v2.png") center top/700px auto repeat}

/* horizontal rule the dots sit on */
.whyfbm .trio{position:relative}
.whyfbm .trio::before{content:'';position:absolute;z-index:0;
  left:8%;right:8%;top:26px;height:2px;background:rgba(250,247,240,.8)}
@media(max-width:860px){.whyfbm .trio::before{display:none}}

/* the dots themselves */
.whyfbm .hcirc{position:relative;z-index:1;
  width:54px;height:54px;min-width:0;aspect-ratio:1;
  background:#FAF7F0;border:0;border-radius:50%;box-shadow:none;
  margin:0 auto 1.8rem;padding:0}
.whyfbm .hcirc img,.whyfbm .hcirc::after{display:none}

/* no squares around the copy — it sits on the panel */
.whyfbm .tbox{background:none;border:0;box-shadow:none;padding:0;text-align:center}
.whyfbm .tbox h3{color:#FAF7F0;margin-bottom:.7rem;
  text-shadow:0 2px 6px rgba(0,18,36,.9),0 0 18px rgba(0,18,36,.75)}
.whyfbm .tbox p{color:#FAF7F0;
  text-shadow:0 1px 4px rgba(0,18,36,.95),0 0 14px rgba(0,18,36,.85)}
.whyfbm .trio{margin-top:clamp(2rem,4vw,3rem)}
.whyfbm .trio>div{align-items:center}

/* ==========================================================================
   A Different Approach — photo ground in place of the flat purple
   ========================================================================== */
.approach2{
  background:linear-gradient(rgba(0,26,48,.60),rgba(0,26,48,.60)),
             url("img/bwm/approach-gathering.avif") center/cover no-repeat}
.approach2 h2,.approach2 p{color:#FAF7F0;
  text-shadow:0 2px 8px rgba(0,14,28,.85),0 0 24px rgba(0,14,28,.6)}
.approach2 h2 em{color:var(--magenta)}

/* ==========================================================================
   Focus panel — bigger heading and copy, smaller dots
   ========================================================================== */
.whyfbm .panel4 h2{font-size:clamp(2.4rem,4.8vw,3.7rem);line-height:1.08;
  margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.whyfbm .hcirc{width:34px;height:34px;margin-bottom:1.6rem}
.whyfbm .trio::before{top:16px}
.whyfbm .tbox h3{font-size:clamp(1.45rem,2.4vw,1.9rem);margin-bottom:.8rem}
.whyfbm .tbox p{font-size:clamp(1.08rem,1.6vw,1.24rem);line-height:1.6}

/* ==========================================================================
   Approach band — copy and hand graphic removed; the photo is the whole band
   ========================================================================== */
.approach2{min-height:clamp(320px,42vw,560px);padding:0;
  background:url("img/bwm/approach-gathering.avif") center/cover no-repeat}

/* ==========================================================================
   Meet the movement — lake photo in an arch, replacing the hand pair
   ========================================================================== */
.restore .meetphoto{position:relative}
.restore .meetphoto img{width:100%;height:auto;display:block;
  aspect-ratio:4/5;object-fit:cover;
  border-radius:999px 999px 16px 16px}

/* ==========================================================================
   Focus panel runs wider than the standard content wrap
   ========================================================================== */
.whyfbm .wrap{max-width:1440px}

/* ==========================================================================
   Footer layout — brand pushed left, newsletter enlarged in the centre,
   contact column centred and pushed right
   ========================================================================== */
.bigfoot .wrap{max-width:1400px}
.bigfoot .footgrid{grid-template-columns:.85fr 1.55fr .9fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:start}

/* left — hard against the left edge */
.bigfoot .fbrandcol{justify-self:start}

/* centre — bigger newsletter block */
.bigfoot .fsubcol{justify-self:center;width:100%}
.bigfoot .fsubcol .subhead{font-size:clamp(1.5rem,2.7vw,2.15rem);line-height:1.3;
  max-width:26rem;margin-left:auto;margin-right:auto}
.bigfoot #subform{max-width:30rem}
.bigfoot #subform input{padding:1.15rem 1.2rem;font-size:1.05rem}
.bigfoot #subform button{padding:1.15rem 1.4rem;font-size:.8rem}

/* right — everything centred, column pushed to the right edge */
.bigfoot .fcontactcol{justify-self:end;text-align:center}
.bigfoot .fcontactcol h4,
.bigfoot .fcontactcol .bfemail,
.bigfoot .fcontactcol .bfsite,
.bigfoot .fcontactcol .affil-label{text-align:center}
.bigfoot .fcontactcol .logos{justify-content:center}
.bigfoot .flinks{text-align:center}

@media(max-width:900px){
  .bigfoot .footgrid{grid-template-columns:1fr}
  .bigfoot .fbrandcol,.bigfoot .fsubcol,.bigfoot .fcontactcol{justify-self:center}
}

/* ==========================================================================
   Meet the movement — taller arch photo with an offset zebra arch behind it
   ========================================================================== */
.restore .meetphoto{position:relative;isolation:isolate}
.restore .meetphoto::before{content:'';position:absolute;z-index:0;
  top:10%;bottom:-12%;left:-16%;right:24%;
  background:url("img/bwm/z-citron.png") center/460px auto repeat;
  border-radius:999px 999px 16px 16px}
.restore .meetphoto img{position:relative;z-index:1;
  aspect-ratio:4/5.9;object-fit:cover}
@media(max-width:900px){
  .restore .meetphoto::before{left:-8%;right:34%;bottom:-8%}
}

/* ==========================================================================
   "Nobody is coming to fix this for us" — much larger type on a citron
   polka-dot ground, dots kept translucent so the copy stays readable
   ========================================================================== */
.introwide{
  background-color:#fff;
  background-image:
    radial-gradient(circle, rgba(195,188,103,.34) 26px, transparent 27px),
    radial-gradient(circle, rgba(195,188,103,.34) 26px, transparent 27px);
  background-size:190px 190px,190px 190px;
  background-position:0 0,95px 95px;
  padding:clamp(3.6rem,8vw,6rem) 0}

.introwide .introtxt h2{font-size:clamp(2.6rem,5.8vw,4.4rem);line-height:1.08;
  max-width:44rem;margin-bottom:0}
.introwide .introtxt h2 em{color:var(--magenta)}
.introwide .introtxt p{font-size:clamp(1.18rem,1.8vw,1.42rem);line-height:1.62;
  color:var(--navy)}
.introwide .introtxt{column-gap:clamp(2.4rem,5vw,4.5rem)}
@media(max-width:1000px){.introwide .introtxt{columns:1}}

/* photo column gets the larger share of the row */
.restore .in{grid-template-columns:1.35fr 1fr;gap:clamp(2.4rem,6vw,5rem)}
.restore .meetphoto{width:100%}
@media(max-width:900px){.restore .in{grid-template-columns:1fr}}

/* ==========================================================================
   Shapes behind the arch photos — solid colour, not zebra
   ========================================================================== */
.restore .meetphoto::before{background:var(--navy)}

/* ==========================================================================
   Quote section — same two-column arch layout as Meet the Movement,
   with a solid magenta shape behind the photo
   ========================================================================== */
.testi{background:#fff;background-image:none;padding:clamp(3rem,7vw,5.5rem) 0}
.testi .in{display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(2.4rem,6vw,5rem);align-items:center}
@media(max-width:900px){.testi .in{grid-template-columns:1fr}}

.testi .meetphoto{position:relative;isolation:isolate;width:100%}
.testi .meetphoto::before{content:'';position:absolute;z-index:0;
  top:10%;bottom:-12%;left:-16%;right:24%;
  background:var(--magenta);border-radius:999px 999px 16px 16px}
.testi .meetphoto img{position:relative;z-index:1;width:100%;height:auto;display:block;
  aspect-ratio:4/5.9;object-fit:cover;border-radius:999px 999px 16px 16px}
@media(max-width:900px){
  .testi .meetphoto::before{left:-8%;right:34%;bottom:-8%}
}

.testi .quotetxt p{color:var(--navy);font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.45;margin:0 0 1.2rem}
.testi .quotetxt p em{font-style:italic;color:var(--magenta)}
.testi .quotetxt .attr{font-family:'Ovo',Georgia,serif;font-size:1rem;
  color:rgba(0,47,86,.75);margin-top:1.6rem}

/* ==========================================================================
   Focus section — woodland runs the full width, no white gutter, no card
   ========================================================================== */
.whyfbm{background:linear-gradient(rgba(0,26,48,.66),rgba(0,26,48,.66)),
                   url("img/bwm/woodland-v2.png") center top/700px auto repeat;
        padding:clamp(3rem,7vw,5.5rem) 0}
.whyfbm .panel4{background:none;border-radius:0;box-shadow:none;
        padding:0 clamp(1rem,2vw,2rem)}

/* navy swiggle under "Meet the movement behind the meetups" */
.restore h2::after{content:'';display:block;height:clamp(26px,3.4vw,42px);
  width:clamp(170px,22vw,280px);margin:1.2rem 0 .4rem;
  background:url("img/bwm/flourish.png") left center/contain no-repeat}

/* same navy swiggle under "Pull up. Build with us." */
.join h2::after{content:'';display:block;height:clamp(26px,3.4vw,42px);
  width:clamp(170px,22vw,280px);margin:1.2rem 0 .2rem;
  background:url("img/bwm/flourish.png") left center/contain no-repeat}
.join .rule{display:none}

/* larger "Count me in" on the form */
.joinform .formhead h3{font-size:clamp(2.2rem,4.4vw,3.1rem)}

/* ==========================================================================
   Who we're looking for — tone-on-tone citron stripe (same treatment as the
   olive band on floralbotanicalmedicine.com, in citron)
   ========================================================================== */
section.deep{
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.055)      0     58px,
      rgba(255,255,255,.06) 58px  124px,
      rgba(0,0,0,.028)      124px 176px,
      rgba(255,255,255,.03) 176px 250px),
    var(--citron)}

/* ==========================================================================
   Quote section — text left, photo right, shape mirrored, more room
   ========================================================================== */
.testi{padding:clamp(4rem,9vw,7.5rem) 0}
.testi .in{grid-template-columns:1fr 1.35fr}
@media(max-width:900px){.testi .in{grid-template-columns:1fr}}

/* shape now offsets to the right of the photo */
.testi .meetphoto::before{left:24%;right:-16%}
@media(max-width:900px){
  .testi .meetphoto::before{left:34%;right:-8%;bottom:-8%}
}

/* title + swiggle, matching Meet the Movement */
.testi .quotetxt h2{font-size:clamp(1.9rem,3.8vw,2.85rem);line-height:1.18;
  color:var(--navy);margin:0}
.testi .quotetxt h2 em{font-style:italic;color:var(--teal)}
.testi .quotetxt h2::after{content:'';display:block;height:clamp(26px,3.4vw,42px);
  width:clamp(170px,22vw,280px);margin:1.2rem 0 1.6rem;
  background:url("img/bwm/flourish.png") left center/contain no-repeat}

/* crowd graphic's white plate is knocked out of the PNG itself, so the figures
   sit opaquely on top and the dots show only in the gaps around them */
.introwide .peopleart img{mix-blend-mode:normal}

/* ==========================================================================
   Who we're looking for — very light citron (the exact kit citron, lifted
   toward white), tonal stripe kept
   ========================================================================== */
section.deep{
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.030)      0     58px,
      rgba(255,255,255,.55) 58px  124px,
      rgba(0,0,0,.016)      124px 176px,
      rgba(255,255,255,.30) 176px 250px),
    #EDEBD1}

/* ==========================================================================
   Arch sections need bottom room — the offset shapes hang below the photo
   and were being cut off by the next section
   ========================================================================== */
.restore{padding-top:clamp(3.5rem,8vw,6rem);
         padding-bottom:clamp(6rem,13vw,11rem)}
.testi{padding-top:clamp(4rem,9vw,7.5rem);
       padding-bottom:clamp(6rem,13vw,11rem)}

/* ==========================================================================
   Focus section — magenta wash over the woodland instead of navy
   ========================================================================== */
.whyfbm{background:
  linear-gradient(rgba(222,52,124,.62),rgba(222,52,124,.62)),
  linear-gradient(rgba(0,26,48,.34),rgba(0,26,48,.34)),
  url("img/bwm/woodland-v2.png") center top/700px auto repeat}

/* ==========================================================================
   Who we're looking for — plain white ground
   ========================================================================== */
section.deep{background:#fff}

/* ==========================================================================
   Footer — same citron polka-dot ground as "Nobody is coming to fix this"
   ========================================================================== */
.bigfoot{
  background-color:#fff;
  background-image:
    radial-gradient(circle, rgba(195,188,103,.34) 26px, transparent 27px),
    radial-gradient(circle, rgba(195,188,103,.34) 26px, transparent 27px);
  background-size:190px 190px,190px 190px;
  background-position:0 0,95px 95px}

/* ==========================================================================
   Affiliated with World Council for Health — arch photo left, copy right,
   teal shape behind (navy and magenta are taken by the other two arches)
   ========================================================================== */
.wchaffil{background:#fff;padding:clamp(3.5rem,8vw,6rem) 0 clamp(6rem,13vw,11rem)}
.wchaffil .in{display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(2.4rem,6vw,5rem);align-items:center}
@media(max-width:900px){.wchaffil .in{grid-template-columns:1fr}}

.wchaffil .meetphoto{position:relative;isolation:isolate;width:100%}
.wchaffil .meetphoto::before{content:'';position:absolute;z-index:0;
  top:10%;bottom:-12%;left:-16%;right:24%;
  background:var(--teal);border-radius:999px 999px 16px 16px}
.wchaffil .meetphoto img{position:relative;z-index:1;width:100%;height:auto;display:block;
  aspect-ratio:4/5.9;object-fit:cover;border-radius:999px 999px 16px 16px}
@media(max-width:900px){
  .wchaffil .meetphoto::before{left:-8%;right:34%;bottom:-8%}
}

.wchaffil h2{font-size:clamp(1.9rem,3.8vw,2.85rem);line-height:1.18;
  color:var(--navy);margin:0}
.wchaffil h2 em{font-style:italic;color:var(--magenta)}
.wchaffil h2::after{content:'';display:block;height:clamp(26px,3.4vw,42px);
  width:clamp(170px,22vw,280px);margin:1.2rem 0 1.6rem;
  background:url("img/bwm/flourish.png") left center/contain no-repeat}
.wchaffil p{color:var(--navy);font-size:clamp(1.02rem,1.5vw,1.14rem);
  line-height:1.62;margin:0 0 1.1rem}

/* ==========================================================================
   Who we are — centred title, flourish, blurb
   ========================================================================== */
.whowe{background:#fff;padding:clamp(3.5rem,8vw,6rem) 0 clamp(1rem,2vw,2rem);text-align:center}
.whowe h2{font-family:'Fraunces',serif;font-weight:600;color:var(--navy);
  font-size:clamp(2.6rem,5.4vw,4.2rem);line-height:1.06;margin:0}
.whowe h2 em{font-style:italic;color:var(--magenta)}
.whowe h2::after{content:'';display:block;height:clamp(26px,3.4vw,42px);
  width:clamp(170px,22vw,280px);margin:1.1rem auto 1.6rem;
  background:url("img/bwm/flourish.png") center/contain no-repeat}
.whowe .narrow{max-width:46rem;margin:0 auto;color:var(--navy);
  font-size:clamp(1.15rem,1.9vw,1.42rem);line-height:1.55}

/* principles link inside the WCH block */
.wchaffil p a{color:var(--magenta);text-decoration:underline;text-underline-offset:3px}
.wchaffil p a:hover{color:var(--navy)}

/* ==========================================================================
   Footer back to plain white — polka dots removed
   ========================================================================== */
.bigfoot{background:#fff;background-image:none}

/* ==========================================================================
   Hero — photo washed back behind the type
   ========================================================================== */
.hero-img{
  background:
    linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.84)),
    url("img/bwm/hero-gathering.avif") center/cover no-repeat}

/* ==========================================================================
   Who we're looking for — light purple / white awning stripe
   ========================================================================== */
section.deep{background:repeating-linear-gradient(90deg,
  #fff 0 34px,
  rgba(139,123,176,.26) 34px 68px)}
@media(max-width:700px){
  section.deep{background:repeating-linear-gradient(90deg,
    #fff 0 22px, rgba(139,123,176,.26) 22px 44px)}
}

/* ==========================================================================
   "Nobody is coming to fix this" — body copy on a white box so the polka
   dots don't sit behind the text
   ========================================================================== */
.introwide .introtxt{columns:auto}
.introwide .introtxt h2,.introwide .introtxt .rule{column-span:none}
.introwide .introbody{background:#fff;
  padding:clamp(1.6rem,3.2vw,2.6rem) clamp(1.5rem,3vw,2.4rem);
  margin-top:clamp(1.6rem,3vw,2.4rem);
  columns:2;column-gap:clamp(2.4rem,5vw,4.5rem);
  box-shadow:0 6px 24px rgba(0,47,86,.10)}
.introwide .introbody p{break-inside:avoid;margin:0 0 1.1rem}
.introwide .introbody p:last-child{margin-bottom:0}
@media(max-width:1000px){.introwide .introbody{columns:1}}

/* ==========================================================================
   Who we are — double-ring pill around the title, swiggle inside it
   (same treatment as the Our Goals head)
   ========================================================================== */
.whowe h2{display:inline-block;background:#fff;color:var(--navy);border-radius:999px;
  padding:clamp(1.4rem,2.6vw,2.2rem) clamp(2.6rem,5vw,4.2rem) clamp(1.2rem,2.2vw,1.8rem);
  border:3px solid var(--navy);
  box-shadow:inset 0 0 0 6px #fff,inset 0 0 0 7px var(--navy);
  line-height:1.04}
.whowe h2::after{margin:.9rem auto .2rem}

/* stripe is now a solid light purple rather than a translucent wash —
   more opaque, lighter in value */
section.deep{background:repeating-linear-gradient(90deg,
  #fff 0 34px,
  #D9D2EA 34px 68px)}
@media(max-width:700px){
  section.deep{background:repeating-linear-gradient(90deg,
    #fff 0 22px, #D9D2EA 22px 44px)}
}

/* ==========================================================================
   Goal cards — woodland wallpaper in place of the zebra on alternating rows
   ========================================================================== */
.goal:nth-of-type(even) .media::before{
  background-image:url("img/bwm/woodland-v2.png");
  background-size:420px auto;background-repeat:repeat}

/* stripe switched from light purple to light teal */
section.deep{background:repeating-linear-gradient(90deg,
  #fff 0 34px,
  #D6EDEF 34px 68px)}
@media(max-width:700px){
  section.deep{background:repeating-linear-gradient(90deg,
    #fff 0 22px, #D6EDEF 22px 44px)}
}

/* ==========================================================================
   Who we are — border removed, back to the plain title + flourish
   ========================================================================== */
.whowe h2{display:block;background:none;border:0;border-radius:0;
  box-shadow:none;padding:0}
.whowe h2::after{margin:1.1rem auto 1.6rem}

/* navy swiggle under the footer newsletter headline */
.bigfoot .fsubcol .subhead::after{content:'';display:block;
  height:clamp(22px,2.8vw,34px);width:clamp(150px,18vw,230px);
  margin:1rem auto 0;
  background:url("img/bwm/flourish.png") center/contain no-repeat}

/* navy swiggle under the hero wordmark */
.hero-img h1::after{content:'';display:block;
  height:clamp(30px,4vw,50px);width:clamp(200px,26vw,340px);
  margin:1.4rem 0 0;
  background:url("img/bwm/flourish.png") left center/contain no-repeat}

/* ==========================================================================
   Who we are — title left, purple monogram right (same as the Goals head)
   ========================================================================== */
.whowe .wrap{position:relative;text-align:left}
.whowe h2{display:inline-block}
.whowe h2::after{margin:1.1rem 0 1.6rem}
.whowe .narrow{margin:0;text-align:left;max-width:44rem}
.whowe-mono{position:absolute;right:0;top:0;width:clamp(200px,26vw,340px);
  height:auto;z-index:1}
@media(max-width:820px){
  .whowe-mono{display:none}
  .whowe .wrap{text-align:center}
  .whowe h2::after{margin:1.1rem auto 1.6rem}
  .whowe .narrow{margin:0 auto;text-align:center}
}

/* teal stripe paler */
section.deep{background:repeating-linear-gradient(90deg,
  #fff 0 34px,
  #EBF6F7 34px 68px)}
@media(max-width:700px){
  section.deep{background:repeating-linear-gradient(90deg,
    #fff 0 22px, #EBF6F7 22px 44px)}
}

/* ==========================================================================
   Header — tree mark beside the wordmark lockup
   ========================================================================== */
.logolock.bwmlock{flex-direction:row;align-items:center;gap:.7rem;
  flex-wrap:wrap}
.logolock.bwmlock img.hdrmark{display:block;height:clamp(42px,4.4vw,58px);width:auto;
  margin:0;flex:none}
.logolock.bwmlock .l1,.logolock.bwmlock .l2,.logolock.bwmlock .l3{flex-basis:100%}
.logolock.bwmlock .l1{margin-left:0}
/* keep the three text lines stacked next to the mark */
.logolock.bwmlock{display:grid;grid-template-columns:auto 1fr;
  grid-template-rows:auto auto auto;column-gap:.7rem;align-items:center}
.logolock.bwmlock img.hdrmark{grid-row:1 / span 3;grid-column:1}
.logolock.bwmlock .l1{grid-column:2;grid-row:1}
.logolock.bwmlock .l2{grid-column:2;grid-row:2}
.logolock.bwmlock .l3{grid-column:2;grid-row:3}

/* ==========================================================================
   Hero — let the photo keep its colour on the right, stay washed under the copy
   ========================================================================== */
.hero-img{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.90) 38%,
      rgba(255,255,255,.62) 62%,
      rgba(255,255,255,.42) 100%),
    url("img/bwm/hero-gathering.avif") center/cover no-repeat}
@media(max-width:820px){
  .hero-img{background:
    linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.88)),
    url("img/bwm/hero-gathering.avif") center/cover no-repeat}
}

/* taller header (logo added) needs more hero clearance */
.hero-img .inner{padding-top:clamp(5.5rem,11vw,8.5rem)}

/* ==========================================================================
   Wordmark lockups set in the brand-kit face — Fraunces, letterspaced caps,
   navy over magenta (header and footer)
   ========================================================================== */
.bwmlock .l1,.bwmlock .l2,
.bigfoot .bwlock .l1,.bigfoot .bwlock .l2{
  font-family:'Fraunces',serif;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase}
.bwmlock .l3,.bigfoot .bwlock .l3{
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase}

/* hero background reverted to the even white wash it had before */
.hero-img{
  background:
    linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.84)),
    url("img/bwm/hero-gathering.avif") center/cover no-repeat}

/* roles section back to plain white — teal stripe removed */
section.deep{background:#fff}

/* ==========================================================================
   8/7 — readability pass: bigger nav, and ONE uniform size for all body copy
   ========================================================================== */
:root{--copy:1.28rem}
html{font-size:18.5px}
body{font-size:var(--copy);line-height:1.5}

/* toolbar links were too small to read */
header.site nav.main a{font-size:clamp(.98rem,1.35vw,1.12rem);letter-spacing:.11em}
header.site .memberbtn{font-size:1.02rem}
/* wordmark keeps its original size — enlarging it wraps "BETTER WAY" onto two lines */
.bwmlock .l1,.bwmlock .l2{font-size:clamp(1.15rem,2.2vw,1.5rem);white-space:nowrap}

/* every running-text element on the page reads at the SAME size */
p,li,.lead,.join .lead,.goal ul li,.goal .hook,.goal .pnote,.roles .r p,
.meetnotes li,.joinform .formhead p,.joinform label.check,.joinform #joinstatus,
.joinform .fine,.testi p,.begin2 .rail .st,section.deep p,.approach2 p{
  font-size:var(--copy);line-height:1.5}

/* form fields match the copy so nothing reads smaller than the rest */
.joinform input[type=text],.joinform input[type=email],.joinform input[type=tel],
.joinform input:not([type]),.joinform textarea{font-size:var(--copy)}
.joinform label{font-size:1rem;letter-spacing:.14em}
.joinform button{font-size:.95rem;letter-spacing:.22em}

/* bigger copy made this paragraph run under the BWM monogram */
.whowe .narrow{max-width:37rem}

/* 8/7 — goal cards read white, not beige */
.goal .copy,.goals-head h2,.goals-oval{background:#fff}

/* 8/7 — events hero: Better Way tree mark in place of the FBM rose */
.evhero .bwmark{width:clamp(80px,9.5vw,128px);height:auto;margin:0 auto 1.6rem;display:block;
  filter:brightness(0) invert(1);opacity:.96}
.evhero h1{font-family:'Cormorant Garamond',serif}
.evhero p{font-size:var(--copy);line-height:1.55}

/* 8/7 — Educational Insights band was hardcoded rosewood #C9A29C (off-palette) */
.insights{background:var(--teal)}
.insights h2,.insights p{color:#fff}


/* 8/7 — bigger squiggle behind the 13 steps */
.jgrid::before{width:min(128%,940px) !important;opacity:.4 !important}

/* 8/7 — body copy matches the pull-quote size */
:root{--copy:1.8rem}

/* section-level rules kept overriding the uniform size — force it */
p,li,.lead,.introbody p,.goal .hook,.goal .pnote,
.joinform label.check,.joinform input,.joinform textarea{
  font-size:var(--copy) !important;line-height:1.45}
h1,h2,h3,h4{line-height:1.12}

/* uppercase micro-labels stay small — at copy size they wrap and break */
.affil-label,.bigfoot .affil-label,.testi .attr,.joinform .fine,.substatus,
.joinform label,.meta .caps{font-size:1rem !important;line-height:1.4}

/* 8/7 — events hero: flourish under the title, no tree mark */
.evhero .hflourish{height:clamp(150px,18vw,240px);width:clamp(150px,18vw,240px);
  margin:1.7rem auto .2rem;background:url("img/bwm/bwm-tree-kit.png") center/contain no-repeat;
  filter:none;opacity:1}
.evhero p{font-family:'Ovo',Georgia,serif;font-size:var(--copy) !important;
  max-width:44rem;margin-top:clamp(2rem,4vw,3rem)}

/* 8/8 — hero is plain white with the Better Way tree mark on the right */
.hero-img{background:#fff !important}
.hero-img img.bg.heartbg{mix-blend-mode:normal;opacity:1}

/* 8/7 — goal cards read a step smaller than the rest of the page */
.goal .copy p,.goal .copy li,.goal .hook,.goal .pnote{font-size:1.42rem !important}

/* 8/7 — intro columns a step smaller too */
.introbody p{font-size:1.5rem !important}

/* 8/7 — events hero title set like the homepage hero lockup */
.evhero h1{font-family:'Fraunces',serif;font-weight:400;color:#fff;
  font-size:clamp(3.4rem,7.4vw,6.4rem);line-height:1.02;letter-spacing:-.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.45)}
.evhero h1 .off{font-style:italic;font-weight:400;color:var(--citron);display:inline-block}

/* 8/7 — hero CTAs in magenta, scroll flourish in citron, tree mark restored */
.hero-img .cta-row .btn{background:var(--magenta) !important;border-color:var(--magenta) !important;
  color:#fff !important}
.hero-img h1::after{background:url("img/bwm/flourish-citron.png") left center/contain no-repeat !important}
.logolock.bwmlock img.hdrmark{display:block !important;
  width:clamp(52px,5vw,68px) !important;height:auto !important;max-width:none !important;
  align-self:center}

/* BWM monogram in the intro section, magenta, top right of the polka-dot field */
.introwide .wrap{position:relative}
.intro-mono{position:absolute;right:0;top:clamp(4.5rem,9vw,8rem);
  width:clamp(150px,17vw,235px);height:auto;z-index:1;pointer-events:none}
@media(max-width:900px){.intro-mono{display:none}}

/* 8/8 — marquee band citron instead of teal */
.marq{background:var(--citron) !important}
.mrail span{color:var(--navy) !important}
.mrail span::after{color:#fff !important}

/* keep the mark clear of the headline */
.hero-img img.bg.heartbg{width:clamp(200px,24vw,360px) !important;
  right:clamp(1rem,3vw,4rem) !important}
@media(max-width:1100px){.hero-img img.bg.heartbg{opacity:.25}}

/* 8/8 — tree mark blown up as a faint watermark behind the hero copy */
.hero-img img.bg.heartbg{width:clamp(420px,52vw,860px) !important;
  right:clamp(-5rem,-3vw,0rem) !important;opacity:.16 !important;z-index:0 !important}
.hero-img .inner{position:relative;z-index:2}
@media(max-width:1100px){.hero-img img.bg.heartbg{opacity:.13 !important}}

/* 8/8 — scroll back to navy */
.hero-img h1::after{background:url("img/bwm/flourish.png") left center/contain no-repeat !important}

/* 8/8 — a scatter of big faded tree marks behind the hero */
.hero-img{position:relative;overflow:hidden}
.hero-img .treemark{position:absolute;z-index:0;pointer-events:none;height:auto}
.hero-img .tm2{width:clamp(300px,34vw,560px);left:-9%;bottom:-16%;opacity:.10}
.hero-img .tm3{width:clamp(240px,26vw,440px);left:42%;top:-6%;opacity:.09}
@media(max-width:900px){.hero-img .tm2,.hero-img .tm3{display:none}}

/* 8/8 — intro monogram bigger, nudged left */
.intro-mono{width:clamp(190px,22vw,300px) !important;right:clamp(1.5rem,3vw,3rem) !important}
/* monogram tucks behind the heading instead of colliding with it */
.intro-mono{right:0 !important;z-index:0 !important}
.introwide .introtxt{position:relative;z-index:2}

/* 8/8 — body copy a step smaller */
:root{--copy:1.62rem}

/* 8/8 — a few brand hearts scattered in the Who we are white space */
.whowe{padding-bottom:clamp(5rem,9vw,8rem) !important}
.whowe .wrap{position:relative;padding-bottom:clamp(6rem,10vw,9rem)}
.whowe .wheart{position:absolute;height:auto;z-index:0;pointer-events:none}
.whowe .wh1{width:clamp(86px,10vw,132px);left:7%;bottom:0;transform:rotate(-12deg)}
.whowe .wh2{width:clamp(46px,5vw,72px);left:29%;bottom:3%;transform:rotate(14deg)}
.whowe .wh3{width:clamp(56px,6.5vw,92px);right:15%;bottom:1%;transform:rotate(-9deg)}
.whowe .wh4{width:clamp(34px,4vw,54px);right:33%;bottom:6%;transform:rotate(18deg)}
.whowe h2,.whowe .narrow{position:relative;z-index:2}
@media(max-width:820px){.whowe .wh2,.whowe .wh4{display:none}}

/* 8/8 — join section copy a step down */
.join .lead,.join p,.meetnotes li,.joinform .formhead p,.joinform label.check,
.joinform input,.joinform textarea{font-size:1.42rem !important}
.joinform .formhead h3{font-size:clamp(1.6rem,3vw,2.1rem)}

/* 8/8 — footer legal line smaller */
.bigfoot .bfbottom{font-size:1.02rem !important;line-height:1.55}

/* 8/8 — Who we are title bigger */
.whowe h2{font-size:clamp(3.2rem,6.4vw,5.2rem) !important}

/* 8/8 — events hero italic line back to magenta */
.evhero h1 .off{color:var(--magenta) !important}

/* 8/8 — flourish under the Imagine a Better Way heading, replacing the plain rule */
footer.site .begin .rule.mid{background:url("img/bwm/flourish.png") center/contain no-repeat !important;
  height:clamp(30px,4vw,50px);width:clamp(200px,26vw,340px);margin:1.4rem auto 1.8rem;
  filter:brightness(0) invert(1);opacity:.95}
/* monogram sits in front of the heading */
.intro-mono{z-index:3 !important}

/* 8/8 — close the gap between the WCH block and "Where this began" */
.wchaffil{padding-bottom:clamp(2rem,4vw,3.2rem) !important}
.testi{padding-top:clamp(2rem,4vw,3.2rem) !important}

/* 8/8 — legal pages (disclaimer, privacy) */
.legal{background:#fff;padding:clamp(7rem,12vw,10rem) 0 clamp(4rem,8vw,6rem)}
.legal .wrap{max-width:52rem}
.legal h1{font-family:'Fraunces',serif;font-weight:400;color:var(--navy);
  font-size:clamp(2.8rem,6vw,4.4rem);line-height:1.04;margin:0}
.legal h1::after{content:'';display:block;height:clamp(26px,3.4vw,42px);
  width:clamp(170px,22vw,280px);margin:1.1rem 0 1.4rem;
  background:url("img/bwm/flourish.png") left center/contain no-repeat}
.legal .upd{font-family:'Space Grotesk',sans-serif;font-size:.9rem !important;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(0,47,86,.6);margin:0 0 2.4rem}
.legal h2{font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--magenta);
  font-size:clamp(1.7rem,3.2vw,2.3rem);margin:2.4rem 0 .6rem}
.legal p{color:var(--navy);margin:0 0 1rem}
.legal a{color:var(--magenta);text-decoration:underline;text-underline-offset:3px}

/* 8/8 — affiliation logos matched in size */
.bigfoot .logos img{height:auto !important;width:clamp(150px,17vw,215px) !important}

/* 8/8 — services hero: more room so the arch graphic isn't cropped */
.svc-hero{padding:clamp(4.5rem,9vw,7.5rem) 0 !important}
.svc-hero .inner{grid-template-columns:1.12fr .92fr !important;gap:clamp(1rem,3vw,2.4rem) !important;
  align-items:center}
.svc-hero .panel{margin-left:0 !important}
.svc-hero .shot .arcbox{aspect-ratio:3/3.6}

/* 8/8 — woodland-pattern frame around the History band */
.greenband{background:url("img/bwm/woodland.png") center/420px auto repeat !important;
  padding:clamp(1.2rem,2.4vw,2rem) !important}
.greenband .in{background:var(--purple);padding:clamp(2.4rem,5vw,4rem) clamp(1.8rem,4vw,3.2rem)}

/* 8/8 — Better Way Principles heading bigger, bold, with a flourish under it */
.pill-head h2{font-size:clamp(2.8rem,5.6vw,4.4rem) !important;font-weight:600 !important;
  font-family:'Fraunces',serif}
.pill-head h2::after{content:'';display:block;height:clamp(26px,3.4vw,42px);
  width:clamp(180px,23vw,300px);margin:1rem 0 1.2rem;
  background:url("img/bwm/flourish.png") left center/contain no-repeat}

/* 8/8 — 13 steps on citron, navy type, squiggle kept as a pale shape */
.journey{background:var(--citron) !important}
.journey h2{color:var(--navy)}
.journey h2 em{color:#fff}
.journey .lead{color:rgba(0,47,86,.86)}
.jstep{color:var(--navy)}
.jstep .n{color:#fff}
.jgrid::before{background:url("img/bwm/path-citron.png") center/contain no-repeat !important;
  filter:brightness(0) invert(1) !important;opacity:.55 !important}

/* 8/8 — Stop Waiting block: teal ground, woodland-filled card toned down */
.chintz{background:var(--teal) !important;background-image:none !important}
.chintz .card3{background:
    linear-gradient(rgba(255,255,255,.80),rgba(255,255,255,.80)),
    url("img/bwm/woodland.png") center/360px auto repeat !important}
.chintz .card3 h2,.chintz .card3 p{color:var(--navy)}

/* 8/8 — legal links sit in one row under Subscribe so the footer stays short */
.bigfoot .fsubcol .flinks{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1rem,2.4vw,1.9rem);list-style:none;margin:1.1rem 0 0;padding:0}
.bigfoot .fsubcol .flinks li{margin:0}
.bigfoot .fsubcol .flinks a{font-size:.98rem}

/* 8/8 — History band frame uses the navy woodland wallpaper */
.greenband{background:url("img/bwm/woodland-v2.png") center/420px auto repeat !important}

/* 8/8 — Stop Waiting: woodland wallpaper ground, solid teal card */
.chintz{background:url("img/bwm/woodland-v2.png") center/420px auto repeat !important}
.chintz .card3{background:var(--teal) !important}
.chintz .card3 h2,.chintz .card3 p{color:var(--navy)}

/* 8/8 — "Better Way" set much larger in the How We Achieve heading */
.journey h2 em{font-size:1.65em;line-height:.95;display:inline-block}

/* 8/8 — principles heading: not bold, flourish centred beneath */
.pill-head h2{font-weight:400 !important}
.pill-head h2::after{margin-left:auto !important;margin-right:auto !important}

/* 8/8 — brand-kit typography: Fraunces/Cormorant for display, Space Grotesk for body & UI */
body,p,li,input,textarea,button,label,select,
.lead,.meta,.foot,.substatus,.fine,.attr,.pnote,.hook,.jstep,.bfemail,.bfsite,
.flinks a,.ftagline,.subhead,.affil-label{
  font-family:'Space Grotesk',system-ui,sans-serif}
h1,h2,h3,h4,h5,
.bwmlock .l1,.bwmlock .l2,.bigfoot .bwlock .l1,.bigfoot .bwlock .l2,
.goal .num,.jstep .n,.monogram,.goals-head h2,.legal h1,.legal h2{
  font-family:'Fraunces','Cormorant Garamond',serif}

/* 8/8 — display italics stay in the serif face */
h1 em,h2 em,h3 em,h1 span,h2 span,h3 span,.hero-img h1 .off{
  font-family:'Fraunces','Cormorant Garamond',serif}
.hero-img h1 .off{font-style:italic}

/* 8/8 — hero flourish centred and larger */
.hero-img h1::after{margin-left:auto !important;margin-right:auto !important;
  width:clamp(240px,32vw,420px) !important;height:clamp(38px,5vw,64px) !important}

/* 8/8 — services hero: room under the arch so the square isn't clipped */
.svc-hero{padding-bottom:clamp(6rem,11vw,9rem) !important}
.svc-hero .shot .arcbox{aspect-ratio:3/3.1}

/* 8/8 — Meet the movement block sits further left, nearer page centre */
.restore .in{grid-template-columns:1fr 1.3fr !important}

/* 8/8 — Who we are: less dead space under the hearts */
.whowe{padding-bottom:clamp(2.5rem,5vw,4rem) !important}
.whowe .wrap{padding-bottom:clamp(4.5rem,8vw,7rem)}
.whowe .wh1{left:4%}
.whowe .wh2{left:24%;bottom:6%}
.whowe .wh3{right:10%;bottom:4%}
.whowe .wh4{right:30%;bottom:9%}

/* 8/8 — hearts in the white space of the quote and WCH blocks */
.testi .in,.wchaffil .in{position:relative}
.sheart{position:absolute;height:auto;z-index:0;pointer-events:none}
.testi .sh1{width:clamp(70px,8vw,118px);left:-7%;top:46%;transform:rotate(-14deg)}
.testi .sh2{width:clamp(44px,5vw,72px);left:-4%;bottom:6%;transform:rotate(12deg)}
.wchaffil .sh3{width:clamp(52px,6vw,84px);left:-7%;bottom:16%;transform:rotate(10deg)}
.wchaffil .sh4{width:clamp(40px,4.6vw,62px);left:12%;top:2%;transform:rotate(-16deg)}
.testi .quotetxt,.wchaffil .txt{position:relative;z-index:2}
@media(max-width:900px){.sheart{display:none}}

/* 8/8 — every body-copy element in Space Grotesk, incl. the pull quote */
p,li,.attr,.meta,.lead,.hook,.pnote,.fine,.substatus,.ftagline,.subhead,
.foot,.bfemail,.bfsite,.testi .quotetxt p,.testi .attr,.parch p,.evrow p,
.btn,.btn-event,.btn-tan,.btn-olive,.btn-green,.memberbtn,nav.main a{
  font-family:'Space Grotesk',system-ui,sans-serif !important}

/* 8/8 — footer subhead in the body face */
.bigfoot .fsubcol .subhead,.bigfoot .subhead,.ethos .subhead{
  font-family:'Space Grotesk',system-ui,sans-serif !important}

/* 8/8 — wordmark lockups unbolded to match the header */
.bwmlock .l1,.bwmlock .l2,.bigfoot .bwlock .l1,.bigfoot .bwlock .l2{
  font-weight:400 !important}

/* 8/8 — principle bands pinned to the brand display face */
.bwband p,.bwband p em{font-family:'Cormorant Garamond','Fraunces',serif !important}

/* 8/8 — intro paragraph centred under "Why is a common ethos needed?" */
.pill-head{text-align:center}
.pill-head h2::after{margin-left:auto;margin-right:auto}
.pill-head p{margin-left:auto;margin-right:auto;max-width:44rem;text-align:center}

/* 8/8 — heart-in-hand graphics poking up in the History band dead space */
.greenband .in{position:relative;padding-bottom:clamp(6rem,11vw,9.5rem)}
.gbhand{position:absolute;bottom:0;width:clamp(70px,8vw,120px);height:auto;z-index:1;
  pointer-events:none}
.gbhand.gh1{left:4%}
.gbhand.gh2{left:44%;width:clamp(58px,6.4vw,96px)}
.gbhand.gh3{right:6%;width:clamp(64px,7vw,104px)}
@media(max-width:820px){.gbhand.gh2{display:none}}

/* 8/8 — affiliation logos optically matched (the 3-line lockup runs larger) */
.bigfoot .logos img{width:clamp(150px,17vw,215px) !important}
.bigfoot .logos a:last-child img{width:clamp(126px,14.2vw,180px) !important}

/* 8/8 — Stop Waiting title: bigger, slanted, set apart */
.chintz .card3 h2{font-family:'Fraunces',serif !important;font-style:italic;
  font-weight:400;font-size:clamp(2.4rem,5.8vw,4.2rem) !important;line-height:1.02;
  letter-spacing:-.015em;margin-bottom:.4rem}

/* 8/8 — black outline on the events hero title so it holds over the photo */
.evhero h1,.evhero h1 .off{
  text-shadow:
    -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000,
    -2px  0   0 #000,                2px  0   0 #000,
    -2px  2px 0 #000, 0  2px 0 #000, 2px  2px 0 #000,
     0 5px 20px rgba(0,0,0,.45) !important}

/* 8/8 — services hero: wider frame so the panel copy isn't a narrow column */
.svc-hero .wrap{max-width:1340px}
.svc-hero .inner{grid-template-columns:1fr 1.05fr !important}
.svc-hero .panel{padding:clamp(2.2rem,4vw,3.2rem) clamp(1.8rem,3.4vw,2.8rem) !important}
.svc-hero .panel p{max-width:26rem;margin-left:auto;margin-right:auto}

/* 8/8 — "common ethos" upright, still magenta */
.pill-head h2 em{font-style:normal !important;color:var(--magenta) !important}
/* trim the navy dead space now that the hero content fits */
.svc-hero{padding-bottom:clamp(3rem,6vw,5rem) !important}

/* 8/8 — History band: full-width title, hands tucked under the left column */
.greenband .in{padding-bottom:clamp(2.4rem,5vw,4rem) !important;align-items:start}
.greenband .gbtitle{grid-column:1 / -1;font-size:clamp(2.6rem,5.4vw,4.2rem) !important;
  line-height:1.04;margin:0 0 clamp(1.4rem,3vw,2.4rem)}
.greenband .gbcol{position:relative;padding-bottom:clamp(7rem,12vw,10rem)}
.greenband .gbhand{position:absolute;bottom:0;height:auto;z-index:1;pointer-events:none}
.greenband .gh1{left:0;width:clamp(64px,7.4vw,108px)}
.greenband .gh2{left:36%;width:clamp(54px,6.2vw,92px)}
.greenband .gh3{left:70%;width:clamp(58px,6.8vw,100px)}
@media(max-width:820px){.greenband .gbcol{padding-bottom:8rem}}

/* 8/8 — principle band statements in Fraunces, the site's display face */
.bwband p,.bwband p em{font-family:'Fraunces',serif !important}

/* 8/8 — white gap under the principle bands fades into the citron section */
.journey{background:linear-gradient(180deg,#fff 0, var(--citron) 160px) !important}

/* 8/8 — Better Way Principles title larger still */
.pill-head h2{font-size:clamp(3.2rem,6.4vw,5.2rem) !important}

/* 8/8 — white outline on the Stop Waiting title */
.chintz .card3 h2{
  text-shadow:
    -2px -2px 0 #fff, 0 -2px 0 #fff, 2px -2px 0 #fff,
    -2px  0   0 #fff,                2px  0   0 #fff,
    -2px  2px 0 #fff, 0  2px 0 #fff, 2px  2px 0 #fff !important}

/* 8/8 — History band: title on one line, hands clear of the copy */
.greenband .gbtitle{font-size:clamp(2rem,4vw,3.2rem) !important;margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.greenband .gbcol{padding-bottom:clamp(10rem,17vw,15rem)}
.greenband .gbhand{height:clamp(130px,15vw,200px);width:auto !important}

/* 8/8 — hero flourish centres on the wordmark, not the whole column */
.hero-img h1{width:fit-content}

/* 8/8 — services hero drops lower so the arch clears the fixed header */
.svc-hero{padding-top:clamp(8rem,13vw,11rem) !important;
  padding-bottom:clamp(5rem,9vw,7.5rem) !important}

/* 8/8 — principle statements in Space Grotesk, matching the 13 steps */
.bwband p,.bwband p em{font-family:'Space Grotesk',system-ui,sans-serif !important;
  font-weight:400}
.bwband p em{font-style:italic;font-weight:300}

/* 8/8 — soften that white outline so it reads as a glow, not a hard stroke */
.chintz .card3 h2{
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.40), 0 -1px 0 rgba(255,255,255,.40),
     1px -1px 0 rgba(255,255,255,.40), -1px 0 0 rgba(255,255,255,.40),
     1px  0   0 rgba(255,255,255,.40), -1px 1px 0 rgba(255,255,255,.40),
     0    1px 0 rgba(255,255,255,.40),  1px 1px 0 rgba(255,255,255,.40),
     0 2px 14px rgba(255,255,255,.30) !important}

/* 8/8 — History band: no hands, faint tree mark behind, tighter spacing */
.greenband .in{position:relative;padding-bottom:clamp(2rem,4vw,3rem) !important}
.greenband .gbtitle{margin-bottom:clamp(.6rem,1.4vw,1.1rem) !important}
.greenband .gbcol{padding-bottom:0 !important}
.greenband .gblogo{position:absolute;right:2%;bottom:-4%;width:clamp(220px,30vw,430px);
  height:auto;opacity:.13;z-index:0;pointer-events:none}
.greenband .gbcol,.greenband .gbcol + div{position:relative;z-index:1}
@media(max-width:820px){.greenband .gblogo{width:min(70vw,320px);opacity:.1}}

/* 8/8 — History band tightened: less padding, title sits on the copy */
.greenband .in{padding:clamp(1.8rem,3.4vw,2.6rem) clamp(1.6rem,3vw,2.4rem) !important;
  row-gap:clamp(.5rem,1.2vw,1rem) !important;
  column-gap:clamp(2rem,5vw,4rem) !important}
.greenband{padding:clamp(1rem,2vw,1.6rem) !important}

/* 8/8 — Process & Principals gets the same full-bleed photo hero as Events */
.svchero{min-height:min(92vh,860px)}
.svchero .bwmark{display:none}
.svchero .btn-olive{margin-top:2rem;background:var(--citron);color:var(--navy);
  border:2px solid rgba(255,255,255,.7)}
.svchero p{color:#fff}

/* 8/8 — header bar pulled in from the right edge so Count Me In isn't flush */
header.site .wrap.bar{max-width:1340px;
  padding-left:clamp(1.2rem,3vw,2.6rem) !important;
  padding-right:clamp(1.6rem,3.6vw,3.2rem) !important}

/* 8/8 — illustrated tree in the hero's empty right side */
.hero-img{position:relative;overflow:hidden}
.hero-img .herotree{position:absolute;right:clamp(-2rem,1vw,3rem);top:50%;
  transform:translateY(-50%);width:clamp(300px,36vw,600px);height:auto;
  z-index:0;pointer-events:none}
.hero-img .inner{position:relative;z-index:2}
@media(max-width:1000px){.hero-img .herotree{opacity:.22;right:-12%;width:min(90vw,520px)}}

/* 8/8 — hero tree blown up, bleeding off the right edge */
.hero-img{min-height:min(86vh,800px);display:flex;align-items:center}
.hero-img .herotree{right:-34% !important;width:clamp(620px,70vw,1250px) !important;
  top:52% !important;opacity:1}
@media(max-width:1000px){.hero-img .herotree{opacity:.20;right:-30% !important;
  width:min(140vw,760px) !important}}

/* 8/9 — tighten the empty space under the hearts row */
.whowe{padding-bottom:clamp(1.2rem,2.4vw,2rem) !important}
.whowe .wrap{padding-bottom:clamp(3rem,5.5vw,4.6rem) !important}
.whowe .wh1{bottom:2%}
.whowe .wh2{bottom:8%}
.whowe .wh3{bottom:6%}
.whowe .wh4{bottom:11%}

/* 8/9 — hearts removed from the page; reclaim the space they held */
.whowe .wheart,.sheart{display:none !important}
.whowe .wrap{padding-bottom:clamp(1rem,2vw,1.6rem) !important}
.whowe{padding-bottom:clamp(2rem,4vw,3.2rem) !important}

/* 8/9 — who-we-are monogram removed */
.whowe-mono{display:none !important}

/* 8/9 — footer brand lockup centred in its column */
.bigfoot .fbrandcol{text-align:center;display:flex;flex-direction:column;align-items:center}
.bigfoot .fbrandcol .bwlock{align-items:center;text-align:center}
.bigfoot .fbrandcol .socials{justify-content:center}
.bigfoot .bfapple{margin-left:auto;margin-right:auto}

/* 8/9 — tighten Who we are → World Council gap, centre the flourish */
.whowe{padding-bottom:clamp(1rem,2vw,1.6rem) !important}
.whowe .wrap{padding-bottom:0 !important}
.wchaffil{padding-top:clamp(1.4rem,3vw,2.4rem) !important}
.whowe h2::after{margin-left:auto !important;margin-right:auto !important;display:block}

/* 8/9 — every flourish centred under its heading */
.restore h2::after,.join h2::after,.testi .quotetxt h2::after,.wchaffil h2::after,
.legal h1::after,.pill-head h2::after,.whowe h2::after,section.deep h2::after,
.evhero .hflourish,.hero-img h1::after,.goals-head h2::after{
  margin-left:auto !important;margin-right:auto !important;
  background-position:center !important}
.restore h2,.join h2,.testi .quotetxt h2,.wchaffil h2,.legal h1,.pill-head h2{width:fit-content}

/* 8/9 — "Who we're looking for" on light purple, fading out at the end */
section.deep{background:linear-gradient(180deg,
  #EDE8F5 0%,
  #E3DAF0 46%,
  #EFEAF7 78%,
  #ffffff 100%) !important;background-image:linear-gradient(180deg,
  #EDE8F5 0%,#E3DAF0 46%,#EFEAF7 78%,#ffffff 100%) !important}

/* ==========================================================================
   8/9 — patterns dissolve at the page edges instead of stopping hard
   ========================================================================== */
/* polka dots: fade out toward the left and right margins */
.introwide{background-image:none !important;position:relative}
.introwide::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(195,188,103,.34) 26px, transparent 27px),
    radial-gradient(circle, rgba(195,188,103,.34) 26px, transparent 27px);
  background-size:190px 190px,190px 190px;
  background-position:0 0,95px 95px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.introwide .wrap{position:relative;z-index:2}

/* awning stripes: same dissolve at both edges */
section.goals{background:#fff !important;position:relative}
section.goals::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,#fff 0 34px,rgba(222,52,124,.07) 34px 68px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
section.goals .wrap{position:relative;z-index:2}

/* woodland join block: white ombre in at the top, out at the bottom */
.join{position:relative}
.join::before,.join::after{content:"";position:absolute;left:0;right:0;height:clamp(90px,12vw,190px);
  z-index:1;pointer-events:none}
.join::before{top:0;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%)}
.join::after{bottom:0;background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 100%)}
.join .wrap,.join .grid{position:relative;z-index:2}

/* ==========================================================================
   8/9 — Process & Principals: photo melts into the toolbar, purple ombre bands
   ========================================================================== */
body:has(.svchero) header.site{background:transparent !important;backdrop-filter:none !important;
  border-bottom:0 !important;position:absolute !important;top:0;left:0;right:0;z-index:60}
body:has(.svchero) header.site nav.main a,
body:has(.svchero) header.site .bwmlock .l1,
body:has(.svchero) header.site .bwmlock .l2,
body:has(.svchero) header.site .bwmlock .l3{color:#fff !important;
  text-shadow:0 2px 10px rgba(0,25,48,.55)}
body:has(.svchero) header.site nav.main a:hover{border-bottom-color:#fff}
.svchero{margin-top:0}

/* the two plain white heading bands go light purple, fading out top and bottom */
section:has(> .wrap > .pill-head){
  background:linear-gradient(180deg,
    #ffffff 0%, #EDE8F5 20%, #E3DAF0 50%, #EDE8F5 80%, #ffffff 100%) !important;
  padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}

/* 8/9 — citron steps fade out at the bottom, woodland fades in and out */
.journey{position:relative}
.journey::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(80px,11vw,170px);z-index:3;pointer-events:none;
  background:linear-gradient(0deg,#ffffff 0%,rgba(255,255,255,0) 100%)}
.chintz{position:relative}
.chintz::before,.chintz::after{content:"";position:absolute;left:0;right:0;
  height:clamp(80px,11vw,170px);z-index:1;pointer-events:none}
.chintz::before{top:0;background:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,0) 100%)}
.chintz::after{bottom:0;background:linear-gradient(0deg,#ffffff 0%,rgba(255,255,255,0) 100%)}
.chintz .wrap{position:relative;z-index:2}

/* 8/9 — patterns dissolve DOWNWARD at the bottom of the section, not at the sides */
.introwide::after,section.goals::after{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.35) 82%,transparent 100%) !important;
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.35) 82%,transparent 100%) !important}

/* 8/9 — Who we are on light pink; close the gap before "Meet the movement" */
.whowe{background:#FBEEF4 !important}
.testi{padding-bottom:clamp(2rem,4vw,3.2rem) !important}
.restore{padding-top:clamp(1.2rem,3vw,2.4rem) !important}

/* 8/9 — footer on citron */
.bigfoot{background:var(--citron) !important;background-image:none !important}
.bigfoot,.bigfoot .fsubcol .subhead,.bigfoot .fcontactcol h4,.bigfoot .flinks a,
.bigfoot .bfemail,.bigfoot .bfsite,.bigfoot .bwlock .l1{color:var(--navy) !important}
.bigfoot .bwlock .l2{color:var(--magenta) !important}
.bigfoot .bwlock .l3,.bigfoot .affil-label{color:rgba(0,47,86,.72) !important}
.bigfoot .socials a{border-color:rgba(0,47,86,.42)}
.bigfoot .socials a svg{stroke:var(--navy)}
.bigfoot input{background:#fff;border-color:rgba(0,47,86,.25)}

/* 8/9 — stripes fade in at the top too, so they never start on a hard line */
section.goals::after{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 8%,#000 20%,
    #000 58%,rgba(0,0,0,.35) 84%,transparent 100%) !important;
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 8%,#000 20%,
    #000 58%,rgba(0,0,0,.35) 84%,transparent 100%) !important}

/* 8/9 — every arch shape shares one proportion */
.goal .arch,.arcbox,.arcbox.tall,.parch .arch{
  aspect-ratio:4/5.2 !important;width:min(100%,470px) !important;max-width:none !important}

/* ==========================================================================
   8/9 — text-message homepage hero (promoted from preview) + shared header
   ========================================================================== */

.chathero{min-height:0 !important;padding-bottom:clamp(2rem,4vw,3.5rem)}
.chathero .inner{max-width:1180px}
.chathero h1{font-size:clamp(2.4rem,5vw,4rem) !important;line-height:1;margin-bottom:.2rem}
.chathero h1::after{width:clamp(180px,22vw,300px) !important;height:clamp(26px,3.4vw,44px) !important;
  margin:.9rem 0 1.4rem !important}
.chathero .kicker{margin-bottom:.6rem}

.chat{display:flex;flex-direction:column;gap:.55rem;max-width:34rem;margin:0 0 2rem}
.chat .msg{max-width:82%;padding:.85rem 1.15rem;border-radius:22px;line-height:1.4;
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.12rem;position:relative;
  box-shadow:0 2px 6px rgba(0,47,86,.10);
  opacity:0;transform:translateY(10px);animation:pop .5s ease forwards}
.chat .them{align-self:flex-start;background:#fff;color:var(--navy);
  border:1px solid rgba(0,47,86,.14);border-bottom-left-radius:7px}
.chat .me{align-self:flex-end;background:var(--magenta);color:#fff;border-bottom-right-radius:7px}
.chat .me.last{background:var(--citron);color:var(--navy);font-weight:500}
@keyframes pop{to{opacity:1;transform:none}}
.chat .msg:nth-child(1){animation-delay:.05s}
.chat .msg:nth-child(2){animation-delay:.35s}
.chat .msg:nth-child(3){animation-delay:.65s}
.chat .msg:nth-child(4){animation-delay:.95s}
.chat .msg:nth-child(5){animation-delay:1.25s}
.chat .msg:nth-child(6){animation-delay:1.55s}
.chat .msg:nth-child(7){animation-delay:1.85s}
.chat .msg:nth-child(8){animation-delay:2.15s}
.chat .msg:nth-child(9){animation-delay:2.45s}
.chat .msg:nth-child(10){animation-delay:2.75s}
.chat .msg:nth-child(11){animation-delay:3.05s}
.chat .msg:nth-child(12){animation-delay:3.35s}
@media(prefers-reduced-motion:reduce){.chat .msg{opacity:1;transform:none;animation:none}}
@media(max-width:900px){.chat{max-width:none}.chat .msg{font-size:1.02rem}}

.chathero .inner{padding-top:clamp(6.5rem,11vw,9rem)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.chat{margin-top:0}

/* clear the fixed header, and let the thread use the full page width */
.chathero .inner{padding-top:clamp(9.5rem,15vw,13rem) !important;max-width:1340px}
.chat{max-width:none;width:100%;gap:.9rem}
.chat .msg{max-width:58%;font-size:1.22rem;padding:1rem 1.4rem}
@media(max-width:900px){.chat .msg{max-width:86%;font-size:1.04rem}}

/* timestamps + delivery ticks, like a real thread */
.chat .stamp{font-family:'Space Grotesk',system-ui,sans-serif;font-size:.8rem;
  color:rgba(0,47,86,.45);display:inline-flex;align-items:center;gap:.35rem;
  margin:-.35rem .2rem .35rem;letter-spacing:.02em;
  opacity:0;animation:pop .5s ease forwards}
.chat .stamp.me{align-self:flex-end}
.chat .stamp.them{align-self:flex-start}
.chat .stamp .tick{width:19px;height:13px;color:var(--teal)}
.chat .stamp .lock{width:11px;height:14px;opacity:.6}

/* header: logo only, nav pulled left so the button always fits */
header.site .bwmlock .l1,header.site .bwmlock .l2,header.site .bwmlock .l3{display:none}
header.site .logolock.bwmlock{grid-template-columns:auto;column-gap:0}
header.site .logolock.bwmlock img.hdrmark{width:clamp(46px,4.4vw,58px) !important}
header.site .wrap.bar{max-width:1240px;padding-right:clamp(1rem,2vw,1.6rem) !important;
  gap:clamp(1rem,2.4vw,2rem)}
header.site nav.main{margin-left:auto}
header.site nav.main a{font-size:clamp(.9rem,1.15vw,1rem)}
header.site .memberbtn{white-space:nowrap;flex:0 0 auto;margin-left:clamp(.8rem,1.6vw,1.4rem)}

/* last reply matches the rest of the thread */
.chat .me.last{background:var(--magenta) !important;color:#fff !important}

/* stamps are plain text, never a bubble */
.chat .stamp{background:none !important;box-shadow:none !important;border:0 !important;
  border-radius:0 !important;padding:0 !important;color:rgba(0,47,86,.48) !important}
.chat .stamp .tick{color:var(--teal)}

/* header: tree + one-line wordmark */
header.site .bwmlock .l1{display:block !important;white-space:nowrap;
  font-size:clamp(1rem,1.5vw,1.32rem);letter-spacing:.15em;color:var(--navy)}
header.site .logolock.bwmlock{grid-template-columns:auto auto;column-gap:.7rem;align-items:center}

/* full-bleed thread + bigger header mark */
.chathero .inner{max-width:none !important;
  padding-left:clamp(1.4rem,4vw,4.5rem) !important;padding-right:clamp(1.4rem,4vw,4.5rem) !important}
.chat{width:100%}
.chat .msg{max-width:46%}
@media(max-width:900px){.chat .msg{max-width:88%}}
header.site .logolock.bwmlock img.hdrmark{width:clamp(62px,6vw,86px) !important}
header.site .wrap.bar{padding-top:.5rem;padding-bottom:.5rem}

/* faint tree wallpaper + BWM monograms behind the thread */
.chathero{position:relative;isolation:isolate;overflow:hidden}
.chathero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("img/bwm/chic-tree.png") 0 0/300px auto repeat;opacity:.06}
.chathero .wm{position:absolute;z-index:0;pointer-events:none;height:auto;opacity:.14}
.chathero .wm1{width:clamp(160px,17vw,260px);left:38%;top:6%;transform:rotate(-6deg)}
.chathero .wm2{width:clamp(180px,19vw,300px);right:4%;top:34%;transform:rotate(7deg)}
.chathero .wm3{width:clamp(140px,14vw,220px);left:8%;bottom:8%;transform:rotate(5deg)}
.chathero .wm4{width:clamp(150px,16vw,240px);left:44%;bottom:2%;transform:rotate(-8deg)}
.chathero .inner{position:relative;z-index:2}
@media(max-width:900px){.chathero .wm{display:none}}

/* toolbar: wordmark on the nav baseline, Join pulled in from the edge */
header.site .wrap.bar{align-items:center}
header.site .logolock.bwmlock{align-items:center}
header.site .bwmlock .l1{line-height:1;margin:0}
header.site .memberbtn{margin-right:clamp(1rem,3vw,3rem)}

/* no tree wallpaper — a few very large faint marks instead */
.chathero::before{display:none !important}
.chathero .wm{opacity:.10 !important}
.chathero .wt1{width:min(44vw,620px);left:-6%;top:4%;transform:rotate(-6deg)}
.chathero .wt2{width:min(38vw,540px);right:-6%;bottom:2%;transform:rotate(7deg)}
.chathero .wm1{width:min(34vw,470px) !important;left:34% !important;top:2% !important}
.chathero .wm2{width:min(38vw,520px) !important;right:2% !important;top:30% !important}
.chathero .wm3{width:min(30vw,420px) !important;left:6% !important;bottom:6% !important}
.chathero .wm4{width:min(32vw,450px) !important;left:42% !important;bottom:-4% !important}

/* more marks, scattered through the whole thread */
.chathero .wt3{width:min(32vw,430px);left:24%;top:34%;transform:rotate(9deg)}
.chathero .wt4{width:min(30vw,410px);right:14%;top:60%;transform:rotate(-11deg)}
.chathero .wt5{width:min(26vw,360px);left:4%;top:62%;transform:rotate(4deg)}
.chathero .wm5{width:min(28vw,390px) !important;right:24% !important;top:6% !important;
  transform:rotate(-9deg)}
.chathero .wm6{width:min(30vw,410px) !important;left:16% !important;bottom:-6% !important;
  transform:rotate(6deg)}

/* fainter marks so the thread stays the focus */
.chathero .wm{opacity:.055 !important}

/* barely-there watermarks */
.chathero .wm{opacity:.16 !important;filter:saturate(1.35)}

/* 8/9 — woodland melts into the citron footer (no white band) */
.join::after{background:linear-gradient(0deg,var(--citron) 0%,rgba(195,188,103,0) 100%) !important}
.chintz::after{background:linear-gradient(0deg,var(--citron) 0%,rgba(195,188,103,0) 100%) !important}

/* 8/9 — purple band eases in from white instead of starting on a line */
section.deep{background:linear-gradient(180deg,
  #ffffff 0%, #F3F0F9 8%, #EDE8F5 18%, #E3DAF0 52%, #EFEAF7 82%, #ffffff 100%) !important;
  background-image:linear-gradient(180deg,
  #ffffff 0%, #F3F0F9 8%, #EDE8F5 18%, #E3DAF0 52%, #EFEAF7 82%, #ffffff 100%) !important}

/* 8/9 — toolbar light purple; Who we are back to white */
header.site{background:#EDE8F5 !important;border-bottom-color:rgba(0,47,86,.10) !important}
.whowe{background:#ffffff !important}
/* the photo hero page keeps its transparent toolbar */
body:has(.svchero) header.site{background:transparent !important}

/* 8/9 — arch and the block behind it run taller */
.goal .arch,.arcbox,.arcbox.tall,.parch .arch{aspect-ratio:4/6.1 !important}
.goal .media::before{top:10% !important;bottom:-12% !important}

/* 8/9 — more trees + magenta monograms in the hero wallpaper */
.chathero .wt6{width:min(30vw,420px);right:30%;top:8%;transform:rotate(-8deg)}
.chathero .wt7{width:min(26vw,360px);left:52%;bottom:12%;transform:rotate(6deg)}
.chathero .wt8{width:min(24vw,330px);right:2%;top:78%;transform:rotate(-5deg)}
.chathero .wm7{width:min(30vw,410px) !important;left:2% !important;top:26% !important;
  transform:rotate(8deg)}
.chathero .wm8{width:min(26vw,360px) !important;right:36% !important;bottom:2% !important;
  transform:rotate(-7deg)}

/* 8/9 — stripes read more clearly */
section.goals::after{background:repeating-linear-gradient(90deg,
  #fff 0 34px, rgba(222,52,124,.16) 34px 68px) !important}

/* 8/9 — clear toolbar; World Council block on light teal */
header.site{background:transparent !important;backdrop-filter:blur(6px);
  border-bottom:0 !important}
.wchaffil{background:#E6F3F4 !important}

/* 8/9 — footer on a light navy tint */
.bigfoot{background:#DCE6F0 !important}
.bigfoot .socials a{border-color:rgba(0,47,86,.35)}

/* 8/9 — spread the hero marks out; only slight overlaps */
.chathero .wt1{width:min(26vw,360px) !important;left:-3% !important;top:2% !important}
.chathero .wm1{width:min(22vw,300px) !important;left:30% !important;top:1% !important}
.chathero .wt6{width:min(20vw,270px) !important;right:26% !important;top:5% !important}
.chathero .wm5{width:min(21vw,290px) !important;right:1% !important;top:9% !important}
.chathero .wm7{width:min(23vw,310px) !important;left:1% !important;top:27% !important}
.chathero .wt3{width:min(21vw,290px) !important;left:26% !important;top:31% !important}
.chathero .wm2{width:min(24vw,320px) !important;right:3% !important;top:34% !important}
.chathero .wt4{width:min(20vw,270px) !important;right:28% !important;top:52% !important}
.chathero .wt5{width:min(22vw,300px) !important;left:2% !important;top:56% !important}
.chathero .wm6{width:min(22vw,300px) !important;left:28% !important;bottom:14% !important}
.chathero .wt7{width:min(20vw,270px) !important;left:54% !important;bottom:18% !important}
.chathero .wm3{width:min(21vw,290px) !important;left:4% !important;bottom:2% !important}
.chathero .wm4{width:min(20vw,270px) !important;left:40% !important;bottom:1% !important}
.chathero .wm8{width:min(21vw,290px) !important;right:24% !important;bottom:4% !important}
.chathero .wt8{width:min(19vw,260px) !important;right:1% !important;bottom:8% !important}
.chathero .wt2{width:min(22vw,300px) !important;right:6% !important;bottom:26% !important}

/* 8/9 — brand mark inline in the chat, in place of the tree emoji */
.chat .inlinemark{display:inline-block;height:1.5em;width:auto;vertical-align:-.35em;margin-left:.15em}

/* 8/9 — more marks, larger, with a little deliberate overlap */
.chathero .wm{opacity:.15 !important}
.chathero .wt1{width:min(32vw,440px) !important}
.chathero .wm1{width:min(28vw,380px) !important}
.chathero .wm2{width:min(30vw,400px) !important}
.chathero .wt3{width:min(27vw,370px) !important}
.chathero .wm7{width:min(29vw,390px) !important}
.chathero .wt5{width:min(28vw,380px) !important}
.chathero .wm3{width:min(27vw,360px) !important}
.chathero .wt9{width:min(26vw,350px);left:14%;top:14%;transform:rotate(7deg)}
.chathero .wt10{width:min(24vw,330px);right:14%;top:22%;transform:rotate(-9deg)}
.chathero .wt11{width:min(25vw,340px);left:62%;top:66%;transform:rotate(5deg)}
.chathero .wm9{width:min(26vw,350px) !important;left:44%;top:16%;transform:rotate(-6deg)}
.chathero .wm10{width:min(25vw,340px) !important;left:12%;top:44%;transform:rotate(9deg)}
.chathero .wm11{width:min(24vw,330px) !important;right:12%;bottom:34%;transform:rotate(-8deg)}

/* 8/9 — Better Way mark in the polka-dot field beside the monogram */
.intro-tree{position:absolute;left:2%;top:clamp(1rem,3vw,3rem);
  width:clamp(120px,15vw,210px);height:auto;z-index:1;pointer-events:none}
@media(max-width:900px){.intro-tree{display:none}}

/* 8/9 — hand fills the arch like the navy one */
.goal .arch img{height:96% !important;width:auto !important;max-width:none !important;
  object-fit:contain;margin:0 auto;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
.goal .arch{overflow:hidden;position:relative}

/* 8/9 — arch group nudged right, taller, with a light gap off the pattern block */
.goal .arch,.arcbox,.arcbox.tall,.parch .arch{aspect-ratio:4/6.6 !important}
.goal .media{transform:translateX(clamp(6px,2.4vw,34px))}
.goal .arch{box-shadow:0 0 0 clamp(8px,1.1vw,15px) #fff}

/* 8/9 — pattern block behind the arch runs a little longer */
.goal .media::before{top:7% !important;bottom:-16% !important}

/* 8/9 — quote + meet-the-movement share the World Council light blue */
.testi,.restore{background:#E6F3F4 !important;background-image:none !important}

/* 8/9 — Who we are matches the blue; no white ring on the arch; bigger pattern block */
.whowe{background:#E6F3F4 !important}
.goal .arch{box-shadow:none !important}
.goal .media::before{left:6% !important;right:-28% !important;top:5% !important;bottom:-18% !important}

/* 8/9 — the whole arch group scales up */
.goal .arch,.arcbox,.arcbox.tall,.parch .arch{width:min(100%,580px) !important}
.goal .media::before{left:4% !important;right:-34% !important}
.goal{align-items:center}

/* 8/9 — intro tree sits above the monogram, out of the headline */
.intro-tree{left:auto !important;right:clamp(1rem,4vw,5rem) !important;
  top:clamp(-1rem,-.5vw,0rem) !important;width:clamp(110px,13vw,180px) !important;z-index:2}

/* 8/9 — hero watermarks a size up */
.chathero .wm{transform-origin:center}
.chathero .wt1{width:min(40vw,560px) !important}
.chathero .wt2{width:min(30vw,400px) !important}
.chathero .wt3{width:min(34vw,470px) !important}
.chathero .wt4{width:min(28vw,380px) !important}
.chathero .wt5{width:min(35vw,480px) !important}
.chathero .wt6{width:min(28vw,380px) !important}
.chathero .wt7{width:min(27vw,370px) !important}
.chathero .wt8{width:min(26vw,350px) !important}
.chathero .wt9{width:min(33vw,450px) !important}
.chathero .wt10{width:min(31vw,420px) !important}
.chathero .wt11{width:min(32vw,440px) !important}
.chathero .wm1{width:min(35vw,480px) !important}
.chathero .wm2{width:min(37vw,500px) !important}
.chathero .wm3{width:min(34vw,460px) !important}
.chathero .wm4{width:min(26vw,350px) !important}
.chathero .wm5{width:min(27vw,370px) !important}
.chathero .wm6{width:min(28vw,380px) !important}
.chathero .wm7{width:min(36vw,490px) !important}
.chathero .wm8{width:min(27vw,370px) !important}
.chathero .wm9{width:min(33vw,450px) !important}
.chathero .wm10{width:min(32vw,430px) !important}
.chathero .wm11{width:min(31vw,420px) !important}

/* 8/9 — Join sits further right; wordmark centres on the mark; inline logo bigger */
header.site .memberbtn{margin-right:clamp(.2rem,.8vw,.9rem) !important}
header.site .logolock.bwmlock{align-items:center !important}
header.site .bwmlock .l1{align-self:center !important;position:relative;top:.18em}
.chat .inlinemark{height:2.2em !important;vertical-align:-.75em}

/* 8/9 — Meet the movement: photo matches the quote block, copy pulled toward centre */
.restore .in{grid-template-columns:1.35fr 1fr !important;gap:clamp(1.2rem,3vw,2.6rem) !important}
.restore .meetphoto{width:100% !important}
.restore .meetphoto img{width:100% !important}

/* 8/9 — Who we are on light navy, with the WCH apple-and-hand mark in the open space */
.whowe{background:#DCE6F0 !important}
.whowe .wrap{position:relative}
.whowe-sym{position:absolute;right:clamp(2rem,7vw,8rem);top:50%;transform:translateY(-42%);
  width:clamp(150px,20vw,290px);height:auto;z-index:1;pointer-events:none}
@media(max-width:900px){.whowe-sym{position:static;transform:none;margin:1.6rem auto 0;
  width:min(46vw,190px)}}

/* 8/9 — the three story sections match the light navy of Who we are */
.wchaffil,.testi,.restore{background:#DCE6F0 !important;background-image:none !important}

/* 8/9 — WCH mark bigger and further right */
.whowe-sym{right:clamp(.5rem,3vw,3.5rem) !important;width:clamp(210px,30vw,430px) !important;
  transform:translateY(-45%) !important}
.wchaffil h2 a{color:inherit;text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1.5px}
.wchaffil h2 a:hover{color:var(--navy)}

/* 8/9 — the shape behind the "Where this began" photo goes purple */
.testi .meetphoto::before{background:var(--purple) !important}

/* 8/9 — wordmark drops onto the mark's centre line; inline chat logo a touch bigger */
header.site .bwmlock .l1{top:.34em !important}
.chat .inlinemark{height:2.5em !important;vertical-align:-.9em}

/* 8/9 — intro tree up and left, clear of the monogram */
.intro-tree{right:clamp(9rem,20vw,22rem) !important;top:clamp(-2.5rem,-2vw,-1rem) !important}

/* 8/9 — colour blocks overhang the section box */
.goal .media::before{top:2% !important;bottom:-26% !important;right:-40% !important}
.goal .media{overflow:visible}
section.goals{overflow:visible}

/* 8/9 — WCH mark further right, clear of the copy */
.whowe-sym{right:clamp(.25rem,1.5vw,1.5rem) !important;width:clamp(200px,26vw,380px) !important}

/* ==========================================================================
   8/9 — World Council block: asymmetric blob collage instead of the arch photo
   ========================================================================== */
.wchaffil .wchblobs{position:relative;min-height:clamp(420px,44vw,600px);isolation:isolate}
.wchaffil .wblob{position:absolute;display:block;z-index:0}
.wchaffil .wb-cit{left:-6%;top:6%;width:56%;aspect-ratio:1;background:var(--citron);
  border-radius:60% 40% 46% 54% / 48% 56% 44% 52%;transform:rotate(-6deg);opacity:.9}
.wchaffil .wb-teal{right:-4%;bottom:2%;width:48%;aspect-ratio:1;background:var(--teal);
  border-radius:44% 56% 62% 38% / 56% 44% 56% 44%;transform:rotate(8deg);opacity:.85}
.wchaffil .wshot{position:absolute;overflow:hidden;z-index:2;
  box-shadow:0 14px 30px rgba(0,47,86,.22)}
.wchaffil .wshot img{width:100%;height:100%;object-fit:cover;display:block}
.wchaffil .ws1{left:2%;top:0;width:62%;aspect-ratio:4/3;
  border-radius:58% 42% 48% 52% / 46% 54% 46% 54%;transform:rotate(-4deg)}
.wchaffil .ws2{right:0;top:26%;width:46%;aspect-ratio:4/3;
  border-radius:46% 54% 60% 40% / 54% 46% 54% 46%;transform:rotate(6deg)}
.wchaffil .ws3{left:8%;bottom:0;width:40%;aspect-ratio:3/3.6;
  border-radius:50% 50% 44% 56% / 42% 58% 42% 58%;transform:rotate(5deg)}
@media(max-width:900px){
  .wchaffil .wchblobs{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .wchaffil .wblob{display:none}
  .wchaffil .wshot{position:static;width:auto;transform:none}
  .wchaffil .ws1{grid-column:1 / -1}
}

/* 8/9 — soften the white → light-navy edge, and fade the woodland from light navy */
.whowe{background:linear-gradient(180deg,#ffffff 0%,#EDF2F8 5%,#DCE6F0 14%,#DCE6F0 100%) !important}
.join::before{background:linear-gradient(180deg,#DCE6F0 0%,rgba(220,230,240,0) 100%) !important}

/* 8/9 — join card on light navy; flourishes centre in their column, not on the headline */
.joinform,.join .grid,.join .card,.join .panel{background:#DCE6F0 !important}
.join{background-color:transparent}
.restore h2,.join h2,.testi .quotetxt h2,.wchaffil h2,.legal h1,.pill-head h2{width:auto !important}
.restore h2::after,.join h2::after,.testi .quotetxt h2::after,.wchaffil h2::after,
.legal h1::after,.pill-head h2::after{margin-left:auto !important;margin-right:auto !important}

/* 8/9 — Join pulled well clear of the right edge */
header.site .memberbtn{margin-right:clamp(2rem,5vw,5.5rem) !important}

/* 8/9 — purple band fades straight into the light navy section */
section.deep{background:linear-gradient(180deg,
  #ffffff 0%, #F3F0F9 8%, #EDE8F5 18%, #E3DAF0 52%, #E4E7F3 84%, #DCE6F0 100%) !important;
  background-image:linear-gradient(180deg,
  #ffffff 0%, #F3F0F9 8%, #EDE8F5 18%, #E3DAF0 52%, #E4E7F3 84%, #DCE6F0 100%) !important}
.whowe{background:#DCE6F0 !important}

/* 8/9 — WCH blob collage scaled up, text column widened */
.wchaffil .in{grid-template-columns:1.15fr 1fr !important;gap:clamp(1.4rem,3vw,2.6rem) !important}
.wchaffil .wchblobs{min-height:clamp(520px,54vw,760px) !important}
.wchaffil .ws1{left:-4% !important;top:-2% !important;width:78% !important}
.wchaffil .ws2{right:-8% !important;top:30% !important;width:62% !important}
.wchaffil .ws3{left:4% !important;bottom:-4% !important;width:50% !important}
.wchaffil .wb-cit{left:-12% !important;top:8% !important;width:66% !important}
.wchaffil .wb-teal{right:-10% !important;bottom:0 !important;width:58% !important}
.wchaffil .wchtxt{max-width:none}

/* ==========================================================================
   8/9 — goal rows match the FBM reference: arch over a flat offset colour block
   ========================================================================== */
.goal .media::before{
  background:color-mix(in srgb, var(--tint) 26%, #ffffff) !important;
  background-image:none !important;border-radius:0 !important;
  top:14% !important;bottom:-14% !important;left:18% !important;right:-26% !important;
  box-shadow:none !important}
.goal.flip .media::before{left:-26% !important;right:18% !important}
.goal .arch{box-shadow:none !important}

/* 8/9 — Who we are tightened up top, mark pushed to the edge */
.whowe{padding-top:clamp(1.6rem,3.5vw,3rem) !important}
.whowe-sym{right:-2% !important}

/* 8/9 — WCH copy column wider so the section is much shorter */
.wchaffil .in{grid-template-columns:.92fr 1.28fr !important}
.wchaffil .wchtxt p{max-width:none}

/* 8/9 — Meet the movement photo in a square polaroid frame */
.restore .meetphoto{background:#fff !important;padding:16px 16px 58px !important;
  box-shadow:0 16px 34px rgba(0,47,86,.20) !important;transform:rotate(-1.5deg)}
.restore .meetphoto img{aspect-ratio:1 !important;object-fit:cover !important;
  width:100% !important;height:auto}
.restore .meetphoto::before{display:none !important}

/* 8/9 — undo the two-tone join card; both halves back to white */
.joinform,.join .grid,.join .card,.join .panel{background:#ffffff !important}

/* 8/9 — intro tree clear of the headline, sitting just above and left of the BWM oval */
.intro-tree{right:clamp(1.5rem,5vw,5.5rem) !important;top:clamp(-3rem,-2.2vw,-1.5rem) !important;
  width:clamp(105px,12vw,170px) !important}

/* 8/9 — woodland keeps its hard top edge; purple band ombres out at the bottom */
.chintz::before{display:none !important}
.greenband{position:relative}
.greenband::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(70px,9vw,140px);z-index:3;pointer-events:none;
  background:linear-gradient(0deg,#ffffff 0%,rgba(255,255,255,0) 100%)}

/* 8/9 — principles heading band gets more room */
section:has(> .wrap > .pill-head){padding-top:clamp(4.5rem,9vw,8rem) !important;
  padding-bottom:clamp(4.5rem,9vw,8rem) !important}

/* 8/9 — no white stroke on the Stop Waiting title */
.chintz .card3 h2{text-shadow:none !important}

/* 8/9 — woodland blends into the light-navy footer, and the block runs longer */
.chintz{padding-top:clamp(3.5rem,7vw,6rem) !important;padding-bottom:clamp(4.5rem,9vw,8rem) !important}
.chintz::after{background:linear-gradient(0deg,#DCE6F0 0%,rgba(220,230,240,0) 100%) !important;
  height:clamp(110px,14vw,220px) !important}
.join::after{background:linear-gradient(0deg,#DCE6F0 0%,rgba(220,230,240,0) 100%) !important;
  height:clamp(110px,14vw,220px) !important}

/* 8/9 — wordmark drops further onto the mark's centre line */
header.site .bwmlock .l1{top:.52em !important}

/* 8/9 — offset blocks carry the brand zebra, layered clear of the copy */
.goal .media::before{
  background-color:color-mix(in srgb, var(--tint) 22%, #ffffff) !important;
  background-image:url("img/bwm/z-navy-citron.png") !important;
  background-size:150px auto !important;background-repeat:repeat !important;
  top:16% !important;bottom:-12% !important;left:24% !important;right:-16% !important}
.goal.flip .media::before{left:-16% !important;right:24% !important}
.goal:nth-of-type(4n+2) .media::before{background-image:url("img/bwm/z-citron.png") !important}
.goal:nth-of-type(4n+3) .media::before{background-image:url("img/bwm/z-white-magenta.png") !important}
.goal:nth-of-type(4n)   .media::before{background-image:url("img/bwm/z-navy-magenta.png") !important}
.goal .arch{position:relative;z-index:2}

/* 8/9 — copy runs the full width of its column in the story sections */
.whowe .narrow{max-width:none !important}
.testi .quotetxt p,.testi .quotetxt{max-width:none !important}
.restore p,.restore .in > div > p{max-width:none !important}
.wchaffil .wchtxt p,.wchaffil p{max-width:none !important}
.whowe .wrap,.testi .in,.restore .in,.wchaffil .in{max-width:1340px}

/* ==========================================================================
   8/9 — World Council photos as Polaroid film, captions handwritten,
   one shot held up by a brand hand
   ========================================================================== */
.wchaffil .polaroids{position:relative;min-height:clamp(480px,52vw,720px);isolation:isolate}
.wchaffil .pblob{position:absolute;display:block;z-index:0}
.wchaffil .pb-cit{left:-8%;top:10%;width:56%;aspect-ratio:1;background:var(--citron);
  border-radius:60% 40% 46% 54% / 48% 56% 44% 52%;transform:rotate(-6deg);opacity:.85}
.wchaffil .pb-teal{right:-6%;bottom:4%;width:46%;aspect-ratio:1;background:var(--teal);
  border-radius:44% 56% 62% 38% / 56% 44% 56% 44%;transform:rotate(8deg);opacity:.8}

.wchaffil .pola{position:absolute;z-index:2;margin:0;background:#fff;
  padding:14px 14px 62px;box-shadow:0 18px 34px rgba(0,47,86,.26)}
.wchaffil .pola img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.wchaffil .pola figcaption{position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-family:'Caveat',cursive;font-size:1.5rem;color:var(--navy);line-height:1}
.wchaffil .p1{left:0;top:0;width:52%;transform:rotate(-5deg)}
.wchaffil .p2{right:2%;top:22%;width:44%;transform:rotate(6deg)}
.wchaffil .p3{left:12%;bottom:0;width:42%;transform:rotate(-9deg);z-index:4}
.wchaffil .polahand{position:absolute;left:-2%;bottom:-16%;width:34%;height:auto;z-index:3;
  transform:rotate(6deg);pointer-events:none}
@media(max-width:900px){
  .wchaffil .polaroids{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
  .wchaffil .pblob,.wchaffil .polahand{display:none}
  .wchaffil .pola{position:static;width:auto;transform:none}
  .wchaffil .p1{grid-column:1 / -1}
}

/* 8/9 — zebra at a much larger scale, block sits as a big offset rectangle */
.goal .media::before{
  background-size:520px auto !important;
  top:12% !important;bottom:-14% !important;left:14% !important;right:-20% !important}
.goal.flip .media::before{left:-20% !important;right:14% !important}

/* 8/9 — no offset white slab behind the join card; more air around the block */
.join .grid{background:transparent !important}
.join{padding-top:clamp(5rem,10vw,9rem) !important;padding-bottom:clamp(5.5rem,11vw,10rem) !important}

/* 8/9 — kill the faint edge lines around the join card; Who we are gets more height */
.join .grid,.joinform,.join .panel,.join .card{box-shadow:none !important;border:0 !important}
.whowe{padding-top:clamp(4rem,8vw,7rem) !important;padding-bottom:clamp(4rem,8vw,7rem) !important}

/* 8/9 — story photos as polaroids, arch shapes gone */
.testi .meetphoto,.restore .meetphoto{background:#fff !important;
  padding:16px 16px 64px !important;box-shadow:0 18px 34px rgba(0,47,86,.24) !important;
  border-radius:0 !important;position:relative}
.testi .meetphoto{transform:rotate(2deg)}
.restore .meetphoto{transform:rotate(-2deg)}
.testi .meetphoto img,.restore .meetphoto img{aspect-ratio:1 !important;object-fit:cover !important;
  border-radius:0 !important;width:100% !important;height:auto !important;clip-path:none !important}
.testi .meetphoto::before,.restore .meetphoto::before,
.testi .meetphoto::after,.restore .meetphoto::after{display:none !important}
.testi .meetphoto figcaption,.restore .meetphoto figcaption{position:absolute;left:0;right:0;
  bottom:18px;text-align:center;font-family:'Caveat',cursive;font-size:1.7rem;color:var(--navy)}

/* 8/9 — WCH polaroids larger, copy column much wider */
.wchaffil .in{grid-template-columns:.78fr 1.4fr !important}
.wchaffil .p1{width:64% !important}
.wchaffil .p2{width:56% !important;right:-4% !important}
.wchaffil .p3{width:52% !important}

/* 8/9 — merged Who we are / World Council block: copy first, polaroids beneath */
.whowe .wrap.center{text-align:left;max-width:1240px}
.whowe h2{text-align:left}
.whowe h2::after{margin-left:0 !important;margin-right:0 !important}
.whowe .narrow,.whowe p{max-width:none;margin-bottom:1.1rem}
.whowe .polaroids{position:relative;margin-top:clamp(2.4rem,5vw,4rem);
  min-height:clamp(420px,42vw,600px)}
.whowe .pblob{position:absolute;display:block;z-index:0}
.whowe .pb-cit{left:2%;top:12%;width:26%;aspect-ratio:1;background:var(--citron);
  border-radius:60% 40% 46% 54% / 48% 56% 44% 52%;opacity:.85}
.whowe .pb-teal{right:6%;bottom:6%;width:22%;aspect-ratio:1;background:var(--teal);
  border-radius:44% 56% 62% 38% / 56% 44% 56% 44%;opacity:.8}
.whowe .pola{position:absolute;z-index:2;margin:0;background:#fff;padding:14px 14px 60px;
  box-shadow:0 18px 34px rgba(0,47,86,.24)}
.whowe .pola img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.whowe .pola figcaption{position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-family:'Caveat',cursive;font-size:1.6rem;color:var(--navy);line-height:1}
.whowe .p1{left:2%;top:0;width:30%;transform:rotate(-5deg)}
.whowe .p2{left:36%;top:12%;width:28%;transform:rotate(4deg)}
.whowe .p3{right:4%;top:4%;width:26%;transform:rotate(-7deg)}
.whowe .polahand{position:absolute;right:0;bottom:-12%;width:20%;height:auto;z-index:3;
  transform:rotate(8deg);pointer-events:none}
.whowe-sym{display:none !important}
@media(max-width:900px){
  .whowe .polaroids{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .whowe .pblob,.whowe .polahand{display:none}
  .whowe .pola{position:static;width:auto;transform:none}
}

/* 8/9 — intro tree nudged left and down */
.intro-tree{right:clamp(3rem,8vw,8.5rem) !important;top:clamp(-1rem,-.5vw,.5rem) !important}

/* ==========================================================================
   8/9 — goal rows use the exact FBM .pill geometry, re-skinned:
   arch keeps the hand-and-heart, the offset block keeps the zebra
   ========================================================================== */
.goal .media{position:relative;padding:0 1.6rem 1.6rem 0 !important;overflow:visible}
.goal .media::before{
  content:'';position:absolute;z-index:0;
  inset:auto 0 0 auto !important;top:auto !important;left:auto !important;
  right:0 !important;bottom:0 !important;width:80% !important;height:86% !important;
  border-radius:0 !important;
  background-color:color-mix(in srgb, var(--tint) 26%, #ffffff) !important;
  background-size:520px auto !important;background-repeat:repeat !important}
.goal.flip .media{padding:0 0 1.6rem 1.6rem !important}
.goal.flip .media::before{right:auto !important;left:0 !important}
.goal .arch{position:relative;z-index:1;width:100% !important;max-width:none !important;
  aspect-ratio:3/4.1 !important;border-radius:999px 999px 0 0 !important;
  margin:0 !important;box-shadow:none !important}
.goal .arch img{height:94% !important}

/* 8/9 — awning stripes lighter */
section.goals::after{background:repeating-linear-gradient(90deg,
  #fff 0 34px, rgba(222,52,124,.075) 34px 68px) !important}

/* 8/9 — History band framed by thick brand stripes instead of the woodland */
.greenband{background:repeating-linear-gradient(180deg,
  var(--purple)  0 90px,
  var(--magenta) 90px 180px,
  var(--citron)  180px 270px,
  var(--oat)     270px 360px,
  var(--teal)    360px 450px) !important}

/* 8/9 — Stop Waiting block on flat navy instead of the woodland wallpaper */
.chintz{background:var(--navy) !important;background-image:none !important}
.chintz::before{display:none !important}
.chintz::after{background:linear-gradient(0deg,#DCE6F0 0%,rgba(220,230,240,0) 100%) !important}

/* 8/9 — navy block fades in from the section above */
.chintz::before{display:block !important;top:0;left:0;right:0;
  height:clamp(100px,13vw,200px);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,0) 100%) !important}

/* 8/9 — second row of polaroids, lightly overlapping; no hand or blobs */
.whowe .polahand,.whowe .pblob{display:none !important}
.whowe .polaroids{min-height:clamp(760px,74vw,1080px)}
.whowe .p4{left:0;top:44%;width:27%;transform:rotate(4deg);z-index:3}
.whowe .p5{left:23%;top:52%;width:26%;transform:rotate(-6deg);z-index:4}
.whowe .p6{left:46%;top:46%;width:27%;transform:rotate(5deg);z-index:3}
.whowe .p7{right:1%;top:54%;width:25%;transform:rotate(-4deg);z-index:5}
@media(max-width:900px){.whowe .polaroids{min-height:0}}

/* 8/9 — join block gets ~3in more air top and bottom */
.join{padding-top:clamp(9rem,16vw,15rem) !important;padding-bottom:clamp(9rem,16vw,15rem) !important}

/* 8/9 — third row of polaroids */
.whowe .polaroids{min-height:clamp(1080px,104vw,1500px)}
.whowe .p8{left:6%;top:74%;width:26%;transform:rotate(-5deg);z-index:4}
.whowe .p9{left:32%;top:80%;width:27%;transform:rotate(6deg);z-index:5}
.whowe .p10{right:8%;top:76%;width:26%;transform:rotate(-3deg);z-index:4}

/* 8/9 — eighth polaroid tucked under the second row */
.whowe .polaroids{min-height:clamp(900px,88vw,1280px)}
.whowe .p8{left:22%;top:74%;width:27%;transform:rotate(-4deg);z-index:5}

/* 8/9 — WCH link magenta, flourish big and centred, copy full width */
.whowe h2 a{color:var(--magenta) !important;text-decoration-color:var(--magenta)}
.whowe h2::after{width:clamp(320px,44vw,600px) !important;height:clamp(44px,6vw,88px) !important;
  margin:1.4rem auto 1.8rem !important}
.whowe .wrap{max-width:1440px !important;
  padding-left:clamp(1.2rem,3vw,2.4rem);padding-right:clamp(1.2rem,3vw,2.4rem)}
.whowe .narrow,.whowe p{max-width:none !important}

/* 8/9 — four inches of air above Who we are; arch + block group enlarged */
.whowe{padding-top:clamp(18rem,28vw,28rem) !important}
.goal{grid-template-columns:1.06fr 1fr !important;gap:clamp(2rem,4.5vw,4rem) !important}
.goal.flip{grid-template-columns:1fr 1.06fr !important}

/* 8/9 — Our Goals monogram nudged down onto the pill's centre line */
.goals-mono{position:relative;top:clamp(.6rem,1.6vw,1.6rem)}

/* 8/9 — join block is one white card; flourish sits left */
.join .grid{background:#ffffff !important;padding:clamp(2rem,4.5vw,3.6rem) !important;
  gap:clamp(2rem,4vw,3.4rem) !important;align-items:start}
.joinform,.join .panel,.join .card{background:transparent !important;padding:0 !important}
.join h2::after{margin-left:0 !important;margin-right:auto !important}

/* 8/9 — polaroids: no captions, hand-drawn hearts on the photos; light purple ground */
.whowe{background:#EDE8F5 !important}
.whowe .pola{padding:14px 14px 42px !important;position:relative}
.whowe .pola figcaption{display:none}
.whowe .hrt{position:absolute;width:18%;height:auto;z-index:3;pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,25,48,.25))}
.whowe .hrt1{left:8%;top:10%;transform:rotate(-12deg)}
.whowe .hrt2{right:10%;top:22%;width:13%;transform:rotate(14deg)}
.whowe .hrt3{left:24%;bottom:26%;width:11%;transform:rotate(6deg)}

/* 8/9 — hearts off the photos; polaroids back to captioned frames */
.whowe .hrt{display:none !important}
.whowe .pola{padding:14px 14px 60px !important}
.whowe .pola figcaption{display:block !important}

/* 8/9 — back to the light navy ground on Who we are */
.whowe{background:#DCE6F0 !important}

/* ==========================================================================
   8/9 — Pull up. Build with us. — new contact-form style
   ========================================================================== */
.joinform{display:block}
.joinform .formhead{border-bottom:0 !important;padding-bottom:.4rem !important;margin-bottom:.8rem !important}
.joinform label{font-size:.86rem !important;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(0,47,86,.62) !important;margin:1.3rem 0 .4rem !important}
.joinform input[type=text],.joinform input[type=email],.joinform input[type=tel],
.joinform input:not([type]),.joinform textarea{
  background:#F2F6FB !important;border:1px solid rgba(0,47,86,.10) !important;
  border-bottom:2px solid rgba(0,47,86,.22) !important;border-radius:14px !important;
  padding:1.05rem 1.15rem !important;transition:border-color .18s, background .18s;
  box-shadow:none !important}
.joinform input:focus,.joinform textarea:focus{background:#fff !important;
  border-color:rgba(222,52,124,.35) !important;border-bottom-color:var(--magenta) !important;
  outline:none}
.joinform textarea{min-height:9rem}
.joinform label.check{background:#F2F6FB;border-radius:14px;padding:.9rem 1.1rem !important;
  margin-top:1.2rem !important;align-items:center;gap:.8rem}
.joinform button{border-radius:16px !important;padding:1.15rem 1rem !important;
  font-size:.92rem !important;letter-spacing:.2em !important;font-weight:500;
  background:var(--magenta) !important;color:#fff !important;
  box-shadow:0 10px 22px rgba(222,52,124,.28);transition:transform .18s, box-shadow .18s}
.joinform button:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(222,52,124,.34)}
.joinform .fine{margin-top:.9rem !important;color:rgba(0,47,86,.55) !important}

/* 8/9 — footer light purple; merged Who-we-are title centred */
.bigfoot{background:#EDE8F5 !important}
.whowe h2{text-align:center !important}
.whowe h2::after{margin-left:auto !important;margin-right:auto !important}

/* 8/9 — hearts stand in for the captions; polaroids spread across the full width */
.whowe .pola figcaption{display:flex !important;gap:.45rem;align-items:center;justify-content:center;
  bottom:14px}
.whowe .caph{width:clamp(14px,1.5vw,22px);height:auto;display:block}
.whowe .polaroids{min-height:clamp(620px,58vw,860px)}
.whowe .pola{width:22% !important}
.whowe .p1{left:0;top:2%;transform:rotate(-5deg)}
.whowe .p2{left:25%;top:0;transform:rotate(4deg)}
.whowe .p3{left:51%;top:3%;transform:rotate(-3deg)}
.whowe .p4{right:0;top:1%;left:auto;transform:rotate(6deg)}
.whowe .p5{left:3%;top:52%;transform:rotate(4deg)}
.whowe .p6{left:28%;top:55%;transform:rotate(-6deg)}
.whowe .p7{left:53%;top:53%;transform:rotate(5deg)}
.whowe .p8{right:2%;top:56%;left:auto;transform:rotate(-4deg)}

/* 8/9 — captions back as words (hearts only on two), japan frame shows the whole photo */
.whowe .pola figcaption{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--navy);
  display:flex;gap:.45rem;align-items:center;justify-content:center;bottom:14px}
.whowe .p8 img{object-fit:contain !important;background:#fff;aspect-ratio:1 !important}

/* 8/9 — a little more air between the words of the merged title */
.whowe h2{word-spacing:.14em;letter-spacing:.004em}

/* 8/9 — no heart images in the captions (they inherited the full-width photo rule) */
.whowe .caph{display:none !important}

/* 8/9 — polaroids kept in one tight band up top */
.whowe .polaroids{min-height:clamp(430px,42vw,620px) !important}
.whowe .pola{width:20% !important}
.whowe .p1{left:1%;top:0;transform:rotate(-5deg)}
.whowe .p2{left:22%;top:3%;transform:rotate(4deg)}
.whowe .p3{left:43%;top:0;transform:rotate(-3deg)}
.whowe .p4{left:64%;top:3%;right:auto;transform:rotate(6deg)}
.whowe .p5{right:0;top:0;left:auto;transform:rotate(-4deg)}
.whowe .p6{left:11%;top:46%;transform:rotate(5deg)}
.whowe .p7{left:33%;top:49%;transform:rotate(-6deg)}
.whowe .p8{left:55%;top:46%;right:auto;transform:rotate(3deg)}

/* 8/9 — contact card on light navy */
.join .grid{background:#DCE6F0 !important}
.joinform input,.joinform textarea{background:#ffffff !important}
.joinform label.check{background:#ffffff}

/* 8/9 — goal arches and their blocks scaled up again */
.goal{grid-template-columns:1.22fr 1fr !important}
.goal.flip{grid-template-columns:1fr 1.22fr !important}
.goal .media{padding:0 2rem 2rem 0 !important}
.goal.flip .media{padding:0 0 2rem 2rem !important}
.goal .media::before{width:86% !important;height:90% !important}

/* 8/9 — History band extended 3in above and below (6in taller overall) */
.greenband{padding-top:clamp(9rem,16vw,15.5rem) !important;
  padding-bottom:clamp(9rem,16vw,15.5rem) !important}

/* 8/9 — put the Our Goals monogram back where it was (absolute, to the right of the pill) */
.goals-mono{position:absolute !important;right:0;top:2.5rem;left:auto}

/* 8/9 — japan frame crops to the group instead of letterboxing */
.whowe .p8 img{object-fit:cover !important;object-position:38% 46% !important;background:none !important}

/* 8/9 — join section on the brand stripes; History panel navy; wider stripe bands */
.join{background:repeating-linear-gradient(180deg,
  var(--purple)  0 180px,
  var(--magenta) 180px 360px,
  var(--citron)  360px 540px,
  var(--oat)     540px 720px,
  var(--teal)    720px 900px) !important;background-image:repeating-linear-gradient(180deg,
  var(--purple)  0 180px,
  var(--magenta) 180px 360px,
  var(--citron)  360px 540px,
  var(--oat)     540px 720px,
  var(--teal)    720px 900px) !important}
.join::before,.join::after{display:none !important}
.greenband{background:repeating-linear-gradient(180deg,
  var(--purple)  0 180px,
  var(--magenta) 180px 360px,
  var(--citron)  360px 540px,
  var(--oat)     540px 720px,
  var(--teal)    720px 900px) !important}
.greenband .in{background:var(--navy) !important}

/* 8/9 — stripes blend into one another; one band trimmed top and bottom */
.greenband,.join{background:repeating-linear-gradient(180deg,
  var(--purple)  0px,
  var(--magenta) 180px,
  var(--citron)  360px,
  var(--oat)     540px,
  var(--teal)    720px,
  var(--purple)  900px) !important;
  background-image:repeating-linear-gradient(180deg,
  var(--purple)  0px,
  var(--magenta) 180px,
  var(--citron)  360px,
  var(--oat)     540px,
  var(--teal)    720px,
  var(--purple)  900px) !important}
.greenband{padding-top:clamp(4rem,8vw,7rem) !important;padding-bottom:clamp(4rem,8vw,7rem) !important}

/* 8/9 — Process & Principals hero on the brand stripes (navy in place of purple) */
.svchero .bg{display:none !important}
.svchero::after{display:none !important}
.svchero{background:repeating-linear-gradient(180deg,
  var(--navy)    0px,
  var(--magenta) 180px,
  var(--citron)  360px,
  var(--oat)     540px,
  var(--teal)    720px,
  var(--navy)    900px) !important}
.svchero h1{text-shadow:0 3px 16px rgba(0,25,48,.55)}

/* 8/9 — events page toolbar reads white over the photo; wordmark nudged down */
body:has(.evhero) header.site nav.main a,
body:has(.evhero) header.site .bwmlock .l1{color:#fff !important;
  text-shadow:0 2px 10px rgba(0,25,48,.6)}
body:has(.evhero) header.site nav.main a.on{border-bottom-color:#fff}
header.site .bwmlock .l1{top:.5em !important}

/* 8/9 — zebra block sits square behind the arch, no thin L; arches larger again */
.goal .media::before{width:92% !important;height:96% !important;right:0 !important;bottom:0 !important}
.goal .arch,.arcbox,.arcbox.tall,.parch .arch{width:min(100%,660px) !important}
.goal{grid-template-columns:1.34fr 1fr !important}
.goal.flip{grid-template-columns:1fr 1.34fr !important}

/* ==========================================================================
   8/10 — zebra wallpaper, solid stripes, purple sections, tightened polaroids
   ========================================================================== */
/* citron + navy zebra as the page wallpaper behind the goal rows */
section.goals::after{background:url("img/bwm/z-navy-citron.png") 0 0/520px auto repeat !important;
  opacity:.5;-webkit-mask-image:none !important;mask-image:none !important}

/* solid stripes again — no ombre blending */
.greenband,.join,.svchero{background:repeating-linear-gradient(180deg,
  var(--navy)    0 180px,
  var(--magenta) 180px 360px,
  var(--citron)  360px 540px,
  var(--oat)     540px 720px,
  var(--teal)    720px 900px) !important;
  background-image:repeating-linear-gradient(180deg,
  var(--navy)    0 180px,
  var(--magenta) 180px 360px,
  var(--citron)  360px 540px,
  var(--oat)     540px 720px,
  var(--teal)    720px 900px) !important}

/* contact block sits on the zebra instead of the stripes */
.join{background:url("img/bwm/z-navy-citron.png") 0 0/520px auto repeat !important;
  background-image:url("img/bwm/z-navy-citron.png") !important}
.join .grid{background:#DCE6F0 !important}
.join h2 em,.joinform .formhead h3 em{color:var(--citron) !important}
.join .lead b,.meetnotes li b,.meetnotes h3 em{color:var(--citron) !important}

/* Who we are / Who we're looking for — solid light purple, centred like the rest */
.whowe,section.deep{background:#EDE8F5 !important;background-image:none !important}
.whowe{padding-top:clamp(3rem,6vw,5rem) !important}
.whowe .wrap.center{text-align:center}
.whowe h2,.whowe .narrow,.whowe p{text-align:center}
.whowe p{margin-left:auto;margin-right:auto;max-width:62rem}

/* polaroids packed side by side so the section is shorter */
.whowe .polaroids{min-height:clamp(340px,32vw,470px) !important}
.whowe .pola{width:17.6% !important}
.whowe .p1{left:0;top:2%;transform:rotate(-4deg)}
.whowe .p2{left:18%;top:0;transform:rotate(3deg)}
.whowe .p3{left:36%;top:2%;transform:rotate(-3deg)}
.whowe .p4{left:54%;top:0;right:auto;transform:rotate(4deg)}
.whowe .p5{left:72%;top:2%;right:auto;transform:rotate(-3deg)}
.whowe .p6{left:auto;right:0;top:0;transform:rotate(3deg)}
.whowe .p7{left:36%;top:52%;display:none}

/* swiggle under the intro headline */
.introwide h2::after{content:'';display:block;height:clamp(30px,4vw,50px);
  width:clamp(220px,28vw,380px);margin:1.2rem 0 .6rem;
  background:url("img/bwm/flourish.png") left center/contain no-repeat}

/* no outline on the two page titles */
.evhero h1,.evhero h1 .off,.svchero h1,.svchero h1 .off{text-shadow:none !important}

/* Process & Principals footer white */
body:has(.svchero) .bigfoot{background:#ffffff !important}

/* wordmark drops further on the toolbar */
header.site .bwmlock .l1{top:.62em !important}


/* 8/10 — arch runs lower; the zebra block keeps the size it already had */
.goal .arch,.arcbox,.arcbox.tall,.parch .arch{aspect-ratio:3/4.6 !important}

/* 8/10 — History band on the large citron + magenta zebra */
.greenband{background:url("img/bwm/z-citron-magenta.png") center/900px auto repeat !important;
  background-image:url("img/bwm/z-citron-magenta.png") !important}

/* 8/10 — polaroids in one tight flowing row, no absolute scatter */
.whowe .polaroids{position:static !important;min-height:0 !important;
  display:flex !important;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(.6rem,1.4vw,1.2rem);margin-top:clamp(1.6rem,3vw,2.6rem)}
.whowe .pola{position:static !important;width:clamp(120px,14.5%,190px) !important;
  padding:9px 9px 34px !important;flex:0 0 auto;left:auto !important;right:auto !important;
  top:auto !important;bottom:auto !important;display:block !important}
.whowe .pola:nth-child(odd){transform:rotate(-3deg)}
.whowe .pola:nth-child(even){transform:rotate(3deg)}
.whowe .pola figcaption{font-size:1.05rem;bottom:9px}


/* 8/10 — History panel hugs its copy: tighter padding, no dead space at the foot */
.greenband .in{padding:clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2.4vw,1.8rem) !important;
  align-items:start}
.greenband .gbcol,.greenband .gbcol + div{padding-bottom:0 !important}
.greenband .gbcol p:last-child,.greenband .gbcol + div p:last-child{margin-bottom:0}
.greenband .gblogo{display:none !important}

/* 8/10 — navy block dissolves straight into the white footer on this page */
body:has(.svchero) .chintz::after{
  background:linear-gradient(0deg,#ffffff 0%,rgba(255,255,255,.85) 32%,rgba(255,255,255,0) 100%) !important;
  height:clamp(160px,20vw,300px) !important}
body:has(.svchero) .bigfoot{background:#ffffff !important;padding-top:0 !important}

/* 8/10 — zebra wallpaper softened and faded out at both ends */
section.goals::after{opacity:.30 !important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 76%,transparent 100%) !important;
  mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 76%,transparent 100%) !important}

/* 8/10 — polaroids larger and slightly overlapping */
.whowe .polaroids{gap:0 !important}
.whowe .pola{width:clamp(150px,17.5%,235px) !important;margin-right:-1.6% !important;
  padding:11px 11px 40px !important;position:relative !important}
.whowe .pola:nth-child(1){z-index:6}
.whowe .pola:nth-child(2){z-index:5;margin-top:.9rem}
.whowe .pola:nth-child(3){z-index:4}
.whowe .pola:nth-child(4){z-index:3;margin-top:.9rem}
.whowe .pola:nth-child(5){z-index:2}
.whowe .pola:nth-child(6){z-index:1;margin-top:.9rem}
.whowe .pola figcaption{font-size:1.18rem;bottom:11px}

/* 8/10 — light pink awning stripes behind the goals, no zebra */
section.goals::after{background:repeating-linear-gradient(90deg,
  #fff 0 34px, rgba(222,52,124,.085) 34px 68px) !important;
  opacity:1 !important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 78%,transparent 100%) !important;
  mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 78%,transparent 100%) !important}

/* 8/10 — homepage footer on white */
.bigfoot{background:#ffffff !important}

/* 8/10 — wordmark aligned with the nav baseline */
header.site .bwmlock .l1{top:.92em !important}

/* 8/10 — Better Way mark filling the empty corner of the History panel */
.greenband .in{position:relative}
.greenband .gbmark{position:absolute;left:clamp(1.5rem,4vw,4rem);bottom:clamp(1rem,2.5vw,2.2rem);
  width:clamp(90px,11vw,165px);height:auto;z-index:2;pointer-events:none}
@media(max-width:900px){.greenband .gbmark{display:none}}

/* 8/10 — zebra band keeps its hard top edge */

/* 8/10 — History band on the navy + citron zebra */
.greenband{background:url("img/bwm/z-navy-citron.png") center/900px auto repeat !important;
  background-image:url("img/bwm/z-navy-citron.png") !important}

/* 8/10 — wordmark on the nav baseline */
header.site .bwmlock .l1{top:1.05em !important}

/* 8/10 — stripes run the full section, no fade */
section.goals::after{-webkit-mask-image:none !important;mask-image:none !important}

/* 8/10 — polaroids larger */
.whowe .pola{width:clamp(180px,21%,290px) !important;padding:13px 13px 46px !important;
  margin-right:-2.2% !important}
.whowe .pola figcaption{font-size:1.32rem;bottom:13px}

/* 8/10 — zebra wallpaper at a much larger scale behind the contact block */
.join{background-size:1500px auto !important}

/* 8/10 — events hero gets the homepage's faded-logo wallpaper instead of the photo */
.evhero{background:#ffffff !important;position:relative;isolation:isolate;overflow:hidden}
.evhero .bg{display:none !important}
.evhero::after{display:none !important}
.evhero .wm{position:absolute;z-index:0;pointer-events:none;height:auto;opacity:.15;
  filter:saturate(1.35)}
.evhero .in{position:relative;z-index:2}
.evhero h1{color:var(--navy) !important;text-shadow:none !important}
.evhero h1 .off{color:var(--magenta) !important}
.evhero p{color:var(--navy) !important}
.evhero .hflourish{filter:none !important}
body:has(.evhero) header.site nav.main a,
body:has(.evhero) header.site .bwmlock .l1{color:var(--navy) !important;text-shadow:none !important}

/* 8/10 — events hero marks scaled for a shorter hero */
.evhero .wm{opacity:.11 !important}
.evhero .wt1,.evhero .wt3,.evhero .wt5,.evhero .wt9,.evhero .wt10,.evhero .wt11,
.evhero .wm1,.evhero .wm2,.evhero .wm3,.evhero .wm7,.evhero .wm9,.evhero .wm10,
.evhero .wm11{width:min(20vw,270px) !important}
.evhero .wt2,.evhero .wt4,.evhero .wt6,.evhero .wt7,.evhero .wt8,
.evhero .wm4,.evhero .wm5,.evhero .wm6,.evhero .wm8{width:min(17vw,230px) !important}

/* 8/10 — wordmark drops further still */
header.site .bwmlock .l1{top:1.35em !important}

/* 8/10 — magenta Join the Movement button; intro tree nudged up and left */
.btn-olive,.svchero .btn-olive{background:var(--magenta) !important;color:#fff !important;
  border-color:rgba(255,255,255,.75) !important}
.intro-tree{right:clamp(4.5rem,10vw,11rem) !important;top:clamp(-2rem,-1.4vw,-.6rem) !important}

/* 8/10 — soft navy divider between Who we're looking for and Who we are */
.whowe{position:relative}
.whowe::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(70px,9vw,140px);
  z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,47,86,.30) 0%,rgba(0,47,86,.10) 42%,rgba(0,47,86,0) 100%)}
.whowe .wrap{position:relative;z-index:2}

/* 8/10 — History-panel mark larger, nudged up and right */
.greenband .gbmark{width:clamp(120px,15vw,225px) !important;
  left:clamp(2.5rem,6vw,6rem) !important;bottom:clamp(2rem,4.5vw,4rem) !important}

/* 8/10 — events hero marks spread across the whole hero, like the homepage */
.evhero .wt1{left:-4% !important;top:2% !important;width:min(30vw,400px) !important;transform:rotate(-6deg)}
.evhero .wm1{left:16% !important;top:-6% !important;width:min(26vw,350px) !important;transform:rotate(5deg)}
.evhero .wt9{left:34% !important;top:4% !important;width:min(24vw,330px) !important;transform:rotate(8deg)}
.evhero .wm9{left:52% !important;top:-4% !important;width:min(26vw,350px) !important;transform:rotate(-6deg)}
.evhero .wt6{right:14% !important;top:3% !important;width:min(23vw,310px) !important;transform:rotate(7deg)}
.evhero .wm5{right:-4% !important;top:-2% !important;width:min(25vw,340px) !important;transform:rotate(-8deg)}
.evhero .wm7{left:-6% !important;top:26% !important;width:min(28vw,380px) !important;transform:rotate(9deg)}
.evhero .wt3{left:14% !important;top:30% !important;width:min(24vw,330px) !important;transform:rotate(-5deg)}
.evhero .wm10{left:34% !important;top:26% !important;width:min(26vw,350px) !important;transform:rotate(6deg)}
.evhero .wt10{left:54% !important;top:31% !important;width:min(23vw,310px) !important;transform:rotate(-9deg)}
.evhero .wm2{right:8% !important;top:28% !important;width:min(27vw,370px) !important;transform:rotate(4deg)}
.evhero .wt2{right:-8% !important;top:24% !important;width:min(24vw,330px) !important;transform:rotate(-7deg)}
.evhero .wt5{left:-2% !important;top:54% !important;width:min(27vw,370px) !important;transform:rotate(5deg)}
.evhero .wm6{left:18% !important;top:58% !important;width:min(24vw,330px) !important;transform:rotate(-8deg)}
.evhero .wt11{left:38% !important;top:54% !important;width:min(25vw,340px) !important;transform:rotate(7deg)}
.evhero .wm11{left:56% !important;top:58% !important;width:min(24vw,330px) !important;transform:rotate(-4deg)}
.evhero .wt4{right:10% !important;top:56% !important;width:min(23vw,310px) !important;transform:rotate(9deg)}
.evhero .wm8{right:-6% !important;top:52% !important;width:min(25vw,340px) !important;transform:rotate(-6deg)}
.evhero .wm3{left:4% !important;bottom:-8% !important;width:min(26vw,350px) !important;transform:rotate(6deg)}
.evhero .wm4{left:28% !important;bottom:-10% !important;width:min(23vw,310px) !important;transform:rotate(-7deg)}
.evhero .wt7{left:50% !important;bottom:-6% !important;width:min(24vw,330px) !important;transform:rotate(8deg)}
.evhero .wt8{right:2% !important;bottom:-9% !important;width:min(25vw,340px) !important;transform:rotate(-5deg)}

/* 8/10 — Process & Principals hero: light purple + navy zebra, copy on a white box */
.svchero{background:url("img/bwm/z-navy-lilac.png") center/900px auto repeat !important;
  background-image:url("img/bwm/z-navy-lilac.png") !important}
.svchero .bg{display:none !important}
.svchero::after{display:none !important}
.svchero .in{background:#ffffff;max-width:min(92%,900px);margin:0 auto;
  padding:clamp(2.4rem,5vw,4rem) clamp(2rem,4.5vw,3.6rem);
  box-shadow:0 18px 40px rgba(0,25,48,.28);position:relative;z-index:2}
.svchero h1{color:var(--navy) !important;text-shadow:none !important}
.svchero h1 .off{color:var(--magenta) !important}
.svchero p{color:var(--navy) !important;text-shadow:none !important}
.svchero .hflourish{filter:none !important}

/* 8/10 — History band on light purple, no navy panel, navy type */
.greenband{background:#EDE8F5 !important;background-image:none !important}
.greenband .in{background:transparent !important}
.greenband .gbtitle,.greenband h2,.greenband p,.greenband .gbcol p{color:var(--navy) !important}
.greenband h2 em,.greenband .gbtitle em{color:var(--magenta) !important}

/* 8/10 — Process & Principals hero on flat light purple, no box */
.svchero{background:#EDE8F5 !important;background-image:none !important}
.svchero .in{background:transparent !important;box-shadow:none !important;
  max-width:min(94%,1000px) !important}

/* 8/10 — events wallpaper runs on down to the teal band */
.evhero{overflow:visible !important}
.evhero .wm3{bottom:-46% !important}
.evhero .wm4{bottom:-52% !important}
.evhero .wt7{bottom:-44% !important}
.evhero .wt8{bottom:-50% !important}
.evhero .wt5,.evhero .wm6,.evhero .wt11,.evhero .wm11,.evhero .wt4,.evhero .wm8{
  top:auto !important;bottom:-18% !important}
.evhero + section{position:relative;z-index:3;background:transparent}

/* 8/10 — teal insights band fades into the navy CTA, navy fades into the white footer */
.insights{background:linear-gradient(180deg,var(--teal) 0%,var(--teal) 62%,#1B4468 88%,var(--navy) 100%) !important}
footer.site .begin{background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 68%,
  #7c93ac 92%,#ffffff 100%) !important}

/* 8/10 — every toolbar item on one baseline */
header.site .wrap.bar{align-items:center !important}
header.site .logolock.bwmlock{align-items:center !important}
header.site .bwmlock .l1{top:0 !important;position:static !important;
  display:flex;align-items:center;line-height:1}
header.site nav.main{align-items:center}
header.site nav.main a{display:flex;align-items:center;line-height:1}
header.site .memberbtn{display:flex;align-items:center;line-height:1}

/* 8/10 — merged title holds on one line; all six polaroids fit in a single row */
.whowe h2{font-size:clamp(1.9rem,3.5vw,3.1rem) !important;word-spacing:.06em}
.whowe h2 a{white-space:nowrap}
.whowe .polaroids{flex-wrap:nowrap !important;justify-content:flex-start;
  padding-left:clamp(0rem,1vw,1rem)}
.whowe .pola{width:clamp(120px,16.6%,215px) !important;margin-right:-1.4% !important}
.whowe .pola figcaption{font-size:1.06rem}
@media(max-width:900px){.whowe .polaroids{flex-wrap:wrap !important;justify-content:center}
  .whowe .pola{width:44% !important;margin-right:0 !important}}

/* 8/10 — contact block on the light purple + navy zebra */
.join{background:url("img/bwm/z-navy-lilac.png") 0 0/1500px auto repeat !important;
  background-image:url("img/bwm/z-navy-lilac.png") !important}

/* 8/10 — navy border framing Who we're looking for; polaroids scaled up in place */
section.deep{border:3px solid var(--navy);border-left:0;border-right:0}
section.deep .wrap{border-left:3px solid var(--navy);border-right:3px solid var(--navy);
  padding-left:clamp(1.2rem,3vw,2.6rem);padding-right:clamp(1.2rem,3vw,2.6rem)}
.whowe .pola{width:clamp(150px,19.6%,260px) !important;margin-right:-2.2% !important;
  padding:13px 13px 48px !important}
.whowe .pola figcaption{font-size:1.26rem;bottom:13px}
.whowe .polaroids{padding-left:0}

/* 8/10 — wordmark spans the lockup rows so it centres on the tree */
header.site .logolock.bwmlock{grid-template-rows:1fr !important}
header.site .bwmlock .l1{grid-row:1 / -1 !important;align-self:center !important}

/* 8/10 — Process & Principals: zebra wallpaper, light purple toolbar + copy box */
.svchero{background:url("img/bwm/z-navy-lilac.png") center/1400px auto repeat !important;
  background-image:url("img/bwm/z-navy-lilac.png") !important}
.svchero .in{background:#EDE8F5 !important;max-width:min(92%,940px) !important;
  padding:clamp(2.6rem,5.5vw,4.4rem) clamp(2rem,4.5vw,3.6rem) !important;
  box-shadow:0 18px 40px rgba(0,25,48,.22) !important}
body:has(.svchero) header.site{background:#EDE8F5 !important;
  box-shadow:0 2px 14px rgba(0,25,48,.10)}

/* 8/10 — drop the navy frame on the roles section */
section.deep{border:0 !important}
section.deep .wrap{border-left:0 !important;border-right:0 !important}

/* 8/10 — logo wallpaper carries down through the events page */
body:has(.evhero) .evhero + section,
body:has(.evhero) .evhero ~ section:not(.insights){
  background:url("img/bwm/bwm-wallpaper.png") 0 0/1400px auto repeat !important;
  position:relative}
body:has(.evhero) .evhero ~ section .wrap{position:relative;z-index:2}

/* 8/10 — events page on the large light-purple + navy zebra, copy on light boxes */
.evhero{background:url("img/bwm/z-navy-lilac.png") center/1400px auto repeat !important}
.evhero .wm{display:none !important}
.evhero .in{background:#EDE8F5;max-width:min(92%,940px);margin:0 auto;
  padding:clamp(2.6rem,5.5vw,4.4rem) clamp(2rem,4.5vw,3.6rem);
  box-shadow:0 18px 40px rgba(0,25,48,.22)}

body:has(.evhero) .evhero + section,
body:has(.evhero) .evhero ~ section:not(.insights){
  background:url("img/bwm/z-navy-lilac.png") 0 0/1400px auto repeat !important}
body:has(.evhero) .evhero ~ section:not(.insights) .wrap{background:#EDE8F5;
  padding:clamp(2rem,4.5vw,3.4rem);box-shadow:0 16px 34px rgba(0,25,48,.18)}
.evrow{border-top:0 !important}

/* 8/10 — no stray navy rules anywhere on the events page */
body:has(.evhero) hr,body:has(.evhero) .rule{display:none !important}

/* 8/10 — hero copy box tighter on both pages */
.svchero .in,.evhero .in{max-width:min(78%,720px) !important;
  padding:clamp(1.8rem,3.4vw,2.8rem) clamp(1.6rem,3vw,2.4rem) !important}
.svchero{min-height:min(74vh,660px) !important}
.evhero{min-height:min(74vh,660px) !important}

/* 8/10 — contact card on light purple; History mark bigger, down and right */
.join .grid{background:#EDE8F5 !important}
.greenband .gbmark{width:clamp(150px,18vw,270px) !important;
  left:clamp(5rem,12vw,13rem) !important;bottom:clamp(.5rem,1.5vw,1.4rem) !important}

/* 8/10 — merged Who we are title matches the Who we're looking for scale */
.whowe h2{font-size:clamp(2.6rem,5.4vw,4.6rem) !important;line-height:1.06}
.whowe h2 a{white-space:normal}

/* 8/10 — the ethos band goes flat light purple; the principles band keeps its zebra */
.prinband .wrap{background:transparent !important;box-shadow:none !important}

/* 8/10 — solid light purple toolbar on every page; zebra at a much larger scale */
header.site{background:#EDE8F5 !important;backdrop-filter:none !important}
body:has(.evhero) header.site,body:has(.svchero) header.site{background:#EDE8F5 !important}
.svchero,.evhero,
body:has(.evhero) .evhero + section,
body:has(.evhero) .evhero ~ section:not(.insights),
.join,.greenband{background-size:2600px auto !important}

/* 8/10 — principles band flat light purple; ethos band keeps zebra with a copy box */
.prinband{background:#EDE8F5 !important;background-image:none !important}
.ethosband .wrap{background:#EDE8F5 !important;max-width:min(88%,900px);
  padding:clamp(2.2rem,4.5vw,3.6rem) clamp(1.8rem,3.6vw,3rem) !important;
  box-shadow:0 18px 40px rgba(0,25,48,.22) !important}

/* 8/10 — WCH name never splits across lines; homepage toolbar clear again */
.whowe h2 a{white-space:nowrap !important}
.whowe h2{font-size:clamp(2rem,3.9vw,3.4rem) !important}
body:has(.chathero) header.site{background:transparent !important;
  backdrop-filter:blur(6px);box-shadow:none !important}

/* 8/10 — principles band: flat light purple, zebra gone for good */
.prinband,section.prinband{background:#EDE8F5 !important;background-image:none !important;
  background-color:#EDE8F5 !important}

/* 8/10 — ethos copy sits on a solid purple plate over the zebra */
section.ethosband > .wrap{background:#EDE8F5 !important;max-width:min(88%,900px) !important;
  margin:0 auto !important;padding:clamp(2.2rem,4.5vw,3.6rem) clamp(1.8rem,3.6vw,3rem) !important;
  box-shadow:0 18px 40px rgba(0,25,48,.22) !important}

/* 8/10 — no navy strip between the CTA and the footer; footer on light purple */
body:has(.evhero) footer.site{background:transparent !important;padding-bottom:0 !important}
body:has(.evhero) footer.site .begin{padding-bottom:0 !important;margin-bottom:0 !important;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 62%,#8fa4bb 88%,#EDE8F5 100%) !important}
.bigfoot{background:#EDE8F5 !important}

/* ==========================================================================
   8/18 — MOBILE PASS
   Later desktop rules were written with !important and no width guard, so
   they were overriding the earlier mobile breakpoints: the goal rows stayed
   two-column at 390px and the zebra block's negative right offset pushed the
   whole page 129px wider than the screen (hence "everything is cut off").
   This block is deliberately last so it wins the cascade.
   ========================================================================== */

/* nothing may push the page sideways */
html{overflow-x:hidden}
body{overflow-x:hidden;max-width:100%}

@media(max-width:820px){

  /* ---- type scale -------------------------------------------------------
     the whole sheet is sized in rem off `html{font-size:18.5px}`, which is a
     desktop scale — on a phone every block sprawled. Drop the root and then
     pin the handful of rules that hard-code a large size with !important. --- */
  html{font-size:16px}
  :root{--copy:1.06rem}
  .evhero p,.svchero p{font-size:1.06rem !important}
  .introbody p,.introtxt p{font-size:1.06rem !important;line-height:1.62 !important}
  /* keep inputs >=16px or iOS zooms the page in on focus */
  .joinform input,.joinform textarea{font-size:1.02rem !important}

  /* ---- "Who we're looking for": the role columns were fixed-width and hung
          off BOTH edges at 320px --------------------------------------------- */
  section.deep .roles{
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:2.2rem 1.2rem !important;justify-items:center}
  section.deep .roles .r{
    flex:none !important;width:100% !important;max-width:none !important;
    min-width:0 !important;margin:0 !important}
  section.deep .roles .r h3{font-size:.95rem !important;letter-spacing:.06em !important;
    overflow-wrap:break-word}
  section.deep .roles .r p{font-size:.95rem !important;line-height:1.5 !important}
  section.deep .roles .r img,section.deep .roles .r svg{
    max-width:80px !important;height:auto !important}
  h1{font-size:clamp(2.5rem,11vw,3.4rem) !important}
  h2{font-size:clamp(1.9rem,7.5vw,2.6rem) !important}

  /* long unbreakable phrases (e.g. the "World Council for Health" link) were
     setting a min-content width wider than the phone and getting clipped */
  h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}
  .whowe h2{display:block !important;text-align:center !important;
            font-size:1.9rem !important;max-width:100% !important}
  .whowe h2 a,.whowe h2 em{white-space:normal !important}
  .whowe h2::after{margin-left:auto !important;margin-right:auto !important}

  /* ---- Our Goals: one column, nothing bleeding off the right edge ------- */
  .goal,.goal.flip{
    grid-template-columns:1fr !important;
    gap:1.5rem !important;padding:2.2rem 0 !important;align-items:start !important}

  .goal .media,.goal.flip .media{
    padding:0 1.1rem 1.1rem 0 !important;transform:none !important;overflow:visible}
  .goal.flip .media{padding:0 0 1.1rem 1.1rem !important}
  .goal .media::before{
    width:88% !important;height:90% !important;
    top:8% !important;bottom:0 !important;left:auto !important;right:0 !important}
  .goal.flip .media::before{left:0 !important;right:auto !important}

  .goal .arch,.arcbox,.arcbox.tall,.parch .arch{
    width:100% !important;max-width:none !important;aspect-ratio:4/4.5 !important}

  .goal .copy,.goal.flip .copy{
    box-shadow:0 12px 0 var(--teal) !important;
    padding:1.5rem 1.25rem !important;margin:0 !important}

  .goal .copy p,.goal .copy li,.goal .hook,.goal .pnote{font-size:1.02rem !important}
  .goal .tline{gap:.85rem !important}
  .goal .num{font-size:2.8rem !important}
  .goal h3{font-size:1.85rem !important;padding-top:.15rem !important}
  .goals-oval,.goals-mono{display:none !important}
  .goals-head{text-align:center !important;margin-bottom:1.8rem !important}
}

/* 8/21 — that single short sentence was floating between two full-width
   paragraphs and reading as an orphan. Set it as a deliberate pull-quote in the
   display face, with air around it, so the shortness becomes the point. */
.whowe .futureline{
  font-family:'Fraunces',serif; font-weight:500; font-style:italic;
  font-size:clamp(1.45rem,2.5vw,2.15rem); line-height:1.3;
  color:var(--navy); max-width:24ch; margin:2.3rem 0; padding-left:1.5rem;
  border-left:3px solid var(--magenta); text-wrap:balance}
@media(max-width:700px){ .whowe .futureline{max-width:100%; margin:1.7rem 0} }

/* 8/21 — her call: the whole "Who we are" section reads left-aligned, not
   centred. Images and the polaroid row keep their own alignment. */
.whowe .wrap.center{text-align:left !important}
.whowe .wrap.center h2{margin-left:0 !important;margin-right:0 !important}
.whowe .wrap.center h2::after{margin-left:0 !important;margin-right:0 !important}
.whowe .whowe-sym{display:block;margin-left:0 !important;margin-right:auto !important}
.whowe .wchvals{margin-left:0 !important;margin-right:0 !important}
.whowe .polaroids{text-align:center}

/* 8/21 — flourish under "Who we are" was 563x77 while every other flourish on
   the site is 280x42. Matched to the rest. */
.whowe h2::after{width:clamp(170px,22vw,280px) !important;
  height:clamp(26px,3.4vw,42px) !important;margin:1.1rem 0 1.6rem !important}

/* 8/21 — the zebra band under the principles reads white, not lilac */
.bwprin{background-image:url("img/bwm/z-navy-white.png") !important}

/* 8/21 — citron reverted at her request; card back on light purple */
.svchero .in{background:#EDE8F5 !important}

/* 8/21 — monogram alone fills the empty column beside the join form,
   nudged left of centre at her request. */
.join .joinmark{display:block;width:clamp(250px,30vw,420px);height:auto;
  margin:6rem auto 0;opacity:.95;transform:translateX(-9%)}
@media(max-width:820px){
  .join .joinmark{width:190px;margin-top:2rem;transform:none}
}

/* 8/21 — more navy around the "Stop Waiting" card */
.chintz{padding-top:clamp(5rem,10vw,8.5rem) !important;
  padding-bottom:clamp(6rem,12vw,11rem) !important}

/* 8/21 — E: that zebra strip under the principle bands reads plain white.
   Needs to out-specify `body:has(.evhero) .evhero ~ section`, which was
   repainting it lilac. */
body:has(.evhero) section.bwprin,
body:has(.evhero) .evhero ~ section.bwprin{
  background:#fff !important;background-image:none !important}

/* 8/21 — C: meeting-card mark had a pale panel and heavy padding behind it */
.evrow .mark{background:none !important;background-color:transparent !important;
  padding:0 !important;box-shadow:none !important;
  width:clamp(240px,30vw,400px) !important;height:auto !important}

/* 8/21 — left-align EVERY child in "Who we are". The container was already
   left, but h2 and the paragraphs each carry their own centring rules further
   up the sheet, so they have to be overridden individually. */
.whowe .wrap.center h2,
.whowe .wrap.center p,
.whowe .wrap.center p.narrow,
.whowe .wrap.center li,
.whowe .wrap.center .futureline{text-align:left !important}
.whowe .wrap.center p.narrow{margin-left:0 !important;margin-right:0 !important}

/* 8/21 — her call: drop the mark in the History band */
.greenband .gbmark{display:none !important}

/* 8/21 — the goal rows centre their columns, so every bullet added to the copy
   pushed the image further down. Pin the artwork near the top of its row instead,
   with a small offset so it doesn't sit flush with the heading. */
.goal .media,.goal.flip .media{align-self:start !important;
  margin-top:clamp(0.5rem,2.5vw,2.4rem) !important}

/* 8/21 — WCH values list inside the centred "Who we are" column. Left-aligned
   inside a centred block so the descriptions stay readable as prose. */
.whowe .wchvals{
  list-style:none; margin:1.1rem auto 1.6rem; padding:0;
  max-width:100%; text-align:left; display:flex;
  flex-direction:column; gap:.95rem}
.whowe .wchvals li{
  position:relative; padding-left:1.6rem; line-height:1.6}
.whowe .wchvals li::before{
  content:''; position:absolute; left:0; top:.72em; width:.6rem; height:.6rem;
  border-radius:50%; background:var(--magenta)}
.whowe .wchvals li b{color:var(--navy); letter-spacing:.01em}
@media(max-width:700px){
  .whowe .wchvals{max-width:100%; margin-left:0; margin-right:0}
  .whowe .wchvals li{padding-left:1.3rem}
}

/* --------------------------------------------------------------------------
   8/18 — the toolbar fix runs to 1000px, not 820px: style.css stacks
   `header.site .bar` into one column at <=1000px, so 821-1000px (tablets, small
   laptop windows) was still getting the 204px-tall header laid over the hero.
   -------------------------------------------------------------------------- */
@media(max-width:1000px){
  /* ---- toolbar: a real, compact bar that sits above the page ------------ */
  header.site,
  body:has(.chathero) header.site,
  body:has(.evhero) header.site,
  body:has(.svchero) header.site{
    position:relative !important;top:auto !important;
    background:#EDE8F5 !important;backdrop-filter:none !important;
    border-bottom:1px solid rgba(0,47,86,.14) !important;box-shadow:none !important}

  header.site .wrap.bar{
    display:grid !important;grid-template-columns:1fr auto !important;
    align-items:center !important;justify-items:stretch !important;
    column-gap:.8rem !important;row-gap:.5rem !important;
    max-width:none !important;padding:.65rem 1rem !important}

  header.site .logolock.bwmlock{
    grid-column:1;grid-row:1;grid-template-columns:auto 1fr !important;
    column-gap:.55rem !important;align-items:center !important;justify-self:start}
  header.site .logolock.bwmlock img.hdrmark{
    height:38px !important;width:38px !important;grid-row:1 !important}
  header.site .bwmlock .l1{
    display:block !important;grid-row:1 !important;position:static !important;top:0 !important;
    font-size:.92rem !important;letter-spacing:.08em !important;line-height:1.15 !important;
    white-space:normal !important;color:var(--navy) !important;text-shadow:none !important}
  header.site .bwmlock .l2,header.site .bwmlock .l3{display:none !important}

  header.site .memberbtn{
    grid-column:2;grid-row:1;justify-self:end;
    padding:.72rem 1.1rem !important;font-size:.78rem !important;white-space:nowrap;
    min-height:36px;display:flex;align-items:center}

  /* nav gets its own full-width row and never wraps to three lines */
  header.site nav.main{
    grid-column:1 / -1;grid-row:2;width:100%;justify-self:stretch;
    display:flex !important;flex-wrap:nowrap !important;justify-content:space-between !important;
    gap:.7rem !important;align-items:center}
  header.site nav.main a{
    color:var(--navy) !important;text-shadow:none !important;
    font-size:clamp(.5rem,2.55vw,.9rem) !important;letter-spacing:.04em !important;
    white-space:nowrap;line-height:1.2;text-align:center;
    padding:.7rem .1rem !important;min-height:34px;box-sizing:border-box}

  /* links were 16-26px tall — too small to hit with a thumb */
  .bigfoot a,footer.site a,.bfemail,.bfsite{
    display:inline-block;padding:.42rem 0;min-height:34px;box-sizing:content-box}

  /* the hero no longer sits under an overlaying bar, so the clearance that
     was reserved for it becomes dead space — take it back */
  .hero-img,.evhero,.svchero{padding-top:0 !important}
  .hero-img .inner{padding-top:clamp(1.5rem,5vw,2.5rem) !important}
  .evhero .in,.svchero .in{
    max-width:100% !important;
    padding:clamp(2.5rem,9vw,4rem) 1.35rem clamp(2.5rem,7vw,3.5rem) !important}
  .evhero,.svchero{min-height:0 !important}
}

/* --------------------------------------------------------------------------
   8/19 — header wordmark nudged down so the caps sit on the tree mark's
   optical centre. Desktop only: the <=1000px toolbar block above centres the
   lockup on its own and must keep winning there.
   -------------------------------------------------------------------------- */
@media(min-width:1001px){
  header.site .bwmlock .l1{position:relative !important;top:.44em !important}
}