/* Lumira v5 "kit" - the monochrome page design system ported from the
   2026-06-15 prototypes (Services / Our Work / About / How We Work).
   EVERYTHING is scoped under .lk so it never touches the frosted header,
   the footer, or any other page template. Enqueued only on the ported
   templates (see functions.php). Reuses motion.js for data-split /
   data-rise / data-bloom; kit.js adds the rail + media bed + blend. */

:root{
  --d-bg:#000; --d-bg-2:#0a0a0b; --d-s1:rgba(255,255,255,.04); --d-s2:rgba(255,255,255,.07);
  --d-fg:#f4f4f5; --d-fg-2:#a6a6aa; --d-muted:#6a6a6e; --d-hair:rgba(255,255,255,.10); --d-hair-2:rgba(255,255,255,.20);
  --l-bg:#f5f5f7; --l-surface:#fff; --l-fg:#1d1d1f; --l-fg-2:#4a4a4e; --l-muted:#86868b; --l-hair:#e3e3e6; --l-hair-2:#d0d0d4;
  --kit-ease:cubic-bezier(.22,1,.36,1);
}

/* base / wrapper (was the prototype's body rule) */
.lk{background:var(--d-bg);color:var(--d-fg-2);font-family:'Geist',-apple-system,system-ui,sans-serif;font-weight:300;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.lk *{box-sizing:border-box;margin:0;padding:0}
.lk h1,.lk h2,.lk h3{color:var(--d-fg);font-weight:700;letter-spacing:-.04em;line-height:1.04}
.lk h1{font-size:clamp(40px,6.2vw,78px)}
.lk h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.035em}
.lk h3{font-size:21px;font-weight:600;letter-spacing:-.02em}
.lk a{color:inherit}
.lk .wrap{max-width:1140px;margin:0 auto;padding:0 40px}
.lk .eyebrow{font:600 12px/1 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--d-muted);margin-bottom:20px}
.lk .lede{font-size:20px;font-weight:300;max-width:680px;color:var(--d-fg-2)}
.lk .chapter{padding:130px 0;position:relative}
.lk section{position:relative}
/* SplitText masked lines: pad the clip box so descenders/ascenders are never cut */
.lk .sl{padding-block:.14em}

/* light register */
.lk .light{background:var(--l-bg);color:var(--l-fg-2)}
.lk .light h1,.lk .light h2,.lk .light h3{color:var(--l-fg)}
.lk .light .eyebrow{color:var(--l-muted)}
.lk .light .lede{color:var(--l-fg-2)}
/* body text in light sections: target p/li directly so it can't fall back to the
   dark-register colour (an inherited colour loses to any direct p rule) */
.lk .light p,.lk .light li{color:var(--l-fg-2)}

/* chapter rail (top progress stays the theme's #scrollProgress) */
.lk-rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:16px;mix-blend-mode:difference}
.lk-rail a{width:9px;height:9px;border-radius:50%;border:1.5px solid #fff;opacity:.5;transition:opacity .3s,transform .3s,background .3s;position:relative}
.lk-rail a.active{opacity:1;background:#fff;transform:scale(1.25)}
.lk-rail a span{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font:600 11px/1 'Poppins',sans-serif;letter-spacing:.04em;color:#fff;opacity:0;pointer-events:none;transition:opacity .25s}
.lk-rail a:hover span{opacity:1}
@media(max-width:980px){.lk-rail{display:none}}

/* buttons (scoped; the header/footer .btn is untouched) */
.lk .btn{display:inline-flex;align-items:center;gap:10px;border-radius:9999px;font:600 14.5px/1 'Poppins',sans-serif;padding:15px 28px;text-decoration:none;cursor:pointer;border:none;transition:transform .25s var(--kit-ease),background .25s,opacity .25s}
.lk .btn.primary{background:var(--d-fg);color:#000}
.lk .light .btn.primary{background:var(--l-fg);color:#fff}
.lk .btn.primary:hover{transform:translateY(-2px)}
.lk .btn.ghost{background:var(--d-s1);color:var(--d-fg);border:1px solid var(--d-hair-2)}
.lk .light .btn.ghost{background:transparent;color:var(--l-fg);border:1px solid var(--l-hair-2)}
.lk .btn.ghost:hover{background:var(--d-s2);transform:translateY(-2px)}

/* film / facade placeholder */
.lk .film{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:radial-gradient(120% 120% at 50% 30%,#191919 0%,#0a0a0a 70%);border:1px solid var(--d-hair);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lk .light .film{border-color:var(--l-hair-2);background:radial-gradient(120% 120% at 50% 30%,#e9e9ec 0%,#dadade 75%)}
.lk .film .play{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:transform .3s var(--kit-ease),background .3s}
@media(max-width:600px){.lk .film .play{width:48px;height:48px}.lk .film .play svg{width:17px;height:17px}}
.lk .light .film .play{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.35)}
.lk .film:hover .play{transform:scale(1.08);background:rgba(255,255,255,.18)}
.lk .film .play svg{width:24px;height:24px;margin-left:3px}
.lk .film .plabel{position:absolute;left:20px;bottom:18px;font:600 11px/1.3 'Poppins',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.lk .light .film .plabel{color:rgba(0,0,0,.5)}
.lk .film .ph{position:absolute;right:18px;top:16px;font:600 10px/1 'Poppins',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.22);border-radius:9999px;padding:5px 10px}
.lk .light .film .ph{color:rgba(0,0,0,.4);border-color:rgba(0,0,0,.18)}
.lk .film img,.lk .film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lk .film .play,.lk .film .plabel,.lk .film .ph{position:absolute;z-index:2}
/* poster still behind the play button (e.g. founder portrait), graded + scrimmed
   so the play button, label and tag stay legible */
.lk .film .poster{object-position:center 26%;filter:grayscale(1) contrast(1.02) brightness(.66)}
.lk .film.has-poster::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.62) 100%)}

/* generic media hero (image or video bg) */
.lk .hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:var(--d-bg);padding:190px 0 90px}
.lk .hero .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--d-bg)}
.lk .hero .hero-bg .poster,.lk .hero .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.lk .hero .hero-bg .poster{z-index:0}
.lk .hero .hero-bg video{z-index:1;opacity:0;transition:opacity 1s var(--kit-ease)}
.lk .hero.playing .hero-bg video{opacity:1}
.lk .hero .hero-bg::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(8,8,10,.62) 0%,rgba(8,8,10,.32) 42%,rgba(8,8,10,.74) 80%,var(--d-bg) 100%)}
.lk .hero .wrap{position:relative;z-index:3}
.lk .hero .eyebrow{color:rgba(255,255,255,.82)}
.lk .hero h1{color:#fff;margin-bottom:24px;max-width:15ch}
.lk .hero .lede{color:rgba(255,255,255,.92);margin-bottom:34px}
.lk .hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.lk .hero .hero-bg .poster.mono{filter:grayscale(1) contrast(1.04) brightness(.62)}
.lk .hero .hero-bg .poster.colour{filter:contrast(1.02) brightness(.68) saturate(1.1)}
/* ambient hero video: mono by default (brand), .colour opts into colour */
.lk .hero .hero-bg video{filter:grayscale(1) contrast(1.04) brightness(.6)}
.lk .hero .hero-bg video.colour{filter:contrast(1.03) brightness(.6) saturate(1.06)}
.lk .vidtoggle{position:absolute;right:18px;bottom:18px;z-index:4;display:inline-flex;align-items:center;gap:6px;background:rgba(8,8,10,.5);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:9999px;padding:7px 14px;font:600 12px/1 'Poppins',sans-serif;letter-spacing:.04em;cursor:pointer;backdrop-filter:blur(6px)}
.lk .vidtoggle[hidden]{display:none}
.lk .vidtoggle:hover{background:rgba(8,8,10,.72)}
@media(max-width:680px){.lk .vidtoggle{display:none}}

/* cards / grids */
.lk .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lk .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lk .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:1000px){.lk .grid-4{grid-template-columns:repeat(2,1fr)}.lk .grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.lk .grid-4,.lk .grid-3,.lk .grid-2{grid-template-columns:1fr}}
.lk .work-card{display:block;border:1px solid var(--d-hair);border-radius:16px;overflow:hidden;text-decoration:none;background:var(--d-s1);transition:transform .3s var(--kit-ease),border-color .3s,background .3s}
.lk .light .work-card{border-color:var(--l-hair);background:var(--l-surface)}
.lk .work-card:hover{transform:translateY(-4px);border-color:var(--d-hair-2)}
.lk .work-card .frame{aspect-ratio:16/9;overflow:hidden;background:var(--d-bg-2)}
.lk .work-card .frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.82);transition:filter .6s var(--kit-ease),transform .6s var(--kit-ease)}
.lk .work-card.bloom .frame img,.lk .work-card:hover .frame img{filter:grayscale(0) brightness(1);transform:scale(1.03)}
.lk .work-card .body{padding:18px 20px}
.lk .work-card .tag{display:inline-block;font:600 11px/1 'Poppins',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--d-muted);margin-bottom:9px}
.lk .light .work-card .tag{color:var(--l-muted)}
.lk .work-card h3{color:var(--d-fg)}.lk .light .work-card h3{color:var(--l-fg)}
.lk .work-card .body p{font-size:14px;margin-top:6px;color:var(--d-fg-2)}
.lk .light .work-card .body p{color:var(--l-fg-2)}

/* chips */
.lk .chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 30px}
.lk .chip{display:inline-block;border:1px solid var(--d-hair-2);background:var(--d-s1);border-radius:9999px;padding:8px 18px;font:600 13px/1 'Poppins',sans-serif;color:var(--d-fg-2);cursor:pointer;transition:background .25s,color .25s,transform .25s}
.lk .light .chip{border-color:var(--l-hair-2);color:var(--l-fg-2)}
.lk .chip:hover{transform:translateY(-1px)}
.lk .chip.is-active{background:var(--d-fg);color:var(--d-bg);border-color:var(--d-fg)}
.lk .light .chip.is-active{background:var(--l-fg);color:#fff;border-color:var(--l-fg)}

/* quote / testimonial */
.lk .qcard{background:var(--d-s1);border:1px solid var(--d-hair);border-radius:18px;padding:32px}
.lk .light .qcard{background:var(--l-surface);border-color:var(--l-hair)}
.lk .qcard blockquote{font-size:18px;color:var(--d-fg);line-height:1.5;font-weight:400}
.lk .light .qcard blockquote{color:var(--l-fg)}
.lk .qcard figcaption{margin-top:20px;display:flex;align-items:center;gap:12px;font-size:14px}
.lk .qcard figcaption img{width:42px;height:42px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.lk .qcard figcaption b{display:block;color:var(--d-fg)}.lk .light .qcard figcaption b{color:var(--l-fg)}
.lk .qcard figcaption span{color:var(--d-muted);font-size:13px}.lk .light .qcard figcaption span{color:var(--l-muted)}

/* stat */
.lk .stat .n{font-size:clamp(48px,7vw,92px);font-weight:700;letter-spacing:-.05em;color:var(--d-fg);line-height:1}
.lk .light .stat .n{color:var(--l-fg)}
.lk .stat .u{display:block;margin-top:10px;color:var(--d-muted);font-size:15px}

/* media bed (graded image behind a chapter) */
.lk .bed{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.05) brightness(.42)}
.lk .bed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.78) 58%,var(--d-bg) 100%)}
.lk .has-bed > .wrap{position:relative;z-index:2}
.lk .has-bed{overflow:hidden}

/* faq */
.lk .faq .qs{margin-top:44px;border-top:1px solid var(--l-hair)}
.lk .faq details{border-bottom:1px solid var(--l-hair)}
.lk .faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--l-fg);font-weight:600;font-size:19px}
.lk .faq summary::-webkit-details-marker{display:none}
.lk .faq summary .ic{flex:0 0 auto;width:24px;height:24px;position:relative;transition:transform .3s var(--kit-ease)}
.lk .faq summary .ic::before,.lk .faq summary .ic::after{content:"";position:absolute;background:var(--l-fg);border-radius:2px}
.lk .faq summary .ic::before{top:11px;left:2px;right:2px;height:2px}
.lk .faq summary .ic::after{left:11px;top:2px;bottom:2px;width:2px;transition:transform .3s var(--kit-ease)}
.lk .faq details[open] summary .ic::after{transform:scaleY(0)}
.lk .faq details[open] summary .ic{transform:rotate(180deg)}
.lk .faq .a{padding:0 0 26px;max-width:760px;font-size:16px}

/* cta band - scoped to the SECTION so inline .cta button rows don't inherit the black bg */
.lk .chapter.cta{background:var(--d-bg);text-align:center}
.lk .chapter.cta h2{max-width:18ch;margin:0 auto 28px}
.lk .chapter.cta .sub{max-width:560px;margin:0 auto 36px}

/* reveal helpers */
.lk [data-rise]{will-change:transform,opacity}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .lk *,.lk *::before,.lk *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .lk .work-card .frame img{filter:grayscale(0) brightness(.95)}
}