/* Keep the legacy gradient first for Safari 15.5 and other older browsers. */
/* Coordinates follow the supplied 1920 × 3475 artboard. */
/* Only the ampersand uses Inter Regular; other glyphs retain the heading face.
   Font fallback also survives the carousel's animated line wrappers. */
@font-face {
  font-family:"Case Ampersand";
  src:url("./inter-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0026;
}
.segment-case-copy #case-title-watershed-management-case-1 { font-family:"Case Ampersand",var(--heading); font-synthesis:none; }
.page-segment .hero-art picture { transform:scaleX(-1); }
.page-segment .hero-art img { position:absolute; left:-6.25%; top:-20.4278%; width:106.249984%; max-width:none; height:178.41888%; object-fit:fill; }
.page-segment .hero-art:after { background:linear-gradient(90deg,#001526e6,#001526b0 23.4719%,#0015260d 60.3141%); }
.segment-intro { position:relative; height:calc(675 * var(--u)); color:#fff; background:linear-gradient(180deg,#000b1f 43.75%,#034071); background:linear-gradient(180deg in srgb,#000b1f 43.75%,#034071); overflow:hidden; }
.segment-intro h2 { position:absolute; top:calc(100 * var(--u)); left:calc(200 * var(--u)); right:calc(200 * var(--u)); text-align:center; font:400 calc(64 * var(--u))/calc(60 * var(--u)) var(--heading); letter-spacing:0; text-transform:uppercase; white-space:pre-line; }
.segment-intro-subtitle { position:absolute; top:calc(270 * var(--u)); left:calc(200 * var(--u)); right:calc(200 * var(--u)); text-align:center; font:400 calc(24 * var(--u))/calc(29 * var(--u)) var(--serif); white-space:pre-line; }
.segment-metrics { position:absolute; top:calc(360 * var(--u)); left:calc(240 * var(--u)); right:calc(240 * var(--u)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.segment-metric { position:relative; min-width:0; height:calc(215 * var(--u)); text-align:center; }
.segment-metric-icon { position:absolute; top:0; left:calc(50% - 50 * var(--u)); width:calc(100 * var(--u)); height:calc(100 * var(--u)); }
.segment-metric-value { position:absolute; top:calc(92.344 * var(--u)); left:0; right:0; color:white; white-space:nowrap; font:400 calc(68 * var(--u))/calc(82 * var(--u)) var(--body); }
.segment-metric-unit { font-weight:100; }
.segment-metric>p { position:absolute; top:calc(177 * var(--u)); left:calc(15 * var(--u)); right:calc(15 * var(--u)); color:#fff; font:400 calc(16 * var(--u))/calc(19 * var(--u)) var(--body); white-space:pre-line; }
.segment-cases { position:relative; isolation:isolate; height:calc(1000 * var(--u)); overflow:hidden; background:#f3f6f9; color:#000; }
.segment-cases>.section-background { transform:scaleX(-1); }
.segment-cases>.section-background img { position:absolute; left:-13.8542%; top:-10.9%; width:136.249992%; max-width:none; height:110.8998%; object-fit:fill; }
.segment-case-copy-area { position:absolute; left:calc(160 * var(--u)); top:calc(225 * var(--u)); width:calc(520 * var(--u)); }
.segment-case-copy { width:100%; }
.segment-case-copy h2 { font:400 calc(64 * var(--u))/calc(60 * var(--u)) var(--heading); letter-spacing:0; text-transform:uppercase; white-space:pre-line; overflow-wrap:break-word; }
.segment-case-subtitle { margin-top:calc(10 * var(--u)); font:400 calc(24 * var(--u))/calc(29 * var(--u)) var(--serif); white-space:pre-line; }
.segment-case-summary { margin-top:calc(40 * var(--u)); font:300 calc(16 * var(--u))/calc(26 * var(--u)) var(--body); white-space:pre-line; overflow-wrap:break-word; }
.segment-cases.has-case-copy-motion .segment-case-title-line { display:block; overflow:clip; padding-bottom:.06em; margin-bottom:-.06em; }
.segment-cases.has-case-copy-motion .segment-case-title-line>span { display:block; opacity:0; transform:translateY(105%); }
.segment-cases.has-case-copy-motion .segment-case-copy.is-revealed .segment-case-title-line>span { animation:segment-case-title-in .95s cubic-bezier(.16,1,.3,1) calc(.18s + var(--line-index) * .12s) both; }
.segment-cases.has-case-copy-motion .segment-case-subtitle,.segment-cases.has-case-copy-motion .segment-case-summary { opacity:0; transform:translateY(22px); }
.segment-cases.has-case-copy-motion .segment-case-copy.is-revealed .segment-case-subtitle { animation:segment-case-copy-in .9s cubic-bezier(.16,1,.3,1) .5s both; }
.segment-cases.has-case-copy-motion .segment-case-copy.is-revealed .segment-case-summary { animation:segment-case-copy-in .9s cubic-bezier(.16,1,.3,1) .62s both; }
@keyframes segment-case-title-in { from { opacity:0; transform:translateY(105%); } to { opacity:1; transform:translateY(0); } }
@keyframes segment-case-copy-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
.segment-case-controls { position:absolute; top:calc(145 * var(--u)); left:calc(1583 * var(--u)); display:flex; gap:calc(78 * var(--u)); }
.segment-case-controls button { display:grid; place-items:center; width:calc(40 * var(--u)); height:calc(44 * var(--u)); border:0; padding:0; color:#333; background:transparent; }
.segment-case-controls button:disabled { opacity:.3; }
.segment-case-controls svg { width:calc(24 * var(--u)); height:calc(32 * var(--u)); fill:none; stroke:currentColor; stroke-width:3; }
.segment-case-track { position:absolute; left:calc(760 * var(--u)); right:0; top:calc(196 * var(--u)); display:flex; gap:calc(20 * var(--u)); overflow-x:auto; overflow-y:hidden; padding:calc(10 * var(--u)) 0 calc(40 * var(--u)); scroll-snap-type:x mandatory; scrollbar-width:none; }
.segment-case-track::-webkit-scrollbar { display:none; }
.segment-case-image { position:relative; flex:0 0 calc(1000 * var(--u)); height:calc(600 * var(--u)); margin:0; overflow:hidden; border-radius:calc(20 * var(--u)); scroll-snap-align:start; background:transparent; }
.segment-case-image>img { width:100%; height:100%; object-fit:cover; }
.segment-case-image-1>img { position:absolute; left:-3.79258%; top:-.0343955%; width:125.1298944%; max-width:none; height:117.3091488%; object-fit:fill; }
.segment-case-image-2>img { position:absolute; left:-3.46662%; top:-13.4956%; width:105.332736%; max-width:none; height:117.05066%; object-fit:fill; transform-origin:0 0; transform:matrix(1,.0140879,-.0140879,1,0,0); }
.segment-case-image-3>img { position:absolute; left:-19.40297%; top:-23.04755%; width:119.4%; height:131.937%; max-width:none; object-fit:fill; }
.segment-case-end { flex:0 0 calc(140 * var(--u)); }
@media(max-width:1023px) {
  .page-segment .hero-art picture { transform:none; }
  .page-segment .hero-art img { left:0; top:0; width:100%; height:100%; object-fit:cover; object-position:60% center; transform:scaleX(-1); }
  .segment-intro { height:auto; padding:68px 24px 65px; overflow:visible; }
  .segment-intro h2 { position:static; font-size:clamp(28px,4.8vw,48px); line-height:1.06; white-space:normal; }
  .segment-intro-subtitle { position:static; margin-top:22px; font-size:18px; line-height:1.4; white-space:normal; }
  .segment-metrics { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 16px; margin-top:38px; }
  .segment-metric { height:220px; }
  .segment-metric-icon { width:80px; height:80px; left:calc(50% - 40px); }
  .segment-metric-value { top:75px; font-size:45px; line-height:60px; }
  .segment-metric>p { top:155px; left:0; right:0; font-size:13px; line-height:18px; white-space:normal; }
  .segment-cases { height:auto; min-height:0; padding:64px 24px 58px; }
  .segment-cases>.section-background { transform:none; }
  .segment-cases>.section-background img { inset:0; width:100%; height:100%; object-fit:cover; }
  .segment-case-copy-area { position:relative; left:auto; top:auto; width:100%; padding-top:30px; }
  .segment-case-copy h2 { font-size:clamp(40px,7vw,60px); line-height:1; }
  .segment-case-subtitle { margin-top:20px; font-size:21px; line-height:1.35; white-space:normal; }
  .segment-case-summary { margin-top:28px; font-size:15px; line-height:1.7; white-space:normal; }
  .segment-case-controls { top:28px; left:auto; right:20px; gap:22px; }
  .segment-case-controls button { width:44px; height:44px; }
  .segment-case-controls svg { width:24px; height:32px; }
  .segment-case-track { position:relative; left:auto; top:auto; right:auto; margin:25px -24px 0 0; padding:10px 24px 22px 0; gap:16px; scroll-padding:0; }
  .segment-case-image { flex-basis:calc(100% - 16px); height:auto; aspect-ratio:5/3; border-radius:14px; }
  .segment-case-end { flex-basis:0; }
}
@media(max-width:400px) { .segment-metric-value { font-size:40px; } }
.segment-metric-prefix { display:inline-block; margin-right:calc(10.38 * var(--u)); font-size:calc(24 * var(--u)); line-height:1; }
@media(max-width:1023px) { .segment-metric-prefix { margin-right:6px; font-size:19px; } }
@media(prefers-reduced-motion:reduce) {
  .segment-cases.has-case-copy-motion .segment-case-title-line>span,
  .segment-cases.has-case-copy-motion .segment-case-subtitle,
  .segment-cases.has-case-copy-motion .segment-case-summary { opacity:1; transform:none; animation:none!important; }
}

/* Finished category and case frames need no original Figma paint offsets. */
.page-segment .hero.is-image-frame .hero-art picture { transform:none; }
.page-segment .hero.is-image-frame .hero-art img { inset:0; width:100%; height:100%; object-fit:cover; transform:none; }
.page-segment .hero.is-image-frame .hero-art:after { display:none; }
/* Exported case images already include the design's rounded, transparent corners. */
.segment-case-image.is-image-frame { border-radius:0; }
.segment-case-image.is-image-frame>img { inset:0; width:100%; height:100%; object-fit:cover; transform:none; }
.segment-intro.is-copy-only { height:auto; min-height:calc(350 * var(--u)); padding:calc(100 * var(--u)) calc(200 * var(--u)); }
.segment-intro.is-copy-only h2 { position:static; }
.segment-intro.is-copy-only .segment-intro-subtitle { position:static; margin-top:24px; }
@media(max-width:1023px) {
  .segment-intro.is-copy-only { min-height:0; padding:60px 24px; }
}