/* Brume editorial system: Aeonik/BrumeReel, forest ink, cream canvas.
   Botanical photograph takes the right half; the factual strip is a single band. */
#brume-why{--why-x:0;--why-y:0;position:fixed;inset:0;z-index:8;display:block;padding:clamp(86px,12vh,128px) 6vw 78px;overflow:hidden;visibility:hidden;pointer-events:none;background:#f3f0e7;color:#034638;font-family:BrumeReel,sans-serif}
#brume-why.is-visible{visibility:visible;pointer-events:auto}
#brume-why:not(.is-visible) *{visibility:hidden!important;pointer-events:none!important}
.why-editorial{display:grid;grid-template-columns:1.08fr 1fr;grid-template-rows:minmax(0,1fr) clamp(108px,16vh,154px) 24px;column-gap:4vw;row-gap:18px;width:100%;height:100%;max-width:1600px;margin:auto}
.why-story{align-self:center;position:relative;z-index:2;min-width:0}
#brume-why h2{font:400 clamp(48px,5.3vw,90px)/.98 BrumeReel,sans-serif;letter-spacing:-.055em;margin:0 0 20px;color:inherit}
#brume-why h2 span,#brume-why h2 strong{display:block;font-weight:400}
#brume-why h2 strong{color:#685378}
#brume-why .why-intro{font:400 clamp(16px,1.45vw,23px)/1.4 BrumeReel,sans-serif;max-width:440px;margin:0 0 22px;text-wrap:pretty}
.why-recipes{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.why-recipes button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 13px;border:1px solid #03463840;border-radius:3px;background:transparent;color:#034638;font:400 clamp(12px,1vw,15px)/1 BrumeReel,sans-serif;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.why-recipes button[aria-pressed=true]{background:#034638;border-color:#034638;color:#f3f0e7}
.why-recipes button:hover{border-color:#034638}
.why-recipe-index{font-size:10px;opacity:.66}
#brume-why .why-recipe-note{font:400 clamp(13px,1vw,15px)/1.35 BrumeReel,sans-serif;margin:0;max-width:460px;min-height:2.7em}
.why-botanical{position:relative;min-width:0;min-height:0;margin:0;display:flex;flex-direction:column}
.why-photo-stage{position:relative;flex:1;min-height:200px;isolation:isolate}
.why-photo-disc{position:absolute;inset:4% 5% 1%;background:#b7a6c8;border-radius:49% 51% 42% 58% / 54% 48% 52% 46%;transform:rotate(-5deg)}
.why-photo-stage img{position:absolute;left:50%;top:50%;width:112%;max-width:650px;height:auto;transform:translate(calc(-50% + var(--why-x)*8px),calc(-49% + var(--why-y)*6px)) rotate(calc(var(--why-x)*.7deg));filter:drop-shadow(0 24px 20px #26361d20);pointer-events:none}
.why-photo-light{position:absolute;inset:0;background:radial-gradient(ellipse at calc(50% + var(--why-x)*28%) calc(50% + var(--why-y)*25%),#fff2,transparent 55%);mix-blend-mode:soft-light;pointer-events:none}
.why-botanical figcaption{position:relative;z-index:1;text-align:right;font:400 12px/1.2 BrumeReel,sans-serif;margin:10px 8px 0 0;letter-spacing:.03em}
.why-numbers{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;overflow:hidden;border-radius:5px}
.why-stat{display:flex;align-items:center;gap:22px;padding:20px 26px;min-width:0}
.why-stat-energy{background:#e7a48e}
.why-stat-fibre{background:#bbfd6a}
.why-stat-uses{background:#d6c6e3}
#brume-why .why-stat-value{display:flex;align-items:baseline;gap:5px;font:400 clamp(48px,5.3vw,88px)/.95 BrumeReel,sans-serif;letter-spacing:-.055em;white-space:nowrap;margin:0}
.why-stat-unit{font:400 clamp(16px,1.6vw,25px)/1 BrumeReel,sans-serif;letter-spacing:-.025em}
#brume-why .why-stat-label{font:400 clamp(12px,1.1vw,17px)/1.3 BrumeReel,sans-serif;margin:0;max-width:150px;text-wrap:pretty}
.why-source{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;font:400 11px/1.3 BrumeReel,sans-serif;color:#345b4e}
.why-source a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.why-sprouts-nav{position:absolute;right:6vw;bottom:18px;display:flex;gap:10px}
.why-sprouts-nav button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #03463866;border-radius:50%;background:transparent;color:#034638;font:400 24px/1 BrumeReel,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.why-sprouts-nav button:last-child{background:#034638;border-color:#034638;color:#bbfd6a}
.why-sprouts-nav button:hover{background:#bbfd6a;border-color:#bbfd6a;color:#034638}
#brume-why button:focus-visible,#brume-why a:focus-visible{outline:2px solid #034638;outline-offset:4px}
body.why-sprouts-active>header:not(.open) .logo img{filter:brightness(0) saturate(100%) invert(18%) sepia(30%) saturate(1024%) hue-rotate(113deg) brightness(90%) contrast(101%)!important}
body.why-sprouts-active .scroll-down,body.why-sprouts-active>.contact{visibility:hidden!important;pointer-events:none!important}
#brume-why.is-visible .why-story,#brume-why.is-visible .why-botanical,#brume-why.is-visible .why-numbers{animation:why-editorial-in .7s cubic-bezier(.16,1,.3,1) both}
#brume-why.is-visible .why-botanical{animation-delay:.08s}
#brume-why.is-visible .why-numbers{animation-delay:.16s}
#brume-why.is-suspended *{animation-play-state:paused!important}
@keyframes why-editorial-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
body.reduced #brume-why{position:relative;inset:auto;visibility:visible;pointer-events:auto;min-height:100svh;height:760px}
/* The French question is longer: retain the two-line editorial hierarchy
   without pushing the story into the persistent header on desktop. */
@media(min-width:813px) and (min-height:501px){
  html[lang=fr] #brume-why h2{font-size:clamp(42px,4.15vw,72px)}
}
@media(max-height:680px) and (min-width:813px){
  #brume-why{padding-top:80px;padding-bottom:70px}
  .why-editorial{grid-template-rows:minmax(0,1fr) 100px 20px;row-gap:12px}
  #brume-why h2{font-size:clamp(42px,4.8vw,68px);margin-bottom:12px}
  #brume-why .why-intro{font-size:16px;line-height:1.3;margin-bottom:12px}
  .why-recipes{margin-bottom:8px}
  .why-photo-stage{min-height:170px}
  .why-stat{padding:14px 20px;gap:15px}
  #brume-why .why-stat-value{font-size:54px}
}
@media(max-width:812px){
  #brume-why{padding:94px 6vw 72px}
  .why-editorial{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 112px 30px;gap:12px 18px}
  #brume-why h2{font-size:clamp(36px,5.8vw,52px);margin-bottom:14px}
  #brume-why .why-intro{font-size:15px;margin-bottom:14px}
  .why-recipes{gap:5px}
  .why-recipes button{padding:9px;gap:5px;font-size:12px}
  .why-recipe-index{display:none}
  #brume-why .why-recipe-note{font-size:12px}
  .why-photo-stage{min-height:150px}
  .why-stat{display:block;padding:14px 16px}
  #brume-why .why-stat-value{font-size:43px;margin-bottom:8px}
  .why-stat-unit{font-size:16px}
  #brume-why .why-stat-label{font-size:12px;line-height:1.2}
  .why-source{font-size:10px;gap:12px}
}
@media(max-width:600px) and (orientation:portrait){
  #brume-why{padding:83px 6vw 68px}
  .why-editorial{grid-template-columns:1fr;grid-template-rows:auto minmax(90px,1fr) 100px 28px;gap:10px}
  .why-story{align-self:start}
  #brume-why h2{font-size:clamp(32px,8.7vw,44px);margin-bottom:10px}
  #brume-why h2 span,#brume-why h2 strong{display:inline}
  #brume-why h2 span:after{content:' '}
  #brume-why .why-intro{font-size:14px;line-height:1.3;margin-bottom:9px}
  .why-recipes{gap:6px;margin-bottom:5px}
  .why-recipes button{min-height:44px;padding:8px 10px;font-size:12px}
  #brume-why .why-recipe-note{font-size:11px;min-height:1.35em;max-width:none}
  .why-botanical{grid-row:2;min-height:90px}
  .why-photo-stage{min-height:90px}
  .why-photo-stage img{width:auto;height:115%;max-width:100%;max-height:240px;object-fit:contain}
  .why-photo-disc{inset:0 20% 0;border-radius:50%}
  .why-botanical figcaption{display:none}
  .why-numbers{grid-row:3}
  .why-stat{padding:12px 11px}
  #brume-why .why-stat-value{font-size:38px;margin-bottom:7px}
  .why-stat-unit{font-size:13px}
  #brume-why .why-stat-label{font-size:11px;line-height:1.15}
  .why-source{grid-row:4;font-size:9px;gap:8px}
}
@media(max-width:380px) and (orientation:portrait){
  #brume-why{padding-top:76px}
  .why-editorial{grid-template-rows:auto minmax(62px,1fr) 88px 25px;gap:7px}
  #brume-why h2{font-size:29px}
  #brume-why .why-intro{font-size:12px;margin-bottom:5px}
  .why-recipes button{font-size:11px;padding:7px 9px}
  #brume-why .why-recipe-note{font-size:10px;line-height:1.2}
  .why-photo-stage,.why-botanical{min-height:62px}
  #brume-why .why-stat-value{font-size:32px}
  .why-stat{padding:10px 8px}
  #brume-why .why-stat-label{font-size:10px}
  .why-source{font-size:8px}
}
@media(max-height:500px) and (orientation:landscape){
  #brume-why{padding:62px 6vw 54px}
  .why-editorial{grid-template-rows:minmax(0,1fr) 72px 18px;gap:7px 22px}
  #brume-why h2{font-size:clamp(26px,4vw,40px);margin-bottom:8px}
  #brume-why .why-intro{font-size:12px;line-height:1.2;margin-bottom:6px}
  .why-recipes button{min-height:34px;padding:7px;font-size:10px}
  #brume-why .why-recipe-note{font-size:10px;min-height:0;line-height:1.2}
  .why-photo-stage{min-height:80px}
  .why-botanical figcaption{font-size:9px;margin-top:3px}
  .why-stat{display:flex;gap:10px;padding:10px 15px}
  #brume-why .why-stat-value{font-size:36px;margin:0}
  .why-stat-unit{font-size:12px}
  #brume-why .why-stat-label{font-size:10px}
  .why-source{font-size:8px}
  .why-sprouts-nav{bottom:8px}
  .why-sprouts-nav button{width:38px;height:38px}
}
@media(max-width:600px) and (max-height:500px) and (orientation:landscape){
  #brume-why{padding-top:55px;padding-bottom:48px}
  .why-editorial{grid-template-columns:1.3fr .7fr;grid-template-rows:minmax(0,1fr) 58px 16px;gap:6px 12px}
  #brume-why h2{font-size:25px;margin-bottom:5px}
  #brume-why h2 span,#brume-why h2 strong{display:inline}
  #brume-why h2 span:after{content:' '}
  #brume-why .why-intro{font-size:10px;line-height:1.2;margin-bottom:4px}
  .why-recipes{margin-bottom:3px;gap:4px}
  .why-recipes button{min-height:30px;padding:5px 7px;font-size:10px}
  #brume-why .why-recipe-note{font-size:9px}
  .why-photo-stage{min-height:70px}
  .why-botanical figcaption{display:none}
  .why-stat{padding:8px 10px;gap:8px}
  #brume-why .why-stat-value{font-size:30px}
  #brume-why .why-stat-label{font-size:9px}
}
@media(prefers-reduced-motion:reduce){#brume-why *{animation:none!important;transition:none!important}.why-photo-stage img{transform:translate(-50%,-49%)!important}}