/* =========================================================
   STORYTELLERS — minimal direction (all pages). Pure black & white; the brand's red dot is the
   only animated protagonist (assets/js/dot.js). Red brush strokes stay, always behind frosted glass.
   ========================================================= */
body { background: #000; }
.hero--home { background: #000 !important; }
.hero--home .hero__bg img { display: none; }
.hero__word--live { width: 100%; height: auto; display: block; overflow: visible; }
.hero__word--live .pl-l { will-change: transform; }
.js .hero__word--live .pl-dot { opacity: 0; }
.dot-ready .hero__word--live .pl-dot { opacity: 1; }
/* headings: upright only, never italic */
h1, h2, h3, h4, .mega, .big-head, h1 em, h2 em, h3 em, .mega em { font-style: normal !important; }
/* every glass surface frosts what is behind it — including nested cards, so strokes behind them blur */
.panel .step, .panel .t-card, .panel .stat-card, .panel .value-card, .panel .plan__side, .panel .plan__main, .panel .acc-item,
.panel .form-card, .panel .results__metric, .panel .quote-block, .panel .mini-steps > *, .panel .contact-details, .team-box .member,
.glass, .project__meta, .step, .case-card, .clients__tile, .t-card, .stat-card, .value-card, .acc-item, .form-card, .quote-block, .plan__side, .plan__main {
  -webkit-backdrop-filter: blur(var(--g-blur, 22px)) saturate(140%) !important; backdrop-filter: blur(var(--g-blur, 22px)) saturate(140%) !important; }
.rb--under { z-index: -1 !important; }
/* the dot */
.sdot { position: fixed; left: 0; top: 0; z-index: 240; width: 0; height: 0; pointer-events: none; opacity: 0; }
.sdot__core { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #e60617; will-change: transform; box-shadow: 0 0 18px rgba(230,6,23,.45); }
.srail { position: fixed; right: 22px; top: 18vh; height: 64vh; width: 1px; z-index: 230; pointer-events: none; opacity: 0; transition: opacity .6s; }
.srail__line { position: absolute; inset: 0; background: rgba(255,255,255,.12); }
.srail__label { position: absolute; right: 18px; top: 0; font: 600 10px/1 var(--font-body, Montserrat), sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); white-space: nowrap; transform: translateY(-50%); transition: opacity .4s; }
.rail-on .srail { opacity: 1; }
@media (max-width: 760px) { .srail { right: 10px; } .srail__label { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sdot, .srail { display: none !important; }
  .js .hero__word--live .pl-dot { opacity: 1; }
}

/* brand band (logo guide p-1): thin full-width red band under the wordmark, wide-tracked caps */
.hero__band, .band { display: flex; align-items: center; justify-content: center; background: #e60617; height: clamp(22px, 2.6vw, 38px); margin-top: clamp(10px, 1.4vw, 20px); align-self: stretch; }
.hero__band { width: 100vw; transform-origin: 0 50%; }
.band__txt { font-family: var(--font-body, Montserrat), sans-serif; font-weight: 400; font-size: clamp(9px, 1vw, 14px); letter-spacing: .45em; margin-right: -.45em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.js .hero__band { clip-path: inset(0 100% 0 0); } .js .hero__band .band__txt { opacity: 0; letter-spacing: .7em; }
.dot-ready .hero__band { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); } /* clip-path reveal (no lingering transformed layer) */
.dot-ready .hero__band .band__txt { opacity: 1; letter-spacing: .45em; transition: opacity 1s .7s, letter-spacing 1.6s .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .js .hero__band { clip-path: none; transition: none; } .js .hero__band .band__txt { opacity: 1; letter-spacing: .45em; } }

/* intro: only the wordmark on black while the dot lands, then the page hands in */
.hero__grid > *:not(.hero__brand), .hero__sub, .nav, .clients { transition: opacity .7s cubic-bezier(.2,.7,.2,1); }
.intro .hero__grid > *:not(.hero__brand), .intro .hero__sub, .intro .nav, .intro .clients { opacity: 0 !important; }
.intro .hero--home { box-shadow: none !important; }

/* case study hero card: headline on a clean dark field, artwork below it (no type over the image) */
.case-card--hero { justify-content: flex-start; background: #0a0a0c; }
.case-card--hero .case-card__art { top: 46%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
.case-card--hero .case-card__foot { margin-top: auto; padding-top: 14px; }

/* ---------- hero, logo guide p-1: full-bleed black, centred wordmark, red band edge to edge ---------- */
.hero--home { margin: var(--nav-h) 0 0 !important; border-radius: 0 !important; box-shadow: none !important; min-height: calc(100svh - var(--nav-h)); }
.hero--home .grain { display: none; }
.hero__grid { grid-template-rows: auto 1fr auto; padding: clamp(26px, 3vw, 44px) clamp(20px, 3.2vw, 48px) clamp(28px, 3.2vw, 48px); }
.hero__services, .hero__loc { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.62); line-height: 1.4; }
.hero__services { grid-column: 1 / 4; grid-row: 1; align-self: start; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px 30px;
  background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hero__services li { display: flex; align-items: center; gap: 10px; justify-content: flex-start !important; }
.hero__services li::before { width: 3px !important; height: 3px !important; background: rgba(255,255,255,.55) !important; box-shadow: none !important; }
.hero__loc { grid-column: 4; grid-row: 1; justify-self: end; align-self: start; margin: 0; display: flex; align-items: center; gap: 12px; }
.hero__loc i { width: 18px; height: 1px; background: rgba(255,255,255,.4); }
.hero__brand { grid-column: 1 / -1 !important; grid-row: 2; align-self: center; width: 100% !important; align-items: center !important; margin: 0; padding: clamp(28px, 5vh, 64px) 0; }
.hero__word--live { width: min(56vw, 860px) !important; }
.hero__band { margin-top: clamp(14px, 1.6vw, 24px); }
.hero__tag { grid-column: 1 / 3; grid-row: 3; text-indent: 0; font-size: clamp(17px, 1.35vw, 21px); max-width: 430px; }
.hero__copy { grid-column: 3; grid-row: 3; justify-self: center; margin: 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.hero__card { grid-column: 4; grid-row: 3; justify-self: end; }
@media (max-width: 1100px) {
  .hero__services { order: 0; align-self: stretch; }
  .hero__loc { order: 1; align-self: flex-start; margin-top: 12px; }
  .hero__brand { order: 2; margin: auto 0; padding: clamp(48px, 9svh, 96px) 0; }
  .hero__word--live { width: min(84vw, 640px) !important; }
  .hero__card { order: 3; margin-top: 8px; }
  .hero__tag { order: 4; padding-top: 36px; margin-top: 0; }
  .hero__copy { order: 5; align-self: flex-start; margin-top: 22px; }
}
@media (max-width: 760px) {
  .hero__services { gap: 6px 18px; font-size: 10px; letter-spacing: .2em; }
  .hero__loc { font-size: 10px; }
  .band__txt { font-size: 9px; letter-spacing: .38em; margin-right: -.38em; }
  .hero__band { height: 24px; }
}

/* ---------- section band divider: hairline + tracked caps label (the band motif, kept quiet) ---------- */
.sband { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); padding: 0 clamp(20px, 3.2vw, 48px); margin: clamp(56px, 7vw, 110px) 0 clamp(8px, 1vw, 16px); position: relative; z-index: 1; }
.sband__line { flex: 1; height: 1px; background: rgba(255,255,255,.14); transform-origin: 0 50%; }
.sband__line:last-child { transform-origin: 100% 50%; }
.sband__txt { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .32em; margin-right: -.32em; text-transform: uppercase; color: rgba(255,255,255,.6); white-space: nowrap; display: flex; align-items: center; gap: 14px; }
.sband__txt b { font-weight: 500; color: #fff; display: flex; align-items: center; gap: 14px; }
.sband__txt b::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #e60617; }
.sband + .section { padding-top: calc(var(--section) * 0.42); }
.sband + .panel { margin-top: clamp(24px, 3vw, 44px); }
.clients + .sband { margin-top: clamp(80px, 10vw, 150px); }
.js .sband .sband__line { transform: scaleX(0); transition: transform 1.3s cubic-bezier(.7,0,.2,1); }
.js .sband .sband__txt { opacity: 0; letter-spacing: .5em; transition: opacity .9s .25s, letter-spacing 1.4s .25s cubic-bezier(.2,.7,.2,1); }
.js .sband.is-in .sband__line { transform: none; } .js .sband.is-in .sband__txt { opacity: 1; letter-spacing: .32em; }
@media (max-width: 760px) { .sband__txt { font-size: 10px; letter-spacing: .24em; margin-right: -.24em; } .js .sband.is-in .sband__txt { letter-spacing: .24em; } }
@media (prefers-reduced-motion: reduce) { .js .sband .sband__line { transform: none; } .js .sband .sband__txt { opacity: 1; letter-spacing: .32em; } }

/* ---------- minimal placeholders: black frame, tracked-caps label, tiny red dot (replace with real work) ---------- */
.art { background: linear-gradient(180deg, #0f0f10, #0a0a0b) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important; filter: none !important; }
.art > svg { display: none !important; }
.art::before { content: "Image placeholder"; position: absolute; left: 16px; bottom: 14px; z-index: 1; font: 500 10px/1 var(--font-body), sans-serif; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.42); pointer-events: none; }
.art::after { content: "" !important; position: absolute !important; inset: auto 16px auto auto !important; top: 16px !important; width: 5px !important; height: 5px !important; border-radius: 50%; background: #e60617 !important; opacity: 1 !important; pointer-events: none; }
.art--reel::before { content: "Showreel placeholder"; } .member__photo.art::before { content: "Photo placeholder"; }
.svc__thumb.art::before, .post__thumb.art::before { left: 12px; bottom: 10px; font-size: 8px; letter-spacing: .22em; }
.art .project__name { color: rgba(255,255,255,.85) !important; text-shadow: none !important; }
.case-card--hero .case-card__art { -webkit-mask-image: none !important; mask-image: none !important; top: 50% !important; left: 26px; right: 26px; bottom: 74px; border-radius: 14px; }
/* lens neutral (it is off by default in the minimal direction; if re-enabled, white rim only) */
.lg--lens { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 2px 3px 6px rgba(255,255,255,.35), inset -3px -4px 8px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.25) !important; }
.lg-ripple { box-shadow: none !important; }
.art.svc__thumb.svc__thumb { background-image: linear-gradient(180deg, #0f0f10, #0a0a0b) !important; }

/* ---------- red discipline: only the logo dot, the hero band, section-label dots, the progress dot and the stroke ---------- */
.btn::before { background: var(--b-fg) !important; }
.btn:hover { color: var(--b-bg) !important; }
.btn .btn__dot, .founder__btn .btn__dot { background: var(--b-fg) !important; }
.btn:hover .btn__dot { background: var(--b-bg) !important; }
.btn--accent { --b-bg: #fff !important; --b-fg: #000 !important; --b-dot: #000 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -12px rgba(0,0,0,.6) !important; }
.cf, .has-cf .cf { display: none !important; }           /* the grey ring duplicated the brand dot */
.stop { color: inherit !important; }
#contact .mega .stop { color: #e60617 !important; }
.stars svg, .stars--accent svg { color: #fff !important; fill: #fff !important; }
.acc-item.is-open { box-shadow: inset 0 1px 0 var(--g-edge-hi), inset 0 0 0 1px rgba(255,255,255,.16), 0 30px 70px -30px rgba(0,0,0,.6) !important; }
.panel--accent { background: radial-gradient(900px circle at var(--mx, 20%) var(--my, -10%), rgba(255,255,255,.06), transparent 45%), linear-gradient(160deg, rgba(20,20,22,.6), rgba(8,8,10,.55)) !important; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color: rgba(255,255,255,.6) !important; box-shadow: 0 0 0 4px rgba(255,255,255,.1) !important; }
#contact .mega { transition: none; }

/* ---------- one frosted-glass recipe everywhere (uniform blur + saturation, card to card) ----------
   Section-level panels no longer frost themselves (black behind them anyway); that keeps every card's
   backdrop sampling the page directly — no nested backdrop roots, so cards partly off-screen blur too. */
:root { --g-blur: 22px; --g-sat: 140%; }
@media (max-width: 760px), (pointer: coarse) { :root { --g-blur: 18px; --g-sat: 140%; } }
.panel--dark, .panel--light, .panel--accent { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.glass, .project__meta, .step, .case-card, .clients__tile, .search, .takeaways, .post-next__link, .form-card, .quote-block, .t-card, .stat-card,
.value-card, .team-box, .acc-item, .post__body, .meta-table, .timeline__item, .toc, .footer__glass, .contact-details, .results__metric, .mini-steps > *,
.cover, .gallery__item, .notfound__panel, .plan__side, .plan__main, .member, .hero__services,
.panel .step, .panel .t-card, .panel .stat-card, .panel .value-card, .panel .plan__side, .panel .plan__main, .panel .acc-item,
.panel .form-card, .panel .results__metric, .panel .quote-block, .panel .mini-steps > *, .panel .contact-details, .team-box .member {
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) !important; backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) !important; }
.hero__services { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* remaining accents go monochrome */
.ring .ring__val { stroke: #fff !important; } .pill { background: #fff !important; color: #000 !important; } .bar--hi { background: #fff !important; }
.step__dots i { background: rgba(255,255,255,.8) !important; } .ba .up::after { background: #fff !important; }

/* quiet galaxy (homepage): fixed canvas behind all content; the glass frosts it */
.galaxy { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.page-home .hero--home { background: transparent !important; }

/* cinematic finish: vignette under the content (over the galaxy), fine film grain over everything */
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }
html::after { content: ""; position: fixed; inset: -50%; z-index: 400; pointer-events: none; opacity: .055;
  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%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce) { html::after { animation: none; } }

/* heading reveal: soft mask while lines rise into focus (class removed after the reveal) */
.lm-line.lm-soft { overflow: visible; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%); }
.lm-line > span { will-change: auto; }

/* ---------- Apple liquid-glass language on every glass panel (uniform) ----------
   one recipe: blur + generous saturation, a thin specular rim lit from the top-left (bright 1px line on the
   top and left edges, a faint return on the bottom/right), a hairline body edge and a soft drop shadow. */
:root { --g-blur: 20px; --g-sat: 180%; }
@media (max-width: 760px), (pointer: coarse) { :root { --g-blur: 16px; --g-sat: 180%; } }
.glass, .project__meta, .step, .case-card, .clients__tile, .search, .takeaways, .post-next__link, .form-card, .quote-block, .t-card, .stat-card,
.value-card, .team-box, .acc-item, .post__body, .meta-table, .timeline__item, .toc, .footer__glass, .contact-details, .results__metric, .mini-steps > *,
.cover, .gallery__item, .notfound__panel, .plan__side, .plan__main, .member {
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) !important; backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.34), inset -1px -1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.07), 0 18px 50px -26px rgba(0,0,0,.6) !important; }
.galaxy--gl { z-index: 0; }
/* one dot: footer wordmark is inline so its full stop can be handed to / from the travelling dot */
.footer__logo { display: block; width: 100%; height: auto; aspect-ratio: 499.8 / 77.4; overflow: visible; }
.footer__logo .pl-dot, .hero__word--live .pl-dot { transition: none !important; }
.dot-live .footer__logo .pl-dot { opacity: 0; }
#contact .mega .stop { color: #fff !important; }
/* only the logo dots + the travelling dot are red */
.art::after, .founder .art::after, .founder__photo .art::after { background: #fff !important; box-shadow: none !important; }
.footer__email .dot { background: #fff !important; box-shadow: 0 0 0 4px rgba(255,255,255,.16) !important; }
.person-card__photo::after, .project__name::after { background: #fff !important; box-shadow: none !important; }
.dot { background: #fff !important; box-shadow: 0 0 0 4px rgba(255,255,255,.16) !important; }

/* ================= ASTRONAUT VERSION ================= */
.galaxy.astro { background: #010307; }
.page-home .hero--home { background: transparent !important; }
/* where he surfaces at "Let's talk" (the WebGL scene reads this box every frame) */
.astro-spot { position: relative; pointer-events: none; z-index: 0; }
/* clear zone: the astronaut owns his own grid cell, copy can never run into him */
@media (min-width: 1200px) { .contact__grid { grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr) minmax(0, .95fr); }
  .astro-spot { grid-column: 3; grid-row: 1; align-self: center; width: 100%; height: min(74vh, 700px); } }
@media (min-width: 901px) and (max-width: 1199px) { .astro-spot { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 62vh; } }
.astro-spot__img { display: none; }
@media (max-width: 900px) { .astro-spot { position: relative; right: auto; top: auto; width: 100%; height: 62svh; order: -1; } }
/* static stills: reduced motion / no WebGL2 */
html.astro-static body.page-home { background: #010307 linear-gradient(180deg, #010307, #030814 60%, #010307) fixed; }
html.astro-static .page-home .hero--home { background: #010307 url("../astro/hero-closeup-d.webp") 38% 42% / auto 122% no-repeat !important; }
@media (max-aspect-ratio: 1/1) { html.astro-static .page-home .hero--home { background: #010307 url("../astro/hero-closeup-m.webp") 50% 18% / cover no-repeat !important; } }
html.astro-static .astro-spot__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
html.astro-static .galaxy.astro { display: none; }
/* astronaut: let the emerged 3D astronaut read crisp through the Let's-talk panel (only tint the form side) */
html.astro-live .contact.panel--accent { background: radial-gradient(900px circle at var(--mx, 20%) var(--my, -10%), rgba(255,255,255,.05), transparent 45%), linear-gradient(90deg, rgba(16,16,18,.55) 0%, rgba(10,10,12,.3) 42%, rgba(0,0,0,0) 62%) !important; }
@media (max-width: 900px) { html.astro-live .contact.panel--accent { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(12,12,14,.5) 62%, rgba(12,12,14,.6) 100%) !important; } }

/* CC-BY credit for the 3D astronaut */
.footer__credit { flex-basis: 100%; order: 3; margin: 6px 0 0; font-size: 11px; line-height: 1.5; opacity: .5; }
.footer__credit a { text-decoration: underline; text-underline-offset: 2px; }

/* poster: the new astronaut's helmet close-up holds the hero until the GLB has rendered its first frame (no pop-in) */
.astro-poster { display: none; }
.page-home .astro-poster { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #010307 url("../astro/hero-closeup-d.webp") 38% 42% / auto 122% no-repeat; transition: opacity .9s ease; }
@media (max-aspect-ratio: 1/1) { .page-home .astro-poster { background: #010307 url("../astro/hero-closeup-m.webp") 50% 18% / cover no-repeat; } }
html.astro-live .astro-poster { opacity: 0; transition: none; }   /* live: he drifts into an empty hero himself after the preloader */
html.astro-static .astro-poster { opacity: 0; }

/* tagline under the wordmark (no band): wide-tracked caps, light grey, sits inside the visor with the title */
.hero__tagline { display: block; margin-top: clamp(12px, 2.2vh, 26px); padding-left: .52em; font-family: var(--font-body); font-size: clamp(10px, .92vw, 14px); font-weight: 500; letter-spacing: .52em; line-height: 1.2; text-transform: uppercase; text-align: center; color: rgba(236, 238, 242, .8); white-space: nowrap; }
@media (max-width: 760px) { .hero__tagline { font-size: 10px; letter-spacing: .42em; padding-left: .42em; align-self: center; } }
/* frost ramps in with scroll (driven by the astronaut layer), never pops */
.page-home .clients .clients__tile { background-color: rgba(12, 12, 14, calc(.6 * var(--g-k, 1))) !important; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }   /* 0930: tile names stay crisp over the frosted astronaut */

/* menu astronaut (homepage): the galaxy canvas rises just under the menu, which turns translucent while he visits */
html.astro-live .mobile-menu { transition: clip-path .7s var(--ease), visibility 0s .7s, background-color .55s ease; }
html.astro-live .mobile-menu.is-open { transition: clip-path .7s var(--ease), visibility 0s, background-color .55s ease; }
html.astro-menu.astro-menu-in .galaxy.astro { z-index: 89; }
html.astro-gate .hero__brand { opacity: var(--astro-hero, 1); }
/* preloader (draft-one): only the wordmark + falling dot on black; the galaxy fades in after the dot lands */
html.astro-live .galaxy.astro { transition: opacity .6s ease; }
html.astro-live.intro .galaxy.astro { opacity: 0; }
html.astro-live.intro .hero__tagline { opacity: 0; }   /* draft-one preloader: only the wordmark and its falling dot */
html.astro-live .hero__tagline { transition: opacity .5s ease; }
/* one figure only: while he is live the menu is opaque unless the canvas is lifted and showing just the menu pose */
html.astro-live .mobile-menu { background-color: var(--bg); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.astro-menu.astro-menu-in .mobile-menu.is-open { background-color: rgba(6,7,10,.1); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.astro-menu.astro-menu-in.astro-menu-out .mobile-menu.is-open { background-color: var(--bg); }
/* intro order: wordmark + dot -> astronaut floats in (wordmark never blanks) -> header, nav, hero copy, cards fade in -> scroll unlocks */
html.astro-hold .hero__grid > *:not(.hero__brand), html.astro-hold .hero__sub, html.astro-hold .nav, html.astro-hold .clients, html.astro-hold .hero__tagline, html.astro-hold .srail { opacity: 0 !important; pointer-events: none; }
html.astro-hold { overflow: hidden; scrollbar-gutter: stable; }
html.astro-hold body { overflow: hidden; touch-action: none; }
html.astro-reveal .hero__tagline { transition: opacity .8s ease .1s; }
html.astro-reveal .hero__grid > *:not(.hero__brand), html.astro-reveal .hero__sub { transition-delay: .2s; }
html.astro-reveal .clients { transition-delay: .4s; }
/* 0929 intro fix: pure draft-one preloader. No helmet film frame behind it (the poster only served the old film hero),
   the wordmark letters start hidden before any script runs (no flash-then-blank), and the galaxy canvas fades in, never pops */
.page-home .astro-poster { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html.js:not(.dot-ready) .page-home .hero__word--live .pl-l { opacity: 0; } }
html.astro-live:not(.intro) .galaxy.astro { animation: astroIn 1.1s ease both; }   /* 1004: the scene now boots and warms up under the preloader; it fades in only once the preloader ends */
/* 1004: the canvas is sized to the LARGE viewport, so the iOS toolbar showing/hiding never resizes (and never stretches) him */
.galaxy.astro { bottom: auto; height: 100vh; height: 100lvh; }
/* 1004: on a slow first visit, the docked red dot breathes while he is still loading (never a dead screen) */
html.astro-wait .hero__word--live .pl-dot { transform-box: fill-box; transform-origin: 50% 50%; animation: plWait 1.4s ease-in-out infinite; }
@keyframes plWait { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { html.astro-wait .hero__word--live .pl-dot { animation: none; } }
@keyframes astroIn { from { opacity: 0; } to { opacity: 1; } }
/* 0929: frost rule for the red brush stroke where no glass panel sits over it (home hero over the live galaxy, contact):
   blurred uniformly and quieter, never a hard arc; and never during the preloader/astronaut arrival */
.page-home .hero--home .rb--under, .page-contact .rb--under { filter: blur(22px); opacity: .5; }
html.astro-hold .hero--home .rb { opacity: 0 !important; }
html.astro-reveal .hero--home .rb { transition: opacity 1s ease .3s; }
/* 0929: Let's talk brush stroke sits BEHIND the glass form (the panel's backdrop blur frosts it) and is softened like the hero one */
#contact > .rb--under { z-index: 0; filter: blur(18px); opacity: .55; }
#contact .contact__grid { position: relative; z-index: 1; }

/* 0930: desktop clients strip fades in through --cl-a (set by main.js) instead of section opacity, so the tiles' frost can always sample (and uniformly blur) the astronaut behind them */
@media (min-width: 1101px) {
  .page-home .clients .clients__tile { --cla: var(--cl-a, 1);
    background-image: radial-gradient(520px circle at var(--mx, 50%) var(--my, -30%), rgba(255, 255, 255, calc(.11 * var(--cla))), transparent 42%),
      linear-gradient(150deg, rgba(255, 255, 255, calc(.055 * var(--cla))) 0%, rgba(255, 255, 255, calc(.025 * var(--cla))) 42%, rgba(255, 255, 255, calc(.04 * var(--cla))) 100%) !important;
    background-color: rgba(12, 12, 14, calc(.62 * var(--g-k, 1) * var(--cla))) !important; color: rgba(255, 255, 255, var(--cla)); text-shadow: 0 1px 8px rgba(0, 0, 0, calc(.5 * var(--cla)));
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, calc(.34 * var(--cla))), inset -1px -1px 0 rgba(255, 255, 255, calc(.07 * var(--cla))), inset 0 0 0 1px rgba(255, 255, 255, calc(.07 * var(--cla))), 0 18px 50px -26px rgba(0, 0, 0, calc(.6 * var(--cla))) !important;
    -webkit-backdrop-filter: blur(calc(var(--g-blur, 20px) * min(1, var(--cla) * 1.8))) saturate(calc(1 + .8 * var(--g-k, 1) * var(--cla))) !important;
    backdrop-filter: blur(calc(var(--g-blur, 20px) * min(1, var(--cla) * 1.8))) saturate(calc(1 + .8 * var(--g-k, 1) * var(--cla))) !important; }
  .page-home .clients .clients__tile:hover { color: #fff; }
}
/* 0930: bare copy that the astronaut can drift behind keeps a soft dark halo so it stays legible over his white suit */
.page-home .hero__tag, .page-home .clients__label, .page-home .sband__txt, .page-home .big-head__intro { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .6); }
/* 0930: home client tiles stay fully opaque glass (they still pop forward in 3D): a half-faded tile would let the astronaut show through sharp instead of frosted */
.page-home .clients .clients__tile { opacity: 1 !important; }

/* ---------- copy-v2 follow-ups (29 Sep 2026) ---------- */
/* 1. no visible "placeholder" labels anywhere; empty image slots are hidden and their layouts reflow */
.art::before, .art--reel::before, .member__photo.art::before { content: none !important; display: none !important; }
.img-label { display: none !important; }
/* Next projects with a single card: one wide card, not half a grid */
.next-projects .project-grid:has(> .project:only-child) { grid-template-columns: minmax(0, 720px); }
/* 2. brand rule: the red brush always reads frosted, with one softness on every panel (hero, services, contact, inner pages).
   The stroke is pre-softened to the same blur as the glass recipe, so it never shows a hard edge, whether it passes behind a
   section panel (no backdrop of its own, by design) or behind a card (which frosts it again, uniformly). */
.rb--under, .page-home .hero--home .rb--under, .page-contact .rb--under, #contact > .rb--under, body:not(.page-home) .rb { filter: blur(22px) !important; opacity: .5 !important; }
@media (max-width: 760px), (pointer: coarse) { .rb--under, .page-home .hero--home .rb--under, .page-contact .rb--under, #contact > .rb--under, body:not(.page-home) .rb { filter: blur(18px) !important; } }
/* 4. keyword subline inside the big section H2s (visually small, the design word stays the headline) */
.h2-kw { display: block; margin-top: 18px; font: 500 12px/1.5 var(--font-body, Montserrat), sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.58); white-space: normal; max-width: 46em;  text-wrap: balance; }
.panel--light .h2-kw { color: rgba(255,255,255,.58);  text-wrap: balance; }
@media (max-width: 760px) { .h2-kw { margin-top: 12px; font-size: 10.5px; letter-spacing: .16em;  text-wrap: balance; } }
/* copy-v2: projects page filters are hidden while there are only 2 projects, so give the grid its own breathing room under the title */
.page-hero__top ~ .project-grid[data-filter-list] { margin-top: clamp(40px, 5vw, 80px); }
/* copy-v2: homepage "coming soon" project slots: frosted glass media (same blur as every glass panel), fine grain, small grey label */
.project__media--soon { background: linear-gradient(155deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 45%, rgba(255,255,255,.035) 100%), rgba(12,12,14,.68) !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.22), inset -1px -1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -40px rgba(0,0,0,.9) !important;
  -webkit-backdrop-filter: blur(var(--g-blur, 20px)) saturate(1.4); backdrop-filter: blur(var(--g-blur, 20px)) saturate(1.4); }
.project__media--soon::before { content: "" !important; inset: 0; opacity: .07; mix-blend-mode: overlay; transform: none !important;
  background: 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") !important; }
.project__media--soon::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at 50% 0%, rgba(255,255,255,.07), transparent 60%); }
.soon { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.soon__label { font: 500 11px/1 var(--font-body, Montserrat), sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.soon__line { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.1rem, 2vw, 1.7rem); letter-spacing: -.03em; color: rgba(255,255,255,.42); transition: color .6s var(--ease); }
.soon__line .stop { color: var(--accent); }
.project--soon .project__meta strong { color: rgba(255,255,255,.62); }
.project--soon-cta:hover .soon__line { color: #fff; }
.project--soon:not(a) { cursor: default; }
/* the "View" cursor bubble is for real case studies only */
body:has(.project--soon:not(a):hover) .cursor.is-active { transform: scale(0) !important; }
body:has(.project--soon:not(a):hover) .cursor.is-active ~ .cf, body:has(.project--soon:not(a):hover) .cf.is-view { opacity: 1; }
@media (max-width: 760px) { .soon { gap: 10px; } .soon__label { font-size: 10px; } }
/* copy-v2 (29 Sep 18:50): free full-colour stock placeholders (Pexels License; credits in assets/img/stock/CREDITS.txt) fill every image slot; swap for real imagery before launch */
.project__media.art.art--c1 { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.42)), url(../img/stock/proj-player-one.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.project__media.art.art--c2 { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.42)), url(../img/stock/proj-city-lights.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.project__media.art.art--c3 { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.42)), url(../img/stock/proj-object-study.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.project__media.art.art--c4 { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.42)), url(../img/stock/proj-side-a.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.svc__thumb.art.art--1.svc__thumb { background: url(../img/stock/svc-web.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.svc__thumb.art.art--2.svc__thumb { background: url(../img/stock/svc-brand.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.svc__thumb.art.art--3.svc__thumb { background: url(../img/stock/svc-seo.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.svc__thumb.art.art--4.svc__thumb { background: url(../img/stock/svc-video.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.why__art.art.art--why { background: url(../img/stock/why.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.banner.art.art--reel { background: url(../img/stock/about-banner.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.art.art--p1.art--p1 { background: url(../img/stock/post-story.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.art.art--p2.art--p2 { background: url(../img/stock/post-leads.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.art.art--p3.art--p3 { background: url(../img/stock/post-bilingual.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.post__thumb.art.art--4 { background: url(../img/stock/post-geo.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.gallery__item.art.art--1 { background: url(../img/stock/gallery-1.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.gallery__item.art.art--2 { background: url(../img/stock/gallery-2.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.project__media.art[class*="art--c"] .project__name { text-shadow: 0 2px 24px rgba(0,0,0,.6) !important; }
.project__media.art[class*="art--c"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)); z-index: 1; pointer-events: none; }
.project__media.art[class*="art--c"] .project__name { z-index: 2; }
.project--concept { cursor: default; }
body:has(.project--concept:hover) .cursor.is-active { transform: scale(0) !important; }
body:has(.project--concept:hover) .cursor.is-active ~ .cf, body:has(.project--concept:hover) .cf.is-view { opacity: 1; }
.gallery__item.art.art--2.gallery__item { background: url(../img/stock/gallery-1.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.gallery__item.art.art--4.gallery__item { background: url(../img/stock/svc-web.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.gallery__item.art.art--reel.gallery__item { background: url(../img/stock/about-banner.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.gallery__item.art.art--6.gallery__item { background: url(../img/stock/proj-side-a.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.gallery__item.art.art--5.gallery__item { background: url(../img/stock/proj-object-study.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.post--soon .post__thumb { filter: none !important; }
/* colour stock: legibility scrim on journal feature card */
.post--feature::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.72) 100%); border-radius: inherit; }
.post--feature > :not(.post__thumb) { position: relative; z-index: 2; }
/* ---------- SERVICES page (services.html, 30 Sep) ---------- */
.svcx-jump { display: flex; flex-wrap: wrap; gap: 10px; }
.svcx-jump a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 15px; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--text);
  background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); transition: background .3s, transform .3s; }
.svcx-jump a:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.svcx-jump .mono { opacity: .5; font-size: .72rem; }
.svcx { scroll-margin-top: 80px; }
.svcx.panel + .svcx.section, .svcx.section + .svcx.panel { margin-top: 0; }
.svcx.section + .svcx.panel, .svcx.panel + .svcx.section { padding-top: var(--section); }
.svcx__head { display: grid; grid-template-columns: 1fr 3fr; gap: 24px; align-items: start; margin-bottom: clamp(36px, 5vw, 72px); }
.svcx__num { opacity: .55; padding-top: 1.1em; }
.svcx__grid { display: grid; grid-template-columns: 1fr 1.7fr 1.3fr; column-gap: 24px; row-gap: 32px; align-items: start; }
.svcx__copy { grid-column: 2; display: flex; flex-direction: column; gap: 20px; padding-right: clamp(0px, 2vw, 32px); }
.svcx__copy p:not(.h3-lg) { opacity: .72; font-size: 1.02rem; line-height: 1.6; max-width: 620px; }
.svcx__incl { grid-column: 3; border-radius: var(--radius); padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 16px; }
.svcx__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.svcx__list li { position: relative; padding: 11px 0 11px 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: .9rem; line-height: 1.35; }
.svcx__list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.7); }
.svcx__note { font-size: .82rem; opacity: .62; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; }
.svcx__steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin: clamp(40px, 5vw, 72px) 0 0; }
.svcx__steps li { position: relative; border-radius: var(--radius); padding: 22px; min-height: 180px; display: flex; flex-direction: column; gap: 10px; }
.svcx__steps li .mono { opacity: .45; margin-bottom: 26px; }
.svcx__steps li:not(:last-child)::after { content: ""; position: absolute; top: 31px; left: calc(100% + 1px); width: calc(var(--gutter) - 2px); height: 1px; background: rgba(255,255,255,.35); }
.svcx__steps h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.15; }
.svcx__steps p { font-size: .9rem; opacity: .68; line-height: 1.45; }
.svcx__work { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: clamp(40px, 5vw, 72px); }
.svcx__foot { display: grid; grid-template-columns: 1fr 3fr; gap: 24px; align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.svcx__foot > .btn { grid-column: 1; grid-row: 1; justify-self: start; }
.svcx__faq { grid-column: 2; grid-row: 1; }
.svcx__faq .acc-item { border-top: 0; border-radius: var(--radius-sm); margin-bottom: 8px; }
.project__media.art.art--sx-web { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.42)), url(../img/stock/svc-web.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.project__media.art.art--sx-video { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.42)), url(../img/stock/svc-video.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.project__media.art.art--sx-seo { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.42)), url(../img/stock/svc-seo.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.project__media.art.art--sx-social { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.42)), url(../img/stock/post-geo.webp?v=c2) center/cover no-repeat, #0a0a0b !important; }
.svc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 1100px) {
  .svcx__grid { grid-template-columns: 1fr 3fr; }
  .svcx__copy { grid-column: 2; padding-right: 0; } .svcx__incl { grid-column: 2; }
}
@media (max-width: 900px) {
  .svcx__head, .svcx__grid, .svcx__foot { grid-template-columns: 1fr; }
  .svcx__num { padding-top: 0; }
  .svcx__copy, .svcx__incl, .svcx__faq, .svcx__foot > .btn { grid-column: 1; }
  .svcx__foot > .btn { grid-row: 2; }
  .svcx__steps { grid-template-columns: 1fr 1fr; }
  .svcx__steps li { min-height: 0; }
  .svcx__steps li::after { display: none; }
  .svcx__work { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .svcx__list { grid-template-columns: 1fr; }
  .svcx-jump a { font-size: .85rem; padding: 10px 15px 10px 13px; }
  .svcx__steps li { padding: 18px; }
}
.svcx__cases { display: grid; grid-template-columns: 1fr 3fr; gap: 24px; align-items: center; margin-top: 28px; }
.svcx__cases .svc-actions { grid-column: 2; }
@media (max-width: 900px) { .svcx__cases { grid-template-columns: 1fr; gap: 14px; } .svcx__cases .svc-actions { grid-column: 1; } }
/* 1004b: open scroll space after Pricing where the astronaut is swallowed by the black hole (nothing overlaps it) */
.bh-gap { height: 250vh; height: 250lvh; pointer-events: none; }
@media (max-width: 700px) { .bh-gap { height: 230vh; height: 230lvh; } }
@media (prefers-reduced-motion: reduce) { .bh-gap { height: 0; } }
html.astro-static .bh-gap, html.astro-stills .bh-gap { height: 0; }   /* no live 3D (fallback stills): no empty gap */