/* ============================================================
   BASE — reset, typography, layout primitives, RTL
   Logical properties throughout so RTL comes nearly free.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ivory);
  color:var(--slate);
  font-family:var(--f-body);
  font-weight:300;
  font-size:var(--t-15);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
img,video{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,h5,h6,p{margin:0}
table{border-collapse:collapse;width:100%}

/* ── headings ── */
.display{
  font-family:var(--f-display);font-weight:500;color:var(--onyx);
  text-transform:uppercase;letter-spacing:.14em;line-height:1.14;
}
.head{
  font-family:var(--f-head);font-weight:500;color:var(--onyx);
  line-height:1.22;letter-spacing:.005em;
}
.eyebrow{
  font-size:var(--t-10);letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:400;
}
.label{
  font-size:var(--t-10);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mist);font-weight:400;
}
.lede{font-size:var(--t-16);color:var(--slate);line-height:1.75}
.muted{color:var(--mist)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── layout ── */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y)}
.bg-ivory{background:var(--ivory)}
.bg-paper{background:var(--paper)}
.bg-sand{background:var(--sand)}
/* Adjacent sections never share a background — the rule enforces the seam. */
.section + .section,
.hero + .section,
.trust + .section{border-top:1px solid var(--rule)}

.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-24);margin-bottom:var(--s-48);flex-wrap:wrap;
}
.sec-head h2{font-family:var(--f-display);font-weight:500;color:var(--onyx);
  text-transform:uppercase;letter-spacing:.16em;font-size:var(--t-22);line-height:1.3}
@media (min-width:900px){ .sec-head h2{font-size:var(--t-28)} }

/* champagne hairline — gold arrives as a line, never a fill */
.hair{height:1px;background:var(--champagne);border:0;margin:0;width:44px}

/* ── buttons (Section 2) ── */
.btn,.btn-2,.btn-3,.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 34px;font-family:var(--f-body);font-weight:400;font-size:var(--t-11);
  letter-spacing:.2em;text-transform:uppercase;border-radius:var(--r-1);
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btn{border-color:var(--onyx);background:var(--onyx);color:var(--ivory)}
.btn:hover{background:transparent;color:var(--onyx)}
.btn-2{border-color:var(--onyx);background:transparent;color:var(--onyx)}
.btn-2:hover{background:var(--onyx);color:var(--ivory)}
.btn-3{border-color:var(--champagne);background:transparent;color:var(--gold-ink)}
.btn-3:hover{background:var(--champagne);color:var(--paper)}
.btn-wa{border-color:var(--emerald);background:transparent;color:var(--emerald)}
.btn-wa:hover{background:var(--emerald);color:var(--paper)}
.btn-full{width:100%}
.btn:disabled,.btn-2:disabled{opacity:.4;cursor:not-allowed}

/* text link with champagne underline */
.link-gold{
  color:var(--gold-ink);font-size:var(--t-11);letter-spacing:.18em;
  text-transform:uppercase;display:inline-block;padding-bottom:3px;
  border-bottom:1px solid var(--champagne);
}
.link-gold:hover{border-bottom-color:var(--gold-ink)}

/* ── accessibility ── */
:focus-visible{outline:1px solid var(--gold-ink);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;inset-inline-start:0;top:-100px;z-index:200;
  background:var(--onyx);color:var(--ivory);padding:12px 20px;
  font-size:var(--t-11);letter-spacing:.2em;text-transform:uppercase;
}
.skip-link:focus{top:0}

/* ── asset placeholders (Section 5) ── */
.asset-ph{
  aspect-ratio:var(--ratio,4/5);background:var(--linen);border:1px solid var(--rule);
  display:grid;place-items:center;
}
.asset-ph span{
  /* --slate, not --mist: mist on linen is 4.45:1 and fails AA by a hair. */
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);
}
/* every image sits on paper with a 1px rule; no shadows, no radius */
.frame{background:var(--paper);border:1px solid var(--rule);overflow:hidden}

/* ── RTL / Arabic ── */
[dir=rtl] body,
:lang(ar){font-family:var(--f-ar)}
[dir=rtl]{letter-spacing:0}
[dir=rtl] .display,[dir=rtl] .eyebrow,[dir=rtl] .label,
[dir=rtl] .btn,[dir=rtl] .btn-2,[dir=rtl] .btn-3,[dir=rtl] .btn-wa,
[dir=rtl] .link-gold,[dir=rtl] .sec-head h2{
  letter-spacing:0;text-transform:none;
}
[dir=rtl] body,[dir=rtl] .lede,[dir=rtl] p{line-height:1.8}
[dir=rtl] .display,[dir=rtl] .head{font-family:var(--f-ar);font-weight:700;line-height:1.5}
/* prices and numerals stay Western digits + LTR in both locales */
.num,[dir=rtl] .num{direction:ltr;unicode-bidi:isolate}
/* mirror directional glyphs */
[dir=rtl] .flip{transform:scaleX(-1)}

/* ── motion preference ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* utility */
.hide{display:none !important}
.stack-8>*+*{margin-block-start:var(--s-8)}
.stack-16>*+*{margin-block-start:var(--s-16)}
.stack-24>*+*{margin-block-start:var(--s-24)}