/* bashgraphy.com — shared stylesheet for the EN (/) and AR (/ar/) pages */

*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0B0B0C;--bg2:#0F0F11;--ivory:#F3EEE2;--muted:#8E887B;--faint:#847E70;
--g1:#F6E7A8;--g2:#C9A24B;--g3:#8A6A2C;--gl:#C9A24B;--line:rgba(201,162,75,.26)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ivory);font-family:'Jost','Jost Fallback',system-ui,sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--g2);color:#0B0B0C}
a{color:var(--g2);text-decoration:none;transition:color .3s}
a:hover{color:var(--g1)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--g2);outline-offset:3px}

@keyframes shimmer{from{background-position:0% 0}to{background-position:-220% 0}}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes kb{0%{transform:scale(1.05)}100%{transform:scale(1.14)}}

/* ---- shared type ---- */
.mono{font-family:'Space Mono','Space Mono Fallback',monospace}
.serif{font-family:'DM Serif Display','DM Serif Display Fallback',serif}
.ar{font-family:'Amiri','Amiri Fallback 1',serif}
.gold-text{background:linear-gradient(100deg,var(--g3),var(--g2) 24%,var(--g1) 44%,#fff7de 50%,var(--g1) 56%,var(--g2) 76%,var(--g3));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shimmer 12s linear infinite}
.eyebrow{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;letter-spacing:.3em;color:var(--g2);text-transform:uppercase}
.rule{width:44px;height:1px;background:var(--gl);display:inline-block}

/* ---- sections ----
   Base state is NON-sticky: a section scrolls fully into view before the next
   one arrives. The stacked-panel effect is layered on top only where it works
   (see "stacked panels" below) — never at the cost of unreachable content. */
.stack{position:relative;min-height:100vh;overflow:hidden;background:var(--bg)}
.pad{padding:clamp(60px,9vh,120px) clamp(24px,7vw,120px) clamp(60px,9vh,120px) clamp(64px,9vw,150px)}
.edge{border-top:1px solid var(--line);box-shadow:0 -30px 70px -24px rgba(0,0,0,.85)}

/* ---- language toggle (fixed, top right, readable over dark and ivory) ---- */
#lang{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g2);border:1px solid var(--line);padding:8px 13px;line-height:1;white-space:nowrap;
  transition:border-color .3s,background .3s,color .3s}
#lang:hover{color:var(--g1);border-color:var(--g2);background:rgba(201,162,75,.1)}
html[dir="rtl"] #lang{font-family:'Space Mono','Space Mono Fallback',monospace;letter-spacing:.16em}


/* ---- rail ---- */
#rail{position:fixed;left:0;top:0;height:100vh;width:74px;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 0;mix-blend-mode:difference;pointer-events:none}
#rail .vert{pointer-events:auto;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;letter-spacing:.32em;color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase}
#rail .items{display:flex;flex-direction:column;gap:20px;align-items:center;pointer-events:auto}
#rail .items a{display:flex;align-items:center;gap:10px;text-decoration:none}
#rail .num{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;letter-spacing:.1em;color:transparent;transition:color .4s}
#rail .dot{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .4s cubic-bezier(.2,.7,.2,1)}
#rail a.on .num{color:#fff}
#rail a.on .dot{width:22px;height:2px;border-radius:2px;background:#fff}
@media(max-width:860px){#rail{display:none!important}}

/* ---- hero ---- */
#hero{display:flex;flex-direction:column;justify-content:center;padding:96px clamp(24px,7vw,110px) 72px clamp(64px,9vw,150px);background:var(--bg)}
#glow{position:absolute;width:44vw;height:44vw;max-width:620px;max-height:620px;left:66%;top:44%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(201,162,75,.20),rgba(201,162,75,0) 70%);filter:blur(10px);pointer-events:none;transition:left .5s cubic-bezier(.2,.7,.2,1),top .5s cubic-bezier(.2,.7,.2,1);z-index:0}
#hero .topbar{position:absolute;top:28px;left:clamp(64px,9vw,150px);right:clamp(24px,7vw,110px);display:flex;justify-content:space-between;align-items:center;z-index:3}
#hero .grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(32px,5vw,80px);align-items:center;max-width:1320px;width:100%;margin:0 auto}
#word{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(34px,4.6vw,80px);line-height:.94;letter-spacing:-.025em;transition:transform .4s cubic-bezier(.2,.7,.2,1);animation-duration:11s}
.hero-lead{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-style:italic;font-size:clamp(22px,3vw,40px);color:var(--ivory);margin-top:22px;line-height:1.15}
.hero-body{color:var(--muted);font-size:clamp(15px,1.7vw,18px);line-height:1.7;margin-top:22px;max-width:42ch}
.cta{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--g2);border:1px solid var(--line);padding:14px 22px;transition:background .35s,border-color .35s,color .35s}
.cta:hover{background:rgba(201,162,75,.1);border-color:var(--g2)}
.frame{position:relative;padding:9px;border:1px solid var(--line)}
.frame::before,.frame::after{content:"";position:absolute;width:26px;height:26px}
.frame::before{top:-1px;left:-1px;border-top:2px solid var(--g2);border-left:2px solid var(--g2)}
.frame::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--g2);border-right:2px solid var(--g2)}
.portrait{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.05)}
.scrollcue{position:absolute;bottom:26px;left:clamp(64px,9vw,150px);display:flex;align-items:center;gap:10px;z-index:2}

/* ---- bands ---- */
.band{position:relative;height:100vh;overflow:hidden;background:#0B0B0C}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);animation:kb 22s ease-in-out infinite alternate}
.band .veil{position:absolute;inset:0}
.band .cap{position:absolute;bottom:clamp(56px,10vh,110px);z-index:2}
.band p{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-style:italic;font-size:clamp(24px,3.6vw,52px);line-height:1.1;color:var(--ivory);text-shadow:0 2px 30px rgba(0,0,0,.55)}

/* ---- principles ---- */
.p-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:40px}
.p-grid{display:grid;grid-template-columns:minmax(280px,0.85fr) minmax(0,1.4fr);gap:clamp(24px,4vw,64px);align-items:stretch}
.p-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.p-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;width:100%;text-align:start;cursor:pointer;background:transparent;border:none;border-bottom:1px solid var(--line);border-inline-start:2px solid transparent;padding:17px 18px;transition:background .35s,border-color .35s;font-family:inherit;color:inherit}
.p-row .n{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;letter-spacing:.14em;color:var(--faint);transition:color .35s}
.p-row .t{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(20px,2.1vw,29px);line-height:1;letter-spacing:-.01em;color:var(--muted);transition:color .35s}
.p-row .tag{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.p-row:hover .t{color:var(--ivory)}
.p-row.on{background:linear-gradient(90deg,rgba(201,162,75,.10),transparent);border-inline-start-color:var(--g2)}
.p-row.on .n{color:var(--g2)}
.p-row.on .t{color:var(--ivory)}
.p-panels{position:relative;border:1px solid var(--line);background:linear-gradient(160deg,rgba(201,162,75,.05),rgba(201,162,75,0) 55%)}
.p-panel{display:flex;flex-direction:column;gap:24px;padding:clamp(26px,3vw,44px)}
.p-panel .meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.p-panel .meta .l{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--g2)}
.p-panel .meta .r{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.p-panel h3{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(32px,4.2vw,58px);line-height:.98;letter-spacing:-.01em;font-weight:400;border-bottom:1px solid var(--line);padding-bottom:20px;animation-duration:13s}
.p-panel .line{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-style:italic;font-size:clamp(20px,2.5vw,32px);line-height:1.28;color:var(--ivory);max-width:26ch}
.p-panel .body{font-size:clamp(15px,1.6vw,17px);line-height:1.72;color:var(--muted);max-width:52ch}
.js .p-panel{display:none}
.js .p-panel.on{display:flex;animation:panelIn .55s cubic-bezier(.2,.7,.2,1)}
@media(max-width:820px){.p-grid{grid-template-columns:1fr}}

/* ---- what I do ---- */
#s03{background:var(--ivory);color:#12120F;padding:clamp(56px,8vh,110px) clamp(24px,7vw,120px) clamp(56px,8vh,110px) clamp(64px,9vw,150px)}
#s03 .lede{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(26px,4.4vw,64px);line-height:1.12;letter-spacing:-.01em;max-width:19ch;color:#141310;font-weight:400}
#s03 .lede em{font-style:normal;background:linear-gradient(100deg,#7c5e23,#b8923f 40%,#d9b24e 55%,#b8923f 75%,#7c5e23);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shimmer 12s linear infinite}
.gifts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:rgba(20,19,16,.14);border:1px solid rgba(20,19,16,.14);margin-top:52px}
.gifts>div{background:var(--ivory);padding:30px 28px 34px;display:flex;flex-direction:column;gap:12px;min-height:180px}
.gifts .n{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9a7a2e}
.gifts h3{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(26px,2.6vw,38px);line-height:1;color:#141310;font-weight:400}
.gifts p{font-size:15px;line-height:1.6;color:#4d4840;margin-top:auto}

/* ---- footer ---- */
#footer{position:relative;z-index:2;overflow:hidden;background:var(--bg)}
#footer .inner{max-width:820px;margin:0 auto;padding:clamp(100px,16vh,190px) clamp(24px,7vw,60px) clamp(56px,8vh,90px);text-align:center}
.links{display:flex;flex-direction:column;margin:46px auto 0;max-width:560px;border-top:1px solid var(--line);text-align:start}
.links a{display:grid;grid-template-columns:136px 1fr auto;align-items:center;gap:16px;padding:20px 4px;border-bottom:1px solid var(--line);color:var(--ivory);transition:color .3s,padding-inline-start .3s}
.links a:hover{color:var(--g1);padding-inline-start:12px}
.links .k{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.links .v{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(18px,2vw,25px)}
.links .go{font-family:'Space Mono','Space Mono Fallback',monospace;color:var(--g2)}
@media(max-width:520px){.links a{grid-template-columns:1fr auto}.links .k{grid-column:1/-1;margin-bottom:-8px}}
.colophon{max-width:1300px;margin:0 auto;padding:0 clamp(24px,7vw,120px) 46px clamp(64px,9vw,150px)}
.colophon .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:26px;padding-top:34px;border-top:1px solid var(--line)}

/* ---- reveal (JS only, so no-JS still shows everything) ---- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].shown{opacity:1;transform:none}

/* ---- stacked panels ----
   Only from 861px up, and only on sections that actually FIT the viewport.
   site.js adds .tall to any section taller than the screen, which keeps it in
   normal flow so its bottom can be read before the next section covers it.
   Below 861px the effect is off entirely — on a phone almost every section is
   taller than the screen, and a calm ordinary scroll reads far better. */
/* stacked-panel pinning removed 2026-08-21: with mixed-height and
   transparent sections it produced text-over-text overlap on desktop.
   Sections scroll normally on every viewport. */

/* ---- mobile: the rail is hidden below 860px, so reclaim its 64px gutter ---- */
@media(max-width:860px){
  #hero,.pad,#s03{padding-left:24px;padding-right:24px}
  #hero{padding-top:104px;padding-bottom:64px}
  #hero .topbar{left:24px;right:24px}
  #hero .topbar img{height:38px}
  .scrollcue{left:24px}
  .band .cap{left:24px!important;right:24px!important}
  .colophon{padding-left:24px;padding-right:24px}
  #footer .inner{padding-left:24px;padding-right:24px}
  .gifts{margin-top:34px}
  /* sections breathe instead of being clipped at exactly 100vh */
  .stack{min-height:auto}
  .band{height:auto;min-height:62vh}
  .band .cap{position:static;padding:38vh 0 40px}
  .band img{position:absolute;inset:0}
  .edge{box-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ================= ARABIC / RTL ================= */
html[dir="rtl"] body{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif}
html[dir="rtl"] .serif,
html[dir="rtl"] #word,
html[dir="rtl"] .hero-lead,
html[dir="rtl"] .band p,
html[dir="rtl"] .p-row .t,
html[dir="rtl"] .p-panel h3,
html[dir="rtl"] .p-panel .line,
html[dir="rtl"] #s03 .lede,
html[dir="rtl"] .gifts h3,
html[dir="rtl"] .links .v,
html[dir="rtl"] #footer h2,
html[dir="rtl"] #footer .headline{font-family:'Amiri','Amiri Fallback 1',serif;font-style:normal}
/* Arabic script must not be letter-spaced — it breaks the joins */
html[dir="rtl"] .mono,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .cta,
html[dir="rtl"] .p-row .n,
html[dir="rtl"] .p-row .tag,
html[dir="rtl"] .p-panel .meta .l,
html[dir="rtl"] .p-panel .meta .r,
html[dir="rtl"] .gifts .n,
html[dir="rtl"] .links .k,
html[dir="rtl"] .colophon .row span{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;text-transform:none}
/* Arabic needs a little more size than Latin at label sizes to stay legible */
html[dir="rtl"] .p-row .n,
html[dir="rtl"] .p-row .tag,
html[dir="rtl"] .p-panel .meta .l,
html[dir="rtl"] .p-panel .meta .r,
html[dir="rtl"] .gifts .n,
html[dir="rtl"] .links .k{font-size:12.5px}
html[dir="rtl"] .p-row .tag,
html[dir="rtl"] .p-panel .meta .r{color:var(--muted)}
/* the wordmark and any Latin fragment keep their own face + direction */
html[dir="rtl"] .lat{font-family:'Space Mono','Space Mono Fallback',monospace;direction:ltr;unicode-bidi:isolate;letter-spacing:.18em}
html[dir="rtl"] #word{font-family:'DM Serif Display','DM Serif Display Fallback',serif;direction:ltr;unicode-bidi:isolate;letter-spacing:-.025em}
html[dir="rtl"] .hero-lead,html[dir="rtl"] .p-panel .line,html[dir="rtl"] .band p{font-style:normal}
html[dir="rtl"] .p-row.on{background:linear-gradient(270deg,rgba(201,162,75,.10),transparent)}
html[dir="rtl"] #s03 .lede{max-width:21ch}
/* the topbar logo stays physically left in both languages so it never
   collides with the fixed language toggle at top right */
html[dir="rtl"] #hero .topbar{direction:ltr}
/* mirror the scroll cue to the reading side */
html[dir="rtl"] .scrollcue{left:auto;right:clamp(64px,9vw,150px);flex-direction:row-reverse}
@media(max-width:860px){html[dir="rtl"] .scrollcue{right:24px;left:auto}}
html[dir="rtl"] .hero-body{max-width:46ch}
html[dir="rtl"] .p-panel .body{max-width:56ch}
html[dir="rtl"] .p-panel .line{max-width:28ch}

/* =======================================================================
   v2 — multi-page site: nav, home sections, work, catalogue, product,
   checkout, legal. Appended after the v1 base so v1 rules still apply.
   ======================================================================= */

/* ---- global top nav ---- */
#topnav{position:fixed;top:0;left:0;right:0;z-index:65;display:flex;align-items:center;gap:28px;
  padding:14px clamp(16px,4vw,34px);backdrop-filter:blur(14px);
  background:rgba(11,11,12,.72);border-bottom:1px solid rgba(201,162,75,.16)}
#topnav .brand img{height:34px;width:auto;display:block}
#navlinks{display:flex;gap:26px;align-items:center;margin-inline-start:auto}
#navlinks a{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
#navlinks a:hover,#navlinks a.on{color:var(--g1)}
#navtoggle{display:none;margin-inline-start:auto;background:none;border:1px solid var(--line);
  padding:9px 11px;cursor:pointer;flex-direction:column;gap:4px}
#navtoggle span{display:block;width:18px;height:1.5px;background:var(--g2)}
html[dir="rtl"] #navlinks a{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:14px;text-transform:none}
body{padding-top:62px}
@media(max-width:860px){
  #navtoggle{display:flex}
  #navlinks #lang{margin:16px 24px;align-self:flex-start}
  #navlinks{position:fixed;top:62px;left:0;right:0;flex-direction:column;gap:0;margin:0;
    background:var(--bg);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .35s}
  #navlinks.open{max-height:60vh}
  #navlinks a{padding:16px 24px;border-bottom:1px solid rgba(201,162,75,.12);width:100%}
}

/* the decorative rail is a home-page device only */
body.inner-page #rail{display:none!important}
#rail .vert-b{font-size:9px;letter-spacing:.3em;color:#fff;writing-mode:vertical-rl;transform:rotate(180deg)}

/* ---- shared layout ---- */
.wrap{max-width:1220px;margin:0 auto;width:100%}
.wrap.narrow{max-width:760px}
.wrap.center{text-align:center}
.page{padding:clamp(48px,7vh,96px) clamp(24px,7vw,120px) clamp(64px,9vh,120px)}
.page-h1{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(34px,5.4vw,70px);line-height:1.05;letter-spacing:-.02em;font-weight:400;color:var(--ivory)}
.page-sub{color:var(--muted);font-size:clamp(16px,2vw,20px);line-height:1.7;margin-top:18px;max-width:60ch}
.big-serif{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(26px,4.3vw,58px);line-height:1.18;letter-spacing:-.01em;color:var(--ivory);max-width:22ch;font-weight:400}
.big-serif.small{font-size:clamp(24px,3.2vw,42px);max-width:28ch}
.lede-muted{color:var(--muted);font-size:clamp(15px,1.7vw,18px);line-height:1.8;margin-top:26px;max-width:62ch}
.eyebrow{display:block}
html[dir="rtl"] .page-h1,html[dir="rtl"] .big-serif{font-family:'Amiri','Amiri Fallback 1',serif;line-height:1.3}
html[dir="rtl"] .page-sub,html[dir="rtl"] .lede-muted{max-width:64ch}

/* ---- hero ---- */
.kicker{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.kicker .mono{font-size:11px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
html[dir="rtl"] .kicker .mono{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:14px;text-transform:none}
.hero-h1{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(34px,5.6vw,78px);line-height:1.02;letter-spacing:-.025em;font-weight:400;color:var(--ivory)}
html[dir="rtl"] .hero-h1{font-family:'Amiri','Amiri Fallback 1',serif;line-height:1.3}
.hero-portrait{justify-self:center;position:relative;width:100%;max-width:380px}
.cta-row{display:flex;align-items:center;gap:14px;margin-top:34px;flex-wrap:wrap}
.cta{display:inline-block;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--line);transition:background .3s,border-color .3s,color .3s}
.cta-primary{background:var(--g2);border-color:var(--g2);color:#0B0B0C;font-weight:700}
.cta-primary:hover{background:var(--g1);border-color:var(--g1);color:#0B0B0C}
.cta-ghost{color:var(--g2)}
.cta-ghost:hover{background:rgba(201,162,75,.1);border-color:var(--g2)}
html[dir="rtl"] .cta{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:15px;text-transform:none}
.hero-note{margin-top:20px;font-size:11px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
html[dir="rtl"] .hero-note{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13px;text-transform:none}

/* ---- stat band ---- */
.statband{min-height:auto!important;padding-top:clamp(40px,6vh,70px);padding-bottom:clamp(40px,6vh,70px)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,3vw,44px);max-width:1220px;margin:0 auto}
.stat{display:flex;flex-direction:column;gap:10px;padding-inline-start:18px;border-inline-start:1px solid var(--line)}
.stat .num{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(28px,3.4vw,46px);line-height:1;animation-duration:15s}
.stat .lbl{color:var(--muted);font-size:13.5px;line-height:1.6}
html[dir="rtl"] .stat .num{font-family:'Amiri','Amiri Fallback 1',serif}
html[dir="rtl"] .stat .lbl{font-size:14.5px}

/* ---- for/not-for ---- */
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,4vw,60px);margin-top:36px}
.two-col h3{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(22px,2.4vw,30px);font-weight:400;margin-bottom:18px}
html[dir="rtl"] .two-col h3{font-family:'Amiri','Amiri Fallback 1',serif}
.two-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.two-col li{color:var(--muted);font-size:15.5px;line-height:1.65;padding-inline-start:26px;position:relative}
.col-yes li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--g2)}
.col-no li::before{content:"×";position:absolute;inset-inline-start:0;color:var(--faint)}
.col-no h3{color:var(--muted)}

/* ---- method ---- */
.light{background:var(--ivory)!important;color:#12120F}
.light .eyebrow{color:#9a7a2e}
.light .big-serif{color:#141310}
.m-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:rgba(20,19,16,.14);
  border:1px solid rgba(20,19,16,.14);margin-top:44px}
.m-card{background:var(--ivory);padding:28px 26px 32px;display:flex;flex-direction:column;gap:10px;min-height:190px}
.m-card .n{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;letter-spacing:.2em;color:#9a7a2e}
.m-card h3{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(24px,2.4vw,32px);line-height:1;color:#141310;font-weight:400}
.m-card p{font-size:14.5px;line-height:1.65;color:#4d4840;margin-top:auto}
html[dir="rtl"] .m-card h3{font-family:'Amiri','Amiri Fallback 1',serif}
html[dir="rtl"] .m-card .n{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13px}

/* ---- featured work minis ---- */
.w-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:40px 0 34px}
.w-mini{display:flex;flex-direction:column;gap:10px;padding:24px 22px 26px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(201,162,75,.05),transparent 60%);transition:border-color .3s,transform .3s}
.w-mini:hover{border-color:var(--g2);transform:translateY(-3px)}
.w-tag{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--g2)}
.w-mini h3{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(20px,2.1vw,26px);font-weight:400;color:var(--ivory)}
.w-out{color:var(--muted);font-size:14px;line-height:1.6}
html[dir="rtl"] .w-mini h3{font-family:'Amiri','Amiri Fallback 1',serif}
html[dir="rtl"] .w-tag{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13px;text-transform:none}

/* ---- work page ---- */
.note-box{margin-top:26px;padding:16px 20px;border-inline-start:2px solid var(--g2);
  background:rgba(201,162,75,.06);color:var(--muted);font-size:14px;line-height:1.7;max-width:70ch}
.proj-list{display:flex;flex-direction:column;gap:22px;margin-top:44px}
.proj{border:1px solid var(--line);padding:clamp(24px,3vw,40px);background:linear-gradient(160deg,rgba(201,162,75,.045),transparent 55%)}
.proj-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.proj-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--g2)}
.proj-status{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
html[dir="rtl"] .proj-tag,html[dir="rtl"] .proj-status{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13px;text-transform:none}
.proj h3{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(24px,3vw,38px);font-weight:400;color:var(--ivory);line-height:1.1}
html[dir="rtl"] .proj h3{font-family:'Amiri','Amiri Fallback 1',serif;line-height:1.35}
.proj-role{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;letter-spacing:.1em;color:var(--faint);margin-top:8px}
html[dir="rtl"] .proj-role{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13px}
.proj-body{color:var(--muted);font-size:15.5px;line-height:1.8;margin-top:16px;max-width:75ch}
.proj-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:26px}
.proj-cols h4{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--g2);margin-bottom:12px}
html[dir="rtl"] .proj-cols h4{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13px;text-transform:none}
.ticks{list-style:none;display:flex;flex-direction:column;gap:9px}
.ticks li{color:var(--muted);font-size:14.5px;line-height:1.6;padding-inline-start:22px;position:relative}
.ticks li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--g2)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;color:var(--muted);border:1px solid var(--line);padding:5px 10px}
.proj-link{display:inline-block;margin-top:22px;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
html[dir="rtl"] .proj-link{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:14px;text-transform:none}

/* ---- about ---- */
.story{margin-top:34px;display:flex;flex-direction:column;gap:20px;max-width:68ch}
.story p{color:var(--muted);font-size:clamp(15px,1.7vw,17.5px);line-height:1.85}
.story p:first-child{color:var(--ivory);font-size:clamp(17px,2vw,21px)}

/* ---- catalogue cards ---- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:44px}
.card{display:flex;flex-direction:column;gap:12px;padding:28px 26px 24px;border:1px solid var(--line);position:relative;
  background:linear-gradient(160deg,rgba(201,162,75,.05),transparent 60%);transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--g2);transform:translateY(-3px)}
.badge{align-self:flex-start;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 9px;border:1px solid var(--line);color:var(--g2)}
html[dir="rtl"] .badge{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:12px;text-transform:none}
.card h3{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(22px,2.3vw,29px);font-weight:400;color:var(--ivory);line-height:1.15}
html[dir="rtl"] .card h3{font-family:'Amiri','Amiri Fallback 1',serif;line-height:1.4}
.card-for{color:var(--g2);font-size:13px;line-height:1.5}
.card-body{color:var(--muted);font-size:14.5px;line-height:1.65}
.card-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.price{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:22px;color:var(--ivory)}
.price.soon,.amount.soon{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
html[dir="rtl"] .price.soon,html[dir="rtl"] .amount.soon{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:14px;text-transform:none}
.card-foot .go{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g2)}
html[dir="rtl"] .card-foot .go{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13px;text-transform:none}

/* ---- waitlist ---- */
.waitlist{margin-top:56px;padding:clamp(28px,4vw,52px);border:1px solid var(--line);text-align:center;
  background:linear-gradient(160deg,rgba(201,162,75,.07),transparent 65%)}
.waitlist h2{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(24px,3vw,36px);font-weight:400;color:var(--ivory)}
html[dir="rtl"] .waitlist h2{font-family:'Amiri','Amiri Fallback 1',serif}
.waitlist p{color:var(--muted);font-size:15.5px;line-height:1.75;margin:14px auto 24px;max-width:52ch}
.micro{font-size:11.5px;letter-spacing:.04em;color:var(--faint);margin-top:14px;line-height:1.6}
html[dir="rtl"] .micro{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13px}

/* ---- product page ---- */
.prod .back{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
html[dir="rtl"] .prod .back{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:14px;text-transform:none}
.prod .badge{display:inline-block;margin-bottom:14px}
.prod-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr);gap:clamp(28px,4vw,64px);margin-top:44px;align-items:start}
@media(max-width:900px){.prod-grid{grid-template-columns:1fr}}
.prod-lede{color:var(--ivory);font-size:clamp(16px,2vw,20px);line-height:1.8;max-width:66ch}
.prod-main h2{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--g2);margin:38px 0 16px}
html[dir="rtl"] .prod-main h2{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:15px;text-transform:none}
.prod-side{position:sticky;top:86px}
@media(max-width:900px){.prod-side{position:static}}
.buy{border:1px solid var(--g2);padding:28px 26px;background:linear-gradient(160deg,rgba(201,162,75,.10),transparent 70%)}
.buy-price{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.buy-price .amount{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(32px,4vw,44px);color:var(--ivory);line-height:1}
.buy-price .vat{font-size:11px;letter-spacing:.1em;color:var(--faint)}
html[dir="rtl"] .buy-price .vat{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13px}
.buy-btn{display:block;text-align:center;width:100%}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;color:var(--ivory);font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--g2)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);font-size:15px;line-height:1.75;margin-top:12px;max-width:64ch}

/* ---- thank you ---- */
.tick-big{width:64px;height:64px;border:1px solid var(--g2);border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:0 auto 26px;color:var(--g2);font-size:26px}
.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:20px;margin:40px auto;max-width:520px;text-align:start}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.steps li .mono{color:var(--g2);font-size:12px;letter-spacing:.1em;padding-top:3px}
.steps h3{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:20px;font-weight:400;color:var(--ivory)}
html[dir="rtl"] .steps h3{font-family:'Amiri','Amiri Fallback 1',serif}
.steps p{color:var(--muted);font-size:14.5px;line-height:1.7;margin-top:5px}

/* ---- legal ---- */
.legal-doc h2{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(20px,2.2vw,27px);font-weight:400;color:var(--ivory);margin:36px 0 12px}
html[dir="rtl"] .legal-doc h2{font-family:'Amiri','Amiri Fallback 1',serif}
.legal-doc p{color:var(--muted);font-size:15.5px;line-height:1.85;margin-bottom:12px;max-width:70ch}

/* ---- footer additions ---- */
#footer .headline{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(38px,6.4vw,92px);line-height:1.04;letter-spacing:-.015em;animation-duration:14s}
html[dir="rtl"] #footer .headline{font-family:'Amiri','Amiri Fallback 1',serif;line-height:1.3}
#footer .foot-sub{color:var(--muted);font-size:clamp(15px,1.8vw,19px);margin:26px auto 0;max-width:44ch;line-height:1.75}
#footer .eyebrow{margin-bottom:26px}
.legal-links{display:flex;gap:18px;flex-wrap:wrap}
.legal-links a{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.legal-links a:hover{color:var(--g2)}
html[dir="rtl"] .legal-links a{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13px;text-transform:none}
.copyright{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
html[dir="rtl"] .copyright{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13px;text-transform:none}
@media(max-width:860px){.colophon .row{flex-direction:column;align-items:flex-start;gap:18px}}

/* ---- checkout ---- */
.test-banner{display:inline-block;margin-bottom:20px;padding:9px 14px;border:1px solid var(--g2);
  background:rgba(201,162,75,.10);color:var(--g1);font-size:11px;letter-spacing:.08em}
html[dir="rtl"] .test-banner{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:13.5px}
.checkout{margin-top:38px;display:flex;flex-direction:column;gap:20px;max-width:520px}
.order{border:1px solid var(--line);padding:22px 22px 18px;background:linear-gradient(160deg,rgba(201,162,75,.06),transparent 70%)}
.order h2{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--g2);margin-bottom:16px}
html[dir="rtl"] .order h2{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:14px;text-transform:none}
.order-line{display:flex;justify-content:space-between;gap:16px;padding:9px 0;color:var(--ivory);font-size:15px}
.order-line.sub{color:var(--muted);font-size:13.5px;padding:5px 0}
.order-line.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;
  font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:24px}
html[dir="rtl"] .order-line.total{font-family:'Amiri','Amiri Fallback 1',serif}
.fld{display:flex;flex-direction:column;gap:8px}
.fld>span{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
html[dir="rtl"] .fld>span{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:14px;text-transform:none}
.fld input{background:transparent;border:1px solid var(--line);color:var(--ivory);padding:14px 16px;
  font-family:inherit;font-size:16px;transition:border-color .3s}
.fld input:focus{outline:none;border-color:var(--g2)}
.fld input::placeholder{color:var(--faint)}
.fld small{color:var(--faint);font-size:12.5px;line-height:1.6}
.checkout .micro a{color:var(--g2)}
.fld.err input{border-color:#c0553f}
.fld.err small{color:#c0553f}

/* ---- testimonials (renders only when real quotes exist) ---- */
.t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:40px}
.t-card{border:1px solid var(--line);border-inline-start:2px solid var(--g2);padding:26px 24px;
  background:linear-gradient(160deg,rgba(201,162,75,.05),transparent 60%);display:flex;flex-direction:column;gap:16px}
.t-card blockquote{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-style:italic;font-size:clamp(17px,1.9vw,21px);
  line-height:1.6;color:var(--ivory)}
html[dir="rtl"] .t-card blockquote{font-family:'Amiri','Amiri Fallback 1',serif;font-style:normal}
.t-card figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.t-card figcaption strong{color:var(--g2);font-size:14.5px}
.t-card figcaption span{color:var(--faint);font-size:13px}

/* =======================================================================
   v3 (2026-09-08 audit pass): density, type scale, tap targets, band caption,
   nav CTA, skip link, offer page, 404. Later rules win at equal specificity.
   ======================================================================= */

/* sections size to their content; only the hero keeps the full viewport */
.stack{min-height:auto}
#hero{min-height:100vh}
.pad{padding-top:clamp(72px,10vh,128px);padding-bottom:clamp(72px,10vh,128px)}
@media(max-width:860px){#hero{min-height:auto}}

/* photo band: bounded height, caption inside the content gutters, legible */
.band{height:clamp(420px,64vh,720px)}
.band .veil{background:linear-gradient(to top,rgba(11,11,12,.88),rgba(11,11,12,.25) 45%,rgba(11,11,12,0) 75%)}
.band .cap{left:clamp(24px,7vw,120px);right:clamp(24px,7vw,120px);bottom:clamp(40px,8vh,84px)}
.band p{font-size:clamp(22px,2.8vw,42px);max-width:26ch;line-height:1.15}
html[dir="rtl"] .band p{max-width:30ch;line-height:1.5}
@media(max-width:860px){
  .band{height:auto;min-height:58vh}
  .band .cap{position:relative;left:auto!important;right:auto!important;padding:42vh 24px 34px;z-index:2}
  .band p{max-width:none;font-size:clamp(22px,6vw,28px)}
}

/* type scale: nothing the reader must act on is under 11.5px */
#navlinks a{font-size:12.5px;letter-spacing:.14em}
html[dir="rtl"] #navlinks a{font-size:15px}
.eyebrow{font-size:11.5px}
.kicker .mono,.hero-note{font-size:12px}
.stat .num{white-space:nowrap}
.stat .lbl{font-size:14.5px}
html[dir="rtl"] .stat .lbl{font-size:15.5px}
.two-col li{font-size:16px}
.m-card p{font-size:15.5px;line-height:1.7}
.m-card .n,.w-tag,.proj-tag,.proj-status,.proj-cols h4,.links .k,.p-row .tag,.p-panel .meta .r,.gifts .n{font-size:11.5px}
.w-out{font-size:15px}
.proj-role,.chips li{font-size:12px}
.proj-link{font-size:12px}
.ticks li{font-size:15.5px;line-height:1.7}
.card-for{font-size:14px}
.card-body{font-size:15.5px}
.card-foot .go,.prod .back{font-size:11.5px}
.badge{font-size:10.5px}
.micro{font-size:12.5px}
.legal-links a,.copyright{font-size:11.5px}
.note-box{font-size:15px}
.story p{font-size:clamp(16px,1.7vw,18px)}
.steps p,.faq p{font-size:15.5px}
.buy .micro,.buy-price .vat{font-size:12px}
.test-banner{font-size:12px}
.fld>span,.order h2{font-size:11.5px}
.order-line.sub{font-size:14px}
html[dir="rtl"] .m-card .n,html[dir="rtl"] .w-tag,html[dir="rtl"] .proj-tag,html[dir="rtl"] .proj-status,
html[dir="rtl"] .proj-cols h4,html[dir="rtl"] .links .k,html[dir="rtl"] .badge,html[dir="rtl"] .legal-links a,
html[dir="rtl"] .copyright,html[dir="rtl"] .micro,html[dir="rtl"] .card-foot .go,html[dir="rtl"] .prod .back{font-size:14px}

/* tap targets: 40px+ for anything a thumb must hit */
#navtoggle{min-width:44px;min-height:42px;justify-content:center;align-items:center}
.legal-links{gap:6px 14px}
.legal-links a{display:inline-block;padding:12px 4px}
.prod .back{display:inline-block;padding:10px 0;margin-bottom:12px}
.proj-link{padding:10px 0}
.card-foot{padding-top:18px}
@media(max-width:860px){
  #navlinks #lang{width:auto;margin:14px 24px 18px}
  #navlinks .nav-cta{width:auto;align-self:flex-start;margin:14px 24px 0;border-bottom:0}
}

/* nav CTA (Work with me / اعمل معي) */
.nav-cta{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--g2);color:#0B0B0C!important;padding:11px 16px;font-weight:700;line-height:1;transition:background .3s}
.nav-cta:hover{background:var(--g1)}
html[dir="rtl"] .nav-cta{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;text-transform:none;font-size:15px;padding:10px 16px}

/* skip link: invisible until focused */
.skip{position:absolute;inset-inline-start:-9999px;top:10px;z-index:200;background:var(--g2);color:#0B0B0C;
  padding:12px 18px;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:12px;letter-spacing:.1em}
html[dir="rtl"] .skip{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:15px}
.skip:focus{inset-inline-start:10px}

/* home: offer section */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:40px 0 34px}
.offer-card{display:flex;flex-direction:column;gap:10px;padding:26px 24px 28px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(201,162,75,.06),transparent 60%)}
.offer-card .n{font-size:11.5px;letter-spacing:.2em;color:var(--g2)}
.offer-card h3{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(22px,2.3vw,30px);font-weight:400;color:var(--ivory);line-height:1.1}
.offer-card .tag{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.offer-card p{color:var(--muted);font-size:15.5px;line-height:1.7;margin-top:4px}
html[dir="rtl"] .offer-card h3{font-family:'Amiri','Amiri Fallback 1',serif;line-height:1.35}
html[dir="rtl"] .offer-card .n,html[dir="rtl"] .offer-card .tag{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;text-transform:none;font-size:14px}

/* work-with-me page */
.wwm-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr);gap:clamp(28px,4vw,64px);margin-top:44px;align-items:start}
@media(max-width:900px){.wwm-grid{grid-template-columns:1fr}}
.fmt-list{margin-top:22px;border-top:1px solid var(--line)}
.fmt{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,32px);padding:34px 0;border-bottom:1px solid var(--line)}
.fmt-n{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(28px,3vw,40px);line-height:1;color:var(--g2);min-width:2.2ch}
html[dir="rtl"] .fmt-n{font-family:'Amiri','Amiri Fallback 1',serif}
.fmt h2{font-family:'DM Serif Display','DM Serif Display Fallback',serif;font-size:clamp(24px,2.6vw,34px);font-weight:400;color:var(--ivory);line-height:1.1}
html[dir="rtl"] .fmt h2{font-family:'Amiri','Amiri Fallback 1',serif;line-height:1.35}
.fmt-tag{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g2);margin-top:8px}
html[dir="rtl"] .fmt-tag{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;text-transform:none;font-size:14px}
.fmt-body{color:var(--muted);font-size:16px;line-height:1.75;margin-top:14px;max-width:62ch}
.fmt-for{margin-top:14px;font-size:15px;color:var(--ivory)}
.fmt-for .mono{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-inline-end:8px}
html[dir="rtl"] .fmt-for .mono{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;text-transform:none;font-size:14px}
.wwm-steps{margin:22px 0 0;max-width:none}
.wwm-steps p{color:var(--muted);font-size:16px;line-height:1.75}
.wwm-pricing{color:var(--muted);font-size:16px;line-height:1.75;margin-top:18px;max-width:62ch}
.ticks.no li::before{content:"×";color:var(--faint)}
#wwm .ticks{margin-top:18px}

/* 404 */
.nf-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.nf .micro a{color:var(--g2)}

/* checkout: price not yet public */
.order-line .tba{color:var(--faint);font-size:13px;font-family:'Space Mono','Space Mono Fallback',monospace;letter-spacing:.06em}
html[dir="rtl"] .order-line .tba{font-family:'Tajawal','Tajawal Fallback 1',system-ui,sans-serif;letter-spacing:0;font-size:14px}
.cta[disabled],.cta.disabled{opacity:.45;pointer-events:none}
/* desktop nav links get a real hit area; smallest label on work-with-me lifted */
#navlinks a{padding:10px 0}
@media(max-width:860px){#navlinks a{padding:16px 24px}}
.fmt-for .mono{font-size:11.5px}