/* Work v4: mirrored eased fades extend beyond the unchanged v3 section. */
.work-section{padding-block:24px}
/* Eleven cosine-eased stops: flat at paper and at the deeper green peak.
   The measured equal bleed keeps the midpoint on the exhibit center. */
.work-section::before{background:linear-gradient(180deg,
  #f6f5ef 0%,#e1e5dd 10%,#aabaaa 20%,#67836f 30%,#305a46 40%,
  #1b4a34 50%,#305a46 60%,#67836f 70%,#aabaaa 80%,#e1e5dd 90%,#f6f5ef 100%)}
.work-heading{margin:0 0 12px}
.work-heading h2{max-width:none;margin:0;white-space:nowrap;font-size:clamp(20px,3.2vw,38px);line-height:1.2;letter-spacing:-.6px;color:var(--ink)}
.work-controls{grid-template-columns:96px minmax(0,1fr) 72px;gap:12px;margin:0 0 16px;padding:0;border:0}
.work-arrows{grid-column:1;grid-row:1;gap:8px}
.work-dots{grid-column:2;grid-row:1;gap:0}
.work-section .work-play{grid-column:3;grid-row:1;color:var(--ink);border-color:var(--ink)}
.work-section .work-arrow{color:var(--ink);border-color:var(--ink)}
.work-section .work-dot span{border-color:var(--ink)}
.work-section .work-dot[aria-pressed=true] span{background:var(--ink)}
.work-section button:hover{color:var(--ink);background:#202b2710;border-color:var(--ink)}
.work-section :focus-visible{outline-color:var(--ink)}
.work-caption{padding:14px 0 0;gap:12px;color:var(--ink)}
.work-caption>div{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.work-caption h3{font-size:20px;line-height:1.25;margin:0;color:var(--ink)}
.work-caption p:last-child{font-size:13px;line-height:1.5;max-width:none}
.work-slide-number{font-size:11px;color:var(--ink)}
.work-outro{margin-top:20px}
.work-outro .work-close{margin:0;flex-direction:row;align-items:center;gap:16px;color:var(--ink)}
.work-close p{font-size:clamp(20px,2.5vw,26px);line-height:1.2}
.work-outro .work-honesty{margin:8px 0 0;line-height:1.5;color:var(--ink)}
.work-outro .work-close .button{background:var(--green);border-color:var(--green);color:var(--white)}
.work-outro .work-close .button:hover{background:#1d4c36;border-color:#1d4c36}
.work-outro .work-close .button span{color:var(--white);background:transparent}
@media(max-width:599px){
  .work-controls{grid-template-columns:96px minmax(0,1fr) 54px;gap:4px}
  .work-section .work-dot{width:28px}
  .work-section .work-play{min-width:54px;padding:10px 6px;font-size:10px}
  .work-caption>div{display:block}
  .work-caption h3{margin-bottom:4px}
  .work-close p{font-size:19px;letter-spacing:-.4px}
  .work-outro .work-close{gap:10px}
  .work-close .button{padding:12px;gap:12px;font-size:12px}
}
@media(max-width:359px){
  .work-heading h2{font-size:18px;letter-spacing:-.7px}
  .work-controls{grid-template-columns:88px minmax(0,1fr) 48px;gap:0}
  .work-section .work-dot{width:24px}
  .work-section .work-play{min-width:48px;padding-inline:2px}
  .work-close p{font-size:16px}
}
/* Phones: compact section; fade borrows space from the hero (below its last text line) and the next section (above its heading).
   Darkest point pinned to the exhibit center, with a wider dark band. Neighbours' content paints above the fade. */
@media (max-width:767px){
  .home-hero,.work-section + .section{position:relative;z-index:1}
  .work-section::before{
    inset:calc(-1 * var(--work-bleed-top,0px)) calc((100% - 100vw)/2) calc(-1 * var(--work-bleed-bottom,0px));
    --p:calc(var(--work-peak,50%) + var(--work-bleed-top,0px));
    --band:80px;
    --s:calc(var(--p) - var(--work-half,300px));
    --e:calc(var(--p) + var(--work-half,300px));
    --r:calc(var(--work-half,300px) - var(--band));
    background:linear-gradient(180deg,#f6f5ef 0,#f6f5ef var(--s),#e1e5dd calc(var(--s) + var(--r)*.2),#aabaaa calc(var(--s) + var(--r)*.4),#67836f calc(var(--s) + var(--r)*.6),#305a46 calc(var(--s) + var(--r)*.8),
      #1b4a34 calc(var(--p) - var(--band)),#1b4a34 calc(var(--p) + var(--band)),
      #305a46 calc(var(--p) + var(--band) + var(--r)*.2),#67836f calc(var(--p) + var(--band) + var(--r)*.4),#aabaaa calc(var(--p) + var(--band) + var(--r)*.6),#e1e5dd calc(var(--p) + var(--band) + var(--r)*.8),#f6f5ef var(--e),#f6f5ef 100%);
  }
}

/* Product type shown in the exhibit's own header (replaces industry label); caption below removed. */
.work-caption{display:none}
/* Header label = "Business | Tool", one style (operator). */
.work-section .work-client-name{font-size:16px}
.work-section .work-client-name .work-sep,.work-section .work-client-name .work-product-title{font:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
@media (max-width:767px){.work-section + .section .eyebrow{color:var(--ink)}}
/* Operator: prev arrow left, next arrow right, dots between; no pause (autoplay off). White text/controls on the dark band. */
.work-section .work-controls{display:flex;justify-content:space-between;align-items:center;grid-template-columns:none;border:0}
.work-section .work-arrow{background:transparent}
/* Heading centered, closer to the controls; group lowered a bit. Arrows = plain < > (no circles). */
.work-section .work-heading{text-align:center;margin:28px 0 4px}
.work-section .work-heading h2{white-space:normal}
.work-section .work-controls{margin:0 0 12px}
.work-section .work-arrow{border:0;border-radius:0;box-shadow:none;background:transparent;font-size:30px;font-weight:700;line-height:1;color:var(--ink);width:44px;min-height:44px;padding:0}
.work-section .work-arrow:hover{color:var(--green)}
@media (max-width:767px){.home-hero .text-link{color:var(--ink)}}
/* Operator: heading + carousel controls + slide text white, a bit lower. Background unchanged. */
.work-section .work-heading{margin-top:28px}
.work-section .work-heading h2,.work-section .work-arrow,.work-section .work-arrow:hover,.work-section .work-close,.work-section .work-close strong,.work-section .work-honesty{color:#fffef9}
.work-section .work-dot span{border-color:#fffef9}
.work-section .work-dot[aria-pressed=true] span{background:#fffef9}
.work-section .work-close .button{background:#fffef9;border-color:#fffef9;color:var(--green)}
.work-section .work-close .button span{color:var(--green)}
.work-section .work-controls :focus-visible,.work-section .work-outro :focus-visible{outline-color:#fffef9}
/* Option 3: text tucked closer to the dark band. */
.work-section .work-heading{margin-top:28px;margin-bottom:0}
.work-section .work-controls{margin-bottom:6px}
/* Disclaimer tucked right under the exhibit, centered. */
.work-section .work-honesty{text-align:center;margin:8px 0 0;font-size:12px;color:#fffef9}
/* "Want to see one live?" bold; it and the CTA spaced evenly (equal gaps left / between / right). */
.work-section .work-outro .work-close{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;gap:0;width:100%}
.work-section .work-outro .work-close p{font-weight:700;margin:0}