@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/beejou/bricolagegrotesque.woff2') format('woff2');
}

/* Keep progressive grid items genuinely hidden until revealed. */
.project-card[hidden]{display:none!important}
/* Service descriptions introduced with the studio positioning copy. */
.studio-about aside li+li{margin-top:20px}
.studio-about aside li strong{color:#fff;font-weight:500}
:root{--acid:#dfb1ff;--blue:#f6bdab;--muted:#aba0b8;--line:#33263f;--night:#0b0711;--violet:#9b63d4;--peach:#f6bdab;color-scheme:dark;font-family:'Bricolage Grotesque',Arial,sans-serif;background:var(--night);color:#fff5ee}
*{box-sizing:border-box}body{margin:0}html{scroll-behavior:smooth;scroll-padding-top:90px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--acid);outline-offset:5px}img{display:block;max-width:100%}h1,h2,h3,p{margin-top:0}button{color:inherit}button[hidden],[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#site-header{height:80px;padding:0 2%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:relative;z-index:10;background:#000}
.home #site-header{position:absolute;inset:0 0 auto;background:rgba(0,0,0,.28);backdrop-filter:blur(10px)}
.wordmark{font-size:24px;font-weight:1000;line-height:.83;letter-spacing:-1.4px;width:max-content}.wordmark span{display:block}.wordmark .cross{color:var(--acid)}
.primary-nav{display:flex;gap:34px;font-size:16px;font-weight:600}.primary-nav a:hover,.primary-nav a[aria-current=page]{color:var(--acid)}
.social-links{justify-self:end;display:flex;gap:10px}.social-links a{background:var(--acid);color:#000;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900}.social-links a:hover{background:white}
.hero-reel{height:100svh;min-height:500px;position:relative;overflow:hidden;background:#111}
.hero-poster{position:absolute;width:100%;height:225%;object-fit:cover;object-position:center top}.hero-reel iframe{position:absolute;top:50%;left:50%;width:max(100vw,177.778svh);height:max(100svh,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0}.hero-reel.playing iframe{opacity:1}
.hero-reel:after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.7));pointer-events:none}
.hero-caption{position:absolute;left:2%;bottom:30px;z-index:2;text-transform:uppercase;font-size:13px;font-weight:800;letter-spacing:.05em}.hero-caption span{display:block;font-size:10px;opacity:.65;margin-top:5px;letter-spacing:.03em}
.scroll-prompt{position:absolute;z-index:2;bottom:45px;left:50%;transform:translateX(-50%);background:var(--acid);color:#000;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font-size:26px;font-weight:900}
.scroll-prompt:hover{background:#fff}.reel-actions{position:absolute;z-index:3;right:2%;bottom:32px;display:flex;gap:12px}.reel-actions button{background:#0008;border:1px solid #ffffff50;border-radius:30px;padding:9px 14px;font-size:11px}.reel-actions button:hover{border-color:var(--acid)}
.catalogue{width:86%;max-width:1800px;margin:0 auto;padding:74px 0 85px}.section-title{text-align:center;margin:0 0 38px}.section-title h1,.section-title h2{font-size:clamp(36px,4.3vw,88px);font-weight:1000;letter-spacing:-.045em;line-height:1;text-transform:uppercase;margin:0}.eyebrow{text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--muted);margin-bottom:17px}.standalone{padding-top:37px}.standalone .section-title{margin-bottom:42px}
.work-tools{display:grid;grid-template-columns:18% 1fr auto auto;gap:7px;margin-bottom:24px}.work-tools input,.work-tools select{width:100%;min-width:0;color:#d2e1e8;background:#000;border:1px solid #888;border-radius:5px;padding:8px 11px;font-size:12px;height:35px}.work-tools input::placeholder{color:#99adba}.work-tools button{border:0;background:var(--acid);color:#000;padding:0 22px;border-radius:6px;font-size:12px;font-weight:700}.work-tools .clear-filters{background:#262626;color:#fff}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 26px}
.project-card{display:block;min-width:0}.card-media{aspect-ratio:16/9;position:relative;isolation:isolate;background:#151515;overflow:hidden}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.project-card:hover img{transform:scale(1.025)}.card-caption{position:relative;padding-top:0;margin-top:-7px;z-index:2}.card-line{display:flex;align-items:flex-start;gap:7px;margin:0 0 5px;font-size:clamp(15px,1.55vw,30px);font-weight:1000;text-transform:uppercase;letter-spacing:-.05em;line-height:1.1}.card-line i{flex-shrink:0;font-style:normal;background:#fff;color:#000;border-radius:50%;width:23px;height:23px;font-size:22px;font-weight:800;display:grid;place-items:center;line-height:1}.card-line span{color:#000;background:var(--acid);padding:0 3px}.card-line.title span{background:var(--blue)}.card-line.title i{font-size:20px}.project-card:hover .title span{background:#fff}
.art-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 75% 20%,var(--tone,#484e5a),transparent 60%),linear-gradient(130deg,#0e1117,#202731);padding:10%;overflow:hidden}.art-placeholder:before{content:'';position:absolute;width:48%;aspect-ratio:1;border:1px solid #ffffff25;border-radius:50%;transform:rotate(-25deg);box-shadow:0 0 0 35px #ffffff04,0 0 0 70px #ffffff03}.art-placeholder strong{position:relative;text-align:center;font-size:clamp(26px,3.2vw,62px);font-weight:800;letter-spacing:-.06em;line-height:1.05;text-transform:uppercase;max-width:100%}.art-placeholder small{position:absolute;bottom:18px;left:20px;color:#ffffff80;font-size:9px;letter-spacing:.16em;text-transform:uppercase}.art-placeholder .art-number{position:absolute;top:17px;right:20px;color:#ffffff60;font-size:10px}
.load-more{display:flex;gap:65px;margin:45px auto 0;border:1px solid #555;border-radius:3px;background:transparent;padding:15px 22px;font-size:12px}.load-more:hover{background:var(--acid);color:#000}.load-more span{font-size:18px}#empty-state{text-align:center;padding:60px 0;color:var(--muted)}
.client-strip{padding:30px 0 55px;border-top:1px solid var(--line);overflow:hidden}.client-heading{width:86%;max-width:1800px;margin:auto;display:flex;justify-content:space-between;align-items:center}.client-heading h2{font-size:clamp(23px,2.3vw,38px);letter-spacing:-.04em;margin-bottom:9px}.client-heading .eyebrow{margin-bottom:10px}.client-context{width:86%;margin:0 auto 24px;font-size:12px;color:var(--muted)}#logos-toggle{border:1px solid #444;border-radius:25px;background:transparent;padding:8px 14px;font-size:11px}.logo-row{overflow:hidden;display:flex;border-top:1px solid #202020}.logo-row:last-child{border-bottom:1px solid #202020}.logo-track{display:flex;flex:none;width:max-content;animation:logo-scroll 90s linear infinite}.logo-row.reverse .logo-track{animation-direction:reverse;animation-duration:100s}.logo-group{display:flex;flex:none}.logo-cell{width:200px;height:88px;display:flex;align-items:center;justify-content:center;padding:20px 30px}.logo-cell img{max-width:140px;max-height:40px;width:100%;height:40px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}.logo-cell .brand-name{font-weight:800;letter-spacing:-.035em;text-align:center;line-height:1.05;font-size:20px;max-width:145px}.logo-cell .brand-name.serif{font-family:inherit;font-weight:400;letter-spacing:.02em;font-size:19px}.logo-track:hover,.logo-track:focus-within,.client-strip.paused .logo-track{animation-play-state:paused}@keyframes logo-scroll{to{transform:translateX(-50%)}}
.contact-band{border-top:1px solid var(--line);width:86%;margin:auto;padding:75px 0;position:relative}.contact-band h2{font-size:clamp(42px,5.5vw,96px);font-weight:800;line-height:.97;letter-spacing:-.055em;margin-bottom:30px}.contact-band em{font-family:inherit;font-weight:400;color:var(--acid)}.contact-band>a{display:inline-flex;gap:60px;align-items:center;background:var(--acid);color:black;padding:15px 20px;font-size:13px;font-weight:700}.site-footer{border-top:1px solid var(--line);margin:0 2%;padding:24px 0;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}.site-footer a:hover{color:var(--acid)}
.about-page,.project-detail{width:86%;max-width:1800px;margin:0 auto;padding:80px 0 100px}.about-page h1{font-size:clamp(56px,7vw,112px);letter-spacing:-.06em;line-height:.95}.about-page em{font-family:inherit;font-weight:400;color:var(--acid)}.about-columns{display:grid;grid-template-columns:2fr 1fr;gap:15%;line-height:1.6}.large-copy{font-size:clamp(23px,2.5vw,40px);line-height:1.2;letter-spacing:-.03em}.about-columns h2{font-size:15px}.about-columns ul{list-style:none;padding:0;margin-bottom:35px}.about-columns p:not(.large-copy),.about-columns ul{color:#aaa}.text-link{color:var(--acid)}.back-link{display:inline-block;font-size:12px;margin-bottom:40px;color:var(--muted)}.project-heading h1{font-size:clamp(40px,5.5vw,85px);letter-spacing:-.05em;line-height:1;margin-bottom:30px;max-width:1200px}.project-heading .eyebrow{color:var(--acid)}.detail-media{aspect-ratio:16/9;position:relative;overflow:hidden}.detail-media>img{width:100%;height:100%;object-fit:cover}.project-summary{display:grid;grid-template-columns:2fr 1fr;gap:15%;padding:45px 0}.project-summary dt{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}.project-summary dd{margin:0 0 22px;font-size:15px}.project-next{display:block;border-top:1px solid #444;padding-top:25px;margin-top:20px;font-size:23px}.source-link{color:var(--acid);font-size:13px}.media-note{font-size:11px;color:var(--muted);margin:10px 0}
#reel-dialog{width:min(1100px,95vw);padding:45px 0 0;background:#000;border:1px solid #444;color:white}#reel-dialog::backdrop{background:#000d}#close-reel{position:absolute;right:10px;top:10px;border:0;background:none}#reel-dialog-content{aspect-ratio:16/9}#reel-dialog iframe{width:100%;height:100%;border:0}
@media(max-width:767px){#site-header{padding:0 5%;height:70px;grid-template-columns:1fr auto}.wordmark{font-size:20px}.primary-nav{gap:20px;font-size:13px}.social-links{display:none}.hero-reel{min-height:500px}.hero-caption{left:5%;bottom:80px;font-size:11px}.reel-actions{right:5%;bottom:23px;gap:6px}.reel-actions button{font-size:10px;padding:8px 10px}.scroll-prompt{bottom:23px;left:calc(5% + 18px);width:36px;height:36px}.catalogue{width:90%;padding:45px 0 55px}.standalone{padding-top:28px}.section-title{margin-bottom:27px}.section-title h1,.section-title h2{font-size:38px}.work-tools{grid-template-columns:1fr auto}.work-tools select{grid-column:1/-1}.work-tools .clear-filters{grid-column:1/-1;height:32px}.work-grid{grid-template-columns:1fr;gap:27px}.card-line{font-size:20px}.card-line i{width:21px;height:21px;font-size:20px}.art-placeholder strong{font-size:36px}.client-heading,.client-context,.contact-band{width:90%}.client-context{font-size:11px;line-height:1.5;max-width:90%}.client-heading h2{font-size:25px;max-width:260px}.client-heading .eyebrow{font-size:8px}.logo-cell{width:150px;height:75px;padding:17px 20px}.logo-cell img{max-height:33px}.logo-cell .brand-name{font-size:17px}.contact-band{padding:50px 0}.site-footer{margin:0 5%;flex-wrap:wrap}.site-footer>span{display:none}.about-page,.project-detail{width:90%;padding:45px 0}.about-columns,.project-summary{grid-template-columns:1fr;gap:25px}.detail-media .art-placeholder strong{font-size:32px}}
.logo-cell img{filter:grayscale(1) invert(1) brightness(3);mix-blend-mode:screen}
.logo-cell img[src$=".png"]{filter:brightness(0) invert(1)}
.logo-cell img[src$="jamshed.png"]{filter:grayscale(1) invert(1) brightness(3)}
/* Midnight, violet and peach: the supplied night-sky palette. */
body{background:radial-gradient(ellipse at 90% 30%,#2d173c24,transparent 45%),var(--night)}
#site-header{background:var(--night)}.home #site-header{background:#10091c70}
.wordmark .cross{background:linear-gradient(100deg,var(--acid),var(--peach));background-clip:text;-webkit-text-fill-color:transparent}
.social-links a,.scroll-prompt,.work-tools button,.contact-band>a{background:linear-gradient(120deg,var(--acid),var(--peach));color:#170b22}
.work-tools input,.work-tools select{background:#100a18;border-color:#695377;color:#f0ddf8}.work-tools input::placeholder{color:#b8a2c4}
.work-tools .clear-filters{background:#382343;color:#fff5ee}
.catalogue{width:94%;max-width:none;padding-top:52px}.standalone{padding-top:30px}
.work-grid{gap:38px 26px}.section-title{margin-bottom:32px}
.section-title h1,.section-title h2{font-size:clamp(42px,5vw,98px)}
.client-heading,.client-context,.contact-band{width:94%;max-width:none}
.art-placeholder{background:radial-gradient(ellipse at 65% 90%,#e8a39b26,transparent 60%),radial-gradient(ellipse at 75% 20%,var(--tone),transparent 70%),linear-gradient(135deg,#140b22,#20102f)}
.project-card{--pointer-x:50%;--pointer-y:50%;--reveal-delay:0ms}
.card-media{background:#1a1026;transition:box-shadow .4s ease;overflow:hidden}
.card-media img,.card-media .art-placeholder{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.card-media:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),#dcadff25,transparent 58%);box-shadow:inset 0 0 0 1px #e6b9ff55;transition:opacity .4s ease}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-media{box-shadow:0 0 30px #b46ee52e,0 8px 36px #ecb6a815}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-media:before{opacity:1}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-media img,.project-card:is(:hover,:focus-visible,.mobile-preview) .art-placeholder{transform:scale(1.045);filter:brightness(1.07)}
.card-line span{position:relative;overflow:hidden;background:var(--acid);transition:background .3s,box-shadow .3s,transform .3s}
.card-line span b{display:block;font:inherit;transition:transform .4s cubic-bezier(.2,.75,.2,1)}
.card-line span:after{content:attr(data-label);position:absolute;inset:0;padding:0 3px;transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.75,.2,1)}
.card-line.title span{background:var(--peach)}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-line span b{transform:translateY(-110%)}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-line span:after{transform:translateY(0)}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-line.title span{background:#ffd8c5;transform:translateX(5px);box-shadow:0 0 16px #f6bdab35}
.card-line.title span b,.card-line.title span:after{transition-delay:65ms}
.card-line i{background:#f9eee9;transition:transform .45s cubic-bezier(.2,.75,.2,1),background .3s}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-line:not(.title) i{transform:rotate(90deg);background:var(--acid)}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-line.title i{transform:rotate(-35deg);background:var(--peach)}
.project-card.reveal-pending:not(.is-revealed){opacity:0;transform:translateY(38px)}
.project-card.reveal-pending.is-revealed{animation:tile-boot .85s cubic-bezier(.18,.7,.2,1) var(--reveal-delay) both}
.project-card.reveal-pending.is-revealed .card-media:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(180deg,transparent 35%,#d6a5ff44 48%,#ffd2b799 50%,transparent 52%);animation:tile-scan 1s ease-out var(--reveal-delay) both}
.project-card.reveal-pending.is-revealed .card-caption{animation:caption-boot .65s cubic-bezier(.2,.7,.2,1) calc(var(--reveal-delay) + .2s) both}
.reveal-complete{opacity:1;transform:none}
@keyframes tile-boot{0%{opacity:0;transform:translateY(38px) scale(.985);clip-path:inset(0 0 100% 0)}35%{opacity:1}100%{opacity:1;transform:none;clip-path:inset(-45px)}}
@keyframes tile-scan{0%{transform:translateY(-100%);opacity:0}25%{opacity:1}100%{transform:translateY(100%);opacity:0}}
@keyframes caption-boot{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.client-strip{background:radial-gradient(ellipse at 50% 100%,#6d356821,transparent 75%);border-color:var(--line)}
.logo-row{border-color:var(--line)}.logo-group{position:relative}
.logo-track,.logo-row.reverse .logo-track{animation:brand-drift 140s linear infinite;animation-play-state:paused;transform:translateX(var(--logo-start,0px))}
.logo-row.reverse .logo-track{animation-duration:155s}
.client-strip.in-view:not(.paused) .logo-track,.client-strip.in-view:not(.paused) .logo-track:hover{animation-play-state:running}
.client-strip.paused .logo-track{animation-play-state:paused}
@keyframes brand-drift{from{transform:translateX(var(--logo-start))}to{transform:translateX(var(--logo-end))}}
@media(max-width:767px){.catalogue{width:90%;padding-top:42px}.section-title h1,.section-title h2{font-size:38px}.work-grid{gap:29px}.client-heading,.client-context,.contact-band{width:90%}.project-card{--reveal-delay:0ms!important}}
/* Continuous marquee and independently observed media / caption entrances. */
:root{--night:#07050a;--red:#993557;--amber:#d99451;--violet:#a765f1;--ease-luxe:cubic-bezier(.4,0,.2,1)}
body{isolation:isolate;background:var(--night)}
.ambient-glow{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;opacity:.65;transform:translateZ(0);background:#07050a}
.ambient-glow i{position:absolute;display:block;width:125vw;height:125vh;border-radius:42% 58% 62% 38%;filter:blur(clamp(110px,12vw,220px));will-change:transform;animation:ambient-float 42s ease-in-out infinite alternate}
.ambient-glow i:nth-child(1){left:-18%;top:10%;background:radial-gradient(ellipse,#9945f13b, #662bb222 35%,transparent 68%)}
.ambient-glow i:nth-child(2){right:-20%;top:34%;background:radial-gradient(ellipse,#a92a4930,#da91551a 42%,transparent 70%);animation-delay:-17s;animation-duration:51s}
.ambient-glow i:nth-child(3){left:28%;bottom:-40%;background:radial-gradient(ellipse,#f4b6a320,#8e45bd20 36%,transparent 70%);animation-delay:-28s;animation-duration:59s}
@keyframes ambient-float{0%{transform:translate3d(-18%,-16%,0) rotate(-18deg) scale(.86)}50%{transform:translate3d(9%,12%,0) rotate(8deg) scale(1.08)}100%{transform:translate3d(25%,-8%,0) rotate(28deg) scale(.94)}}
.project-card{transition:filter 1100ms var(--ease-luxe);filter:drop-shadow(0 0 0 transparent)}
.project-card:is(:hover,:focus-visible,.mobile-preview){filter:drop-shadow(0 0 16px #b270f127)}
.card-media{border-radius:22px;box-shadow:none!important;mask-image:linear-gradient(to right,transparent,#000 8px,#000 calc(100% - 8px),transparent),linear-gradient(to bottom,transparent,#000 8px,#000 calc(100% - 8px),transparent);mask-composite:intersect}
.card-media img,.card-media .art-placeholder{transition:transform 1250ms cubic-bezier(.16,1,.3,1),filter 1250ms var(--ease-luxe)}
.card-media:before{border-radius:inherit;background:radial-gradient(ellipse at 55% 40%,#d8a5ff18,transparent 70%);box-shadow:inset 0 0 45px #d7a5fb18;transition:opacity 1150ms var(--ease-luxe)}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-media img,.project-card:is(:hover,:focus-visible,.mobile-preview) .art-placeholder{transform:scale(1.045);filter:brightness(1.055)}
.card-caption{margin-top:9px}
.card-line span{border-radius:3px;transition:background 800ms var(--ease-luxe),box-shadow 800ms var(--ease-luxe),transform 800ms var(--ease-luxe)}
.card-line span b,.card-line span:after{transition:transform 750ms var(--ease-luxe)}
.card-line i{transition:transform 800ms var(--ease-luxe),background 800ms var(--ease-luxe)}
.project-card.reveal-pending.is-revealed,.project-card.reveal-pending.is-revealed .card-caption{animation:none}
.project-card.reveal-pending.is-revealed .card-media:after{content:none;animation:none}
.card-caption:not(.caption-visible) .card-line{opacity:0;transform:translateY(22px)}
.logo-track,.logo-row.reverse .logo-track{animation:none!important;will-change:transform}
.logo-row{mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
@media(max-width:767px){.card-media{border-radius:16px}.ambient-glow i{width:165vw;height:120vh;filter:blur(110px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ambient-glow i{animation:none}.project-card.reveal-pending:not(.is-revealed){transform:none}}
/* Feather a rounded silhouette of the entire media group, including its background. */
.card-media{border-radius:0;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='562' viewBox='0 0 1000 562' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='soft' x='-10%25' y='-20%25' width='120%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='18' y='18' width='964' height='526' rx='25' fill='white' filter='url(%23soft)'/%3E%3C/svg%3E");mask-size:100% 100%;mask-repeat:no-repeat;mask-composite:add}
.card-line span{transition:background-color 800ms var(--ease-luxe),color 800ms var(--ease-luxe),box-shadow 800ms var(--ease-luxe),transform 800ms var(--ease-luxe)}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-line:not(.title) span{background:var(--brand-hover);color:var(--brand-ink)}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-line.title span{background:var(--job-hover);color:var(--job-ink);box-shadow:none}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-line:not(.title) i{background:var(--brand-hover);color:var(--brand-ink)}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-line.title i{background:var(--job-hover);color:var(--job-ink)}
/* Fixed navigation with its own feathered background, never masking the links. */
body:not(.home){padding-top:80px}
#site-header,.home #site-header{position:fixed;inset:0 0 auto;z-index:100;background:transparent;backdrop-filter:none;isolation:isolate}
#site-header:before{content:'';position:absolute;inset:0 0 -22px;z-index:-1;background:linear-gradient(to bottom,#000 0%,#000f 66%,#000e 76%,#0008 87%,#0000 100%);pointer-events:none}
@media(max-width:767px){body:not(.home){padding-top:70px}}
/* Default theme sampled from the supplied concert artwork; brand hover palettes are independent. */
:root{--night:#050309;--acid:#f901fd;--peach:#8ad4e4;--blue:#87aefb;--violet:#c715d6;--muted:#b4afcf;--line:#31203f;--theme-ice:#c7f5fe;--theme-lime:#d1ff00;color:#f5f4ff}
.wordmark .cross{background-image:linear-gradient(100deg,var(--acid),var(--theme-ice))}
.social-links a,.scroll-prompt,.work-tools button,.contact-band>a{background:linear-gradient(120deg,var(--acid),var(--peach));color:#080312}
.work-tools input,.work-tools select{background:#0c0714;border-color:#625174;color:var(--theme-ice)}
.work-tools input::placeholder{color:var(--muted)}
.work-tools .clear-filters{background:#2b163b;color:#f5f4ff}
.card-line i{background:var(--theme-ice)}
.primary-nav a[aria-current=page]{color:var(--theme-lime)}
.art-placeholder{background:radial-gradient(ellipse at 15% 95%,#8ad4e41c,transparent 65%),radial-gradient(ellipse at 75% 20%,var(--tone),transparent 70%),linear-gradient(135deg,#0e071c,#190d2b)}
.ambient-glow i:nth-child(1){left:-35%;top:-40%;background:radial-gradient(ellipse,#c715d628,#700be51c 40%,transparent 76%)}
.ambient-glow i:nth-child(2){left:0;right:auto;top:-15%;background:radial-gradient(ellipse,#008cff30,#245bff20 42%,transparent 78%)}
.ambient-glow i:nth-child(3){left:-20%;top:20%;bottom:auto;background:radial-gradient(ellipse,#38ccff20,#6855ee18 42%,transparent 78%)}
.ambient-glow i:nth-child(1){animation-duration:6s;animation-delay:-1.75s}
.ambient-glow i:nth-child(2){animation-duration:7.2s;animation-delay:-4.717s}
.ambient-glow i:nth-child(3){animation-duration:8.4s;animation-delay:-6.424s}
/* Moving negative space cuts soft black channels through the colour wash. */
.ambient-glow:before,.ambient-glow:after{content:'';position:absolute;z-index:1;pointer-events:none;width:110vw;height:110vh;background:radial-gradient(ellipse,#000 0%,#000f 18%,#000c 34%,#0000 65%);filter:blur(65px);will-change:transform}
.ambient-glow:before{left:-35%;top:-30%;animation:ambient-shadow 6.8s ease-in-out -2.267s infinite alternate}
.ambient-glow:after{left:20%;top:25%;animation:ambient-shadow 8.8s ease-in-out -6.034s infinite alternate-reverse}
@keyframes ambient-shadow{0%{transform:translate3d(-14%,16%,0) rotate(-25deg) scale(.9)}50%{transform:translate3d(22%,-12%,0) rotate(12deg) scale(1.13)}100%{transform:translate3d(-8%,30%,0) rotate(35deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.ambient-glow:before,.ambient-glow:after{animation:none}}
.client-strip{background:radial-gradient(ellipse at 50% 100%,#c715d615,transparent 75%)}
::selection{background:var(--acid);color:#080312}
.reference-badge{position:absolute;bottom:25px;left:25px;z-index:4;padding:5px 8px;border-radius:4px;background:#050309d9;color:#eee9f5;font-size:9px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.edge-glow{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity 1100ms var(--ease-luxe);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 562' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-20%25' y='-30%25' width='140%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='18'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='27' y='27' width='946' height='508' rx='28' fill='none' stroke='white' stroke-width='45' filter='url(%23f)'/%3E%3C/svg%3E");mask-size:100% 100%;mask-repeat:no-repeat}
.edge-glow>img,.edge-glow>.art-placeholder{filter:blur(24px) brightness(1.9) saturate(1.15)!important}
.project-card:is(:hover,:focus-visible,.mobile-preview) .edge-glow{opacity:.28}
/* The new edge pass derives its colour from the image, not a uniform purple tint. */
.project-card:is(:hover,:focus-visible,.mobile-preview){filter:none}
.card-media:before{content:none}
.card-media .thumbnail-video,.edge-glow .video-glow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:transform 1250ms cubic-bezier(.16,1,.3,1),filter 1250ms var(--ease-luxe),opacity 350ms ease-out}
.card-media .thumbnail-video{z-index:2}
.card-media.video-ready .thumbnail-video,.edge-glow .video-glow.has-frame{opacity:1}
.project-card:is(:hover,:focus-visible,.mobile-preview) .thumbnail-video,.project-card:is(:hover,:focus-visible,.mobile-preview) .video-glow{transform:scale(1.045);filter:brightness(1.055)}
.edge-glow .video-glow{z-index:2;filter:blur(24px) brightness(1.9) saturate(1.15)!important}
.card-media .poster-backdrop,.detail-media .poster-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(24px) brightness(.3);transform:scale(1.1)}
.card-media .poster-art,.detail-media .poster-art{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;padding:12px}
.card-media.fill-cover .poster-art{object-fit:cover;padding:0}
.card-media.video-ready .reference-badge{opacity:0}
.project-card:is(:hover,:focus-visible,.mobile-preview) .card-media .poster-backdrop{filter:blur(24px) brightness(.35);transform:scale(1.14)}
@media(max-width:767px){.reference-badge{font-size:7px;left:16px;bottom:16px;padding:4px 6px}.card-media .poster-art{padding:8px}}

/* Native reel sits beneath the fixed header; preserve its complete framing. */
.home{padding-top:80px}
.hero-reel{height:auto;min-height:0;aspect-ratio:16/9;background:#000}
.hero-video{display:block;width:100%;height:100%;object-fit:contain}
.scroll-cue,.scroll-cue:hover{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:0;background:transparent;color:#fff;opacity:.7}
.scroll-cue:hover,.scroll-cue:focus-visible{opacity:1}
.scroll-cue svg{animation:scroll-nudge 2.8s ease-in-out infinite}
.scroll-prompt{left:50%;bottom:18px;transform:translateX(-50%)}
.load-more{margin:35px auto 0}
@keyframes scroll-nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@media(max-width:767px){.home{padding-top:70px}.hero-caption{left:5%;bottom:10px;font-size:9px}.hero-caption span{font-size:7px}.scroll-prompt{left:50%;bottom:4px}}
@media(prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}}

/* A quiet, direct contact page using the existing type and ambient palette. */
.contact-body{min-height:100svh;display:flex;flex-direction:column}
.contact-page{width:94%;max-width:1500px;margin:auto;padding:clamp(65px,10vh,130px) 0 60px;flex:1}
.contact-page h1{font-size:clamp(42px,6.6vw,100px);line-height:1.04;letter-spacing:-.055em;margin-bottom:30px}
.contact-page h1 em{font-family:inherit;font-weight:400;color:var(--acid)}
.contact-intro{font-size:clamp(16px,1.5vw,21px);line-height:1.65;color:var(--muted);margin-bottom:clamp(30px,5vh,60px)}
.contact-email-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.contact-email{font-size:clamp(24px,4vw,60px);letter-spacing:-.04em;line-height:1.25;transition:color .25s}
.contact-email:hover{color:var(--peach)}
.copy-email{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:132px;min-height:46px;padding:12px 17px;border:1px solid #ffffff40;border-radius:999px;background:#ffffff08;color:inherit;font-size:13px;transition:background .25s,border-color .25s}
.copy-email:hover{background:#ffffff16;border-color:#ffffff90}
.copy-status{min-height:1.6em;margin:14px 0 38px;font-size:13px;color:var(--peach)}
.contact-location{font-size:12px;color:var(--muted)}
@media(max-width:767px){.contact-page{width:90%;padding-top:60px}.contact-email-row{gap:20px}.contact-intro br{display:none}.contact-page h1{font-size:clamp(36px,8vw,56px)}}

/* Copy confirmation: spring, checkmark and a short burst of light. */
.client-heading{margin-bottom:24px}
.contact-band h2{max-width:1000px;line-height:1.05}
.contact-band>a.glass-contact{position:relative;isolation:isolate;overflow:hidden;min-height:74px;min-width:260px;padding:22px 34px;gap:45px;border-radius:999px;border:1px solid #ffffff65;color:#fff;font-size:20px;font-weight:600;letter-spacing:-.025em;background:radial-gradient(ellipse at 22% 0%,#edbdff75,transparent 65%),radial-gradient(ellipse at 88% 100%,#6ebaff65,transparent 60%),linear-gradient(125deg,#b984d338,#ffffff20 45%,#874fc533);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 2px 2px #ffffff70,inset 0 -2px 4px #adbeff50,0 12px 32px #0003;text-shadow:0 1px 8px #15072380;transition:transform .3s ease,box-shadow .3s ease}
.glass-contact::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 12%,#ffffff24 29%,transparent 43%,#f2c5ff25 68%,transparent 82%);pointer-events:none}
.glass-contact span{font-size:26px;transition:transform .3s ease}
@media(hover:hover){.contact-band>a.glass-contact:hover{transform:translateY(-3px);box-shadow:inset 0 2px 3px #ffffff90,inset 0 -2px 5px #adbeff70,0 16px 40px #8154bb30}.glass-contact:hover span{transform:translate(3px,-3px)}}
.contact-band>a.glass-contact:active{transform:scale(.97)}
@media(max-width:767px){.contact-band>a.glass-contact{min-height:64px;min-width:230px;padding:18px 28px;font-size:18px}.client-heading h2{max-width:none}}
@media(prefers-reduced-motion:reduce){.contact-band>a.glass-contact,.glass-contact span{transition:none}}
.copy-email{position:relative;isolation:isolate}
.copy-email.is-copied{background:#8ad4e41c;border-color:var(--peach);color:var(--theme-ice);box-shadow:0 0 24px #8ad4e428}
.copy-check{stroke-dasharray:24;stroke-dashoffset:0;animation:copy-check-draw .45s ease-out both}
.copy-spark{position:absolute;pointer-events:none;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:var(--peach);box-shadow:0 0 8px currentColor}
.copy-spark:nth-of-type(2n){background:var(--acid)}
@keyframes copy-check-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.copy-check{animation:none}}

/* Alternate the original artwork with a monochrome client identity. */
.brand-overlay{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity 5s ease-in-out}
.brand-overlay-art,.brand-overlay-shade,.brand-overlay-mark{position:absolute;inset:0}
.brand-overlay-art{filter:grayscale(1)}
.brand-overlay-art>img{width:100%;height:100%;object-fit:cover}
.brand-overlay-shade{background:rgba(0,0,0,.85)}
.brand-overlay-mark{display:flex;align-items:center;justify-content:center}
.card-media .brand-overlay-logo{width:29%;height:20%;object-fit:contain;filter:grayscale(1) invert(1) brightness(3);mix-blend-mode:screen;transform:none!important}
.card-media .brand-overlay-logo[src$=".png"]{filter:brightness(0) invert(1)}
.card-media .brand-overlay-logo[src$="jamshed.png"]{filter:grayscale(1) invert(1) brightness(3)}
.card-media .brand-overlay-logo.project-title-logo{filter:brightness(0) invert(1)}
.card-media .brand-overlay-logo.project-title-logo[src$="shogun-logo.jpg"]{filter:grayscale(1) invert(1) brightness(1.3)}
.brand-overlay-name{max-width:35%;text-align:center;color:#fff;font-weight:800;font-size:clamp(11px,1.6vw,27px);letter-spacing:-.04em;line-height:1.1}
.brand-phase .brand-overlay{opacity:1}
.project-card:is(:hover,:focus-visible,.mobile-preview) .brand-overlay,.card-media.video-ready .brand-overlay{opacity:0;transition-duration:350ms}

/* Gothic A1's capitals sit high in its line box. Balance the visible glyphs,
   using identical insets for both the resting and sliding hover labels. */
.card-line{align-items:center}
.card-line span,.card-line span:after{padding:.18em .18em .02em;line-height:1.1}
.card-line i{display:flex;align-items:center;justify-content:center}
.card-line i svg{display:block;width:64%;height:64%;flex:none}

/* Studio identity, editorial introduction and live glass call to action. */
:root{font-family:'Bricolage Grotesque',Arial,sans-serif}
.wordmark{display:flex;align-items:baseline;gap:.22em;font-weight:800;letter-spacing:-.065em;line-height:1}
.wordmark span{display:inline}
.about-page em,.contact-page h1 em,.contact-band em{font-family:inherit;font-style:normal}
.client-strip{padding-top:clamp(72px,8vw,128px);padding-bottom:clamp(64px,7vw,112px)}
.client-strip,.contact-band,.site-footer{background:transparent}
.client-heading{justify-content:center;text-align:center;margin-bottom:clamp(48px,5vw,80px)}
.client-heading h2{font-size:clamp(34px,4vw,64px);line-height:1.15;font-weight:500;letter-spacing:-.04em;margin:0;max-width:100%;text-wrap:balance}
.studio-intro{position:relative;--intro-feather:clamp(140px,14vw,220px);background:linear-gradient(to bottom,#000 0%,#000 calc(100% - var(--intro-feather)),rgba(0,0,0,.92) calc(100% - var(--intro-feather)*.75),rgba(0,0,0,.5) calc(100% - var(--intro-feather)*.4),rgba(0,0,0,.12) calc(100% - var(--intro-feather)*.15),transparent 100%);color:#fff;padding:clamp(64px,7vw,112px) 3% calc(var(--intro-feather) + 48px)}
.studio-intro h2,.studio-intro p{margin:0}
.studio-intro h2{font-size:clamp(34px,3.6vw,58px);font-weight:700;letter-spacing:-.04em;line-height:1.15;margin-bottom:20px;text-wrap:balance}
.studio-intro p{max-width:620px;font-size:clamp(18px,1.55vw,24px);font-weight:300;letter-spacing:-.015em;line-height:1.55;color:#c8c5cc;text-wrap:pretty}
.studio-about h1{font-weight:500;margin-bottom:60px}
.contact-band h2,.contact-page h1{font-weight:500;letter-spacing:-.045em}
.contact-band>a.glass-contact{justify-content:center;padding-left:52px;padding-right:52px;gap:0}
.glass-contact span{position:absolute;right:23px;font-size:23px}
.glass-contact::after{content:'';position:absolute;z-index:-1;inset:-35%;pointer-events:none;background:radial-gradient(ellipse at 28% 40%,#dab0ff95,transparent 40%),radial-gradient(ellipse at 75% 65%,#77bdff95,transparent 40%);filter:blur(14px);animation:glass-glow 8s ease-in-out infinite alternate;will-change:transform}
@keyframes glass-glow{from{transform:translate(-12%,8%) rotate(-12deg)}to{transform:translate(12%,-8%) rotate(12deg)}}
.client-strip,.logo-row,.logo-row:last-child,.contact-band{border:0}
.logo-cell{--logo-glow-duration:9s;animation:logo-fairy-glow var(--logo-glow-duration) ease-in-out infinite;animation-delay:-2s}
.logo-cell:nth-child(3n+1){--logo-glow-duration:11s;animation-delay:-7s}
.logo-cell:nth-child(3n+2){--logo-glow-duration:13s;animation-delay:-4s}
.logo-row.reverse .logo-cell{animation-delay:-6s}
.logo-row.reverse .logo-cell:nth-child(2n){animation-delay:-10s}
@keyframes logo-fairy-glow{0%,25%,100%{opacity:.72;filter:drop-shadow(0 0 0 transparent)}55%,65%{opacity:1;filter:drop-shadow(0 0 5px #e3d5ff55) drop-shadow(0 0 10px #bedfff22)}}
@media(min-width:768px){.logo-cell{animation-name:logo-fairy-glow-desktop}}
@keyframes logo-fairy-glow-desktop{0%,25%,100%{opacity:.72;filter:drop-shadow(0 0 0 transparent)}55%,65%{opacity:1;filter:drop-shadow(0 0 7px #e3d5ff88) drop-shadow(0 0 16px #bedfff44)}}
@media(prefers-reduced-motion:reduce){.logo-cell{animation-duration:calc(var(--logo-glow-duration) * 2)}}
@media(max-width:767px){.studio-intro{--intro-feather:130px;padding:48px 5% calc(var(--intro-feather) + 32px)}.studio-intro h2{font-size:clamp(30px,7.5vw,42px);margin-bottom:16px}.studio-intro p{font-size:18px;max-width:34ch}.studio-about h1{font-size:clamp(42px,11vw,64px)}.contact-band>a.glass-contact{padding-left:48px;padding-right:48px}.glass-contact span{right:20px}}
@media(prefers-reduced-motion:reduce){.glass-contact::after{animation:none}}

/* Crop only Beardyman's existing still, including its monochrome alternate. */
.project-card[data-project="beardyman"] .card-media>img,
.project-card[data-project="beardyman"] .brand-overlay-art>img{transform:scale(1.4)!important;transform-origin:center}
.project-card[data-project="beardyman"] .thumbnail-video,
.project-card[data-project="beardyman"] .video-glow{transform:scale(1.3)!important;transform-origin:center}

/* Quiet typographic motion; keep each layout stable throughout its cycle. */
#clients-title{background-image:linear-gradient(110deg,#e7e1ed 35%,#fff 48%,#eadcff 52%,#e7e1ed 65%);background-size:300% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;color:transparent;animation:brand-title-wipe 5s ease-in-out infinite}
@keyframes brand-title-wipe{0%,25%{background-position:100% 0}75%,100%{background-position:0% 0}}
.closing-phrase{white-space:nowrap}
.typing-dots{display:inline-flex;vertical-align:baseline;white-space:nowrap}
.typing-dots>span{display:inline-block}
.typing-dots>span:nth-child(2){animation:typing-dot-two 2.4s step-end infinite}
.typing-dots>span:nth-child(3){animation:typing-dot-three 2.4s step-end infinite}
@keyframes typing-dot-two{0%,100%{opacity:0}33.333%{opacity:1}}
@keyframes typing-dot-three{0%,100%{opacity:0}66.666%{opacity:1}}
.contact-band>a.glass-contact{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1;width:208px;min-width:208px;height:59.2px;min-height:59.2px;padding:0 30px}
.glass-contact span{font-size:18px;right:12px}
@media(max-width:767px){.contact-band>a.glass-contact{width:184px;min-width:184px;height:51.2px;min-height:51.2px;padding:0 28px}.glass-contact span{right:10px}}
@media(prefers-reduced-motion:reduce){#clients-title{animation:none;background:none;color:inherit}.typing-dots>span:nth-child(n+2){animation-duration:4.8s}}

/* Finish the reel in solid black, matching the intro; never reveal the ambient
   background at this seam. Only the intro's background fades back to the page. */
.hero-reel{-webkit-mask-image:none;mask-image:none}
.hero-reel:after{inset:65% 0 0;z-index:1;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 20%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.9) 78%,#000 100%)}
@media(max-width:767px){
 /* Temporary portrait reel trial: fill the first mobile screen below the header. */
 .hero-reel{height:calc(70svh - 70px);aspect-ratio:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 100%)}
 .hero-video{object-fit:cover;object-position:center}
 .hero-reel .scroll-prompt{display:none}
 /* Keep the automatic-loading observation target in layout without an arrow. */
 .load-more{height:1px;min-height:1px;margin:12px auto 0;visibility:hidden}
 .load-more svg{display:none}
 .client-heading{margin-bottom:100px}
 .client-strip{padding-bottom:100px}
 .home .contact-band{padding-top:0}
 .logo-cell{width:90px;height:50px;padding:10.625px 7px}
 .logo-cell img{max-width:96px;width:100%;height:23px;max-height:23px}
 .logo-cell .brand-name,.logo-cell .brand-name.serif{font-size:11.75px;max-width:76px}
 .logo-row+.logo-row{margin-top:20px}
}
@media(max-width:767px) and (pointer:coarse){
 /* Avoid filtered SVG masks and duplicate canvas glow passes while scrolling. */
 .project-card,.project-card:is(:hover,:focus-visible,.mobile-preview){filter:none;transition:none}
 .card-media{border-radius:14px;-webkit-mask-image:none;mask-image:none}
 .edge-glow{display:none}
 .project-card .card-media>img,.project-card .card-media .thumbnail-video{transform:none;filter:none;transition:opacity 350ms ease-out}
 .project-card .card-media>.poster-backdrop{filter:blur(12px) brightness(.3)}
 .project-card .card-line span b,.project-card .card-line span:after{transition:none}
 /* Keep the real label in place even when the more-specific hover/preview rules apply. */
 .project-card .card-line span b{transform:none!important}
 .project-card .card-line span:after{display:none}
 .project-card .card-line.title span,.project-card .card-line i{transform:none!important}
 .ambient-glow i{width:110vw;height:110svh;filter:blur(45px)}
 .ambient-glow:before,.ambient-glow:after{width:100vw;height:100svh;filter:blur(30px)}
}

/* Clean background: directly shaded colour fields avoid blurring and then
   attenuating already faint alpha gradients. No grain or noise texture. */
.ambient-glow{opacity:1;background:var(--night);isolation:isolate;transform:none}
.ambient-glow i{filter:none;border-radius:0;mix-blend-mode:screen}
.ambient-glow i:nth-child(1){background:radial-gradient(ellipse closest-side,#19051e 0%,#12061e 24%,#0b0415 42%,#05020a 60%,#000 96%)}
.ambient-glow i:nth-child(2){background:radial-gradient(ellipse closest-side,#041224 0%,#060e1c 24%,#050a15 42%,#02050a 60%,#000 96%)}
.ambient-glow i:nth-child(3){background:radial-gradient(ellipse closest-side,#07171e 0%,#0b101c 24%,#090b16 42%,#04060a 60%,#000 96%)}
.ambient-glow:before,.ambient-glow:after{filter:none;background:radial-gradient(ellipse closest-side,#000 0%,#000e 18%,#000a 34%,#0005 48%,#0001 70%,#0000 96%)}
@media(min-width:768px){
 .home .client-heading{margin-bottom:clamp(100px,9vw,144px)}
 .home .client-strip{padding-bottom:clamp(100px,9vw,144px)}
 .home .contact-band{padding-top:0}
}
/* Keep the requested desktop ambience alive when the OS reduces animation.
   Use a slower drift instead of freezing the entire background. */
@media(min-width:768px) and (prefers-reduced-motion:reduce){
 .ambient-glow i{animation:ambient-float 12s ease-in-out infinite alternate}
 .ambient-glow i:nth-child(1){animation-duration:12s;animation-delay:-3.5s}
 .ambient-glow i:nth-child(2){animation-duration:14.4s;animation-delay:-9.434s}
 .ambient-glow i:nth-child(3){animation-duration:16.8s;animation-delay:-12.848s}
 .ambient-glow:before{animation:ambient-shadow 13.6s ease-in-out -4.534s infinite alternate}
 .ambient-glow:after{animation:ambient-shadow 17.6s ease-in-out -12.068s infinite alternate-reverse}
}

/* Dedicated project pages: concise editorial overview, full-film playback and verified credits. */
.project-detail{padding-top:clamp(72px,8vw,120px)}
.project-heading{max-width:1250px;margin-bottom:clamp(58px,8vw,120px)}
.project-heading h1{margin-bottom:24px}
.project-brand-mark{display:flex;align-items:center;min-height:52px;margin:0 0 clamp(42px,5vw,72px)}
.project-brand-logo{display:block;width:auto;height:auto;max-width:clamp(120px,12vw,190px);max-height:52px;object-fit:contain;object-position:left center;filter:grayscale(1) brightness(0) invert(1);opacity:.92}
/* Preserve the lettering/ribbon contrast instead of flattening this multitone mark. */
.project-brand-logo[src$="jamshed.png"]{filter:grayscale(1) contrast(1.25) brightness(1.2)}
.project-brand-logo.project-title-logo[src$="shogun-logo.jpg"]{filter:grayscale(1) invert(1) brightness(1.3);mix-blend-mode:screen}
.project-brand-wordmark{font-size:clamp(22px,2.4vw,36px);font-weight:700;letter-spacing:-.04em}
.project-film{margin-bottom:clamp(78px,10vw,150px)}
.project-player{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:clamp(10px,1.2vw,20px);background:#000;box-shadow:0 30px 90px #0007}
.project-video,.project-embed{display:block;width:100%;height:100%;border:0;background:#000}
.project-video{object-fit:contain}
.project-overview{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.7fr);gap:clamp(60px,11vw,190px);align-items:start;margin-bottom:clamp(85px,11vw,160px)}
.project-story{max-width:900px}.project-story>.eyebrow{margin-bottom:20px}.project-story h2{max-width:820px;margin:0 0 30px;font-size:clamp(34px,4.2vw,68px);font-weight:500;line-height:1.02;letter-spacing:-.052em}
.project-description{max-width:780px;margin:0;color:#c8bfce;font-size:clamp(17px,1.35vw,22px);line-height:1.65}
.project-contribution{max-width:780px;margin-top:45px;padding-top:24px;border-top:1px solid #ffffff26}
.project-contribution h3{margin:0 0 10px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.project-contribution p{margin:0;color:#a99faf;font-size:15px;line-height:1.7}
.contribution-terms{display:flex;flex-wrap:wrap;gap:10px 0;list-style:none;margin:0;padding:0;color:#c8c0ce;font-size:15px;font-weight:500;line-height:1.7}
.contribution-terms li{display:inline-flex;align-items:center}
.contribution-terms li:not(:last-child)::after{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:currentColor;margin:0 14px;opacity:.85}
.cinema-scrim{position:fixed;inset:0;z-index:200;background:#000;opacity:0;pointer-events:none;transition:opacity 1.2s cubic-bezier(.22,.61,.36,1)}
.cinema-active .cinema-scrim{opacity:.92}
.project-player.cinema-player{z-index:201}
@media(prefers-reduced-motion:reduce){.cinema-scrim{transition-duration:.15s}}
.project-credits dl{margin:0}.project-credits dl>div{padding:16px 0;border-top:1px solid #ffffff24}.project-credits dl>div:last-child{border-bottom:1px solid #ffffff24}
.project-credits dt{margin-bottom:7px;color:#8f8498;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}.project-credits dd{margin:0;color:#eee8f1;font-size:14px;line-height:1.45}
.project-next{display:flex;flex-direction:column;gap:8px;border-top:1px solid #ffffff35;padding:28px 0 4px;margin-top:0;font-size:clamp(25px,3.1vw,52px);font-weight:400;letter-spacing:-.04em;line-height:1.08;transition:color .25s}
.project-next>span:first-child{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#8f8498}
.project-next-line{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px)}
.project-next-line b{font:inherit;font-weight:inherit}
.project-next-arrow{display:grid;place-items:center;flex:0 0 auto;width:clamp(30px,3vw,46px);height:clamp(30px,3vw,46px);transform:rotate(-90deg);opacity:.72}
.project-next-arrow svg{display:block;width:100%;height:100%;animation:scroll-nudge 2.8s ease-in-out infinite}
.project-next:hover{color:var(--peach)}.project-next:hover .project-next-arrow{opacity:1}
@media(max-width:767px){
 .project-detail{padding-top:45px}.project-heading{margin-bottom:58px}.project-brand-mark{min-height:42px;margin:0 0 42px}.project-brand-logo{max-width:145px;max-height:42px}
 .project-film{margin-left:-5.55%;margin-right:-5.55%;margin-bottom:75px}.project-player{border-radius:0}
 .project-overview{grid-template-columns:1fr;gap:48px;margin-bottom:85px}.project-story h2{font-size:clamp(34px,10vw,50px)}.project-description{font-size:17px;line-height:1.62}
 .project-contribution{margin-top:36px}.project-next{padding-top:22px}
}
@media(prefers-reduced-motion:reduce){.project-next-arrow svg{animation:none}}

/* Beejou font trial: option A, matching the Medium/Regular specimen. */
:root{font-optical-sizing:auto;font-synthesis:none}
.wordmark{font-size:48px;font-weight:500;letter-spacing:-.045em}
.about-page h1,.contact-page h1,.contact-band h2,.project-heading h1,.project-story h2{letter-spacing:-.035em}
.studio-intro h2{font-weight:500}
.studio-intro p{font-weight:400}

/* A soft left-to-right reflection, clipped inside each highlight.
   Use the spare pseudo-element so the existing hover text slide stays intact. */
.project-card{--caption-glow-duration:9s;--caption-glow-delay:-2s}
.project-card:nth-child(3n+1){--caption-glow-duration:11s;--caption-glow-delay:-7s}
.project-card:nth-child(3n+2){--caption-glow-duration:13s;--caption-glow-delay:-4s}
.card-line > span::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 0%,#e3d5ff04 10%,#e3d5ff16 20%,#f5efff38 30%,#ffffff5c 40%,#ffffff70 50%,#ffffff5c 60%,#edf7ff38 70%,#bedfff16 80%,#bedfff04 90%,transparent 100%);transform:translateX(-110%);opacity:0}
.caption-visible .card-line > span::before{animation:caption-reflection calc(var(--caption-glow-duration) / .7) ease-in-out infinite;animation-delay:var(--caption-glow-delay)}
.caption-visible .card-line.title > span::before{animation-delay:calc(var(--caption-glow-delay) - 3s)}
@keyframes caption-reflection{
 0%,20%{transform:translateX(-110%);opacity:0}
 28%{opacity:.8}
 62%{opacity:.8}
 70%,100%{transform:translateX(110%);opacity:0}
}
@media(max-width:767px){.wordmark{font-size:40px}}
@media(prefers-reduced-motion:reduce){.caption-visible .card-line > span::before{animation:none}}

/* About: generous editorial spacing and a clear heading hierarchy. */
.founder-portrait{margin:0;align-self:start}
.founder-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 35%;border-radius:0;
 /* The grid's blurred-edge mask, adapted to a portrait aspect ratio. */
 --portrait-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='1000' viewBox='0 0 800 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='soft' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='24' y='24' width='752' height='952' rx='28' fill='white' filter='url(%23soft)'/%3E%3C/svg%3E");
 -webkit-mask-image:var(--portrait-mask);mask-image:var(--portrait-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media(max-width:767px){
 /* Keep the feather on phones without a filtered SVG scrolling layer. */
 .founder-portrait img{--portrait-mask:linear-gradient(to right,transparent,#0002 5px,#0008 12px,#000e 20px,#000 28px,#000 calc(100% - 28px),#000e calc(100% - 20px),#0008 calc(100% - 12px),#0002 calc(100% - 5px),transparent),linear-gradient(to bottom,transparent,#0002 5px,#0008 12px,#000e 20px,#000 28px,#000 calc(100% - 28px),#000e calc(100% - 20px),#0008 calc(100% - 12px),#0002 calc(100% - 5px),transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
}
.founder-portrait figcaption{margin-top:16px;font-size:15px;line-height:1.5;color:#c5bdcd;font-weight:400}
.studio-about .about-services ul{margin-bottom:0;max-width:54ch}
.studio-about{padding-top:clamp(64px,7vw,112px);padding-bottom:clamp(100px,10vw,160px)}
.studio-about h1{margin-top:24px;margin-bottom:clamp(72px,7vw,112px)}
.studio-about .about-columns{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:clamp(64px,9vw,144px);row-gap:80px}
.studio-about .large-copy{margin:0 0 40px;max-width:24ch;font-size:clamp(28px,2.8vw,44px);line-height:1.2;font-weight:500}
.studio-about .about-columns p:not(.large-copy),.studio-about aside ul{font-size:17px;line-height:1.7}
.studio-about .about-columns p:not(.large-copy){margin:0 0 28px;max-width:54ch}
.studio-about .text-link{display:inline-block;margin-top:16px;font-size:18px}
.studio-about .about-columns h2{font-size:clamp(28px,2.6vw,40px);font-weight:500;line-height:1.12;letter-spacing:-.035em;margin:0 0 32px}
.studio-about aside ul{margin:0 0 80px}
.studio-about aside li+li{margin-top:36px}
.studio-about aside li strong{display:inline-block;font-size:22px;line-height:1.3;font-weight:600;margin-bottom:8px}
@media(max-width:767px){
 .studio-about .about-columns{grid-template-columns:1fr;row-gap:80px}
 .studio-about .large-copy{font-size:clamp(27px,7vw,36px);margin-bottom:32px}
 .studio-about .about-columns h2{font-size:32px;margin-bottom:28px}
 .studio-about aside ul{margin-bottom:72px}
 .studio-about aside li+li{margin-top:32px}
}