/* rabiie.com — one stylesheet, no build step.
   Layers: reset < tokens < base < components < utilities. RTL/LTR via logical properties. */
@layer reset, tokens, base, components, utilities;

/* =============================================================== tokens */
@layer tokens {
  :root {
    /* TBC: derive --brand-h / --brand-c from the logo colour (TODO-CONFIRM #4) */
    --brand-h: 250;
    --brand-c: 0.16;
    --brand-100: oklch(94.5% calc(var(--brand-c) * 0.25) var(--brand-h));
    --brand-200: oklch(89% calc(var(--brand-c) * 0.45) var(--brand-h));
    --brand-300: oklch(80% calc(var(--brand-c) * 0.7) var(--brand-h));
    --brand-600: oklch(50% var(--brand-c) var(--brand-h));
    --brand-700: oklch(43% calc(var(--brand-c) * 0.92) var(--brand-h));
    --brand-800: oklch(35% calc(var(--brand-c) * 0.8) var(--brand-h));
    --brand-900: oklch(27% calc(var(--brand-c) * 0.65) var(--brand-h));

    --ink: oklch(20% 0.01 260);
    --ink-muted: oklch(42% 0.015 260);
    --ink-subtle: oklch(50% 0.015 260);
    --surface: oklch(99.4% 0.002 260);
    --surface-raised: oklch(100% 0 0);
    --surface-sunken: oklch(97% 0.004 260);
    --border: oklch(89% 0.008 260);
    --border-strong: oklch(78% 0.01 260);
    --focus: var(--brand-600);
    --link: var(--brand-700);
    --link-hover: var(--brand-900);
    --action: var(--brand-600);
    --action-hover: var(--brand-700);
    --on-brand: #fff;
    --success: oklch(52% 0.13 150);
    --warning: oklch(62% 0.15 70);
    --danger: oklch(52% 0.19 27);

    --font-sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
    --step-0: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
    --step-2: clamp(1.4rem, 1.27rem + 0.6vw, 1.75rem);
    --step-3: clamp(1.65rem, 1.43rem + 1.05vw, 2.25rem);
    --step-4: clamp(2rem, 1.6rem + 1.9vw, 3.15rem);

    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem;
    --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem;

    --content-max: 1200px;
    --gutter: 16px;
    --section-y: var(--space-8);
    --header-h: 64px;
    --radius-sm: 6px;
    --radius: 12px;
    --dur: 200ms;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @media (min-width: 768px) { :root { --gutter: 24px; } }
  @media (min-width: 1024px) { :root { --section-y: var(--space-9); --header-h: 72px; } }
  @media (min-width: 1280px) { :root { --section-y: var(--space-10); } }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --ink: oklch(95% 0.005 260); --ink-muted: oklch(79% 0.012 260); --ink-subtle: oklch(72% 0.012 260);
      --surface: oklch(17% 0.01 260); --surface-raised: oklch(21% 0.012 260); --surface-sunken: oklch(14.5% 0.01 260);
      --border: oklch(31% 0.012 260); --border-strong: oklch(42% 0.014 260);
      --focus: var(--brand-300); --link: var(--brand-300); --link-hover: var(--brand-200);
      --action: var(--brand-300); --action-hover: var(--brand-200); --on-brand: oklch(18% 0.02 260);
    }
  }
  :root[data-theme='dark'] {
    --ink: oklch(95% 0.005 260); --ink-muted: oklch(79% 0.012 260); --ink-subtle: oklch(72% 0.012 260);
    --surface: oklch(17% 0.01 260); --surface-raised: oklch(21% 0.012 260); --surface-sunken: oklch(14.5% 0.01 260);
    --border: oklch(31% 0.012 260); --border-strong: oklch(42% 0.014 260);
    --focus: var(--brand-300); --link: var(--brand-300); --link-hover: var(--brand-200);
    --action: var(--brand-300); --action-hover: var(--brand-200); --on-brand: oklch(18% 0.02 260);
    color-scheme: dark;
  }
  :root[data-theme='light'] { color-scheme: light; }
}

/* =============================================================== reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, picture { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
}

/* =============================================================== base */
@layer base {
  html { color-scheme: light dark; scroll-padding-block-start: var(--space-9); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    min-height: 100vh;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  html:lang(ar) body { line-height: 1.8; }
  h1, h2, h3 { font-weight: 600; line-height: 1.2; color: var(--ink); text-wrap: balance; overflow-wrap: break-word; }
  html:lang(ar) :is(h1, h2, h3) { line-height: 1.35; }
  html:lang(en) :is(h1, h2) { letter-spacing: -0.015em; }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-1); }
  p { text-wrap: pretty; }
  a { color: var(--link); text-underline-offset: 0.2em; }
  a:hover { color: var(--link-hover); }
  code, pre { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
  main:focus { outline: none; }
  [hidden] { display: none !important; }
}

/* =============================================================== components */
@layer components {
  /* ---- header */
  .site-header {
    position: sticky; inset-block-start: 0; z-index: 50;
    background: color-mix(in oklch, var(--surface) 94%, transparent);
    border-block-end: 1px solid transparent;
    transition: transform 250ms var(--ease), border-color var(--dur) var(--ease);
  }
  @supports (backdrop-filter: blur(8px)) { .site-header { backdrop-filter: saturate(1.4) blur(8px); } }
  .site-header.is-scrolled { border-block-end-color: var(--border); }
  .site-header.is-hidden { transform: translateY(-100%); }
  .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); }
  .brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; color: var(--ink); text-decoration: none; font-weight: 700; }
  .brand img { height: 32px; width: auto; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; min-width: 44px;
    padding-inline: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface-raised); font-weight: 500; cursor: pointer;
  }
  .menu-toggle .i-close { display: none; }
  .is-open .menu-toggle .i-close { display: inline-block; }
  .is-open .menu-toggle .i-open { display: none; }
  .menu__links { display: flex; gap: var(--space-1); margin: 0; }
  .menu__links a {
    display: flex; align-items: center; min-height: 44px; padding-inline: var(--space-3);
    border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 500;
  }
  .menu__links a:hover { background: var(--surface-sunken); color: var(--ink); }
  .menu__links a[aria-current] { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
  .menu__actions { display: flex; align-items: center; gap: var(--space-2); }
  .lang-switch {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
    padding-inline: var(--space-3); border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; text-decoration: none;
  }
  .lang-switch:hover { background: var(--surface-sunken); color: var(--ink); }
  .theme-toggle { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
  .theme-toggle:hover { background: var(--surface-sunken); }
  .theme-toggle svg { display: none; }
  .theme-toggle[data-mode='auto'] .t-auto, .theme-toggle[data-mode='light'] .t-light, .theme-toggle[data-mode='dark'] .t-dark { display: inline-block; }

  @media (max-width: 1023.98px) {
    html:not(.js) .menu-toggle { display: none; }
    html:not(.js) .bar { flex-wrap: wrap; }
    html.js .menu { display: none; }
    html.js .is-open .menu { display: block; }
    .menu {
      position: absolute; inset-inline: 0; inset-block-start: 100%;
      max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
      padding: var(--space-4) var(--gutter) var(--space-6);
      background: var(--surface); border-block-end: 1px solid var(--border);
    }
    html:not(.js) .menu { position: static; width: 100%; padding-inline: 0; }
    .menu__links { flex-direction: column; gap: 0; }
    .menu__links a { min-height: 48px; padding-inline: 0; border-block-end: 1px solid var(--border); border-radius: 0; font-size: var(--step-1); }
    .menu__actions { flex-wrap: wrap; margin-block-start: var(--space-5); }
  }
  @media (min-width: 1024px) {
    .menu-toggle { display: none; }
    .menu { display: flex; align-items: center; gap: var(--space-5); }
  }

  /* ---- icons */
  .icon { flex: none; display: inline-block; vertical-align: middle; }
  [dir='rtl'] .icon--dir { transform: scaleX(-1); }

  /* ---- buttons + links */
  .btn {
    --_bg: transparent; --_fg: var(--ink); --_bd: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px; padding-inline: var(--space-5); border: 1px solid var(--_bd); border-radius: var(--radius-sm);
    background: var(--_bg); color: var(--_fg); font-weight: 600; font-size: var(--step-0); line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .btn:hover { color: var(--_fg); }
  .btn--sm { padding-inline: var(--space-4); font-size: var(--step--1); }
  .btn--lg { min-height: 52px; padding-inline: var(--space-6); }
  .btn--primary { --_bg: var(--action); --_fg: var(--on-brand); --_bd: var(--action); }
  .btn--primary:hover { --_bg: var(--action-hover); --_bd: var(--action-hover); }
  .btn--secondary { --_bd: var(--border-strong); --_bg: var(--surface-raised); }
  .btn--secondary:hover { --_bd: var(--ink); }
  .btn[aria-busy='true'] { opacity: 0.75; cursor: progress; }
  .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 600; text-decoration: none; color: var(--link); }
  .link-arrow:hover span { text-decoration: underline; }

  /* ---- section header */
  .section-header { display: grid; gap: var(--space-3); margin-block-end: var(--space-7); }
  .section-header h1, .section-header h2 { max-width: 28ch; }
  .eyebrow { display: flex; align-items: center; gap: var(--space-3); font-size: var(--step--1); color: var(--ink-muted); }
  .eyebrow::before { content: ''; inline-size: var(--space-6); block-size: 1px; background: var(--border-strong); }
  .eyebrow__index { font-family: var(--font-mono); color: var(--link); }
  .mono { font-family: var(--font-mono); }
  html:lang(ar) .mono-ui { font-family: var(--font-sans); }

  /* ---- cards */
  .card, .work-card {
    position: relative; display: flex; flex-direction: column; background: var(--surface-raised);
    border: 1px solid var(--border); border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .card { gap: var(--space-3); padding: var(--space-6); }
  .card:hover, .card:focus-within, .work-card:hover, .work-card:focus-within { border-color: var(--action); transform: translateY(-2px); }
  .card:has(.stretched:focus-visible), .work-card:has(.stretched:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .stretched { color: var(--ink); text-decoration: none; }
  .stretched::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  .stretched:focus-visible { outline: none; }
  .card-index { font-family: var(--font-mono); font-size: var(--step--1); color: var(--link); }
  .card h2, .card h3 { font-size: var(--step-1); }
  .card__problem { font-weight: 500; }
  .card__more { margin-block-start: auto; padding-block-start: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); color: var(--link); font-weight: 600; font-size: var(--step--1); }
  .work-card { overflow: hidden; }
  .work-card__media { aspect-ratio: 16 / 10; background: var(--surface-sunken); border-block-end: 1px solid var(--border); }
  .work-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .work-card__body { display: grid; gap: var(--space-3); padding: var(--space-5); }
  .work-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--step--1); color: var(--ink-muted); }
  .work-card h2, .work-card h3 { font-size: var(--step-1); }
  .tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
  .tag {
    display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--step--1);
    line-height: 1.5; color: var(--ink-muted); background: var(--surface); white-space: nowrap;
  }
  .tag--brand { border-color: color-mix(in oklch, var(--action) 35%, transparent); color: var(--link); background: color-mix(in oklch, var(--action) 7%, transparent); }
  .tag--warning { border-color: var(--warning); color: var(--ink); background: color-mix(in oklch, var(--warning) 14%, transparent); white-space: normal; }

  .grid-2, .grid-3 { display: grid; gap: var(--space-5); margin: 0; }
  @media (min-width: 768px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .after-cards { margin-block-start: var(--space-6); }

  /* ---- process */
  .process { display: grid; gap: var(--space-6); margin: 0; }
  @media (min-width: 768px) { .process { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .process { grid-template-columns: repeat(4, 1fr); } }
  .process li { display: grid; gap: var(--space-2); align-content: start; padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-strong); }
  .process .n { font-family: var(--font-mono); font-size: var(--step--1); color: var(--link); }

  /* ---- check lists */
  .checklist { display: grid; gap: var(--space-4); margin: 0; }
  .checklist li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); }
  .checklist .icon { color: var(--link); margin-block-start: 0.3em; }
  .principles { display: grid; gap: var(--space-6); margin: 0; }
  @media (min-width: 768px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .principles li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }
  .principles .icon { color: var(--link); margin-block-start: 0.25em; }
  .principles h3 { margin-block-end: var(--space-1); }
  .lined { display: grid; margin: 0; border-block-start: 1px solid var(--border); }
  @media (min-width: 768px) { .lined { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } }
  .lined li { padding-block: var(--space-3); border-block-end: 1px solid var(--border); }

  /* ---- two column section */
  .two-col { display: grid; gap: var(--space-2); }
  @media (min-width: 1024px) { .two-col { grid-template-columns: 4fr 8fr; gap: var(--space-8); } }
  .two-col > .section-header { margin-block-end: var(--space-5); }

  /* ---- FAQ */
  .faq { border-block-start: 1px solid var(--border); }
  .faq details { border-block-end: 1px solid var(--border); }
  .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding-block: var(--space-4); cursor: pointer; list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq h3 { font-size: var(--step-0); }
  .faq summary .icon { rotate: 90deg; transition: rotate var(--dur) var(--ease); }
  .faq details[open] summary .icon { rotate: -90deg; }
  .faq p { padding-block-end: var(--space-5); color: var(--ink-muted); max-width: 65ch; }

  /* ---- CTA band */
  .cta-band__inner {
    position: relative; overflow: hidden; display: grid; gap: var(--space-6);
    padding: var(--space-7) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised);
  }
  .cta-band__inner::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px);
    background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 70%);
  }
  .cta-band__inner > * { position: relative; }
  @media (min-width: 1024px) { .cta-band__inner { grid-template-columns: 1.4fr 1fr; align-items: end; padding: var(--space-8); } }
  .cta-band__text { display: grid; gap: var(--space-3); }
  .cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }

  /* ---- breadcrumb */
  .breadcrumb { padding-block-start: var(--space-5); font-size: var(--step--1); }
  .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; color: var(--ink-muted); }
  .breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
  .breadcrumb a { color: var(--ink-muted); }
  .breadcrumb [aria-current] { color: var(--ink); overflow-wrap: anywhere; }

  /* ---- hero */
  .hero { padding-block: var(--space-7) var(--space-8); }
  .hero__grid { display: grid; gap: var(--space-7); align-items: center; }
  @media (min-width: 768px) { .hero__grid { grid-template-columns: minmax(0, 1fr) 300px; } }
  @media (min-width: 1024px) { .hero { padding-block: var(--space-9) var(--space-10); } .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-8); } }
  .hero__text { display: grid; gap: var(--space-5); }
  .hero__eyebrow { font-size: var(--step--1); color: var(--link); font-weight: 500; }
  html:lang(en) .hero__eyebrow { font-family: var(--font-mono); }
  .hero h1 { max-width: 22ch; }
  html:lang(en) .hero h1 { max-width: 24ch; }
  .hero__proof { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-weight: 500; }
  .hero__proof .icon { color: var(--success); }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
  .portrait {
    justify-self: center; width: min(100%, 380px); max-width: 70vw; aspect-ratio: 5 / 6;
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-sunken);
  }
  @media (min-width: 768px) { .portrait { justify-self: end; max-width: none; } }
  .portrait img { width: 100%; height: 100%; object-fit: cover; }

  /* ---- page intro */
  .page-intro { padding-block-start: var(--space-7); }
  .lead { font-size: var(--step-1); color: var(--ink-muted); line-height: 1.6; max-width: 60ch; }
  html:lang(ar) .lead { line-height: 1.8; }
  .muted { color: var(--ink-muted); }
  .narrow { max-width: calc(800px + 2 * var(--gutter)); }

  /* ---- services hero */
  .svc-hero .container { display: grid; gap: var(--space-5); }
  .svc-hero h1 { max-width: 20ch; }
  .svc-eyebrow { font-size: var(--step--1); color: var(--link); }

  /* ---- work index */
  .filters { display: grid; gap: var(--space-4); margin-block-end: var(--space-6); padding-block: var(--space-4); border-block: 1px solid var(--border); }
  .filters fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); border: 0; padding: 0; margin: 0; }
  .filters legend { float: inline-start; margin-inline-end: var(--space-3); font-size: var(--step--1); color: var(--ink-muted); min-width: 5rem; }
  .chip { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-4); border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; font-size: var(--step--1); font-weight: 500; }
  .chip input { position: absolute; opacity: 0; pointer-events: none; }
  .chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--surface); }
  .chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .filters__count { font-size: var(--step--1); color: var(--ink-muted); }
  .other { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
  .other li { padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); }
  .row-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }

  /* ---- case study */
  .cs-hero { padding-block: var(--space-7) var(--space-6); }
  .cs-hero .container { display: grid; gap: var(--space-4); }
  .cs-hero h1 { max-width: 24ch; }
  .cs-cover { aspect-ratio: 16 / 10; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-sunken); }
  .cs-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .cs-summary { display: grid; gap: 0 var(--space-6); margin: 0; border-block-start: 1px solid var(--border); }
  @media (min-width: 768px) { .cs-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .cs-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .cs-summary > div { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-block-end: 1px solid var(--border); }
  .cs-summary dt { font-size: var(--step--1); color: var(--ink-muted); }
  .cs-summary dd { margin: 0; font-weight: 500; }
  .shot { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius); }
  .shot img { border-radius: var(--radius-sm); border: 1px solid var(--border); width: 100%; }
  .shot figcaption { font-size: var(--step--1); color: var(--ink-muted); }

  /* ---- about */
  .value { padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--action); font-weight: 500; }
  .timeline { margin: 0; display: grid; border-inline-start: 1px solid var(--border-strong); }
  .timeline li { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-4); padding-block: var(--space-4); padding-inline-start: var(--space-5); }
  .timeline li::before {
    content: ''; position: absolute; inset-inline-start: -5px; inset-block-start: calc(var(--space-4) + 0.6em);
    inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--action);
  }
  .timeline .label { color: var(--link); font-size: var(--step--1); padding-block-start: 0.3em; font-family: var(--font-mono); }
  .timeline h3 { margin-block-end: var(--space-1); }
  .skills { display: grid; gap: var(--space-6); }
  @media (min-width: 768px) { .skills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .skills > div { padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-strong); }
  .skills h3 { margin-block-end: var(--space-3); }
  .skills ul { margin: 0; display: grid; gap: var(--space-2); }
  .pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
  .pills li { padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .about-grid { display: grid; gap: var(--space-7); align-items: center; }
  @media (min-width: 1024px) { .about-grid { grid-template-columns: 7fr 4fr; } }
  .about-text { display: grid; gap: var(--space-4); max-width: 65ch; }
  .stack > * + * { margin-block-start: var(--space-5); }

  /* ---- contact */
  .contact-grid { display: grid; gap: var(--space-8); }
  @media (min-width: 1024px) { .contact-grid { grid-template-columns: 7fr 4fr; align-items: start; } .contact-aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-5)); } }
  .contact-main, .contact-aside { display: grid; gap: var(--space-5); }
  .panel { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); }
  .panel h2 { font-size: var(--step-1); margin-block-end: var(--space-4); }
  .steps { margin: 0; display: grid; gap: var(--space-3); }
  .steps li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-2); }
  .steps .mono { color: var(--link); font-size: var(--step--1); padding-block-start: 0.2em; }
  .direct { margin: 0; display: grid; gap: var(--space-2); }
  .direct a { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; color: var(--ink); text-decoration: none; }
  .direct a:hover { color: var(--link); }
  .direct a > span { display: grid; }
  .direct .label { font-size: var(--step--1); color: var(--ink-muted); }

  /* ---- form */
  .form { display: grid; gap: var(--space-5); }
  .form-grid { display: grid; gap: var(--space-5); }
  @media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } }
  .field { display: grid; gap: var(--space-2); }
  .field label { font-weight: 600; }
  .req { color: var(--danger); margin-inline-start: 0.2em; }
  .opt { font-weight: 400; color: var(--ink-muted); font-size: var(--step--1); margin-inline-start: 0.3em; }
  .help { font-size: var(--step--1); color: var(--ink-muted); }
  .field input, .field textarea, .field select {
    width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); line-height: 1.5;
  }
  .field textarea { resize: vertical; min-height: 160px; }
  .field [aria-invalid='true'], .check [aria-invalid='true'] { border-color: var(--danger); border-width: 2px; }
  .error { font-size: var(--step--1); font-weight: 500; color: var(--danger); }
  .error:empty { display: none; }
  .check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: start; }
  .check input { inline-size: 24px; block-size: 24px; margin-block-start: 0.2em; accent-color: var(--action); }
  .check .error { grid-column: 1 / -1; }
  .error-summary { padding: var(--space-4) var(--space-5); border: 2px solid var(--danger); border-radius: var(--radius-sm); }
  .error-summary ul { margin-block-start: var(--space-2); padding-inline-start: 1.2em; }
  .error-summary a { color: var(--danger); }
  .context { padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--action); background: var(--surface-sunken); }
  .success { padding: var(--space-5); border: 1px solid var(--success); border-inline-start-width: 4px; border-radius: var(--radius-sm); font-weight: 500; }
  .form-note { font-size: var(--step--1); color: var(--ink-muted); }

  /* ---- prose */
  .prose { max-width: 70ch; }
  .prose > * + * { margin-block-start: 1.15em; }
  .prose h2 { font-size: var(--step-2); margin-block-start: 2em; }
  .notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); }

  /* ---- footer */
  .site-footer { margin-block-start: var(--section-y); border-block-start: 1px solid var(--border); background: var(--surface-sunken); font-size: var(--step--1); }
  .footer-grid { display: grid; gap: var(--space-7) var(--space-6); padding-block: var(--space-8) var(--space-7); }
  @media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 0.8fr 1fr; } }
  .footer-brand { display: grid; gap: var(--space-4); align-content: start; max-width: 36ch; }
  .footer-brand img { height: 40px; width: auto; }
  .footer-title { font-size: var(--step--1); font-weight: 500; color: var(--ink-muted); margin-block-end: var(--space-3); }
  .site-footer ul { margin: 0; display: grid; gap: var(--space-1); }
  .site-footer ul a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; min-width: 44px; color: var(--ink); text-decoration: none; }
  .site-footer ul a:hover { color: var(--link); text-decoration: underline; }
  .footer-bottom { padding-block: var(--space-5); border-block-start: 1px solid var(--border); color: var(--ink-muted); }

  /* ---- WhatsApp (mobile only) */
  .wa-fab {
    position: fixed; inset-block-end: max(var(--space-4), env(safe-area-inset-bottom)); inset-inline-end: var(--space-4); z-index: 40;
    display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%;
    background: oklch(55% 0.13 155); color: #fff; box-shadow: 0 6px 16px oklch(20% 0.02 260 / 0.22);
  }
  .wa-fab:hover { color: #fff; background: oklch(49% 0.12 155); }
  @media (min-width: 768px) { .wa-fab { display: none; } }
  @media (max-width: 767.98px) { body:has(.wa-fab) { padding-block-end: calc(56px + var(--space-6)); } }

  /* ---- 404 */
  .nf { display: grid; gap: var(--space-4); padding-block: var(--space-7); }
  .nf .code { font-family: var(--font-mono); font-size: var(--step-4); color: var(--link); }
  .nf-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; }
  .nf-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
}

/* =============================================================== utilities */
@layer utilities {
  .container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .section { padding-block: var(--section-y); }
  .ruled { border-block-start: 1px solid var(--border); }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip-link {
    position: absolute; inset-inline-start: var(--space-4); inset-block-start: var(--space-3); z-index: 100;
    padding: var(--space-3) var(--space-4); background: var(--surface-raised); color: var(--ink);
    border: 2px solid var(--focus); border-radius: var(--radius-sm); transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }
  .tbc { outline: 2px dashed var(--warning); outline-offset: 2px; background: color-mix(in oklch, var(--warning) 12%, transparent); }
  .reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(12px); }
  .reveal-ready [data-reveal] { transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  .card:hover, .work-card:hover, .card:focus-within, .work-card:focus-within { transform: none; }
}

/* =====================================================================
   Brand layer (v3): colours from the identity (#81B803 green, #6C6C6C grey),
   white backgrounds, glass only as a light touch (header + hero facts).
   ===================================================================== */
@layer tokens {
  :root {
    --brand: #81b803;            /* identity green — accents, bars, icons on light tint */
    --brand-display: #6d9c02;    /* large headings (≥3:1 on white) */
    --brand-tint: #f3f8e6;
    --brand-tint-2: #e6f1cc;
    --identity-grey: #6c6c6c;
    --action: #5a8002;           /* buttons with white text (4.6:1) */
    --action-hover: #4d6e01;
    --on-brand: #ffffff;
    --link: #4d6e01;             /* 5.9:1 */
    --link-hover: #405c01;
    --focus: #5a8002;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #f7f8f6;
    --border: #e7e9e4;
    --border-strong: #cfd3cb;
    --ink: #17191c;
    --ink-muted: #55595f;
    --wa: #0f7b6f;               /* WhatsApp teal, darkened so white text passes AA (5.1:1) */
    --wa-hover: #0b6359;
    --mail: #d93025;
    --radius: 16px;
    --shadow-sm: 0 1px 2px rgba(23, 25, 28, 0.04), 0 2px 8px -2px rgba(23, 25, 28, 0.06);
    --shadow-md: 0 1px 2px rgba(23, 25, 28, 0.04), 0 14px 32px -16px rgba(23, 25, 28, 0.18);
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.9);
    --dot: rgba(23, 25, 28, 0.07);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --brand: #94d303; --brand-display: #94d303; --brand-tint: #1c2410; --brand-tint-2: #263313; --identity-grey: #a6a8ab;
      --action: #81b803; --action-hover: #94d303; --on-brand: #121500; --link: #a7e01c; --link-hover: #c2f04e; --focus: #94d303;
      --surface: #121416; --surface-raised: #181b1e; --surface-sunken: #0e1012; --border: #262a2e; --border-strong: #363b40;
      --ink: #eef0f2; --ink-muted: #a9adb3; --glass-bg: rgba(24, 27, 30, 0.72); --glass-border: rgba(255, 255, 255, 0.08); --dot: rgba(255, 255, 255, 0.06);
      --shadow-sm: none; --shadow-md: 0 14px 32px -16px rgba(0, 0, 0, 0.7);
    }
  }
  :root[data-theme='dark'] {
    --brand: #94d303; --brand-display: #94d303; --brand-tint: #1c2410; --brand-tint-2: #263313; --identity-grey: #a6a8ab;
    --action: #81b803; --action-hover: #94d303; --on-brand: #121500; --link: #a7e01c; --link-hover: #c2f04e; --focus: #94d303;
    --surface: #121416; --surface-raised: #181b1e; --surface-sunken: #0e1012; --border: #262a2e; --border-strong: #363b40;
    --ink: #eef0f2; --ink-muted: #a9adb3; --glass-bg: rgba(24, 27, 30, 0.72); --glass-border: rgba(255, 255, 255, 0.08); --dot: rgba(255, 255, 255, 0.06);
    --shadow-sm: none; --shadow-md: 0 14px 32px -16px rgba(0, 0, 0, 0.7);
  }
}

@layer components {
  ::selection { background: var(--brand-tint-2); }

  /* ---- glass: a touch, not a theme */
  .glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }

  /* ---- header: floating glass bar */
  .site-header { background: transparent; border: 0; padding-block-start: 12px; backdrop-filter: none; }
  .site-header.is-scrolled { border: 0; }
  .site-header .bar { padding-inline: var(--space-3); border-radius: 14px; min-height: 60px; }
  .site-header.is-scrolled .bar { box-shadow: 0 0 0 1px var(--border), var(--shadow-md); }
  @media (max-width: 1023.98px) {
    .menu { inset-inline: var(--gutter); inset-block-start: calc(100% + 8px); border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--surface-raised); }
    html:not(.js) .menu { border: 0; box-shadow: none; }
  }
  .menu__links a[aria-current] { color: var(--ink); text-decoration-color: var(--brand); text-decoration-thickness: 3px; }

  /* ---- icons */
  .ph, .ph-duotone { line-height: 1; display: inline-block; }
  .icon-badge {
    display: inline-grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 12px; flex: none;
    color: var(--link); background: var(--brand-tint); border: 1px solid var(--brand-tint-2);
  }

  /* ---- buttons */
  .btn { border-radius: 10px; }
  .btn--primary { box-shadow: 0 6px 16px -8px rgba(90, 128, 2, 0.7); }
  .btn--secondary { background: var(--surface-raised); border-color: var(--border-strong); }
  .btn--wa { --_bg: var(--wa); --_fg: #fff; --_bd: var(--wa); box-shadow: 0 6px 16px -8px rgba(18, 140, 126, 0.7); }
  .btn--wa:hover { --_bg: var(--wa-hover); --_bd: var(--wa-hover); }
  .btn--wa.btn--sm { padding-inline: var(--space-4); }

  /* ---- hero: centred identity block (as on the original site), with a faint dot pattern */
  .hero { position: relative; padding-block: var(--space-8) var(--space-8); text-align: center; overflow: clip; }
  .hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 20px 20px;
    mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, black, transparent 75%);
  }
  .hero__inner { display: grid; justify-items: center; gap: var(--space-4); max-width: 820px; }
  .avatar {
    position: relative; inline-size: 168px; block-size: 168px; border-radius: 50%; padding: 6px;
    background: conic-gradient(from 210deg, var(--brand), var(--brand-tint-2), var(--brand));
    box-shadow: var(--shadow-md);
  }
  .avatar img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; border: 4px solid var(--surface); background: var(--surface-sunken); }
  .hero__name { color: var(--identity-grey); font-weight: 600; font-size: var(--step-1); margin-block-start: var(--space-2); }
  .hero__title { color: var(--brand-display); font-size: clamp(2.3rem, 1.7rem + 2.8vw, 3.8rem); font-weight: 700; line-height: 1.2; max-width: none; }
  .hero__bio { color: var(--ink-muted); font-size: var(--step-0); max-width: 64ch; }
  html:lang(ar) .hero__bio { line-height: 2; }
  .hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-2) 0 0; }
  .hero__facts li { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: 999px; font-weight: 600; font-size: var(--step--1); }
  .hero__facts .ph-duotone { color: var(--link); }
  .hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-3); }
  .hero__direct { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-2); font-weight: 600; }
  .round { display: inline-grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; color: #fff; transition: transform var(--dur) var(--ease); }
  .round:hover { color: #fff; transform: translateY(-2px); }
  .round--wa { background: var(--wa); }
  .round--mail { background: var(--mail); }
  .svc-hero .hero__ctas, .cs-hero .hero__ctas { justify-content: flex-start; }

  /* ---- partner logos */
  .partners { padding-block: var(--space-4) var(--space-8); }
  .partners__inner { display: grid; gap: var(--space-5); }
  .partners h2 { font-size: var(--step-0); font-weight: 600; text-align: center; color: var(--identity-grey); }
  .partners ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
  @media (min-width: 640px) { .partners ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .partners ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  .partners li { display: grid; place-items: center; block-size: 88px; padding: var(--space-3); border-radius: 12px; border: 1px solid var(--border); background: var(--surface-raised); }
  .partners img { max-block-size: 52px; max-inline-size: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .partners li:hover img { filter: none; opacity: 1; }

  /* ---- section headers: identity green accent */
  .eyebrow::before { background: var(--brand); block-size: 2px; inline-size: 28px; }
  .eyebrow__index { color: var(--link); }

  /* ---- cards: white, hairline border, soft lift */
  .card, .work-card, .process li, .principles li, .panel { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
  .card { padding: var(--space-6); }
  .card__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-2); }
  .card-index { color: var(--ink-muted); }
  .card:hover, .work-card:hover, .card:focus-within, .work-card:focus-within { border-color: var(--brand); box-shadow: var(--shadow-md); }
  .card__more { color: var(--link); }

  /* ---- portfolio: identical frames for every project */
  .grid-3 > li { display: flex; }
  .grid-3 > li > .work-card { flex: 1; }
  .work-card__media { position: relative; aspect-ratio: 4 / 3; border-block-end: 1px solid var(--border); overflow: hidden; background: var(--surface-sunken); }
  .work-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 600ms var(--ease); }
  .work-card:hover .work-card__media img { transform: scale(1.03); }
  .work-card__body { flex: 1; align-content: start; }
  .cs-cover { aspect-ratio: 4 / 3; width: 100%; box-shadow: var(--shadow-md); }
  @media (min-width: 1024px) { .cs-cover { aspect-ratio: 16 / 9; } }

  /* ---- process + principles tiles */
  .process li { padding: var(--space-5); }
  .process__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-2); }
  .principles li { padding: var(--space-5); align-items: start; }

  /* ---- alternate section tint for rhythm (still white-dominant) */
  .ruled { border-block-start: 1px solid var(--border); }
  .section.tinted { background: var(--surface-sunken); }

  /* ---- CTA band: white card with green diagonal pattern on the inline-end side */
  .cta-band__inner { background: var(--surface-raised); box-shadow: var(--shadow-md); border-color: var(--border); }
  .cta-band__inner::before {
    background-image: repeating-linear-gradient(135deg, var(--brand-tint-2) 0 1px, transparent 1px 12px);
    background-size: auto; opacity: 1; mask-image: linear-gradient(to left, black, transparent 55%);
  }
  [dir='rtl'] .cta-band__inner::before { mask-image: linear-gradient(to right, black, transparent 55%); }
  .cta-band__inner::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px; background: var(--brand); }

  /* ---- contact: WhatsApp first */
  .wa-card {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center;
    padding: var(--space-5); border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--wa) 30%, var(--border));
    background: color-mix(in srgb, var(--wa) 6%, var(--surface-raised));
  }
  .wa-card .btn { grid-column: 1 / -1; justify-self: start; }
  @media (min-width: 768px) { .wa-card { grid-template-columns: auto 1fr auto; } .wa-card .btn { grid-column: auto; } }
  .wa-card__icon { display: grid; place-items: center; inline-size: 60px; block-size: 60px; border-radius: 50%; background: var(--wa); color: #fff; }
  .wa-card h2 { font-size: var(--step-1); }
  .wa-card__num { font-weight: 600; text-align: start; }
  .form-title { font-size: var(--step-1); margin-block-start: var(--space-4); }

  /* ---- footer + misc */
  .site-footer { background: var(--surface-sunken); border-block-start: 1px solid var(--border); }
  .chip:has(input:checked) { background: var(--action); border-color: var(--action); color: var(--on-brand); }
  .other li, .pills li { border-radius: 999px; background: var(--surface-raised); }
  .value { border-inline-start-color: var(--brand); }
  .timeline li::before { border-color: var(--brand); }
  .wa-fab { background: var(--wa); }
  @media (min-width: 768px) { .wa-fab { display: grid; } }
  .wa-fab:hover { background: var(--wa-hover); }
}

@media (prefers-reduced-motion: reduce) {
  .work-card:hover .work-card__media img, .round:hover { transform: none; }
}

@layer components {
  /* 5 services: the core website service is wide, then four equal cards */
  @media (min-width: 1024px) {
    .services-grid > .card:first-child { grid-column: span 2; }
  }
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .services-grid > .card:first-child { grid-column: 1 / -1; }
  }
  .services-grid > .card:first-child { background: linear-gradient(135deg, var(--brand-tint), var(--surface-raised) 60%); }
}

/* ---- Fixes (unlayered on purpose so they win over the icon font's own CSS) */
.round, .wa-fab, .btn, .brand, .lang-switch, .icon-badge { text-decoration: none !important; }
.theme-toggle .icon { display: none; }
.theme-toggle[data-mode='auto'] .t-auto,
.theme-toggle[data-mode='light'] .t-light,
.theme-toggle[data-mode='dark'] .t-dark { display: inline-block; }
html:not(.js) .theme-toggle { display: none; }

/* ---- Personal section: "Away from code and design" */
.personal { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 1024px) { .personal { grid-template-columns: 5fr 7fr; gap: var(--space-8); } }
.personal__intro { display: grid; gap: var(--space-4); }
.personal__intro .lead { max-width: 46ch; }
.personal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
@media (min-width: 640px) { .personal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.personal__grid li {
  display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-sm);
}
.personal__grid li:first-child { grid-column: span 2; background: linear-gradient(135deg, var(--brand-tint), var(--surface-raised) 70%); }
@media (min-width: 640px) { .personal__grid li:first-child { grid-column: span 1; grid-row: span 2; align-content: center; } }
.personal__grid strong { font-size: var(--step-0); }
.personal__grid span.muted { font-size: var(--step--1); }
.hero__place { font-weight: 400; color: var(--ink-muted); font-size: var(--step-0); }
.personal__intro .section-header { margin-block-end: 0; }

/* =====================================================================
   SYSTEM (v4) — one geometric scale for spacing and type. Everything below
   overrides earlier ad-hoc values so every section follows the same rules.
   Spacing: 8px grid.  Type: fixed modular scale (ratio ≈ 1.25), fluid only
   between two fixed endpoints.
   ===================================================================== */
@layer tokens {
  :root {
    /* spacing (8px grid) */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
    --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; --s-11: 96px;

    /* rhythm */
    --section-y: var(--s-9);          /* 64 mobile */
    --header-gap: var(--s-6);         /* section header → content: 32 */
    --grid-gap: var(--s-4);           /* 16 mobile */
    --card-pad: var(--s-5);           /* 24 */

    /* type scale */
    --fs-caption: 0.875rem;                                   /* 14 */
    --fs-body: 1.0625rem;                                     /* 17 */
    --fs-lead: 1.1875rem;                                     /* 19 */
    --fs-h3: 1.25rem;                                         /* 20 */
    --fs-h2: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem);        /* 26 → 34 */
    --fs-h1: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);             /* 32 → 44 */
    --fs-display: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);      /* 40 → 60 */
  }
  @media (min-width: 768px) {
    :root { --grid-gap: var(--s-5); --section-y: var(--s-10); --header-gap: var(--s-7); }
  }
  @media (min-width: 1024px) {
    :root { --section-y: var(--s-11); --header-gap: var(--s-8); --card-pad: var(--s-6); --fs-body: 1.125rem; --fs-lead: 1.25rem; --fs-h3: 1.3125rem; }
  }
}

@layer components {
  /* ---- type */
  body { font-size: var(--fs-body); }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3, .card h2, .card h3, .work-card h2, .work-card h3, .process h3, .principles h3, .skills h3, .timeline h3 { font-size: var(--fs-h3); }
  .lead, .hero__bio, .personal__intro .lead { font-size: var(--fs-lead); }
  .muted, .card .muted, .process .muted { font-size: inherit; }
  .eyebrow, .card-index, .work-card__meta, .help, .error, .tag, .breadcrumb, .footer-title, .form-note,
  .card__more, .process .n, .filters legend, .chip, .hero__facts li, .personal__grid span.muted, .cs-summary dt, .site-footer { font-size: var(--fs-caption); }
  .hero__title { font-size: var(--fs-display); line-height: 1.15; }
  .hero__name { font-size: var(--fs-h3); }
  .hero__place { font-size: var(--fs-body); }
  .svc-hero h1, .cs-hero h1 { font-size: var(--fs-h1); }
  .faq h3 { font-size: var(--fs-body); }
  .wa-card h2, .panel h2, .form-title { font-size: var(--fs-h3); }
  .partners h2 { font-size: var(--fs-body); }

  /* ---- vertical rhythm: every section uses the same padding */
  .section { padding-block: var(--section-y); }
  .page-intro, .svc-hero, .cs-hero { padding-block-start: var(--s-8); }
  .cs-hero { padding-block-end: var(--s-6); }
  .hero { padding-block: var(--s-9) var(--s-10); }
  @media (min-width: 1024px) { .hero { padding-block: var(--s-10) var(--s-11); } }
  .partners { padding-block: 0 var(--section-y); }
  .breadcrumb { padding-block-start: var(--s-5); }

  /* ---- section headers: fixed internal gaps */
  .section-header { gap: var(--s-3); margin-block-end: var(--header-gap); }
  .section-header .lead { margin-block-start: var(--s-1); }
  .two-col > .section-header, .personal__intro .section-header { margin-block-end: 0; }
  .two-col { gap: var(--s-5); }
  @media (min-width: 1024px) { .two-col { grid-template-columns: 4fr 8fr; gap: var(--s-9); } }

  /* ---- hero internals on the 8px grid */
  .hero__inner { gap: var(--s-4); }
  .hero__name { margin-block-start: var(--s-3); }
  .hero__title { margin-block: 0; }
  .hero__facts { margin-block-start: var(--s-2); gap: var(--s-2); }
  .hero__facts li { padding: var(--s-2) var(--s-4); }
  .hero__ctas { margin-block-start: var(--s-4); gap: var(--s-3); }
  .hero__direct { margin-block-start: var(--s-2); gap: var(--s-3); }
  .avatar { inline-size: 160px; block-size: 160px; }
  @media (min-width: 1024px) { .avatar { inline-size: 176px; block-size: 176px; } }

  /* ---- grids + cards: one gap, one padding */
  .grid-2, .grid-3, .process, .principles, .personal__grid, .skills, .partners ul, .contact-main, .contact-aside { gap: var(--grid-gap); }
  .card, .process li, .principles li, .panel, .personal__grid li, .wa-card { padding: var(--card-pad); }
  .card { gap: var(--s-3); }
  .card__top, .process__top { margin-block-end: var(--s-2); }
  .card__more { padding-block-start: var(--s-3); }
  .work-card__body { padding: var(--s-5); gap: var(--s-3); }
  .icon-badge { inline-size: 48px; block-size: 48px; border-radius: 12px; }
  .after-cards { margin-block-start: var(--s-6); }
  .principles li { gap: var(--s-4); }
  .process li, .personal__grid li { gap: var(--s-2); }

  /* ---- CTA band */
  .cta-band__inner { padding: var(--s-7) var(--s-5); gap: var(--s-5); }
  @media (min-width: 1024px) { .cta-band__inner { padding: var(--s-9); gap: var(--s-6); } }
  .cta-band__actions { gap: var(--s-3); }

  /* ---- header: fixed height, even spacing */
  .site-header { padding-block-start: var(--s-3); }
  .site-header .bar { min-height: 64px; padding-inline: var(--s-4); gap: var(--s-4); }
  .menu__links a { padding-inline: var(--s-3); }
  @media (min-width: 1024px) { .menu { gap: var(--s-4); } .menu__links { gap: var(--s-1); } }
  @media (min-width: 1024px) and (max-width: 1199.98px) { .menu__links a { padding-inline: var(--s-2); } .lang-switch { padding-inline: var(--s-2); } }

  /* ---- footer */
  .footer-grid { padding-block: var(--s-9) var(--s-8); gap: var(--s-7) var(--s-6); }
  .footer-bottom { padding-block: var(--s-5); }

  /* ---- buttons: two heights only */
  .btn { min-height: 44px; padding-inline: var(--s-5); }
  .btn--lg { min-height: 52px; padding-inline: var(--s-6); }
  .btn--sm { min-height: 44px; padding-inline: var(--s-4); }
}

/* ---- Hero v5: calmer scale + breathing room */
@layer tokens { :root { --fs-display: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); } }   /* 32 → 44 */
@layer components {
  .hero__inner { gap: var(--s-3); }
  .avatar { inline-size: 144px; block-size: 144px; margin-block-end: var(--s-2); }
  @media (min-width: 1024px) { .avatar { inline-size: 152px; block-size: 152px; } }
  .hero__title { font-weight: 700; letter-spacing: 0; }
  .hero__bio { max-width: 58ch; margin-block-start: var(--s-1); }
  .hero__facts { margin-block-start: var(--s-5); }
  .hero__ctas { margin-block-start: var(--s-4); }
  .hero__direct { margin-block-start: var(--s-3); }
}

/* =====================================================================
   MOTION (v6) — calm, consistent, purposeful.
   One easing family, three durations. Everything is disabled under
   prefers-reduced-motion. Nothing loops except one soft WhatsApp cue.
   ===================================================================== */
@layer tokens {
  :root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* expo-like settle */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 160ms; --t-base: 260ms; --t-slow: 700ms;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* ---- 1. Hero entrance: staggered rise, once, on load */
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
  .hero__inner > * { animation: rise var(--t-slow) var(--ease-out) both; }
  .hero__inner > .avatar { animation-name: pop; }
  .hero__inner > :nth-child(1) { animation-delay: 40ms; }
  .hero__inner > :nth-child(2) { animation-delay: 120ms; }
  .hero__inner > :nth-child(3) { animation-delay: 190ms; }
  .hero__inner > :nth-child(4) { animation-delay: 260ms; }
  .hero__inner > :nth-child(5) { animation-delay: 330ms; }
  .hero__inner > :nth-child(6) { animation-delay: 400ms; }
  .hero__inner > :nth-child(7) { animation-delay: 470ms; }

  /* Avatar ring: a slow, almost imperceptible rotation of the gradient ring */
  @property --ring { syntax: '<angle>'; inherits: false; initial-value: 210deg; }
  .avatar { background: conic-gradient(from var(--ring), var(--brand), var(--brand-tint-2), var(--brand)); animation: pop var(--t-slow) var(--ease-out) both, ring 14s linear 1s infinite; }
  @keyframes ring { to { --ring: 570deg; } }

  /* ---- 2. Scroll reveal (JS adds .reveal-ready + per-item --i for stagger) */
  .reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(16px); }
  .reveal-ready [data-reveal] {
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out),
                border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s;
  }
  .reveal-ready [data-reveal].is-visible { transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s; }

  /* ---- 3. Buttons */
  .btn {
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
                background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--t-fast); }
  .btn--primary:hover { box-shadow: 0 12px 24px -10px rgba(90, 128, 2, 0.75); }
  .btn--wa:hover { box-shadow: 0 12px 24px -10px rgba(15, 123, 111, 0.75); }
  .btn--secondary:hover { box-shadow: var(--shadow-md); }
  /* light sheen sweeping across filled buttons on hover */
  .btn--primary::after, .btn--wa::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform 0s;
  }
  .btn--primary:hover::after, .btn--wa:hover::after { transform: translateX(120%); transition: transform 800ms var(--ease-in-out); }
  /* icons inside buttons nudge in the reading direction */
  .btn .icon, .link-arrow .icon { transition: transform var(--t-base) var(--ease-out); }
  .btn:hover .icon--dir, .link-arrow:hover .icon--dir { transform: translateX(4px); }
  [dir='rtl'] .btn:hover .icon--dir, [dir='rtl'] .link-arrow:hover .icon--dir { transform: scaleX(-1) translateX(4px); }
  .btn--wa:hover .ph-whatsapp-logo { transform: rotate(-12deg) scale(1.08); }

  /* round contact buttons */
  .round { transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
  .round:hover { transform: translateY(-3px) scale(1.06); }
  .round--wa:hover { box-shadow: 0 0 0 6px rgba(15, 123, 111, 0.14); }
  .round--mail:hover { box-shadow: 0 0 0 6px rgba(217, 48, 37, 0.14); }
  .round:active { transform: scale(0.96); }

  /* ---- 4. Links + navigation */
  .menu__links a { position: relative; }
  .menu__links a::after {
    content: ''; position: absolute; inset-inline: var(--s-3); inset-block-end: 6px; block-size: 2px; border-radius: 2px;
    background: var(--brand); transform: scaleX(0); transition: transform var(--t-base) var(--ease-out);
  }
  .menu__links a:hover::after { transform: scaleX(1); }
  .menu__links a[aria-current]::after { transform: scaleX(1); }
  .menu__links a[aria-current] { text-decoration: none; }
  .link-arrow span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-base) var(--ease-out); }
  [dir='rtl'] .link-arrow span { background-position: 100% 100%; }
  .link-arrow:hover span { text-decoration: none; background-size: 100% 1px; }

  /* ---- 5. Cards */
  .card, .work-card, .process li, .principles li, .personal__grid li, .partners li {
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out),
                opacity var(--t-slow) var(--ease-out);
  }
  .card:hover, .work-card:hover, .process li:hover, .principles li:hover, .personal__grid li:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .icon-badge, .personal__grid .ph-duotone { transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
  .card:hover .icon-badge, .process li:hover .icon-badge, .principles li:hover .icon-badge { background: var(--action); color: var(--on-brand); transform: rotate(-6deg); }
  .personal__grid li:hover .ph-duotone { color: var(--link); transform: scale(1.12); }
  .card__more { transition: gap var(--t-base) var(--ease-out); }
  .card:hover .card__more { gap: var(--s-3); }
  .partners li:hover { transform: translateY(-2px); }
  .work-card__media img { transition: transform 900ms var(--ease-out); }

  /* ---- 6. Header settles in on scroll */
  .site-header .bar { transition: box-shadow var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out); }
  .site-header { transition: transform 350ms var(--ease-out); }

  /* ---- 7. Floating WhatsApp: one gentle ripple every 8s, after 4s */
  .wa-fab { transition: transform var(--t-base) var(--ease-out); }
  .wa-fab:hover { transform: scale(1.08); }
  .wa-fab::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa);
    animation: ripple 8s var(--ease-out) 4s infinite; opacity: 0; pointer-events: none;
  }
  @keyframes ripple { 0% { transform: scale(1); opacity: 0.55; } 18% { transform: scale(1.55); opacity: 0; } 100% { opacity: 0; } }

  /* ---- 8. FAQ + filters */
  .faq summary { transition: color var(--t-fast) var(--ease-out); }
  .faq summary:hover { color: var(--link); }
  .faq details[open] p { animation: rise var(--t-base) var(--ease-out); }
  .chip { transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out); }
  .chip:active { transform: scale(0.97); }
  [data-work-grid] > li:not([hidden]) { animation: rise var(--t-base) var(--ease-out); }

  /* ---- 9. Theme switch: smooth colour change */
  html.theme-anim, html.theme-anim * { transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out) !important; }
}

/* Reduced motion: everything static, content always visible */
@media (prefers-reduced-motion: reduce) {
  .hero__inner > *, .avatar, .wa-fab::before { animation: none !important; }
  .btn:hover, .round:hover, .card:hover, .work-card:hover, .wa-fab:hover { transform: none !important; }
}

/* ---- Fix: icon badges on hover — solid brand badge with a white icon (was green on green) */
@media (prefers-reduced-motion: no-preference) {
  .card:hover .icon-badge, .process li:hover .icon-badge, .principles li:hover .icon-badge { transform: rotate(-6deg); }
}
.card .icon-badge .icon, .process .icon-badge .icon, .principles .icon-badge .icon { color: var(--link); margin: 0; transition: color var(--t-base, 200ms) ease; }
.card:hover .icon-badge, .process li:hover .icon-badge, .principles li:hover .icon-badge,
.card:focus-within .icon-badge {
  background: var(--action); border-color: var(--action);
}
.card:hover .icon-badge .icon, .process li:hover .icon-badge .icon, .principles li:hover .icon-badge .icon,
.card:focus-within .icon-badge .icon { color: #fff; }
:root[data-theme='dark'] .card:hover .icon-badge .icon, :root[data-theme='dark'] .process li:hover .icon-badge .icon, :root[data-theme='dark'] .principles li:hover .icon-badge .icon { color: #121500; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .card:hover .icon-badge .icon, :root:not([data-theme='light']) .process li:hover .icon-badge .icon, :root:not([data-theme='light']) .principles li:hover .icon-badge .icon { color: #121500; }
}

/* =====================================================================
   NAV MOTION (v7) — menu effect only. Uses existing tokens; defines none.
   Desktop: one soft "glide" pill follows hover/focus between links and
   settles on the current page (with a small brand mark under it).
   Mobile: panel eases in, links arrive in sequence, current page marked.
   ===================================================================== */

/* ---- Desktop glide indicator (JS adds .nav-glide to <ul> and the indicator span) */
@media (min-width: 1024px) {
  .menu__links.nav-glide { position: relative; isolation: isolate; }
  .menu__links.nav-glide a { position: relative; z-index: 1; color: var(--ink-muted); background: transparent !important; transition: color var(--t-base) var(--ease-out); }
  .menu__links.nav-glide a::after { display: none; }
  .menu__links.nav-glide a:hover,
  .menu__links.nav-glide a:focus-visible,
  .menu__links.nav-glide a.is-target { color: var(--ink); }
  .menu__links.nav-glide a[aria-current] { color: var(--ink); font-weight: 600; text-decoration: none; }

  .nav-indicator {
    position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
    inline-size: 0; block-size: 0; opacity: 0;
    border-radius: 10px;
    background: var(--surface-sunken);
    box-shadow: inset 0 0 0 1px var(--border);
    transition:
      transform 420ms var(--ease-out),
      width 420ms var(--ease-out),
      height 420ms var(--ease-out),
      opacity var(--t-base) var(--ease-out),
      background-color var(--t-base) var(--ease-out),
      box-shadow var(--t-base) var(--ease-out);
  }
  .nav-indicator.is-instant { transition: none; }
  /* resting on the current page: brand tint + small brand mark */
  .nav-indicator.is-current { background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand-tint-2); }
  .nav-indicator::after {
    content: ''; position: absolute; inset-inline: 50%; inset-block-end: 5px;
    inline-size: 14px; block-size: 3px; margin-inline-start: -7px; border-radius: 3px;
    background: var(--brand);
    transform: scaleX(0); opacity: 0;
    transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
  }
  .nav-indicator.is-current::after { transform: scaleX(1); opacity: 1; }
}

/* ---- Mobile disclosure: panel + staggered links */
@keyframes navPanelIn { from { opacity: 0; transform: translateY(-8px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes navItemIn { from { opacity: 0; transform: translateX(var(--nav-from, 12px)); } to { opacity: 1; transform: none; } }
@keyframes navIconIn { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } to { opacity: 1; transform: none; } }

@media (max-width: 1023.98px) {
  [dir='rtl'] .menu__links { --nav-from: -12px; }
  .menu__links a { position: relative; transition: color var(--t-base) var(--ease-out), padding var(--t-base) var(--ease-out); }
  .menu__links a::after { display: none; }
  .menu__links a::before {
    content: ''; position: absolute; inset-inline-start: 0; inset-block: 14px;
    inline-size: 3px; border-radius: 3px; background: var(--brand);
    transform: scaleY(0); transition: transform var(--t-base) var(--ease-out);
  }
  .menu__links a:hover, .menu__links a[aria-current] { padding-inline-start: var(--s-4); color: var(--ink); text-decoration: none; }
  .menu__links a:hover::before, .menu__links a[aria-current]::before { transform: scaleY(1); }
  .menu__links a[aria-current] { font-weight: 600; }

  @media (prefers-reduced-motion: no-preference) {
    html.js .is-open .menu { animation: navPanelIn 320ms var(--ease-out) both; transform-origin: top center; }
    html.js .is-open .menu__links li,
    html.js .is-open .menu__actions { animation: navItemIn 420ms var(--ease-out) both; animation-delay: calc(80ms + var(--k, 0) * 45ms); }
    html.js .is-open .menu__actions { --k: 6; --nav-from: 0px; }
    .is-open .menu-toggle .i-close, .site-header:not(.is-open) .menu-toggle .i-open { animation: navIconIn var(--t-base) var(--ease-out); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-indicator, .nav-indicator::after, .menu__links a, .menu__links a::before { transition: none !important; }
}

/* =====================================================================
   POLISH (v8) — fixes from the design critique. No token changes.
   ===================================================================== */
/* 1. Unconfirmed role tags never show on public project cards */
.work-card .tag--warning { display: none; }
.work-card .tags li:has(.tag--warning) { display: none; }

/* 2. Floating WhatsApp appears only after the hero (JS toggles .fab-on); no overlap with the header CTA */
html.js .wa-fab { opacity: 0; pointer-events: none; transform: translateY(12px) scale(0.9); transition: opacity var(--t-base, 200ms) ease, transform var(--t-base, 200ms) ease; }
html.js.fab-on .wa-fab { opacity: 1; pointer-events: auto; transform: none; }
@media (min-width: 768px) { .wa-fab { inset-inline-end: var(--s-5); inset-block-end: var(--s-5); } }

/* 3. Mobile density: compact process + principles, slightly tighter rhythm */
@media (max-width: 767.98px) {
  :root { --section-y: 56px; --header-gap: var(--s-5); }
  .process, .principles { gap: 0; border-block-start: 1px solid var(--border); }
  .process li, .principles li {
    padding: var(--s-4) 0; background: none; border: 0; border-block-end: 1px solid var(--border); border-radius: 0; box-shadow: none;
  }
  .process li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4); row-gap: var(--s-1); align-items: start; }
  .process__top { grid-row: span 2; margin: 0; }
  .process__top .n { display: none; }
  .process li:hover, .principles li:hover { transform: none; box-shadow: none; }
  .process .icon-badge, .principles .icon-badge { inline-size: 40px; block-size: 40px; }
  .services-grid .card { padding: var(--s-5); }
  .services-grid .card .muted { display: none; }   /* problem line + link are enough on small screens */
}

/* Personal section: 4 cards → clean 2×2 grid at every size */
.personal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.personal__grid li:first-child { grid-column: auto; grid-row: auto; align-content: start; }