/* =====================================================================
   مركز المستشار — design system
   Neutrals, type scale, spacing and components follow the verified
   reference audit (REFERENCE-SITE-AUDIT.md). Brand accent = center blue.
   ===================================================================== */

@font-face{font-family:"Thmanyah Sans";src:url(fonts/thmanyah-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url(fonts/thmanyah-sans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url(fonts/thmanyah-sans-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Official identity (almostasharr.com theme settings): blue #2e83fa, navy #1f1c40,
   neutrals #5a5a5a / #edeff2 / #f9fafb. --brand-ink is a darker tone of the official blue
   used only for small text, where #2e83fa falls below WCAG AA contrast. */
:root{
  --paper:#f9fafb; --surface:#fff; --ink:#1f1c40; --muted:#5a5a5a; --line:#e4e7ec;
  --brand:#2e83fa; --brand-ink:#1b69d0; --brand-soft:#eaf2fe; --navy:#1f1c40;
  --band:#1f1c40; --band-h:#27234f;
  --c-1:#2e83fa; --c-2:#1f1c40; --c-3:#0b4fb3; --c-4:#6b7a99; --c-5:#74b4ff;
  --emerald:#2e83fa; --amber:#9cc4fd;
  --prose-body:#3a394e; --prose-h:#1f1c40; --prose-bullet:#c7cdd8; --prose-count:#6b7280;
  --font:"Thmanyah Sans",ui-sans-serif,system-ui,sans-serif;
  --maxw:72rem;
  color-scheme:light;
}
[data-theme=dark]{
  --paper:#0e0d1a; --surface:#171628; --ink:#eceaf5; --muted:#a3a1b6; --line:#2a2842;
  --brand:#5b9dfb; --brand-ink:#80b4fc; --brand-soft:#16223d;
  --band:#24214a; --band-h:#2c2858;
  --c-1:#5b9dfb; --c-2:#bdb9e6; --c-3:#8ab9fd; --c-4:#a3b0c8; --c-5:#9ecbff;
  --prose-body:#cfcde0; --prose-h:#fff; --prose-bullet:#4a4866; --prose-count:#a3a1b6;
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-padding-top:6rem;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:16px;line-height:1.5;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink)}
main{flex:1}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
::selection{background:color-mix(in oklab,var(--brand) 22%,transparent)}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem}
@media(min-width:40rem){.container{padding-inline:2rem}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:.75rem;top:-4rem;z-index:60;border-radius:.5rem;background:var(--brand);color:#fff;padding:.5rem 1rem}
.skip:focus{top:.75rem}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.75rem 1.5rem;font-weight:500;line-height:1.5;transition:background-color .15s,border-color .15s,color .15s}
.btn svg{width:16px;height:16px;flex:none}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--brand-ink);color:#fff}
.btn-line{border:1px solid var(--line);background:var(--surface)}
.btn-line:hover{border-color:var(--ink)}
.btn-brand{background:var(--brand-ink);color:#fff}
[data-theme=dark] .btn-brand{background:var(--brand);color:#0e0d1a}
.btn-brand:hover{opacity:.9}
.link-brand{flex-shrink:0;font-size:.875rem;font-weight:500;color:var(--brand-ink)}
.link-brand:hover{text-decoration:underline}
.link-muted{flex-shrink:0;font-size:.875rem;color:var(--muted);transition:color .15s}
.link-muted:hover{color:var(--ink)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid color-mix(in oklab,var(--line) 70%,transparent);background:color-mix(in oklab,var(--paper) 80%,transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.site-header .container{display:flex;height:4rem;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.625rem;line-height:1.25}
.brand img{height:30px;width:auto}
.brand .t b{display:block;font-size:1.05rem;font-weight:700}
.brand .t span{display:block;font-size:.72rem;color:var(--muted)}
.head-cta{display:none!important}
@media(min-width:64rem){.head-cta{display:inline-flex!important;margin-inline-start:.25rem;padding:.5rem 1.1rem;font-size:.9rem}}
.logo-d{display:none!important}
[data-theme=dark] .logo-l{display:none!important}
[data-theme=dark] .logo-d{display:block!important}
.nav{display:none}
@media(min-width:64rem){.nav{display:block}}
.nav ul{display:flex;align-items:center;gap:.125rem;font-size:.95rem}
.nav a{display:block;border-radius:999px;padding:.375rem .75rem;color:var(--muted);white-space:nowrap;transition:color .15s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.tools{display:flex;align-items:center;gap:.25rem}
.icon-btn{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:999px;color:var(--muted);transition:background-color .15s,color .15s}
.icon-btn:hover{background:var(--surface);color:var(--ink)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i-sun{display:none!important}
[data-theme=dark] .i-sun{display:block!important}
[data-theme=dark] .i-moon{display:none!important}
.mmenu{position:relative}
@media(min-width:64rem){.mmenu{display:none}}
.mmenu summary{list-style:none}
.mmenu summary::-webkit-details-marker{display:none}
.mmenu .i-x{display:none}
.mmenu[open] .i-x{display:block}
.mmenu[open] .i-bars{display:none}
.mmenu nav{position:absolute;inset-inline-end:0;top:3rem;width:14rem;border-radius:1rem;border:1px solid var(--line);background:var(--surface);padding:.5rem;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.mmenu nav a{display:block;border-radius:.75rem;padding:.625rem 1rem}
.mmenu nav a:hover{background:var(--paper)}
.mmenu nav a[aria-current=page]{color:var(--brand-ink)}
.mmenu nav a.mm-cta{margin-top:.4rem;background:var(--ink);color:var(--paper);text-align:center;border-radius:999px;font-weight:500}
.mmenu nav a.mm-cta:hover{background:var(--brand-ink);color:#fff}

/* ---------- sections / headings ---------- */
.section{margin-top:7rem}
.h-sec{font-size:1.875rem;line-height:2.25rem;font-weight:700}
.h-sec.lg{font-size:1.875rem}
@media(min-width:48rem){.h-sec.lg{font-size:2.25rem;line-height:2.5rem}}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.sec-head .sub{margin-top:.5rem;color:var(--muted)}
.sec-intro{margin-top:.5rem;max-width:42rem;color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding-top:3rem}
@media(min-width:48rem){.hero{padding-top:5rem}}
.hero-grid{display:grid;grid-template-columns:1fr;align-items:center;gap:2.5rem}
@media(min-width:48rem){.hero-grid{grid-template-columns:1.2fr 1fr;gap:4rem}}
.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.25rem .75rem;font-size:.875rem;line-height:1.25rem;color:var(--muted)}
.badge i{width:.5rem;height:.5rem;border-radius:999px;background:var(--emerald)}
.hero h1{margin-top:1.5rem;font-size:2.25rem;font-weight:700;line-height:1.3;text-wrap:balance}
@media(min-width:48rem){.hero h1{font-size:3.75rem;line-height:1.25}}
.hero h1 .line{display:block;white-space:nowrap;font-size:clamp(1.35rem,3.6vw,3.25rem)}
.hero h1 .line .m{color:var(--muted)}
.rotator{display:inline-grid;perspective:600px;margin-inline-start:.3em;color:var(--brand)}
.rotator>span{grid-area:1/1;white-space:nowrap;opacity:0;transform-origin:50% 60%;backface-visibility:hidden;animation:flip 7.5s infinite}
.rotator>span:nth-child(2){animation-delay:2.5s}
.rotator>span:nth-child(3){animation-delay:5s}
@keyframes flip{0%{opacity:0;transform:rotateX(-90deg)}5%,30%{opacity:1;transform:rotateX(0)}35%,100%{opacity:0;transform:rotateX(90deg)}}
.hero .lead{margin-top:1.5rem;max-width:36rem;font-size:1.125rem;line-height:2.25rem;color:var(--muted);text-wrap:pretty}
.actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero-media{position:relative;isolation:isolate}
.hero-media .glow{position:absolute;inset:-1rem;z-index:-1;border-radius:2.5rem;background:linear-gradient(to bottom right,color-mix(in oklab,var(--brand) 25%,transparent),transparent,color-mix(in oklab,var(--amber) 30%,transparent));filter:blur(40px)}
.hero-media img{aspect-ratio:4/5;width:100%;border-radius:2rem;object-fit:cover;box-shadow:0 0 0 1px var(--line)}

/* visual stand-in used until a real photo exists (assets/img/hero.jpg) */

/* ---------- topic / numbered cards ---------- */
.topics{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:48rem){.topics{grid-template-columns:repeat(3,1fr)}}
.topic{display:flex;flex-direction:column;border-radius:1.5rem;border:1px solid var(--line);background:var(--surface);padding:1.75rem;transition:transform .15s,border-color .15s,box-shadow .15s}
.topic:hover{transform:translateY(-.25rem);border-color:var(--brand);box-shadow:0 20px 25px -5px color-mix(in oklab,var(--brand) 6%,transparent),0 8px 10px -6px color-mix(in oklab,var(--brand) 6%,transparent)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between}
.glyph{position:relative;width:2.5rem;height:2.5rem;color:var(--ink)}
.glyph svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.glyph::after{content:"";position:absolute;inset-inline-end:-2px;bottom:-2px;width:.6rem;height:.6rem;border-radius:999px;background:var(--cat,var(--emerald))}
.num{font-size:.875rem;color:var(--muted)}
.num.brand{color:var(--brand-ink)}
.topic h3{margin-top:1.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:700;transition:color .15s}
.topic:hover h3{color:var(--brand-ink)}
.topic p{margin-top:.75rem;flex:1;line-height:1.75rem;color:var(--muted)}
.topic .count{margin-top:1.5rem;font-size:.875rem;font-weight:500}
.icards{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:40rem){.icards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.icards{grid-template-columns:repeat(3,1fr)}}
.icard{border-radius:1.5rem;border:1px solid var(--line);background:var(--surface);padding:1.75rem}
.icard h3{margin-top:1.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:700}
.icard p{margin-top:.5rem;line-height:1.75rem;color:var(--muted)}

/* ---------- covers: reference composition, official brand palette ----------
   Title at the start side, category glyph opposite, small TRANSPARENT logo mark in the
   corner (no tile, no box). Five variants, all built from the official blue/navy/neutrals. */
.cover{position:relative;display:block;width:100%;aspect-ratio:40/21;container-type:inline-size;overflow:hidden;border-radius:inherit;--cv-fg:#fff;--cv-acc:#2e83fa;background:#1f1c40;color:var(--cv-fg)}
.cover.v-navy{background:radial-gradient(95% 130% at 0% 100%,rgba(46,131,250,.38),transparent 62%),radial-gradient(60% 70% at 100% 0%,rgba(255,255,255,.05),transparent 70%),#1f1c40}
.cover.v-deep{--cv-acc:#7fb2fc;background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/100% 9cqw,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/9cqw 100%,linear-gradient(160deg,#15132e 0%,#1f1c40 55%,#1d3772 100%)}
.cover.v-blue{--cv-acc:#fff;background:radial-gradient(70% 90% at 0% 0%,rgba(255,255,255,.16),transparent 60%),linear-gradient(to left,#1652b8 0%,#2e83fa 100%)}
.cover.v-light{--cv-fg:#1f1c40;--cv-acc:#2e83fa;background:radial-gradient(80% 110% at 0% 100%,rgba(46,131,250,.14),transparent 60%),#edeff2}
.cover.v-sky{--cv-fg:#1f1c40;--cv-acc:#1b69d0;background:linear-gradient(to left,#eaf2fe 0%,#cfe2fd 100%)}
.cover .cv-in{position:absolute;inset-block:0;inset-inline-start:7cqw;display:flex;flex-direction:column;justify-content:center;max-width:58%}
.cover .cv-t{font-size:5.4cqw;line-height:1.42;font-weight:700;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cover.cv-long .cv-t{font-size:4.5cqw;line-height:1.45}
.cover .cv-t::before{content:"";display:block;width:6cqw;height:.7cqw;min-height:2px;border-radius:9px;background:var(--cv-acc);margin-bottom:2.4cqw}
.cover .cv-g{position:absolute;inset-inline-end:10cqw;top:50%;width:20cqw;height:20cqw;transform:translateY(-50%);color:var(--cv-acc)}
.cover .cv-g svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.cover .cv-g::before{content:"";position:absolute;inset:-22%;border-radius:999px;border:1px dashed color-mix(in oklab,var(--cv-acc) 45%,transparent)}
.cover .cv-l{position:absolute;inset-inline-end:3.6cqw;bottom:3.4cqw;width:9cqw;height:auto;opacity:.95}
.cover-img{object-fit:cover;height:auto}

/* ---------- post cards ---------- */
.grid-posts{margin-top:2.5rem;display:grid;grid-template-columns:1fr;column-gap:2.5rem;row-gap:3.5rem}
@media(min-width:48rem){.grid-posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.grid-posts{grid-template-columns:repeat(3,1fr)}}
.grid-posts.tight{margin-top:2rem;row-gap:2.5rem}
.card{position:relative;display:flex;flex-direction:column}
.media{overflow:hidden;border-radius:1rem;background:color-mix(in oklab,var(--line) 40%,transparent);box-shadow:0 0 0 1px var(--line)}
.card .cover{transition:transform .5s}
.card:hover .cover{transform:scale(1.03)}
.card .body{display:flex;flex-direction:column;min-width:0;margin-top:1.25rem}
.meta{display:flex;flex-wrap:wrap;align-items:center;column-gap:.5rem;row-gap:.25rem;margin-bottom:.75rem;font-size:.75rem;line-height:1rem;color:var(--muted)}
.meta a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.375rem;transition:color .15s}
.meta a:hover{color:var(--ink)}
.cat-dot{display:inline-block;flex-shrink:0;width:.45rem;height:.45rem;border-radius:999px;background:var(--cat)}
.card :is(h2,h3){font-size:1.125rem;line-height:1.375;font-weight:700;text-wrap:balance;transition:color .15s}
.card :is(h2,h3) a::after,.bcard :is(h2,h3) a::after,.mini :is(h2,h3) a::after{content:"";position:absolute;inset:0}
.card:hover :is(h2,h3){color:var(--brand-ink)}
.card p{margin-top:.5rem;font-size:.95rem;line-height:1.75rem;color:var(--muted)}
.card .more{margin-top:.75rem;font-size:.85rem;font-weight:500;color:var(--brand-ink)}

/* blog-index variants */
.bmedia{overflow:hidden;border-radius:.5rem;background:color-mix(in oklab,var(--line) 40%,transparent);box-shadow:0 0 0 1px color-mix(in oklab,var(--line) 60%,transparent)}
@media(min-width:48rem){.bmedia.lg{border-radius:.75rem}}
.bmedia .cover{transition:opacity .5s}
.bcard:hover .bmedia .cover,.mini:hover .bmedia .cover{opacity:.9}
.row4>*,.post-grid>*,.grid-posts>*,.featured>*,.topics>*,.icards>*{min-width:0}
.bmeta{display:flex;align-items:center;gap:.5rem;min-width:0;overflow:hidden;white-space:nowrap;font-size:.75rem;line-height:1rem;color:color-mix(in oklab,var(--muted) 80%,transparent)}
.bmeta .cat{display:inline-flex;align-items:center;gap:.375rem}
.bmeta .go{margin-inline-start:auto;transform:translateX(.25rem);opacity:0;transition:transform .2s,opacity .2s}
.bcard:hover .go,.mini:hover .go{transform:none;opacity:1}
.bmeta .sm{display:none}
@media(min-width:40rem){.bmeta .sm{display:inline}}
.bcard{position:relative;display:flex;flex-direction:column}
.bcard .body{display:flex;flex-direction:column;min-width:0;margin-top:1.25rem}
.bcard.feat :is(h2,h3){font-size:1.5rem;line-height:1.375;font-weight:700;text-wrap:balance}
@media(min-width:48rem){.bcard.feat :is(h2,h3){font-size:2rem;line-height:1.25}}
.bcard.feat p{margin-top:.5rem;line-height:1.75rem;color:var(--muted)}
.bcard.feat .bmeta{margin-top:1rem}
.featured{margin-top:3rem;display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:64rem){.featured{grid-template-columns:1.6fr 1fr;gap:3rem}}
.f-side{display:flex;flex-direction:column;gap:1.25rem}
@media(min-width:64rem){.f-side{border-inline-start:1px solid var(--line);padding-inline-start:3rem}}
.f-side hr{border:0;border-top:1px solid var(--line)}
.mini{position:relative;display:grid;grid-template-columns:8rem 1fr;align-items:center;gap:1rem}
@media(min-width:64rem){.mini{grid-template-columns:10rem 1fr}}
.mini :is(h2,h3){font-size:1rem;line-height:1.375;font-weight:500;text-wrap:balance}
.mini .bmeta{margin-top:.375rem}
/* row card: thumbnail row on mobile, stacked from sm */
.rcard{position:relative;display:grid;grid-template-columns:7rem 1fr;align-items:center;gap:1rem}
.rcard .body{display:flex;flex-direction:column;min-width:0}
.rcard h3{font-size:1rem;line-height:1.375;font-weight:500;text-wrap:balance}
.rcard h3 a::after{content:"";position:absolute;inset:0}
.rcard p{display:none;margin-top:.5rem;font-size:.95rem;line-height:1.75rem;color:var(--muted)}
.rcard .bmeta{margin-top:.375rem}
@media(min-width:40rem){
  .rcard{display:flex;flex-direction:column;align-items:stretch;gap:0;height:100%}
  .rcard .body{margin-top:1.25rem;flex:1}
  .rcard h3{font-size:1.25rem}
  .rcard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .rcard .bmeta{margin-top:auto;padding-top:1.25rem}
}
.rcard:hover .bmedia .cover{opacity:.9}
.rcard:hover .go{transform:none;opacity:1}
.row4{margin-top:2.5rem;display:grid;grid-template-columns:1fr;row-gap:1.5rem}
@media(min-width:40rem){.row4{grid-template-columns:repeat(2,1fr);column-gap:2rem;row-gap:3rem}}
@media(min-width:64rem){.row4{grid-template-columns:repeat(4,1fr)}}
.post-grid{--gap:4rem;--rule:linear-gradient(var(--line),var(--line));margin-top:2.5rem;display:grid;grid-template-columns:1fr;row-gap:1.5rem}
@media(min-width:40rem){.post-grid{grid-template-columns:repeat(2,1fr);column-gap:4rem;row-gap:4rem;background:var(--rule) no-repeat 50% 0/1px 100%}}
@media(min-width:64rem){.post-grid{grid-template-columns:repeat(3,1fr);background:var(--rule) no-repeat calc((100% - 2 * var(--gap)) / 3 + var(--gap) / 2) 0/1px 100%,var(--rule) no-repeat calc((100% - 2 * var(--gap)) * 2 / 3 + var(--gap) * 1.5) 0/1px 100%}}

/* ---------- blog index chrome ---------- */
.page-head{padding-top:3.5rem}
@media(min-width:48rem){.page-head{padding-top:5rem}}
.page-head h1{font-size:2.25rem;line-height:2.5rem;font-weight:700}
@media(min-width:48rem){.page-head h1{font-size:3rem;line-height:1.15}}
.page-head .desc{margin-top:1rem;max-width:42rem;font-size:1.125rem;line-height:2rem;color:var(--muted)}
.page-head .count{margin-top:.5rem;font-size:.875rem;color:var(--muted)}
.back{font-size:.875rem;color:var(--muted);transition:color .15s}
.back:hover{color:var(--brand-ink)}
.page-head .back+h1{margin-top:1rem}
.tabbar{position:sticky;top:4rem;z-index:30;margin-top:2rem;background:color-mix(in oklab,var(--paper) 85%,transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.tabbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tabs{display:flex;gap:1.5rem;overflow-x:auto;margin-inline:-.25rem;padding-inline:.25rem;scrollbar-width:none;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:.5rem;white-space:nowrap;padding-block:.9rem;font-size:.925rem;color:var(--muted);transition:color .15s}
.tab:hover{color:var(--ink)}
.tab[aria-current=page]{color:var(--ink);font-weight:500}
.bar-tools{display:flex;flex-shrink:0;align-items:center;gap:.25rem}
.search-trigger{display:none;align-items:center;gap:.5rem;border-radius:.5rem;border:1px solid var(--line);background:var(--surface);padding:.375rem .75rem;font-size:.875rem;color:var(--muted);transition:color .15s}
.search-trigger:hover{color:var(--ink)}
.search-trigger span{width:6rem;text-align:start}
.search-trigger kbd{font-family:inherit;font-size:.7rem;color:color-mix(in oklab,var(--muted) 70%,transparent)}
.search-trigger svg,.sq-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:40rem){.search-trigger{display:inline-flex}}
.sq-btn{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.5rem;color:var(--muted);transition:color .15s}
.sq-btn:hover{color:var(--ink)}
@media(min-width:40rem){.sq-btn.m-only{display:none}}
.empty{margin-top:3rem;border:1px dashed var(--line);border-radius:1.5rem;padding:3rem 1.5rem;text-align:center;color:var(--muted)}
.empty h2{font-size:1.25rem;font-weight:700;color:var(--ink)}
.empty p{margin-top:.5rem}
.empty .actions{justify-content:center}

/* timeline */
.timeline{margin-top:2.5rem;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin}
.timeline li{position:relative;width:16rem;flex-shrink:0;scroll-snap-align:start;padding-inline-end:2rem}
.timeline li::before{content:"";position:absolute;top:5px;inset-inline:0;height:1px;background:var(--line)}
.tl-dot{position:absolute;top:0;inset-inline-start:0;width:11px;height:11px;border-radius:999px;background:var(--paper);border:1px solid color-mix(in oklab,var(--muted) 60%,transparent)}
.tl-dot.on{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 25%,transparent)}
.timeline a{display:block;padding-top:2.5rem}
.tl-n{font-size:.75rem;letter-spacing:.025em;color:color-mix(in oklab,var(--muted) 80%,transparent);font-variant-numeric:tabular-nums}
.timeline h3{margin-top:.5rem;font-weight:500;line-height:1.375;transition:color .15s}
.timeline a:hover h3{color:var(--brand-ink)}
.timeline p{margin-top:.5rem;font-size:.875rem;line-height:1.5rem;color:var(--muted)}
.timeline time{display:block;margin-top:.75rem;font-size:.75rem;color:color-mix(in oklab,var(--muted) 80%,transparent)}

/* ---------- article ---------- */
.progress{position:fixed;inset-inline:0;top:0;z-index:50;height:2px;background:var(--brand);transform-origin:right;transform:scaleX(0)}
@supports (animation-timeline:scroll()){.progress{animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.a-head{padding-top:3rem}
@media(min-width:48rem){.a-head{padding-top:5rem}}
.a-head .inner{max-width:48rem;margin-inline:auto;text-align:center}
.a-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;color:var(--muted)}
.cat-pill{border-radius:999px;padding:.25rem .75rem;font-weight:500;color:color-mix(in oklab,var(--cat) 80%,var(--ink));background:color-mix(in oklab,var(--cat) 14%,transparent)}
.cat-pill:hover{text-decoration:underline}
.a-head h1{margin-top:1.25rem;font-size:1.875rem;font-weight:700;line-height:1.45;text-wrap:balance}
@media(min-width:48rem){.a-head h1{font-size:3rem;line-height:1.35}}
.a-head .lead{margin:1.25rem auto 0;max-width:42rem;font-size:1.125rem;line-height:2rem;color:var(--muted);text-wrap:pretty}
.a-cover{margin:2.5rem auto 0;max-width:64rem;overflow:hidden;border-radius:1.5rem;box-shadow:0 0 0 1px var(--line)}
.a-grid{margin-top:3rem;display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:64rem){.a-grid{grid-template-columns:1fr minmax(0,44rem) 1fr}}
.toc{display:none}
@media(min-width:64rem){.toc{display:block}}
.toc nav{position:sticky;top:6rem;max-height:calc(100dvh - 8rem);overflow-y:auto;font-size:.875rem}
.toc .tt{margin-bottom:.75rem;font-weight:700}
.toc ol{display:flex;flex-direction:column;gap:.5rem;border-inline-start:1px solid var(--line)}
.toc li.sub{padding-inline-start:.75rem}
.toc a{display:block;margin-inline-start:-1px;border-inline-start:2px solid transparent;padding-inline-start:1rem;line-height:1.5rem;color:var(--muted);transition:color .15s,border-color .15s}
.toc a:hover{color:var(--ink)}
.toc a[data-active]{border-color:var(--brand);color:var(--ink)}
.a-foot{margin-top:3rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;border-block:1px solid var(--line);padding-block:1.5rem}
.a-foot .upd{font-size:.875rem;color:var(--muted)}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.875rem}
.share .l{color:var(--muted)}
.pill{border-radius:999px;border:1px solid var(--line);padding:.375rem .75rem;transition:border-color .15s}
.pill:hover{border-color:var(--ink)}
.related{margin-top:6rem}
.related h2{font-size:1.5rem;line-height:2rem;font-weight:700}

/* prose (reference: 18px / 1.78, headings 1.6em / 1.3em) */
.prose{min-width:0;font-size:1.125rem;line-height:1.7778;color:var(--prose-body)}
.prose>:first-child{margin-top:0}
.prose p{margin-block:1.3333em}
.prose h2,.prose h3,.prose h4{color:var(--prose-h);font-weight:700;line-height:1.5;letter-spacing:0}
.prose h2{font-size:1.6em;margin-top:1.8667em;margin-bottom:1.0667em}
.prose h3{font-size:1.3em;margin-top:1.6667em;margin-bottom:.6667em}
.prose h4{font-size:1.1em;margin-top:1.5em;margin-bottom:.5em}
.prose h2+*,.prose h3+*,.prose h4+*,.prose hr+*{margin-top:0}
.prose a{color:var(--prose-h);font-weight:500;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;transition:color .15s}
.prose a:hover{color:var(--brand-ink)}
.prose strong{color:var(--prose-h);font-weight:700}
.prose ul,.prose ol{margin-block:1.3333em;padding-inline:1.4em 0}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-block:.6667em;padding-inline-start:.4em}
.prose ul>li::marker{color:var(--prose-bullet)}
.prose ol>li::marker{color:var(--prose-count)}
.prose blockquote{margin-block:1.6667em;background:var(--brand-soft);border-inline-start:3px solid var(--line);border-start-end-radius:.75rem;border-end-end-radius:.75rem;padding-block:.25em;padding-inline:1.25em 1em;color:var(--prose-h);font-weight:500}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:3.1111em}
.prose img{border-radius:1rem;height:auto;margin:1.7778em auto}
.prose table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;margin-block:2em;font-size:.85em;border:1px solid var(--line);border-radius:1rem}
.prose th,.prose td{padding:.75em 1em;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.prose th{color:var(--prose-h);font-weight:700}
.prose tr:nth-child(2n) td{background:color-mix(in oklab,var(--line) 35%,transparent)}
.prose code{font-size:.89em;font-weight:600;color:var(--prose-h)}

/* ---------- CTA band (reference newsletter band, official navy) ---------- */
.band{position:relative;overflow:hidden;border-radius:1.5rem;background:var(--band);color:#fff;transition:background-color .15s}
.band:hover{background:var(--band-h)}
.band .blob{pointer-events:none;position:absolute;inset-inline-end:-4rem;top:-5rem;width:18rem;height:18rem;border-radius:999px;background:rgba(46,131,250,.35);filter:blur(48px)}
.band .in{position:relative;display:flex;flex-direction:column;gap:1.5rem;padding:2rem}
@media(min-width:48rem){.band .in{flex-direction:row;align-items:center;justify-content:space-between;padding:3rem}}
.band .txt{max-width:38rem}
.band-kick{margin-bottom:.75rem;font-size:.875rem;font-weight:500;color:#9cc4fd}
.band .ttl{display:flex;align-items:center;gap:.85rem}
.band-mark{width:3.25rem;height:auto;flex:none}
.band .ttl a{font-size:1.4rem;line-height:1.4;font-weight:700}
.band .ttl a::after{content:"";position:absolute;inset:0}
.band p{margin-top:1rem;font-size:1.125rem;line-height:2rem;color:rgba(255,255,255,.85)}
.band-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.75rem;flex-shrink:0}
.btn-white{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;align-self:flex-start;flex-shrink:0;border-radius:999px;background:#fff;color:var(--navy);padding:.75rem 1.5rem;font-weight:500;transition:background-color .15s}
.btn-white:hover{background:rgba(255,255,255,.9)}
.btn-white svg{width:16px;height:16px}
.btn-ghost{display:inline-flex;align-items:center;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:#fff;padding:.75rem 1.5rem;font-weight:500;transition:border-color .15s}
.btn-ghost:hover{border-color:#fff}

.wa{position:fixed;inset-inline-end:1.25rem;bottom:1.25rem;z-index:35;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:999px;background:#25d366;box-shadow:0 8px 22px rgba(37,211,102,.35);transition:transform .15s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:26px;height:26px;fill:#fff}

/* ---------- search palette (dialog) ---------- */
.palette{border:1px solid var(--line);background:var(--surface);width:min(40rem,100% - 2rem);max-width:none;color:var(--ink);border-radius:1rem;margin:12vh auto auto;padding:0;overflow:hidden;box-shadow:0 24px 80px -12px rgba(0,0,0,.45)}
.palette::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:rgba(10,9,14,.55)}
.palette[open]{animation:palette-in .14s ease-out}
@keyframes palette-in{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.pal-bar{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--line);padding-inline:1.25rem}
.pal-bar svg{width:20px;height:20px;flex:none;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pal-bar input{height:4rem;min-width:0;flex:1;appearance:none;-webkit-appearance:none;background:transparent;border:0;font-size:1.125rem;outline:none}
.pal-bar input::placeholder{color:color-mix(in oklab,var(--muted) 70%,transparent)}
.pal-bar input::-webkit-search-cancel-button{display:none}
.pal-bar kbd{display:none;border-radius:.375rem;border:1px solid var(--line);padding:.125rem .375rem;font-family:inherit;font-size:.7rem;color:var(--muted)}
@media(min-width:40rem){.pal-bar kbd{display:block}}
.pal-res{max-height:min(60vh,32rem);overflow-y:auto;padding:.5rem}
.palette-group{padding:.75rem .75rem .35rem;font-size:.8rem;color:var(--muted)}
.palette-item{display:flex;align-items:center;gap:.9rem;border-radius:.6rem;padding:.8rem .75rem;color:var(--ink)}
.palette-item[aria-selected=true]{background:color-mix(in oklab,var(--ink) 7%,transparent)}
.palette-item .arrow{flex-shrink:0;color:var(--muted)}
.palette-item[aria-selected=true] .arrow{color:var(--ink)}
.palette-item .tx{min-width:0;flex:1}
.palette-item .t,.palette-item .s{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-item .s{margin-top:.125rem;font-size:.875rem;color:var(--muted)}
.palette-item mark{background:none;color:var(--brand-ink)}
.palette-empty{padding:2rem 1rem;text-align:center;color:var(--muted)}

/* ---------- about ---------- */
.eyebrow{font-size:.875rem;font-weight:500;color:var(--brand-ink)}
.stack{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem;font-size:1.125rem;line-height:2.25rem}
.stack .m{color:var(--muted)}
.narrow{max-width:48rem;margin-inline:auto}
.dl{margin-top:2.5rem;display:grid;grid-template-columns:1fr;column-gap:2.5rem;row-gap:2rem}
@media(min-width:40rem){.dl{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.dl{grid-template-columns:repeat(3,1fr)}}
.dl>li{display:flex;gap:1rem;border-top:1px solid var(--line);padding-top:1.25rem}
.tile{display:grid;place-items:center;flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:1rem;background:var(--brand-soft);color:var(--brand-ink)}
.tile svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dl .dt{font-size:1.125rem;line-height:1.75rem;font-weight:700}
.dl .dd{margin-top:.5rem;line-height:1.75rem;color:var(--muted)}
.avatar{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ---------- services (reference newsletter page) ---------- */
.statband{border-radius:2rem;background:var(--band);padding:3rem 1.5rem;box-shadow:0 0 0 1px rgba(255,255,255,.1);color:#fff}
@media(min-width:48rem){.statband{padding:3rem}}
.statband h2{text-align:center;font-size:1.5rem;line-height:2rem;font-weight:700}
@media(min-width:48rem){.statband h2{font-size:1.875rem;line-height:2.25rem}}
.statband ul{margin-top:2.5rem;display:grid;grid-template-columns:repeat(2,1fr);column-gap:2rem;row-gap:2.5rem;text-align:center}
@media(min-width:40rem){.statband ul{grid-template-columns:repeat(4,1fr)}}
.statband b{display:block;font-size:2.25rem;line-height:2.5rem;font-weight:700}
.statband span{display:block;margin-top:.5rem;font-size:.95rem;color:rgba(255,255,255,.7)}
.join{display:grid;grid-template-columns:1fr;align-items:center;gap:2.5rem;overflow:hidden;border-radius:2rem;border:1px solid var(--line);background:var(--surface);padding:2rem}
@media(min-width:48rem){.join{grid-template-columns:1fr 1fr;padding:3rem}}
.join h2{font-size:1.875rem;line-height:1.375;font-weight:700}
.join p{margin-top:1rem;font-size:1.125rem;line-height:2.25rem;color:var(--muted)}
.join .btn{margin-top:2rem}
.steps-list{display:flex;flex-direction:column;gap:1rem;counter-reset:s}
.steps-list li{display:flex;gap:1rem;align-items:flex-start;border-radius:1rem;background:var(--paper);border:1px solid var(--line);padding:1rem 1.25rem}
.steps-list li::before{counter-increment:s;content:counter(s,arabic-indic);display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;font-size:.9rem}
.steps-list b{display:block;font-weight:700}
.steps-list span{display:block;margin-top:.25rem;font-size:.925rem;line-height:1.6rem;color:var(--muted)}

/* ---------- contact ---------- */
.socials{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}


.frow{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:40rem){.frow{grid-template-columns:1fr 1fr}}
.fld{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem}
.frow .fld{margin-top:1rem}
.fld label{font-size:.875rem;font-weight:500}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:.75rem;padding:.75rem 1rem;font-size:1rem;outline:none;transition:border-color .15s,box-shadow .15s}
.fld textarea{min-height:8rem;resize:vertical;line-height:1.75}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 18%,transparent)}

.fnote{margin-top:.875rem;font-size:.875rem;color:var(--muted);text-align:center}
.faq{margin-top:2rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.25rem;font-size:1.125rem;font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:1.4rem;line-height:1;color:var(--muted);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding-bottom:1.25rem;line-height:2rem;color:var(--muted)}

/* ---------- 404 ---------- */
.nf{display:grid;min-height:60dvh;place-items:center;text-align:center}
.nf .code{font-size:6rem;line-height:1;font-weight:700;color:var(--brand)}
.nf h1{margin-top:1rem;font-size:1.5rem;line-height:2rem;font-weight:700}
.nf p{margin-top:.75rem;color:var(--muted)}
.nf .actions{justify-content:center}

/* ---------- restored business sections (reference typography / spacing) ---------- */
.sh{max-width:46rem}
.sh .eyebrow{margin-bottom:.6rem}
.sh .sec-intro{margin-top:.75rem;font-size:1.05rem;line-height:1.9}
.hl{color:var(--brand)}
.hero-media img{object-position:50% 55%}
.ilink{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.5rem;font-weight:500;color:var(--brand-ink)}
.ilink:hover{text-decoration:underline}
.split{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:64rem){.split{grid-template-columns:1.1fr 1fr;gap:4rem}}
.split .stack{margin-top:1.25rem}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.statc{border-radius:1.5rem;border:1px solid var(--line);background:var(--surface);padding:1.5rem}
.statc b{display:block;font-size:1.6rem;line-height:1.3;font-weight:700}
.statc span{display:block;margin-top:.35rem;font-size:.9rem;color:var(--muted)}
.sub-h{margin-top:3.5rem;font-size:1.25rem;font-weight:700}
.crumb{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-bottom:1rem;font-size:.85rem;color:var(--muted)}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rotator>span{animation:none;opacity:0}
  .rotator>span:first-child{opacity:1}
}
.pal-hint{border-top:1px solid var(--line);padding:.7rem 1.25rem;font-size:.8rem;color:var(--muted)}
.related .eyebrow{margin-bottom:.4rem}
@media(min-width:40rem){.icards.c4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:80rem){.icards.c4{grid-template-columns:repeat(4,1fr)}}
.sec-head{flex-wrap:wrap}
.sec-head>.sh{flex:1 1 28rem}

/* ---------- hero: text-led (no stock image) ---------- */
.hero-text{position:relative;isolation:isolate;padding-top:3.5rem}
@media(min-width:48rem){.hero-text{padding-top:5.5rem}}
.hero-text::before{content:"";position:absolute;z-index:-1;inset-inline-end:0;top:0;width:min(38rem,60%);height:30rem;background:radial-gradient(55% 55% at 35% 40%,color-mix(in oklab,var(--brand) 15%,transparent),transparent 72%);pointer-events:none}
.hero-text::after{content:"";position:absolute;z-index:-1;inset-inline-end:2rem;top:1.5rem;width:min(26rem,38%);height:21rem;background-image:radial-gradient(color-mix(in oklab,var(--ink) 18%,transparent) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent);mask-image:radial-gradient(closest-side,#000 25%,transparent);pointer-events:none}
.hero-copy{max-width:56rem}
.hero-text .lead{max-width:42rem}
.hero-facts{margin-top:3.5rem;display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.hero-facts div{padding:1.35rem 0 1.1rem}
.hero-facts div:nth-child(even){border-inline-start:1px solid var(--line);padding-inline-start:1.25rem}
.hero-facts div:nth-child(n+3){border-top:1px solid var(--line)}
@media(min-width:48rem){
  .hero-facts{grid-template-columns:repeat(4,1fr)}
  .hero-facts div{padding-bottom:0}
  .hero-facts div:nth-child(n+3){border-top:0}
  .hero-facts div+div{border-inline-start:1px solid var(--line);padding-inline-start:1.75rem}
}
.hero-facts b{display:block;font-size:clamp(1.75rem,3.2vw,2.4rem);line-height:1.15;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-facts span{display:block;margin-top:.4rem;font-size:.92rem;color:var(--muted)}

/* ---------- process: numbered sequence (vertical → horizontal ≥64rem) ---------- */
.process-panel{position:relative;overflow:hidden;border-radius:2rem;border:1px solid var(--line);background:var(--surface);padding:2rem 1.5rem}
@media(min-width:48rem){.process-panel{padding:3rem}}
.process-panel::before{content:"";position:absolute;inset-inline-end:-9rem;top:-9rem;width:24rem;height:24rem;border-radius:999px;background:radial-gradient(closest-side,color-mix(in oklab,var(--brand) 13%,transparent),transparent);pointer-events:none}
.process-top{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem 2rem}
.steps{position:relative;margin-top:2.75rem;display:grid;grid-template-columns:1fr;gap:2rem}
.step{position:relative;display:grid;grid-template-columns:3rem 1fr;column-gap:1.25rem;align-items:start}
.step-node{position:relative;z-index:1;display:grid;place-items:center;width:3rem;height:3rem;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);color:var(--brand-ink);font-size:1.05rem;font-weight:700;transition:background-color .45s ease,border-color .45s ease,color .45s ease,box-shadow .45s ease;transition-delay:calc(var(--i) * .3s)}
.steps.in .step-node{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff;box-shadow:0 0 0 6px var(--brand-soft)}
[data-theme=dark] .steps.in .step-node{background:var(--brand);border-color:var(--brand);color:#0e0d1a}
.step-body h3{margin-top:.55rem;font-size:1.125rem;line-height:1.6;font-weight:700;transition:color .2s}
.step-body p{margin-top:.45rem;font-size:.975rem;line-height:1.85;color:var(--muted)}
.step:hover .step-body h3{color:var(--brand-ink)}
.step:not(:last-child)::before,.step:not(:last-child)::after{content:"";position:absolute;inset-inline-start:calc(1.5rem - 1px);top:3rem;width:2px;height:calc(100% - 3rem + 2rem)}
.step:not(:last-child)::before{background:var(--line)}
.step:not(:last-child)::after{background:var(--brand);transform:scaleY(0);transform-origin:top;transition:transform .5s ease;transition-delay:calc(var(--i) * .3s + .2s)}
.steps.in .step:not(:last-child)::after{transform:scaleY(1)}
@media(min-width:64rem){
  .steps{grid-template-columns:repeat(4,1fr)}
  .step{grid-template-columns:1fr;row-gap:1.1rem}
  .step-body h3{margin-top:0}
  .step:not(:last-child)::before,.step:not(:last-child)::after{top:calc(1.5rem - 1px);inset-inline-start:3rem;width:calc(100% - 3rem + 2rem);height:2px}
  .step:not(:last-child)::after{transform:scaleX(0);transform-origin:right}
  .steps.in .step:not(:last-child)::after{transform:scaleX(1)}
}

/* ---------- testimonials: balanced editorial cards ---------- */
.tgrid{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:48rem){.tgrid{grid-template-columns:repeat(2,1fr)}}
.tcard{position:relative;display:flex;flex-direction:column;border-radius:1.5rem;border:1px solid var(--line);background:var(--surface);padding:2rem;transition:border-color .2s,transform .2s,box-shadow .2s}
@media(min-width:48rem){.tcard{padding:2.25rem 2.5rem}}
.tcard:hover{border-color:color-mix(in oklab,var(--brand) 35%,var(--line));transform:translateY(-2px);box-shadow:0 22px 44px -28px color-mix(in oklab,var(--navy) 40%,transparent)}
.tq{width:2.25rem;height:2.25rem;color:var(--brand);flex:none}
.tcard blockquote{flex:1;margin-top:1.1rem;font-size:1.125rem;line-height:2.05;font-weight:500;color:var(--ink);text-wrap:pretty}
.tcard figcaption{display:flex;align-items:center;gap:.9rem;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.tava{display:grid;place-items:center;flex:none;width:3rem;height:3rem;overflow:hidden;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;font-size:1.1rem}
.tava.logo{background:#fff;box-shadow:0 0 0 1px var(--line)}
.tava.logo img{width:100%;height:100%;object-fit:contain;padding:.15rem}
.tmeta b{display:block;font-weight:700;line-height:1.5}
.tmeta span{display:block;margin-top:.1rem;font-size:.875rem;color:var(--muted)}
@media(min-width:64rem){.tgrid:has(>.tcard:nth-child(3)){grid-template-columns:repeat(3,1fr)}}
@media(max-width:39.99rem){
  .hero-text{padding-top:2rem}
  .hero-text h1{margin-top:1.1rem}
  .hero-text .lead{margin-top:1.1rem;font-size:1.02rem;line-height:1.95}
  .hero-text .actions{margin-top:1.5rem;gap:.5rem}
  .hero-text .actions .btn{padding:.7rem 1rem;font-size:.95rem}
  .hero-facts{margin-top:2rem}
  .hero-facts div{padding:.95rem 0 .8rem}
  .hero-facts div:nth-child(even){padding-inline-start:1rem}
  .hero-facts b{font-size:1.6rem}
  .hero-facts span{margin-top:.25rem;font-size:.85rem}
}
@media(max-width:39.99rem){.hero-text::after{display:none}}

/* =====================================================================
   UI/UX review fixes — Senior Designer (F#) + Head of UI/UX (P#), 2026-10-10
   ===================================================================== */

/* rhythm: one section-gap token (P2-17, F12) */
:root{--sec-gap:5rem}
@media(min-width:48rem){:root{--sec-gap:7rem}}
.section,.related{margin-top:var(--sec-gap)}
main{overflow-x:clip}

/* headings: Arabic line-height, balanced wrapping, one h2 size (F2, F19, P2-16) */
.h-sec,.h-sec.lg{line-height:1.35;text-wrap:balance}
@media(min-width:48rem){.h-sec,.h-sec.lg{font-size:2.25rem;line-height:1.3}}
.page-head h1{line-height:1.3;text-wrap:balance}
.topic h3,.icard h3,.dl .dt,.step-body h3,.band .ttl a,.join h2,.faq summary{text-wrap:balance}
:is(.page-head .desc,.sec-intro,.band p,.prose p,.prose li,.dl .dd,.topic p,.icard p,.faq .ans){text-wrap:pretty}
.eyebrow{margin-bottom:.6rem}
.sec-intro{margin-top:.75rem;max-width:42rem;font-size:1.05rem;line-height:1.9;color:var(--muted)}
.num,.step-node{font-variant-numeric:tabular-nums}

/* hero headline on small screens (F1) */
.hero h1 .line{font-size:min(2.875rem,calc((100vw - 2.5rem) / 12.5));margin-top:.2em}
.hero h1 .hl{display:inline-block}
@media(max-width:47.99rem){.hero h1{font-size:clamp(1.75rem,8.6vw,2.25rem)}}

/* process: equal title baselines (F5) */
.step{align-content:start}

/* blog meta: wrap instead of clipping + AA contrast (F6, P1-1) */
.bmeta{flex-wrap:wrap;row-gap:.25rem;overflow:visible;white-space:normal;color:var(--muted)}
.bmeta>*{white-space:nowrap}
.tl-n,.timeline time,.search-trigger kbd{color:var(--muted)}
.pal-bar input::placeholder{color:var(--muted)}
/* fewer truncated titles (F7) */
@media(min-width:64rem){.mini{grid-template-columns:8rem 1fr}}
.mini h2.clamp2,.timeline h3.clamp2{-webkit-line-clamp:3}
.timeline li{width:18rem}

/* homepage pacing: 4-up extra services + tinted training band (F8, F20) */
@media(min-width:64rem){.sub-h+.dl{grid-template-columns:repeat(4,1fr)}.sub-h+.dl>li{flex-direction:column;gap:.9rem}}
.home #training{position:relative;isolation:isolate;padding-block:4.5rem}
.home #training::before{content:"";position:absolute;z-index:-1;inset-block:0;inset-inline:calc(50% - 50vw);background:color-mix(in oklab,var(--brand-soft) 55%,var(--paper));border-block:1px solid var(--line)}
.home #training .tile{background:var(--surface);box-shadow:0 0 0 1px var(--line)}
@media(min-width:48rem) and (max-width:63.99rem){.topics{grid-template-columns:1fr}}

/* forms: rhythm, wider service select, visible field borders, required marker (F9, F10, P1-6) */
.frow{gap:0 1rem}
.fld input,.fld select,.fld textarea{border-color:color-mix(in oklab,var(--muted) 70%,var(--surface))}
.fld:has([required]) label::after{content:" *";color:var(--brand-ink)}

/* about: lighter logo panel (F11) */

/* stats at 375 (F13) */
.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:39.99rem){.statc{padding:1.25rem 1.1rem}.statc b{font-size:1.25rem}}


/* article: wider TOC column, centred pair (P1-9) + collapsible TOC below 64rem (F24) */
@media(min-width:64rem){.a-grid{grid-template-columns:minmax(11rem,15rem) minmax(0,44rem);justify-content:center}.a-grid>[aria-hidden=true]{display:none}}
.toc-m{margin-bottom:2rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface)}
.toc-m summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.75rem;padding:.75rem 1.25rem;font-weight:700;cursor:pointer;list-style:none}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--muted);transition:transform .15s}
.toc-m[open] summary::after{transform:rotate(45deg)}
.toc-m ol{display:flex;flex-direction:column;gap:.15rem;padding:0 1.25rem 1rem;font-size:.925rem}
.toc-m li.sub{padding-inline-start:1rem}
.toc-m a{display:block;padding-block:.4rem;color:var(--muted)}
.toc-m a:hover{color:var(--ink)}
@media(min-width:64rem){.toc-m{display:none}}

/* covers: soften light variants in dark mode (F16) */
[data-theme=dark] .cover.v-light,[data-theme=dark] .cover.v-sky{filter:brightness(.82) saturate(.9)}

/* icons: one stroke weight (F17) */
:is(.glyph,.tile,.icon-btn,.sq-btn,.search-trigger,.pal-bar) svg :is(path,circle,rect,ellipse){vector-effect:non-scaling-stroke}
.glyph svg,.tile svg,.why .tile svg{stroke-width:1.75}

/* buttons: hover/active feedback (F18) */
.btn{transition:background-color .15s,border-color .15s,color .15s,transform .1s}
:is(.btn,.btn-white,.btn-ghost,.pill):active{transform:translateY(1px)}
.btn-brand:hover{opacity:1;background:var(--navy)}
[data-theme=dark] .btn-brand:hover{background:var(--brand-ink)}
.btn-white:hover{background:#eaf2fe}
:is(.btn,.btn-white) svg{transition:transform .15s}
:is(.btn,.btn-white):hover svg{transform:translateX(-3px)}

/* contrast (P1-2, P1-3, P1-4) */
.cat-pill{color:color-mix(in oklab,var(--cat) 50%,var(--ink))}
[data-theme=dark] .btn-ink:hover,[data-theme=dark] .mmenu nav a.mm-cta:hover{color:var(--paper)}
.skip{background:var(--ink);color:var(--paper)}

/* touch targets ≥ 44px (P1-8) */
@media(max-width:63.99rem){.icon-btn{width:2.75rem;height:2.75rem}}
.sq-btn{width:2.75rem;height:2.75rem}
.pill{min-height:2.75rem;display:inline-flex;align-items:center;font-size:.875rem;font-weight:400}

/* CTA band: kicker styled as an eyebrow; title is now an h2 (P1-11, P2-15) */
.band .band-kick{margin:0 0 .75rem;font-size:.875rem;line-height:1.25rem;color:var(--amber)}
.band .band-t{font-size:inherit;font-weight:inherit;line-height:inherit}

/* palette, tabs, mobile menu (P2-12, P2-13, P2-14) */
.pal-bar:focus-within{box-shadow:inset 0 -2px 0 var(--brand)}
.tab:focus-visible,.timeline a:focus-visible{outline-offset:-2px}
@media(max-width:63.99rem){.tabs{-webkit-mask-image:linear-gradient(to right,transparent,#000 2rem);mask-image:linear-gradient(to right,transparent,#000 2rem)}}
.mmenu nav a[aria-current=page]{background:var(--brand-soft);font-weight:500}

/* breadcrumbs: start-aligned by default, centred in the article header (P2-22) */
.crumb{justify-content:flex-start}
.a-head .crumb{justify-content:center}

/* tokens instead of hardcoded colours (P2-19) */
[data-theme=dark] .btn-brand,[data-theme=dark] .steps.in .step-node{color:var(--paper)}

/* card meta separator spacing (F22) */
.meta>span{color:var(--muted)}

/* sign-off polish (Head of UI/UX re-test) */
.toc-m a{padding-block:.72rem}

/* covers: below 17rem the in-cover title would render under ~14px — switch to a glyph-only
   composition (the real title is always printed beside/below the thumbnail; nothing is removed
   from the DOM or the database — the cover is aria-hidden decoration) */
@container (max-width:17rem){
  .cover .cv-in{display:none}
  .cover .cv-g{inset-inline:0;margin-inline:auto;width:34cqw;height:34cqw}
  .cover .cv-g::before{inset:-24%}
  .cover .cv-l{width:13cqw;inset-inline-end:5cqw;bottom:5cqw}
}

/* final review — mobile density: tighter card padding */
@media(max-width:39.99rem){
  .topic,.icard,.why>div{padding:1.4rem}
  .topic h3,.icard h3{margin-top:1rem}
  .process-panel{padding:1.75rem 1.25rem}
}

/* article banner (single.php): category identity + official lockup; the H1 above carries the title */
.cover.acv{aspect-ratio:auto;display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.5rem 2.5rem;min-height:clamp(13rem,32vw,23rem);padding:clamp(1.5rem,5vw,3.75rem)}
.acv-lw{position:relative;z-index:1;isolation:isolate;display:grid;place-items:center}
.acv-lw::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:44rem;height:44rem;translate:-50% -50%;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 1.9rem,color-mix(in oklab,var(--cv-fg) 9%,transparent) 1.9rem calc(1.9rem + 1px));-webkit-mask:radial-gradient(closest-side,transparent 31%,#000 32%,transparent 92%);mask:radial-gradient(closest-side,transparent 31%,#000 32%,transparent 92%)}
.acv-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.acv-ic{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:1rem;color:var(--cv-acc);background:color-mix(in oklab,var(--cv-acc) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--cv-acc) 35%,transparent)}
.acv-ic svg{width:1.75rem;height:1.75rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.acv-k{margin-top:1.4rem;font-size:.9375rem;font-weight:500;opacity:.9}
.acv-c{margin-top:.35rem;font-size:clamp(1.75rem,3.4vw,2.75rem);font-weight:700;line-height:1.3;text-wrap:balance}
.acv-c::before{content:"";display:block;width:2.75rem;height:.25rem;border-radius:9px;background:var(--cv-acc);margin-bottom:1rem}
.acv-n{margin-top:.6rem;font-size:.9375rem;opacity:.9}
.acv-l{width:clamp(6.5rem,14.5vw,10.5rem);height:auto}
@media(max-width:35.99rem){
  .cover.acv{grid-template-columns:1fr;min-height:0}
  .acv-lw{position:absolute;inset-inline-end:1.5rem;top:1.25rem}
  .acv-l{width:5.25rem}
  .acv-lw::before{width:22rem;height:22rem}
}

/* homepage, condensed: merged sections (no copy removed) */
.about-lead{margin-top:1.25rem;max-width:34rem;font-size:1.125rem;line-height:1.9;font-weight:400;color:var(--muted);text-wrap:pretty}
.about-lead b{color:var(--ink);font-weight:700}
.trust{display:grid;grid-template-columns:1fr;gap:4rem}
.trust .dl{margin-top:2rem}
@media(min-width:64rem){.trust{grid-template-columns:1.1fr 1fr;gap:4.5rem;align-items:start}.trust .dl{grid-template-columns:repeat(2,1fr);row-gap:1.5rem;column-gap:1.75rem}.trust .dl>li{flex-direction:column;gap:.75rem}}
.trust .tile{width:2.75rem;height:2.75rem;border-radius:.85rem}
.trust .dl .dd{margin-top:.25rem}
#guarantees,#faq,#contact-form{scroll-margin-top:6rem}
.topics.compact{margin-top:1.25rem}
.topics.compact .topic{padding:1.4rem 1.5rem}
.topics.compact h4{margin-top:1rem;font-size:1.125rem;line-height:1.7;font-weight:700;text-wrap:balance;transition:color .15s}
.topics.compact .topic:hover h4{color:var(--brand-ink)}
.topics.compact .topic p{margin-top:.4rem}
.topics.compact .count{margin-top:1rem}
#blog .sub-h{margin-top:3rem}
/* homepage, phones + tablets: the 3 latest posts as row cards (same pattern as the blog's lists);
   topic cards put the icon beside the text */
@media(max-width:63.99rem){
  #blog .grid-posts{grid-template-columns:1fr;row-gap:1.5rem}
  #blog .card{display:grid;grid-template-columns:clamp(6.5rem,20vw,10rem) 1fr;gap:1rem 1.25rem;align-items:start}
  #blog .card .media .cover{aspect-ratio:1/1}
  #blog .card .body{margin-top:0}
  .topics.compact .topic{display:grid;grid-template-columns:auto 1fr;align-content:start;column-gap:1rem;padding:1.25rem}
  .topics.compact .card-top{grid-row:span 3;flex-direction:column;align-items:center;justify-content:flex-start;gap:.6rem}
  .topics.compact h4{margin-top:0}
  .topics.compact .count{margin-top:.6rem}
}
@media(max-width:39.99rem){
  #blog .card .more{display:none}
}


/* ===================== pages: about / services / contact ===================== */
/* shared page-hero type (about + services) */
.ab-hero,.sv-hero{padding-top:2.75rem}
@media(min-width:48rem){.ab-hero,.sv-hero{padding-top:4.5rem}}
.ab-hero h1,.sv-hero h1{font-size:clamp(2rem,4.4vw,3.25rem);line-height:1.3;font-weight:700;text-wrap:balance}
.ab-hero .role,.sv-lead{margin-top:1.25rem;max-width:38rem;font-size:1.125rem;line-height:2;color:var(--muted);text-wrap:pretty}

/* about — hero: text + the official site's photo */
.ab-hero-grid{display:grid;grid-template-columns:1fr;gap:2.25rem;align-items:center}
@media(min-width:56rem){.ab-hero-grid{grid-template-columns:1.25fr .95fr;gap:4.5rem}}
/* story + figures */
.ab-story-grid{display:grid;gap:1.25rem}
@media(min-width:56rem){.ab-story-grid{grid-template-columns:.85fr 1.15fr;gap:4.5rem;align-items:start}.ab-story-grid>header{position:sticky;top:6.5rem}}
.ab-story .stack{margin-top:0;max-width:40rem}
.ab-stats{margin-top:3.25rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.ab-stats li{padding:1.35rem 0 1.1rem}
.ab-stats li:nth-child(even){border-inline-start:1px solid var(--line);padding-inline-start:1.25rem}
.ab-stats li:nth-child(n+3){border-top:1px solid var(--line)}
@media(min-width:48rem){
  .ab-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ab-stats li{padding-bottom:0}
  .ab-stats li:nth-child(n+3){border-top:0}
  .ab-stats li+li{border-inline-start:1px solid var(--line);padding-inline-start:1.75rem}
}
.ab-stats b{display:block;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.25;font-weight:700}
.ab-stats span{display:block;margin-top:.4rem;font-size:.9rem;color:var(--muted)}
/* values: numbered editorial list (no cards) */
.ab-values{margin-top:2.25rem;display:grid;grid-template-columns:1fr;column-gap:2.5rem}
@media(min-width:40rem){.ab-values{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){.ab-values{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ab-values li{border-top:1px solid var(--line);padding:1.4rem 0 1.6rem}
.ab-n{display:block;font-size:.875rem;font-weight:700;color:var(--brand-ink)}
.ab-values h3{margin-top:.6rem;font-size:1.2rem;line-height:1.6;font-weight:700}
.ab-values p{margin-top:.35rem;line-height:1.9;color:var(--muted);text-wrap:pretty}
/* guarantees: heading beside a checklist panel */
.ab-guar{display:grid;gap:2rem}
@media(min-width:64rem){.ab-guar{grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}.ab-guar>.sh{position:sticky;top:6.5rem}}
.ab-checks{display:grid;grid-template-columns:1fr;border-radius:1.75rem;border:1px solid var(--line);background:var(--surface);padding:.25rem 1.4rem}
@media(min-width:40rem){.ab-checks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.25rem;padding:.5rem 2rem}}
.ab-checks li{display:flex;gap:.85rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.ab-checks li:last-child{border-bottom:0}
@media(min-width:40rem){.ab-checks li:nth-last-child(2){border-bottom:0}}
.ab-ck{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;margin-top:.15rem;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink)}
.ab-ck svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ab-checks h3{font-size:1.05rem;line-height:1.6;font-weight:700}
.ab-checks p{margin-top:.2rem;font-size:.95rem;line-height:1.8;color:var(--muted);text-wrap:pretty}

/* services — hero with an index of the three groups */
.sv-hero-grid{display:grid;gap:2rem;align-items:end}
@media(min-width:56rem){.sv-hero-grid{grid-template-columns:1.45fr .8fr;gap:4.5rem}}
.sv-index{display:flex;flex-direction:column;border-radius:1.5rem;border:1px solid var(--line);background:var(--surface);padding:.35rem 1.25rem}
.sv-index a{display:flex;align-items:center;gap:1rem;padding:1rem .25rem;border-bottom:1px solid var(--line);font-weight:500;transition:color .15s}
.sv-index a:last-child{border-bottom:0}
.sv-index b{min-width:2.25rem;font-size:1.75rem;line-height:1;font-weight:700;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.sv-index a::after{content:"←";margin-inline-start:auto;color:var(--muted);transition:transform .15s,color .15s}
.sv-index a:hover{color:var(--brand-ink)}
.sv-index a:hover::after{transform:translateX(-3px);color:var(--brand-ink)}
@media(max-width:55.99rem){
  .sv-index{flex-direction:row;padding:0}
  .sv-index a{flex:1;flex-direction:column;align-items:flex-start;gap:.35rem;padding:.9rem 1rem;border-bottom:0;font-size:.875rem}
  .sv-index a+a{border-inline-start:1px solid var(--line)}
  .sv-index a::after{display:none}
  .sv-index b{font-size:1.5rem}
}
#core,#more,#training{scroll-margin-top:5.5rem}
/* core services: four prominent blocks, alternating surface for rhythm */
.sv-core{margin-top:2.25rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:48rem){.sv-core{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}}
.sv-c{display:flex;flex-direction:column;border-radius:1.75rem;border:1px solid var(--line);background:var(--surface);padding:clamp(1.5rem,3vw,2.25rem);transition:border-color .15s,box-shadow .15s}
.sv-c:nth-child(4n+2),.sv-c:nth-child(4n+3){background:color-mix(in oklab,var(--brand-soft) 55%,var(--surface))}
@media(max-width:47.99rem){.sv-c:nth-child(4n+3){background:var(--surface)}.sv-c:nth-child(4n+4){background:color-mix(in oklab,var(--brand-soft) 55%,var(--surface))}}
.sv-c:hover{border-color:color-mix(in oklab,var(--brand) 45%,var(--line));box-shadow:0 24px 40px -32px color-mix(in oklab,var(--brand) 50%,transparent)}
.sv-c-top{display:flex;align-items:center;justify-content:space-between}
.sv-n{font-size:2rem;line-height:1;font-weight:700;color:var(--brand-ink);opacity:.28}
.sv-c h3{margin-top:1.4rem;font-size:1.35rem;line-height:1.55;font-weight:700;text-wrap:balance}
.sv-c p{margin-top:.6rem;flex:1;max-width:34rem;line-height:1.95;color:var(--muted);text-wrap:pretty}
.sv-c .go,.sv-course .go{margin-top:1.4rem;display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;min-height:2.75rem;font-size:.9375rem;font-weight:500;color:var(--brand-ink)}
.sv-c .go:hover,.sv-course .go:hover{text-decoration:underline;text-underline-offset:4px}
/* complementary services: compact four-column list */
.sv-more{margin-top:2rem;display:grid;grid-template-columns:1fr;column-gap:2rem}
@media(min-width:40rem){.sv-more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){.sv-more{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sv-more li{display:flex;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--line)}
@media(min-width:64rem){.sv-more li{flex-direction:column;gap:.9rem}}
.sv-more .tile,.sv-course .tile,.sv-why-list .tile{width:2.75rem;height:2.75rem;border-radius:.85rem}
.sv-more .tile svg,.sv-course .tile svg,.sv-why-list .tile svg{width:22px;height:22px}
.sv-more h3{font-size:1.05rem;line-height:1.6;font-weight:700}
.sv-more p{margin-top:.3rem;font-size:.95rem;line-height:1.85;color:var(--muted);text-wrap:pretty}
.sv-more-cta{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--muted)}
.sv-more-cta a{font-weight:500;color:var(--brand-ink)}
.sv-more-cta a:hover{text-decoration:underline}
/* courses: their own tinted band */
.sv-train{padding-block:4rem;background:color-mix(in oklab,var(--brand-soft) 55%,var(--paper));border-block:1px solid var(--line)}
@media(min-width:48rem){.sv-train{padding-block:5rem}}
.sv-courses{margin-top:2.25rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:40rem){.sv-courses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){.sv-courses{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}
.sv-course{display:flex;flex-direction:column;border-radius:1.5rem;border:1px solid var(--line);background:var(--surface);padding:1.5rem}
.sv-course-top{display:flex;align-items:center;justify-content:space-between}
.sv-course .tile{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.sv-k{font-size:.8125rem;font-weight:500;color:var(--muted)}
.sv-course h3{margin-top:1.1rem;font-size:1.125rem;line-height:1.6;font-weight:700}
.sv-course p{margin-top:.35rem;flex:1;font-size:.95rem;line-height:1.85;color:var(--muted);text-wrap:pretty}
.sv-course .go{margin-top:1rem}
.sv-course .go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* why + numbers */
.sv-why{display:grid;gap:2.5rem}
@media(min-width:64rem){.sv-why{grid-template-columns:1.15fr .85fr;gap:4rem;align-items:center}}
.sv-why-list{margin-top:1.5rem}
.sv-why-list>div{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;padding:1.2rem 0;border-top:1px solid var(--line)}
.sv-why-list .tile{grid-row:span 2}
.sv-why-list h3{font-size:1.1rem;line-height:1.6;font-weight:700}
.sv-why-list p{margin-top:.2rem;line-height:1.9;color:var(--muted);text-wrap:pretty}
.sv-why .statband{padding:2.25rem 1.75rem}
.sv-why .statband ul{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2rem}

/* contact: compact form, clearer details */
.fld,.frow .fld{margin-top:.85rem;gap:.3rem}

.fld label{font-size:.8125rem}
.fld input,.fld select{height:2.875rem;padding:.45rem .9rem;font-size:.9375rem}
.fld textarea{min-height:6.25rem;padding:.65rem .9rem;font-size:.9375rem}

.fnote{margin-top:.6rem;font-size:.8125rem}
.fld :is(input,select,textarea):user-invalid{border-color:#c2410c;box-shadow:0 0 0 3px rgba(194,65,12,.14)}
[data-theme=dark] .fld :is(input,select,textarea):user-invalid{border-color:#fb923c;box-shadow:0 0 0 3px rgba(251,146,60,.18)}
@media(max-width:39.99rem){
  .sv-index a{padding:.85rem .75rem;font-size:.8125rem;white-space:nowrap}
  .sv-c h3{margin-top:1rem}
  .sv-course{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;padding:1.25rem}
  .sv-course-top{display:contents}
  .sv-course .tile{grid-row:span 4}
  .sv-course h3{margin-top:.15rem}
  .sv-course .go{margin-top:.5rem}
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted);opacity:1}


/* about hero — facts panel (official mark, approved figures, location) instead of a stock photo */
/* About hero facts — open column (no card): a hairline separates it from the text; blue figures, quiet labels. */
.ab-facts{border-inline-start:1px solid var(--line);padding-inline-start:clamp(1.5rem,3.5vw,3rem);padding-block:.5rem}
.ab-facts-top{display:flex;align-items:center;gap:.85rem;font-size:1rem;font-weight:700;color:var(--ink)}
.ab-facts-top img{width:3.25rem;height:auto;flex:none}
.ab-facts-top .on-dark{display:none}
[data-theme=dark] .ab-facts-top .on-light{display:none}
[data-theme=dark] .ab-facts-top .on-dark{display:block}
.ab-facts-top small{display:block;margin-top:.15rem;font-size:.875rem;font-weight:400;color:var(--muted)}
.ab-facts ul{margin-top:1.75rem}
.ab-facts li{display:flex;flex-direction:column;gap:.2rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.ab-facts b{font-size:clamp(2rem,3.4vw,2.6rem);line-height:1.15;font-weight:700;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.ab-facts li span{font-size:.95rem;color:var(--muted)}
.ab-facts-loc{margin-top:.25rem;padding-top:1.1rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--ink)}
.ab-facts-loc svg{width:1.05rem;height:1.05rem;flex:none;fill:none;stroke:var(--brand-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:55.99rem){
  .ab-facts{border-inline-start:0;padding-inline-start:0;padding-top:1.5rem;border-top:1px solid var(--line)}
  .ab-facts ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.25rem}
  .ab-facts li{border-top:0;padding:0}
  .ab-facts b{font-size:clamp(1.4rem,6vw,1.9rem)}
  .ab-facts li span{font-size:.8125rem}
  .ab-facts-loc{margin-top:1.25rem}
}

/* contact — one card: details | form (after 21st "Contact Card"); homepage #contact + contact page */
.ct-head{max-width:40rem;margin-inline:auto;text-align:center}
.ct-head .crumb{justify-content:center}
.ct-head .eyebrow{display:inline-flex;align-items:center;margin-bottom:1rem;padding:.3rem .95rem;border-radius:999px;background:var(--brand-soft);border:1px solid color-mix(in oklab,var(--brand) 28%,transparent)}
.ct-head .sec-intro,.ct-head .desc{margin-inline:auto}
.ct-box{margin:2.5rem auto 0;max-width:68rem;display:grid;grid-template-columns:1fr;overflow:hidden;border-radius:1.5rem;border:1px solid var(--line);background:var(--surface)}
@media(min-width:64rem){.ct-box{grid-template-columns:1fr 1.05fr}}
.ct-info{display:flex;flex-direction:column;gap:1.5rem;min-width:0;padding:1.5rem 1.25rem}
.ct-form{min-width:0;padding:1.5rem 1.25rem;border-top:1px solid var(--line);background:color-mix(in oklab,var(--paper) 65%,var(--surface))}
@media(min-width:40rem){.ct-info,.ct-form{padding:2.25rem}}
@media(min-width:64rem){.ct-form{border-top:0;border-inline-start:1px solid var(--line)}}
.ct-kick{margin-bottom:.4rem;font-size:.875rem;font-weight:500;color:var(--brand-ink)}
.ct-info-head h3{font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.35;font-weight:700;text-wrap:balance}
.ct-info-head p:not(.ct-kick){margin-top:.6rem;max-width:30rem;line-height:1.9;color:var(--muted);text-wrap:pretty}
.ct-items{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:40rem){.ct-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.ct-items .wide{grid-column:1/-1}}
.ct-items li{display:flex;align-items:flex-start;gap:.85rem;min-width:0}
.ct-items li>div{display:flex;flex-direction:column;min-width:0;padding-top:.1rem}
.ct-items b{font-size:.95rem;font-weight:700}
.ct-items a,.ct-items span{margin-top:.15rem;font-size:.9rem;color:var(--muted);overflow-wrap:anywhere;transition:color .2s}
.ct-items a:hover{color:var(--brand-ink)}
.ct-items small{margin-top:.1rem;font-size:.85rem;line-height:1.7;color:var(--muted)}
.ct-ic{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:.8rem;background:var(--brand-soft);color:var(--brand-ink)}
.ct-ic svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ct-social{display:flex;flex-wrap:wrap;gap:.5rem}
.ct-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;font-weight:500;color:var(--brand-ink)}
.ct-cta svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-cta:hover{text-decoration:underline;text-underline-offset:4px}
.ct-globe{display:none}
@media(min-width:64rem){.ct-globe{display:block;position:relative;margin-top:auto;height:12rem;overflow:hidden;color:color-mix(in oklab,var(--ink) 80%,transparent);opacity:0;transition:opacity 1s}}
.ct-globe.on{opacity:1}
.ct-globe svg{position:absolute;top:0;inset-inline:0;width:100%;height:auto}
.ct-globe::after{content:"";position:absolute;inset-inline:0;bottom:0;height:38%;background:linear-gradient(to top,var(--surface),transparent);pointer-events:none}
.g-sphere{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.8}
.g-land{fill:none;stroke:currentColor;stroke-width:.8;opacity:.75}
.g-dot{fill:var(--brand)}
.g-ring{fill:color-mix(in oklab,var(--brand) 25%,transparent);transform-box:fill-box;transform-origin:center;animation:g-pulse 2.4s ease-out infinite}
@keyframes g-pulse{from{transform:scale(.4);opacity:1}to{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.g-ring{animation:none}}
.ct-form .fld input,.ct-form .fld select,.ct-form .fld textarea{background:var(--surface)}
.ct-form textarea{resize:none}
.ct-send{margin-top:1.4rem;width:100%;justify-content:center;height:3rem}
.ct-send svg{transition:transform .2s}
.ct-send:hover svg{transform:translateX(-3px)}
.ct-form .fnote{margin-top:.75rem;font-size:.8125rem;line-height:1.7;text-align:center;text-wrap:balance}

/* homepage stats — tiles with an icon (after 21st "Stats Section"); numbers count up once */
.hero .hero-facts{margin-top:3rem;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;border-top:0}
@media(min-width:48rem){.hero .hero-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}}
.hero .hero-facts>div{border:1px solid var(--line);border-radius:1.25rem;background:color-mix(in oklab,var(--brand-soft) 45%,var(--surface));padding:1.25rem}
.hero-facts i{display:grid;place-items:center;width:2.5rem;height:2.5rem;margin-bottom:1rem;border-radius:.75rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--brand-ink)}
.hero-facts i svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero .hero-facts b{font-size:clamp(1.6rem,3vw,2.25rem)}
@media(max-width:39.99rem){
  .hero .hero-facts{margin-top:1.75rem}
  .hero .hero-facts>div{padding:1rem}
  .hero-facts i{width:2.25rem;height:2.25rem;margin-bottom:.7rem}
  .hero .hero-facts b{font-size:1.55rem}
}

/* process — step cards on wide screens (21st "How It Works Steps"), vertical timeline on phones ("How It Works Timeline") */
.process-panel{display:flex;flex-direction:column;align-items:center;overflow:visible;padding:0;border:0;border-radius:0;background:none}
.process-panel::before{display:none}
.process-top{display:contents}
.process-top .sh{order:1;margin-inline:auto;text-align:center}
.process-top .sh .sec-intro{margin-inline:auto}
.process-panel .steps{order:2;align-self:stretch;margin-top:2.5rem}
.process-top .btn{order:3;margin-top:2rem}
.step-node svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.steps .step-node,.steps.in .step-node,[data-theme=dark] .steps.in .step-node{width:2.75rem;height:2.75rem;border-radius:.8rem;border:1px solid var(--line);background:var(--brand-soft);color:var(--brand-ink);box-shadow:none}
.step-n{font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
@media(min-width:40rem){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .step{display:block;border:1px solid var(--line);border-radius:1.25rem;background:var(--surface);padding:1.5rem;transition:border-color .2s,transform .2s}
  .step:hover{border-color:color-mix(in oklab,var(--brand) 45%,var(--line));transform:translateY(-2px)}
  .step:not(:last-child)::before,.step:not(:last-child)::after{display:none}
  .step-n{position:absolute;top:1.65rem;inset-inline-end:1.5rem}
  .step-body h3{margin-top:1.1rem}
}
@media(min-width:64rem){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:39.99rem){
  .steps{gap:0}
  .step{grid-template-columns:2.75rem 1fr;column-gap:1rem;padding-bottom:1.6rem}
  .step:last-child{padding-bottom:0}
  .step-n{display:none}
  .step-body h3{margin-top:.35rem}
  .step:not(:last-child)::before,.step:not(:last-child)::after{inset-inline-start:calc(1.375rem - .5px);top:3.15rem;width:1px;height:calc(100% - 3.55rem)}
}

/* centred figures: homepage stat tiles + about cards */
.hero .hero-facts>div{text-align:center}
.hero-facts i{margin-inline:auto}
.stat-grid .statc{text-align:center}

/* contact form — submit states (sent from the site; see inc/contact-mail.php) */
.ct-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.ct-form{position:relative}
.ct-hp+.frow .fld:first-child,.ct-status+.frow .fld:first-child{margin-top:0}
@media(min-width:40rem){.ct-hp+.frow .fld,.ct-status+.frow .fld{margin-top:0}}
.ct-status{margin-bottom:1rem;padding:.75rem 1rem;border-radius:.75rem;font-size:.9rem;font-weight:500}
.ct-status.ok{background:color-mix(in oklab,#16a34a 12%,var(--surface));color:color-mix(in oklab,#15803d 85%,var(--ink))}
.ct-status.err,.ct-err{background:color-mix(in oklab,#c2410c 10%,var(--surface));color:color-mix(in oklab,#9a3412 85%,var(--ink))}
.ct-err{margin-top:1rem;padding:.9rem 1rem;border-radius:.75rem;font-size:.9rem;line-height:1.8}
.ct-err a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ct-send[disabled]{opacity:.7;cursor:progress}
.ct-done{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:2rem 1rem;text-align:center;outline:none}
.ct-done-ic{display:grid;place-items:center;width:4rem;height:4rem;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink)}
.ct-done-ic svg{width:2rem;height:2rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ct-done h3{margin-top:1.25rem;font-size:1.4rem;line-height:1.5;font-weight:700}
.ct-done p{margin-top:.5rem;max-width:26rem;line-height:1.9;color:var(--muted);text-wrap:pretty}
.ct-done .btn{margin-top:1.5rem}
[data-theme=dark] .ct-status.ok{color:#86efac}
[data-theme=dark] .ct-status.err,[data-theme=dark] .ct-err{color:#fdba74}

/* ---------- footer — Apple global-footer pattern (apple.com, measured live 2026-10-10) ----------
   980px column, small type (Apple 12/16; 13px here for Arabic legibility), hairlines at 16% ink,
   intro note → 5-column directory (accordion ≤833px) → "more ways" line → copyright + separated links. */
.site-footer{
  --ft-bg:#f5f5f7; --ft-t:rgba(31,28,64,.62); --ft-l:rgba(31,28,64,.8); --ft-h:rgba(31,28,64,.92); --ft-line:rgba(31,28,64,.16);
  margin-top:6rem;background:var(--ft-bg);color:var(--ft-t);font-size:13px;line-height:1.55
}
[data-theme=dark] .site-footer{--ft-bg:#13121f;--ft-t:rgba(236,234,245,.6);--ft-l:rgba(236,234,245,.8);--ft-h:rgba(236,234,245,.94);--ft-line:rgba(236,234,245,.16)}
.ft{max-width:980px;margin-inline:auto;padding-inline:22px}
.ft a{color:var(--ft-l)}
.ft a:hover{color:var(--ft-h);text-decoration:underline;text-underline-offset:.2em}
.ft-notes{display:flex;align-items:center;gap:20px;padding:24px 0 20px;border-bottom:1px solid var(--ft-line)}
.ft-logo{height:64px;width:auto;flex:none}
.ft-logo.on-dark{display:none}
[data-theme=dark] .ft-logo.on-light{display:none}
[data-theme=dark] .ft-logo.on-dark{display:block}
.ft-desc{margin:0;max-width:44rem}
.ft-dir{display:flex;padding-top:20px}
.ft-col{flex:1 1 0;min-width:0;padding-inline-end:16px}
.ft-sec+.ft-sec{padding-top:24px}
.ft-h{margin:0 0 .8em;font-size:inherit;line-height:inherit;font-weight:700;color:var(--ft-h)}
.ft-h-b{display:none}
.ft-panel ul{margin:0;padding:0;list-style:none}
.ft-panel li{margin-bottom:.8em}
.ft-more{margin:0;padding:37px 0 19px;border-bottom:1px solid var(--ft-line)}
.ft .ft-more a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:.2em}
.ft-end{display:flex;flex-wrap:wrap;align-items:center;column-gap:30px;row-gap:5px;padding:16px 0 22px}
.ft-copy{margin:0}
@media(max-width:833px){
  .ft{padding-inline:16px}
  .ft-notes{flex-direction:column;align-items:flex-start;gap:12px}
  .ft-logo{align-self:center}
  .ft-dir{display:block;padding-top:8px}
  .ft-col{padding:0}
  .ft-sec+.ft-sec{padding-top:0}
  .ft-js .ft-sec{position:relative}
  .ft-js .ft-sec::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--ft-line)}
  .ft-js .ft-h{margin:0}
  .ft-js .ft-h-t{display:none}
  .ft-js .ft-h-b{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;padding:12px 0;border:0;background:none;font:inherit;font-weight:700;color:var(--ft-h);text-align:start;cursor:pointer}
  .ft-h-b svg{width:12px;height:7px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
  .ft-sec.open .ft-h-b svg{transform:rotate(180deg)}
  .ft-js .ft-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility 0s .3s}
  .ft-js .ft-sec.open .ft-panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s ease}
  .ft-js .ft-panel ul{overflow:hidden;min-height:0}
  .ft-js .ft-panel li{margin:0;padding:6px 0}
  .ft-js .ft-panel li:last-child{padding-bottom:18px}
  .ft-more{padding-top:24px}
  .ft-end{flex-direction:column;padding-bottom:5.5rem}
}
@media(prefers-reduced-motion:reduce){.ft-h-b svg,.ft-js .ft-panel{transition:none!important}}

/* Headings: one voice — Thmanyah Sans Bold everywhere, like the services page title (owner's pick, 2026-10-10).
   Body text stays at the regular weight for comfortable reading. */
h1,h2,h3,h4,h5,h6,.mini :is(h2,h3),.rcard h3,.timeline h3,.faq summary{font-family:var(--font);font-weight:700}

/* Social accounts as icons — outlined circles in the contact card (like the old pills), a quiet row in the footer. */
.soc{display:inline-grid;place-items:center;color:inherit;transition:color .15s,border-color .15s,background-color .15s}
.soc svg{width:18px;height:18px;fill:currentColor}
.ct-social{gap:.6rem}
.ct-social .soc{width:2.75rem;height:2.75rem;border-radius:999px;border:1px solid var(--line);color:var(--ink)}
.ct-social .soc:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
.ft-soc{display:flex;flex-wrap:wrap;gap:2px;margin-inline-start:-8px}
.ft .ft-soc .soc{width:36px;height:36px;border-radius:999px;color:var(--ft-l)}
.ft-soc .soc svg{width:16px;height:16px}
.ft .ft-soc .soc:hover{color:var(--ft-h);background:var(--ft-line)}

/* ---------- service detail pages + guarantees page (2026-10-11) — open layouts, hairlines, brand-blue accents ---------- */
.svd-hero-grid{display:grid;gap:2.5rem;align-items:end}
@media(min-width:56rem){.svd-hero-grid{grid-template-columns:1.4fr .85fr;gap:4.5rem}}
.svd-ic{margin-bottom:1.25rem;width:3.25rem;height:3.25rem}
.svd-hero .btn svg{width:18px;height:18px}
.svd-guar{border-inline-start:1px solid var(--line);padding-inline-start:clamp(1.5rem,3vw,2.5rem)}
.svd-guar-t{font-size:.875rem;font-weight:700;color:var(--brand-ink)}
.svd-guar ul{margin-top:.75rem}
.svd-guar li{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem 0;border-top:1px solid var(--line);line-height:1.8;font-size:.95rem}
.svd-guar .ab-ck svg{stroke-width:2}
.svd-guar .ilink{margin-top:1rem}
@media(max-width:55.99rem){.svd-guar{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line);padding-top:1.25rem}.svd-guar li:first-child{border-top:0}}
.svd-what .stack{margin-top:0}
.svd-checks{margin-top:2rem;display:grid;grid-template-columns:1fr;column-gap:2.5rem}
@media(min-width:48rem){.svd-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.svd-checks li{display:flex;gap:.85rem;align-items:flex-start;padding:1.1rem 0;border-top:1px solid var(--line)}
.svd-checks p{line-height:1.9;text-wrap:pretty}
.svd-list li{display:flex;gap:1rem;align-items:baseline;padding:1.1rem 0;border-top:1px solid var(--line)}
.svd-list li:last-child{border-bottom:1px solid var(--line)}
.svd-n{flex:none;min-width:2rem;font-size:1.05rem;font-weight:700;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.svd-list p{line-height:1.9;text-wrap:pretty}
.svd-rel{margin-top:2.25rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:48rem){.svd-rel{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem}}
.svd-rel-c{display:flex;flex-direction:column;border-radius:1.5rem;border:1px solid var(--line);background:var(--surface);padding:1.5rem;transition:border-color .15s,box-shadow .15s}
.svd-rel-c:hover{border-color:color-mix(in oklab,var(--brand) 45%,var(--line));box-shadow:0 24px 40px -32px color-mix(in oklab,var(--brand) 50%,transparent)}
.svd-rel-c .tile{width:2.75rem;height:2.75rem;border-radius:.85rem}
.svd-rel-c .tile svg{width:22px;height:22px}
.svd-rel-c h3{margin-top:1rem;font-size:1.15rem;line-height:1.6}
.svd-rel-c p{margin-top:.4rem;flex:1;line-height:1.85;color:var(--muted);font-size:.95rem}
.svd-rel-c .go{margin-top:1rem;font-size:.9375rem;font-weight:500;color:var(--brand-ink)}
.sv-c-links{margin-top:1.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.5rem}
.sv-c-links .go{margin-top:0}
.sv-c-links .go-2{color:var(--muted)}
.sv-more h3 a:hover{color:var(--brand-ink)}
.sv-more-go{display:inline-block;margin-top:.5rem;font-size:.875rem;font-weight:500;color:var(--brand-ink)}
.gr-key ul{border-inline-start:1px solid var(--line);padding-inline-start:clamp(1.5rem,3vw,2.5rem)}
.gr-key li{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 0;border-top:1px solid var(--line)}
.gr-key li:first-child{border-top:0;padding-top:0}
.gr-key b{font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.2;font-weight:700;color:var(--brand-ink)}
.gr-key span{font-size:.925rem;color:var(--muted)}
@media(max-width:55.99rem){.gr-key ul{border-inline-start:0;padding-inline-start:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.25rem;border-top:1px solid var(--line)}.gr-key li,.gr-key li:first-child{padding:.9rem 0;border-top:0;border-bottom:1px solid var(--line)}}
.gr-list{margin-top:2.25rem;display:grid;grid-template-columns:1fr;column-gap:3rem}
@media(min-width:56rem){.gr-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gr-list li{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem 0;border-top:1px solid var(--line);scroll-margin-top:6rem}
.gr-list .tile{width:2.75rem;height:2.75rem;border-radius:.85rem}
.gr-list .tile svg{width:22px;height:22px}
.gr-list h3{font-size:1.15rem;line-height:1.6}
.gr-list p{margin-top:.35rem;line-height:1.95;color:var(--muted);text-wrap:pretty}
.trust .ilink,.ab-guar .ilink{margin-top:1.25rem}
.svd-what,.svd-get{align-items:start}

/* Pager — numbered pages under article lists (blog + archives), pill style like the tabs */
.pager{margin-top:3rem}
.pager ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;list-style:none;padding:0}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-width:2.75rem;height:2.75rem;padding:0 .9rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink);transition:border-color .15s,color .15s}
.pager a.page-numbers:hover{border-color:var(--brand);color:var(--brand-ink)}
.pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pager .page-numbers.dots{border:0;background:none;min-width:auto;padding:0 .25rem;color:var(--muted)}
.pager-note{font-size:.9rem;color:var(--muted)}
@media(max-width:39.99rem){.pager .prev,.pager .next{flex-basis:100%;order:2}.pager .page-numbers{min-width:2.5rem;height:2.5rem}}

/* «قيّم موضوعك مجانًا» offer strip — light, open card (no dark block) */
.offer-wrap{margin-top:2.5rem}
.offer{display:grid;grid-template-columns:auto 1fr auto;gap:1.25rem 1.75rem;align-items:center;border-radius:1.75rem;border:1px solid color-mix(in oklab,var(--brand) 28%,var(--line));background:linear-gradient(135deg,var(--brand-soft),var(--surface) 70%);padding:1.6rem 2rem}
.offer-ic{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:1rem;background:var(--surface);color:var(--brand-ink);box-shadow:0 0 0 1px color-mix(in oklab,var(--brand) 25%,var(--line))}
.offer-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.offer-k{font-size:.85rem;font-weight:700;color:var(--brand-ink)}
.offer h2{margin-top:.2rem;font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.45}
.offer-txt p:last-child{margin-top:.3rem;line-height:1.9;color:var(--muted);max-width:40rem}
.offer-act{display:flex;flex-wrap:wrap;gap:.6rem}
.offer-act .btn svg{width:18px;height:18px}
@media(max-width:55.99rem){.offer{grid-template-columns:auto 1fr;padding:1.4rem}.offer-act{grid-column:1/-1}}
@media(max-width:39.99rem){.offer{grid-template-columns:1fr}.offer-ic{width:3rem;height:3rem}.offer-act .btn{flex:1;justify-content:center}}
.ct-file-t{display:block;margin-bottom:.4rem;font-size:.8125rem;font-weight:700}
.ct-file-t small{font-weight:400;color:var(--muted)}
.ct-drop{position:relative;display:flex;align-items:center;gap:.75rem;min-height:3rem;padding:.45rem .55rem;border:1px dashed var(--line);border-radius:.9rem;background:var(--surface);cursor:pointer;transition:border-color .15s}
.ct-drop:hover,.ct-drop:focus-within{border-color:var(--brand)}
.ct-drop:focus-within{outline:2px solid color-mix(in oklab,var(--brand) 45%,transparent);outline-offset:2px}
.ct-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ct-pick{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:.875rem;font-weight:500}
.ct-pick svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ct-fname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;color:var(--muted)}
.ct-drop.has-file .ct-fname{color:var(--ink);font-weight:500}
.fhint{margin-top:.35rem;font-size:.8rem;line-height:1.7;color:var(--muted)}

/* Target countries: homepage band, country pages, footer and services hero links */
.cn-chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin-top:1.25rem}
.cn-chips a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.4rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:500;transition:border-color .15s,color .15s}
.cn-chips a:hover{border-color:var(--brand);color:var(--brand-ink)}
.cn-svc{grid-template-columns:1fr}
@media(min-width:48rem){.cn-svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){.cn-svc{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cn-topics{margin-top:0}
@media(min-width:48rem){.cn-topics{grid-template-columns:1fr}}
.cn-others{text-align:center}
.cn-others .cn-chips{justify-content:center}
.ft-geo{margin:0;padding-top:24px;color:var(--ft-t)}
.sv-geo{grid-column:1/-1;font-size:.95rem;color:var(--muted)}
.sv-geo a{color:var(--brand-ink);font-weight:500}
.sv-geo a:hover{text-decoration:underline}

/* Countries bento (21st.dev bento-grid + spotlight-card patterns): in-person countries large, remote ones small,
   a dashed card for everyone else. Light surfaces, hairlines, brand-blue accents; spotlight follows the pointer. */
.cn-bento{margin-top:2.25rem;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.cn-card{grid-column:span 2;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:1.75rem;min-height:12.5rem;padding:1.4rem 1.5rem;border-radius:1.5rem;border:1px solid var(--line);background:var(--surface);transition:border-color .2s,transform .2s,box-shadow .2s}
.cn-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in oklab,var(--brand) 16%,transparent),transparent 70%);opacity:0;transition:opacity .25s}
.cn-card:hover{border-color:color-mix(in oklab,var(--brand) 45%,var(--line));transform:translateY(-2px);box-shadow:0 22px 40px -30px color-mix(in oklab,var(--brand) 55%,transparent)}
.cn-card:hover::before,.cn-card:focus-visible::before{opacity:1}
.cn-card.is-live{grid-column:span 3;min-height:14.5rem;background:linear-gradient(135deg,color-mix(in oklab,var(--brand-soft) 85%,var(--surface)),var(--surface) 62%)}
.cn-card.is-live::after{content:"";position:absolute;inset:0;z-index:-2;background-image:radial-gradient(color-mix(in oklab,var(--brand) 26%,transparent) 1px,transparent 1.3px);background-size:16px 16px;-webkit-mask:linear-gradient(to left,transparent 38%,#000);mask:linear-gradient(to left,transparent 38%,#000)}
.cn-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cn-ic{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:.9rem;background:var(--brand-soft);color:var(--brand-ink)}
.is-live .cn-ic{background:var(--surface);box-shadow:0 0 0 1px color-mix(in oklab,var(--brand) 28%,var(--line))}
.cn-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cn-code{direction:ltr;padding:.3rem .6rem;border-radius:999px;border:1px solid var(--line);font-size:.75rem;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.cn-body{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding-inline-end:2rem}
.cn-badge{padding:.22rem .65rem;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:.75rem;font-weight:700}
.is-live .cn-badge{background:var(--brand-ink);color:var(--paper)}
.cn-name{font-size:1.2rem;line-height:1.45}
.is-live .cn-name{font-size:clamp(1.35rem,2.2vw,1.65rem)}
.cn-sub{font-size:.9rem;line-height:1.7;color:var(--muted)}
.cn-go{position:absolute;inset-inline-end:1.5rem;bottom:1.4rem;font-size:1.1rem;color:var(--muted);transition:transform .2s,color .2s}
.cn-card:hover .cn-go{transform:translateX(-4px);color:var(--brand-ink)}
.cn-cta{border-style:dashed;background:transparent}
.cn-cta .cn-ic{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
@media(max-width:63.99rem){.cn-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.cn-card{grid-column:span 1}.cn-card.is-live{grid-column:span 2}}
@media(max-width:39.99rem){.cn-bento{gap:.75rem}.cn-card{min-height:11rem;padding:1.1rem;gap:1.25rem;border-radius:1.25rem}.cn-card.is-live{min-height:12rem}.cn-name{font-size:1.05rem}.cn-sub{font-size:.8125rem}.cn-code{display:none}.cn-go{inset-inline-end:1.1rem;bottom:1.1rem}}
@media(prefers-reduced-motion:reduce){.cn-card,.cn-go{transition:none}.cn-card:hover{transform:none}}

/* Guarantees now stand alone on the homepage (FAQ moved to the end): full width, three columns on desktop */
.trust{display:block}
@media(min-width:48rem){.trust .dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem;row-gap:1.5rem}}
@media(min-width:64rem){.trust .dl{grid-template-columns:repeat(3,minmax(0,1fr))}}