/* =====================================================================
   SITE DESIGN SYSTEM
   Layout language modelled on a clean corporate IT site:
   white space, contained charcoal panels, light-blue bands, small radii,
   line icons, pill labels and a dot-matrix motif.
   Font ........ Open Sans (base 16px / 24px)
   Primary ..... #1B5C90 / #0F6BB4      Secondary ... #FFBB00
   ===================================================================== */

:root {
    --p-50:  #EEF4FA;
    --p-100: #DCE8F3;
    --p-200: #B9D1E7;
    --p-600: #0F6BB4;
    --p-700: #1B5C90;
    --p-800: #164B76;

    --a-500: #FFBB00;

    --head:  #0F171F;   /* headings — near black */
    --ink:   #1A242E;
    --body:  #4F5A66;
    --muted: #707B87;
    --line:  #DCE3EA;

    --tint:   #E1EBF5;  /* light-blue band */
    --soft:   #F3F6F9;  /* chips / soft fills */
    --char:   #151E27;  /* charcoal panels */
    --char-9: #0C1218;  /* footer */

    --shadow-hover: 0 6px 14px -6px rgba(12, 18, 24, .38);

    --font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------------------------------------------------------------- BASE */
html { font-family: var(--font); -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, li, a, button, input, select, textarea, label { font-family: var(--font); }
::selection { background: var(--p-600); color: #fff; }

/* -------------------------------------------------------------- LAYOUT */
.ui-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 640px)  { .ui-container { padding-inline: 24px; } }
@media (min-width: 1024px) { .ui-container { padding-inline: 32px; } }

.ui-section     { padding-block: 72px; }
.ui-section--sm { padding-block: 48px; }
@media (min-width: 1024px) {
    .ui-section     { padding-block: 112px; }
    .ui-section--sm { padding-block: 64px; }
}

/* Blocks nested inside section_header subitems */
.ui-subitems > * + * { margin-top: 64px; }
.ui-subitems .ui-section,
.ui-subitems .ui-section--sm { padding-block: 0; background: transparent !important; border: 0 !important; }
.ui-subitems .ui-container   { padding-inline: 0; max-width: none; }

.ui-bg-tint  { background: var(--tint); }
.ui-bg-soft  { background: var(--soft); }
.ui-bg-char  { background: var(--char); }
.ui-bg-char9 { background: var(--char-9); }
.ui-bg-brand { background: var(--p-700); }

/* ---------------------------------------------------------- TYPOGRAPHY */
.ui-display { font-size: 38px; line-height: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--head); }
@media (min-width: 768px)  { .ui-display { font-size: 54px; line-height: 60px; } }
@media (min-width: 1280px) { .ui-display { font-size: 55px; line-height: 60px; } }

.ui-h1 { font-size: 34px; line-height: 42px; font-weight: 800; letter-spacing: -0.025em; color: var(--head); }
@media (min-width: 768px) { .ui-h1 { font-size: 48px; line-height: 56px; } }

.ui-h2 { font-size: 30px; line-height: 38px; font-weight: 800; letter-spacing: -0.022em; color: var(--head); }
@media (min-width: 768px) { .ui-h2 { font-size: 42px; line-height: 50px; } }

.ui-h3-lg { font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -0.015em; color: var(--head); }
@media (min-width: 768px) { .ui-h3-lg { font-size: 28px; line-height: 36px; } }

.ui-h3 { font-size: 19px; line-height: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--head); }
.ui-h4 { font-size: 17px; line-height: 24px; font-weight: 700; color: var(--head); }

/* One size for all running text (16/24, weight 500). Lead is only used in heroes. */
.ui-lead    { font-size: 18px; line-height: 30px; font-weight: 500; color: #3B4652; }
@media (min-width: 768px) { .ui-lead { font-size: 20px; line-height: 32px; } }
.ui-body,
.ui-body-sm { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--body); }
.ui-small   { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--muted); }

/* Title links: keep the title colour, underline on hover only */
.ui-title-link { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 2px; transition: text-decoration-color .2s; }
.ui-title-link:hover { text-decoration-color: currentColor; }

.ui-flow > * { margin: 0; }
.ui-flow > * + * { margin-top: 16px; }

/* Justified long-form copy from tablet up (hyphenated, no rivers) */
@media (min-width: 768px) {
    .ui-copy, .ui-copy p, .ui-copy li {
        text-align: justify; text-justify: inter-word;
        -webkit-hyphens: auto; hyphens: auto;
    }
}

.ui-head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 760px; }

/* Pill label ("HOW WE DO") */
.ui-pill {
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: 999px;
    font-size: 11px; line-height: 16px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    background: var(--tint); color: var(--p-700);
}
.ui-pill--white { background: #fff; color: var(--head); }
.ui-pill--dark  { background: rgba(255, 255, 255, .1); color: #fff; }
.ui-pill--accent{ background: var(--a-500); color: var(--head); }

/* Legacy alias */
.ui-eyebrow { font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--p-700); }

/* ----------------------------------------------------- BUTTONS & LINKS */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 22px; border-radius: 3px;
    font-size: 14px; line-height: 20px; font-weight: 600;
    white-space: nowrap; cursor: pointer; border: 1px solid transparent;
    transition: background-color .2s, color .2s, border-color .2s;
}
.ui-btn:focus-visible { outline: 2px solid var(--a-500); outline-offset: 2px; }
.ui-btn--sm    { height: 38px; padding: 0 16px; font-size: 13px; }
.ui-btn--block { width: 100%; }

.ui-btn--brand   { background: var(--p-600); color: #fff; }
.ui-btn--brand:hover   { background: var(--p-700); }
.ui-btn--soft    { background: var(--tint); color: var(--p-700); }
.ui-btn--soft:hover    { background: var(--p-100); }
.ui-btn--accent  { background: var(--a-500); color: var(--head); }
.ui-btn--accent:hover  { background: #F0B000; }
.ui-btn--ghost   { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.ui-btn--ghost:hover   { border-color: #fff; }

.ui-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; line-height: 20px; font-weight: 600;
    color: var(--p-600); transition: color .2s;
}
.ui-link i { font-size: 10px; transition: transform .2s; }
.ui-link:hover { color: var(--p-800); }
.ui-link:hover i { transform: translateX(3px); }
.ui-link--light { color: #fff; }
.ui-link--light:hover { color: var(--a-500); }

/* "View more" link with circled arrow (dark sections) */
.ui-more { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #fff; }
.ui-more span.c {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.3); font-size: 10px; transition: background-color .2s, border-color .2s, color .2s;
}
.ui-more:hover span.c { background: var(--a-500); border-color: var(--a-500); color: var(--head); }

/* -------------------------------------------------------------- CARDS */
.ui-card {
    position: relative; height: 100%;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: 4px;
    padding: 30px 28px;
    transition: box-shadow .25s, border-color .25s;
}
.ui-card:hover { border-color: #C9D3DD; box-shadow: var(--shadow-hover); }
.ui-card--compact { padding: 24px; }
.ui-card--flat:hover { box-shadow: none; border-color: var(--line); }

/* Line icon (no tile) */
.ui-icon { display: inline-flex; align-items: center; height: 40px; font-size: 32px; line-height: 1; color: var(--p-600); }
.ui-icon--sm { height: 32px; font-size: 26px; }
.ui-icon--light { color: var(--a-500); }

/* Square number badge */
.ui-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 4px;
    background: var(--tint); color: var(--p-700);
    font-size: 14px; font-weight: 700;
}

/* ---------------------------------------------------------- CHECKLISTS */
.ui-checklist ul,
.custom-checklist ul { list-style: none !important; padding-left: 0 !important; margin: 20px 0 0; display: grid; gap: 12px; }
.ui-checklist li,
.custom-checklist li { position: relative; padding-left: 32px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--body); text-align: left !important; }
.ui-checklist li::before,
.custom-checklist li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 0; top: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; background: var(--p-600); color: #fff;
}

/* Inline checked item (used in lists rendered by PHP) */
.ui-check {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-600); color: #fff; font-size: 9px;
}
.ui-check--accent { background: var(--a-500); color: var(--head); }

/* --------------------------------------------------------------- FORMS */
.ui-label { display: block; margin-bottom: 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink); }
.ui-label .req { color: #C93636; }
.ui-input {
    display: block; width: 100%; height: 46px; padding: 0 14px;
    font-size: 15px; line-height: 24px; color: var(--ink);
    background: #fff; border: 1px solid #D3DAE2; border-radius: 3px;
    transition: border-color .2s, box-shadow .2s;
}
.ui-input::placeholder { color: #9AA5B0; }
.ui-input:focus { outline: none; border-color: var(--p-600); box-shadow: 0 0 0 3px rgba(15, 107, 180, .12); }
textarea.ui-input { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
select.ui-input {
    -webkit-appearance: none; appearance: none; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23707B87' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.ui-checkbox { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--p-600); flex-shrink: 0; }

/* ---------------------------------------------------------- NAVIGATION */
#site-header { transition: box-shadow .25s; }
#site-header[data-scrolled] { box-shadow: 0 2px 8px -2px rgba(12, 18, 24, .22); }

.ui-nav-link {
    display: inline-flex; align-items: center; gap: 5px;
    height: 72px; padding: 0 12px;
    font-size: 13.5px; line-height: 20px; font-weight: 500; letter-spacing: .005em;
    color: var(--ink); transition: color .2s;
}
.ui-nav-link:hover, .group:hover > .ui-nav-link { color: var(--p-600); }
.ui-nav-link i { font-size: 8px; color: var(--muted); transition: transform .2s; }
.group:hover > .ui-nav-link i { transform: rotate(180deg); color: var(--p-600); }

.megamenu-panel { transition: opacity .2s ease, visibility .2s; }

.ui-breadcrumb { font-size: 14px; line-height: 20px; font-weight: 500; }

.ui-footer-link { font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .62); transition: color .2s; }
.ui-footer-link:hover { color: #fff; }

/* Chip (industries / process steps) */
.ui-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 18px 6px 6px; border-radius: 999px;
    background: var(--soft); border: 1px solid transparent;
    font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink);
    transition: background-color .2s, border-color .2s;
}
.ui-chip .n {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-700); color: #fff; font-size: 12px; font-weight: 700;
}
.ui-chip:hover { background: #fff; border-color: var(--line); }

/* -------------------------------------------------------- DOT MATRIX */
.ui-dots {
    pointer-events: none;
    background-image: radial-gradient(var(--dot-c, #B9D1E7) 1.8px, transparent 2px);
    background-size: 16px 16px;
}
.ui-dots--light  { --dot-c: rgba(255, 255, 255, .28); }
.ui-dots--accent { --dot-c: rgba(255, 187, 0, .8); }

/* ------------------------------------------------- ACCENT SHAPES */
/* Orbit rings with travelling nodes (thin lines, no glow) */
.ui-orbit { position: absolute; aspect-ratio: 1 / 1; pointer-events: none; }
.ui-orbit span {
    position: absolute; border-radius: 50%;
    border: 1px dashed var(--orbit-c, #B9D1E7);
    animation: ui-spin 60s linear infinite;
}
.ui-orbit span:nth-child(1) { inset: 0; }
.ui-orbit span:nth-child(2) { inset: 16%; border-style: solid; animation-duration: 42s; animation-direction: reverse; }
.ui-orbit span:nth-child(3) { inset: 32%; animation-duration: 30s; }
.ui-orbit span::after {
    content: ""; position: absolute; top: -4px; left: 50%; margin-left: -4px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--a-500);
}
.ui-orbit span:nth-child(2)::after { background: var(--p-600); }
.ui-orbit span:nth-child(3)::after { top: auto; bottom: -3px; width: 6px; height: 6px; margin-left: -3px; background: var(--p-700); }
.ui-orbit--dark { --orbit-c: rgba(255, 255, 255, .16); }
.ui-orbit--dark span:nth-child(2)::after { background: #fff; }

/* Corner brackets */
.ui-corner { position: absolute; width: 40px; height: 40px; pointer-events: none; border-top: 2px solid var(--a-500); border-left: 2px solid var(--a-500); }
.ui-corner--br { border: 0; border-bottom: 2px solid var(--a-500); border-right: 2px solid var(--a-500); }
.ui-corner--blue { border-color: var(--p-600); }

/* Network constellation */
.ui-network line { stroke-dasharray: 3 6; animation: ui-dash 8s linear infinite; }

/* Gentle float (dot blocks) */
.ui-float { animation: ui-float 8s ease-in-out infinite; }

@keyframes ui-spin  { to { transform: rotate(360deg); } }
@keyframes ui-dash  { to { stroke-dashoffset: -90; } }
@keyframes ui-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Image shapes (legacy names kept) */
.hero-clip-path { clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 65%); }
@media (max-width: 1024px) { .hero-clip-path { clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 55%); } }
@media (max-width: 640px)  { .hero-clip-path { clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%, 0 45%); } }
.clip-arrow-shape { clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%); }

/* Subtle scroll fade-in (only while JS runs) */
/* Attribute-driven (no class toggles → no Tailwind CDN rebuilds while scrolling) */
[data-js="reveal"] [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
[data-js="reveal"] [data-reveal="in"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
    [data-js="reveal"] [data-reveal] { opacity: 1; transform: none; }
    .ui-orbit span, .ui-network line, .ui-float { animation: none !important; }
}

/* ----------------------------------------------------------- SCROLLBAR */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--soft); }
::-webkit-scrollbar-thumb { background: #C3CDD7; border-radius: 10px; border: 2px solid var(--soft); }
::-webkit-scrollbar-thumb:hover { background: #9FADBB; }

/* Paragraph spacing — also covers <p>/<ul> nested inside decoded HTML blocks,
   which Tailwind's reset otherwise collapses to margin: 0 */
.ui-flow p + p,
.ui-flow p + ul, .ui-flow p + ol,
.ui-flow ul + p, .ui-flow ol + p,
.ui-copy p + p { margin-top: 16px; }