/* OC-SCN-008 r07 · Esinti. Production homepage. */
.annual-impact{position:relative;margin-top:48px;isolation:isolate;scroll-margin-top:145px}
.annual-impact:before{content:"";position:absolute;inset:-49px auto auto 46px;width:1px;height:30px;background:linear-gradient(#b5d0bf,transparent)}
.annual-impact-heading{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:28px}
.annual-impact-heading h3{margin:0;color:#1e392a;font-size:clamp(34px,2.4vw,44px);line-height:1.06;letter-spacing:-.045em}
.annual-impact-heading h3>span{color:#087e51}
.impact-period{display:flex;align-items:center;gap:15px}
.impact-year-ring{width:48px;height:48px;flex:none;fill:none;stroke:#d2e5d7;stroke-width:1.5}
.impact-year-ring circle:last-child{fill:#087e51;stroke:none}
.impact-year-ring .impact-year-progress{stroke:#087e51;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:0 100;transform:rotate(-90deg);transform-origin:28px 28px}
.impact-period>div{display:flex;flex-direction:column;gap:4px}
.impact-period-label{font:500 10px/1.4 Inter,Arial,sans-serif;letter-spacing:.12em;color:#567160}
.impact-period strong{font:500 16px/1.4 Inter,Arial,sans-serif;color:#234831}
.impact-model-tag{font:400 11px/1.5 Inter,Arial,sans-serif;color:#567160}
.impact-board{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);background:linear-gradient(115deg,#edf6ef,#f5f9f6 60%,#f1f7f3);border:1px solid #d7e6dc;border-radius:30px;overflow:hidden}
.annual-metric{position:relative;min-width:0;z-index:1}
.annual-metric--budget{display:flex;flex-direction:column;min-height:550px;padding:34px 38px 26px;color:#24523c;border-right:1px solid #d7e6dc;background:linear-gradient(180deg,#f0f8f4 0%,#f0f8f4e6 34%,#f0f8f400 66%)}
.metric-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.metric-index{font:500 10px/1.5 Inter,Arial,sans-serif;letter-spacing:.13em;color:#53755e}
.annual-metric--budget .metric-index{color:#53755e}
.metric-symbol{display:grid;place-items:center;width:52px;height:52px;flex:none;border:1px solid #d4e5da;border-radius:16px;color:#357455;background:#ffffffa6}
.metric-symbol svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.annual-metric h4{margin:0 0 14px;font:500 15px/1.5 Inter,Arial,sans-serif;color:#49634f;letter-spacing:-.015em}
.annual-metric--budget h4{font-size:19px;color:#415d4c;line-height:1.4}
.metric-amount{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;min-width:0;margin:0;font:500 clamp(34px,2.55vw,48px)/1.2 Inter,Arial,sans-serif;letter-spacing:-.055em;color:#095c3e;font-variant-numeric:tabular-nums}
.annual-metric--budget .metric-amount{font-size:clamp(34px,2.65vw,48px);color:#095c3e}
.metric-number{display:inline-flex;white-space:nowrap;align-items:baseline}
.impact-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}
.metric-number>span{display:inline-block;overflow:hidden;padding-block:.12em;margin-block:-.12em}
.metric-number .metric-digit{display:block;min-width:.61em;text-align:center}
.metric-number .metric-separator{min-width:.25em}
.metric-unit{font-size:12px;line-height:1.4;letter-spacing:-.02em;font-weight:400;color:#617a67}
.annual-metric--budget .metric-unit,.annual-metric--revenue .metric-unit{font-size:24px}
.annual-metric--budget .metric-unit{color:#617a67}
.metric-amount:has(.metric-number>span:nth-child(16)){font-size:31px}
.metric-amount:has(.metric-number>span:nth-child(21)){font-size:24px}
.impact-grove{position:relative;flex:1;display:flex;align-items:flex-end;min-height:220px;margin:8px calc(-1 * var(--impact-art-inset,38px)) 0;pointer-events:none;overflow:hidden}
.impact-grove-art{display:block;width:100%;height:auto;max-height:300px;overflow:hidden}
.impact-wind-leaf{transform-box:view-box;transform-origin:0 0;transform:translate(var(--leaf-x),var(--leaf-y)) rotate(-8deg);animation:impact-leaf-drift 24s linear infinite;animation-delay:var(--leaf-delay);animation-play-state:paused}
.investment-caption{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:0;border-top:1px solid #adc8b36b;padding-top:17px;color:#3e694f;font-size:12px;font-weight:400}
.investment-caption svg{width:43px;height:16px;fill:none;stroke:#58866a;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.impact-outcomes{min-width:0;display:grid;grid-template-rows:repeat(3,1fr);background:#ffffff40}
.impact-outcomes .annual-metric{display:flex;align-items:center;gap:24px;padding:29px 36px}
.impact-outcomes .annual-metric+.annual-metric{border-top:1px solid #d7e6dc}
.impact-outcomes .annual-metric--revenue{background:#f8fbf880}
.metric-copy{position:relative;min-width:0;z-index:1}
.metric-copy .metric-index{display:block;margin-bottom:10px;font-size:9px}
.metric-copy h4{margin-bottom:12px}
.annual-impact[data-running="true"] .impact-wind-leaf{animation-play-state:running}
.annual-impact[data-running="false"] .impact-wind-leaf{animation-play-state:paused}
/* The four small leaves keep drifting beside video; quiet still suppresses digit flips in impact.js. */
.impact-calendar{display:flex;align-items:center;gap:36px;padding:22px 6px 0}
.impact-calendar-caption{display:flex;align-items:center;gap:9px;font-size:11px;color:#52715e;flex:none}
.impact-calendar-mark{width:6px;height:6px;border-radius:50%;background:#2a8254;box-shadow:0 0 0 4px #edf4e9}
.impact-calendar-ruler{display:flex;align-items:center;gap:14px;flex:1;color:#597563;font:500 9px/1.3 Inter,Arial,sans-serif;letter-spacing:.1em}
.impact-calendar-track{position:relative;display:flex;justify-content:space-evenly;align-items:center;height:16px;flex:1;background:linear-gradient(#d6e4d7,#d6e4d7) center/100% 1px no-repeat}
.impact-calendar-track>i{position:absolute;left:0;top:7px;width:0;height:2px;background:#8aae90}
.impact-calendar-track>span{height:6px;width:1px;background:#cedfce;z-index:1}
.impact-calendar-track>b{position:absolute;left:0;width:6px;height:6px;border-radius:50%;background:#227c50;box-shadow:0 0 0 4px #edf4e9;transform:translateX(-50%);z-index:2}
@keyframes impact-leaf-drift{0%{transform:translate(-65px,var(--leaf-y)) rotate(-16deg)}25%{transform:translate(127px,calc(var(--leaf-y) - 12px)) rotate(4deg)}50%{transform:translate(320px,var(--leaf-y)) rotate(-7deg)}75%{transform:translate(512px,calc(var(--leaf-y) + 10px)) rotate(9deg)}100%{transform:translate(705px,var(--leaf-y)) rotate(-16deg)}}
@media(min-width:2200px){.annual-impact-heading h3{font-size:44px}.metric-amount,.annual-metric--budget .metric-amount{font-size:48px}.metric-amount:has(.metric-number>span:nth-child(16)){font-size:31px}.metric-amount:has(.metric-number>span:nth-child(21)){font-size:24px}}
@media(max-width:1200px){.impact-board{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.annual-metric--budget{padding:28px;min-height:510px}.impact-outcomes .annual-metric{padding:28px 25px;gap:17px}.metric-amount,.annual-metric--budget .metric-amount{font-size:36px}.metric-symbol{width:42px;height:42px;border-radius:13px}.metric-symbol svg{width:24px;height:24px}.metric-copy h4{font-size:13px}}
@media(max-width:950px){.impact-board{grid-template-columns:minmax(0,1fr) minmax(0,1.22fr)}.annual-metric--budget{padding:24px;min-height:490px}.impact-outcomes .annual-metric{padding:23px;gap:13px}.impact-outcomes .metric-symbol{position:absolute;right:22px;top:19px;width:32px;height:32px;border:0;background:none}.metric-copy{width:100%}.metric-copy .metric-index{margin-bottom:14px}.metric-copy h4{padding-right:14px}.metric-amount,.annual-metric--budget .metric-amount{font-size:31px}.metric-unit{font-size:10px}.annual-metric--budget .metric-unit,.annual-metric--revenue .metric-unit{font-size:20px}.metric-amount:has(.metric-number>span:nth-child(16)){font-size:23px}.metric-amount:has(.metric-number>span:nth-child(21)){font-size:17px}.impact-calendar{gap:20px}.impact-calendar-caption{font-size:10px}.impact-calendar-ruler{font-size:8px;gap:10px}.impact-period{gap:10px}.impact-period strong{font-size:14px}}
@media(max-width:650px){
  .annual-impact{margin-top:34px;scroll-margin-top:92px}
  .annual-impact:before{inset-block-start:-35px;left:30px;height:20px}
  .annual-impact-heading{display:block;margin-bottom:20px;padding-inline:2px}
  .annual-impact-heading h3{font-size:34px;line-height:1.07}
  .impact-period{margin-top:19px;gap:11px}
  .impact-year-ring{width:34px;height:34px}
  .impact-period>div{display:grid;grid-template-columns:auto auto;align-items:center;gap:3px 9px}
  .impact-period-label{font-size:9px;letter-spacing:.09em}
  .impact-period strong{font-size:12px}
  .impact-model-tag{grid-column:1/-1;font-size:10px}
  .impact-board{grid-template-columns:1fr;border-radius:24px}
  .annual-metric--budget{padding:22px 24px 19px;min-height:320px;border-right:0;border-bottom:1px solid #d7e6dc;background:linear-gradient(180deg,#f0f8f4,#f0f8f4eb 48%,#f0f8f400)}
  .metric-top{margin-bottom:18px}
  .metric-index{font-size:9px}
    .annual-metric--budget h4{font-size:16px;margin-bottom:12px}
  .annual-metric--budget .metric-amount{font-size:35px}
  .impact-grove{flex:none;height:156px;min-height:0}
  .impact-grove-art{height:156px;width:100%}
  .investment-caption{font-size:11px;padding-top:13px}
  .investment-caption svg{transform:rotate(90deg);width:24px}
  .impact-outcomes .annual-metric{padding:23px 24px 25px;min-height:160px}
  .metric-copy .metric-index{font-size:8px;margin-bottom:9px}
  .metric-copy h4{font-size:13px;max-width:240px;padding-right:18px;margin-bottom:17px}
  .impact-outcomes .metric-symbol{width:27px;height:27px;right:22px;top:17px}
  .impact-outcomes .metric-symbol svg{width:25px;height:25px}
  .metric-amount{font-size:32px;gap:3px 7px}
  .metric-unit{font-size:11px}
  .annual-metric--revenue .metric-unit{font-size:21px}
  .metric-amount:has(.metric-number>span:nth-child(16)){font-size:24px}
  .metric-amount:has(.metric-number>span:nth-child(21)){font-size:17px}
  .impact-calendar{display:flex;flex-direction:column;align-items:stretch;gap:13px;padding:19px 3px 0}
  .impact-calendar-caption{font-size:10px}
  .impact-calendar-ruler{font-size:8px;gap:12px}
}
@media(max-width:370px){
  .annual-impact-heading h3{font-size:30px}
  .annual-metric--budget,.impact-outcomes .annual-metric{padding-inline:19px}
  .annual-metric--budget .metric-amount{font-size:30px}
  .metric-amount{font-size:27px}
  .metric-amount:has(.metric-number>span:nth-child(16)){font-size:20px}
  .metric-amount:has(.metric-number>span:nth-child(21)){font-size:14px}
  .impact-period strong{font-size:11px}
  .impact-period>div{column-gap:7px}
  .metric-copy h4{max-width:211px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.annual-impact *,.annual-impact[data-running="true"] *{animation:none!important}}
@media(max-width:1200px){.annual-metric--budget{--impact-art-inset:28px}}
@media(max-width:950px){.annual-metric--budget{--impact-art-inset:24px}}
@media(max-width:370px){.annual-metric--budget{--impact-art-inset:19px}}
/* Story logos integrate with the shared mobile treatment. */
@media(max-width:700px){.stories .client-logo{background:transparent;border-radius:0;padding:0;width:58px;height:58px}.stories .client-logo--sun{width:122px;height:56px}}