/* Virtuoso Music design polish, 19 Oct 2026 (approved review items).
   Loaded last on every page so it is the single source of truth for tokens,
   type roles and motion timing. Item ids refer to the review board. */

/* ---------- A2 / M9: one token layer ---------- */
html:root{
  /* motion (M9): one set of timings, ease-out only (no ease-in on UI) */
  --d-fast:150ms; --d-base:220ms; --d-slow:400ms;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in:cubic-bezier(.23,1,.32,1);
  /* type scale (T1): display, heading, subhead, lead, body, small, label */
  --fs-h1:clamp(2.75rem,1.6rem + 4.6vw,5.5rem);
  --fs-h2:clamp(2rem,1.4rem + 2.2vw,3rem);
  --fs-h3:1.5rem;
  --fs-h4:1.25rem;
  --fs-lead:clamp(1.125rem,1rem + .5vw,1.25rem);
  --fs-body:1.0625rem;
  --fs-body2:1.0625rem;
  --fs-small:.9375rem;
  --fs-label:.8125rem;
  /* leading and tracking by size (T2) */
  --lh-body:1.55; --lh-lead:1.5; --lh-h2:1.12; --lh-h3:1.25; --lh-small:1.5;
  --h1-track:-.035em; --h-track:-.025em;
}

/* ---------- T1 / T2 / T3: type roles ---------- */
.h1{line-height:1.04;letter-spacing:-.035em}
.h2,.paths_t,.qa-q{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.025em}
.rows .row .row_t{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.025em}
.h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em;font-weight:600}
.lead{line-height:1.5}
.nrows_n{font-weight:400}
.mpt_k,.pr_pub,.sp_k,.sp_e,.sp_rec span,.xp_h,b,strong{font-weight:600}

/* ---------- T4: aligned figures ---------- */
time,.pr_d,.prl time,.xp_k,.enq_steps,.steps,ol{font-variant-numeric:tabular-nums}

/* ---------- T5: one reading width ---------- */
.lead,.band p,.row p,.card p,.wrow_b p,.faq details p{max-width:60ch}

/* ---------- B2: one press and hover behaviour ---------- */
.btn:active,.btn-ck:active,.menu-btn:active{transform:scale(.97)!important;transition:transform 120ms var(--ease-out)!important}
@media (hover:hover) and (pointer:fine){
  html .btn:not(.btn-ghost):hover{background:var(--accent-h);color:var(--on-accent);opacity:1}
  html .band .btn:not(.btn-ghost):hover{background:var(--accent-h);color:#fff;opacity:1}
  html .btn-ghost:not(.rows .row .btn-ghost):hover,
  html .hdr .nav .btn-ghost:hover{background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
}

/* ---------- B3: smaller header button on desktop ---------- */
@media (min-width:1061px){
  html .hdr .nav_ctas .btn{min-height:36px;padding-inline:16px;font-size:var(--fs-label);position:relative}
  html .hdr .nav_ctas .btn::before{content:"";position:absolute;inset:-4px 0}
}

/* ---------- B4: press logos in one ink, one hover ---------- */
html .wm{color:var(--ink)!important;opacity:.72;transition:opacity var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out)}
@media (hover:hover) and (pointer:fine){html .wm:hover{opacity:1;color:var(--accent)!important}}
html .wm:focus-visible{opacity:1;color:var(--accent)!important}

/* ---------- M2: no scroll progress bar ---------- */
.prog{display:none!important}

/* ---------- M3: page changes are a 150ms crossfade ---------- */
@keyframes vmp-in{from{opacity:0}}
@keyframes vmp-out{to{opacity:0}}
html::view-transition-group(*){animation-duration:150ms!important}
html::view-transition-old(*){animation:vmp-out 150ms ease both!important}
html::view-transition-new(*){animation:vmp-in 150ms ease both!important}
html.vm-enter main{transform:none!important}
html.vm-entering main{transition:opacity 150ms ease!important}

/* ---------- M4: retire looping marquees; cover wall becomes a still row ---------- */
.mq-2,.mq-3,.footer-gap{display:none!important}
.wall_row+.wall_row{display:none}
.wall_track{transform:none!important;width:auto;justify-content:center}
.wall_track .cv:nth-child(n+6){display:none}
@media (max-width:600px){.wall_track .cv:nth-child(n+4){display:none}}

/* ---------- M7: calmer hover on service rows and press cards ---------- */
.rows .row{transition:background-color var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)!important}
@media (hover:hover) and (pointer:fine){
  .rows .row:hover{transform:none!important;box-shadow:none!important;background:transparent!important;outline:0!important}
  .rows .row:hover .ico{transform:none!important;box-shadow:none!important}
  .presslist li:hover{transform:none!important}
}

/* ---------- M8: menus open from their trigger, fast, ease-out ---------- */
@media (max-width:1060px){
  html .hdr .dd_menu{transition:max-height 220ms var(--ease-out),opacity 150ms var(--ease-out),visibility 0s linear 220ms!important}
  html .hdr .dd_menu.is-open{transition:max-height 220ms var(--ease-out),opacity 220ms var(--ease-out),visibility 0s!important}
}

/* ---------- L2: Catalogue Acquisitions process as one timeline ---------- */
h2+.steps--plain{list-style:none;padding:0;margin:var(--s4) 0 var(--s5);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);counter-reset:vmstep}
h2+.steps--plain>li{counter-increment:vmstep;border:0!important;border-top:2px solid var(--accent)!important;padding:var(--s2) 0 0!important;background:none!important;margin:0}
h2+.steps--plain>li::before{content:counter(vmstep,decimal-leading-zero);display:block;font-size:var(--fs-label);font-weight:600;color:var(--accent);margin-bottom:var(--s1);font-variant-numeric:tabular-nums}
h2+.steps--plain .h3{font-size:var(--fs-h4);margin:0 0 var(--s1)}
h2+.steps--plain p{font-size:var(--fs-small);color:var(--ink2);margin:0}
@media (max-width:760px){h2+.steps--plain{grid-template-columns:1fr}}

/* ---------- L3: About company facts as one row ---------- */
html .cofacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);border-top:1px solid var(--rule);padding-top:var(--s2)}
html .cofacts>div{display:block;border:0!important;padding:0!important}
html .cofacts dt{margin-bottom:4px}
html .cofacts dd{overflow-wrap:anywhere}
@media (max-width:700px){html .cofacts{grid-template-columns:1fr}}

/* ---------- L4: Press as one aligned list (date | outlet and headline) ---------- */
html .presslist.presslead{grid-template-columns:1fr;gap:0;margin-top:var(--s4);border-top:1px solid var(--rule)}
html .presslead>li{background:none!important;box-shadow:none!important;border-radius:0!important;padding:var(--s3) 0!important;border-bottom:1px solid var(--rule)}
html .presslead article{display:grid!important;grid-template-columns:9rem minmax(0,1fr);column-gap:var(--s3);row-gap:var(--s1);align-items:baseline}
html .presslead .pr_d{grid-column:1;grid-row:1/span 3;margin:0;color:var(--ink2)}
html .presslead .pr_pub,html .presslead .pr_h,html .presslead .tlink{grid-column:2;margin:0}
html .presslead .pr_h{font-size:var(--fs-body);line-height:1.4}
html .presslead .tlink{justify-self:start}
html .presslead .wm svg{height:20px;width:auto}
@media (max-width:700px){html .presslead article{grid-template-columns:minmax(0,1fr)}html .presslead .pr_d{grid-column:1;grid-row:auto}html .presslead .pr_pub,html .presslead .pr_h,html .presslead .tlink{grid-column:1}}

/* ---------- L5: Investors legal note as small print under the form ---------- */
.note--legal{margin-top:var(--s3);font-size:var(--fs-label)!important;line-height:1.5}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .btn:active,.btn-ck:active,.menu-btn:active{transform:none!important}
  html::view-transition-old(*),html::view-transition-new(*){animation:none!important}
}

/* ---------- Home press strip: tighter spacing (19 Oct follow-up) ---------- */
html #press.pstrip{padding-block:56px}
html #press.pstrip + #what-we-do.flow{padding-top:var(--s4)}
@media (max-width:600px){html #press.pstrip{padding-block:40px}html #press.pstrip + #what-we-do.flow{padding-top:var(--s3)}}

/* ---------- Tables scroll inside their own box on narrow screens (break-ui, 19 Oct) ---------- */
main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
main th,main td{white-space:normal}

/* ---------- Type consistency pass (measured 19 Oct): 7 sizes, 3 weights ---------- */
/* 16px outliers -> Small (15px) */
main label,main legend,main dt,main time,.prl_p,.fgrp{font-size:var(--fs-small)}
/* 23px criteria headings -> Subhead (24px) */
.xp_h{font-size:var(--fs-h3)}
/* one button style: 15px / 600 */
html .btn,html .btn-ghost,html .btn.pk_b{font-size:var(--fs-small);font-weight:600}
html .rows .row .btn-ghost{font-size:var(--fs-small)}
/* section headings 500, subheads 600 */
.qa-q{font-weight:500}
.wrow_t,.prl_h,.h3,h3.pr_h{font-weight:600}

/* ---------- Smooth in-page anchor scrolling everywhere (Lenis handles desktop wheel) ---------- */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ================= Top bar: "Glass" (approved 19 Oct) ================= */
html:root{--header-h:56px}
.hdr_cta{display:none}
@media (min-width:1061px){
  html .hdr .hdr_in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:56px;gap:24px;position:static}
  html .hdr .logo{justify-self:start}
  html .hdr .logo img{height:22px;width:auto}
  html .hdr .nav{justify-self:center;gap:2px}
  html .hdr .nav_ctas{display:none}
  html .hdr .hdr_cta{display:inline-flex;justify-self:end;min-height:34px;padding-inline:16px;font-size:13.5px;font-weight:600;position:relative}
  html .hdr .hdr_cta::before{content:"";position:absolute;inset:-5px 0}
  html .hdr .nav>a,html .hdr .dd_btn{font-size:14px;font-weight:500;padding:8px 12px;border-radius:8px;letter-spacing:-.005em}
  /* full-width glass menu panel under the bar */
  html .hdr .dd{position:static}
  html .hdr .dd_menu.sv_menu{left:0!important;right:0!important;top:100%!important;width:auto!important;translate:none!important;scale:1!important;border-radius:0!important;
    background:rgba(250,250,252,.88)!important;box-shadow:0 1px 0 var(--rule),0 30px 40px -30px rgba(30,29,52,.25)!important;
    padding:28px max(var(--pad),calc((100% - 940px)/2)) 30px!important}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    html .hdr .dd_menu.sv_menu{-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)}}
  html .hdr .dd_menu.sv_menu.is-open{translate:none!important}
  /* soft dim behind an open menu */
  html .hdr::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(27,27,27,.16);opacity:0;pointer-events:none;transition:opacity var(--d-base) var(--ease-out);z-index:-1}
  html .hdr:has(.dd_menu.is-open)::after{opacity:1}
}
/* glass once scrolled, clear at the top */
html .hdr{background:rgba(247,247,250,0);transition:background-color var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}
html .hdr.is-scrolled{background:rgba(247,247,250,.72);box-shadow:0 1px 0 var(--rule)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html .hdr.is-scrolled{background:var(--bg)}}
@media (prefers-reduced-transparency:reduce){html .hdr.is-scrolled,html .hdr .dd_menu.sv_menu{background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media (max-width:1060px){html .hdr .hdr_in{height:56px}html .hdr .logo img{height:20px;width:auto}}

/* service rows: the hover state never draws a box */
html .rows .row,html .rows .row:hover{border-right-color:transparent!important;border-bottom-color:transparent!important;border-left-color:transparent!important;border-radius:0!important}

/* ---------- Service rows: link sits under its paragraph, one shared left edge ---------- */
html .rows .row>div{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:12px!important}
html .rows .row>div>p{max-width:60ch;margin:0}
html .rows .row .btn-ghost{white-space:normal!important;margin:0!important}

/* ---------- Menu fixes: solid panel (no nested blur), no box on clicked nav items ---------- */
@media (min-width:1061px){
  html .hdr .dd_menu.sv_menu{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
html .hdr .dd_btn,html .hdr .dd_btn[aria-expanded="true"],html .hdr .nav>a{border:0!important;box-shadow:none!important;background:transparent}
html .hdr .dd_btn[aria-expanded="true"]{color:var(--accent)}
html .hdr .dd_btn:focus:not(:focus-visible),html .hdr .nav>a:focus:not(:focus-visible),html .hdr .hdr_cta:focus:not(:focus-visible){outline:none!important}
html .hdr .dd_btn:focus-visible,html .hdr .nav>a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}

/* ---------- Home service rows: paragraph height follows its text ---------- */
html .rows .row>div>p{flex:0 0 auto!important;min-height:0!important}

/* ---------- Phone menu, Glass style: larger links that settle in one after another ---------- */
@keyframes vmSheetIn{from{opacity:0;transform:translateY(8px)}}
@media (max-width:1060px){
  html .hdr .nav>a,html .hdr .dd_btn{font-size:1.375rem;font-weight:500;letter-spacing:-.02em;padding-block:14px}
  html .hdr .nav.is-open>*{animation:vmSheetIn 300ms var(--ease-out) both;animation-delay:calc(var(--k,0) * 30ms)}
}
@media (prefers-reduced-motion:reduce){html .hdr .nav.is-open>*{animation:none}}

/* ---------- Scroll reveals: premium and subtle (fade, 10px rise, light blur clears), once per element ---------- */
@media (prefers-reduced-motion:no-preference){
  html.vmx [data-vmx]{opacity:0;transform:translateY(10px);filter:blur(3px)}
  html.vmx [data-vmx].in{opacity:1;transform:none;filter:none;
    transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out),filter 700ms var(--ease-out),background-color 220ms var(--ease-out),color 300ms var(--ease-out),box-shadow 220ms var(--ease-out),border-color 220ms var(--ease-out);
    transition-delay:calc(var(--i,0) * 70ms),calc(var(--i,0) * 70ms),calc(var(--i,0) * 70ms),0s,0s,0s,0s}
}
/* press logos: unhurried colour change to purple */
html .wm{transition:opacity 300ms var(--ease-out),color 300ms var(--ease-out),transform 300ms var(--ease-out)}

/* ---------- impeccable.style slop check (19 Oct) ---------- */
/* numbered labels on content that is not a sequence: keep the column, hide the number */
.qa-n,.xp_k{visibility:hidden}
/* images do not move on hover */
html .fan .cv:hover{--lift:0%!important;--lz:0px!important}
@media (hover:hover) and (pointer:fine){html .one .cv:hover{transform:rotate(-2deg)!important}html .idx>a:hover .ico,html .rows .row:hover .ico{transform:none!important}html .wm:hover{transform:none!important}}
/* one edge definition, not hairline plus wide shadow */
@media (min-width:1061px){html .hdr .dd_menu.sv_menu{box-shadow:0 1px 0 var(--rule)!important}}

/* ---------- Scroll: never let CSS smooth-scroll fight Lenis (it moves the page every frame) ---------- */
html.lenis,html.lenis-smooth,html.lenis body{scroll-behavior:auto!important}
html.lenis body{height:auto}

/* ---------- Motion budget (Emil + Apple): opening moment on load, section headings on scroll; body content is still ---------- */
html.vmx [data-vmx]:not(h2){opacity:1!important;transform:none!important;filter:none!important}
@keyframes vmOpen{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:no-preference){
  main > :first-child .h1,main .hero .h1{animation:vmOpen 650ms var(--ease-out) both}
  main > :first-child .lead,main .hero .lead{animation:vmOpen 650ms var(--ease-out) 80ms both}
  main > :first-child .actions,main .hero .actions{animation:vmOpen 650ms var(--ease-out) 160ms both}
}





/* ---------- Header menu motion (single source): unrolls from the bar on open, even fade on close ---------- */
@keyframes vmUnroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vmItem{from{opacity:0;transform:translateY(6px)}}
@media (min-width:1061px){
  html .hdr .dd_menu.sv_menu{opacity:0;visibility:hidden;transition:opacity 220ms ease,visibility 0s linear 220ms}
  html .hdr .dd_menu.sv_menu.is-open{opacity:1;visibility:visible;transition:opacity 0s,visibility 0s}
  html .hdr::after{transition:opacity 220ms ease}
}
@media (min-width:1061px) and (prefers-reduced-motion:no-preference){
  html .hdr .dd_menu.sv_menu.is-open{animation:vmUnroll 300ms cubic-bezier(.32,.72,0,1)}
  html .hdr .sv_menu.is-open .sv_h,html .hdr .sv_menu.is-open li,html .hdr .sv_menu.is-open .sv_foot{animation:vmItem 280ms var(--ease-out) both;animation-delay:calc(70ms + (var(--n,0) + var(--c,0)) * 25ms)}
  html .hdr .sv_menu li:nth-child(1){--n:1}html .hdr .sv_menu li:nth-child(2){--n:2}html .hdr .sv_menu li:nth-child(3){--n:3}html .hdr .sv_menu li:nth-child(4){--n:4}
  html .hdr .sv_menu .sv_col+.sv_col{--c:1}html .hdr .sv_menu .sv_foot{--n:5}
}

/* ---------- Catalogue timeline: steps top-aligned, number sits just above the title ---------- */
html h2+.steps--plain{align-items:start!important}
html h2+.steps--plain>li{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:flex-start!important;align-self:start!important;gap:0!important;min-height:0!important}
html h2+.steps--plain>li>div{display:block!important;margin:0!important;padding:0!important}
html h2+.steps--plain>li::before{margin-bottom:var(--s1)!important}

/* ---------- Form character counter (shown only in the last 10%) ---------- */
.vm-count{display:block;margin-top:6px;font-size:var(--fs-label);color:var(--ink2);font-variant-numeric:tabular-nums;text-align:right}
.vm-count.is-low{color:var(--accent)}