/* v185 (4 Nov 2026) Fonts served from this site (assets/fonts/), no longer from Google: the same WOFF2 files Google
   Fonts serves today (checked byte for byte), the same subsets, weights and unicode ranges, font-display swap; only the
   Latin, Latin Extended and Arabic subsets the site's text uses. Inter Tight, Inter and Cairo are variable fonts (one file
   per subset for every weight); Tajawal is one file per weight. Licences: assets/fonts/OFL.txt. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/inter-tight-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/inter-tight-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/inter-tight-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/inter-tight-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-tight-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-tight-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-tight-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-tight-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-tight-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-tight-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-tight-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-tight-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/cairo-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/cairo-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/cairo-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/tajawal-arabic-300-normal.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/tajawal-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ==========================================================================
   JoCanvas Design Studio — site.css
   Brand DNA: hairline geometric "Jo" + bold, widely tracked "CANVAS".
   Headlines take the hairline (Poppins 200/300), labels take tracked caps
   (Poppins 600), body is Inter, Arabic is Cairo. Monochrome.
   ========================================================================== */

:root{
  --ground:#FBFBF9; --surface:#F2F2EF; --ink:#0A0A0A; --ink-2:#545454; --muted:#737373;
  --line:#D6D6D2; --line-soft:#E7E7E3; --tint:#E6E6E2;
  --display:"Poppins","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Cairo","Helvetica Neue",Arial,sans-serif;
  --ar:"Inter","Cairo","Segoe UI",Tahoma,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --sec:clamp(64px,9vw,128px);
  --max:1320px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;padding-inline:var(--gutter);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.ar body{font-family:var(--ar);line-height:1.85}
img,video{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:400}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.container{max-width:var(--max);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;inset-inline-start:16px;top:8px;z-index:100;background:var(--ink);color:var(--ground);padding:8px 12px}
.arr{display:inline-block;transition:transform .2s}
html.ar .arr{transform:scaleX(-1)}
.muted{color:var(--muted)}
.ltr{direction:ltr;unicode-bidi:isolate}

/* ---- type ---- */
.eyebrow,.label{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;line-height:1.6}
.eyebrow{color:var(--ink)}
.label{color:var(--muted)}
html.ar .eyebrow,html.ar .label{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:13.5px}
.h-hero{font-family:var(--display);font-weight:200;font-size:clamp(2.9rem,8.4vw,8rem);line-height:1.02;letter-spacing:-.035em;max-width:12ch}
.h1{font-family:var(--display);font-weight:200;font-size:clamp(2.5rem,6.4vw,5.6rem);line-height:1.05;letter-spacing:-.035em;max-width:16ch}
.h2{font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.12;letter-spacing:-.025em;max-width:20ch}
html.ar .h-hero,html.ar .h1,html.ar .h2,html.ar h3{font-family:var(--ar);letter-spacing:0}
html.ar .h-hero{font-weight:200;line-height:1.3;font-size:clamp(2.3rem,6.4vw,5.8rem);max-width:14ch}
html.ar .h1{font-weight:300;line-height:1.3;font-size:clamp(2.1rem,5vw,4.3rem)}
html.ar .h2{font-weight:300;line-height:1.35;font-size:clamp(1.7rem,3.6vw,2.9rem)}
.lede{font-size:clamp(1.08rem,1.5vw,1.26rem);line-height:1.55;max-width:44ch}
.sec-lede{max-width:60ch;font-size:clamp(1.02rem,1.4vw,1.15rem);color:var(--ink-2)}
.page-head .sec-lede{color:var(--ink);font-size:clamp(1.05rem,1.6vw,1.25rem)}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);background:rgba(251,251,249,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:24px;padding-top:var(--nav-drop);min-height:calc(86px + var(--nav-drop))}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{height:58px;width:auto}
.nav-links{display:flex;gap:4px;margin-inline-start:auto}
.nav-links a{text-decoration:none;padding:8px 12px;font-size:15px;color:var(--ink-2);border-bottom:1.5px solid transparent}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:10px}
.lang{font-size:14px;text-decoration:none;border:1px solid var(--line);color:var(--ink);padding:8px 14px;min-width:78px;text-align:center}
.lang:hover{border-color:var(--ink)}
html:not(.ar) .lang{font-family:var(--ar)}
html.ar .lang{font-family:var(--body)}
.menu-btn{display:none;font-size:14px;background:none;border:1px solid var(--line);padding:8px 14px;cursor:pointer}
.mobile-menu{display:none}
@media (max-width:900px){
  .nav-links{display:none}
  .menu-btn{display:inline-block}
  .nav-actions{margin-inline-start:auto}
  .nav-actions .btn{display:none}
}
@media (max-width:620px){.brand img{height:48px}.nav-in{min-height:calc(72px + var(--nav-drop))}}

/* ---- buttons & links ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:15px;font-weight:500;text-decoration:none;padding:13px 20px;border:1.5px solid var(--ink);cursor:pointer;line-height:1.2;transition:background .15s,color .15s,border-color .15s}
html.ar .btn{font-family:var(--ar);font-weight:600}
.btn.primary{background:var(--ink);color:var(--ground)}
.btn.primary:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.sm{padding:9px 14px;font-size:14px}
.btn:hover .arr{transform:translateX(3px)}
html.ar .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.link:hover{color:var(--ink-2);border-color:var(--ink-2)}
.ctas{display:flex;flex-wrap:wrap;gap:10px}

/* ---- sections ---- */
.sec{padding-block:var(--sec) 0}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,56px)}
.page-head{padding-block:clamp(48px,7vw,96px) 0;display:grid;gap:18px}

/* ---- hero ---- */
.hero{padding-block:clamp(40px,6vw,88px) 0;display:grid;gap:clamp(20px,2.4vw,32px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:stretch}
@media (max-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;gap:36px;padding-top:4px}
.hero-top{display:grid;gap:26px}
.legend{display:grid;border-top:1px solid var(--line)}
.legend .hint{font-size:13px;color:var(--muted);padding-top:10px}
.lg{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;text-align:start;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 0;cursor:pointer}
.lg .kb,.kb{width:24px;height:24px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:12px;font-weight:500;flex:none}
.lg[aria-pressed="true"] .kb{background:var(--ink);color:var(--ground)}
.lg-t{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.lg b{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.01em}
html.ar .lg b{font-family:var(--ar);font-weight:600}
.lg small{color:var(--muted);font-size:14.5px}
.hero-fig{margin:0;display:grid;gap:10px;border:1px solid var(--line);background:var(--ground);padding:clamp(12px,2vw,24px)}
.hero-fig figcaption{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:10px}
.hero-fig figcaption .fig{font-family:var(--display);font-weight:600;letter-spacing:.2em;font-size:10.5px;padding-top:2px}
.axon{width:100%;height:auto;max-height:560px;display:block;direction:ltr}
.axon path{vector-effect:non-scaling-stroke;transition:opacity .25s}
.axon .g{stroke:var(--line);stroke-width:.8;fill:none}
.axon .s{stroke:var(--ink);stroke-width:1.2;fill:none;stroke-linejoin:round}
.axon .sf{stroke:var(--ink);stroke-width:1.1;fill:var(--surface);stroke-linejoin:round}
.axon .poche{fill:var(--ink);stroke:var(--ink);stroke-width:1}
.axon .idbg{fill:var(--ground);stroke:none}
.axon .idf{fill:url(#jcHatch);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.axon .hl{stroke:var(--ink);stroke-width:1.1}
.axon .id{fill:none;stroke:var(--ink);stroke-width:1.8}
.axon .st{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4}
.axon .sl{fill:none;stroke:var(--ink);stroke-width:1.1}
.axon .sts{fill:var(--ink);stroke:var(--ink);stroke-width:1.2}
.axon .dim path{stroke:var(--muted);stroke-width:.9;fill:none}
.axon .idl{fill:none;stroke:var(--ink);stroke-width:1.1}
.axon .hz{fill:none;stroke:var(--muted);stroke-width:.7;stroke-dasharray:2 4;opacity:.7}
.axon .earth{fill:url(#jcHatch);stroke:none;opacity:.45}
.axon .gl{fill:none;stroke:var(--ink);stroke-width:1.6}
.axon .dim .hzl{stroke:var(--muted);stroke-width:.7;stroke-dasharray:6 3 1 3}
.axon .dim .vp{fill:var(--ground);stroke:var(--ink);stroke-width:1.1}
.axon .dim .vpx{stroke:var(--ink);stroke-width:.9}
.axon .dim .lvl{fill:var(--ink);stroke:none}
.axon .dim text{font-family:var(--body);font-size:11px;fill:var(--muted);letter-spacing:.06em}
.axon .kn{transition:opacity .25s}
.axon .kn .leader{stroke:var(--ink);stroke-width:.9;fill:none}
.axon .kn .dot{fill:var(--ink)}
.axon .kn .bub{fill:var(--ground);stroke:var(--ink);stroke-width:1}
.axon .kn text{font-family:var(--display);font-size:12px;fill:var(--ink);font-weight:500}
.hero-fig[data-focus="identity"] .axon [data-l]:not([data-l="identity"]),
.hero-fig[data-focus="space"] .axon [data-l]:not([data-l="space"]),
.hero-fig[data-focus="story"] .axon [data-l]:not([data-l="story"]),
.hero-fig[data-focus="build"] .axon [data-l]:not([data-l="build"]){opacity:.14}

/* ---- proof strip ---- */
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);margin-top:clamp(40px,5vw,72px)}
.proof > div{padding-block:22px;padding-inline:0 20px;display:grid;gap:6px;align-content:start;border-inline-end:1px solid var(--line)}
.proof > div + div{padding-inline-start:20px}
.proof > div:last-child{border-inline-end:0}
.proof .num{font-family:var(--display);font-weight:200;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;letter-spacing:-.03em}
.proof p{font-size:14.5px;color:var(--ink-2);max-width:30ch}
@media (max-width:820px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}.proof > div:nth-child(2){border-inline-end:0}.proof > div:nth-child(3){padding-inline-start:0}.proof > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:420px){.proof{grid-template-columns:minmax(0,1fr)}.proof > div,.proof > div + div{border-inline-end:0;padding-inline:0;border-bottom:1px solid var(--line)}.proof > div:last-child{border-bottom:0}}

/* ---- why ---- */
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:760px){.why-grid{grid-template-columns:minmax(0,1fr)}}
.col{border:1px solid var(--line);padding:clamp(20px,2.4vw,32px);display:grid;gap:18px;align-content:start}
.col.ours{background:var(--surface);border-color:var(--ink)}
.col h3{font-family:var(--display);font-weight:500;font-size:1.3rem;letter-spacing:-.01em}
html.ar .col h3{font-weight:600}
.col svg{width:100%;max-width:260px;height:auto}
.col svg .b{fill:none;stroke:var(--muted);stroke-width:1.2}
.col svg .bi{fill:var(--tint);stroke:var(--ink);stroke-width:1.2}
.col svg .bo{fill:none;stroke:var(--ink);stroke-width:1.6}
.col svg .dash{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4}
.col svg text{font-family:var(--display);font-weight:600;font-size:8.5px;letter-spacing:.2em;fill:var(--ink-2)}
.list{list-style:none;margin:0;padding:0;display:grid}
.list li{display:grid;grid-template-columns:18px 1fr;gap:12px;padding-block:11px;border-top:1px solid var(--line-soft);font-size:16px}
.list li::before{content:"";width:9px;height:9px;margin-top:.6em}
.list.minus li{color:var(--ink-2)}
.list.minus li::before{border:1.2px solid var(--muted)}
.list.plus li::before{background:var(--ink)}

/* ---- layers ---- */
.layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.layer{padding-block:28px 8px;padding-inline:0 28px;display:grid;gap:14px;align-content:start;border-inline-end:1px solid var(--line)}
.layer + .layer{padding-inline-start:28px}
.layer:last-child{border-inline-end:0}
.layer .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.layer h3{font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.025em;line-height:1.05}
html.ar .layer h3{font-weight:300}
.layer .role{color:var(--ink-2);font-weight:600;font-size:15px}
.layer .desc{color:var(--ink-2);font-size:15.5px;max-width:40ch}
.layer ul{list-style:none;margin:0;padding:0;display:grid}
.layer li{padding-block:9px;border-top:1px solid var(--line-soft);font-size:15.5px}
.layer-img{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.layer-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.layers{grid-template-columns:minmax(0,1fr)}.layer,.layer + .layer{padding-inline:0;border-inline-end:0;border-bottom:1px solid var(--line);padding-bottom:24px}.layer:last-child{border-bottom:0}}
.after{margin-top:28px}

/* ---- film band ---- */
.film{position:relative;margin-inline:calc(-1 * var(--gutter));margin-top:var(--sec);background:#000;color:#FBFBF9;overflow:hidden;min-height:clamp(360px,56vw,720px);display:grid}
.film video,.film .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78}
.film-in{position:relative;display:grid;align-content:end;gap:10px;padding-inline:var(--gutter);padding-block:clamp(32px,5vw,64px);background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 60%)}
.film-in > *{max-width:var(--max);width:100%;margin-inline:auto}
.film .big{font-family:var(--display);font-weight:200;font-size:clamp(2.4rem,6.4vw,6rem);line-height:1.02;letter-spacing:-.035em}
.film .sub{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#D9D9D5}
html.ar .film .big{font-family:var(--ar);font-weight:200;letter-spacing:0;line-height:1.3}
html.ar .film .sub{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:15px}
.film-toggle{position:absolute;inset-inline-end:var(--gutter);top:20px;z-index:2;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.5);color:#fff;font-size:13px;padding:7px 12px;cursor:pointer}

/* ---- whole canvas band ---- */
.band{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);background:var(--ink);color:var(--ground);padding-block:clamp(56px,7vw,104px)}
.band .eyebrow{color:#A3A3A0}
.band-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:start}
@media (max-width:900px){.band-grid{grid-template-columns:minmax(0,1fr)}}
.band h2{font-family:var(--display);font-weight:200;font-size:clamp(2.4rem,5.6vw,5rem);line-height:1.02;letter-spacing:-.035em}
html.ar .band h2{font-family:var(--ar);letter-spacing:0;line-height:1.3;font-weight:200}
.band p{font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:46ch}
.band-left{display:grid;gap:22px;align-content:start}
.band-right{display:grid;gap:28px}
.band .btn.primary{background:var(--ground);color:var(--ink);border-color:var(--ground)}
.band .btn.primary:hover{background:transparent;color:var(--ground)}
.band .btn.ghost{color:var(--ground);border-color:#3A3A3A}
.band .btn.ghost:hover{border-color:var(--ground)}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #2C2C2C}
.stages li{padding-block:18px 4px;padding-inline:0 18px;display:grid;gap:8px;align-content:start;border-inline-end:1px solid #2C2C2C}
.stages li + li{padding-inline-start:18px}
.stages li:last-child{border-inline-end:0}
.stages .n{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.2em;color:#A3A3A0}
.stages b{font-family:var(--display);font-weight:500;font-size:1.15rem}
html.ar .stages b{font-family:var(--ar);font-weight:600}
.stages span{font-size:14.5px;color:#BDBDB9;line-height:1.5}
@media (max-width:620px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}.stages li:nth-child(2){border-inline-end:0}.stages li:nth-child(3){padding-inline-start:0}.stages li:nth-child(-n+2){border-bottom:1px solid #2C2C2C;padding-bottom:18px}}

/* ---- work cards ---- */
.grid-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,36px) clamp(16px,2vw,28px)}
/* ---- website projects: desktop display ---- */
.mac{display:block;width:100%;container-type:inline-size}
.mac-body,.mac-screen,.mac-shot,.mac-stand,.mac-foot,.mac-bar{display:block}
.mac-body{position:relative;box-sizing:border-box;width:100%;
  padding:2.1cqw 2.1cqw 7.2cqw;border-radius:1.9cqw;
  background:linear-gradient(165deg,#3a3a3c,#232325 38%,#1b1b1d);
  box-shadow:inset 0 0 0 .18cqw rgba(255,255,255,.14),0 1.4cqw 2.8cqw rgba(10,10,10,.16)}
.mac-body::before{content:"";position:absolute;top:.85cqw;left:50%;transform:translateX(-50%);
  width:.5cqw;height:.5cqw;border-radius:50%;background:#45454a}
.mac-body::after{content:"";position:absolute;left:50%;bottom:2.5cqw;transform:translateX(-50%);
  width:4.4cqw;height:.5cqw;border-radius:.25cqw;background:rgba(255,255,255,.15)}
.mac-screen{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:.45cqw;
  background:var(--surface);display:flex;flex-direction:column}
.mac-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,.15) 0 26%,rgba(255,255,255,0) 52%)}
.mac-bar{flex:0 0 9%;display:flex;align-items:center;gap:.55cqw;padding:0 1.1cqw;
  background:#e8e8e6;border-bottom:1px solid #d3d3d0;direction:ltr}
.mac-dot{width:.62cqw;height:.62cqw;border-radius:50%;background:#c9c9c6;flex:none}
.mac-url{margin-inline-start:.9cqw;flex:1;height:58%;border-radius:1cqw;background:#f7f7f5;
  display:flex;align-items:center;padding-inline:1cqw;
  font-family:var(--body);font-size:1.45cqw;color:#8a8a86;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden}
.mac-shot{flex:1;min-height:0;width:100%}
.mac-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.mac-stand{position:relative;margin:0 auto;width:17%;height:3cqw;
  background:linear-gradient(90deg,#9a9a9e,#d4d4d6 28%,#b2b2b6 62%,#88888c);
  clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.mac-foot{margin:0 auto;width:32%;height:1cqw;border-radius:0 0 .9cqw .9cqw;
  background:linear-gradient(180deg,#b6b6ba,#8e8e92)}
.card .mac{transition:transform .35s ease}
.card:hover .mac{transform:translateY(-5px)}
.card-media.is-site{aspect-ratio:4/3;overflow:visible;background:none;border:0;display:flex;align-items:center}
.card-media.is-site .mac{width:100%}
@media (max-width:1000px){.grid-work{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid-work{grid-template-columns:minmax(0,1fr)}}
.card{display:grid;gap:10px;text-decoration:none;color:inherit;align-content:start;text-align:start;background:none;border:0;padding:0;cursor:pointer;width:100%}
.card-media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-media img,.card:focus-visible .card-media img{transform:scale(1.03)}
.card-title{font-family:var(--display);font-weight:500;font-size:1.2rem;letter-spacing:-.01em;line-height:1.25;margin-top:4px}
html.ar .card-title{font-family:var(--ar);font-weight:600}
.card-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--display);font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--ink);padding:3px 8px;color:var(--ink)}
html.ar .chip{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:12.5px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.fbtn{font-size:14px;background:none;border:1px solid var(--line);padding:8px 16px;cursor:pointer}
.fbtn:hover{border-color:var(--ink)}
.fbtn[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.archive-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px;margin-block:clamp(48px,6vw,80px) 28px}
.empty-note{grid-column:1/-1;color:var(--muted)}

/* ---- lightbox ---- */
.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:rgba(10,10,10,.96);color:#FBFBF9}
.lb::backdrop{background:rgba(10,10,10,.9)}
.lb-in{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding:clamp(12px,2vw,24px)}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.lb-title{font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:-.01em}
html.ar .lb-title{font-family:var(--ar)}
.lb-sub{font-size:13.5px;color:#A3A3A0}
.lb-stage{position:relative;min-height:0;height:100%}
.lb-stage img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:calc(100% - 120px);max-height:100%;object-fit:contain}
@media (max-width:620px){.lb-stage img{max-width:100%}}
.lb-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:#fff;width:46px;height:46px;display:grid;place-items:center;cursor:pointer;font-size:20px}
.lb-btn:hover{background:rgba(255,255,255,.18)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%)}
.lb-prev{inset-inline-start:0}
.lb-next{inset-inline-end:0}
html.ar .lb-prev span,html.ar .lb-next span{display:inline-block;transform:scaleX(-1)}
.lb-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.lb-thumbs button{flex:none;width:84px;height:60px;padding:0;border:1px solid transparent;background:none;cursor:pointer;opacity:.55}
.lb-thumbs button[aria-current="true"]{opacity:1;border-color:#fff}
.lb-thumbs img{width:100%;height:100%;object-fit:cover}
.lb-count{font-family:var(--display);font-size:12px;letter-spacing:.2em;color:#A3A3A0}

/* ---- testimonials ---- */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1.5px solid var(--ink)}
.quotes figure{margin:0;padding-block:26px;padding-inline:0 28px;display:grid;gap:16px;align-content:space-between;border-inline-end:1px solid var(--line)}
.quotes figure + figure{padding-inline-start:28px}
.quotes figure:nth-child(3n){border-inline-end:0}
.quotes figure:nth-child(3n+1){padding-inline-start:0}
.quotes blockquote{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.45;letter-spacing:-.01em}
html.ar .quotes blockquote{font-family:var(--ar);font-weight:300;letter-spacing:0;line-height:1.8}
.quotes figcaption{font-size:14px;color:var(--ink-2)}
.quotes figcaption b{color:var(--ink);font-weight:600;display:block}
.quotes.all figure{border-bottom:1px solid var(--line)}
@media (max-width:900px){.quotes{grid-template-columns:minmax(0,1fr)}.quotes figure,.quotes figure + figure{padding-inline:0;border-inline-end:0;border-bottom:1px solid var(--line)}}

/* ---- fit ---- */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,64px)}
@media (max-width:760px){.fit{grid-template-columns:minmax(0,1fr)}}
.fit h3{font-family:var(--display);font-weight:500;font-size:1.2rem;margin-bottom:6px}
html.ar .fit h3{font-weight:600}

/* ---- founder ---- */
.founder{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:center;border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
@media (max-width:760px){.founder{grid-template-columns:minmax(0,1fr)}}
.founder .photo{aspect-ratio:4/5;overflow:hidden;background:var(--surface);max-width:420px}
.founder .photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.founder blockquote{margin:0;display:grid;gap:22px}
.founder blockquote p{font-family:var(--display);font-weight:300;font-size:clamp(1.35rem,2.6vw,2.15rem);line-height:1.38;letter-spacing:-.015em;max-width:32ch}
html.ar .founder blockquote p{font-family:var(--ar);font-weight:300;letter-spacing:0;line-height:1.75}
.founder cite{font-style:normal;display:grid;gap:2px}
.founder cite b{font-weight:600}

/* ---- end cta ---- */
.endcta{display:grid;gap:22px;justify-items:start;border-top:1.5px solid var(--ink);padding-top:clamp(40px,5vw,72px);margin-top:var(--sec);margin-bottom:var(--sec)}
.endcta .h2{max-width:18ch}

/* ---- services ---- */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
@media (max-width:960px){.offers{grid-template-columns:minmax(0,1fr)}}
.offer{border:1px solid var(--line);padding:clamp(22px,2.4vw,32px);display:grid;gap:14px;align-content:start;background:var(--surface)}
.offer.sig{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.offer.sig .label{color:#A3A3A0}
.offer h3{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:-.02em;line-height:1.15}
html.ar .offer h3{font-weight:600}
.offer p{font-size:15.5px}
.offer .row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;font-size:14.5px;color:var(--ink-2)}
.offer.sig .row{border-color:#2C2C2C;color:#BDBDB9}
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.process li{padding-block:22px 8px;padding-inline:0 22px;display:grid;gap:10px;align-content:start;border-inline-end:1px solid var(--line)}
.process li + li{padding-inline-start:22px}
.process li:last-child{border-inline-end:0}
.process .n{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.2em}
.process h3{font-family:var(--display);font-weight:400;font-size:1.35rem;letter-spacing:-.02em}
html.ar .process h3{font-weight:600}
.process .dur{font-size:13px;color:var(--muted)}
.process p{font-size:15.5px;color:var(--ink-2)}
@media (max-width:900px){.process{grid-template-columns:repeat(2,minmax(0,1fr))}.process li:nth-child(2){border-inline-end:0}.process li:nth-child(3){padding-inline-start:0}.process li:nth-child(-n+2){border-bottom:1px solid var(--line);padding-bottom:22px}}
@media (max-width:560px){.process{grid-template-columns:minmax(0,1fr)}.process li,.process li + li{padding-inline:0;border-inline-end:0;border-bottom:1px solid var(--line);padding-bottom:20px}}
.faq{border-top:1.5px solid var(--ink);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding-block:18px;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-weight:300;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:20px;max-width:64ch;color:var(--ink-2)}

/* ---- studio ---- */
.namestory{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,88px);align-items:center;border-block:1px solid var(--line);padding-block:clamp(40px,6vw,88px)}
@media (max-width:820px){.namestory{grid-template-columns:minmax(0,1fr)}}
.namestory > img{height:clamp(150px,20vw,250px);width:auto;justify-self:center}
.ns-text{display:grid;gap:22px;align-content:start}
.ns-def{margin:0;display:grid;border-top:1px solid var(--ink)}
.ns-def > div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:20px;padding-block:18px;border-bottom:1px solid var(--line);align-items:baseline}
@media (max-width:560px){.ns-def > div{grid-template-columns:minmax(0,1fr);gap:4px}}
.ns-def dt{font-family:var(--display)}
.ns-def dt.jo{font-weight:200;font-size:clamp(2.6rem,4.6vw,3.8rem);line-height:1;letter-spacing:-.02em}
.ns-def dt.cv{font-weight:600;font-size:13px;letter-spacing:.55em;text-transform:uppercase}
.ns-def dd{margin:0;color:var(--ink-2);max-width:52ch}
.values{border-top:1.5px solid var(--ink)}
.values > div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;padding-block:22px;border-bottom:1px solid var(--line);align-items:baseline}
@media (max-width:700px){.values > div{grid-template-columns:minmax(0,1fr);gap:6px}}
.values h3{font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.015em;line-height:1.35}
html.ar .values h3{font-weight:300}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:820px){.split{grid-template-columns:minmax(0,1fr)}}
.split .img{aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.split .img img{width:100%;height:100%;object-fit:cover}
.split .txt{display:grid;gap:18px;align-content:start}
.offices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:700px){.offices{grid-template-columns:minmax(0,1fr)}}
.office{border-top:1.5px solid var(--ink);padding-top:18px;display:grid;gap:8px}
.office h3{font-family:var(--display);font-weight:300;font-size:1.8rem;letter-spacing:-.02em}
html.ar .office h3{font-weight:300}
.office p{color:var(--ink-2)}
.countries{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.countries li{border:1px solid var(--line);padding:6px 12px;font-size:14.5px}

/* ---- start / form ---- */
.start{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,4vw,72px);align-items:start;margin-bottom:var(--sec)}
@media (max-width:900px){.start{grid-template-columns:minmax(0,1fr)}}
form{display:grid;gap:30px}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:620px){.frow{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:8px}
.field > label,.field legend{font-weight:600;font-size:15px;padding:0}
fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
input[type="text"],input[type="email"],input[type="tel"],textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:12px 14px;width:100%;border-radius:0}
input:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
textarea{min-height:140px;resize:vertical}
::placeholder{color:var(--muted);opacity:1}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-block;border:1px solid var(--line);padding:9px 14px;font-size:15px;cursor:pointer;background:var(--surface);transition:background .15s,color .15s,border-color .15s}
.opt span:hover{border-color:var(--ink)}
.opt input:checked + span{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.opt input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.hp{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;gap:16px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px}
.form-error{border:1.5px solid #9B1C1C;color:#7F1D1D;background:#FDF3F3;padding:14px 16px}
.aside{display:grid;gap:22px;position:sticky;top:110px;border-top:1.5px solid var(--ink);padding-top:20px}
@media (max-width:900px){.aside{position:static}}
.aside ol{list-style:none;margin:0;padding:0;display:grid;counter-reset:s}
.aside ol li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;padding-block:12px;border-bottom:1px solid var(--line-soft);font-size:15.5px}
.aside ol li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.15em;padding-top:4px}
.aside h3{font-family:var(--display);font-weight:500;font-size:1.15rem}
html.ar .aside h3{font-weight:600}
.contact-lines{display:grid;gap:6px;font-size:15.5px}
.contact-lines a{text-decoration:none;border-bottom:1px solid var(--line)}
.contact-lines a:hover{border-color:var(--ink)}

/* ---- footer title block ---- */
.tblock{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);border-top:1.5px solid var(--ink);background:var(--surface)}
.tblock-in{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1.1fr)) minmax(0,.8fr) minmax(0,1fr);border-inline:1px solid var(--line)}
.tblock-in > div{padding:16px 16px 20px;border-inline-end:1px solid var(--line);display:grid;gap:8px;align-content:start;font-size:14.5px}
.tblock-in > div:last-child{border-inline-end:0}
.tblock .label{font-size:9.5px}
html.ar .tblock .label{font-size:12px}
.tblock .brand img{height:84px}
.tblock a{text-decoration:none}
.tblock a:hover{text-decoration:underline}
.tblock-links{display:grid;gap:2px}
@media (max-width:1060px){.tblock-in{grid-template-columns:repeat(2,minmax(0,1fr))}.tblock-in > div{border-bottom:1px solid var(--line)}.tblock-in > div:first-child{grid-column:1/-1;border-inline-end:0}.tblock-in > div:nth-child(odd):not(:first-child){border-inline-end:0}}
@media (max-width:520px){.tblock-in{grid-template-columns:minmax(0,1fr)}.tblock-in > div{border-inline-end:0!important}}
.tblock-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:12px 24px;font-size:12.5px;color:var(--muted)}


/* ==========================================================================
   Wordmark hero (home)
   ========================================================================== */
:root{--nav-drop:26px;--nav-h:calc(79px + var(--nav-drop))}
@media (max-width:620px){:root{--nav-drop:16px;--nav-h:calc(67px + var(--nav-drop))}}
.nav{transition:background-color .35s ease,border-color .35s ease}
.brand .logo-w{display:none}
.brand{transition:opacity .35s ease}
.nav.over:not(.open){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.over:not(.open) .brand{opacity:0;pointer-events:none}
.nav.over:not(.open) .nav-links a{color:rgba(251,251,249,.88)}
.nav.over:not(.open) .nav-links a:hover{color:#fff}
.nav.over:not(.open) .lang,.nav.over:not(.open) .menu-btn{color:#FBFBF9;border-color:rgba(251,251,249,.45)}
.nav.over:not(.open) .lang:hover,.nav.over:not(.open) .menu-btn:hover{border-color:#FBFBF9}
.nav.over:not(.open) .btn.primary{background:#FBFBF9;color:#0A0A0A;border-color:#FBFBF9}
.nav.over:not(.open) .btn.primary:hover{background:transparent;color:#FBFBF9}

.hero-x{position:relative;margin-inline:calc(-1 * var(--gutter));margin-top:calc(-1 * var(--nav-h));height:100svh;min-height:640px;max-height:1100px;background:#0A0A0A;color:#FBFBF9;overflow:hidden;isolation:isolate}
.hx-slides,.hx-slide{position:absolute;inset:0;margin:0}
.hx-slide{opacity:0;transition:opacity 2s ease}
.hx-slide.is-active{opacity:1;z-index:1}
.hx-slide img{width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.02)}
.hx-slide.is-active img{animation:hxZoom 10s ease-out forwards}
@keyframes hxZoom{from{transform:scale(1.02)}to{transform:scale(1.08)}}
.hx-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 32%,rgba(0,0,0,.22) 64%,rgba(0,0,0,.3) 100%),
  rgba(0,0,0,.1)}
.hx-content{position:relative;z-index:3;height:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);padding-block:calc(var(--nav-h) + 24px) clamp(20px,3vw,40px);display:grid;grid-template-rows:1fr auto;gap:clamp(24px,3.4vw,48px)}
.hx-row{align-self:end;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end}
.hx-copy{display:grid;gap:16px}
.hero-x .eyebrow{color:rgba(251,251,249,.92)}
.hx-tag{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,4.8vw,4.6rem);line-height:.98;letter-spacing:-.045em;max-width:19ch;color:#FBFBF9}
html.ar .hx-tag{font-family:var(--ar);font-weight:700;letter-spacing:0;line-height:1.25;font-size:clamp(2rem,4.2vw,4rem)}
.hx-side{display:grid;gap:20px;justify-items:start}
.hero-x .lede{color:rgba(251,251,249,.9);max-width:40ch;font-size:clamp(1.02rem,1.3vw,1.15rem)}
.hero-x .btn.primary{background:#FBFBF9;color:#0A0A0A;border-color:#FBFBF9}
.hero-x .btn.primary:hover{background:transparent;color:#FBFBF9}
.hero-x .btn.ghost{color:#FBFBF9;border-color:rgba(251,251,249,.5)}
.hero-x .btn.ghost:hover{border-color:#FBFBF9}
.hx-foot{display:grid;gap:14px}
.hx-wordmark{display:block;width:100%;height:auto;direction:ltr}
.hx-ctrl{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.hx-bar{width:42px;height:24px;background:none;border:0;padding:0;cursor:pointer;display:grid;align-items:center}
.hx-bar span{display:block;height:2px;background:rgba(251,251,249,.3);position:relative;overflow:hidden}
.hx-bar span::after{content:"";position:absolute;inset:0;background:#FBFBF9;transform:scaleX(0);transform-origin:left center}
html.ar .hx-bar span::after{transform-origin:right center}
.hx-bar.done span::after{transform:scaleX(1)}
.hx-bar[aria-current="true"] span::after{animation:hxBar 8s linear forwards}
@keyframes hxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-x.paused .hx-bar[aria-current="true"] span::after,.hero-x.offscreen .hx-bar[aria-current="true"] span::after,
.hero-x.paused .hx-slide.is-active img,.hero-x.offscreen .hx-slide.is-active img{animation-play-state:paused}
.hx-pause{width:28px;height:28px;margin-inline-start:6px;border:1px solid rgba(251,251,249,.45);background:transparent;color:#FBFBF9;cursor:pointer;display:grid;place-items:center}
.hx-pause:hover{border-color:#FBFBF9}
.hx-pause .ic{width:8px;height:10px;border-inline:2px solid currentColor}
.hero-x.paused .hx-pause .ic{width:0;height:0;border-inline:0;border-block:5px solid transparent;border-inline-start:8px solid currentColor}
html.ar .hero-x.paused .hx-pause .ic{transform:scaleX(-1)}
@media (max-width:860px){
  .hero-x{height:100svh;min-height:600px;max-height:900px}
  .hx-row{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (prefers-reduced-motion:reduce){.hx-slide.is-active img{transform:none}}

/* ==========================================================================
   Type system matched to the bold JoCanvas wordmark
   ========================================================================== */
:root{--display:"Inter Tight","Inter","Cairo","Helvetica Neue",Arial,sans-serif}
.brand img{height:28px;width:auto}
@media (max-width:620px){.brand img{height:22px}}
.nav-in{min-height:calc(78px + var(--nav-drop))}
@media (max-width:620px){.nav-in{min-height:calc(66px + var(--nav-drop))}}
.tblock .brand img{height:36px}
.eyebrow,.label{font-family:var(--display);font-weight:600;letter-spacing:.14em;font-size:11.5px}
.h-hero,.h1{font-weight:200;letter-spacing:-.03em;line-height:1.04}
.h2{font-weight:300;letter-spacing:-.022em;line-height:1.12}
html.ar .h1,html.ar .h2,html.ar .h-hero{font-weight:300;letter-spacing:0;line-height:1.3}
.band h2{font-weight:300;letter-spacing:-.03em;line-height:1.06}
html.ar .band h2{font-weight:300}
.layer h3{font-weight:300;letter-spacing:-.02em}
html.ar .layer h3{font-weight:300}
.proof .num{font-weight:200;letter-spacing:-.03em}
.lg b{font-weight:600}
.card-title{font-weight:600;letter-spacing:-.015em}
.col h3,.fit h3,.aside h3,.done b{font-weight:600}
.stages b{font-weight:600}
.offer h3,.process h3{font-weight:600;letter-spacing:-.025em}
.values h3{font-weight:500;letter-spacing:-.02em}
html.ar .values h3{font-weight:500}
.office h3{font-weight:600;letter-spacing:-.03em}
.founder blockquote p{font-weight:500;letter-spacing:-.025em;line-height:1.28}
html.ar .founder blockquote p{font-weight:400}
.quotes blockquote{font-weight:400;letter-spacing:-.01em}
.lb-title{font-weight:500}
.film .big{font-weight:200;letter-spacing:-.03em;line-height:1.04}
html.ar .film .big{font-weight:300;letter-spacing:0}
.film .sub,.stages .n,.process .n,.chip,.hero-fig figcaption .fig,.lb-count,.aside ol li::before{letter-spacing:.14em}
.namestory > img{height:auto;width:min(100%,520px)}
.ns-def dt.jo,.ns-def dt.cv{font-weight:700;font-size:clamp(2.4rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.045em;text-transform:none}

/* drawing + legend moved into "What we do" */
.explain{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(40px,5vw,64px)}
@media (max-width:900px){.explain{grid-template-columns:minmax(0,1fr)}}

/* four layers */
.layer h3{font-size:clamp(1.7rem,2.4vw,2.3rem)}
@media (min-width:861px){
  .layers{grid-template-columns:repeat(4,minmax(0,1fr))}
  .layer{padding-inline:0 24px}
  .layer + .layer{padding-inline-start:24px}
}
@media (max-width:1100px) and (min-width:861px){
  .layers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layer:nth-child(2n){border-inline-end:0}
  .layer:nth-child(2n+1){padding-inline-start:0}
  .layer:nth-child(-n+2){border-bottom:1px solid var(--line);padding-bottom:24px}
}

/* ================= minimal home: one screen, no scroll ================= */
body.home-min{position:relative;min-height:100svh;overflow:hidden;
  display:grid;grid-template-rows:minmax(0,1fr) auto}
body.home-min > .nav{position:absolute;top:0;inset-inline:0;margin-inline:0}
/* the wordmark stays visible: there is no giant wordmark underneath any more */
body.home-min .nav.over:not(.open) .brand{opacity:1;pointer-events:auto}
body.home-min .nav.over:not(.open) .logo-k{display:none}
body.home-min .nav.over:not(.open) .logo-w{display:inline-block}
body.home-min .hero-x{margin-top:0;height:100%;min-height:0;max-height:none}
body.home-min .hx-content{padding-block:calc(var(--nav-h) + 24px) clamp(18px,2.4vw,30px);
  gap:clamp(16px,2vw,28px)}
body.home-min .hx-row{grid-template-columns:minmax(0,1fr)}
body.home-min .hx-copy{gap:clamp(18px,2.4vw,30px);justify-items:start}
body.home-min .hx-foot{grid-template-columns:minmax(0,1fr);justify-items:end}
/* the statement, set light */
body.home-min .hx-tag{font-weight:200;letter-spacing:-.02em;max-width:18ch;
  font-size:clamp(1.5rem,3.4vw,3.2rem);line-height:1.12}
html.ar body.home-min .hx-tag{font-weight:300;letter-spacing:0;line-height:1.45;
  font-size:clamp(1.4rem,3vw,2.8rem)}
.hx-go{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:#FBFBF9;font-family:var(--display);font-weight:400;font-size:15px;
  letter-spacing:.02em;padding-bottom:6px;border-bottom:1px solid rgba(251,251,249,.4);
  transition:border-color .25s ease,gap .25s ease}
.hx-go:hover{border-bottom-color:#FBFBF9;gap:16px}
html.ar .hx-go{font-family:var(--ar);font-weight:500}
html.ar .hx-go .arr{transform:scaleX(-1)}
/* hairline info bar */
.minbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-inline:calc(-1 * var(--gutter));padding:14px var(--gutter);
  background:var(--ink);color:rgba(251,251,249,.72);
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.minbar a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.minbar a:hover{color:#FBFBF9;border-bottom-color:rgba(251,251,249,.5)}
@media (max-width:620px){
  .minbar{justify-content:center;gap:6px 14px;font-size:11.5px;letter-spacing:.04em}
  body.home-min .hx-tag{max-width:none}
}
/* very short viewports: let it scroll rather than clip */
@media (max-height:470px){body.home-min{overflow:auto}body.home-min .hero-x{min-height:420px}}

/* darker toward the statement so light images never wash it out */
body.home-min .hx-shade{background:
  radial-gradient(60% 46% at 0% 100%,rgba(10,10,10,.46),rgba(10,10,10,0) 100%),
  linear-gradient(to top,rgba(10,10,10,.80) 0%,rgba(10,10,10,.44) 20%,rgba(10,10,10,.08) 46%,rgba(10,10,10,.04) 74%,rgba(10,10,10,.34) 100%),
  linear-gradient(to right,rgba(10,10,10,.42) 0%,rgba(10,10,10,.06) 46%,rgba(10,10,10,0) 64%)}
html.ar body.home-min .hx-shade{background:
  radial-gradient(60% 46% at 100% 100%,rgba(10,10,10,.46),rgba(10,10,10,0) 100%),
  linear-gradient(to top,rgba(10,10,10,.80) 0%,rgba(10,10,10,.44) 20%,rgba(10,10,10,.08) 46%,rgba(10,10,10,.04) 74%,rgba(10,10,10,.34) 100%),
  linear-gradient(to left,rgba(10,10,10,.42) 0%,rgba(10,10,10,.06) 46%,rgba(10,10,10,0) 64%)}

/* ================= client tape ================= */
.tape{position:relative;direction:ltr;overflow:hidden;
  margin-inline:calc(-1 * var(--gutter));margin-top:clamp(20px,3vw,40px);
  padding-block:clamp(18px,2.4vw,34px);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%)}
.tape-track{display:flex;width:max-content;animation:tapeMove 52s linear infinite}
.tape:hover .tape-track,.tape:focus-within .tape-track{animation-play-state:paused}
.tape-set{display:flex;align-items:center;list-style:none;margin:0;
  gap:clamp(52px,7.5vw,124px);padding-inline:clamp(26px,3.75vw,62px)}
.tape-set img{display:block;width:auto;opacity:.9;
  /* two layers: a tight contact shadow and a wide ambient one, so each mark lifts off the page */
  filter:drop-shadow(0 3px 4px rgba(10,10,10,.13)) drop-shadow(0 17px 30px rgba(10,10,10,.21));
  animation:tapeFloat 7s ease-in-out infinite;
  transition:opacity .4s ease}
.tape-set li:hover img{opacity:1}
@keyframes tapeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* desynchronised drift: must out-specify the `animation` shorthand on .tape-set img */
.tape-set img.cl-edelbi-properties{animation-duration:6.6s;animation-delay:-0.4s}
.tape-set img.cl-mzl-by-manazil{animation-duration:7.9s;animation-delay:-2.9s}
.tape-set img.cl-minimalist-architects{animation-duration:7.2s;animation-delay:-5.1s}
.tape-set img.cl-bilal-haimour-architects{animation-duration:8.6s;animation-delay:-1.7s}
@keyframes tapeMove{from{transform:translateX(0)}to{transform:translateX(-25%)}}
html.ar .tape-track{animation-direction:reverse}
/* optically matched heights: a square mark and a 4.6:1 wordmark cannot share one */
.tape-set img{--logo-h:clamp(30px,4vw,56px)}
.cl-edelbi-properties{height:var(--logo-h)}
.cl-mzl-by-manazil{height:calc(var(--logo-h) * 1.02)}
.cl-minimalist-architects{height:calc(var(--logo-h) * .73)}
.cl-bilal-haimour-architects{height:calc(var(--logo-h) * .68)}
@media (prefers-reduced-motion:reduce){
  .tape-track,.tape-set img{animation:none}
  .tape{overflow-x:auto;scrollbar-width:none}
  .tape::-webkit-scrollbar{display:none}
}

/* ================= hero: per-slide service captions ================= */
.hx-svcs{display:grid;margin-top:4px}
.hx-svc{grid-area:1/1;display:grid;gap:8px;justify-items:start;text-decoration:none;color:#FBFBF9;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .55s ease,transform .55s ease}
.hx-svc.is-active{opacity:1;transform:none;pointer-events:auto}
.hx-svc-k{font-family:var(--display);font-weight:500;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(251,251,249,.72)}
html.ar .hx-svc-k{font-family:var(--ar);letter-spacing:.06em;font-size:12px}
.hx-svc-t{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:400;font-size:15px;
  letter-spacing:.02em;padding-bottom:6px;border-bottom:1px solid rgba(251,251,249,.4);transition:border-color .25s ease,gap .25s ease}
.hx-svc:hover .hx-svc-t{border-bottom-color:#FBFBF9;gap:16px}
html.ar .hx-svc-t{font-family:var(--ar);font-weight:500}
html.ar .hx-svc-t .arr{transform:scaleX(-1)}

/* ================= hero: desk scene slide ================= */
.hx-scene{background:#6f6b65}
.scene{position:absolute;inset:0;overflow:hidden;--desk:27%;--mac-x:61%;
  --mac-w:min(46vw,68svh,900px)}
html.ar .scene{--mac-x:39%}
/* wall: darker ceiling, a pool of light behind the display */
.scene-wall{position:absolute;inset:0;bottom:var(--desk);
  background:
    radial-gradient(48% 58% at var(--mac-x) 66%,rgba(255,255,255,.30),rgba(255,255,255,0) 74%),
    linear-gradient(180deg,#5e5a55 0%,#7d7972 40%,#9c978f 82%,#a7a299 100%)}
.scene-wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.22))}
.scene-desk{position:absolute;left:0;right:0;bottom:0;height:var(--desk);
  background:linear-gradient(180deg,#d9d4ca 0%,#c6c0b5 24%,#a39c92 100%);
  box-shadow:inset 0 16px 34px rgba(0,0,0,.16)}
.scene-mac{position:absolute;left:var(--mac-x);bottom:calc(var(--desk) - 3.2%);width:var(--mac-w);transform:translateX(-50%)}
.scene-mac .mac-screen{box-shadow:0 0 0 .25cqw rgba(255,255,255,.05),0 0 60px rgba(255,255,255,.30),0 0 150px rgba(255,255,255,.16)}
.scene-mac .mac-body{box-shadow:inset 0 0 0 .18cqw rgba(255,255,255,.14),0 3cqw 5cqw rgba(0,0,0,.30)}
.scene-mac::after{content:"";position:absolute;left:50%;bottom:-1.6%;width:44%;height:4.5%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0) 72%)}
.scene-kbd,.scene-mouse{position:absolute;transform-origin:50% 100%;
  background:linear-gradient(180deg,#eeedea,#d8d5ce);
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.22)) drop-shadow(0 18px 22px rgba(0,0,0,.18))}
.scene-kbd{left:var(--mac-x);bottom:calc(var(--desk) - 14.5%);width:calc(var(--mac-w)*.46);height:calc(var(--mac-w)*.16);
  border-radius:calc(var(--mac-w)*.012);
  transform:translateX(-50%) perspective(1100px) rotateX(62deg)}
.scene-kbd::before{content:"";position:absolute;inset:7% 3.5%;border-radius:2px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,transparent 1px calc(100%/15)),
    repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px calc(100%/5)),
    linear-gradient(180deg,#e4e2dd,#d0cdc6)}
.scene-mouse{left:calc(var(--mac-x) + var(--mac-w)*.33);bottom:calc(var(--desk) - 13.5%);
  width:calc(var(--mac-w)*.075);height:calc(var(--mac-w)*.13);border-radius:48% 48% 46% 46% / 40% 40% 60% 60%;
  transform:perspective(1100px) rotateX(62deg)}
.scene-mouse::before{content:"";position:absolute;left:50%;top:14%;width:1px;height:34%;background:rgba(0,0,0,.12)}
html.ar .scene-mouse{left:calc(var(--mac-x) - var(--mac-w)*.33 - var(--mac-w)*.075)}
/* the scene carries its own light, so the hero veil pulls back to the text corner */
.hero-x.on-scene .hx-shade{background:
  linear-gradient(to top,rgba(10,10,10,.62) 0%,rgba(10,10,10,.22) 24%,rgba(10,10,10,0) 42%),
  linear-gradient(to right,rgba(10,10,10,.40) 0%,rgba(10,10,10,0) 38%)}
html.ar .hero-x.on-scene .hx-shade{background:
  linear-gradient(to top,rgba(10,10,10,.62) 0%,rgba(10,10,10,.22) 24%,rgba(10,10,10,0) 42%),
  linear-gradient(to left,rgba(10,10,10,.40) 0%,rgba(10,10,10,0) 38%)}
@media (max-width:860px){
  /* the caption block owns the bottom ~24% on phones, so the whole desk sits above it */
  .scene,html.ar .scene{--desk:36%;--mac-x:50%;--mac-w:min(92vw,54svh)}
  .scene-mac{bottom:calc(var(--desk) + 4.5%)}
  .scene-kbd{bottom:calc(var(--desk) + .5%);width:calc(var(--mac-w)*.5)}
  .scene-mouse{bottom:calc(var(--desk) + 1%);left:calc(var(--mac-x) + var(--mac-w)*.36)}
  html.ar .scene-mouse{left:calc(var(--mac-x) - var(--mac-w)*.36 - var(--mac-w)*.075)}
}

/* ================= minimal footer (inner pages) ================= */
.foot{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px)}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;padding-block:28px 22px}
.foot .brand img{height:22px;width:auto}
.foot-nav,.foot-contact,.foot-social{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{text-decoration:none;color:var(--ink-2);font-size:14.5px;transition:color .2s ease}
.foot a:hover{color:var(--ink)}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:10px 24px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);padding-block:14px 28px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.foot-base a{font-size:12px;color:var(--muted)}
.foot-base a:hover{color:var(--ink)}
html.ar .foot-base{letter-spacing:0;font-size:12.5px}
/* the legal line (2 Nov 2026): spaced like the bar footer, each part kept whole when it wraps; the notice keeps JoCanvas™ in its own casing */
.fb-line{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px}
.fb-copy{text-transform:none;letter-spacing:.03em;white-space:nowrap}
html.ar .fb-copy{letter-spacing:0}
.fb-loc{white-space:nowrap}
.fb-docs{display:inline-flex;align-items:baseline;gap:4px 22px;white-space:nowrap}
@media (max-width:680px){
  .foot-row{align-items:flex-start;flex-direction:column;gap:18px}
  .foot-base{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ==========================================================================
   Arabic titles and subtitles in Tajawal Light (English titles stay in
   Inter Tight light; body copy, card titles and h3s stay in Cairo).
   Tajawal's Arabic is optically large, like Cairo, so AR titles sit at
   ~0.8x the EN scale. Measures are in em so wrapping doesn't depend on
   the width of the zero glyph.
   ========================================================================== */
:root{--title:"Tajawal","Cairo","Inter","Segoe UI",Tahoma,sans-serif}
html.ar .h-hero,html.ar .h1,html.ar .h2,html.ar .film .big,html.ar .band h2,html.ar .hx-tag{
  font-family:var(--title);font-weight:300;letter-spacing:0;font-synthesis:none}
html.ar .h-hero{font-size:clamp(2.3rem,6.4vw,5.8rem);line-height:1.28;max-width:10em}
html.ar .h1{font-size:clamp(2.1rem,5vw,4.3rem);line-height:1.3;max-width:11em}
html.ar .h2{font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.38;max-width:14em}
html.ar .endcta .h2{max-width:12em}
html.ar .film .big{font-size:clamp(2.1rem,5.2vw,4.8rem);line-height:1.3}
html.ar .band h2{font-size:clamp(2rem,4.6vw,4.1rem);line-height:1.3}
html.ar body.home-min .hx-tag{font-weight:300;letter-spacing:0;line-height:1.4;
  font-size:clamp(1.55rem,3.2vw,3rem);max-width:10em;text-wrap:balance}

/* ==========================================================================
   Brand position locked across languages
   The wordmark is Latin and sits top-left in EN and AR alike. The header keeps
   identical geometry in both languages (language switch and CTA stay under
   the pointer when switching); only the link group reads right-to-left in AR.
   ========================================================================== */
html.ar .nav-in{direction:ltr}
html.ar .nav-in > *{direction:rtl}
html.ar .nav-links{margin-left:auto;margin-right:0}
@media (max-width:900px){html.ar .nav-actions{margin-left:auto;margin-right:0}}
/* footer: wordmark on the left as well; Arabic columns keep their own order */
html.ar .foot-row{direction:ltr}
html.ar .foot-row > *{direction:rtl}
@media (max-width:680px){html.ar .foot-row > :not(.brand){align-self:flex-end;text-align:right}}
/* language switch, CTA and menu keep the same order and footprint in both
   languages, so the switch stays under the pointer after changing language */
html.ar .nav-actions{direction:ltr}
html.ar .nav-actions > *{direction:rtl}
.nav .lang,.menu-btn{line-height:22px}
.nav-actions .btn{min-width:126px;justify-content:center}
.menu-btn{min-width:72px;text-align:center}
/* the wordmark in the Studio name story holds its side too */
html.ar .namestory{direction:ltr}
html.ar .namestory > *{direction:rtl}

/* ==========================================================================
   Shared info bar (home + Websites): no band, one quiet line.
   Locations | social icons, centred | email. Aligned to the content width.
   ========================================================================== */
.minbar{--mb-fg:var(--ink-2);--mb-hi:var(--ink);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;
  margin-inline:calc(-1 * var(--gutter));padding:14px calc(var(--gutter) + max(0px,(100% - var(--max)) / 2));
  background:none;color:var(--mb-fg);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.minbar a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.minbar a:hover,.minbar a:focus-visible{color:var(--mb-hi)}
.mb-loc{justify-self:start}
.mb-mail{justify-self:end}
.mb-mail:hover{border-bottom-color:currentColor}
.minbar-social{justify-self:center;display:inline-flex;align-items:center;gap:6px}
.minbar .minbar-social a{display:inline-grid;place-items:center;width:30px;height:30px;border:0}
.minbar-social svg{width:15px;height:15px;display:block}
html.ar .minbar{letter-spacing:0;font-size:12.5px}
html.ar .minbar .mb-mail{letter-spacing:.06em;font-size:11px}
@media (max-width:620px){
  .minbar{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 16px;padding-block:10px 14px;font-size:10.5px}
  .minbar-social{order:-1;flex-basis:100%;justify-content:center}
}
/* home: the footer floats on the bottom of the image, no band */
body.home-min{grid-template-rows:minmax(0,1fr)}
body.home-min .minbar{--mb-fg:rgba(251,251,249,.74);--mb-hi:#FBFBF9;
  position:absolute;inset-inline:0;bottom:0;z-index:4;margin-inline:0;
  padding-inline:max(var(--gutter),calc((100% - var(--max)) / 2))}
body.home-min{--mb-h:58px}
@media (max-width:620px){body.home-min{--mb-h:72px}}
body.home-min .hx-content{padding-bottom:var(--mb-h)}

/* ==========================================================================
   Websites page: one screen while the tiles fit; it scrolls by itself
   once more sites are added (no scroll lock, so nothing is ever clipped)
   ========================================================================== */
body.sites-min{min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.sites{display:grid;align-content:center;padding-block:clamp(28px,5vh,64px)}
.sites > .container{width:100%;box-sizing:border-box}
.sites-h{margin:0 0 clamp(18px,3.2vh,34px)}
.sites-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(30px,4vh,52px) clamp(18px,2.4vw,36px);align-items:stretch}
@media (max-width:900px){.sites-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.site{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:14px;text-decoration:none;color:inherit}
/* a tile never grows past its column for a long caption: the line wraps instead (Space design) */
.spaces .site-go{white-space:normal}
.site .mac{align-self:end;transition:transform .35s ease}
.site:hover .mac,.site:focus-visible .mac{transform:translateY(-5px)}
.site-cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-top:1px solid var(--line);padding-top:10px;transition:border-color .25s ease}
.site:hover .site-cap,.site:focus-visible .site-cap{border-top-color:var(--ink)}
.site-name{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.015em;line-height:1.3}
.site-go{font-size:13px;color:var(--ink-2);white-space:nowrap}
html.ar .site-name{font-family:var(--ar);letter-spacing:0}
/* the invitation tile: a single icon where the next screen will be */
.site-new .site-media{display:grid;place-items:center}
.site-plus{width:64px;height:64px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;
  color:var(--ink);transition:background-color .25s ease,color .25s ease,transform .35s ease}
.site-new:hover .site-plus,.site-new:focus-visible .site-plus{background:var(--ink);color:var(--ground);transform:translateY(-5px)}
.site-new .site-go .arr{display:inline-block;transition:transform .25s ease}
.site-new:hover .site-go .arr{transform:translateX(4px)}
html.ar .site-new:hover .site-go .arr{transform:scaleX(-1) translateX(4px)}
@media (max-width:620px){
  .sites-grid{gap:26px 16px}
  .site{gap:10px}
  .site-cap{flex-direction:column;align-items:flex-start;gap:2px;padding-top:8px}
  .site-name{font-size:.92rem}
  .site-go{font-size:12px}
  .site-plus{width:52px;height:52px}
  .site-new .site-cap{flex-direction:row;align-items:baseline;justify-content:space-between}
}

/* ==========================================================================
   Home hierarchy: the service is the headline, the slogan is the signature.
   Slogan = a small tagline locked under the wordmark (constant, the promise);
   service = large, in the slogan's former size and face (changes per slide).
   ========================================================================== */
body.home-min .hx-tag{position:absolute;left:var(--gutter);right:auto;top:90px;z-index:4;
  margin:0;max-width:none;text-wrap:nowrap;
  font-family:var(--display);font-weight:300;font-size:14px;line-height:1.4;letter-spacing:.02em;
  color:#FBFBF9}
html.ar body.home-min .hx-tag{left:var(--gutter);right:auto;max-width:none;text-wrap:nowrap;
  font-family:var(--ar);font-weight:300;font-size:14.5px;line-height:1.5;letter-spacing:0}
@media (max-width:620px){
  body.home-min .hx-tag,html.ar body.home-min .hx-tag{top:70px;font-size:12px;max-width:180px;text-wrap:balance}
  html.ar body.home-min .hx-tag{font-size:12.5px;max-width:none;text-wrap:nowrap}
}
body.home-min .hx-svc{gap:clamp(12px,1.4vw,18px)}
body.home-min .hx-svc-k{font-family:var(--display);font-weight:200;text-transform:none;color:#FBFBF9;
  font-size:clamp(1.9rem,3.4vw,3.2rem);line-height:1.06;letter-spacing:-.02em}
html.ar body.home-min .hx-svc-k{font-family:var(--title);font-weight:300;letter-spacing:0;
  font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.3}
/* top-left shade so the wordmark and tagline hold on bright skies and walls
   (stays on the left in Arabic too, because the wordmark is locked left) */
body.home-min .hero-x::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(900px 300px at 0 0,rgba(10,10,10,.55),rgba(10,10,10,.36) 45%,rgba(10,10,10,0) 100%),
    linear-gradient(to bottom,rgba(10,10,10,.28),rgba(10,10,10,0) 200px)}

/* ==========================================================================
   Edge-anchored frame: logo, nav, content, home hero and footer keep the same
   gutter from the screen edges at every width (56px from ~1400px up).
   The frame only stops growing past 2560px-wide screens (ultra-wide).
   Reading widths stay limited per element (titles in ch/em, ledes in ch).
   ========================================================================== */
:root{--max:2448px}

/* ==========================================================================
   Light hero slides (the wordmark wall): the overlaid UI turns to ink and
   the dark shades lift, so the bright image stays clean. JS sets
   body.hero-light, and body.theming for 1.3s so colours ease with the fade.
   ========================================================================== */
.hx-slide picture{display:block;width:100%;height:100%}
.hx-light img{object-position:50% 50%}
body.home-min .hx-shade,body.home-min .hero-x::after{transition:opacity 1.2s ease}
body.home-min.hero-light .hx-shade,body.home-min.hero-light .hero-x::after{opacity:0}
/* wordmark: both versions stacked, cross-faded */
body.home-min .nav.over:not(.open) .brand{position:relative}
body.home-min .nav.over:not(.open) .logo-w{display:inline-block;opacity:1}
body.home-min .nav.over:not(.open) .logo-k{display:inline-block;position:absolute;left:0;top:50%;translate:0 -50%;opacity:0}
body.home-min.hero-light .nav.over:not(.open) .logo-w{opacity:0}
body.home-min.hero-light .nav.over:not(.open) .logo-k{opacity:1}
/* nav */
body.home-min.hero-light .nav.over:not(.open) .nav-links a{color:var(--ink-2)}
body.home-min.hero-light .nav.over:not(.open) .nav-links a:hover{color:var(--ink)}
body.home-min.hero-light .nav.over:not(.open) .lang,
body.home-min.hero-light .nav.over:not(.open) .menu-btn{color:var(--ink);border-color:rgba(10,10,10,.3)}
body.home-min.hero-light .nav.over:not(.open) .lang:hover,
body.home-min.hero-light .nav.over:not(.open) .menu-btn:hover{border-color:var(--ink)}
body.home-min.hero-light .nav.over:not(.open) .btn.primary{background:var(--ink);color:#FBFBF9;border-color:var(--ink)}
body.home-min.hero-light .nav.over:not(.open) .btn.primary:hover{background:transparent;color:var(--ink)}
/* hero text, controls, footer */
body.home-min.hero-light .hx-tag{color:var(--ink)}
body.home-min.hero-light .hx-svc,body.home-min.hero-light .hx-svc-k{color:var(--ink)}
body.home-min.hero-light .hx-svc-t{border-bottom-color:rgba(10,10,10,.35)}
body.home-min.hero-light .hx-svc:hover .hx-svc-t{border-bottom-color:var(--ink)}
body.home-min.hero-light .hx-bar span{background:rgba(10,10,10,.18)}
body.home-min.hero-light .hx-bar span::after{background:var(--ink)}
body.home-min.hero-light .hx-pause{color:var(--ink);border-color:rgba(10,10,10,.35)}
body.home-min.hero-light .minbar{--mb-fg:var(--ink-2);--mb-hi:var(--ink)}
/* the switch eases with the 2s image cross-fade; hover stays quick otherwise */
body.home-min.theming .nav-in *,body.home-min.theming .hx-tag,body.home-min.theming .hx-svc *,
body.home-min.theming .hx-ctrl *,body.home-min.theming .minbar,body.home-min.theming .minbar *{
  transition:color 1.2s ease,background-color 1.2s ease,border-color 1.2s ease,opacity 1.2s ease !important}
body.home-min .nav-in .brand img{transition:opacity 1.2s ease}

/* web design slide: no Ken Burns zoom (the site on screen stays crisp);
   tall screens get a portrait version with the whole desk in view */
.hx-slide.hx-desk img,.hx-slide.hx-desk.is-active img{animation:none;transform:none}
.hx-desk img{object-position:50% 40%}
.hx-tower img{object-position:100% 50%}   /* tower plate, 2.4:1 (render + sky above + mist on the left): every screen keeps the whole tower at the right edge and crops only mist */
/* v171: Arabic keeps the same plate (no mirrored photo): the tower stays at the right edge; the caption sits in the veil at the right */

/* ==========================================================================
   Logo design page: each logo is presented on a black canvas board,
   centred in a safe area on the canvas face (the face is the middle 82%)
   ========================================================================== */
.cv{position:relative;display:block;width:100%;aspect-ratio:1/1;align-self:end;transition:transform .35s ease}
.cv-board{position:absolute;inset:0;width:100%;height:100%;display:block}
.cv-logo{position:absolute;left:50%;top:50%;width:var(--lw,47.5%);height:var(--lh,36%);transform:translate(-50%,-50%);
  object-fit:contain;display:block}
.site:hover .cv,.site:focus-visible .cv{transform:translateY(-5px)}
/* v164: the construction lines are their own layers; at rest the canvas shows the logo alone, and on hover or
   focus the lines draw in from the logo to the canvas edges (horizontals first, verticals a beat later).
   Where there is no hover (touch), the lines are always shown, as they were. */
.cv-lines{opacity:0;transform:translate(-50%,-50%) scaleX(0);transform-origin:50% 50%;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.cv-lv{transform:translate(-50%,-50%) scaleY(0);transition-delay:.1s}
.site:hover .cv-lines,.cv-open:focus-visible .cv-lines{opacity:1;transform:translate(-50%,-50%)}   /* v176: not :focus-within, so the tile a closed gallery hands focus back to does not keep its lines */
@media (hover:none){.cv-lines{opacity:1;transform:translate(-50%,-50%)}}
/* phones: two-line captions, so give every caption the same height and the
   hairlines above them line up across a row */
@media (max-width:620px){.site-cap{min-height:50px;box-sizing:border-box}html.ar .site-cap{min-height:53px}}
/* logo page: the invitation tile keeps the canvas footprint when it wraps to its own row */
.logos .site-new .site-media{aspect-ratio:1/1}
/* very small phones: keep the info line to two rows (icons, then location + email) */
@media (max-width:380px){.minbar{font-size:10px;letter-spacing:.08em;column-gap:12px}}
/* logo page on tablets: three canvases across (square tiles are taller than screens) */
@media (min-width:621px) and (max-width:900px){.logos .sites-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ==========================================================================
   Design tabs (Websites / Logo design): quiet uppercase labels, the active
   one underlined in ink, in the place the page label used to sit
   ========================================================================== */
.tabs{display:flex;gap:clamp(20px,2.4vw,32px);align-items:flex-end}
.tab{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:6px 0 9px;border-bottom:1.5px solid transparent;
  transition:color .2s ease,border-color .2s ease}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
html.ar .tab{font-family:var(--ar);font-weight:600;letter-spacing:0;text-transform:none;font-size:14px;padding-bottom:7px}
/* both panels share one cell, so the tabs never jump when switching;
   the inactive one is invisible and out of the accessibility tree */
.panels{display:grid}
.panel{grid-area:1/1;min-width:0}
.panel[hidden]{display:block!important;visibility:hidden}
.panel:not([hidden]){animation:panelIn .35s ease}
@keyframes panelIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}
@media (max-width:620px) and (max-height:800px){.sites{padding-block:16px 18px}.sites-h{margin-bottom:16px}}

/* ==========================================================================
   Studio: one screen. Tabs (About the studio / The whole canvas / Management)
   beside the two studios, then the Google reviews and the client logos on two
   slow tapes. Type and images follow the viewport height, so it fits from
   short laptop screens to ultra-wide; very short screens scroll, never clip.
   ========================================================================== */
.studio{display:grid;grid-template-rows:minmax(0,1fr) auto auto;min-width:0;
  padding-top:clamp(12px,3vh,44px)}
.st-top{width:100%;align-self:center}
.st-tabs{margin-bottom:clamp(12px,2.8vh,40px)}
.st-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,18vw,300px);
  gap:clamp(28px,5vw,104px);align-items:center}
.studio .panels{align-self:stretch;align-items:center}

/* About: the promise, then the name read as a dictionary entry */
.st-about{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(28px,4.5vw,96px);align-items:end}
.studio .st-h{margin:0;font-family:var(--display);font-weight:200;font-size:clamp(1.5rem,min(3.4vw,5.6vh),4.6rem);
  line-height:1.06;letter-spacing:-.03em;max-width:11em}
html.ar .studio .st-h{font-family:var(--title);font-weight:300;letter-spacing:0;line-height:1.32;
  font-size:clamp(1.4rem,min(2.9vw,4.8vh),3.9rem);max-width:10em}
.dict{border-top:1px solid var(--ink);font-size:clamp(13px,min(1.06vw,1.85vh),16.5px);line-height:1.55}
.dict-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-block:clamp(7px,1.3vh,14px);
  border-bottom:1px solid var(--line);color:var(--muted);font-size:.92em}
.dict-h b{font-family:var(--display);font-weight:600;color:var(--ink);font-size:1.1em;letter-spacing:-.01em}
.dict-h i{font-style:italic}
html.ar .dict-h i{font-style:normal}
.dict dl{margin:0}
.dict dl > div{display:grid;grid-template-columns:6.4em minmax(0,1fr);gap:clamp(12px,1.6vw,24px);align-items:baseline;
  padding-block:clamp(7px,1.5vh,16px);border-bottom:1px solid var(--line)}
.dict dt{font-family:var(--display);color:var(--ink)}
.dict dt.jo{font-weight:200;font-size:2.1em;line-height:1;letter-spacing:-.02em}
.dict dt.cv{font-weight:600;font-size:.72em;letter-spacing:.5em;text-transform:uppercase}
.dict dd{margin:0;color:var(--ink-2)}
.dict-f{padding-top:clamp(7px,1.3vh,14px);color:var(--muted);font-size:.9em}
html.ar .dict{line-height:1.75}

/* The whole canvas: the four layers from Services, with their images */
.st-canvas-h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(10px,2.2vh,28px)}
.studio .st-h2{margin:0;font-family:var(--display);font-weight:200;font-size:clamp(1.3rem,min(2.6vw,4.4vh),3.2rem);
  line-height:1.1;letter-spacing:-.025em}
html.ar .studio .st-h2{font-family:var(--title);font-weight:300;letter-spacing:0;line-height:1.35;
  font-size:clamp(1.25rem,min(2.3vw,3.9vh),2.8rem)}
.st-canvas-h .link{font-size:14px;white-space:nowrap;flex:none}
.layers-x{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,28px)}
.layers-x li{display:grid;gap:clamp(8px,1.4vh,14px);min-width:0}
.lx-img{display:block;height:clamp(60px,calc(32vh - 110px),340px);overflow:hidden;background:var(--surface)}
.lx-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.layers-x li:hover .lx-img img{transform:scale(1.03)}
.lx-cap{display:flex;gap:10px;align-items:flex-start}
.lx-t{display:grid;gap:1px;min-width:0}
.lx-t b{font-family:var(--display);font-weight:600;font-size:clamp(13px,min(1.05vw,1.9vh),16px);letter-spacing:-.01em;line-height:1.3}
.lx-t small{font-size:clamp(11.5px,min(.9vw,1.6vh),14px);color:var(--muted);line-height:1.35}
html.ar .lx-t b{font-family:var(--ar);letter-spacing:0}

/* Management: the founder's words and name, no photo */
.st-mgmt{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4.5vw,96px);align-items:end}
.st-quote{margin:0}
.st-quote p{font-family:var(--display);font-weight:200;font-size:clamp(1.2rem,min(2.5vw,4.3vh),3.1rem);
  line-height:1.18;letter-spacing:-.02em;max-width:22em}
html.ar .st-quote p{font-family:var(--title);font-weight:300;letter-spacing:0;line-height:1.45;
  font-size:clamp(1.15rem,min(2.2vw,3.8vh),2.7rem)}
.person{border-top:1px solid var(--ink);padding-top:clamp(8px,1.6vh,18px);display:grid;gap:2px;
  font-size:clamp(13px,min(1.04vw,1.85vh),16px);line-height:1.55}
.studio .person-n{font-family:var(--display);font-weight:600;font-size:1.12em;letter-spacing:-.01em;line-height:1.3}
html.ar .studio .person-n{font-family:var(--ar);letter-spacing:0}
.person-r{color:var(--muted);margin-bottom:clamp(4px,1.1vh,12px)}
.person-d{color:var(--ink-2)}
.person-c{margin-top:clamp(4px,1.1vh,12px);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:.88em;color:var(--muted)}
.person-c a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.person-c a:hover{border-bottom-color:var(--ink)}

/* the two studios */
.st-offices{display:grid;gap:clamp(10px,2.1vh,24px);align-content:center;
  border-inline-start:1px solid var(--line);padding-inline-start:clamp(20px,2.4vw,44px)}
.st-offices .eyebrow{margin:0}
.ofc{display:grid;gap:1px;font-size:clamp(13px,min(.98vw,1.8vh),15.5px);line-height:1.5}
.studio .ofc h3{font-family:var(--display);font-weight:600;font-size:1.06em;letter-spacing:-.01em;line-height:1.35}
html.ar .studio .ofc h3{font-family:var(--ar);letter-spacing:0}
.ofc p{color:var(--ink-2)}
.ofc-map{margin-inline-start:4px;white-space:nowrap;font-size:.86em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.ofc-map:hover{border-bottom-color:var(--ink)}
.ofc-reach{font-size:12.5px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);padding-top:clamp(8px,1.6vh,18px)}

/* Google reviews: a slow tape, pausable (button, hover, focus) */
.voices{padding-top:clamp(12px,2.6vh,36px)}
.v-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;border-top:1px solid var(--line);
  padding-top:clamp(8px,1.5vh,16px);margin-bottom:clamp(6px,1.2vh,14px)}
.v-head .eyebrow{margin:0}
.v-rate{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid transparent;line-height:1.6}
.v-rate:hover,.v-rate:focus-visible{color:var(--ink);border-bottom-color:currentColor}
.v-note{font-size:12px;color:var(--muted)}
.tp-btn{margin-inline-start:auto;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s ease}
.tp-btn:hover{border-color:var(--ink)}
.tp-btn .i-play,.tp-btn[aria-pressed="true"] .i-pause{display:none}
.tp-btn[aria-pressed="true"] .i-play{display:block}
.stars{display:inline-block;flex:none;width:63px;height:11px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 0 27 24'%3E%3Cpath d='M12 1.2l3.2 6.6 7.3 1-5.3 5.1 1.3 7.2L12 17.7l-6.5 3.4 1.3-7.2L1.5 8.8l7.3-1z'/%3E%3C/svg%3E") 0 50%/12.6px 11.2px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 0 27 24'%3E%3Cpath d='M12 1.2l3.2 6.6 7.3 1-5.3 5.1 1.3 7.2L12 17.7l-6.5 3.4 1.3-7.2L1.5 8.8l7.3-1z'/%3E%3C/svg%3E") 0 50%/12.6px 11.2px repeat-x}
.v-rate .stars{color:var(--ink)}
.vtape{position:relative;direction:ltr;overflow:hidden;margin-inline:calc(-1 * var(--gutter));
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%)}
.vtape-track{display:flex;width:max-content;animation:tapeMove 156s linear infinite}   /* 26s per review card (6 cards) */
.vtape:hover .vtape-track,.vtape:focus-within .vtape-track{animation-play-state:paused}
html.ar .vtape-track{animation-direction:reverse}
.vtape-set{display:flex;list-style:none;margin:0;padding:0}
.vtape-set > li{flex:none;display:flex;width:clamp(300px,34vw,560px);border-left:1px solid var(--line);
  padding:clamp(2px,.6vh,8px) clamp(20px,2.2vw,40px)}
html.ar .vtape-set > li{direction:rtl}
.voice{margin:0;width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(6px,1.2vh,14px)}
.voice blockquote{margin:0}
.voice p{font-size:clamp(13px,min(1vw,1.8vh),16px);line-height:1.55;color:var(--ink);text-wrap:pretty}
html.ar .voice p{line-height:1.75}
.voice figcaption{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);line-height:1.4}
.voice figcaption b{font-weight:600}
/* one switch stops both tapes */
body.tapes-paused .vtape-track,body.tapes-paused .tape-track,body.tapes-paused .tape-set img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .vtape{overflow-x:auto;scrollbar-width:none}
  .vtape::-webkit-scrollbar{display:none}
  .tp-btn{display:none}
}

/* client logos on the Studio page: the same tape, scaled to the screen height */
.studio .tape{margin-top:0;padding-block:clamp(12px,2.2vh,30px) clamp(18px,3vh,40px)}
.studio .tape-set img{--logo-h:clamp(24px,min(3.4vw,4.8vh),52px)}

/* short laptop screens: the supporting line under the studios goes first */
@media (max-height:820px) and (min-width:901px){.ofc-reach{display:none}}
@media (max-height:680px) and (min-width:901px){.dict-f{display:none}}

/* tablets: the studios sit in a row under the tabs' content */
@media (max-width:900px){
  .st-body{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.6vh,28px)}
  .st-offices{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,4vw,40px);align-items:start;
    border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line);padding-top:clamp(10px,1.8vh,18px)}
  .st-offices .eyebrow,.ofc-reach{grid-column:1/-1}
  .ofc-reach{display:none}
}
@media (max-width:760px){
  .st-about,.st-mgmt{grid-template-columns:minmax(0,1fr);gap:clamp(12px,2.2vh,22px)}
}
/* phones */
@media (max-width:620px){
  .t-x{display:none}
  .studio{padding-top:14px}
  .st-tabs{margin-bottom:12px;gap:22px}
  .studio .st-h{font-size:clamp(1.3rem,min(6.4vw,3.4vh),1.9rem);max-width:none}
  html.ar .studio .st-h{font-size:clamp(1.25rem,min(5.8vw,3.1vh),1.75rem)}
  .dict{font-size:13px;line-height:1.5}
  .dict-h{padding-block:6px}
  .dict dl > div{grid-template-columns:4.9em minmax(0,1fr);padding-block:6px}
  .dict dt.jo{font-size:1.6em}
  .dict-f{display:none}
  .dict dt.cv{letter-spacing:.32em}
  .st-offices .eyebrow{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ofc{font-size:12px;line-height:1.45}
  .st-canvas-h .link{font-size:13px}
  .layers-x{gap:8px}
  .lx-img{height:clamp(56px,10vh,110px)}
  .lx-cap .kb{display:none}
  .lx-t b{font-size:12.5px}
  .lx-t small{font-size:11px}
  .st-quote p{font-size:clamp(1.1rem,min(5.2vw,2.8vh),1.5rem)}
  html.ar .st-quote p{font-size:clamp(1.05rem,min(4.8vw,2.6vh),1.4rem)}
  .person{font-size:13px}
  .voices{padding-top:10px}
  .v-head .eyebrow{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .v-head{padding-top:6px;margin-bottom:6px}
  .v-rate,.v-note{font-size:11.5px}
  .vtape-set > li{width:min(84vw,330px);padding-inline:16px}
  .voice p{font-size:13px;line-height:1.5}
  .voice figcaption{font-size:10px;letter-spacing:.12em}
  .studio .tape-set img{--logo-h:24px}
  .studio .tape{padding-block:6px 16px}
  .st-body{gap:12px}
}
/* hidden Studio panels keep their own grid, so the shared cell is sized by the real layouts */
.studio .panel.st-about[hidden],.studio .panel.st-mgmt[hidden]{display:grid!important}
/* the tapes are max-content wide: keep them from sizing the page grid */
body.studio-min{grid-template-columns:minmax(0,1fr)}
.studio{grid-template-columns:minmax(0,1fr)}
.studio > *{min-width:0}
/* short phones: the dictionary label line gives way first */
@media (max-width:620px) and (max-height:780px){.dict-h{display:none}.dict{border-top-width:1px}}
/* short laptop screens: tighter rhythm around the tabs and tapes */
@media (min-width:901px) and (max-height:720px){
  .studio{padding-top:10px}
  .st-tabs{margin-bottom:10px}
  .voices{padding-top:10px}
  .studio .tape{padding-block:8px 16px}
}
@media (min-width:901px) and (max-height:620px){.dict-h{display:none}}
/* small laptops / iPad landscape: a little more room for the About columns */
@media (min-width:901px) and (max-width:1180px){.st-body{gap:32px}.st-about,.st-mgmt{gap:28px}}
@media (max-width:620px){
  .studio{padding-top:10px}
  .st-mgmt{gap:10px}
  .person{padding-top:8px}
  .st-quote p{line-height:1.15}
}

/* Logo design tab: at most four tiles in a row (client's rule), like the Websites tab:
   4 columns on desktop, 3 on tablets, 2 on phones; more tiles wrap to new rows. The
   invitation is always a canvas tile, a blank linen canvas with the +, never a horizontal row */
.cv-blank .site-plus{position:absolute;left:50%;top:50%;z-index:1;width:clamp(44px,26%,64px);height:auto;aspect-ratio:1;
  transform:translate(-50%,-50%);background:rgba(251,251,249,.55);transition:background-color .25s ease,color .25s ease}
.site-new:hover .cv-blank .site-plus,.site-new:focus-visible .cv-blank .site-plus{transform:translate(-50%,-50%);background:var(--ink);color:var(--ground)}
.site-new:hover .cv-blank,.site-new:focus-visible .cv-blank{transform:translateY(-5px)}
/* the Logo tab now runs to two rows and scrolls: every tab starts from the top and only the
   open tab takes room, so the tab row never moves and the shorter tabs never scroll */
.sites{align-content:start}
.sites .panel[hidden]{display:none!important}
@media (max-width:620px){.sites{padding-block:18px 14px}.sites-grid{row-gap:16px}.sites-h{margin-bottom:14px}}
@media (max-width:380px){.sites{padding-top:12px}.sites-grid{row-gap:12px}}
/* five across: the logo captions stack (name, then the link) and share one height,
   so every hairline lines up, with or without a live site */
@media (min-width:621px){
  .logos .site-cap{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;min-height:60px;box-sizing:border-box}
  .logos .site-new .site-cap{flex-direction:row;align-items:baseline;justify-content:space-between}
}

/* ==========================================================================
   Space design tab: each project hangs as a framed print (thin dark frame,
   white mat), the third object in the Work family after the screen (Websites)
   and the canvas (Logo design)
   ========================================================================== */
.frame{display:block;width:100%;aspect-ratio:4/3;align-self:end;box-sizing:border-box;padding:2.4%;
  background:linear-gradient(145deg,#2b2b2b,#0c0c0c);
  box-shadow:0 2px 3px rgba(10,10,10,.16),0 22px 34px -14px rgba(10,10,10,.34);transition:transform .35s ease}
.frame-mat{display:block;width:100%;height:100%;box-sizing:border-box;padding:8%;background:#FDFDFB;
  box-shadow:inset 0 1px 3px rgba(10,10,10,.30),inset 0 0 0 1px rgba(10,10,10,.05)}
.frame-mat img{display:block;width:100%;height:100%;object-fit:cover;box-shadow:0 0 0 1px rgba(10,10,10,.08)}
.frame{position:relative}
.site:hover .frame,.site:focus-visible .frame,.cv-open:focus-visible .frame{transform:translateY(-5px)}
/* the expand badge sits in the cover's bottom corner: moulding 2.4% + mat 8% of 95.2% = 10% of the
   frame width in from the side, 13.35% of its height up from the bottom */
.frame .cv-badge{right:calc(10% + 10px);bottom:calc(13.35% + 10px)}
.spaces .site-new .site-media{aspect-ratio:4/3}
/* three Work tabs on the narrowest phones */
.sites .tab{white-space:nowrap}
/* three Work tabs on one line on phones (Web design · Identity design · Architecture / Interior), measured with the real fonts */
@media (max-width:520px){.sites .tabs{gap:12px}.sites .tab{font-size:10.5px;letter-spacing:.06em}html.ar .sites .tab{font-size:13px}}
@media (max-width:380px){.sites .tab{letter-spacing:.04em}}
@media (max-width:340px){.sites .tabs{gap:10px}.sites .tab{font-size:9.5px;letter-spacing:.02em}html.ar .sites .tab{font-size:11.5px}}

/* ==========================================================================
   Project gallery pop-up (Netflix-style): the canvas is a button; a dark card
   zooms out of it with one slide at a time (swipe, arrows, keys, thumbnails),
   the project name and a white "Live site" button. Native <dialog>: focus is
   trapped, Esc and a click outside close it.
   ========================================================================== */
.cv-open{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;
  text-align:inherit;cursor:zoom-in;align-self:end;-webkit-tap-highlight-color:transparent}
.cv-open:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.cv-open:focus-visible .cv{transform:translateY(-5px)}
.cv-badge{position:absolute;right:13%;bottom:13%;z-index:2;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:rgba(251,251,249,.94);color:var(--ink);
  box-shadow:0 2px 8px rgba(10,10,10,.35);opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .25s ease}
.has-gx:hover .cv-badge,.cv-open:focus-visible .cv-badge{opacity:1;transform:none}
@media (hover:none){.cv-badge{opacity:.92;transform:none;width:26px;height:26px}}
a.site-go{color:var(--ink-2);text-decoration:underline 1px transparent;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
a.site-go:hover,a.site-go:focus-visible{color:var(--ink);text-decoration-color:currentColor}

.gx{padding:0;border:0;border-radius:8px;background:#141414;color:#E8E8E8;
  width:min(1100px,calc(100vw - 32px),calc((100svh - 270px) * 1.416));max-width:none;max-height:calc(100svh - 24px);
  overflow-x:hidden;overflow-y:auto;box-shadow:0 24px 70px rgba(0,0,0,.55);scrollbar-width:none}
.gx::backdrop{background:rgba(10,10,10,.74);transition:opacity .26s ease}
.gx[open]::backdrop{animation:gxFade .35s ease}
.gx.gx-out::backdrop{opacity:0}
@keyframes gxFade{from{opacity:0}to{opacity:1}}
html:has(.gx[open]){overflow:hidden}
.gx-stage{position:relative;background:#0c0c0c}
.gx-track{display:flex;direction:ltr;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain}
.gx-track::-webkit-scrollbar{display:none}
.gx-slide{flex:0 0 100%;margin:0;aspect-ratio:1600/1130;scroll-snap-align:center;scroll-snap-stop:always;
  overflow:hidden;touch-action:pan-x pan-y}
.gx-slide img{display:block;width:100%;height:100%;object-fit:cover;background:#1c1c1c;
  transform-origin:0 0;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
/* v142: zoom. Buttons on the stage; a click (mouse), double tap or pinch also zooms; drag to look around.
   While zoomed the track stops swiping and the slide takes every gesture (touch-action:none). */
@media (hover:hover) and (pointer:fine){.gx-slide img{cursor:zoom-in}}
/* v165: before/after slide. Two frames of one plan; the 'after' is clipped at --p and a range input, laid over the
   whole frame, moves the divider (keyboard and screen readers get the range). Zoom is off on this slide. */
.gx-cmp-box{position:relative;width:100%;height:100%;direction:ltr;overflow:hidden;background:#FBFBF9}
.gx-cmp-box img{position:absolute;inset:0;cursor:ew-resize;background:#FBFBF9}
.gx-cmp-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.gx-cmp-handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#1A1A1A;pointer-events:none}
.gx-cmp-handle::after{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 7l-5 5 5 5M15 7l5 5-5 5'/></svg>");
  background-size:20px 20px;background-position:center;background-repeat:no-repeat}
.gx-cmp-lbl{position:absolute;top:14px;padding:5px 9px;background:#fff;color:#1A1A1A;font:600 10.5px/1.2 var(--ui,Inter,sans-serif);
  letter-spacing:.18em;text-transform:uppercase;pointer-events:none}
html.ar .gx-cmp-lbl{font-family:var(--ar);letter-spacing:0;font-size:12px;text-transform:none}
.gx-cmp-l1{left:14px}.gx-cmp-l2{right:14px}
.gx-cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.gx-cmp-range:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:-4px;background:transparent}
.gx-cmp-range:focus-visible::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:1px}
.gx-cmp-range:focus-visible::-moz-range-thumb{width:1px;height:1px;border:0;background:transparent}
.gx-cmp-range:focus-visible::-webkit-slider-runnable-track{background:transparent}
.gx-cmp-range:focus-visible::-moz-range-track{background:transparent}
.gx.is-zoomed{overflow-y:hidden}
.gx.is-zoomed .gx-track{overflow-x:hidden}
.gx-slide.is-z{touch-action:none}
.gx-slide.is-z img{cursor:grab;will-change:transform}
.gx.is-panning .gx-slide.is-z img{cursor:grabbing}
.gx-zoom{position:absolute;bottom:12px;inset-inline-end:12px;z-index:2;display:flex;border-radius:18px;
  background:#181818;box-shadow:0 2px 10px rgba(0,0,0,.45)}
html.ar .gx-zoom{flex-direction:row-reverse}                 /* minus, then plus, in both languages */
.gx-zoom button{width:36px;height:36px;padding:0;border:0;display:grid;place-items:center;background:none;color:#fff;
  cursor:pointer;border-radius:18px;transition:background-color .2s ease,color .2s ease}
.gx-zoom button:hover:not(:disabled){background:#2c2c2c}
.gx-zoom button:disabled{color:#5c5c5c;cursor:default}
.gx .gx-zoom button:focus-visible{outline-offset:-3px}
.gx-close{position:absolute;top:12px;inset-inline-end:12px;z-index:2;width:36px;height:36px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;background:#181818;color:#fff;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.gx-close:hover{background:#2c2c2c}
.gx-nav{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;padding:0;border:1px solid rgba(255,255,255,.4);
  border-radius:50%;display:grid;place-items:center;background:rgba(20,20,20,.55);color:#fff;cursor:pointer;
  transition:opacity .2s ease,background-color .2s ease}
.gx-nav:hover{background:rgba(20,20,20,.88)}
.gx-prev{left:14px}
.gx-next{right:14px}
.gx-nav:disabled{opacity:0;pointer-events:none}
.gx-info{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 20px;
  padding:clamp(14px,2.2vh,22px) clamp(16px,2.4vw,28px) clamp(16px,2.4vh,24px)}
.gx .gx-title{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(1.25rem,1.9vw,1.7rem);
  line-height:1.2;letter-spacing:-.02em;color:#fff}
.gx-meta{margin-top:2px;font-size:13px;color:#A3A3A3}
.gx-live{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:4px;background:#fff;color:#0A0A0A;
  text-decoration:none;font-weight:600;font-size:14px;line-height:1.3;white-space:nowrap}
.gx-live:hover{background:rgba(255,255,255,.8)}
.gx-now{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;margin-top:8px;padding-top:12px;
  border-top:1px solid #2c2c2c;font-size:13px;color:#D6D6D6}
.gx-num{color:#8C8C8C;font-variant-numeric:tabular-nums}
.gx-thumbs{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,120px);gap:8px;direction:ltr;justify-content:start}
html.ar .gx-thumbs{justify-content:end}
.gx-thumb{padding:0;border:0;border-radius:4px;overflow:hidden;background:none;cursor:pointer;opacity:.5;
  outline:2px solid transparent;outline-offset:2px;transition:opacity .2s ease,outline-color .2s ease}
.gx-thumb img{display:block;width:100%;height:auto;aspect-ratio:1600/1130}
.gx-thumb:hover{opacity:.85}
.gx-thumb[aria-current="true"]{opacity:1;outline-color:#fff}
.gx button:focus-visible,.gx a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:620px){
  .gx{width:calc(100vw - 16px);border-radius:6px}
  .gx-nav{width:36px;height:36px;margin-top:-18px}
  .gx-prev{left:8px}.gx-next{right:8px}
  .gx-close{top:8px;inset-inline-end:8px;width:32px;height:32px}
  .gx-zoom{bottom:8px;inset-inline-end:8px;border-radius:16px}
  .gx-zoom button{width:32px;height:32px;border-radius:16px}
  .gx-info{grid-template-columns:minmax(0,1fr)}
  .gx-live{justify-self:start}
  .gx-thumbs{gap:6px;grid-auto-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.gx[open]::backdrop{animation:none}}
/* short laptop screens: a little less padding around the Work grid */
@media (min-width:901px) and (max-height:700px){.sites{padding-block:14px}}

/* "Start your website today": the same display as the projects, showing a blank white
   page with the + (the website counterpart of the blank linen canvas) */
.mac-screen.mac-blank{display:grid;place-items:center;background:linear-gradient(180deg,#FFFFFF 0%,#F6F6F4 100%)}
.mac-blank .site-plus{width:clamp(38px,17cqw,64px);height:auto;aspect-ratio:1;background:transparent;transition:background-color .25s ease,color .25s ease}
.site-new:hover .mac-blank .site-plus,.site-new:focus-visible .mac-blank .site-plus{transform:none;background:var(--ink);color:var(--ground)}
/* Websites and Space tabs on small laptops: a long name plus "Live site" can take two lines,
   so every caption there keeps the two-line height and the hairlines stay level */
@media (min-width:621px) and (max-width:1279px){.panel:not(.logos) .site-cap{min-height:54px;box-sizing:border-box}html.ar .panel:not(.logos) .site-cap{min-height:60px}}
/* one rule for every Work tab (client's request): 4 tiles a row on desktop, 3 on tablets, 2 on phones */
@media (min-width:621px) and (max-width:900px){.sites-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* "Start your space today": an empty framed print, the same moulding and mat as the
   projects, with a bare backing board and the + (the space counterpart of the blank
   screen and the blank canvas) */
.frame-empty{display:grid;place-items:center;width:100%;height:100%;
  background:linear-gradient(180deg,#EFEDE8 0%,#E8E5DE 100%);
  box-shadow:inset 0 1px 3px rgba(10,10,10,.14),0 0 0 1px rgba(10,10,10,.06)}
.frame-empty .site-plus{width:clamp(36px,24%,60px);height:auto;aspect-ratio:1;background:transparent;
  transition:background-color .25s ease,color .25s ease}
.site-new:hover .frame-empty .site-plus,.site-new:focus-visible .frame-empty .site-plus{transform:none;background:var(--ink);color:var(--ground)}
.site-new:hover .frame-blank,.site-new:focus-visible .frame-blank{transform:translateY(-5px)}

/* ==========================================================================
   Home hero, slide 1: the pencil line (the company profile cover, for the web).
   The plate (assets/img/hero/00-pencil-*.webp, 2580x2093 since v175 (make_pencil_tall.py: 500 px of paper added above; y below are +500): the photo cut
   just left of the sleeve, its paper faded to transparent on the top, left and
   bottom) is anchored to the screen's right edge (left in Arabic, mirrored), so
   the hand always enters from the side and the bottom corner, where the slide
   controls and the e-mail sit, stays paper. Its scale (--s, screen px per plate px):
   on wide screens the line starts at the gutter, as on the cover; on phones the
   hand keeps about a third of the width; short screens shrink it so the hand
   clears the controls. The slogan sits on the line and stops before the tip.
   Plate px: line start 540, pencil tip 2095 (485 from the edge), line 730,
   hand top 504, hand bottom at the edge 1190.
   The big slogan has its own layer (.hx-intro-copy, above the slides): site.js
   flies it into the small tagline under the logo (the h1) when slide 1 hands
   over, and back out of it when the show returns to slide 1. Both carry the
   same words, face, weight, tracking, line height and line breaks, so it lands
   exactly on the tagline. Nothing here may transition their opacity.
   ========================================================================== */
body.home-min .hero-x{container-type:size;
  --G:max(var(--gutter), calc((100cqw - var(--max)) / 2)); --U:104px; --ymin:calc(var(--nav-h) + 128px);
  --sw:max(calc((100cqw - var(--G)) / 2055), min(calc(100cqw * .00072), .3px));
  /* short screens: the hand (686 plate px tall) must fit between the header and the controls */
  /* v175: the hand may shrink so the line can sit at 58cqh, but the plate always spans the screen past its side feather
     (2580 px wide, feather 100: s >= 100cqw / 2480) */
  --s:max(min(var(--sw), calc((100cqh - var(--U) - var(--ymin)) / 460), calc((100cqh - var(--U) - var(--nav-h) - 24px) / 686), calc((42cqh - var(--U)) / 460), 1.45px), calc(100cqw / 2480));
  /* v176: the slogan is centred on the screen. Its size is the largest that ends 3cqw before the pencil tip when centred
     (--F); the line sits just under the slogan block, which is centred on 50cqh (kicker + slogan ~ 1.13 F + 12px). */
  --F:min(clamp(26px,max(3.2cqw,2.9cqh),72px), calc((var(--xt) - 53cqw) * 2 / var(--em)));
  --yl:clamp(var(--ymin), calc(50cqh + 1.13 * var(--F) + 12px), calc(100cqh - var(--U) - 460 * var(--s)));   /* v176: the line under the centred slogan */
  --x0:max(var(--G), calc(100cqw - 2055 * var(--s)));
  --xt:calc(100cqw - 485 * var(--s));
  /* widest line of the slogan in em (+3%), for the font size that always fits before the tip */
  --em:20}
html.ar body.home-min .hero-x{--em:15.2}
.hx-intro{background:linear-gradient(180deg,#F2F2EE 0%,#EDECE8 52%,#E8E7E3 100%)}
.hx-slide.hx-intro img,.hx-slide.hx-intro.is-active img{position:absolute;inset-inline-end:0;
  top:calc(var(--yl) - 1230 * var(--s));width:calc(2580 * var(--s));height:auto;max-width:none;   /* v175: the tall plate (2580 x 2093), its line at 1230 */
  object-fit:fill;transform:none;animation:none}
/* v175: the drawing is one static plate again (00-pencil-*.webp); the draw animation of v163 is withdrawn at the
   client's request, and the home page opens with the wordmark splash instead (.splash, below). */
/* v171: no mirrored plates. Arabic shows the same drawing as English (the hand on the right, the line drawn left to right)
   and the slogan in the same place on the paper, right-aligned inside its box and revealed in reading order. */
html.ar .hx-slide.hx-intro img,html.ar .hx-slide.hx-intro.is-active img{inset-inline-end:auto;right:0;left:auto}
html.ar .hx-intro-copy{right:auto}   /* v176: centred like the English, see .hx-intro-copy */
.hx-intro-copy{position:absolute;z-index:3;pointer-events:none;left:50%;transform:translateX(-50%);text-align:center;
  bottom:calc(100cqh - var(--yl) + .55em);width:max-content;margin:0;
  font-family:var(--display);font-weight:300;line-height:1.16;letter-spacing:-.012em;color:#262626;
  font-size:var(--F)}   /* v176: centred on the screen; the size from --F */
.hx-intro-copy p{margin:0}
.hx-intro-t{width:max-content;white-space:nowrap;transform-origin:0 0}
.hx-intro-k{margin-bottom:clamp(12px,1.9cqh,24px)!important;font-weight:600;font-size:clamp(9.5px,.72cqw,12.5px);
  line-height:1.4;letter-spacing:.34em;text-transform:uppercase;color:#8E8E8A;white-space:nowrap}
html.ar .hx-intro-copy{font-family:var(--title);font-weight:300;line-height:1.4;letter-spacing:0;
  font-size:min(clamp(25px,3cqw,64px), var(--F))}
html.ar .hx-intro-k{font-family:var(--ar);font-weight:600;letter-spacing:.02em;font-size:clamp(11px,.85cqw,14px)}
/* the tagline under the wordmark is the slogan's landing place: same face, weight, tracking
   and line height (Arabic moves from Cairo to Tajawal for this) */
body.home-min .hx-tag{line-height:1.16;letter-spacing:-.012em;white-space:nowrap;text-wrap:nowrap}
html.ar body.home-min .hx-tag{font-family:var(--title);font-weight:300;line-height:1.4;letter-spacing:0}
body.home-min.theming .hx-tag{transition:color 1.2s ease !important}
/* line breaks shared by the slogan and the tagline (1 Nov: as few lines as the room allows):
   one line down to 621px, two on phones (after "vision"; Arabic after "لم"); never three */
.sl-br{display:none}
.sl-br::before{content:"\A";white-space:pre}
/* at rest: the slogan shows on slide 1, the tagline on slides 2-5 */
.hero-x:not(:has(.hx-intro.is-active)) .hx-intro-copy > *{opacity:0}
body.home-min:has(.hx-intro.is-active) .hx-tag{opacity:0}
/* bottom-left caption on slide 1: the four disciplines and the legal line, as on the cover */
.hx-svc-intro{align-self:end}
.hx-svc-d{text-wrap:balance}
.hx-svc-d .nw{white-space:nowrap}
body.home-min .hx-svc-intro{gap:7px}
.hx-svc-d{font-family:var(--display);font-weight:300;font-size:clamp(14px,1.25vw,19px);line-height:1.3;letter-spacing:-.005em}
.hx-svc-l{font-size:11px;line-height:1.4;letter-spacing:.03em;color:var(--muted)}
html.ar .hx-svc-d{font-family:var(--title);font-weight:300;font-size:clamp(15px,1.3vw,20px);letter-spacing:0}
html.ar .hx-svc-l{font-family:var(--ar);font-size:11.5px;letter-spacing:0}
@media (max-width:620px){
  /* phones: the caption, the controls and the footer take the bottom ~200px */
  body.home-min .hero-x{--U:206px;--ymin:calc(var(--nav-h) + 150px);
    --yl:clamp(var(--ymin), 53cqh, calc(100cqh - var(--U) - 460 * var(--s)));--em:10.8;   /* v175: lower (was 47cqh) */
    --sw:max(calc((100cqw - var(--G)) / 2055), min(calc(100cqw * .00066), .3px))}   /* a slightly smaller hand: more line for two-line slogan */
  html.ar body.home-min .hero-x{--em:8}
  .sl-br-t{display:inline}                    /* English: two lines, after "vision" */
  html.ar .sl-br-p{display:inline}            /* Arabic: two lines, after "لم" */
  /* v176: phones keep the slogan at the margin (centred, it would run under the pencil); the line at 53cqh */
  body.home-min .hero-x{--yl:clamp(var(--ymin), 53cqh, calc(100cqh - var(--U) - 460 * var(--s)))}
  .hx-intro-copy{left:var(--x0);transform:none;text-align:start;font-size:min(clamp(20px,7.2cqw,32px), calc((var(--xt) - var(--x0) - 3cqw) / var(--em)))}
  html.ar .hx-intro-copy{text-align:right;font-size:min(clamp(23px,6.6cqw,30px), calc((var(--xt) - var(--x0) - 3cqw) / var(--em)))}
  body.home-min .hx-tag,html.ar body.home-min .hx-tag{max-width:none;text-wrap:nowrap}
  .hx-svc-d{font-size:13.5px}
  .hx-intro-k{letter-spacing:.26em}
  .hx-svc-l{font-size:10.5px}
}

/* ==========================================================================
   Services: one summary screen, after the company profile's services spread.
   Four columns: a rounded square image with a soft shadow, the discipline set
   between two hairlines, four services underneath in light type. The column
   width (--cw) is the smaller of what fits across and what fits in the height,
   and the grid is centred, so the four blocks always stay square and together:
   4 across from 901px (one screen; short screens shrink the squares), 2 x 2 below
   (tablets and phones keep generous squares and scroll a little instead).
   Architecture and Interior open the Space design tab, Identity the Logo design
   tab, Website the Websites tab.
   ========================================================================== */
body.svc-min{grid-template-columns:minmax(0,1fr)}
.svc{display:grid;align-content:center;padding-block:clamp(20px,4.5vh,60px)}
.svc > .container{width:100%;box-sizing:border-box}
.svc-grid{--gap:clamp(12px,1.1vw,20px);
  --cw:min(calc((100% - 3 * var(--gap)) / 4), calc(100svh - 440px), 400px);
  display:grid;grid-template-columns:repeat(4,max(var(--cw),150px));justify-content:center;gap:clamp(26px,4vh,40px) var(--gap)}
.svc-col{min-width:0;margin:0}
.svc-img{display:block;aspect-ratio:1;border-radius:6.2%;overflow:hidden;background:var(--surface);
  box-shadow:0 2px 6px rgba(10,10,10,.07),0 16px 30px -16px rgba(10,10,10,.38);
  transition:transform .35s ease,box-shadow .35s ease}
/* image + discipline link to the matching Work tab: the square lifts, as the Work tiles do */
.svc-go{display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.svc-go:hover .svc-img,.svc-go:focus-visible .svc-img{transform:translateY(-5px);
  box-shadow:0 2px 6px rgba(10,10,10,.08),0 22px 36px -16px rgba(10,10,10,.45)}
.svc-go:focus-visible{outline:none}.svc-go:focus-visible .svc-img{outline:2px solid var(--ink);outline-offset:4px}
.svc-img img{display:block;width:100%;height:100%;object-fit:cover}
.svc-t{display:flex;align-items:center;gap:clamp(12px,1.1vw,20px);margin:clamp(16px,2.6vh,30px) 0 clamp(12px,2vh,22px);
  font-family:var(--display);font-weight:400;font-size:clamp(15px,1.3vw,21px);line-height:1.3;letter-spacing:-.005em;
  color:var(--ink);white-space:nowrap}
.svc-t::before,.svc-t::after{content:"";flex:1 1 0;min-width:12px;border-top:1px solid var(--ink)}
.svc-list{list-style:none;margin:0;padding:0;font-family:var(--display);font-weight:300;
  font-size:clamp(13.5px,1.15vw,18px);line-height:1.5;letter-spacing:.005em;color:#3A3A3A}
.svc-list li{padding-block:.16em}
@media (min-width:901px){html.ar .svc-grid{--cw:min(calc((100% - 3 * var(--gap)) / 4), calc(100svh - 470px), 400px)}}   /* taller Arabic lines */
html.ar .svc-t{font-family:var(--title);font-weight:400;font-size:clamp(16px,1.4vw,22px);letter-spacing:0}
html.ar .svc-list{font-family:var(--ar);font-weight:300;font-size:clamp(14px,1.18vw,18px);letter-spacing:0;line-height:1.6}
@media (max-width:900px){
  .svc-grid{--cw:min(calc((100% - var(--gap)) / 2), 340px);
    grid-template-columns:repeat(2,max(var(--cw),140px))}
}
@media (max-width:620px){
  .svc{padding-block:12px 14px}
  .svc-grid{--gap:12px;--cw:min(calc((100% - var(--gap)) / 2), 260px);row-gap:22px}
  .svc-t{margin:12px 0 8px;font-size:14px;gap:8px}
  .svc-list{font-size:12.5px;line-height:1.4}
  .svc-list li{padding-block:.12em}
  html.ar .svc-t{font-size:15px}
  html.ar .svc-list{font-size:13px;line-height:1.5}
}

/* Studio, simplified (1 Nov 2026): no tabs, no layers, no client tape. One column beside the studios:
   the dictionary entry, one paragraph, then the founder: name large, "Founder", his line. */
.st-simple{grid-template-rows:minmax(0,1fr) auto}
.st-simple .st-body{align-items:center}
.st-one{display:grid;gap:clamp(8px,1.6vh,20px);align-content:center;max-width:44em;min-width:0}
.st-simple .st-p{font-size:clamp(15px,min(1.25vw,2.2vh),19px)}
.st-one .dict{border-top:0}
.st-one .dict dl>div{padding-block:clamp(6px,1.1vh,12px)}
.st-one .dict dl>div:last-child{border-bottom:1px solid var(--ink)}
.st-p{margin:0;font-size:clamp(14px,min(1.1vw,1.9vh),17px);line-height:1.6;color:var(--ink-2);max-width:40em}
html.ar .st-p{line-height:1.9}
.st-fdr{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,2.4vw,36px);row-gap:clamp(6px,1.2vh,12px);align-items:end;
  font-size:clamp(13px,min(1.04vw,1.85vh),16px);line-height:1.55;padding-top:clamp(10px,2.4vh,30px)}
.studio .st-fdr-n{margin:0;font-family:var(--display);font-weight:200;font-size:clamp(1.6rem,min(3vw,5vh),3.6rem);line-height:1;letter-spacing:-.03em;grid-column:1}
html.ar .studio .st-fdr-n{font-family:var(--title);font-weight:300;letter-spacing:0;line-height:1.25;font-size:clamp(1.5rem,min(2.6vw,4.4vh),3.2rem)}
.st-fdr-r{margin:0 0 .25em;color:var(--muted);font-size:.74em;letter-spacing:.32em;text-transform:uppercase;font-family:var(--display);font-weight:600;grid-column:2;align-self:end}
html.ar .st-fdr-r{letter-spacing:0;font-size:.95em;font-family:var(--ar)}
.st-fdr-q{margin:0;grid-column:1/-1;max-width:36em}
.st-fdr-q p{margin:0;color:var(--ink);font-size:1.08em;line-height:1.55}
html.ar .st-fdr-q p{line-height:1.85}
.st-simple .person-c{grid-column:1/-1;margin-top:0}
@media (max-width:620px){
  .st-one{gap:10px}
  .st-p{font-size:13.5px}
  .studio .st-fdr-n{font-size:clamp(1.4rem,min(7vw,3.6vh),2rem)}
  .st-fdr-q p{font-size:13.5px}
}
@media (min-width:901px) and (max-height:680px){.st-one .dict-h{display:none}}
@media (min-width:901px) and (max-height:620px){.st-one .dict dl>div:first-child{display:none}}
@media (max-width:620px) and (max-height:740px){.st-simple .person-c{display:none}}
@media (min-width:901px) and (max-height:760px){
  .st-one{gap:10px}
  .st-one .dict dl>div{padding-block:5px}
  .st-fdr{padding-top:10px;row-gap:4px}
  .st-simple .person-c{display:none}
  .st-one .dict-h{display:none}
}
@media (max-width:620px){
  .st-one .dict-h{display:none}
  .st-one .dict dl>div{padding-block:5px}
  .st-fdr{padding-top:8px;row-gap:4px}
  .st-simple .person-c{display:none}
}
@media (max-width:620px) and (max-height:760px){
  .st-one .dict dl>div:first-child{display:none}
  .st-one{gap:8px}
  .st-p{font-size:13px;line-height:1.5}
  .st-fdr-q p{font-size:13px;line-height:1.45}
}

/* reviews tape without rules (1 Nov): no line above the heading, no dividers between the cards */
.st-simple .v-head{border-top:0;padding-top:0}
.st-simple .vtape-set > li{border-left:0}
.st-simple .vtape-set > li{padding-inline:clamp(18px,2.4vw,40px)}
.st-simple .vtape-set > li:first-child{padding-inline-start:0}
.st-simple .ofc-reach{display:none}

/* Studio title and lighter testimonials (1 Nov) */
.st-simple .st-h{max-width:none;margin-bottom:clamp(2px,.6vh,8px)}
.st-simple .st-p{color:var(--ink-2)}
.st-simple .voice p{font-weight:300;color:var(--ink-2)}
html.ar .st-simple .voice p{font-weight:300}
@media (max-width:620px){.st-simple .st-h{font-size:clamp(1.6rem,8vw,2.2rem)}}
/* the testimonials zone is framed by two rules: under its heading, and above the footer (1 Nov) */
.st-simple .v-head{border-top:0;border-bottom:1px solid var(--line);padding-bottom:clamp(8px,1.4vh,14px);margin-bottom:clamp(10px,2vh,22px)}
/* the testimonials zone: a light grey band, full bleed, between the two rules; Google's amber on every star */
.st-simple .voices{position:relative;padding-top:0;padding-bottom:clamp(8px,1.6vh,18px);border-bottom:1px solid var(--line)}
.st-simple .voices::before{content:'';position:absolute;inset:0 calc(-1 * var(--gutter));background:var(--surface);z-index:-1}   /* bleeds to the screen edges by the body gutter: no 100vw box, so no sideways overflow in Arabic */
.st-simple .v-head{padding-top:clamp(10px,2vh,22px)}
.st-simple .stars,.st-simple .v-rate .stars{color:#FBBC04}

/* Solutions on one line (1 Nov): the hairlines beside the four titles run through the gaps, so the four
   disciplines sit on one continuous line; two by two on tablets and phones, the line runs through each pair.
   Every column keeps the same geometry (same title row, same rule lengths); only the gap is bridged by a
   rule drawn across it. The tab is called Solutions (Think Brand: sell solutions, not services); the file
   keeps its name. */
.svc-col{position:relative}
.svc-t{position:relative}
/* bridge: a rule from the end of the title row across the column gap */
.svc-col:nth-child(-n+3) .svc-bridge{position:absolute;top:calc(50% - .5px);inset-inline-start:100%;width:var(--gap);border-top:1px solid var(--ink)}   /* centred like the hairlines it joins (their top is (h - 1px) / 2), so the line never steps */
@media (max-width:900px){
  .svc-col:nth-child(2n) .svc-bridge{display:none}
}
/* JoCanvas over the four (1 Nov, v82): the wordmark, large and pale, centred above the grid, so the page reads
   "JoCanvas" and then its four solutions. In flow (the squares give it room: the height reserve grows from 440
   to 500px, 470 to 530 in Arabic); its size follows width and height so short laptops keep their squares. */
.svc-big{display:block;margin:0 auto clamp(14px,3vh,34px);height:clamp(30px,min(4.2vw,7vh),64px);width:auto;opacity:.14;pointer-events:none}
@media (max-width:620px){.svc-big{margin-bottom:16px}.svc-grid{--cw:min(calc((100% - var(--gap)) / 2), 260px)}}

/* ==========================================================================
   Veil slides (the tower, slide 5): the lower half of the picture is busy (surf,
   trees, the lit promenade). A faint pale veil calms it (.hero-x::before, its own
   layer so it fades with the slide), and the text of the lower half (caption,
   progress bars, pause button, footer) is set white with a black drop shadow, so
   it reads on the grey sea and on the dark trees alike. The nav and tagline above
   keep the light-slide ink. JS sets body.hero-veil from the slide's hx-veil class.
   ========================================================================== */
body.home-min .hero-x::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  background:linear-gradient(to top,rgba(251,251,249,.24),rgba(251,251,249,.14) 14%,rgba(251,251,249,0) 32%)}
body.home-min.hero-veil .hero-x::before{opacity:1}
body.home-min.hero-veil .hx-svc,body.home-min.hero-veil .hx-svc-k,body.home-min.hero-veil .hx-svc-t{color:#FBFBF9;
  text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 8px rgba(0,0,0,.55),0 3px 22px rgba(0,0,0,.5)}
body.home-min.hero-veil .hx-svc-t{border-bottom-color:rgba(251,251,249,.55)}
body.home-min.hero-veil .hx-svc:hover .hx-svc-t{border-bottom-color:#FBFBF9}
body.home-min.hero-veil .hx-foot{filter:drop-shadow(0 1px 2px rgba(0,0,0,.75)) drop-shadow(0 0 8px rgba(0,0,0,.5))}
body.home-min.hero-veil .hx-bar span{background:rgba(251,251,249,.4)}
body.home-min.hero-veil .hx-bar span::after{background:#FBFBF9}
body.home-min.hero-veil .hx-pause{color:#FBFBF9;border-color:rgba(251,251,249,.6)}
body.home-min.hero-veil .minbar{--mb-fg:#FBFBF9;--mb-hi:#fff;color:#FBFBF9;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 7px rgba(0,0,0,.6),0 2px 16px rgba(0,0,0,.5)}
body.home-min.hero-veil .minbar a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
body.home-min.hero-veil .minbar-social svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.85)) drop-shadow(0 0 6px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(0,0,0,.45))}

/* ==========================================================================
   Side menu (tablets and phones, 1 Nov 2026): the Menu button opens a panel that
   slides in from the right, full height, on the page's paper. Three links in
   large light type with hairlines and a small index, Start your project as a pill,
   the offices and e-mail as a footer line. The header stays on top: its button
   reads Close while the panel is open, and the page behind dims. One markup for
   every page (the .mobile-menu nav that was the dropdown); the extra lines are
   CSS content, the labels come from site.js.
   ========================================================================== */
@media (max-width:900px){
  .nav.open{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav .brand,.nav .nav-actions{position:relative;z-index:61}
  .nav::after{content:"";position:fixed;inset:0;z-index:55;background:rgba(10,10,10,.34);opacity:0;pointer-events:none;transition:opacity .5s ease}
  .nav.open::after{opacity:1;pointer-events:auto}
  .mobile-menu{display:grid;grid-template-rows:repeat(4,auto) minmax(0,1fr) auto;gap:0;   /* v179: four links (Contact since v169), then the button at the foot */
    position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(86vw,420px);box-sizing:border-box;
    padding:calc(var(--nav-h) + 18px) clamp(24px,6vw,40px) max(26px,env(safe-area-inset-bottom));
    background:var(--ground);box-shadow:-24px 0 60px -30px rgba(10,10,10,.35);
    clip-path:inset(0 0 0 100%);visibility:hidden;transition:clip-path .55s cubic-bezier(.65,0,.35,1),visibility 0s linear .55s;   /* closed: clipped in place, never parked off-screen (no sideways scroll) */
    counter-reset:mm}
  .nav.open .mobile-menu{clip-path:inset(0 0 0 -80px);visibility:visible;transition:clip-path .55s cubic-bezier(.65,0,.35,1),visibility 0s}   /* -80px keeps the panel's shadow */
  .mobile-menu a:not(.btn){position:relative;display:block;text-decoration:none;color:var(--ink);
    font-family:var(--display);font-weight:200;font-size:clamp(34px,9vw,46px);line-height:1.1;letter-spacing:-.02em;
    padding:clamp(14px,2.6vh,22px) 0 clamp(14px,2.6vh,22px) 34px;border-bottom:1px solid var(--line);
    counter-increment:mm;opacity:0;transform:translateX(24px);transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1)}
  .mobile-menu a:not(.btn)::before{content:"0" counter(mm);position:absolute;left:0;top:calc(50% - 6px);
    font-family:var(--body);font-weight:500;font-size:10px;line-height:1;letter-spacing:.18em;color:var(--muted)}
  .mobile-menu a:not(.btn)[aria-current="page"]::after{content:"";position:absolute;right:0;top:50%;width:18px;border-top:1px solid var(--ink)}
  .mobile-menu a:not(.btn):nth-child(1){transition-delay:.12s}
  .mobile-menu a:not(.btn):nth-child(2){transition-delay:.19s}
  .mobile-menu a:not(.btn):nth-child(3){transition-delay:.26s}
  .mobile-menu a:not(.btn):nth-child(4){transition-delay:.33s}
  .nav.open .mobile-menu a:not(.btn){opacity:1;transform:none}
  .mobile-menu a:not(.btn):first-of-type{border-top:1px solid var(--line)}
  .mobile-menu a.btn{align-self:end;margin-top:28px;justify-content:center;width:100%;box-sizing:border-box;padding-block:15px;
    opacity:0;transition:opacity .45s ease .34s}
  .nav.open .mobile-menu a.btn{opacity:1}
  .mobile-menu::after{content:"Amman · Ras Al Khaimah\A info@jocanvas.com";white-space:pre;margin-top:28px;
    font-family:var(--body);font-size:11px;line-height:1.9;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
    opacity:0;transition:opacity .45s ease .4s}
  .nav.open .mobile-menu::after{opacity:1}
  html.ar .mobile-menu::after{content:"عمّان · رأس الخيمة\A info@jocanvas.com";letter-spacing:0;text-transform:none;font-size:12.5px}
  html.ar .mobile-menu a:not(.btn){font-family:var(--title);font-weight:300;letter-spacing:0;padding-left:0;padding-right:34px;font-size:clamp(30px,8vw,42px)}
  html.ar .mobile-menu a:not(.btn)::before{left:auto;right:0;font-family:var(--body)}
  html.ar .mobile-menu a:not(.btn)[aria-current="page"]::after{right:auto;left:0}
  html.ar .mobile-menu{direction:rtl}
  body.menu-open{overflow:hidden}
  .nav.open .menu-btn{color:var(--ink);border-color:var(--ink)}
  @media (prefers-reduced-motion:reduce){.mobile-menu,.mobile-menu a,.mobile-menu::after{transition:none!important}}
}

/* ==========================================================================
   Reviews tape on touch screens (1 Nov 2026): phones and tablets get a real
   horizontal scroller instead of the CSS marquee, so the tape can be swiped and
   read at the reader's own pace. site.js keeps it drifting at the marquee's speed,
   stops the moment a finger touches it, resumes a few seconds after it lets go,
   and wraps seamlessly (four identical sets). The pause button still stops it.
   ========================================================================== */
@media (pointer:coarse){
  .vtape{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
  .vtape::-webkit-scrollbar{display:none}
  .vtape .vtape-track{animation:none}
}

/* ==========================================================================
   Studio in golden proportions (1 Nov 2026, client's request: more white space,
   proportion). One unit u (the body size, 18px on a desktop, smaller on short or
   narrow screens) and its golden multiples set every distance on the page:
     u = 18 · φu = 29 · φ²u = 47 · φ³u = 76 · φ⁴u = 123
   Columns: text : offices = φ : 1 (61.8 / 38.2), with a φ³ gutter. The block sits
   at the golden section of the free height (1 above : φ below). Type: paragraph
   u, founder φ^1.5·u, headline φ²·u. Gaps: headline→paragraph φu, paragraph→
   founder φ³u, name→quote u, quote→careers φu. Offices: φu between studios.
   ========================================================================== */
.studio.st-simple{--u:clamp(14px,min(1.1vw,1.85vh),17px);--p1:calc(var(--u) * 1.618);--p2:calc(var(--u) * 2.618);--p3:calc(var(--u) * 4.236);--p4:calc(var(--u) * 6.854);
  padding-top:0;grid-template-rows:minmax(0,1fr) auto}
.studio.st-simple .st-top{align-self:stretch;display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1.618fr);padding-block:var(--p2)}
.studio.st-simple .st-body{grid-row:2;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);column-gap:var(--p3);align-items:start}
.studio.st-simple .st-one{display:block;max-width:none}
.studio.st-simple .st-h{font-size:calc(var(--u) * 2.618);line-height:1.04;letter-spacing:-.03em;margin:0 0 var(--p1)}
html.ar .studio.st-simple .st-h{font-size:calc(var(--u) * 2.3);line-height:1.3}
.studio.st-simple .st-p{font-size:var(--u);line-height:1.618;max-width:34em;margin:0}
.studio.st-simple .st-fdr{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--p1);row-gap:var(--u);align-items:end;
  padding-top:var(--p3);font-size:var(--u);line-height:1.618}
.studio.st-simple .st-fdr-n{font-size:calc(var(--u) * 2.058);line-height:1;letter-spacing:-.03em}   /* φ^1.5 */
html.ar .studio.st-simple .st-fdr-n{font-size:calc(var(--u) * 1.9);line-height:1.25}
.studio.st-simple .st-fdr-r{font-size:calc(var(--u) * .62);letter-spacing:.32em;margin:0 0 .2em}
.studio.st-simple .st-fdr-q{max-width:30em}
.studio.st-simple .st-fdr-q p{font-size:var(--u);line-height:1.618;font-weight:300;color:var(--ink)}
.studio.st-simple .person-c{margin-top:var(--p1);font-size:calc(var(--u) * .8)}
.studio.st-simple .st-offices{display:grid;gap:var(--p1);align-content:start;align-self:start;
  margin-top:calc(var(--u) * 2.618 * 1.04 + var(--p1));   /* level with the first line of the paragraph */
  border-inline-start:1px solid var(--line);padding-inline-start:var(--p2)}
.studio.st-simple .st-offices .eyebrow{margin:0 0 calc(var(--u) * -.4)}
.studio.st-simple .ofc{gap:2px;font-size:calc(var(--u) * .86);line-height:1.618}
.studio.st-simple .ofc h3{font-size:1.06em}
/* the band of reviews: more air, same frame */
.studio.st-simple .v-head{padding-top:var(--u);padding-bottom:calc(var(--u) * .7);margin-bottom:var(--u)}
.studio.st-simple .voices{padding-bottom:var(--u)}
.studio.st-simple .voice p{font-size:calc(var(--u) * .86)}
.studio.st-simple .voice{gap:calc(var(--u) * .6)}
.studio.st-simple .vtape-set > li{padding-block:0}
/* short laptops: the free height is small, the block stays whole and the band keeps its air */
@media (min-width:901px) and (max-height:760px){
  .studio.st-simple{--u:clamp(13px,1.8vh,15px)}
  .studio.st-simple .st-top{padding-block:var(--p1)}
  .studio.st-simple .person-c{display:none}
}
/* tablets and phones: one column, offices below in two columns under a hairline */
@media (max-width:900px){
  .studio.st-simple{--u:clamp(14px,min(2vw,1.8vh),16px)}
  .studio.st-simple .st-top{grid-template-rows:minmax(0,1fr) auto minmax(0,1.618fr)}
  .studio.st-simple .st-body{grid-template-columns:minmax(0,1fr);row-gap:var(--p3)}
  .studio.st-simple .st-offices{margin-top:0;border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line);padding-top:var(--p1);
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--p2);row-gap:var(--u)}
  .studio.st-simple .st-offices .eyebrow{grid-column:1/-1;position:static;width:auto;height:auto;clip-path:none;margin:0}
}
@media (max-width:620px){
  .studio.st-simple{--u:clamp(13px,3.8vw,15px)}
  .studio.st-simple .st-top{padding-block:var(--p1) var(--p2)}
  .studio.st-simple .st-h{font-size:calc(var(--u) * 2.3)}
  .studio.st-simple .st-fdr-n{font-size:calc(var(--u) * 1.85)}
  .studio.st-simple .st-fdr{padding-top:var(--p2)}
  .studio.st-simple .st-body{row-gap:var(--p2)}
  .studio.st-simple .person-c{display:flex}
}

/* the founder's portrait (1 Nov 2026): a circle of φ⁴u beside the name, the quote indented to it */
.studio.st-simple .st-fdr-photo{grid-template-columns:auto auto minmax(0,1fr);column-gap:var(--p1);align-items:end}
.studio.st-simple .st-fdr-img{grid-column:1;grid-row:1 / span 2;align-self:start;width:var(--p4);height:var(--p4);border-radius:50%;object-fit:cover;object-position:50% 35%;
  margin-inline-end:calc(var(--p1) * .4)}
.studio.st-simple .st-fdr-photo .st-fdr-n{grid-column:2;grid-row:1}
.studio.st-simple .st-fdr-photo .st-fdr-r{grid-column:3;grid-row:1}
.studio.st-simple .st-fdr-photo .st-fdr-q{grid-column:2 / -1;grid-row:2;align-self:start}
.studio.st-simple .st-fdr-photo .person-c{grid-column:2 / -1}
@media (max-width:620px){
  .studio.st-simple .st-fdr-img{width:calc(var(--u) * 4.236);height:calc(var(--u) * 4.236)}
}
/* the founder's role links to his LinkedIn profile (1 Nov 2026) */
.studio.st-simple .st-fdr-r a{display:inline-flex;align-items:center;gap:.6em;color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.studio.st-simple .st-fdr-r .in{width:1.1em;height:1.1em;flex:none;color:var(--ink-2)}
.studio.st-simple .st-fdr-r a:hover .in{color:var(--ink)}
.studio.st-simple .st-fdr-r a:hover,.studio.st-simple .st-fdr-r a:focus-visible{color:var(--ink);border-bottom-color:currentColor}

/* ==========================================================================
   Studio in three tabs (2 Nov 2026, client's request): Story · Founder · Offices,
   the reviews tape under all three. Same tab bar as Work, same golden unit as
   before; one panel shows at a time, so each idea gets the whole room.
   ========================================================================== */
.studio.st-tabbed .st-top{grid-template-rows:auto minmax(0,1fr) auto minmax(0,1.618fr);padding-block:var(--p1) var(--p2)}
.studio.st-tabbed .st-tabs{grid-row:1;margin:0;gap:clamp(20px,2.4vw,32px)}
.studio.st-tabbed .st-panels{grid-row:3;display:grid}
.studio.st-tabbed .st-panel{grid-area:1/1;min-width:0}
.studio.st-tabbed .st-panel[hidden]{display:none}
.studio.st-tabbed .st-h{margin-bottom:var(--p1)}
.studio.st-tabbed .st-p{max-width:34em}
.studio.st-tabbed .st-fdr{padding-top:0}
.studio.st-tabbed .st-offices{display:grid;grid-template-columns:repeat(2,minmax(0,22em));gap:var(--p1) var(--p3);margin-top:0;border:0;padding:0;align-content:start}
.studio.st-tabbed .ofc{font-size:var(--u);line-height:1.618;gap:4px}
.studio.st-tabbed .ofc h3{font-size:1.1em}
@media (max-width:900px){
  .studio.st-tabbed .st-offices{grid-template-columns:minmax(0,1fr);border:0;padding:0}
}
@media (max-width:620px){
  .studio.st-tabbed .st-tabs{gap:18px}
  .studio.st-tabbed .st-top{padding-block:var(--u) var(--p1)}
}

/* Studio tabs centred (2 Nov 2026, client's request): the tab bar sits a tenth of the viewport under the
   header, centred; every panel is set centred too; the Map link sits beside the city name. */
.studio.st-tabbed .st-top{padding-top:10vh}
.studio.st-tabbed .st-tabs{justify-content:center}
.studio.st-tabbed .st-panel{text-align:center;justify-items:center}
.studio.st-tabbed .st-one{margin-inline:auto;max-width:34em}
.studio.st-tabbed .st-p{margin-inline:auto}
/* founder: a centred stack — portrait, name, role, the quote, careers */
.studio.st-tabbed .st-fdr-photo{grid-template-columns:minmax(0,1fr);justify-items:center;column-gap:0;row-gap:var(--u);max-width:30em;margin-inline:auto}
.studio.st-tabbed .st-fdr-img{grid-column:1;grid-row:auto;margin:0 0 calc(var(--u) * .6)}
.studio.st-tabbed .st-fdr-photo .st-fdr-n,.studio.st-tabbed .st-fdr-photo .st-fdr-r,.studio.st-tabbed .st-fdr-photo .st-fdr-q,.studio.st-tabbed .st-fdr-photo .person-c{grid-column:1;grid-row:auto;justify-self:center}
.studio.st-tabbed .st-fdr-photo .st-fdr-r{margin:calc(var(--u) * -.4) 0 0}
.studio.st-tabbed .st-fdr-photo .person-c{justify-content:center;margin-top:var(--u)}
/* offices: two centred columns, Map beside the city */
.studio.st-tabbed .st-offices{justify-content:center;grid-template-columns:repeat(2,minmax(0,20em))}
.studio.st-tabbed .ofc{justify-items:center}
.studio.st-tabbed .ofc h3{display:inline-flex;align-items:baseline;gap:.6em}
.studio.st-tabbed .ofc h3 .ofc-map{margin:0;font-weight:400;font-size:.8em;font-family:var(--body)}
.studio.st-tabbed .ofc p{max-width:22em}
@media (max-width:620px){
  .studio.st-tabbed .st-top{padding-top:10vh}
  .studio.st-tabbed .st-offices{grid-template-columns:minmax(0,1fr);row-gap:var(--p1)}
  /* v179 (phones): the panel keeps at least a unit of air under the tab bar (on short phones the centred panel
     touched it), the portrait is larger, and the careers line sits closer to the quote */
  .studio.st-tabbed .st-panels{padding-top:calc(var(--u) * 1.2)}
  .studio.st-tabbed .st-top{padding-top:7vh}
  .studio.st-simple .st-fdr-img{width:calc(var(--u) * 5.4);height:calc(var(--u) * 5.4)}
  .studio.st-tabbed .st-fdr-img{margin-bottom:calc(var(--u) * .4)}
  .studio.st-tabbed .st-fdr-photo .person-c{margin-top:calc(var(--u) * .45)}
}
@media (max-width:620px) and (max-height:700px){   /* v179: short phones (iPhone SE/8 class): a tighter stack, clear of the reviews band */
  .studio.st-tabbed .st-top{padding-top:5vh}
  .studio.st-tabbed .st-fdr-photo{row-gap:calc(var(--u) * .7)}
  .studio.st-tabbed .st-panels .st-panel{margin-bottom:16px}   /* outranks the -p1 of the band rule below */
}
/* centred Studio text wraps in balanced lines: no single word left alone on the last line (2 Nov 2026) */
.studio.st-tabbed .st-p,.studio.st-tabbed .st-fdr-q p,.studio.st-tabbed .ofc p{text-wrap:balance}
/* short laptops (1366x768 and the like): the three Studio tabs share one slot as tall as the Founder tab,
   so the founder stack tightens a little there and the page stays one screen (2 Nov 2026) */
@media (min-width:901px) and (max-height:820px){
  .studio.st-tabbed .st-fdr-photo{row-gap:calc(var(--u) * .6)}
  .studio.st-tabbed .st-fdr-img{margin-bottom:calc(var(--u) * .3)}
  .studio.st-tabbed .st-fdr-photo .person-c{margin-top:calc(var(--u) * .6)}
}

/* ==========================================================================
   Legal pages (terms.html, privacy.html; 2 Nov 2026): the live site's wording,
   set as a calm reading column on the Studio page's golden unit. The two
   documents share a centred tab bar 10vh under the header; the text is
   start-aligned on a 40em measure. The Arabic pages carry the English text
   (lang="en", left to right) under an Arabic title.
   ========================================================================== */
.legal{--u:clamp(15px,1.05vw,17px);--p1:calc(var(--u) * 1.618);--p2:calc(var(--u) * 2.618);--p3:calc(var(--u) * 4.236);
  padding:10vh 0 var(--p3)}
.lg-wrap{display:grid;justify-items:center}
.lg-tabs{justify-content:center;gap:clamp(20px,2.4vw,32px);margin:0 0 var(--p3)}
.lg-tabs .tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.lg-head,.lg-doc{width:100%;max-width:calc(var(--u) * 40);box-sizing:border-box}   /* one measure for title and text, so both share one left edge */
.lg-head{margin-bottom:var(--p2)}
.lg-h{margin:0;font-family:var(--display);font-weight:200;font-size:calc(var(--u) * 2.618);line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
html.ar .lg-h{font-family:var(--title);font-weight:300;letter-spacing:0;line-height:1.3}
.lg-date{margin:var(--u) 0 0;font-size:calc(var(--u) * .8);letter-spacing:.04em;color:var(--muted)}
.lg-note{margin:var(--u) 0 0;font-size:calc(var(--u) * .9);color:var(--muted)}
.lg-doc{font-family:var(--body);font-size:var(--u);line-height:1.7;color:var(--ink-2)}
.lg-doc[lang="en"]{direction:ltr;text-align:left}
.lg-doc .lg-date{margin:0 0 var(--p1)}
.lg-doc p{margin:0 0 var(--u)}
.lg-sec{scroll-margin-top:var(--p2)}
.lg-doc h2{margin:var(--p2) 0 var(--u);font-family:var(--body);font-weight:600;font-size:1.06em;line-height:1.4;letter-spacing:-.005em;color:var(--ink)}
.lg-doc h3{margin:var(--p1) 0 calc(var(--u) * .5);font-family:var(--body);font-weight:600;font-size:.94em;line-height:1.4;color:var(--ink)}
.lg-doc ul{margin:0 0 var(--u);padding:0;list-style:none}
.lg-doc li{position:relative;margin:0 0 .35em;padding-inline-start:1.4em}
.lg-doc li::before{content:"";position:absolute;inset-inline-start:.15em;top:.85em;width:.6em;border-top:1px solid currentColor}
.lg-doc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s ease}
.lg-doc a:hover,.lg-doc a:focus-visible{border-bottom-color:var(--ink)}
.lg-doc strong{font-weight:600;color:var(--ink)}
.lg-defs{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:.55em var(--p1);margin:0 0 var(--u)}
.lg-defs dt{font-weight:600;color:var(--ink)}
.lg-defs dd{margin:0}
@media (max-width:620px){
  .legal{padding-top:7vh}
  .lg-defs{grid-template-columns:minmax(0,1fr);gap:0}
  .lg-defs dd{margin-bottom:.7em}
}
/* short phones (360x740): the reviews band breathes a little less, so Studio stays one screen with the three-row footer */
@media (max-width:620px) and (max-height:760px){.studio.st-simple .v-head{padding-top:calc(var(--u) * .6);margin-bottom:calc(var(--u) * .6)}.studio.st-simple .voices{padding-bottom:calc(var(--u) * .6)}}
/* ==========================================================================
   Footer with the copyright (2 Nov 2026): left the legal line (© 2026 JoCanvas™.
   All Rights Reserved. · Privacy · Terms), centre the social icons, right the
   place and the e-mail. Each side wraps within itself when the bar is narrow.
   Phones stack three centred rows: icons; place · e-mail; the legal line last.
   ========================================================================== */
.mb-legal{justify-self:start;display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 18px}   /* text runs share one baseline */
.mb-end{justify-self:end;display:inline-flex;align-items:baseline;flex-wrap:wrap;justify-content:flex-end;gap:2px 18px}
.mb-copy{white-space:nowrap;text-transform:none;letter-spacing:.03em}   /* the notice keeps the mark's own casing: JoCanvas™ */
html.ar .mb-copy{letter-spacing:0}                                         /* Arabic is never letter-spaced */
.mb-docs{display:inline-flex;align-items:baseline;gap:2px 18px;white-space:nowrap}   /* Privacy and Terms move together */
@media (max-width:620px){
  .mb-legal,.mb-end{flex-basis:100%;justify-content:center;gap:2px 14px}
  .mb-legal{order:1}                                   /* the small print closes the bar */
  .mb-docs{gap:2px 14px}
  html.ar .minbar{font-size:11.5px}                    /* Arabic steps down with the English (11 to 10.5px) */
  html.ar .minbar .mb-mail{font-size:10.5px}           /* the e-mail is Latin: the same size as on the English page */
  body.home-min{--mb-h:89px}html.ar body.home-min{--mb-h:93px}   /* the home hero keeps its controls clear of the three rows (site.js then sets the exact height) */
}
@media (min-width:621px) and (max-width:999px){body.home-min{--mb-h:62px}html.ar body.home-min{--mb-h:66px}}   /* tablets: each side takes two rows */
@media (max-width:380px){                              /* 360px phones: the legal line still holds one row */
  .mb-legal,.mb-end,.mb-docs{column-gap:10px}
  html.ar .minbar{font-size:11px}
  html.ar .minbar .mb-mail{font-size:10px}
}
@media (max-width:340px){                              /* 320px screens: nothing runs off the side */
  .minbar{letter-spacing:.06em}
  .lang,.menu-btn{min-width:0;padding-inline:10px}
  body.home-min{--mb-h:104px}html.ar body.home-min{--mb-h:107px}
}
/* ==========================================================================
   Solutions with white space (2 Nov 2026, v108, client's request): white space around
   the four at every size, the most on big screens. Column widths and seams are set in
   the "one canvas" block below (v109); this block keeps:
   - tablets: two by two, column = (screen - margins) / 2.6, max 300px;
   - the type scaled with the column, so every service stays on one line;
   - the group on the golden section of the free height (1 : 1.618, as on Studio).
   ========================================================================== */
.svc{grid-template-rows:minmax(0,1fr) auto minmax(0,1.618fr)}
.svc > .container{grid-row:2}
@media (min-width:621px) and (max-width:900px){   /* tablets: two by two, the same proportions */
  .svc-grid{--cw:min(calc((100vw - 2 * var(--gutter)) / 2.6), 300px)}
}
@media (min-width:621px){
  .svc-t{font-size:clamp(14.5px, calc(var(--cw) * .072), 22px)}
  .svc-list{font-size:clamp(13px, calc(var(--cw) / 16), 19px)}
  html.ar .svc-t{font-size:clamp(15.5px, calc(var(--cw) * .078), 23px)}
  html.ar .svc-list{font-size:clamp(13px, calc(var(--cw) / 14.8), 19.5px)}
}
/* ==========================================================================
   Solutions as one canvas (2 Nov 2026, v109, client's request): the four images close up
   to a thin seam (φ⁻⁸ of a tile: about 6px on a 1920 screen), so they read as one canvas
   in four panels; the white space stays around the canvas, which spans 1/φ (61.8%) of
   the screen width on desktop. Only the canvas's outer corners are rounded. The lists are
   centred under their titles, so neighbouring lists stay apart now that the columns meet.
   Desktop column: 15.18vw (four columns + three seams = 61.8% of the screen), 212 to 400px
   (the minimum was 200px until the dots of v112),
   never more than the container allows, and on short screens never more than one screen
   holds (50svh - 125px; Arabic 50svh - 140px for its taller lines, measured with a margin).
   ========================================================================== */
@media (min-width:901px){
  .svc-grid{--cw:min(clamp(212px, 15.18vw, 400px), calc((100vw - 2 * var(--gutter)) / 4.064), calc(50svh - 125px));
    --gap:calc(var(--cw) * .0213)}
  html.ar .svc-grid{--cw:min(clamp(212px, 15.18vw, 400px), calc((100vw - 2 * var(--gutter)) / 4.064), calc(50svh - 140px))}
}
@media (min-width:621px) and (max-width:900px){.svc-grid{--gap:calc(var(--cw) * .0213)}}
@media (max-width:620px){.svc-grid{--gap:4px}}
.svc-list{text-align:center}
/* panels: square inner corners, rounded outer corners (logical corners, so Arabic mirrors) */
.svc-img{border-radius:0}
@media (min-width:901px){
  .svc-col:first-child .svc-img{border-start-start-radius:6.2%;border-end-start-radius:6.2%}
  .svc-col:last-child .svc-img{border-start-end-radius:6.2%;border-end-end-radius:6.2%}
}
@media (max-width:900px){
  .svc-col:nth-child(odd) .svc-img{border-start-start-radius:6.2%;border-end-start-radius:6.2%}
  .svc-col:nth-child(even) .svc-img{border-start-end-radius:6.2%;border-end-end-radius:6.2%}
}
@media (max-width:340px){   /* 320px phones: the titles keep a short rule on both sides */
  .svc-t{font-size:13px;gap:5px}
  html.ar .svc-t{font-size:14px}
  .svc-t::before,.svc-t::after{min-width:6px}
}
/* ==========================================================================
   Flags beside the two cities on the Studio Offices tab (2 Nov 2026, v110, client's
   request; the footers keep the plain "Amman · Ras Al Khaimah"): Jordan's by Amman, the
   UAE's by Ras Al Khaimah. Drawn as SVG (emoji flags don't show on Windows) in their true
   1:2 proportions and official colours, standing on the text baseline at about the height
   of the capitals; never mirrored in Arabic.
   ========================================================================== */
.city{white-space:nowrap}
.flag{display:inline-block;width:1.3em;height:.65em;vertical-align:baseline;margin-inline-end:.45em;
  border-radius:1px;box-shadow:0 0 0 .5px rgba(10,10,10,.24)}   /* hairline edge, so the white stripes hold on the ivory page */
/* ==========================================================================
   Studio Story: the pencil line (2 Nov 2026, v111-v112, client's request). The home
   hero's pencil photo, cut to transparency (make_studio_pencil.py), draws the line
   under "One line.". The hand and the pencil tip show at every width: the line is
   never cut; the whole drawing scales, so the tip moves with the screen.
   - The picture's end sits on the right screen edge (in Arabic too since v171: the same picture, not mirrored) and
     its width is 0.505 x (screen + text width), which puts the line's start exactly
     under the text's first letter at every size; translateY(-32.93%) sets the middle
     of the line's band (y 303 of 920; it waves between 280 and 327) on its mark.
   - 901px up: the hand stands clear of the text (balanced lines), so the line sits in
     the gap between title and text, which grows from φ to φ² units.
   - 900px and under (v113): the text keeps the same even spacing under the line, so the
     hand moves out of the text's way: the tip stops just past the text's end, the hand
     shows in the side margin on tablets and stays off screen on phones, where only the
     pencil shows.
   Decorative: it takes no room of its own and catches no clicks.
   ========================================================================== */
.studio .st-h{position:relative}
.studio.st-tabbed .st-h,html.ar .studio.st-tabbed .st-h{max-width:none}   /* the title spans the text column, so it centres on the page in Arabic too (it sat 94px right of centre) */
/* the frame: ends at the screen edge, its height set through padding (a share of the text column's width), and crops the photo */
.st-pencil{position:absolute;display:block;height:0;overflow:hidden;transform:translateY(-32.93%);pointer-events:none;user-select:none}
.st-pencil img{position:absolute;top:0;inset-inline-start:0;height:100%;width:auto;max-width:none}
html.ar .st-pencil img{inset-inline-start:auto;left:0;right:auto}   /* v171: not mirrored */
.studio.st-tabbed .st-h{margin-bottom:var(--p2)}   /* title, line and text evenly spaced at every width */
@media (min-width:901px){
  .st-pencil{top:calc(100% + var(--p2) / 2);inset-inline-end:calc((100% - 100vw) / 2);
    width:calc((100vw + 100%) * .505);padding-bottom:calc((100vw + 100%) * .22553)}
  html.ar .st-pencil{inset-inline-end:auto;right:calc((100% - 100vw) / 2);left:auto}   /* v171: the same picture, not mirrored */
}
@media (max-width:900px){
  /* the tip stops just past the text's end (16px; at least 24px in from the screen edge) and the
     drawing scales to run from the text's first letter to it (line start x 20, tip x 1575 of 2060) */
  .st-pencil{--tip:max(24px, (100vw - 100%) / 2 - 16px);--run:calc((100vw + 100%) / 2 - var(--tip));
    top:calc(100% + var(--p2) / 2);inset-inline-start:calc(var(--run) * -.012862);
    width:calc(var(--run) * 1.012862 + var(--tip));padding-bottom:calc(var(--run) * .59164)}
  html.ar .st-pencil{inset-inline-start:auto;left:calc(var(--run) * -.012862);right:auto}   /* v171 */
}
@media (max-width:620px){
  /* phones: the hand stays off screen. Only the pencil shows: its band (y 262-318) from the tip
     (x 1555) to where the fingers begin (x 1680), which lands on the screen edge; the fingers,
     the thumb and their shadow are masked */
  .st-pencil{--tip:calc((100vw + 100%) / 2 * .06325)}
  .st-pencil img{clip-path:polygon(0 0,75.49% 0,75.49% 28.48%,81.55% 28.48%,81.55% 34.57%,75.49% 34.57%,75.49% 100%,0 100%)}
}
/* ==========================================================================
   Solutions: a dot before each service (2 Nov 2026, v112, client's request). Each list is
   a centred block whose items align on their dots (a dot on each centred line would
   scatter the dots). The dot is a small circle, .2em, on the middle of the lowercase,
   .5em before the word; a wrapped line hangs under the word. The type steps down a little
   (column / 16.6; Arabic / 15.4) and the desktop column minimum rises to 212px, so every
   service still fits one line with its dot.
   ========================================================================== */
.svc-list{width:fit-content;max-width:100%;margin-inline:auto;text-align:start}
.svc-list li{position:relative;padding-inline-start:.7em}
.svc-list li::before{content:"";position:absolute;inset-inline-start:0;top:.86em;width:.2em;height:.2em;border-radius:50%;
  background:currentColor;opacity:.7}
html.ar .svc-list li::before{top:.88em}
@media (min-width:621px){
  .svc-list{font-size:clamp(12.5px, calc(var(--cw) / 16.6), 19px)}   /* 12.5px only in short laptop windows, where the column is height-capped */
  html.ar .svc-list{font-size:clamp(13px, calc(var(--cw) / 15.4), 19.5px)}
}
@media (max-width:620px){
  .svc-list li::before{top:.76em}
  html.ar .svc-list li::before{top:.8em}
}
/* ==========================================================================
   Studio tabs centred (2 Nov 2026, v114 Offices, v115 all three; client's request):
   each tab's content sits in the middle of the room between the tab bar and the top
   edge of the grey "In their words" band. The area under the tabs is one grid cell
   that grows to the tallest tab (never shorter, so nothing can ride up into the tabs);
   every panel centres in it, and its negative bottom margin, equal to the area's bottom
   padding (φ² units; φ on phones), centres it on the band's edge itself. The band sits
   above the Story drawing, so the faint end of the hand's shadow never shows on it.
   ========================================================================== */
.studio.st-tabbed .st-top{grid-template-rows:auto 1fr}
.studio.st-tabbed .st-panels{grid-row:2;grid-template-rows:1fr}
.studio.st-tabbed .st-panel{grid-area:1/1;align-self:center;margin-bottom:calc(-1 * var(--p2))}
@media (max-width:620px){.studio.st-tabbed .st-panel{margin-bottom:calc(-1 * var(--p1))}}
.studio.st-tabbed .voices{position:relative;z-index:1}
/* Work tabs centred (2 Nov 2026, v116, client's request), like the Studio and legal tabs. Auto margins
   rather than justify-content:center: if the row is ever wider than the screen it starts at the edge
   instead of losing its first tab off screen. */
.sites .tabs > :first-child{margin-inline-start:auto}
.sites .tabs > :last-child{margin-inline-end:auto}
/* Solutions: the services sit closer together (2 Nov 2026, v117, client's request). The white gap
   between two service lines is half what it was: the line pitch goes from 1.82 to 1.38em in English
   (gap = pitch - 0.94em of capital and descender), 1.92 to 1.46em in Arabic, and on phones 1.64 to
   1.3em and 1.74 to 1.38em. The dots stay on the middle of the lowercase. */
.svc-list{line-height:1.38}
.svc-list li{padding-block:0}
.svc-list li::before{top:.64em}
html.ar .svc-list{line-height:1.46}
html.ar .svc-list li::before{top:.65em}
@media (max-width:620px){
  .svc-list{line-height:1.3}
  .svc-list li{padding-block:0}
  .svc-list li::before{top:.59em}
  html.ar .svc-list{line-height:1.38}
  html.ar .svc-list li::before{top:.62em}
}
/* ==========================================================================
   v118 (2 Nov 2026) Privacy Policy, compact (client's request)
   The template's wording and order, set as fine print: 12px Inter on 1.3
   leading, half-line paragraph gaps, headings at text size set apart by
   weight and one blank line. The measure follows the type, 40em of the text
   size as on Terms, so a line still holds about 80 characters (tight leading
   on a long line makes the next line hard to find); the title shares that
   column and its left edge. Tabs and title size are unchanged.
   ========================================================================== */
.legal.lg-compact{--fine:12px}
.lg-compact .lg-head,.lg-compact .lg-doc{max-width:calc(var(--fine) * 40)}
.lg-compact .lg-doc{font-size:var(--fine);line-height:1.3}
.lg-compact .lg-doc p{margin:0 0 .5em}
.lg-compact .lg-doc h2{margin:1.3em 0 .2em;font-size:1em;line-height:1.3;letter-spacing:0}
.lg-compact .lg-sec:first-child h2{margin-top:0}
.lg-compact .lg-doc ul{margin:0 0 .5em}
.lg-compact .lg-doc li{margin:0;padding-inline-start:1.1em}
.lg-compact .lg-doc li::before{inset-inline-start:.1em;top:.7em;width:.5em}
.lg-compact .lg-doc .lg-updated{margin:1.3em 0 0;color:var(--muted)}
.lg-doc .lg-nb{white-space:nowrap}                                           /* keeps "JoCanvas FZ-LLC" on one line */
/* v119 (2 Nov 2026) Terms of Use replaced and set compact like the Privacy Policy (client's request), so the two
   tabs now share one column, one type and one title position. Its one footnote sits under a short rule after the
   date, as in the template; the markers link both ways and carry no underline. */
.lg-doc a.lg-fnref,.lg-doc a.lg-fnback{border-bottom:0;color:var(--ink)}
.lg-compact .lg-doc .lg-notes{position:relative;margin:1.3em 0 0;padding-top:.65em}
.lg-compact .lg-doc .lg-notes::before{content:"";position:absolute;top:0;inset-inline-start:0;width:6em;border-top:1px solid var(--line)}
.lg-compact .lg-doc .lg-notes p{margin:0}
.lg-notes p,.lg-fnref{scroll-margin-top:var(--p2)}
/* ==========================================================================
   v123–v124 (2 Nov 2026) Website form in a screen (client's request)
   "Start your website today" opens the Work tile's blank screen, now holding
   four answers. The screen is constant: 16:10 at every size, like the tiles.
   What adapts is the content: every size inside the screen is set in cqw of
   the monitor (with floors for legibility), so text and fields scale with the
   screen instead of the screen growing to fit them. On phones the screen is
   too small for all four at once, so site.js shows one answer at a time
   (Apple's setup-assistant pattern): name, phone, email, content.
   v124: Apple-style fields: shorter, rounded, white with a hairline, the label
   as placeholder; a country code (Jordan, UAE, Saudi Arabia) beside the phone;
   the content question as a segmented control; a pill button.
   ========================================================================== */
body.wf-min{grid-template-columns:minmax(0,1fr)}                          /* v127: header, the screen, the site's minimal footer */
.wf{display:grid;align-content:center;padding:clamp(16px,3vh,40px) 0}
.wf [hidden]{display:none !important}
.wf-wrap{width:100%;box-sizing:border-box;display:grid;justify-items:center;gap:clamp(16px,2.6vh,26px)}   /* full width inside the centring grid (its auto margins would shrink it) */
.wf-mac{width:min(100%, max(560px, min(920px, calc((100svh - 260px) * 1.37))))}   /* header + footer around it (v129: no line under the stand) */
.wf-screen{overflow:visible;background:linear-gradient(180deg,#FFFFFF 0%,#F7F7F8 100%)}
.wf-screen::after{display:none}
.wf-screen .mac-bar{flex:0 0 auto;height:clamp(14px,4cqw,38px);border-radius:.45cqw .45cqw 0 0}
.wf-screen .mac-url{font-size:clamp(7px,1.3cqw,13px)}
.wf-page{--u:1cqw;flex:1;min-height:0;display:grid;align-content:center;justify-items:center;text-align:center;
  padding:clamp(10px,calc(3.6 * var(--u)),34px) clamp(12px,calc(6 * var(--u)),56px)}
.wf-head{display:grid;justify-items:center}
.wf-h{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(15px,calc(3.7 * var(--u)),34px);line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
html.ar .wf-h{letter-spacing:0;line-height:1.35}
.wf-lede{margin:.5em 0 0;font-size:clamp(10.5px,calc(1.65 * var(--u)),15px);line-height:1.4;color:var(--ink-2)}
.wf-err{margin:clamp(8px,calc(1.6 * var(--u)),14px) 0 0;padding:.75em 1em;width:100%;box-sizing:border-box;text-align:start;
  font-size:clamp(10.5px,calc(1.4 * var(--u)),13.5px);line-height:1.4;border-width:1px;border-radius:clamp(7px,calc(1.1 * var(--u)),10px)}
.wf-form{width:100%;display:grid;gap:0;margin-top:clamp(12px,calc(3 * var(--u)),28px);text-align:start}
.wf-fields{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,1fr);gap:clamp(8px,calc(1.6 * var(--u)),15px)}   /* the phone column carries the code */
.wf-step{min-width:0}
.wf-label{display:block;margin:0 0 clamp(3px,calc(.6 * var(--u)),6px);font-weight:600;font-size:clamp(10px,calc(1.35 * var(--u)),12.5px);line-height:1.3;color:var(--ink)}   /* v126: labels show; placeholders are examples */
/* fields */
.wf-form .wf-in,.wf-code{box-sizing:border-box;height:clamp(30px,calc(4.6 * var(--u)),42px);border:1px solid #D2D2D7;border-radius:clamp(7px,calc(1.1 * var(--u)),10px);
  background:#FFFFFF;font-family:var(--body);font-size:clamp(12px,calc(1.65 * var(--u)),15px);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.wf-form .wf-in{display:block;width:100%;padding:0 clamp(9px,calc(1.4 * var(--u)),13px);line-height:normal}
.wf-form .wf-in::placeholder{color:#737373;opacity:1}
.wf-form .wf-in:focus,.wf-code:focus-within{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(10,10,10,.10)}
.wf-tel{display:flex;gap:clamp(5px,calc(.8 * var(--u)),8px);direction:ltr}
.wf-tel .wf-in{flex:1;min-width:0}
.wf-code{position:relative;flex:none;display:flex;align-items:center;padding:0 clamp(8px,calc(1.2 * var(--u)),11px)}
.wf-code-pick{position:relative;display:flex;align-items:center;align-self:stretch}
.wf-code select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;color:inherit;height:100%;padding:0;cursor:pointer;outline:0}
.wf-code-v{display:none}
.wf-code.is-chip select{position:absolute;inset:0;width:100%;opacity:0;font-size:16px}    /* site.js: the native picker, under a compact chip */
.wf-code.is-chip .wf-code-v{display:inline-flex;align-items:center;gap:.45em;font-variant-numeric:tabular-nums;pointer-events:none}
.wf-flag{display:block;height:clamp(10px,calc(1.45 * var(--u)),14px);width:auto;border-radius:2px;box-shadow:0 0 0 .5px rgba(0,0,0,.2)}
.wf-code.is-other .wf-flag{box-shadow:none}
.wf-code.is-other .wf-code-t{display:none}
.wf-cc{display:none;align-items:center;align-self:center;height:62%;margin-inline-start:.55em;padding-inline-start:.55em;border-inline-start:1px solid #E3E3E6}
.wf-code.is-other .wf-cc{display:flex}
.wf-cc-plus{margin-inline-end:.08em}
.wf-cc input{width:2.5em;min-width:0;border:0;background:transparent;padding:0;font:inherit;color:var(--ink);outline:0;font-variant-numeric:tabular-nums}
.wf-cc input::placeholder{color:#737373;opacity:1}
.wf-code-v::after{content:"";width:.42em;height:.42em;margin-top:-.25em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.55}
/* the content question: a segmented control */
.wf-q{border:0;margin:clamp(12px,calc(2.6 * var(--u)),24px) 0 0;padding:0;min-width:0;display:grid;justify-items:center;gap:clamp(5px,calc(.9 * var(--u)),8px);text-align:center}
.wf-q legend{margin:0 auto clamp(5px,calc(.9 * var(--u)),8px);padding:0;font-weight:600;font-size:clamp(10.5px,calc(1.5 * var(--u)),13.5px);line-height:1.35;color:var(--ink)}
.wf-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:2px;border-radius:clamp(8px,calc(1.1 * var(--u)),10px);background:#EBEBED}
.wf-seg label{position:relative;display:block}
.wf-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.wf-seg span{display:flex;align-items:center;justify-content:center;height:clamp(24px,calc(3.8 * var(--u)),35px);padding:0 clamp(8px,calc(1.6 * var(--u)),15px);
  border-radius:clamp(6px,calc(.9 * var(--u)),8px);font-size:clamp(10.5px,calc(1.5 * var(--u)),13.5px);font-weight:500;color:var(--ink-2);white-space:nowrap;
  transition:background-color .15s,color .15s,box-shadow .15s}
.wf-seg label:hover input:not(:checked) + span{color:var(--ink)}
.wf-seg input:checked + span{background:#FFFFFF;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.06)}
.wf-seg input:focus-visible + span{outline:2px solid var(--ink);outline-offset:1px}
.wf-note{margin:0;font-size:clamp(9.5px,calc(1.3 * var(--u)),12px);color:#737373}
/* the button row */
.wf-foot{display:flex;align-items:center;justify-content:center;margin-top:clamp(12px,calc(2.6 * var(--u)),24px)}
.wf-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:clamp(28px,calc(4.4 * var(--u)),40px);padding:0 clamp(14px,calc(2.4 * var(--u)),22px);
  border:0;border-radius:999px;background:var(--ink);color:#FBFBF9;font-family:var(--body);font-weight:500;font-size:clamp(11.5px,calc(1.65 * var(--u)),15px);
  white-space:nowrap;cursor:pointer;transition:background-color .15s}
html.ar .wf-btn{font-family:var(--ar);font-weight:600}
.wf-btn:hover{background:#333336}
.wf-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wf-btn:hover .arr{transform:translateX(3px)}
html.ar .wf-btn:hover .arr{transform:scaleX(-1) translateX(3px)}
.wf-back,.wf-next,.wf-count{display:none}
.wf-back{border:0;background:none;padding:6px 2px;font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer}
.wf-back:hover{color:var(--ink)}
.wf-count{font-size:12px;color:#737373;font-variant-numeric:tabular-nums}
/* touch screens in the wide layout (iPad, a phone on its side): 16px in the fields, so the browser does not zoom into them */
@media (pointer:coarse){.wf-form .wf-in,.wf-code{font-size:16px;height:max(34px, min(calc(4.6 * var(--u)), 42px))}}
/* short laptop windows: a little less air around the monitor */
@media (min-width:901px) and (max-height:760px){.wf{padding-block:clamp(8px,1.8vh,16px)}}
/* phones: one answer at a time (site.js adds .is-stepped; an inline line does it before first paint) */
.wf-page.is-stepped{padding:clamp(8px,calc(3.4 * var(--u)),20px) clamp(12px,calc(5 * var(--u)),28px)}
.wf-page.is-stepped:not(.on-first) .wf-head{display:none}
.wf-page.is-stepped .wf-h{font-size:clamp(14px,calc(4.6 * var(--u)),20px)}
.wf-page.is-stepped .wf-lede{font-size:clamp(11px,calc(3.4 * var(--u)),13px)}
.wf-page.is-stepped .wf-form{margin-top:clamp(8px,calc(3 * var(--u)),16px)}
.wf-page.is-stepped .wf-fields{display:block}
.wf-page.is-stepped .wf-step{display:none}
.wf-page.is-stepped .wf-step.is-current{display:block}
.wf-page.is-stepped .wf-label{margin:0 0 clamp(5px,calc(1.8 * var(--u)),8px);text-align:center;font-size:clamp(12px,calc(3.8 * var(--u)),14px)}
.wf-page.is-stepped .wf-form .wf-in,.wf-page.is-stepped .wf-code{height:clamp(34px,calc(11 * var(--u)),42px);font-size:16px;border-radius:9px}   /* 16px: phones do not zoom into the field */
.wf-page.is-stepped .wf-flag{height:clamp(12px,calc(4 * var(--u)),15px)}
.wf-page.is-stepped .wf-code{padding-inline:clamp(6px,calc(2 * var(--u)),10px)}   /* a tighter chip, so the number keeps its example on the smallest canvas */
.wf-page.is-stepped .wf-code-v{gap:.32em}
.wf-page.is-stepped .wf-q{margin-top:0}
.wf-page.is-stepped .wf-q legend{font-size:clamp(12px,calc(3.8 * var(--u)),14px)}
.wf-page.is-stepped .wf-seg{grid-auto-columns:auto}
.wf-page.is-stepped .wf-seg span{height:clamp(28px,calc(9.4 * var(--u)),34px);padding:0 clamp(7px,calc(2.6 * var(--u)),12px);font-size:clamp(11.5px,calc(3.7 * var(--u)),13.5px)}
.wf-page.is-stepped .wf-note{font-size:clamp(10px,calc(3.2 * var(--u)),12px)}
.wf-page.is-stepped .wf-foot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:clamp(10px,calc(3.4 * var(--u)),16px)}
.wf-page.is-stepped .wf-back{display:block;grid-column:1;justify-self:start}
.wf-page.is-stepped .wf-count{display:block;grid-column:2;justify-self:center}
.wf-page.is-stepped .wf-next,.wf-page.is-stepped .wf-submit{grid-column:3;justify-self:end;height:clamp(30px,calc(10 * var(--u)),38px);padding:0 clamp(12px,calc(4.4 * var(--u)),18px);font-size:clamp(13px,calc(4 * var(--u)),15px)}
.wf-page.is-stepped .wf-next{display:inline-flex}
.wf-page.is-stepped .wf-submit{display:none}
.wf-page.is-stepped.on-first .wf-back{visibility:hidden}
.wf-page.is-stepped.on-last .wf-next{display:none}
.wf-page.is-stepped.on-last .wf-submit{display:inline-flex}
.wf-page.is-stepped .wf-err{font-size:11px;padding:.5em .8em}
@media (max-width:620px){
  .wf-page:not(.is-stepped) .wf-fields{grid-template-columns:minmax(0,1fr)}   /* without script: all four, stacked, and the screen grows */
}
@media (max-width:340px){.wf-page.is-stepped .wf-note{display:none}}
/* ==========================================================================
   v130 (2 Nov 2026) The canvas form (Identity) and the frame form (Architecture /
   Interior), twins of the screen: the Logo tab's blank linen canvas and the Space
   tab's empty framed print, each opened up with the same four answers. Constant
   shape (1:1 and 4:3); the content scales with the object (--u); phones step.
   ========================================================================== */
.wf-obj{flex:none}
/* the canvas: the linen photo, the form on its face (face measured on the 916px image: x 90–832, y 78–842) */
.wf-canvas{position:relative;width:min(100%, max(470px, min(760px, calc(100svh - 230px))));aspect-ratio:1/1;container-type:inline-size}
.wf-cv-img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.wf-face{position:absolute;inset:9.5% 10% 9% 10.5%;display:flex;flex-direction:column}
.wf-canvas .wf-page{--u:1.25cqw;padding:clamp(6px,calc(2 * var(--u)),20px) clamp(8px,calc(3.4 * var(--u)),30px)}
.wf-canvas .wf-fields{grid-template-columns:minmax(0,1fr)}               /* one column on the square */
.wf-canvas .wf-page.is-stepped{padding-inline:clamp(6px,calc(2.2 * var(--u)),20px)}
.wf-canvas .wf-page.is-stepped .wf-form .wf-in{padding-inline:8px}
.wf-canvas .wf-page.is-stepped .wf-seg{grid-auto-flow:row;width:100%;box-sizing:border-box}   /* phones: the two long answers stack inside the canvas face */   /* the smallest canvas keeps the number's example whole */
.wf-canvas .wf-h{text-shadow:0 1px 0 rgba(255,255,255,.6)}
/* the frame: the Space tab's moulding and mat, a white print in the window */
.wf-frame{width:min(100%, max(560px, min(920px, calc((100svh - 230px) * 1.3))));container-type:inline-size}
.wf-mat{display:flex;width:100%;height:100%;box-sizing:border-box;padding:5%;background:#FDFDFB;      /* the tiles' mat (.frame-mat), narrower (5%) so the three fields fit the smallest frame */
  box-shadow:inset 0 1px 3px rgba(10,10,10,.30),inset 0 0 0 1px rgba(10,10,10,.05)}
.wf-print{flex:1;min-width:0;display:flex;flex-direction:column;background:#FFFFFF;box-shadow:0 0 0 1px rgba(10,10,10,.08)}
.wf-frame .wf-page{padding:clamp(8px,calc(2.6 * var(--u)),26px) clamp(10px,calc(3 * var(--u)),28px)}
.wf-frame .wf-fields{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,1.1fr)}   /* the print is narrower than the screen: the e-mail's example keeps whole */
.wf-frame .wf-page.is-stepped{padding:clamp(6px,calc(2 * var(--u)),16px) clamp(10px,calc(3.6 * var(--u)),22px)}
/* ==========================================================================
   v131 (2 Nov 2026) Start your project: a chooser of the three forms
   The long general brief is retired (client's request). start.html shows the
   Work tab's three "+" objects (blank screen, blank canvas, empty frame) under
   one line, each opening its four-answer form. One screen with the footer;
   the tallest object (the square canvas) sets how wide the row may grow.
   On phones the three become rows: the object on the start side, the name.
   ========================================================================== */
body.ch-min{grid-template-columns:minmax(0,1fr)}
.chooser{display:grid;align-content:center;padding:clamp(20px,4vh,48px) 0}
.ch-wrap{width:100%;box-sizing:border-box;display:grid;justify-items:center;gap:clamp(22px,4.4vh,48px)}
.ch-head{display:grid;justify-items:center;gap:8px;text-align:center}
.ch-h{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
html.ar .ch-h{letter-spacing:0;line-height:1.35}
.ch-lede{margin:0;font-size:clamp(14px,1.15vw,16px);color:var(--ink-2)}
.ch-grid{width:min(100%, 1060px, calc((100svh - 410px) * 3 + 72px));grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.ch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* three in a row on tablets too */
@media (max-width:620px){
  .ch-grid{width:100%;grid-template-columns:minmax(0,1fr);gap:0}
  .ch-grid .site{grid-template-columns:minmax(0,36%) minmax(0,1fr);grid-template-rows:auto;align-items:center;gap:18px;padding-block:14px;border-top:1px solid var(--line)}
  .ch-grid .site:last-child{border-bottom:1px solid var(--line)}
  .ch-grid .site .mac,.ch-grid .site .cv,.ch-grid .site .frame{align-self:center}
  .ch-grid .site-cap{min-height:0;border-top:0;padding-top:0;flex-direction:row;align-items:center;justify-content:space-between}
  .ch-grid .site-name{font-size:1rem}
  .ch-grid .site-plus{width:38px;height:38px}
}
@media (min-width:621px) and (max-width:900px){.ch-grid .site-cap{min-height:54px;box-sizing:border-box}html.ar .ch-grid .site-cap{min-height:60px}}   /* a name on two lines keeps the three captions level */
@media (max-width:360px){.ch-grid .site{grid-template-columns:minmax(0,30%) minmax(0,1fr);padding-block:11px}}   /* the smallest phones: all three rows and the footer on one screen */
/* v132 (2 Nov 2026) The thank-you page joins the site's minimal footer (client's request): header, the
   message centred in the height, the footer; the last page with the old full footer. */
body.ty-min{grid-template-columns:minmax(0,1fr)}
body.ty-min main{display:grid;align-content:center}
/* v133 (2 Nov 2026) Thank-you page: an inquiry confirmation, not a brief receipt (client's request).
   Centred like the forms: a drawn tick, "Thank you, <first name>." (the first name the form keeps in this
   tab's sessionStorage, site.js), the WhatsApp follow-up, then two "meanwhile" links: the Work tab that
   matches the form, and the client reviews. Pills sized in px (.wf-btn needs the forms' --u). One screen
   with the footer at every size. The old .thanks rules are retired with it. */
.ty{display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box;padding-block:clamp(14px,4vh,72px);text-align:center}
.ty-mark{display:block;width:clamp(40px,6.4vh,56px);height:auto;margin:0 0 clamp(14px,2.8vh,28px);overflow:visible;color:var(--ink)}
.ty-mark circle,.ty-mark path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ty-mark circle{stroke-width:1.25;stroke-dasharray:153;animation:ty-ring .7s cubic-bezier(.65,0,.35,1) both}
.ty-mark path{stroke-width:2;stroke-dasharray:31;animation:ty-tick .4s .55s cubic-bezier(.65,0,.35,1) both}
@keyframes ty-ring{from{stroke-dashoffset:153}to{stroke-dashoffset:0}}
@keyframes ty-tick{from{stroke-dashoffset:31}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ty-mark circle,.ty-mark path{animation:none}}
.ty-h{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(30px,4.6vw,58px);line-height:1.06;letter-spacing:-.03em;color:var(--ink)}
html.ar .ty-h{letter-spacing:0;line-height:1.3;font-size:clamp(28px,4vw,50px)}
.ty-lede{margin:clamp(12px,2.2vh,22px) 0 0;max-width:36em;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--ink-2)}
@media (min-width:600px){.ty-l{display:block}}
.ty-then{margin:clamp(22px,4.6vh,48px) 0 0;font-size:clamp(14px,1.05vw,15.5px);line-height:1.5;color:var(--muted)}
.ty-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin:clamp(12px,2vh,18px) 0 0}
.ty-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:44px;padding:0 22px;box-sizing:border-box;border-radius:999px;
  font-family:var(--body);font-weight:500;font-size:15px;line-height:1;white-space:nowrap;text-decoration:none;transition:background-color .15s,box-shadow .15s}
html.ar .ty-btn{font-family:var(--ar);font-weight:600}
.ty-go{background:var(--ink);color:#FBFBF9}
.ty-go:hover{background:#333336}
.ty-alt{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.ty-alt:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.ty-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ty-btn:hover .arr{transform:translateX(3px)}
html.ar .ty-btn:hover .arr{transform:scaleX(-1) translateX(3px)}
@media (max-width:480px){.ty-ctas{display:grid;grid-template-columns:minmax(0,1fr);width:min(100%,320px)}}
/* short phone screens (320 x 568, or a long first name at 320 x 640): tighter rhythm, same content */
@media (max-width:620px) and (max-height:700px){.ty{padding-block:clamp(8px,2vh,20px)}.ty-mark{width:36px;margin-bottom:12px}.ty-then{margin-top:18px}.ty-ctas{gap:8px}}
/* "What clients say" lands on the Studio reviews heading, clear of the sticky header */
#vH{scroll-margin-top:calc(var(--nav-h) + 12px)}
/* v134 (2 Nov 2026) 404 page (404.html, ar/404.html): the thank-you layout, with the blank canvas above
   "This canvas is blank." The image carries its own soft shadow and transparent margin. */
.nf-canvas{display:block;width:clamp(120px,22vh,200px);height:auto;margin:0 0 clamp(4px,1.2vh,12px)}
@media (max-width:620px) and (max-height:700px){.nf-canvas{width:112px}}
/* v168: dark mode (v166) withdrawn at the client's request: the site is paper and ink, in daylight only. */
/* v169 (3 Nov 2026) Contact page (contact.html, ar/contact.html; build_contact.py): the thank-you layout with the two
   studios as cards (moved here from the Studio tabs). Map links, not embeds; both WhatsApp buttons open the UAE
   WhatsApp Business number. */
.ct-offices{display:grid;grid-template-columns:repeat(2,minmax(0,22em));justify-content:center;gap:clamp(16px,2.6vh,28px) clamp(20px,4vw,56px);
  width:100%;margin-top:clamp(26px,5vh,52px);text-align:center}
.ct-ofc{display:grid;justify-items:center;gap:6px;font-size:clamp(14px,1.05vw,16px);line-height:1.55}
.ct-ofc h2{margin:0 0 2px;font-family:var(--display);font-weight:500;font-size:1.3em;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
html.ar .ct-ofc h2{font-family:var(--ar);letter-spacing:0}
.ct-ofc .ct-addr{margin:0;max-width:22em;color:var(--ink-2)}
.ct-ofc .ct-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 16px;margin:0;color:var(--ink-2)}
.ct-ofc .ct-row a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.ct-ofc .ct-row a:hover{border-bottom-color:var(--ink)}
.ct-ofc .ofc-map{margin:0;font-size:.92em}
.ct-ofc .ct-wa{margin-top:10px;font-weight:600;gap:.55em}
.ct-ofc .ct-wa svg{flex:none}
.ct-mail{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 10px;margin:clamp(24px,4.6vh,48px) 0 0;
  font-size:clamp(14px,1.05vw,15.5px);line-height:1.5;color:var(--muted)}
.ct-mail a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.ct-mail a:hover{border-bottom-color:var(--ink)}
.ct .ty-ctas{margin-top:clamp(14px,2.4vh,22px)}
@media (max-width:620px){
  .ct-offices{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:24px}
  .ct-ofc{font-size:14px}
}
@media (max-width:620px) and (max-height:700px){.ct-offices{margin-top:16px;gap:14px}.ct-ofc .ct-wa{margin-top:6px}.ct-mail{margin-top:16px}}
/* v169: one client line under the gallery meta (Edelbi, Cygnus Gate, Minimalist Architects): the Studio review excerpt,
   five stars, the reviewer's name. The stars reuse .stars (currentColor mask) in Google's yellow. */
.gx-quote{grid-column:1/-1;margin:2px 0 0;font-size:13px;line-height:1.5;color:#D6D6D6}
.gx-quote .stars{margin-inline-end:8px;color:#FBBC04;vertical-align:-1px}
.gx-quote q{quotes:none;font-style:italic;color:#EDEDED}
.gx-quote b{font-weight:500;color:#A3A3A3;white-space:nowrap}
.gx-quote b::before{content:"— ";color:#6f6f6f}
/* the dialog's width is derived from the height left for the stage; a quoted gallery's info band is ~40px taller */
.gx.gx-quoted{width:min(1100px,calc(100vw - 32px),calc((100svh - 312px) * 1.416))}
@media (max-width:620px){.gx-quote{font-size:12.5px}}

/* v175 (3 Nov 2026) Splash: the wordmark on paper when the site is first entered (home page, once per session; the
   switch is one line in <head>, so later pages never flash). The mark breathes in over .5s, holds, and the sheet
   lifts at 1.1s; site.js removes it when the animation ends. Under reduced motion there is no splash at all. */
.splash{display:none}
html.splash-on .splash{display:flex;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;background:var(--ground);
  animation:splash-sheet 1.7s cubic-bezier(.65,0,.35,1) both;pointer-events:none}
html.splash-on .splash img{width:clamp(150px,20vw,260px);height:auto;animation:splash-mark 1.7s cubic-bezier(.2,.6,.2,1) both}
@keyframes splash-sheet{0%,70%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes splash-mark{0%{opacity:0;transform:translateY(6px) scale(.985)}35%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){html.splash-on .splash{display:none}}

/* v183 (4 Nov 2026) Privacy Policy, Analytics and Cookies: the visitor's switch for the site's counter (added by site.js) */
.lg-ck{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:.9em}
.lg-ck-st{color:var(--muted)}
.lg-ck-btn{padding:5px 12px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font:inherit;font-weight:500;line-height:1.4;transition:border-color .15s}
.lg-ck-btn:hover{border-color:var(--ink)}

/* ==========================================================================
   v184 (4 Nov 2026) Reviews tape: one scroller on every device (site.js), so a mouse can grab and drag it on
   desktops, as a finger swipes it on phones; it still drifts on its own. The ‹ › buttons beside the pause button
   (mouse and trackpad screens) glide it one review at a time; the arrow keys do the same when it has focus.
   Without script the CSS marquee above still runs.
   ========================================================================== */
.vtape.vtape-js{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.vtape.vtape-js::-webkit-scrollbar{display:none}
.vtape.vtape-js .vtape-track{animation:none}
@media (pointer:fine){.vtape.vtape-js{cursor:grab}}
.vtape.vtape-js.is-grab{cursor:grabbing;-webkit-user-select:none;user-select:none}
.tp-nav{margin-inline-start:auto;display:flex;gap:6px;direction:ltr}   /* ‹ on the left, › on the right, in both languages */
html.ar .tp-nav{margin-left:0;margin-right:auto}                     /* its own direction is ltr, so the free space is set on the physical side */
.tp-nav .tp-btn{margin:0}
.tp-nav + .tp-btn{margin-inline-start:-6px}                            /* 10px from the arrows to the pause button */
@media (prefers-reduced-motion:reduce){.tp-nav .tp-btn{display:grid}}  /* the pause button hides (nothing drifts); the arrows stay */
@media (pointer:coarse){.tp-nav{display:none}}

/* ==========================================================================
   v188: the gallery's slide counter ("2 / 6") never breaks: on phones a long caption
   used to squeeze it onto two lines ("2 /" over "6"); the caption wraps instead
   ========================================================================== */
.gx-num{white-space:nowrap;flex-shrink:0}