@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dm-sans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/dm-sans-500.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/dm-sans-600.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/dm-sans-700.woff2') format('woff2')}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/patrick-hand-400.woff2') format('woff2')}
:root{--ink:#0a2818;--paper:#f4f1e8;--lime:#d5dc45;--sage:#a8bd87;--sage-deep:#44603a;--pink:#ef9aa5;--orange:#eaa45c;--forest:#17361e;--white:#fffdf5;
/* Outer spacing for every large rounded card (.cta, .featured .project,
   .detail-hero, .planned-strip, .about-story, .project-img, .contact-panel).
   One token so a card's gap to the section above, the section below and
   both viewport edges is always the same measure at a given width. */
--card-inset:clamp(14px,2.2vw,30px);
/* Inline gutter shared by everything inside the project story card —
   copy, slider controls and (when stacked) the image — so they all sit
   on one content grid instead of three different edges. */
--project-gutter:clamp(24px,6vw,86px);
/* Readability scrim for photographic cards. Dark green rather than
   neutral black so it reads as part of the palette, and weighted to the
   bottom where the copy sits. Paired with white text — never a shadow. */
--photo-scrim:linear-gradient(to top,rgba(10,40,24,.94) 0%,rgba(10,40,24,.86) 26%,rgba(10,40,24,.6) 44%,rgba(10,40,24,.24) 62%,rgba(10,40,24,0) 82%);
--pale-green:#dbe7cf;
/* Content ceiling for sections that centre on a max-width grid rather than
   running edge-to-edge. Paired with
     padding-inline:max(7vw,calc((100% - var(--content-max))/2))
   so the 7vw gutter still governs below the ceiling and the content simply
   centres above it — no wrapper element needed. */
--content-max:1440px;
/* --- Type scale tokens (added for site-wide font-size consistency) --- */
--fs-2xs:12px;
--fs-xs:14px;
--fs-sm:16px;
--fs-md:18px;
--fs-lg:20px;
--fs-lead:clamp(16px,1.3vw,18px);
--fs-h4:clamp(22px,2.2vw,28px);
--fs-h3-sm:30px;
--fs-h3:clamp(28px,2.8vw,36px);
--fs-h2-sm:clamp(32px,3.2vw,44px);
--fs-h2-lg:clamp(46px,5.4vw,76px);
--fs-h1-sub:clamp(42px,4.6vw,68px);
--fs-h1-hero:clamp(62px,6.2vw,100px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}
h1,h2,h3{text-wrap:balance}
a{color:inherit;text-decoration:none}
img{width:100%;height:100%;object-fit:cover;display:block}
.nav{height:68px;padding:0 clamp(10px,1.2vw,18px) 0 clamp(16px,2vw,28px);display:flex;align-items:center;justify-content:space-between;position:fixed;z-index:10;width:calc(100% - 24px);top:12px;left:12px;background:rgba(255,253,245,.94);border:1px solid rgba(10,40,24,.12);border-radius:18px;box-shadow:0 8px 30px rgba(10,40,24,.08);backdrop-filter:blur(12px)}
.logo{display:flex;align-items:center;gap:8px}
.logo b{font-size:50px;letter-spacing:-5px;line-height:1}
.logo small{font-size:8px;font-weight:700;letter-spacing:.08em}
.nav nav{display:flex;gap:48px;font-size:18px;font-weight:600}
.nav-actions{display:flex;align-items:center;gap:clamp(12px,1.8vw,18px)}
/* Sized and outlined to read as a real control next to the language
   pill and the lime CTA, without out-weighing the CTA itself. */
.menu{display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid rgba(10,40,24,.18);background:var(--white);color:var(--ink);border-radius:50%;font:inherit;cursor:pointer;transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .18s ease}
.menu-icon{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.menu-close{display:none}
.menu[aria-expanded="true"] .menu-bars{display:none}
.menu[aria-expanded="true"] .menu-close{display:block}
.menu:hover{background:#e9e6dc;border-color:rgba(10,40,24,.34)}
.menu:active{transform:scale(.94);background:#dcd8cb}
.menu[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.languages{display:flex;align-items:center;gap:2px;background:#e9e6dc;padding:4px;border-radius:22px;border:0}
.talk{background:var(--lime);padding:15px 20px;border-radius:28px;font-weight:700}
.hero{display:grid;grid-template-columns:38% 62%;position:relative;overflow:visible}
.hero-copy{padding:125px 4vw 45px 6.5vw;position:relative;z-index:2}
.hero h1{font-size:clamp(62px,6.2vw,100px);line-height:.88;letter-spacing:-.065em;margin:42px 0 25px;text-wrap:balance}
.hero-copy>p{font-size:20px;line-height:1.45;max-width:410px}
.scribble{font-family:'Patrick Hand',cursive;position:absolute;top:52px;left:180px;font-size:18px;transform:rotate(-5deg);color:#59752c}
.explore{display:flex;align-items:center;gap:15px;margin-top:38px;font-family:'Patrick Hand',cursive;font-size:21px}
.explore span{display:grid;place-items:center;background:var(--lime);border-radius:50%;width:58px;height:58px;font-family:sans-serif}
.explore em{font-style:normal;border-bottom:2px solid}
/* The photograph is a 3:4 portrait: the boy's face sits at roughly
   19-34% of the frame height. Sizing the container by aspect-ratio
   rather than a fixed pixel height keeps the crop window the same
   proportion of the image at every viewport width, and the
   object-position at each breakpoint is chosen so the top of the
   window always lands above the face (see the per-breakpoint values
   below). The old fixed heights turned the box progressively wider
   and shorter as the window narrowed, which walked the crop straight
   past the face. */
.hero-photo{position:relative;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,6% 72%,0 50%,6% 28%);overflow:hidden;aspect-ratio:4/3;height:auto;align-self:start}
.note{position:absolute;right:0;bottom:4px;background:var(--lime);padding:34px 48px 30px 62px;border-radius:55% 0 0 45%;font-family:'Patrick Hand',cursive;font-size:21px;line-height:1.25;transform:rotate(2deg);max-width:390px;z-index:5}
.note span{font-size:40px;position:absolute;right:20px;top:18px}
.leafline{position:absolute;left:-20px;bottom:35px;width:170px;height:170px;fill:none;stroke:#9ba397;stroke-width:1}
.solutions{padding:65px 5vw 90px;display:grid;grid-template-columns:1.35fr repeat(5,1fr);gap:16px;align-items:center;position:relative;padding-top:38px;padding-bottom:70px}
.solutions-intro{padding:10px 25px 0 2vw;transform:translateY(-12px)}
.kicker{font-family:'Patrick Hand',cursive;font-size:23px;color:#58782c}
.solutions h2,.paths h2,.journey h2,.about h2{font-size:42px;line-height:1.03;letter-spacing:-.045em;margin:20px 0;text-wrap:balance}
.journey-title h2{text-wrap:pretty}
.solutions-intro p{font-size:14px;line-height:1.5;max-width:260px}
.solutions-intro a{display:inline-block;margin-top:28px;font-size:13px;font-weight:700;border-bottom:1px solid;padding-bottom:8px}
.service-card{height:320px;position:relative;border-radius:16px;overflow:hidden;display:block}
.service-card.no-link{cursor:default}
/* These 5 photos come from different shoots with no shared grade — a
   moody forest, a saturated garden, a monochrome street shot, a
   white-background product photo. A single subtle filter brings them
   into one family (warmer, slightly muted) without making any one
   of them look edited on its own. Same treatment on the What We Do
   version of this grid (.wtd-service-img) for consistency. */
.service-card img,.wtd-service-img img{filter:saturate(.82) sepia(.12) hue-rotate(-6deg) contrast(1.03)}
.roof-card img{object-position:62% center}
/* Full-height scrim (not a bottom half) so the gradient has room to
   fade out, and any photograph — light sky, busy foliage — still leaves
   the copy on a predictable dark ground. */
.service-card:after{content:"";position:absolute;inset:0;background:var(--photo-scrim);pointer-events:none}
/* These cards are only ~120px wide in the 6-column row, so the safe area
   stays at 12px — widening it pushed the two-line titles onto four lines. */
.service-card-body{position:absolute;z-index:2;bottom:12px;left:12px;right:12px;display:flex;align-items:end;justify-content:space-between}
.service-card-title{background:var(--white);padding:13px;border-radius:13px;font-size:13px}
.service-card-arrow{background:var(--lime);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:20px}
/* One centred content grid: the kicker, the headline and the first of the
   three columns all start on the same left boundary, and the third column
   ends on the grid's right edge. Replaces the old 1fr/2fr/auto head (which
   indented the headline a third of the way in to make room for the lime
   symbol) and the 32% left margin that pushed .three across to meet it.
   Padding is balanced top and bottom. */
.approach{background:var(--forest);color:var(--white);padding-block:clamp(72px,7vw,104px);padding-inline:max(7vw,calc((100% - var(--content-max))/2));position:relative;overflow:hidden;isolation:isolate}
.approach-head .kicker{display:block;margin-bottom:18px}
.approach h2{font-size:clamp(38px,4.4vw,64px);line-height:1.02;letter-spacing:-.045em;margin:0}
.approach-head h2>span,.approach-head h2>i{display:block;text-wrap:balance}
.approach h2 i,.project h2 i,.ambition h2 i,.about h2 i{font-family:'Patrick Hand',cursive;font-weight:400;color:var(--lime)}
.light{color:#cbd779}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin:clamp(44px,5vw,72px) 0 0;position:relative;z-index:2}
.three article{border-top:1px solid #6a7c6d;padding-top:22px}
.three article>span{font-family:'Patrick Hand',cursive;color:var(--lime)}
.three h3{font-size:clamp(22px,1.9vw,28px);margin:32px 0 12px}
.three p{color:#d2d8d2;line-height:1.55;font-size:clamp(15px,1.1vw,16px);max-width:38ch}
.paths{padding:110px 7vw;position:relative;isolation:isolate}
.paths>h2{font-size:68px;max-width:800px;text-wrap:balance}
.path-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:60px;max-width:1800px;margin-inline:auto}
/* Alternating diagonal curves give every card the same leaf-inspired
   silhouette without clipping the rectangular safe area used by the copy. */
.path-grid a{--leaf-radius:clamp(72px,7vw,120px);min-height:340px;padding:clamp(28px,2.6vw,36px);border:1px solid transparent;border-radius:var(--leaf-radius) 22px var(--leaf-radius) 22px;display:flex;flex-direction:column;background:var(--pale-green);transition:transform .3s ease,box-shadow .3s ease}
.path-grid a:nth-child(even){border-radius:22px var(--leaf-radius) 22px var(--leaf-radius)}
.path-grid a:nth-child(2){background:var(--lime);border-color:var(--lime)}
.path-grid a:nth-child(3){background:#d9c8df;border-color:#d9c8df}
.path-grid a:nth-child(4){background:var(--sage);border-color:var(--sage)}
.path-grid a:hover,.path-grid a:focus-visible{transform:translateY(-8px);box-shadow:0 14px 30px rgba(10,40,24,.14)}
.path-grid small{font-family:'Patrick Hand',cursive;font-size:18px}
.path-grid h3{font-size:clamp(32px,3vw,42px);line-height:1;margin:clamp(26px,3vw,40px) 0 18px;text-wrap:balance}
.path-grid p{max-width:300px;line-height:1.5}
.path-grid b{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:17px;letter-spacing:-.01em}
.path-arrow{display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.path-grid a:hover .path-arrow,.path-grid a:focus-visible .path-arrow{transform:translateX(4px)}
.project{display:block;grid-template-columns:minmax(0,44%) minmax(0,56%);background:var(--sage-deep);color:var(--white);position:relative;overflow:hidden;padding-bottom:clamp(30px,3.4vw,48px)}
.project-copy{padding:clamp(56px,5vw,76px) clamp(20px,3vw,46px) clamp(26px,2.6vw,36px) var(--project-gutter)}
.project h2{font-size:clamp(34px,3.8vw,54px);line-height:.98;letter-spacing:-.05em;margin:18px 0;text-wrap:balance}
.project-copy>p{font-size:clamp(15.5px,1.15vw,17px);line-height:1.55;max-width:460px}
.facts{display:flex;gap:50px;margin:38px 0 28px}
.facts div{display:flex;flex-direction:column}
.facts strong{font-size:45px}
.facts small{font-size:12px}
/* Real link component: heavier rule, its own arrow, and hover/focus
   states. The site-wide focus ring is an ink outline on a lime glow,
   both invisible on this dark-green card, so it gets a lime ring. */
.project-link{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:clamp(15px,1.1vw,17px);padding-bottom:8px;border-bottom:2px solid rgba(255,253,245,.45);transition:color .25s ease,border-color .25s ease}
.link-arrow{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.project-link:hover{color:var(--lime);border-bottom-color:var(--lime)}
.project-link:hover .link-arrow{transform:translateX(4px)}
.project-link:focus-visible{outline:3px solid var(--lime);outline-offset:5px;border-radius:3px;box-shadow:none}
/* Radius pulled back from 120px so the card's corners read as one family
   with the badge and caption instead of three unrelated shapes. Height is
   capped rather than left to the image's own aspect ratio: the source
   photos are portrait, so on a wide viewport the 56%-width column was
   stretching them (and the row height they set for the whole card) well
   past the fold. min(...vh) keeps that cap honest on short/wide screens
   too, not just narrow ones. */
.project-img{position:relative;margin:var(--card-inset) var(--card-inset) var(--card-inset) 0;border-radius:56px 20px 20px 20px;overflow:hidden;min-height:0;height:min(58vh,clamp(340px,34vw,560px))}
.project-img img{object-position:center 62%}
/* One badge geometry everywhere it appears (project story card, gallery
   cards, detail heroes): smaller, a true pill, and inset on the same
   measure as the rest of the card's furniture. */
.tag{position:absolute;top:clamp(14px,1.4vw,20px);left:clamp(14px,1.4vw,20px);z-index:3;background:var(--lime);color:var(--ink);font-size:10px;font-weight:700;letter-spacing:.07em;line-height:1;padding:7px 12px;border-radius:999px}
/* Inset on the same measure as the badge, width-capped and only just
   off-square, so the rotated corners stay inside the card at every width. */
.caption{position:absolute;right:clamp(16px,1.8vw,26px);bottom:clamp(16px,1.8vw,26px);max-width:min(74%,300px);background:var(--paper);color:var(--ink);font-family:'Patrick Hand',cursive;font-size:clamp(15px,1.3vw,19px);line-height:1.2;padding:12px 18px;border-radius:12px;transform:rotate(-1.5deg)}
.journey{padding:120px 7vw;position:relative;isolation:isolate;min-height:1040px}
.journey-title{position:relative;z-index:1}
.journey-title h2{font-size:70px}
.journey-title p{font-size:18px;line-height:1.6;max-width:520px}
.journey-track{display:grid;grid-template-columns:repeat(6,1fr);margin:70px 0 35px;border-top:2px solid var(--ink);padding-top:20px;position:relative;z-index:2;margin-top:110px}
.journey-track div{display:flex;flex-direction:column;gap:14px;position:relative}
.journey-track div:before{content:"";width:14px;height:14px;background:var(--lime);border:2px solid var(--ink);border-radius:50%;position:absolute;top:-28px}
.journey-track b{font-family:'Patrick Hand',cursive;font-size:16px}
.journey-track span{font-size:20px;font-weight:700}
.nursery{height:500px;border-radius:18px 120px 18px 18px;overflow:hidden;position:relative}
.tape{position:absolute;left:40px;bottom:30px;background:var(--pink);padding:14px 30px;font-family:'Patrick Hand',cursive;font-size:24px;transform:rotate(-3deg)}
.ambition{background:#0d2c1a;color:var(--white);padding:100px 7vw;position:relative;overflow:hidden;isolation:isolate}
.ambition-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,2fr);align-items:center;gap:clamp(30px,4vw,50px);position:relative;margin-top:26px}
/* The two figures are a pair and stay a pair: equal columns at every
   width, with the number and its description scaling instead of the
   row breaking into a tall stack with an empty half. */
.ambition-goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,50px)}
.ambition h2{font-size:72px;line-height:.9;letter-spacing:-.055em;margin:0}
.goal{border-top:0;padding-top:0}
/* Identical size, weight and line-height in both columns; a single-line
   number at a shared line-height puts the two figures on one baseline and
   starts both descriptions at the same height. */
.goal strong{display:block;font-size:clamp(56px,6.2vw,80px);font-weight:700;line-height:1;letter-spacing:-.06em;color:var(--lime);position:relative;z-index:2}
.goal p{font-size:clamp(14px,1.15vw,18px);line-height:1.35;max-width:260px;margin-top:12px}
.fine{opacity:.7;font-size:14px;margin-top:36px}
.about{padding-block:105px;padding-inline:max(7vw,calc((100% - var(--content-max))/2));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,8vw,120px);row-gap:0;align-items:start}
.about>div{grid-column:1;grid-row:1/3}
.about h2,.donation-proof h2{font-size:clamp(52px,4.8vw,68px);line-height:.95;letter-spacing:-.055em;margin:25px 0;text-wrap:balance}
.about>p{grid-column:2;grid-row:1;font-size:clamp(18px,1.45vw,21px);line-height:1.55;margin:0;text-wrap:pretty}
.about>a,.donation-copy a{display:inline-flex;align-items:center;justify-content:center;width:fit-content;background:var(--ink);color:var(--white);padding:18px 26px;border-radius:999px;font-size:clamp(18px,1.4vw,22px);font-weight:700;line-height:1.2;transition:background-color .25s ease,color .25s ease,transform .25s ease}
.about>a{grid-column:2;grid-row:2;justify-self:start;align-self:start;margin-top:28px}
.about>a:hover,.donation-copy a:hover{background:var(--lime);color:var(--ink);transform:translateY(-2px)}
.about>a:active,.donation-copy a:active{transform:translateY(0)}
/* The 120px corner radius and 90px padding were sized like the
   site's large photo treatments (600-900px tall), but this panel is
   only ~350-400px tall — at that scale the same absolute radius
   consumed ~30% of the box height, reading as an oversized rounded
   container with a large empty run-in before the heading rather than
   an editorial section. Scaled the radius and tightened the padding
   to match this component's actual proportions. */
.cta{margin:var(--card-inset);background:var(--lime);border-radius:44px 20px 20px 20px;padding:clamp(44px,5vw,64px) clamp(30px,7vw,110px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(26px,4vw,48px);position:relative;overflow:hidden}
/* Fluid rather than a hard 78px: just above the 650px breakpoint the
   copy column is only ~355px wide, and a single long word in the
   heading ('something', 'Quadratmeter') overflowed a panel that
   clips its own overflow. Reaches 78px from ~1055px up, so the wide
   desktop composition is unchanged. */
.cta h2{font-size:clamp(46px,7.4vw,78px);line-height:.9;letter-spacing:-.06em;margin:25px 0}
/* Circle sized by clamp with aspect-ratio, and the label given real
   padding inside it, so the text stays centred inside the disc and
   wraps rather than spilling past the edge as the viewport changes. */
.cta-action{width:clamp(150px,14vw,190px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-content:center;justify-items:center;gap:10px;padding:0 13%;text-align:center;font-weight:700;font-size:clamp(14px,1.15vw,18px);line-height:1.25;transition:background-color .3s ease,color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.cta-label{display:block;text-wrap:balance}
.cta-arrow{width:clamp(24px,2.2vw,30px);height:auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cta-action:hover{background:var(--paper);color:var(--ink);transform:scale(1.05)}
.cta-action:hover .cta-arrow{transform:translate(3px,-3px)}
.cta-action:active{transform:scale(.98)}
/* The shared focus ring is a lime glow, which disappears on this lime
   panel — this one is inverted so the circle keeps a visible ring. */
.cta-action:focus-visible{outline:3px solid var(--ink);outline-offset:5px;box-shadow:0 0 0 9px var(--white)}
.flower{position:absolute;right:30%;bottom:-30px;font-size:150px;opacity:.18}
/* Shared decorative background motif — one flower shape (the source is
   kept at assets/flower-motif.svg for reference/editing) recolored,
   resized and repositioned per instance via CSS custom properties, using
   mask-image so no markup is duplicated per page. Inlined as a data URI
   rather than url('assets/flower-motif.svg'): Safari/WebKit refuses to
   fetch a *separate* local file for a CSS mask when the page is opened
   directly via file:// (unlike <img> or background-image, which still
   work), which silently hid the motif for anyone previewing the site by
   double-clicking the HTML file instead of via a server. A data URI has
   no second file to fetch, so it works the same on a server or file://.
   Negative z-index keeps it behind all in-flow content in its containing
   section regardless of that section's own stacking, and it carries no
   text, so it needs nothing extra to stay out of the a11y tree. */
.bg-motif{position:absolute;z-index:-1;pointer-events:none;width:var(--motif-size,260px);height:var(--motif-size,260px);top:var(--motif-top,auto);right:var(--motif-right,auto);bottom:var(--motif-bottom,auto);left:var(--motif-left,auto);background-color:var(--motif-color,var(--sage-deep));opacity:var(--motif-opacity,.06);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='26' r='23'/%3E%3Ccircle cx='72.83' cy='42.58' r='23'/%3E%3Ccircle cx='64.11' cy='69.42' r='23'/%3E%3Ccircle cx='35.89' cy='69.42' r='23'/%3E%3Ccircle cx='27.17' cy='42.58' r='23'/%3E%3Ccircle cx='50' cy='50' r='17'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='26' r='23'/%3E%3Ccircle cx='72.83' cy='42.58' r='23'/%3E%3Ccircle cx='64.11' cy='69.42' r='23'/%3E%3Ccircle cx='35.89' cy='69.42' r='23'/%3E%3Ccircle cx='27.17' cy='42.58' r='23'/%3E%3Ccircle cx='50' cy='50' r='17'/%3E%3C/svg%3E") center/contain no-repeat}
.bg-motif--on-dark{--motif-color:var(--lime);--motif-opacity:.08}
.bg-motif--on-light{--motif-color:var(--sage-deep);--motif-opacity:.06}
/* Scoped to a class, not the bare `footer` element: index.html has five
   <footer> elements — four are testimonial blockquote footers, which had to
   override the page-footer rules to undo them. Only this one is the page's
   contentinfo landmark. */
.site-footer{background:var(--ink);color:var(--white);padding:clamp(52px,5vw,74px) 5vw clamp(26px,2.6vw,34px)}
.inverted b{color:white}
.inverted small{color:var(--lime)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:14px;max-width:320px}
.footer-tagline{font-size:16px;margin:0;color:var(--lime)}
.footer-awards{font-size:12px;line-height:1.6;margin:0;color:rgba(255,253,245,.62)}
.footer-col{display:flex;flex-direction:column;gap:11px;font-size:14px}
.footer-heading{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--lime);margin:0 0 5px}
.footer-col a{color:rgba(255,253,245,.86);width:fit-content;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.footer-col a:hover{color:var(--white);border-bottom-color:var(--lime)}
.footer-address{display:flex;flex-direction:column;gap:11px;font-style:normal}
.footer-address span{color:rgba(255,253,245,.72)}
.footer-contact{font-weight:700}
.footer-social{display:flex;flex-direction:row;align-items:center;gap:16px;margin:6px 0 0}
.footer-social a{width:auto;border-bottom:none;color:rgba(255,253,245,.86)}
.footer-social a:hover{color:var(--lime);border-bottom:none}
.footer-social svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* The divider and the legal row: this is the tier the footer was missing. */
.footer-legal{margin-top:clamp(34px,4vw,52px);padding-top:clamp(20px,2.2vw,26px);border-top:1px solid rgba(255,253,245,.18);display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(20px,3vw,40px);font-size:13px}
.footer-copyright{margin:0;color:rgba(255,253,245,.72)}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:10px clamp(16px,2vw,26px)}
.footer-credit{display:inline-flex;align-items:center;gap:6px;color:rgba(255,253,245,.72);opacity:.7;transition:opacity .2s ease}
.footer-credit:hover,.footer-credit:focus-visible{opacity:1}
.footer-credit-logo{width:100px;height:auto;display:block}
.footer-backtotop{margin-left:auto;font-weight:700;border-bottom:1px solid transparent;transition:border-color .2s ease}
.footer-backtotop:hover{border-bottom-color:var(--lime)}
/* The site-wide focus ring is an ink outline plus a lime glow; the ink half
   vanishes on this ink background, so footer links get the lime ring alone. */
.site-footer a:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:3px;box-shadow:none}
.partners{padding:clamp(64px,6vw,88px) 7vw clamp(40px,4vw,56px);display:grid;grid-template-columns:.75fr 1.25fr;gap:9vw;align-items:center;background:#e8e4d7}
.partners-count strong{display:block;font-size:120px;line-height:.8;letter-spacing:-.08em;margin-top:35px}
.partners-count h2{font-size:clamp(32px,3.6vw,54px);line-height:1.05;margin:14px 0 20px;letter-spacing:-.04em}
.partners-count p{max-width:380px;line-height:1.6}
.partner-cloud{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #bcb8aa;border-left:1px solid #bcb8aa}
.partner-cloud span{height:120px;display:grid;place-items:center;border-right:1px solid #bcb8aa;border-bottom:1px solid #bcb8aa;font-size:11px;font-weight:700;letter-spacing:.14em;opacity:.48}
.voices{background:var(--forest);color:white;padding:110px 7vw}
/* Kicker, heading and testimonial cards all start on the section's left
   edge. The old 30%/70% split pushed the heading into the middle of the
   section, disconnected from both the label beside it and the cards below. */
.voices-head{display:block;max-width:min(100%,780px)}
.voices-head .kicker{display:block;margin-bottom:14px}
.voices-head h2{font-size:clamp(38px,5vw,65px);line-height:1;letter-spacing:-.05em;margin:0;text-wrap:balance}
.voices-head h2 i{font-family:'Patrick Hand',cursive;font-weight:400;color:var(--lime)}
.quote-grid{display:flex;grid-template-columns:1fr 1fr;gap:22px;margin:0;transition:transform .45s cubic-bezier(.2,.8,.2,1);will-change:transform}
.quote-grid blockquote{margin:0;background:var(--lime);color:var(--ink);padding:42px;border-radius:18px 70px 18px 18px;min-height:310px;display:flex;flex-direction:column;flex:0 0 calc((100% - 44px)/3);min-width:0}
.quote-grid blockquote.q-cream{background:#f4f1e8;border-radius:70px 18px 18px 18px}
.quote-grid blockquote>p{font-family:'Patrick Hand',cursive;font-size:28px;line-height:1.25;margin:0}
/* background/color resets dropped: they existed only to undo the old bare
   `footer{background:var(--ink);color:white}`, which is now scoped to
   .site-footer and no longer reaches these blockquote footers. */
.quote-grid blockquote footer{margin-top:auto;padding:30px 0 0;display:flex;justify-content:flex-start;gap:14px}
.quote-grid footer div{display:flex;flex-direction:column;gap:3px}
.quote-grid footer small{font-size:11px;opacity:.65}
.avatar{width:42px;height:42px;border:1px solid;border-radius:50%;display:grid;place-items:center}
.donation-proof{padding-block:105px;padding-inline:max(7vw,calc((100% - var(--content-max))/2));background:var(--pink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,8vw,120px);row-gap:0;align-items:start}
.donation-proof h2 i{font-family:'Patrick Hand',cursive;font-weight:400}
.donation-copy>p{font-size:clamp(18px,1.45vw,21px);line-height:1.55;margin-top:0;text-wrap:pretty}
.donation-copy .tax-note{font-size:13px;opacity:.72}
.donation-copy a{margin-top:28px}
.hero .scribble{display:none}
.chalk-flower{position:absolute;top:22px;left:43%;font-family:'Patrick Hand',cursive;font-size:78px;color:#91a17f;transform:rotate(-13deg);opacity:.62;z-index:0}
.solutions-intro{position:relative;z-index:1}
.chalk-flower span{font-size:24px;margin-left:8px;display:none}
.solutions .service-card{transform:translateY(-72px)}
/* Every slide occupies the same grid cell instead of being absolutely
   positioned, so switching slides never jumps — but the cell's natural
   height is the TALLEST of every stacked slide, not just the visible
   one, so a fixed height is set from JS (script.js: syncProjectHeight)
   using only the active slide's own height, with a matching transition
   so a taller/shorter next slide resizes the card smoothly.
   align-items:start (instead of the grid default, stretch) matters for
   that measurement: without it every slide — including the inactive
   one — stretches to fill whatever height the container currently has,
   so measuring a slide's "natural" height just reads back whatever the
   container was already set to. With start, each slide always renders
   at its own intrinsic height regardless of the container's height,
   so the measurement (and the resulting fit) is accurate. The inactive
   slide's own (possibly taller) height then simply overflows past the
   active slide's height, invisibly — it's opacity:0 either way, and
   .project has overflow:hidden. */
.project-slides{display:grid;position:relative;align-items:start;transition:height .5s ease}
.project-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);opacity:0;pointer-events:none;transform:translateX(25px);transition:opacity .5s ease,transform .5s ease}
.project-slide.active{opacity:1;pointer-events:auto;transform:none}
.project-caveat{display:block;margin-top:12px;opacity:.7}
/* Arrows sit in the outer edges of the card, vertically centered on
   the whole (grid-stacked, fixed-height) .project box rather than tied
   to either slide's own content flow — the left one sits inside the
   copy's own gutter, before the text starts, so it can't drift into
   the copy or the facts figure regardless of which slide is active or
   how tall its content runs. */
.project-controls{position:absolute;inset:0;margin:0;pointer-events:none}
.project-controls button{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;background:rgba(141,166,118,.92)}
.project-prev{left:clamp(6px,1.6vw,22px)}
.project-next{right:clamp(6px,1.6vw,22px)}
.project-controls button,.voice-controls button{border:1px solid currentColor;color:inherit;width:44px;height:44px;border-radius:50%;font-size:19px;cursor:pointer;flex:none}
.sapling-sketch{position:absolute;z-index:0;right:10vw;top:105px;width:290px;height:300px;display:grid;place-items:center}
/* The track (not the carousel wrapper) clips the sliding strip, so the
   prev/next buttons below can sit outside it, in the wrapper's own side
   padding, without being cut off. */
.voices-carousel{margin-top:70px;position:relative;padding:0 64px}
.quote-track{overflow:hidden}
.quote-grid blockquote.q-purple{background:#d9c8df;border-radius:18px 18px 70px 18px}
/* Arrows overlay the carousel's side gutters instead of sitting in a
   control bar below it — space-between plus a full-bleed absolute box
   puts one at each outer edge, vertically centered on the cards. */
.voice-controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;margin:0;pointer-events:none}
.voice-controls button{background:var(--forest);pointer-events:auto}
.sapling-sketch:after{content:"❧";display:block;font-family:Georgia,serif;font-size:260px;line-height:1;color:#91a873;font-weight:400;text-align:center;transform:rotate(-8deg)}
.logo img{width:159px;height:auto;object-fit:contain;display:block}
.site-footer .logo img{width:159px;height:auto}
.hero-photo>img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 23%}
.hero-photo .sugi-credit{position:absolute;z-index:4;left:30px;bottom:30px;width:auto;height:48px;object-fit:contain;background:transparent;padding:0;border-radius:8px;box-shadow:none;filter:none}
.nursery>img{object-position:center 48%}
/* One continuous white strip so the logos that ship with a baked-in white
   plate (UN, Truchet, Bees4You) sit flush instead of showing their own
   rectangle against the off-white section. The edge fade is a pseudo
   element rather than a mask, because a mask would fade the strip itself. */
.partner-marquee{position:relative;overflow:hidden;background:var(--white);border:1px solid #ded9ca;border-radius:16px}
.partner-marquee:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--white) 0,rgba(255,253,245,0) 9%,rgba(255,253,245,0) 91%,var(--white) 100%)}
.partner-track{display:flex;width:max-content;animation:partner-scroll 48s linear infinite}
/* Cell keeps the 350x240 ratio of the source files, so object-fit:contain
   never letterboxes and every mark is scaled by the same factor. */
.partner-track span{width:clamp(146px,12vw,182px);aspect-ratio:175/120;height:auto;display:grid;place-items:center;border-right:1px solid #eae5d8;padding:14px 20px;flex:0 0 auto}
.partner-track img{width:100%;height:100%;object-fit:contain;object-position:center}
.recognition{padding:clamp(36px,3.5vw,48px) 7vw clamp(56px,5vw,72px);background:#e8e4d7;display:grid;grid-template-columns:.75fr 1.25fr;gap:9vw;align-items:center;position:relative;isolation:isolate}
.recognition .kicker{font-size:clamp(32px,2.5vw,44px);line-height:1.15}
.recognition-list{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid rgba(10,40,24,.15)}
.recognition-list span{min-height:150px;padding:24px 22px;border-right:1px solid rgba(10,40,24,.15);display:flex;flex-direction:column;justify-content:center;font-size:clamp(20px,1.4vw,24px);font-weight:700;line-height:1.25}
.recognition-list b{font-family:'Patrick Hand',cursive;font-size:clamp(26px,1.8vw,32px);color:#58782c;margin-bottom:8px;display:block}
/* Block with fit-content width rather than an inline-flex row: when the
   line wraps (the French string is the long one) the trailing squiggle
   follows the last word instead of being pushed to the far right of a
   full-width flex track. */
.square-note{font-family:'Patrick Hand',cursive;font-size:clamp(19px,1.7vw,24px);line-height:1.2;display:block;width:fit-content;max-width:100%;margin:0 0 4px;transform:rotate(-2deg);transform-origin:left center}
/* The leading no-break space keeps the squiggle bound to the last word,
   so a wrapped line never leaves it stranded on a line of its own. */
.square-arrow{font-size:1.25em;vertical-align:-.05em}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);padding:14px 22px;border-radius:0 0 12px 0;z-index:1000;font-weight:700;font-size:14px}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--lime)}
.tag.ongoing{background:var(--sage);color:var(--ink)}
.tag.planned{background:transparent;color:inherit;border:1.5px solid currentColor}
.languages a,.languages button,.languages span{font:inherit;font-size:11px;font-weight:700;padding:8px 9px;border-radius:18px;border:0;background:transparent;color:inherit;cursor:pointer}
.languages .active{background:var(--ink);color:white;cursor:default}
.languages [disabled]{opacity:.4;cursor:default}
.nav nav .mobile-talk{display:none}
/* A single flat tone, no gradient and no placeholder glyph: where a
   photograph is still missing the panel should read as a deliberate
   quiet surface, not as scaffolding. The 'no photograph yet' fact stays
   on the container's aria-label for assistive tech. */
.media-soon{position:relative;width:100%;height:100%;background:var(--forest)}
.soon-note{font-size:11px;opacity:.8;font-style:italic}
.link-soon{opacity:.55;cursor:default;font-weight:700;border-bottom:1px solid;padding-bottom:8px;justify-self:end}
@media(max-width:1000px){
  .nav nav{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;gap:2px;background:rgba(255,253,245,.98);border:1px solid rgba(10,40,24,.12);border-radius:18px;padding:10px;box-shadow:0 12px 34px rgba(10,40,24,.14);backdrop-filter:blur(12px)}
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:115px 7vw 42px}
  /* Full-bleed single column: a 4:3 box shows ~56% of the portrait's
     height, and 23% puts the top of that window at ~10% of the frame —
     comfortably above the cap and face. */
  .hero-photo{aspect-ratio:4/3;clip-path:none}
  .solutions{grid-template-columns:repeat(2,1fr)}
  .solutions-intro{grid-column:1/-1;transform:none}
  /* Fluid, not a fixed height, so this scales continuously across the
     whole 2-column range (tablet down to phone) instead of jumping at
     the 650px sub-breakpoint below. */
  .service-card{height:clamp(230px,40vw,400px)}
  .project{grid-template-columns:1fr}
  /* Stacked: the image sits on the same inline gutter as the copy above it. */
  .project-img{height:clamp(300px,44vw,430px);margin:0 var(--project-gutter) 0;min-height:0}
  /* Heading moves above the pair; the pair itself stays two columns, and
     the figures grow because they no longer share the row with the heading. */
  .ambition-grid{grid-template-columns:1fr}
  .goal strong{font-size:clamp(58px,8.4vw,86px)}
  .goal p{font-size:clamp(14px,1.9vw,18px)}
  .about,.donation-proof{grid-template-columns:1fr;gap:0}
  .about>div,.about>p,.about>a{grid-column:1;grid-row:auto}
  .about>p{margin-top:0}
  .about>a{justify-self:start;margin-top:28px}
  .link-soon{justify-self:start}
  .quote-grid{margin-left:0}
  .voices-carousel{padding:0 50px}
  .solutions .service-card{transform:none}
  .chalk-flower{right:8%;font-size:62px}
  /* On the stacked layout only the active slide participates in layout.
     Otherwise the taller hidden slide stretches the shared grid track and
     leaves a large false gap between the project link and its image. */
  .project-slide{display:none;grid-template-columns:1fr}
  .project-slide.active{display:grid}
  .project-copy{padding-bottom:clamp(18px,2.2vw,24px)}
  /* Stacked layout: copy sits above the image, so a vertical centre
     over the whole card would float mid-text. Back to a simple row
     below the slide instead of the desktop side-edge overlay. */
  .project-controls{position:static;display:flex;justify-content:center;gap:14px;margin:clamp(18px,2vw,28px) 0 0;pointer-events:auto}
  .project-controls button{position:static;transform:none}
  /* The decorative leaf only balances the open right side of the wide
     desktop composition. Once the section stacks, it becomes an isolated
     object and creates a large dead zone above the journey timeline. */
  .sapling-sketch{display:none}
  .journey-track{margin-top:55px}
  .quote-grid blockquote{flex-basis:calc((100% - 22px)/2)}
  .note{bottom:0;max-width:360px}
  /* .recognition already stacked here; .partners never did, so at tablet
     and below its copy column collapsed to one word per line and the logo
     strip showed barely two marks. Same treatment for both. */
  .partners{grid-template-columns:1fr;gap:28px}
  /* Brand takes the full row; the three link columns share the row below. */
  .footer-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 4vw}
  .footer-brand{grid-column:1/-1;max-width:none;margin-bottom:6px}
  .recognition{grid-template-columns:1fr;gap:22px}
  .recognition-list{margin:0}
  .partner-track span{width:150px}
  .nav nav.open{display:flex}
  .nav nav a{padding:14px 14px;border-radius:12px;font-size:15px}
  .nav nav a:hover,.nav nav a:focus-visible{background:#e9e6dc}
  .nav nav .mobile-talk{display:block;margin-top:6px;text-align:center;background:var(--lime);color:var(--ink);border-radius:14px;padding:14px;font-weight:700}
  /* Decorative flower motif: hidden as soon as a section it sits in
     restacks to a single column, so it never crowds the now-narrower
     content or the elements it used to sit clear of. */
  .ambition .bg-motif,.about-story .bg-motif,.featured .bg-motif,.recognition .bg-motif,.values-panel .bg-motif,.donate-faq .bg-motif,.contact-links .bg-motif{display:none}
}
@media(max-width:799px){
  .path-grid{grid-template-columns:1fr}
  .paths .bg-motif{display:none}
}
@media(max-width:650px){
  .nav{height:72px;width:calc(100% - 12px);left:6px;top:6px;padding:0 10px 0 14px}
  .logo b{font-size:40px}
  .talk{display:none}
  .languages{display:flex}
  /* A square box shows ~75% of the portrait; 20% starts the window at
     ~5% of the frame, so the whole subject reads on a phone. */
  .hero-photo{aspect-ratio:1}
  .hero-photo>img:first-child{object-position:50% 20%}
  .note{font-size:17px;padding:24px 28px 22px 42px;bottom:0;max-width:285px}
  .solutions{grid-template-columns:repeat(2,1fr);padding-left:6vw;padding-right:6vw}
  .service-card-title{font-size:12px;padding:10px}
  .service-card-arrow{width:34px;height:34px;font-size:16px}
  .approach{padding:75px 6vw}
  .approach h2,.paths>h2,.project h2,.journey-title h2,.ambition h2,.cta h2{font-size:50px}
  .approach h2{font-size:clamp(34px,8.6vw,50px)}
  .three{grid-template-columns:1fr;margin-top:60px}
  .paths{padding:80px 6vw}
  .project-img{height:clamp(240px,58vw,340px);border-radius:34px 16px 16px 16px}
  .facts{gap:30px}
  .journey{padding:80px 6vw;min-height:auto}
  .journey-track{grid-template-columns:repeat(3,1fr);row-gap:45px;border-top:0}
  .journey-track div{border-top:2px solid;padding-top:15px}
  .journey-track div:before{top:-9px}
  .nursery{height:380px}
  .ambition{padding:80px 6vw}
  .goal strong{font-size:clamp(44px,11.5vw,68px)}
  .goal p{font-size:clamp(13px,3.4vw,16px)}
  .about,.donation-proof{padding:75px 6vw}
  .cta{grid-template-columns:1fr;border-radius:32px 15px 15px}
  .cta-action{width:clamp(150px,44vw,180px);justify-self:start}
  .site-footer{padding:46px 6vw 26px}
  .footer-top{grid-template-columns:1fr;gap:30px}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:14px}
  .footer-backtotop{margin-left:0}
  .footer-credit-logo{width:78px}
  .partners{padding:60px 6vw}
  .partners-count strong{font-size:90px}
  .partner-cloud{grid-template-columns:repeat(2,1fr)}
  .partner-cloud span{height:90px}
  .voices{padding:75px 6vw}
  .about h2,.donation-proof h2{font-size:50px}
  .quote-grid{grid-template-columns:1fr}
  .quote-grid blockquote{min-height:280px;padding:30px;flex-basis:100%}
  .donation-copy>p{font-size:18px}
  .nav-actions{gap:5px}
  .menu{width:48px;height:48px}
  .menu-icon{width:24px;height:24px}
  .chalk-flower{font-size:50px}
  .voices-carousel{margin-top:45px;padding:0 26px}
  .voice-controls button{width:34px;height:34px;font-size:14px}
  .logo img{width:135px}
  .hero-photo .sugi-credit{left:16px;bottom:18px;height:34px}
  .nursery>img{object-position:center 50%}
  .partner-track span{width:132px;padding:10px 14px}
  .recognition{padding:56px 6vw}
  .recognition-list{grid-template-columns:1fr;border-left:0;border-top:1px solid rgba(10,40,24,.15)}
  .recognition-list span{min-height:auto;border-right:0;border-bottom:1px solid rgba(10,40,24,.15);padding:15px 0}
  .square-note{font-size:20px;max-width:250px}
  /* Safety net for every remaining placement (.approach, .planned-strip,
     .detail-hero-text and any section not already hidden above) — on a
     phone viewport the motif never shows. */
  .bg-motif{display:none}
}
@media(min-width:1001px){
  /* The full nav is already visible at this width — a second menu
     icon next to it opens a redundant dropdown of the same links. */
  .menu{display:none}
  .hero{grid-template-columns:38% 62%;overflow:visible;align-items:start}
  .hero-copy{padding:130px 4vw 42px 6.5vw}
  .hero h1{margin:34px 0 24px;font-size:clamp(60px,5.7vw,92px)}
  .hero-copy>p{font-size:18px;line-height:1.4;max-width:410px}
  .explore{margin-top:28px}
  /* Same proportion as the original 62%-wide x 610px-tall box, but it
     now scales with the column instead of squaring up as the window
     narrows. max-height keeps the hero on screen on very wide displays.
     27% puts the top of the crop window at ~13% of the frame. */
  .hero-photo{aspect-ratio:1.45;max-height:700px;overflow:hidden;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,6% 72%,0 50%,6% 28%);margin-top:90px}
  .hero-photo>img:first-child{object-position:50% 27%}
  .note{right:0;bottom:18px;max-width:410px;padding:32px 48px 30px 62px;font-size:20px;line-height:1.2}
  .note span{font-size:34px;right:18px;top:14px}
  /* Only on the two-column desktop layout, where the heading shares the
     row with the pair of figures: 'movement,' is one unbreakable word
     wider than its column at ~1000-1160px. Full 72px from ~1162px up,
     and the full-width tablet/phone sizes are untouched. */
  .ambition h2{font-size:clamp(52px,6.2vw,72px)}
  .hero-photo .sugi-credit{left:28px;bottom:24px;height:42px;width:auto;object-fit:contain;background:transparent;box-shadow:none;padding:0}
}
@media(min-width:1001px) and (max-width:1120px){
  /* The nav is a fixed four-item row that now has to hold whichever of
     the three languages is longest: "Ce que nous faisons · Projets ·
     À propos · S'impliquer" is wider than its English original and ran
     into the logo in the narrow band just above the mobile breakpoint.
     Closing the gaps only inside that band keeps every language on one
     line and leaves the spacing untouched at the widths the site is
     actually read at. */
  .nav nav{gap:28px}
}
@media(min-width:1440px){
  /* One row instead of a 2x2 block: makes use of the full width on wide
     desktops rather than stacking four already-wide cards into a tall square. */
  .path-grid{grid-template-columns:repeat(4,1fr)}
  .path-grid a{min-height:clamp(340px,25vw,410px)}
}
@media(min-width:1600px){
  .paths>h2{max-width:none;white-space:nowrap}
  .path-grid{margin-top:48px}
}
/* "What we do" on the home page, desktop and tablet. The intro and the five
   cards stay flat children of one grid (no wrapper, so the FR/DE markup is
   untouched): one text track plus five 0.52fr card tracks gives the
   ~1fr : 2.6fr split. That leaves ~170px per card even at the 1440px cap,
   just enough for "Microforests &" beside the arrow, so the single row only
   starts at 1440px and narrower desktops use the stacked layout.
   Mobile (<768px) keeps the rules above unchanged. */
@media(min-width:768px){
  .solutions{max-width:var(--content-max);margin-inline:auto;padding-inline:clamp(24px,5vw,80px);gap:16px}
  .solutions-intro{padding:0;transform:none;display:flex;flex-direction:column;align-items:flex-start}
  .solutions-intro a{font-size:var(--fs-sm);padding-bottom:10px}
  .solutions .service-card{transform:none}
  /* Every pill reserves two lines so the label row reads as one line of
     equal chips; the arrow keeps a fixed size on the right. */
  .service-card-body{align-items:center;gap:6px;left:10px;right:10px;bottom:10px}
  .service-card-title{flex:1;min-width:0;min-height:calc(2lh + 20px);padding:10px;font-size:var(--fs-2xs);display:flex;flex-direction:column;justify-content:center;line-height:1.25}
  .service-card-arrow{flex:none;width:36px;height:36px;font-size:18px}
}
@media(min-width:1440px){
  .solutions{grid-template-columns:minmax(300px,1fr) repeat(5,minmax(0,.52fr));align-items:stretch;padding-top:104px;padding-bottom:88px}
  /* Capped where the section stops growing (~3.4vw at 1440px): a larger size
     in the same ~330px column would break "Nature-based" onto two lines. */
  .solutions-intro h2{font-size:clamp(2.5rem,3.4vw,3.125rem);line-height:1.05;max-width:11ch;margin:14px 0 22px}
  .solutions-intro p{max-width:300px;margin:0}
  /* Pushed to the bottom so the link's underline lines up with the cards' base. */
  .solutions-intro a{margin-top:auto}
  /* ~2.3:1 portrait: tall enough to hold the intro, short enough not to
     read as a column of strips. The row still grows if the intro needs more
     room (the FR headline runs longer). */
  .service-card{height:auto;min-height:400px}
  /* Sits wholly in the band above the card row instead of half under card 2. */
  .chalk-flower{top:14px;left:calc(clamp(24px,5vw,80px) + 23%)}
}
/* Stacked: intro on top, cards as three across then two wider ones, so the
   second row has no empty cell. */
@media(min-width:768px) and (max-width:1439px){
  .solutions{grid-template-columns:repeat(6,1fr);padding-top:48px;padding-bottom:72px}
  /* Headline left, paragraph and link right, so the full-width intro
     doesn't leave one long headline line over an empty right half. */
  .solutions-intro{grid-column:1/-1;margin-bottom:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,5vw,72px)}
  .solutions-intro .kicker{grid-column:1}
  .solutions-intro h2{grid-column:1;margin-bottom:0}
  .solutions-intro p{grid-column:2;grid-row:2;align-self:end;max-width:420px;margin:0}
  .solutions-intro a{grid-column:2;justify-self:start;margin-top:20px}
  .service-card{grid-column:span 2;height:clamp(280px,32vw,380px)}
  .service-card:nth-of-type(n+4){grid-column:span 3}
  .chalk-flower{left:auto;right:8%}
}
@media(prefers-reduced-motion:reduce){
  .partner-track{animation:none}
  html{scroll-behavior:auto}
  .project-slide,.project-slides,.quote-grid,.cta-action,.cta-arrow,.menu,.path-grid a,.project-link,.link-arrow,.path-arrow,.about>a,.donation-copy a{transition-duration:.01ms}
  .cta-action:hover,.cta-action:active,.menu:active,.path-grid a:hover,.path-grid a:focus-visible,.about>a:hover,.about>a:active,.donation-copy a:hover,.donation-copy a:active{transform:none}
  .cta-action:hover .cta-arrow,.project-link:hover .link-arrow,.path-grid a:hover .path-arrow,.path-grid a:focus-visible .path-arrow{transform:none}
}
@keyframes partner-scroll{to{transform:translateX(-50%)}}

/* ── 320 px ──────────────────────────────────────────────────────────
   The narrowest width the site is tested at. Above 360 px every page in
   all three languages already fits; at 320 px the display type is still
   sized for a 390 px phone and four pages push sideways:

   - contact.html in every language — fixed in contact.css, which loads
     after this file and would otherwise win on source order;
   - fr/what-we-do.html — the six-step track is three columns wide on a
     phone and sizes them to their longest label. "Diagnostiquer" is 138px
     against "Diagnose"'s 85px, so the French row no longer fits. The
     smaller label below is what buys that back: what-we-do.css keeps the
     three columns there with a more specific selector, so only the
     homepage's copy of the track actually drops to two;
   - fr/index.html — "Que pouvez-vous apporter à l'écosystème ?" at 50px
     has no break opportunity narrow enough for a 282px line box.

   German needs none of this: its own rules below already break long words
   everywhere. This block stops at 360 px, so none of the other tested
   widths (390, 768, 1024, 1440) sees any of it. */
@media(max-width:360px){
  .journey-track{grid-template-columns:repeat(2,1fr)}
  .journey-track span{font-size:18px}
  .approach h2,.paths>h2,.project h2,.journey-title h2,.ambition h2,.cta h2{font-size:42px}
  /* Safety net: any heading in any language breaks rather than overflows. */
  h1,h2,h3{overflow-wrap:break-word}
}

/* German compounds — "Öffentlichkeitsbeauftragten", "Datenbearbeitungs-
   bedingungen" — are longer than a phone's line box, and an unbreakable
   word pushed the whole page sideways instead of wrapping. `anywhere`
   rather than `break-word` because only `anywhere` also shrinks a box's
   min-content width, which is what forced the About team panel wide; and
   in preference to hyphens:auto, which split "TSF UrbaNature" across two
   lines. A word that fits on a line is still never broken. Scoped to the
   German pages by their own <html lang>, so EN and FR are untouched. */
html[lang="de"]{overflow-wrap:anywhere}
/* In a heading a silent mid-word break reads as a typo ("Datenschutzerkl /
   ärung"), so headings hyphenate properly instead. Body copy is left to
   overflow-wrap above, which keeps "TSF UrbaNature" — never a heading —
   off hyphens:auto's line-breaking. */
html[lang="de"] h1,html[lang="de"] h2,html[lang="de"] h3{hyphens:auto}