/* =====================================================================
   YMH LAW · coming-soon page (one viewport, no page scroll)
   Colours, fonts and glass values follow 02-brand/brand-tokens.json v1.3.0
   and brand-guide.md §6 (glass §6.9, motion §6.12). Square corners except
   glass. Two glass layers at most, never stacked.
   ===================================================================== */

:root {
  /* colour (tokens) */
  --navy: #124372;
  --navy-deep: #0B2A47;
  --gold: #B7A470;
  --gold-on-navy: #D4C8A9;     /* the only gold for small text on navy */
  --gold-light: #C5B68D;       /* decorative only */
  --white: #FFFFFF;
  --muted: #D0D9E3;            /* navy 20: secondary text on navy and glass */
  --hairline: rgba(255, 255, 255, 0.14);

  /* type */
  --font-ar-display: 'Markazi Text', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --font-ar-text: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-en-display: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-en-text: 'Proza Libre', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* glass (brand-guide §6.9.2) */
  --glass-fill: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.24);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.30);
  --glass-shadow: 0 24px 48px rgba(4, 16, 32, 0.35);
  --glass-filter: blur(24px) saturate(115%);

  /* motion (brand-guide §6.12) */
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-move: cubic-bezier(0.2, 0, 0, 1);
  --ease-glass: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* viewport unit: dynamic viewport height where supported */
  --vh: 1vh;

  /* layout */
  --gutter: 16px;
  --top-pad: 56px;
  --bottom-pad: 40px;
  --r: 24px;
  --stage-w: 920px;

  /* hero scale, all tied to the viewport so the page always fits */
  /* full logo (mark + YMH LAW FIRM): never under 160 CSS px high (brand-guide 6.4) */
  --logo-h: clamp(160px, min(calc(var(--vh) * 48 - 175px), 60vw), 250px);
  --ar-size: clamp(19px, min(calc(var(--vh) * 2.7), 5.5vw), 40px);
  --desc-size: clamp(14px, min(calc(var(--vh) * 2.0), 3.8vw), 24px);
  --gap-mark: clamp(10px, calc(var(--vh) * 1.9), 26px);
  --gap-brand: clamp(12px, calc(var(--vh) * 2.2), 46px);
  --gap-slab: clamp(12px, calc(var(--vh) * 2.2), 40px);
  --gap-row: clamp(10px, calc(var(--vh) * 1.6), 28px);
  --soon-ar: clamp(40px, calc(var(--vh) * 6), 60px);
  --soon-en: clamp(36px, calc(var(--vh) * 5.2), 54px);
  --line-size: 24px;
  --slab-pad: clamp(12px, calc(var(--vh) * 2.0), 22px);
}
@supports (height: 1dvh) { :root { --vh: 1dvh; } }

@media (min-width: 640px) {
  :root {
    --gutter: 28px;
    --r: 32px;
    --top-pad: 64px;
    --bottom-pad: 48px;
    --logo-h: clamp(170px, min(calc(var(--vh) * 31), 25vw), 360px);
    --gap-brand: clamp(14px, calc(var(--vh) * 3.0), 46px);
    --gap-slab: clamp(14px, calc(var(--vh) * 2.8), 40px);
    --gap-row: clamp(10px, calc(var(--vh) * 2.0), 28px);
    --ar-size: clamp(20px, min(calc(var(--vh) * 3.1), 4.2vw), 40px);
    --soon-ar: clamp(44px, min(calc(var(--vh) * 7.6), 7vw), 108px);
    --soon-en: clamp(40px, min(calc(var(--vh) * 6.6), 6vw), 96px);
    --line-size: clamp(24px, min(calc(var(--vh) * 2.9), 2.2vw), 32px);
    --slab-pad: clamp(16px, calc(var(--vh) * 3.2), 40px);
  }
}
@media (min-width: 1100px) { :root { --gutter: 40px; } }
@media (min-width: 1700px) { :root { --stage-w: 1060px; --slab-max: 960px; } }

/* ---------------------------------------------------------------------
   Base: the document never scrolls
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
@supports (height: 100dvh) { html, body { height: 100dvh; } }
html {
  background: var(--navy-deep);
  color: var(--white);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:lang(ar) { font-family: var(--font-ar-text); letter-spacing: 0; }
:lang(en) { font-family: var(--font-en-text); }

img { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
bdi { unicode-bidi: isolate; }
button { font: inherit; }

::selection { background: rgba(212, 200, 169, 0.35); color: var(--white); }
:focus-visible { outline: 2px solid var(--gold-on-navy); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--gold-on-navy); stroke-width: 1.6; stroke-linejoin: miter; stroke-linecap: butt; }

/* ---------------------------------------------------------------------
   Background layer
   --------------------------------------------------------------------- */
.backdrop {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: var(--navy-deep);
  pointer-events: none;
}
.backdrop__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.backdrop__fallback {
  position: absolute; inset: 0; display: none;
  background: radial-gradient(120% 90% at 85% 10%, var(--navy) 0%, var(--navy-deep) 100%);
}
[dir="ltr"] .backdrop__fallback { background: radial-gradient(120% 90% at 15% 10%, var(--navy) 0%, var(--navy-deep) 100%); }
.backdrop__fallback::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/pattern.svg#navy");
  background-size: clamp(96px, 9.5vw, 180px) clamp(96px, 9.5vw, 180px);
  background-position: left bottom;
  -webkit-mask-image: radial-gradient(circle farthest-corner at 0% 100%, #000 0%, rgba(0,0,0,.92) 8%, rgba(0,0,0,.6) 17%, rgba(0,0,0,.3) 27%, rgba(0,0,0,.1) 37%, transparent 45%);
  mask-image: radial-gradient(circle farthest-corner at 0% 100%, #000 0%, rgba(0,0,0,.92) 8%, rgba(0,0,0,.6) 17%, rgba(0,0,0,.3) 27%, rgba(0,0,0,.1) 37%, transparent 45%);
}
[dir="ltr"] .backdrop__fallback::after {
  background-position: right bottom;
  -webkit-mask-image: radial-gradient(circle farthest-corner at 100% 100%, #000 0%, rgba(0,0,0,.92) 8%, rgba(0,0,0,.6) 17%, rgba(0,0,0,.3) 27%, rgba(0,0,0,.1) 37%, transparent 45%);
  mask-image: radial-gradient(circle farthest-corner at 100% 100%, #000 0%, rgba(0,0,0,.92) 8%, rgba(0,0,0,.6) 17%, rgba(0,0,0,.3) 27%, rgba(0,0,0,.1) 37%, transparent 45%);
}
.no-webgl .backdrop__fallback { display: block; }
.no-webgl .backdrop__canvas { display: none; }

/* watermark: white 5% (brand-tokens watermark.navy), bleeding off the bottom edge only */
.watermark {
  position: absolute; bottom: -34vh; right: 4vw; left: auto;
  height: 92vh; width: auto; max-width: none;
  opacity: 0.05;
  transition: opacity 0.3s var(--ease-move);
  will-change: transform;
}
[dir="ltr"] .watermark { right: auto; left: 4vw; }
@media (max-width: 639px) {
  .watermark { height: 54vh; bottom: -20vh; right: 2vw; }
  [dir="ltr"] .watermark { left: 2vw; }
}
.is-swapping .watermark { opacity: 0; transition-duration: 0.16s; }

/* ---------------------------------------------------------------------
   Corner (language) and footer
   --------------------------------------------------------------------- */
.corner {
  position: fixed; z-index: 20;
  top: max(14px, env(safe-area-inset-top));
  inset-inline-start: var(--gutter);
}
.lang-toggle {
  appearance: none; background: rgba(11, 42, 71, 0.25); color: var(--white); cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 0;
  min-height: 40px; min-width: 44px; padding: 6px 15px; font-size: 14px; line-height: 1.2;
  transition: border-color 0.2s var(--ease-move), background-color 0.2s var(--ease-move);
}
.lang-toggle__label:lang(en) { font-family: var(--font-en-text); letter-spacing: 0.06em; }
.lang-toggle__label:lang(ar) { font-family: var(--font-ar-text); font-size: 15px; font-weight: 500; }
.lang-toggle:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.05); }

.foot {
  position: fixed; z-index: 2; inset-inline: 0;
  bottom: max(12px, env(safe-area-inset-bottom));
  text-align: center; pointer-events: none;
}
.foot__copy { color: var(--muted); font-family: var(--font-en-text); font-size: 12px; letter-spacing: 0.06em; line-height: 1.4; opacity: 0.85; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.stage { position: fixed; inset: 0; z-index: 1; }
.hero {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--top-pad) var(--gutter) var(--bottom-pad);
}
.hero__inner {
  width: 100%; max-width: var(--stage-w);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  will-change: transform;
}
.hero__inner > .brand, .hero__inner > .actions, .hero__inner > .contact-row, .slab > * { opacity: var(--hero-o, 1); }
.hero.is-away { visibility: hidden; }

/* brand block: the mark, then the typeset name */
.brand { margin: 0; font-weight: 400; display: flex; flex-direction: column; align-items: center; line-height: 1; }
/* clear space below the logo: 1X = 0.2 x mark height = 0.156 x logo height (brand-guide 6.3) */
.brand__logo { display: block; height: var(--logo-h); width: auto; max-width: none; margin-bottom: calc(var(--logo-h) * 0.16); }
.brand__text { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.brand__rule {
  display: block; width: calc(var(--logo-h) * 1.15); max-width: 100%; height: 1px;
  margin: 0 0 clamp(8px, calc(var(--vh) * 1.5), 16px);
  background: linear-gradient(to right, rgba(183, 164, 112, 0), var(--gold) 14%, var(--gold) 86%, rgba(183, 164, 112, 0));
  transform-origin: 50% 50%;
}
.brand__ar {
  display: block;
  font-family: var(--font-ar-display); font-weight: 500;
  font-size: var(--ar-size); line-height: 1.38;
  color: var(--white);
  text-wrap: balance;
}
.brand__descriptor {
  display: none;
  margin-top: 0.35em;
  font-family: var(--font-en-display); font-style: italic; font-weight: 400;
  font-size: var(--desc-size); line-height: 1.3; color: var(--muted);
}
html[lang="en"] .brand__descriptor { display: block; }

/* ---- the glass slab ------------------------------------------------- */
.slab {
  position: relative; margin-top: var(--gap-brand);
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 0 auto;
  grid-template-areas: "head" "spine" "body";
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (min-width: 640px) {
  .slab {
    max-width: var(--slab-max, 880px);
    grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "head spine body";
  }
}
.slab__shadow, .pane, .slab__rim { pointer-events: none; }
.slab__shadow { grid-area: 1 / 1 / -1 / -1; border-radius: var(--r); box-shadow: var(--glass-shadow); }

.pane {
  position: relative; z-index: 0; display: block;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
/* intro panes; phones: top and bottom */
.pane--a { grid-area: head; border-block-end: 0; border-radius: var(--r) var(--r) 0 0; }
.pane--b { grid-area: body; border-block-start: 0; border-radius: 0 0 var(--r) var(--r); box-shadow: none; }
@media (min-width: 640px) {
  .pane--a {
    border-block-end: 1px solid var(--glass-border); border-inline-end: 0; border-radius: 0;
    border-start-start-radius: var(--r); border-end-start-radius: var(--r);
  }
  .pane--b {
    border-block-start: 1px solid var(--glass-border); border-inline-start: 0; border-radius: 0;
    border-start-end-radius: var(--r); border-end-end-radius: var(--r);
    box-shadow: var(--glass-inset);
  }
}
/* the single pane that holds the view once the intro is over */
.pane--p { grid-area: 1 / 1 / -1 / -1; border-radius: var(--r); overflow: hidden; }
html.js .pane--a, html.js .pane--b { visibility: hidden; }
html.intro .pane--a, html.intro .pane--b { visibility: visible; }
html.intro .pane--p { visibility: hidden; }

.pane__sweep {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.035) 32%, rgba(255, 255, 255, 0.075) 46%,
    rgba(226, 219, 198, 0.12) 50%, rgba(255, 255, 255, 0.075) 54%, rgba(255, 255, 255, 0.035) 68%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0; transform: translate3d(-110%, 0, 0);
  will-change: transform, opacity;
}
.pane__glare {
  position: absolute; inset: 0;
  background: radial-gradient(520px circle at var(--gx, 70%) var(--gy, 0%),
    rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0) 70%);
  opacity: var(--go, 0);
}
.slab__rim {
  grid-area: 1 / 1 / -1 / -1; z-index: 1; border-radius: var(--r); padding: 1px;
  background: radial-gradient(380px circle at var(--gx, 70%) var(--gy, 0%),
    rgba(226, 219, 198, 0.80) 0%, rgba(255, 255, 255, 0.22) 34%, rgba(255, 255, 255, 0) 66%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.slab__rim { opacity: calc(var(--go, 0) * var(--hero-o, 1)); }

.slab__head, .slab__body { position: relative; z-index: 2; min-width: 0; container-type: inline-size; padding: var(--slab-pad) 22px; }
.slab__head { grid-area: head; padding-bottom: calc(var(--slab-pad) * 0.8); }
.slab__body { grid-area: body; padding-top: calc(var(--slab-pad) * 0.8); display: flex; align-items: center; justify-content: center; }
@media (min-width: 640px) {
  /* text faces the spine, like the two pages of an open book */
  .slab__head { padding: var(--slab-pad) clamp(24px, 3.4vw, 52px); }
  .slab__body { padding: var(--slab-pad) clamp(24px, 3.4vw, 52px); }
  [dir="rtl"] .slab__head { text-align: left; }
  [dir="rtl"] .slab__body { text-align: right; justify-content: flex-end; }
  [dir="ltr"] .slab__head { text-align: right; }
  [dir="ltr"] .slab__body { text-align: left; justify-content: flex-start; }
}

/* the gold rule where the two panes meet */
.spine { grid-area: spine; position: relative; z-index: 3; display: block; pointer-events: none; transition: opacity 0.3s var(--ease-move); }
.spine__line {
  position: absolute; display: block; inset-inline: 22px; top: -0.5px; height: 1px;
  background: linear-gradient(to right, rgba(183, 164, 112, 0), var(--gold) 18%, var(--gold) 82%, rgba(183, 164, 112, 0));
}
[dir="rtl"] .spine__line { transform-origin: 100% 50%; }
[dir="ltr"] .spine__line { transform-origin: 0% 50%; }
.spine__line::after {
  content: ""; position: absolute; inset: -1px 0;
  background: radial-gradient(60px 3px at var(--sp, 50%) 50%, rgba(241, 237, 226, 0.95), rgba(241, 237, 226, 0) 100%);
  opacity: var(--go, 0);
}
.spine__tip {
  position: absolute; top: -3.5px; width: 7px; height: 7px; margin-inline-start: -3.5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 235, 0.95) 0%, rgba(212, 200, 169, 0.55) 45%, rgba(212, 200, 169, 0) 72%);
  opacity: 0; inset-inline-start: 22px;
}
@media (min-width: 640px) {
  .spine__line {
    inset-inline: auto; inset-inline-start: -0.5px;
    top: clamp(16px, calc(var(--vh) * 2.6), 30px); bottom: clamp(16px, calc(var(--vh) * 2.6), 30px);
    width: 1px; height: auto;
    background: linear-gradient(to bottom, rgba(183, 164, 112, 0), var(--gold) 16%, var(--gold) 84%, rgba(183, 164, 112, 0));
  }
  [dir] .spine__line { transform-origin: 50% 50%; }
  .spine__line::after { inset: 0 -1px; background: radial-gradient(3px 70px at 50% var(--sp, 50%), rgba(241, 237, 226, 0.95), rgba(241, 237, 226, 0) 100%); }
  .spine__tip { inset-inline-start: 0; top: 50%; margin-top: -3.5px; }
}
.is-swapping .spine { opacity: 0; transition-duration: 0.16s; }

/* hero type on glass: white and navy 20 only, 24 px or larger */
.soon { color: var(--white); }
.soon:lang(ar) { font-family: var(--font-ar-display); font-weight: 700; font-size: min(var(--soon-ar), 34cqi); line-height: 1.12; }
.soon:lang(en) { font-family: var(--font-en-display); font-weight: 500; font-size: min(var(--soon-en), 17.5cqi); white-space: nowrap; line-height: 1.04; letter-spacing: -0.005em; }
.soon-kicker { color: var(--muted); margin-top: 4px; }
.soon-kicker:lang(en) { font-family: var(--font-en-display); font-style: italic; font-weight: 400; font-size: clamp(24px, calc(var(--vh) * 2.8), 30px); line-height: 1.2; }
.soon-kicker:lang(ar) { font-family: var(--font-ar-display); font-weight: 500; font-size: clamp(26px, calc(var(--vh) * 3.2), 36px); line-height: 1.25; }
.soon-line { color: var(--white); max-width: 15em; text-wrap: balance; }
.soon-line:lang(ar) { font-family: var(--font-ar-text); font-weight: 400; font-size: var(--line-size); line-height: 1.55; }
.soon-line:lang(en) { font-family: var(--font-en-text); font-weight: 400; font-size: var(--line-size); line-height: 1.4; }

/* ---- actions and contact row ---------------------------------------- */
.actions { margin-top: var(--gap-slab); }
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 30px; margin: 0;
  border: 0; border-radius: 0; cursor: pointer;
  font-size: 16px; font-weight: 600; line-height: 1.2;
  transition: background-color 0.2s var(--ease-move), color 0.2s var(--ease-move), border-color 0.2s var(--ease-move);
}
html[lang="en"] .btn { font-size: 15px; letter-spacing: 0.02em; }
.btn--primary { background: var(--gold); color: var(--navy-deep); }
.btn--primary:hover { background: var(--gold-light); }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.btn--ghost { background: transparent; color: var(--white); border: 1px solid rgba(212, 200, 169, 0.7); }
.btn--ghost:hover { background: rgba(212, 200, 169, 0.1); }
.actions .btn { min-height: clamp(46px, calc(var(--vh) * 6), 56px); padding: 0 clamp(26px, 3vw, 40px); }

.contact-row {
  list-style: none; margin: var(--gap-row) 0 0; padding: 0;
  display: grid; grid-template-columns: auto auto; justify-content: center; gap: 6px 22px;
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.contact-row__item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.contact-row__link { color: var(--white); text-decoration: none; border-bottom: 1px solid transparent; padding: 3px 0; transition: border-color 0.2s var(--ease-move); }
.contact-row__link:hover { border-color: var(--gold-on-navy); }
.contact-row__text { color: var(--muted); padding: 3px 0; }
@media (min-width: 760px) {
  .contact-row { display: flex; flex-wrap: wrap; gap: 8px 0; font-size: 14.5px; }
  .contact-row__item { padding: 0 18px; }
  .contact-row__item + .contact-row__item { border-inline-start: 1px solid rgba(255, 255, 255, 0.2); }
}

/* intro start state (JS poses every frame; boot.js adds .intro) */
html.intro .brand__logo, html.intro .brand__rule, html.intro .brand__ar, html.intro .brand__descriptor,
html.intro .soon, html.intro .soon-kicker, html.intro .soon-line, html.intro .actions, html.intro .contact-row,
html.intro .corner, html.intro .foot, html.intro .pane, html.intro .slab__shadow, html.intro .spine__line { opacity: 0; }

/* ---------------------------------------------------------------------
   Contact sheet (dialog). Navy-tinted glass so small form text keeps its
   contrast; inputs are solid, so there is no glass on glass.
   --------------------------------------------------------------------- */
.sheet {
  position: fixed; z-index: 30; inset: 0;
  display: flex; flex-direction: column;
  --cy: 0%;
  transform: translate3d(var(--sx, 0px), calc(var(--cy) + var(--sy, 0px)), 0);
  will-change: transform;
}
.sheet[hidden] { display: none; }
/* tablets and short screens: a centred card that fits its content */
@media (min-width: 640px) {
  .sheet { inset: 50% 0 auto 0; --cy: -50%; width: min(600px, calc(100% - 48px)); max-height: calc(100% - 48px); margin-inline: auto; border-radius: 24px; }
}
/* desktop: a card beside the hero, on the end side */
@media (min-width: 1100px) and (min-height: 600px) {
  .sheet { inset: 50% auto auto auto; inset-inline-end: 16px; width: clamp(400px, 33vw, 500px); max-height: calc(100% - 32px); margin: 0; }
}
.sheet__glass {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(11, 42, 71, 0.80) 0%, rgba(11, 42, 71, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  opacity: var(--sheet-o, 1);
}
.sheet__glass::before {   /* the thin gold rule at the top of the sheet */
  content: ""; position: absolute; top: -1px; inset-inline-start: 28px; width: 64px; height: 2px; background: var(--gold);
}
.sheet__scroll {
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: max(18px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  container: sheet / inline-size;
  opacity: var(--sheet-o, 1);
  scrollbar-width: thin; scrollbar-color: rgba(212, 200, 169, 0.45) transparent;
}
@media (min-width: 640px) { .sheet__scroll { padding: 22px 28px 22px; } }

.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.sheet__title { margin: 0; color: var(--white); font-weight: 600; }
.sheet__title:lang(ar) { font-family: var(--font-ar-display); font-size: 30px; line-height: 1.25; }
.sheet__title:lang(en) { font-family: var(--font-en-display); font-weight: 500; font-size: 28px; line-height: 1.15; }
.sheet__close {
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 0; color: var(--white); cursor: pointer;
  transition: border-color 0.2s var(--ease-move), background-color 0.2s var(--ease-move);
}
.sheet__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: butt; }
.sheet__close:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.05); }
.sheet__address { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 10px; }
.sheet__address .icon { margin-top: 3px; }

/* ---- form ---- */
.form__alert {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 10px; padding: 8px 12px;
  border: 1px solid rgba(212, 200, 169, 0.6); background: rgba(212, 200, 169, 0.07);
  color: var(--white); font-size: 14px; line-height: 1.55;
}
.form__alert[hidden] { display: none; }
.form__alert::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.6em; background: var(--gold-on-navy); transform: rotate(45deg); }
.form__alert a { color: var(--white); text-decoration-color: var(--gold-on-navy); text-underline-offset: 3px; }

.form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px 14px; }
@container sheet (min-width: 330px) {
  .form__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field--full, .field[data-field="name"], .field[data-field="email"] { grid-column: 1 / -1; }
}
@container sheet (min-width: 380px) {
  .field[data-field="name"], .field[data-field="email"] { grid-column: auto; }
}
.field { min-width: 0; }
.field__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 5px; color: var(--white); font-size: 14px; font-weight: 500; line-height: 1.4;
}
.field__tag { color: var(--muted); font-size: 12px; font-weight: 400; }
html[lang="en"] .field__label { font-size: 13.5px; }
html[lang="en"] .field__tag { font-size: 11.5px; letter-spacing: 0.03em; }

.input {
  display: block; width: 100%; min-height: 44px; margin: 0;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(208, 217, 227, 0.5);
  border-radius: 0;
  color: var(--white);
  font: inherit; font-size: 16px; line-height: 1.45;      /* 16 px: no zoom on iOS */
  caret-color: var(--gold-on-navy);
  transition: border-color 0.2s var(--ease-move), background-color 0.2s var(--ease-move), box-shadow 0.2s var(--ease-move);
  -webkit-appearance: none; appearance: none;
}
.input--ltr { text-align: left; }
[dir="rtl"] .input--ltr { text-align: right; }
.input--area { min-height: 84px; height: clamp(84px, calc(var(--vh) * 12.5), 140px); resize: none; }
.input:hover { border-color: rgba(208, 217, 227, 0.72); }
.input:focus { outline: none; }
.input:focus-visible { outline: 2px solid var(--gold-on-navy); outline-offset: 2px; border-color: var(--gold-on-navy); background: rgba(255, 255, 255, 0.07); }
.field.is-invalid .input { border-color: var(--gold-on-navy); box-shadow: inset 3px 0 0 var(--gold-on-navy); }
[dir="rtl"] .field.is-invalid .input { box-shadow: inset -3px 0 0 var(--gold-on-navy); }
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white); -webkit-box-shadow: 0 0 0 1000px #143a5f inset; transition: background-color 9999s;
}

.field__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 5px; }
.field__hint { color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.field__count { flex: none; color: var(--muted); font-size: 12px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.field__count.is-near { color: var(--gold-on-navy); }
.field__error { display: flex; gap: 8px; align-items: flex-start; margin: 3px 0 0; color: var(--gold-on-navy); font-size: 13px; line-height: 1.5; }
.field__error[hidden] { display: none; }
.field__error::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.6em; background: var(--gold-on-navy); transform: rotate(45deg); }

/* privacy: one short line, details on demand */
.privacy-note { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.privacy-note__lead { color: var(--muted); font-size: 13px; line-height: 1.6; }
.privacy-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 4px; padding: 2px 0; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid rgba(212, 200, 169, 0.55); border-radius: 0;
  color: var(--white); font-size: 13px; font-weight: 500; line-height: 1.5;
}
.privacy-toggle:hover { border-color: var(--gold-on-navy); }
.privacy-toggle__chev { width: 10px; height: 10px; fill: none; stroke: var(--gold-on-navy); stroke-width: 1.6; transition: transform 0.2s var(--ease-move); }
.privacy-toggle[aria-expanded="true"] .privacy-toggle__chev { transform: rotate(180deg); }
.privacy-details { padding: 8px 0 0; }
.privacy-details[hidden] { display: none; }
.privacy-details p { color: var(--muted); font-size: 12.5px; line-height: 1.65; margin-bottom: 6px; }
.privacy-details a { color: var(--white); text-decoration-color: var(--gold-on-navy); text-underline-offset: 3px; }

.field--consent { margin-top: 9px; }
.consent { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 13.5px; line-height: 1.6; color: var(--white); }
.consent__input { position: absolute; inset-inline-start: 0; top: 0; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.consent__box {
  position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 1px solid rgba(208, 217, 227, 0.62); background: rgba(255, 255, 255, 0.05);
  transition: background-color 0.18s var(--ease-move), border-color 0.18s var(--ease-move);
}
.consent__box::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--navy-deep); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0.6); opacity: 0;
  transition: opacity 0.15s var(--ease-move), transform 0.2s var(--ease-enter);
}
.consent__input:checked + .consent__box { background: var(--gold-on-navy); border-color: var(--gold-on-navy); }
.consent__input:checked + .consent__box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.consent__input:focus-visible + .consent__box { outline: 2px solid var(--gold-on-navy); outline-offset: 3px; }
.consent:hover .consent__box { border-color: var(--gold-on-navy); }
.field.is-invalid .consent__box { border-color: var(--gold-on-navy); border-width: 2px; }
.consent__text a { color: var(--white); text-decoration-color: var(--gold-on-navy); text-underline-offset: 3px; }

.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.turnstile { margin-top: 0; min-height: 0; }
.turnstile.is-visible { margin-top: 12px; min-height: 65px; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 13px; }
.form__actions .btn { min-height: 48px; }
.form__noscript { margin-top: 12px; color: var(--muted); font-size: 13px; }
.btn[aria-busy="true"] { cursor: progress; }
.btn__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(11, 42, 71, 0) 0%, rgba(11, 42, 71, 0.85) 50%, rgba(11, 42, 71, 0) 100%);
  background-size: 40% 100%; background-repeat: no-repeat;
}
.btn[aria-busy="true"] .btn__progress { opacity: 1; animation: ymh-progress 1.3s var(--ease-move) infinite; }
@keyframes ymh-progress { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* success replaces the form inside the sheet */
.form.is-hidden { display: none; }
.success { padding: 10px 0 4px; }
.success[hidden] { display: none; }
.success:focus { outline: none; }
.success__icon { display: block; width: 52px; height: 52px; margin: 8px 0 20px; fill: none; stroke-linejoin: miter; stroke-linecap: butt; }
.success__ring { stroke: var(--gold); stroke-width: 1.5; }
.success__tick { stroke: var(--gold-on-navy); stroke-width: 2.2; stroke-dasharray: 30; stroke-dashoffset: 30; }
.success.is-shown .success__tick { stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s 0.15s var(--ease-enter); }
.success__title { margin: 0 0 12px; color: var(--white); font-weight: 600; }
.success__title:lang(ar) { font-family: var(--font-ar-display); font-size: 30px; line-height: 1.3; }
.success__title:lang(en) { font-family: var(--font-en-display); font-weight: 500; font-size: 28px; line-height: 1.2; }
.success__body { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin-bottom: 24px; max-width: 30em; }
.success__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* language swap: text fades out, flips, fades in */
[data-i18n], [data-i18n-html], .brand__descriptor { transition: opacity 0.28s var(--ease-move); }
.is-swapping [data-i18n], .is-swapping [data-i18n-html], .is-swapping .brand__descriptor { opacity: 0; transition-duration: 0.16s; }
html.intro [data-i18n], html.intro [data-i18n-html], html.intro .brand__descriptor, html.intro .spine { transition: none !important; }
.i18n-pending .stage, .i18n-pending .corner, .i18n-pending .foot { visibility: hidden; }

/* QA: Open Graph render */
.qa-og .corner, .qa-og .foot, .qa-og .actions, .qa-og .contact-row { display: none; }
.qa-og { --logo-h: 214px; --ar-size: 29px; --soon-ar: 66px; --line-size: 27px; --gap-brand: 28px; --slab-pad: 26px; --top-pad: 30px; --bottom-pad: 30px; }

/* short landscape screens (phones on their side): two columns */
@media (max-height: 540px) and (min-width: 620px) {
  :root {
    --logo-h: clamp(150px, calc(var(--vh) * 44), 230px);
    --ar-size: clamp(15px, calc(var(--vh) * 4), 24px);
    --soon-ar: clamp(34px, calc(var(--vh) * 10), 60px);
    --soon-en: clamp(30px, calc(var(--vh) * 9), 54px);
    --line-size: 24px; --slab-pad: 12px; --top-pad: 56px; --bottom-pad: 36px;
    --gap-brand: 0px;
  }
  .hero__inner {
    max-width: 1100px;
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto auto auto;
    column-gap: clamp(20px, 4vw, 56px); align-items: center; justify-items: center;
  }
  .brand { grid-column: 1; grid-row: 1 / span 3; }
  .slab { grid-column: 2; grid-row: 1; margin-top: 0; max-width: none; }
  .actions { grid-column: 2; grid-row: 2; margin-top: 12px; }
  .contact-row { grid-column: 2; grid-row: 3; margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 13px; }
  .contact-row__item { padding: 0; border: 0 !important; }
  .brand__descriptor { font-size: 14px; }
}

/* ---------------------------------------------------------------------
   Reduced motion: no intro, no ambient motion (scripts also honour it)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .btn[aria-busy="true"] .btn__progress { animation: none; background-position: 50% 0; }
}

@media (forced-colors: active) {
  .pane, .sheet__glass, .input, .lang-toggle, .sheet__close { border-color: CanvasText; }
  .spine__line, .brand__rule { background: CanvasText; }
}

/* very short phones (e.g. 375 x 667): «قريبًا» and its kicker share one line */
@media (max-width: 639px) and (max-height: 700px) {
  :root { --logo-h: 160px; }
  .slab__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 12px; }
  .soon-kicker { margin-top: 0; }
}