/* LARA Media Group — visual layer v3 (2026-10-05), builds on v2
   Additive layer on top of /assets/index-*.css. Everything here can be removed by deleting
   the <link id="lara-v3-css"> tag. Motion only runs when <html> carries .v2-motion
   (set by the inline head script, skipped for prefers-reduced-motion). */

:root{
  --v2-ease: cubic-bezier(.2,.75,.25,1);
  --v2-ease-out: cubic-bezier(.16,1,.3,1);
  --v2-copy: color-mix(in srgb, var(--ink) 80%, var(--porcelain));
  --v2-copy-dark: color-mix(in srgb, var(--paper) 84%, transparent);
}

/* ---------- 1. Bug fixes ---------- */
/* Mobile: the detail line was forced into column 2, splitting every service card in two. */
.capabilityCard{grid-template-columns:minmax(0,1fr)}
.capabilityCard .capabilityDetail{grid-column:1/-1}
/* ChimeHound: six results in a four-column grid left an orphaned, misaligned second row. */
.caseEvidenceGrid:has(> :nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
.caseEvidenceGrid:has(> :nth-child(6)) > div:nth-child(3n+1){border-left:0;padding-left:0}
.caseEvidenceGrid:has(> :nth-child(6)) > div:nth-child(n+4){border-top:1px solid var(--line)}
@media (width<=900px){
  .caseEvidenceGrid:has(> :nth-child(6)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .caseEvidenceGrid:has(> :nth-child(6)) > div{border-left:0!important;padding-left:0!important;border-top:1px solid var(--line)}
  .caseEvidenceGrid:has(> :nth-child(6)) > div:nth-child(2n){border-left:1px solid var(--line)!important;padding-left:clamp(1rem,4vw,2rem)!important}
}
/* Home lists every office in the contact block and again in the footer: keep one. */
.contact ~ .siteFooter .siteFooterOffices,
main:has(.contact) .siteFooter .siteFooterOffices{display:none}

/* ---------- 2. Readability: body copy was 13–14px and pale ---------- */
.outcomeGrid article>p,
.capabilityCard>p,
.workingSteps article>p,
.sectionHeading>p:not(.kicker),
.platformHeading>p:not(.kicker),
.productSystemHeading>p:not(.kicker),
.creativeHeader>p:not(.kicker),
.workingHeading>p:not(.kicker),
.partnerIntro>p:not(.kicker),
.caseApproachGrid article>p{
  font-size:clamp(1rem,.95rem + .22vw,1.12rem);
  line-height:1.62;
}
.outcomeGrid article>p,.capabilityCard>p,.caseApproachGrid article>p,
.sectionHeading>p:not(.kicker),.creativeHeader>p:not(.kicker),.partnerIntro>p:not(.kicker){color:var(--v2-copy)}
.platformHeading>p:not(.kicker),.productSystemHeading>p:not(.kicker),.workingHeading>p:not(.kicker),
.workingSteps article>p{color:var(--v2-copy-dark)}
.relationshipGroup header p{font-size:.98rem;color:var(--v2-copy)}

/* ---------- 3. Selected work (new homepage section) ---------- */
.v2Work{background:var(--paper)}
.v2Work .sectionShell{padding-bottom:calc(var(--section-space) * .8)}
.v2WorkHead{grid-column:2;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(16rem,.7fr);gap:1.5rem clamp(3rem,7vw,7rem);align-items:end}
.v2WorkHead .kicker{grid-column:1/-1;margin:0}
.v2WorkHead h2{margin:0;letter-spacing:-.03em;font-size:clamp(3.2rem,7vw,7rem);font-weight:450;line-height:.9}
.v2WorkHead h2 em{display:block;color:var(--signal-red);font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.v2WorkHead p:not(.kicker){margin:0 0 .6rem;color:var(--v2-copy);font-size:clamp(1rem,.95rem + .22vw,1.12rem);line-height:1.62}
.v2WorkHead .textLink{margin-top:.9rem}
.v2WorkGrid{grid-column:2;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(1rem,2vw,1.75rem);margin-top:clamp(2.5rem,5vw,4.5rem)}
.v2WorkCard{display:flex;flex-direction:column;color:inherit;text-decoration:none;background:var(--porcelain);min-width:0;isolation:isolate}
.v2WorkCard:first-child{grid-row:1/span 2}
.v2WorkCard figure{margin:0;overflow:hidden;background:var(--ink);aspect-ratio:16/10;position:relative}
.v2WorkCard:first-child figure{aspect-ratio:auto;flex:1 1 auto;min-height:420px}
.v2WorkCard:first-child img{object-position:50% 40%}
.v2WorkCard picture{display:block;width:100%;height:100%}
.v2WorkCard img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.1s var(--v2-ease)}
.v2WorkCard figcaption{position:absolute;left:1rem;top:1rem;background:var(--paper);color:var(--ink);font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:.45rem .6rem}
.v2WorkBody{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1.5rem;padding:clamp(1.1rem,2vw,1.6rem) clamp(1.1rem,2vw,1.6rem) clamp(1.3rem,2.2vw,1.9rem);border-top:3px solid var(--ink);transition:border-color .3s}
.v2WorkBody>span{grid-column:1/-1;color:var(--signal-red);font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.v2WorkBody h3{margin:.35rem 0 0;font-size:clamp(1.6rem,2.6vw,2.6rem);font-weight:520;letter-spacing:-.02em;line-height:.95}
.v2WorkBody p{grid-column:1;margin:.45rem 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.12;color:var(--v2-copy);max-width:30ch}
.v2WorkStat{grid-column:2;grid-row:2/span 2;align-self:end;text-align:right}
.v2WorkStat b{display:block;font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(2.6rem,4.6vw,4.6rem);line-height:.9;color:var(--ink)}
.v2WorkStat small{display:block;max-width:15ch;margin-left:auto;margin-top:.45rem;font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);line-height:1.35}
.v2WorkGo{grid-column:1/-1;display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;font-size:.75rem;font-weight:650}
.v2WorkGo .laraArrowSvg{width:1.05em;height:1.05em;transition:transform .3s var(--v2-ease)}
.v2WorkNote{grid-column:2;margin:1.4rem 0 0;max-width:80ch;color:var(--graphite);font-size:.7rem;line-height:1.55}
@media (hover:hover){
  .v2WorkCard:hover img{transform:scale(1.045)}
  .v2WorkCard:hover .v2WorkBody{border-top-color:var(--signal-red)}
  .v2WorkCard:hover .v2WorkGo .laraArrowSvg{transform:translate(3px,-3px)}
}
.v2WorkCard:focus-visible{outline:2px solid var(--signal-red);outline-offset:4px}
@media (width<=900px){
  .v2WorkHead,.v2WorkGrid,.v2WorkNote{grid-column:1}
  .v2WorkHead{grid-template-columns:1fr}
  .v2WorkGrid{grid-template-columns:1fr}
  .v2WorkCard:first-child{grid-row:auto}
  .v2WorkCard:first-child figure{aspect-ratio:16/10;min-height:0}
}
@media (width<=600px){
  .v2WorkHead h2{font-size:clamp(2.65rem,13vw,4.2rem)}
  .v2WorkBody{grid-template-columns:1fr}
  .v2WorkStat{grid-column:1;grid-row:auto;text-align:left;margin-top:.9rem}
  .v2WorkStat small{margin-left:0}
}

/* The VOU operator panel: a real photograph from the platform instead of a second text logo. */
.platformMasthead.v2HasPhoto{background:var(--ink);color:var(--paper)}
.platformMasthead.v2HasPhoto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 35%;transition:transform 1.4s var(--v2-ease)}
.platformMasthead.v2HasPhoto:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0b0b0a99 0%,#0b0b0a00 28%,#0b0b0a00 58%,#0b0b0acc 100%)}
.platformMasthead.v2HasPhoto>:not(img){position:relative;z-index:2}
.platformMasthead.v2HasPhoto>p,.platformMasthead.v2HasPhoto>strong{display:none}
.platformMasthead.v2HasPhoto .mastheadFooter{margin-top:auto;border-color:#fffdf866;color:var(--paper)}
.platformMasthead.v2HasPhoto .mastheadMeta{color:var(--paper)}
.platformMasthead.v2HasPhoto:after{z-index:2}
@media (hover:hover){.featuredPlatform:hover .platformMasthead.v2HasPhoto>img{transform:scale(1.04)}}

/* ---------- 4. Case-study index: real work instead of empty panels ---------- */
.caseCardMasthead.v2HasVisual{position:relative;padding:0;justify-content:flex-end;background:var(--ink)}
.caseCardMasthead.v2HasVisual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--v2-ease)}
.caseCardMasthead.v2HasVisual .v2Wordmark{position:relative;z-index:1;align-self:flex-start;margin:clamp(1rem,2.2vw,1.75rem);background:var(--paper);color:var(--ink);padding:.7rem .95rem .85rem;display:flex;align-items:baseline;gap:.35rem;line-height:1}
.caseCardMasthead.v2HasVisual .v2Wordmark i{font-family:var(--serif);font-style:italic;font-size:1.35rem;font-weight:400}
.caseCardMasthead.v2HasVisual .v2Wordmark b{font-size:1.45rem;font-weight:800;letter-spacing:-.02em}
@media (hover:hover){.caseCard:hover .caseCardMasthead.v2HasVisual>img{transform:scale(1.04)}}
@media (width<=900px){.caseCardMasthead.v2HasVisual{min-height:0;aspect-ratio:1/1}}

/* ---------- 5. Case-study pages: a visual band under the hero ---------- */
.v2CaseVisual{margin:0;background:var(--ink);padding:0 var(--gutter) clamp(2.5rem,5vw,4.5rem)}
.v2CaseVisual>div{max-width:var(--max-width);margin:0 auto;overflow:hidden;aspect-ratio:16/10;background:#111}
.v2CaseVisual img{display:block;width:100%;height:100%;object-fit:cover}
.v2CaseVisual figcaption{max-width:var(--max-width);margin:.9rem auto 0;color:var(--meta-dark);font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}

/* ---------- 6. Interaction polish ---------- */
.capabilityCard{transition:background .35s}
.capabilityCard .capabilityNumber,.capabilityCard h3{transition:color .35s,transform .45s var(--v2-ease)}
@media (hover:hover){
  .capabilityCard:hover{background:var(--surface-hover)}
  .capabilityCard:hover .capabilityNumber{color:var(--signal-red)}
  .capabilityCard:hover h3{transform:translateX(.4rem)}
  .productSystemCard{transition:background .22s,color .22s,box-shadow .35s,transform .45s var(--v2-ease)}
  .productSystemCard:not(.productSystemCardFeatured):hover{box-shadow:inset 0 3px 0 var(--signal-red);transform:translateY(-4px)}
  .outcomeGrid article h3{transition:transform .45s var(--v2-ease)}
  .outcomeGrid article:hover h3{transform:translateX(.35rem)}
}
/* Partner walls: full brand colour, consistent optical size, and a spotlight on hover. */
.relationshipGroup li{min-height:108px;transition:background .3s}
.relationshipGroup li img{transition:opacity .35s,filter .35s,transform .45s var(--v2-ease)}
@media (hover:hover){
  .relationshipGroup ul:hover li img{opacity:.38;filter:saturate(.35)}
  .relationshipGroup ul:hover li:hover img{opacity:1;filter:none;transform:scale(1.07)}
  .relationshipGroup ul:hover li[data-relationship=LTK]:hover img,.relationshipGroup ul:hover li[data-relationship=ShopMy]:hover img{filter:brightness(.16)}
  .relationshipGroup li:hover{background:var(--surface-hover)}
}

/* Working model: a red rule draws across each step as it enters. */
.workingSteps article{background:linear-gradient(var(--signal-red),var(--signal-red)) 0 0/0% 2px no-repeat}
.v2-motion .workingSteps article.v2-in,.v2-done .workingSteps article,html:not(.v2-motion) .workingSteps article{background-size:100% 2px;transition:background-size 1.3s var(--v2-ease) var(--v2-d,0s)}

/* Phones: seven stacked product cards became ~2,000px of scrolling. Swipe them instead. */
@media (width<=700px){
  .productSystemGrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:1px;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:0 var(--gutter);border:0;background:transparent;scroll-padding:0 var(--gutter)}
  .productSystemGrid::-webkit-scrollbar{display:none}
  .productSystemGrid>*{flex:0 0 82%;scroll-snap-align:start;border:1px solid var(--line-dark)}
  .productSystemGrid>.productSystemCardFeatured{flex-basis:88%}
  .productSystemGrid>*>a{min-height:330px}
  .v2SwipeHint{display:flex;align-items:center;gap:.6rem;margin-top:1rem;color:var(--meta-dark);font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
  .v2SwipeHint i{flex:1;height:1px;background:var(--line-dark);position:relative;overflow:hidden}
  .v2SwipeHint i:after{content:"";position:absolute;inset:0;width:var(--v2-p,14%);background:var(--paper);transition:width .2s}
}
.v2SwipeHint{display:none}

/* ---------- 7. Motion system ---------- */
@keyframes v2Rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes v2Fade{from{opacity:0}to{opacity:1}}
.v2-motion .heroTopline{animation:v2Fade .9s var(--v2-ease-out) .1s both}
.v2-motion .heroMessage h1{animation:v2Rise 1.1s var(--v2-ease-out) .15s both}
.v2-motion .heroMessage h1 em{animation:v2Rise 1.1s var(--v2-ease-out) .32s both;display:block}
.v2-motion .heroProposition{animation:v2Rise 1s var(--v2-ease-out) .5s both}
.v2-motion .heroActions{animation:v2Rise 1s var(--v2-ease-out) .62s both}
.v2-motion .heroReelHud{animation:v2Fade 1.2s var(--v2-ease-out) .9s both}

.v2-motion .v2-r{opacity:0;transform:translateY(28px);transition:opacity .9s var(--v2-ease-out) var(--v2-d,0s),transform 1.1s var(--v2-ease-out) var(--v2-d,0s)}
.v2-motion .v2-r.v2-in,.v2-done .v2-r{opacity:1;transform:none}


@media (prefers-reduced-motion:reduce){
  .v2-r,.v2-img img{opacity:1!important;transform:none!important;transition:none!important}
  .workingSteps article{background-size:100% 2px}
}
@media print{.v2-r{opacity:1!important;transform:none!important}}

/* =====================================================================
   v3 — cinematic layer
   ===================================================================== */
:root{--v3-curtain:cubic-bezier(.76,0,.24,1)}

/* ---------- A. Page-to-page transitions (cross-document View Transitions) ----------
   Old page lifts away over a signal-red stage, new page wipes up. The header stays put,
   and a case card's film morphs into the case page's hero film. Browsers without support
   simply navigate normally. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition{background:var(--signal-red)}
  ::view-transition-old(root){animation:v3VtOut .5s var(--v3-curtain) both}
  ::view-transition-new(root){animation:v3VtIn .85s var(--v3-curtain) .12s both}
  ::view-transition-group(*){animation-duration:.85s;animation-timing-function:var(--v3-curtain)}
  ::view-transition-old(lara-header),::view-transition-new(lara-header){animation:none;mix-blend-mode:normal}
  ::view-transition-image-pair(lara-case-film){isolation:auto}
  ::view-transition-old(lara-case-film),::view-transition-new(lara-case-film){animation-duration:.85s;height:100%;object-fit:cover;overflow:clip}
}
@keyframes v3VtOut{to{opacity:0;transform:translateY(-6vh) scale(.97)}}
@keyframes v3VtIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
.siteHeader{view-transition-name:lara-header}

/* ---------- B. First-visit intro (once per session) ---------- */
html.v3-intro::before{content:"";position:fixed;inset:0;z-index:2147483646;pointer-events:none;
  background:linear-gradient(var(--signal-red),var(--signal-red)) 50% calc(50% + clamp(2.6rem,6vw,4.6rem))/0% 3px no-repeat,var(--ink);
  animation:v3Line .7s var(--v2-ease-out) .25s forwards,v3Curtain .9s var(--v3-curtain) 1.05s forwards}
html.v3-intro::after{content:"LARA";position:fixed;inset:0;z-index:2147483647;pointer-events:none;display:grid;place-items:center;
  color:var(--paper);font:800 clamp(4rem,12vw,9rem)/1 "Inter Tight Variable","Arial Narrow",Arial,sans-serif;letter-spacing:-.04em;
  animation:v3Mark 1.35s var(--v2-ease-out) both}
@keyframes v3Line{to{background-size:clamp(9rem,22vw,17rem) 3px,auto}}
@keyframes v3Curtain{to{transform:translateY(-100%)}}
@keyframes v3Mark{0%{opacity:0;transform:translateY(34px);filter:blur(8px)}30%{opacity:1;transform:none;filter:none}72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-46px)}}

/* ---------- C. Hero choreography ---------- */
/* Word-mask reveal (JS splits the words; until then the heading waits, with a 3s safety net). */
.v2-motion .heroMessage h1:not(.v3-split){opacity:0}
.v2-done .heroMessage h1{opacity:1}
.v2-motion .heroMessage h1.v3-split,.v2-motion .heroMessage h1.v3-split em{animation:none}
.v3-w{display:inline-block;vertical-align:top;clip-path:inset(-.6em -.5em -.8em -.5em)}   /* generous: ascenders, long italic descenders and overhangs never cut */
.v3-w>span{display:inline-block;will-change:transform}
.v2-motion .v3-split .v3-w>span{transform:translateY(250%);transition:transform 1.1s var(--v2-ease-out) calc(var(--wi,0) * 45ms + var(--wd,0s))}
.v2-motion .heroMessage h1.v3-split .v3-w>span{transform:none;animation:v3WordUp 1.15s var(--v2-ease-out) calc(var(--wi,0) * 55ms + .2s) both}
.v3-intro .heroMessage h1.v3-split .v3-w>span{animation-delay:calc(var(--wi,0) * 55ms + 1.55s)}
.v3-intro .heroTopline,.v3-intro .heroProposition,.v3-intro .heroActions,.v3-intro .heroReelHud{animation-delay:1.7s!important}
@keyframes v3WordUp{from{transform:translateY(250%)}to{transform:none}}
.v2-motion h2.v3-split.v2-in .v3-w>span,.v2-done .v3-split .v3-w>span{transform:none}
.v2-motion h2.v3-split.v2-r{opacity:1;transform:none}

/* Case pages and the case index make the same entrance after a page transition. */
.v2-motion :is(.caseDetailHero,.caseIndexHero) h1:not(.v3-split){opacity:0}
.v2-done :is(.caseDetailHero,.caseIndexHero) h1{opacity:1}
.v2-motion :is(.caseDetailHero,.caseIndexHero) h1.v3-split .v3-w>span{transform:none;animation:v3WordUp 1.1s var(--v2-ease-out) calc(var(--wi,0) * 50ms + .3s) both}
.v3-intro :is(.caseDetailHero,.caseIndexHero) h1.v3-split .v3-w>span{animation-delay:calc(var(--wi,0) * 50ms + 1.55s)}

/* Scroll: the film recedes into a framed screen as the page begins. */
.heroMedia{transform-origin:50% 40%;will-change:transform}
.v2-motion .heroMedia{transform:scale(calc(1 - var(--hp,0) * .1));border-radius:calc(var(--hp,0) * 26px);overflow:hidden;filter:brightness(calc(1 - var(--hp,0) * .45))}
.v2-motion .heroInner{transform:translate3d(0,calc(var(--hp,0) * -70px),0);opacity:calc(1 - var(--hp,0) * 1.15)}
.heroMedia video,.heroPoster img{translate:var(--mx,0) var(--my,0);scale:1.045;transition:translate .9s var(--v2-ease-out)}
/* Film grain + vignette for a cinematic finish. */
.heroScrim::after{content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:v3Grain .9s steps(6) infinite}
.heroScrim::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 60% 45%,transparent 55%,#000a 100%)}
@keyframes v3Grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,2%)}80%{transform:translate(4%,5%)}100%{transform:translate(0,0)}}

/* ---------- D. Image wipes + parallax ---------- */
.v2-img{overflow:hidden}
.v2-img img,.v2-img video{scale:1.14;transition:scale 1.8s var(--v2-ease-out),opacity .8s,clip-path 1.3s var(--v3-curtain)}
/* The wipe runs on the media, not the container, so the container stays observable. */
.v2-motion .v2-img>img,.v2-motion .v2-img>picture>img,.v2-motion .v2-img>video{clip-path:inset(0 0 100% 0)}
.v2-motion .v2-img.v2-in>img,.v2-motion .v2-img.v2-in>picture>img,.v2-motion .v2-img.v2-in>video,
.v2-done .v2-img>img,.v2-done .v2-img>picture>img,.v2-done .v2-img>video{clip-path:inset(0)}
.v2-motion .v2-img.v2-in img,.v2-motion .v2-img.v2-in video,.v2-done .v2-img img{scale:1.06}
@media (hover:hover){.v2-motion .v2-img.v2-in:hover img,.v2-motion .v2-img.v2-in:hover video{scale:1.11;transition-duration:1.1s}}
.v2-motion .v2WorkCard:hover img{transform:none}

/* ---------- E. Films (work, case pages, services) ---------- */
.v3-film-wrap{position:relative}
.v3-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--v2-ease-out)}
.v3-film.is-playing{opacity:1}
.v2WorkCard figure .v3-film,.v2CaseVisual .v3-film,.caseCardMasthead .v3-film{z-index:0}
.v2WorkCard figcaption,.caseCardMasthead .v2Wordmark{z-index:2}
.caseCardMasthead.v2HasVisual>video{position:absolute;inset:0}
.v2CaseVisual>div{position:relative}

/* Services: each discipline gets its chapter of the LARA showreel. */
.v3CapFilm{grid-column:1/-1;margin:0 0 1.4rem;aspect-ratio:16/10;background:var(--ink);position:relative;overflow:hidden}
.v3CapFilm img{display:block;width:100%;height:100%;object-fit:cover}
.v3CapFilm figcaption{position:absolute;left:.8rem;bottom:.8rem;z-index:2;background:#0b0b0acc;color:var(--paper);padding:.42rem .6rem;font-size:.6rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;backdrop-filter:blur(6px)}
.capabilityCard{min-height:0;padding-top:clamp(1.2rem,2.4vw,2.2rem)}
.capabilityCard .capabilityNumber{order:0}
.capabilityCard h3{margin-top:clamp(1.2rem,2.4vw,2.2rem)}
.capabilityCard:nth-child(-n+2){padding-top:clamp(1.5rem,2.6vw,2.4rem)}

/* ---------- F. Marquee reacts to scroll velocity ---------- */
.disciplineTrack{transition:none}
.disciplineSet{transform:skewX(var(--skew,0deg));transition:transform .5s var(--v2-ease-out)}

/* ---------- G. Cursor + magnetic controls (fine pointers only) ---------- */
.v3-cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;width:0;height:0;display:none}
@media (hover:hover) and (pointer:fine){.v3-cursor{display:block}}
.v3-cursor>i{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid #fffdf8;mix-blend-mode:difference;
  transition:width .35s var(--v2-ease-out),height .35s var(--v2-ease-out),margin .35s var(--v2-ease-out),background .35s,border-color .35s,opacity .3s}
.v3-cursor>b{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.4);opacity:0;white-space:nowrap;color:var(--paper);
  font:700 .66rem/1 "Inter Tight Variable",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;transition:opacity .25s,transform .35s var(--v2-ease-out)}
.v3-cursor.is-link>i{width:54px;height:54px;margin:-27px 0 0 -27px}
.v3-cursor.is-label>i{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--signal-red);border-color:var(--signal-red);mix-blend-mode:normal}
.v3-cursor.is-label>b{opacity:1;transform:translate(-50%,-50%) scale(1)}
.v3-cursor.is-hidden>i{opacity:0}
.v3-magnet{transition:transform .5s var(--v2-ease-out)}

/* ---------- H. Case pages: reading progress + next case ---------- */
.v3-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:60;background:var(--signal-red);transform-origin:0 50%;transform:scaleX(var(--rp,0));pointer-events:none}
.v3Next{display:block;position:relative;overflow:hidden;background:var(--ink);color:var(--paper);text-decoration:none;isolation:isolate;min-height:clamp(420px,62vw,760px)}
.v3Next .v3NextMedia{position:absolute;inset:0 0 0 24%;z-index:-1}
@media (width<=900px){.v3Next .v3NextMedia{inset:0}}
.v3Next .v3NextMedia img,.v3Next .v3NextMedia video{width:100%;height:100%;object-fit:cover}
.v3Next .v3NextMedia::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0a 0%,#0b0b0a00 30%),linear-gradient(0deg,#0b0b0a99,transparent 40%)}
@media (width<=900px){.v3Next .v3NextMedia::after{background:linear-gradient(0deg,#0b0b0af2 0%,#0b0b0acc 45%,#0b0b0a33 100%)}}
.v3NextInner{max-width:var(--max-width);margin:0 auto;padding:clamp(3rem,7vw,6.5rem) var(--gutter);display:grid;gap:1.2rem;align-content:end;min-height:inherit}
.v3NextInner .kicker{color:var(--meta-dark);margin:0}
.v3NextInner strong{display:block;font-size:clamp(2.75rem,9vw,9.5rem);font-weight:500;letter-spacing:-.02em;line-height:.86}
.v3NextInner p:not(.kicker){margin:0;max-width:30ch;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.4vw,2.3rem);line-height:1.08;color:var(--v2-copy-dark)}
.v3NextInner span{display:inline-flex;align-items:center;gap:.7rem;font-size:.78rem;font-weight:650;margin-top:.6rem}
.v3NextInner span .laraArrowSvg{width:1.1em;height:1.1em;transition:transform .35s var(--v2-ease)}
@media (hover:hover){.v3Next:hover .v3NextInner span .laraArrowSvg{transform:translate(4px,-4px)}.v3Next:hover .v3NextMedia img,.v3Next:hover .v3NextMedia video{scale:1.04}}
.v3Next .v3NextMedia img,.v3Next .v3NextMedia video{transition:scale 1.4s var(--v2-ease)}

/* ---------- I. Contact: the red blade rises into place ---------- */
.v2-motion .contact::before{transform:skew(-13deg) translateY(var(--cb,100%));transition:transform 1.4s var(--v3-curtain)}

@media (prefers-reduced-motion:reduce){
  .heroScrim::after{animation:none}
  .v3-film{transition:none}
  .v2-img img,.v2-img video{clip-path:none!important}
  .heroMedia{transform:none!important;filter:none!important}
  .heroInner{transform:none!important;opacity:1!important}
  .v3-w>span{transform:none!important;animation:none!important}
  .heroMessage h1,.caseDetailHero h1,.caseIndexHero h1{opacity:1!important}
}
/* v2 films: devices bleed off the bottom, so crop from the bottom and keep the browser bar in view */
:root .v3-film-wrap img,:root .v3-film-wrap .v3-film{object-position:50% 0}

/* disciplines ticker: words fade into the red band at both edges instead of being chopped */
.disciplineRail{position:relative}.disciplineRail::before,.disciplineRail::after{content:"";position:absolute;top:0;bottom:0;width:clamp(36px,9vw,140px);z-index:2;pointer-events:none}.disciplineRail::before{left:0;background:linear-gradient(90deg,var(--signal-red) 15%,transparent)}.disciplineRail::after{right:0;background:linear-gradient(270deg,var(--signal-red) 15%,transparent)}

/* safety net for every browser (incl. Safari): once a word has slid in, drop its mask completely so nothing can ever be cut */
@keyframes v3Unclip{to{clip-path:none}}
.v2-motion .v3-split.v2-in .v3-w{animation:v3Unclip 0s linear 2.4s forwards}
.v2-motion :is(.heroMessage,.caseDetailHero,.caseIndexHero) h1.v3-split .v3-w{animation:v3Unclip 0s linear 5s forwards}
.v2-done .v3-split .v3-w{clip-path:none}

/* case cards whose visual is an illustration or screenshot (not a film): show the whole picture, padded in its own background colour */
.caseCardMasthead.autoMasthead.v2HasVisual>img{object-fit:contain;object-position:50% 50%}
.caseCardMasthead.autoMasthead[aria-label="HumaniseFlow"]{background:#10131d}
.caseCardMasthead.autoMasthead[aria-label="Auto Internal Linking"]{background:#141416}
/* LARA tracking fix, 5 Oct 2026: original headings at -0.065..-0.12em made Inter Tight glyphs collide. Same selectors, measured collision-free values (collide.mjs). */
:root .brandMarkName{letter-spacing:-.02em}
:root .heroMessage h1{letter-spacing:-.02em}
:root .heroBriefCopy{letter-spacing:-.03em}
:root .positioningContent h2{letter-spacing:-.03em}
:root .outcomeGrid h3{letter-spacing:-.02em}
:root .sectionHeading h2,:root .platformHeading h2,:root .workingHeading h2,:root .partnerIntro h2,:root .aboutStatement h2{letter-spacing:-.03em}
:root .capabilityRow h3{letter-spacing:-.02em}
:root .capabilityCard h3{letter-spacing:-.02em}
:root .productionCopy h2{letter-spacing:-.03em}
:root .beautyCopy h2{letter-spacing:-.03em}
:root .creativeHeader h2{letter-spacing:-.03em}
:root .creativeStory h3{letter-spacing:-.03em}
:root .platformMasthead>strong{letter-spacing:-.04em}
:root .featuredCopy h3{letter-spacing:-.02em}
:root .metric strong{letter-spacing:-.02em}
:root .homeCasesIntro h2{letter-spacing:-.03em}
:root .caseCardMasthead strong{letter-spacing:-.04em}
:root .caseCardBody h2{letter-spacing:-.03em}
:root .aboutLead{letter-spacing:-.02em}
:root .contactMain h2{letter-spacing:-.03em}
:root .caseIndexHero h1{letter-spacing:-.03em}
:root .caseIndexCta p{letter-spacing:-.02em}
:root .caseDetailHero h1{letter-spacing:-.03em}
:root .caseDetailMasthead>strong{letter-spacing:-.04em}
:root .caseDetailChallenge h2,:root .caseSectionHeading h2,:root .caseDetailBuild h2,:root .caseDetailCta h2{letter-spacing:-.03em}
:root .caseEvidenceGrid strong{letter-spacing:-.02em}
:root .heroReelReadout strong{letter-spacing:-.02em}
:root .heroMessage h1 em{letter-spacing:-.02em}
:root .positioningContent h2,:root .sectionHeading h2,:root .platformHeading h2,:root .workingHeading h2,:root .partnerIntro h2,:root .aboutStatement h2{letter-spacing:-.03em}
:root .creativeHeader h2,:root .creativeStory h3{letter-spacing:-.03em}
:root .productSystemHeading h2{letter-spacing:-.02em}
:root .productSystemCard h3{letter-spacing:-.02em}
:root .productSystemCardFeatured:after{letter-spacing:-.02em}
:root .productIndexHeadline h1{letter-spacing:-.02em}
:root .productDeliveryIntro h2,:root .productDetailSectionHeading h2{letter-spacing:-.02em}
:root .productIndexCard h2{letter-spacing:-.02em}
:root .productIndexCardFeatured:after{letter-spacing:-.02em}
:root .productIndexCta h2,:root .productDetailCta h2{letter-spacing:-.02em}
:root .productDetailHeroGrid h1{letter-spacing:-.02em}
:root .productDetailValue h2{letter-spacing:-.02em}
:root .productEvidenceIntro h2{letter-spacing:-.02em}
:root .productEvidenceMetrics strong{letter-spacing:-.02em}
:root .productDetailUse h2{letter-spacing:-.02em}
:root .productDetailNext h2{letter-spacing:-.02em}
:root .teamPageHero h1{letter-spacing:-.03em}
:root .teamPagePrinciples h2,:root .teamPageOffices h2,:root .teamPageDisciplines h2,:root .teamPageCta h2{letter-spacing:-.03em}
:root .teamPageDisciplines li strong{letter-spacing:-.02em}
:root ._brandName_1r694_31{letter-spacing:-.02em}
:root ._title_1r694_98{letter-spacing:-.02em}
:root ._article_1r694_178 h2{letter-spacing:-.02em}
:root ._article_1r694_178 h3,:root ._article_1r694_178 h4{letter-spacing:-.02em}
:root ._footerPrompt_1r694_277{letter-spacing:-.02em}
:root .pureliftMasthead>strong{letter-spacing:-.04em}
:root .chimeMasthead>strong{letter-spacing:-.04em}

/* ---------- 2026-10-06 d: case pages audit ---------- */
/* Next case: the film sits beside the title (desktop) or above it (mobile) - never under the text, never cropped */
.v3Next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);align-items:center;column-gap:clamp(1.5rem,4vw,4.5rem);min-height:0;padding:clamp(3rem,6vw,6rem) max(var(--gutter),calc((100% - var(--max-width))/2 + var(--gutter)))}
.v3Next .v3NextMedia{position:relative;inset:auto;z-index:0;grid-column:2;grid-row:1;aspect-ratio:8/5;overflow:hidden;background:#141413}
.v3Next .v3NextMedia::after{content:none}
:root .v3Next .v3NextMedia img,:root .v3Next .v3NextMedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.v3NextInner{grid-column:1;grid-row:1;max-width:none;margin:0;padding:0;min-height:0;align-content:center}
.v3NextInner strong{font-size:clamp(2.75rem,5.4vw,5.25rem);line-height:.92}
.v3NextInner p:not(.kicker){max-width:22ch;text-wrap:balance}
@media (width<=900px){
  .v3Next{display:flex;flex-direction:column;align-items:stretch;padding:0}
  .v3Next .v3NextMedia{width:100%}
  .v3NextInner{padding:clamp(1.75rem,6vw,3rem) var(--gutter) clamp(3rem,9vw,4.5rem)}
  .v3NextInner strong{font-size:clamp(2.75rem,11vw,5rem)}
  .v3NextInner p:not(.kicker){max-width:30ch}
}
/* Case cards: below 1240px the text column is taller than the picture is wide, which cut the film's sides.
   Stack picture over text there, and cap how much of the film's lower edge a very wide card hides. */
@media (width>900px) and (width<1240px){
  .caseCard{grid-template-columns:1fr}
  .caseCardMasthead.v2HasVisual{min-height:0;aspect-ratio:4/3}
  .caseCardBody{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,4rem);align-items:start;align-content:start}
  .caseCardBody>p:first-child{grid-column:1/-1}
  .caseCardBody h2{grid-column:1;grid-row:2/span 2}
  .caseCardBody>p:nth-of-type(2){grid-column:2;grid-row:2;margin:.4rem 0 1.5rem}
  .caseCardBody>a{grid-column:2;grid-row:3}
}
@media (width>=1240px){.caseCardMasthead.v2HasVisual.v3-film-wrap{min-height:max(540px,calc((100vw - 2 * var(--gutter)) * .43))}}

/* 2026-10-06 e: the Next-case picture is shown whole at 8:5, so it must not drift with the scroll parallax (it uncovered a strip of background) */
:root .v3Next .v3NextMedia img,:root .v3Next .v3NextMedia video{translate:none!important}
/* Case headings: descenders (y, g, p) were touching the next line's ascenders on some headlines (e.g. HumaniseFlow on phones) */
:root .caseDetailHero h1{line-height:.95}
:root .caseCardBody h2{line-height:1}
:root .caseDetailChallenge h2,:root .caseSectionHeading h2,:root .caseDetailBuild h2,:root .caseDetailCta h2{line-height:1.02}