/* v8.6.1 (Ian, 27 Oct 9:19am): six-ways/services band (with its case-study slider) moved to straight after the problem band; backgrounds re-assigned so neighbours alternate:
   hero dark > problem white > services lavender > think white > intro lavender > how dark > power lavender > clients white > discovery lavender > footer dark. */
/* v8.6 home "Daylight" (option A; Ian, 27 Oct 2026 3:51am "Lets try A"). Loaded on the home page only (base.njk, p.kind == "home"), so no other page is affected. */
/* shared: case-study showcase (A, B) */
.work{margin-top:clamp(2.2rem,4vw,3.2rem)}
.work-track{list-style:none;margin:0;padding:.3rem .1rem 1rem;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2.5rem)/3);gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.work-track::-webkit-scrollbar{display:none}
.work-card{scroll-snap-align:start;display:flex}
.work-card a{position:relative;flex:1;display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.work-card a:hover{transform:translateY(-6px)}
.work-img{display:block;overflow:hidden;aspect-ratio:4/3}
.work-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.work-card a:hover .work-img img{transform:scale(1.04)}
.work-txt{display:flex;flex-direction:column;gap:.55rem;padding:1.15rem 3.4rem 1.3rem 1.3rem}
.work-h{font:700 1.12rem/1.25 var(--display);letter-spacing:-.01em;text-wrap:balance}
.work-card .arr{position:absolute;right:1.2rem;bottom:1.3rem;font:500 1rem/1 var(--mono)}
.work-card a:hover .arr{transform:translateX(5px)}
.work-nav{display:flex;justify-content:center;gap:.8rem;margin-top:.6rem}
@media (max-width:1020px){.work-track{grid-auto-columns:calc((100% - 1.25rem)/2)}}
@media (max-width:600px){.work-track{grid-auto-columns:84%;gap:.9rem}}
/* Option A "Daylight": light lavender/white rhythm; dark kept for the hero, How the magic happens, the closing card and the footer.
   Light tints are mixes of #c6c1de with white. Text on light uses #160a33 / #4b218f / #843d87 only (cyan never as text on light). */
.hero-home{background:radial-gradient(70% 90% at 80% 10%,rgba(132,61,135,.55),transparent 65%),radial-gradient(50% 60% at 0% 100%,rgba(50,214,255,.14),transparent 70%),linear-gradient(160deg,#2a1660,var(--night) 70%)}
.band-problem,.band-think,.band-intro,.band-services,.band-power,.band-clients,.band-discovery{--ink:#160a33;--ink2:#3a2f5e;color:var(--ink2)}
.band-problem,.band-think{background:#fff}
.band-intro{background:linear-gradient(180deg,#f1eff8,#e8e5f3);border-top:0}
.band-services{background:linear-gradient(180deg,#f1eff8,#e8e5f3)}
.band-power{background:linear-gradient(180deg,#f1eff8,#e8e5f3)}
.band-clients{background:#fff}
.band-discovery{background:linear-gradient(180deg,#f1eff8,#e8e5f3);padding-top:clamp(2rem,4vw,3rem)}
:is(.band-problem,.band-think,.band-intro,.band-services,.band-power,.band-clients) :is(h2,h3){color:var(--ink)}
:is(.band-problem,.band-think,.band-intro,.band-services,.band-power,.band-clients) .big{color:var(--ink2)}
.band-problem .punch{color:#843d87}
.band-intro h2 .rw{background:linear-gradient(100deg,#843d87,#4b218f);-webkit-background-clip:text;background-clip:text;filter:none}
.band-intro .hl{color:#4b218f;text-shadow:none;background:linear-gradient(transparent 62%,rgba(50,214,255,.45) 62%)}
.band-think{padding-top:var(--band)}
.section-head .big{color:var(--ink2)}
/* service cards: white with lavender border and a cyan top line; the core offer stays dark as the feature */
.band-services .svc-card:not(.svc-core){background:#fff;border:1px solid #d9d5ea;box-shadow:0 18px 44px -30px rgba(75,33,143,.45)}
.band-services .svc-card:not(.svc-core) p{color:var(--ink2)}
.band-services .svc-card:not(.svc-core) .svc-num{color:#843d87}
.band-services .svc-card:not(.svc-core) .svc-link{color:#4b218f}
.band-services .svc-card:not(.svc-core):hover{box-shadow:0 22px 50px -24px rgba(75,33,143,.55)}
.band-services .svc-core h3{color:#fff}
/* showcase */
.work-card a{background:#fff;border:1px solid #d9d5ea;box-shadow:0 18px 44px -30px rgba(75,33,143,.5);color:var(--ink)}
.work-card .svc-snip-tag{color:#843d87}
.work-card .arr{color:#4b218f}
.work-img{background:var(--night2)}
.band-services .quote-btn,.band-clients .quote-btn{background:#fff;color:#4b218f;border-color:#c6c1de}
/* video band */
.band-power .pf-btn-ghost{color:#4b218f;border-color:#4b218f}
.band-power .pf-btn-ghost:hover{color:#160a33}
.video-wrap::before{background:radial-gradient(50% 50% at 50% 50%,rgba(132,61,135,.35),transparent 70%)}
/* clients */
.logos li{background:#f4f2fa;border:1px solid #e3e0ef}
.quote{background:#fff;border:1px solid #d9d5ea;box-shadow:0 18px 44px -30px rgba(75,33,143,.45)}
.quote p{color:var(--ink)}
.quote figcaption{color:#5b5080}
.qmark{background:linear-gradient(100deg,#843d87,#4b218f);-webkit-background-clip:text;background-clip:text}
.quote-track:focus-visible{outline-color:#4b218f}
.band-clients h2{color:var(--ink)}
:is(.band-problem,.band-think,.band-intro,.band-services,.band-power,.band-clients) :focus-visible{outline-color:#4b218f}