/* Muno shared chrome: nav, mobile menu, buttons, footer, page rows, FAQ.
   Every page links this file, so these parts look and behave the same everywhere.
   Hard rules (HANDOFF): no grey text, no bubbles (3px buttons, 4px boxes), running text spans the full content width.
   Colour scheme (7 Oct evening, Uthman's call after seeing the white trial): black and gold, as the
   original site. Black pages, white text, gold for section titles, buttons, links and hover bars. */

:root{--bg:#000;--ink:#fff;--gold:#C9A03C;--gold-deep:#F0D48A;--tint:rgba(255,255,255,.06);--line:rgba(255,255,255,.22);
  --pad:clamp(22px,6vw,72px);--ease:cubic-bezier(.2,.7,.3,1);
  /* the content column's left edge (used by the home hero); the bar and footer sit in the corners instead (Uthman, 9 Oct 22:3x) */
  --gutter:calc(max(0px,(100% - 1240px) / 2) + var(--pad));--corner:clamp(16px,2.2vw,28px)}

/* ── keyboard: "Skip to content" sits off screen until it is tabbed to, then drops into the top left corner as a gold button
   and jumps past the bar to <main id="content">. Focus rings are gold on black; on the gold button they are white. ── */
.skip{position:fixed;top:var(--corner);left:var(--corner);z-index:200;background:var(--gold);color:#000;font-weight:700;font-size:17px;
  padding:12px 20px;border-radius:3px;transform:translateY(calc(-100% - 60px));opacity:0;transition:transform .2s var(--ease),opacity .2s}
.skip:focus-visible{transform:none;opacity:1;outline:2px solid #fff;outline-offset:3px}
main:focus{outline:none}
.pill:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tap:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.qa summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:3px}
.go:focus-visible,.social a:focus-visible,.bar-links a:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}

/* ── nav ── */
.bar{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px var(--corner);background:var(--bg);border-bottom:1px solid var(--line)}
.js .bar{background:transparent;border-bottom-color:transparent;transition:background .35s,border-color .35s}  /* clear at the top of a page (the home B-roll runs under it), solid once you scroll: site.js adds .on */
.js .bar.on{background:var(--bg);border-bottom-color:var(--line)}
.bar{view-transition-name:bar}
.logo{display:block;line-height:0}
.logo img{display:block;height:34px;width:auto}  /* stacked mark on phones so Book a call fits beside it; one line from 600px */
.bar-links{display:none;gap:4px;margin-left:auto;margin-right:10px}
.bar-links a{position:relative;font-size:17px;font-weight:700;padding:8px 14px;color:var(--ink)}  /* the page links: the same size as Book a call beside them (Uthman, 9 Oct) */
.bar-links a::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.bar-links a[aria-current="page"]::after{transform:scaleX(1)}
.bar .pill{font-size:19px;font-weight:800;padding:11px 22px}  /* Book a call: gold button in the top right corner, bolder and 2px bigger than the links beside it (Uthman, 9 Oct) */

/* ── buttons ── */
.pill{display:inline-flex;align-items:center;background:var(--gold);color:#000;font-weight:600;font-size:16px;
  padding:14px 28px;border-radius:3px;white-space:nowrap;
  transition:background .15s,transform .25s var(--ease),box-shadow .25s}
.pill:active{transform:scale(.97);box-shadow:none;transition:background .15s,transform .14s var(--ease),box-shadow .14s}
.ghost{display:inline-flex;align-items:center;border:1px solid var(--ink);color:var(--ink);font-weight:500;
  font-size:16px;padding:13px 26px;border-radius:3px;transition:background .15s,color .15s,transform .25s var(--ease),box-shadow .25s}
.ghost:active{transform:scale(.97);box-shadow:none}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.arr{display:inline-block;transition:transform .3s var(--ease)}
.pill .arr,.ghost .arr{margin-left:9px}
.go{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:500;color:var(--gold);
  border-bottom:2px solid var(--gold);padding-bottom:3px;transition:gap .3s var(--ease)}


/* ── mobile menu ── */
.tap{position:relative;width:42px;height:42px;border-radius:3px;flex:0 0 auto}
.tap i{position:absolute;left:50%;top:50%;width:18px;height:1.5px;margin:-.75px 0 0 -9px;background:var(--ink);transition:transform .3s}
.tap i:first-child{transform:translateY(-3.5px)}
.tap i:last-child{transform:translateY(3.5px)}
.tap.x i:first-child{transform:rotate(45deg)}
.tap.x i:last-child{transform:rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:110;background:var(--bg);display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);gap:2px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.sheet.open{opacity:1;visibility:visible}
.sheet a{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,10vw,56px);line-height:1.15;color:var(--ink)}
.sheet a[aria-current="page"]{text-decoration:underline;text-underline-offset:8px}
.sheet .mail{font-family:var(--body);font-weight:500;font-size:17px;text-transform:none;margin-top:14px}
.sheet .mail:first-of-type{margin-top:32px}

/* ── section rules: the line above each section draws in from the left as it scrolls into view (site.js adds .in) ── */
.sec,.cta-block,.cta{position:relative}
.js .sec,.js .cta-block,.js .cta{border-top-color:transparent}
.js .sec::before,.js .cta-block::before,.js .cta::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.js .sec.in::before,.js .cta-block.in::before,.js .cta.in::before{transform:scaleX(1)}

/* ── shared section pieces ──
   Rows are the sections people hover over. On a mouse they lift, tint, grow a blue bar along the bottom,
   and the heading gets bolder and a touch bigger (the treatment carried over from the Hirondl site). */
.rows{border-top:1px solid var(--line)}
.row{position:relative;display:block;padding:clamp(20px,3.2vh,30px) 0;border-bottom:1px solid var(--line);
  transition:transform .25s var(--ease)}
.row::before{content:'';position:absolute;inset:0 -12px;z-index:0;background:var(--tint);border-radius:4px;opacity:0;transition:opacity .25s;pointer-events:none}
.row>*{position:relative;z-index:1}
.row::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.row h2,.row h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(22px,5.4vw,40px);color:var(--gold);transform-origin:left center;
  transition:font-weight .25s,transform .25s var(--ease)}
/* item titles inside a section (We film properly, Food and drink...) are black and bold; section titles stay blue (Uthman, 7 Oct) */
.row h3{color:var(--ink);font-weight:800}
.row .big{font-family:var(--body);font-weight:600;font-size:clamp(20px,4.6vw,28px);line-height:1.25;margin-top:12px}  /* result lines in the body face: the display face's bold lowercase read as slanted (Uthman, 7 Oct) */
.row p{font-size:17px;line-height:1.65;margin-top:10px}
.row .go{margin-top:16px}
.row .arrow{float:right;font-family:var(--body);font-weight:400;transition:transform .25s var(--ease)}
.source-note{font-size:15px;line-height:1.65;margin-top:22px}

/* ── client logos: white cut-outs used as masks and filled white, so a cream file (HLR Tyres) matches the rest.
   Swap for plain <img> once Muno send colour originals. ── */
.lg{display:block;height:100%;max-width:100%;background:var(--ink);
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}

/* ── the logo wall: four marquee rows at the foot of every page (moved from the top of the home page, 10 Oct) ── */
.logos{padding-inline:0;overflow:hidden}
.strip{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip + .strip{margin-top:clamp(10px,1.8vh,16px)}
.slide{display:flex;gap:clamp(26px,6vw,56px);width:max-content;align-items:center;animation:march 46s linear infinite}
.strip:nth-child(2) .slide{animation-duration:58s;animation-direction:reverse}
.strip:nth-child(3) .slide{animation-duration:52s}
.strip:nth-child(4) .slide{animation-duration:64s;animation-direction:reverse}
.strip:hover .slide{animation-play-state:paused}  /* hold a logo under the mouse */
@keyframes march{to{transform:translateX(-50%)}}
.nm{display:flex;align-items:center;justify-content:center;flex:0 0 auto;height:clamp(40px,11vw,64px);color:var(--ink);
  font-family:var(--display);font-weight:700;text-transform:uppercase;white-space:nowrap;font-size:clamp(17px,5vw,30px)}
.nm .lg{width:auto;max-width:clamp(120px,34vw,200px)}

/* ── questions: each question opens on a click, the way Google's "People also ask" does (Uthman, 10 Oct) ── */
.row.qa{padding:0}
.qa summary{list-style:none;cursor:pointer;padding:clamp(20px,3.2vh,30px) 0;display:block}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{position:relative;padding-right:44px}
.qa .plus{position:absolute;right:0;top:50%;width:18px;height:18px;margin-top:-9px;transition:transform .3s var(--ease)}
.qa .plus::before,.qa .plus::after{content:'';position:absolute;background:var(--gold);left:0;top:8px;width:18px;height:2px}
.qa .plus::after{transform:rotate(90deg)}
.qa[open] .plus{transform:rotate(45deg)}
.qa>p{margin-top:-6px;padding-bottom:clamp(20px,3.2vh,30px);animation:qa-in .35s var(--ease)}
@keyframes qa-in{from{opacity:0;translate:-16px 0}}

/* ── story cards: a still from Muno's B-roll behind each client; on a mouse the clip plays on hover ── */
.cards{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,22px);margin-top:clamp(22px,3.4vh,32px)}
.card{position:relative;display:block;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#0B0B0B;color:var(--ink);
  transition:transform .25s var(--ease),border-color .25s}
.card-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#000;cursor:pointer}
.card-media img,.card-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-media video{opacity:0;transition:opacity .4s}
.card-media video.on{opacity:1}
.js .card.in .card-media img{animation:drift 18s ease-in-out infinite alternate}  /* the still drifts slowly, so the cards move on phones too */
@keyframes drift{to{transform:scale(1.08)}}
.card-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.88))}
.card-head{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(16px,2.4vw,24px);transition:transform .35s var(--ease)}
.card .card-head h2,.card .card-head h3{font-size:clamp(22px,4.6vw,30px);color:var(--ink);font-weight:800}  /* an h2 on the stories page (under its h1), an h3 under a section h2 elsewhere; outranks .sec h2 in page.css */
.card-head p{font-size:17px;margin-top:6px}
.num{display:inline-block;font-variant-numeric:tabular-nums;text-align:left}
a.card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── stat tiles (Book page and the story pages): a bold gold figure with its unit small, a pure white line beneath with a bold
   phrase, thin rules between three tiles; the figures count up on arrival (site.js) ── */
.stats{display:grid;grid-template-columns:1fr;margin-top:clamp(22px,3.4vh,32px);border-top:1px solid var(--line)}
.stat{padding:clamp(18px,2.6vw,26px) 0;border-bottom:1px solid var(--line)}
.stat-n{font-family:var(--display);font-weight:800;font-size:clamp(40px,3.9vw,56px);line-height:1;color:var(--gold);letter-spacing:-.02em;white-space:nowrap}
.stat-n .unit{font-size:.42em;font-weight:700;margin-left:.12em}
.stat p+p{margin-top:12px;font-size:18px;font-weight:500;line-height:1.55;color:#fff}
.stat b{font-weight:700}
@media(min-width:640px){.stats{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
  .stat{border-bottom:0;padding-inline:clamp(12px,1.4vw,18px)}.stat:first-child{padding-left:0}.stat:last-child{padding-right:0}.stat+.stat{border-left:1px solid var(--line)}}

/* ── story pages (11 Oct): the still under the title, Approach for everyone, then the form, then Challenges and Results ── */
.story-top{padding-bottom:0}
.story-still{border-top:0;padding-top:clamp(22px,3.4vh,32px)}
.still{position:relative;aspect-ratio:21/9;overflow:hidden;border-radius:4px;border:1px solid var(--line);background:#000}
.still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.still::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.85))}
.still p{position:absolute;left:clamp(16px,2.4vw,24px);bottom:clamp(14px,2vw,22px);z-index:1;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(22px,4.6vw,34px);color:var(--ink)}
.still p a:hover .arr{transform:translateX(4px)}
/* industry pages (12 Oct): a client card with a story page links to it, and the whole card is the target */
.cl-link::before{content:'';position:absolute;inset:0;z-index:1;border-radius:4px}
.cl:hover .cl-link{color:var(--gold)}
.cl:hover .cl-link .arr{transform:translateX(4px)}
.cl-link:focus-visible{outline:none}
.cl:has(.cl-link:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.cl-line{font-size:17px;line-height:1.45;margin-top:8px;color:var(--ink)}
.story-rest[data-locked] .rest{display:none}
.story-rest:not([data-locked]) .gate-sec{display:none}
.story-rest:not([data-locked]) .rest>.sec{animation:qa-in .4s var(--ease)}
/* the bars: one series, gold, no thicker than 24px, rounded at the data end and square at the baseline, the value in white at the tip;
   the width is data-w on each bar, applied by site.js (a style attribute would be blocked by the CSP) */
.rbars{margin-top:clamp(26px,4vh,40px)}
.rbars h3{font-family:var(--body);font-weight:700;text-transform:none;letter-spacing:0;font-size:clamp(19px,4.6vw,23px);color:var(--ink)}
.rbar-row{margin-top:18px}
.rbar-row>p{font-size:17px;font-weight:500}
.rbar-track{display:flex;align-items:center;gap:14px;margin-top:8px}
.rbar{height:22px;width:4px;min-width:4px;background:var(--gold);border-radius:0 4px 4px 0;flex:0 1 auto;transform-origin:left;animation:bar-in .9s var(--ease) both}
@keyframes bar-in{from{transform:scaleX(0)}}
.rbar-v{font-size:17px;font-weight:700;white-space:nowrap}
/* the form on a story page: first and last name side by side from 640px, then the email, then the challenge */
.lead-form{margin-top:clamp(18px,3vh,26px);max-width:none}
.lead-form label{display:block;font-size:17px;margin-top:16px}
.lead-form input,.lead-form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;font:17px var(--body);color:var(--ink);background:#0B0B0B;border:1px solid var(--line);border-radius:3px}
.lead-form textarea{min-height:130px;resize:vertical;line-height:1.5}
.lead-form input:focus,.lead-form textarea:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-form .two{display:grid;grid-template-columns:1fr;gap:0 18px}
@media(min-width:640px){.lead-form .two{grid-template-columns:1fr 1fr}}
.gate-err{color:var(--gold-deep);margin-top:14px;font-size:17px}
.lead-form .ctas{margin-top:22px}
.lead-form button{font:inherit}

/* ── cookie banner (site.js shows it only once GA4 is switched on and no choice has been made) ── */
#cookie-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:200;max-width:520px;margin-inline:auto;background:var(--bg);color:var(--ink);
  border:1px solid var(--gold);border-radius:4px;padding:16px 18px;font:15px/1.5 var(--body)}
#cookie-banner p{margin:0 0 12px}
#cookie-banner a{color:var(--gold);text-decoration:underline}
#cookie-banner .cb-row{display:flex;gap:10px;flex-wrap:wrap}
#cookie-banner button{flex:1 1 auto;min-height:44px;border-radius:3px;padding:10px 18px;font:500 15px var(--body);cursor:pointer}
#cookie-banner .cb-yes{background:var(--gold);color:#000;border:1px solid var(--gold)}
#cookie-banner .cb-no{background:var(--bg);color:var(--ink);border:1px solid var(--ink)}

/* ── footer: the company line in the bottom left corner, Instagram and TikTok as plain links in the bottom right (no boxes, Uthman 9 Oct) ── */
.site-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;
  border-top:1px solid var(--line);color:var(--ink);padding:28px var(--corner);font-size:15px;line-height:1.7}
.legal{font-size:15px}
.social{display:flex;flex-wrap:wrap;gap:12px 26px;margin-left:auto}
.social a{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:600;transition:color .2s}
.social svg{display:block}

/* ── FAQ: the question in bold with its answer straight underneath, no dropdowns ── */
.faq-list{border-top:1px solid var(--line)}
.faq-list .row h3{font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0;line-height:1.35;
  font-size:clamp(19px,4.6vw,23px);color:var(--ink)}
.faq-list .row p{margin-top:8px}

@media(hover:hover) and (pointer:fine){
  .bar-links a:hover::after{transform:scaleX(1)}
  .social a:hover{color:var(--gold)}
  .pill:hover{background:var(--gold-deep);transform:translateY(-2px);box-shadow:0 6px 18px rgba(201,160,60,.3)}
  .ghost:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px)}
  .go:hover{gap:14px}
  .card:hover{transform:translateY(-3px);border-color:var(--gold)}
  .card:hover .card-media video{opacity:1}
  .card:hover .card-head{transform:translateY(-4px)}
  .pill:hover .arr,.ghost:hover .arr{transform:translateX(4px)}
  .row:hover{transform:translateY(-2px)}
  .row:hover::before{opacity:1}
  .row:hover::after{transform:scaleX(1)}
  .row:hover h2{font-weight:800}
  .row:hover h2,.row:hover h3{transform:scale(1.04)}
  .row:hover .arrow{transform:translateX(6px)}
  .faq-list .row:hover h3{transform:none}
}
a.row:active{transform:scale(.99)}

/* ── Reveal: marked elements swipe in from the left as they scroll into view (site.js adds .in).
   The html.js class is set by a one-line script in <head>, so without JavaScript nothing is hidden. ── */
.js .sw{opacity:0;translate:-56px 0;transition:opacity .75s var(--ease),translate .75s var(--ease),transform .25s var(--ease),background .25s,box-shadow .25s}
.js .sw.in{opacity:1;translate:0}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}

@media(min-width:900px){
  .bar-links{display:flex}
  .tap{display:none}
}
@media(prefers-reduced-motion:reduce){
  .tap i,.sheet,.go,.pill,.ghost,.row,.row::before,.row::after,.row h2,.row h3,.row .arrow,.bar-links a::after,.skip{transition:none}
  .js .sw{opacity:1;translate:0;transition:none}
  .js .bar,.arr,.card-head,.qa .plus,.social a{transition:none}
  .slide{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .qa>p{animation:none}
  .js .card.in .card-media img,.rbar,.story-rest:not([data-locked]) .rest>.sec{animation:none}
  .js .sec,.js .cta-block,.js .cta{border-top-color:var(--line)}
  .js .sec::before,.js .cta-block::before,.js .cta::before{display:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ── success stories as a rail of the home page's cards (12 Oct): three to a view, the industries above narrow it ── */
.rail-inds{display:flex;flex-wrap:wrap;gap:4px 28px;margin-bottom:clamp(16px,2.4vh,24px)}
.ri{position:relative;background:none;border:0;padding:8px 0;color:var(--ink);font:inherit;font-weight:700;font-size:clamp(17px,1.5vw,20px);cursor:pointer;transition:color .25s var(--ease)}
.ri::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.ri:hover,.ri[aria-pressed="true"]{color:var(--gold)}
.ri:hover::after,.ri[aria-pressed="true"]::after{transform:scaleX(1)}
.ri:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.js .rail-track{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:100%;margin-top:0;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.js .rail-track::-webkit-scrollbar{display:none}
.rail-track>.card{scroll-snap-align:start}
.rail-track>.card[hidden]{display:none}
.rail-nav{display:none}
.js .rail-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:clamp(14px,2vh,20px)}
.rail-btn{width:52px;height:52px;border:1px solid var(--line);border-radius:3px;background:#000;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease)}
.rail-btn:hover,.rail-btn:focus-visible{border-color:var(--gold);color:var(--gold)}
.rail-btn[aria-disabled="true"]{border-color:var(--line);color:var(--ink);cursor:default;visibility:hidden}
@media(min-width:620px){.js .rail-track{grid-auto-columns:calc((100% - clamp(14px,2vw,22px)) / 2)}}
@media(min-width:960px){.js .rail-track{grid-auto-columns:calc((100% - 2 * clamp(14px,2vw,22px)) / 3)}}
/* ── a client's own portrait clip (12 Oct): fills the box on phones; on wider screens it stands whole on the right,
      over a blurred, darkened copy of itself, so nothing in the frame is cut off ── */
.vf{position:absolute;inset:0;overflow:hidden;background:#000}
@media(max-width:759px){.still:has(.vf){aspect-ratio:4/5}}   /* a story's own portrait clip needs a portrait box on phones */
.vf-bg{display:none}
.vf-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
@media(min-width:760px){
  .vf-bg{display:block;position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(28px) brightness(.45)}
  .vf-vid{inset:auto;top:6%;bottom:6%;right:clamp(18px,4vw,64px);left:auto;width:auto;height:88%;aspect-ratio:9/16;border-radius:4px;border:1px solid var(--line);object-position:50% 50%}
}