/* ==========================================================================
   dns-poster.css
   dubainotaryservices.ae, 0.2.0, the Night poster design (approved round 3,
   concept 1). The site chrome (top bar, header, services panel, mobile menu,
   footer, mobile action bar) and the home page components.

   SCOPE
   Every class in this file starts with np- (Night poster), so nothing here
   can restyle an inner page module (dns-*) by accident. The element resets
   below apply only inside a poster section (.np-sec and the poster blocks).

   TOKENS
   No hex code here: every colour reads a token from dns-tokens.css, which is
   the only file in the theme allowed to hold one. The --np-* names below are
   aliases, so the rules read like the approved concept file.

   RIGHT TO LEFT
   Logical properties only (inline and block, start and end), so the Arabic
   route mirrors without a second stylesheet. Three things cannot mirror by
   themselves and are handled with custom properties:
     --np-dir     1 or -1, multiplies every horizontal movement and flips the
                  arrows and chevrons.
     --np-track   1 or 0, multiplies every letter-spacing, because tracking
                  breaks Arabic letter joining.
     --np-upper   uppercase or none, because Arabic has no case.
   The families read --dns-font-display and --dns-font-text, which dns-rtl.css
   points at the self-hosted Noto Sans Arabic on the Arabic route.
   ========================================================================== */


/* ---------- 1. Aliases ---------------------------------------------------- */

:root {
  --np-green: var(--dns-action);
  --np-green-hover: var(--dns-action-hover);
  --np-green-bright: var(--dns-action-bright);
  --np-green-soft: var(--dns-action-soft);
  --np-tint: var(--dns-tint-lt);
  --np-band: var(--dns-band);
  --np-ground: var(--dns-surface-sunken);
  --np-white: var(--dns-surface);
  --np-ink: var(--dns-ink);
  --np-ink-2: var(--dns-surface-invert-2);
  --np-ink-deep: var(--dns-surface-deep);
  --np-text: var(--dns-text);
  --np-muted: var(--dns-text-muted);
  --np-text-invert: var(--dns-text-invert);
  --np-muted-invert: var(--dns-text-invert-muted);
  --np-border: var(--dns-border);
  --np-edge: var(--dns-edge);
  --np-border-strong: var(--dns-border-strong);
  --np-wa: var(--dns-wa);
  --np-wa-ink: var(--dns-wa-ink);

  --np-r-sm: 4px;
  --np-r: 6px;
  --np-r-lg: 8px;

  --np-display: var(--dns-font-display);
  --np-sans: var(--dns-font-text);

  --np-measure: 1280px;
  --np-gutter: clamp(20px, 4vw, 40px);
  --np-sec: clamp(72px, 8.4vw, 128px);
  --np-hdr: 88px;
  --np-bar: 40px;

  --np-fs-hero: clamp(46px, 7.4vw, 128px);
  --np-fs-cta: clamp(40px, 5.4vw, 84px);
  --np-fs-term: clamp(44px, 4.45vw, 64px);
  --np-fs-h2: clamp(32px, 3.6vw, 54px);
  --np-fs-quote: clamp(24px, 2.1vw, 30px);
  --np-fs-h3l: clamp(22px, 1.85vw, 26px);

  --np-hair: 1px solid var(--np-border);
  --np-hair-d: 1px solid rgba(255, 255, 255, 0.12);
  --np-shadow: 0 1px 2px rgba(16, 22, 25, 0.06), 0 8px 24px rgba(16, 22, 25, 0.08);
  --np-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --np-dir: 1;
  --np-track: 1;
  --np-upper: uppercase;
}

/* The header is sticky on every page, so an in-page jump lands below it. */
html { scroll-padding-top: calc(var(--np-hdr) + var(--wp-admin--admin-bar--height, 0px) + 12px); }

[dir="rtl"] {
  --np-dir: -1;
  --np-track: 0;
  --np-upper: none;
}

@media (max-width: 640px) {
  :root { --np-hdr: 72px; --np-bar: 44px; }
}


/* ---------- 2. Icons ------------------------------------------------------
   One line icon family (24 grid, 1.5 stroke, round caps), drawn as CSS masks
   so the same icon works in PHP chrome (span.np-ico) and inside core blocks
   (a pseudo element), takes currentColor, and needs no inline SVG in the
   editable content. Generated by tools/np_icons.py from the concept's paths. */

/* @np-icons-start */
:root {
  --np-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 16.3v2.8a1.9 1.9 0 0 1-2 1.9 18.6 18.6 0 0 1-8.1-2.9 18.3 18.3 0 0 1-5.6-5.6A18.6 18.6 0 0 1 1.9 4.4 1.9 1.9 0 0 1 3.8 2.3h2.8a1.9 1.9 0 0 1 1.9 1.6c.1.9.4 1.8.7 2.6a1.9 1.9 0 0 1-.4 2L7.6 9.7a15 15 0 0 0 5.6 5.6l1.2-1.2a1.9 1.9 0 0 1 2-.4c.8.3 1.7.6 2.6.7a1.9 1.9 0 0 1 1.5 1.9z'/%3E%3C/svg%3E");
  --np-i-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 20.2l1.2-4.1a8.6 8.6 0 1 1 3.2 3.1z'/%3E%3Cpath d='M9.1 8.3c.3-.5.6-.6 1-.6h.4c.2 0 .4.1.5.4l.7 1.6c.1.2 0 .5-.1.6l-.6.7c.6 1.2 1.6 2.2 2.8 2.8l.7-.6c.2-.2.4-.2.6-.1l1.6.7c.3.1.4.3.4.5v.4c0 .4-.2.7-.6 1-.7.4-1.6.5-2.4.2-2.3-.8-4.1-2.6-4.9-4.9-.3-.8-.2-1.7.2-2.4z'/%3E%3C/svg%3E");
  --np-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='M3.6 6.6l8.4 6.1 8.4-6.1'/%3E%3C/svg%3E");
  --np-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --np-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.7-6.5-11a6.5 6.5 0 0 1 13 0c0 5.3-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
  --np-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --np-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --np-i-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M15.5 10.2l6-3.2v10l-6-3.2'/%3E%3C/svg%3E");
  --np-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.8L12 4l8.5 6.8'/%3E%3Cpath d='M5.5 9.3V20h13V9.3'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E");
  --np-i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4.5A1.5 1.5 0 0 1 6.5 3h11A1.5 1.5 0 0 1 19 4.5V21'/%3E%3Cpath d='M3 21h18M9 7.5h1.5M13.5 7.5H15M9 11.5h1.5M13.5 11.5H15M9 15.5h1.5M13.5 15.5H15'/%3E%3C/svg%3E");
  --np-i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8z'/%3E%3Cpath d='M14 3v5h5M8.5 13h7M8.5 16.5h5'/%3E%3C/svg%3E");
  --np-i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --np-i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --np-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20.5c1.3-3.9 4.1-5.8 7.5-5.8s6.2 1.9 7.5 5.8'/%3E%3C/svg%3E");
  --np-i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.3'/%3E%3Cpath d='M2.8 19.5c1-3.3 3.3-5 6.2-5s5.2 1.7 6.2 5'/%3E%3Cpath d='M15.2 5.6a3.3 3.3 0 0 1 0 6.1M17.6 14.7c1.7.6 2.9 2.2 3.6 4.8'/%3E%3C/svg%3E");
  --np-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='1.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --np-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.2M12 7.9v.1'/%3E%3C/svg%3E");
  --np-i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  --np-i-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.2-4.4L16.4 4.4a2 2 0 0 1 2.9 0l.3.3a2 2 0 0 1 0 2.9L8.4 18.8z'/%3E%3Cpath d='M14.5 6.3l3.2 3.2'/%3E%3C/svg%3E");
  --np-i-stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20.5h14'/%3E%3Cpath d='M5.5 17.5h13v-3.2h-13z'/%3E%3Cpath d='M10 14.3v-3.1a3 3 0 1 1 4 0v3.1'/%3E%3C/svg%3E");
  --np-i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 7H20M10.5 12H20M10.5 17H20'/%3E%3Cpath d='M4 7l1.2 1.2L7.4 6M4 12l1.2 1.2 2.2-2.2M4 17l1.2 1.2 2.2-2.2'/%3E%3C/svg%3E");
  --np-i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.3 2.4 3.4 5.2 3.4 8.5s-1.1 6.1-3.4 8.5c-2.3-2.4-3.4-5.2-3.4-8.5S9.7 5.9 12 3.5z'/%3E%3C/svg%3E");
  --np-i-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='17.5' r='2.5'/%3E%3Ccircle cx='18' cy='6.5' r='2.5'/%3E%3Cpath d='M8.5 17.5H15a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h6.5'/%3E%3C/svg%3E");
  --np-i-check-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --np-i-check-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}
/* @np-icons-end */

.np-ico {
  display: inline-block;
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--np-i) center / contain no-repeat;
  mask: var(--np-i) center / contain no-repeat;
}
.np-ico--phone { --np-i: var(--np-i-phone); }
.np-ico--wa { --np-i: var(--np-i-wa); }
.np-ico--mail { --np-i: var(--np-i-mail); }
.np-ico--clock { --np-i: var(--np-i-clock); }
.np-ico--pin { --np-i: var(--np-i-pin); }
.np-ico--arrow { --np-i: var(--np-i-arrow); }
.np-ico--check { --np-i: var(--np-i-check); }
.np-ico--menu { --np-i: var(--np-i-menu); }
.np-ico--close { --np-i: var(--np-i-close); }
.np-ico--chev { --np-i: var(--np-i-chev); }
.np-ico--info { --np-i: var(--np-i-info); }
.np-ico--doc { --np-i: var(--np-i-doc); }
.np-ico--video { --np-i: var(--np-i-video); }
.np-ico--user { --np-i: var(--np-i-user); }

/* Directional glyphs mirror on the Arabic route. A chevron that points down
   is not directional and is left alone. */
.np-ico--arrow { transform: scaleX(var(--np-dir)); }

/* An icon on a core button: the wrapper carries np-i-<name>. */
.np-i-phone { --np-ib: var(--np-i-phone); }
.np-i-wa { --np-ib: var(--np-i-wa); }
.np-i-mail { --np-ib: var(--np-i-mail); }
.np-i-doc { --np-ib: var(--np-i-doc); }
.np-i-video { --np-ib: var(--np-i-video); }
.np-i-home { --np-ib: var(--np-i-home); }
.np-i-route { --np-ib: var(--np-i-route); }

:is(.np-i-phone, .np-i-wa, .np-i-mail, .np-i-doc, .np-i-video, .np-i-home, .np-i-route) > .wp-block-button__link.wp-element-button::before {
  content: "";
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--np-ib) center / contain no-repeat;
  mask: var(--np-ib) center / contain no-repeat;
}


/* ---------- 3. Base inside poster sections --------------------------------
   (0,1,0) resets, loaded after GeneratePress and dns-skin, so they beat the
   element defaults those set at (0,0,1) and lose to every component rule
   below, which is at (0,1,0) or more and later in the file. */

/* Border box everywhere in the poster, as in the approved file. Some inner
   page rules set content-box on shared elements (summary, for one). */
:is(.np-sec, .np-hero, .np-auth, .np-topbar, .np-hdr, .np-menu, .np-ftr, .np-actionbar),
:is(.np-sec, .np-hero, .np-auth, .np-topbar, .np-hdr, .np-menu, .np-ftr, .np-actionbar) *,
:is(.np-sec, .np-hero, .np-auth, .np-topbar, .np-hdr, .np-menu, .np-ftr, .np-actionbar) *::before,
:is(.np-sec, .np-hero, .np-auth, .np-topbar, .np-hdr, .np-menu, .np-ftr, .np-actionbar) *::after {
  box-sizing: border-box;
}

.np-sec,
.np-hero,
.np-auth {
  font-family: var(--np-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--np-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.np-sec :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, table, details, summary),
.np-hero :where(h1, h2, h3, p, ul, li, figure),
.np-auth :where(h2, ul, li, p) {
  margin: 0;
}

.np-sec :where(ul, ol),
.np-hero :where(ul),
.np-auth :where(ul) {
  padding: 0;
  list-style: none;
}

.np-sec :where(h1, h2, h3, h4) {
  font-family: var(--np-display);
  font-weight: 600;
  color: var(--np-ink);
  letter-spacing: calc(-0.02em * var(--np-track));
  line-height: 1.1;
}

.np-sec :where(h1, h2) { text-wrap: balance; }

.np-sec :where(img) { display: block; max-inline-size: 100%; block-size: auto; }

.np-sec :where(a) {
  color: var(--np-green);
  text-decoration: none;
  transition: color 0.2s ease;
}

.np-sec :where(a, button, summary, input, select, textarea):focus-visible,
.np-hdr :where(a, button):focus-visible,
.np-topbar :where(a):focus-visible,
.np-menu :where(a, button):focus-visible,
.np-ftr :where(a):focus-visible,
.np-actionbar :where(a):focus-visible,
.np-hero :where(a):focus-visible {
  outline: 3px solid var(--np-green);
  outline-offset: 2px;
}
/* On a green surface a green ring cannot be seen: the ring turns white. */
:is(.np-card--green, .np-way--on, .np-vs__card--spe) :where(a, button, summary):focus-visible,
html :is(.np-card--green, .np-way--on, .np-vs__card--spe) .wp-block-button__link.wp-element-button:focus-visible {
  outline-color: var(--np-white);
}

.np-sec :where(strong, b) { font-weight: 600; }

/* Latin runs inside text: a phone number, an AED figure, an email. Isolated
   so the bidi algorithm cannot reorder them on the Arabic route. Inline on
   purpose, never inline-block, so a line can still break around it. */
.dns-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

.np-tnum { font-variant-numeric: tabular-nums; }


/* ---------- 4. Layout primitives ------------------------------------------ */

.np-wrap {
  inline-size: 100%;
  max-inline-size: calc(var(--np-measure) + 2 * var(--np-gutter));
  margin-inline: auto;
  padding-inline: var(--np-gutter);
  box-sizing: border-box;
}

.np-sec { position: relative; padding-block: var(--np-sec); }
.np-sec--follow { padding-block-start: 0; }
.np-s-white { background: var(--np-white); }
.np-s-ground { background: var(--np-ground); }
.np-s-soft { background: var(--np-green-soft); }
.np-s-ink { background: var(--np-ink); color: var(--np-text-invert); }
.np-s-ink :where(h2, h3) { color: var(--np-white); }

/* Split head: a hairline, the H2 on the start side, a short lede on the end
   side, both on one baseline. */
.np-shead {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 20px 48px;
  align-items: last baseline;
  padding-block-start: 28px;
  border-block-start: var(--np-hair);
  margin-block-end: clamp(40px, 5vw, 64px);
}
.np-shead > h2 {
  font-size: var(--np-fs-h2);
  line-height: 1.02;
  letter-spacing: calc(-0.03em * var(--np-track));
  max-inline-size: 15em;
}
.np-shead > p { font-size: 17px; line-height: 1.6; color: var(--np-muted); }
.np-s-ink .np-shead { border-block-start: var(--np-hair-d); }
.np-s-ink .np-shead > p { color: var(--np-muted-invert); }
.np-s-ground .np-shead,
.np-s-soft .np-shead { border-block-start-color: var(--np-tint); }
.np-shead--stack {
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  margin-block-end: 0;
}

/* A section title without the split head (pairs, signings, online, visit). */
.np-h2 {
  font-size: var(--np-fs-h2);
  line-height: 1.02;
  letter-spacing: calc(-0.03em * var(--np-track));
  max-inline-size: 15em;
}


/* ---------- 5. Buttons ----------------------------------------------------
   Two sources, one look: an anchor the theme prints (a.np-btn) and a core
   button whose wrapper carries the class (.np-btn > .wp-block-button__link.wp-element-button). */

.np-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.np-sec .np-btns,
.np-hero .np-btns { gap: 12px; }
.np-btns > .wp-block-button { margin: 0; }

html :is(a.np-btn, button.np-btn, .np-btn > .wp-block-button__link.wp-element-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--np-r);
  box-sizing: border-box;
  background: transparent;
  font: 600 15px/1.1 var(--np-sans);
  letter-spacing: calc(0.005em * var(--np-track));
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
html :is(a.np-btn, button.np-btn) .np-ico { inline-size: 18px; block-size: 18px; }

html :is(a.np-btn--green, button.np-btn--green, .np-btn--green > .wp-block-button__link.wp-element-button) { background: var(--np-green); color: var(--np-white); }
html :is(a.np-btn--green, button.np-btn--green, .np-btn--green > .wp-block-button__link.wp-element-button):hover { background: var(--np-green-hover); color: var(--np-white); }

html :is(a.np-btn--wa, .np-btn--wa > .wp-block-button__link.wp-element-button) { background: var(--np-wa); color: var(--np-wa-ink); }
html :is(a.np-btn--wa, .np-btn--wa > .wp-block-button__link.wp-element-button):hover { color: var(--np-wa-ink); box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.1); }

html :is(a.np-btn--line-light, .np-btn--line-light > .wp-block-button__link.wp-element-button) { border-color: rgba(255, 255, 255, 0.6); color: var(--np-white); }
html :is(a.np-btn--line-light, .np-btn--line-light > .wp-block-button__link.wp-element-button):hover { background: var(--np-white); border-color: var(--np-white); color: var(--np-ink); }

html :is(a.np-btn--line, .np-btn--line > .wp-block-button__link.wp-element-button) { border-color: var(--np-ink); color: var(--np-ink); }
html :is(a.np-btn--line, .np-btn--line > .wp-block-button__link.wp-element-button):hover { background: var(--np-ink); color: var(--np-white); }

html :is(a.np-btn--white, .np-btn--white > .wp-block-button__link.wp-element-button) { background: var(--np-white); color: var(--np-ink); }
html :is(a.np-btn--white, .np-btn--white > .wp-block-button__link.wp-element-button):hover { background: var(--np-green-soft); color: var(--np-ink); }

html :is(a.np-btn--sm, .np-btn--sm > .wp-block-button__link.wp-element-button) { min-block-size: 44px; padding: 0 16px; font-size: 14px; }

/* The arrow link. */
html :is(a.np-go, .np-go > .wp-block-button__link.wp-element-button) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 600 16px/1.3 var(--np-sans);
  color: var(--np-green);
  text-decoration: none;
  text-align: start;
  white-space: normal;
  box-shadow: none;
}
html .np-go > .wp-block-button__link.wp-element-button::after,
html a.np-go::after {
  content: "";
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--np-i-arrow) center / contain no-repeat;
  mask: var(--np-i-arrow) center / contain no-repeat;
  transform: scaleX(var(--np-dir));
  transition: transform 0.25s var(--np-ease);
}
html :is(a.np-go, .np-go > .wp-block-button__link.wp-element-button):hover { color: var(--np-green-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
html :is(a.np-go, .np-go > .wp-block-button__link.wp-element-button):hover::after { transform: translateX(calc(4px * var(--np-dir))) scaleX(var(--np-dir)); }
:is(.np-s-ink, .np-card--ink, .np-pair, .np-wills, .np-mega) :is(a.np-go, .np-go > .wp-block-button__link.wp-element-button),
html :is(a.np-go--bright, .np-go--bright > .wp-block-button__link.wp-element-button) { color: var(--np-green-bright); }
:is(.np-s-ink, .np-card--ink, .np-pair, .np-wills, .np-mega) :is(a.np-go, .np-go > .wp-block-button__link.wp-element-button):hover,
html :is(a.np-go--bright, .np-go--bright > .wp-block-button__link.wp-element-button):hover { color: var(--np-white); }


/* ---------- 6. Small parts ------------------------------------------------ */

/* Photo caption, under a photo. */
.np-fig figcaption,
.np-cap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--np-muted);
  text-align: start;
}
.np-fig figcaption::before,
.np-capover figcaption::before,
.np-cap::before {
  content: "";
  inline-size: 20px;
  block-size: 1px;
  flex: none;
  background: currentColor;
  opacity: 0.7;
}

/* Photo caption, over a photo. */
.np-capover figcaption,
.np-capover-p {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 12px;
  border-radius: var(--np-r-sm);
  background: rgba(16, 22, 25, 0.78);
  color: var(--np-text-invert);
  font-size: 13px;
  line-height: 1.4;
}

/* Discs: the one place a 50% radius is allowed. */
.np-disc,
.np-tickrow::before,
.np-ticks > li::before,
.np-step__disc,
.np-vs__or,
.np-faq__item > summary::after,
.np-tell__list > li::before,
.np-addr > li::before,
.np-factor__n::before,
.np-dot {
  border-radius: 50%;
}

/* A green tick disc, used before list items and item rows. */
.np-ticks > li,
.np-tickrow {
  position: relative;
}
.np-ticks > li::before,
.np-tickrow::before {
  content: "";
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  background: var(--np-green) var(--np-i-check-w) center / 16px 16px no-repeat;
}

/* The square checkbox glyph: the box is ::before, the tick is ::after, so the
   tick can take the green token through a mask. --np-li-pad is the item's
   block padding, set by each list. */
.np-checks > li,
.np-bring__list > li {
  position: relative;
}
.np-checks > li::before,
.np-bring__list > li::before {
  content: "";
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  margin-block-start: 1px;
  box-sizing: border-box;
  border: 1.5px solid var(--np-green);
  border-radius: var(--np-r-sm);
}
.np-checks > li::after,
.np-bring__list > li::after {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: calc(var(--np-li-pad, 0px) + 5px);
  inline-size: 16px;
  block-size: 16px;
  background-color: var(--np-green);
  -webkit-mask: var(--np-i-check-b) center / contain no-repeat;
  mask: var(--np-i-check-b) center / contain no-repeat;
}

/* A 4px rectangle tag, never a pill. */
.np-tag,
.np-step h3 em,
.np-tags > li {
  display: inline-flex;
  align-items: center;
  min-block-size: 26px;
  padding: 0 10px;
  border-radius: var(--np-r-sm);
  background: var(--np-green-soft);
  color: var(--np-green-hover);
  font: 600 12px/1 var(--np-sans);
  font-style: normal;
  letter-spacing: calc(0.04em * var(--np-track));
}

/* The fee note under fee blocks. */
.np-caveat {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--np-muted);
}
.np-caveat::before {
  content: "";
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 1px;
  background-color: var(--np-green);
  -webkit-mask: var(--np-i-info) center / contain no-repeat;
  mask: var(--np-i-info) center / contain no-repeat;
}
:is(.np-s-ink, .np-pair, .np-wills) .np-caveat { color: var(--np-muted-invert); }
:is(.np-s-ink, .np-pair, .np-wills) .np-caveat::before { background-color: var(--np-green-bright); }

.np-dot { display: inline-block; inline-size: 8px; block-size: 8px; flex: none; background: var(--np-green-bright); }

/* Screen reader only text the theme prints. */
.np-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 7. Chrome: top bar --------------------------------------------- */

.np-topbar {
  position: relative;
  z-index: 51;
  block-size: var(--np-bar);
  background: var(--np-ink-deep);
  color: var(--np-muted-invert);
  font: 400 13px/1 var(--np-sans);
}
.np-topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  block-size: 100%;
}
.np-topbar__list {
  display: flex;
  align-items: center;
  gap: 24px;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.np-topbar__list > li { margin: 0; }
.np-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: var(--np-bar);
  color: var(--np-muted-invert);
  text-decoration: none;
  white-space: nowrap;
}
.np-topbar a:hover { color: var(--np-white); }
.np-topbar .np-ico { inline-size: 16px; block-size: 16px; }
.np-topbar__hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  padding-inline-start: 24px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
/* The bar never lets the hours run under the language switch: if the
   sentence is longer than the room (the Arabic one is), it is cut, and on
   the Arabic route the email steps aside earlier to make that room. */
.np-topbar__list { flex: 1 1 auto; overflow: hidden; }
.np-topbar__lang { flex: none; }
.np-topbar .np-topbar__list a:focus-visible { outline-offset: -3px; }
.np-topbar__hours { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1600px) {
  [dir="rtl"] .np-topbar__mail { display: none; }
}

/* The language switch, in the top bar and in the mobile menu. */
.np-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.np-lang__here { color: var(--np-white); }
.np-lang__sep { opacity: 0.5; }
.np-topbar .np-lang a,
.np-menu .np-lang a { color: var(--np-muted-invert); text-decoration: none; }
.np-topbar .np-lang a:hover,
.np-menu .np-lang a:hover { color: var(--np-white); }


/* ---------- 8. Chrome: header ---------------------------------------------- */

.np-hdr {
  position: sticky;
  inset-block-start: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
  block-size: var(--np-hdr);
  color: var(--np-white);
  background: var(--np-ink);
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
@media (max-width: 600px) {
  .np-hdr { inset-block-start: 0; }
}

/* On a page that opens with the poster hero the header sits on the photo,
   transparent, and turns solid ink after 80px of scroll (dns-poster.js). */
.np-hdr--over {
  margin-block-end: calc(-1 * var(--np-hdr));
  background: rgba(16, 22, 25, 0);
  border-block-end-color: rgba(255, 255, 255, 0);
}
.np-hdr--over.is-solid {
  background: var(--np-ink);
  border-block-end-color: rgba(255, 255, 255, 0.1);
}

.np-hdr__in {
  display: flex;
  align-items: center;
  gap: 28px;
  block-size: 100%;
}

.np-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-block-size: 44px;
  /* May shrink, never push the menu button off a phone screen: a longer site name (the staging
     copy prints staging.dubainotaryservices.ae) is trimmed with an ellipsis instead. */
  flex: 0 1 auto;
  min-inline-size: 0;
  color: inherit;
  text-decoration: none;
}
.np-brand:hover { color: inherit; }
.np-brand__mark { display: block; inline-size: 32px; block-size: 32px; flex: none; }
/* The logo lockup (3.6 to 1), never squeezed: it keeps its height and the header gives it room. */
.np-brand__logo { display: block; block-size: 52px; inline-size: auto; max-inline-size: none; flex: none; }
@media (max-width: 640px) { .np-brand__logo { block-size: 42px; } }
.np-brand__mark svg { display: block; inline-size: 100%; block-size: 100%; }
.np-brand__text { display: flex; flex-direction: column; gap: 5px; min-inline-size: 0; }
.np-brand__name,
.np-brand__strap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-brand__name {
  font: 700 18px/1.05 var(--np-display);
  letter-spacing: calc(-0.02em * var(--np-track));
  color: inherit;
}
.np-brand__strap {
  font: 400 12px/1.1 var(--np-sans);
  text-transform: var(--np-upper);
  letter-spacing: calc(0.08em * var(--np-track));
  color: var(--np-muted-invert);
}

.np-nav { margin-inline-start: auto; }
.np-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.np-nav__item { display: flex; align-items: center; margin: 0; }
.np-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0 12px;
  color: var(--np-white);
  font: 500 15px/1 var(--np-sans);
  text-decoration: none;
  white-space: nowrap;
}
.np-nav__link:hover,
.np-nav__link:focus-visible { color: var(--np-white); }
.np-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 8px;
  block-size: 2px;
  background: var(--np-green-bright);
  transform: scaleX(0);
  transform-origin: var(--np-origin, left);
  transition: transform 0.25s var(--np-ease);
}
[dir="rtl"] .np-nav__link::after { --np-origin: right; }
.np-nav__link:hover::after,
.np-nav__link:focus-visible::after,
.np-nav__link[aria-current="page"]::after,
.np-nav__item.is-open > .np-nav__link::after { transform: scaleX(1); }

/* The toggle beside a link that has a panel. GeneratePress styles every bare
   button, so every property it sets is restated here. */
.np-hdr .np-nav__toggle {
  display: inline-grid;
  place-items: center;
  inline-size: 28px;
  min-block-size: 44px;
  margin-inline-start: -8px;
  padding: 0;
  border: 0;
  border-radius: var(--np-r-sm);
  background: transparent;
  color: var(--np-white);
  cursor: pointer;
}
.np-hdr .np-nav__toggle:hover,
.np-hdr .np-nav__toggle:focus { background: transparent; color: var(--np-green-bright); }
.np-nav__toggle .np-ico { inline-size: 16px; block-size: 16px; transition: transform 0.25s var(--np-ease); }
.np-nav__toggle[aria-expanded="true"] .np-ico { transform: rotate(180deg); }

/* The services panel: ink, hairlines, bright green accents. It hangs from
   the header (the sticky header is its containing block) across the full
   width, with its content held in the container. */
.np-mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  max-block-size: calc(100vh - var(--np-hdr) - var(--wp-admin--admin-bar--height, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--np-ink);
  color: var(--np-text-invert);
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s var(--np-ease), visibility 0s linear 0.2s;
}
.np-nav__item.is-open > .np-mega,
html:not(.np-js) .np-nav__item--panel:is(:hover, :focus-within) > .np-mega {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s var(--np-ease), visibility 0s;
}
.np-mega__in { padding-block: 40px 28px; }
.np-mega__grid {
  display: grid;
  grid-template-columns: repeat(var(--np-cols, 3), minmax(0, 1fr));
  gap: 0;
}
.np-mega__col { min-inline-size: 0; padding-inline-end: 40px; }
.np-mega__col + .np-mega__col {
  padding-inline-start: 40px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}
.np-mega__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block-end: 16px;
  margin-block-end: 8px;
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--np-white);
  font: 600 20px/1.2 var(--np-display);
  letter-spacing: calc(-0.01em * var(--np-track));
  text-decoration: none;
}
.np-mega__head .np-ico { color: var(--np-green-bright); transition: transform 0.25s var(--np-ease); }
.np-mega__head:hover { color: var(--np-green-bright); }
.np-mega__head:hover .np-ico { transform: translateX(calc(4px * var(--np-dir))) scaleX(var(--np-dir)); }
.np-mega__list { margin: 0; padding: 0; list-style: none; }
.np-mega__list > li { margin: 0; }
.np-mega__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 40px;
  color: var(--np-text-invert);
  font: 400 15px/1.35 var(--np-sans);
  text-decoration: none;
}
.np-mega__list a::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  transition: background-color 0.2s ease;
}
.np-mega__list a:hover,
.np-mega__list a[aria-current="page"] { color: var(--np-green-bright); }
.np-mega__list a:hover::before,
.np-mega__list a[aria-current="page"]::before { background: var(--np-green-bright); }
.np-mega__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  margin-block-start: 28px;
  padding-block-start: 16px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}
.np-mega__hours { font-size: 13px; line-height: 1.5; color: var(--np-muted-invert); }

.np-hdr__cta { display: flex; align-items: center; gap: 10px; }

.np-hdr .np-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--np-r);
  background: transparent;
  color: var(--np-white);
  font: 600 14px/1 var(--np-sans);
  cursor: pointer;
}
.np-hdr .np-menu-btn:hover,
.np-hdr .np-menu-btn:focus { border-color: var(--np-white); background: transparent; color: var(--np-white); }


/* ---------- 9. Chrome: mobile menu ----------------------------------------- */

html.np-locked,
html.np-locked body { overflow: hidden; }

.np-menu {
  position: fixed;
  inset: 0;
  z-index: 100000;
  visibility: hidden;
  transition: visibility 0s linear 0.32s;
}
.np-menu.is-open { visibility: visible; transition: visibility 0s; }
.np-menu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 16, 0.66);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.np-menu.is-open .np-menu__scrim { opacity: 1; }
.np-menu__sheet {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  inline-size: min(440px, 100%);
  box-sizing: border-box;
  padding: 20px 24px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--np-ink);
  color: var(--np-text-invert);
  font: 400 15px/1.5 var(--np-sans);
  transform: translateX(calc(100% * var(--np-dir)));
  transition: transform 0.32s var(--np-ease);
}
.np-menu.is-open .np-menu__sheet { transform: none; }
.np-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--np-white);
}
.np-menu .np-menu__close {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--np-r);
  background: transparent;
  color: var(--np-white);
  cursor: pointer;
}
.np-menu .np-menu__close:hover,
.np-menu .np-menu__close:focus { border-color: var(--np-white); background: transparent; color: var(--np-white); }
.np-menu .np-lang { font-size: 14px; }

.np-menu__list,
.np-menu__sub { margin: 0; padding: 0; list-style: none; }
.np-menu__list > li,
.np-menu__sub > li { margin: 0; }
.np-menu__sub[hidden] { display: none; }
.np-menu__row {
  display: flex;
  align-items: stretch;
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}
.np-menu__row > a {
  display: flex;
  align-items: center;
  flex: 1;
  min-inline-size: 0;
  min-block-size: 56px;
  color: var(--np-white);
  font: 600 22px/1.15 var(--np-display);
  letter-spacing: calc(-0.02em * var(--np-track));
  text-decoration: none;
}
.np-menu__row > a:hover,
.np-menu__row > a[aria-current="page"] { color: var(--np-green-bright); }
.np-menu .np-menu__toggle {
  display: grid;
  place-items: center;
  inline-size: 48px;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--np-green-bright);
  cursor: pointer;
}
.np-menu .np-menu__toggle:hover,
.np-menu .np-menu__toggle:focus { background: transparent; color: var(--np-white); }
.np-menu__toggle .np-ico { transition: transform 0.25s var(--np-ease); }
.np-menu__toggle[aria-expanded="true"] .np-ico { transform: rotate(180deg); }

/* Level two and three: indented on a hairline, smaller type. */
.np-menu__sub { padding-inline-start: 14px; border-inline-start: 1px solid rgba(255, 255, 255, 0.12); margin-block: 8px 12px; }
.np-menu__sub .np-menu__row { border-block-end: 0; }
.np-menu__sub .np-menu__row > a {
  min-block-size: 48px;
  font: 600 17px/1.3 var(--np-display);
  letter-spacing: 0;
  color: var(--np-text-invert);
}
.np-menu__sub .np-menu__sub .np-menu__row > a {
  min-block-size: 44px;
  font: 400 15px/1.35 var(--np-sans);
  color: var(--np-text-invert);
}
.np-menu__sub .np-menu__row > a:hover,
.np-menu__sub .np-menu__row > a[aria-current="page"] { color: var(--np-green-bright); }
.np-menu__sub .np-menu__toggle { inline-size: 44px; }

.np-menu__cta { display: grid; gap: 10px; margin-block-start: auto; }
.np-menu__cta .np-btn { inline-size: 100%; }
.np-menu__hours { margin: 0; font-size: 13px; line-height: 1.5; color: var(--np-muted-invert); }


/* ---------- 10. Chrome: footer --------------------------------------------- */

.np-ftr {
  background: var(--np-ink-deep);
  color: var(--np-muted-invert);
  font: 400 15px/1.6 var(--np-sans);
}
.np-ftr a { color: var(--np-muted-invert); text-decoration: none; }
.np-ftr a:hover { color: var(--np-white); }
.np-ftr__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 1.1fr;
  gap: 48px;
  padding-block: 80px 64px;
}
.np-ftr__grid > * { min-inline-size: 0; }
.np-ftr .np-brand { color: var(--np-white); }
.np-ftr__line { margin: 20px 0 0; }
.np-ftr__contact { display: grid; gap: 2px; margin-block-start: 20px; }
.np-ftr__contact a { display: inline-flex; align-items: center; gap: 10px; min-block-size: 40px; }
.np-ftr__contact .np-ico { inline-size: 18px; block-size: 18px; color: var(--np-green-bright); }
.np-ftr h2 {
  margin: 0 0 16px;
  font: 600 13px/1 var(--np-sans);
  letter-spacing: calc(0.1em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-white);
}
.np-ftr__links { margin: 0; padding: 0; list-style: none; }
.np-ftr__links > li { margin: 0; }
.np-ftr__links a { display: inline-flex; align-items: center; min-block-size: 36px; line-height: 1.35; }
.np-ftr__office p { margin: 0; }
.np-ftr__office p + p { margin-block-start: 14px; }
.np-ftr__office b { color: var(--np-text-invert); font-weight: 600; }
.np-ftr__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 20px;
  border-block-start: var(--np-hair-d);
  font-size: 13px;
}
.np-ftr__bar p { margin: 0; }
/* Copyright and the developer credit share the bar's first slot, so the legal links keep theirs. */
.np-ftr__sign { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.np-ftr__credit a { text-decoration: underline; text-underline-offset: 2px; }
/* Below laptop width the credit sits under the copyright, so the legal links stay on their row. */
@media (max-width: 1023px) { .np-ftr__sign { flex-direction: column; align-items: flex-start; gap: 4px; } }
.np-ftr__legal { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.np-ftr__legal > li { margin: 0; }
.np-ftr__legal a { display: inline-flex; align-items: center; min-block-size: 40px; }


/* ---------- 11. Chrome: mobile action bar ---------------------------------- */

.np-actionbar { display: none; }


/* ---------- 12. Hero: the poster ------------------------------------------- */

.np-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-block-size: max(680px, min(calc(100svh - var(--np-bar)), 940px));
  overflow: hidden;
  background: var(--np-ink);
  color: var(--np-white);
}
.np-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  overflow: hidden;
}
.np-hero__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: 50% 45%;
  transform-origin: 50% 60%;
}
.np-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 22, 25, 0.62) 0%, rgba(16, 22, 25, 0.1) 32%, rgba(16, 22, 25, 0.42) 58%, rgba(16, 22, 25, 0.94) 100%);
}
.np-hero__grid {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-block-start: 150px;
}
.np-hero__lede { align-self: flex-end; inline-size: min(400px, 100%); }
.np-hero__lede p { font-size: 18px; line-height: 1.6; color: var(--np-text-invert); }
.np-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  margin-block-start: 22px;
  padding-block-start: 16px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
}
.np-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  color: var(--np-white);
  font: 600 16px/1.3 var(--np-sans);
  text-decoration: none;
}
.np-hero__link .np-ico { inline-size: 18px; block-size: 18px; color: var(--np-green-bright); transition: transform 0.25s var(--np-ease); }
.np-hero__link:hover { color: var(--np-white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.np-hero__link:hover .np-ico { transform: translateX(calc(4px * var(--np-dir))) scaleX(var(--np-dir)); }
.np-hero__foot { position: relative; margin-block-start: auto; padding: 40px 0 36px; }
.np-hero__title {
  font: 700 var(--np-fs-hero)/0.92 var(--np-display);
  letter-spacing: calc(-0.04em * var(--np-track));
  color: var(--np-white);
  text-wrap: wrap;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.28);
}
.np-hero .np-hero__title { margin: 0; color: var(--np-white); }
.np-hero__ln { position: relative; }
.np-hl { color: var(--np-green-bright); }
/* The caption is set vertically, and a vertical writing mode turns its own
   logical insets sideways, so it is placed with physical ones and mirrored
   by hand on the Arabic route. */
.np-hero__cap {
  position: absolute;
  right: calc(10px - var(--np-gutter));
  bottom: 36px;
  left: auto;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 500 11px/1 var(--np-sans);
  letter-spacing: calc(0.14em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-text-invert);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
.np-hero .np-hero__cap { margin: 0; }
[dir="rtl"] .np-hero__cap { right: auto; left: calc(10px - var(--np-gutter)); }

.np-rail {
  --np-rail-pad: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: calc(-1 * var(--np-rail-pad));
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
}
.np-rail__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px var(--np-rail-pad) 28px;
  color: var(--np-white);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.np-rail__cell:first-child { border-inline-start: 0; }
.np-rail__cell:hover { background: rgba(255, 255, 255, 0.06); color: var(--np-white); }
.np-rail__idx {
  font: 500 13px/1 var(--np-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: calc(0.06em * var(--np-track));
  color: var(--np-green-bright);
}
.np-rail__title {
  margin-block-start: 12px;
  font: 600 20px/1.15 var(--np-display);
  letter-spacing: calc(-0.01em * var(--np-track));
  color: var(--np-white);
}
.np-rail__line { margin-block-start: 6px; font-size: 14px; line-height: 1.45; color: var(--np-muted-invert); }
.np-rail__arrow {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: var(--np-rail-pad);
  color: var(--np-white);
  transition: transform 0.25s var(--np-ease);
}
.np-rail__cell:hover .np-rail__arrow.np-ico--arrow { transform: translateX(calc(4px * var(--np-dir))) scaleX(var(--np-dir)); }
.np-rail__phone {
  display: inline-flex;
  align-self: flex-start;
  margin-block-start: 8px;
  color: var(--np-white);
  font: 600 18px/1.2 var(--np-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: calc(0.01em * var(--np-track));
  text-decoration: none;
}
.np-rail__phone:hover { color: var(--np-green-bright); }
.np-rail__talk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-block-start: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--np-muted-invert);
}
.np-rail__talk a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 24px;
  color: var(--np-green-bright);
  font-weight: 600;
  text-decoration: none;
}
.np-rail__talk a:hover { color: var(--np-white); }
.np-rail__talk .np-ico { inline-size: 16px; block-size: 16px; }


/* ---------- 13. Authorities: the logo marquee ------------------------------ */

.np-auth {
  display: flex;
  align-items: center;
  min-block-size: 120px;
  padding-block: 28px;
  box-sizing: border-box;
  background: var(--np-ink);
  color: var(--np-muted-invert);
  border-block-start: 1px solid rgba(255, 255, 255, 0.06);
}
.np-auth__wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}
.np-auth .np-auth__title {
  padding-inline-end: 32px;
  border-inline-end: var(--np-hair-d);
  font: 500 15px/1.35 var(--np-display);
  letter-spacing: 0;
  color: var(--np-muted-invert);
  white-space: nowrap;
}
.np-filter { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.np-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0));
}
.np-marquee__track {
  display: flex;
  inline-size: max-content;
  animation: np-marquee 40s linear infinite;
}
[dir="rtl"] .np-marquee__track { animation-name: np-marquee-rtl; }
.np-marquee:hover .np-marquee__track { animation-play-state: paused; }
.np-logos {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-inline-end: 64px;
}
.np-auth .np-logos { margin: 0; padding-block: 0; padding-inline-start: 0; list-style: none; }
.np-logos > li { flex: none; margin: 0; }
.np-logos img {
  display: block;
  inline-size: auto;
  max-inline-size: none;
  block-size: 44px;
  filter: url(#np-logo-white);
  opacity: 0.86;
}
.np-logos .np-lg-tall { block-size: 56px; }
.np-logos .np-lg-mid { block-size: 54px; }
.np-logos .np-lg-wide { block-size: 38px; }
@keyframes np-marquee { to { transform: translateX(-50%); } }
@keyframes np-marquee-rtl { to { transform: translateX(50%); } }

/* ---------- 14. Sections: one office (3) ---------------------------------- */

.np-about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 32px;
  align-items: start;
  padding-block-start: 28px;
  border-block-start: var(--np-hair);
}
.np-about__head { grid-column: 1 / 6; }
.np-about__head > h2 {
  font-size: var(--np-fs-h2);
  line-height: 1.02;
  letter-spacing: calc(-0.03em * var(--np-track));
  max-inline-size: 15em;
}
.np-about__head > p { margin-block-start: 24px; font-size: 17px; color: var(--np-muted); }
.np-about__head > .np-btns { margin-block-start: 32px; }
.np-about__list { grid-column: 6 / 10; }
.np-about__fig { grid-column: 10 / 13; }
.np-about__fig img,
.np-bring__fig img,
.np-visit__fig img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  border-radius: var(--np-r-lg);
}
.np-about__fig img { aspect-ratio: 3 / 4; object-position: 50% 40%; }

/* An item row with a tick disc: the disc in the first track, the heading and
   its line in the second. */
.np-tickrow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding-block: 24px;
  border-block-start: var(--np-hair);
}
.np-tickrow::before { grid-row: 1 / span 2; }
.np-tickrow > * { grid-column: 2; }
.np-tickrow:first-child { padding-block-start: 6px; border-block-start: 0; }
.np-tickrow > h3 { font: 600 18px/1.3 var(--np-display); letter-spacing: calc(-0.01em * var(--np-track)); }
.np-tickrow > p { margin-block-start: 6px; font-size: 15px; line-height: 1.55; color: var(--np-muted); }

/* A list with tick discs. */
.np-ticks { border-block-end: var(--np-hair); }
.np-ticks > li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-block: 18px;
  border-block-start: var(--np-hair);
  font-size: 17px;
  line-height: 1.55;
}


/* ---------- 15. Sections: what we notarise, the bento (4) ------------------ */

.np-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.np-card {
  --np-card-line: var(--np-border);
  --np-card-link: var(--np-green);
  --np-card-muted: var(--np-muted);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-block-size: 380px;
  padding: 28px 28px 22px;
  overflow: hidden;
  border-radius: var(--np-r-lg);
  color: var(--np-text);
  box-sizing: border-box;
}
.np-sec .np-card__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  font: 600 26px/1.08 var(--np-display);
  letter-spacing: calc(-0.02em * var(--np-track));
  color: inherit;
}
.np-card__title::after {
  content: "";
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  margin-block-start: 2px;
  background-color: currentColor;
  -webkit-mask: var(--np-ci, none) center / contain no-repeat;
  mask: var(--np-ci, none) center / contain no-repeat;
}
.np-card--photo .np-card__title::after { display: none; }
.np-card--building { --np-ci: var(--np-i-building); }
.np-card--users { --np-ci: var(--np-i-users); }
.np-card--pen { --np-ci: var(--np-i-pen); }
.np-card--stamp { --np-ci: var(--np-i-stamp); }
.np-card--mail { --np-ci: var(--np-i-mail); }
.np-card--line .np-card__title,
.np-card--ground .np-card__title { min-block-size: 56px; }
.np-sec .np-card__title { text-wrap: wrap; }
.np-card__sub { margin-block-start: 10px; font-size: 15px; line-height: 1.5; color: var(--np-card-muted); }
.np-card__fee { margin-block-start: 10px; font: 600 18px/1.3 var(--np-sans); font-variant-numeric: tabular-nums; }
.np-card__big {
  margin-block-start: 22px;
  font: 600 48px/1 var(--np-display);
  letter-spacing: calc(-0.03em * var(--np-track));
  font-variant-numeric: tabular-nums;
}
.np-card__big small,
.np-poa__big small { font: 600 15px/1 var(--np-sans); letter-spacing: calc(0.02em * var(--np-track)); margin-inline-end: 6px; }

/* A list of links, each with an optional fee: the link text is one grid
   item, a <strong> is the fee, an <em> is "Quoted on the draft", and the
   arrow is the ::after. */
.np-card__list { margin-block-start: auto; padding-block-start: 24px; }
.np-card__list > li { margin: 0; }
.np-card__list a,
.np-svc a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  min-block-size: 44px;
  padding-block: 9px;
  border-block-start: 1px solid var(--np-card-line);
  color: inherit;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}
.np-card__list a::after,
.np-svc a::after,
.np-chips a::after {
  content: "";
  grid-column: 3;
  inline-size: 16px;
  block-size: 16px;
  background-color: currentColor;
  -webkit-mask: var(--np-i-arrow) center / contain no-repeat;
  mask: var(--np-i-arrow) center / contain no-repeat;
  transform: scaleX(var(--np-dir));
  transition: transform 0.25s var(--np-ease);
}
.np-card__list a:hover::after,
.np-svc a:hover::after { transform: translateX(calc(3px * var(--np-dir))) scaleX(var(--np-dir)); }
.np-card__list a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.np-card__list a strong,
.np-card__list a em {
  grid-column: 2;
  font-style: normal;
  white-space: nowrap;
  text-align: end;
}
.np-card__list a strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.np-card__list a em { font-weight: 400; font-size: 13px; color: var(--np-card-muted); }
.np-card .np-btns { margin-block-start: 8px; }
.np-card :is(a.np-go, .np-go > .wp-block-button__link.wp-element-button),
.np-card :is(a.np-go, .np-go > .wp-block-button__link.wp-element-button):hover { color: var(--np-card-link); font-size: 15px; }

.np-card--photo {
  --np-card-line: rgba(255, 255, 255, 0.22);
  --np-card-link: var(--np-white);
  --np-card-muted: var(--np-text-invert);
  color: var(--np-white);
  background: var(--np-ink);
}
.np-card--photo > .np-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}
.np-card--photo > .np-card__img img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: 50% 6%;
  transition: transform 0.9s var(--np-ease);
}
.np-card--photo:hover > .np-card__img img { transform: scale(1.03); }
.np-card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(16, 22, 25, 0.96) 0%, rgba(16, 22, 25, 0.86) 42%, rgba(16, 22, 25, 0.2) 70%, rgba(16, 22, 25, 0) 100%);
}
.np-card--photo .np-card__img figcaption { inset-block-start: 20px; inset-inline-start: 20px; }
.np-card__body { margin-block-start: auto; padding-block-start: 120px; }
.np-card--photo .np-card__title { color: var(--np-white); }
/* At most three columns, each at least 100px, so a link name never breaks
   inside a word: three on a wide card, two on a phone or a tablet. */
.np-card--photo .np-card__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(100px, (100% - 36px) / 3), 1fr));
  column-gap: 18px;
  padding-block-start: 18px;
}
.np-card--photo .np-card__list a { grid-template-columns: minmax(0, 1fr) 16px; }
.np-card--photo .np-card__list a::after { grid-column: 2; }
.np-card__more a { font-weight: 600; }

.np-card--green {
  --np-card-line: rgba(255, 255, 255, 0.24);
  --np-card-link: var(--np-white);
  --np-card-muted: var(--np-green-soft);
  background: var(--np-green);
  color: var(--np-white);
}
.np-card--ink {
  --np-card-line: rgba(255, 255, 255, 0.12);
  --np-card-link: var(--np-green-bright);
  --np-card-muted: var(--np-muted-invert);
  background: var(--np-ink);
  color: var(--np-text-invert);
}
.np-sec .np-card--ink .np-card__title { color: var(--np-white); }
.np-card--ink .np-card__title::after { background-color: var(--np-green-bright); }
.np-card--line { background: var(--np-white); border: 1px solid var(--np-border); }
.np-sec :is(.np-card--line, .np-card--ground, .np-card--soft) .np-card__title { color: var(--np-ink); }
:is(.np-card--line, .np-card--ground) .np-card__title::after { background-color: var(--np-green); }
:is(.np-card--line, .np-card--ground) .np-card__big { color: var(--np-ink); }
.np-card--ground { --np-card-line: var(--np-tint); background: var(--np-ground); }
.np-card--soft { --np-card-line: var(--np-tint); --np-card-link: var(--np-green-hover); background: var(--np-green-soft); }
.np-card--soft .np-card__title::after { background-color: var(--np-green-hover); }

.np-bento__foot,
.np-terms__foot,
.np-fees__foot,
.np-need__foot,
.np-co__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}
.np-bento__foot { margin-block-start: 24px; padding-block-start: 20px; border-block-start: var(--np-hair); }


/* ---------- 16. Sections: three ways (5) ----------------------------------- */

.np-ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: var(--np-hair-d);
}
.np-way {
  display: flex;
  flex-direction: column;
  padding: 44px 40px 40px;
  border-inline-start: var(--np-hair-d);
}
.np-way:first-child { padding-inline-start: 0; border-inline-start: 0; }
.np-way:last-child { padding-inline-end: 0; }
.np-sec .np-way__num {
  display: block;
  font: 700 128px/0.8 var(--np-display);
  letter-spacing: calc(-0.05em * var(--np-track));
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.35);
  font-variant-numeric: tabular-nums;
}
.np-way > h3 { margin-block-start: 40px; font-size: var(--np-fs-h3l); line-height: 1.1; }
.np-way__text { margin-block-start: 12px; color: var(--np-muted-invert); }
.np-sec .np-way__label {
  margin-block-start: 28px;
  font: 600 12px/1 var(--np-sans);
  letter-spacing: calc(0.1em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-green-bright);
}
.np-way__ready { margin-block-start: 14px; }
.np-way__ready > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-block: 12px;
  border-block-start: var(--np-hair-d);
  font-size: 15px;
  line-height: 1.45;
  color: var(--np-text-invert);
}
.np-way__ready > li::before {
  content: "";
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 1px;
  background-color: var(--np-green-bright);
  -webkit-mask: var(--np-i-check) center / contain no-repeat;
  mask: var(--np-i-check) center / contain no-repeat;
}
.np-way > .np-btns { margin-block-start: auto; padding-block-start: 28px; }
.np-way--on { padding-inline: 40px; background: var(--np-green); border-inline-start-color: transparent; }
.np-way--on:first-child { padding-inline: 40px; }
.np-way--on + .np-way { border-inline-start-color: transparent; }
.np-sec .np-way--on .np-way__num { color: var(--np-white); -webkit-text-stroke: 0; }
.np-sec .np-way--on :is(.np-way__text, .np-way__label),
.np-way--on .np-way__ready > li { color: var(--np-white); }
.np-way--on .np-way__ready > li { border-block-start-color: rgba(255, 255, 255, 0.26); }
.np-way--on .np-way__ready > li::before { background-color: var(--np-white); }
.np-sec .np-way--on :is(a.np-go, .np-go > .wp-block-button__link.wp-element-button),
.np-sec .np-way--on :is(a.np-go, .np-go > .wp-block-button__link.wp-element-button):hover { color: var(--np-white); }


/* ---------- 17. Sections: photo band (6) ----------------------------------- */

.np-pband {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-block-size: 520px;
  padding-block: 80px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--np-ink);
  color: var(--np-white);
}
.np-pband > .np-pband__img,
.np-final > .np-final__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}
:is(.np-pband__img, .np-final__img) img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.np-pband__img img { object-position: 50% 55%; }
.np-pband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(var(--np-side, 90deg), rgba(16, 22, 25, 0.88) 0%, rgba(16, 22, 25, 0.72) 36%, rgba(16, 22, 25, 0) 70%);
}
[dir="rtl"] .np-pband { --np-side: 270deg; }
.np-pband__text { max-inline-size: 50%; }
.np-sec.np-pband h2 {
  font-size: var(--np-fs-h2);
  line-height: 1.02;
  letter-spacing: calc(-0.03em * var(--np-track));
  color: var(--np-white);
}
.np-pband__text > p { margin-block-start: 22px; font-size: 17px; color: var(--np-text-invert); }
.np-pband__text > .np-btns { margin-block-start: 32px; }
:is(.np-pband__img, .np-final__img) figcaption {
  inset-inline-end: max(var(--np-gutter), calc((100% - var(--np-measure)) / 2));
  inset-block-end: 24px;
}
.np-final__img figcaption { inset-block-end: 20px; }
/* The final band's caption sits above the band's overlay: the figure no
   longer makes its own stacking context, the photo alone goes under. */
.np-final > .np-final__img { z-index: auto; }
.np-final > .np-final__img img { position: relative; z-index: -2; }


/* ---------- 18. Sections: how it works (7) --------------------------------- */

.np-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.np-track::before {
  content: "";
  position: absolute;
  inset-block-start: 24px;
  inset-inline: 0;
  block-size: 1px;
  background: var(--np-edge);
}
.np-step { position: relative; }
.np-sec .np-step__disc {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  box-sizing: border-box;
  border: 1px solid var(--np-ink);
  background: var(--np-white);
  color: var(--np-ink);
  font: 600 16px/1 var(--np-display);
  font-variant-numeric: tabular-nums;
}
.np-sec .np-step--on .np-step__disc {
  background: var(--np-green);
  border-color: var(--np-green);
  color: var(--np-white);
  box-shadow: 0 0 0 6px var(--np-white);
}
.np-step > h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-block-start: 28px;
  font-size: 20px;
  line-height: 1.2;
}
.np-step > p:not(.np-step__disc) { margin-block-start: 10px; color: var(--np-muted); }
.np-track__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-block-start: 56px;
  padding-block-start: 28px;
  border-block-start: var(--np-hair);
}
.np-sec .np-track__cta > p { margin-inline-end: auto; font: 500 20px/1.35 var(--np-display); color: var(--np-ink); }


/* ---------- 19. Sections: published fees (8) ------------------------------- */

.np-sec .np-ftable { overflow-x: auto; margin: 0; }
.np-sec .np-ftable table {
  inline-size: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
  color: var(--np-text-invert);
}
.np-sec .np-ftable :is(th, td) {
  padding: 16px 24px 16px 0;
  padding-inline: 0 24px;
  border: 0;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  vertical-align: top;
  text-align: start;
}
.np-sec .np-ftable thead { border: 0; }
.np-sec .np-ftable thead th {
  padding-block: 0 16px;
  border-block-end: 1px solid rgba(255, 255, 255, 0.22);
  font: 600 13px/1.2 var(--np-sans);
  letter-spacing: calc(0.08em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-green-bright);
}
.np-sec .np-ftable :is(th, td):last-child { padding-inline-end: 0; }
/* A group label row is a header cell spanning all three columns. */
.np-sec .np-ftable tbody th[colspan] {
  padding-block: 40px 12px;
  font: 600 12px/1 var(--np-sans);
  letter-spacing: calc(0.1em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-green-bright);
}
.np-sec .np-ftable tbody tr { transition: background-color 0.2s ease; }
.np-sec .np-ftable tbody tr:has(td):hover { background: rgba(255, 255, 255, 0.03); }
.np-sec .np-ftable tbody th:not([colspan]) { inline-size: 40%; font-weight: 500; color: var(--np-text-invert); }
.np-sec .np-ftable tbody td:nth-child(2) {
  inline-size: 20%;
  font: 600 18px/1.35 var(--np-display);
  font-variant-numeric: tabular-nums;
  color: var(--np-white);
  white-space: nowrap;
}
/* "from" is a <small> before the figure; "Quoted on the draft" is an <em>. */
.np-sec .np-ftable tbody td:nth-child(2) small {
  font: 400 13px/1 var(--np-sans);
  color: var(--np-muted-invert);
  margin-inline-end: 4px;
}
.np-sec .np-ftable tbody td:nth-child(2):has(em) {
  font: 400 15px/1.5 var(--np-sans);
  color: var(--np-muted-invert);
  white-space: normal;
}
.np-sec .np-ftable tbody td:nth-child(2) em { font-style: normal; }
.np-sec .np-ftable tbody td:nth-child(3) { inline-size: 40%; font-size: 15px; color: var(--np-muted-invert); }
.np-fees__foot { margin-block-start: 32px; gap: 16px 32px; }


/* ---------- 20. Sections: what changes the price (9) ----------------------- */

.np-factors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.np-factor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-block-size: 220px;
  padding: 28px;
  box-sizing: border-box;
  border: 1px solid var(--np-border);
  border-radius: var(--np-r-lg);
  background: var(--np-white);
}
.np-sec .np-factor__n {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 14px/1 var(--np-display);
  font-variant-numeric: tabular-nums;
  color: var(--np-muted);
}
.np-factor__n::before {
  content: "";
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  background: var(--np-green-soft);
  box-shadow: inset 0 0 0 44px var(--np-green-soft);
}
.np-factor__n::after {
  content: "";
  position: absolute;
  inline-size: 20px;
  block-size: 20px;
  margin-inline-start: 12px;
  background-color: var(--np-green-hover);
  -webkit-mask: var(--np-fi, var(--np-i-doc)) center / contain no-repeat;
  mask: var(--np-fi, var(--np-i-doc)) center / contain no-repeat;
}
.np-factor { position: relative; }
.np-factor--list { --np-fi: var(--np-i-list); }
.np-factor--stamp { --np-fi: var(--np-i-stamp); }
.np-factor > h3 { margin-block-start: auto; font-size: var(--np-fs-h3l); line-height: 1.1; }
.np-factor > p { color: var(--np-muted); }
.np-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-block-start: 16px;
  padding: 28px 32px;
  border-radius: var(--np-r-lg);
  background: var(--np-ink);
  color: var(--np-white);
}
.np-sec .np-callout > p {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 clamp(20px, 1.8vw, 24px)/1.3 var(--np-display);
  letter-spacing: calc(-0.01em * var(--np-track));
  color: var(--np-white);
}
.np-callout > p::before {
  content: "";
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  background-color: var(--np-green-bright);
  -webkit-mask: var(--np-i-info) center / contain no-repeat;
  mask: var(--np-i-info) center / contain no-repeat;
}


/* ---------- 21. Sections: three acts (10) ---------------------------------- */

.np-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.np-term { display: flex; flex-direction: column; padding: 36px 32px 32px; }
.np-term:first-child { padding-inline-start: 0; }
.np-term:last-child { padding-inline-end: 0; }
.np-term--soft,
.np-term--soft:first-child,
.np-term--soft:last-child { padding-inline: 32px; border-radius: var(--np-r-lg); background: var(--np-green-soft); }
.np-sec .np-term__word {
  padding-block-end: 24px;
  border-block-end: 1px solid var(--np-edge);
  font: 600 var(--np-fs-term)/1 var(--np-display);
  letter-spacing: calc(-0.035em * var(--np-track));
  color: var(--np-ink);
}
.np-term__def { margin-block-start: 24px; font-size: 17px; line-height: 1.6; color: var(--np-text); }
.np-sec .np-term__key {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-block-start: auto;
  padding-block-start: 24px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--np-green-hover);
}
.np-term__key::before {
  content: "";
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 2px;
  background-color: currentColor;
  -webkit-mask: var(--np-i-info) center / contain no-repeat;
  mask: var(--np-i-info) center / contain no-repeat;
}
.np-terms__foot { margin-block-start: 40px; padding-block-start: 24px; border-block-start: var(--np-hair); }
.np-terms__foot > p { color: var(--np-muted); }
.np-terms__foot > p strong { color: var(--np-ink); font-weight: 600; }


/* ---------- 22. Sections: company documents and wills, photo halves (11, 13) */

.np-pair,
.np-wills {
  position: relative;
  padding: 0;
  background: var(--np-ink);
  color: var(--np-text-invert);
}
.np-pair > .np-pair__media,
.np-wills > .np-wills__media {
  position: absolute;
  inset-block: 0;
  inline-size: 50%;
  margin: 0;
  overflow: hidden;
}
.np-pair > .np-pair__media { inset-inline-start: 0; }
.np-wills > .np-wills__media { inset-inline-end: 0; }
:is(.np-pair__media, .np-wills__media) img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.np-pair__media img { object-position: 50% 35%; }
.np-wills__media img { object-position: 30% 50%; }
.np-pair__media figcaption { inset-inline-start: max(var(--np-gutter), calc(100% - var(--np-measure) / 2)); inset-block-end: 24px; }
.np-wills__media figcaption { inset-inline-end: max(var(--np-gutter), calc(100% - var(--np-measure) / 2)); inset-block-end: 24px; }
.np-pair__grid,
.np-wills__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-block-size: 720px;
}
.np-pair__panel { grid-column: 2; padding-block: var(--np-sec); padding-inline: clamp(40px, 5.6vw, 88px) 0; }
.np-wills__text { grid-column: 1; padding-block: var(--np-sec); padding-inline: 0 clamp(40px, 5.6vw, 88px); }
:is(.np-pair__panel, .np-wills__text) > h2 {
  font-size: var(--np-fs-h2);
  line-height: 1.02;
  letter-spacing: calc(-0.03em * var(--np-track));
  max-inline-size: 15em;
  color: var(--np-white);
}
:is(.np-pair__lede, .np-wills__lede) { margin-block-start: 20px; font-size: 17px; color: var(--np-muted-invert); }
.np-svc { margin-block-start: 36px; border-block-end: var(--np-hair-d); }
.np-svc > li { margin: 0; }
.np-svc a {
  grid-template-columns: minmax(0, 1fr) auto 18px;
  gap: 16px;
  min-block-size: 56px;
  padding-block: 12px;
  border-block-start: var(--np-hair-d);
  color: var(--np-white);
  font-size: 16px;
  font-weight: 500;
}
.np-svc a::after { inline-size: 18px; block-size: 18px; background-color: var(--np-green-bright); }
.np-svc a:hover { background: rgba(255, 255, 255, 0.03); color: var(--np-white); }
.np-svc a strong,
.np-svc a em { grid-column: 2; font-style: normal; white-space: nowrap; text-align: end; }
.np-svc a strong { font: 600 17px/1.2 var(--np-display); font-variant-numeric: tabular-nums; color: var(--np-white); }
.np-svc a em { font: 400 14px/1.2 var(--np-sans); color: var(--np-muted-invert); }
:is(.np-pair__panel, .np-wills__text) > .np-caveat { margin-block-start: 20px; }
.np-wills__text > .np-btns { margin-block-start: 28px; }

.np-estate { margin-block-start: 36px; border-block-end: var(--np-hair-d); }
.np-estate__item { padding-block: 24px; border-block-start: var(--np-hair-d); }
.np-estate__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.np-sec .np-estate__row > h3 { font-size: 22px; line-height: 1.2; color: var(--np-white); }
.np-sec .np-estate__fee {
  font: 600 20px/1.2 var(--np-display);
  font-variant-numeric: tabular-nums;
  color: var(--np-green-bright);
  white-space: nowrap;
}
.np-sec .np-estate__fee--q { font: 400 14px/1.2 var(--np-sans); color: var(--np-muted-invert); }
.np-estate__item > p { margin-block-start: 8px; font-size: 15px; line-height: 1.55; color: var(--np-muted-invert); }


/* ---------- 23. Sections: corporate signings (12) -------------------------- */

.np-signs {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px 80px;
  align-items: center;
  padding-block-start: 28px;
  border-block-start: var(--np-hair);
}
.np-checks { --np-li-pad: 20px; margin-block-start: 36px; border-block-end: var(--np-hair); }
.np-checks > li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding-block: 20px;
  border-block-start: var(--np-hair);
  font-size: 17px;
  line-height: 1.55;
  color: var(--np-text);
}
.np-pull { padding-block: 6px; padding-inline: 32px 0; border-inline-start: 4px solid var(--np-green); }
.np-sec .np-pull > p {
  font: 500 28px/1.25 var(--np-display);
  letter-spacing: calc(-0.015em * var(--np-track));
  color: var(--np-ink);
}
.np-note { margin-block-start: 32px; padding-block-start: 24px; border-block-start: var(--np-hair); }
.np-sec .np-note > h3 { font: 600 17px/1.35 var(--np-display); letter-spacing: calc(-0.005em * var(--np-track)); }
.np-note > p { margin-block-start: 8px; color: var(--np-muted); }
.np-note > .np-btns { margin-block-start: 8px; }


/* ---------- 24. Sections: general or special (14) -------------------------- */

.np-vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.np-vs__card {
  --np-vs-line: var(--np-border);
  --np-vs-muted: var(--np-muted);
  display: flex;
  flex-direction: column;
  min-block-size: 440px;
  padding: clamp(28px, 3.6vw, 48px);
  box-sizing: border-box;
  border-radius: var(--np-r-lg);
}
.np-vs__card--gen { border: 1px solid var(--np-edge); background: var(--np-white); color: var(--np-text); }
.np-vs__card--spe {
  --np-vs-line: rgba(255, 255, 255, 0.26);
  --np-vs-muted: var(--np-green-soft);
  background: var(--np-green);
  color: var(--np-white);
}
.np-vs__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.np-vs__top::after {
  content: "";
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--np-vi, var(--np-i-doc)) center / contain no-repeat;
  mask: var(--np-vi, var(--np-i-doc)) center / contain no-repeat;
}
.np-vs__card--spe .np-vs__top { --np-vi: var(--np-i-list); }
.np-vs__card--spe .np-tag { background: var(--np-green-hover); color: var(--np-white); }
.np-sec .np-vs__card > h3 {
  margin-block-start: 28px;
  font: 600 clamp(48px, 5.6vw, 80px)/0.92 var(--np-display);
  letter-spacing: calc(-0.04em * var(--np-track));
  color: inherit;
}
.np-sec .np-vs__card--gen > h3 { color: var(--np-ink); }
.np-vs__def { margin-block-start: 24px; font-size: 18px; line-height: 1.6; }
.np-vs__facts { margin-block-start: auto; padding-block-start: 36px; }
.np-vs__facts > li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding-block: 14px;
  border-block-start: 1px solid var(--np-vs-line);
  font-size: 14px;
  color: var(--np-vs-muted);
}
.np-vs__facts > li strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--np-text); }
.np-vs__card--spe .np-vs__facts > li strong { color: var(--np-white); }
.np-sec .np-vs__or {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  margin-block-start: -28px;
  margin-inline-start: -28px;
  background: var(--np-ink);
  color: var(--np-white);
  font: 600 16px/1 var(--np-display);
  box-shadow: 0 0 0 8px var(--np-white);
  z-index: 1;
}
.np-vs__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-block-start: 16px;
  padding: 24px 28px;
  border-radius: var(--np-r-lg);
  background: var(--np-ground);
}
.np-sec .np-vs__foot > p { font: 500 clamp(18px, 1.6vw, 21px)/1.35 var(--np-display); color: var(--np-ink); }


/* ---------- 25. Sections: every kind of power of attorney (15) ------------- */

.np-poa { display: grid; grid-template-columns: 4fr 8fr; gap: 16px 48px; align-items: start; }
.np-poa__fee {
  padding: 32px;
  border: 1px solid var(--np-border);
  border-radius: var(--np-r-lg);
  background: var(--np-white);
}
.np-sec .np-poa__from {
  display: block;
  font: 600 13px/1 var(--np-sans);
  letter-spacing: calc(0.06em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-muted);
}
.np-sec .np-poa__big {
  margin-block-start: 12px;
  font: 600 52px/1 var(--np-display);
  letter-spacing: calc(-0.03em * var(--np-track));
  font-variant-numeric: tabular-nums;
  color: var(--np-ink);
}
.np-poa__big small { font-size: 16px; }
.np-poa__note { margin-block-start: 16px; color: var(--np-text); }
.np-poa__fee > .np-caveat { margin-block-start: 20px; padding-block-start: 20px; border-block-start: var(--np-hair); }
.np-poa__fee > .np-btns { margin-block-start: 8px; }
.np-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.np-chips > li { margin: 0; }
.np-chips a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-block-size: 48px;
  padding-block: 0;
  padding-inline: 18px 16px;
  box-sizing: border-box;
  border: 1px solid var(--np-border);
  border-radius: var(--np-r-sm);
  background: var(--np-white);
  color: var(--np-ink);
  font: 500 15px/1.25 var(--np-sans);
  text-decoration: none;
  transition: border-color 0.22s ease, color 0.22s ease;
}
.np-chips a::after {
  color: var(--np-green);
  opacity: 0;
  transform: translateX(calc(-4px * var(--np-dir))) scaleX(var(--np-dir));
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.np-chips a:hover { border-color: var(--np-green); color: var(--np-green-hover); }
.np-chips a:hover::after { opacity: 1; transform: scaleX(var(--np-dir)); }


/* ---------- 26. Sections: Arabic and English, the drawn sheet (16) --------- */

.np-bi { display: grid; grid-template-columns: 5fr 7fr; gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.np-bi__ticks { margin-block-start: 32px; }
.np-stage { padding: clamp(20px, 4vw, 56px); border-radius: var(--np-r-lg); background: var(--np-ground); }
.np-sheet {
  position: relative;
  padding: 28px 32px 32px;
  border-radius: var(--np-r-lg);
  background: var(--np-white);
  box-shadow: var(--np-shadow);
  font-family: var(--np-sans);
}
.np-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block-end: 20px;
  border-block-end: var(--np-hair);
  color: var(--np-ink);
}
.np-sheet__head .np-brand__mark { inline-size: 28px; block-size: 28px; }
.np-sheet__title { flex: 1; display: grid; gap: 8px; justify-items: center; }
.np-sheet__cols { display: grid; grid-template-columns: 1fr 1fr; }
/* The sheet is always left to right (English left, Arabic right), and its
   Arabic column sets dir="rtl" on itself, so the columns use physical sides. */
.np-sheet__col { padding: 22px 28px 6px 0; }
.np-sheet__col + .np-sheet__col { padding: 22px 0 6px 28px; border-left: var(--np-hair); }
.np-sheet__lab {
  margin: 0 0 6px;
  font: 600 12px/1.2 var(--np-sans);
  letter-spacing: calc(0.08em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-muted);
}
.np-sheet__lab[lang="ar"] { font-size: 14px; letter-spacing: 0; text-transform: none; }
.np-sk { display: block; block-size: 8px; margin-block-start: 12px; border-radius: var(--np-r-sm); background: var(--np-border); }
.np-sk--t { block-size: 10px; margin: 0; background: var(--np-tint); }
.np-w100 { inline-size: 100%; } .np-w94 { inline-size: 94%; } .np-w88 { inline-size: 88%; } .np-w80 { inline-size: 80%; }
.np-w72 { inline-size: 72%; } .np-w60 { inline-size: 60%; } .np-w48 { inline-size: 48%; } .np-w36 { inline-size: 36%; }
.np-sheet__hl {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 18px -14px 6px;
  padding: 22px 14px 16px;
  border-radius: var(--np-r-sm);
  background: var(--np-green-soft);
}
.np-sheet__hl > div { padding-right: 28px; }
.np-sheet__hl > div + div { padding: 0 0 0 28px; }
.np-sheet__hl .np-sk { background: rgba(10, 125, 87, 0.3); }
.np-sheet__tag {
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 26px;
  padding: 0 10px;
  border-radius: var(--np-r-sm);
  background: var(--np-green);
  color: var(--np-white);
  font: 600 12px/1 var(--np-sans);
  letter-spacing: calc(0.02em * var(--np-track));
  white-space: nowrap;
}
.np-sheet__tag .np-ico { inline-size: 14px; block-size: 14px; }
.np-sheet__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 56px; margin-block-start: 28px; }
.np-sheet__sign span { display: block; block-size: 1px; margin-block-end: 10px; background: var(--np-edge); }
.np-sheet__sign i { display: block; }


/* ---------- 27. Sections: what we need (17) -------------------------------- */

.np-need {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--np-border);
  border-radius: var(--np-r-lg);
  background: var(--np-white);
}
.np-need__col { padding: 8px clamp(24px, 3vw, 40px); }
.np-need__col + .np-need__col { border-inline-start: var(--np-hair); }
.np-need__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 12px;
  padding-block: 22px;
  border-block-start: var(--np-hair);
}
.np-need__row:first-child { border-block-start: 0; }
.np-sec .np-need__n {
  grid-row: 1 / span 2;
  font: 600 16px/1.5 var(--np-display);
  letter-spacing: calc(0.02em * var(--np-track));
  font-variant-numeric: tabular-nums;
  color: var(--np-green);
}
.np-need__row > :not(.np-need__n) { grid-column: 2; }
.np-sec .np-need__row > h3 { font: 600 17px/1.4 var(--np-sans); letter-spacing: 0; }
.np-need__row > p:not(.np-need__n) { margin-block-start: 4px; font-size: 15px; line-height: 1.55; color: var(--np-muted); }
.np-need__foot { margin-block-start: 24px; }
.np-need__foot > p { color: var(--np-muted); }


/* ---------- 28. Sections: what to bring (18) ------------------------------- */

.np-bring { display: grid; grid-template-columns: 5fr 7fr; gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.np-bring__fig img { aspect-ratio: 4 / 5; object-position: 50% 60%; }
.np-bring__list { --np-li-pad: 18px; margin-block-start: 28px; border-block-end: var(--np-hair); }
.np-bring__list > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  align-items: flex-start;
  padding-block: 18px;
  padding-inline-start: 40px;
  border-block-start: var(--np-hair);
  font-size: 17px;
  line-height: 1.5;
}
.np-bring__list > li::before { position: absolute; inset-inline-start: 0; inset-block-start: 18px; }
.np-bring__list small { display: block; flex-basis: 100%; margin-block-start: 2px; font-size: 14px; color: var(--np-muted); }
.np-bring__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-block-start: 28px;
  padding: 24px;
  border-radius: var(--np-r-lg);
  background: var(--np-ground);
}
.np-sec .np-bring__note > p { flex: 1 1 280px; font: 500 19px/1.4 var(--np-display); color: var(--np-ink); }


/* ---------- 29. Sections: online (19) -------------------------------------- */

.np-online {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px clamp(40px, 6vw, 96px);
  align-items: center;
  padding-block-start: 28px;
  border-block-start: var(--np-hair);
}
.np-online__lede { margin-block-start: 20px; font-size: 17px; color: var(--np-muted); }
.np-online__pts { margin-block-start: 28px; }
.np-online .np-btns { margin-block-start: 32px; }
.np-session {
  overflow: hidden;
  border-radius: var(--np-r-lg);
  background: var(--np-ink);
  color: var(--np-text-invert);
  box-shadow: var(--np-shadow);
  font-family: var(--np-sans);
}
.np-session__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-block-end: var(--np-hair-d);
  font: 600 15px/1 var(--np-sans);
  color: var(--np-white);
}
.np-session__bar > .np-ico { color: var(--np-green-bright); }
.np-session__state { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font: 500 13px/1 var(--np-sans); color: var(--np-muted-invert); }
.np-session__stage { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; padding: 20px; }
.np-tile {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 180px;
  border-radius: var(--np-r);
  background: var(--np-ink-2);
  color: var(--np-muted-invert);
}
.np-tile > .np-ico { inline-size: 48px; block-size: 48px; }
.np-tile__lab { position: absolute; inset-inline-start: 12px; inset-block-end: 10px; font-size: 12px; color: var(--np-muted-invert); }
.np-tile--doc { align-content: center; gap: 8px; justify-items: stretch; padding: 28px 24px; }
.np-tile--doc .np-sk { margin: 0; block-size: 6px; background: rgba(255, 255, 255, 0.14); }
.np-session__steps { margin: 0; padding: 0; list-style: none; }
.np-session__steps > li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px 20px;
  border-block-start: var(--np-hair-d);
  font-size: 16px;
  color: var(--np-white);
}
.np-session__tick {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  flex: none;
  border-radius: 50%;
  background: rgba(23, 192, 137, 0.16);
  color: var(--np-green-bright);
}
.np-session__tick .np-ico { inline-size: 16px; block-size: 16px; }


/* ---------- 30. Sections: home visit (20) ---------------------------------- */

.np-homev { display: grid; grid-template-columns: 7fr 5fr; gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.np-sec .np-homev h2 { font-size: clamp(38px, 4.8vw, 70px); line-height: 0.98; letter-spacing: calc(-0.035em * var(--np-track)); max-inline-size: 15em; }
.np-sec .np-homev__stmt {
  margin-block-start: 28px;
  font: 500 clamp(20px, 1.8vw, 24px)/1.4 var(--np-display);
  letter-spacing: calc(-0.01em * var(--np-track));
  color: var(--np-text);
}
.np-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 28px; }
.np-sec .np-tags > li { background: var(--np-white); color: var(--np-green-hover); border: 1px solid var(--np-tint); }
.np-tell {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--np-tint);
  border-radius: var(--np-r-lg);
  background: var(--np-white);
  box-shadow: var(--np-shadow);
}
.np-tell > h3 { font-size: 22px; }
.np-tell__list { margin-block-start: 12px; }
.np-tell__list > li,
.np-addr > li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding-block: 18px;
  border-block-start: var(--np-hair);
  font-size: 15px;
  line-height: 1.55;
  color: var(--np-muted);
}
.np-tell__list > li:first-child,
.np-addr > li:first-child { border-block-start: 0; }
.np-tell__list > li::before,
.np-addr > li::before {
  content: "";
  grid-row: 1 / span 2;
  inline-size: 44px;
  block-size: 44px;
  background: var(--np-green-soft);
}
.np-tell__list > li::after,
.np-addr > li::after {
  content: "";
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 30px;
  inline-size: 20px;
  block-size: 20px;
  background-color: var(--np-green-hover);
  -webkit-mask: var(--np-li-ico, var(--np-i-pin)) center / contain no-repeat;
  mask: var(--np-li-ico, var(--np-i-pin)) center / contain no-repeat;
}
.np-tell__list > li:first-child::after,
.np-addr > li:first-child::after { inset-block-start: 30px; }
.np-li-pin { --np-li-ico: var(--np-i-pin); }
.np-li-calendar { --np-li-ico: var(--np-i-calendar); }
.np-li-users { --np-li-ico: var(--np-i-users); }
.np-li-clock { --np-li-ico: var(--np-i-clock); }
.np-li-phone { --np-li-ico: var(--np-i-phone); }
.np-tell__list strong { display: block; grid-column: 2; font: 600 17px/1.3 var(--np-display); color: var(--np-ink); }
.np-tell__list > li { grid-auto-flow: row; }
.np-tell .np-btns { margin-block-start: 12px; }
.np-tell .np-btns > .wp-block-button { inline-size: 100%; }
.np-tell .np-btn > .wp-block-button__link.wp-element-button { inline-size: 100%; }


/* ---------- 31. Sections: how long it takes (21) --------------------------- */

.np-time__cols {
  --np-split: 41.6667%;
  display: grid;
  grid-template-columns: 5fr 7fr;
}
.np-time__cols::before {
  content: "";
  grid-column: 1 / -1;
  block-size: 14px;
  border-radius: var(--np-r-sm);
  background: linear-gradient(var(--np-side, 90deg), var(--np-green) 0 calc(var(--np-split) - 3px), transparent calc(var(--np-split) - 3px) calc(var(--np-split) + 3px), var(--np-edge) calc(var(--np-split) + 3px) 100%);
}
[dir="rtl"] .np-time__cols { --np-side: 270deg; }
.np-time__col { padding-block-start: 32px; padding-inline: 0 48px; }
.np-time__col + .np-time__col { padding-inline: 48px 0; border-inline-start: var(--np-hair); }
.np-sec .np-time__col > h3 { display: flex; align-items: center; gap: 12px; font-size: var(--np-fs-h3l); }
.np-time__col > h3::before {
  content: "";
  inline-size: 14px;
  block-size: 14px;
  flex: none;
  border-radius: var(--np-r-sm);
  background: var(--np-green);
}
.np-time__col + .np-time__col > h3::before { background: var(--np-edge); }
.np-time__col > p { margin-block-start: 12px; font-size: 17px; }
.np-time__col > ul { margin-block-start: 20px; }
.np-time__col li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-block: 12px;
  border-block-start: var(--np-hair);
  font-size: 16px;
}
.np-time__col li::before {
  content: "";
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 3px;
  background-color: var(--np-green);
  -webkit-mask: var(--np-i-check) center / contain no-repeat;
  mask: var(--np-i-check) center / contain no-repeat;
}
.np-time__col + .np-time__col li::before {
  background-color: var(--np-muted);
  -webkit-mask-image: var(--np-i-clock);
  mask-image: var(--np-i-clock);
}
.np-time__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-block-start: 48px;
  padding: 22px 28px;
  border-radius: var(--np-r-lg);
  background: var(--np-ground);
}
.np-sec .np-time__note > p { font: 500 18px/1.4 var(--np-display); color: var(--np-ink); }


/* ---------- 32. Sections: documents for companies (22) --------------------- */

.np-co {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 0 40px;
  border-block-end: var(--np-hair-d);
}
.np-co > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-block: 18px;
  border-block-start: var(--np-hair-d);
  font-size: 16px;
  line-height: 1.45;
  color: var(--np-text-invert);
}
.np-co > li::before {
  content: "";
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: 4px;
  background-color: var(--np-green-bright);
  -webkit-mask: var(--np-i-arrow) center / contain no-repeat;
  mask: var(--np-i-arrow) center / contain no-repeat;
  transform: scaleX(var(--np-dir));
}
.np-co__foot { margin-block-start: 36px; gap: 16px 32px; }
.np-sec .np-co__foot > p { font: 500 20px/1.35 var(--np-display); color: var(--np-white); }


/* ---------- 33. Sections: reviews (23) ------------------------------------- */

.np-rev { display: grid; grid-template-columns: 5fr 7fr; gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
.np-rev__feat { position: sticky; inset-block-start: calc(var(--np-hdr) + 32px + var(--wp-admin--admin-bar--height, 0px)); margin: 0; }
.np-rev__mark {
  display: block;
  block-size: 76px;
  margin-block-end: 14px;
  font: 700 150px/1 var(--np-display);
  color: var(--np-green);
}
.np-sec .np-rev__feat blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font: 500 var(--np-fs-quote)/1.32 var(--np-display);
  letter-spacing: calc(-0.015em * var(--np-track));
  color: var(--np-ink);
  font-style: normal;
}
.np-rev__who,
.np-rev__item figcaption { display: flex; flex-direction: column; gap: 2px; }
.np-rev__who { margin-block-start: 28px; padding-block-start: 20px; border-block-start: var(--np-hair); }
.np-rev__who b,
.np-rev__item figcaption b { font-weight: 600; color: var(--np-ink); }
.np-rev__who span,
.np-rev__item figcaption span { font-size: 13px; color: var(--np-muted); }
.np-rev__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.np-rev__item { display: flex; flex-direction: column; margin: 0; padding-block: 24px 28px; border-block-start: var(--np-hair); }
.np-sec .np-rev__item blockquote { margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.6; font-style: normal; color: var(--np-text); }
.np-rev__item figcaption { margin-block-start: auto; padding-block-start: 16px; }
.np-rev__item figcaption b { font-size: 15px; }


/* ---------- 34. Sections: questions (24) ----------------------------------- */

.np-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
.np-faq__col { border-block-end: 1px solid var(--np-tint); }
/* The items also carry dns-openqa__item, the class seo.php reads for the
   FAQPage schema, so every rule that class sets in dns-skin.css is restated. */
.np-faq .np-faq__item {
  display: block;
  overflow: visible;
  padding: 0;
  border: 0;
  border-block-start: 1px solid var(--np-tint);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--np-text);
}
.np-faq .np-faq__item[open] { padding: 0; background: transparent; border-color: var(--np-tint); }
.np-faq .np-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-block-size: 44px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  background: transparent;
  font: 600 18px/1.35 var(--np-display);
  letter-spacing: calc(-0.01em * var(--np-track));
  color: var(--np-ink);
  transition: color 0.2s ease;
}
.np-faq .np-faq__item > summary::-webkit-details-marker { display: none; }
.np-faq .np-faq__item > summary:hover,
.np-faq .np-faq__item[open] > summary:hover { color: var(--np-green-hover); background: transparent; }
.np-faq .np-faq__item[open] > summary { padding-block-end: 22px; color: var(--np-ink); }
.np-faq .np-faq__item > summary:focus-visible { outline: 3px solid var(--np-green); outline-offset: 2px; background: transparent; }
.np-faq .np-faq__item > summary::after {
  content: "";
  position: static;
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  box-sizing: border-box;
  border: 1px solid var(--np-border-strong);
  background-color: var(--np-white);
  background-image: linear-gradient(var(--np-ink), var(--np-ink)), linear-gradient(var(--np-ink), var(--np-ink));
  background-size: 12px 1.5px, 1.5px 12px;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--np-ink);
  transform: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--np-ease);
}
.np-faq .np-faq__item[open] > summary::after {
  transform: rotate(45deg);
  border-color: var(--np-green);
  background-color: var(--np-green);
  background-image: linear-gradient(var(--np-white), var(--np-white)), linear-gradient(var(--np-white), var(--np-white));
}
.np-faq .np-faq__item > :not(summary) { margin: 0; padding-block: 0 26px; padding-inline: 0 56px; color: var(--np-text); }
.np-faq__more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-block-start: 36px; }
.np-sec .np-faq__more > p { font: 500 20px/1.35 var(--np-display); color: var(--np-ink); }


/* ---------- 35. Sections: written quote, the form (25) --------------------- */

.np-quote {
  display: grid;
  grid-template-columns: 8fr 4fr;
  overflow: hidden;
  border: 1px solid var(--np-border);
  border-radius: var(--np-r-lg);
  box-shadow: var(--np-shadow);
}
.np-quote__form { min-inline-size: 0; background: var(--np-white); }
.np-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
  padding: clamp(24px, 3.6vw, 48px);
  background: var(--np-white);
  font-family: var(--np-sans);
}
.np-form__full { grid-column: 1 / -1; }
.np-form__group {
  grid-column: 1 / -1;
  margin: 0;
  padding-block-start: 6px;
  font: 600 13px/1 var(--np-sans);
  letter-spacing: calc(0.1em * var(--np-track));
  text-transform: var(--np-upper);
  color: var(--np-green-hover);
}
.np-field { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; margin: 0; }
.np-field > label { font: 600 14px/1.3 var(--np-sans); color: var(--np-ink); }
.np-field__opt { font-weight: 400; color: var(--np-muted); }
.np-field__hint { font-size: 13px; line-height: 1.45; color: var(--np-muted); }
.np-field__err { font-size: 13px; line-height: 1.45; font-weight: 600; color: var(--dns-stop); }
.np-field__err:empty { display: none; }
.np-form .np-input {
  inline-size: 100%;
  min-block-size: 48px;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--np-border-strong);
  border-radius: var(--np-r);
  background: var(--np-white);
  color: var(--np-ink);
  font: 400 16px/1.4 var(--np-sans);
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.np-form .np-input:hover { border-color: var(--np-ink); }
.np-form .np-input:focus { border-color: var(--np-green); outline: 3px solid var(--np-green); outline-offset: 2px; background: var(--np-white); color: var(--np-ink); }
.np-form .np-input[aria-invalid="true"] { border-color: var(--dns-stop); }
.np-form textarea.np-input { min-block-size: 128px; resize: vertical; }
.np-select { position: relative; }
.np-form .np-select select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer; }
.np-select .np-ico {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 14px;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: -9px;
  color: var(--np-muted);
  pointer-events: none;
}
.np-form__pot { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.np-form__end {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-block-start: 22px;
  border-block-start: var(--np-hair);
}
.np-form__note { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.5; color: var(--np-muted); }
.np-form__note::before {
  content: "";
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  background-color: var(--np-green);
  -webkit-mask: var(--np-i-info) center / contain no-repeat;
  mask: var(--np-i-info) center / contain no-repeat;
}
.np-form .np-btn .np-ico { transform: scaleX(var(--np-dir)); }
.np-form__alert {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--np-r);
  border-inline-start: 4px solid var(--dns-stop);
  background: var(--np-ground);
  color: var(--np-ink);
  font-size: 15px;
}
.np-form__alert[hidden] { display: none; }
.np-form [hidden] { display: none; }

/* The confirmation, in the place of the form. */
.np-done {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3.6vw, 48px);
  background: var(--np-white);
  font-family: var(--np-sans);
  color: var(--np-text);
}
.np-done:focus { outline: none; }
.np-done { scroll-margin-block-start: calc(var(--np-hdr) + var(--wp-admin--admin-bar--height, 0px) + 24px); }
.np-sec .np-done > h3 { font: 600 32px/1.1 var(--np-display); letter-spacing: calc(-0.02em * var(--np-track)); color: var(--np-ink); }
.np-done__ref strong { color: var(--np-ink); }
.np-done > p { margin: 0; }
.np-done .np-btns { margin-block-start: 8px; }

.np-aside {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.6vw, 44px);
  background: var(--np-ink);
  color: var(--np-text-invert);
}
.np-aside > h3 { font-size: 24px; line-height: 1.15; color: var(--np-white); }
.np-aside__lede { margin-block-start: 10px; font-size: 15px; color: var(--np-muted-invert); }
.np-aside__list { margin-block: 24px; }
.np-aside__list > li {
  position: relative;
  padding-block: 16px;
  padding-inline-start: 34px;
  border-block-start: var(--np-hair-d);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.np-aside__list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 18px;
  inline-size: 20px;
  block-size: 20px;
  background-color: var(--np-green-bright);
  -webkit-mask: var(--np-li-ico, var(--np-i-pin)) center / contain no-repeat;
  mask: var(--np-li-ico, var(--np-i-pin)) center / contain no-repeat;
}
.np-li-wa { --np-li-ico: var(--np-i-wa); }
.np-li-mail { --np-li-ico: var(--np-i-mail); }
.np-aside__list small { display: block; margin-block-end: 2px; font-size: 13px; color: var(--np-muted-invert); }
.np-aside__list a { color: var(--np-white); font-weight: 600; }
.np-aside__list a:hover { color: var(--np-green-bright); }
.np-sec .np-aside__resp {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-block-start: auto;
  padding: 16px;
  border-radius: var(--np-r);
  background: var(--np-ink-2);
  font-size: 14px;
  color: var(--np-white);
}
.np-aside__resp::before { content: ""; inline-size: 8px; block-size: 8px; flex: none; border-radius: 50%; background: var(--np-green-bright); }


/* ---------- 36. Sections: visit the office (26) ---------------------------- */

.np-visit {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px clamp(40px, 5vw, 80px);
  align-items: center;
  padding-block-start: 28px;
  border-block-start: var(--np-hair);
}
.np-visit__fig img { aspect-ratio: 4 / 3; object-position: 40% 50%; }
.np-addr {
  margin-block-start: 28px;
  padding: 8px clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--np-border);
  border-radius: var(--np-r-lg);
  background: var(--np-white);
}
.np-addr > li { color: var(--np-text); }
.np-addr strong { display: block; grid-column: 2; font: 600 16px/1.35 var(--np-sans); color: var(--np-ink); }
.np-addr a { font-weight: 600; }
/* Phone, WhatsApp and email links set inside text: a 44px tall tap area.
   Block padding on an inline box does not move the line, and where the
   link is a grid item (the address rows) the negative margin takes the
   padding back, so the text stays where it was. */
:is(.np-addr, .np-aside__list) a { padding-block: 12px; margin-block: -12px; }
.np-visit .np-btns { margin-block-start: 24px; }


/* ---------- 37. Sections: final call to action (27) ------------------------ */

.np-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(104px, 12vw, 184px);
  text-align: center;
  background: var(--np-ink);
  color: var(--np-white);
}
.np-final__img img { object-position: 50% 45%; }
.np-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 22, 25, 0.86) 0%, rgba(16, 22, 25, 0.8) 50%, rgba(16, 22, 25, 0.93) 100%);
}
.np-sec.np-final h2 {
  font-size: var(--np-fs-cta);
  line-height: 0.98;
  letter-spacing: calc(-0.035em * var(--np-track));
  color: var(--np-white);
  text-align: center;
}
.np-final h2 .np-hl { display: inline-block; }
.np-final .np-btns { justify-content: center; margin-block-start: 44px; }
.np-final__hours { margin-block-start: 28px; font-size: 14px; color: var(--np-muted-invert); text-align: center; }

/* Grid items that only hold other blocks: they may shrink below their
   content's width, so a long word wraps instead of widening the grid. */
.np-signs__main,
.np-signs__aside,
.np-bi__text,
.np-bring__text,
.np-online__text,
.np-homev__text,
.np-visit__text,
.np-poa__price,
.np-ftr__brandcol,
.np-ftr__col,
.np-menu__nav { min-inline-size: 0; }
.np-hero__img { display: block; }
.np-rail__cell--talk { cursor: default; }
.np-actionbar__call .np-ico { color: var(--np-white); }

/* The featured review's quote mark is drawn here, so no glyph sits in the
   block's text. On the Arabic route the mark turns to face the text. */
.np-rev__mark::before { content: "\201C"; }
[dir="rtl"] .np-rev__mark::before { content: "\201D"; }


/* ---------- 38. Responsive ------------------------------------------------- */

@media (max-width: 1280px) {
  .np-topbar__mail { display: none; }
}

/* From 1024 to 1180 the primary nav stays and the header's Call and
   WhatsApp buttons step aside (both stay in the top bar), so the services
   panel works on a 1024 screen. Below 1024 the menu button takes over. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .np-hdr__cta { display: none; }
  .np-hdr__in { gap: 20px; }
  .np-nav__link { padding: 0 10px; }
  .np-nav__link::after { inset-inline: 10px; }
}

@media (max-width: 1023px) {
  .np-nav { display: none; }
  .np-hdr .np-menu-btn { display: inline-flex; }
  .np-hdr__cta { margin-inline-start: auto; }
  /* Touch screens: the hero's phone and WhatsApp links are 44px tall and
     no longer sit 4px apart. */
  .np-rail__phone { min-block-size: 44px; align-items: center; margin-block-start: 2px; }
  .np-rail__talk { margin-block-start: 0; }
  .np-rail__talk a { min-block-size: 44px; }
}

@media (max-width: 1100px) {
  .np-topbar__hours { display: none; }
  .np-about__head { grid-column: 1 / -1; }
  .np-about__list { grid-column: 1 / 8; }
  .np-about__fig { grid-column: 8 / 13; }
  .np-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-co { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); }
  .np-ftr__grid { grid-template-columns: 1fr 1fr; }
  .np-poa { grid-template-columns: 1fr; }
  .np-poa__fee { display: grid; grid-template-columns: auto 1fr; gap: 8px 32px; align-items: end; }
  .np-poa__fee > :is(.np-caveat, .np-btns) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .np-rail { grid-template-columns: 1fr 1fr; }
  .np-rail__cell:nth-child(3) { border-inline-start: 0; }
  .np-rail__cell:nth-child(n+3) { border-block-start: 1px solid rgba(255, 255, 255, 0.18); }
  .np-shead { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .np-ways { grid-template-columns: 1fr; }
  .np-way,
  .np-way:first-child,
  .np-way:last-child { padding: 40px 0; border-inline-start: 0; border-block-start: var(--np-hair-d); }
  .np-way:first-child { border-block-start: 0; }
  .np-way--on,
  .np-way--on:first-child { margin-inline: calc(-1 * var(--np-gutter)); padding: 40px var(--np-gutter); border-block-start-color: transparent; }
  .np-way--on + .np-way { border-block-start-color: transparent; }
  .np-sec .np-way__num { font-size: 104px; }
  .np-pband__text { max-inline-size: none; }
  .np-pband::before { background: linear-gradient(var(--np-side, 90deg), rgba(16, 22, 25, 0.9) 0%, rgba(16, 22, 25, 0.78) 60%, rgba(16, 22, 25, 0.45) 100%); }
  .np-track { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .np-track::before { display: none; }
  .np-factors { grid-template-columns: 1fr; }
  .np-factor { min-block-size: 0; }
  .np-terms { grid-template-columns: 1fr; }
  .np-term,
  .np-term:first-child,
  .np-term:last-child { padding: 28px 0; }
  .np-term--soft,
  .np-term--soft:first-child,
  .np-term--soft:last-child { padding: 28px; }
  .np-pair > .np-pair__media,
  .np-wills > .np-wills__media { position: relative; inset: auto; inline-size: 100%; block-size: clamp(300px, 56vw, 460px); }
  .np-pair__grid,
  .np-wills__grid { grid-template-columns: 1fr; min-block-size: 0; }
  .np-pair__panel,
  .np-wills__text { grid-column: 1; padding: 64px 0 72px; }
  .np-pair__media figcaption { inset-inline-start: var(--np-gutter); }
  .np-wills__media figcaption { inset-inline-end: var(--np-gutter); }
  .np-signs,
  .np-bi,
  .np-bring,
  .np-online,
  .np-homev,
  .np-rev,
  .np-visit { grid-template-columns: 1fr; }
  .np-rev__feat { position: static; }
  .np-vs { grid-template-columns: 1fr; }
  .np-sec .np-vs__or { position: relative; inset: auto; margin: -36px auto; }
  .np-vs__card { min-block-size: 0; }
  .np-need { grid-template-columns: 1fr; }
  /* Stacked, the two columns read as one list: the rule between them is
     an ordinary row rule, inset like the others, not a full width seam. */
  .np-need__col + .np-need__col { border-inline-start: 0; border-block-start: 0; padding-block-start: 0; }
  .np-need__col:has(+ .np-need__col) { padding-block-end: 0; }
  .np-need__col + .np-need__col > .np-need__row:first-child { border-block-start: var(--np-hair); }
  .np-s-white .np-need--i .np-need__col + .np-need__col > .np-need__row:first-child { border-block-start-color: var(--np-tint); }
  .np-quote { grid-template-columns: 1fr; }
  .np-time__cols { --np-split: 50%; grid-template-columns: 1fr 1fr; }
  .np-time__col { padding-inline-end: 24px; }
  .np-time__col + .np-time__col { padding-inline-start: 24px; }
  .np-faq { grid-template-columns: 1fr; }
  .np-faq__col + .np-faq__col { border-block-start: 0; }
  .np-faq__col:first-child { border-block-end: 0; }
  .np-bring__fig img,
  .np-about__fig img { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .np-topbar__lang { display: none; }
  .np-topbar__list { gap: 20px; }
  .np-hdr__cta { display: none; }
  .np-hdr .np-menu-btn { margin-inline-start: auto; padding: 0; inline-size: 44px; }
  .np-hdr__in { gap: 16px; }
  .np-brand__strap { font-size: 11px; letter-spacing: calc(0.05em * var(--np-track)); }

  .np-hero { min-block-size: 0; }
  .np-hero__media::after { background: linear-gradient(180deg, rgba(16, 22, 25, 0.72) 0%, rgba(16, 22, 25, 0.6) 45%, rgba(16, 22, 25, 0.78) 72%, rgba(16, 22, 25, 0.95) 100%); }
  .np-hero__grid { padding-block: calc(var(--np-hdr) + 56px) 28px; }
  .np-hero__foot { position: static; order: 1; margin-block-start: 0; padding: 0; }
  .np-hero__title { font-size: 44px; line-height: 0.96; }
  .np-hero__lede { order: 2; align-self: stretch; inline-size: auto; margin-block-start: 24px; }
  .np-hero__lede p { font-size: 17px; }
  .np-hero__cap {
    top: calc(var(--np-hdr) + 18px);
    bottom: auto;
    right: var(--np-gutter);
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 10px;
  }
  [dir="rtl"] .np-hero__cap { right: auto; left: var(--np-gutter); }
  .np-rail { --np-rail-pad: 16px; order: 3; margin-block-start: 32px; margin-inline: 0; }
  .np-rail__cell { padding: 18px 16px 20px; }
  .np-rail__cell:nth-child(odd) { padding-inline-start: 0; }
  .np-rail__cell:nth-child(n+3) { grid-column: 1 / -1; padding-inline-start: 0; border-inline-start: 0; }
  .np-rail__arrow { inset-inline-end: 0; }
  .np-rail__cell:nth-child(2) .np-rail__arrow { inset-inline-end: 16px; }
  .np-rail__title { font-size: 18px; margin-block-start: 10px; }
  .np-rail__line { font-size: 13px; }
  /* On a phone the rail sits on the lighter middle of the photo: the small
     numerals take the white of the titles. */
  .np-rail__idx { color: var(--np-white); }

  .np-auth__wrap { grid-template-columns: 1fr; gap: 16px; }
  .np-auth .np-auth__title { padding: 0; border: 0; }
  .np-logos { gap: 40px; padding-inline-end: 40px; }
  .np-logos img { block-size: 36px; }
  .np-logos .np-lg-tall { block-size: 44px; }
  .np-logos .np-lg-mid { block-size: 40px; }
  .np-logos .np-lg-wide { block-size: 30px; }

  .np-about { grid-template-columns: 1fr; gap: 32px; }
  .np-about__head,
  .np-about__list,
  .np-about__fig { grid-column: auto; }
  .np-sec :where(h2) { text-wrap: wrap; }

  .np-bento { grid-template-columns: 1fr; }
  .np-card { min-block-size: 0; }
  .np-card--photo { min-block-size: 520px; }
  .np-card__big { font-size: 42px; }
  .np-card__list a { grid-template-columns: minmax(0, 1fr) 16px; row-gap: 2px; }
  .np-card__list a :is(strong, em) { grid-column: 1; grid-row: 2; text-align: start; }
  .np-card__list a::after { grid-column: 2; grid-row: 1 / span 2; }
  .np-card--photo .np-card__list a::after { grid-row: auto; }

  .np-sec .np-way__num { font-size: 88px; }
  .np-pband { min-block-size: 0; padding-block: 72px 96px; }

  .np-track { grid-template-columns: 1fr; gap: 0; }
  .np-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 20px; padding-block-end: 28px; }
  .np-step::before { content: ""; position: absolute; inset-block: 48px 0; inset-inline-start: 24px; inline-size: 1px; background: var(--np-edge); }
  .np-step:last-child::before { display: none; }
  .np-step > h3 { grid-column: 2; margin-block-start: 10px; }
  .np-step > p:not(.np-step__disc) { grid-column: 2; }
  .np-track__cta { margin-block-start: 24px; }

  /* The fee table becomes one card per row. dns-poster.js copies each column
     label into data-label, so the labels come from the table head, in the
     page's own language. */
  .np-sec .np-ftable thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .np-sec .np-ftable :is(table, tbody, tr, th, td) { display: block; }
  .np-sec .np-ftable tbody th[colspan] { padding: 32px 0 12px; }
  /* A wrapping row, not a fixed 104px column: a figure keeps its 104px
     beside the note, a fee cell that is a sentence takes the full width
     and the note moves under it, so no cell is squeezed to a word a line. */
  .np-sec .np-ftable tbody tr:has(td) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 16px;
    margin-block-start: 8px;
    padding: 16px;
    border-radius: var(--np-r);
    background: var(--np-ink-2);
  }
  .np-sec .np-ftable tbody tr:has(td) :is(th, td) { flex: 1 1 100%; inline-size: auto; padding: 0; border: 0; }
  .np-sec .np-ftable tbody tr:has(td) td:empty { display: none; }
  .np-sec .np-ftable tbody th:not([colspan]) { flex-basis: 100%; inline-size: auto; font-weight: 600; color: var(--np-white); }
  .np-sec .np-ftable tbody tr:has(td) td:nth-child(2) { flex: 0 1 auto; min-inline-size: 104px; }
  .np-sec .np-ftable tbody td:nth-child(2) { inline-size: auto; font-size: 17px; white-space: normal; }
  .np-sec .np-ftable tbody td:nth-child(2):has(em) { font-size: 14px; }
  .np-sec .np-ftable tbody tr:has(td) td:nth-child(3) { flex: 1 1 140px; }
  .np-sec .np-ftable tbody td:nth-child(3) { inline-size: auto; font-size: 14px; }
  .np-sec .np-ftable td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-block-end: 4px;
    font: 600 11px/1.3 var(--np-sans);
    letter-spacing: calc(0.04em * var(--np-track));
    text-transform: var(--np-upper);
    color: var(--np-green-bright);
  }

  .np-callout { padding: 24px; }
  .np-poa__fee { display: block; padding: 24px; }
  .np-chips > li { flex: 1 1 100%; }
  .np-chips a { inline-size: 100%; justify-content: space-between; }
  .np-chips a::after { opacity: 1; transform: scaleX(var(--np-dir)); }
  .np-estate__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .np-time__cols { grid-template-columns: 1fr; }
  .np-time__col,
  .np-time__col + .np-time__col { padding: 28px 0 0; border-inline-start: 0; }
  .np-time__col + .np-time__col { margin-block-start: 28px; border-block-start: var(--np-hair); }
  .np-co { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .np-rev__grid { grid-template-columns: 1fr; }
  .np-rev__mark { block-size: 56px; font-size: 120px; }
  .np-faq .np-faq__item > :not(summary) { padding-inline-end: 0; }
  .np-form { grid-template-columns: 1fr; }
  .np-sheet { padding: 20px 18px 24px; }
  .np-sheet__col { padding-right: 16px; }
  .np-sheet__col + .np-sheet__col { padding-left: 16px; padding-right: 0; }
  .np-sheet__hl > div { padding-right: 16px; }
  .np-sheet__hl > div + div { padding-left: 16px; padding-right: 0; }
  /* The tag may wrap on a phone: room between its lines, and the
     highlighted row starts below it. */
  .np-sheet__tag { padding-block: 4px; line-height: 1.3; white-space: normal; }
  .np-sheet__hl { padding-block-start: 30px; }
  .np-vs__facts > li { grid-template-columns: 96px minmax(0, 1fr); }
  .np-ftr__grid { grid-template-columns: 1fr; gap: 40px; padding-block: 64px 48px; }
  .np-ftr__links a,
  .np-ftr__legal a { min-block-size: 44px; }
  .np-final .np-btns > .wp-block-button,
  .np-final .np-btn > .wp-block-button__link.wp-element-button { inline-size: 100%; }
  .np-final__img figcaption { inset-block-end: 16px; }

  .np-rail__phone { min-block-size: 44px; align-items: center; margin-block-start: 2px; }
  .np-ftr__contact a { min-block-size: 44px; }

  .np-actionbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 60;
    display: grid;
    /* The written quote column is wider, so its label stays on one line
       and the bar keeps the 60px the page leaves for it. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
    padding-block-end: env(safe-area-inset-bottom, 0px);
    background: var(--np-ink-deep);
    border-block-start: var(--np-hair-d);
  }
  .np-actionbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-block-size: 60px;
    padding: 6px 4px;
    color: var(--np-white);
    font: 600 13px/1.15 var(--np-sans);
    text-align: center;
    text-decoration: none;
  }
  .np-actionbar a + a { border-inline-start: var(--np-hair-d); }
  .np-actionbar a:hover { color: var(--np-white); }
  .np-actionbar__wa .np-ico { color: var(--np-wa); }
  .np-actionbar a.np-actionbar__cta { background: var(--np-green); }
  body.np-has-bar { padding-block-end: calc(60px + env(safe-area-inset-bottom, 0px)); }
}


/* The narrowest phones (320 to 374): the brand and the menu button share
   about 280px, so the brand steps down a size. From 375 up it is as approved. */
@media (max-width: 374px) {
  .np-hdr__in { gap: 12px; }
  .np-brand { gap: 10px; }
  .np-brand__name { font-size: 16px; }
  .np-brand__strap { font-size: 10px; letter-spacing: calc(0.04em * var(--np-track)); }
}


/* ---------- 39. Motion ---------------------------------------------------- */

@keyframes np-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes np-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* The title's rise is a transform (no layout per frame). A transform does
   not apply to the inline lines of the Latin title, so the title block
   rises and each line fades in on its own delay, as before. */
@keyframes np-line { from { opacity: 0; } to { opacity: 1; } }
@keyframes np-lift { from { transform: translateY(0.3em); } to { transform: none; } }
@keyframes np-fade { from { opacity: 0; } to { opacity: 1; } }
.np-js .np-hero__media img { animation: np-zoom 1.6s var(--np-ease) both; }
.np-js .np-hero__title { animation: np-lift 0.9s var(--np-ease) 0.12s both; }
.np-js .np-hero__ln { animation: np-line 0.9s var(--np-ease) both; }
.np-js .np-hero__ln--1 { animation-delay: 0.12s; }
.np-js .np-hero__ln--2 { animation-delay: 0.19s; }
.np-js .np-rail { animation: np-rise 0.9s var(--np-ease) 0.26s both; }
.np-js .np-hero__lede { animation: np-rise 0.9s var(--np-ease) 0.33s both; }
.np-js .np-hero__cap { animation: np-fade 1.2s ease 0.5s both; }

@media (prefers-reduced-motion: reduce) {
  .np-js .np-hero__media img,
  .np-js .np-hero__title,
  .np-js .np-hero__ln,
  .np-js .np-rail,
  .np-js .np-hero__lede,
  .np-js .np-hero__cap { animation: none; }
  .np-marquee__track { animation: none; inline-size: auto; }
  .np-marquee { -webkit-mask-image: none; mask-image: none; }
  .np-logos[aria-hidden="true"] { display: none; }
  .np-logos { flex-wrap: wrap; gap: 24px 48px; padding-inline-end: 0; }
  .np-mega,
  .np-menu,
  .np-menu__sheet,
  .np-menu__scrim,
  .np-card--photo > .np-card__img img { transition: none; }
}


/* ---------- 40. Arabic route ----------------------------------------------
   Letter spacing and upper case are already switched off through --np-track
   and --np-upper. What is left is room: Arabic carries marks above and below
   the line, so the tight display leading of the Latin route would clip it. */

[dir="rtl"] .np-hero .np-hero__title { line-height: 1.22; }
/* Arabic line 1 is short, so in flow the second line ran up into it and split the place
   name (الخليج / التجاري). Each title line starts on its own line here; English keeps the
   natural wrap the approved design uses. */
[dir="rtl"] .np-hero__ln { display: block; }
/* Arabic puts the currency after the figure (600 درهم), so a label that follows the figure
   takes its gap on the other side. */
[dir="rtl"] :is(.np-card__big, .np-poa__big) small.np-cur { margin-inline: 6px 0; }
[dir="rtl"] :is(.np-sec, .np-hero) :is(h1, h2, h3) { line-height: 1.35; }
[dir="rtl"] .np-sec .np-term__word,
[dir="rtl"] .np-sec .np-vs__card > h3,
[dir="rtl"] .np-sec.np-final h2 { line-height: 1.25; }
[dir="rtl"] .np-brand__name { line-height: 1.2; }
/* The wordmark is the logo: the same face as on the English route (the Arabic route maps
   --np-display to Noto Sans Arabic, whose Latin is wider and clipped the name at 320px), and a
   Latin domain always runs left to right, so any trim lands at its end. */
[dir="rtl"] .np-brand__name {
  font-family: "Familjen Grotesk", "Familjen Fallback", system-ui, sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}