/* WSM-VISUAL-001 — editorial image enrichment from existing approved assets.
   Product-owned presentation only: no forms, consent, third-party, WCE or AYB changes.
   Native-ratio images and visible captions prevent distorted/ambiguous imagery. */
:root{--story-forest:#173b2c;--story-gold:#e8bc73;--story-warm:#fff9ed;--story-muted:#4d665c}
/* Keep original readable hero copy and approved identity mark. The actual
   approved desert landscape provides depth without an invented scene. */
.hero{
  background:
    linear-gradient(98deg,rgba(13,42,31,.94) 0%,rgba(16,48,36,.9) 38%,rgba(15,48,36,.46) 76%,rgba(15,48,36,.24) 100%),
    url('/assets/mission-current-approved-2026.webp') center 52% / cover no-repeat,
    #173b2c;
}
.hero-watermark{opacity:.15}
.mission-hero-scene{display:none}
.hero h1,.hero p{position:relative}
.mission-photo-bridge{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(275px,.88fr);align-items:stretch;overflow:hidden;min-width:0;margin:8px 0 38px;border:1px solid #d3cfbd;border-radius:24px;background:var(--story-forest);box-shadow:0 22px 45px rgba(21,56,42,.12)}
.mission-photo-bridge__media{min-width:0;display:flex;align-items:center;background:#344d44}
.mission-photo-bridge__media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center}
.mission-photo-bridge figcaption{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(22px,3vw,43px);color:#fff8e9;background:radial-gradient(circle at 100% 100%,rgba(232,188,115,.12),transparent 55%),#173b2c}
.mission-photo-bridge figcaption .eyebrow{color:#e8bc73;margin:0}
.mission-photo-bridge figcaption strong{display:block;font-family:Georgia,serif;font-size:clamp(1.35rem,2.3vw,2.15rem);font-weight:600;line-height:1.18;letter-spacing:-.025em}
.mission-photo-bridge figcaption span:not(.eyebrow){font-size:.99rem;color:#e3e9df;line-height:1.55}
.mission-photo-bridge figcaption small{color:#c2d1c8;font-size:.74rem;line-height:1.35}

/* One mission-wide visual vocabulary for connectivity, never a fake app
   screenshot or a claim of live WCE accounts/matching. */
.mission-network-graphic{position:relative;isolation:isolate;min-height:175px;margin-bottom:22px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at center,rgba(247,219,146,.30),transparent 35%),radial-gradient(circle at 50% 55%,#2e6754,#123a35 78%);border:1px solid rgba(237,218,171,.35)}
.mission-network-graphic:before,.mission-network-graphic:after{content:'';position:absolute;z-index:0;left:18%;right:18%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#e8bc7388 25%,#e8bc73cc 50%,#e8bc7388 75%,transparent);transform:rotate(-20deg)}
.mission-network-graphic:after{transform:rotate(20deg)}
.mission-network-node{position:absolute;z-index:1;width:59px;height:59px;display:grid;place-items:center;border-radius:50%;background:#fff8eb;border:2px solid #e8bc73;box-shadow:0 7px 22px #082b2580}
.mission-network-node img{width:34px;height:34px;object-fit:contain}
.mission-network-node--a{left:11%;top:22%}
.mission-network-node--b{right:10%;top:19%}
.mission-network-node--c{right:27%;bottom:9%}
.mission-network-core{position:absolute;z-index:2;left:50%;top:47%;transform:translate(-50%,-50%);width:82px;height:82px;display:grid;place-items:center;background:#1c4b42;border:2px solid #e8bc73;border-radius:22px;box-shadow:0 0 0 9px rgba(236,209,149,.13),0 10px 22px #0e292b77}
.mission-network-core img{width:50px;height:50px;object-fit:contain}
.mission-engine-aside{min-width:0}
.mission-engine-aside .mission-network-graphic + strong{display:block}
.mission-work-graphic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 28px}
.mission-work-graphic__step{display:flex;align-items:center;gap:12px;min-width:0;padding:15px;border-radius:15px;background:linear-gradient(145deg,#e7f3ec,#faf5e7);border:1px solid #d5dfd7;color:#23483e}
.mission-work-graphic__step:nth-child(2){background:linear-gradient(145deg,#e7eff4,#f8f7ed)}
.mission-work-graphic__step:nth-child(3){background:linear-gradient(145deg,#f8efdc,#f6f8ee)}
.mission-work-graphic__step img{width:43px;height:43px;flex:none;object-fit:contain}
/* Images and long labels must never impose a minimum content width on mobile.
   This retains the full text and original artwork instead of clipping either. */
.mission-work-graphic__step>div,.mission-theme-card__content{min-width:0}
.mission-work-graphic__step strong,.mission-theme-card__content h3{overflow-wrap:break-word}

.mission-work-graphic__step strong{font-size:.9rem;line-height:1.28;font-weight:800;letter-spacing:-.01em}
.mission-work-graphic__step small{display:block;margin-top:3px;font-size:.73rem;line-height:1.35;color:var(--story-muted)}
.mission-work-graphic__note{grid-column:1/-1;max-width:100%;margin:0;font-size:.75rem;color:#50685f}

/* Our Work: approved image-led priorities replace an uninterrupted row
   of generic empty white boxes. Exact 16:9 media window limits cropping. */
.mission-theme-card{padding:0;overflow:hidden;display:flex;flex-direction:column;border-color:#d4ddd4;box-shadow:0 17px 35px rgba(29,62,49,.09)}
.mission-theme-card__media{margin:0;background:#e5ede7;overflow:hidden}
.mission-theme-card__media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center}
.mission-theme-card__media figcaption{padding:8px 18px;background:#edf1e9;color:#53675d;font-size:.7rem;line-height:1.35}
.mission-theme-card__content{padding:clamp(21px,2.4vw,28px);flex:1}
.mission-theme-card__content h3{margin-bottom:12px}
.mission-theme-card__content p{margin:0;color:#50645a}
.mission-theme-card:nth-child(2){border-top:4px solid #b8874a}
.mission-theme-card:nth-child(3){border-top:4px solid #5f9889}
.mission-theme-card:nth-child(1){border-top:4px solid #3e7b75}
@media(max-width:920px){
 .mission-photo-bridge{grid-template-columns:minmax(0,1fr)}
 .mission-photo-bridge__media img{max-height:430px}
 .mission-work-graphic{grid-template-columns:1fr 1fr}
 .mission-work-graphic__step:last-of-type{grid-column:1/-1}
}
@media(max-width:700px){
 .hero{display:block;background:linear-gradient(125deg,#102b20,#1f4a35)}
 .hero .inner{padding-bottom:27px}
 .mission-hero-scene{display:block;width:min(calc(100% - 32px),760px);margin:0 auto;padding-bottom:20px;position:relative;z-index:2}
 .mission-hero-scene img{width:100%;height:auto;object-fit:contain;border-radius:13px 13px 0 0;box-shadow:0 10px 28px #092e29a8}
 .mission-hero-scene figcaption{background:#254f3d;color:#f3eddc;padding:8px 13px;font-size:.74rem;line-height:1.4;border-radius:0 0 13px 13px}
 .mission-photo-bridge{margin-bottom:30px;border-radius:18px}
 .mission-photo-bridge figcaption{padding:24px}
 .mission-photo-bridge__media img{max-height:none}
 .mission-work-graphic{grid-template-columns:1fr;gap:10px}
 .mission-work-graphic__step:last-of-type{grid-column:auto}
 .mission-network-graphic{min-height:160px}
 .mission-network-node{width:49px;height:49px}
 .mission-network-node img{width:29px;height:29px}
 .mission-network-core{width:68px;height:68px}
}
@media(prefers-reduced-motion:reduce){.mission-photo-bridge,.mission-theme-card{scroll-behavior:auto}}
@media(forced-colors:active){
 .mission-photo-bridge,.mission-theme-card,.mission-network-graphic,.mission-work-graphic__step{border:2px solid CanvasText;box-shadow:none}
 .mission-photo-bridge figcaption{background:Canvas;color:CanvasText}
}

/* The existing mobile header overflows a 320px viewport by 13px because its
   wordmark and Contact button exceed the available width. Keep both visible. */
@media(max-width:360px){
 .header-inner{gap:8px;min-width:0}
 .header .brand{min-width:0}
 .header .brand img{width:154px;max-width:100%;height:auto}
 .header-contact{flex-shrink:0}
}