/* Complete before/after photographs. The website shell supplies fonts and colours. */
.examples-page{padding:72px 0 90px;background:#0b0b0b;color:#fff}
.examples-heading{max-width:1180px;margin-bottom:50px}
.examples-heading>.eyebrow{color:var(--orange,#e85102);margin-bottom:23px}
.examples-heading h1{font-size:clamp(44px,6vw,92px);line-height:1.08;max-width:1150px;overflow-wrap:anywhere}
.examples-intro{max-width:760px;margin-top:28px;color:#b9b9b9;font-size:17px;line-height:1.75}
.example-location{color:#aaa;font-size:12px;line-height:1.7;margin-top:18px}
.examples-heading>.text-link{margin-top:28px;font-size:12px}
.examples-view-note{font-size:12px;color:#aaa;margin-bottom:28px}
/* One full-frame photograph per tile; hover reveals the matching original; clicking opens the image viewer. */
.examples-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 22px}
.example-tile{min-width:0}
.compare-toggle{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.compare-images{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#171717}
.compare-images img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s ease}
.example-tile .compare-images > img.compare-result{opacity:1}.example-tile .compare-images > img.compare-original{opacity:0}
.compare-state{position:relative;display:block;margin-top:12px;height:16px;font-size:12px;letter-spacing:.06em;color:#aaa}
.compare-state>span{position:absolute;left:0;top:0;transition:opacity .3s ease}
.compare-state-after{opacity:1}.compare-state-before{opacity:0;color:#ff9b62}
.compare-toggle:focus-visible{outline:2px solid var(--orange,#e85102);outline-offset:6px}
.example-tile-footer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0 17px;border-bottom:1px solid #333}
.example-number{font-size:12px;letter-spacing:.08em;color:var(--orange,#e85102)}
.example-tile h2{font-family:inherit;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:0;overflow-wrap:anywhere}
.compare-zoom.circle{width:31px;height:31px;border-color:#555}.compare-zoom svg{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.example-tile .compare-toggle:hover .compare-images > img.compare-original,.compare-toggle:hover .compare-state-before{opacity:1}.example-tile .compare-toggle:hover .compare-images > img.compare-result,.compare-toggle:hover .compare-state-after{opacity:0}}
@media(max-width:900px){.examples-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.examples-photo-grid{grid-template-columns:1fr;gap:28px}.example-tile h2{font-size:14px}}
@media(prefers-reduced-motion:reduce){.compare-images img,.compare-state>span{transition:none}}
.examples-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:45px 36px}
.example-card{display:block;min-width:0;border-bottom:1px solid #444;padding-bottom:24px}
.example-card-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:24px}
.example-card-heading h2{font-size:clamp(25px,2.5vw,38px);overflow-wrap:anywhere}
.example-card-heading>span{color:var(--orange,#e85102);font-size:26px;flex-shrink:0;transition:transform .18s}
.example-card-image img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#171717}
.example-card-action{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:12px;color:#ddd;margin-top:17px}
.example-card-action>span:first-child{color:#aaa;font-size:11px}
.example-card:hover .example-card-heading>span{transform:translate(3px,-3px)}
.example-card:hover .example-card-action>span:last-child{text-decoration:underline;text-underline-offset:5px}
.example-card:focus-visible{outline:3px solid var(--orange,#e85102);outline-offset:8px}
@media(max-width:1000px){.examples-page{padding-block:58px 70px}.examples-index{gap:35px 26px}.example-comparison{gap:20px}.examples-heading h1{font-size:clamp(42px,7vw,76px)}}
@media(max-width:700px){.examples-index{grid-template-columns:1fr;gap:38px}.example-comparison{grid-template-columns:1fr;gap:25px}.examples-heading{margin-bottom:35px}.examples-intro{font-size:15px;margin-top:22px}.example-pair{padding:28px 0 38px}.example-pair-heading{gap:16px;margin-bottom:23px}.example-pair-heading h2{font-size:30px}.example-pair-note{font-size:12px}.example-card-heading h2{font-size:30px}.examples-view-note{font-size:11px;line-height:1.65}.example-comparison-image figcaption{font-size:11px}}
@media(max-width:420px){.examples-page{padding-block:40px 55px}.examples-heading h1{font-size:40px}.example-card-heading h2{font-size:27px}.example-pair-heading h2{font-size:27px}.examples-intro{font-size:14px}.example-card-action{flex-wrap:wrap;gap:10px}}
@media(prefers-reduced-motion:reduce){.example-card-heading>span{transition:none}}
/* On group pages, bring the actual photographs into the first screen. */
body[data-page^="examples-"] .examples-page{padding-top:28px}
body[data-page^="examples-"] .examples-heading{display:grid;grid-template-columns:1.15fr 1fr;column-gap:50px;max-width:none;margin-bottom:25px}
body[data-page^="examples-"] .examples-heading>.eyebrow{grid-column:1/-1;margin-bottom:20px}
body[data-page^="examples-"] .examples-heading h1{grid-column:1;grid-row:2/5;font-size:clamp(38px,4.5vw,68px);max-width:700px}
body[data-page^="examples-"] .examples-intro{grid-column:2;grid-row:2;margin-top:0;font-size:15px;line-height:1.6}
body[data-page^="examples-"] .example-location{grid-column:2;grid-row:3;margin-top:12px}
body[data-page^="examples-"] .examples-heading>.text-link{grid-column:2;grid-row:4;justify-self:start;margin-top:16px}
body[data-page^="examples-"] .examples-view-note{margin-bottom:18px}
body[data-page^="examples-"] .example-pair{padding-top:25px}
@media(max-width:700px){body[data-page^="examples-"] .examples-heading{display:block;margin-bottom:25px}body[data-page^="examples-"] .examples-heading>.eyebrow{margin-bottom:18px}body[data-page^="examples-"] .examples-heading h1{font-size:38px}body[data-page^="examples-"] .examples-intro{margin-top:20px;font-size:14px}}
body[data-page=examples] .examples-page{padding-top:38px}
body[data-page=examples] .examples-heading{margin-bottom:35px}
body[data-page=examples] .examples-heading h1{font-size:clamp(42px,5vw,80px)}

/* Verified implementation pages: complete photographs remain the main visual. */
.use-case-page{padding-top:42px;padding-bottom:90px}
.case-index-hero{padding-block:80px 60px}
.case-index-hero .eyebrow{color:#a73b00}
.case-index-hero h1{font-size:clamp(38px,4.2vw,76px);max-width:22ch;white-space:pre-line}
.case-index-lead{font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:#444;max-width:720px;margin-top:28px}
.use-cases-page{padding-block:60px 70px}
.case-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.case-card{display:flex;flex-direction:column;min-width:0;border:1px solid #333;background:#111;transition:border-color .2s}
.case-card:hover{border-color:var(--orange)}
.case-card-image{overflow:hidden;background:#e9e9e9;border-bottom:1px solid #333}
.case-card-image img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.case-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.case-card .eyebrow{font-size:12px;color:#aaa;margin-bottom:0}
.case-card h3{font-size:clamp(22px,1.8vw,28px);line-height:1.15}
.case-card-stats{margin:4px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.case-card-stats dt{display:flex;align-items:center;gap:8px;font-family:Quablo,DM,sans-serif;font-size:30px;letter-spacing:-.04em;line-height:1;font-weight:500}
.case-card-stats dt .case-icon{width:20px;height:20px}
.case-card-stats dd{margin:6px 0 0;font-size:11px;line-height:1.5;color:#aaa}
.case-card-link{margin-top:auto;display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:12px;font-weight:600;padding-top:8px}
.case-card-link>span:last-child{color:var(--orange);font-size:24px;line-height:1}
.case-index-note{margin-top:28px;max-width:960px;font-size:12px;line-height:1.7;color:#888}
.case-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:end;margin-bottom:38px}
.case-heading .eyebrow{color:#aaa;margin-bottom:22px}
.case-heading h1{font-size:clamp(42px,5vw,78px);line-height:1.04}
.case-headline{font-size:clamp(22px,2.3vw,34px);line-height:1.25;max-width:600px;margin-bottom:22px}
.case-heading .text-link{font-size:12px}
.case-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.case-photo-button{display:block;border:0;padding:0;width:100%;background:transparent;cursor:zoom-in}
.case-photo-button:focus-visible,.case-card:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
.case-offer-link{display:flex;justify-content:space-between;font-size:11px;color:#aaa;margin-top:14px;gap:14px}
.case-offer-link:hover{color:#fff}
.case-details{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;border-top:1px solid #3b3b3b;margin-top:68px;padding-top:48px}
.case-description h2{font-size:clamp(28px,3vw,45px);line-height:1.16;margin:24px 0}
.case-description>p:not(.eyebrow){color:#aaa;font-size:15px;line-height:1.85}
.case-scope{list-style:none;padding:0;margin:27px 0 0;display:grid;gap:0}
.case-scope li{padding:14px 0;border-top:1px solid #303030;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:16px}
.case-icon{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:var(--orange);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.case-stat-value{display:flex;align-items:center;gap:14px}
.case-stat-value .case-icon{width:32px;height:32px}
.case-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:24px 0}
.case-stat strong{font-size:clamp(38px,4.6vw,62px);font-weight:500;line-height:1.1;display:block;letter-spacing:-.04em;background:linear-gradient(110deg,#ff5a00,#ffad79);background-clip:text;-webkit-background-clip:text;color:transparent}
.case-stat span{display:block;margin-top:12px;max-width:240px;color:#c6c6c6;font-size:12px;line-height:1.6}
.case-fact-note{font-size:11px;line-height:1.75;color:#949494;margin-top:12px}
.case-sources{margin-top:26px;display:grid;gap:10px}
.case-sources h3{font-family:inherit;font-size:12px;font-weight:500;letter-spacing:0;margin-bottom:6px}
.case-sources .text-link{font-size:11px;line-height:1.6;justify-content:space-between;gap:20px;color:#aaa}
.case-bottom-nav{border-top:1px solid #303030;padding-top:30px;margin-top:55px}
.network-cases{margin-bottom:65px;display:flex;justify-content:space-between;gap:35px;align-items:center;border-block:1px solid #383838;padding-block:40px}
.network-cases h2{font-size:clamp(27px,3.5vw,48px);margin-top:15px}
.network-cases .text-link{flex-shrink:0}
@media(max-width:900px){.case-heading{gap:35px}.case-details{gap:40px}.case-photo-grid{gap:15px}.case-photo-grid .example-tile-footer{gap:7px}.case-photo-grid .example-tile h2{font-size:12px}.case-photo-grid .example-number{display:none}}
@media(max-width:700px){.use-case-page{padding-top:25px;padding-bottom:55px}.case-heading{grid-template-columns:1fr;gap:24px;margin-bottom:25px}.case-heading h1{font-size:42px}.case-headline{font-size:24px;margin-bottom:16px}.case-photo-grid{grid-template-columns:1fr;gap:30px}.case-photo-grid .example-number{display:block}.case-photo-grid .example-tile h2{font-size:14px}.case-details{grid-template-columns:1fr;gap:45px;margin-top:40px;padding-top:35px}.case-stat strong{font-size:48px}.network-cases{align-items:start;flex-direction:column}.case-heading .eyebrow{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.case-card{transition:none}}
@media(max-width:1000px){.case-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.case-index-grid{grid-template-columns:1fr}.case-index-hero{padding-block:50px 45px}.use-cases-page{padding-block:40px 55px}}
.case-photo-grid .compare-images{aspect-ratio:var(--case-ratio,4/3)}
@media(max-width:700px){.case-stat strong{font-size:clamp(32px,8vw,48px)}.case-stat-value{gap:10px}.case-stat-value .case-icon{width:24px;height:24px}}

/* Implementation examples grouped by the customer's presentation standard. */
.case-standard-group + .case-standard-group{margin-top:80px}
.case-standard-heading{display:flex;align-items:center;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid #ffffff26}
.case-standard-heading h2{display:flex;align-items:center;gap:16px;font-size:clamp(28px,3vw,44px);line-height:1.15}
.case-standard-heading h2::before{content:"";width:12px;height:12px;flex:none;border-radius:50%;background:linear-gradient(135deg,#ff9440,#ed5b00 65%,#b52b13)}
.case-standard-group{scroll-margin-top:110px}
@media(max-width:800px){.case-standard-group + .case-standard-group{margin-top:52px}.case-standard-heading{margin-bottom:22px;padding-bottom:18px}}