@layer site,overrides;
@layer site{
/* Design tokens. Loaded first: every later stylesheet reads these instead of its own values. */

/* IBM Plex Sans (variable) carries English text; IBM Plex Mono marks dates, labels and data. Arabic stays Cairo. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(../fonts/ibm-plex-sans-latin-wght-normal.woff2) format('woff2-variations');
  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: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(../fonts/ibm-plex-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: dark;

  /* Families */
  --font-sans: 'IBM Plex Sans', "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-arabic: 'Cairo', Tahoma, Arial, sans-serif;

  /* Type scale. Page titles > section titles > subsections > items. Nothing readable goes below --text-caption. */
  --type-h1: clamp(36px, 2.4vw + 20px, 56px);
  --type-h2: clamp(30px, 1.9vw + 18px, 46px);
  --type-h3: clamp(22px, .8vw + 16px, 28px);
  --type-h4: 20px;
  --text-lead: clamp(16px, .25vw + 14px, 18px);
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 12px;
  --tracking-display: -.025em;
  --tracking-label: .08em;

  /* Colour: navy ground, one accent. The accent is the identity's Electric Cyan (brand/tokens.json). */
  --bg: #050c18;
  --surface: #0a192c;
  --surface-raised: #122038;
  --ink: #eef5ff;
  --ink-soft: #c5d3e3;
  --muted: #a2b3cc;
  --subtle: #8aa2bf;
  --accent: #38bdf8;
  --accent-soft: #93d9fb;
  --on-accent: #07101f;
  --line: rgba(143, 187, 246, .17);
  --line-strong: rgba(147, 202, 255, .4);
  /* Solid dividers and control borders. One page ground: there are no light panels. */
  --rule: #2b3b52;
  --rule-strong: #43556e;

  /* Kept from the existing palette for product illustrations. */
  --blue: #729dff;
  --cyan: #79dcfa;
  --warm: #ffc658;
  --mint: #64dba1;
  --lilac: #ac9dff;
  --system-accent: #8ad6f5;

  /* Paper: the one light material, used only for the career ledger. A warm, dimmed sheet so it reads as an object on the dark page, not a white hole. Ink is the admin's carbon blue. */
  --paper-sheet: #d9d5ca;
  --carbon: #25317c;
  --carbon-soft: #4b5591;
  --carbon-rule: #c3cbe0;
  --canary: #f4d35e;
  --live: #64dba1;

  --radius: 24px;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --max: 1280px;
}
html[lang=ar] {
  /* Cairo sets larger and needs looser leading, so its headings step down one notch. */
  --type-h1: clamp(30px, 2.3vw + 18px, 52px);
  --type-h2: clamp(27px, 1.5vw + 16px, 42px);
  --type-h3: clamp(21px, .6vw + 16px, 26px);
  --tracking-display: 0;
  --tracking-label: 0;
}

/* Type roles. Later files size these; only the family is decided here. Arabic pages keep Cairo throughout. */
html:not([lang=ar]) :where(.hero-overline, .product-preview figcaption, .product-card-heading > p, .hero-resume) {
  font-family: var(--font-mono);
  letter-spacing: 0;
}
}

@layer site,overrides;
@layer site{
/* Fahad Alshaya / signature edition. Shared components and responsive rules; values come from tokens.css. */
:root {
  font-family: var(--font-sans);
  font-synthesis: none;
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: absolute; inset: 0 0 auto; height: 1050px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 72% 32%, #142952 0, rgba(13,32,58,.7) 27%, transparent 65%), radial-gradient(ellipse at 5% 2%, rgba(51,93,182,.15), transparent 45%); }
a { color: inherit; text-decoration: none; }
button, input, summary { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a, button, summary { touch-action: manipulation; }
img, svg { display: block; }
img { max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 650; line-height: 1.13; }
button { border: 0; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 5px; }
::selection { background: #3268a0; color: #fff; }
.wrap { width: min(calc(100% - 80px), var(--max)); margin-inline: auto; }
.icon { flex: 0 0 auto; width: 21px; height: 21px; }
.glass { background: linear-gradient(135deg, rgba(19,41,69,.85), rgba(8,22,41,.9)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(213,233,255,.025), 0 14px 48px rgba(0,0,0,.12); }
.overline { color: var(--muted); text-transform: uppercase; letter-spacing: .16em; font-size: var(--text-caption); font-weight: 650; line-height: 1.5; }
.gradient-text { color: var(--accent-soft); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 48px; padding: 0 20px; font-family: inherit; border: 1px solid rgba(152,197,255,.26); background: rgba(44,81,143,.1); border-radius: 12px; font-weight: 600; font-size: var(--text-small); line-height: 1.25; position: relative; overflow: hidden; transition: transform .23s var(--ease), box-shadow .23s, border-color .23s, background .23s; }
.button.primary { background: var(--accent); border-color: var(--accent); box-shadow: none; color: var(--on-accent); }
.button.primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); box-shadow: 0 8px 27px rgba(56,189,248,.18); }
.button.quiet { background: linear-gradient(120deg, rgba(33,66,110,.4), rgba(12,27,48,.55)); }
.button.small { min-height: 40px; padding-inline: 14px; font-size: 13px; border-radius: 10px; }
.button:hover { transform: translateY(-2px); border-color: #83bfff; box-shadow: 0 8px 27px rgba(26,100,218,.2); }
.button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(186,226,255,.065) 50%, transparent 80%); transform: translateX(-110%); transition: transform .6s var(--ease); pointer-events: none; }
.button:hover::before { transform: translateX(110%); }
.button:active { transform: translateY(0) scale(.985); }
.button .icon, .text-link .icon { width: 17px; height: 17px; transition: transform .24s var(--ease); }
.nav-resume .icon { width: 16px; height: 16px; }
.hero-socials .icon { height: 16px; width: 16px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 42px; font-size: 12px; font-weight: 600; color: var(--accent-soft); }
.skip-link { position: fixed; left: 20px; top: 10px; transform: translateY(-180%); z-index: 300; background: #e7f6ff; color: var(--ink); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { transform: none; }
.reading-progress { position: fixed; z-index: 250; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; }
.reading-progress span { display: block; height: 100%; transform: scaleX(var(--read-progress,0)); transform-origin: left; background: var(--accent); }

/* Navigation */
.site-header { position: fixed; z-index: 100; inset: 19px 0 auto; }
.nav-shell { display: flex; align-items: center; gap: 28px; justify-content: space-between; min-height: 67px; border: 1px solid rgba(160,195,241,.18); border-radius: 17px; padding: 9px 13px 9px 20px; background: rgba(6,17,33,.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 12px 35px rgba(0,0,0,.15); }
.brand { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.brand-name { font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.brand-name small { display: block; margin-top: 4px; font-size: var(--text-caption); letter-spacing: .09em; color: var(--subtle); font-weight: 400; }
.desktop-nav { display: flex; gap: 27px; align-items: center; }
.desktop-nav a { position: relative; font-size: var(--text-small); min-height: 40px; display: inline-flex; align-items: center; color: var(--muted); transition: color .2s; }
.desktop-nav a::after { content: ""; position: absolute; bottom: 0; height: 1px; left: 0; right: 100%; background: #82c9fa; transition: right .22s var(--ease); }
.desktop-nav a:hover, .desktop-nav a[aria-current] { color: var(--ink); }
.desktop-nav a:hover::after, .desktop-nav a[aria-current]::after { right: 0; }
.nav-actions { display: flex; gap: 23px; align-items: center; }
.nav-resume { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-caption); min-height: 42px; color: var(--muted); }
.mobile-menu { display: none; }

/* Cinematic portrait composition */
.hero { position: relative; isolation: isolate; padding-top: 126px; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 14px; min-height: 592px; }
.hero-copy { position: relative; z-index: 3; padding-block: 12px 8px; }
.hero-name { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: .02em; margin: 0 0 11px; }
.hero-overline { display: flex; align-items: center; gap: 9px; font-size: var(--text-caption); letter-spacing: .135em; margin-bottom: 26px; }
.hero h1 { font-size: var(--type-h1); line-height: 1.09; letter-spacing: var(--tracking-display); font-weight: 650; }
.hero-intro { font-size: 14px; color: var(--muted); line-height: 1.75; max-width: 477px; margin-top: 25px; }
.hero-intro strong { color: var(--ink); font-weight: 550; }
.hero-actions { display: flex; gap: 11px; margin-top: 27px; }
.hero-socials { margin-top: 27px; display: flex; align-items: center; gap: 15px; }
.hero-socials > span { font-size: var(--text-caption); color: var(--subtle); margin-right: 7px; }
.hero-socials a { display: flex; justify-content: center; align-items: center; min-width: 35px; height: 35px; color: var(--muted); border: 1px solid transparent; border-radius: 9px; transition: background .2s, color .2s; }
.hero-socials a:hover { background: rgba(64,102,157,.17); color: #d9f6ff; }
.portrait-stage { position: relative; height: 592px; min-width: 0; isolation: isolate; }
.portrait-aura { position: absolute; inset: 9% -4% 9%; background: radial-gradient(ellipse at 55% 60%, rgba(61,137,221,.3),rgba(32,65,130,.11) 46%,transparent 65%); filter: blur(6px); }
.hero-portrait { position: absolute; width: 100%; max-width: 554px; height: auto; inset: -8px 0 auto; margin-inline: auto; border-radius: 0; mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 81%, transparent 100%), linear-gradient(to right, transparent, #000 13%, #000 87%, transparent); mask-composite: intersect; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 81%, transparent 100%), linear-gradient(to right, transparent, #000 13%, #000 87%, transparent); -webkit-mask-composite: source-in; transform: translate3d(var(--portrait-x,0px),var(--portrait-y,0px),0); transition: transform .6s var(--ease); }

/* Signature: the name in both scripts. The other-script name switches language and glides into place on the other page. */
.hero .hero-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.hero-name .name-en { font-family: var(--font-sans); }
.hero-name .name-ar { font-family: var(--font-arabic); font-weight: 600; letter-spacing: 0; }
.hero-name a { color: var(--muted); font-size: .9em; font-weight: 500; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.hero-name a:hover { color: var(--accent-soft); border-color: var(--accent-soft); }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hero-name .name-en { view-transition-name: hero-name-en; }
  .hero-name .name-ar { view-transition-name: hero-name-ar; }
  ::view-transition-group(hero-name-en), ::view-transition-group(hero-name-ar) { animation-duration: .6s; animation-timing-function: var(--ease); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; }
}

/* Editorial hierarchy */
.section { padding-top: 93px; }
.section-heading { display: flex; gap: 30px; justify-content: space-between; align-items: flex-end; margin-bottom: 31px; }
.section-heading h2 { font-size: var(--type-h2); letter-spacing: var(--tracking-display); margin-top: 9px; }
.section-heading p:not(.overline) { font-size: 13px; color: var(--subtle); margin-top: 13px; line-height: 1.75; max-width: 470px; }
.development-note { color: var(--muted); font-size: var(--text-caption); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 11px; border: 1px solid rgba(136,176,229,.15); border-radius: 8px; background: rgba(55,92,145,.1); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 20px; }
.tags span { border: 1px solid rgba(135,182,239,.16); background: rgba(58,101,155,.085); border-radius: 6px; padding: 4px 7px; color: var(--muted); font-size: var(--text-caption); line-height: 1.3; }

/* Flagships: one hero and three distinct architectural objects. */
.name-divider { font-size: .72em; font-weight: 400; color: var(--muted); }
.arabic { font-size: .75em; font-family: var(--font-arabic); display: inline-block; color: var(--ink-soft); font-weight: 450; letter-spacing: 0; }

/* Niosk: physical runtime plus remote control, not a dashboard imitation. */
.contact-socials .icon { width: 13px; height: 13px; }
.back-link .icon { width: 16px; height: 16px; transform: rotate(180deg); }
.text-link:hover .icon { transform: translateX(3px); }
.button:hover .icon { transform: translateX(3px); }

/* Qasas: reusable assets, composition and approval. */

/* Cartostead: abstract spatial layers. This is not a geographic dataset. */

/* Compact product, foundation and domain surfaces */
.portfolio-group { margin-top: 43px; }
.compact-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; align-items: start; }
.compact-card { position: relative; min-width: 0; padding: 20px 17px 16px; border-radius: 17px; transition: border-color .25s, transform .25s; }
.compact-card h4 { margin-top: 7px; font-size: 15px; letter-spacing: -.025em; }
.compact-description { font-size: var(--text-caption); line-height: 1.7; color: var(--muted); min-height: 77px; margin-top: 12px; }
.compact-card .tags { margin-top: 13px; min-height: 24px; }
.compact-detail summary > span { font-size: 15px; line-height: 1; transition: transform .2s; }
.compact-card .tags span { font-size: var(--text-caption); padding: 3px 6px; }
.compact-detail { margin-top: 18px; }
.compact-detail summary { min-height: 30px; border-top: 1px solid rgba(133,175,230,.14); padding-top: 10px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 9px; color: var(--muted); font-size: var(--text-caption); cursor: pointer; }
.compact-detail summary::-webkit-details-marker { display: none; }
.compact-detail[open] summary > span { transform: rotate(45deg); }
.compact-detail > p { margin-top: 12px; color: var(--muted); font-size: var(--text-caption); line-height: 1.75; }
.compact-card:hover { border-color: rgba(144,197,255,.31); }
.qalam-status { font-size: var(--text-caption); color: var(--muted); margin-top: 11px; line-height: 1.5; }
.foundation-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; align-items: start; }
.foundation-grid .compact-card { padding: 24px; }
.foundation-grid .compact-description { min-height: 42px; max-width: 295px; font-size: 12px; }
.foundation-grid h4 { font-size: 19px; }
.foundation-grid .compact-detail summary { font-size: var(--text-caption); }
.domain-group { margin-top: 22px; }
.domain-card { padding: 27px 32px; display: grid; grid-template-columns: 68px 1.3fr .85fr; gap: 26px; align-items: center; border-radius: 20px; background: linear-gradient(125deg,rgba(22,45,74,.65),rgba(10,25,43,.9)); }
.domain-card h3 { font-size: 24px; margin: 7px 0 10px; letter-spacing: -.03em; }
.domain-card p:not(.overline) { font-size: 12px; color: var(--muted); }

/* Philosophy, four pillars, AI working method */
.expertise-section { padding-top: 112px; }

/* Private cloud: seven literal server elements, not synthetic health metrics. */

/* A concise, real contact surface */
.contact-section { padding-top: 83px; padding-bottom: 37px; }
.contact-socials { display: flex; gap: 19px; }
.contact-socials a { display: flex; align-items: center; gap: 5px; min-height: 30px; font-size: var(--text-caption); color: var(--muted); }
.site-footer { padding-block: 0 27px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(126,163,207,.1); padding-top: 21px; color: var(--subtle); font-size: var(--text-caption); }
.footer-inner > div { display: flex; align-items: center; gap: 20px; }

/* Dedicated architecture pages keep the homepage light. */
.case-main { padding-top: 124px; }
.back-link { display: inline-flex; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; min-height: 44px; margin-bottom: 26px; }
.case-heading-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; margin-bottom: 32px; }
.case-heading-grid h1 { font-size: var(--type-h1); letter-spacing: var(--tracking-display); margin-top: 15px; }
.case-headline { font-size: 22px; color: var(--ink-soft); letter-spacing: -.02em; margin-top: 16px; }
.case-heading-grid > div > p:not(.overline):not(.case-headline) { color: var(--muted); font-size: 14px; line-height: 1.75; margin-top: 15px; }
.case-next { padding-block: 25px 65px; }
.case-next > a { display: flex; justify-content: space-between; align-items: center; padding: 26px 31px; }
.case-next small { color: var(--muted); font-size: var(--text-caption); }
.case-next strong { display: block; margin-top: 7px; font-size: 28px; letter-spacing: -.025em; font-weight: 500; }

/* Optional micro-interactions. No CSS rule hides readable content. */
[data-glow] { --glow-x: 50%; --glow-y: 50%; }
[data-glow]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; background: radial-gradient(240px circle at var(--glow-x) var(--glow-y),rgba(118,181,255,.055),transparent 70%); transition: opacity .3s; }
@media (hover: hover) and (pointer: fine) {
  [data-glow]:hover::after { opacity: 1; }
}






/* Tablet, laptop and phone layouts: no viewport clipping to conceal overflow. */
@media (min-width:1600px) { .hero-grid { gap: 20px; } }
@media (max-width:1150px) {
  .wrap { width: calc(100% - 56px); }
  .nav-shell { gap: 20px; }
  .desktop-nav { gap: 19px; }
  .nav-actions { gap: 14px; }
  .hero h1 { font-size: var(--type-h1); }
  .hero-grid { min-height: 540px; }
  .portrait-stage { height: 535px; }
  .hero-portrait { top: 14px; }
  .compact-grid { gap: 9px; }
  .compact-card { padding: 17px 13px 14px; }
  .compact-card h4 { font-size: 14px; }
  .compact-description { min-height: 95px; }
  .compact-card .tags { min-height: 46px; align-content: start; }
  .foundation-grid .compact-card .tags { min-height: 24px; }
}
@media (max-width:960px) {
  .desktop-nav, .nav-actions { display: none; }
  .mobile-menu { display: block; margin-left: auto; }
  .mobile-menu summary { display: flex; gap: 11px; align-items: center; min-height: 40px; padding: 0 12px; list-style: none; font-size: 13px; color: var(--ink-soft); cursor: pointer; border: 1px solid rgba(142,185,242,.18); border-radius: 9px; background: rgba(26,52,89,.3); }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .menu-glyph { display: flex; flex-direction: column; gap: 4px; width: 13px; }
  .menu-glyph i { display: block; height: 1px; width: 13px; background: #b5cee9; transition: transform .2s; }
  .mobile-menu[open] .menu-glyph i:first-child { transform: translateY(2.5px) rotate(45deg); }
  .mobile-menu[open] .menu-glyph i:last-child { transform: translateY(-2.5px) rotate(-45deg); }
  .mobile-panel { position: absolute; top: 77px; right: 0; width: 272px; max-width: calc(100vw - 36px); border: 1px solid var(--rule-strong); border-radius: 15px; padding: 10px; background: linear-gradient(145deg,#0d2039,#071425); box-shadow: 0 20px 65px rgba(0,0,0,.55); }
  .nav-shell { position: relative; }
  .mobile-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 47px; padding: 8px 12px; font-size: 13px; color: var(--ink-soft); border-radius: 8px; }
  .mobile-panel a:hover { background: var(--surface-raised); }
  .mobile-panel a:last-child { border-top: 1px solid var(--rule); border-radius: 0 0 8px 8px; margin-top: 5px; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 0; min-height: 512px; }
  .hero h1 { font-size: var(--type-h1); }
  .hero-overline { font-size: var(--text-caption); gap: 6px; letter-spacing: .07em; margin-bottom: 19px; }
  .hero-intro { font-size: 12px; }
  .hero-actions .button { padding-inline: 16px; gap: 10px; }
  .portrait-stage { height: 455px; }
  .hero-portrait { top: 22px; }
  .section { padding-top: 74px; }
  .compact-grid { grid-template-columns: repeat(3,1fr); gap: 12px; }
  .compact-card { padding: 21px 19px 17px; }
  .compact-description { min-height: 69px; }
  .compact-card .tags { min-height: 24px; }
  .foundation-grid .compact-card { padding: 22px 18px; }
  .foundation-grid .compact-description { min-height: 68px; }
  .domain-card { grid-template-columns: 50px 1fr; gap: 22px; padding: 26px; }
  .footer-inner { flex-wrap: wrap; }
  .case-heading-grid { gap: 35px; }
  .case-heading-grid h1 { font-size: var(--type-h1); }
  .case-headline { font-size: 20px; }
}
@media (max-width:760px) {
  :root { scroll-padding-top: 90px; }
  .wrap { width: calc(100% - 36px); }
  .site-header { inset: 11px 0 auto; }
  .nav-shell { min-height: 59px; border-radius: 14px; padding: 7px 9px 7px 14px; }
  .brand-name { font-size: 12px; }
  .brand-name small { font-size: var(--text-caption); }
  .hero { padding-top: 105px; }
  .hero-grid { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
  .hero-copy { padding: 0; }
  .hero-overline { font-size: var(--text-caption); letter-spacing: .09em; margin-bottom: 22px; flex-wrap: wrap; }
  .hero h1 { font-size: var(--type-h1); line-height: 1.12; letter-spacing: var(--tracking-display); }
  .hero-intro { font-size: 13px; max-width: 500px; margin-top: 21px; }
  .hero-actions { margin-top: 23px; }
  .hero-actions .button { min-height: 46px; padding-inline: 16px; gap: 10px; }
  .hero-socials { margin-top: 15px; }
  .portrait-stage { height: clamp(354px,102vw,525px); margin: 10px auto 0; width: min(100%,510px); }
  .hero-portrait { top: 0; width: 100%; }
  .section { padding-top: 64px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 17px; margin-bottom: 24px; }
  .section-heading h2 { font-size: var(--type-h2); line-height: 1.08; }
  .section-heading p:not(.overline) { font-size: 12px; }
  .development-note { min-height: 29px; font-size: var(--text-caption); }
  .portfolio-group { margin-top: 36px; }
  .compact-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .compact-card { padding: 20px 17px 17px; }
  .compact-card h4 { font-size: 16px; }
  .compact-description { min-height: 78px; font-size: var(--text-caption); }
  .compact-card .tags { min-height: 43px; align-content: start; }
  .foundation-grid { grid-template-columns: 1fr; gap: 12px; }
  .foundation-grid .compact-card { padding: 24px; }
  .foundation-grid .compact-description { font-size: 12px; min-height: auto; max-width: none; }
  .foundation-grid .compact-card .tags { min-height: auto; }
  .foundation-grid .compact-detail { margin-top: 17px; }
  .foundation-grid h4 { font-size: 22px; }
  .compact-detail summary { min-height: 38px; }
  .domain-card { padding: 24px; gap: 18px; grid-template-columns: 1fr; }
  .domain-card h3 { font-size: 26px; }
  .contact-socials { gap: 30px; }
  .contact-socials a { min-height: 40px; }
  .footer-inner { display: block; padding-top: 21px; font-size: var(--text-caption); }
  .footer-inner > div { display: flex; justify-content: space-between; gap: 18px; margin-top: 12px; }
  .site-footer { padding-bottom: 24px; }
  .case-main { padding-top: 98px; }
  .case-heading-grid { grid-template-columns: 1fr; gap: 27px; }
  .case-heading-grid h1 { font-size: var(--type-h1); }
  .case-headline { font-size: 22px; }
  .case-heading-grid > div > p:not(.overline):not(.case-headline) { font-size: 13px; }
  .case-next { padding-top: 0; padding-bottom: 43px; }
  .case-next > a { padding: 23px; }
  .case-next strong { font-size: 25px; }
  .case-next small { font-size: var(--text-caption); }
}
@media (max-width:410px) {
  .wrap { width: calc(100% - 32px); }
  .hero h1 { font-size: var(--type-h1); }
  .hero-overline { font-size: var(--text-caption); letter-spacing: .04em; gap: 5px; }
  .hero-intro { font-size: 12px; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { padding-inline: 14px; gap: 8px; }
  .hero-actions .icon { width: 15px; height: 15px; }
  .hero-socials > span { font-size: var(--text-caption); }
  .portrait-stage { min-height: 0; height: 99vw; margin-top: 12px; }
  .section-heading h2 { font-size: var(--type-h2); }
  .compact-grid { gap: 10px; }
  .compact-card { padding: 17px 13px 14px; }
  .compact-card h4 { font-size: 14px; }
  .compact-description { font-size: var(--text-caption); min-height: 90px; }
  .compact-detail summary { font-size: var(--text-caption); }
  .compact-card .tags span { font-size: var(--text-caption); }
  .compact-card .tags { min-height: 40px; }
  .qalam-status { font-size: var(--text-caption); }
  .contact-socials { gap: 22px; }
  .footer-inner { font-size: var(--text-caption); }
  .footer-inner > div { gap: 11px; }
  .case-heading-grid h1 { font-size: var(--type-h1); }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .hero-portrait { transform: none; }
}
@media (forced-colors: active) {
  .glass, .button, .mobile-panel { border: 1px solid CanvasText; }
}
}
@layer overrides{
[hidden] { display: none; }
@media (max-width:760px) {
  .section-heading > p { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none; transition: none; }
}
}

@layer site,overrides;
@layer site{
/* Extensions to the approved signature design: real identity, explanatory systems and readable small phones. */

/* User-supplied AI-assisted portraits. Alpha is preserved; the lower edge fades into the page. */
.hero-portrait{width:92%;max-width:460px;height:auto;top:14px;z-index:1;mask-image:linear-gradient(#000 0 78%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0 78%,transparent 100%);mask-composite:add;-webkit-mask-composite:source-over;opacity:1}
.engagement-note{font-size:12px;color:var(--muted);margin-bottom:13px;max-width:330px}
/* Product marks never sit in a logo badge. Text remains the identity where no mark is verified. */
.product-logo{display:inline-block;object-fit:contain;width:auto;height:44px;max-width:62px;flex:0 0 auto;vertical-align:middle;transition:translate .25s var(--ease),filter .25s}
.product-identity{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.product-identity .product-logo{height:46px}
.compact-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.compact-brand .product-logo{height:30px;max-width:38px}
.case-heading-grid .product-identity .product-logo{height:76px;max-width:95px}
.compact-card:hover .product-logo{translate:0 -2px;filter:drop-shadow(0 5px 12px rgba(68,161,236,.18))}
/* Qanivo selection changes the explanation, not only the lighting. */
/* AI engineering: execution interfaces, model families, then reviewed practice. */
.sequence-steps h3{font-size:15px;line-height:1.4;margin-bottom:9px}
.sequence-steps li{position:relative;padding:20px;border-radius:13px;border:1px solid #263e5a;display:flex;gap:14px;background:rgba(13,35,59,.58);transition:border-color .3s,background .3s}
/* A curated relationship map: four domains, one selected at a time. */







/* Technology is subordinate, organized and local. Original logo hues reveal on interaction. */
/* Case-study playback is intentionally user-triggered. All steps exist as readable HTML. */
.case-sequence{padding-top:24px;padding-bottom:38px}
.sequence-panel{padding:32px;background:radial-gradient(ellipse at 90% 0,rgba(38,119,170,.12),transparent 70%),#0a1a2f}
.sequence-panel header{display:flex;justify-content:space-between;align-items:center;gap:22px}
.sequence-panel h2{font-size:var(--type-h3);letter-spacing:var(--tracking-display);margin-top:9px}
.sequence-note{font-size:12px;color:var(--muted);margin-top:14px}
.sequence-play{flex-shrink:0}
.sequence-steps{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.sequence-number{font:12px var(--font-mono);color:var(--subtle)}
.sequence-steps p{color:var(--muted);font-size:13px;line-height:1.7}
.sequence-steps .step-active{background:linear-gradient(135deg,#1a3d60,#102d4e);border-color:#72b5e0;box-shadow:inset 3px 0 0 #76c9ef}
.sequence-steps .step-complete{border-color:#476a82}
.sequence-progress{min-height:24px;margin-top:20px;font-size:12px;color:var(--ink-soft)}
/* Readability fixes to the existing compact hierarchy. */
.compact-card h4{font-size:17px;margin-top:14px}
.compact-description,.foundation-grid .compact-description{font-size:13px;line-height:1.7;min-height:0}
.mobile-menu summary{min-height:44px;min-width:74px}
.compact-detail summary,.foundation-grid .compact-detail summary{min-height:44px;font-size:12px}
.compact-detail>p{font-size:13px}
.compact-card .tags span{font-size:var(--text-caption)}
.qalam-status{font-size:var(--text-caption)}
.contact-socials a{min-height:44px}
@media(max-width:1150px){
 .hero-portrait{top:18px;max-width:420px}
 
 .compact-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:960px){
 .hero-portrait{width:94%;max-width:370px}
 .sequence-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 .hero-portrait{width:92%;max-width:395px;top:0}
 .portrait-stage{height:clamp(365px,113vw,535px)}
 .product-identity{gap:10px}.product-identity .product-logo{height:36px}
 .case-heading-grid .product-identity .product-logo{height:52px;max-width:65px}
 .sequence-panel{padding:22px}.sequence-panel header{align-items:flex-start;flex-direction:column}.sequence-panel h2{font-size:var(--type-h3)}
 .sequence-steps li{padding:17px 13px}.sequence-steps p{font-size:14px}
 .compact-grid{grid-template-columns:1fr 1fr}.compact-card{padding:23px 19px}.compact-card h4{font-size:19px}
 .compact-description,.foundation-grid .compact-description{font-size:14px}.compact-detail>p{font-size:14px}
 .compact-card .tags span{font-size:var(--text-caption)}
 .engagement-note{font-size:12px;max-width:none}
}
@media(max-width:400px){
 .wrap{width:calc(100% - 32px)}
 .compact-grid,.foundation-grid{grid-template-columns:1fr;gap:14px}
 .compact-card,.foundation-grid .compact-card{padding:24px}
 .compact-description,.foundation-grid .compact-description{font-size:15px;line-height:1.7}
 .compact-detail summary,.foundation-grid .compact-detail summary{font-size:13px}
 .compact-card .tags span{font-size:var(--text-caption)}
 .qalam-status{font-size:12px;line-height:1.6}
 .hero-portrait{top:0;width:96%}
 .sequence-steps{grid-template-columns:1fr}.sequence-steps li{padding:20px 16px}.sequence-steps h3{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .product-logo,.sequence-steps li{transition:none}
}


.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Identity refinement: retain the approved composition and motion vocabulary. */
/* A mark and its textual family share one identity, never one logo per model variant. */
/* Vendor marks stay static, unwarped and neutral. The surrounding system provides motion. */
/* Keep neighbouring wordmark-only titles aligned with retrieved mark lockups. */
.compact-brand{min-height:30px}
}

@layer site,overrides;
@layer site{
/* Focused additions to the approved visual system: finite motion, writing, evidence, contact. */
.hero-line{display:block}
.hero-copy h1>.gradient-text{display:block}
/* Preserve the original shared gradient rather than assigning a color to each word. */
.hero-copy .gradient-text .hero-line{color:inherit}
.hero-copy .gradient-text .hero-line:last-child{background:linear-gradient(105deg,#88b2ff,#7e95ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.footer-inner a{color:var(--muted);text-decoration:none;font-size:12px}
.footer-inner a:hover{text-decoration:underline;text-underline-offset:4px}
.node-active path,.node-complete path{stroke:#8fdfff}
.node-active strong{color:#fff}
.node-complete{border-color:#517d9c}
.sequence-play{min-height:44px}
/* A product capture is a real, reviewed image, not CSS drawing or a generated dashboard. */
.product-capture{margin:24px 0 32px;border:1px solid #355272;border-radius:16px;overflow:hidden;background:#071426;min-width:0}
.product-capture img{display:block;width:100%;height:auto;max-width:100%}
.product-capture figcaption{display:flex;flex-wrap:wrap;gap:10px 22px;padding:14px 18px;font-size:13px;line-height:1.6;color:var(--muted);border-top:1px solid #28435f}
.product-capture figcaption>span{color:var(--ink);font-weight:600}
.case-hero>.product-capture{margin:40px 0 32px}
/* Writing is intentionally present before there are published articles. No draft hrefs. */
.writing-card p{color:var(--muted);font-size:14px;line-height:1.75;margin:0}
.writing-context p{font-size:15px;color:var(--muted);max-width:800px;line-height:1.7;margin-bottom:20px}
.form-submit p{font-size:12px;line-height:1.6;color:var(--muted);max-width:220px}
.published-article header>p{color:var(--muted);line-height:1.8;font-size:17px}
.published-article section p{font-size:17px;line-height:1.85;color:var(--ink-soft);margin:0 0 20px}
.writing-section .section-heading p{margin-top:17px;max-width:560px}
.writing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.writing-card{padding:28px;display:flex;flex-direction:column;gap:20px;min-height:280px;border-radius:20px;min-width:0}
.writing-meta{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted)}
.writing-card h3{font-size:var(--type-h3);line-height:1.24;letter-spacing:var(--tracking-display);margin:0;font-weight:650}
.writing-card .text-link{margin-top:auto}
.writing-card time{font-size:12px;color:var(--muted)}
.writing-main{padding-top:150px;padding-bottom:60px}
.writing-hero{padding-top:28px;padding-bottom:52px}
.writing-hero h1{font-size:var(--type-h1);line-height:1.03;letter-spacing:var(--tracking-display);max-width:940px;margin:22px 0}
.writing-hero>p:last-child{max-width:630px;color:var(--muted);font-size:17px;line-height:1.8}
.writing-hero .back-link{margin-bottom:42px}
.writing-index h2{font-size:var(--type-h3);letter-spacing:var(--tracking-display);margin-bottom:24px}
.writing-index .writing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.writing-context{margin-top:36px;padding:32px;border-radius:20px}
.writing-context h2{font-size:var(--type-h3);letter-spacing:var(--tracking-display);margin-bottom:14px}
.writing-context .text-link{margin-right:30px}
.published-article{max-width:820px}
.published-article h1{font-size:var(--type-h1);line-height:1.1;margin:24px 0}
.published-article .back-link{margin-bottom:34px}
.published-article header{padding-bottom:32px;border-bottom:1px solid #32475e}
.published-article section{margin-top:40px}
.published-article h2{font-size:var(--type-h3);letter-spacing:var(--tracking-display);margin:0 0 20px}
.article-byline{margin-top:20px}
.article-related{max-width:820px;margin-top:40px;border-top:1px solid #32475e;padding-top:28px}
.article-related h2{font-size:var(--type-h3);margin-bottom:20px}
.article-related .text-link{margin:0 25px 14px 0}
/* Actual contact UI; native form labels/validation work without JavaScript. */
.contact-form-shell{border-radius:22px;margin-top:20px;padding:38px;background:linear-gradient(140deg,#102740d4,#081a2f)}
.contact-form-shell:empty{display:none}
.contact-form-panel{display:grid;grid-template-columns:.7fr 1.3fr;gap:18px 58px;align-items:start}
.contact-form-panel h3{font-size:var(--type-h3);line-height:1.08;letter-spacing:var(--tracking-display);margin:0;grid-column:1;grid-row:1}
.contact-form{grid-column:2;grid-row:1/4;min-width:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.field{display:flex;flex-direction:column;gap:9px;min-width:0;margin-bottom:16px}
.field label{font-size:14px;color:var(--ink);font-weight:600}
.field label span{font-size:12px;color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{width:100%;max-width:100%;border:1px solid #46617e;border-radius:11px;background:#08192b;color:var(--ink);padding:12px 14px;font:inherit;font-size:16px;line-height:1.5;min-height:48px;transition:border-color .18s}
.field select{color-scheme:dark;padding-right:30px}
.field textarea{resize:vertical;min-height:152px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#98d9ff;outline:2px solid #6cafdd;outline-offset:3px}
.field [aria-invalid="true"]{border-color:#ffbcb7}
.field-error{color:#ffbcb7;font-size:13px;line-height:1.5}
.field-error:empty{display:none}
.contact-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form-submit{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:8px}
.form-submit button{min-height:48px;min-width:172px;justify-content:center}
.form-submit button:disabled{opacity:.7;cursor:wait;transform:none}
.form-status{font-size:15px;line-height:1.7;margin-top:20px;min-height:0;border-radius:12px}
.form-status:empty{display:none}
.form-status:not(:empty){padding:15px 17px;border:1px solid #466885;background:#0a233c}
.form-status[data-state="success"]{color:#b4f7da;border-color:#518d79}
.form-status[data-state="error"]{color:#ffd0c4;border-color:#a97771}
.form-status[data-state="pending"]{color:var(--ink-soft)}
/* Newly introduced UI adapts without reducing important labels below readable sizes. */
@media(max-width:1100px){
 .desktop-nav{gap:19px}
 .writing-card{padding:23px}.writing-card h3{font-size:var(--type-h3)}
 .contact-form-panel{gap:18px 30px;grid-template-columns:.6fr 1.4fr}
}
@media(max-width:760px){
 .writing-grid{grid-template-columns:1fr}
 .writing-index .writing-grid{grid-template-columns:1fr 1fr}
 .writing-card{min-height:0;padding:25px;gap:18px}
 .writing-card p{font-size:15px}
 .writing-meta{font-size:13px}
 .writing-main{padding-top:112px}
 .writing-hero{padding-bottom:32px;padding-top:16px}
 .writing-hero .back-link{margin-bottom:28px}
 .writing-context{padding:25px}
 .contact-form-shell{padding:28px 22px}
 .contact-form-panel{display:block}
 .contact-form-panel h3{font-size:var(--type-h3);margin-bottom:16px}
 .form-grid{gap:12px}
 .form-submit p{max-width:none}
 .footer-inner>div{flex-wrap:wrap}
}
@media(max-width:430px){
 .writing-index .writing-grid{grid-template-columns:1fr}
 .form-grid{grid-template-columns:1fr;gap:0}
 .writing-card h3{font-size:var(--type-h3)}
 .contact-form-shell{padding:24px 17px}
 .writing-hero h1{font-size:var(--type-h1)}
 .writing-hero>p:last-child{font-size:16px}
 .writing-context .text-link{display:flex;margin:14px 0}
}
.privacy-notice{max-width:850px;padding-bottom:80px}.privacy-notice h2{font-size:var(--type-h3);letter-spacing:var(--tracking-display)}.form-submit p a{text-decoration:underline;text-underline-offset:3px;color:var(--accent-soft)}
.case-evidence-more{margin-block:40px;max-width:1120px}.case-evidence-more h2{font-size:var(--type-h3)}.case-evidence-more summary{cursor:pointer;padding:18px;border:1px solid var(--line);border-radius:14px;color:var(--ink-soft)}
@media(max-width:600px){.privacy-notice{padding-bottom:50px}.case-evidence-more{margin-block:28px}}
}
@layer overrides{
.article-byline{font-size:14px}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto;animation:none;transition:none}
}
}

@layer site,overrides;
@layer site{
/* Portfolio refinement. Existing hero, type system, assets and runtime remain the base. */
.section{padding-top:96px}.section-heading h2{font-size:var(--type-h2);line-height:1.04;letter-spacing:var(--tracking-display)}.section-heading p:not(.overline){font-size:16px;max-width:570px}.text-link{font-size:15px;line-height:1.5}.section-heading{align-items:flex-end}.overline:empty{display:none}
.hero .hero-intro{font-size:16px;line-height:1.75}.hero .hero-socials{font-size:12px}.hero .hero-overline{font-size:var(--text-caption)}
.hero-name{font-size:19px;letter-spacing:-.02em;margin-bottom:9px}.hero-actions{flex-wrap:wrap}.hero-resume{display:inline-flex;align-items:center;min-height:48px;padding-inline:8px;font-size:14px;color:var(--muted);transition:color .2s}.hero-resume:hover{color:var(--ink)}
/* Selected products: image-led, staggered rather than four copies of one panel. */
.work-intro{margin-bottom:42px}.work-intro h2{font-size:var(--type-h2)}.work-qanivo{--product-accent:#52ceea}.work-niosk{--product-accent:#59cd90}.work-qasas{--product-accent:#ffca46}.work-cartostead{--product-accent:#e3ad81}.contact-welcome>img{width:68px;height:68px;object-fit:cover;border-radius:50%;margin-bottom:25px}.compact-artwork img{display:block;width:100%;height:auto;border-radius:18px}.article-code figcaption{padding:14px 22px;border-bottom:1px solid var(--rule);color:var(--muted);font-size:13px}.writing-feature-copy>span{font-size:14px;color:var(--muted)}
.project-status{display:inline-flex;margin:16px 0 0;padding:5px 9px;border:1px solid color-mix(in srgb,var(--product-accent),transparent 55%);border-radius:999px;color:var(--product-accent);font-size:var(--text-caption);line-height:1.2;letter-spacing:.06em;text-transform:uppercase}.project-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 20px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rule)}.project-proof>div{min-width:0}.project-proof dt{margin:0 0 7px;color:var(--subtle);font-size:var(--text-caption);line-height:1.3;letter-spacing:.1em;text-transform:uppercase}.project-proof dd{margin:0;color:var(--ink-soft);font-size:12px;line-height:1.65}
.all-work-link{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule);padding:24px 0;margin-top:55px;font-size:17px;color:var(--ink-soft)}.all-work-link .icon{color:var(--accent-soft)}
/* Familiar system art remains conceptual, never substituted for a screen capture. */.case-next small{font-size:13px}.case-next strong{font-size:36px}
/* The person, not another diagram. Same ground as the rest of the page, set apart by a rule, not a panel. */
.human-section{padding-top:112px}
/* Expertise without the self-as-a-network graphic. */
.expertise-areas{display:grid;grid-template-columns:1fr 1fr;gap:26px 64px;margin:38px 0 76px}.expertise-area{display:flex;gap:20px;border-bottom:1px solid var(--rule);padding:0 0 28px;min-width:0}.expertise-area>.icon{flex:0 0 28px;width:28px;height:28px;color:var(--accent-soft);margin-top:3px}.expertise-area h3{font-size:var(--type-h4);font-weight:600;line-height:1.3;letter-spacing:var(--tracking-display);margin:0 0 11px}.expertise-area p{font-size:15px;line-height:1.7;color:var(--muted);max-width:480px}.expertise-area a{display:flex;gap:12px;align-items:center;font-size:12px;line-height:1.6;color:var(--muted);margin-top:16px}.contact-socials .icon{width:16px;height:16px}.expertise-area a .icon{width:18px;height:18px;flex-shrink:0}
/* Toolbox: native colour and optical sizing, not uniform inventory cards. */.writing-feature-copy h3{font-size:var(--type-h3);line-height:1.14;letter-spacing:var(--tracking-display);margin:18px 0}.contact-form-panel>h3{font-size:var(--type-h3);margin-bottom:13px;line-height:1.2}.domain-card h3{font-size:32px;line-height:1.3;margin-bottom:19px}.role-line h3{font-size:13px;color:var(--muted);margin-bottom:10px}.sequence-steps h3{font-size:17px}.writing-drafts ul{list-style:none;padding:0;display:grid;gap:22px;margin-top:24px}
/* Familiar AI marks; just enough workflow to make their use concrete. */.writing-feature-copy p{font-size:16px;line-height:1.75;color:var(--muted);max-width:590px}.article-body p{font-size:18px;line-height:1.9}.form-submit p{font-size:12px;max-width:240px}.work-index-hero>p{font-size:18px;line-height:1.8;max-width:690px;color:var(--muted);margin:24px 0}.compact-detail p{font-size:14px;line-height:1.8}.domain-card p{font-size:15px;line-height:1.8;color:var(--muted)}.case-context>p{font-size:17px;line-height:1.8;color:var(--muted)}.case-decisions p{font-size:17px;line-height:1.8;color:var(--muted)}.role-line p{font-size:18px;line-height:1.6;color:var(--product-accent)}.sequence-steps p{font-size:14px}.writing-card p{max-width:720px}
/* Writing gets one finished piece, not three large announcements. */
.writing-section{padding-top:105px}.writing-section .section-heading{margin-bottom:28px}.writing-index h2{margin-bottom:25px}.article-body h2{margin-top:50px;font-size:var(--type-h3);line-height:1.23}.article-sources h2{font-size:var(--type-h3)}.contact-welcome h2{font-size:var(--type-h2);line-height:1.02;letter-spacing:var(--tracking-display)}.work-index-flagships>h2{font-size:34px;letter-spacing:-.04em;margin:0 0 28px;line-height:1.2}.portfolio-group>h2{font-size:34px;letter-spacing:-.04em;margin:0 0 28px;line-height:1.2}.domain-group>h2{font-size:34px;letter-spacing:-.04em;margin:0 0 28px;line-height:1.2}.work-index-end h2{font-size:var(--type-h3);margin-bottom:18px}.case-context h2{font-size:var(--type-h3);letter-spacing:var(--tracking-display);line-height:1.2;margin-bottom:20px}.case-decisions h2{font-size:var(--type-h3);letter-spacing:var(--tracking-display);line-height:1.2;margin-bottom:20px}.case-sequence h2{font-size:var(--type-h3);line-height:1.3}.case-evidence-more h2{margin-bottom:20px;font-size:var(--type-h3)}.writing-feature{display:grid;grid-template-columns:.72fr 1.28fr;gap:48px;align-items:center;padding:36px 0;border-block:1px solid var(--rule)}.writing-feature-copy{min-width:0}.writing-feature-copy .text-link{display:inline-flex;gap:16px;margin-top:21px}.writing-context{background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:25px 0}.writing-hero .overline{display:none}
.published-article{max-width:1000px}.published-article header{max-width:900px;padding-bottom:38px}.published-article h1{font-size:var(--type-h1);line-height:1.1;letter-spacing:var(--tracking-display)}.article-body{max-width:730px;margin-left:auto;margin-right:auto}.article-body pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:26px;border-radius:14px;background:var(--surface-raised);border-left:3px solid var(--accent);color:var(--ink);font-size:14px;line-height:1.85}.article-sources{max-width:730px;margin:48px auto 0;border-top:1px solid var(--rule);padding-top:24px}.article-sources ol{padding-left:23px;margin-top:18px}.article-sources li{margin:13px 0;font-size:15px;line-height:1.6}.work-jump a{font-size:14px;min-height:40px;display:flex;align-items:center;border-bottom:1px solid var(--rule)}.article-sources a,.article-body sup a{color:var(--accent-soft);text-decoration:underline;text-underline-offset:4px}.article-body sup{font-size:12px;margin-left:4px}.article-related{max-width:1000px}
/* Lab is a small personal proof point, not another large dark panel. */
/* Invitation + real form: transport and persistence are unchanged. */
.contact-section{padding-block:115px 58px}.contact-craft{display:grid;grid-template-columns:.85fr 1.15fr;gap:68px;align-items:start;border-top:1px solid var(--rule);padding-top:55px}.contact-welcome>p:not(.engagement-note){font-size:17px;line-height:1.7;max-width:440px;color:var(--muted);margin:22px 0 0}@media(min-width:761px){.contact-welcome{position:sticky;top:112px}}.contact-welcome .contact-socials{display:flex;flex-wrap:wrap;gap:17px;margin:28px 0 32px}.writing-feature-copy h3 a{text-decoration:none}.writing-card h3>a{text-decoration:none}.contact-welcome .contact-socials a{display:flex;align-items:center;gap:6px;font-size:14px;line-height:1.5;color:var(--ink-soft)}.engagement-note{font-size:12px;color:var(--subtle);line-height:1.7}
.contact-form-shell{padding:30px;margin:0;border:0;border-radius:22px;background:var(--surface-raised);box-shadow:none;backdrop-filter:none}.contact-form-panel{display:block}.field input,.field select,.field textarea{background:var(--surface);border-color:var(--rule-strong);border-radius:8px}.field label{font-size:14px}.contact-form-panel .form-submit{gap:16px}.site-footer{padding-block:15px 28px}.footer-inner{font-size:12px}.footer-inner>div{gap:20px}
/* Portfolio index and case-study narratives. */
.work-index-main{padding-top:150px;padding-bottom:70px}.work-index-hero{padding-top:18px;padding-bottom:54px}.work-index-hero h1{font-size:var(--type-h1);line-height:1.04;letter-spacing:var(--tracking-display)}.work-jump{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:27px}.portfolio-group{margin-top:90px}.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.foundation-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.compact-card{background:transparent;border:0;border-top:2px solid var(--rule);padding:24px 0;border-radius:0;box-shadow:none;transition:none}.compact-card:hover{transform:none;background:transparent;box-shadow:none}.compact-brand{font-size:25px;line-height:1.3;margin:0 0 14px}.compact-brand .product-logo{height:37px;max-width:50px}.compact-description{font-size:15px;line-height:1.8;min-height:0;color:var(--muted)}.compact-detail{margin-top:18px}.compact-detail summary{font-size:13px;line-height:1.6;min-height:36px}.qalam-status{font-size:12px;color:var(--muted);margin-top:15px}
.domain-group{margin-top:75px}.domain-card{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:32px 0;background:none;border-block:1px solid var(--rule);border-inline:0;border-radius:0;box-shadow:none}.domain-card details{margin-top:22px}.domain-card summary{font-size:14px;cursor:pointer}.work-index-end{margin-top:80px}
.case-hero{padding-top:35px}.case-hero .back-link{font-size:14px;margin-bottom:40px}.case-heading-grid .overline{display:none}.case-heading-grid h1{font-size:var(--type-h1);line-height:1.1}.case-heading-grid .case-headline{font-size:24px;line-height:1.5;max-width:650px}.case-heading-grid>div>p:not(.case-headline){font-size:16px;line-height:1.8}.case-heading-grid .development-note{background:none;border:0;font-size:13px;padding:0;color:var(--product-accent)}.case-hero>.product-capture{margin-top:45px;max-width:1120px;margin-inline:auto;border:0;border-radius:18px}
.case-story{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:start;margin-top:65px}.role-line{padding-top:28px;margin-top:26px;border-top:1px solid var(--rule);margin-bottom:16px}.case-visual-column{min-width:0}.case-decisions{display:grid;grid-template-columns:1.2fr 1fr;gap:75px;margin-block:70px}.case-decisions article{padding-top:25px;border-top:1px solid var(--rule)}.case-decisions article:first-child{border-color:var(--product-accent)}.case-sequence .sequence-panel{background:transparent;border:0;padding:30px 0;box-shadow:none}.case-sequence .overline{display:none}.sequence-steps li{border-left-color:var(--rule)}.case-next>a:first-child{background:transparent;border-block:1px solid var(--rule);border-radius:0;padding:30px 0;display:flex;align-items:center;justify-content:space-between}.case-writing{display:flex;gap:15px;align-items:center;font-size:15px;color:var(--muted);margin-top:25px}
/* A few visible motion moments. No canvas, carousel or global switch. */
@media(max-width:1100px){.contact-craft{gap:40px}.case-story{gap:35px}.case-decisions{gap:40px}}
@media(max-width:760px){.section{padding-top:70px}.hero .hero-intro{font-size:15px}.hero .hero-overline{font-size:var(--text-caption)}.section-heading{gap:24px;align-items:flex-start}.work-intro h2{font-size:var(--type-h2)}.section-heading p:not(.overline){font-size:15px}.work-intro>.text-link{font-size:13px;white-space:nowrap;gap:10px}.all-work-link .icon{flex-shrink:0}.case-next .icon{flex-shrink:0}.all-work-link{font-size:15px;line-height:1.6;margin-top:35px;padding-block:20px;gap:20px}.expertise-areas{grid-template-columns:1fr;gap:22px;margin:30px 0 50px}.expertise-area{padding-bottom:22px;gap:17px}.expertise-area h3{font-size:var(--type-h4)}.expertise-area p{font-size:14px}.expertise-area a{font-size:12px;flex-wrap:wrap}.writing-feature-copy h3{font-size:var(--type-h3)}.contact-form-panel>h3{font-size:var(--type-h3)}.domain-card h3{font-size:29px}.contact-welcome>img{margin-bottom:20px}.writing-feature-copy p{font-size:15px}.article-body p{font-size:17px}.work-index-hero>p{font-size:16px}.domain-card p{font-size:15px}.case-context>p{font-size:16px}.case-decisions p{font-size:16px}
.writing-feature{grid-template-columns:1fr;gap:23px;padding:25px 0}.writing-feature-copy>span{font-size:13px}.writing-section .section-heading{align-items:flex-start}.writing-section .section-heading .text-link{font-size:13px;max-width:140px}.writing-index .writing-card h3{font-size:var(--type-h3)}.article-body h2{font-size:var(--type-h3)}.article-body pre{padding:20px;font-size:13px}.article-sources li{font-size:14px}
.contact-section{padding-block:74px 35px}.contact-craft{grid-template-columns:1fr;gap:34px;padding-top:33px}.contact-welcome h2{font-size:var(--type-h2)}.contact-welcome>p:not(.engagement-note){font-size:16px;margin-top:22px}.contact-welcome .contact-socials{margin-block:22px}.contact-form-shell{padding:27px 20px;border-radius:17px}.footer-inner{gap:20px}.footer-inner>div{flex-wrap:wrap;gap:18px}
.work-index-main{padding-top:113px}.work-index-hero{padding-bottom:40px}.work-index-hero h1{font-size:var(--type-h1)}.work-jump{gap:8px 18px}.work-jump a{font-size:13px}.work-index-flagships>h2,.portfolio-group>h2,.domain-group>h2{font-size:29px}.portfolio-group{margin-top:60px}.compact-grid,.foundation-grid{grid-template-columns:1fr 1fr;gap:22px 25px}.compact-brand{font-size:24px}.compact-description{font-size:14px}.domain-card{grid-template-columns:1fr;gap:25px}.domain-group{margin-top:60px}.work-index-end{margin-top:55px}
.case-heading-grid{gap:30px}.case-heading-grid h1{font-size:var(--type-h1)}.case-heading-grid .case-headline{font-size:21px}.case-story{grid-template-columns:1fr;gap:33px;margin-top:40px}.case-context h2,.case-decisions h2{font-size:var(--type-h3)}.case-hero>.product-capture{margin-top:28px}.case-decisions{grid-template-columns:1fr;gap:30px;margin-block:42px}.case-sequence .sequence-panel{padding-top:10px}.case-sequence h2{font-size:var(--type-h3)}.case-next strong{font-size:30px}.case-writing{font-size:14px;line-height:1.6}
}
@media(max-width:430px){.compact-grid,.foundation-grid{grid-template-columns:1fr}.contact-form-shell{padding:23px 17px}.work-intro h2{font-size:var(--type-h2)}.work-intro>.text-link{font-size:12px}.case-heading-grid .product-identity .product-logo{height:53px;max-width:66px}.case-heading-grid h1{font-size:var(--type-h1)}.published-article h1{font-size:var(--type-h1)}}
@media(max-width:760px){.hero-name{font-size:17px}.hero-resume{font-size:13px;padding-inline:0}.project-proof{grid-template-columns:1fr;gap:13px;margin-top:18px}.project-proof dd{font-size:13px}}
@media(max-width:430px){.project-status{font-size:var(--text-caption)}}
/* Optical sizing and legacy component normalization. */
.writing-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}.writing-heading h2{font-size:var(--type-h2);line-height:1.1;letter-spacing:var(--tracking-display)}.article-body h2{font-size:var(--type-h3);margin-bottom:20px}.writing-section .section-heading h2{font-size:var(--type-h2)}.writing-feature{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;border:0}.writing-art{min-height:340px;position:relative;padding:42px;background:#ded6f0;color:#2f2247;display:flex;flex-direction:column;justify-content:space-between;border-radius:5px 38px 38px 5px;overflow:hidden;text-decoration:none}.writing-art::after{content:"";position:absolute;right:-55px;bottom:-115px;width:290px;height:290px;border:1px solid #ab91d6;border-radius:50%;box-shadow:0 0 0 22px #cbbbe8,0 0 0 23px #ab91d6;opacity:.5;pointer-events:none}.article-art-word{font-size:clamp(32px,4.2vw,58px);line-height:1.05;font-weight:650;letter-spacing:-.045em;position:relative;z-index:1}.article-art-route{font-size:13px;display:flex;gap:14px;align-items:center;position:relative;z-index:1}.article-art-route i{font-style:normal;color:#73579b}.writing-feature-copy>span{font-size:12px;color:var(--muted)}.writing-drafts li span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.field label span{font-size:var(--text-caption)}.case-context .tags span{font-size:12px;padding:5px 9px}.compact-card .tags span{font-size:var(--text-caption);padding:5px 0;margin-right:10px;background:transparent;border:0;color:var(--muted)}.writing-feature-copy h3{font-size:var(--type-h3);line-height:1.18;letter-spacing:var(--tracking-display);margin:18px 0}.writing-index .writing-card h3{font-size:var(--type-h3);max-width:770px}.writing-feature-copy p{font-size:16px;line-height:1.7;color:var(--muted)}.article-body p{font-size:18px;line-height:1.85;color:var(--muted);margin:0 0 22px}.writing-feature-copy>.text-link{margin-top:24px}.writing-drafts{margin:36px 0 0;border-top:1px solid var(--rule);padding-top:22px;color:var(--muted)}.writing-drafts summary{cursor:pointer;padding:8px 0;min-height:44px}.writing-drafts li{font-size:16px}.writing-card{background:none;border:0;box-shadow:none;padding:36px 0}.writing-index .writing-card{background:none;border:0;box-shadow:none;padding:25px 0;border-bottom:1px solid var(--rule);min-height:0;border-radius:0;gap:15px}.writing-grid{display:block}.writing-index .writing-grid{grid-template-columns:1fr}.writing-context{border:0;background:none;padding:40px 0}.writing-context .text-link{margin-top:20px;margin-right:24px}.article-code{margin:28px 0;border:1px solid var(--rule);background:var(--surface);border-radius:16px;overflow:hidden}.article-code pre{padding:22px;font-size:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}.article-citation{color:var(--accent-soft);text-underline-offset:4px}.article-sources li{margin-top:14px}.article-body{max-width:780px;margin:50px auto 0}.article-body>section{margin:48px 0}
@media(max-width:760px){.writing-feature{grid-template-columns:1fr;gap:25px}.writing-art{min-height:270px;padding:30px;border-radius:24px}.article-art-word{font-size:44px}.writing-heading{align-items:start}.writing-heading h2{font-size:var(--type-h2);max-width:240px}.writing-heading>.text-link{white-space:nowrap;font-size:12px;margin-top:8px}.writing-feature-copy h3{font-size:var(--type-h3)}.writing-feature-copy p{font-size:15px}.article-body p{font-size:16px;line-height:1.8}.article-body h2{font-size:var(--type-h3)}.article-code pre{font-size:12px;padding:16px}.contact-form-panel{min-width:0}}
@media(max-width:400px){.writing-heading{display:block}.writing-heading>.text-link{margin-top:18px}}
.compact-artwork{margin:0 0 22px}.compact-artwork figcaption{font-size:var(--text-caption);color:var(--muted);line-height:1.4;margin:8px 0 0}.portfolio-group .compact-visual{grid-column:span 2}.compact-visual .compact-description{max-width:600px}.compact-visual .compact-detail{max-width:700px}@media(max-width:760px){.portfolio-group .compact-visual{grid-column:auto}}
/* Reserve a separate baseline for illustration disclosure; do not overlap flow labels. */

/* Agent workspaces are a separate tool class, not a fifth coding CLI. */
.article-dates{color:var(--muted);font-size:14px;line-height:1.6}.domain-card details p{margin-top:16px}.writing-section .section-heading>div>p{display:none}
/* Keep verified tool marks visible without turning the toolbox into a logo wall. */
.writing-feature-reduced{display:block;max-width:760px;padding-block:28px}
.writing-feature-reduced .writing-feature-copy{max-width:680px}
.writing-feature-reduced .writing-feature-copy h3{margin-top:12px}
.writing-feature-reduced .article-review-note{margin-top:12px}
@media(max-width:600px){.writing-feature-reduced{padding-block:22px}}
/* Tools sit on the page ground. Each mark gets a small light tile so dark logos (GitHub, Next.js, Cursor) stay legible. */
}

@layer site,overrides;
@layer site{
/* Shared layout refinements and Arabic shaping. No translated content in CSS. */
html[dir=rtl] body{line-height:1.9}
html[dir=rtl] :is(h1,h2,h3,h4,.overline,.brand-name,.article-art-word,.hero-line){line-height:1.55}
html[dir=rtl] :is(input,textarea,select,button,summary){font-family:inherit}
bdi{unicode-bidi:isolate}bdi[dir=ltr]{direction:ltr}
.language-switch{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:10px;border-radius:9px;font-size:14px;white-space:nowrap;color:var(--muted);flex-shrink:0;transition:color .2s}.language-switch:hover{color:var(--ink)}
.nav-shell{gap:18px}.desktop-nav{gap:22px}.nav-actions{gap:12px}.nav-resume{display:none}
.hero{overflow:hidden;padding-bottom:28px;min-height:750px}
.hero-grid{position:relative;z-index:2}
.hero-city-layer{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-city{display:block;width:100%;height:100%;transform:translateY(var(--city-depth,0px)) scale(1.025);transform-origin:center;will-change:transform}
.hero-city img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-city-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,12,24,.94),rgba(5,12,24,.55) 45%,rgba(5,12,24,.2))}
/* The skyline and its shade fade out rather than ending on a solid colour, so the page glow continues underneath without a seam. */
.hero-city-layer,.hero-city-overlay{-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
html[dir=rtl] .hero-city-overlay{transform:scaleX(-1)}
.hero-copy{position:relative;z-index:3}.hero h1{text-shadow:0 2px 16px #0005}.hero .portrait-aura{opacity:.18}.hero .portrait-stage{z-index:2}.hero .hero-portrait{filter:drop-shadow(0 22px 25px #0004)}
.hero-city-layer::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 77% 64%,#a4884733,transparent 46%);opacity:.3;animation:city-light 22s ease-in-out infinite alternate}
@keyframes city-light{from{opacity:.15}to{opacity:.45}}
.expertise-section .section-heading{margin-bottom:28px}.expertise-areas{gap:24px 38px}.expertise-area h3{font-size:var(--type-h4)}.expertise-area p{font-size:15px;max-width:46ch}.writing-feature-copy h3{font-size:var(--type-h3)}
.writing-heading h2{font-size:var(--type-h2);max-width:none}.writing-heading .overline{margin-bottom:12px}.writing-intro{color:var(--muted);font-size:16px;margin-top:16px;max-width:40ch}.writing-section{padding-bottom:8px}.writing-feature{padding-top:14px;gap:48px}.writing-art{min-height:340px}.draft-label{font-size:var(--text-caption);color:var(--muted)}.article-review-note{margin-top:14px}
html[dir=rtl] .hero-city{transform:scaleX(-1) translateY(var(--city-depth,0px)) scale(1.025)}
html[dir=rtl] .hero h1{font-size:var(--type-h1);line-height:1.52}
html[dir=rtl] .hero .hero-intro{line-height:1.95;font-size:16px}
html[dir=rtl] .hero-overline{letter-spacing:0;font-size:var(--text-caption)}
html[dir=rtl] .portrait-stage{direction:ltr}
html[dir=rtl] .hero-socials{justify-content:flex-start}
html[dir=rtl] .brand-name{font-size:14px}
html[dir=rtl] .brand-name small{letter-spacing:0;font-size:var(--text-caption)}
html[dir=rtl] .desktop-nav a{font-size:12px}
html[dir=rtl] .section-heading h2{font-size:var(--type-h2);line-height:1.6}
html[dir=rtl] .expertise-area h3{font-size:var(--type-h4);line-height:1.6}
html[dir=rtl] .expertise-area p{font-size:15px;line-height:1.95}
html[dir=rtl] .tags{direction:rtl}
html[dir=rtl] .sequence-steps{padding-inline-start:0}
html[dir=rtl] .writing-art{border-radius:38px 5px 5px 38px}
html[dir=rtl] .article-art-word{font-size:clamp(36px,4vw,56px);line-height:1.65}
html[dir=rtl] .article-art-route i{transform:scaleX(-1)}
html[dir=rtl] .writing-feature-copy h3{font-size:var(--type-h3);line-height:1.65}
html[dir=rtl] .published-article h1{font-size:var(--type-h1);line-height:1.65}
html[dir=rtl] .article-body{max-width:780px}
html[dir=rtl] .article-body h2{font-size:var(--type-h3);line-height:1.7}
html[dir=rtl] .article-body p{font-size:18px;line-height:2.05}
html[dir=rtl] .article-code pre{font-family:inherit;font-size:16px;text-align:right;direction:rtl;line-height:2}
html[dir=rtl] .case-headline{line-height:1.75}
html[dir=rtl] .form-submit p{line-height:1.9}
html[dir=rtl] .mobile-panel{right:auto;left:0;text-align:right}
html[dir=rtl] .back-link .icon,html[dir=rtl] .text-link>.icon{transform:scaleX(-1)}
html[dir=rtl] .reading-progress span{transform-origin:right}
html[dir=rtl] .article-sources ol{padding-inline-start:24px}
html[dir=rtl] .footer-inner{gap:20px}
:where(.hero-grid,.human-layout,.contact-craft,.case-heading-grid)>*{min-width:0}
@media(min-width:761px) and (max-width:1100px){.desktop-nav{gap:14px}.nav-shell{gap:12px}.brand-name small{display:none}.nav-actions>.button{display:none}html[dir=rtl] .hero h1{font-size:var(--type-h1)}.hero{min-height:710px}.hero-grid{gap:0}}
@media(max-width:760px){
 .hero{padding-top:118px;min-height:0;padding-bottom:0}.hero-grid{min-height:0}.hero-copy{margin-top:0}.hero-city-layer{inset:0 0 0}.hero-city img{object-position:center 75%}
 html[dir=rtl] 
 .nav-shell{gap:8px;padding-inline:12px}.nav-actions{margin-inline-start:auto}.nav-actions>.button{display:none}.language-switch{font-size:12px;min-height:40px;padding-inline:9px}.mobile-menu{margin-left:0;margin-inline-start:2px}.brand-name small{display:none}.brand{gap:9px}.brand-name{font-size:12px}.mobile-menu summary{font-size:var(--text-caption);gap:8px}
 .section{padding-top:64px}.writing-heading h2{max-width:none;font-size:var(--type-h2)}.writing-feature-copy h3{font-size:var(--type-h3)}.writing-art{min-height:265px}.writing-heading{flex-wrap:wrap}.writing-heading .text-link{margin-top:8px}
 html[dir=rtl] .hero h1{font-size:var(--type-h1);line-height:1.6;margin-block:12px 16px}html[dir=rtl] .hero .hero-line{white-space:normal}
 html[dir=rtl] .hero .hero-intro{font-size:15px;line-height:2}html[dir=rtl] .hero .hero-overline{font-size:var(--text-caption)}html[dir=rtl] .hero-actions .button{font-size:12px;padding-inline:14px}
 html[dir=rtl] .brand-name{font-size:13px}html[dir=rtl] .expertise-area h3{font-size:var(--type-h4)}html[dir=rtl] .writing-heading h2{font-size:var(--type-h2)}html[dir=rtl] .writing-feature-copy h3{font-size:var(--type-h3)}html[dir=rtl] .writing-art{border-radius:24px}html[dir=rtl] .article-art-word{font-size:37px}html[dir=rtl] .article-body p{font-size:16px;line-height:2.1}html[dir=rtl] .article-body h2{font-size:var(--type-h3)}html[dir=rtl] .published-article h1{font-size:var(--type-h1)}html[dir=rtl] .article-code pre{font-size:14px}html[dir=rtl] .case-heading-grid h1{font-size:var(--type-h1)}html[dir=rtl] .case-headline{font-size:26px}html[dir=rtl] .writing-hero h1{font-size:var(--type-h1)}
}
@media(max-width:360px){.brand-name{display:none}.nav-shell{gap:5px}.mobile-menu summary{font-size:var(--text-caption)}.language-switch{font-size:var(--text-caption)}.hero-actions{gap:10px}html[dir=rtl] .hero h1{font-size:var(--type-h1)}}
@media(prefers-reduced-motion:reduce){.hero-city,.hero-city-layer::after{will-change:auto}.hero-city{transform:none}html[dir=rtl] .hero-city{transform:scaleX(-1)}}
/* Longer Arabic badge stays above the portrait's face at compact widths. */
}
@layer overrides{
html[dir=rtl] :is(h1,h2,h3,h4,.overline,.brand-name,.article-art-word,.hero-line){letter-spacing:0}
.article-review-note{font-size:12px;color:var(--muted)}
@media(max-width:760px){.nav-actions{display:flex}
}
@media(prefers-reduced-motion:reduce){.hero-city,.hero-city-layer::after{animation:none}}
}

@layer site,overrides;
@layer site{
/* Targeted migration refinements. The approved composition remains in the existing stylesheets. */
.fa-responsive{gap:12px;min-width:0}
.fa-symbol{width:47px;height:36px;flex:0 0 47px;object-fit:contain;transform:none;filter:none}
.fa-responsive .brand-name{font-weight:750;font-size:15px;line-height:1.3}
.fa-responsive .brand-name small{display:block;font-size:var(--text-caption);font-weight:450;line-height:1.55;color:var(--muted);letter-spacing:0}
.fa-footer .brand-name small{font-size:var(--text-caption);line-height:1.6;color:var(--ink-soft);white-space:nowrap}
[dir=rtl] .fa-responsive .brand-name small{font-size:var(--text-caption)}
.writing-drafts{margin-block-start:24px;border-block-start:1px solid var(--line,#30425b);padding-block-start:16px}
.writing-drafts summary{cursor:pointer;font-size:14px;color:var(--muted,#acbcd0)}
.writing-drafts ul{padding-inline-start:18px;display:grid;gap:10px}
.writing-drafts li{font-size:14px;line-height:1.6;color:var(--muted,#acbcd0)}
.writing-drafts li span{display:inline-block;margin-inline-end:12px;font-size:var(--text-caption)}
.article-review-note{font-size:13px;color:var(--muted);border-inline-start:2px solid var(--rule-strong);padding-inline-start:12px}
.contact-socials{margin-top:22px}
.contact-form [aria-invalid=true]{border-color:#e4a594}
.contact-form[aria-busy=true]{cursor:progress}
.contact-form button:disabled{cursor:wait;opacity:.7}
@media(max-width:540px){.fa-responsive .brand-name small{display:none}.fa-responsive .brand-name{font-size:13px}.fa-symbol{width:36px;height:30px;flex-basis:36px}.fa-responsive{gap:8px}}

/* B2.1 Inset Cut: external SVGs have explicit tones, never mirror the symbol. */
.fa-navbar .brand-name{font-weight:700;font-size:15px;white-space:nowrap}
.fa-footer .brand-name{font-size:14px}
[dir=rtl] .fa-navbar .brand-name,[dir=rtl] .fa-footer .brand-name{font-weight:700;letter-spacing:0}
[dir=rtl] .fa-footer .brand-name small{font-size:var(--text-caption);font-weight:500;white-space:normal}
.contact-island{min-width:0;grid-column:2;grid-row:1/4}
.footer-inner>.fa-footer{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
@media(max-width:540px){.fa-navbar .brand-name{font-size:13px}.fa-footer .brand-name small{display:block;font-size:var(--text-caption)}.footer-inner>.fa-footer{margin-bottom:16px}}

.contact-reply{border:0;padding:0;margin:20px 0;min-width:0}.contact-reply legend{font-size:14px;line-height:1.7;margin-bottom:12px}.contact-verification{margin:20px 0;min-height:65px;max-width:100%}.contact-verification>div{max-width:100%}.contact-verification p{font-size:13px;line-height:1.7}.contact-verification button{color:inherit;text-decoration:underline;background:none;border:0;cursor:pointer}.contact-form button:disabled{opacity:.55;cursor:not-allowed}

/* Launch polish: readable prose and grouped product identities. */
.hero h1.hero-heading{font-size:var(--type-h1);line-height:1.14}
.hero-heading .hero-line{display:block;white-space:normal}
.hero-heading .hero-phrase{white-space:nowrap}
.hero .hero-intro,.expertise-area>p{font-size:17px;line-height:1.8;color:var(--muted)}
html[dir=rtl] .hero h1.hero-heading{font-size:var(--type-h1);line-height:1.55}
html[dir=rtl] :is(.hero .hero-intro,.expertise-area>p){font-size:18px;line-height:2;letter-spacing:0}
.mobile-menu summary,.hero-socials a{min-width:44px;min-height:44px}
@media(max-width:760px){
 .hero h1.hero-heading{font-size:var(--type-h1)}
 .hero .hero-intro,.expertise-area>p{font-size:16px}
 html[dir=rtl] .hero h1.hero-heading{font-size:var(--type-h1)}
 html[dir=rtl] :is(.hero .hero-intro,.expertise-area>p){font-size:17px}
}

/* Every tool uses the same icon slot and label placement. */

/* Contact receipt replaces the form after confirmed persistence. */
/* Receipt entrance: card rises in, the ring and check draw, then the copy follows.
   Stroke lengths are normalised with pathLength="1". Reduced motion keeps the static card. */
@media(max-width:600px){
 .hero .hero-socials{margin-top:14px}
}

}
@layer overrides{
@media(prefers-reduced-motion:reduce){#app *,#app *::before,#app *::after{scroll-behavior:auto}}
.fa-responsive .fa-symbol{transform:none}
}

@layer site,overrides;
@layer site{
/* cairo-arabic-wght-normal */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(../fonts/cairo-arabic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

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

/* cairo-latin-wght-normal */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(../fonts/cairo-latin-wght-normal.woff2) format('woff2-variations');
  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;
}
/* Shared public Arabic typography: retain natural Arabic letter spacing. */
:lang(ar){font-family:'Cairo',Tahoma,Arial,sans-serif}
html[lang=ar] body{font-family:'Cairo',Tahoma,Arial,sans-serif;font-weight:400;line-height:2}
html[lang=ar] :is(p,li,dd,blockquote){font-weight:400;line-height:2}
html[lang=ar] :is(h1,h2){font-weight:800;line-height:1.55}
html[lang=ar] :is(h3,h4,h5,h6){font-weight:700;line-height:1.6}
html[lang=ar] :is(h1,h2,h3,h4,h5,h6) :is(span,bdi,em,strong){font-weight:inherit}
html[lang=ar] :is(button,input,select,textarea,summary){font-family:'Cairo',Tahoma,Arial,sans-serif}
html[lang=ar] :is(nav a,button,.button,label,legend,summary,.overline,.hero-name,.hero-overline,.language-switch,.text-link,.hero-resume,.footer-links a,.eyebrow,.brand-name,.brand){font-weight:600}
html[lang=ar] :is(input,select,textarea,small,.tags span,.tech-item,.tech-item bdi,.project-status,.draft-label,.career-notes span,.career-notes small,.credibility-strip small){font-weight:500}
html[lang=ar] :is(.hero .hero-intro,.expertise-area p,.article-body p,.summary,.body p){font-weight:400;line-height:2}
html[lang=ar] :is(.article-body,.body) a{text-decoration:underline;text-underline-offset:.2em}
html[lang=ar] :is(.tech-group h4,dt,th){font-weight:600}
}
@layer overrides{
html[lang=ar] *{letter-spacing:0}
}

@layer site,overrides;
@layer site{
/* Product gallery: actual interfaces, consistent geometry, quiet typography. */
.product-gallery{--gallery-ink:#edf3f8;--gallery-muted:#a9b8c8;--gallery-line:var(--rule);--gallery-accent:#9fc9dc;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 36px;align-items:start}
.product-card{min-width:0;scroll-margin-top:110px;color:var(--gallery-ink);border-top:1px solid var(--gallery-line);padding-top:20px}
.product-card-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;margin-bottom:18px}
.product-card-name{display:flex;align-items:center;gap:12px;min-width:0}
.product-card-name h3{font-size:var(--type-h3);line-height:1.25;letter-spacing:var(--tracking-display);margin:0;font-weight:600}
.product-card-heading>p{color:var(--gallery-muted);font-size:12px;line-height:1.5;margin:0;text-align:end}
.product-card-name .product-logo{width:36px;height:36px;max-width:36px;object-fit:contain;flex-shrink:0;border-radius:6px}
.product-card-name .mark-manaqil{background:#f4f1e9;padding:3px}
.product-preview{margin:0;min-width:0}
.product-preview-trigger{display:block;position:relative;aspect-ratio:16/10;background:#f1f3f4;border:1px solid #ffffff16;border-radius:10px;overflow:hidden;isolation:isolate}
/* The responsive <picture> adds no box; the image lays out as the trigger's own child. */
.product-preview-trigger>picture{display:contents}
.product-preview-trigger>:where(picture)>img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0;transform:none}
.product-preview-zoom{position:absolute;inset-inline-end:12px;bottom:12px;display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffff60;border-radius:8px;background:#091525ec;color:white;transition:background .2s}
.product-preview-trigger:hover .product-preview-zoom{background:#244659}
.product-preview>figcaption{font-size:var(--text-caption);line-height:1.6;color:var(--muted);margin-top:10px}
.product-card-copy{display:flex;flex-direction:column;align-items:start;padding-top:16px;min-height:125px}
.product-card-copy>p{font-size:16px;line-height:1.7;color:var(--ink-soft);margin:0;max-width:58ch}
.product-card-copy .product-card-link{display:inline-flex;align-items:center;gap:16px;color:var(--ink-soft);min-height:44px;font-size:13px;font-weight:600;margin-top:9px;text-decoration:none}
.product-card-link:hover{text-decoration:underline;text-underline-offset:5px}
.product-preview-trigger:focus-visible,.product-card-link:focus-visible,.product-lightbox button:focus-visible{outline:2px solid #9fc9dc;outline-offset:5px}
.product-lightbox{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(1440px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--rule-strong);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 32px 120px #0009;overflow:auto}
.product-lightbox::backdrop{background:#030912e8;backdrop-filter:blur(6px)}
.product-lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}
.product-lightbox-header strong{font-size:18px;font-weight:600}
.product-lightbox-header p{font-size:12px;line-height:1.5;margin:4px 0 0;color:var(--muted)}
.product-lightbox-header button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--rule-strong);border-radius:8px;background:transparent;color:var(--ink);font-size:30px;cursor:pointer;line-height:1}
.product-lightbox>img{display:block;object-fit:contain;width:100%;height:auto;max-height:calc(100dvh - 140px);background:#e9edf1}
html:has(.product-lightbox[open]){overflow:hidden}
.case-app-capture{width:100%;min-width:0;margin-top:32px}
.case-app-capture .product-preview-trigger{aspect-ratio:auto}
.case-app-capture .product-preview-trigger>:where(picture)>img{height:auto;max-height:720px;object-fit:contain}
.work-intro{margin-bottom:34px;align-items:end}
@media(min-width:961px){.work-index-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr);column-gap:64px;align-items:end}.work-index-hero>:not(.work-jump){grid-column:1}.work-index-hero>.work-jump{grid-column:2;grid-row:1/span 2;flex-direction:column;gap:0;margin:0 0 24px;border-top:1px solid var(--line)}.work-index-hero>.work-jump a{min-height:48px;font-size:15px;border-bottom:1px solid var(--line)}}
.compact-brand{min-height:40px}.compact-brand .project-category-icon{display:grid;place-items:center;width:37px;height:37px;flex-shrink:0}@media(max-width:760px){.work-intro{align-items:flex-start}}
.work-intro h2{font-size:var(--type-h2);letter-spacing:var(--tracking-display);line-height:1.15}
.work-intro .overline{font-size:var(--text-caption);letter-spacing:.1em}
.work-intro>div>p:not(.overline){font-size:15px;line-height:1.7;max-width:54ch}
.work-index-hero h1{font-size:var(--type-h1);max-width:900px;line-height:1.1}
.work-index-hero>p{font-size:16px;line-height:1.8;max-width:660px}
.work-index-flagships>h2,.portfolio-group>h2,.domain-group>h2{font-size:28px;line-height:1.35;margin-bottom:28px}
.compact-grid-small{margin-top:38px;grid-template-columns:repeat(2,minmax(0,1fr))}
.compact-brand{font-size:23px}
html[lang=ar] .product-card-name h3{font-size:var(--type-h3);line-height:1.5;font-weight:700}
html[lang=ar] .product-card-heading>p{line-height:1.7}
html[lang=ar] .product-card-copy>p{line-height:1.9;font-size:16px}
html[lang=ar] .product-preview>figcaption{font-size:12px}
html[lang=ar] .work-intro h2{font-size:var(--type-h2);line-height:1.5}
html[lang=ar] .work-index-hero h1{font-size:var(--type-h1);line-height:1.5}
@media(max-width:1000px){.product-gallery{gap:40px 24px}.product-card-heading{align-items:start;flex-direction:column;gap:6px}.product-card-heading>p{max-width:none;text-align:start}.product-card-name h3{font-size:var(--type-h3)}.product-card-name{gap:9px}}
@media(max-width:700px){
 .product-gallery{grid-template-columns:minmax(0,1fr);gap:32px}
 .product-card{padding-top:18px}
 .product-card-heading{flex-direction:row;align-items:center;margin-bottom:15px}
 .product-card-heading>p{max-width:145px;font-size:var(--text-caption)}
 .product-card-name h3{font-size:var(--type-h3)}
 .product-card-copy{min-height:0;padding-top:13px}
 .product-card-copy>p{font-size:15px}
 .product-card-copy .product-card-link{margin-top:6px}
 .product-preview>figcaption{font-size:var(--text-caption)}
 .product-preview-zoom{width:32px;height:32px;bottom:8px;inset-inline-end:8px}
 .product-lightbox{width:calc(100vw - 20px);max-height:calc(100dvh - 24px)}
 .product-lightbox-header{padding:12px}
 .product-lightbox-header p{font-size:var(--text-caption)}
 .product-lightbox>img{max-height:calc(100dvh - 140px)}
 .compact-grid-small{grid-template-columns:1fr;gap:12px}
 html[lang=ar] .product-card-name h3{font-size:var(--type-h3)}
 html[lang=ar] .product-card-copy>p{font-size:15px}
 html[lang=ar] .product-preview>figcaption{font-size:var(--text-caption)}
}
@media(prefers-reduced-motion:reduce){.product-preview-zoom{transition:none}}
}

@layer site,overrides;
@layer site{
/*
  Phone corrections. Loaded last so these rules settle what the earlier layered sheets leave inconsistent.
*/

/* Lab figures share one baseline even when one label wraps to two lines. */

/* A lone last milestone spans the row instead of leaving an empty cell beside it. */

/* Forward arrows point forward in Arabic too. */
html[dir=rtl] .button .icon{transform:scaleX(-1)}
html[dir=rtl] .button:hover .icon{transform:scaleX(-1) translateX(3px)}

@media (max-width:760px){
  /* A solid bar flush with the top edge: no strip above it where the page scrolls through. */
  :root{scroll-padding-top:76px}
  .site-header{inset:0 0 auto}
  .site-header>.wrap{width:100%}
  .nav-shell{min-height:60px;border-width:0 0 1px;border-radius:0;padding:8px 10px 8px 18px;background:var(--bg);box-shadow:0 10px 24px -18px rgba(0,0,0,.9)}
  html[dir=rtl] .nav-shell{padding:8px 18px 8px 10px}
  /* The menu drops just under the bar, inset from the screen edge like the bar's own controls. */
  .mobile-panel{top:calc(100% + 8px);right:10px}
  html[dir=rtl] .mobile-panel{right:auto;left:10px}
  .hero-city-overlay,html[dir=rtl] .hero-city-overlay{background:linear-gradient(180deg,rgba(5,12,24,.94),rgba(5,12,24,.8) 41%,rgba(5,12,24,.1) 70%,var(--bg) 100%)}

  /* Hero as one screen: the portrait leads, centred and cut at the waist, and the name is set over its
     faded foot, instead of a full-screen photo stranded below the buttons. */
  .hero{padding-top:68px}
  .hero-grid{gap:0}
  .hero .portrait-stage,html[dir=rtl] .hero .portrait-stage{order:-1;width:100%;height:min(87vw,340px);margin:0 0 -64px;z-index:1;overflow:hidden;-webkit-mask-image:linear-gradient(#000 58%,transparent 100%);mask-image:linear-gradient(#000 58%,transparent 100%)}
  .hero .hero-portrait{top:-6px;left:7%;right:auto;width:86%;max-width:none;-webkit-mask-image:none;mask-image:none}
  .hero .portrait-aura{inset:6% 4% 0}
  .hero-copy{position:relative;z-index:3}
  .hero-name,.hero-overline{text-shadow:0 1px 10px var(--bg),0 0 2px var(--bg)}

  /* The hero already shows the portrait; the second large photo only lengthened the page. */

  /* Tools read as compact chips instead of two screens of icon tiles. */
}
}

@layer site,overrides;
@layer site{
@font-face{font-family:'Caveat';font-style:normal;font-display:swap;font-weight:400 700;src:url(../fonts/caveat-latin-wght-normal.woff2) format('woff2-variations')}
@font-face{font-family:'Aref Ruqaa';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/aref-ruqaa-arabic-700-normal.woff2) format('woff2')}
/* Signature edition. Loaded last: the homepage structure (featured work, ledger, lab board, slip) and its two interactive moments. Values come from tokens.css. */

/* ── Language flip: switching English ⇄ Arabic mirrors the page in place ──
   Only navigations marked "lang-flip" (scripts/language-flip.mjs) use this; every other page change keeps the quick crossfade. */
@media(prefers-reduced-motion:no-preference){
 .site-header .brand{view-transition-name:site-brand}
 .site-header .nav-actions{view-transition-name:site-actions}
 .hero .portrait-stage{view-transition-name:hero-portrait}
 .hero #hero-title{view-transition-name:hero-title}
 html{--flip-dx:-6%}
 html[dir=rtl]{--flip-dx:6%}
 html:active-view-transition-type(lang-flip)::view-transition-group(*){animation-duration:.8s;animation-timing-function:cubic-bezier(.65,0,.25,1)}
 html:active-view-transition-type(lang-flip)::view-transition-old(root){animation:flip-out .42s cubic-bezier(.4,0,1,1) both}
 html:active-view-transition-type(lang-flip)::view-transition-new(root){animation:flip-in .6s cubic-bezier(0,0,.2,1) .18s both}
 html:active-view-transition-type(lang-flip)::view-transition-old(hero-title){animation:flip-blur-out .36s ease-in both}
 html:active-view-transition-type(lang-flip)::view-transition-new(hero-title){animation:flip-blur-in .5s ease-out .3s both}
}
@keyframes flip-out{to{opacity:0;transform:translateX(var(--flip-dx));filter:blur(4px)}}
@keyframes flip-in{from{opacity:0;transform:translateX(calc(var(--flip-dx) * -1));filter:blur(4px)}}
@keyframes flip-blur-out{to{opacity:0;filter:blur(10px)}}
@keyframes flip-blur-in{from{opacity:0;filter:blur(10px)}}

/* ── Contact: a tighter section around the compact form ───────────────── */
.contact-section{padding-block:88px 48px}
.contact-craft{gap:56px;padding-top:44px}
@media(max-width:760px){.contact-section{padding-block:64px 32px}.contact-craft{gap:28px;padding-top:28px}}

/* ── Handwritten notes: a few true asides in the canary ink ──────────── */
.hand-note{position:absolute;z-index:4;display:inline-flex;align-items:flex-end;gap:2px;color:var(--canary);pointer-events:none;white-space:nowrap}
.hand-note-text{font-family:'Caveat',cursive;font-size:30px;font-weight:600;line-height:1;transform:rotate(-5deg)}
html[lang=ar] .hand-note-text{font-family:'Aref Ruqaa',var(--font-arabic);font-size:27px;font-weight:700;line-height:1.3;transform:rotate(-4deg)}
.hand-note-arrow{flex:0 0 auto;width:52px;height:auto}
.hand-note-hero .hand-note-arrow{transform:rotate(150deg)}
.hand-note-lab .hand-note-arrow{transform:rotate(60deg)}
.hand-note-live .hand-note-arrow{transform:rotate(55deg)}
html[dir=rtl] .hand-note-arrow{transform:scaleX(-1)}
html[dir=rtl] .hand-note-hero .hand-note-arrow{transform:scaleX(-1) rotate(150deg)}
html[dir=rtl] .hand-note-lab .hand-note-arrow{transform:scaleX(-1) rotate(60deg)}
html[dir=rtl] .hand-note-live .hand-note-arrow{transform:scaleX(-1) rotate(55deg)}
.hand-note-hero{top:44%;inset-inline-end:-6%;flex-direction:column-reverse;align-items:center}
.hand-note-lab{top:-40px;inset-inline-end:18px}
.lab-board{position:relative}
.product-device{position:relative}
.hand-note-live{top:-44px;inset-inline-start:28px}
@media(max-width:760px){.hand-note-hero{top:auto;bottom:34%;inset-inline-end:2%}.hand-note-text{font-size:25px}html[lang=ar] .hand-note-text{font-size:22px}}

/* ── How I work: the tools as a logo wall, names kept as text ────────── */
.toolbox{margin-top:0}
.toolbox-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.toolbox-heading h3{font-size:var(--type-h3);letter-spacing:var(--tracking-display);line-height:1.3}
.toolbox-heading p{font-size:var(--text-small);line-height:1.6;color:var(--muted)}
.toolbox-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px;padding-top:28px}
.toolbox-group h4{margin:0 0 14px;font-size:var(--text-small);font-weight:500;line-height:1.6;color:var(--muted)}
.toolbox-group ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:18px 12px}
.toolbox-tool{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center;font-size:12px;line-height:1.35;color:var(--muted)}
.toolbox-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:#dfe6ee;transition:transform .25s var(--ease),background .25s}
.toolbox-mark img{width:36px;height:36px;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.72;transition:filter .25s,opacity .25s}
.toolbox-tool:hover .toolbox-mark{transform:translateY(-3px);background:#f4f7fb}
.toolbox-tool:hover .toolbox-mark img{filter:none;opacity:1}
.toolbox-tool:hover{color:var(--ink)}
.toolbox-tool bdi{max-width:100%;overflow-wrap:anywhere}
html[lang=ar] .toolbox-group h4{font-size:15px;font-weight:600}
@media(max-width:900px){.toolbox-wall{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.toolbox-group ul{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}.toolbox-mark{width:56px;height:56px;border-radius:14px}.toolbox-mark img{width:30px;height:30px}}

/* ── Hero: the skyline follows the real time in Riyadh ───────────────── */
/* The skyline images carry the real light, so the old glow and colour washes are gone. The current phase fades in over night. */
.hero-city-layer::after{display:none}
.hero-city-phase{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.hero-city-phase.is-shown{opacity:1}
/* Place line: where, since when, and the live Riyadh time. */
.hero-place{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 20px;font-family:var(--font-mono);font-size:var(--text-caption);line-height:1.6;color:var(--muted)}
.hero-place>*+*::before{content:"·";margin-inline-end:10px;color:var(--subtle)}
.hero-place time{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.hero-place time:empty{display:none}
html[lang=ar] .hero-place{font-family:var(--font-arabic);font-size:13px}
html[lang=ar] .hero-place bdi{font-family:var(--font-mono);font-size:var(--text-caption)}
/* The name is the display type, set behind the portrait like a magazine cover; the rest of the copy stays above it. */
.hero .hero-copy{z-index:auto}
.hero .hero-copy>*{position:relative;z-index:3}
.hero .hero-copy>.hero-name{z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0 0 26px}
.hero .hero-name>span{display:block;font-size:clamp(64px,10.4vw,172px);line-height:.9;font-weight:700;letter-spacing:-.05em;color:var(--ink);white-space:nowrap}
html[lang=ar] .hero .hero-name>span{font-weight:800;letter-spacing:0;line-height:1.15}
.hero .hero-name>a{font-size:18px}
/* The name leads now; every legacy headline rule reads --type-h1, so the hero redefines it. */
.hero{--type-h1:clamp(26px,1.4vw + 16px,38px)}
html[lang=ar] .hero{--type-h1:clamp(24px,1.2vw + 16px,34px)}
.hero .hero-socials{display:none}
@media(min-width:761px){.hero-city-overlay{background:linear-gradient(90deg,rgba(5,12,24,.94),rgba(5,12,24,.5) 42%,rgba(5,12,24,.04))}.hero-city-layer,.hero-city-overlay{-webkit-mask-image:linear-gradient(#000 40%,transparent 82%);mask-image:linear-gradient(#000 40%,transparent 82%)}}
@media(max-width:760px){.hero .hero-name>span{font-size:16vw;white-space:normal;line-height:.92}}
@media(prefers-reduced-motion:reduce){.hero-city-phase{transition:none}}
@media(max-width:760px){.hero-city-overlay,html[dir=rtl] .hero-city-overlay{background:linear-gradient(180deg,rgba(5,12,24,.9),rgba(5,12,24,.55) 30%,rgba(5,12,24,.72) 44%,rgba(5,12,24,.86) 70%,var(--bg) 100%)}}

/* ── About: story beside the live lab board, the career as a paper ledger ─ */
.about-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:48px 72px;align-items:start;border-top:1px solid var(--rule);padding-top:64px}
.about-story h2{font-size:var(--type-h2);line-height:1.1;letter-spacing:var(--tracking-display);margin:0 0 26px;max-width:18ch}
.about-story>p{font-size:17px;line-height:1.85;color:var(--ink-soft);max-width:62ch;margin:0 0 16px}
.about-story>.text-link{margin-top:8px}
.lab-board{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:28px}
.lab-board-intro h3{font-size:var(--type-h4);line-height:1.4;letter-spacing:-.01em}
.lab-board-intro p{font-size:var(--text-small);line-height:1.7;color:var(--muted);margin-top:6px}
.lab-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rule)}
.lab-facts>div{display:flex;flex-direction:column-reverse;gap:4px}
.lab-facts dt{font-size:var(--text-caption);line-height:1.6;color:var(--muted)}
.lab-facts dd{margin:0;font-size:32px;line-height:1.1;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.lab-live{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.lab-live[hidden]{display:none}
.lab-live-title{display:flex;align-items:center;gap:10px;font-size:var(--text-small);font-weight:600;color:var(--ink)}
.lab-pulse{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--live);animation:lab-pulse 2.4s ease-out infinite}
@keyframes lab-pulse{0%{box-shadow:0 0 0 0 rgba(100,219,161,.55)}70%,100%{box-shadow:0 0 0 9px rgba(100,219,161,0)}}
.lab-live dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:14px 0 0}
.lab-live dt{font-size:var(--text-caption);line-height:1.6;color:var(--muted)}
.lab-live dd{margin:2px 0 0;font-family:var(--font-mono);font-size:15px;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums}
.career-ledger{grid-column:1/-1;list-style:none;margin:0;padding:30px 12px 26px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--paper-sheet);color:var(--carbon);border-radius:3px;box-shadow:0 22px 50px #00000080;-webkit-mask:radial-gradient(circle at 8px 0,#0000 4px,#000 4.5px) 0 0/16px 100% repeat-x;mask:radial-gradient(circle at 8px 0,#0000 4px,#000 4.5px) 0 0/16px 100% repeat-x}
.career-ledger li{display:flex;flex-direction:column;gap:4px;padding:2px 18px;min-width:0}
.career-ledger li+li{border-inline-start:1px dashed var(--carbon-rule)}
.ledger-when{align-self:flex-start;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--carbon-soft);margin-bottom:6px}
.career-ledger strong{font-size:16px;line-height:1.45;font-weight:600;color:var(--carbon)}
.career-ledger small{font-size:13px;line-height:1.5;color:var(--carbon-soft)}
html[lang=ar] .ledger-when{font-family:var(--font-arabic);font-size:14px}
html[lang=ar] .lab-facts dd{font-weight:700;font-family:var(--font-sans)}
.career-ledger li[data-current] .ledger-when{color:var(--carbon);background:linear-gradient(transparent 55%,var(--canary) 55%);padding-inline:4px}
html[lang=ar] .career-ledger strong{font-size:15px;line-height:1.8}
html[lang=ar] .about-story h2{line-height:1.6}
@media(max-width:960px){.about-layout{grid-template-columns:minmax(0,1fr);padding-top:44px}}
@media(max-width:760px){
 .career-ledger{grid-template-columns:minmax(0,1fr);padding:28px 20px 18px}
 .career-ledger li{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:2px 14px;padding:12px 0}
 .career-ledger li+li{border-inline-start:0;border-top:1px dashed var(--carbon-rule)}
 .career-ledger li>:not(.ledger-when){grid-column:2}
 .ledger-when{grid-row:1/span 2;margin:0}
 .lab-board{padding:22px}
}
@media(prefers-reduced-motion:reduce){.lab-pulse{animation:none}}

/* ── Work ───────────────────────────────────────────────────────────── */
.product-card-heading>p{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.product-status{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-caption);line-height:1.4;color:var(--muted);white-space:nowrap}
.product-status::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--subtle)}
.product-status[data-status=live]{color:var(--live)}
.product-status[data-status=live]::before{background:var(--live);border-color:var(--live)}
@media(max-width:1000px){.product-card-heading>p{align-items:flex-start}}
@media(max-width:700px){.product-card-heading>p{align-items:flex-end}}
/* Homepage: each product gets a full-width row, its screen in a device frame, sides alternating. */
.product-features{display:flex;flex-direction:column;gap:clamp(72px,9vw,132px)}
.product-feature{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.product-device{min-width:0;box-shadow:0 44px 90px -36px #000000d9,0 0 0 1px var(--rule-strong)}
.product-device-browser{background:#0d1a2b;border-radius:14px;padding:0 8px 8px}
.product-device-bar{display:flex;gap:7px;align-items:center;height:34px;padding-inline:8px}
.product-device-bar i{width:10px;height:10px;border-radius:50%;background:#ffffff26}
.product-device-tablet{background:#070b12;border-radius:30px;padding:18px}
.product-device .product-preview-trigger{border:0;border-radius:8px}
.product-device-tablet .product-preview-trigger{border-radius:12px;aspect-ratio:16/10}
.product-device .product-preview>figcaption{margin:0;padding:10px 6px 2px}
.product-feature:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)}
.product-feature:nth-child(even)>.product-device{order:2}
.product-feature-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.product-feature-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 14px;font-size:var(--text-caption);color:var(--muted)}
.product-feature .product-card-name h3{font-size:var(--type-h2);line-height:1.1;letter-spacing:var(--tracking-display)}
.product-feature .product-card-name .product-logo{width:48px;height:48px;max-width:48px}
.product-feature .product-feature-description{margin:18px 0 0;font-size:var(--text-lead);line-height:1.75;color:var(--ink)}
.product-feature .project-proof{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:22px 0 8px;width:100%;border:0;padding:0}
.product-feature .product-card-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:6px;font-size:14px;font-weight:600;color:var(--ink)}
.product-feature .product-card-link:hover{color:var(--accent-soft)}
.product-feature .project-proof>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:16px;padding:11px 0;border-top:1px solid var(--rule)}
.product-feature .project-proof dt{font-size:var(--text-caption);line-height:1.8;color:var(--subtle);text-transform:none;letter-spacing:0;font-weight:500}
.product-feature .project-proof div>dd{margin:0;font-size:var(--text-small);line-height:1.7;color:var(--ink-soft)}
html[lang=ar] .product-feature .product-card-name h3{line-height:1.5}
@media(max-width:960px){
 .product-feature,.product-feature:nth-child(even){grid-template-columns:minmax(0,1fr)}
 .product-feature:nth-child(even)>.product-device{order:0}
 .product-device-tablet{padding:10px;border-radius:20px}
}
@media(max-width:700px){.product-feature .project-proof>div{grid-template-columns:minmax(0,1fr);gap:2px}}
/* ── Request replay: a request travels the case study's stations as the walkthrough plays ── */
.replay-track{--replay-p:calc(max(var(--replay-step,-1),0) / max(var(--replay-count) - 1,1));position:relative;margin:34px 0 10px}
.replay-rail{position:absolute;top:7px;inset-inline:calc(100% / (2 * var(--replay-count)));height:2px;background:var(--rule)}
.replay-fill{position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--replay-p) * 100%);background:linear-gradient(90deg,#38bdf880,var(--accent));transition:width 1.25s cubic-bezier(.65,0,.35,1)}
html[dir=rtl] .replay-fill{background:linear-gradient(270deg,#38bdf880,var(--accent))}
.replay-packet{position:absolute;top:50%;inset-inline-start:calc(var(--replay-p) * 100%);width:14px;height:14px;margin-inline-start:-7px;margin-top:-7px;border-radius:50%;background:#e6f7ff;box-shadow:0 0 0 5px #38bdf833,0 0 22px 4px #38bdf8cc;opacity:clamp(0,calc(var(--replay-step,-1) + 1),1);transition:inset-inline-start 1.25s cubic-bezier(.65,0,.35,1),opacity .3s}
.replay-stations{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--replay-count),minmax(0,1fr))}
.replay-track .replay-stations li{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;min-width:0}
.replay-dot{width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--rule-strong);transition:background .3s,border-color .3s,transform .3s}
.replay-track .replay-stations li>strong{font-size:13px;font-weight:500;line-height:1.35;color:var(--muted);transition:color .3s}
.replay-stations .node-complete .replay-dot{background:#38bdf866;border-color:var(--accent-soft)}
.replay-stations .node-active .replay-dot{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
.replay-track .replay-stations .node-active>strong{color:var(--ink)}
@media(max-width:700px){.replay-track .replay-stations li>strong{font-size:12px}}
}
/* About vignettes: three small ink drawings with handwritten captions under the story. */
.about-vignettes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.about-vignettes figure{margin:0;text-align:center}
.about-vignettes img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:14px;border:1px solid var(--rule)}
.about-vignettes figcaption{margin-top:10px;font-family:'Caveat',cursive;font-size:22px;font-weight:600;line-height:1;color:var(--canary);transform:rotate(-3deg)}
html[lang=ar] .about-vignettes figcaption{font-family:'Aref Ruqaa',var(--font-arabic);font-size:20px;line-height:1.4}
@media(max-width:760px){.about-vignettes{gap:10px;margin-top:28px}.about-vignettes figcaption{font-size:19px}html[lang=ar] .about-vignettes figcaption{font-size:16px}}
/* Case-study cover: generated ink art full-bleed behind the heading, fading into the page on the text side. */
.case-hero{position:relative;isolation:isolate;padding-top:clamp(140px,19vw,270px)}
.case-cover{position:absolute;z-index:-1;top:-124px;bottom:-40px;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.case-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:75% 40%}
.case-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(5,12,24,.75) 78%),linear-gradient(90deg,var(--bg) 8%,rgba(5,12,24,.82) 34%,rgba(5,12,24,.1) 68%)}
html[dir=rtl] .case-cover img{transform:scaleX(-1)}
html[dir=rtl] .case-cover::after{background:linear-gradient(transparent 50%,rgba(5,12,24,.75) 78%),linear-gradient(270deg,var(--bg) 8%,rgba(5,12,24,.82) 34%,rgba(5,12,24,.1) 68%)}
@media(max-width:760px){
 .case-hero{padding-top:0}
 .case-cover{position:relative;top:auto;bottom:auto;display:block;aspect-ratio:5/4;left:auto;width:auto;transform:none;margin:-40px calc(50% - 50vw) -36px}
 .case-cover img{object-position:center}
 .case-cover::after,html[dir=rtl] .case-cover::after{background:linear-gradient(transparent 55%,var(--bg))}
}