/* Jost, SIL Open Font License 1.1; see assets/fonts/Jost-OFL.txt. */
@font-face {
  font-family: 'Jost';
  src: url('assets/fonts/Jost-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


:root{--wine:#830626;--wine-dark:#60001b;--pink:#FCDCDD;--paper:#fcf7f5;--ink:#26151b;--line:#c7b6b7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit}::selection{background:var(--wine);color:white}.header{height:78px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;border-bottom:1px solid var(--line);background:var(--paper);z-index:5}.logo{font:800 33px/1 'DM Sans',sans-serif;letter-spacing:-.08em;white-space:nowrap}.logo span{color:var(--wine)}.header nav{display:flex;gap:36px;text-transform:uppercase;font-size:12px;font-weight:800}.header nav a:hover{color:var(--wine)}.nav-cta{padding:14px 18px;border:1px solid currentColor;border-radius:35px;text-transform:uppercase;font-size:11px;font-weight:800;white-space:nowrap}.nav-cta:hover{background:var(--wine);color:white}.menu-toggle{display:none;border:0;background:transparent;font-size:24px}.hero{min-height:680px;background:var(--pink);padding:38px 4vw 55px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.hero-meta,.section-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.hero-meta{display:flex;justify-content:space-between}.hero h1{font:800 clamp(96px,16.9vw,270px)/.83 'DM Sans',sans-serif;letter-spacing:-.108em;margin:55px 0 40px;white-space:nowrap}.hero h1 span{font-weight:400;font-size:.73em}.hero h1 i{display:inline-block;font-style:normal;margin-left:18%}.hero-bottom{display:flex;align-items:end;justify-content:space-between;gap:20px}.hero-bottom p{font-size:clamp(19px,2.1vw,31px);font-weight:700;line-height:1.42;letter-spacing:-.04em;max-width:750px;margin:0}.hero-down{width:76px;height:76px;display:grid;place-items:center;border:1px solid var(--wine);color:var(--wine);border-radius:50%;font-size:40px;flex:none}.section{padding:96px 4vw 105px}.section-label{padding-top:14px;border-top:1px solid currentColor;margin-bottom:65px}.approach-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:8vw;align-items:start}.approach h2,.team h2,.work h2,.contact h2{letter-spacing:-.075em}.approach h2{font-size:clamp(65px,8vw,135px);line-height:.94;margin:0}.approach h2 em,.contact h2 em{font-family:Georgia,serif;font-weight:400}.approach-grid>p{font-size:clamp(19px,1.85vw,26px);line-height:1.6;letter-spacing:-.03em;margin:5px 0 0}.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:70px}.services article{background:#f1e8e6;padding:28px;min-height:310px}.services article>span{font-size:12px;font-weight:800;color:var(--wine)}.services h3{font-size:clamp(28px,3.2vw,50px);letter-spacing:-.06em;line-height:1.06;margin:52px 0 18px}.services p{font-size:14px;line-height:1.65;margin:0;max-width:440px}.stats{background:var(--wine);color:var(--paper)}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}.stats-grid>div{border-top:1px solid #cf9daa;padding-top:25px;display:flex;flex-direction:column;gap:22px}.stats-grid strong{font:800 clamp(72px,9vw,145px)/.9 'DM Sans',sans-serif;letter-spacing:-.09em;color:var(--pink)}.stats-grid span{font-size:13px;line-height:1.6;max-width:240px}.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.person-photo{aspect-ratio:1.15/1;background:#e9d7d5;overflow:hidden}.person-photo img{width:100%;height:100%;object-fit:cover}.person-name{border-bottom:1px solid var(--line);padding:24px 0 20px;display:flex;justify-content:space-between;gap:20px;align-items:end}.person-name h2{font-size:clamp(40px,4.2vw,66px);line-height:1;margin:0}.person-name span{font-size:11px;font-weight:800;letter-spacing:.05em;text-align:right}.person ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px;font-size:15px;line-height:1.5}.work{background:#f3e8e7}.work-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:26px}.work-heading h2{font-size:clamp(54px,10vw,150px);line-height:1;margin:0}.work-heading span{font-size:11px;font-weight:800;letter-spacing:.08em;white-space:nowrap;margin-bottom:15px}.case-layout{display:grid;grid-template-columns:1.05fr .95fr;min-height:500px}.case-image{background:#e9d8d8;min-height:440px;overflow:hidden}.case-image img{width:100%;height:100%;object-fit:contain}.case-summary{background:var(--wine-dark);color:white;padding:40px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px}.case-summary p{font-size:clamp(16px,1.5vw,21px);line-height:1.6;margin:0}.case-summary a{border:1px solid var(--pink);color:var(--pink);font-size:12px;font-weight:800;text-transform:uppercase;padding:18px 23px;margin-top:12px}.case-summary a:hover{background:var(--pink);color:var(--wine)}.case-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--line);margin-top:35px;padding-top:23px}.case-metrics div{display:flex;flex-direction:column;gap:10px}.case-metrics b{font-size:clamp(34px,4vw,65px);line-height:1.1;letter-spacing:-.06em}.case-metrics span{font-size:12px;line-height:1.5}.contact{background:var(--pink);padding:90px 4vw 100px}.contact>span{font-size:12px;font-weight:800;letter-spacing:.1em}.contact h2{font-size:clamp(70px,11vw,175px);line-height:.91;margin:60px 0}.contact>a{display:inline-block;background:var(--wine);color:white;padding:20px 27px;border-radius:40px;font-size:13px;font-weight:800;text-transform:uppercase}footer{padding:25px 4vw;background:var(--wine-dark);color:white;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:11px;font-weight:700}footer .logo{font-size:26px}footer .logo span{color:var(--pink)}
/* Case study: same editorial system */.case-hero-modern{background:var(--pink);padding:55px 4vw 75px;display:grid;grid-template-columns:1fr .7fr;gap:35px}.case-hero-copy{min-width:0}.back-link,.section-kicker{font-size:12px;text-transform:uppercase;font-weight:800;letter-spacing:.08em}.back-link{display:block;margin-bottom:75px}.case-hero-copy h1{font-size:clamp(57px,7vw,120px);letter-spacing:-.075em;line-height:.98;margin:20px 0 30px}.case-hero-copy p{font-size:clamp(18px,2vw,27px);line-height:1.5}.case-hero-image{min-width:0;background:#f0e1e1}.case-hero-image img{width:100%;height:100%;max-height:630px;object-fit:contain}.case-copy-section .intro-note-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px}.case-copy-section .big-copy{font-size:clamp(19px,2vw,28px);line-height:1.5}.support-copy{font-size:17px;line-height:1.7;margin:0}.timeline-section.dark-surface{background:var(--wine-dark);color:white}.timeline-section.light-surface{background:#f1e4e3}.timeline-section h2,.results-section h2{font-size:clamp(43px,6vw,90px);letter-spacing:-.07em;margin:0}.timeline-section .section-top,.results-section .section-top,.case-copy-section .section-top{display:flex;gap:25px;align-items:start;margin-bottom:45px}.section-index{font-size:13px;font-weight:800;min-width:50px}.detail-list article{display:grid;grid-template-columns:60px 1fr;gap:25px;border-top:1px solid #bfa3a8;padding:28px 0}.detail-list article>span{font-weight:800;font-size:12px}.detail-list h3{font-size:clamp(23px,2.6vw,42px);letter-spacing:-.05em;margin:0 0 15px}.detail-list p{font-size:15px;line-height:1.7;max-width:1000px;margin:0}.final-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.final-grid>div{padding:27px;min-height:225px;background:#f1e4e3;display:flex;justify-content:space-between;flex-direction:column}.final-grid b{font-size:clamp(58px,7vw,100px);line-height:1;letter-spacing:-.07em}.final-grid p{font-size:14px;line-height:1.5;margin:0}.compact-contact h2{font-size:clamp(65px,9vw,130px);letter-spacing:-.075em;margin:50px 0}
@media(max-width:1000px){.hero h1{font-size:16vw}.work-heading{display:block}.work-heading span{display:block;margin-top:12px}.case-layout{grid-template-columns:1fr}.case-image{height:500px}.case-summary{min-height:300px}.approach-grid{gap:35px}.case-hero-modern{grid-template-columns:1fr}}
@media(max-width:700px){.header{height:64px;padding:0 5vw;gap:12px}.header nav{display:none;position:absolute;top:63px;left:0;right:0;background:var(--paper);padding:23px 5vw;flex-direction:column;border-bottom:1px solid var(--line)}.header nav.open{display:flex}.nav-cta{font-size:9px;padding:11px}.menu-toggle{display:block}.hero{min-height:590px;padding:25px 5vw 43px}.hero-meta span:last-child{display:none}.hero h1{font-size:19vw;letter-spacing:-.1em;margin:110px 0 70px}.hero h1 i{margin-left:4%}.hero-bottom p{font-size:18px;max-width:270px}.hero-down{width:48px;height:48px;font-size:26px}.section{padding:67px 5vw 75px}.section-label{margin-bottom:45px}.approach-grid{grid-template-columns:1fr}.approach h2{font-size:68px}.approach-grid>p{font-size:18px}.services{grid-template-columns:1fr;margin-top:45px}.services article{min-height:auto}.services h3{margin:25px 0 16px;font-size:37px}.stats-grid{grid-template-columns:1fr 1fr;gap:32px 18px}.stats-grid strong{font-size:65px}.stats-grid span{font-size:11px}.team-grid{grid-template-columns:1fr;gap:48px}.person-name{align-items:start}.person-name h2{font-size:48px}.person-name span{font-size:9px}.work-heading h2{font-size:12vw}.case-image{height:350px;min-height:350px}.case-summary{padding:28px}.case-summary p{font-size:16px}.case-metrics{grid-template-columns:1fr 1fr;gap:30px}.case-metrics b{font-size:35px}.contact{padding:70px 5vw}.contact h2{font-size:16vw}.case-hero-modern{padding:40px 5vw 60px}.case-hero-copy h1{font-size:13vw}.back-link{margin-bottom:45px}.case-hero-image{min-height:300px}.case-copy-section .intro-note-grid{grid-template-columns:1fr}.timeline-section .section-top,.results-section .section-top,.case-copy-section .section-top{gap:15px}.detail-list article{grid-template-columns:30px 1fr;gap:12px}.detail-list h3{font-size:25px}.detail-list p{font-size:14px}.final-grid{grid-template-columns:1fr 1fr}.final-grid>div{padding:20px;min-height:170px}.final-grid b{font-size:44px}footer{padding:22px 5vw}footer span:nth-child(2){display:none}}

/* Targeted changes to the agreed first-version layout */
.hero,.hero-meta,.hero h1,.hero-bottom p{color:var(--wine)}
.person-name{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px}
.person-name span{text-align:left;font-size:11px;letter-spacing:.055em;color:var(--wine)}
.work-heading{align-items:flex-start;margin-bottom:30px}
.work-heading span{margin-top:12px;margin-bottom:0}
.no-case-image{grid-template-columns:1fr 1fr;min-height:380px}
.case-title-panel{padding:45px 30px 45px 0;display:flex;flex-direction:column;justify-content:center;min-width:0}
.case-title-panel>span{font:800 clamp(42px,6.2vw,105px)/.95 'DM Sans',sans-serif;letter-spacing:-.08em;color:var(--wine);overflow-wrap:anywhere}
.case-title-panel small{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--wine);margin-top:22px}
.case-metrics{border:0;padding:0;margin-top:30px;gap:14px}
.case-metrics>div{aspect-ratio:1.05 / 1;border:1px solid #deb6c0;background:#f9eded;padding:clamp(16px,2vw,32px);justify-content:space-between;gap:30px;min-width:0}
.case-metrics b{font-size:clamp(26px,3.2vw,55px);color:var(--wine);overflow-wrap:anywhere}
.case-metrics span{font-size:13px;color:var(--wine)}
@media(max-width:1000px){.no-case-image{grid-template-columns:1fr 1fr}.case-title-panel>span{font-size:6vw}}
@media(max-width:700px){.person-name{gap:7px}.person-name span{font-size:11px}.work-heading span{font-size:10px}.no-case-image{grid-template-columns:1fr}.case-title-panel{padding:20px 0 35px}.case-title-panel>span{font-size:12vw}.case-summary{min-height:0}.case-metrics{grid-template-columns:1fr 1fr;gap:10px}.case-metrics>div{padding:16px;aspect-ratio:1 / 1}.case-metrics b{font-size:clamp(23px,7vw,43px)}.case-metrics span{font-size:11px}}

/* Typography refresh — geometric Cyrillic pairing inspired by Ziyad Askar.
   Display: Unbounded, body and UI: Onest. No third-party font file bundled. */
body, button, input, textarea, select {font-family:'Onest',Arial,sans-serif;}
.logo, .hero h1, .stats-grid strong, .case-title-panel>span,
.approach h2, .team h2, .work h2, .contact h2,
.services h3, .person-name h2, .case-metrics b,
.case-hero-copy h1, .timeline-section h2, .results-section h2,
.detail-list h3, .final-grid b {font-family:'Unbounded','Onest',sans-serif;}
/* Lighter typography for the approach section. */
.approach h2,
.approach .services h3 {
  font-family:'Onest',Arial,sans-serif;
}
.approach h2 {
  font-weight:700;
  letter-spacing:-.055em;
  line-height:1.02;
}
.approach h2 em {
  font-family:inherit;
  font-weight:inherit;
  font-style:normal;
}
.approach .services h3 {
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.12;
}
.approach .section-label,
.approach .services article>span {
  font-weight:500;
}
.hero h1 {font-size:clamp(68px,12.5vw,210px);letter-spacing:-.095em;line-height:.98;}
.hero h1 i {margin-left:12%;}
.work-heading h2 {font-size:clamp(43px,7.4vw,108px);letter-spacing:-.085em;overflow-wrap:anywhere;}
.case-title-panel>span{font-size:clamp(39px,5.2vw,82px);letter-spacing:-.085em;}
.case-metrics b{font-size:clamp(25px,2.8vw,46px);letter-spacing:-.055em;line-height:1.15;}
.person-name h2{font-size:clamp(34px,3.7vw,57px);letter-spacing:-.07em;}
@media(max-width:700px){
 .hero h1{font-size:clamp(55px,15.5vw,105px);letter-spacing:-.09em;}
 .hero h1 i{margin-left:3%;}
 .work-heading h2{font-size:9.5vw;}
 .case-title-panel>span{font-size:9vw;}
 .case-metrics b{font-size:clamp(20px,5vw,35px);}
 .person-name h2{font-size:42px;}
}

/* Case heading removed; keep the single Astrostori identity in the case content. */
.work { padding-top: 42px; }
@media (max-width: 600px) { .work { padding-top: 30px; } }

.case-section-label { color: #830626; margin-bottom: 30px; }

/* Hero: flowing pink-marble colour field with tactile film grain. */
.hero {
  position: relative;
  isolation: isolate;
  background: #f7c8d4;
  color: #830626;
  animation: none;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;
  inset: -42%;
  background:
    conic-gradient(from 24deg at 42% 42%,
       #fce0e4 0deg, #f8a3c1 35deg, #e35d97 78deg,
       #f8c8d6 130deg, #fae7e4 179deg, #d76592 225deg,
       #f8aac4 268deg, #fce0e4 360deg),
    radial-gradient(ellipse at 75% 70%, #ffd6df 5%, #ae285e 50%, transparent 78%);
  background-blend-mode: screen;
  filter: blur(25px) saturate(1.35) contrast(1.15);
  opacity: .92;
  transform-origin: 50% 50%;
  animation: pink-marble-flow 13s ease-in-out infinite alternate;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background-image:
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
     repeating-radial-gradient(ellipse at 36% 47%,
       transparent 0 48px, rgba(255,240,240,.21) 58px 72px,
       rgba(117,0,43,.09) 85px 99px, transparent 115px 163px);
  background-size: 180px 180px, 110% 130%;
  mix-blend-mode: soft-light;
  opacity: .48;
  animation: tactile-grain .36s steps(3) infinite, marble-ripple 10s ease-in-out infinite alternate;
}
.hero-meta, .hero h1, .hero-bottom { position:relative; z-index:1; }
@keyframes pink-marble-flow {
  0%   {transform:translate3d(-13%, -7%,0) rotate(-22deg) scale(1.06);}
  30%  {transform:translate3d(5%, -12%,0) rotate(10deg) scale(1.18);}
  65%  {transform:translate3d(-6%, 11%,0) rotate(48deg) scale(1.12);}
  100% {transform:translate3d(12%, 4%,0) rotate(87deg) scale(1.22);}
}
@keyframes tactile-grain {
  0% { background-position:0 0, 50% 50%; }
  33% { background-position:-22px 16px, 53% 46%; }
  66% { background-position:17px -14px, 47% 56%; }
  100% { background-position:-9px -23px, 55% 43%; }
}
@keyframes marble-ripple {
  0% { background-size:180px 180px, 100% 130%; }
  100% { background-size:180px 180px, 165% 150%; }
}
@media(prefers-reduced-motion:reduce) {
 .hero::before,.hero::after {animation:none;}
}


/* HERO REFERENCE-LIKE FLUID ANIMATION */
.hero{
  position:relative;
  min-height:680px;
  background:#f6f1f2;
  isolation:isolate;
  overflow:hidden;
}
.hero > *:not(.hero-bg){
  position:relative;
  z-index:2;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(180deg,#f7f3f4 0%,#f5f0f2 100%);
}
.hero-blob{
  position:absolute;
  display:block;
  filter: blur(30px);
  transform-origin:center;
  will-change:transform,border-radius,opacity;
}
.hero-blob.blob-soft{
  width:38vw;
  min-width:360px;
  height:88vh;
  left:-7vw;
  top:-18vh;
  background:linear-gradient(180deg, rgba(255,249,250,0.96) 0%, rgba(241,226,232,0.85) 28%, rgba(229,204,214,0.62) 58%, rgba(245,233,237,0.14) 100%);
  border-radius:39% 61% 42% 58% / 14% 46% 54% 86%;
  mix-blend-mode:multiply;
  opacity:.95;
  animation: heroSoft 11s ease-in-out infinite alternate;
}
.hero-blob.blob-dark{
  width:12vw;
  min-width:110px;
  height:95vh;
  left:7vw;
  top:14vh;
  background:linear-gradient(180deg, rgba(35,0,14,0.98) 0%, rgba(20,0,8,0.98) 38%, rgba(55,0,16,0.92) 72%, rgba(200,136,158,0.18) 100%);
  border-radius:52% 48% 50% 50% / 10% 78% 22% 90%;
  filter: blur(18px);
  mix-blend-mode:multiply;
  animation: heroDark 8.5s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.hero-blob.blob-core{
  width:30vw;
  min-width:320px;
  height:46vh;
  right:18vw;
  top:27vh;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,131,187,0.88) 0%, rgba(255,131,187,0.55) 16%, rgba(55,0,15,0) 42%),
    radial-gradient(circle at 43% 34%, rgba(121,0,28,0.98) 0%, rgba(24,0,8,0.98) 28%, rgba(164,0,44,0.92) 54%, rgba(255,64,118,0.72) 74%, rgba(255,214,227,0.10) 100%);
  border-radius:48% 52% 44% 56% / 27% 39% 61% 73%;
  filter: blur(24px) saturate(118%);
  mix-blend-mode:multiply;
  animation: heroCore 9s ease-in-out infinite alternate;
}
.hero-blob.blob-tail{
  width:24vw;
  min-width:230px;
  height:68vh;
  right:8vw;
  top:43vh;
  background:linear-gradient(180deg, rgba(255,104,141,0.94) 0%, rgba(188,14,65,0.94) 34%, rgba(160,0,36,0.90) 56%, rgba(247,193,205,0.48) 79%, rgba(247,193,205,0.02) 100%);
  border-radius:34% 66% 64% 36% / 20% 28% 72% 80%;
  filter: blur(24px);
  mix-blend-mode:multiply;
  animation: heroTail 10s ease-in-out infinite alternate;
}
.hero-grain{
  position:absolute;
  inset:-20%;
  opacity:.16;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E");
  background-size:220px 220px;
  animation: heroGrain .45s steps(3) infinite;
}
.hero-meta,.hero h1,.hero-bottom p{color:var(--wine)}
.hero-down{background:rgba(246,241,242,.48);backdrop-filter: blur(4px)}
@keyframes heroSoft{
  0%{transform:translate3d(-2%, -4%, 0) rotate(-9deg) scale(1);border-radius:39% 61% 42% 58% / 14% 46% 54% 86%;}
  50%{transform:translate3d(5%, 2%, 0) rotate(-2deg) scale(1.07);border-radius:50% 50% 36% 64% / 18% 38% 62% 82%;}
  100%{transform:translate3d(2%, 7%, 0) rotate(6deg) scale(1.02);border-radius:42% 58% 48% 52% / 12% 52% 48% 88%;}
}
@keyframes heroDark{
  0%{transform:translate3d(0, -3%, 0) rotate(6deg) scale(1);border-radius:52% 48% 50% 50% / 10% 78% 22% 90%;}
  50%{transform:translate3d(10%, 6%, 0) rotate(-3deg) scale(1.08);border-radius:43% 57% 56% 44% / 18% 70% 30% 82%;}
  100%{transform:translate3d(-2%, 12%, 0) rotate(10deg) scale(.98);border-radius:58% 42% 47% 53% / 12% 83% 17% 88%;}
}
@keyframes heroCore{
  0%{transform:translate3d(0, -3%, 0) rotate(-8deg) scale(1);border-radius:48% 52% 44% 56% / 27% 39% 61% 73%;}
  50%{transform:translate3d(-8%, 7%, 0) rotate(9deg) scale(1.1);border-radius:42% 58% 60% 40% / 22% 47% 53% 78%;}
  100%{transform:translate3d(5%, 12%, 0) rotate(-2deg) scale(1.03);border-radius:57% 43% 51% 49% / 25% 38% 62% 75%;}
}
@keyframes heroTail{
  0%{transform:translate3d(3%, -6%, 0) rotate(14deg) scale(1);border-radius:34% 66% 64% 36% / 20% 28% 72% 80%;}
  50%{transform:translate3d(-7%, 6%, 0) rotate(4deg) scale(1.1);border-radius:28% 72% 57% 43% / 19% 22% 78% 81%;}
  100%{transform:translate3d(5%, 15%, 0) rotate(17deg) scale(1.02);border-radius:39% 61% 69% 31% / 24% 25% 75% 76%;}
}
@keyframes heroGrain{
  0%{transform:translate(0,0)}
  25%{transform:translate(12px,-10px)}
  50%{transform:translate(-9px,12px)}
  75%{transform:translate(8px,8px)}
  100%{transform:translate(-11px,-7px)}
}
@media (max-width:900px){
  .hero-blob.blob-core{right:10vw;top:30vh;width:42vw;}
  .hero-blob.blob-tail{right:2vw;width:30vw;}
}
@media (max-width:700px){
  .hero-bg{inset:0}
  .hero-blob.blob-soft{width:62vw;left:-18vw;top:-8vh;}
  .hero-blob.blob-dark{left:2vw;width:18vw;min-width:80px;height:78vh;top:23vh;}
  .hero-blob.blob-core{width:46vw;min-width:220px;right:10vw;top:30vh;height:32vh;}
  .hero-blob.blob-tail{width:32vw;min-width:160px;right:0;top:46vh;height:50vh;}
  .hero-grain{opacity:.14}
}
@media (prefers-reduced-motion: reduce){
  .hero-blob,.hero-grain{animation:none}
}

/* Two soft, round, continuously morphing fluid forms — selected reference version. */
.hero-blob.blob-dark{
  width:clamp(310px,32vw,560px);
  min-width:0;
  height:clamp(310px,37vw,590px);
  left:7%;top:22%;
  background:
    radial-gradient(ellipse at 34% 26%, rgba(247,147,183,.88) 0%,rgba(192,44,94,.61) 24%,transparent 48%),
    radial-gradient(ellipse at 48% 55%,#23000d 0%,#430018 34%,#830626 58%,rgba(239,91,143,.77) 77%,transparent 100%);
  border-radius:48% 52% 50% 50% / 52% 46% 54% 48%;
  filter:blur(29px) saturate(120%);
  animation:heroRoundLeft 9s ease-in-out infinite alternate;
}
.hero-blob.blob-core{
  width:clamp(300px,34vw,580px);
  min-width:0;
  height:clamp(310px,37vw,590px);
  right:9%;top:14%;
  border-radius:51% 49% 48% 52% / 48% 53% 47% 52%;
  animation:heroRoundRight 10s ease-in-out infinite alternate;
}
.hero-blob.blob-tail{display:none}
@keyframes heroRoundLeft{
  0%{transform:translate3d(-7%,-5%,0) rotate(-10deg) scale(1);border-radius:48% 52% 50% 50% / 52% 46% 54% 48%;}
  50%{transform:translate3d(10%,9%,0) rotate(14deg) scale(1.15);border-radius:56% 44% 46% 54% / 46% 56% 44% 54%;}
  100%{transform:translate3d(-1%,15%,0) rotate(-16deg) scale(.95);border-radius:43% 57% 54% 46% / 55% 45% 53% 47%;}
}
@keyframes heroRoundRight{
  0%{transform:translate3d(4%,-7%,0) rotate(12deg) scale(.96);border-radius:51% 49% 48% 52% / 48% 53% 47% 52%;}
  50%{transform:translate3d(-12%,12%,0) rotate(-18deg) scale(1.12);border-radius:43% 57% 55% 45% / 56% 44% 49% 51%;}
  100%{transform:translate3d(6%,0,0) rotate(20deg) scale(1.04);border-radius:57% 43% 45% 55% / 47% 58% 42% 53%;}
}
@media(max-width:900px){
 .hero-blob.blob-dark{left:-12%;top:24%;width:55vw;height:55vw;min-width:250px;min-height:250px}
 .hero-blob.blob-core{right:-10%;top:16%;width:56vw;height:56vw;min-width:250px;min-height:250px}
}
@media (prefers-reduced-motion:reduce){.hero-blob.blob-dark,.hero-blob.blob-core{animation:none}}
/* Keep the header on the very same animation, with no separate backing panel. */
.header{position:absolute;top:0;left:0;width:100%;background:transparent;border-bottom:0;z-index:10;color:var(--wine)}
.hero{padding-top:122px;min-height:780px}
@media(max-width:700px){.hero{padding-top:98px;min-height:650px}.header nav{background:var(--paper)}}


/* Single continuously traveling and morphing fluid shape. */
.hero-blob.blob-soft,.hero-blob.blob-dark,.hero-blob.blob-tail{display:none!important}
.hero-blob.blob-core{
  display:block!important;
  left:calc(50% - min(28vw,350px));
  right:auto;
  top:calc(49% - min(25vw,310px));
  width:clamp(350px,55vw,760px);
  height:clamp(320px,48vw,660px);
  border-radius:50%;
  filter:blur(33px) saturate(135%);
  opacity:.96;
  background:
    radial-gradient(ellipse at 27% 22%,rgba(255,213,230,.95) 0%,rgba(243,112,165,.79) 23%,transparent 50%),
    radial-gradient(ellipse at 52% 50%,#26000c 0%,#4a001b 28%,#830626 50%,#cc1f67 70%,rgba(249,143,185,.88) 85%,rgba(253,219,230,.14) 100%);
  transform-origin:50% 50%;
  animation:singleFluidJourney 13s linear infinite!important;
  will-change:transform,border-radius;
}
@keyframes singleFluidJourney{
  0% {transform:translate3d(-29%,-24%,0) rotate(-20deg) scale(1,1);border-radius:50% 50% 50% 50% / 50% 50% 50% 50%;}
  12%{transform:translate3d(4%,-35%,0) rotate(8deg) scale(1.35,.78);border-radius:58% 42% 51% 49% / 43% 57% 43% 57%;}
  25%{transform:translate3d(39%,-12%,0) rotate(42deg) scale(.80,1.36);border-radius:47% 53% 39% 61% / 62% 40% 60% 38%;}
  38%{transform:translate3d(53%,27%,0) rotate(85deg) scale(1.19,.81);border-radius:62% 38% 57% 43% / 42% 61% 39% 58%;}
  52%{transform:translate3d(3%,34%,0) rotate(135deg) scale(.78,.76);border-radius:44% 56% 51% 49% / 55% 45% 56% 44%;}
  65%{transform:translate3d(-40%,28%,0) rotate(185deg) scale(1.45,.75);border-radius:56% 44% 41% 59% / 46% 54% 41% 59%;}
  78%{transform:translate3d(-52%,-1%,0) rotate(260deg) scale(.86,1.30);border-radius:43% 57% 61% 39% / 61% 39% 49% 51%;}
  90%{transform:translate3d(-43%,-30%,0) rotate(314deg) scale(1.18,.88);border-radius:53% 47% 46% 54% / 46% 53% 47% 54%;}
  100%{transform:translate3d(-29%,-24%,0) rotate(340deg) scale(1,1);border-radius:50% 50% 50% 50% / 50% 50% 50% 50%;}
}
@media(max-width:700px){
 .hero-blob.blob-core{left:calc(50% - 195px);top:calc(50% - 185px);width:390px;height:390px;min-width:0;min-height:0;}
}
@media(prefers-reduced-motion:reduce){.hero-blob.blob-core{animation:none!important;transform:none}}


/* BLUE / WHITE IDENTITY — matched to the supplied visual references. */
:root {
  --wine:#113dc8;
  --wine-dark:#081a79;
  --pink:#eef4ff;
  --paper:#fbfcff;
  --ink:#101b48;
  --line:#cad4ea;
}
body {background:#fbfcff;color:var(--ink)}
.header {color:#0c2d96}
.header nav a:hover {color:#123cf0}
.nav-cta {border-color:#17359a}
.nav-cta:hover {background:#153ee0;color:white}
.hero {background:#fafcff; color:#102d99; min-height:780px}
.hero-bg {background:linear-gradient(125deg,#fff 0%,#fcfdff 52%,#f7faff 100%)}
.hero-meta,.hero h1,.hero-bottom p {color:#102e9b}
.hero-down {color:#1238d2;border-color:#1238d2;background:rgba(255,255,255,.48)}
.hero-blob.blob-core {
  left:calc(50% - min(25vw,320px));top:calc(51% - min(24vw,300px));
  width:clamp(330px,52vw,690px);height:clamp(310px,43vw,580px);
  opacity:.97;
  border-radius:52% 48% 53% 47% / 47% 51% 49% 53%;
  background:
    radial-gradient(ellipse at 76% 78%,rgba(0,198,255,.96) 0%,rgba(0,126,255,.7) 19%, transparent 51%),
    radial-gradient(ellipse at 21% 26%,rgba(147,215,255,.92) 0%,rgba(25,133,253,.65) 24%,transparent 53%),
    radial-gradient(ellipse at 55% 48%,#0c1257 0%,#161979 22%,#1a29b0 45%,#0058ed 71%,rgba(86,192,255,.57) 88%,transparent 100%);
  filter:blur(35px) saturate(135%);
  mix-blend-mode:multiply;
  animation:blueOrbDrift 33s cubic-bezier(.44,.03,.56,.97) infinite!important;
}
.hero-grain {
  opacity:.24;
  mix-blend-mode:multiply;
  animation:none;
}
@keyframes blueOrbDrift {
  0%,100% {transform:translate3d(-21%,-11%,0) rotate(-13deg) scale(1.03,.94);border-radius:52% 48% 53% 47% / 47% 51% 49% 53%;}
  17% {transform:translate3d(22%,-23%,0) rotate(15deg) scale(.87,1.18);border-radius:58% 42% 45% 55% / 41% 57% 43% 59%;}
  34% {transform:translate3d(38%,7%,0) rotate(36deg) scale(1.21,.83);border-radius:44% 56% 60% 40% / 58% 43% 57% 42%;}
  51% {transform:translate3d(5%,30%,0) rotate(4deg) scale(.98,1.10);border-radius:53% 47% 44% 56% / 46% 60% 40% 54%;}
  68% {transform:translate3d(-35%,18%,0) rotate(-28deg) scale(1.16,.86);border-radius:59% 41% 55% 45% / 55% 43% 57% 45%;}
  84% {transform:translate3d(-42%,-15%,0) rotate(-15deg) scale(.91,1.17);border-radius:48% 52% 60% 40% / 41% 54% 46% 59%;}
}
.services article {background:#edf2ff}
.services article>span,.person-name span,.case-section-label,.case-title-panel>span,.case-title-panel small,.case-metrics b,.case-metrics span {color:#1234bf}
.stats {background:#10279e;color:#f4f7ff}
.stats-grid>div {border-top-color:#7898df}
.stats-grid strong {color:#f8fbff}
.person-photo {background:#e7edfb}
.work {background:#f0f4fe}
.case-summary {background:#0b2083;color:#fff}
.case-summary a {color:#fff;border-color:#fff}
.case-summary a:hover {background:white;color:#0b2083}
.case-metrics>div {background:#fff;border-color:#ccd8f7}
.contact {background:#112a9f;color:white}
.contact a {border-color:#f4f7ff;color:#fff}
.contact a:hover {background:white;color:#10279e}
footer {background:#0b185c;color:white}
.case-hero-modern,.timeline-section,.results-section,.case-copy-section {color:var(--ink)}
.case-hero-copy,.case-hero-image {background:#f0f4ff}
.dark-surface {background:#0c217f;color:white}
.light-surface {background:#f0f4ff}
.final-grid>div {background:#edf2ff}
@media(max-width:700px) {
  .hero-blob.blob-core {left:calc(50% - 195px);top:calc(50% - 185px);width:390px;height:390px}
  .header nav {background:#fbfcff}
}
@media(prefers-reduced-motion:reduce) {.hero-blob.blob-core {animation:none!important}}



/* GRAPHITE + BLUE RECOLOR */
:root{
  --paper:#f5f5f3;
  --paper-soft:#efefed;
  --paper-panel:#fbfbfa;
  --ink:#55565f;
  --ink-soft:#70727b;
  --line:#d8d9de;
  --blue:#2240dc;
  --blue-deep:#1427ab;
  --blue-soft:#34c4ff;
  --blue-dark:#101a7c;
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:Onest, Arial, sans-serif;
}
::selection{background:var(--blue);color:#fff}
.header{
  background:var(--paper);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.logo{color:var(--ink)}
.logo span{color:var(--blue)}
.header nav a:hover,.services article>span,.person-name span{color:var(--blue-deep)}
.nav-cta{
  color:var(--ink);
  border-color:var(--ink);
  background:rgba(255,255,255,0.55);
}
.nav-cta:hover{background:var(--blue);border-color:var(--blue);color:#fff}

.hero{
  min-height:680px;
  background:linear-gradient(180deg,#f7f7f6 0%,#f3f3f2 100%);
  position:relative;
}
.hero-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:linear-gradient(180deg,#f7f7f6 0%,#f2f2f1 100%);
}
.hero-meta,
.hero h1,
.hero-bottom p{
  color:var(--ink);
}
.hero-down{
  border-color:var(--ink);
  color:var(--ink);
  background:rgba(255,255,255,0.35);
}
.hero-blob.blob-core{
  width:min(34vw,560px);
  min-width:310px;
  height:min(47vh,520px);
  left:52%;
  top:24%;
  background:
    radial-gradient(circle at 52% 17%, rgba(79,220,255,0.95) 0%, rgba(79,220,255,0.52) 12%, rgba(79,220,255,0) 28%),
    radial-gradient(circle at 68% 70%, rgba(30,170,255,0.88) 0%, rgba(30,170,255,0.52) 18%, rgba(30,170,255,0) 42%),
    radial-gradient(circle at 33% 49%, rgba(23,35,164,0.99) 0%, rgba(23,35,164,0.99) 31%, rgba(18,29,137,0.96) 53%, rgba(26,56,201,0.92) 72%, rgba(66,198,255,0.28) 100%);
  border-radius:50% 50% 56% 44% / 42% 40% 60% 58%;
  filter:blur(31px) saturate(118%);
  opacity:.98;
  mix-blend-mode:normal;
  animation:heroBlobDrift 32s ease-in-out infinite, heroBlobMorph 12s ease-in-out infinite alternate;
}
.hero-grain{
  opacity:.11;
  mix-blend-mode:multiply;
  animation:heroGrain 1.1s steps(2) infinite;
}

.section,
.contact,
.work,
.case-hero-modern,
.timeline-section.light-surface,
.final-grid>div,
.services article,
.person-photo,
.case-hero-image,
.case-image{
  background:var(--paper-soft);
}
.section-label,
.approach h2,
.team h2,
.work h2,
.contact h2,
.person-name h2,
.case-title-panel span,
.case-copy-section h2,
.timeline-section h2,
.results-section h2,
.case-hero-copy h1,
.final-grid b,
.case-metrics b{
  color:var(--ink);
}
.approach-grid>p,
.services p,
.person ul,
.support-copy,
.detail-list p,
.case-summary p,
.final-grid p,
.case-metrics span,
.stats-grid span{
  color:var(--ink-soft);
}
.services article,
.final-grid>div,
.case-hero-image,
.case-image,
.person-photo{
  background:var(--paper-panel);
}
.services h3,.case-summary p,.case-hero-copy p,.detail-list h3{color:var(--ink)}
.stats{
  background:linear-gradient(180deg,var(--blue-dark) 0%, var(--blue-deep) 100%);
  color:#eef5ff;
}
.stats-grid>div{border-top:1px solid rgba(255,255,255,.22)}
.stats-grid strong{color:#eef5ff}
.work{background:var(--paper-soft)}
.case-title-panel{
  background:var(--paper-panel);
  color:var(--ink);
}
.case-title-panel small,
.work-heading span,
.case-section-label,
.section-kicker,
.back-link,
.section-index{
  color:var(--ink-soft);
}
.case-summary{
  background:linear-gradient(180deg,var(--blue-deep) 0%, var(--blue-dark) 100%);
  color:#fff;
}
.case-summary a{
  border-color:#dce9ff;
  color:#fff;
}
.case-summary a:hover{background:#fff;color:var(--blue-deep)}
.case-metrics{border-top:1px solid var(--line)}
.case-metrics b{color:var(--ink)}
.contact{
  background:var(--paper-soft);
}
.contact>a{
  background:var(--blue);
  color:#fff;
}
footer{
  background:#f1f2f4;
  color:var(--ink-soft);
}
footer .logo{color:var(--ink)}
footer .logo span{color:var(--blue)}
.case-hero-modern{background:var(--paper-soft)}
.timeline-section.dark-surface{background:linear-gradient(180deg,var(--blue-dark) 0%, var(--blue-deep) 100%);color:#fff}
.timeline-section.light-surface{background:var(--paper-panel)}
.detail-list article{border-top:1px solid rgba(255,255,255,.22)}
.timeline-section.light-surface .detail-list article{border-top:1px solid var(--line)}
.timeline-section.light-surface .detail-list p{color:var(--ink-soft)}
.timeline-section.light-surface .detail-list h3{color:var(--ink)}

@keyframes heroBlobDrift{
  0%{transform:translate3d(25vw,-42vh,0) rotate(-11deg) scale(1);}
  16%{transform:translate3d(-13vw,-44vh,0) rotate(-5deg) scale(1.04);}
  34%{transform:translate3d(-59vw,-29vh,0) rotate(5deg) scale(.98);}
  50%{transform:translate3d(-75vw,13vh,0) rotate(12deg) scale(1.05);}
  68%{transform:translate3d(-53vw,31vh,0) rotate(8deg) scale(1.02);}
  84%{transform:translate3d(17vw,27vh,0) rotate(-4deg) scale(1.03);}
  100%{transform:translate3d(25vw,-42vh,0) rotate(-11deg) scale(1);}
}
@keyframes heroBlobMorph{
  0%{width:min(34vw,560px);height:min(47vh,520px);border-radius:50% 50% 56% 44% / 42% 40% 60% 58%;}
  20%{width:min(39vw,620px);height:min(39vh,450px);border-radius:61% 39% 49% 51% / 53% 31% 69% 47%;}
  40%{width:min(31vw,500px);height:min(52vh,590px);border-radius:43% 57% 64% 36% / 30% 59% 41% 70%;}
  60%{width:min(42vw,650px);height:min(35vh,410px);border-radius:58% 42% 41% 59% / 63% 30% 70% 37%;}
  80%{width:min(29vw,480px);height:min(48vh,540px);border-radius:46% 54% 37% 63% / 38% 63% 37% 62%;}
  100%{width:min(34vw,560px);height:min(47vh,520px);border-radius:50% 50% 56% 44% / 42% 40% 60% 58%;}
}
@media(max-width:900px){
  .hero-blob.blob-core{left:45%; top:26%; min-width:250px; width:42vw; height:38vh;}
}
@media(max-width:700px){
  .header nav{background:var(--paper)}
  .hero{background:linear-gradient(180deg,#f7f7f6 0%,#f3f3f2 100%)}
  .hero-blob.blob-core{left:32%; top:33%; width:55vw; min-width:200px; height:28vh; filter:blur(24px)}
  @keyframes heroBlobMorph{
    0%{width:52vw;height:28vh;border-radius:50% 50% 56% 44% / 42% 40% 60% 58%;}
    20%{width:63vw;height:22vh;border-radius:61% 39% 49% 51% / 53% 31% 69% 47%;}
    40%{width:46vw;height:33vh;border-radius:43% 57% 64% 36% / 30% 59% 41% 70%;}
    60%{width:66vw;height:20vh;border-radius:58% 42% 41% 59% / 63% 30% 70% 37%;}
    80%{width:44vw;height:31vh;border-radius:46% 54% 37% 63% / 38% 63% 37% 62%;}
    100%{width:52vw;height:28vh;border-radius:50% 50% 56% 44% / 42% 40% 60% 58%;}
  }
}



/* HERO HEADER ON SHARED ANIMATED BACKGROUND + NEON NAVY */
:root{
  --ink:#131936;
  --ink-soft:#131936;
  --line:rgba(19,25,54,.14);
  --blue:#2240dc;
  --blue-deep:#1427ab;
  --blue-soft:#34c4ff;
  --blue-dark:#101a7c;
}
body{background:var(--paper);color:var(--ink)}
.header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:20;
  background:transparent;
  border-bottom:none;
  color:var(--ink);
}
.logo,
.hero-meta,
.hero h1,
.hero-bottom p,
.header nav a,
.nav-cta,
.menu-toggle,
.section-label,
.approach h2,
.team h2,
.work h2,
.contact h2,
.person-name h2,
.case-title-panel span,
.case-copy-section h2,
.timeline-section h2,
.results-section h2,
.case-hero-copy h1,
.final-grid b,
.case-metrics b,
.services h3,
.detail-list h3,
.case-metrics span,
.work-heading span,
.case-title-panel small,
.section-kicker,
.back-link,
.section-index,
.person-name span,
.approach-grid>p,
.services p,
.person ul,
.support-copy,
.detail-list p,
.final-grid p,
.stats-grid span,
.contact > span,
footer,
footer .logo,
.case-section-label{
  color:var(--ink);
}
.logo span{color:var(--blue)}
.hero{
  padding-top:132px;
}
.hero-down{
  border-color:var(--ink);
  color:var(--ink);
  background:rgba(255,255,255,.28);
}
.nav-cta{
  border-color:rgba(19,25,54,.6);
  background:rgba(255,255,255,.18);
}
.nav-cta:hover{
  background:rgba(255,255,255,.42);
  color:var(--ink);
  border-color:var(--ink);
}
.header nav a:hover{color:var(--ink);opacity:.7}
.section-label,
.person-name,
.case-metrics,
.timeline-section.light-surface .detail-list article,
.detail-list article,
.stats-grid>div{border-color:var(--line)}
.contact>a{
  background:var(--ink);
  color:#fff;
}
.case-summary{
  background:linear-gradient(180deg,var(--blue-deep) 0%, var(--blue-dark) 100%);
}
footer{
  background:#f1f2f4;
}
@media(max-width:700px){
  .header{
    height:64px;
    padding:0 5vw;
  }
  .header nav{
    top:63px;
    background:rgba(245,245,243,.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .hero{
    padding-top:108px;
  }
}

/* REFERENCE BLUE ORB: ORIGINAL IMAGE TEXTURE + FULL-CANVAS TRAVEL */
/* Only the animation layer changes. Original reference grain and blue tones are retained. */
.hero-bg{background:#f5f5f3;overflow:hidden}
.hero-blob.blob-core{
  position:absolute;
  right:auto;
  bottom:auto;
  left:42%;
  top:12%;
  width:clamp(320px,57vw,940px);
  height:auto;
  aspect-ratio:815 / 1060;
  min-width:0;
  background: url('assets/blue-orb-reference.png') center / contain no-repeat;
  filter:none;
  opacity:1;
  mix-blend-mode:normal;
  border-radius:44% 56% 57% 43% / 49% 44% 56% 51%;
  will-change:left,top,transform,border-radius;
  animation:refOrbTravel 48s linear infinite,refOrbBreathe 15s ease-in-out infinite alternate;
}
.hero-grain{opacity:.035;animation:none}
@keyframes refOrbTravel{
  0%{left:43%;top:12%}
  10%{left:67%;top:-34%}
  22%{left:10%;top:-42%}
  35%{left:-28%;top:-8%}
  46%{left:-20%;top:48%}
  59%{left:19%;top:63%}
  71%{left:71%;top:47%}
  84%{left:82%;top:-13%}
  94%{left:60%;top:-2%}
  100%{left:43%;top:12%}
}
@keyframes refOrbBreathe{
  0%{transform:rotate(-10deg) scale(1,1);border-radius:44% 56% 57% 43% / 49% 44% 56% 51%}
  25%{transform:rotate(7deg) scale(1.15,.87);border-radius:57% 43% 50% 50% / 42% 59% 41% 58%}
  55%{transform:rotate(-5deg) scale(.87,1.14);border-radius:38% 62% 44% 56% / 55% 40% 60% 45%}
  80%{transform:rotate(13deg) scale(1.13,.93);border-radius:55% 45% 60% 40% / 46% 55% 45% 54%}
  100%{transform:rotate(-10deg) scale(1,1);border-radius:44% 56% 57% 43% / 49% 44% 56% 51%}
}
@media(max-width:700px){
  .hero-blob.blob-core{width:92vw;min-width:0;left:30%;top:12%;height:auto;filter:none}
  @keyframes refOrbTravel{
    0%{left:30%;top:12%}
    12%{left:72%;top:-24%}
    25%{left:10%;top:-40%}
    37%{left:-53%;top:-8%}
    50%{left:-35%;top:47%}
    63%{left:8%;top:70%}
    76%{left:66%;top:46%}
    89%{left:75%;top:-18%}
    100%{left:30%;top:12%}
  }
}
@media(prefers-reduced-motion:reduce){.hero-blob.blob-core{animation:none}}



/* DEEP CHARCOAL + SMOOTHER ORB */
:root{
  --ink:#1B1F22;
  --ink-soft:#1B1F22;
  --line:rgba(27,31,34,.14);
}
body{color:var(--ink)}
.logo,
.hero-meta,
.hero h1,
.hero-bottom p,
.header nav a,
.nav-cta,
.menu-toggle,
.section-label,
.approach h2,
.team h2,
.work h2,
.contact h2,
.person-name h2,
.case-title-panel span,
.case-copy-section h2,
.timeline-section h2,
.results-section h2,
.case-hero-copy h1,
.final-grid b,
.case-metrics b,
.services h3,
.detail-list h3,
.case-metrics span,
.work-heading span,
.case-title-panel small,
.section-kicker,
.back-link,
.section-index,
.person-name span,
.approach-grid>p,
.services p,
.person ul,
.support-copy,
.detail-list p,
.final-grid p,
.stats-grid span,
.contact > span,
footer,
footer .logo,
.case-section-label,
.contact h2,
.contact h2 em{
  color:var(--ink);
}
.hero-down{
  color:var(--ink);
  border-color:rgba(27,31,34,.58);
}
.nav-cta{
  color:var(--ink);
  border-color:rgba(27,31,34,.48);
}
.nav-cta:hover{
  color:var(--ink);
  border-color:var(--ink);
}
.contact>a{background:var(--ink)}

/* keep the same blue orb, but make its edges much softer and motion smoother */
.hero-blob.blob-core{
  left:50%;
  top:50%;
  width:clamp(360px,57vw,940px);
  aspect-ratio:815 / 1060;
  height:auto;
  background:none;
  border-radius:0;
  opacity:1;
  transform:translate(-50%,-50%);
  will-change:transform;
  animation:refOrbFloatSmooth 62s cubic-bezier(.42,0,.58,1) infinite;
}
.hero-blob.blob-core::before,
.hero-blob.blob-core::after{
  content:"";
  position:absolute;
  inset:0;
  background:url('assets/blue-orb-reference.png') center / contain no-repeat;
  transform-origin:center;
  will-change:transform,filter,opacity;
}
.hero-blob.blob-core::before{
  filter:blur(22px) saturate(1.06);
  opacity:.94;
  animation:refOrbMorphSoft 18s ease-in-out infinite alternate;
}
.hero-blob.blob-core::after{
  filter:blur(10px) saturate(1.02);
  opacity:.82;
  animation:refOrbMorphDetail 24s ease-in-out infinite alternate;
}
.hero-grain{opacity:.02;animation:none}
@keyframes refOrbFloatSmooth{
  0%{transform:translate(-50%,-50%) translate(10vw,-14vh)}
  12%{transform:translate(-50%,-50%) translate(32vw,-30vh)}
  24%{transform:translate(-50%,-50%) translate(-8vw,-36vh)}
  38%{transform:translate(-50%,-50%) translate(-40vw,-8vh)}
  52%{transform:translate(-50%,-50%) translate(-30vw,26vh)}
  66%{transform:translate(-50%,-50%) translate(2vw,34vh)}
  80%{transform:translate(-50%,-50%) translate(34vw,14vh)}
  92%{transform:translate(-50%,-50%) translate(24vw,-16vh)}
  100%{transform:translate(-50%,-50%) translate(10vw,-14vh)}
}
@keyframes refOrbMorphSoft{
  0%{transform:scale(1,1) rotate(-8deg)}
  22%{transform:scale(1.12,.9) rotate(4deg)}
  48%{transform:scale(.9,1.13) rotate(-5deg)}
  74%{transform:scale(1.16,.94) rotate(10deg)}
  100%{transform:scale(1,1) rotate(-8deg)}
}
@keyframes refOrbMorphDetail{
  0%{transform:scale(.98,1.02) rotate(0deg)}
  20%{transform:scale(1.05,.96) rotate(-4deg)}
  50%{transform:scale(.94,1.08) rotate(5deg)}
  76%{transform:scale(1.08,.92) rotate(8deg)}
  100%{transform:scale(.98,1.02) rotate(0deg)}
}
@media(max-width:700px){
  .hero-blob.blob-core{width:92vw;animation:refOrbFloatSmoothMobile 56s cubic-bezier(.42,0,.58,1) infinite;}
  .hero-blob.blob-core::before{filter:blur(18px) saturate(1.06)}
  .hero-blob.blob-core::after{filter:blur(8px) saturate(1.02)}
  @keyframes refOrbFloatSmoothMobile{
    0%{transform:translate(-50%,-50%) translate(10vw,-8vh)}
    14%{transform:translate(-50%,-50%) translate(24vw,-22vh)}
    28%{transform:translate(-50%,-50%) translate(-8vw,-30vh)}
    42%{transform:translate(-50%,-50%) translate(-30vw,-6vh)}
    58%{transform:translate(-50%,-50%) translate(-22vw,26vh)}
    72%{transform:translate(-50%,-50%) translate(6vw,32vh)}
    86%{transform:translate(-50%,-50%) translate(24vw,12vh)}
    100%{transform:translate(-50%,-50%) translate(10vw,-8vh)}
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-blob.blob-core,.hero-blob.blob-core::before,.hero-blob.blob-core::after{animation:none}
}

/* Continuous organic orbit: preserve the original orb artwork and grain. */
.hero-blob.blob-core {
  left:50%; top:50%;
  width:clamp(360px,57vw,940px);
  height:auto;
  aspect-ratio:815 / 1060;
  animation:none !important;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.hero-blob.blob-core::before {
  opacity:.94;
  animation:orb-shape-a 24s ease-in-out infinite !important;
}
.hero-blob.blob-core::after {
  opacity:.82;
  animation:orb-shape-b 31s ease-in-out infinite !important;
}
@keyframes orb-shape-a {
  0%,100% { transform:rotate(-5deg) scale(1,1); }
  25% { transform:rotate(8deg) scale(1.27,.83); }
  50% { transform:rotate(-10deg) scale(.81,1.23); }
  75% { transform:rotate(5deg) scale(1.16,.91); }
}
@keyframes orb-shape-b {
  0%,100% { transform:rotate(3deg) scale(1.02,.98); }
  25% { transform:rotate(-7deg) scale(.85,1.2); }
  50% { transform:rotate(6deg) scale(1.23,.85); }
  75% { transform:rotate(-4deg) scale(.9,1.14); }
}
@media(max-width:700px){
  .hero-blob.blob-core { width:92vw; animation:none !important; }
}
@media(prefers-reduced-motion: reduce){
  .hero-blob.blob-core::before,.hero-blob.blob-core::after{animation:none !important}
}


/* Approved animation locked: ONLY text color changes. Pantone 2738 C sampled from reference: #080A33. */
:root { --ink:#080A33; --ink-soft:#080A33; }
body { color:#080A33; }
.header, .header .logo, .header .logo span, .header nav a, .nav-cta, .menu-toggle,
.hero-meta, .hero h1, .hero-bottom p, .hero-down,
.section-label, .approach h2, .approach-grid > p, .services h3, .services p,
.person-name h2, .person-name span, .person ul, .work h2,
.case-title-panel > span, .case-title-panel small, .case-section-label,
.case-metrics b, .case-metrics span, .contact > span, .contact h2,
.section-index, .section-kicker, .back-link,
.case-hero-copy h1, .case-hero-copy p, .timeline-section.light-surface h2,
.timeline-section.light-surface .detail-list h3,
.timeline-section.light-surface .detail-list p, .results-section h2,
.final-grid b, .final-grid p, footer, footer .logo { color:#080A33; }
.hero-down, .nav-cta { border-color:rgba(8,10,51,.64); }
.header nav a:hover, .nav-cta:hover { color:#080A33; }
@media(max-width:700px){ .header nav a {color:#080A33;} }

/* Targeted fix: a single coherent orb surface. All approved timing,
   positioning, palette and the primary deformation remain unchanged. */
.hero-blob.blob-core::before {
  opacity: 1;
}
.hero-blob.blob-core::after {
  content: none !important;
  animation: none !important;
}

/* Landing surfaces share the animated hero's exact background color. */
body:has(.hero) {
  --landing-background: #f5f5f3;
  background: var(--landing-background);
}
body:has(.hero) :is(.hero, .hero-bg, main > section,
  .services article, .person-photo, .case-title-panel, .case-summary,
  .case-metrics > div, footer) {
  background: var(--landing-background);
}
body:has(.hero) :is(.stats, .stats-grid strong, .stats-grid span,
  .case-summary, .case-summary p, .contact, footer, footer .logo span) {
  color: var(--ink);
}
body:has(.hero) .case-summary a {
  color: var(--ink);
  border-color: var(--ink);
}
body:has(.hero) .case-summary a:hover {
  background: var(--ink);
  color: #fff;
}

/* Let the hero animation continue beneath the landing navigation. */
body:has(.hero) .header {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

/* Keep desktop navigation on the continuous animated background. */
@media (min-width: 701px) {
  body:has(.hero) .header nav {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
}

/* Approach: framed heading, a clear statement and three service cards. */
#approach .section-label { margin-bottom: 32px; }
#approach .approach-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: stretch;
}
#approach .approach-grid h2 {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: 0 .2em;
  margin: 0;
  padding: clamp(24px, 3.4vw, 56px);
  border: 2px solid var(--ink);
  border-radius: 36px;
  font-family: 'Onest', Arial, sans-serif;
  font-size: clamp(48px, 6.2vw, 100px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.055em;
}
#approach .approach-grid h2 em {
  font: italic 400 1.05em/1.06 Georgia, serif;
  color: inherit;
}
#approach .approach-mark {
  display: block;
  flex-basis: 100%;
  margin-top: 28px;
  font: 400 64px/1 'Onest', Arial, sans-serif;
}
#approach .approach-statement {
  padding: clamp(28px, 3.4vw, 56px);
  border-radius: 36px;
  background: var(--ink);
  color: #f5f5f3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
#approach .approach-statement p {
  margin: 0;
  font-size: clamp(19px, 1.8vw, 28px);
  line-height: 1.45;
  letter-spacing: -.025em;
  color: inherit;
}
#approach .approach-statement strong { font-weight: 700; }
#approach .services-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 64px;
  margin-bottom: 24px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.15;
  letter-spacing: -.04em;
  font-weight: 600;
}
#approach .services { margin-top: 0; gap: 20px; }
#approach .services article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 350px;
  padding: clamp(24px, 2.5vw, 40px);
  padding-bottom: 88px;
  border: 2px solid var(--ink);
  border-radius: 32px;
  background: transparent;
  color: var(--ink);
}
#approach .services article {
  transition: background-color .25s ease, color .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  #approach .services article:hover {
    background: var(--ink);
    color: #f5f5f3;
  }
}
@media (prefers-reduced-motion: reduce) {
  #approach .services article { transition: none; }
}
#approach .services article > span {
  position: absolute;
  right: 28px;
  bottom: 22px;
  font: italic 400 42px/1 Georgia, serif;
  color: inherit;
}
#approach .services h3 {
  margin: 0 0 24px;
  font-family: 'Onest', Arial, sans-serif;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
  color: inherit;
}
#approach .services p {
  max-width: none;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.5;
  color: inherit;
}
@media (max-width: 900px) {
  #approach .approach-grid { grid-template-columns: 1fr; gap: 16px; }
  #approach .approach-grid h2 { flex-wrap: nowrap; font-size: clamp(40px, 8vw, 70px); border-radius: 28px; }
  #approach .approach-mark { flex-basis: auto; margin: 0 0 0 auto; font-size: 44px; }
  #approach .approach-statement { border-radius: 28px; }
  #approach .services { grid-template-columns: 1fr; gap: 16px; }
  #approach .services article { min-height: 260px; border-radius: 28px; }
  #approach .services h3 br { display: none; }
  #approach .services h3 { font-size: 34px; }
  #approach .services-heading { margin-top: 40px; }
}
@media (max-width: 400px) {
  #approach .approach-grid h2 { font-size: 36px; padding: 22px 18px; }
  #approach .approach-mark { font-size: 32px; }
}



/* Remove the divider above the approach section label. */
#approach .section-label { border-top: 0; }

/* Experience: oversized figures in a two-by-two card layout. */
body:has(.hero) .stats .stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
body:has(.hero) .stats .stats-grid > div {
  min-width: 0;
  min-height: clamp(300px, 30vw, 460px);
  padding: clamp(28px, 3.4vw, 54px);
  border: 2px solid var(--ink);
  border-radius: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  background: transparent;
  color: var(--ink);
}
body:has(.hero) .stats .stats-grid > div:first-child {
  background: var(--ink);
  color: #f5f5f3;
}
body:has(.hero) .stats .stats-grid > div:nth-child(2) {
  background: linear-gradient(135deg, #192582, #2240dc);
  color: #f5f5f3;
  border-color: transparent;
}
body:has(.hero) .stats .stats-grid > div:nth-child(3) {
  background: #e5e9fa;
  border-color: #e5e9fa;
}
body:has(.hero) .stats .stats-grid strong {
  font-family: 'Onest', Arial, sans-serif;
  font-size: clamp(100px, 13vw, 200px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.065em;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
body:has(.hero) .stats .stats-grid span {
  max-width: 390px;
  font-size: clamp(19px, 2vw, 29px);
  line-height: 1.3;
  letter-spacing: -.025em;
  color: inherit;
}
@media (max-width: 600px) {
  body:has(.hero) .stats .stats-grid { grid-template-columns: 1fr; gap: 16px; }
  body:has(.hero) .stats .stats-grid > div { min-height: 290px; border-radius: 28px; }
  body:has(.hero) .stats .stats-grid strong { font-size: 112px; }
}

/* Polished blue chrome sculptures, scattered around the content. */
body:has(.hero) main > :is(.approach, .stats, .team, .work, .contact) {
  position: relative;
  isolation: isolate;
  padding-bottom: 190px;
}
body:has(.hero) main > :is(.approach, .stats, .team, .work, .contact) > :not(.chrome-decor) {
  position: relative;
  z-index: 1;
}
.chrome-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.chrome-piece {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(150px, var(--size), 560px);
  height: auto;
  transform: rotate(var(--angle));
  object-fit: contain;
}
@media(max-width:700px) {
  .chrome-piece { width: clamp(120px, calc(var(--size) * 1.4), 250px); }
  body:has(.hero) main > :is(.approach, .stats, .team, .work, .contact) { padding-bottom: 140px; }
}

/* Small, slow movements keep the metal objects feeling suspended. */
.chrome-piece {
  animation: chrome-float var(--float-time, 14s) ease-in-out var(--float-delay, 0s) infinite;
}
@keyframes chrome-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--angle)); }
  33% { transform: translate3d(6px, -10px, 0) rotate(calc(var(--angle) + 2deg)); }
  68% { transform: translate3d(-5px, 5px, 0) rotate(calc(var(--angle) - 2deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .chrome-piece { animation: none; }
}

/* Opaque reading surfaces keep chrome behind the content. */
#approach .services article,
#approach .approach-grid h2,
body:has(.hero) .stats .stats-grid > div:last-child {
  background: var(--landing-background, #f5f5f3);
}
body:has(.hero) :is(.team-grid, .case-layout, .case-metrics) {
  background-color: var(--landing-background, #f5f5f3);
}
body:has(.hero) .contact > :not(.chrome-decor) {
  z-index: 1;
}
body:has(.hero) .contact h2,
body:has(.hero) .contact > span {
  background-color: var(--landing-background, #f5f5f3);
  width: fit-content;
}
@media (hover: hover) and (pointer: fine) {
  #approach .services article:hover { background: var(--ink); color: #f5f5f3; }
}

/* Turn the long approach ribbon toward the side, clear of the section boundary. */
#approach .chrome-piece[src$="blue-chrome-ribbon.png"] {
  --angle: -65deg !important;
  left: -23%;
  top: 30%;
  width: 38%;
  height: 36%;
  object-fit: contain;
}
@media (max-width:700px) {
  #approach .chrome-piece[src$="blue-chrome-ribbon.png"] {
    left: -30%;
    top: 32%;
    width: 55%;
    height: 24%;
  }
}

/* Plain headings have no rectangular backdrop. Keep decoration away from them. */
body:has(.hero) :is(.services-heading, .section-label),
body:has(.hero) .contact h2,
body:has(.hero) .contact > span {
  background: transparent;
}
#approach .chrome-piece[src$="blue-chrome-ribbon.png"] {
  left: -28%;
  top: 58%;
  width: 36%;
  height: 25%;
}
body:has(.hero) .contact .chrome-piece[src$="blue-chrome-star.png"] {
  left: -23%;
  top: 68%;
  width: 28%;
}
body:has(.hero) .contact .chrome-piece[src$="blue-chrome-loop.png"] {
  left: 84%;
  width: 27%;
}
@media(max-width:700px) {
  #approach .chrome-piece[src$="blue-chrome-ribbon.png"] {
    left: -38%;
    top: 62%;
    width: 48%;
    height: 20%;
  }
}

/* Let the animated artwork cross naturally into the approach section. */
body:has(.hero) .hero {
  overflow: visible;
  clip-path: inset(0 0 -100vh 0);
}
body:has(.hero) .hero-bg {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
body:has(.hero) main > #approach {
  background: transparent;
}

/* Remove obsolete pink marble layers exposed by the open hero boundary. */
body:has(.hero) .hero::before,
body:has(.hero) .hero::after {
  content: none;
  display: none;
  animation: none;
  background: none;
}

/* Section labels without rules; a broad sculpture below the service cards. */
body:has(.hero) .section-label {
  border-top: 0;
}
#approach .approach-zigzag {
  position: relative;
  height: clamp(180px, 20vw, 300px);
  margin-top: 48px;
  pointer-events: none;
}
#approach .approach-zigzag img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(170px, 18vw, 270px);
  height: 76vw;
  max-width: none;
  object-fit: fill;
  transform: translate(-50%, -50%) rotate(86deg);
  animation: zigzag-sway 15s ease-in-out infinite;
}
#approach .chrome-piece[src$="blue-chrome-loop.png"] { display: none; }
@keyframes zigzag-sway {
  0%,100% { transform: translate(-50%, -50%) rotate(86deg); }
  50% { transform: translate(-49%, -48%) rotate(89deg); }
}
@media(max-width:700px) {
  #approach .approach-zigzag { height: 160px; margin-top: 32px; }
  #approach .approach-zigzag img { width: 130px; height: 85vw; }
}
@media(prefers-reduced-motion:reduce) {
  #approach .approach-zigzag img { animation: none; }
}

/* Tighten the transition from the zigzag to experience. */
body:has(.hero) main > #approach { padding-bottom: 24px; }
body:has(.hero) main > .stats { padding-top: 24px; }
body:has(.hero) .stats .section-label { margin-bottom: 32px; }
#approach .approach-zigzag { margin-top: 28px; }
@media(max-width:700px) {
  body:has(.hero) main > #approach { padding-bottom: 16px; }
  body:has(.hero) main > .stats { padding-top: 20px; }
  #approach .approach-zigzag { margin-top: 24px; }
}

/* An angled edge composition rather than a centered horizontal ornament. */
#approach .approach-zigzag {
  width: 100vw;
  margin-left: -4vw;
  height: clamp(230px, 32vw, 440px);
  margin-top: 12px;
  clip-path: inset(-32px 0 -32px 0);
}
#approach .approach-zigzag img {
  left: 19%;
  top: 50%;
  width: clamp(110px, 11vw, 175px);
  height: 64vw;
  transform: translate(-50%, -50%) rotate(66deg);
  animation: zigzag-edge-sway 16s ease-in-out infinite;
}
@keyframes zigzag-edge-sway {
  0%,100% { transform: translate(-50%, -50%) rotate(66deg); }
  50% { transform: translate(-49%, -51%) rotate(68deg); }
}
/* Keep contrasting scales and keep the small shapes close to card corners. */
.stats .chrome-piece[src$="blue-chrome-loop.png"] { --size: 31vw !important; }
.team .chrome-piece[src$="blue-chrome-star.png"] { --size: 15vw !important; }
.work .chrome-piece[src$="blue-chrome-loop.png"] { --size: 13vw !important; }
@media(max-width:700px) {
  #approach .approach-zigzag {
    margin-left: -5vw;
    height: 200px;
    margin-top: 10px;
  }
  #approach .approach-zigzag img { left: 21%; width: 90px; height: 115vw; }
}
@media(prefers-reduced-motion:reduce) {
  #approach .approach-zigzag img { animation: none; }
}

/* The zigzag is edge decoration, not a separate tall section. */
body:has(.hero) main { overflow-x: clip; }
#approach .approach-zigzag {
  height: 64px;
  margin-top: 0;
  clip-path: none;
  z-index: 0;
}
#approach .approach-zigzag img {
  left: 4%;
  top: 50%;
  width: clamp(85px, 8vw, 125px);
  height: 44vw;
}
body:has(.hero) main > .stats { background: transparent; }
@media(max-width:700px) {
  #approach .approach-zigzag { height: 48px; margin-top: 0; }
  #approach .approach-zigzag img { left: 0; width: 75px; height: 65vw; }
}

/* Let the edge sculpture cross the cards only within their lower empty area. */
#approach .services article { padding-bottom: 140px; }
#approach .approach-zigzag { z-index: 2; }
#approach .approach-zigzag img {
  left: 4%;
  top: clamp(80px, 7.6vw, 130px);
  height: min(44vw, 680px);
}
@media(max-width:700px) {
  #approach .services article { padding-bottom: 110px; }
  #approach .approach-zigzag img {
    left: 0;
    top: 45px;
    height: 65vw;
  }
}

/* Remove the transition zigzag and the rectangular reading backdrops. */
#approach .approach-zigzag { display: none; }
body:has(.hero) :is(.team-grid, .case-layout, .case-metrics) {
  background: transparent;
}
/* Keep sculptures clear of the team biographies and case copy. */
.team .chrome-piece[src$="blue-chrome-loop.png"] { left: -34%; }
.team .chrome-piece[src$="blue-chrome-ribbon.png"] { left: 96%; }
.team .chrome-piece[src$="blue-chrome-star.png"] { left: 96%; }
.work .chrome-piece[src$="blue-chrome-star.png"] { left: -37%; }
.work .chrome-piece[src$="blue-chrome-ribbon.png"] { left: 98%; }
.work .chrome-piece[src$="blue-chrome-loop.png"] { display: none; }

/* Large varied sculptures replace the earlier small edge placements. */
body:has(.hero) main > :is(#approach, #team, #work, #contact, .stats) .chrome-piece.chrome-large {
  display: block;
  left: var(--x);
  top: var(--y);
  width: clamp(300px, var(--size), 800px);
  height: auto;
  object-fit: contain;
}
/* Photo areas and opaque cards can carry large silhouettes behind them. */
body:has(.hero) main > #team .chrome-piece.chrome-large[src$="blue-chrome-star.png"] { left: 96%; }
body:has(.hero) main > #work .chrome-piece.chrome-large { left: 97%; }
body:has(.hero) main > #work .chrome-piece.chrome-large[src$="blue-chrome-pebble.png"] { left: -43%; }
body:has(.hero) main > #contact .chrome-piece.chrome-large { left: 83%; }
body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-star.png"] { left: -43%; }
@media(max-width:700px) {
  body:has(.hero) main > :is(#approach, #team, #work, #contact, .stats) .chrome-piece.chrome-large {
    width: clamp(240px, calc(var(--size) * 1.35), 420px);
  }
  body:has(.hero) main > #team .chrome-piece.chrome-large[src$="blue-chrome-pebble.png"] { left: -44%; }
}

/* Services: five full-width, keyboard-accessible accordion rows. */
#approach .services-accordion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 0;
}
#approach .service-item {
  min-width: 0;
  border: 1.5px solid var(--ink);
  border-radius: 38px;
  background: var(--landing-background, #f5f5f3);
  color: var(--ink);
  transition: background-color .25s ease, color .25s ease;
}
#approach .service-item summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 24px;
  padding: 26px 36px;
  min-height: 112px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#approach .service-item summary::-webkit-details-marker { display: none; }
#approach .service-item summary::marker { content: ''; }
#approach .service-item summary:focus-visible { outline: 3px solid #2240dc; outline-offset: 5px; border-radius: 36px; }
#approach .service-number {
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -.04em;
  opacity: .5;
  font-variant-numeric: tabular-nums;
}
#approach .service-item h3 {
  margin: 0;
  font-family: 'Onest', Arial, sans-serif;
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: inherit;
}
#approach .service-toggle { position: relative; width: 30px; height: 30px; justify-self: end; }
#approach .service-toggle::before,
#approach .service-toggle::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 14px;
  height: 2px; background: currentColor; border-radius: 2px;
}
#approach .service-toggle::after { transform: rotate(90deg); transition: transform .25s ease; }
#approach .service-item[open] .service-toggle::after { transform: rotate(0); }
#approach .service-description { padding: 0 96px 32px 124px; }
#approach .service-description p {
  margin: 0;
  max-width: 950px;
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.55;
  color: inherit;
}
#approach .service-item[open] { background: var(--ink); color: #f5f5f3; }
@media(hover:hover) and (pointer:fine) {
  #approach .service-item:hover { background: var(--ink); color: #f5f5f3; }
}
@media(max-width:700px) {
  #approach .services-accordion { gap: 10px; }
  #approach .service-item { border-radius: 26px; }
  #approach .service-item summary { grid-template-columns: 30px minmax(0,1fr) 24px; gap: 12px; padding: 22px 18px; min-height: 100px; }
  #approach .service-item h3 { font-size: clamp(18px, 4.8vw, 25px); }
  #approach .service-number { font-size: 24px; }
  #approach .service-toggle { width: 24px; height: 24px; }
  #approach .service-toggle::before, #approach .service-toggle::after { top: 11px; }
  #approach .service-description { padding: 0 22px 26px 60px; }
}
@media(prefers-reduced-motion:reduce) {
  #approach .service-item, #approach .service-toggle::after { transition: none; }
}

/* A shared stacking plane lets sculptures cross every section boundary. */
body:has(.hero) main {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
}
body:has(.hero) main > :is(.approach, .stats, .team, .work, .contact) {
  isolation: auto;
  z-index: auto;
  overflow: visible;
  background: transparent;
}
body:has(.hero) .chrome-decor {
  overflow: visible;
  z-index: 0;
}
body:has(.hero) main > :is(.approach, .stats, .team, .work, .contact) > :not(.chrome-decor) {
  position: relative;
  z-index: 1;
}
body:has(.hero) footer {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* No blue focus ring on service 05; retain a visible keyboard cue. */
#approach .service-item:nth-child(5) summary:focus,
#approach .service-item:nth-child(5) summary:focus-visible {
  outline: none;
}
#approach .service-item:nth-child(5) summary:focus-visible h3 {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Team: integrated portrait cards with dark blue glass-like bodies. */
body:has(.hero) #team > .section-label {
  display: inline-flex;
  width: fit-content;
  padding: 13px 21px;
  margin-bottom: 32px;
  border: 0;
  border-radius: 30px;
  background: #080a33;
  color: #f5f5f3;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  z-index: 3;
}
#team .team-grid { gap: 26px; align-items: stretch; }
#team .person {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  padding: 14px;
  border: 1px solid rgba(144,164,239,.42);
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(8,10,51,.97), rgba(21,34,92,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  color: #f5f5f3;
  overflow: hidden;
}
#team .person-photo {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  border-radius: 26px;
  overflow: hidden;
  background: #192451;
}
#team .person-photo img { height: 100%; width: 100%; object-fit: cover; object-position: center 36%; }
#team .person-photo::after {
  content: '';
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgba(8,10,51,.35) 40%, rgba(8,10,51,.92));
  pointer-events: none;
}
#team .person-photo::before {
  content: attr(data-number);
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 30px;
  background: rgba(8,10,51,.3);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}
#team .person-name {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  border: 0;
  margin: 0;
}
#team .person-name h2 {
  margin: 0;
  font-family: 'Onest', Arial, sans-serif;
  font-size: clamp(48px, 6.8vw, 104px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .95;
  color: #fff;
}
#team .person-name span {
  text-align: left;
  font-size: clamp(10px, .9vw, 14px);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.4;
  color: #e1e7ff;
}
#team .person ul {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  align-content: start;
  gap: 20px;
  margin: 0;
  padding: 38px 28px 32px;
  color: #f5f5f3;
  font-size: clamp(17px, 1.65vw, 25px);
  line-height: 1.35;
}
#team .person li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 16px; align-items: start; }
#team .person li::before {
  content: '+';
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-top: .05em;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fff 25%, #d5dfff 75%, #8aa2ef);
  color: #080a33;
  font: 400 20px/1 Arial, sans-serif;
}
@media(max-width:700px) {
  #team .team-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  #team .person { padding: 10px; border-radius: 30px; }
  #team .person-photo { aspect-ratio: 1.12 / 1; border-radius: 22px; }
  #team .person-name { padding: 24px; }
  #team .person-name h2 { font-size: 58px; }
  #team .person ul { padding: 28px 16px 24px; gap: 18px; font-size: 18px; }
  #team .person-photo::before { top: 16px; left: 16px; font-size: 15px; }
}

/* Consistent section badges, matching the team badge. */
body:has(.hero) main > section > .section-label,
body:has(.hero) #team > .section-label,
body:has(.hero) #contact > span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 13px 21px;
  margin: 0 0 32px;
  border: 0;
  border-radius: 30px;
  background: #080a33;
  color: #f5f5f3;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: relative;
  z-index: 3;
}
/* Close the excess space between experience and the team. */
body:has(.hero) main > .stats { padding-bottom: 110px; }
body:has(.hero) main > #team { padding-top: 64px; }
@media(max-width:700px) {
  body:has(.hero) main > .stats { padding-bottom: 80px; }
  body:has(.hero) main > #team { padding-top: 40px; }
}

/* Team cards: sampled midnight blue with restrained glass highlights. */
#team .person {
  background-color: #080a31;
  background-image:
    linear-gradient(125deg, rgba(255,255,255,.055), transparent 34%, transparent 70%, rgba(95,126,255,.035)),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 55%);
  border: 1px solid rgba(174,190,255,.3);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 14px 32px rgba(8,10,49,.15),
    0 3px 8px rgba(8,10,49,.1);
}
#team .person li { grid-template-columns: 36px minmax(0,1fr); gap: 16px; }
#team .person li::before {
  content: '';
  width: 34px;
  height: 34px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: url('assets/blue-chrome-star.png') center / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
  transform: rotate(-12deg);
}
#team .person li:nth-child(2)::before { background-image: url('assets/blue-chrome-loop.png'); transform: rotate(15deg); }
#team .person li:nth-child(3)::before { background-image: url('assets/blue-chrome-knot.png'); transform: rotate(-8deg); }
#team .person li:nth-child(4)::before { background-image: url('assets/blue-chrome-pebble.png'); transform: rotate(18deg); }
#team .person li:nth-child(5)::before { background-image: url('assets/blue-chrome-star.png'); transform: rotate(35deg); }
@media(max-width:700px) {
  #team .person li { grid-template-columns: 30px minmax(0,1fr); gap: 13px; }
  #team .person li::before { width: 29px; height: 29px; }
}

/* Light framed team cards with identical chrome star markers. */
#team .person {
  background: rgba(245,245,243,.68);
  color: #080a31;
  border: 1.5px solid #080a31;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(8,10,49,.05),
    0 10px 24px rgba(8,10,49,.07);
}
#team .person ul { color: #080a31; }
#team .person li::before,
#team .person li:nth-child(n)::before {
  background-image: url('assets/blue-chrome-star.png');
  transform: rotate(-12deg);
  filter: drop-shadow(0 2px 2px rgba(8,10,49,.16));
}

/* Case study: a clear central story surrounded by floating result pills. */
body:has(.hero) main > #work { padding-bottom: 80px; }
#work .case-orbit { position: relative; min-height: 690px; padding: 80px 0 100px; }
#work :is(.case-layout, .case-title-panel, .case-summary, .case-metrics) {
  background: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
}
#work .case-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 50%;
  min-height: 0;
  margin: 0 auto;
  text-align: center;
}
#work .case-title-panel { padding: 0; align-items: center; }
#work .case-title-panel h2 {
  margin: 0;
  font-family: 'Onest', Arial, sans-serif;
  font-size: clamp(42px, 5.4vw, 88px);
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: 1;
  color: var(--ink);
}
#work .case-title-panel small { margin-top: 18px; font-size: 10px; line-height: 1.5; letter-spacing: .06em; }
#work .case-summary {
  min-height: 0;
  padding: 0;
  gap: 20px;
  align-items: center;
  color: var(--ink);
}
#work .case-summary p { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: var(--ink); }
#work .case-summary a { margin-top: 8px; border: 1px solid var(--ink); border-radius: 40px; padding: 18px 25px; }
#work .case-metrics { position: absolute; inset: 0; display: block; margin: 0; padding: 0; pointer-events: none; }
#work .case-metrics > div {
  position: absolute;
  width: 22%;
  max-width: 320px;
  min-width: 0;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 7px;
  padding: 22px 26px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 36px;
  background: #080a31;
  color: #f5f5f3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 20px rgba(8,10,49,.08);
  transform: rotate(var(--tilt));
  animation: case-result-float var(--period) ease-in-out var(--phase) infinite;
}
#work .case-metrics > div:nth-child(1) { left: 0; top: 8%; --tilt: -7deg; --period: 11s; --phase: -3s; }
#work .case-metrics > div:nth-child(2) { right: 0; top: 27%; --tilt: 6deg; --period: 14s; --phase: -7s; }
#work .case-metrics > div:nth-child(3) { left: 1%; bottom: 15%; --tilt: 5deg; --period: 13s; --phase: -5s; }
#work .case-metrics > div:nth-child(4) { right: 2%; bottom: 2%; --tilt: -6deg; --period: 12s; --phase: -9s; }
#work .case-metrics b { font-family: 'Onest', Arial, sans-serif; font-size: clamp(24px, 2.6vw, 42px); line-height: 1.1; letter-spacing: -.045em; color: inherit; white-space: nowrap; }
#work .case-metrics span { font-size: clamp(12px, 1vw, 16px); line-height: 1.35; color: inherit; }
@keyframes case-result-float {
  0%,100% { transform: translate(0,0) rotate(var(--tilt)); }
  50% { transform: translate(4px,-9px) rotate(calc(var(--tilt) + 2deg)); }
}
@media(max-width:1000px) {
  #work .case-orbit { padding: 32px 0 24px; min-height: 0; }
  #work .case-layout { width: min(100%, 700px); }
  #work .case-title-panel h2 { font-size: clamp(40px, 9vw, 76px); }
  #work .case-metrics { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 26px; padding: 18px 8px; margin-top: 42px; }
  #work .case-metrics > div { position: relative; inset: auto !important; width: 100%; max-width: none; padding: 22px; }
  #work .case-metrics > div:nth-child(even) { margin-top: 18px; }
  #work .case-metrics b { font-size: clamp(25px, 4.3vw, 40px); }
}
@media(max-width:480px) {
  #work .case-metrics { gap: 24px 14px; }
  #work .case-metrics > div { padding: 18px 14px; border-radius: 26px; }
  #work .case-metrics b { font-size: 24px; }
  #work .case-metrics span { font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  #work .case-metrics > div { animation: none; }
}

/* Center the case section badge. */
body:has(.hero) main > #work > .section-label {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

/* Former team sculptures now frame the case, clear of its central copy. */
body:has(.hero) main > #work .chrome-piece.chrome-large.moved-team {
  left: var(--x);
  top: var(--y);
}

/* Nudge the floating results a little toward the center. */
@media(min-width:1001px) {
  #work .case-metrics > div:nth-child(1) { left: 1.5%; }
  #work .case-metrics > div:nth-child(2) { right: 1.5%; }
  #work .case-metrics > div:nth-child(3) { left: 2.5%; }
  #work .case-metrics > div:nth-child(4) { right: 3.5%; }
}

/* Brand descriptor immediately beneath the case title. */
#work .case-title-panel .case-brand-description {
  margin: 4px 0 0;
  font-family: 'Onest', Arial, sans-serif;
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink);
}
/* Compact light footer with the two personal Telegram contacts. */
body:has(.hero) footer.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px 40px;
  padding: 32px 4vw 24px;
  background: #f5f5f3;
  color: #080a31;
  font-size: 13px;
  font-weight: 400;
}
.site-footer .footer-wordmark { font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.site-footer .footer-brand p { font-size: 14px; margin: 8px 0 0; }
.site-footer .footer-contacts { display: flex; flex-wrap: wrap; gap: 14px 28px; font-weight: 600; }
.site-footer .footer-end { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; font-size: 11px; opacity: .65; }
body:has(.hero) .site-footer .footer-end span { display: inline; }
.site-footer a:hover { opacity: .7; }
/* Keep the final floating sculptures within the last content section. */
body:has(.hero) #contact .chrome-piece.chrome-large { top: 0; }
body:has(.hero) #contact .chrome-piece.chrome-large[src$="blue-chrome-star.png"] { top: 20%; width: min(32vw, 480px); }
@media(max-width:700px) {
  body:has(.hero) footer.site-footer { grid-template-columns: 1fr; padding: 28px 5vw 22px; gap: 22px; }
  .site-footer .footer-contacts { gap: 20px; }
  .site-footer .footer-end { flex-wrap: wrap; }
}

/* Floating result pills with a slightly closer fixed composition. */
@media(min-width:1001px) {
  #work .case-metrics > div:nth-child(1) { left: 2.5%; }
  #work .case-metrics > div:nth-child(2) { right: 2.5%; }
  #work .case-metrics > div:nth-child(3) { left: 3.5%; }
  #work .case-metrics > div:nth-child(4) { right: 4.5%; }
}

/* Highlight the reporting period shared by all four case results. */
#work .case-summary .case-results-period {
  display: inline-block;
  width: fit-content;
  margin: 6px 0 0;
  padding: 12px 20px;
  border: 1px solid rgba(8,10,49,.45);
  border-radius: 32px;
  background: transparent;
  color: #080a31;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.4;
  letter-spacing: -.015em;
}
#work .case-results-period strong { font-weight: 800; }

/* Larger result pills, gathered closer around the case story. */
@media(min-width:1001px) {
  #work .case-layout { width: 40%; }
  #work .case-metrics > div {
    width: 23.5%;
    max-width: 370px;
    padding: 28px 30px;
    gap: 10px;
    border-radius: 40px;
  }
  #work .case-metrics b { font-size: clamp(29px, 2.9vw, 47px); }
  #work .case-metrics span { font-size: clamp(13px, 1.1vw, 17px); }
  #work .case-metrics > div:nth-child(1) { left: 3.5%; }
  #work .case-metrics > div:nth-child(2) { right: 3.5%; }
  #work .case-metrics > div:nth-child(3) { left: 4.5%; }
  #work .case-metrics > div:nth-child(4) { right: 5.5%; }
}
@media(max-width:1000px) {
  #work .case-metrics > div { padding: 26px 20px; }
}

/* Hairline result connectors, routed behind the content in the side gutters. */
#work .case-result-strings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: #080a31;
  opacity: .42;
}
#work .case-result-strings > path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media(max-width:1000px) {
  #work .case-result-strings { display: none; }
}

/* A soft, drawn stroke rather than rigid connector segments. */
#work .case-result-strings { opacity: .5; }
#work .case-result-strings > path { stroke-width: 1.15; }

/* Uneven spacing and distinct sway make each result feel loosely suspended. */
@media(min-width:1001px) {
  #work .case-metrics > div { animation-name: case-result-sway; transform-origin: 50% 5%; }
  #work .case-metrics > div:nth-child(1) { left: 2%; top: 4%; bottom: auto; width: 24%; --tilt: -9deg; --period: 9s; --phase: -2s; --sway-x: 8px; --sway-y: -17px; --sway-turn: 3deg; }
  #work .case-metrics > div:nth-child(2) { right: 6%; top: 23%; bottom: auto; width: 22%; --tilt: 5deg; --period: 12s; --phase: -7s; --sway-x: -10px; --sway-y: -13px; --sway-turn: -3deg; }
  #work .case-metrics > div:nth-child(3) { left: 5%; top: auto; bottom: 5%; width: 22.5%; --tilt: 8deg; --period: 10.5s; --phase: -4s; --sway-x: 7px; --sway-y: -21px; --sway-turn: -3deg; }
  #work .case-metrics > div:nth-child(4) { right: 1%; top: auto; bottom: -2%; width: 26%; --tilt: -7deg; --period: 13s; --phase: -9s; --sway-x: -11px; --sway-y: -18px; --sway-turn: 4deg; }
}
@keyframes case-result-sway {
  0%,100% { transform: translate(0,0) rotate(var(--tilt)); }
  38% { transform: translate(var(--sway-x),var(--sway-y)) rotate(calc(var(--tilt) + var(--sway-turn))); }
  72% { transform: translate(calc(var(--sway-x) * -.55),calc(var(--sway-y) * .3)) rotate(calc(var(--tilt) - var(--sway-turn) * .5)); }
}
#work .case-result-strings { opacity: 1; }
#work .case-result-strings > path { stroke: rgba(8,10,49,.55); stroke-width: 1.2; }
@media(prefers-reduced-motion:reduce) {
  #work .case-metrics > div { animation: none; }
}

/* Team as monochrome editorial portraits with blue pen doodles. */
#team .team-grid { gap: clamp(24px, 5vw, 80px); }
#team .person {
  display: grid;
  grid-template-rows: auto auto auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  color: #080a31;
}
#team .person-photo {
  grid-row: 1;
  border: 1px solid rgba(8,10,49,.35);
  border-radius: 0;
  aspect-ratio: 1 / 1;
  background: #e8e8e5;
  overflow: hidden;
}
#team .person-photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 37%;
  filter: grayscale(1) contrast(1.06);
}
#team .person-photo::before, #team .person-photo::after { content: none; display: none; }
#team .person-name {
  grid-row: 1;
  align-self: start;
  padding: 20px 24px;
  pointer-events: none;
}
#team .person-name h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(42px, 5.7vw, 84px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.055em;
  color: #080a31;
  text-shadow: 0 1px 8px rgba(245,245,243,.7);
}
#team .team-doodles {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: #2240dc; pointer-events: none; z-index: 1;
}
#team .person-role {
  grid-column: 1; grid-row: 2;
  margin: 20px 0 0;
  color: #080a31;
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
}
#team .person ul {
  grid-row: 3;
  padding: 0;
  margin: 20px 0 0;
  gap: 13px;
  color: #080a31;
  font-size: clamp(17px, 1.5vw, 23px);
}
#team .person li { grid-template-columns: 22px minmax(0,1fr); gap: 10px; }
#team .person li:nth-child(n)::before {
  content: '↗';
  display: block;
  width: 22px; height: auto;
  background: none;
  color: #2240dc;
  transform: none;
  filter: none;
  font: 400 23px/1.3 Georgia, serif;
}
@media(max-width:700px) {
  #team .team-grid { gap: 42px; }
  #team .person-name { padding: 17px 20px; }
  #team .person-name h2 { font-size: 54px; }
  #team .person-role { margin-top: 16px; }
  #team .person ul { margin-top: 16px; font-size: 18px; }
}

/* Deep navy pencil marks: a hand-traced circle and an uneven frame. */
#team .team-doodles.pencil-doodles {
  color: #080a31;
  opacity: .95;
}
#team .pencil-doodles path { vector-effect: non-scaling-stroke; }

/* Reference composition: isolated portraits on light editorial covers. */
#team .person-photo {
  background: #e7e7e5;
  border: 0;
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  box-shadow: 0 3px 10px rgba(8,10,49,.09);
}
#team .person-photo img {
  position: absolute;
  left: 13%;
  bottom: 7%;
  width: 76%;
  height: 79%;
  object-fit: contain;
  object-position: center bottom;
  filter: grayscale(1) contrast(1.06);
}
#team .person:nth-child(2) .person-photo img {
  left: 15%;
  bottom: 8%;
  width: 74%;
  height: 80%;
}
#team .person-name {
  padding: 14px 18px;
  max-width: 42%;
  z-index: 3;
}
#team .person-name h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 4vw, 60px);
  letter-spacing: -.065em;
  line-height: .95;
  text-shadow: none;
}
#team .team-doodles.pencil-doodles { color: #080a31; z-index: 2; }
@media(max-width:700px) {
  #team .person-name { padding: 14px 16px; }
  #team .person-name h2 { font-size: 42px; }
}

/* Team collage: two outlined silhouettes together, responsibilities on either side. */
#team .team-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#team .team-composition {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,2.05fr) minmax(0,1fr);
  align-items: center;
  gap: clamp(18px, 2.5vw, 40px);
}
#team .team-people {
  position: relative;
  min-width: 0;
  aspect-ratio: 600 / 540;
}
#team .team-cutout { position: absolute; bottom: 0; width: 57%; height: 82%; }
#team .team-cutout-diana { left: -2%; z-index: 1; transform: rotate(-4deg); }
#team .team-cutout-daria { right: -2%; bottom: 1%; z-index: 2; transform: rotate(3deg); }
#team .team-cutout img {
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  filter: grayscale(1) contrast(1.05) url('#team-marker-outline');
}
#team .team-name {
  position: absolute;
  margin: 0;
  font: italic 400 clamp(28px,3.2vw,50px)/1 Georgia, 'Times New Roman', serif;
  letter-spacing: -.04em;
  color: #080a31;
  z-index: 4;
}
#team .team-name-diana { left: 6%; top: 1%; transform: rotate(-8deg); }
#team .team-name-daria { right: 2%; top: 7%; transform: rotate(6deg); }
#team .team-name-threads {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: #080a31; stroke-width: 1.4;
  stroke-linecap: round; pointer-events: none; z-index: 3;
}
#team .team-name-threads path { vector-effect: non-scaling-stroke; }
#team .team-tasks { align-self: center; min-width: 0; padding-top: 65px; color: #080a31; }
#team .team-specialty { margin: 0 0 24px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; }
#team .team-tasks ul { list-style: none; display: grid; gap: 18px; margin: 0; padding: 0; font-size: clamp(16px,1.35vw,21px); line-height: 1.4; }
#team .team-tasks li { position: relative; padding-left: 19px; }
#team .team-tasks li::before { content: '—'; position: absolute; left: 0; top: 0; color: #080a31; }
#team > .chrome-decor { display: none; }
@media(max-width:1000px) {
  #team .team-composition { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; }
  #team .team-people { grid-column: 1 / -1; grid-row: 1; width: min(100%,640px); justify-self: center; }
  #team .team-tasks { padding-top: 0; }
  #team .team-tasks-diana { grid-column: 1; grid-row: 2; }
  #team .team-tasks-daria { grid-column: 2; grid-row: 2; }
  #team .team-name { font-size: clamp(30px,5vw,46px); }
}
@media(max-width:480px) {
  #team .team-composition { column-gap: 20px; row-gap: 24px; }
  #team .team-specialty { font-size: 9px; margin-bottom: 15px; min-height: 30px; }
  #team .team-tasks ul { font-size: 14px; gap: 13px; }
  #team .team-tasks li { padding-left: 13px; }
  #team .team-name { font-size: 30px; }
}

/* A compact transition from the contact button to the footer. */
body:has(.hero) main > #contact { padding-bottom: 28px; }
body:has(.hero) footer.site-footer { padding-top: 24px; }
@media(max-width:700px) {
  body:has(.hero) main > #contact { padding-bottom: 20px; }
  body:has(.hero) footer.site-footer { padding-top: 20px; }
}

/* Use the supplied finished two-person collage without extra image effects. */
#team .team-together {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 82%;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
}

/* Fine oval labels and name threads following the outside of the portraits. */
#team .team-specialty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 12px 18px;
  margin-bottom: 20px;
  border: 1px solid #080a31;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5;
  box-sizing: border-box;
}
@media(max-width:480px) {
  #team .team-specialty {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 9px;
    margin-bottom: 16px;
  }
}

/* Center the team section badge. */
body:has(.hero) main > #team > .section-label {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

/* Larger centered contact badge. */
body:has(.hero) main > #contact > span {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 30px;
  font-size: clamp(17px, 1.5vw, 22px);
  border-radius: 40px;
}

/* Bring contacts closer to the team and show a full floating sculpture on the right. */
body:has(.hero) main > #team { padding-bottom: 32px; }
body:has(.hero) main > #contact { padding-top: 36px; }
#contact h2 {
  width: 70%;
  font-size: clamp(64px, 8.5vw, 136px);
  margin-top: 36px;
  margin-bottom: 40px;
}
body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-loop.png"] {
  left: auto;
  right: -2%;
  top: 26%;
  width: clamp(220px, 32vw, 480px);
  height: auto;
  --angle: -18deg;
  --float-time: 13s;
}
@media(max-width:700px) {
  body:has(.hero) main > #team { padding-bottom: 24px; }
  body:has(.hero) main > #contact { padding-top: 24px; }
  #contact h2 { width: 76%; font-size: clamp(45px, 10vw, 70px); margin-top: 28px; margin-bottom: 30px; }
  body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-loop.png"] {
    right: -17%;
    top: 32%;
    width: 43vw;
    min-width: 140px;
  }
}

/* Oversized contact zigzag emerging from the right edge. */
body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-ribbon.png"] {
  left: auto;
  right: -18%;
  top: -24%;
  width: clamp(440px, 62vw, 960px);
  height: min(108%, 820px);
  object-fit: contain;
  object-position: right center;
  --angle: -12deg;
  --float-time: 15s;
}
@media(max-width:700px) {
  body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-ribbon.png"] {
    right: -35%;
    top: 0;
    width: 78vw;
    height: 100%;
  }
}

/* Long diagonal contact sculpture, from the upper-right edge toward the lower center. */
#contact h2 { width: 47%; }
body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-ribbon.png"] {
  left: auto;
  right: -5%;
  top: -15%;
  width: 66vw;
  height: calc(100% + 185px);
  max-width: none;
  object-fit: fill;
  object-position: center;
  --angle: 27deg;
  --float-time: 18s;
}
body:has(.hero) footer.site-footer { background: transparent; }
@media(max-width:700px) {
  #contact h2 { width: 65%; }
  body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-ribbon.png"] {
    right: -36%;
    top: -4%;
    width: 90vw;
    height: calc(100% + 100px);
    --angle: 23deg;
  }
}

/* Use the locally hosted open-license family throughout both site pages. */
body, body * { font-family: 'Jost', Arial, sans-serif !important; font-style: normal !important; }
.hero h1 { letter-spacing: -.055em; line-height: .98; }
#work .case-title-panel h2 { letter-spacing: -.045em; }
.stats-grid strong, .case-metrics b { letter-spacing: -.035em; }
#team .team-name { letter-spacing: -.025em; }

/* Upright weight contrast replaces every italic accent. */
body em, body i { font-style: normal !important; font-weight: 700 !important; }
#team .team-name { font-style: normal; font-weight: 600; }

/* Jost weight hierarchy: light reading rhythm, clear headings and strong figures. */
body { font-weight: 400; }
body p, .person ul, #team .team-tasks ul,
#work .case-summary p, #approach .approach-statement p {
  font-weight: 400;
}
body strong, body b { font-weight: 700; }
.header nav, .hero-meta, .person-role, .team-specialty { font-weight: 500; }
.logo, .footer-wordmark { font-weight: 800; }
.hero h1 { font-weight: 800; }
.hero h1 span { font-weight: 300; }
.hero h1 i { font-weight: 500 !important; }
.hero-bottom p { font-weight: 500; }
#approach .approach-grid h2 { font-weight: 700; }
#approach .approach-grid h2 em { font-weight: 400 !important; }
#approach .approach-statement strong { font-weight: 650; }
#approach .services-heading { font-weight: 600; }
#approach .service-item h3 { font-weight: 550; letter-spacing: -.015em; }
#approach .service-number { font-weight: 300; }
#approach .service-description p { font-weight: 400; }
.stats-grid strong, body:has(.hero) .stats .stats-grid strong { font-weight: 750; }
body:has(.hero) .stats .stats-grid span { font-weight: 400; }
#work .case-title-panel h2 { font-weight: 750; }
#work .case-title-panel .case-brand-description { font-weight: 400; }
#work .case-title-panel small { font-weight: 500; letter-spacing: .07em; }
#work .case-metrics b { font-weight: 700; }
#work .case-metrics span { font-weight: 400; }
#work .case-summary .case-results-period { font-weight: 400; }
#work .case-results-period strong { font-weight: 700; }
#team .team-name { font-weight: 600; }
#team .team-specialty { font-weight: 600; }
#contact h2 { font-weight: 700; }
#contact h2 em { font-weight: 400 !important; }
.nav-cta, #contact > a, #work .case-summary a, .footer-contacts { font-weight: 600; }
body:has(.hero) main > section > .section-label,
body:has(.hero) #team > .section-label,
body:has(.hero) main > #contact > span { font-weight: 600; }
.case-hero-copy h1, .timeline-section h2, .results-section h2 { font-weight: 700; }
.detail-list h3 { font-weight: 600; }
.support-copy, .detail-list p, .case-hero-copy p { font-weight: 400; }

/* Custom sculpture follows the user's drawn route across the full final composition. */
body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-contact-zigzag.png"] {
  left: -4vw;
  right: auto;
  top: 0;
  width: 100vw;
  max-width: none;
  min-width: 0;
  height: calc(100% + var(--footer-height, 140px));
  object-fit: fill;
  transform-origin: 85% 10%;
  animation: contact-route-breathe 18s ease-in-out infinite;
}
@keyframes contact-route-breathe {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(3px,-3px); }
}
@media(max-width:700px) {
  body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-contact-zigzag.png"] { left: -5vw; }
}
@media(prefers-reduced-motion:reduce) {
  body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-contact-zigzag.png"] { animation: none; }
}

/* One consistent bold weight across the entire hero wordmark. */
.hero h1, .hero h1 i, .hero h1 span {
  font-weight: 800 !important;
  font-style: normal !important;
}

/* Replace the contact zigzag with the polished knot, tucked into the lower right. */
body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-knot.png"] {
  left: auto;
  right: -15%;
  top: auto;
  bottom: -55px;
  width: clamp(350px, 49vw, 760px);
  height: auto;
  max-width: none;
  object-fit: contain;
  --angle: 18deg;
  --float-time: 16s;
}
@media(max-width:700px) {
  body:has(.hero) main > #contact .chrome-piece.chrome-large[src$="blue-chrome-knot.png"] {
    right: -32%;
    bottom: -20px;
    width: 76vw;
    min-width: 240px;
  }
}

/* RU / EN stays visible in the top navigation on desktop and mobile. */
.language-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(8,10,49,.45);
  border-radius: 30px;
  padding: 3px;
  color: #080a31;
  background: rgba(245,245,243,.65);
  backdrop-filter: blur(8px);
}
.language-switch button {
  appearance: none;
  border: 0;
  border-radius: 22px;
  padding: 7px 10px;
  min-height: 34px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.language-switch button[aria-pressed="true"] { background: #080a31; color: #f5f5f3; }
.language-switch button:focus-visible { outline: 2px solid #2240dc; outline-offset: 3px; }
.language-switch > span { font-size: 11px; opacity: .45; }
@media(max-width:1000px) {
  .header { gap: 14px; }
  .header nav { gap: 20px; }
}
@media(max-width:700px) {
  .language-switch { margin-left: auto; }
  .language-switch button { padding: 7px 9px; }
  .header .nav-cta { display: none; }
}
html[lang="en"] #work .case-title-panel small { letter-spacing: .035em; }

/* Detailed Astrostori case: the same visual language as the landing page. */
body.case-page { --landing-background: #f5f5f3; background: #f5f5f3; color: #080a31; }
.case-page main { position: relative; isolation: isolate; overflow-x: clip; }
.case-page main > section { position: relative; background: transparent; padding-left: 4vw; padding-right: 4vw; }
.case-page main > section > :not(.case-decoration) { position: relative; z-index: 1; }
.case-page .header { color: #080a31; background: transparent; }
.case-page .section { padding-top: 64px; padding-bottom: 64px; }
.case-page .case-detail-hero { padding-top: 140px; padding-bottom: 70px; }
.case-hero-inner { width: 100%; text-align: center; }
.case-page .case-back { display: block; width: fit-content; margin-bottom: 36px; font-size: 13px; font-weight: 500; }
.case-page .case-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: fit-content; border-radius: 32px; padding: 13px 22px;
  background: #080a31; color: #f5f5f3; font-size: 13px; line-height: 1.4;
  font-weight: 600; letter-spacing: .06em;
}
.case-page .case-detail-hero h1 { margin: 34px 0 0; font-size: clamp(52px, 11vw, 175px); line-height: 1; font-weight: 750; letter-spacing: -.055em; }
.case-page .case-brand-note { font-size: clamp(15px, 1.4vw, 21px); line-height: 1.4; margin: 10px 0 0; font-weight: 400; }
.case-page .case-hero-tags { margin: 25px 0 0; font-size: 11px; letter-spacing: .07em; font-weight: 500; }
.case-page .case-detail-lead { max-width: 780px; margin: 32px auto 28px; font-size: clamp(20px, 2.1vw, 31px); line-height: 1.4; letter-spacing: -.02em; }
.case-page .case-outline-link, .case-page #contact > a {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #080a31; border-radius: 32px; padding: 15px 24px;
  font-size: 13px; line-height: 1.2; font-weight: 600;
}
.case-page .case-outline-link:hover { background: #080a31; color: #f5f5f3; }
.case-section-heading { text-align: center; margin: 0 0 32px; }
.case-section-heading h2 { font-size: clamp(34px, 5vw, 76px); line-height: 1.1; font-weight: 650; letter-spacing: -.035em; margin: 24px 0 0; }
.case-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.case-intro-panel { border: 1.5px solid #080a31; border-radius: 34px; padding: clamp(26px, 3.3vw, 52px); background: #f5f5f3; display: flex; align-items: center; }
.case-intro-panel:first-child { background: #080a31; color: #f5f5f3; }
.case-intro-panel p { margin: 0; font-size: clamp(18px, 1.8vw, 27px); line-height: 1.5; font-weight: 400; }
.case-story-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.case-story-item { border: 1.5px solid #080a31; border-radius: 34px; background: #f5f5f3; color: #080a31; transition: background-color .25s ease, color .25s ease; }
.case-story-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px minmax(0,1fr) 28px; align-items: center; gap: 24px; padding: 26px 32px; min-height: 100px; }
.case-story-item summary::-webkit-details-marker { display: none; }
.case-story-item summary::marker { content: ''; }
.case-story-number { opacity: .5; font-size: 30px; font-weight: 300; line-height: 1; }
.case-story-item h3 { font-size: clamp(20px, 2.1vw, 32px); font-weight: 550; line-height: 1.2; margin: 0; letter-spacing: -.015em; }
.case-story-toggle { position: relative; width: 26px; height: 26px; }
.case-story-toggle::before, .case-story-toggle::after { content: ''; position: absolute; left: 3px; right: 3px; top: 12px; height: 2px; background: currentColor; }
.case-story-toggle::after { transform: rotate(90deg); transition: transform .2s ease; }
.case-story-item[open] .case-story-toggle::after { transform: none; }
.case-story-item[open] { background: #080a31; color: #f5f5f3; }
.case-story-description { padding: 0 84px 30px 104px; }
.case-story-description p { max-width: 1000px; margin: 0; font-size: clamp(17px, 1.5vw, 23px); line-height: 1.55; font-weight: 400; }
.case-story-item summary:focus-visible { outline: 2px solid #2240dc; outline-offset: 4px; border-radius: 32px; }
@media(hover:hover) and (pointer:fine) { .case-story-item:hover { background: #080a31; color: #f5f5f3; } }
.case-results-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.case-result-card { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 280px; padding: 36px; border: 1.5px solid #080a31; border-radius: 34px; background: #f5f5f3; color: #080a31; }
.case-result-card:nth-child(1) { background: #080a31; color: #f5f5f3; }
.case-result-card:nth-child(2) { background: #e5e9fa; }
.case-result-card:nth-child(5) { grid-column: 1 / -1; min-height: 230px; }
.case-result-card b { font-size: clamp(68px, 8vw, 125px); font-weight: 750; line-height: 1; letter-spacing: -.045em; }
.case-result-card p { margin: 0; font-size: clamp(18px, 1.8vw, 27px); line-height: 1.4; }
.case-page #contact { padding-top: 48px; padding-bottom: 28px; }
.case-page #contact > span { display: flex; width: fit-content; margin: 0 auto 32px; padding: 16px 30px; border-radius: 40px; background: #080a31; color: #f5f5f3; font-size: clamp(17px,1.5vw,22px); font-weight: 600; }
.case-page #contact h2 { font-weight: 700; }
.case-page #contact h2 em { font-weight: 400 !important; }
.case-page #contact > a { background: #080a31; color: #f5f5f3; }
.case-page footer.site-footer { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px 40px; padding: 28px 4vw 24px; background: transparent; color: #080a31; font-size: 13px; font-weight: 400; }
.case-page .site-footer .footer-end span { display: inline; }
.case-decoration { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.case-decoration img.chrome-piece { --angle: -15deg; --float-time: 16s; --float-delay: -4s; width: clamp(250px, 38vw, 600px); }
.case-hero-knot img { --x: 84%; --y: 8%; --angle: 18deg; }
.case-hero-pebble img { --x: -30%; --y: 35%; }
.case-before-loop img { --x: 80%; --y: 45%; --angle: 12deg; }
.case-after-star img { --x: -25%; --y: 55%; --float-time: 19s; }
.case-results-knot img { --x: 82%; --y: 10%; }
@media(max-width:700px) {
  .case-page main > section { padding-left: 5vw; padding-right: 5vw; }
  .case-page .case-detail-hero { padding-top: 100px; padding-bottom: 38px; }
  .case-page .case-back { margin-bottom: 28px; }
  .case-page .section { padding-top: 36px; padding-bottom: 36px; }
  .case-page .case-detail-hero h1 { font-size: 13vw; }
  .case-page .case-detail-lead { font-size: 21px; }
  .case-overview-grid, .case-results-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .case-intro-panel, .case-story-item, .case-result-card { border-radius: 26px; }
  .case-story-item summary { grid-template-columns: 28px minmax(0,1fr) 22px; gap: 12px; padding: 22px 18px; }
  .case-story-number { font-size: 24px; }
  .case-story-description { padding: 0 22px 26px 58px; }
  .case-story-item h3 { font-size: 21px; }
  .case-result-card { min-height: 230px; padding: 28px; }
  .case-result-card:nth-child(5) { grid-column: auto; }
  .case-decoration img.chrome-piece { width: 70vw; }
  .case-page footer.site-footer { grid-template-columns: 1fr; padding: 24px 5vw; }
}
@media(prefers-reduced-motion:reduce) { .case-story-item, .case-story-toggle::after { transition: none; } }

/* Keep the large hero sculptures outside the text on narrow screens. */
@media(max-width:700px) {
  .case-page .case-hero-pebble img { --x: -72%; --y: 25%; }
  .case-page .case-hero-knot img { --x: 96%; --y: 0%; }
}

.case-page .case-contact-knot img.chrome-piece { --x: 82%; --y: 12%; --angle: 18deg; width: clamp(260px,42vw,650px); }
@media(max-width:700px) { .case-page .case-contact-knot img.chrome-piece { --x: 92%; width: 65vw; } }

/* Give the longer case closing message a comfortable reading width. */
.case-page #contact h2.case-next-title {
  width: 73%;
  max-width: 1050px;
  font-size: clamp(48px, 6.5vw, 104px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
@media(max-width:700px) {
  .case-page #contact h2.case-next-title { width: 90%; font-size: clamp(40px, 9vw, 64px); }
}

/* A tighter mobile hero with deliberate gaps instead of distributed empty space. */
@media(max-width:700px) {
  body:has(.hero) main > .hero {
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    padding-top: 100px;
    padding-bottom: 36px;
    gap: 0;
  }
  .hero .hero-meta { margin: 0; }
  .hero h1 { margin-top: 40px; margin-bottom: 32px; }
  .hero .hero-bottom { margin-top: 0; }
}
/* The detailed case does not need a contact badge on desktop. */
@media(min-width:701px) {
  .case-page #contact > span { display: none; }
}

/* Detailed case results share the landing page's blue card palette. */
.case-page .case-result-card:nth-child(1) {
  background: #080a31; border-color: #080a31; color: #f5f5f3;
}
.case-page .case-result-card:nth-child(2) {
  background: linear-gradient(135deg,#192582,#2240dc); border-color: transparent; color: #f5f5f3;
}
.case-page .case-result-card:nth-child(3) {
  background: #e5e9fa; border-color: #e5e9fa; color: #080a31;
}
.case-page .case-result-card:nth-child(4) {
  background: #f5f5f3; border-color: #080a31; color: #080a31;
}
.case-page .case-result-card:nth-child(5) {
  background: #080a31; border-color: #080a31; color: #f5f5f3;
}
.case-page .case-result-card b,
.case-page .case-result-card p { color: inherit; }

/* Keep the landing case sculptures outside mobile text, including their full sway. */
@media(max-width:700px) {
  body:has(.hero) main > #work .chrome-piece.chrome-large.moved-team[src$="blue-chrome-pebble.png"] {
    left: auto;
    right: calc(100% + 24px);
    top: 30%;
  }
  body:has(.hero) main > #work .chrome-piece.chrome-large.moved-team[src$="blue-chrome-knot.png"] {
    left: calc(100% + 12px);
    right: auto;
  }
}

/* Compact desktop ending for the detailed case. */
@media(min-width:701px) {
  .case-page #case-results { padding-bottom: 24px; }
  .case-page #contact { padding-top: 12px; padding-bottom: 16px; }
  .case-page #contact h2.case-next-title { margin-top: 12px; margin-bottom: 28px; }
  .case-page footer.site-footer { padding-top: 20px; padding-bottom: 18px; gap: 18px 40px; }
  .case-page .case-contact-knot img.chrome-piece { --y: 4%; width: clamp(240px,34vw,520px); }
}

/* Small visible edge accents around the mobile case, clear of the copy. */
@media(max-width:700px) {
  body:has(.hero) main > #work .chrome-piece.chrome-large.moved-team[src$="blue-chrome-pebble.png"] {
    left: auto;
    right: calc(100% - 12px);
    top: 12%;
    width: 190px;
    min-width: 0;
    --angle: 0deg;
  }
  body:has(.hero) main > #work .chrome-piece.chrome-large.moved-team[src$="blue-chrome-knot.png"] {
    left: calc(100% - 12px);
    right: auto;
    top: 55%;
    width: 180px;
    min-width: 0;
    --angle: 0deg;
  }
  #work .chrome-piece.moved-team { animation-name: mobile-case-edge-float; }
}
@keyframes mobile-case-edge-float {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(0,-9px); }
}

/* Mobile sculptures remain clearly visible in the free space around section badges. */
@media(max-width:700px) {
  body:has(.hero) main > #work .chrome-piece.chrome-large.moved-team[src$="blue-chrome-pebble.png"] {
    left: -72px; right: auto; top: 0;
    width: 165px; height: 135px;
    object-fit: fill;
    --angle: 0deg;
  }
  body:has(.hero) main > #work .chrome-piece.chrome-large.moved-team[src$="blue-chrome-knot.png"] {
    left: auto; right: -70px; top: 14px;
    width: 170px; height: 145px;
    object-fit: contain;
    --angle: 0deg;
  }
  /* A filled decorative band separates the header from the case title. */
  .case-page .case-detail-hero h1 { margin-top: 110px; }
  .case-page .case-hero-pebble img.chrome-piece {
    left: -65px; top: 160px;
    width: 175px; height: 135px;
    object-fit: fill; --angle: 0deg;
    animation-name: mobile-case-edge-float;
  }
  .case-page .case-hero-knot img.chrome-piece {
    left: auto; right: -70px; top: 145px;
    width: 180px; height: 145px;
    object-fit: contain; --angle: 0deg;
    animation-name: mobile-case-edge-float;
  }
  .case-page .case-before-loop img.chrome-piece {
    left: auto; right: -70px; top: -70px;
    width: 190px; height: 145px;
    object-fit: contain; --angle: 0deg;
    animation-name: mobile-case-edge-float;
  }
  .case-page .case-after-star img.chrome-piece {
    left: -65px; top: -65px;
    width: 175px; height: 130px;
    object-fit: contain; --angle: 0deg;
    animation-name: mobile-case-edge-float;
  }
  .case-page .case-results-knot img.chrome-piece {
    left: auto; right: -75px; top: -65px;
    width: 190px; height: 135px;
    object-fit: contain; --angle: 0deg;
    animation-name: mobile-case-edge-float;
  }
  .case-page #contact > span { display: none; }
}

/* Show the case closing sculpture fully enough on phones, below the headline. */
@media(max-width:700px) {
  .case-page #contact { padding-bottom: 150px; }
  .case-page .case-contact-knot img.chrome-piece {
    left: auto;
    right: -45px;
    top: auto;
    bottom: -10px;
    width: 225px;
    height: 190px;
    object-fit: contain;
    --angle: 8deg;
    animation-name: mobile-case-edge-float;
  }
}