/* Commissioner (OFL, Kostas Bartsokas), variable: wght 100-900, FLAR, VOLM, slnt.
   Subset from directions/C/fonts/Commissioner-VF.ttf by tools/make_commissioner.py; ranges mirror that script. */
@font-face{font-family:"Commissioner";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/commissioner-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-017F,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+FEFF,U+FFFD,U+00D7}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/commissioner-greek-cyr.woff2) format("woff2");
  unicode-range:U+0370-03FF,U+1F00-1FFF,U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F}

/* Self-hosted from Google Fonts by tools/fetch_fonts.py. OFL: /assets/fonts/OFL-*.txt */
/* jetbrains-mono cyrillic-ext */ @font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* jetbrains-mono cyrillic */ @font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* jetbrains-mono greek */ @font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
/* jetbrains-mono latin-ext */ @font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin-ext.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;}
/* jetbrains-mono latin */ @font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin.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;}
/* readex-pro arabic */ @font-face {font-family: 'Readex Pro'; font-style: normal; font-weight: 160 700; font-display: swap; src: url(/assets/fonts/readex-pro-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
/* readex-pro latin-ext */ @font-face {font-family: 'Readex Pro'; font-style: normal; font-weight: 160 700; font-display: swap; src: url(/assets/fonts/readex-pro-latin-ext.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;}
/* readex-pro latin */ @font-face {font-family: 'Readex Pro'; font-style: normal; font-weight: 160 700; font-display: swap; src: url(/assets/fonts/readex-pro-latin.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;}
/* kufam arabic */ @font-face {font-family: 'Kufam'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/kufam-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
/* kufam latin-ext */ @font-face {font-family: 'Kufam'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/kufam-latin-ext.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;}
/* kufam latin */ @font-face {font-family: 'Kufam'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/kufam-latin.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;}

/* ==========================================================================================
   Webixio v3 · design tokens · Direction C "Overprint" + Direction A's dark stage for film
   Source of truth: directions/C/palette.json (roles, contrast), directions/C/fonts.json.
   Rules that tokens alone can't enforce:
   - Flat inks only. Two inks per screen plus their overlap; neutrals don't count.
   - Cobalt+Saffron = work · Cobalt+Vermilion = the brand · Vermilion+Saffron = products / on Ink.
   - Never: Ink on Cobalt, Paper on Vermilion, Vermilion or Saffron as text on Paper, Cobalt on Ink.
   - CTA lock: on Paper primary = Cobalt/Paper; on Ink or Cobalt primary = Saffron/Ink; secondary = 2px outline.
   ========================================================================================== */
:root{
  /* ---- palette (palette.json tokens) ---- */
  --paper:#F7F2E8;      /* ground; light text on Cobalt / Ink / Overprint */
  --ink:#14121A;        /* text; dark stage; text on Vermilion and Saffron */
  --cobalt:#2A3BFF;     /* ink 1: fields, primary buttons, links on Paper */
  --vermilion:#FF5533;  /* ink 2: fields, shapes, stickers (never text on Paper) */
  --saffron:#FFC933;    /* ink 3: highlight fields, tags, big type on Cobalt / Ink */
  --overprint:#2A1333;  /* Cobalt x Vermilion crossing only */
  --op-cs:#2A2E33;      /* Saffron x Cobalt crossing */
  --op-vs:#FF430A;      /* Saffron x Vermilion crossing */
  --stone:#66605A;      /* secondary text on Paper (5.56:1) */
  --rule:#DDD4C2;       /* hairlines, outlines (non-text) */
  /* stage (Direction A treatment, re-inked for C): Ink ground, raised wells, hairlines, quiet text */
  --stage:#14121A;
  --stage-2:#1D1B24;
  --stage-line:#34313D;
  --stage-quiet:#A9A294; /* 7.4:1 on Ink */
  --paper-2:#EFE8DA;    /* hover wash on Paper */

  /* ---- roles ---- */
  --bg:var(--paper); --fg:var(--ink); --fg-2:var(--stone); --line:var(--rule);
  --link:var(--cobalt); --focus:var(--cobalt);

  /* ---- type ---- */
  --f-display:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --f-ar-display:"Kufam","Readex Pro",system-ui,sans-serif;
  --f-ar-body:"Readex Pro",system-ui,sans-serif;
  --w-display:850; --w-strong:700; --w-body:400;
  --volm:40;                    /* display VOLM at rest (fonts.json: 40) */
  /* fluid scale: 390 px phone -> 1440 px desktop */
  --fs-mega:clamp(64px, 13.2vw, 212px);   /* hero tagline */
  --fs-d1:clamp(56px, 10.4vw, 168px);     /* section titles ("Work.") */
  --fs-d2:clamp(44px, 6.6vw, 108px);
  --fs-d3:clamp(34px, 4.4vw, 68px);
  --fs-h3:clamp(24px, 2.4vw, 36px);
  --fs-h4:clamp(19px, 1.6vw, 24px);
  --fs-lead:clamp(19px, 1.65vw, 25px);
  --fs-body:17px;
  --fs-small:15px;
  --fs-mono:12px;
  --lh-tight:.9; --lh-snug:1.08; --lh-body:1.5;
  --tr-mega:-.045em; --tr-d:-.035em; --tr-h:-.02em;

  /* ---- space ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --gut:clamp(16px, 4.2vw, 56px);          /* side gutter: 16 px on phones */
  --max:1440px;                             /* content max width (+ gutters) */
  --sec:clamp(80px, 10vw, 156px);           /* section padding */
  --hdr:64px;
  --tap:44px;                               /* minimum tap target */

  /* ---- radii ---- */
  --r1:8px; --r2:14px; --r3:22px; --r4:32px; --rp:999px;

  /* ---- motion (120 BPM: one beat = .5 s) ---- */
  --beat:.5s;
  --ease:cubic-bezier(.2,.7,.1,1);          /* out, confident */
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --d1:.18s; --d2:.35s; --d3:.6s; --d4:.9s; --d5:1.2s;
  --rise:28px;                              /* reveal travel */

  /* ---- layers ---- */
  --z-hdr:50; --z-sheet:60; --z-skip:70;
}
@media (min-width:1000px){ :root{ --hdr:76px; } }
@media (prefers-reduced-motion:reduce){ :root{ --rise:0px; --d3:.01s; --d4:.01s; --d5:.01s; } }

/* ==========================================================================================
   Webixio v3 · site.css · components (tokens in tokens.css)
   One stylesheet for both directions: logical properties only; media is never mirrored.
   ========================================================================================== */

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 24px);--dir:1}
html[dir=rtl]{--dir:-1}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--w-body) var(--fs-body)/var(--lh-body) var(--f-body);
  font-variation-settings:"FLAR" 0,"VOLM" 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:clip}
html[lang=ar] body{font-family:var(--f-ar-body)}
html[lang=ar]{--f-mono:"JetBrains Mono","Readex Pro",ui-monospace,monospace}
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar] :is(.eyebrow,.hero__desc,.spec,.tile__meta,.crumbs ol,.fgroup__l,.grp__c,.fh__eyebrow,.chip,.ftr h2,.ftr__legal,.prog__n,.prog__f,.incl__c,.finder__count,.fam__n,.wwc__n,.famnav__n,.prod__label,.ftr__meta .mono){text-transform:none;font-size:13px}
html[lang=ar] bdi,[lang=ar] bdi{font-family:var(--f-body)}
[lang=ar]{font-family:var(--f-ar-body)}
img,video,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.08em}
p{margin:0}
h1,h2,h3{margin:0;font-weight:inherit}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.no-js .js-only{display:none!important}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
::selection{background:var(--saffron);color:var(--ink)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.mono,.eyebrow,.tags li,.chip{font-family:var(--f-mono)}
.mail{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:var(--tap)}
.arr{display:inline-block;transition:translate var(--d2) var(--ease)}
[dir=rtl] .arr:not(.arr--t){transform:scaleX(-1)}  /* template arrows flip; copy arrows (.arr--t) are already mirrored in ar.md */
.skip{position:fixed;z-index:var(--z-skip);inset-inline-start:12px;top:-100px;padding:12px 18px;background:var(--ink);color:var(--paper);border-radius:var(--rp);font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ---------------------------------------------------------------- display type */
.d1,.d2,.d3,.hero__h,.svh__h,.fh__h,.closing__h,.cta__h,.ftr__tag,.endcard__t,.sheet__nav a,
.prod__name,.fam__name,.grp__name,.grp__n,.step__n,.prog__t,.wwc__name,.famnav__name,.ink__name,.step__t,.tile__name{
  font-family:var(--f-display);font-weight:var(--w-display);font-variation-settings:"FLAR" 0,"VOLM" var(--volm);
  letter-spacing:var(--tr-d);line-height:var(--lh-tight)}
html[lang=ar] :is(.d1,.d2,.d3,.hero__h,.svh__h,.fh__h,.closing__h,.cta__h,.ftr__tag,.endcard__t,.sheet__nav a,.prod__name,.fam__name,.grp__name,.prog__t,.wwc__name,.famnav__name,.ink__name,.step__t,.tile__name){
  font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.12}
.d1{font-size:var(--fs-d1)}
.d2{font-size:var(--fs-d2)}
.d3{font-size:var(--fs-d3);letter-spacing:var(--tr-h)}
.lead{font-size:var(--fs-lead);line-height:1.38;max-width:36ch}
:is(h1,h2,h3,.d1,.d2,.d3){text-wrap:balance}
/* display fit (QA 2026-10-01: "Конфиденциальность." ran 180 px out of /ru/privacy/, "Характеристики." into the spec
   table, Greek and Arabic hero words past their columns). words() wraps every kinetic headline in .fit.fwNN: NN = its
   longest unbreakable word in tenths of an em, measured at build time in the real display fonts (sitegen/fit.py;
   fit.css turns the class into --fw). The headline keeps its natural size until that word would be wider than its
   column, then scales just enough to fit it: font-size = min(1em, column / --fw). Nothing is squeezed, no letter is cut.
   The column is the nearest size container: the box that holds the headline (below), or the headline itself when it
   sits in a multi-column grid. A host's line measure (--measure, in ch of the fitted size) never gets narrower than its
   longest word. overflow-wrap/hyphens are only the last resort for a word the build could not measure. */
.fit{display:block;font-size:min(1em,calc(100cqi / var(--fw,1)));max-width:max(var(--measure,100%),calc(var(--fw,1) * 1em));
  overflow-wrap:anywhere}
.fit .wi{-webkit-hyphens:auto;hyphens:auto}   /* a kinetic word is one inline-block: it only hyphenates if wider than a line */
:has(> * > .fit){container-type:inline-size}
:is(.iu__in,.specs__in,.wh__in,.cta__in):has(> * > .fit){container-type:normal}
:is(.iu__in,.specs__in,.wh__in,.cta__in) > :has(> .fit){container-type:inline-size}
:has(> .fit){min-width:0}
/* card-sized display names are not kinetic: a word longer than its card breaks rather than pushing the card out */
:is(.prod__name,.grp__name,.wwc__name,.famnav__name,.ink__name,.step__t,.tile__name,.prog__t,.iu__name,.nextc__name,.acc__name,.pv__h){overflow-wrap:break-word}
/* descender room (2026-10-01: at 1440 "Privacy." / "Απόρρητο." sat on the /privacy/ lede). Display type is set at
   line-height .86-.94, so descenders (y p ρ ς ξ у ц д) hang about .17em below the last line box, straight into the
   small gap before the text that follows. A tight-set heading followed directly by its own text (lede, sub, count,
   promise, tagline) keeps --desc x its size free under the line box, so the layout's gap starts below the
   descenders. Stacked heads pad the heading; heads that sit side by side and align to the end (.sec__head,
   .wh__in >= 1000) put the room on the follower's margin-top instead, which only acts once it wraps below.
   Arabic display lines are already 1.12-1.2 high. Checked on every page x language x 1440/1024/390 by pixel scan
   (heading ink bottom -> next ink top). */
:root{--desc:.16}
html[lang=ar]{--desc:.08}
:is(.pv__title,.sf__head :is(.d1,.d2),.incl__head .d2,.tk__h,.pblk__name):has(+ :is(p,.lead)){padding-bottom:calc(var(--desc) * 1em)}
@media (min-width:900px){.grp__head .grp__name:has(+ .grp__p){padding-bottom:calc(var(--desc) * 1em)}}
.sec__head > .d1 + .lead{margin-top:calc(var(--fs-d1) * var(--desc))}
.sec__head > .d2 + .lead{margin-top:calc(var(--fs-d2) * var(--desc))}
.wh__h + .wh__sub{margin-top:calc(var(--fs-mega) * var(--desc))}
p,li,figcaption{text-wrap:pretty}
a > .arr,button > .arr{margin-inline-start:.28em}
.btn > .arr{flex:none}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--fs-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}

/* kinetic words: each word rises and "flexes" from wght 480 / FLAR 100 to 850 / FLAR 0 (fonts.json motion rule) */
.w{display:inline-block;vertical-align:top;overflow:clip;padding:.14em .04em .2em;margin:-.14em -.04em -.2em}
.wi{display:inline-block}
.io :is(.rv,[data-kinetic],.hero) .wi{transform:translateY(112%);font-variation-settings:"wght" 480,"FLAR" 100,"VOLM" var(--volm)}
.io :is(.rv,[data-kinetic],.hero).in .wi{transform:none;font-variation-settings:"wght" 850,"FLAR" 0,"VOLM" var(--volm);
  transition:transform var(--d4) var(--ease) calc(var(--i,0) * 70ms + var(--delay,0ms)),
             font-variation-settings var(--d5) var(--ease) calc(var(--i,0) * 70ms + var(--delay,0ms) + 120ms)}
html[lang=ar].io :is(.rv,[data-kinetic],.hero) .wi{font-variation-settings:normal}

/* reveals (only when IntersectionObserver runs: .io on <html>) */
.io .rv{opacity:0;transform:translateY(var(--rise));transition:opacity var(--d4) var(--ease),transform var(--d4) var(--ease)}
.io .rv.in{opacity:1;transform:none}
@media (hover:none){:root{--rise:14px}}

/* ---------------------------------------------------------------- buttons */
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 26px;border-radius:var(--rp);
  font:700 16px/1.1 var(--f-body);font-variation-settings:"FLAR" 0,"VOLM" 0;text-decoration:none;
  max-width:100%;padding-block:8px;text-align:center;text-wrap:balance;   /* one line unless the label is wider than its column */
  border:2px solid transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--d1) var(--ease),background-color var(--d2) var(--ease),color var(--d2) var(--ease),border-color var(--d2) var(--ease)}
.btn:active{transform:scale(.97)}
.btn--sm{min-height:var(--tap);padding:0 18px;font-size:15px}
.btn--lg{min-height:60px;padding:0 32px;font-size:18px}
.btn--primary{background:var(--cobalt);color:var(--paper)}
.btn--saff{background:var(--saffron);color:var(--ink)}
.btn--line{border-color:currentColor;color:inherit;background:transparent}
@media (hover:hover){
  .btn--primary:hover{background:#1A2AE6}
  .btn--saff:hover{background:#FFD65C}
  .btn--line:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
  .btn:hover .arr{translate:calc(4px * var(--dir)) 0}
}
html[lang=ar] .btn{font-family:var(--f-ar-body);font-weight:600}

/* ---------------------------------------------------------------- tags, chips, crumbs */
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.tags li{font-size:11.5px;line-height:1;letter-spacing:.07em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:var(--rp);
  padding:6px 9px 5px;color:var(--fg-2);white-space:nowrap}
html[lang=ar] .tags li{font-family:var(--f-ar-body);letter-spacing:0;font-size:12px}
.tags--on-dark li{color:var(--stage-quiet)}
.tags--on-cobalt li{color:var(--paper)}
.tags--quiet li{border-color:var(--rule)}
.chip{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--rp);background:var(--ink);color:var(--paper);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.chip--saff{background:var(--saffron);color:var(--ink)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{content:"/";color:var(--rule)}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);text-decoration:none}
.crumbs a:hover{color:var(--cobalt)}
.crumbs [aria-current]{color:var(--fg)}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:var(--z-hdr);background:var(--paper);transition:box-shadow var(--d2) var(--ease),transform var(--d2) var(--ease)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr__mail{font-family:var(--f-mono);font-weight:500;font-size:13px;letter-spacing:.02em}
@media (max-width:479px){.hdr__mail{display:none}}
.hdr.is-scrolled{box-shadow:0 1px 0 var(--rule)}
.hdr__in{display:flex;align-items:center;gap:12px;height:var(--hdr)}
.brand{display:inline-flex;align-items:center;min-height:var(--tap);margin-inline-end:auto;border-radius:6px}
.brand img{height:24px;width:auto}
.hdr__nav{display:none}
.hdr__nav ul{list-style:none;display:flex;gap:2px}
.hdr__nav a{display:flex;align-items:center;min-height:var(--tap);padding:0 16px;border-radius:var(--rp);font-weight:600;font-size:15.5px;text-decoration:none;transition:background-color var(--d2)}
.hdr__nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--ink);border-radius:0}
@media (hover:hover){.hdr__nav a:hover{background:var(--paper-2)}}
.hdr__end{display:flex;align-items:center;gap:8px}
.hdr__start .lg{display:none}
.lang{position:relative}
.lang summary,.lang--solo{display:flex;align-items:center;gap:7px;min-height:var(--tap);padding:0 12px;border-radius:var(--rp);
  font:500 13px var(--f-mono);letter-spacing:.04em;cursor:pointer;list-style:none;color:var(--fg)}
.lang--solo{cursor:default;color:var(--fg-2)}
.lang summary::-webkit-details-marker{display:none}
.lang svg{width:17px;height:17px}
.lang ul{position:absolute;inset-inline-end:0;top:calc(100% + 6px);list-style:none;margin:0;padding:6px;min-width:190px;background:var(--ink);color:var(--paper);border-radius:var(--r2)}
.lang ul a{display:flex;gap:10px;align-items:center;min-height:var(--tap);padding:0 12px;border-radius:10px;text-decoration:none;font-size:15px}
.lang ul a b{font:500 12px var(--f-mono);min-width:28px}
.lang ul a[aria-current]{background:var(--overprint)}
.hdr__lang{display:none}
.hdr__menu{min-width:var(--tap)}
@media (min-width:560px){.hdr__lang{display:block}.hdr__lang.lang--solo{display:flex}}
@media (min-width:700px){.hdr__start .lg{display:inline}.hdr__start .sm{display:none}.brand img{height:28px}}
@media (min-width:1000px){.hdr__nav{display:block}.hdr__menu{display:none}.hdr__in{gap:20px}}

/* full-screen menu sheet (Ink) */
.sheet{position:fixed;inset:0;z-index:var(--z-sheet);background:var(--ink);color:var(--paper);--fg:var(--paper);--bg:var(--ink);--focus:var(--saffron);
  display:flex;flex-direction:column;overflow-y:auto;padding-bottom:max(28px,env(safe-area-inset-bottom))}
.sheet__top{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);width:100%}
.sheet__nav{width:100%;margin-top:clamp(16px,6vh,56px)}
.sheet__nav ul{list-style:none}
.sheet__nav a{display:flex;align-items:center;min-height:68px;font-size:clamp(40px,11vw,72px);text-decoration:none;border-bottom:1px solid var(--stage-line)}
.sheet__foot{margin-top:auto;padding-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;width:100%}
.sheet__langs{display:flex;gap:6px}
.sheet__langs a,.ftr__langs a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);padding:0 10px;
  border:1.5px solid currentColor;border-radius:var(--rp);font:500 13px var(--f-mono);text-decoration:none}
.sheet__langs a[aria-current],.ftr__langs a[aria-current]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.js .sheet{transition:opacity var(--d2) var(--ease),transform var(--d3) var(--ease)}
.js .sheet.is-enter{opacity:0;transform:translateY(-12px)}
.js .sheet .sheet__nav li{transition:transform var(--d3) var(--ease) calc(var(--i,0)*50ms),opacity var(--d3) var(--ease) calc(var(--i,0)*50ms)}
.js .sheet.is-enter .sheet__nav li{transform:translateY(24px);opacity:0}

/* ---------------------------------------------------------------- hero: the overprint stage */
.hero{position:relative}
.hero__stage{position:relative;height:min(76svh,640px);min-height:480px;overflow:hidden;isolation:isolate;background:var(--vermilion);
  --hz0:44%;--hz1:52%}
@media (min-width:700px){.hero__stage{height:clamp(560px,calc(100svh - var(--hdr) - 168px),1000px)}}
.hero__set{position:absolute;inset:-8% 0;will-change:transform}
.hero__set .pic,.hero__set img{width:100%;height:100%}
.hero__set img{object-fit:cover;object-position:var(--hero-pos,64% 34%)}
@media (max-width:699px){.hero__set img{object-position:68% 40%}}
.hero__flat{position:absolute;inset:0;background:var(--vermilion)}
.hero__flat::after{content:"";position:absolute;inset:0;background:var(--cobalt);clip-path:polygon(0 var(--hz0),100% var(--hz1),100% 100%,0 100%)}
.hero__h{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  padding:clamp(18px,3vw,40px) var(--gut) clamp(26px,3.6vw,52px);font-size:clamp(56px,11.2vw,190px);line-height:.86;letter-spacing:var(--tr-mega);
  color:var(--ink);pointer-events:none}
.hero__stage[data-top=paper] > .hero__h{color:var(--paper)}
.hero__l{display:block;max-width:100%;text-wrap:balance}
html[lang=ar] .hero__h{font-size:clamp(50px,8.4vw,150px);line-height:1.08}
@media (max-width:699px){html[lang=ar] .hero__h{font-size:min(14vw,68px)}}
.hero__ko{position:absolute;inset:0;z-index:3;pointer-events:none;clip-path:polygon(0 var(--hz0),100% var(--hz1),100% 100%,0 100%)}
.hero__ko .hero__h{color:var(--paper)}
.hero__ko .hero__l1{visibility:hidden}
.hero__l1{transform:translateY(calc(-1 * var(--l1-up,0px)))}
.hero__stage[data-bottom=ink] .hero__ko .hero__h{color:var(--ink)}
@media (max-width:699px){.hero__h{font-size:min(16.4vw,84px);line-height:.88}}
.hero__settag{position:absolute;z-index:4;top:16px;inset-inline-end:var(--gut)}
.hero__settag li{color:var(--ink);border-color:var(--ink)}
/* phones: on the wall just under line 1 (clear of the kite and of line 2), on a Paper chip */
@media (max-width:699px){.hero__settag{top:calc(clamp(18px,3vw,40px) + min(16.4vw,84px) * .88 + 14px)}.hero__settag li{background:var(--paper);border-color:var(--paper)}}
.hero__now{position:absolute;z-index:4;inset-inline-end:var(--gut);top:clamp(52px,6vw,84px);display:none;flex-direction:column;align-items:flex-end;gap:10px}
@media (min-width:700px){.hero__now{display:flex}}
.hero__screen{width:clamp(112px,10.5vw,168px);aspect-ratio:9/16;border-radius:18px;background:var(--ink);padding:5px;box-shadow:8px 8px 0 var(--ink)}
.hero__screen .vid{height:100%;border-radius:13px;overflow:hidden}
.hero__cap{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-inline-size:min(330px,36vw)}  /* the mixed reel carries 5 tags: wrap them beside the screen, never across the set */
.hero__cap .tags li{color:var(--paper);background:var(--ink);border-color:var(--ink)}  /* solid Ink pills: the mixed reel's tags read over wall, floor or kite */
.hero__below{display:grid;gap:22px;padding-block:clamp(22px,2.6vw,34px) clamp(30px,3vw,40px);border-bottom:1px solid var(--rule)}
.hero__desc{font:500 var(--fs-mono)/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-bottom:8px}
.hero__sub{font-size:var(--fs-lead);line-height:1.34;max-width:38ch}
.spec{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;font:500 12px/1.4 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--stone)}
.spec div{display:flex;gap:8px}
.spec dt{color:var(--stone)}
.spec dd{margin:0;color:var(--ink)}
.spec [lang=ar]{font-family:var(--f-ar-body);font-size:13px;text-transform:none;letter-spacing:0}
@media (min-width:1000px){
  .hero__below{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:48px}
  .spec{grid-column:1 / -1;padding-top:18px;border-top:1px solid var(--rule)}
}
/* entrance: the set settles, then the words flex in on the beat */
.io .hero .hero__set{transform:scale(1.06);transition:transform 1.6s var(--ease)}
.io .hero.in .hero__set{transform:none}
.io .hero .hero__l2{--delay:var(--beat)}
.io .hero .hero__now{opacity:0;transform:translateY(16px);transition:opacity var(--d4) var(--ease) 1.1s,transform var(--d4) var(--ease) 1.1s}
.io .hero.in .hero__now{opacity:1;transform:none}

/* ---------------------------------------------------------------- video + plates */
.vid{position:relative;width:100%;height:100%;background:var(--ink)}
.vid video{width:100%;height:100%;object-fit:cover}
.pp{position:absolute;z-index:3;inset-inline-start:8px;bottom:8px;width:var(--tap);height:var(--tap);border-radius:50%;border:0;padding:0;
  display:grid;place-items:center;background:var(--paper);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--d1) var(--ease)}
.pp:active{transform:scale(.92)}
.pp svg{width:15px;height:15px;fill:currentColor;grid-area:1/1}
.pp svg:last-child{display:none}
.pp[aria-pressed=true] svg:first-child{display:none}
.pp[aria-pressed=true] svg:last-child{display:block}
.no-js .pp{display:none}
.hero__screen .pp{width:36px;height:36px;inset-inline-start:6px;bottom:6px}
/* 36 px inside the 168 px hero screen, but the tap area is padded to 44 px */
.hero__screen .pp::after{content:"";position:absolute;inset:-4px}

.plate{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r3);background:var(--pa)}
.plate--cobalt{--pa:var(--cobalt)}.plate--vermilion{--pa:var(--vermilion)}.plate--saffron{--pa:var(--saffron)}
.plate > .pic{position:absolute;inset:0}
.plate > .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;transition:transform 1.2s var(--ease)}
.inset{position:absolute;z-index:2;inset-inline-end:6%;bottom:6%;width:60%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;
  background:var(--ink);box-shadow:7px 7px 0 var(--ink);border:3px solid var(--ink)}
[dir=rtl] .inset{box-shadow:-7px 7px 0 var(--ink)}
.inset--vert{width:30%;aspect-ratio:9/16;border-radius:14px;border-width:4px}
.inset--top{bottom:auto;top:7%;inset-inline-end:auto;inset-inline-start:6%}
[dir=ltr] .inset--top{box-shadow:7px 7px 0 var(--ink)}
.inset .vid{border-radius:inherit}
/* a plate that IS the real-UI film (home: the HelpU tile, whose still sits on its products card further down). The
   recording's own Recordly backdrop is Vermilion over Cobalt, so the crop keeps the window's start edge and its
   headline in frame and lets the rest of the screen run off the card (content is LTR UI in every language). */
.plate__film{position:absolute;inset:0}
.plate__film .vid{background:var(--pa)}
.plate__film video{object-position:4% 50%;transition:transform 1.2s var(--ease)}

/* flat-ink panel: the designed stand-in for a missing image */
.ink{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(16px,2.2vw,30px);overflow:hidden;background:var(--ia);color:var(--it)}
.ink--cobalt{--ia:var(--cobalt);--it:var(--paper)}
.ink--vermilion{--ia:var(--vermilion);--it:var(--ink)}
.ink--saffron{--ia:var(--saffron);--it:var(--ink)}
.ink--on-cobalt{--ib:var(--cobalt)}.ink--on-vermilion{--ib:var(--vermilion)}.ink--on-saffron{--ib:var(--saffron)}
.ink__bar{position:absolute;inset:0;background:var(--ib);clip-path:polygon(58% -2%,84% -2%,108% 46%,82% 46%)}
.ink__name{position:relative;font-size:clamp(34px,4.6vw,72px);max-width:9ch;line-height:.9}

/* ---------------------------------------------------------------- sections */
.sec{padding-block:var(--sec)}
.sec__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:clamp(40px,5.4vw,88px)}
.more{display:inline-flex;align-items:center;gap:.4em;min-height:var(--tap);font-weight:700;font-size:17px;text-decoration:none;
  border-bottom:2px solid currentColor;padding-top:4px}
@media (hover:hover){.more:hover .arr,.row__act a:hover .arr{translate:calc(4px * var(--dir)) 0}}

/* ---------------------------------------------------------------- work tiles */
.tiles{list-style:none;display:grid;gap:clamp(44px,5vw,72px) clamp(16px,2vw,28px);grid-template-columns:1fr}
@media (min-width:700px){.tiles{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tiles > li:nth-child(3n+2){margin-top:clamp(64px,8vw,136px)}
  .tiles--2{grid-template-columns:repeat(2,1fr)}
  .tiles--2 > li:nth-child(2){margin-top:0}
  .tiles--2 .tile__media .plate{aspect-ratio:16/11}
}
.tile{position:relative;display:flex;flex-direction:column;gap:18px}
.tile__media .plate{aspect-ratio:4/5}
.tile--sm .tile__media .plate{aspect-ratio:4/4.4}
@media (max-width:699px){.tile--sm .tile__media .plate{aspect-ratio:4/3}}
.tile__txt{display:grid;gap:10px}
.tile__meta{font:500 12px/1.4 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--stone)}
.tile__h{font-size:clamp(24px,2.1vw,32px);line-height:1.06;letter-spacing:-.02em}
.tile__a{text-decoration:none}
.tile__a::after{content:"";position:absolute;inset:0;z-index:1}
.tile__name{display:inline;font-size:1em}
.tile__out{font-weight:500;color:var(--stone);font-variation-settings:"VOLM" 0}
.tile__media{position:relative}
.sticker{position:absolute;z-index:4;top:14px;inset-inline-end:14px;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 16px;
  border-radius:var(--rp);background:var(--saffron);color:var(--ink);font-weight:800;font-size:15px;text-decoration:none;transform:rotate(-5deg);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  transition:transform var(--d2) var(--ease-spring)}
[dir=rtl] .sticker{transform:rotate(5deg)}
@media (hover:hover){.sticker:hover{transform:rotate(0) scale(1.06)}}
.sticker:active{transform:rotate(0) scale(.96)}
.tile .pp,.tile .inset{z-index:2}
.tile .pp{z-index:4}
@media (hover:hover){
  .tile:hover :is(.plate > .pic img,.plate__film video){transform:scale(1.04)}
  .tile:hover .tile__name{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
}

/* ---------------------------------------------------------------- products */
.sec__head--split .lead{max-width:30ch}
.prods{background:var(--paper)}
.prods__grid{display:grid;gap:clamp(48px,5vw,64px) clamp(16px,2vw,28px)}
@media (min-width:900px){.prods__grid{grid-template-columns:1fr 1fr}}
.prod{display:flex;flex-direction:column;gap:22px}
.prod__media .plate{aspect-ratio:4/3.1}
.prod__txt{display:grid;gap:12px;justify-items:start}
.prod__label{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:var(--rp);padding:6px 10px}
.prod__name{font-size:var(--fs-d3);letter-spacing:var(--tr-h)}
.prod__line{font-size:var(--fs-lead);line-height:1.35;max-width:32ch}
.prod__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px}

/* ---------------------------------------------------------------- everything we make (16 families) */
.fams{list-style:none;display:grid;border-top:2px solid var(--ink)}
@media (min-width:1000px){.fams{grid-auto-flow:column;grid-template-rows:repeat(8,auto);grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,48px)}}
.fam{position:relative;isolation:isolate;display:grid;grid-template-columns:28px 56px minmax(0,1fr) 28px;align-items:center;gap:14px;
  min-height:92px;padding:14px 10px;border-bottom:1px solid var(--rule);text-decoration:none;transition:color var(--d2) var(--ease)}
.fam::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cobalt);transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--d3) var(--ease)}
.fam:is(:hover,:focus-visible,:active){color:var(--paper)}
.fam:is(:hover,:focus-visible,:active)::before{transform:none}
.fam:is(:hover,:focus-visible,:active) .fam__p,.fam:is(:hover,:focus-visible,:active) .fam__n{color:var(--paper)}
.fam__n{font:500 12px var(--f-mono);color:var(--stone)}
.fam__pic{position:relative;width:56px;height:56px;border-radius:12px;overflow:hidden}
.fam__pic img{width:100%;height:100%;object-fit:cover}
.fam__pic.ink{position:relative;padding:6px}.fam__pic .ink__name{font-size:18px}
.fam__txt{display:grid;gap:4px;min-width:0}
.fam__name{font-size:clamp(26px,2.5vw,38px);line-height:1;transition:font-variation-settings var(--d3) var(--ease)}
.fam__p{font-size:15px;line-height:1.35;color:var(--stone)}
.fam__go{font-size:22px;justify-self:end;transition:transform var(--d2) var(--ease)}
[dir=rtl] .fam__go{transform:scaleX(-1)}
@media (hover:hover){.fam:hover .fam__go{transform:translateX(calc(6px * var(--dir)))}[dir=rtl] .fam:hover .fam__go{transform:scaleX(-1) translateX(6px)}}
.make__foot{margin-top:clamp(36px,4vw,56px)}

/* ---------------------------------------------------------------- the dark stage (film) */
.stagefilm{background:var(--stage);color:var(--paper);--bg:var(--ink);--fg:var(--paper);--fg-2:var(--stage-quiet);--focus:var(--saffron);
  padding-block:var(--sec) calc(var(--sec) * .7);overflow:hidden}
.sf__head{display:grid;gap:18px;justify-items:start;margin-bottom:clamp(36px,5vw,72px)}
/* dark-stage plate opener (film-plate-1): the title sits in the dark, the lit screen waits on the right */
.stagefilm--plate{padding-top:0}
.sf__plate{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(440px,50vw,780px);margin-bottom:clamp(40px,5vw,80px);isolation:isolate}
.sf__platepic{position:absolute;inset:0;z-index:-1}
.sf__platepic .pic,.sf__platepic img{width:100%;height:100%}
.sf__platepic img{object-fit:cover;object-position:62% 50%}
.sf__plate .sf__head{margin:0;padding-bottom:clamp(28px,4vw,64px);width:100%}
.sf__plate .sf__head .lead{color:var(--paper)}
.sf__platetag{position:absolute;top:18px;inset-inline:0;display:flex;justify-content:flex-end}
@media (max-width:699px){
  .sf__plate{min-height:min(118vw,560px)}
  .sf__platepic img{object-position:82% 30%}
}
.sf__head .lead{color:var(--stage-quiet)}
.sf__plate--case .sf__platepic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--stage) 0%,rgba(20,18,26,.8) 40%,rgba(20,18,26,.64) 100%)}
.sf__plate--case .sf__platepic img{object-fit:cover;object-position:50% 45%}
/* wider screens: the landscape poster sits behind the start-aligned title, so the start side gets the deeper ink and a
   soft blur keeps the client's own headlines from reading through ours; the far side still shows the frame */
@media (min-width:700px){
  .sf__plate--case .sf__platepic{overflow:hidden}
  .sf__plate--case .sf__platepic img{filter:blur(8px) saturate(1.15);transform:scale(1.05)}
  .sf__plate--case .sf__platepic::after{background:
    linear-gradient(to top,var(--stage) 0%,rgba(20,18,26,.4) 38%,rgba(20,18,26,0) 70%),
    linear-gradient(to right,rgba(20,18,26,.93) 0%,rgba(20,18,26,.86) 48%,rgba(20,18,26,.58) 100%)}
  [dir=rtl] .sf__plate--case .sf__platepic::after{background:
    linear-gradient(to top,var(--stage) 0%,rgba(20,18,26,.4) 38%,rgba(20,18,26,0) 70%),
    linear-gradient(to left,rgba(20,18,26,.93) 0%,rgba(20,18,26,.86) 48%,rgba(20,18,26,.58) 100%)}
}
/* phones: the opener uses the vertical poster, often a real site screen full of the client's own headlines. Sharp, it
   reads as text behind our chip, title and lead; blurred and inked it becomes the project's colour field (QA 2026-09-30) */
@media (max-width:699px){
  .sf__plate--case .sf__platepic{overflow:hidden}
  .sf__plate--case .sf__platepic img{object-position:50% 30%;filter:blur(16px) saturate(1.4);transform:scale(1.18)}
  .sf__plate--case .sf__platepic::after{background:linear-gradient(to top,var(--stage) 0%,rgba(20,18,26,.9) 40%,rgba(20,18,26,.84) 68%,rgba(20,18,26,.45) 100%)}
}
.sf__player{position:relative;transform-origin:50% 0;transform:scale(var(--sfs,1))}
.sf__vid{aspect-ratio:16/9;height:auto;border-radius:var(--r3);overflow:hidden;background:var(--stage-2)}
/* phones: a player with a vertical loop (the home reel) switches to it (site.js) and takes its shape */
@media (max-width:699px){.js .sf__vid.vid--pv{aspect-ratio:9/16;max-height:82svh;width:auto;margin-inline:auto}}
.sf__vid .pp{inset-inline-start:16px;bottom:16px;width:52px;height:52px}
@media (max-width:699px){.sf__vid.vid--pv .pp{bottom:auto;top:12px;inset-inline-start:auto;inset-inline-end:12px}}  /* vertical loops bake their label bottom-start */
.sf__cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:18px 2px 0;color:var(--stage-quiet);font-size:var(--fs-small)}
.sf__cap p{color:var(--paper);font-weight:600}
.nw{display:inline-block;max-width:100%}  /* an atomic item: a name or "© 2026 Webixio" never splits across lines, unless
   it alone is wider than the line (RU credits "Фотореалистичная графика" in a 195 px column): then it wraps inside */
.sf__rail{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:14px;margin-top:clamp(28px,3vw,44px);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--stage-line) transparent;padding-bottom:10px;
  margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
@media (min-width:1100px){.sf__rail{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));overflow:visible;margin-inline:0;padding-inline:0}
  .sf__rail--n10,.sf__rail--n5{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:26px}}
.clip{display:grid;gap:12px;align-content:start;width:100%;padding:0;border:0;background:none;text-align:start;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.clip__img{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--stage-2);
  outline:2px solid transparent;outline-offset:3px;transition:outline-color var(--d2)}
.clip__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.clip__play{position:absolute;inset-inline-start:10px;bottom:10px;width:36px;height:36px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center}
.clip__play svg{width:13px;height:13px;fill:currentColor}
.clip__cap{font-size:15px;line-height:1.35;color:var(--stage-quiet);transition:color var(--d2)}
.clip[aria-pressed=true] .clip__img{outline-color:var(--saffron)}
.clip[aria-pressed=true] .clip__cap{color:var(--paper)}
@media (hover:hover){.clip:hover .clip__img img{transform:scale(1.04)}.clip:hover .clip__cap{color:var(--paper)}}

/* end card: Saffron + Vermilion bars, Paper crossing (on Ink the overlap is Paper; Cobalt never on Ink) */
.endcard{position:relative;margin-top:clamp(72px,9vw,150px);height:clamp(300px,40vw,600px);container-type:size;isolation:isolate;overflow:hidden;border-radius:var(--r3);
  --t:34cqh;--lh:140cqh}
.endcard__bar,.endcard__ko,.endcard__x{position:absolute;inset:0}
.endcard__bar--a,.endcard__ko--a{clip-path:polygon(
  calc(50% - .5299*var(--lh) - .424*var(--t)) calc(50% - .848*var(--lh) + .265*var(--t)),
  calc(50% + .5299*var(--lh) - .424*var(--t)) calc(50% + .848*var(--lh) + .265*var(--t)),
  calc(50% + .5299*var(--lh) + .424*var(--t)) calc(50% + .848*var(--lh) - .265*var(--t)),
  calc(50% - .5299*var(--lh) + .424*var(--t)) calc(50% - .848*var(--lh) - .265*var(--t)))}
.endcard__bar--b,.endcard__ko--b{clip-path:polygon(
  calc(50% + .5299*var(--lh) + .424*var(--t)) calc(50% - .848*var(--lh) + .265*var(--t)),
  calc(50% - .5299*var(--lh) + .424*var(--t)) calc(50% + .848*var(--lh) + .265*var(--t)),
  calc(50% - .5299*var(--lh) - .424*var(--t)) calc(50% + .848*var(--lh) - .265*var(--t)),
  calc(50% + .5299*var(--lh) - .424*var(--t)) calc(50% - .848*var(--lh) - .265*var(--t)))}
.endcard__bar--a{background:var(--saffron)}
.endcard__bar--b{background:var(--vermilion)}
.endcard__x{background:var(--paper);clip-path:polygon(50% calc(50% - .9435*var(--t)),calc(50% + .5896*var(--t)) 50%,50% calc(50% + .9435*var(--t)),calc(50% - .5896*var(--t)) 50%)}
.endcard__t{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,3cqh,40px) clamp(20px,3vw,48px);
  font-size:min(34cqh,15vw);line-height:.86;letter-spacing:var(--tr-mega);color:var(--paper);z-index:1}
.endcard__t span:last-child{align-self:flex-end}
.endcard__ko{z-index:2}
.endcard__ko .endcard__t{color:var(--ink)}
.endcard__x{z-index:0}
.endcard__bar{z-index:-1}
.io .endcard .endcard__bar--a{transform:translate(-110%,-60%);transition:transform var(--d4) var(--ease)}
.io .endcard .endcard__bar--b{transform:translate(110%,-60%);transition:transform var(--d4) var(--ease) var(--beat)}
.io .endcard .endcard__x{transform:scale(0);transition:transform var(--d3) var(--ease-spring) calc(var(--beat) * 2)}
.io .endcard .endcard__ko--a{transform:translate(-110%,-60%);transition:transform var(--d4) var(--ease)}
.io .endcard .endcard__ko--b{transform:translate(110%,-60%);transition:transform var(--d4) var(--ease) var(--beat)}
.io .endcard.in :is(.endcard__bar,.endcard__ko,.endcard__x){transform:none}
.io .endcard.rv{opacity:1;transform:none}
/* the ko copies must move WITH their bars, so their text is counter-translated */
.io .endcard .endcard__ko--a .endcard__t{transform:translate(110%,60%);transition:transform var(--d4) var(--ease)}
.io .endcard .endcard__ko--b .endcard__t{transform:translate(-110%,60%);transition:transform var(--d4) var(--ease) var(--beat)}
.io .endcard.in .endcard__ko .endcard__t{transform:none}

/* ---------------------------------------------------------------- programs */
.progs__grid{list-style:none;display:grid;gap:12px;grid-template-columns:1fr}
@media (max-width:639px){
  .progs__grid{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);padding-bottom:4px}
  .progs__grid::-webkit-scrollbar{display:none}
  .progs__grid > li{scroll-snap-align:start}
  .prog{min-height:236px}
}
@media (min-width:640px){.progs__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.progs__grid{grid-template-columns:repeat(4,1fr)}}
.prog{position:relative;display:grid;gap:10px;align-content:start;height:100%;min-height:0;padding:20px 64px 22px 20px;border:2px solid var(--ink);border-radius:var(--r3);
  text-decoration:none;background:var(--paper);transition:background-color var(--d2) var(--ease),color var(--d2) var(--ease),border-color var(--d2)}
.prog:is(:hover,:active,:focus-visible){background:var(--cobalt);border-color:var(--cobalt);color:var(--paper)}
.prog:is(:hover,:active,:focus-visible) :is(.prog__f,.prog__n){color:var(--paper)}
.prog__n{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.prog__t{font-size:clamp(28px,2.5vw,36px);line-height:.98;letter-spacing:-.025em}
.prog__l{font-size:16px;line-height:1.4}
.prog__f{font:500 11px/1.6 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--stone);margin-top:4px}
.prog__go{position:absolute;inset-inline-end:20px;bottom:18px;font-size:26px;line-height:1;transition:translate var(--d2) var(--ease)}
@media (min-width:640px){.prog{min-height:248px;padding:22px 22px 64px}}
@media (hover:hover){.prog:hover .prog__go{translate:calc(6px * var(--dir)) 0}}
[dir=rtl] .prog__go{transform:scaleX(-1)}
.prog--wide{margin-top:16px;min-height:0;padding-bottom:22px;padding-inline-end:72px}
@media (min-width:900px){.prog--wide{grid-template-columns:200px 1fr;align-items:baseline;column-gap:32px}.prog--wide .prog__t,.prog--wide .prog__l,.prog--wide .prog__f{grid-column:2}.prog--wide .prog__n{grid-row:1 / span 3}}

/* ---------------------------------------------------------------- languages */
.langsec{border-top:1px solid var(--rule)}
.langsec__in{display:grid;gap:40px;align-items:center}
@media (min-width:1000px){.langsec__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px)}}
.langsec__txt{display:grid;gap:24px}
.langsec__txt .d2{font-size:clamp(44px,5.4vw,88px)}
.lchips{display:flex;flex-wrap:wrap;gap:8px}
.lchip{display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:64px;padding:0 16px;border:2px solid var(--ink);border-radius:var(--rp);
  font:700 17px var(--f-body);text-decoration:none}
.lchip[lang=ar]{font-family:var(--f-ar-body)}
.lchip[aria-current]{background:var(--ink);color:var(--paper)}
.langsec__fig{margin:0;display:grid;gap:14px}
.screen{position:relative;border-radius:var(--r3);background:var(--cobalt);padding:clamp(14px,3.4vw,48px);overflow:hidden}
.screen .vid{aspect-ratio:16/10;border-radius:12px;overflow:hidden;box-shadow:10px 10px 0 var(--ink)}
.langsec__fig figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:var(--fs-small);color:var(--stone)}

/* ---------------------------------------------------------------- how we work */
.steps{list-style:none;display:grid;margin-top:clamp(40px,5vw,80px);border-top:2px solid var(--ink)}
@media (min-width:760px){.steps--5{grid-template-columns:repeat(2,1fr)}.steps--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.steps--5{grid-template-columns:repeat(5,1fr)}}
.step{display:grid;align-content:start;gap:8px 18px;padding:22px 0 26px;border-bottom:1px solid var(--rule)}
@media (max-width:759px){.step{grid-template-columns:64px 1fr}.step .step__n{grid-row:span 2;font-size:44px;margin:0}.step p{grid-column:2}}
@media (min-width:760px){.step{padding-inline:0 24px;border-inline-end:1px solid var(--rule);padding-inline-start:0}.step + .step{padding-inline-start:20px}}
.step__n{font-size:clamp(52px,5.4vw,92px);color:var(--cobalt);margin-bottom:clamp(18px,3vw,44px)}
.step__t{font-size:clamp(24px,2vw,30px);line-height:1.02;letter-spacing:-.02em}
.step p{color:var(--stone);max-width:30ch}

/* ---------------------------------------------------------------- closing + CTA block (Cobalt + Saffron: the brief) */
.closing,.cta{background:var(--cobalt);color:var(--paper);--bg:var(--cobalt);--fg:var(--paper);--focus:var(--saffron);padding-block:var(--sec)}
.closing__in{display:grid;gap:48px;align-items:end}
@media (min-width:960px){.closing__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,88px)}}
.closing__txt{display:grid;gap:28px;justify-items:start}
.closing__h,.cta__h{color:var(--saffron);font-size:clamp(52px,7.6vw,116px)}
.closing__body,.cta__body{font-size:var(--fs-lead);line-height:1.35;max-width:30ch}
.closing__mail,.cta__mail{font-size:var(--fs-small)}
.closing__art{margin:0;display:grid;gap:10px}
.closing__art .pic{border-radius:var(--r3);overflow:hidden;aspect-ratio:4/3.3}
.closing__art .pic img{width:100%;height:100%;object-fit:cover}
.cta__in{display:grid;gap:36px;align-items:end}
@media (min-width:960px){.cta__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.cta__side{display:grid;gap:22px;justify-items:start}

/* ---------------------------------------------------------------- footer */
.ftr{border-top:2px solid var(--ink);padding-block:clamp(64px,8vw,128px) 28px}
.ftr__sign{display:grid;gap:28px;padding-bottom:clamp(48px,6vw,88px);border-bottom:1px solid var(--rule)}
.ftr__tag{font-size:var(--fs-d3)}
.ftr__l{display:block}
.ftr__meta{display:grid;gap:6px;color:var(--stone)}
.ftr__meta p:first-child{color:var(--ink);font-size:var(--fs-lead)}
.ftr__meta .mono{font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.ftr__cols{display:grid;gap:40px;padding-block:clamp(40px,5vw,72px)}
@media (min-width:760px){.ftr__cols{grid-template-columns:2fr 1fr 1fr}}
.ftr h2{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone);margin-bottom:12px}
.ftr .ftr__h2b{margin-top:32px}
.ftr__d + .ftr__d{margin-top:32px}
.ftr__d summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ftr__d summary::-webkit-details-marker{display:none}
.ftr__d summary h2{margin:0}
@media (max-width:759px){
  .ftr__d{border-bottom:1px solid var(--rule)}
  .ftr__d + .ftr__d{margin-top:0}
  .ftr__d summary::after{content:"+";font:500 20px/1 var(--f-mono);color:var(--stone);transition:transform var(--d2) var(--ease)}
  .ftr__d[open] summary::after{transform:rotate(45deg)}
  .ftr__d[open] > ul{padding-bottom:14px}
  .ftr__cols{gap:0}
  .ftr__cols > div:last-child{margin-top:32px}
}
@media (min-width:760px){.ftr__d summary{pointer-events:none;min-height:0;margin-bottom:12px}.ftr__d summary h2{margin:0}}
.ftr ul{list-style:none}
.ftr li a,.ftr li .mail{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
@media (hover:hover){.ftr li a:hover{color:var(--cobalt)}}
.ftr__fams{columns:2;column-gap:24px}
.ftr__langs{display:flex;flex-wrap:wrap;gap:6px}
.ftr__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:24px;border-top:1px solid var(--rule);
  font:500 12px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--stone)}
.ftr__legal img{height:24px;width:auto}
.ftr__legal a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.ftr__legal a:hover{color:var(--ink)}

/* ---------------------------------------------------------------- services index */
.svh{position:relative;overflow:hidden;isolation:isolate;padding-block:8px clamp(64px,8vw,128px);border-bottom:2px solid var(--ink)}
.marq{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:center;gap:.06em;pointer-events:none;
  font-family:var(--f-display);font-weight:var(--w-display);font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:clamp(34px,5.6vw,92px);line-height:1.02;letter-spacing:-.03em;color:var(--paper-2)}
.marq__row{white-space:nowrap;overflow:hidden}
@media (max-width:699px){.marq{justify-content:flex-end;padding-bottom:18px}}
.marq__track{display:inline-flex;gap:.6em;padding-inline-end:.6em;animation:marq 160s linear infinite}
.marq__row--1 .marq__track{animation-direction:reverse;animation-duration:190s}
.marq__row:nth-child(3) .marq__track{animation-duration:220s}
.marq.is-off .marq__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
[dir=rtl] .marq__track{animation-name:marq-rtl}
@keyframes marq-rtl{to{transform:translateX(50%)}}
.svh__in{position:relative;display:grid;gap:clamp(20px,3vw,40px)}
.svh__h{font-size:var(--fs-mega);line-height:.86;letter-spacing:var(--tr-mega);--measure:9ch;margin-top:clamp(24px,5vw,72px)}
.svh__sub{position:relative;z-index:1;font-size:var(--fs-lead);line-height:1.35;max-width:28ch;background:var(--paper);padding:6px 0;box-shadow:12px 0 0 var(--paper),-12px 0 0 var(--paper)}

.finder__bar{position:sticky;top:var(--hdr);z-index:20;background:var(--paper);border-bottom:1px solid var(--rule);transition:top var(--d2) var(--ease)}
.hdr-off :is(.finder__bar,.lnav){top:0}
.finder__barin{display:flex;align-items:center;gap:16px;min-height:80px}
.search{flex:1;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 20px;border:2px solid var(--ink);border-radius:var(--rp);background:var(--paper);cursor:text}
.search svg{width:20px;height:20px;flex:none}
.search input{flex:1;min-width:0;height:52px;border:0;background:none;padding:0;font:500 18px var(--f-body);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--stone)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search:focus-within{outline:3px solid var(--cobalt);outline-offset:2px}
.finder__count{font:500 12px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--stone)}
@media (max-width:559px){.finder__count{display:none}}
.finder__filters{display:grid;gap:16px;padding-block:22px 10px}
.fgroup{display:grid;gap:10px;min-width:0}
.fgroup__l{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.fgroup--row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:699px){.fchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);padding-bottom:2px}.fchips::-webkit-scrollbar{display:none}}
.fchip{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 16px;border:1.5px solid var(--ink);border-radius:var(--rp);background:var(--paper);
  font:600 15px var(--f-body);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--d1),color var(--d1),border-color var(--d1)}
.fchip__n{font:500 11px var(--f-mono);color:var(--stone)}
.fchip[aria-pressed=true]{background:var(--cobalt);border-color:var(--cobalt);color:var(--paper)}
.fchip[aria-pressed=true] .fchip__n{color:var(--paper)}
@media (hover:hover){.fchip:hover{background:var(--paper-2)}.fchip[aria-pressed=true]:hover{background:#1A2AE6}}
.fchip__box{width:18px;height:18px;border:2px solid currentColor;border-radius:5px;display:grid;place-items:center}
.fchip--toggle[aria-pressed=true] .fchip__box::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--saffron)}
.fclear{min-height:var(--tap);padding:0 12px;border:0;background:none;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer;color:var(--cobalt)}
html[lang=ar] :is(.fchip,.search input){font-family:var(--f-ar-body)}

.svlist{padding-block:clamp(8px,2vw,24px) var(--sec)}
.grp{padding-top:clamp(56px,7vw,112px)}
.grp__head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:6px 18px;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.grp__thumb{grid-column:1 / -1;display:block;width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:14px;overflow:hidden;margin-bottom:10px}
.grp__thumb .pic,.grp__thumb img{width:100%;height:100%}
.grp__thumb img{object-fit:cover}
.grp__thumb .ink{position:relative;padding:8px}.grp__thumb .ink__name{font-size:22px}
.grp__n{font-size:var(--fs-d3);color:var(--cobalt);letter-spacing:-.03em}
.grp__name{font-size:var(--fs-d3);letter-spacing:var(--tr-h)}
.grp__name a{text-decoration:none;display:inline-flex;align-items:center;gap:.25em;min-height:var(--tap)}
.grp__name .arr{font-size:.5em;transform:translateY(-.3em)}
[dir=rtl] .grp__name .arr{transform:scaleX(-1) translateY(-.3em)}
@media (hover:hover){.grp__name a:hover{color:var(--cobalt)}}
.grp__p,.grp__c{grid-column:2}
.grp__p{font-size:var(--fs-h4);line-height:1.3;color:var(--stone)}
.grp__c{font:500 12px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--stone)}
@media (min-width:900px){.grp__head{grid-template-columns:clamp(84px,9vw,140px) minmax(0,1fr) auto}.grp__p{grid-column:2}.grp__c{grid-column:3;grid-row:2}
  .grp__thumb{grid-column:1;grid-row:1 / span 3;align-self:start;margin:0;width:clamp(64px,6.4vw,96px)}
  .grp__head .grp__n{grid-column:2;grid-row:1;font-size:12px;font-family:var(--f-mono);font-weight:500;letter-spacing:.06em;color:var(--stone);font-variation-settings:normal}
  .grp__head .grp__name{grid-column:2;grid-row:2}.grp__head .grp__p{grid-row:3}}
.rows{list-style:none;display:grid}
@media (min-width:900px){.rows{grid-template-columns:1fr 1fr;column-gap:clamp(32px,4vw,64px);padding-inline-start:clamp(84px,9vw,140px)}}
.row{display:grid;grid-template-columns:64px minmax(0,1fr);align-content:start;gap:4px 14px;padding:18px 0 12px;border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--hdr) + 100px)}
.row__id{grid-row:span 3;font:500 12px/1 var(--f-mono);letter-spacing:.04em;color:var(--stone);padding-top:6px}
.row__name{font:700 19px/1.25 var(--f-body);letter-spacing:-.01em}
.row__start{display:inline;text-decoration:none;color:var(--ink)}
.row__start .arr{color:var(--cobalt);font-weight:600}
@media (hover:hover){.row__start:hover{color:var(--cobalt);text-decoration:underline;text-decoration-thickness:2px}.row__start:hover .arr{translate:calc(4px * var(--dir)) 0}}
.row__out{color:var(--stone);font-size:15.5px;line-height:1.4}
.row__act{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:2px}
.row__proof{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--ink)}
.row__proof::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--saffron);box-shadow:0 0 0 1.5px var(--ink)}
.row__proof .arr{margin:0}
html[lang=ar] .row__proof{text-transform:none;font-family:var(--f-ar-body);font-size:13px;letter-spacing:0}
@media (hover:hover){.row__proof:hover{color:var(--cobalt)}}
.js .grp--fold:not(.is-open) .row--x{display:none}
.js .svlist.is-filtering .grp .row--x:not([hidden]){display:grid}
.grp__more{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:14px;padding:0 20px;border:2px solid var(--ink);border-radius:var(--rp);
  background:none;font:700 15px var(--f-body);cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (min-width:900px){.grp__more{margin-inline-start:clamp(84px,9vw,140px)}}
.svlist.is-filtering .grp__more{display:none}
@media (hover:hover){.grp__more:hover{background:var(--ink);color:var(--paper)}}
html[lang=ar] .grp__more{font-family:var(--f-ar-body)}
.row:target{background:var(--paper-2);box-shadow:-12px 0 0 var(--paper-2),12px 0 0 var(--paper-2)}
html[lang=ar] .row__name{font-family:var(--f-ar-body);font-weight:600}
.empty{display:grid;gap:22px;justify-items:start;padding-block:64px}
.empty__t{font-family:var(--f-display);font-weight:850;font-variation-settings:"VOLM" 40;font-size:var(--fs-d3);line-height:1;letter-spacing:-.02em;max-width:18ch}
.progs--svc{border-top:2px solid var(--ink)}

/* ---------------------------------------------------------------- family page */
.fam-cobalt-saffron{--fa:var(--cobalt);--fa-t:var(--paper);--fb:var(--saffron)}
.fam-cobalt-vermilion{--fa:var(--cobalt);--fa-t:var(--paper);--fb:var(--vermilion)}
.fam-vermilion-saffron{--fa:var(--vermilion);--fa-t:var(--ink);--fb:var(--saffron)}
.fh{padding-block:8px clamp(64px,8vw,120px)}
.fh__grid{display:grid;gap:40px;margin-top:clamp(12px,3vw,40px)}
@media (min-width:1000px){.fh__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,96px);align-items:end}}
.fh__txt{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
.fh__eyebrow{display:flex;align-items:center;gap:14px;font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.fh__num{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--fa);color:var(--fa-t);
  font-family:var(--f-display);font-weight:850;font-size:17px;letter-spacing:-.02em}
.fh__h{font-size:clamp(60px,10.2vw,176px);line-height:.86;letter-spacing:var(--tr-mega);margin:clamp(18px,3vw,36px) 0 clamp(22px,3vw,36px);overflow-wrap:break-word;max-width:100%}
.fh__line{font:700 var(--fs-h3)/1.14 var(--f-body);letter-spacing:-.02em;max-width:22ch;margin-bottom:18px}
.fh__intro{font-size:var(--fs-lead);line-height:1.4;color:var(--stone);max-width:42ch;margin-bottom:32px}
.fh__fig{margin:0;display:grid;gap:12px}
.fh__fig .plate{aspect-ratio:4/4.6}
.fh__fig figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:var(--fs-small);color:var(--stone)}
.fh__cap{color:var(--ink);font-weight:600}
html[lang=ar] .fh__line{font-family:var(--f-ar-body)}

.incl{border-top:2px solid var(--ink);padding-top:clamp(56px,7vw,112px)}
.incl__in{display:grid;gap:32px}
@media (min-width:1000px){.incl__in{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px}.incl__head{position:sticky;top:calc(var(--hdr) + 32px);align-self:start}}
.incl__head{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
.incl__c{font:500 12px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--stone)}
.incl__cta{margin-top:12px}
.smile{position:absolute;z-index:3;top:18px;inset-inline-start:18px;max-width:78%;padding:10px 16px 11px;border-radius:var(--rp);background:var(--saffron);color:var(--ink);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:800 clamp(16px,1.5vw,20px)/1.15 var(--f-body);transform:rotate(-4deg);transform-origin:0 50%}
[dir=rtl] .smile{transform:rotate(4deg);transform-origin:100% 50%}
html[lang=ar] .smile{font-family:var(--f-ar-body)}
.acc{list-style:none;border-top:2px solid var(--ink)}
.acc__i{border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--hdr) + 24px)}
.acc details{transition:background-color var(--d3) var(--ease),color var(--d3) var(--ease)}
.acc summary{display:grid;grid-template-columns:64px minmax(0,1fr) var(--tap);align-items:center;gap:12px;min-height:76px;padding:14px 14px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.acc summary::-webkit-details-marker{display:none}
.acc__id{font:500 12px var(--f-mono);letter-spacing:.04em;color:var(--stone)}
.acc__name{font:700 clamp(19px,1.7vw,24px)/1.2 var(--f-body);letter-spacing:-.012em}
.acc__plus{width:var(--tap);height:var(--tap);border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;transition:transform var(--d3) var(--ease),background-color var(--d2)}
.acc__plus svg{width:14px;height:14px;fill:currentColor}
.acc details[open]{background:var(--cobalt);color:var(--paper);--fg:var(--paper);--bg:var(--cobalt);--focus:var(--saffron)}
.acc details[open] .acc__id{color:var(--paper)}
.acc details[open] .acc__plus{transform:rotate(135deg);background:var(--saffron);color:var(--ink);border-color:var(--saffron)}
@media (hover:hover){.acc details:not([open]) summary:hover{background:var(--paper-2)}}
.acc__body{display:grid;gap:22px;justify-items:start;padding:4px 14px 28px calc(64px + 26px)}
@media (max-width:559px){.acc__body{padding-inline-start:14px}}
.acc__out{font-size:var(--fs-lead);line-height:1.35;max-width:36ch}
html[lang=ar] .acc__name{font-family:var(--f-ar-body);font-weight:600}

.how--fam{border-top:2px solid var(--ink)}
.ww{padding-top:0}
.ww__grid{list-style:none;display:grid;gap:clamp(28px,3vw,40px) 16px;grid-template-columns:1fr}
@media (min-width:700px){.ww__grid{grid-template-columns:repeat(3,1fr)}}
.wwc{display:grid;gap:10px;text-decoration:none}
.wwc__img{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r2);overflow:hidden}
.wwc__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.wwc__n{font:500 12px var(--f-mono);color:var(--stone);margin-top:6px}
.wwc__name{font-size:clamp(28px,2.6vw,40px)}
.wwc__p{color:var(--stone);max-width:30ch}
@media (hover:hover){.wwc:hover .wwc__img img{transform:scale(1.04)}.wwc:hover .wwc__name{color:var(--cobalt)}}

.famnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-block:clamp(40px,5vw,72px) 0}
.famnav__a{display:grid;gap:10px;align-content:space-between;min-height:132px;padding:20px 22px;border:2px solid var(--ink);border-radius:var(--r3);text-decoration:none;transition:background-color var(--d2),color var(--d2)}
.famnav__next{text-align:end;justify-items:end}
.famnav__n{font:500 12px var(--f-mono);color:var(--stone)}
.famnav__name{font-size:clamp(24px,3.2vw,48px);line-height:.95}
/* phones: two ~170 px cards. The arrow gets its own row above the name in both cards, so "Messaging →" never
   wraps its arrow under the name while "← Software" keeps it inline (QA 2026-09-30) */
@media (max-width:560px){
  .famnav{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .famnav__a{padding:18px 16px}
  .famnav__name{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:19px;line-height:1.05;
    hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:break-word}
  .famnav__next .famnav__name{flex-direction:column-reverse;align-items:flex-end}
  .famnav__name .arr{font-size:20px;line-height:1}
}
.famnav__a:is(:hover,:active,:focus-visible){background:var(--ink);color:var(--paper)}
.famnav__a:is(:hover,:active,:focus-visible) .famnav__n{color:var(--stage-quiet)}
.p-family .ftr{margin-top:clamp(40px,5vw,72px)}

/* ================================================================ phase 2 · work index */
.wh{padding-block:8px clamp(24px,3vw,44px)}
.wh__in{display:grid;gap:clamp(16px,2.4vw,32px)}
.wh__h{font-size:var(--fs-mega);line-height:.86;letter-spacing:var(--tr-mega);margin-top:clamp(12px,2.4vw,36px)}
.wh__sub{font-size:var(--fs-lead);line-height:1.35;max-width:30ch}
@media (min-width:1000px){.wh__in{grid-template-columns:minmax(0,1fr) auto;align-items:end}.wh__in .crumbs{grid-column:1 / -1}.wh__sub{padding-bottom:.9em}}
.wfind{border-block:1px solid var(--rule);padding-block:12px;margin-bottom:clamp(8px,1.4vw,20px)}
.wfind__in{display:grid;gap:16px}
.wfind__groups{display:grid;gap:14px;align-items:start;padding:6px 0 8px}
.wfind .fgroup{align-content:start}
.wfind .fchips{align-items:flex-start}
@media (min-width:1000px){.wfind__groups{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:40px}.wfind__groups .fgroup:nth-child(2){grid-column:1 / -1;grid-row:1}}
.wfind__end{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.wfind__tog{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 18px;border:1.5px solid var(--ink);border-radius:var(--rp);background:var(--paper);
  font:600 15px var(--f-body);cursor:pointer;-webkit-tap-highlight-color:transparent}
.wfind__tog[aria-expanded=true]{background:var(--ink);color:var(--paper)}
.wfind__ico{width:16px;height:12px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/70% 2px no-repeat,linear-gradient(currentColor,currentColor) 50% 100%/40% 2px no-repeat}
.wfind__n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--rp);background:var(--cobalt);color:var(--paper);font:600 12px var(--f-mono)}
html[lang=ar] .wfind__tog{font-family:var(--f-ar-body)}
.viewtog{display:inline-flex;padding:4px;border:1.5px solid var(--ink);border-radius:var(--rp);gap:2px}
.viewtog button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:var(--rp);background:none;font:600 15px var(--f-body);cursor:pointer;-webkit-tap-highlight-color:transparent}
.viewtog button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.viewtog svg{width:14px;height:14px;fill:currentColor}
html[lang=ar] .viewtog button{font-family:var(--f-ar-body)}
.wlist{padding-bottom:var(--sec)}

/* list view: the project index as giant type, thumbnail at the end */
.wl{list-style:none}
.wl--list{border-top:2px solid var(--ink)}
.wk{position:relative;isolation:isolate}
.wl--list .wk{display:grid;grid-template-columns:30px minmax(0,1fr) 92px;gap:10px 14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
@media (min-width:700px){.wl--list .wk{grid-template-columns:56px minmax(0,1fr) 150px;gap:14px 28px;padding:22px 0}}
@media (min-width:1100px){.wl--list .wk{grid-template-columns:72px minmax(0,1fr) 184px;padding:26px 0}}
.wl--list .wk::before{content:"";position:absolute;inset:0 calc(-1 * var(--gut));z-index:-1;background:var(--cobalt);transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--d3) var(--ease)}
.wk__n{font:500 12px var(--f-mono);color:var(--stone);align-self:start;padding-top:.5em}
.wk__txt{min-width:0}
.wk__h{font-family:var(--f-display);font-weight:var(--w-display);font-variation-settings:"FLAR" 0,"VOLM" var(--volm);font-size:clamp(30px,5.4vw,88px);line-height:.94;letter-spacing:-.035em}
html[lang=ar] .wk__h{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.15}
.wk__a{text-decoration:none}
.wk__a::after{content:"";position:absolute;inset:0;z-index:1}
.wk__out{display:block;margin-top:.4em;font:500 clamp(16px,1.55vw,23px)/1.25 var(--f-body);letter-spacing:-.01em;color:var(--stone);font-variation-settings:"VOLM" 0}
html[lang=ar] .wk__out{font-family:var(--f-ar-body)}
.wk__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px}
.wk__meta{font:500 12px/1.4 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--stone)}
html[lang=ar] .wk__meta{text-transform:none;font-size:13px}
.wk__langs{list-style:none;display:flex;flex-wrap:wrap;gap:4px}
.wk__langs li{font:500 11px/1 var(--f-mono);letter-spacing:.06em;padding:4px 6px 3px;border-radius:4px;background:var(--ink);color:var(--paper)}
.wk__visit{display:none;position:relative;z-index:2;align-items:center;min-height:var(--tap);font-weight:800;font-size:15px;color:var(--cobalt);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:699px){.wl--list .wk__visit{display:inline-flex}}
.wk__media{position:relative}
.wk__media .plate{aspect-ratio:4/5;border-radius:var(--r2)}
.wl--list .inset,.wl--list .wk__prov{display:none}
.wl--list .sticker{top:8px;inset-inline-end:8px;min-height:44px;padding:0 12px;font-size:14px}
@media (max-width:699px){.wl--list .sticker{display:none}.wl--list .wk__media .plate{border-radius:10px}}
@media (hover:hover){
  .wl--list .wk:hover{color:var(--paper)}
  .wl--list .wk:hover::before{transform:none}
  .wl--list .wk:hover :is(.wk__out,.wk__meta,.wk__n){color:var(--paper)}
  .wl--list .wk:hover .wk__langs li{background:var(--paper);color:var(--cobalt)}
  .wl--list .wk:hover .plate{transform:rotate(-3deg) scale(1.04)}
  [dir=rtl] .wl--list .wk:hover .plate{transform:rotate(3deg) scale(1.04)}
}
.wl--list .plate{transition:transform var(--d3) var(--ease-spring)}
.wl--list .wk:focus-within{outline:none}
.wl--list .wk__a:focus-visible{outline:none}
.wl--list .wk:has(.wk__a:focus-visible)::before{transform:none}
.wl--list .wk:has(.wk__a:focus-visible){color:var(--paper)}

/* grid view: the tiles */
.wl--grid{display:grid;grid-template-columns:1fr;gap:clamp(44px,5vw,72px) clamp(16px,2vw,28px)}
@media (min-width:700px){.wl--grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.wl--grid{grid-template-columns:repeat(3,1fr)}}
.wl--grid .wk{display:flex;flex-direction:column;gap:18px}
.wl--grid .wk__media{order:-1}
.wl--grid .wk__n{display:none}
.wl--grid .wk__h{font-size:clamp(24px,2.1vw,32px);line-height:1.06;letter-spacing:-.02em}
.wl--grid .wk__out{display:inline;margin:0;font-size:1em;font-weight:500}
.wl--grid .wk__foot{margin-top:10px}
@media (hover:hover){.wl--grid .wk:hover .plate > .pic img{transform:scale(1.04)}.wl--grid .wk:hover .wk__name{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}}
.wk .sticker{z-index:4}
.wk .pp{z-index:4}

/* more sites: live client sites, link out */
.more-sites{border-top:2px solid var(--ink)}
.msc__grid{list-style:none;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){.msc__grid{grid-template-columns:repeat(3,1fr)}}
.msc{position:relative;display:flex;flex-direction:column;gap:12px;height:100%;min-height:clamp(260px,26vw,340px);padding:clamp(20px,2vw,28px);border-radius:var(--r3);
  text-decoration:none;overflow:hidden;isolation:isolate;transition:transform var(--d2) var(--ease-spring)}
.msc--cobalt{background:var(--cobalt);color:var(--paper);--focus:var(--saffron)}
.msc--saffron{background:var(--saffron);color:var(--ink)}
.msc--ink{background:var(--ink);color:var(--paper);--focus:var(--saffron)}
.msc--ink .msc__go{background:var(--saffron)}
.msc__place{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.msc__name{font-family:var(--f-display);font-weight:850;font-variation-settings:"VOLM" 40;font-size:clamp(32px,3.2vw,50px);line-height:.95;letter-spacing:-.03em}
.msc__line{font-size:16px;line-height:1.4;max-width:32ch}
.msc__go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 16px;border-radius:var(--rp);
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:800;font-size:15px;gap:.35em;transform:rotate(-4deg)}
[dir=rtl] .msc__go{transform:rotate(4deg)}
.msc__url{font:500 11px var(--f-mono);letter-spacing:.04em;opacity:.8;align-self:flex-start}
@media (hover:hover){.msc:hover{transform:translateY(-4px) rotate(-.6deg)}.msc:hover .msc__go{transform:rotate(0)}}
html[lang=ar] :is(.msc__name){font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.15}
html[lang=ar] .msc__place{text-transform:none;font-size:13px}

/* ================================================================ phase 2 · case study */
.ch{padding-block:8px clamp(40px,5vw,72px)}
.ch__head{display:grid;gap:16px;margin:clamp(14px,3vw,44px) 0 clamp(26px,3.4vw,52px)}
.ch__eyebrow{font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
html[lang=ar] .ch__eyebrow{text-transform:none;font-size:13px}
.ch__h{font-family:var(--f-display);font-weight:var(--w-display);font-variation-settings:"FLAR" 0,"VOLM" var(--volm);
  font-size:clamp(46px,7.6vw,128px);line-height:.88;letter-spacing:var(--tr-mega);max-width:18ch}
.ch__name,.ch__out{display:block}
.ch__out{color:var(--cobalt);font-size:.74em;line-height:.95;margin-top:.08em;letter-spacing:-.035em}
html[lang=ar] .ch__h{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.15}
.ch__fig{margin:0;display:grid;gap:14px}
.ch__plate{position:relative}
.plate--case{aspect-ratio:4/5}
@media (min-width:700px){.plate--case{aspect-ratio:4/3}}
@media (min-width:1000px){.plate--case{aspect-ratio:16/8.4}}
.plate--case > .pic img{object-position:50% 58%}
.plate--case .inset{width:72%}
@media (min-width:700px){.plate--case .inset{width:50%}}
@media (min-width:1000px){.plate--case .inset{width:40%;inset-inline-end:5%;bottom:8%;border-width:4px;box-shadow:10px 10px 0 var(--ink)}[dir=rtl] .plate--case .inset{box-shadow:-10px 10px 0 var(--ink)}}
.sticker--lg{top:clamp(14px,2vw,26px);inset-inline-end:clamp(14px,2vw,26px);min-height:52px;padding:0 22px;font-size:18px}
.ch__figcap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.ch__caps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:var(--fs-small);color:var(--stone)}
.ch__cap{color:var(--ink);font-weight:600}
.plate.has-smile .smile{z-index:4}

.cm{padding-block:0 clamp(56px,7vw,112px)}
.cm__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:18px 32px;margin:0;padding-block:22px;border-block:1px solid var(--rule)}
.cm__meta div{display:grid;gap:4px;align-content:start}
.cm__meta dt{font:500 11.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.cm__meta dd{margin:0;font-weight:600;font-size:16.5px;line-height:1.35}
html[lang=ar] .cm__meta dt{text-transform:none;font-size:13px}
.facts{list-style:none;display:grid;margin-top:clamp(40px,5vw,80px);border-top:2px solid var(--ink)}
@media (min-width:760px){.facts--3{grid-template-columns:repeat(3,1fr)}.facts--2{grid-template-columns:repeat(2,1fr)}}
.fact{display:grid;gap:12px;align-content:start;padding:22px 0 28px;border-bottom:1px solid var(--rule)}
@media (min-width:760px){.fact{padding-inline-end:24px}.fact + .fact{padding-inline-start:24px;border-inline-start:1px solid var(--rule)}}
.fact__fig{font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:clamp(46px,5.4vw,92px);line-height:.92;letter-spacing:-.04em;color:var(--cobalt)}
html[lang=ar] .fact__fig{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.15}
.fact__l{font-size:17px;line-height:1.4;color:var(--stone);max-width:28ch}
.facts--long .fact__fig{font-size:clamp(40px,4.2vw,72px);text-wrap:balance}

.cb{border-top:2px solid var(--ink)}
.cb__in{display:grid;gap:clamp(36px,4vw,56px)}
@media (min-width:1000px){.cb__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,96px)}.cb__head{position:sticky;top:calc(var(--hdr) + 32px);align-self:start}}
.cb__head{display:grid;gap:clamp(24px,3vw,40px);align-content:start}
.cb__brief{display:grid;gap:12px;padding-top:20px;border-top:1px solid var(--rule)}
.cb__bt{font-size:var(--fs-lead);line-height:1.4;max-width:34ch}
.chaps{list-style:none;border-top:2px solid var(--ink)}
.chap{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding:26px 0 30px;border-bottom:1px solid var(--rule)}
@media (min-width:900px){.chap{grid-template-columns:112px minmax(0,1fr);padding:34px 0 38px}}
.chap__n{font-family:var(--f-display);font-weight:850;font-variation-settings:"VOLM" 40;font-size:clamp(34px,3.8vw,64px);line-height:.9;letter-spacing:-.04em;color:var(--cobalt)}
.chap__txt{display:grid;gap:12px;justify-items:start}
.chap__t{font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:clamp(28px,2.8vw,44px);line-height:.98;letter-spacing:-.025em}
html[lang=ar] .chap__t{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.2}
.chap__b{font-size:var(--fs-lead);line-height:1.42;max-width:40ch}

.cs .sf__plate{min-height:clamp(420px,46vw,720px)}
.cs .sf__head .d2{width:min(100%,12ch);container-type:inline-size}   /* hard measure over the poster: the title fits its own box */
.cs__play{display:grid;gap:18px;align-items:start}
@media (min-width:900px){.cs__play--pair{grid-template-columns:minmax(0,1fr) minmax(200px,22%)}}
.cs__phone .vid{aspect-ratio:9/16;border-radius:24px;overflow:hidden;border:6px solid var(--stage-2)}
.cs__phone .pp{bottom:auto;top:10px;inset-inline-start:10px}
@media (max-width:899px){.cs__phone{max-width:260px}}
.cs__res{display:grid;gap:20px;justify-items:start;margin-top:clamp(40px,5vw,88px);padding-top:26px;border-top:1px solid var(--stage-line)}
.cs__rt{font:700 clamp(24px,2.7vw,42px)/1.16 var(--f-body);letter-spacing:-.02em;max-width:28ch;color:var(--paper)}
html[lang=ar] .cs__rt{font-family:var(--f-ar-body);letter-spacing:0;line-height:1.4}
.stagefilm .btn--line{color:var(--paper)}
@media (hover:hover){.stagefilm .btn--line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}}

.svp{padding-bottom:clamp(40px,5vw,72px)}
.svp__grid{list-style:none;columns:1;column-gap:16px}
@media (min-width:700px){.svp__grid{columns:2}}
@media (min-width:1100px){.svp__grid{columns:3}}
.svp__fam{break-inside:avoid;margin-bottom:16px;border:2px solid var(--ink);border-radius:var(--r3);padding:8px 8px 10px}
.svp__fh{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 12px;border-radius:14px;text-decoration:none;transition:background-color var(--d2)}
.svp__num{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--fa);color:var(--fa-t);
  font-family:var(--f-display);font-weight:850;font-size:15px;letter-spacing:-.02em}
.svp__name{font-family:var(--f-display);font-weight:850;font-variation-settings:"VOLM" 40;font-size:clamp(24px,2.1vw,32px);line-height:1;letter-spacing:-.025em}
html[lang=ar] .svp__name{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.2}
.svp__fh .arr{margin-inline-start:auto;font-size:22px}
.svp__list{list-style:none}
.svp__list a{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;align-items:baseline;min-height:var(--tap);padding:11px 12px;border-top:1px solid var(--rule);text-decoration:none;border-radius:10px}
.svp__id{font:500 12px var(--f-mono);letter-spacing:.04em;color:var(--stone)}
.svp__s{font-weight:600;line-height:1.3}
@media (hover:hover){.svp__fh:hover{background:var(--paper-2)}.svp__fh:hover .arr{translate:calc(4px * var(--dir)) 0}.svp__list a:hover{color:var(--cobalt);background:var(--paper-2)}}

.credits__in{display:grid;gap:14px 40px;padding-block:clamp(32px,4vw,56px);border-top:1px solid var(--rule)}
@media (min-width:900px){.credits__in{grid-template-columns:200px minmax(0,1fr)}}
.credits__h{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone);padding-top:3px}
.credits__dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:14px 28px;margin:0}
.credits__dl div{display:grid;gap:3px}
.credits__dl dt{font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.credits__dl dd{margin:0;font-weight:600}
html[lang=ar] :is(.credits__h,.credits__dl dt){text-transform:none;font-size:13px}

.nextc{padding-block:clamp(16px,2vw,28px) clamp(64px,8vw,120px)}
.nextc__a{display:grid;gap:22px;align-items:center;padding:clamp(18px,2.2vw,30px);border:2px solid var(--ink);border-radius:var(--r4);text-decoration:none;
  transition:background-color var(--d2) var(--ease),color var(--d2) var(--ease)}
@media (min-width:900px){.nextc__a{grid-template-columns:minmax(0,1fr) minmax(0,36%)}}
.nextc__txt{display:grid;gap:10px;align-content:center}
.nextc__l{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.nextc__name{font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:clamp(44px,6.4vw,108px);line-height:.9;letter-spacing:-.045em}
.nextc__out{font:500 var(--fs-lead)/1.3 var(--f-body);color:var(--stone)}
html[lang=ar] .nextc__name{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.15}
html[lang=ar] .nextc__l{text-transform:none;font-size:13px}
.nextc__img{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r2);overflow:hidden}
.nextc__img .pic,.nextc__img img{width:100%;height:100%}
.nextc__img img{object-fit:cover;transition:transform 1.1s var(--ease)}
.nextc__a:is(:hover,:focus-visible,:active){background:var(--ink);color:var(--paper)}
.nextc__a:is(:hover,:focus-visible,:active) :is(.nextc__l,.nextc__out){color:var(--stage-quiet)}
@media (hover:hover){.nextc__a:hover .nextc__img img{transform:scale(1.05)}.nextc__a:hover .arr{translate:calc(6px * var(--dir)) 0}}

/* ================================================================ phase 2 · products */
.pblks{display:grid;gap:clamp(72px,9vw,150px);padding-block:clamp(24px,3vw,48px) var(--sec)}
.pblk{display:grid;gap:clamp(24px,3vw,40px);align-items:center}
@media (min-width:1000px){.pblk{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,88px)}.pblk--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.pblk--flip .pblk__media{order:2}}
.pblk__media .plate{aspect-ratio:4/3.2}
.pblk__txt{display:grid;gap:14px;justify-items:start}
.pblk__n{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font:500 12px var(--f-mono);letter-spacing:.06em;color:var(--stone)}
.pblk__name{font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:clamp(46px,5.6vw,92px);line-height:.9;letter-spacing:-.04em}
.pblk__tag{font:700 var(--fs-h3)/1.12 var(--f-body);letter-spacing:-.02em;max-width:20ch}
.pblk__desc{font-size:var(--fs-lead);line-height:1.4;color:var(--stone);max-width:36ch;margin-bottom:10px}
html[lang=ar] .pblk__name{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.15}
html[lang=ar] :is(.pblk__tag){font-family:var(--f-ar-body);letter-spacing:0}
html[lang=ar] .prod__label{text-transform:none;font-size:13px;font-family:var(--f-ar-body)}

.lnav{position:sticky;top:var(--hdr);z-index:30;background:var(--paper);border-block:1px solid var(--rule)}
.lnav__in{display:flex;align-items:center;gap:6px 18px;min-height:60px}
.lnav{transition:top var(--d2) var(--ease)}
.lnav__name{margin-inline-end:auto;font-family:var(--f-display);font-weight:850;font-variation-settings:"VOLM" 40;font-size:19px;letter-spacing:-.02em;text-decoration:none;
  display:block;flex:1 1 auto;min-width:0;line-height:var(--tap);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnav__go .sm{display:none}
@media (max-width:520px){.lnav__go .lg{display:none}.lnav__go .sm{display:inline}}
.lnav__a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;font-size:15px;text-decoration:none}
@media (hover:hover){.lnav__a:hover{color:var(--cobalt)}}
@media (max-width:520px){.lnav__a{display:none}}
html[lang=ar] .lnav__name{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0}
.pr-h .fh__eyebrow{gap:12px;flex-wrap:wrap}
.pr__name{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.pr__h{font-size:clamp(52px,7.4vw,124px);line-height:.88;--measure:12ch}
.pr__sub{color:var(--ink)}
html[lang=ar] .pr__name{text-transform:none;font-size:13px}

.hl{padding-top:clamp(24px,3vw,48px);scroll-margin-top:calc(var(--hdr) + 60px)}
.hl__grid{list-style:none;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.hl__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.hl__grid{grid-template-columns:repeat(3,1fr)}.hl__grid--4{grid-template-columns:repeat(4,1fr)}.hl__grid--5{grid-template-columns:repeat(6,1fr)}.hl__grid--5 > li{grid-column:span 2}.hl__grid--5 > li:nth-child(n+4){grid-column:span 3}}
.hlc{display:grid;align-content:start;gap:12px;min-height:clamp(170px,20vw,300px);padding:clamp(20px,2vw,28px);border-radius:var(--r3)}
.hlc--saffron{background:var(--saffron);color:var(--ink)}
.hlc--vermilion{background:var(--vermilion);color:var(--ink)}
.hlc--ink{background:var(--ink);color:var(--paper)}
.hlc--ink .hlc__t{color:var(--saffron)}
.hlc__n{font:500 12px var(--f-mono);letter-spacing:.06em;margin-bottom:auto;padding-bottom:clamp(14px,4vw,72px)}
.hlc__t{font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:clamp(28px,2.6vw,40px);line-height:.98;letter-spacing:-.03em}
.hlc__b{font-size:17px;line-height:1.4;max-width:30ch}
html[lang=ar] .hlc__t{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.2}

.ft{border-top:2px solid var(--ink)}
.ft__in{display:grid;gap:clamp(36px,4vw,64px);align-items:start}
@media (min-width:1000px){.ft__in--dev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.ftl__list{list-style:none;margin-top:clamp(32px,4vw,56px);border-top:2px solid var(--ink)}
.ftl{display:flex;align-items:center;gap:16px;min-height:64px;padding:12px 4px;border-bottom:1px solid var(--rule);font:600 clamp(17px,1.4vw,20px)/1.3 var(--f-body)}
.ftl__m{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--saffron);color:var(--ink)}
.ftl__m svg{width:12px;height:12px;fill:currentColor}
.dev{margin:0;display:grid;gap:12px;justify-items:center;padding:clamp(20px,3vw,44px);border-radius:var(--r3);background:var(--vermilion)}
@media (min-width:1000px){.dev{position:sticky;top:calc(var(--hdr) + 84px)}}
.dev__screen{width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:5px solid var(--ink);background:var(--ink);box-shadow:10px 10px 0 var(--ink)}
.dev--phone .dev__screen{width:min(100%,300px);aspect-ratio:9/16;border-radius:30px;border-width:7px}
[dir=rtl] .dev__screen{box-shadow:-10px 10px 0 var(--ink)}
.dev figcaption .tags li{color:var(--ink);border-color:var(--ink)}

.bf{border-top:2px solid var(--ink)}
.bf__list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(32px,4vw,56px)}
.bf__list li{display:inline-flex;align-items:center;min-height:56px;padding:0 22px;border:2px solid var(--ink);border-radius:var(--rp);
  font-family:var(--f-display);font-weight:850;font-variation-settings:"VOLM" 40;font-size:clamp(20px,1.9vw,28px);letter-spacing:-.02em}
.bf__list li:nth-child(4n+1){background:var(--saffron)}
.bf__list li:nth-child(4n+3){background:var(--vermilion)}
html[lang=ar] .bf__list li{font-family:var(--f-ar-display);font-weight:700;letter-spacing:0}

.iu{padding-top:0}
.iu__in{display:grid;gap:clamp(28px,4vw,48px)}
@media (min-width:1000px){.iu__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.iu__list{list-style:none;border-top:2px solid var(--ink)}
.iu__a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:20px 8px;border-bottom:1px solid var(--rule);text-decoration:none;transition:background-color var(--d2)}
.iu__name{font-family:var(--f-display);font-weight:850;font-variation-settings:"VOLM" 40;font-size:clamp(26px,2.6vw,40px);line-height:1;letter-spacing:-.03em}
.iu__line{grid-column:1;color:var(--stone);font-size:17px}
.iu__go{grid-row:1 / span 2;grid-column:2;font-size:26px}
@media (hover:hover){a.iu__a:hover{background:var(--paper-2)}a.iu__a:hover .iu__name{color:var(--cobalt)}}
html[lang=ar] .iu__name{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.2}

.specs{border-top:2px solid var(--ink)}
.specs__in{display:grid;gap:clamp(28px,4vw,48px)}
@media (min-width:1000px){.specs__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.specs__dl{margin:0;border-top:2px solid var(--ink)}
.specs__dl div{display:grid;gap:4px 24px;padding:18px 4px;border-bottom:1px solid var(--rule)}
@media (min-width:640px){.specs__dl div{grid-template-columns:220px minmax(0,1fr);align-items:baseline}}
.specs__dl dt{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.specs__dl dd{margin:0;font:600 clamp(17px,1.4vw,20px)/1.35 var(--f-body)}
html[lang=ar] .specs__dl dt{text-transform:none;font-size:13px}
.p-product .svp{border-top:2px solid var(--ink);padding-top:var(--sec)}
.pr-h .prod__label{background:var(--saffron);border-color:var(--ink);color:var(--ink)}

/* ================================================================ phase 2 · studio */
.st-h{padding-block:8px clamp(56px,7vw,112px)}
.st-h__h{display:block;font-family:var(--f-display);font-weight:var(--w-display);font-variation-settings:"FLAR" 0,"VOLM" var(--volm);
  font-size:clamp(52px,9.4vw,164px);line-height:.86;letter-spacing:var(--tr-mega);margin:clamp(20px,4vw,56px) 0 clamp(32px,4vw,64px)}
.st-h__l{display:block}
.st-h__l2{color:var(--cobalt)}
html[lang=ar] .st-h__h{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.15}
.st-h__grid{display:grid;gap:36px;align-items:start}
@media (min-width:1000px){.st-h__txt{padding-top:clamp(0px,4vw,64px)}}
@media (min-width:1000px){.st-h__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(40px,5vw,96px)}}
.st-h__txt{display:grid;gap:28px}
.st-h__sub{font-size:clamp(22px,2.2vw,34px);line-height:1.22;letter-spacing:-.015em;max-width:26ch;font-weight:500}
.st__spec{padding-top:18px;border-top:1px solid var(--rule)}
.st-h__fig{margin:0;display:grid;gap:10px}
.st-h__fig .plate{aspect-ratio:4/3}

.proc{border-top:2px solid var(--ink)}
.proc__list{list-style:none;margin-top:clamp(40px,5vw,80px);border-top:2px solid var(--ink)}
.proc__i{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px 16px;padding:24px 0 28px;border-bottom:1px solid var(--rule)}
.proc__c{grid-column:2;display:grid;gap:4px}
@media (min-width:900px){.proc__i{grid-template-columns:88px minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;padding:30px 0 34px}.proc__c{grid-column:auto}}
.proc__n{font-family:var(--f-display);font-weight:850;font-variation-settings:"VOLM" 40;font-size:clamp(34px,3.6vw,60px);line-height:.9;letter-spacing:-.04em;color:var(--cobalt);grid-row:span 3}
@media (min-width:900px){.proc__n{grid-row:auto}}
.proc__t{font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:clamp(28px,2.8vw,44px);line-height:.98;letter-spacing:-.025em}
html[lang=ar] .proc__t{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.2}
.proc__who{display:inline-flex;align-items:center;gap:8px;font:500 11.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.proc__who::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid currentColor}
.proc__c--us .proc__who{color:var(--ink)}
.proc__c--us .proc__who::before{background:var(--cobalt);border-color:var(--cobalt)}
.proc__c p:last-child{font-size:17px;line-height:1.45;max-width:34ch}
html[lang=ar] .proc__who{text-transform:none;font-size:13px}

/* studio "AI speed. Human taste.": the chair steps aside for the title (the plate starts 30 % in, fading up from Ink) */
.ai .sf__head .d1{width:min(100%,9ch);container-type:inline-size}   /* hard measure: the chair keeps the rest (AR "الاصطناعي." ran into it) */
.p-studio .ai .sf__platepic img{object-position:78% 50%}
@media (min-width:1000px){
  .p-studio .ai .sf__platepic{inset-inline-start:30%}
  .p-studio .ai .sf__platepic::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--stage) 0,rgba(20,18,26,0) 34%)}
  [dir=rtl] .p-studio .ai .sf__platepic::after{background:linear-gradient(to left,var(--stage) 0,rgba(20,18,26,0) 34%)}
}
.ai__cols{display:none}
@media (min-width:800px){.ai__cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:14px;border-bottom:1px solid var(--stage-line)}
  .ai__cols p{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stage-quiet)}}
.ai__list{list-style:none}
.ai__row{display:grid;gap:10px;padding:22px 0;border-bottom:1px solid var(--stage-line)}
@media (min-width:800px){.ai__row{grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding:28px 0}}
.ai__c{display:grid;gap:10px;justify-items:start}
.ai__c p{font:600 clamp(18px,1.6vw,23px)/1.3 var(--f-body);letter-spacing:-.01em;color:var(--stage-quiet)}
.ai__c--p p{color:var(--paper)}
.ai__c--p{padding-inline-start:18px;border-inline-start:3px solid var(--saffron)}
@media (min-width:800px){.ai__c--p{padding-inline-start:24px}}
.ai__tool{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--rp);background:var(--saffron);color:var(--ink);font:500 12px var(--f-mono);letter-spacing:.04em}
.ai__honest{margin-top:clamp(36px,4vw,56px);font:700 clamp(20px,2vw,30px)/1.25 var(--f-body);letter-spacing:-.015em;max-width:34ch;color:var(--paper)}
html[lang=ar] :is(.ai__c p,.ai__honest){font-family:var(--f-ar-body);letter-spacing:0;line-height:1.5}
html[lang=ar] .ai__cols p{text-transform:none;font-size:13px}

.stl__in{display:grid;gap:40px;align-items:center}
@media (min-width:1000px){.stl__in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,96px)}}
.stl__txt{display:grid;gap:24px}
.stl__fig{margin:0;display:grid;gap:10px}
.stl__fig .pic{border-radius:var(--r3);overflow:hidden;aspect-ratio:4/3.4}
.stl__fig .pic img{width:100%;height:100%;object-fit:cover}

.stb{background:var(--saffron);color:var(--ink);--focus:var(--ink);padding-block:var(--sec)}
.stb__in{display:grid;gap:clamp(20px,3vw,40px)}
.stb__h{font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:var(--fs-d2);line-height:.9;letter-spacing:var(--tr-d);--measure:14ch}
html[lang=ar] .stb__h{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.15}
.stb__clock{font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:clamp(120px,26vw,420px);line-height:.8;letter-spacing:-.06em;
  font-feature-settings:"tnum" 1;color:var(--cobalt);margin-inline-start:-.04em}
html[dir=rtl] .stb__clock{text-align:end}
.stb__meta{display:grid;gap:10px;max-width:60ch;font-size:var(--fs-lead);line-height:1.4}
@media (min-width:1000px){.stb__meta{grid-template-columns:repeat(3,1fr);max-width:none;gap:32px;padding-top:24px;border-top:2px solid var(--ink)}}
.stb__line{font-weight:700}

.stf__in{display:grid;gap:24px;justify-items:start}
.stf__line{font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:var(--fs-d2);line-height:.92;letter-spacing:var(--tr-d);--measure:16ch}
html[lang=ar] .stf__line{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.2}
.stf__mail .mail{font-size:var(--fs-lead)}

/* ================================================================ phase 2 · start a project (the brief) */
.js .no-js-only{display:none!important}
.br{padding-block:8px var(--sec)}
.br__in{display:grid;gap:clamp(24px,3vw,40px)}
@media (min-width:1000px){.br__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,96px);align-items:start}.br__side{position:sticky;top:calc(var(--hdr) + 16px)}}
.br__side{display:grid;gap:18px;align-content:start}
.br__h{display:block;font-family:var(--f-display);font-weight:var(--w-display);font-variation-settings:"FLAR" 0,"VOLM" var(--volm);
  font-size:clamp(52px,7.6vw,128px);line-height:.86;letter-spacing:var(--tr-mega);margin-top:clamp(8px,3vw,40px);margin-bottom:clamp(12px,1.6vw,24px)}
html[lang=ar] .br__h{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.15}
.br__sub{font-size:var(--fs-lead);line-height:1.35;max-width:26ch}
.br__mail{font-size:var(--fs-small);color:var(--stone)}
.pbar{display:grid;gap:10px;max-width:380px;margin-top:6px}
.pbar__t{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
html[lang=ar] .pbar__t{text-transform:none;font-size:13px}
.pbar__track{height:10px;border-radius:var(--rp);background:var(--paper-2);box-shadow:inset 0 0 0 1.5px var(--ink);overflow:hidden}
.pbar__fill{display:block;height:100%;background:var(--cobalt);transform-origin:0 50%;transform:scaleX(var(--p,.2));transition:transform var(--d3) var(--ease)}
[dir=rtl] .pbar__fill{transform-origin:100% 50%}

.br__form{min-width:0;border:2px solid var(--ink);border-radius:var(--r4);padding:clamp(20px,3vw,44px);background:var(--paper)}
@media (max-width:699px){.br__form{border:0;padding:0;border-radius:0}}
.st{border:0;margin:0;padding:0;min-width:0;display:grid;gap:20px;align-content:start}
.no-js .st + .st,.br__form:not(.is-steps) .st + .st{margin-top:44px;padding-top:36px;border-top:2px solid var(--ink)}
.is-steps .st{display:none}
.is-steps .st.is-on{display:grid;animation:stepin var(--d3) var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateX(calc(28px * var(--dir)))}to{opacity:1;transform:none}}
.st__lg{float:left;width:100%;display:grid;gap:10px;padding:0;margin:0 0 4px}  /* floated: a normal grid item, not a border-straddling legend */
.st__n{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.is-steps .st__n{display:none}
html[lang=ar] .st__n{text-transform:none;font-size:13px}
.st__t{font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:clamp(34px,3.6vw,58px);line-height:.95;letter-spacing:-.03em}
.st__t:focus{outline:none}
html[lang=ar] .st__t{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.2}
.st__help{font-size:15.5px;color:var(--stone);line-height:1.45}
.fld{display:grid;gap:8px;min-width:0}
.fld__l{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0;font-weight:700;font-size:16.5px}
.rq{font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px 4px;border-radius:var(--rp);background:var(--ink);color:var(--paper)}
.rq--opt{background:none;color:var(--stone);box-shadow:inset 0 0 0 1.5px var(--rule)}
html[lang=ar] .rq{text-transform:none;font-family:var(--f-ar-body);font-size:12px}
.fld__in,.fld__ta{width:100%;min-height:58px;padding:14px 18px;border:2px solid var(--ink);border-radius:var(--r2);background:#FFFCF6;
  font:500 18px/1.35 var(--f-body);color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color var(--d2),box-shadow var(--d2)}
.fld__ta{min-height:128px;resize:vertical;font-size:clamp(19px,1.6vw,22px);line-height:1.4}
html[lang=ar] :is(.fld__in,.fld__ta){font-family:var(--f-ar-body)}
.fld__in::placeholder,.fld__ta::placeholder{color:#8C857C}
.fld__in:focus,.fld__ta:focus{outline:none;box-shadow:0 0 0 4px rgba(42,59,255,.28);border-color:var(--cobalt)}
[aria-invalid=true]:is(.fld__in,.fld__ta){border-color:var(--vermilion);box-shadow:0 0 0 4px rgba(255,85,51,.22)}
.fe{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--ink)}
.fe::before{content:"";flex:none;width:10px;height:10px;border-radius:2px;background:var(--vermilion);transform:rotate(45deg)}
.sub{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.sub > legend{float:left;width:100%}
.sub + .sub{margin-top:10px}
.cks{display:flex;flex-wrap:wrap;gap:8px}
.ck{position:relative;display:inline-flex;max-width:100%}
.ck input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ck > span{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 18px;border:1.5px solid var(--ink);border-radius:24px;background:var(--paper);
  font:600 16px/1.2 var(--f-body);transition:background-color var(--d1),color var(--d1),border-color var(--d1)}
html[lang=ar] .ck > span{font-family:var(--f-ar-body)}
.ck__n{font:500 11px var(--f-mono);color:var(--stone)}
.ck input:checked + span{background:var(--cobalt);border-color:var(--cobalt);color:var(--paper)}
.ck input:checked + span .ck__n{color:var(--paper)}
.ck input:focus-visible + span{outline:3px solid var(--cobalt);outline-offset:3px}
.ck--checkbox input:checked + span::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--saffron)}
@media (hover:hover){.ck:hover input:not(:checked) + span{background:var(--paper-2)}}
[data-group][aria-invalid=true] .ck > span{border-color:var(--vermilion)}
.cons{position:relative;display:flex;align-items:flex-start;gap:14px;min-height:44px;cursor:pointer}
.cons input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cons__box{flex:none;display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--ink);border-radius:8px;background:#FFFCF6}
.cons input:checked + .cons__box{background:var(--cobalt);border-color:var(--cobalt)}
.cons input:checked + .cons__box::after{content:"";width:11px;height:11px;border-radius:3px;background:var(--saffron)}
.cons input:focus-visible + .cons__box{outline:3px solid var(--cobalt);outline-offset:3px}
.cons input[aria-invalid=true] + .cons__box{border-color:var(--vermilion)}
.cons__t{font-weight:600;font-size:16.5px;padding-top:3px}
.fld--cons{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.fld--cons .fe{flex-basis:100%}
.cons + a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:700;color:var(--cobalt);text-underline-offset:4px}
.bot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.file{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.file__in{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file__add{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);font-weight:700;color:var(--cobalt);cursor:pointer}
.file__t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.file__plus{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--saffron);color:var(--ink);font-size:20px;line-height:1;text-decoration:none}
.file__in:focus-visible + .file__add{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:8px}
.file__name{font:500 13px var(--f-mono);overflow-wrap:anywhere}
.file__x{min-height:var(--tap);padding:0 6px;border:0;background:none;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.file__help{flex-basis:100%}
.br__prefill{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r2);background:var(--saffron);font-weight:600}
.br__pre{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;width:fit-content;max-width:100%;padding:6px 6px 6px 18px;border-radius:26px;background:var(--ink);color:var(--paper);font-weight:600}
[dir=rtl] .br__pre{padding:6px 18px 6px 6px}
.br__prex{min-height:var(--tap);padding:0 16px;border-radius:var(--rp);border:1.5px solid var(--paper);background:none;color:var(--paper);font-weight:700;cursor:pointer}
.rc{margin:0;border-top:2px solid var(--ink)}
.rc__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.rc__row dt{grid-column:1;font:500 11.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
html[lang=ar] .rc__row dt{text-transform:none;font-size:13px}
.rc__row dd{grid-column:1;margin:0;font-weight:600;font-size:17px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.rc__row.is-empty dd{color:var(--stone);font-weight:500}
.rc__edit{grid-column:2;grid-row:1 / span 2;min-height:var(--tap);padding:0 16px;border:1.5px solid var(--ink);border-radius:var(--rp);background:none;font-weight:700;cursor:pointer}
@media (hover:hover){.rc__edit:hover{background:var(--ink);color:var(--paper)}}
.br__nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}
.br__next,.br__send{margin-inline-start:auto}
.is-steps .br__send{display:none}
.is-steps.on-5 .br__send{display:inline-flex}
.is-steps.on-5 .br__next{display:none}
@media (max-width:699px){
  .br__nav{position:sticky;bottom:0;z-index:15;background:var(--paper);margin-inline:calc(-1 * var(--gut));padding:12px var(--gut) max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--rule)}
  .br__nav .btn{flex:1 1 0;min-height:56px}
  .br__nav .br__back{flex:0 0 auto}
  .no-js .br__nav{position:static;margin-inline:0;padding-inline:0;border-top:0}
}
.br__send[aria-busy=true]{opacity:.7;pointer-events:none}
.br__fail{margin-top:14px;padding:12px 16px;border-radius:var(--r2);box-shadow:inset 0 0 0 2px var(--vermilion);font-weight:700}
.br__saved{margin-top:12px;font-size:13.5px;color:var(--stone)}
.br__sum{margin-bottom:18px;padding:12px 16px;border-radius:var(--r2);background:var(--vermilion);color:var(--ink);font-weight:700}
.br__nojs{margin-bottom:28px;padding:12px 16px;border-radius:var(--r2);background:var(--saffron);font-weight:600}

/* ================================================================ phase 2 · brief received */
.tk{background:var(--cobalt);color:var(--paper);--fg:var(--paper);--bg:var(--cobalt);--focus:var(--saffron);padding-block:clamp(48px,7vw,112px) var(--sec)}
.tk__in{display:grid;gap:48px;align-items:center}
@media (min-width:1000px){.tk__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,96px)}}
.tk__txt{display:grid;gap:26px;justify-items:start}
.tk__h{font-family:var(--f-display);font-weight:var(--w-display);font-variation-settings:"FLAR" 0,"VOLM" var(--volm);font-size:clamp(60px,9.6vw,168px);line-height:.86;letter-spacing:var(--tr-mega);color:var(--saffron)}
html[lang=ar] .tk__h{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.15}
.tk__sub{font-size:var(--fs-lead);line-height:1.35}
.tk__steps{list-style:none;width:100%;max-width:640px;border-top:2px solid var(--paper)}
.tk__s{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(247,242,232,.3)}
.tk__n{font-family:var(--f-display);font-weight:850;font-size:28px;letter-spacing:-.03em;color:var(--saffron)}
.tk__s p{font-size:var(--fs-lead);line-height:1.35}
.tk__mail{font-size:var(--fs-small)}
.tk__art{margin:0;display:grid;gap:10px}
.tk__art .pic{border-radius:var(--r3);overflow:hidden;aspect-ratio:4/4.6;box-shadow:0 0 0 3px var(--paper)}
.tk__art .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.tk .btn--line{color:var(--paper)}

/* ================================================================ phase 2 · privacy + 404 */
.pv{padding-block:8px var(--sec)}
.pv__head{display:grid;gap:18px;margin:clamp(16px,3vw,48px) 0 clamp(40px,5vw,80px);padding-bottom:clamp(28px,3vw,44px);border-bottom:2px solid var(--ink)}
.pv__title{font-family:var(--f-display);font-weight:var(--w-display);font-variation-settings:"FLAR" 0,"VOLM" var(--volm);font-size:var(--fs-d1);line-height:.86;letter-spacing:var(--tr-mega)}
html[lang=ar] .pv__title{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.15}
.pv__sub{font-size:var(--fs-lead);line-height:1.35;max-width:36ch}
.pv__date{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
html[lang=ar] .pv__date{text-transform:none;font-size:13px}
.pv__in{display:grid;gap:32px}
@media (min-width:1000px){.pv__in{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,5vw,96px)}.pv__toc{position:sticky;top:calc(var(--hdr) + 32px);align-self:start}}
.pv__toc ol{list-style:none;counter-reset:pv;border-top:1px solid var(--rule)}
.pv__toc li{counter-increment:pv;border-bottom:1px solid var(--rule)}
.pv__toc a{display:flex;align-items:center;gap:14px;min-height:var(--tap);padding:6px 0;font-weight:600;text-decoration:none}
.pv__toc a::before{content:counter(pv,decimal-leading-zero);font:500 11.5px var(--f-mono);color:var(--stone)}
@media (hover:hover){.pv__toc a:hover{color:var(--cobalt)}}
@media (max-width:999px){.pv__toc{display:none}}
.pv__body{display:grid;gap:clamp(32px,3.4vw,48px);max-width:62ch}
.pv__s{display:grid;gap:12px;scroll-margin-top:calc(var(--hdr) + 24px)}
.pv__h{font-family:var(--f-display);font-weight:850;font-variation-settings:"VOLM" 40;font-size:clamp(26px,2.4vw,36px);line-height:1;letter-spacing:-.025em}
html[lang=ar] .pv__h{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.3}
.pv__s p{font-size:18px;line-height:1.6}

.nf{padding-block:clamp(24px,4vw,64px) var(--sec)}
.nf__in{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:1000px){.nf__in{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}}
.nf__big{position:relative;display:grid;margin:0;font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;
  font-size:clamp(140px,34vw,280px);line-height:.8;letter-spacing:-.07em;isolation:isolate}
@media (min-width:1000px){.nf__big{font-size:min(19vw,300px)}}
.nf__big span{grid-area:1/1}
.nf__a{color:var(--cobalt)}
.nf__b{color:var(--vermilion);mix-blend-mode:multiply;transform:translate(.07em,.05em)}
.io .nf__b{animation:nfslip 1.6s var(--ease) both .2s}
@keyframes nfslip{from{transform:translate(0,0)}to{transform:translate(.07em,.05em)}}
.nf__txt{display:grid;gap:26px;justify-items:start}
.nf__h{font-family:var(--f-display);font-weight:850;font-variation-settings:"FLAR" 0,"VOLM" 40;font-size:clamp(40px,4.8vw,80px);line-height:.92;letter-spacing:-.035em;--measure:14ch}
html[lang=ar] .nf__h{font-family:var(--f-ar-display);font-weight:800;letter-spacing:0;line-height:1.2}
.nf__search{display:flex;gap:8px;width:100%;max-width:560px}
.nf__search .search{min-width:0}
.nf__go{min-width:56px;padding:0;min-height:56px}
.nf__go svg{width:20px;height:20px}
.nf__langs{margin-top:4px}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .io .rv,.io .rv .wi,.io .hero .wi,.io [data-kinetic] .wi{opacity:1;transform:none;font-variation-settings:"wght" 850,"FLAR" 0,"VOLM" var(--volm)}
  .marq__track{animation:none!important}
  .sf__player{transform:none!important}
  .hero__set{transform:none!important}
}

/* ---- case meta: our products this project runs on (7CEAS; founder decision 2026-09-30) ---- */
.cm__meta .cm__used{grid-column:1/-1}
.cm__pl{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:6px 0 0;padding:0}
.cm__prod{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 18px;border:2px solid var(--ink);border-radius:var(--rp);
  color:var(--ink);font-weight:700;font-size:15.5px;text-decoration:none;transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease)}
@media (hover:hover){.cm__prod:hover{background:var(--ink);color:var(--paper)}.cm__prod:hover .arr{translate:calc(4px * var(--dir)) 0}}
.cm__prod:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ==========================================================================================
   Webixio v3 · fit.css · display-fit ladder (generated: one rule per tenth of an em, fw10..fw200)
   words() (sitegen/ui.py) wraps each kinetic headline in .fit.fwNN, NN = its longest unbreakable word in tenths of
   an em, measured at build time in the real display fonts (sitegen/fit.py). The CSP allows no inline styles, so the
   width travels as a class and this ladder turns it into --fw. The .fit rules themselves live in site.css.
   ========================================================================================== */
.fw10{--fw:1}.fw11{--fw:1.1}.fw12{--fw:1.2}.fw13{--fw:1.3}.fw14{--fw:1.4}.fw15{--fw:1.5}.fw16{--fw:1.6}.fw17{--fw:1.7}.fw18{--fw:1.8}.fw19{--fw:1.9}
.fw20{--fw:2}.fw21{--fw:2.1}.fw22{--fw:2.2}.fw23{--fw:2.3}.fw24{--fw:2.4}.fw25{--fw:2.5}.fw26{--fw:2.6}.fw27{--fw:2.7}.fw28{--fw:2.8}.fw29{--fw:2.9}
.fw30{--fw:3}.fw31{--fw:3.1}.fw32{--fw:3.2}.fw33{--fw:3.3}.fw34{--fw:3.4}.fw35{--fw:3.5}.fw36{--fw:3.6}.fw37{--fw:3.7}.fw38{--fw:3.8}.fw39{--fw:3.9}
.fw40{--fw:4}.fw41{--fw:4.1}.fw42{--fw:4.2}.fw43{--fw:4.3}.fw44{--fw:4.4}.fw45{--fw:4.5}.fw46{--fw:4.6}.fw47{--fw:4.7}.fw48{--fw:4.8}.fw49{--fw:4.9}
.fw50{--fw:5}.fw51{--fw:5.1}.fw52{--fw:5.2}.fw53{--fw:5.3}.fw54{--fw:5.4}.fw55{--fw:5.5}.fw56{--fw:5.6}.fw57{--fw:5.7}.fw58{--fw:5.8}.fw59{--fw:5.9}
.fw60{--fw:6}.fw61{--fw:6.1}.fw62{--fw:6.2}.fw63{--fw:6.3}.fw64{--fw:6.4}.fw65{--fw:6.5}.fw66{--fw:6.6}.fw67{--fw:6.7}.fw68{--fw:6.8}.fw69{--fw:6.9}
.fw70{--fw:7}.fw71{--fw:7.1}.fw72{--fw:7.2}.fw73{--fw:7.3}.fw74{--fw:7.4}.fw75{--fw:7.5}.fw76{--fw:7.6}.fw77{--fw:7.7}.fw78{--fw:7.8}.fw79{--fw:7.9}
.fw80{--fw:8}.fw81{--fw:8.1}.fw82{--fw:8.2}.fw83{--fw:8.3}.fw84{--fw:8.4}.fw85{--fw:8.5}.fw86{--fw:8.6}.fw87{--fw:8.7}.fw88{--fw:8.8}.fw89{--fw:8.9}
.fw90{--fw:9}.fw91{--fw:9.1}.fw92{--fw:9.2}.fw93{--fw:9.3}.fw94{--fw:9.4}.fw95{--fw:9.5}.fw96{--fw:9.6}.fw97{--fw:9.7}.fw98{--fw:9.8}.fw99{--fw:9.9}
.fw100{--fw:10}.fw101{--fw:10.1}.fw102{--fw:10.2}.fw103{--fw:10.3}.fw104{--fw:10.4}.fw105{--fw:10.5}.fw106{--fw:10.6}.fw107{--fw:10.7}.fw108{--fw:10.8}.fw109{--fw:10.9}
.fw110{--fw:11}.fw111{--fw:11.1}.fw112{--fw:11.2}.fw113{--fw:11.3}.fw114{--fw:11.4}.fw115{--fw:11.5}.fw116{--fw:11.6}.fw117{--fw:11.7}.fw118{--fw:11.8}.fw119{--fw:11.9}
.fw120{--fw:12}.fw121{--fw:12.1}.fw122{--fw:12.2}.fw123{--fw:12.3}.fw124{--fw:12.4}.fw125{--fw:12.5}.fw126{--fw:12.6}.fw127{--fw:12.7}.fw128{--fw:12.8}.fw129{--fw:12.9}
.fw130{--fw:13}.fw131{--fw:13.1}.fw132{--fw:13.2}.fw133{--fw:13.3}.fw134{--fw:13.4}.fw135{--fw:13.5}.fw136{--fw:13.6}.fw137{--fw:13.7}.fw138{--fw:13.8}.fw139{--fw:13.9}
.fw140{--fw:14}.fw141{--fw:14.1}.fw142{--fw:14.2}.fw143{--fw:14.3}.fw144{--fw:14.4}.fw145{--fw:14.5}.fw146{--fw:14.6}.fw147{--fw:14.7}.fw148{--fw:14.8}.fw149{--fw:14.9}
.fw150{--fw:15}.fw151{--fw:15.1}.fw152{--fw:15.2}.fw153{--fw:15.3}.fw154{--fw:15.4}.fw155{--fw:15.5}.fw156{--fw:15.6}.fw157{--fw:15.7}.fw158{--fw:15.8}.fw159{--fw:15.9}
.fw160{--fw:16}.fw161{--fw:16.1}.fw162{--fw:16.2}.fw163{--fw:16.3}.fw164{--fw:16.4}.fw165{--fw:16.5}.fw166{--fw:16.6}.fw167{--fw:16.7}.fw168{--fw:16.8}.fw169{--fw:16.9}
.fw170{--fw:17}.fw171{--fw:17.1}.fw172{--fw:17.2}.fw173{--fw:17.3}.fw174{--fw:17.4}.fw175{--fw:17.5}.fw176{--fw:17.6}.fw177{--fw:17.7}.fw178{--fw:17.8}.fw179{--fw:17.9}
.fw180{--fw:18}.fw181{--fw:18.1}.fw182{--fw:18.2}.fw183{--fw:18.3}.fw184{--fw:18.4}.fw185{--fw:18.5}.fw186{--fw:18.6}.fw187{--fw:18.7}.fw188{--fw:18.8}.fw189{--fw:18.9}
.fw190{--fw:19}.fw191{--fw:19.1}.fw192{--fw:19.2}.fw193{--fw:19.3}.fw194{--fw:19.4}.fw195{--fw:19.5}.fw196{--fw:19.6}.fw197{--fw:19.7}.fw198{--fw:19.8}.fw199{--fw:19.9}
.fw200{--fw:20}