@charset "UTF-8";
/*==============================================================================
  Skyper — Modern UI Layer
  ------------------------------------------------------------------------------
  A presentation-only design system that loads AFTER `main-LTR.css` and refines
  the vendor template into a premium corporate look. It never changes markup
  semantics, routes or data — only how the existing classes render.

  Contents
    01. Design tokens
    02. Base & typography
    03. Layout & section rhythm
    04. Section headings
    05. Buttons & links
    06. Cards, boxes & surfaces
    07. Forms
    08. Badges, chips & alerts
    09. Breadcrumbs & pagination
    10. Accordion, tabs, tables, modals
    11. Header / navigation
    12. Hero & inner page hero
    13. Blog / news
    14. Careers
    15. Footer
    16. Motion & reveal
    17. Media
    18. Utilities, a11y & print
==============================================================================*/

/*------------------------------------------------------------------------------
  01. Design tokens
------------------------------------------------------------------------------*/
:root {
    /*
     | BRAND
     |
     | Sampled from the logo: 86% of its non-white pixels are a single navy,
     | #002F68 = HSL(213, 100%, 20%). The rest of the artwork is anti-aliasing
     | of that one colour, so the mark is effectively monochrome.
     |
     | There is therefore no second brand colour to extract. The scale below is
     | derived from the logo's own hue (213) rather than invented, which keeps
     | every tint and shade demonstrably "on brand". 700 is pinned to the exact
     | logo value; lighter steps carry highlights, darker steps carry surfaces.
     |
     | Contrast against white, measured: 500 = 7.3:1, 600 = 10.4:1,
     | 700 = 13.1:1 — all clear of WCAG AA for body text.
     */
    --sk-brand-50:  #edf3fa;
    --sk-brand-100: #d7e4f4;
    --sk-brand-200: #b7cae1;
    --sk-brand-300: #84a5cd;   /* legible on dark navy surfaces */
    --sk-brand-400: #1775e8;   /* graphics only — 4.4:1, under AA for text */
    --sk-brand-500: #1155a7;   /* links & icon accents  7.3:1 */
    --sk-brand-600: #0c3f7d;   /* hover for solid brand fills */
    --sk-brand-700: #002f68;   /* the logo colour */
    --sk-brand-800: #072448;
    --sk-brand-900: #05172e;

    --sk-brand: var(--sk-brand-700);

    /* Vendor tokens. main-LTR.css resolves these everywhere, so overriding
       them here re-themes the whole template without touching that file. */
    --clr-main: #002f68;
    --clr-main-rgb: 0, 47, 104;
    --clr-accent: #072448;
    --clr-accent-rgb: 7, 36, 72;
    --clr-secondary: #1155a7;
    --clr-secondary-rgb: 17, 85, 167;
    --clr-dark-blue: #05172e;
    --clr-dark-blue-rgb: 5, 23, 46;
    --clr-semi-dark-blue: #072448;
    --clr-semi-dark-blue-rgb: 7, 36, 72;

    --sk-ink: #002f68;
    --sk-ink-700: #0c3f7d;
    --sk-ink-soft: #1155a7;

    /*
     | Neutral ramp — the backbone of the whole UI. Cooled a few degrees
     | toward the brand hue so greys sit beside the navy without looking
     | muddy or green next to it.
     */
    --sk-0: #ffffff;
    --sk-25: #fbfcfd;
    --sk-50: #f5f7fa;
    --sk-100: #edf1f6;
    --sk-200: #dfe5ee;
    --sk-300: #c6d0de;
    --sk-400: #8e9cb4;
    --sk-500: #5f6d87;
    --sk-600: #45516a;
    --sk-700: #313c52;
    --sk-800: #1d2637;
    --sk-900: #0e1626;

    /* Semantic */
    --sk-success: #0f7a43;
    --sk-success-bg: #e7f6ee;
    --sk-warning: #92610a;
    --sk-warning-bg: #fdf3e0;
    --sk-danger: #b42318;
    --sk-danger-bg: #fdeceb;
    --sk-info: #075985;
    --sk-info-bg: #e8f4fb;

    /* Text roles — measured on white: text 15.5:1, muted 6.2:1. */
    --sk-text: #16203a;
    --sk-text-muted: #55617d;
    --sk-text-invert: #ffffff;
    --sk-border: #e1e7f0;
    --sk-border-strong: #c9d3e1;
    --sk-surface: #ffffff;
    --sk-surface-alt: var(--sk-50);

    /* Footer / dark-surface roles, so those tones are named rather than
       re-derived with one-off rgba() values at each call site. */
    --sk-on-dark: rgba(255, 255, 255, .74);
    --sk-on-dark-strong: #ffffff;
    --sk-on-dark-muted: rgba(255, 255, 255, .56);
    --sk-on-dark-border: rgba(255, 255, 255, .13);
    --sk-on-dark-surface: rgba(255, 255, 255, .06);

    /* Radii */
    --sk-r-xs: 6px;
    --sk-r-sm: 10px;
    --sk-r-md: 14px;
    --sk-r-lg: 20px;
    --sk-r-xl: 28px;
    --sk-r-pill: 999px;

    /* Elevation — soft, layered, never muddy. */
    --sk-shadow-xs: 0 1px 2px rgba(0, 47, 104, .06);
    --sk-shadow-sm: 0 2px 8px rgba(0, 47, 104, .06), 0 1px 2px rgba(0, 47, 104, .04);
    --sk-shadow-md: 0 8px 24px rgba(0, 47, 104, .08), 0 2px 6px rgba(0, 47, 104, .04);
    --sk-shadow-lg: 0 18px 48px rgba(0, 47, 104, .12), 0 4px 12px rgba(0, 47, 104, .06);
    --sk-shadow-brand: 0 10px 28px rgba(var(--clr-main-rgb), .28);
    --sk-ring: 0 0 0 4px rgba(var(--clr-main-rgb), .18);

    /*
     | TYPE SCALE
     |
     | A single fluid ramp on a ~1.2 modular scale. Every heading, label and
     | caption on the site resolves to one of these, so sizes cannot drift
     | apart page by page. Each step is clamped so it stays readable on a
     | 320px phone and stops growing on ultrawide.
     |
     | h5/h6, the nav and buttons were previously set with one-off values;
     | they are named here so there is one place to change them.
     */
    --sk-fs-display: clamp(2.35rem, 1.45rem + 3.1vw, 4rem);
    --sk-fs-h1: clamp(1.95rem, 1.35rem + 2.2vw, 3rem);
    --sk-fs-h2: clamp(1.6rem, 1.22rem + 1.5vw, 2.35rem);
    --sk-fs-h3: clamp(1.28rem, 1.12rem + .7vw, 1.65rem);
    --sk-fs-h4: clamp(1.12rem, 1.04rem + .35vw, 1.3rem);
    --sk-fs-h5: 1.0625rem;
    --sk-fs-h6: .9375rem;
    --sk-fs-lead: clamp(1.02rem, .98rem + .28vw, 1.15rem);
    --sk-fs-body: 1rem;
    --sk-fs-sm: .9125rem;
    --sk-fs-xs: .8125rem;
    --sk-fs-nav: .875rem;
    --sk-fs-btn: .9375rem;
    --sk-fs-label: .875rem;

    /* Line heights, paired to the roles above. */
    --sk-lh-tight: 1.16;
    --sk-lh-heading: 1.28;
    --sk-lh-body: 1.7;

    /*
     | SPACING RHYTHM
     |
     | Section padding and the gap under a section heading are both fluid so
     | vertical rhythm scales with the viewport instead of leaving phones
     | cramped and desktops airy.
     */
    --sk-space-section: clamp(3.5rem, 2.2rem + 4.4vw, 6.5rem);
    --sk-space-block: clamp(1.85rem, 1.4rem + 1.8vw, 3rem);
    --sk-space-card: clamp(1.25rem, 1rem + .8vw, 1.75rem);
    --sk-gutter: clamp(1rem, .7rem + 1vw, 1.5rem);

    /* Motion */
    --sk-ease: cubic-bezier(.22, .61, .36, 1);
    --sk-ease-out: cubic-bezier(.16, 1, .3, 1);
    --sk-dur: .32s;
    /*
     | Two separate variables, deliberately.
     |
     | --sk-header-h      Static design token. Drives the header's OWN sizing
     |                    (nav min-height, link line-height). Never written by
     |                    JS: measuring the header and feeding the result back
     |                    into its own height is an infinite growth loop.
     |
     | --sk-header-offset The header's measured height, published by
     |                    skyper-theme.js. Only ever consumed OUTSIDE the
     |                    header (scroll padding, hero top padding, sticky
     |                    offsets), so there is no feedback path.
     */
    --sk-header-h: 84px;
    --sk-header-offset: 84px;
}

@media (max-width: 1199px) {
    :root {
        /* Matches the vendor's mobile navbar height. */
        --sk-header-h: 90px;
        --sk-header-offset: 90px;
    }
}

/*------------------------------------------------------------------------------
  02. Base & typography
------------------------------------------------------------------------------*/
html {
    scroll-behavior: smooth;
    /* Anchor targets clear the fixed header. */
    scroll-padding-top: calc(var(--sk-header-offset) + 16px);
    -webkit-text-size-adjust: 100%;
}

body.light-theme {
    color: var(--sk-text);
    background: var(--sk-surface);
    font-size: var(--sk-fs-body);
    line-height: var(--sk-lh-body);
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*
 | Headings all resolve to the shared scale. Weight steps down as size steps
 | down (800 → 650) so the hierarchy stays legible without relying on size
 | alone, and tracking tightens as size grows.
 */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6 {
    color: var(--sk-ink);
    font-weight: 700;
    line-height: var(--sk-lh-heading);
    letter-spacing: -.018em;
    margin-bottom: .55em;
    text-wrap: balance;
}

body.light-theme h1 { font-size: var(--sk-fs-h1); font-weight: 800; line-height: var(--sk-lh-tight); letter-spacing: -.028em; }
body.light-theme h2 { font-size: var(--sk-fs-h2); font-weight: 750; letter-spacing: -.024em; }
body.light-theme h3 { font-size: var(--sk-fs-h3); font-weight: 700; }
body.light-theme h4 { font-size: var(--sk-fs-h4); font-weight: 650; }
body.light-theme h5 { font-size: var(--sk-fs-h5); font-weight: 650; letter-spacing: -.012em; }
body.light-theme h6 { font-size: var(--sk-fs-h6); font-weight: 650; letter-spacing: -.008em; }

/* Bootstrap's .h1–.h6 helpers must track the same scale, or a heading styled
   with a utility class drifts away from a real heading tag. */
body.light-theme .h1 { font-size: var(--sk-fs-h1); }
body.light-theme .h2 { font-size: var(--sk-fs-h2); }
body.light-theme .h3 { font-size: var(--sk-fs-h3); }
body.light-theme .h4 { font-size: var(--sk-fs-h4); }
body.light-theme .h5 { font-size: var(--sk-fs-h5); }
body.light-theme .h6 { font-size: var(--sk-fs-h6); }

body.light-theme p {
    color: var(--sk-text-muted);
    margin-bottom: 1.1rem;
    text-wrap: pretty;
}

body.light-theme p:last-child { margin-bottom: 0; }

.lead,
.sec-heading .subtitle,
.hero-text-area .slide-subtitle {
    font-size: var(--sk-fs-lead);
    line-height: 1.62;
}

small, .small { font-size: var(--sk-fs-sm); }

/* Long-form rich text coming out of the CMS. */
.content-body,
.post-content {
    font-size: 1.0375rem;
    line-height: 1.78;
    color: var(--sk-text-muted);
}

.content-body > :first-child,
.post-content > :first-child { margin-top: 0; }

.content-body h2, .post-content h2,
.content-body h3, .post-content h3,
.content-body h4, .post-content h4 {
    margin-top: 2em;
    margin-bottom: .65em;
    color: var(--sk-ink);
}

.content-body ul, .post-content ul,
.content-body ol, .post-content ol {
    padding-left: 1.25rem;
    margin-bottom: 1.25rem;
}

.content-body li, .post-content li { margin-bottom: .5rem; }

.content-body ul, .post-content ul { list-style: none; padding-left: 0; }

.content-body ul > li, .post-content ul > li {
    position: relative;
    padding-left: 1.65rem;
}

.content-body ul > li::before,
.post-content ul > li::before {
    content: "";
    position: absolute;
    left: .25rem;
    top: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--clr-main);
}

.content-body a, .post-content a {
    color: var(--sk-brand-700);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(var(--clr-main-rgb), .4);
    transition: color var(--sk-dur) var(--sk-ease);
}

.content-body a:hover, .post-content a:hover {
    color: var(--sk-brand-600);
    text-decoration-color: currentColor;
}

.content-body blockquote, .post-content blockquote {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--clr-main);
    background: var(--sk-brand-50);
    border-radius: 0 var(--sk-r-sm) var(--sk-r-sm) 0;
    color: var(--sk-ink);
    font-size: 1.075rem;
    font-style: normal;
}

.content-body img, .post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sk-r-md);
}

.content-body table, .post-content table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: separate;
    border-spacing: 0;
}

/* Consistent, visible focus for keyboard users everywhere. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--clr-main);
    outline-offset: 2px;
    border-radius: var(--sk-r-xs);
}

::selection {
    background: rgba(var(--clr-main-rgb), .18);
    color: var(--sk-ink);
}

/* Slim, unobtrusive scrollbar. */
@media (min-width: 992px) {
    * { scrollbar-width: thin; scrollbar-color: var(--sk-300) transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-thumb {
        background: var(--sk-300);
        border: 3px solid #fff;
        border-radius: var(--sk-r-pill);
    }
    *::-webkit-scrollbar-thumb:hover { background: var(--sk-400); }
}

/*------------------------------------------------------------------------------
  03. Layout & section rhythm
------------------------------------------------------------------------------*/
.mega-section {
    padding-top: var(--sk-space-section);
    padding-bottom: var(--sk-space-section);
}

/* Alternating tone so long pages read as distinct bands. */
.mega-section.sk-tinted,
.mega-section.bg-grey,
section.our-clients.mega-section {
    background: var(--sk-surface-alt);
}

@media (min-width: 1400px) {
    .container { max-width: 1240px; }
}

.content-block { max-width: 78ch; }
.content-block.content-block--wide { max-width: none; }

/* Empty CMS blocks shouldn't collapse a section into a sliver. */
.content-block:empty { min-height: 2rem; }

/*------------------------------------------------------------------------------
  04. Section headings
------------------------------------------------------------------------------*/
.sec-heading { margin-bottom: var(--sk-space-block); }

.sec-heading .pre-title {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--sk-brand-700);
    padding: .35rem 0 .35rem 1.15rem;
    margin-bottom: .9rem;
}

.sec-heading .pre-title::after { content: none; }

.sec-heading .pre-title::before {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 4px rgba(var(--clr-main-rgb), .16);
}

.sec-heading .title {
    font-size: var(--sk-fs-h2);
    font-weight: 750;
    letter-spacing: -.025em;
    line-height: 1.14;
    margin-bottom: .5rem;
}

.sec-heading .subtitle {
    color: var(--sk-text-muted);
    max-width: 62ch;
    margin-bottom: 0;
}

.sec-heading.centered .subtitle { margin-inline: auto; }

.sec-heading .bottom-line {
    height: 4px;
    width: 3.5rem;
    background: linear-gradient(90deg, var(--clr-main), var(--sk-brand-700));
}

/* The template's outlined "hollow" word — softened so it supports, not shouts. */
.hollow-text {
    -webkit-text-stroke: 1px rgba(var(--clr-accent-rgb), .35);
    color: transparent;
}

.has-dark-bg .hollow-text,
.content-always-light .hollow-text {
    -webkit-text-stroke-color: rgba(255, 255, 255, .55);
}

.featured-text { color: var(--clr-main); }

/*------------------------------------------------------------------------------
  05. Buttons & links
------------------------------------------------------------------------------*/
.btn-solid,
.btn-outline,
.cta-btn,
.btn.btn-solid,
a.btn-solid,
button.btn-solid {
    --sk-btn-py: .8rem;
    --sk-btn-px: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    position: relative;
    overflow: hidden;
    padding: var(--sk-btn-py) var(--sk-btn-px);
    border-radius: var(--sk-r-pill);
    font-size: var(--sk-fs-btn);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.25;
    text-transform: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    isolation: isolate;
    transition:
        background-color var(--sk-dur) var(--sk-ease),
        color var(--sk-dur) var(--sk-ease),
        border-color var(--sk-dur) var(--sk-ease),
        box-shadow var(--sk-dur) var(--sk-ease),
        transform var(--sk-dur) var(--sk-ease);
}

.btn-solid,
a.btn-solid,
button.btn-solid,
.cta-btn.btn-solid {
    background: var(--clr-main);
    border-color: var(--clr-main);
    color: #fff;
    box-shadow: var(--sk-shadow-brand);
}

.btn-solid:hover,
a.btn-solid:hover,
button.btn-solid:hover {
    background: var(--sk-brand-600);
    border-color: var(--sk-brand-600);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(var(--clr-main-rgb), .34);
}

.btn-solid:active,
button.btn-solid:active { transform: translateY(0); }

.btn-outline,
a.btn-outline {
    background: transparent;
    border-color: currentColor;
    color: var(--sk-ink);
}

.btn-outline:hover,
a.btn-outline:hover {
    background: var(--sk-ink);
    border-color: var(--sk-ink);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow-md);
}

.content-always-light .btn-outline,
.has-dark-bg .btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}

.content-always-light .btn-outline:hover,
.has-dark-bg .btn-outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--sk-ink);
}

.btn-small.btn-solid, .btn-small.btn-outline { --sk-btn-py: .55rem; --sk-btn-px: 1.15rem; font-size: .875rem; }
.btn-medium.btn-solid, .btn-medium.btn-outline { --sk-btn-py: .7rem; --sk-btn-px: 1.4rem; }

.btn-solid .icon,
.btn-outline .icon,
.cta-btn .icon {
    transition: transform var(--sk-dur) var(--sk-ease);
}

.btn-solid:hover .icon,
.btn-outline:hover .icon,
.cta-btn:hover .icon { transform: translateX(3px); }

/* Subtle sheen sweep on primary actions. */
.btn-solid::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .7s var(--sk-ease-out);
}

.btn-solid:hover::after { transform: translateX(120%); }

/* Bootstrap buttons used by the dynamic modules — aligned to the same language. */
.btn-light {
    background: var(--sk-100);
    border-color: var(--sk-200);
    color: var(--sk-700);
    border-radius: var(--sk-r-pill);
    padding: .75rem 1.35rem;
    font-weight: 600;
}

.btn-light:hover { background: var(--sk-200); color: var(--sk-900); }

.read-more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9125rem;
    font-weight: 600;
    color: var(--sk-brand-700);
    text-transform: capitalize;
    transition: gap var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease);
}

.read-more:hover { color: var(--sk-brand-600); gap: .8rem; }
.read-more .icon { transition: none; }

/* Play button on the hero video link. */
.play-btn {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: #fff;
    transition: transform var(--sk-dur) var(--sk-ease), background-color var(--sk-dur) var(--sk-ease);
}

.play-btn:hover { transform: scale(1.08); background: rgba(255, 255, 255, .26); }

/*------------------------------------------------------------------------------
  06. Cards, boxes & surfaces
------------------------------------------------------------------------------*/
.card,
.box,
.sk-card {
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-lg);
    box-shadow: var(--sk-shadow-sm);
    transition:
        transform var(--sk-dur) var(--sk-ease),
        box-shadow var(--sk-dur) var(--sk-ease),
        border-color var(--sk-dur) var(--sk-ease);
}

.card { overflow: hidden; }

.card.shadow-sm { box-shadow: var(--sk-shadow-sm) !important; }

.card:hover,
.sk-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sk-shadow-lg);
    border-color: var(--sk-border-strong);
}

.card-body { padding: var(--sk-space-card); }

/* Service boxes on the homepage and service landing pages. */
.service-box {
    position: relative;
    height: 100%;
    padding: 2.15rem 1.6rem;
    text-align: left;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-lg);
    box-shadow: var(--sk-shadow-xs);
    overflow: hidden;
    /* .box already animates transform/shadow/border; the fill colour is added
       here so the hover inversion below eases in rather than snapping. */
    transition:
        background-color var(--sk-dur) var(--sk-ease),
        border-color var(--sk-dur) var(--sk-ease),
        transform var(--sk-dur) var(--sk-ease),
        box-shadow var(--sk-dur) var(--sk-ease);
}

.service-box::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-main), var(--sk-brand-700));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--sk-ease-out);
}

/*
 | HOVER BACKGROUND
 |
 | Inside `.services-boxed` the vendor sheet already owns the hover fill: a
 | `::before` that scales across the card in `--clr-main`. Setting an opaque
 | `background` here painted the card that same colour instantly, leaving the
 | wipe nothing to reveal — so the animation was lost. The fill is therefore
 | left to that rule, and only lift and shadow are applied.
 */
.service-box:hover,
.service-box:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--sk-shadow-lg);
    border-color: rgba(var(--clr-main-rgb), .35);
}

.service-box:hover::before,
.service-box:focus-within::before { transform: scaleX(1); }

.service-box .service-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 1.35rem;
    border-radius: var(--sk-r-md);
    background: var(--sk-brand-50);
    color: var(--clr-main);
    transition: background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease);
}

/*
 | HOVER: white tile, brand-coloured glyph.
 |
 | The colour has to be set on the glyph itself, not just inherited from the
 | tile. The vendor sheet paints it directly with
 |   .services-boxed .service-box.reveal-start:hover .font-icon { color: #fff }
 | which is (0,5,0); a colour inherited from the parent div carries no
 | specificity at all and always loses, so the glyph went white on a white
 | tile and disappeared. The selectors below reach the glyph at (0,6,0).
 */
.service-box:hover .service-icon,
.service-box:focus-within .service-icon {
    background: #fff;
    color: var(--clr-main);
    /* Keeps the tile readable on cards that do not darken on hover. */
    box-shadow: inset 0 0 0 1px var(--sk-border);
}

.service-box:hover .service-icon .font-icon,
.service-box:hover .service-icon > i,
.service-box:focus-within .service-icon .font-icon,
.service-box:focus-within .service-icon > i {
    color: var(--clr-main);
}

/* Cards that fill on hover need no ring — the white tile already stands out. */
.services-boxed .service-box[class*="reveal-"]:hover .service-icon,
.services-boxed .service-box[class*="reveal-"]:focus-within .service-icon {
    background: #fff;
    color: var(--clr-main);
    box-shadow: none;
}

.services-boxed .service-box[class*="reveal-"]:hover .service-icon .font-icon,
.services-boxed .service-box[class*="reveal-"]:hover .service-icon > i,
.services-boxed .service-box[class*="reveal-"]:focus-within .service-icon .font-icon,
.services-boxed .service-box[class*="reveal-"]:focus-within .service-icon > i {
    color: var(--clr-main);
}

.service-box .service-icon .font-icon { font-size: 1.75rem; line-height: 1; }

.service-box .service-num {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1;
    opacity: .45;
    pointer-events: none;
}

.service-box .service-title {
    font-size: var(--sk-fs-h5);
    font-weight: 650;
    line-height: 1.35;
    margin-bottom: .55rem;
    transition: color var(--sk-dur) var(--sk-ease);
}

.service-box .service-text {
    font-size: var(--sk-fs-sm);
    margin-bottom: 1rem;
    transition: color var(--sk-dur) var(--sk-ease);
}

.service-box .read-more {
    margin-top: .35rem;
    transition: color var(--sk-dur) var(--sk-ease), gap var(--sk-dur) var(--sk-ease);
}

/*
 | Inside `.services-boxed` the vendor wipe fills the card, so the copy goes
 | white to sit on it. `.read-more`
 | is listed explicitly, and again for its own :hover, because the link's own
 | hover colour would otherwise win while the pointer is on it.
 */
.services-boxed .service-box[class*="reveal-"]:hover .service-content,
.services-boxed .service-box[class*="reveal-"]:hover .service-title,
.services-boxed .service-box[class*="reveal-"]:hover .service-text,
.services-boxed .service-box[class*="reveal-"]:hover .read-more,
.services-boxed .service-box[class*="reveal-"]:hover .read-more:hover,
.services-boxed .service-box[class*="reveal-"]:hover .read-more .icon,
.services-boxed .service-box[class*="reveal-"]:focus-within .service-content,
.services-boxed .service-box[class*="reveal-"]:focus-within .service-title,
.services-boxed .service-box[class*="reveal-"]:focus-within .service-text,
.services-boxed .service-box[class*="reveal-"]:focus-within .read-more,
.services-boxed .service-box[class*="reveal-"]:focus-within .read-more .icon {
    color: #fff;
}

/* Outlined sequence number: restroke in white, or it vanishes on the fill. */
.services-boxed .service-box[class*="reveal-"]:hover .service-num,
.services-boxed .service-box[class*="reveal-"]:focus-within .service-num {
    color: #fff;
    opacity: .28;
}

.services-boxed .service-box[class*="reveal-"]:hover .service-num.hollow-text,
.services-boxed .service-box[class*="reveal-"]:focus-within .service-num.hollow-text {
    color: transparent;
    -webkit-text-stroke-color: rgba(255, 255, 255, .55);
    opacity: 1;
}

/* Light-surface cards keep the original title tint on hover. */
.service-box:hover .service-title,
.service-box:focus-within .service-title { color: var(--sk-brand-700); }

.services-boxed .service-box[class*="reveal-"]:hover .service-title,
.services-boxed .service-box[class*="reveal-"]:focus-within .service-title { color: #fff; }

/*
 | Dark brand band (statistics, CTA strips).
 |
 | Replaces per-element inline colours. On this surface the brand navy is
 | invisible against itself, so accents come from the light end of the ramp.
 */
.sk-band-dark {
    background: var(--sk-brand-900);
    color: var(--sk-on-dark);
}

.sk-band-dark .stat-icon {
    font-size: 2.25rem;
    line-height: 1;
    color: var(--sk-brand-300);
}

.sk-band-dark .stat-num {
    color: var(--sk-on-dark-strong);
}

.sk-band-dark .stat-desc {
    color: var(--sk-on-dark);
    font-size: var(--sk-fs-sm);
}

/* Closing call-to-action strip. */
.sk-cta-band {
    background: linear-gradient(135deg, var(--sk-brand-900) 0%, var(--sk-brand-700) 55%, var(--sk-brand-600) 100%);
    color: var(--sk-on-dark);
}

.sk-cta-band h2,
.sk-cta-band .h2,
.sk-cta-band .h3 { color: var(--sk-on-dark-strong); }

.sk-cta-band .sk-cta-lead {
    color: var(--sk-on-dark);
    max-width: 60ch;
}

/* A white button reads as the primary action against the navy field; the
   brand-navy fill would disappear into it. */
.sk-cta-band .btn-solid {
    background: #fff;
    border-color: #fff;
    color: var(--sk-brand-700);
    box-shadow: 0 10px 28px rgba(5, 23, 46, .35);
}

.sk-cta-band .btn-solid:hover {
    background: var(--sk-brand-50);
    border-color: var(--sk-brand-50);
    color: var(--sk-brand-800);
}

.sk-cta-band .btn-solid::after { display: none; }

/* Statistics / counters */
.stats .stat-box,
.stats .counter-box {
    padding: 1.75rem 1.25rem;
    border-radius: var(--sk-r-lg);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.stats .counter,
.stats .stat-num {
    font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}

/* Client / partner logos */
.our-clients .client-logo,
.our-clients .brand-img,
.our-clients img {
    filter: grayscale(1);
    opacity: .6;
    transition: filter var(--sk-dur) var(--sk-ease), opacity var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease);
}

.our-clients .client-logo:hover,
.our-clients .brand-img:hover,
.our-clients img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.04);
}

/* Testimonials */
.testimonial-box,
.testimonial-card {
    padding: 2rem;
    border-radius: var(--sk-r-lg);
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    box-shadow: var(--sk-shadow-sm);
}

/*------------------------------------------------------------------------------
  07. Forms
------------------------------------------------------------------------------*/
.form-label,
label.form-label {
    display: block;
    margin-bottom: .45rem;
    font-size: var(--sk-fs-label);
    font-weight: 600;
    color: var(--sk-ink);
    letter-spacing: -.005em;
}

.form-control,
.form-select,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="url"].form-control,
input[type="tel"].form-control,
input[type="file"].form-control,
textarea.form-control {
    width: 100%;
    padding: .8rem 1rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--sk-text);
    background-color: var(--sk-surface);
    border: 1.5px solid var(--sk-border-strong);
    border-radius: var(--sk-r-sm);
    box-shadow: none;
    transition:
        border-color var(--sk-dur) var(--sk-ease),
        box-shadow var(--sk-dur) var(--sk-ease),
        background-color var(--sk-dur) var(--sk-ease);
}

.form-control::placeholder { color: var(--sk-400); }

.form-control:hover,
.form-select:hover { border-color: var(--sk-400); }

.form-control:focus,
.form-select:focus {
    border-color: var(--clr-main);
    box-shadow: var(--sk-ring);
    background-color: var(--sk-surface);
    outline: none;
}

.form-select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 16px 16px;
    appearance: none;
    -webkit-appearance: none;
}

textarea.form-control { min-height: 8rem; resize: vertical; }

.form-control[type="file"] { padding: .55rem .65rem; }

.form-control[type="file"]::file-selector-button {
    margin-right: .85rem;
    padding: .5rem .95rem;
    border: 0;
    border-radius: var(--sk-r-xs);
    background: var(--sk-100);
    color: var(--sk-700);
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    transition: background-color var(--sk-dur) var(--sk-ease);
}

.form-control[type="file"]::file-selector-button:hover { background: var(--sk-200); }

/* Validation states */
.form-control.is-invalid,
.form-select.is-invalid,
.form-control[aria-invalid="true"] {
    border-color: var(--sk-danger);
    background-color: #fffafa;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .14); }

.invalid-feedback,
.form-error {
    display: block;
    margin-top: .35rem;
    font-size: var(--sk-fs-xs);
    font-weight: 500;
    color: var(--sk-danger);
}

.form-control.is-valid,
.form-select.is-valid { border-color: var(--sk-success); }

.form-text,
.form-hint {
    display: block;
    margin-top: .35rem;
    font-size: var(--sk-fs-xs);
    color: var(--sk-text-muted);
}

/* Required marker */
.form-label .text-danger { color: var(--sk-danger) !important; font-weight: 700; }

/* Checkbox / radio */
.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .28rem;
    border: 1.5px solid var(--sk-border-strong);
    border-radius: var(--sk-r-xs);
    transition: background-color var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease);
}

.form-check-input:checked { background-color: var(--clr-main); border-color: var(--clr-main); }
.form-check-input:focus { box-shadow: var(--sk-ring); border-color: var(--clr-main); }
.form-check-label { font-size: var(--sk-fs-sm); color: var(--sk-text-muted); }

/*
 | Submit-button loading state, painted by skyper-theme.js on submit. The
 | label is hidden rather than removed so the button keeps its width and the
 | layout does not jump.
 */
.btn-auth.is-loading {
    pointer-events: none;
    color: transparent !important;
}

.btn-auth.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.15rem;
    height: 1.15rem;
    margin: -.575rem 0 0 -.575rem;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sk-spin .6s linear infinite;
}

@keyframes sk-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .btn-auth.is-loading::after { animation-duration: 1.8s; }
}

/* A grouped, elevated form panel used by contact / apply forms. */
.sk-form-panel {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-lg);
    box-shadow: var(--sk-shadow-md);
}

/* Search widgets (header + blog sidebar). */
.search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.search-form .search-input {
    width: 100%;
    padding: .8rem 3rem .8rem 1.1rem;
    font-size: .9375rem;
    color: var(--sk-text);
    background: var(--sk-surface);
    border: 1.5px solid var(--sk-border-strong);
    border-radius: var(--sk-r-pill);
    transition: border-color var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease);
}

.search-form .search-input:focus {
    border-color: var(--clr-main);
    box-shadow: var(--sk-ring);
    outline: none;
}

.search-form .search-btn {
    position: absolute;
    right: .35rem;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: 50%;
    background: var(--clr-main);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease);
}

.search-form .search-btn:hover { background: var(--sk-brand-600); transform: scale(1.05); }

/*------------------------------------------------------------------------------
  08. Badges, chips & alerts
------------------------------------------------------------------------------*/
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    font-size: var(--sk-fs-xs);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    border-radius: var(--sk-r-pill);
    white-space: nowrap;
}

.badge.bg-primary-subtle { background: var(--sk-brand-50) !important; color: var(--sk-brand-700) !important; }
.badge.bg-warning { background: var(--sk-warning-bg) !important; color: var(--sk-warning) !important; }
.badge.bg-danger-subtle { background: var(--sk-danger-bg) !important; color: var(--sk-danger) !important; }
.badge.bg-success-subtle { background: var(--sk-success-bg) !important; color: var(--sk-success) !important; }
.badge.bg-light { background: var(--sk-100) !important; color: var(--sk-700) !important; }

/* Meta chip used across job/news detail pages. */
.sk-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    font-size: var(--sk-fs-sm);
    font-weight: 550;
    color: var(--sk-700);
    background: var(--sk-50);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-pill);
}

.sk-chip .icon,
.sk-chip i { color: var(--clr-main); }

.alert {
    padding: 1rem 1.15rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--sk-r-sm);
    font-size: var(--sk-fs-sm);
}

.alert-success { background: var(--sk-success-bg); border-color: var(--sk-success); color: #0b5c33; }
.alert-danger  { background: var(--sk-danger-bg);  border-color: var(--sk-danger);  color: #8f1d14; }
.alert-warning { background: var(--sk-warning-bg); border-color: var(--sk-warning); color: #7a5108; }
.alert-info    { background: var(--sk-info-bg);    border-color: var(--sk-info);    color: #075985; }
.alert ul { margin-bottom: 0; padding-left: 1.15rem; }

/*------------------------------------------------------------------------------
  09. Breadcrumbs & pagination
------------------------------------------------------------------------------*/
.breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: 0;
    padding: .55rem 1.15rem;
    list-style: none;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--sk-r-pill);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: var(--sk-fs-sm);
}

.breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255, 255, 255, .82);
    text-transform: capitalize;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    margin-right: .35rem;
    color: rgba(255, 255, 255, .45);
}

.breadcrumb .breadcrumb-link {
    color: inherit;
    transition: color var(--sk-dur) var(--sk-ease);
}

.breadcrumb .breadcrumb-link:hover { color: #fff; }
.breadcrumb .breadcrumb-item.active { color: #fff; font-weight: 600; }

.ma-pagination { margin-top: 2.5rem; }

.ma-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ma-pagination .ma-page-link {
    display: grid;
    place-items: center;
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 .6rem;
    font-size: .9125rem;
    font-weight: 600;
    color: var(--sk-600);
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-sm);
    transition:
        color var(--sk-dur) var(--sk-ease),
        background-color var(--sk-dur) var(--sk-ease),
        border-color var(--sk-dur) var(--sk-ease),
        transform var(--sk-dur) var(--sk-ease);
}

.ma-pagination .ma-page-link:hover {
    color: var(--sk-brand-700);
    border-color: var(--clr-main);
    background: var(--sk-brand-50);
    transform: translateY(-1px);
}

.ma-pagination .ma-page-item.active .ma-page-link {
    color: #fff;
    background: var(--clr-main);
    border-color: var(--clr-main);
    box-shadow: var(--sk-shadow-brand);
}

.ma-pagination .ma-page-item.deactive-page-item .ma-page-link {
    opacity: .4;
    pointer-events: none;
}

/*------------------------------------------------------------------------------
  10. Accordion, tabs, tables, modals
------------------------------------------------------------------------------*/
.faq-accordion .card {
    margin-bottom: .75rem;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-md) !important;
    box-shadow: var(--sk-shadow-xs);
    overflow: hidden;
}

.faq-accordion .card:hover { border-color: var(--sk-border-strong); transform: none; box-shadow: var(--sk-shadow-sm); }

.faq-accordion .card-header {
    padding: 0;
    background: var(--sk-surface);
    border-bottom: 0;
}

.faq-accordion .faq-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.35rem;
    font-size: var(--sk-fs-h6);
    font-weight: 650;
    color: var(--sk-ink);
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
    transition: color var(--sk-dur) var(--sk-ease), background-color var(--sk-dur) var(--sk-ease);
}

.faq-accordion .faq-btn::after {
    content: "\F282"; /* bootstrap-icons chevron-down */
    font-family: "bootstrap-icons";
    flex: 0 0 auto;
    font-size: .85rem;
    color: var(--clr-main);
    transition: transform var(--sk-dur) var(--sk-ease);
}

.faq-accordion .faq-btn:not(.collapsed) { color: var(--sk-brand-700); background: var(--sk-brand-50); }
.faq-accordion .faq-btn:not(.collapsed)::after { transform: rotate(180deg); }
.faq-accordion .faq-btn:hover { background: var(--sk-50); }

.faq-accordion .card-body {
    padding: 1.15rem 1.35rem 1.35rem;
    color: var(--sk-text-muted);
    font-size: var(--sk-fs-sm);
    border-top: 1px solid var(--sk-border);
}

.faq-accordion .card-body ul { margin: 0; padding-left: 0; list-style: none; }

.faq-accordion .card-body li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .55rem;
}

.faq-accordion .card-body li::before {
    content: "\F26E"; /* check-lg */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    font-size: .8rem;
    color: var(--clr-main);
}

.faq-accordion .card-body li:last-child { margin-bottom: 0; }

/* Question & answer pairs inside a criteria accordion panel. */
.sk-qa-list { margin: 0; }

.sk-qa + .sk-qa {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--sk-border-strong);
}

.sk-qa-question {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .65rem;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.5;
    color: var(--sk-ink);
}

.sk-qa-question .sk-qa-marker {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .1rem;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: var(--clr-main);
    border-radius: 50%;
}

.sk-qa-answer {
    margin: 0 0 0 2.15rem;
    font-size: var(--sk-fs-sm);
    color: var(--sk-text-muted);
}

/* The answer is admin-authored rich text, so normalise what it can emit. */
.sk-qa-answer > :first-child { margin-top: 0; }
.sk-qa-answer > :last-child { margin-bottom: 0; }
.sk-qa-answer p { margin-bottom: .75rem; }
.sk-qa-answer ul, .sk-qa-answer ol { margin-bottom: .75rem; }
.sk-qa-answer h2, .sk-qa-answer h3, .sk-qa-answer h4 { margin-top: 1.25em; font-size: 1rem; }

@media (max-width: 575px) {
    .sk-qa-answer { margin-left: 0; }
}

/* Tabs */
.nav-tabs {
    gap: .35rem;
    border-bottom: 1px solid var(--sk-border);
}

.nav-tabs .nav-link {
    padding: .7rem 1.15rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--sk-600);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--sk-r-xs) var(--sk-r-xs) 0 0;
    transition: color var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease), background-color var(--sk-dur) var(--sk-ease);
}

.nav-tabs .nav-link:hover { color: var(--sk-brand-700); background: var(--sk-50); }

.nav-tabs .nav-link.active {
    color: var(--sk-brand-700);
    border-bottom-color: var(--clr-main);
    background: transparent;
}

/* Tables */
.table {
    width: 100%;
    font-size: var(--sk-fs-sm);
    border-collapse: separate;
    border-spacing: 0;
}

.table > thead > tr > th {
    padding: .85rem 1rem;
    font-size: var(--sk-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sk-600);
    background: var(--sk-50);
    border-bottom: 1px solid var(--sk-border);
}

.table > tbody > tr > td {
    padding: .9rem 1rem;
    color: var(--sk-text-muted);
    border-bottom: 1px solid var(--sk-border);
    vertical-align: middle;
}

.table > tbody > tr:hover > td { background: var(--sk-25); }

/* Wide tables must scroll inside themselves, never the page. */
.table-responsive,
.sk-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--sk-r-md);
    border: 1px solid var(--sk-border);
}

/* Modals */
.modal-content {
    border: 0;
    border-radius: var(--sk-r-lg);
    box-shadow: var(--sk-shadow-lg);
    overflow: hidden;
}

.modal-header {
    padding: 1.25rem 1.5rem;
    background: var(--sk-50);
    border-bottom: 1px solid var(--sk-border);
}

.modal-title { font-size: var(--sk-fs-h5); font-weight: 700; color: var(--sk-ink); margin: 0; }
.modal-body { padding: 1.5rem; }

.modal-footer {
    padding: 1rem 1.5rem;
    gap: .6rem;
    background: var(--sk-50);
    border-top: 1px solid var(--sk-border);
}

.modal-backdrop.show { opacity: .55; }

/*
 | Layering. The site header is `position: fixed; z-index: 1030`, so Bootstrap's
 | backdrop (1050) and dialog (1055) already clear it. Pinned explicitly so a
 | future header z-index change cannot bury the dialog behind its own scrim.
 */
.modal { z-index: 1055; }
.modal-backdrop { z-index: 1050; }

/*
 | Backdrop coverage.
 |
 | Bootstrap sizes the backdrop with `width: 100vw; height: 100vh`. Neither
 | unit matches the area actually on screen here:
 |
 |   - `100vw` includes the classic scrollbar gutter. Opening a modal locks
 |     body scroll and removes that scrollbar, so the backdrop ends up wider
 |     than the viewport and hangs off to the right.
 |   - `100vh` ignores retracting mobile browser chrome, leaving a strip along
 |     the bottom uncovered.
 |
 | A fixed element resolves its inset against the viewport, so pinning all
 | four edges covers exactly the visible area in both cases.
 */
.modal-backdrop {
    inset: 0;
    width: auto;
    height: auto;
}

/*
 | Scrollable dialogs whose body is wrapped in a <form>.
 |
 | `.modal-dialog-scrollable` puts `overflow-y: auto` on `.modal-body`, but
 | that only yields a scrollbar when the body's height is actually bounded.
 | The height bound comes from `.modal-content` (`display: flex` column with
 | `max-height: 100%`) and is passed down through its flex children.
 |
 | The apply form wraps `.modal-body` and `.modal-footer` in a <form>, which
 | is a plain block. The chain breaks there: the body grows to fit its
 | content, the form overflows `.modal-content`, and `overflow: hidden` clips
 | it — so the lower fields and the submit button become unreachable with no
 | scrollbar to get to them.
 |
 | Making the form a flex column restores the chain. `min-height: 0` is the
 | load-bearing part: flex items default to `min-height: auto` and refuse to
 | shrink below their content, which would re-break the bound.
 */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex: 0 0 auto;
}

/* Give the dialog usable height on small screens instead of a squeezed box. */
@media (max-width: 575.98px) {
    .modal-dialog-scrollable { height: calc(100% - 1rem); }
    .modal-body { padding: 1.15rem; }
    .modal-header, .modal-footer { padding-left: 1.15rem; padding-right: 1.15rem; }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer > * { flex: 1 1 auto; justify-content: center; }
}

/*------------------------------------------------------------------------------
  11. Header / navigation
------------------------------------------------------------------------------*/
/*
 | NOTE ON SPECIFICITY
 | The vendor stylesheet targets dropdowns with `.header-basic
 | .has-sub-menu > .sub-menu [...]` (4 class selectors). Anything less
 | specific here loses, which is why these rules deliberately mirror that
 | selector shape rather than using the shorter `.header-basic .sub-menu`.
 */

.header-basic {
    background: transparent;
    transition:
        background-color .35s var(--sk-ease),
        box-shadow .35s var(--sk-ease),
        backdrop-filter .35s var(--sk-ease);
}

/* Glass panel once scrolled — replaces the vendor's flat cyan bar. */
.is-sticky.header-basic {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--sk-border);
    box-shadow: 0 4px 24px rgba(0, 47, 104, .07);
}

.is-sticky.header-basic .menu-link { color: var(--sk-ink) !important; }
.is-sticky.header-basic .menu-link:hover,
.is-sticky.header-basic .menu-link.active { color: var(--sk-brand-700) !important; }

.is-sticky.header-basic .header-logo .logo-img.light-logo { display: none; }
.is-sticky.header-basic .header-logo .logo-img.dark-logo { display: block; }
.is-sticky.header-basic .controls-box .control { color: var(--sk-ink); }
.is-sticky.header-basic .menu-toggler > span { background-color: var(--sk-ink); }

/* -------- Desktop bar -------- */
@media (min-width: 1200px) {
    .header-basic .menu-navbar {
        min-height: var(--sk-header-h);
        gap: 1rem;
    }

    /* The vendor centres the link list with auto margins; push it right so the
       logo and the CTA anchor the two ends of the bar. */
    .header-basic .menu-wrapper { margin-left: auto; margin-right: 0; }

    .header-basic .links-list > .menu-item > .menu-link {
        line-height: var(--sk-header-h);
        font-size: var(--sk-fs-nav);
        font-weight: 550;
        letter-spacing: -.005em;
    }

    /* The vendor draws a small dot before every link. With the underline
       below it reads as two competing indicators, so top-level links keep
       only the underline. */
    .header-basic .links-list > .menu-item > .menu-link::before { content: none; }

    /* Underline is centred on the text box itself, so it holds at any
       header height instead of depending on a hard-coded offset. */
    .header-basic .links-list > .menu-item > .menu-link::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        top: calc(50% + .95em);
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .3s var(--sk-ease-out);
    }

    .header-basic .links-list > .menu-item > .menu-link:hover::after,
    .header-basic .links-list > .menu-item > .menu-link.active::after { transform: scaleX(1); }

    .header-basic .header-logo .logo-img { max-width: 9rem; }
}

/* Between 1200 and 1400 the full nav plus a CTA overflows the container,
   so the CTA is reserved for wider viewports (mobile keeps its own in the
   drawer). Spacing tightens here rather than letting items collide. */
@media (min-width: 1200px) and (max-width: 1399px) {
    .header-basic .links-list > .menu-item > .menu-link {
        font-size: .8125rem;
        padding-left: 8px;
        padding-right: 8px;
    }

    .header-basic .header-logo .logo-img { max-width: 7.5rem; }
    .header-cta { display: none !important; }
}

@media (min-width: 1400px) {
    .header-basic .controls-box { gap: .75rem; }
}

.menu-navbar .menu-link.active { font-weight: 700; }

/* Dropdown affordance: the vendor ships a Font Awesome "+", which reads as
   "add". Swap the glyph for a chevron and rotate it when the menu opens. */
.header-basic .plus-icon::before {
    font-family: "bootstrap-icons" !important;
    font-weight: 400;
    content: "\F282";
    font-size: .65em;
}

.header-basic .plus-icon {
    margin-left: .4rem;
    opacity: .65;
    transition: transform .3s var(--sk-ease), opacity .3s var(--sk-ease);
}

.header-basic .has-sub-menu:hover > .menu-link .plus-icon,
.header-basic .has-sub-menu:focus-within > .menu-link .plus-icon {
    transform: rotate(180deg);
    opacity: 1;
}

/* Search toggle in the controls box (a real <button>, so reset UA chrome). */
.header-basic .controls-box .header-search-btn {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease);
}

.header-basic .controls-box .header-search-btn .icon { font-size: 1.15rem; }
.header-basic .controls-box .header-search-btn:hover { background: rgba(255, 255, 255, .16); }

.is-sticky.header-basic .controls-box .header-search-btn { color: var(--sk-ink); }
.is-sticky.header-basic .controls-box .header-search-btn:hover {
    background: var(--sk-brand-50);
    color: var(--sk-brand-700);
}

@media (max-width: 1199px) {
    .header-basic .controls-box .header-search-btn { color: var(--sk-ink); }
    .header-basic .controls-box .header-search-btn:hover { background: var(--sk-brand-50); }
}

/* -------- Dropdown panels -------- */
.header-basic .has-sub-menu > .sub-menu {
    min-width: 16rem;
    padding: .5rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-md);
    box-shadow: var(--sk-shadow-lg);
}

.header-basic .has-sub-menu > .sub-menu .sub-menu-link {
    display: block;
    padding: .6rem .85rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--sk-700);
    border-radius: var(--sk-r-xs);
    transform: none;
    transition:
        background-color var(--sk-dur) var(--sk-ease),
        color var(--sk-dur) var(--sk-ease);
}

.header-basic .has-sub-menu > .sub-menu .sub-menu-link:hover,
.header-basic .has-sub-menu > .sub-menu .sub-menu-link.active {
    background: var(--sk-brand-50);
    color: var(--sk-brand-700);
    /* Cancel the vendor's nudge — the row highlight already signals hover. */
    transform: none;
}

.header-basic .has-sub-menu > .sub-menu .sub-menu-link::before { content: none; }

/* Long dropdowns (Services / Industries) render as two columns. */
@media (min-width: 1200px) {
    .header-basic .menu-item.has-mega-menu > .sub-menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(13.5rem, 1fr));
        gap: .1rem .35rem;
        width: max-content;
        max-width: min(44rem, 92vw);
    }

    .header-basic .has-sub-menu > .sub-menu {
        max-height: min(70vh, 32rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* -------- Mobile drawer -------- */
@media (max-width: 1199px) {
    /* The vendor paints the whole bar cyan below 1200px; keep it consistent
       with the scrolled desktop treatment instead. */
    .header-basic {
        background: rgba(255, 255, 255, .94);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid var(--sk-border);
    }

    .header-basic .header-logo .logo-img.light-logo { display: none; }
    .header-basic .header-logo .logo-img.dark-logo { display: block; }
    .header-basic .controls-box .menu-toggler > span { background-color: var(--sk-ink); }

    .header-basic .links-list {
        width: min(88%, 22rem);
        padding: 1rem 1.15rem 2.5rem;
        background: var(--sk-surface);
        box-shadow: var(--sk-shadow-lg);
    }

    .header-basic .menu-link {
        color: var(--sk-ink) !important;
        line-height: 1.4;
        padding: .9rem 0;
        font-size: .9375rem;
    }

    .header-basic .menu-link.active { color: var(--sk-brand-700) !important; }
    .header-basic .menu-link::before { content: none; }

    .header-basic .links-list > .menu-item + .menu-item { border-top: 1px solid var(--sk-border); }

    .header-basic .has-sub-menu > .sub-menu {
        box-shadow: none;
        border: 0;
        min-width: 0;
        padding: 0 0 .5rem .75rem;
        background: transparent;
    }

    .header-basic .has-sub-menu > .sub-menu .sub-menu-link {
        padding: .65rem .75rem !important;
        color: var(--sk-600);
    }

    /* The drawer's own CTA should not inherit the divider rule. */
    .header-basic .links-list > .menu-item:last-child { border-top: 0; padding-top: 1rem; }
}

.header-basic .menu-toggler > span { transition: transform .3s var(--sk-ease), opacity .2s var(--sk-ease); }

/* Header search overlay */
.header-search-box {
    background: rgba(0, 47, 104, .95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header-search-box .search-lbl {
    display: block;
    margin-bottom: .75rem;
    color: rgba(255, 255, 255, .75);
    font-size: var(--sk-fs-sm);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Back-to-top */
.back-to-top {
    /* display: grid; */
    /* place-items: center; */
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--clr-main);
    color: #fff;
    box-shadow: var(--sk-shadow-brand);
    transition: transform var(--sk-dur) var(--sk-ease), background-color var(--sk-dur) var(--sk-ease);
}

.back-to-top:hover { transform: translateY(-3px); background: var(--sk-brand-600); }

/*------------------------------------------------------------------------------
  12. Hero & inner page hero
------------------------------------------------------------------------------*/
.page-hero .slide-title,
.page-hero .hero-title {
    font-size: var(--sk-fs-display);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.035em;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}

.page-hero .slide-subtitle {
    max-width: 58ch;
    color: rgba(255, 255, 255, .88);
}

.page-hero .cta-links-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* Inner pages: shorter hero, layered scrim so the title always reads. */
.inner-page-hero {
    min-height: clamp(20rem, 14rem + 18vw, 27rem);
    padding-top: calc(var(--sk-header-offset) + 2rem);
    padding-bottom: 3rem;
    text-align: center;
}

.inner-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 47, 104, .72) 0%, rgba(0, 47, 104, .58) 45%, rgba(5, 23, 46, .84) 100%);
    pointer-events: none;
}

.inner-page-hero .hero-text-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.inner-page-hero .hero-title {
    max-width: 22ch;
    margin: 0;
    font-size: var(--sk-fs-h1);
}

/* The template's decorative squiggle under featured words — trimmed down. */
.wavey-underline { max-width: 100%; opacity: .55; }

/* Slider controls */
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, .5);
    opacity: 1;
    transition: width var(--sk-dur) var(--sk-ease), background-color var(--sk-dur) var(--sk-ease);
}

.swiper-pagination-bullet-active {
    width: 26px;
    border-radius: var(--sk-r-pill);
    background: #fff;
}

.slider-stacked-arrows .left-arrow,
.slider-stacked-arrows .right-arrow {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease);
}

.slider-stacked-arrows .left-arrow:hover,
.slider-stacked-arrows .right-arrow:hover { background: var(--clr-main); border-color: var(--clr-main); transform: scale(1.06); }

/*------------------------------------------------------------------------------
  13. Blog / news
------------------------------------------------------------------------------*/
.post-box {
    height: 100%;
    /* Vertical rhythm comes from the row gutter (gy-*). Keeping a margin here
       as well double-spaced the grid and left a gap before the pagination. */
    margin-bottom: 0;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-lg);
    box-shadow: var(--sk-shadow-sm);
    overflow: hidden;
    transition: transform var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease);
    display: flex;
    flex-direction: column;
}

.post-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--sk-shadow-lg);
    border-color: var(--sk-border-strong);
}

.post-box .post-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--sk-100);
}

.post-box .post-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--sk-ease-out);
}

.post-box:hover .post-img { transform: scale(1.06); }

.post-box .post-date {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: grid;
    place-items: center;
    padding: .5rem .75rem;
    min-width: 3.6rem;
    font-size: var(--sk-fs-xs);
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    color: var(--sk-ink);
    background: rgba(255, 255, 255, .95);
    border-radius: var(--sk-r-sm);
    box-shadow: var(--sk-shadow-sm);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.post-box .post-date .day {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--clr-main);
}

.post-box .post-summary {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.4rem 1.5rem 1.6rem;
}

.post-box .post-info {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: .85rem;
    font-size: var(--sk-fs-xs);
    color: var(--sk-text-muted);
}

.post-box .post-info .info {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-transform: capitalize;
    transition: color var(--sk-dur) var(--sk-ease);
}

.post-box .post-info .info .icon { color: var(--clr-main); }
.post-box .post-info .post-cat:hover { color: var(--sk-brand-700); }

.post-box .post-title {
    font-size: var(--sk-fs-h5);
    font-weight: 650;
    line-height: 1.35;
    margin-bottom: .6rem;
    transition: color var(--sk-dur) var(--sk-ease);
}

.post-box .post-link:hover .post-title { color: var(--sk-brand-700); }

.post-box .post-excerpt {
    font-size: var(--sk-fs-sm);
    margin-bottom: 1rem;
    flex: 1 1 auto;
}

.post-box .post-text { display: flex; flex-direction: column; flex: 1 1 auto; }
.post-box .read-more { margin-top: auto; align-self: flex-start; }

/*
 | Wide variant — used when a highlight strip has a single entry, so one card
 | fills the band instead of stranding two-thirds of it empty. Media and copy
 | sit side by side from the medium breakpoint up, and it falls back to the
 | standard stacked card on phones.
 */
@media (min-width: 768px) {
    .post-box--wide {
        flex-direction: row;
        align-items: stretch;
    }

    .post-box--wide > .post-link {
        flex: 0 0 42%;
        max-width: 42%;
        display: block;
    }

    .post-box--wide .post-img-wrapper {
        height: 100%;
        aspect-ratio: auto;
        min-height: 17rem;
    }

    .post-box--wide .post-summary {
        justify-content: center;
        padding: 2rem 2.25rem;
    }

    .post-box--wide .post-title { font-size: 1.5rem; }
    .post-box--wide .post-excerpt { font-size: var(--sk-fs-body); }
}

@media (min-width: 1200px) {
    .post-box--wide > .post-link { flex-basis: 46%; max-width: 46%; }
    .post-box--wide .post-title { font-size: 1.75rem; }
}

/* Category filter pills above the article grid. */
.sk-cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.sk-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.05rem;
    font-size: var(--sk-fs-sm);
    font-weight: 550;
    color: var(--sk-600);
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-pill);
    text-transform: capitalize;
    transition:
        color var(--sk-dur) var(--sk-ease),
        background-color var(--sk-dur) var(--sk-ease),
        border-color var(--sk-dur) var(--sk-ease),
        transform var(--sk-dur) var(--sk-ease);
}

.sk-cat-pill:hover {
    color: var(--sk-brand-700);
    border-color: var(--clr-main);
    background: var(--sk-brand-50);
    transform: translateY(-1px);
}

.sk-cat-pill.active {
    color: #fff;
    background: var(--clr-main);
    border-color: var(--clr-main);
    box-shadow: var(--sk-shadow-brand);
}

.sk-cat-pill-count {
    display: grid;
    place-items: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .35rem;
    font-size: var(--sk-fs-xs);
    font-weight: 700;
    color: var(--sk-600);
    background: var(--sk-100);
    border-radius: var(--sk-r-pill);
}

.sk-cat-pill.active .sk-cat-pill-count {
    color: #fff;
    background: rgba(255, 255, 255, .25);
}

/* "Featured" ribbon on a highlighted article card. */
.sk-featured-flag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    font-size: var(--sk-fs-xs);
    font-weight: 700;
    color: var(--sk-ink);
    background: rgba(255, 255, 255, .95);
    border-radius: var(--sk-r-pill);
    box-shadow: var(--sk-shadow-sm);
}

.sk-featured-flag i { color: #d98b06; }

/* Sidebar */
.blog-sidebar {
    position: sticky;
    top: calc(var(--sk-header-offset) + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (max-width: 991px) {
    .blog-sidebar { position: static; margin-top: 3rem; }
}

.sidebar-box {
    padding: 1.5rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-lg);
    box-shadow: var(--sk-shadow-xs);
}

.sidebar-box.search { padding: 1.1rem; }

.sidebar-box-title {
    position: relative;
    margin-bottom: 1.15rem;
    padding-bottom: .75rem;
    font-size: var(--sk-fs-h6);
    font-weight: 700;
    text-transform: capitalize;
    color: var(--sk-ink);
    border-bottom: 1px solid var(--sk-border);
}

.sidebar-box-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 2.5rem;
    height: 2px;
    background: var(--clr-main);
    border-radius: 2px;
}

.sidebar-list { list-style: none; margin: 0; padding: 0; }

.cats-list .cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .75rem;
    font-size: var(--sk-fs-sm);
    font-weight: 500;
    color: var(--sk-600);
    border-radius: var(--sk-r-xs);
    text-transform: capitalize;
    transition: background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease), padding-left var(--sk-dur) var(--sk-ease);
}

.cats-list .cat-link:hover {
    background: var(--sk-brand-50);
    color: var(--sk-brand-700);
    padding-left: 1.05rem;
}

.cats-list .cat-count {
    display: grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: var(--sk-fs-xs);
    font-weight: 700;
    color: var(--sk-600);
    background: var(--sk-100);
    border-radius: var(--sk-r-pill);
}

.cats-list .cat-link:hover .cat-count { background: var(--clr-main); color: #fff; }

.r-posts-list .r-post-item + .r-post-item { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sk-border); }

.r-posts-list .r-post-link {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.r-posts-list .r-post-img-wrapper {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--sk-r-sm);
    overflow: hidden;
    background: var(--sk-100);
}

.r-posts-list .r-post-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--sk-ease-out);
}

.r-posts-list .r-post-link:hover .r-post-img { transform: scale(1.08); }

.r-posts-list .r-post-title {
    font-size: .9125rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: .25rem;
    color: var(--sk-ink);
    transition: color var(--sk-dur) var(--sk-ease);
}

.r-posts-list .r-post-link:hover .r-post-title { color: var(--sk-brand-700); }
.r-posts-list .r-post-date { font-size: var(--sk-fs-xs); color: var(--sk-text-muted); }

.tags-list { display: flex; flex-wrap: wrap; gap: .5rem; }

.tag-link {
    display: inline-block;
    padding: .4rem .85rem;
    font-size: var(--sk-fs-xs);
    font-weight: 550;
    color: var(--sk-600);
    background: var(--sk-50);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-pill);
    text-transform: capitalize;
    transition: all var(--sk-dur) var(--sk-ease);
}

.tag-link:hover {
    color: #fff;
    background: var(--clr-main);
    border-color: var(--clr-main);
    transform: translateY(-1px);
}

/* Article page */
.post-single .post-info {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .5rem;
}

.post-single .post-info .info {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    font-size: var(--sk-fs-xs);
    font-weight: 550;
    color: var(--sk-600);
    background: var(--sk-50);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-pill);
}

.post-single .post-info .info .icon { color: var(--clr-main); }

.post-single .post-img-wrapper .post-img {
    border-radius: var(--sk-r-lg) !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    box-shadow: var(--sk-shadow-md);
}

.share-buttons .sc-link {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    color: var(--sk-600);
    background: var(--sk-50);
    border: 1px solid var(--sk-border);
    transition: all var(--sk-dur) var(--sk-ease);
}

.share-buttons .sc-link:hover {
    color: #fff;
    background: var(--clr-main);
    border-color: var(--clr-main);
    transform: translateY(-2px);
}

.post-nav { gap: 1rem; border-top-color: var(--sk-border) !important; }

/*------------------------------------------------------------------------------
  14. Careers
------------------------------------------------------------------------------*/
/* Filter bar — reads as one control surface instead of loose inputs. */
.sk-filter-bar {
    padding: 1.15rem;
    margin-bottom: 2.5rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-lg);
    box-shadow: var(--sk-shadow-sm);
}

.sk-filter-bar .form-control,
.sk-filter-bar .form-select { border-radius: var(--sk-r-sm); }

.sk-filter-bar .sk-search-field { position: relative; }

.sk-filter-bar .sk-search-field .form-control { padding-left: 2.65rem; }

.sk-filter-bar .sk-search-field .sk-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sk-400);
    pointer-events: none;
}

.job-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--sk-r-lg);
}

.job-card .job-card-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--sk-100);
}

.job-card .job-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--sk-ease-out);
}

.job-card:hover .job-card-media img { transform: scale(1.05); }

.job-card .card-title a { color: var(--sk-ink); transition: color var(--sk-dur) var(--sk-ease); }
.job-card:hover .card-title a { color: var(--sk-brand-700); }

.job-card .job-meta {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: .4rem;
    font-size: var(--sk-fs-sm);
    color: var(--sk-text-muted);
}

.job-card .job-meta li { display: flex; align-items: center; gap: .5rem; }
.job-card .job-meta i { color: var(--clr-main); flex: 0 0 auto; }

/* Sticky apply panel on the job detail page. */
.sk-apply-panel {
    position: sticky;
    top: calc(var(--sk-header-offset) + 1.5rem);
    border-radius: var(--sk-r-lg);
}

@media (max-width: 991px) {
    .sk-apply-panel { position: static; }
}

.sk-related-job {
    display: block;
    padding: .9rem 1rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-md);
    transition: all var(--sk-dur) var(--sk-ease);
}

.sk-related-job + .sk-related-job { margin-top: .65rem; }

.sk-related-job:hover {
    border-color: var(--clr-main);
    background: var(--sk-brand-50);
    transform: translateX(3px);
}

.sk-related-job .sk-related-title { display: block; font-weight: 650; color: var(--sk-ink); font-size: .9375rem; }
.sk-related-job .sk-related-meta { display: block; margin-top: .2rem; font-size: var(--sk-fs-xs); color: var(--sk-text-muted); }

.sk-empty-state {
    padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem;
    text-align: center;
    background: var(--sk-50);
    border: 1px dashed var(--sk-border-strong);
    border-radius: var(--sk-r-lg);
}

.sk-empty-state .sk-empty-icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    font-size: 1.6rem;
    color: var(--clr-main);
    background: var(--sk-brand-50);
    border-radius: 50%;
}

/*------------------------------------------------------------------------------
  15. Footer
------------------------------------------------------------------------------*/
.page-footer.dark-color-footer {
    position: relative;
    background: var(--clr-dark-blue, #060922);
    color: rgba(255, 255, 255, .72);
    padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}

.page-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(132, 165, 205, .55), transparent);
}

.page-footer .footer-col {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.5rem;
}

/* Pushes nothing to the bottom, but keeps every column's content aligned to
   a common top edge regardless of how many links it holds. */
.page-footer .footer-col-content-wrapper { flex: 1 1 auto; }

.page-footer .contact-info-card .info--multiline {
    line-height: 1.5;
    align-self: center;
}

.page-footer .footer-logo {
    max-width: 11rem;
    margin-bottom: 1.25rem;
}

.page-footer .footer-text-about-us {
    font-size: var(--sk-fs-sm);
    line-height: 1.75;
    color: rgba(255, 255, 255, .68);
    max-width: 40ch;
}

.page-footer .footer-col-title {
    position: relative;
    margin-bottom: 1.35rem;
    padding-bottom: .65rem;
    font-size: var(--sk-fs-h6);
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--sk-on-dark-strong);
}

.page-footer .footer-col-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.25rem;
    height: 2px;
    border-radius: 2px;
    /* Light end of the brand ramp: the navy itself is invisible here. */
    background: var(--sk-brand-300);
}

.page-footer .footer-menu { list-style: none; margin: 0; padding: 0; }

.page-footer .footer-menu-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .7rem;
}

.page-footer .footer-menu-item .icon {
    font-size: .7rem;
    color: var(--sk-brand-300);
    transition: transform var(--sk-dur) var(--sk-ease);
}

.page-footer .footer-menu-link {
    font-size: var(--sk-fs-sm);
    color: rgba(255, 255, 255, .7);
    transition: color var(--sk-dur) var(--sk-ease);
}

.page-footer .footer-menu-item:hover .icon { transform: translateX(3px); }
.page-footer .footer-menu-link:hover { color: #fff; }

.page-footer .contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
    font-size: var(--sk-fs-sm);
}

.page-footer .contact-info-card .icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--sk-r-sm);
    background: rgba(132, 165, 205, .16);
    color: var(--sk-brand-300);
    font-size: .95rem;
}

.page-footer .contact-info-card .info {
    color: rgba(255, 255, 255, .75);
    line-height: 2.25rem;
    transition: color var(--sk-dur) var(--sk-ease);
}

.page-footer .contact-info-card a.info:hover { color: #fff; }

/*
 | Social icons.
 |
 | Uniform circular targets on a translucent surface so they read as one set
 | against the dark footer, lifting to the brand colour on hover. Sized at
 | 2.75rem, which clears the 44px minimum touch target on mobile.
 */
.sk-social {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.5rem;
}

.sk-social-link {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
    line-height: 1;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    transition:
        color var(--sk-dur) var(--sk-ease),
        background-color var(--sk-dur) var(--sk-ease),
        border-color var(--sk-dur) var(--sk-ease),
        transform var(--sk-dur) var(--sk-ease),
        box-shadow var(--sk-dur) var(--sk-ease);
}

.sk-social-link:hover,
.sk-social-link:focus-visible {
    /* Lifts to a lighter brand tone so the change is legible on navy. */
    color: var(--sk-brand-900);
    background: var(--sk-brand-300);
    border-color: var(--sk-brand-300);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(5, 23, 46, .45);
}

.sk-social-link:active { transform: translateY(-1px); }

@media (max-width: 575px) {
    .sk-social { justify-content: flex-start; }
}

/* Copyright bar */
.page-footer .copyrights {
    margin-top: 1.5rem;
    padding: 1.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.page-footer .copyrights .creadits,
.page-footer .copyrights .terms-links {
    margin: 0;
    font-size: var(--sk-fs-xs);
    color: rgba(255, 255, 255, .55);
}

.page-footer .copyrights a { color: rgba(255, 255, 255, .75); transition: color var(--sk-dur) var(--sk-ease); }
.page-footer .copyrights a:hover { color: var(--sk-brand-300); }

@media (max-width: 767px) {
    .page-footer .copyrights .row > div { justify-content: center !important; text-align: center; }
    .page-footer .copyrights .row > div + div { margin-top: .5rem; }
}

/*------------------------------------------------------------------------------
  16. Motion & reveal
------------------------------------------------------------------------------*/
/* Progressive scroll reveal. Elements only hide once JS confirms it can
   observe them, so no-JS visitors never end up with invisible content. */
.sk-js .sk-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .7s var(--sk-ease-out),
        transform .7s var(--sk-ease-out);
    transition-delay: var(--sk-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.sk-js .sk-reveal.sk-in {
    opacity: 1;
    transform: none;
}

.sk-js .sk-reveal-left { transform: translateX(-26px); }
.sk-js .sk-reveal-right { transform: translateX(26px); }
.sk-js .sk-reveal-scale { transform: scale(.96); }

/* Hover elevation helper for any grid item. */
.sk-lift { transition: transform var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease); }
.sk-lift:hover { transform: translateY(-4px); box-shadow: var(--sk-shadow-lg); }

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

    .sk-js .sk-reveal { opacity: 1 !important; transform: none !important; }
    .wow { visibility: visible !important; animation: none !important; }
}

/*------------------------------------------------------------------------------
  17. Media
------------------------------------------------------------------------------*/
img { max-width: 100%; height: auto; }

/* Reserve space so images don't shift layout while loading. */
.sk-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--sk-r-md);
    background: var(--sk-100);
}

.sk-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sk-media--16x9 { aspect-ratio: 16 / 9; }
.sk-media--4x3  { aspect-ratio: 4 / 3; }
.sk-media--1x1  { aspect-ratio: 1 / 1; }

.sk-media--zoom > img { transition: transform .6s var(--sk-ease-out); }
.sk-media--zoom:hover > img { transform: scale(1.06); }

/*------------------------------------------------------------------------------
  18. Utilities, a11y & print
------------------------------------------------------------------------------*/
.sk-muted { color: var(--sk-text-muted) !important; }
.sk-ink { color: var(--sk-ink) !important; }
.sk-surface-alt { background: var(--sk-surface-alt); }
.sk-divider { height: 1px; background: var(--sk-border); border: 0; margin: var(--sk-space-block) 0; }
.sk-stack { display: grid; gap: 1rem; }

.text-muted { color: var(--sk-text-muted) !important; }
.border { border-color: var(--sk-border) !important; }
.rounded { border-radius: var(--sk-r-sm) !important; }

/* Skip link for keyboard and screen-reader users. */
.sk-skip-link {
    position: absolute;
    left: 1rem;
    top: -100%;
    z-index: 2000;
    padding: .75rem 1.25rem;
    font-weight: 600;
    color: #fff;
    background: var(--sk-ink);
    border-radius: 0 0 var(--sk-r-sm) var(--sk-r-sm);
    transition: top .2s var(--sk-ease);
}

.sk-skip-link:focus { top: 0; color: #fff; }

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media print {
    .page-header,
    .page-footer,
    .back-to-top,
    .sk-filter-bar,
    .blog-sidebar,
    .share-buttons { display: none !important; }

    body.light-theme { color: #000; }
    .mega-section { padding: 1rem 0; }
    a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}