/*
Theme Name: Saira Child
Theme URI: http://demo.casethemes.net/saira
Description: Child theme for Saira. Holds local overrides so the parent theme can be updated safely.
Author: Case-Themes
Author URI: https://casethemes.net/
Template: saira
Version: 1.0.0
License: ThemeForest
License URI: https://themeforest.net/licenses
Text Domain: saira-child
*/

/* Homepage service cards: equalise card height within a row so the buttons
   beneath them line up. Scoped to the class the cards carry, so no other
   icon box on the site is affected. */
.nour-card-equal,
.nour-card-equal .elementor-widget-container,
.nour-card-equal .pxl-icon-box {
    height: 100%;
}
.nour-card-equal .pxl-icon-box .pxl-item--inner {
    height: 100%;
}

/* Trust strip: these four cards straddle the hero photo, so a transparent card
   left the top half of each title sitting on the city image. Solid white makes
   them read as cards and keeps the text legible over the photo. */
.nour-trust-card .pxl-icon-box1.style-6 .pxl-item--inner {
    background: #FFFFFF;
    border-color: #E4E4EC;
    box-shadow: 0 18px 40px rgba(12, 18, 38, .10);
}

/* These cards carry no description, and the empty node still takes up space. */
.nour-trust-card .pxl-item--description:empty { display: none; }

/* Content cards: style-6 centres its text, which in a one-third column turns a
   four-line description into ragged four-word lines. Left-aligned reads as a
   card rather than a caption. The trust strip stays centred - its titles are
   short labels, and centring suits them. */
.nour-card-equal:not(.nour-trust-card) .pxl-icon-box1.style-6 .pxl-item--inner {
    text-align: left;
    padding: 26px 24px 26px 24px;
}
.nour-card-equal:not(.nour-trust-card) .pxl-icon-box1.style-6 .pxl-item--icon {
    margin-bottom: 14px;
}

/* ---- Content cards -------------------------------------------------------
   The column is now the card: its background, 1px border, radius and padding
   are Elementor column settings, so they stay editable in the builder. The
   icon box inside is flattened so there is only one box instead of two nested
   ones, and the button is pinned to the bottom of the card so buttons line up
   across a row.

   The column is matched through the widget it contains, because this theme
   rewrites column classes and drops Elementor's custom class there - on
   widgets the custom class does render. */
.nour-card-flat .pxl-icon-box1.style-6 .pxl-item--inner {
    border: 0;
    padding: 0;
    background: none;
    min-width: 0;
}

/* the equal-height rule above must not stretch a flattened box, or there is no
   free space left for the button to be pushed into */
.nour-card-flat,
.nour-card-flat .elementor-widget-container,
.nour-card-flat .pxl-icon-box,
.nour-card-flat .pxl-icon-box .pxl-item--inner {
    height: auto;
}

.elementor-column:has(> .elementor-element-populated > .nour-card-flat) {
    display: flex;
}
.elementor-element-populated:has(> .nour-card-flat) {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* the gutter between cards - set on the inner wrapper rather than the
       column so the percentage column widths are left alone */
    /* 15px, not 12px: an inner column is inset 15px by gap=extended, so a 15px
       card margin puts the card box on the same left edge as section text. */
    margin: 0 15px 24px 15px;
}
.elementor-element-populated:has(> .nour-card-flat) > .elementor-widget-pxl_button {
    margin-top: auto;
    margin-bottom: 0;
}

/* Find us: round the map so it matches the card language used elsewhere on the
   page. The map widget has no radius control of its own. */
.nour-map iframe,
.nour-map .pxl-google-maps,
.nour-map > div {
    border-radius: 24px;
    overflow: hidden;
}

/* "Where we work" cards hold a heading + text editor rather than an icon box,
   so they are matched through the heading's own class. Same gutter and
   equal-height behaviour as the icon-box cards. */
.elementor-column:has(> .elementor-element-populated > .nour-cardtext) {
    display: flex;
}
.elementor-element-populated:has(> .nour-cardtext) {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0 12px 24px 12px;
}

/* ---- Comparison table ("Which standard do you need") --------------------
   A two-column table of situations. Below about 640px it has to scroll rather
   than crush its own columns, so the wrapper scrolls and the table keeps a
   floor width. */
.nour-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 8px;
}
.nour-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    text-align: left;
}
.nour-table th,
.nour-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #E4E4EC;
    vertical-align: top;
}
.nour-table thead th {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8A90A3;
    border-bottom-width: 2px;
}
.nour-table tbody th {
    font-weight: 400;
}
.nour-table tbody td {
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Style pass: measured fixes ------------------------------------------
   Numbers below come from getBoundingClientRect over CDP, not from eyeballing
   screenshots. */

/* The flattened card kept 26px/24px of inner padding from somewhere later in
   the cascade than the rule above, so the icon-box title and lead paragraph
   sat 24px right of the sibling text widget in the same card - visible on the
   ISO standards cards, where a lead paragraph sits directly above a bullet
   list. Both children must share the column's content edge. */
.nour-card-flat .pxl-icon-box .pxl-item--inner {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    min-width: 0 !important;
    text-align: left;
}

/* Bullet lists in body copy had padding-left:0 with markers outside the box,
   so the markers hung into the card padding and the list did not read as
   indented under its lead paragraph. */
.pxl-text-editor ul,
.elementor-widget-text-editor ul,
.pxl-text-editor ol,
.elementor-widget-text-editor ol {
    padding-left: 1.35em;
    margin-left: 0;
}
.pxl-text-editor li,
.elementor-widget-text-editor li {
    /* the theme sets list-style-position:inside on li, which puts the marker
       in the first line box: every wrapped line then starts to the LEFT of
       the text above it. Visible on every multi-line bullet on these pages. */
    list-style-position: outside;
    margin-bottom: 6px;
}

/* The CTA + FAQ band: 20px of internal padding against 46px elsewhere, a 5px
   radius against the 24px used by every card, and its own <h2> falling through
   to the theme's 48px while the section headings around it are 32px. */
.elementor-inner-section:has(.pxl-accordion) > .elementor-container {
    align-items: flex-start;
}
.elementor-inner-section:has(.pxl-accordion) .elementor-widget-text-editor h2,
.elementor-inner-section:has(.pxl-accordion) .elementor-widget-heading h2,
.elementor-inner-section:has(.pxl-accordion) .pxl-text-editor h2 {
    font-size: 32px;
    line-height: 1.25;
    margin: 0 0 14px;
}
.elementor-inner-section:has(.pxl-accordion) .elementor-widget-text-editor h2 strong { font-weight: inherit; }
.elementor-inner-section:has(.pxl-accordion) .pxl-text-editor p { margin-bottom: 12px; }

/* The comparison table sits on the #E5E5E5 section, where its #E4E4EC hairlines
   were effectively invisible. Give it the same white surface as a card. */
.nour-table {
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(12, 18, 38, .06);
}
.nour-table thead th { background: #F7F7FA; }
.nour-table tr:last-child th,
.nour-table tr:last-child td { border-bottom: 0; }

/* On a phone the 560px min-width made the table scroll sideways, which just
   reads as a truncated table - the second column was off screen with nothing
   to say so. It is only two columns, so let it fit instead. */
@media (max-width: 767px) {
    .nour-table { min-width: 0; }
    .nour-table th,
    .nour-table td { padding: 12px 12px; }
    .nour-table tbody td { white-space: normal; font-size: 15px; }
    .nour-table thead th { font-size: 11px; letter-spacing: .04em; }
}

/* The buyer row on the vendor registration page is nine short names and
   nothing else. A single column of nine bullets wastes the width and reads as
   an afterthought, so it runs in three columns on desktop. */
.nour-buyers ul {
    columns: 3;
    column-gap: 48px;
}
.nour-buyers li { break-inside: avoid; }
@media (max-width: 767px) {
    .nour-buyers ul { columns: 2; column-gap: 24px; }
}

/* ==========================================================================
   DESIGN PASS - service pages
   --------------------------------------------------------------------------
   The pages were correct but flat: 58px-nominal icons rendering as bare 24px
   glyphs, cards that were a 1px box and nothing else, 150-character measure on
   body copy, #7A7A7A text on a dead #E5E5E5 band, and default markers on every
   list. Everything below is surface treatment - no layout is moved except
   where a block had no layout to begin with.

   Colours derive from the Elementor kit globals: primary #8D8DFF,
   secondary #191919, accent #3CDBD8.
   ========================================================================== */

:root {
    --ns-ink:      #101227;   /* headings */
    --ns-body:     #4E5367;   /* body copy - #7A7A7A fails contrast at 16px */
    --ns-muted:    #7C8194;
    --ns-line:     #E9EAF4;
    --ns-line-alt: #D9DBEE;
    --ns-band:     #F5F6FC;
    --ns-brand:    #8D8DFF;
    --ns-brand-dk: #6C6CF0;
    --ns-accent:   #3CDBD8;
    --ns-chip:     linear-gradient(135deg, #EFEFFE 0%, #E4F9F8 100%);
    --ns-rule:     linear-gradient(90deg, #8D8DFF 0%, #3CDBD8 100%);
    --ns-shadow:   0 1px 2px rgba(16, 24, 40, .04), 0 10px 26px -14px rgba(16, 24, 40, .16);
    --ns-shadow-h: 0 2px 4px rgba(16, 24, 40, .05), 0 22px 44px -18px rgba(16, 24, 40, .28);
}

/* the pages this pass covers - everything else hangs off a nour-/ns- class and
   needs no page scope */
.page-id-9671, .page-id-10605, .page-id-10276, .page-id-9644, .page-id-9727 { }


/* ---- 1. Section headings -------------------------------------------------
   Every section opened with an unadorned black line of type, so nine sections
   read as one undifferentiated column. A short gradient rule marks the start
   of each one and is the only piece of brand colour in the body of the page. */
.nour-sec-h .pxl-item--title {
    color: var(--ns-ink);
    letter-spacing: -.02em;
}
.nour-sec-h::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: var(--ns-rule);
    margin: 0 0 20px;
}
@media (max-width: 767px) {
    .nour-sec-h::before { width: 34px; height: 3px; margin-bottom: 15px; }
}


/* ---- 2. Body copy --------------------------------------------------------
   Two problems, both measurable: #7A7A7A on white is 4.0:1, below the 4.5:1
   floor at this size, and a paragraph in a 100% column ran the full 1180px -
   about 150 characters, roughly twice a comfortable measure. */
:is(.page-id-9671, .page-id-10605, .page-id-10276, .page-id-9644, .page-id-9727)
#pxl-main :is(.pxl-text-editor, .elementor-widget-text-editor) {
    color: var(--ns-body);
    line-height: 1.75;
}
/* the child combinator was wrong: pxl_text_editor wraps its content in a
   .pxl-item--inner div, so > never matched and every paragraph on the page
   was still running the full 1180px. Measured, then fixed. */
:is(.page-id-9671, .page-id-10605, .page-id-10276, .page-id-9644, .page-id-9727)
#pxl-main :is(.pxl-text-editor, .elementor-widget-text-editor) :is(p, ul, ol) {
    max-width: 74ch;
}
/* ...but not inside anything that already lays itself out in columns */
:is(.ns-steps, .ns-cols-2, .nour-buyers, .nour-table-wrap) :is(p, ul, ol),
:is(.ns-cols-2, .nour-buyers) ul {
    max-width: none;
}
:is(.page-id-9671, .page-id-10605, .page-id-10276, .page-id-9644, .page-id-9727)
#pxl-main :is(.pxl-text-editor, .elementor-widget-text-editor) strong {
    color: var(--ns-ink);
    font-weight: 600;
}


/* ---- 3. List markers -----------------------------------------------------
   Browser-default discs at browser-default size. A small gradient square reads
   as part of the design system and lines the text up on a single indent. */
:is(.page-id-9671, .page-id-10605, .page-id-10276, .page-id-9644, .page-id-9727)
#pxl-main :is(.pxl-text-editor, .elementor-widget-text-editor) ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
:is(.page-id-9671, .page-id-10605, .page-id-10276, .page-id-9644, .page-id-9727)
#pxl-main :is(.pxl-text-editor, .elementor-widget-text-editor) ul > li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    list-style: none;
}
:is(.page-id-9671, .page-id-10605, .page-id-10276, .page-id-9644, .page-id-9727)
#pxl-main :is(.pxl-text-editor, .elementor-widget-text-editor) ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .68em;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--ns-rule);
}
/* nested lists step in rather than restart at the same indent */
:is(.page-id-9671, .page-id-10605, .page-id-10276, .page-id-9644, .page-id-9727)
#pxl-main :is(.pxl-text-editor, .elementor-widget-text-editor) li ul { margin-top: 9px; }
:is(.page-id-9671, .page-id-10605, .page-id-10276, .page-id-9644, .page-id-9727)
#pxl-main :is(.pxl-text-editor, .elementor-widget-text-editor) li ul > li::before {
    background: var(--ns-line-alt);
    width: 6px; height: 6px;
}


/* ---- 4. Cards ------------------------------------------------------------
   The column is the card (background, border, radius and padding are Elementor
   column settings). Here it gets the depth and the hover state that make it
   read as a surface rather than an outline. border-radius and border-color
   need !important: Elementor's per-element CSS is one class more specific. */
.elementor-element-populated:has(> .nour-card-flat) {
    border-color: var(--ns-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--ns-shadow);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.elementor-element-populated:has(> .nour-card-flat):hover {
    transform: translateY(-3px);
    box-shadow: var(--ns-shadow-h);
    border-color: var(--ns-line-alt) !important;
}

/* the icon: style-6 declares 58px/#000 and the page CSS cuts it to about 24px,
   so it landed as a small grey glyph floating with nothing around it */
.nour-card-flat .pxl-icon-box .pxl-item--meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.nour-card-flat .pxl-icon-box .pxl-item--icon {
    width: 54px;
    height: 54px;
    margin: 0 0 18px !important;
    border-radius: 16px;
    background: var(--ns-chip);
    border: 1px solid var(--ns-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background .24s ease, border-color .24s ease;
}
.nour-card-flat .pxl-icon-box .pxl-item--icon i,
.nour-card-flat .pxl-icon-box .pxl-item--icon:before {
    font-size: 25px;
    line-height: 1;
    color: var(--ns-brand-dk);
    transition: color .24s ease;
}
/* Hover fills the chip with one flat colour - the icon's own purple - and
   turns the glyph white. A two-stop gradient behind a coloured glyph gives the
   icon a different amount of contrast at each corner of a 54px square, and it
   read as decoration rather than as a state change. One solid fill and its
   opposite is the whole effect. */
.elementor-element-populated:has(> .nour-card-flat):hover .pxl-item--icon {
    background: var(--ns-brand-dk);
    background-image: none;
    border-color: var(--ns-brand-dk);
}

.nour-card-flat .pxl-icon-box .pxl-item--title {
    font-size: 19px;
    line-height: 1.38;
    font-weight: 600;
    color: var(--ns-ink);
    margin: 0;
    letter-spacing: -.01em;
}
.nour-card-flat .pxl-icon-box .pxl-item--description {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ns-body);
    margin-top: 11px;
}
/* an always-empty node that still occupies a line box */
.nour-card-flat .pxl-icon-box .pxl-item--shape { display: none; }

/* seven portals in a two-up grid: the last one now spans the row, so it lays
   the icon out beside the text instead of stretching a column layout wide */
@media (min-width: 768px) {
    .nour-card-wide .pxl-icon-box .pxl-item--inner {
        display: grid;
        grid-template-columns: 54px 1fr;
        column-gap: 20px;
        align-items: start;
    }
    .nour-card-wide .pxl-icon-box .pxl-item--meta { display: contents; }
    .nour-card-wide .pxl-icon-box .pxl-item--icon { margin: 0 !important; grid-row: span 2; }
    .nour-card-wide .pxl-icon-box .pxl-item--title { grid-column: 2; }
    .nour-card-wide .pxl-icon-box .pxl-item--description { grid-column: 2; max-width: 74ch; }
}


/* ---- 5. The six-step block ----------------------------------------------
   Six headings and six paragraphs stacked full width, about 1,100px of one
   column. Same copy, laid out as a grid of steps. */
.ns-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 4px;
}
.ns-step {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--ns-line);
    border-radius: 20px;
    padding: 26px 26px 24px;
    overflow: hidden;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.ns-step::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--ns-rule);
    opacity: .85;
}
.ns-step:hover {
    transform: translateY(-3px);
    box-shadow: var(--ns-shadow-h);
    border-color: var(--ns-line-alt);
}
.ns-step h3 {
    font-size: 18px !important;
    line-height: 1.35;
    font-weight: 600;
    color: var(--ns-ink);
    margin: 0 0 9px;
    letter-spacing: -.01em;
}
.ns-step p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ns-body);
    margin: 0;
}
@media (max-width: 1024px) { .ns-steps { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 767px)  { .ns-steps { grid-template-columns: 1fr; gap: 16px; }
                             .ns-step { padding: 22px 20px 20px; } }


/* ---- 6. Long lists in two columns ---------------------------------------
   A fourteen-item document list and two six-item benefit lists, each one
   narrow column running down a 1180px page. */
.ns-cols-2 ul {
    columns: 2;
    column-gap: 56px;
}
.ns-cols-2 ul > li { break-inside: avoid; }
@media (max-width: 767px) { .ns-cols-2 ul { columns: 1; } }

/* the numbered process list: long items, so they stay one column but each gets
   a numeral in the same chip language as the card icons */
.ns-ol-steps ol {
    list-style: none;
    padding-left: 0;
    counter-reset: nsstep;
}
.ns-ol-steps ol > li {
    counter-increment: nsstep;
    position: relative;
    padding-left: 52px;
    margin-bottom: 20px;
    max-width: 74ch;
}
.ns-ol-steps ol > li::before {
    content: counter(nsstep);
    position: absolute;
    left: 0;
    top: -1px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--ns-chip);
    border: 1px solid var(--ns-line);
    color: var(--ns-brand-dk);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ---- 7. The fact strip ---------------------------------------------------
   Five label/value pairs in a box with a gradient border - the only gradient
   border on the site, and the labels and values were the same weight. */
.nour-factstrip .pxl-project-info2 {
    background: #FFFFFF;
    border: 1px solid var(--ns-line);
    border-image: none;
    border-radius: 20px;
    box-shadow: var(--ns-shadow);
    padding: 8px 4px;
    display: flex;
    flex-wrap: wrap;
}
.nour-factstrip .pxl--item {
    flex: 1 1 0;
    min-width: 170px;
    padding: 18px 26px;
    border-left: 1px solid var(--ns-line);
}
.nour-factstrip .pxl--item:first-child { border-left: 0; }
.nour-factstrip .pxl-item--meta label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ns-muted);
    margin: 0 0 6px;
}
.nour-factstrip .pxl-item--meta span {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ns-ink);
}
@media (max-width: 767px) {
    .nour-factstrip .pxl--item { flex: 1 1 50%; border-left: 0; padding: 14px 20px; }
}


/* ---- 8. The FAQ accordion ------------------------------------------------
   The open item was a saturated purple-to-teal fill carrying 15px white body
   copy, sitting on a pale lavender band; the closed items were flat #f5f6f6,
   which on that band is close to invisible. Both become cards, and the open
   one is marked with a rule rather than a fill. */
.pxl-accordion1.style1 .pxl--item {
    background-color: #FFFFFF;
    border: 1px solid var(--ns-line);
    border-radius: 14px;
    transition: box-shadow .24s ease, border-color .24s ease;
}
.pxl-accordion1.style1 .pxl--item + .pxl--item { margin-top: 12px; }
.pxl-accordion1.style1 .pxl--item:hover { border-color: var(--ns-line-alt); }
.pxl-accordion1.style1 .pxl--item::before { display: none; }   /* the gradient layer */
.pxl-accordion1.style1 .pxl--item.active {
    border-color: var(--ns-line-alt);
    border-left: 3px solid var(--ns-brand);
    box-shadow: var(--ns-shadow);
}
/* the 3px rule would otherwise push the open item's text 2px off the stack */
.pxl-accordion1.style1 .pxl--item.active .pxl-accordion--title,
.pxl-accordion1.style1 .pxl--item.active .pxl-accordion--content { padding-left: 22px; }
.pxl-accordion1.style1 .pxl-accordion--title {
    padding: 19px 62px 19px 24px;
    font-weight: 600;
    color: var(--ns-ink);
    line-height: 1.45;
}
.pxl-accordion1.style1 .pxl--item.active .pxl-accordion--title { color: var(--ns-ink); }
.pxl-accordion1.style1 .pxl-accordion--content {
    color: var(--ns-body);
    line-height: 1.72;
    padding: 0 24px 22px 24px;
}
.pxl-accordion1.style1 .pxl--item.active .pxl-icon--plus { background-color: var(--ns-brand); }
.pxl-accordion1.style1 .pxl-icon--plus { right: 20px; }


/* ---- 9. The CTA band -----------------------------------------------------
   Softer surface, and the two columns no longer sit on a hard 5px radius. */
.elementor-inner-section:has(.pxl-accordion) {
    border-radius: 28px;
}
.elementor-inner-section:has(.pxl-accordion) .elementor-widget-pxl_heading .pxl-item--title {
    color: var(--ns-ink);
}


/* ---- 10. Buttons ---------------------------------------------------------
   The dark pill picked up a hard offset ring on focus/hover that read as a
   rendering artefact. */
.pxl-button .btn,
.elementor-widget-button .elementor-button {
    box-shadow: 0 8px 18px -10px rgba(16, 24, 40, .55);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.pxl-button .btn:hover,
.elementor-widget-button .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -12px rgba(16, 24, 40, .6);
}


/* ---- 11. Checklist and location cards -----------------------------------
   Their surface, border and radius are Elementor container settings so they
   stay editable in the builder; only the depth belongs here. */
.page-id-9671 #pxl-main .e-con.e-con-full[class*="elementor-element-"] {
    transition: transform .24s ease, box-shadow .24s ease;
}
.page-id-9671 #pxl-main .e-con.e-con-full[class*="elementor-element-"]:hover {
    box-shadow: var(--ns-shadow);
}
.pxl-list .pxl-item--text,
.pxl-list .pxl-item--title { color: var(--ns-body); }

/* Elementor writes the icon's size and colour at one class more specificity
   than the block above, so a 25px glyph in a 54px chip came back as 38px in
   the flat brand purple. Measured, not assumed. */
.nour-card-flat .pxl-icon-box .pxl-item--icon i,
.nour-card-flat .pxl-icon-box .pxl-item--icon svg {
    font-size: 25px !important;
    width: auto;
    height: auto;
}

/* Elementor writes the icon colour three ways at once:
       color, text-fill-color, -webkit-text-fill-color
   and -webkit-text-fill-color paints over color no matter how specific the
   colour rule is. Setting only `color` therefore did nothing at all - measured:
   color reported #6C6CF0 while the glyph rendered #8D8DFF - which is why the
   icon stayed the same shade when the chip changed underneath it. All three
   have to be written together, at rest and on hover. */
.nour-card-flat .pxl-icon-box .pxl-item--icon i,
.nour-card-flat .pxl-icon-box .pxl-item--icon svg,
.nour-card-flat .pxl-icon-box .pxl-item--icon:before {
    color: var(--ns-brand-dk) !important;
    text-fill-color: var(--ns-brand-dk) !important;
    -webkit-text-fill-color: var(--ns-brand-dk) !important;
    transition: color .22s ease, -webkit-text-fill-color .22s ease;
}
.elementor-element-populated:has(> .nour-card-flat):hover .pxl-item--icon i,
.elementor-element-populated:has(> .nour-card-flat):hover .pxl-item--icon svg,
.elementor-element-populated:has(> .nour-card-flat):hover .pxl-item--icon:before {
    color: #FFFFFF !important;
    text-fill-color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ---- 12. Corrections from the second measured run ------------------------ */

/* The CTA band's own title is a heading widget; the two sub-CTAs inside the
   text editor were inheriting the same 32px and competing with it. */
.elementor-inner-section:has(.pxl-accordion) .elementor-widget-text-editor h2,
.elementor-inner-section:has(.pxl-accordion) .pxl-text-editor h2 {
    font-size: 21px;
    line-height: 1.35;
    font-weight: 600;
    margin: 26px 0 10px;
}

/* The location cards run through image-box rather than icon-box, so none of
   the card typography above reached them: 22px bold titles against 19px
   elsewhere, and description text still on the old light grey. */
.page-id-9671 #pxl-main .elementor-widget-image-box .elementor-image-box-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--ns-ink);
    letter-spacing: -.01em;
}
.page-id-9671 #pxl-main .elementor-widget-image-box .elementor-image-box-description {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ns-body);
}

/* ---- 14. Long unbreakable tokens ----------------------------------------
   "Vendor Registration Consultancy(ARAMCO/SABIC,SEC)" has no space before the
   bracket, so the browser treats 29 characters as one word: it measured 317px
   inside a 308px list item at 390px wide. Only bites when a token genuinely
   cannot fit, so it costs nothing at any other width. */
#pxl-main :is(.pxl-text-editor, .elementor-widget-text-editor) :is(p, li, h2, h3, h4),
#pxl-main :is(.pxl-item--title, .pxl-item--description, .ns-step h3, .ns-step p) {
    overflow-wrap: anywhere;
}

/* ---- 15. Section figures -------------------------------------------------
   The images beside prose blocks are a mix of photographs and diagrams with
   text baked into them, at aspect ratios from 2:1 to 4:3. Nothing is cropped
   to a common ratio: a crop that is harmless on a skyline cuts the label off a
   diagram. They keep their own proportions and the column centres them. */
.nour-figure img {
    display: block;
    width: 100%;
    height: auto;
}
/* on a phone the picture follows the copy rather than splitting it */
@media (max-width: 767px) {
    .nour-figure { margin-top: 26px; }
}

/* the editorial variant - heading in a narrow column, body in a wide one - is
   used where the library has no image that honestly illustrates the section.
   It needs no rule of its own: the accent, the heading scale and the 74ch cap
   all already behave correctly at 34/66. */

/* ---- 16. Lists that lay themselves out in columns ------------------------
   The exclusion written in block 2 lost a specificity fight it could not win:
   the 74ch cap is scoped by an id (#pxl-main) and the exclusion was two bare
   classes, so a fourteen-item document list, a nine-name buyer row and a
   six-step process all stayed capped at 741px and left the rest of the row
   empty. Same scope on both sides settles it. */
:is(.page-id-9671, .page-id-10605, .page-id-10276, .page-id-9644, .page-id-9727)
#pxl-main :is(.ns-cols-2, .nour-buyers, .ns-ol-steps) :is(ul, ol, li) {
    max-width: none;
}

/* short items, so three columns across 1180px rather than two across 741px */
.ns-cols-2 ul { columns: 3; column-gap: 52px; }
@media (max-width: 1024px) { .ns-cols-2 ul { columns: 2; column-gap: 36px; } }
@media (max-width: 767px)  { .ns-cols-2 ul { columns: 1; } }

/* the numbered process list: long items, so two columns is the limit before
   the measure gets too short to read comfortably */
@media (min-width: 1025px) {
    .ns-ol-steps ol { columns: 2; column-gap: 56px; }
    .ns-ol-steps ol > li { break-inside: avoid; margin-bottom: 26px; }
}

/* ---- 17. The theme's own 880px measure ----------------------------------
   pxl_text_editor wraps its content in .pxl-item--inner, which the theme sets
   to display:inline-block with max-width:880px. That is a sensible default for
   a paragraph and wrong for anything that lays itself out across the row: the
   fourteen-item document list, the nine-name buyer row, the numbered process
   list and the comparison table were all stopped at 880px inside a 1180px
   section, which is where the empty right-hand third came from. Traced up the
   ancestor chain in the browser rather than guessed. */
#pxl-main :is(.ns-cols-2, .nour-buyers, .ns-ol-steps, .ns-steps) .pxl-item--inner,
#pxl-main .pxl-item--inner:has(.nour-table-wrap),
#pxl-main .pxl-item--inner:has(.ns-steps) {
    max-width: none;
    display: block;
    width: 100%;
}

/* the restored lists inside the Aramco step cards */
.nour-card-list ul { margin: 0; }
.nour-card-list li { font-size: 15.5px; line-height: 1.65; }

/* ---- 18. The image tile in a card grid ----------------------------------
   "What we do" is five services in a three-column grid, so the sixth cell is
   an image. It has to behave like a card and not like a picture dropped into a
   column: same 15px gutter, same radius, stretched to the row height set by
   the tallest card, and cropped rather than letterboxed. */
.elementor-column:has(> .elementor-element-populated > .nour-tile) {
    display: flex;
}
.elementor-element-populated:has(> .nour-tile) {
    flex: 1;
    display: flex;
    align-items: stretch;
    margin: 0 15px 24px 15px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--ns-shadow);
    min-height: 260px;
}
.nour-tile,
.nour-tile .elementor-widget-container,
.nour-tile figure,
.nour-tile .pxl-image {
    width: 100%;
    height: 100%;
    margin: 0;
}
.nour-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
@media (max-width: 767px) {
    .elementor-element-populated:has(> .nour-tile) { min-height: 200px; }
}

/* The tile above stayed its natural height with white below it: Elementor's
   .elementor-widget-wrap is a wrapping flex row with align-content:flex-start,
   so the single line never grows to the cell height and height:100% on the
   image had nothing definite to resolve against. Make the wrap a stretching
   column and let each level pass the height down. */
.elementor-element-populated:has(> .nour-tile) {
    flex-direction: column;
    align-content: stretch;
    padding: 0 !important;
}
.nour-tile {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
.nour-tile .elementor-widget-container {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
.nour-tile img { flex: 1 1 auto; min-height: 0; }

/* ---- 19. Equal cells in a card grid -------------------------------------
   The cards were not the same width: 392 / 400 / 370 in one row. A flex item
   defaults to min-width:auto, so no card could shrink below its own button's
   min-content width, and the cards with the longest button text ("Vendor
   registration in Saudi Arabia") pushed wider and ate the gutter. Measured per
   card: box width tracked button width exactly.

   Two halves to the fix: let the cell shrink, and give the button room to fit
   inside the shrunk cell. The button keeps nowrap because pxl_button renders
   each letter in its own span - allowing it to wrap breaks words mid-letter. */
.elementor-element-populated:has(> .nour-card-flat),
.elementor-element-populated:has(> .nour-tile) {
    min-width: 0;
}
.elementor-element-populated:has(> .nour-card-flat) .pxl-button .btn {
    padding-left: 22px;
    padding-right: 22px;
    font-size: 15px;
    max-width: 100%;
}

/* ---- 20. Floating WhatsApp button ----------------------------------------
   Printed on wp_footer by saira_child_whatsapp_button(). It sits bottom left
   because the theme's back-to-top control already owns the bottom right.

   Collapsed to the circle by default and widening to show its label on hover
   keeps it out of the way of the copy: a permanently open pill covers page
   content on every scroll position, on every page. */
.ns-wa {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 56px;
    padding: 0 15px;
    border-radius: 999px;
    background: #25D366;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px -4px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .12);
    text-decoration: none !important;
    overflow: hidden;
    transition: width .28s cubic-bezier(.4, 0, .2, 1), background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ns-wa__mark {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    fill: #FFFFFF;
}
.ns-wa__label {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #FFFFFF;
    transition: max-width .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, margin-left .28s cubic-bezier(.4, 0, .2, 1);
    margin-left: 0;
}
.ns-wa:hover,
.ns-wa:focus-visible {
    background: #1EBE5A;
    color: #FFFFFF !important;
    box-shadow: 0 10px 24px -6px rgba(16, 24, 40, .34), 0 2px 8px rgba(16, 24, 40, .14);
    transform: translateY(-1px);
}
.ns-wa:hover .ns-wa__label,
.ns-wa:focus-visible .ns-wa__label {
    max-width: 160px;
    opacity: 1;
    margin-left: 10px;
}
.ns-wa:focus-visible {
    outline: 3px solid rgba(37, 211, 102, .45);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .ns-wa,
    .ns-wa__label { transition: none; }
    .ns-wa:hover { transform: none; }
}
/* The cookie bar keeps its pxl-active class below 768px but the theme sets it
   to display:none there, so a rule that lifted the button off the bar fired on
   every phone for a bar that was not on screen. Measured at 480/600/767/768:
   hidden below 768, and at 768 and up it is 570px wide and centred, which
   clears the button in the left corner. No lift is needed at any width. */
@media (max-width: 767px) {
    .ns-wa { left: 16px; bottom: 16px; height: 52px; padding: 0 13px; }
    .ns-wa__mark { width: 24px; height: 24px; }
}

/* ---- 21. "Tell us what you need": the picture fills its column -----------
   The picture keeps its own 4:3 ratio, so it stopped short of the bottom of the
   form beside it and left its column empty underneath. That gap is the
   misalignment - the columns are the same width, they just end on different
   lines.

   A sticky picture was the other way to do this, and it was measured first: with
   the two buttons gone the columns are only about 100px apart, so a sticky
   photo has 100px of travel and never visibly moves. Stretching it makes the
   two columns end on the same line at every width, which is the actual
   complaint.

   Same stretch chain the homepage image tile needs: elementor-widget-wrap is a
   wrapping flex row with align-content:flex-start, so height:100% on the image
   has nothing to resolve against until every box between the column and the img
   is itself a stretching flex item. The absolutely positioned decorative shape
   in this column is out of flow and is not affected. */
@media (min-width: 1025px) {
    .elementor-19 .elementor-element.elementor-element-d078360 > .elementor-element-populated {
        display: flex;
        flex-direction: column;
        align-content: stretch;
    }
    /* Every box between the column and the img has to stretch. pxl_image nests
       four of them - widget container, pxl-image-single, pxl-item--inner,
       pxl-item--image - and the two in the middle are display:block, so the
       chain broke there and the picture stayed 476px inside a 584px box.
       Traced box by box, not guessed. */
    .nour-contact-photo,
    .nour-contact-photo .elementor-widget-container,
    .nour-contact-photo .pxl-image-single,
    .nour-contact-photo .pxl-item--inner,
    .nour-contact-photo .pxl-item--image {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        width: 100%;
    }
    .nour-contact-photo img {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }
}

/* ---- 22. Book columns ----------------------------------------------------
   Two paragraphs of unequal length in two separate columns can never come out
   level - 72 words against 47 gave 9 lines against 7. Flowing them as one block
   across two CSS columns lets the browser fill both to the same depth and put
   the break wherever it falls, which is what a book does.

   Getting the two columns to hold the SAME NUMBER OF LINES, rather than merely
   the same height, took three things together. Each was measured, not guessed:

   1. No blank line between paragraphs. A paragraph gap makes height and line
      count diverge - the column containing the break is taller by the margin,
      so balancing by height stops meaning balancing by lines. Books separate
      paragraphs with an indent for exactly this reason, and it is what the
      "older book format" here should look like anyway.

   2. A 30px gutter. Swept from 24px to 100px counting real line boxes: the
      column width decides how the text wraps, and only some widths give an even
      total that can split in half at all. 30px yields 14 lines, 7 a side. It is
      also the gutter the card rows use, so the right column starts at 815 -
      the same edge as every card and the other two-column row on the page.

   3. widows/orphans of 1. At 2, the browser is forbidden from carrying a single
      line into the second column and falls back to 8 and 6. This is the one
      real compromise: column two opens with the last line of paragraph one.
      A book would normally avoid that, but it is the only arrangement that
      makes the line counts equal, which is what was asked for. */
.nour-bookcols .elementor-widget-container,
.nour-bookcols .pxl-item--inner {
    column-count: 2;
    column-gap: 30px;
    column-fill: balance;
    max-width: none;
}

/* pxl_text_editor nests .pxl-item--inner inside .elementor-widget-container, so
   both holders matched and the block was split twice - four 273px columns
   inside two, instead of two 575px ones. Elementor's own text-editor widget has
   no .pxl-item--inner, which is why the Aramco and ISO blocks never showed it.
   Only the innermost holder establishes the column context. */
.nour-bookcols .elementor-widget-container:has(.pxl-item--inner) {
    column-count: auto;
}
.nour-bookcols p {
    max-width: none;
    margin: 0;
    orphans: 1;
    widows: 1;
    /* Justified, as a book sets it. Justification without hyphenation is what
       gives justified text a bad name: the browser can only stretch the word
       spaces, so a narrow column opens rivers of white. hyphens:auto lets it
       break words instead. It needs a lang attribute on the document to pick a
       dictionary - WordPress writes lang="en-US" on <html>, so it works here. */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    /* never break so tightly that a two-letter fragment is left behind */
    hyphenate-limit-chars: 7 3 3;
}
/* the indent is what separates one paragraph from the next now */
.nour-bookcols p + p {
    text-indent: 1.6em;
}
@media (max-width: 767px) {
    .nour-bookcols .elementor-widget-container,
    .nour-bookcols .pxl-item--inner {
        column-count: 1;
    }
    /* in one column there is no balancing to protect, so paragraphs get their
       ordinary spacing back and the indent is not needed */
    .nour-bookcols p {
        text-align: left;
        hyphens: manual;
    }
    .nour-bookcols p + p {
        text-indent: 0;
        margin-top: 1em;
    }
}

/* ---- 23. Sticky media column ---------------------------------------------
   A short picture beside a long column of copy. The picture is pinned so it
   stays level with whatever is being read, instead of scrolling away and
   leaving its half of the row empty for the rest of the section.

   Two things make this work, and both are easy to get wrong:

   An Elementor column is a flex item in a stretch row, so it is already the
   full height of the row and a sticky child inside it has nowhere to travel.
   The column must stay stretched - that is the containing block sticky moves
   within - while the widget wrap inside it shrinks to its content with
   align-self, which is what creates the travel. Shrinking the column instead
   (the obvious move) produces a sticky element exactly as tall as its
   container, which never moves.

   top clears the 100px sticky header, measured, plus 20px so the picture does
   not touch it.

   Only above the tablet breakpoint: once the columns stack there is nothing to
   sit beside, and a pinned image would cover the copy.

   nour-sticky-copy is the same mechanism pointed the other way, for a row where
   the picture is the longer half. Sticky can only hold the SHORTER column - a
   pinned element taller than its row has nowhere to travel - so which class a
   row wants is decided by measuring, not by which half looks more important.
   On business setup the tower runs 743px against 593px of copy, so the copy is
   what holds and the picture is what scrolls past it. */
@media (min-width: 1025px) {
    .elementor-column:has(> .elementor-element-populated > .nour-sticky-media),
    .elementor-column:has(> .elementor-element-populated > .nour-sticky-copy) {
        align-self: stretch;
    }
    .elementor-column:has(> .elementor-element-populated > .nour-sticky-media) > .elementor-element-populated,
    .elementor-column:has(> .elementor-element-populated > .nour-sticky-copy) > .elementor-element-populated {
        position: sticky;
        top: 120px;
        align-self: flex-start;
    }
}

/* ---- 24. Sticky side panel -----------------------------------------------
   The CTA column in the FAQ band runs 1298px against the accordion's 908px, so
   the questions scroll out of sight long before the copy beside them ends.
   Pinning the accordion holds it level with whatever is being read, and the two
   columns finish together.

   The band already sets align-items:flex-start on its container, so its columns
   are content height, not row height - and a sticky child of a content-height
   column has nowhere to travel. The column goes back to stretch here, and only
   the wrap inside it shrinks.

   No max-height and no overflow: a first attempt capped the panel to the
   viewport so it could never be taller than the screen, and that gave the FAQ
   its own scrollbar inside the page, which is worse than the problem. Measured
   instead: the accordion is 786px closed and 960px at its tallest with one
   answer open, so closed it clears a normal desktop window with room to spare.
   When a long answer is open on a shorter screen its last question can sit
   below the fold while the panel is pinned - scrolling on frees it, because a
   sticky element releases at the bottom of its container. That is the accepted
   trade for not putting a scrollbar in the middle of the page.

   top clears the 100px sticky header with 10px to spare. */
@media (min-width: 1025px) {
    .elementor-column:has(> .elementor-element-populated > .nour-sticky-panel) {
        align-self: stretch;
    }
    .elementor-column:has(> .elementor-element-populated > .nour-sticky-panel) > .elementor-element-populated {
        position: sticky;
        top: 110px;
        align-self: flex-start;
    }
}