/* ===========================================================================
   ll-skin.css — the redesign, worn by the ORIGINAL project pages
   (case-study.html, adx.html, bmw-m2.html, redbull.html)

   Their layouts, their content and their behaviour are the originals: the
   case studies are not rebuilt any more, because every rebuild lost something.
   This file only swaps the material — ground, type colours, glass, the nav,
   the footer, the background — and is loaded after each page's own <style>.
   Nothing here is shared with the home's ll.css on purpose: ll.css carries
   class names (.meta, .hero, .renders, .lightbox, …) that these pages already
   use for their own components, and loading it would restyle them.
   =========================================================================== */
/* General Sans, served from this domain (it used to come from api.fontshare.com +
   cdn.fontshare.com: two extra connections before the first paint on a phone) */
@font-face{font-family:'General Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/general-sans-300.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/general-sans-400.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/general-sans-500.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/general-sans-600.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/general-sans-700.woff2') format('woff2')}

:root{
  --font:'General Sans',-apple-system,system-ui,sans-serif;
  --t-small:13.5px; --t-label:11.5px;
  --gut:clamp(20px,5vw,56px);
  --r-lg:24px; --r-md:16px; --r-sm:11px; --r-pill:980px;
  --ease:cubic-bezier(.32,.72,0,1);
  --ground:#08080A;
  --surface:rgba(255,255,255,.048); --hairline:rgba(255,255,255,.1);
  --ink:#EDEFF2; --ink-2:#9BA1A9; --ink-3:#6E747C;
  --amber:#FFA742; --red:#E8431F; --amber-ink:#1B1006;
  --glass-bg:rgba(255,255,255,.055);
  --glass-blur:blur(20px) saturate(1.55);
  --glass-border:rgba(255,255,255,.14);
  --glass-edge:rgba(255,255,255,.30);
  --glass-hi:rgba(255,255,255,.07);
  --glass-shadow:0 22px 48px -26px rgba(0,0,0,.8);
  --silver:linear-gradient(97deg,#767D86 0%,#FFFFFF 18%,#B4BBC4 36%,#F4F7FA 54%,#8C939C 70%,#FFFFFF 86%,#A2A9B2 100%);
  --flame-1:#7A1408; --flame-2:#A82410; --flame-3:#5A1A10;

  /* the originals' own token names, re-pointed at the redesign palette.
     !important on the few that case-study.html's tint script writes inline
     (it re-casts the page in each project's hue): the hue now lives in the
     flame only, the type and the ground stay silver on black. */
  --bg:var(--ground)!important;
  --card:#0E0E11; --panel:#111114;
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.17);
  --white:#FFFFFF; --text:var(--ink); --body:#AEB4BC; --muted:#868C94; --muted-2:#767C84;
  --orange:var(--amber)!important; --orange-soft:color-mix(in srgb,var(--amber) 55%,#fff)!important;
  --cs-title-grad:var(--silver)!important;
  --glow-grad:linear-gradient(145deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.03) 66%,rgba(255,255,255,.28) 100%);
  --glow-grad-strong:linear-gradient(145deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.26) 42%,rgba(255,255,255,.08) 68%,rgba(255,255,255,.5) 100%);
  color-scheme:dark;
}
body{background:var(--ground)}
::selection{background:var(--amber);color:var(--amber-ink)}

.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--ground)}

/* the ember: fixed to the bottom, very low, breathing slowly. Two layers only,
   both anchored off-screen so you never see an edge. */
/* no CSS blur and no blend mode here (2026-10-06): a 78px blur on two animated full-width layers was
   recomputed every frame and cost ~60% of the GPU work while scrolling. The gradient is already soft;
   it now fades a little further out instead, and screen over near-black is visually the same. */
.bg i{position:absolute;display:block;border-radius:50%;will-change:transform,opacity}
.bg i:nth-child(1){width:120vw;height:46vh;left:-10vw;bottom:-28vh;opacity:.42;
  background:radial-gradient(ellipse at 50% 100%,var(--flame-2) 0%,var(--flame-1) 42%,transparent 78%);
  animation:ember1 26s ease-in-out infinite alternate}
.bg i:nth-child(2){width:70vw;height:34vh;right:-8vw;bottom:-22vh;opacity:.3;
  background:radial-gradient(ellipse at 50% 100%,var(--flame-3) 0%,transparent 70%);
  animation:ember2 38s ease-in-out infinite alternate}
.bg i:nth-child(3){display:none}        /* the third blob is gone on purpose */
@keyframes ember1{from{transform:translate3d(0,0,0) scaleY(1);opacity:.36}
                  to{transform:translate3d(4vw,-2vh,0) scaleY(1.16);opacity:.5}}
@keyframes ember2{from{transform:translate3d(0,0,0) scaleX(1);opacity:.22}
                  to{transform:translate3d(-5vw,-1vh,0) scaleX(1.2);opacity:.36}}

/* HALFTONE — a fine dot matrix, the LED-screen texture. Two offset grids at
   5px give the woven look of a real halftone rather than a flat polka dot, and
   the whole thing is held at a few percent so it reads as grain. */
.bg b{position:absolute;inset:0;display:block;opacity:.5;
  background-image:
    radial-gradient(rgba(255,255,255,.22) .5px, transparent .5px),
    radial-gradient(rgba(255,255,255,.12) .5px, transparent .5px);
  background-size:5px 5px, 5px 5px;
  background-position:0 0, 2.5px 2.5px;
  -webkit-mask:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.18) 100%);
          mask:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.18) 100%)}

main,header,footer{position:relative;z-index:1}


.nav{position:fixed;top:14px;left:0;right:0;z-index:50;padding-inline:var(--gut);
  pointer-events:none}
.nav-in{max-width:calc(var(--maxw) - 40px);margin-inline:auto;padding:7px 7px 7px 20px;height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-radius:var(--r-pill);pointer-events:auto;
  background:linear-gradient(180deg,var(--glass-hi),transparent 46%),var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-border), var(--glass-shadow);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
/* a round glass control, for back / language / anything iconic */
.icbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-border);
  color:var(--ink-2);transition:transform .4s var(--ease),color .3s var(--ease)}
.icbtn svg{width:15px;height:15px}
.icbtn:hover{color:var(--ink);transform:translateY(-1px)}
.icbtn.back:hover svg{transform:translateX(-2px)}
.icbtn svg{transition:transform .4s var(--ease)}
.nav-l{display:flex;align-items:center;gap:13px;min-width:0}
/* a page with a back control balances its own padding */
.nav-in:has(.icbtn){padding-left:7px}
/* his real wordmark, as a mask so it takes the ink colour */
.brand{display:block;height:17px;width:124px;background:var(--ink);
  -webkit-mask:url('/assets/logo-wordmark-mask.png') left center/contain no-repeat;
          mask:url('/assets/logo-wordmark-mask.png') left center/contain no-repeat;
  transition:opacity .3s var(--ease)}
.brand:hover{opacity:.78}
.nav nav{display:flex;align-items:center;gap:20px}
.nav a.l{font-size:var(--t-small);color:var(--ink-2);transition:color .3s var(--ease)}
.nav a.l:hover{color:var(--ink)}
/* the nav links keep the live site's signature hover: two stacked copies of
   every letter rolling up one after the other. The spans are injected by ll.js. */
.nav a.l .lr{display:inline-grid;overflow:hidden;vertical-align:top}
.nav a.l .lr>span{grid-area:1/1;display:block;
  transition:transform .4s var(--ease);transition-delay:calc(var(--i) * 28ms)}
.nav a.l .lr>span:nth-child(2){transform:translateY(105%)}
.nav a.l:hover .lr>span:first-child{transform:translateY(-105%)}
.nav a.l:hover .lr>span:nth-child(2){transform:translateY(0)}
.lang{font-size:var(--t-small);color:var(--ink-3)}
.lang a{transition:color .25s var(--ease)}
.lang a.on{color:var(--ink)}
.lang a:hover{color:var(--amber)}
/* PHONES. The text links go, the language switch STAYS (it is how a French
   visitor finds the French site). To make room the bar tightens: smaller gaps,
   a smaller wordmark and button, and — as on the original site — a project page
   on a narrow phone drops the wordmark, its round back button already leading
   home. */
@media(max-width:880px){
  .nav a.l{display:none}
  .nav nav{gap:14px}
  .lang{font-size:12.5px;white-space:nowrap}
}
@media(max-width:560px){
  .nav-in{padding-left:16px;gap:10px}
  .nav-in:has(.icbtn){padding-left:7px}
  .brand{width:104px;height:15px}
  .nav nav{gap:12px}
  .nav .btn.sm{padding:8px 13px;font-size:12.5px;white-space:nowrap}
}
/* a project page fits back + wordmark + EN/FR + the French button from ~420px
   (measured); narrower, the wordmark gives way to the round back button */
@media(max-width:419px){.nav-l:has(.icbtn) .brand{display:none}}
@media(max-width:360px){
  .brand{width:92px;height:13px}
  .nav nav{gap:10px}
  .nav .btn.sm{padding:8px 11px;font-size:12px}
}


.btn{position:relative;display:inline-flex;align-items:center;gap:9px;border-radius:var(--r-pill);
  padding:13px 24px;font-size:15px;font-weight:500;overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .35s var(--ease)}
.btn-1{background:var(--ink);color:#0A0A0C;box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.btn-2{background:linear-gradient(180deg,var(--glass-hi),transparent 46%),var(--glass-bg);
  color:var(--ink);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-border)}
.btn:hover{transform:translateY(-2px)}
.btn-1:hover{box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 16px 30px -16px rgba(255,255,255,.3)}
.btn-2:hover{box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px rgba(255,255,255,.22),
  0 16px 34px -20px rgba(0,0,0,.9)}
/* the sweep: a band of light crossing the button once per hover */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  background-size:280% 100%;background-position:130% 0;opacity:0;transition:opacity .3s}
.btn:hover::before{opacity:1;animation:sheen .85s var(--ease) forwards}
.btn-1:hover::before{background:linear-gradient(105deg,transparent 40%,rgba(0,0,0,.14) 50%,transparent 60%);
  background-size:280% 100%}
/* the label rolls, exactly as it does on the live site */
.roll{display:inline-grid;overflow:hidden;line-height:1.3;padding-bottom:.1em;margin-bottom:-.1em}
.roll > span{grid-area:1/1;transition:transform .5s var(--ease)}
.roll > span:nth-child(2){transform:translateY(110%)}
.btn:hover .roll > span:first-child,a:hover > .roll > span:first-child{transform:translateY(-110%)}
.btn:hover .roll > span:nth-child(2),a:hover > .roll > span:nth-child(2){transform:translateY(0)}
.btn svg{transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn svg{width:15px;height:15px}
.btn.sm{padding:9px 17px;font-size:13.5px}
/* the real brand marks, kept as they are on the live site */
.ic{width:17px;height:17px;flex:none;display:block;object-fit:contain}
.btn .ic{width:15px;height:15px}

@keyframes sheen{to{background-position:-40% 0}}

footer{padding-block:0 46px;text-align:center}
footer .fl{display:flex;justify-content:center;gap:10px 24px;flex-wrap:wrap}
footer a{font-size:12.5px;color:var(--ink-3);transition:color .3s}
footer a:hover{color:var(--ink-2)}
footer .cr{font-size:12.5px;color:var(--ink-3);margin-top:12px}


.contact-pop{position:fixed;z-index:120;min-width:198px;padding:6px;
  border-radius:16px;corner-shape:squircle;
  background:linear-gradient(180deg,var(--glass-hi),transparent 46%),var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-border),
             0 26px 54px -22px rgba(0,0,0,.72);
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top center;
  transition:opacity .22s var(--ease),transform .22s var(--ease);pointer-events:none}
.contact-pop.open{opacity:1;transform:none;pointer-events:auto}
.contact-pop a{display:flex;align-items:center;gap:12px;padding:11px 13px;
  border-radius:11px;corner-shape:squircle;color:var(--ink);
  font-size:var(--t-small);font-weight:500;letter-spacing:.01em;
  transition:background .2s var(--ease),color .2s var(--ease)}
.contact-pop a:hover,.contact-pop a:focus-visible{
  background:color-mix(in srgb, var(--amber) 13%, transparent);color:var(--amber);outline:none}
.contact-pop a svg{width:19px;height:19px;flex:none;color:var(--amber)}


/* ===========================================================================
   THE ORIGINALS' CONTENT, IN THE NEW MATERIAL
   =========================================================================== */
/* the titles were copper-metal; they are brushed silver now, like the home.
   Their reveal is already opacity-only, which is what keeps Safari painting a
   clipped gradient (a transform drops it there). */
/* (BMW M2's hero title is solid white over its sketch on purpose, .hx-h1, and stays so) */
.cs-title,.hero-h1:not(.hx-h1){background-image:var(--silver)!important;background-size:100% 100%!important}

/* empty image slots and the phones plate lose the old brown */
.ph{background:radial-gradient(80% 90% at 50% 110%,rgba(255,255,255,.05),transparent 62%),linear-gradient(160deg,#121215 0%,#0C0C0F 60%,#101013 100%)}
.g-phones{background:radial-gradient(90% 90% at 50% 100%,rgba(255,255,255,.06),transparent 64%),#0D0D10!important}

/* TEXT AS WIDE AS THE PICTURES. The originals capped every paragraph at
   22–62ch, so the copy stopped well short of the image edge beside and below
   it. The copy now runs to the same right edge as the pictures; the body size
   goes up a step so the longer line still reads comfortably. */
.duo .big-copy,.duo .body-copy,.duo .lede,.duo p,.duo .learned,.duo .models-lead,
.cs-tagline,.hero-tag,.cs-client{max-width:none!important}
.duo .body-copy{font-size:17.5px;line-height:1.66}

/* the pages carried their own light theme; the redesign is dark only */
.theme-switch{display:none!important}

/* EACH PROJECT'S OWN ACCENT. Every page sets --amber on <html> to its project's
   saturated dominant, sampled from its own imagery (Trendex: the fluo of its CTAs,
   Yourcall: the sphere's blue …). The few places the originals hard-coded the
   old amber now follow it too. */
.cs-client a{border-bottom-color:color-mix(in srgb,var(--orange) 40%,transparent)}
.ai-step::before{background:linear-gradient(135deg,var(--orange-soft),var(--orange))!important;color:var(--amber-ink)!important}
::selection{background:var(--amber);color:var(--amber-ink)}

/* ===========================================================================
   LITE — Windows Chrome. Same look, without the effects that cost a full
   recomposite on every frame there: the ember stops breathing (a static blurred
   layer is rasterised once), the blend modes go (screen over near-black is
   visually the same), the glass blurs less, and the reel drops to 720p.
   =========================================================================== */
.ll-lite .bg i{animation:none!important;will-change:auto}
.ll-lite .bg i,.ll-lite .reel-wrap video,.ll-lite .reel-pic img,.ll-lite .reel-wrap::before{mix-blend-mode:normal}
.ll-lite{--glass-blur:blur(10px) saturate(1.3)}
.ll-lite .ll-loader .ll-dots b{animation-duration:2.4s}

/* a case-study slot can hold a motion piece (RIPS): it sits like the images do */
.ph.has-img video{width:100%;height:auto;display:block;border-radius:inherit}

/* ===========================================================================
   CTA LIGHT (2026-10-06): the Digital / Physical tab's light, on every button.
   A glass button (.btn-2) glows from inside: a warm white core, then the site's
   ember red, specked like the LED dots. A white button (.btn-1) takes a golden tint
   under the pointer and an amber halo that leans towards it (red read as "danger" on white). The script writes
   --gx/--gy (the pointer inside the button) and --hx/--hy (the lean) and toggles
   .lit (mouse hover, or 750ms where a finger lands). The light replaces the old
   sweep band. The same block lives in ll.css and ll-skin.css.
   =========================================================================== */
.btn{transition:transform .4s var(--ease),box-shadow .45s var(--ease),background .35s var(--ease),text-shadow .5s var(--ease)}
.btn::before{display:none}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .5s var(--ease)}
.btn.lit::after{opacity:1}
.btn-2::after{mix-blend-mode:screen;
  background:
    radial-gradient(circle 120px at var(--gx,50%) var(--gy,50%),rgba(255,226,210,.84) 0,rgba(255,138,104,.62) 13%,
      rgba(232,67,31,.44) 32%,rgba(168,36,16,.2) 58%,transparent 100%),
    radial-gradient(rgba(255,255,255,.32) .5px,transparent .9px) 0 0/7px 7px;
  -webkit-mask:radial-gradient(circle 115px at var(--gx,50%) var(--gy,50%),#000 0,rgba(0,0,0,.6) 45%,transparent 100%);
          mask:radial-gradient(circle 115px at var(--gx,50%) var(--gy,50%),#000 0,rgba(0,0,0,.6) 45%,transparent 100%)}
.btn-2.lit{text-shadow:0 0 12px rgba(24,8,6,.6),0 1px 2px rgba(24,8,6,.3)}
.btn-1::after{mix-blend-mode:multiply;
  background:radial-gradient(circle 95px at var(--gx,50%) var(--gy,50%),rgba(255,222,160,.78) 0,rgba(255,196,110,.4) 30%,
    rgba(255,167,66,.12) 62%,transparent 100%)}
.btn-1.sm::after{background:radial-gradient(circle 58px at var(--gx,50%) var(--gy,50%),rgba(255,222,160,.7) 0,rgba(255,196,110,.32) 34%,
    transparent 100%)}
.btn-1.sm.lit{box-shadow:0 1px 0 rgba(255,255,255,.7) inset,var(--hx,0px) var(--hy,8px) 22px -8px rgba(255,167,66,.55)}
.btn-1.lit{box-shadow:0 1px 0 rgba(255,255,255,.7) inset,var(--hx,0px) var(--hy,10px) 30px -8px rgba(255,167,66,.62)}