:root {
  --paper: #f7f8fb;
  --paper-blue: #eef3f8;
  --ink: #18244d;
  --ink-soft: rgb(24 36 77 / 0.68);
  --blue: #284ca0;
  --blue-deep: #1d377c;
  --cyan-mist: #69bfcd;
  --blue-mist: #7898d1;
  --cobalt-mist: #4567b5;
  --line: rgb(33 58 122 / 0.2);
  --line-strong: rgb(40 76 160 / 0.62);
  --header-height: 4.5rem;
  --page-width: min(1420px, calc(100vw - 4.6vw));
  --radius: 1.8rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { color: inherit; font: inherit; }
.page-wrap { width: var(--page-width); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: .7rem; left: .7rem; padding: .7rem 1rem; color: #fff; background: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: relative;
  z-index: 20;
  height: var(--header-height);
  border-bottom: 1px solid rgb(33 58 122 / .08);
  background: rgb(248 249 252 / .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.site-header__inner { width: var(--page-width); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand, .site-nav a { color: var(--ink); font-size: .82rem; font-weight: 720; letter-spacing: .035em; text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.6vw, 2.9rem); }
.site-nav a { font-weight: 620; transition: color 180ms ease, transform 180ms ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--blue); transform: translateY(-1px); }

.hero {
  position: relative;
  isolation: isolate;
  min-height: max(42rem, calc(100svh - var(--header-height)));
  overflow: hidden;
  border-bottom: 1px solid rgb(33 58 122 / .12);
  background: radial-gradient(ellipse at 14% 78%, #efffff 0%, #e0f6f8 28%, transparent 51%), radial-gradient(ellipse at 86% 18%, #3199dc 0%, #52b8de 34%, #6a91d1 73%, #6c7fbe 100%);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.hero::before {
  z-index: 1;
  inset: -24% -20%;
  background:
    radial-gradient(ellipse at center, rgb(20 149 224 / .98) 0%, rgb(37 144 220 / .82) 27%, rgb(64 142 208 / .34) 52%, transparent 73%),
    radial-gradient(ellipse at center, rgb(38 63 179 / .94) 0%, rgb(45 91 193 / .76) 31%, rgb(56 130 207 / .3) 56%, transparent 76%),
    radial-gradient(ellipse at center, rgb(27 193 198 / .86) 0%, rgb(51 182 211 / .68) 34%, rgb(92 164 213 / .22) 59%, transparent 77%),
    radial-gradient(ellipse at center, rgb(33 104 203 / .62) 0%, rgb(68 136 212 / .4) 38%, transparent 71%),
    radial-gradient(ellipse at center, rgb(124 223 224 / .64) 0%, rgb(96 183 215 / .32) 42%, transparent 72%),
    linear-gradient(112deg, rgb(252 252 252 / .99) 5%, rgb(244 249 250 / .88) 31%, rgb(106 205 221 / .46) 57%, rgb(44 133 214 / .68) 78%, rgb(46 61 171 / .72) 100%);
  background-repeat: no-repeat;
  background-size: 72% 64%, 66% 80%, 88% 74%, 62% 72%, 76% 70%, 100% 100%;
  background-position: 100% 0%, 100% 100%, 44% 100%, 96% 44%, 65% 24%, 50% 50%;
  mix-blend-mode: normal;
  opacity: .98;
  transform: translate3d(-5%, -3%, 0) scale(1.07);
  animation: hero-gradient-drift 3.2s cubic-bezier(.45, .05, .55, .95) infinite alternate;
  will-change: transform, opacity, background-position, background-size, filter;
}
.hero::after {
  z-index: 1;
  inset: -28% -22%;
  background:
    radial-gradient(ellipse at center, rgb(255 255 255 / .99) 0%, rgb(251 252 252 / .88) 38%, rgb(242 249 251 / .36) 58%, transparent 74%),
    radial-gradient(ellipse at center, rgb(255 255 255 / .92) 0%, rgb(246 251 252 / .5) 38%, transparent 69%),
    radial-gradient(ellipse at center, rgb(255 255 255 / .9) 0%, rgb(235 245 249 / .42) 39%, transparent 70%),
    radial-gradient(ellipse at center, rgb(225 246 249 / .62) 0%, rgb(203 232 242 / .24) 42%, transparent 72%);
  background-repeat: no-repeat;
  background-size: 76% 72%, 62% 56%, 58% 62%, 72% 66%;
  background-position: 0% 35%, 54% 0%, 100% 100%, 68% 58%;
  mix-blend-mode: screen;
  opacity: .67;
  transform: translate3d(4%, 2%, 0) scale(1.07);
  animation: hero-mist-drift 3.7s cubic-bezier(.45, .05, .55, .95) infinite alternate;
  will-change: transform, opacity, background-position, background-size, filter;
}
.hero__line-field {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: normal;
}
.hero__line-field img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: .84;
  filter: saturate(1.18) brightness(1.2);
}
.hero__compute-heatmap {
  position: absolute;
  z-index: 2;
  inset: 4% -6% 2% 32%;
  overflow: hidden;
  pointer-events: none;
  opacity: .76;
  mix-blend-mode: screen;
  filter: saturate(1.08) contrast(1.04);
}
.hero__compute-heatmap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  will-change: opacity;
}
.hero__grid {
  position: relative;
  z-index: 4;
  min-height: max(42rem, calc(100svh - var(--header-height)));
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
}
.hero__copy {
  width: 100%;
  min-height: max(40rem, calc(100svh - var(--header-height) - 2rem));
  padding: clamp(2rem, 4vw, 4.5rem) clamp(1rem, 2.4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}
.hero__showcase-panel {
  width: min(100%, 31rem);
  min-width: 0;
  justify-self: end;
  align-self: center;
  padding: clamp(.65rem, 1.1vw, .9rem);
  border: 1px solid rgb(224 250 255 / .34);
  background: linear-gradient(145deg, rgb(240 250 255 / .25), rgb(125 204 250 / .1) 52%, rgb(36 105 206 / .16));
  box-shadow: 0 1.8rem 4rem rgb(13 58 142 / .14);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  clip-path: polygon(7% 0, 100% 0, 100% 93%, 93% 100%, 0 100%, 0 7%);
}
.hero__concept-panel {
  width: min(100%, 31rem);
  min-width: 0;
  justify-self: end;
  align-self: center;
  overflow: hidden;
  border: 1px solid rgb(225 253 255 / .68);
  background: rgb(241 249 255 / .18);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .54), 0 1.25rem 3.4rem rgb(25 85 157 / .16);
  backdrop-filter: blur(10px) saturate(1.08);
  clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
}
.hero__slideshow-panel { width: min(100%, 31rem); min-width: 0; justify-self: end; align-self: center; overflow: hidden; border: 1px solid rgb(225 253 255 / .7); background: rgb(241 249 255 / .2); box-shadow: inset 0 1px 0 rgb(255 255 255 / .58), 0 1.25rem 3.4rem rgb(25 85 157 / .16); backdrop-filter: blur(10px) saturate(1.08); clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%); }
.hero__slideshow-panel__head { display: flex; align-items: center; gap: .75rem; min-height: 3.2rem; padding: .8rem 1rem; color: rgb(16 52 123 / .86); font-size: .71rem; font-weight: 760; letter-spacing: .13em; }
.hero__slideshow-panel__head i { flex: 1; height: 1px; background: rgb(222 249 255 / .72); }
.hero__slideshow-panel__media { position: relative; aspect-ratio: 1.48; overflow: hidden; background: rgb(51 125 202 / .3); border-block: 1px solid rgb(225 253 255 / .45); }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transform: scale(1.055); animation: hero-slide-cycle 12s cubic-bezier(.4, 0, .2, 1) infinite; }
.hero-slide--portrait { object-fit: contain; background: rgb(25 66 125 / .7); }
.hero-slide--1 { animation-delay: 0s; }.hero-slide--2 { animation-delay: 1.28s; }.hero-slide--3 { animation-delay: 2.56s; }.hero-slide--4 { animation-delay: 4s; }.hero-slide--5 { animation-delay: 5.28s; }.hero-slide--6 { animation-delay: 6.56s; }.hero-slide--7 { animation-delay: 8s; }.hero-slide--8 { animation-delay: 10s; }
.hero-app-flow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; animation: hero-app-flow-cycle 12s ease-in-out infinite; }
.hero-app-flow path { stroke: rgb(230 250 255 / .92); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 13; animation: hero-app-flow-draw 1.2s linear infinite; }.hero-app-flow circle { fill: #fff; stroke: #66cfe8; stroke-width: 4; }
.hero__slideshow-panel__captions { position: relative; height: 4.6rem; overflow: hidden; margin: 0 1rem; }
.slide-caption { position: absolute; inset: .8rem 0 auto; display: grid; gap: .2rem; opacity: 0; transform: translateY(.6rem); color: rgb(23 53 104 / .92); animation: hero-caption-cycle 12s cubic-bezier(.16, 1, .3, 1) infinite; }.slide-caption b { font-size: 1rem; letter-spacing: -.02em; }.slide-caption span { color: rgb(24 36 77 / .72); font-size: .74rem; }.slide-caption--2 { animation-delay: 4s; }.slide-caption--3 { animation-delay: 8s; }
.hero__slideshow-panel__progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: .38rem; padding: 0 1rem 1rem; }.hero__slideshow-panel__progress i { height: .2rem; border-radius: 999px; background: rgb(225 253 255 / .45); animation: hero-progress-cycle 12s linear infinite; }.hero__slideshow-panel__progress i:nth-child(2) { animation-delay: 4s; }.hero__slideshow-panel__progress i:nth-child(3) { animation-delay: 8s; }
@keyframes hero-slide-cycle { 0%, 5% { opacity: 0; transform: scale(1.055); } 11%, 27% { opacity: 1; transform: scale(1); } 33%, 100% { opacity: 0; transform: scale(.985); } }
@keyframes hero-caption-cycle { 0%, 5% { opacity: 0; transform: translateY(.6rem); } 10%, 29% { opacity: 1; transform: translateY(0); } 34%, 100% { opacity: 0; transform: translateY(-.4rem); } }
@keyframes hero-progress-cycle { 0%, 5% { background: rgb(225 253 255 / .45); transform: scaleX(.84); } 10%, 31% { background: rgb(34 106 198 / .86); transform: scaleX(1); } 34%, 100% { background: rgb(225 253 255 / .45); transform: scaleX(.84); } }
@keyframes hero-app-flow-cycle { 0%, 66% { opacity: 0; } 72%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hero-app-flow-draw { to { stroke-dashoffset: -36; } }
.hero__concept-panel__head { display: flex; align-items: center; gap: .75rem; min-height: 3.2rem; padding: .8rem 1rem; color: rgb(16 52 123 / .86); font-size: .71rem; font-weight: 760; letter-spacing: .13em; }
.hero__concept-panel__head i { flex: 1; height: 1px; background: rgb(222 249 255 / .72); }
.hero__concept-panel__diagram { display: block; width: 100%; aspect-ratio: 1.24; padding: .5rem 1rem; }
.concept-path { stroke: rgb(236 253 255 / .86); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 7 14; animation: concept-flow 2.1s linear infinite; }
.concept-path--two { stroke: rgb(190 250 255 / .8); animation-duration: 1.75s; animation-direction: reverse; }
.concept-path--three { stroke: rgb(255 255 255 / .66); animation-duration: 2.45s; }
.concept-node { fill: rgb(246 253 255 / .85); stroke: rgb(114 222 239 / .96); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.concept-node--input { animation: concept-input-stage 9.6s ease-in-out infinite; }
.concept-node--process { fill: rgb(39 108 205 / .8); stroke: rgb(229 253 255 / .95); animation: concept-process-stage 9.6s ease-in-out infinite; }
.concept-node--output { animation: concept-output-stage 9.6s ease-in-out infinite; }
.concept-mark { stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero__concept-panel__stages { position: relative; height: 4.8rem; margin: -.5rem 1rem 0; overflow: hidden; border-top: 1px solid rgb(225 253 255 / .42); }
.concept-stage { position: absolute; inset: .82rem 0 auto; display: grid; gap: .25rem; opacity: 0; transform: translateY(.7rem); color: rgb(23 53 104 / .9); animation: concept-stage-cycle 9.6s cubic-bezier(.16, 1, .3, 1) infinite; }
.concept-stage b { font-size: 1.03rem; letter-spacing: -.025em; }
.concept-stage span { font-size: .74rem; line-height: 1.42; color: rgb(24 36 77 / .72); }
.concept-stage--two { animation-delay: 3.2s; }
.concept-stage--three { animation-delay: 6.4s; }
.hero__concept-panel__progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: .38rem; padding: 0 1rem 1rem; }
.hero__concept-panel__progress i { height: .2rem; border-radius: 999px; background: rgb(225 253 255 / .45); animation: concept-progress-cycle 9.6s linear infinite; }
.hero__concept-panel__progress i:nth-child(2) { animation-delay: 3.2s; }
.hero__concept-panel__progress i:nth-child(3) { animation-delay: 6.4s; }
@keyframes concept-flow { to { stroke-dashoffset: -42; } }
@keyframes concept-stage-cycle { 0%, 4% { opacity: 0; transform: translateY(.7rem); } 9%, 28% { opacity: 1; transform: translateY(0); } 33%, 100% { opacity: 0; transform: translateY(-.5rem); } }
@keyframes concept-progress-cycle { 0%, 7% { background: rgb(225 253 255 / .45); transform: scaleX(.82); } 10%, 32% { background: rgb(37 114 208 / .88); transform: scaleX(1); } 35%, 100% { background: rgb(225 253 255 / .45); transform: scaleX(.82); } }
@keyframes concept-input-stage { 0%, 8% { transform: scale(1); filter: brightness(1); } 12%, 30% { transform: scale(1.28); filter: brightness(1.25); } 34%, 100% { transform: scale(1); filter: brightness(1); } }
@keyframes concept-process-stage { 0%, 34% { transform: scale(1); filter: brightness(1); } 42%, 62% { transform: scale(1.28); filter: brightness(1.3); } 67%, 100% { transform: scale(1); filter: brightness(1); } }
@keyframes concept-output-stage { 0%, 66% { transform: scale(1); filter: brightness(1); } 75%, 95% { transform: scale(1.28); filter: brightness(1.3); } 100% { transform: scale(1); filter: brightness(1); } }
.hero__case-panel {
  overflow: hidden;
  border: 1px solid rgb(225 253 255 / .64);
  background: rgb(241 249 255 / .25);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .46), inset 0 0 2.75rem rgb(80 220 255 / .14);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
  clip-path: polygon(8% 0, 100% 0, 100% 92%, 91% 100%, 0 100%, 0 8%);
}
.hero__case-panel__head {
  min-height: 3rem;
  padding: .8rem 1rem .55rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.hero__case-panel__index {
  color: rgb(16 52 123 / .9);
  font-size: .74rem;
  font-weight: 760;
  letter-spacing: .1em;
}
.hero__case-panel__rule { flex: 1; height: 1px; background: rgb(222 249 255 / .62); }
.hero__case-panel__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-top: 1px solid rgb(225 253 255 / .44);
  border-bottom: 1px solid rgb(225 253 255 / .44);
  background: rgb(225 240 250 / .7);
}
.hero__case-panel__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  background: rgb(247 250 252 / .82);
}
.hero__case-panel__image--active { z-index: 1; opacity: 1; }
.hero__case-panel__image--next { z-index: 2; opacity: 0; }
.hero__case-panel__copy { min-height: 7.6rem; padding: 1rem 1rem .8rem; }
.hero__case-panel__copy b { display: block; color: var(--ink); font-size: clamp(1.18rem, 1.55vw, 1.5rem); letter-spacing: -.035em; }
.hero__case-panel__copy p { margin: .45rem 0 0; color: rgb(24 36 77 / .74); font-size: .78rem; line-height: 1.62; }
.hero__case-panel__controls { padding: 0 1rem 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.hero__case-panel__controls button {
  min-height: 2rem;
  border: 1px solid rgb(26 72 158 / .26);
  background: rgb(248 252 255 / .18);
  color: rgb(17 54 125 / .78);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.hero__case-panel__controls button[aria-pressed="true"],
.hero__case-panel__controls button:hover,
.hero__case-panel__controls button:focus-visible {
  border-color: rgb(225 253 255 / .78);
  background: rgb(17 69 168 / .7);
  color: #fff;
  transform: translateY(-1px);
}
.hero__case-panel__controls button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero h1 { margin: 0; letter-spacing: -.055em; }
.hero__eyebrow, .hero__name { display: inline; color: var(--ink); font-size: clamp(4rem, 6.25vw, 6.4rem); font-weight: 790; line-height: .92; text-shadow: 0 1px 0 #fff, 0 .45rem 2.2rem rgb(24 36 77 / .12); }
.hero__eyebrow { letter-spacing: -.055em; animation: copy-rise 720ms ease-out both; }
.hero__name { display: inline-block; min-width: 56%; font-size: clamp(6.8rem, 10.2vw, 10.25rem); letter-spacing: -.075em; animation: copy-rise 760ms 80ms ease-out both; }
.hero__role { display: block; }
.hero__role { max-width: 9.6em; margin-top: clamp(1rem, 1.7vw, 1.55rem); color: var(--blue); font-size: clamp(2rem, 3.15vw, 3rem); font-weight: 700; line-height: 1.13; text-shadow: 0 1px 0 #fff, 0 .5rem 1.8rem rgb(40 76 160 / .12); animation: copy-rise 780ms 160ms ease-out both; }
.hero__role-line { display: block; }
.hero__intro { max-width: 34rem; margin: clamp(1.35rem, 2vw, 1.9rem) 0 0; color: rgb(24 36 77 / .82); font-size: clamp(.96rem, 1.05vw, 1.1rem); line-height: 1.82; }
.hero__name[data-scramble-state="typing"], .hero__role-line[data-scramble-state="typing"], .hero__intro[data-scramble-state="typing"] { text-shadow: 0 0 .45rem rgb(222 255 255 / .78), 0 0 1.15rem rgb(75 193 255 / .34); }
.hero__name[data-scramble-state="typing"]::after, .hero__role-line[data-scramble-state="typing"]::after, .hero__intro[data-scramble-state="typing"]::after { content: "_"; display: inline-block; margin-left: .08em; color: #eaffff; font-weight: 520; text-shadow: 0 0 .7rem #68e7ff; animation: scramble-caret 360ms steps(2, end) infinite; }
.hero__role-line[data-scramble-state="typing"], .hero__intro[data-scramble-state="typing"] { color: rgb(20 69 165 / .92); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.button {
  min-height: 2.8rem;
  padding: .65rem 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 1px solid var(--blue);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 650;
  letter-spacing: .025em;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button--primary { color: #fff; background: var(--blue); box-shadow: 0 .75rem 1.5rem rgb(40 76 160 / .16); }
.button--primary:hover, .button--primary:focus-visible { background: var(--blue-deep); }
.button--quiet { background: rgb(250 251 253 / .45); }
.button--quiet:hover, .button--quiet:focus-visible { color: #fff; background: var(--blue); }

.cases { position: relative; padding: clamp(1.75rem, 2.5vw, 2.5rem) 0 clamp(5rem, 8vw, 8rem); background: rgb(249 250 252 / .98); }
.section-intro { display: grid; grid-template-columns: minmax(20rem, .74fr) minmax(8rem, .52fr) minmax(26rem, 1.7fr); align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.section-intro::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 1px; background: var(--line-strong); }
.section-intro > p:first-child { margin: 0 0 .35rem; color: var(--blue); font-size: .72rem; font-weight: 730; letter-spacing: .18em; }
.section-intro h2 { grid-column: 1; margin: 0; font-size: clamp(2rem, 3vw, 3rem); line-height: 1; letter-spacing: -.05em; }
.section-intro > p:last-child { grid-column: 3; grid-row: 1 / span 2; max-width: 51rem; margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.75; }
.case-stage { display: grid; grid-template-columns: minmax(22rem, .73fr) minmax(0, 1.27fr); gap: clamp(1rem, 1.5vw, 1.5rem); min-height: 31rem; }
.case-grid { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.case {
  min-width: 0;
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-columns: 2.2rem clamp(7.5rem, 10vw, 9.25rem) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.case:last-child { border-bottom: 1px solid var(--line); }
.case:hover, .case:focus-visible, .case[aria-current="true"] { z-index: 1; border-color: var(--line-strong); outline: none; background: rgb(231 239 251 / .58); transform: translateX(.25rem); }
.case__image { position: relative; isolation: isolate; grid-column: 2; overflow: hidden; contain: paint; border: 1px solid rgb(33 58 122 / .1); border-radius: .9rem; aspect-ratio: 1.8 / 1; background: #eef2f6; }
.case[data-case-tone="meal"] .case__image { --case-flow-a: rgb(238 152 88 / .55); --case-flow-b: rgb(72 119 210 / .52); --case-edge: rgb(204 133 82 / .5); background: #f1e8d7; }
.case[data-case-tone="community"] .case__image { --case-flow-a: rgb(51 181 164 / .56); --case-flow-b: rgb(58 130 211 / .5); --case-edge: rgb(51 154 149 / .5); background: #dfeee9; }
.case[data-case-tone="intelligence"] .case__image { --case-flow-a: rgb(101 104 205 / .56); --case-flow-b: rgb(55 159 217 / .5); --case-edge: rgb(82 112 196 / .5); background: #e1e8f5; }
.case__image::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -36%;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 30%, var(--case-flow-a, rgb(91 146 202 / .5)) 0%, transparent 44%),
    linear-gradient(118deg, transparent 12%, var(--case-flow-b, rgb(92 159 206 / .48)) 48%, transparent 82%);
  background-size: 132% 132%, 176% 176%;
  background-position: 0% 30%, 0% 50%;
  mix-blend-mode: normal;
  opacity: .48;
  transform: translate3d(-9%, -3%, 0) scale(1.13);
  animation: case-thumbnail-flow 9s ease-in-out infinite alternate;
  transition: opacity 360ms ease;
  box-shadow: inset 0 0 0 1px var(--case-edge, rgb(72 119 210 / .45));
  will-change: transform, opacity;
}
.case:nth-child(2) .case__image::after { animation-duration: 11s; animation-delay: -3s; }
.case:nth-child(3) .case__image::after { animation-duration: 13s; animation-delay: -6s; }
.case__image img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform 700ms cubic-bezier(.16, 1, .3, 1), filter 280ms ease; }
.case:hover .case__image::after, .case:focus-visible .case__image::after, .case[aria-current="true"] .case__image::after { opacity: .68; }
.case:hover .case__image img, .case:focus-visible .case__image img { transform: scale(1.055); filter: saturate(1.06) contrast(1.02); }
.case__copy { grid-column: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem .75rem; }
.case__number { position: absolute; transform: translateX(calc(-1 * (3.2rem + clamp(7.5rem, 10vw, 9.25rem)))); font-size: 1rem; font-weight: 620; }
.case__copy b { grid-column: 1; font-size: clamp(1.08rem, 1.5vw, 1.4rem); line-height: 1.25; letter-spacing: -.025em; }
.case__arrow { grid-column: 2; grid-row: 1 / span 2; font-size: 1.15rem; }
.case__copy > span:last-child { grid-column: 1 / -1; max-width: 32rem; color: var(--ink-soft); font-size: .78rem; line-height: 1.5; }

.case-showcase { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(17rem, .8fr); overflow: hidden; border: 1px solid rgb(33 58 122 / .08); border-radius: var(--radius); background: rgb(244 247 251 / .9); box-shadow: 0 1.5rem 4rem rgb(25 55 122 / .09); }
.case-showcase__media { position: relative; isolation: isolate; min-height: 31rem; overflow: hidden; background: #eaf0f7; transition: background-color 560ms ease; }
.case-showcase__media[data-case-tone="meal"] { --showcase-flow-a: rgb(231 164 103 / .42); --showcase-flow-b: rgb(79 120 203 / .38); background: #ebe1cf; }
.case-showcase__media[data-case-tone="community"] { --showcase-flow-a: rgb(58 174 158 / .42); --showcase-flow-b: rgb(62 125 203 / .36); background: #d7e8e2; }
.case-showcase__media[data-case-tone="intelligence"] { --showcase-flow-a: rgb(91 100 203 / .4); --showcase-flow-b: rgb(55 153 213 / .36); background: #dce4f2; }
.case-showcase__media::before,
.case-showcase__media::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.case-showcase__media::before {
  z-index: 0;
  inset: -28%;
  background:
    radial-gradient(circle at 20% 24%, var(--showcase-flow-a, rgb(72 119 210 / .35)) 0%, transparent 43%),
    radial-gradient(circle at 78% 74%, var(--showcase-flow-b, rgb(61 160 205 / .32)) 0%, transparent 48%);
  opacity: .72;
  transform: translate3d(-4%, -2%, 0) scale(1.08);
  animation: showcase-color-breathe 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.case-showcase__media::after {
  z-index: 3;
  inset: 0;
  background: linear-gradient(120deg, var(--showcase-flow-a, rgb(72 119 210 / .2)) 0%, transparent 35%, var(--showcase-flow-b, rgb(61 160 205 / .18)) 74%, transparent 100%);
  background-size: 180% 180%;
  mix-blend-mode: normal;
  opacity: .24;
  animation: showcase-color-wash 16s ease-in-out infinite alternate;
}
.case-showcase__image { position: absolute; inset: clamp(.85rem, 1.8vw, 1.6rem); width: calc(100% - (2 * clamp(.85rem, 1.8vw, 1.6rem))); height: calc(100% - (2 * clamp(.85rem, 1.8vw, 1.6rem))); max-width: none; border: 1px solid rgb(33 58 122 / .12); border-radius: clamp(.85rem, 1.4vw, 1.2rem); background: #fff; box-shadow: 0 1.2rem 3rem rgb(25 55 122 / .14); object-fit: contain; object-position: center; }
.case-showcase__image--active { z-index: 1; opacity: 1; }
.case-showcase__image--next { z-index: 2; opacity: 0; }
.case-showcase__copy { padding: clamp(1.8rem, 2.2vw, 2.3rem) clamp(1.6rem, 1.9vw, 2rem); display: flex; flex-direction: column; justify-content: center; background: rgb(250 251 253 / .76); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.case-showcase__index { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.case-showcase__index span { font-size: 1.05rem; font-weight: 650; }
.case-showcase__index i { flex: 1; height: 1px; background: var(--line-strong); }
.case-showcase h3 { margin: 0; color: var(--blue); font-size: clamp(1.95rem, 2.45vw, 2.35rem); line-height: 1.12; letter-spacing: -.055em; }
.case-showcase p { margin: 1rem 0 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.8; }
.case-showcase__button { align-self: flex-start; min-height: 2.8rem; margin-top: 1.5rem; padding: .65rem 1.05rem; display: inline-flex; align-items: center; gap: 1rem; border: 1px solid var(--blue); border-radius: 999px; background: transparent; font-size: .82rem; cursor: pointer; transition: color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.case-showcase__button { text-decoration: none; }
.case-showcase__button:hover, .case-showcase__button:focus-visible { color: #fff; background: var(--blue); transform: translateY(-2px); }
.case-index-link { margin: 1rem 0 0; text-align: right; }
.case-index-link a { color: var(--blue); font-size: .82rem; text-underline-offset: .25em; }

.creative-showcase { margin-top: clamp(5rem, 9vw, 9rem); }
.creative-showcase__intro { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.4fr); gap: 1.4rem 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.creative-showcase__intro > p:first-child, .practice__copy > p:first-child, .direction__grid > div > p:first-child { margin: 0; color: var(--blue); font-size: .76rem; font-weight: 730; letter-spacing: .16em; }
.creative-showcase__intro h3 { grid-column: 1; margin: 0; font-size: clamp(2rem, 3.1vw, 3.2rem); line-height: 1.08; letter-spacing: -.05em; }
.creative-showcase__intro > p:last-child { grid-column: 2; grid-row: 1 / span 2; max-width: 48rem; margin: 0; color: var(--ink-soft); line-height: 1.8; }
.creative-grid { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.creative-video { overflow: hidden; display: grid; grid-template-rows: auto 1fr; border: 1px solid rgb(33 58 122 / .12); border-radius: 1.4rem; background: rgb(255 255 255 / .7); text-decoration: none; transition: transform 240ms ease, box-shadow 240ms ease; }
.creative-video:hover, .creative-video:focus-visible { transform: translateY(-.45rem); box-shadow: 0 1.5rem 3rem rgb(24 54 120 / .12); }
.creative-video__image { overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-blue); }
.creative-video__image img { width: 100%; height: 100%; object-fit: cover; }
.creative-video__copy { padding: 1.35rem; display: grid; gap: .7rem; }
.creative-video__copy small { color: var(--blue); }
.creative-video__copy b { font-size: 1.35rem; line-height: 1.2; }
.creative-video__copy > span { color: var(--ink-soft); font-size: .82rem; }
.creative-series { margin-top: 1rem; }
.creative-series > a { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(20rem, .88fr); border: 1px solid rgb(33 58 122 / .12); border-radius: 1.4rem; background: rgb(255 255 255 / .7); text-decoration: none; }
.creative-series img { width: 100%; height: clamp(20rem, 28vw, 26rem); object-fit: cover; object-position: center 52%; }
.creative-series > a > span { padding: clamp(1.5rem, 3vw, 3rem); display: flex; flex-direction: column; justify-content: center; gap: .9rem; }
.creative-series h4 { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.8rem); line-height: 1.12; }
.creative-series p, .creative-series span span, .creative-note { color: var(--ink-soft); line-height: 1.75; }
.creative-series p { margin: 0; }
.creative-note { margin: .8rem 0 0; font-size: .78rem; }

.about, .method, .practice, .direction { padding: clamp(5rem, 9vw, 9rem) 0; border-top: 1px solid rgb(33 58 122 / .1); }
.about { background: #eef3f8; }
.about__grid { display: grid; grid-template-columns: minmax(8rem, .3fr) minmax(0, 1.7fr); gap: 2rem; }
.about__label { color: var(--blue); font-size: .78rem; font-weight: 720; letter-spacing: .18em; }
.about__sheet { display: grid; grid-template-columns: minmax(18rem, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); }
.about__sheet h2, .method__heading h2, .practice__copy h2, .direction__grid h2 { margin: 0; font-size: clamp(2.3rem, 4.1vw, 4.5rem); line-height: 1.04; letter-spacing: -.06em; }
.method__title-line { display: block; }
.section-intro [data-scramble-text], .creative-showcase__intro [data-scramble-text], .about__sheet [data-scramble-text], .method__heading [data-scramble-text], .practice__copy [data-scramble-text], .direction__grid [data-scramble-text] { position: relative; }
.section-intro [data-scramble-state="typing"], .creative-showcase__intro [data-scramble-state="typing"], .about__sheet [data-scramble-state="typing"], .practice__copy [data-scramble-state="typing"], .direction__grid [data-scramble-state="typing"] { text-shadow: 0 0 .45rem rgb(213 249 255 / .82), 0 0 1rem rgb(74 177 240 / .2); }
.method__heading [data-scramble-state="typing"] { color: #fff; text-shadow: 0 0 .45rem rgb(216 251 255 / .84), 0 0 1rem rgb(76 211 255 / .42); }
.section-intro [data-scramble-state="typing"]::after, .creative-showcase__intro [data-scramble-state="typing"]::after, .about__sheet [data-scramble-state="typing"]::after, .method__heading [data-scramble-state="typing"]::after, .practice__copy [data-scramble-state="typing"]::after, .direction__grid [data-scramble-state="typing"]::after { content: "_"; display: inline-block; margin-left: .08em; color: currentColor; opacity: .85; animation: scramble-caret 360ms steps(2, end) infinite; }
.about__copy { color: var(--ink-soft); line-height: 1.9; }
.about__copy > p:first-child { margin-top: 0; }
.about__facts { margin-top: 2rem; border-top: 1px solid var(--line); }
.about__facts p { margin: 0; padding: .9rem 0; display: grid; grid-template-columns: 7rem 1fr; border-bottom: 1px solid var(--line); }
.about__facts b { color: var(--ink); }

.method { position: relative; isolation: isolate; overflow: hidden; background: #1d377c; color: #fff; }
.method::before,
.method::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.method::before {
  z-index: 0;
  inset: -28% -18%;
  background:
    radial-gradient(ellipse at 18% 22%, rgb(65 107 188 / .8) 0%, rgb(47 84 162 / .34) 32%, transparent 60%),
    radial-gradient(ellipse at 82% 74%, rgb(29 111 139 / .58) 0%, rgb(36 82 144 / .22) 38%, transparent 66%),
    linear-gradient(118deg, #182e70 4%, #253f88 42%, #174c76 72%, #1b326f 100%);
  opacity: .92;
  transform: translate3d(-1.8%, -.8%, 0) scale(1.03);
  animation: method-gradient-drift 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.method::after {
  z-index: 0;
  inset: -22% -14%;
  background: radial-gradient(ellipse at 56% 38%, rgb(116 157 213 / .2) 0%, transparent 58%);
  mix-blend-mode: screen;
  opacity: .52;
  transform: translate3d(1.4%, .6%, 0) scale(1.02);
  animation: method-mist-drift 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.method > .page-wrap { position: relative; z-index: 1; }
body:not([data-scene="hero"]) .hero::before,
body:not([data-scene="hero"]) .hero::after,
body:not([data-scene="hero"]) .hero__line-field,
body:not([data-scene="hero"]) .hero__line-field img,
body:not([data-scene="hero"]) .hero__compute-heatmap,
body:not([data-scene="hero"]) .hero__showcase-panel,
body:not([data-scene="cases"]) .case__image::after,
body:not([data-scene="cases"]) .case-showcase__media::before,
body:not([data-scene="cases"]) .case-showcase__media::after,
body:not([data-scene="method"]) .method::before,
body:not([data-scene="method"]) .method::after { animation-play-state: paused; }
.method__heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .72fr); gap: 4rem; align-items: end; }
.method__heading p { margin: 0; color: rgb(255 255 255 / .72); line-height: 1.85; }
.method__heading strong { display: block; margin-top: 1rem; color: #fff; }
.method__steps { margin-top: 4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.method__steps article { min-height: 22rem; padding: 1.7rem; border: 1px solid rgb(255 255 255 / .18); border-radius: 1.2rem; background: rgb(255 255 255 / .07); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.method-step__graphic { height: 6rem; display: block; margin-bottom: 2rem; }
.method-step__graphic svg { width: 100%; height: 100%; stroke: #b8e8f3; stroke-width: 1.4; }
.method__steps b { display: block; font-size: 1.35rem; line-height: 1.35; }
.method__steps p { color: rgb(255 255 255 / .68); line-height: 1.8; }

.practice { background: var(--paper); }
.practice__grid { display: grid; grid-template-columns: minmax(18rem, .56fr) minmax(0, 1.44fr); gap: clamp(2rem, 5vw, 5rem); }
.practice__copy > p:nth-of-type(2) { color: var(--ink-soft); line-height: 1.8; }
.practice__link { width: 3rem; height: 3rem; margin-top: 1.5rem; display: grid; place-items: center; border: 1px solid var(--blue); border-radius: 50%; text-decoration: none; }
.practice__gallery { min-width: 0; }
.practice__controls { display: flex; justify-content: flex-end; gap: .6rem; margin-bottom: .8rem; }
.practice__control { width: 2.8rem; height: 2.8rem; border: 1px solid var(--blue); border-radius: 50%; background: transparent; cursor: pointer; }
.practice__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(20rem, 42%); gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.practice__rail figure { margin: 0; overflow: hidden; border-radius: 1rem; aspect-ratio: 4 / 3; scroll-snap-align: start; background: var(--paper-blue); }
.practice__rail img { width: 100%; height: 100%; object-fit: cover; }

.direction { padding-bottom: 3rem; background: #eaf0f7; }
.direction__grid { display: grid; grid-template-columns: minmax(20rem, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 6rem); }
.direction__grid ul { margin: 0; padding: 0; display: grid; gap: .8rem; list-style: none; }
.direction__grid li { padding: 1.25rem; display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: rgb(255 255 255 / .48); }
.service-card__icon { display: grid; place-items: center; }
.service-card__icon svg { width: 3.6rem; height: 3.6rem; stroke: var(--blue); stroke-width: 1.5; }
.direction__grid li b { display: block; margin-bottom: .4rem; color: var(--ink); }
.direction__grid li > span:last-child { color: var(--ink-soft); line-height: 1.7; }
.contact { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: .5fr 1.5fr auto auto; gap: 1rem; align-items: baseline; }
.contact p { margin: 0; }
.contact a { color: var(--blue); }
.site-footer { padding: 1.4rem 0; color: rgb(255 255 255 / .68); background: var(--ink); font-size: .76rem; }
.site-footer .page-wrap { display: flex; justify-content: space-between; gap: 1rem; }

@keyframes hero-gradient-drift {
  0% { background-size: 62% 54%, 58% 70%, 72% 60%, 54% 66%, 68% 62%, 100% 100%; background-position: 100% 0%, 100% 100%, 34% 100%, 100% 38%, 60% 18%, 50% 50%; transform: translate3d(-3%, -1.5%, 0) scale(1.03); filter: blur(7px) hue-rotate(-12deg) saturate(.98); opacity: .96; }
  48% { background-size: 92% 80%, 86% 96%, 108% 90%, 76% 88%, 98% 82%, 112% 108%; background-position: 86% 24%, 80% 76%, 56% 76%, 82% 48%, 76% 42%, 58% 50%; transform: translate3d(1.5%, 2.4%, 0) scale(1.08); filter: blur(13px) hue-rotate(4deg) saturate(1.3); opacity: 1; }
  100% { background-size: 80% 96%, 104% 88%, 96% 106%, 88% 104%, 82% 98%, 106% 114%; background-position: 74% 42%, 62% 54%, 78% 34%, 44% 70%, 42% 64%, 70% 50%; transform: translate3d(4%, -1%, 0) scale(1.06); filter: blur(9px) hue-rotate(17deg) saturate(1.16); opacity: .98; }
}
@keyframes hero-mist-drift {
  from { background-size: 68% 64%, 56% 50%, 52% 56%, 66% 60%; background-position: 0% 30%, 48% 0%, 100% 100%, 76% 48%; transform: translate3d(2%, 1%, 0) scale(1.03); filter: blur(13px) hue-rotate(-5deg); opacity: .46; }
  to { background-size: 98% 86%, 88% 76%, 86% 82%, 108% 90%; background-position: 24% 48%, 70% 22%, 74% 70%, 44% 74%; transform: translate3d(-3%, -2%, 0) scale(1.09); filter: blur(22px) hue-rotate(11deg); opacity: .68; }
}
@keyframes method-gradient-drift {
  0% { transform: translate3d(-5%, -2%, 0) scale(1.08); filter: saturate(.88); }
  52% { transform: translate3d(.8%, 3%, 0) scale(1.12); filter: saturate(1.06); }
  100% { transform: translate3d(5%, -1.5%, 0) scale(1.08); filter: saturate(.94); }
}
@keyframes method-mist-drift {
  from { transform: translate3d(4%, 1.5%, 0) scale(1.06); opacity: .38; }
  to { transform: translate3d(-4%, -2.5%, 0) scale(1.12); opacity: .62; }
}
@keyframes case-thumbnail-flow {
  from { background-position: 0% 24%, 0% 42%; transform: translate3d(-9%, -3%, 0) scale(1.13); opacity: .38; }
  to { background-position: 100% 76%, 100% 58%; transform: translate3d(9%, 3%, 0) scale(1.19); opacity: .64; }
}
@keyframes showcase-color-breathe {
  from { transform: translate3d(-4%, -2%, 0) scale(1.08); opacity: .58; }
  to { transform: translate3d(4%, 2.5%, 0) scale(1.13); opacity: .84; }
}
@keyframes showcase-color-wash {
  from { background-position: 0% 35%; opacity: .16; }
  to { background-position: 100% 65%; opacity: .34; }
}
@keyframes copy-rise {
  from { opacity: 0; transform: translateY(.8rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scramble-caret { 50% { opacity: 0; } }

@media (max-width: 1040px) {
  :root { --page-width: min(94vw, 900px); }
  .brand, .site-nav a { font-size: .74rem; }
  .site-nav { gap: .85rem; }
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .8fr); gap: clamp(1.5rem, 4vw, 3rem); }
  .hero__copy { width: 100%; }
  .section-intro { grid-template-columns: minmax(18rem, .85fr) minmax(0, 1.15fr); }
  .section-intro::after { display: none; }
  .section-intro > p:last-child { grid-column: 2; }
  .case-stage { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(7rem, auto)); }
  .case { grid-template-columns: 2rem minmax(7rem, 9rem) minmax(0, 1fr); padding: .9rem; }
  .case__number { position: static; transform: none; grid-column: 1; grid-row: 1; }
  .case__image { grid-column: 2; }
  .case__copy { grid-column: 3; }
  .case__copy > span:last-child { display: none; }
  .case-showcase, .case-showcase__media { min-height: 28rem; }
  .creative-showcase__intro, .about__sheet, .method__heading { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr 2fr; }
}

@media (max-width: 760px) {
  :root { --header-height: 4rem; --page-width: calc(100vw - 2rem); }
  .site-nav { display: none; }
  .brand { font-size: .76rem; }
  .hero, .hero__grid { min-height: 42rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__line-field { inset: 12% -58% -12% -18%; opacity: .72; }
  .hero__compute-heatmap { inset: 27% -54% -8% -14%; opacity: .5; }
  .hero__showcase-panel, .hero__concept-panel, .hero__slideshow-panel { display: none; }
  .hero__copy { width: 100%; min-height: 40rem; margin-top: 0; padding: 2rem 1.5rem; justify-content: flex-start; background: linear-gradient(90deg, rgb(248 251 252 / .9) 0%, rgb(248 251 252 / .66) 64%, transparent 100%); }
  .hero__eyebrow, .hero__name { font-size: clamp(3.45rem, 17vw, 4.75rem); }
  .hero__name { min-width: 0; font-size: clamp(4rem, 16vw, 5.2rem); letter-spacing: -.07em; }
  .hero__role { max-width: 9.5em; font-size: clamp(2rem, 10vw, 2.7rem); }
  .hero__intro { max-width: 21rem; font-size: .9rem; line-height: 1.75; }
  .actions { margin-top: 1.25rem; gap: .65rem; }
  .button { min-height: 2.65rem; padding-inline: .9rem; font-size: .78rem; }
  .cases { padding-top: 2.8rem; }
  .section-intro { grid-template-columns: 1fr; gap: .75rem; }
  .section-intro::after { display: none; }
  .section-intro h2, .section-intro > p:last-child { grid-column: 1; grid-row: auto; }
  .section-intro > p:last-child { font-size: .83rem; }
  .case-stage { min-height: 0; }
  .case-grid { grid-template-columns: 1fr; }
  .case { grid-template-columns: 2rem 6.4rem minmax(0, 1fr); min-height: 6.6rem; }
  .case-showcase { grid-template-columns: 1fr; }
  .case-showcase__media { min-height: 15rem; aspect-ratio: 16 / 9; }
  .case-showcase__copy { min-height: 18rem; padding: 1.5rem; }
  .case-showcase h3 { font-size: 2.2rem; }
  .creative-showcase__intro, .about__grid, .about__sheet, .method__heading, .practice__grid, .direction__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .creative-showcase__intro > p:last-child { grid-column: 1; grid-row: auto; }
  .creative-grid, .method__steps { grid-template-columns: 1fr; }
  .creative-series > a { grid-template-columns: 1fr; }
  .creative-series img { height: auto; aspect-ratio: 4 / 3; }
  .method__steps article { min-height: auto; }
  .practice__rail { grid-auto-columns: 86%; }
  .direction__grid li { grid-template-columns: 3.8rem 1fr; }
  .contact { grid-template-columns: 1fr; margin-top: 3rem; }
  .site-footer .page-wrap { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
  .hero::before, .hero::after, .hero__line-field, .hero__line-field img, .hero__compute-heatmap, .hero__compute-heatmap video, .hero__concept-panel *, .hero__slideshow-panel *, .method::before, .method::after, .case__image::after, .case-showcase__media::before, .case-showcase__media::after { animation: none !important; transform: none !important; }
  .hero__compute-heatmap { display: none !important; }
  .hero__line-field img { opacity: .68 !important; filter: saturate(.94) brightness(1.08) !important; }
  .case-showcase__image { filter: none !important; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .case-showcase__copy, .method__steps article { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header { background: #f8f9fc; }
  .hero__copy { background: transparent; }
  .hero::before, .hero::after, .case__image::after, .case-showcase__media::before, .case-showcase__media::after { mix-blend-mode: normal; opacity: .2 !important; }
  .hero__line-field, .hero__compute-heatmap, .hero__showcase-panel, .hero__concept-panel, .hero__slideshow-panel { display: none; }
  .case-showcase__copy { background: #fafbfd; }
  .method::after { display: none; }
  .method__steps article { background: #294482; }
}