#hero.story-hero{position:relative;min-height:850px;min-height:max(780px,100svh);padding:140px 5% 90px;gap:4%;background:#ffefdf;isolation:isolate}.hero-light{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 93% 55%,#e6844c 0%,#f6ba83 28%,#ffead5 60%,#fff1e5 85%)}#light-flow{width:100%;height:100%;opacity:.9}.light-wash{position:absolute;inset:0;background:linear-gradient(90deg,#fff1e5 0%,#fff1e5e8 25%,#fff1e500 65%)}.story-hero .sales-copy{transform-origin:left center}.story-hero .sales-copy h1{font-size:clamp(56px,5.8vw,94px);line-height:1.01}.story-hero .sales-eyebrow{max-width:36em;line-height:1.7;margin-bottom:28px}.story-hero .sales-lede{max-width:24em;font-size:clamp(20px,1.8vw,27px);line-height:1.4}.story-hero .sales-detail{max-width:28em;font-size:15px;color:#70513e}.story-hero .sales-footnote{color:#79513c}.role-theatre{position:relative;height:590px;min-width:0;perspective:1000px;z-index:1;--role-ink:#54280f}.theatre-depth{position:absolute;inset:-10% -15%;pointer-events:none}.depth-shard{position:absolute;display:block;width:210px;height:380px;border-radius:48% 48% 46% 45%;background:linear-gradient(120deg,#fff9df03 15%,#fffbea77 45%,#fffaf213 56%,#a9471512 85%);border-left:1px solid #fff9d5ad;box-shadow:18px 26px 50px #a4491510;transform:rotate(28deg);animation:shard-drift 13s ease-in-out infinite alternate}.shard-one{left:18%;top:12%}.shard-two{width:120px;height:310px;right:0;top:28%;transform:rotate(-24deg);animation-delay:-7s;opacity:.6}.depth-dust{position:absolute;width:8px;height:8px;left:18%;top:54%;border-radius:50%;background:#fff8d6;box-shadow:140px -180px 0 -2px #fff6db,260px -35px 0 -1px #fff9e9,40px 135px 0 -1px #c76c35,300px 170px 0 -2px #fff;animation:dust-drift 9s ease-in-out infinite alternate}.role-scenes{position:relative;height:505px;transform-style:preserve-3d}.role-scene{position:absolute;inset:0;opacity:0;visibility:hidden;display:none;transform:translate3d(20px,20px,-30px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}.role-scene.is-active{opacity:1;visibility:visible;display:block;transform:translate3d(0,0,0) rotate(0deg);pointer-events:auto}.role-question{position:absolute;top:15px;left:0;right:0;display:flex;gap:14px;align-items:center;animation:question-drift 6s ease-in-out infinite alternate;transform-origin:left center}.role-question p{font-size:clamp(24px,2.45vw,35px);font-weight:650;line-height:1.24;letter-spacing:-.035em;max-width:18em;margin:0;color:#451c09;text-wrap:balance}

/* Playful bouncy interactive question mark button */
.question-mark {
  display: inline-flex;
  place-items: center;
  justify-content: center;
  flex: 0 0 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ffe9d1 60%, #ffcf9e 100%);
  border: 2px solid #ff9e54;
  color: #bf4514;
  font-family: var(--font-1);
  font-size: 25px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(220, 80, 20, 0.22), inset 0 -2px 5px rgba(230, 90, 25, 0.35);
  animation: playful-wiggle 3.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  transform-origin: center bottom;
  cursor: default;
}

@keyframes playful-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-10deg) scale(1.08) translateY(-2px); }
  50% { transform: rotate(8deg) scale(1.05) translateY(-1px); }
  75% { transform: rotate(-4deg) scale(1.02); }
}

.role-answer{position:absolute;top:140px;left:0;right:0;animation:answer-drift 7s ease-in-out infinite alternate}

.role-intro {
  font-family: var(--font-2);
  font-size: 13px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #8c3e16;
  margin-bottom: 14px;
  font-weight: 700;
  display: block;
}

.role-answer h2 {
  font-family: var(--font-1);
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-size: clamp(52px, 6.2vw, 92px);
  margin: 0;
  display: inline-block;
  transform-origin: left center;
  animation: role-bouncy-zoom 4.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
  will-change: transform, filter;
}

/* First word totally pure white with subtle, elegant dark drop shadow; second word rich warm amber */
.role-word-top {
  display: inline-block;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(24, 12, 6, 0.4), 0 1px 2px rgba(24, 12, 6, 0.6);
  filter: none !important;
}

.role-word-bot {
  display: inline-block;
  background: linear-gradient(135deg, #ffffff 0%, #ffeedc 25%, #ffa652 65%, #ea6318 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #ffa652 !important;
  letter-spacing: -0.035em;
  filter: drop-shadow(0 2px 8px rgba(24, 12, 6, 0.35)) !important;
}

/* --- HERO HEADLINE: PHYSICS FALL & COLLISION ANIMATION --- */
/*
  Sequence:
  1. 'More business.' falls with gravity acceleration from above into position.
  2. While falling, 'business.' glows warmly in orange.
  3. 'busywork.' starts in the darker corporate ink shade.
  4. On impact (collision), 'More business.' hits, bounces, settles to the clean dark shade.
  5. The impact transfers kinetic energy to 'busywork.', which pops cleanly, turns into rich orange, and stays!
*/
.title-falling-line {
  display: inline-block;
  animation: headline-fall 1.25s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s backwards;
  transform-origin: center bottom;
}

.word-more,
.word-less {
  color: var(--color-1) !important;
}

.word-business {
  display: inline-block;
  color: #bd4e25;
  animation: business-color-settle 1.4s cubic-bezier(0.2, 0.9, 0.3, 1) 0.3s forwards;
}

.title-target-line {
  display: inline-block;
}

.word-busywork {
  display: inline-block;
  color: var(--color-1);
  transform-origin: left center;
  animation: busywork-collision-pop 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

@keyframes headline-fall {
  0% {
    transform: translateY(-85px) rotate(-3deg);
    opacity: 0;
  }
  60% {
    transform: translateY(6px) rotate(1deg);
    opacity: 1;
  }
  80% {
    transform: translateY(-4px) rotate(-0.5deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes business-color-settle {
  0%, 55% {
    color: #e6511a;
  }
  75% {
    color: #7b3318;
  }
  100% {
    color: var(--color-1);
  }
}

@keyframes busywork-collision-pop {
  0%, 55% {
    color: var(--color-1);
    transform: scale(1);
  }
  60% {
    /* Impact moment: pop & rebound */
    transform: scale(1.14) translateY(2px);
    color: #e6511a;
  }
  78% {
    transform: scale(0.98) translateY(-1px);
    color: #bd4e25;
  }
  100% {
    transform: scale(1.02) translateY(0);
    color: #bd4e25;
  }
}


.role-promise {
  font-family: var(--font-2);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 24em;
.role-intro {
  font-family: var(--font-2);
  font-size: 13px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #8c3e16;
  margin-bottom: 22px;
  font-weight: 700;
  display: block;
}

.role-answer h2 {
  font-family: var(--font-1);
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-size: clamp(52px, 6.2vw, 92px);
  margin: 0;
  display: inline-block;
  transform-origin: left center;
  animation: role-bouncy-zoom 4.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
  will-change: transform, filter;
}

.role-promise {
  font-family: var(--font-2);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 550;
  line-height: 1.55;
  max-width: 25em;
  margin: 28px 0 0;
  color: #4a2410;
}

.role-capabilities {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 480px;
}

.role-capabilities li {
  font-family: var(--font-2);
  font-size: 13.5px;
  font-weight: 650;
  padding: 10px 18px;
  color: #441e0a;
  background: rgba(255, 248, 238, 0.96);
  border: 1.5px solid rgba(255, 175, 110, 0.7);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(160, 60, 15, 0.12);
  animation: label-drift 5s ease-in-out infinite alternate;
}

.role-capabilities li:nth-child(2){animation-delay:-1.2s}
.role-capabilities li:nth-child(3){animation-delay:-2.4s}
.role-capabilities li:nth-child(4){animation-delay:-3.6s}
.role-capabilities li:nth-child(5){animation-delay:-4.8s}

.role-controls {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.role-selectors {
  display: flex;
  gap: 14px;
}

.role-selectors button {
  font: 600 13px var(--font-2);
  border: 0;
  background: none;
  color: #71401e;
  cursor: pointer;
  min-height: 44px;
  padding: 8px 4px;
  display: flex;
  gap: 8px;
  align-items: center;
  opacity: .7;
  transition: opacity .2s, color .2s;
}

.role-selectors button span {
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
}

.role-selectors button[aria-pressed=true] {
  opacity: 1;
  color: #9e3912;
  font-weight: 700;
}

.role-selectors button[aria-pressed=true] span {
  box-shadow: 0 0 0 5px rgba(189, 78, 37, 0.22);
  background: #bf4719;
}

/* Polished high-visibility Pause/Play motion button */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 12px var(--font-2);
  color: #8c3e16;
  background: rgba(255, 246, 235, 0.85);
  border: 1px solid rgba(189, 78, 37, 0.35);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(180, 70, 20, 0.08);
  transition: all .25s ease;
  backdrop-filter: blur(6px);
}

.motion-toggle:hover {
  background: #bf4719;
  color: #fff;
  border-color: #bf4719;
  box-shadow: 0 4px 14px rgba(180, 70, 20, 0.25);
}

.role-controls button:focus-visible{outline:2px solid #8b3a18;outline-offset:3px;border-radius:6px}

.theatre-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #7d4d2e;
  letter-spacing: .2px;
}

.hero-paused *,.hero-offscreen *{animation-play-state:paused!important}.hero-paused .role-scene{transition:none}.story-hero .sales-copy h1{will-change:transform}.role-theatre{will-change:transform}

@keyframes question-drift{from{transform:translate3d(-4px,0,0)}to{transform:translate3d(4px,-6px,0)}}
@keyframes answer-drift{from{transform:translate3d(0,4px,0)}to{transform:translate3d(0,-4px,0)}}
@keyframes label-drift{to{transform:translateY(-4px)}}
@keyframes shard-drift{to{transform:translate3d(22px,-25px,0) rotate(38deg)}}
@keyframes dust-drift{to{transform:translate(15px,-20px)}}

@keyframes role-bouncy-zoom {
  0% {
    transform: scale(0.97) translateY(0);
    filter: drop-shadow(0 2px 4px rgba(90, 30, 10, 0.3)) drop-shadow(0 0 10px rgba(255, 140, 50, 0.45));
  }
  50% {
    transform: scale(1.04) translateY(-3px);
    filter: drop-shadow(0 4px 8px rgba(90, 30, 10, 0.35)) drop-shadow(0 0 18px rgba(255, 150, 60, 0.75));
  }
  100% {
    transform: scale(0.98) translateY(1px);
    filter: drop-shadow(0 2px 4px rgba(90, 30, 10, 0.3)) drop-shadow(0 0 12px rgba(255, 140, 50, 0.5));
  }
}

/* --- WHERE WORK GETS STUCK (#work): MASSIVE PUNCHY HEADLINES & VIBRANT ATMOSPHERE --- */
#work .case {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: clamp(26px, 3.6vw, 44px) !important;
  box-sizing: border-box !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: #28170e !important;
  border: 1px solid rgba(255, 230, 200, 0.22) !important;
  box-shadow: 0 20px 50px rgba(40, 20, 10, 0.25) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease !important;
}

#work .case:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 28px 65px rgba(230, 85, 25, 0.22) !important;
}

/* Authentic photo vibe: lightened up, vibrant and NOT heavily dimmed */
#work .case__media {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

#work .case__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: blur(2.5px) brightness(0.88) saturate(1.15) !important;
  transform: scale(1.05) !important;
  transition: filter 0.4s ease, transform 0.4s ease !important;
}

#work .case:hover .case__img {
  filter: blur(1.5px) brightness(0.92) saturate(1.2) !important;
  transform: scale(1.02) !important;
}

/* Lighter dual wash: preserves photo vitality while ensuring crisp text contrast */
#work .case__media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(28, 14, 8, 0.55) 0%, rgba(28, 14, 8, 0.15) 45%, rgba(20, 10, 5, 0.72) 100%) !important;
}

/* Top: Problem Statement Header taking full card top half */
.case__problem-header {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
  padding-bottom: 24px !important;
}

#work .case__name {
  font-family: var(--font-1) !important;
  font-size: clamp(38px, 4.4vw, 64px) !important;
  font-weight: 850 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  max-width: 100% !important;
  display: block !important;
}

/* Clean translucent frosted white lines */
.case__name-line {
  display: inline-block !important;
  color: #ffffff !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* Accent punchline: elevated luminous frosted pearl with crisp contrast and no orange glow */
.case__name-line--accent {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 255, 255, 0.45) !important;
  letter-spacing: -0.04em !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) !important;
}

/* Playful, lively kinematic drift animations */
.case__name--slide-left {
  animation: card-bounce-left 5.2s cubic-bezier(0.34, 1.45, 0.64, 1) infinite alternate !important;
  will-change: transform;
}

.case__name--slide-right {
  animation: card-drift-right 5.2s cubic-bezier(0.34, 1.45, 0.64, 1) infinite alternate !important;
  will-change: transform;
}

@keyframes card-bounce-left {
  0% { transform: translateX(-12px) rotate(-0.5deg); }
  50% { transform: translateX(0px) rotate(0deg); }
  100% { transform: translateX(8px) rotate(0.4deg); }
}

@keyframes card-drift-right {
  0% { transform: translateX(12px) rotate(0.5deg); }
  50% { transform: translateX(0px) rotate(0deg); }
  100% { transform: translateX(-8px) rotate(-0.4deg); }
}

/* Bottom: Solution Narrative & Details */
.case__solution-body {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding-top: 24px !important;
}

.case__narrative {
  font-family: var(--font-1) !important;
  font-size: clamp(21px, 2vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #fffaf4 !important;
  margin: 0 !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.75) !important;
}

/* Broken completely out of containers/pills: large, free-flowing, comforting happy sea-glass mint/teal */
.role-highlight {
  display: block !important;
  margin-top: 6px !important;
  font-family: var(--font-1) !important;
  font-size: clamp(24px, 2.3vw, 34px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: #4ee0c6 !important;
  background: linear-gradient(135deg, #ffffff 0%, #a8f5e5 45%, #3ddabf 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 14px rgba(62, 222, 194, 0.45)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background-color: transparent !important;
}

.role-highlight::before {
  display: none !important;
}

#work .case__line {
  font-family: var(--font-2) !important;
  font-size: clamp(14px, 1.15vw, 16px) !important;
  line-height: 1.55 !important;
  color: #f5e4d7 !important;
  margin: 0 !important;
  max-width: 32em !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9) !important;
}


@media(min-width:1450px){
  .role-theatre{max-width:650px;width:100%;margin:auto}
  .role-answer h2{font-size:88px}
}

@media(max-width:1050px) and (min-width:761px){
  #hero.story-hero{gap:2%;padding-inline:4%;min-height:800px}
  .role-theatre{height:560px}
  .role-scenes{height:470px}
  .role-answer{top:130px}
  .role-answer h2{font-size:5.6vw}
  .role-question p{font-size:24px}
  .role-controls{bottom:25px}
}

@media(max-width:760px){
  #hero.story-hero{padding:110px 6% 40px;min-height:0;display:block}
  .story-hero .sales-copy h1{font-size:clamp(44px,12.2vw,74px);margin-bottom:22px}
  .story-hero .sales-eyebrow{font-size:10px;margin-bottom:20px;max-width:35em}
  .story-hero .sales-lede{font-size:20px;max-width:20em;margin-bottom:15px}
  .story-hero .sales-detail{font-size:15px;line-height:1.6;margin-bottom:22px}
  .story-hero .sales-footnote{font-size:11px;margin-top:18px}
  .story-hero .sales-actions{gap:16px}
  .story-hero .sales-actions .m-btn{font-size:13px;padding:15px 20px}
  .story-hero .sales-link{font-size:12px}
  .role-theatre{height:470px;margin:40px auto 0;max-width:480px}
  .role-scenes{height:380px}
  .role-question{top:5px;gap:12px}
  .question-mark{flex:0 0 38px;height:38px;font-size:20px}
  .role-question p{font-size:23px;max-width:14em}
  .role-answer{top:95px}
  .role-intro{font-size:11px;letter-spacing:1.8px;margin-bottom:10px}
  .role-answer h2{font-size:clamp(46px,13vw,68px)}
  .role-promise{font-size:14px;margin-top:14px}
  .role-capabilities{bottom:0;gap:8px}
  .role-capabilities li{font-size:11px;padding:8px 12px}
  .role-controls{bottom:35px}
  .role-selectors button{font-size:12px}
  .motion-toggle{font-size:11px;padding:6px 12px}
  .theatre-caption{font-size:11px}
}

/* Haute Horlogerie / Ultra-Luxury Minimal Tech Logo */
.haute-logo-brand {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 48px;
  padding: 7px 20px 7px 18px !important;
  background: rgba(24, 12, 6, 0.94) !important;
  border: 1px solid rgba(255, 230, 210, 0.18) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 20px rgba(24, 12, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  text-decoration: none;
  gap: 10px;
  backdrop-filter: blur(14px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.haute-logo-brand:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 140, 50, 0.5) !important;
  box-shadow: 0 8px 28px rgba(230, 81, 26, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.brand-logo-img {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.brand-logo-img--light {
  display: block;
  filter: drop-shadow(0 2px 8px rgba(255, 120, 30, 0.3));
}

.brand-logo-img--dark {
  display: none;
}

.haute-logo-brand:hover .brand-logo-img {
  transform: scale(1.03);
  filter: drop-shadow(0 3px 12px rgba(255, 140, 45, 0.55));
}

/* Statement Section: A smaller starting point in radiant orange */
.statement-orange-highlight {
  color: #c7481b !important;
  background: linear-gradient(135deg, #bd4e25 0%, #e6511a 60%, #ff8533 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

/* Performance Optimizations: hardware-acceleration & GPU compositor caching */
.story-hero, .role-theatre, .capabilities__deck, .service, .again__wheel, .case {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media(max-width: 760px) {
  .haute-logo-brand {
    padding: 6px 16px !important;
    min-height: 40px;
  }
  .haute-wordmark {
    font-size: 19px;
  }
}

/* Dedicated Mobile Card Redesign: Huge text that fills the taller vertical mobile cards */
@media(max-width: 767px) {
  #work .case {
    padding: 28px 22px 24px !important;
    border-radius: 24px !important;
  }

  .case__problem-header {
    flex: 1 1 auto !important;
    padding-bottom: 20px !important;
    justify-content: flex-start !important;
  }

  #work .case__name {
    font-size: clamp(34px, 9.5vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
  }

  .case__name-line {
    display: inline-block !important;
    margin-bottom: 2px !important;
  }

  .case__solution-body {
    padding-top: 18px !important;
    gap: 10px !important;
  }

  .case__narrative {
    font-size: 19px !important;
    line-height: 1.35 !important;
  }

  .role-highlight {
    font-size: clamp(22px, 6vw, 27px) !important;
    margin-top: 5px !important;
  }

  #work .case__line {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* Role Theatre mobile spacing: ample breathing room for intro, role, promise text, and 5 central points */
  .role-theatre {
    height: 640px !important;
  }

  .role-scenes {
    height: 560px !important;
  }

  .role-answer {
    top: 130px !important;
  }

  .role-intro {
    font-size: 12.5px !important;
    margin-bottom: 16px !important;
    letter-spacing: 1.8px !important;
  }

  .role-answer h2 {
    font-size: clamp(48px, 12vw, 68px) !important;
    line-height: 0.98 !important;
  }

  .role-promise {
    font-size: 19px !important;
    line-height: 1.5 !important;
    margin: 28px 0 0 !important;
    max-width: 100% !important;
  }

  .role-capabilities {
    bottom: 20px !important;
    max-width: 100% !important;
    gap: 10px 10px !important;
    justify-content: center !important;
  }

  .role-capabilities li {
    font-size: 13px !important;
    padding: 9px 15px !important;
  }
}