@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');

/* ===========================================================================
   modonraselhikmaa.com — austere Swiss luxury. Monochrome + stone.
   Tokens derived from live CSS extraction of modon.com (see DESIGN.md).
   =========================================================================== */
:root{
  --ink:#0c0c0d; --ink-2:#1a1a1c; --ink-soft:#4a4a4e;
  --surface:#f4f2f0; --surface-2:#ffffff; --line:#dedad5;
  --stone:#b2aa98;          /* light accent — DARK GROUNDS ONLY (8.47:1 on --ink, 2.31 on white) */
  --stone-deep:#726c5f;     /* the text-safe stone: 5.19:1 on #fff, 4.65:1 on --surface.
                               Was #8f8878 = 3.52:1 — below AA, and it carried the card PRICES.
                               The UX contract said "verify per palette, they are light accents";
                               nobody ran the numbers until the contrast audit did. */
  --stone-tint:#e6e2da;
  --wa:#1a8440;             /* WhatsApp green darkened from #23b558: white button text was 2.68:1.
                               Brand recognition survives a luminance shift; a failing button does not. */
  --danger:#b3261e;
  --radius:0px; --radius-pill:999px;
  --shadow:0 1px 0 var(--line);
  --shadow-lift:0 18px 48px rgba(12,12,13,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --ff:"Vazirmatn",system-ui,"Segoe UI",Tahoma,sans-serif;
  --pad-sec:clamp(4rem,9vw,7.5rem);
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
/* 🔑 Mobile overflow belt. `clip` is unsupported on older Safari/webviews, hence both.
   translateX reveals are the usual culprit and are worst on /en/ LTR. */
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font:400 1.0625rem/1.85 var(--ff);
  -webkit-font-smoothing:antialiased;
}
body[dir="ltr"]{font-family:var(--ff)}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--stone-deep);outline-offset:2px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 🔑 Clipped, NOT parked at -9999px. Under dir=rtl an inline-start offset lands the link 9999px
   to the RIGHT and the whole document gains 10,000px of sideways scroll. */
.skip{position:absolute;top:0;inset-inline-start:0;z-index:1200;background:var(--ink);color:#fff;
  padding:.75rem 1.25rem;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none}

/* ---------- type ---------- */
/* Scale is the luxury signal in a monochrome system — there is no colour doing the work, so the
   jump from display to body has to carry it. */
h1,h2,h3,h4{margin:0 0 .6em;font-weight:700;line-height:1.1;letter-spacing:-.03em}
h1{font-size:clamp(2.4rem,6.2vw,4.9rem);line-height:1.04}
h2{font-size:clamp(1.7rem,3.6vw,2.9rem);letter-spacing:-.022em}
h3{font-size:1.2rem;font-weight:600;letter-spacing:0}
/* ⛔ ARABIC TAKES NO TRACKING — EVER. Arabic is a connected script: letters join into meaningful
   shapes, and any letter-spacing, positive OR negative, breaks the joins. The first version of this
   block shipped -.015em on Arabic headings; that is the single most common RTL typography mistake
   and it is reverted here. Latin keeps its optical tightening. See _research/ux-contract.md. */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0}
[dir="rtl"] h1{line-height:1.2}
[dir="rtl"] h2{line-height:1.3}
/* Arabic glyphs render visually smaller than Latin at the same point size: body wants 18–20px
   where Latin wants 15–16. Never one size for both. */
[dir="rtl"] body,body[dir="rtl"]{font-size:1.135rem}
p{margin:0 0 1.1em}
.lead{font-size:1.115rem}
.eyebrow{
  font:500 .8rem/1.4 var(--ff);letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone-deep);margin:0 0 .9rem;
}
/* Arabic must never be uppercased — it has no case and the property breaks shaping in some engines */
[dir="rtl"] .eyebrow:lang(ar){text-transform:none;letter-spacing:0}
.tabnum{font-variant-numeric:tabular-nums}
/* ⭐ AD RANK line — the English project name shown inside the Arabic page. Subordinate to the H1
   visually, but real indexable text, never hidden: display:none would defeat its whole purpose. */
.en-line{
  font:500 .95rem/1.5 var(--ff);letter-spacing:.01em;color:var(--stone);
  margin:-.35em 0 .9em;
}
.card .en-line{font-size:.85rem;color:var(--stone-deep);margin:-.4em 0 .6em}
.hero .en-line{color:var(--stone)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:900;background:var(--ink);color:#fff}
.hdr-in{display:flex;align-items:center;gap:1.25rem;min-height:68px}
.hdr a{text-decoration:none}
.logo{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:#fff}
.logo small{display:block;font-weight:400;font-size:.7rem;letter-spacing:.1em;color:var(--stone)}
.nav{display:flex;gap:1.5rem;margin-inline-start:auto;font-size:.95rem}
.nav a{color:#e8e6e3;padding:.5rem 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--stone)}
.hdr .btn{margin-inline-start:1rem}
.burger{display:none;margin-inline-start:auto;background:none;border:0;color:#fff;padding:.6rem;min-width:44px;min-height:44px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8rem 1.6rem;border:1px solid var(--ink);border-radius:var(--radius);
  background:var(--ink);color:#fff;font:600 .975rem var(--ff);text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn:hover{background:var(--stone-deep);border-color:var(--stone-deep)}
.btn-stone{background:var(--stone);border-color:var(--stone);color:var(--ink)}
.btn-stone:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:currentColor;border-color:currentColor}
.btn-ghost:hover{background:currentColor;color:var(--ink)}
.btn-wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.sec-cta{display:flex;justify-content:center;margin-top:2rem}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  min-height:clamp(30rem,80vh,52rem);display:flex;flex-direction:column;justify-content:center}
/* The photograph carries the page. It was previously at opacity .62 under a .9 flat tint, which is
   why the hero read as a grey box with type on it — DESIGN.md asks for a bottom-anchored gradient,
   not a wash. */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,12,13,.62) 0,rgba(12,12,13,.18) 26%,rgba(12,12,13,.72) 72%,rgba(12,12,13,.94) 100%)}

/* Developer credit lockup. ⛔ Per the impersonation guardrail this is a CREDIT, never the site's
   primary mark: it is labelled «مطوّر المشروع», sits below our own header identity, and never
   replaces it. */
.devmark{display:inline-flex;align-items:center;gap:.9rem;margin-bottom:1.3rem;
  padding:.5rem .95rem;border:1px solid rgba(255,255,255,.26)}
.devmark .lbl{font-size:.68rem;letter-spacing:.14em;color:var(--stone);white-space:nowrap}
.devmark .rule{width:1px;height:1.4rem;background:rgba(255,255,255,.26)}
.devmark img{display:block;width:104px;height:19px}
.sec .devmark{border-color:var(--line)}
.sec .devmark .lbl{color:var(--ink-soft)}
.band .devmark{border-color:rgba(255,255,255,.26)}
.band .devmark .lbl{color:var(--stone)}
.ftr-dev{margin:2.25rem 0 .75rem}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;
  align-items:end;padding-block:clamp(3.5rem,8vw,6.5rem)}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(12,12,13,.55)}
.hero p{color:#e2dfda;max-width:60ch;text-shadow:0 1px 12px rgba(12,12,13,.5)}
/* 🔑 --stone is a light accent. On the ink surface it passes; over a PHOTOGRAPH it failed —
   the English ad-rank line was unreadable on mobile where the image sits directly behind it. */
.hero .en-line{color:#d3cfc8}
.hero .eyebrow{color:var(--stone);text-shadow:0 1px 10px rgba(12,12,13,.7)}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 1.75rem;padding:0;list-style:none}
.hero-chips li{border:1px solid rgba(255,255,255,.28);padding:.4rem .85rem;font-size:.85rem;color:#e8e6e3}
.hero-price{font-size:1.35rem;font-weight:700;color:var(--stone)}
.scroll-cue{position:relative;z-index:2;padding-bottom:1.5rem;font-size:.8rem;letter-spacing:.14em;color:var(--stone)}

/* ---------- lead form ---------- */
.formcard{background:var(--surface-2);color:var(--ink);padding:1.75rem;border:1px solid var(--line)}
.formcard-title{font:700 1.15rem/1.3 var(--ff);margin:0 0 .35rem;letter-spacing:-.01em}
/* 🔑 The hero paints every <p> near-white so copy survives over the photograph. `.formcard-title`
   IS a <p>, sitting on a WHITE card — and `.hero p` (0,1,1) outranks `.formcard-title` (0,1,0), so
   «اعرف الأسعار وأنظمة السداد» rendered white-on-white and disappeared. Same family as the
   documented .band / .imgbg traps, one level further down. Reset the whole card, not just the title. */
.hero .formcard,.hero .formcard p,.hero .formcard .formcard-title,
.hero .formcard label,.hero .formcard span{color:var(--ink);text-shadow:none;max-width:none}
.hero .formcard .note,.hero .formcard .err{color:var(--ink-soft)}
.hero .formcard .err{color:var(--danger)}
.errsum-title{font:600 .95rem/1.3 var(--ff);color:var(--danger);margin:0 0 .4rem}
.formcard .note{font-size:.85rem;color:var(--ink-soft);margin-bottom:1.1rem}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.35rem}
.field input{
  width:100%;min-height:48px;padding:.7rem .9rem;font:400 1rem var(--ff);
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
}
.field input:focus{border-color:var(--ink);outline:2px solid var(--stone-deep);outline-offset:1px}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.field .err{display:block;margin-top:.3rem;font-size:.82rem;color:var(--danger)}
/* honeypot — clipped rather than parked off-canvas, for the same RTL overflow reason as .skip.
   Still in the layout and still fillable by a bot, which display:none would not be. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.errsum{border:1px solid var(--danger);padding:.9rem 1.1rem;margin-bottom:1rem;background:#fdf2f1}

.errsum a{color:var(--danger)}
.formcard .btn{width:100%}

/* ---------- sections: hairline architecture ---------- */
.sec{padding-block:var(--pad-sec);border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
/* 🎯 CENTRED LAYOUT — owner rule, every section of every page. The BLOCK is centred as well as
   the text, and the measure cap stays: centred text at a 110-character measure is the worst of
   both. Data table cells, form fields and the sticky bar are exempt — see the UX contract. */
.sec-head{max-width:72ch;margin:0 auto 2.5rem;text-align:center}
.answer{font-size:1.115rem;color:var(--ink);max-width:70ch;margin-inline:auto}
.sec > p{max-width:68ch;margin-inline:auto;text-align:center}
.sec > p + p{margin-top:1.05em}
.sec > .facts,.sec > .grid,.sec > .faq,.sec > .tbl-wrap,.sec > .mp,.sec > .gal{margin-inline:auto}
.facts dt,.facts dd,.card,.faq summary,.faq details p,.mp figcaption{text-align:center}
.card .en-line{text-align:center}
.hero-in > div{text-align:center}
.hero p,.hero .devmark{margin-inline:auto}
.hero-chips{justify-content:center}
/* ⛔ exempt: table cells keep a shared start edge, or a price column cannot be scanned */
th{text-align:center}
td{text-align:start}
/* ⛔ exempt: the accessibility floor puts each label above its input, at the input's own edge */
.formcard,.formcard .field label,.formcard .err{text-align:start}
.chan .card{align-items:center}
.formcard .formcard-title,.formcard > .note{text-align:center}

/* Long answer bodies read as two columns on wide screens: the same restraint, better rhythm. */
@media (min-width:1100px){
  .prose-2{columns:2;column-gap:3.5rem;max-width:none}
  .prose-2 p{max-width:none;break-inside:avoid;text-align:center}
  .prose-2 p:first-child{margin-top:0}
}

/* full-bleed dark band. 🔑 .band whitens ALL descendants — any light card inside MUST reset. */
.band{position:relative;background:var(--ink);color:#f0eeec;border-top:0;overflow:hidden}
/* The photograph was at .22 under a .55→.82 gradient: invisible sludge, worse than no image.
   Raised and the gradient softened so it reads as a photograph while the type still clears AA. */
.band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;
  object-position:50% 45%}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,13,.78),rgba(12,12,13,.62) 40%,rgba(12,12,13,.86))}
.band > .wrap{position:relative;z-index:2}

/* 🔑 THE INVERSE OF THE DOCUMENTED TRAP — and it shipped. The known bug is a light card inside a
   band inheriting white text. The one nobody wrote down is a token that HARDCODES --ink landing
   inside the band: `.answer{color:var(--ink)}` rendered #0c0c0d on a #0c0c0d ground — the whole
   developer answer was black on black. Reset every dark-by-default token here, not just the two
   that were already known, because the next one added will hit the same wall. */
.band .answer{color:#e8e6e3}
.band .eyebrow{color:var(--stone)}
.band .note,.band .updated,.band .srclist,.band .split-src,.band .split-title,
.band .facts dt,.band .mp figcaption{color:#b8b4ae}
.band .facts,.band .split-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.band .facts div{border-color:rgba(255,255,255,.16)}
.band .facts dd,.band .split-list dd{color:#f0eeec}
.band .split-list > div{border-color:rgba(255,255,255,.16)}
.band .split-tel a{color:#fff}
.band table{color:#e8e6e3}
.band th{background:rgba(255,255,255,.07);color:#fff}
.band th,.band td{border-color:rgba(255,255,255,.16)}
.band .tbl-wrap{border-color:rgba(255,255,255,.16);background:transparent}
.band a:not(.btn){color:var(--stone)}
.band h2,.band h3{color:#fff}
.band .card,.band .formcard{color:var(--ink)}
.band .card h3,.band .formcard .formcard-title,.band .card h2{color:var(--ink)}
/* 🔑 .imgbg whitens h3 for text sitting directly on imagery — but a white card INSIDE it would
   then render a white heading on white. Both resets are required, not one. */
.imgbg h3{color:#fff}
.imgbg .card h3,.imgbg .card h2,.imgbg .formcard .formcard-title{color:var(--ink)}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:1.5rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* Card = photograph first, then a hairline-ruled data block. The image is flush to the card edge;
   a card whose picture floats inside a padded box reads as a document, not a product. */
.card{background:var(--surface-2);border:1px solid var(--line);padding:1.4rem;color:var(--ink);
  transition:border-color .2s var(--ease)}
.card h3{color:var(--ink);margin-bottom:.35em;font-size:1.28rem}
/* The photograph bleeds to the card edge. Padding it in reads as a document illustration;
   flush reads as a product card. Negative margins keep every other child's padding intact —
   including the circular .badge-n, which a flex/padding rewrite would have squashed. */
.card-img{aspect-ratio:16/10;object-fit:cover;display:block;
  width:calc(100% + 2.8rem);max-width:none;margin:-1.4rem -1.4rem 1.15rem}
/* A card with no photograph must still hold the grid's rhythm — an empty white box beside eight
   photographed siblings reads as a broken card, not as a card without a picture. */
.card-noimg{aspect-ratio:16/10;width:calc(100% + 2.8rem);margin:-1.4rem -1.4rem 1.15rem;
  background:var(--stone-tint);display:grid;place-items:center}
.card-noimg span{font-size:.78rem;letter-spacing:.12em;color:var(--ink-soft)}
[dir="rtl"] .card-noimg span{letter-spacing:0}   /* connected script takes no tracking */
a.card:hover,.card:hover{border-color:var(--stone-deep)}
/* the price is the one place --stone is allowed to speak on a light surface */
.card .tabnum{color:var(--stone-deep)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;
  border:1px solid var(--line);background:var(--surface-2)}
.facts div{padding:1.45rem 1.4rem;border-inline-start:1px solid var(--line)}
.facts div:first-child{border-inline-start:0}
.facts dt{font-size:.78rem;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:.45rem}
.facts dd{margin:0;font-size:1.45rem;font-weight:700;line-height:1.15;letter-spacing:-.02em}

/* phase badges — circles, mirroring modon.com's own circle usage */
.badge-n{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;
  border:1px solid var(--stone);border-radius:50%;font-size:.9rem;font-weight:600;color:var(--stone-deep)}

/* ---------- tables (unit matrix) ---------- */
.tbl-wrap{border:1px solid var(--line);background:var(--surface-2)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{padding:.85rem 1rem;text-align:start;border-bottom:1px solid var(--line)}
th{background:var(--stone-tint);font-weight:600;font-size:.875rem}
tbody tr:last-child td{border-bottom:0}

/* Narrow screens: every row becomes a labelled card. The reader NEVER swipes sideways to
   reach a column — each cell carries its own header through data-label. */
@media (max-width:640px){
  .tbl-wrap{border:0;background:transparent}
  table,tbody,tr,td{display:block;width:auto}
  thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  tbody tr{border:1px solid var(--line);background:var(--surface-2);
    padding:.35rem .9rem;margin-bottom:.75rem}
  tbody tr:last-child{margin-bottom:0}
  td{display:grid;grid-template-columns:minmax(5.5rem,auto) 1fr;gap:.25rem 1rem;
    align-items:start;padding:.6rem 0;border-bottom:1px dashed var(--line)}
  tr td:last-child{border-bottom:0}
  td::before{content:attr(data-label);font-size:.8rem;font-weight:600;
    color:var(--ink-soft);line-height:1.55}
}

/* ---------- master plan: a SEARCHED asset, never a background texture ---------- */
.mp{margin:0}
.mp a{display:block;border:1px solid var(--line);background:var(--surface-2);padding:.75rem}
.mp img{width:100%}
.mp figcaption{margin-top:.65rem;font-size:.85rem;color:var(--ink-soft);text-align:center}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.gal img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:1.15rem 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--stone-deep);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.85rem 0 0;color:var(--ink-2)}

/* ---------- contact channel cards (⛔ never a table) ---------- */
.chan{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem}
.chan .card{display:flex;flex-direction:column;gap:.4rem}
.chan .tag{font-size:.78rem;letter-spacing:.1em;color:var(--stone-deep)}
.chan .val{font-size:1.2rem;font-weight:700;direction:ltr;text-align:start}
.chan .best{font-size:.85rem;color:var(--ink-soft)}
.chan .card.primary{border-color:var(--ink);border-width:2px}

/* ---------- comparisons: VS cards. ⛔ wide tables banned ---------- */
.vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#c9c6c2;padding-block:3.5rem 2rem;font-size:.925rem}
.ftr a{color:#e8e6e3;text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr h3{color:#fff;font-size:.95rem;margin-bottom:.9rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.5rem}
.ftr .disclaimer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #26262a;font-size:.85rem;color:#8f8c88}

/* ---------- sticky mobile bar ---------- */
.sticky{
  display:none;position:fixed;inset-inline:0;bottom:0;z-index:950;
  background:var(--ink);border-top:1px solid #26262a;
  padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  grid-template-columns:repeat(3,1fr);gap:.5rem;
}
.sticky a{min-height:48px;font-size:.9rem;padding:.6rem .5rem}

/* ---------- modal (JS toggles .open — never [hidden]) ---------- */
.modal{position:fixed;inset:0;z-index:1100;display:none}
.modal.open{display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(12,12,13,.72)}
.modal-panel{position:relative;width:min(100% - 2rem,480px);max-height:90dvh;overflow:auto;
  background:var(--surface);border:1px solid var(--line);padding:1.75rem}
.modal-x{position:absolute;inset-inline-end:.5rem;top:.5rem;min-width:44px;min-height:44px;
  background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .hero-in{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:block}
  .nav.open{display:flex;position:absolute;inset-inline:0;top:68px;flex-direction:column;
    background:var(--ink);padding:1rem 1.25rem;gap:.25rem;border-top:1px solid #26262a}
  .hdr .btn{display:none}
  .g2,.g3{grid-template-columns:1fr}
  .sticky{display:grid}
  body{padding-bottom:76px}      /* reserve space so the bar never obscures focus */
  .facts div{border-inline-start:0;border-top:1px solid var(--line)}
  .facts div:first-child{border-top:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .hero-bg{opacity:.5}
}

/* ===========================================================================
   ELEVATION PASS — 15 Aug 2026. "Swiss spec sheet" pushed from competent to
   deliberate. Nothing here adds colour: this identity has exactly one accent
   (--stone) and the work is done by scale, rule weight and whitespace.
   =========================================================================== */

/* Every section opens with a centred index mark: a hairline dropping into a stone square.
   It gives the page a repeating structural beat that pure whitespace could not. */
.sec > .wrap > .sec-head{position:relative;padding-top:3.25rem}
.sec > .wrap > .sec-head::before{
  content:"";position:absolute;top:0;inset-inline-start:50%;transform:translateX(50%);
  width:1px;height:2.15rem;background:var(--stone-deep)}
[dir="ltr"] .sec > .wrap > .sec-head::before{transform:translateX(-50%)}
.sec > .wrap > .sec-head::after{
  content:"";position:absolute;top:2.15rem;inset-inline-start:50%;transform:translate(50%,0);
  width:5px;height:5px;background:var(--stone-deep)}
[dir="ltr"] .sec > .wrap > .sec-head::after{transform:translate(-50%,0)}
.band > .wrap > .sec-head::before,.band > .wrap > .sec-head::after{background:var(--stone)}

/* Hero: the price is the second-loudest thing on the page after the name. */
.hero-price{font-size:clamp(1.45rem,2.4vw,2rem);font-weight:700;color:var(--stone);
  letter-spacing:-.01em;padding-top:1.15rem;margin-top:1.15rem;position:relative}
.hero-price::before{content:"";position:absolute;top:0;inset-inline-start:50%;transform:translateX(50%);
  width:3.5rem;height:1px;background:var(--stone)}
[dir="ltr"] .hero-price::before{transform:translateX(-50%)}
.hero-chips li{border-color:rgba(255,255,255,.34);backdrop-filter:none;font-weight:500}
.scroll-cue{position:relative;z-index:2;padding-block:1.5rem 0;font-size:.82rem;
  letter-spacing:.14em;color:var(--stone);text-align:center}

/* Cards: a ghost numeral behind the content, the image lifting on hover. The numeral is
   decorative only — the real .badge-n stays in the flow for anyone reading the order. */
.card{position:relative;overflow:hidden}
.card .badge-n{position:relative;z-index:2}
.card::after{content:"";position:absolute;inset:0;border:1px solid transparent;
  transition:border-color .25s var(--ease);pointer-events:none}
.card:hover::after{border-color:var(--stone)}
.card-img{transition:transform .5s var(--ease)}
.card:hover .card-img{transform:scale(1.035)}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;text-decoration-color:var(--stone-deep)}

/* Fact strip: the figures carry the page's authority, so they get display treatment. */
.facts dd{font-size:clamp(1.4rem,2.1vw,1.85rem)}
.facts dt{text-transform:none;color:var(--stone-deep);font-weight:600}

/* Master plan: framed like a drawing, captioned like a plate. */
.mp a{border-color:var(--stone);padding:.85rem;background:var(--surface-2);
  transition:border-color .25s var(--ease)}
.mp a:hover{border-color:var(--stone-deep)}
.mp figcaption{padding-top:.85rem;font-size:.82rem;letter-spacing:.06em;color:var(--ink-soft)}

/* Buttons: square, and they invert rather than tint. */
.btn{transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}

/* Section bands alternate ground so the page has a rhythm you can feel while scrolling. */
.sec:not(.band):nth-of-type(even){background:var(--surface-2)}

@media (prefers-reduced-motion:reduce){
  .card-img,.card::after,.btn,.mp a{transition:none}
  .card:hover .card-img{transform:none}
}

/* ⛔ Every Arabic-bearing label that still carried tracking. The .eyebrow is exempt on the Arabic
   page because its content is the LATIN ad-rank line — tracking a Latin string is correct; the
   ban is on the script, not on the element. */
[dir="rtl"] .scroll-cue,[dir="rtl"] .devmark .lbl,[dir="rtl"] .facts dt,
[dir="rtl"] .mp figcaption,[dir="rtl"] .logo small,[dir="rtl"] .en-line:lang(ar){letter-spacing:0}

/* Trust stack — benchmark pattern 5. Sits directly under the hero, on the ink ground so it reads
   as part of the hero block rather than as the first content section. */
.trust{background:var(--ink-2);color:#e8e6e3;border-block:1px solid rgba(255,255,255,.1)}
.trust-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:rgba(255,255,255,.1);padding:0}
.trust-in > div{background:var(--ink-2);padding:1.4rem 1.25rem;text-align:center}
.trust strong{display:block;font-size:.95rem;font-weight:600;color:#fff;margin-bottom:.3rem}
.trust span{display:block;font-size:.82rem;line-height:1.6;color:#a9a5a0}
.trust a{text-decoration:none;color:var(--stone)}
.trust a:hover{text-decoration:underline}

/* ===========================================================================
   SPLIT PANEL — benchmark pattern 4: photographs and numbers read together.
   Gallery on the reading side, data rail sticky beside it.
   =========================================================================== */
.split{padding-block:clamp(2.5rem,5vw,4rem);background:var(--surface-2);border-top:1px solid var(--line)}
.split-in{display:grid;gap:1.5rem}
.split-media{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.split-shot{display:block;position:relative;overflow:hidden;background:var(--stone-tint)}
.split-shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .5s var(--ease)}
.split-shot:hover img{transform:scale(1.04)}
.split-shot.is-lead{grid-column:1 / -1}
.split-shot.is-lead img{aspect-ratio:16/9}
/* The master-plan tile is NAVIGATION to the dedicated figure below, never a second copy of it. */
.split-shot.is-mp img{object-fit:contain;background:var(--surface-2)}
.split-shot.is-mp span{position:absolute;inset-inline-start:0;bottom:0;
  background:var(--ink);color:#fff;font-size:.75rem;padding:.35rem .7rem}

.split-card{border:1px solid var(--line);background:var(--surface-2);padding:1.5rem;text-align:center}
.split-title{font-size:.72rem;letter-spacing:.14em;color:var(--ink-soft);margin:0 0 .5rem}
[dir="rtl"] .split-title{letter-spacing:0}
.split-price{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:700;color:var(--stone-deep);margin:0 0 .25rem}
.split-src{font-size:.78rem;color:var(--ink-soft);margin:0 0 1.1rem}
.split-list{margin:0 0 1.25rem;display:grid;gap:0;border-top:1px solid var(--line)}
.split-list > div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.65rem 0;border-bottom:1px solid var(--line);text-align:start}
.split-list dt{font-size:.82rem;color:var(--ink-soft);margin:0}
.split-list dd{margin:0;font-weight:600;font-size:.95rem;text-align:end}
.split-card .btn{width:100%}
.split-tel{margin:.85rem 0 0;font-size:1.05rem;font-weight:700}
.split-tel a{text-decoration:none;color:var(--ink)}

/* Mobile: the data rail comes FIRST. A phone user came for the price, not the carousel. */
@media (max-width:900px){
  .split-in{grid-template-columns:1fr}
  .split-data{order:-1}
  .split-media{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:901px){
  .split-in{grid-template-columns:1.55fr .95fr;gap:2.5rem;align-items:start}
  /* 68px is the sticky header; the rail parks just below it. */
  .split-data{position:sticky;top:calc(68px + 1.25rem)}
}

/* The related strip stayed at 2 columns down to 390px, leaving ~116px of text column — narrow
   enough that a single long token ("Montage-branded") overflowed it. Both halves of the fix are
   real: give the strip a full column on phones, AND let long tokens break anywhere, because the
   next long word will not be one we predicted. */
@media (max-width:640px){
  .g4{grid-template-columns:1fr}
}
.card p,.card h3,.split-list dd,.trust span{overflow-wrap:anywhere}

.updated{font-size:.85rem;color:var(--ink-soft)}
.srclist{font-size:.9rem;color:var(--ink-soft)}

/* ===========================================================================
   CONTEXT-OVERRIDE FIXES — found by the WCAG contrast audit, not by eye.
   Both are the same class of bug: a CONTAINER rule outranking a COMPONENT rule.
   =========================================================================== */

/* `.ftr a{color:#e8e6e3}` (0,2,0) beat `.btn-wa{color:#fff}` (0,1,0), so every footer button
   rendered its label in near-grey on green — 3.82:1. A button owns its own text colour in every
   context it can appear in; the compound selector makes that true rather than hoping. */
.ftr .btn,.band .btn,.trust .btn,.btn.btn-wa{color:#fff}
.ftr .btn-stone,.band .btn-stone,.btn.btn-stone{color:var(--ink)}
.ftr .btn:hover,.band .btn:hover{color:#fff}
.btn.btn-stone:hover{color:#fff}

/* A WHITE card inside a DARK band: `.band a:not(.btn)` painted its links --stone (2.31:1 on white).
   The band's own links still need the light accent, so this restores ink INSIDE the card only —
   the third variant of the .band trap this stylesheet has now had to answer. */
.band .card a,.band .split-card a,.band .formcard a{color:var(--ink)}
.band .card .tabnum{color:var(--stone-deep)}
.band .card .en-line{color:var(--stone-deep)}

/* ---------- phase summary box: a parent page carries its phases in full ---------- */
.phase-box{display:flex;flex-direction:column}
.phase-facts{margin:.9rem 0 .5rem;display:grid;gap:0;border-top:1px solid var(--line);text-align:start}
.phase-facts > div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.5rem 0;border-bottom:1px solid var(--line)}
.phase-facts dt{margin:0;font-size:.8rem;color:var(--ink-soft)}
.phase-facts dd{margin:0;font-size:.92rem;font-weight:600;text-align:end;overflow-wrap:anywhere}
.phase-src{font-size:.75rem;color:var(--ink-soft);margin:.25rem 0 .9rem}
.phase-cta{margin:auto 0 0}
.phase-cta .btn{width:100%;min-height:44px;padding:.6rem 1.2rem;font-size:.9rem}
.band .phase-facts > div,.band .phase-facts{border-color:var(--line)}