/*
 * ڤارلك (VARELQ) — site styles. Contract: platform/themes/apexa/DESIGN.md.
 * Loaded after the Apexa stylesheet (config.php) and overrides it where the brand needs to.
 * Three brand devices run through everything: the kashida (.vq-kashida), the three diamonds (.vq-diamonds,
 * .vq-list) and the diagonal cut (buttons, .vq-cut, cards).
 */

/* 1. Fonts (self-hosted, OFL) -------------------------------------------------------------------------- */
@font-face { font-family: "Reem Kufi"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/reem-kufi/ReemKufi-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Reem Kufi"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/reem-kufi/ReemKufi-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/almarai/Almarai-300-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/almarai/Almarai-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/almarai/Almarai-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/almarai/Almarai-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/almarai/Almarai-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/almarai/Almarai-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/almarai/Almarai-800-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/almarai/Almarai-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 2. Tokens (DESIGN.md) --------------------------------------------------------------------------------- */
:root {
    --vq-sand: #F0E8DA;
    --vq-sand-deep: #E6DBC6;
    --vq-paper: #FBF8F2;
    --vq-olive: #4C5437;
    --vq-olive-700: #3F4630;
    --vq-olive-deep: #353A26;
    --vq-burgundy: #5A2730;
    --vq-ink: #1F2117;
    --vq-muted: #55574A;
    --vq-line: #D3C7B1;
    --vq-field: #857C66;
    --vq-on-dark: #F0E8DA;
    --vq-on-dark-soft: #E2DACA;
    --vq-on-dark-line: rgba(240, 232, 218, .22);

    --vq-font: "Almarai", "Segoe UI", Tahoma, sans-serif;
    --vq-font-display: "Reem Kufi", "Almarai", sans-serif;

    --vq-r: 6px;
    --vq-cut: 11px;
    --vq-ease: cubic-bezier(.2, 0, 0, 1);
    --vq-header-h: 84px;
    --vq-section: clamp(72px, 9vw, 132px);
    --vq-block: clamp(32px, 4vw, 56px);
    --vq-fs-h2: clamp(28px, 3vw, 44px);
    --vq-fs-lead: clamp(17px, 1.35vw, 19px);

    /* The cut sits on the bottom-end corner: bottom-left in Arabic, bottom-right in English. */
    --vq-cut-shape: polygon(0 0, 100% 0, 100% 100%, var(--vq-cut) 100%, 0 calc(100% - var(--vq-cut)));
    --vq-cut-lg: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
html[dir="ltr"] {
    --vq-cut-shape: polygon(0 0, 100% 0, 100% calc(100% - var(--vq-cut)), calc(100% - var(--vq-cut)) 100%, 0 100%);
    --vq-cut-lg: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

/* 3. Base ------------------------------------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--vq-font);
    font-size: 17px;
    line-height: 1.9;
    color: var(--vq-ink);
    background: var(--vq-sand);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body, input, textarea, select, button, .btn { font-family: var(--vq-font); }
h1, h2, h3, h4, h5, h6 { color: var(--vq-ink); font-weight: 700; line-height: 1.45; letter-spacing: 0; text-transform: none; }
h1, h2, h3, .title { font-family: var(--vq-font-display); font-synthesis-weight: none; }
h4, h5, h6 { font-family: var(--vq-font); }
p { color: inherit; }
a { color: var(--vq-olive); text-underline-offset: .3em; }
a:hover { color: var(--vq-olive-deep); }
::selection { background: var(--vq-olive); color: var(--vq-sand); }
img { height: auto; }
main.fix { overflow: clip; }
bdi { unicode-bidi: isolate; }
/* The template removes focus outlines (a:focus { outline: none }); keyboard focus must stay visible (WCAG 2.4.7). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--vq-olive-deep) !important;
    outline-offset: 3px !important;
}
.vq-on-dark :is(a, button, summary):focus-visible, .tgmobile__menu :is(a, button, input):focus-visible, .vq-footer :is(a, button):focus-visible { outline-color: var(--vq-sand) !important; }
.container { --bs-gutter-x: 40px; }
@media (max-width: 575.98px) { .container { --bs-gutter-x: 32px; } }

.vq-skip { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 2000; padding: 12px 18px; border-radius: var(--vq-r); background: var(--vq-olive-deep); color: var(--vq-sand); font-weight: 700; }
.vq-skip:focus { top: 12px; color: var(--vq-sand); }
#preloader, .preloader { display: none !important; }

@property --vq-cut { syntax: "<length>"; inherits: true; initial-value: 11px; }

/* 4. Buttons, links, lists, the cut -------------------------------------------------------------------- */
/* Two clipped layers: ::before is the edge, ::after the face. The button box itself is not clipped, so its
   focus ring stays whole. Solid buttons: edge = face. Line buttons: a 1.5px edge around the ground colour. */
.vq-btn,
.vq-header-actions .header-btn .btn,
.contact-form button[type="submit"] {
    --vq-btn-face: var(--vq-olive);
    --vq-btn-edge: var(--vq-btn-face);
    --vq-btn-text: var(--vq-sand);
    --vq-btn-bw: 0px;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 28px;
    border: 0;
    border-radius: var(--vq-r);
    background: transparent;
    color: var(--vq-btn-text);
    font-family: var(--vq-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    transition: color .2s var(--vq-ease), --vq-cut .35s var(--vq-ease);
}
html[dir="ltr"] :is(.vq-btn, .vq-header-actions .header-btn .btn, .contact-form button[type="submit"])::before,
html[dir="ltr"] :is(.vq-btn, .vq-header-actions .header-btn .btn, .contact-form button[type="submit"])::after { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--vq-cut)), calc(100% - var(--vq-cut)) 100%, 0 100%); }
/* Hover and focus open the cut a little, like the slit between the V and the Q. */
:is(.vq-btn, .vq-header-actions .header-btn .btn, .contact-form button[type="submit"]):is(:hover, :focus-visible) { --vq-cut: 17px; }
.vq-btn::before, .vq-btn::after,
.vq-header-actions .header-btn .btn::before, .vq-header-actions .header-btn .btn::after,
.contact-form button[type="submit"]::before, .contact-form button[type="submit"]::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    border-radius: var(--vq-r);
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--vq-cut) 100%, 0 calc(100% - var(--vq-cut)));
    transition: background-color .2s var(--vq-ease);
    transform: none;
    opacity: 1;
    width: auto;
    height: auto;
    animation: none;
}
.vq-btn::before, .vq-header-actions .header-btn .btn::before, .contact-form button[type="submit"]::before { inset: 0; z-index: -2; background: var(--vq-btn-edge); }
.vq-btn::after, .vq-header-actions .header-btn .btn::after, .contact-form button[type="submit"]::after { inset: var(--vq-btn-bw); z-index: -1; border-radius: calc(var(--vq-r) - 1px); background: var(--vq-btn-face); }
.vq-btn:hover, .vq-header-actions .header-btn .btn:hover, .contact-form button[type="submit"]:hover { --vq-btn-face: var(--vq-olive-deep); color: var(--vq-btn-text); transform: none; }
.vq-btn:active { transform: translateY(1px); }
.vq-btn--lg { min-height: 58px; padding-inline: 34px; font-size: 17px; }
.vq-btn--line { --vq-btn-face: var(--vq-btn-ground, var(--vq-sand)); --vq-btn-edge: var(--vq-olive); --vq-btn-text: var(--vq-olive); --vq-btn-bw: 1.5px; }
.vq-btn--line:hover { --vq-btn-face: var(--vq-olive); --vq-btn-text: var(--vq-sand); }
.vq-btn--light { --vq-btn-face: var(--vq-sand); --vq-btn-text: var(--vq-olive-deep); }
.vq-btn--light:hover { --vq-btn-face: #FFFFFF; --vq-btn-text: var(--vq-olive-deep); }
.vq-btn--line-light { --vq-btn-face: var(--vq-btn-ground, var(--vq-olive-deep)); --vq-btn-edge: var(--vq-sand); --vq-btn-text: var(--vq-sand); --vq-btn-bw: 1.5px; }
.vq-btn--line-light:hover { --vq-btn-face: var(--vq-sand); --vq-btn-text: var(--vq-olive-deep); }
.vq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 575.98px) { .vq-btn { white-space: normal; text-align: center; } }

.vq-link {
    display: inline-block;
    padding-bottom: 6px;
    color: var(--vq-olive);
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 45% 2px;
    transition: color .2s var(--vq-ease), background-size .4s var(--vq-ease);
}
html[dir="ltr"] .vq-link { background-position: left bottom; }
.vq-link:hover, .vq-link:focus-visible { color: var(--vq-ink); background-size: 100% 2px; }

/* The diamond: a dot of the ڤ. */
.vq-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vq-list li { position: relative; padding-inline-start: 24px; line-height: 1.75; }
.vq-list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; inline-size: 8px; block-size: 8px; background: var(--vq-olive); transform: rotate(45deg); border-radius: 1px; }
.vq-list--lg li { padding-block: 6px; font-size: 17.5px; }
.vq-list--lg li::before { top: 1.02em; }
.vq-diamonds { display: block; fill: currentColor; }

.vq-cut { display: block; overflow: hidden; clip-path: var(--vq-cut-lg); border-radius: var(--vq-r); }

/* Keep the page content's list styles away from the brand lists. */
.ck-content :is(.vq-list, .vq-toc__list, .vq-journey__steps, .vq-plans, .vq-channels, .vq-crumbs ol, .vq-work__strip, .vq-clients__line, .vq-about__pillars, .vq-package__phases, .vq-footer__list) { list-style: none; }

/* 5. Sections and headings ------------------------------------------------------------------------------ */
.vq-section { padding-block: var(--vq-section); }
/* Two sections on the same ground share one gap; a change of ground keeps both paddings. */
.vq-section:not(.vq-on-dark):not(.vq-band) + .vq-section:not(.vq-on-dark):not(.vq-band) { padding-top: 0; }
.vq-band { background: var(--vq-sand-deep); }
.vq-on-dark { background: var(--vq-olive); color: var(--vq-on-dark); --vq-kashida-color: var(--vq-sand); --vq-btn-ground: var(--vq-olive); }
.vq-on-dark :is(h1, h2, h3, h4) { color: var(--vq-on-dark); }
.vq-section__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: var(--vq-block); }
.vq-section__top .vq-head { margin-bottom: 0; }
.vq-section__foot { margin-top: var(--vq-block); }

.vq-head { max-width: 860px; margin-bottom: var(--vq-block); }
.vq-head__title { margin: 0; color: var(--vq-ink); font-size: var(--vq-fs-h2); font-weight: 600; line-height: 1.35; }
.vq-head__lead { max-width: 64ch; margin: 14px 0 0; color: var(--vq-muted); font-size: var(--vq-fs-lead); line-height: 1.85; }
.vq-on-dark .vq-head__lead { color: var(--vq-on-dark-soft); }
.vq-head--statement { max-width: 980px; }
.vq-head--statement .vq-head__lead { max-width: 74ch; font-size: clamp(18px, 1.5vw, 21px); font-weight: 300; color: var(--vq-ink); }

/* The kashida: the stroke at the baseline that continues a title's last letter, as in ڤـــارلك. */
.vq-nobr { white-space: nowrap; }
.vq-kashida {
    display: inline-block;
    inline-size: var(--vq-kashida-w, 1.5em);
    block-size: max(3px, .085em);
    margin-inline-start: .06em;
    vertical-align: baseline;
    background: var(--vq-kashida-color, var(--vq-olive));
    transform-origin: right center;
}
html[dir="ltr"] .vq-kashida { transform-origin: left center; }

/* 6. Header ---------------------------------------------------------------------------------------------- */
.tg-header__style-four,
.tg-header__style-four.transparent-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0;
    background: var(--vq-sand);
    border-bottom: 0;
    transition: box-shadow .25s var(--vq-ease), background-color .25s var(--vq-ease);
}
/* The hairline is an inset shadow, so the header keeps exactly --vq-header-h (the home stage tucks under it). */
.tg-header__style-four.is-scrolled { box-shadow: inset 0 -1px 0 var(--vq-line); }
.vq-progress { position: absolute; inset-inline: 0; bottom: -1px; block-size: 3px; background: var(--vq-olive); transform: scaleX(0); transform-origin: right center; pointer-events: none; }
html[dir="ltr"] .vq-progress { transform-origin: left center; }
.show-admin-bar .tg-header__style-four { top: 40px; }
.tg-header__area-four,
.tg-header__area-four.sticky-menu,
.tg-header__style-four .tg-header__area-four { position: static; padding: 0; background: transparent !important; box-shadow: none; animation: none; border: 0; }
.tg-header__area-four .tgmenu__wrap { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.tgmenu__nav { min-height: var(--vq-header-h); align-items: center; gap: 20px; flex-wrap: nowrap !important; justify-content: space-between; }
.tgmenu__nav .logo { flex: none; }
.tgmenu__nav .logo img { height: 38px !important; max-height: 38px !important; width: auto; }
.tgmenu__navbar-wrap { flex: 1 1 auto; min-width: 0; justify-content: center; }
.tgmenu__navbar-wrap > ul { margin-inline: auto !important; flex-wrap: nowrap !important; }
.tgmenu__navbar-wrap > ul > li > a,
.tgmenu__main-menu .navigation > li > a { position: relative; padding: 30px 14px; color: var(--vq-ink); font-size: 16px; font-weight: 700; line-height: 1.2; }
.tgmenu__navbar-wrap > ul > li > a::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: auto;
    bottom: 20px;
    left: auto;
    right: auto;
    inset-inline: 14px;
    inline-size: auto;
    block-size: 3px;
    background: var(--vq-olive);
    border-radius: 0;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .3s var(--vq-ease);
}
html[dir="ltr"] .tgmenu__navbar-wrap > ul > li > a::before { transform-origin: left center; }
.tgmenu__navbar-wrap > ul > li:hover > a::before,
.tgmenu__navbar-wrap > ul > li.active > a::before { transform: scaleX(1); }
.tgmenu__navbar-wrap > ul > li:hover > a, .tgmenu__navbar-wrap > ul > li.active > a { color: var(--vq-olive); }
.tgmenu__navbar-wrap > ul > li.menu-item-has-children > a::after { content: "" !important; display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-start: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .6; font-family: inherit; }
.tgmenu__navbar-wrap ul li .sub-menu { min-width: 240px; padding: 8px; border: 1px solid var(--vq-line); border-radius: var(--vq-r); background: var(--vq-paper); box-shadow: 0 18px 30px -24px rgba(31, 33, 23, .55); }
.tgmenu__navbar-wrap ul li .sub-menu li a { padding: 9px 12px; border-radius: 3px; color: var(--vq-ink); font-weight: 400; }
.tgmenu__navbar-wrap ul li .sub-menu li a:hover { background: var(--vq-sand-deep); color: var(--vq-olive); }
.tgmenu__navbar-wrap ul li .sub-menu li a::before { display: none; }

.vq-header-actions { flex: none; align-items: center; margin: 0 !important; }
.vq-header-actions .list-wrap { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vq-header-actions .list-wrap .header-btn { display: block; margin: 0; }
.vq-header-actions .header-btn .btn { min-height: 46px; padding: 10px 22px; font-size: 15.5px; }
/* The template colours this button white with a stronger selector; follow the button's own text token instead. */
.vq-header-actions .list-wrap .header-btn .btn, .vq-header-actions .list-wrap .header-btn .btn:hover { color: var(--vq-btn-text); }
.vq-header-actions .header-btn .btn svg, .vq-header-actions .header-btn .btn img { display: none; }
.vq-header-actions .header-btn .btn span { margin: 0 !important; }
.header-language-switcher .dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 8px 12px; border: 1px solid var(--vq-line); border-radius: var(--vq-r); background: transparent; color: var(--vq-ink); font-size: 15px; font-weight: 700; }
.header-language-switcher .dropdown-toggle::after { display: none; }
/* Menu button: three bars drawn with gradients (the element is an empty <button>). */
.tgmenu__nav .mobile-nav-toggler { display: none !important; place-items: center; flex: none; float: none; top: 0; inline-size: 46px; block-size: 46px; margin: 0; border: 1.5px solid var(--vq-olive); border-radius: var(--vq-r); background: transparent; box-shadow: none; color: var(--vq-olive); font-size: 0; line-height: 1; cursor: pointer; }
.tgmenu__nav .mobile-nav-toggler::before { content: ""; inline-size: 20px; block-size: 14px; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 100% 2px, 70% 2px, 100% 2px; background-position: 0 0, 100% 50%, 0 100%; background-repeat: no-repeat; }
html[dir="ltr"] .tgmenu__nav .mobile-nav-toggler::before { background-position: 0 0, 0 50%, 0 100%; }
.tgmenu__navbar-wrap > ul > li > a { white-space: nowrap; }
/* Seven menu items need about 1200px; narrower screens use the menu button and the drawer. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .tgmenu__navbar-wrap { display: none !important; }
    .tgmenu__nav .mobile-nav-toggler { display: grid !important; margin-inline-start: 0; }
    .vq-header-actions { margin-inline-start: auto !important; }
}
@media (max-width: 991.98px) {
    :root { --vq-header-h: 68px; }
    .tgmenu__nav { gap: 10px; }
    .tgmenu__nav .mobile-nav-toggler { display: grid !important; margin-inline-start: 0; }
    .tgmenu__nav .logo img { height: 32px !important; max-height: 32px !important; }
    .vq-header-actions { margin: 0 !important; margin-inline-start: auto !important; }
}
@media (max-width: 767.98px) {
    .vq-header-actions { display: flex !important; }
    .vq-header-actions .list-wrap > li:not(.header-btn) { display: none; }
    .vq-header-actions .header-btn .btn { min-height: 44px; padding: 8px 14px !important; font-size: 14px; }
    .tgmenu__nav .logo img { height: 27px !important; max-height: 27px !important; }
}
/* Phones: the consultation button lives in the hero and in the drawer, so the bar keeps just the logo and menu. */
@media (max-width: 575.98px) { .vq-header-actions { display: none !important; } .tgmenu__nav .mobile-nav-toggler { margin-inline-start: auto; } }

/* Drawer: olive-deep, beige logo (the template positions with physical left/right; these follow the text). */
.tgmobile__menu { inline-size: min(360px, 90vw); padding: 0; }
.tgmobile__menu .tgmobile__menu-box { padding: 18px 22px 26px; background: var(--vq-olive-deep); color: var(--vq-sand); box-shadow: none; }
.tgmobile__menu .close-btn { top: 16px; right: auto; left: auto; inset-inline-end: 14px; inline-size: 44px; block-size: 44px; border: 0; background: none; line-height: 44px; color: var(--vq-sand) !important; font-size: 20px; }
.tgmobile__menu .nav-logo { padding: 6px 0 22px; text-align: start; }
.tgmobile__menu .nav-logo img { block-size: 32px; inline-size: auto; }
.tgmobile__menu .navigation li { border-top-color: var(--vq-on-dark-line); }
.tgmobile__menu .navigation:last-child { border-bottom-color: var(--vq-on-dark-line); }
.tgmobile__menu .navigation li > a { padding: 15px 0; padding-inline-end: 52px; color: var(--vq-sand); font-size: 18px; font-weight: 700; line-height: 1.5; text-transform: none; }
.tgmobile__menu .navigation li > a::before { display: none; }
.tgmobile__menu .navigation li.active > a, .tgmobile__menu .navigation li > a:hover { color: #FFFFFF; }
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn { top: 8px; right: auto; left: auto; inset-inline-end: 0; inline-size: 40px; block-size: 40px; border: 1px solid var(--vq-on-dark-line); border-radius: var(--vq-r); background: transparent; color: var(--vq-sand); line-height: 40px; }
.tgmobile__menu-bottom { padding: 16px 0 0; }
.tgmobile__menu-backdrop { background: rgba(31, 33, 23, .6); }
.vq-mobile-cta { display: flex; inline-size: 100%; margin: 22px 0 4px; }
.language-switcher-mobile { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--vq-on-dark-line); }
.language-switcher-mobile .title, .language-switcher-mobile .list a { color: var(--vq-sand); }

/* 7. Page header ---------------------------------------------------------------------------------------- */
.vq-pagehead { padding-block: clamp(44px, 6vw, 84px) clamp(40px, 5vw, 68px); background: var(--vq-sand-deep); }
.vq-pagehead__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.vq-pagehead__copy { min-width: 0; }
.vq-pagehead__title { margin: 0; color: var(--vq-ink); font-size: clamp(32px, 4.2vw, 60px); font-weight: 600; line-height: 1.3; --vq-kashida-w: 2.4em; }
.vq-pagehead__dots { flex: none; inline-size: clamp(44px, 5vw, 72px); color: var(--vq-olive); margin-bottom: 10px; }
.vq-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 14px; padding: 0; list-style: none; color: var(--vq-muted); font-size: 14.5px; }
.vq-crumbs li { display: inline-flex; align-items: center; }
.vq-crumbs li + li::before { content: ""; inline-size: 6px; block-size: 6px; margin-inline: 12px; background: var(--vq-olive); transform: rotate(45deg); }
.vq-crumbs a { color: var(--vq-muted); text-decoration: none; }
.vq-crumbs a:hover { color: var(--vq-olive); text-decoration: underline; }
.vq-crumbs [aria-current] { color: var(--vq-ink); font-weight: 700; }

/* 8. Hero «طاولة الأعمال»: the agency's work drifting on a tilted table beside the headline -------------- */
.vq-stage {
    --vq-night: #2E3321;
    --tile-gap: clamp(14px, 1.5vw, 22px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: calc(-1 * var(--vq-header-h));
    padding-top: var(--vq-header-h);
    background: var(--vq-night);
    color: var(--vq-sand);
}
/* The table sits on the far side; three nested layers: perspective › pointer lean › tilt and scroll. */
.vq-stage__table { position: absolute; z-index: 0; inset-block: -16% -24%; inset-inline-end: -14%; inline-size: 66%; perspective: 1500px; perspective-origin: 30% 40%; }
.vq-stage__plane { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tile-gap); transform: rotateX(38deg) rotateY(-10deg) rotateZ(-14deg); transform-style: preserve-3d; will-change: transform; }
html[dir="ltr"] .vq-stage__plane { transform: rotateX(38deg) rotateY(10deg) rotateZ(14deg); }
.vq-stage__col:nth-child(2) { margin-top: -180px; }
.vq-stage__col:nth-child(3) { margin-top: -60px; }
.vq-stage__col:nth-child(4) { margin-top: -260px; }
.vq-stage__col:nth-child(5) { margin-top: -120px; }
.vq-stage__col:nth-child(6) { margin-top: -220px; }
@media (min-width: 992px) { .vq-stage__col:nth-child(n + 5) { display: none; } }
/* Each column holds its tiles twice and rises one copy's height, so the loop has no seam; the columns rise at
   different speeds (depth, not a marquee) and stop while the pointer rests on the table. */
.vq-stage__run { animation: vq-drift 68s linear infinite; }
.vq-stage__col:nth-child(2) .vq-stage__run { animation-duration: 88s; }
.vq-stage__col:nth-child(3) .vq-stage__run { animation-duration: 76s; }
.vq-stage__col:nth-child(4) .vq-stage__run { animation-duration: 98s; }
.vq-stage__col:nth-child(5) .vq-stage__run { animation-duration: 82s; }
.vq-stage__col:nth-child(6) .vq-stage__run { animation-duration: 92s; }
.vq-stage.is-paused .vq-stage__run, .vq-stage__table:hover .vq-stage__run { animation-play-state: paused; }
@keyframes vq-drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.vq-tile {
    position: relative;
    display: block;
    aspect-ratio: var(--ar, 4 / 5);
    margin-block-end: var(--tile-gap);
    overflow: hidden;
    border-radius: 10px;
    background: var(--vq-sand);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
html[dir="ltr"] .vq-tile { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
/* Multiply lays the mockups' white grounds into the brand beige, so the work reads as one printed set. */
.vq-tile img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; mix-blend-mode: multiply; }
.vq-tile--say { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; aspect-ratio: 4 / 5; padding: clamp(16px, 1.6vw, 24px); background: var(--vq-olive); color: var(--vq-sand); }
.vq-tile--say small { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; opacity: .82; }
.vq-tile--say small::before { content: ""; flex: none; inline-size: 7px; block-size: 7px; background: currentColor; transform: rotate(45deg); }
.vq-tile--say b { font: 600 clamp(19px, 2vw, 30px)/1.3 var(--vq-font-display); }
.vq-tile--burg { background: var(--vq-burgundy); }
.vq-tile--sand { background: var(--vq-sand); color: var(--vq-night); }
.vq-tile--figure b { font-size: clamp(40px, 4.4vw, 64px); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Fades: the table dissolves under the headline and under the header (functional, not decoration). */
.vq-stage::before, .vq-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vq-stage::before { background: linear-gradient(to bottom, var(--vq-night) 0 calc(var(--vq-header-h) - 20px), rgba(46, 51, 33, 0) calc(var(--vq-header-h) + 70px)); }
.vq-stage::after { background: linear-gradient(to left, var(--vq-night) 0 45%, rgba(46, 51, 33, .55) 52%, rgba(46, 51, 33, 0) 60%); }
html[dir="ltr"] .vq-stage::after { background: linear-gradient(to right, var(--vq-night) 0 45%, rgba(46, 51, 33, .55) 52%, rgba(46, 51, 33, 0) 60%); }
.vq-stage__inner { position: relative; z-index: 2; display: flex; align-items: center; min-height: calc(100svh - var(--vq-header-h)); padding-block: clamp(40px, 6vw, 96px); }
.vq-stage__copy { max-inline-size: min(720px, 54%); }
.vq-stage__title { margin: 0; }
.vq-stage__l1 { display: block; color: var(--vq-sand); font-size: clamp(46px, 6.7vw, 106px); font-weight: 700; line-height: 1.12; }
.vq-stage__l1 { text-wrap: balance; }
.vq-word { display: inline-block; }
.vq-stage__l2 { display: block; margin-top: 6px; color: var(--vq-on-dark-soft); font-size: clamp(26px, 3.5vw, 54px); font-weight: 500; line-height: 1.5; }
.vq-stretch { white-space: nowrap; }
.vq-stage__lead { max-inline-size: 46ch; margin: 24px 0 0; color: var(--vq-on-dark-soft); font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.95; }
.vq-stage .vq-actions { margin-top: 32px; }
/* Header over the stage: transparent with the beige logo until the page scrolls. */
.vq-logo-light { display: none !important; }
body:has(.vq-stage) .tg-header__style-four:not(.is-scrolled) { background: transparent; }
body:has(.vq-stage) .tg-header__style-four:not(.is-scrolled) .logo img:not(.vq-logo-light) { display: none !important; }
body:has(.vq-stage) .tg-header__style-four:not(.is-scrolled) .logo .vq-logo-light { display: block !important; }
body:has(.vq-stage) .tg-header__style-four:not(.is-scrolled) .tgmenu__navbar-wrap > ul > li > a { color: var(--vq-sand); }
body:has(.vq-stage) .tg-header__style-four:not(.is-scrolled) .tgmenu__navbar-wrap > ul > li > a::before { background: var(--vq-sand); }
body:has(.vq-stage) .tg-header__style-four:not(.is-scrolled) .tgmenu__navbar-wrap > ul > li:hover > a { color: #FFFFFF; }
body:has(.vq-stage) .tg-header__style-four:not(.is-scrolled) .vq-header-actions .header-btn .btn { --vq-btn-face: var(--vq-burgundy); --vq-btn-text: var(--vq-sand); }
body:has(.vq-stage) .tg-header__style-four:not(.is-scrolled) .vq-header-actions .header-btn .btn:hover { --vq-btn-face: #6B3039; }
body:has(.vq-stage) .tg-header__style-four:not(.is-scrolled) .mobile-nav-toggler { border-color: var(--vq-sand); color: var(--vq-sand); }
body:has(.vq-stage) .tg-header__style-four:not(.is-scrolled) :is(a, button):focus-visible { outline-color: var(--vq-sand) !important; }
@media (max-width: 991.98px) {
    /* Phones and tablets: the table is a dense band of six columns across the top (smaller tiles, a steeper
       tilt); it has fully faded into the night before the headline begins, so no text sits on a tile. */
    .vq-stage { --tile-gap: 10px; --band: clamp(230px, 40svh, 400px); }
    .vq-stage__table { inset-block: calc(var(--vq-header-h) - 90px) auto; inset-inline: -32% -32%; inline-size: auto; block-size: calc(var(--band) + 120px); perspective: 900px; perspective-origin: 50% 10%; }
    .vq-stage__plane { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .vq-tile { border-radius: 7px; clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
    html[dir="ltr"] .vq-tile { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
    .vq-tile--say { padding: 12px; gap: 3px; }
    .vq-tile--say small { font-size: 9.5px; gap: 5px; }
    .vq-tile--say small::before { inline-size: 5px; block-size: 5px; }
    .vq-tile--say b { font-size: 15px; }
    .vq-tile--figure b { font-size: 30px; }
    .vq-stage::after, html[dir="ltr"] .vq-stage::after { background: linear-gradient(to top, var(--vq-night) 0 calc(100% - var(--vq-header-h) - var(--band) + 40px), rgba(46, 51, 33, 0) calc(100% - var(--vq-header-h) - var(--band) + 150px)); }
    .vq-stage__inner { align-items: flex-start; min-height: 0; padding-top: calc(var(--band) - 10px); padding-bottom: 44px; }
    .vq-stage__copy { max-inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .vq-stage__run { animation: none; }
}

/* 9. «خطّ واحد»: the scattered words that settle onto one line ------------------------------------------ */
.vq-align { padding-block: var(--vq-section); background: var(--vq-sand-deep); overflow: hidden; }
.vq-align__lead { max-width: 24em; margin: 0; color: var(--vq-ink); font: 500 clamp(22px, 2.5vw, 38px)/1.6 var(--vq-font-display); }
.vq-align__stage { margin-block: clamp(56px, 8vw, 128px); }
.vq-align__line { display: flex; align-items: baseline; justify-content: center; margin: 0; color: var(--vq-olive); font: 700 clamp(30px, 7.6vw, 132px)/1.3 var(--vq-font-display); white-space: nowrap; }
.vq-align__word { display: inline-block; flex: none; will-change: transform; }
.vq-align__join { flex: 0 1 1.6em; min-inline-size: .3em; block-size: .1em; margin-inline: -.03em; background: currentColor; transform-origin: right center; }
html[dir="ltr"] .vq-align__join { transform-origin: left center; }
.vq-align__close { margin: 0; margin-inline-start: auto; max-width: 26em; color: var(--vq-ink); font: 600 clamp(22px, 2.7vw, 42px)/1.5 var(--vq-font-display); text-align: end; --vq-kashida-w: 2em; }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 10. Services: the contents page of a plan ------------------------------------------------------------- */
.vq-toc { background: var(--vq-paper); }
.vq-toc__total { margin: 0; color: var(--vq-muted); font-weight: 700; }
.vq-toc__total > bdi { color: var(--vq-olive); font: 700 clamp(40px, 4vw, 60px)/1 var(--vq-font-display); margin-inline-end: 8px; }
.vq-toc__cols { columns: 2 380px; column-gap: clamp(40px, 6vw, 112px); }
.vq-toc__chapter { break-inside: avoid; margin: 0 0 clamp(36px, 4vw, 60px); }
.vq-toc__title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding-bottom: 12px; border-bottom: 2px solid var(--vq-olive); color: var(--vq-ink); font-size: clamp(21px, 1.8vw, 27px); font-weight: 600; line-height: 1.45; }
.vq-toc__count { flex: none; color: var(--vq-muted); font: 700 14px/1 var(--vq-font); white-space: nowrap; }
.vq-toc__list { margin: 0; padding: 0; list-style: none; }
.vq-toc__row { display: flex; align-items: baseline; padding-block: 13px; border-bottom: 1px solid transparent; color: var(--vq-ink); text-decoration: none; }
.vq-toc__name { flex: 0 1 auto; font-size: 17px; font-weight: 700; line-height: 1.6; transition: color .2s var(--vq-ease); }
/* The leader is a kashida: it runs from the service's name to "التفاصيل". */
.vq-toc__leader { position: relative; flex: 1 1 28px; min-inline-size: 28px; block-size: 2px; margin-inline: 14px; background: var(--vq-line); container-type: inline-size; transform-origin: right center; transition: background-color .25s var(--vq-ease); }
html[dir="ltr"] .vq-toc__leader { transform-origin: left center; }
.vq-toc__leader i { position: absolute; top: 50%; inset-inline-start: 0; inline-size: 9px; block-size: 9px; margin-top: -4.5px; background: var(--vq-burgundy); transform: rotate(45deg) scale(0); transition: transform .5s var(--vq-ease); }
.vq-toc__go { flex: none; color: var(--vq-olive); font-size: 14.5px; font-weight: 700; }
.vq-toc__row:hover, .vq-toc__row:focus-visible { color: var(--vq-ink); }
.vq-toc__row:hover .vq-toc__name, .vq-toc__row:focus-visible .vq-toc__name { color: var(--vq-olive); }
.vq-toc__row:hover .vq-toc__leader, .vq-toc__row:focus-visible .vq-toc__leader { background: var(--vq-olive); }
.vq-toc__row:hover .vq-toc__leader i, .vq-toc__row:focus-visible .vq-toc__leader i { transform: translateX(calc(-100cqw + 9px)) rotate(45deg) scale(1); }
html[dir="ltr"] .vq-toc__row:hover .vq-toc__leader i, html[dir="ltr"] .vq-toc__row:focus-visible .vq-toc__leader i { transform: translateX(calc(100cqw - 9px)) rotate(45deg) scale(1); }
@media (max-width: 575.98px) { .vq-toc__go { display: none; } .vq-toc__name { font-size: 16px; } .vq-toc__leader { margin-inline-end: 0; } }

/* 11. «من الفكرة إلى السوق»: the stages along one line; the three diamonds ride it ----------------------- */
.vq-journey { --step: clamp(300px, 33vw, 470px); background: var(--vq-olive-deep); color: var(--vq-sand); }
.vq-journey__pin { padding-block: clamp(64px, 8vw, 112px); }
.vq-journey__head .vq-head { margin-bottom: clamp(28px, 3.4vw, 52px); }
.vq-journey__viewport { position: relative; }
.vq-journey__track { position: relative; inline-size: max-content; max-inline-size: none; padding-inline: max(20px, calc((100vw - 1320px) / 2 + 20px)); }
.vq-journey__steps { display: flex; gap: clamp(48px, 6vw, 112px); margin: 0; padding: 0; list-style: none; }
.vq-journey__step { position: relative; flex: none; inline-size: var(--step); display: grid; grid-template-rows: auto 30px auto; align-content: start; row-gap: 22px; }
.vq-journey__art { aspect-ratio: 3 / 2; }
.vq-journey__art > .vq-art { inline-size: 100%; block-size: 100%; }
.vq-journey__dot { justify-self: start; align-self: center; inline-size: 20px; block-size: 20px; margin-inline-start: 3px; border: 3px solid var(--vq-sand); background: var(--vq-olive-deep); transform: rotate(45deg); transition: background-color .3s var(--vq-ease); position: relative; z-index: 1; }
.vq-journey__step.is-active .vq-journey__dot { background: var(--vq-sand); }
.vq-journey__title { margin: 0 0 8px; color: var(--vq-sand); font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.4; }
.vq-journey__text p { max-width: 36ch; margin: 0; color: var(--vq-on-dark-soft); font-size: 16px; line-height: 1.85; }
/* The line, at the height of the diamonds (the drawings are 3:2). */
.vq-journey__line { position: absolute; top: calc(var(--step) * 2 / 3 + 22px + 15px - 2px); inset-inline: 0; block-size: 4px; background: var(--vq-on-dark-line); }
.vq-journey__fill { position: absolute; inset: 0; background: var(--vq-sand); transform: scaleX(1); transform-origin: right center; }
html[dir="ltr"] .vq-journey__fill { transform-origin: left center; }
.vq-journey__rider { display: none; }
/* Wide screens: pinned, the line slides under the riders; stages not reached yet are dimmed. */
.vq-journey.is-pinned .vq-journey__pin { display: flex; flex-direction: column; justify-content: center; min-block-size: calc(100vh - var(--vq-header-h)); padding-block: clamp(40px, 5vh, 72px); }
.vq-journey.is-pinned .vq-journey__viewport { overflow: hidden; }
.vq-journey.is-pinned .vq-journey__track { will-change: transform; }
.vq-journey.is-pinned .vq-journey__rider { display: block; position: absolute; z-index: 2; top: calc(var(--step) * 2 / 3 + 22px + 15px - 41px); inset-inline-start: 30%; inline-size: 40px; color: var(--vq-sand); pointer-events: none; }
.vq-journey.is-pinned .vq-journey__step :is(.vq-journey__art, .vq-journey__text) { opacity: .38; transition: opacity .5s var(--vq-ease); }
.vq-journey.is-pinned .vq-journey__step.is-current :is(.vq-journey__art, .vq-journey__text) { opacity: 1; }
.vq-journey.is-pinned .vq-journey__step.is-active:not(.is-current) :is(.vq-journey__art, .vq-journey__text) { opacity: .62; }
/* Phones and tablets: the stages stack down a vertical line. */
@media (max-width: 991.98px) {
    .vq-journey { --step: min(100%, 520px); }
    .vq-journey__track { inline-size: auto; padding-inline: 0; margin-inline: auto; max-inline-size: 720px; padding-inline: 20px; }
    .vq-journey__steps { flex-direction: column; gap: 56px; padding-inline-start: 44px; }
    .vq-journey__step { inline-size: auto; grid-template-rows: auto auto; row-gap: 18px; }
    .vq-journey__dot { position: absolute; top: 6px; inset-inline-start: -44px; margin: 0; }
    .vq-journey__art { order: 2; max-inline-size: 420px; }
    .vq-journey__text { order: 1; }
    .vq-journey__line { top: 0; bottom: 0; inset-inline: auto; inset-inline-start: 30px; inline-size: 3px; block-size: auto; }
    .vq-journey__fill { transform-origin: center top; }
}

/* The four stage drawings (flat, in the brand colours on the olive-deep band). */
.vq-art { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.vq-art .a-paper { fill: var(--vq-sand); }
.vq-art .a-title { fill: var(--vq-ink); font: 700 15px var(--vq-font-display); }
.vq-art .a-rule { fill: var(--vq-line); }
.vq-art .a-rule--strong { fill: var(--vq-olive); }
.vq-art .a-mark { fill: rgba(90, 39, 48, .2); }
.vq-art .a-dia { fill: var(--vq-burgundy); stroke: var(--vq-sand); stroke-width: 1.5; }
.vq-art .a-grid { stroke: var(--vq-on-dark-line); stroke-width: 1; stroke-dasharray: 3 5; }
.vq-art .a-label { fill: var(--vq-sand); font: 700 13px var(--vq-font); }
.vq-art .a-label--soft { fill: var(--vq-on-dark-soft); font-weight: 400; }
.vq-art .a-bar { fill: var(--vq-sand); }
.vq-art .a-t1 { fill: var(--vq-burgundy); }
.vq-art .a-t2 { fill: var(--vq-sand); }
.vq-art .a-t3 { fill: var(--vq-olive); }
.vq-art .a-t4 { fill: var(--vq-sand-deep); }
.vq-art .a-t5 { fill: var(--vq-burgundy); opacity: .7; }
.vq-art .a-t6 { fill: var(--vq-sand); opacity: .55; }
.vq-art .a-mark-vq { fill: var(--vq-sand); overflow: visible; }
.vq-art .a-base { fill: var(--vq-sand); }
.vq-art .a-curve { fill: none; stroke: var(--vq-sand); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.vq-art .a-peak { fill: var(--vq-burgundy); stroke: var(--vq-sand); stroke-width: 1.5; }
.vq-art :is(.a-mark, .a-bar, .a-dia, .a-tile, .a-swatch, .a-peak, .vq-mark__sliver, .vq-mark__tail) { transform-box: fill-box; }

/* 12. Packages: paper sheets with a monthly / annual switch ------------------------------------------- */
.vq-pricing__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: var(--vq-block); }
.vq-pricing__head .vq-head { margin-bottom: 0; }
.vq-switch { display: inline-flex; padding: 4px; border: 1.5px solid var(--vq-olive); border-radius: calc(var(--vq-r) + 4px); }
.vq-switch[hidden] { display: none; }
.vq-switch button { min-block-size: 44px; min-inline-size: 92px; padding: 8px 18px; border: 0; border-radius: var(--vq-r); background: transparent; color: var(--vq-olive); font-size: 15.5px; font-weight: 700; cursor: pointer; transition: background-color .2s var(--vq-ease), color .2s var(--vq-ease); }
.vq-switch button[aria-pressed="true"] { background: var(--vq-olive); color: var(--vq-sand); }
.vq-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.vq-plan { --vq-btn-ground: var(--vq-paper); position: relative; isolation: isolate; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); }
.vq-plan::before, .vq-plan::after { content: ""; position: absolute; border-radius: 8px; clip-path: var(--vq-cut-lg); }
.vq-plan::before { inset: 0; z-index: -2; background: var(--vq-line); }
.vq-plan::after { inset: 1px; z-index: -1; border-radius: 7px; background: var(--vq-paper); }
.vq-plan.is-featured::before { background: var(--vq-burgundy); }
.vq-plan.is-featured::after { inset: 2px; }
.vq-plan__name { margin: 0; color: var(--vq-ink); font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.4; }
.vq-plan__reach { display: block; inline-size: calc(var(--reach, .5) * 100%); block-size: 4px; margin-top: 12px; background: var(--vq-olive); transform-origin: right center; }
html[dir="ltr"] .vq-plan__reach { transform-origin: left center; }
.vq-plan.is-featured .vq-plan__reach { background: var(--vq-burgundy); }
.vq-plan__summary { margin: 10px 0 0; color: var(--vq-muted); font-size: 15.5px; line-height: 1.85; }
.vq-plan__price { margin: 22px 0 0; padding: 18px 0; border-block: 1px solid var(--vq-line); }
.vq-plan__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.vq-plan__amount { color: var(--vq-olive); font: 700 clamp(38px, 3.6vw, 52px)/1.1 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.vq-plan.is-featured .vq-plan__amount { color: var(--vq-burgundy); }
.vq-plan__unit { color: var(--vq-muted); font-size: 15px; font-weight: 700; }
.vq-plan__figure[data-period="annual"] { margin-top: 4px; }
.vq-plan__figure[data-period="annual"] .vq-plan__amount { font-size: 20px; color: var(--vq-muted); }
.vq-plan__figure[data-period="annual"] .vq-plan__unit { font-size: 14px; font-weight: 400; }
[data-vq-pricing].is-switchable .vq-plan__figure[hidden] { display: none; }
[data-vq-pricing].is-switchable .vq-plan__figure[data-period="annual"] { margin-top: 0; }
[data-vq-pricing].is-switchable .vq-plan__figure[data-period="annual"] .vq-plan__amount { font-size: clamp(38px, 3.6vw, 52px); color: var(--vq-olive); }
[data-vq-pricing].is-switchable .vq-plan__figure[data-period="annual"] .vq-plan__unit { font-size: 15px; font-weight: 700; }
.vq-plan__body { flex: 1; padding-top: 22px; }
.vq-plan__group { margin: 18px 0 10px; color: var(--vq-olive); font: 700 15px/1.5 var(--vq-font); }
.vq-plan__group:first-child { margin-top: 0; }
.vq-plan__body .vq-list { gap: 8px; font-size: 15.5px; }
.vq-plan__more { margin: 14px 0 0; color: var(--vq-muted); font-size: 14.5px; }
.vq-plan__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.vq-plan__actions .vq-btn { flex: 1 1 auto; }
@media (max-width: 991.98px) { .vq-plans { grid-template-columns: minmax(0, 1fr); } }

/* 13. Selected work: a strip of prints that scrolls sideways ------------------------------------------ */
.vq-work { overflow: hidden; }
.vq-work__controls { display: flex; align-items: center; gap: 10px; }
.vq-work__controls .vq-link { margin-inline-start: 14px; }
.vq-work__btn { position: relative; display: grid; place-items: center; inline-size: 48px; block-size: 48px; padding: 0; border: 1.5px solid var(--vq-olive); border-radius: var(--vq-r); background: transparent; color: var(--vq-olive); cursor: pointer; transition: background-color .2s var(--vq-ease), color .2s var(--vq-ease), opacity .2s var(--vq-ease); }
.vq-work__btn i { inline-size: 10px; block-size: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-2px) rotate(45deg); }
.vq-work__btn--next i { transform: translateX(2px) rotate(-135deg); }
html[dir="ltr"] .vq-work__btn i { transform: translateX(2px) rotate(-135deg); }
html[dir="ltr"] .vq-work__btn--next i { transform: translateX(-2px) rotate(45deg); }
.vq-work__btn:hover:not(:disabled) { background: var(--vq-olive); color: var(--vq-sand); }
.vq-work__btn:disabled { opacity: .35; cursor: default; }
.vq-work__strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: end;
    gap: clamp(18px, 2vw, 28px);
    margin: 0;
    padding: 0 max(20px, calc((100vw - 1320px) / 2 + 20px)) 22px;
    scroll-padding-inline: max(20px, calc((100vw - 1320px) / 2 + 20px));
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--vq-olive) transparent;
    cursor: grab;
}
.vq-work__strip.is-grabbing { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.vq-work__item { scroll-snap-align: start; inline-size: var(--w); }
.vq-work__item--tall { --w: clamp(240px, 25vw, 380px); --ar: 4 / 5; }
.vq-work__item--square { --w: clamp(260px, 28vw, 420px); --ar: 1 / 1; }
.vq-work__item--wide { --w: clamp(320px, 40vw, 600px); --ar: 4 / 3; }
.vq-work__link { display: block; color: var(--vq-ink); text-decoration: none; -webkit-user-drag: none; }
.vq-work__media { display: block; aspect-ratio: var(--ar); overflow: hidden; border-radius: 8px; background: var(--vq-sand-deep); clip-path: var(--vq-cut-lg); }
.vq-work__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .8s var(--vq-ease); pointer-events: none; }
.vq-work__link:hover .vq-work__media img { transform: scale(1.04); }
.vq-work__name { display: block; max-inline-size: 34ch; margin-top: 14px; font: 600 17px/1.55 var(--vq-font-display); }
.vq-work__link:hover .vq-work__name, .vq-work__link:focus-visible .vq-work__name { color: var(--vq-olive); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
@media (max-width: 575.98px) { .vq-work__controls .vq-work__btn { display: none; } .vq-work__item--tall { --w: 68vw; } .vq-work__item--square { --w: 72vw; } .vq-work__item--wide { --w: 82vw; } }

/* 14. Clients on our line: logos stand on kashida baselines like words in a sentence ------------------ */
.vq-clients__line {
    --row: clamp(120px, 10vw, 156px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0 clamp(28px, 3.6vw, 60px);
    margin: 0;
    padding: 0;
    list-style: none;
    background-image: linear-gradient(to top, var(--vq-olive) 0 3px, transparent 3px);
    background-size: 100% var(--row);
    background-repeat: no-repeat repeat;
    background-position: right top;
}
html[dir="ltr"] .vq-clients__line { background-position: left top; }
.vq-clients__item { display: flex; align-items: flex-end; block-size: var(--row); padding-bottom: 18px; }
@media (max-width: 575.98px) { .vq-clients__line { --row: 96px; justify-content: space-around; gap: 0 20px; } .vq-clients__item img { max-inline-size: 30vw; } }
.vq-clients__item a { display: contents; }
.vq-clients__item img { display: block; max-block-size: calc(var(--row) * .58); max-inline-size: clamp(120px, 12.5vw, 196px); inline-size: auto; block-size: auto; object-fit: contain; mix-blend-mode: multiply; }

/* 15. Latest articles ---------------------------------------------------------------------------------- */
.vq-posts__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(28px, 4vw, 64px); align-items: start; }
.vq-post { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; align-items: start; padding-block: 22px; border-bottom: 1px solid var(--vq-line); }
.vq-post--lead { grid-row: span 3; display: block; padding: 0; border: 0; }
.vq-posts__grid > .vq-post:nth-child(2) { border-top: 2px solid var(--vq-olive); }
.vq-post__media { display: block; aspect-ratio: 4 / 3; background: var(--vq-sand-deep); }
.vq-post--lead .vq-post__media { aspect-ratio: 16 / 9; margin-bottom: 22px; }
.vq-post__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .7s var(--vq-ease); }
.vq-post:hover .vq-post__media img { transform: scale(1.03); }
.vq-post__date { display: block; margin-bottom: 6px; color: var(--vq-muted); font-size: 14px; font-weight: 700; }
.vq-post__title { margin: 0; font-size: 18.5px; font-weight: 600; line-height: 1.6; }
.vq-post--lead .vq-post__title { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.5; }
.vq-post__title a { color: var(--vq-ink); text-decoration: none; }
.vq-post__title a:hover { color: var(--vq-olive); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.vq-post__desc { margin: 12px 0 0; color: var(--vq-muted); }
.vq-posts__grid--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
@media (max-width: 991.98px) { .vq-posts__grid { grid-template-columns: minmax(0, 1fr); } .vq-post--lead { grid-row: auto; margin-bottom: 18px; } }
@media (max-width: 575.98px) { .vq-post { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; } .vq-post__title { font-size: 16.5px; } }

/* 16. FAQ ----------------------------------------------------------------------------------------------- */
.vq-faq__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.vq-faq__aside { position: sticky; top: calc(var(--vq-header-h) + 32px); }
.vq-faq__aside .vq-head { margin-bottom: 28px; }
.vq-faq__note { padding-top: 22px; border-top: 1px solid var(--vq-line); }
.vq-faq__note-title { margin: 0 0 4px; font: 600 20px/1.5 var(--vq-font-display); }
.vq-faq__note p { color: var(--vq-muted); }
.vq-faq__note .vq-btn { margin-top: 8px; }
.vq-faq__group { border-top: 2px solid var(--vq-olive); }
.vq-faq__group + .vq-faq__group { margin-top: 44px; }
.vq-faq__group-title { margin: 0; padding: 14px 0 6px; color: var(--vq-olive); font: 700 15px/1.5 var(--vq-font); }
.vq-faq__item { border-bottom: 1px solid var(--vq-line); }
.vq-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 21px; color: var(--vq-ink); font-size: 18px; font-weight: 700; line-height: 1.65; list-style: none; cursor: pointer; transition: color .2s var(--vq-ease); }
.vq-faq__item summary::-webkit-details-marker { display: none; }
.vq-faq__item summary:hover, .vq-faq__item[open] summary { color: var(--vq-olive); }
/* An outlined diamond that fills when the answer is open. */
.vq-faq__mark { flex: none; inline-size: 13px; block-size: 13px; margin-inline: 4px; border: 2px solid currentColor; transform: rotate(45deg); transition: background-color .2s var(--vq-ease), transform .3s var(--vq-ease); }
.vq-faq__item[open] .vq-faq__mark { background: var(--vq-burgundy); border-color: var(--vq-burgundy); transform: rotate(225deg); }
.vq-faq__answer { max-width: 68ch; padding: 0 0 24px; color: var(--vq-muted); line-height: 1.95; }
.vq-faq__answer p:last-child { margin-bottom: 0; }
@media (max-width: 991.98px) { .vq-faq__layout { grid-template-columns: minmax(0, 1fr); } .vq-faq__aside { position: static; } }

/* 17. Closing band: the invitation standing on the stretched wordmark ----------------------------------- */
.vq-cta { background: var(--vq-burgundy); --vq-btn-ground: var(--vq-burgundy); padding-block: clamp(64px, 8vw, 120px) clamp(28px, 3vw, 44px); overflow: hidden; }
.vq-cta--olive { background: var(--vq-olive-deep); --vq-btn-ground: var(--vq-olive-deep); padding-bottom: clamp(60px, 7vw, 104px); }
.vq-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(24px, 4vw, 64px); }
.vq-cta__title { margin: 0; color: var(--vq-sand); font-size: clamp(30px, 3.6vw, 54px); font-weight: 600; line-height: 1.3; }
.vq-cta__text { max-width: 60ch; margin: 12px 0 0; color: var(--vq-on-dark-soft); font-size: var(--vq-fs-lead); }
.vq-cta__actions { justify-content: flex-end; }
.vq-cta__mark { margin-top: clamp(44px, 6vw, 96px); }
.vq-wordmark { display: block; overflow: visible; }
.vq-cta__wordmark { inline-size: 100%; block-size: clamp(76px, 13vw, 210px); fill: var(--vq-sand); }
@media (max-width: 991.98px) { .vq-cta__inner { grid-template-columns: minmax(0, 1fr); } .vq-cta__actions { justify-content: flex-start; } }

/* 18. About --------------------------------------------------------------------------------------------- */
.vq-about__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 88px); padding-top: var(--vq-block); border-top: 1px solid var(--vq-line); }
.vq-about__title { margin: 0 0 14px; color: var(--vq-ink); font-size: clamp(21px, 1.8vw, 25px); font-weight: 600; }
.vq-about__approach p { color: var(--vq-muted); font-size: 17.5px; line-height: 1.95; }
.vq-about__pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: var(--vq-section) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--vq-olive); }
.vq-about__pillars li { padding: 26px 0 0; padding-inline-end: 28px; }
.vq-about__pillars li + li { padding-inline-start: 28px; border-inline-start: 1px solid var(--vq-line); }
.vq-about__pillars p { margin: 0; color: var(--vq-muted); }
@media (max-width: 991.98px) {
    .vq-about__split { grid-template-columns: minmax(0, 1fr); }
    .vq-about__pillars { grid-template-columns: minmax(0, 1fr); }
    .vq-about__pillars li, .vq-about__pillars li + li { padding: 22px 0; border-inline-start: 0; border-bottom: 1px solid var(--vq-line); }
}

/* 19. Package page ------------------------------------------------------------------------------------- */
.vq-package__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: end; }
.vq-package__label { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--vq-olive); font-weight: 700; }
.vq-package__label .vq-diamonds { inline-size: 26px; flex: none; }
.vq-package__lead { margin: 0; color: var(--vq-ink); font-size: clamp(20px, 2vw, 28px); font-family: var(--vq-font-display); font-weight: 500; line-height: 1.6; }
.vq-package__price { padding: 26px 0 0; border-top: 2px solid var(--vq-olive); }
.vq-package__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.vq-package__figure bdi { color: var(--vq-burgundy); font: 700 clamp(46px, 5vw, 72px)/1.05 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.vq-package__figure span { color: var(--vq-muted); font-size: 16px; font-weight: 700; }
.vq-package__note { margin: 6px 0 18px; color: var(--vq-muted); font-size: 15px; }
.vq-package__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--vq-block) 0 0; border-block: 1px solid var(--vq-line); }
.vq-package__stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 22px 0; padding-inline-end: 20px; }
.vq-package__stats > div + div { padding-inline-start: 24px; border-inline-start: 1px solid var(--vq-line); }
.vq-package__stats dd { margin: 0; color: var(--vq-olive); font: 700 clamp(32px, 3vw, 44px)/1.15 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.vq-package__stats dt { color: var(--vq-muted); font-size: 15px; font-weight: 700; }
.vq-package__phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin: var(--vq-section) 0 0; padding: 0; list-style: none; }
.vq-package__phase { position: relative; isolation: isolate; padding: clamp(24px, 2.6vw, 34px); }
.vq-package__phase::before, .vq-package__phase::after { content: ""; position: absolute; border-radius: 8px; clip-path: var(--vq-cut-lg); }
.vq-package__phase::before { inset: 0; z-index: -2; background: var(--vq-line); }
.vq-package__phase::after { inset: 1px; z-index: -1; border-radius: 7px; background: var(--vq-paper); }
.vq-package__stage { margin: 0 0 4px; color: var(--vq-olive); font-size: 14.5px; font-weight: 700; }
.vq-package__phase-title { margin: 0 0 16px; color: var(--vq-ink); font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.5; }
.vq-package__phase .vq-list { font-size: 15.5px; }
.vq-package__order { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin-top: var(--vq-section); padding: clamp(28px, 4vw, 52px); border-radius: 8px; clip-path: var(--vq-cut-lg); background: var(--vq-olive); }
.vq-package__order-title { margin: 0 0 6px; color: var(--vq-sand); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; }
.vq-package__order p { margin: 0; color: var(--vq-on-dark-soft); }
@media (max-width: 991.98px) {
    .vq-package__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .vq-package__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vq-package__stats > div:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
    .vq-package__stats > div:nth-child(n + 3) { border-top: 1px solid var(--vq-line); }
    .vq-package__phases { grid-template-columns: minmax(0, 1fr); }
}

/* 20. Contact and forms -------------------------------------------------------------------------------- */
.vq-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.vq-channels { margin: 0 0 28px; padding: 0; list-style: none; border-top: 2px solid var(--vq-olive); }
.vq-channel { display: grid; grid-template-columns: minmax(0, 12ch) minmax(0, 1fr); align-items: baseline; gap: 6px 18px; padding-block: 18px; border-bottom: 1px solid var(--vq-line); }
.vq-channel__label { display: inline-flex; align-items: center; gap: 10px; color: var(--vq-ink); font-weight: 700; }
.vq-channel__label::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; background: var(--vq-olive); transform: rotate(45deg); }
.vq-channel__value { color: var(--vq-muted); overflow-wrap: anywhere; text-align: start; }
a.vq-channel__value { color: var(--vq-olive); font-weight: 700; text-decoration: underline; text-underline-offset: .4em; }
[dir="rtl"] .vq-channel__value[dir="ltr"] { text-align: right; }
.vq-contact__form { position: relative; isolation: isolate; padding: clamp(24px, 3.6vw, 48px); border: 0; border-radius: 8px; background: none; box-shadow: none; }
.vq-contact__form::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px; clip-path: var(--vq-cut-lg); background: var(--vq-sand-deep); }
.vq-contact__form-title { margin: 0 0 6px; color: var(--vq-ink); font-size: clamp(22px, 2vw, 28px); font-weight: 600; }
.vq-contact__form-desc { margin: 0 0 24px; color: var(--vq-muted); font-size: 15px; }
@media (max-width: 991.98px) { .vq-contact__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) { .vq-channel { grid-template-columns: minmax(0, 1fr); } }

.contact-form label, .contact-form .form-label, .quotation-form label { margin-bottom: 6px; color: var(--vq-ink); font-size: 14.5px; font-weight: 700; }
.contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .contact-form select, .contact-form textarea,
.contact__form-wrap input:not([type="checkbox"]):not([type="radio"]), .contact__form-wrap textarea, .contact__form-wrap select,
.contact__form-wrap form .form-grp textarea, .contact__form-wrap form .form-grp input:not([type="checkbox"]):not([type="radio"]), .contact__form-wrap form .form-grp select,
.services__sidebar input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .services__sidebar textarea, .services__sidebar select {
    inline-size: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid var(--vq-field);
    border-radius: var(--vq-r);
    background: var(--vq-paper);
    color: var(--vq-ink);
    font-size: 16px;
    box-shadow: none;
    transition: border-color .2s var(--vq-ease), box-shadow .2s var(--vq-ease);
}
.contact-form textarea, .contact__form-wrap textarea, .services__sidebar textarea { min-height: 140px; max-height: none; resize: vertical; }
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: var(--vq-ink); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus,
.services__sidebar input:focus, .services__sidebar textarea:focus { outline: 0; border-color: var(--vq-olive); box-shadow: 0 0 0 3px var(--vq-sand), 0 0 0 5px var(--vq-olive-deep); }
.contact-form ::placeholder, .services__sidebar ::placeholder { color: #6F6A5A; }
.contact-form .form-grp { margin-bottom: 16px; }
.contact-form button[type="submit"] { inline-size: 100%; min-height: 56px; margin-top: 6px; font-size: 17px; }
.contact-form .text-danger, .contact-form .invalid-feedback { font-size: 13.5px; }
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[name="phone"], [dir="rtl"] input[name="email"] { direction: ltr; text-align: right; }

/* 21. Service page, sidebar widgets, page content, blog, 404 ------------------------------------------ */
.services__details-area, .blog__area, .blog__details-area { padding-block: clamp(56px, 7vw, 96px) !important; background: transparent; }
.vq-service__lead { margin: 0 0 1.4em; padding-inline-start: 22px; border-inline-start: 4px solid var(--vq-olive); color: var(--vq-ink); font-family: var(--vq-font); font-size: clamp(18px, 1.5vw, 21px); font-weight: 300; line-height: 1.9; }
.services__details-thumb { margin-bottom: 32px; }
.services__details-thumb img, .blog__details-thumb img { inline-size: 100%; }
.vq-service__ask { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 22px; align-items: center; margin-top: var(--vq-block); padding-top: 28px; border-top: 2px solid var(--vq-olive); }
.vq-service__ask .vq-diamonds { inline-size: 38px; color: var(--vq-olive); grid-row: span 2; align-self: start; margin-top: 6px; }
.vq-service__ask-title { margin: 0; font-size: clamp(21px, 1.9vw, 26px); font-weight: 600; }
.vq-service__ask p { margin: 4px 0 0; color: var(--vq-muted); }
.vq-service__ask .vq-actions { grid-column: 2; margin-top: 8px; }

.ck-content > p, .ck-content > ul, .ck-content > ol, .services__details-content p { color: var(--vq-muted); font-size: 17.5px; line-height: 1.95; }
.ck-content > h2, .ck-content > h3, .ck-content > h4 { margin: 1.6em 0 .6em; color: var(--vq-ink); font-weight: 600; }
.ck-content > h2 { font-size: clamp(23px, 2.2vw, 30px); }
.ck-content > h3 { font-size: clamp(20px, 1.8vw, 23px); }
.ck-content > ul { padding: 0; list-style: none; }
.ck-content > ul li { position: relative; margin-bottom: .5em; padding-inline-start: 24px; }
.ck-content > ul li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .7em; inline-size: 8px; block-size: 8px; background: var(--vq-olive); transform: rotate(45deg); }
.ck-content > ol { padding-inline-start: 1.3em; }
.ck-content > ol li::marker { color: var(--vq-olive); font-weight: 700; }
.ck-content > blockquote { margin: 1.5em 0; padding: 4px 22px; border-inline-start: 4px solid var(--vq-olive); background: none; color: var(--vq-ink); }
.ck-content > :is(p, ul, ol, blockquote, h2, h3, h4) a { color: var(--vq-olive); font-weight: 700; }
/* Terms: numbered clauses in a reading column (the numbers are the clause numbers, not decoration). */
.vq-legal { max-width: 820px; margin-inline: auto; padding-block: clamp(48px, 6vw, 88px); }
.vq-legal__item { padding-block: 28px; border-bottom: 1px solid var(--vq-line); }
.vq-legal__item:first-child { border-top: 2px solid var(--vq-olive); }
.vq-legal__item h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; color: var(--vq-ink); font-size: clamp(21px, 2vw, 26px); font-weight: 600; }
.vq-legal__num { flex: none; color: var(--vq-olive); font: 700 18px/1 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.vq-legal__item p, .vq-legal__item li { color: var(--vq-muted); font-size: 16.5px; line-height: 1.95; }
.vq-legal__item p:last-child { margin-bottom: 0; }
.vq-legal__item ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.vq-legal__item li { position: relative; padding-inline-start: 22px; }
.vq-legal__item li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .8em; inline-size: 8px; block-size: 8px; background: var(--vq-olive); transform: rotate(45deg); }
.vq-legal__note { margin: 14px 0 0; padding: 12px 18px; border-inline-start: 4px solid var(--vq-burgundy); background: var(--vq-sand-deep); color: var(--vq-ink) !important; font-weight: 700; }

/* Legal and other long pages read in a column. */
.page-template-default .ck-content, .vq-prose { max-width: 820px; margin-inline: auto; padding-block: clamp(48px, 6vw, 88px); }

.services__sidebar > div, .services__sidebar .sidebar__widget, .blog__sidebar .sidebar__widget, .blog__sidebar > div {
    margin-bottom: 36px;
    padding: 0 !important;
    border: 0 !important;
    border-top: 2px solid var(--vq-olive) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.services__sidebar .title, .sidebar__widget-title, .blog__sidebar .title { margin: 0; padding: 14px 0 10px; color: var(--vq-ink); font-size: 20px; font-weight: 600; }
.services__sidebar .services__cat-list li { margin: 0; }
.services__sidebar .services__cat-list li a { display: block; padding: 12px 0; border: 0; border-bottom: 1px solid var(--vq-line); border-radius: 0; background: none; color: var(--vq-ink); font-weight: 700; }
.services__sidebar .services__cat-list li a i, .services__sidebar .services__cat-list li a svg { display: none; }
.services__sidebar .services__cat-list li.active a, .services__sidebar .services__cat-list li a:hover { background: none; color: var(--vq-olive); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.services__sidebar .services__brochure, .services__sidebar .services__widget-contact, .services__sidebar [class*="contact"] { background: var(--vq-sand-deep) !important; color: var(--vq-ink) !important; }
.services__sidebar [class*="contact"] * { color: inherit; }
.services__sidebar .btn, .services__sidebar button[type="submit"] { --vq-btn-face: var(--vq-olive); }

.blog-post-item, .blog__post-item, .blog__post-two, .blog__post-item-two { border: 0 !important; border-bottom: 1px solid var(--vq-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.blog__post-thumb-two img, .blog__post-thumb img { border-radius: var(--vq-r) !important; }
.blog__post-content-two { padding: 0 !important; background: none !important; }
.shine-animate::before, .shine-animate::after { display: none !important; }
.pagination .page-link { border-radius: var(--vq-r) !important; color: var(--vq-ink); }
.pagination .page-item.active .page-link { border-color: var(--vq-olive); background: var(--vq-olive); color: var(--vq-sand); }

.vq-404__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.vq-404__mark { display: block; inline-size: min(100%, 380px); margin-inline: auto; fill: var(--vq-olive); }
.vq-404__mark .vq-mark__tail { fill: none; stroke: var(--vq-olive); stroke-width: 2.5; stroke-dasharray: 6 6; }
.vq-404__code { margin: 0; color: var(--vq-burgundy); font: 700 clamp(56px, 7vw, 96px)/1 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.vq-404__title { margin: 12px 0 10px; font-size: var(--vq-fs-h2); font-weight: 600; line-height: 1.4; }
.vq-404__text { margin: 0 0 28px; color: var(--vq-muted); font-size: var(--vq-fs-lead); }
@media (max-width: 767.98px) { .vq-404__grid { grid-template-columns: minmax(0, 1fr); } .vq-404__mark { inline-size: min(70%, 260px); margin-inline: 0; } }

/* 22. Footer -------------------------------------------------------------------------------------------- */
.vq-footer { position: relative; padding-top: clamp(56px, 7vw, 96px); background: var(--vq-olive-deep); color: var(--vq-on-dark); text-align: start; }
.vq-footer__brand { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; padding-bottom: 34px; border-bottom: 1px solid var(--vq-on-dark-line); }
.vq-footer__logo img { display: block; block-size: clamp(36px, 3.6vw, 48px); inline-size: auto; }
.vq-footer__slogan { margin: 0; color: var(--vq-sand); font: 500 clamp(19px, 2vw, 27px)/1.5 var(--vq-font-display); --vq-kashida-w: 1.8em; }
.vq-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(28px, 5vw, 80px); padding-block: 40px 48px; }
.vq-footer__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--vq-sand); font: 800 16px/1.5 var(--vq-font); }
.vq-footer__title::before { content: ""; inline-size: 8px; block-size: 8px; background: var(--vq-sand); transform: rotate(45deg); }
.vq-footer__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vq-footer__list li { margin: 0; border: 0; }
.vq-footer__list .sub-menu { display: none; }
.vq-footer__list a, .vq-footer__list span { display: inline-block; padding: 5px 0; color: var(--vq-on-dark-soft); font-size: 15.5px; line-height: 1.6; text-decoration: none; }
.vq-footer__list a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: .4em; }
.vq-footer__list a::before, .vq-footer__list a::after { display: none; }
.vq-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.vq-footer__social a { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--vq-on-dark-line); border-radius: var(--vq-r); color: var(--vq-sand); }
.vq-footer__social a:hover { border-color: var(--vq-sand); background: var(--vq-sand); color: var(--vq-olive-deep); }
.vq-footer__social svg { inline-size: 20px; block-size: 20px; }
.vq-footer__bottom { padding-block: 20px 26px; border-top: 1px solid var(--vq-on-dark-line); }
.vq-footer__bottom p { margin: 0; color: var(--vq-on-dark-soft); font-size: 14px; line-height: 1.9; }
.vq-footer__bottom a { color: var(--vq-sand); }
@media (max-width: 767.98px) { .vq-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vq-footer__cols > :last-child { grid-column: 1 / -1; } }

/* 23. Overlays ----------------------------------------------------------------------------------------- */
.whatsapp-float { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 1000; display: grid; place-items: center; inline-size: 54px; block-size: 54px; padding: 0; border-radius: 50%; background: var(--vq-olive); color: var(--vq-sand); box-shadow: 0 12px 24px -12px rgba(31, 33, 23, .6), inset 0 0 0 1.5px rgba(240, 232, 218, .35); transition: opacity .35s var(--vq-ease), transform .35s var(--vq-ease), background-color .2s var(--vq-ease); }
.whatsapp-float:hover { background: var(--vq-olive-deep); color: var(--vq-sand); }
body:has(.vq-stage):not(.vq-past-stage) .whatsapp-float { opacity: 0; transform: scale(.6); pointer-events: none; }
.whatsapp-float svg { inline-size: 30px; block-size: 30px; }
.scroll__top { border-radius: var(--vq-r) !important; background: var(--vq-olive) !important; color: var(--vq-sand) !important; }
.site-notice { font-family: var(--vq-font) !important; }
/* Cookie notice: a slim olive-deep strip with a sand button (the plugin paints it black inline). */
.site-notice { background: var(--vq-olive-deep) !important; color: var(--vq-sand) !important; border-top: 1px solid var(--vq-on-dark-line); }
.site-notice .site-notice__message, .site-notice .site-notice__message * { color: var(--vq-sand) !important; font-size: 15px; }
.site-notice .site-notice__message a { text-decoration: underline; }
.site-notice button, .site-notice .site-notice__agree { min-height: 44px; padding: 8px 22px; border: 0 !important; border-radius: var(--vq-r) !important; background: var(--vq-sand) !important; color: var(--vq-olive-deep) !important; font-weight: 700 !important; }

/* 24. Motion. Everything plays once and only when html.vq-motion is set (by varelq.js, never under reduced
   motion), so without JS every element is in its final place. ------------------------------------------ */
@keyframes vq-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes vq-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
    /* Titles: the kashida draws out from the last letter. */
    .vq-motion :is(.vq-head, .vq-pagehead, .vq-align__close, .vq-footer__brand, .vq-404) .vq-kashida { transform: scaleX(0); transition: transform 1s var(--vq-ease) .15s; }
    .vq-motion :is(.vq-head, .vq-pagehead, .vq-align__close, .vq-footer__brand, .vq-404).is-in .vq-kashida { transform: scaleX(1); }

    /* Contents page: the leaders draw in line by line. */
    .vq-motion .vq-toc__chapter .vq-toc__leader { transform: scaleX(0); transition: transform .8s var(--vq-ease) calc(.1s + var(--i, 0) * 70ms), background-color .25s var(--vq-ease); }
    .vq-motion .vq-toc__chapter.is-in .vq-toc__leader { transform: scaleX(1); }
    .vq-motion .vq-toc__chapter .vq-toc__title { clip-path: inset(0 0 0 100%); transition: clip-path .8s var(--vq-ease); }
    html[dir="ltr"].vq-motion .vq-toc__chapter .vq-toc__title { clip-path: inset(0 100% 0 0); }
    .vq-motion .vq-toc__chapter.is-in .vq-toc__title { clip-path: inset(0 0 0 0); }

    /* Packages rise in turn; each one's reach-line draws. */
    .vq-motion .vq-plan[data-vq-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--vq-ease) calc(var(--i, 0) * 90ms), transform .7s var(--vq-ease) calc(var(--i, 0) * 90ms); }
    .vq-motion .vq-plan[data-vq-reveal].is-in { opacity: 1; transform: none; }
    .vq-motion .vq-plan .vq-plan__reach { transform: scaleX(0); transition: transform 1.1s var(--vq-ease) calc(.3s + var(--i, 0) * 90ms); }
    .vq-motion .vq-plan.is-in .vq-plan__reach { transform: scaleX(1); }

    /* Work: each print is uncovered along the diagonal of the VQ cut. */
    .vq-motion .vq-work__media[data-vq-reveal] { clip-path: polygon(100% 0, 100% 0, 100% 100%, 140% 100%, 140% 100%); transition: clip-path 1.1s var(--vq-ease) calc(var(--i, 0) * 80ms); }
    html[dir="ltr"].vq-motion .vq-work__media[data-vq-reveal] { clip-path: polygon(0 0, 0 0, -40% 100%, -40% 100%, 0 100%); }
    .vq-motion .vq-work__media[data-vq-reveal].is-in { clip-path: var(--vq-cut-lg); }

    /* Clients: the baselines draw, then the logos settle onto them. */
    .vq-motion .vq-clients__line[data-vq-reveal] { background-size: 0% var(--row); transition: background-size 1.3s var(--vq-ease); }
    .vq-motion .vq-clients__line[data-vq-reveal].is-in { background-size: 100% var(--row); }
    .vq-motion .vq-clients__line[data-vq-reveal] img { opacity: 0; transform: translateY(-22px); transition: opacity .6s var(--vq-ease) calc(.35s + var(--i, 0) * 60ms), transform .6s var(--vq-ease) calc(.35s + var(--i, 0) * 60ms); }
    .vq-motion .vq-clients__line[data-vq-reveal].is-in img { opacity: 1; transform: none; }

    /* Stage drawings: hidden parts wait for .is-active (set when the riding diamonds reach the stage). */
    .vq-motion .vq-journey__step .a-mark, .vq-motion .vq-journey__step .a-bar { transform: scaleX(0); transform-origin: right center; transition: transform .8s var(--vq-ease) calc(.15s + var(--i, 0) * 120ms); }
    .vq-motion .vq-journey__step .a-mark:nth-of-type(2) { transition-delay: .45s; }
    .vq-motion .vq-journey__step.is-active :is(.a-mark, .a-bar) { transform: none; }
    .vq-motion .vq-journey__step :is(.a-dia, .a-tile, .a-swatch) { opacity: 0; transform: scale(.4); transform-origin: center; transition: opacity .45s var(--vq-ease) calc(.25s + var(--i, 0) * 110ms), transform .45s var(--vq-ease) calc(.25s + var(--i, 0) * 110ms); }
    .vq-motion .vq-journey__step.is-active :is(.a-dia, .a-tile, .a-swatch) { opacity: 1; transform: none; }
    .vq-motion .vq-journey__step .a-curve { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--vq-ease) .2s; }
    .vq-motion .vq-journey__step.is-active .a-curve { stroke-dashoffset: 0; }
    .vq-motion .vq-journey__step .a-peak { opacity: 0; transform: translateY(-20px); transition: opacity .5s var(--vq-ease) 1.5s, transform .5s var(--vq-ease) 1.5s; }
    .vq-motion .vq-journey__step.is-active .a-peak { opacity: 1; transform: none; }
    .vq-motion .vq-journey__step .a-mark-vq :is(.vq-mark__sliver, .vq-mark__tail) { opacity: 0; transition: opacity .6s var(--vq-ease) .9s, transform .8s var(--vq-ease) .9s; }
    .vq-motion .vq-journey__step .a-mark-vq .vq-mark__sliver { transform: translate(-40px, 70px); }
    .vq-motion .vq-journey__step .a-mark-vq .vq-mark__tail { transform: translate(46px, 66px); transition-delay: 1.1s; }
    .vq-motion .vq-journey__step.is-active .a-mark-vq :is(.vq-mark__sliver, .vq-mark__tail) { opacity: 1; transform: none; }

    /* Page-to-page: the header stays, the page underneath slides up into place. */
    @view-transition { navigation: auto; }
    .tg-header__style-four { view-transition-name: vq-header; }
    ::view-transition-old(root) { animation: vq-vt-out .26s var(--vq-ease) both; }
    ::view-transition-new(root) { animation: vq-vt-in .42s var(--vq-ease) both; }
}
@keyframes vq-vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vq-vt-in { from { opacity: 0; transform: translateY(16px); } }

/* Phones: everything that opens a section is centred (hero copy, titles, leads, actions); lists, rows and long
   text keep the reading edge. */
@media (max-width: 767.98px) {
    .vq-stage__copy { margin-inline: auto; text-align: center; }
    .vq-stage__l1 { margin-inline: auto; }
    .vq-stage__lead { margin-inline: auto; }
    .vq-stage .vq-actions { justify-content: center; }

    .vq-head, .vq-head--statement { margin-inline: auto; text-align: center; }
    /* A centred title carries its kashida centred underneath, so the title itself stays on the axis. */
    :is(.vq-head__title, .vq-pagehead__title, .vq-align__close, .vq-footer__slogan, .vq-404__title) .vq-kashida { display: block; inline-size: 1.6em; margin: .3em auto 0; transform-origin: center; }
    .vq-head__lead { margin-inline: auto; }
    .vq-section__top, .vq-pricing__head { flex-direction: column; align-items: center; text-align: center; }
    .vq-section__foot { text-align: center; }
    .vq-work__controls { justify-content: center; }
    .vq-toc__total { text-align: center; }
    .vq-align__lead { margin-inline: auto; text-align: center; }
    .vq-align__close, .vq-align__close:is(*) { margin-inline: auto; text-align: center; }
    .vq-faq__aside, .vq-faq__note { text-align: center; }
    .vq-cta__copy { text-align: center; }
    .vq-cta__actions { justify-content: center; }
    .vq-package__top { text-align: center; }
    .vq-package__label { justify-content: center; }
    .vq-package__figure { justify-content: center; }
    .vq-package__order { flex-direction: column; text-align: center; }
    .vq-contact__aside > .vq-head { text-align: center; }
    .vq-service__ask { text-align: center; justify-items: center; }
    .vq-service__ask .vq-actions { justify-content: center; }
    .vq-pagehead__inner { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
    .vq-pagehead__dots { order: -1; margin: 0; }
    .vq-crumbs ol { justify-content: center; }
    .vq-404 .vq-actions { justify-content: center; }
    .vq-404__grid { text-align: center; }
    .vq-404__mark { margin-inline: auto; }
    .vq-footer__brand { flex-direction: column; align-items: center; text-align: center; }
    .vq-footer__bottom { text-align: center; }
}

/* 25. Tablets and phones --------------------------------------------------------------------------------- */


@media (max-width: 575.98px) {
    :root { --vq-fs-h2: 25px; --vq-fs-lead: 16px; --vq-section: 64px; --vq-block: 30px; }
    body { font-size: 16px; }
    .vq-stage__l1 { max-inline-size: 7em; font-size: clamp(44px, 13.4vw, 56px); line-height: 1.12; }
    .vq-stage__l2 { margin-top: 2px; font-size: clamp(23px, 6.8vw, 29px); }
    .vq-stage__lead { max-inline-size: 30ch; font-size: 16px; line-height: 1.85; margin-top: 14px; }
    .vq-stage .vq-actions { margin-top: 22px; align-items: center; gap: 6px 22px; }
    .vq-stage .vq-actions .vq-btn--light { flex: 1 1 100%; }
    /* the second action is a text link on phones, not a second slab */
    .vq-stage .vq-actions .vq-btn--line-light { --vq-btn-edge: transparent; --vq-btn-face: transparent; min-height: 44px; padding: 8px 0; text-decoration: underline; text-underline-offset: .5em; }
    .vq-align__stage { margin-block: 40px; }
    .vq-pagehead__title { font-size: 30px; }
    .vq-pagehead__dots { inline-size: 36px; }
    .vq-plan__actions .vq-btn { flex: 1 1 100%; }
    .vq-cta__actions .vq-btn, .vq-package__order .vq-btn { inline-size: 100%; }
    .vq-faq__item summary { font-size: 16.5px; }
    .vq-footer__cols { grid-template-columns: minmax(0, 1fr); }
    .vq-service__ask { grid-template-columns: minmax(0, 1fr); }
    .vq-service__ask .vq-diamonds { grid-row: auto; }
    .vq-service__ask .vq-actions { grid-column: auto; }
}