/* A panoramic business visit, with readable glass surfaces over real imagery.
   CSS backdrop treatment keeps the existing Django links and headings intact. */
.expertise-v21 .expertise-cover {
  position:relative; display:block; isolation:isolate; min-height:520px;
  aspect-ratio:2.24; overflow:hidden; border-radius:4px; background:#23272b;
}
.expertise-v21 .expertise-portrait {
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  aspect-ratio:auto; clip-path:none; background:#30363b;
}
.expertise-v21 .expertise-photo-v20 { object-position:50% 50%; }
.expertise-v21 .expertise-cover-copy {
  position:absolute; z-index:2; left:30px; bottom:30px; width:45%; max-width:590px;
  padding:30px 32px 34px; border:1px solid rgb(255 255 255 / .36); border-radius:26px;
  background:rgb(28 33 37 / .68); color:#fff;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .30),inset 0 -1px 0 rgb(0 0 0 / .24),inset 1px 0 0 rgb(255 255 255 / .12),0 16px 36px rgb(0 0 0 / .16);
}
.expertise-v21 .expertise-cover-copy::before {
  content:""; pointer-events:none; position:absolute; inset:5px; border-radius:21px;
  border:1px solid rgb(255 255 255 / .09); border-bottom-color:transparent;
}
.expertise-v21 .expertise-cover-copy .eyebrow {
  display:flex; align-items:center; gap:12px; margin:0 0 27px;
  color:#f4f5f6; font-size:10px; letter-spacing:.11em;
}
.expertise-v21 .expertise-cover-copy .eyebrow img { flex:0 0 32px; }
.expertise-v21 .expertise-cover-copy h2 {
  font-size:clamp(30px,3.15vw,48px); line-height:1.14; letter-spacing:-.045em;
  color:#fff; text-wrap:balance; margin:0;
}
.expertise-v21 .expertise-cover-copy h2 em { color:#fff; font-style:normal; }
.expertise-v21 .expertise-brief { margin-top:30px; }

/* The object identity and destination form one floating, translucent dock. */
.case-visual .case-caption {
  border:1px solid rgb(255 255 255 / .38); border-radius:22px;
  background:rgb(27 32 36 / .66); padding:12px; gap:18px;
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .27),inset 0 -1px 0 rgb(0 0 0 / .18),0 8px 24px rgb(0 0 0 / .16);
}
.case-caption .case-caption-meta { padding-left:5px; }
.case-caption .case-caption-meta>span { color:#e1e5e7; }
.case-visual .case-view-business {
  position:relative; isolation:isolate; border-radius:14px;
  border:1px solid rgb(255 255 255 / .46); color:#fff;
  background:rgb(255 255 255 / .10); min-height:48px; padding:12px 16px;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .32),inset 0 -1px 0 rgb(0 0 0 / .14);
  transition:transform 240ms cubic-bezier(.2,.8,.2,1),background-color 240ms,border-color 240ms;
}
.case-view-business svg { color:#ffb251; }
.case-visual .case-view-business:focus-visible { outline:3px solid #f5921e; outline-offset:3px; }
.case-visual .case-view-business:active { transform:scale(.985); }
@media(hover:hover) and (pointer:fine) {
  .case-visual .case-view-business:hover { transform:translateY(-2px); border-color:#f5921e; background:rgb(255 255 255 / .18); }
}
@media(min-width:761px) and (max-width:1100px) {
  .expertise-v21 .expertise-cover { min-height:480px; aspect-ratio:1.9; }
  .expertise-v21 .expertise-cover-copy { left:24px; bottom:24px; width:48%; padding:24px; }
  .expertise-v21 .expertise-cover-copy h2 { font-size:32px; }
}
@media(max-width:760px) {
  .expertise-v21 .expertise-cover { min-height:0; height:520px; aspect-ratio:auto; overflow:hidden; }
  .expertise-v21 .expertise-portrait { inset:0; aspect-ratio:auto; clip-path:none; }
  .expertise-v21 .expertise-photo-v20 { object-position:85% 38%; }
  .expertise-v21 .expertise-cover-copy { left:12px; right:12px; bottom:12px; width:auto; max-width:none; padding:22px 20px 25px; border-radius:22px; }
  .expertise-v21 .expertise-cover-copy::before { border-radius:17px; }
  .expertise-v21 .expertise-cover-copy .eyebrow { margin-bottom:20px; gap:9px; font-size:8px; letter-spacing:.08em; }
  .expertise-v21 .expertise-cover-copy .eyebrow img { width:27px; height:22px; flex-basis:27px; }
  .expertise-v21 .expertise-cover-copy h2 { font-size:clamp(26px,6.7vw,39px); line-height:1.17; text-wrap:initial; }
  .case-visual .case-caption { margin:auto 10px 10px; padding:10px; gap:10px; border-radius:19px; }
  .case-caption .case-caption-meta { padding-left:2px; }
  .case-visual .case-view-business { min-height:44px; padding:10px; border-radius:12px; }
}
@media(max-width:370px) {
  .expertise-v21 .expertise-cover { height:470px; }
  .expertise-v21 .expertise-cover-copy { left:10px; right:10px; bottom:10px; padding:19px 16px 22px; }
  .expertise-v21 .expertise-cover-copy h2 { font-size:25px; }
  .expertise-v21 .expertise-cover-copy .eyebrow { font-size:7px; }
  .case-visual .case-caption { gap:8px; padding:10px; }
  .case-visual .case-view-business { min-height:42px; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .expertise-v21 .expertise-cover-copy,.case-visual .case-caption { background:rgb(35 39 43 / .95); }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .expertise-v21 .expertise-cover-copy,.case-visual .case-caption { background:#23272b; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .case-visual .case-view-business { background:#3d454b; }
}
@media(prefers-reduced-motion:reduce) {
  .case-visual .case-view-business,.case-view-business svg { transition:none; transform:none!important; }
}
html[data-v20-motion="off"] .case-visual .case-view-business,
html[data-v20-motion="off"] .case-view-business svg { transition:none; transform:none!important; }