/* DecoSign links — built on the DecoSign design system.
   Light (Paper) by day, Dark (Night) in dark mode. Square-cut, rules not boxes, magenta on
   one thing per view, IBM Plex Sans Arabic only. */
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(/assets/plex-arabic-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(/assets/plex-arabic-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(/assets/plex-arabic-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --magenta: #ce0f69; --magenta-deep: #a40755; --pink-glow: #ff5ca4;
  --bg: #f7f5f6; --surface: #ffffff; --sunken: #e9e6e8; --panel: #1d242c;
  --ink: #1d242c; --ink-muted: #565b60; --ink-subtle: #70757a;
  --line: #dedcdf; --line-strong: #9ca0a3;
  --accent-text: var(--magenta); --on-panel: #ffffff; --panel-accent: var(--pink-glow);
  --focus: #1d242c;
  --grid: #1d242c; --grid-a: .028;         /* drawing-sheet grid */
  --glow: 0;                                /* shadow-glow is for dark grounds only */
  --font: "IBM Plex Sans Arabic", "Avenir Next", "Century Gothic", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #11161c; --surface: #1d242c; --sunken: #252d35; --panel: #252d35;
    --ink: #ffffff; --ink-muted: #aeb3b7; --ink-subtle: #9e98a4;
    --line: #414a52; --line-strong: #70757a;
    --accent-text: var(--pink-glow); --focus: var(--pink-glow);
    --grid: #ffffff; --grid-a: .03;
    --glow: 1;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  /* the drawing sheet: a fine grid with a heavier line every fifth square */
  background:
    linear-gradient(color-mix(in srgb, var(--grid) calc(var(--grid-a) * 200%), transparent) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, color-mix(in srgb, var(--grid) calc(var(--grid-a) * 200%), transparent) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(color-mix(in srgb, var(--grid) calc(var(--grid-a) * 100%), transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--grid) calc(var(--grid-a) * 100%), transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
  background-attachment: fixed;
}
:lang(ar), [dir="rtl"] { line-height: 1.8; }
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---- press-sheet furniture */
.sheet { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sheet .crop { position: absolute; width: 26px; height: 26px; border: 0 solid var(--line-strong); }
.crop.tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.crop.tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.crop.bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.crop.br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
.sheet .reg { position: absolute; left: 50%; width: 18px; height: 18px; margin-left: -9px; border: 1px solid var(--line-strong); border-radius: 50%; }
.sheet .reg::before, .sheet .reg::after { content: ""; position: absolute; background: var(--line-strong); }
.sheet .reg::before { left: 50%; top: -6px; bottom: -6px; width: 1px; }
.sheet .reg::after { top: 50%; left: -6px; right: -6px; height: 1px; }
.reg.top { top: 18px; } .reg.bottom { bottom: 18px; }
.sheet .bar { position: absolute; left: 52px; bottom: 21px; display: flex; gap: 2px; }
.sheet .bar i { width: 11px; height: 11px; }
.bar .c { background: #00a0dc; } .bar .m { background: var(--magenta); } .bar .y { background: #ffe100; } .bar .k { background: #1d242c; }
.bar .k75 { background: #555b62; } .bar .k50 { background: #8e9297; } .bar .k25 { background: #c6c8cb; }
@media (prefers-color-scheme: dark) { .bar .k { background: #000; } }
@media (max-width: 640px) { .sheet .bar, .sheet .reg { display: none; } }

/* ---- layout */
.page {
  position: relative; z-index: 1; width: min(560px, 100%); margin: 0 auto;
  padding: max(64px, env(safe-area-inset-top)) 16px 56px;
  display: flex; flex-direction: column; align-items: stretch;
}

/* ---- hero: the avatar sits inside a registration mark */
.hero { text-align: center; animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.avatar { position: relative; width: 104px; height: 104px; margin: 0 auto 26px; }
.avatar::before { content: ""; position: absolute; inset: -10px; border: 1px solid var(--line-strong); border-radius: 50%; }
.avatar::after { /* the mark's crosshair ticks */
  content: ""; position: absolute; inset: -20px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 50% 0 / 1px 14px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 50% 100% / 1px 14px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 50% / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 100% 50% / 14px 1px no-repeat;
}
.avatar img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.eyebrow { margin: 0 0 8px; font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-text); }
.eyebrow:empty { display: none; }
h1 { margin: 0; font-size: 36px; line-height: 1.05; font-weight: 700; letter-spacing: -.8px; }
.line { margin: 12px 0 0; font-size: 18px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.line b { font-weight: inherit; color: var(--accent-text); }          /* the highlighted word */
.echo { margin: 4px 0 0; font-size: 16px; color: var(--ink-muted); }
.line:empty, .echo:empty { display: none; }

/* ---- socials: square-cut tiles */
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; animation: rise .7s .06s cubic-bezier(.2,.8,.2,1) both; }
.socials:empty { display: none; }
.social {
  width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  transition: background .2s, color .2s, border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.social svg { width: 20px; height: 20px; }
.social:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; transform: translateY(-2px); }

/* ---- request a quote: the page's primary action */
.quote-slot:empty { display: none; }
.quote {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px;
  min-height: 58px; padding: 12px 24px; background: var(--magenta); color: #fff; text-decoration: none;
  font-size: 17px; font-weight: 700; letter-spacing: -.1px;
  animation: rise .7s .1s cubic-bezier(.2,.8,.2,1) both; transition: background .2s;
  position: relative; overflow: hidden;
}
.quote svg { width: 22px; height: 22px; flex: none; }
.quote .arr2 { width: 18px; height: 18px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.quote:hover { background: var(--magenta-deep); }
.quote:hover .arr2 { transform: translate(3px, -3px); }
.quote:dir(rtl) .arr2 { transform: scaleX(-1); }
.quote:dir(rtl):hover .arr2 { transform: scaleX(-1) translate(3px, -3px); }
.quote::after { /* a sheen that passes once in a while, like light across acrylic */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, #ffffff33 50%, transparent 70%);
  animation: sheen 6s 2s ease-in-out infinite;
}
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---- links */
.links { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.links li { grid-column: 1 / -1; animation: rise .6s calc(.14s + var(--i, 0) * 50ms) cubic-bezier(.2,.8,.2,1) both; }
.links li.half { grid-column: auto; }
.link {
  --c: var(--magenta);
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px;
  min-height: 76px; padding: 14px 18px; color: var(--ink); text-decoration: none;
}
.link .bg { /* the panel */
  position: absolute; inset: 0; z-index: -1; background: var(--surface); border: 1px solid var(--line);
  transition: border-color .4s ease;
}
.link .bg::before { /* halftone under the pointer: fades in, glides (site.js) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 38%, transparent) 1.1px, transparent 1.6px) 0 0 / 7px 7px;
  -webkit-mask: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 70%);
  mask: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 70%);
  opacity: 0; transition: opacity .6s ease;
}
.link .bg::after { /* the 2px accent rule that draws itself under the card */
  content: ""; position: absolute; inset-inline: -1px; bottom: -1px; height: 2px; background: var(--c);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.link:dir(rtl) .bg::after { transform-origin: right; }
a.link:hover .bg::before { opacity: 1; transition-duration: .35s; }
a.link:hover .bg::after { transform: scaleX(1); }
a.link:hover .bg { border-color: var(--line-strong); }
a.link:active { transform: scale(.995); }
.ico {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  color: var(--ink); border: 1px solid var(--line-strong); transition: background .25s, color .25s, border-color .25s;
}
.ico svg { width: 20px; height: 20px; }
a.link:hover .ico { background: var(--c); border-color: var(--c); color: #fff; }
.txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.link:dir(ltr) .txt { text-align: left; }
.link:dir(rtl) .txt { text-align: right; }
.txt b { font-size: 16px; line-height: 1.4; font-weight: 600; }
.txt small { font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.txt small:empty { display: none; }
.arr { flex: none; width: 18px; height: 18px; color: var(--ink-subtle); transition: transform .3s cubic-bezier(.2,.8,.2,1), color .2s; }
.arr svg { width: 100%; height: 100%; }
.link:dir(rtl) .arr svg { transform: scaleX(-1); }
a.link:hover .arr { color: var(--accent-text); transform: translate(2px, -2px); }
a.link:dir(rtl):hover .arr { transform: translate(-2px, -2px); }

/* countdown chip */
.cd {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 2px 8px; border-radius: 4px; background: var(--sunken);
  font-size: 12px; line-height: 1.6; font-weight: 600; color: var(--ink);
}
.cd svg { width: 13px; height: 13px; color: var(--accent-text); flex: none; }
.cd-w { color: var(--ink-muted); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.cd:dir(rtl) .cd-w { letter-spacing: 0; font-size: 12px; text-transform: none; }
.cd-t { font-variant-numeric: tabular-nums; }
.cd.soon svg { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { opacity: .3; } }

/* teaser: not open yet, drawn with a die-cut line */
.link.soon-card { cursor: default; }
.link.soon-card .bg { border: 1.5px dashed var(--line-strong); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.link.soon-card .ico, .link.soon-card .txt b, .link.soon-card .txt small { opacity: .6; }
.link.dim { opacity: .45; }

/* highlighted link: a light running round the square edge, like an LED strip on a sign */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.link.hi .bg { border-color: color-mix(in srgb, var(--c) 35%, var(--line)); }
.link.hi .ico { background: var(--c); border-color: var(--c); color: #fff; }
.link.hi::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; padding: 2px; z-index: 1;
  background: conic-gradient(from var(--a),
    transparent 0deg, color-mix(in srgb, var(--c) 25%, transparent) 25deg, var(--c) 70deg,
    color-mix(in srgb, var(--c), #fff 55%) 82deg, var(--c) 94deg, color-mix(in srgb, var(--c) 25%, transparent) 140deg,
    transparent 170deg, transparent 180deg, color-mix(in srgb, var(--c) 25%, transparent) 205deg, var(--c) 250deg,
    color-mix(in srgb, var(--c), #fff 55%) 262deg, var(--c) 274deg, color-mix(in srgb, var(--c) 25%, transparent) 320deg, transparent 350deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 5s linear infinite;
}
.link.hi::after { /* the neon halo: dark grounds only (shadow-glow), per the design system */
  content: ""; position: absolute; inset: 8px; z-index: -2; pointer-events: none; background: var(--c);
  filter: blur(24px); opacity: calc(var(--glow) * .3); animation: breathe 3.6s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: calc(var(--glow) * .18); } to { opacity: calc(var(--glow) * .38); } }
@keyframes spin { to { --a: 360deg; } }

/* portfolio cards: a photo instead of an icon */
.link.photo { flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 0; }
.link.photo .ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sunken); }
.links li.wide .link.photo .ph { aspect-ratio: 16 / 9; }
.link.photo .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
a.link.photo:hover .ph img { transform: scale(1.05); }
.link.photo .cap { display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px; }
.link.photo .cap .txt b { font-size: 15px; }
.link.photo .ico { display: none; }

/* ---- contact panel: navy, with the diamond cut into its corner */
.contact-slot:empty { display: none; }
.panel {
  position: relative; overflow: hidden; margin-top: 32px; padding: 26px 24px 24px;
  background: var(--panel); color: var(--on-panel); animation: rise .6s .2s cubic-bezier(.2,.8,.2,1) both;
}
.panel::before { /* the diamond */
  content: ""; position: absolute; top: -17px; inset-inline-end: -17px; width: 34px; height: 34px;
  background: var(--magenta); transform: rotate(45deg);
}
.panel .eyebrow { color: var(--panel-accent); margin: 0 0 6px; padding-inline-end: 28px; overflow-wrap: anywhere; } /* clear of the diamond */
.panel .addr { margin: 0; min-width: 0; font-size: 18px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.panel .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.panel .act {
  flex: 1 1 160px; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 16px; color: var(--on-panel); text-decoration: none; font-size: 15px; font-weight: 600; text-align: center; overflow-wrap: anywhere;
  border: 1px solid #ffffff59; transition: background .2s, border-color .2s, color .2s;
}
.panel .act svg { width: 18px; height: 18px; flex: none; }
.panel .act:hover { background: #fff; color: #1d242c; border-color: #fff; }

/* ---- announcement banner: a sign fascia above everything */
.banner-slot:empty { display: none; }
.banner {
  --c: var(--magenta);
  display: flex; align-items: center; gap: 12px; margin: 0 0 28px; padding: 12px 16px;
  background: var(--c); color: #fff; text-decoration: none; animation: rise .6s cubic-bezier(.2,.8,.2,1) both;
}
.banner-dot { flex: none; width: 8px; height: 8px; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.banner-t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45; font-weight: 600; }
.banner-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; border-bottom: 2px solid #fff; padding-bottom: 1px; }
.banner-btn svg { width: 14px; height: 14px; }
.banner-btn:dir(rtl) svg { transform: scaleX(-1); }
a.banner:hover { filter: brightness(1.08); }

/* ---- footer */
.foot { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-subtle); }
.foot .lockup { width: 200px; height: auto; opacity: .9; }
.dark-only { display: none; }
@media (prefers-color-scheme: dark) { .light-only { display: none; } .dark-only { display: block; } }

.ghost { height: 76px; background: var(--surface); border: 1px solid var(--line); animation: fadepulse 1.2s ease-in-out infinite alternate !important; }
@keyframes fadepulse { from { opacity: .4; } to { opacity: .9; } }
.err { text-align: center; color: var(--ink-muted); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ---- the cursor: a registration mark, and a crop frame that snaps round what you point at */
.cur-mark, .cur-frame { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .3s; }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor .cur-mark { opacity: 1; }
.has-cursor.cur-out .cur-mark, .has-cursor.cur-out .cur-frame { opacity: 0 !important; }
.cur-mark { width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 1.5px solid var(--ink); border-radius: 50%; filter: drop-shadow(0 0 1px var(--bg)); }
.cur-mark::before, .cur-mark::after { content: ""; position: absolute; background: var(--ink); }
.cur-mark::before { left: 50%; top: -7px; bottom: -7px; width: 1.5px; margin-left: -.75px; }
.cur-mark::after { top: 50%; left: -7px; right: -7px; height: 1.5px; margin-top: -.75px; }
.cur-frame { --k: var(--magenta); width: 0; height: 0;
  background:
    linear-gradient(var(--k), var(--k)) 0 0 / 12px 1.5px, linear-gradient(var(--k), var(--k)) 0 0 / 1.5px 12px,
    linear-gradient(var(--k), var(--k)) 100% 0 / 12px 1.5px, linear-gradient(var(--k), var(--k)) 100% 0 / 1.5px 12px,
    linear-gradient(var(--k), var(--k)) 0 100% / 12px 1.5px, linear-gradient(var(--k), var(--k)) 0 100% / 1.5px 12px,
    linear-gradient(var(--k), var(--k)) 100% 100% / 12px 1.5px, linear-gradient(var(--k), var(--k)) 100% 100% / 1.5px 12px;
  background-repeat: no-repeat;
}
.has-cursor .cur-frame.on { opacity: 1; }
.has-cursor .cur-mark.small { transform: scale(.55); }
.cur-mark { transition: opacity .3s, transform .25s cubic-bezier(.2,.8,.2,1); }

.preview .hero, .preview .socials, .preview .quote, .preview .links li, .preview .panel, .preview .banner { animation: none; }

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