/* ==========================================================================
   Ifmira overrides — layered on top of the Oilix template's custom.css.
   Keep this file small: prefer the template's own classes wherever possible.
   ========================================================================== */

:root {
    /* Template accent replaced with the orange of Ifmira's helmet mark. */
    --main-color: #fe6918;
    /*
     | The accent reads at 6:1 against the dark primary but only 2.6:1 against the
     | light section background, so it cannot be used for small text there. This is
     | the same hue darkened until it clears 4.5:1 on the light grounds.
     */
    --main-color-ink: #a33c00;
    --ifmira-navy: #0b2545;
}

/* --------------------------------------------------------------------------
   Section eyebrow
   --------------------------------------------------------------------------
   The template sets the eyebrow in the accent colour on a 20% tint of its own
   golden yellow — 1.85:1 with the old accent and 2.43:1 with this one, both
   short of AA for 16px text. The tint now follows the brand and the text is the
   darkened accent. On dark sections the eyebrow carries `.text-white`, which
   already passes, so it is left alone.
   -------------------------------------------------------------------------- */
.sis-section-title .sisf-subtitle,
.sis-section-title .sisf-m-subtitle {
    background: rgba(254, 105, 24, .16);
    border-color: rgba(254, 105, 24, .24);
}

.sis-section-title .sisf-subtitle:not(.text-white),
.sis-section-title .sisf-m-subtitle:not(.text-white) {
    color: var(--main-color-ink);
}

/* --------------------------------------------------------------------------
   Logo
   --------------------------------------------------------------------------
   Ifmira's lockup, sized by height so the header keeps its 44px logo block.
   The wordmark and the bar chart are near-black, so on the dark footer the
   lockup sits on a white plate instead of being recoloured.
   -------------------------------------------------------------------------- */
.sis-logo {
    display: inline-flex;
    align-items: center;
}

/* The template sizes header logos by width (`auto`, then 150px and 125px as the
   viewport narrows), which renders this lockup at its full 528px. Sizing by
   height instead keeps it in the header's 44px block, so the rule has to carry
   the template's own specificity to win. */
.sis-logo img,
.sisf-header-logo-link.navbar-brand .sis-logo img {
    display: block;
    width: auto;
    height: 2.75rem;
}

.sis-logo--on-dark {
    background: var(--white-color);
    border-radius: 8px;
    padding: .5rem .75rem;
}

@media only screen and (max-width: 575px) {
    .sis-logo img,
    .sisf-header-logo-link.navbar-brand .sis-logo img {
        height: 2.25rem;
    }
}

/* Same reasoning as the footer: the preloader sits on the dark primary colour,
   so the mark needs a light disc under it or half the artwork disappears. */
.sis-preloader .sis-loading-icon figure {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0;
    background: var(--white-color);
    border-radius: 50%;
}

.sis-preloader .sis-brand-mark {
    display: block;
    width: auto;
    height: 1.75rem;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

/* Read but not seen. script.js puts the original wording back this way after
   SplitText has taken a heading apart: an aria-label would have done for the
   h1s and h2s but is prohibited on the eyebrow, which is a bare span. */
.sis-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sis-skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 3000;
    padding: .75rem 1.25rem;
    background: var(--main-color);
    color: var(--primary-color);
    font-weight: 700;
    border-radius: 4px;
}

.sis-skip-link:focus {
    top: 1rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--main-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Banner lead paragraph
   -------------------------------------------------------------------------- */
.sisf-banner-lead {
    max-width: 46rem;
    margin-inline: auto;
    opacity: .88;
}

/* --------------------------------------------------------------------------
   Project cards
   -------------------------------------------------------------------------- */
/*
 | The card's own surface. It was --secondary-color, which is the exact colour
 | of the section it sits on: above the image the card had an edge, below it the
 | text simply floated on the page. White gives it a surface, and the hairline
 | closes the shape where the photograph stops -- the same way .sis-form-panel
 | is built elsewhere on these light grounds.
 */
.sis-project-item .sisf-e-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white-color);
    border: 1px solid rgba(26, 26, 26, .08);
    overflow: hidden;
    /* Enough to lift the card off the page without reading as a drop shadow;
       the hover does the announcing. */
    box-shadow: 0 1px 2px rgba(26, 26, 26, .05);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.sis-project-item:hover .sisf-e-inner {
    transform: translateY(-4px);
    border-color: rgba(26, 26, 26, .14);
    box-shadow: 0 18px 40px rgba(26, 26, 26, .12);
}

.sis-project-client {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--main-color-ink);
}

.sis-project-title {
    font-size: 1.125rem;
    line-height: 1.4;
    margin-bottom: .625rem;
}

.sis-project-title a {
    color: var(--primary-color);
}

.sis-project-title a:hover {
    color: var(--main-color-ink);
}

.sis-project-summary {
    font-size: .9375rem;
    margin-bottom: 1rem;
}

.sis-project-meta {
    padding-top: .875rem;
    border-top: 1px solid rgba(26, 26, 26, .1);
    font-size: .8125rem;
    color: var(--text-color);
}

/* --------------------------------------------------------------------------
   Data tables (equipment register, capability facts)
   -------------------------------------------------------------------------- */
.sis-data-table {
    width: 100%;
    background: var(--white-color);
}

.sis-data-table thead th {
    background: var(--primary-color);
    color: var(--white-color);
    font-family: var(--heading-font);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .875rem 1rem;
    white-space: nowrap;
}

.sis-data-table tbody td,
.sis-data-table tbody th {
    padding: .8125rem 1rem;
    border-bottom: 1px solid rgba(26, 26, 26, .08);
    vertical-align: middle;
    font-weight: 500;
}

.sis-data-table tbody tr:nth-child(even) {
    background: var(--secondary-color);
}

.sis-fact-table th {
    width: 40%;
    color: var(--text-color);
    font-weight: 600;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Checklists
   -------------------------------------------------------------------------- */
.sis-checklist {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.sis-checklist li {
    position: relative;
    padding-left: 1.875rem;
    margin-bottom: .75rem;
}

.sis-checklist li::before {
    content: "\f00c";
    /* The template ships Font Awesome 7; "6" silently fell back to a
       missing-glyph box. Both are listed so a version bump cannot break it. */
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    font-size: .8125rem;
    color: var(--main-color-ink);
}

.sis-checklist.light li,
.sis-checklist.light li a {
    color: rgba(255, 255, 255, .85);
}

/* On a dark ground the accent itself clears the 3:1 required of a glyph. */
.sis-checklist.light li::before {
    color: var(--main-color);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.sis-form-panel {
    background: var(--white-color);
    border-top: 4px solid var(--main-color);
    padding: clamp(1.5rem, 1.25rem + 1vw, 2.5rem);
    box-shadow: 0 12px 36px rgba(26, 26, 26, .08);
}

.sis-form-panel .form-label {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .9375rem;
    color: var(--primary-color);
    margin-bottom: .375rem;
}

.sis-form-panel .form-control,
.sis-form-panel .form-select {
    border: 1px solid rgba(26, 26, 26, .18);
    border-radius: 4px;
    padding: .75rem 1rem;
    background: var(--white-color);
    color: var(--primary-color);
    height: auto;
}

.sis-form-panel .form-control:focus,
.sis-form-panel .form-select:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 .1875rem rgba(254, 105, 24, .25);
}

/* The template's --error-color, rgb(230,87,87), is 3.58:1 on the white form
   panel and Bootstrap's .invalid-feedback red is 3.94:1 — both short of AA for
   text this size. Darkened to 6.5:1 while staying the same red. */
.required-mark,
.sis-form-panel .invalid-feedback {
    color: #b3261e;
}

.required-mark {
    margin-left: .125rem;
}

/* Honeypot: off-screen rather than display:none so naive bots still fill it. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sis-contact-panel {
    background: var(--primary-color);
    color: rgba(255, 255, 255, .82);
    padding: clamp(1.5rem, 1.25rem + 1vw, 2.5rem);
    height: 100%;
}

/* Contact page only: "Send a message" sizes to its fields and finished 37px
   short of "Head office" beside it, which fills its column already. Filling
   the column squares the two boxes off. Scoped to the section because the
   same panel is stacked with sibling panels in the asides elsewhere, where
   filling the column would stretch whichever one came last. */
.sis-contact-section .sis-form-panel {
    height: 100%;
}

.sis-contact-panel h2,
.sis-contact-panel h3 {
    color: var(--white-color);
}

/* Buttons keep their own palette — otherwise the amber button gets white text. */
.sis-contact-panel a:not(.sis-btn-default) {
    color: var(--white-color);
}

.sis-contact-panel a:not(.sis-btn-default):hover {
    color: var(--main-color);
}

/* A second block inside the contact panel. The rule above it is the preceding
   row's own bottom border, so the divider sits tight under that row's text like
   every other one in the panel rather than floating between the two blocks. */
.sis-panel-section {
    margin-top: 2.5rem;
}

/* The panel's height is its content's, not the row's, so the 20px the heading
   drops by is taken back off the list's own spacing and the box stays level
   with the form beside it. */
.sis-panel-section .sis-checklist li {
    margin-bottom: .5rem;
}

.sis-contact-row {
    display: flex;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.sis-contact-row:last-child {
    border-bottom: 0;
}

.sis-contact-row .sis-contact-label {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--main-color);
    margin-bottom: .25rem;
}

.sis-contact-row i {
    color: var(--main-color);
    margin-top: .25rem;
}

/* --------------------------------------------------------------------------
   WhatsApp floating button
   -------------------------------------------------------------------------- */
.sis-whatsapp-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
}

.sis-whatsapp-float:hover {
    color: #fff;
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.sis-badge-pill {
    display: inline-block;
    padding: .375rem .875rem;
    margin: 0 .375rem .5rem 0;
    background: var(--secondary-color);
    border: 1px solid rgba(26, 26, 26, .12);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--primary-color);
}

.sis-note {
    padding: 1.25rem;
    border-left: 3px solid var(--main-color);
    background: var(--secondary-color);
}

.sis-vacancy-card {
    background: var(--white-color);
    border: 1px solid rgba(26, 26, 26, .1);
    border-left: 3px solid var(--main-color);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}

.sis-download-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--white-color);
    border: 1px solid rgba(26, 26, 26, .1);
    margin-bottom: .875rem;
}

.sis-download-row .sis-download-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    background: var(--secondary-color);
    color: var(--main-color-ink);
    font-size: 1.125rem;
}

.sis-legal-body h2 {
    font-size: 1.375rem;
    margin-top: 2rem;
}

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

@media print {
    header, footer, .sis-scroll-band, .sis-whatsapp-float, .sis-preloader { display: none !important; }
}

/* --------------------------------------------------------------------------
   Navigation — Ifmira has more top-level items than the template ships with,
   so keep labels on one line and tighten spacing on mid-size desktops.
   -------------------------------------------------------------------------- */
.sis-main-menu .navbar-nav > li > .nav-link {
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1399px) {
    .sis-main-menu .navbar-nav > li > .nav-link {
        padding-left: .55rem;
        padding-right: .55rem;
        font-size: .9375rem;
    }

    .sisf-centered-header-wrapper .header-btn .sis-btn-default {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* --------------------------------------------------------------------------
   Panel contrast fix

   `.sisf-sis-comman-drop-bg` is rgba(255,255,255,.1) — a translucent WHITE
   panel the template only ever places on dark sections. Where we use it on a
   light section (Corporate facts, policy lists, client cards…) it renders
   almost white, and the white text inside becomes unreadable.

   Give it a solid dark surface whenever it sits on a light background, so the
   white text it carries keeps its contrast.
   -------------------------------------------------------------------------- */
.sis-comman-background .sisf-sis-comman-drop-bg,
.sis-secondary-background .sisf-sis-comman-drop-bg,
body > main .section:not(.sis-primary-background) .sisf-sis-comman-drop-bg {
    background-color: var(--primary-color);
}

/* Muted text inside those panels needs lifting off near-black too. */
.sis-comman-background .sisf-sis-comman-drop-bg .text-white-50,
body > main .section:not(.sis-primary-background) .sisf-sis-comman-drop-bg .text-white-50 {
    color: rgba(255, 255, 255, .78) !important;
}

.sisf-sis-comman-drop-bg .sis-fact-table th,
.sisf-sis-comman-drop-bg .table > :not(caption) > * > * {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .16);
}

/* --------------------------------------------------------------------------
   Top bar — #666 body text on the amber bar is only 2.8:1.
   -------------------------------------------------------------------------- */
.sis-header-top,
.sis-header-top a,
.sis-header-top .sisf-e-title-text {
    color: var(--primary-color);
}

.sis-header-top a:hover {
    color: var(--white-color);
}

/* --------------------------------------------------------------------------
   Amber label on light surfaces is only 1.85:1 — readable as an accent, not as
   text. Darken it on light backgrounds; keep the bright amber on dark panels.
   -------------------------------------------------------------------------- */
.sis-project-client {
    color: #8a5200;
}

.sisf-sis-comman-drop-bg .sis-project-client,
.sis-primary-background .sis-project-client,
.sis-contact-panel .sis-project-client,
.sis-hero .sis-project-client {
    color: var(--main-color);
}

/* --------------------------------------------------------------------------
   Project gallery — square thumbnails so mixed portrait/landscape site photos
   sit on a tidy grid; the lightbox shows each frame uncropped.
   -------------------------------------------------------------------------- */
.sis-gallery-item a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: var(--primary-color);
}

.sis-gallery-item figure {
    margin: 0;
    aspect-ratio: 4 / 3;
}

.sis-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.sis-gallery-item a::after {
    content: "\f00e";
    /* The template ships Font Awesome 7; "6" silently fell back to a
       missing-glyph box. Both are listed so a version bump cannot break it. */
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--white-color);
    background: rgba(26, 26, 26, .45);
    opacity: 0;
    transition: opacity .3s ease;
}

.sis-gallery-item a:hover img,
.sis-gallery-item a:focus-visible img {
    transform: scale(1.06);
}

.sis-gallery-item a:hover::after,
.sis-gallery-item a:focus-visible::after {
    opacity: 1;
}

/* Magnific Popup sits above the sticky header. */
.mfp-bg, .mfp-wrap {
    z-index: 2000;
}

/* --------------------------------------------------------------------------
   Lead project image — the profile photographs are a mix of portrait and
   landscape, so frame them consistently instead of letting a portrait shot
   run a thousand pixels tall.
   -------------------------------------------------------------------------- */
.sis-project-detail-image figure {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
}

.sis-project-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Page banner

   The template positions `.sisf-page-title` absolutely inside a box whose
   height comes from the banner photograph. Ifmira's project titles are far
   longer than the template's ("Loading Bay and Associated Piping — Civil Base
   Construction"), so on narrow screens the text outgrew the photo and the
   overflowing lines landed as white text on the white section below.

   Let the content set the height, cover the area with the photograph, and keep
   a dark surface behind it so text always has something to sit on.
   -------------------------------------------------------------------------- */
.sisf-banner {
    position: relative;
    background-color: var(--primary-color);
    overflow: hidden;
}

.sisf-banner .banner-img {
    position: absolute;
    inset: 0;
}

.sisf-banner .banner-img figure {
    height: 100%;
    margin: 0;
}

.sisf-banner .banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sisf-banner .sisf-page-title {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    padding-block: clamp(2.75rem, 2rem + 5vw, 5.5rem);
}

/* Long titles must wrap rather than run under the sticky header. */
.sisf-banner .sisf-m-title {
    overflow-wrap: break-word;
}

.sisf-banner .sisf-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Projects with no photography of their own show this rather than a stock photo. */
/* --------------------------------------------------------------------------
   Scrolling marquee band

   Sits between the page content and the footer, replacing the old CTA band.
   `.sis-footer-content` carries a -45px margin that only makes sense nested in
   the footer's own spacing, so it is neutralised here and the band sets its
   own padding instead.
   -------------------------------------------------------------------------- */
.sis-scroll-band {
    overflow: hidden;
    padding-block: clamp(.5rem, .25rem + .75vw, 1rem);
}

.sis-scroll-band .sis-footer-content {
    margin-top: 0;
}

.sis-scroll-band .sis-footer-content span {
    font-size: clamp(3.5rem, 2rem + 9vw, 11.25rem);
    /* At 1.05 the glyph box overflowed its line box by ~18px each side and
       swallowed the band's padding, so the lettering sat flush against both
       edges. 1.3 contains the glyphs, letting the padding show evenly. */
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Hero slide without a quote card
   --------------------------------------------------------------------------
   The slide carries 70px of bottom padding and the copy another 40px, both of
   which hold the quote card clear of the foot. Centring a slide that has no
   card leaves those two as dead weight below the copy — 281px under it against
   171px above — so they come off and the copy sits true.
   -------------------------------------------------------------------------- */
.hero-slider-layout .hero-slide.sis-hero-slide--centred {
    padding-bottom: 0;
}

/* Matching the template's own selector depth — it sets this padding from
   `.sis-hero.hero-slider .hero-slider-layout .hero-slide .hero-content`. */
.sis-hero.hero-slider .hero-slider-layout .hero-slide.sis-hero-slide--centred .hero-content {
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Hero quote card
   --------------------------------------------------------------------------
   The template's testimonial treatment: stars above the quote and the author's
   portrait beside their name. The star and portrait rules it ships are scoped to
   the testimonial page, so the two the card needs are restated here.
   -------------------------------------------------------------------------- */
.sisf-hero-bottom .sisf-m-star .star {
    font-size: calc(var(--sis-hero-type) * .8);
    letter-spacing: .1em;
}

/* Unearned stars stay visible but recede, so a 4 of 5 reads as four rather than
   as four with two missing. */
.sisf-hero-bottom .sisf-m-star .sis-star-empty {
    color: rgba(255, 255, 255, .3);
}

/* The card is the template's frosted glass -- rgba(255,255,255,.1) over a blur
   of whatever photograph is behind it (custom.css:1584). White text survives
   that on any photo; the accent colour did not, measuring 1.51:1 against the
   slide's own ground. Seating the glass on 65% of the primary dark takes the
   author's name to 3.06:1, past AA for text that size, and leaves the card
   reading as glass rather than as a solid panel. The white veil stays on top,
   so the blur and the lit edge are untouched. */
.sisf-hero-bottom .sis-bottom-contents .sisf-e-inner {
    background:
        linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)),
        rgba(26, 26, 26, .65);

    /*
     | Everything in the card is sized from these four, so the whole thing
     | scales together instead of a phone getting desktop type in a narrow box.
     | Each runs from its value at a 375px viewport to its value at 1440px and
     | holds outside that range. The template's own type is fixed -- 20px on
     | .sis-comman-title, 16px on the stars -- which is what made the card
     | crowd once it narrowed.
     */
    --sis-hero-gutter: clamp(.875rem, .7rem + .75vw, 1.375rem);      /* 14 -> 22px, the sides */
    --sis-hero-gap: clamp(.625rem, .493rem + .56vw, 1rem);           /* 10 -> 16px, the rhythm */
    --sis-hero-avatar: clamp(3rem, 2.05rem + 4.06vw, 5.703rem);      /* 48 -> 91px, the portrait */
    --sis-hero-type: clamp(.9375rem, .8275rem + .47vw, 1.25rem);     /* 15 -> 20px, quote and name */

    /* A half gap at the top, the gutter at the sides, and a full gap at the
       foot -- so the portrait sits the same distance above the card's edge as
       it does below the rule. Tightened from the template's even 32px. */
    padding: calc(var(--sis-hero-gap) / 2) var(--sis-hero-gutter) var(--sis-hero-gap);
}

/* The template fixes the quotation and the author's name at 20px/30px and the
   role at 16px, so neither followed the card down. Both take the fluid size,
   with the leading as a ratio so it follows too. */
.sisf-hero-bottom .sis-bottom-contents .sis-hero-quote,
.sisf-hero-bottom .sis-bottom-contents .sisf-e-author .sisf-e-author-name {
    font-size: var(--sis-hero-type);
    line-height: 1.5;
}

.sisf-hero-bottom .sis-bottom-contents .sisf-e-author .sisf-e-author-job {
    font-size: calc(var(--sis-hero-type) * .8);
}

/* Bootstrap's `gap-4` was a flat 24px between the portrait and the name, and
   !important with it; the fluid gutter takes its place. */
.sisf-hero-bottom .sis-bottom-contents .sisf-bottom--content {
    gap: var(--sis-hero-gutter);
}

/*
 | The card's width, and a departure from the template.
 |
 | The template sizes it as a percentage of its column and steps that up as the
 | screen narrows: 50%, then 70% under 1200px, then 100% under 768px
 | (custom.css:1584, 7089, 8514). But the column stops constraining below 992px
 | -- col-lg-9 goes full width -- so the two changes compound and the card gets
 | *wider* as the screen gets smaller: 575px at a 1440px viewport, 624px at
 | 921px.
 |
 | A fluid length instead, so the width only ever falls with the viewport: 576px
 | from 1440px up, down to 352px at 375px, and never past the column it sits in.
 | Widening the card is a separate change from the padding beside it -- this is
 | all border-box, so padding eats into the width rather than adding to it.
 */
.sisf-hero-bottom .sis-bottom-contents .sisf-e-inner {
    width: min(100%, clamp(22rem, 17.07rem + 21.03vw, 36rem));
}

/* The rating's own gap above the quotation, halved from the 24px `mb-4` gave
   it; and the gap between the rule under the quotation and the portrait below,
   halved from the 32px the author block's `mt-3` and `pt-3` gave it. Those
   three utilities came off the markup rather than being overridden here --
   Bootstrap writes them !important, so overriding would have meant matching it. */
.sisf-hero-bottom .sis-bottom-contents .sisf-ratings {
    margin-bottom: calc(var(--sis-hero-gap) * .75);
}

.sisf-hero-bottom .sis-bottom-contents .sisf-bottom-quote-with-content {
    margin-top: calc(var(--sis-hero-gap) / 2);
    padding-top: calc(var(--sis-hero-gap) / 2);
}

/* 91px at full size -- 3.25rem originally, then the 35% and the 30% it grew
   by -- scaling down to 48px on a phone. */
.sisf-hero-bottom .sisf-e-media-image {
    flex: 0 0 auto;
    width: var(--sis-hero-avatar);
}

.sisf-hero-bottom .sisf-e-media-image img,
.sisf-hero-bottom .sis-avatar-fallback {
    display: block;
    width: var(--sis-hero-avatar);
    height: var(--sis-hero-avatar);
    border-radius: 50%;
    object-fit: cover;
}

/* The stand-in for a missing portrait: the same circle, carrying a person
   glyph on a lift of the card's own white veil. Muted rather than accented,
   so it reads as an empty slot and never competes with the author's name.

   The glyph is drawn to 85% of the circle. Font Awesome draws on a 512-unit em
   square and fa-user spans the full height of it -- measured on the canvas, its
   ink is exactly 1em tall -- so the font size is the 85% with nothing added. */
.sisf-hero-bottom .sis-avatar-fallback {
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .55);
    font-size: calc(var(--sis-hero-avatar) * .85);
    line-height: 1;
}

/* The author's name carries the company colour; their role stays white, so the
   two lines separate without a second weight or size. */
.sisf-hero-bottom .sisf-e-author .sisf-e-author-name {
    color: var(--main-color);
}

/* Quotation marks, set as marks rather than as punctuation: smaller than the
   quotation, in the accent colour, the opening one lifted to the cap line and
   the closing one dropped to the baseline so the text between them reads as
   the line and they read as the frame. They sit inside the heading so they
   flow with the text and never strand on a line of their own. */
/* The marks are set the way the "How We Works" card sets its figure
   (custom.css:2762): large, and a gradient clipped to the glyph so it fades out
   downwards. Font Awesome draws into ::before, so the clip goes there -- the
   same place the capacity card's step icons take it.

   The template's gradient is black at a tenth, written for a white card. This
   card is dark, so the light-on-dark equivalent carries it; the geometry --
   180deg, full stop to transparent at 97.3% -- is the template's own. Black
   here would be invisible: 0.03 of a step against the seated glass.

   line-height: 0 keeps the enlarged glyph out of the line box, so the quotation
   keeps the leading it had at the old size. */
.sisf-hero-bottom .sis-hero-quote i {
    font-size: 1.9em;
    line-height: 0;
}

.sisf-hero-bottom .sis-hero-quote i::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 97.3%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

/* Past 140 characters the quotation scrolls rather than growing the card; the
   blade adds this class and the tabindex that lets a keyboard reach the scroll
   area. Four lines is what a 140-character quotation occupies at the card's own
   width, so a shorter one never shows a scrollbar. The rule under the quotation
   is this element's own bottom border, so it stays put while the text moves.
   Scrollbar styling follows the service and project cards. */
.sisf-hero-bottom .sis-hero-quote--scroll {
    max-height: calc(4 * 1.5em);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

.sisf-hero-bottom .sis-hero-quote--scroll:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 4px;
}

.sisf-hero-bottom .sis-hero-quote--scroll::-webkit-scrollbar {
    width: 6px;
}

.sisf-hero-bottom .sis-hero-quote--scroll::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: rgba(255, 255, 255, .28);
}

/* Lifted to sit against the cap line of the first word, the way an opening
   mark is set. */
.sisf-hero-bottom .sis-hero-quote i.fa-quote-left {
    margin-right: .2em;
    vertical-align: -.12em;
}

/* And dropped towards the baseline, so the pair frames the quotation rather
   than floating above it. */
.sisf-hero-bottom .sis-hero-quote i.fa-quote-right {
    margin-left: .16em;
    vertical-align: -.3em;
}

/* --------------------------------------------------------------------------
   Button size
   --------------------------------------------------------------------------
   The template steps the button's text and its left padding down as the screen
   narrows (custom.css:6823, 6904, 7060, 7192, 8204) but never touches the arrow
   tile, which is a flat 40px square. The tile is what sets the button's height,
   so a button was 48px tall on a 375px phone exactly as on a 1440px desktop --
   the text shrank inside a box that did not.

   One fluid ramp for all four measurements instead, each running from its value
   at a 375px viewport to its value at 1440px, so the whole button scales
   together and the steps disappear. Applies to every button on the site,
   including any added later.
   -------------------------------------------------------------------------- */
.sis-btn-default {
    font-size: clamp(.8125rem, .746rem + .28vw, 1rem);        /* 13 -> 16px */
    padding-left: clamp(.875rem, .655rem + .94vw, 1.5rem);    /* 14 -> 24px */
    gap: clamp(.375rem, .287rem + .38vw, .625rem);            /*  6 -> 10px */
}

.sis-btn-default i {
    width: clamp(2rem, 1.824rem + .75vw, 2.5rem);             /* 32 -> 40px */
    height: clamp(2rem, 1.824rem + .75vw, 2.5rem);
    /* The template writes this one !important under 1200px (custom.css:7064),
       which no amount of specificity outranks. */
    font-size: clamp(.6875rem, .6rem + .38vw, .9375rem) !important;   /* 11 -> 15px */
}

/* --------------------------------------------------------------------------
   Button corners (Settings → Appearance)
   --------------------------------------------------------------------------
   Version 1.1 is the template's `sisf-e-radius` applied site-wide: 12px on the
   button and on its arrow tile, which is all that class does (custom.css:852).
   Restated here rather than added to each button so the switch is one setting.
   Buttons only — the cards, fields and chips keep their own corners.
   -------------------------------------------------------------------------- */
.sis-buttons-radius .sis-btn-default,
.sis-buttons-radius .sis-btn-default i {
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Owned capacity cards
   --------------------------------------------------------------------------
   The template's "How We Works" card, reused for the equipment categories: the
   panel, border, radius, padding, hover and faded figure all come from
   custom.css. Only what differs is set here — three quarters of the template's
   1 / 1.4 height, and a scrolling list where it has a single line of prose.
   -------------------------------------------------------------------------- */
.sis-capacity-card .sisf-e-inner {
    aspect-ratio: 1 / 1.05;
    height: 100%;
}

.sis-capacity-card .sisf-e-contents {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The template's icon is an SVG; Font Awesome is already loaded, so a glyph
   serves and needs no new asset. It carries the figure's own treatment — the
   template's grey fading out downwards, clipped to the character — so the two
   read as one family. Applied to the pseudo-element, which is where Font
   Awesome puts the glyph. */
.sis-capacity-card .sisf-step-icons {
    font-size: 2rem;
    line-height: 1;
}

.sis-capacity-card .sisf-step-icons i::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(26, 26, 26, 0) 97.3%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 15px/24px is what the project card's summary uses — the closest thing to this
   on the site. The list was set at 14px, smaller than any other body copy. */
.sis-capacity-list {
    margin: 0;
    padding-left: 1.15rem;
    min-height: 0;
    overflow-y: auto;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-color);
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 26, 26, .3) transparent;
}

.sis-capacity-list li::marker {
    color: var(--main-color);
}

/* The figure is left entirely to the template: 100px, right-aligned at the foot
   of the card, with a grey gradient clipped to the text so it fades out
   downwards. Nothing overrides it here. */

/* More of the same grey once the card lights up — the gradient darkened rather
   than swapped, so the fade survives the hover. */
.sis-capacity-card:hover .sisf-step-icons i::before,
.sis-capacity-card:hover .sisf-sis-count p {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .32) 0%, rgba(26, 26, 26, 0) 97.3%);
}

.sis-capacity-card:hover .sis-capacity-list li::marker {
    color: var(--white-color);
}

.sis-capacity-list li + li {
    margin-top: .35rem;
}

.sis-capacity-list::-webkit-scrollbar {
    width: 6px;
}

.sis-capacity-list::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: rgba(26, 26, 26, .25);
}

.sis-capacity-list:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}

/* The card turns the accent colour on hover, where the list's muted grey falls
   to 1.98:1. The primary reads at 6:1 on it. */
.sis-capacity-card:hover .sis-capacity-list {
    color: var(--primary-color);
    scrollbar-color: rgba(26, 26, 26, .45) transparent;
}

.sis-capacity-card:hover .sis-capacity-list::-webkit-scrollbar-thumb {
    background: rgba(26, 26, 26, .4);
}

/* --------------------------------------------------------------------------
   Uniform card media, pinned titles and scrolling summaries
   --------------------------------------------------------------------------
   Service photographs arrived at mixed ratios (16:9 and 4:3) and one project
   photograph is portrait, so the cards in a row ran to different heights — 411
   to 489 for the services, 575 against 830 for the projects. Every card's
   picture is now cropped to the same 16:9 box, and the summary scrolls in a
   fixed space beneath a title that stays put, so copy length cannot stretch a
   row either. The placeholder that stands in for a missing photograph takes the
   same ratio, so a card without one is still the same size.
   -------------------------------------------------------------------------- */
.sisf-sis-e-service-list,
.sis-project-item {
    height: 100%;
}

.sisf-sis-e-service-list > .sisf-e-inner,
.sis-project-item > .sisf-e-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sisf-sis-e-service-list .sisf-service-icon-image img,
.sis-project-item .sis-project-image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


.sisf-sis-e-service-list .sisf-e-content,
.sis-project-item .sis-project-body {
    flex: 1 1 auto;
    min-height: 0;
}

.sisf-sis-e-service-list .sisf-sis-e-title {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sis-project-item .sis-project-body {
    display: flex;
    flex-direction: column;
}

/* The scrolling half. A max-height rather than flex-grow, so one wordy card
   cannot pull the whole row taller. Set above what today's summaries need —
   the longest wants 97px — so the scrollbar appears only for copy that is
   genuinely too long, not on every card. */
.sisf-sis-e-service-list .sis-m-text,
.sis-project-item .sis-project-summary {
    max-height: 6.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.sisf-sis-e-service-list .sis-m-text {
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

.sis-project-item .sis-project-summary {
    scrollbar-color: rgba(26, 26, 26, .3) transparent;
}

.sisf-sis-e-service-list .sis-m-text:focus-visible,
.sis-project-item .sis-project-summary:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 4px;
}

.sisf-sis-e-service-list .sis-m-text::-webkit-scrollbar,
.sis-project-item .sis-project-summary::-webkit-scrollbar {
    width: 6px;
}

.sisf-sis-e-service-list .sis-m-text::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: rgba(255, 255, 255, .28);
}

.sis-project-item .sis-project-summary::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: rgba(26, 26, 26, .25);
}

/* The meta row stays at the foot of the card whatever the summary does. */
.sis-project-item .sis-project-meta {
    margin-top: auto;
}

/* Titles run to one line or two depending on the service, which left the rows
   30px apart. Holding two lines' worth squares the grid up — the two blocks
   differ because their line-heights do: 30px on 20px against 1.4 on 18px. */
.sisf-sis-e-service-list .sisf-e-title {
    min-height: 3em;
}

.sis-project-item .sis-project-title {
    min-height: 2.8em;
}

/* --------------------------------------------------------------------------
   One-stop solution cards
   --------------------------------------------------------------------------
   Photograph left, copy right, on the panel background. The card holds one
   height from md up and the summary scrolls inside it, so a long service
   description cannot stretch the row — hence no `h-100`, whose `!important`
   would override that height.
   -------------------------------------------------------------------------- */
.sis-solution-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* The lift and timing of the project cards on the home page. Their shadow is
       rgba(26,26,26,.12), which is invisible on this dark band, so the same
       shape is thrown in black instead. */
    transition: transform .3s ease, box-shadow .3s ease;
}

.sis-solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.sis-solution-card-media {
    margin: 0;
    overflow: hidden;
}

.sis-solution-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sis-solution-card-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    padding: 1.5rem;
}

.sis-solution-card-title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.35;
}

.sis-solution-card-title a {
    color: var(--white-color);
}

.sis-solution-card-title a:hover {
    color: var(--main-color);
}

.sis-solution-card-text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    color: rgba(255, 255, 255, .66);
    font-size: .9375rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

.sis-solution-card-text:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 4px;
}

.sis-solution-card-text::-webkit-scrollbar {
    width: 6px;
}

.sis-solution-card-text::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: rgba(255, 255, 255, .28);
}

.sis-solution-card-text::-webkit-scrollbar-track {
    background: transparent;
}

@media only screen and (min-width: 768px) {
    .sis-solution-card {
        flex-direction: row;
        height: 11rem;
    }

    .sis-solution-card-media {
        flex: 0 0 36%;
    }

    .sis-solution-card-media img {
        aspect-ratio: auto;
    }
}

/* --------------------------------------------------------------------------
   Hero slider pagination
   --------------------------------------------------------------------------
   Swiper's own markup sits in the flow at the foot of the slider, in its default
   blue, so the dots read as a strip tacked underneath the picture. Lifting them
   onto the slide and giving the active one a pill keeps the hero to a single
   block and follows the brand. Only the bullets take pointer events, so the
   surrounding strip does not swallow clicks on the slide behind it.
   -------------------------------------------------------------------------- */
.home-slider .hero-pagination {
    position: absolute;
    right: 0;
    bottom: clamp(1.25rem, .5rem + 1.5vw, 2.25rem);
    left: 0;
    z-index: 5;
    display: flex;
    gap: .5rem;
    justify-content: center;
    pointer-events: none;
}

.home-slider .hero-pagination .swiper-pagination-bullet {
    width: .5rem;
    height: .5rem;
    margin: 0;
    border-radius: 100px;
    background: rgba(255, 255, 255, .45);
    opacity: 1;
    pointer-events: auto;
    transition: width .35s ease, background-color .35s ease;
}

.home-slider .hero-pagination .swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, .75);
}

.home-slider .hero-pagination .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--white-color);
    outline-offset: 3px;
}

.home-slider .hero-pagination .swiper-pagination-bullet-active {
    width: 2.25rem;
    background: var(--main-color);
}

@media (prefers-reduced-motion: reduce) {
    .home-slider .hero-pagination .swiper-pagination-bullet {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Video lightbox size
   --------------------------------------------------------------------------
   Magnific Popup caps its iframe content at 900px, which left the video filling
   only about 70% of a 1280px screen. `mfp-fade` is the video popup's own
   mainClass -- the project galleries use `mfp-with-zoom` -- so widening it here
   leaves the image lightbox alone. The height cap stops a 16:9 video running off
   a short screen, where 90% of the width is taller than the viewport.
   -------------------------------------------------------------------------- */
.mfp-wrap.mfp-fade .mfp-content {
    /* Capping the video's height instead would squash it: the script sets its
       width inline, so a height limit shortens the box without narrowing it.
       Sizing the container to whichever bound is reached first keeps the frame
       true -- 90% of the width, unless the screen is too short for that. */
    width: min(90vw, calc(88vh * 16 / 9));
    max-width: 90vw;
}

.mfp-wrap.mfp-fade .mfp-content video {
    display: block;
    margin-inline: auto;
    /* Letterbox rather than distort, should a future video not be 16:9. */
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   Corporate facts video
   --------------------------------------------------------------------------
   The template's own play button and spinning ring, from home2-video.html, laid
   over a looping clip. The template positions that button for a full-width hero
   (`top: 36%; left: 52%`), so inside a panel it needs re-centring; everything
   else — the ring's 15s rotation, the button's pulsing borders — is the
   template's.
   -------------------------------------------------------------------------- */
.sis-facts-video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, .35);
}

.sis-facts-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sis-facts-video .sis-e-icon--spin {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.sis-facts-video .sis-e-icon--spin figure {
    margin: 0;
    grid-area: 1 / 1;
}

.sis-facts-video .spin-img {
    width: 7.5rem;
    height: auto;
}

.sis-facts-video .sis-video-play-button.sisf-m-play-inner {
    /* Overriding the hero's off-centre placement, not restyling the button. */
    position: static;
    grid-area: 1 / 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   Home page counters
   --------------------------------------------------------------------------
   `.sis-estimate.sis-counter-item` pads 30px on the left to clear its divider
   and nothing on the right, so centring the contents still left every figure
   15px right of its cell's middle. Balancing the padding finishes the job.
   -------------------------------------------------------------------------- */
.sis-about-bottom-counter .sis-counter-item.sis-estimate {
    padding-right: 30px;
}

/* --------------------------------------------------------------------------
   Sticky header
   --------------------------------------------------------------------------
   Applied by assets/js/ifmira.js once the bar would have scrolled off. The
   template's own `.sis-header-sticky` rules are dead — nothing applies the
   class, and their selector does not match this header — and they would force a
   dark background, which would hide both the dark nav text and the logo's
   wordmark. This keeps the bar's own colour and adds a shadow so it reads as
   floating above the page.
   -------------------------------------------------------------------------- */
#sisf-page-header-inner.sis-header-stuck {
    /* The bar carries Bootstrap's .position-relative, whose `!important` would
       otherwise win, and custom.css:857 gives it `height: 100%` — harmless in
       the flow, but once fixed that resolves against the viewport and the bar
       became 800px tall with its contents centred in the middle of the screen. */
    position: fixed !important;
    height: auto;
    top: 0;
    /* The bar itself is transparent in the flow — the cream comes from an
       ancestor, which a fixed element leaves behind. */
    background: var(--secondary-color);
    right: 0;
    left: 0;
    z-index: 1030;
    box-shadow: 0 6px 24px rgba(26, 26, 26, .16);
    animation: sis-header-drop .25s ease-out;
}

@keyframes sis-header-drop {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sisf-page-header-inner.sis-header-stuck {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Responsive menu position
   --------------------------------------------------------------------------
   The template drops the menu from a hard-coded `top: 70px` plus a 10px margin,
   which left a 14px gap below the pinned bar — and overlapped it at the top of
   the page, where the bar sits lower because the contact strip is still above
   it. assets/js/ifmira.js publishes the bar's real bottom edge instead.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
    .slicknav_menu {
        top: var(--sis-header-bottom, 70px);
        margin-top: 0;
    }

    body.mobile-menu-open .slicknav_nav {
        height: calc(100vh - var(--sis-header-bottom, 70px));
    }
}

/* --------------------------------------------------------------------------
   Active item in the responsive menu
   --------------------------------------------------------------------------
   The template styles the active link under `.sis-main-menu`, which is the
   desktop menu only — SlickNav's clone carries the class but nothing renders
   it. The accent reads at 6:1 on the menu's dark ground.
   -------------------------------------------------------------------------- */
.slicknav_nav .nav-link.active {
    color: var(--main-color);
}

/* --------------------------------------------------------------------------
   Request Quote in the responsive menu
   --------------------------------------------------------------------------
   custom.css hides `.sisf-centered-header-wrapper` below 1025px and the header
   CTA sits inside it, so the primary call to action was absent on every tablet
   and phone. The item is sourced from `#menu2` (see partials/header) and carries
   the same `.sis-btn-default` as the header button, so only what SlickNav forces
   onto every menu link is overridden here.
   -------------------------------------------------------------------------- */
.slicknav_nav .sis-menu-cta {
    border-bottom: 0 !important;
    padding: 1rem 15px .5rem;
}

/* slicknav.min.css sets `display: block`, white text and 10px/15px padding on
   every `.slicknav_nav li a`, which would flatten the button and stretch it
   across the full width of the row. */
.slicknav_nav .sis-menu-cta > a.sis-btn-default,
.slicknav_nav .sis-menu-cta > a.sis-btn-default:hover,
.slicknav_nav .sis-menu-cta > a.sis-btn-default:focus {
    display: inline-flex;
    width: auto;
    padding: 3px 3px 3px 24px;
}

.slicknav_nav .sis-menu-cta > a.sis-btn-default {
    color: var(--primary-color);
}

.slicknav_nav .sis-menu-cta > a.sis-btn-default:hover,
.slicknav_nav .sis-menu-cta > a.sis-btn-default:focus {
    color: var(--main-color);
}

/* --------------------------------------------------------------------------
   Map address card
   --------------------------------------------------------------------------
   The template's map appeared to carry a card at its top left. That was
   Google's own place card, drawn from a Place ID in the embed URL, and it
   exists only for a business listed in Google's index. This is the same card
   built from the company settings, so it works over either tile source and
   needs no listing.

   The wrapper only becomes a positioning context where the card is used, so
   the map keeps the template's own layout everywhere else.
   -------------------------------------------------------------------------- */
.sis-map-with-card {
    position: relative;
}

/* The contained layout's own frame. Bootstrap's `.ratio` would do the shaping,
   but it stretches every direct child to fill the box, which flattened the
   address card over the whole map. */
.sis-map-contained {
    position: relative;
    aspect-ratio: 21 / 9;
}

.sis-map-contained iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*
 | The greyscale-and-hover effect, moved off the template's own rule so it can
 | be turned off from Settings -> Appearance. custom.css:4069 applies it to
 | every .sis-contact-map iframe unconditionally; this file loads after it and
 | carries the same specificity, so the unconditional rule is cleared and the
 | class puts it back. It works on the contained layout too, which the template
 | never reached.
 */
.sis-contact-map iframe {
    filter: none;
}

.sis-map-greyscale iframe {
    filter: grayscale(100%);
    transition: filter .3s ease-in-out;
}

.sis-map-greyscale:hover iframe {
    filter: grayscale(0%);
}

/*
 | Every measurement runs from its value at a 375px viewport to its value at
 | 1440px, so the card scales with the page rather than sitting at desktop size
 | on a phone.
 */
.sis-map-card {
    --sis-card-pad: clamp(.875rem, .74rem + .56vw, 1.25rem);   /* 14 -> 20px */
    --sis-card-type: clamp(.8125rem, .776rem + .16vw, .875rem); /* 13 -> 14px */

    position: absolute;
    /* Where Google puts its own place card: measured against the template's
       embed rendered at 2x, a flat 8px from the top and the leading edge
       whatever size the map is. */
    top: 8px;
    inset-inline-start: 8px;
    z-index: 2;
    width: min(17.5rem, calc(100% - 1.5rem));
    padding: var(--sis-card-pad);
    background: var(--white-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(26, 26, 26, .18);
}

/* The card sits over the map, so the greyscale filter on the iframe must not
   reach it -- and it does not, being a sibling rather than a child. */
/*
 | Sized the way the template's card sizes its own, read off the same 2x render:
 | the name at 14px in the body font rather than the site's display face, and
 | the address a size down in the muted grey. It reads as an information panel
 | over a map, which is what it is, instead of as a section heading. The weight
 | is bold rather than the template's medium, to match the number below it.
 */
.sis-map-card-name {
    font-family: var(--default-font);
    font-size: var(--sis-card-type);
    font-weight: 700;
    line-height: 1.4;
    color: var(--primary-color);
    /* Room for the close button, which is absolutely placed in the corner. */
    padding-inline-end: 1.5rem;
    margin-bottom: .25rem;
}

/* The company colour, at the corner the eye goes to first. */
.sis-map-card-close {
    position: absolute;
    top: calc(var(--sis-card-pad) - .25rem);
    inset-inline-end: calc(var(--sis-card-pad) - .25rem);
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--main-color);
    font-size: .875rem;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}

.sis-map-card-close:hover {
    background: var(--main-color);
    color: var(--white-color);
}

.sis-map-card-address {
    font-size: calc(var(--sis-card-type) * .857);   /* 14 -> 12px */
    font-weight: 400;
    line-height: 1.34;
    color: var(--text-color);
    margin-bottom: .5rem;
}

/* Centred rather than top-aligned: the two rows carry different sizes now, so a
   fixed nudge on the icon could only sit right on one of them. Each line is one
   line deep, so centring puts every icon on its own text's midline. */
.sis-map-card-row {
    display: flex;
    align-items: center;
    gap: .4375rem;
    font-size: var(--sis-card-type);
    color: var(--text-color);
    margin-bottom: .25rem;
}

.sis-map-card-row i {
    flex: 0 0 auto;
    width: .875rem;
    font-size: .75rem;
    line-height: 1;
    color: var(--main-color-ink);
    text-align: center;
}

.sis-map-card-row a {
    color: var(--primary-color);
    font-weight: 600;
}

.sis-map-card-row a:hover {
    color: var(--main-color-ink);
}

/* The number sits at the address's size and carries its weight instead, so the
   title is the only thing on the card set large. After the rule above rather
   than before it: both are one class and an element, so order decides. */
.sis-map-card-row--phone a {
    font-size: calc(var(--sis-card-type) * .857);   /* 14 -> 12px, as the address */
    font-weight: 700;
}

/* Two ranges and a separator in the width the card has: at the shared size this
   wrapped onto a second line, which read as two facts rather than one. */
.sis-map-card-row--hours {
    font-size: calc(var(--sis-card-type) * .8);
}

/* Smaller than a page button: this one sits inside a card, not under a section. */
.sis-map-card-directions {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .5rem;
    padding: .3125rem .625rem;
    background: var(--main-color);
    color: var(--primary-color);
    border-radius: 6px;
    font-size: calc(var(--sis-card-type) * .86);
    font-weight: 700;
    letter-spacing: .01em;
}

.sis-map-card-directions:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

/* On a phone the card is dropped rather than restacked: floated it would cover
   most of the map, and stacked it repeated the Head office panel further up the
   same page, which already carries the address, the phone number and the hours. */
@media only screen and (max-width: 767px) {
    .sis-map-card {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Footer build credit
   --------------------------------------------------------------------------
   The line reads as one sentence on a wide screen and wraps to its own line on
   a narrow one, so the divider goes with it rather than stranding a bar at the
   end of the copyright.
   -------------------------------------------------------------------------- */
.sis-footer-credit {
    white-space: nowrap;
}

.sis-footer-credit-divider {
    margin-inline: .375rem;
    opacity: .45;
}

/*
 | Blue at rest, white on hover.
 |
 | The blue is deliberate rather than borrowed from the palette: this line is
 | the builder's credit, not the client's, so it sits apart from Ifmira's
 | orange instead of joining it. 6.94:1 at rest and 17.4:1 hovered, both on the
 | footer's ground.
 */
.sis-footer-credit a {
    color: #4ea8ff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s ease;
}

.sis-footer-credit a:hover,
.sis-footer-credit a:focus-visible {
    color: var(--white-color);
}

@media only screen and (max-width: 575px) {
    .sis-footer-credit-divider {
        display: none;
    }

    .sis-footer-credit {
        display: block;
        white-space: normal;
    }
}

/* --------------------------------------------------------------------------
   Top bar — the address pin and the social icons that sit beside it.

   The pin lost its wording to make room, so both it and each social icon are
   an icon with nothing but screen-reader text to name them. That makes their
   tap target the glyph alone: line-height 1 on an inline-block keeps the box
   on the glyph rather than the line, so the row lines up on its centres.
   -------------------------------------------------------------------------- */
.sis-header-top .sis-top-icon {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
}

/* Both wrappers hold a bare glyph, and the bar's own line-height would give
   each a taller line box than the glyph -- enough to leave the pin sitting a
   couple of pixels above the icons it now sits beside. */
.sis-header-top .sis-top-icons,
.sis-header-top .sis-location,
.sis-header-top .sis-top-socials {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* The hours are their own item now rather than the empty case of the social
   list, so they carry the weight the rest of the bar has. */
.sis-header-hours .sisf-e-title-text {
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Mobile menu — the social profiles, sitting above Request Quote.

   These classes only ever render inside SlickNav's menu: #menu2 is display:none
   until script.js hands its children to the mobile menu, so none of this needs
   a media query to stay off the desktop header.
   -------------------------------------------------------------------------- */
.slicknav_nav .sis-menu-socials {
    /* The row of nav links is underlined item by item. The icons and the CTA
       are the menu's closing block rather than another link, so the rule above
       them is the last one. */
    border-bottom: 0 !important;
    /* 15px is the menu's own inset -- the nav links' text and the Request Quote
       pill both start there, so the icons line up with the column rather than
       sitting against the edge of the screen. */
    padding: 24px 15px 6px;
}

.sis-menu-socials-label {
    display: block;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sis-menu-socials-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* The footer's social icons, repeated here so the two agree: a white disc that
   turns amber under a finger, with the glyph itself staying dark. Kept to the
   footer's 40px so the two read as the same control. */
/*
 | Scoped to .slicknav_nav on purpose. SlickNav styles every anchor in the menu
 | -- `.slicknav_nav a { display: block }` and `.slicknav_nav li a { padding:
 | 10px 15px }` -- and both outrank a lone class. Left alone they turn the disc
 | into a block box with 30px of padding inside its own 40px, so the glyph is
 | pushed out of the circle instead of sitting in the middle of it.
 */
.slicknav_nav .sis-menu-social {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 40px;
    height: 40px;
    background: var(--white-color);
    border-radius: 50px;
    transition: .4s ease-in-out;
}

.slicknav_nav .sis-menu-social:hover,
.slicknav_nav .sis-menu-social:focus-visible {
    background: var(--main-color);
}

/* One size for both sets of discs -- see the shared rule further down, which
   draws the footer's at 24px too. line-height 1 keeps the box on the glyph
   rather than on the text line it would otherwise sit on. */
.slicknav_nav .sis-menu-social i {
    line-height: 1;
    color: var(--primary-color);
    transition: .4s ease-in-out;
}

/* --------------------------------------------------------------------------
   One glyph size for the profile icons, wherever they are drawn.

   The footer shipped at 16px and the mobile menu was briefly larger again; at
   24px in the same 40px disc the two are one control in two places. This has
   to come after custom.css, which sets the footer's 16px at equal specificity
   -- the load order in the layout is what settles it.
   -------------------------------------------------------------------------- */
.footer-social-icons-link i,
.slicknav_nav .sis-menu-social i {
    font-size: 24px;
}

/* --------------------------------------------------------------------------
   Top bar — the pin's distance from the divider on its left.

   The email sits between two of these lines, 15px clear of each: its own
   padding sets that, and it reads as the spacing the divider asks for. The pin
   is the next thing after the right-hand line but belongs to the row rather
   than to the email, so it took the row's 24px gap instead and sat noticeably
   further out than the email sits in. This gives it the same 15px.
   -------------------------------------------------------------------------- */
.sis-header-top .sis-top-icons {
    margin-left: calc(15px - 1.5rem);
}

/* --------------------------------------------------------------------------
   Rules above and below the map, set as the contact form's top edge is -- the
   same 4px of the company's colour, so the two panels on the page are edged
   alike.

   Both layouts carry them. The full-width band is a fixed 600px and the box is
   border-box, so the rules come out of that height rather than adding to it;
   the contained layout positions its iframe against the padding box, so they
   sit outside the map rather than over it.
   -------------------------------------------------------------------------- */
.sis-contact-map,
.sis-map-contained {
    border-top: 4px solid var(--main-color);
    border-bottom: 4px solid var(--main-color);
}

/* --------------------------------------------------------------------------
   The footer's bottom row, sized against the viewport rather than pinned.

   Its three parts each want a fixed width -- the copyright measures 392px at
   16px, six discs and their gaps come to 280px -- while the columns holding
   them shrink with the window. Pinned, the only way that ends is one of them
   wrapping: the copyright took two lines, and before that the icons took two
   rows. Scaled, each keeps its shape the whole way down.

   The upper bound of every clamp below is the size the row already had, so
   nothing changes on a wide screen; the lower bound is what the narrowest
   three-column layout can hold.
   -------------------------------------------------------------------------- */
.footer-social-icons-link li a {
    width: clamp(30px, 2.8vw, 40px);
    height: clamp(30px, 2.8vw, 40px);
}

.footer-social-icons-link i {
    font-size: clamp(18px, 1.7vw, 24px);
}

/* The floors are what the narrowest three-column layout can hold. That column
   is 246.5px wide and gives up 15px of padding either side, leaving 216.5px;
   six 30px discs and five 5px gaps come to 205px. The first pass floored the
   disc at 32px, which came to 216.8px and wrapped by three tenths of a pixel.
   30px keeps the glyph at the same 60% of the disc it has at full size. */
.footer-social-icons-link ul {
    gap: clamp(4px, .5vw, 8px) !important;
}

/* The legal links share the line with the copyright, so they scale with it --
   left behind at 16px they would sit visibly larger than the line beside them. */
.footer-copyright-text p,
.footer-privacy-policy a {
    font-size: clamp(14px, 1.15vw, 16px);
}

/* --------------------------------------------------------------------------
   Stats — the widest figure on the narrowest phone.

   Two to a row below 768px, so each stat has half the screen: 160px at 320px
   wide, of which px-4 takes 48px. "10000 m²" is 115px against the 112px that
   leaves, and the page clips rather than scrolls -- html and body are both
   overflow-x: hidden -- so the squared sign was simply cut off the edge. The
   padding is what gives: at this width the gutter matters less than the figure
   it is cropping.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
    .sis-stat-col {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }
}