/**
 * Theme Name: nanosoft Child
 * Description: Child theme for the nanosoft
 * Author: LineThemes
 * Template: nanosoft
 */

/* ==========================================================================
   1. Typeface — Sora
   --------------------------------------------------------------------------
   Sora is self-hosted as a variable font (one file covers weights 100-800),
   so the site never waits on fonts.googleapis.com. The theme's Customizer
   typography controls are set to Sora as well, which is what drives the
   inline font-family rules the theme prints for body, headings, nav, widgets,
   buttons and inputs. functions.php strips Sora out of the theme's Google
   Fonts request so the family is only ever loaded once, from here.
   ========================================================================== */

/* latin-ext */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('assets/fonts/sora/sora-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('assets/fonts/sora/sora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --accura-font: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}


/* --------------------------------------------------------------------------
   1.1 Base — anything the theme does not already cover inherits Sora
   -------------------------------------------------------------------------- */

body,
button,
input,
optgroup,
select,
textarea {
    font-family: var(--accura-font);
}

/* Sora's outlines are geometric and read a little thin at body sizes; these
   two properties are what keep it crisp rather than washed out. */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* --------------------------------------------------------------------------
   1.2 Hard-coded families in the parent theme
   Each of these ships with its own font-family, so it needs an explicit reset
   rather than inheritance. Icon fonts are deliberately left alone.
   -------------------------------------------------------------------------- */

#site .testimonial.style2 .testimonial-wrap .testimonial-content .testimonial-text:before,
div.pp_default .pp_nav .currentTextHolder {
    font-family: var(--accura-font);
}


/* --------------------------------------------------------------------------
   1.3 Slider Revolution
   Every layer in the Mainsite slider is set to Sora in the slider data itself,
   so this is a backstop for the one case that data can't cover: a layer added
   later with no family picked falls back to SR7's built-in default (Roboto),
   which it writes as an inline style at runtime — hence !important.

   Only the layer boxes are matched. Their contents inherit, and icon markup
   inside a layer (i.fa, [class*="ion-"], ...) declares its own family, so
   nothing here reaches an icon glyph.
   -------------------------------------------------------------------------- */

rs-layer,
.rs-layer,
.sr7-layer,
.tp-caption {
    font-family: var(--accura-font) !important;
}


/* --------------------------------------------------------------------------
   1.4 Plugin output
   The handful of frontend rules that ship with a family of their own.
   -------------------------------------------------------------------------- */

.wpcf7 .wpcf7-form-control,
.wpcf7 .wpcf7-response-output,
.fca-ept-tooltip:before,
div.fca-ept-tooltip-div .fca-ept-tooltiptext {
    font-family: var(--accura-font);
}


/* ==========================================================================
   2. Header
   --------------------------------------------------------------------------
   The header now shares the content container: the "Full Width Header" option
   is off, so .site-header-inner picks up the same 1170px/90% .wrap as every
   other section. Nav size (15px/500) and item padding come from the Customizer
   typography and padding controls. What is left here is layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 Centre the menu between the logo and the right-hand controls
   The three children of .header-content are laid out with space-between, which
   centres the nav only when the logo and the controls happen to be the same
   width. Giving the outer two an equal flex basis centres it for real.
   -------------------------------------------------------------------------- */

.site-header-classic.header-brand-left .header-content > .header-brand,
.site-header-classic.header-brand-left .header-content > .extras {
    flex: 1 1 0;
    min-width: 0;
}

.site-header-classic.header-brand-left .header-content > .navigator {
    flex: 0 1 auto;
}


/* --------------------------------------------------------------------------
   2.2 Menu items
   The parent stretches every item with flex-grow: 1, so the menu always spans
   the full header no matter how few items it has — which is what made them
   read as oversized. Sizing each item to its label instead.
   -------------------------------------------------------------------------- */

.site-header-classic .navigator .menu-primary > li,
.site-header-sticky .navigator .menu-primary > li {
    flex-grow: 0;
}

/* The active/hover rule is drawn on the item's ::before, anchored to the top
   by the parent (top: -2px). Move it under the label.

   The rule sits at z-index: -1, so anything opaque overlapping the item's
   bottom edge hides it — which is what the dropdown used to do. The panel now
   opens flush at that edge instead of over it (see 2.25). */
.site-header-classic .navigator .menu-primary > li:before,
.site-header-sticky .navigator .menu-primary > li:before {
    top: auto;
    bottom: 0;
    border-bottom-width: 2px;
}

/* The dropdown's arrow pointer is drawn 14px above the panel's top edge, which
   puts it straight through the rule above. The rule now does the same job —
   tying the open panel to its item — so the pointer goes. Delete this block to
   get it back. */
.site-header-classic .navigator .menu-primary > li .sub-menu:after,
.site-header-classic .navigator .menu-primary > li .children:after,
.site-header-sticky .navigator .menu-primary > li .sub-menu:after,
.site-header-sticky .navigator .menu-primary > li .children:after {
    display: none;
}


/* --------------------------------------------------------------------------
   2.25 Dropdown menus
   The parent's panel is a flat white box: hairline grey border, 5px corners,
   one soft shadow, and rows that are bare text with a hard 40px indent left
   for an arrow that slides in from the edge. Reworked into a card of discrete
   rows — each row gets its own hover surface and a chevron on the trailing
   edge, so the hit target is visible and nothing reflows on hover.

   Colours come from the tokens functions.php publishes, so the dropdown
   follows the Customizer palette rather than a hardcoded hex.
   -------------------------------------------------------------------------- */

.site-header-classic .navigator .menu-primary li .sub-menu,
.site-header-classic .navigator .menu-primary li .children {
    min-width: 268px;
    padding: 8px;
    border: 1px solid rgba(14, 43, 92, 0.07);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(14, 43, 92, 0.04),
    0 10px 24px -8px rgba(14, 43, 92, 0.14),
    0 28px 56px -20px rgba(14, 43, 92, 0.16);
}

/* Line the panel up with the left end of the item's rule instead of centring
   it on the item. The parent centres with left: 50% plus a translateX(-50%)
   that is also carrying the open/close slide, so both the closed and open
   transforms have to be restated without the X component.

   Scoped to first-level panels — nested submenus open sideways off left: 100%
   and must keep their own positioning. */
.site-header-classic .navigator .menu-primary > li > .sub-menu,
.site-header-classic .navigator .menu-primary > li > .children {
    left: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

/* Open flush with the bottom of the item rather than 10px up over it, so the
   panel starts where the item's rule ends instead of covering it.

   translateY(0) and not a few px lower on purpose: the item's box stops 12px
   short of the header's bottom edge, so a gap here is dead space the pointer
   has to cross on its way down — the item loses :hover and the panel closes
   under the cursor. At 0 the two boxes touch and the travel is unbroken. */
.site-header-classic .navigator .menu-primary > li:hover > .sub-menu,
.site-header-classic .navigator .menu-primary > li:hover > .children,
.site-header-classic .navigator .menu-primary > li.menu-item-expand > .sub-menu,
.site-header-classic .navigator .menu-primary > li.menu-item-expand > .children {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

/* The two row colours are written out rather than keyed to the --accura-nav-*
   properties. Those describe the *top-level* nav's states, and pointing the
   resting row at --accura-nav-hover meant that changing the top-level hover to
   the accent turned every dropdown row orange — and inverted the panel, since
   the hover state was reading from --accura-nav and coming out darker than the
   resting one. Same greys as the footer, one step apart. */
.site-header-classic .navigator .menu-primary li .sub-menu li a,
.site-header-classic .navigator .menu-primary li .children li a {
    position: relative;
    display: block;
    padding: 11px 42px 11px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: #555250;
    transition: background-color 0.18s ease, color 0.18s ease;
}

/* The row itself is the affordance. Colour deepens rather than the weight
   changing, which would shift the text under the cursor. */
.site-header-classic .navigator .menu-primary li .sub-menu li:hover > a,
.site-header-classic .navigator .menu-primary li .children li:hover > a,
.site-header-classic .navigator .menu-primary li .sub-menu li.current-menu-item > a,
.site-header-classic .navigator .menu-primary li .children li.current-menu-item > a,
.site-header-classic .navigator .menu-primary li .sub-menu li.current_page_item > a,
.site-header-classic .navigator .menu-primary li .children li.current_page_item > a {
    background-color: rgba(24, 20, 32, 0.05);
    color: #3c3938;
}

/* Retire the parent's left-hand arrow — it lived in the row's 40px left
   indent, which is why every label sat so far off the panel edge. */
.site-header-classic .navigator .menu-primary li .sub-menu li:before,
.site-header-classic .navigator .menu-primary li .children li:before {
    display: none;
}

.site-header-classic .navigator .menu-primary li .sub-menu li > a:after,
.site-header-classic .navigator .menu-primary li .children li > a:after {
    content: "\f3d3";
    font-family: "Ionicons";
    font-size: 15px;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 16px;
    color: #3c3938;
    opacity: 0;
    transform: translateY(-50%) translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.site-header-classic .navigator .menu-primary li .sub-menu li:hover > a:after,
.site-header-classic .navigator .menu-primary li .children li:hover > a:after,
.site-header-classic .navigator .menu-primary li .sub-menu li.current-menu-item > a:after,
.site-header-classic .navigator .menu-primary li .children li.current-menu-item > a:after,
.site-header-classic .navigator .menu-primary li .sub-menu li.current_page_item > a:after,
.site-header-classic .navigator .menu-primary li .children li.current_page_item > a:after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Rows lift in one after another as the panel opens. Driven by an animation
   rather than a transition off the hidden state, so the items are never left
   invisible if something other than :hover opens the panel. */
@keyframes accura-dropdown-item {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.site-header-classic .navigator .menu-primary > li:hover > .sub-menu > li,
.site-header-classic .navigator .menu-primary > li.menu-item-expand > .sub-menu > li {
    animation: accura-dropdown-item 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-header-classic .navigator .menu-primary > li > .sub-menu > li:nth-child(2) {
    animation-delay: 0.03s;
}

.site-header-classic .navigator .menu-primary > li > .sub-menu > li:nth-child(3) {
    animation-delay: 0.06s;
}

.site-header-classic .navigator .menu-primary > li > .sub-menu > li:nth-child(4) {
    animation-delay: 0.09s;
}

.site-header-classic .navigator .menu-primary > li > .sub-menu > li:nth-child(5) {
    animation-delay: 0.12s;
}

.site-header-classic .navigator .menu-primary > li > .sub-menu > li:nth-child(n + 6) {
    animation-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    .site-header-classic .navigator .menu-primary > li:hover > .sub-menu > li,
    .site-header-classic .navigator .menu-primary > li.menu-item-expand > .sub-menu > li {
        animation: none;
    }
}


/* --------------------------------------------------------------------------
   2.3 Right-hand controls — search + CTA
   .extras is a table in the parent theme, which cannot align its cells to the
   right edge. Flex can, and it also lets the CTA sit next to the search icon
   with a real gap.
   -------------------------------------------------------------------------- */

.site-header-classic.header-brand-left .extras {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.site-header-classic.header-brand-left .extras .header-info-text,
.site-header-classic.header-brand-left .extras .menu-extras,
.site-header-classic.header-brand-left .extras .social-icons {
    display: flex;
    align-items: center;
}

/* The list stretches to fill .extras, so without this its items bunch up on
   the left of that box instead of sitting against the container edge. */
.site-header .menu-extras {
    justify-content: flex-end;
    gap: 1rem;
}

/* The parent theme insets each extras item by 20px, which stacks on top of the
   gap above and makes the real spacing 36px. Clearing it leaves `gap` as the
   single thing that controls this. */
.site-header .menu-extras > li.header-search,
.site-header .menu-extras > li.header-cta {
    padding: 0;
}

/* The parent draws a 1px rule down the left of the extras list, plus the 25px
   of padding that made room for it. Both go. */
.site-header .menu-extras:after {
    display: none;
}

.site-header-classic.header-brand-left .extras .menu-extras {
    padding-left: 0;
}


/* The extras list carries the header's full height, which would stretch the
   CTA into a full-height block. */
.site-header .menu-extras > li.header-cta {
    display: flex;
    align-items: center;
}

/* The site's default .button is the light outlined variant (white fill, 55px
   tall). The header CTA is the page's primary action, so it is filled with the
   brand accent and sized down to sit inside the header — the small end of the
   one button defined in 11. --accura-accent is published from the theme colour
   scheme by functions.php. */
.site-header .menu-extras > li.header-cta > a.button {
    height: 44px;
    line-height: 44px;
    padding: 0 26px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
    background: var(--accura-accent, #f25e30);
    border-color: transparent;
    box-shadow: none;
}

/* The parent theme wipes a dark panel up over .button on hover. It is an
   off-palette colour and reads as a different button entirely on the accent
   fill, so the CTA just deepens instead. */
.site-header .menu-extras > li.header-cta > a.button:after {
    display: none;
}

.site-header .menu-extras > li.header-cta > a.button:hover {
    color: #fff;
    filter: brightness(0.92);
}

.site-header .menu-extras > li.header-search .header-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--accura-nav, #0e2b5c);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.site-header .menu-extras > li.header-search .header-search-toggle:hover {
    background: rgba(14, 43, 92, 0.06);
    color: var(--accura-accent, #f25e30);
}


/* --------------------------------------------------------------------------
   2.35 Sticky header
   #site carries overflow: hidden to contain the sliders' horizontal overflow.
   That makes it a scroll container, which is exactly what stops a sticky child
   from ever sticking. overflow-x: clip does the same clipping WITHOUT becoming
   a scroll container, so the horizontal containment is kept and sticky works.

   The height stays fixed on scroll deliberately: a sticky element still takes
   up its space in flow, so shrinking it would jump the page content up.
   -------------------------------------------------------------------------- */

html,
body,
#site.site {
    overflow-x: clip;
    overflow-y: visible;
}

#site-header.site-header-classic {
    position: sticky;
    top: 0;
}

/* Clear the admin bar for logged-in users. */
.admin-bar #site-header.site-header-classic {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar #site-header.site-header-classic {
        top: 46px;
    }
}


/* --------------------------------------------------------------------------
   2.4 Keep the CTA below the desktop breakpoint
   The parent theme hides .menu-extras entirely once the burger takes over
   (three separate media queries from 1024px down, and .extras itself below
   544px). That is fine for a search icon but not for the page's primary
   action, so the CTA stays and the search icon is the thing that goes — it
   would only crowd the burger.

   The `body` prefix matches the specificity the parent uses; this file loads
   after it, so these win on source order.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body .site-header-classic.header-brand-left .extras,
    body .site-header-classic.header-brand-right .extras {
        display: flex;
    }

    body .site-header-classic.header-brand-left .extras .menu-extras,
    body .site-header-classic.header-brand-right .extras .menu-extras {
        display: flex;
    }

}

/* Below this the logo, search, CTA and burger stop fitting on one line, and
   the CTA is the one that has to survive. */
@media only screen and (max-width: 420px) {
    .site-header .menu-extras > li.header-search {
        display: none;
    }
}

@media only screen and (max-width: 544px) {
    .site-header .menu-extras > li.header-cta > a.button {
        height: 40px;
        line-height: 40px;
        padding: 0 18px;
        font-size: 13px;
    }

    .site-header-classic.header-brand-left .extras {
        gap: 12px;
    }
}


/* ==========================================================================
   3. Search palette
   --------------------------------------------------------------------------
   Replaces the slide-out search field that used to live in the header. That
   field could only ever submit a query and wait for a results page; this is a
   command-palette style dialog that answers as you type, opens on Ctrl/Cmd+K
   or "/", and is driven with the arrow keys.
   ========================================================================== */

.accura-search-is-open {
    overflow-y: hidden;
    padding-right: var(--accura-scrollbar, 0px);
}

.accura-search {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 20px 20px;
}

.accura-search[hidden] {
    display: none;
}

.accura-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 23, 46, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.accura-search.is-open .accura-search-backdrop {
    opacity: 1;
}

.accura-search-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    max-height: 76vh;
    overflow: hidden;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(9, 23, 46, 0.06),
    0 18px 40px -12px rgba(9, 23, 46, 0.28),
    0 40px 80px -24px rgba(9, 23, 46, 0.3);
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
    transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.accura-search.is-open .accura-search-dialog {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .accura-search-backdrop,
    .accura-search-dialog {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   3.1 Input row
   -------------------------------------------------------------------------- */

.accura-search-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    padding: 14px 14px 14px 20px;
    border-bottom: 1px solid rgba(14, 43, 92, 0.08);
}

.accura-search-glyph {
    flex: 0 0 auto;
    color: var(--accura-nav-hover, #627792);
}

.accura-search-input,
#site .accura-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--accura-nav, #0e2b5c);
}

.accura-search-input:focus {
    outline: none;
    box-shadow: none;
}

.accura-search-input::placeholder {
    color: rgba(98, 119, 146, 0.75);
    font-weight: 400;
}

/* The browser's own clear button fights the Esc chip for the same corner. */
.accura-search-input::-webkit-search-cancel-button {
    display: none;
}

/* The Customizer's button height (55px) applies to every bare <button>, which
   is what was setting this row's height — the input inside it is only 24px.
   Sized explicitly so the chip stays a chip. */
.accura-search-esc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 28px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid rgba(14, 43, 92, 0.12);
    border-radius: 7px;
    background: rgba(14, 43, 92, 0.03);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--accura-nav-hover, #627792);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.accura-search-esc:hover {
    background: rgba(14, 43, 92, 0.07);
    color: var(--accura-nav, #0e2b5c);
}


/* --------------------------------------------------------------------------
   3.2 Results
   -------------------------------------------------------------------------- */

.accura-search-results {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
}

.accura-search-group + .accura-search-group {
    margin-top: 6px;
}

.accura-search-group-full {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(14, 43, 92, 0.07);
}

.accura-search-group-label {
    padding: 10px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(98, 119, 146, 0.8);
}

.accura-search-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--accura-nav, #0e2b5c);
    text-decoration: none;
    transition: background-color 0.14s ease;
}

/* Selection is driven by the arrow keys, so it is a class rather than :hover —
   pointer and keyboard both land on the same single highlighted row. */
.accura-search-row.is-active {
    background: rgba(14, 43, 92, 0.06);
}

.accura-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(14, 43, 92, 0.05);
    color: var(--accura-nav-hover, #627792);
    transition: background-color 0.14s ease, color 0.14s ease;
}

.accura-search-icon svg {
    width: 20px;
    height: 20px;
}

.accura-search-row.is-active .accura-search-icon {
    background: var(--accura-accent, #f25e30);
    color: #fff;
}

.accura-search-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accura-search-chip {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(14, 43, 92, 0.05);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accura-nav-hover, #627792);
    white-space: nowrap;
}

.accura-search-row.is-active .accura-search-chip {
    background: rgba(242, 94, 48, 0.12);
    color: var(--accura-accent, #f25e30);
}

/* Reserved rather than inserted, so the row's contents never shift. */
.accura-search-go {
    flex: 0 0 auto;
    width: 18px;
    text-align: right;
    color: var(--accura-accent, #f25e30);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.accura-search-row.is-active .accura-search-go {
    opacity: 1;
    transform: none;
}

.accura-search-empty {
    margin: 0;
    padding: 26px 14px 22px;
    text-align: center;
    font-size: 15px;
    color: var(--accura-nav-hover, #627792);
}


/* --------------------------------------------------------------------------
   3.3 Footer hints
   -------------------------------------------------------------------------- */

.accura-search-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding: 12px 18px;
    border-top: 1px solid rgba(14, 43, 92, 0.08);
    background: rgba(14, 43, 92, 0.02);
    font-size: 12px;
    color: var(--accura-nav-hover, #627792);
}

.accura-search-hints {
    display: flex;
    align-items: center;
    gap: 16px;
}

.accura-search-hints span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.accura-search-foot kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid rgba(14, 43, 92, 0.14);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    color: var(--accura-nav, #0e2b5c);
}

.accura-search-browse {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accura-nav, #0e2b5c);
    white-space: nowrap;
}

.accura-search-browse:hover {
    color: var(--accura-accent, #f25e30);
}


@media only screen and (max-width: 600px) {
    .accura-search {
        padding: 16px;
    }

    .accura-search-dialog {
        max-height: 88vh;
    }

    .accura-search-head {
        padding: 14px 14px 14px 18px;
    }

    .accura-search-input,
    #site .accura-search-input {
        font-size: 16px;
    }

    /* Keyboard hints mean nothing on a touch device. */
    .accura-search-hints {
        display: none;
    }

    .accura-search-foot {
        justify-content: flex-end;
    }

    .accura-search-chip {
        display: none;
    }
}


/* ==========================================================================
   4. Hero slider
   ========================================================================== */

/* The side arrows are gone in favour of the dots below. They were also
   rendering their glyph as a missing-character box, since the skin's icon
   comes from the revicons font. */
sr7-arrow,
.sr7-arrows,
.tp-leftarrow,
.tp-rightarrow {
    display: none !important;
}

/* The parent theme lays a full-bleed pseudo-element over every slide
   background, shipped in its demo cyan at `mix-blend-mode: multiply`; the
   site's Additional CSS had repainted it brand orange. Multiply against a
   saturated colour strips whatever the photograph had of the opposing
   channels, which is what buried five dark photographs under one flat tint.

   Kept as a scrim, but a neutral one: plain black, which darkens the
   photograph for the white type over it without touching its hue. The blend
   mode goes back to normal so the alpha is the only thing deciding the result
   — left on multiply, the same value would darken by an amount that depends on
   what is underneath. !important on the colour because the theme's own
   declaration carries it. */
sr7-bg.sr7-layer:after {
    background-color: rgba(0, 0, 0, 0.4) !important;
    mix-blend-mode: normal;
}

.accura-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    margin: 0;
    pointer-events: auto;
}

.accura-hero-dot {
    position: relative;
    overflow: hidden;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.45);
    /* Slide backgrounds are photographic and change per slide, so the dots
       carry their own separation rather than relying on one. */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background-color 0.25s ease, width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.accura-hero-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* The active slide stretches into a pill, which doubles as the track its
   timer runs along. */
.accura-hero-dot.is-active {
    width: 30px;
    background: rgba(255, 255, 255, 0.35);
}

/* Scaled by JS from the slider's own tween, so it tracks the real slide time.
   transform rather than width: no layout on any frame. */
.accura-hero-dot-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--accura-accent, #f25e30);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.accura-hero-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media only screen and (max-width: 600px) {
    .accura-hero-dots {
        bottom: 20px;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .accura-hero-dot {
        transition: background-color 0.25s ease;
    }
}


/* ==========================================================================
   5. Scroll reveals
   --------------------------------------------------------------------------
   WPBakery animations set on a vc_section or vc_row move the element that
   carries the background fill, so the whole band arrives late and the page
   has a hole in it until it does. These containers stay put; assets/js/
   section-reveal.js fades their content columns in instead.
   ========================================================================== */

.vc_section.wpb_animate_when_almost_visible,
.vc_row.wpb_animate_when_almost_visible:not(.vc_inner) {
    opacity: 1 !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
}

.accura-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.accura-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* Content that never gets observed must not be stranded invisible. */
@media (prefers-reduced-motion: reduce) {
    .accura-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   4.1 Hero buttons
   The slider's button layer holds two anchors as HTML, so they lay out inline
   and the pair is centred by the layer itself. The theme's .button is the
   light outlined variant sized for page content (55px, white fill), which is
   wrong on photography — these are restyled as a solid/ghost pair.
   -------------------------------------------------------------------------- */

.accura-hero-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 52px !important;
    min-width: 168px;
    margin: 0 6px !important;
    padding: 0 30px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em;
    text-transform: none !important;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

/* The theme slides a dark panel up over .button on hover. It is an off-palette
   colour and fights both variants, so each handles its own hover. */
.accura-hero-btn:after {
    display: none !important;
}

/* The pair is left-aligned to the page container now, so the first button's own
   gutter would stand it 6px inside the type above it. */
.accura-hero-btn:first-child {
    margin-left: 0 !important;
}

.accura-hero-btn-solid {
    background: var(--accura-accent, #f25e30) !important;
    border: 1px solid var(--accura-accent, #f25e30) !important;
    color: #fff !important;
}

.accura-hero-btn-solid:hover {
    color: #fff !important;
    filter: brightness(0.92);
}

.accura-hero-btn-ghost {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.accura-hero-btn-ghost:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--accura-nav, #0e2b5c) !important;
}

@media only screen and (max-width: 600px) {
    .accura-hero-btn {
        height: 46px !important;
        min-width: 0;
        margin: 0 4px !important;
        padding: 0 20px !important;
        font-size: 13px !important;
    }
}


/* --------------------------------------------------------------------------
   4.2 Photographic page hero
   Every page that opens on a photograph — the five service pages, the services
   index, the five industry pages and About — now shares one treatment, so an
   inner page and the home slider agree on how a photograph is handled.

   They used to sit on brand orange with `mask`, which is
   background-blend-mode: multiply — the same flat tint the slider was taken
   off in 4. It buried the photograph under one orange wash on every page. The
   service photographs are also much brighter than the ones they replaced, so
   white type needs a real scrim rather than a blend. The gradient is weighted
   to the left because the copy is anchored there and the subject of most of
   these frames sits right of centre: dark enough to read against under the
   text, close to untouched over the subject.
   -------------------------------------------------------------------------- */

/* Column, not row: the privacy hero stacks two rows inside the section and a
   row direction would sit them side by side. */
#site .accura-svc-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 460px;
}

#site .accura-svc-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(20, 14, 32, 0.88) 0%,
        rgba(20, 14, 32, 0.74) 42%,
        rgba(20, 14, 32, 0.34) 78%,
        rgba(20, 14, 32, 0.22) 100%
    );
}

#site .accura-svc-hero > .vc_row {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Only the first row is the hero band proper; the padding it carries comes
   from a builder rule that ships !important. */
#site .accura-svc-hero > .vc_row:first-child {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

/* Authored at 5rem, which put "Custom Software Development" across three lines
   at a size that read as a banner rather than a page title. 3.5rem is a step
   under the slider's own 66px, which is the right relationship for an inner
   page. The clamp middle takes over below ~1220px so the ramp is continuous
   instead of jumping at a breakpoint; !important because the size arrives in a
   style attribute from the builder. */
#site .accura-svc-hero .vc_custom_heading.accura-svc-hero-title {
    max-width: 15em;
    margin-bottom: 0.35em;
    font-size: clamp(2.125rem, 4.6vw, 3.5rem) !important;
    font-weight: 600;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
}

/* The supporting line was 2.5rem — two thirds of the title, so the pair had no
   hierarchy and the eye had nowhere to land first. At 1.375rem it reads as the
   sentence it is, and the measure keeps it to two lines. */
#site .accura-svc-hero .vc_custom_heading.accura-svc-hero-sub {
    max-width: 30em;
    margin-left: 0 !important;
    font-size: clamp(1.0625rem, 1.7vw, 1.375rem) !important;
    font-weight: 400;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

/* The rule the builder wrote for this separator is shared with sections on
   other pages, so the 5px indent that broke the left edge is unset here rather
   than edited there. */
#site .accura-svc-hero .vc_separator {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-top: 22px !important;
}

@media only screen and (max-width: 1024px) {
    #site .accura-svc-hero {
        min-height: 380px;
    }

    #site .accura-svc-hero > .vc_row:first-child {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }
}

@media only screen and (max-width: 767px) {
    #site .accura-svc-hero {
        min-height: 300px;
    }

    #site .accura-svc-hero > .vc_row:first-child {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    /* Narrow viewports crop a 1920x620 frame hard; the left weighting stops
       being a gradient across the subject and becomes a flat wash. */
    #site .accura-svc-hero:before {
        background: rgba(20, 14, 32, 0.72);
    }
}


/* ==========================================================================
   6. Heading scale — responsive guard
   --------------------------------------------------------------------------
   The Customizer sizes are fixed pixels printed as an inline stylesheet after
   this file, so these carry an #site prefix to outrank them rather than
   !important. Only the top of the ramp needs stepping down; h4 and below are
   already comfortable at any width.
   ========================================================================== */

@media only screen and (max-width: 1024px) {
    #site h1 { font-size: 46px; }
    #site h2 { font-size: 37px; }
    #site h3 { font-size: 27px; }
}

@media only screen and (max-width: 767px) {
    #site h1 { font-size: 36px; }
    #site h2 { font-size: 30px; }
    #site h3 { font-size: 23px; }
    #site h4 { font-size: 21px; }
}

/* Long headings set tight and large break badly mid-word on narrow screens. */
#site h1,
#site h2,
#site h3 {
    overflow-wrap: break-word;
    text-wrap: balance;
}


/* --------------------------------------------------------------------------
   6.1 Eyebrow headings
   The section eyebrows ("OUR COMPANY", "OUR SERVICES") were authored at 10px
   with 4px of tracking, which is below what most people can read comfortably
   and looks incidental next to the new heading scale.

   These carry the size in a style attribute from the page builder, so a
   stylesheet rule cannot reach them without !important. Tracking moves to em
   so it scales with the size instead of staying a fixed 4px.
   -------------------------------------------------------------------------- */

#site h6.vc_custom_heading,
#site .vc_custom_heading.style1 {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    line-height: 1.5 !important;
}

@media only screen and (max-width: 767px) {
    #site h6.vc_custom_heading,
    #site .vc_custom_heading.style1 {
        font-size: 14px !important;
        letter-spacing: 0.16em !important;
    }
}


/* --------------------------------------------------------------------------
   6.2 Section heading measure
   A section heading has the full 1170px container to run into, so it sets as
   one very wide line that the eye has to track all the way across. Capping the
   measure in em (not px) keeps roughly two lines whatever size the heading is
   set to, and text-wrap: balance in 6. splits them evenly.

   This was keyed to `[style*="text-align: center"]`, which stopped matching
   anything once the headings were left-aligned — so the cap is on the heading
   levels themselves now, and the auto margins that used to centre the box are
   gone with the alignment they belonged to.
   -------------------------------------------------------------------------- */

#site h1.vc_custom_heading,
#site h2.vc_custom_heading,
#site h3.vc_custom_heading {
    max-width: 20em;
}


/* ==========================================================================
   7. Icon box cards
   --------------------------------------------------------------------------
   The card titles inherited the accent from the theme and 600 from the new
   heading scale, which made five orange headings compete with the one orange
   section heading above them. Black at 500 puts them back in their place as
   card labels; the accent stays on the "Read More" link, where it marks the
   action.
   ========================================================================== */

#site .iconbox .box-title {
    color: var(--accura-primary, #000);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

#site .iconbox {
    border-radius: 14px;
}


/* --------------------------------------------------------------------------
   5.1 Replace bounceIn
   bounceIn overshoots its end position several times before settling, which on
   a large card reads as a jump rather than an entrance. Swapped for a short
   fade-up: 14px of travel and a single decelerating move.

   The animation name is overridden rather than the classes removed, so the
   builder's own in-view trigger still drives it.
   -------------------------------------------------------------------------- */

@keyframes accura-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

#site .wpb_animate_when_almost_visible.wpb_bounceIn,
#site .wpb_animate_when_almost_visible.wpb_bounceInUp,
#site .wpb_animate_when_almost_visible.wpb_bounceInDown {
    animation-name: accura-fade-up !important;
    animation-duration: 0.55s !important;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
    animation-fill-mode: both !important;
}

@media (prefers-reduced-motion: reduce) {
    #site .wpb_animate_when_almost_visible.wpb_bounceIn,
    #site .wpb_animate_when_almost_visible.wpb_bounceInUp,
    #site .wpb_animate_when_almost_visible.wpb_bounceInDown {
        animation: none !important;
        opacity: 1 !important;
    }
}


/* --------------------------------------------------------------------------
   7.1 Equal-height industry cards
   A one-line title ("Healthcare") leaves that card shorter than its
   neighbours. The row is made a flex container so the columns stretch, and the
   card is stretched to fill the column it sits in.

   Scoped to .vc_inner rows whose direct children are the columns. The services
   grid nests differently — its columns sit inside a .row-inner — so it is not
   matched here, and its float-based 3-across layout is left alone.
   -------------------------------------------------------------------------- */

#site .vc_row.vc_inner:has(> .wpb_column .iconbox) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

#site .vc_row.vc_inner:has(> .wpb_column .iconbox) > .wpb_column {
    display: flex;
}

#site .vc_row.vc_inner:has(> .wpb_column .iconbox) > .wpb_column > .vc_column-inner,
#site .vc_row.vc_inner:has(> .wpb_column .iconbox) > .wpb_column > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

#site .vc_row.vc_inner:has(> .wpb_column .iconbox) .iconbox {
    flex: 1 1 auto;
}


/* ==========================================================================
   8. "Why AccuraSol?" — the advantages band
   --------------------------------------------------------------------------
   Six differentiators that were authored as two disconnected bulleted lists —
   three squeezed into a half column beside the photo, three left running the
   full 1170px underneath. Both read as body copy in a section that is really
   the page's sales argument.

   The page content now carries all six in a single list inside
   .accura-why-grid, and everything below sets that list two columns wide with
   a round check for a marker. It stays a plain <ul>/<li>/<strong> rather than
   a builder widget, so it is still editable as a list: adding or removing a
   bullet reflows the columns with no markup to keep in sync.
   ========================================================================== */

#site .accura-why {
    background: #fff;
}


/* --------------------------------------------------------------------------
   8.1 Lead
   -------------------------------------------------------------------------- */

/* Set a touch above body size and capped at a comfortable measure — it is the
   one paragraph in the section, so it carries the introduction on its own. */
#site .accura-why-lead p {
    max-width: 30em;
    font-size: 17px;
    line-height: 1.8;

    /* Both paragraphs were ending on a single word at this measure. Ignored by
       browsers that do not support it. */
    text-wrap: pretty;
}

#site .accura-why-lead p:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   8.2 Photo
   The image is a near-white studio shot on a white section, so its own
   background bleeds straight into the page and the subjects read as cut out.
   The hairline ring is what draws the edge; the shadow only lifts it.
   -------------------------------------------------------------------------- */

#site .accura-why-image {
    margin-bottom: 0;
}

#site .accura-why-image .vc_single_image-wrapper {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(24, 20, 32, 0.08);
    border-radius: 18px;
}

#site .accura-why-image img {
    display: block;
    width: 100%;
    height: auto;
}


/* --------------------------------------------------------------------------
   8.3 The list
   It stays a list — no card surfaces. Two columns rather than one, because a
   single column across the 1170px container gives a ~140-character measure
   that nobody tracks to the end of.
   -------------------------------------------------------------------------- */

#site .accura-why-grid {
    margin-bottom: 0;
}

#site .accura-why-grid ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
    row-gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The mark sits in the gutter the padding opens up, so the description wraps
   against the title rather than back under the check. */
#site .accura-why-grid ul li {
    --why-mark: 28px;
    --why-glyph: 13px;

    /* Optical centre of the title's first line, measured down from the top of
       the item. Both the disc and the tick hang off it, so they stay centred
       on the text rather than on the line box — and resizing the mark cannot
       drift it out of alignment. */
    --why-line-center: 12px;

    position: relative;
    margin: 0;
    padding-left: calc(var(--why-mark) + 18px);
    line-height: 1.75;
}

#site .accura-why-grid ul li:before {
    content: "";
    position: absolute;
    top: calc(var(--why-line-center) - var(--why-mark) / 2);
    left: 0;
    width: var(--why-mark);
    height: var(--why-mark);
    border-radius: 50%;
    background-color: var(--accura-accent, #f25e30);
}

/* Drawn as a mask so the tick takes the palette accent rather than a colour
   baked into the data URI, which could not follow the Customizer. */
#site .accura-why-grid ul li:after {
    content: "";
    position: absolute;
    top: calc(var(--why-line-center) - var(--why-glyph) / 2);
    left: calc((var(--why-mark) - var(--why-glyph)) / 2);
    width: var(--why-glyph);
    height: var(--why-glyph);
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The bold run that opens each bullet is the item's title. */
#site .accura-why-grid ul li strong {
    display: block;
    margin-bottom: 4px;
    color: var(--accura-primary, #000);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.45;
}


/* --------------------------------------------------------------------------
   8.4 Narrower viewports
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    #site .accura-why-grid ul {
        column-gap: 40px;
        row-gap: 30px;
    }
}

@media only screen and (max-width: 767px) {
    #site .accura-why-grid ul {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 26px;
    }

    #site .accura-why-grid ul li {
        --why-mark: 26px;
        --why-glyph: 12px;

        padding-left: calc(var(--why-mark) + 14px);
    }

    #site .accura-why-lead p {
        font-size: 16px;
    }

    /* The photo stacks under the lead once the columns break. */
    #site .accura-why-image {
        margin-top: 32px;
    }
}


/* ==========================================================================
   9. "How We Deliver" — the process band
   --------------------------------------------------------------------------
   Four delivery steps that were reading as four unrelated columns: no eyebrow
   where every other section has one, the step numbers typed into the headings,
   four orange titles competing with the orange section heading, and the body
   copy starting at a different height in each column depending on whether the
   title wrapped.

   It now sits on a light grey band, which separates it from the white section
   above and the white call to action below. The step icons are opaque white
   JPEGs, so each one sits on a white disc rather than on the band itself; the
   numbers come off a counter, so editing or reordering the steps in the
   builder cannot leave them mislabelled.
   ========================================================================== */

#site .accura-process {
    /* Held in a property because the step badge punches a ring of band colour
       between itself and the white disc — the two must not drift apart. */
    --accura-process-bg: #f2f2f5;
    --accura-process-disc: 104px;

    padding-top: 80px;
    padding-bottom: 90px;
    background: var(--accura-process-bg);
}


/* --------------------------------------------------------------------------
   9.1 Step layout
   The theme lays this list out as a fixed table. Grid gives the same four
   columns and a straightforward way to reflow them.
   -------------------------------------------------------------------------- */

#site .accura-process .iconlist.iconlist-icon-medium {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 30px;
    width: 100%;
    margin: 0;
    counter-reset: accura-step;
}

#site .accura-process .iconlist.iconlist-icon-medium > li {
    display: block;
    padding: 0;
    counter-increment: accura-step;
}

/* The rail that carries the eye from step to step. It runs the full width
   behind the discs, which are opaque, so it only shows in the gaps between
   them — and fades out past the last step rather than stopping short. */
#site .accura-process .iconlist.iconlist-icon-medium:before {
    content: "";
    position: absolute;
    top: calc(var(--accura-process-disc) / 2);
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(24, 20, 32, 0.14) 0%,
        rgba(24, 20, 32, 0.14) 78%,
        rgba(24, 20, 32, 0) 90%
    );
}


/* --------------------------------------------------------------------------
   9.2 Disc and step number
   -------------------------------------------------------------------------- */

/* The hairline is what holds the disc's edge — a white circle on a light grey
   band has almost no contrast of its own. */
#site .accura-process .iconlist .iconlist-item-icon {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--accura-process-disc);
    height: var(--accura-process-disc);
    margin-bottom: 28px;
    border: 1px solid rgba(24, 20, 32, 0.08);
    border-radius: 50%;
    background: #fff;
}

/* The source icons are square JPEGs on a white ground. Sized to sit inside the
   disc they flatten it — their white corners reach the circle before the
   artwork has any room. Clipping each one to a circle of its own instead lets
   the artwork fill the disc, and the white ground makes the seam invisible.
   Outranks the Customizer's `.orange-iconsbot img` without needing !important. */
#site .accura-process .iconlist .iconlist-item-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

#site .accura-process .iconlist .iconlist-item-icon:after {
    content: counter(accura-step);
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accura-accent, #f25e30);
    box-shadow: 0 0 0 4px var(--accura-process-bg);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}


/* --------------------------------------------------------------------------
   9.3 Step text
   -------------------------------------------------------------------------- */

/* Two lines' worth, so a title that wraps and one that does not still start
   their body copy on the same line. */
#site .accura-process .iconlist .iconlist-item-content h4 {
    min-height: 2.7em;
    margin-bottom: 12px;
    color: var(--accura-primary, #000);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* Colour is left to the theme — the band is light, so the body copy wants the
   same grey it has everywhere else on the page. */
#site .accura-process .iconlist .iconlist-item-content p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.75;
}


/* --------------------------------------------------------------------------
   9.4 Narrower viewports
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    #site .accura-process .iconlist.iconlist-icon-medium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
        row-gap: 50px;
    }

    /* A rail only reads as one across a single row of steps. */
    #site .accura-process .iconlist.iconlist-icon-medium:before {
        display: none;
    }

    #site .accura-process .iconlist .iconlist-item-content h4 {
        min-height: 0;
    }
}

@media only screen and (max-width: 767px) {
    #site .accura-process {
        --accura-process-disc: 88px;

        padding-top: 60px;
        padding-bottom: 64px;
    }

    #site .accura-process .iconlist.iconlist-icon-medium {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
    }

    #site .accura-process .iconlist .iconlist-item-icon {
        margin-bottom: 22px;
    }
}


/* ==========================================================================
   10. Footer
   --------------------------------------------------------------------------
   Everything here is scoped to #site-footer rather than #site. The theme's
   options screen prints its own footer rules inline in the head, after this
   stylesheet, so a plain class selector loses to them on source order — the id
   is what makes these stick without reaching for !important.
   ========================================================================== */

/* The footer's own palette and text size, stated once. Every rule below reads
   from these rather than repeating a hex, so retuning the footer is a change
   here and nowhere else. The heading colour is the text colour a step darker —
   same hue, so the columns still read as one family. */
#site-footer {
    --footer-text: #555250;
    --footer-heading: #3c3938;
    --footer-size: 14px;
}

/* The catch-all, so anything in the footer that is not named further down still
   lands on the right colour and size. The more specific rules below win where
   they need to — the column headings keep their own size, for instance. */
#site-footer .footer-widgets,
#site-footer .footer-widgets a,
#site-footer .footer-copyright,
#site-footer .footer-copyright a {
    color: var(--footer-text);
    font-size: var(--footer-size);
}


/* --------------------------------------------------------------------------
   10.0 Closing call to action
   The theme's options screen paints the whole widget in the accent, so the
   body copy came out orange while the heading — an <h2>, and the only one on
   the page — came out grey and half again too large. That is the page's colour
   logic inverted. The heading is an <h3> in the widget content now, so it
   takes the same scale and accent as every other section heading, and these
   two rules put the eyebrow and body copy back the right way round.
   -------------------------------------------------------------------------- */

#site-footer .content-bottom-widgets .widget {
    color: #434343;
}

/* The site's eyebrow treatment, matching "OUR SERVICES" and "OUR PROCESS". */
#site-footer .content-bottom-widgets .widget-title {
    color: #627792;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1.5;
    text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
    #site-footer .content-bottom-widgets .widget-title {
        font-size: 14px;
        letter-spacing: 0.16em;
    }
}


/* No rule along the top of #site-footer: the call to action is inside it, so a
   border there lands above the CTA rather than above the link columns. */
#site-footer .footer-widgets-inner {
    padding-top: 66px;
    padding-bottom: 26px;
}


/* --------------------------------------------------------------------------
   10.1 Brand column
   -------------------------------------------------------------------------- */

/* The full lockup at its own colour and strength. No hover treatment: with
   nothing held back there is nothing for a hover to reveal. */
#site-footer .footer-widgets .widget_media_image img {
    width: 172px;
    height: auto;
}


/* --------------------------------------------------------------------------
   10.2 Contact details
   The address, phone and mail ran together in one paragraph split by a pipe.
   They are a list now, one line each, marked with an icon.
   -------------------------------------------------------------------------- */

#site-footer .accura-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Matched to the menu columns opposite. Left alone, this column ran three
   treatments at once: the address inherited the body grey at 16px, while the
   phone and mail took the theme's footer link navy — none of them the slate the
   rest of the footer is set in. The links need naming separately or the theme's
   own `.site-footer .footer-widgets a` colour still wins. */
#site-footer .accura-contact li,
#site-footer .accura-contact a {
    color: var(--footer-text);
    font-size: var(--footer-size);
    line-height: 1.55;
}

#site-footer .accura-contact li {
    position: relative;
    margin: 0 0 14px;
    padding-left: 30px;
}

#site-footer .accura-contact li:last-child {
    margin-bottom: 0;
}

/* Masked rather than inlined so every icon takes the palette accent and none
   of them carry a colour the Customizer could not reach. */
/* top is calibrated against the line box above — 15px over 1.55 leading puts the
   first line's optical centre near 11px, so a 17px mark hangs from 3px. */
#site-footer .accura-contact li:before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 17px;
    height: 17px;
    background-color: var(--accura-accent, #f25e30);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

#site-footer .accura-contact-location:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

#site-footer .accura-contact-phone:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");
}

#site-footer .accura-contact-email:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   10.3 Menu columns
   The four top-level items are column headings that happen to be links, so
   they are set as headings — the site's own eyebrow treatment, which is what
   separates them from the pages listed underneath.
   -------------------------------------------------------------------------- */

#site-footer .widget_nav_menu .menu > li > a {
    display: block;
    margin-bottom: 20px;
    color: var(--footer-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* The theme fades this whole block to 70%, which silently lightens whatever
   colour is declared on the links inside it — #555250 was landing as #878583.
   Colour does the muting in this footer, so the block renders at full strength
   and a declared value is the value that appears. */
#site-footer .widget_nav_menu .menu > li .sub-menu {
    opacity: 1;
}

#site-footer .widget_nav_menu .menu .sub-menu li {
    margin-bottom: 11px;
}

#site-footer .widget_nav_menu .menu .sub-menu li:last-child {
    margin-bottom: 0;
}

#site-footer .widget_nav_menu .menu .sub-menu a {
    display: inline-block;
    color: var(--footer-text);
    font-size: var(--footer-size);
    line-height: 1.55;
    transition: color 0.25s ease, transform 0.25s ease;
}

/* The theme's options screen sets pure red for this hover. */
#site-footer .footer-widgets a:hover,
#site-footer .widget_nav_menu .menu .sub-menu a:hover,
#site-footer .footer-copyright a:hover {
    color: var(--accura-accent, #f25e30);
}

#site-footer .widget_nav_menu .menu .sub-menu a:hover {
    transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   10.4 Social
   -------------------------------------------------------------------------- */

#site-footer .social-icons {
    margin-top: 26px;
}

/* The theme fades these to 30% and only brings them back on hover, which works
   for a row of six and reads as disabled for a single one. Colour does the
   muting here instead, so the icon is legible at rest. */
#site-footer .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    color: var(--footer-text);
    font-size: 28px;
    line-height: 1;
    transition: color 0.25s ease, transform 0.25s ease;
}

#site-footer .social-icons a:hover {
    opacity: 1;
    color: var(--accura-accent, #f25e30);
    transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   10.5 Copyright bar
   -------------------------------------------------------------------------- */

#site-footer .footer-copyright {
    border-top: 1px solid rgba(14, 43, 92, 0.09);
}

#site-footer .footer-copyright-inner {
    padding-top: 26px;
    padding-bottom: 26px;
}


/* --------------------------------------------------------------------------
   10.6 Narrower viewports
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
    #site-footer .footer-widgets-inner {
        padding-top: 48px;
    }

    #site-footer .widget_nav_menu .menu > li > a {
        margin-bottom: 14px;
    }
}


/* ==========================================================================
   11. Buttons — one primary action, everywhere
   --------------------------------------------------------------------------
   The site had four different primary buttons. The theme's own default is a
   white fill with orange text, 55px tall, that wipes a near-black panel
   (#231834) up over itself on hover — an off-palette colour that reads as a
   different button entirely, and the reason the footer CTA turned into a black
   box. On top of that, .large took it to 64px/18px, .round made it a pill, and
   the contact form's submit came out black.

   The hero pair was already restyled away from all of that (4.1), and the
   header CTA after it (2.4). This section is the same treatment applied to
   every remaining primary action, so there is one button on the site in three
   sizes: header (44px), default (52px), and narrow-screen (46px).

   Deliberately excluded: .button.no-bg. Those are the "Read More" arrow links
   inside the icon boxes — a link wearing a button class, not a button.
   ========================================================================== */

#site .button.accent,
#site .button.primary,
#site input[type="submit"],
#site input[type="button"],
#site button[type="submit"],
#site .wpcf7-submit {
    display: inline-block;
    height: 52px;
    min-width: 168px;
    padding: 0 30px;
    border: 1px solid var(--accura-accent, #f25e30);
    border-radius: 6px;
    background: var(--accura-accent, #f25e30);
    color: #fff;
    font-size: 15px;
    font-weight: 500;

    /* Height less the two borders — this is what centres the label in both an
       <a> and an <input>, where flex alignment would not reach the value. */
    line-height: 50px;

    letter-spacing: 0.01em;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color 0.22s ease, border-color 0.22s ease,
        color 0.22s ease, filter 0.22s ease;
}

/* The dark wipe. */
#site .button.accent:after,
#site .button.primary:after,
#site .wpcf7-submit:after {
    display: none;
}

#site .button.accent:hover,
#site .button.primary:hover,
#site input[type="submit"]:hover,
#site input[type="button"]:hover,
#site button[type="submit"]:hover,
#site .wpcf7-submit:hover {
    border-color: var(--accura-accent, #f25e30);
    background: var(--accura-accent, #f25e30);
    color: #fff;
    filter: brightness(0.92);
}

@media only screen and (max-width: 600px) {
    #site .button.accent,
    #site .button.primary,
    #site input[type="submit"],
    #site input[type="button"],
    #site button[type="submit"],
    #site .wpcf7-submit {
        height: 46px;
        min-width: 0;
        padding: 0 22px;
        font-size: 14px;
        line-height: 44px;
    }
}


/* ==========================================================================
   12. Cookie notice
   --------------------------------------------------------------------------
   A card in the bottom-right corner rather than a full-width bar across the
   foot of the page: the site's own footer CTA lives down there, and a bar
   would sit on top of it on every first visit.

   The card is printed in the footer, outside #site, so none of the theme's
   own scoped rules reach it — but the Customizer's bare-element rules (the
   55px button height in particular) still do, which is why the buttons and
   the heading below reset rather than inherit.

   Secondary copy is a literal grey rather than --accura-nav-hover. That token
   carries the header's menu *hover* colour, which on this site is the accent
   orange — right for a menu item being pointed at, wrong for a paragraph.
   ========================================================================== */

.accura-cookies {
    --accura-cookies-muted: #627792;

    /* The secondary button's fill. A literal charcoal rather than --accura-nav:
       that token is the header's navy, which against the accent orange beside
       it reads as a second coloured button rather than the quieter half of a
       pair. */
    --accura-cookies-dark: #2f3038;
}

/* The layer covers the viewport so the backdrop has something to fill; the card
   is held in the bottom-right corner by the padding rather than by offsets of
   its own. */
.accura-cookies {
    position: fixed;
    inset: 0;

    /* Under the search palette (9999), which has to be able to cover this. */
    z-index: 9998;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px;
}

.accura-cookies[hidden] {
    display: none;
}

.accura-cookies-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 23, 46, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.34s ease;
}

.accura-cookies.is-open .accura-cookies-backdrop {
    opacity: 1;
}

.accura-cookies-card {
    position: relative;

    /* Wide enough to set the notice in two lines. At 360px it broke to three
       and left "website." stranded on a line of its own. */
    width: 400px;

    max-width: 100%;

    /* Clips the solid button into the card's bottom corners. */
    overflow: hidden;

    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(9, 23, 46, 0.06),
    0 18px 40px -12px rgba(9, 23, 46, 0.22),
    0 40px 80px -24px rgba(9, 23, 46, 0.26);
    opacity: 0;
    transform: translateY(18px) scale(0.97);

    /* The out transition is the in transition run backwards, so the card
       settles away rather than blinking off. Timings here are what the
       script's TRANSITION constant has to stay in step with. */
    transition: opacity 0.26s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.accura-cookies.is-open .accura-cookies-card {
    opacity: 1;
    transform: none;
}

.accura-cookies-card:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .accura-cookies-backdrop,
    .accura-cookies-card {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   12.1 Notice
   -------------------------------------------------------------------------- */

.accura-cookies-body {
    padding: 32px 30px 26px;
    text-align: center;
}

.accura-cookies-glyph {
    display: block;
    margin: 0 auto 16px;
}

.accura-cookies-title {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--accura-nav, #0e2b5c);
}

.accura-cookies-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--accura-cookies-muted);
}

/* The quiet row under the copy: managing cookies and the policy are both
   detours, so neither competes with the two answers below them. */
.accura-cookies-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 13px;
}

.accura-cookies-link {
    /* Reset, because "Manage cookies" is a <button> — it acts on this page
       rather than going anywhere, so it should not be a link with a fake
       href — and the Customizer sizes every bare button at 55px. */
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: inherit;
    font-weight: 500;
    line-height: 1.4;
    color: var(--accura-cookies-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    transition: color 0.18s ease;
}

.accura-cookies-link:hover,
.accura-cookies-link:focus-visible {
    color: var(--accura-accent, #f25e30);
}

.accura-cookies-sep {
    color: rgba(14, 43, 92, 0.28);
}


/* --------------------------------------------------------------------------
   12.2 Actions
   Two filled halves across the foot of the card, edge to edge, so each takes
   the card's bottom radius from the clip above rather than its own. Both are
   solid, so there is no rule between them and the body — the colour change is
   the division.
   -------------------------------------------------------------------------- */

.accura-cookies-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.accura-cookies-actions[hidden] {
    display: none;
}

.accura-cookies-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-width: 0;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, filter 0.2s ease;
}

/* The quieter half — "Manage Cookies", "Reject All". */
.accura-cookies-btn-alt {
    background: var(--accura-cookies-dark);
}

.accura-cookies-btn-alt:hover,
.accura-cookies-btn-alt:focus-visible {
    background: #3c3d47;
}

.accura-cookies-btn-solid {
    background: var(--accura-accent, #f25e30);
}

.accura-cookies-btn-solid:hover,
.accura-cookies-btn-solid:focus-visible {
    filter: brightness(0.92);
}

.accura-cookies-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}


/* --------------------------------------------------------------------------
   12.3 Settings
   -------------------------------------------------------------------------- */

.accura-cookies-prefs {
    padding: 20px 22px 6px;
    text-align: left;
}

.accura-cookies-prefs[hidden] {
    display: none;
}

.accura-cookies-prefs-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.accura-cookies-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(14, 43, 92, 0.05);
    box-shadow: none;
    color: var(--accura-cookies-muted);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.accura-cookies-back:hover {
    background: rgba(14, 43, 92, 0.1);
    color: var(--accura-nav, #0e2b5c);
}

.accura-cookies-prefs-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--accura-nav, #0e2b5c);
}

.accura-cookies-list {
    margin: 0;
    padding: 0;
    list-style: none;

    /* Three rows fit; a fourth category added to the template scrolls rather
       than growing the card past the fold on a short screen. */
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.accura-cookies-row + .accura-cookies-row {
    border-top: 1px solid rgba(14, 43, 92, 0.07);
}

/* The whole row is the label, so the description is part of the hit area. */
.accura-cookies-switch {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 0;
    cursor: pointer;
}

.accura-cookies-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.accura-cookies-track {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;

    /* Optical alignment with the label's cap height rather than its line box. */
    margin-top: 1px;

    border-radius: 999px;
    background: rgba(14, 43, 92, 0.16);
    transition: background-color 0.2s ease;
}

.accura-cookies-track:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(9, 23, 46, 0.25);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.accura-cookies-switch input:checked ~ .accura-cookies-track {
    background: var(--accura-accent, #f25e30);
}

.accura-cookies-switch input:checked ~ .accura-cookies-track:before {
    transform: translateX(16px);
}

.accura-cookies-switch input:focus-visible ~ .accura-cookies-track {
    outline: 2px solid var(--accura-accent, #f25e30);
    outline-offset: 2px;
}

/* Locked on and not a choice. Faded rather than greyed — a grey track reads as
   off at a glance, which is the opposite of what these categories are. */
.accura-cookies-switch input:disabled:checked ~ .accura-cookies-track {
    opacity: 0.45;
}

.accura-cookies-switch input:disabled:not(:checked) ~ .accura-cookies-track {
    background: rgba(14, 43, 92, 0.12);
}

.accura-cookies-switch:has(input:disabled) {
    cursor: default;
}

.accura-cookies-copy {
    display: block;
    min-width: 0;
}

.accura-cookies-label {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--accura-nav, #0e2b5c);
}

.accura-cookies-always {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--accura-cookies-muted);
}

.accura-cookies-desc {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--accura-cookies-muted);
}


/* --------------------------------------------------------------------------
   12.4 Narrow screens
   Corner card becomes a sheet across the bottom — 360px in a 375px viewport
   leaves an uneven margin, and the copy wants the width.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 600px) {
    .accura-cookies {
        padding: 12px;
    }

    .accura-cookies-card {
        width: 100%;
    }

    .accura-cookies-body {
        padding: 26px 24px 22px;
    }

    .accura-cookies-title {
        font-size: 23px;
    }

    .accura-cookies-btn {
        height: 46px;
    }

    .accura-cookies-list {
        max-height: 40vh;
    }
}


/* ==========================================================================
   13. Mission / Vision page — the paired panels
   --------------------------------------------------------------------------
   The row (hooked `mvv-split`) pairs a light Mission column against a dark
   (#37343C) Vision column that carries the `webblkbox` class.

   Two things were off on the dark side: the intro paragraph had no colour so
   it fell back to the theme's default body #627792 — dark slate on a dark
   panel, effectively invisible — and both the paragraph and the check-list
   below it sat too dim once made visible. They're lifted to a lighter grey so
   the copy reads clearly above the panel; the list spans carry their colour
   inline, so those need !important.

   The paragraph also butted straight into the first check-list item. The gap
   goes on both columns, not just the dark one, so the two lists stay level
   where they sit side by side. The button keeps its own colour (it sets it
   explicitly); the heading keeps its inline white.
   ========================================================================== */

/* Space between each column's intro paragraph and its check-list. */
#site .mvv-split .iconlist {
    margin-top: 26px;
}

/* Vision (dark panel): lift the body copy off the default dark slate. */
#site .webblkbox .wpb_text_column,
#site .webblkbox .wpb_text_column p {
    color: #c9c8d4;
}

#site .webblkbox .iconlist-item-content span {
    color: #c9c8d4 !important;
}


/* ==========================================================================
   14. About page — Our Story and the CEO message
   --------------------------------------------------------------------------
   The About page was three centred text blocks stacked one under another and a
   small square portrait beside a paragraph — no eyebrows, no section rhythm,
   none of the language the rest of the site speaks in. Two hooks put it back in
   step: `accura-story` gives the opening a heading/lead split and a framed
   founding-story row, and `accura-ceo` turns the leadership note into a proper
   pull-quote beside a full-height portrait.

   Everything is driven from these classes and the shared `style1` eyebrow, so
   the page carries no new builder `vc_custom_*` rules to keep in sync.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 Our Story — intro split
   -------------------------------------------------------------------------- */

/* padding carries !important because the theme prints its own #site-scoped
   section spacing inline after this file — same-specificity, later source
   order — so a plain rule loses the top padding while background still wins. */
#site .accura-story {
    padding-top: 120px !important;
    padding-bottom: 84px !important;
    background: #fff;
}

/* The lead sits beside the photo and is vertically centred against it, so it
   reads a step above body size and fills its half of the row. */
#site .accura-story-lead p {
    margin: 0;
    color: #3d3b47;
    font-size: 18px;
    line-height: 1.85;
    text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   14.2 Our Story — the founding band
   The intro pairs the studio photo with the "Who We Are" lead (row 1); this
   band sits below it and carries the two founding chapters side by side, so
   the section reads as one balanced block rather than a heading marooned above
   a floating photo.
   -------------------------------------------------------------------------- */

#site .accura-story-founding {
    margin-top: 56px;
    padding-top: 52px;
    border-top: 1px solid rgba(24, 20, 32, 0.09);
}

/* The two chapters keep a clear channel between them at desktop width. */
#site .accura-story-founding > .wpb_column:first-child {
    padding-right: 4%;
}

/* The same framed treatment the home "Why AccuraSol" photo carries: a hairline
   ring and a soft corner so a near-white studio shot does not bleed into the
   white section behind it. */
#site .accura-story-media {
    margin-bottom: 0;
}

#site .accura-story-media .vc_single_image-wrapper {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(24, 20, 32, 0.08);
    border-radius: 18px;
    box-shadow: 0 24px 50px -30px rgba(24, 20, 32, 0.35);
}

#site .accura-story-media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Each sub-head carries a short accent bar in the gutter, so "Why We Started"
   and "When We Started" read as labelled chapters of the story rather than
   headings that happen to be small. */
#site .accura-story-subhead {
    position: relative;
    max-width: none;
    margin: 0;
    padding-left: 20px;
    color: var(--accura-primary, #181223);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

#site .accura-story-subhead:before {
    content: "";
    position: absolute;
    top: 0.15em;
    bottom: 0.15em;
    left: 0;
    width: 4px;
    border-radius: 4px;
    background: var(--accura-accent, #f25e30);
}

#site .accura-story-body p {
    margin: 0;
    max-width: 34em;
    color: #55565f;
    font-size: 16px;
    line-height: 1.85;
    text-wrap: pretty;
}

#site .accura-story-cta {
    margin-top: 40px;
}

#site .accura-story-cta .wpb_text_column {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   14.3 "What We Do" intro
   The three navigation cards below had no header where every other section on
   the site opens with an eyebrow and a heading; this row supplies one, set
   opposite a one-line lead.
   -------------------------------------------------------------------------- */

#site .accura-help-intro {
    padding-top: 78px;
    padding-bottom: 32px;
}

#site .accura-help-lead p {
    max-width: 26em;
    margin: 0;
    color: #6b6a77;
    font-size: 16px;
    line-height: 1.8;
}


/* --------------------------------------------------------------------------
   14.4 CEO message
   A light band after the dark "technology partner" section: the full portrait
   on the left, a large pull-quote on the right. The portrait sits over an
   offset accent block so it reads as a composed frame, not a pasted-in photo.
   -------------------------------------------------------------------------- */

/* padding !important for the same reason as .accura-story above. */
#site .accura-ceo {
    padding-top: 74px !important;
    padding-bottom: 74px !important;
    background: #f5f5f8;
}

#site .accura-ceo-photo {
    position: relative;
    margin: 0;
}

/* The accent block peeks out from behind the lower-right corner of the photo. */
#site .accura-ceo-photo:after {
    content: "";
    position: absolute;
    right: -16px;
    bottom: -16px;
    z-index: 0;
    width: 44%;
    height: 48%;
    border-radius: 16px;
    background: var(--accura-accent, #f25e30);
}

#site .accura-ceo-photo .vc_single_image-wrapper {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 30px 60px -30px rgba(24, 20, 32, 0.5);
}

#site .accura-ceo-photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Breathing room between the portrait (and its accent block, which reaches into
   the gutter) and the quote. Side-by-side layout only — the columns stack on
   mobile, where this indent would just push the copy off-centre. */
@media only screen and (min-width: 768px) {
    #site .accura-ceo .wpb_column + .wpb_column {
        padding-left: 46px;
    }
}

/* A large quotation mark sets the note up as a quote before the eye reaches the
   first word; it hangs on its own line above the text. */
#site .accura-ceo-quote:before {
    content: "\201C";
    display: block;
    height: 0.4em;
    margin-bottom: 2px;
    color: var(--accura-accent, #f25e30);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 64px;
    line-height: 1;
}

#site .accura-ceo-quote p {
    max-width: 26em;
    margin: 0;
    color: #23202b;
    font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

#site .accura-ceo-attrib {
    position: relative;
    margin-top: 4px;
    padding-top: 22px;
}

/* A short rule marks the hand-off from the quote to the attribution. */
#site .accura-ceo-attrib:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: var(--accura-accent, #f25e30);
}

#site .accura-ceo-attrib strong {
    display: block;
    color: var(--accura-primary, #181223);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

#site .accura-ceo-attrib span {
    display: block;
    margin-top: 3px;
    color: var(--accura-accent, #f25e30);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* --------------------------------------------------------------------------
   14.5 Narrower viewports
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    #site .accura-story {
        padding-top: 92px !important;
        padding-bottom: 66px !important;
    }

    #site .accura-ceo {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
}

@media only screen and (max-width: 767px) {
    #site .accura-story {
        padding-top: 68px !important;
        padding-bottom: 52px !important;
    }

    #site .accura-story-lead p {
        font-size: 17px;
    }

    /* The photo now stacks under the intro copy, and the two founding chapters
       stack one under the other with a clear gap between them. */
    #site .accura-story-media {
        margin-top: 30px;
        margin-bottom: 0;
    }

    #site .accura-story-founding {
        margin-top: 40px;
        padding-top: 40px;
    }

    #site .accura-story-founding > .wpb_column:first-child {
        margin-bottom: 34px;
        padding-right: 0;
    }

    #site .accura-story-subhead {
        font-size: 20px;
    }

    #site .accura-help-intro {
        padding-top: 52px;
        padding-bottom: 22px;
    }

    #site .accura-ceo {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* A full-width tall portrait would swamp the screen; hold it to a sensible
       width and centre it, leaving room for the accent block. */
    #site .accura-ceo-photo {
        max-width: 320px;
        margin: 0 auto 36px;
    }

    #site .accura-ceo-quote:before {
        font-size: 56px;
    }
}