/* ==========================================================================
   Sparko India — enhancement layer
   --------------------------------------------------------------------------
   ADDITIVE ONLY. Loaded last, after plugins.css / style.css / skin-1.css /
   templete.css. It changes no markup and no layout structure: every rule here
   either fixes something that was broken on small screens, or tightens type,
   spacing and contrast so the pages read like an industrial supplier's site
   rather than a demo theme.
   --------------------------------------------------------------------------
   1  Tokens
   2  Overflow containment (the site scrolled sideways on a phone)
   3  Typography and rhythm
   4  Header / top bar
   5  Sections, cards and images
   6  Buttons, forms and tap targets
   7  Footer
   8  Floating WhatsApp button
   9  Accessibility
   10 Small-screen breakpoints
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
    --sk-orange:      #ff5e14;
    --sk-orange-dark: #e14f0c;
    --sk-ink:         #16212c;
    --sk-body:        #4a5560;
    --sk-muted:       #77828d;
    --sk-line:        #e4e8ec;
    --sk-bg-soft:     #f6f8fa;
    --sk-shadow:      0 2px 14px rgba(16, 33, 48, .07);
    --sk-shadow-lift: 0 10px 30px rgba(16, 33, 48, .12);
    --sk-radius:      6px;
}

/* ---------- 2. Overflow containment -------------------------------------- */
/* The theme let rows and absolutely positioned decoration push past the
   viewport, so every page scrolled sideways on a phone and the right-hand
   edge of cards, addresses and the top bar was cut off. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Revolution Slider positions its layers absolutely at fixed pixel sizes:
   a blanket max-width on images breaks it, so the slider is excluded. */
img:not(.tp-bgimg):not([class*="tp-"]),
svg,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}
.rev_slider img,
.rev_slider_wrapper img,
.tp-caption img,
.tp-revslider-mainul img {
    max-width: none;
    height: auto;
}

/* Bootstrap caps .container at 540/720/960/1140/1320px per breakpoint, and it
   does so from inside media queries -- which add no specificity. A blanket
   `.container { max-width: 100% }` in this file therefore beat every one of
   them and made the whole site full-bleed: body copy ran edge to edge on any
   wide screen. Bootstrap's container is already `width: 100%` with
   border-box padding, so it cannot overflow on a phone regardless; the
   overflow guard that matters is the one on <body> above. Below 576px, where
   Bootstrap sets no cap at all, saying so explicitly costs nothing. */
@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        max-width: 100%;
    }
}

/* long unbroken strings (email addresses, part numbers) must wrap, not push */
p, li, td, dd, .widget p, .ft-contact-bx p, .dlab-tilte {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- 3. Typography and rhythm ------------------------------------- */
body {
    color: var(--sk-body);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.title, .dlab-tilte {
    color: var(--sk-ink);
    letter-spacing: -0.01em;
}

h1, .h1 { line-height: 1.2; }
h2, .h2 { line-height: 1.25; }
h3, .h3 { line-height: 1.3; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* section heading sits closer to its own copy than to the block above it */
.section-head { margin-bottom: 34px; }
.section-head .title { margin-bottom: 10px; }
.section-head p { color: var(--sk-muted); max-width: 760px; }
.section-head.text-center p { margin-left: auto; margin-right: auto; }

/* bullet lists inside content blocks were unstyled <li> without a <ul> */
.our-story li,
.content-inner li {
    position: relative;
    list-style: none;
    padding-left: 24px;
    margin-bottom: 8px;
}
.our-story li:before,
.content-inner li:before {
    content: "";
    position: absolute;
    left: 2px;
    top: .68em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sk-orange);
}
.list-2 li:before,
.breadcrumb-row li:before,
.dlab-social-icon li:before,
.nav li:before,
.list-inline li:before { content: none; }
.list-2 li, .breadcrumb-row li, .nav li, .list-inline li { padding-left: 0; }

/* ---------- 4. Header / top bar ------------------------------------------ */
.top-bar {
    font-size: 13px;
    padding: 6px 0;
}
.top-bar .dlab-topbar-left ul,
.top-bar .dlab-topbar-right ul {
    margin-bottom: 0;
}
.top-bar a:hover { color: var(--sk-orange); }

.top-bar .site-button {
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Keep the wordmark and slogan readable at every screen size. The logo is
   wide (about 5:1), so it grows in WIDTH; the box keeps the theme's 68px
   height. The box floats left, so any height taller than the menu bar spills
   below the header and the banner wraps round it, leaving a white block. */
.site-header .logo-header {
    width: 280px;
    max-width: calc(100% - 80px);
}
.site-header .logo-header img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .site-header .logo-header { width: 240px; }
}

.sticky-header.is-fixed .main-bar {
    box-shadow: var(--sk-shadow);
}

/* the mobile menu button was easy to miss against the white bar */
.navbar-toggler.navicon span { background: var(--sk-ink); }

/* Current page. The theme hard-coded "active" on Home, so every page looked
   like the home page; the header now works it out from the running script and
   this styles it -- colour plus a rule under the item, because colour alone is
   not enough for anyone who cannot distinguish it. */
.header-nav .nav > li.active > a,
.header-nav .nav > li > a[aria-current="page"] {
    color: var(--sk-orange);
    font-weight: 600;
}
@media (min-width: 992px) {
    .header-nav .nav > li.active > a:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 3px;
        background: var(--sk-orange);
    }
    .header-nav .nav > li > a { position: relative; }
}
/* on the mobile sheet an underline reads oddly; mark it down the side */
@media (max-width: 991px) {
    .header-nav .nav > li.active > a {
        border-left: 3px solid var(--sk-orange);
        padding-left: 12px;
        background: rgba(255, 94, 20, .06);
    }
}
/* the top bar repeats three of the same links */
.top-bar .dlab-topbar-left ul li a[aria-current="page"] {
    color: var(--sk-orange);
    font-weight: 600;
}

/* ---------- 5. Sections, cards and images -------------------------------- */
.dlab-bnr-inr .dlab-bnr-inr-entry h1 {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.breadcrumb-row ul li a { color: rgba(255, 255, 255, .85); }

.icon-bx-wraper.bx-style-1,
.service-box,
.blog-post,
.widget-box {
    border-color: var(--sk-line);
    border-radius: var(--sk-radius);
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.icon-bx-wraper.bx-style-1:hover,
.service-box:hover,
.blog-post:hover {
    transform: translateY(-3px);
    box-shadow: var(--sk-shadow-lift);
    border-color: rgba(255, 94, 20, .35);
}

/* product / service thumbnails: one consistent frame instead of whatever
   aspect ratio the photograph happened to have */
.dlab-box .dlab-media img,
.dlab-thum-bx img,
.our-story-thum img {
    border-radius: var(--sk-radius);
}

.dlab-media,
.dlab-thum-bx {
    overflow: hidden;
    border-radius: var(--sk-radius);
}
.dlab-media img,
.dlab-thum-bx img {
    transition: transform .4s ease;
}
.dlab-box:hover .dlab-media img,
.dlab-box:hover .dlab-thum-bx img {
    transform: scale(1.04);
}

/* a fixed pixel height on a column of photographs is a desktop assumption */
.our-story-thum {
    height: auto !important;
}
.our-story-thum img {
    width: 100%;
    object-fit: cover;
}

/* counters read as figures, not headings */
.counter { font-variant-numeric: tabular-nums; }

/* zebra-free, readable tables wherever the theme drops one in */
table { width: 100%; }

/* ---------- 5b. Equal-height cards --------------------------------------
   The service cards carry lists of different lengths (three level
   instruments against seven pressure ones), so each card ended where its own
   text ended and every row had a ragged bottom edge.

   The theme ships a JavaScript "equal height" helper (.dzseth in
   js/custom.js) but it measures once, only above 991px, and these cards do
   not use it. CSS does the same job at every width, with no reflow on load
   and nothing to re-run when the content changes.

   The card fills its grid cell; the icon and title stay pinned to the top
   and any spare space falls to the bottom, which is what makes a row of
   uneven lists read as a deliberate grid rather than as a mistake. */

.service-box,
.service-box.style3 {
    display: flex;
}
.service-box > .icon-bx-wraper,
.service-box.style3 > .icon-bx-wraper {
    width: 100%;
    display: flex;
    flex-direction: column;
}
/* the list block takes the slack, so the watermark number and the padding
   sit consistently on every card in the row */
.service-box .icon-content {
    flex: 1 1 auto;
}

/* contact and feature boxes: the theme's .seth class is the JS helper, which
   leaves them uneven below 991px and on first paint */
.row > [class*="col-"] > .icon-bx-wraper.bx-style-1,
.row > [class*="col-"] > .icon-bx-wraper.seth {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ---------- product cards ------------------------------------------------
   These are catalogue photographs of instruments: cut-outs, square, on
   white, at wildly different aspect ratios. Cropping them to fill a frame
   (object-fit: cover) takes the top off a round gauge, so the image is
   CONTAINED in a fixed, softly tinted well and the card is what gives the
   grid its rhythm. Every tile is then the same height whatever the
   photograph, which is also what stops a row from going ragged. */

.item-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 8px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Space BETWEEN rows, not after every card: a flex container's row-gap
   applies only between wrapped lines, so the last row sits flush against the
   end of the section instead of leaving a hole above the next one. The cards
   carry an m-b10 utility in the markup, which is zeroed here so the spacing
   comes from one place. */
.product-grid,
.card-grid {
    row-gap: 26px;
}
.product-grid > [class*="col-"] > .item-box,
.product-grid > [class*="col-"] > .item-box.m-b10 {
    margin-bottom: 0;
}

.item-box .item-img {
    position: relative;
    height: 210px;
    padding: 18px;
    background: linear-gradient(180deg, #fbfcfd 0%, #f4f6f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.item-box .item-img > a { display: block; width: 100%; height: 100%; }
.item-box .item-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;          /* white photo backgrounds disappear */
    transition: transform .35s ease;
}

.item-box .item-info {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    border-top: 1px solid var(--sk-line);
    background: #fff;
    min-height: 62px;
}
.item-box .item-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sk-ink);
    transition: color .2s ease;
}
.item-box .item-title a { color: inherit; cursor: default; }

/* an accent that appears on hover, so the grid is alive without being busy */
.item-box:after {
    content: "";
    display: block;
    height: 3px;
    background: var(--sk-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.item-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--sk-shadow-lift);
    border-color: rgba(255, 94, 20, .3);
}
.item-box:hover:after { transform: scaleX(1); }
.item-box:hover .item-img img { transform: scale(1.06); }
.item-box:hover .item-title { color: var(--sk-orange); }

@media (max-width: 991px) {
    .item-box .item-img { height: 190px; padding: 14px; }
}
@media (max-width: 767px) {
    .item-box .item-img { height: 170px; }
    .item-box .item-info { padding: 12px 10px; min-height: 54px; }
    .item-box .item-title { font-size: 13.5px; }
    .product-grid, .card-grid { row-gap: 18px; }

    /* one card per row on a phone: equal heights stop mattering and the
       stretch would only add empty space */
    .service-box > .icon-bx-wraper,
    .service-box.style3 > .icon-bx-wraper { height: auto; }
}

/* ---------- 6. Buttons, forms and tap targets ---------------------------- */
.site-button {
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.site-button:hover {
    background-color: var(--sk-orange-dark);
    box-shadow: 0 6px 18px rgba(255, 94, 20, .28);
    transform: translateY(-1px);
}

.form-control {
    border-color: var(--sk-line);
    border-radius: 3px;
    min-height: 46px;
    font-size: 15px;
}
.form-control:focus {
    border-color: var(--sk-orange);
    box-shadow: 0 0 0 3px rgba(255, 94, 20, .12);
}
textarea.form-control { min-height: 120px; }

.inquiry-form { border-radius: var(--sk-radius); box-shadow: var(--sk-shadow); }

/* ---------- 6b. Full-width enquiry strip --------------------------------
   The services enquiry form used to be a tall sidebar beside the cards,
   which pushed the card grid down to two columns and left the form itself
   scrolling past a page of white space. It now sits under the whole list at
   full width: the pitch on the left, a compact three-across field grid on
   the right, so it reads as one band rather than a second page. */

.inquiry-form.inquiry-wide {
    background: var(--sk-bg-soft);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-radius);
    padding: 30px 32px;
    box-shadow: none;
}
.inquiry-wide .title { font-size: 22px; }
.inquiry-wide p { color: var(--sk-muted); font-size: 14px; }
.inquiry-wide .form-group { margin-bottom: 12px; }
.inquiry-wide .form-control {
    background: #fff;
    min-height: 44px;
    padding: 8px 12px;
}
.inquiry-wide textarea.form-control { min-height: 44px; }
.inquiry-wide .input-group { border-bottom: 0; }
.inquiry-wide .site-button { padding: 12px 28px; }
.inquiry-wide .form-note {
    display: inline-block;
    margin-left: 14px;
    font-size: 12.5px;
    color: var(--sk-muted);
}

@media (max-width: 991px) {
    .inquiry-form.inquiry-wide { padding: 24px 20px; }
    .inquiry-wide .title { font-size: 20px; }
    /* the pitch reads first, then the fields */
    .inquiry-wide p { margin-bottom: 20px; }
}
@media (max-width: 767px) {
    .inquiry-form.inquiry-wide { padding: 20px 16px; }
    .inquiry-wide .form-note { display: block; margin: 10px 0 0; }
    .inquiry-wide .site-button { width: 100%; }
}

/* three across: the row edges line up whatever the list lengths inside them,
   and the gap between rows comes from the grid rather than from each card, so
   there is no trailing space under the last row */
.card-grid > .service-box { margin-bottom: 0; }
.card-grid > .service-box > .icon-bx-wraper { margin-bottom: 0; }

/* ---------- 7. Footer ---------------------------------------------------- */
.site-footer .footer-title { letter-spacing: .01em; }
.site-footer .list-2 li a { transition: color .2s ease, padding-left .2s ease; }
.site-footer .list-2 li a:hover { color: var(--sk-orange); padding-left: 4px; }

.ft-contact-bx { border-radius: var(--sk-radius); }
.ft-contact-bx p { line-height: 1.7; }
.ft-contact-bx a { color: inherit; }
.ft-contact-bx a:hover { color: var(--sk-orange); }

.footer-bottom { font-size: 13px; }

.site-footer.style1 .footer-bottom-in .footer-bottom-logo a {
    max-width: 100%;
    padding: 16px 0;
}
.site-footer.style1 .footer-bottom-in .footer-bottom-logo a img {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
}
@media (max-width: 767px) {
    .site-footer.style1 .footer-bottom-in .footer-bottom-logo a img { width: 230px; }
}

/* ---------- 8. Floating WhatsApp button ---------------------------------- */
/* Bottom-left put it straight over the hero's trust strip and, further down,
   over the first card of any left-aligned row. It moves to the right, above
   the scroll-to-top button, which is where a visitor expects to find it. */
.whapp {
    left: auto !important;
    right: 22px;
    bottom: 76px !important;
    z-index: 999;
}
.whapp .whapp-btn img { width: 56px; height: 56px; }
button.scroltop { z-index: 998; }

@media (max-width: 767px) {
    .whapp { right: 14px; bottom: 68px !important; }
}

/* ---------- 9. Accessibility --------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.site-button:focus-visible {
    outline: 3px solid rgba(255, 94, 20, .55);
    outline-offset: 2px;
}

.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: var(--sk-ink);
    color: #fff;
    padding: 12px 18px;
}
.skip-to-content:focus {
    left: 8px;
    top: 8px;
}

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

/* ---------- 10. Small-screen breakpoints --------------------------------- */

/* tablets and below */
@media (max-width: 991px) {
    .section-full.content-inner,
    .content-inner { padding-top: 45px; padding-bottom: 45px; }
    .content-inner-1 { padding-top: 45px; padding-bottom: 15px; }
    .content-inner-2 { padding-top: 45px; padding-bottom: 0; }

    .dlab-bnr-inr { height: 200px; }
    .dlab-bnr-inr .dlab-bnr-inr-entry h1 { font-size: 30px; }

    /* the menu panel is a sheet on tablet: give it breathing room */
    .header-nav .nav > li > a { padding: 12px 15px; }
}

/* phones */
@media (max-width: 767px) {
    body { font-size: 14.5px; }

    h1, .h1 { font-size: 27px; }
    h2, .h2 { font-size: 23px; }
    h3, .h3 { font-size: 19px; }
    h4, .h4 { font-size: 17px; }

    .section-full.content-inner,
    .content-inner { padding-top: 36px; padding-bottom: 36px; }
    .section-head { margin-bottom: 24px; }

    /* TOP BAR — was a single desktop row that ran off the screen, taking the
       email address and the quote button with it. */
    .top-bar { padding: 8px 0; }
    .top-bar .row { flex-direction: column; gap: 6px; }
    .top-bar .dlab-topbar-left,
    .top-bar .dlab-topbar-right { float: none; width: 100%; text-align: center; }
    .top-bar .dlab-topbar-left ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 0;
        padding-left: 0;
    }
    .top-bar .dlab-topbar-left ul li { font-size: 12.5px; }
    .top-bar .dlab-topbar-right .site-button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 11px 16px;
    }

    /* HEADER */
    .site-header .logo-header { width: 210px; }
    .main-bar .container { padding-left: 15px; padding-right: 15px; }

    /* BANNER */
    .dlab-bnr-inr { height: 170px; }
    .dlab-bnr-inr .dlab-bnr-inr-entry h1 { font-size: 24px; margin-bottom: 6px; }
    .breadcrumb-row ul li { font-size: 13px; }

    /* CARDS — full width, even spacing, nothing clipped */
    .icon-bx-wraper.bx-style-1 { padding: 24px 18px !important; }
    .icon-bx-wraper.seth { height: auto !important; min-height: 0; }
    .m-b30 { margin-bottom: 20px; }

    /* CONTENT */
    .our-story-thum { margin-top: 18px; }
    .our-story-thum img { height: auto !important; }

    /* COUNTERS — three across is unreadable on a phone */
    .counter-style-1 .counter,
    .icon-content .counter { font-size: 28px; }

    /* TESTIMONIALS */
    .testimonial-text p { font-size: 15px; }
    .testimonial-pic { width: 72px; height: 72px; }
    .testimonial-pic img { width: 72px; height: 72px; }

    /* FORMS — inputs and buttons big enough to hit with a thumb */
    .form-control { min-height: 48px; }
    .site-button { padding: 12px 20px; min-height: 46px; }
    .inquiry-form { padding: 22px 18px !important; }

    /* FOOTER */
    .dlab-newsletter .ft-contact { display: block; }
    .ft-contact-bx { width: 100%; margin-bottom: 16px; padding: 22px 18px; }
    .footer-top { padding-top: 34px; }
    .footer-top .widget { margin-bottom: 26px; }
    .footer-bottom-in { display: block; text-align: center; }
    .footer-bottom-logo { margin-bottom: 12px; }
    .footer-bottom-social ul { justify-content: center; display: flex; }

    /* WHATSAPP — smaller, and clear of the content and the footer form */
    .whapp .whapp-btn img { width: 46px; height: 46px; }
}

/* very small phones */
@media (max-width: 375px) {
    h1, .h1 { font-size: 24px; }
    h2, .h2 { font-size: 21px; }
    .dlab-bnr-inr { height: 155px; }
    .top-bar .dlab-topbar-left ul li { font-size: 12px; }
    .icon-bx-wraper.bx-style-1 { padding: 20px 14px !important; }
}

/* print — a quotation request or a spec page is often printed */
@media print {
    .top-bar, .site-header, .site-footer, .whapp,
    .dlab-bnr-inr, .inquiry-form, .dzSubscribe { display: none !important; }
    body { color: #000; font-size: 11pt; }
    a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   11. About and What We Offer — rebuilt sections
   ========================================================================== */

.sk-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sk-orange);
    margin-bottom: 10px;
}
.sk-lead-title { font-size: 30px; line-height: 1.25; margin: 0 0 16px; }

/* The lead photo is a 600x800 portrait. At full column width it stands far
   taller than the text beside it and pulls the row out of balance, so it is
   cropped to a landscape panel and capped -- the two halves of the row then
   carry the same visual weight whatever the source file happens to be. */
.sk-lead-media { position: relative; z-index: 0; }
.sk-lead-media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 420px;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    box-shadow: var(--sk-shadow-lift);
}
/* a thin rule offset behind the panel: the image reads as placed, not pasted */
.sk-lead-media:before {
    content: "";
    position: absolute;
    right: -14px;
    bottom: -14px;
    width: 62%;
    height: 62%;
    border: 2px solid rgba(255, 94, 20, .28);
    border-radius: 14px;
    z-index: -1;
}

/* ---------- alternating split rows ---------- */
/* Both split photos are 3:2; pinning the ratio keeps the two rows the same
   height even if either file is later replaced with a different crop. */
.sk-split-media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    box-shadow: var(--sk-shadow-lift);
}
.sk-split-title { font-size: 24px; margin: 0 0 14px; }
@media (min-width: 992px) {
    .sk-split-flip { flex-direction: row-reverse; }
    .sk-split-flip .sk-split-body { padding-right: 40px; }
    .sk-split:not(.sk-split-flip) .sk-split-body { padding-left: 40px; }
}
@media (max-width: 991px) {
    .sk-split-media { margin-bottom: 24px; }
    .sk-lead-media { margin-top: 26px; }
    .sk-lead-title { font-size: 25px; }
}

/* ---------- the About timeline ----------
   A spine down the middle with a marker per entry, image and text swapping
   sides as you descend. Below 992px the spine moves to the left edge and
   every entry stacks image-then-text, because a centred zigzag on a phone is
   just a column with wasted margins. */
.sk-timeline { position: relative; }
@media (min-width: 992px) {
    .sk-timeline:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 8px;
        bottom: 8px;
        width: 2px;
        margin-left: -1px;
        background: linear-gradient(180deg, rgba(255,94,20,.35), rgba(255,94,20,.12));
    }
    .sk-tl-item { position: relative; padding: 34px 0; }
    .sk-tl-item:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 15px;
        height: 15px;
        margin: -7px 0 0 -7px;
        border-radius: 50%;
        background: var(--sk-orange);
        border: 3px solid #fff;
        box-shadow: 0 0 0 2px rgba(255, 94, 20, .35);
        z-index: 2;
    }
    .sk-tl-flip .row { flex-direction: row-reverse; }
    /* keep Bootstrap's 15px gutter on the side nearest the container edge and
       add the clearance on the side nearest the spine -- zeroing the gutter
       pushes the text flush against the edge of the page */
    .sk-tl-item .sk-tl-body { padding-left: 46px; padding-right: 15px; }
    .sk-tl-flip .sk-tl-body { padding-left: 15px; padding-right: 46px; }
    .sk-tl-item .sk-tl-media { padding-left: 15px; padding-right: 46px; }
    .sk-tl-flip .sk-tl-media { padding-left: 46px; padding-right: 15px; }
}
.sk-tl-media img {
    width: 100%;
    border-radius: 10px;
    box-shadow: var(--sk-shadow-lift);
}
.sk-tl-media img.sk-tl-fit {
    display: block;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.sk-tl-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sk-orange);
    background: rgba(255, 94, 20, .09);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.sk-tl-title { font-size: 23px; line-height: 1.3; margin: 0 0 12px; }
.sk-tl-body p { margin-bottom: 12px; }

@media (max-width: 991px) {
    .sk-timeline:before {
        content: "";
        position: absolute;
        left: 7px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: rgba(255, 94, 20, .2);
    }
    .sk-tl-item { position: relative; padding: 0 0 34px 30px; }
    .sk-tl-item:before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--sk-orange);
        border: 3px solid #fff;
        box-shadow: 0 0 0 2px rgba(255, 94, 20, .3);
    }
    .sk-tl-media { margin-bottom: 18px; }
    .sk-tl-title { font-size: 20px; }
}

/* ---------- closing call to action ---------- */
.sk-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-left: 4px solid var(--sk-orange);
    border-radius: 8px;
    padding: 26px 30px;
}
.sk-cta h3 { font-size: 21px; }
.sk-cta p { color: var(--sk-muted); }
@media (max-width: 767px) {
    .sk-cta { padding: 22px 18px; }
    .sk-cta .site-button { width: 100%; text-align: center; }
    .sk-cta h3 { font-size: 18px; }
}

/* ==========================================================================
   12. Home page — three sections that were the same component three times
   --------------------------------------------------------------------------
   Products, testimonials and principals all ran the theme's owl carousel with
   identical settings (3s slide, 3s transition, arrows both sides), so the page
   read as one widget repeated down the screen. Each now has the treatment its
   content actually calls for:

     Products    a static three-card grid   — everything visible, indexable,
                                              no waiting for a slide
     Testimonials a single crossfading quote — the one thing here that IS a
                                              carousel, at reading pace
     Principals   a static logo wall         — a brand list is for scanning,
                                              not for scrolling past
   ========================================================================== */

/* ---------- Our Products: a browsable carousel with arrows ---------- */
/* Owl gives each slide its own height, so a card with less text sits short
   next to its neighbours. Stretching the stage makes every visible card the
   same height, which is what stops the row looking ragged as it moves. */
.sk-prod-carousel .owl-stage { display: flex; align-items: stretch; }
.sk-prod-carousel .owl-item { display: flex; }
.sk-prod-carousel .owl-item > .item { display: flex; width: 100%; }

.sk-prod-carousel .blog-post {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(18, 35, 52, .09);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(18, 35, 52, .09);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sk-prod-carousel .blog-post:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 50px rgba(18, 35, 52, .16);
    border-color: rgba(255, 94, 20, .28);
}
.sk-prod-carousel .dlab-post-media {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 10;
    background: #dfe5e9;
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* The markup wraps the image in a link: <div media><a><img></a></div>.
   An auto-height <a> makes height:100% on the image resolve to auto, so the
   image kept its own proportions and pushed out of the frame. Pinning the
   link to the box removes that dependence. */
.sk-prod-carousel .dlab-post-media > a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}
.sk-prod-carousel .dlab-post-media img {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: normal;
    transition: transform .55s cubic-bezier(.2, .65, .3, 1);
}
.sk-prod-carousel .dlab-post-media:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 28%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(8, 20, 31, .16));
}
.sk-prod-carousel .blog-post:hover .dlab-post-media img { transform: scale(1.045); }
.sk-prod-carousel .dlab-post-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 28px;
    border-top: 0;
}
.sk-prod-carousel .dlab-post-meta ul { margin: 0; padding: 0; list-style: none; }
.sk-prod-carousel .dlab-post-meta {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.sk-prod-carousel .dlab-post-meta:after { display: none; }
.sk-prod-carousel .dlab-post-meta h3 {
    font-size: 18px;
    line-height: 1.35;
    margin: 0 0 13px;
    letter-spacing: -.01em;
    color: var(--sk-ink);
}
.sk-prod-carousel .dlab-post-title { flex: 1 1 auto; }   /* pushes the button to the foot */
.sk-prod-carousel .dlab-post-title p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--sk-body);
    margin: 0 0 18px;
    /* three lines, then trail off: the cards are equal height anyway, and a
       tidy block of text reads as a deliberate grid rather than as whatever
       length each description happened to be */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sk-prod-carousel .dlab-post-readmore { margin-top: auto; padding-top: 8px; }
.sk-prod-carousel .dlab-post-readmore .site-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 7px 18px rgba(255, 94, 20, .2);
}
.sk-prod-carousel .dlab-post-readmore .site-button:after {
    content: "\2192";
    font-size: 17px;
    line-height: 1;
    transition: transform .2s ease;
}
.sk-prod-carousel .dlab-post-readmore .site-button:hover:after { transform: translateX(3px); }

/* ---------- Testimonials: one quote, centred, crossfading ---------- */
.sk-quotes { max-width: 860px; margin: 0 auto; }
.sk-quotes .testimonial-15 { text-align: center; padding: 0 10px; }
.sk-quotes .testimonial-text p {
    font-size: 19px;
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 26px;
}
.sk-quotes .testimonial-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    float: none;
}
.sk-quotes .testimonial-pic {
    width: 74px;
    height: 74px;
    border: 3px solid rgba(255, 255, 255, .25);
    float: none;
    margin: 0;
}
.sk-quotes .testimonial-pic img { width: 74px; height: 74px; object-fit: cover; }
.sk-quotes .testimonial-name {
    font-size: 15px;
    letter-spacing: .02em;
}
.sk-quotes .testimonial-name:after { content: none; }
/* the theme hid carousel arrows with an .owl-none class this one no longer
   carries; dots are the only control a quote needs */
.sk-quotes .owl-nav { display: none !important; }

/* .quote-left / .quote-right are Font Awesome glyphs this build does not have,
   so they rendered as empty squares. Use real quotation marks instead. */
.sk-quotes .testimonial-text.quote-left:before,
.sk-quotes .testimonial-text.quote-right:after { content: none; }
.sk-quotes .testimonial-text {
    position: relative;
    padding-top: 34px;
}
.sk-quotes .testimonial-text:before {
    content: "\201C";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 68px;
    line-height: 1;
    color: var(--sk-orange);
    opacity: .55;
}
/* the theme drew a 1px rule beside the avatar; there is no avatar now */
.sk-quotes .testimonial-15:after { content: none; }
.sk-quotes .testimonial-name { display: block; }
.sk-quotes .testimonial-name:before { content: "\2014\00a0"; opacity: .6; }

.sk-quotes .owl-dots { margin-top: 26px; text-align: center; }
.sk-quotes .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    background: rgba(255, 255, 255, .35);
    border-radius: 50%;
    display: block;
    margin: 0 5px;
    transition: background .2s ease, transform .2s ease;
}
.sk-quotes .owl-dots .owl-dot.active span,
.sk-quotes .owl-dots .owl-dot:hover span {
    background: var(--sk-orange);
    transform: scale(1.25);
}

/* ---------- Our Principals: a logo wall ---------- */
.sk-logo-wall { align-items: stretch; }
.sk-logo-wall > [class*="col-"] { margin-bottom: 20px; }
.sk-logo-wall .ow-client-logo,
.sk-logo-wall .client-logo {
    height: 100%;
    margin: 0;
}
.sk-logo-wall .client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 8px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sk-logo-wall .client-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .72;
    transition: filter .25s ease, opacity .25s ease;
}
.sk-logo-wall .client-logo:hover {
    border-color: rgba(255, 94, 20, .35);
    box-shadow: var(--sk-shadow);
    transform: translateY(-2px);
}
.sk-logo-wall .client-logo:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 767px) {
    .sk-prod-carousel .dlab-post-media { height: auto; aspect-ratio: 16 / 10; }
    .sk-prod-carousel .dlab-post-info { padding: 22px; }
    .sk-quotes .testimonial-text p { font-size: 16px; }
    .sk-logo-wall .client-logo { height: 74px; padding: 10px; }
}

/* ==========================================================================
   13. Typography — one family across the site
   --------------------------------------------------------------------------
   The theme mixed Poppins, Roboto, Roboto Condensed, Montserrat, Open Sans,
   Raleway, Playfair and Teko across its stylesheets, so the same page carried
   four or five different voices. Inter replaces all of them: neutral, made for
   interfaces and technical documents, and unambiguous at small sizes, which is
   what matters when the text is a part number.

   Icon fonts are re-asserted afterwards, because a blanket family rule turns
   every icon into a letter.
   ========================================================================== */

:root {
    --sk-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

html, body,
h1, h2, h3, h4, h5, h6,
.title, .dlab-tilte, .item-title, .footer-title, .testimonial-name,
p, li, a, label, small, strong, blockquote, td, th,
input, select, textarea, button,
.site-button, .form-control, .nav, .navbar-nav, .breadcrumb-row,
.section-head, .counter, .dlab-post-title, .dlab-post-meta {
    font-family: var(--sk-font);
}

/* Icon elements are deliberately NOT in the list above. This theme draws its
   icons with Font Awesome 5, themify and flaticon on <i> elements, and any
   family rule of ours -- even one naming Font Awesome -- overrides the
   weight/family pairing those fonts need and renders every icon as an empty
   box. Leaving them alone is the fix.

   That holds for an <i>, but an element can be BOTH a control and an icon: the
   newsletter submit is `class="site-button far fa-paper-plane"`. Font Awesome
   declares `.fa,.far,.fas{font-family:...}` at the same specificity as
   `.site-button` above, and this file loads last, so Inter won and the send
   glyph rendered as a box. Doubling the class raises specificity just enough to
   put the icon font back, and touches nothing that is not already an icon. */
.fa.fa, .fas.fas, .far.far, .fal.fal { font-family: "Font Awesome 5 Free"; }
.fab.fab                             { font-family: "Font Awesome 5 Brands"; }
.ti.ti, [class^="ti-"][class^="ti-"], [class*=" ti-"][class*=" ti-"] { font-family: themify; }
[class^="flaticon-"][class^="flaticon-"],
[class*=" flaticon-"][class*=" flaticon-"] { font-family: Flaticon; }

/* weights and tracking: headings carry the emphasis, body stays readable */
h1, h2, h3, h4, h5, h6, .title, .dlab-tilte { font-weight: 600; letter-spacing: -0.015em; }
.site-button, .btn { font-weight: 600; letter-spacing: .01em; }
body { font-weight: 400; }
.counter, .num, table td.num { font-variant-numeric: tabular-nums; }

/* arrows: outside the cards on desktop, over them on small screens, and
   never the theme's sitewide button styling */
.sk-prod-wrap { overflow-x: clip; padding: 0 2px; }
@supports not (overflow-x: clip) { .sk-prod-wrap { overflow-x: hidden; } }
.sk-prod-carousel {
    position: relative;
    /* the arrows overhang by 22px; nothing may escape the viewport because of
       it, and the hidden labels inside them count too */
    overflow: visible;
}

.sk-prod-carousel .owl-nav { margin: 0; }
.sk-prod-carousel .owl-nav .owl-prev,
.sk-prod-carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-ink) !important;
    font-size: 20px;
    line-height: 1;
    box-shadow: var(--sk-shadow);
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    z-index: 3;
}
.sk-prod-carousel .owl-nav .owl-prev { left: -22px; }
.sk-prod-carousel .owl-nav .owl-next { right: -22px; }
.sk-prod-carousel .owl-nav .owl-prev:hover,
.sk-prod-carousel .owl-nav .owl-next:hover {
    background: var(--sk-orange) !important;
    border-color: var(--sk-orange) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(255, 94, 20, .3);
}
.sk-prod-carousel .owl-nav .owl-prev span,
.sk-prod-carousel .owl-nav .owl-next span { display: inline; line-height: 0; font-size: 30px; position: relative; top: -2px; }
.sk-prod-carousel .owl-nav .sr-only {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 1199px) {
    .sk-prod-carousel .owl-nav .owl-prev { left: 4px; }
    .sk-prod-carousel .owl-nav .owl-next { right: 4px; }
}
@media (max-width: 575px) {
    .sk-prod-carousel .owl-nav .owl-prev,
    .sk-prod-carousel .owl-nav .owl-next { width: 40px; height: 40px; }
}

/* ---------- the carousel before (or without) JavaScript ----------
   Until owl adds .owl-loaded the items are plain block divs, so the section
   renders as a stack of full-width cards with uncropped images -- which is
   exactly what a visitor sees if the script is slow, cached stale, or blocked.
   Laying the raw items out as a row means the section is structured on the
   first paint and stays structured if the script never arrives. */
.sk-prod-carousel:not(.owl-loaded) {
    display: flex;
    gap: 26px;
    overflow: hidden;
}
.sk-prod-carousel:not(.owl-loaded) > .item {
    flex: 0 0 calc((100% - 52px) / 3);
    min-width: 0;
}
@media (max-width: 991px) {
    .sk-prod-carousel:not(.owl-loaded) > .item { flex-basis: calc((100% - 26px) / 2); }
}
@media (max-width: 575px) {
    .sk-prod-carousel:not(.owl-loaded) { gap: 0; }
    .sk-prod-carousel:not(.owl-loaded) > .item { flex-basis: 100%; }
}

/* same reasoning for the logo strip: without the animation it is still a row,
   never a column of full-width images */
.sk-logo-track { flex-wrap: nowrap; }

/* ---------- Our Principals: a continuous marquee ----------
   Logos read as a moving band rather than a slideshow, so nothing is hidden
   behind a "next" click. The track holds the list twice and translates by
   exactly half its width, which is what makes the loop seamless; hovering
   pauses it so a name can actually be read. */
.sk-logo-marquee {
    position: relative;
    overflow: hidden;
    padding: 6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sk-logo-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    animation: sk-marquee 42s linear infinite;
}
.sk-logo-marquee:hover .sk-logo-track,
.sk-logo-marquee:focus-within .sk-logo-track { animation-play-state: paused; }

.sk-logo-item {
    flex: 0 0 auto;
    width: 190px;
    height: 96px;
    margin-right: 18px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.sk-logo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .72;
    transition: filter .25s ease, opacity .25s ease;
}
.sk-logo-item:hover { border-color: rgba(255, 94, 20, .35); box-shadow: var(--sk-shadow); }
.sk-logo-item:hover img { filter: grayscale(0); opacity: 1; }

@keyframes sk-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .sk-logo-track { animation: none; }
    .sk-logo-marquee { overflow-x: auto; }
}
@media (max-width: 767px) {
    .sk-logo-item { width: 150px; height: 80px; margin-right: 12px; padding: 10px 12px; }
    .sk-logo-track { animation-duration: 30s; }
}

/* ==========================================================================
   14. Hero
   --------------------------------------------------------------------------
   Replaces a single-slide Revolution Slider whose caption layers were placed
   in absolute pixels -- which is why it never scaled properly below a
   desktop. The video is decoration: the headline, the promise and the two
   actions are ordinary flow content, so they are readable before the video
   loads, if it never loads, and at any width.
   ========================================================================== */

.sk-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(460px, 78vh, 720px);
    overflow: hidden;
    background: #0f1a24;          /* what shows while the video decodes */
    color: #fff;
}
/* The still is what paints first and what most visitors ever see; the video
   fades in over it only once it can actually play. */
.sk-hero-img,
.sk-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.sk-hero-video {
    z-index: 1;
    opacity: 0;
    transition: opacity .8s ease;
}
.sk-hero-video.is-ready { opacity: 1; }
/* Contrast is not optional over moving footage: the veil is what keeps the
   headline legible whatever frame is on screen. */
.sk-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg, rgba(9,16,23,.92) 0%, rgba(9,16,23,.72) 45%, rgba(9,16,23,.35) 100%),
        linear-gradient(180deg, rgba(9,16,23,.45) 0%, rgba(9,16,23,0) 35%, rgba(9,16,23,.55) 100%);
}
.sk-hero-inner {
    position: relative;
    z-index: 3;
    padding-top: 90px;
    padding-bottom: 110px;
    /* No max-width here: .sk-hero-inner is itself a .container, which carries
       Bootstrap's breakpoint caps. Capping it again here left the headline 165px
       further in than the logo above it and every section below it. The text
       block is held to a readable measure on its own elements instead. */
    text-align: left;
}
.sk-hero-title  { max-width: 20ch; }
.sk-hero-lead   { max-width: 58ch; }

.sk-hero-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sk-orange);
    margin: 0 0 16px;
}
.sk-hero-title {
    font-size: clamp(30px, 5vw, 56px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 18px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.sk-hero-title .sk-accent { color: var(--sk-orange); }   /* was "span": the line wrappers below are spans too */
.sk-hero-lead {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 30px;
}

.sk-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sk-hero-cta { padding: 15px 32px; font-size: 15px; }
.sk-hero-ghost {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 4px;
    border-bottom: 2px solid rgba(255, 255, 255, .35);
    transition: border-color .2s ease, color .2s ease;
}
.sk-hero-ghost:hover { color: var(--sk-orange); border-color: var(--sk-orange); }
.sk-hero-ghost span { display: inline-block; transition: transform .2s ease; }
.sk-hero-ghost:hover span { transform: translateX(4px); }

/* The strip answers what a buyer checks before picking up the phone:
   certified, authorised, which brands, and whether you service what you sell. */
.sk-hero-strip {
    position: relative;
    z-index: 3;
    margin-top: auto;
    background: rgba(9, 16, 23, .55);
    border-top: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.sk-hero-strip ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 46px;
    margin: 0;
    padding: 16px 0;
    list-style: none;
}
.sk-hero-strip li { display: flex; flex-direction: column; line-height: 1.35; }
.sk-hero-strip strong { font-size: 13.5px; font-weight: 600; color: #fff; }
.sk-hero-strip span { font-size: 12.5px; color: rgba(255, 255, 255, .68); }

@media (max-width: 991px) {
    .sk-hero { min-height: 500px; }
    .sk-hero-inner { padding-top: 70px; padding-bottom: 80px; }
    .sk-hero-veil {
        background: linear-gradient(180deg, rgba(9,16,23,.72) 0%, rgba(9,16,23,.62) 55%, rgba(9,16,23,.88) 100%);
    }
    .sk-hero-strip ul { gap: 10px 28px; }
}
@media (max-width: 767px) {
    .sk-hero { min-height: 440px; }
    .sk-hero-inner { padding-top: 54px; padding-bottom: 64px; }
    .sk-hero-lead { margin-bottom: 24px; }
    .sk-hero-actions { gap: 12px; }
    .sk-hero-cta { width: 100%; text-align: center; }
    .sk-hero-ghost { width: 100%; text-align: center; }
    .sk-hero-strip ul { gap: 10px 0; padding: 14px 0; }
    .sk-hero-strip li { flex: 0 0 50%; }
    .sk-hero-strip strong { font-size: 12.5px; }
    .sk-hero-strip span { font-size: 11.5px; }
}
/* A looping video is motion the visitor did not ask for. */
@media (prefers-reduced-motion: reduce) {
    /* the still is already in the markup, so there is nothing to substitute */
    .sk-hero-video { display: none; }
}

/* ==========================================================================
   14a. Hero entrance -- "measure, then control"
   --------------------------------------------------------------------------
   One choreography, themed on the headline rather than a stock fade:
     background   the still/video settle from a slow zoom; a sensor scan
                  line crosses once
     eyebrow      an orange tick draws, the letters tighten into focus
     headline     each line rises out of a mask; under "Control it
                  reliably." a signal trace oscillates and damps to flat
     lead         blur to sharp, a lens finding focus
     actions      the quotation button springs in and catches a sheen now
                  and then; the link follows
     strip        the four promises rise in turn, each with a status dot
   Only transform, opacity, filter and stroke-dashoffset animate, all in CSS,
   so the hero image (the LCP element) paints at once and nothing waits for
   JavaScript. prefers-reduced-motion shows the finished state instantly.
   ========================================================================== */

:root {
    --sk-ease-out: cubic-bezier(.16, 1, .3, 1);
    --sk-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- background: the slides themselves are section 14b ---- */

.sk-hero-scan {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 22%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,94,20,0) 0%, rgba(255,94,20,.10) 70%, rgba(255,150,90,.55) 98%, rgba(255,94,20,0) 100%);
    transform: translateX(-110%);
    animation: sk-scan 2.2s .25s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes sk-scan {
    0%   { transform: translateX(-110%); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(560%); opacity: 0; }
}

@keyframes sk-draw { to { stroke-dashoffset: 0; } }   /* the signal trace under the headline */

/* ---- eyebrow ---- */
.sk-hero-eyebrow { display: flex; align-items: center; gap: 12px; }
.sk-hero-eyebrow::before {
    content: "";
    flex: 0 0 28px;
    height: 2px;
    background: var(--sk-orange);
    transform: scaleX(0);
    transform-origin: left;
    animation: sk-grow .6s .2s var(--sk-ease-out) forwards;
}
.sk-hero-eyebrow { animation: sk-focus-track .9s .3s var(--sk-ease-out) both; }
@keyframes sk-grow { to { transform: scaleX(1); } }
@keyframes sk-focus-track {
    from { opacity: 0; letter-spacing: .42em; transform: translateX(-14px); }
    to   { opacity: 1; letter-spacing: .14em; transform: none; }
}

/* ---- headline ---- */
.sk-line {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .14em;          /* room for descenders inside the mask */
    margin-bottom: -.14em;
}
.sk-line-in {
    display: inline-block;
    position: relative;
    transform: translateY(110%);
    animation: sk-rise .95s var(--sk-ease-out) forwards;
}
.sk-line:nth-of-type(1) .sk-line-in { animation-delay: .45s; }
.sk-line:nth-of-type(2) .sk-line-in { animation-delay: .62s; }
@keyframes sk-rise { to { transform: translateY(0); } }

.sk-trace {
    position: absolute;
    left: 0;
    bottom: -.02em;
    width: 100%;
    height: .3em;
    overflow: visible;
}
.sk-trace polyline {
    fill: none;
    stroke: var(--sk-orange);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: .9;
    animation: sk-draw 1.6s 1.25s cubic-bezier(.45, 0, .2, 1) forwards;
}

/* ---- lead ---- */
.sk-hero-lead { animation: sk-lens 1.1s .95s var(--sk-ease-out) both; }
@keyframes sk-lens {
    from { opacity: 0; filter: blur(8px); transform: translateY(8px); }
    to   { opacity: 1; filter: blur(0);   transform: none; }
}

/* ---- actions ---- */
.sk-hero-cta {
    position: relative;
    overflow: hidden;
    animation: sk-spring .7s 1.25s var(--sk-ease-spring) both;
}
.sk-hero-cta::after {               /* the occasional sheen */
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 40%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-160%) skewX(-18deg);
    animation: sk-sheen 7s 2.6s ease-in-out infinite;
    pointer-events: none;
}
.sk-hero-ghost { animation: sk-slide-in .7s 1.4s var(--sk-ease-out) both; }
@keyframes sk-spring {
    from { opacity: 0; transform: translateY(14px) scale(.92); }
    to   { opacity: 1; transform: none; }
}
@keyframes sk-sheen {
    0%, 78% { transform: translateX(-160%) skewX(-18deg); }
    100%    { transform: translateX(360%)  skewX(-18deg); }
}
@keyframes sk-slide-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: none; }
}

/* ---- strip ---- */
.sk-hero-strip { animation: sk-fade-up .8s 1.35s var(--sk-ease-out) both; }
.sk-hero-strip li { position: relative; padding-left: 14px; opacity: 0; animation: sk-fade-up .7s var(--sk-ease-out) forwards; }
.sk-hero-strip li:nth-child(1) { animation-delay: 1.55s; }
.sk-hero-strip li:nth-child(2) { animation-delay: 1.70s; }
.sk-hero-strip li:nth-child(3) { animation-delay: 1.85s; }
.sk-hero-strip li:nth-child(4) { animation-delay: 2.00s; }
.sk-hero-strip li::before {          /* status dot */
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sk-orange);
    box-shadow: 0 0 0 0 rgba(255, 94, 20, .6);
    animation: sk-ping 1.2s 2.3s ease-out 1;
}
@keyframes sk-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@keyframes sk-ping {
    0%   { box-shadow: 0 0 0 0 rgba(255, 94, 20, .6); }
    100% { box-shadow: 0 0 0 9px rgba(255, 94, 20, 0); }
}

@media (max-width: 991px) {
    .sk-hero-scan  { width: 40%; }
}
@media (max-width: 767px) {
    .sk-hero-strip li { padding-left: 12px; }
}

/* Visitors who asked for less motion get the finished hero, instantly. */
@media (prefers-reduced-motion: reduce) {
    .sk-hero *,
    .sk-hero *::before,
    .sk-hero *::after,
    .sk-hero-img,
    .sk-hero-video { animation: none !important; transition: none !important; }
    .sk-hero-scan { display: none; }
    .sk-line-in, .sk-hero-strip li, .sk-hero-eyebrow, .sk-hero-lead, .sk-hero-cta, .sk-hero-ghost,
    .sk-hero-strip { opacity: 1; transform: none; filter: none; }
    .sk-hero-eyebrow::before { transform: none; }
    .sk-trace polyline { stroke-dashoffset: 0; }
}

/* ==========================================================================
   14b. Hero background slideshow
   --------------------------------------------------------------------------
   Four photographs behind the unchanged headline, each with its own way in
   and its own slow movement while it shows:
     settle   the plant (slide 1, the LCP image): a zoom that settles -- it
              is never hidden, so it cannot delay first paint
     fade     the plant again on later loops: cross-fade plus settle
     iris     the gauge panel: opens like a lens aperture out of the dials,
              then pushes in
     wipe     the field site: a slanted sweep from the left, then pans
     curtain  the refinery: parts from the centre, then drifts up
   Slide 1 is a <div> holding the plant still and the plant video, so the two
   move as one; slides 2-4 are plain images. The incoming slide is .is-active; the outgoing one becomes .is-prev and
   stays underneath until the entrance has finished. Both states list the
   same animations, so the outgoing slide keeps moving rather than jumping
   back to its first frame while it is still visible.
   ========================================================================== */

.sk-slide { visibility: hidden; z-index: 0; will-change: transform; }
div.sk-slide { position: absolute; inset: 0; overflow: hidden; }   /* slide 1: still + video inside */
.sk-slide.is-active { visibility: visible; z-index: 1; }
.sk-slide.is-prev   { visibility: visible; z-index: 0; }

.sk-slide[data-fx="settle"].is-active,
.sk-slide[data-fx="settle"].is-prev   { animation: sk-mv-settle 14s var(--sk-ease-out) both; transform-origin: 60% 50%; }

.sk-slide[data-fx="fade"].is-active,
.sk-slide[data-fx="fade"].is-prev     { animation: sk-in-fade 1.4s ease both, sk-mv-settle 9s var(--sk-ease-out) both; transform-origin: 60% 50%; }

.sk-slide[data-fx="iris"].is-active,
.sk-slide[data-fx="iris"].is-prev     { animation: sk-in-iris 1.5s cubic-bezier(.65, 0, .35, 1) both, sk-mv-push 9s ease-out both; transform-origin: 55% 40%; }

.sk-slide[data-fx="wipe"].is-active,
.sk-slide[data-fx="wipe"].is-prev     { animation: sk-in-wipe 1.3s cubic-bezier(.77, 0, .18, 1) both, sk-mv-pan 9s linear both; }

.sk-slide[data-fx="curtain"].is-active,
.sk-slide[data-fx="curtain"].is-prev  { animation: sk-in-curtain 1.4s cubic-bezier(.77, 0, .18, 1) both, sk-mv-drift 9s ease-out both; }

/* entrances */
@keyframes sk-in-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes sk-in-iris    { from { clip-path: circle(0% at 58% 42%); }  to { clip-path: circle(150% at 58% 42%); } }
@keyframes sk-in-wipe    { from { clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%); }
                           to   { clip-path: polygon(0 0, 125% 0, 100% 100%, 0 100%); } }
@keyframes sk-in-curtain { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
/* movement while showing */
@keyframes sk-mv-settle  { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes sk-mv-push    { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes sk-mv-pan     { from { transform: scale(1.1) translateX(-3%); } to { transform: scale(1.1) translateX(3%); } }
@keyframes sk-mv-drift   { from { transform: scale(1.14) translateY(2%); } to { transform: scale(1.04) translateY(-1%); } }

/* indicators -- hidden until the script turns the slideshow on */
.sk-hero-dots { display: none; gap: 8px; margin-top: 30px; }
.sk-hero.is-slider .sk-hero-dots { display: flex; }
.sk-hero-dots button {
    position: relative;
    width: 34px;
    height: 20px;                   /* tap target; the visible bar is the ::before */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.sk-hero-dots button::before,
.sk-hero-dots button::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
}
.sk-hero-dots button::before { background: rgba(255, 255, 255, .32); transition: background-color .2s ease; }
.sk-hero-dots button:hover::before { background: rgba(255, 255, 255, .6); }
.sk-hero-dots button::after  { background: var(--sk-orange); transform: scaleX(0); transform-origin: left; }
.sk-hero-dots button.is-active::after { animation: sk-dot-fill 6.5s linear forwards; }
.sk-hero-dots button:focus-visible { outline: 2px solid var(--sk-orange); outline-offset: 3px; border-radius: 2px; }
@keyframes sk-dot-fill { to { transform: scaleX(1); } }

@media (max-width: 767px) {
    .sk-hero-dots { margin-top: 22px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .sk-slide { animation: none !important; }
    .sk-slide ~ .sk-slide { display: none; }   /* the plant still alone */
    .sk-hero-dots { display: none !important; }
}

/* ==========================================================================
   15. What We Offer — the offering timeline
   --------------------------------------------------------------------------
   Six capability cards in a 3x2 grid said "brochure". The same six read as a
   process when they descend a single spine, so the page now runs as a vertical
   timeline: a rail down the centre, a numbered node per entry, and cards
   alternating left and right as you scroll.

   The rail is not a plain line. Two sine waves flow down it -- a signal moving
   through a loop, which is what this company sells -- drawn as one repeating
   SVG period tiled with background-repeat and animated by shifting
   background-position by exactly that period, so the loop is seamless at any
   height with no JS and no per-frame layout. A third, brighter wave is
   revealed from the top as you scroll, so the rail fills in behind you.

   Everything below 992px collapses to one column with the rail on the left: a
   centred zigzag on a phone is a narrow column with wasted margins.
   ========================================================================== */

.sk-flow { position: relative; }
.sk-flow-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}
/* the theme draws an orange dot before every <li> in a content block; neither
   the entries nor the spec pills inside them want one */
.sk-flow-list > li,
.sk-flow-points > li { list-style: none; }
.sk-flow-list > li:before,
.sk-flow-points > li:before,
.sk-flow-list > li:after,
.sk-flow-points > li:after { content: none; display: none; }

/* ---------- the rail ---------- */
.sk-flow-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46px;
    pointer-events: none;
    z-index: 1;
    /* the wave has to start and stop somewhere; fading it out reads better
       than a stroke that simply gets cut off at the first and last card */
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}
.sk-flow-rail:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--sk-line);
}
.sk-flow-wave,
.sk-flow-fill-in {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-repeat: repeat-y;
    background-position: center top;
}
.sk-flow-wave { bottom: 0; }

/* one period, 46 x 120, amplitude 12 -- the wide wave */
.sk-flow-wave-a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='120' viewBox='0 0 46 120'%3E%3Cpath d='M23 0 Q47 30 23 60 Q-1 90 23 120' fill='none' stroke='%23ff5e14' stroke-width='2' stroke-linecap='round' opacity='0.42'/%3E%3C/svg%3E");
    animation: sk-flow-run 7s linear infinite;
}
/* a narrower, slower wave running the other way gives the rail depth */
.sk-flow-wave-b {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='120' viewBox='0 0 46 120'%3E%3Cpath d='M23 0 Q35 30 23 60 Q11 90 23 120' fill='none' stroke='%2316212c' stroke-width='1.5' stroke-linecap='round' opacity='0.16'/%3E%3C/svg%3E");
    animation: sk-flow-run 13s linear infinite reverse;
}
@keyframes sk-flow-run {
    from { background-position: center 0; }
    to   { background-position: center 120px; }
}

/* the scroll fill: same wave, full strength, revealed from the top. Height is
   written by JS; with JS off it stays at 0 and the two waves above still run. */
.sk-flow-fill {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0;
    overflow: hidden;
    transition: height .18s linear;
}
.sk-flow-fill-in {
    height: 4000px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='120' viewBox='0 0 46 120'%3E%3Cpath d='M23 0 Q47 30 23 60 Q-1 90 23 120' fill='none' stroke='%23ff5e14' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    animation: sk-flow-run 7s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255, 94, 20, .45));
}

/* ---------- node ---------- */
.sk-flow-node {
    position: relative;
    z-index: 3;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--sk-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--sk-muted);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 6px var(--sk-node-halo, #f7f9fb);
    transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}
.sk-flow-item.is-on .sk-flow-node {
    background: var(--sk-orange);
    border-color: var(--sk-orange);
    color: #fff;
    transform: scale(1.06);
}

/* ---------- card ---------- */
.sk-flow-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 14px;
    padding: 26px 28px;
    box-shadow: 0 10px 30px rgba(16, 33, 48, .06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sk-flow-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sk-shadow-lift);
    border-color: rgba(255, 94, 20, .3);
}
/* icon and tag sit on one line, so the card opens with a compact header
   rather than three stacked scraps */
.sk-flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 94, 20, .1);
    color: var(--sk-orange);
    font-size: 18px;
    margin: 0 10px 0 0;
}
.sk-flow-card .sk-tl-tag { vertical-align: middle; margin: 0; }
.sk-flow-title { font-size: 19px; line-height: 1.3; margin: 16px 0 10px; }
.sk-flow-card > p { margin: 0; font-size: 14.5px; }
.sk-flow-points {
    list-style: none;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--sk-line);
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.sk-flow-points li {
    font-size: 12px;
    font-weight: 500;
    color: var(--sk-body);
    background: var(--sk-bg-soft);
    border: 1px solid var(--sk-line);
    border-radius: 20px;
    padding: 4px 11px;
}

/* ---------- two columns around the rail ---------- */
@media (min-width: 992px) {
    .sk-flow-rail { left: 50%; margin-left: -23px; }
    .sk-flow-item {
        display: grid;
        grid-template-columns: 1fr 108px 1fr;
        align-items: center;
        padding: 20px 0;
    }
    .sk-flow-card { grid-column: 1; grid-row: 1; }
    .sk-flow-node { grid-column: 2; grid-row: 1; justify-self: center; }
    .sk-flow-item:nth-child(even) .sk-flow-card { grid-column: 3; }

    /* the short arm that ties a card to its node */
    .sk-flow-card:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 27px;
        height: 2px;
        background: var(--sk-line);
        transition: background .3s ease;
    }
    .sk-flow-item .sk-flow-card:after { left: 100%; }
    .sk-flow-item:nth-child(even) .sk-flow-card:after { left: auto; right: 100%; }
    .sk-flow-item.is-on .sk-flow-card:after { background: rgba(255, 94, 20, .55); }

    /* The card alternates sides; the text does not. A ragged left edge on a
       four-line technical paragraph is harder to read than it is decorative,
       so every card stays left-aligned and the alternation does the work. */
}

/* ---------- one column, rail on the left ---------- */
@media (max-width: 991px) {
    .sk-flow-rail { left: 0; }
    .sk-flow-item {
        position: relative;
        padding: 0 0 26px 74px;
    }
    .sk-flow-node { position: absolute; left: 0; top: 4px; }
    .sk-flow-card { padding: 22px 20px; }
    .sk-flow-title { font-size: 17.5px; }
}
@media (max-width: 575px) {
    .sk-flow-rail { width: 34px; }
    .sk-flow-wave-a,
    .sk-flow-wave-b,
    .sk-flow-fill-in { background-size: 34px 120px; }
    .sk-flow-item { padding-left: 56px; }
    .sk-flow-node { width: 44px; height: 44px; font-size: 12.5px; box-shadow: 0 0 0 5px var(--sk-node-halo, #f7f9fb); }
}

/* ---------- reveal on scroll (only when the script is running) ---------- */
.sk-js .sk-flow-item .sk-flow-card,
.sk-js .sk-flow-item .sk-flow-node {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s ease, transform .55s ease;
}
.sk-js .sk-flow-item.is-in .sk-flow-card,
.sk-js .sk-flow-item.is-in .sk-flow-node {
    opacity: 1;
    transform: none;
}
.sk-js .sk-flow-item.is-in.is-on .sk-flow-node { transform: scale(1.06); }

/* Motion the visitor did not ask for: hold the waves still, show everything. */
@media (prefers-reduced-motion: reduce) {
    .sk-flow-wave-a,
    .sk-flow-wave-b,
    .sk-flow-fill-in { animation: none; }
    .sk-flow-fill { transition: none; }
    .sk-js .sk-flow-item .sk-flow-card,
    .sk-js .sk-flow-item .sk-flow-node { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   16. Contact — details column, enquiry card, map band
   --------------------------------------------------------------------------
   The page was four identical bordered boxes in a row, a grey panel holding
   placeholder-only inputs, and a raw 600x450 iframe that ignored the column it
   sat in. What replaces it: the ways of reaching us as a readable list on the
   left, the form as one elevated card on the right, and the map as a full
   width band with its own heading and a directions button.

   Every input has a real <label>. Placeholder-only forms lose the question the
   moment you start typing, which is exactly when a visitor filling in six
   fields needs it.
   ========================================================================== */

.sk-contact-intro { font-size: 15.5px; margin-bottom: 30px; }

.sk-contact-list { list-style: none; margin: 0; padding: 0; }
.sk-contact-list > li { list-style: none; }
.sk-contact-list > li:before,
.sk-contact-list > li:after { content: none; display: none; }

.sk-contact-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--sk-line);
}
.sk-contact-row:first-child { border-top: 0; padding-top: 0; }
.sk-contact-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 94, 20, .1);
    color: var(--sk-orange);
    font-size: 17px;
}
.sk-contact-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sk-muted);
    margin: 3px 0 6px;
}
.sk-contact-row p { margin: 0; font-size: 15px; color: var(--sk-ink); line-height: 1.6; }
.sk-contact-row a { color: var(--sk-ink); }
.sk-contact-row a:hover { color: var(--sk-orange); }
.sk-contact-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sk-orange) !important;
}
.sk-contact-link span { display: inline-block; transition: transform .2s ease; }
.sk-contact-link:hover span { transform: translateX(4px); }

/* ---------- the enquiry card ---------- */
.sk-form-card {
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(16, 33, 48, .1);
    padding: 34px 34px 30px;
}
.sk-form-title { font-size: 24px; margin: 0 0 6px; }
.sk-form-sub { font-size: 14px; color: var(--sk-muted); margin: 0 0 22px; }
.sk-req { color: var(--sk-orange); }

.sk-field { margin-bottom: 18px; }
.sk-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sk-ink);
    margin-bottom: 7px;
}
.sk-field input,
.sk-field select,
.sk-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    font-size: 15px;
    color: var(--sk-ink);
    background: var(--sk-bg-soft);
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sk-field textarea { min-height: 130px; resize: vertical; }
.sk-field select {
    /* the browser's own arrow sits badly on a 10px radius; draw one instead */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a5560' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 38px;
}
.sk-field input:focus,
.sk-field select:focus,
.sk-field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--sk-orange);
    box-shadow: 0 0 0 3px rgba(255, 94, 20, .16);
}
.sk-field .is-bad {
    border-color: #d64530;
    background: #fdf5f4;
}
.sk-field .is-bad:focus { box-shadow: 0 0 0 3px rgba(214, 69, 48, .16); }
.sk-err {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #c23c28;
    min-height: 0;
}
.sk-err:empty { display: none; }

/* The honeypot must be reachable by a bot parsing the HTML and invisible to
   everyone else. display:none is the one thing that will not do -- the better
   bots skip hidden fields. */
.sk-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sk-form-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.sk-form-send {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
}
.sk-form-send[disabled] { opacity: .65; cursor: progress; }
.sk-form-send.is-busy i { animation: sk-send-pulse 1s ease-in-out infinite; }
@keyframes sk-send-pulse {
    50% { transform: translateX(4px); opacity: .5; }
}
.sk-form-note {
    flex: 1 1 220px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sk-muted);
}
.sk-form-note i { color: var(--sk-orange); margin-right: 5px; }

.sk-alert {
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 14.5px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.sk-alert-ok  { background: #eaf7ef; border-color: #bfe5cd; color: #1d6b3c; }
.sk-alert-bad { background: #fdf1ef; border-color: #f3ccc5; color: #a8341f; }

/* ---------- map band ---------- */
.sk-map-band { background: var(--sk-bg-soft); padding: 56px 0 0; }
.sk-map-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.sk-map-title { font-size: 26px; margin: 0; }
.sk-map-cta { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 8px; }
.sk-map-frame {
    position: relative;
    height: 420px;
    /* the embed ships with width/height attributes; the frame decides, not it */
    filter: saturate(.9);
}
.sk-map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 991px) {
    .sk-contact-aside { margin-bottom: 38px; }
    .sk-form-card { padding: 26px 22px 24px; }
    .sk-map-frame { height: 340px; }
}
@media (max-width: 575px) {
    .sk-form-card { padding: 22px 18px 20px; border-radius: 14px; }
    .sk-form-title { font-size: 21px; }
    .sk-form-send { width: 100%; justify-content: center; }
    .sk-map-title { font-size: 21px; }
    .sk-map-cta { width: 100%; justify-content: center; }
    .sk-map-frame { height: 280px; }
}

/* ==========================================================================
   17. FAQ — the block answer engines quote
   --------------------------------------------------------------------------
   <details> rather than a scripted accordion: it opens and closes with no
   JavaScript, it is keyboard operable and announced correctly by a screen
   reader for free, and its text is in the DOM whether open or shut, which is
   what a crawler reads.
   ========================================================================== */

.sk-faq { max-width: 860px; margin: 0 auto; }
.sk-faq-item {
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sk-faq-item[open] {
    border-color: rgba(255, 94, 20, .3);
    box-shadow: 0 8px 24px rgba(16, 33, 48, .06);
}
.sk-faq-q {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--sk-ink);
    cursor: pointer;
    list-style: none;
}
.sk-faq-q::-webkit-details-marker { display: none; }
.sk-faq-q:before {
    content: "+";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 7px;
    background: rgba(255, 94, 20, .1);
    color: var(--sk-orange);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    transition: transform .2s ease, background .2s ease;
}
.sk-faq-item[open] .sk-faq-q:before {
    content: "\2212";               /* a true minus, not a hyphen */
    background: var(--sk-orange);
    color: #fff;
}
.sk-faq-q:hover { color: var(--sk-orange); }
.sk-faq-a { padding: 0 22px 20px 60px; }
.sk-faq-a p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--sk-body); }

@media (max-width: 575px) {
    .sk-faq-q { padding: 15px 16px; font-size: 15.5px; }
    .sk-faq-a { padding: 0 16px 17px 16px; }
}

/* ==========================================================================
   18. Reserving space for the carousels
   --------------------------------------------------------------------------
   Owl ships `.owl-carousel { display: none }` and only reveals a carousel once
   it has initialised, so until then it occupies no height at all and
   everything below it sits too high. The theme hid that behind a full-screen
   white preloader removed on window.load -- which meant nothing was visible
   until the last image and all 500 KB of script had arrived. Removing the
   preloader is what fixed first paint; without something here it would simply
   trade that for a layout shift.

   So the box is given roughly the height it settles at, and its contents stay
   hidden until Owl has laid them out. Heights are measured, not guessed.

   Scoped to .sk-js: with no script there is no Owl to fill the space, and an
   empty reserved gap would be worse than the collapsed box.
   ========================================================================== */

.sk-js .owl-carousel:not(.owl-loaded) {
    display: block;
    overflow: hidden;
}
.sk-js .owl-carousel:not(.owl-loaded) > * { visibility: hidden; }

@media (min-width: 992px) {
    .sk-js .about-ser-carousel:not(.owl-loaded) { min-height: 568px; }
    .sk-js .sk-prod-carousel:not(.owl-loaded)   { min-height: 525px; }
    .sk-js .sk-quotes:not(.owl-loaded)          { min-height: 273px; }
}
@media (max-width: 991px) {
    .sk-js .about-ser-carousel:not(.owl-loaded) { min-height: 523px; }
    .sk-js .sk-prod-carousel:not(.owl-loaded)   { min-height: 592px; }
    .sk-js .sk-quotes:not(.owl-loaded)          { min-height: 316px; }
}

/* Bootstrap 5 renamed .sr-only to .visually-hidden, and this theme is on
   Bootstrap 5 -- so a label marked .sr-only would simply be visible. Defined
   here rather than renamed in the markup, because the theme's own CSS still
   uses .sr-only in places. */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Catalogue, product selection and service enquiries. */
.sk-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sk-skip-link { position:fixed; top:8px; left:8px; transform:translateY(-160%); z-index:100000; padding:12px 20px; background:#16212c; color:#fff; }
.sk-skip-link:focus { transform:none; color:#fff; }
.sk-catalog-intro { max-width:850px; font-size:18px; }
.sk-category-links { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.sk-category-links a { padding:10px 16px; border:1px solid #c8d1d9; border-radius:5px; color:#263849; background:#fff; }
.sk-category-links a[aria-current="page"] { background:#16212c; border-color:#16212c; color:#fff; }
.sk-catalog-search { padding:20px; background:#f3f6f8; border-radius:6px; margin-bottom:24px; }
.sk-catalog-search label { display:block; font-weight:600; margin-bottom:8px; }
.sk-catalog-search > div { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.sk-catalog-search input { flex:1 1 280px; min-width:0; padding:12px; border:1px solid #a6b4c0; border-radius:4px; background:#fff; }
.sk-product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.sk-product-card { border:1px solid #dce3e8; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; background:#fff; }
.sk-product-card > a { display:block; background:#f8fafb; }
.sk-product-card img { display:block; width:100%; height:220px !important; object-fit:contain; padding:20px; }
.sk-product-copy { padding:20px; display:flex; flex-direction:column; flex:1; }
.sk-product-category { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#526475; font-weight:600; margin-bottom:8px; }
.sk-product-card h2 { font-size:18px; line-height:1.45; margin:0 0 18px; }
.sk-product-card h2 a { color:#16212c; }
.sk-product-quote { margin-top:auto; color:#a63c08; font-weight:600; padding:8px 0; }
.sk-product-breadcrumb { margin-bottom:28px; }
.sk-product-detail h1 { font-size:36px; line-height:1.25; }
.sk-detail-image { width:100%; height:420px !important; object-fit:contain; background:#f6f8fa; border-radius:8px; padding:30px; margin-bottom:28px; }
.sk-product-note { margin-top:18px; }
.sk-selection { padding:28px; border:1px solid #dce3e8; border-radius:8px; margin-top:32px; background:#f8fafb; }
.sk-selection h2 { font-size:24px; }
.sk-selection li { margin-bottom:8px; }
.sk-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.sk-service-card { padding:28px; border:1px solid #dce3e8; border-radius:8px; display:flex; flex-direction:column; scroll-margin-top:120px; }
.sk-service-card h3 { font-size:24px; }
.sk-service-card h4 { font-size:16px; margin:10px 0; }
.sk-service-card a { margin-top:auto; color:#a63c08; font-weight:600; }
.sk-catalog-empty { padding:32px; background:#f8fafb; }
#quik-search-remove { border:0; background:transparent; color:inherit; min-width:44px; min-height:44px; position:absolute; right:16px; top:50%; transform:translateY(-50%); }
#header-product-search { padding-right:70px; }
#f-attachment { max-width:100%; padding:10px; height:auto; }
#attachment-help { font-size:13px; margin-top:6px; }
#main-content:focus { outline:none; }
.sk-catalog a:focus-visible, .sk-product-detail a:focus-visible, .sk-services a:focus-visible { outline:3px solid #1568a8; outline-offset:4px; }
@media (max-width:991px) { .sk-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575px) {
    .sk-product-grid, .sk-service-grid { grid-template-columns:1fr; gap:18px; }
    .sk-catalog-search input { flex-basis:100%; }
    .sk-catalog-search .site-button { width:100%; }
    .sk-service-card, .sk-selection { padding:20px; }
    .sk-product-detail h1 { font-size:28px; }
    .sk-detail-image { height:280px !important; }
}
#enquiry, #website-enquiries { scroll-margin-top:100px; }
@media (max-width:575px) {
    /* Keep the file picker and send button clear of floating controls. */
    .sk-contact-page .whapp, .sk-contact-page .scroltop { display:none !important; }
    #enquiry { scroll-margin-top:65px; }
}