/* ============================================================
   SNUG custom responsive adjustments
   Loaded AFTER style.css so it can refine the inline-styled
   sections added during the 2026 content refresh. These
   sections use inline styles (no media queries of their own),
   so we target them here by class and by inline-style fragments
   to tighten padding and type on small screens.
   ============================================================ */

/* ---------- Tablet / small-desktop ---------- */
@media (max-width: 768px) {
    /* Large gradient / feature panels (carousel slides, Snugdesk/Avaya blocks) */
    .snug-slide,
    [style*="padding: 48px 44px"],
    [style*="padding: 48px 40px"] { padding: 30px 24px !important; }

    /* Avaya featured card and similar 40px panels */
    [style*="padding: 40px"] { padding: 28px 22px !important; }

    /* Content cards */
    [style*="padding: 30px 26px"],
    [style*="padding: 32px 26px"] { padding: 26px 22px !important; }

    /* Dark stat bands */
    [style*="padding: 38px 28px"],
    [style*="padding: 34px 28px"] { padding: 28px 18px !important; }

    /* Oversized inline section headings scale down */
    .snug-slide h2 { font-size: 24px !important; line-height: 1.25 !important; }

    /* Inline flex card grids (feature/benefit cards across the solution,
       industry, index and about pages) all cap each card with a fixed
       max-width and center the row. On mobile that leaves the cards narrower
       than their row, so they sit inset with wasted space on the sides.
       Dropping the cap lets each card flex-grow to fill its row, so whether
       one or two wrap onto a row they split the full width evenly and line
       up with the section heading above them. */
    [style*="flex: 1 1 "] { max-width: none !important; }
    [style*="justify-content: center"][style*="max-width: 1120px"] {
        justify-content: flex-start !important;
    }
}

/* ---------- Uniform page gutters + heading hierarchy (mobile) ---------- */
@media (max-width: 768px) {
    /* Consistent left/right gutter for all inner-page content, so nothing
       hugs the screen edge (headings, paragraphs, cards and panels). */
    .about__snug__inner__container {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    /* The page hero should clearly dominate its section headings below it. */
    .intro h1.inner_page_heading,
    .intro h1.text--h1-main {
        font-size: 33px !important;
        line-height: 1.18 !important;
    }
    /* Hero subtitle a little larger so it doesn't read as tiny. */
    .intro .text--h3-large {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    /* Large intro/body paragraphs eased down so they don't overpower the hero. */
    .big__text__heading,
    .big__text__heading_inner {
        font-size: 17px !important;
        line-height: 1.55 !important;
    }
}

/* ---------- Fluid image + text content blocks (mobile) ----------
   Solution / industry inner pages build their image-beside-text rows with
   fixed 980px / 490px widths and floats (.about__four__area wraps a
   490x490 .images_all_area next to a 490x490 .our__mission_content_area).
   On phones/tablets those fixed sizes overflow the viewport and clip the
   image, so make the row fluid and stack the image above the text. */
@media (max-width: 768px) {
    .about__four__area {
        width: 100% !important;
        display: flex;
        flex-direction: column;
    }

    /* When several image+text blocks stack (e.g. Awards list), separate each
       block so one block's text doesn't touch the next block's image. */
    .about__four__area + .about__four__area {
        margin-top: 40px !important;
    }

    .images_all_area,
    .our__mission_content_area {
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

    /* Always show the image on top, content below — regardless of DOM order. */
    .images_all_area {
        order: -1;
        margin: 0 auto 20px !important;
        text-align: center;
    }

    .images_all_area img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .our__mission_content_area {
        padding: 10px 0 0 0 !important;
        text-align: left;
    }
}

/* ---------- About Us: Mission / Vision / Value rows (mobile + tablet) --------
   These rows use fixed 490x490 background-image tiles (.our__mission_bg_area /
   .our__vission_bg_area / .our__value_bg_area) instead of <img>, so the generic
   image rules above don't touch them. Scoped to the .mission-vision-value
   section ONLY so no other page is affected. The base tiles only get their
   float layout AND background image inside @media (min-width: 980px), so below
   that they render blank — this block must cover the whole sub-980px range
   (not just phones) to re-declare the image and stack it above the text. */
@media (max-width: 979px) {
    .mission-vision-value .about__four__area {
        width: 100% !important;
        display: flex;
        flex-direction: column;
    }

    .mission-vision-value .our__mission_bg_area,
    .mission-vision-value .our__vission_bg_area,
    .mission-vision-value .our__value_bg_area {
        order: -1;
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 240px !important;
        float: none !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center !important;
        margin-bottom: 20px !important;
    }

    /* The base 490x490 tiles set their background-image inside a desktop-only
       media query, so re-declare the image here for small screens. */
    .mission-vision-value .our__mission_bg_area {
        background-image: url(../images/our-mission-snug.jpg) !important;
    }
    .mission-vision-value .our__vission_bg_area {
        background-image: url(../images/our-vision-snug.jpg) !important;
    }
    .mission-vision-value .our__value_bg_area {
        background-image: url(../images/our-value-snug.jpg) !important;
    }

    .mission-vision-value .our__mission_content_area {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 34px !important;
    }
}

/* ---------- "Overview / Specification" tab strip (mobile) ----------
   The active tab (.w3-dark-grey) is a white box with a teal top/left/right
   border and no bottom border, designed to sit on the teal underline
   (.bdr_bottom_st) so it reads as a connected tab. The 2px relative lift on
   the <li> left the underline showing through beneath the active box, so it
   looked like a floating rectangle. Drop the active tab onto the line and
   cap it with a white bottom border so it merges cleanly with the content. */
@media (max-width: 768px) {
    .tab_three_nt .innertab005 li {
        top: 0;
        font-size: 13px !important;
    }

    .innertab005 li a {
        padding: 9px 14px;
    }

    .innertab005 li .w3-dark-grey {
        margin-bottom: -2px;
        border-bottom: 2px solid #fff;
    }
}

/* ---------- Specification tab: full-width two-column list ----------
   The spec list lived in a single fixed 490px column (.our__mission_content_area),
   so it only filled the left half of the section and left the right half empty.
   Span the full content width and lay the two <ul> lists side-by-side; they
   stack back to one column on small screens. */
.spec-tab .our__mission_content_area {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.spec-tab .our__mission_content_area ul {
    float: left;
    width: 50%;
    padding-right: 30px;
    box-sizing: border-box;
}

.spec-tab .our__mission_content_area ul li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 18px;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
}

/* Red arrow marker so each spec reads clearly as its own point. */
.spec-tab .our__mission_content_area ul li::before {
    content: "\2192"; /* → */
    position: absolute;
    left: 0;
    top: 0;
    color: #ed1f23;
    font-weight: 700;
}

@media (max-width: 768px) {
    .spec-tab .our__mission_content_area ul {
        float: none;
        width: 100%;
        padding-right: 0;
    }
}

/* ---------- Phones ---------- */
@media (max-width: 560px) {
    .intro h1.inner_page_heading,
    .intro h1.text--h1-main { font-size: 30px !important; }

    .snug-slide,
    [style*="padding: 48px 44px"],
    [style*="padding: 48px 40px"] { padding: 26px 20px !important; }

    [style*="padding: 40px"] { padding: 24px 18px !important; }

    /* Trim tall section vertical padding so the page feels less sparse */
    [style*="padding: 60px 0"] { padding-top: 40px !important; padding-bottom: 26px !important; }
    [style*="padding: 56px 0"] { padding-top: 40px !important; padding-bottom: 36px !important; }
    [style*="padding: 60px 0 30px"] { padding-bottom: 20px !important; }

    /* Carousel controls sit a little closer on phones */
    .snug-carousel__prev,
    .snug-carousel__next { width: 38px !important; height: 38px !important; }

    /* Snugdesk / carousel slide heading */
    .snug-slide h2 { font-size: 22px !important; }
    .snug-slide p { font-size: 15px !important; }
}

/* ---------- Job application form (all screen sizes) ----------
   The base form styles in style.css sit inside a desktop media query, so on
   narrow / responsive widths the form rendered unstyled (labels and inputs
   ran inline and fields shrank to content). These rules style it as a clean,
   stacked, full-width form at every screen size. */
.form_job_apply {
    width: 100%;
    max-width: 700px;
    margin: 38px auto 0;
    background: #f1f1f1;
    text-align: left;
    padding: 24px;
    border-bottom: 6px solid #ec2326;
    box-sizing: border-box;
}

.form_job_apply label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.6em;
    color: #676c73;
    margin: 16px 0 5px;
}

.form_job_apply input,
.form_job_apply select,
.form_job_apply textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: 400;
    font-size: 14px;
    padding: 12px;
    color: #676c73;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    outline: none;
}

.form_job_apply textarea {
    min-height: 120px;
    resize: vertical;
}

.form_job_apply input[type="file"] {
    padding: 10px;
    font-size: 13px;
}

.form_job_apply input:focus,
.form_job_apply select:focus,
.form_job_apply textarea:focus {
    border-color: #ed1f23;
    color: #2d3845;
}

.form_job_apply .btn--about--snug_carrer_a {
    display: inline-block;
    margin-top: 24px;
    padding: 13px 36px;
    background: #ed1f23;
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color .2s ease;
}

.form_job_apply .btn--about--snug_carrer_a:hover {
    background: #2d3845;
    color: #fff !important;
}

/* ---------- Contact us CTA button (header) ----------
   The header is transparent over the hero at the top of the page (it carries
   the .ui-header class). As you scroll, the scroll script removes .ui-header
   and the bar turns white (.header--fixed-top / .header--fixed-free).
   So we key the button colour on that state:
     • transparent header (top / .ui-header) -> WHITE text + WHITE border
     • white header (scrolled / no .ui-header) -> RED text + RED border
     • hover, in BOTH states                  -> RED fill + WHITE text
   A submenu open (.header--expanded) also turns the bar white, so it is
   excluded from the transparent (white-outline) rule. */
.cta-contact {
    display: inline-block;
    padding: 8px 22px;
    line-height: 1;
    vertical-align: middle;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 2px solid;
    background-color: transparent !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Default (white header state) -> red outline */
a.btn--link-primary b.cta-contact {
    color: #ed1f23 !important;
    border-color: #ed1f23 !important;
    background-color: transparent !important;
}

/* Transparent header at the top of the hero -> white outline */
.header.ui-header:not(.header--expanded) a.btn--link-primary b.cta-contact {
    color: #fff !important;
    border-color: #fff !important;
}

/* Hover, white header state -> red fill, white text, red border */
.header a.btn--link-primary:hover b.cta-contact {
    color: #fff !important;
    background-color: #ed1f23 !important;
    border-color: #ed1f23 !important;
}

/* Hover, transparent header state -> same red fill, white text, red border */
.header.ui-header:not(.header--expanded) a.btn--link-primary:hover b.cta-contact {
    color: #fff !important;
    background-color: #ed1f23 !important;
    border-color: #ed1f23 !important;
}

/* ---------- Contact page "Our offices" rows (mobile) ----------
   Each office is a flex row: a 380px office photo beside the address block.
   Signatures (gap: 36px + max-width: 980px) are unique to this section.

   Larger phones / small tablets (480-768px): keep the photo and details side
   by side, shrinking the photo to a compact thumbnail on the left so the
   address sits directly to its right. */
@media (min-width: 480px) and (max-width: 768px) {
    [style*="gap: 36px"][style*="max-width: 980px"] {
        flex-wrap: nowrap !important;
        gap: 16px !important;
        align-items: flex-start !important;
        padding: 0 !important;
    }
    [style*="gap: 36px"][style*="max-width: 980px"] > img {
        width: 120px !important;
        height: 120px !important;
    }
    [style*="gap: 36px"][style*="max-width: 980px"] > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* Small phones (<480px): side by side is too cramped for the long address,
   so stack instead — photo on top, address below it, full width. */
@media (max-width: 479px) {
    [style*="gap: 36px"][style*="max-width: 980px"] {
        gap: 20px !important;
        padding: 0 !important;
    }
    [style*="gap: 36px"][style*="max-width: 980px"] > img {
        width: 100% !important;
        height: 200px !important;
    }
    [style*="gap: 36px"][style*="max-width: 980px"] > div {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
}

/* ---------- Stat band reveal animation (index / about) ----------
   When the dark stat band scrolls into view, each stat fades in and rises
   with a staggered delay while its number counts up (see snug-forms.js).
   The .in-view class is toggled by the intersection observer. */
.js-statband > div {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}
.js-statband.in-view > div {
    opacity: 1;
    transform: none;
}
/* Breathing room between the big number and its description line, plus a
   comfortable line-height so multi-line numbers don't crowd together. */
.js-statband > div > div:first-child {
    margin-bottom: 0;
    line-height: 1.15;
}
.js-statband.in-view > div:nth-child(1) { transition-delay: 0.05s; }
.js-statband.in-view > div:nth-child(2) { transition-delay: 0.17s; }
.js-statband.in-view > div:nth-child(3) { transition-delay: 0.29s; }
.js-statband.in-view > div:nth-child(4) { transition-delay: 0.41s; }

/* Gentle pop on the big number as it settles. */
.js-countup {
    display: inline-block;
    transition: transform 0.25s ease;
}
.js-countup.is-popping {
    transform: scale(1.14);
}

/* Respect users who prefer reduced motion: reveal instantly, no movement. */
@media (prefers-reduced-motion: reduce) {
    .js-statband > div {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .js-countup {
        transition: none;
    }
}

/* ---------- Stat band layout (mobile) ----------
   On phones/tablets four stats in one flexible row wrap unevenly (3 + 1) and
   the large numbers crowd their lines. Lay them out as a balanced 2x2 grid,
   ease the number size down, and give the number and its description roomier
   line-heights so nothing feels cramped. */
@media (max-width: 768px) {
    .js-statband {
        gap: 30px 18px !important;
        padding: 32px 22px !important;
    }
    .js-statband > div {
        flex: 1 1 40% !important;
        min-width: 0 !important;
    }
    .js-statband > div > div:first-child {
        font-size: 27px !important;
        line-height: 1.2 !important;
        margin-bottom: 7px;
    }
    .js-statband > div > div:last-child {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}

/* On tablet widths (769-1180px) the inner container has no side padding, so
   its 1120px-wide content (section headings, card rows, the stat band, intro
   text) spans edge-to-edge and touches both sides. Add the same page gutter
   the container already uses below 769px, so everything clears the edges.
   Above 1180px the container's max-width leaves natural margins. */
@media (min-width: 769px) and (max-width: 1180px) {
    .about__snug__inner__container {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
}

/* The footer switches to a fixed 980px, 4-column (245px each) layout at 980px.
   Between 980-1023px that block nearly fills the viewport, so it touches both
   edges; and simply padding it shrinks the content below 4x245px, wrapping the
   4th column ("Our Offices") up under another and crowding it. Instead, keep
   the fluid stacked layout (as below 980px) across this range with a gutter,
   so every block is full width and clears the edges. At >=1024px the 980px
   block has a natural margin and the 4-column layout is used again. */
@media (min-width: 980px) and (max-width: 1023px) {
    .footer__inner_start {
        width: 100% !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
    /* Nav columns: lay all four out as fluid, evenly sized columns that fill
       the row (instead of a tall single-column stack that wastes the space to
       the right), sized down so they fit the gutter'd width without wrapping. */
    .footer__inner_start:not(.pd__footer) {
        display: flex !important;
        flex-wrap: wrap;
        gap: 20px;
    }
    .four_area_01 {
        flex: 1 1 180px !important;
        width: auto !important;
        float: none !important;
        margin-bottom: 0 !important;
    }
    /* The float-clearing div is a stray flex item that steals a gap and unevens
       the columns; it isn't needed in the flex layout. */
    .footer__inner_start:not(.pd__footer) > .clear {
        display: none !important;
    }
    /* Logo + description block: stack so the paragraph isn't squeezed. */
    .four_area_0102,
    .four_area_0103 {
        width: 100% !important;
        float: none !important;
    }
}