/* ===== 00-fonts.css ===== */
/* Nunito Sans + Inter — variable, latin subsets, self-hosted.
   Collapsed from Google's per-weight rules: each file is a variable font
   covering the full 100-900 range. */

@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/nunito-sans-latin-ext-italic.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;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/nunito-sans-latin-italic.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;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/nunito-sans-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;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/nunito-sans-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;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-ext-italic.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;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-italic.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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-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;
}

/* ===== 01-tokens.css ===== */
/* Design tokens.
   Values lifted from the Elementor global kit the WordPress site used, so the
   rebuild is visually identical. Names are semantic rather than Elementor's
   opaque hashes (--e-global-color-332724a and friends). */

:root {
  /* ---- palette */
  --c-ink: #3B3664;          /* brand purple: all headings */
  --c-body: #777777;         /* body copy and default link colour */
  --c-white: #FFFFFF;
  --c-orange: #FF8534;       /* accent: eyebrows, icons, gradient end */
  --c-orange-deep: #FF5800;
  --c-yellow: #FFDF73;       /* gradient start, link hover */
  --c-surface: #ECEFF1;      /* input + light section background */
  --c-border: #DCDCDE;
  --c-overlay: #FFFFFF2B;    /* translucent white on dark sections */

  /* ---- validation. One set, used by the summary alert, the invalid field ring
     and the required asterisk, so all three read as the same state. */
  --c-danger: #D93025;         /* borders, asterisk, label on an invalid field */
  --c-danger-text: #A3160E;    /* alert copy — darker, for contrast on the tint */
  --c-danger-bg: #FDECEA;      /* alert and invalid-field fill */
  --c-danger-ring: rgba(217, 48, 37, .18);   /* the glow around an invalid field */
  --c-ok-text: #1C6B40;
  --c-ok-bg: #E8F6EE;

  --grad-cta: linear-gradient(135deg, var(--c-yellow) 0%, var(--c-orange) 60%);
  --grad-cta-hover: linear-gradient(135deg, var(--c-orange) 40%, var(--c-yellow) 100%);

  /* ---- type */
  --f-head: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-h1: 48px;
  --t-h2: 39px;
  --t-h3: 31.25px;
  --t-h4: 25px;
  --t-h5: 20px;
  --t-h6: 14px;
  --t-body: 16px;
  --t-label: 16px;
  --t-btn: 12px;

  /* ---- layout */
  --container: 1280px;
  --gutter: 20px;
  --pad-x: 10px;      /* container side padding, matches the original */
  --radius: 5px;

  --section-y: 80px;
}

@media (max-width: 1024px) {
  :root {
    --t-h1: 37px;
    --t-h2: 31px;
    --t-h3: 25px;
    --t-h4: 21px;
    --t-h5: 18px;
    --t-h6: 13px;
    --t-body: 15px;
    --t-label: 15px;
    --container: 1024px;
    --section-y: 60px;
  }
}

@media (max-width: 767px) {
  :root {
    --t-h1: 28px;
    --t-h2: 25px;
    --t-h3: 22px;
    --t-h4: 20px;
    --t-h5: 16px;
    --t-h6: 12px;
    --t-body: 14px;
    --t-label: 14px;
    --t-btn: 11px;
    --container: 767px;
    --section-y: 48px;
  }
}

/* ===== 02-base.css ===== */
/* Reset + base typography. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--f-head);
  color: var(--c-ink);
}

h1 { font-size: var(--t-h1); font-weight: 800; line-height: 1.2; letter-spacing: -1px; }
h2 { font-size: var(--t-h2); font-weight: 800; line-height: 1.2; letter-spacing: -1px; }
h3 { font-size: var(--t-h3); font-weight: 800; line-height: 1.3; letter-spacing: -1px; }
h4 { font-size: var(--t-h4); font-weight: 400; line-height: 1.3; letter-spacing: -.5px; }
h5 { font-size: var(--t-h5); font-weight: 700; line-height: 1.4; letter-spacing: -.5px; }

/* h6 is the site's "eyebrow" label above section headings. The 24px is a
   fixed length, not a ratio: the original inherited an em-based body
   line-height, so the eyebrow stayed 24px as its font-size stepped down
   across breakpoints. */
h6 {
  font-size: var(--t-h6);
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-orange);
}

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

a {
  color: var(--c-body);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover { color: var(--c-yellow); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

strong, b { font-weight: 700; color: inherit; }

hr { border: 0; border-top: 1px solid var(--c-border); margin: 2em 0; }

:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 2px;
}

/* Skip link — first focusable element on every page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--c-ink);
  color: var(--c-white);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  color: var(--c-white);
}

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

/* The sprite itself must never render. */
.icon-sprite { display: none; }

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.125em;
  flex: none;
}

/* ===== 03-layout.css ===== */
/* Containers, sections and the grid helpers pages compose with. */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush-top { padding-top: 0; }
.section--pb-32 { padding-bottom: 32px; }
.section--flush-bottom { padding-bottom: 0; }
.section--surface { background: var(--c-surface); }
.section--ink { background: var(--c-ink); }

/* The site's tinted band — a soft peach-to-green gradient, not a flat colour.
   Same asset the WordPress build used, so the wash matches exactly. Applied to
   "Our Value", the recruitment steps, Featured Projects, Featured Services on
   the Expertise index, and each service page's features band. */
.section--tint {
  background-image: url('/assets/img/2024/11/bg_header_.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* On dark sections everything inverts. */
.section--ink,
.section--ink p,
.section--ink li { color: var(--c-white); }
.section--ink h1, .section--ink h2, .section--ink h3,
.section--ink h4, .section--ink h5 { color: var(--c-white); }

/* Centred heading block that opens most sections: eyebrow + title + lede. */
.section-head { max-width: 760px; margin: 0 auto calc(var(--section-y) * .5); text-align: center; }
.section-head > :last-child { margin-bottom: 0; }
.section-head h6 { margin-bottom: 20px; }
.section-head--start { margin-inline: 0; text-align: left; }

.grid { display: grid; gap: 30px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Two-column split used by hero, about and CTA rows. */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
  align-items: center;
}
.split--wide-start { grid-template-columns: 1.15fr 1fr; }
.split--wide-end { grid-template-columns: 1fr 1.15fr; }
.split--top { align-items: start; }

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { gap: 24px; }
  .split { gap: 36px; }
}

@media (max-width: 767px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .split,
  .split--wide-start,
  .split--wide-end { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.text-center { text-align: center; }
.lede { font-size: 1.05em; }

/* ===== 04-buttons.css ===== */
/* Buttons. Gradient, radius and type match the Elementor kit exactly. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-size: var(--t-btn);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-white);
  background-image: var(--grad-cta);
  cursor: pointer;
  transition: background-image .3s ease, transform .2s ease, box-shadow .2s ease;
  text-align: center;
}

.btn:hover,
.btn:focus-visible {
  color: var(--c-white);
  background-image: var(--grad-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 133, 52, .28);
}

.btn:active { transform: translateY(0); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Outline variant, used on dark backgrounds. */
.btn--ghost {
  background-image: none;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  color: var(--c-white);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-image: var(--grad-cta);
  box-shadow: 0 8px 20px rgba(255, 133, 52, .28);
}

.btn--ink {
  background-image: none;
  background-color: var(--c-ink);
}
.btn--ink:hover,
.btn--ink:focus-visible { background-image: var(--grad-cta); }

.btn--lg { padding: 20px 40px; }
.btn--wide { width: 100%; justify-content: center; }
.btn--sm { padding: 11px 22px; }

/* Plain arrow link ("Discover more"). */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--f-body);
  font-size: var(--t-btn);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-orange);
}
.link-arrow::after {
  content: "";
  width: .7em; height: .7em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.link-arrow:hover { color: var(--c-orange-deep); }
.link-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* ===== 05-forms.css ===== */
/* Forms. Field styling matches the Elementor kit; the AJAX status/error
   affordances are new, since Elementor's were supplied by its own JS. */

/* 10px between rows and columns, and no gap at all between a label and its
   field: Elementor's form kit set `.elementor-field-group` to a 10px gutter
   with `label { padding-bottom: 0 }`, and every form on the old site inherited
   it. Matching it here keeps the contact card the same height as the original. */
.form { display: grid; gap: 10px; }
.form__row { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: 0; }
.field--full { grid-column: 1 / -1; }

/* A radio group is a <fieldset>, which every browser gives a groove border and
   its own padding. min-width:0 stops its default min-content sizing from
   refusing to shrink inside the grid. */
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field__legend { padding: 0; }

/* Careers packs Gender, Work Type and Expected Salary into one row. The shares
   are uneven — Work Type needs the room for three options on one line, and
   Salary lands on the same 577px as the two-column rows above. The fr values
   are the original's measured column widths, so the ratio is exact at any
   container size. */
.form__row--quarters { grid-template-columns: 225fr 342fr 577fr; }
@media (max-width: 767px) { .form__row--quarters { grid-template-columns: minmax(0, 1fr); } }

/* Required marker, matching the original's red asterisk. */
.field--required > label::after,
.field--required > .field__legend::after,
fieldset.field--required > .field__legend::after {
  content: "*";
  color: var(--c-danger);
  padding-inline-start: .2em;
}

.field > label,
.field__legend {
  font-family: var(--f-head);
  font-size: var(--t-label);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-body);
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea,
.field select {
  width: 100%;
  padding: 8px 16px;
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-body);
  background-color: var(--c-surface);
  border: 1px solid var(--c-surface);
  border-radius: var(--radius);
  transition: border-color .2s ease, background-color .2s ease;
}

/* Four rows at the body line-height, the same as the original textarea. */
.field textarea { min-height: 108px; padding-block: 5px; resize: vertical; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  color: var(--c-body);
  background-color: var(--c-white);
  border-color: var(--c-orange);
}

.field input::placeholder,
.field textarea::placeholder { color: #9a9aa2; opacity: 1; }

.field input[type="file"] {
  padding: 10px 12px;
  background: var(--c-white);
  border: 1px dashed var(--c-border);
  cursor: pointer;
}

.field__hint { font-size: .82em; color: #9a9aa2; }

/* Radio groups (gender, employment type on Careers). */
.field__options {
  display: flex;
  flex-wrap: wrap;
  /* Tight enough that Work Type keeps its three options on one line, as the
     original did. */
  gap: 8px 15px;
  padding: 0;
  margin: 0;
  border: 0;
}
.field__option {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--f-body);
  font-weight: 400;
  cursor: pointer;
}
.field__option input { accent-color: var(--c-orange); }

/* ---- invalid state
   The field carries the whole signal: a red ring plus a red label. The message
   itself is never painted, so nothing below a field moves when it fails
   validation — the summary alert under the submit button carries the words. */
.field.field--invalid > label,
.field.field--invalid > .field__legend { color: var(--c-danger); }

.field--invalid input:not([type="checkbox"]):not([type="radio"]),
.field--invalid textarea,
.field--invalid select {
  border-color: var(--c-danger);
  background-color: var(--c-danger-bg);
  box-shadow: 0 0 0 3px var(--c-danger-ring);
}
/* Focusing an invalid field keeps the red rather than flipping to the orange
   focus ring — the error has not been fixed yet. */
.field--invalid input:focus,
.field--invalid textarea:focus,
.field--invalid select:focus {
  border-color: var(--c-danger);
  background-color: var(--c-white);
  box-shadow: 0 0 0 3px var(--c-danger-ring);
}
/* A radio group has no box to outline, so the legend does the work. */
.field--invalid .field__options { color: var(--c-danger); }

/* Kept in the DOM and wired up with aria-describedby so screen readers still
   get the specific reason, but never displayed: showing it reflowed the form
   on every blur. */
.field__error {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- summary alert under the submit button
   Doubled class names on purpose. These live inside `.section--ink` on the CTA
   band and inside the footer, both of which colour their paragraphs white via
   `.section--ink p` — a more specific selector than a single class. Without the
   doubling the alert renders white-on-pink and is unreadable. */
.form__status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: .95em;
  line-height: 1.5;
  text-align: left;
}
.form__status:empty { display: none; }

.form__status.form__status--ok {
  background: var(--c-ok-bg);
  border-color: rgba(28, 107, 64, .28);
  color: var(--c-ok-text);
}
.form__status.form__status--error {
  background: var(--c-danger-bg);
  border-color: var(--c-danger);
  color: var(--c-danger-text);
}

/* Leading glyph so the state reads at a glance, not from colour alone. */
.form__status.form__status--ok::before,
.form__status.form__status--error::before {
  flex: none;
  font-weight: 700;
  line-height: inherit;
}
.form__status.form__status--ok::before { content: "\2713"; }
.form__status.form__status--error::before { content: "\26A0"; }

.form.is-sending { opacity: .65; pointer-events: none; }

/* Elementor styled form submits a touch shorter than the site buttons. */
.form .btn { padding-block: 14px; }

/* reCAPTCHA v2 checkbox. The widget is a fixed-size iframe (roughly 304x78),
   so it is scaled down rather than allowed to overflow narrow columns. */
.recaptcha { gap: 8px; }
.recaptcha .g-recaptcha { line-height: 0; }
.recaptcha iframe { border-radius: var(--radius); }
/* The widget is an iframe with no field of its own to turn red, so ring it. */
.recaptcha.field--invalid .g-recaptcha {
  outline: 2px solid var(--c-danger);
  outline-offset: 3px;
  border-radius: var(--radius);
}

@media (max-width: 400px) {
  .recaptcha .g-recaptcha {
    transform: scale(.86);
    transform-origin: 0 0;
    height: 68px;
  }
}

/* The CTA band sits on a dark photo, where the mid red used elsewhere all but
   disappears. Lift the invalid label to a tint that still reads as red. */
.cta-band__form .field.field--invalid > label,
.cta-band__form .field.field--invalid > .field__legend { color: #FFA39E; }

/* ===== 06-header.css ===== */
/* Site header: logo, primary nav with one dropdown, CTA button.
   Replaces Elementor's nav-menu widget + smartmenus + the ElementSkit
   megamenu; the dropdown is CSS-driven with a small JS enhancement for
   keyboard and touch. */

.header {
  position: relative;
  z-index: 99;
  background: var(--c-white);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 96px;
}

.header__logo { margin-right: auto; flex: none; padding-left: 29px; }
.header__logo img { width: 152px; height: auto; }

.nav { display: flex; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list li { margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--f-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink);
  white-space: nowrap;
  padding-block: 17px;
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__item--current > .nav__link { color: var(--c-orange); }

/* ---- dropdown */
.nav__item { position: relative; }

.nav__caret {
  width: .5em;
  height: .5em;
  opacity: .75;
  transition: transform .2s ease;
}
.nav__item[data-open="true"] .nav__caret { transform: rotate(180deg); }

/* Injected by the nav script. It gives keyboard and touch users a way to open
   the submenu (CSS :hover alone cannot), so it sits invisibly over the caret
   rather than adding a second visible control. */
.nav__disclosure {
  position: absolute;
  top: 0;
  right: -6px;
  width: 28px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.nav__sub {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 290px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(59, 54, 100, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub,
.nav__item[data-open="true"] > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__sub a {
  display: block;
  padding: 9px 22px;
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
}
.nav__sub a:hover,
.nav__sub a:focus-visible,
.nav__sub .nav__item--current > a { color: var(--c-orange); }

/* ---- mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-ink);
  font-size: 22px;
  cursor: pointer;
}
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }

.header__cta { flex: none; }

@media (max-width: 1024px) {
  .nav__list { gap: 22px; }
  .nav__link { font-size: 15px; }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .header__inner { min-height: 76px; gap: 14px; }
  .header__logo img { width: 130px; }

  /* Collapsed by default; the toggle flips [data-open]. */
  .nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    background: var(--c-white);
    box-shadow: 0 20px 40px rgba(59, 54, 100, .12);
    border-top: 1px solid var(--c-border);
    padding: 8px 0 18px;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .nav[data-open="true"] { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-inline: var(--gutter);
  }
  .nav__link {
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: 16px;
  }

  /* The item is now as tall as link + open submenu, so pin the hit area to
     the link row only. */
  .nav__disclosure { right: 0; width: 52px; height: 49px; }

  .nav__sub {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 6px 14px;
    display: none;
  }
  .nav__item[data-open="true"] > .nav__sub { display: block; }
  .nav__sub a { padding: 10px 0; font-size: 15px; }

  .header__cta { display: none; }
  .nav__cta { padding-inline: var(--gutter); margin-top: 16px; }
}

@media (min-width: 901px) {
  .nav__cta { display: none; }
}

/* ===== 07-footer.css ===== */
/* Site footer: brand column, two link columns, newsletter, legal bar. */

.footer {
  background: var(--c-white);
  padding-top: 64px;
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.5fr 1.05fr 1fr 1.6fr;
  gap: 55px;
  padding-bottom: 55px;
}

.footer__logo { display: inline-block; margin-bottom: 22px; }
.footer__logo img { width: 152px; }

.footer__blurb {
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-body);
}

.footer h2,
.footer__heading {
  margin-bottom: 20px;
  font-family: var(--f-head);
  font-size: var(--t-h5);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.5px;
  color: var(--c-ink);
}

.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list li { margin-bottom: 11px; }
.footer__list a { font-size: 15px; color: var(--c-body); }
.footer__list a:hover { color: var(--c-orange); }

/* Social chips. */
.social { display: flex; gap: 8px; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background-image: var(--grad-cta);
  color: var(--c-ink);
  font-size: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.social a:hover {
  color: var(--c-ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 133, 52, .3);
}

.footer__newsletter-blurb {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.7;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 30px;
  padding-block: 22px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
}

.footer__legal { display: flex; align-items: center; gap: 10px; }
.footer__legal a { font-size: 13px; }
.footer__legal a:hover { color: var(--c-orange); }
.footer__legal span[aria-hidden] { color: var(--c-orange); }

@media (max-width: 1024px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 767px) {
  .footer { padding-top: 50px; }
  .footer__cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .footer__bottom { justify-content: flex-start; }
}

/* ===== 08-components.css ===== */
/* Reusable pieces: cards, icon tiles, check lists, flip boxes, testimonials,
   the eyebrow pill and the floating WhatsApp button. */

/* ---- eyebrow pill (hero) */
.pill {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 100px;
  background-image: var(--grad-cta);
  font-family: var(--f-head);
  font-size: var(--t-h6);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-white);
}

/* ---- icon tile */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background-image: var(--grad-cta);
  color: var(--c-white);
  font-size: 26px;
}
.icon-tile--lg { width: 68px; height: 68px; font-size: 32px; }

/* ---- card
   Radius and shadow are the site's own values, lifted from the Elementor kit:
   15px corners and a wide, very soft ambient shadow rather than a tight one. */
.card {
  display: flex;
  flex-direction: column;
  padding: 34px 28px;
  background: var(--c-white);
  border-radius: 15px;
  box-shadow: 0 0 60px rgba(0, 0, 0, .1);
}
.card--center { align-items: center; text-align: center; }
.card__title { margin: 20px 0 12px; font-size: var(--t-h4); font-weight: 400; line-height: 1.3; letter-spacing: -.5px; }

/* A button placed directly in a card sizes to its label — the card is a column
   flex container, which would otherwise stretch it edge to edge. .btn--wide
   still opts back into full width. */
.card > .btn { align-self: flex-start; }

/* Vision / Mission / Our Value boxes: roomier padding, lighter heading. */
.card--value { padding: 3em; }
.card--value > :last-child { margin-bottom: 0; }
.card__title--lg {
  margin: 0 0 14px;
  font-size: var(--t-h4);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.5px;
}

@media (max-width: 1024px) { .card--value { padding: 2em; } }
.card__text { font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
.card__foot { margin-top: auto; padding-top: 22px; }

/* The middle service card is raised. */
.card--feature {
  box-shadow: 0 18px 50px rgba(59, 54, 100, .13);
  margin-block: -26px;
  z-index: 1;
  position: relative;
}
@media (max-width: 767px) { .card--feature { margin-block: 0; } }

/* ---- check list */
.check-list { margin: 0 0 22px; padding: 0; list-style: none; width: 100%; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.check-list li:last-child { border-bottom: 0; }
.check-list .icon { color: var(--c-orange); font-size: 17px; margin-top: .1em; }

/* ---- flip box */
.flip {
  position: relative;
  min-height: 260px;
  perspective: 1200px;
}
.flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
  transform-style: preserve-3d;
}
.flip:hover .flip__inner,
.flip:focus-within .flip__inner { transform: rotateY(180deg); }

.flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 24px;
  border-radius: 10px;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip__face--front {
  background: var(--c-white);
  box-shadow: 0 6px 30px rgba(59, 54, 100, .07);
}
.flip__face--back {
  transform: rotateY(180deg);
  background-image: var(--grad-cta);
  color: var(--c-white);
}
.flip__face--back .flip__title { color: var(--c-white); }
.flip__title { margin: 0; font-size: var(--t-h4); font-weight: 400; line-height: 1.3; letter-spacing: -.5px; }
.flip__text { margin: 0; font-size: 13.5px; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
  .flip__inner { transition: none; }
}

/* ---- testimonials */
.quote {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 26px;
  background: var(--c-white);
  border-radius: 10px;
}
.quote__text { margin: 0; font-size: 14px; line-height: 1.75; }
.quote__who { display: flex; align-items: center; gap: 12px; }
.quote__who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.quote__name { font-family: var(--f-head); font-weight: 700; color: var(--c-ink); line-height: 1.3; }
.quote__place {
  font-size: var(--t-h6);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-orange);
}

/* ---- stat badge (the "20+ years" disc) */
.stat-badge {
  display: grid;
  place-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 12px 34px rgba(59, 54, 100, .14);
  text-align: center;
  padding: 12px;
}
.stat-badge__value {
  font-family: var(--f-head);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-orange);
}
.stat-badge__label {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--c-ink);
}

/* ---- logo strip */
.logo-strip {
  display: flex;
  align-items: center;
  gap: 50px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.logo-strip::-webkit-scrollbar { display: none; }
.logo-strip img {
  flex: none;
  max-height: 62px;
  width: auto;
  opacity: .85;
  transition: opacity .3s ease;
}
.logo-strip img:hover { opacity: 1; }

/* ---- floating WhatsApp button */
.whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: var(--c-white);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp:hover {
  color: var(--c-white);
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
.whatsapp__icon { width: 32px; height: 32px; }

/* ---- prose (legal pages, article body) */
/* Long-form copy: the legal pages and blog posts.
   The original ran this the full width of the container, on a 24px leading with
   0.9em paragraph spacing. */
.prose { max-width: none; }
.prose p, .prose li { line-height: 24px; }
.prose p { margin-bottom: 14.4px; }
.prose h2, .prose h3, .prose h4, .prose h5 { margin-top: 8px; margin-bottom: 16px; }
.prose h2:first-child, .prose h3:first-child, .prose h5:first-child { margin-top: 0; }
/* Whoever wrote the privacy policy hit Enter before some of its headings and
   not others, leaving a blank paragraph in the source. That uneven rhythm is
   visible on the page, so it is reproduced here as a margin — one blank line
   box (24px) plus the paragraph margin either side — rather than by carrying
   empty paragraphs through the build. */
.prose h2.prose--gap, .prose h3.prose--gap,
.prose h4.prose--gap, .prose h5.prose--gap { margin-top: 52.8px; }
.prose ul, .prose ol { margin-bottom: 0; padding-left: 1.3em; }
.prose li { margin-bottom: 0; }
.prose a { color: var(--c-orange); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--c-orange-deep); }

/* ===== 09-sections.css ===== */
/* Homepage sections. The decorative shapes (orange disc, organic blob mask)
   are the same PNGs the Elementor build used as backgrounds and masks. */

/* ---- hero */
.hero {
  position: relative;
  /* Slides up behind the opaque header, with matching top padding so the
     content still lands just below it — both percentages resolve against the
     page width, as they do in the original. */
  margin-top: -7%;
  padding-top: 7%;
  background-image: url('/assets/img/2024/11/bg_header_3.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
/* The kit lightens the photographic background with a 60% white wash. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .6);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 48% 52%;
  gap: 0;
  align-items: end;
}

.hero__copy { align-self: center; padding-bottom: 56px; }
.hero__copy .pill { margin-bottom: 22px; }
.hero__copy h1 { margin-bottom: 20px; max-width: 518px; }
.hero__copy p { margin-bottom: 30px; max-width: 46ch; }

.hero__art {
  position: relative;
  background-image: url('/assets/img/2024/11/img_2.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.hero__photo {
  width: 100%;
  max-width: 600px;
  height: 650px;
  object-fit: contain;
  object-position: bottom center;
  margin-inline: auto;
}

/* Floating dashboard cards. */
.hero__card {
  position: absolute;
  width: 38%;
  max-width: 230px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(59, 54, 100, .16);
}
.hero__card--leads { top: 5%; right: -3%; width: 33%; max-width: 200px; }
.hero__card--sales { top: 31%; left: -8%; width: 34%; max-width: 209px; }
.hero__card--listings { bottom: 15%; right: -5%; width: 52%; max-width: 314px; }

@media (max-width: 1024px) {
  .hero__photo { height: 500px; }
  .hero__copy { padding-bottom: 50px; }
}
@media (max-width: 767px) {
  .hero { padding-top: 40px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { padding-bottom: 20px; }
  .hero__copy h1, .hero__copy p { max-width: none; }
  .hero__photo { height: 370px; }
  .hero__card--sales { left: 0; }
  .hero__card--listings { right: 0; }
}

/* ---- client logos */
.clients__title {
  margin-bottom: 34px;
  text-align: center;
  font-size: var(--t-h5);
}

/* ---- about intro */
.about-intro__art {
  position: relative;
  /* Orange disc sits behind the masked photo, as in the original. */
  background-image: url('/assets/img/2024/11/img_2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.about-intro__photo {
  width: 100%;
  height: 475px;
  object-fit: cover;
  object-position: center;
  /* Organic blob silhouette, same mask asset the original used. */
  -webkit-mask-image: url('/assets/img/2024/11/img_1.png');
  mask-image: url('/assets/img/2024/11/img_1.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.about-intro__art .stat-badge { position: absolute; top: 4%; left: 0; }

.about-intro__copy { position: relative; }
.about-intro__copy h6 { margin-bottom: 12px; }
.about-intro__copy h2 { margin-bottom: 20px; }

/* Hand-drawn dashed arrows, positioned as decoration only. */
.about-intro__arrow {
  position: absolute;
  top: 6px;
  left: -84px;
  width: 71px;
  pointer-events: none;
}
@media (max-width: 1024px) { .about-intro__arrow { display: none; } }

@media (max-width: 1024px) { .about-intro__photo { height: 400px; } }
@media (max-width: 767px) {
  .about-intro__photo { height: 280px; }
  .stat-badge { width: 116px; height: 116px; }
  .stat-badge__value { font-size: 30px; }
  .stat-badge__label { font-size: 11px; }
}

/* ---- featured services */
.services__grid { align-items: stretch; }

/* Outline button used by the two side cards. */
.btn--outline {
  background-image: none;
  background-color: transparent;
  color: var(--c-orange);
  box-shadow: inset 0 0 0 1px var(--c-orange);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  color: var(--c-white);
  background-image: var(--grad-cta);
  box-shadow: 0 8px 20px rgba(255, 133, 52, .28);
}

/* ---- expertise intro */
/* "Our Expertise" is this section's h2. In the WordPress build its styling was
   attached to an empty <span> with the text sitting outside it, so it silently
   fell back to body copy. The intent recorded in that span is the site's
   standard h2 — Nunito Sans 39/31/25px, 800 weight, -1px, #3B3664 — which is
   what it renders as here. */
.expertise-intro { padding-bottom: 112px; }
.expertise-intro .section-head h2 { margin-bottom: 18px; }
.expertise-intro .section-head { max-width: none; padding-inline: 2em; }
.expertise-intro .section-head p { line-height: 1.8; }

/* ---- dark CTA band */
.cta-band {
  position: relative;
  padding-block: 7em;
  background-image: url('/assets/img/2025/01/onlinist-customer-support-dubai.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  opacity: .5;
}
.cta-band > .container { position: relative; }
.cta-band h2 { color: var(--c-white); margin-bottom: 20px; }
.cta-band p { color: var(--c-white); font-size: 14px; line-height: 1.8; }
.cta-band .btn { margin-top: 12px; }

.cta-band__form label { color: var(--c-white); }

@media (max-width: 767px) { .cta-band { padding-block: 3em; } }

/* ---- testimonials */
.testimonials { padding: 64px 0 0; }
.testimonials__copy { position: relative; }
.testimonials__arrow {
  position: absolute;
  top: -40px;
  left: -96px;
  width: 94px;
  pointer-events: none;
}
@media (max-width: 1024px) { .testimonials__arrow { display: none; } }

.testimonials__grid { gap: 22px; }
.testimonials .quote {
  border: 1px solid var(--c-border);
}
.testimonials__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-image: url('/assets/img/2024/11/img_3.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 900px) {
  .testimonials__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 10-carousel.css ===== */
/* Scroll-snap carousel. Works as a plain horizontal scroller with no JS;
   the script adds prev/next buttons and dots. Replaces Swiper. */

.carousel { position: relative; }

.carousel__track {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide {
  flex: 0 0 calc((100% - 22px) / 2);
  margin: 0;
  scroll-snap-align: start;
}
.carousel[data-per-view="1"] .carousel__slide { flex-basis: 100%; }
.carousel[data-per-view="3"] .carousel__slide { flex-basis: calc((100% - 44px) / 3); }

@media (max-width: 900px) {
  .carousel__slide,
  .carousel[data-per-view="3"] .carousel__slide { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
}

/* ---- controls (added by JS) */
.carousel__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-ink);
  cursor: pointer;
  transition: background-image .25s ease, color .25s ease, border-color .25s ease;
}
.carousel__btn:hover:not(:disabled) {
  background-image: var(--grad-cta);
  border-color: transparent;
  color: var(--c-white);
}
.carousel__btn:disabled { opacity: .35; cursor: default; }
.carousel__btn .icon { width: .8em; height: .8em; font-size: 18px; }
.carousel__btn--prev .icon { transform: rotate(90deg); }
.carousel__btn--next .icon { transform: rotate(-90deg); }

.carousel__dots { display: flex; gap: 7px; margin-left: auto; }
.carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-border);
  cursor: pointer;
  transition: background-color .25s ease, width .25s ease;
}
.carousel__dot[aria-current="true"] { width: 24px; border-radius: 6px; background: var(--c-orange); }

/* ===== 11-service.css ===== */
/* Expertise / service pages: hero, "why choose" rows, feature grid. */

.svc-hero {
  position: relative;
  margin-top: -7%;
  padding: 7% 0 0;
  background-image: url('/assets/img/2024/11/bg_header_2.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.svc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .7);
}
.svc-hero > .container {
  position: relative;
  padding-block: 90px;
}

/* Copy 534px : art 684px with a 42px gutter, as measured off the original. */
.svc-hero .split { grid-template-columns: 1fr 1.28fr; gap: 42px; }
.svc-hero__copy { padding-left: 22px; }

.svc-hero__copy h1 {
  margin-bottom: 18px;
  /* h1 for structure, h2 scale to match the original */
  font-size: var(--t-h2);
}
.svc-hero__sub {
  margin-bottom: 28px;
  font-family: var(--f-head);
  font-size: var(--t-h4);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.5px;
  color: var(--c-ink);
}

.svc-hero__art {
  background-image: url('/assets/img/2024/11/img_2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.svc-hero__art img { width: 100%; height: auto; }

/* ---- why choose */
.svc-why { padding: 3em 0 7em; }
.svc-why .section-head { margin-bottom: 40px; max-width: none; }
.svc-why .section-head p { font-size: 15px; line-height: 1.8; }
.svc-why__body { gap: 46px; }

.feature-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 26px; }

.feature-row { display: flex; gap: 16px; margin: 0; }
.feature-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-image: var(--grad-cta);
  color: var(--c-white);
  font-size: 21px;
}
.feature-row__title { margin: 0 0 6px; font-size: var(--t-h5); font-weight: 700; }
.feature-row__text { margin: 0; font-size: 14px; line-height: 1.7; }

.svc-why__art { align-self: start; position: sticky; top: 24px; }
.svc-why__art img { width: 100%; height: auto; border-radius: 12px; }

@media (max-width: 767px) {
  .svc-why__art { position: static; }
}

/* ---- features grid */
.svc-features { padding-block: 3em; }
.svc-features .section-head { max-width: 900px; }
.svc-features .section-head p { font-size: 14px; line-height: 1.8; }

.card--feature-sm { padding: 21px; }
.card--feature-sm .card__title {
  margin: 0 0 7px;
  font-size: var(--t-h4);
  font-weight: 400;
  line-height: 1.3;
}
.card--feature-sm .card__text { margin: 0; font-size: 16px; line-height: 1.5; }
.card--feature-sm .icon-tile { width: 70px; height: 70px; font-size: 35px; }

.svc-features .grid--4 { gap: 48px 20px; padding-inline: 10px; }

/* ===== 12-pages.css ===== */
/* Interior page furniture: title band, values, tech strip, team, contact,
   careers, portfolio and the blog list. */

/* ---- title band shared by interior pages */
.page-head {
  position: relative;
  /* Matches the hero: slides up behind the opaque header with a 7% top pad. */
  margin-top: -7%;
  padding: 7% 0 0;
  background-image: url('/assets/img/2024/11/bg_header_2.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .7);
}
.page-head > .container {
  position: relative;
  max-width: 676px;   /* 656px column + the 10px container padding */
  padding-block: 112px;
  text-align: center;
}
.page-head h1 { margin: 0; }
.page-head__sub {
  margin: 14px 0 0;
  font-family: var(--f-head);
  font-size: var(--t-h4);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.5px;
  color: var(--c-ink);
}


@media (max-width: 767px) {
  .page-head > .container { padding-block: 64px; }
}

/* ---- values (about)
   Three equal white boxes: the "Our Value" copy on the left, Vision and Mission
   stacked on the right. The original sets them a little apart, not on the wide
   section gutter. */
.values .split { gap: 22px; }
.values__grid { gap: 22px; align-content: start; }
.values h6 { margin-bottom: 12px; }
.values h2 { margin-bottom: 18px; }

/* ---- technologies strip */
.logo-strip--center { justify-content: center; flex-wrap: wrap; gap: 40px; }
.logo-strip--center img { max-height: 70px; opacity: 1; }

/* ---- team */
.team__grid { gap: 26px; }

.team-card { text-align: center; }
.team-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 18px;
}
.team-card__media img { width: 100%; height: auto; display: block; }

.team-card__social {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(to top, rgba(59, 54, 100, .82), transparent);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.team-card:hover .team-card__social,
.team-card:focus-within .team-card__social { transform: translateY(0); opacity: 1; }

.team-card__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 15px;
}
.team-card__social a:hover { background-image: var(--grad-cta); color: var(--c-white); }

.team-card__name { margin: 0 0 4px; font-size: var(--t-h5); font-weight: 700; }
.team-card__role {
  margin: 0;
  font-size: var(--t-h6);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-orange);
}

/* ---- contact
   Both halves are cards in the original: the left one a team photo under a
   purple wash, the right a plain white panel. Each sat in a 50% Elementor
   column with a 10px margin, so the cards are 20px apart and 10px in from the
   grid edge — hence the container's own side padding is dropped here, or the
   cards would sit 10px further in than everywhere else on the site. */
.contact { padding-block: 112px; }

.contact > .container {
  padding-inline: 0;
  gap: 0;
  align-items: stretch;
}

.contact__intro,
.contact__form-wrap {
  margin: 10px;
  padding: 4em;
  border-radius: 15px;
}

.contact__intro {
  position: relative;
  isolation: isolate;
  background-image: url('/assets/img/2024/11/happy-creative-marketing-team-working-on-new-business-project-in-the-office-.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--c-white);
}
/* The purple wash sits over the photo but under the text: isolation on the
   card keeps this z-index local, so it cannot slide behind the card itself. */
.contact__intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(180deg, rgba(59, 54, 100, .8) 0%, var(--c-ink) 75%);
}

.contact__intro h2,
.contact__intro h3,
.contact__intro p,
.contact__intro a { color: var(--c-white); }
.contact__intro h6 { margin-bottom: 20px; }
.contact__intro h2 { margin-bottom: 20px; }
.contact__intro > p { margin-bottom: 14.4px; line-height: 1.5; }

/* Hairline between the copy and the address block. The top margin is the full
   gap, not the remainder: it collapses with the paragraph's own bottom margin
   rather than adding to it. */
.contact__rule {
  height: 0;
  margin: 37px 0 24px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .17);
}

.contact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.contact-list li { display: flex; gap: 16px; margin: 0; }
.contact-list li > div { flex: 1; min-width: 0; }
.contact-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 5px;
  background-color: var(--c-orange-deep);
  color: var(--c-white);
  font-size: 28px;
  line-height: 1;
}
.contact-list__label { margin: 0 0 7px; font-size: var(--t-h5); font-weight: 700; line-height: 1.4; }
.contact-list__value { margin: 0; line-height: 1.5; }
.contact-list__value a:hover { color: var(--c-yellow); }

.contact__form-wrap {
  background: var(--c-white);
  box-shadow: 0 0 60px rgba(0, 0, 0, .1);
}
.contact__form-wrap h2 { margin-bottom: 20px; }
.contact__form-wrap > p { margin-bottom: 34px; line-height: 1.5; }

@media (max-width: 1024px) {
  .contact { padding-block: 48px; }
  .contact__intro,
  .contact__form-wrap { padding: 2em; }
}
@media (max-width: 767px) {
  .contact { padding-block: 32px; }
  .contact__intro,
  .contact__form-wrap { padding: 21px; }
}

/* Full-bleed band, fixed height — the original's map widget sat in a
   full-width section with no container and a 500px iframe. */
.map-embed {
  position: relative;
  height: 500px;
  overflow: hidden;
}
@media (max-width: 767px) { .map-embed { height: 360px; } }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- careers: the "Join Us" application band
   A support-desk photo under a near-solid purple wash, with the form floating
   on it as a white card — the same card treatment as the Contact page. */
.apply {
  position: relative;
  isolation: isolate;
  padding-block: 112px;
  background-image: url('/assets/img/2025/01/onlinist-customer-support-dubai.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.apply::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-ink);
  opacity: .9;
}
/* The card carries the 10px column margin itself, so the container drops its
   own side padding — same reasoning as the contact cards. */
.apply > .container { padding-inline: 0; }

.apply__card {
  margin: 10px;
  padding: 3em;
  border-radius: 15px;
  background: var(--c-white);
  box-shadow: 0 0 60px rgba(0, 0, 0, .1);
}
/* Centred, but across the full card — not the narrow measure used elsewhere. */
.apply__card .section-head { max-width: none; }

/* This form's fields are white on a white card, picked out by their border,
   where the contact form fills them flat grey. */
.apply .field input:not([type="checkbox"]):not([type="radio"]),
.apply .field textarea,
.apply .field select { background-color: var(--c-white); }

@media (max-width: 1024px) {
  .apply { padding-block: 48px; }
  .apply__card { padding: 2em; }
}
@media (max-width: 767px) {
  .apply { padding-block: 32px; }
}

/* ---- careers: recruitment steps */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  counter-reset: step;
}
.step {
  position: relative;
  margin: 0;
  padding: 30px 24px;
  background: var(--c-white);
  border-radius: 12px;
  box-shadow: 0 6px 30px rgba(59, 54, 100, .07);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 50%;
  background-image: var(--grad-cta);
  color: var(--c-white);
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 800;
}
.step__when {
  margin: 0 0 6px;
  font-size: var(--t-h6);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-orange);
}
.step__title { margin: 0 0 10px; font-size: var(--t-h5); font-weight: 700; }
.step__text { margin: 0; font-size: 14px; line-height: 1.7; }

@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---- portfolio */
.stats { display: flex; flex-wrap: wrap; gap: 40px; margin: 32px 0 0; }
.stat { margin: 0; }
.stat__value {
  margin: 0;
  font-family: var(--f-head);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-orange);
}
.stat__label {
  margin: 0 0 8px;
  font-size: var(--t-h6);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-ink);
}
.projects-intro__art img { width: 100%; height: auto; border-radius: 14px; }

.projects__grid { gap: 24px; }
.project {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--c-ink);
}
.project img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s ease, opacity .3s ease;
}
.project:hover img { transform: scale(1.05); opacity: .55; }

.project__caption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 4px;
  padding: 20px;
  background: linear-gradient(to top, rgba(59, 54, 100, .9), transparent);
  color: var(--c-white);
}
.project__kind {
  font-size: var(--t-h6);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-yellow);
}
.project__title { font-family: var(--f-head); font-size: 17px; font-weight: 700; line-height: 1.35; }

/* ---- blog list + post */
.post-list { align-items: start; }

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: 0 6px 30px rgba(59, 54, 100, .07);
}
.post-card__media { display: block; overflow: hidden; }
.post-card__media img { width: 100%; height: auto; transition: transform .5s ease; }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: 24px; }
.post-card__meta,
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  font-size: var(--t-h6);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-orange);
}
.post-card__meta a,
.post__meta a { color: var(--c-orange); }
.post-card__meta a:hover,
.post__meta a:hover { color: var(--c-orange-deep); }
.post-card__title { margin: 0 0 12px; font-size: var(--t-h5); font-weight: 700; }
.post-card__title a { color: var(--c-ink); }
.post-card__title a:hover { color: var(--c-orange); }
.post-card__excerpt { margin: 0 0 18px; font-size: 14px; line-height: 1.7; }

.post h1 { margin-bottom: 26px; }
.post__hero { width: 100%; height: auto; border-radius: 14px; margin-bottom: 34px; }
.post .prose { max-width: none; }
.post .prose h2,
.post .prose h3,
.post .prose h4 { color: var(--c-ink); }
.post .prose p { font-size: 16px; line-height: 1.8; }

/* ---- expertise index */
.why-choose .card { padding: 21px; }
.why-choose .card__title { margin: 0 0 7px; font-size: var(--t-h4); font-weight: 400; line-height: 1.3; }
.why-choose .card__text { margin: 0; font-size: 16px; line-height: 1.5; }
.why-choose .icon-tile { width: 70px; height: 70px; font-size: 35px; }
.why-choose .grid--4 { gap: 48px 20px; padding-inline: 10px; }

/* ===== 13-animations.css ===== */
/* Entrance animations.
   Keyframes are Elementor's own (animate.css derived), copied verbatim from
   wp-content/plugins/elementor/assets/lib/animations/styles/ so the motion is
   identical to the WordPress site. Only the nine the site actually used are
   included.

   Markup contract: put data-anim="fadeInUp" (and optionally
   data-anim-delay="200") on an element. It stays hidden until it scrolls into
   view, then plays once. Without JS everything is visible immediately. */

/* Only hide pending elements when scripting is actually available — the `js`
   class is set by an inline snippet in <head>. If JS is off or fails to load,
   nothing is ever hidden and the page reads normally. */
.js [data-anim] { visibility: hidden; }
.js [data-anim].is-visible { visibility: visible; }

.animated {
  animation-duration: 1.25s;
  animation-fill-mode: both;
}
.animated.animated-slow { animation-duration: 2s; }
.animated.animated-fast { animation-duration: .75s; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fadeIn { animation-name: fadeIn; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInUp { animation-name: fadeInUp; }

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInDown { animation-name: fadeInDown; }

@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-100%, 0, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(100%, 0, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInRight { animation-name: fadeInRight; }

@keyframes zoomIn {
  from { opacity: 0; transform: scale3d(.3, .3, .3); }
  50% { opacity: 1; }
}
.zoomIn { animation-name: zoomIn; }

@keyframes rotateIn {
  from { transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
  to { transform-origin: center; transform: none; opacity: 1; }
}
.rotateIn { animation-name: rotateIn; }

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  0% { opacity: 0; transform: scale3d(.3, .3, .3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(.97, .97, .97); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}
.bounceIn { animation-name: bounceIn; }

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    transform: translate3d(0, -15px, 0);
  }
  90% { transform: translate3d(0, -4px, 0); }
}
.bounce { animation-name: bounce; transform-origin: center bottom; }

/* Hover "pop", used on social chips and icon links. */
@keyframes hover-pop {
  50% { transform: scale(1.2); }
}
.hover-pop:hover,
.hover-pop:focus,
.hover-pop:active {
  animation-name: hover-pop;
  animation-duration: .3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-anim] { visibility: visible; }
  .animated,
  .hover-pop:hover,
  .hover-pop:focus,
  .hover-pop:active { animation: none !important; }
}