@charset "UTF-8";
/* ==========================================================================
   برمجي — Components
   Depends on type.css for every family, size, weight, leading and tracking.
   No font-size, line-height or letter-spacing literal may appear below —
   they all come from the ladder in type.css.
   Identity: strictly monochrome. No hue anywhere.
   ========================================================================== */

:root {
  /* Ink ramp */
  --ink:        #000000;
  --ink-2:      #16181A;
  --ink-3:      #313436;
  --muted:      #4D4F50;
  --muted-2:    #767A7B;

  /* Paper ramp */
  --surface:    #FFFFFF;
  --surface-2:  #F7F8F8;
  --surface-3:  #F1F2F3;
  --line:       #E4E6E7;
  --line-strong:#C4C8CA;

  /* On black */
  --on-dark:        #FFFFFF;
  --on-dark-muted:  #B0B4B6;
  --on-dark-faint:  #8B8F91;
  --on-dark-line:   rgba(255,255,255,.14);
  --on-dark-line-2: rgba(255,255,255,.30);
  --on-dark-panel:  #0D0F10;

  --shell: 1240px;
  --gut: clamp(1rem, 4vw, 2.5rem);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.brmgi {
  margin: 0;
  color: var(--ink-2);
  background: var(--surface);
  overflow-x: clip;
}
.brmgi img { max-width: 100%; height: auto; display: block; }
.bx h1, .bx h2, .bx h3, .bx h4, .bx-footer h2, .bx-footer h3 { color: var(--ink); }
.brmgi a { color: inherit; text-decoration: none; }
.brmgi ul { margin: 0; padding: 0; list-style: none; }
.brmgi svg { flex: none; }
.brmgi :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.section--dark :focus-visible, .hero :focus-visible { outline-color: #fff; }

/* ---------- Layout ---------- */
.shell { width: min(100% - (var(--gut) * 2), var(--shell)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--dark { background: var(--ink); color: #E8EAEB; }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--wash { background: var(--surface-2); }

/* ---------- Section heading ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  color: var(--ink);
  margin-bottom: .875rem;
  /* No letter-spacing and no text-transform: both are wrong for Arabic. */
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: currentColor; flex: none; }
.section--dark .eyebrow, .hero .eyebrow, .band .eyebrow { color: #fff; }

.s-head { max-width: var(--measure); margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.s-head p { margin-top: .875rem; color: var(--muted); font-size: var(--fs-lg); }
.section--dark .s-head p { color: var(--on-dark-muted); }
.s-head--center { margin-inline: auto; text-align: center; }
.s-head--center .eyebrow { justify-content: center; }
.s-head--center p { margin-inline: auto; }

/* ---------- Buttons ----------
   Scoped with .brmgi so these colours beat `.brmgi a { color: inherit }`.
   Without the extra class the primary CTAs render white-on-white. */
.brmgi .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  padding: .875rem 1.625rem; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.brmgi .btn svg { width: 1.15em; height: 1.15em; }
.brmgi .btn:hover { transform: translateY(-2px); }
.brmgi .btn--sm { padding: .625rem 1.1rem; font-size: var(--fs-2xs); }

/* on light backgrounds */
.brmgi .btn--ink { background: var(--ink); color: #fff; box-shadow: 0 8px 24px -14px rgba(0,0,0,.85); }
.brmgi .btn--ink:hover { background: var(--ink-3); color: #fff; box-shadow: 0 14px 30px -14px rgba(0,0,0,.9); }
.brmgi .btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.brmgi .btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* on dark backgrounds */
.brmgi .btn--light { background: #fff; color: var(--ink); }
.brmgi .btn--light:hover { background: var(--surface-3); color: var(--ink); }
.brmgi .btn--on-dark { border-color: var(--on-dark-line-2); color: #fff; background: transparent; }
.brmgi .btn--on-dark:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- Header ---------- */
.bx-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bx-header.is-stuck { box-shadow: 0 10px 30px -24px rgba(0,0,0,.6); border-color: var(--line-strong); }
.bx-header__bar { display: flex; align-items: center; gap: 1.25rem; min-height: 74px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: auto; height: 46px; object-fit: contain; }
.brand__text { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); }

.nav { display: flex; align-items: center; margin-inline-start: auto; }
/* Never wrap: six long Arabic labels on two lines double the header height.
   The bar collapses to the burger instead — see the breakpoint below. */
.nav__list { display: flex; align-items: center; gap: .25rem; flex-wrap: nowrap; }
.nav a {
  position: relative; display: block; padding: .55rem .8rem; border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);  /* one weight only — a weight swap on the
                                       active item would re-flow the whole bar */
  line-height: var(--lh-ui);
  color: var(--muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--surface-3); }
.nav .current-menu-item > a,
.nav .current_page_item > a { color: var(--ink); }
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after {
  content: ""; position: absolute; inset-inline: .8rem; bottom: .2rem;
  height: 2px; background: var(--ink); border-radius: 2px;
}
.header__cta { flex: none; display: inline-flex; gap: .5rem; }

.burger {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: #fff; border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink); flex: none; margin-inline-start: auto;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.burger:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.burger svg { width: 22px; height: 22px; }

/* Mobile drawer
   Visibility and resting position are driven by classes, never by an animation
   finishing. A keyframe animation that is throttled (hidden tab, paused
   compositor) or unsupported would strand the panel off-screen and make the
   menu unreachable; with a transition the worst case is that it snaps open. */
.drawer { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.drawer.is-visible { display: block; }
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(88vw, 360px); background: #fff; padding: 1.25rem;
  display: flex; flex-direction: column; gap: .35rem;
  overflow-y: auto;
  transform: translateX(var(--slide, 100%));
  opacity: .4;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.drawer.is-open .drawer__panel { transform: none; opacity: 1; }
[dir="rtl"] .drawer__panel { --slide: -100%; }
@media (prefers-reduced-motion: reduce) {
  .drawer__panel { transition: none; }
}
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.drawer__close {
  width: 42px; height: 42px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--r-sm); cursor: pointer; display: grid; place-items: center;
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.drawer__close:hover { background: var(--ink); color: #fff; }
.drawer__close svg { width: 20px; height: 20px; }
.drawer__list { display: flex; flex-direction: column; }
.drawer__list a {
  display: block; padding: .8rem .65rem; border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  border-bottom: 1px solid var(--line); color: var(--ink-2);
}
.drawer__list a:hover { background: var(--surface-3); }
.drawer__list .current-menu-item > a,
.drawer__list .current_page_item > a { color: var(--ink); }
.drawer .btn { margin-top: 1rem; }

/* The six menu labels plus the logo and the CTA need ~1000px of bar. Below that
   the row cannot fit on one line, so hand over to the drawer while there is
   still room to spare rather than at the exact point it breaks. */
@media (max-width: 1180px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; background: var(--ink); color: #fff; overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(0rem, 2vw, 1rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 70% 10%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 25%, transparent 75%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.13), transparent 62%);
  top: -280px; inset-inline-start: -200px; filter: blur(24px); pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.15fr .85fr; } }

.hero__tag {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .9rem; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid var(--on-dark-line);
  font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: var(--lh-ui);
  color: #D2D6D8;
}
.hero__tag .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.hero h1 { margin-top: 1.25rem; color: #fff; }
/* Underline the key word without clipping Arabic descenders. */
.hero h1 .mark { position: relative; white-space: nowrap; }
.hero h1 .mark::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -.06em;
  height: .07em; background: #fff; border-radius: 2px;
}
.hero__lead { margin-top: 1.35rem; max-width: var(--measure-tight); color: var(--on-dark-muted); font-size: var(--fs-lg); }
.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* Hero code panel */
.codecard {
  border: 1px solid var(--on-dark-line); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  overflow: hidden; box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
}
.codecard__bar { display: flex; align-items: center; gap: .45rem; padding: .8rem 1rem; border-bottom: 1px solid var(--on-dark-line); }
.codecard__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.22); }
.codecard__bar i:first-child { background: #fff; }
.codecard__bar span {
  margin-inline-start: auto; font-family: var(--font-mono);
  font-size: var(--fs-3xs); color: var(--on-dark-muted); unicode-bidi: isolate;
}
.codecard__body {
  padding: 1.1rem 1.25rem 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  line-height: var(--lh-code);
  direction: ltr; text-align: left; unicode-bidi: isolate;
  color: #B9BDBF; white-space: pre; overflow-x: auto;
  max-width: none;
}
.codecard__body .k { color: #fff; }
.codecard__body .s { color: #D2D6D8; }
.codecard__body .c { color: #8B8F91; font-style: italic; }
.codecard__body .f { color: #E8EAEB; }

/* Stats strip */
.stats { position: relative; z-index: 1; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--on-dark-line); }
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 1.6rem .5rem; text-align: center; border-inline-start: 1px solid rgba(255,255,255,.09); }
.stat:first-child { border-inline-start: 0; }
@media (max-width: 759px) {
  .stat:nth-child(odd) { border-inline-start: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.09); }
}
.stat__n {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  line-height: var(--lh-display); color: #fff;
  font-variant-numeric: lining-nums tabular-nums; unicode-bidi: isolate;
}
.stat__n .u { color: var(--on-dark-faint); }
.stat__l { margin-top: .3rem; font-size: var(--fs-2xs); line-height: var(--lh-ui); color: var(--on-dark-muted); font-weight: var(--fw-medium); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  position: relative; padding: 1.75rem; border-radius: var(--r);
  border: 1px solid var(--line); background: #fff;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex; flex-direction: column; gap: .75rem; height: 100%;
}
.card::after {
  content: ""; position: absolute; inset-inline: 1.75rem; top: -1px; height: 2px;
  background: var(--ink); border-radius: 2px; opacity: 0; transition: opacity var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 24px 44px -32px rgba(0,0,0,.55); }
.card:hover::after { opacity: 1; }
.card__ico {
  width: 52px; height: 52px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--ink); flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card__ico svg { width: 25px; height: 25px; }
.card:hover .card__ico { background: var(--ink); border-color: var(--ink); color: #fff; }
.card p { color: var(--muted); font-size: var(--fs-sm); max-width: var(--measure-tight); }
.card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .5rem; }
.tag {
  padding: .28rem .7rem; border-radius: 999px; background: var(--surface-3);
  border: 1px solid var(--line); color: var(--muted);
  font-family: var(--font-display); font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold); line-height: var(--lh-ui);
  letter-spacing: var(--tracking-lat); direction: ltr; unicode-bidi: isolate;
}

/* dark variant */
.section--dark .card { background: var(--on-dark-panel); border-color: rgba(255,255,255,.1); }
.section--dark .card::after { background: #fff; }
.section--dark .card p { color: var(--on-dark-muted); }
.section--dark .card__ico { background: rgba(255,255,255,.06); border-color: var(--on-dark-line); color: #fff; }
.section--dark .card:hover { border-color: var(--on-dark-line-2); box-shadow: none; }
.section--dark .card:hover .card__ico { background: #fff; border-color: #fff; color: var(--ink); }
.section--dark .tag { background: rgba(255,255,255,.05); border-color: var(--on-dark-line); color: var(--on-dark-muted); }

/* compact tile */
.tile {
  padding: 1.35rem; border-radius: var(--r); border: 1px solid var(--line);
  background: #fff; display: flex; flex-direction: column; gap: .55rem; height: 100%;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover { border-color: var(--ink); transform: translateY(-3px); }
.tile__ico {
  width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ink); color: #fff; flex: none;
}
.tile__ico svg { width: 21px; height: 21px; }
.tile p { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Philosophy ---------- */
.philo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .philo { grid-template-columns: .85fr 1.15fr; align-items: start; } }
.philo__lead p { margin-top: 1rem; color: var(--on-dark-muted); }
.philo__quote {
  margin-top: 2rem; padding-inline-start: 1.1rem; border-inline-start: 3px solid #fff;
  font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: #fff;
}
.philo__list { display: grid; gap: 0; }
.philo__item {
  padding: 1.5rem 0; border-top: 1px solid var(--on-dark-line);
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; row-gap: .5rem;
}
.philo__item:last-child { border-bottom: 1px solid var(--on-dark-line); }
.philo__num {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-regular);
  line-height: var(--lh-heading); color: var(--on-dark-muted);
  font-variant-numeric: lining-nums tabular-nums; padding-top: .35rem; unicode-bidi: isolate;
}
.philo__item p { grid-column: 2; color: var(--on-dark-muted); font-size: var(--fs-sm); }

/* ---------- Counters ---------- */
.counters {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
@media (min-width: 760px) { .counters { grid-template-columns: repeat(4, 1fr); } }
.counter { background: #fff; padding: 2rem 1rem; text-align: center; }
.counter__n {
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold);
  line-height: var(--lh-display); color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums; unicode-bidi: isolate;
}
.counter__n .u { color: var(--muted-2); }
.counter__l { margin-top: .5rem; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--muted); font-weight: var(--fw-medium); }

/* ---------- Coverage (internal links) ---------- */
.cov { display: grid; gap: 1.75rem; }
.cov__group h3 { font-size: var(--fs-lg); display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.cov__group h3 svg { width: 20px; height: 20px; color: var(--ink); }
.cov__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.cov__links a {
  padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--muted);
  font-family: var(--font-display); font-size: var(--fs-2xs);
  font-weight: var(--fw-medium); line-height: var(--lh-ui);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cov__links a:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ---------- CTA band ---------- */
.band {
  position: relative; background: var(--ink); color: #fff; border-radius: var(--r-lg);
  padding: clamp(2.25rem, 5vw, 4rem); overflow: hidden;
}
.band::after {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
  inset-inline-end: -160px; bottom: -250px; pointer-events: none;
}
.band__inner { position: relative; z-index: 1; display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .band__inner { grid-template-columns: 1.4fr auto; } }
.band h2 { font-size: var(--fs-2xl); color: #fff; }
.band p { margin-top: .75rem; color: var(--on-dark-muted); max-width: var(--measure-tight); }
.band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Contact ---------- */
.contact { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .contact { grid-template-columns: .9fr 1.1fr; } }
.contact__info { display: flex; flex-direction: column; gap: 1rem; }
.infoline {
  display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.infoline:hover { border-color: var(--ink); transform: translateY(-2px); }
.infoline__ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: #fff; flex: none; }
.infoline__ico svg { width: 21px; height: 21px; }
.infoline h3 { font-size: var(--fs-md); }
.infoline span { display: block; }
.infoline span span, .infoline > span > span {
  margin-top: .15rem; color: var(--muted); font-size: var(--fs-sm);
  line-height: var(--lh-ui); unicode-bidi: isolate;
}
.formwrap { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.formwrap > h3 { font-size: var(--fs-xl); margin-bottom: .4rem; }
.formwrap > p.sub { color: var(--muted); margin-bottom: 1.25rem; }

/* MetForm normalisation */
.formwrap .mf-input,
.formwrap input[type="text"], .formwrap input[type="email"],
.formwrap input[type="tel"], .formwrap select, .formwrap textarea {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: #fff; font-family: var(--font-body); font-size: var(--fs-sm);
  line-height: var(--lh-ui); color: var(--ink-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.formwrap .mf-input:focus, .formwrap input:focus, .formwrap select:focus, .formwrap textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.1);
}
/* MetForm's sizes come from Elementor's generated post CSS, which outranks a
   plain class selector — these overrides need the weight to land.
   Labels rendered at 12px and the react-select placeholder at 9px. */
.formwrap label, .formwrap .mf-input-label {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: var(--fs-2xs) !important;
  line-height: var(--lh-ui) !important;
  color: var(--ink-2) !important;
  margin-bottom: .3rem; display: block;
}
/* Inputs must stay at 16px+ or iOS Safari zooms the page on focus. */
.formwrap .mf-input,
.formwrap input[type="text"], .formwrap input[type="email"],
.formwrap input[type="tel"], .formwrap select, .formwrap textarea,
.formwrap [class*="mf_select__"] {
  font-size: var(--fs-sm) !important;
  font-family: var(--font-body) !important;
  line-height: var(--lh-ui) !important;
}
.formwrap [class*="mf_select__placeholder"],
.formwrap [class*="mf_select__single-value"],
.formwrap [class*="mf_select__option"] {
  font-size: var(--fs-sm) !important;
  color: var(--muted) !important;
}
.formwrap [class*="mf_select__single-value"] { color: var(--ink-2) !important; }
.formwrap [class*="mf_select__control"] {
  border-color: var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  min-height: 48px;
}
.formwrap .mf-input-wrapper { margin-bottom: 1rem; }
/* MetForm hard-codes #FF0139 on the asterisk, so this override needs the weight. */
.formwrap .mf-input-required-indicator,
.formwrap .mf-input-required,
.formwrap span[class*="required"] { color: var(--ink) !important; }
.formwrap ::placeholder { color: var(--muted-2); opacity: 1; font-family: var(--font-body); }
.formwrap .mf-btn-wraper { width: 100%; }
.formwrap button.metform-submit-btn, .formwrap .metform-btn {
  background: var(--ink); color: #fff; border: 0;
  border-radius: 999px; padding: .9rem 1.75rem; width: 100%; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); line-height: var(--lh-ui);
  transition: background var(--dur) var(--ease);
}
.formwrap button.metform-submit-btn:hover, .formwrap .metform-btn:hover { background: var(--ink-3); }

/* ---------- Footer ---------- */
.bx-footer { background: var(--ink); color: var(--on-dark-muted); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.footer__grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.footer__brand img { height: 54px; width: auto; }
.footer__brand p { margin-top: 1.1rem; font-size: var(--fs-sm); max-width: var(--measure-tight); }
.footer__social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer__social a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--on-dark-line); color: #fff;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer__social a:hover { background: #fff; border-color: #fff; color: var(--ink); }
.footer__social svg { width: 19px; height: 19px; }
.bx-footer h2, .bx-footer h3 { color: #fff; font-size: var(--fs-lg); margin-bottom: 1rem; }
.bx-footer ul li { margin-bottom: .6rem; }
.bx-footer ul a {
  font-size: var(--fs-sm); line-height: var(--lh-ui); display: inline-block;
  transition: color var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.bx-footer ul a:hover { color: #fff; padding-inline-start: .3rem; }
.footer__contact li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-ui); }
.footer__contact svg { width: 18px; height: 18px; color: #fff; margin-top: .35rem; flex: none; }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--on-dark-line);
  padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; justify-content: space-between; font-size: var(--fs-2xs);
  line-height: var(--lh-ui);
}
.footer__bottom p { max-width: none; }
.footer__bottom a:hover { color: #fff; }

/* ---------- Floating WhatsApp ---------- */
.wa-fab {
  position: fixed; inset-inline-start: 20px; bottom: 20px; z-index: 190;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.8);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wa-fab:hover { transform: scale(1.07); background: #fff; color: var(--ink); }
.wa-fab svg { width: 28px; height: 28px; }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- Utilities ---------- */
.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;
}