/* Liquid glass (switched by .m-glass on <html>): hero reel frame, film frames, "what we make" cards, contact cards,
   the menu bar and the sound buttons. Glass needs something moving behind it, so the film and "what we make" sections
   get slow-drifting light blobs in the brand colours. "How we work" and "how it works" stay flat on purpose. */

.blobs{display:none}
.m-glass .blobs{display:block;position:absolute;inset:0;overflow:hidden;z-index:0;border-radius:inherit;pointer-events:none}
.m-glass .blobs i{position:absolute;display:block;border-radius:50%;filter:blur(46px);opacity:.85;animation:gl-drift 22s ease-in-out infinite alternate}
.m-glass .blobs i:nth-child(1){width:46vw;max-width:640px;aspect-ratio:1;left:-8%;top:18%;background:radial-gradient(circle,#FF3131 0%,rgba(255,49,49,0) 68%)}
.m-glass .blobs i:nth-child(2){width:40vw;max-width:560px;aspect-ratio:1;right:-6%;top:6%;background:radial-gradient(circle,#FF914D 0%,rgba(255,145,77,0) 68%);animation-duration:26s;animation-delay:-6s}
.m-glass .blobs i:nth-child(3){width:38vw;max-width:520px;aspect-ratio:1;left:34%;bottom:-14%;background:radial-gradient(circle,#FEBB91 0%,rgba(254,187,145,0) 70%);animation-duration:19s;animation-delay:-11s}
@keyframes gl-drift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(9vw,-5vw) scale(1.12)}
  100%{transform:translate(-6vw,6vw) scale(.92)}}
.m-glass #make > .wrap{position:relative;z-index:1}

/* the glass */
.m-glass .cards article{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(140deg,rgba(255,255,255,.58),rgba(255,248,242,.22));
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),inset 1px 0 0 rgba(255,255,255,.5),
    0 22px 48px -26px rgba(130,40,15,.45);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.m-glass .cards article:first-child{
  background:linear-gradient(140deg,rgba(28,18,14,.86),rgba(28,18,14,.66));border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 22px 48px -26px rgba(60,15,5,.6)}
/* specular light: a soft sheen that follows the pointer, plus a fixed top-left glint */
.m-glass .cards article::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(260px circle at var(--lx,18%) var(--ly,0%),rgba(255,255,255,.75),rgba(255,255,255,0) 60%);
  opacity:.55;transition:opacity .3s}
.m-glass .cards article:first-child::before{background:radial-gradient(260px circle at var(--lx,18%) var(--ly,0%),rgba(255,145,77,.35),rgba(255,145,77,0) 60%)}
@media (hover:hover) and (pointer:fine){.m-glass .cards article:hover{transform:translateY(-4px)}}
.m-glass .cards article:hover::before{opacity:1}

/* browsers without backdrop blur: keep text readable with a more solid fill */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .m-glass .cards article{background:rgba(255,247,240,.9)}
}
@media (prefers-reduced-motion:reduce){.m-glass .blobs i{animation:none}}

/* ---------- portfolio films: dark smoked-glass frames over drifting light ---------- */
.m-glass #showcase > .wrap{position:relative;z-index:1}
.m-glass #showcase .blobs i{opacity:.6;filter:blur(60px)}
.m-glass #showcase .grid figure{
  position:relative;isolation:isolate;padding:10px 10px 16px;border-radius:calc(clamp(16px,2vw,26px) + 10px);
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.06),0 26px 54px -30px rgba(0,0,0,.75)}
.m-glass #showcase .grid figure::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(300px circle at var(--lx,20%) var(--ly,0%),rgba(255,145,77,.28),rgba(255,145,77,0) 60%);
  opacity:.6;transition:opacity .3s}
.m-glass #showcase .grid figure:hover::before{opacity:1}
.m-glass #showcase .grid figcaption{padding:14px 8px 0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .m-glass #showcase .grid figure{background:rgba(52,36,29,.92)}
}

/* ---------- hero reel: clear glass frame floating on the drifting glow ---------- */
.m-glass .glow .hero-frame{
  width:min(62%,330px);padding:12px;border-radius:34px;isolation:isolate;
  background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(255,255,255,.12));
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),0 34px 70px -30px rgba(90,15,0,.6)}
.m-glass .glow .hero-frame::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(320px circle at var(--lx,15%) var(--ly,0%),rgba(255,255,255,.7),rgba(255,255,255,0) 60%);opacity:.6;transition:opacity .3s}
.m-glass .glow .hero-frame:hover::before{opacity:1}
.m-glass .glow .hero-frame video{border-radius:22px}
.m-glass .glow .hero-frame .snd{right:24px;bottom:24px}
/* phones: the reel takes most of the width (it was ~196 px of 390); the glow grows to fit it, room below for the chip */
@media (max-width:860px){
  .m-glass .hero .glow:has(.hero-frame){aspect-ratio:auto;padding:32px 0 68px}
  .m-glass .glow .hero-frame{width:min(90%,380px);padding:10px;border-radius:30px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .m-glass .glow .hero-frame{background:rgba(255,240,230,.85)}
}

/* ---------- contact: the email and Instagram cards as glass on the gradient ---------- */
.m-glass .contact .line{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.16));
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),0 24px 50px -28px rgba(110,20,0,.55);
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.m-glass .contact .line::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(280px circle at var(--lx,15%) var(--ly,0%),rgba(255,255,255,.8),rgba(255,255,255,0) 60%);opacity:.5;transition:opacity .3s}
@media (hover:hover) and (pointer:fine){.m-glass .contact .line:hover{transform:translateY(-4px)}}
.m-glass .contact .line:hover::before{opacity:1}
.m-glass .contact .line .mono{color:#5A2A1E}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .m-glass .contact .line{background:rgba(255,244,236,.9)}
}

/* ---------- menu bar + phone dropdown: glass that picks up the colour of whatever scrolls beneath ---------- */
.m-glass .bar{
  background:linear-gradient(140deg,rgba(255,250,246,.8),rgba(255,244,236,.6));
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),0 14px 34px -20px rgba(60,20,8,.45)}
/* text in blurred layers is drawn lighter by some browsers (Chrome on Windows): one step heavier keeps the menu as it was */
.m-glass .menu{font-weight:600}
@media (max-width:820px){
  .m-glass .menu{background:linear-gradient(150deg,rgba(255,250,246,.95),rgba(255,244,236,.9));
    -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
    border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 24px 48px -24px rgba(60,20,8,.45)}
  .m-glass .menu-btn{background:rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
}

/* ---------- sound buttons: small glass pills ---------- */
.m-glass .snd{
  background:linear-gradient(145deg,rgba(40,26,20,.62),rgba(28,18,14,.38));
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 18px -10px rgba(0,0,0,.6)}
.m-glass .snd[aria-pressed="true"]{background:var(--hot);border-color:rgba(255,255,255,.6)}
.m-glass .fs{
  background:linear-gradient(145deg,rgba(40,26,20,.62),rgba(28,18,14,.38));
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 18px -10px rgba(0,0,0,.6)}
.m-glass .glow .hero-frame .fs{right:76px;bottom:24px}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .m-glass .bar{background:rgba(255,244,236,.94)}
  .m-glass .snd{background:rgba(28,18,14,.7)}
}