.project-case-template {
    --case-ink: #101112;
    --case-navy: #112f50;
    --case-blue: #1877cf;
    --case-cyan: #22b8c7;
    --case-green: #1f9d78;
    --case-yellow: #f5a719;
    --case-magenta: #d54b87;
    --case-paper: #f2efe4;
    --case-paper-blue: #e8f6f7;
    --case-line: #c9c6bc;
    --case-muted: #687075;
    --case-white: #fff;
    color: var(--case-ink);
    background: var(--case-paper);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
}

.project-case-template *,
.project-case-template *::before,
.project-case-template *::after { box-sizing: border-box; }
.project-case-template img { display: block; max-width: 100%; }
.project-case-template button,
.project-case-template a { letter-spacing: 0; }
.project-case-template h1,
.project-case-template h2,
.project-case-template h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0;
}
.project-case-template button:focus-visible,
.project-case-template a:focus-visible { outline: 3px solid var(--case-yellow); outline-offset: 3px; }

.case-shell { width: min(1320px, calc(100% - 60px)); margin-inline: auto; }
.case-section { padding: 112px 0; }
.case-section__header { max-width: 1080px; margin-bottom: 56px; }
.case-section__header h2,
.case-contact h2 {
    max-width: 1050px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 4.8vw, 58px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0;
    text-wrap: balance;
}
.case-section__header > p:last-child:not(.case-eyebrow) { max-width: 820px; margin: 24px 0 0; color: var(--case-muted); font-size: 17px; line-height: 1.55; }
.case-section__header.is-light { color: var(--case-white); }
.case-section__header.is-light > p:last-child:not(.case-eyebrow) { color: rgba(255,255,255,.7); }
.case-eyebrow { margin: 0 0 16px; color: var(--case-blue); font-family: var(--font-display); font-size: 13px; font-weight: 500; line-height: 1.35; text-transform: uppercase; }
.case-eyebrow.is-cyan { color: var(--case-cyan); }
.case-eyebrow.is-green { color: var(--case-green); }
.case-eyebrow.is-yellow { color: var(--case-yellow); }
.case-eyebrow.is-magenta { color: var(--case-magenta); }
.case-eyebrow.is-blue { color: var(--case-blue); }

.case-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 18px; padding: 14px 24px; border: 1px solid currentColor; font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.1; text-decoration: none; transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
.case-button:hover { transform: translateY(-2px); }
.case-button.is-light { color: var(--case-ink); background: var(--case-white); }
.case-button.is-dark { color: var(--case-white); background: var(--case-ink); }
.case-text-link { display: inline-flex; min-height: 48px; align-items: center; gap: 12px; color: var(--case-white); font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.1; text-decoration: underline; text-underline-offset: 6px; }

.case-hero { position: relative; overflow: hidden; padding-bottom: 38px; color: var(--case-white); background: var(--case-ink); }
.case-hero__media,
.case-hero__shade { position: absolute; inset: 0; }
.case-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.03); }
.case-hero__shade { background: linear-gradient(90deg, rgba(7,19,31,.95) 0%, rgba(7,24,42,.79) 46%, rgba(5,18,32,.28) 77%, rgba(5,14,24,.5) 100%); }
.case-hero__content { position: relative; z-index: 2; display: flex; min-height: clamp(590px, calc(100svh - 224px), 720px); flex-direction: column; justify-content: center; padding-block: 72px 54px; }
.case-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.case-hero__tags li { padding: 7px 10px; border: 1px solid rgba(255,255,255,.45); background: rgba(5,21,35,.34); font-size: 12px; font-weight: 650; text-transform: uppercase; backdrop-filter: blur(8px); }
.case-hero h1 { max-width: 1000px; margin: 0; font-family: var(--font-display); font-size: clamp(42px, 6vw, 84px); font-weight: 600; line-height: 1.05; letter-spacing: 0; text-wrap: balance; }
.case-hero__lead { max-width: 760px; margin: 28px 0 0; color: rgba(255,255,255,.84); font-size: 20px; line-height: 1.55; }
.case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.case-hero__facts { position: relative; z-index: 3; }
.case-hero__facts-grid { display: grid; grid-template-columns: repeat(var(--fact-columns, 3), minmax(0, 1fr)); gap: 1px; padding: 1px; color: var(--case-ink); background: rgba(255,255,255,.38); }
.case-hero__facts article { min-width: 0; min-height: 184px; padding: 30px 32px 34px; border-top: 6px solid var(--case-cyan); background: var(--case-white); }
.case-hero__facts article:nth-child(2) { border-top-color: var(--case-yellow); }
.case-hero__facts article:nth-child(3) { border-top-color: var(--case-green); }
.case-hero__facts article:nth-child(4n) { border-top-color: var(--case-magenta); }
.case-hero__facts small { display: block; color: var(--case-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.case-hero__facts strong { display: block; margin-top: 20px; font-size: 23px; line-height: 1.25; }
.case-hero__facts p { margin: 10px 0 0; color: var(--case-muted); font-size: 15px; line-height: 1.5; }

.case-comparison { background: var(--case-paper-blue); }
.case-comparison__screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.case-comparison__screens figure { min-width: 0; margin: 0; border: 1px solid var(--case-ink); background: var(--case-white); }
.case-comparison__screens img { width: 100%; height: clamp(360px, 44vw, 620px); object-fit: contain; object-position: top center; background: #edf4f7; }
.case-comparison__screens figcaption { padding: 16px 20px; border-top: 1px solid var(--case-ink); font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.case-comparison__changes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin-top: 24px; padding: 1px; background: var(--case-line); }
.case-comparison__changes article { min-height: 170px; padding: 28px; background: var(--case-white); }
.case-comparison__changes h3 { margin: 0 0 14px; font-size: 22px; }
.case-comparison__changes p { margin: 0; color: var(--case-muted); font-size: 15px; }

.case-challenge { background: var(--case-white); }
.case-challenge__grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 18px; }
.case-challenge__card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--case-ink); background: var(--case-white); }
.case-challenge__visual { position: relative; min-height: 300px; overflow: hidden; background: var(--case-paper-blue); }
.case-challenge__visual.is-brand { display: grid; align-content: center; justify-items: center; gap: 32px; padding: 34px; }
.case-challenge__visual.is-brand img { width: min(245px, 82%); height: auto; object-fit: contain; mix-blend-mode: multiply; }
.case-brand-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.case-brand-swatches i { width: 46px; height: 46px; border: 1px solid rgba(16,17,18,.16); background: var(--swatch); }
.case-challenge__visual.is-routes { display: flex; flex-direction: column; justify-content: center; padding: 30px; background: #fff4d4; }
.case-challenge__visual.is-routes > b { align-self: flex-start; padding: 10px 14px; color: var(--case-white); background: var(--case-ink); font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.case-challenge__visual.is-routes > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 38px; padding: 1px; background: #cbbd91; }
.case-challenge__visual.is-routes span { display: flex; min-height: 72px; align-items: center; padding: 14px; background: var(--case-white); font-size: 14px; font-weight: 600; }
.case-challenge__visual.is-image img { width: 100%; height: 300px; object-fit: contain; background: #e8f1f4; }
.case-challenge__visual.is-scroll { background: #d9e6ec; }
.case-scroll-bar { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; height: 32px; align-items: center; gap: 5px; padding: 0 10px; color: rgba(255,255,255,.72); background: var(--case-ink); font-size: 11px; }
.case-scroll-bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.case-scroll-bar span { margin-left: auto; }
.case-scroll-viewport { position: absolute; inset: 32px 0 0; overflow: hidden; }
.case-scroll-viewport img { width: 100%; height: auto; animation: case-site-tour 16s cubic-bezier(.2,.75,.3,1) infinite alternate; animation-play-state: paused; }
.case-challenge__visual.is-playing .case-scroll-viewport img { animation-play-state: running; }
@keyframes case-site-tour { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(min(0px, calc(-100% + 268px))); } }
.case-challenge__copy { display: flex; flex: 1; flex-direction: column; padding: 26px; }
.case-challenge__copy > span { color: var(--case-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.case-challenge__copy h3 { margin: 28px 0 12px; font-size: 26px; line-height: 1.22; }
.case-challenge__copy p { margin: 0; color: var(--case-muted); font-size: 15px; }

.case-decisions { background: var(--case-white); }
.case-decisions__list { border-top: 1px solid var(--case-ink); }
.case-decisions__list > article { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(420px, 1.15fr); gap: 44px; padding: 38px 0; border-bottom: 1px solid var(--case-ink); }
.case-decisions__copy > span { display: block; margin-bottom: 24px; color: var(--case-blue); font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.case-decisions__copy h3 { margin: 0 0 30px; font-size: 32px; line-height: 1.18; }
.case-decisions__copy p { display: grid; grid-template-columns: 112px 1fr; gap: 18px; margin: 14px 0 0; color: var(--case-muted); font-size: 15px; }
.case-decisions__copy p b { color: var(--case-ink); font-size: 13px; text-transform: uppercase; }
.case-decisions__list figure { min-width: 0; margin: 0; border: 1px solid var(--case-line); background: var(--case-paper-blue); }
.case-decisions__list figure img { width: 100%; height: 100%; max-height: 520px; object-fit: contain; object-position: center; }

.case-audiences { background: var(--case-paper); }
.case-audiences__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; background: var(--case-ink); }
.case-audience-card { position: relative; min-height: 265px; padding: 34px 38px 40px; overflow: hidden; background: var(--case-white); }
.case-audience-card::after { content: ""; position: absolute; inset: auto 0 0; height: 8px; background: var(--case-blue); }
.case-audience-card.is-cyan::after { background: var(--case-cyan); }
.case-audience-card.is-green::after { background: var(--case-green); }
.case-audience-card.is-yellow::after { background: var(--case-yellow); }
.case-audience-card.is-magenta::after { background: var(--case-magenta); }
.case-audience-card.is-black::after { background: var(--case-ink); }
.case-audience-card > span { color: var(--case-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.case-audience-card h3 { max-width: 580px; margin: 38px 0 22px; font-size: 27px; line-height: 1.25; }
.case-audience-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.case-audience-card li { padding: 7px 9px; border: 1px solid var(--case-line); color: var(--case-muted); font-size: 14px; }

.case-scenarios { background: var(--case-paper-blue); }
.case-scenario-lab { overflow: hidden; border: 1px solid #9fc9cd; background: var(--case-white); box-shadow: 0 24px 70px rgba(13,66,72,.1); }
.case-scenario-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-bottom: 1px solid #9fc9cd; }
.case-scenario-tabs button { display: grid; grid-template-columns: 28px 1fr; min-height: 82px; align-items: center; gap: 10px; padding: 16px 20px; border: 0; border-right: 1px solid #9fc9cd; color: var(--case-muted); background: transparent; text-align: left; cursor: pointer; }
.case-scenario-tabs button:last-child { border-right: 0; }
.case-scenario-tabs button span { font-size: 12px; font-weight: 700; }
.case-scenario-tabs button b { font-size: 15px; line-height: 1.25; }
.case-scenario-tabs button[aria-selected="true"] { color: var(--case-white); background: var(--case-blue); }
.case-scenario-tabs button:hover:not([aria-selected="true"]) { color: var(--case-ink); background: #f2fbfc; }
.case-scenario-panel { padding: 22px 24px 0; }
.case-scenario-panel[hidden] { display: none; }
.case-scenario-panel.is-changing { opacity: 0; transform: translateY(8px); }
.case-scenario-screen { position: relative; width: 100%; margin: 0; overflow: hidden; border: 1px solid var(--case-ink); background: #edf4f7; }
.case-browser-bar { display: flex; height: 40px; align-items: center; gap: 5px; padding: 0 14px; color: rgba(255,255,255,.78); background: #181516; font-size: 12px; }
.case-browser-bar > span { display: flex; gap: 6px; }
.case-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); }
.case-browser-bar b { margin-left: auto; font-weight: 500; }
.case-browser-bar em { margin-left: auto; font-style: normal; }
.case-scenario-screen picture { display: block; height: clamp(330px, 44vh, 460px); overflow: hidden; background: var(--case-white); }
.case-scenario-screen img { width: 100%; height: auto; max-width: none; object-fit: contain; object-position: top center; }
.project-case-template.is-presentation-corporate_services .case-scenario-screen picture { height: auto; min-height: 0; overflow: visible; }
.project-case-template.is-presentation-corporate_services .case-scenario-screen img { display: block; width: 100%; height: auto; min-height: 0; object-fit: contain; object-position: top center; }
.case-scenario-summary { min-height: 181px; padding: 22px 8px 26px; }
.case-scenario-summary > .case-eyebrow { margin-bottom: 10px; }
.case-scenario-summary > div { display: grid; grid-template-columns: minmax(260px,.9fr) minmax(340px,1.2fr) minmax(260px,.85fr); gap: 28px; align-items: start; }
.case-scenario-summary h3 { margin: 0; font-size: 27px; line-height: 1.25; }
.case-scenario-summary p { margin: 0; color: var(--case-muted); font-size: 16px; }
.case-scenario-summary ul { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.case-scenario-summary li { display: flex; min-width: 0; min-height: 48px; align-items: center; padding: 8px 10px; border: 1px solid #9fc9cd; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.case-scenario-progress { height: 4px; background: #d6e7e9; }
.case-scenario-progress i { display: block; width: var(--case-progress); height: 100%; background: var(--case-blue); transition: width 300ms ease; }

.case-structure { background: var(--case-white); }
.case-structure-map { overflow: hidden; padding: 40px; border: 1px solid var(--case-line); background: var(--case-paper-blue); }
.case-structure-map__root { display: flex; min-height: 96px; align-items: center; justify-content: space-between; padding: 24px 28px; color: var(--case-white); background: var(--case-navy); }
.case-structure-map__root span { color: rgba(255,255,255,.6); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.case-structure-map__root b { font-family: var(--font-display); font-size: 30px; font-weight: 600; }
.case-structure-map__lines { display: block; width: 100%; height: 116px; overflow: visible; }
.case-structure-map__lines path { fill: none; stroke: var(--case-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.case-structure-map__branches { display: grid; grid-template-columns: repeat(var(--case-map-columns, 4), minmax(0, 1fr)); border: 1px solid var(--case-ink); background: var(--case-white); }
.case-structure-map__branches article { position: relative; min-width: 0; min-height: 300px; padding: 34px 26px; border-right: 1px solid var(--case-ink); border-top: 6px solid var(--case-blue); }
.project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__root { opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path 440ms cubic-bezier(.2,.75,.3,1), opacity 220ms ease; }
.project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__lines path { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__trunk { transition: stroke-dashoffset 520ms cubic-bezier(.2,.75,.3,1) 240ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__lines .case-structure-map__branch { stroke-dasharray: 180; stroke-dashoffset: 180; transition: stroke-dashoffset 300ms cubic-bezier(.2,.75,.3,1); }
.project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__lines .case-structure-map__branch--1 { transition-delay: 620ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__lines .case-structure-map__branch--2 { transition-delay: 710ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__lines .case-structure-map__branch--3 { transition-delay: 800ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__lines .case-structure-map__branch--4 { transition-delay: 890ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__lines .case-structure-map__branch--5 { transition-delay: 980ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__lines .case-structure-map__branch--6 { transition-delay: 1070ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__branches article { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-8px); transition: clip-path 360ms cubic-bezier(.2,.75,.3,1), opacity 260ms ease, transform 360ms cubic-bezier(.2,.75,.3,1); }
.project-case-template.is-case-ready .case-structure-map[data-case-map].is-drawn .case-structure-map__root { opacity: 1; clip-path: inset(0); }
.project-case-template.is-case-ready .case-structure-map[data-case-map].is-drawn .case-structure-map__lines path { stroke-dashoffset: 0; }
.project-case-template.is-case-ready .case-structure-map[data-case-map].is-drawn .case-structure-map__branches article { opacity: 1; clip-path: inset(0); transform: none; }
.project-case-template.is-case-ready .case-structure-map[data-case-map].is-drawn .case-structure-map__branches article:nth-child(1) { transition-delay: 760ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map].is-drawn .case-structure-map__branches article:nth-child(2) { transition-delay: 850ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map].is-drawn .case-structure-map__branches article:nth-child(3) { transition-delay: 940ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map].is-drawn .case-structure-map__branches article:nth-child(4) { transition-delay: 1030ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map].is-drawn .case-structure-map__branches article:nth-child(5) { transition-delay: 1120ms; }
.project-case-template.is-case-ready .case-structure-map[data-case-map].is-drawn .case-structure-map__branches article:nth-child(6) { transition-delay: 1210ms; }
.case-structure-map__branches article:last-child { border-right: 0; }
.case-structure-map__branches article.is-cyan { border-top-color: var(--case-cyan); }
.case-structure-map__branches article.is-green { border-top-color: var(--case-green); }
.case-structure-map__branches article.is-yellow { border-top-color: var(--case-yellow); }
.case-structure-map__branches article.is-magenta { border-top-color: var(--case-magenta); }
.case-structure-map__branches small { color: var(--case-blue); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.case-structure-map__branches h3 { margin: 46px 0 18px; font-size: 24px; line-height: 1.25; }
.case-structure-map__branches ul { margin: 0; padding: 0; color: var(--case-muted); list-style: none; font-size: 15px; }
.case-structure-map__branches li + li { margin-top: 7px; }

.case-delivery { background: #fff5d7; }
.case-delivery-flow { display: grid; grid-template-columns: minmax(150px,1fr) 32px minmax(150px,1fr) 32px minmax(150px,1fr) 32px minmax(150px,1fr) 32px minmax(150px,1fr); align-items: center; }
.case-delivery-flow article { min-height: 270px; padding: 28px 24px; border: 1px solid var(--case-ink); background: var(--case-white); transition: color 250ms ease, background 250ms ease, border-color 250ms ease, transform 250ms ease; }
.case-delivery-flow article > span { font-size: 12px; font-weight: 700; }
.case-delivery-flow h3 { margin: 54px 0 12px; font-size: 21px; line-height: 1.25; }
.case-delivery-flow p { margin: 0; color: var(--case-muted); font-size: 14px; line-height: 1.45; }
.case-delivery-flow__link { position: relative; height: 1px; background: var(--case-ink); }
.case-delivery-flow__link::after { content: ""; position: absolute; top: -5px; left: 0; width: 11px; height: 11px; background: var(--case-magenta); transform: translateX(0); opacity: 0; transition: transform 550ms linear, opacity 120ms ease; }
.case-delivery-flow__link.is-current::after { opacity: 1; transform: translateX(21px); }
.case-delivery-flow article.is-complete:not(.is-result) { border-color: #85c8b5; background: #edf8f4; }
.case-delivery-flow article.is-result.is-complete { color: #063f30; border-color: var(--case-green); background: #a9dfcf; transform: translateY(-4px); }
.case-replay { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; margin-top: 22px; padding: 9px 14px; border: 1px solid var(--case-ink); background: transparent; font-size: 14px; font-weight: 650; cursor: pointer; }

.case-management { background: var(--case-paper); }
.case-management-demo { display: grid; grid-template-columns: 1.2fr .9fr; gap: 20px; }
.case-admin-preview { display: grid; grid-template-columns: 190px 1fr; min-height: 500px; border: 1px solid var(--case-ink); background: var(--case-white); }
.case-admin-preview aside { padding: 26px 0; color: var(--case-white); background: #1d282d; }
.case-admin-preview aside b { display: block; padding: 0 22px 22px; font-family: var(--font-display); font-size: 23px; font-weight: 600; }
.case-admin-preview aside button { display: block; width: 100%; min-height: 48px; padding: 10px 22px; border: 0; color: rgba(255,255,255,.72); background: transparent; text-align: left; cursor: pointer; }
.case-admin-preview aside button.is-active { color: var(--case-white); background: var(--case-cyan); }
.case-admin-preview__editor { display: flex; flex-direction: column; padding: 34px; }
.case-admin-preview__editor small { margin-bottom: 24px; color: var(--case-blue); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.case-admin-preview__editor strong { margin: 12px 0 7px; font-size: 14px; }
.case-admin-preview__editor i { display: block; width: 100%; height: 46px; border: 1px solid var(--case-line); background: #fafafa; }
.case-admin-preview__editor i.is-short { width: 55%; }
.case-admin-preview__editor i.is-large { height: 104px; }
.case-admin-preview__editor span { align-self: flex-start; margin-top: 22px; padding: 11px 18px; color: var(--case-white); background: var(--case-blue); font-size: 14px; font-weight: 650; }
.case-content-model { border: 1px solid var(--case-ink); background: var(--case-white); }
.case-content-model button { position: relative; display: grid; width: 100%; min-height: 124px; grid-template-columns: 1fr auto; align-content: center; gap: 8px 18px; padding: 24px 26px; border: 0; border-bottom: 1px solid var(--case-line); background: transparent; text-align: left; cursor: pointer; }
.case-content-model button:last-child { border-bottom: 0; }
.case-content-model button.is-active { background: #ddebfc; box-shadow: inset 5px 0 var(--case-blue); }
.case-content-model span { font-size: 18px; font-weight: 700; }
.case-content-model small { color: var(--case-muted); font-size: 14px; }
.case-content-model b { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 6px 10px; color: #176d59; background: #dff3ed; font-size: 12px; }
.case-management-proof { margin: 0 0 28px; border: 1px solid var(--case-ink); background: var(--case-white); }
.case-management-proof img { width: 100%; max-height: 720px; object-fit: contain; object-position: top center; }
.case-management-proof figcaption { padding: 14px 18px; border-top: 1px solid var(--case-line); color: var(--case-muted); font-size: 14px; }

.case-responsibility { color: var(--case-white); background: var(--case-blue); }
.case-responsibility__grid { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; padding: 1px; gap: 1px; background: rgba(255,255,255,.42); list-style: none; }
.case-responsibility__grid li { min-height: 220px; padding: 30px; background: var(--case-blue); transition: color 220ms ease, background 220ms ease, transform 220ms ease; }
.case-responsibility__grid li:hover { color: var(--case-ink); background: var(--case-white); transform: translateY(-4px); }
.case-responsibility__grid span { font-size: 12px; font-weight: 700; }
.case-responsibility__grid h3 { margin: 48px 0 12px; font-size: 23px; }
.case-responsibility__grid p { margin: 0; color: rgba(255,255,255,.7); font-size: 15px; }
.case-responsibility__grid li:hover p { color: var(--case-muted); }

.case-scale { background: #fff5d7; }
.case-scale__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border: 1px solid var(--case-ink); background: var(--case-white); }
.case-scale__facts article { min-width: 0; min-height: 210px; padding: 28px; border-right: 1px solid var(--case-ink); }
.case-scale__facts article:last-child { border-right: 0; }
.case-scale__facts strong { display: block; font-family: var(--font-display); font-size: clamp(38px, 4.5vw, 58px); font-weight: 600; line-height: 1; }
.case-scale__facts span { display: block; margin-top: 28px; font-weight: 700; }
.case-scale__facts p { margin: 10px 0 0; color: var(--case-muted); font-size: 14px; }
.case-scale__timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; margin: 24px 0 0; padding: 1px; background: var(--case-line); list-style: none; }
.case-scale__timeline li { min-height: 210px; padding: 28px; background: var(--case-white); }
.case-scale__timeline span { color: var(--case-blue); font-family: var(--font-display); font-size: 13px; font-weight: 600; text-transform: uppercase; }
.case-scale__timeline h3 { margin: 38px 0 12px; font-size: 22px; }
.case-scale__timeline p { margin: 0; color: var(--case-muted); font-size: 14px; }

.case-outcome { color: var(--case-white); background: var(--case-ink); }
.case-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); border: 1px solid rgba(255,255,255,.35); }
.case-metrics article { display: flex; min-height: 260px; min-width: 0; flex-direction: column; justify-content: flex-end; padding: 30px; border-right: 1px solid rgba(255,255,255,.32); }
.case-metrics article:last-child { border-right: 0; }
.case-metrics strong { font-family: var(--font-display); font-size: clamp(44px,5vw,68px); font-weight: 600; line-height: 1; white-space: nowrap; }
.case-metrics span { margin-top: 26px; font-size: 15px; font-weight: 700; text-transform: uppercase; }
.case-metrics small { margin-top: 7px; color: rgba(255,255,255,.58); font-size: 13px; }
.case-metric-ring { display: grid; width: 126px; height: 126px; place-items: center; border-radius: 50%; background: conic-gradient(var(--case-cyan) calc(var(--metric-value) * 1%), rgba(255,255,255,.16) 0); }
.case-metric-ring::before { content: ""; grid-area: 1 / 1; width: 86px; height: 86px; border-radius: 50%; background: var(--case-ink); }
.case-metric-ring strong { z-index: 1; grid-area: 1 / 1; font-size: 25px; }
.case-outcome .case-section__header > .case-outcome__source { margin-top: 12px; color: rgba(255,255,255,.62); font-size: 14px; }

.case-related { background: #e4f5ef; }
.case-related__card { display: grid; grid-template-columns: 1.75fr .95fr; border: 1px solid var(--case-ink); background: var(--case-white); }
.case-related__card figure { min-width: 0; margin: 0; padding: 24px; background: #dceef4; }
.case-related__card figure img { width: 100%; height: 100%; max-height: 520px; object-fit: contain; object-position: center; }
.case-related__card > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 42px; border-left: 1px solid var(--case-ink); }
.case-related__card p { margin: 0 0 24px; color: var(--case-muted); font-size: 17px; }
.case-related__card ul { margin: 0 0 30px; padding-left: 20px; }
.case-related__card li + li { margin-top: 6px; }

.case-similar { background: var(--case-white); }
.case-similar__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.case-similar__card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--case-ink); border-top: 7px solid var(--case-cyan); background: var(--case-white); }
.case-similar__card.is-accent-2 { border-top-color: var(--case-blue); }
.case-similar__card.is-accent-3 { border-top-color: var(--case-yellow); }
.case-similar__card figure { display: grid; min-height: 270px; margin: 0; padding: 18px; place-items: center; border-bottom: 1px solid var(--case-ink); background: var(--case-paper-blue); }
.case-similar__card figure img { width: 100%; height: 230px; object-fit: contain; }
.case-similar__card > div { display: flex; flex: 1; flex-direction: column; padding: 28px; }
.case-similar__card > div > p { margin: 0; color: var(--case-blue); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.case-similar__card h3 { margin: 28px 0 16px; font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.12; }
.case-similar__excerpt { color: var(--case-muted); font-size: 15px; }
.case-similar__card a { display: inline-flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 34px; color: var(--case-ink); font-family: var(--font-display); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 7px; }

.case-articles { background: var(--case-paper-blue); }
.case-articles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case-articles__card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--case-ink); border-top: 7px solid var(--case-magenta); background: var(--case-white); }
.case-articles__card.is-accent-2 { border-top-color: var(--case-cyan); }
.case-articles__card.is-accent-3 { border-top-color: var(--case-green); }
.case-articles__media { display: grid; overflow: hidden; aspect-ratio: 16 / 9; place-items: center; border-bottom: 1px solid var(--case-ink); background: var(--case-ink); }
.case-articles__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 360ms ease; }
.case-articles__media:hover img,
.case-articles__media:focus-visible img { transform: scale(1.025); }
.case-articles__body { display: flex; flex: 1; flex-direction: column; padding: 28px; }
.case-articles__meta { margin: 0; color: var(--case-blue); font-family: var(--font-display); font-size: 12px; font-weight: 600; line-height: 1.35; text-transform: uppercase; }
.case-articles__card h3 { margin: 24px 0 16px; font-size: 23px; line-height: 1.15; overflow-wrap: anywhere; }
.case-articles__card h3 a { color: inherit; text-decoration: none; }
.case-articles__excerpt { margin: 0; color: var(--case-muted); font-size: 15px; line-height: 1.55; }
.case-articles__link { display: inline-flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 30px; color: var(--case-ink); font-family: var(--font-display); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 7px; }

.case-hero__tags,
.case-hero__facts small,
.case-challenge__copy > span,
.case-audience-card > span,
.case-scenario-tabs button,
.case-structure-map__root,
.case-structure-map__branches small,
.case-replay,
.case-content-model button,
.case-metrics span,
.case-similar__card > div > p {
    font-family: var(--font-display);
}

.case-contact { color: var(--case-white); background: #192327; }
.case-contact__layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; }
.case-contact p:not(.case-eyebrow) { max-width: 560px; margin: 0 0 28px; color: rgba(255,255,255,.72); font-size: 18px; }

@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .js .project-case-template [data-case-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 520ms ease, transform 620ms cubic-bezier(.2,.75,.3,1); }
    .js .project-case-template [data-case-reveal].is-visible { opacity: 1; transform: none; }
}

@media (max-width: 1120px) {
    .case-challenge__grid { grid-template-columns: 1fr 1fr; }
    .case-challenge__card:last-child { grid-column: 1 / -1; }
    .case-challenge__card:last-child .case-challenge__visual { min-height: 380px; }
    .case-scenario-summary > div { grid-template-columns: 1fr 1fr; }
    .case-scenario-summary ul { grid-column: 1 / -1; }
    .case-delivery-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
    .case-delivery-flow article { min-width: 0; }
    .case-delivery-flow__link { display: none; }
    .case-management-demo { grid-template-columns: 1fr; }
    .case-content-model { display: grid; grid-template-columns: 1fr 1fr; }
    .case-content-model button { border-right: 1px solid var(--case-line); }
    .case-related__card { grid-template-columns: 1.45fr 1fr; }
    .case-articles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .case-articles__card:last-child { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
    .case-articles__card:last-child .case-articles__media { aspect-ratio: auto; }
}

@media (max-width: 820px) {
    .case-shell { width: min(100% - 36px, 720px); }
    .case-section { padding: 76px 0; }
    .case-section__header { margin-bottom: 38px; }
    .case-section__header h2, .case-contact h2 { font-size: clamp(34px, 8vw, 48px); line-height: 1.08; }
    .case-section__header > p:last-child:not(.case-eyebrow) { font-size: 17px; }
    .case-hero { padding-bottom: 32px; }
    .case-hero__content { min-height: 610px; padding-block: 72px 58px; }
    .case-hero h1 { font-size: clamp(38px, 10vw, 60px); }
    .case-hero__lead { font-size: 18px; }
    .case-hero__facts-grid { grid-template-columns: 1fr; }
    .case-hero__facts article { min-height: 0; padding: 26px 24px 30px; }
    .case-comparison__screens, .case-challenge__grid, .case-audiences__grid, .case-similar__grid, .case-articles__grid { grid-template-columns: 1fr; }
    .case-articles__card:last-child { display: flex; grid-column: auto; }
    .case-articles__card:last-child .case-articles__media { aspect-ratio: 16 / 9; }
    .case-comparison__screens img { height: min(118vw, 620px); }
    .case-decisions__list > article { grid-template-columns: 1fr; gap: 24px; }
    .case-challenge__card:last-child { grid-column: auto; }
    .case-challenge__card:last-child .case-challenge__visual { min-height: 300px; }
    .case-audience-card { min-height: 235px; padding: 28px; }
    .case-scenario-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
    .case-scenario-tabs button { min-width: 210px; scroll-snap-align: start; }
    .case-scenario-panel { padding: 14px 14px 0; }
    .case-scenario-screen picture { height: 330px; }
    .case-scenario-screen img { min-height: 100%; object-fit: cover; object-position: top center; }
    .project-case-template.is-presentation-corporate_services .case-scenario-screen picture { height: auto; }
    .project-case-template.is-presentation-corporate_services .case-scenario-screen img { min-height: 0; object-fit: contain; }
    .case-scenario-summary { min-height: 0; }
    .case-scenario-summary > div { grid-template-columns: 1fr; gap: 16px; }
    .case-scenario-summary ul { grid-column: auto; }
    .case-structure-map { padding: 18px; }
    .case-structure-map__root { align-items: flex-start; flex-direction: column; gap: 10px; }
    .case-structure-map__lines { display: none; }
    .case-structure-map__branches { grid-template-columns: 1fr; margin-top: 18px; }
    .case-structure-map__branches article { min-height: 230px; border-right: 0; border-bottom: 1px solid var(--case-ink); }
    .project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__root,
    .project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__branches article { opacity: 1; clip-path: inset(0); transform: none; transition: none; }
    .case-structure-map__branches article:last-child { border-bottom: 0; }
    .case-delivery-flow { display: flex; overflow-x: auto; align-items: stretch; gap: 14px; padding-bottom: 14px; scroll-snap-type: x mandatory; }
    .case-delivery-flow article { min-width: min(76vw, 290px); min-height: 245px; scroll-snap-align: start; }
    .case-delivery-flow__link { display: none; }
    .case-admin-preview { grid-template-columns: 135px 1fr; min-height: 460px; }
    .case-admin-preview aside button { padding-inline: 14px; }
    .case-admin-preview__editor { padding: 24px; }
    .case-content-model { grid-template-columns: 1fr; }
    .case-responsibility__grid { grid-template-columns: 1fr 1fr; }
    .case-scale__facts { grid-template-columns: 1fr 1fr; }
    .case-scale__facts article:nth-child(2n) { border-right: 0; }
    .case-scale__facts article { border-bottom: 1px solid var(--case-ink); }
    .case-metrics { grid-template-columns: 1fr 1fr; }
    .case-metrics article:nth-child(2n) { border-right: 0; }
    .case-metrics article { border-bottom: 1px solid rgba(255,255,255,.32); }
    .case-related__card { grid-template-columns: 1fr; }
    .case-related__card > div { border-top: 1px solid var(--case-ink); border-left: 0; }
    .case-contact__layout { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 540px) {
    .project-case-template { font-size: 16px; }
    .case-shell { width: calc(100% - 28px); }
    .case-section { padding: 62px 0; }
    .case-section__header h2, .case-contact h2 { font-size: 34px; line-height: 1.08; }
    .case-hero { padding-bottom: 24px; }
    .case-hero__shade { background: linear-gradient(180deg, rgba(6,20,33,.82), rgba(6,20,33,.72) 48%, rgba(6,20,33,.96)); }
    .case-hero__content { min-height: 0; padding-block: 62px 48px; }
    .case-hero h1 { font-size: 36px; line-height: 1.08; overflow-wrap: break-word; }
    .case-hero__lead { margin-top: 20px; font-size: 17px; }
    .case-actions { align-items: stretch; flex-direction: column; }
    .case-button, .case-text-link { width: 100%; justify-content: space-between; }
    .case-challenge__visual { min-height: 255px; }
    .case-comparison__screens img { height: min(130vw, 520px); }
    .case-decisions__copy h3 { font-size: 27px; }
    .case-decisions__copy p { grid-template-columns: 1fr; gap: 4px; }
    .case-challenge__visual.is-image img { height: 255px; }
    .case-audience-card h3 { margin-top: 28px; font-size: 24px; }
    .case-scenario-tabs button { min-width: 180px; }
    .project-case-template.is-presentation-corporate_services .case-scenario-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
    }
    .project-case-template.is-presentation-corporate_services .case-scenario-tabs button {
        grid-template-columns: 1fr;
        min-width: 0;
        min-height: 88px;
        justify-items: center;
        gap: 6px;
        padding: 12px 6px;
        text-align: center;
    }
    .project-case-template.is-presentation-corporate_services .case-scenario-tabs button b {
        font-size: 12px;
        overflow-wrap: anywhere;
    }
    .case-browser-bar b { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .case-scenario-screen picture { height: 260px; }
    .project-case-template.is-presentation-corporate_services .case-scenario-screen picture {
        display: flex;
        height: min(120vw, 470px);
        align-items: flex-start;
        justify-content: center;
        overflow: hidden;
    }
    .project-case-template.is-presentation-corporate_services .case-scenario-screen img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        min-height: 0;
        object-fit: contain;
    }
    .case-scenario-summary h3 { font-size: 24px; }
    .case-scenario-summary ul { grid-template-columns: 1fr; }
    .case-structure-map__root b { font-size: 25px; }
    .case-admin-preview { grid-template-columns: 1fr; }
    .case-admin-preview aside { display: flex; overflow-x: auto; padding: 12px; }
    .case-admin-preview aside b { min-width: max-content; padding: 12px; }
    .case-admin-preview aside button { width: auto; min-width: max-content; }
    .case-responsibility__grid, .case-scale__facts, .case-metrics { grid-template-columns: 1fr; }
    .case-scale__facts article { border-right: 0; }
    .case-responsibility__grid li { min-height: 190px; }
    .case-metrics article { min-height: 220px; border-right: 0; }
    .case-related__card figure { padding: 12px; }
    .case-related__card > div { padding: 28px; }
    .case-similar__card figure { min-height: 220px; }
    .case-similar__card figure img { height: 190px; }
    .case-articles__body { padding: 24px; }
    .case-articles__card h3 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .project-case-template *, .project-case-template *::before, .project-case-template *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__root,
    .project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__branches article { opacity: 1; clip-path: inset(0); transform: none; }
    .project-case-template.is-case-ready .case-structure-map[data-case-map] .case-structure-map__lines path { stroke-dashoffset: 0; }
}
