/* Othman Almashaqba — site styles.
   Concept: order from complexity. Threads arrive tangled at the start of the line of reading
   and leave in ordered lanes, the way he fixes a process before he automates it.
   Colours: navy of his suit and banner, steel blue of his shirt and banner light,
   walnut of the panelling and painting behind him in his portrait, on a cool drafting-paper ground.
   Type: Noto Kufi Arabic for Arabic display, IBM Plex Sans Arabic for everything else. */

@font-face{font-family:"Plex";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/plex-ar-300.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-ar-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-ar-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plex-ar-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/plex-la-300.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215}
@font-face{font-family:"Plex";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-la-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215}
@font-face{font-family:"Plex";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-la-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215}
@font-face{font-family:"Plex";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plex-la-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215}
@font-face{font-family:"Kufi";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/kufi-ar.woff2) format("woff2-variations"),url(fonts/kufi-ar.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF}
/* fallbacks sized like the real faces, so nothing reflows when the fonts arrive */
@font-face{font-family:"Plex Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:101%;ascent-override:107%;descent-override:41%;line-gap-override:0%}
@font-face{font-family:"Kufi Fallback";src:local("Tahoma"),local("Arial"),local("DejaVu Sans");size-adjust:104%;ascent-override:123%;descent-override:59%;line-gap-override:0%}

:root{
  --paper:#F3F5F8;        /* cool drafting paper */
  --surface:#FFFFFF;
  --tint:#E8EDF5;
  --ink:#13213E;          /* his suit, his banner */
  --ink-2:#4A5975;        /* secondary text, 6.6:1 on paper */
  --line:#D6DCE6;
  --line-2:#BFC9D8;
  --steel:#3A62C2;        /* his shirt and the light in his banner: strokes and fills */
  --steel-t:#2B4C9B;      /* steel dark enough for text, 7:1 on white */
  --steel-soft:rgba(58,98,194,.11);
  --walnut:#8B5A3C;       /* the panelling behind his portrait */
  --walnut-soft:rgba(139,90,60,.09);
  --btn-bg:#13213E; --btn-fg:#FFFFFF; --btn-bg-h:#0B1630;
  --glass:rgba(255,255,255,.64);
  --glass-strong:rgba(255,255,255,.8);
  --glass-hdr:rgba(243,245,248,.87);
  --glass-solid:#FBFCFE;
  --glass-brd:rgba(255,255,255,.75);
  --glass-edge:rgba(19,33,62,.08);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 58%);
  --shadow-1:0 1px 2px rgba(19,33,62,.06),0 6px 18px -8px rgba(19,33,62,.16);
  --shadow-2:0 2px 6px rgba(19,33,62,.07),0 18px 38px -14px rgba(19,33,62,.26);
  --shadow-3:0 4px 12px rgba(19,33,62,.09),0 34px 70px -22px rgba(19,33,62,.38);
  --th-a:139,90,60; --th-b:58,98,194; --th-alpha:1;   /* the canvas threads read these */
  --r-xs:8px; --r-s:12px; --r-m:16px; --r-l:22px; --r-xl:30px;
  --w:1200px;
  --gut:clamp(16px,4vw,40px);
  --hdr:72px;
  --dock-space:0px;
  --font:"Plex","Plex Fallback",system-ui,"Segoe UI",Tahoma,sans-serif;
  --display:"Kufi","Plex","Kufi Fallback","Plex Fallback",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.32,.5,1);
  --from:-26px;
  --grad-dir:to right;
  color-scheme:light;
  interpolate-size:allow-keywords;
}
html[dir="rtl"]{--from:26px;--grad-dir:to left}
[data-theme="dark"]{
  --paper:#0A1323; --surface:#101C31; --tint:#0D182B;
  --ink:#E8EDF6; --ink-2:#A8B4CA; --line:#22304B; --line-2:#33456A;
  --steel:#7FA1F0; --steel-t:#A2BCF6; --steel-soft:rgba(127,161,240,.14);
  --walnut:#D49F78; --walnut-soft:rgba(212,159,120,.1);
  --btn-bg:#8AAAF2; --btn-fg:#0A1323; --btn-bg-h:#A4BEF6;
  --glass:rgba(17,30,53,.58); --glass-strong:rgba(17,30,53,.8); --glass-hdr:rgba(10,19,35,.84); --glass-solid:#14233F;
  --glass-brd:rgba(255,255,255,.09); --glass-edge:rgba(255,255,255,.06);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 50%);
  --shadow-1:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.45),0 8px 22px -10px rgba(0,0,0,.6);
  --shadow-2:inset 0 1px 0 rgba(255,255,255,.05),0 3px 8px rgba(0,0,0,.45),0 20px 42px -14px rgba(0,0,0,.7);
  --shadow-3:inset 0 1px 0 rgba(255,255,255,.06),0 6px 14px rgba(0,0,0,.5),0 36px 74px -22px rgba(0,0,0,.8);
  --th-a:214,163,124; --th-b:132,166,244;
  color-scheme:dark;
}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.34s;animation-timing-function:var(--ease)}
::view-transition-group(page-title){animation-duration:.5s;animation-timing-function:var(--ease-out)}
.top{view-transition-name:top}
.dock{view-transition-name:dock}
.page-title{view-transition-name:page-title}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 18px);background:var(--paper)}
html[lang="ar"] [data-l="en"],html[lang="en"] [data-l="ar"]{display:none!important}
html.menu-open{overflow:hidden}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.85;font-weight:400;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;
  transition:background-color .4s,color .4s}
html[lang="en"] body{font-size:16.5px;line-height:1.62}
img,svg,canvas{display:block;max-width:100%}
p{margin:0 0 1em}
a,button{color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a,a:hover,a:focus,a:visited,a:active,button,button:hover,button:focus{text-decoration:none}
button{font:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1.5;color:var(--ink);text-wrap:balance}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{font-family:var(--font);line-height:1.18;letter-spacing:-.018em}
.h1{font-size:clamp(30px,2.3vw + 18px,54px)}
.h2{font-size:clamp(23px,1.3vw + 16px,37px)}
.h3{font-size:clamp(17.5px,.35vw + 16px,20.5px)}
html[lang="en"] .h1{letter-spacing:-.03em;line-height:1.06}
html[lang="en"] .h2{letter-spacing:-.024em;line-height:1.12}
.lede{font-size:clamp(17px,.35vw + 15.8px,19.5px);color:var(--ink-2);margin:0;max-width:40em}
.body-l{font-size:clamp(16.5px,.3vw + 15.6px,18.5px);color:var(--ink-2);max-width:38em;margin:0}
::selection{background:rgba(58,98,194,.22)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--steel);outline-offset:3px;border-radius:12px}
.skip{position:fixed;inset-inline-start:12px;top:-80px;z-index:100;background:var(--btn-bg);color:var(--btn-fg);padding:12px 18px;border-radius:12px;font-weight:600}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--w) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:20px;height:20px;flex:none}
.ic-s{width:16px;height:16px}
html[dir="ltr"] .vprev svg,html[dir="ltr"] .vnext svg,html[dir="ltr"] .more-ic svg{transform:scaleX(-1)}

/* ---------- glass ---------- */
.glass{background-color:var(--glass);background-image:var(--sheen);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow-2),inset 0 0 0 .5px var(--glass-edge)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass,.top-glass,.dock{background-color:var(--glass-solid)!important}
}

/* ---------- his mark ---------- */
.mark{width:36px;height:36px;flex:none;overflow:visible}
.mark path{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mk-a{stroke:var(--walnut)}
.mk-b{stroke:var(--steel)}
.mk-c{stroke:var(--ink);opacity:.75}
html[dir="ltr"] .mark{transform:scaleX(-1)}

/* ---------- buttons and links ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;
  border:1px solid transparent;font-size:16px;font-weight:500;line-height:1.2;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:transform .22s var(--ease),box-shadow .3s var(--ease),background-color .25s,color .25s,border-color .25s}
html[lang="en"] .btn{font-size:15.5px}
.btn .ic{width:19px;height:19px}
.btn:active{transform:scale(.965)}
.btn-ink{background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--shadow-1)}
.btn-line{background:color-mix(in srgb,var(--surface) 62%,transparent);color:var(--ink);border-color:var(--line-2)}
.btn-paper{background:#F3F5F8;color:#13213E;box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14.5px}
@media (hover:hover){
  .btn-ink:hover{background:var(--btn-bg-h);box-shadow:var(--shadow-2);transform:translateY(-1px)}
  .btn-line:hover{border-color:var(--ink);background:var(--surface);box-shadow:var(--shadow-1);transform:translateY(-1px)}
  .btn-paper:hover{background:#fff;transform:translateY(-1px)}
  .btn-glass:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);transform:translateY(-1px)}
  .btn:active{transform:scale(.965)}
}
/* a light sweeping across the main button every few seconds */
.shine::before{content:"";position:absolute;inset-block:-2px;inset-inline-start:0;width:42%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:translateX(-140%) skewX(-18deg)}
.btn-paper.shine::before{background:linear-gradient(100deg,transparent,rgba(58,98,194,.16),transparent)}
.motion .shine::before{animation:shine 7s var(--ease) 2.4s infinite}
@keyframes shine{0%{transform:translateX(-140%) skewX(-18deg)}22%,100%{transform:translateX(360%) skewX(-18deg)}}
.more{display:inline-flex;align-items:center;gap:6px;color:var(--steel-t);font-weight:600;font-size:16px;padding:6px 10px;margin-inline:-10px;border-radius:10px;min-height:44px;transition:background-color .2s}
.more-ic{display:inline-flex;transition:transform .3s var(--ease)}
.more-ic svg{width:18px;height:18px}
@media (hover:hover){.more:hover{background:var(--steel-soft)} .more:hover .more-ic{transform:translateX(calc(var(--from) * -.18))}}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;height:var(--hdr);transition:transform .4s var(--ease)}
.top-glass{position:absolute;inset:0;opacity:0;background-color:var(--glass-hdr);background-image:var(--sheen);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid var(--glass-edge);box-shadow:var(--shadow-1);transition:opacity .35s var(--ease)}
.scrolled .top-glass{opacity:1}
.top.hide{transform:translateY(-110%)}
.top-in{position:relative;height:100%;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;margin-inline-end:auto;color:var(--ink)}
.brand .mark{transition:transform .4s var(--ease)}
.scrolled .brand .mark{transform:scale(.88)}
html[dir="ltr"].scrolled .brand .mark{transform:scale(-.88,.88)}
.brand-txt>span{display:flex;flex-direction:column;line-height:1.25}
.brand b{font-family:var(--display);font-weight:600;font-size:16.5px}
html[lang="en"] .brand b{font-family:var(--font);letter-spacing:-.01em}
.brand small{font-size:12.5px;color:var(--ink-2);transition:opacity .3s}
.scrolled .brand small{opacity:.7}
.nav{display:flex;gap:2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;font-size:15px;color:var(--ink-2);transition:background-color .2s,color .2s}
.nav a[aria-current="page"]{color:var(--steel-t);background:var(--steel-soft);font-weight:600}
@media (hover:hover){.nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}}
.acts{display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--ink);cursor:pointer;transition:transform .2s var(--ease),border-color .2s,background-color .2s}
.icon-btn .ic{grid-area:1/1;transition:opacity .25s,transform .35s var(--ease)}
.icon-btn:active{transform:scale(.92)}
@media (hover:hover){.icon-btn:hover{border-color:var(--ink-2);background:var(--surface)}}
.i-sun{opacity:0;transform:rotate(-60deg) scale(.6)}
[data-theme="dark"] .i-sun{opacity:1;transform:none}
[data-theme="dark"] .i-moon{opacity:0;transform:rotate(60deg) scale(.6)}
.i-close{opacity:0;transform:rotate(-90deg) scale(.6)}
.menu-open .i-close{opacity:1;transform:none}
.menu-open .i-menu{opacity:0;transform:rotate(90deg) scale(.6)}
.menu-btn{display:none}
.lang-btn{min-width:52px;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent);
  color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.lang-btn:active{transform:scale(.94)}
@media (hover:hover){.lang-btn:hover{border-color:var(--ink-2)}}
.progress{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:linear-gradient(var(--grad-dir),var(--walnut),var(--steel));transform:scaleX(var(--p,0));transform-origin:left}
html[dir="rtl"] .progress{transform-origin:right}

/* ---------- phone menu sheet ---------- */
.sheet{position:fixed;inset:0;z-index:45;background:rgba(10,19,35,.28)}
.sheet[hidden]{display:none}
.sheet-panel{position:absolute;inset-inline:10px;top:calc(var(--hdr) + 6px);border-radius:26px;padding:12px;max-height:calc(100dvh - var(--hdr) - 24px);overflow:auto;
  background-color:var(--glass-strong);box-shadow:var(--shadow-3)}
.sheet-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sheet-nav a{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 16px;border-radius:18px;background:color-mix(in srgb,var(--surface) 70%,transparent);font-weight:500;font-size:16px}
.sheet-nav a .ic{color:var(--steel-t)}
.sheet-nav a[aria-current="page"]{background:var(--btn-bg);color:var(--btn-fg)}
.sheet-nav a[aria-current="page"] .ic{color:inherit}
.sheet-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.sheet-foot .btn{min-height:52px;padding:0 12px}
.motion .sheet.open .sheet-panel{animation:sheetIn .5s var(--spring) both}
.motion .sheet.open .sheet-nav a{animation:fadeUp .45s var(--ease-out) both;animation-delay:calc(60ms + var(--k) * 35ms)}
.motion .sheet.closing .sheet-panel{animation:sheetOut .22s var(--ease) both}
@keyframes sheetIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sheetOut{to{opacity:0;transform:translateY(-8px) scale(.98)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- phone dock ---------- */
.dock{display:none}

/* ---------- canvas threads ---------- */
.threads{pointer-events:none}

/* ---------- home hero ---------- */
.hero{position:relative;min-height:min(100svh,940px);display:flex;align-items:center;padding:calc(var(--hdr) + clamp(28px,5vw,72px)) 0 clamp(48px,6vw,96px);overflow:hidden;isolation:isolate}
.hero>.threads{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(32px,6vw,104px);align-items:center}
.hero-copy{position:relative}
.hero-copy::before{content:"";position:absolute;inset:-16% -14% -16% -24%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--paper) 58%,color-mix(in srgb,var(--paper) 0%,transparent));opacity:.9}
.hero-name{font-size:clamp(42px,4.3vw + 14px,86px);font-weight:650;line-height:1.32;margin:0 0 .1em}
html[lang="en"] .hero-name{font-size:clamp(42px,4.4vw + 12px,84px);line-height:1.02;letter-spacing:-.04em;margin-bottom:.18em}
.hero-statement{font-family:var(--display);font-size:clamp(21px,1.5vw + 13px,35px);font-weight:420;line-height:1.55;color:var(--steel-t);margin:0 0 20px;max-width:19em}
html[lang="en"] .hero-statement{font-family:var(--font);font-weight:300;line-height:1.24;letter-spacing:-.015em;max-width:17em}
.hero .lede{max-width:33em;margin-bottom:32px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-portrait{position:relative;margin:0;margin-inline-end:clamp(0px,3.2vw,60px);justify-self:end;width:min(100%,420px)}
.portrait-frame{position:relative;aspect-ratio:634/792;border-radius:30px;overflow:hidden;background:#4a3326;box-shadow:var(--shadow-3);transform:translateZ(0)}
.portrait-frame picture{display:block;height:100%}
.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.04);transform-origin:50% 28%}
.motion .portrait-frame img{animation:kenburns 30s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.4%,-1.1%,0)}}
.portrait-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);pointer-events:none}
.now{position:absolute;inset-inline-start:-34px;bottom:30px;display:flex;align-items:center;gap:12px;padding:14px 18px 14px 20px;border-radius:20px;max-width:310px;
  background-color:var(--glass-strong)}
.motion .now{animation:bob 7.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.now-dot{position:relative;width:10px;height:10px;border-radius:50%;background:var(--steel);flex:none}
.now-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--steel);opacity:0}
.motion .now-dot::after{animation:ping 2.8s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}}
.now-txt>span{display:flex;flex-direction:column;font-size:13px;color:var(--ink-2);line-height:1.5}
.now-txt b{font-size:15px;color:var(--ink);font-weight:600;line-height:1.45}
.hero-strip{display:none}
/* entrance: header, title, text and buttons in a short stagger; the portrait settles in */
.motion .rise{opacity:0;animation:rise .95s var(--ease-out) forwards;animation-delay:calc(.12s + var(--k) * .11s)}
.motion .rise-img{opacity:0;animation:riseImg 1.3s var(--ease-out) .3s forwards}
.motion .top-in{animation:fadeDown .8s var(--ease-out) .05s both}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes riseImg{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* scroll-linked: the hero recedes as you leave it */
@supports (animation-timeline:view()){
  .motion .hero-copy{animation:heroAway linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .motion .hero-portrait .portrait-frame{animation:portraitAway linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
}
@keyframes heroAway{to{transform:translateY(-60px);opacity:.25}}
@keyframes portraitAway{to{transform:translateY(-24px) scale(.95)}}

/* ---------- sections ---------- */
.sec{position:relative;padding-block:clamp(60px,7.5vw,112px)}
.sec-tint{background:var(--tint)}
.sec-head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,50px);max-width:48rem}
.sec-head .more{justify-self:start;margin-top:2px}
.intro{padding-block:clamp(56px,7vw,104px)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.pull{font-family:var(--display);font-size:clamp(24px,1.65vw + 15px,42px);line-height:1.62;font-weight:520;margin:0 0 24px;color:var(--ink);max-width:21em;text-wrap:balance}
html[lang="en"] .pull{font-family:var(--font);font-weight:300;line-height:1.24;letter-spacing:-.018em}
.pull-s{font-size:clamp(21px,1.15vw + 15px,31px);max-width:28em}
.ledger{margin:0;border-top:1px solid var(--line)}
.lg-row{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:16px;padding:17px 0;border-bottom:1px solid var(--line);align-items:baseline}
.lg-row dt{color:var(--ink-2);font-size:14.5px}
.lg-row dd{margin:0;font-weight:600;font-size:17px;line-height:1.5}

/* ---------- reveal on scroll ---------- */
.motion .rv{opacity:0;transform:translateY(24px)}
.motion .rv.in{opacity:1;transform:none;transition:opacity .85s var(--ease) calc(var(--k,0) * 85ms),transform 1s var(--ease-out) calc(var(--k,0) * 85ms)}
.motion .rv-h{opacity:0;transform:translateX(var(--from))}
.motion .rv-h.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform 1s var(--ease-out)}

/* ---------- measured results ---------- */
.measure{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.m-item{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 22px 20px;box-shadow:var(--shadow-1)}
.motion .m-item.in{transition:opacity .85s var(--ease) calc(var(--k,0) * 85ms),transform 1s var(--ease-out) calc(var(--k,0) * 85ms),box-shadow .3s,border-color .3s}
.m-title{font-family:var(--font);font-size:15px;font-weight:600;line-height:1.45;color:var(--ink-2);min-height:2.9em;letter-spacing:0}
.m-vis{height:108px;margin:12px 0 8px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.bar{display:grid;grid-template-columns:3em minmax(0,1fr);align-items:center;gap:10px;font-size:13px;color:var(--ink-2);line-height:1.2}
.bar i{display:block;height:12px;border-radius:999px;background:var(--line-2);transform:scaleX(var(--w));transform-origin:left;transition:transform 1.2s var(--ease-out) .25s}
html[dir="rtl"] .bar i{transform-origin:right}
.bar.b1 i{background:linear-gradient(var(--grad-dir),var(--steel),color-mix(in srgb,var(--steel) 70%,#fff));transition-delay:.5s}
.motion .m-item:not(.in) .bar i{transform:scaleX(0)}
.dots svg{width:100%;height:100%;fill:var(--line-2)}
.dots .dots-all{opacity:1;transition:opacity 1.2s var(--ease) .3s}
.motion .m-item:not(.in) .dots-all{opacity:0}
.dot-miss{fill:var(--walnut);transform-box:fill-box;transform-origin:center}
.motion .dot-miss{animation:miss 2.6s ease-in-out infinite}
@keyframes miss{0%,100%{transform:scale(1)}50%{transform:scale(1.8)}}
.m-num{font-size:clamp(34px,1.8vw + 22px,46px);font-weight:600;line-height:1;margin:6px 0 12px;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.02em}
html[dir="rtl"] .m-num{text-align:right}
.count{display:inline-block;min-width:4.7ch;text-align:inherit}
.m-ctx{font-size:14px;color:var(--ink-2);margin:auto 0 0;line-height:1.65}
@media (hover:hover){.m-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--steel) 30%,var(--line))}}

/* ---------- how I think: rotating ideas ---------- */
/* a bed of threads under a glass card, so the glass has something to blur */
.bed{position:relative;isolation:isolate}
.bed>.threads{position:absolute;top:-56px;inset-inline-start:calc(50% - 50vw);width:100vw;height:calc(100% + 112px);z-index:-1}
.bed-lanes::before{content:"";position:absolute;inset:-34px calc(var(--gut) * -1);z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 23px,color-mix(in srgb,var(--steel) 30%,transparent) 23px 24px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent)}
.voices{position:relative;border-radius:var(--r-xl);padding:clamp(28px,4.4vw,60px);overflow:hidden}
.voices-stage{display:grid}
.voice{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .55s var(--ease),transform .8s var(--ease-out),visibility 0s .55s}
.voice.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease) .1s,transform .9s var(--ease-out) .1s,visibility 0s}
.voice-q{margin:0}
.voice-q p{font-family:var(--display);font-size:clamp(22px,1.75vw + 13.5px,40px);line-height:1.62;font-weight:520;margin:0 0 16px;max-width:23em;text-wrap:balance}
html[lang="en"] .voice-q p{font-family:var(--font);font-weight:300;line-height:1.22;letter-spacing:-.02em}
.voice-sub{color:var(--ink-2);font-size:clamp(15.5px,.25vw + 15px,17.5px);max-width:42em;line-height:1.8}
html[lang="en"] .voice-sub{line-height:1.6}
.voices-ctl{display:flex;align-items:center;gap:10px;margin-top:clamp(22px,3vw,36px)}
.vtabs{display:flex;gap:2px}
.vtab{width:44px;height:44px;padding:0 4px;background:none;border:0;cursor:pointer;display:grid;place-items:center;flex:none}
.vtab i{position:relative;display:block;width:100%;height:4px;border-radius:4px;background:var(--line-2);overflow:hidden}
.vtab i::after{content:"";position:absolute;inset:0;background:var(--steel);transform:scaleX(0);transform-origin:left}
html[dir="rtl"] .vtab i::after{transform-origin:right}
.vtab[aria-selected="true"] i::after{transform:scaleX(1)}
.motion .voices.auto .vtab[aria-selected="true"] i::after{animation:fillbar var(--dur,7.5s) linear forwards}
.voices.paused .vtab[aria-selected="true"] i::after{animation-play-state:paused}
@keyframes fillbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- journey: stations on one thread ---------- */
.stations{list-style:none;margin:0;padding:30px 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.st{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding:18px 18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-1);transition:transform .35s var(--ease),box-shadow .3s,opacity .35s}
.st::before{content:"";position:absolute;top:-23px;inset-inline-start:24px;width:calc(100% + 16px);height:2px;border-radius:2px;
  background:color-mix(in srgb,var(--steel) calc(var(--k) * 18%),var(--walnut));opacity:.7}
.st:last-child::before{width:calc(100% - 24px)}
.st-dot{position:absolute;top:-29px;inset-inline-start:18px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid color-mix(in srgb,var(--steel) calc(var(--k) * 20%),var(--walnut))}
.st-year{font-weight:600;font-size:22px;font-variant-numeric:tabular-nums;color:var(--steel-t);line-height:1.2;margin-bottom:6px}
html[dir="rtl"] .st-year{text-align:right}
.st-place{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.st-org{font-size:15.5px;font-weight:600;line-height:1.45}
.st-line{font-size:14px;color:var(--ink-2);margin:8px 0 0;line-height:1.65}
@media (hover:hover){.st:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}}

/* ---------- Odoo 8–19 scale ---------- */
.ruler{border-radius:var(--r-xl);padding:clamp(22px,3.2vw,44px);display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.ruler-track{position:relative;padding-top:104px}
.ruler-marks{position:absolute;inset:0 0 auto;height:104px}
.rmark{position:absolute;bottom:calc(10px + var(--row) * 44px);inset-inline-start:calc(var(--pos) * 100%);display:flex;flex-direction:column-reverse;align-items:center;gap:6px;
  min-width:44px;min-height:44px;padding:4px 6px;background:none;border:0;cursor:pointer;color:var(--ink-2);transform:translateX(-50%);transition:color .25s}
html[dir="rtl"] .rmark{transform:translateX(50%)}
.rmark-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--steel);background:var(--surface);transition:transform .35s var(--spring),background-color .3s,box-shadow .3s}
.rmark.is-on .rmark-dot{background:var(--steel);transform:scale(1.3);box-shadow:0 0 0 6px var(--steel-soft)}
.rmark-l{font-size:12.5px;font-weight:500;white-space:nowrap;line-height:1.2}
.rmark.is-on{color:var(--ink)}
.rmark.is-on .rmark-l{font-weight:600}
@media (hover:hover){.rmark:hover{color:var(--ink)} .rmark:hover .rmark-dot{transform:scale(1.2)}}
.ruler-ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:2px solid var(--ink)}
.tick{position:relative;text-align:center;padding-top:14px;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;line-height:1}
.tick::before{content:"";position:absolute;top:0;left:50%;width:2px;height:9px;margin-left:-1px;background:var(--ink)}
.ruler-cap{margin:14px 0 0;font-size:13px;color:var(--ink-2)}
.ruler-panels{display:grid}
.rpanel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s var(--ease),transform .7s var(--ease-out),visibility 0s .45s}
.rpanel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .08s,transform .8s var(--ease-out) .08s,visibility 0s}
.rp-v{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--steel-t)}
html[dir="rtl"] .rp-v{text-align:right}
.rp-org{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.rp-org b{font-family:var(--display);font-size:clamp(21px,1vw + 15px,27px);font-weight:600;line-height:1.4}
html[lang="en"] .rp-org b{font-family:var(--font);letter-spacing:-.015em;line-height:1.2}
.rp-place{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2)}
.rp-txt{margin:0;color:var(--ink-2);font-size:16px}

/* ---------- research cards ---------- */
.research{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rs{display:flex;flex-direction:column;gap:10px;min-width:0;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1);transition:transform .35s var(--ease),box-shadow .3s,opacity .35s}
.rs-field{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--walnut);font-weight:600}
.rs-txt{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.75}
.rs-status{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2);line-height:1.55}
.rs-status i{font-style:italic;color:var(--ink)}
@media (hover:hover){.rs:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}}

/* ---------- call-to-action band ---------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate;background:#0E1A33;color:#E9EFFA;padding-block:clamp(70px,8.5vw,128px);
  --th-a:222,170,130;--th-b:140,172,246}
.cta-band>.threads{position:absolute;inset:auto 0 0;width:100%;height:clamp(150px,17vw,230px);z-index:-1}
.cta-band{padding-bottom:calc(clamp(70px,8.5vw,128px) + clamp(110px,12vw,170px))}
.cta-band .h2{color:#fff;max-width:21em;margin-bottom:30px}
[data-theme="dark"] .cta-band{background:#0F1C37}

/* ---------- inner page head ---------- */
.phead{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--hdr) + clamp(44px,7vw,108px)) 0 clamp(112px,12vw,170px)}
.phead>.threads{position:absolute;inset-inline:0;bottom:0;width:100%;height:clamp(110px,13vw,170px);z-index:-1}
.phead .h1{max-width:17em;margin-bottom:20px}
.phead .lede{max-width:40em}
.motion .phead .h1{animation:rise .95s var(--ease-out) .1s both}
.motion .phead .lede{animation:rise .95s var(--ease-out) .24s both}
.phead-404 .cta-row{margin-top:28px}

/* ---------- story: chapters on one thread ---------- */
.chapters-sec{padding-top:clamp(20px,3vw,40px)}
.chapters{--pad:clamp(44px,6vw,84px);--lx:clamp(14px,2.3vw,30px);position:relative;list-style:none;margin:0;padding:0;padding-inline-start:var(--pad);display:grid;gap:clamp(24px,3.6vw,44px)}
.thread-line{position:absolute;inset-inline-start:var(--lx);top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--line);overflow:hidden}
.thread-line i{position:absolute;inset:0;background:linear-gradient(var(--walnut),var(--steel));transform:scaleY(var(--prog,1));transform-origin:top}
.motion .thread-line i{transform:scaleY(var(--prog,0))}
.ch{position:relative;display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:clamp(14px,3vw,44px);align-items:start}
.ch-knot{position:absolute;inset-inline-start:calc(var(--lx) - var(--pad) - 6px);top:12px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--steel);transition:transform .4s var(--spring),background-color .3s}
.ch.in .ch-knot{background:var(--steel)}
.ch-years{margin:6px 0 0;font-weight:600;font-size:clamp(19px,.9vw + 14px,25px);color:var(--steel-t);line-height:1.3;font-variant-numeric:tabular-nums}
.ch-body{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,2.6vw,34px);box-shadow:var(--shadow-1)}
.ch-org{margin-bottom:6px}
.ch-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:0 0 14px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.ch-place{display:inline-flex;align-items:center;gap:6px}
.ch-txt{margin:0;font-size:16.5px;max-width:46em}
.ch-q{margin:18px 0 0;padding:14px 20px;border-inline-start:3px solid var(--walnut);background:var(--walnut-soft);border-start-end-radius:14px;border-end-end-radius:14px}
.ch-q p{margin:0;font-family:var(--display);font-size:clamp(16px,.3vw + 15px,18px);line-height:1.75;color:var(--ink);font-weight:500}
html[lang="en"] .ch-q p{font-family:var(--font);font-weight:400;font-style:italic;line-height:1.55}
.now-next>*{max-width:58rem}
.now-next .h2{margin-bottom:18px}

/* ---------- approach ---------- */
.lens-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.lens-copy .h2{margin-bottom:18px}
.lens-demo{position:relative;margin:0;border-radius:var(--r-xl);padding:clamp(10px,2vw,22px)}
.lens-demo svg{width:100%;height:auto}
.lens-rows .lr-a,.lens-zoom .lr-a{fill:var(--steel)}
.lens-rows .lr-b,.lens-zoom .lr-b{fill:var(--walnut)}
.lens-rows{opacity:.55}
.lens-bg{fill:var(--surface)}
.lens-glass circle{fill:rgba(255,255,255,.08);stroke:var(--ink);stroke-width:3}
.lens-glass path{stroke:var(--ink);stroke-width:9;stroke-linecap:round}
.lens-cap{position:absolute;inset:0;pointer-events:none;font-size:13px;color:var(--ink-2)}
.lens-cap>span{position:absolute;inset-inline-start:clamp(16px,3vw,30px);padding:2px 10px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--line)}
.lens-cap .lc-a{top:7%}
.lens-cap .lc-b{top:54%}
.split{display:grid;grid-template-columns:4fr 1fr;gap:6px}
.split>div{position:relative;padding:22px 24px 0;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--ink-2);line-height:1.5}
.split>div::before{content:"";position:absolute;inset:0 0 auto;height:16px;border-radius:999px;background:var(--ink);transform-origin:left;transition:transform 1.3s var(--ease-out) .2s}
html[dir="rtl"] .split>div::before{transform-origin:right}
.split .split-b::before{background:var(--steel);transition-delay:1.1s}
.motion .split:not(.in)>div::before{transform:scaleX(0)}
.split b{display:block;margin-top:12px;font-size:clamp(30px,2vw + 18px,48px);font-weight:600;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
html[dir="rtl"] .split b{text-align:right}
.steps-wrap{position:relative}
.steps-thread{position:absolute;inset-inline:0;top:0;width:100%;height:84px;overflow:visible}
html[dir="rtl"] .steps-thread{transform:scaleX(-1)}
.steps-thread path{fill:none;stroke:var(--steel);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 2.4s var(--ease) .2s}
.motion .steps-wrap:not(.in) .steps-thread path{stroke-dashoffset:1}
.steps{list-style:none;margin:0;padding:96px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.step{display:flex;flex-direction:column;min-width:0;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1)}
.step-n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);font-weight:600;font-size:17px;margin-bottom:16px}
.step .h3{margin-bottom:8px}
.step p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.75}
.beliefs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px)}
.belief{display:grid;grid-template-columns:minmax(0,11.5em) minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid var(--line-2);align-items:baseline}
.belief .h3{font-size:clamp(16.5px,.3vw + 15.5px,19px)}
.belief p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.75}
.fws{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fw{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.fw b{font-size:24px;font-weight:600;color:var(--steel-t);line-height:1.2}
html[dir="rtl"] .fw b{text-align:right}
.fw span{color:var(--ink-2);font-size:15.5px}

/* ---------- work ---------- */
.progs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.prog{display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1);transition:transform .35s var(--ease),box-shadow .3s,opacity .35s,border-color .3s}
.prog-tag{align-self:flex-start;padding:4px 12px;border-radius:999px;background:var(--steel-soft);color:var(--steel-t);font-size:13px;font-weight:600;line-height:1.5}
.prog-org{font-size:18px}
.prog-txt{margin:0;color:var(--ink-2);font-size:15px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.prog-place{display:flex;align-items:center;gap:6px;margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
@media (hover:hover){.prog:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--steel) 30%,var(--line))}}
.mods-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.mods-copy .h2{margin-bottom:18px}
.modmap{position:relative;aspect-ratio:3/2}
.modmap-lines{position:absolute;inset:0;width:100%;height:100%}
.ml-base path{fill:none;stroke:var(--line-2);stroke-width:1.4}
.ml-flow path{fill:none;stroke:var(--steel);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.07 .93;stroke-dashoffset:1;opacity:0}
.motion .modmap.in .ml-flow path{opacity:.9;animation:flow 3.4s linear infinite;animation-delay:calc(var(--k) * -.28s)}
.modmap.paused .ml-flow path{animation-play-state:paused}
@keyframes flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.mod-core{position:absolute;left:50%;top:50%;width:clamp(96px,10vw,124px);aspect-ratio:1;margin:0;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-content:center;text-align:center;
  background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--shadow-3),0 0 0 10px var(--steel-soft);font-size:12.5px;line-height:1.3;z-index:1}
.mod-core b{font-size:20px;font-weight:600;line-height:1.2}
.mods{list-style:none;margin:0;padding:0}
.mod{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:7px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-1);font-size:13.5px;font-weight:500;white-space:nowrap;line-height:1.4;z-index:1}
.motion .modmap:not(.in) .mod{opacity:0;transform:translate(-50%,-30%)}
.motion .modmap .mod{transition:opacity .6s var(--ease) calc(var(--k) * 60ms),transform .8s var(--ease-out) calc(var(--k) * 60ms)}
.areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.area{display:flex;flex-direction:column;gap:10px;min-width:0;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1);transition:transform .35s var(--ease),box-shadow .3s}
.area-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--steel-soft);color:var(--steel-t);margin-bottom:6px}
.area-ic .ic{width:24px;height:24px}
.area p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.75}
@media (hover:hover){.area:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}}

/* ---------- knowledge ---------- */
.edus{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.edu{display:flex;flex-direction:column;gap:6px;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1)}
.edu-y{font-weight:600;color:var(--steel-t);font-size:15px}
html[dir="rtl"] .edu-y{text-align:right}
.edu p{margin:0;color:var(--ink-2)}
.certs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cert{display:flex;flex-direction:column;gap:6px;min-width:0;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-1)}
.cert b{font-size:22px;font-weight:600;color:var(--ink);line-height:1.2}
html[dir="rtl"] .cert b,html[dir="rtl"] .cert small{text-align:right}
.cert span{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.cert small{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--steel-t);font-weight:600}
.langs{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.langs .h3{font-size:17px}
.langs p{margin:0;color:var(--ink-2)}

/* ---------- contact ---------- */
.compose-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.compose .h2,.reach .h2{margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:15px;font-weight:500;cursor:pointer;
  transition:transform .2s var(--ease),border-color .2s,background-color .2s,color .2s}
.chip:active{transform:scale(.96)}
.chip.is-on{border-color:var(--steel);background:var(--steel-soft);color:var(--steel-t);font-weight:600}
@media (hover:hover){.chip:hover{border-color:var(--ink-2)}}
.letter{position:relative;border-radius:var(--r-l);padding:22px 24px;margin-bottom:20px;display:grid;gap:6px}
.letter-k{margin:0;font-size:14px;color:var(--ink-2);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.letter-k b{color:var(--ink);font-weight:600;font-size:15.5px}
.letter-sub{display:grid}
.letter-sub>span{grid-area:1/1}
.letter-sub [data-sub]{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ease-out)}
.letter-sub [data-sub].is-on{opacity:1;transform:none}
.letter-hi{margin:10px 0 2px;font-weight:500}
.letter-note{margin:4px 0 0;font-size:14px;color:var(--ink-2);line-height:1.6}
#copyMail{min-width:11.5em}
#copyMail .i-check{display:none}
#copyMail.done .i-copy{display:none}
#copyMail.done .i-check{display:block}
#copyMail .copied-l{display:none!important}
#copyMail.done .copy-l{display:none!important}
html[lang="ar"] #copyMail.done .copied-l[data-l="ar"],html[lang="en"] #copyMail.done .copied-l[data-l="en"]{display:inline!important}
.cards-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.cards-stack{grid-template-columns:1fr}
.ccard{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 18px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--ink);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.ccard:active{transform:scale(.98)}
@media (hover:hover){.ccard:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--steel) 35%,var(--line))}}
.ccard-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--steel-soft);color:var(--steel-t);flex:none}
.ccard-txt{display:flex;flex-direction:column;min-width:0;font-size:13px;color:var(--ink-2);line-height:1.45}
.ccard-txt>span{display:flex;flex-direction:column}
.ccard-txt b{font-size:15.5px;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
html[dir="rtl"] .ccard-txt b[dir="ltr"]{text-align:right}
.city{display:flex;align-items:center;gap:8px;margin:18px 0 0;color:var(--ink-2)}
.faq-wrap .faqs{max-width:62rem}
.faqs{border-top:1px solid var(--line-2)}
.faq{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:60px;padding:16px 0;cursor:pointer;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq-ic{position:relative;width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--line-2)}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease)}
.faq-ic::after{transform:rotate(90deg)}
.faq[open] .faq-ic::after{transform:rotate(0)}
.faq-a p{margin:0 0 20px;color:var(--ink-2);max-width:48em}
.faq::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.faq[open]::details-content{block-size:auto}
@media (hover:hover){.faq summary:hover .faq-ic{border-color:var(--ink-2)}}

/* ---------- footer ---------- */
.foot{padding:56px 0 calc(28px + var(--dock-space));border-top:1px solid var(--line);background:var(--paper)}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;margin-bottom:28px}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand .mark{width:42px;height:42px}
.foot-brand p{margin:0;line-height:1.45}
.foot-brand p>span{display:flex;flex-direction:column}
.foot-brand b{font-family:var(--display);font-size:18px;font-weight:600}
html[lang="en"] .foot-brand b{font-family:var(--font)}
.foot-brand p span span{color:var(--ink-2);font-size:14.5px}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;color:var(--ink-2);font-size:15px;transition:background-color .2s,color .2s}
@media (hover:hover){.foot-nav a:hover{background:var(--steel-soft);color:var(--ink)}}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.credit{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.credit a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border-radius:8px;color:var(--steel-t);font-weight:600;transition:background-color .2s}
.credit .sep{margin:0 2px}
@media (hover:hover){.credit a:hover{background:var(--steel-soft)}}

/* ---------- swipe dots (phones) ---------- */
.swipe-dots{display:none}

/* =================================================================== */
@media (max-width:1100px){
  .nav a{padding:0 10px;font-size:14.5px}
  .stations{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:46px}
  .st:nth-child(3n)::before{width:calc(100% - 24px)}
  .measure{grid-template-columns:repeat(2,minmax(0,1fr))}
  .progs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .certs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1020px){
  :root{--hdr:64px}
  .nav,.top-cta{display:none}
  .menu-btn{display:inline-grid}
  .brand small{display:none}
  .dock{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;z-index:40;inset-inline:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    height:66px;padding:0 4px 6px;border-radius:24px;background-color:var(--glass-strong);box-shadow:var(--shadow-3),inset 0 0 0 .5px var(--glass-edge);transition:transform .4s var(--ease)}
  .dock.away{transform:translateY(calc(100% + 24px))}
  :root{--dock-space:calc(86px + env(safe-area-inset-bottom,0px))}
  .dock-i{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-height:58px;padding-bottom:2px;color:var(--ink-2);font-size:11.5px;font-weight:500;line-height:1.2;transition:color .2s}
  html[lang="en"] .dock-i{font-size:11px}
  .dock-ic{display:grid;place-items:center;width:44px;height:32px;border-radius:12px;transition:background-color .25s,transform .25s var(--ease)}
  .dock-i:active .dock-ic{transform:scale(.9)}
  .dock-i[aria-current="page"]{color:var(--steel-t);font-weight:600}
  .dock-i[aria-current="page"] .dock-ic{background:var(--steel-soft)}
  .dock-main .dock-ic{width:54px;height:54px;border-radius:50%;margin-top:-26px;background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--shadow-2),0 0 0 5px var(--paper)}
  .dock-main[aria-current="page"] .dock-ic{background:var(--steel);color:#fff}
  .dock-main{color:var(--ink)}
}
@media (max-width:900px){
  .hero{min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-copy::before{inset:-10% -8%}
  .hero-strip{display:block;height:118px;margin:14px 0 10px}
  .hero-portrait{justify-self:stretch;width:100%;max-width:560px;margin-inline:auto}
  .portrait-frame{aspect-ratio:5/4;border-radius:26px}
  .portrait-frame img{object-position:50% 16%}
  .now{inset-inline-start:14px;bottom:14px;max-width:calc(100% - 28px);-webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--glass-solid)}
  .intro-grid,.lens-grid,.mods-grid,.compose-grid,.ruler{grid-template-columns:1fr}
  .ruler-panels{min-height:0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0}
  .steps-thread{display:none}
  .beliefs{grid-template-columns:1fr}
  .areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .research{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding-block:clamp(48px,11vw,64px)}
  .intro{padding-block:48px}
  .cta-row .btn{flex:1 1 100%}
  .hero .cta-row .btn{min-height:52px}
  .sec-head{margin-bottom:24px}
  .swipe{display:flex!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:12px;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .swipe::-webkit-scrollbar{display:none}
  .swipe>li{flex:0 0 84%;scroll-snap-align:center}
  .swipe.ready>li:not(.is-center){transform:scale(.95);opacity:.86}
  .swipe.ready>li.is-center{transform:none;opacity:1;box-shadow:var(--shadow-2)}
  .swipe-dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
  .swipe-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background-color .3s,transform .3s var(--ease)}
  .swipe-dots i.on{background:var(--steel);transform:scale(1.3)}
  .measure.swipe>li,.stations.swipe>li{flex-basis:80%}
  .stations{padding-top:34px}
  .stations.swipe .st::before{width:calc(100% + 12px)}
  .stations.swipe .st:last-child::before{width:calc(100% - 24px)}
  .research.swipe>li{flex-basis:86%}
  .ruler{padding:22px 18px}
  .ruler-track{padding-top:100px}
  .ruler-marks{height:100px}
  .rmark{bottom:calc(4px + var(--row) * 46px);min-width:44px;padding:0;justify-content:center}
  .rmark-l{display:none}
  .tick{font-size:12px}
  .steps,.areas,.edus,.fws{grid-template-columns:1fr}
  .belief{grid-template-columns:1fr;gap:6px}
  .certs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modmap{aspect-ratio:auto;display:grid;gap:14px;justify-items:center}
  .modmap-lines{display:none}
  .mod-core{position:relative;left:auto;top:auto;transform:none;width:108px}
  .mods{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .mod{position:static;transform:none;text-align:center;white-space:normal;padding:10px 12px;min-height:44px;display:grid;place-items:center}
  .motion .modmap:not(.in) .mod{transform:translateY(8px)}
  .ch{grid-template-columns:1fr;gap:8px}
  .ch-years{margin:0}
  .chapters{--pad:34px;--lx:10px}
  .ch-knot{top:8px}
  .split{grid-template-columns:4fr 1fr}
  .split>div{font-size:13.5px;padding-inline:0}
  .split-b span{overflow-wrap:anywhere}
  .foot{padding-top:44px}
  .foot-top{flex-direction:column;align-items:flex-start}
  .foot-nav{margin-inline:-13px}
  .lens-cap{font-size:12px}
  .voices{padding:24px 20px}
  .vprev,.vnext{display:none}
  .voices-ctl{justify-content:center}
}
@media (max-width:420px){
  .hero-name{font-size:40px}
  html[lang="en"] .hero-name{font-size:40px}
  .sheet-nav a{min-height:54px;padding:0 12px;font-size:15px}
  .split{grid-template-columns:1fr;gap:16px}
  .split>div::before{width:var(--bw)}
  .split-a{--bw:100%} .split-b{--bw:25%}
  .lang-btn{min-width:48px;padding:0 10px}
  .acts{gap:4px}
  .top-in{gap:8px}
  .brand{gap:8px}
  .brand .mark{width:30px;height:30px}
  .brand b{font-size:14.5px}
}
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto}
  .dock{height:58px}
  .dock-main .dock-ic{width:46px;height:46px;margin-top:-18px}
}

/* reduced motion: everything is still there, only calmer */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.18s!important;transition-delay:0s!important;scroll-behavior:auto!important}
}