/* =====================================================================================================================
   VAHRK — FULL-PAGE INTEGRATION LAYER (approved 2026-10-08)
   Loaded last by index.php, which puts class="vfi" on <html>. Every rule is scoped to html.vfi, so the secondary pages
   (our-product.php, why-choose-us.php, …) are not affected. Changes layout, rhythm, typography and control styling only:
   no content, data, markup order or behaviour. Reference preview: full-page-integration-preview/ (vfi.css = this file).

   Foundation
   - One horizontal grid: 540 / 720px containers on phones-landscape / tablets, then screen − 88px (960–1440px) from
     992px up; 12px inner padding everywhere, 16px gutters on phones. Full-bleed backgrounds and photos stay full width; their CONTENT starts on that grid.
   - One vertical rhythm: every main band uses the same top/bottom padding and the same head → content gap.
   - One heading system: eyebrow · H2 · lead, same sizes and weights on every light section (Projects keeps its dark,
     mint-accented version of the same system).
   - One control scale: 6px radius, Poppins 600 labels, 48px section CTAs (44px inside dense product cards).
   - Selected states: white raised surface + ink text + orange indicator (as Industries and Why Vahrk already do),
     not near-black fills and not more teal.
   ===================================================================================================================== */

html.vfi {
    --vfi-max: 100%;                 /* container max-width (Bootstrap) */
    --vfi-cw: calc(100vw - 32px);    /* content width inside the container */
    --vfi-edge: 16px;                /* left/right inset of content from the viewport (use on full-width blocks) */
    --vfi-sec-y: clamp(32px, 3.2vw + 18px, 64px);
    --vfi-head-gap: clamp(20px, 1.6vw + 8px, 32px);
    --vfi-h2: clamp(24px, 1.2vw + 18.5px, 36px);
    --vfi-ink: #17202a;
    --vfi-body: #4b5563;
    --vfi-muted: #56616b;
    --vfi-eyebrow: #4a5560;
    --vfi-line: #e1e5e9;
    --vfi-line-2: #cfd6dc;
    --vfi-surface: #f5f6f7;
    --vfi-teal: #006b7a;
    --vfi-teal-d: #00535f;
    --vfi-or: #ff8a3d;
    --vfi-r: 6px;
}
@media (min-width: 576px)  { html.vfi { --vfi-max: 540px;  --vfi-cw: 516px;  --vfi-edge: calc((100% - 540px) / 2 + 12px); } }
@media (min-width: 768px)  { html.vfi { --vfi-max: 720px;  --vfi-cw: 696px;  --vfi-edge: calc((100% - 720px) / 2 + 12px); } }
/* ≥992px: content area = screen − 88px (56px outer margin incl. the 12px inset), between 960 and 1440px.
   (Was Bootstrap's fixed 960 / 1140 / 1320px: 132px margins at 1199, 82px at 1280, 72px at 1440, 312px at 1920.) Percentages resolve
   against the full-width box each value is used in (container's parent, hero grid, header), so scrollbars can't skew it. */
@media (min-width: 992px)  { html.vfi { --vfi-max: clamp(960px, calc(100% - 88px), 1440px); --vfi-cw: calc(var(--vfi-max) - 24px); --vfi-edge: calc((100% - var(--vfi-max)) / 2 + 12px); } }
@media (min-width: 1200px) { html.vfi { --vfi-max: clamp(1140px, calc(100% - 88px), 1440px); } }   /* never narrower than Bootstrap's 1140 */


/* =====================================================================================================================
   1. HORIZONTAL GRID — every section's content starts and ends on the same lines
   ===================================================================================================================== */

/* Phones: one 16px gutter for every section (Bootstrap's default is 12px; About and Capabilities already used 16px). */
@media (max-width: 575.98px) {
    html.vfi main .container,
    html.vfi footer .container { --bs-gutter-x: 2rem; }
}
/* Laptops and up: the sections' Bootstrap containers follow the same (slightly wider) content area. */
@media (min-width: 992px) {
    html.vfi main .container,
    html.vfi footer .container { max-width: var(--vfi-max); }
}

/* Our Products used its own 1400px (1640px at ≥1600) wrapper, so it ran wider than every other section. */
html.vfi .vp1b .vp1b-wrap { max-width: var(--vfi-max); padding-inline: 12px; }
@media (max-width: 575.98px) { html.vfi .vp1b .vp1b-wrap { padding-inline: 16px; } }

/* Capabilities used its own wrapper with 24px padding below 992px (12px off the other sections on tablets). */
html.vfi .mtc1__wrap { max-width: var(--vfi-max); padding-inline: 12px; }
@media (max-width: 575.98px) { html.vfi .mtc1__wrap { padding-inline: 16px; } }


/* =====================================================================================================================
   2. HERO — keep the approved full-bleed tint + photo, but put the header, copy and proof strip on the page grid
   ===================================================================================================================== */

/* Header: logo and actions align with the content edges below instead of hugging the screen edges. */
html.vfi .hx.hx-wide .hx-wrap { padding-inline: var(--vfi-edge); }

@media (min-width: 992px) {
    /* Copy column = left half of the content width; the photo starts at the centre line and bleeds to the right edge. */
    html.vfi .hx.hx-wide { --vfi-hero-copy: .56; }
    html.vfi .hx.hx-wide .hx-b-grid {
        grid-template-columns: minmax(16px, 1fr) minmax(0, calc(var(--vfi-cw) * var(--vfi-hero-copy))) minmax(0, calc(var(--vfi-cw) * (1 - var(--vfi-hero-copy)))) minmax(16px, 1fr);
    }
    html.vfi .hx.hx-wide .hx-b-copy { grid-column: 2; padding-left: 0; padding-right: clamp(28px, 2.6vw, 48px); }
    /* First spec (panel core) is the longest value; give it the wider cell so it stays on one line. */
    html.vfi .hx.hx-wide .hx-ds { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.25fr) minmax(0, .75fr); }
    html.vfi .hx.hx-wide .hx-b-photo { grid-column: 3 / 5; }
    /* Copy block centred against the photo (it sat at the top with ~150px of empty tint under the form). */
    html.vfi .hx.hx-wide .hx-b-copy { align-self: center; padding-top: clamp(16px, 3svh, 36px); padding-bottom: clamp(16px, 3svh, 36px); }
    /* Proof strip: four equal cells on the content grid; the 2|3 divider meets the photo edge. */
    html.vfi .hx.hx-wide .hx-band-in { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: var(--vfi-edge); }
    html.vfi .hx.hx-wide .hx-band-in li:first-child { padding-left: 0; }
}
@media (min-width: 1200px) { html.vfi .hx.hx-wide { --vfi-hero-copy: .53; } }
@media (min-width: 1400px) { html.vfi .hx.hx-wide { --vfi-hero-copy: .5; } }

/* Tablets: copy and proof strip on the same 720px grid as the sections below. */
@media (min-width: 768px) and (max-width: 991.98px) {
    html.vfi .hx.hx-wide .hx-b-copy { padding-inline: var(--vfi-edge); }
    html.vfi .hx.hx-wide .hx-band-in { padding-inline: var(--vfi-edge); }
}
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
    html.vfi .hx.hx-wide .hx-b-grid { grid-template-columns: var(--vfi-edge) minmax(0, 1.1fr) minmax(0, .9fr) 0; }
    html.vfi .hx.hx-wide .hx-b-copy { padding-left: 0; }
}
/* Phones: the hero already uses 16–20px; lock it to the page's 16px gutter. */
@media (max-width: 575.98px) {
    html.vfi .hx, html.vfi .hc-quote { --v-pad: 16px; }
    html.vfi .hx.hx-wide { --w-gut: 16px; }
}
html.vfi .hx .hc-btn { border-radius: var(--vfi-r); }
/* Header: Explore More was a pill beside a 4px-corner WhatsApp button; both now use the page's 6px corner. */
html.vfi .hx .hx-hd-wa, html.vfi .hx .hx-hd-contact .xm-trigger, html.vfi .hx .hc-ib { border-radius: var(--vfi-r); }

/* =====================================================================================================================
   3. VERTICAL RHYTHM — one band padding (40px phone → 64px desktop) for every main section
   ===================================================================================================================== */
html.vfi #aboutus.vxa--o3,
html.vfi #productlist.vp1b,
html.vfi #industries.via,
html.vfi #capabilities.mtc1,
html.vfi #projects.vxp-projects,
html.vfi #whyus.wcv1,
html.vfi #how-we-work.hw2,
html.vfi #sectorlist.vcl { padding-top: var(--vfi-sec-y); padding-bottom: var(--vfi-sec-y); }

/* Light/grey alternation. Products and Industries were both #f3f6f7 and read as one long grey block, while Industries
   and Capabilities would then both be white; alternate instead. Dark Projects and the teal footer are unchanged. */
html.vfi #industries.via1 { background: #fff; }
html.vfi #capabilities.mtc1 { background: var(--vfi-surface); }


/* =====================================================================================================================
   4. SECTION HEADINGS — eyebrow · H2 · lead
   ===================================================================================================================== */
html.vfi .o3-eyebrow,
html.vfi .via-eyebrow,
html.vfi .mtc-eyebrow,
html.vfi .vxp-projects .vxp-eyebrow,
html.vfi .wcv-eyebrow,
html.vfi .hww-eyebrow,
html.vfi .vcl-eyebrow {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font: 600 12.5px/1.25 "Poppins", "Nunito", sans-serif; letter-spacing: .14em; text-transform: uppercase;
    color: var(--vfi-eyebrow);
}
html.vfi .o3-eyebrow::before,
html.vfi .via-eyebrow::before,
html.vfi .mtc-eyebrow::before,
html.vfi .vxp-projects .vxp-eyebrow::before,
html.vfi .wcv-eyebrow::before,
html.vfi .hww-eyebrow::before,
html.vfi .vcl-eyebrow::before {
    content: ""; flex: 0 0 24px; width: 24px; height: 3px; border-radius: 2px; background: var(--vfi-or);
}
/* Projects keeps its own dark-section accent (mint), on the same scale. */
html.vfi .vxp-projects .vxp-eyebrow { color: var(--vxp-mint, #77c9ab); }
html.vfi .vxp-projects .vxp-eyebrow::before { background: linear-gradient(90deg, var(--vxp-teal, #006b7a), var(--vxp-mint, #77c9ab)); }
@media (max-width: 575.98px) {
    html.vfi :is(.o3-eyebrow, .via-eyebrow, .mtc-eyebrow, .vxp-eyebrow, .wcv-eyebrow, .hww-eyebrow, .vcl-eyebrow) { font-size: 12px; letter-spacing: .1em; }
    html.vfi :is(.o3-eyebrow, .via-eyebrow, .mtc-eyebrow, .vxp-eyebrow, .wcv-eyebrow, .hww-eyebrow, .vcl-eyebrow)::before { flex-basis: 18px; width: 18px; }
}

html.vfi .vxa--o3 .o3-title,
html.vfi .vpc .vpc-title,
html.vfi .via .via-title,
html.vfi .mtc1 .mtc1__h,
html.vfi .vxp-projects .vxp-title,
html.vfi .wcv .wcv-h2,
html.vfi .hww .hww-title,
html.vfi .vcl .vcl-title {
    font-family: "Poppins", "Nunito", sans-serif; font-weight: 700; font-size: var(--vfi-h2);
    line-height: 1.15; letter-spacing: -.018em; text-wrap: balance; margin: 12px 0 0; padding: 0;
}
html.vfi :is(.vxa--o3 .o3-title, .vpc .vpc-title, .via .via-title, .mtc1 .mtc1__h, .wcv .wcv-h2, .hww .hww-title, .vcl .vcl-title) { color: var(--vfi-ink); }
html.vfi .vpc .vpc-title { margin-top: 0; }          /* Products has no eyebrow */

html.vfi .vxa--o3 .o3-intro,
html.vfi .vpc .vpc-sub,
html.vfi .via .via-lead,
html.vfi .mtc1 .mtc1__lead,
html.vfi .vxp-projects .vxp-lead,
html.vfi .wcv .wcv-lead,
html.vfi .hww .hww-lead,
html.vfi .vcl .vcl-lead {
    font-family: "Nunito", sans-serif; font-weight: 400; font-size: 16.5px; line-height: 1.6; max-width: 62ch; text-wrap: pretty;
}
html.vfi :is(.vpc .vpc-sub, .via .via-lead, .mtc1 .mtc1__lead, .wcv .wcv-lead, .hww .hww-lead, .vcl .vcl-lead) { color: var(--vfi-muted); }
html.vfi .vxa--o3 .o3-intro { color: var(--vfi-body); }
@media (max-width: 767.98px) {
    html.vfi :is(.o3-intro, .vpc-sub, .via-lead, .mtc1__lead, .vxp-lead, .wcv-lead, .hww-lead, .vcl-lead) { font-size: 15.5px; line-height: 1.55; }
}

/* Head blocks: the same gap to the content on every section. */
html.vfi .vpc .vpc-head,
html.vfi .via1-head,
html.vfi .mtc1__head,
html.vfi .vxp-projects .vxp-head,
html.vfi .wcv1__head,
html.vfi .hw2-head { margin-bottom: var(--vfi-head-gap); }

/* Two-column head (statement left, lead right, bottoms aligned): Industries, Why Vahrk, How We Work and now Products
   share one grid, so the lead column starts at the same x on all four. */
@media (min-width: 992px) {
    html.vfi .via1-head,
    html.vfi .wcv1__head,
    html.vfi .hw2-head,
    html.vfi .vpc .vpc-head {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); column-gap: 56px; row-gap: 10px;
        align-items: end; justify-content: stretch;
    }
    html.vfi :is(.via1-head .via-lead, .wcv1__head .wcv-lead, .hw2-head .hww-lead, .vpc-head .vpc-sub) { margin: 0; padding-bottom: 3px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* 936px content: a narrower lead column keeps every H2 on one line. */
    html.vfi :is(.via1-head, .wcv1__head, .hw2-head, .vpc .vpc-head) { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 40px; }
}
/* Products: left-aligned like every other section; the centred 48px title and gradient underline made it the only
   centred, oversized heading on the page. */
html.vfi .vpc .vpc-head { text-align: left; max-width: none; }
html.vfi .vpc .vpc-title::after { display: none; }
html.vfi .vpc .vpc-sub { margin: 10px 0 0; }
@media (max-width: 991.98px) {
    html.vfi :is(.via1-head .via-lead, .wcv1__head .wcv-lead, .hw2-head .hww-lead) { margin-top: 10px; }
}

/* Capabilities: eyebrow row, H2, lead stacked — just the shared spacing. */
html.vfi .mtc1 .mtc1__lead { margin-top: 10px; max-width: 76ch; }
/* Projects: lead under the H2. */
html.vfi .vxp-projects .vxp-lead { margin-top: 12px; }
/* About: H2 → intro spacing on the same scale. */
html.vfi .vxa--o3 .o3-title { margin-bottom: 14px; }


/* =====================================================================================================================
   5. OUR PRODUCTS — three columns on desktop (was four at ≥1600px inside a 1640px band)
   ===================================================================================================================== */
html.vfi .vp1b .vp1b-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; }
/* Below 1200px a third column drops cards to ~296px and breaks the key figures ("30–/180", "PUF /PIR"), so small
   laptops and tablets get two columns; phones one. */
@media (max-width: 1199.98px) { html.vfi .vp1b .vp1b-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px; } }
@media (max-width: 767.98px)  { html.vfi .vp1b .vp1b-list { grid-template-columns: minmax(0, 1fr); row-gap: 18px; } }
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* products.css narrows card insets for its 3-up layout here; at 2-up the cards have room for the normal ones. */
    html.vfi .vp1b .vp1b-head, html.vfi .vp1b .vp1b-role { padding-left: 22px; padding-right: 22px; }
    html.vfi .vp1b .vp1b-key, html.vfi .vp1b .vp1b-spec { margin-left: 22px; margin-right: 22px; }
    html.vfi .vp1b .vp1b-act { padding: 18px 22px 22px; }
    html.vfi .vp1b .vp1b-spec__row { grid-template-columns: 118px minmax(0, 1fr); }
}
/* Tablet 2-up: keep three key figures on one line each. */
@media (min-width: 768px) and (max-width: 991.98px) {
    html.vfi .vp1b .vp1b-key li { padding: 10px; }
    html.vfi .vp1b .vp1b-key strong { font-size: 16px; }
}
/* Card type: product name and role on the page scale; card radius matches the other cards on the page. */
html.vfi .vp1b .vp1b-sheet,
html.vfi .vp1b .vp1b-help { border-radius: 12px; }
html.vfi .vp1b .vp1b-name { font-size: 21px; }
html.vfi .vp1b .vp1b-role { font-size: 15.5px; }
html.vfi .vp1b .vp1b-spec dd { font-weight: 600; }


/* =====================================================================================================================
   6. CONTROLS — one button scale, one selected-state language, one focus ring
   ===================================================================================================================== */
html.vfi .vxa--o3 .o3-btn,
html.vfi .vpc .vpc-btn,
html.vfi .via-btn,
html.vfi .mtc .mtc-btn,
html.vfi .vxp-btn,
html.vfi .wcv-btn,
html.vfi .hww-btn,
html.vfi .vqf__btn {
    border-radius: var(--vfi-r); font-family: "Poppins", "Nunito", sans-serif; font-weight: 600; letter-spacing: .005em;
}
html.vfi .vxa--o3 .o3-btn,
html.vfi .via-btn,
html.vfi .mtc .mtc-btn,
html.vfi .vxp-btn,
html.vfi .wcv-btn,
html.vfi .hww-btn { min-height: 48px; font-size: 15px; }
html.vfi .vpc .vpc-btn { font-size: 14.5px; }
/* Flat primaries everywhere (two sections had a teal glow shadow, the rest were flat). */
html.vfi :is(.via-btn--primary, .vxp-btn--primary) { box-shadow: none; }

/* Capabilities: selected tier/topic was a near-black fill; use the page's selected language instead. */
html.vfi .mtc1__tiers { background: var(--vfi-surface); border-color: var(--vfi-line); }
html.vfi .mtc1__tier[aria-selected="true"] { background: #fff; box-shadow: inset 0 -2px 0 var(--vfi-or), 0 1px 2px rgba(23, 32, 42, .12), 0 0 0 1px var(--vfi-line-2); }
html.vfi .mtc1__tier[aria-selected="true"] .mtc1__tier-s { color: var(--vfi-ink); }
html.vfi .mtc1__tier:hover { background: rgba(255, 255, 255, .7); }
html.vfi .mtc1__topic[aria-selected="true"] { background: #fff; border-color: var(--vfi-ink); box-shadow: inset 3px 0 0 var(--vfi-or); }
html.vfi .mtc1__topic[aria-selected="true"] .mtc1__topic-t { color: var(--vfi-ink); }

/* Industries: the selected industry's icon tile was near-black; a quiet teal tint keeps the orange bar as the cue. */
html.vfi .via1-tab[aria-selected="true"] .via1-tab__ic,
html.vfi .via1-pick__ic { background: #e6f0f2; border-color: #c4dbe0; color: var(--vfi-teal); }

/* One keyboard focus ring across the page. */
html.vfi :is(.hx, main, footer) :is(a, button, [role="tab"], input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(0, 107, 122, .5); outline-offset: 2px;
}
html.vfi .vxp-projects :is(a, button, [role="tab"]):focus-visible,
html.vfi footer :is(a, button):focus-visible { outline-color: rgba(143, 214, 196, .9); }

/* =====================================================================================================================
   7. SMALL PHONES & FOOTER
   ===================================================================================================================== */
@media (max-width: 359.98px) {
    html.vfi { --vfi-h2: 22px; }
    html.vfi .mtc1__tab-m { font-size: 12px; letter-spacing: -.01em; }
}
@media (max-width: 575.98px) {
    html.vfi :is(.o3-intro, .vpc-sub, .via-lead, .mtc1__lead, .vxp-lead, .wcv-lead, .hww-lead, .vcl-lead) { line-height: 1.5; }
}
/* Footer: same top spacing as the section bands (style.css gave it 72px + a 16px row margin). */
html.vfi footer .footer-top { padding-top: var(--vfi-sec-y); }

/* ==========================================================================
   Production fixes (2026-10-09) — no visual change to the settled page.
   1. The site header is fixed from the first paint. js/products.js used to fix it only after the page
      had painted, which dropped the whole hero by the header height (CLS ≈0.06–0.08, a visible jump on
      phones). Header heights: 66px below 768, 84px from 768 (js still sets the exact value).
   2. Every section anchor clears the fixed header, as About Us already did (phones previously landed
      Products / Projects / How We Work headings under the header).
   ========================================================================== */
html.vfi { --header-h: 66px; }
@media (min-width: 768px) { html.vfi { --header-h: 84px; } }
html.vfi body { padding-top: var(--header-h); }
html.vfi main > section[id],
html.vfi footer#contact { scroll-margin-top: var(--header-h); }