@font-face{font-family:"Vazirmatn";src:url("/assets/fonts/vazirmatn-variable.woff2") format("woff2");font-weight:100 900;font-display:swap;font-style:normal}

/* ---- 1. Tokens ---------------------------------------------------------- */
:root{
  color-scheme:light dark;
  --bg:#f6f7f9;--surface:#ffffff;--surface-2:#f1f3f7;--panel:#ffffff;--panel-2:#f1f3f7;
  --panel-border:rgba(16,24,40,.10);--panel-border-strong:rgba(16,24,40,.18);
  --text:#111827;--text-muted:#5b6472;--text-faint:#7b8494;
  --accent:#1d4ed8;--accent-strong:#1e3a8a;--accent-soft:#eff4ff;--on-accent:#ffffff;--btn-bg:#1d4ed8;
  --radius:16px;--radius-sm:10px;--radius-lg:24px;--measure:68ch;--gutter:16px;
  --header-bg:rgba(255,255,255,.86);
  --shadow-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --shadow-2:0 10px 30px -12px rgba(16,24,40,.22),0 2px 6px rgba(16,24,40,.06);
  --shadow-3:0 24px 60px -28px rgba(16,24,40,.35);
  --ring:0 0 0 3px rgba(29,78,216,.35);
  --svc-accent:var(--accent);--svc-strong:var(--accent-strong);--svc-soft:var(--accent-soft);
  --svc-on:var(--on-accent);--svc-from:#1e3a8a;--svc-to:#3b82f6;--svc-border:rgba(29,78,216,.22);
  --warn-bg:#fff8e6;--warn-border:#f0d48a;--warn-text:#6b4e00;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0f16;--surface:#131924;--surface-2:#1a2130;--panel:#131924;--panel-2:#1a2130;
    --panel-border:rgba(226,232,240,.14);--panel-border-strong:rgba(226,232,240,.24);
    --text:#e9edf3;--text-muted:#9aa4b2;--text-faint:#7d8798;
    --accent:#8fb0ff;--accent-strong:#b3c8ff;--accent-soft:rgba(29,78,216,.22);--on-accent:#0b1220;--btn-bg:#8fb0ff;
    --header-bg:rgba(11,15,22,.84);
    --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 12px 34px -16px rgba(0,0,0,.7);
    --shadow-3:0 28px 70px -30px rgba(0,0,0,.85);
    --ring:0 0 0 3px rgba(143,176,255,.4);
    --warn-bg:rgba(120,80,0,.22);--warn-border:rgba(250,204,21,.34);--warn-text:#fde68a;
  }
}
:root[data-theme="dark"]{
  --bg:#0b0f16;--surface:#131924;--surface-2:#1a2130;--panel:#131924;--panel-2:#1a2130;
  --panel-border:rgba(226,232,240,.14);--panel-border-strong:rgba(226,232,240,.24);
  --text:#e9edf3;--text-muted:#9aa4b2;--text-faint:#7d8798;
  --accent:#8fb0ff;--accent-strong:#b3c8ff;--accent-soft:rgba(29,78,216,.22);--on-accent:#0b1220;--btn-bg:#8fb0ff;
  --header-bg:rgba(11,15,22,.84);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 12px 34px -16px rgba(0,0,0,.7);
  --shadow-3:0 28px 70px -30px rgba(0,0,0,.85);
  --ring:0 0 0 3px rgba(143,176,255,.4);
  --warn-bg:rgba(120,80,0,.22);--warn-border:rgba(250,204,21,.34);--warn-text:#fde68a;
}
.svc-vakil{--svc-accent:#1d4ed8;--svc-strong:#1e3a8a;--svc-soft:#eff4ff;--svc-on:#ffffff;--svc-from:#1e3a8a;--svc-to:#2563eb;--svc-border:rgba(29, 78, 216, 0.22);}
:root[data-theme="dark"] .svc-vakil{--svc-accent:#7ea2ff;--svc-strong:#a9c1ff;--svc-soft:rgba(29, 78, 216, 0.24);--svc-on:#0b1220;--svc-from:#4f79e8;--svc-to:#8fb0ff;--svc-border:rgba(126, 162, 255, 0.32);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .svc-vakil{--svc-accent:#7ea2ff;--svc-strong:#a9c1ff;--svc-soft:rgba(29, 78, 216, 0.24);--svc-on:#0b1220;--svc-from:#4f79e8;--svc-to:#8fb0ff;--svc-border:rgba(126, 162, 255, 0.32);}}
.svc-morabi{--svc-accent:#b91c1c;--svc-strong:#7f1d1d;--svc-soft:#fef2f2;--svc-on:#ffffff;--svc-from:#7f1d1d;--svc-to:#c81e1e;--svc-border:rgba(185, 28, 28, 0.22);}
:root[data-theme="dark"] .svc-morabi{--svc-accent:#f87171;--svc-strong:#fca5a5;--svc-soft:rgba(185, 28, 28, 0.26);--svc-on:#2a0a0a;--svc-from:#e05252;--svc-to:#f87171;--svc-border:rgba(248, 113, 113, 0.32);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .svc-morabi{--svc-accent:#f87171;--svc-strong:#fca5a5;--svc-soft:rgba(185, 28, 28, 0.26);--svc-on:#2a0a0a;--svc-from:#e05252;--svc-to:#f87171;--svc-border:rgba(248, 113, 113, 0.32);}}
.svc-koodak{--svc-accent:#15803d;--svc-strong:#166534;--svc-soft:#f0fdf4;--svc-on:#ffffff;--svc-from:#14532d;--svc-to:#15803d;--svc-border:rgba(21, 128, 61, 0.24);}
:root[data-theme="dark"] .svc-koodak{--svc-accent:#4ade80;--svc-strong:#86efac;--svc-soft:rgba(21, 128, 61, 0.26);--svc-on:#052e16;--svc-from:#22c55e;--svc-to:#4ade80;--svc-border:rgba(74, 222, 128, 0.32);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .svc-koodak{--svc-accent:#4ade80;--svc-strong:#86efac;--svc-soft:rgba(21, 128, 61, 0.26);--svc-on:#052e16;--svc-from:#22c55e;--svc-to:#4ade80;--svc-border:rgba(74, 222, 128, 0.32);}}
:root:not([data-theme="dark"]) mamele-service-request[data-service-brand="vakil"]{--mamele-accent:#1d4ed8 !important;--mamele-accent-strong:#1e3a8a !important;--mamele-accent-soft:#eff4ff !important;--mamele-on-accent:#ffffff !important;}
:root[data-theme="dark"] mamele-service-request[data-service-brand="vakil"]{--mamele-accent:#7ea2ff !important;--mamele-accent-strong:#a9c1ff !important;--mamele-accent-soft:rgba(29, 78, 216, 0.24) !important;--mamele-on-accent:#0b1220 !important;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) mamele-service-request[data-service-brand="vakil"]{--mamele-accent:#7ea2ff !important;--mamele-accent-strong:#a9c1ff !important;--mamele-accent-soft:rgba(29, 78, 216, 0.24) !important;--mamele-on-accent:#0b1220 !important;}}
:root:not([data-theme="dark"]) mamele-service-request[data-service-brand="morabi"]{--mamele-accent:#b91c1c !important;--mamele-accent-strong:#7f1d1d !important;--mamele-accent-soft:#fef2f2 !important;--mamele-on-accent:#ffffff !important;}
:root[data-theme="dark"] mamele-service-request[data-service-brand="morabi"]{--mamele-accent:#f87171 !important;--mamele-accent-strong:#fca5a5 !important;--mamele-accent-soft:rgba(185, 28, 28, 0.26) !important;--mamele-on-accent:#2a0a0a !important;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) mamele-service-request[data-service-brand="morabi"]{--mamele-accent:#f87171 !important;--mamele-accent-strong:#fca5a5 !important;--mamele-accent-soft:rgba(185, 28, 28, 0.26) !important;--mamele-on-accent:#2a0a0a !important;}}
:root:not([data-theme="dark"]) mamele-service-request[data-service-brand="koodak"]{--mamele-accent:#15803d !important;--mamele-accent-strong:#166534 !important;--mamele-accent-soft:#f0fdf4 !important;--mamele-on-accent:#ffffff !important;}
:root[data-theme="dark"] mamele-service-request[data-service-brand="koodak"]{--mamele-accent:#4ade80 !important;--mamele-accent-strong:#86efac !important;--mamele-accent-soft:rgba(21, 128, 61, 0.26) !important;--mamele-on-accent:#052e16 !important;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) mamele-service-request[data-service-brand="koodak"]{--mamele-accent:#4ade80 !important;--mamele-accent-strong:#86efac !important;--mamele-accent-soft:rgba(21, 128, 61, 0.26) !important;--mamele-on-accent:#052e16 !important;}}

/* ---- 2. Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:"Vazirmatn", "Vazir", "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size:16px;line-height:1.85;direction:rtl;text-align:start;
  overflow-wrap:break-word;word-break:break-word;
  transition:background-color .25s ease,color .25s ease;
}
img,svg,video{max-width:100%;height:auto}
img{display:block}
a{color:var(--accent-strong);text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:8px;
}
h1,h2,h3,h4{margin:0;line-height:1.5;letter-spacing:-.2px;font-weight:800}
h1{font-size:clamp(1.6rem,1.2rem + 2.1vw,2.6rem);line-height:1.35}
h2{font-size:clamp(1.22rem,1.05rem + .8vw,1.7rem)}
h3{font-size:clamp(1.05rem,.98rem + .4vw,1.25rem)}
p{margin:0 0 12px;max-inline-size:var(--measure)}
hr{border:0;border-block-start:1px solid var(--panel-border);margin-block:28px}
code,kbd,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size:.88em;direction:ltr;unicode-bidi:isolate;
  background:var(--panel-2);border:1px solid var(--panel-border);border-radius:6px;padding:1px 6px}
pre{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;direction:ltr;text-align:start;background:var(--panel-2);
  border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:14px;overflow-x:auto;max-inline-size:100%}
pre code{background:none;border:0;padding:0}
blockquote{margin:20px 0;padding:12px 16px;border-inline-start:4px solid var(--svc-accent,var(--accent));
  background:var(--panel-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-muted)}
::selection{background:var(--accent-soft);color:var(--text)}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:60;background:var(--surface);
  color:var(--text);padding:10px 16px;border-radius:0 0 var(--radius-sm) var(--radius-sm);
  border:1px solid var(--panel-border);font-weight:700}
.skip:focus{inset-inline-start:8px}
.visually-hidden{position:absolute !important;inline-size:1px;block-size:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{inline-size:100%;max-inline-size:1160px;margin-inline:auto;padding-inline:var(--gutter)}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}

/* ---- 3. Site chrome ----------------------------------------------------- */
header.site{
  position:sticky;top:0;z-index:40;background:var(--header-bg);
  border-block-end:1px solid var(--panel-border);
  -webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);
  transition:background-color .25s ease,border-color .25s ease;
}
.bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
  padding-block:10px;min-inline-size:0}
/* Header order. The theme control is pinned to the inline-end of the first row
   — visually the top-left in this RTL layout — while the brand sits at the
   start and the primary nav drops to its own full-width line on narrow
   screens. The order property keeps that true regardless of the DOM order. */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);
  min-block-size:44px;font-weight:900;letter-spacing:-.4px;order:1;margin-inline-end:auto}
.brand:hover{color:var(--text)}
/* The mark is a self-contained SVG (its own ink ground, its own paper bars), so
   the wrapper adds no colour: it only reserves the box. That is what lets the
   same mark work on the light page, the dark page and a browser tab without a
   second asset or a theme-specific override. */
.brand-mark{inline-size:34px;block-size:34px;flex:0 0 auto;display:inline-grid;place-items:center}
.brand-mark svg{inline-size:34px;block-size:34px;display:block;border-radius:11px;box-shadow:var(--shadow-1)}
.brand-text{display:grid;line-height:1.25}
.brand-name{font-size:1.18rem}
.brand-tag{font-size:.68rem;font-weight:600;color:var(--text-muted);letter-spacing:0}
.bar-actions{display:flex;align-items:center;gap:8px;min-inline-size:0;order:3;flex:1 1 100%}
.theme-toggle{
  order:2;
  display:inline-flex;align-items:center;gap:7px;min-block-size:44px;padding-inline:12px;
  background:var(--panel-2);color:var(--text);border:1px solid var(--panel-border);
  border-radius:999px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
.theme-toggle:hover{background:var(--accent-soft);border-color:var(--svc-border,var(--panel-border-strong));color:var(--accent-strong)}
.theme-toggle:active{transform:translateY(1px)}
.theme-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.theme-toggle-icon{display:inline-grid;place-items:center;inline-size:18px;block-size:18px}
.theme-toggle-icon svg{display:block}
.theme-toggle-label{white-space:nowrap}
/* The active choice is the icon and label currently shown; the mode colour
   reinforces it so the control is obvious in both themes. */
:root[data-theme-choice="light"] .theme-toggle,
:root[data-theme-choice="dark"] .theme-toggle{border-color:var(--svc-border,var(--panel-border-strong))}
.theme-toggle-icon [data-theme-icon]{display:none}
:root[data-theme-choice="system"] .theme-toggle-icon [data-theme-icon="system"],
:root:not([data-theme-choice]) .theme-toggle-icon [data-theme-icon="system"]{display:inline}
:root[data-theme-choice="light"] .theme-toggle-icon [data-theme-icon="light"]{display:inline}
:root[data-theme-choice="dark"] .theme-toggle-icon [data-theme-icon="dark"]{display:inline}
nav.primary{min-inline-size:0}
nav.primary ul{display:flex;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0}
nav.primary a{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:11px;
  border-radius:var(--radius-sm);text-decoration:none;color:var(--text);font-weight:650;font-size:.92rem;
  transition:background-color .2s ease,color .2s ease}
nav.primary a:hover{background:var(--panel-2);color:var(--text)}
nav.primary a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-strong)}

/* Service navigation: three colour-coded entries, always visible at the top.
   The --svc-* custom properties are NOT re-declared here: the light palette
   comes from the generated .svc-<slug> rules (see service-brand.ts) and the
   dark palette from :root[data-theme="dark"] .svc-<slug>. A local default
   would be a same-specificity rule later in the sheet and would silently win in
   the light theme — which is exactly the identity bug this avoids. */
.service-nav{border-block-end:1px solid var(--panel-border);background:var(--surface)}
/* Pinned services, mobile first. Two fixed columns keep the services on
   short rows. padding-inline:0 is load-bearing: a ul carries the UA's 40px
   padding-inline-start, which in RTL is a 40px gap on the right and made the
   grid narrower than its container. Resetting it lets the grid span the full
   available width with no unexplained right-side gap.
   grid-auto-rows:1fr keeps both rows equal even when a Persian label wraps.
   The cells are ~two-thirds of the former 44px height; the width of each cell
   keeps the touch target comfortably above the 24px WCAG 2.5.8 minimum. */
.service-nav ul{display:grid;gap:4px;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;list-style:none;margin:0;padding-block:5px;padding-inline:0}
.service-link{
  display:flex;align-items:center;gap:6px;min-inline-size:0;min-block-size:30px;padding:3px 8px;
  border:1px solid var(--svc-border);border-radius:var(--radius-sm);text-decoration:none;
  color:var(--text);background:linear-gradient(135deg,var(--svc-soft),transparent 62%);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease;
}
.service-link:hover,.service-link:focus-visible{
  transform:none;box-shadow:var(--shadow-1);border-color:var(--svc-accent);color:var(--text)}
.service-link[aria-current="page"]{border-color:var(--svc-accent);box-shadow:inset 0 0 0 1px var(--svc-accent)}
.service-link-icon{
  inline-size:20px;block-size:20px;flex:0 0 auto;border-radius:6px;display:inline-grid;place-items:center;
  background:linear-gradient(135deg,var(--svc-from),var(--svc-to));color:var(--svc-on);box-shadow:var(--shadow-1)}
.service-link-icon svg{inline-size:12px;block-size:12px}
.service-link-text{display:grid;min-inline-size:0;line-height:1.3}
/* Wrapping (not ellipsis) keeps the Persian title complete in a half-width
   cell; the kicker is decorative and returns at >=600px. */
.service-link-label{font-weight:800;font-size:.76rem;overflow-wrap:anywhere}
.service-link-kicker{display:none;font-size:.7rem;color:var(--text-muted);font-weight:600}

/* ---- 4. Editorial ------------------------------------------------------- */
main{display:block;padding-block:20px 8px;min-inline-size:0}
.hero{padding-block:14px 6px}
.hero-grid{display:grid;gap:20px;align-items:center}
.hero-kicker{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:800;
  color:var(--svc-strong,var(--accent-strong));background:var(--svc-soft,var(--accent-soft));
  border:1px solid var(--svc-border,var(--panel-border));border-radius:999px;padding:4px 12px;margin-block-end:12px}
.hero-lede{font-size:clamp(1rem,.95rem + .35vw,1.14rem);color:var(--text-muted);max-inline-size:60ch}
/* Who handles the request. A quiet, service-tinted line directly under the
   summary, so it reads as a promise about the service and not as body copy. */
.hero-expert{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;max-inline-size:62ch;
  font-size:.92rem;font-weight:650;color:var(--svc-strong,var(--accent-strong))}
.hero-expert svg{inline-size:18px;block-size:18px;flex:0 0 auto;margin-block-start:2px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:18px}
.hero-art{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-3);
  border:1px solid var(--panel-border);background:var(--panel-2)}
.hero-art img{inline-size:100%;block-size:auto;aspect-ratio:3 / 2;object-fit:cover;
  transition:transform .5s ease}
.hero-art:hover img{transform:scale(1.03)}

.section{margin-block-start:40px}
.section-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-end;justify-content:space-between;
  margin-block-end:16px}
.section-kicker{font-size:.76rem;font-weight:800;letter-spacing:.4px;color:var(--svc-strong,var(--accent-strong));
  text-transform:uppercase;margin-block-end:4px}
.section-title{margin:0}
.section-sub{margin:6px 0 0;color:var(--text-muted);font-size:.95rem;max-inline-size:62ch}
.section-link{display:inline-flex;align-items:center;gap:6px;min-block-size:44px;font-weight:700;
  text-decoration:none;white-space:nowrap}
.section-link svg{inline-size:18px;block-size:18px}

.category-grid{display:grid;gap:14px;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
.category-card{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;
  background:var(--surface);border:1px solid var(--panel-border);border-radius:var(--radius);
  box-shadow:var(--shadow-1);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.category-card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:4px;
  background:linear-gradient(90deg,var(--svc-from),var(--svc-to))}
.category-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--svc-border)}
.category-card-icon{inline-size:42px;block-size:42px;border-radius:12px;display:inline-grid;place-items:center;
  background:linear-gradient(135deg,var(--svc-from),var(--svc-to));color:var(--svc-on);box-shadow:var(--shadow-1)}
.category-card-icon svg{inline-size:22px;block-size:22px}
.category-card h3 a{text-decoration:none;color:var(--text)}
.category-card h3 a:hover{color:var(--svc-strong)}
.category-card p{color:var(--text-muted);font-size:.92rem;margin:0}
.category-card .topic-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0}
.category-card .topic-list li{font-size:.76rem;font-weight:600;color:var(--svc-strong);
  background:var(--svc-soft);border:1px solid var(--svc-border);border-radius:999px;padding:2px 9px}
.category-card .card-cta{margin-block-start:auto;padding-block-start:6px}

.cards{display:grid;gap:16px;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
.card{background:var(--surface);border:1px solid var(--panel-border);border-radius:var(--radius);
  padding:16px;min-inline-size:0;box-shadow:var(--shadow-1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.card h3{margin-block-start:0}
.card p{color:var(--text-muted);font-size:.92rem;margin-block-end:10px}

/* Article card — the one component every list on the site is built from. */
.article-card{
  display:flex;flex-direction:column;min-inline-size:0;background:var(--surface);
  border:1px solid var(--panel-border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--svc-border)}
.article-card-media{position:relative;display:block;background:var(--panel-2);overflow:hidden}
.article-card-media img{inline-size:100%;block-size:auto;aspect-ratio:16 / 9;object-fit:cover;
  transition:transform .5s ease}
.article-card:hover .article-card-media img{transform:scale(1.04)}
.article-card-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;min-inline-size:0;flex:1 1 auto}
.article-card-title{margin:0;font-size:1.02rem}
.article-card-title a{color:var(--text);text-decoration:none}
.article-card-title a:hover{color:var(--svc-strong)}
.article-card-excerpt{margin:0;color:var(--text-muted);font-size:.9rem}
.article-card-foot{margin-block-start:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  justify-content:space-between;padding-block-start:8px}
.article-card-more{display:inline-flex;align-items:center;gap:6px;min-block-size:44px;font-weight:700;
  font-size:.86rem;text-decoration:none;color:var(--svc-strong)}
.article-card-more svg{inline-size:17px;block-size:17px;transition:transform .2s ease}
.article-card:hover .article-card-more svg{transform:translateX(-3px)}

.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:.78rem;color:var(--text-muted)}
.meta-row .meta-item{display:inline-flex;align-items:center;gap:5px}
.meta-row svg{inline-size:15px;block-size:15px;flex:0 0 auto}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;
  border-radius:999px;padding:2px 10px;border:1px solid var(--svc-border,var(--panel-border));
  background:var(--svc-soft,var(--panel-2));color:var(--svc-strong,var(--accent-strong))}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}

/* Featured lead story. */
.featured{display:grid;gap:0;background:var(--surface);border:1px solid var(--panel-border);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-3)}
.featured-media{position:relative;display:block;background:var(--panel-2)}
.featured-media img{inline-size:100%;block-size:auto;aspect-ratio:16 / 9;object-fit:cover}
.featured-body{padding:20px;display:flex;flex-direction:column;gap:12px;min-inline-size:0}
.featured-title{margin:0;font-size:clamp(1.25rem,1.05rem + 1vw,1.8rem)}
.featured-title a{color:var(--text);text-decoration:none}
.featured-title a:hover{color:var(--svc-strong,var(--accent-strong))}
.featured-excerpt{margin:0;color:var(--text-muted)}
.featured-badge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;
  color:var(--svc-strong,var(--accent-strong));background:var(--svc-soft,var(--accent-soft));
  border:1px solid var(--svc-border,var(--panel-border));border-radius:999px;padding:3px 11px;align-self:flex-start}

/* Breadcrumbs. */
.crumbs{font-size:.82rem;color:var(--text-muted);margin-block:6px 4px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0}
.crumbs li{display:inline-flex;align-items:center;gap:4px;min-inline-size:0}
.crumbs a{display:inline-flex;align-items:center;min-block-size:44px;text-decoration:none;color:var(--text-muted)}
.crumbs a:hover{color:var(--accent-strong)}
.crumbs li+li::before{content:"›";color:var(--text-faint)}
.crumbs [aria-current="page"]{color:var(--text);font-weight:650}

/* Article page. */
.article{max-inline-size:820px;margin-inline:auto;min-inline-size:0}
.article-header{padding-block:8px 4px}
.article-title{margin-block:10px 12px}
.article-lede{font-size:clamp(1rem,.95rem + .4vw,1.18rem);color:var(--text-muted);max-inline-size:62ch}
.article-meta{margin-block:14px 18px;padding-block:10px;border-block:1px solid var(--panel-border)}
.article-hero{margin:0 0 8px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--panel-border);
  background:var(--panel-2);box-shadow:var(--shadow-2)}
.article-hero img{inline-size:100%;block-size:auto;aspect-ratio:16 / 9;object-fit:cover}
.article-hero figcaption{font-size:.76rem;color:var(--text-muted);padding:8px 12px;border-block-start:1px solid var(--panel-border)}
.prose{font-size:1.03rem;line-height:2}
.prose h2{margin-block:32px 10px;scroll-margin-block-start:96px}
.prose h3{margin-block:24px 8px;scroll-margin-block-start:96px}
.prose p{max-inline-size:var(--measure)}
.prose ul,.prose ol{padding-inline-start:22px;margin-block:0 16px;max-inline-size:var(--measure)}
.prose li{margin-block-end:7px}
.prose li::marker{color:var(--svc-accent,var(--accent))}
/* ---- Faithful Mamele blocks -------------------------------------------- */
.prose strong{font-weight:700}
.prose em{font-style:italic}
.prose a{color:var(--svc-strong,var(--accent-strong));text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--svc-accent,var(--accent))}
.prose .is-center{text-align:center;margin-inline:auto}
.prose .is-end{text-align:left}
.prose-quote{margin:22px 0;padding:4px 18px;border-inline-start:4px solid var(--svc-accent,var(--accent));
  background:var(--panel-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-muted);
  max-inline-size:var(--measure);font-size:1.02rem}
.prose-quote p{margin:0}
.prose-callout{margin:22px 0;padding:14px 16px;border:1px solid var(--warn-border);border-radius:var(--radius);
  background:var(--warn-bg);color:var(--text);max-inline-size:var(--measure)}
.prose-callout-title{display:flex;align-items:center;gap:7px;margin:0 0 6px;font-weight:700;color:var(--warn-text)}
.prose-callout-title svg{flex:none}
.prose-callout-body{line-height:1.9}
.prose-callout-body p{margin:0}
.prose-figure{margin:24px 0;padding:0;border:1px solid var(--panel-border);border-radius:var(--radius);
  overflow:hidden;background:var(--panel-2);max-inline-size:var(--measure)}
.prose-figure img{display:block;inline-size:100%;block-size:auto}
.prose-figure figcaption{padding:9px 12px;font-size:.82rem;color:var(--text-muted);
  border-block-start:1px solid var(--panel-border)}
.prose-link-card{display:block;margin:20px 0;padding:14px 16px;border:1px solid var(--svc-border,var(--panel-border));
  border-radius:var(--radius);background:var(--svc-soft,var(--panel-2));text-decoration:none;
  max-inline-size:var(--measure)}
.prose-link-card:hover{border-color:var(--svc-accent,var(--accent))}
.prose-link-label{display:block;font-weight:700;color:var(--svc-strong,var(--accent-strong))}
.prose-link-desc{display:block;margin-block-start:4px;font-size:.88rem;color:var(--text-muted)}
.takeaways{background:var(--svc-soft,var(--accent-soft));border:1px solid var(--svc-border,var(--panel-border));
  border-radius:var(--radius);padding:16px 18px;margin-block:20px}
.takeaways h2{margin:0 0 8px;font-size:1rem}
.takeaways ul{margin:0;padding-inline-start:20px}
.takeaways li{margin-block-end:5px;font-size:.94rem}
.article-tags{margin-block:28px 8px;padding-block-start:16px;border-block-start:1px solid var(--panel-border)}
.toc{background:var(--panel-2);border:1px solid var(--panel-border);border-radius:var(--radius);
  padding:14px 18px;margin-block:20px}
.toc h2{margin:0 0 8px;font-size:.95rem}
.toc ol{margin:0;padding-inline-start:20px}
.toc li{margin-block-end:4px;font-size:.9rem}

/* ---- 5. Service layer --------------------------------------------------- */
.banner{
  position:relative;display:grid;gap:16px;margin-block:32px 8px;padding:20px;
  border:1px solid var(--svc-border);border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(135deg,var(--svc-soft) 0%,transparent 58%),var(--surface);
  box-shadow:var(--shadow-2)}
.banner::after{content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-10%;
  inline-size:280px;block-size:280px;border-radius:50%;
  background:radial-gradient(circle,var(--svc-accent) 0%,transparent 68%);opacity:.16;pointer-events:none}
.banner-copy{display:flex;flex-direction:column;gap:8px;min-inline-size:0;position:relative;z-index:1}
.banner-kicker{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:.74rem;font-weight:800;
  color:var(--svc-on);background:linear-gradient(135deg,var(--svc-from),var(--svc-to));
  border-radius:999px;padding:3px 11px}
.banner h2{margin:0;font-size:clamp(1.15rem,1rem + .7vw,1.5rem)}
.banner p{margin:0;color:var(--text-muted);max-inline-size:56ch}
.banner-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-block-start:6px}
.banner-art{position:relative;z-index:1;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--svc-border);background:var(--panel-2)}
.banner-art img{inline-size:100%;block-size:auto;aspect-ratio:3 / 2;object-fit:cover}
.keyword-row{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:4px 0 0;padding:0}
.keyword-row li{font-size:.74rem;font-weight:600;color:var(--text-muted);background:var(--panel-2);
  border:1px solid var(--panel-border);border-radius:999px;padding:2px 9px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:44px;
  padding-inline:18px;border-radius:var(--radius-sm);border:1px solid transparent;font:inherit;
  font-weight:750;font-size:.92rem;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.btn svg{inline-size:18px;block-size:18px;flex:0 0 auto}
.btn-primary{background:linear-gradient(135deg,var(--svc-from),var(--svc-to));color:var(--svc-on,#fff);
  box-shadow:var(--shadow-2)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-3);color:var(--svc-on,#fff)}
.btn-secondary{background:var(--surface);color:var(--svc-strong,var(--accent-strong));
  border-color:var(--svc-border,var(--panel-border-strong))}
.btn-secondary:hover{background:var(--svc-soft,var(--accent-soft));transform:translateY(-2px)}
.btn-quiet{background:transparent;color:var(--text-muted);border-color:transparent}
.btn-quiet:hover{color:var(--text);background:var(--panel-2)}

.empty-state{background:var(--panel-2);border:1px dashed var(--panel-border-strong);border-radius:var(--radius);
  padding:20px;color:var(--text-muted);font-size:.94rem}
.empty-state strong{display:block;color:var(--text);margin-block-end:4px}

.faq{display:grid;gap:10px}
details{background:var(--surface);border:1px solid var(--panel-border);border-radius:var(--radius-sm);
  padding:4px 14px;transition:border-color .2s ease,box-shadow .2s ease}
details[open]{box-shadow:var(--shadow-1);border-color:var(--panel-border-strong)}
details summary{cursor:pointer;font-weight:700;min-block-size:44px;display:flex;align-items:center;
  list-style:none;gap:8px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";margin-inline-start:auto;color:var(--accent-strong);font-weight:800}
details[open] summary::after{content:"−"}
details p{margin:0 0 12px;color:var(--text-muted);font-size:.94rem}

.widget-shell{margin-block:26px 8px;min-inline-size:0}
.widget-shell noscript{display:block;background:var(--surface);border:1px solid var(--panel-border);
  border-radius:var(--radius);padding:14px}
.widget-skeleton{display:grid;gap:10px;padding:18px;border:1px solid var(--panel-border);
  border-radius:var(--radius);background:var(--surface)}
.widget-skeleton span{display:block;block-size:14px;border-radius:7px;
  background:linear-gradient(90deg,var(--panel-2) 25%,var(--surface-2) 50%,var(--panel-2) 75%);
  background-size:200% 100%;animation:tamoomeh-shimmer 1.4s linear infinite}
.widget-skeleton span:nth-child(2){inline-size:82%}
.widget-skeleton span:nth-child(3){block-size:64px}
@keyframes tamoomeh-shimmer{to{background-position:-200% 0}}
mamele-service-request{display:block;min-inline-size:0}
mamele-service-request:not(:defined) + .widget-skeleton{display:grid}
mamele-service-request:defined + .widget-skeleton{display:none}

/* ---- 6. Footer ---------------------------------------------------------- */
footer.site{margin-block-start:48px;border-block-start:1px solid var(--panel-border);background:var(--surface)}
.footer-grid{display:grid;gap:24px;padding-block:32px 20px;grid-template-columns:1fr}
.footer-brand{display:flex;flex-direction:column;gap:10px;min-inline-size:0}
.footer-brand p{color:var(--text-muted);font-size:.9rem;margin:0;max-inline-size:44ch}
.footer-col h2{font-size:.82rem;font-weight:800;letter-spacing:.3px;color:var(--text);margin-block-end:8px}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.footer-col a{display:inline-flex;align-items:center;gap:6px;min-block-size:44px;text-decoration:none;
  color:var(--text-muted);font-size:.9rem}
.footer-col a:hover{color:var(--accent-strong)}
.footer-col a svg{inline-size:16px;block-size:16px}
.footer-bottom{border-block-start:1px solid var(--panel-border);padding-block:14px 26px;
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.footer-bottom p{margin:0;font-size:.82rem;color:var(--text-muted);max-inline-size:none}
.pireno{display:inline-flex;align-items:center;gap:7px;font-weight:800;color:var(--text);font-size:.86rem}
.pireno-mark{inline-size:22px;block-size:22px;border-radius:7px;display:inline-grid;place-items:center;
  background:linear-gradient(135deg,var(--accent-strong),var(--accent));color:var(--on-accent)}
.pireno-mark svg{inline-size:13px;block-size:13px}

/* ---- 7. Motion ---------------------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease}
.js [data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1;transform:none}
  .hero-art:hover img,.article-card:hover .article-card-media img{transform:none}
}

/* ---- 8. Breakpoints ----------------------------------------------------- */
@media (min-width:600px){
  :root{--gutter:20px}
  /* Wide enough for one row again: brand, nav, then the theme control at the
     inline-end (top-left). */
  .bar-actions{order:2;flex:0 1 auto}
  .theme-toggle{order:3}
  /* auto-fit keeps three and four services both on one row where the
     viewport allows, instead of leaving an orphan on a fixed three-column grid.
     From here up the full-size service row returns; only the phone layout is
     compacted. */
  .service-nav ul{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;padding-block:10px}
  .service-link{min-block-size:52px;gap:10px;padding:6px 12px}
  .service-link:hover,.service-link:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-2)}
  .service-link-icon{inline-size:34px;block-size:34px;border-radius:10px}
  .service-link-icon svg{inline-size:19px;block-size:19px}
  .service-link-label{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .service-link-kicker{display:block}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .banner{padding:24px}
}
@media (min-width:768px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:28px}
  .featured{grid-template-columns:1.1fr 1fr}
  .featured-media img{block-size:100%;aspect-ratio:auto}
  .banner{grid-template-columns:1.25fr .75fr;align-items:center;padding:28px}
  .banner-art img{aspect-ratio:4 / 3}
}
@media (min-width:1024px){
  :root{--gutter:24px}
  main{padding-block:28px 12px}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .category-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
  .article{max-inline-size:860px}
  .section{margin-block-start:52px}
}