/* Header of the website (same as the old site: logo, links, theme, language, login). Taken from style.css */
.container{ width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.i{ width: 1em; height: 1em; flex: none; }
.skip{ position: absolute; inset-inline-start: 8px; top: -60px; background: var(--sun); color: #000; padding: 10px 16px; z-index: 100; font-weight: 700; }
.skip:focus{ top: 8px; }
.header{ position: sticky; top: 0; z-index: 50; background: rgb(5 5 5 / .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-in{ height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo{ display: flex; align-items: center; gap: 12px; }
.logo img{ height: 36px; width: auto; }
.logo-text{ font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.05; }
html[dir="ltr"] .logo-text{ text-transform: uppercase; }
.logo-text span{ display: block; }
.logo-text span + span{ color: var(--muted); }
.nav{ display: none; gap: 24px; }
.nav a{ font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--fg-rgb) / .8); transition: color .2s; }
[dir="rtl"] .nav a{ letter-spacing: 0; text-transform: none; }
.nav a:hover{ color: var(--sun); }
.header-actions{ display: flex; align-items: center; gap: 8px; }
.icon-btn{
  min-height: 40px; min-width: 40px; padding: 0 10px;
  background: transparent; color: var(--fg); cursor: pointer;
  border: 1px solid rgb(var(--fg-rgb) / .3); border-radius: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.icon-btn:hover{ border-color: var(--sun); color: var(--sun); }
.icon-btn .i{ font-size: 22px; }
.header .btn-book{ display: none; }
.mobile-nav{ display: none; border-top: 1px solid var(--line); background: var(--ink); }
.mobile-nav.open{ display: block; }
.mobile-nav a.link{ display: block; padding: 12px 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--fg-rgb) / .9); }
[dir="rtl"] .mobile-nav a.link{ letter-spacing: 0; text-transform: none; }
.mobile-nav .container{ padding-block: 12px 16px; }
@media (min-width: 640px){.header .btn-book{ display: inline-flex; }}
@media (min-width: 1024px){.nav{ display: flex; }
.mobile-nav{ display: none !important; }}
@media (max-width: 639px){.logo-text{ display: none; }}
.checks .i{ margin-top: 4px; font-size: 20px; color: var(--leaf); }
.points .i{ margin-top: 5px; font-size: 20px; color: var(--leaf); }
.service .checks .i{ font-size: 18px; margin-top: 5px; color: var(--c); }
.why .container{ position: relative; }
.tile .i{ font-size: 30px; color: var(--sun); }
.quote > .i{ font-size: 28px; color: var(--brand); }
.stars .i{ fill: currentColor; }
summary .i{ color: var(--brand); font-size: 20px; transition: transform .2s; }
details[open] summary .i{ transform: rotate(180deg); }
.booking .container{ position: relative; }
@media (min-width: 1600px){.container{ max-width: 80rem; }}
@media (min-width: 2200px){.container{ max-width: 84rem; }}
@media (max-width: 380px){.header-actions{ gap: 6px; }}
.nav a.on, .mobile-nav a.link.on{ color: var(--sun); }
.mobile-nav a.link{ border-bottom: 1px solid rgb(43 43 51 / .6); }
.chip .i{ width: 14px; height: 14px; }
.header{ padding-top: env(safe-area-inset-top); }
.member .pts .i{ flex: none; margin-top: 3px; color: var(--c); }
.theme > .container{ position: relative; z-index: 1; }
.theme .checks .i, .theme .points .i{ color: var(--fg); }
.theme-blue .checks .i, .theme-blue .points .i{ color: var(--sun); }
.theme .tile .i{ color: var(--fg); }
.theme-dark > .container{ position: relative; z-index: 1; }
html[data-theme="light"]{
  color-scheme: light;
  --ink: #f4f4f6; --panel: #ffffff; --panel2: #ececf0; --line: #dcdce2; --muted: #5d5d68;
  --fg: #14151a; --fg-rgb: 20 21 26;
  --well: #f1f3f7; --bar: #ffffff; --modal: #ffffff; --bubble: #e8ebf0;
}
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"] body{ background: var(--ink); color: var(--fg); }
html[data-theme="light"] .header{ background: rgb(255 255 255 / .92); }
html[data-theme="light"] .box, html[data-theme="light"] .tile, html[data-theme="light"] .service, html[data-theme="light"] .plan, html[data-theme="light"] .member, html[data-theme="light"] .quote{ box-shadow: 0 6px 24px -14px rgb(20 21 26 / .25); }
html[data-theme="light"] .sunc{ color: #a86400; }
html[data-theme="light"] .green{ color: #00803c; }
.theme-btn{ cursor: pointer; }
.theme-btn svg{ width: 1.15em; height: 1.15em; display: block; }
.theme-btn .t-sun{ display: none; }
html[data-theme="light"] .theme-btn .t-sun{ display: block; }
html[data-theme="light"] .theme-btn .t-moon{ display: none; }
html[data-theme="light"] .nav a{ color: rgb(var(--fg-rgb) / .78); }
html[data-theme="light"] .nav a:hover{ color: var(--brand); }
html[data-theme="light"] .nav a.on{ color: var(--brand); }
html[data-theme="light"] .header .icon-btn, html[data-theme="light"] .header .logo-text{ color: var(--fg); }
html[data-theme="light"] .mobile-nav{ background: var(--panel); }
html[data-theme="light"] body::before{ filter: invert(1); opacity: .14; }

/* tokens + theme button (so the header looks the same here as on the other pages) */
:root {
  --ink: #0a0a0b;        /* page background */
  --panel: #141416;      /* section background */
  --panel2: #1d1d21;     /* inputs / small blocks */
  --fg: #ffffff; --fg-rgb: 255 255 255;   /* main text color (white on dark, near-black on light) */
  --well: #0a0a0b; --bar: #141416; --modal: #141416; --bubble: #1d1d21;
  --line: #26262b;       /* borders */
  --muted: #b9b9c2;      /* secondary text */
  --brand: #e0261d;      /* NLP red: the primary color */
  --orange: #e0261d;     /* NLP red (same as --brand) */
  --sun: #ffe600;        /* yellow: buttons and highlights */
  --sky: #6f94ff;        /* blue (text) */
  --blue: #1e43a6;       /* blue (cards) */
  --leaf: #2bd576;       /* green */
  --font-display: "Anton", "Cairo", sans-serif;       /* brand main typeface */
  --font-body: "Archivo", "Cairo", sans-serif;  /* free typeface (OFL) */
}
html[data-theme="light"] {
  color-scheme: light;
  --ink: #f4f4f6; --panel: #ffffff; --panel2: #ececf0; --line: #dcdce2; --muted: #5d5d68;
  --fg: #14151a; --fg-rgb: 20 21 26;
  --well: #f1f3f7; --bar: #ffffff; --modal: #ffffff; --bubble: #e8ebf0;
}
html[lang="ar"] { --font-display: "Cairo", sans-serif; --font-body: "Cairo", sans-serif; }
.theme-btn { cursor: pointer; }
.theme-btn svg { width: 1.15em; height: 1.15em; display: block; }
.theme-btn .t-sun { display: none; }
html[data-theme="light"] .theme-btn .t-sun { display: block; }
html[data-theme="light"] .theme-btn .t-moon { display: none; }
html[data-theme="light"] .header { background: rgb(255 255 255 / .92); }
.header a { text-decoration: none; }
.header { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--fg); }
.header img { display: block; max-width: 100%; }
.header ul { list-style: none; margin: 0; padding: 0; }

.header .logo { color: var(--fg); }
.header .logo-text span + span { color: var(--muted); }
.header .icon-btn { color: var(--fg); }
.header .nav a { color: rgb(var(--fg-rgb) / .8); }
.header .nav a.on, .header .nav a:hover { color: var(--sun); }
.header .mobile-nav a.link { color: rgb(var(--fg-rgb) / .9); }

/* ===== hero: poster photos, ONE at a time (holds ~4.5 s, fades to the next), the big N sits inside them, dots under ===== */
/* phone / small screens: the photos are the BACKGROUND of the whole hero (a red wash keeps the text readable) */
.pshow { position: absolute; inset: 0; z-index: 0; order: 0; }
.pshow::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 92vw; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgb(224 38 29 / 0) 0%, rgb(224 38 29 / 0) 78%, rgb(224 38 29 / .7) 92%, #E0261D 100%); }
.pshow-box { position: absolute; inset: 0 0 auto 0; height: 92vw; overflow: hidden; background: transparent; }
.pshow-track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; width: 600%; will-change: transform; }
.ps { position: relative; flex: 0 0 calc(100% / 6); height: 100%; margin: 0; overflow: hidden; }
.ps .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn { position: absolute; left: 50%; top: 44vw; width: min(46%, 220px); transform: translate(-50%, -50%); opacity: .42; z-index: 3; pointer-events: none; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .35)); }.pshow-dots { position: absolute; z-index: 4; top: calc(86vw - 34px); bottom: auto; left: 0; right: 0; display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 14px; }
.pd { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / .55); cursor: pointer; transition: width .3s, background .3s; }
.pd.on { width: 28px; background: #FFE600; }
.ncol { display: none !important; }
.hcopy { margin-top: 86vw; }


/* laptop / desktop: the photos start where the gradient starts (about 40% of the page) and melt into the red from the LEFT only */
@media (min-width: 900px) {
  .hcopy { flex: 0 1 50% !important; max-width: 50%; }
  .pshow { inset: 0 0 0 auto; width: 60%; }
  .pshow::after { display: none; }
  .pshow-box { inset: 0; height: auto; }
  .pshow-box { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .18) 10%, rgb(0 0 0 / .55) 22%, rgb(0 0 0 / .85) 30%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .18) 10%, rgb(0 0 0 / .55) 22%, rgb(0 0 0 / .85) 30%, #000 38%); }
  .pn { left: 62%; top: 52%; width: min(32%, 300px); }

  .hcopy { margin-top: 0; }
  .pshow-dots { top: auto; bottom: 26px; left: 30%; }
}
/* captions under the headline, in step with the photo */
.pcap { position: relative; margin-top: 18px; min-height: 132px; max-width: 520px; }
.pc { position: absolute; left: 0; top: 0; right: 0; display: grid; gap: 8px; opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .4s ease; pointer-events: none; }
.pc.on { opacity: 1; transform: none; transition-delay: .3s; }
.pc b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; text-transform: uppercase; color: #FFE600; letter-spacing: .3px; }
.pc span { font-size: 16px; line-height: 1.45; font-weight: 500; color: #fff; }
@media (max-width: 899px) { .pcap { min-height: 150px; } }
@media (prefers-reduced-motion: reduce) { .pc { transition: none; } }
.splash { display: none !important; }