/*
 * ڤارلك (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). The hero's tilted tiles use "optional" copies of the faces: a late swap there would
   reflow text inside the 3D table, which Chrome counts as a full-screen layout shift. -------------------------- */
@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: "VQ Tile Display"; font-weight: 400 700; font-display: optional; 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+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "VQ Tile Display"; font-weight: 400 700; font-display: optional; src: url("../fonts/reem-kufi/ReemKufi-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "VQ Tile Body"; font-weight: 700; font-display: optional; src: url("../fonts/almarai/Almarai-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "VQ Tile Body"; font-weight: 700; font-display: optional; src: url("../fonts/almarai/Almarai-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@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; }
/* Lyon Arabic (Commercial Type), picked in Theme options › Typography: Display for headings, Text for body text.
   Each file carries Arabic + Latin. The ranges map the weights the site asks for onto the cuts that exist. */
@font-face { font-family: "Lyon Arabic Display"; font-style: normal; font-weight: 100 300; font-display: swap; src: url("../fonts/lyon-arabic/LyonArabicDisplay-300.woff2") format("woff2"); }
@font-face { font-family: "Lyon Arabic Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lyon-arabic/LyonArabicDisplay-400.woff2") format("woff2"); }
@font-face { font-family: "Lyon Arabic Display"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/lyon-arabic/LyonArabicDisplay-500.woff2") format("woff2"); }
@font-face { font-family: "Lyon Arabic Display"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/lyon-arabic/LyonArabicDisplay-700.woff2") format("woff2"); }
@font-face { font-family: "Lyon Arabic Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/lyon-arabic/LyonArabicDisplay-900.woff2") format("woff2"); }
@font-face { font-family: "Lyon Arabic Text"; font-style: normal; font-weight: 100 400; font-display: swap; src: url("../fonts/lyon-arabic/LyonArabicText-400.woff2") format("woff2"); }
@font-face { font-family: "Lyon Arabic Text"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/lyon-arabic/LyonArabicText-600.woff2") format("woff2"); }
@font-face { font-family: "Lyon Arabic Text"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/lyon-arabic/LyonArabicText-700.woff2") format("woff2"); }
@font-face { font-family: "Lyon Arabic Text"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/lyon-arabic/LyonArabicText-900.woff2") format("woff2"); }

/* 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-night: #2E3321;
    --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);

    /* the faces follow Theme options › Typography (--vq-pick-* from partials/css-variable-declare); brand defaults */
    --vq-font: var(--vq-pick-body, "Almarai"), "Almarai", "Segoe UI", Tahoma, sans-serif;
    --vq-font-display: var(--vq-pick-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; }
@media (max-width: 991.98px) { .vq-link { display: inline-flex; align-items: flex-end; min-block-size: 44px; } }

/* 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-svc__list, .vq-flow__line, .vq-flow__line > li, .vq-pkhero__sheet, .vq-journey__steps, .vq-plans, .vq-channels, .vq-crumbs ol, .vq-work__ring, .vq-clients__run, .vq-posts__row, .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 { text-wrap: pretty; 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;
}
/* 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); }
/* over a dark section the header turns night too (js picks the section under it), so the page is not cut by a
   light lid; the logo, menu and button switch to their light versions (rules shared with the home stage below) */
.tg-header__style-four.is-dark { background: var(--vq-header-ground, var(--vq-night)); box-shadow: inset 0 -1px 0 rgba(240, 232, 218, .1); }
.tg-header__style-four.is-dark .vq-progress { background: var(--vq-sand); }
/* over the burgundy closing band the header's own burgundy button turns sand */
.tg-header__style-four.is-burg .vq-header-actions .header-btn .btn { --vq-btn-face: var(--vq-sand) !important; --vq-btn-text: var(--vq-burgundy) !important; }
.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; }
/* the travelling mark takes the logo's place for a moment (js sets --vq-logo-hide 0…1) */
.tgmenu__nav .logo img { opacity: calc(1 - var(--vq-logo-hide, 0)); }
/* the logo is a link home: give it a full-height target */
.tgmenu__nav .logo a, .vq-footer__logo { display: inline-flex; align-items: center; min-block-size: 44px; }
.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: a night band; the title's kashida runs to the far end into the burgundy diamond; the VQ mark in
   outline on the other side. Motion (html.vq-motion, .is-in from js): the line draws, the diamond lands, the outline
   draws. ------------------------------------------------------------------------------------------------------- */
.vq-pagehead { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-block-size: clamp(280px, 42svh, 440px); padding-block: clamp(40px, 6vw, 80px); background: var(--vq-night); color: var(--vq-sand); }
/* the mark stands at the far end, the line stops short of it: title — line — diamond — mark */
.vq-pagehead { --mark-w: clamp(220px, 24vw, 360px); }
.vq-pagehead__mark { position: absolute; z-index: -1; inset-inline-end: clamp(16px, 3vw, 56px); top: 50%; inline-size: var(--mark-w); block-size: auto; aspect-ratio: 366 / 235; transform: translateY(-50%); overflow: visible; }
.vq-pagehead__mark path { fill: none; stroke: var(--vq-sand); stroke-width: 1.4; opacity: .3; vector-effect: non-scaling-stroke; }
.vq-pagehead__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vq-pagehead__row { display: flex; align-items: baseline; inline-size: 100%; gap: 0; }
.vq-pagehead__title { flex: 0 1 auto; margin: 0; color: var(--vq-sand); font-size: clamp(38px, 5.4vw, 84px); font-weight: 700; line-height: 1.25; text-wrap: balance; }
/* the kashida: from the title's last letter to the far end, closed by the diamond */
.vq-pagehead__line { position: relative; flex: 1 1 auto; min-inline-size: 60px; block-size: max(4px, .085em); margin-inline: .04em calc(var(--mark-w) + clamp(40px, 5vw, 90px) - clamp(16px, 3vw, 56px)); font-size: clamp(38px, 5.4vw, 84px); background: var(--vq-sand); transform-origin: right center; }
html[dir="ltr"] .vq-pagehead__line { transform-origin: left center; }
.vq-pagehead__line i { position: absolute; top: 50%; inset-inline-end: -16px; inline-size: 16px; block-size: 16px; margin-top: -8px; background: var(--vq-burgundy); box-shadow: 0 0 0 2px var(--vq-sand); transform: rotate(45deg); }
.vq-pagehead__lead { max-inline-size: 52ch; margin: 14px 0 0; color: var(--vq-on-dark-soft); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.85; text-wrap: pretty; }
.vq-pagehead .vq-crumbs ol { margin-bottom: 18px; }
.vq-pagehead .vq-crumbs, .vq-pagehead .vq-crumbs a { color: var(--vq-on-dark-soft); }
.vq-pagehead .vq-crumbs a:hover { color: var(--vq-sand); }
.vq-pagehead .vq-crumbs [aria-current] { color: var(--vq-sand); }
.vq-pagehead .vq-crumbs li + li::before { background: var(--vq-sand); }
@media (prefers-reduced-motion: no-preference) {
    .vq-motion .vq-pagehead[data-vq-reveal] .vq-pagehead__line { transform: scaleX(0); transition: transform 1.1s var(--vq-ease) .2s; }
    .vq-motion .vq-pagehead[data-vq-reveal] .vq-pagehead__line i { opacity: 0; transform: rotate(45deg) scale(.2); transition: opacity .3s var(--vq-ease) 1.1s, transform .5s cubic-bezier(.34, 1.56, .64, 1) 1.1s; }
    .vq-motion .vq-pagehead[data-vq-reveal] .vq-pagehead__mark path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--vq-ease) .4s; }
    .vq-motion .vq-pagehead[data-vq-reveal] :is(.vq-crumbs, .vq-pagehead__title, .vq-pagehead__lead) { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--vq-ease), transform .7s var(--vq-ease); }
    .vq-motion .vq-pagehead[data-vq-reveal] .vq-pagehead__title { transition-delay: .08s; }
    .vq-motion .vq-pagehead[data-vq-reveal] .vq-pagehead__lead { transition-delay: .5s; }
    .vq-motion .vq-pagehead[data-vq-reveal].is-in :is(.vq-crumbs, .vq-pagehead__title, .vq-pagehead__lead) { opacity: 1; transform: none; }
    .vq-motion .vq-pagehead[data-vq-reveal].is-in .vq-pagehead__line { transform: none; }
    .vq-motion .vq-pagehead[data-vq-reveal].is-in .vq-pagehead__line i { opacity: 1; transform: rotate(45deg); }
    .vq-motion .vq-pagehead[data-vq-reveal].is-in .vq-pagehead__mark path { stroke-dashoffset: 0; }
}
@media (max-width: 767.98px) {
    /* phones: centred; the line runs edge to edge under the title, the mark sits large behind */
    .vq-pagehead { min-block-size: 0; padding-block: 44px 48px; text-align: center; }
    .vq-pagehead__inner { align-items: center; }
    .vq-pagehead .vq-crumbs ol { justify-content: center; }
    .vq-pagehead__row { flex-direction: column; align-items: center; gap: 16px; }
    .vq-pagehead__title { font-size: clamp(34px, 10vw, 46px); }
    .vq-pagehead__line { flex: none; inline-size: calc(100% - 28px); min-inline-size: 0; block-size: 4px; margin: 0 0 0 16px; font-size: 16px; }
    .vq-pagehead__line i { inline-size: 13px; block-size: 13px; margin-top: -6.5px; inset-inline-end: -14px; }
    .vq-pagehead__lead { margin-inline: auto; font-size: 16px; }
    .vq-pagehead__mark { inline-size: 92%; inset-inline-end: auto; inset-inline-start: 50%; top: auto; bottom: -30%; transform: translateX(50%); }
    .vq-pagehead__mark path { opacity: .12; }
    html[dir="ltr"] .vq-pagehead__mark { transform: translateX(-50%); }
}

.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. */
/* With JS the table waits for the faces (js adds .vq-fonts), so nothing in it reflows after it is shown. */
html.vq-js:not(.vq-fonts) .vq-stage__table { display: none; }
/* Sized by the viewport, not by the stage: the stage's height follows its copy, and a font arriving late would
   otherwise resize the whole table (a layout shift). */
.vq-stage__table { position: absolute; z-index: 0; top: -15svh; block-size: 142svh; 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.is-stopped .vq-stage__run { animation-play-state: paused; }
/* the pause button: a small sand ring with two bars (a triangle once paused) */
.vq-stage__pause { position: absolute; z-index: 3; inset-inline-end: 96px; bottom: 26px; display: grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; border: 1.5px solid rgba(240, 232, 218, .45); border-radius: 50%; background: rgba(46, 51, 33, .55); color: var(--vq-sand); cursor: pointer; transition: border-color .2s var(--vq-ease), background-color .2s var(--vq-ease); }
.vq-stage__pause:hover { border-color: var(--vq-sand); background: var(--vq-night); }
.vq-stage__pause i { inline-size: 10px; block-size: 12px; border-inline: 3px solid currentColor; }
.vq-stage__pause[aria-pressed="true"] i { inline-size: 0; block-size: 0; border: 0; border-block: 7px solid transparent; border-inline-start: 11px solid currentColor; }
html[dir="ltr"] .vq-stage__pause[aria-pressed="true"] i { border-inline-start: 11px solid currentColor; }
.vq-stage__pause[aria-pressed="false"] .vq-stage__pause-off, .vq-stage__pause[aria-pressed="true"] .vq-stage__pause-on { display: none; }
html:not(.vq-motion) .vq-stage__pause { display: none; }
/* the page under the browser's own bars: night while the stage is on (Safari takes the status bar colour from it) */
html:has(body:not(.vq-past-stage) .vq-stage), body:has(.vq-stage):not(.vq-past-stage) { background-color: var(--vq-night); }
@media (hover: hover) { .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); }
/* no swapping face in the fallback: if the optional copy is not ready at first paint, the system face stays */
.vq-stage .vq-tile--say b { font-family: "VQ Tile Display", Tahoma, sans-serif; }
.vq-stage .vq-tile--say small { font-family: "VQ Tile Body", Tahoma, sans-serif; }
.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)); }
/* the table also melts into the night at the stage's foot, where the next section carries the night on */
.vq-stage::after { background: linear-gradient(to top, var(--vq-night) 0, var(--vq-night) 40px, rgba(46, 51, 33, 0) 280px), linear-gradient(to left, var(--vq-night) 0 36%, rgba(46, 51, 33, .85) 44%, rgba(46, 51, 33, .4) 53%, rgba(46, 51, 33, 0) 62%); }
html[dir="ltr"] .vq-stage::after { background: linear-gradient(to top, var(--vq-night) 0, var(--vq-night) 40px, rgba(46, 51, 33, 0) 280px), linear-gradient(to right, var(--vq-night) 0 36%, rgba(46, 51, 33, .85) 44%, rgba(46, 51, 33, .4) 53%, rgba(46, 51, 33, 0) 62%); }
.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; }
/* the VQ crest over the headline (with motion a travelling copy stands in for it, js) */
.vq-stage__crest { display: block; margin-bottom: clamp(12px, 2.2vh, 24px); }
.vq-stage__mark { display: block; block-size: clamp(34px, 3.6vw, 56px); inline-size: auto; aspect-ratio: 366 / 235; overflow: visible; fill: var(--vq-sand); }
.vq-traveler { position: fixed; top: 0; left: 0; z-index: 101; display: block; overflow: visible; fill: var(--vq-sand); pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
/* the menus and panels cover everything: the travelling mark steps out while one is open */
.tgmobile__menu { z-index: 1100 !important; }
body.mobile-menu-visible .vq-traveler, body:has(.offCanvas__info.active, .search__popup.search-opened) .vq-traveler { visibility: hidden !important; }
.vq-align__mark.is-landing { animation: vq-land .6s var(--vq-ease); }
@keyframes vq-land { 0% { transform: scale(1.14); } 100% { transform: none; } }
.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; }
.vq-stage__wa { display: none !important; }

/* 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; }
.tg-header__style-four.is-dark .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; }
.tg-header__style-four.is-dark .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); }
.tg-header__style-four.is-dark .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); }
.tg-header__style-four.is-dark .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; }
.tg-header__style-four.is-dark .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); }
.tg-header__style-four.is-dark .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; }
.tg-header__style-four.is-dark .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); }
.tg-header__style-four.is-dark .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; }
.tg-header__style-four.is-dark :is(a, button):focus-visible { outline-color: var(--vq-sand) !important; }
@media (max-width: 991.98px) {
    /* Phones and tablets: the stage is exactly the visible screen (svh: Safari's bars included). The copy stands at
       its foot, so the headline and the main button are on the first screen whatever the phone's height, and the
       table fills everything above, running on behind the copy where the night closes over it (--copy-top is the
       copy's top, measured by js/varelq.js). Four larger columns that drift in opposite directions. */
    .vq-stage { --tile-gap: 12px; --copy-top: 46%; }
    .vq-stage__table { top: calc(var(--vq-header-h) - 70px); block-size: calc(100svh + 40px); inset-inline: -27% -27%; inline-size: auto; perspective: 1000px; perspective-origin: 50% 0%; }
    .vq-stage__col:nth-child(even) .vq-stage__run { animation-direction: reverse; }
    .vq-stage__run { animation-duration: 42s; }
    .vq-stage__col:nth-child(2) .vq-stage__run { animation-duration: 54s; }
    .vq-stage__col:nth-child(3) .vq-stage__run { animation-duration: 48s; }
    .vq-stage__col:nth-child(4) .vq-stage__run { animation-duration: 60s; }
    .vq-tile { border-radius: 8px; clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
    html[dir="ltr"] .vq-tile { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
    .vq-tile--say { padding: 14px; gap: 4px; }
    .vq-tile--say small { font-size: 11px; gap: 6px; }
    .vq-tile--say small::before { inline-size: 6px; block-size: 6px; }
    .vq-tile--say b { font-size: 18px; }
    .vq-tile--figure b { font-size: 36px; }
    .vq-stage::after, html[dir="ltr"] .vq-stage::after { background: linear-gradient(to bottom, rgba(46, 51, 33, 0) calc(var(--copy-top) - 150px), rgba(46, 51, 33, .9) calc(var(--copy-top) - 24px), var(--vq-night) calc(var(--copy-top) + 10px)); }
    /* a short shade under the header only (logo and menu button stay legible over the tiles) */
    .vq-stage::before { background: linear-gradient(to bottom, rgba(46, 51, 33, .92) 0, rgba(46, 51, 33, .55) calc(var(--vq-header-h) - 6px), rgba(46, 51, 33, 0) calc(var(--vq-header-h) + 34px)); }
    /* the stage runs on behind the browser's floating bottom bar (100lvh); the copy stops above it (100svh) */
    .vq-stage__inner { flex-direction: column; align-items: stretch; justify-content: flex-end; min-height: calc(100lvh - var(--vq-header-h)); padding-top: 132px; padding-bottom: calc(100lvh - 100svh + max(22px, env(safe-area-inset-bottom))); }
    .vq-stage__pause { top: calc(var(--vq-header-h) + 10px); bottom: auto; inset-inline-end: 14px; inline-size: 32px; block-size: 32px; border-color: rgba(240, 232, 218, .3); }
    .vq-stage__pause i { inline-size: 8px; block-size: 10px; border-inline-width: 2.5px; }
    .vq-stage__copy { max-inline-size: 100%; }
    .vq-stage__wa { display: inline-flex !important; }
    /* the floating WhatsApp button and the cookie card wait until the visitor leaves the stage */
    body:has(.vq-stage):not(.vq-past-stage) .whatsapp-float { opacity: 0; transform: scale(.6); pointer-events: none; }
    .site-notice { transition: transform .5s var(--vq-ease); }
    body:has(.vq-stage):not(.vq-past-stage) .site-notice { transform: translateY(calc(100% + 30px)); }
}
@media (prefers-reduced-motion: reduce) {
    .vq-stage__run { animation: none; }
}

/* 9. «خطّ واحد»: three places that become one line (a scene that holds the screen while it plays) ------------- */
/* Static (no JS, reduced motion): the lead, the joined olive band, the closing sentence. With motion the section is
   tall and its frame sticks under the header while js/varelq.js flies the three tiles onto the band. overflow:clip
   (not hidden) so the sticky frame still sticks. */
/* the stage's night carries on: the section is the stage's second act, so the two read as one piece. --word is
   shared by the band's words and the tiles' words, so a tile lands on its word at the same size. */
.vq-align { --word: clamp(21px, 3.6vw, 56px); position: relative; padding-block: clamp(24px, 3vw, 48px) clamp(56px, 6vw, 96px); background: var(--vq-night); color: var(--vq-sand); overflow: clip; }
.vq-align__frame { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 4vh, 48px); text-align: center; }
.vq-align__lead { max-width: 24em; margin: 0; color: var(--vq-on-dark-soft); font: 500 clamp(19px, 1.9vw, 28px)/1.7 var(--vq-font-display); text-wrap: balance; }
.vq-align__scene { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 2.4vh, 28px); inline-size: 100%; }
/* the VQ mark above the band (its pieces fly in from the tiles, js) */
.vq-align__mark { position: relative; z-index: 3; display: block; flex: none; block-size: clamp(44px, 5.4vw, 80px); inline-size: auto; aspect-ratio: 366 / 235; overflow: visible; fill: var(--vq-sand); }
/* the band: one olive line, the words joined by sand kashida, the burgundy diamond at the end */
/* the band runs from edge to edge of the screen: a line that leaves both edges reads as going on */
.vq-align__row { position: relative; isolation: isolate; display: flex; align-items: baseline; justify-content: center; inline-size: 100vw; margin: 0 calc(50% - 50vw); padding: clamp(14px, 2vw, 30px) 16px; list-style: none; }
.vq-align__band { position: absolute; inset: 0; z-index: -1; background: var(--vq-sand); }
.vq-align__word { flex: none; color: var(--vq-olive-deep); font: 700 var(--word)/1.35 var(--vq-font-display); white-space: nowrap; list-style: none; }
/* the joins are real tatweel in the display face: the kashida of the wordmark, at the words' weight and height */
.vq-align__join { flex: none; margin-inline: -.02em; color: var(--vq-olive-deep); font: 700 var(--word)/1.35 var(--vq-font-display); white-space: nowrap; list-style: none; }
.vq-align__end { flex: none; margin-inline-start: clamp(10px, 1.2vw, 18px); list-style: none; }
.vq-align__end i { display: block; inline-size: clamp(10px, 1.1vw, 16px); block-size: clamp(10px, 1.1vw, 16px); background: var(--vq-burgundy); transform: rotate(45deg); }
/* the three places (motion only) */
.vq-align__card { display: none; }
.vq-motion .vq-align__card { position: absolute; top: 50%; left: 50%; z-index: 2; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; inline-size: clamp(150px, 19vw, 280px); aspect-ratio: 5 / 4; padding: clamp(14px, 1.6vw, 24px); color: var(--vq-sand); text-align: start; will-change: transform, opacity; }
/* the tile's ground is its own layer, so it can dissolve in flight and leave the word to land alone */
.vq-align__card-bg { position: absolute; inset: 0; z-index: -1; border-radius: 10px; background: var(--vq-olive); clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
html[dir="ltr"] .vq-align__card-bg { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); }
.vq-align__card--burg .vq-align__card-bg { background: var(--vq-burgundy); }
.vq-align__card--sand .vq-align__card-bg { background: var(--vq-sand); }
.vq-motion .vq-align__card--sand { color: var(--vq-olive-deep); }
.vq-align__card--olive .vq-align__card-bg { box-shadow: inset 0 0 0 1.5px rgba(240, 232, 218, .28); }
.vq-align__card small { display: flex; align-items: center; gap: 7px; font-size: clamp(12px, 1vw, 14px); font-weight: 700; line-height: 1.45; opacity: .85; }
.vq-align__card small::before { content: ""; flex: none; inline-size: 7px; block-size: 7px; background: currentColor; transform: rotate(45deg); }
.vq-align__card b { font: 700 var(--word)/1.35 var(--vq-font-display); white-space: nowrap; }
body.vq-in-scene .whatsapp-float { opacity: 0; transform: scale(.6); pointer-events: none; }
body.vq-in-scene .site-notice { transform: translateY(calc(100% + 30px)); transition: transform .5s var(--vq-ease); }
/* the wordmark under the scene, whose kashida stretches across as the page scrolls (js) */
.vq-align__brand { position: relative; padding-top: clamp(40px, 5vw, 80px); }
.vq-align__wordmark { inline-size: 100%; block-size: clamp(64px, 11vw, 176px); fill: var(--vq-sand); }
.vq-motion .vq-align__scroller { block-size: calc(100svh - var(--vq-header-h) + 120svh); }
.vq-motion .vq-align__sticky { position: sticky; top: var(--vq-header-h); display: flex; flex-direction: column; block-size: calc(100svh - var(--vq-header-h)); overflow: hidden; }
/* auto margins centre the frame while it fits and align it to the top when it does not (never cut under the header) */
.vq-motion .vq-align__frame { inline-size: 100%; margin-block: auto; padding-block: clamp(10px, 2vh, 24px); gap: clamp(14px, 3vh, 40px); }
.vq-motion .vq-align__scene { min-block-size: clamp(200px, 38svh, 420px); }
.vq-motion .vq-align__mark { block-size: clamp(34px, min(5.4vw, 7svh), 72px); }
.vq-motion .vq-align__lead { font-size: clamp(16px, min(1.9vw, 3.2svh), 28px); }
.vq-motion .vq-align__close { font-size: clamp(18px, min(2.3vw, 3.4svh), 36px); }
@media (max-width: 767.98px) {
    .vq-motion .vq-align__lead { font-size: clamp(15px, min(4.7vw, 3.1svh), 20px); }
    .vq-motion .vq-align__close { font-size: clamp(17px, min(5.4vw, 3.6svh), 23px); }
    .vq-motion .vq-align__mark { block-size: clamp(32px, 7svh, 52px); }
}
.vq-align__close { max-width: 22em; margin: 0; color: var(--vq-sand); font: 700 clamp(20px, 2.3vw, 36px)/1.55 var(--vq-font-display); text-wrap: balance; }
@media (max-width: 767.98px) {
    .vq-align__lead { font-size: clamp(17px, 4.7vw, 20px); line-height: 1.7; }
    .vq-align__row { padding: 14px 12px; }
    .vq-align { --word: clamp(19px, 5.8vw, 26px); padding-top: 0; }
    .vq-align__end { margin-inline-start: 8px; }
    .vq-motion .vq-align__card { inline-size: clamp(138px, 40vw, 170px); padding: 13px; }
    .vq-motion .vq-align__card small { font-size: 12px; }
    .vq-align__close { font-size: clamp(19px, 5.4vw, 23px); max-width: 16em; }
}
@media (max-width: 767.98px) and (max-height: 640px) {
    .vq-align__frame { gap: 18px; }
    .vq-align__lead { font-size: 16px; }
    .vq-motion .vq-align__card small { display: none; }
}
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 10. Services: chapter cards that stack ------------------------------------------------------------------- */
/* Each chapter is a card in its own ground: copy on the reading side, a small tilted table of real work on the other.
   Wide screens: the cards stick under the header and stack (js/varelq.js settles and dims the one being covered). */
.vq-svc { background: var(--vq-paper); }
.vq-svc__total { margin: 0; color: var(--vq-muted); font-weight: 700; }
.vq-svc__total > bdi { color: var(--vq-olive); font: 700 clamp(40px, 4vw, 60px)/1 var(--vq-font-display); margin-inline-end: 8px; }
.vq-svc__stack { display: grid; gap: 22px; }
.vq-svc__card {
    --bg: var(--vq-olive); --fg: var(--vq-sand); --soft: var(--vq-on-dark-soft); --rule: var(--vq-on-dark-line); --say: var(--vq-burgundy); --dim: 0;
    --vq-kashida-color: var(--fg);
    position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(24px, 4vw, 72px);
    min-block-size: min(660px, calc(100svh - var(--vq-header-h) - 80px)); padding: clamp(28px, 4vw, 64px);
    border-radius: 10px; background: var(--bg); color: var(--fg); clip-path: var(--vq-cut-lg); overflow: hidden;
}
.vq-svc__card::after { content: ""; position: absolute; inset: 0; z-index: 5; background: var(--bg); opacity: calc(var(--dim) * 1.3); pointer-events: none; }
.vq-svc__card--sand { --bg: var(--vq-sand-deep); --fg: var(--vq-ink); --soft: var(--vq-muted); --rule: var(--vq-line); --say: var(--vq-olive); --vq-kashida-color: var(--vq-olive); }
.vq-svc__card--night { --bg: var(--vq-night); }
.vq-svc__card--paper { --bg: var(--vq-sand); --fg: var(--vq-ink); --soft: var(--vq-muted); --rule: var(--vq-line); --say: var(--vq-olive); --vq-kashida-color: var(--vq-olive); box-shadow: inset 0 0 0 1px var(--vq-line); }
.vq-svc__card--deep { --bg: var(--vq-olive-deep); }
.vq-svc__copy { position: relative; z-index: 1; }
.vq-svc__count { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--soft); font: 700 14.5px/1.5 var(--vq-font); }
.vq-svc__count::before { content: ""; inline-size: 7px; block-size: 7px; background: currentColor; transform: rotate(45deg); }
.vq-svc__title { margin: 0; color: var(--fg); font: 700 clamp(30px, 3.5vw, 54px)/1.3 var(--vq-font-display); text-wrap: balance; --vq-kashida-w: 1.3em; }
.vq-svc__summary { max-inline-size: 46ch; margin: 12px 0 0; color: var(--soft); font-size: 17px; line-height: 1.85; text-wrap: pretty; }
.vq-svc__list { display: grid; margin: 22px 0 0; padding: 0; list-style: none; }
.vq-svc__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.vq-svc__row { display: flex; align-items: center; gap: 12px; min-block-size: 46px; padding-block: 6px; border-bottom: 1px solid var(--rule); color: var(--fg); text-decoration: none; }
.vq-svc__name { flex: 0 1 auto; font-size: 16.5px; font-weight: 700; line-height: 1.5; }
/* hover draws the row's kashida out to a diamond */
.vq-svc__leader { position: relative; flex: 1 1 18px; min-inline-size: 18px; block-size: 2px; margin-inline-end: 5px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .45s var(--vq-ease); }
html[dir="ltr"] .vq-svc__leader { transform-origin: left center; }
.vq-svc__leader::after { content: ""; position: absolute; top: 50%; inset-inline-end: -4px; inline-size: 8px; block-size: 8px; margin-top: -4px; background: currentColor; transform: rotate(45deg); }
.vq-svc__row:hover, .vq-svc__row:focus-visible { color: var(--fg); }
.vq-svc__row:hover .vq-svc__leader, .vq-svc__row:focus-visible .vq-svc__leader { transform: none; }
.vq-svc__card:not(.vq-svc__card--sand):not(.vq-svc__card--paper) :is(a, button):focus-visible { outline-color: var(--vq-sand) !important; }
.vq-svc__more { display: none; }
/* the work on its table */
.vq-svc__table { position: relative; align-self: stretch; min-block-size: 380px; perspective: 1300px; perspective-origin: 50% 30%; }
.vq-svc__plane { position: absolute; inset: 4% 2%; transform: rotateX(16deg) rotateY(-9deg) rotateZ(-7deg); transform-style: preserve-3d; }
html[dir="ltr"] .vq-svc__plane { transform: rotateX(16deg) rotateY(9deg) rotateZ(7deg); }
.vq-svc__tile { position: absolute; margin: 0; }
.vq-svc__tile--1 { z-index: 2; inline-size: 56%; aspect-ratio: 4 / 5; inset-block-start: 4%; inset-inline-start: 6%; }
.vq-svc__plane:not(:has(.vq-svc__tile--2)) .vq-svc__tile--1 { inset-inline-start: 30%; }
.vq-svc__tile--2 { z-index: 3; inline-size: 46%; aspect-ratio: 1; inset-block-end: 2%; inset-inline-end: 0; }
.vq-svc__tile--3 { z-index: 1; inline-size: 38%; aspect-ratio: 4 / 5; inset-block-start: 0; inset-inline-end: 4%; }
.vq-svc__tile--say { z-index: 4; inline-size: 44%; aspect-ratio: auto; min-block-size: 38%; inset-block-end: 8%; inset-inline-start: 0; background: var(--say); color: var(--vq-sand); }
@media (min-width: 992px) {
    .vq-svc__stack { gap: 44px; }
    .vq-svc__card { position: sticky; top: calc(var(--vq-header-h) + 24px + var(--i) * 14px); }
}
@media (max-width: 991.98px) {
    /* phones stack the cards too: each sticks under the header (a sliver of the ones below stays in view) */
    .vq-svc__stack { gap: 18px; }
    .vq-svc__card { position: sticky; top: calc(var(--vq-header-h) + 10px + var(--i) * 9px); }
    .vq-svc__summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    .vq-svc__card.is-expanded :is(.vq-svc__table, .vq-svc__summary) { display: none; }
}
@media (max-width: 991.98px) and (max-height: 760px) { .vq-svc__table { min-block-size: 160px !important; } }
@media (max-width: 991.98px) {
    .vq-svc__card { grid-template-columns: minmax(0, 1fr); gap: 6px; min-block-size: 0; padding: 18px 18px 26px; text-align: center; }
    .vq-svc__table { order: -1; min-block-size: clamp(160px, 44vw, 240px); margin-block-end: 16px; }
    .vq-svc__plane { inset: 6% 8%; }
    /* phones: the work is sized to the picture box, so no tile reaches the count and the title under it (a tilted
       3D tile would paint over them in Safari whatever the order) */
    .vq-svc__tile--1 { inline-size: 40%; }
    .vq-svc__tile--2 { inline-size: 34%; inset-block-end: 6%; }
    .vq-svc__tile--3 { inline-size: 30%; }
    .vq-svc__tile--say { inline-size: 38%; min-block-size: 0; aspect-ratio: 1; inset-block-end: 6%; }
    .vq-svc__plane:not(:has(.vq-svc__tile--2)) .vq-svc__tile--1 { inset-inline-start: 34%; }
    .vq-svc__count { justify-content: center; }
    .vq-svc__title .vq-kashida { display: block; inline-size: 1.4em; margin: .25em auto 0; transform-origin: center; }
    .vq-svc__summary { margin-inline: auto; }
    .vq-svc__list, .vq-svc__list--cols { grid-template-columns: minmax(0, 1fr); text-align: start; }
    /* long lists show four services and a button for the rest (js adds .is-folded) */
    .vq-svc__list.is-folded li:nth-child(n + 5) { display: none; }
    .vq-svc__more { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; margin-top: 8px; padding: 6px 2px; border: 0; background: none; color: var(--fg); font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: .45em; cursor: pointer; }
    .vq-svc__more::before { content: ""; inline-size: 7px; block-size: 7px; background: currentColor; transform: rotate(45deg); }
}
@media (max-width: 575.98px) {
    .vq-svc__title { font-size: clamp(26px, 7.6vw, 32px); }
    .vq-svc__summary { font-size: 15.5px; }
    .vq-svc__name { font-size: 16px; }
}

/* 11. «من الفكرة إلى السوق»: a road; the three diamonds of the ڤ drive it ------------------------------------- */
/* Per stage: a billboard on two posts (the drawing), the road (lane marks ahead, one solid line behind the riders),
   then the stage's number, title and text. The road is one strip across the whole track (.vq-journey__line). */
.vq-journey { --step: clamp(300px, 31vw, 450px); --road: 62px; --lift: 66px; --vq-btn-ground: var(--vq-night); background: var(--vq-night); color: var(--vq-sand); }
.vq-journey__pin { padding-block: clamp(64px, 8vw, 112px); }
.vq-journey__head .vq-head { margin-bottom: clamp(26px, 3vw, 46px); }
.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 { position: relative; z-index: 1; display: flex; gap: clamp(56px, 6.5vw, 124px); 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: 0; }
/* the billboard: the drawing on an olive-deep face in a sand frame, standing on two posts that reach the road */
.vq-journey__art { position: relative; aspect-ratio: 3 / 2; margin-bottom: var(--lift); padding: 14px; border: 3px solid var(--vq-sand); border-radius: 4px; background: var(--vq-olive-deep); }
.vq-journey__art > .vq-art { inline-size: 100%; block-size: 100%; }
.vq-journey__art::before, .vq-journey__art::after { content: ""; position: absolute; top: 100%; inline-size: 6px; block-size: calc(var(--lift) + 15px - var(--road) / 2 + 3px); background: var(--vq-sand); opacity: .55; }
.vq-journey__art::before { inset-inline-start: 18%; }
.vq-journey__art::after { inset-inline-end: 18%; }
/* the stage's marker on the road */
.vq-journey__dot { position: relative; z-index: 1; 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); transform: rotate(45deg); transition: background-color .3s var(--vq-ease); }
.vq-journey__step.is-active .vq-journey__dot { background: var(--vq-sand); }
.vq-journey__text { padding-top: calc(var(--road) / 2 + 6px); }
.vq-journey__num { display: block; margin-bottom: 4px; color: var(--vq-on-dark-soft); font: 700 15px/1.2 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.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 road, centred on the markers: olive asphalt, sand shoulders, lane marks; .vq-journey__fill is the solid line */
.vq-journey__line { position: absolute; z-index: 0; top: calc(var(--step) * 2 / 3 + var(--lift) + 15px - var(--road) / 2); inset-inline: -60vw; block-size: var(--road);
    background: repeating-linear-gradient(to left, var(--vq-sand) 0 38px, transparent 38px 70px) center / 100% 4px no-repeat, var(--vq-olive);
    box-shadow: inset 0 3px 0 rgba(240, 232, 218, .3), inset 0 -3px 0 rgba(240, 232, 218, .3); }
html[dir="ltr"] .vq-journey__line { background: repeating-linear-gradient(to right, var(--vq-sand) 0 38px, transparent 38px 70px) center / 100% 4px no-repeat, var(--vq-olive); }
.vq-journey__fill { position: absolute; inset-inline: 0; top: 50%; block-size: 4px; margin-top: -2px; 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; }
/* phones: the riders drive down the road with the scroll (js places them at the head of the solid line) */
.vq-journey.is-riding .vq-journey__rider { display: block; position: absolute; z-index: 3; top: 0; left: 0; inline-size: 30px; color: var(--vq-sand); pointer-events: none; will-change: transform; }
/* Wide screens: pinned; the road 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(32px, 4vh, 64px); }
.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 + var(--lift) + 15px); inset-inline-start: 30%; inline-size: 46px; margin-top: -20px; color: var(--vq-sand); pointer-events: none; }
.vq-journey.is-pinned .vq-journey__step :is(.vq-journey__art, .vq-journey__text) { opacity: .34; 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: .6; }
@media (min-width: 992px) and (max-height: 820px) { .vq-journey { --step: clamp(280px, 26vw, 380px); --lift: 52px; } }
/* Phones and tablets: the road runs down the reading edge; the stages stack beside it. */
@media (max-width: 991.98px) {
    .vq-journey { --step: min(100%, 520px); --road: 34px; }
    .vq-journey__track { inline-size: auto; max-inline-size: 720px; margin-inline: auto; padding-inline: 20px; }
    .vq-journey__steps { flex-direction: column; gap: 52px; padding-inline-start: 64px; }
    .vq-journey__step { inline-size: auto; grid-template-rows: auto auto; row-gap: 16px; }
    .vq-journey__dot { position: absolute; top: 4px; inset-inline-start: -49px; margin: 0; }
    .vq-journey__num { font-size: 18px; margin-bottom: 2px; }
    .vq-journey__line::after { content: ""; position: absolute; inset-inline: -8px; bottom: 0; block-size: 5px; background: var(--vq-sand); }
    /* no aspect-ratio here: Safari sizes an aspect-ratio grid item from its height and pushed the board off screen;
       the drawing (3:2 viewBox) sets the height itself */
    .vq-journey__step { grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
    .vq-journey__art { order: 2; aspect-ratio: auto; inline-size: 100%; min-inline-size: 0; max-inline-size: 420px; margin-bottom: 0; padding: 12px; }
    .vq-journey__art > .vq-art { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; }
    .vq-journey__text { min-inline-size: 0; }
    .vq-journey.is-riding .vq-journey__rider { inline-size: 34px; }
    /* stages wait below until the riders reach them, then the words rise and the billboard swings into place */
    .vq-motion .vq-journey:not(.is-pinned) .vq-journey__step :is(.vq-journey__text, .vq-journey__art) { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--vq-ease), transform .9s var(--vq-ease); }
    .vq-motion .vq-journey:not(.is-pinned) .vq-journey__step .vq-journey__art { transform: translateY(60px) rotate(-4deg); transform-origin: right bottom; transition-delay: .18s; }
    .vq-motion .vq-journey:not(.is-pinned) .vq-journey__step.is-active :is(.vq-journey__text, .vq-journey__art) { opacity: 1; transform: none; }
    .vq-motion .vq-journey:not(.is-pinned) .vq-journey__step.is-active .vq-journey__dot { animation: vq-pulse .7s var(--vq-ease); }
    .vq-journey__art::before, .vq-journey__art::after { display: none; }
    .vq-journey__text { order: 1; padding-top: 0; }
    .vq-journey__line { top: 0; bottom: 0; inset-inline: 28px auto; inline-size: var(--road); block-size: auto;
        background: repeating-linear-gradient(to bottom, var(--vq-sand) 0 26px, transparent 26px 48px) center / 4px 100% no-repeat, var(--vq-olive);
        box-shadow: inset 3px 0 0 rgba(240, 232, 218, .3), inset -3px 0 0 rgba(240, 232, 218, .3); }
    html[dir="ltr"] .vq-journey__line { background: repeating-linear-gradient(to bottom, var(--vq-sand) 0 26px, transparent 26px 48px) center / 4px 100% no-repeat, var(--vq-olive); }
    .vq-journey__fill, html[dir="ltr"] .vq-journey__fill { inset-inline: auto; inset-block: 0; inset-inline-start: 50%; top: 0; inline-size: 4px; block-size: auto; margin: 0 -2px 0 0; 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: a staircase of steps on one line; the chosen step's sheet underneath ------------------------- */
.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); }
/* the steps stand on the line; each is as tall as its package's reach */
.vq-stair { --h: clamp(360px, 36vw, 470px); --gap: clamp(10px, 1.4vw, 20px); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: var(--h) auto; column-gap: var(--gap); }
/* each step and its sheet are one item in the markup; on wide screens the steps fill the first row (the staircase)
   and the open sheet spans the second */
.vq-stair__item { display: contents; }
.vq-stair__step { grid-row: 1; align-self: end; }
/* the line the steps stand on: each step carries its stretch of it, reaching across the gaps */
.vq-stair__step::after { content: ""; position: absolute; inset-inline: calc(var(--gap) / -2 - 1px); bottom: -4px; block-size: 4px; background: var(--vq-olive); }
.vq-stair .vq-plansheet { grid-row: 2; grid-column: 1 / -1; }
.vq-stair:not(.is-ready) .vq-plansheet { grid-row: auto; }
.vq-stair__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; block-size: calc(var(--h) * (.42 + .58 * var(--r, .5))); padding: clamp(18px, 1.8vw, 28px); border: 0; border-radius: 10px 10px 0 0; background: var(--vq-olive); color: var(--vq-sand); text-align: start; cursor: pointer; transition: background-color .3s var(--vq-ease); }
.vq-stair__step:hover { background: var(--vq-olive-deep); }
/* the template colours buttons olive on hover/focus; the steps keep their sand type */
.vq-stair__step:is(:hover, :focus, :active) { color: var(--vq-sand); }
.vq-stair__step.is-selected { background: var(--vq-burgundy); }
.vq-stair__step:focus-visible { outline-color: var(--vq-olive-deep) !important; }
.vq-stair__name { font: 600 clamp(18px, 1.6vw, 24px)/1.4 var(--vq-font-display); }
.vq-stair__price .vq-plan__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.vq-stair__price .vq-plan__amount { color: var(--vq-sand); font: 700 clamp(30px, 3vw, 48px)/1.15 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.vq-stair__price .vq-plan__unit { color: var(--vq-on-dark-soft); font-size: 14px; font-weight: 700; }
.vq-stair__count { margin-top: auto; color: var(--vq-on-dark-soft); font-size: 14px; font-weight: 700; }
.vq-stair__bar { display: none; }
/* the cue that says the step opens: a diamond and a few words; it changes once the sheet is open */
.vq-stair__cue { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--vq-sand); font-size: 13.5px; font-weight: 700; }
.vq-stair__cue i { flex: none; inline-size: 10px; block-size: 10px; border: 2px solid currentColor; transform: rotate(45deg); transition: background-color .3s var(--vq-ease), transform .45s var(--vq-ease); }
.vq-stair__cue > span { text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 1px; }
.vq-stair__cue-open, .vq-stair__cue-hide { display: none; }
.vq-stair__step[aria-expanded="true"] .vq-stair__cue i { background: currentColor; transform: rotate(225deg); }
.vq-stair__step[aria-expanded="true"] .vq-stair__cue-shut { display: none; }
.vq-stair__step[aria-expanded="true"] .vq-stair__cue-open { display: inline; text-decoration: none; }
.vq-stair__step:hover .vq-stair__cue > span { text-decoration-thickness: 2px; }
/* pressing a step gives way a little, like a button */
.vq-stair__step { transition: background-color .3s var(--vq-ease), transform .12s var(--vq-ease); }
.vq-stair__step:active { transform: scale(.98); }
/* the chosen package's sheet */
.vq-plansheet { --vq-btn-ground: var(--vq-paper); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 5vw, 88px); margin-top: 30px; padding: clamp(26px, 3.4vw, 52px); border-radius: 8px; background: var(--vq-paper); box-shadow: inset 0 0 0 1px var(--vq-line); clip-path: var(--vq-cut-lg); }
.vq-plansheet__name { margin: 0; color: var(--vq-ink); font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; line-height: 1.35; }
.vq-plansheet__summary { max-inline-size: 44ch; margin: 12px 0 0; color: var(--vq-muted); font-size: 16px; line-height: 1.85; text-wrap: pretty; }
.vq-plansheet__price { margin: 18px 0 0; padding-block: 14px; border-block: 1px solid var(--vq-line); }
.vq-plansheet__price .vq-plan__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.vq-plansheet__price .vq-plan__amount { color: var(--vq-burgundy); font: 700 clamp(36px, 3.4vw, 50px)/1.1 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.vq-plan__unit { color: var(--vq-muted); font-size: 15px; font-weight: 700; }
.vq-plansheet .vq-actions { margin-top: 22px; }
.vq-plansheet__body { columns: 2 230px; column-gap: 40px; }
.vq-plansheet__group { break-inside: avoid; margin-bottom: 18px; }
.vq-plan__group { margin: 0 0 10px; color: var(--vq-olive); font: 700 15px/1.5 var(--vq-font); }
.vq-plansheet__body .vq-list { gap: 8px; font-size: 15.5px; }
.vq-plan__more { margin: 6px 0 0; color: var(--vq-muted); font-size: 14.5px; }
/* monthly / annual: without JS both figures show (annual smaller); with it, one at a time */
.vq-plan__figure[data-period="annual"] .vq-plan__amount { font-size: 20px; }
[data-vq-pricing].is-switchable .vq-plan__figure[hidden] { display: none; }
[data-vq-pricing].is-switchable .vq-stair__price .vq-plan__figure[data-period="annual"] .vq-plan__amount { font-size: clamp(30px, 3vw, 48px); }
[data-vq-pricing].is-switchable .vq-plansheet__price .vq-plan__figure[data-period="annual"] .vq-plan__amount { font-size: clamp(36px, 3.4vw, 50px); }
/* tabs (js): only the chosen sheet shows */
.vq-pricing .vq-plansheet[hidden] { display: none; }
@media (max-width: 991.98px) {
    /* phones: rows with a bar as long as the package's reach */
    /* phones: the rows in a column; the open sheet sits right under its row */
    .vq-stair { display: flex; flex-direction: column; gap: 10px; }
    .vq-stair__step::after { display: none; }
    .vq-stair__step { align-self: stretch; }
    .vq-stair .vq-plansheet { margin-top: -4px; }
    .vq-stair__step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; block-size: auto; padding: 14px 16px 16px; border-radius: 8px; background: var(--vq-paper); color: var(--vq-ink); box-shadow: inset 0 0 0 1px var(--vq-line); }
    .vq-stair__step:hover { background: var(--vq-paper); }
    .vq-stair__step:is(:hover, :focus, :active) { color: var(--vq-ink); }
    .vq-stair__step.is-selected:is(:hover, :focus, :active) { color: var(--vq-sand); background: var(--vq-burgundy); }
    .vq-stair__step.is-selected { background: var(--vq-burgundy); color: var(--vq-sand); box-shadow: none; }
    .vq-stair__name { font-size: 18px; }
    .vq-stair__price .vq-plan__amount { color: var(--vq-olive); font-size: 26px; }
    .vq-stair__price .vq-plan__unit { color: var(--vq-muted); font-size: 13px; }
    .vq-stair__step.is-selected .vq-stair__price .vq-plan__amount { color: var(--vq-sand); }
    .vq-stair__step.is-selected .vq-stair__price .vq-plan__unit, .vq-stair__step.is-selected .vq-stair__count { color: var(--vq-on-dark-soft); }
    [data-vq-pricing].is-switchable .vq-stair__price .vq-plan__figure[data-period="annual"] .vq-plan__amount { font-size: 26px; }
    .vq-stair__count { grid-column: 1; margin: 0; color: var(--vq-muted); font-size: 13px; }
    .vq-stair__bar { display: block; grid-column: 1 / -1; inline-size: calc((.3 + .7 * var(--r, .5)) * 100%); block-size: 8px; margin-top: 10px; border-radius: 2px; background: var(--vq-olive); }
    .vq-stair__step.is-selected .vq-stair__bar { background: var(--vq-sand); }
    .vq-stair__cue { grid-column: 1 / -1; justify-self: start; margin-top: 12px; color: var(--vq-olive); }
    .vq-stair__step.is-selected .vq-stair__cue { color: var(--vq-sand); }
    .vq-stair__step[aria-expanded="true"] .vq-stair__cue-open { display: none; }
    .vq-stair__step[aria-expanded="true"] .vq-stair__cue-hide { display: inline; }
    .vq-plansheet { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
    .vq-plansheet__side { text-align: center; }
    .vq-plansheet__name .vq-kashida { display: block; inline-size: 1.4em; margin: .25em auto 0; transform-origin: center; }
    .vq-plansheet__summary { margin-inline: auto; }
    .vq-plansheet__price .vq-plan__figure { justify-content: center; }
    .vq-plansheet .vq-actions { justify-content: center; }
    .vq-plansheet__body { columns: 1; }
}
@media (max-width: 575.98px) { .vq-plansheet .vq-actions .vq-btn { flex: 1 1 100%; } }

/* 13. Selected work: a ring of projects on the night ground; it turns as the page scrolls ------------------- */
.vq-work { --vq-btn-ground: var(--vq-night); --card: clamp(250px, 25vw, 380px); --gap: 1.32; --dir: -1; overflow: hidden; background: var(--vq-night); color: var(--vq-sand); }
html[dir="ltr"] .vq-work { --dir: 1; }
.vq-work__controls { display: flex; align-items: center; gap: 10px; }
.vq-work__btn { display: grid; place-items: center; inline-size: 48px; block-size: 48px; padding: 0; border: 1.5px solid var(--vq-sand); border-radius: var(--vq-r); background: transparent; color: var(--vq-sand); cursor: pointer; transition: background-color .2s var(--vq-ease), color .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, .vq-work__btn:focus-visible { background: var(--vq-sand); color: var(--vq-night); }
/* the ring: N cards around a cylinder; the radius keeps a little air between neighbours */
.vq-work__stage { position: relative; block-size: calc(var(--card) * 1.2); perspective: 1500px; perspective-origin: 50% 35%; }
.vq-work__ring { --r: calc(var(--card) / (2 * tan(180deg / var(--n))) * var(--gap)); position: absolute; top: calc(var(--card) * .06); left: 50%; inline-size: var(--card); block-size: var(--card); margin: 0 0 0 calc(var(--card) / -2); padding: 0; list-style: none; transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateX(-5deg) rotateY(var(--turn, 0deg)); }
.vq-work__card { position: absolute; inset: 0; list-style: none; transform: rotateY(calc(var(--i) * var(--dir) * 360deg / var(--n))) translateZ(var(--r)); backface-visibility: hidden; }
.vq-work__link { display: block; inline-size: 100%; block-size: 100%; -webkit-user-drag: none; }
.vq-work__tile { display: block; inline-size: 100%; block-size: 100%; overflow: hidden; border-radius: 10px; background: var(--vq-sand); clip-path: var(--vq-cut-lg); }
.vq-work__tile img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; mix-blend-mode: multiply; pointer-events: none; }
.vq-work__link:focus-visible { outline-color: var(--vq-sand) !important; }
/* the project in front, named under the ring */
.vq-work__caption { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(18px, 2.4vw, 34px); text-align: center; }
.vq-work__nav { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 16px; inline-size: min(100%, 760px); }
.vq-work__names { min-inline-size: 0; }
.vq-work__open { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--vq-on-dark-soft); font: 700 14px/1.5 var(--vq-font); text-decoration: none; }
.vq-work__open::before { content: ""; inline-size: 7px; block-size: 7px; background: currentColor; transform: rotate(45deg); }
.vq-work__name { display: flex; flex-direction: column; align-items: center; }
.vq-work__name { margin: 0; font: 700 clamp(22px, 2.4vw, 34px)/1.4 var(--vq-font-display); --vq-kashida-color: var(--vq-sand); }
.vq-work__name a { display: inline-block; padding-block: 6px; color: var(--vq-sand); text-decoration: none; }
.vq-work__name a:hover { color: #FFFFFF; }
.vq-work__name[hidden] { display: none; }
.vq-motion .vq-work__name.is-on { animation: vq-rise .5s var(--vq-ease) both; }
.vq-work .vq-link { color: var(--vq-on-dark-soft); }
.vq-work .vq-link:hover { color: var(--vq-sand); }
@media (max-width: 767.98px) {
    .vq-work { --card: min(58vw, 260px); --gap: 1.1; }
    .vq-work__stage { perspective: 1000px; }
    .vq-work__nav { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; }
    .vq-work__btn { inline-size: 44px; block-size: 44px; }
    /* long project names: the body face, and no tail (it would land alone on the second line) */
    .vq-work__name { font: 700 17px/1.55 var(--vq-font); }
    .vq-work__name .vq-kashida { display: none; }
}

/* 14. Clients on our line: two lanes of logos riding either side of a dashed centre line ---------------------- */
.vq-clients { --tile: clamp(150px, 14vw, 210px); --vq-dir: 1; overflow: hidden; }
html[dir="ltr"] .vq-clients { --vq-dir: -1; }
.vq-clients__road { display: grid; gap: 18px; margin-top: var(--vq-block); }
.vq-clients__lane { overflow: hidden; }
.vq-clients__run { display: flex; gap: 18px; inline-size: max-content; margin: 0; padding: 0; list-style: none; animation: vq-lane 46s linear infinite; }
.vq-clients__lane--back .vq-clients__run { animation-direction: reverse; animation-duration: 54s; }
.vq-clients__road:hover .vq-clients__run { animation-play-state: paused; }
@keyframes vq-lane { from { transform: translateX(0); } to { transform: translateX(calc(var(--vq-dir) * 100% / 3)); } }
.vq-clients__tile { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; inline-size: var(--tile); block-size: calc(var(--tile) * .62); overflow: hidden; padding: clamp(16px, 1.6vw, 24px) clamp(20px, 2vw, 30px); list-style: none; border-radius: 8px; background: var(--vq-line); clip-path: var(--vq-cut-shape); }
.vq-clients__tile::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 7px; background: var(--vq-paper); clip-path: var(--vq-cut-shape); }
.vq-clients__tile a { display: contents; }
.vq-clients__tile img { display: block; min-block-size: 0; max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1); opacity: .8; transition: filter .3s var(--vq-ease), opacity .3s var(--vq-ease); }
.vq-clients__tile:hover img { filter: none; opacity: 1; }
/* the centre line: road marks, as on the stages' road */
.vq-clients__mark { display: block; block-size: 4px; background: repeating-linear-gradient(to left, var(--vq-olive) 0 38px, transparent 38px 70px); }
@media (max-width: 575.98px) { .vq-clients { --tile: 132px; } .vq-clients__road, .vq-clients__run { gap: 12px; } }
@media (prefers-reduced-motion: reduce) {
    .vq-clients__run { inline-size: auto; flex-wrap: wrap; justify-content: center; animation: none; }
    .vq-clients__tile[aria-hidden="true"] { display: none; }
    .vq-clients__road { padding-inline: 20px; }
}

/* 15. Latest articles: magazine cards (a strip on phones) ------------------------------------------------------- */
.vq-posts { background: var(--vq-paper); }
.vq-posts__row { --gut: max(20px, calc((100vw - 1320px) / 2 + 20px)); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); max-inline-size: 1320px; margin: 0 auto; padding: 0 20px; list-style: none; }
.vq-post { position: relative; display: flex; flex-direction: column; list-style: none; }
.vq-post__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: var(--vq-sand-deep); clip-path: var(--vq-cut-lg); }
.vq-post__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .8s var(--vq-ease); }
.vq-post:hover .vq-post__media img { transform: scale(1.04); }
.vq-post__cover { display: flex; flex-direction: column; justify-content: space-between; block-size: 100%; padding: clamp(18px, 2vw, 28px); background: var(--vq-night); color: var(--vq-sand); }
.vq-post__cover b { font: 600 clamp(19px, 1.7vw, 25px)/1.45 var(--vq-font-display); }
.vq-post__dots { inline-size: 34px; color: var(--vq-sand); }
.vq-post__body { display: flex; flex: 1; flex-direction: column; padding-top: 18px; }
.vq-post__date { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--vq-muted); font-size: 14px; font-weight: 700; }
.vq-post__date::before { content: ""; inline-size: 7px; block-size: 7px; background: var(--vq-olive); transform: rotate(45deg); }
.vq-post__title { margin: 0; font-size: clamp(18px, 1.45vw, 21px); font-weight: 600; line-height: 1.6; }
.vq-post__title a { color: var(--vq-ink); text-decoration: none; }
/* the whole card opens the article */
.vq-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vq-post__title a:focus-visible { outline: none !important; }
.vq-post:has(.vq-post__title a:focus-visible) { outline: 3px solid var(--vq-olive-deep); outline-offset: 6px; border-radius: 8px; }
.vq-post__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 10px 0 0; color: var(--vq-muted); font-size: 15.5px; line-height: 1.85; }
.vq-post__read { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; color: var(--vq-olive); font-size: 15px; font-weight: 700; }
.vq-post__read i { display: block; inline-size: 22px; block-size: 2px; background: currentColor; transform-origin: right center; transition: inline-size .45s var(--vq-ease); }
html[dir="ltr"] .vq-post__read i { transform-origin: left center; }
.vq-post:hover .vq-post__read i, .vq-post:has(:focus-visible) .vq-post__read i { inline-size: 56px; }
.vq-post:hover .vq-post__title a { color: var(--vq-olive); }
@media (max-width: 991.98px) {
    /* phones and tablets: a strip of cards that swipes sideways, snapping to each card */
    .vq-posts__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80vw, 380px); max-inline-size: none; padding: 0 var(--gut) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; overscroll-behavior-x: contain; }
    .vq-posts__row::-webkit-scrollbar { display: none; }
    .vq-post { scroll-snap-align: start; }
    .vq-posts .vq-section__top { align-items: center; }
}

/* 16. FAQ: a conversation with ڤارلك — questions, typing diamonds, reply bubbles; an ask bar that opens WhatsApp ---- */
.vq-faq__layout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.vq-faq__side .vq-head { margin-bottom: 26px; }
.vq-faq__group + .vq-faq__group { margin-top: 26px; }
.vq-faq__group-title { margin: 0 0 8px; color: var(--vq-olive); font: 700 14.5px/1.5 var(--vq-font); }
/* a question: a sand chip with the cut corner, like a message you are about to send */
.vq-faq__item { margin-bottom: 8px; }
.vq-faq__q { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 56px; padding: 14px clamp(16px, 1.8vw, 22px); color: var(--vq-ink); font-size: 16.5px; font-weight: 700; line-height: 1.6; list-style: none; cursor: pointer; transition: color .25s var(--vq-ease); }
.vq-faq__q::-webkit-details-marker { display: none; }
.vq-faq__q::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 10px; background: var(--vq-paper); box-shadow: inset 0 0 0 1px var(--vq-line); clip-path: var(--vq-cut-shape); transition: background-color .3s var(--vq-ease), box-shadow .3s var(--vq-ease); }
.vq-faq__q:hover::before { box-shadow: inset 0 0 0 1.5px var(--vq-olive); }
.vq-faq__mark { flex: none; inline-size: 12px; block-size: 12px; border: 2px solid var(--vq-olive); transform: rotate(45deg); transition: background-color .3s var(--vq-ease), border-color .3s var(--vq-ease), transform .4s var(--vq-ease); }
.vq-faq__item[open] > .vq-faq__q, .vq-faq__item.is-current > .vq-faq__q { color: var(--vq-sand); }
.vq-faq__item[open] > .vq-faq__q::before, .vq-faq__item.is-current > .vq-faq__q::before { background: var(--vq-olive); box-shadow: none; }
.vq-faq__item[open] .vq-faq__mark, .vq-faq__item.is-current .vq-faq__mark { border-color: var(--vq-sand); background: var(--vq-burgundy); transform: rotate(225deg); }
.vq-faq__q:focus-visible { outline-offset: 2px; }
/* the reply: ڤارلك's avatar (the VQ mark) and an olive-deep bubble */
.vq-faq__answer { overflow: hidden; }
.vq-faq__answer-in { padding: 12px 0 14px; }
.vq-faq__reply { display: flex; align-items: flex-end; gap: 10px; }
.vq-faq__avatar { flex: none; display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; background: var(--vq-night); }
.vq-faq__avatar-mark { inline-size: 22px; block-size: auto; aspect-ratio: 366 / 235; fill: var(--vq-sand); overflow: visible; }
.vq-faq__bubble { position: relative; max-inline-size: 58ch; padding: 14px 18px; border-radius: 16px 16px 4px 16px; background: var(--vq-olive-deep); color: var(--vq-on-dark-soft); font-size: 16px; line-height: 1.9; }
html[dir="ltr"] .vq-faq__bubble { border-radius: 16px 16px 16px 4px; }
.vq-faq__bubble p { margin: 0; color: inherit; }
.vq-faq__bubble p + p { margin-top: .7em; }
.vq-faq__bubble a { color: var(--vq-sand); }
/* typing: the three diamonds of the ڤ */
.vq-faq__typing { display: none; align-items: center; gap: 6px; margin: 2px 48px 10px 0; }
html[dir="ltr"] .vq-faq__typing { margin: 2px 0 10px 48px; }
.vq-faq__typing i { inline-size: 8px; block-size: 8px; background: var(--vq-olive); transform: rotate(45deg); animation: vq-type 1s var(--vq-ease) infinite; }
.vq-faq__typing i:nth-child(2) { animation-delay: .15s; }
.vq-faq__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes vq-type { 0%, 100% { opacity: .3; transform: rotate(45deg) translateY(0); } 40% { opacity: 1; transform: rotate(45deg) translate(-3px, -3px); } }
.vq-faq.is-typing-inline .vq-faq__item.is-typing .vq-faq__typing { display: inline-flex; }
.vq-faq.is-typing-inline .vq-faq__item.is-typing .vq-faq__reply { display: none; }
/* the chat window (wide screens) */
.vq-faq__chat { position: sticky; top: calc(var(--vq-header-h) + 28px); display: flex; flex-direction: column; min-block-size: 520px; border-radius: 14px; background: var(--vq-night); color: var(--vq-sand); clip-path: var(--vq-cut-lg); }
.vq-faq__chat[hidden] { display: none; }
.vq-faq__chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--vq-on-dark-line); }
.vq-faq__chat-head .vq-faq__avatar { inline-size: 44px; block-size: 44px; background: var(--vq-olive); }
.vq-faq__chat-name { display: flex; flex-direction: column; font: 700 17px/1.35 var(--vq-font-display); }
.vq-faq__chat-name small { display: flex; align-items: center; gap: 7px; color: var(--vq-on-dark-soft); font: 400 13.5px/1.5 var(--vq-font); }
.vq-faq__chat-name small::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: #8FB572; }
.vq-faq__chat-body { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 22px 20px 26px; }
.vq-faq__chat .vq-faq__bubble { background: var(--vq-olive); color: var(--vq-sand); }
.vq-faq__me { align-self: flex-end; max-inline-size: 80%; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--vq-sand); color: var(--vq-ink); font-size: 16px; font-weight: 700; line-height: 1.7; }
html[dir="ltr"] .vq-faq__me { border-radius: 16px 16px 4px 16px; }
.vq-faq__chat .vq-faq__typing { display: inline-flex; margin: 0; padding: 14px 18px; border-radius: 16px; background: var(--vq-olive); align-self: flex-start; }
.vq-faq__chat .vq-faq__typing i { background: var(--vq-sand); }
/* the ask bar: whatever is typed opens WhatsApp */
.vq-faq__ask { margin-top: clamp(28px, 3.4vw, 48px); padding: clamp(20px, 2.4vw, 30px); border-radius: 14px; background: var(--vq-olive); color: var(--vq-sand); clip-path: var(--vq-cut-lg); }
.vq-faq__ask-label { display: block; margin-bottom: 12px; color: var(--vq-sand); font: 700 clamp(19px, 1.6vw, 23px)/1.4 var(--vq-font-display); }
.vq-faq__ask-bar { display: flex; gap: 10px; }
.vq-faq__ask-bar input { flex: 1; min-inline-size: 0; min-block-size: 52px; padding: 10px 18px; border: 0; border-radius: 26px; background: var(--vq-sand); color: var(--vq-ink); font-size: 16px; }
.vq-faq__ask-bar input::placeholder { color: var(--vq-muted); }
.vq-faq__ask-bar input:focus-visible { outline: 3px solid var(--vq-sand) !important; outline-offset: 2px !important; }
.vq-faq__send { flex: none; display: inline-flex; align-items: center; gap: 8px; min-block-size: 52px; padding: 0 22px; border: 0; border-radius: 26px; background: var(--vq-burgundy); color: var(--vq-sand); font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color .2s var(--vq-ease); }
.vq-faq__send:hover { background: #6B3039; }
.vq-faq__send:focus-visible { outline-color: var(--vq-sand) !important; }
.vq-faq__ask-note { margin: 10px 0 0; color: var(--vq-on-dark-soft); font-size: 14px; }
/* wide screens with the chat window: the questions do not fold, the window plays the answer */
.vq-faq.has-window .vq-faq__answer { display: none; }
@media (max-width: 991.98px) {
    .vq-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .vq-faq__chat { display: none !important; }
    .vq-faq__side .vq-head { text-align: center; }
}
@media (max-width: 575.98px) {
    .vq-faq__q { font-size: 16px; min-block-size: 54px; }
    .vq-faq__bubble { font-size: 15.5px; padding: 12px 15px; }
    .vq-faq__avatar { inline-size: 32px; block-size: 32px; }
    .vq-faq__avatar-mark { inline-size: 19px; }
    .vq-faq__ask-label { text-align: center; }
    .vq-faq__send span { display: none; }
    .vq-faq__send { padding: 0 16px; }
    .vq-faq__ask-note { text-align: center; }
}

/* 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; } }
@media (max-width: 767.98px) {
    .vq-cta > .container { display: flex; flex-direction: column; }
    .vq-cta__mark { order: -1; margin: 0 0 30px; }
    .vq-cta { padding-top: clamp(48px, 12vw, 72px); padding-bottom: clamp(56px, 14vw, 80px); }
    .vq-cta__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; inline-size: auto !important; }
}

/* 18. About: a manifesto — the statement, how we work (night card) beside what sets us apart, three commitments that
   each carry a third of the VQ mark and slide together to complete it ----------------------------------------- */
@property --vq-gap { syntax: "<length>"; inherits: true; initial-value: 18px; }
.vq-about__statement { max-inline-size: 980px; }
.vq-about__headline { margin: 0; color: var(--vq-ink); font-size: clamp(32px, 4.4vw, 66px); font-weight: 700; line-height: 1.3; text-wrap: balance; --vq-kashida-w: 1.4em; }
.vq-about__lead { max-inline-size: 62ch; margin: 22px 0 0; color: var(--vq-muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.95; text-wrap: pretty; }
.vq-about__split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; margin-top: clamp(40px, 5vw, 72px); }
.vq-about__approach { position: relative; padding: clamp(26px, 3vw, 44px); border-radius: 12px; background: var(--vq-night); color: var(--vq-on-dark-soft); clip-path: var(--vq-cut-lg); }
.vq-about__dots { inline-size: 38px; margin-bottom: 18px; color: var(--vq-sand); }
.vq-about__title { margin: 0 0 14px; color: var(--vq-ink); font-size: clamp(22px, 2vw, 28px); font-weight: 600; --vq-kashida-w: 1.2em; }
.vq-about__approach .vq-about__title { color: var(--vq-sand); }
.vq-about__approach p { margin: 0; font-size: 17px; line-height: 1.95; }
.vq-about__points { padding-block: 8px; }
.vq-about__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vq-about__list li { position: relative; padding: 16px 18px; padding-inline-start: 50px; border-radius: 10px; background: var(--vq-paper); box-shadow: inset 0 0 0 1px var(--vq-line); color: var(--vq-ink); font-size: 16.5px; font-weight: 700; line-height: 1.7; list-style: none; }
.vq-about__list li::before { content: ""; position: absolute; top: 50%; inset-inline-start: 20px; inline-size: 11px; block-size: 11px; margin-top: -5.5px; background: var(--vq-burgundy); transform: rotate(45deg); }
/* the commitments: three cards, one mark across them */
.vq-about__pillars { --vq-gap: 18px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--vq-gap); margin: clamp(48px, 6vw, 96px) 0 0; padding: 0; list-style: none; }
.vq-about__pillar { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-block-size: clamp(260px, 26vw, 360px); padding: clamp(22px, 2.4vw, 34px); border-radius: 12px; background: var(--vq-olive); color: var(--vq-on-dark-soft); list-style: none; }
.vq-about__pillar--burg { background: var(--vq-burgundy); }
.vq-about__pillar--night { background: var(--vq-night); }
.vq-about__piece { position: absolute; z-index: -1; top: 14%; inset-inline-start: calc(var(--i) * (-100% - var(--vq-gap))); inline-size: calc(300% + 2 * var(--vq-gap)); display: flex; justify-content: center; pointer-events: none; }
.vq-about__mark { inline-size: 62%; block-size: auto; aspect-ratio: 366 / 235; fill: rgba(240, 232, 218, .16); overflow: visible; }
.vq-about__pillar-title { margin: 0 0 8px; color: var(--vq-sand); font-size: clamp(22px, 2vw, 28px); font-weight: 600; }
.vq-about__pillar p { margin: 0; font-size: 16px; line-height: 1.85; }
@media (prefers-reduced-motion: no-preference) {
    .vq-motion .vq-about[data-vq-reveal] .vq-about__pillars { --vq-gap: 56px; transition: --vq-gap 1.4s var(--vq-ease) .2s; }
    .vq-motion .vq-about[data-vq-reveal].is-in .vq-about__pillars { --vq-gap: 18px; }
    .vq-motion .vq-about[data-vq-reveal] .vq-about__list li { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--vq-ease) calc(.2s + var(--i, 0) * 90ms), transform .6s var(--vq-ease) calc(.2s + var(--i, 0) * 90ms); }
    .vq-motion .vq-about[data-vq-reveal].is-in .vq-about__list li { opacity: 1; transform: none; }
}
@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__pillar { min-block-size: 200px; }
    /* stacked: each card shows its own piece of the mark, large */
    .vq-about__piece { inset-inline-start: auto; inset-inline-end: -12%; top: -10%; inline-size: 70%; }
    .vq-about__mark { inline-size: 100%; }
}
@media (max-width: 767.98px) {
    .vq-about__statement { text-align: center; margin-inline: auto; }
    .vq-about__headline .vq-kashida { display: block; inline-size: 1.4em; margin: .25em auto 0; transform-origin: center; }
    .vq-about__lead { margin-inline: auto; }
    .vq-about__approach, .vq-about__pillar { text-align: center; }
    .vq-about__dots { margin-inline: auto; }
    .vq-about__points .vq-about__title { text-align: center; }
    .vq-about__points .vq-about__title .vq-kashida { display: block; inline-size: 1.2em; margin: .25em auto 0; }
    .vq-about__pillar { align-items: center; }
}

/* 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__top .vq-head { margin-bottom: clamp(24px, 3vw, 40px); }
/* three channels as large cards; WhatsApp (the quickest) in burgundy, the others on night */
.vq-contact__channels { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.vq-contact__channels > li { list-style: none; }
.vq-contact__channel { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; block-size: 100%; min-block-size: 210px; padding: clamp(20px, 2.2vw, 30px); border-radius: 12px; background: var(--vq-night); color: var(--vq-sand); text-decoration: none; clip-path: var(--vq-cut-lg); transition: transform .35s var(--vq-ease), background-color .3s var(--vq-ease); }
.vq-contact__channel--wa { background: var(--vq-burgundy); }
.vq-contact__channel svg { inline-size: 34px; block-size: 34px; margin-bottom: auto; color: var(--vq-sand); }
.vq-contact__tag { position: absolute; top: clamp(18px, 2vw, 26px); inset-inline-end: clamp(18px, 2vw, 26px); padding: 3px 12px; border-radius: 20px; background: var(--vq-sand); color: var(--vq-burgundy); font-size: 13px; font-weight: 800; }
.vq-contact__label { margin-top: 18px; color: var(--vq-sand); font: 700 clamp(21px, 1.9vw, 27px)/1.35 var(--vq-font-display); }
.vq-contact__note { color: var(--vq-on-dark-soft); font-size: 15px; line-height: 1.7; }
.vq-contact__value { color: var(--vq-on-dark-soft); font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
body[dir="rtl"] .vq-contact__value[dir="ltr"] { text-align: right; }
.vq-contact__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--vq-sand); font-size: 15px; font-weight: 700; }
.vq-contact__go::after { content: ""; inline-size: 26px; block-size: 2px; background: currentColor; transition: inline-size .45s var(--vq-ease); }
.vq-contact__channel:hover, .vq-contact__channel:focus-visible { color: var(--vq-sand); transform: translateY(-4px); }
.vq-contact__channel:hover .vq-contact__go::after, .vq-contact__channel:focus-visible .vq-contact__go::after { inline-size: 60px; }
.vq-contact__channel:focus-visible { outline-color: var(--vq-olive-deep) !important; }
.vq-contact__place { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--vq-muted); font-weight: 700; }
.vq-contact__place i { inline-size: 8px; block-size: 8px; background: var(--vq-olive); transform: rotate(45deg); }
/* what happens after a message: three stations on one line */
.vq-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(48px, 6vw, 88px); }
.vq-contact__after-title { margin: 0 0 22px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; --vq-kashida-w: 1.4em; }
.vq-contact__steps { position: relative; margin: 0; padding: 0 0 0 0; padding-inline-start: 34px; list-style: none; }
.vq-contact__steps::before { content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 7px; inline-size: 3px; background: var(--vq-olive); }
.vq-contact__steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding-bottom: 26px; list-style: none; }
.vq-contact__steps li:last-child { padding-bottom: 0; }
.vq-contact__steps li::before { content: ""; position: absolute; top: 7px; inset-inline-start: -33px; inline-size: 15px; block-size: 15px; border: 3px solid var(--vq-olive); background: var(--vq-sand); transform: rotate(45deg); }
.vq-contact__steps li:last-child::before { background: var(--vq-burgundy); border-color: var(--vq-burgundy); }
.vq-contact__steps b { color: var(--vq-ink); font: 700 clamp(18px, 1.5vw, 21px)/1.5 var(--vq-font-display); }
.vq-contact__steps span { color: var(--vq-muted); font-size: 15.5px; line-height: 1.8; }
@media (prefers-reduced-motion: no-preference) {
    .vq-motion .vq-contact[data-vq-reveal] .vq-contact__channels > li { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--vq-ease) calc(var(--i, 0) * 110ms), transform .7s var(--vq-ease) calc(var(--i, 0) * 110ms); }
    .vq-motion .vq-contact[data-vq-reveal].is-in .vq-contact__channels > li { opacity: 1; transform: none; }
    .vq-motion .vq-contact[data-vq-reveal] .vq-contact__steps::before { transform: scaleY(0); transform-origin: top; transition: transform 1.2s var(--vq-ease) .5s; }
    .vq-motion .vq-contact[data-vq-reveal].is-in .vq-contact__steps::before { transform: none; }
}
@media (max-width: 991.98px) {
    .vq-contact__channels { grid-template-columns: minmax(0, 1fr); }
    .vq-contact__channel { min-block-size: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "icon detail" "icon go"; column-gap: 16px; row-gap: 2px; align-items: center; }
    .vq-contact__channel svg { grid-area: icon; margin: 0; inline-size: 30px; block-size: 30px; }
    .vq-contact__label { grid-area: label; margin: 0; font-size: 20px; }
    .vq-contact__note, .vq-contact__value { grid-area: detail; }
    .vq-contact__go { grid-area: go; margin-top: 4px; }
    .vq-contact__tag { top: 14px; inset-inline-end: 14px; }
    .vq-contact__top .vq-head, .vq-contact__place { text-align: center; justify-content: center; }
}
.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; } }

/* 21b. Service page: the night band, «آلية العمل» on one line, the chapter's other services, the ask -------- */
/* The default layout wraps views in a .container; these bands run edge to edge (main clips the overflow). */
.container > .vq-bleed { margin-inline: calc(50% - 50vw); }
.vq-svhero { --say: var(--vq-burgundy); --vq-btn-ground: var(--vq-night); position: relative; overflow: hidden; background: var(--vq-night); color: var(--vq-sand); }
.vq-svhero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(24px, 4vw, 72px); min-block-size: min(620px, calc(86svh - var(--vq-header-h))); padding-block: clamp(44px, 5.5vw, 88px); }
.vq-svhero__crumbs ol { margin: 0; }
.vq-svhero .vq-crumbs :is(a, span, li) { color: var(--vq-on-dark-soft); }
.vq-svhero .vq-crumbs a:hover { color: var(--vq-sand); }
.vq-svhero__chapter { display: flex; align-items: center; gap: 9px; margin: 22px 0 8px; color: var(--vq-on-dark-soft); font-size: 15px; font-weight: 700; }
.vq-svhero__chapter::before { content: ""; inline-size: 8px; block-size: 8px; background: var(--vq-sand); transform: rotate(45deg); }
.vq-svhero__title { margin: 0; color: var(--vq-sand); font: 700 clamp(38px, 5vw, 80px)/1.22 var(--vq-font-display); text-wrap: balance; --vq-kashida-color: var(--vq-sand); --vq-kashida-w: 1.2em; }
.vq-svhero__lead { max-inline-size: 52ch; margin: 18px 0 0; color: var(--vq-on-dark-soft); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.95; text-wrap: pretty; }
.vq-svhero .vq-actions { margin-top: 30px; }
.vq-svhero__more { display: none; margin-top: 8px; padding: 6px 2px; border: 0; background: none; color: var(--vq-sand); font-weight: 700; text-decoration: underline; text-underline-offset: .45em; cursor: pointer; }
.vq-svhero__table { position: relative; align-self: stretch; min-block-size: 420px; perspective: 1300px; perspective-origin: 50% 30%; }
.vq-flow { background: var(--vq-paper); }
.vq-flow__label { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; color: var(--vq-olive); font-size: 15px; font-weight: 700; }
.vq-flow__label::before { content: ""; inline-size: 8px; block-size: 8px; background: currentColor; transform: rotate(45deg); }
.vq-flow__track { position: relative; }
.vq-flow__rail { position: absolute; inset-inline: 0; top: 9px; block-size: 3px; background: var(--vq-line); }
.vq-flow__fill { position: absolute; inset: 0; background: var(--vq-olive); transform-origin: right center; }
html[dir="ltr"] .vq-flow__fill { transform-origin: left center; }
.vq-flow__line { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 36px); margin: 0; padding: 0; list-style: none; }
.vq-flow__step { position: relative; padding-top: 44px; }
.vq-flow__dot { position: absolute; top: 1px; inset-inline-start: 0; inline-size: 19px; block-size: 19px; border: 3px solid var(--vq-olive); background: var(--vq-olive); transform: rotate(45deg); transition: background-color .35s var(--vq-ease), transform .45s var(--vq-ease); }
.vq-motion .vq-flow__step:not(.is-active) .vq-flow__dot { background: var(--vq-paper); transform: rotate(45deg) scale(.8); }
.vq-pkflow .vq-flow__num { font-family: var(--vq-font); font-size: 14px; }
.vq-flow__num { display: block; margin-bottom: 6px; color: var(--vq-olive); font: 700 15px/1.2 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.vq-flow__title { margin: 0; color: var(--vq-ink); font: 600 clamp(19px, 1.45vw, 22px)/1.45 var(--vq-font-display); }
.vq-flow__text { margin: 8px 0 0; color: var(--vq-muted); font-size: 15.5px; line-height: 1.85; text-wrap: pretty; }
.vq-motion .vq-flow__step :is(.vq-flow__num, .vq-flow__title, .vq-flow__text) { transition: opacity .45s var(--vq-ease), transform .45s var(--vq-ease); }
.vq-motion .vq-flow__step:not(.is-active) :is(.vq-flow__num, .vq-flow__title, .vq-flow__text) { opacity: .35; transform: translateY(8px); }
.vq-siblings { --fg: var(--vq-ink); --rule: var(--vq-line); }
.vq-siblings__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 88px); margin: 0; padding: 0; list-style: none; }
.vq-siblings .vq-svc__leader { transform: scaleX(.14); }
.vq-siblings .vq-svc__row:is(:hover, :focus-visible) { color: var(--vq-olive); }
.vq-svask { --vq-btn-ground: var(--vq-burgundy); background: var(--vq-burgundy); color: var(--vq-sand); }
.vq-svask__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: clamp(48px, 6vw, 88px); }
.vq-svask__title { margin: 0; color: var(--vq-sand); font: 700 clamp(26px, 3vw, 44px)/1.35 var(--vq-font-display); }
.vq-svask__text { max-width: 52ch; margin: 10px 0 0; color: var(--vq-on-dark-soft); }
@media (max-width: 991.98px) {
    .vq-svhero__inner { grid-template-columns: minmax(0, 1fr); gap: 4px; min-block-size: 0; padding-block: 18px 52px; text-align: center; }
    .vq-svhero__table { order: -1; min-block-size: clamp(230px, 64vw, 360px); }
    .vq-svhero__table .vq-svc__plane { inset: 6% 8%; }
    .vq-svhero .vq-crumbs ol, .vq-svhero__chapter, .vq-svhero .vq-actions { justify-content: center; }
    .vq-svhero__title .vq-kashida { display: block; inline-size: 1.3em; margin: .25em auto 0; transform-origin: center; }
    .vq-svhero__lead { margin-inline: auto; }
    .vq-svhero__lead.is-folded { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
    .vq-svhero__more:not([hidden]) { display: inline-block; }
    /* the stations run down the reading edge */
    .vq-flow__line { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-inline-start: 46px; }
    .vq-flow__rail { inset-inline: 8px auto; top: 0; bottom: 0; inline-size: 3px; block-size: auto; }
    .vq-flow__fill, html[dir="ltr"] .vq-flow__fill { transform-origin: center top; }
    .vq-flow__step { padding-top: 0; }
    .vq-flow__dot { top: 3px; inset-inline-start: -46px; }
    .vq-siblings__list { grid-template-columns: minmax(0, 1fr); }
    .vq-flow__label { justify-content: center; }
    .vq-svask__inner { flex-direction: column; text-align: center; }
    .vq-svask .vq-actions { justify-content: center; }
}
@media (max-width: 575.98px) {
    .vq-svhero__title { font-size: clamp(32px, 9.4vw, 42px); }
    .vq-svhero .vq-actions .vq-btn, .vq-svask .vq-actions .vq-btn { inline-size: 100%; }
}

/* 21c. Package page and project page (share the service page's night band, stations and ask) ---------------- */
.vq-pkhero__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 22px 0 0; }
.vq-pkhero__amount { color: var(--vq-sand); font: 700 clamp(44px, 4.6vw, 68px)/1 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.vq-pkhero__unit { color: var(--vq-on-dark-soft); font-size: 16px; font-weight: 700; }
.vq-pkhero__note { flex-basis: 100%; color: var(--vq-on-dark-soft); font-size: 14px; }
/* the figures as a spec sheet: big numbers in sand cells */
.vq-pkhero__sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--vq-on-dark-line); border-radius: 10px; background: var(--vq-on-dark-line); clip-path: var(--vq-cut-lg); }
.vq-pkhero__fig { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-block-size: clamp(130px, 12vw, 170px); padding: clamp(18px, 2vw, 28px); background: var(--vq-night); }
.vq-pkhero__fig dd { margin: 0; color: var(--vq-sand); font: 700 clamp(40px, 4vw, 60px)/1 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.vq-pkhero__fig dt { color: var(--vq-on-dark-soft); font-size: 15px; font-weight: 700; line-height: 1.5; }
.vq-flow__step .vq-list { gap: 7px; margin-top: 12px; font-size: 15px; }
.vq-flow__step .vq-list li { line-height: 1.7; }
.vq-pkorder { --vq-btn-ground: var(--vq-sand-deep); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; margin-top: clamp(40px, 5vw, 72px); padding: clamp(24px, 3vw, 40px); border-radius: 10px; background: var(--vq-sand-deep); clip-path: var(--vq-cut-lg); }
.vq-pkorder__dots { inline-size: 40px; color: var(--vq-olive); }
.vq-pkorder__title { margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; line-height: 1.4; }
.vq-pkorder__text { margin: 6px 0 0; color: var(--vq-muted); }
/* the closing band on package pages: olive, so it parts from the olive-deep footer */
.vq-cta--olive { background: var(--vq-olive); --vq-btn-ground: var(--vq-olive); }
/* project: the work in a large beige frame */
.vq-pjhero__media { margin: 0; overflow: hidden; border-radius: 10px; background: var(--vq-sand); clip-path: var(--vq-cut-lg); }
.vq-pjhero__media img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 850 / 480; object-fit: cover; mix-blend-mode: multiply; }
.vq-case { background: var(--vq-paper); }
.vq-case__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 clamp(32px, 4vw, 56px); }
.vq-case__stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: clamp(20px, 2.4vw, 32px); border-radius: 10px; background: var(--vq-olive); color: var(--vq-sand); clip-path: var(--vq-cut-lg); }
.vq-case__stat dd { margin: 0; font: 700 clamp(38px, 3.8vw, 56px)/1.1 var(--vq-font-display); font-variant-numeric: tabular-nums; }
.vq-case__stat dt { color: var(--vq-on-dark-soft); font-size: 15px; font-weight: 700; }
.vq-case__sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 44px); }
.vq-case__section { padding-top: 18px; border-top: 2px solid var(--vq-olive); }
.vq-case__title { margin: 0 0 10px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; }
.vq-case__section p { color: var(--vq-muted); line-height: 1.95; }
.vq-case__summary { margin: clamp(36px, 4.6vw, 64px) 0 0; padding: clamp(22px, 3vw, 40px); border-inline-start: 4px solid var(--vq-burgundy); background: var(--vq-sand-deep); }
.vq-case__summary-title { margin: 0 0 6px; color: var(--vq-burgundy); font: 700 15px/1.5 var(--vq-font); }
.vq-case__summary p:last-child { margin: 0; color: var(--vq-ink); font: 500 clamp(19px, 1.8vw, 25px)/1.7 var(--vq-font-display); }
.vq-others__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.vq-others__item { list-style: none; }
.vq-others__link { display: block; color: var(--vq-ink); text-decoration: none; }
.vq-others__tile { display: block; aspect-ratio: 4 / 3; margin: 0; border-radius: 10px; }
.vq-others__tile img { transition: transform .8s var(--vq-ease); }
.vq-others__link:hover .vq-others__tile img { transform: scale(1.04); }
.vq-others__name { display: block; margin-top: 12px; font: 600 18px/1.55 var(--vq-font-display); }
.vq-others__link:hover .vq-others__name { color: var(--vq-olive); }
@media (max-width: 991.98px) {
    .vq-pkhero__price { justify-content: center; }
    .vq-pkhero__sheet { order: 2; margin-top: 26px; }
    .vq-pjhero__media { order: -1; margin-bottom: 12px; }
    .vq-pkorder { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .vq-others__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vq-others__item:nth-child(3) { display: none; }
}
@media (max-width: 575.98px) {
    .vq-pkhero__fig { min-block-size: 112px; padding: 16px; }
    .vq-case__stats { grid-template-columns: minmax(0, 1fr); }
    .vq-pkorder .vq-btn { inline-size: 100%; }
    .vq-others__name { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
    .vq-motion :is(.vq-case__stats, .vq-pkhero__sheet)[data-vq-reveal] > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--vq-ease) calc(var(--i, 0) * 90ms), transform .6s var(--vq-ease) calc(var(--i, 0) * 90ms); }
    .vq-motion :is(.vq-case__stats, .vq-pkhero__sheet)[data-vq-reveal].is-in > * { opacity: 1; transform: none; }
    .vq-motion :is(.vq-case__section, .vq-case__summary)[data-vq-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--vq-ease) calc(var(--i, 0) * 110ms), transform .7s var(--vq-ease) calc(var(--i, 0) * 110ms); }
    .vq-motion :is(.vq-case__section, .vq-case__summary)[data-vq-reveal].is-in { opacity: 1; transform: none; }
    .vq-motion .vq-others__list[data-vq-reveal] .vq-others__item { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--vq-ease) calc(var(--i, 0) * 100ms), transform .7s var(--vq-ease) calc(var(--i, 0) * 100ms); }
    .vq-motion .vq-others__list[data-vq-reveal].is-in .vq-others__item { opacity: 1; transform: none; }
}

/* 21d. Projects grid (the template's list at /projects): the hover sheet in the brand, never the template blue ------ */
:root { --tg-color-dark-blue: var(--vq-night); }
.project__thumb-two { overflow: hidden; border-radius: 15px; background: var(--vq-sand); }
.project__thumb-two img { mix-blend-mode: multiply; }
.project__thumb-two::before { z-index: 1; background: var(--vq-burgundy) !important; opacity: .94 !important; }
.project__item-two:focus-within .project__thumb-two::before { height: 100%; }
.project__item-two:focus-within .project__content-two { margin-top: 0; opacity: 1; visibility: visible; }
.project__content-two { z-index: 2; }
.project__content-two .title { color: var(--vq-sand); font-family: var(--vq-font-display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; }
.project__content-two .title a { color: var(--vq-sand); }
.project__content-two .title a:hover { color: #FFFFFF; }
.project__content-two span { color: var(--vq-on-dark-soft); }
.link-arrow-two a { background: var(--vq-sand); color: var(--vq-burgundy); }
.link-arrow-two a:hover, .link-arrow-two a:focus-visible { background: #FFFFFF; color: var(--vq-burgundy); }
.link-arrow-two a svg path { fill: currentColor; }
.project__content-two :is(a):focus-visible { outline-color: var(--vq-sand) !important; }

/* 22. Footer: mark and slogan, three contact actions, links (folds on phones), place and profiles, bottom bar ---- */
.vq-footer { position: relative; padding-top: clamp(48px, 6vw, 88px); 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: 16px 48px; }
.vq-footer__logo img { display: block; block-size: clamp(34px, 3.4vw, 46px); inline-size: auto; }
.vq-footer__slogan { margin: 0; color: var(--vq-sand); font: 500 clamp(18px, 1.9vw, 26px)/1.5 var(--vq-font-display); --vq-kashida-w: 1.8em; }
/* contact actions: large, equal buttons with an icon, a label and the detail */
.vq-footer__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: clamp(28px, 3.4vw, 44px) 0 0; padding: 0; list-style: none; }
.vq-footer__action { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 14px; block-size: 100%; padding: 16px 18px; border-radius: 10px; background: rgba(240, 232, 218, .24); color: var(--vq-sand); text-decoration: none; clip-path: var(--vq-cut-shape); transition: background-color .25s var(--vq-ease), border-color .25s var(--vq-ease), color .25s var(--vq-ease); }
.vq-footer__action svg { grid-row: 1 / span 2; inline-size: 28px; block-size: 28px; }
.vq-footer__action-label { font: 700 17px/1.4 var(--vq-font); }
.vq-footer__action-sub { overflow: hidden; color: var(--vq-on-dark-soft); font-size: 14px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
body[dir="rtl"] .vq-footer__action-sub[dir="ltr"] { text-align: end; }
.vq-footer__action::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 9px; background: var(--vq-olive-deep); clip-path: var(--vq-cut-shape); transition: background-color .25s var(--vq-ease); }
.vq-footer__action:hover, .vq-footer__action:focus-visible { background: var(--vq-sand); color: var(--vq-olive-deep); }
.vq-footer__action:hover::before, .vq-footer__action:focus-visible::before { background: var(--vq-sand); }
.vq-footer__action:hover .vq-footer__action-sub, .vq-footer__action:focus-visible .vq-footer__action-sub { color: var(--vq-olive-deep); }
.vq-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(28px, 5vw, 80px); padding-block: clamp(32px, 4vw, 48px); }
.vq-footer__title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--vq-sand); font: 800 16px/1.5 var(--vq-font); list-style: none; }
.vq-footer__title::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; background: var(--vq-sand); transform: rotate(45deg); }
.vq-footer__title::-webkit-details-marker { display: none; }
.vq-footer__title i { display: none; }
/* wide screens: the folds stay open and their titles are plain titles */
@media (min-width: 768px) { .vq-footer__fold > summary { pointer-events: none; } }
.vq-footer__list { display: grid; gap: 2px; 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__address { margin: 0; color: var(--vq-on-dark-soft); font-size: 15.5px; }
.vq-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 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 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 18px 22px; border-top: 1px solid var(--vq-on-dark-line); }
.vq-footer__copy { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; color: var(--vq-on-dark-soft); font-size: 14px; line-height: 1.8; }
.vq-footer__copy span + span::before { content: ""; display: inline-block; inline-size: 5px; block-size: 5px; margin-inline-end: 12px; vertical-align: middle; background: var(--vq-on-dark-soft); transform: rotate(45deg); }
.vq-footer__bottom a { color: var(--vq-sand); }
.vq-footer__top { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; color: var(--vq-sand); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.vq-footer__top i { inline-size: 9px; block-size: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(2px) rotate(-45deg); }
.vq-footer__top:hover { color: #FFFFFF; }
@media (max-width: 991.98px) { .vq-footer__actions { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
    .vq-footer__brand { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .vq-footer__slogan .vq-kashida { display: block; inline-size: 1.6em; margin: .3em auto 0; transform-origin: center; }
    /* phones: three square actions side by side */
    .vq-footer__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
    .vq-footer__action { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; justify-items: center; row-gap: 6px; padding: 16px 8px 14px; text-align: center; }
    .vq-footer__action svg { grid-row: auto; inline-size: 26px; block-size: 26px; }
    .vq-footer__action-label { font-size: 15px; }
    .vq-footer__action-sub { display: none; }
    /* the lists fold: one tappable row each */
    .vq-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 22px 18px; }
    .vq-footer__fold { border-bottom: 1px solid var(--vq-on-dark-line); }
    .vq-footer__fold > summary { justify-content: flex-start; min-block-size: 54px; margin: 0; cursor: pointer; }
    .vq-footer__fold > summary i { display: block; margin-inline-start: auto; inline-size: 10px; block-size: 10px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: translateY(-3px) rotate(-45deg); transition: transform .3s var(--vq-ease); }
    .vq-footer__fold[open] > summary i { transform: translateY(2px) rotate(135deg); }
    .vq-footer__fold .vq-footer__list { padding-bottom: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
    .vq-footer__fold .vq-footer__list a { display: flex; align-items: center; min-block-size: 44px; padding: 4px 0; font-size: 15px; line-height: 1.45; }
    .vq-footer__place { padding-top: 22px; text-align: center; }
    .vq-footer__title--static { justify-content: center; }
    .vq-footer__social { justify-content: center; }
    .vq-footer__bottom { flex-direction: column; justify-content: center; text-align: center; padding-bottom: 86px; }
    .vq-footer__copy { flex-direction: column; align-items: center; gap: 0; }
    .vq-footer__copy span + span::before { display: none; }
}

/* 23. Overlays ----------------------------------------------------------------------------------------- */
.whatsapp-float { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 1000; display: grid; place-items: center; inline-size: 48px; block-size: 48px; padding: 0; border-radius: 50%; background: var(--vq-olive); color: var(--vq-sand); box-shadow: 0 0 0 2px var(--vq-paper); 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); }
/* always at hand, except while the phone menu is open; it steps above the cookie card while that is shown */
body.mobile-menu-visible .whatsapp-float { opacity: 0; transform: scale(.6); pointer-events: none; }
/* small phones: it waits until the cookie card is answered (it would sit on the hero's main button); larger
   screens lift it above the card */
@media (max-width: 575.98px) { body:has(.site-notice.site-notice--visible) .whatsapp-float { bottom: 118px; } }
@media (min-width: 576px) { body:has(.site-notice.site-notice--visible) .whatsapp-float { bottom: 92px; } }
.whatsapp-float svg { inline-size: 27px; block-size: 27px; }
/* where another WhatsApp button is on screen (the FAQ's ask card, the closing band, the footer) it steps aside */
body.vq-near-end .whatsapp-float { opacity: 0; transform: scale(.6); pointer-events: none; }
.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: 42px; padding: 6px 18px; border: 0 !important; border-radius: var(--vq-r) !important; background: var(--vq-sand) !important; color: var(--vq-olive-deep) !important; font-size: 14px !important; font-weight: 700 !important; white-space: nowrap; }
/* A compact card at the bottom edge instead of the plugin's full-width bar, so it never hides the hero's actions. */
.site-notice { inset: auto 12px 12px 12px !important; max-inline-size: 720px; margin-inline: auto; padding: 0 !important; border: 1px solid var(--vq-on-dark-line) !important; border-radius: 10px; box-shadow: none !important; }
.site-notice .site-notice__inner { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px 14px !important; padding: 10px 12px 10px 16px !important; }
.site-notice .site-notice__message, .site-notice .site-notice__message * { font-size: 14px !important; line-height: 1.6 !important; }
.site-notice .site-notice__message { flex: 1; min-inline-size: 0; padding: 0 !important; }
.site-notice .site-notice__actions { flex: none; margin: 0 !important; padding: 0 !important; }
@media (max-width: 575.98px) { .site-notice .site-notice__message, .site-notice .site-notice__message * { font-size: 12.5px !important; line-height: 1.55 !important; } .site-notice button, .site-notice .site-notice__agree { min-height: 40px; padding: 6px 12px; overflow: visible !important; text-overflow: clip !important; max-inline-size: none !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-cue { 0%, 100% { transform: rotate(45deg) scale(1); } 40% { transform: rotate(45deg) scale(1.6); background: currentColor; } }
@keyframes vq-pulse { 0% { transform: rotate(45deg) scale(1); } 45% { transform: rotate(45deg) scale(1.45); } 100% { transform: rotate(45deg) scale(1); } }
@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-footer__brand, .vq-404) .vq-kashida { transform: scaleX(0); transition: transform 1s var(--vq-ease) .15s; }
    .vq-motion :is(.vq-head, .vq-footer__brand, .vq-404).is-in .vq-kashida { transform: scaleX(1); }

    /* Service cards: the title draws its kashida and the services rise in turn when the card arrives. */
    .vq-motion .vq-svc__card[data-vq-reveal] .vq-kashida { transform: scaleX(0); transition: transform 1s var(--vq-ease) .25s; }
    .vq-motion .vq-svc__card[data-vq-reveal].is-in .vq-kashida { transform: scaleX(1); }
    .vq-motion .vq-svc__card[data-vq-reveal] .vq-svc__list li { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--vq-ease) calc(.2s + var(--n, 0) * 50ms), transform .55s var(--vq-ease) calc(.2s + var(--n, 0) * 50ms); }
    .vq-motion .vq-svc__card[data-vq-reveal].is-in .vq-svc__list li { opacity: 1; transform: none; }

    /* Packages: the steps rise from the line in turn; a newly chosen sheet rises into place. */
    .vq-motion .vq-stair[data-vq-reveal] .vq-stair__step { clip-path: inset(100% -20px -8px -20px); transition: clip-path 1s var(--vq-ease) calc(var(--i, 0) * 110ms), background-color .3s var(--vq-ease); }
    .vq-motion .vq-stair[data-vq-reveal].is-in .vq-stair__step { clip-path: inset(0 -20px -8px -20px); }
    .vq-motion .vq-stair[data-vq-reveal] .vq-stair__bar { transform: scaleX(0); transform-origin: right center; transition: transform 1.1s var(--vq-ease) calc(.35s + var(--i, 0) * 140ms), background-color .3s var(--vq-ease); }
    html[dir="ltr"].vq-motion .vq-stair[data-vq-reveal] .vq-stair__bar { transform-origin: left center; }
    .vq-motion .vq-stair[data-vq-reveal].is-in .vq-stair__bar { transform: none; }
    /* once the steps are up, the closed ones' diamonds pulse in turn: an invitation to tap */
    .vq-motion .vq-stair[data-vq-reveal].is-in .vq-stair__step[aria-expanded="false"] .vq-stair__cue i { animation: vq-cue 1.1s var(--vq-ease) calc(1.4s + var(--i, 0) * 180ms) 2; }

    /* Articles: the cards rise in turn. */
    .vq-motion .vq-posts__row[data-vq-reveal] .vq-post { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--vq-ease) calc(var(--i, 0) * 100ms), transform .7s var(--vq-ease) calc(var(--i, 0) * 100ms); }
    .vq-motion .vq-posts__row[data-vq-reveal].is-in .vq-post { 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__mark { margin-inline: auto; }
    .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-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-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-crumbs ol { justify-content: center; }
    .vq-404 .vq-actions { justify-content: center; }
    .vq-404__grid { text-align: center; }
    .vq-404__mark { margin-inline: auto; }
}

/* 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; }
    @media (max-height: 640px) { .vq-stage__pause { inline-size: 36px; block-size: 36px; } .vq-stage__mark { block-size: 28px; } .vq-stage__crest { margin-bottom: 8px; } .vq-stage__l1 { font-size: clamp(40px, 11.6vw, 48px); } .vq-stage__l2 { font-size: 23px; } .vq-stage__lead { font-size: 15px; line-height: 1.75; margin-top: 10px; } .vq-stage .vq-actions { margin-top: 16px; } .vq-stage__inner { padding-top: 104px; } }
    .vq-stage .vq-actions { flex-wrap: nowrap; margin-top: 20px; gap: 10px; }
    .vq-stage .vq-actions .vq-btn--light { flex: 1 1 auto; padding-inline: 18px; }
    .vq-stage .vq-actions .vq-stage__second { display: none; }
    .vq-stage .vq-actions .vq-stage__wa { flex: none; gap: 8px; padding-inline: 16px; }
    .vq-stage .vq-actions .vq-stage__wa svg { flex: none; }
    /* the second action is a text link on phones, not a second slab */
    .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-service__ask { grid-template-columns: minmax(0, 1fr); }
    .vq-service__ask .vq-diamonds { grid-row: auto; }
    .vq-service__ask .vq-actions { grid-column: auto; }
}