/* WHB V2: each cover owns its motion. Content, brand pixels and film audio are independent. */
.wm-cover,[data-whb-cover]{--wm-ink:#25283b;--wm-plum:#813b52;--wm-paper:#f7f4f2;--wm-line:#b58092;position:relative;isolation:isolate;overflow:hidden;border-radius:18px;background:var(--ui-surface,#f7f4f2);min-width:0}
.wm-cover{width:100%;aspect-ratio:1000/650;margin-block:24px;max-height:660px}.wm-compact{max-height:380px;aspect-ratio:1000/490}.wm-wide{grid-column:1/-1;margin-top:0}
.wm-cover>img,.wm-cover>picture{width:100%;height:100%;object-fit:contain;display:block;margin:0!important}.wm-cover>picture img{width:100%;height:100%;object-fit:contain}
.wm-canvas{position:absolute;inset:0;direction:ltr;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 27% 13%,#6a445865,transparent 60%),linear-gradient(135deg,#2a2d40,#171925 75%);opacity:0;transition:opacity .25s ease}
.wm-ready>.wm-canvas{opacity:1}.wm-canvas:after{content:'';position:absolute;inset:78% 0 0;background:linear-gradient(transparent,#813b5212);pointer-events:none}
html:not(.dark) .wm-canvas{background:radial-gradient(ellipse at 20% 12%,#813b521a,transparent 65%),linear-gradient(145deg,#f7f4f2,#d9d5d8)}
.wm-art{position:absolute;inset:0;z-index:2}.wm-motif{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--wm-line);stroke-width:1;opacity:.3;overflow:visible}.wm-motif path,.wm-motif rect,.wm-motif circle,.wm-motif ellipse{vector-effect:non-scaling-stroke}
.wm-ray{position:absolute;inset:-25% 26% -25% 12%;background:linear-gradient(105deg,transparent 25%,#f7f4f20c 46%,#f7f4f230 49%,#f7f4f205 56%,transparent 68%);transform:skewX(-13deg);opacity:.65;z-index:1;mix-blend-mode:screen}
.wm-part{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);z-index:3;filter:drop-shadow(0 12px 16px #0003);overflow:hidden;border:0;background:transparent;padding:0;border-radius:0;transform:none!important}
.wm-part img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;display:block;transform:none!important;transition:none!important;box-shadow:none!important;border-radius:0!important}
.wm-part[data-kind=brand]{background:transparent;border:0;padding:0;filter:drop-shadow(0 10px 14px #0002)}
.wm-part[data-kind=phone],.wm-part[data-kind=screen],.wm-part[data-kind=wide]{border:0;padding:0;background:transparent;border-radius:0;box-shadow:none}
.wm-paper{position:absolute;left:12%;top:26%;width:32%;height:44%;background:linear-gradient(135deg,#a16d7f,#472f41);box-shadow:0 12px 20px #0002;border:1px solid #c69dac33;transform:rotate(-11deg);z-index:1;opacity:.55}
.wm-paper:nth-of-type(2){left:55%;top:21%;width:27%;height:54%;transform:rotate(8deg);background:linear-gradient(140deg,#813b5233,#b5809212)}
[data-design=grid] .wm-paper,[data-design=timeline] .wm-paper,[data-design=contact] .wm-paper,[data-design=branch] .wm-paper{display:none}
[data-design=identity] .wm-paper{left:23%;top:26%;width:27%;height:62%}[data-design=process] .wm-paper{left:9%;width:70%;height:55%;top:18%;transform:rotate(-5deg)}
[data-design=crescent] .wm-motif{stroke:#d1bda0;opacity:.8}[data-design=ribbon] .wm-motif{stroke:#d49ba9;stroke-width:5;opacity:.45}[data-design=timeline] .wm-motif{stroke-width:3}
.wm-control{position:absolute;bottom:12px;left:12px;z-index:8;width:44px;height:44px;display:grid;place-items:center;background:#25283be8;color:#fff;border:1px solid #ffffff55;border-radius:50%;cursor:pointer;box-shadow:0 4px 14px #0002}
.wm-control svg{width:18px;height:18px}.wm-control:focus-visible{outline:3px solid #b58092;outline-offset:3px}.wm-control[hidden]{display:none!important}.wm-control:disabled{opacity:.55;cursor:default}.wm-control[aria-pressed=true] .wm-pause,.wm-control[aria-pressed=false] .wm-play{display:none}
.wm-started .wm-part:not([data-kind=brand]){animation:wm-reveal 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*.15s);animation-play-state:var(--wm-play,paused)}
.wm-started .wm-motif{animation:wm-path 10s ease-in-out infinite;animation-play-state:var(--wm-play,paused)}
.wm-started .wm-ray{animation:wm-light 10s ease-in-out infinite;animation-play-state:var(--wm-play,paused)}
.wm-started[data-design=identity] .wm-paper,.wm-started[data-design=process] .wm-paper{animation:wm-paper 10s ease-in-out infinite;animation-play-state:var(--wm-play,paused)}
@keyframes wm-reveal{from{clip-path:inset(100% 0 0 0);opacity:.4}to{clip-path:inset(0);opacity:1}}
@keyframes wm-path{0%,100%{stroke-dasharray:1100;stroke-dashoffset:0;opacity:.25}45%{stroke-dashoffset:-85;opacity:.45}65%{stroke-dashoffset:-85;opacity:.45}}
@keyframes wm-light{0%,100%{translate:-9% 0;opacity:.15}45%,60%{translate:9% 0;opacity:.45}}
@keyframes wm-paper{0%,100%{translate:0 0}45%,60%{translate:0 -7px}}
.hero-visual[data-whb-cover]{position:absolute;inset:0;height:100%;transform:none!important;clip-path:none!important;border-radius:0}.hero-visual[data-whb-cover] .wm-canvas{right:43%}.hero-visual[data-whb-cover]>picture img{transform:none!important;transition:none!important}.hero-visual[data-whb-cover]:after{z-index:4;pointer-events:none}
.campaign-teaser-art[data-whb-cover]{padding:0!important;overflow:hidden!important;position:relative;height:420px!important}.campaign-teaser-art[data-whb-cover]>img{transform:none!important;object-fit:contain!important}.campaign-teaser-art[data-whb-cover] .wm-control{display:none}
.wm-link-wrap{position:relative;padding-bottom:60px}.wm-link-wrap>.wm-control{left:12px;bottom:8px}.wm-film-frame{position:relative;overflow:hidden;border-radius:18px;width:min(100%,280px);justify-self:center;padding-bottom:60px}.wm-film-frame>.film-cover{width:100%;height:auto;margin:0}.wm-film-frame>.wm-control{width:44px;height:44px;left:12px;bottom:8px}.wm-film-trace{position:absolute;inset:8px 8px 68px;pointer-events:none;border:1px solid #b58092aa;border-radius:12px;box-shadow:inset 0 0 30px #b5809222}.wm-film-frame.wm-started .wm-film-trace{animation:wm-film 10s ease-in-out infinite;animation-play-state:var(--wm-play,paused)}@keyframes wm-film{0%,100%{opacity:.3;box-shadow:inset 0 0 15px #b5809211}50%{opacity:.9;box-shadow:inset 0 0 32px #b5809255}}
.agency-final-cta>.wm-cover{max-width:620px;margin-inline:auto}.home-services>.wm-cover{margin-bottom:32px}
@media(max-width:699px){.wm-cover{aspect-ratio:600/570;max-height:none;border-radius:14px}.wm-compact{aspect-ratio:600/480}.wm-part{left:calc(var(--mx)*1%);top:calc(var(--my)*1%);width:calc(var(--mw)*1%);height:calc(var(--mh)*1%);padding:0}.wm-part[data-kind=screen]{border-width:0}.wm-part[data-kind=phone]{border-width:0;border-radius:0}.wm-control{bottom:10px;left:10px}.hero-visual[data-whb-cover] .wm-canvas{inset:0 0 14px}.hero-visual[data-whb-cover]:after{z-index:4}.campaign-teaser-art[data-whb-cover]{height:350px!important}.wm-link-wrap>.wm-control{left:12px;bottom:8px}.home-intro>.wm-cover{margin:0}.wm-part[data-kind=wide]{padding:0}}
@media(prefers-reduced-motion:reduce){.wm-canvas{transition:none}.wm-started .wm-part,.wm-started .wm-motif,.wm-started .wm-ray,.wm-started .wm-paper,.wm-film-frame .wm-film-trace{animation:none!important;translate:none!important;clip-path:none!important}}
.wm-reduced .wm-part,.wm-reduced .wm-motif,.wm-reduced .wm-ray,.wm-reduced .wm-paper,.wm-reduced .wm-film-trace{animation:none!important;translate:none!important;clip-path:none!important}
.wm-started .wm-part:nth-child(n+4){animation:none}.wm-started .wm-motif,.wm-started .wm-ray{animation-delay:1.5s}.wm-started[data-design=identity] .wm-paper:not(:first-child),.wm-started[data-design=process] .wm-paper:not(:first-child){animation:none}.wm-started[data-design=identity] .wm-paper:first-child,.wm-started[data-design=process] .wm-paper:first-child{animation-delay:1.5s}
/* Different visual events; artwork pixels and agency logos stay fixed. */
.wm-started[data-design=gates] .wm-part:not([data-kind=brand]),.wm-started[data-design=arches] .wm-part:not([data-kind=brand]){animation-name:wm-open}
.wm-started[data-design=fan] .wm-part:not([data-kind=brand]),.wm-started[data-design=facets] .wm-part:not([data-kind=brand]){animation-name:wm-diagonal}
.wm-started[data-design=wave] .wm-motif{animation-name:wm-wave}
.wm-started[data-design=process] .wm-motif,.wm-started[data-design=brief] .wm-motif{animation:wm-build 1.2s ease 0s 1 both;animation-play-state:var(--wm-play,paused)}
[data-design=grid] .wm-ray{inset:auto;left:14%;top:8%;width:21%;height:40%;border:2px solid #e6c4cf;background:transparent;transform:none;mix-blend-mode:normal;border-radius:4px}
.wm-started[data-design=grid] .wm-ray{animation-name:wm-grid}
[data-design=timeline] .wm-ray{inset:auto;left:9%;top:74%;width:3px;height:12%;transform:none;background:#d2a8b8;mix-blend-mode:normal;box-shadow:0 0 14px #d2a8b8}
.wm-started[data-design=timeline] .wm-ray{animation-name:wm-track}
[data-design=contact] .wm-ray{inset:auto;left:81%;top:41%;width:28px;height:28px;border-radius:50%;background:#b58092;transform:none;mix-blend-mode:normal}
.wm-started[data-design=contact] .wm-ray{animation:wm-contact 4s ease 1.5s 1 both;animation-play-state:var(--wm-play,paused)}
.wm-started[data-design=contact] .wm-motif,.wm-started[data-design=branch] .wm-motif{animation:wm-build 1.2s ease .3s 1 both;animation-play-state:var(--wm-play,paused)}
[data-design=book] .wm-paper{transform:perspective(800px) rotateY(-24deg) rotate(-7deg)}
@keyframes wm-open{from{clip-path:inset(0 50%);opacity:.6}to{clip-path:inset(0);opacity:1}}
@keyframes wm-diagonal{from{clip-path:polygon(0 0,0 0,0 100%,0 100%);opacity:.5}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}}
@keyframes wm-wave{0%,100%{translate:0 0;opacity:.4}50%{translate:0 -7px;opacity:.65}}
@keyframes wm-build{from{stroke-dasharray:1700;stroke-dashoffset:1700;opacity:.2}to{stroke-dasharray:1700;stroke-dashoffset:0;opacity:.6}}
@keyframes wm-grid{0%,100%{translate:0 0;opacity:.3}30%{translate:124% 0;opacity:.8}60%{translate:248% 0;opacity:.8}80%{translate:124% 0;opacity:.5}}
@keyframes wm-track{0%,100%{left:9%;opacity:.3}50%,62%{left:90%;opacity:.9}}
@keyframes wm-contact{0%,100%{opacity:.3;box-shadow:0 0 0 0 #b5809200}25%,65%{opacity:.7;box-shadow:0 0 0 15px #b5809200}40%{opacity:.3;box-shadow:0 0 0 0 #b5809244}}
@media(max-width:699px){[data-design=grid] .wm-ray{left:6%;width:27%}.wm-started[data-design=grid] .wm-ray{animation-name:wm-grid-mobile}}
@keyframes wm-grid-mobile{0%,100%{translate:0 0;opacity:.3}30%{translate:111% 0;opacity:.8}60%{translate:222% 0;opacity:.8}80%{translate:111% 0;opacity:.5}}
@media(prefers-reduced-motion:reduce){.wm-started .wm-part,.wm-started .wm-motif,.wm-started .wm-ray,.wm-started .wm-paper{animation:none!important;translate:none!important;clip-path:none!important}}

/* V2.2: protect the artwork from controls and use an actual feature-card width. */
.wm-has-control .wm-art{bottom:60px}
.wm-cover.wm-has-control>img,.wm-cover.wm-has-control>picture{height:calc(100% - 60px)}
.wm-cover>.wm-control{bottom:8px;left:12px}
.wm-cover:has(+h1),.wm-cover:has(+h2){margin-block-end:28px}
.campaign-teaser.wm-teaser{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding:clamp(20px,4vw,44px);min-height:0;align-items:center}
.campaign-teaser.wm-teaser>div{min-width:0}
.campaign-teaser.wm-teaser h2{font-size:clamp(28px,3.5vw,44px);line-height:1.5;max-width:22ch;text-wrap:balance}
.campaign-teaser-art[data-whb-cover]{height:auto!important;aspect-ratio:1000/620;max-height:460px}
.wm-part img{background:transparent!important;border:0!important;padding:0!important}
@media(min-width:700px){.home-subscription .wm-cover{aspect-ratio:600/570;max-height:none}.home-subscription .wm-part{left:calc(var(--mx)*1%);top:calc(var(--my)*1%);width:calc(var(--mw)*1%);height:calc(var(--mh)*1%)}}
@media(max-width:699px){.campaign-teaser.wm-teaser{grid-template-columns:minmax(0,1fr);gap:24px;padding:20px}.campaign-teaser-art[data-whb-cover]{height:auto!important;aspect-ratio:600/510}.wm-film-frame{width:min(100%,248px)}.wm-part{filter:drop-shadow(0 8px 12px #0003)}.home-section-heading{flex-wrap:wrap;align-items:center}.home-section-heading .home-text-link{margin-top:0}}

/* V2.3: a bounded image row, intrinsic copy, then controls on narrow screens.
   Keep the fallback out of flow so neither its intrinsic ratio nor image loading
   adds a second hero height. Overlaid scene rows still reserve the longest copy. */
.home-hero .hero-visual[data-whb-cover]>picture{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:699px){
  .home-hero{min-height:0;height:auto}
  .home-hero .hero-scene{display:grid;grid-template-rows:auto 1fr}
  .home-hero .hero-visual[data-whb-cover]{position:relative;inset:auto;width:100%;height:auto;min-height:0;aspect-ratio:5/4}
  .home-hero .hero-visual[data-whb-cover] .wm-canvas{inset:0}
  .home-hero .hero-visual[data-whb-cover]:after{background:linear-gradient(0deg,#252636,transparent 12%)}
  .home-hero .hero-copy{position:relative;inset:auto;width:100%;min-height:0;justify-content:flex-start;padding:12px 24px 24px}
  .home-hero .hero-controls{position:relative;inset:auto;margin:0;padding:0 20px 20px;gap:12px}
}
@media(max-width:359px){
  .home-hero .hero-copy{padding-inline:20px}
  .home-hero .hero-controls{padding-inline:14px}
}