/* ==============================================================
   INNOSOL — Homepage
   Loaded only by index.php (see header.php). Shared tokens, buttons,
   header and footer live in styles.css; section scaffolding and the
   services block live in services-block.css.
   ============================================================== */

/* --hero-bg matches the indigo built into the left edge of the hero photo */
.page-home { background: #fff; --hero-bg: #261C6D; }

/* -------------------- Section scaffolding -------------------- */
.page-home ol { list-style: none; }
.hp-head--split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    gap: 12px 64px;
    text-align: left;
}
.hp-head--split h2 { margin-bottom: 0; }
/* Label on its own row; heading and intro share the next row, centred on each other. */
.hp-head--split { align-items: center; }
.hp-head--split > div { display: contents; }
.hp-head--split .hp-eyebrow { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 0; }
.hp-head--split h2 { grid-column: 1; grid-row: 2; }
.hp-head--split > p { grid-column: 2; grid-row: 2; }


.hp-center { margin-top: 40px; text-align: center; }

.hp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hp-solution:hover .hp-arrow { transform: translateX(3px); }


/* Dark surfaces use an orange focus ring */
.hp-hero :focus-visible,
.hp-why :focus-visible,
.hp-final :focus-visible { outline-color: var(--brand-orange); }

/* -------------------- 1. Hero -------------------- */
.hp-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--nav-height) + 40px) 0 32px;
    background: var(--hero-bg);
    color: #fff;
    overflow: hidden;
}
/* Full-bleed photo behind the copy. The overlay is strongest behind the
   text column and light over the people, so the image stays visible. */
.hp-hero-media { position: absolute; inset: 0; z-index: -2; }
.hp-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.hp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(23,21,74,0.72) 0%, rgba(23,21,74,0.55) 38%, rgba(23,21,74,0.2) 62%, rgba(23,21,74,0.08) 100%),
        linear-gradient(180deg, rgba(23,21,74,0.45) 0%, rgba(23,21,74,0) 22%, rgba(23,21,74,0) 62%, rgba(23,21,74,0.7) 100%);
}
.hp-hero-inner { flex: 1; display: flex; align-items: center; }
.hp-hero-content { max-width: 620px; padding-bottom: 36px; }
.hp-hero h1, .hp-hero-lead { text-shadow: 0 2px 18px rgba(11,10,40,0.45); }
.hp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.22);
    font-size: 0.725rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
}
.hp-hero-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-orange); flex-shrink: 0; }
.hp-hero h1 {
    margin-bottom: 20px;
    font-size: calc(clamp(2.1rem, 1.2rem + 2.6vw, 3.3rem) - 2px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}
.hp-hero h1 span { display: block; color: var(--brand-orange); }
.hp-hero-lead {
    max-width: 580px;
    margin-bottom: 30px;
    font-size: calc(clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem) - 2px);
    line-height: 1.7;
    color: rgba(255,255,255,0.9);
}

.hp-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.hp-proof li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 0.825rem; font-weight: 500; line-height: 1.35; color: #fff; }
.hp-proof svg { flex-shrink: 0; color: var(--brand-orange); }

/* -------------------- 2. Trust strip -------------------- */
.hp-trust { padding: 56px 0; background: #fff; }
.hp-trust-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
    gap: 32px 56px;
    align-items: start;
}
.hp-trust h2 { margin-bottom: 10px; font-size: calc(clamp(1.3rem, 1rem + 1vw, 1.7rem) - 2px); text-wrap: balance; }
.hp-trust-intro > p { font-size: 0.855rem; line-height: 1.65; }
.hp-trust-label {
    margin: 22px 0 10px;
    font-family: var(--font-display);
    font-size: 0.675rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-2);
}
.hp-trust-clients .hp-trust-label { margin-top: 4px; }
.hp-partner-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-partner-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(44,48,147,0.06);
    border: 1px solid rgba(44,48,147,0.14);
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--brand-indigo);
    transition: background-color var(--dur) ease, color var(--dur) ease;
}
.hp-partner-chips a:hover { background: var(--brand-indigo); color: #fff; }
.hp-client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 116px), 1fr)); gap: 10px; }
.hp-client-grid li {
    display: grid;
    place-items: center;
    height: 84px;
    padding: 12px 14px;
    border: 1px solid rgba(11,18,32,0.08);
    border-radius: 12px;
    background: #fff;
}
.hp-client-grid img { width: auto; height: auto; max-width: 100%; max-height: 50px; object-fit: contain; }

/* -------------------- 4. Selected work -------------------- */
.hp-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hp-work {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(11,18,32,0.09);
    border-radius: 20px;
    transition: box-shadow var(--dur) ease, border-color var(--dur) ease;
}
.hp-work:hover { box-shadow: 0 20px 44px rgba(44,48,147,0.1); border-color: rgba(44,48,147,0.18); }
.hp-work-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-soft);
    border-bottom: 1px solid rgba(11,18,32,0.06);
}
.hp-work-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.3s ease; }
.hp-work:hover .hp-work-media img { transform: scale(1.03); }
.hp-work-body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 16px; }
.hp-tag {
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(249,157,42,0.14);
    font-size: 0.675rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #8A4A05;
}
.hp-work h3 { margin-bottom: 14px; font-size: 1.075rem; }
.hp-work-facts { display: grid; gap: 10px; margin-bottom: 14px; }
.hp-work-facts dt {
    font-family: var(--font-display);
    font-size: 0.635rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-indigo);
}
.hp-work-facts dd { font-size: 0.815rem; line-height: 1.55; color: var(--text-2); }
.hp-work .hp-link { margin-top: auto; }

/* -------------------- 5. Why Innosol -------------------- */
.hp-why {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(249,157,42,0.16), transparent 50%),
        linear-gradient(135deg, var(--brand-indigo) 0%, var(--brand-indigo-deep) 100%);
}
.hp-why .hp-eyebrow,
.hp-why h2 { color: #fff; }
/* Five points as 3 + 2 so cards stay wide and short; both rows fill the width. */
.hp-why-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.hp-why-grid li { grid-column: span 2; }
.hp-why-grid li:nth-child(n+4) { grid-column: span 3; }
.hp-why-grid li {
    padding: 28px 24px;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
}
.hp-num {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: 0.825rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand-orange);
}
.hp-num::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.18); }
.hp-why h3 { margin-bottom: 10px; font-size: 0.975rem; line-height: 1.35; color: #fff; }
.hp-why p { font-size: 0.835rem; line-height: 1.65; color: rgba(255,255,255,0.85); }

/* -------------------- 6. Engagement process -------------------- */
.hp-process { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.hp-process::before {
    content: "";
    position: absolute;
    top: 27px; left: 12.5%; right: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(44,48,147,0.35) 0 8px, transparent 8px 14px);
}
.hp-process li { position: relative; padding: 0 8px; text-align: center; }
.hp-step {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand-indigo);
    box-shadow: 0 0 0 8px #fff;
    font-family: var(--font-display);
    font-size: 1.025rem;
    font-weight: 700;
    color: var(--brand-indigo);
    transition: background-color var(--dur) ease, color var(--dur) ease;
}
.hp-process li:hover .hp-step { background: var(--brand-indigo); color: #fff; }
.hp-process h3 { margin-bottom: 8px; font-size: 1.025rem; }
.hp-process p { max-width: 260px; margin: 0 auto; font-size: 0.835rem; line-height: 1.6; }

/* -------------------- 7. Business solutions -------------------- */
.hp-solution-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hp-solution {
    display: flex;
    flex-direction: column;
    padding: 24px 24px 16px;
    background: #fff;
    border: 1px solid rgba(11,18,32,0.08);
    border-radius: 18px;
    transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease;
}
.hp-solution:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(44,48,147,0.12); border-color: rgba(44,48,147,0.18); }
.hp-solution-logo { display: flex; align-items: center; height: 60px; margin-bottom: 18px; }
.hp-solution-logo img { width: auto; height: auto; max-width: 150px; max-height: 48px; object-fit: contain; }
.hp-solution h3 { margin-bottom: 8px; font-size: 0.995rem; }
.hp-solution p { margin-bottom: 14px; font-size: 0.825rem; line-height: 1.6; }
.hp-solution .hp-link { margin-top: auto; }
.hp-solution:hover .hp-link { text-decoration: underline; text-underline-offset: 4px; }

/* -------------------- 8. Industries -------------------- */
.hp-industries { padding: 72px 0; }
.hp-industries-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 28px 64px;
}
.hp-industries h2 { margin-bottom: 12px; font-size: calc(clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem) - 2px); text-wrap: balance; }
.hp-industries-inner > div > p:last-child { font-size: 0.895rem; line-height: 1.7; }
.hp-industry-list { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-industry-list li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid rgba(44,48,147,0.12);
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--ink-900);
}
.hp-industry-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-orange); }

/* -------------------- 9. Final CTA -------------------- */
.hp-final { padding: 0 0 88px; background: #fff; }
.hp-final-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 48px;
    padding: 56px;
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(249,157,42,0.25), transparent 50%),
        linear-gradient(135deg, var(--brand-indigo) 0%, var(--brand-indigo-deep) 100%);
}
.hp-final-inner > div:first-child { flex: 1 1 420px; }
.hp-final h2 { margin-bottom: 10px; font-size: calc(clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem) - 2px); color: #fff; }
.hp-final p { max-width: 560px; font-size: 0.915rem; line-height: 1.7; color: rgba(255,255,255,0.88); }

/* -------------------- Responsive -------------------- */
@media (max-width: 1100px) {
    .hp-solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-work-grid { grid-template-columns: minmax(0, 1fr); }
    .hp-work { flex-direction: row; }
    .hp-work-media { flex: 0 0 42%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid rgba(11,18,32,0.06); }
}

@media (max-width: 960px) {
    .hp-trust-inner,
    .hp-industries-inner { grid-template-columns: minmax(0, 1fr); }
    .hp-head--split { grid-template-columns: minmax(0, 1fr); }
    .hp-head--split > p { grid-column: 1; grid-row: 3; }
    .hp-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below 900px a full-height photo would zoom in on a single face. Instead
   the photo sits under the header, framed so all three people are visible
   and centred, then fades into the indigo behind the headline. Only the
   plain indigo strip on the photo's left is cropped. */
@media (max-width: 900px) {
    .hp-hero { min-height: 0; justify-content: flex-start; padding: var(--nav-height) 0 24px; }
    .hp-hero::before { display: none; }
    .hp-hero-media {
        position: relative;
        inset: auto;
        z-index: 0;
        width: 100%;
        aspect-ratio: 5 / 4;
        max-height: 70svh;
        -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
    }
    .hp-hero-media img { object-position: 71% 30%; }
    .hp-hero-inner { position: relative; z-index: 1; flex: 0 0 auto; margin-top: -56px; }
    .hp-hero-content { max-width: 640px; padding-bottom: 20px; }
    .hp-hero .container:last-child { position: relative; z-index: 1; }
}

@media (max-width: 767px) {
    /* Repeated from services-block.css so it still outranks .hp-why p / .hp-process p on phones. */
    .hp-head p { font-size: 0.875rem; }
    .hp-center { text-align: left; }

    .hp-hero-eyebrow { margin-bottom: 16px; font-size: 0.675rem; }
    .hp-hero-lead { margin-bottom: 24px; }
    .hp-proof { padding: 6px; gap: 2px; }
    .hp-proof li { padding: 8px; font-size: 0.775rem; }

    .hp-trust { padding: 44px 0; }
    .hp-client-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); gap: 8px; }
    .hp-client-grid li { height: 68px; padding: 10px; }
    .hp-client-grid img { max-height: 40px; }

    .hp-work { flex-direction: column; }
    .hp-work-media { flex: none; aspect-ratio: 2 / 1; border-right: 0; border-bottom: 1px solid rgba(11,18,32,0.06); }
    .hp-work-body { padding: 18px 20px 10px; }
    .hp-work-facts { gap: 8px; }
    .hp-work-grid { gap: 16px; }

    .hp-process { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hp-process::before {
        top: 28px; bottom: 28px; left: 27px; right: auto;
        width: 2px; height: auto;
        background: repeating-linear-gradient(180deg, rgba(44,48,147,0.35) 0 8px, transparent 8px 14px);
    }
    .hp-process li { display: flex; align-items: flex-start; gap: 18px; padding: 0 0 24px; text-align: left; }
    .hp-process li:last-child { padding-bottom: 0; }
    .hp-step { flex-shrink: 0; margin: 0; box-shadow: 0 0 0 6px #fff; }
    .hp-process h3 { margin-top: 12px; }
    .hp-process p { max-width: none; margin: 0; }

    .hp-industries { padding: 48px 0; }
    .hp-final { padding-bottom: 56px; }
    .hp-final-inner { padding: 36px 24px; border-radius: 22px; }
}

@media (max-width: 600px) {
    .hp-why-grid,
    .hp-solution-grid { grid-template-columns: minmax(0, 1fr); }
    .hp-why-grid li,
    .hp-why-grid li:nth-child(n+4) { grid-column: auto; }
    .hp-why-grid { gap: 12px; }
    .hp-why-grid li { padding: 20px; }
    .hp-num { margin-bottom: 10px; }
    .hp-actions,
    .hp-actions .btn { width: 100%; }

    .hp-solution { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; padding: 20px 18px 10px; }
    .hp-solution > * { grid-column: 2; }
    .hp-solution-logo {
        grid-column: 1;
        grid-row: 1 / span 3;
        justify-content: center;
        height: 64px;
        margin: 0;
        padding: 8px;
        border: 1px solid rgba(11,18,32,0.08);
        border-radius: 12px;
    }
    .hp-solution-logo img { max-width: 100%; max-height: 44px; }
    .hp-solution h3 { margin-bottom: 4px; }
    .hp-solution p { margin-bottom: 4px; }

    .hp-industry-list { gap: 8px; }
    .hp-industry-list li { padding: 7px 12px; font-size: 0.775rem; }
}



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