/* =====================================================================
   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)
   Palette ..... navy #123047, blue #1267A5, sky #62B5DA, coral #D6533B, yellow #F4BE41
   ===================================================================== */

:root {
    /* Palette (website review, 2026-11-06): deep navy, blue, sky blue, coral, warm yellow. */
    --p-50:  #EDF4FA;
    --p-100: #DCEAF5;
    --p-200: #B9D3EA;
    --p-600: #1267A5;   /* Blue: buttons and links */
    --p-700: #0F5A91;
    --p-800: #0E4F80;

    --a-500: #F4BE41;   /* Warm yellow: dots, lines, details */
    --coral: #D6533B;   /* Coral: small accents and highlights */
    --sky:   #62B5DA;   /* Sky blue: supporting graphics */

    --head:  #123047;   /* Deep navy: headings */
    --ink:   #123047;
    --body:  #334155;   /* Slate: body text */
    --muted: #5B6B7D;
    --line:  #E1E7ED;

    --tint:   #E5EEF5;  /* Pale blue: highlighted sections */
    --soft:   #F3F6F8;  /* Cool off-white: alternate backgrounds */
    --char:   #123047;  /* dark panels */
    --char-9: #123047;  /* 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(244, 190, 65, .85); }

/* ------------------------------------------------- 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; }
/* Hero background video: plays for everyone; visitors can stop it with the pause button (WCAG 2.2.2). */

/* The hidden attribute must win over display utilities such as .grid (used by JS-toggled form sections). */
[hidden] { display: none !important; }

/* ================================================================ HOME (2026 redesign)
   Classes used by the home-page blocks in includes/sections.php (hm_* renderers). */

/* Decorations: only the orbit rings turn (switched off for reduced motion below) */
.hm-spin      { animation: ui-spin 120s linear infinite; }
.hm-spin-rev  { animation: ui-spin 160s linear infinite reverse; }
.hm-spin-slow { animation: ui-spin 140s linear infinite; }
/* A dot riding on a ring: the arm fills the ring and is rotated to the start angle; the ring's spin carries it round. */
.hm-ring__dot-arm { position: absolute; inset: 0; }
.hm-ring__dot { position: absolute; left: 50%; border-radius: 50%; }
.hm-deco      { position: absolute; pointer-events: none; }
.hm-ring      { position: absolute; pointer-events: none; border-radius: 50%; }

/* Hero: full-width video with a navy gradient panel on the left */
.hm-hero { position: relative; overflow: hidden; background: var(--head); display: flex; min-height: 560px; }
@media (min-width: 1024px) { .hm-hero { min-height: 720px; } }
.hm-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-hero__panel {
    position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(110deg, rgba(7, 20, 32, .92) 0%, rgba(13, 36, 54, .84) 45%, rgba(18, 48, 71, .74) 100%);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
@media (min-width: 768px) {
    .hm-hero__panel { width: max(54%, min(100%, 660px)); clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
}
.hm-hero__inner { position: relative; width: 100%; padding-block: 112px 150px; }
@media (min-width: 1024px) { .hm-hero__inner { padding-block: 150px 180px; } }
.hm-hero__title { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.hm-hero__title > span { display: block; }
.hm-hero__accent { font-weight: 400; color: #5AB4E5; }
.hm-hero__underline { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 6px; text-underline-offset: 10px; text-decoration-skip-ink: none; }
.hm-hero__lead { font-size: 19px; line-height: 1.6; color: var(--tint); max-width: 540px; }

/* "Who we work with" cards overlapping the bottom of the hero */
.hm-aud { position: relative; z-index: 2; margin-top: -46px; }
.hm-aud__card { display: flex; align-items: stretch; min-height: 76px; border-radius: 12px; overflow: hidden; border: 1px solid; box-shadow: 0 10px 28px rgba(18, 48, 71, .10); }
.hm-aud__sq { position: relative; width: 76px; flex-shrink: 0; overflow: hidden; }
.hm-aud__sq svg { position: absolute; right: -18px; bottom: -16px; opacity: .32; }
.hm-aud__label { padding: 10px 18px; display: flex; align-items: center; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--head); }
.hm-aud__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 12px 22px; border-radius: 12px; background: #fff; border: 1px solid #C8D9E6; box-shadow: 0 10px 28px rgba(18, 48, 71, .10); font-size: 17px; font-weight: 700; color: var(--p-600); }
.hm-aud__link:hover { color: var(--head); }
.hm-aud__arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--p-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hm-tone--coral  { --tone: var(--coral); --tone-50: #FBE7E3; --tone-line: #F2C6BD; }
.hm-tone--blue   { --tone: var(--p-600); --tone-50: #DCEAF5; --tone-line: #B9D3EA; }
.hm-tone--yellow { --tone: var(--a-500); --tone-50: #FDF3D9; --tone-line: #F3DC9E; }
.hm-aud__card { background: var(--tone-50); border-color: var(--tone-line); }
a.hm-aud__card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
a.hm-aud__card:hover, a.hm-aud__card:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(18, 48, 71, .18); border-color: var(--tone); }
a.hm-aud__card .hm-aud__sq svg { transition: transform .5s ease, opacity .3s ease; }
a.hm-aud__card:hover .hm-aud__sq svg { transform: scale(1.15) rotate(-8deg); opacity: .5; }
.hm-aud__link { transition: transform .25s ease, box-shadow .25s ease; }
.hm-aud__link:hover, .hm-aud__link:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(18, 48, 71, .18); }
.hm-aud__link .hm-aud__arrow { transition: transform .25s ease; }
.hm-aud__link:hover .hm-aud__arrow { transform: translateX(4px); }
.hm-aud__sq { background: var(--tone); }

/* Shared section title for home blocks */
.hm-title { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--head); }

/* Light-blue pill link with a round arrow */
.hm-pill { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 6px 6px 22px; border-radius: 999px; background: var(--tint); font-size: 16px; font-weight: 700; color: var(--p-600); transition: background .2s ease, color .2s ease; }
.hm-pill__arrow { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s ease, transform .2s ease; }
.hm-pill__arrow svg { stroke: var(--p-600); transition: stroke .2s ease; }
.hm-pill:hover { background: var(--p-100); color: var(--head); }
.hm-pill > span:first-child { white-space: nowrap; }
.hm-wcard .hm-pill { font-size: 15px; padding-left: 16px; gap: 10px; }
.hm-pill:hover .hm-pill__arrow { background: var(--p-600); transform: translateX(3px); }
.hm-pill:hover .hm-pill__arrow svg { stroke: #fff; }

/* Cards that lift on hover */
.hm-card { background: #fff; border: 1px solid var(--tint); border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hm-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(18, 48, 71, .12); border-color: var(--tone, var(--sky)); }
.hm-icon { width: 52px; height: 52px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; }
.hm-icon--tone { background: var(--tone-50); color: var(--tone); }
.hm-icon--plain { background: #fff; border: 1px solid var(--tint); color: var(--p-600); }

/* Experience section: navy angle on the right */
.hm-angle { position: absolute; top: 0; bottom: 0; right: 0; width: max(24%, 240px); background: var(--head); clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%); }

/* Ways to work with us: gradient band and glassy cards */
.hm-band { position: relative; overflow: hidden; background: linear-gradient(120deg, #123047 0%, #15497A 45%, #1267A5 100%); }
.hm-band__texture { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 2px); background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(115deg, transparent 15%, #000 60%, transparent 95%); mask-image: linear-gradient(115deg, transparent 15%, #000 60%, transparent 95%); }
.hm-wcard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.hm-wcard:hover { transform: translateY(-8px); background-color: rgba(255,255,255,.16); border-color: var(--a-500); box-shadow: 0 22px 44px rgba(18, 48, 71, .35); }

@media (prefers-reduced-motion: reduce) {
    .hm-spin, .hm-spin-rev, .hm-spin-slow { animation: none !important; }
    .hm-card:hover, .hm-wcard:hover, a.hm-aud__card:hover, .hm-aud__link:hover { transform: none; }
}

/* Hero video pause/play button (state lives in data-paused, not classes) */
.hm-hero__toggle { position: absolute; right: 20px; bottom: 64px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(18,48,71,.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease; }
.hm-hero__toggle:hover, .hm-hero__toggle:focus-visible { background: rgba(18,48,71,.85); }
.hm-hero__toggle:focus-visible { outline: 2px solid var(--a-500); outline-offset: 2px; }
.hm-hero__toggle .hm-i-play { display: none; }
.hm-hero__toggle[data-paused="true"] .hm-i-play { display: block; }
.hm-hero__toggle[data-paused="true"] .hm-i-pause { display: none; }
@media (min-width: 1024px) { .hm-hero__toggle { right: 32px; bottom: 76px; } }

/* Hero headline: each line floats up slowly, one after the other; then the coral underline draws in. */
@keyframes hm-line-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes hm-underline-in { from { text-decoration-color: transparent; } to { text-decoration-color: var(--coral); } }
@media (prefers-reduced-motion: no-preference) {
    .hm-hero__title > span { opacity: 0; animation: hm-line-in 1.6s cubic-bezier(.22, .61, .36, 1) forwards; }
    .hm-hero__title > span:nth-child(1) { animation-delay: .3s; }
    .hm-hero__title > span:nth-child(2) { animation-delay: 1.3s; }
    .hm-hero__title > span:nth-child(3) { animation-delay: 2.3s; }
    .hm-hero__underline { text-decoration-color: transparent; animation: hm-underline-in .8s ease 3.6s forwards; }
    .hm-hero__lead { opacity: 0; animation: hm-line-in 1.6s cubic-bezier(.22, .61, .36, 1) 3.3s forwards; }
}

/* Inner page heroes: the title rises in gently, its blue part fades in just after, then the intro text.
   (The blue part only fades: it is an inline span and moving it would change how the title wraps.) */
@keyframes hm-title-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .hm-page-title { opacity: 0; animation: hm-title-in 1s cubic-bezier(.22, .61, .36, 1) .15s forwards; }
    .hm-page-title span { opacity: 0; animation: hm-fade-in 1s ease .65s forwards; }
    .hm-page-title ~ p { opacity: 0; animation: hm-title-in 1s cubic-bezier(.22, .61, .36, 1) .9s forwards; }
}

/* What Sets Us Apart collage: when it scrolls into view the photos glide in from opposite sides,
   then the colour blocks and dot grids fade in. Driven by the existing data-reveal attribute. */
[data-js="reveal"] .hm-collage[data-reveal] { opacity: 1; transform: none; }
[data-js="reveal"] .hm-collage .hm-c-large { opacity: 0; transform: translateX(-48px); transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.22, .61, .36, 1); }
[data-js="reveal"] .hm-collage .hm-c-small { opacity: 0; transform: translate(48px, 24px); transition: opacity 1.2s ease .5s, transform 1.4s cubic-bezier(.22, .61, .36, 1) .5s; }
[data-js="reveal"] .hm-collage .hm-c-deco  { opacity: 0; transition: opacity 1.2s ease 1.1s; }
[data-js="reveal"] .hm-collage .hm-c-deco--2 { transition-delay: 1.4s; }
[data-js="reveal"] .hm-collage .hm-c-deco--3 { transition-delay: 1.7s; }
[data-js="reveal"] .hm-collage[data-reveal="in"] .hm-c-large,
[data-js="reveal"] .hm-collage[data-reveal="in"] .hm-c-small { opacity: 1; transform: none; }
[data-js="reveal"] .hm-collage[data-reveal="in"] .hm-c-deco { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    [data-js="reveal"] .hm-collage .hm-c-large, [data-js="reveal"] .hm-collage .hm-c-small, [data-js="reveal"] .hm-collage .hm-c-deco { opacity: 1; transform: none; transition: none; }
}

/* ================================================================ INNER PAGES (2026 redesign)
   Capability pages first: page_hero, capability_detail, cta_panel. */
.hm-hero--page { min-height: 440px; }
@media (min-width: 1024px) { .hm-hero--page { min-height: 480px; } }
.hm-hero--page .hm-hero__panel { background: linear-gradient(110deg, rgba(7, 20, 32, .94) 0%, rgba(13, 36, 54, .88) 45%, rgba(18, 48, 71, .76) 100%); }
@media (min-width: 768px) { .hm-hero--page .hm-hero__panel { width: max(58%, min(100%, 700px)); } }
.hm-hero--page .hm-hero__inner { padding-block: 72px 120px; }
@media (min-width: 1024px) { .hm-hero--page .hm-hero__inner { padding-block: 96px 136px; } }
.hm-page-title { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
@media (min-width: 1024px) { .hm-page-title { margin-right: -64px; } } /* the title may run a little past the 600px text column; the panel is widest at the top */
.hm-page-title span { font-weight: 400; color: #5AB4E5; }

/* Tagline card overlapping the hero (colour per capability: hm-tone--coral/blue/yellow) */
.hm-tagline { position: relative; z-index: 2; margin-top: -50px; display: flex; align-items: stretch; min-height: 100px; border-radius: 12px; overflow: hidden; background: var(--tone-50); border: 1px solid var(--tone-line); box-shadow: 0 10px 28px rgba(18, 48, 71, .10); }
@media (min-width: 1024px) { .hm-tagline { margin-top: -50px; } }
.hm-tagline__sq { position: relative; width: 100px; flex-shrink: 0; overflow: hidden; background: var(--tone); }
.hm-tagline__sq i { position: absolute; right: -14px; bottom: -12px; font-size: 76px; color: #fff; opacity: .32; }
.hm-tagline__text { padding: 18px 26px; display: flex; align-items: center; font-size: 19px; line-height: 1.4; font-weight: 700; color: var(--head); }
@media (min-width: 1100px) { .hm-tagline__text { white-space: nowrap; } }
@media (max-width: 639px) { .hm-tagline__sq { width: 64px; } .hm-tagline__sq i { font-size: 52px; } .hm-tagline__text { font-size: 17px; padding: 14px 18px; } }

/* Sidebar capability list */
.hm-snav { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 10px; font-size: 15px; line-height: 1.35; color: var(--head); transition: background .2s ease, color .2s ease; }
.hm-snav i { width: 22px; text-align: center; color: var(--p-600); font-size: 16px; flex-shrink: 0; }
.hm-snav:hover { background: var(--tint); }
.hm-snav.is-current { background: #fff; box-shadow: 0 4px 14px rgba(18, 48, 71, .08); color: var(--p-600); font-weight: 700; }

/* Example Output card */
.hm-output { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 14px; background: linear-gradient(120deg, #123047 0%, #15497A 45%, #1267A5 100%); }
.hm-output__icon { width: 34px; height: 34px; border-radius: 50%; background: var(--a-500); color: var(--head); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Off-white band with colour blocks (Areas of Expertise, text sections) */
.hm-soft-band { position: relative; overflow: hidden; background: var(--soft); }
.hm-tag { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 16px; border-radius: 999px; background: #fff; border: 1.5px solid #8CBEE0; box-shadow: 0 2px 10px rgba(18, 48, 71, .07); font-size: 16px; font-weight: 700; color: var(--head); }
.hm-tag i { color: var(--p-600); font-size: 13px; }

/* Closing call-to-action panel */
.hm-cta { position: relative; overflow: hidden; border-radius: 22px; background: linear-gradient(120deg, #123047 0%, #15497A 45%, #1267A5 100%); box-shadow: 0 24px 60px rgba(18, 48, 71, .22); }
.hm-pill--white { background: #fff; }
.hm-pill--white:hover { background: var(--p-100); }
.hm-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--tone); color: var(--tone); background: #fff; font-weight: 800; font-size: 17px; }
.hm-tone--yellow .hm-num { color: #B88600; }
.hm-tag--sm { padding: 8px 15px 8px 12px; gap: 8px; font-size: 14.5px; font-weight: 600; box-shadow: none; }

/* Forms (2026 redesign): larger fields, clear focus, chip-style choices, pill submit */
.hm-form-card { position: relative; background: #fff; border: 1px solid var(--tint); border-radius: 18px; padding: 28px 22px; box-shadow: 0 18px 44px rgba(18, 48, 71, .10); }
@media (min-width: 640px) { .hm-form-card { padding: 40px; } }
.hm-form-card .ui-label, .hm-form-card legend.ui-label { margin-bottom: 8px; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--head); }
.req { color: var(--coral); }
.hm-form-card .ui-input { height: 50px; border: 1.5px solid #C8D9E6; border-radius: 10px; background: #FBFCFD; padding: 0 16px; font-size: 16px; color: var(--head); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.hm-form-card textarea.ui-input { height: auto; min-height: 140px; padding: 14px 16px; }
.hm-form-card .ui-input:hover { border-color: #8CBEE0; }
.hm-form-card .ui-input:focus { background: #fff; border-color: var(--p-600); box-shadow: 0 0 0 4px rgba(18, 103, 165, .15); }
.hm-form-card .ui-input[aria-invalid="true"] { border-color: #C93636; background: #FFF8F8; }
.hm-form-card .ui-checkbox { width: 20px; height: 20px; margin-top: 2px; }
.hm-form-card form > label, .hm-form-card form > div > label.flex { font-size: 15px; }
/* Selectable chips for checkbox lists */
.hm-choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid #DCE7F0; border-radius: 10px; background: #fff; font-size: 15px; line-height: 1.4; color: var(--head); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.hm-choice:hover { border-color: #8CBEE0; }
.hm-choice:has(input:checked) { border-color: var(--p-600); background: var(--p-50); }
.hm-choice:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(18, 103, 165, .15); }
.hm-choice .ui-checkbox { width: 18px; height: 18px; margin-top: 1px; }
/* File upload as a drop-zone style box */
.hm-file { display: block; width: 100%; padding: 12px; border: 1.5px dashed #8CBEE0; border-radius: 10px; background: #FBFCFD; font-size: 14px; color: var(--body); cursor: pointer; }
.hm-file:hover { border-color: var(--p-600); background: var(--p-50); }
.hm-file::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--tint); color: var(--p-600); font-weight: 700; cursor: pointer; }
.hm-file[aria-invalid="true"] { border-color: #C93636; }
/* Submit button */
.hm-submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 6px 8px 6px 26px; border: 0; border-radius: 999px; background: var(--p-600); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .2s ease; }
.hm-submit .hm-pill__arrow svg { stroke: var(--p-600); }
.hm-submit:hover { background: var(--head); }
.hm-submit:hover .hm-pill__arrow { transform: translateX(3px); }
.hm-submit:focus-visible { outline: 3px solid var(--a-500); outline-offset: 3px; }
@media (max-width: 639px) { .hm-submit { width: 100%; } }
.hm-card .hm-pill { font-size: 15px; padding-left: 16px; gap: 10px; max-width: 100%; }
.hm-card .hm-pill > span:first-child { white-space: normal; line-height: 1.3; }

/* card_grid 'overlap' => true: the cards rise over the page hero above (Contact). */
.hm-overlap { background: transparent !important; z-index: 2; }
.hm-overlap > .ui-container { padding-top: 0 !important; margin-top: -96px; }
.hm-overlap .hm-card { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(18, 48, 71, .14); border-color: rgba(255, 255, 255, .6); }
.hm-overlap .hm-card:hover { box-shadow: 0 20px 40px rgba(18, 48, 71, .2); border-color: var(--tone); }
@media (max-width: 639px) { .hm-overlap > .ui-container { margin-top: -64px; } }

/* Multi-select dropdown (careers: areas of expertise). <details> + checkboxes; panel overlays the content below. */
.hm-multi { position: relative; }
.hm-multi__btn { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; user-select: none; }
.hm-multi__btn::-webkit-details-marker { display: none; }
.hm-multi__btn:focus-visible { outline: none; background: #fff; border-color: var(--p-600); box-shadow: 0 0 0 4px rgba(18, 103, 165, .15); }
.hm-multi[open] .hm-multi__btn { background: #fff; border-color: var(--p-600); }
.hm-multi__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-multi__count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--p-600); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.hm-multi__count[hidden] { display: none; }
.hm-multi__chev { font-size: 13px; color: var(--p-600); transition: transform .2s ease; }
.hm-multi[open] .hm-multi__chev { transform: rotate(180deg); }
.hm-multi__panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); padding: 6px; background: #fff; border: 1.5px solid #C8D9E6; border-radius: 12px; box-shadow: 0 18px 40px rgba(18, 48, 71, .16); }
.hm-multi__opt { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 8px; font-size: 16px; line-height: 1.4; color: var(--head); cursor: pointer; }
.hm-multi__opt:hover { background: var(--surface, #F3F6F8); }
.hm-multi__opt:has(input:checked) { background: var(--p-50); }
.hm-multi__opt .ui-checkbox { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
[aria-invalid="true"] .hm-multi__btn { border-color: var(--coral); }

/* team_model (Careers: How We Build Teams): opportunity tiles + concentric core/specialists diagram. */
.hm-opp { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--tint); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--head); }
.hm-opp__icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--tone-50); color: var(--tone); font-size: 16px; }
.hm-model { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; }
.hm-model__ring { position: absolute; border-radius: 50%; }
.hm-model__ring--outer { inset: 0; border: 1.5px dashed #9DC3DD; }
.hm-model__ring--mid { inset: 17%; border: 1.5px solid #C8D9E6; background: rgba(255, 255, 255, .6); }
.hm-model__dot { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; }
.hm-model__core { position: absolute; inset: 34%; border-radius: 50%; background: linear-gradient(135deg, var(--head), var(--p-600)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.2; box-shadow: 0 18px 40px rgba(18, 48, 71, .25); padding: 8px; }
.hm-model__core i { font-size: 26px; color: var(--sky); }
.hm-model__tag { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--tone); color: var(--head); font-size: 14.5px; font-weight: 700; box-shadow: 0 6px 18px rgba(18, 48, 71, .10); }
.hm-model__tag::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); margin-right: 8px; vertical-align: 1px; }
.hm-model__tag--mid { top: calc(17% - 18px); }
.hm-model__tag--outer { bottom: -18px; }
.hm-overlap--low > .ui-container { margin-top: -56px; }
@media (max-width: 639px) { .hm-overlap--low > .ui-container { margin-top: -40px; } }
@media (max-width: 767px) { .hm-overlap .hm-card, .hm-step { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* cta_panel: no band of its own. It takes the background of the section before it and sits in that
   section's bottom padding, so it reads as the close of the page rather than a separate block. */
.hm-cta-wrap { position: relative; background: #fff; }
.hm-soft-band + .hm-cta-wrap { background: var(--soft); }
.hm-band + .hm-cta-wrap > .ui-container, .hm-hero + .hm-cta-wrap > .ui-container { padding-top: 80px; }

/* process_steps (Approach): separate frosted cards; arrows down on phones, right within a row on tablet (2), a snake on desktop (3). */
.hm-steps { display: grid; grid-template-columns: 1fr; gap: 48px; }
.hm-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: 14px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 14px 34px rgba(18, 48, 71, .14); }
.hm-step__num { width: 46px; height: 46px; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; box-shadow: 0 6px 14px rgba(18, 48, 71, .18); }
.hm-step__arrow { position: absolute; z-index: 3; left: 50%; bottom: -42px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: #fff; border: 1.5px solid #C8D9E6; color: #8CBEE0; display: inline-flex; align-items: center; justify-content: center; transform: rotate(90deg); }
@media (min-width: 768px) {
    .hm-steps { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
    .hm-step__arrow { left: auto; right: -42px; bottom: auto; top: 50%; margin: -18px 0 0; transform: none; }
    .hm-step:nth-child(2n) .hm-step__arrow { display: none; }
}
/* Desktop: a snake. 1 > 2 > 3, down from 3 to 4, then 4 > 5 > 6 running right to left (DOM order stays 1-6). */
@media (min-width: 1024px) {
    .hm-steps { grid-template-columns: repeat(3, 1fr); }
    .hm-step:nth-child(2n) .hm-step__arrow { display: flex; }
    .hm-step:nth-child(4) { grid-column: 3; grid-row: 2; }
    .hm-step:nth-child(5) { grid-column: 2; grid-row: 2; }
    .hm-step:nth-child(6) { grid-column: 1; grid-row: 2; }
    .hm-step:nth-child(3) .hm-step__arrow { left: 50%; right: auto; top: auto; bottom: -42px; margin: 0 0 0 -18px; transform: rotate(90deg); }
    .hm-step:nth-child(4) .hm-step__arrow, .hm-step:nth-child(5) .hm-step__arrow { right: auto; left: -42px; transform: rotate(180deg); }
}

/* card_grid cards whose items all have icon/title/description/links (Sectors): subgrid rows so
   titles, descriptions and the "Related Services" footers line up across a row. */
.hm-sub { display: grid !important; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
.hm-sub > .mt-auto { margin-top: 0; }

/* Card CTA pills (card_grid, e.g. "Explore"): stretch to the full card width on hover, arrow riding to the right edge. */
.hm-pill--grow { min-width: 0; justify-content: space-between; transition: min-width .35s cubic-bezier(.22, .61, .36, 1), background .2s ease, color .2s ease; }
.hm-card:hover .hm-pill--grow, .hm-wcard:hover .hm-pill--grow, .hm-pill--grow:focus-visible { min-width: 100%; }
.hm-card:hover .hm-pill--grow { background: var(--p-100); color: var(--head); }
.hm-card:hover .hm-pill--grow .hm-pill__arrow { background: var(--p-600); }
.hm-card:hover .hm-pill--grow .hm-pill__arrow svg { stroke: #fff; }
@media (prefers-reduced-motion: reduce) { .hm-pill--grow { transition: none; } }

/* Home: the three sector cards over the hero get a thick frosted-white frame. */
.hm-aud__card { border: 6px solid rgba(255, 255, 255, .55); background-clip: padding-box; }
a.hm-aud__card:hover, a.hm-aud__card:focus-visible { border-color: rgba(255, 255, 255, .85); }
.hm-aud__card .hm-aud__label { padding: 8px 14px; }
.hm-aud__card .hm-aud__sq { width: 64px; }

/* Capability pages: the tagline block over the hero gets the same frosted-white frame as the Home sector cards. */
.hm-tagline { border: 6px solid rgba(255, 255, 255, .55); background-clip: padding-box; }

/* Final polish: balanced headings (no one-word last lines), bigger footer tap targets on phones. */
h2, h3 { text-wrap: balance; }
.hm-page-title { text-wrap: wrap; }
@media (max-width: 767px) { .ui-footer-link { display: inline-block; padding-block: 6px; } }
/* Ring dots orbit behind the glass cards on the blue bands: blur them so they never sit sharp on the text. */
.hm-wcard { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 479px) { .hm-hero__title { font-size: 31px; } }