/* Facility Operations page: problem/solution framing, misconceptions
   combined with their case-study evidence, and a time-returned close.
   Extends the existing type scale, .specs/.spec stats, and .faq-item
   accordion rather than introducing a parallel system. */

/* Shared full-width intro paragraph: heading then paragraph stacked as
   plain blocks, not the side-by-side .section-top grid. */
.facility-lead{font-size:1.0625rem;line-height:1.7;max-width:1000px;margin-top:24px}

/* Problem section: three-term "equation" showing how a missed spot
   becomes continued replication. */
.facility-equation{display:flex;align-items:stretch;gap:28px;margin-top:56px;flex-wrap:wrap}
.facility-equation-term{flex:1 1 220px;border-top:1px solid var(--line);padding-top:24px;min-width:0}
.facility-equation-term h3{font-size:1.375rem;line-height:1.25;letter-spacing:-.025em;font-weight:400;margin-bottom:12px}
.facility-equation-term p{font-size:.9375rem;line-height:1.65}
.facility-equation-op{flex:0 0 auto;align-self:center;font-size:1.75rem;color:var(--sub);padding-top:6px}

/* Solution section: a photo beside a compact vertical list of four traits,
   each with a divider rule, rather than a card grid. */
.facility-benefits-media{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px;align-items:start}
.facility-benefits-photo{align-self:center;margin:0;aspect-ratio:4/3;overflow:hidden;background:#181b1f}
.facility-benefits-photo img{width:100%;height:100%;object-fit:cover;display:block}
.facility-benefits{display:grid;gap:0}
.facility-benefits article{border-top:1px solid #2a2d31;padding:24px 0}
.facility-benefits h3{font-size:1.4rem;line-height:1.3;letter-spacing:-.025em;font-weight:500;margin-bottom:14px;color:#f6fafc}
.facility-benefits p{font-size:1rem;line-height:1.7;color:#aebec6}

/* Misconceptions + case study, combined: shared framing and always-visible
   headline stats, then one accordion per misconception. */
.facility-case-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 64px;align-items:start;margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.facility-case-intro h3{grid-row:span 2}
.facility-case-intro>p{grid-column:2}
.facility-case-intro h3{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.2;letter-spacing:-.03em;font-weight:400;max-width:none}
.facility-case-intro p{font-size:1rem;line-height:1.7;max-width:none;margin-top:0}
.facility-case-intro p strong{font-weight:500;color:var(--ink)}
.facility-case-caption{font-size:.8125rem;line-height:1.6;color:var(--sub);margin-top:16px;max-width:640px}

.facility-misconceptions{margin-top:56px}
.facility-misconception{border-top:1px solid var(--line)}
.facility-misconception:last-child{border-bottom:1px solid var(--line)}
.facility-misconception summary{list-style:none;cursor:pointer;padding:28px 44px 28px 0;position:relative;font-size:1.375rem;line-height:1.35;letter-spacing:-.02em}
.facility-misconception summary::-webkit-details-marker{display:none}
.facility-misconception-icon{position:absolute;right:6px;top:25px;color:#197ca7;font-size:1.75rem;line-height:1}
.facility-misconception-icon:before{content:'+'}
.facility-misconception[open] .facility-misconception-icon:before{content:'−'}
/* Opening a misconception strikes it out. The rule is a background gradient
   rather than text-decoration so its width can animate from nothing to the
   full quote; box-decoration-break keeps it correct when the quote wraps to
   two lines on narrow screens. */
.facility-misconception-quote{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 58%;background-size:0 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .5s cubic-bezier(.33,0,.2,1),color .5s ease}
.facility-misconception[open] .facility-misconception-quote{background-size:100% 1px;color:#8e9ca2}
@media(prefers-reduced-motion:reduce){.facility-misconception-quote{transition:none}}
.facility-misconception-body{padding:0 40px 36px 0}
.facility-misconception-body>p{font-size:1rem;line-height:1.75;max-width:760px}
.facility-misconception-body h4{font-size:1.375rem;line-height:1.25;letter-spacing:-.02em;font-weight:400;color:var(--ink);margin:28px 0 14px}
.facility-misconception-evidence{font-size:1rem;line-height:1.75;max-width:760px}
.facility-misconception-stats{margin-top:26px;padding-top:0;border-top:0}
.facility-misconception-stats .spec{padding-block:0}
/* Two figures sit in the four-column .specs grid, so below desktop each got a quarter of the row and
   "12.5 min" wrapped (tablet report, 2026-10-05). Up to 1100px they share the row in halves, and
   they never break across lines. */
.facility-misconception-stats .big{white-space:nowrap}
@media(max-width:1100px){.facility-misconception-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phones: two stats share a narrow row, so "23.8 min" broke inside "min". Keep each figure
   on one line and scale it down with the screen just enough to fit. */
@media(max-width:650px){.facility-misconception-stats .big{white-space:nowrap;font-size:min(2.6rem,9vw)}}

/* Comparison bar chart: A1's single continuous cycle against a stationary
   device's UV-C time plus its repositioning overhead, on one shared scale. */
.facility-compare{margin-top:26px;display:grid;gap:34px}
.facility-compare-room{max-width:760px}
.facility-compare-label{font-family:Plex,monospace;letter-spacing:.045em;font-size:.75rem;color:var(--sub);text-transform:uppercase;margin-bottom:16px}
.facility-compare-row{display:grid;grid-template-columns:120px 1fr 90px;align-items:center;gap:16px;margin-top:10px}
.facility-compare-row:first-child{margin-top:0}
.facility-compare-row span:first-child{font-size:.9375rem;color:var(--sub)}
.facility-compare-track{height:16px;background:var(--paper);border:1px solid var(--line);display:flex;overflow:hidden}
.facility-compare-seg{height:100%;border:1px solid var(--ink);box-sizing:border-box}
.facility-compare-seg.a1{background:var(--cyan)}
.facility-compare-seg.emission{background:var(--ink)}
.facility-compare-seg.reposition{background:#647781}
.facility-compare-row span:last-child{font-size:.9375rem;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.facility-compare-legend{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px}
.facility-compare-legend span{display:inline-flex;align-items:center;gap:9px;font-size:.8125rem;color:var(--sub)}
.facility-compare-legend i{width:11px;height:11px;display:block;border-radius:1px;border:1px solid var(--ink);box-sizing:border-box}
.facility-compare-legend .a1{background:var(--cyan)}
.facility-compare-legend .emission{background:var(--ink)}
.facility-compare-legend .reposition{background:#647781}

/* Result: heading, lead paragraph and report link stacked full-width like
   the two sections above; a single large FTE-hours figure pinned to the
   right edge below them; then a full-width testimonial on the same ground. */
.facility-fte-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.facility-fte-heading .actions{margin-top:32px}
.facility-fte-stat{display:flex;flex-direction:column;align-items:flex-end}
.facility-fte{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.facility-fte .big{font-size:clamp(3.5rem,10.5vw,8rem);line-height:1;letter-spacing:-.04em;font-weight:300;font-variant-numeric:tabular-nums;color:var(--cyan)}
.facility-fte p{margin-top:18px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#f6fafc;max-width:220px}
.facility-quote{padding-top:64px}


@media(max-width:1000px){
  .facility-compare-row{grid-template-columns:100px 1fr 96px}
  .facility-fte-grid{gap:36px}
}
@media(max-width:780px){
  /* Phones: the two causes sit side by side with + between them and = after, and the result
     takes the full width below (Vivian, 2026-10-05). */
  .facility-equation{display:grid;grid-template-columns:1fr auto 1fr auto;gap:0 12px;margin-top:32px;align-items:start}
  .facility-equation-term{padding-top:18px}
  .facility-equation-term h3{font-size:1.125rem;margin-bottom:8px}
  .facility-equation-term p{font-size:.875rem;line-height:1.55}
  .facility-equation-op{align-self:start;padding-top:46px;font-size:1.375rem;line-height:1}
  .facility-equation-term:last-child{grid-column:1/-1;margin-top:28px}
  .facility-benefits-media{grid-template-columns:1fr;gap:28px;margin-top:36px}
  .facility-fte-grid{grid-template-columns:1fr;gap:28px}
  .facility-fte-stat{align-items:flex-start}
  .facility-fte{align-items:flex-start;text-align:left;margin-top:0}
  .facility-fte .big{font-size:clamp(3.5rem,15vw,5rem)}
  .facility-case-intro{grid-template-columns:1fr;gap:20px;margin-top:44px;padding-top:30px}
  .facility-case-intro h3{grid-row:auto}
  .facility-case-intro>p{grid-column:auto}
  .facility-misconceptions{margin-top:40px}
  .facility-misconception summary{padding:22px 36px 22px 0;font-size:1.1875rem}
  .facility-misconception-body{padding-right:0}
  .facility-compare-row{grid-template-columns:1fr;gap:6px}
  .facility-compare-row span:last-child{text-align:left}
  .facility-quote{padding-top:44px}
}

/* Replay the comparison bars when their accordion opens. */
.facility-misconception[open] .facility-compare-seg{animation:facility-bar-grow .9s cubic-bezier(.2,.65,.3,1) both}
@keyframes facility-bar-grow{from{width:0}}
body[data-motion=off] .facility-misconception[open] .facility-compare-seg{animation:none}
@media(prefers-reduced-motion:reduce){.facility-misconception[open] .facility-compare-seg{animation:none}}
.specs.facility-stat-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}@media(max-width:650px){.specs.facility-stat-pair{grid-template-columns:1fr;gap:26px 0}}
.specs.facility-stat-trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}@media(max-width:650px){.specs.facility-stat-trio{grid-template-columns:1fr;gap:26px 0}.specs.facility-stat-trio .spec:nth-child(3){padding-left:22px;border-left:1px solid var(--line)}}

/* Citation under a benefit blurb. The inline link inherited the dark body colour,
   so it did not read as a link at all; #70cff5 is what .dark .science-ref a already
   uses for a citation on a dark ground. */
.facility-benefits .facility-source{margin:14px 0 0;font-size:.8125rem;line-height:1.5}
.facility-benefits .facility-source a{color:#70cff5;text-decoration:underline;text-underline-offset:3px}