/* BeOnTop, sitewide additions for the AI agency launch (November 2026).
   Loaded on every page after the page bundle. Compiled bundles are left untouched. */

/* Header: one row, as on the old site, with all nine items on it. Logo and type tighten with the width,
   so the old overflow button is never needed and stays off. */
@media (min-width:1024px){
  .header__main-menu{order:0;flex:1 1 auto;min-width:0}
  [dir] .header__main-menu{margin:0 18px}
  [dir] .main-menu__root>li.-hidden{display:block}
  [dir] .main-menu__root>li.-extraBar{display:none}
  [dir] .main-menu__root>li>div>ul{display:block}
  [dir] .main-menu__root>li>a,[dir] .main-menu__root>li>span{padding:0 6px;font-size:clamp(13px,1.15vw,14px)}
  .header__logo img{width:clamp(135px,12vw,170px)}
  [dir] .header__call{margin-inline-start:12px}
  /* The Arabic header runs left to right inside, so the gap goes on the right; this also beats the bundle's -35px at exactly 1024. */
  [dir=rtl] .header .header__call{margin-right:12px}
}
/* My Report Login is hidden for now, by the owner's decision of 6 November: reports.beontop.ae is down (Cloudflare 522)
   and is not hosted on our server. Delete this one rule when the portal is back. */
[dir] .header__report,[dir] a[href*="reports.beontop.ae"]{display:none!important}
/* My Report Login: icon only, to leave the row to the menu. The words stay for screen readers. */
@media (min-width:821px){
  [dir] .header__report{flex:none;width:34px;height:34px;margin:0;padding:0;overflow:hidden;font-size:0;background:url(/assets/images/icons/header__reports.svg) 50% no-repeat;background-size:34px}
  [dir] .header__report span{font-size:0;line-height:0}
}
/* Phone: the number without its icon below 1270 px, the icon alone below 1150 px */
@media (min-width:1150px) and (max-width:1269px){
  [dir] .header__call{background:none}
  [dir=ltr] .header__call{padding-left:0}
  [dir=rtl] .header__call{padding-right:0}
}
@media (min-width:1024px) and (max-width:1149px){
  [dir] .header__main-menu{margin:0 12px}
  [dir] .header__call{flex:none;width:34px;height:34px;padding:0;overflow:hidden;font-size:0;background:url(/assets/images/icons/header__call.svg) 50% no-repeat;background-size:34px}
  [dir] .header__call span{font-size:0;line-height:0}
}
@media (min-width:1024px) and (max-width:1060px){
  .header__logo img{width:125px}
  [dir] .header__main-menu{margin:0 10px}
  [dir] .main-menu__root>li>a,[dir] .main-menu__root>li>span{padding:0 5px}
}

/* Footer: room for the fifth column (AI Agency). */
[dir] .footer__menu{max-width:840px}

/* Longer enquiry forms (digital marketing, website estimate, website audit) */
[dir] .bot-form { max-width: 720px; margin: 24px 0; padding: 28px; border: 1px solid #e6e3f2; border-radius: 18px; background: #fff; }
[dir] .bot-f { margin: 0 0 18px; }
[dir] .bot-f > label, [dir] .bot-f legend { display: block; margin: 0 0 6px; padding: 0; color: #16113a; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
[dir] .bot-f input[type=text], [dir] .bot-f input[type=email], [dir] .bot-f select, [dir] .bot-f textarea { box-sizing: border-box; width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #cfcbe3; border-radius: 10px; background: #fff; color: #16113a; font-size: 16px; font-family: inherit; }
[dir] .bot-f input:focus, [dir] .bot-f select:focus, [dir] .bot-f textarea:focus { outline: 3px solid rgba(120, 79, 235, .3); border-color: #784FEB; }
[dir] .bot-f--many > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
[dir] .bot-f--many label { display: inline; color: #3d3966; font-size: 15.5px; font-weight: 400; }
[dir] .bot-f--check { display: flex; align-items: flex-start; gap: 10px; }
[dir] .bot-f--check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; }
[dir] .bot-f--check label { color: #3d3966; font-size: 15px; font-weight: 400; line-height: 1.45; }
[dir] .bot-f--check .bot-f__err { flex-basis: 100%; }
[dir] .bot-f.has-error input, [dir] .bot-f.has-error select, [dir] .bot-f.has-error textarea { border-color: #d12c1c; }
[dir] .bot-f__err, [dir] .bot-f__err li { margin: 6px 0 0; padding: 0; color: #c0270f; font-size: 14px; list-style: none; }
[dir] .bot-f__btn { min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: #F34C3A; color: #fff; font-size: 16.5px; font-weight: 700; cursor: pointer; }
[dir] .bot-f__btn:hover { background: #e03f2e; }
@media (max-width: 568px) { [dir] .bot-form { padding: 20px 16px; } [dir] .bot-f--many > div { grid-template-columns: 1fr; } [dir] .bot-f__btn { width: 100%; } }

/* New tables on service pages */
[dir] .l-main .l-container table:not([class]) { width: 100%; margin: 16px 0 22px; border-collapse: collapse; border: 1px solid #e6e3f2; font-size: 16px; line-height: 1.5; }
[dir] .l-main .l-container table:not([class]) th { padding: 12px 14px; background: #16113a; color: #fff; font-weight: 700; text-align: left; }
[dir] .l-main .l-container table:not([class]) td { padding: 12px 14px; border-top: 1px solid #e6e3f2; vertical-align: top; }
@media (max-width: 640px) { [dir] .l-main .l-container table:not([class]) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* Keyboard focus, sitewide: violet on light, amber on the dark header and footer */
[dir] a:focus-visible, [dir] button:focus-visible, [dir] summary:focus-visible, [dir] input:focus-visible, [dir] select:focus-visible, [dir] textarea:focus-visible { outline: 3px solid #6848e4 !important; outline-offset: 2px; }
[dir] .l-header a:focus-visible, [dir] .header a:focus-visible, [dir] footer a:focus-visible, [dir] .pg-hero a:focus-visible { outline-color: #ebb430 !important; }

/* Skip link, first stop for keyboard users */
[dir] .bot-skip { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 16px; border-radius: 10px; color: #fff; font-weight: 700; background: #261e4a; transition: top 160ms ease; }
[dir] .bot-skip:focus { top: 12px; }

/* Closed dropdowns stay out of the Tab order; they open on hover or keyboard focus */
@media (min-width: 1024px) {
  [dir] .main-menu li.-has-dropdown > div { visibility: hidden; }
  [dir] .main-menu li.-has-dropdown:hover > div, [dir] .main-menu li.-has-dropdown:focus-within > div { visibility: visible; opacity: 1; transform: scaleY(1); }
}

/* Phone number button on small screens: white text needs a darker green (5.4:1) */
@media (max-width: 820px) { [dir] .header__call { background: #067a4c; } }

/* Keep the language flag clear of the phone number */
@media (min-width: 1024px) { [dir=ltr] .header__lang { margin-left: 14px; } [dir=rtl] .header__lang { margin-right: 14px; } }

/* The WhatsApp bubble waits until the hero has scrolled away on phones */
@media (max-width: 820px) { [dir] .pg-hero-on .whatsapp-fixed-btn { opacity: 0; pointer-events: none; } }
@media (max-width: 480px) { [dir] .bot-seo-form__links { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* Round 3: floating buttons clear the last footer lines, and header and footer targets reach 44px */
@media (max-width: 820px) { [dir] .footer__bottom { padding-bottom: 84px; } }
@media (max-width: 1023px) {
  [dir] .header__logo { padding-block: 9px; margin-block: -9px; }
  [dir] .header__call { min-height: 44px; }
  [dir] .header__lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  [dir] .footer-contacts__item-value { display: inline-block; padding: 13px 0; margin: -13px 0; }
}
@media (min-width: 601px) and (max-width: 1023px) { [dir] .footer__map { width: 350px; max-width: 100%; } }

/* BeOnTop round 4 design patch. Tested by injecting after every other stylesheet.
   Paste the whole file at the end of site-ai.css, which loads last on all 27 pages.
   Same [dir] selector style as the kit. Nothing here adds glow or 3D. */

/* ---------- A. Regressions and things that read as broken ---------- */

/* A1 Homepage, 820 and below: closed service tabs. Round 3's tap-target margin ate the tab's 10px of bottom room, so labels sat on the bottom edge. */
@media (max-width: 820px) {
  [dir] .home-page .homepage-services__item:not(.is-active) { padding-top: 0; }
  [dir] .home-page .homepage-services__item:not(.is-active) .homepage-services__item-title { margin-block: 0; padding-block: 13px; }
  [dir] .home-page .homepage-services__item.is-active .homepage-services__item-title { margin-bottom: -5px; font-size: 19px; line-height: 1.25; font-weight: 700; }
}

/* A2 SEO course: the kept H3 sat left inside a centred head, touched its intro and used a different weight and colour */
[dir] .pg-head h3.pg-h2 { margin: 0 0 14px; color: var(--indigo); font-size: clamp(28px, 3vw, 42px); line-height: 1.14; font-weight: 700; letter-spacing: -.018em; text-align: inherit; }

/* A3 SEO course: the kept registration form takes the kit's fields and button */
[dir] .pg-form--old .form-heading { margin: 0 0 14px; color: var(--indigo); font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; text-align: left; }
[dir] .pg-form--old .form-send-enquiry .form-item input { min-height: 50px; border: 1px solid #cfcbe3; border-radius: 10px; background-color: #fff !important; color: var(--indigo); font-size: 16px; font-weight: 400; transition: border-color 160ms ease, box-shadow 160ms ease; }
[dir] .pg-form--old .form-send-enquiry .form-item input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(104, 72, 228, .14); }
[dir] .pg-form--old .form-send-enquiry__btn-submit { min-height: 54px; border-radius: 999px; background: linear-gradient(180deg, #dc3c28, #cf3522); box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 12px 24px -10px rgba(217, 58, 38, .6); font-size: 16.5px; }

/* A4 Contact, 820 and below: round 3 put the form first, which left its heading under the Send button. Heading, then form, then the guidance. */
@media (max-width: 820px) {
  [dir] body:has(.pg-at-w) #start .pg-start__in { gap: 0; }
  [dir] body:has(.pg-at-w) #start .pg-start__in > div:first-child { display: contents; }
  [dir] body:has(.pg-at-w) #start .pg-start__in h2 { order: -2; }
  [dir] body:has(.pg-at-w) #start .pg-form { order: -1; margin: 6px 0 30px; }
  [dir] .pg-at-w dd a[href^="tel:"] { padding-block: 12px; margin-block: -12px; }
}

/* ---------- B. Footer, all 27 pages ---------- */

/* B1 A wrapped link is one link: its lines sit closer together than two separate links do. Columns stop overlapping each other's gap. */
@media (min-width: 1024px) {
  [dir] .menu-footer__dropdown li { margin-right: 0; }
  [dir] .menu-footer__dropdown li a { padding-block: 9px; line-height: 22px; }
}
@media (min-width: 1361px) { [dir] .footer__menu { max-width: 880px; } }
@media (min-width: 1024px) and (max-width: 1360px) {
  [dir] .menu-footer__container > ul > li:nth-child(1) { max-width: 195px; }
  [dir] .menu-footer__container > ul > li:nth-child(4) { max-width: 170px; }
}

/* ---------- C. One system ---------- */

/* C1 Three radii instead of five: cards 20, panels 24, full bands 28 (24 on phones) */
[dir] .pg-item, [dir] .pg-price, [dir] .pg-rel a, [dir] .pg-rank, [dir] .pg-gallery figure, [dir] .pg-agent { border-radius: 20px; }
[dir] .pg-panel, [dir] .pg-form, [dir] .pg-calc, [dir] .pg-lead__card, [dir] .pg-tools { border-radius: 24px; }
@media (max-width: 820px) { [dir] .pg-band, [dir] .pg-ask { border-radius: 24px; } }

/* C2 A tag that wraps stays a tag, not a blob. 12px is identical on one line. */
[dir] .pg-you { border-radius: 12px; }

/* C3 Gallery captions read as one set, linked or not */
[dir] .bp-body .pg-gallery figcaption a:not([class]) { color: inherit; }

/* C4 Old "More on" lists of five or more rows match the question list above them. Short wide folds that hold tables stay wide. */
[dir] .pg-faq--wide:has(details:nth-child(5)) { max-width: 880px; }

/* C5 Homepage: the six "Why" icons sit in the kit's tinted tile, as on every inner page */
[dir] .home-page .homepage-advantages__item { position: relative; isolation: isolate; }
[dir] .home-page .homepage-advantages__item::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 26px; top: 26px; width: 46px; height: 46px; border-radius: 14px; background: #efeafd; }
[dir] .home-page .homepage-advantages__item-img { width: 46px; height: 46px; mix-blend-mode: multiply; }

/* C6 List and answer text joins the size around it: 17 for reading, 15.5 inside cards. The half-size steps between them go. */
[dir] .bp-body :where(li) { font-size: 17px; }
[dir] .pg-faq__a p { font-size: 17px; }
[dir] .pg-item li, [dir] .pg-price li { font-size: 15.5px; }

/* C7 The website form's optional fold uses the same chevron as every question on the site */
[dir] .bot-more > summary { position: relative; padding: 6px 28px 6px 0; line-height: 1.35; list-style: none; }
[dir] .bot-more > summary::-webkit-details-marker { display: none; }
[dir] .bot-more > summary::after { content: ""; position: absolute; right: 6px; top: 10px; width: 9px; height: 9px; border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(45deg); transition: transform 200ms var(--out); }
[dir] .bot-more[open] > summary::after { transform: translateY(4px) rotate(225deg); }

/* C8 Lead bar, step two: fields line up when a label wraps, and the title stays level with the first field */
[dir] .bot-form__row3 { align-items: end; }
[dir] .pg-lead__card:has(form.is-two) { align-items: start; }

/* C9 Phone menu: the site's typeface and quiet dividers. The hard white rules, the system font and the three dots were left from an older design. */
[dir] .menu-mobile__title-btn { font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .08em; }
[dir] .menu-mobile__header, [dir] .menu-mobile__item { border-bottom-color: rgba(255, 255, 255, .14); }
[dir] .menu-mobile__item-name { font-weight: 600; }
[dir] .menu-mobile__item-btn.hasChild { width: 48px; border-left-color: rgba(255, 255, 255, .14); }
[dir] .menu-mobile__icon-more { display: block; width: 14px; height: 14px; margin: auto; border: 0; background: linear-gradient(#fff, #fff) center / 14px 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 14px no-repeat; box-shadow: none; }
[dir] .menu-mobile__icon-more::before, [dir] .menu-mobile__icon-more::after { content: none; }

/* ---------- D. Typography ---------- */

/* D1 Reading width in pixels: this typeface's ch unit is wide, so 68ch still gave about 100 characters. These stop the 100 to 150 character lines. */
[dir] .pg-ask p { max-width: 600px; }
[dir] .pg-band > p { max-width: 720px; }
[dir] .pg-in > p:not(.pg-note-s) { max-width: 680px; }
[dir] .pg-in > p.pg-note-s, [dir] .pg-note-s { max-width: 580px; }

/* D1b H1: lets the underlined phrase break, as it already does on phones. Inert until the class is added to two spans (see report). The words do not change. */
[dir] .pg-hero h1 .pg-u--wrap { white-space: normal; }

/* D2 No one-word last lines in running text */
[dir] .bp-body p, [dir] .bp-body li, [dir] .bp-body dd, [dir] .pg-answer__text { text-wrap: pretty; }

/* D3 Phones: a question is not bigger than a card title, and most now fit one line */
@media (max-width: 820px) {
  [dir] .pg-faq h3, [dir] .pg-faq summary h2 { font-size: 17px; }
  [dir] .pg-faq summary { padding-top: 16px; padding-bottom: 16px; }
  [dir] .pg-faq summary::after { top: 22px; }
}

/* ---------- E. Motion and states ---------- */

@media (hover: hover) and (pointer: fine) {
  /* E1 Only things that go somewhere lift. These cards are not links. */
  [dir] .pg-item:hover { transform: none; box-shadow: 0 0 0 1px var(--line); }
  [dir] .pg-sec--tint .pg-item:hover { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(38, 30, 74, .04); }
  [dir] .pg-band .pg-item:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
  /* E2 Filled violet buttons had no hover at all */
  [dir] .pg-price .pg-btn--line[href="#start"]:hover, [dir] .pg-price--pick .pg-btn--line:hover { background: #5a3bd0; box-shadow: none; }
  /* E3 A question answers the pointer */
  [dir] .pg-faq summary h2, [dir] .pg-faq summary h3 { transition: color 160ms ease; }
  [dir] .pg-faq summary:hover h2, [dir] .pg-faq summary:hover h3 { color: var(--violet); }
}

/* E4 Focus: violet on light, amber on dark and on violet, ink on colour tiles. Amber on white was under 2:1 and violet on the violet band could not be seen. */
[dir] .bp-body .pg-btn:focus-visible { outline-color: var(--violet) !important; }
[dir] .bp-body .pg-band a:focus-visible, [dir] .bp-body .pg-band .pg-btn:focus-visible, [dir] .bp-body .pg-ask a:focus-visible, [dir] .bp-body .pg-ask .pg-btn:focus-visible, [dir] .bp-body .pg-panel--dark a:focus-visible, [dir] .bp-body .pg-panel--dark .pg-btn:focus-visible, [dir] .bp-body .pg-calc__go .pg-btn:focus-visible, [dir] .bp-body .pg-tools a:focus-visible { outline-color: var(--amber) !important; }
[dir] .bp-body .pg-tile a:focus-visible { outline-color: var(--ink) !important; }
[dir] .bp-body .pg-tile--violet a:focus-visible { outline-color: #fff !important; }

/* E5 Wide screens: the opening answer takes the full row, so it leaves no hole beside it. It spans open or closed, so no question ever changes column. */
@media (min-width: 1121px) {
  [dir] .pg-faq:not(.pg-faq--wide):has(details:nth-child(10)) details:first-child { grid-column: 1 / -1; }
  [dir] .pg-faq:not(.pg-faq--wide):has(details:nth-child(10)) details:nth-child(2) { border-top: 0; }
}

/* E6 The kit promises that motion stops for reduced motion. The chevrons and tiles were missed. */
@media (prefers-reduced-motion: reduce) {
  [dir] .pg-faq summary::after, [dir] .pg-fold > summary::after, [dir] .bot-more > summary::after, [dir] .pg-tile { transition: none; }
}

/* ---------- F. Tablet and laptop ---------- */

/* F1 601 to 820: the wide last card uses its width instead of leaving half of it empty */
@media (min-width: 601px) and (max-width: 820px) {
  [dir] .pg-grid > .pg-item:last-child:nth-child(odd):has(> .pg-ico) { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; }
  [dir] .pg-grid > .pg-item:last-child:nth-child(odd):has(> .pg-ico) > .pg-ico { grid-row: 1 / span 4; margin: 0; }
  [dir] .pg-grid > .pg-item:last-child:nth-child(odd):has(> .pg-ico) > :not(.pg-ico) { grid-column: 2; }
  [dir] .pg-prices > .pg-price:last-child:nth-child(odd) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-content: start; }
  [dir] .pg-prices > .pg-price:last-child:nth-child(odd) > :not(ul) { grid-column: 1; justify-self: start; }
  [dir] .pg-prices > .pg-price:last-child:nth-child(odd) > ul { grid-column: 2; grid-row: 1 / span 6; margin: 0; }
}

/* F2 821 to 1120: five steps fill their rows, three then two, instead of leaving a blank cell */
@media (min-width: 821px) and (max-width: 1120px) {
  [dir] .pg-steps:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  [dir] .pg-steps:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  [dir] .pg-steps:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
}

/* F3 Homepage, 569 to 1023: old images stop running 724px wide. From 640 the three blog posts sit in one row. The button joins the kit. */
@media (min-width: 569px) and (max-width: 1023px) {
  [dir] .home-page .video-homepage, [dir] .home-page .homepage-text-additional__img, [dir] .home-page .homepage-text-seo__img { max-width: 440px; margin-inline: auto; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  [dir] .home-page .blog-widget__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-left: 0; }
  [dir] .home-page .blog-widget__item { width: auto; margin: 0; }
}
[dir] .home-page .blog-widget__btn-more { border-radius: 999px; color: #261e4a; font-weight: 700; background: #fff; box-shadow: 0 0 0 1px #cfc9e6 inset; }

/* Contrast fixes from the final accessibility run */
[dir] .footer-search__field, [dir] .footer-search__field::placeholder { color: #bdb7d4; }
[dir] .footer__bottom-container > span { color: #aca6c6; }

/* CEO page: while the form sits beside the letter, a longer name goes under the photo instead of wrapping up onto the skyline image. */
@media (min-width:820px) and (max-width:1199px){
  .letter-ceo .letter-ceo__user{flex-wrap:wrap}
  .letter-ceo .letter-ceo__user-info{flex:0 0 100%}
  [dir] .letter-ceo .letter-ceo__user-info{padding:14px 0 0}
}
/* Arabic pages: keep the phone number in reading order on phones, and no slanted Arabic. */
[dir=rtl] .header__call span{unicode-bidi:isolate}
[dir=rtl] .letter-ceo .letter-ceo__user-desc{font-style:normal}
[dir] .letter-ceo__main a{color:#5b3fd6;font-weight:600;text-decoration:underline;text-underline-offset:2px}
[dir] .letter-ceo__contact{line-height:1.8}