/* =========================================================================
   360TechSys theme — design tokens
   Source of truth: design.md. Every colour and font in the site resolves
   through the tokens below, so a retheme is an edit to :root, not a sweep
   through 190 KB of CSS.

   Loaded FIRST, before default.css / my-styles.css, so those files can
   reference the tokens.
   ========================================================================= */

/* ---- Poppins, self-hosted (latin). 400/500/600/700 ---------------------- */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/poppins-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/poppins-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/poppins-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/poppins-700.woff2') format('woff2');
}

:root {
    /* ---- Type ---- */
    --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;

    /* ---- Brand ---- */
    --color-brand: #e84242;
    --color-brand-hot: #ff224d;
    --color-brand-hover: #ff1a44;
    --color-deep: #073447;
    --color-violet: #605be5;

    /* ---- Ink ---- */
    --color-ink: #333333;
    --color-ink-soft: #444444;
    --color-body: #666666;
    --color-body-soft: #7a7a7a;
    --color-muted: #9b9b9b;

    /* ---- Surfaces ---- */
    --color-surface: #ffffff;
    --color-surface-soft: #fcfcfc;
    --color-surface-alt: #f5f5f5;
    --color-line: #e8e8e8;
    --color-line-soft: #dbdbdb;

    /* ---- Signature gradient: red bleeding into deep teal ---- */
    --gradient-signature: linear-gradient(to bottom right, #e84242 0%, #073447 50%);

    /* ---- Derived: brand at alpha. Used where the old theme used tinted
            gold washes behind sections and carousels. ---- */
    --color-brand-08: rgba(232, 66, 66, 0.08);
    --color-brand-15: rgba(232, 66, 66, 0.15);
    --color-brand-30: rgba(232, 66, 66, 0.3);

    /* ---- Deep at alpha. Used to ground the bottom edge of hero/portfolio
            media. The old theme faded these to a warm gold glow; fading to the
            brand red instead put a muddy red band across the photography, so
            they fade to the deep teal — which is exactly the role design.md
            gives it (the hero gradient's far end). ---- */
    --color-deep-30: rgba(7, 52, 71, 0.32);
    --color-deep-00: rgba(7, 52, 71, 0);

    /* ---- On-deep: text sitting on --color-deep surfaces ---- */
    --color-on-deep: #ffffff;
    --color-on-deep-soft: rgba(255, 255, 255, 0.72);
    --color-on-deep-line: rgba(255, 255, 255, 0.16);

    /* ---- Shape ---- */
    --radius-pill: 25px;

    /* ---- Legacy aliases. The old theme's variable names are referenced in
            ~30 places across my-styles.css and the page-level <style> blocks;
            repointing them here retires the old palette without having to
            chase every call site. ---- */
    --primaryColor: var(--color-brand);
    --secondaryColor: var(--color-deep);
    --primaryBtnBgColor: var(--color-brand);
    --primaryBtnTextColor: #ffffff;
    --primaryBtnHoverBgColor: #ffffff;
    --primaryBtnHoverTextColor: var(--color-brand);
    --gradientOneColor: var(--color-brand);
    --gradientTwoColor: var(--color-brand-hover);
}

/* ---- Base typography (design.md) --------------------------------------- */
body {
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--color-body);
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
    color: var(--color-ink);
}

.section-title {
    font-weight: 600;
    color: var(--color-ink);
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem);
    line-height: 1.25;
}

/* the red second half of a section title */
.section-title em {
    font-style: normal;
    font-weight: 600;
    color: var(--color-brand);
}

.eyebrow {
    font-weight: 600;
    color: var(--color-brand-hot);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.container-boxed {
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* ---- Logo -------------------------------------------------------------
   One source of truth: assets/img/logo.svg, inlined into the header and the
   footer by includes/logo.php. Replace that file and both update. See the
   header of logo.php for why it is inlined rather than an <img>.

   The mark ships white-winged, because the header and footer are --color-deep.
   Sizing lives here now: logo.php strips the SVG's intrinsic width/height so
   each context can size it independently. */
.zf-brand svg {
    width: 182px;
    height: auto;
    display: block;
}

.ft-logo svg {
    width: 388px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Case-study pages are the exception: their header is LIGHT until it sticks,
   so the white half of the mark would vanish. Repaint it to ink there. The
   selectors key off the fill values in logo.svg — if you swap the logo, keep
   `white` / `#FFFFFF` on whatever is meant to be white on the dark chrome. */
.inner-case-study .wk_logo svg path[fill="white"],
.inner-case-study .wk_logo svg path[fill="#FFFFFF"],
.inner-case-study .wk_logo svg path[fill^="url(#paint1"],
.inner-case-study .wk_logo svg path[fill^="url(#paint3"] {
    fill: var(--color-deep);
}

/* ...and back to white once that header sticks, because the stuck header is
   deep teal like everywhere else. */
.inner-case-study header.stickedHeader .wk_logo svg path[fill="white"],
.inner-case-study header.stickedHeader .wk_logo svg path[fill="#FFFFFF"],
.inner-case-study header.stickedHeader .wk_logo svg path[fill^="url(#paint1"],
.inner-case-study header.stickedHeader .wk_logo svg path[fill^="url(#paint3"] {
    fill: #ffffff;
}

/* ---- Decorative backdrops ---------------------------------------------
   A handful of sections use painted artwork as a background image (the UAE
   cityscape, the portfolio banner, some CTA panels). They are baked gold and
   violet from the old theme, so no colour token can reach them — and several
   are set inline, per page, so the URL isn't knowable from here.

   Each one is re-hued on a ::before that inherits its parent's background
   verbatim and rotates the hue: gold -> red, violet -> teal. The filtered copy
   paints over the original and covers it. Real content is lifted to z-index 1
   so only the artwork is affected, never the text on top of it.
   White and grey have no hue, so the untinted parts of these images survive
   the rotation unchanged. */
section.cta-contact,
section.hero.wk_portfolio,
section.wk_cta_sec2,
section.fb_cta2 {
    position: relative;
    isolation: isolate;
}

section.cta-contact::before,
section.hero.wk_portfolio::before,
section.wk_cta_sec2::before,
section.fb_cta2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: inherit;
    pointer-events: none;
}

section.cta-contact > *,
section.hero.wk_portfolio > *,
section.wk_cta_sec2 > *,
section.fb_cta2 > * {
    position: relative;
    z-index: 1;
}

/* gold -> brand red */
section.cta-contact::before {
    filter: hue-rotate(-48deg) saturate(0.92);
}

/* violet -> deep teal */
section.hero.wk_portfolio::before,
section.wk_cta_sec2::before,
section.fb_cta2::before {
    filter: hue-rotate(-72deg) saturate(0.8);
}

/* the digital-marketing CTA reuses .cta-contact but its artwork is violet,
   not gold — so it needs the teal rotation, not the red one */
section.cta-contact.wk_cta_sec::before {
    filter: hue-rotate(-72deg) saturate(0.8);
}

/* Cream washes. A dozen CTA panels sit on flat beige artwork (contact-cta-bg,
   ready-transform-bg, the per-service CTA backdrops). Rotating their hue would
   only trade beige for pink; design.md's surfaces are neutral — #ffffff,
   #fcfcfc, #f5f5f5 — so the warm cast is simply desaturated out, leaving the
   texture and the near-white surface the design system actually asks for. */
section.cta-contact-2,
section.wk_cta3_sec,
section.logo_cta,
section.ad_cta3,
.uk_cta_contact {
    position: relative;
    isolation: isolate;
}

section.cta-contact-2::before,
section.wk_cta3_sec::before,
section.logo_cta::before,
section.ad_cta3::before,
.uk_cta_contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: inherit;
    pointer-events: none;
    filter: saturate(0) brightness(1.03);
}

section.cta-contact-2 > *,
section.wk_cta3_sec > *,
section.logo_cta > *,
section.ad_cta3 > *,
.uk_cta_contact > * {
    position: relative;
    z-index: 1;
}

/* ---- Focus. A deliberate accessibility addition; the Elementor original
        had none. ---------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--color-brand-hot);
    outline-offset: 3px;
}

/* ---- Scroll ------------------------------------------------------------ */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

/* Lenis's required stylesheet. The case-study pages load Lenis's JS from unpkg
 * but never loaded its CSS, and that combination is what made those pages feel
 * stuck: Lenis scrolls by calling window.scrollTo() on every frame, and the
 * `scroll-behavior: smooth` above made the browser apply its OWN smooth
 * animation to each of those calls. Two smooth-scrollers stacked, so the page
 * crawled - 7500px of wheel input moved the page 1179px.
 *
 * Lenis adds `.lenis.lenis-smooth` to <html> only while it is actually driving
 * the scroll, so this is scoped to that: pages without Lenis keep the native
 * smooth scrolling above for their anchor links.
 *
 * Do NOT "tidy" this by deleting scroll-behavior: smooth instead - that would
 * take smooth anchor scrolling away from the other 9 pages. */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* ---- Filter tabs ------------------------------------------------------- */
/* Shared by portfolio.php (.cases .tab) and the case-study pages
 * (.cases_lk .tab). These rules used to sit in casestudies/…/wkstyle.css@v2.css,
 * which only head-casestudy.php loads - so on portfolio.php the identical markup
 * fell back to unstyled default buttons. They live here because theme.css is the
 * one sheet BOTH head includes pull in.
 *
 * The font was `DM Sans`, a leftover from before the Poppins retheme: that family
 * is no longer loaded, so these were silently rendering in system-ui. Inherit the
 * body font instead of naming one. */
.tab {
    height: 40px;
    min-width: 125px;
    padding: 0 18px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--color-line);
    background: #fff;
    color: var(--color-ink);
    font-weight: 600;
    font-size: 14px;
    line-height: 40px;
    transition: .5s;
}

.tab:hover,
.tab.is-active {
    background: radial-gradient(125.34% 134.49% at 46.22% 80.47%, var(--color-brand) 0%, var(--color-brand-hover) 52%, var(--color-brand) 100%), rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.tab.is-active {
    color: var(--color-ink);
    font-weight: 800;
}

/* The panels the tabs switch between. This was the other half of the same bug:
 * it also lived only in the case-study sheet, so on portfolio.php NO panel was
 * ever hidden - all six rendered stacked down the page, which is why the entire
 * portfolio appeared without anyone touching Load More.
 * Only portfolio.php, casestudies/index.php and klensa.php use .panel, and each
 * has exactly one .is-active, so this is safe to apply globally. */
.panel {
    display: none;
}

.panel.is-active {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }
}