.case-studies-canvas {
  --case-ink: #142435;
  --case-muted: #607486;
  --case-faint: #8da0ad;
  --case-blue: #233f54;
  --case-blue-deep: #173247;
  --case-cyan: #1aa5bc;
  --case-cyan-soft: #ddf3f7;
  --case-line: #bdced9;
  --case-panel: #ffffff;
  --case-wash: #edf3f6;
  min-height: 100vh;
  color: var(--case-ink);
  background:
    radial-gradient(circle at 8% 14%, rgba(69, 177, 194, .13), transparent 25%),
    radial-gradient(circle at 92% 72%, rgba(24, 83, 108, .12), transparent 31%),
    repeating-linear-gradient(90deg, rgba(43, 105, 128, .055) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(43, 105, 128, .04) 0 1px, transparent 1px 92px),
    #eef2f5;
}

.case-studies-page { position: relative; min-height: 100vh; padding-bottom: 64px; }
.case-studies-shell { width: min(960px, calc(100% - 40px)); margin: 0 auto; }

.case-studies-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--site-header-height, 68px) + 18px) 0 22px;
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(140, 208, 218, .08) 1px, transparent 1px) 0 0 / 76px 76px,
    radial-gradient(circle at 77% 0%, rgba(26, 165, 188, .30), transparent 31%),
    linear-gradient(125deg, #11202d, #17374b 62%, #1f4e60);
}

.case-studies-hero-bar { display: block; min-height: 0; }
.case-section-kicker { margin: 0; color: #7ddce8; font: 850 11px/1 "Bahnschrift", "DIN Alternate", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.case-studies-hero-copy { max-width: 680px; }
.case-studies-hero h1 { margin: 8px 0 0; font-size: clamp(27px, 3vw, 38px); line-height: 1; letter-spacing: -.035em; }
.case-studies-hero-copy > p:last-child { margin: 9px 0 0; color: #c7dce5; font-size: 13px; font-weight: 650; line-height: 1.55; }

.case-study-content { padding-top: clamp(30px, 4vw, 52px); }
.case-platform-badge,
.case-tag,
.case-state-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-size: 12px; font-weight: 850; }
.case-platform-badge { gap: 8px; padding: 8px 13px; color: #ffffff; background: #111d28; font-size: 14px; }
.case-platform-badge .platform-brand-icon { width: 19px; height: 19px; flex: 0 0 19px; fill: currentColor; }
.case-profile-field { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 62px 54px; align-items: center; padding: 32px 20px 94px; isolation: isolate; }
.case-profile-orbit-center { display: none; }
.case-profile-field::before { position: absolute; z-index: -1; inset: 0; border-radius: 26px; background: radial-gradient(circle at 12% 13%, rgba(87, 194, 207, .1), transparent 31%), radial-gradient(circle at 90% 79%, rgba(26, 111, 137, .08), transparent 34%), rgba(255, 255, 255, .18); content: ""; }
.case-profile-card { --case-x: 0px; --case-y: 0px; --case-tilt: 0deg; position: relative; display: block; width: 100%; min-height: 170px; padding: 0; overflow: visible; border: 0; color: var(--case-ink); background: transparent; box-shadow: none; font: inherit; text-align: left; cursor: pointer; transform: translate3d(var(--case-x), var(--case-y), 0) rotate(var(--case-tilt)); scale: 1; transition: scale 460ms cubic-bezier(.2, .76, .25, 1); }
.case-profile-surface { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; width: 100%; min-height: 170px; align-items: center; padding: 18px; overflow: hidden; border: 1px solid #9dbdca; border-radius: 16px; color: var(--case-ink); background: linear-gradient(128deg, rgba(255, 255, 255, .97) 0%, rgba(249, 252, 253, .97) 56%, rgba(226, 244, 246, .96) 100%); box-shadow: 0 15px 30px rgba(24, 57, 75, .11); transition: border-color 520ms ease, box-shadow 520ms ease, background 520ms ease, filter 520ms ease; animation: case-profile-breathe 5.6s ease-in-out infinite; }
.case-profile-card[data-case-layout="1"] { --case-x: -12px; --case-y: 12px; --case-tilt: -.55deg; animation-delay: -.8s; }
.case-profile-card[data-case-layout="2"] { --case-x: 16px; --case-y: -14px; --case-tilt: .38deg; animation-delay: -2.1s; }
.case-profile-card[data-case-layout="3"] { --case-x: 13px; --case-y: 8px; --case-tilt: -.32deg; animation-delay: -3.4s; }
.case-profile-card[data-case-layout="4"] { --case-x: -18px; --case-y: -9px; --case-tilt: .46deg; animation-delay: -1.5s; }
.case-profile-card[data-case-layout="5"] { --case-x: 30px; --case-y: 15px; --case-tilt: -.42deg; animation-delay: -4.3s; }
.case-profile-card::before { content: none; }
.case-profile-surface::after { position: absolute; width: 210px; height: 210px; right: -96px; top: -126px; border-radius: 50%; background: radial-gradient(circle, var(--case-accent, rgba(73, 193, 207, .25)), transparent 67%); content: ""; pointer-events: none; animation: case-profile-glow 5.4s ease-in-out infinite; }
.case-profile-card[data-case-layout="2"] { --case-accent: rgba(124, 111, 208, .2); }
.case-profile-card[data-case-layout="3"] { --case-accent: rgba(229, 174, 93, .19); }
.case-profile-card[data-case-layout="4"] { --case-accent: rgba(74, 175, 139, .2); }
.case-profile-card[data-case-layout="5"] { --case-accent: rgba(214, 113, 152, .18); }
.case-profile-card[data-case-layout="6"] { --case-accent: rgba(80, 148, 219, .19); }
.case-profile-card:hover,
.case-profile-card:focus-visible { z-index: 3; outline: none; scale: 1.025; }
.case-profile-card:hover .case-profile-surface,
.case-profile-card:focus-within .case-profile-surface { animation-play-state: paused; }
.case-profile-card:hover .case-profile-surface,
.case-profile-card:focus-within .case-profile-surface { border-color: var(--case-cyan); box-shadow: 0 23px 42px rgba(18, 95, 113, .17); background: linear-gradient(128deg, #ffffff 0%, #f5fdfe 56%, #d8f3f5 100%); filter: saturate(1.04) brightness(1.01); }
.case-profile-avatar { position: relative; z-index: 1; display: grid; width: 78px; height: 78px; place-items: center; overflow: hidden; border: 3px solid #ffffff; border-radius: 50%; color: #ffffff; background: linear-gradient(145deg, #183d54, #1da4b9); box-shadow: 0 8px 18px rgba(18, 58, 78, .22); }
.case-profile-avatar img { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.case-profile-avatar .platform-brand-icon { position: relative; z-index: 1; width: 36px; height: 36px; fill: currentColor; }
.case-profile-avatar.is-fallback { background: linear-gradient(145deg, #17364d, #1a8398); }
.case-profile-avatar-small { width: 46px; height: 46px; border-width: 2px; box-shadow: none; }
.case-profile-avatar-small .platform-brand-icon { width: 22px; height: 22px; }
.case-profile-copy { position: relative; z-index: 1; display: grid; gap: 5px; min-width: 0; }
.case-profile-platform { display: inline-flex; width: max-content; max-width: 100%; align-items: center; gap: 6px; color: #164a60; font-size: 13px; font-weight: 900; }
.case-profile-platform .platform-brand-icon { width: 21px; height: 21px; fill: currentColor; }
.case-profile-copy > strong { overflow-wrap: anywhere; color: #142435; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.15; letter-spacing: -.025em; white-space: normal; }
.case-profile-copy > small { color: var(--case-muted); font-size: 10px; font-weight: 750; }
.case-profile-metrics { position: relative; z-index: 1; display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #c8dce4; border-radius: 9px; background: #c8dce4; }
.case-profile-metrics span { display: grid; min-width: 0; gap: 4px; padding: 9px 11px; color: #64808f; background: rgba(255, 255, 255, .88); font-size: 9px; font-weight: 850; }
.case-profile-metrics b { overflow: hidden; color: #194c61; font-size: 15px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.case-profile-actions { position: relative; z-index: 1; display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; align-items: center; }
.case-profile-source { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 0 10px; border-radius: 999px; font: 850 10px/1 inherit; text-decoration: none; white-space: nowrap; cursor: pointer; }
.case-profile-source { border: 1px solid #a9c4ce; color: #18536a; background: rgba(255, 255, 255, .78); }
.case-profile-source:hover,
.case-profile-source:focus-visible { border-color: var(--case-cyan); color: #0e7287; background: #effbfd; outline: none; }
.case-action-icon { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
@keyframes case-profile-glow { 0%, 100% { opacity: .55; scale: .92; } 50% { opacity: 1; scale: 1.06; } }
@keyframes case-profile-breathe { 0%, 100% { box-shadow: 0 15px 30px rgba(24, 57, 75, .11); } 50% { box-shadow: 0 20px 38px rgba(20, 96, 113, .17); } }
@media (prefers-reduced-motion: reduce) { .case-profile-surface, .case-profile-surface::after, .case-profile-orbit-center { animation: none; } }

/* Large screens use the case cards as a navigable constellation. The report remains in its existing modal. */
@media (min-width: 1240px) {
  .case-studies-canvas { background-attachment: fixed; }
  .case-study-content { padding-top: clamp(42px, 5vw, 72px); }
  .case-profile-field {
    display: block;
    width: min(1420px, calc(100vw - 80px));
    min-height: 960px;
    margin-left: 50%;
    padding: 0;
    transform: translateX(-50%);
  }
  .case-profile-field::before {
    inset: -60px -4vw -82px;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 18% 18%, rgba(105, 214, 225, .14), transparent 24%),
      radial-gradient(circle at 82% 76%, rgba(23, 89, 116, .11), transparent 27%),
      repeating-linear-gradient(90deg, rgba(44, 112, 136, .07) 0 1px, transparent 1px 74px),
      repeating-linear-gradient(0deg, rgba(44, 112, 136, .055) 0 1px, transparent 1px 74px);
  }
  .case-profile-orbit-center {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    display: grid;
    width: 166px;
    height: 92px;
    place-content: center;
    gap: 8px;
    border: 1px solid rgba(31, 137, 157, .38);
    border-radius: 14px;
    color: #1b586e;
    background: linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(219, 245, 248, .86));
    box-shadow: 0 18px 36px rgba(23, 93, 113, .12);
    text-align: center;
    transform: translate(-50%, -50%);
    animation: case-orbit-center 9s ease-in-out infinite;
  }
  .case-profile-orbit-center svg { width: 38px; height: 38px; margin: 0 auto; fill: currentColor; }
  .case-profile-orbit-center strong { color: #173d51; font: 850 12px/1 "Bahnschrift", "DIN Alternate", sans-serif; letter-spacing: .08em; }
  .case-profile-orbit-center small { color: #538093; font-size: 9px; font-weight: 850; }
  .case-profile-card {
    --case-left: 50%;
    --case-top: 50%;
    --case-drift-x: 0px;
    --case-drift-y: -9px;
    position: absolute;
    z-index: 1;
    top: var(--case-top);
    left: var(--case-left);
    width: min(370px, 27vw);
    min-width: 300px;
    min-height: 176px;
    transform: translate(-50%, -50%) rotate(var(--case-tilt));
  }
  .case-profile-surface { min-height: 176px; animation: case-profile-orbit-float 8.8s ease-in-out infinite; animation-delay: var(--case-delay, 0s); }
  .case-profile-card[data-case-layout="1"] { --case-left: 14%; --case-top: 28%; --case-tilt: -1.3deg; --case-drift-x: 11px; --case-drift-y: -13px; --case-delay: -.8s; }
  .case-profile-card[data-case-layout="2"] { --case-left: 50%; --case-top: 13%; --case-tilt: .8deg; --case-drift-x: -8px; --case-drift-y: 11px; --case-delay: -2.9s; }
  .case-profile-card[data-case-layout="3"] { --case-left: 86%; --case-top: 28%; --case-tilt: 1.15deg; --case-drift-x: 12px; --case-drift-y: 8px; --case-delay: -5.1s; }
  .case-profile-card[data-case-layout="4"] { --case-left: 87%; --case-top: 66%; --case-tilt: -.7deg; --case-drift-x: -10px; --case-drift-y: -12px; --case-delay: -1.7s; }
  .case-profile-card[data-case-layout="5"] { --case-left: 50%; --case-top: 87%; --case-tilt: .75deg; --case-drift-x: 9px; --case-drift-y: -11px; --case-delay: -4.2s; }
  .case-profile-card[data-case-layout="6"] { --case-left: 13%; --case-top: 66%; --case-tilt: -1deg; --case-drift-x: -12px; --case-drift-y: 10px; --case-delay: -6.3s; }
  .case-profile-card:hover .case-profile-surface,
  .case-profile-card:focus-within .case-profile-surface { animation-play-state: paused; }
}

@keyframes case-profile-orbit-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); box-shadow: 0 15px 30px rgba(24, 57, 75, .11); }
  50% { transform: translate3d(var(--case-drift-x), var(--case-drift-y), 0) rotate(.45deg); box-shadow: 0 24px 42px rgba(20, 96, 113, .18); }
}
@keyframes case-orbit-center { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-5px); } }

body.case-report-modal-open { overflow: hidden; }
.case-report-modal { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: clamp(12px, 3vw, 34px); background: rgba(12, 27, 38, .58); backdrop-filter: blur(6px); }
.case-report-dialog { width: min(1120px, 100%); max-height: min(92vh, 980px); overflow: hidden; border: 1px solid #7aaab9; border-radius: 16px; outline: none; background: #edf3f6; box-shadow: 0 28px 80px rgba(6, 20, 30, .42); }
.case-report-dialog-head { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 18px; padding: 14px clamp(16px, 2.5vw, 28px); border-bottom: 1px solid #b9ced7; background: linear-gradient(115deg, #ffffff, #eaf7f9); }
.case-report-dialog-account { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 12px; overflow: hidden; }
.case-report-dialog-account > div { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 10px; overflow: hidden; }
.case-report-dialog-account .case-profile-avatar-small { flex: 0 0 46px; aspect-ratio: 1; border-radius: 50%; }
.case-report-dialog-account .case-profile-avatar-small img { border-radius: inherit; }
.case-report-identity-row { flex-wrap: nowrap; overflow: hidden; }
.case-report-identity-row .case-platform-badge { flex: 0 0 auto; }
.case-report-dialog-account h2 { min-width: 0; overflow: hidden; margin: 0; padding: 2px 0; color: #16293a; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.case-report-dialog-close { display: grid; box-sizing: border-box; flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; aspect-ratio: 1; padding: 0; place-items: center; border: 1px solid #abc1cb; border-radius: 50%; color: #314f60; background: #ffffff; cursor: pointer; }
.case-report-dialog-close .case-action-icon { width: 20px; height: 20px; stroke-width: 1.75; }
.case-report-dialog-close:hover,
.case-report-dialog-close:focus-visible { border-color: var(--case-cyan); color: #0e7287; background: #edfbfd; outline: none; }
.case-report-dialog-body { max-height: calc(min(92vh, 980px) - 78px); overflow-y: auto; padding: clamp(16px, 3vw, 28px); }

.case-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; border: 1px solid var(--case-line); background: var(--case-panel); box-shadow: 0 15px 34px rgba(26, 55, 73, .07); }
.case-summary-grid article { min-width: 0; padding: 16px 18px; border-right: 1px solid #d9e4ea; }
.case-summary-grid article:last-child { border-right: 0; }
.case-summary-grid span,
.case-summary-grid strong,
.case-summary-grid small { display: block; }
.case-summary-grid span { color: var(--case-muted); font-size: 12px; font-weight: 850; }
.case-summary-grid strong { margin-top: 3px; color: var(--case-blue); font-size: clamp(24px, 3vw, 35px); line-height: 1; }
.case-summary-grid small { margin-top: 7px; color: var(--case-faint); font-size: 11px; }

.case-report-context,
.case-engagement-panel { margin-top: 16px; }
.case-fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 17px 0 0; border: 1px solid #d6e1e7; background: #d6e1e7; }
.case-fact-grid div { min-width: 0; padding: 12px; background: #f9fcfd; }
.case-fact-grid dt { color: #6a818f; font-size: 10px; font-weight: 850; }
.case-fact-grid dd { overflow-wrap: anywhere; margin: 5px 0 0; color: #20485c; font-size: 13px; font-weight: 850; line-height: 1.45; }
.case-metric-notice { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--case-cyan); color: #5d7482; background: #f1f8fa; font-size: 12px; line-height: 1.6; }
.case-metric-notice b { display: block; margin-bottom: 3px; color: #254e61; }
.case-engagement-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin-top: 17px; border: 1px solid #d6e1e7; background: #d6e1e7; }
.case-engagement-grid > div { min-width: 0; padding: 12px; background: #ffffff; }
.case-engagement-grid span,
.case-engagement-grid strong { display: block; }
.case-engagement-grid span { color: #6a818f; font-size: 10px; font-weight: 850; }
.case-engagement-grid strong { margin-top: 5px; color: #1b5065; font-size: 20px; line-height: 1; }

.case-report-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.case-panel { min-width: 0; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--case-line); border-radius: 2px; background: var(--case-panel); box-shadow: 0 14px 30px rgba(26, 55, 73, .05); }
.case-panel h3 { margin: 7px 0 0; font-size: clamp(21px, 2.4vw, 29px); line-height: 1.15; letter-spacing: -.02em; }
.case-panel-intro { margin: 10px 0 0; color: var(--case-muted); font-size: 13px; line-height: 1.65; }
.case-style-panel { margin-top: 16px; }
.case-report-grid > .case-panel { position: relative; }
.case-report-grid > .case-panel::after { position: absolute; top: 0; left: 0; width: 64px; height: 3px; background: linear-gradient(90deg, var(--case-blue), var(--case-cyan)); content: ""; }

.case-persona-copy { margin: 15px 0 14px; font-size: 15px; font-weight: 800; line-height: 1.55; }
.case-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.case-tag { padding: 5px 9px; color: #24627a; border: 1px solid #b9dde6; background: #ecf9fb; }
.case-flow { display: grid; gap: 9px; margin-top: 17px; }
.case-flow div { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 10px; align-items: center; }
.case-flow b { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #ffffff; background: var(--case-blue); font: 850 11px/1 "Bahnschrift", "DIN Alternate", sans-serif; }
.case-flow span { color: #3e5c6d; font-size: 13px; font-weight: 750; line-height: 1.45; }
.case-traffic-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 17px; }
.case-traffic-kpis div { padding: 12px; border: 1px solid #d7e3e9; background: #f6fafb; }
.case-traffic-kpis span,
.case-traffic-kpis strong { display: block; }
.case-traffic-kpis span { color: var(--case-muted); font-size: 11px; font-weight: 800; }
.case-traffic-kpis strong { margin-top: 4px; color: #17465b; font-size: 19px; }
.case-traffic-kpis strong small { margin-left: 4px; color: #6a818f; font-size: 11px; font-weight: 800; white-space: nowrap; }

.case-hour-list { display: grid; gap: 9px; margin-top: 17px; }
.case-hour-heading { display: grid; grid-template-columns: 23px minmax(120px, 1fr) minmax(160px, 1.55fr) 88px 13px; gap: 9px; padding: 0 10px; color: #758b99; font-size: 10px; font-weight: 850; }
.case-hour-heading span:nth-child(3),
.case-hour-heading span:nth-child(4) { text-align: right; }
.case-hour-row { border: 1px solid #d7e3e9; background: #fbfcfd; }
.case-hour-row > summary { display: grid; grid-template-columns: 23px minmax(120px, 1fr) minmax(160px, 1.55fr) 88px 13px; gap: 9px; align-items: center; padding: 10px; cursor: pointer; list-style: none; }
.case-hour-row > summary::-webkit-details-marker,
.case-style-card > summary::-webkit-details-marker { display: none; }
.case-hour-rank { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: #ffffff; background: var(--case-blue); font: 850 11px/1 "Bahnschrift", "DIN Alternate", sans-serif; }
.case-hour-label { color: #233f50; font-size: 12px; font-weight: 850; }
.case-hour-label small { display: block; margin-top: 3px; color: #7b8e9a; font-size: 10px; font-weight: 700; }
.case-hour-track { height: 9px; overflow: hidden; border-radius: 999px; background: #e4edf1; }
.case-hour-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1b4056, #25acc0); }
.case-hour-value { color: #526f7f; font-size: 11px; font-weight: 800; text-align: right; white-space: nowrap; }
.case-hour-value b,
.case-hour-value small { display: block; }
.case-hour-value b { color: #1d5368; font-size: 14px; }
.case-hour-value small { margin-top: 2px; color: #7b8e9a; font-size: 9px; font-weight: 700; }
.case-expand-mark { color: #426276; font-weight: 900; transition: transform 150ms ease; }
.case-expandable[open] .case-expand-mark { transform: rotate(180deg); }
.case-expand-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 12px 42px; color: #5c7483; font-size: 12px; line-height: 1.55; }
.case-expand-body p { margin: 0; }
.case-expand-body a { color: #116b82; font-weight: 850; text-underline-offset: 3px; white-space: nowrap; }

.case-report-style-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.case-sample-breakdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 14px; border: 1px solid #d6e1e7; background: #d6e1e7; }
.case-sample-breakdown span { padding: 11px; color: #6a818f; background: #f8fbfc; font-size: 10px; font-weight: 850; }
.case-sample-breakdown b { display: block; margin-top: 5px; color: #1b5065; font-size: 18px; }

.case-trend-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 17px; }
.case-trend-kpis > span { min-width: 0; padding: 12px; border: 1px solid #d7e3e9; color: #6a818f; background: #f7fbfc; font-size: 11px; font-weight: 800; }
.case-trend-kpis b { display: block; overflow: hidden; margin-top: 5px; color: #1b4e64; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.case-daily-wave { display: grid; gap: 8px; margin-top: 17px; }
.case-daily-wave-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) 48px; gap: 12px; align-items: center; min-height: 31px; padding: 5px 8px; color: #587180; background: #fbfcfd; font-size: 11px; font-weight: 850; }
.case-daily-wave-row > span { white-space: nowrap; }
.case-daily-wave-row small { display: block; margin-top: 2px; color: #8aa0ac; font-size: 9px; font-weight: 750; }
.case-daily-wave-row > i { display: block; height: 10px; overflow: hidden; border-radius: 999px; background: #e1ebef; }
.case-daily-wave-row > i > b { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, #163e56, #1a95ac 72%, #60c4d0); }
.case-daily-wave-row > strong { color: #174e63; font: 850 13px/1 "Bahnschrift", "DIN Alternate", sans-serif; text-align: right; }
.case-daily-wave-row.is-peak { color: #195a70; background: #f0fafb; }
.case-daily-wave-row.is-peak > i > b { background: linear-gradient(90deg, #16465f, #138da5 54%, #52c5d2); }
.case-traffic-panel-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.case-traffic-month { display: grid; gap: 5px; min-width: 130px; color: #6a818f; font-size: 10px; font-weight: 850; }
.case-traffic-month select { width: 100%; min-height: 33px; padding: 0 29px 0 9px; border: 1px solid #aac3cf; border-radius: 4px; color: #1c465a; background: #ffffff; font: 800 12px/1 inherit; }
.case-chart-wrap { width: 100%; overflow-x: auto; margin-top: 12px; border: 1px solid #d4e1e7; background: linear-gradient(180deg, #fbfdfe, #f3f8fa); }
.case-trend-chart { display: block; width: 100%; min-width: 860px; height: auto; }
.case-trend-chart text { fill: #6d8492; font: 11px/1 "Bahnschrift", "DIN Alternate", sans-serif; }
.case-chart-axis { stroke: #9db6c2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.case-chart-gridline { stroke: #dce8ed; stroke-width: 1; vector-effect: non-scaling-stroke; }
.case-chart-line { fill: none; stroke: #147c94; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.case-chart-point { fill: #edf9fb; stroke: #177f97; stroke-width: 2; vector-effect: non-scaling-stroke; }
.case-chart-point.is-peak { fill: #2ab3c5; stroke: #17394e; }
.case-trend-chart .case-chart-value { fill: #155b70; font-size: 9px; font-weight: 850; }
.case-traffic-day-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 6px; margin-top: 12px; }
.case-traffic-day-list span { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; padding: 6px 8px; border: 1px solid #d8e6eb; color: #63808e; background: #fbfdfe; font-size: 10px; }
.case-traffic-day-list b { color: #395e6f; font-weight: 850; }
.case-traffic-day-list em { color: #12667b; font-size: 11px; font-style: normal; font-weight: 850; }
.case-chart-empty { margin: 14px 0 0; padding: 18px; border: 1px dashed #c7d8df; color: #6c8391; background: #fbfdfe; font-size: 12px; text-align: center; }

.case-table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid #d6e1e7; }
.case-data-table { width: 100%; min-width: 590px; border-collapse: collapse; font-size: 12px; }
.case-data-table th,
.case-data-table td { padding: 9px 10px; border-right: 1px solid #dce6eb; border-bottom: 1px solid #dce6eb; text-align: right; white-space: nowrap; }
.case-data-table th:first-child,
.case-data-table td:first-child { text-align: left; }
.case-data-table th:last-child,
.case-data-table td:last-child { border-right: 0; }
.case-data-table tr:last-child td { border-bottom: 0; }
.case-data-table th { color: #587180; background: #f2f7f9; font-size: 11px; }
.case-data-table td { color: #294858; background: #ffffff; font-weight: 750; }
.case-data-table a { color: #087488; font-size: 15px; font-weight: 900; text-decoration: none; }

.case-media-table { display: grid; gap: 1px; margin-top: 17px; border: 1px solid #c5d8e1; background: #c5d8e1; }
.case-media-table-head,
.case-media-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) 156px 112px; gap: 14px; align-items: center; }
.case-media-table-head { padding: 9px 12px; color: #587180; background: #f0f7f9; font-size: 10px; font-weight: 850; }
.case-media-table-head span:nth-child(3),
.case-media-table-head span:nth-child(4) { text-align: right; }
.case-media-row { min-height: 106px; padding: 10px 12px; background: #ffffff; }
.case-media-preview { position: relative; min-height: 84px; overflow: hidden; background: #eef4f6; }
.case-media-gallery { display: grid; grid-template-columns: repeat(var(--case-media-count, 1), minmax(0, 1fr)); min-height: 84px; gap: 1px; background: #d6e1e7; }
.case-media-asset { position: relative; display: block; min-width: 0; min-height: 84px; overflow: hidden; background: #e7eef2; }
.case-media-asset img { display: block; width: 100%; height: 84px; object-fit: cover; background: #e7eef2; }
.case-media-asset > span { display: none; }
.case-media-asset.is-unavailable > span { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; color: #68808f; background: #eef4f6; font-size: 10px; font-weight: 750; text-align: center; }
.case-media-text-plate { display: grid; min-height: 84px; place-items: center; color: #698391; background: linear-gradient(145deg, #f4f9fb, #e3eef2); font: 850 11px/1 "Bahnschrift", "DIN Alternate", sans-serif; letter-spacing: .12em; }
.case-media-copy { min-width: 0; }
.case-media-copy strong,
.case-media-copy small,
.case-media-copy em { display: block; }
.case-media-copy strong { color: #183c4e; font-size: 14px; }
.case-media-count { display: inline-flex; margin-top: 5px; padding: 3px 6px; border: 1px solid #c2d9e1; color: #21677a; background: #eff9fb; font-size: 10px; font-style: normal; font-weight: 850; }
.case-media-copy small { margin-top: 5px; color: #607886; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.case-media-copy em { margin-top: 7px; color: #718794; font-size: 10px; font-style: normal; font-weight: 800; }
.case-media-metrics { display: grid; gap: 6px; justify-items: end; color: #66808f; font-size: 11px; }
.case-media-metrics span { white-space: nowrap; }
.case-media-metrics b { color: #1a586e; font-size: 13px; }
.case-media-metrics small { max-width: 156px; color: #718794; font-size: 10px; line-height: 1.45; text-align: right; }
.case-media-link { justify-self: end; display: inline-flex; min-height: 32px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid #abc4d0; border-radius: 4px; color: #126b81; background: #ffffff; font-size: 12px; font-weight: 850; text-decoration: none; white-space: nowrap; }
.case-media-link:hover,
.case-media-link:focus-visible { border-color: #2c8799; color: #075c70; background: #effbfd; }
.case-media-empty { padding: 20px 12px; color: #66808f; background: #ffffff; font-size: 12px; text-align: center; }
.case-media-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; color: #587180; font-size: 12px; font-weight: 800; }
.case-media-pagination button { min-width: 76px; min-height: 32px; padding: 0 12px; border: 1px solid #abc4d0; border-radius: 4px; color: #126b81; background: #ffffff; font: inherit; cursor: pointer; }
.case-media-pagination button:hover:not(:disabled),
.case-media-pagination button:focus-visible:not(:disabled) { border-color: #2c8799; color: #075c70; background: #effbfd; }
.case-media-pagination button:disabled { color: #9badb6; border-color: #d3e0e5; background: #f5f8f9; cursor: not-allowed; }

@media (max-width: 820px) {
  .case-studies-shell { width: min(100% - 28px, 960px); }
  .case-report-grid { grid-template-columns: 1fr; }
  .case-profile-field { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 28px; padding: 24px 12px 64px; }
  .case-profile-card { min-height: 166px; }
  .case-profile-surface { grid-template-columns: 72px minmax(0, 1fr); gap: 13px; min-height: 166px; padding: 16px; }
  .case-profile-card[data-case-layout="4"] { --case-x: 12px; }
  .case-profile-card[data-case-layout="5"] { --case-x: -8px; }
  .case-profile-avatar { width: 72px; height: 72px; }
  .case-profile-metrics { grid-column: 1 / -1; }
  .case-profile-actions { grid-column: 1 / -1; }
  .case-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-summary-grid article:nth-child(2) { border-right: 0; }
  .case-summary-grid article:nth-child(n + 3) { border-top: 1px solid #d7e2e8; }
  .case-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-engagement-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-engagement-grid > div:last-child { grid-column: 1 / -1; }
  .case-sample-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .case-profile-field { gap: 24px; }
  .case-profile-card[data-case-layout] { --case-x: 0px; --case-y: 0px; --case-tilt: 0deg; }
}

@media (max-width: 560px) {
  .case-studies-shell { width: min(100% - 22px, 960px); }
  .case-studies-hero { padding: calc(var(--site-header-height, 56px) + 14px) 0 18px; }
  .case-studies-hero h1 { font-size: 27px; }
  .case-studies-hero-copy > p:last-child { font-size: 12px; }
  .case-profile-field { grid-template-columns: 1fr; gap: 22px; padding: 12px 0 40px; }
  .case-profile-surface { grid-template-columns: 58px minmax(0, 1fr); gap: 11px; padding: 14px; border-radius: 12px; }
  .case-profile-card[data-case-layout] { --case-x: 0px; --case-y: 0px; --case-tilt: 0deg; }
  .case-profile-avatar { width: 58px; height: 58px; border-width: 2px; }
  .case-profile-avatar .platform-brand-icon { width: 28px; height: 28px; }
  .case-profile-copy { gap: 4px; }
  .case-profile-platform { font-size: 12px; }
  .case-profile-platform .platform-brand-icon { width: 17px; height: 17px; }
  .case-profile-copy > strong { font-size: 18px; }
  .case-profile-copy > small { font-size: 10px; }
  .case-profile-metrics span { padding: 9px 8px; font-size: 9px; }
  .case-profile-metrics b { font-size: 15px; }
  .case-profile-source { min-height: 34px; font-size: 11px; }
  .case-report-modal { padding: 9px; }
  .case-report-dialog { max-height: 94vh; border-radius: 12px; }
  .case-report-dialog-head { min-height: 66px; gap: 10px; padding: 10px 13px; }
  .case-report-dialog-account { gap: 8px; }
  .case-report-dialog-account .case-profile-avatar-small { flex-basis: 42px; width: 42px; height: 42px; }
  .case-report-identity-row { gap: 8px; }
  .case-report-identity-row .case-platform-badge { padding: 7px 10px; font-size: 13px; }
  .case-report-identity-row .case-platform-badge .platform-brand-icon { width: 17px; height: 17px; flex-basis: 17px; }
  .case-report-dialog-body { max-height: calc(94vh - 66px); padding: 13px; }
  .case-report-dialog-account h2 { font-size: 20px; }
  .case-report-dialog-close { flex-basis: 32px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; font-size: 24px; }
  .case-summary-grid article { padding: 13px; }
  .case-traffic-kpis { grid-template-columns: 1fr; }
  .case-trend-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-daily-wave-row { grid-template-columns: 43px minmax(0, 1fr) 40px; gap: 8px; padding: 5px 6px; font-size: 10px; }
  .case-daily-wave-row > strong { font-size: 12px; }
  .case-traffic-panel-head { align-items: start; }
  .case-traffic-month { min-width: 112px; }
  .case-trend-chart { min-width: 760px; }
  .case-trend-chart .case-chart-x-label { font-size: 9px; }
  .case-hour-heading { display: none; }
  .case-hour-row > summary { grid-template-columns: 22px minmax(0, 1fr) minmax(86px, .7fr) 13px; }
  .case-hour-track { grid-column: 2 / -1; grid-row: 2; }
  .case-hour-value { grid-column: 3; grid-row: 1; }
  .case-expand-mark { grid-column: 4; grid-row: 1; }
  .case-expand-body { display: block; padding-left: 42px; }
  .case-expand-body a { display: inline-block; margin-top: 8px; }
  .case-media-table-head { display: none; }
  .case-media-row { grid-template-columns: 88px minmax(0, 1fr); gap: 8px 11px; min-height: 0; padding: 10px; }
  .case-media-preview { min-height: 80px; grid-row: 1 / span 2; }
  .case-media-gallery,
  .case-media-asset,
  .case-media-asset img { min-height: 80px; height: 80px; }
  .case-media-metrics { display: flex; gap: 9px; justify-items: unset; justify-content: flex-start; }
  .case-media-metrics small { display: none; }
  .case-media-link { justify-self: start; min-height: 29px; padding: 0 9px; }
  .case-media-pagination { justify-content: center; margin-top: 10px; }
}