:root {
    --red: #c40018;
    --red-dark: #940414;
    --black: #080d18;
    --text: #111827;
    --muted: #5f687a;
    --border: #e7e9ee;
    --soft: #f8f9fb;
    --white: #ffffff;
    --footer: #07111f;
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

/* =====================================================
   FOOTER BRAND + SOCIAL ALIGNMENT
===================================================== */

footer.site-footer .footer-brand-link {
    width: fit-content !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

footer.site-footer .footer-logo-icon {
    width: 92px !important;
    height: 100px !important;
    max-width: 92px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex: 0 0 92px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}

footer.site-footer .footer-socials {
    margin: auto 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

footer.site-footer .footer-social-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    border-radius: 8px !important;
    line-height: 0 !important;
}

footer.site-footer .footer-social-btn svg {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    display: block !important;
    flex: 0 0 15px !important;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    color: var(--text);
    background: var(--white);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

.top-container {
    width: calc(100% - 64px);
    margin: 0 auto;
}

.container {
    width: min(1220px, calc(100% - 64px));
    margin: 0 auto;
}

/* =====================================================
   HEADER — minimal, clean, easy to navigate
===================================================== */

.site-header {
    height: 70px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-wrap {
    width: min(1280px, calc(100% - 48px));
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.brand img {
    height: 48px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ---- Desktop nav ---- */
.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Nav item wrapper */
.nav-item {
    position: relative;
}

/* Top-level link */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    height: 70px;
    color: var(--black);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.nav-link:hover {
    color: var(--red);
}

/* SVG chevron */
.nav-chevron {
    width: 9px;
    height: 6px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.nav-item.has-dropdown:hover .nav-chevron,
.nav-item.has-dropdown:focus-within .nav-chevron {
    transform: rotate(180deg);
}

/* Dropdown panel */
.dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 256px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(8, 13, 24, 0.10);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 9999;
}

/* Bridge gap so hover doesn't break when moving into dropdown */
.dropdown::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown,
.nav-item.has-dropdown.is-dropdown-open .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.dropdown a {
    display: block;
    padding: 9px 12px;
    border-radius: 7px;
    color: var(--black);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.dropdown a:hover {
    background: #fff1f3;
    color: var(--red);
}

/* CTA button */
.nav-cta {
    margin-left: 16px;
    padding: 0 20px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    background: var(--red);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
}

.nav-cta:hover {
    background: var(--red-dark);
    transform: translateY(-1px);
}

/* ---- Hamburger (hidden on desktop) ---- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--black);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---- Mobile slide-in menu ---- */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 88vw);
    height: 100dvh;
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 40px rgba(8, 13, 24, 0.10);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
}

.mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mobile-menu-header .brand img {
    height: 38px;
}

.mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: var(--black);
    flex-shrink: 0;
}

.mobile-close svg {
    width: 14px;
    height: 14px;
}

.mobile-nav {
    flex: 1;
    padding: 12px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Accordion groups */
.mobile-group {
    border-radius: 8px;
    overflow: hidden;
}

.mobile-group summary {
    list-style: none;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 800;
    color: var(--black);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    transition: background 0.12s ease;
}

.mobile-group summary::-webkit-details-marker { display: none; }

.mobile-group summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.mobile-group[open] summary::after {
    transform: rotate(-135deg) translateY(-2px);
}

.mobile-group summary:hover {
    background: var(--soft);
}

.mobile-group[open] summary {
    background: #fff1f3;
    color: var(--red);
    border-radius: 8px 8px 0 0;
}

.mobile-group[open] summary::after {
    border-color: var(--red);
}

.mobile-group a {
    display: block;
    padding: 10px 14px 10px 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    background: #fafbfc;
    border-top: 1px solid var(--border);
    transition: color 0.12s ease, background 0.12s ease;
}

.mobile-group a:hover {
    color: var(--red);
    background: #fff1f3;
}

.mobile-group:last-of-type a:last-child {
    border-radius: 0 0 8px 8px;
}

/* Mobile CTA */
.mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    height: 46px;
    background: var(--red);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.15s ease;
}

.mobile-cta:hover {
    background: var(--red-dark);
}

/* Backdrop */
.mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 13, 24, 0.40);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
}

.mobile-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.hero-section {
    min-height: 620px;
    overflow: hidden;
    background: #fff;
}

.hero-grid {
    display: grid;
    grid-template-columns: 470px 1fr;
    min-height: 620px;
    position: relative;
}

.hero-content {
    padding: 70px 0 34px;
    position: relative;
    z-index: 5;
}

.hero-content::after {
    content: "";
    position: absolute;
    top: 0;
    right: -250px;
    width: 470px;
    height: 100%;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.96) 45%, rgba(255,255,255,0) 100%);
    z-index: -1;
}

.eyebrow {
    margin: 0 0 20px;
    color: var(--red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.center {
    text-align: center;
}

.hero-content h1 {
    margin: 0;
    max-width: 530px;
    font-size: 51px;
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.hero-content h1 span {
    color: var(--red);
}

.hero-text {
    max-width: 470px;
    margin: 22px 0 0;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;
}

.hero-actions {
    display: flex;
    gap: 18px;
    margin-top: 28px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 28px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 800;
}

.btn-primary {
    background: var(--red);
    color: #fff;
}

.btn-secondary {
    background: #fff;
    color: var(--black);
    border: 2px solid #d4d8df;
}

.hero-stats {
    display: flex;
    gap: 32px;
    margin-top: 34px;
}

.stat-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 10px;
    align-items: start;
    min-width: 116px;
}

.stat-icon {
    grid-row: span 2;
    color: var(--red);
    font-size: 27px;
    line-height: 1;
}

.stat-item strong {
    display: block;
    font-size: 27px;
    line-height: 1;
    font-weight: 800;
}

.stat-item small {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

.hero-visual {
    position: relative;
    min-height: 620px;
}

.hero-image {
    width: calc(100% + 90px);
    max-width: none;
    height: 620px;
    object-fit: cover;
    object-position: center;
}

.hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    width: calc(100% + 90px);
    background: linear-gradient(90deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.04) 30%, rgba(0,0,0,0.22) 100%);
    pointer-events: none;
}

.hero-float-card {
    position: absolute;
    right: 32px;
    width: 285px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    background: rgba(255,255,255,0.97);
    border-radius: 6px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.16);
    z-index: 6;
}

.card-one { top: 74px; }
.card-two { top: 220px; }
.card-three { top: 366px; }

.float-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff4f4;
    color: var(--red);
    border: 1px solid #ffd8d8;
    font-weight: 800;
    font-size: 20px;
}

.hero-float-card strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
}

.hero-float-card span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
}

.section {
    padding: 34px 0 24px;
    background: #fff;
}

.section-title {
    text-align: center;
    margin-bottom: 22px;
}

.section-title h2 {
    margin: 0;
    color: var(--black);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.build-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.build-card,
.problem-card {
    min-height: 210px;
    position: relative;
    padding: 28px 28px 38px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.035);
}

.service-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 8px;
    background: #fff1f2;
    color: var(--red);
    font-size: 30px;
    font-weight: 800;
}

.service-icon.small {
    width: 46px;
    height: 46px;
    font-size: 23px;
}

.build-card h3,
.problem-card h3,
.work-card h3 {
    margin: 0 0 10px;
    color: var(--black);
    font-size: 20px;
    line-height: 1.22;
    font-weight: 800;
}

.build-card p,
.problem-card p,
.work-card p {
    margin: 0;
    color: #151a25;
    font-size: 13px;
    line-height: 1.65;
    font-weight: 500;
}

.build-card a,
.problem-card a {
    position: absolute;
    right: 24px;
    bottom: 20px;
    color: var(--red);
    font-size: 24px;
    font-weight: 800;
}

.capabilities-section {
    padding: 0 0 24px;
    background: #fff;
}

.capabilities-box {
    padding: 20px 36px 26px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.capabilities-box .eyebrow {
    margin-bottom: 16px;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: 1fr 220px 1fr;
    align-items: center;
    gap: 34px;
}

.capability-list h3 {
    margin: 0 0 14px;
    font-size: 21px;
    font-weight: 800;
}

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

.capability-list li {
    position: relative;
    padding-left: 22px;
    margin: 9px 0;
    font-size: 14px;
    font-weight: 600;
}

.capability-list li::before {
    content: "⊙";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--red);
    font-size: 13px;
}

.brain-mark {
    width: 104px;
    height: 104px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff8f8;
    color: var(--red);
    font-size: 42px;
    position: relative;
}

.brain-mark::before,
.brain-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 54px;
    background: var(--border);
}

.brain-mark::before {
    bottom: 100%;
}

.brain-mark::after {
    top: 100%;
}

.problem-section {
    padding-top: 0;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.problem-card {
    min-height: 185px;
    padding: 22px 22px 38px;
}

.problem-card h3 {
    font-size: 17px;
}

.process-section {
    padding: 2px 0 34px;
    background: #fff;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    position: relative;
}

.process-grid::before {
    content: "";
    position: absolute;
    left: 50px;
    right: 50px;
    top: 44px;
    height: 1px;
    background: #d8dce4;
}

.process-step {
    position: relative;
    z-index: 2;
}

.process-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: #fff1f2;
    color: var(--red);
    font-size: 30px;
}

.process-step b {
    position: absolute;
    top: 0;
    left: calc(50% + 18px);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 12px;
}

.process-step h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
}

.process-step p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 500;
}

.why-section {
    padding: 20px 0 26px;
    background: #fff;
}

.why-box {
    display: grid;
    grid-template-columns: 0.95fr 1fr;
    min-height: 310px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.why-image img {
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover;
}

.why-content {
    padding: 42px 44px;
    background: #fff;
}

.why-content h2 {
    margin: 0 0 20px;
    max-width: 520px;
    font-size: 29px;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.why-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.why-content li {
    position: relative;
    margin: 13px 0;
    padding-left: 26px;
    font-size: 14px;
    font-weight: 600;
}

.why-content li::before {
    content: "⊙";
    position: absolute;
    left: 0;
    color: var(--red);
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.work-card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    min-height: 150px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

.work-card img {
    width: 150px;
    height: 112px;
    object-fit: cover;
    border-radius: 3px;
}

.work-card h3 {
    font-size: 18px;
}

.work-card a {
    display: inline-block;
    margin-top: 12px;
    color: var(--red);
    font-size: 13px;
    font-weight: 800;
}

.cta-section {
    padding: 8px 0 34px;
    background: #fff;
}

.cta-box {
    min-height: 154px;
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 34px;
    padding: 24px 46px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(135deg, #fff 0%, #fff7f7 100%);
}

.cta-icon {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff1f2;
    color: var(--red);
    font-size: 44px;
}

.cta-box h2 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.cta-box p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.site-footer {
    padding: 34px 0 0;
    background: var(--footer);
    color: #d7dfeb;
}

/* =====================================================
   FOOTER
===================================================== */

.site-footer {
    background: var(--footer);
    color: #b8c4d4;
    font-family: "Manrope", Arial, sans-serif;
}

.footer-inner {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: 52px 0 0;
}

/* ── Grid ── */
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1.4fr;
    gap: 40px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── Brand column ── */
.footer-brand-col {
    display: flex;
    flex-direction: column;
}

.footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 14px;
}

.footer-logo-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
}

.footer-tagline {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.6;
    color: #8a96a8;
    max-width: 220px;
}

/* ── Social buttons ── */
.footer-socials {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    color: #b8c4d4;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.footer-social-btn:hover {
    background: #0a66c2;
    border-color: #0a66c2;
    color: #ffffff;
    transform: translateY(-1px);
}

.footer-social-upwork:hover {
    background: #6fda44;
    border-color: #6fda44;
    color: #ffffff;
}

/* ── Nav columns ── */
.footer-nav-col h4 {
    margin: 0 0 16px;
    color: #070707;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-nav-col a {
    display: block;
    margin: 0 0 10px;
    color: #8a96a8;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.14s ease;
}

.footer-nav-col a:last-child {
    margin-bottom: 0;
}

.footer-nav-col a:hover {
    color: #ffffff;
}

/* ── Contact column ── */
.footer-contact-item {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px !important;
    color: #8a96a8 !important;
    font-size: 13px !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.14s ease;
}

.footer-contact-item svg {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.7;
}

.footer-contact-item:hover {
    color: #ffffff !important;
}

.footer-address {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: #6b7887;
}

/* ── Bottom bar ── */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 20px;
}

.footer-bottom p {
    margin: 0;
    font-size: 12px;
    color: #6b7887;
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    font-size: 12px;
    color: #6b7887;
    text-decoration: none;
    transition: color 0.14s ease;
}

.footer-bottom-links a:hover {
    color: #ffffff;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px;
    }
    .footer-brand-col {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 24px;
    }
    .footer-tagline { max-width: 320px; }
}

@media (max-width: 700px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
    .footer-brand-col { flex-direction: column; gap: 10px; }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
    .footer-bottom-links { justify-content: center; }
}

@media (max-width: 420px) {
    .footer-grid { grid-template-columns: 1fr; }
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom div {
    display: flex;
    gap: 26px;
}

.footer-bottom a {
    margin: 0;
}

@media (max-width: 1200px) {
    .site-nav {
        gap: 18px;
        font-size: 12px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-content::after {
        display: none;
    }

    .hero-image,
    .hero-visual::after {
        width: 100%;
    }

    .hero-float-card {
        right: 24px;
    }

    .build-grid,
    .problem-grid,
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .process-grid::before {
        display: none;
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .site-nav {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .hero-stats,
    .hero-actions {
        flex-direction: column;
    }

    .capabilities-grid,
    .why-box,
    .cta-box {
        grid-template-columns: 1fr;
    }

    .brain-mark::before,
    .brain-mark::after {
        display: none;
    }

    .build-grid,
    .problem-grid,
    .work-grid,
    .process-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .work-card {
        grid-template-columns: 1fr;
    }

    .work-card img {
        width: 100%;
        height: 180px;
    }
}

@media (max-width: 560px) {
    .top-container,
    .container {
        width: calc(100% - 28px);
    }

    .brand img {
        height: 38px;
    }

    .hero-content h1 {
        font-size: 39px;
    }

    .hero-image {
        height: 500px;
    }

    .hero-float-card {
        width: calc(100% - 28px);
        left: 14px;
        right: 14px;
    }

    .card-one { top: 34px; }
    .card-two { top: 166px; }
    .card-three { top: 298px; }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }
}

/* ===== Hero + lower section matching ===== */

/* Hero should behave like the reference: content on left, image stretched on right */
.hero-section {
    position: relative !important;
    min-height: 560px !important;
    height: 560px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.hero-grid {
    position: relative !important;
    display: block !important;
    width: calc(100% - 60px) !important;
    max-width: none !important;
    min-height: 560px !important;
    height: 560px !important;
}

.hero-content {
    position: relative !important;
    z-index: 10 !important;
    width: 500px !important;
    padding: 58px 0 0 !important;
}

.hero-content::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: -330px !important;
    width: 520px !important;
    height: 560px !important;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.96) 42%, rgba(255,255,255,0) 100%) !important;
    z-index: -1 !important;
    display: block !important;
}

.hero-content .eyebrow {
    margin-bottom: 18px !important;
    font-size: 11px !important;
    letter-spacing: 0.22em !important;
}

.hero-content h1 {
    max-width: 500px !important;
    font-size: 43px !important;
    line-height: 1.16 !important;
    letter-spacing: -0.035em !important;
}

.hero-text {
    max-width: 455px !important;
    margin-top: 18px !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
}

.hero-actions {
    margin-top: 24px !important;
    gap: 18px !important;
}

.btn {
    min-height: 48px !important;
    padding: 0 24px !important;
    font-size: 13px !important;
}

.hero-stats {
    margin-top: 30px !important;
    gap: 28px !important;
}

.stat-item {
    min-width: 112px !important;
}

.stat-icon {
    font-size: 24px !important;
}

.stat-item strong {
    font-size: 24px !important;
}

.stat-item small {
    font-size: 11px !important;
}

/* Image should start behind the fade and fill the right side */
.hero-visual {
    position: absolute !important;
    top: 0 !important;
    left: 350px !important;
    right: -30px !important;
    height: 560px !important;
    min-height: 560px !important;
    z-index: 1 !important;
}

.hero-image {
    width: 100% !important;
    height: 560px !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.hero-visual::after {
    width: 100% !important;
    height: 560px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.08) 34%, rgba(0,0,0,0.20) 100%) !important;
}

.hero-float-card {
    right: 60px !important;
    width: 250px !important;
    padding: 16px 18px !important;
    border-radius: 5px !important;
}

.card-one {
    top: 70px !important;
}

.card-two {
    top: 190px !important;
}

.card-three {
    top: 312px !important;
}

.float-icon {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    font-size: 18px !important;
}

.hero-float-card strong {
    font-size: 13px !important;
}

.hero-float-card span {
    font-size: 11px !important;
}

/* Lower sections should be compact like the reference */
.section {
    padding: 30px 0 18px !important;
}

.container {
    width: min(1240px, calc(100% - 90px)) !important;
}

.section-title {
    margin-bottom: 20px !important;
}

.section-title .eyebrow {
    margin-bottom: 10px !important;
    font-size: 11px !important;
}

.section-title h2 {
    font-size: 25px !important;
}

.build-grid {
    gap: 14px !important;
}

.build-card {
    min-height: 176px !important;
    padding: 24px 26px 34px !important;
}

.service-icon {
    width: 50px !important;
    height: 50px !important;
    font-size: 24px !important;
    margin-bottom: 14px !important;
}

.build-card h3 {
    font-size: 18px !important;
}

.build-card p {
    font-size: 12px !important;
    line-height: 1.55 !important;
}

.capabilities-section {
    padding: 0 0 20px !important;
}

.capabilities-box {
    padding: 18px 34px 22px !important;
}

.problem-card {
    min-height: 162px !important;
}

.process-section {
    padding-top: 0 !important;
}

@media (max-width: 1200px) {
    .hero-section,
    .hero-grid {
        height: auto !important;
        min-height: auto !important;
    }

    .hero-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .hero-content {
        width: 100% !important;
        padding: 50px 0 24px !important;
    }

    .hero-content::after {
        display: none !important;
    }

    .hero-visual {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        height: 500px !important;
        min-height: 500px !important;
    }

    .hero-image,
    .hero-visual::after {
        height: 500px !important;
    }
}

/* ===== Reduce left/right empty spacing and match reference width ===== */

.top-container,
.container {
    width: calc(100% - 72px) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Lower sections should use more screen width like reference */
.section,
.capabilities-section,
.process-section,
.why-section,
.cta-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* What we build cards wider */
.build-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.build-card {
    min-height: 170px !important;
    padding: 24px 34px 34px !important;
}

/* Capabilities box wider and less empty */
.capabilities-box {
    width: 100% !important;
    max-width: none !important;
    padding: 18px 80px 22px !important;
}

.capabilities-grid {
    grid-template-columns: 1fr 180px 1fr !important;
    gap: 55px !important;
}

/* Practical AI cards should cover full row width */
.problem-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.problem-card {
    min-height: 165px !important;
    padding: 22px 28px 38px !important;
}

/* Process should stretch like reference */
.process-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 26px !important;
}

/* Why section and work cards full width */
.why-box,
.cta-box {
    width: 100% !important;
    max-width: none !important;
}

.work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

/* Reduce top gap after hero */
.section:first-of-type {
    padding-top: 26px !important;
}

/* Section titles compact like reference */
.section-title {
    margin-bottom: 18px !important;
}

.section-title h2 {
    font-size: 26px !important;
}

/* Header width also like reference */
.nav-wrap {
    width: calc(100% - 72px) !important;
    max-width: 1500px !important;
}

/* Responsive safety */
@media (max-width: 1200px) {
    .top-container,
    .container,
    .nav-wrap {
        width: calc(100% - 44px) !important;
    }

    .build-grid,
    .problem-grid,
    .work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .capabilities-box {
        padding: 22px 34px !important;
    }

    .capabilities-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .top-container,
    .container,
    .nav-wrap {
        width: calc(100% - 28px) !important;
    }

    .build-grid,
    .problem-grid,
    .work-grid,
    .process-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== FIX: stable reference width + selected capabilities + hero image ===== */

/* Overall page width should not become full-bleed for lower sections */
.container {
    width: min(1220px, calc(100% - 72px)) !important;
    max-width: 1220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Header/hero can stay wider, but not uncontrolled */
.top-container,
.nav-wrap {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fix hero image growing too much on zoom in/out */
.hero-section {
    height: 560px !important;
    min-height: 560px !important;
    overflow: hidden !important;
}

.hero-grid {
    height: 560px !important;
    min-height: 560px !important;
    display: block !important;
    position: relative !important;
}

.hero-content {
    width: 500px !important;
    max-width: 500px !important;
    padding-top: 58px !important;
}

.hero-visual {
    position: absolute !important;
    top: 0 !important;
    left: 350px !important;
    right: 0 !important;
    width: auto !important;
    height: 560px !important;
    min-height: 560px !important;
    overflow: hidden !important;
}

.hero-image {
    width: 100% !important;
    max-width: 100% !important;
    height: 560px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Cards should stay inside image, not run out */
.hero-float-card {
    right: 42px !important;
    width: 270px !important;
}

/* What We Build and Selected Capabilities must share same width */
.build-grid,
.problem-grid,
.work-grid,
.capabilities-box,
.why-box,
.cta-box {
    width: 100% !important;
    max-width: 100% !important;
}

/* Fix Selected Capabilities oversized section */
.capabilities-section {
    padding: 0 0 24px !important;
}

.capabilities-box {
    padding: 20px 52px 24px !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

.capabilities-grid {
    grid-template-columns: 1fr 180px 1fr !important;
    gap: 34px !important;
    align-items: center !important;
}

.capability-list {
    max-width: 360px !important;
}

.capability-list:first-child {
    justify-self: start !important;
}

.capability-list:last-child {
    justify-self: end !important;
}

.brain-mark {
    width: 92px !important;
    height: 92px !important;
    font-size: 36px !important;
}

/* Fix lower cards size after stretch */
.build-card {
    min-height: 185px !important;
    padding: 24px 28px 34px !important;
}

.problem-card {
    min-height: 170px !important;
    padding: 22px 24px 38px !important;
}

/* Prevent page from creating horizontal scrollbar */
body {
    overflow-x: hidden !important;
}

@media (max-width: 1200px) {
    .container,
    .top-container,
    .nav-wrap {
        width: calc(100% - 44px) !important;
        max-width: none !important;
    }

    .hero-section,
    .hero-grid {
        height: auto !important;
        min-height: auto !important;
    }

    .hero-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-visual {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        height: 500px !important;
        min-height: 500px !important;
    }

    .hero-image {
        height: 500px !important;
    }

    .capabilities-grid {
        grid-template-columns: 1fr !important;
    }

    .capability-list {
        max-width: 100% !important;
        justify-self: stretch !important;
    }
}

/* ===== HARD FIX: capabilities width and hero overflow ===== */

/* This element has BOTH classes: container capabilities-box */
.container.capabilities-box {
    width: min(1220px, calc(100% - 72px)) !important;
    max-width: 1220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px 52px 24px !important;
}

/* Keep all normal containers same width */
main > section > .container:not(.capabilities-box),
main > section > .top-container {
    width: min(1220px, calc(100% - 72px)) !important;
    max-width: 1220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hero can be slightly wider like reference */
.hero-section > .top-container.hero-grid {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
}

/* Stop hero image becoming oversized on zoom */
.hero-section,
.hero-grid {
    height: 560px !important;
    min-height: 560px !important;
    max-height: 560px !important;
    overflow: hidden !important;
}

.hero-visual {
    height: 560px !important;
    min-height: 560px !important;
    max-height: 560px !important;
    overflow: hidden !important;
}

.hero-image {
    height: 560px !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Match the upper 3 cards width */
.build-grid,
.problem-grid,
.work-grid {
    width: 100% !important;
}

/* Make capabilities inner content not spread too far */
.capabilities-grid {
    display: grid !important;
    grid-template-columns: 1fr 160px 1fr !important;
    gap: 34px !important;
    align-items: center !important;
}

.capability-list {
    max-width: 360px !important;
}

.capability-list:first-child {
    justify-self: start !important;
}

.capability-list:last-child {
    justify-self: end !important;
}

/* Remove excessive vertical height */
.capabilities-section {
    padding: 0 0 22px !important;
}

.capabilities-box {
    min-height: auto !important;
}

.brain-mark {
    width: 86px !important;
    height: 86px !important;
    font-size: 34px !important;
}

/* Remove horizontal scrollbar */
html,
body {
    overflow-x: hidden !important;
}

@media (max-width: 1200px) {
    .container.capabilities-box,
    main > section > .container:not(.capabilities-box),
    main > section > .top-container,
    .hero-section > .top-container.hero-grid {
        width: calc(100% - 44px) !important;
        max-width: none !important;
    }

    .hero-section,
    .hero-grid,
    .hero-visual,
    .hero-image {
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
    }

    .hero-image {
        height: 500px !important;
    }

    .capabilities-grid {
        grid-template-columns: 1fr !important;
    }

    .capability-list {
        max-width: 100% !important;
        justify-self: stretch !important;
    }
}

/* Why section spacing fix */
.why-section {
    padding: 40px 0 26px !important;
    background: #fff !important;
}
.process-section{
padding-top: 40px !important;
}

/* ===== Logo size/crop fix ===== */
.brand {
    width: 145px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.brand img {
    width: 145px !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: scale(1.35) !important;
    transform-origin: left center !important;
}

.site-header {
    height: 92px !important;
}

.nav-wrap {
    height: 92px !important;
    align-items: center !important;
}

@media (max-width: 640px) {
    .brand {
        width: 120px !important;
        height: 60px !important;
    }

    .brand img {
        width: 120px !important;
        transform: scale(1.32) !important;
    }
}

/* ===== Final minimal logo fix ===== */
.brand {
    width: 112px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
}

.brand img {
    width: 112px !important;
    height: auto !important;
    max-width: 112px !important;
    object-fit: contain !important;
    transform: none !important;
}

.site-header {
    height: 88px !important;
}

.nav-wrap {
    height: 88px !important;
    align-items: center !important;
}

@media (max-width: 640px) {
    .brand {
        width: 96px !important;
        height: 56px !important;
    }

    .brand img {
        width: 96px !important;
        max-width: 96px !important;
        transform: none !important;
    }
}

/* ===== Fix blurry hero image ===== */
.hero-image {
    filter: none !important;
    opacity: 1 !important;
    image-rendering: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Reduce dark/blur overlay on hero image */
.hero-visual::after {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.72) 0%,
        rgba(255,255,255,0.18) 28%,
        rgba(0,0,0,0.04) 100%
    ) !important;
}

/* Keep image clean and stable */
.hero-visual {
    background: none !important;
}


/* ===== Hero image clarity + lighter left/right sides ===== */
.hero-image {
    filter: brightness(1.08) contrast(1.06) saturate(1.04) !important;
    opacity: 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    image-rendering: auto !important;
}

/* Reduce extra white fog coming from left side */
.hero-content::after {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0.88) 34%,
        rgba(255,255,255,0.35) 62%,
        rgba(255,255,255,0) 100%
    ) !important;
}

/* Remove dark heavy tint and make image lighter on both sides */
.hero-visual::after {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.38) 0%,
        rgba(255,255,255,0.10) 22%,
        rgba(255,255,255,0.02) 48%,
        rgba(255,255,255,0.08) 78%,
        rgba(255,255,255,0.16) 100%
    ) !important;
}

/* Keep the image block clean */
.hero-visual {
    background: transparent !important;
}



/* =========================================================
   RESPONSIVE FIXES — ALL SCREEN FRIENDLY
   Desktop / Laptop / Tablet / Mobile
========================================================= */

/* Prevent unwanted horizontal scroll */
html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* Large laptop screens */
@media (max-width: 1400px) {
    .top-container,
    .nav-wrap,
    .hero-grid {
        width: calc(100% - 52px) !important;
        max-width: none !important;
    }

    .container,
    .container.capabilities-box {
        width: calc(100% - 80px) !important;
        max-width: none !important;
    }

    .site-nav {
        gap: 22px !important;
        font-size: 12px !important;
    }

    .hero-content h1 {
        font-size: 44px !important;
    }

    .hero-content {
        width: 470px !important;
        max-width: 470px !important;
    }

    .hero-visual {
        left: 335px !important;
    }
}

/* Small laptop / large tablet */
@media (max-width: 1200px) {
    .site-header {
        height: 82px !important;
    }

    .nav-wrap {
        height: 82px !important;
    }

    .brand {
        width: 110px !important;
    }

    .brand img {
        width: 110px !important;
        max-width: 110px !important;
        height: auto !important;
    }

    .site-nav {
        display: none !important;
    }

    .nav-toggle {
        display: block !important;
        cursor: pointer;
    }

    .hero-section,
    .hero-grid {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    .hero-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: calc(100% - 44px) !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 720px !important;
        padding: 52px 0 10px !important;
    }

    .hero-content::after {
        display: none !important;
    }

    .hero-content h1 {
        font-size: 46px !important;
        max-width: 720px !important;
    }

    .hero-text {
        max-width: 680px !important;
    }

    .hero-visual {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        height: 520px !important;
        min-height: 520px !important;
        max-height: 520px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }

    .hero-image {
        width: 100% !important;
        height: 520px !important;
        min-height: 520px !important;
        max-height: 520px !important;
        object-fit: cover !important;
    }

    .hero-visual::after {
        height: 520px !important;
        background: linear-gradient(
            90deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0.03) 45%,
            rgba(0,0,0,0.08) 100%
        ) !important;
    }

    .hero-float-card {
        right: 24px !important;
        width: 270px !important;
    }

    .build-grid,
    .problem-grid,
    .work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .capabilities-grid {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
        text-align: left !important;
    }

    .capability-list,
    .capability-list:first-child,
    .capability-list:last-child {
        max-width: 100% !important;
        justify-self: stretch !important;
    }

    .brain-mark {
        order: -1;
        margin: 0 auto !important;
    }

    .process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 26px !important;
    }

    .process-grid::before {
        display: none !important;
    }

    .why-box {
        grid-template-columns: 1fr !important;
    }

    .why-image img {
        height: 380px !important;
        min-height: 380px !important;
    }

    .cta-box {
        grid-template-columns: 90px 1fr !important;
    }

    .cta-box .btn {
        grid-column: 1 / -1;
        width: fit-content;
        justify-self: start;
    }

    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .top-container,
    .nav-wrap,
    .hero-grid,
    .container,
    .container.capabilities-box {
        width: calc(100% - 36px) !important;
    }

    .hero-content h1 {
        font-size: 40px !important;
        line-height: 1.18 !important;
    }

    .hero-text {
        font-size: 14px !important;
    }

    .hero-actions {
        flex-wrap: wrap !important;
    }

    .hero-stats {
        flex-wrap: wrap !important;
        gap: 22px !important;
    }

    .hero-visual,
    .hero-image,
    .hero-visual::after {
        height: 460px !important;
        min-height: 460px !important;
        max-height: 460px !important;
    }

    .hero-float-card {
        width: 250px !important;
        padding: 14px 16px !important;
    }

    .card-one {
        top: 40px !important;
    }

    .card-two {
        top: 165px !important;
    }

    .card-three {
        top: 290px !important;
    }

    .build-grid,
    .problem-grid,
    .work-grid,
    .process-grid {
        grid-template-columns: 1fr !important;
    }

    .build-card,
    .problem-card {
        min-height: auto !important;
    }

    .work-card {
        grid-template-columns: 150px 1fr !important;
    }

    .capabilities-box {
        padding: 24px !important;
    }

    .cta-box {
        grid-template-columns: 1fr !important;
        text-align: left !important;
        padding: 28px !important;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Homepage hero collage */
html body.home-page .hp-hero-visual {
    min-width: 0;
    isolation: isolate;
}

html body.home-page .hp-hero-collage {
    position: absolute;
    inset: 26px 0 26px 18px;
    overflow: visible;
}

html body.home-page .hp-hero-collage::after {
    content: "";
    position: absolute;
    inset: 15% 8% 12% 10%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(145, 226, 73, 0.18), rgba(145, 226, 73, 0) 68%);
    filter: blur(18px);
    pointer-events: none;
}

html body.home-page .hp-hero-collage-card {
    position: absolute;
    display: block;
    margin: 0;
    height: auto;
    padding: 16px 5px 5px;
    aspect-ratio: 2.08 / 1;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(13, 24, 41, 0.11);
    border-radius: 16px;
    box-shadow:
        0 24px 58px rgba(13, 24, 41, 0.15),
        0 8px 22px rgba(108, 187, 49, 0.08);
    transform-origin: center;
    transition: transform 300ms ease, box-shadow 300ms ease;
}

html body.home-page .hp-hero-collage-card::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d6dde5;
    box-shadow: 8px 0 #d6dde5, 16px 0 #d6dde5;
}

html body.home-page .hp-hero-collage-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #ffffff;
    border-radius: 10px;
}

html body.home-page .hp-hero-collage-main {
    top: 12%;
    left: 0;
    width: 76%;
    z-index: 1;
    transform: rotate(-0.45deg);
}

html body.home-page .hp-hero-collage-markets {
    top: 1%;
    right: 0;
    width: 53%;
    z-index: 3;
    transform: rotate(0.45deg);
}

html body.home-page .hp-hero-collage-spot {
    bottom: 1%;
    left: 3%;
    width: 52%;
    z-index: 4;
    transform: rotate(-0.4deg);
}

html body.home-page .hp-hero-collage-futures {
    right: 0;
    bottom: 4%;
    width: 50%;
    z-index: 5;
    transform: rotate(0.4deg);
}

@media (max-width: 980px) {
    html body.home-page .hp-hero .hp-hero-visual {
        height: clamp(390px, 56vw, 470px) !important;
    }

    html body.home-page .hp-hero-collage {
        inset: 18px 4px 22px;
    }
}

@media (max-width: 680px) {
    html body.home-page .hp-hero .hp-hero-visual {
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 0 28px;
    }

    html body.home-page .hp-hero-collage {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        height: auto;
    }

    html body.home-page .hp-hero-collage-card {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 2.08 / 1;
        padding: 13px 4px 4px;
        border-radius: 14px;
        box-shadow: 0 12px 28px rgba(13, 24, 41, 0.12);
        transform: none;
    }

    html body.home-page .hp-hero-collage-main,
    html body.home-page .hp-hero-collage-futures {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    html body.home-page .hp-hero-collage {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    html body.home-page .hp-hero-collage-main,
    html body.home-page .hp-hero-collage-markets,
    html body.home-page .hp-hero-collage-spot,
    html body.home-page .hp-hero-collage-futures {
        grid-column: auto;
    }
}

/* Five-product hero showcase carousel */
html body.home-page .hp-product-showcase {
    position: absolute;
    inset: 0;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
}

html body.home-page .hp-product-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-x pan-y;
}

html body.home-page .hp-product-track::-webkit-scrollbar {
    display: none;
}

html body.home-page .hp-product-track.is-dragging {
    scroll-behavior: auto;
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}

html body.home-page .hp-product-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: 100%;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

html body.home-page .hp-product-label {
    position: absolute;
    top: 16px;
    right: 52px;
    left: auto;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border: 1px solid rgba(13, 24, 41, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 22px rgba(13, 24, 41, 0.08);
    color: #172033;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

html body.home-page .hp-product-label::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #91df45;
    box-shadow: 0 0 0 4px rgba(145, 223, 69, 0.13);
}

html body.home-page .hp-product-collage {
    position: absolute;
    inset: 50px 44px 48px 26px;
}

html body.home-page .hp-product-collage::after {
    content: "";
    position: absolute;
    inset: 16% 10% 10%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(145, 223, 69, 0.16), rgba(145, 223, 69, 0) 70%);
    filter: blur(20px);
    pointer-events: none;
}

html body.home-page .hp-product-shot {
    position: absolute;
    display: block;
    height: auto;
    margin: 0;
    padding: 15px 5px 5px;
    aspect-ratio: 2.07 / 1;
    overflow: hidden;
    border: 1px solid rgba(13, 24, 41, 0.11);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 52px rgba(13, 24, 41, 0.15), 0 7px 20px rgba(13, 24, 41, 0.07);
    transform-origin: center;
    transition: transform 260ms ease, box-shadow 260ms ease;
}

html body.home-page .hp-product-shot::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d5dce5;
    box-shadow: 8px 0 #d5dce5, 16px 0 #d5dce5;
}

html body.home-page .hp-product-shot img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9px;
    background: #ffffff;
    object-fit: contain;
    object-position: center;
}

html body.home-page .hp-product-slide.is-current .hp-product-shot {
    animation: hp-product-card-in 420ms cubic-bezier(.2, .8, .3, 1) both;
}

html body.home-page .hp-product-slide.is-current .hp-product-shot-a { animation-delay: 35ms; }
html body.home-page .hp-product-slide.is-current .hp-product-shot-b { animation-delay: 70ms; }
html body.home-page .hp-product-slide.is-current .hp-product-shot-c { animation-delay: 105ms; }
html body.home-page .hp-product-slide.is-current .hp-product-shot-d { animation-delay: 140ms; }
html body.home-page .hp-product-slide.is-current .hp-product-shot-e { animation-delay: 175ms; }

html body.home-page .hp-product-shot-main {
    top: 14%;
    left: 14%;
    z-index: 1;
    width: 70%;
}

html body.home-page .hp-product-shot-a {
    top: 0;
    right: 0;
    z-index: 4;
    width: 42%;
    transform: rotate(.3deg);
}

html body.home-page .hp-product-shot-b {
    top: 2%;
    left: 0;
    z-index: 3;
    width: 38%;
    transform: rotate(-.3deg);
}

html body.home-page .hp-product-shot-c {
    bottom: 0;
    left: 3%;
    z-index: 5;
    width: 39%;
    transform: rotate(-.25deg);
}

html body.home-page .hp-product-shot-d {
    right: 0;
    bottom: 2%;
    z-index: 6;
    width: 43%;
    transform: rotate(.25deg);
}

html body.home-page .hp-product-shot-e {
    right: 3%;
    bottom: 0;
    z-index: 7;
    width: 31%;
    transform: rotate(-.18deg);
}

/* Redesigned product gallery decks: clearer hierarchy and product-specific depth. */
html body.home-page .hp-hero-content::after {
    right: -170px !important;
    width: 300px !important;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .88) 44%, rgba(255, 255, 255, 0) 100%) !important;
}

html body.home-page .hp-product-slide:nth-child(1) {
    --hp-product-accent: #84d93f;
    --hp-product-wash: rgba(132, 217, 63, .13);
}

html body.home-page .hp-product-slide:nth-child(2) {
    --hp-product-accent: #b22131;
    --hp-product-wash: rgba(178, 33, 49, .10);
}

html body.home-page .hp-product-slide:nth-child(3) {
    --hp-product-accent: #244d76;
    --hp-product-wash: rgba(36, 77, 118, .12);
}

html body.home-page .hp-product-slide:nth-child(4) {
    --hp-product-accent: #00a66a;
    --hp-product-wash: rgba(0, 166, 106, .12);
}

html body.home-page .hp-product-slide:nth-child(5) {
    --hp-product-accent: #1939a2;
    --hp-product-wash: rgba(25, 57, 162, .11);
}

html body.home-page .hp-product-label {
    border-color: color-mix(in srgb, var(--hp-product-accent) 24%, transparent);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 28px rgba(13, 24, 41, .10);
}

html body.home-page .hp-product-label::before {
    background: var(--hp-product-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hp-product-accent) 16%, transparent);
}

html body.home-page .hp-product-collage::before {
    content: "";
    position: absolute;
    inset: 12% 8% 10%;
    z-index: -2;
    border: 0;
    border-radius: 45%;
    background: radial-gradient(ellipse at center, var(--hp-product-wash), transparent 72%);
    box-shadow: none;
    filter: blur(12px);
}

html body.home-page .hp-product-collage::after {
    inset: 18% 14% 13%;
    background: radial-gradient(circle, var(--hp-product-wash), transparent 70%);
    filter: blur(20px);
}

html body.home-page .hp-product-shot {
    padding: 14px 4px 4px;
    border-color: rgba(13, 24, 41, .12);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(13, 24, 41, .14), 0 4px 12px rgba(13, 24, 41, .06);
}

html body.home-page .hp-product-shot-main {
    z-index: 3;
    border-color: color-mix(in srgb, var(--hp-product-accent) 22%, rgba(13, 24, 41, .12));
    box-shadow: 0 24px 56px rgba(13, 24, 41, .18), 0 8px 22px var(--hp-product-wash);
}

html body.home-page .hp-product-shot img {
    filter: saturate(1.07) contrast(1.045);
}

@media (min-width: 681px) {
    /* CoinUp: dense trading command deck with overlapping analytical panels. */
    html body.home-page [data-layout="coinup"] .hp-product-shot-main { top: 10%; left: 3%; width: 76%; transform: rotate(-.14deg); }
    html body.home-page [data-layout="coinup"] .hp-product-shot-a { top: 0; right: 0; left: auto; width: 36%; transform: rotate(.26deg); }
    html body.home-page [data-layout="coinup"] .hp-product-shot-b { top: 27%; right: 0; left: auto; width: 32%; transform: rotate(-.14deg); }
    html body.home-page [data-layout="coinup"] .hp-product-shot-c { bottom: 1%; left: 0; width: 35%; transform: rotate(-.24deg); }
    html body.home-page [data-layout="coinup"] .hp-product-shot-d { right: auto; bottom: 0; left: 29%; width: 40%; transform: rotate(.16deg); }
    html body.home-page [data-layout="coinup"] .hp-product-shot-e { right: 0; bottom: 2%; width: 35%; transform: rotate(-.12deg); }

    /* iLytix: editorial canvas with a feature rail and layered implementation views. */
    html body.home-page [data-layout="ilytix"] .hp-product-shot-main { top: 8%; left: 0; width: 76%; transform: rotate(-.16deg); }
    html body.home-page [data-layout="ilytix"] .hp-product-shot-a { top: 0; right: 0; left: auto; width: 36%; transform: rotate(.22deg); }
    html body.home-page [data-layout="ilytix"] .hp-product-shot-b { top: 28%; right: 0; left: auto; width: 32%; transform: rotate(-.14deg); }
    html body.home-page [data-layout="ilytix"] .hp-product-shot-c { bottom: 0; left: 0; width: 35%; transform: rotate(.18deg); }
    html body.home-page [data-layout="ilytix"] .hp-product-shot-d { right: auto; bottom: 2%; left: 29%; width: 40%; transform: rotate(-.14deg); }
    html body.home-page [data-layout="ilytix"] .hp-product-shot-e { right: 0; bottom: 0; width: 35%; transform: rotate(.14deg); }

    /* Sirux: cinematic marquee surrounded by an asymmetrical media orbit. */
    html body.home-page [data-layout="sirux"] .hp-product-shot-main { top: 10%; left: 6%; width: 88%; transform: none; }
    html body.home-page [data-layout="sirux"] .hp-product-shot-a { top: 0; right: auto; left: 0; width: 32%; transform: rotate(-.2deg); }
    html body.home-page [data-layout="sirux"] .hp-product-shot-b { top: 0; right: 0; left: auto; width: 32%; transform: rotate(.2deg); }
    html body.home-page [data-layout="sirux"] .hp-product-shot-c { top: 34%; bottom: auto; left: 0; width: 31%; transform: rotate(.14deg); }
    html body.home-page [data-layout="sirux"] .hp-product-shot-d { right: auto; bottom: 0; left: 25%; width: 40%; transform: rotate(-.1deg); }
    html body.home-page [data-layout="sirux"] .hp-product-shot-e { right: 0; bottom: 0; width: 36%; transform: rotate(.14deg); }

    /* Ekonty: stepped platform story with a side dashboard and offset base cards. */
    html body.home-page [data-layout="ekonty"] .hp-product-shot-main { top: 9%; left: 7%; width: 78%; transform: rotate(.1deg); }
    html body.home-page [data-layout="ekonty"] .hp-product-shot-a { top: 0; right: 0; left: auto; width: 36%; transform: rotate(.24deg); }
    html body.home-page [data-layout="ekonty"] .hp-product-shot-b { top: 3%; left: 0; width: 33%; transform: rotate(-.22deg); }
    html body.home-page [data-layout="ekonty"] .hp-product-shot-c { top: 35%; right: 0; bottom: auto; left: auto; width: 31%; transform: rotate(-.12deg); }
    html body.home-page [data-layout="ekonty"] .hp-product-shot-d { right: auto; bottom: 0; left: 3%; width: 40%; transform: rotate(.14deg); }
    html body.home-page [data-layout="ekonty"] .hp-product-shot-e { right: 0; bottom: 0; width: 39%; transform: rotate(-.12deg); }

    /* Punto: centered comparison experience with supporting screens in a soft orbit. */
    html body.home-page [data-layout="punto"] .hp-product-shot-main { top: 10%; left: 9%; width: 80%; transform: none; }
    html body.home-page [data-layout="punto"] .hp-product-shot-a { top: 0; right: auto; left: 0; width: 34%; transform: rotate(-.2deg); }
    html body.home-page [data-layout="punto"] .hp-product-shot-b { top: 0; right: 0; left: auto; width: 34%; transform: rotate(.2deg); }
    html body.home-page [data-layout="punto"] .hp-product-shot-c { top: 34%; bottom: auto; left: 0; width: 31%; transform: rotate(.12deg); }
    html body.home-page [data-layout="punto"] .hp-product-shot-d { right: auto; bottom: 0; left: 25%; width: 40%; transform: rotate(-.1deg); }
    html body.home-page [data-layout="punto"] .hp-product-shot-e { right: 0; bottom: 0; width: 37%; transform: rotate(.12deg); }
}

html body.home-page .hp-hero .hp-product-showcase .hp-product-nav-button {
    position: absolute;
    top: 50%;
    z-index: 20;
    display: grid !important;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(13, 24, 41, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px rgba(13, 24, 41, 0.14);
    color: #172033;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease, transform 180ms ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

html body.home-page .hp-product-nav-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html body.home-page .hp-product-back { left: 3px; }
html body.home-page .hp-product-forward { right: 3px; }

html body.home-page .hp-product-nav-button:hover:not(:disabled),
html body.home-page .hp-product-nav-button:focus-visible {
    background: #8a0813;
    color: #ffffff;
    outline: none;
    transform: translateY(-50%) scale(1.06);
}

html body.home-page .hp-product-nav-button:disabled {
    opacity: .34 !important;
    cursor: default;
}

html body.home-page .hp-product-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    z-index: 20;
    display: flex !important;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(13, 24, 41, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 20px rgba(13, 24, 41, 0.08);
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

html body.home-page .hp-hero .hp-product-indicators button {
    display: block !important;
    width: 7px;
    height: 7px;
    min-width: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cbd2dc;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer;
    transition: width 220ms ease, background-color 220ms ease;
}

html body.home-page .hp-hero .hp-product-indicators button.is-current {
    width: 24px;
    background: #8a0813;
}

@media (hover: hover) and (pointer: fine) {
    html body.home-page .hp-product-shot:hover {
        z-index: 10;
        box-shadow: 0 28px 62px rgba(13, 24, 41, 0.2), 0 9px 24px rgba(13, 24, 41, 0.08);
        transform: translateY(-3px) scale(1.012);
    }
}

@keyframes hp-product-card-in {
    from { opacity: .25; }
    to { opacity: 1; }
}

@media (max-width: 980px) {
    html body.home-page .hp-hero .hp-hero-visual {
        height: clamp(430px, 60vw, 500px) !important;
    }

    html body.home-page .hp-product-collage {
        inset: 48px 38px 46px;
    }
}

@media (max-width: 680px) {
    html body.home-page .hp-hero .hp-hero-visual {
        height: clamp(500px, 96vw, 660px) !important;
        min-height: 0 !important;
        padding: 0;
    }

    html body.home-page .hp-product-showcase {
        position: relative;
        height: 100%;
    }

    html body.home-page .hp-product-slide {
        padding: 48px 4px 45px;
    }

    html body.home-page .hp-product-label {
        top: 8px;
        right: auto;
        left: 8px;
    }

    html body.home-page .hp-product-collage {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        height: auto;
    }

    html body.home-page .hp-product-collage .hp-product-shot {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto;
        padding: 12px 4px 4px;
        aspect-ratio: 2.07 / 1;
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(13, 24, 41, 0.12);
        transform: none !important;
        animation: none;
    }

    html body.home-page .hp-hero .hp-product-showcase .hp-product-nav-button {
        display: none !important;
    }

    html body.home-page .hp-product-indicators {
        bottom: 10px;
    }
}

@media (max-width: 480px) {
    html body.home-page .hp-hero .hp-hero-visual {
        height: calc((100vw - 32px) * 2.9 + 122px) !important;
    }

    html body.home-page .hp-product-collage {
        grid-template-columns: 1fr;
        gap: 10px;
    }

}

@media (prefers-reduced-motion: reduce) {
    html body.home-page .hp-product-track {
        scroll-behavior: auto;
    }

    html body.home-page .hp-product-slide.is-current .hp-product-shot {
        animation: none;
    }
}

/* =========================================================
   TRUE FINAL: HOMEPAGE HEADER + HERO RESPONSIVE ALIGNMENT
========================================================= */

:root {
    --hp-page-gutter: clamp(20px, 5.2vw, 96px);
    --hp-shell-max: 1450px;
}

html body.home-page,
html body.home-page.header-scrolled {
    padding-top: 108px !important;
}

html body.home-page header.site-header#siteHeader,
html body.home-page.header-scrolled header.site-header#siteHeader,
html body.home-page header.site-header#siteHeader.header-scrolled {
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap,
html body.home-page .hp-hero-inner {
    width: min(1450px, calc(100% - 192px)) !important;
    max-width: 1450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
    height: 88px !important;
    min-height: 88px !important;
    padding: 0 clamp(28px, 3.6vw, 58px) !important;
    justify-content: space-between !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
    position: static !important;
    transform: none !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
    width: 112px !important;
    max-width: 112px !important;
    max-height: 56px !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    gap: clamp(2px, 0.8vw, 10px) !important;
}

html body.home-page .site-header .nav-link,
html body.home-page.header-scrolled .site-header .nav-link {
    height: 88px !important;
    padding: 0 clamp(7px, 0.72vw, 12px) !important;
    font-size: clamp(12px, 0.82vw, 13.5px) !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 clamp(18px, 1.7vw, 30px) !important;
    margin-left: clamp(10px, 1.2vw, 18px) !important;
    border-radius: 16px !important;
}

html body.home-page .hp-hero-inner {
    grid-template-columns: minmax(390px, 500px) minmax(0, 1fr) !important;
    min-height: clamp(560px, 36vw, 620px) !important;
}

html body.home-page .hp-hero-content {
    padding: clamp(72px, 6vw, 96px) 0 clamp(54px, 5vw, 70px) !important;
}

html body.home-page .hp-hero-h1 {
    font-size: clamp(40px, 3.2vw, 50px) !important;
}

html body.home-page .hp-hero-img-wrap {
    right: calc(var(--hp-page-gutter) * -1) !important;
}

html body.home-page .hp-container {
    width: min(1200px, calc(100% - 192px)) !important;
}

@media (max-width: 1180px) {
    :root {
        --hp-page-gutter: clamp(18px, 3.8vw, 44px);
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: calc(100% - 88px) !important;
        max-width: none !important;
        height: 78px !important;
        min-height: 78px !important;
        padding: 0 28px !important;
    }

    html body.home-page .site-header .nav-link,
    html body.home-page.header-scrolled .site-header .nav-link {
        height: 78px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
        width: 96px !important;
        max-width: 96px !important;
    }
}

@media (max-width: 980px) {
    html body.home-page,
    html body.home-page.header-scrolled {
        padding-top: 92px !important;
    }

    html body.home-page header.site-header#siteHeader,
    html body.home-page.header-scrolled header.site-header#siteHeader,
    html body.home-page header.site-header#siteHeader.header-scrolled {
        top: 10px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: calc(100% - 36px) !important;
        max-width: none !important;
        height: 68px !important;
        min-height: 68px !important;
        padding: 0 18px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
        display: none !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-toggle,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-toggle,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-toggle {
        display: flex !important;
        margin-left: auto !important;
    }

    html body.home-page .hp-hero-inner {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    html body.home-page .hp-hero-content {
        padding: 44px 0 34px !important;
    }

    html body.home-page .hp-hero-content::after {
        display: none !important;
    }

    html body.home-page .hp-hero-visual,
    html body.home-page .hp-hero-img-wrap {
        height: clamp(320px, 48vw, 440px) !important;
    }

    html body.home-page .hp-hero-img-wrap {
        position: relative !important;
        right: auto !important;
    }
}

@media (max-width: 640px) {
    :root {
        --hp-page-gutter: 16px;
    }

    html body.home-page,
    html body.home-page.header-scrolled {
        padding-top: 82px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: calc(100% - 20px) !important;
        height: 62px !important;
        min-height: 62px !important;
        padding: 0 14px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
        width: 84px !important;
        max-width: 84px !important;
        max-height: 42px !important;
    }

    html body.home-page .hp-hero-inner,
    html body.home-page .hp-container {
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }

    html body.home-page .hp-hero-content {
        padding: 34px 0 28px !important;
    }

    html body.home-page .hp-hero-h1 {
        font-size: clamp(30px, 9vw, 38px) !important;
        line-height: 1.12 !important;
    }

    html body.home-page .hp-hero-h1 br {
        display: none !important;
    }

    html body.home-page .hp-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    html body.home-page .hp-btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.home-page .hp-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-top: 30px !important;
    }

    html body.home-page .hp-stat span {
        font-size: 11px !important;
    }

    html body.home-page .hp-chip {
        left: 14px !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
    }

    html body.home-page .chip-a {
        bottom: 76px !important;
    }

    html body.home-page .chip-b {
        bottom: 28px !important;
    }
}

@media (max-width: 430px) {
    html body.home-page .hp-stats {
        grid-template-columns: 1fr !important;
    }

    html body.home-page .hp-stat {
        padding: 10px 0 !important;
        border-bottom: 1px solid #edf0f4 !important;
    }

    html body.home-page .hp-stat:last-child {
        border-bottom: 0 !important;
    }
}

/* =========================================================
   HEADER WIDTH REPAIR — keep pill aligned over hero content
========================================================= */

html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
    width: auto !important;
    max-width: none !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 132px 0 88px !important;
    padding: 0 24px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
    position: absolute !important;
    left: 62px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav > .nav-cta,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav > .nav-cta,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav > .nav-cta {
    position: static !important;
    transform: none !important;
    margin: 0 0 0 18px !important;
}

@media (max-width: 1180px) {
    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: calc(100% - 44px) !important;
        max-width: none !important;
        height: 74px !important;
        min-height: 74px !important;
        padding: 0 22px !important;
    }
}

@media (max-width: 980px) {
    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: calc(100% - 24px) !important;
        height: 68px !important;
        min-height: 68px !important;
        margin: 0 auto !important;
        padding: 0 18px !important;
        justify-content: space-between !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        position: static !important;
        transform: none !important;
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav > .nav-cta,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav > .nav-cta,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav > .nav-cta {
        display: none !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-toggle,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-toggle,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-toggle {
        display: flex !important;
        margin-left: auto !important;
    }
}

/* Last word: align homepage header shell with hero shell. */
html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap,
html body.home-page .hp-hero-inner {
    width: min(1450px, calc(100% - 192px)) !important;
    max-width: 1450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body.home-page .hp-container {
    width: min(1200px, calc(100% - 192px)) !important;
}

@media (max-width: 1180px) {
    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap,
    html body.home-page .hp-hero-inner,
    html body.home-page .hp-container {
        width: calc(100% - 88px) !important;
        max-width: none !important;
    }
}

@media (max-width: 980px) {
    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap,
    html body.home-page .hp-hero-inner,
    html body.home-page .hp-container {
        width: calc(100% - 36px) !important;
    }
}

@media (max-width: 640px) {
    html body.home-page header.site-header#siteHeader > .nav-wrap {
        width: calc(100% - 20px) !important;
    }

    html body.home-page .hp-hero-inner,
    html body.home-page .hp-container {
        width: calc(100% - 32px) !important;
    }
}

/* =========================================================
   HOMEPAGE RESPONSIVE ALIGNMENT PASS
   Header pill and hero now share the same gutters at every size.
========================================================= */

:root {
    --hp-page-gutter: clamp(20px, 5.2vw, 96px);
    --hp-shell-max: 1450px;
}

html body.home-page,
html body.home-page.header-scrolled {
    padding-top: 108px !important;
}

html body.home-page header.site-header#siteHeader,
html body.home-page.header-scrolled header.site-header#siteHeader,
html body.home-page header.site-header#siteHeader.header-scrolled {
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap,
html body.home-page .hp-hero-inner {
    width: min(1450px, calc(100% - 192px)) !important;
    max-width: var(--hp-shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
    height: 88px !important;
    min-height: 88px !important;
    padding: 0 clamp(28px, 3.6vw, 58px) !important;
    justify-content: space-between !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page.header-scrolled header.site-header#SiteHeader > .nav-wrap > .brand,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
    position: static !important;
    transform: none !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
    width: 112px !important;
    max-width: 112px !important;
    max-height: 56px !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    gap: clamp(2px, 0.8vw, 10px) !important;
}

html body.home-page .site-header .nav-link,
html body.home-page.header-scrolled .site-header .nav-link {
    height: 88px !important;
    padding: 0 clamp(7px, 0.72vw, 12px) !important;
    font-size: clamp(12px, 0.82vw, 13.5px) !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
    position: static !important;
    transform: none !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 clamp(18px, 1.7vw, 30px) !important;
    margin-left: clamp(10px, 1.2vw, 18px) !important;
    border-radius: 16px !important;
}

html body.home-page .hp-hero-inner {
    grid-template-columns: minmax(390px, 500px) minmax(0, 1fr) !important;
    min-height: clamp(560px, 36vw, 620px) !important;
}

html body.home-page .hp-hero-content {
    padding: clamp(72px, 6vw, 96px) 0 clamp(54px, 5vw, 70px) !important;
}

html body.home-page .hp-hero-h1 {
    font-size: clamp(40px, 3.2vw, 50px) !important;
}

html body.home-page .hp-hero-img-wrap {
    right: calc(var(--hp-page-gutter) * -1) !important;
}

html body.home-page .hp-container {
    width: min(1200px, calc(100% - 192px)) !important;
}

@media (max-width: 1180px) {
    :root {
        --hp-page-gutter: clamp(18px, 3.8vw, 44px);
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        height: 78px !important;
        min-height: 78px !important;
        padding: 0 28px !important;
    }

    html body.home-page .site-header .nav-link,
    html body.home-page.header-scrolled .site-header .nav-link {
        height: 78px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
        width: 96px !important;
        max-width: 96px !important;
    }
}

@media (max-width: 980px) {
    html body.home-page,
    html body.home-page.header-scrolled {
        padding-top: 92px !important;
    }

    html body.home-page header.site-header#siteHeader,
    html body.home-page.header-scrolled header.site-header#siteHeader,
    html body.home-page header.site-header#siteHeader.header-scrolled {
        top: 10px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        height: 68px !important;
        min-height: 68px !important;
        padding: 0 18px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
        display: none !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-toggle,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-toggle,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-toggle {
        display: flex !important;
        margin-left: auto !important;
    }

    html body.home-page .hp-hero-inner {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    html body.home-page .hp-hero-content {
        padding: 44px 0 34px !important;
    }

    html body.home-page .hp-hero-content::after {
        display: none !important;
    }

    html body.home-page .hp-hero-visual,
    html body.home-page .hp-hero-img-wrap {
        height: clamp(320px, 48vw, 440px) !important;
    }

    html body.home-page .hp-hero-img-wrap {
        position: relative !important;
        right: auto !important;
    }
}

@media (max-width: 640px) {
    :root {
        --hp-page-gutter: 16px;
    }

    html body.home-page,
    html body.home-page.header-scrolled {
        padding-top: 82px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: calc(100% - 20px) !important;
        height: 62px !important;
        min-height: 62px !important;
        padding: 0 14px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
        width: 84px !important;
        max-width: 84px !important;
        max-height: 42px !important;
    }

    html body.home-page .hp-hero-inner,
    html body.home-page .hp-container {
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }

    html body.home-page .hp-hero-content {
        padding: 34px 0 28px !important;
    }

    html body.home-page .hp-hero-h1 {
        font-size: clamp(30px, 9vw, 38px) !important;
        line-height: 1.12 !important;
    }

    html body.home-page .hp-hero-h1 br {
        display: none !important;
    }

    html body.home-page .hp-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    html body.home-page .hp-btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.home-page .hp-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-top: 30px !important;
    }

    html body.home-page .hp-stat span {
        font-size: 11px !important;
    }

    html body.home-page .hp-chip {
        left: 14px !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
    }

    html body.home-page .chip-a {
        bottom: 76px !important;
    }

    html body.home-page .chip-b {
        bottom: 28px !important;
    }
}

@media (max-width: 430px) {
    html body.home-page .hp-stats {
        grid-template-columns: 1fr !important;
    }

    html body.home-page .hp-stat {
        padding: 10px 0 !important;
        border-bottom: 1px solid #edf0f4 !important;
    }

    html body.home-page .hp-stat:last-child {
        border-bottom: 0 !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .top-container,
    .nav-wrap,
    .hero-grid,
    .container,
    .container.capabilities-box {
        width: calc(100% - 28px) !important;
    }

    .site-header {
        height: 74px !important;
    }

    .nav-wrap {
        height: 74px !important;
    }

    .brand {
        width: 92px !important;
        height: 54px !important;
    }

    .brand img {
        width: 92px !important;
        max-width: 92px !important;
    }

    .hero-content {
        padding-top: 36px !important;
    }

    .hero-content .eyebrow {
        font-size: 10px !important;
        letter-spacing: 0.18em !important;
        margin-bottom: 14px !important;
    }

    .hero-content h1 {
        font-size: 34px !important;
        line-height: 1.18 !important;
    }

    .hero-text {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .hero-actions {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .btn {
        width: 100% !important;
        min-height: 48px !important;
    }

    .hero-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .stat-item {
        grid-template-columns: 42px 1fr !important;
        min-width: 0 !important;
    }

    .hero-visual,
    .hero-image,
    .hero-visual::after {
        height: 460px !important;
        min-height: 460px !important;
        max-height: 460px !important;
    }

    .hero-image {
        object-position: center center !important;
    }

    .hero-float-card {
        left: 14px !important;
        right: 14px !important;
        width: auto !important;
        padding: 13px 14px !important;
    }

    .float-icon {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        font-size: 15px !important;
    }

    .hero-float-card strong {
        font-size: 12px !important;
    }

    .hero-float-card span {
        font-size: 10px !important;
    }

    .card-one {
        top: 26px !important;
    }

    .card-two {
        top: 145px !important;
    }

    .card-three {
        top: 265px !important;
    }

    .section {
        padding: 28px 0 18px !important;
    }

    .section-title h2 {
        font-size: 24px !important;
    }

    .build-card,
    .problem-card {
        padding: 22px 22px 36px !important;
    }

    .capabilities-box {
        padding: 22px !important;
    }

    .brain-mark {
        width: 76px !important;
        height: 76px !important;
        font-size: 30px !important;
    }

    .brain-mark::before,
    .brain-mark::after {
        display: none !important;
    }

    .process-step {
        text-align: left !important;
        padding-left: 0 !important;
    }

    .process-icon {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .process-step b {
        left: 52px !important;
    }

    .why-content {
        padding: 28px 24px !important;
    }

    .why-content h2 {
        font-size: 24px !important;
    }

    .why-image img {
        height: 260px !important;
        min-height: 260px !important;
    }

    .work-card {
        grid-template-columns: 1fr !important;
    }

    .work-card img {
        width: 100% !important;
        height: 180px !important;
    }

    .cta-icon {
        width: 74px !important;
        height: 74px !important;
        font-size: 34px !important;
    }

    .cta-box h2 {
        font-size: 24px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .footer-bottom div {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .hero-content h1 {
        font-size: 30px !important;
    }

    .hero-visual,
    .hero-image,
    .hero-visual::after {
        height: 430px !important;
        min-height: 430px !important;
        max-height: 430px !important;
    }

    .card-two {
        top: 142px !important;
    }

    .card-three {
        top: 258px !important;
    }
}


/* =====================================================
   SECTION 1 FIX: What We Build only
   Do not affect other sections
===================================================== */

#solutions {
    padding: 34px 0 22px !important;
    background: #ffffff !important;
}

#solutions .container {
    width: min(1220px, calc(100% - 72px)) !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
}

#solutions .section-title {
    text-align: center !important;
    margin-bottom: 22px !important;
}

#solutions .section-title .eyebrow {
    margin-bottom: 10px !important;
    color: #c40018 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}

#solutions .section-title h2 {
    margin: 0 !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #080d18 !important;
}

#solutions .build-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

#solutions .build-card {
    min-height: 190px !important;
    padding: 26px 28px 34px !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    position: relative !important;
}

#solutions .service-icon {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 16px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #fff1f2 !important;
    color: #c40018 !important;
    font-size: 24px !important;
}

#solutions .build-card h3 {
    margin: 0 0 10px !important;
    font-size: 19px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    color: #080d18 !important;
}

#solutions .build-card p {
    margin: 0 !important;
    max-width: 300px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

#solutions .build-card a {
    position: absolute !important;
    right: 26px !important;
    bottom: 22px !important;
    color: #c40018 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

/* Tablet */
@media (max-width: 900px) {
    #solutions .container {
        width: calc(100% - 36px) !important;
    }

    #solutions .build-grid {
        grid-template-columns: 1fr !important;
    }

    #solutions .build-card {
        min-height: auto !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    #solutions {
        padding: 28px 0 18px !important;
    }

    #solutions .container {
        width: calc(100% - 28px) !important;
    }

    #solutions .section-title h2 {
        font-size: 23px !important;
    }
}


/* =====================================================
   FIX ONLY: What We Build section width alignment
   Goal: make this section align with upper hero width
===================================================== */

main section#solutions > .container {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

main section#solutions .build-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}

main section#solutions .build-card {
    min-height: 215px !important;
    padding: 32px 38px 42px !important;
}

main section#solutions .build-card h3 {
    font-size: 21px !important;
    line-height: 1.2 !important;
}

main section#solutions .build-card p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    max-width: 340px !important;
}

main section#solutions .service-icon {
    width: 58px !important;
    height: 58px !important;
    font-size: 27px !important;
    margin-bottom: 18px !important;
}

@media (max-width: 900px) {
    main section#solutions > .container {
        width: calc(100% - 36px) !important;
    }

    main section#solutions .build-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================================
   SECTION 2 FIX: Selected Capabilities only
   Goal: align with What We Build section width
===================================================== */

section#capabilities {
    padding: 22px 0 26px !important;
    background: #ffffff !important;
}

section#capabilities.container,
section#capabilities .container,
.container.capabilities-box {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.container.capabilities-box {
    padding: 24px 70px 30px !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

.container.capabilities-box > .eyebrow {
    text-align: center !important;
    margin: 0 0 18px !important;
    color: #c40018 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}

.container.capabilities-box .capabilities-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 60px !important;
}

.container.capabilities-box .capability-list {
    max-width: 420px !important;
}

.container.capabilities-box .capability-list:first-child {
    justify-self: start !important;
}

.container.capabilities-box .capability-list:last-child {
    justify-self: end !important;
}

.container.capabilities-box .capability-list h3 {
    margin: 0 0 16px !important;
    color: #080d18 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.container.capabilities-box .capability-list ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.container.capabilities-box .capability-list li {
    position: relative !important;
    margin: 9px 0 !important;
    padding-left: 24px !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

.container.capabilities-box .capability-list li::before {
    content: "⊙" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #c40018 !important;
    font-size: 13px !important;
}

.container.capabilities-box .brain-mark {
    width: 98px !important;
    height: 98px !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 999px !important;
    background: #fff7f7 !important;
    color: #c40018 !important;
    font-size: 38px !important;
}

.container.capabilities-box .brain-mark::before,
.container.capabilities-box .brain-mark::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    width: 1px !important;
    height: 48px !important;
    background: #e7e9ee !important;
}

.container.capabilities-box .brain-mark::before {
    bottom: 100% !important;
}

.container.capabilities-box .brain-mark::after {
    top: 100% !important;
}

@media (max-width: 900px) {
    section#capabilities .container,
    .container.capabilities-box {
        width: calc(100% - 36px) !important;
        padding: 24px !important;
    }

    .container.capabilities-box .capabilities-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .container.capabilities-box .capability-list,
    .container.capabilities-box .capability-list:first-child,
    .container.capabilities-box .capability-list:last-child {
        max-width: 100% !important;
        justify-self: stretch !important;
    }

    .container.capabilities-box .brain-mark::before,
    .container.capabilities-box .brain-mark::after {
        display: none !important;
    }
}


/* =====================================================
   SECTION 3 FIX: Practical AI For Complex Business Problems only
   Goal: align 4 cards with upper sections
===================================================== */

section.problem-section {
    padding: 22px 0 26px !important;
    background: #ffffff !important;
}

section.problem-section > .container {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

section.problem-section .section-title {
    text-align: center !important;
    margin-bottom: 18px !important;
}

section.problem-section .section-title .eyebrow {
    margin: 0 !important;
    color: #c40018 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}

section.problem-section .problem-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}

section.problem-section .problem-card {
    position: relative !important;
    min-height: 190px !important;
    padding: 24px 26px 38px !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

section.problem-section .service-icon.small {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 16px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #fff1f2 !important;
    color: #c40018 !important;
    font-size: 22px !important;
}

section.problem-section .problem-card h3 {
    margin: 0 0 10px !important;
    color: #080d18 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

section.problem-section .problem-card p {
    margin: 0 !important;
    max-width: 270px !important;
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

section.problem-section .problem-card a {
    position: absolute !important;
    right: 24px !important;
    bottom: 20px !important;
    color: #c40018 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

/* Tablet */
@media (max-width: 1100px) {
    section.problem-section > .container {
        width: calc(100% - 44px) !important;
    }

    section.problem-section .problem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 650px) {
    section.problem-section {
        padding: 20px 0 22px !important;
    }

    section.problem-section > .container {
        width: calc(100% - 28px) !important;
    }

    section.problem-section .problem-grid {
        grid-template-columns: 1fr !important;
    }

    section.problem-section .problem-card {
        min-height: auto !important;
        padding: 22px 22px 38px !important;
    }
}


/* =====================================================
   SECTION 3 FIX: Practical AI For Complex Business Problems only
   Goal: align with upper sections and make 4 cards balanced
===================================================== */

section.problem-section {
    padding: 22px 0 28px !important;
    background: #ffffff !important;
}

section.problem-section > .container {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

section.problem-section .section-title {
    text-align: center !important;
    margin-bottom: 20px !important;
}

section.problem-section .section-title .eyebrow {
    margin: 0 !important;
    color: #c40018 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}

section.problem-section .problem-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}

section.problem-section .problem-card {
    min-height: 190px !important;
    padding: 24px 26px 38px !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    position: relative !important;
}

section.problem-section .problem-card .service-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 16px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #fff1f2 !important;
    color: #c40018 !important;
    font-size: 22px !important;
}

section.problem-section .problem-card h3 {
    margin: 0 0 10px !important;
    color: #080d18 !important;
    font-size: 18px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
}

section.problem-section .problem-card p {
    margin: 0 !important;
    max-width: 250px !important;
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

section.problem-section .problem-card a {
    position: absolute !important;
    right: 24px !important;
    bottom: 20px !important;
    color: #c40018 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

/* Tablet */
@media (max-width: 1100px) {
    section.problem-section > .container {
        width: calc(100% - 44px) !important;
    }

    section.problem-section .problem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    section.problem-section .problem-card p {
        max-width: 100% !important;
    }
}

/* Mobile */
@media (max-width: 650px) {
    section.problem-section {
        padding: 20px 0 24px !important;
    }

    section.problem-section > .container {
        width: calc(100% - 28px) !important;
    }

    section.problem-section .problem-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    section.problem-section .problem-card {
        min-height: auto !important;
        padding: 22px 22px 38px !important;
    }
}


/* =====================================================
   SECTION 3 FIX: Practical AI For Complex Business Problems
   Only this section
===================================================== */

section.problem-section {
    padding: 34px 0 30px !important;
    background: #ffffff !important;
}

section.problem-section > .container {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

section.problem-section .section-title {
    text-align: center !important;
    margin-bottom: 22px !important;
}

section.problem-section .section-title .eyebrow {
    margin: 0 !important;
    color: #c40018 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}

section.problem-section .problem-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}

section.problem-section .problem-card {
    min-height: 190px !important;
    padding: 24px 26px 38px !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    position: relative !important;
}

section.problem-section .problem-card .service-icon {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 16px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #fff1f2 !important;
    color: #c40018 !important;
    font-size: 22px !important;
}

section.problem-section .problem-card h3 {
    margin: 0 0 10px !important;
    color: #080d18 !important;
    font-size: 18px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
}

section.problem-section .problem-card p {
    margin: 0 !important;
    max-width: 260px !important;
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

section.problem-section .problem-card a {
    position: absolute !important;
    right: 24px !important;
    bottom: 20px !important;
    color: #c40018 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

/* Laptop/tablet */
@media (max-width: 1100px) {
    section.problem-section > .container {
        width: calc(100% - 44px) !important;
    }

    section.problem-section .problem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    section.problem-section .problem-card p {
        max-width: 100% !important;
    }
}

/* Mobile */
@media (max-width: 650px) {
    section.problem-section {
        padding: 26px 0 24px !important;
    }

    section.problem-section > .container {
        width: calc(100% - 28px) !important;
    }

    section.problem-section .problem-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    section.problem-section .problem-card {
        min-height: auto !important;
        padding: 22px 22px 38px !important;
    }
}


/* =====================================================
   SECTION 3 REAL FIX: Practical AI section visible changes
   This only targets Practical AI cards + gap below it
===================================================== */

main > section.section.problem-section {
    padding: 18px 0 12px !important;
    margin: 0 !important;
    background: #ffffff !important;
}

main > section.section.problem-section > .container {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
}

main > section.section.problem-section .section-title {
    margin: 0 0 16px !important;
    text-align: center !important;
}

main > section.section.problem-section .section-title .eyebrow {
    margin: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.24em !important;
    color: #c40018 !important;
    font-weight: 800 !important;
}

main > section.section.problem-section .problem-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

main > section.section.problem-section .problem-card {
    min-height: 168px !important;
    padding: 22px 28px 34px !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

main > section.section.problem-section .problem-card .service-icon {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 14px !important;
    border-radius: 8px !important;
    background: #fff1f2 !important;
    color: #c40018 !important;
    font-size: 20px !important;
}

main > section.section.problem-section .problem-card h3 {
    margin: 0 0 8px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #080d18 !important;
}

main > section.section.problem-section .problem-card p {
    margin: 0 !important;
    max-width: 260px !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    color: #111827 !important;
    font-weight: 500 !important;
}

main > section.section.problem-section .problem-card a {
    right: 24px !important;
    bottom: 18px !important;
    color: #c40018 !important;
    font-size: 20px !important;
}

/* Reduce the big white gap between Practical AI and Process section */
main > section.process-section {
    padding-top: 14px !important;
    margin-top: 0 !important;
}

main > section.process-section .section-title {
    margin-bottom: 18px !important;
}

@media (max-width: 1100px) {
    main > section.section.problem-section > .container {
        width: calc(100% - 44px) !important;
    }

    main > section.section.problem-section .problem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 650px) {
    main > section.section.problem-section > .container {
        width: calc(100% - 28px) !important;
    }

    main > section.section.problem-section .problem-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================================
   SECTION 4 FIX: Our AI Product Engineering Process only
   Goal: add 20px top padding and balance process timeline
===================================================== */

main > section.process-section {
    padding: 34px 0 42px !important;
    margin-top: 0 !important;
    background: #ffffff !important;
}

main > section.process-section > .container {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
}

main > section.process-section .section-title {
    text-align: center !important;
    margin-bottom: 24px !important;
}

main > section.process-section .section-title .eyebrow {
    margin: 0 0 10px !important;
    color: #c40018 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}

main > section.process-section .section-title h2 {
    margin: 0 !important;
    color: #080d18 !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

main > section.process-section .process-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 28px !important;
    position: relative !important;
    width: 100% !important;
    padding-top: 10px !important;
}

main > section.process-section .process-grid::before {
    content: "" !important;
    position: absolute !important;
    left: 5% !important;
    right: 5% !important;
    top: 47px !important;
    height: 1px !important;
    background: #dfe3ea !important;
    display: block !important;
}

main > section.process-section .process-step {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

main > section.process-section .process-icon {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 14px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #fff1f2 !important;
    color: #c40018 !important;
    font-size: 28px !important;
}

main > section.process-section .process-step b {
    position: absolute !important;
    top: 0 !important;
    left: calc(50% + 18px) !important;
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #c40018 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

main > section.process-section .process-step h3 {
    margin: 0 0 8px !important;
    color: #080d18 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

main > section.process-section .process-step p {
    margin: 0 !important;
    max-width: 200px !important;
    color: #111827 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

/* Tablet */
@media (max-width: 1100px) {
    main > section.process-section > .container {
        width: calc(100% - 44px) !important;
    }

    main > section.process-section .process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 34px 24px !important;
    }

    main > section.process-section .process-grid::before {
        display: none !important;
    }
}

/* Mobile */
@media (max-width: 650px) {
    main > section.process-section {
        padding: 30px 0 34px !important;
    }

    main > section.process-section > .container {
        width: calc(100% - 28px) !important;
    }

    main > section.process-section .process-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    main > section.process-section .process-icon {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    main > section.process-section .process-step b {
        left: 52px !important;
    }

    main > section.process-section .process-step p {
        max-width: 100% !important;
    }
}


/* =====================================================
   SECTION 5 FIX: Why iLytix only
   Goal: compact card, better image clarity, balanced content
===================================================== */

main > section.why-section {
    padding: 38px 0 30px !important;
    margin: 0 !important;
    background: #ffffff !important;
}

main > section.why-section > .container {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
}

main > section.why-section .why-box {
    display: grid !important;
    grid-template-columns: 0.92fr 1fr !important;
    min-height: 330px !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

main > section.why-section .why-image {
    min-height: 330px !important;
    overflow: hidden !important;
    background: #f5f6f8 !important;
}

main > section.why-section .why-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 330px !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: brightness(1.08) contrast(1.05) saturate(1.03) !important;
    opacity: 1 !important;
}

main > section.why-section .why-content {
    padding: 44px 54px !important;
    background: #ffffff !important;
}

main > section.why-section .why-content .eyebrow {
    margin: 0 0 16px !important;
    color: #c40018 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}

main > section.why-section .why-content h2 {
    margin: 0 0 22px !important;
    max-width: 560px !important;
    color: #080d18 !important;
    font-size: 31px !important;
    line-height: 1.24 !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
}

main > section.why-section .why-content ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

main > section.why-section .why-content li {
    position: relative !important;
    margin: 13px 0 !important;
    padding-left: 28px !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}

main > section.why-section .why-content li::before {
    content: "⊙" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #c40018 !important;
    font-size: 13px !important;
}

/* Tablet */
@media (max-width: 1000px) {
    main > section.why-section > .container {
        width: calc(100% - 44px) !important;
    }

    main > section.why-section .why-box {
        grid-template-columns: 1fr !important;
    }

    main > section.why-section .why-image,
    main > section.why-section .why-image img {
        min-height: 340px !important;
        height: 340px !important;
    }

    main > section.why-section .why-content {
        padding: 34px 36px !important;
    }
}

/* Mobile */
@media (max-width: 650px) {
    main > section.why-section {
        padding: 30px 0 24px !important;
    }

    main > section.why-section > .container {
        width: calc(100% - 28px) !important;
    }

    main > section.why-section .why-image,
    main > section.why-section .why-image img {
        min-height: 250px !important;
        height: 250px !important;
    }

    main > section.why-section .why-content {
        padding: 28px 22px !important;
    }

    main > section.why-section .why-content h2 {
        font-size: 24px !important;
    }
}


/* =====================================================
   SECTION 6 FIX: Featured Work only
   Goal: balanced cards, equal image sizes, clean spacing
===================================================== */

main > section#work {
    padding: 28px 0 28px !important;
    background: #ffffff !important;
}

main > section#work > .container {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
}

main > section#work .section-title {
    text-align: center !important;
    margin-bottom: 18px !important;
}

main > section#work .section-title .eyebrow {
    margin: 0 !important;
    color: #c40018 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}

main > section#work .work-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}

main > section#work .work-card {
    display: grid !important;
    grid-template-columns: 170px 1fr !important;
    align-items: center !important;
    gap: 20px !important;
    min-height: 150px !important;
    padding: 16px 20px !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

main > section#work .work-card img {
    width: 170px !important;
    height: 105px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 3px !important;
    filter: brightness(0.92) contrast(1.04) saturate(1.02) !important;
}

main > section#work .work-card h3 {
    margin: 0 0 8px !important;
    color: #080d18 !important;
    font-size: 19px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

main > section#work .work-card p {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

main > section#work .work-card a {
    display: inline-block !important;
    margin-top: 12px !important;
    color: #c40018 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

/* =====================================================
   SECTION 7 FIX: CTA section below Featured Work only
   Goal: clean horizontal CTA like reference
===================================================== */

main > section.cta-section {
    padding: 4px 0 36px !important;
    background: #ffffff !important;
}

main > section.cta-section > .container.cta-box {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    min-height: 150px !important;
    margin: 0 auto !important;
    padding: 26px 48px !important;
    display: grid !important;
    grid-template-columns: 110px 1fr auto !important;
    align-items: center !important;
    gap: 36px !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #ffffff 0%, #fff7f7 100%) !important;
    box-shadow: none !important;
}

main > section.cta-section .cta-icon {
    width: 88px !important;
    height: 88px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #fff1f2 !important;
    color: #c40018 !important;
    font-size: 38px !important;
}

main > section.cta-section .cta-box h2 {
    margin: 0 0 8px !important;
    color: #080d18 !important;
    font-size: 29px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
}

main > section.cta-section .cta-box p {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

main > section.cta-section .cta-box .btn {
    min-width: 210px !important;
    min-height: 54px !important;
    padding: 0 28px !important;
    border-radius: 4px !important;
    background: #c40018 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    justify-self: end !important;
}

/* Tablet */
@media (max-width: 1100px) {
    main > section#work > .container,
    main > section.cta-section > .container.cta-box {
        width: calc(100% - 44px) !important;
        max-width: none !important;
    }

    main > section#work .work-grid {
        grid-template-columns: 1fr !important;
    }

    main > section#work .work-card {
        grid-template-columns: 180px 1fr !important;
    }

    main > section.cta-section > .container.cta-box {
        grid-template-columns: 90px 1fr !important;
    }

    main > section.cta-section .cta-box .btn {
        grid-column: 2 / 3 !important;
        justify-self: start !important;
        margin-top: 8px !important;
    }
}

/* Mobile */
@media (max-width: 650px) {
    main > section#work,
    main > section.cta-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    main > section#work > .container,
    main > section.cta-section > .container.cta-box {
        width: calc(100% - 28px) !important;
    }

    main > section#work .work-card {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    main > section#work .work-card img {
        width: 100% !important;
        height: 180px !important;
    }

    main > section.cta-section > .container.cta-box {
        grid-template-columns: 1fr !important;
        padding: 26px 24px !important;
        gap: 18px !important;
    }

    main > section.cta-section .cta-icon {
        width: 74px !important;
        height: 74px !important;
        font-size: 32px !important;
    }

    main > section.cta-section .cta-box h2 {
        font-size: 24px !important;
    }

    main > section.cta-section .cta-box .btn {
        grid-column: auto !important;
        width: 100% !important;
        justify-self: stretch !important;
    }
}


/* =====================================================
   SECTION 8 FIX: Footer only
   Goal: footer inner content aligned with upper sections
===================================================== */

footer.site-footer {
    padding: 34px 0 0 !important;
    background: #f1f1f1 !important;
    color: #111318 !important;
}

footer.site-footer > .container {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

footer.site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr 1.2fr !important;
    gap: 54px !important;
    align-items: start !important;
    padding: 0 0 34px !important;
}

footer.site-footer .footer-logo {
    width: 96px !important;
    height: auto !important;
    max-width: 96px !important;
    object-fit: contain !important;
    margin-bottom: 18px !important;
    background: #ffffff !important;
    padding: 8px !important;
    border-radius: 2px !important;
}

footer.site-footer p {
    margin: 0 0 10px !important;
    max-width: 240px !important;
    color: #000000 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

footer.site-footer h3 {
    margin: 0 0 16px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

footer.site-footer a {
    display: block !important;
    margin: 10px 0 !important;
    color: #010408 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
}

footer.site-footer a:hover {
    color: #ffffff !important;
}

footer.site-footer .socials {
    display: flex !important;
    gap: 12px !important;
    margin-top: 22px !important;
}

footer.site-footer .socials span {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.11) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

footer.site-footer .footer-bottom {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 42px !important;
}

footer.site-footer .footer-bottom p {
    margin: 0 !important;
    max-width: none !important;
    color: #000000 !important;
    font-size: 13px !important;
}

footer.site-footer .footer-bottom div {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
}

footer.site-footer .footer-bottom a {
    margin: 0 !important;
    font-size: 13px !important;
}

/* Tablet */
@media (max-width: 1100px) {
    footer.site-footer > .container,
    footer.site-footer .footer-bottom {
        width: calc(100% - 44px) !important;
        max-width: none !important;
    }

    footer.site-footer .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 34px !important;
    }
}

/* Mobile */
@media (max-width: 650px) {
    footer.site-footer {
        padding-top: 30px !important;
    }

    footer.site-footer > .container,
    footer.site-footer .footer-bottom {
        width: calc(100% - 28px) !important;
    }

    footer.site-footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

    footer.site-footer .footer-bottom {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    footer.site-footer .footer-bottom div {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}


/* =====================================================
   RESPONSIVE HERO FIX
   Goal: mobile/tablet par content simple stack na ho;
   buttons + stats compact grid me rahein
===================================================== */

/* Tablet hero layout */
@media (max-width: 900px) {
    .hero-section {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 0 0 30px !important;
        overflow: visible !important;
        background: #ffffff !important;
    }

    .hero-grid {
        width: calc(100% - 36px) !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 38px 0 0 !important;
    }

    .hero-content::after {
        display: none !important;
    }

    .hero-content h1 {
        max-width: 720px !important;
        font-size: 42px !important;
        line-height: 1.16 !important;
    }

    .hero-text {
        max-width: 680px !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .hero-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        max-width: 620px !important;
    }

    .hero-actions .btn {
        width: 100% !important;
        min-height: 52px !important;
    }

    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
        max-width: 680px !important;
        margin-top: 28px !important;
    }

    .stat-item {
        min-width: 0 !important;
        grid-template-columns: 34px 1fr !important;
        column-gap: 10px !important;
        align-items: start !important;
    }

    .stat-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 22px !important;
    }

    .stat-item strong {
        font-size: 24px !important;
    }

    .stat-item small {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .hero-visual {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    .hero-image {
        width: 100% !important;
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .hero-visual::after {
        height: 440px !important;
        background: linear-gradient(
            90deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.04) 45%,
            rgba(0,0,0,0.08) 100%
        ) !important;
    }

    .hero-float-card {
        width: 250px !important;
        right: 18px !important;
        padding: 14px 16px !important;
        border-radius: 8px !important;
    }

    .card-one {
        top: 30px !important;
    }

    .card-two {
        top: 154px !important;
    }

    .card-three {
        top: 278px !important;
    }
}

/* Mobile hero layout */
@media (max-width: 600px) {
    .hero-grid {
        width: calc(100% - 28px) !important;
        gap: 22px !important;
    }

    .hero-content {
        padding-top: 32px !important;
    }

    .hero-content .eyebrow {
        font-size: 10px !important;
        line-height: 1.4 !important;
        letter-spacing: 0.18em !important;
        margin-bottom: 16px !important;
    }

    .hero-content h1 {
        font-size: 34px !important;
        line-height: 1.16 !important;
        letter-spacing: -0.035em !important;
    }

    .hero-text {
        font-size: 14px !important;
        line-height: 1.65 !important;
        margin-top: 18px !important;
    }

    /* Buttons should not simply stack */
    .hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 24px !important;
    }

    .hero-actions .btn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Stats should remain compact row, not vertical stack */
    .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 26px !important;
    }

    .stat-item {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        text-align: left !important;
    }

    .stat-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 20px !important;
    }

    .stat-item strong {
        font-size: 23px !important;
        line-height: 1 !important;
    }

    .stat-item small {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .hero-visual {
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
        border-radius: 14px !important;
        margin-top: 6px !important;
    }

    .hero-image {
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
        object-position: center center !important;
    }

    .hero-visual::after {
        height: 390px !important;
        background: linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.02) 45%,
            rgba(0,0,0,0.08) 100%
        ) !important;
    }

    .hero-float-card {
        left: 14px !important;
        right: 14px !important;
        width: auto !important;
        max-width: none !important;
        padding: 12px 14px !important;
        gap: 12px !important;
    }

    .float-icon {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        font-size: 15px !important;
    }

    .hero-float-card strong {
        font-size: 12px !important;
    }

    .hero-float-card span {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    .card-one {
        top: 22px !important;
    }

    .card-two {
        top: 132px !important;
    }

    .card-three {
        top: 242px !important;
    }
}

/* Very small phones */
@media (max-width: 390px) {
    .hero-content h1 {
        font-size: 31px !important;
    }

    .hero-actions .btn {
        font-size: 11px !important;
        padding: 0 8px !important;
    }

    .hero-stats {
        gap: 8px !important;
    }

    .stat-item strong {
        font-size: 21px !important;
    }

    .stat-item small {
        font-size: 9.5px !important;
    }

    .hero-visual {
        height: 370px !important;
        min-height: 370px !important;
        max-height: 370px !important;
    }

    .hero-image,
    .hero-visual::after {
        height: 370px !important;
        min-height: 370px !important;
        max-height: 370px !important;
    }
}


/* =====================================================
   INNER PAGE STYLES
===================================================== */

.inner-hero {
    padding: 78px 0 64px;
    background: linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
    border-bottom: 1px solid #e7e9ee;
}

.inner-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.7fr;
    gap: 60px;
    align-items: center;
}

.inner-hero h1 {
    margin: 0;
    max-width: 780px;
    color: #080d18;
    font-size: 56px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.inner-hero p:not(.eyebrow) {
    max-width: 680px;
    margin: 24px 0 30px;
    color: #111827;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 500;
}

.inner-hero-card {
    padding: 34px;
    border: 1px solid #e7e9ee;
    border-radius: 10px;
    background: #ffffff;
}

.inner-hero-card h3 {
    margin: 0 0 18px;
    color: #080d18;
    font-size: 24px;
    font-weight: 800;
}

.inner-hero-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.inner-hero-card li {
    position: relative;
    margin: 14px 0;
    padding-left: 26px;
    font-size: 15px;
    font-weight: 600;
}

.inner-hero-card li::before {
    content: "⊙";
    position: absolute;
    left: 0;
    color: #c40018;
}

.inner-section {
    padding: 58px 0;
    background: #ffffff;
}

.inner-soft {
    background: #fffafa;
    border-top: 1px solid #f0e4e4;
    border-bottom: 1px solid #f0e4e4;
}

.inner-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.inner-card {
    min-height: 220px;
    padding: 28px;
    border: 1px solid #e7e9ee;
    border-radius: 8px;
    background: #ffffff;
}

.inner-card i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 8px;
    background: #fff1f2;
    color: #c40018;
    font-size: 22px;
}

.inner-card h3 {
    margin: 0 0 10px;
    color: #080d18;
    font-size: 19px;
    font-weight: 800;
}

.inner-card p {
    margin: 0;
    color: #111827;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}

.inner-split {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.inner-split h2 {
    margin: 0 0 18px;
    color: #080d18;
    font-size: 38px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.inner-split p {
    color: #111827;
    font-size: 15px;
    line-height: 1.7;
}

.inner-checklist {
    padding: 30px;
    border: 1px solid #e7e9ee;
    border-radius: 8px;
    background: #ffffff;
}

.inner-checklist p {
    margin: 14px 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-weight: 700;
}

.inner-checklist i {
    color: #c40018;
    margin-top: 3px;
}

@media (max-width: 1000px) {
    .inner-hero-grid,
    .inner-split {
        grid-template-columns: 1fr;
    }

    .inner-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inner-hero h1 {
        font-size: 44px;
    }
}

@media (max-width: 650px) {
    .inner-hero {
        padding: 48px 0 42px;
    }

    .inner-hero h1 {
        font-size: 34px;
    }

    .inner-card-grid {
        grid-template-columns: 1fr;
    }

    .inner-section {
        padding: 40px 0;
    }

    .inner-split h2 {
        font-size: 28px;
    }
}


/* Remove navbar dropdown arrows on homepage */
.site-nav a::after,
.site-nav a::before {
    content: none !important;
}


/* Navbar spacing and font update */
.site-nav {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    font-size: 15px !important;
    font-weight: 1000 !important;
}

.site-nav a {
    font-size: 15px !important;
    font-weight: 1000 !important;
}


/* Footer logo visibility fix */
footer.site-footer .footer-logo {
    display: block !important;
    width: 150px !important;
    height: auto !important;
    object-fit: contain !important;
    margin-bottom: 18px !important;
}


/* Footer transparent logo fix */
footer.site-footer .footer-logo {
    width: 150px !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    background: transparent !important;
    mix-blend-mode: normal !important;
}


/* =====================================================
   MOBILE RESPONSIVE FIX FOR HOMEPAGE
   Goal: make homepage clean for phone users
===================================================== */

@media (max-width: 980px) {
    body {
        overflow-x: hidden !important;
    }

    .site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
        background: #ffffff !important;
    }

    .site-header .container,
    .nav-wrap {
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
        height: 78px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    .brand img,
    .site-logo {
        width: 118px !important;
        max-width: 118px !important;
        height: auto !important;
        display: block !important;
    }

    /* Hide desktop navigation on mobile */
    .site-nav {
        display: none !important;
    }

    /* Show clean hamburger */
    .nav-toggle,
    .menu-toggle,
    .hamburger {
        display: flex !important;
        width: 42px !important;
        height: 42px !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        background: transparent !important;
        color: #07111f !important;
        font-size: 24px !important;
    }

    .hero-section {
        padding: 34px 0 44px !important;
    }

    .hero-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 26px !important;
        align-items: start !important;
    }

    .hero-content {
        max-width: 100% !important;
    }

    .eyebrow,
    .hero-eyebrow {
        font-size: 11px !important;
        letter-spacing: 0.18em !important;
        margin-bottom: 14px !important;
    }

    .hero-content h1,
    .hero-title {
        max-width: 100% !important;
        font-size: 34px !important;
        line-height: 1.14 !important;
        letter-spacing: -0.035em !important;
        margin-bottom: 18px !important;
    }

    .hero-content p,
    .hero-subtitle {
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
        margin-bottom: 24px !important;
    }

    .hero-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .hero-actions .btn,
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: 100% !important;
        min-height: 48px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        margin-top: 24px !important;
    }

    .stat-item,
    .hero-stat {
        min-width: 0 !important;
    }

    .stat-item strong,
    .hero-stat strong {
        font-size: 24px !important;
        line-height: 1.1 !important;
    }

    .stat-item span,
    .hero-stat span {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .hero-visual {
        width: 100% !important;
        min-height: 320px !important;
        height: 320px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        margin-top: 2px !important;
    }

    .hero-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .hero-float-card {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        left: 14px !important;
        right: 14px !important;
        padding: 14px 16px !important;
        border-radius: 8px !important;
    }

    .hero-float-card:nth-child(2),
    .float-card-1 {
        top: 22px !important;
    }

    .hero-float-card:nth-child(3),
    .float-card-2 {
        top: 132px !important;
    }

    .hero-float-card:nth-child(4),
    .float-card-3 {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .hero-section {
        padding: 28px 0 40px !important;
    }

    .hero-content h1,
    .hero-title {
        font-size: 31px !important;
        line-height: 1.15 !important;
    }

    .hero-content p,
    .hero-subtitle {
        font-size: 14.5px !important;
    }

    .hero-actions {
        grid-template-columns: 1fr 1fr !important;
    }

    .hero-actions .btn,
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        font-size: 12.5px !important;
    }

    .hero-stats {
        gap: 10px !important;
    }

    .stat-item strong,
    .hero-stat strong {
        font-size: 22px !important;
    }

    .hero-visual {
        height: 300px !important;
        min-height: 300px !important;
    }
}

@media (max-width: 390px) {
    .site-header .container,
    .nav-wrap {
        width: calc(100% - 22px) !important;
    }

    .brand img,
    .site-logo {
        width: 108px !important;
    }

    .hero-content h1,
    .hero-title {
        font-size: 29px !important;
    }

    .hero-actions {
        grid-template-columns: 1fr !important;
    }

    .hero-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .stat-item strong,
    .hero-stat strong {
        font-size: 20px !important;
    }

    .stat-item span,
    .hero-stat span {
        font-size: 10.5px !important;
    }

    .hero-visual {
        height: 285px !important;
        min-height: 285px !important;
    }
}


/* =====================================================
   MOBILE FIX: AI Product Engineering Process Section
   Goal: compact, readable, mobile-first process steps
===================================================== */

@media (max-width: 768px) {
    .process-section {
        padding: 46px 0 42px !important;
    }

    .process-section .section-header,
    .process-section .section-title,
    .process-section .container > .section-header {
        margin-bottom: 28px !important;
        text-align: center !important;
    }

    .process-section .eyebrow,
    .process-section .section-kicker {
        font-size: 11px !important;
        letter-spacing: 0.22em !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }

    .process-section h2 {
        max-width: 360px !important;
        margin: 0 auto !important;
        font-size: 28px !important;
        line-height: 1.16 !important;
        letter-spacing: -0.035em !important;
        text-align: center !important;
    }

    .process-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        margin-top: 26px !important;
    }

    .process-grid::before {
        display: none !important;
    }

    .process-step {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 74px 1fr !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 16px 14px !important;
        border: 1px solid #edf0f4 !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        box-shadow: 0 12px 28px rgba(7, 17, 31, 0.045) !important;
    }

    .process-icon {
        width: 68px !important;
        height: 68px !important;
        margin: 0 !important;
        border-radius: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fff1f3 !important;
    }

    .process-icon i {
        font-size: 25px !important;
        color: #c40018 !important;
    }

    .process-number {
        position: absolute !important;
        top: 8px !important;
        left: 58px !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: #c40018 !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .process-step h3 {
        margin: 0 0 6px !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        color: #07111f !important;
    }

    .process-step p {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #536072 !important;
        font-weight: 600 !important;
    }
}

/* Final responsive controls shared by every page. */
@media (min-width: 981px) {
    .site-header .nav-toggle {
        display: none !important;
    }
}

@media (max-width: 980px) {
    .site-header .site-nav {
        display: none !important;
    }

    .site-header .nav-toggle {
        display: flex !important;
    }
}

@media (max-width: 820px) {
    .calendly-badge-widget {
        display: none !important;
    }
}

@media (max-width: 390px) {
    .process-section h2 {
        font-size: 25px !important;
        max-width: 320px !important;
    }

    .process-step {
        grid-template-columns: 62px 1fr !important;
        gap: 14px !important;
        padding: 14px 12px !important;
    }

    .process-icon {
        width: 58px !important;
        height: 58px !important;
        border-radius: 16px !important;
    }

    .process-icon i {
        font-size: 22px !important;
    }

    .process-number {
        left: 50px !important;
        width: 25px !important;
        height: 25px !important;
        font-size: 10px !important;
    }

    .process-step h3 {
        font-size: 15px !important;
    }

    .process-step p {
        font-size: 12.5px !important;
    }
}


/* =====================================================
   MOBILE FIX: Selected Capabilities Section
   Goal: compact, clean mobile layout
===================================================== */

@media (max-width: 768px) {
    section#capabilities,
    .capabilities-section {
        padding: 42px 0 !important;
    }

    .capabilities-box {
        padding: 26px 22px !important;
        border-radius: 14px !important;
    }

    .capabilities-box .eyebrow,
    .capabilities-box .section-kicker {
        font-size: 11px !important;
        letter-spacing: 0.22em !important;
        margin-bottom: 18px !important;
        text-align: center !important;
    }

    .capabilities-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        align-items: start !important;
    }

    .brain-mark {
        width: 78px !important;
        height: 78px !important;
        margin: 0 auto 8px !important;
        border-radius: 50% !important;
    }

    .brain-mark i {
        font-size: 32px !important;
    }

    .capability-list {
        margin: 0 !important;
        padding: 0 !important;
    }

    .capability-list h3 {
        margin: 0 0 14px !important;
        font-size: 22px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.025em !important;
    }

    .capability-list ul {
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        gap: 10px !important;
    }

    .capability-list li {
        font-size: 14px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .capability-list li::before {
        flex: 0 0 auto !important;
        margin-top: 4px !important;
    }
}

@media (max-width: 390px) {
    .capabilities-box {
        padding: 24px 18px !important;
    }

    .brain-mark {
        width: 68px !important;
        height: 68px !important;
    }

    .brain-mark i {
        font-size: 28px !important;
    }

    .capability-list h3 {
        font-size: 20px !important;
    }

    .capability-list li {
        font-size: 13.5px !important;
    }
}


/* =====================================================
   Capabilities section content enhancement
   Adds useful copy + tags to reduce blank space
===================================================== */

.capability-copy {
    max-width: 360px;
    margin: 0 0 18px;
    color: #536072;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 600;
}

.capability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.capability-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff1f3;
    color: #c40018;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Desktop balance */
@media (min-width: 769px) {
    .capability-list:first-child .capability-copy,
    .capability-list:first-child .capability-tags {
        margin-left: 0;
        margin-right: auto;
    }

    .capability-list:last-child .capability-copy,
    .capability-list:last-child .capability-tags {
        margin-left: 0;
        margin-right: auto;
    }
}

/* Mobile compact spacing */
@media (max-width: 768px) {
    .capability-copy {
        max-width: 100% !important;
        margin-bottom: 14px !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    .capability-tags {
        margin-top: 14px !important;
        gap: 7px !important;
    }

    .capability-tags span {
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: 10.5px !important;
    }
}

/* =====================================================
   NAV DROPDOWN SYSTEM
   Homepage dropdown navigation
===================================================== */

.site-nav {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
}

.nav-dropdown {
    position: relative;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #080d18;
    text-decoration: none;
    font-size: 15px;
    font-weight: 1000;
    line-height: 1;
}

.nav-link::after {
    content: "▾";
    font-size: 10px;
    color: #c40018;
    transform: translateY(-1px);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 280px;
    padding: 12px;
    border: 1px solid #e7e9ee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(7, 17, 31, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.18s ease;
    z-index: 9999;
}

.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 18px;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 12px 12px;
    border-radius: 8px;
    color: #111827;
    font-size: 13px !important;
    line-height: 1.25;
    font-weight: 800 !important;
    text-decoration: none;
}

.dropdown-menu a:hover {
    background: #fff1f3;
    color: #c40018;
}

@media (max-width: 980px) {
    .site-nav {
        display: none !important;
    }
}


/* =====================================================
   MOBILE MEGA MENU
===================================================== */

.mobile-mega-menu {
    display: none;
}

@media (max-width: 980px) {
    .mobile-mega-menu {
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        display: none;
        padding: 14px;
        background: #ffffff;
        border-top: 1px solid #edf0f4;
        border-bottom: 1px solid #edf0f4;
        box-shadow: 0 18px 40px rgba(7, 17, 31, 0.10);
        max-height: calc(100vh - 78px);
        overflow-y: auto;
        z-index: 9999;
    }

    .mobile-mega-menu.is-open {
        display: block;
    }

    .mobile-mega-menu details {
        border-bottom: 1px solid #edf0f4;
        padding: 4px 0;
    }

    .mobile-mega-menu summary {
        cursor: pointer;
        list-style: none;
        padding: 14px 4px;
        color: #080d18;
        font-size: 15px;
        font-weight: 900;
    }

    .mobile-mega-menu summary::-webkit-details-marker {
        display: none;
    }

    .mobile-mega-menu summary::after {
        content: "+";
        float: right;
        color: #c40018;
        font-weight: 900;
    }

    .mobile-mega-menu details[open] summary::after {
        content: "−";
    }

    .mobile-mega-menu a {
        display: block;
        padding: 11px 12px;
        color: #536072;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        border-radius: 8px;
    }

    .mobile-mega-menu a:hover {
        background: #fff1f3;
        color: #c40018;
    }

    .mobile-menu-cta {
        margin-top: 14px;
        background: #c40018 !important;
        color: #ffffff !important;
        text-align: center;
        border-radius: 8px;
        min-height: 48px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}


/* ===== Homepage hero image slider ===== */
.hero-visual {
    position: relative !important;
    overflow: hidden !important;
}

.hero-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hero-slider .hero-slide {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0;
    transform: translateX(34px) scale(1.06);
    animation: heroImageSlideCycle 20s infinite ease-in-out;
    will-change: opacity, transform;
}

.hero-slider .hero-slide:nth-child(1) {
    animation-delay: 0s;
}

.hero-slider .hero-slide:nth-child(2) {
    animation-delay: 5s;
}

.hero-slider .hero-slide:nth-child(3) {
    animation-delay: 10s;
}

.hero-slider .hero-slide:nth-child(4) {
    animation-delay: 15s;
}

@keyframes heroImageSlideCycle {
    0% {
        opacity: 0;
        transform: translateX(42px) scale(1.08);
    }

    6% {
        opacity: 1;
        transform: translateX(0) scale(1.04);
    }

    24% {
        opacity: 1;
        transform: translateX(0) scale(1.02);
    }

    31% {
        opacity: 0;
        transform: translateX(-34px) scale(1.04);
    }

    100% {
        opacity: 0;
        transform: translateX(-34px) scale(1.04);
    }
}

.hero-slider-indicator {
    position: absolute;
    left: 34px;
    bottom: 34px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 70%;
}

.hero-slider-indicator span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #08111f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    box-shadow: 0 10px 28px rgba(8, 13, 24, 0.16);
    backdrop-filter: blur(10px);
}

.hero-float-card {
    z-index: 4 !important;
}

.hero-visual::after {
    z-index: 2 !important;
    pointer-events: none;
}

@media (max-width: 991px) {
    .hero-slider-indicator {
        left: 22px;
        bottom: 22px;
        max-width: calc(100% - 44px);
    }
}

@media (max-width: 640px) {
    .hero-slider-indicator {
        display: none;
    }

    .hero-slider .hero-slide {
        animation-duration: 18s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider .hero-slide {
        animation: none;
        opacity: 0;
        transform: none;
    }

    .hero-slider .hero-slide:first-child {
        opacity: 1;
    }
}

/* ===== Fix homepage hero slider height/layout ===== */
.hero-visual {
    position: relative !important;
    min-height: 520px !important;
    height: 520px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.hero-slider {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.hero-slider .hero-slide,
.hero-slider .hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.hero-visual::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.58) 0%,
        rgba(255,255,255,0.12) 36%,
        rgba(0,0,0,0.22) 100%
    ) !important;
    pointer-events: none !important;
}

.hero-float-card,
.hero-slider-indicator {
    position: absolute !important;
    z-index: 4 !important;
}

@media (max-width: 991px) {
    .hero-visual {
        min-height: 420px !important;
        height: 420px !important;
        border-radius: 24px !important;
    }
}

@media (max-width: 640px) {
    .hero-visual {
        min-height: 320px !important;
        height: 320px !important;
    }
}


/* ===== Final fix: show homepage hero slider image clearly ===== */
.hero-section .hero-content::after {
    display: none !important;
    content: none !important;
}

.hero-section .hero-grid {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.25fr) !important;
    align-items: center !important;
    min-height: 520px !important;
    overflow: visible !important;
}

.hero-section .hero-content {
    position: relative !important;
    z-index: 8 !important;
    background: transparent !important;
}

.hero-section .hero-visual {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #07111f !important;
}

.hero-section .hero-slider {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.hero-section .hero-slider img.hero-slide {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
}

.hero-section .hero-visual::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.15) 0%,
        rgba(255,255,255,0.03) 35%,
        rgba(0,0,0,0.28) 100%
    ) !important;
    pointer-events: none !important;
}

.hero-section .hero-float-card,
.hero-section .hero-slider-indicator {
    z-index: 5 !important;
}

@media (max-width: 991px) {
    .hero-section .hero-grid {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .hero-section .hero-visual {
        height: 420px !important;
        min-height: 420px !important;
        border-radius: 24px !important;
    }
}

@media (max-width: 640px) {
    .hero-section .hero-visual {
        height: 320px !important;
        min-height: 320px !important;
    }
}


/* ===== Active JS based homepage hero slider effect ===== */
.hero-section .hero-slider .hero-slide {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(45px) scale(1.08) !important;
    transition:
        opacity 1.1s ease,
        transform 1.25s ease,
        visibility 1.1s ease !important;
}

.hero-section .hero-slider .hero-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) scale(1.02) !important;
}

.hero-section .hero-slider .hero-slide.is-exiting {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-45px) scale(1.04) !important;
}

.hero-section .hero-visual {
    box-shadow: 0 28px 80px rgba(8, 13, 24, 0.16) !important;
}

.hero-section .hero-slider-indicator {
    animation: heroIndicatorFloat 4s ease-in-out infinite;
}

@keyframes heroIndicatorFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}


/* ===== Force working homepage hero image animation ===== */
.hero-section .hero-slider .hero-slide,
.hero-section .hero-slider .hero-slide.is-active,
.hero-section .hero-slider .hero-slide.is-exiting {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 0 !important;
    transform: translateX(60px) scale(1.12) !important;
    transition: none !important;
    animation-name: ilytixHeroPhotoMotion !important;
    animation-duration: 20s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
}

.hero-section .hero-slider .hero-slide:nth-child(1) {
    animation-delay: 0s !important;
}

.hero-section .hero-slider .hero-slide:nth-child(2) {
    animation-delay: 5s !important;
}

.hero-section .hero-slider .hero-slide:nth-child(3) {
    animation-delay: 10s !important;
}

.hero-section .hero-slider .hero-slide:nth-child(4) {
    animation-delay: 15s !important;
}

@keyframes ilytixHeroPhotoMotion {
    0% {
        opacity: 0;
        transform: translateX(70px) scale(1.12);
        filter: saturate(1.08) contrast(1.05);
    }

    7% {
        opacity: 1;
        transform: translateX(0) scale(1.06);
        filter: saturate(1.08) contrast(1.05);
    }

    25% {
        opacity: 1;
        transform: translateX(-10px) scale(1.02);
        filter: saturate(1.1) contrast(1.05);
    }

    33% {
        opacity: 0;
        transform: translateX(-70px) scale(1.08);
        filter: saturate(1.02) contrast(1.02);
    }

    100% {
        opacity: 0;
        transform: translateX(-70px) scale(1.08);
        filter: saturate(1.02) contrast(1.02);
    }
}

/* Extra subtle floating effect on overlay cards */
.hero-section .hero-float-card.card-one {
    animation: ilytixFloatCardOne 4s ease-in-out infinite !important;
}

.hero-section .hero-float-card.card-two {
    animation: ilytixFloatCardTwo 4.5s ease-in-out infinite !important;
}

.hero-section .hero-float-card.card-three {
    animation: ilytixFloatCardThree 5s ease-in-out infinite !important;
}

@keyframes ilytixFloatCardOne {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes ilytixFloatCardTwo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

@keyframes ilytixFloatCardThree {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}


/* ===== Final homepage hero carousel ===== */
.hero-section .hero-visual {
    position: relative !important;
    height: 500px !important;
    min-height: 500px !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: #07111f !important;
    box-shadow: 0 28px 90px rgba(8, 13, 24, 0.18) !important;
}

.hero-section .hero-slider {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
}

.hero-section .hero-slider .hero-slide,
.hero-section .hero-slider .hero-slide.is-active,
.hero-section .hero-slider .hero-slide.is-prev {
    animation: none !important;
}

.hero-section .hero-slider .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(70px) scale(1.12) !important;
    transition: opacity 900ms ease, transform 1100ms ease, visibility 900ms ease !important;
    z-index: 1 !important;
}

.hero-section .hero-slider .hero-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) scale(1.03) !important;
    z-index: 2 !important;
}

.hero-section .hero-slider .hero-slide.is-prev {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-70px) scale(1.07) !important;
    z-index: 1 !important;
}

.hero-section .hero-visual::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 35% !important;
    z-index: 3 !important;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.78) 0%,
        rgba(255,255,255,0.24) 50%,
        rgba(255,255,255,0) 100%
    ) !important;
    pointer-events: none !important;
}

.hero-section .hero-visual::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.08) 0%,
        rgba(8,13,24,0.10) 45%,
        rgba(8,13,24,0.35) 100%
    ) !important;
    pointer-events: none !important;
}

.hero-section .hero-float-card,
.hero-section .hero-slider-indicator,
.hero-section .hero-carousel-controls {
    position: absolute !important;
    z-index: 6 !important;
}

.hero-section .hero-carousel-controls {
    right: 28px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-section .hero-carousel-btn {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    color: #08111f;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}

.hero-section .hero-carousel-btn:hover {
    transform: translateY(-2px);
    background: #ffffff;
}

.hero-section .hero-carousel-dots {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(10px);
}

.hero-section .hero-carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(8,13,24,0.25);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}

.hero-section .hero-carousel-dots button.active {
    width: 24px;
    background: #c40018;
}

.hero-section .hero-float-card.card-one {
    animation: ilytixFloatOne 4s ease-in-out infinite !important;
}

.hero-section .hero-float-card.card-two {
    animation: ilytixFloatTwo 4.7s ease-in-out infinite !important;
}

.hero-section .hero-float-card.card-three {
    animation: ilytixFloatThree 5.2s ease-in-out infinite !important;
}

@keyframes ilytixFloatOne {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes ilytixFloatTwo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

@keyframes ilytixFloatThree {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (max-width: 991px) {
    .hero-section .hero-visual {
        height: 420px !important;
        min-height: 420px !important;
    }
}

@media (max-width: 640px) {
    .hero-section .hero-visual {
        height: 320px !important;
        min-height: 320px !important;
        border-radius: 22px !important;
    }

    .hero-section .hero-carousel-controls {
        right: 16px;
        bottom: 16px;
    }

    .hero-section .hero-carousel-btn {
        display: none;
    }
}


/* ===== Hero carousel auto-slide + slight left shift ===== */
.hero-section .hero-grid {
    grid-template-columns: minmax(420px, 0.92fr) minmax(520px, 1.08fr) !important;
    column-gap: 36px !important;
}

.hero-section .hero-visual {
    transform: translateX(-28px) !important;
}

.hero-section .hero-carousel-controls {
    right: 20px !important;
    bottom: 20px !important;
}

.hero-section .hero-slider-indicator {
    left: 22px !important;
    bottom: 20px !important;
}

@media (max-width: 991px) {
    .hero-section .hero-visual {
        transform: none !important;
    }
}


/* ===== Final homepage hero: full background auto-changing image ===== */

/* Make hero a wide background section like reference screenshot */
.hero-section {
    position: relative !important;
    overflow: hidden !important;
    min-height: 620px !important;
    padding: 0 !important;
    background: #ffffff !important;
}

/* Wide hero layout */
.hero-section .top-container.hero-grid {
    width: min(100%, 1500px) !important;
    max-width: 1500px !important;
    min-height: 620px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 0.78fr) minmax(620px, 1.22fr) !important;
    align-items: center !important;
    gap: 0 !important;
    position: relative !important;
}

/* Left content should sit above the background */
.hero-section .hero-content {
    position: relative !important;
    z-index: 8 !important;
    padding: 80px 0 80px 0 !important;
    background: transparent !important;
}

/* remove old white overlay from content */
.hero-section .hero-content::after {
    display: none !important;
    content: none !important;
}

/* Make visual area behave like full right-side background */
.hero-section .hero-visual {
    position: absolute !important;
    inset: 0 0 0 34% !important;
    width: auto !important;
    height: 100% !important;
    min-height: 620px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #07111f !important;
    transform: none !important;
    box-shadow: none !important;
    z-index: 1 !important;
}

/* Image slider as background */
.hero-section .hero-slider {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.hero-section .hero-slider .hero-slide,
.hero-section .hero-slider .hero-slide.is-active,
.hero-section .hero-slider .hero-slide.is-prev {
    animation: none !important;
}

.hero-section .hero-slider .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(1.08) translateX(35px) !important;
    transition: opacity 1.2s ease, transform 1.4s ease, visibility 1.2s ease !important;
    z-index: 1 !important;
    filter: saturate(1.02) contrast(1.02) !important;
}

.hero-section .hero-slider .hero-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1.02) translateX(0) !important;
    z-index: 2 !important;
}

.hero-section .hero-slider .hero-slide.is-prev {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(1.05) translateX(-35px) !important;
}

/* Big white fade from left into image, like second screenshot */
.hero-section .hero-visual::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 48% !important;
    z-index: 3 !important;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255,255,255,0.92) 28%,
        rgba(255,255,255,0.55) 56%,
        rgba(255,255,255,0) 100%
    ) !important;
    pointer-events: none !important;
}

/* dark overlay on image right side for premium contrast */
.hero-section .hero-visual::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(8,13,24,0.12) 48%,
        rgba(8,13,24,0.52) 100%
    ) !important;
    pointer-events: none !important;
}

/* Floating cards stay on image */
.hero-section .hero-float-card {
    position: absolute !important;
    z-index: 6 !important;
    background: rgba(255,255,255,0.94) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 18px 48px rgba(8, 13, 24, 0.20) !important;
}

/* Keep existing right card positions but make them fit full background */
.hero-section .hero-float-card.card-one {
    right: 70px !important;
    top: 120px !important;
}

.hero-section .hero-float-card.card-two {
    right: 70px !important;
    top: 245px !important;
}

.hero-section .hero-float-card.card-three {
    right: 70px !important;
    top: 370px !important;
}

/* Hide carousel controls/dots because background should change automatically */
.hero-section .hero-carousel-controls,
.hero-section .hero-carousel-dots,
.hero-section .hero-carousel-btn,
.hero-section .hero-slider-indicator {
    display: none !important;
}

/* Smooth floating card motion */
.hero-section .hero-float-card.card-one {
    animation: heroFloatOne 4s ease-in-out infinite !important;
}

.hero-section .hero-float-card.card-two {
    animation: heroFloatTwo 4.8s ease-in-out infinite !important;
}

.hero-section .hero-float-card.card-three {
    animation: heroFloatThree 5.4s ease-in-out infinite !important;
}

@keyframes heroFloatOne {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes heroFloatTwo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

@keyframes heroFloatThree {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Make next section start cleanly after full hero */
.hero-section + .section {
    margin-top: 0 !important;
}

/* Tablet */
@media (max-width: 991px) {
    .hero-section {
        min-height: auto !important;
        padding: 54px 0 40px !important;
    }

    .hero-section .top-container.hero-grid {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        width: min(100% - 36px, 760px) !important;
    }

    .hero-section .hero-content {
        padding: 0 !important;
    }

    .hero-section .hero-visual {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 420px !important;
        min-height: 420px !important;
        margin-top: 34px !important;
        border-radius: 28px !important;
    }

    .hero-section .hero-float-card.card-one {
        right: 28px !important;
        top: 58px !important;
    }

    .hero-section .hero-float-card.card-two {
        right: 28px !important;
        top: 168px !important;
    }

    .hero-section .hero-float-card.card-three {
        right: 28px !important;
        top: 278px !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .hero-section .hero-visual {
        height: 330px !important;
        min-height: 330px !important;
        border-radius: 22px !important;
    }

    .hero-section .hero-float-card {
        max-width: 220px !important;
        padding: 12px 14px !important;
    }

    .hero-section .hero-float-card.card-one {
        top: 32px !important;
        right: 16px !important;
    }

    .hero-section .hero-float-card.card-two {
        top: 132px !important;
        right: 16px !important;
    }

    .hero-section .hero-float-card.card-three {
        display: none !important;
    }
}


/* ===== Site-wide typography softening ===== */
/* Reduces overly bold/dark headings while keeping brand style clean */

h1,
h2,
h3,
.hero-content h1,
.section-title h2,
.inner-hero h1,
.inner-hero-new h1,
.svc-hero-content h1,
.svc-section-head h2,
.svc-detail-content h2,
.ai-hero-content h1,
.ind-hero-content h1,
.res-hero-content h1,
.co-hero-content h1,
.res-section-head h2,
.co-section-head h2 {
    font-weight: 650 !important;
    color: #111827 !important;
    letter-spacing: -0.035em !important;
}

h3,
.build-card h3,
.problem-card h3,
.svc-card-body h3,
.svc-feature-card h3,
.svc-detail-card h3,
.res-card h3,
.co-card h3 {
    font-weight: 650 !important;
    color: #1d1d1d !important;
}

/* Body text weight — only on light sections, never override dark backgrounds */
.hero-text,
.svc-hero-desc,
.ai-hero-desc,
.ind-hero-desc,
.res-hero-desc,
.co-hero-desc {
    font-weight: 400 !important;
}

/* Dark background sections — always keep text white regardless of other rules */
.svc-detail-card p,
.svc-detail-card span,
.svc-detail-card div,
.svc-cta-inner p,
.svc-cta-inner h2,
.ai-hero .ai-card-top p,
.ai-hero .ai-card-top h3,
.ai-hero .ai-stat-list span,
.ind-hero .ind-card-top p,
.ind-hero .ind-card-top h3,
.ind-hero .ind-stat-list span,
.hp-cta p,
.hp-cta h2,
.hp-cta-text p,
.hp-cta-text h2,
.sdc-item-body p,
.sdc-item-body strong {
    color: inherit !important;
}

.nav-link,
.dropdown a,
.mobile-menu a {
    font-weight: 650 !important;
}

.btn,
.nav-cta,
.svc-btn,
.ai-btn,
.ind-btn,
.res-btn,
.co-btn {
    font-weight: 750 !important;
}

/* Homepage hero title should still feel strong, but not extra heavy */
.hero-content h1 {
    font-weight: 650 !important;
    line-height: 1.12 !important;
}

.hero-content h1 span {
    font-weight: 700 !important;
}

/* Small red labels should stay crisp but not too aggressive */
.eyebrow,
.svc-eyebrow,
.ai-eyebrow,
.ind-eyebrow,
.res-eyebrow,
.co-eyebrow {
    font-weight: 750 !important;
    letter-spacing: 0.20em !important;
}


/* =====================================================
   NEW HOMEPAGE — hp- prefixed classes
   Professional layout, calibrated font weights
===================================================== */

/* ── Container & shared ── */
.hp {
    font-family: "Manrope", Arial, sans-serif;
    color: #111827;
}

.hp-container {
    width: min(1200px, calc(100% - 64px));
    margin: 0 auto;
}

.hp-eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: #c40018;
}

.hp-section {
    padding: 88px 0;
}

.hp-section-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 56px;
}

.hp-section-head h2 {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.03em;
    color: #0d1829;
}

.hp-section-head p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.72;
    color: #5d6778;
}

/* ── Buttons ── */
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 26px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.16s ease;
    white-space: nowrap;
    cursor: pointer;
    border: none;
}

.hp-btn-primary {
    background: #970314;
    color: #fff;
}

.hp-btn-primary:hover {
    background: #9e0014;
    transform: translateY(-1px);
}

.hp-btn-ghost {
    background: transparent;
    color: #0d1829;
    border: 1.5px solid #d4d8df;
}

.hp-btn-ghost:hover {
    border-color: #c40018;
    color: #c40018;
}

.hp-btn-outline {
    background: transparent;
    color: #c40018;
    border: 1.5px solid #c40018;
}

.hp-btn-outline:hover {
    background: #c40018;
    color: #fff;
}

.hp-btn-white {
    background: #fff;
    color: #0d1829;
    font-weight: 700;
}

.hp-btn-white:hover {
    background: #f0f1f3;
}

.hp-btn-ghost-white {
    background: transparent;
    color: rgba(255,255,255,0.88);
    border: 1.5px solid rgba(255,255,255,0.35);
}

.hp-btn-ghost-white:hover {
    border-color: rgba(255,255,255,0.7);
    color: #fff;
}

/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
.hp-hero {
    background: #fff;
    overflow: hidden;
    border-bottom: 1px solid #edf0f4;
}

.hp-hero-inner {
    display: grid;
    grid-template-columns: 500px 1fr;
    min-height: 600px;
    width: calc(100% - 64px);
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
}

.hp-hero-content {
    padding: 80px 0 60px;
    position: relative;
    z-index: 5;
}

/* Gradient fade from content into image */
.hp-hero-content::after {
    content: "";
    position: absolute;
    top: 0; right: -300px;
    width: 460px; height: 100%;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.95) 42%, rgba(255,255,255,0) 100%);
    z-index: -1;
    pointer-events: none;
}

.hp-hero-h1 {
    margin: 0;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.04em;
    color: #0d1829;
    max-width: 500px;
}

.hp-hero-sub {
    margin: 20px 0 0;
    max-width: 460px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.76;
    color: #5d6778;
}

.hp-hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
}

/* Stats */
.hp-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 44px;
}

.hp-stat strong {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: #0d1829;
    line-height: 1;
    margin-bottom: 4px;
}

.hp-stat span {
    font-size: 12px;
    font-weight: 500;
    color: #7a8494;
    line-height: 1.4;
}

.hp-stat span a {
    color: #c40018;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hp-stat-divider {
    width: 1px;
    height: 36px;
    background: #e4e7ec;
    flex-shrink: 0;
}

/* Hero visual */
.hp-hero-visual {
    position: relative;
}

.hp-hero-img-wrap {
    position: absolute;
    top: 0; left: 0;
    right: -32px;
    height: 100%;
    overflow: hidden;
}

.hp-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.hp-hero-slide.is-active {
    opacity: 1;
}

/* Overlay on image */
.hp-hero-img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.45) 0%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
}

/* Floating chips */
.hp-chip {
    position: absolute;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: rgba(255,255,255,0.96);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #0d1829;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    white-space: nowrap;
}

.hp-chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: hp-pulse 2s infinite;
}

@keyframes hp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.85); }
}

.chip-a { bottom: 120px; left: 24px; }
.chip-b { bottom: 68px; left: 24px; }

/* Carousel controls */
.hp-carousel-controls {
    position: absolute;
    bottom: 20px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.hp-carousel-prev,
.hp-carousel-next {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #0d1829;
    display: grid;
    place-items: center;
    transition: background 0.15s;
}

.hp-carousel-prev:hover,
.hp-carousel-next:hover {
    background: #fff;
}

.hp-carousel-dots {
    display: flex;
    gap: 5px;
}

.hp-carousel-dots button {
    width: 7px; height: 7px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.55);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.hp-carousel-dots button.active {
    background: #fff;
    transform: scale(1.3);
}

/* ════════════════════════════════════
   TRUST BAR
════════════════════════════════════ */
.hp-trust {
    background: #f8f9fb;
    border-bottom: 1px solid #edf0f4;
    padding: 18px 0;
}

.hp-trust-inner {
    width: min(1200px, calc(100% - 64px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.hp-trust-label {
    font-size: 12px;
    font-weight: 600;
    color: #7a8494;
    white-space: nowrap;
    flex-shrink: 0;
}

.hp-trust-items {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.hp-trust-items span {
    font-size: 12px;
    font-weight: 600;
    color: #3e4a5c;
    padding: 4px 12px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.hp-trust-items span:hover {
    border-color: #c40018;
    color: #c40018;
}

/* ════════════════════════════════════
   PILLARS  (what we build)
════════════════════════════════════ */
.hp-pillars {
    background: #fff;
}

.hp-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hp-pillar-card {
    padding: 36px 32px 32px;
    border: 1px solid #edf0f4;
    border-radius: 14px;
    background: #fff;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.hp-pillar-card:hover {
    box-shadow: 0 16px 48px rgba(8,13,24,0.08);
    border-color: rgba(196,0,24,0.18);
    transform: translateY(-3px);
}

.hp-pillar-featured {
    border-color: rgba(196,0,24,0.25);
    background: linear-gradient(160deg, #fff 60%, #fff7f7 100%);
}

.hp-pillar-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: #fff1f2;
    color: #c40018;
    display: grid;
    place-items: center;
    font-size: 22px;
    margin-bottom: 22px;
}

.hp-pillar-card h3 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.28;
    color: #0d1829;
}

.hp-pillar-card > p {
    margin: 0 0 20px;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.7;
    color: #5d6778;
}

.hp-pillar-card ul {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hp-pillar-card li {
    font-size: 13.5px;
    font-weight: 500;
    color: #374151;
    padding-left: 18px;
    position: relative;
    line-height: 1.4;
}

.hp-pillar-card li::before {
    content: "→";
    position: absolute;
    left: 0;
    font-size: 11px;
    color: #c40018;
    top: 1px;
}

.hp-card-link {
    font-size: 13px;
    font-weight: 600;
    color: #c40018;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}

.hp-card-link:hover {
    border-color: #c40018;
}

/* ════════════════════════════════════
   USE CASES
════════════════════════════════════ */
.hp-usecases {
    background: #f8f9fb;
}

.hp-uc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hp-uc-card {
    padding: 28px 26px;
    border: 1px solid #edf0f4;
    border-radius: 12px;
    background: #fff;
    transition: box-shadow 0.18s, border-color 0.18s;
}

.hp-uc-card:hover {
    box-shadow: 0 10px 32px rgba(8,13,24,0.07);
    border-color: rgba(196,0,24,0.16);
}

.hp-uc-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #fff1f2;
    color: #c40018;
    display: grid;
    place-items: center;
    font-size: 19px;
    margin-bottom: 18px;
}

.hp-uc-card h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: #0d1829;
    line-height: 1.3;
}

.hp-uc-card p {
    margin: 0;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.68;
    color: #5d6778;
}

/* ════════════════════════════════════
   PROCESS
════════════════════════════════════ */
.hp-process {
    background: #fff;
}

.hp-process-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    position: relative;
}

.hp-process-line {
    position: absolute;
    top: 52px;
    left: 52px; right: 52px;
    height: 1px;
    background: linear-gradient(90deg, #e4e7ec, #c40018 50%, #e4e7ec);
    z-index: 0;
}

.hp-process-step {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 8px;
}

.hp-process-num {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #c40018;
    margin-bottom: 6px;
}

.hp-process-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #edf0f4;
    color: #c40018;
    display: grid;
    place-items: center;
    font-size: 22px;
    margin: 0 auto 16px;
    box-shadow: 0 4px 14px rgba(8,13,24,0.07);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hp-process-step:hover .hp-process-icon {
    border-color: #c40018;
    box-shadow: 0 8px 24px rgba(196,0,24,0.14);
}

.hp-process-step h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #0d1829;
}

.hp-process-step p {
    margin: 0;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.6;
    color: #6b7787;
}

/* ════════════════════════════════════
   WHY ILYTIX
════════════════════════════════════ */
.hp-why {
    background: #f8f9fb;
}

.hp-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.hp-why-content h2 {
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.03em;
    color: #0d1829;
}

.hp-why-intro {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.72;
    color: #5d6778;
    margin: 0 0 32px;
}

.hp-why-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hp-why-point {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.hp-why-point-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #fff1f2;
    color: #c40018;
    display: grid;
    place-items: center;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 2px;
}

.hp-why-point strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #0d1829;
    margin-bottom: 3px;
    line-height: 1.3;
}

.hp-why-point span {
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #5d6778;
}

/* Visual side */
.hp-why-visual {
    position: relative;
}

.hp-why-visual img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.hp-why-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: #fff;
    border: 1px solid #edf0f4;
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 12px 36px rgba(8,13,24,0.10);
    text-align: center;
}

.hp-why-badge strong {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #c40018;
    line-height: 1;
    margin-bottom: 4px;
}

.hp-why-badge span {
    font-size: 11.5px;
    font-weight: 500;
    color: #6b7787;
}

/* ════════════════════════════════════
   INDUSTRIES
════════════════════════════════════ */
.hp-industries {
    background: #fff;
}

.hp-ind-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
}

.hp-ind-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 12px;
    border: 1px solid #edf0f4;
    border-radius: 10px;
    text-decoration: none;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    transition: border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.hp-ind-item i {
    font-size: 22px;
    color: #c40018;
}

.hp-ind-item:hover {
    border-color: rgba(196,0,24,0.3);
    color: #c40018;
    box-shadow: 0 6px 20px rgba(196,0,24,0.08);
    transform: translateY(-3px);
}

/* ════════════════════════════════════
   CTA STRIP
════════════════════════════════════ */
.hp-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
}

.hp-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.hp-cta-text h2 {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.22;
    color: #fff;
    letter-spacing: -0.02em;
}

.hp-cta-text p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
}

.hp-cta-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ════════════════════════════════════
   RESPONSIVE — HP
════════════════════════════════════ */
@media (max-width: 1100px) {
    .hp-hero-inner {
        grid-template-columns: 440px 1fr;
    }
    .hp-hero-h1 {
        font-size: 40px;
    }
    .hp-ind-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 920px) {
    .hp-hero-inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hp-hero-content {
        padding: 60px 0 40px;
    }
    .hp-hero-content::after {
        display: none;
    }
    .hp-hero-visual {
        height: 420px;
    }
    .hp-hero-img-wrap {
        position: relative;
        right: auto;
        height: 420px;
    }
    .hp-hero-h1 {
        font-size: 36px;
    }
    .hp-pillars-grid {
        grid-template-columns: 1fr;
    }
    .hp-uc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hp-process-track {
        grid-template-columns: 1fr 1fr;
    }
    .hp-process-line {
        display: none;
    }
    .hp-why-grid {
        grid-template-columns: 1fr;
    }
    .hp-why-visual {
        order: -1;
    }
    .hp-why-visual img {
        height: 300px;
    }
    .hp-why-badge {
        bottom: -14px;
        left: 14px;
    }
    .hp-ind-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .hp-cta-inner {
        flex-direction: column;
        text-align: center;
    }
    .hp-cta-actions {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .hp-section {
        padding: 60px 0;
    }
    .hp-hero-h1 {
        font-size: 30px;
    }
    .hp-hero-sub {
        font-size: 15px;
    }
    .hp-stats {
        flex-wrap: wrap;
        gap: 16px;
    }
    .hp-stat-divider {
        display: none;
    }
    .hp-uc-grid,
    .hp-process-track {
        grid-template-columns: 1fr;
    }
    .hp-ind-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hp-section-head h2 {
        font-size: 26px;
    }
    .hp-cta-text h2 {
        font-size: 24px;
    }
    .hp-trust-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}


/* =====================================================
   FINAL TYPOGRAPHY WEIGHT CALIBRATION — HOMEPAGE
   Weight-only overrides. No layout or color changes.
===================================================== */

body h1,
body .hero-content h1,
body .hp-hero-h1 {
    font-weight: 600 !important;
}

body h2,
body .section-title h2,
body .hp-section-head h2,
body .hp-why-content h2,
body .hp-cta-text h2 {
    font-weight: 600 !important;
}

body h3,
body .build-card h3,
body .problem-card h3,
body .hp-pillar-card h3,
body .hp-uc-card h3,
body .hp-process-step h3 {
    font-weight: 600 !important;
}

body p,
body .hero-text,
body .hp-hero-sub,
body .hp-section-head p,
body .hp-pillar-card > p,
body .hp-uc-card p,
body .hp-process-step p,
body .hp-why-intro,
body .hp-why-point span,
body .hp-cta-text p {
    font-weight: 400 !important;
}

body .site-header .nav-link,
body .site-header .dropdown a,
body .mobile-menu a,
body .mobile-menu summary {
    font-weight: 600 !important;
}

body .nav-cta,
body .btn,
body .hp-btn,
body button,
body input[type="submit"] {
    font-weight: 700 !important;
}

body .eyebrow,
body .hp-eyebrow,
body .hp-process-num {
    font-weight: 700 !important;
}

body .hp-card-link,
body .hp-chip,
body .hp-trust-label,
body .hp-trust-items span,
body .site-footer a,
body .site-footer strong {
    font-weight: 600 !important;
}

/* ===== FINAL OVERRIDE: Homepage CTA white text ===== */
body.home-page .hp-cta .hp-cta-text h2,
body.home-page .hp-cta .hp-cta-text p,
body.home-page .hp-cta h2,
body.home-page .hp-cta p,
.hp-cta .hp-cta-text h2,
.hp-cta .hp-cta-text p,
.hp-cta h2,
.hp-cta p {
    color: #000000 !important;
}

body.home-page .hp-cta .hp-cta-actions a:not(.btn-light),
.hp-cta .hp-cta-actions a:not(.btn-light) {
    color: #ffffff !important;
}

body.home-page .hp-cta .btn-light,
.hp-cta .btn-light {
    color: #0f172a !important;
}


/* ===== FINAL OVERRIDE: Homepage CTA white text ===== */
body.home-page .hp-cta .hp-cta-text h2,
body.home-page .hp-cta .hp-cta-text p,
body.home-page .hp-cta h2,
body.home-page .hp-cta p,
.hp-cta .hp-cta-text h2,
.hp-cta .hp-cta-text p,
.hp-cta h2,
.hp-cta p {
    color: #000000 !important;
}

body.home-page .hp-cta .hp-cta-actions a:not(.btn-light),
.hp-cta .hp-cta-actions a:not(.btn-light) {
    color: #ffffff !important;
}

body.home-page .hp-cta .btn-light,
.hp-cta .btn-light {
    color: #0f172a !important;
}


/* ===== FINAL OVERRIDE: Homepage CTA buttons ===== */
.hp-cta .hp-cta-actions a:first-child,
body.home-page .hp-cta .hp-cta-actions a:first-child {
    background: #7e0317 !important;
    color: #ffffff !important;
    border: 1px solid #c50022 !important;
    box-shadow: none !important;
}

.hp-cta .hp-cta-actions a:first-child:hover,
body.home-page .hp-cta .hp-cta-actions a:first-child:hover {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

.hp-cta .hp-cta-actions a:last-child,
body.home-page .hp-cta .hp-cta-actions a:last-child {
    background: transparent !important;
    color: #770101 !important;
    border: 1px solid rgba(158, 5, 5, 0.562) !important;
}


/* ===== Homepage header turns into pill on scroll ===== */
body.home-page .site-header {
    transition: all 0.25s ease !important;
}

body.home-page.header-scrolled .site-header {
    position: fixed !important;
    top: 22px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(100% - 48px, 1180px) !important;
    z-index: 9999 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.home-page.header-scrolled .site-header .nav-wrap {
    min-height: 68px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(16px) !important;
    padding: 0 20px !important;
}

body.home-page.header-scrolled .site-header .brand img {
    height: 42px !important;
    max-width: 130px !important;
    object-fit: contain !important;
}

body.home-page.header-scrolled .site-header .nav-link {
    font-size: 14px !important;
    font-weight: 600 !important;
}

body.home-page.header-scrolled .site-header .nav-cta {
    border-radius: 999px !important;
    padding: 13px 28px !important;
}

/* ===== FINAL FIX: Bigger logo inside homepage pill navbar ===== */
body.home-page.header-scrolled .site-header .brand img {
    height: 54px !important;
    max-width: 165px !important;
    object-fit: contain !important;
}

body.home-page.header-scrolled .site-header .brand {
    min-width: 150px !important;
}


/* ===== FINAL RESET: Homepage fixed navbar, no pill on scroll ===== */
body.home-page .site-header,
body.home-page.header-scrolled .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(8,13,24,0.08) !important;
    box-shadow: none !important;
}

body.home-page .site-header .nav-wrap,
body.home-page.header-scrolled .site-header .nav-wrap {
    width: min(100% - 48px, 1320px) !important;
    max-width: 1320px !important;
    min-height: 88px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.home-page {
    padding-top: 88px !important;
}

body.home-page .site-header .brand img,
body.home-page.header-scrolled .site-header .brand img {
    height: 58px !important;
    max-width: 170px !important;
    object-fit: contain !important;
}

body.home-page .site-header .nav-cta,
body.home-page.header-scrolled .site-header .nav-cta {
    border-radius: 6px !important;
    padding: 15px 28px !important;
}


/* ===== FINAL FIX: Bigger logo on homepage navbar ===== */
.site-header .brand {
    display: flex !important;
    align-items: center !important;
    min-width: 180px !important;
    height: 88px !important;
}

.site-header .brand img {
    display: block !important;
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    max-height: 72px !important;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    .site-header .brand {
        min-width: 130px !important;
    }

    .site-header .brand img {
        width: 120px !important;
        max-width: 120px !important;
    }
}


/* ===== HARD FIX: Scale SVG logo on homepage because SVG has extra whitespace ===== */
.site-header .brand {
    min-width: 190px !important;
    width: 190px !important;
    height: 80px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}

.site-header .brand img {
    width: 170px !important;
    max-width: 170px !important;
    height: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
    transform: scale(2.25) !important;
    transform-origin: center !important;
}


/* ===== FINAL FIX: Homepage logo left alignment after SVG scaling ===== */
.site-header .brand {
    justify-content: flex-start !important;
    min-width: 210px !important;
    width: 210px !important;
    overflow: visible !important;
}

.site-header .brand img {
    transform: translateX(-42px) scale(2.25) !important;
    transform-origin: right center !important;
}

.site-header .nav-wrap {
    width: min(100% - 64px, 1420px) !important;
    max-width: 1420px !important;
}


/* ===== FINAL FIX: Balanced homepage logo size ===== */
.site-header .brand {
    min-width: 185px !important;
    width: 185px !important;
    height: 88px !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.site-header .brand img {
    width: 155px !important;
    max-width: 155px !important;
    height: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    transform: translateX(-28px) scale(1.65) !important;
    transform-origin: right center !important;
}

/* Header logo: keep the square source SVG inside a normal, centred logo slot. */
body.home-page .site-header > .nav-wrap > .brand {
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    height: 88px !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

body.home-page .site-header > .nav-wrap > .brand img {
    width: 82px !important;
    max-width: 82px !important;
    height: 82px !important;
    max-height: 82px !important;
    object-fit: contain !important;
    transform: none !important;
}

@media (min-width: 769px) {
    /* Match the homepage hero's 1500px left edge and offset the SVG's built-in whitespace. */
    body.home-page .site-header > .nav-wrap {
        width: calc(100% - 64px) !important;
        max-width: 1500px !important;
    }

    body.home-page .site-header > .nav-wrap > .brand {
        overflow: visible !important;
    }

    body.home-page .site-header > .nav-wrap > .brand img {
        transform: translateX(-8px) !important;
    }
}

@media (max-width: 768px) {
    body.home-page .site-header > .nav-wrap > .brand {
        flex-basis: 92px !important;
        width: 92px !important;
        min-width: 92px !important;
    }

    body.home-page .site-header > .nav-wrap > .brand img {
        width: 72px !important;
        max-width: 72px !important;
        height: 72px !important;
        max-height: 72px !important;
    }
}

/* ===== HOMEPAGE REDESIGN: Pill style navbar ===== */
body.home-page {
    padding-top: 110px !important;
}

body.home-page .site-header,
body.home-page.header-scrolled .site-header {
    position: fixed !important;
    top: 22px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(100% - 56px, 1380px) !important;
    max-width: 1380px !important;
    z-index: 9999 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.home-page .site-header .nav-wrap,
body.home-page.header-scrolled .site-header .nav-wrap {
    width: 100% !important;
    max-width: 1380px !important;
    min-height: 78px !important;
    margin: 0 auto !important;
    padding: 0 34px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(8,13,24,0.08) !important;
    box-shadow: 0 20px 55px rgba(8,13,24,0.12) !important;
    backdrop-filter: blur(18px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 34px !important;
}

body.home-page .site-header .brand,
body.home-page.header-scrolled .site-header .brand {
    min-width: 170px !important;
    width: 170px !important;
    height: 78px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
}

body.home-page .site-header .brand img,
body.home-page.header-scrolled .site-header .brand img {
    width: 145px !important;
    max-width: 145px !important;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
    transform: translateX(-18px) scale(1.55) !important;
    transform-origin: left center !important;
}

body.home-page .site-header .site-nav,
body.home-page.header-scrolled .site-header .site-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    gap: 34px !important;
}

body.home-page .site-header .nav-link,
body.home-page.header-scrolled .site-header .nav-link {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    white-space: nowrap !important;
}

body.home-page .site-header .nav-cta,
body.home-page.header-scrolled .site-header .nav-cta {
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    padding: 14px 30px !important;
    background: #7e1521 !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(196,0,24,0.20) !important;
    white-space: nowrap !important;
}

body.home-page .hero-section {
    margin-top: -110px !important;
    padding-top: 110px !important;
}

@media (max-width: 1100px) {
    body.home-page .site-header,
    body.home-page.header-scrolled .site-header {
        width: min(100% - 28px, 100%) !important;
        top: 14px !important;
    }

    body.home-page .site-header .nav-wrap,
    body.home-page.header-scrolled .site-header .nav-wrap {
        padding: 0 22px !important;
        gap: 18px !important;
    }
}


/* ===== FINAL POLISH: Homepage pill navbar width + compact height ===== */
body.home-page .site-header,
body.home-page.header-scrolled .site-header {
    width: min(100% - 96px, 1500px) !important;
    max-width: 1500px !important;
    top: 18px !important;
}

body.home-page .site-header .nav-wrap,
body.home-page.header-scrolled .site-header .nav-wrap {
    width: 100% !important;
    max-width: 1500px !important;
    min-height: 66px !important;
    padding: 0 28px !important;
    border-radius: 999px !important;
    gap: 30px !important;
}

body.home-page .site-header .brand,
body.home-page.header-scrolled .site-header .brand {
    height: 66px !important;
    min-width: 165px !important;
    width: 165px !important;
}

body.home-page .site-header .brand img,
body.home-page.header-scrolled .site-header .brand img {
    width: 135px !important;
    max-width: 135px !important;
    height: 54px !important;
    max-height: 54px !important;
    transform: translateX(-18px) scale(1.45) !important;
    transform-origin: left center !important;
}

body.home-page .site-header .site-nav,
body.home-page.header-scrolled .site-header .site-nav {
    gap: 32px !important;
}

body.home-page .site-header .nav-cta,
body.home-page.header-scrolled .site-header .nav-cta {
    padding: 12px 28px !important;
    border-radius: 999px !important;
}

body.home-page {
    padding-top: 94px !important;
}

body.home-page .hero-section {
    margin-top: -94px !important;
    padding-top: 94px !important;
}


/* ===== MOBILE FIX: Homepage navbar responsive ===== */
@media (max-width: 768px) {
    body.home-page {
        padding-top: 76px !important;
    }

    body.home-page .site-header,
    body.home-page.header-scrolled .site-header {
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
    }

    body.home-page .site-header .nav-wrap,
    body.home-page.header-scrolled .site-header .nav-wrap {
        min-height: 58px !important;
        height: 58px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        gap: 10px !important;
        justify-content: space-between !important;
    }

    body.home-page .site-header .brand,
    body.home-page.header-scrolled .site-header .brand {
        width: 120px !important;
        min-width: 120px !important;
        height: 58px !important;
    }

    body.home-page .site-header .brand img,
    body.home-page.header-scrolled .site-header .brand img {
        width: 105px !important;
        max-width: 105px !important;
        height: 42px !important;
        max-height: 42px !important;
        transform: translateX(-10px) scale(1.35) !important;
        transform-origin: left center !important;
    }

    body.home-page .site-header .site-nav,
    body.home-page.header-scrolled .site-header .site-nav,
    body.home-page .site-header .nav-cta,
    body.home-page.header-scrolled .site-header .nav-cta {
        display: none !important;
    }

    body.home-page .site-header .nav-toggle,
    body.home-page.header-scrolled .site-header .nav-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 999px !important;
        background: #c40018 !important;
        color: #ffffff !important;
        border: 0 !important;
    }

    body.home-page .hero-section {
        margin-top: -76px !important;
        padding-top: 76px !important;
    }
}

@media (max-width: 480px) {
    body.home-page .site-header,
    body.home-page.header-scrolled .site-header {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        top: 8px !important;
    }

    body.home-page .site-header .nav-wrap,
    body.home-page.header-scrolled .site-header .nav-wrap {
        min-height: 54px !important;
        height: 54px !important;
        padding: 0 12px !important;
    }

    body.home-page .site-header .brand,
    body.home-page.header-scrolled .site-header .brand {
        width: 108px !important;
        min-width: 108px !important;
        height: 54px !important;
    }

    body.home-page .site-header .brand img,
    body.home-page.header-scrolled .site-header .brand img {
        width: 96px !important;
        max-width: 96px !important;
        height: 38px !important;
        max-height: 38px !important;
        transform: translateX(-8px) scale(1.32) !important;
    }
}


/* ===== FINAL FIX: Move active homepage hero slide 30px to right ===== */
.hp-hero-slide.is-active,
.hero-slide.is-active {
    transform: translateX(30px) !important;
}


/* Prevent left gap after shifting active hero image */
.hp-hero-slide.is-active,
.hero-slide.is-active {
    width: calc(100% + 30px) !important;
    max-width: none !important;
}


/* ===== FINAL FIX: Move homepage pill navbar content to right ===== */
body.home-page .site-header .nav-wrap,
body.home-page.header-scrolled .site-header .nav-wrap {
    justify-content: space-between !important;
}

body.home-page .site-header .site-nav,
body.home-page.header-scrolled .site-header .site-nav {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    gap: 34px !important;
}

body.home-page .site-header .nav-cta,
body.home-page.header-scrolled .site-header .nav-cta {
    margin-left: 24px !important;
}


/* ===== FINAL FIX: Move homepage pill navbar content to right ===== */
body.home-page .site-header .nav-wrap,
body.home-page.header-scrolled .site-header .nav-wrap {
    justify-content: space-between !important;
}

body.home-page .site-header .site-nav,
body.home-page.header-scrolled .site-header .site-nav {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    gap: 34px !important;
}

body.home-page .site-header .nav-cta,
body.home-page.header-scrolled .site-header .nav-cta {
    margin-left: 24px !important;
}


/* ===== HOMEPAGE NAVBAR RESET: match global navbar ===== */
body.home-page,
body.home-page.header-scrolled {
    padding-top: 88px !important;
}

body.home-page .site-header,
body.home-page.header-scrolled .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(8,13,24,0.08) !important;
    box-shadow: none !important;
}

body.home-page .site-header .nav-wrap,
body.home-page.header-scrolled .site-header .nav-wrap {
    width: min(100% - 64px, 1320px) !important;
    max-width: 1320px !important;
    min-height: 88px !important;
    height: 88px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.home-page .hero-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 768px) {
    body.home-page,
    body.home-page.header-scrolled {
        padding-top: 72px !important;
    }

    body.home-page .site-header .nav-wrap,
    body.home-page.header-scrolled .site-header .nav-wrap {
        width: min(100% - 28px, 100%) !important;
        min-height: 72px !important;
        height: 72px !important;
    }
}


/* ===== HOMEPAGE FINAL: Force pill navbar back ===== */
body.home-page,
body.home-page.header-scrolled {
    padding-top: 112px !important;
}

body.home-page .site-header,
body.home-page.header-scrolled .site-header {
    position: fixed !important;
    top: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(100% - 80px, 1500px) !important;
    max-width: 1500px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.home-page .site-header .nav-wrap,
body.home-page.header-scrolled .site-header .nav-wrap {
    width: 100% !important;
    max-width: 1500px !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 32px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(8,13,24,0.08) !important;
    box-shadow: 0 20px 55px rgba(8,13,24,0.12) !important;
    backdrop-filter: blur(18px) !important;
}

body.home-page .hero-section {
    margin-top: -112px !important;
    padding-top: 112px !important;
}

@media (max-width: 768px) {
    body.home-page,
    body.home-page.header-scrolled {
        padding-top: 78px !important;
    }

    body.home-page .site-header,
    body.home-page.header-scrolled .site-header {
        top: 10px !important;
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
    }

    body.home-page .site-header .nav-wrap,
    body.home-page.header-scrolled .site-header .nav-wrap {
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 14px !important;
    }

    body.home-page .hero-section {
        margin-top: -78px !important;
        padding-top: 78px !important;
    }
}


/* ===== FINAL FIX: Homepage navbar logo clean fit inside pill ===== */
body.home-page .site-header .brand,
body.home-page.header-scrolled .site-header .brand {
    width: 145px !important;
    min-width: 145px !important;
    height: 72px !important;
    max-height: 72px !important;
    overflow: hidden !important;
}

body.home-page .site-header .brand img,
body.home-page.header-scrolled .site-header .brand img {
    width: 118px !important;
    max-width: 118px !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
    transform: translateX(-4px) scale(1.22) !important;
    transform-origin: left center !important;
}

/* Compact homepage navigation before the desktop links can overflow. */
@media (min-width: 769px) and (max-width: 1100px) {
    body.home-page .site-header .site-nav,
    body.home-page.header-scrolled .site-header .site-nav,
    body.home-page .site-header .nav-cta,
    body.home-page.header-scrolled .site-header .nav-cta {
        display: none !important;
    }

    body.home-page .site-header .nav-toggle,
    body.home-page.header-scrolled .site-header .nav-toggle {
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #c40018 !important;
    }

    body.home-page .site-header .nav-toggle span,
    body.home-page.header-scrolled .site-header .nav-toggle span {
        width: 21px !important;
        height: 2px !important;
        display: block !important;
        background: #ffffff !important;
    }

    .calendly-badge-widget {
        display: none !important;
    }
}

/* Final mobile drawer: viewport anchored and always above the pill header. */
@media (max-width: 1100px) {
    .mobile-menu {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        width: min(360px, 92vw) !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        border: 0 !important;
        border-left: 1px solid rgba(8,13,24,.08) !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        box-shadow: -20px 0 60px rgba(8,13,24,.2) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 30000 !important;
        transform: translate3d(100%, 0, 0) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform .28s ease, visibility .28s ease !important;
    }

    .mobile-menu.is-open {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-menu .mobile-menu-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        width: 100% !important;
        min-height: 72px !important;
        padding: 12px 16px !important;
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(8,13,24,.08) !important;
    }

    .mobile-menu .mobile-menu-header .brand {
        width: 112px !important;
        min-width: 112px !important;
        height: 48px !important;
        overflow: hidden !important;
    }

    .mobile-menu .mobile-menu-header .brand img {
        width: 92px !important;
        max-width: 92px !important;
        height: 44px !important;
        max-height: 44px !important;
        object-fit: contain !important;
        transform: translateX(-5px) scale(1.2) !important;
        transform-origin: left center !important;
    }

    .mobile-menu .mobile-close {
        width: 40px !important;
        height: 40px !important;
        display: inline-flex !important;
        flex: 0 0 40px !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid #e2e5ea !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        color: #080d18 !important;
    }

    .mobile-menu .mobile-nav {
        width: 100% !important;
        padding: 14px 14px 28px !important;
        display: flex !important;
        flex: 1 0 auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .mobile-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 29999 !important;
        background: rgba(8,13,24,.55) !important;
    }
}

@media (max-width: 480px) {
    .mobile-menu {
        width: min(380px, 94vw) !important;
    }
}

/* Homepage footer final match */
html body footer,
html body .footer,
html body .site-footer {
  width: 100% !important;
  background: linear-gradient(135deg, #f1e0e2, #ffffff) !important;
  background-color: #fff4f5 !important;
}

html body footer *,
html body .footer *,
html body .site-footer * {
  background-color: transparent !important;
  background-image: none !important;
}

html body footer h4,
html body footer a,
html body footer p,
html body footer span,
html body .footer h4,
html body .footer a,
html body .footer p,
html body .footer span {
  color: #111827 !important;
  opacity: 1 !important;
}

html body footer .footer-social-btn,
html body footer .footer-social-upwork {
  background: transparent !important;
  color: #111827 !important;
  box-shadow: none !important;
  border: none !important;
}

html body footer .footer-contact-item i,
html body footer .footer-contact-item svg,
html body footer .footer-social-btn i,
html body footer .footer-social-btn svg {
  color: #111827 !important;
  fill: #111827 !important;
  stroke: #111827 !important;
}

/* Homepage footer match with all pages */
html body footer,
html body .footer,
html body .site-footer {
  width: 100% !important;
  background: linear-gradient(135deg, #fff4f5, #ffffff) !important;
  background-color: #fff4f5 !important;
}

html body footer *,
html body .footer *,
html body .site-footer * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body footer h4,
html body footer a,
html body footer p,
html body footer span {
  color: #111827 !important;
  opacity: 1 !important;
}

html body footer .footer-social-btn,
html body footer .footer-social-upwork {
  background: transparent !important;
  color: #111827 !important;
  border: none !important;
  box-shadow: none !important;
}

html body footer .footer-social-btn i,
html body footer .footer-social-btn svg,
html body footer .footer-contact-item i,
html body footer .footer-contact-item svg {
  color: #111827 !important;
  fill: #111827 !important;
  stroke: #111827 !important;
}

/* Hide only navigation UI */
.hp-hero-slider-controls,
.hp-slider-controls,
.hero-slider-controls,
.swiper-button-next,
.swiper-button-prev,
.slick-arrow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide dots only visually, don't affect slider */
.hp-hero-dots,
.hero-dots,
.hp-slider-dots,
.swiper-pagination,
.slick-dots {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide homepage hero slider arrows and dots only */
.hp-hero-control,
.hp-hero-controls,
.hp-hero-slider-controls,
.hp-slider-controls,
.hero-slider-controls,
.hp-hero-dots,
.hp-slider-dots,
.hero-dots,
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination,
.slick-dots,
.slick-arrow,
[class*="arrow"],
[class*="pagination"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Force hide hero carousel controls */
.hp-hero .hp-hero-slider button,
.hp-hero .hp-hero-visual button,
.hp-hero button[aria-label*="Previous"],
.hp-hero button[aria-label*="Next"],
.hp-hero [class*="dot"],
.hp-hero [class*="dots"],
.hp-hero [class*="control"],
.hp-hero [class*="arrow"],
.hp-hero [class*="prev"],
.hp-hero [class*="next"],
.hp-hero [class*="pagination"],
.hero-slider button,
.hero-slider [class*="dot"],
.hero-slider [class*="control"],
.hero-slider [class*="pagination"] {
  display: none !important;
}

/* ===== FINAL HARD FIX: Lock homepage logo position on scroll ===== */
body.home-page .site-header .nav-wrap,
body.home-page.header-scrolled .site-header .nav-wrap,
body.home-page .site-header.header-scrolled .nav-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

/* Logo ko navbar ke left side par lock rakho */
body.home-page .site-header .brand,
body.home-page.header-scrolled .site-header .brand,
body.home-page .site-header.header-scrolled .brand {
    position: absolute !important;
    left: 42px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 5 !important;
}

/* Image ke transform ko scroll state me same rakho */
body.home-page .site-header .brand img,
body.home-page.header-scrolled .site-header .brand img,
body.home-page .site-header.header-scrolled .brand img {
    width: 112px !important;
    max-width: 112px !important;
    height: auto !important;
    max-height: 58px !important;
    object-fit: contain !important;
    display: block !important;
    transform: none !important;
    margin: 0 !important;
}

/* Center nav logo ke absolute hone ke baad bhi center rahe */
body.home-page .site-header .site-nav,
body.home-page.header-scrolled .site-header .site-nav,
body.home-page .site-header.header-scrolled .site-nav {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding-left: 170px !important;
    padding-right: 190px !important;
}

/* CTA right side lock */
body.home-page .site-header .nav-cta,
body.home-page.header-scrolled .site-header .nav-cta,
body.home-page .site-header.header-scrolled .nav-cta {
    position: absolute !important;
    right: 42px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Mobile safe */
@media (max-width: 900px) {
    body.home-page .site-header .brand,
    body.home-page.header-scrolled .site-header .brand,
    body.home-page .site-header.header-scrolled .brand {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 120px !important;
        min-width: 120px !important;
        height: 64px !important;
    }

    body.home-page .site-header .brand img,
    body.home-page.header-scrolled .site-header .brand img,
    body.home-page .site-header.header-scrolled .brand img {
        width: 95px !important;
        max-width: 95px !important;
        max-height: 46px !important;
    }

    body.home-page .site-header .site-nav,
    body.home-page.header-scrolled .site-header .site-nav,
    body.home-page .site-header.header-scrolled .site-nav {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.home-page .site-header .nav-cta,
    body.home-page.header-scrolled .site-header .nav-cta,
    body.home-page .site-header.header-scrolled .nav-cta {
        position: static !important;
        transform: none !important;
    }
}


/* =========================================================
   HOME PAGE ONLY — FINAL NAVBAR + LOGO STABILITY FIX
   Reason: homepage does not load shared-layout.css
========================================================= */

/* Same header position in normal and scrolled state */
html body.home-page header.site-header#siteHeader,
html body.home-page.header-scrolled header.site-header#siteHeader,
html body.home-page header.site-header#siteHeader.header-scrolled {
    position: fixed !important;
    top: 22px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 9999 !important;
}

/* Same pill width/height before and after scroll */
html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
    position: relative !important;
    width: min(100% - 96px, 1280px) !important;
    max-width: 1280px !important;
    min-height: 86px !important;
    height: 86px !important;
    margin: 0 auto !important;
    padding: 0 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(8,13,24,0.08) !important;
    box-shadow: 0 24px 70px rgba(8,13,24,0.10) !important;
    backdrop-filter: blur(16px) !important;
}

/* Logo container locked to pill left — same in both states */
html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
    position: absolute !important;
    left: 44px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;

    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    overflow: visible !important;
    z-index: 5 !important;
}

/* Logo image locked — no scale/translate difference on scroll */
html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;

    height: auto !important;
    max-height: 52px !important;

    object-fit: contain !important;
    object-position: left center !important;

    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    translate: none !important;
    scale: none !important;
}

/* Center nav without affecting logo */
html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
    flex: 0 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    padding-left: 150px !important;
    padding-right: 190px !important;
    margin: 0 auto !important;
}

/* CTA locked to right */
html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
    position: absolute !important;
    right: 44px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    margin: 0 !important;
    min-height: 48px !important;
    padding: 0 30px !important;
    border-radius: 16px !important;
}

/* Since header is fixed, keep homepage content below it */
html body.home-page {
    padding-top: 126px !important;
}

/* Mobile safe */
@media (max-width: 900px) {
    html body.home-page header.site-header#siteHeader,
    html body.home-page.header-scrolled header.site-header#siteHeader,
    html body.home-page header.site-header#siteHeader.header-scrolled {
        top: 12px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: min(100% - 24px, 1280px) !important;
        height: 72px !important;
        min-height: 72px !important;
        padding: 0 18px !important;
        justify-content: space-between !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        position: static !important;
        transform: none !important;
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
        width: 92px !important;
        max-width: 92px !important;
        max-height: 44px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
        display: none !important;
        padding: 0 !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
        position: static !important;
        transform: none !important;
        min-height: 42px !important;
        padding: 0 18px !important;
    }

    html body.home-page {
        padding-top: 96px !important;
    }
}


/* ===== FINAL FIX: Homepage footer social buttons dark blue old effect ===== */
.site-footer .footer-social a,
.site-footer .footer-socials a,
.site-footer .social-links a,
.site-footer .footer-social-links a,
.site-footer a.footer-social-btn,
.site-footer a.footer-social-upwork {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0b1220 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.24) !important;
    text-decoration: none !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
}

.site-footer .footer-social a i,
.site-footer .footer-socials a i,
.site-footer .social-links a i,
.site-footer .footer-social-links a i,
.site-footer a.footer-social-btn i,
.site-footer a.footer-social-upwork i,
.site-footer a.footer-social-upwork span {
    color: #ffffff !important;
}

.site-footer .footer-social a:hover,
.site-footer .footer-socials a:hover,
.site-footer .social-links a:hover,
.site-footer .footer-social-links a:hover,
.site-footer a.footer-social-btn:hover,
.site-footer a.footer-social-upwork:hover {
    background: #111b31 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 36px rgba(0,0,0,0.32) !important;
}


/* ===== FINAL FIX: Footer social hover like live site ===== */

/* Default old dark button look */
.site-footer .footer-social-btn,
.site-footer .footer-social-upwork,
.site-footer a.footer-social-btn,
.site-footer a.footer-social-upwork {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #071120 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;

    text-decoration: none !important;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}

/* Icon color */
.site-footer .footer-social-btn i,
.site-footer .footer-social-upwork i,
.site-footer .footer-social-upwork svg,
.site-footer .footer-social-upwork svg path,
.site-footer .footer-social-btn svg,
.site-footer .footer-social-btn svg path {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* LinkedIn hover blue */
.site-footer .footer-social-btn:hover,
.site-footer a.footer-social-btn:hover {
    background: #0A66C2 !important;
    border-color: #0A66C2 !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 34px rgba(10,102,194,0.36) !important;
}

/* Upwork hover green */
.site-footer .footer-social-upwork:hover,
.site-footer a.footer-social-upwork:hover {
    background: #14A800 !important;
    border-color: #14A800 !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 34px rgba(20,168,0,0.34) !important;
}

/* Keep Upwork SVG visible on hover */
.site-footer .footer-social-upwork:hover svg,
.site-footer .footer-social-upwork:hover svg path,
.site-footer .footer-social-btn:hover svg,
.site-footer .footer-social-btn:hover svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}


/* ===== FINAL FIX: Dark footer theme with white text ===== */
html body .site-footer {
    background: #071120 !important;
    background-color: #071120 !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

html body .site-footer *,
html body .site-footer p,
html body .site-footer h1,
html body .site-footer h2,
html body .site-footer h3,
html body .site-footer h4,
html body .site-footer span,
html body .site-footer small,
html body .site-footer li,
html body .site-footer a {
    color: #ffffff !important;
}

html body .site-footer .footer-tagline,
html body .site-footer .footer-brand p,
html body .site-footer .footer-contact-col p,
html body .site-footer .footer-bottom,
html body .site-footer .footer-bottom * {
    color: rgba(255,255,255,0.78) !important;
}

html body .site-footer .footer-nav-col h4,
html body .site-footer .footer-contact-col h4 {
    color: #ffffff !important;
    letter-spacing: 0.16em !important;
}

html body .site-footer .footer-nav-col a:hover,
html body .site-footer .footer-bottom a:hover {
    color: #ffffff !important;
    opacity: 0.78 !important;
}

html body .site-footer .footer-inner,
html body .site-footer .footer-bottom {
    border-color: rgba(255,255,255,0.10) !important;
}

/* Keep LinkedIn / Upwork hover effect same */
html body .site-footer .footer-social-btn,
html body .site-footer .footer-social-upwork {
    background: #0b1220 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
}

html body .site-footer .footer-social-btn:hover {
    background: #0A66C2 !important;
    border-color: #0A66C2 !important;
    color: #ffffff !important;
}

html body .site-footer .footer-social-upwork:hover {
    background: #14A800 !important;
    border-color: #14A800 !important;
    color: #ffffff !important;
}

html body .site-footer .footer-social-btn svg,
html body .site-footer .footer-social-btn svg path,
html body .site-footer .footer-social-upwork svg,
html body .site-footer .footer-social-upwork svg path {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}


/* =========================================================
   HOME PAGE HEADER FINAL WIDTH + CONTENT ALIGNMENT FIX
========================================================= */

html body.home-page header.site-header#siteHeader,
html body.home-page.header-scrolled header.site-header#siteHeader,
html body.home-page header.site-header#siteHeader.header-scrolled {
    position: fixed !important;
    top: 22px !important;
    left: 50% !important;
    right: auto !important;
    width: 100% !important;
    transform: translateX(-50%) !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 9999 !important;
}

/* Increase pill width and keep it centered */
html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
    width: min(100% - 56px, 1540px) !important;
    max-width: 1540px !important;
    height: 86px !important;
    min-height: 86px !important;

    margin: 0 auto !important;
    padding: 0 54px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(8,13,24,0.08) !important;
    box-shadow: 0 24px 70px rgba(8,13,24,0.10) !important;
}

/* Logo fixed left inside wider pill */
html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
    position: absolute !important;
    left: 54px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;

    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Logo image same on scroll and normal */
html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
    width: 108px !important;
    max-width: 108px !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
    transform: none !important;
    margin: 0 !important;
}

/* Shift nav content a little right and keep spacing clean */
html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 22px !important;
    margin-left: 115px !important;
    margin-right: -100px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* CTA locked right inside wider pill */
html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
    position: absolute !important;
    right: 54px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    min-height: 48px !important;
    padding: 0 34px !important;
    margin: 0 !important;
}

/* Mobile safe */
@media (max-width: 900px) {
    html body.home-page header.site-header#siteHeader,
    html body.home-page.header-scrolled header.site-header#siteHeader,
    html body.home-page header.site-header#siteHeader.header-scrolled {
        top: 12px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: min(100% - 24px, 1540px) !important;
        height: 72px !important;
        min-height: 72px !important;
        padding: 0 18px !important;
        justify-content: space-between !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        position: static !important;
        transform: none !important;
        width: 118px !important;
        min-width: 118px !important;
        height: 58px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
        width: 92px !important;
        max-width: 92px !important;
        max-height: 44px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
        display: none !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
        position: static !important;
        transform: none !important;
        min-height: 42px !important;
        padding: 0 18px !important;
    }
}


/* =========================================================
   HOME PAGE HEADER — ALIGN WITH HERO CONTENT + IMAGE WIDTH
========================================================= */

html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
    width: min(1450px, calc(100% - 192px)) !important;
    max-width: 1450px !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 auto !important;
    padding: 0 clamp(28px, 3.6vw, 58px) !important;
}

/* Logo left edge align better with hero left content */
html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
    position: static !important;
    transform: none !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
}

/* Keep logo size stable */
html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
    width: 112px !important;
    max-width: 112px !important;
    max-height: 112px !important;
}

/* Shift nav content slightly right so it does not feel left-heavy */
html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    gap: clamp(2px, 0.8vw, 10px) !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
}

/* CTA align to wider right edge */
html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
    position: static !important;
    transform: none !important;
    margin-left: clamp(10px, 1.2vw, 18px) !important;
}

/* Slightly reduce top whitespace between header and hero */
html body.home-page {
    padding-top: 118px !important;
}

@media (max-width: 1180px) {
    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: calc(100% - 88px) !important;
        max-width: none !important;
        height: 78px !important;
        min-height: 78px !important;
        padding: 0 28px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
        width: 96px !important;
        max-width: 96px !important;
    }
}

@media (max-width: 900px) {
    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: min(100% - 24px, 1660px) !important;
        padding: 0 18px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        left: auto !important;
        width: 118px !important;
        min-width: 118px !important;
        max-width: 118px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
        margin: 0 !important;
        gap: 0 !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
        right: auto !important;
    }
}

/* =========================================================
   TRUE FINAL: HOMEPAGE HEADER + HERO RESPONSIVE ALIGNMENT
========================================================= */

:root {
    --hp-page-gutter: clamp(20px, 5.2vw, 96px);
    --hp-shell-max: 1450px;
}

html body.home-page,
html body.home-page.header-scrolled {
    padding-top: 108px !important;
}

html body.home-page header.site-header#siteHeader,
html body.home-page.header-scrolled header.site-header#siteHeader,
html body.home-page header.site-header#siteHeader.header-scrolled {
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap,
html body.home-page .hp-hero-inner {
    width: min(1450px, calc(100% - 192px)) !important;
    max-width: var(--hp-shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
    height: 88px !important;
    min-height: 88px !important;
    padding: 0 clamp(28px, 3.6vw, 58px) !important;
    justify-content: space-between !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
    position: static !important;
    transform: none !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
    width: 112px !important;
    max-width: 112px !important;
    max-height: 96px !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    gap: clamp(2px, 0.8vw, 10px) !important;
}

html body.home-page .site-header .nav-link,
html body.home-page.header-scrolled .site-header .nav-link {
    height: 88px !important;
    padding: 0 clamp(7px, 0.72vw, 12px) !important;
    font-size: clamp(12px, 0.82vw, 13.5px) !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 clamp(18px, 1.7vw, 30px) !important;
    margin-left: clamp(10px, 1.2vw, 18px) !important;
    border-radius: 16px !important;
}

html body.home-page .hp-hero-inner {
    grid-template-columns: minmax(390px, 500px) minmax(0, 1fr) !important;
    min-height: clamp(560px, 36vw, 620px) !important;
}

html body.home-page .hp-hero-content {
    padding: clamp(72px, 6vw, 96px) 0 clamp(54px, 5vw, 70px) !important;
}

html body.home-page .hp-hero-h1 {
    font-size: clamp(40px, 3.2vw, 50px) !important;
}

html body.home-page .hp-hero-img-wrap {
    right: calc(var(--hp-page-gutter) * -1) !important;
}

html body.home-page .hp-container {
    width: min(1200px, calc(100% - 192px)) !important;
}

@media (max-width: 1180px) {
    :root {
        --hp-page-gutter: clamp(18px, 3.8vw, 44px);
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        height: 78px !important;
        min-height: 78px !important;
        padding: 0 28px !important;
    }

    html body.home-page .site-header .nav-link,
    html body.home-page.header-scrolled .site-header .nav-link {
        height: 78px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
        width: 96px !important;
        max-width: 96px !important;
    }
}

@media (max-width: 980px) {
    html body.home-page,
    html body.home-page.header-scrolled {
        padding-top: 92px !important;
    }

    html body.home-page header.site-header#siteHeader,
    html body.home-page.header-scrolled header.site-header#siteHeader,
    html body.home-page header.site-header#siteHeader.header-scrolled {
        top: 10px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        height: 68px !important;
        min-height: 68px !important;
        padding: 0 18px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-cta,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-cta {
        display: none !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-toggle,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-toggle,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-toggle {
        display: flex !important;
        margin-left: auto !important;
    }

    html body.home-page .hp-hero-inner {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    html body.home-page .hp-hero-content {
        padding: 44px 0 34px !important;
    }

    html body.home-page .hp-hero-content::after {
        display: none !important;
    }

    html body.home-page .hp-hero-visual,
    html body.home-page .hp-hero-img-wrap {
        height: clamp(320px, 48vw, 440px) !important;
    }

    html body.home-page .hp-hero-img-wrap {
        position: relative !important;
        right: auto !important;
    }
}

@media (max-width: 640px) {
    :root {
        --hp-page-gutter: 16px;
    }

    html body.home-page,
    html body.home-page.header-scrolled {
        padding-top: 82px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: calc(100% - 20px) !important;
        height: 62px !important;
        min-height: 62px !important;
        padding: 0 14px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand img,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand img {
        width: 84px !important;
        max-width: 84px !important;
        max-height: 42px !important;
    }

    html body.home-page .hp-hero-inner,
    html body.home-page .hp-container {
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }

    html body.home-page .hp-hero-content {
        padding: 34px 0 28px !important;
    }

    html body.home-page .hp-hero-h1 {
        font-size: clamp(30px, 9vw, 38px) !important;
        line-height: 1.12 !important;
    }

    html body.home-page .hp-hero-h1 br {
        display: none !important;
    }

    html body.home-page .hp-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    html body.home-page .hp-btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.home-page .hp-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-top: 30px !important;
    }

    html body.home-page .hp-stat span {
        font-size: 11px !important;
    }

    html body.home-page .hp-chip {
        left: 14px !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
    }

    html body.home-page .chip-a {
        bottom: 76px !important;
    }

    html body.home-page .chip-b {
        bottom: 28px !important;
    }
}

@media (max-width: 430px) {
    html body.home-page .hp-stats {
        grid-template-columns: 1fr !important;
    }

    html body.home-page .hp-stat {
        padding: 10px 0 !important;
        border-bottom: 1px solid #edf0f4 !important;
    }

    html body.home-page .hp-stat:last-child {
        border-bottom: 0 !important;
    }
}

/* =========================================================
   HEADER WIDTH REPAIR — final cascade position
========================================================= */

html body.home-page header.site-header#siteHeader,
html body.home-page.header-scrolled header.site-header#siteHeader,
html body.home-page header.site-header#siteHeader.header-scrolled {
    position: fixed !important;
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    transform: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
    width: min(1680px, calc(100% - 176px)) !important;
    max-width: 1680px !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 auto !important;
    padding: 0 62px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
    position: absolute !important;
    left: 62px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav > .nav-cta,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav > .nav-cta,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav > .nav-cta {
    position: static !important;
    transform: none !important;
    margin: 0 0 0 18px !important;
}

@media (max-width: 1180px) {
    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: calc(100% - 44px) !important;
        max-width: none !important;
        height: 74px !important;
        min-height: 74px !important;
        padding: 0 22px !important;
    }
}

@media (max-width: 980px) {
    html body.home-page header.site-header#siteHeader > .nav-wrap,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
        width: calc(100% - 24px) !important;
        height: 68px !important;
        min-height: 68px !important;
        padding: 0 18px !important;
        justify-content: space-between !important;
    }

    html body.home-page header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .brand,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .brand {
        position: static !important;
        transform: none !important;
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
    }

    html body.home-page .site-header .site-nav,
    html body.home-page.header-scrolled .site-header .site-nav,
    html body.home-page .site-header.header-scrolled .site-nav,
    html body.home-page header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .site-nav,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .site-nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html body.home-page .site-header .nav-toggle,
    html body.home-page.header-scrolled .site-header .nav-toggle,
    html body.home-page .site-header.header-scrolled .nav-toggle,
    html body.home-page header.site-header#siteHeader > .nav-wrap > .nav-toggle,
    html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap > .nav-toggle,
    html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap > .nav-toggle {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        margin-left: auto !important;
        z-index: 20 !important;
    }
}

/* ===== HOME HEADER: increase navbar width by 10px only ===== */
html body.home-page header.site-header#siteHeader > .nav-wrap,
html body.home-page.header-scrolled header.site-header#siteHeader > .nav-wrap,
html body.home-page header.site-header#siteHeader.header-scrolled > .nav-wrap {
    width: min(100% - 38px, 1690px) !important;
    max-width: 1690px !important;
}

/* Reserve the fixed header's space on inner pages only. */
html body.inner-page { padding-top: 108px !important; }

html body.inner-page header.site-header#siteHeader {
    position: fixed !important;
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    transform: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body.inner-page header.site-header#siteHeader > .nav-wrap {
    width: min(1680px, calc(100% - 176px)) !important;
    max-width: 1680px !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 auto !important;
    padding: 0 62px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

html body.inner-page header.site-header#siteHeader > .nav-wrap > .brand {
    position: absolute !important;
    left: 62px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

html body.inner-page header.site-header#siteHeader > .nav-wrap > .brand img {
    width: 112px !important;
    max-width: 98px !important;
    height: auto !important;
    max-height: 112px !important;
    object-fit: contain !important;
    transform: none !important;
}

html body.inner-page header.site-header#siteHeader > .nav-wrap > .site-nav {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.inner-page header.site-header#siteHeader > .nav-wrap > .site-nav > .nav-cta {
    position: static !important;
    transform: none !important;
    margin: 0 0 0 18px !important;
}

/* =========================================================
   FINAL FIX: Homepage hero uses product/site screenshots
========================================================= */

html body.home-page .hero-slider,
html body.home-page .hero-visual .hero-slider {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #071120 !important;
}

/* Make screenshots look like product previews, not boring photos */
html body.home-page .hero-slide,
html body.home-page .hp-hero-slide,
html body.home-page .hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center top !important;

    opacity: 0 !important;
    transform: scale(1.02) translateX(26px) !important;
    transition: opacity 0.9s ease, transform 1.2s ease !important;

    filter: saturate(1.08) contrast(1.02) brightness(0.92) !important;
}

html body.home-page .hero-slide.is-active,
html body.home-page .hp-hero-slide.is-active {
    opacity: 1 !important;
    transform: scale(1.04) translateX(30px) !important;
}

/* Keep left fade so text remains readable */
html body.home-page .hero-visual::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 52% !important;
    z-index: 4 !important;
    pointer-events: none !important;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255,255,255,0.96) 18%,
        rgba(255,255,255,0.72) 42%,
        rgba(255,255,255,0.24) 72%,
        transparent 100%
    ) !important;
}

/* Dark right overlay for premium product screenshot feel */
html body.home-page .hero-visual::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, transparent 0%, rgba(7,17,32,0.10) 42%, rgba(7,17,32,0.52) 100%),
        radial-gradient(circle at 78% 20%, rgba(196,0,24,0.12), transparent 34%) !important;
}

/* Keep floating badges above screenshot */
html body.home-page .hero-float-card,
html body.home-page .hero-slider-indicator,
html body.home-page .hero-carousel-controls {
    z-index: 8 !important;
}

/* Mobile: screenshots should not crop badly */
@media (max-width: 900px) {
    html body.home-page .hero-slide,
    html body.home-page .hp-hero-slide,
    html body.home-page .hero-image {
        object-position: center top !important;
        transform: scale(1.02) translateX(0) !important;
    }

    html body.home-page .hero-slide.is-active,
    html body.home-page .hp-hero-slide.is-active {
        transform: scale(1.03) translateX(0) !important;
    }

    html body.home-page .hero-visual::before {
        width: 100% !important;
        background: linear-gradient(
            180deg,
            rgba(255,255,255,0.92) 0%,
            rgba(255,255,255,0.56) 44%,
            rgba(255,255,255,0.12) 100%
        ) !important;
    }
}


/* ===== FINAL FIX: Homepage hp hero slider screenshots ===== */
html body.home-page .hp-hero-slider {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #071120 !important;
}

html body.home-page .hp-hero-slider .hp-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center top !important;

    opacity: 0 !important;
    transform: scale(1.02) translateX(24px) !important;
    transition: opacity 0.85s ease, transform 1.1s ease !important;

    filter: saturate(1.08) contrast(1.04) brightness(0.94) !important;
}

html body.home-page .hp-hero-slider .hp-hero-slide.is-active {
    opacity: 1 !important;
    transform: scale(1.04) translateX(30px) !important;
}


/* ===== FINAL FIX: Homepage hero screenshots same size + 2px radius ===== */
html body.home-page .hero-visual,
html body.home-page .hp-hero-slider {
    overflow: hidden !important;
    border-radius: 2px !important;
}

html body.home-page .hp-hero-slider .hp-hero-slide {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;

    object-fit: cover !important;
    object-position: center top !important;

    border-radius: 2px !important;
    overflow: hidden !important;
}

/* Keep all screenshots inside one fixed visual frame */
html body.home-page .hero-visual {
    height: 100% !important;
    min-height: 620px !important;
}

/* Prevent odd screenshot stretching */
html body.home-page .hp-hero-slider img {
    display: block !important;
}

/* Desktop: slightly better crop for website screenshots */
@media (min-width: 901px) {
    html body.home-page .hp-hero-slider .hp-hero-slide {
        object-fit: cover !important;
        object-position: center top !important;
        transform: scale(1.03) translateX(22px) !important;
    }

    html body.home-page .hp-hero-slider .hp-hero-slide.is-active {
        transform: scale(1.05) translateX(28px) !important;
    }
}

/* Mobile: keep screenshots readable */
@media (max-width: 900px) {
    html body.home-page .hero-visual {
        min-height: 360px !important;
        border-radius: 2px !important;
    }

    html body.home-page .hp-hero-slider .hp-hero-slide {
        object-fit: cover !important;
        object-position: center top !important;
        border-radius: 2px !important;
        transform: scale(1.02) translateX(0) !important;
    }

    html body.home-page .hp-hero-slider .hp-hero-slide.is-active {
        transform: scale(1.03) translateX(0) !important;
    }
}


/* =========================================================
   FINAL GLOBAL HEADER FIX
   One identical homepage-style navbar across every page
   ========================================================= */

header.site-header#siteHeader {
    width: min(calc(100% - 96px), 1680px) !important;
    max-width: 1680px !important;
    height: 88px !important;

    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    margin: 20px 0 0 !important;
    padding: 0 !important;

    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 999px !important;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.08),
        0 8px 24px rgba(196, 0, 24, 0.04) !important;

    z-index: 1000 !important;
}


/* Main navbar inner wrapper */
header.site-header#siteHeader > .nav-wrap {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) 190px !important;
    align-items: center !important;

    padding: 0 38px !important;
    margin: 0 !important;

    box-sizing: border-box !important;
}


/* Brand / logo area */
header.site-header#siteHeader .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Exact visible logo sizing */
header.site-header#siteHeader .brand img {
    display: block !important;

    width: 105px !important;
    max-width: 105px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
}


/* Main desktop navigation */
header.site-header#siteHeader .site-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 34px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 34px 0 0 !important;
}


/* Navigation items */
header.site-header#siteHeader .site-nav > .nav-item,
header.site-header#siteHeader .site-nav > a {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 0 !important;
}


/* Navigation links */
header.site-header#siteHeader .site-nav > .nav-item > .nav-link,
header.site-header#siteHeader .site-nav > .nav-cta {
    display: inline-flex !important;
    align-items: center !important;
    height: 52px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    color: #111827 !important;
    text-decoration: none !important;

    white-space: nowrap !important;
}

/* Dropdown links must remain a vertical menu, not inherit desktop nav flex sizing. */
header.site-header#siteHeader .dropdown a {
    display: block !important;
    height: auto !important;
    line-height: 1.3 !important;
}


/* CTA column */
header.site-header#siteHeader .nav-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Start a Project button */
header.site-header#siteHeader .nav-cta a,
header.site-header#siteHeader .nav-cta .btn,
header.site-header#siteHeader a.nav-cta {
    min-width: 160px !important;
    height: 52px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 28px !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #8f1020 !important;
    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    box-shadow: 0 12px 28px rgba(143, 16, 32, 0.18) !important;
}

header.site-header#siteHeader a.nav-cta,
header.site-header#siteHeader a.nav-cta:visited,
header.site-header#siteHeader a.nav-cta:hover,
header.site-header#siteHeader a.nav-cta:focus,
header.site-header#siteHeader a.nav-cta * { color: #ffffff !important; }


/* Prevent inner-page header variants from changing dimensions */
body.inner-page header.site-header#siteHeader,
body.home-page header.site-header#siteHeader,
body.inner-page-sticky-header header.site-header#siteHeader {
    width: min(calc(100% - 96px), 1680px) !important;
    max-width: 1680px !important;
    height: 88px !important;

    left: 50% !important;
    transform: translateX(-50%) !important;

    border-radius: 999px !important;
}


/* Ensure identical wrapper behavior everywhere */
body.inner-page header.site-header#siteHeader > .nav-wrap,
body.home-page header.site-header#siteHeader > .nav-wrap,
body.inner-page-sticky-header header.site-header#siteHeader > .nav-wrap {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) 190px !important;
    align-items: center !important;

    padding: 0 38px !important;
}


/* Dropdowns remain positioned under their own nav item */
header.site-header#siteHeader .nav-item.has-dropdown {
    position: relative !important;
}

header.site-header#siteHeader .dropdown {
    top: calc(100% + 2px) !important;
}


/* Tablet */
@media (max-width: 1180px) {
    header.site-header#siteHeader {
        width: calc(100% - 40px) !important;
        height: 80px !important;
    }

    header.site-header#siteHeader > .nav-wrap {
        grid-template-columns: 160px minmax(0, 1fr) 170px !important;
        padding: 0 24px !important;
    }

    header.site-header#siteHeader .brand img {
        width: 92px !important;
        max-width: 92px !important;
    }

    header.site-header#siteHeader .site-nav {
        gap: 22px !important;
        padding-right: 22px !important;
    }

    header.site-header#siteHeader .site-nav a,
    header.site-header#siteHeader .nav-link {
        font-size: 14px !important;
    }
}


/* Mobile */
@media (max-width: 900px) {
    header.site-header#siteHeader {
        width: calc(100% - 28px) !important;
        height: 72px !important;
        margin-top: 14px !important;
    }

    header.site-header#siteHeader > .nav-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        padding: 0 20px !important;
    }

    header.site-header#siteHeader .brand img {
        width: 88px !important;
        max-width: 88px !important;
    }

    header.site-header#siteHeader .site-nav {
        display: none !important;
    }

    header.site-header#siteHeader .nav-cta {
        display: none !important;
    }
}


/* Small mobile */
@media (max-width: 520px) {
    header.site-header#siteHeader {
        width: calc(100% - 20px) !important;
        height: 66px !important;
    }

    header.site-header#siteHeader > .nav-wrap {
        padding: 0 16px !important;
    }

    header.site-header#siteHeader .brand img {
        width: 80px !important;
        max-width: 80px !important;
    }
}



/* =========================================================
   FINAL HEADER CONTENT ALIGNMENT FIX
   IMPORTANT:
   - Does NOT change header outer width
   - Does NOT change header outer height
   - Only aligns logo, navigation and CTA like homepage
   ========================================================= */

/* Keep the existing outer header dimensions untouched */
header.site-header#siteHeader > .nav-wrap {
    width: 100% !important;
    height: 100% !important;

    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) auto !important;
    align-items: center !important;

    padding-left: 38px !important;
    padding-right: 38px !important;

    margin: 0 !important;
    box-sizing: border-box !important;
}


/* Logo stays properly aligned on the left */
header.site-header#siteHeader .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;
}


/*
   IMPORTANT:
   Do not force a new logo width here.
   Preserve the current correct logo size.
*/
header.site-header#siteHeader .brand img {
    display: block !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
}


/* Move navigation to the same visual position as homepage */
header.site-header#siteHeader .site-nav {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 32px !important;

    margin: 0 !important;
    padding: 0 32px 0 0 !important;
}


/* Prevent individual menu items from stretching */
header.site-header#siteHeader .site-nav > .nav-item,
header.site-header#siteHeader .site-nav > a {
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Keep menu text balanced like homepage */
header.site-header#siteHeader .site-nav a,
header.site-header#siteHeader .nav-link {
    white-space: nowrap !important;

    margin: 0 !important;

    font-weight: 500 !important;
}


/* Keep CTA in its own right-side column */
header.site-header#siteHeader .nav-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    flex-shrink: 0 !important;
}


/* Keep Start a Project button properly pill-shaped */
header.site-header#siteHeader .nav-cta a,
header.site-header#siteHeader .nav-cta .btn,
header.site-header#siteHeader a.nav-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;

    border-radius: 999px !important;

    margin: 0 !important;
}


/* Inner pages must use the same INTERNAL layout as homepage */
body.home-page header.site-header#siteHeader > .nav-wrap,
body.inner-page header.site-header#siteHeader > .nav-wrap,
body.inner-page-sticky-header header.site-header#siteHeader > .nav-wrap {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) auto !important;
    align-items: center !important;

    padding-left: 38px !important;
    padding-right: 38px !important;
}


/* Same menu alignment everywhere */
body.home-page header.site-header#siteHeader .site-nav,
body.inner-page header.site-header#siteHeader .site-nav,
body.inner-page-sticky-header header.site-header#siteHeader .site-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 32px !important;

    margin: 0 !important;
    padding: 0 32px 0 0 !important;
}

/* Keep the header CTA readable after the general navigation-link color rule. */
header.site-header#siteHeader .site-nav > a.nav-cta,
header.site-header#siteHeader .site-nav > a.nav-cta:visited,
header.site-header#siteHeader .site-nav > a.nav-cta:hover,
header.site-header#siteHeader .site-nav > a.nav-cta:focus,
header.site-header#siteHeader .site-nav > a.nav-cta * { color: #ffffff !important; }

html body .site-footer .footer-contact-item svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}


/* Medium screens */
@media (max-width: 1180px) {
    header.site-header#siteHeader > .nav-wrap,
    body.home-page header.site-header#siteHeader > .nav-wrap,
    body.inner-page header.site-header#siteHeader > .nav-wrap,
    body.inner-page-sticky-header header.site-header#siteHeader > .nav-wrap {
        grid-template-columns: 150px minmax(0, 1fr) auto !important;

        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    header.site-header#siteHeader .site-nav {
        gap: 22px !important;
        padding-right: 22px !important;
    }
}


/* Mobile: preserve existing mobile menu behavior */
@media (max-width: 900px) {
    header.site-header#siteHeader > .nav-wrap,
    body.home-page header.site-header#siteHeader > .nav-wrap,
    body.inner-page header.site-header#siteHeader > .nav-wrap,
    body.inner-page-sticky-header header.site-header#siteHeader > .nav-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}