/* archivo-vietnamese-500-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/archivo-vietnamese-500-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* archivo-latin-ext-500-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/archivo-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* archivo-latin-500-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/archivo-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* archivo-vietnamese-600-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/archivo-vietnamese-600-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* archivo-latin-ext-600-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/archivo-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* archivo-latin-600-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/archivo-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* archivo-vietnamese-700-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/archivo-vietnamese-700-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* archivo-latin-ext-700-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/archivo-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* archivo-latin-700-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/archivo-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* archivo-vietnamese-800-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/archivo-vietnamese-800-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* archivo-latin-ext-800-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/archivo-latin-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* archivo-latin-800-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/archivo-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* barlow-vietnamese-400-normal */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/barlow-vietnamese-400-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* barlow-latin-ext-400-normal */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/barlow-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* barlow-latin-400-normal */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/barlow-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* barlow-vietnamese-500-normal */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/barlow-vietnamese-500-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* barlow-latin-ext-500-normal */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/barlow-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* barlow-latin-500-normal */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/barlow-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --ink-0:#09090B; --ink-1:#131316; --ink-2:#1B1B20; --line:#2A2A31;
  --paper:#F6F5F2; --text:#F4F4F1; --text-2:#A8A8B0; --ink-text:#0F0F0F;
  --accent:#FF5900; --container:1240px;

  /* GREEN IS RESERVED FOR SOFTWARE AND TECHNOLOGY (owner, 2026-09-22:
     "zeleno cuvas za gde god se pominje software i tehnologija"). Nothing else
     on this site may wear it: orange is the accent and the call to act, green
     says this part is about what we built. Every green on the site comes from
     these tokens, so a new block about software reaches for the family instead
     of approximating it by eye, and design/greencheck.mjs fails the build if a
     green appears outside a .tech scope. --studio is kept as the name of the
     product that wears the signal colour; it is the same ink. */
  --tech:#23C482;        /* the signal green: rules, marks, icons */
  --studio:var(--tech);  /* Videomite Studio, the product named in that green */
  --tech-bg:#06130E;     /* the ground a tech block sits on */
  --tech-bg-2:#07160F;   /* a cell inside that ground */
  --tech-line:#164534;   /* the hairline */
  --tech-line-2:#245C46; /* a border that has to be seen */
  --tech-lead:#E6F4EC;   /* headings and the bold lead */
  --tech-text:#CFE6DA;   /* list text */
  --tech-body:#A9C7B8;   /* body copy */
  --tech-mute:#7FB89E;   /* small labels above a list */
  --tech-ink:#04140D;    /* text ON the green, never green ON green */

  --text-3:#84848E;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scrollbar-color:var(--line) var(--ink-0)}
body{
  margin:0;background:var(--ink-0);color:var(--text);
  font-family:Barlow,system-ui,sans-serif;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#0F0F0F}

/* Reduced motion was only gating the two entrance animations; the 49 hover and
   state transitions kept running (measured 2026-09-22). A person who asks the
   operating system for less motion is asking for all of it. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,h4,.ui{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;margin:0;text-wrap:balance}
.num{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--container);margin:0 auto;padding-inline:24px}

/* review bar, not part of the design */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:60;background:var(--accent);color:#0F0F0F;font-family:Archivo,sans-serif;font-weight:600;padding:12px 18px}
.skip:focus{inset-inline-start:0}
.review{background:#000;border-bottom:1px solid var(--line);padding-block:9px}
.review div{max-width:var(--container);margin:0 auto;padding-inline:24px;display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.review b{font-family:Archivo,sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.review span{font-size:13px;color:#7A7A82}
@media(max-width:700px){.review div{padding-inline:16px}.review span{display:none}}

/* header: a thin row for the company, a tall row for the work */
header.site{position:sticky;top:0;z-index:55;background:rgba(9,9,11,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.row-main{height:76px}
.row-main .wrap{display:flex;align-items:center;gap:30px;height:100%}
header.site img.logo{height:32px;width:auto;display:block}
.row-main .wrap>a:first-child{display:flex;align-items:center;min-height:44px}
.head-act{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;transition:border-color .15s ease}
.icon-btn:hover{border-color:#45454E}
@media(max-width:700px){
  .row-main{height:64px}
  .row-main .wrap{gap:12px;padding-inline:16px}
  header.site img.logo{height:26px}
  .head-act{gap:8px}
}
/* At 320px the wordmark plus three 44px controls did not fit and every page
   scrolled sideways by 21px (measured on all six). The controls cannot give
   ground: 44px is the touch floor. So the wordmark does, and the gaps with
   it. 320 is the small iPhone and a lot of Android still, and a page that
   slides under the thumb is the first thing that reads as broken. */
@media(max-width:360px){
  .row-main .wrap{gap:10px;padding-inline:14px}
  header.site img.logo{height:21px}
  .head-act{gap:6px}
}

/* The language switcher. It sits beside the search rather than in the menu
   because the person who needs it is the one who cannot read the page, and
   they will not go hunting through a panel in a language they do not have.
   The list prints endonyms: somebody looks for the word they would write
   themselves, never for its English name. */
.lang-wrap{position:relative}
.lang-btn{width:auto;min-width:44px;height:44px;padding-inline:11px;gap:7px;grid-auto-flow:column;align-items:center;font-family:Archivo,sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--text-2)}
.lang-btn:hover{color:var(--text)}
.lang-btn .chev{transition:transform .18s ease}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-btn[aria-expanded="true"]{border-color:#45454E;color:var(--text)}
@media(max-width:700px){.lang-btn .code{display:none}.lang-btn{padding-inline:0;width:44px;gap:0}.lang-btn .chev{display:none}}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 9px);z-index:60;list-style:none;margin:0;padding:6px;min-width:212px;
  background:var(--ink-1);border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.55);max-height:min(70vh,520px);overflow-y:auto}
.lang-menu[hidden]{display:none}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 12px;font-size:15.5px;color:var(--text-2);transition:background .14s ease,color .14s ease}
.lang-menu a:hover,.lang-menu a:focus-visible{background:var(--ink-2);color:var(--text)}
.lang-menu a b{font-family:Archivo,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.09em;color:var(--text-3)}
/* The language you are already reading is stated, not just highlighted: a
   colour alone does not survive being colour blind or being printed. */
.lang-menu a[aria-current]{color:var(--text)}
.lang-menu a[aria-current] b{color:var(--accent)}
.lang-menu a[lang="ar"] span{font-size:17px}

/* The menu. One navigation at every width, so the burger is no longer a
   phone fallback but THE way through the site, which is the shape both
   reference houses use at full desktop width. A full-screen takeover rather
   than a drawer, because at this type size the three services can finally
   carry the weight they never had as 15px links in a row. */
.menu{position:fixed;inset:0;z-index:50;background:var(--ink-0);overflow-y:auto;overscroll-behavior:contain}
.menu[hidden]{display:none}
.menu-in{max-width:var(--container);margin:0 auto;padding:var(--menu-top,132px) 24px 72px;display:grid;gap:44px;grid-template-columns:1fr}
@media(min-width:900px){.menu-in{grid-template-columns:1.35fr .65fr;gap:72px}}
.menu-lab{margin:0 0 14px;font-family:Archivo,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.menu-lab+.menu-lab,nav .big+.menu-lab,.menu-side a+.menu-lab{margin-top:34px}
.menu a.big{display:block;font-family:Archivo,sans-serif;font-size:clamp(28px,4.6vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.12;color:var(--text);padding-block:7px;transition:color .15s ease}
.menu a.big:hover{color:var(--accent)}
.menu a.big.studio{color:var(--studio)}
.menu a.big.studio:hover{color:#4BDBA0}
.menu-side a{display:block;font-size:16.5px;color:var(--text-2);min-height:44px;display:flex;align-items:center;transition:color .15s ease}
.menu-side a:hover{color:var(--text)}
.menu-side a.lang{margin-top:22px;font-family:Archivo,sans-serif;font-size:12px;font-weight:600;letter-spacing:.09em;color:var(--text-2);border:1px solid var(--line);padding-inline:10px;display:inline-flex;min-height:40px}
.menu-side a.lang:hover{border-color:#45454E;color:var(--text)}
@media (prefers-reduced-motion:no-preference){
  .menu[data-open] a.big{animation:rise .42s cubic-bezier(.16,1,.3,1) both}
  .menu[data-open] a.big:nth-of-type(2){animation-delay:.04s}
  .menu[data-open] a.big:nth-of-type(3){animation-delay:.08s}
}
/* The button becomes a close while the panel is open, so the affordance is
   never two controls fighting over one job. */
.burger[aria-expanded="true"] svg path{d:path("M5 5l14 14M19 5L5 19")}

/* buttons */
.btn{font-family:Archivo,sans-serif;font-size:15px;font-weight:600;padding:13px 22px;display:inline-flex;align-items:center;gap:9px;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s ease,border-color .15s ease}
.btn-p{background:var(--accent);color:#0F0F0F}
.btn-p:hover{background:#FF7326}
.btn-g{border-color:#45454E;color:var(--text);background:transparent}
.btn-g:hover{border-color:var(--text)}
.btn:active{transform:translateY(1px)}

/* hero */
/* The hero stops short of the fold on purpose: the picture gets the top of
   the frame, the whole text block stays above the fold on a short laptop,
   and the gap left underneath says there is more page. svh, not vh, so a
   phone's own browser chrome does not push the credit line out of sight. */
.hero{position:relative;min-height:min(760px,max(480px,calc(100svh - 170px)));display:flex;align-items:flex-end;overflow:hidden}
.hero .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.hero .veil{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(9,9,11,.96) 0%,rgba(9,9,11,.8) 20%,rgba(9,9,11,.14) 55%,rgba(9,9,11,.34) 100%),
  linear-gradient(to right,rgba(9,9,11,.72) 0%,rgba(9,9,11,0) 54%)}
.hero .wrap{position:relative;padding-block:56px 60px;width:100%}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:Archivo,sans-serif;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#0F0F0F;background:var(--accent);padding:6px 11px}
.hero h1{font-size:clamp(40px,6.4vw,78px);font-weight:800;letter-spacing:-.035em;line-height:.96;margin:18px 0 0;max-width:15ch}
.hero p.log{font-size:19px;line-height:1.5;color:#D9D9DB;max-width:52ch;margin:18px 0 0}
.hero p.credit{font-size:13.5px;color:#8B8B93;margin:26px 0 0}
.hero h1{max-width:19ch}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* A short window (a 1280x800 laptop is about 640 of viewport once the browser
   has taken its share) cannot hold the block at full size, and the credit was
   the line that fell off. The type steps down with the window, not the width. */
@media(max-width:700px){
  .hero .veil{background:
    linear-gradient(to top,rgba(9,9,11,.97) 0%,rgba(9,9,11,.88) 30%,rgba(9,9,11,.42) 70%,rgba(9,9,11,.5) 100%),
    linear-gradient(to right,rgba(9,9,11,.8) 0%,rgba(9,9,11,.55) 100%)}
}
@media(max-height:730px){
  .hero .wrap{padding-block:30px 32px}
  .hero h1{font-size:clamp(34px,4.4vw,52px)}
  .hero p.log{font-size:16.5px;margin-top:14px}
  .hero .acts{margin-top:20px}
  .hero p.credit{margin-top:16px}
}
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero p.log,.hero .acts,.hero p.credit{animation:rise .7s cubic-bezier(.16,1,.3,1) both}
  .hero h1{animation-delay:.04s} .hero p.log{animation-delay:.1s}
  .hero p.rights{animation-delay:.14s} .hero .acts{animation-delay:.18s}
}
@keyframes rise{from{opacity:.001;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-strip{border-block:1px solid var(--line);background:var(--ink-1)}
.hero-strip .wrap{display:flex;gap:10px 34px;flex-wrap:wrap;padding-block:15px;align-items:baseline}
.hero-strip a{font-family:Archivo,sans-serif;font-size:14px;font-weight:500;color:var(--text-2)}
.hero-strip a:hover{color:var(--accent)}
.hero-strip b{font-family:Archivo,sans-serif;font-size:14px;font-weight:600;color:var(--text)}

/* the windows strip under the hero */

/* the ecosystem: content in, screens out, money back, stack underneath */

/* The film buyer's proof. It cannot name a title (owner, 2026-09-16: we do
   not write about individual films), so it is made of the three things about
   the business that are true of every title and verifiable off this page:
   the windows a title can reach, the languages the work is handled in, and
   the years of data behind a placement. Same hairline grid as the service
   cards, one rank quieter, because it is evidence and not an offer. */
.proof{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:1fr;margin-top:30px}
@media(min-width:620px){.proof{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.proof{grid-template-columns:repeat(4,1fr)}}
.proof div{background:var(--ink-1);padding:22px 24px}
.proof b{display:block;font-family:Archivo,sans-serif;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.proof span{display:block;margin-top:7px;font-size:15.5px;line-height:1.45;color:var(--text-2)}


/* The AVOD hero. Same contract as the home page's, over a wall of the
   channels we run rather than a film still: on a page sold to content owners
   the clients ARE the picture, which is what every network of this kind puts
   on its first screen. The Certified seal stands on the buttons' own line,
   because a 260px mark alone under a full-width hairline only drew attention
   to the empty ground beside it. */
.hero.channels picture{position:absolute;inset:0;display:block}
.hero.channels .still{object-position:center center}
.hero.channels .veil{background:
  linear-gradient(to top,rgba(9,9,11,.97) 0%,rgba(9,9,11,.9) 26%,rgba(9,9,11,.62) 62%,rgba(9,9,11,.72) 100%),
  linear-gradient(to right,rgba(9,9,11,.88) 0%,rgba(9,9,11,.22) 72%)}
.hero .acts .cert{height:30px;width:auto;margin-inline-start:10px;align-self:center}
/* When the row wraps, the seal lands in the button's own column, 12px under
   it and at the same 214px width, and reads as a second action that lost its
   background (owner, 2026-09-22: "na mobilnom pozicija youtube certified nije
   dobra"). It is a credential, not something to press.

   The separation is row-gap, not a margin, because row-gap exists only
   BETWEEN rows: on one row it is worth nothing and the seal stays centred
   beside the button. A margin moved it off centre at every width. And no
   breakpoint guesses when the wrap happens: the first attempt put this under
   max-width:700px, and the row actually wraps at 530px (measured at this
   seal's own size, since a smaller seal wraps later), so it was firing 170px
   too early. */
.hero.channels .acts{row-gap:26px}

/* The two service pages carry the SAME header (owner, 2026-09-22: "header na
   movie i na avod nije isti"). Same component, same height, same type, same
   spacing; only the picture under it changes. The poster wall is blurred
   because the same posters are listed as results below it, which the channel
   wall on AVOD has no equivalent of. */
.hero.compact .still{object-position:center 46%}
/* Music distribution: the same header over the sleeves we delivered. They are
   other people's records, which is the page's whole argument, so the wall is
   sharp and the credit line says whose they are. */
.hero.music .still{object-position:center 46%}
.hero.music .veil{background:
  linear-gradient(to top,rgba(9,9,11,.96) 0%,rgba(9,9,11,.9) 26%,rgba(9,9,11,.6) 64%,rgba(9,9,11,.72) 100%),
  linear-gradient(to right,rgba(9,9,11,.92) 0%,rgba(9,9,11,.24) 76%)}
@media(max-width:700px){
  .hero.music .veil{background:
    linear-gradient(to top,rgba(9,9,11,.96) 0%,rgba(9,9,11,.9) 34%,rgba(9,9,11,.62) 78%,rgba(9,9,11,.68) 100%),
    linear-gradient(to right,rgba(9,9,11,.84) 0%,rgba(9,9,11,.5) 100%)}
}
.hero.compact .veil{background:
  linear-gradient(to top,rgba(9,9,11,.96) 0%,rgba(9,9,11,.9) 24%,rgba(9,9,11,.6) 62%,rgba(9,9,11,.7) 100%),
  linear-gradient(to right,rgba(9,9,11,.9) 0%,rgba(9,9,11,.26) 74%)}
@media(max-width:700px){
  .hero.compact .veil{background:
    linear-gradient(to top,rgba(9,9,11,.96) 0%,rgba(9,9,11,.9) 34%,rgba(9,9,11,.6) 76%,rgba(9,9,11,.66) 100%),
    linear-gradient(to right,rgba(9,9,11,.82) 0%,rgba(9,9,11,.5) 100%)}
}
@media(max-width:700px){
  /* On a phone the veil was so heavy the channels read as texture rather
     than as channels, which is the whole point of the picture. */
  .hero.channels .veil{background:
    linear-gradient(to top,rgba(9,9,11,.96) 0%,rgba(9,9,11,.86) 34%,rgba(9,9,11,.5) 76%,rgba(9,9,11,.58) 100%),
    linear-gradient(to right,rgba(9,9,11,.74) 0%,rgba(9,9,11,.4) 100%)}
  .hero .acts .cert{margin-inline-start:0;height:26px}
}

/* The figures. 500 channels and 15 billion views is the whole answer to "are
   you big enough for mine", and it was set at 18px, smaller than the
   paragraph above it. It is display type now, tabular, and the four thin line
   icons are gone: a play badge, a layer stack and a rising arrow are the most
   commoditised marks in software, and they were doing the work the numbers
   should do. */
.figures{padding-block:64px}
.figs{list-style:none;margin:0;padding:0;display:grid;gap:1px;grid-template-columns:1fr;
  background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.figs{grid-template-columns:repeat(3,1fr)}}
/* Movie sales has four facts, not three: two across on a tablet, four in a row
   on a wide screen, so no row ends with one fact alone. */
@media(min-width:760px){.figs.figs-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.figs.figs-4{grid-template-columns:repeat(4,1fr)}}
.figs li{background:var(--ink-2);padding:26px 26px 28px;display:flex;flex-direction:column}
.figs .pre{font-family:Archivo,sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3)}
.figs b{font-family:Archivo,sans-serif;font-size:clamp(44px,5.6vw,68px);font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;
  margin-top:6px}
.figs .unit{font-family:Archivo,sans-serif;font-size:19px;font-weight:600;color:var(--accent);
  margin-top:4px}
.figs .say{margin-top:14px;font-size:15.5px;line-height:1.45;color:var(--text-2)}
@media(max-width:700px){.figures{padding-block:44px}.figs li{padding:22px 22px 24px}}

/* the partner wall */
/* One object, two labelled zones. Two separate walls stacked read as the same
   component at two sizes, which is worse than not splitting them at all: it
   says nothing about WHY they are apart. The zone label is the same device the
   What we do block uses for its last row, so the page has one pattern for
   this, not two. The control is the wall's last tile rather than a button
   underneath, which also means no row can end stretched or half empty. */
.walls{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.zone{margin:0;background:var(--ink-2);padding:11px 16px;font-family:Archivo,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
/* Grid whose leftover cells are invisible, not flex rows that stretch to fill.
   Growing the last row blew the control tile across the full width and left
   two music logos double size; growing is only right where every cell is a
   word. Here the object's ground IS the tile ground and the separators are
   drawn by the tiles, so a row that does not fill simply ends. */
.wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));background:var(--ink-0)}
.wall li[hidden]{display:none}
.wall li{border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line);display:grid;place-items:center;padding:20px 16px;min-height:84px}
/* Every tile is the same 3:1 canvas with the mark composed into it at a
   size set by its INK, so the box no longer decides how big a logo looks.
   No max-height here: capping the height would undo that normalisation. */
/* The wall is evidence, not a claim shouted at the reader: the marks sit
   back from the ground and come forward on hover (owner, 2026-09-15). */
.wall img{width:100%;max-width:116px;height:auto;opacity:.6;transition:opacity .18s ease,transform .18s ease}
.wall li:hover img{opacity:.92;transform:scale(1.04)}
.wall.music{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}
/* On a phone a 190px track leaves ONE column and the film wall became a
   seventeen-storey tower. Two columns is the floor for a wall of logos. */
@media(max-width:700px){
  .wall{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .wall li,.tile-more button{min-height:78px;padding:16px 12px}
  .wall.music{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
  .wall.music li{min-height:60px;padding:12px 8px}
}
.wall.music li{min-height:64px;padding:16px 12px}
.wall.music img{max-width:96px;opacity:.5}
.tile-more{padding:0!important}
.tile-more button{width:100%;height:100%;min-height:84px;background:var(--ink-1);border:0;cursor:pointer;color:var(--text);display:grid;place-items:center;align-content:center;gap:6px;grid-auto-flow:row;font-family:Archivo,sans-serif;font-size:14px;font-weight:600;transition:background .16s ease}
.tile-more button:hover{background:#1D1D22}
/* The sentence closes the music row instead of sitting under it, and it is
   stretched by script to exactly the cells left over, so the block always ends
   square without a single blank cell. */
.wall li.note{place-items:center start;text-align:start;padding:14px 16px;font-family:Barlow,system-ui,sans-serif;font-size:13.5px;line-height:1.35;color:var(--text-2);text-wrap:pretty}
.tile-more svg{transition:transform .2s ease}
.tile-more button[aria-expanded="true"] svg{transform:rotate(180deg)}

/* A service page opens with its name rather than with a picture: the visitor
   arrived from a menu that already told them what this is, so the hero's job
   here is the argument, not the introduction. */
.page-head{border-bottom:1px solid var(--line);background:var(--ink-1);padding-block:72px 64px}
.page-head h1{font-family:Archivo,sans-serif;font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.page-head .lede{font-size:19px;line-height:1.5;color:var(--text-2);max-width:58ch;margin:20px 0 0}
.page-head .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
@media(max-width:700px){.page-head{padding-block:48px 44px}.page-head .lede{font-size:17px}}

/* The windows, as rows rather than cards. A buyer reads this the way they
   read a schedule, and the hairline per row is the same device the markets
   list uses, so the page has one pattern for a list of facts and not two. */
.windows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:28px}
/* Every row borrows the list's columns (subgrid), so the descriptions share
   one left edge down the whole list however long a name or a line is. */
.windows li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;row-gap:6px;padding-block:17px;border-top:1px solid var(--line)}
.windows li:last-child{border-bottom:1px solid var(--line)}
.w-name{font-family:Archivo,sans-serif;font-size:19px;font-weight:800;letter-spacing:-.02em}
@media(max-width:620px){.windows{grid-template-columns:minmax(0,1fr)}}
.w-what{color:var(--text-2);font-size:16.5px}
/* A duty row carries its icon in a column of its own, so the names still line
   up down the page. */
/* A grid, not a wrapping flex row: in a flex row a description too long for
   its line dropped to the start of the next one, under the icon, while the
   short ones stayed beside the name (AVOD, 2026-09-22). */
.windows.duties{grid-template-columns:21px max-content minmax(0,1fr);column-gap:18px}
.windows.duties .ic{width:21px;height:21px;color:var(--text-3);align-self:start;font-size:19px;margin-top:calc((1lh - 21px) / 2)}
@media(max-width:620px){
  .windows.duties{grid-template-columns:21px minmax(0,1fr)}
  .windows.duties .w-what{grid-column:2}
}
.earn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px 64px}
.earn-grid h3{font-family:Archivo,sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:0 0 14px}
.windows.earn-list{grid-template-columns:minmax(0,1fr)}
.windows.earn-list li{row-gap:4px}
.windows.earn-list .w-name{font-size:18px}
/* Movie sales speaks to two readers, the owner and the buyer, so its services
   are two lists under one heading, each with its own label and its own next
   step. The label is the same small caps as the earn-grid columns on AVOD. */
.svc-sub{font-family:Archivo,sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:48px 0 14px}
.sec-h + .svc-sub{margin-top:0}
.svc-more{margin-top:14px;font-family:Archivo,sans-serif;font-size:15px;font-weight:600;color:var(--text);display:inline-flex;gap:8px;align-items:center;min-height:44px}
.svc-more:hover{color:var(--accent)}
.svc-acts{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:14px}
.svc-acts .svc-more{margin-top:0}

/* The catalogue finder. Movie sales is not a brochure, it is the buyer's tool
   (owner, 2026-09-18), so the search is the page and everything else sits
   under it. Filters are chips and selects on the page rather than behind a
   panel: a buyer scanning for a genre should see the genres without opening
   anything. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.page-head.tight{padding-block:56px 40px}
.finder{padding-block:36px 84px;background:var(--ink-1);border-bottom:1px solid var(--line)}
.finder-head{margin-bottom:6px}
.finder-head p a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.finder-head p a:hover{color:var(--accent)}
.find-filters{display:flex;gap:22px 34px;flex-wrap:wrap;align-items:flex-start;margin-top:22px}
/* On a wide screen the bar and the panel are pass-through wrappers, so every
   group sits in one row exactly as before. Order puts them back in reading
   order, because the bar comes first in the markup for the phone's sake. */
.f-bar,.f-panel{display:contents}
.f-sort{order:1}
.f-clear{order:2}
.f-toggle{display:none}
.f-group{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.f-lab{font-family:Archivo,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:Archivo,sans-serif;font-size:14px;font-weight:600;color:var(--text-2);background:var(--ink-0);
  border:1px solid var(--line);padding:0 14px;min-height:44px;cursor:pointer;transition:border-color .14s ease,color .14s ease}
.chip:hover{border-color:#45454E;color:var(--text)}
/* A chosen filter wears the accent as its EDGE, not as a fill: solid accent is
   reserved for the one action on a band, and a selected genre is a state. */
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed="true"]:hover{border-color:var(--accent);color:var(--accent)}
.years{display:flex;align-items:center;gap:9px}
.years select,.f-sort select{height:44px;min-width:104px;background:var(--ink-0);border:1px solid var(--line);color:var(--text);
  font-family:Archivo,sans-serif;font-size:14px;font-weight:600;padding-inline:14px 34px;appearance:none;
  background-image:linear-gradient(45deg,transparent 49%,currentColor 51%),linear-gradient(-45deg,transparent 49%,currentColor 51%);
  background-size:6px 6px,6px 6px;background-position:calc(100% - 18px) 19px,calc(100% - 12px) 19px;background-repeat:no-repeat}
.years select:focus-visible,.f-sort select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.f-sort select{min-width:150px}
.finder{padding-block:44px 84px}
.years .dash{color:var(--text-3);font-size:14px}
.f-clear{font-family:Archivo,sans-serif;font-size:14px;font-weight:600;color:var(--text-2);background:transparent;border:0;
  cursor:pointer;min-height:44px;text-decoration:underline;text-underline-offset:4px;padding:0}
.f-clear:hover{color:var(--accent)}
.find-state{margin:26px 0 0;font-size:14.5px;color:var(--text-2);min-height:1.2em}

/* A phone is where this page was worst: the buyer came to see films and met
   two full screens of controls first. The filters fold into one button, so the
   grid starts almost at once, and the bar that opens them sticks under the
   header, so changing a filter is one thumb away from anywhere in the grid
   instead of a scroll back to the top. */
@media(max-width:760px){
  .page-head.tight{padding-block:34px 28px}
  .finder{padding-block:0 64px}
  .finder-head{padding-top:40px;margin-bottom:18px}
  .find-filters{display:contents}
  .f-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
    position:sticky;top:64px;z-index:20;background:var(--ink-1);
    padding-block:14px;margin-inline:-24px;padding-inline:24px;
    border-bottom:1px solid var(--line)}
  .f-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding-inline:15px;
    font-family:Archivo,sans-serif;font-size:14px;font-weight:600;color:var(--text);
    background:var(--ink-0);border:1px solid var(--line);cursor:pointer}
  .f-toggle[aria-expanded="true"]{border-color:#45454E}
  .f-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding-inline:6px;
    background:var(--accent);color:#0F0F0F;font-size:12px;font-weight:700}
  .f-count[hidden]{display:none}
  .f-sort{order:0;margin-inline-start:auto}
  .f-sort .f-lab{display:none}
  .f-clear{order:0;width:100%;justify-content:flex-start;text-align:start}
  .f-panel{display:none;padding-block:20px 4px}
  .f-panel[data-open]{display:grid;gap:20px}
  .f-panel .f-group{align-items:flex-start;flex-direction:column;gap:10px}
  .find-state{margin-top:20px}
}

/* The results. A poster grid rather than a rail: a rail is for browsing past
   something, a grid is for finding something in it. */
.films{display:grid;gap:26px 20px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));margin-top:14px}
@media(max-width:520px){.films{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:22px 14px}}
.film[hidden]{display:none}
/* One link per card, not two. The poster was a link and the title was a
   second link to the same place, 41x17px on a phone: under the 44px floor,
   and a duplicate destination for anybody reading the page aloud. The whole
   card is the target now, 164x318, and the title is its label. */
.film-link{display:block;color:inherit}
.film-img{display:block;overflow:hidden;background:var(--ink-2);aspect-ratio:2/3}
.film-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.film:hover .film-img img{transform:scale(1.04)}
.film-t{font-family:Archivo,sans-serif;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25;
  margin:9px 0 0;min-height:2.5em}
.film-m{font-size:13.5px;color:var(--text-2);margin:3px 0 0}
/* The grid shows a few complete rows and the rest one press at a time. A
   button and not page numbers: "page 1 of 13" would state the size of the
   catalogue, which the site never does. */
.find-more{display:flex;justify-content:center;margin-top:36px}
.find-more[hidden]{display:none}
.find-more .btn{min-height:48px;min-width:220px;justify-content:center}
.find-empty{margin:30px 0 0;font-size:17px;color:var(--text-2)}
.linkish{background:0;border:0;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.find-foot{display:flex;gap:18px 26px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.find-foot p{margin:0;color:var(--text-2);font-size:16.5px;max-width:52ch}
.find-share{margin:18px 0 0;font-size:14px;color:var(--text-3)}
.page-head.tight .acts{margin-top:22px}

/* A producer is not this page's reader, but they should not hit a dead end
   either: one line and a way out, at the very bottom. */
.holders-slim{border-top:1px solid var(--line);background:var(--ink-1);padding-block:30px}
.holders-slim .wrap{display:flex;gap:14px 26px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.holders-slim p{margin:0;color:var(--text-2);font-size:16.5px}
.holders-slim b{color:var(--text);font-family:Archivo,sans-serif;font-weight:700}
.holders-slim .more{font-family:Archivo,sans-serif;font-size:15px;font-weight:600;color:var(--text);display:inline-flex;gap:8px;align-items:center;min-height:44px}
.holders-slim .more:hover{color:var(--accent)}

/* The second audience gets a band, not a footnote. Movie sales speaks to a
   buyer the whole way down and then, in one grey strip at the foot, to the
   person who OWNS the film (owner, 2026-09-22: "ovo mora da bude malo jace").
   It takes this page's one paper band, which it had none of: on a page of
   near-black, black type on paper is the loudest thing after the hero. */
.holders{padding-block:76px}
.holders h2{font-family:Archivo,sans-serif;font-size:clamp(30px,4.4vw,48px);font-weight:800;
  letter-spacing:-.035em;line-height:1.03;max-width:16ch}
.holders p{margin:20px 0 0;font-size:19px;line-height:1.5;max-width:56ch}
.holders .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
@media(max-width:700px){.holders{padding-block:52px}.holders p{font-size:17px}}

/* The film page. A buyer arrives here from a poster, so the poster stays with
   them and the facts sit beside it: what it is, how long, who made it, and the
   one thing they came to do, which is ask for a screener. No rights, no
   territories, no terms, anywhere on this page. */
.crumbs{border-bottom:1px solid var(--line);background:var(--ink-1)}
.crumbs .wrap{display:flex;gap:10px;align-items:center;min-height:52px;font-size:14px;color:var(--text-3)}
.crumbs a{color:var(--text-2);min-height:44px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--accent)}
.film-detail{padding-block:52px 12px}
.fd-top{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:820px){.fd-top{grid-template-columns:300px 1fr;gap:52px}}
.fd-poster img{width:100%;height:auto;display:block;background:var(--ink-2);aspect-ratio:2/3;object-fit:cover}
@media(max-width:819px){.fd-poster{max-width:230px}}
.fd-main h1{font-family:Archivo,sans-serif;font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.fd-alt{margin:6px 0 0;font-size:17px;color:var(--text-3)}
.fd-facts{display:flex;gap:10px 12px;flex-wrap:wrap;align-items:center;margin:18px 0 0;font-size:15.5px;color:var(--text-2)}
.fd-facts .dot{color:var(--text-3)}
.fd-facts a{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line);
  min-height:44px;display:inline-flex;align-items:center}
.fd-facts a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.fd-syn{margin:22px 0 0;font-size:18px;line-height:1.55;color:var(--text);max-width:62ch;text-wrap:pretty}
.film-detail .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.fd-credits{margin:32px 0 0;display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:620px){.fd-credits{grid-template-columns:9rem 1fr}}
.fd-credits dt{font-family:Archivo,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);padding-block:15px 4px;border-top:1px solid var(--line)}
.fd-credits dd{margin:0;font-size:16.5px;color:var(--text-2);padding-block:15px;line-height:1.5}
@media(min-width:620px){.fd-credits dt{padding-block:15px}.fd-credits dd{border-top:1px solid var(--line)}}
.fd-ext{display:flex;gap:18px;margin:26px 0 0}
.fd-ext a{font-family:Archivo,sans-serif;font-size:14px;font-weight:600;color:var(--text-2);min-height:44px;
  display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
.fd-ext a:hover{color:var(--accent)}

/* The case study detail page. It opens from the link under a case on the home
   page and on AVOD, which is the only way in: there is no index, because the
   two pages that carry the cases already are one. Same discipline as the film
   detail page: the subject's own name is the h1, the facts sit under it, and
   the page says what happened rather than what it means. */
.case-detail{padding-block:52px 8px}
.cd-kick{margin:0;font-family:Archivo,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.case-detail h1{font-family:Archivo,sans-serif;font-size:clamp(32px,5vw,52px);font-weight:800;
  letter-spacing:-.035em;line-height:1.02;margin-top:12px}
/* The body follows the company's own case study page (owner, 2026-09-22:
   "zasto nisi na isti nacin koristio ikonice i ovakav raspored"): one reading
   column, the company, the result in one line in the accent, the picture,
   then challenge, approach and insights, and last the four figures with the
   icons drawn for them. */
.cs-col>*{max-width:760px}
.cs-yt{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-family:Archivo,sans-serif;font-size:15px;font-weight:600;color:var(--text)}
.cs-yt svg{color:#FF0033}
.cs-yt:hover{color:var(--accent)}
.cs-intro{margin:18px 0 0;font-size:17.5px;line-height:1.6;color:var(--text-2)}
.cs-result{margin:30px 0 0;font-family:Archivo,sans-serif;font-size:clamp(20px,2.4vw,24px);font-weight:700;
  line-height:1.3;letter-spacing:-.015em;color:var(--accent)}
.cs-shot{margin:24px 0 0}
.cs-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);background:var(--ink-1)}
.cs-part{margin-top:36px}
.cs-part h2{font-size:21px;font-weight:800;letter-spacing:-.02em}
.cs-part p{margin:10px 0 0;font-size:17px;line-height:1.6;color:var(--text-2)}
.case-detail{padding-bottom:72px}
/* The figures are the site's own figures band (the AVOD page's), four of them,
   each under an icon drawn in the same line style as the duties: 1.8 stroke on
   a 24 grid, in the accent, because here the icon names the number. */
.cs-stats{background:var(--ink-1);border-block:1px solid var(--line);padding-block:64px}
.cs-stats h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.025em;margin-bottom:28px}
.figs .ic{width:44px;height:44px;color:var(--accent);margin-bottom:20px}
.figs.four{grid-template-columns:1fr}
@media(min-width:620px){.figs.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.figs.four{grid-template-columns:repeat(4,1fr)}}
/* Insights sit in a box of their own, as they did on the company's page: the
   one thing the case taught, set apart from what happened. */
.cs-note{background:var(--ink-1);border:1px solid var(--line);padding:22px 24px}
.cs-note h2{font-size:18px}
/* Two rows of figures read as one band: the second list closes up under the
   first so the hairline grid runs on. */
.figs.cs-figs2{margin-top:-1px}
.cs-more{padding-block:56px 72px}
.cs-more .cs-part:first-child{margin-top:0}
/* The relative heights are measured from the company's own chart (54, 187
   and 457 of 457 pixels); it carried no values, so this one carries none. */
.cs-chart{margin:32px 0 0}
.cs-chart svg{display:block;width:100%;max-width:450px;height:auto}
.cs-chart rect{fill:var(--accent)}
.cs-chart g:not(:last-child) rect{fill:#5A5A63}
.cs-chart text{fill:var(--text-2);font:500 15px Barlow,system-ui,sans-serif;text-anchor:middle}
.cs-chart figcaption{margin-top:10px;font-size:15px;color:var(--text-2)}
.cs-quote{margin:0;padding:6px 0 6px 24px;border-inline-start:3px solid var(--accent)}
.cs-quote p{margin:0;font-family:Archivo,sans-serif;font-size:clamp(20px,2.4vw,26px);font-weight:600;
  line-height:1.35;letter-spacing:-.015em;color:var(--text)}
.cs-quote footer{margin-top:12px;font-size:15px;color:var(--text-2)}
.cs-formats{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);grid-template-columns:1fr}
@media(min-width:620px){.cs-formats{grid-template-columns:1fr 1fr}}
.cs-formats li{background:var(--ink-1);padding:22px 22px 20px}
.cs-formats .ic{width:28px;height:28px;color:var(--accent)}
.cs-formats h3{margin-top:12px;font-size:18px;font-weight:800;letter-spacing:-.015em}
.cs-formats dl{margin:12px 0 0;display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:15px}
.cs-formats dt{color:var(--text-3)}
.cs-formats dd{margin:0;color:var(--text-2)}
.cs-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.cs-list li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);font-size:16.5px;
  line-height:1.55;color:var(--text-2)}
.cs-list li:last-child{border-bottom:1px solid var(--line)}
.cs-list li::before{content:"";position:absolute;inset-inline-start:0;top:24px;width:9px;height:2px;background:var(--accent)}
.cs-learn{margin:14px 0 0}
.cs-learn dt{margin-top:18px;font-family:Archivo,sans-serif;font-size:17px;font-weight:700;color:var(--text)}
.cs-learn dd{margin:6px 0 0;font-size:16.5px;line-height:1.55;color:var(--text-2)}
/* The subscribe button is YouTube's; the link beside it is the fallback and
   leaves once the button has drawn an iframe. */
.cs-sub{margin-top:18px;display:flex;align-items:center;min-height:48px}
.cs-sub .g-ytsubscribe:empty{display:none}
.cs-sub:has(iframe) .cs-yt{display:none}
@media(max-width:700px){.case-detail{padding-block:36px 52px}.cs-stats{padding-block:48px}}

/* The form. Fields are the same dark field the filters are, because they are
   the same kind of object: something you fill in rather than something you
   fire. */
.screener{background:var(--ink-1);border-block:1px solid var(--line);padding-block:72px}
.for-film{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin:0 0 26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.for-name{font-family:Archivo,sans-serif;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.for-name .num{color:var(--text-3);font-weight:600;font-size:16px;margin-inline-start:6px}
.fields{display:grid;gap:18px 22px;grid-template-columns:1fr}
@media(min-width:700px){.fields{grid-template-columns:1fr 1fr}.field.wide{grid-column:1 / -1}}
.field{margin:0;display:flex;flex-direction:column;gap:7px}
.field label{font-family:Archivo,sans-serif;font-size:13.5px;font-weight:600;color:var(--text-2)}
.field .opt{color:var(--text-3);font-weight:500}
.field input,.field select,.field textarea{background:var(--ink-0);border:1px solid var(--line);color:var(--text);
  font-family:Barlow,system-ui,sans-serif;font-size:16.5px;padding:0 14px;min-height:50px;width:100%}
.field textarea{padding-block:13px;min-height:116px;resize:vertical;line-height:1.5}
.field select{font-family:Archivo,sans-serif;font-size:15px;font-weight:600;appearance:none;padding-inline-end:34px;
  background-image:linear-gradient(45deg,transparent 49%,currentColor 51%),linear-gradient(-45deg,transparent 49%,currentColor 51%);
  background-size:6px 6px,6px 6px;background-position:calc(100% - 18px) 22px,calc(100% - 12px) 22px;background-repeat:no-repeat}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.form-foot{display:flex;gap:16px 24px;flex-wrap:wrap;align-items:center;margin-top:28px}
.form-fine{margin:0;font-size:14px;color:var(--text-3);max-width:46ch}

/* AVOD speaks to the owner of the content, not the buyer of it, so the page
   leads with scale and then with the thing owners actually worry about:
   somebody else uploading their work. */
.rights{background:var(--ink-1);border-block:1px solid var(--line);padding-block:72px}
.r-in{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:900px){.r-in{grid-template-columns:1.1fr .9fr;gap:60px}}
.rights h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.08;max-width:22ch}
.rights p{margin:20px 0 0;font-size:17.5px;line-height:1.55;color:var(--text-2);max-width:56ch}
.rights .r-note{margin-top:16px;font-size:15.5px;color:var(--text-3)}
.rights ul{list-style:none;margin:0;padding:0;border:1px solid var(--line)}
/* The list is as tall as its items, never as tall as the text beside it: a
   grid item stretches by default, and the box then ran on past its last row
   as an empty strip of the page's ground (owner, 2026-09-22, music). */
.r-in>ul{align-self:start}
.rights li{display:flex;gap:13px;align-items:flex-start;font-size:16.5px;color:var(--text-2);padding:18px 20px;background:var(--ink-0)}
.rights li+li{border-top:1px solid var(--line)}
.rights li svg{flex:0 0 18px;margin-top:4px;color:var(--accent)}

/* Exactly one band on a page is paper. This page had none, which is why seven
   bands of near-black read as one material. The rights band takes it: it is
   the page's best argument, the only part of the offer a freelancer cannot
   deliver, and black type on paper is the biggest material event the system
   owns. */
section.paper{background:var(--paper);border-block:1px solid #D9D6CF}
section.paper h2{color:var(--ink-text)}
section.paper p{color:#3A3A38}
section.paper .r-note{color:#6A6A66}
section.paper ul{border-color:#D9D6CF}
section.paper li{background:#FFFDF9;color:#3A3A38}
section.paper li+li{border-top-color:#E4E1DA}
section.paper .btn-g{border-color:#C6C2B9;color:var(--ink-text)}
section.paper .btn-g:hover{border-color:var(--ink-text)}
/* The sentence a rights holder who has been burned before is reading for.
   It was set at 15.5px on the page's quietest grey, which made the one line
   that earns the band's credibility look like a footnote. */
/* Where the company is, drawn rather than listed. Five offices, four of them
   within a few hundred kilometres of each other, so the map is cropped to the
   Atlantic: the cluster gets room and New York stays in frame. The pins carry
   no labels, because at this width four of them would collide; the names are
   the caption. */
.offices{margin:0}
.offices .map{display:block;width:100%;height:auto;background:var(--ink-0);
  border:1px solid var(--line)}
.offices .land{fill:#2E2E36}
.offices .pin{fill:var(--accent)}
.offices .halo{fill:var(--accent);opacity:.2}
.offices figcaption{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;
  font-family:Archivo,sans-serif;font-size:15px;font-weight:600;color:var(--text-2)}
.offices figcaption .hq{color:var(--text)}
.offices figcaption em{font-style:normal;font-weight:500;font-size:13.5px;color:var(--text-3)}

/* The line the band is there for. It was written for the paper band and took
   its ink colour with it, which on a dark band is black type on near black:
   invisible, and no check was looking. The colour follows the ground now. */
.rights .r-said{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
  font-family:Archivo,sans-serif;font-size:clamp(18px,2vw,22px);font-weight:600;
  line-height:1.3;letter-spacing:-.02em;color:var(--text);max-width:34ch}
section.paper .r-said{border-top-color:#D9D6CF;color:var(--ink-text)}
/* The AVOD rights band is two things, not one list (owner, 2026-09-22: "dve
   su strane medalje"): protecting a partner's rights where somebody else uses
   their content, and resolving claims somebody else makes on it. Each side is
   named, says in one sentence what happens, and then lists how. */
.r-in.r-stack{grid-template-columns:1fr;gap:34px}
.r-in.r-stack .r-sides{border-top:1px solid #D9D6CF;padding-top:34px}
.r-sides{display:grid;gap:30px 44px}
@media(min-width:900px){.r-sides{grid-template-columns:1fr 1fr}}
.r-sides h3{font-family:Archivo,sans-serif;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.rights .r-sides .r-what{margin:8px 0 14px;font-size:16.5px}
section.paper .r-sides h3{color:var(--ink-text)}

/* The channel list is the evidence this page has and the other pages do not:
   forty three names that belong to other people. Typographic rather than a
   logo wall, because these are channels, and a channel is a name. */

/* sections */
section{padding-block:84px}
@media(max-width:700px){section{padding-block:52px}}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sec-h h2{font-size:clamp(28px,4.2vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.sec-h p{color:var(--text-2);max-width:54ch;margin:12px 0 0;font-size:17px}

/* services */
/* What we do: three rows, the names as large as the menu's (owner, 2026-09-24:
   option C of home-whatwedo-options.html with the buttons of option A, under
   the sentence), so the three doors of the site carry the weight right after
   the hero. The whole row is the link; the name turns accent on hover and the
   button fills only then, so it never competes with the hero's one orange
   button. */
.svc{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:1fr;gap:12px 48px;align-items:center;padding-block:30px;border-bottom:1px solid var(--line)}
@media(min-width:900px){.svc-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);padding-block:36px}}
.svc-row h3{font-size:clamp(32px,4.2vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.05;transition:color .15s ease}
.svc-body{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.svc-row p{color:var(--text-2);font-size:16.5px;line-height:1.5;margin:0;max-width:48ch}
.svc-row .go{font-family:Archivo,sans-serif;font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border:1px solid #45454E;color:var(--text);transition:background .15s ease,border-color .15s ease,color .15s ease}
.svc-row:hover h3,.svc-row:focus-visible h3{color:var(--accent)}
.svc-row:hover .go,.svc-row:focus-visible .go{background:var(--accent);border-color:var(--accent);color:#0F0F0F}

/* catalogue */
.cat{background:var(--ink-2);border-block:1px solid var(--line)}
.rail{display:flex;gap:18px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--line)}
.rail::-webkit-scrollbar-track{background:transparent}
/* Rows that scroll sideways (script: "The rows that scroll sideways"). The
   row fades out at an edge with more behind it; the mask works on any ground,
   so the same rule serves the grey catalogue band and the black Awards. */
.scroller{position:relative}
.scroller.more-after>*:first-child{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 96px),transparent)}
.scroller.more-before>*:first-child{-webkit-mask-image:linear-gradient(to right,transparent,#000 64px);mask-image:linear-gradient(to right,transparent,#000 64px)}
.scroller.more-before.more-after>*:first-child{-webkit-mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 96px),transparent)}
[dir="rtl"] .scroller.more-after>*:first-child{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 96px),transparent)}
[dir="rtl"] .scroller.more-before>*:first-child{-webkit-mask-image:linear-gradient(to left,transparent,#000 64px);mask-image:linear-gradient(to left,transparent,#000 64px)}
[dir="rtl"] .scroller.more-before.more-after>*:first-child{-webkit-mask-image:linear-gradient(to left,transparent,#000 64px,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(to left,transparent,#000 64px,#000 calc(100% - 96px),transparent)}
.scroll-btn{position:absolute;z-index:2;top:calc(var(--mid,40%) - 26px);width:52px;height:52px;display:grid;place-items:center;border:1px solid #45454E;background:rgba(9,9,11,.86);color:var(--text);cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.scroll-btn:hover{background:var(--accent);border-color:var(--accent);color:#0F0F0F}
.scroll-btn.prev{inset-inline-start:-14px}
.scroll-btn.next{inset-inline-end:-14px}
.scroll-btn.prev svg{transform:scaleX(-1)}
[dir="rtl"] .scroll-btn.next svg{transform:scaleX(-1)}
[dir="rtl"] .scroll-btn.prev svg{transform:none}
.scroll-btn[hidden]{display:none}
@media(hover:none),(max-width:700px){.scroll-btn{display:none}}
.poster{flex:0 0 210px;scroll-snap-align:start;display:flex;flex-direction:column;gap:9px}
.poster-img{display:block;overflow:hidden;background:var(--ink-1);aspect-ratio:2/3}
.poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.poster:hover img{transform:scale(1.04)}
.poster-t{font-family:Archivo,sans-serif;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.poster-m{font-size:13.5px;color:var(--text-2)}
.cat-foot{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:28px}
.cat-foot span{color:var(--text-2);font-size:15px}

/* music */
.music{background:var(--ink-1);border-block:1px solid var(--line)}
.releases{display:flex;gap:18px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.releases::-webkit-scrollbar{height:8px}
.releases::-webkit-scrollbar-thumb{background:var(--line)}
.releases::-webkit-scrollbar-track{background:transparent}
.release{flex:0 0 180px;scroll-snap-align:start;display:flex;flex-direction:column;gap:9px}
.cover{display:block;overflow:hidden;background:var(--ink-2);aspect-ratio:1/1}
.release img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.16,1,.3,1)}

/* On the home page the records are a rail beside everything else the company
   does. On their own page they are the evidence, so they get a wall and the
   label is named: a label reading this page is looking for its peers. */
.releases.grid{display:grid;overflow:visible;padding-bottom:0;gap:26px 20px;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:620px){.releases.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.releases.grid{grid-template-columns:repeat(4,1fr)}}
.releases.grid .release{flex:none}
.rel-l{font-size:13.5px;color:var(--text-3);margin-top:-4px}
/* A release links nowhere (the data has no links), so it does not react to the pointer. */
.rel-t{font-family:Archivo,sans-serif;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.rel-a{font-size:13.5px;color:var(--text-2)}

/* proof */
.plaques{display:flex;gap:18px;overflow-x:auto;padding-bottom:16px;margin-bottom:34px;scroll-snap-type:x mandatory}
.plaques::-webkit-scrollbar{height:8px}
.plaques::-webkit-scrollbar-thumb{background:var(--line)}
.plaques::-webkit-scrollbar-track{background:transparent}
.plaque{flex:0 0 150px;margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:11px;text-align:center}
.plaque img{width:100%;height:auto;display:block;border:1px solid #33302B;background:#15140F;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .2s ease}
.plaque:hover img{border-color:#5A5347}
.plaque:hover img{transform:translateY(-3px)}
.plaque span{font-family:Archivo,sans-serif;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--text)}
.cases{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:820px){.cases{grid-template-columns:repeat(3,1fr)}}
/* Each card borrows five shared rows from the grid (subgrid): picture, title,
   text, figure, link. A title or a text that wraps one line longer in one card
   then moves that row in all three, so the figures stand on one line across
   the row instead of wherever each card's text happened to end. */
.case{border:1px solid var(--line);display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;align-content:start;transition:border-color .16s ease;overflow:hidden}
.case-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink-1)}
.case-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.case:hover .case-img img{transform:scale(1.03)}
.case h3{margin:22px 24px 0}
.case p{margin:10px 24px 0}
.case .stat{margin:16px 24px 0;font-size:14.5px;color:var(--text-2);font-family:Archivo,sans-serif}
.case .stat b{font-family:Archivo,sans-serif;font-size:19px;font-weight:800;color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-inline-end:6px}
.case .read{margin:18px 24px 24px}
.case:hover{border-color:#45454E}
.case h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
.case p{color:var(--text-2);font-size:16px;line-height:1.5}
.case .read{font-family:Archivo,sans-serif;font-size:14.5px;font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease}
.case:hover .read{color:var(--accent)}

/* .tech is the opt in. A block about software or technology carries it and
   gets the green surface; anything without it must not be green at all, which
   design/greencheck.mjs enforces on every page. Two blocks wear it today, the
   home page's Studio band and the About software line, and the token family
   is what stops a third from approximating the colour by eye. */
.tech{position:relative;background:var(--tech-bg);border-color:var(--tech-line);color:var(--tech-body)}
.tech ::selection{background:var(--tech);color:var(--tech-ink)}

/* studio, the paper band */
/* Studio is a different product, so it is the one place on the page that does
   not wear the orange accent: it gets its own green and the loudest band on
   the page (owner, 2026-09-14: it must be more strongly marked, try green). */
section.studio{background:var(--tech-bg);color:var(--tech-lead);padding-block:104px;position:relative;border-block:1px solid var(--tech-line)}
section.studio::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--studio)}
section.studio::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 120% at 12% 0%,color-mix(in srgb, var(--tech) 16%, transparent),transparent 62%)}
section.studio .wrap{position:relative;z-index:1}
section.studio .kick{font-family:Archivo,sans-serif;font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--studio);margin:0}
section.studio h2{margin-top:14px;font-size:clamp(32px,5vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
section.studio .lede{margin-top:18px;font-size:18px;line-height:1.58;color:var(--tech-body);max-width:56ch}
section.studio .btn-p{background:var(--studio);color:var(--tech-ink)}
section.studio .btn-g{border-color:var(--tech-line-2);color:var(--tech-lead)}
section.studio .btn-g:hover{border-color:var(--studio)}
section.studio ::selection{background:var(--studio);color:var(--tech-ink)}
/* Option B (owner, 2026-09-23): three points side by side under a hairline,
   stacked on a phone; no frames around them. */
section.studio .points{list-style:none;margin:44px 0 0;padding:0;display:grid;border-top:1px solid var(--tech-line)}
section.studio .points li{padding-block:22px}
section.studio .points li+li{border-top:1px solid var(--tech-line)}
section.studio .points li:last-child{padding-bottom:0}
@media(min-width:900px){
  section.studio .points{grid-template-columns:repeat(3,minmax(0,1fr))}
  section.studio .points li{padding:24px 28px 0}
  section.studio .points li:first-child{padding-inline-start:0}
  section.studio .points li+li{border-top:0;border-inline-start:1px solid var(--tech-line)}}
section.studio .points b{display:block;font-family:Archivo,sans-serif;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--tech-lead)}
section.studio .points span{display:block;margin-top:5px;font-size:16px;line-height:1.55;color:var(--tech-body)}
/* The partner APIs are one strip of names between two hairlines. */
section.studio .strip{margin-top:36px;padding-block:18px;border-block:1px solid var(--tech-line);display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline}
section.studio .api-lab{font-family:Archivo,sans-serif;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tech-mute)}
section.studio .apis{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 26px}
section.studio .apis li{font-family:Archivo,sans-serif;font-size:14px;font-weight:600;color:var(--studio)}
section.studio .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* contact */
.contact{background:var(--ink-1);border-top:1px solid var(--line)}
.contact .inner{display:flex;gap:28px 40px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.markets{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
.markets li{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-block:13px;border-top:1px solid var(--line)}
.markets li:last-child{border-bottom:1px solid var(--line)}
.m-name{font-family:Archivo,sans-serif;font-size:19px;font-weight:800;letter-spacing:-.02em;min-width:5.5ch}
.m-place{font-family:Archivo,sans-serif;font-size:15px;font-weight:500;color:var(--text-2)}
.m-when{margin-inline-start:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.02em;color:var(--text-2);font-variant-numeric:tabular-nums}
.contact h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.03em}
.contact p{color:var(--text-2);margin:20px 0 0;max-width:46ch}

footer.site{border-top:1px solid var(--line);padding-block:44px;background:var(--ink-0)}
footer.site .cols{display:grid;gap:30px 24px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){footer.site .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer.site h3{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:12px}
footer.site a{display:block;font-size:15.5px;color:var(--text);padding-block:10px}
footer.site a:hover{color:var(--accent)}
footer.site img{height:24px;width:auto;margin-bottom:14px}
/* The full logo, the play-button mark over the wordmark, as the owner gave it
   (2026-09-25), with the wordmark in white for the dark footer. */
footer.site img.f-logo{height:76px;margin-bottom:18px}
footer.site .fine{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);color:var(--text-3);font-size:13.5px;
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between}
/* The social marks and the two listings, as the live site carries them: the
   marks are the platforms' own glyphs (Simple Icons, CC0) in the footer's grey,
   each a 44px target, and the listings are the directories' own badges. */
footer.site .social{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 0 -10px}
footer.site .social a{display:grid;place-items:center;width:44px;height:44px;padding:0;color:var(--text-2)}
footer.site .social a:hover{color:var(--accent)}
footer.site .social svg{width:20px;height:20px}
footer.site .listings-h{margin-top:26px}
footer.site .listings{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0}
footer.site .listings a{display:flex;align-items:center;min-height:44px;padding:0;opacity:.85}
footer.site .listings a:hover{opacity:1}
footer.site .listings img{height:auto;max-width:100%;margin:0}
@media(max-width:759px){footer.site .cols>div:last-child{grid-column:1/-1}}
footer.site .listings img[src*="imdb"],footer.site .listings a:last-child img{height:32px;width:auto}
/* Powered by Videomite Tech wears the software green: it names what we built.
   Inline, so it takes the tech colour without the tech block's ground. */
/* A flex box drops the spaces between its text and the <b>, so the gap is
   the space, on whichever side the translation puts the name (Turkish writes
   "Videomite Tech altyapisiyla", the name first). */
footer.site .fine .powered{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0;background:none;border:0;
  font-size:13.5px;color:var(--tech-mute)}
footer.site .fine .powered b{font-family:Archivo,sans-serif;font-weight:700;color:var(--tech)}
footer.site .fine .powered:hover b{color:var(--tech-lead)}

/* Awards. Ten photographs of a real thing, which is the one band on the page
   that is not made of type, so it gets the darkest ground and the plaques get
   the room. They are centred rather than gridded: ten does not divide by the
   column counts a fluid grid lands on, and a shelf is what this is. */
.awards{background:var(--ink-0);padding-block:84px;border-bottom:1px solid var(--line)}
/* The heading block is the site's ordinary .sec-h: heading, then its sentence
   under it, then the link at the end of the row. It had its own two-column
   grid aligned to the bottom, so a one-word heading sat level with the LAST
   line of a five-line paragraph beside it and read as coming after the text
   (owner, 2026-09-22: "naslov je ispod teksta"). */
.awards .more{font-family:Archivo,sans-serif;font-size:15px;font-weight:600;color:var(--text);
  display:inline-flex;gap:8px;align-items:center;min-height:44px;margin-top:4px}
.awards .more:hover{color:var(--accent)}
.awards .more svg{transition:transform .16s ease}
.awards .more:hover svg{transform:translateX(3px)}
.shelf{list-style:none;margin:0;padding:0;display:grid;gap:22px 14px;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.shelf{grid-template-columns:repeat(5,1fr)}}
.shelf li{display:flex;flex-direction:column;gap:11px;text-align:center}
.shelf img{display:block;width:100%;height:auto;border:1px solid #33302B;background:#15140F;
  transition:transform .2s ease,border-color .2s ease}
.shelf li:hover img{transform:translateY(-3px);border-color:#5A5347}
.shelf span{font-family:Archivo,sans-serif;font-size:13.5px;font-weight:600;line-height:1.3;
  color:var(--text)}
@media(prefers-reduced-motion:reduce){.shelf li:hover img{transform:none}}
@media(max-width:700px){.awards{padding-block:56px}}


/* About us. The header is the company's own office (owner, 2026-09-22), which
   is what an About page should open on: not what we handle, but where it is
   handled and by whom. The picture is bright and the type sits on the left,
   so the veil is heavier on that side than on any other page. */
.hero.about .still{object-position:center 46%}
/* The dark is a column, not a corner: every line of the headline has to sit
   on it, and the headline is three lines deep, so a gradient anchored at the
   bottom left leaves the middle lines over a window. Measured per LINE, not
   per block, because a short last line leaves empty box to its right and
   sampling that reports the brightest thing the letters never touch.

   The column was heavier than the headline needed (.93 to 40%, .84 to 58%)
   because it was hiding a generated figure. The owner supplied a real
   photograph of the room on 2026-09-22, so it now does only its own job.
   Four settings were measured rather than judged by eye, each on the
   headline's worst LINE and on the mean luminance of the right third of the
   frame, which is how much picture is actually released:

     old, hiding the figure   13.94:1   0.056
     .86/34 .58/50 .20/68      3.51:1   0.075   too thin, and it passed 3:1
     .88/38 .64/54 .22/70      5.41:1   0.072
     THIS  .90/40 .70/56 .26/72  8.18:1 0.068
     .91/42 .76/58 .30/74     10.86:1   0.062

   The first attempt cleared the 3:1 floor for large text and would have
   shipped on a green check. A headline at 78px on 3.5:1 is a headline you
   squint at, so the floor is not the target: this sits where the rest of the
   site sits, and the right third is still 21% brighter than before. */
.hero.about .veil{background:
  linear-gradient(to right,rgba(9,9,11,.95) 0%,rgba(9,9,11,.9) 40%,rgba(9,9,11,.7) 56%,
    rgba(9,9,11,.26) 72%,rgba(9,9,11,.02) 86%,rgba(9,9,11,0) 100%),
  linear-gradient(to top,rgba(9,9,11,.72) 0%,rgba(9,9,11,.3) 26%,rgba(9,9,11,.03) 62%,
    rgba(9,9,11,.16) 100%)}
@media(max-width:700px){
  .hero.about .veil{background:
    linear-gradient(to top,rgba(9,9,11,.94) 0%,rgba(9,9,11,.82) 38%,rgba(9,9,11,.3) 78%,rgba(9,9,11,.34) 100%),
    linear-gradient(to right,rgba(9,9,11,.6) 0%,rgba(9,9,11,.4) 100%)}
}
/* Management. Two portraits, the same size, on the dark ground: one was shot
   against black and one against a window, and no treatment makes those two
   match, so they are left as they were taken. */
.people{display:grid;gap:34px 30px;grid-template-columns:1fr}
@media(min-width:760px){.people{grid-template-columns:repeat(2,1fr);gap:40px}}
.people img{display:block;width:100%;max-width:300px;height:auto;border:1px solid var(--line)}
.people h3{font-family:Archivo,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.025em;
  margin-top:20px}
.people .role{margin:4px 0 0;font-family:Archivo,sans-serif;font-size:14px;font-weight:600;
  color:var(--accent)}
.people p{margin:14px 0 0;font-size:16.5px;line-height:1.5;color:var(--text-2);max-width:48ch}

/* The closing band is the page's one light band (owner, 2026-09-22: no
   photograph here, a light ground to make it stand out). The office
   photograph moved up to the header, where it is the whole first screen, and
   a second picture behind the last band would only compete with it. */
.joinus{padding-block:84px}
.joinus h2{font-family:Archivo,sans-serif;font-size:clamp(30px,4.4vw,48px);font-weight:800;
  letter-spacing:-.035em;line-height:1.03;max-width:16ch}
.joinus p{margin:20px 0 0;font-size:19px;line-height:1.5;max-width:54ch}
.joinus .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
@media(max-width:700px){.joinus{padding-block:56px}.joinus p{font-size:17px}}

/* The ecosystem diagram, rebuilt on the owner's original (2026-09-22, sent as
   "ovo je originalni dijagram"). Three nodes and TWO labelled directions:
   content travels from the rights holder through us to every window that plays
   it, money travels back the other way. The version this replaces drew one
   unlabelled arrowhead in a bar of its own, attached to nothing, which is why
   "sta znaci ova strelica, gde ide" had no answer. Every line here carries the
   name of what travels on it, so the diagram still reads when the columns
   stack and the arrows turn ninety degrees. */
.ecosystem{display:grid;gap:14px;grid-template-columns:1fr;align-items:stretch}
@media(min-width:1000px){.ecosystem{grid-template-columns:1fr 126px 1.08fr 126px 1fr;gap:0}}
.eco-node{border:1px solid var(--line);background:var(--ink-1);padding:26px 24px}
.eco-node.hub{border-color:var(--accent);background:#141013}
.eco-node h3{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
.eco-node ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.eco-node li{font-size:15.5px;color:var(--text-2);line-height:1.4}
.eco-node.hub li{color:#D6D6D2}
.eco-node .lead{font-size:15.5px;color:var(--text-2);margin:0 0 14px;line-height:1.45}
.eco-group+.eco-group{margin-top:20px}
.eco-group h4{font-family:Archivo,sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:9px}

/* One lane is one direction. The label is part of the lane, never a caption
   somewhere else: an arrow whose meaning lives in another paragraph is the
   bug this replaces. */
.eco-link{display:grid;gap:26px;align-content:center;padding-block:10px}
.lane{display:grid;gap:7px;justify-items:center;color:var(--text-3)}
.lane.money{color:var(--accent)}
.lane span{font-family:Archivo,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase}
.lane .path{position:relative;display:block;background:currentColor}
@media(min-width:1000px){
  .lane .path{width:100%;height:2px;margin-inline:14px}
  .lane .path::after{content:"";position:absolute;top:-4px;width:0;height:0;
    border-block:5px solid transparent}
  .lane.money .path::after{inset-inline-end:-8px;border-inline-start:9px solid currentColor}
  .lane.content .path::after{inset-inline-start:-8px;border-inline-end:9px solid currentColor}
}
/* Stacked, the same two directions become up and down. Content rises to the
   node above, money falls to the node below, and both still say which is
   which, so nothing depends on reading an arrowhead. */
@media(max-width:999px){
  .eco-link{grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding-block:4px}
  .lane{grid-auto-flow:column;align-items:center;justify-items:unset;gap:10px;justify-content:center}
  .lane .path{width:2px;height:46px}
  .lane .path::after{content:"";position:absolute;inset-inline-start:-4px;width:0;height:0;
    border-inline:5px solid transparent}
  .lane.money .path::after{bottom:-8px;border-top:9px solid currentColor}
  .lane.content .path::after{top:-8px;border-bottom:9px solid currentColor}
  /* The two lanes mirror around the centre: arrowheads outside, labels in.
     order is what moves the label, the lane is a grid, not a flex row. */
  .lane.content span{order:2}
}
/* The software line wears Studio's green, not the page's grey (owner,
   2026-09-22: "ovaj deo uradi u nijansama zelene kao na home page"). It names
   the same product the home page's green band names, so it belongs to the
   same colour: green on this site means our own software, which is also why
   the money lane above it is orange. Same three tones as section.studio,
   scaled down to a single line: the var(--tech-bg) ground, the var(--tech-line) hairline, the
   green rule along the top and the radial lift from the leading corner. */
.floor{position:relative;margin-top:14px;border:1px solid var(--tech-line);background:var(--tech-bg);
  padding:22px 26px;display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;overflow:hidden}
.floor::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--studio)}
.floor::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 150% at 6% 0%,color-mix(in srgb, var(--tech) 14%, transparent),transparent 64%)}
/* No 72ch cap here. That measure is for a paragraph somebody reads down;
   this is one sentence in a one-line strip, and the cap was holding it to
   710px inside a band 1138px wide, so it wrapped with a third of the strip
   empty beside it (owner, 2026-09-22: "sto ovo nije sve u jednom redu?").
   One unwrapped line needs 1031px, so it sits on one line from about
   1140px of viewport and wraps below that, which is the band doing the
   deciding instead of an inherited number. */
.floor p{position:relative;z-index:1;margin:0;font-size:15.5px;line-height:1.55;color:var(--tech-body)}
.floor b{color:var(--tech-lead);font-weight:600;font-family:Archivo,sans-serif}
.floor ::selection{background:var(--studio);color:var(--tech-ink)}

/* The contact form (owner, 2026-09-22). One form for every question, opened
   from any page with its topic already chosen and free to change. The topic
   is the first field because it decides the rest: each topic shows only the
   fields it needs, so a buyer asking for avails never sees a music genre.
   Everybody leaves a phone number. */
.ask{padding-block:48px 84px}
.ask-in{display:grid;gap:52px;grid-template-columns:1fr}
@media(min-width:980px){.ask-in{grid-template-columns:minmax(0,1fr) 300px;gap:72px}}
.ask [hidden]{display:none!important}
.topic-field{margin:0 0 30px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.topic-field select{min-height:56px;font-size:17px;max-width:420px}
.topic-hint{font-size:15.5px;color:var(--text-2);min-height:1.5em}
.f-help{font-size:14px;line-height:1.45;color:var(--text-3)}
.f-help b{color:var(--text-2);font-weight:500}
.checks{border:0;padding:0;margin:0;min-width:0}
.checks legend{font-family:Archivo,sans-serif;font-size:13.5px;font-weight:600;color:var(--text-2);padding:0;margin-bottom:4px}
.checks label{display:flex;gap:12px;align-items:center;min-height:44px;font-size:16px;color:var(--text-2);cursor:pointer}
.ask input[type=checkbox]{width:18px;height:18px;min-height:0;flex:none;accent-color:var(--accent);margin:0}
.consent{display:flex;gap:12px;align-items:center;margin-top:22px;font-size:15.5px;color:var(--text-2)}
.consent a{color:var(--text);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.ask-side .menu-lab+.ask-mail{margin-top:0}
.ask-mail{margin:0 0 30px;display:grid;gap:0}
.ask-mail dt{font-size:13.5px;color:var(--text-3);margin-top:8px}
.ask-mail dd{margin:0}
.ask-mail a{display:inline-flex;align-items:center;min-height:44px;font-family:Archivo,sans-serif;font-size:16px;font-weight:600;color:var(--text)}
.ask-mail a:hover{color:var(--accent)}
.ask-office{font-style:normal;font-size:15px;line-height:1.5;color:var(--text-2);margin-bottom:18px}
.ask-office b{display:block;font-family:Archivo,sans-serif;font-weight:700;color:var(--text)}

/* The Videomite Studio page (owner, 2026-09-22, from her own slide). Every
   band is .tech: the whole page is about what we built, so it wears the
   software green and nothing else. */
.st-kick{margin:0 0 14px;font-family:Archivo,sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tech-mute)}
.tech .btn-p{background:var(--studio);color:var(--tech-ink)}
.tech .btn-p:hover{background:#4BDBA0}
.st-band{background:var(--tech-bg);border-bottom:1px solid var(--tech-line);padding-block:72px}
.st-band h2{color:var(--tech-lead)}
.st-band .sec-h p,.st-p{color:var(--tech-body);font-size:17px;line-height:1.55;max-width:58ch}
.st-p{margin:14px 0 0}
.st-grid{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--tech-line);border:1px solid var(--tech-line);
  grid-template-columns:1fr}
@media(min-width:620px){.st-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.st-grid{grid-template-columns:repeat(3,1fr)}}
.st-grid li{display:flex;align-items:center;gap:16px;background:var(--tech-bg-2);padding:22px 22px;
  font-family:Archivo,sans-serif;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--tech-lead)}
.st-grid .ic{width:28px;height:28px;flex:none;color:var(--studio)}
.st-two{display:grid;gap:44px;grid-template-columns:1fr}
@media(min-width:900px){.st-two{grid-template-columns:1fr 1fr;gap:64px}}
.st-two h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.025em}
.st-list{list-style:none;margin:16px 0 0;padding:0}
.st-list li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--tech-line);font-size:16.5px;color:var(--tech-text)}
.st-list li:last-child{border-bottom:1px solid var(--tech-line)}
.st-list li::before{content:"";position:absolute;inset-inline-start:0;top:23px;width:9px;height:2px;background:var(--studio)}
.st-apis{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--tech-line);border:1px solid var(--tech-line)}
.st-apis li{display:grid;place-items:center;text-align:center;background:var(--tech-bg-2);padding:11px 12px;
  font-family:Archivo,sans-serif;font-size:13.5px;font-weight:600;color:var(--studio)}
@media(max-width:430px){.st-apis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.st-cta h2{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-.03em}
.st-cta .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* The Studio header is the site's hero over a pixel sky (owner, 2026-09-22),
   like every other page's picture header. The veil is the software ground,
   heavy where the type sits and thin where the sky is. */
.hero.st-hero .still{object-position:center 40%;image-rendering:pixelated}
.hero.st-hero::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--studio);z-index:1}
.hero.st-hero .veil{background:
  linear-gradient(to right,rgba(6,19,14,.96) 0%,rgba(6,19,14,.93) 44%,rgba(6,19,14,.72) 62%,rgba(6,19,14,.18) 88%),
  linear-gradient(to top,rgba(6,19,14,.9) 0%,rgba(6,19,14,.2) 45%,rgba(6,19,14,0) 100%)}
@media(max-width:700px){.hero.st-hero .veil{background:
  linear-gradient(to top,rgba(6,19,14,.97) 0%,rgba(6,19,14,.93) 55%,rgba(6,19,14,.82) 82%,rgba(6,19,14,.6) 100%)}}
.hero.st-hero h1{color:var(--tech-lead)}
.hero.st-hero p.log{color:var(--tech-text)}
.hero.st-hero .st-kick{margin:0}
/* The mission is the page's loudest sentence after the name. */
.st-mission h2{font-size:clamp(30px,4.6vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.04;max-width:20ch}
.st-mission .st-p{font-size:clamp(18px,1.8vw,21px);max-width:52ch}
/* The layers, drawn as the deck draws them: planes stacked from the services
   at the top to the cloud at the bottom, each with its name on a leader line.
   Each row carries its own plane, so the label can never drift off it. */
.st-layers-list{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:1000px}
.st-layers-list li{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:0 18px;align-items:center}
.st-layers-list svg{display:block;width:100%;height:auto;overflow:visible}
.st-layers-list .plane{stroke-width:1.6;stroke-linejoin:round}
.st-layers-list .axis{stroke:currentColor;stroke-width:1;stroke-dasharray:3 4;opacity:.35}
.st-layers-list .lead{stroke:var(--tech-line-2);stroke-width:1.2}
.st-layers-list .dot{fill:var(--studio)}
.st-layers-list .shadow{fill:rgba(0,0,0,.45)}
.st-layers-list li{color:var(--studio)}
.st-layers-list .l1 .plane{fill:color-mix(in srgb,var(--tech) 30%,transparent);stroke:var(--studio)}
.st-layers-list .l2 .plane{fill:color-mix(in srgb,var(--tech) 22%,transparent);stroke:color-mix(in srgb,var(--tech) 85%,transparent)}
.st-layers-list .l3 .plane{fill:color-mix(in srgb,var(--tech) 15%,transparent);stroke:color-mix(in srgb,var(--tech) 70%,transparent)}
.st-layers-list .l4 .plane{fill:color-mix(in srgb,var(--tech) 10%,transparent);stroke:color-mix(in srgb,var(--tech) 55%,transparent)}
.st-layers-list .l5 .plane{fill:color-mix(in srgb,var(--tech) 6%,transparent);stroke:color-mix(in srgb,var(--tech) 42%,transparent)}
.st-layers-list b{display:block;font-family:Archivo,sans-serif;font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--tech-lead)}
.st-layers-list span{display:block;margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--tech-body);max-width:46ch}
@media(max-width:700px){
  .st-layers-list li{grid-template-columns:88px minmax(0,1fr);gap:0 14px;align-items:start;padding-block:10px}
  .st-layers-list svg{width:126px;max-width:none;margin:0 -38px 0 0}
  .st-layers-list .lead,.st-layers-list .dot{display:none}
}

/* ---- Privacy policy ------------------------------------------------------ */
.legal{padding-block:56px 96px}
.legal-in{display:grid;gap:40px}
@media(min-width:960px){.legal-in{grid-template-columns:240px minmax(0,1fr);gap:72px;align-items:start}
  .legal-toc{position:sticky;top:96px}}
.legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.legal-toc li{border-top:1px solid var(--line)}
.legal-toc li:last-child{border-bottom:1px solid var(--line)}
.legal-toc a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--text-2)}
.legal-toc a:hover{color:var(--text)}
.legal-text{max-width:68ch}
.legal-date{margin:0 0 8px;font-size:14px;color:var(--text-3)}
.legal-text h2{margin-top:44px;font-size:24px;font-weight:800;letter-spacing:-.02em;scroll-margin-top:96px}
.legal-text h3{margin-top:22px;font-size:17px;font-weight:700}
.legal-text p{margin:12px 0 0;color:var(--text-2);line-height:1.65}
.legal-text a:not(.btn){color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#6A6A74}
.legal-text a:not(.btn):hover{text-decoration-color:var(--accent)}
/* A link inside running text still gets a 44px target: the padding reaches
   above and below the line, and the negative margin gives the line its
   height back, so the text does not move. */
.legal-text p a,.legal-text p .linkish{display:inline-block;padding-block:12px;margin-block:-12px}
/* A fact the owner still has to give. Review furniture: it never ships. */
mark.ask{background:#FFE14D;color:#0F0F0F;padding:1px 5px;font-weight:600}

/* ---- Cookie consent ------------------------------------------------------ */
footer.site .fine .fine-btn{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;
  font:inherit;color:var(--text-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#55555E}
footer.site .fine .fine-btn:hover{color:var(--text)}
.cookie{position:fixed;inset-inline:0;bottom:0;z-index:60;padding:16px}
.cookie-in{max-width:760px;margin-inline:auto;background:var(--ink-2);border:1px solid #3A3A42;padding:22px 24px;
  box-shadow:0 18px 48px rgba(0,0,0,.55);display:grid;gap:10px}
.cookie-h{margin:0;font-family:Archivo,sans-serif;font-size:17px;font-weight:700;color:var(--text)}
.cookie-p{margin:0;font-size:15px;line-height:1.55;color:var(--text-2)}
.cookie-p a{color:var(--text);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:12px;margin-block:-12px}
.cookie-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.cookie-acts .btn{min-width:140px;justify-content:center}
@media(max-width:520px){.cookie{padding:10px}.cookie-in{padding:18px}.cookie-acts .btn{flex:1 1 0;min-width:0}}

/* ---- Search and page not found ------------------------------------------- */
.search-form{display:flex;gap:10px;max-width:760px;margin-top:26px}
.search-form input{flex:1 1 auto;min-width:0;min-height:54px;padding:0 16px;background:var(--ink-0);
  border:1px solid #45454E;color:var(--text);font-family:Barlow,system-ui,sans-serif;font-size:18px}
.search-form input::placeholder{color:var(--text-3)}
.search-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.search-form .btn{flex:0 0 auto}
.search-hint{margin:12px 0 0;font-size:14px;color:var(--text-3)}
.search-res{padding-block:30px 96px}
.search-group{margin-top:26px}
.search-group[hidden]{display:none}
.search-h{font-family:Archivo,sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);padding-bottom:12px;border-bottom:1px solid var(--line)}
.search-group .films{margin-top:18px}
.search-pages{list-style:none;margin:0;padding:0}
.search-pages li{border-bottom:1px solid var(--line)}
.search-pages li[hidden]{display:none}
.search-pages a{display:flex;flex-direction:column;gap:3px;padding:16px 0;min-height:44px}
.search-pages b{font-family:Archivo,sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.search-pages span{font-size:15px;color:var(--text-2)}
.search-pages a:hover b{color:var(--accent)}
.search-none{margin-top:24px;max-width:60ch}
.search-none p{margin:10px 0 0;color:var(--text-2)}
.search-none .search-none-h{margin:0;font-family:Archivo,sans-serif;font-size:22px;font-weight:700;color:var(--text)}
.search-none a:not(.btn){color:var(--text);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding-block:12px;margin-block:-12px}
.search-none .acts{margin-top:22px}
@media(max-width:520px){.search-form{flex-direction:column}.search-form .btn{justify-content:center}}

.nf{padding-block:96px 120px;background:var(--ink-1);border-bottom:1px solid var(--line)}
.nf-code{margin:0;font-family:Archivo,sans-serif;font-size:14px;font-weight:800;letter-spacing:.18em;color:var(--accent)}
.nf h1{margin-top:14px;font-size:clamp(34px,5.5vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.nf .lede{font-size:19px;line-height:1.5;color:var(--text-2);max-width:56ch;margin:20px 0 0}
.nf-lab{margin-top:48px}
.nf-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  border-top:1px solid var(--line);max-width:900px}
.nf-links li{border-bottom:1px solid var(--line)}
.nf-links a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding-inline-end:18px;
  font-family:Archivo,sans-serif;font-size:17px;font-weight:600;color:var(--text)}
.nf-links a::after{content:"\2192";color:var(--text-3)}
.nf-links a:hover{color:var(--accent)}
@media(min-width:700px){.nf-links li:nth-child(3n+1) a{padding-inline-start:0}}