/* ============================================================
   TRELLIS FAMILY CENTRE — V2  ·  "Support that helps you grow"
   System: Re.Mind structure in Trellis brand colours —
   forest green × clay tan × warm gold on bone,
   condensed black display caps · Baskerville accents · Inter body,
   grainy riso stickers, pill everything, rounded hero cards.
   ============================================================ */

:root{
  --green:        #1E7C41;   /* royal — text & buttons on light   */
  --green-deep:   #155C2F;   /* gradient top                       */
  --green-mid:    #1F7F43;
  --green-light:  #298B4D;   /* gradient bottom                    */
  --green-ghost:  #AED3B8;   /* secondary text on blue             */
  --tan:     #A9743C;
  --sand:        #E6D3A3;   /* light pink display accent          */
  --sand-soft:   #ECE5CD;
  --gold:  #DFB95A;
  --paper:       #F7F5EE;   /* page background                    */
  --card:        #FCFAF4;
  --white:       #FFFFFF;
  --ink:         #16281B;   /* darkest blue-ink, rare             */

  --disp: "Sen", "Avenir Next", "Trebuchet MS", sans-serif;
  --serif: "Baskervville", "Baskerville", Georgia, serif;
  --body: "Inter", -apple-system, "Helvetica Neue", sans-serif;

  --rad-hero: 28px;
  --rad-card: 18px;
  --wrap: 1240px;
  --nav-h: 76px;
}

*{margin:0;padding:0;box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--green);
  font-size:16px;line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--tan);color:#fff}

/* ---------- type ---------- */
.disp{
  font-family:var(--disp);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.014em;
}
.serif{font-family:var(--serif);font-weight:400;line-height:1.18;letter-spacing:.005em}
.serif i,.serif em{font-style:italic}

.eyebrow{
  font-family:var(--body);font-size:13px;font-weight:500;
  letter-spacing:.02em;
}
h1.disp{font-size:clamp(38px,6vw,86px)}
h2.disp{font-size:clamp(28px,4.2vw,54px)}
.serif-h{font-size:clamp(26px,3.2vw,40px)}
.serif-h .q{font-family:var(--serif)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.page-pad{padding:14px}                     /* outer gutter so hero cards float like the ref */
@media (max-width:640px){.page-pad{padding:8px}}

/* blue gradient surface + flower watermark */
.green-grad{
  background:linear-gradient(178deg,var(--green-deep) 0%,var(--green-mid) 55%,var(--green-light) 100%);
  color:#fff;
}
.flower-wm{position:relative;isolation:isolate}
.flower-wm::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath transform='translate(26 10) scale(0.280) translate(-51.5 -87.5)' d='M96,92.5 93,93.5 89.5,99 90.5,102 95,105.5 100,102.5 104,102.5 107.5,107 108.5,117 105.5,127 105.5,133 107,134.5 111.5,130 115.5,120 115.5,104 110,94.5 105,92.5ZM119,128.5 102.5,144 97.5,153 97.5,163 105,169.5 110,168.5 116.5,164 119,143.5 120.5,145 120.5,160 126,168.5 134,168.5 138.5,162 140.5,156 138.5,150 127.5,135ZM88,163.5 74,169.5 70.5,173 68.5,179 56.5,189 56.5,192 59,194.5 80,208.5 89,208.5 94.5,205 91.5,197 91.5,190 86,188.5 72,191.5 66.5,191 79,185.5 93.5,185 98.5,172 93,164.5ZM148,163.5 142,165.5 136.5,170 135.5,177 137.5,181 141,184.5 159.5,186 143,189.5 133.5,201 132.5,203 135,205.5 143,209.5 152,208.5 157,205.5 164.5,198 168.5,190 175.5,182 167,177.5 155,165.5ZM119,168.5 106,172.5 102.5,175 101.5,178 123,184.5 127.5,181 129.5,176 124,169.5ZM132,180.5 122.5,189 125.5,199 128,201.5 130.5,200 137.5,188 136.5,183ZM101,181.5 95.5,192 97.5,202 106,208.5 113,210.5 122,210.5 124.5,208 124.5,203 118.5,188 111,182.5ZM98,207.5 90.5,217 84.5,232 82.5,245 83.5,266 86.5,281 95.5,309 132.5,390 137.5,419 137.5,442 135,453.5 133.5,448 135.5,431 134.5,417 126.5,389 119.5,375 111,364.5 102,359.5 96,359.5 91.5,363 90.5,375 92,377.5 95,377.5 101,374.5 105,374.5 108,375.5 115.5,383 120.5,392 129.5,418 131.5,430 130.5,460 127.5,478 121.5,496 121.5,502 124,504.5 127,504.5 131.5,497 135.5,485 142.5,454 144.5,438 144.5,410 139.5,378 112.5,309 107.5,286 106.5,265 112.5,252 117,248.5 124,248.5 128.5,244 130.5,237 125,231.5 121,230.5 114,233.5 105.5,242 98.5,256 98.5,272 100.5,286 105.5,303 132.5,367 135.5,376 135,379.5 98.5,301 89.5,272 89.5,238 93.5,224 101.5,212 101.5,209Z'/%3E%3Cpath transform='translate(132 104) scale(0.280) translate(-51.5 -87.5)' d='M96,92.5 93,93.5 89.5,99 90.5,102 95,105.5 100,102.5 104,102.5 107.5,107 108.5,117 105.5,127 105.5,133 107,134.5 111.5,130 115.5,120 115.5,104 110,94.5 105,92.5ZM119,128.5 102.5,144 97.5,153 97.5,163 105,169.5 110,168.5 116.5,164 119,143.5 120.5,145 120.5,160 126,168.5 134,168.5 138.5,162 140.5,156 138.5,150 127.5,135ZM88,163.5 74,169.5 70.5,173 68.5,179 56.5,189 56.5,192 59,194.5 80,208.5 89,208.5 94.5,205 91.5,197 91.5,190 86,188.5 72,191.5 66.5,191 79,185.5 93.5,185 98.5,172 93,164.5ZM148,163.5 142,165.5 136.5,170 135.5,177 137.5,181 141,184.5 159.5,186 143,189.5 133.5,201 132.5,203 135,205.5 143,209.5 152,208.5 157,205.5 164.5,198 168.5,190 175.5,182 167,177.5 155,165.5ZM119,168.5 106,172.5 102.5,175 101.5,178 123,184.5 127.5,181 129.5,176 124,169.5ZM132,180.5 122.5,189 125.5,199 128,201.5 130.5,200 137.5,188 136.5,183ZM101,181.5 95.5,192 97.5,202 106,208.5 113,210.5 122,210.5 124.5,208 124.5,203 118.5,188 111,182.5ZM98,207.5 90.5,217 84.5,232 82.5,245 83.5,266 86.5,281 95.5,309 132.5,390 137.5,419 137.5,442 135,453.5 133.5,448 135.5,431 134.5,417 126.5,389 119.5,375 111,364.5 102,359.5 96,359.5 91.5,363 90.5,375 92,377.5 95,377.5 101,374.5 105,374.5 108,375.5 115.5,383 120.5,392 129.5,418 131.5,430 130.5,460 127.5,478 121.5,496 121.5,502 124,504.5 127,504.5 131.5,497 135.5,485 142.5,454 144.5,438 144.5,410 139.5,378 112.5,309 107.5,286 106.5,265 112.5,252 117,248.5 124,248.5 128.5,244 130.5,237 125,231.5 121,230.5 114,233.5 105.5,242 98.5,256 98.5,272 100.5,286 105.5,303 132.5,367 135.5,376 135,379.5 98.5,301 89.5,272 89.5,238 93.5,224 101.5,212 101.5,209Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:220px;
  opacity:.66;
  border-radius:inherit;
}
.flower-wm>*{position:relative;z-index:1}

/* ---------- pills & buttons ---------- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;font-size:14px;font-weight:500;line-height:1;
  padding:13px 24px;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.pill:active{transform:scale(.97)}
.pill-solid-white{background:#fff;color:var(--green)}
.pill-solid-white:hover{background:var(--sand)}
.pill-out-white{border:1.5px solid rgba(255,255,255,.85);color:#fff}
.pill-out-white:hover{background:rgba(255,255,255,.14)}
.pill-solid-green{background:var(--green);color:#fff}
.pill-solid-green:hover{background:var(--green-deep);transform:translateY(-1px)}
.pill-out-green{border:1.5px solid var(--green);color:var(--green)}
.pill-out-green:hover{background:var(--green);color:#fff}
.pill-tan{background:var(--tan);color:#fff}
.pill-tan:hover{filter:brightness(1.08)}

/* tag pills (small, outline) */
.tag{
  display:inline-block;border:1.2px solid var(--green);border-radius:999px;
  padding:7px 14px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green);line-height:1;background:transparent;
}
.tag.on-green{border-color:rgba(255,255,255,.75);color:#fff}
.tag.fill{background:var(--sand-soft);border-color:transparent}

/* meta pills (grey chips like "12 yrs experience") */
.chip{
  display:inline-block;background:#E9ECDC;color:var(--green);
  border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:500;line-height:1;
}
.chip.on-green{background:rgba(255,255,255,.16);color:#fff}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--nav-h);padding:0 clamp(18px,3vw,36px);
}
.nav.on-green{background:transparent}
.nav.on-light{background:rgba(247,245,238,.86);backdrop-filter:blur(12px)}
.nav .brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.01em;line-height:1}
.nav .brand svg{width:auto;height:44px;flex:0 0 auto}
.nav-links{display:flex;gap:8px;align-items:center}
.nav-links a{
  border:1.2px solid rgba(255,255,255,.55);border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:500;line-height:1;color:#fff;
  transition:background .15s,color .15s,border-color .15s;
}
.nav-links a:hover{background:#fff;color:var(--green)}
.nav-links a.active{background:#fff;color:var(--green);border-color:#fff}
.nav.on-light .nav-links a{border-color:rgba(30,124,65,.45);color:var(--green)}
.nav.on-light .nav-links a:hover,.nav.on-light .nav-links a.active{background:var(--green);color:#fff;border-color:var(--green)}
.nav-cta{flex:0 0 auto}
.nav-burger{display:none;width:44px;height:44px;border-radius:12px;position:relative}
.nav-burger span{position:absolute;left:11px;right:11px;height:2.4px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s,top .25s}
.nav-burger span:nth-child(1){top:15px}
.nav-burger span:nth-child(2){top:21px}
.nav-burger span:nth-child(3){top:27px}
body.menu-open .nav-burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* mobile menu overlay */
.mmenu{
  position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  background:linear-gradient(178deg,var(--green-deep),var(--green-light));color:#fff;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s ease,visibility .3s;
}
body.menu-open .mmenu{opacity:1;pointer-events:auto;visibility:visible}
.mmenu::before{
  content:"✕";position:absolute;top:22px;right:24px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;border:1.4px solid rgba(255,255,255,.6);border-radius:50%;
}
.mmenu a{font-size:22px;font-weight:500;padding:10px 22px;border-radius:999px}
.mmenu a:hover{background:rgba(255,255,255,.14)}
.mmenu .mmenu-blob{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);width:min(300px,64vw);opacity:.95}
@media (max-width:960px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:block}
}
body.menu-open{overflow:hidden}

/* ---------- hero card ---------- */
.hero-card{
  border-radius:var(--rad-hero);
  overflow:hidden;position:relative;
}
.hero-inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(28px,5vw,64px) 20px 0;
}
.hero-inner .eyebrow{color:var(--green-ghost);margin-bottom:18px}
.hero-inner h1 .alt{color:var(--sand)}
.hero-sub{
  max-width:520px;margin:22px auto 26px;font-size:15.5px;color:#E7F0E5;
}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,8vw,110px) 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto clamp(36px,5vw,64px)}
.sec-head .eyebrow{opacity:.65;margin-bottom:14px}
.sec-lede{font-size:15.5px;max-width:520px;margin:16px auto 0;color:#55705D}
.on-green .sec-lede,.green-grad .sec-lede{color:#CFE4D3}

/* highlight words inside body copy (ref bolds key phrases) */
.hl{font-weight:600}

/* ---------- glass cards (CHALLENGES style) ---------- */
.glass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.glass{
  background:rgba(10,40,20,.32);
  border-radius:var(--rad-card);
  padding:38px 30px;text-align:center;color:#fff;
}
.glass .g-shape{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:26px}
.glass .g-shape svg{width:130px;height:130px}
.glass h3{font-family:var(--serif);font-weight:400;font-size:27px;margin-bottom:12px}
.glass p{font-size:13.5px;color:#D6E8D8}
@media (max-width:900px){.glass-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* ---------- light cards (still-stuck club) ---------- */
.club-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.club-card{
  background:var(--card);border-radius:var(--rad-card);padding:22px 22px 26px;
  position:relative;box-shadow:0 1px 0 rgba(22,40,27,.05);
}
.club-card .dot{position:absolute;top:18px;right:18px;width:10px;height:10px;border-radius:50%;background:var(--green)}
.club-card .art{
  width:170px;height:170px;border-radius:50%;overflow:hidden;
  background:#EDF0E4;margin-bottom:20px;display:flex;align-items:center;justify-content:center;
}
.club-card .art svg{width:100%;height:100%}
.club-card h3{font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:10px}
.club-card p{font-size:13.5px;color:#4C6653}
@media (max-width:900px){.club-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* ---------- pill pile (what we help with) ---------- */
.pile-sec{text-align:center}
.pile-label{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);color:#fff;text-align:left;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.pile-stage{position:relative;max-width:900px;margin:10px auto 0;padding:20px 16px 0}
.pile-stage svg{width:100%;height:auto;display:block}
@media (max-width:640px){
  .pile-stage{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pile-stage svg{min-width:620px}
}
.pile-tag{
  fill:rgba(21,92,47,.9);stroke:rgba(255,255,255,.9);stroke-width:1.3;
}
.pile-tag-txt{
  font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.08em;fill:#fff;
}
.pile-title{margin:34px auto 20px}
.pile-title .disp{font-size:clamp(26px,4vw,46px);color:#fff}

/* ---------- steps (how it works) ---------- */
.steps{max-width:760px;margin:0 auto}
.step{
  display:grid;grid-template-columns:170px 1fr;gap:26px;align-items:center;
  padding:34px 0;border-bottom:1px solid #E5E3D2;position:relative;overflow:hidden;
}
.step:last-child{border-bottom:0}
.step .n{
  font-family:var(--disp);font-weight:800;
  font-size:106px;line-height:.84;color:var(--sand);opacity:.55;user-select:none;
}
.step h3{font-family:var(--serif);font-weight:400;font-size:26px;margin-bottom:8px}
.step p{font-size:14px;color:#4C6653;max-width:420px}
@media (max-width:640px){
  .step{grid-template-columns:86px 1fr;gap:16px}
  .step .n{font-size:54px}
}

/* ---------- bar chart (why numbers) ---------- */
.chart-card{
  background:#fff;border-radius:var(--rad-hero);
  padding:clamp(30px,5vw,64px);
}
.chart{
  display:grid;grid-template-columns:repeat(4,1fr) 1.35fr;gap:18px;align-items:end;
  border-bottom:2.5px solid var(--green);padding-bottom:0;position:relative;
  min-height:420px;
}
.bar{
  border-radius:4px 4px 0 0;padding:18px 16px;display:flex;flex-direction:column;
  justify-content:space-between;min-height:60px;
}
.bar h4{font-family:var(--serif);font-weight:400;font-size:21px;margin-bottom:10px}
.bar p{font-size:12px;line-height:1.5;color:#4C6653;margin-top:auto}
.bar.b1{height:42%;background:var(--sand-soft)}
.bar.b2{height:58%;background:#EDEBDD}
.bar.b3{height:76%;background:var(--sand-soft)}
.bar.b4{height:94%;background:#EDEBDD}
.chart-big{align-self:end;text-align:left;padding-left:8px}
.chart-big .lbl{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.4vw,34px);line-height:1}
.chart-big .num{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(104px,13vw,200px);line-height:.82;letter-spacing:-.02em;position:relative;display:inline-block;
}
.chart-big .cap{position:absolute;top:-34px;right:-48px;width:130px;transform:rotate(8deg)}
@media (max-width:900px){
  .chart{display:flex;flex-direction:column;align-items:stretch;min-height:0;border-bottom:0;border-left:2.5px solid var(--green);gap:14px}
  .bar{height:auto!important;border-radius:0 4px 4px 0}
  .chart-big{padding:10px 0 0 8px}
  .chart-big .cap{right:6px}
}

/* ---------- poster band (REFLECT REFRAME REGROW) ---------- */
.poster{
  background:var(--gold);border-radius:var(--rad-hero);
  position:relative;overflow:hidden;color:var(--green-deep);
  padding:clamp(44px,6vw,84px) 24px;text-align:center;
}
.poster::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23c9c433'%3E%3Cpath d='M20 18c3 6 3 10 0 12s-7-1-7-6 4-9 7-6zM88 62c3 6 3 10 0 12s-7-1-7-6 4-9 7-6zM46 96c3 6 3 10 0 12s-7-1-7-6 4-9 7-6z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px;
}
.poster>*{position:relative}
.poster .tiny{display:flex;flex-wrap:wrap;gap:8px clamp(10px,3vw,26px);justify-content:center;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.poster h2{font-size:clamp(32px,5.2vw,68px)}
.poster .character{width:min(190px,44vw);margin:26px auto 0}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid #E5E3D2}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  text-align:left;padding:22px 4px;font-size:16px;font-weight:500;color:var(--green);
}
.faq-q .ic{flex:0 0 auto;width:22px;height:22px;position:relative}
.faq-q .ic::before,.faq-q .ic::after{
  content:"";position:absolute;background:var(--green);border-radius:2px;
  transition:transform .25s ease;
}
.faq-q .ic::before{left:0;right:0;top:10px;height:2px}
.faq-q .ic::after{top:0;bottom:0;left:10px;width:2px}
.faq-item.open .faq-q .ic::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 40px 22px 4px;font-size:14px;color:#4C6653;max-width:640px}

/* ---------- big CTA (blue, end of page) ---------- */
.cta-end{
  border-radius:var(--rad-hero);text-align:center;
  padding:clamp(56px,7vw,96px) 24px 0;overflow:hidden;position:relative;
}
.cta-end h2{color:#fff;margin-bottom:26px}
.cta-end .hero-ctas{margin-bottom:8px}
.cta-end .cta-art{width:min(420px,78vw);margin:30px auto 0;display:block}

/* ---------- footer ---------- */
.footer{
  border-radius:var(--rad-hero);
  padding:clamp(36px,5vw,56px) clamp(24px,4vw,56px) 28px;color:#fff;
}
.footer.green-grad{background:linear-gradient(178deg,var(--green-deep),#1B6A38)}
.footer-top{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-bottom:38px}
.footer .brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:25px}
.footer .brand svg{width:auto;height:46px}
.footer .tagline{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--green-ghost);margin-top:10px}
.footer-col h5{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ghost);margin-bottom:14px}
.footer-col a,.footer-col p{display:block;font-size:13.5px;color:#E7F0E5;margin-bottom:9px}
.footer-col a:hover{color:var(--sand)}
.footer-crisis{
  background:rgba(8,30,15,.45);border-radius:14px;padding:14px 18px;
  font-size:12.5px;color:#fff;max-width:620px;margin:0 auto 26px;text-align:center;
}
.footer-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--green-ghost);border-top:1px solid rgba(255,255,255,.16);padding-top:20px}

/* ---------- directory (care / team pages) ---------- */
.dir-hero{
  border-radius:var(--rad-hero);text-align:center;
  padding:0 20px clamp(40px,5vw,60px);overflow:hidden;
}
.dir-hero .stickers{max-width:760px;margin:6px auto 8px}
.dir-hero h1{color:#fff;font-size:clamp(32px,5vw,62px)}
.dir-hero .sub{font-size:13.5px;color:#fff;max-width:340px;margin:14px auto 0}
.filter-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:26px 0 0}

.dir-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dir-card{
  background:#fff;border-radius:var(--rad-card);padding:20px 20px 0;
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:transform .2s ease,box-shadow .2s ease;
}
.dir-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(21,92,47,.12)}
.dir-card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.dir-card h3{font-family:var(--serif);font-weight:400;font-size:22px;margin-bottom:10px}
.dir-card>p{font-size:12.5px;color:#4C6653;margin-bottom:16px}
.dir-card .photo{margin:auto -20px 0;position:relative}
.dir-card .photo img,.dir-card .photo svg{width:100%;height:auto;display:block}
.dir-card .go{
  position:absolute;bottom:14px;right:14px;
  display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--green);
  border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:600;
  box-shadow:0 4px 14px rgba(22,40,27,.16);
}
.dir-card .go .arr{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;align-items:center;justify-content:center;font-size:11px}
@media (max-width:1080px){.dir-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.dir-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dir-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

/* ---------- profile page (dr) ---------- */
.profile-stage{position:relative;padding-bottom:0;overflow:hidden}
.profile-card{
  color:var(--green);
  background:var(--card);border-radius:var(--rad-card);
  max-width:1020px;margin:10px auto clamp(90px,12vw,150px);
  padding:clamp(28px,4vw,48px);
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,44px);
  position:relative;z-index:2;
}
.profile-card h1{font-size:clamp(29px,3.9vw,50px);margin-bottom:18px}
.profile-card .meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.profile-card .bio p{font-size:13.5px;color:#415748;margin-bottom:13px;max-width:560px}
.profile-card .bio ul{margin:0 0 13px 18px;list-style:disc;font-size:13.5px;color:#415748}
.profile-card .bio li{margin-bottom:4px}
.spec-h{font-family:var(--serif);font-size:26px;margin:26px 0 16px}
.spec-tags{display:flex;gap:10px;flex-wrap:wrap}
.photo-col{display:flex;flex-direction:column;gap:14px}
.photo-col .photo{border-radius:14px;overflow:hidden;background:#EDE9E2}
.photo-col .photo img{width:100%;height:auto}
.giant-runner{
  position:absolute;left:0;right:0;bottom:.16em;z-index:1;
  font-size:clamp(76px,14vw,205px);color:#fff;text-align:center;white-space:nowrap;
  pointer-events:none;user-select:none;line-height:.8;
}
@media (max-width:860px){.profile-card{grid-template-columns:1fr}}

/* quals cards */
.quals{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.qual{
  background:#fff;border-radius:var(--rad-card);padding:22px 20px;
  width:222px;box-shadow:0 1px 0 rgba(22,40,27,.05);
}
.qual h3{font-family:var(--serif);font-weight:400;font-size:20px;margin-bottom:8px}
.qual p{font-size:12px;color:#4C6653;margin-bottom:14px}
.qual svg{width:100%;height:auto;border-radius:10px}
.qual:nth-child(odd){margin-top:44px}

/* ---------- why page ---------- */
.why-hero{border-radius:var(--rad-hero);overflow:hidden;position:relative;text-align:center;padding-top:8px}
.why-hero h1{
  color:#fff;font-size:clamp(36px,6.8vw,98px);position:relative;z-index:2;margin-top:8px;
}
.why-hero .heroline{position:relative;z-index:1;margin:-1.2em auto 0;max-width:900px;display:block}
.mission-band{
  border-radius:var(--rad-hero);color:#fff;text-align:center;
  padding:clamp(40px,6vw,72px) 24px;position:relative;overflow:hidden;
}
.mission-band h2{font-size:clamp(26px,3.9vw,48px);display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.mission-band h2 svg{width:64px;height:44px}
.mission-band p{max-width:460px;margin:18px auto 0;font-size:14px;color:#fff}
.pillars{max-width:820px;margin:0 auto}
.pillar{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid #E5E3D2;align-items:start}
.pillar:last-child{border-bottom:0}
.pillar .ic{width:40px;height:40px;margin-top:4px}
.pillar h3{font-family:var(--serif);font-weight:400;font-size:23px;margin-bottom:6px}
.pillar p{font-size:13.5px;color:#4C6653;max-width:560px}

/* ---------- contact ---------- */
.contact-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:24px;max-width:1020px;margin:0 auto;
}
.contact-card{background:#fff;border-radius:var(--rad-card);padding:clamp(26px,3.6vw,40px)}
.contact-card h2{font-family:var(--serif);font-weight:400;font-size:26px;margin-bottom:18px}
.c-row{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;margin-bottom:18px}
.c-row .ci{width:34px;height:34px;border-radius:10px;background:var(--sand-soft);display:flex;align-items:center;justify-content:center;color:var(--tan)}
.c-row h3{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6B7568;margin-bottom:3px}
.c-row p,.c-row a{font-size:14.5px;color:var(--green);font-weight:500;line-height:1.45;display:block}
.c-row a:hover{color:var(--tan)}
.form label{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6B7568;margin:0 0 7px 2px}
.form input,.form textarea,.form select{
  width:100%;border:1.2px solid #D8D8C5;border-radius:12px;background:#FBFBFA;
  padding:13px 16px;font:inherit;font-size:14px;color:var(--green);margin-bottom:16px;
  transition:border-color .15s;
}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--green)}
.form textarea{min-height:110px;resize:vertical}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* float animation for stickers — animates the independent `translate`
   property so SVG transform attributes are left intact */
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.bob{animation:bob 5s ease-in-out infinite}
.bob.b2{animation-duration:6.2s;animation-delay:.6s}
.bob.b3{animation-duration:7.1s;animation-delay:1.1s}
.bob.b4{animation-duration:5.6s;animation-delay:1.6s}

/* squiggle draw */
.squiggle-path{stroke-dasharray:1600;stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* capture helper — freeze animations for screenshots */
body.capture .rv{opacity:1!important;transform:none!important}
body.capture .bob{animation:none!important}