/* Inter and Geist Mono, self-hosted from assets/fonts/ (2026-09-30).
   Latin and latin-ext subsets only, same unicode ranges Google Fonts serves;
   both fonts are SIL Open Font License. Replaces the fonts.googleapis.com
   stylesheet, which blocked first paint for about 0.8 s. Not preloaded: a
   preload competed with the hero image and slowed LCP. */
/* Geist Mono normal, latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/geist-mono-normal-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;
}
/* Geist Mono normal, latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/geist-mono-normal-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;
}
/* Inter italic, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/inter-italic-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;
}
/* Inter italic, latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/inter-italic-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;
}
/* Inter normal, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/inter-normal-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;
}
/* Inter normal, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/inter-normal-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;
}

/*
Theme Name: Sera UI skin for OrbixTech
Description: Presentation-only override layer. Retones the "Next" template to the
             Sera UI light theme (Inter + Geist Mono, zinc neutral scale, monochrome
             primary, 10px radii). Loads last, after assets/css/custom.css.
             Markup and copy are untouched - delete this file's <link> to revert.
Reference:   seraui.com (Inter body font, bg zinc-50, text zinc-900, shadcn "neutral" tokens)
*/

/* ============================================================
   1. Tokens
   ============================================================ */

:root {
    /* ── Sera UI / shadcn zinc scale ── */
    --sera-bg: #ffffff;             /* page background (white, per Jack) */
    --sera-surface: #ffffff;        /* card / panel                */
    --sera-surface-2: #f4f4f5;      /* zinc-100  inset surface     */
    --sera-fg: #18181b;             /* zinc-900  headings          */
    --sera-fg-muted: #52525b;       /* zinc-600  body copy         */
    --sera-fg-subtle: #71717a;      /* zinc-500  meta / captions   */
    --sera-fg-faint: #a1a1aa;       /* zinc-400  placeholders      */
    --sera-border: #e4e4e7;         /* zinc-200                    */
    --sera-border-soft: #f4f4f5;    /* zinc-100                    */
    --sera-primary: #18181b;
    --sera-primary-fg: #ffffff;
    --sera-primary-hover: #3f3f46;  /* zinc-700                    */
    --sera-dark: #09090b;           /* zinc-950  header/footer/hero*/
    --sera-dark-2: #18181b;         /* zinc-900                    */
    --sera-ring: rgba(24, 24, 27, 0.12);

    /* Radii. Sera UI ships --radius: .625rem (10px); pills stay full. */
    --sera-radius: 10px;
    --sera-radius-sm: 8px;
    --sera-radius-lg: 14px;

    --sera-shadow: 0 1px 2px 0 rgba(9, 9, 11, 0.05);
    --sera-shadow-md: 0 4px 12px -2px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.04);
    --sera-shadow-lg: 0 12px 32px -8px rgba(9, 9, 11, 0.12), 0 4px 8px -4px rgba(9, 9, 11, 0.05);

    --sera-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sera-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ── Remap the Next template's own variables ── */
    --body: var(--sera-bg);
    --theme: #18181b;
    --theme-2: #3f3f46;
    --theme-3: #18181b;
    --theme-4: #f4f4f5;
    --header: #18181b;
    --base: #18181b;
    --text: #52525b;
    --border: #e4e4e7;
    --border2: #27272a;
    --ratting: #f59e0b;
    --bg: #09090b;
    --bg2: #09090b;
    --bg3: #18181b;
    ---box-shadow: 0 4px 12px -2px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.04);
}

/* ============================================================
   2. Base and typography
   ============================================================ */

body {
    font-family: var(--sera-font);
    background-color: var(--sera-bg);
    color: var(--sera-fg-muted);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5, h6,
.hero-1 h1,
h1.page-h1,
blockquote,
.blog-wrapper .single-blog-post.post-details blockquote,
.blog-wrapper .single-blog-post.post-details .wp-block-quote,
.preloader .animation-preloader .txt-loading .letters-loading::before {
    font-family: var(--sera-font);
    color: var(--sera-fg);
    letter-spacing: -0.021em;
}

h1, .hero-1 h1, h1.page-h1 { letter-spacing: -0.028em; }
h1, h2, h3 { font-weight: 600; }

code, pre, kbd, samp, .mono {
    font-family: var(--sera-font-mono);
    font-size: 0.9em;
}

button, input, optgroup, select, textarea,
.theme-btn, .link-btn, .arrow-btn {
    font-family: var(--sera-font);
}

p { color: var(--sera-fg-muted); }

a { color: inherit; }
a:hover { color: var(--sera-fg); }

hr { border-color: var(--sera-border); opacity: 1; }

::selection { background: #18181b; color: #fff; }

/* Scrollbars, Sera keeps these neutral and thin */
* { scrollbar-color: #d4d4d8 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* ============================================================
   3. Header, light bar with a hairline rule
   Markup already ships both logos: .logo-1 (white) and .logo-2 (black).
   The template only swapped to .logo-2 on scroll; Sera's header is light
   at rest, so we promote the sticky treatment to the default state.
   ============================================================ */

.header-1,
header#header-sticky.header-1 {
    background: var(--sera-surface);
    border-bottom: 1px solid var(--sera-border);
}

/* ── Bar height ──
   The template padded each nav <li> 30px top and bottom, giving a ~109px bar.
   Sera sits nearer 68px, so the padding moves onto a tighter rhythm. The
   submenu is anchored to top:100% of the li, so it follows automatically. */
.header-1 .header-main { padding: 6px 0; }
.header-1 .header-main .main-menu ul li { padding: 16px 0; }
.header-1 .header-main .main-menu ul li a { font-size: 14px; }
.header-1 .header-main .sticky-logo img { height: 30px; width: auto; }

@media (max-width: 1199px) {
    .header-1 .header-main { padding: 10px 0; }
}

.header-1 .header-main .sticky-logo .logo-1 { display: none; }
.header-1 .header-main .sticky-logo .logo-2 { display: block; }

.header-main .main-menu ul li a,
.header-1 .header-main .main-menu ul li a,
.sticky.header-1 .header-main .main-menu ul li a {
    color: var(--sera-fg-muted);
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: color 0.15s ease;
}

.header-main .main-menu ul li:hover > a,
.header-1 .header-main .main-menu ul li:hover > a,
.header-main .main-menu ul li.active > a {
    color: var(--sera-fg);
}

.header-1 .header-right .icon-items .content h4 a,
.sticky.header-1 .header-right .icon-items .content h4 a {
    color: var(--sera-fg);
    font-weight: 500;
}

.header-1 .header-right .icon-items .content p,
.sticky.header-1 .header-right .icon-items .content p {
    color: var(--sera-fg-subtle);
}

/* main.css:1466 sets this to var(--white) at specificity (0,4,0) for a
   transparent header over a dark hero. The Sera header is white, so the
   icon was white-on-white and effectively invisible until .sticky kicked
   in. Match that selector's specificity so the dark value wins. */
.header-1 .header-main .header-right .sidebar__toggle,
.header-1 .header-right .sidebar__toggle,
.sticky.header-1 .header-right .sidebar__toggle {
    color: var(--sera-fg);
}

.sticky {
    background-color: var(--sera-surface);
    box-shadow: 0 1px 0 0 var(--sera-border), var(--sera-shadow);
}

/* ── Dropdowns and mega menus ── */
.header-main .main-menu ul li .submenu,
.header-main .main-menu ul li ul.submenu,
#header-sticky .submenu {
    background: var(--sera-surface);
    border: 1px solid var(--sera-border);
    border-radius: var(--sera-radius);
    box-shadow: var(--sera-shadow-lg);
    padding: 6px;
}

.header-main .main-menu ul li .submenu li a,
#header-sticky .submenu li a {
    color: var(--sera-fg-muted);
    border-radius: var(--sera-radius-sm);
    border-bottom: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover is a colour change on the label only, never a filled row. */
.header-main .main-menu ul li .submenu li a:hover,
.header-main .main-menu ul li .submenu li:hover > a,
#header-sticky .submenu li a:hover {
    background-color: transparent !important;
    color: var(--sera-fg);
}

/* Search inputs inside the Corporate / Cybersecurity dropdowns */
.corporate-search-input,
.cybersecurity-search-input {
    border: 1px solid var(--sera-border);
    border-radius: var(--sera-radius-sm);
    background: var(--sera-surface);
    color: var(--sera-fg) !important;
    font-family: var(--sera-font);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.corporate-search-input:focus,
.cybersecurity-search-input:focus {
    border-color: var(--sera-fg-faint);
    box-shadow: 0 0 0 3px var(--sera-ring);
}

.corporate-dropdown .submenu::-webkit-scrollbar-track,
.cybersecurity-dropdown .submenu::-webkit-scrollbar-track {
    background: transparent;
}
.corporate-dropdown .submenu::-webkit-scrollbar-thumb,
.cybersecurity-dropdown .submenu::-webkit-scrollbar-thumb {
    background: #d4d4d8;
}

/* WhatsApp stays its brand green, it is a recognisable affordance */
.header-1 .header-right .icon-items .icon,
.sticky.header-1 .header-right .icon-items .icon {
    color: #25D366 !important;
}

/* ============================================================
   4. Mobile offcanvas / meanmenu
   ============================================================ */

.mean-container .mean-nav,
.offcanvas__info {
    background: var(--sera-surface);
}

.mean-container .mean-nav ul li a,
.offcanvas__info .offcanvas__wrapper .offcanvas__content .mobile-menu ul li a {
    color: var(--sera-fg-muted);
    border-color: var(--sera-border);
    font-family: var(--sera-font);
}

.mean-container .mean-nav ul li a:hover {
    color: var(--sera-fg);
}

.offcanvas__overlay { background: rgba(9, 9, 11, 0.5); }

/* ── Sera-style mobile drawer ──────────────────────────────────────────────
   Restyles the template's meanmenu offcanvas to match the seraui.com docs
   drawer: opens from the left, hairline chrome, no row separators, chevron
   affordances instead of plus glyphs. Structure and JS are untouched — this
   is presentation only, so meanmenu still builds the menu as before. */

/* Slide in from the left. main.css parks it off the right with
   translateX(calc(100% + 80px)); .info-open resets to translateX(0), which
   works for either side, so only the closed offset and edges change here. */
.offcanvas__info {
    left: 0;
    right: auto;
    width: 320px;
    max-width: 86vw;
    border-left: 0;
    border-right: 1px solid var(--sera-border);
    box-shadow: var(--sera-shadow-lg);
}

/* main.css drives the slide with a translateX stack (plain + four vendor
   prefixes) parked off the RIGHT edge. Rather than out-specify five
   declarations to reverse the direction, neutralise the transform entirely
   and animate `left` instead — one property, no prefixes, and the open
   state is a plain (0,2,0) override. */
.offcanvas__info {
    -webkit-transform: none !important;
    transform: none !important;
    left: -420px;
    right: auto;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

.offcanvas__info.info-open {
    left: 0;
}

.offcanvas__wrapper {
    padding: 20px 18px;
}

/* Logo row: 48px of dead space below it in the template, and a hairline
   instead of a floating gap. */
.offcanvas__info .offcanvas__top {
    margin-bottom: 18px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sera-border-soft);
}

.offcanvas__info .offcanvas__logo img {
    height: 30px;
    width: auto;
}

/* Close: Sera uses a borderless glyph, not a filled dark pill. */
/* The dark pill is on this wrapper div, not the button inside it. */
.offcanvas__info .offcanvas__wrapper .offcanvas__content .offcanvas__close,
.offcanvas__info .offcanvas__wrapper .offcanvas__content .offcanvas__close-btn {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

.offcanvas__info .offcanvas__wrapper .offcanvas__content .offcanvas__close button,
.offcanvas__info .offcanvas__wrapper .offcanvas__content .offcanvas__close-btn button {
    background: transparent;
    color: var(--sera-fg-subtle);
    border: 0;
    border-radius: var(--sera-radius-sm);
    width: 34px;
    height: 34px;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* The glyph was white to read against the dark pill removed above, which
   would leave it white-on-white. Inherit the button's colour instead. */
.offcanvas__info .offcanvas__wrapper .offcanvas__content .offcanvas__close button i,
.offcanvas__info .offcanvas__wrapper .offcanvas__content .offcanvas__close-btn button i {
    color: inherit !important;
    font-size: inherit !important;
}

.offcanvas__info .offcanvas__wrapper .offcanvas__content .offcanvas__close button:hover,
.offcanvas__info .offcanvas__wrapper .offcanvas__content .offcanvas__close-btn button:hover {
    background: var(--sera-border-soft);
    color: var(--sera-fg);
}

/* Nav rows: no separators, rounded hover, tighter scale. */
.mean-container .mean-nav ul li,
.mean-container .mean-nav ul li li {
    border-top: 0;
}

.mean-container .mean-nav ul li a,
.mean-container .mean-nav ul li li a {
    border-top: 0;
    border-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 34px 9px 10px;
    margin: 1px 0;
    border-radius: var(--sera-radius-sm);
    text-transform: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mean-container .mean-nav ul li a:hover,
.mean-container .mean-nav ul li li a:hover {
    background: var(--sera-border-soft);
    color: var(--sera-fg);
}

/* Submenu: indented, smaller, quieter — Sera's nested docs entries. */
.mean-container .mean-nav ul li li a {
    font-size: 14px;
    font-weight: 400;
    color: var(--sera-fg-subtle);
    padding-left: 22px;
    opacity: 1;
}

.mean-container .mean-nav ul li li li a {
    padding-left: 34px;
}

/* Expand control: the template injects <i class="far fa-plus">. Hide the
   glyph and draw a chevron in CSS so it does not depend on the icon font,
   then rotate it when meanmenu adds .mean-clicked. */
/* meanmenu.css targets this as .mean-container .mean-nav ul li a.mean-expand,
   which out-specifies a shorter chain, and meanmenu's JS writes an inline
   font-size — hence the matching depth plus !important here. */
.mean-container .mean-nav ul li a.mean-expand,
.mean-container .mean-nav a.mean-expand {
    width: 32px !important;
    height: 32px !important;
    top: 3px;
    right: 2px;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
    border-radius: var(--sera-radius-sm);
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--sera-fg-faint);
    font-size: 0 !important;
    text-indent: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mean-container .mean-nav ul li a.mean-expand i,
.mean-container .mean-nav a.mean-expand i {
    display: none !important;
}

.mean-container .mean-nav ul li a.mean-expand::after,
.mean-container .mean-nav a.mean-expand::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg) translate(-1px, -1px);
    transition: transform 0.2s ease;
}

.mean-container .mean-nav ul li a.mean-expand:hover,
.mean-container .mean-nav a.mean-expand:hover {
    background: var(--sera-border-soft) !important;
    color: var(--sera-fg);
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked::after,
.mean-container .mean-nav a.mean-expand.mean-clicked::after {
    transform: rotate(45deg) translate(-1px, -1px);
}

/* Overlay: Sera dims with a soft blur rather than a flat wash. */
.offcanvas__overlay {
    background: rgba(9, 9, 11, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ============================================================
   5. Hero
   The hero sits over a photograph with white type, so it keeps a dark
   scrim; only the hue moves from the template navy to zinc-950.
   ============================================================ */

.hero-1::before {
    background: radial-gradient(66.34% 66.34% at 50% 25.71%, rgba(9, 9, 11, 0.35) 0%, rgba(9, 9, 11, 0.94) 100%);
}

.hero-1 h1,
.hero-1 .hero-content h1 {
    color: #fafafa;
}

.hero-1 .hero-content p,
.hero-1 .hero-desc {
    color: rgba(250, 250, 250, 0.72);
}

/* .hero-desc is also the page-intro paragraph on ~70 interior pages, where it
   sits on the light background and must stay dark. Scope by .hero-1 above. */
.hero-desc {
    color: var(--sera-fg-muted);
    font-size: 18px;
    line-height: 1.7;
}

.hero-marketing__title { color: #fafafa; }
.hero-marketing__sub { color: rgba(250, 250, 250, 0.68); }

/* ============================================================
   6. Buttons
   Sera's primary is the near-black fill; secondary is a bordered
   white "outline" button. No gradients, no lift on hover.
   ============================================================ */

.theme-btn {
    background: var(--sera-primary);
    color: var(--sera-primary-fg);
    border: 1px solid var(--sera-primary);
    border-radius: var(--sera-radius-sm);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
    box-shadow: var(--sera-shadow);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.theme-btn:hover {
    background: var(--sera-primary-hover);
    border-color: var(--sera-primary-hover);
    color: var(--sera-primary-fg);
    opacity: 1;
}

.theme-btn.bg-white,
.theme-btn.white-border {
    background: var(--sera-surface);
    color: var(--sera-fg);
    border: 1px solid var(--sera-border);
}

.theme-btn.bg-white:hover,
.theme-btn.white-border:hover {
    background: var(--sera-surface-2);
    color: var(--sera-fg);
    border-color: var(--sera-border);
}

.theme-btn.bg-2 {
    background: var(--sera-primary-hover);
    border-color: var(--sera-primary-hover);
}

.discussed-content .theme-btn { border-radius: var(--sera-radius-sm); }

.link-btn {
    color: var(--sera-fg);
    font-weight: 500;
}
.link-btn:hover { color: var(--sera-fg-muted); }

.arrow-btn { color: var(--sera-fg); }

/* ============================================================
   7. Sections and section titles
   ============================================================ */

/* Page-level bands stay white; only small UI affordances use surface-2. */
.section-bg-soft,
section.fix.section-padding.section-bg-soft,
.contact-form-section,
.clients-section {
    background-color: var(--sera-surface) !important;
}

/* Inline callout boxes that carried a warm tint. They keep their rule/border,
   which is what separates them, and drop the fill. */
[style*="background:#f5f4f0"],
[style*="background: #f5f4f0"],
[style*="background:#f9fafb"],
[style*="background: #f9fafb"],
[style*="background:#f0f4ff"],
[style*="background: #f0f4ff"],
[style*="background:#f5f0e8"],
[style*="background: #f5f0e8"] {
    background-color: var(--sera-surface) !important;
}

.section-title h2,
.section-title h1 {
    color: var(--sera-fg);
    letter-spacing: -0.024em;
}

.section-title p,
.section-title span {
    color: var(--sera-fg-muted);
}

.section-title span,
.sub-title,
.meta-pill {
    color: var(--sera-fg-subtle);
    letter-spacing: 0;
}

/* Small capsule labels, Sera renders these as neutral pills */
.meta-pill {
    background: var(--sera-surface-2);
    border: 1px solid var(--sera-border);
    border-radius: 999px;
    color: var(--sera-fg-muted);
}

/* ============================================================
   8. Cards and content surfaces
   ============================================================ */

.popular-service-box-items,
.service-offer-items,
.service-card-items,
.service-box-items,
.service-popular-items,
.team-items,
.pricing-card-items,
.blog-card-items,
.news-card-items,
.testimonial-card-items,
.education-box-items,
.counter-items,
.planning-wrapper .planning-content .planning-items,
.contact-form-items,
.project-details-wrapper .project-information {
    background-color: var(--sera-surface);
    border: 1px solid var(--sera-border);
    border-radius: var(--sera-radius);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.popular-service-box-items:hover,
.service-offer-items:hover,
.service-card-items:hover,
.service-box-items:hover,
.team-items:hover,
.pricing-card-items:hover,
.blog-card-items:hover,
.news-card-items:hover {
    border-color: #d4d4d8;
    box-shadow: var(--sera-shadow-md);
}

.popular-service-box-items h3,
.service-offer-items h3,
.service-card-items h3,
.service-box-items h3 {
    color: var(--sera-fg);
}

.popular-service-box-items p,
.service-offer-items p,
.service-card-items p,
.service-box-items p {
    color: var(--sera-fg-muted);
}

/* Inset panels the template tinted lavender / off-white */
.project-details-wrapper .project-information {
    background-color: var(--sera-surface-2);
    border-color: var(--sera-border);
}

.project-details-wrapper img,
.blog-card-items .blog-image img,
.news-card-items img,
.team-image img {
    border-radius: var(--sera-radius);
}

/* ============================================================
   9. Accordion / FAQ
   ============================================================ */

/* Modelled on the seraui.com/docs/accordion component: one bordered card,
   rows divided by hairlines rather than separate floating cards, and a plain
   chevron that rotates on open. The template ships a 20px heading on a grey
   fill with a Font Awesome glyph inside a teal-glow circle, all of which is
   neutralised below. */

.faq-accordion .accordion,
.faq-content .accordion {
    border: 1px solid var(--sera-border);
    border-radius: var(--sera-radius);
    background: var(--sera-surface);
    overflow: hidden;
}

/* Rows, not cards: kill the per-item border/radius/gap and divide with a
   hairline instead. */
.accordion-item,
.faq-accordion .accordion-item,
.faq-content .accordion-item {
    background: var(--sera-surface);
    border: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--sera-border-soft) !important;
    margin: 0 !important;   /* main.css spaces items 30px apart as cards */
    overflow: hidden;
}

.accordion-item:first-of-type,
.faq-accordion .accordion-item:first-of-type,
.faq-content .accordion-item:first-of-type {
    border-top: 0 !important;
}

/* Trigger row. Selector depth matches main.css's
   .faq-content .accordion-item .accordion-header .accordion-button. */
.accordion-button,
.faq-accordion .accordion-item .accordion-button,
.faq-content .accordion-item .accordion-header .accordion-button,
.faq-content .accordion-item .accordion-header .accordion-button.collapsed {
    background: var(--sera-surface);
    color: var(--sera-fg);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.5;
    text-transform: none;
    padding: 18px 20px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: color 0.15s ease;
}

.faq-content .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background: var(--sera-surface);
    color: var(--sera-fg);
    padding: 18px 20px 10px;
    box-shadow: none;
}

.accordion-button:focus,
.faq-content .accordion-item .accordion-header .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

/* main.css fills the panel #F9FAFB and pads it 15px 80px 25px 30px from a
   deeper selector, so these need !important rather than more classes. */
.accordion-body,
.faq-accordion .accordion-item .accordion-body,
.faq-content .accordion-item .accordion-body {
    color: var(--sera-fg-muted);
    background: var(--sera-surface) !important;
    font-size: 14px;
    line-height: 1.65;
    padding: 0 20px 18px !important;
}

.accordion-collapse { border: none; }

/* Chevron drawn in CSS rather than the Font Awesome glyph, so it does not
   depend on the Pro icon font, and rotates instead of swapping characters. */
.accordion-button::after,
.faq-accordion .accordion-item .accordion-button::after,
.faq-content .accordion-item .accordion-header .accordion-button::after,
.faq-content .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
    content: "" !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-right: 1.5px solid var(--sera-fg-subtle) !important;
    border-bottom: 1.5px solid var(--sera-fg-subtle) !important;
    border-radius: 0 !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 0 !important;
    line-height: 0 !important;
    margin-right: 6px;
    flex: 0 0 auto;
    transform: rotate(45deg);
    transition: transform 0.25s ease !important;
}

.faq-content .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
    transform: rotate(-135deg);
}

/* ============================================================
   10. Forms
   ============================================================ */

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search],
input[type=password],
input[type=number],
input[type=date],
select,
textarea,
.inline-field,
.nice-select {
    background-color: var(--sera-surface);
    border: 1px solid var(--sera-border) !important;
    border-radius: var(--sera-radius-sm) !important;
    color: var(--sera-fg) !important;
    font-family: var(--sera-font);
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus,
.inline-field:focus,
.nice-select.open {
    outline: none;
    border-color: var(--sera-fg-faint) !important;
    box-shadow: 0 0 0 3px var(--sera-ring);
}

::placeholder { color: var(--sera-fg-faint); opacity: 1; }

.nice-select .list {
    background: var(--sera-surface);
    border: 1px solid var(--sera-border);
    border-radius: var(--sera-radius);
    box-shadow: var(--sera-shadow-lg);
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background: var(--sera-surface-2);
    color: var(--sera-fg);
}

.contact-form-section { background: var(--sera-surface-2); }

/* ============================================================
   11. Tables and lists
   ============================================================ */

table { border-color: var(--sera-border); }
table th {
    background: var(--sera-surface-2);
    color: var(--sera-fg);
    font-weight: 600;
    border-color: var(--sera-border);
}
table td {
    color: var(--sera-fg-muted);
    border-color: var(--sera-border);
}

.list-items li,
.checklist li { color: var(--sera-fg-muted); }

/* ...but not inside the dark footer, where they'd fall to 1.5:1 */
.footer-section .list-items li,
.single-footer-widget .list-items li { color: #71717a; }
.footer-section .list-items li a,
.single-footer-widget .list-items li a { color: #a1a1aa; }

/* ============================================================
   12. Footer
   ============================================================ */

.footer-section,
.footer-bg {
    background-color: var(--sera-dark);
}

/* Sera UI noise. The canvas is injected by main.js and sits behind the
   content; everything else in the footer is lifted above it. */
.footer-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.footer-section > .sera-noise-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.footer-section > *:not(.sera-noise-canvas) {
    position: relative;
    z-index: 1;
}

.footer-widgets-wrapper {
    border-bottom: 1px solid rgba(250, 250, 250, 0.08);
}

.single-footer-widget .widget-head h3,
.single-footer-widget .widget-head h4 {
    color: #fafafa;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.single-footer-widget .list-items li a,
.footer-section a {
    color: #a1a1aa;
    transition: color 0.15s ease;
}

.single-footer-widget .list-items li a:hover,
.footer-section a:hover {
    color: #fafafa;
}

.footer-section p,
.single-footer-widget p {
    color: #a1a1aa;
}

.footer-bottom,
.footer-section .footer-bottom {
    border-top: 1px solid rgba(250, 250, 250, 0.08);
    background-color: var(--sera-dark);
}

/* ============================================================
   13. Scroll-up control
   ============================================================ */

/* Back-to-top control removed. The .scroll-up markup still ships in every
   page and main.js still binds its scroll handler; this hides the control
   without touching 125 files. Delete this rule to bring it back. */
.scroll-up {
    display: none !important;
}

/* ============================================================
   14. Inline-style colour remap
   ~1900 style="" attributes across the pages carry the old warm-neutral
   palette. Rewriting them would touch markup, so they are remapped here
   onto the zinc scale by attribute match instead.
     #2c2c2a warm charcoal  -> zinc-900
     #5f5e5a warm grey      -> zinc-600
     #e8e6e1 warm border    -> zinc-200
     #f5f4f0 warm surface   -> zinc-100
   ============================================================ */

[style*="color:#2c2c2a"],
[style*="color: #2c2c2a"] { color: var(--sera-fg) !important; }

[style*="color:#5f5e5a"],
[style*="color: #5f5e5a"] { color: var(--sera-fg-muted) !important; }

[style*="color:#888"],
[style*="color: #888"],
[style*="color:#555"],
[style*="color: #555"],
[style*="color:#666"],
[style*="color: #666"],
[style*="color:#aaa"],
[style*="color: #aaa"],
[style*="color:#6b7280"],
[style*="color: #6b7280"],
[style*="color:#94a3b8"],
[style*="color: #94a3b8"] { color: var(--sera-fg-subtle) !important; }

[style*="color:#111"],
[style*="color: #111"],
[style*="color:#111827"],
[style*="color: #111827"],
[style*="color:#374151"],
[style*="color: #374151"],
[style*="color:#101828"],
[style*="color: #101828"],
[style*="color:#696969"],
[style*="color: #696969"] { color: var(--sera-fg) !important; }

[style*="border-top:1px solid #e8e6e1"],
[style*="border-top: 1px solid #e8e6e1"] { border-top-color: var(--sera-border) !important; }

[style*="border-bottom:1px solid #e8e6e1"],
[style*="border-bottom: 1px solid #e8e6e1"] { border-bottom-color: var(--sera-border) !important; }

[style*="border-left:3px solid #e8e6e1"],
[style*="border-left: 3px solid #e8e6e1"] { border-left-color: var(--sera-border) !important; }

[style*="border-left:3px solid #2c2c2a"],
[style*="border-left: 3px solid #2c2c2a"] { border-left-color: var(--sera-fg) !important; }

[style*="border-left:4px solid #5b6cf2"],
[style*="border-left: 4px solid #5b6cf2"] { border-left-color: var(--sera-fg) !important; }

[style*="border:1px solid #eee"],
[style*="border: 1px solid #eee"] { border-color: var(--sera-border) !important; }

/* (inline callout fills are neutralised to white in section 7) */

[style*="color:#5b6cf2"],
[style*="color: #5b6cf2"],
[style*="color:#712cf9"],
[style*="color: #712cf9"],
[style*="color:#3a7a34"],
[style*="color: #3a7a34"],
[style*="color:#8a6a3a"],
[style*="color: #8a6a3a"] { color: var(--sera-fg) !important; }

/* ============================================================
   15. Article pages (articles/*.html)
   Loaded after articles/article-styles.css, which carries the same
   warm palette as the inline styles above.
   ============================================================ */

.article-content {
    color: var(--sera-fg-muted);
    font-size: 18px;
    line-height: 1.75;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content strong {
    color: var(--sera-fg);
}

.article-content h1 { letter-spacing: -0.028em; }
.article-content h2,
.article-content h3 { letter-spacing: -0.021em; }

.article-date { color: var(--sera-fg-subtle); }

.article-content a {
    color: var(--sera-fg);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--sera-fg-faint);
}
.article-content a:hover { text-decoration-color: var(--sera-fg); }

blockquote.key-takeaways {
    background: var(--sera-surface-2);
    border-left: 3px solid var(--sera-primary);
    border-radius: 0 var(--sera-radius) var(--sera-radius) 0;
}

blockquote.key-takeaways strong { color: var(--sera-fg); }
blockquote.key-takeaways li { color: var(--sera-fg-muted); }

.article-contact {
    border-top: 1px solid var(--sera-border);
    color: var(--sera-fg-muted);
}

/* ============================================================
   16. Prose rhythm
   main.css sets `p { margin: 0 }` globally, so multi-paragraph copy
   collapses into one block. It also puts `transition: all .4s` on every
   paragraph, which serves nothing and animates colour on load.
   ============================================================ */

p { transition: none; }

.project-details-wrapper p,
.work-process-items p,
.about-intro p { margin-bottom: 1.1em; }

.project-details-wrapper p:last-child,
.about-intro p:last-child { margin-bottom: 0; }

/* ============================================================
   17. About page, on Sera's section rhythm
   Replaces the template's stacked 60px + 80px padding (which left a ~140px
   dead band between the intro and The Orbix Way) with one consistent scale,
   and holds the prose to a readable measure instead of the full 1320px.
   ============================================================ */

.about-intro.section-padding {
    padding: 96px 0 56px !important;
}

.about-intro .container,
.about-process .container {
    padding-bottom: 0;
}

.about-intro .project-details-wrapper {
    max-width: 760px;
}

.about-intro h1.page-h1 {
    font-size: 48px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.032em;
    margin-bottom: 24px !important;
}

.about-intro p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--sera-fg-muted);
}

.about-process.section-padding {
    padding: 0 0 96px !important;
}

/* Title sits left, over the left-hand column it introduces, rather than
   centred across a two-column split. */
.about-process .section-title,
.about-process .section-title.text-center {
    text-align: left !important;
    margin-bottom: 40px;
}

.about-process .section-title h2 {
    font-size: 30px !important;
    letter-spacing: -0.026em;
}

/* The markup carries .align-items-center, whose Bootstrap utility is
   !important. With the diagram column taller than the card column it pushed
   the first card ~42px below the heading. Top-align so the stack starts
   directly under the title. */
.about-process .work-process-wrapper .row {
    align-items: flex-start !important;
}

/* The three steps read as a stack of equal cards, all open, no hover state.
   main.css targets these at .work-process-wrapper .work-process-content
   .work-process-items (0,3,0), so the selector has to be at least as specific.
   Its margin-top: 30px also left an uneven 46px between cards and 30px above
   the first; spacing now comes from margin-bottom alone. */
.about-process .work-process-wrapper .work-process-content .work-process-items {
    background: var(--sera-surface);
    border: 1px solid var(--sera-border);
    border-radius: var(--sera-radius);
    padding: 22px 24px;
    margin-top: 0;
    margin-bottom: 14px;
    text-align: left;
}

.about-process .work-process-wrapper .work-process-content .work-process-items:last-child {
    margin-bottom: 0;
}

.about-process .work-process-wrapper .work-process-content .work-process-items h4 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.014em;
    margin-bottom: 8px;
}

.about-process .work-process-wrapper .work-process-content .work-process-items p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--sera-fg-muted);
    margin-bottom: 0;
}

.about-process .work-process-image {
    display: flex;
    justify-content: center;
}

/* The diagram's outer labels sit past the 400x430 viewBox, so the right-hand
   caption was clipped mid-word. Letting it paint outside costs nothing. */
.about-process .work-process-image svg {
    overflow: visible;
}

@media (max-width: 991px) {
    .about-intro.section-padding { padding: 64px 0 40px !important; }
    .about-process.section-padding { padding: 0 0 64px !important; }
    .about-intro h1.page-h1 { font-size: 30px !important; }
    .about-process .work-process-image { margin-top: 32px; }
}

/* ============================================================
   18. Modern Timeline (Programme Agenda on the training pages)
   Ported from seraui.com/docs/timeline "Modern Timeline": a gradient
   axis running through dot markers, cards that shift right on hover,
   and the date as a pill. Recoloured from Sera's sky accent to the
   site's zinc scale so it stays monochrome.

   The markup is untouched apart from the .sera-timeline hook: each row
   is a bare <div> holding three <p> in a fixed order, so the parts are
   addressed with :nth-of-type. Their inline font-size / margin need
   !important to override, the colours are already remapped in §14.
   ============================================================ */

.sera-timeline {
    position: relative;
    gap: 0 !important;
}

.sera-timeline > div {
    position: relative;
    padding-left: 42px;
    padding-bottom: 30px;
    transition: transform 0.3s ease;
}

.sera-timeline > div:last-child {
    padding-bottom: 0;
}

/* Axis. Sera's runs from-black via-gray-400 to-white, which vanishes on a
   white page; its own rows are short enough to hide that. These agenda rows
   are much taller, so the gradient lands on a still-visible zinc rather than
   transparent, keeping one continuous line between markers. */
.sera-timeline > div:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 20px;
    bottom: -4px;
    width: 2px;
    background: linear-gradient(to bottom, var(--sera-fg) 0%, #a1a1aa 45%, #d4d4d8 100%);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Marker: dark disc with a white centre dot */
.sera-timeline > div::after {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, #fff 0 3.5px, transparent 3.5px),
        linear-gradient(135deg, #52525b 0%, #18181b 100%);
    box-shadow: 0 1px 3px rgba(9, 9, 11, 0.22);
    transition: transform 0.3s ease;
}

.sera-timeline > div:hover { transform: translateX(4px); }
.sera-timeline > div:hover::after { transform: scale(1.12); }
.sera-timeline > div:hover::before { opacity: 1; }

/* Time slot, rendered as Sera's pill */
.sera-timeline > div > p:nth-of-type(1) {
    display: inline-block;
    margin-bottom: 8px !important;
    padding: 2px 10px;
    border: 1px solid var(--sera-border);
    border-radius: 999px;
    background: var(--sera-surface-2);
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.sera-timeline > div > p:nth-of-type(2) {
    font-size: 16px !important;
    letter-spacing: -0.012em;
    margin-bottom: 6px !important;
}

.sera-timeline > div > p:nth-of-type(3) {
    line-height: 1.7;
    margin: 0 !important;
}

@media (max-width: 575px) {
    .sera-timeline > div { padding-left: 34px; padding-bottom: 24px; }
    .sera-timeline > div:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sera-timeline > div,
    .sera-timeline > div::after { transition: none; }
    .sera-timeline > div:hover { transform: none; }
}

/* ============================================================
   18b. Professional Experience Timeline (Modules on training pages)
   Ported from seraui.com/docs/timeline "Professional Experience":
   a gradient axis, a hollow ring marker that fills on hover, and a
   bordered card per entry carrying an icon chip, title, optional meta
   badge and a body. Recoloured to the zinc scale and capped at the
   site's 4px radius instead of Sera's rounded-lg.

   Markup contract (one .stp-item per module):
     .sera-timeline-prof > .stp-item > .stp-card
        > .stp-head  > .stp-icon + .stp-title + optional .stp-badge
        > .stp-body  > p / ul
   ============================================================ */

.sera-timeline-prof {
    position: relative;
    display: block;
}

.stp-item {
    position: relative;
    padding-left: 48px;
    padding-bottom: 20px;
}

.stp-item:last-child { padding-bottom: 0; }

/* Axis: starts below the marker and runs to the next one */
.stp-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 30px;
    bottom: -2px;
    width: 2px;
    background: linear-gradient(to bottom, var(--sera-fg) 0%, #a1a1aa 55%, #d4d4d8 100%);
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

/* Marker: hollow ring that takes a solid centre on hover */
.stp-item::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid var(--sera-border);
    background: var(--sera-surface);
    box-shadow: inset 0 0 0 0 var(--sera-fg);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.stp-item:hover::before { opacity: 1; }
.stp-item:hover::after {
    border-color: var(--sera-fg-faint);
    box-shadow: inset 0 0 0 3px var(--sera-fg);
}

.stp-card {
    background: var(--sera-surface);
    border: 1px solid var(--sera-border);
    border-radius: 4px;
    box-shadow: var(--sera-shadow);
    padding: 18px 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stp-item:hover .stp-card {
    border-color: var(--sera-fg-faint);
    box-shadow: var(--sera-shadow-md);
}

.stp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.stp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--sera-surface-2);
    color: var(--sera-fg-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--sera-font-mono);
    letter-spacing: -0.02em;
}

.stp-title {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600;
    color: var(--sera-fg);
    letter-spacing: -0.012em;
    line-height: 1.4;
}

.stp-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border: 1px solid var(--sera-border);
    border-radius: 999px;
    background: transparent;
    color: var(--sera-fg-subtle);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.stp-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sera-border-soft);
}

.stp-body > p {
    margin: 0 !important;
    color: var(--sera-fg-muted);
    line-height: 1.7;
}

.stp-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stp-body ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 6px;
    color: var(--sera-fg-muted);
    line-height: 1.7;
}

.stp-body ul li:last-child { margin-bottom: 0; }

/* Sera's small slate dot in front of every bullet */
.stp-body ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--sera-fg-faint);
}

@media (max-width: 575px) {
    .stp-item { padding-left: 34px; padding-bottom: 16px; }
    .stp-card { padding: 16px; }
    .stp-item::after { left: 0; }
    .stp-item:not(:last-child)::before { left: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .stp-item::after,
    .stp-card,
    .stp-item::before { transition: none; }
}

/* ============================================================
   19. Odds and ends
   ============================================================ */

.clients-section { background: var(--sera-bg); }
.client-logo { filter: grayscale(1); opacity: 0.55; }
.client-logo:hover { filter: grayscale(0); opacity: 1; }

.preloader { background-color: var(--sera-bg); }

blockquote,
.blog-wrapper .single-blog-post.post-details blockquote,
.blog-wrapper .single-blog-post.post-details .wp-block-quote {
    background-color: var(--sera-surface-2) !important;
    color: var(--sera-fg) !important;
    border-left: 3px solid var(--sera-primary);
    border-radius: 0 var(--sera-radius) var(--sera-radius) 0;
    font-size: 20px;
    font-weight: 400;
}

.popular-posts .single-post-item,
.popular_posts .single-post-item { border-bottom-color: var(--sera-border); }

/* Badges and pills the template rendered in the mint accent */
.badge, .tag, .category-badge {
    background: var(--sera-surface-2);
    color: var(--sera-fg-muted);
    border: 1px solid var(--sera-border);
    border-radius: 999px;
    font-weight: 500;
}

/* Bootstrap focus rings retuned to the neutral ring */
.btn:focus, .btn:focus-visible,
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px var(--sera-ring);
    border-color: var(--sera-fg-faint);
}

:focus-visible {
    outline: 2px solid var(--sera-fg);
    outline-offset: 2px;
}