/* Self-hosted from Google Fonts (SIL Open Font License): DM Mono, Hanken Grotesk, Nothing You Could Do, Old Standard TT, Noto Kufi Arabic, Noto Naskh Arabic, Aref Ruqaa. */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-var-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-var-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nothing You Could Do';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/nothing-you-could-do-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url(/assets/fonts/noto-kufi-arabic-var-normal-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200F, U+2010-2011, U+FD3E-FD3F, U+FE70-FEFF;
}
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/noto-naskh-arabic-var-normal-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200F, U+2010-2011, U+FD3E-FD3F, U+FE70-FEFF;
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/old-standard-tt-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/old-standard-tt-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/old-standard-tt-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/old-standard-tt-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/old-standard-tt-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/old-standard-tt-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/aref-ruqaa-400-normal-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200F, U+2010-2011, U+FD3E-FD3F, U+FE70-FEFF;
}
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/aref-ruqaa-700-normal-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200F, U+2010-2011, U+FD3E-FD3F, U+FE70-FEFF;
}

/* Layout: one drafting sheet — a dashed frame with hairline section rules and "+" registration marks; centre-axis hero, sketches drawn in pencil on canvas. */
:root{
  --paper:#F9F7F2;
  --paper-2:#EFECE4;
  --sheet:#FCFBF7;
  --ink:#1E1E1C;
  --pencil:#67645C;
  --faint:#A3A097;
  --rule:rgba(30,30,28,.16);
  --guide:rgba(30,30,28,.26);
  --dot:rgba(30,30,28,.11);
  --green:#3E7A47;
  --blue:#4F6F8F;
  --hl-bg:#3E7A47;
  --hl-fg:#F9F7F2;
  --tint:rgba(62,122,71,.14);
  --chip-bg:rgba(255,255,255,.5);
  --tape:rgba(210,201,178,.6);
  --shadow:rgba(30,30,28,.45);
  --panel-bg:#1E1E1C;
  --panel-fg:#F9F7F2;
  --panel-muted:#B9B5AB;
  --panel-row:rgba(249,247,242,.07);
  --marker-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5C38 5 84 3.6 128 6.2S182 10.6 198 5.2' fill='none' stroke='%231E1E1C' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M10 11.2C60 8 120 7.4 186 9' fill='none' stroke='%231E1E1C' stroke-width='1.3' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
  /* the pencil sketches read these */
  --sk-ink:#2b2a27;
  --sk-soft:#7a766d;
  --sk-blue:#4f6f8f;
  --sk-green:#3e7a47;
  --sk-blue-text:#3c5772;
  --sk-green-text:#2f5e37;
  --sk-hand:#55524b;
  --display:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Old Standard TT",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --hand:"Nothing You Could Do","Segoe Print","Bradley Hand",cursive;
  color-scheme:light;
}
/* dark: graphite paper, chalk-coloured pencil. System setting by default, the toggle wins both ways. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#161613;
  --paper-2:#1F1E1A;
  --sheet:#1B1A17;
  --ink:#ECE8DC;
  --pencil:#AAA597;
  --faint:#76726A;
  --rule:rgba(236,232,220,.14);
  --guide:rgba(236,232,220,.24);
  --dot:rgba(236,232,220,.075);
  --green:#86BC8F;
  --blue:#93B3D2;
  --hl-bg:#4E8E59;
  --hl-fg:#F5F2E8;
  --tint:rgba(134,188,143,.16);
  --chip-bg:rgba(236,232,220,.05);
  --tape:rgba(150,140,112,.38);
  --shadow:rgba(0,0,0,.7);
  --panel-bg:#232220;
  --panel-fg:#ECE8DC;
  --panel-muted:#9C978A;
  --panel-row:rgba(236,232,220,.06);
  --marker-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5C38 5 84 3.6 128 6.2S182 10.6 198 5.2' fill='none' stroke='%23ECE8DC' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M10 11.2C60 8 120 7.4 186 9' fill='none' stroke='%23ECE8DC' stroke-width='1.3' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
  --sk-ink:#E4DFD2;
  --sk-soft:#9D988B;
  --sk-blue:#93B3D2;
  --sk-green:#86BC8F;
  --sk-blue-text:#A9C4DE;
  --sk-green-text:#9CCBA4;
  --sk-hand:#C9C4B6;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#161613;
  --paper-2:#1F1E1A;
  --sheet:#1B1A17;
  --ink:#ECE8DC;
  --pencil:#AAA597;
  --faint:#76726A;
  --rule:rgba(236,232,220,.14);
  --guide:rgba(236,232,220,.24);
  --dot:rgba(236,232,220,.075);
  --green:#86BC8F;
  --blue:#93B3D2;
  --hl-bg:#4E8E59;
  --hl-fg:#F5F2E8;
  --tint:rgba(134,188,143,.16);
  --chip-bg:rgba(236,232,220,.05);
  --tape:rgba(150,140,112,.38);
  --shadow:rgba(0,0,0,.7);
  --panel-bg:#232220;
  --panel-fg:#ECE8DC;
  --panel-muted:#9C978A;
  --panel-row:rgba(236,232,220,.06);
  --marker-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5C38 5 84 3.6 128 6.2S182 10.6 198 5.2' fill='none' stroke='%23ECE8DC' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M10 11.2C60 8 120 7.4 186 9' fill='none' stroke='%23ECE8DC' stroke-width='1.3' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
  --sk-ink:#E4DFD2;
  --sk-soft:#9D988B;
  --sk-blue:#93B3D2;
  --sk-green:#86BC8F;
  --sk-blue-text:#A9C4DE;
  --sk-green-text:#9CCBA4;
  --sk-hand:#C9C4B6;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orbit-path,.orbit-dot,.pulse{animation:none!important}}
body{background:radial-gradient(circle,var(--dot) 1px,transparent 1.4px) 0 0/22px 22px,var(--paper);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
::selection{background:var(--hl-bg);color:var(--hl-fg)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}

.page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 24px}
.frame{position:relative;max-width:1360px;margin-inline:auto;border-inline-start:1px dashed var(--guide);border-inline-end:1px dashed var(--guide)}

/* bands: hairline on top, registration marks where the rule meets the frame */
.band{position:relative;border-top:1px solid var(--rule);padding-block:clamp(64px,9vw,128px);padding-inline:clamp(0px,3.4vw,48px)}
.band::before,.band::after{content:"";position:absolute;top:-6px;width:11px;height:11px;
  background:linear-gradient(var(--ink),var(--ink)) center/11px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 11px no-repeat}
.band::before{left:-6px}.band::after{right:-6px}
.band.tight{padding-block:clamp(48px,6vw,80px)}

.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;line-height:1.45}
.kicker{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--pencil)}
.hand{font-family:var(--hand);color:var(--pencil);font-size:22px;line-height:1.15;font-weight:400}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;padding-inline:clamp(0px,2vw,28px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand b{font-weight:800;font-size:19px;letter-spacing:-.03em}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,26px);list-style:none;margin:0;padding:0}
.nav a{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.nav a:hover .lbl{text-decoration:underline;text-underline-offset:4px}
.count{font-size:11px;color:var(--pencil);border:1px solid var(--rule);background:var(--chip-bg);padding:1px 5px;line-height:1.4}
.nav .cta{background:var(--paper-2);border:1px solid var(--rule);padding:6px 10px}
.nav .cta:hover{border-color:var(--ink)}
.nav .key{color:var(--pencil)}

/* hero — Hummingbird-style: margin notes in a narrow left column, footnoted giant headline, an orbit line */
.hero{padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(40px,5vw,72px);padding-inline:0}
.hero-grid{display:grid;grid-template-columns:200px minmax(0,1fr)}
.margin{border-inline-end:1px solid var(--rule);padding-block:clamp(20px,3vw,56px) 0;padding-inline:clamp(0px,2vw,24px) 22px}
.margin ol{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.margin li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:4px;font-family:var(--serif);font-size:13.5px;line-height:1.42;scroll-margin-top:80px}
.margin li:target p{background:var(--tint)}
.margin .nn{font-size:12px;padding-top:1px}
.margin p{margin:0}
.hero-main{padding-inline:clamp(20px,4vw,64px) clamp(0px,3vw,48px);min-width:0}
.h1wrap{position:relative;padding-top:clamp(40px,4vw,64px)}
.hero h1{position:relative;font-weight:800;font-size:clamp(54px,9.4vw,146px);line-height:.88;letter-spacing:-.058em;margin:0;max-width:11ch;text-wrap:balance}
.hero h1 sup,.sub sup{font-family:var(--serif);font-weight:400;font-size:.2em;letter-spacing:0;vertical-align:top;position:relative;top:.35em;margin-inline-start:.08em;line-height:1}
.sub sup{font-size:.6em;top:-.1em}
.hero sup a{text-decoration:none;padding:0 .1em}
.hero sup a:hover{color:var(--green)}
sup a[data-n]::after{content:attr(data-n)}
.orbit{position:absolute;left:-2%;top:0;width:min(780px,82%);height:auto;overflow:visible;pointer-events:none}
.orbit-path{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;animation:draw 2.8s cubic-bezier(.6,.05,.3,1) .3s backwards}
.orbit circle{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.orbit .fill{fill:var(--ink);stroke:none}
.orbit-dot{transform-box:fill-box;transform-origin:center;animation:float 6s ease-in-out infinite alternate}
.orbit text{font-family:var(--serif);font-size:15px;fill:var(--ink)}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes float{from{transform:translate(0,0)}to{transform:translate(5px,3px)}}
.sub{font-family:var(--serif);font-size:clamp(20px,2.3vw,29px);line-height:1.38;margin:clamp(26px,3vw,40px) 0 0;max-width:34ch;text-wrap:balance}
.nw{white-space:nowrap}
.doodle{width:1.5em;height:1em;vertical-align:-.16em;margin-inline:.08em}
.doodle path{fill:none;stroke:var(--ink);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.doodle .x{stroke:var(--green);stroke-width:1.6}
.hl{background:var(--hl-bg);color:var(--hl-fg);padding:0 .18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lede{font-family:var(--display);font-size:17px;color:var(--pencil);max-width:46ch;margin:18px 0 0}
.lede .why{color:var(--ink);text-underline-offset:4px;white-space:nowrap}
/* Ardent-style marker underline, drawn once in ink */
.marker{color:var(--ink);padding-bottom:.14em;background:var(--marker-img) left bottom/100% .42em no-repeat}
.head h2 .marker,.contact h2 .marker{background-size:100% .2em;padding-bottom:.06em}
.tint{background:var(--tint);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fig{margin:clamp(36px,5vw,64px) 0 0;max-width:820px;position:relative}
.fig canvas{display:block;width:100%;height:auto}
.fig figcaption{margin-top:14px;color:var(--pencil)}
.live{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;font-size:11.5px;color:var(--ink);border:1px solid var(--rule);background:var(--chip-bg);padding:4px 9px}
.live #ago{font-variant-numeric:tabular-nums;display:inline-block;min-width:1ch;text-align:end}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(62,122,71,.5);animation:pulse 2s ease-out infinite}
@keyframes pulse{from{box-shadow:0 0 0 0 rgba(62,122,71,.5)}to{box-shadow:0 0 0 7px rgba(62,122,71,0)}}
[dir="rtl"] .hero-main h1{font-family:"Noto Kufi Arabic",var(--display);letter-spacing:0;line-height:1.2;font-size:clamp(44px,7vw,108px)}
[dir="rtl"] .hero-main .sub,[dir="rtl"] .hero-main .lede{font-family:"Noto Naskh Arabic",var(--serif)}
[dir="rtl"] .hero-main .orbit{left:auto;right:-2%;transform:scaleX(-1)}
[dir="rtl"] .hero-main .orbit text{display:none}
/* language toggle */
.lang{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px;color:var(--faint)}
.lang a{text-transform:uppercase;letter-spacing:.04em;padding:3px 4px;color:var(--pencil);text-decoration:none;text-underline-offset:4px}
.lang a:hover{color:var(--ink);text-decoration:underline}
.lang a[aria-current="true"]{color:var(--ink);text-decoration:underline}
.lang a[lang="ar"]{font-family:"Noto Naskh Arabic",serif;font-size:14px;text-transform:none;letter-spacing:0}
.chip{font-family:var(--mono);font-size:10.5px;border:1px solid currentColor;opacity:.7;padding:0 4px;margin-inline-start:8px;line-height:1.5;display:inline-block;vertical-align:1px;text-decoration:none}
/* Companion-M-style data panel */
.profile{margin-top:34px;background:var(--panel-bg);color:var(--panel-fg);border:1px solid var(--rule);border-radius:12px;padding:8px;max-width:460px}
.profile h2,.profile h3,.contact .profile h2{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--panel-muted);margin:8px 10px 10px}
.profile dl{margin:0;display:grid;gap:4px}
.profile dl div{display:flex;justify-content:space-between;gap:16px;background:var(--panel-row);border-radius:6px;padding:10px 12px}
.profile dt{color:var(--panel-muted);font-size:14px}
.profile dd{margin:0;font-size:14px;font-weight:600;text-align:end}

/* services */
.partner{text-align:center}
.partner h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.8vw,36px);margin:0 0 clamp(28px,3vw,40px)}
.svc-wrap{position:relative;display:inline-block;text-align:center}
.svc{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.svc li{display:grid;gap:3px}
.svc b{font-family:var(--mono);font-weight:400;text-transform:uppercase;font-size:clamp(17px,1.9vw,22px);letter-spacing:.03em}
.svc span{font-family:var(--serif);font-style:italic;color:var(--pencil);font-size:16px}
.note-years{position:absolute;inset-inline-start:calc(100% + 8px);bottom:4px;width:200px;transform:rotate(-10deg);text-align:start;font-size:25px}
.formlink{display:inline-block;margin-top:clamp(36px,4vw,52px);font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;font-size:14px;text-decoration:underline;text-underline-offset:5px}
.formlink:hover{color:var(--green)}

/* interludes */
.interlude{text-align:center;display:grid;gap:12px;justify-items:center}
.interlude .dash{color:var(--faint);font-family:var(--mono)}
.interlude .say{font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;max-width:52ch}
.interlude .aside{font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;color:var(--pencil)}
.interlude .aside a{text-underline-offset:3px}

/* section heads */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.head h2{font-weight:800;font-size:clamp(38px,5.4vw,72px);line-height:.95;letter-spacing:-.045em;margin:0;text-wrap:balance}
.head p{font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);margin:12px 0 0;max-width:36ch}
.head .kicker{padding-bottom:6px}

/* method cards */
.layers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.layer{padding:20px 18px 26px;border-inline-start:1px dashed var(--guide);display:flex;flex-direction:column;gap:10px;min-width:0}
.layer:first-child{border-inline-start:0;padding-inline-start:0}
.layer .num{font-family:var(--mono);font-size:12px;color:var(--pencil)}
.layer canvas{display:block;width:100%;height:auto;max-width:240px}
.layer h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:4px 0 0;line-height:1.2}
.layer p{margin:0;color:var(--pencil);font-size:15.5px;line-height:1.45}

/* proof */
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.fact{padding:22px 20px 8px;border-inline-start:1px dashed var(--guide);position:relative;min-width:0}
.fact:first-child{border-inline-start:0;padding-inline-start:0}
.fact .big{font-weight:800;font-size:clamp(72px,9.4vw,136px);line-height:.9;letter-spacing:-.06em;display:block;font-variant-numeric:tabular-nums}
.fact .big small{font-size:.5em;letter-spacing:-.03em;vertical-align:.62em;margin-inline-start:.04em}
.fact .what{font-family:var(--serif);font-size:20px;margin:16px 0 6px;line-height:1.3}
.fact .mono{color:var(--pencil);font-size:11.5px}
.fact .hand{position:absolute;font-size:23px}
.n-zero{top:18px;inset-inline-start:clamp(72px,8vw,118px);transform:rotate(-7deg);width:150px}
.n-three{top:26px;inset-inline-end:4px;transform:rotate(6deg);width:130px;text-align:end}
[lang="ar"]{font-family:"Noto Naskh Arabic","Geeza Pro","Arabic Typesetting",serif;text-transform:none;letter-spacing:0;font-size:1.15em}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.draft{position:relative;border:1px solid var(--ink);background:var(--paper);padding:24px clamp(18px,2vw,28px) 22px;min-width:0;display:flex;flex-direction:column}
.draft::before,.draft::after{content:"";position:absolute;width:15px;height:15px;
  background:linear-gradient(var(--ink),var(--ink)) center/15px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 15px no-repeat}
.draft::before{top:-8px;left:-8px}.draft::after{bottom:-8px;right:-8px}
.dim{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--pencil);margin-bottom:22px}
.dim i{flex:1;height:1px;background:var(--pencil);position:relative}
.dim i:first-child::before,.dim i:last-child::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--pencil)}
.dim i:first-child::before{left:0}.dim i:last-child::after{right:0}
.draft h3{font-size:30px;font-weight:800;letter-spacing:-.035em;margin:0}
.draft .desc{font-family:var(--serif);font-size:19px;line-height:1.38;margin:10px 0 22px}
.draft dl{margin:auto 0 0;display:grid}
.draft dl div{display:flex;justify-content:space-between;gap:14px;border-top:1px dashed var(--guide);padding-block:10px}
.draft dt{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--pencil);padding-top:2px}
.draft dd{margin:0;font-weight:600;text-align:end;font-size:15.5px}
.paynote{margin-top:28px;color:var(--pencil);font-size:15.5px;max-width:70ch}
.paynote a{color:var(--ink);text-underline-offset:3px}

/* company */
.habits{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.habits li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;padding-block:20px;border-bottom:1px dashed var(--guide);align-items:baseline}
.habits b{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.025em}
.habits span{font-family:var(--serif);font-size:clamp(18px,1.6vw,21px);color:var(--ink)}

/* faq */
.faq{max-width:600px;margin:0 auto}
.faq .kicker{text-align:center;margin-bottom:48px}
.qa{display:grid;gap:18px}
.qa + .qa{margin-top:24px}
.qa h3{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;margin:0}
.qa p{font-size:clamp(19px,2vw,24px);line-height:1.42;margin:0;letter-spacing:-.005em}
.qa .sep{font-family:var(--mono);color:var(--faint);margin-top:28px}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.contact h2{font-weight:800;font-size:clamp(44px,6.4vw,92px);line-height:.92;letter-spacing:-.05em;margin:0;text-wrap:balance}
.contact .sub2{font-family:var(--serif);font-size:clamp(19px,1.8vw,23px);margin:22px 0 32px}
.mail{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mail .addr{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.02em;user-select:all;-webkit-user-select:all;word-break:break-all}
.btn{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:12px;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:7px 11px;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--paper)}
.status{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--green);min-height:1.4em;margin-top:8px}
.form{display:grid;gap:20px}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--pencil)}
.field input,.field select,.field textarea{font:inherit;font-size:18px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:8px 0;border-radius:0;width:100%}
.field textarea{resize:vertical;min-height:96px;border:1px solid var(--ink);padding:10px 12px;background:var(--chip-bg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 1px 0 0 var(--green)}
.send{justify-self:start;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:13px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:12px 18px;cursor:pointer}
.send:hover{background:var(--green);border-color:var(--green)}
.formnote{font-family:var(--serif);font-size:17px;border-inline-start:3px solid var(--green);padding:4px 0 4px 14px;margin:0}

/* footer */
.foot{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:28px}
.foot .fh{font-family:var(--mono);font-weight:400;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot ul a{text-decoration:none;color:var(--pencil)}
.foot ul a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot .mono{color:var(--pencil);margin-top:14px;max-width:34ch}
.colophon{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;color:var(--pencil)}

/* the tale: a sticky drawing board on the left redraws itself in pencil for each chapter on the right */
.tale-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.tale-head h2{font-weight:800;font-size:clamp(38px,5.4vw,72px);line-height:.95;letter-spacing:-.045em;margin:12px 0 0;text-wrap:balance}
.tale-head h2 .marker{background-size:100% .2em;padding-bottom:.06em}
.tale-head .mono{max-width:34ch;justify-self:end;margin:0;font-size:13.5px;line-height:1.35}
.tale-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--ink)}
.board-col{border-inline-end:1px dashed var(--guide);min-width:0}
.board-stick{position:sticky;top:0;height:100vh;min-height:640px;max-height:980px;display:grid;place-items:center;padding:36px clamp(16px,3vw,48px)}
.board{position:relative;margin:0;width:min(440px,100%);background:var(--sheet);border:1px solid var(--ink);padding:14px 14px 12px;box-shadow:0 18px 40px -28px var(--shadow)}
.board::before,.board::after{content:"";position:absolute;width:15px;height:15px;
  background:linear-gradient(var(--ink),var(--ink)) center/15px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 15px no-repeat}
.board::before{top:-8px;left:-8px}.board::after{bottom:-8px;right:-8px}
.tape{position:absolute;top:-10px;width:86px;height:24px;background:var(--tape);border:1px solid var(--rule)}
.tape.l{left:-26px;transform:rotate(-34deg)}.tape.r{right:-26px;transform:rotate(34deg)}
.board canvas,.inline canvas{display:block;width:100%;height:auto;aspect-ratio:480/560}
.board figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:var(--pencil);border-top:1px dashed var(--guide);padding-top:10px;font-size:11.5px}
.board .ct{font-variant-numeric:tabular-nums}
.chapters{min-width:0;padding-inline-start:clamp(24px,5vw,80px)}
.chapter{min-height:86vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;max-width:540px;padding-block:56px}
.js .chapter:not(.on) h3,.js .chapter:not(.on) p{color:var(--pencil)}
.js .chapter:not(.on) .hl{background:var(--tint);color:var(--ink)}
.chapter h3,.chapter p,.chapter .hl{transition:color .5s ease,background-color .5s ease}
.chapter h3{font-weight:700;font-size:clamp(28px,2.9vw,42px);line-height:1.05;letter-spacing:-.035em;margin:0;text-wrap:balance}
.chapter h3 sup{font-family:var(--serif);font-weight:400;font-size:.42em;vertical-align:top;letter-spacing:0;margin-inline-start:.12em;position:relative;top:.1em}
.chapter h3 sup a{text-decoration:none}
.chapter h3 .hl{padding:0 .12em}
.chapter p{font-family:var(--serif);font-size:clamp(19px,1.7vw,22px);line-height:1.45;margin:0}
.chapter .fn{font-size:14.5px;line-height:1.45;color:var(--pencil);display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px;border-top:1px dashed var(--guide);padding-top:12px;margin-top:6px;max-width:46ch;scroll-margin-top:120px}
.chapter .fn:target{background:var(--tint)}
.chapter .formlink{margin-top:10px}
.inline{display:none;margin:0}
.moral-wrap{max-width:860px;margin:0 auto;text-align:center;display:grid;justify-items:center;gap:22px}
.moral{font-family:var(--serif);font-size:clamp(26px,3.4vw,44px);line-height:1.3;margin:0;text-wrap:balance}
.doodle.nb{width:.9em;height:1em;vertical-align:-.12em}
.moral-sign{font-size:26px;transform:rotate(-4deg)}

/* responsive */
@media (max-width:1100px){
  .layers{grid-template-columns:minmax(0,1fr)}
  .layer,.layer:first-child{border-inline-start:0;padding-inline-start:0;border-top:1px dashed var(--guide);display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:28px;align-items:center}
  .layer:first-child{border-top:0}
  .layer .num{grid-column:2}
  .layer canvas{grid-row:1 / span 3;grid-column:1}
  .layer h3,.layer p{grid-column:2}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .margin{order:2;border-inline-end:0;border-top:1px solid var(--rule);margin-top:40px;padding:28px 0 0}
  .margin ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .hero-main{padding-inline:0}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .fact:nth-child(n+3){border-top:1px dashed var(--guide);margin-top:18px}
  .prices{grid-template-columns:minmax(0,1fr);max-width:560px}
  .contact{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot > div:first-child{grid-column:1 / -1}
  .note-years{position:static;display:block;transform:rotate(-4deg);margin:18px auto 0;width:auto;text-align:center}
}
@media (max-width:720px){
  .margin ol{grid-template-columns:minmax(0,1fr);gap:14px}
  .orbit{width:100%;top:6px;opacity:.75}
  .top{flex-wrap:wrap}
  .frame{border-inline-start:0;border-inline-end:0}
  .band::before,.band::after{display:none}
  .nav .opt{display:none}
  .habits li{grid-template-columns:minmax(0,1fr);gap:4px}
  .layer,.layer:first-child{grid-template-columns:110px minmax(0,1fr);column-gap:16px}
}
@media (max-width:480px){
  .fact{padding-inline-start:0 !important;padding-inline-end:6px}
  .fact .big{font-size:64px}
  .fact .hand{position:static;display:block;transform:rotate(-3deg);width:auto;text-align:start;margin-top:8px;font-size:20px}
  .fact .what{font-size:17px}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .tale-head{grid-template-columns:minmax(0,1fr)}
  .tale-head .mono{justify-self:start}
  .tale-grid{grid-template-columns:minmax(0,1fr);border-top:0}
  .board-col{display:none}
  .chapters{padding-inline-start:0}
  .chapter{min-height:0;padding-block:40px;border-top:1px dashed var(--guide);max-width:none}
  .js .chapter:not(.on) h3,.js .chapter:not(.on) p{color:inherit}
  .js .chapter:not(.on) p.fn{color:var(--pencil)}
  .js .chapter:not(.on) .hl{background:var(--hl-bg);color:var(--hl-fg)}
  .inline{display:block;position:relative;width:min(400px,100%);background:var(--sheet);border:1px solid var(--ink);padding:10px;margin:0 0 10px}
}

/* ---- site chrome added for ulamna.com ---- */
.skip{position:absolute;top:8px;inset-inline-start:max(16px,env(safe-area-inset-left,0px));z-index:20;background:var(--ink);color:var(--paper);padding:8px 12px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap}
.mark{color:var(--ink);flex:none}
.theme-btn{font:inherit;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);background:none;border:1px solid transparent;padding:6px 8px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.theme-btn:hover{border-color:var(--rule)}
.theme-btn:hover .lbl{text-decoration:underline;text-underline-offset:4px}
.formhint{font-family:var(--serif);font-size:15.5px;color:var(--pencil);margin:0}
.formhint a,.formnote a{color:var(--ink);text-underline-offset:3px}
.opt-l{text-transform:none;letter-spacing:0;color:var(--faint)}
.mail .btn{text-decoration:none;display:inline-block}
.contact .contact-h{font-weight:800;font-size:clamp(44px,6.4vw,92px);line-height:.92;letter-spacing:-.05em;margin:0;text-wrap:balance}
.contact .contact-h .marker{background-size:100% .2em;padding-bottom:.06em}

/* content pages: a page head, then a reading column with its table of contents */
.page-hero{padding-block:clamp(56px,8vw,112px) clamp(36px,5vw,64px)}
.ph{max-width:900px}
.ph h1{font-weight:800;font-size:clamp(46px,7.4vw,112px);line-height:.9;letter-spacing:-.055em;margin:16px 0 0;text-wrap:balance}
.ph h1 .marker{background-size:100% .18em;padding-bottom:.05em}
.ph .sub2{font-family:var(--serif);font-size:clamp(19px,1.9vw,24px);line-height:1.4;margin:26px 0 0;max-width:46ch}
.prose-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.toc{position:sticky;top:24px;border-top:1px solid var(--ink);padding-top:14px}
.toc h2{font-family:var(--mono);font-weight:400;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--pencil);margin:0 0 12px}
.toc ol{margin:0;padding:0 0 0 1.4em;display:grid;gap:7px;font-family:var(--serif);font-size:15px;color:var(--pencil)}
.toc a{text-decoration:none}
.toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.prose{max-width:68ch;min-width:0;font-size:17px;line-height:1.62}
.prose .meta{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--pencil);margin:0 0 22px}
.prose h2{font-weight:700;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.025em;line-height:1.15;margin:48px 0 12px;scroll-margin-top:24px}
.prose h3{font-weight:700;font-size:19px;margin:28px 0 8px}
.prose p,.prose li{margin:0 0 12px}
.prose ul,.prose ol{padding-inline-start:1.3em;margin:0 0 14px}
.prose a{text-underline-offset:3px}
.prose strong{font-weight:700}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:15.5px;line-height:1.5}
.prose th{font-family:var(--mono);font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.05em;color:var(--pencil);text-align:start;vertical-align:bottom;padding:0 0 8px;padding-inline-end:16px;border-bottom:1px solid var(--ink)}
.prose td{text-align:start;vertical-align:top;padding:12px 0;padding-inline-end:16px;border-bottom:1px solid var(--rule)}
.prose td:first-child{font-weight:700}
.prose th:last-child,.prose td:last-child{padding-inline-end:0}
@media (max-width:640px){
  .prose table,.prose tbody,.prose tr,.prose td{display:block}
  .prose thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .prose tr{padding:14px 0;border-bottom:1px solid var(--rule)}
  .prose tbody tr:first-child{border-top:1px solid var(--ink)}
  .prose td{border:0;padding:0}
  .prose td:first-child{font-size:17px;margin-bottom:4px}
  .prose td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:11.5px;font-weight:400;text-transform:uppercase;letter-spacing:.05em;color:var(--pencil);margin-top:8px}
}
.summary-box{position:relative;border:1px solid var(--ink);background:var(--sheet);padding:20px 22px;margin:0 0 8px;font-family:var(--serif);font-size:18px;line-height:1.5}
.summary-box::before,.summary-box::after{content:"";position:absolute;width:13px;height:13px;
  background:linear-gradient(var(--ink),var(--ink)) center/13px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 13px no-repeat}
.summary-box::before{top:-7px;left:-7px}.summary-box::after{bottom:-7px;right:-7px}
.summary-box p{margin:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,5vw,80px);align-items:start}
.h2s{font-weight:800;font-size:clamp(34px,4.4vw,58px);line-height:.95;letter-spacing:-.045em;margin:12px 0 0}
.kv{margin:0;border-top:1px solid var(--ink)}
.kv div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;padding-block:16px;border-bottom:1px dashed var(--guide)}
.kv dt{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--pencil);padding-top:3px}
.kv dd{margin:0;font-size:18px}
.kv a{text-underline-offset:3px}
.nf-links{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px}
@media (max-width:900px){
  .prose-layout,.split{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
  .kv div{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media print{
  body{background:#fff;color:#000}
  .top nav,.lang,.board-col,.inline,.orbit,.skip,.live{display:none!important}
  .frame{border:0}
}
.colophon a{text-decoration:none}
.colophon a:hover{text-decoration:underline;text-underline-offset:3px}
.page-hero + .band{padding-top:clamp(36px,4.5vw,64px)}

/* ---- services, breadcrumbs, related ---- */
.svc li a{display:grid;gap:3px;text-decoration:none}
.svc li a:hover b{text-decoration:underline;text-underline-offset:5px}
.svc-more{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;color:var(--pencil);margin-bottom:18px;font-size:11.5px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink)}
.svc-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.svc-index a{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.4fr) 28px;gap:20px;align-items:baseline;padding-block:24px;border-bottom:1px dashed var(--guide);text-decoration:none}
.svc-index .num{font-family:var(--mono);font-size:12px;color:var(--pencil)}
.svc-index b{font-weight:800;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.035em;line-height:1.05}
.svc-index .d{font-family:var(--serif);font-size:clamp(18px,1.6vw,21px);line-height:1.4}
.svc-index .go{font-family:var(--mono);color:var(--pencil);transition:transform .2s ease}
.svc-index a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.svc-index a:hover .go{color:var(--ink);transform:translateX(4px)}
[dir="rtl"] .svc-index .go{transform:scaleX(-1)}
[dir="rtl"] .svc-index a:hover .go{transform:scaleX(-1) translateX(4px)}
.related{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.related li{border-inline-start:1px dashed var(--guide);min-width:0}
.related li:first-child{border-inline-start:0}
.related a{display:grid;gap:8px;padding:18px 18px 22px;text-decoration:none;height:100%}
.related li:first-child a{padding-inline-start:0}
.related b{font-weight:700;font-size:19px;letter-spacing:-.02em}
.related span{color:var(--pencil);font-size:15px;line-height:1.45}
.related a:hover b{text-decoration:underline;text-underline-offset:4px}
.related-cta{margin-top:clamp(48px,6vw,80px)}
.faq .kicker{font-weight:400}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--chip-bg);border:1px solid var(--rule);padding:0 .3em}
@media (max-width:1100px){.related{grid-template-columns:repeat(2,minmax(0,1fr))}.related li:nth-child(3){border-inline-start:0}.related li:nth-child(3) a{padding-inline-start:0}.related li:nth-child(n+3){border-top:1px dashed var(--guide)}}
@media (max-width:720px){
  .svc-index a{grid-template-columns:40px minmax(0,1fr);row-gap:6px}
  .svc-index .d{grid-column:2}.svc-index .go{display:none}
  .related{grid-template-columns:minmax(0,1fr)}
  .related li{border-inline-start:0;border-top:1px dashed var(--guide)}
  .related li:first-child{border-top:0}
  .related a,.related li:first-child a{padding-inline:0}
}

/* ---- Arabic: Kufi for display, Naskh for reading, Ruqaa for the handwritten notes; Arabic letters must not be spaced ---- */
:root:lang(ar){
  --display:"Hanken Grotesk","Noto Kufi Arabic",Arial,sans-serif;
  --serif:"Old Standard TT","Noto Naskh Arabic",Georgia,serif;
  --mono:"DM Mono","Noto Kufi Arabic",ui-monospace,monospace;
  --hand:"Nothing You Could Do","Aref Ruqaa",cursive;
}
:lang(ar) *{letter-spacing:0!important}
:lang(ar) body{font-size:17px;line-height:1.7}
:lang(ar) .hero h1{font-size:clamp(44px,7vw,104px);line-height:1.22}
:lang(ar) .hero h1 sup{top:.15em}
:lang(ar) .head h2,:lang(ar) .tale-head h2,:lang(ar) .ph h1,:lang(ar) .contact h2,:lang(ar) .contact .contact-h,:lang(ar) .h2s{line-height:1.3}
:lang(ar) .chapter h3,:lang(ar) .svc-index b,:lang(ar) .draft h3{line-height:1.4}
:lang(ar) .sub,:lang(ar) .chapter p,:lang(ar) .qa p,:lang(ar) .moral,:lang(ar) .prose{line-height:1.75}
:lang(ar) .mono,:lang(ar) .kicker,:lang(ar) .say,:lang(ar) .aside,:lang(ar) .svc b,:lang(ar) .qa h3{font-size:13.5px;line-height:1.7}
:lang(ar) .svc b{font-size:clamp(18px,2vw,23px)}
:lang(ar) .hand{font-size:26px;line-height:1.5}
:lang(ar) .marker{padding-bottom:.22em}
[dir="rtl"] .orbit{left:auto;right:-2%;transform:scaleX(-1)}
[dir="rtl"] .orbit text{display:none}
[dir="rtl"] .tape.l{transform:rotate(34deg)}[dir="rtl"] .tape.r{transform:rotate(-34deg)}
[dir="rtl"] .note-years{transform:rotate(10deg)}
[dir="rtl"] .n-zero{transform:rotate(7deg)}[dir="rtl"] .n-three{transform:rotate(-6deg)}
[dir="rtl"] .mail .addr,[dir="rtl"] .profile dd [lang="en"],[dir="rtl"] .addr{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .field input[type="email"]{direction:ltr;text-align:end}