/* 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:-.07em;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:-.04em}
.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:-.05em;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:-.05em;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:-.07em}
@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:-.08em;
  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;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.v3-w>span{display:inline-block;will-change:transform}
.v2-motion .v3-split .v3-w>span{transform:translateY(108%);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(108%)}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(3.4rem,9vw,9.5rem);font-weight:500;letter-spacing:-.075em;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}
}