:root {
    --orange: #f36b21;
    --orange-dark: #d95712;
    --navy: #071b2d;
    --navy-2: #0d2940;
    --cream: #f5f2ed;
    --white: #fff;
    --text: #172533;
    --muted: #697684;
    --border: rgba(7,27,45,.11);
    --container: 1180px;
    --shadow: 0 18px 55px rgba(7,27,45,.12);
    --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: "DM Sans", sans-serif;
    color: var(--text);
    background: var(--cream);
    font-size: 14px;
    line-height: 1.65;
    overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 92px 0; }

h1,h2,h3,h4 { font-family: "Manrope", sans-serif; line-height: 1.05; letter-spacing: -.045em; }
h2 { font-size: clamp(34px, 4vw, 52px); }
h2 em { color: var(--orange); font-style: normal; }
p { color: var(--muted); }
.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--orange); font-size: 10px; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
}

/* Loader */
.page-loader { position: fixed; inset: 0; z-index: 9999; background: var(--navy); display: grid; place-items: center; transition: opacity .5s, visibility .5s; }
.page-loader.loaded { opacity: 0; visibility: hidden; }
.loader-logo img { width: 170px; background: white; }
.loader-line { width: 150px; height: 2px; margin: 24px auto 0; background: rgba(255,255,255,.14); overflow: hidden; }
.loader-line span { display:block; width:45%; height:100%; background:var(--orange); animation:loader 1.1s infinite; }
.page-loader p { margin-top: 15px; color: rgba(255,255,255,.5); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; text-align:center; }
@keyframes loader { from{transform:translateX(-130%)} to{transform:translateX(330%)} }

/* Progress + topbar */
.scroll-progress { position:fixed; top:0; left:0; width:100%; height:2px; z-index:5000; }
.scroll-progress span { display:block; width:0; height:100%; background:var(--orange); }
.topbar { height:32px; background:var(--navy); color:#fff; font-size:10px; }
.topbar-inner { height:32px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar-left,.topbar-right { display:flex; align-items:center; gap:12px; }
.topbar a { color:#fff; }
.top-divider { width:1px; height:10px; background:rgba(255,255,255,.25); }

/* Header */
.site-header { position:absolute; top:32px; left:0; width:100%; z-index:1000; color:#fff; transition:background .3s,box-shadow .3s,top .3s; }
.site-header.scrolled { position:fixed; top:0; background:rgba(7,27,45,.96); backdrop-filter:blur(14px); box-shadow:0 8px 28px rgba(0,0,0,.15); }
.nav-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.brand { width:132px; padding:5px 8px; background:#fff; flex:0 0 auto; }
.brand img { width:100%; height:42px; object-fit:contain; }
.main-nav { display:flex; align-items:center; gap:24px; }
.main-nav a { position:relative; font-size:12px; font-weight:600; }
.main-nav a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--orange); transition:width .25s; }
.main-nav a:hover::after,.main-nav a.active::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap:10px; }
.quote-button,.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:46px; padding:0 19px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; transition:.25s; }
.quote-button,.button-primary { background:var(--orange); color:#fff; }
.quote-button:hover,.button-primary:hover { background:var(--orange-dark); transform:translateY(-2px); }
.button-outline { border:1px solid rgba(255,255,255,.32); color:#fff; }
.button-outline:hover { background:#fff; color:var(--navy); }
.menu-toggle { display:none; width:42px; height:42px; background:rgba(255,255,255,.1); }
.menu-toggle span { display:block; width:19px; height:2px; margin:4px auto; background:#fff; }

/* Hero */
.hero { min-height:720px; height:min(760px, calc(100vh - 32px)); position:relative; overflow:hidden; display:flex; align-items:center; color:#fff; }
.hero-background,.hero-overlay,.hero-grid { position:absolute; inset:0; }
.hero-background img { width:100%; height:100%; object-fit:cover; transform:scale(1.04); }
/* HERO IMAGE COLOUR — NO DARK OVERLAY */
.hero-overlay {
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* Keep the photographs completely natural */
.hero-grid {
    opacity: 0 !important;
    background: none !important;
}

.hero-background img {
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}
.hero-grid { opacity:.10; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:70px 70px; }
.hero-orange-shape { position:absolute; right:-220px; bottom:-310px; width:610px; height:610px; border:1px solid rgba(243,107,33,.45); border-radius:50%; animation:heroOrbit 18s linear infinite; }
.hero-orange-shape::after { content:""; position:absolute; inset:85px; border:1px solid rgba(243,107,33,.23); border-radius:50%; }
@keyframes heroOrbit { to{transform:rotate(360deg)} }
.hero-content { position:relative; z-index:5; padding-top:55px; }
.hero-kicker { display:flex; align-items:center; gap:11px; font-size:10px; font-weight:800; letter-spacing:.17em; }
.kicker-line { width:38px; height:2px; background:var(--orange); }
.hero-title { max-width:760px; margin-top:18px; font-size:clamp(48px,6.2vw,78px); line-height:.9; letter-spacing:-.065em; }
.hero-title span { color:var(--orange); }
.hero-text { max-width:535px; margin-top:24px; color:rgba(255,255,255,.72); font-size:14px; line-height:1.7; }
.hero-actions { display:flex; gap:10px; margin-top:28px; }
.hero-meta { display:flex; gap:38px; margin-top:48px; }
.hero-meta div { display:flex; flex-direction:column; gap:1px; }
.hero-meta strong { font-family:"Manrope"; font-size:19px; }
.hero-meta span { font-size:8px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.5); }
.hero-scroll { position:absolute; right:30px; bottom:24px; z-index:5; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:8px; text-transform:uppercase; letter-spacing:.15em; }
.scroll-line { width:1px; height:45px; background:linear-gradient(#fff,transparent); }

/* Ticker */
.ticker { background:var(--orange); color:#fff; overflow:hidden; }
.ticker-track { width:max-content; display:flex; align-items:center; gap:22px; padding:11px 0; animation:ticker 34s linear infinite; }
.ticker-track span { font-family:"Manrope"; font-weight:800; text-transform:uppercase; font-size:10px; letter-spacing:.08em; }
.ticker-track i { font-style:normal; opacity:.65; font-size:9px; }
@keyframes ticker { to{transform:translateX(-50%)} }

/* Track record */
.track-record { background:#fff; border-bottom:1px solid var(--border); }
.track-grid { display:grid; grid-template-columns:1.35fr repeat(3,1fr); align-items:stretch; }
.track-intro { padding:42px 36px 42px 0; }
.track-intro h2 { margin-top:12px; font-size:clamp(25px,2.5vw,35px); max-width:360px; }
.track-stat { padding:42px 28px; border-left:1px solid var(--border); display:flex; flex-direction:column; justify-content:center; }
.track-stat strong { font-family:"Manrope"; font-size:clamp(22px,2.5vw,34px); line-height:1; letter-spacing:-.05em; }
.track-stat span { margin-top:8px; font-size:8px; font-weight:800; letter-spacing:.14em; color:var(--orange); }
.track-stat p { margin-top:7px; font-size:11px; line-height:1.5; }

/* Section heading */
.section-heading { max-width:820px; margin-bottom:48px; }
.section-heading h2 { margin-top:12px; }
.split-heading { display:grid; grid-template-columns:1.15fr .65fr; gap:55px; align-items:end; max-width:none; }
.split-heading>p { font-size:13px; max-width:430px; }

/* About */
.about { background:var(--cream); }
.about-layout { display:grid; grid-template-columns:1fr .88fr; gap:65px; align-items:center; }
.about-image { position:relative; }
.about-image img { width:100%; height:500px; object-fit:cover; }
.image-badge { position:absolute; right:-18px; bottom:24px; width:120px; height:120px; background:var(--orange); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.image-badge strong { font-family:"Manrope"; font-size:30px; }
.image-badge span { max-width:80px; text-align:center; font-size:8px; text-transform:uppercase; letter-spacing:.08em; line-height:1.4; }
.about-copy { max-width:540px; }
.about-copy .lead { color:var(--text); font-family:"Manrope"; font-size:19px; line-height:1.4; margin-bottom:22px; }
.about-copy p:not(.lead) { margin-bottom:13px; font-size:13px; }
.text-link { display:inline-flex; align-items:center; gap:10px; margin-top:12px; color:var(--orange); font-weight:800; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }

/* Statement */
.statement { position:relative; overflow:hidden; padding:105px 0; background:var(--navy); color:#fff; }
.statement .container { position:relative; z-index:2; }
.statement h2 { max-width:850px; margin-top:14px; color:#fff; }
.statement p { max-width:520px; margin-top:20px; color:rgba(255,255,255,.62); font-size:13px; }
.statement-glow { position:absolute; width:500px; height:500px; right:-230px; top:-170px; border-radius:50%; border:1px solid rgba(243,107,33,.25); }

/* Services */
.services { background:#fff; }
.service-experience { display:grid; grid-template-columns:.78fr 1.22fr; min-height:500px; border:1px solid var(--border); }
.service-list { border-right:1px solid var(--border); }
.service-item { width:100%; min-height:76px; padding:0 25px; background:#fff; display:grid; grid-template-columns:35px 1fr 24px; align-items:center; text-align:left; border-bottom:1px solid var(--border); transition:.25s; }
.service-item span { color:#a0a9b1; font-size:9px; }
.service-item strong { font-family:"Manrope"; font-size:14px; }
.service-item i { font-style:normal; color:var(--orange); font-size:12px; }
.service-item:hover,.service-item.active { background:var(--navy); color:#fff; }
.service-detail { position:relative; overflow:hidden; background:var(--navy); color:#fff; padding:58px; }

/* Service image */
.service-image-wrap {
    position:relative;
    z-index:1;
    width:100%;
    height:180px;
    margin-bottom:22px;
    overflow:hidden;
    background:#0d2940;
}
.service-image-wrap img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:1;
    transition:opacity .22s ease, transform .35s ease;
}
.service-image-wrap img.is-changing {
    opacity:.18;
    transform:scale(1.025);
}
.service-image-wrap span {
    position:absolute;
    left:14px;
    bottom:12px;
    padding:6px 9px;
    background:rgba(7,27,45,.82);
    color:#fff;
    font-size:8px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.service-detail::after { content:""; position:absolute; right:-170px; bottom:-190px; width:420px; height:420px; border:1px solid rgba(243,107,33,.28); border-radius:50%; }
.service-number { color:var(--orange); font-size:10px; font-weight:800; }
.service-detail h3 { position:relative; z-index:1; max-width:500px; margin-top:26px; font-size:39px; }
.service-detail p { position:relative; z-index:1; max-width:520px; margin-top:19px; color:rgba(255,255,255,.64); font-size:13px; }
.service-tags { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:7px; margin-top:25px; }
.service-tags span { padding:7px 10px; border:1px solid rgba(255,255,255,.14); font-size:8px; text-transform:uppercase; letter-spacing:.07em; }
.service-quote { position:relative; z-index:1; margin-top:34px; padding:12px 16px; background:var(--orange); color:#fff; font-size:9px; font-weight:800; text-transform:uppercase; }
.service-quote span { margin-left:13px; }

/* Industries */
.industries { background:var(--cream); }
.industry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.industry-card { min-height:180px; padding:24px; background:var(--cream); display:flex; flex-direction:column; justify-content:flex-end; text-align:left; position:relative; transition:.3s; }
.industry-card:hover,.industry-card.active { background:var(--navy); color:#fff; transform:translateY(-3px); }
.industry-card>span { position:absolute; top:20px; left:24px; color:var(--orange); font-size:9px; }
.industry-card strong { font-family:"Manrope"; font-size:19px; max-width:210px; }
.industry-card small { margin-top:5px; color:var(--muted); font-size:10px; }
.industry-card.active small,.industry-card:hover small { color:rgba(255,255,255,.52); }
.industry-card i { position:absolute; right:22px; bottom:23px; color:var(--orange); font-style:normal; }
.industry-display { margin-top:20px; padding:30px 35px; display:grid; grid-template-columns:75px 1fr; gap:20px; background:#fff; }
.industry-display-number { color:var(--orange); font-size:10px; font-weight:800; }
.industry-display h3 { margin-top:7px; font-size:29px; }
.industry-display p { max-width:600px; margin-top:7px; font-size:13px; }

/* =========================================================
   HSJ MARKET NETWORK
   PREMIUM PARTNER LOGO MARQUEE
   ---------------------------------------------------------
   Single authoritative partner style block.
   ========================================================= */

.partners {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: 72px 0 78px;
}

.partner-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .65fr);
    grid-template-areas:
        "eyebrow eyebrow"
        "title copy";
    column-gap: 70px;
    row-gap: 13px;
    align-items: end;
    width: 100%;
    max-width: none;
    margin-bottom: 44px;
}

.partner-heading .eyebrow {
    grid-area: eyebrow;
    display: inline-flex;
    width: fit-content;
    margin: 0;
    color: var(--orange);
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .17em;
}

.partner-heading h2 {
    grid-area: title;
    margin: 0;
    max-width: 760px;
    color: var(--navy);
    font-size: clamp(34px, 4.3vw, 56px);
    line-height: .99;
    letter-spacing: -.052em;
    font-weight: 500;
}

.partner-heading h2 em {
    color: var(--orange);
    font-style: normal;
}

.partner-heading p {
    grid-area: copy;
    align-self: end;
    max-width: 390px;
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
}

/* Moving window */
.partner-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 18px 0;
    border-top: 1px solid rgba(7, 27, 45, .09);
    border-bottom: 1px solid rgba(7, 27, 45, .09);
    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #fbfaf8 100%
        );
}

/* Soft edge fades */
.partner-marquee::before,
.partner-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 20;
    pointer-events: none;
}

.partner-marquee::before {
    left: 0;
    background:
        linear-gradient(
            90deg,
            #fff 0%,
            rgba(255,255,255,.94) 24%,
            rgba(255,255,255,0) 100%
        );
}

.partner-marquee::after {
    right: 0;
    background:
        linear-gradient(
            270deg,
            #fff 0%,
            rgba(255,255,255,.94) 24%,
            rgba(255,255,255,0) 100%
        );
}

/* Continuous track */
.partner-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: hsjMarketNetwork 48s linear infinite;
}

.partner-set {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Individual logo stage */
.partner-logo {
    position: relative;
    width: 184px;
    height: 112px;
    flex: 0 0 184px;
    margin-right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 22px;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(7, 27, 45, .085);
    box-shadow: 0 8px 24px rgba(7, 27, 45, .045);
    transition:
        transform .28s var(--ease),
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease;
}

/* Remove legacy orange marker */
.partner-logo::before {
    display: none !important;
}

/* Real partner logo */
.partner-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: transparent;
    opacity: 1;
    filter: none;
    transition:
        transform .28s var(--ease),
        opacity .28s ease;
}

.partner-logo:hover {
    transform: translateY(-4px);
    border-color: rgba(243, 107, 33, .32);
    box-shadow: 0 15px 34px rgba(7, 27, 45, .11);
    background: #fff;
}

.partner-logo:hover img {
    transform: scale(1.045);
}

/* Prevent any legacy placeholder from competing with real logos */
.partner-logo.logo-error::after {
    display: none !important;
}

/* Visual normalization for different source-logo proportions */
.partner-apa img {
    width: 86%;
    height: 72%;
}

.partner-jubilee img {
    width: 72%;
    height: 78%;
}

.partner-pacis img {
    width: 91%;
    height: 76%;
}

.partner-aar img {
    width: 72%;
    height: 86%;
}

.partner-old-mutual img {
    width: 88%;
    height: 58%;
}

.partner-first img {
    width: 91%;
    height: 55%;
}

.partner-heritage img {
    width: 86%;
    height: 64%;
}

.partner-vumi img {
    width: 91%;
    height: 58%;
}

.partner-geminia img {
    width: 72%;
    height: 82%;
}

.partner-bupa img {
    width: 88%;
    height: 62%;
}

.partner-ga img {
    width: 92%;
    height: 60%;
}

.partner-cigna img {
    width: 88%;
    height: 65%;
}

.partner-now img {
    width: 92%;
    height: 62%;
}

.partner-april img {
    width: 88%;
    height: 66%;
}

.partner-axa img {
    width: 72%;
    height: 82%;
}

@keyframes hsjMarketNetwork {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.partner-marquee:hover .partner-track {
    animation-play-state: paused;
}

/* Tablet */
@media (max-width: 900px) {

    .partners {
        padding: 60px 0 64px;
    }

    .partner-heading {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "title"
            "copy";
        gap: 12px;
        margin-bottom: 34px;
    }

    .partner-heading p {
        max-width: 520px;
        margin-top: 1px;
    }

    .partner-marquee {
        padding: 15px 0;
    }

    .partner-logo {
        width: 162px;
        height: 98px;
        flex-basis: 162px;
        margin-right: 11px;
        padding: 15px 18px;
    }

    .partner-track {
        animation-duration: 44s;
    }

}

/* Mobile */
@media (max-width: 600px) {

    .partners {
        padding: 52px 0 54px;
    }

    .partner-heading {
        margin-bottom: 28px;
    }

    .partner-heading h2 {
        font-size: 31px;
        line-height: 1.02;
    }

    .partner-heading p {
        max-width: 100%;
        font-size: 10px;
    }

    .partner-marquee {
        padding: 12px 0;
    }

    .partner-marquee::before,
    .partner-marquee::after {
        width: 58px;
    }

    .partner-logo {
        width: 142px;
        height: 88px;
        flex-basis: 142px;
        margin-right: 9px;
        padding: 12px 14px;
    }

    .partner-track {
        animation-duration: 40s;
    }

}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .partner-track {
        animation: none;
        transform: none;
    }

}



/* Why */
.why { background:var(--navy); color:#fff; }
.why-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:60px; }
.why-intro { align-self:start; }
.why-intro h2 { margin-top:12px; }
.why-intro p { margin-top:20px; color:rgba(255,255,255,.6); font-size:13px; max-width:350px; }
.benefits-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.1); }
.benefit { min-height:190px; padding:25px; background:var(--navy); }
.benefit span { color:var(--orange); font-size:9px; }
.benefit h3 { margin-top:38px; font-size:19px; letter-spacing:-.03em; }
.benefit p { margin-top:7px; color:rgba(255,255,255,.48); font-size:11px; line-height:1.55; }

/* Journey */
.risk-journey { background:var(--cream); }
.journey { position:relative; max-width:820px; }
.journey-line { position:absolute; left:23px; top:25px; bottom:25px; width:1px; background:rgba(7,27,45,.14); }
.journey-step { position:relative; display:grid; grid-template-columns:48px 1fr; gap:24px; padding:23px 0; }
.journey-number { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--orange); background:var(--cream); color:var(--orange); font-weight:800; font-size:9px; position:relative; z-index:2; }
.journey-step span { font-size:8px; font-weight:800; letter-spacing:.16em; color:var(--orange); }
.journey-step h3 { margin-top:5px; font-size:21px; }
.journey-step p { margin-top:4px; font-size:12px; }

/* Vision */
.vision { min-height:510px; position:relative; display:flex; align-items:center; background:var(--navy); color:#fff; overflow:hidden; }
.vision-background { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,27,45,.97),rgba(7,27,45,.7)),url("assets/bridge.jpg") center/cover; opacity:.82; }
.vision-content { position:relative; z-index:2; }
.vision h2 { max-width:880px; margin-top:20px; color:#fff; font-size:clamp(34px,4vw,55px); }
.vision-mark { margin-top:55px; color:rgba(255,255,255,.11); font-size:100px; font-family:"Manrope"; font-weight:800; line-height:.7; }

/* Team */
.team { background:#fff; }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.team-card { background:var(--cream); }
.team-photo { aspect-ratio:.9; overflow:hidden; }
.placeholder-photo { background:linear-gradient(135deg,#dfe3e6,#aeb6bc); display:grid; place-items:center; }
.placeholder-photo span { font-size:8px; letter-spacing:.18em; color:rgba(7,27,45,.4); }
.team-info { padding:19px; }
.team-info span { font-size:7px; font-weight:800; letter-spacing:.12em; color:var(--orange); }
.team-info h3 { margin-top:6px; font-size:17px; }

/* Contact */
.contact { background:var(--cream); }
.contact-box { display:grid; grid-template-columns:1.15fr .85fr; background:var(--orange); color:#fff; }
.contact-copy { padding:58px; }
.contact-copy h2 { margin-top:12px; color:#fff; }
.contact-copy p { max-width:480px; margin-top:18px; color:rgba(255,255,255,.76); font-size:13px; }
.contact-copy .button { margin-top:25px; background:var(--navy); }
.contact-details { padding:58px; background:var(--navy); display:flex; flex-direction:column; justify-content:center; gap:25px; }
.contact-details span { color:var(--orange); font-size:8px; font-weight:800; letter-spacing:.16em; }
.contact-details p { margin-top:5px; color:rgba(255,255,255,.66); font-size:12px; }

/* Footer */
.footer { background:#041421; color:#fff; padding:58px 0 20px; }
.footer-main { display:flex; justify-content:space-between; gap:60px; }
.footer-brand { max-width:300px; }
.footer-brand img { width:145px; padding:5px; background:#fff; }
.footer-brand p { margin-top:15px; color:rgba(255,255,255,.46); font-size:12px; }
.footer-brand strong { display:block; margin-top:15px; color:var(--orange); font-size:9px; letter-spacing:.1em; }
.footer-links { display:flex; gap:75px; }
.footer-links>div { display:flex; flex-direction:column; gap:9px; }
.footer-links span { color:var(--orange); font-size:8px; letter-spacing:.17em; font-weight:800; margin-bottom:7px; }
.footer-links a,.footer-links button { color:rgba(255,255,255,.62); background:transparent; text-align:left; font-size:11px; }
.footer-links a:hover,.footer-links button:hover { color:#fff; }
.footer-bottom { margin-top:45px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; font-size:9px; color:rgba(255,255,255,.32); }

/* Quote modal */
.quote-modal { position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center; padding:18px; opacity:0; visibility:hidden; transition:.3s; }
.quote-modal.open { opacity:1; visibility:visible; }
.quote-backdrop { position:absolute; inset:0; background:rgba(3,13,22,.78); backdrop-filter:blur(8px); }
.quote-panel { width:min(100%,820px); max-height:90vh; overflow-y:auto; position:relative; z-index:2; background:#fff; padding:36px; transform:translateY(20px); transition:.35s var(--ease); }
.quote-modal.open .quote-panel { transform:translateY(0); }
.modal-close { position:absolute; right:16px; top:16px; width:34px; height:34px; background:var(--cream); font-size:20px; }
.quote-header h2 { margin-top:10px; font-size:34px; }
.quote-header p { margin-top:8px; font-size:12px; }
.quote-classes { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:25px; }
.quote-classes button { min-height:76px; padding:11px; background:var(--cream); display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; text-align:left; font-weight:800; font-size:10px; transition:.2s; }
.quote-classes button span { font-size:18px; color:var(--orange); }
.quote-classes button:hover,.quote-classes button.active { background:var(--orange); color:#fff; }
.quote-classes button:hover span,.quote-classes button.active span { color:#fff; }
.quote-form-area { margin-top:25px; padding-top:22px; border-top:1px solid var(--border); }
.selected-cover { display:flex; flex-direction:column; gap:3px; }
.selected-cover span { color:var(--orange); font-size:8px; letter-spacing:.15em; font-weight:800; }
.selected-cover strong { font-family:"Manrope"; font-size:17px; }
#quoteForm { margin-top:18px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
#quoteForm label { display:flex; flex-direction:column; gap:5px; font-size:9px; font-weight:800; }
#quoteForm input,#quoteForm textarea { width:100%; border:1px solid var(--border); background:var(--cream); padding:11px 12px; outline:0; font-size:12px; }
#quoteForm input:focus,#quoteForm textarea:focus { border-color:var(--orange); background:#fff; }
.full-field { margin-top:11px; }
.quote-submit { margin-top:16px; }
.form-note { margin-top:10px; font-size:9px; color:#89929a; }
.form-message { display:none; margin-top:12px; padding:10px 12px; background:var(--cream); font-size:10px; }
.form-message.show { display:block; }

/* AI assistant */
.ai-launcher { position:fixed; right:20px; bottom:20px; z-index:2500; min-height:48px; padding:0 14px; display:flex; align-items:center; gap:8px; background:var(--navy); color:#fff; border:1px solid rgba(255,255,255,.1); box-shadow:0 12px 35px rgba(0,0,0,.18); font-weight:800; font-size:10px; transition:.25s; }
.ai-launcher:hover { transform:translateY(-2px); }
.ai-icon { width:25px; height:25px; display:grid; place-items:center; background:var(--orange); font-size:12px; }
.ai-pulse { position:absolute; inset:-3px; border:1px solid rgba(243,107,33,.4); animation:aiPulse 2.3s infinite; pointer-events:none; }
@keyframes aiPulse { 0%,100%{opacity:0;transform:scale(.97)} 50%{opacity:1;transform:scale(1.03)} }
.ai-chat { position:fixed; right:20px; bottom:78px; z-index:2499; width:min(350px,calc(100vw - 28px)); height:min(480px,calc(100vh - 100px)); background:#fff; box-shadow:0 25px 70px rgba(0,0,0,.24); display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(16px) scale(.98); transition:.28s var(--ease); }
.ai-chat.open { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.ai-chat-header { padding:13px 14px; background:var(--navy); color:#fff; display:flex; justify-content:space-between; align-items:center; }
.ai-brand { display:flex; align-items:center; gap:9px; }
.ai-avatar { width:32px; height:32px; display:grid; place-items:center; background:var(--orange); font-size:12px; }
.ai-brand strong { display:block; font-family:"Manrope"; font-size:12px; }
.ai-brand span { display:block; margin-top:1px; font-size:8px; color:rgba(255,255,255,.48); }
.ai-close { width:30px; height:30px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#fff; font-size:19px; line-height:1; transition:.2s; }
.ai-close:hover { background:var(--orange); }
.ai-status { padding:6px 14px; background:#f7f8f9; font-size:8px; color:#6b747c; }
.ai-status span { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#37b56a; }
.ai-messages { flex:1; overflow-y:auto; padding:14px; }
.ai-message { display:flex; gap:7px; margin-bottom:12px; }
.message-avatar { flex:0 0 25px; width:25px; height:25px; display:grid; place-items:center; background:var(--orange); color:#fff; font-size:9px; }
.message-content { max-width:265px; padding:9px 11px; background:var(--cream); font-size:11px; line-height:1.5; }
.message-content p { color:var(--text); margin-bottom:5px; }
.message-content p:last-child { margin-bottom:0; }
.ai-message.user { justify-content:flex-end; }
.ai-message.user .message-avatar { display:none; }
.ai-message.user .message-content { background:var(--navy); }
.ai-message.user .message-content p { color:#fff; }
.ai-quick-actions { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.ai-quick-actions button { padding:6px 8px; background:#fff; border:1px solid var(--border); font-size:8px; font-weight:700; }
.ai-quick-actions button:hover { border-color:var(--orange); color:var(--orange); }
.ai-input-area { display:flex; border-top:1px solid var(--border); }
.ai-input-area input { flex:1; min-width:0; border:0; outline:0; padding:12px; font-size:11px; }
.ai-input-area button { width:46px; background:var(--orange); color:#fff; font-size:16px; }
.ai-typing .message-content { opacity:.65; }

/* Back top */
.back-top { position:fixed; right:20px; bottom:78px; z-index:1500; width:36px; height:36px; background:#fff; color:var(--navy); box-shadow:var(--shadow); opacity:0; visibility:hidden; transition:.25s; font-size:13px; }
.back-top.visible { opacity:1; visibility:visible; }

/* Reveal */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Press state */
.pressed { transform:scale(.98) !important; }

/* Responsive */
@media (max-width:1000px) {
    .main-nav { gap:16px; }
    .main-nav a { font-size:11px; }
    .track-grid { grid-template-columns:1fr repeat(3,.8fr); }
    .about-layout,.why-layout { gap:40px; }
    .team-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px) {
    .container { width:min(calc(100% - 30px),var(--container)); }
    .topbar-left { display:none; }
    .topbar-inner { justify-content:flex-end; }
    .main-nav { position:fixed; inset:0; background:var(--navy); flex-direction:column; align-items:flex-start; justify-content:center; padding:40px; transform:translateX(100%); transition:.35s; }
    .main-nav.open { transform:translateX(0); }
    .main-nav a { font-size:21px; }
    .menu-toggle { display:block; }
    .hero { min-height:650px; height:auto; }
    .hero-content { padding:130px 0 70px; }
    .hero-title { font-size:clamp(43px,11vw,62px); }
    .hero-meta { gap:25px; margin-top:38px; }
    .hero-scroll { display:none; }
    .track-grid { grid-template-columns:1fr 1fr; }
    .track-intro { grid-column:1/-1; padding:35px 0 22px; }
    .track-stat { padding:25px 18px; }
    .track-stat:nth-child(3) { border-left:0; }
    .split-heading,.about-layout,.why-layout,.contact-box { grid-template-columns:1fr; }
    .section { padding:72px 0; }
    .service-experience { grid-template-columns:1fr; }
    .service-list { border-right:0; }
    .service-item { min-height:64px; }
    .service-detail { padding:40px; }
    .industry-grid { grid-template-columns:repeat(2,1fr); }
    .team-grid { grid-template-columns:repeat(2,1fr); }
    .contact-details { padding:35px 40px; }
    .contact-copy { padding:40px; }
    .footer-main { flex-direction:column; }
    .footer-links { gap:50px; }
    .quote-classes { grid-template-columns:repeat(2,1fr); }
    .ai-chat { right:14px; bottom:73px; width:calc(100vw - 28px); height:min(470px,calc(100vh - 90px)); }
    .ai-launcher { right:14px; bottom:14px; }
    .back-top { right:14px; bottom:72px; }
}

@media (max-width:560px) {
    .topbar-right { gap:8px; font-size:8px; }
    .brand { width:118px; }
    .brand img { height:38px; }
    .nav-actions { gap:6px; }
    .quote-button { min-height:40px; padding:0 12px; font-size:8px; }
    .hero-title { font-size:43px; }
    .hero-text { font-size:12px; }
    .hero-actions { flex-wrap:wrap; }
    .button { min-height:43px; padding:0 15px; font-size:9px; }
    .hero-meta { gap:18px; flex-wrap:wrap; }
    .hero-meta strong { font-size:16px; }
    .track-grid { grid-template-columns:1fr; }
    .track-stat { border-left:0; border-top:1px solid var(--border); }
    .track-stat:nth-child(3) { border-left:0; }
    .about-image img { height:390px; }
    .image-badge { right:-8px; width:100px; height:100px; }
    .image-badge strong { font-size:25px; }
    .industry-grid { grid-template-columns:1fr; }
    .industry-card { min-height:145px; }
    .industry-display { grid-template-columns:45px 1fr; padding:24px; }
    .industry-display h3 { font-size:25px; }
    .benefits-grid { grid-template-columns:1fr; }
    .benefit { min-height:150px; }
    .journey-step { grid-template-columns:42px 1fr; gap:18px; }
    .journey-number { width:42px; height:42px; }
    .vision { min-height:440px; }
    .vision h2 { font-size:32px; }
    .team-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .team-info { padding:13px; }
    .team-info h3 { font-size:14px; }
    .contact-copy,.contact-details { padding:32px 25px; }
    .footer-links { gap:35px; }
    .footer-bottom { flex-direction:column; gap:7px; }
    .form-grid { grid-template-columns:1fr; }
    .quote-panel { padding:28px 20px; }
    .quote-header h2 { font-size:29px; }
}



/* =========================================================
   HSJ — STANDARD SMALL ICON SYSTEM
   Reduce decorative icons and icon containers globally
   ========================================================= */

/* ---------------------------------------------------------
   1. NUMBERED SECTION ICONS / STEP BOXES
   --------------------------------------------------------- */

.step-number,
.step-icon,
.process-number,
.process-icon,
.timeline-number,
.timeline-icon,
.approach-number,
.approach-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 600 !important;

    border-radius: 0 !important;
}


/* ---------------------------------------------------------
   2. THE HSJ APPROACH NUMBER BOXES
   --------------------------------------------------------- */

.approach-step > .number,
.approach-step .number-box,
.approach-step .step-number {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    font-size: 9px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ---------------------------------------------------------
   3. GENERIC SMALL ICONS
   --------------------------------------------------------- */

.icon,
.small-icon,
.section-icon,
.card-icon,
.feature-icon,
.service-icon,
.industry-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;

    font-size: 11px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* SVG ICONS INSIDE THEM */

.icon svg,
.small-icon svg,
.section-icon svg,
.card-icon svg,
.feature-icon svg,
.service-icon svg,
.industry-icon svg {
    width: 12px !important;
    height: 12px !important;
}


/* ---------------------------------------------------------
   4. BUTTON ARROWS
   --------------------------------------------------------- */

.button span,
.btn span,
.quote-button span,
.service-quote span,
.nav-cta span,
.form-submit span {
    font-size: 10px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
}


/* Arrow symbols specifically */

.button .arrow,
.btn .arrow,
.quote-button .arrow,
.service-quote .arrow {
    font-size: 10px !important;
    transform: none !important;
}


/* ---------------------------------------------------------
   5. NAVIGATION SMALL ARROWS / ICONS
   --------------------------------------------------------- */

.main-nav svg,
.main-nav .icon,
.main-nav .arrow {
    width: 9px !important;
    height: 9px !important;
    font-size: 9px !important;
}


/* ---------------------------------------------------------
   6. GET A QUOTE BUTTON ARROW
   --------------------------------------------------------- */

.get-quote span,
.nav-quote span,
.quote-button span {
    font-size: 9px !important;
    margin-left: 5px !important;
}


/* ---------------------------------------------------------
   7. AI LAUNCHER
   --------------------------------------------------------- */

#aiLauncher,
.ai-launcher {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    min-height: 42px !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 0 !important;
}


/* AI launcher icon itself */

#aiLauncher svg,
#aiLauncher .icon,
#aiLauncher .ai-icon,
.ai-launcher svg,
.ai-launcher .icon,
.ai-launcher .ai-icon {
    width: 15px !important;
    height: 15px !important;

    font-size: 12px !important;
}


/* AI launcher text */

#aiLauncher span,
.ai-launcher span {
    font-size: 8px !important;
}


/* ---------------------------------------------------------
   8. AI BUTTON WHEN IT HAS ICON + TEXT
   --------------------------------------------------------- */

.ai-launcher .message-avatar,
#aiLauncher .message-avatar {
    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;

    font-size: 9px !important;
}


/* ---------------------------------------------------------
   9. SMALL ORANGE DECORATIVE MARKERS
   --------------------------------------------------------- */

.section-label::before,
.eyebrow::before,
.kicker::before,
.section-kicker::before {
    width: 5px !important;
    height: 5px !important;

    min-width: 5px !important;
    min-height: 5px !important;

    margin-right: 7px !important;
}


/* ---------------------------------------------------------
   10. TICKER / MOVING SMALL ICONS
   --------------------------------------------------------- */

.ticker-icon,
.ticker-item .icon,
.marquee-icon {
    width: 7px !important;
    height: 7px !important;

    min-width: 7px !important;
    min-height: 7px !important;

    font-size: 6px !important;
}


/* ---------------------------------------------------------
   11. PARTNER PLACEHOLDER ICONS
   --------------------------------------------------------- */

.partner-logo .partner-icon,
.partner-placeholder,
.partner-mark {
    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 8px !important;

    border-radius: 50% !important;
}


/* Partner names */

.partner-logo,
.partner-logo span,
.partner-name {
    font-size: 10px !important;
}


/* ---------------------------------------------------------
   12. SMALL CARD ICONS
   --------------------------------------------------------- */

.service-item .icon,
.service-item .service-icon,
.industry-card .icon,
.industry-card .industry-icon {
    width: 26px !important;
    height: 26px !important;

    min-width: 26px !important;
    min-height: 26px !important;

    font-size: 10px !important;
}


.service-item .icon svg,
.service-item .service-icon svg,
.industry-card .icon svg,
.industry-card .industry-icon svg {
    width: 11px !important;
    height: 11px !important;
}


/* ---------------------------------------------------------
   13. CLOSE BUTTONS
   --------------------------------------------------------- */

.modal-close,
.ai-close,
.quote-close,
.close-button {
    width: 30px !important;
    height: 30px !important;

    min-width: 30px !important;
    min-height: 30px !important;

    font-size: 13px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


.modal-close svg,
.ai-close svg,
.quote-close svg,
.close-button svg {
    width: 11px !important;
    height: 11px !important;
}


/* ---------------------------------------------------------
   14. BACK TO TOP
   --------------------------------------------------------- */

#backTop,
.back-to-top {
    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    min-height: 34px !important;

    font-size: 11px !important;
}


#backTop svg,
.back-to-top svg {
    width: 11px !important;
    height: 11px !important;
}


/* ---------------------------------------------------------
   15. FORM ICONS
   --------------------------------------------------------- */

.form-icon,
.input-icon,
.contact-icon {
    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;

    font-size: 10px !important;
}


.form-icon svg,
.input-icon svg,
.contact-icon svg {
    width: 11px !important;
    height: 11px !important;
}


/* ---------------------------------------------------------
   16. MOBILE — KEEP EVERYTHING COMPACT
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .step-number,
    .step-icon,
    .process-number,
    .process-icon,
    .timeline-number,
    .timeline-icon,
    .approach-number,
    .approach-icon {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        min-height: 36px !important;

        font-size: 8px !important;
    }


    #aiLauncher,
    .ai-launcher {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;
    }


    #aiLauncher svg,
    .ai-launcher svg {
        width: 13px !important;
        height: 13px !important;
    }


    .partner-logo .partner-icon,
    .partner-placeholder,
    .partner-mark {
        width: 21px !important;
        height: 21px !important;

        min-width: 21px !important;
        min-height: 21px !important;
    }

}

/* =========================================================
   HSJ JUTLEY
   COMPACT CORPORATE SCALE
   ---------------------------------------------------------
   Purpose:
   Reduce the overall vertical scale of the website.
   Keep the design premium, clean and spacious without
   excessive empty areas.
   ========================================================= */


/* =========================================================
   01. GLOBAL
   ========================================================= */

body {
    font-size: 13px !important;
    line-height: 1.55 !important;
}

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

.section {
    padding: 58px 0 !important;
}


/* =========================================================
   02. TOP BAR
   ========================================================= */

.topbar {
    height: 28px !important;
    font-size: 9px !important;
}

.topbar-inner {
    height: 28px !important;
}

.topbar-left,
.topbar-right {
    gap: 10px !important;
}

.top-divider {
    height: 8px !important;
}


/* =========================================================
   03. MAIN HEADER
   ========================================================= */

.site-header {
    top: 28px !important;
}

.site-header.scrolled {
    top: 0 !important;
}

.nav-inner {
    min-height: 64px !important;
    gap: 18px !important;
}

.brand {
    width: 116px !important;
    padding: 4px 6px !important;
}

.brand img {
    height: 36px !important;
}

.main-nav {
    gap: 20px !important;
}

.main-nav a {
    font-size: 11px !important;
}

.main-nav a::after {
    bottom: -5px !important;
    height: 1px !important;
}

.nav-actions {
    gap: 8px !important;
}

.quote-button {
    min-height: 40px !important;
    padding: 0 15px !important;
    gap: 7px !important;
    font-size: 9px !important;
}


/* =========================================================
   04. HERO
   ========================================================= */

.hero {
    min-height: 590px !important;
    height: min(640px, calc(100vh - 28px)) !important;
}

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

.hero-kicker {
    gap: 8px !important;
    font-size: 8px !important;
}

.kicker-line {
    width: 28px !important;
    height: 1px !important;
}

.hero-title {
    max-width: 690px !important;
    margin-top: 14px !important;
    font-size: clamp(42px, 5.2vw, 66px) !important;
    line-height: .91 !important;
}

.hero-text {
    max-width: 500px !important;
    margin-top: 18px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.hero-actions {
    gap: 8px !important;
    margin-top: 21px !important;
}

.hero-actions .button {
    min-height: 40px !important;
    padding: 0 15px !important;
    gap: 7px !important;
    font-size: 9px !important;
}

.hero-meta {
    gap: 30px !important;
    margin-top: 35px !important;
}

.hero-meta strong {
    font-size: 17px !important;
}

.hero-meta span {
    font-size: 7px !important;
}

.hero-scroll {
    right: 22px !important;
    bottom: 18px !important;
    gap: 6px !important;
    font-size: 7px !important;
}

.scroll-line {
    height: 32px !important;
}


/* =========================================================
   05. ORANGE TICKER
   ========================================================= */

.ticker-track {
    gap: 18px !important;
    padding: 8px 0 !important;
}

.ticker-track span {
    font-size: 8px !important;
}

.ticker-track i {
    font-size: 7px !important;
}


/* =========================================================
   06. TRACK RECORD
   ========================================================= */

.track-intro {
    padding: 30px 28px 30px 0 !important;
}

.track-intro h2 {
    margin-top: 9px !important;
    font-size: clamp(23px, 2.2vw, 31px) !important;
}

.track-stat {
    padding: 30px 22px !important;
}

.track-stat strong {
    font-size: clamp(20px, 2.2vw, 29px) !important;
}

.track-stat span {
    margin-top: 6px !important;
    font-size: 7px !important;
}

.track-stat p {
    margin-top: 5px !important;
    font-size: 10px !important;
}


/* =========================================================
   07. SECTION HEADINGS
   ========================================================= */

.section-heading {
    margin-bottom: 34px !important;
}

.section-heading h2 {
    margin-top: 9px !important;
    font-size: clamp(29px, 3.3vw, 44px) !important;
}

.split-heading {
    gap: 38px !important;
}

.split-heading > p {
    font-size: 11px !important;
    max-width: 390px !important;
}

.eyebrow {
    gap: 7px !important;
    font-size: 8px !important;
    letter-spacing: .16em !important;
}


/* =========================================================
   08. ABOUT
   ========================================================= */

.about-layout {
    gap: 45px !important;
}

.about-image img {
    height: 410px !important;
}

.image-badge {
    right: -12px !important;
    bottom: 18px !important;
    width: 92px !important;
    height: 92px !important;
}

.image-badge strong {
    font-size: 25px !important;
}

.image-badge span {
    max-width: 68px !important;
    font-size: 7px !important;
}

.about-copy {
    max-width: 500px !important;
}

.about-copy .lead {
    font-size: 16px !important;
    line-height: 1.38 !important;
    margin-bottom: 16px !important;
}

.about-copy p:not(.lead) {
    margin-bottom: 10px !important;
    font-size: 11px !important;
}

.text-link {
    gap: 7px !important;
    margin-top: 9px !important;
    font-size: 8px !important;
}


/* =========================================================
   09. STATEMENT / VISION STATEMENT
   ========================================================= */

.statement {
    padding: 72px 0 !important;
}

.statement h2 {
    margin-top: 10px !important;
    max-width: 760px !important;
    font-size: clamp(30px, 3.6vw, 47px) !important;
}

.statement p {
    max-width: 470px !important;
    margin-top: 15px !important;
    font-size: 11px !important;
}


/* =========================================================
   10. SERVICES
   ========================================================= */

.service-experience {
    min-height: 410px !important;
}

.service-item {
    min-height: 62px !important;
    padding: 0 18px !important;
    grid-template-columns: 28px 1fr 18px !important;
}

.service-item span {
    font-size: 8px !important;
}

.service-item strong {
    font-size: 12px !important;
}

.service-item i {
    font-size: 9px !important;
}

.service-detail {
    padding: 42px !important;
}

.service-number {
    font-size: 8px !important;
}

.service-detail h3 {
    margin-top: 19px !important;
    font-size: 31px !important;
}

.service-detail p {
    max-width: 470px !important;
    margin-top: 14px !important;
    font-size: 11px !important;
}

.service-tags {
    gap: 5px !important;
    margin-top: 18px !important;
}

.service-tags span {
    padding: 5px 8px !important;
    font-size: 7px !important;
}

.service-quote {
    margin-top: 25px !important;
    padding: 10px 13px !important;
    font-size: 8px !important;
}

.service-quote span {
    margin-left: 8px !important;
    font-size: 9px !important;
}


/* =========================================================
   11. INDUSTRIES
   ========================================================= */

.industry-grid {
    gap: 1px !important;
}

.industry-card {
    min-height: 145px !important;
    padding: 20px !important;
}

.industry-card > span {
    top: 15px !important;
    left: 20px !important;
    font-size: 8px !important;
}

.industry-card strong {
    font-size: 16px !important;
    max-width: 190px !important;
}

.industry-card small {
    margin-top: 4px !important;
    font-size: 9px !important;
}

.industry-card i {
    right: 18px !important;
    bottom: 18px !important;
    font-size: 9px !important;
}

.industry-display {
    margin-top: 14px !important;
    padding: 23px 27px !important;
    grid-template-columns: 55px 1fr !important;
    gap: 15px !important;
}

.industry-display-number {
    font-size: 8px !important;
}

.industry-display h3 {
    margin-top: 5px !important;
    font-size: 25px !important;
}

.industry-display p {
    margin-top: 5px !important;
    font-size: 11px !important;
}




/* =========================================================
   13. WHY HS JUTLEY
   ========================================================= */

.why-layout {
    gap: 42px !important;
}

.why-intro h2 {
    margin-top: 9px !important;
    font-size: clamp(29px, 3.4vw, 44px) !important;
}

.why-intro p {
    margin-top: 15px !important;
    max-width: 320px !important;
    font-size: 11px !important;
}

.benefit {
    min-height: 145px !important;
    padding: 20px !important;
}

.benefit span {
    font-size: 8px !important;
}

.benefit h3 {
    margin-top: 28px !important;
    font-size: 16px !important;
}

.benefit p {
    margin-top: 5px !important;
    font-size: 10px !important;
}


/* =========================================================
   14. RISK JOURNEY
   ========================================================= */

.journey {
    max-width: 720px !important;
}

.journey-line {
    left: 19px !important;
    top: 21px !important;
    bottom: 21px !important;
}

.journey-step {
    grid-template-columns: 40px 1fr !important;
    gap: 19px !important;
    padding: 17px 0 !important;
}

.journey-number {
    width: 40px !important;
    height: 40px !important;
    font-size: 8px !important;
}

.journey-step span {
    font-size: 7px !important;
}

.journey-step h3 {
    margin-top: 4px !important;
    font-size: 18px !important;
}

.journey-step p {
    margin-top: 3px !important;
    font-size: 10px !important;
}


/* =========================================================
   15. VISION
   ========================================================= */

.vision {
    min-height: 410px !important;
}

.vision h2 {
    max-width: 760px !important;
    margin-top: 15px !important;
    font-size: clamp(30px, 3.5vw, 48px) !important;
}

.vision-mark {
    margin-top: 35px !important;
    font-size: 76px !important;
}


/* =========================================================
   16. TEAM
   ========================================================= */

.team-grid {
    gap: 11px !important;
}

.team-photo {
    aspect-ratio: 1.08 !important;
}

.team-info {
    padding: 14px !important;
}

.team-info span {
    font-size: 6px !important;
}

.team-info h3 {
    margin-top: 5px !important;
    font-size: 14px !important;
}


/* =========================================================
   17. CONTACT
   ========================================================= */

.contact-box {
    grid-template-columns: 1.1fr .9fr !important;
}

.contact-copy {
    padding: 42px !important;
}

.contact-copy h2 {
    margin-top: 9px !important;
    font-size: clamp(29px, 3.2vw, 42px) !important;
}

.contact-copy p {
    max-width: 420px !important;
    margin-top: 13px !important;
    font-size: 11px !important;
}

.contact-copy .button {
    margin-top: 19px !important;
}

.contact-details {
    padding: 42px !important;
    gap: 19px !important;
}

.contact-details span {
    font-size: 7px !important;
}

.contact-details p {
    margin-top: 4px !important;
    font-size: 10px !important;
}


/* =========================================================
   18. FOOTER
   ========================================================= */

.footer {
    padding: 42px 0 16px !important;
}

.footer-main {
    gap: 40px !important;
}

.footer-brand {
    max-width: 270px !important;
}

.footer-brand img {
    width: 125px !important;
}

.footer-brand p {
    margin-top: 11px !important;
    font-size: 10px !important;
}

.footer-brand strong {
    margin-top: 11px !important;
    font-size: 8px !important;
}

.footer-links {
    gap: 55px !important;
}

.footer-links > div {
    gap: 7px !important;
}

.footer-links span {
    font-size: 7px !important;
    margin-bottom: 5px !important;
}

.footer-links a,
.footer-links button {
    font-size: 10px !important;
}

.footer-bottom {
    margin-top: 32px !important;
    padding-top: 14px !important;
    font-size: 8px !important;
}


/* =========================================================
   19. QUOTE MODAL
   ========================================================= */

.quote-panel {
    padding: 28px !important;
}

.modal-close {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
}

.quote-header h2 {
    margin-top: 8px !important;
    font-size: 30px !important;
}

.quote-header p {
    margin-top: 6px !important;
    font-size: 10px !important;
}

.quote-classes {
    gap: 6px !important;
    margin-top: 19px !important;
}

.quote-classes button {
    min-height: 62px !important;
    padding: 9px !important;
    font-size: 9px !important;
}

.quote-classes button span {
    font-size: 14px !important;
}

.quote-form-area {
    margin-top: 19px !important;
    padding-top: 17px !important;
}

.selected-cover span {
    font-size: 7px !important;
}

.selected-cover strong {
    font-size: 15px !important;
}


/* =========================================================
   20. AI ASSISTANT
   ========================================================= */

.ai-launcher {
    right: 16px !important;
    bottom: 16px !important;

    min-height: 38px !important;
    height: 38px !important;

    padding: 0 9px !important;

    gap: 6px !important;

    font-size: 8px !important;
}

.ai-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 9px !important;
}

.ai-pulse {
    inset: -2px !important;
}

.ai-chat {
    right: 16px !important;
    bottom: 62px !important;

    width: min(330px, calc(100vw - 28px)) !important;
    height: min(440px, calc(100vh - 85px)) !important;
}

.ai-chat-header {
    padding: 11px 12px !important;
}

.ai-avatar {
    width: 27px !important;
    height: 27px !important;
    font-size: 10px !important;
}

.ai-brand strong {
    font-size: 11px !important;
}

.ai-brand span {
    font-size: 7px !important;
}

.ai-close {
    width: 27px !important;
    height: 27px !important;
    font-size: 15px !important;
}

.message-avatar {
    flex-basis: 21px !important;
    width: 21px !important;
    height: 21px !important;
    font-size: 8px !important;
}

.message-content {
    padding: 8px 9px !important;
    font-size: 10px !important;
}


/* =========================================================
   21. BACK TO TOP
   ========================================================= */

.back-top {
    right: 16px !important;
    bottom: 62px !important;

    width: 30px !important;
    height: 30px !important;

    font-size: 10px !important;
}


/* =========================================================
   22. GLOBAL SMALL ICONS
   ========================================================= */

button span,
.button span,
.quote-button span,
.service-quote span {
    font-size: 9px !important;
}

.kicker-line {
    width: 28px !important;
}

.section-label::before,
.eyebrow::before,
.kicker::before,
.section-kicker::before {
    width: 4px !important;
    height: 4px !important;
    min-width: 4px !important;
    min-height: 4px !important;
}


/* =========================================================
   23. DESKTOP — KEEP PAGE COMPACT
   ========================================================= */

@media (min-width: 821px) {

    .section {
        padding: 58px 0 !important;
    }

    .hero {
        min-height: 590px !important;
    }

    .statement {
        padding: 72px 0 !important;
    }

    .vision {
        min-height: 410px !important;
    }

}


/* =========================================================
   24. TABLET
   ========================================================= */

@media (max-width: 820px) {

    .section {
        padding: 48px 0 !important;
    }

    .hero {
        min-height: 570px !important;
    }

    .hero-content {
        padding: 105px 0 55px !important;
    }

    .hero-title {
        font-size: clamp(
            38px,
            9vw,
            54px
        ) !important;
    }

    .service-experience {
        min-height: 0 !important;
    }

    .service-detail {
        padding: 32px !important;
    }

    .industry-card {
        min-height: 130px !important;
    }

    .team-grid {
        gap: 9px !important;
    }

}


/* =========================================================
   25. MOBILE
   ========================================================= */

@media (max-width: 560px) {

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

    .section {
        padding: 42px 0 !important;
    }

    .topbar {
        height: 26px !important;
    }

    .topbar-inner {
        height: 26px !important;
    }

    .site-header {
        top: 26px !important;
    }

    .nav-inner {
        min-height: 58px !important;
    }

    .brand {
        width: 105px !important;
    }

    .brand img {
        height: 32px !important;
    }

    .quote-button {
        min-height: 36px !important;
        padding: 0 10px !important;
        font-size: 8px !important;
    }

    .hero {
        min-height: 540px !important;
    }

    .hero-content {
        padding: 105px 0 45px !important;
    }

    .hero-title {
        font-size: 40px !important;
    }

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

    .hero-meta {
        gap: 18px !important;
        margin-top: 28px !important;
    }

    .hero-meta strong {
        font-size: 15px !important;
    }

    .track-intro {
        padding: 26px 0 18px !important;
    }

    .track-stat {
        padding: 20px 16px !important;
    }

    .about-image img {
        height: 340px !important;
    }

    .image-badge {
        width: 78px !important;
        height: 78px !important;
    }

    .image-badge strong {
        font-size: 21px !important;
    }

    .statement {
        padding: 58px 0 !important;
    }

    .statement h2 {
        font-size: 29px !important;
    }

    .service-item {
        min-height: 56px !important;
        padding: 0 14px !important;
    }

    .service-detail {
        padding: 28px !important;
    }

    .service-detail h3 {
        font-size: 27px !important;
    }

    .industry-card {
        min-height: 120px !important;
        padding: 17px !important;
    }

    .industry-display {
        padding: 19px 21px !important;
    }

    .industry-display h3 {
        font-size: 22px !important;
    }

    }

    .benefit {
        min-height: 125px !important;
        padding: 17px !important;
    }

    .benefit h3 {
        margin-top: 22px !important;
        font-size: 15px !important;
    }

    .journey-step {
        grid-template-columns: 36px 1fr !important;
        gap: 15px !important;
        padding: 14px 0 !important;
    }

    .journey-number {
        width: 36px !important;
        height: 36px !important;
    }

    .vision {
        min-height: 360px !important;
    }

    .vision h2 {
        font-size: 29px !important;
    }

    .vision-mark {
        margin-top: 28px !important;
        font-size: 62px !important;
    }

    .team-grid {
        gap: 7px !important;
    }

    .team-info {
        padding: 10px !important;
    }

    .team-info h3 {
        font-size: 12px !important;
    }

    .contact-copy,
    .contact-details {
        padding: 28px 22px !important;
    }

    .footer {
        padding: 34px 0 14px !important;
    }

    .footer-links {
        gap: 30px !important;
    }

    .ai-launcher {
        right: 12px !important;
        bottom: 12px !important;
        min-height: 34px !important;
        height: 34px !important;
    }


/* =========================================================
   HSJ JUTLEY
   CONTACT + FOOTER MERGED INTO ONE ROW
   ========================================================= */

.contact-footer {
    background: #071d2d !important;
    color: #ffffff !important;

    padding: 42px 0 14px !important;
}


/* =========================================================
   MAIN ROW
   ========================================================= */

.contact-footer-row {

    display: grid !important;

    grid-template-columns:
        2.3fr
        1.25fr
        1.05fr
        1.25fr
        .85fr
        .85fr !important;

    align-items: stretch !important;

    min-height: 205px !important;

    border-top:
        1px solid rgba(255,255,255,.10) !important;

    border-bottom:
        1px solid rgba(255,255,255,.10) !important;

}


/* =========================================================
   CTA AREA
   ========================================================= */

.contact-footer-intro {

    padding:
        25px 28px 25px 0 !important;

    border-right:
        1px solid rgba(255,255,255,.10) !important;

}


.contact-footer-intro .eyebrow {

    color: #f56621 !important;

    font-size: 8px !important;

    letter-spacing: .16em !important;

}


.contact-footer-intro h2 {

    max-width: 330px !important;

    margin:
        9px 0 0 !important;

    font-size: 27px !important;

    line-height: 1.02 !important;

    font-weight: 500 !important;

}


.contact-footer-intro h2 em {

    color: #f56621 !important;

    font-style: normal !important;

}


.contact-footer-intro p {

    max-width: 320px !important;

    margin:
        10px 0 15px !important;

    color:
        rgba(255,255,255,.62) !important;

    font-size: 9px !important;

    line-height: 1.5 !important;

}


.contact-footer-intro .button {

    min-height: 34px !important;

    padding:
        0 13px !important;

    font-size: 8px !important;

}


/* =========================================================
   INFORMATION COLUMNS
   ========================================================= */

.contact-footer-item {

    padding:
        25px 18px !important;

    border-right:
        1px solid rgba(255,255,255,.10) !important;

}


.contact-footer-item > span,
.contact-footer-links > span {

    display: block !important;

    margin-bottom: 12px !important;

    color: #f56621 !important;

    font-size: 7px !important;

    font-weight: 600 !important;

    letter-spacing: .15em !important;

}


.contact-footer-item p {

    margin: 0 !important;

    color:
        rgba(255,255,255,.70) !important;

    font-size: 9px !important;

    line-height: 1.55 !important;

}


.contact-footer-item a {

    color:
        rgba(255,255,255,.70) !important;

    text-decoration: none !important;

}


.contact-footer-item a:hover {

    color: #ffffff !important;

}


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

.contact-footer-links {

    padding:
        25px 14px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

}


.contact-footer-links a,
.contact-footer-links button {

    display: block !important;

    margin-bottom: 7px !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color:
        rgba(255,255,255,.67) !important;

    font-family: inherit !important;

    font-size: 9px !important;

    line-height: 1.25 !important;

    text-decoration: none !important;

    cursor: pointer !important;

}


.contact-footer-links a:hover,
.contact-footer-links button:hover {

    color: #ffffff !important;

}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.contact-footer-bottom {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding-top: 12px !important;

    color:
        rgba(255,255,255,.38) !important;

    font-size: 7px !important;

}


/* =========================================================
   REMOVE OLD FOOTER SPACING
   ========================================================= */

.contact-footer .footer-main,
.contact-footer .footer-brand,
.contact-footer .footer-links,
.contact-footer .footer-bottom {

    margin: 0 !important;

    padding: 0 !important;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .contact-footer-row {

        grid-template-columns:
            2fr
            1fr
            1fr
            1fr !important;

    }


    .contact-footer-intro {

        grid-column:
            span 2 !important;

    }


    .contact-footer-links {

        padding:
            25px 18px !important;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .contact-footer {

        padding:
            34px 0 12px !important;

    }


    .contact-footer-row {

        display: grid !important;

        grid-template-columns:
            1fr 1fr !important;

        min-height: 0 !important;

    }


    .contact-footer-intro {

        grid-column:
            1 / -1 !important;

        padding:
            25px 0 !important;

        border-right: 0 !important;

        border-bottom:
            1px solid rgba(255,255,255,.10) !important;

    }


    .contact-footer-intro h2 {

        max-width: 300px !important;

        font-size: 25px !important;

    }


    .contact-footer-item {

        padding:
            20px 14px !important;

    }


    .contact-footer-links {

        padding:
            20px 14px !important;

    }


    .contact-footer-bottom {

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 5px !important;

    }

}

/* =========================================================
   HSJ — VISION + OUR PEOPLE
   ONE COMBINED COMPACT SECTION
   ========================================================= */

.vision-people {
    background: #071d2d !important;
    color: #ffffff !important;

    padding: 0 !important;
}


/* =========================================================
   TOP COMBINED ROW
   ========================================================= */

.vision-people-row {

    display: grid !important;

    grid-template-columns:
        1.15fr
        .85fr !important;

    min-height: 330px !important;

    border-bottom:
        1px solid rgba(255,255,255,.10) !important;

}


/* =========================================================
   VISION SIDE
   ========================================================= */

.vision-people-vision {

    padding:
        50px 55px 40px 0 !important;

    border-right:
        1px solid rgba(255,255,255,.10) !important;

}


.vision-people .eyebrow {

    color: #f56621 !important;

    font-size: 8px !important;

    letter-spacing: .16em !important;

}


.vision-people-vision h2 {

    max-width: 700px !important;

    margin:
        14px 0 0 !important;

    font-size:
        clamp(30px, 3.3vw, 46px) !important;

    line-height:
        1.02 !important;

    font-weight:
        500 !important;

    letter-spacing:
        -.035em !important;

}


.vision-people-mark {

    margin-top:
        25px !important;

    color:
        rgba(255,255,255,.07) !important;

    font-size:
        58px !important;

    line-height:
        .8 !important;

    font-weight:
        700 !important;

}


/* =========================================================
   PEOPLE INTRO SIDE
   ========================================================= */

.vision-people-intro {

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    padding:
        40px 0 40px 48px !important;

}


.vision-people-intro h2 {

    max-width:
        400px !important;

    margin:
        12px 0 0 !important;

    font-size:
        clamp(28px, 3vw, 42px) !important;

    line-height:
        1.02 !important;

    font-weight:
        500 !important;

    letter-spacing:
        -.03em !important;

}


.vision-people-intro h2 em {

    color:
        #f56621 !important;

    font-style:
        normal !important;

}


.vision-people-intro p {

    max-width:
        370px !important;

    margin-top:
        14px !important;

    color:
        rgba(255,255,255,.60) !important;

    font-size:
        10px !important;

    line-height:
        1.55 !important;

}


/* =========================================================
   PEOPLE CARDS — SAME COMBINED SECTION
   ========================================================= */

.vision-people-team {

    display:
        grid !important;

    grid-template-columns:
        repeat(4, 1fr) !important;

    gap:
        1px !important;

    background:
        rgba(255,255,255,.10) !important;

}


.vision-people-team .team-card {

    min-width:
        0 !important;

    background:
        #071d2d !important;

}


.vision-people-team .team-photo {

    aspect-ratio:
        1.15 !important;

    background:
        #aeb6bb !important;

}


.vision-people-team .team-info {

    padding:
        13px 14px 15px !important;

}


.vision-people-team .team-info span {

    font-size:
        6px !important;

    letter-spacing:
        .12em !important;

}


.vision-people-team .team-info h3 {

    margin-top:
        5px !important;

    font-size:
        14px !important;

    line-height:
        1.1 !important;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .vision-people-row {

        grid-template-columns:
            1fr !important;

        min-height:
            0 !important;

    }


    .vision-people-vision {

        padding:
            45px 0 35px !important;

        border-right:
            0 !important;

        border-bottom:
            1px solid rgba(255,255,255,.10) !important;

    }


    .vision-people-intro {

        padding:
            35px 0 !important;

    }


    .vision-people-team {

        grid-template-columns:
            repeat(2, 1fr) !important;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .vision-people-vision {

        padding:
            38px 0 28px !important;

    }


    .vision-people-vision h2 {

        font-size:
            29px !important;

    }


    .vision-people-mark {

        font-size:
            48px !important;

    }


    .vision-people-intro {

        padding:
            30px 0 !important;

    }


    .vision-people-intro h2 {

        font-size:
            28px !important;

    }


    .vision-people-team {

        grid-template-columns:
            1fr 1fr !important;

    }


    .vision-people-team .team-info {

        padding:
            10px !important;

    }


    .vision-people-team .team-info h3 {

        font-size:
            12px !important;

    }

}

/* =========================================================
   WHY HSJ — SIX BENEFITS AS ONE CONTINUOUS ORANGE ROW
   ========================================================= */

.why-benefits-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;

    background: #f56621 !important;

    border: 0 !important;
    overflow: hidden !important;
}

.why-benefits-row .benefit {
    min-width: 0 !important;

    padding: 22px 17px 24px !important;

    background: #f56621 !important;
    color: #071d2d !important;

    border: 0 !important;
    border-right: 1px solid rgba(7,29,45,.18) !important;

    transition:
        background .25s ease,
        color .25s ease !important;
}

.why-benefits-row .benefit:last-child {
    border-right: 0 !important;
}

.why-benefits-row .benefit > span {
    display: block !important;

    margin-bottom: 20px !important;

    color: rgba(7,29,45,.55) !important;

    font-size: 7px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
}

.why-benefits-row .benefit h3 {
    margin: 0 0 8px !important;

    color: #071d2d !important;

    font-size: 13px !important;
    line-height: 1.15 !important;

    font-weight: 600 !important;
}

.why-benefits-row .benefit p {
    margin: 0 !important;

    color: rgba(7,29,45,.68) !important;

    font-size: 8px !important;
    line-height: 1.45 !important;
}

.why-benefits-row .benefit:hover {
    background: #071d2d !important;
}

.why-benefits-row .benefit:hover > span {
    color: #f56621 !important;
}

.why-benefits-row .benefit:hover h3 {
    color: #fff !important;
}

.why-benefits-row .benefit:hover p {
    color: rgba(255,255,255,.65) !important;
}


/* =========================================================
   WHY SECTION — BALANCE THE LEFT SIDE
   ========================================================= */

.why-layout {
    display: grid !important;

    grid-template-columns:
        30% 70% !important;

    gap: 0 !important;
    align-items: stretch !important;
}

.why-intro {
    padding-right: 38px !important;
}

.why-intro h2 {
    font-size: 34px !important;
    line-height: 1.05 !important;
}

.why-intro p {
    max-width: 310px !important;
    font-size: 9px !important;
    line-height: 1.55 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

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

    .why-intro {
        padding-right: 0 !important;
        margin-bottom: 25px !important;
    }

    .why-benefits-row {
        grid-template-columns:
            repeat(3, 1fr) !important;
    }

    .why-benefits-row .benefit:nth-child(3) {
        border-right: 0 !important;
    }

    .why-benefits-row .benefit:nth-child(-n+3) {
        border-bottom:
            1px solid rgba(7,29,45,.18) !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .why-benefits-row {
        grid-template-columns:
            repeat(2, 1fr) !important;
    }

    .why-benefits-row .benefit:nth-child(3) {
        border-right:
            1px solid rgba(7,29,45,.18) !important;
    }

    .why-benefits-row .benefit:nth-child(2),
    .why-benefits-row .benefit:nth-child(4),
    .why-benefits-row .benefit:nth-child(6) {
        border-right: 0 !important;
    }

    .why-benefits-row .benefit:nth-child(-n+4) {
        border-bottom:
            1px solid rgba(7,29,45,.18) !important;
    }

    .why-benefits-row .benefit {
        padding: 18px 14px 20px !important;
    }

    .why-benefits-row .benefit h3 {
        font-size: 12px !important;
    }

    .why-benefits-row .benefit p {
        font-size: 8px !important;
    }
}

@media (max-width: 900px) {
    .service-image-wrap { height:220px; }
}
@media (max-width: 560px) {
    .service-image-wrap { height:190px; margin-bottom:18px; }
}

/* =========================================================
   SERVICES — KEEP ROW ICONS INSIDE THE LEFT COLUMN
   ========================================================= */

.services-list {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.service-item {
    position: relative;
    overflow: hidden;
}

.service-item::after {
    right: 28px;
    z-index: 2;
    pointer-events: none;
}

.service-content,
.service-panel,
.service-details {
    position: relative;
    z-index: 1;
}

.service-image-wrap {
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.service-image-wrap img {
    position: relative;
    z-index: 1;
    display: block;
}

/* =========================================================
   SERVICES — FIX SERVICE ROW ARROWS / IMAGE VISIBILITY
   ========================================================= */

.service-experience {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    overflow: hidden;
}

.service-list {
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.service-item {
    position: relative;
    z-index: 6;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 24px;
}

.service-item i {
    position: relative;
    z-index: 7;
    display: block;
    width: 24px;
    text-align: right;
    pointer-events: none;
}

.service-detail {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
}

.service-image-wrap {
    position: relative;
    z-index: 10;
    width: 100%;
    overflow: hidden;
}

.service-image-wrap img {
    position: relative;
    z-index: 11;
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* =========================================================
   HSJ — COMPACT ABOUT / APPROACH ROW
   ========================================================= */

.about-approach {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
}

.about-approach-heading {
    margin-bottom: 28px !important;
}

.about-approach-grid {
    align-items: center !important;
}

.about-approach-image {
    height: 285px !important;
    min-height: 285px !important;
    max-height: 285px !important;
}

.about-approach-image img {
    height: 285px !important;
    min-height: 285px !important;
    max-height: 285px !important;
    object-fit: cover !important;
}

.about-approach-copy {
    justify-content: center !important;
}

.journey-compact {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.journey-compact .journey-step {
    min-height: 54px !important;
    padding: 7px 0 !important;
}

.journey-compact .journey-step h3 {
    margin: 2px 0 !important;
}

.journey-compact .journey-step p {
    margin: 0 !important;
}

@media (max-width: 900px) {

    .about-approach {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .about-approach-image,
    .about-approach-image img {
        height: 260px !important;
        min-height: 260px !important;
        max-height: 260px !important;
    }

}

@media (max-width: 560px) {

    .about-approach-image,
    .about-approach-image img {
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
    }

}

/* =========================================================
   HSJ HERO — THREE IMAGE ROTATION
   ========================================================= */

.hero-background {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
}

.hero-background .hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 1.2s ease !important;
}

.hero-background .hero-image-active {
    opacity: 1 !important;
}

/* =========================================================
   HSJ CUSTOMER SUPPORT MESSAGES
   CUSTOMER SEES SUPPORT — AI RUNS BEHIND IT
   ========================================================= */

.ai-launcher {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;

    width: 58px !important;
    height: 58px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #f56621 !important;
    color: #fff !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    cursor: pointer !important;

    box-shadow: 0 10px 30px rgba(0,0,0,.20) !important;

    z-index: 99999 !important;
}

.ai-launcher:hover {
    transform: translateY(-2px);
}

.support-launcher-icon {
    font-size: 18px !important;
    line-height: 1 !important;
}

.support-launcher-label {
    margin-top: 3px !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}


/* =========================================================
   CHAT WINDOW
   ========================================================= */

.ai-chat {
    position: fixed !important;

    right: 24px !important;
    bottom: 94px !important;

    width: 360px !important;
    height: 520px !important;

    display: flex !important;
    flex-direction: column !important;

    background: #fff !important;

    border-radius: 18px !important;
    overflow: hidden !important;

    border: 1px solid rgba(7,29,45,.10) !important;

    box-shadow: 0 20px 60px rgba(7,29,45,.22) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform: translateY(15px) scale(.97) !important;

    transition:
        opacity .20s ease,
        transform .20s ease,
        visibility .20s ease !important;

    z-index: 99998 !important;
}

.ai-chat.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.support-chat-header {
    flex: 0 0 64px !important;

    display: flex !important;
    align-items: center !important;

    padding: 0 18px !important;

    background: #08a84f !important;
    color: #fff !important;
}

.support-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
}

.support-header-left strong {
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.support-back {
    width: 28px !important;
    height: 28px !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #fff !important;

    font-size: 30px !important;
    line-height: 1 !important;

    cursor: pointer !important;
}


/* =========================================================
   MESSAGE HOME
   ========================================================= */

.support-chat-home {
    flex: 1 1 auto !important;

    padding: 24px 18px !important;

    overflow-y: auto !important;

    background: #fff !important;
}

.support-chat-intro h3 {
    margin: 0 0 20px !important;

    color: #222 !important;

    font-size: 20px !important;
    font-weight: 500 !important;
}


/* =========================================================
   NEW CONVERSATION
   ========================================================= */

.support-new-conversation {
    width: 100% !important;
    min-height: 78px !important;

    display: flex !important;
    align-items: center !important;

    gap: 12px !important;

    padding: 13px 14px !important;

    border: 1px solid #bde7ca !important;
    border-radius: 13px !important;

    background: #fff !important;

    box-shadow: 0 0 0 3px rgba(8,168,79,.07) !important;

    cursor: pointer !important;

    text-align: left !important;
}

.support-new-conversation:hover {
    background: #fafafa !important;
}

.support-new-icon {
    width: 36px !important;
    height: 36px !important;

    flex: 0 0 36px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: #f1f1f1 !important;
    color: #333 !important;

    font-size: 21px !important;
}

.support-new-text {
    flex: 1 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 4px !important;
}

.support-new-text strong {
    color: #252525 !important;
    font-size: 14px !important;
}

.support-new-text small {
    color: #8a8a8a !important;
    font-size: 11px !important;
}

.support-new-arrow {
    color: #08a84f !important;
    font-size: 22px !important;
}


/* =========================================================
   RECENT CONVERSATIONS
   ========================================================= */

.support-recent {
    margin-top: 28px !important;
}

.support-recent h4 {
    margin: 0 0 12px !important;

    color: #444 !important;

    font-size: 13px !important;
    font-weight: 500 !important;
}

.support-conversation {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    padding: 10px 3px !important;

    border: 0 !important;
    border-bottom: 1px solid #eee !important;

    background: transparent !important;

    cursor: pointer !important;

    text-align: left !important;
}

.support-conversation-icon {
    width: 38px !important;
    height: 38px !important;

    flex: 0 0 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: #f56621 !important;
    color: #fff !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}

.support-conversation-content {
    flex: 1 !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 3px !important;
}

.support-conversation-title {
    color: #777 !important;
    font-size: 11px !important;
}

.support-conversation-message {
    color: #222 !important;
    font-size: 13px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.support-conversation-meta {
    display: flex !important;
    align-items: center !important;

    gap: 7px !important;
}

.support-conversation-meta small {
    color: #999 !important;
    font-size: 9px !important;
}

.support-unread {
    width: 18px !important;
    height: 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: #08a84f !important;
    color: #fff !important;

    font-size: 9px !important;
}

.support-chevron {
    color: #999 !important;
    font-size: 20px !important;
}


/* =========================================================
   ACTUAL CONVERSATION
   ========================================================= */

.support-conversation-view {
    display: none !important;

    flex: 1 1 auto !important;
    min-height: 0 !important;

    flex-direction: column !important;
}

.ai-chat.show-conversation .support-chat-home {
    display: none !important;
}

.ai-chat.show-conversation .support-conversation-view {
    display: flex !important;
}

.support-conversation-top {
    flex: 0 0 58px !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    padding: 0 14px !important;

    background: #fff !important;

    border-bottom: 1px solid #eee !important;
}

.support-conversation-back {
    width: 28px !important;
    height: 28px !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #333 !important;

    font-size: 28px !important;

    cursor: pointer !important;
}

.support-conversation-top div {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.support-conversation-top strong {
    color: #222 !important;
    font-size: 13px !important;
}

.support-conversation-top span {
    color: #08a84f !important;
    font-size: 9px !important;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.ai-chat .ai-messages {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    overflow-y: auto !important;

    padding: 16px !important;

    background: #fafafa !important;
}

.ai-chat .ai-message {
    display: flex !important;
    gap: 9px !important;

    margin-bottom: 14px !important;
}

.ai-chat .message-avatar {
    width: 30px !important;
    height: 30px !important;

    flex: 0 0 30px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: #f56621 !important;
    color: #fff !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}

.ai-chat .message-content {
    max-width: 82% !important;

    padding: 11px 13px !important;

    background: #fff !important;

    border-radius: 4px 14px 14px 14px !important;

    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}

.ai-chat .message-content p {
    margin: 0 0 8px !important;

    color: #333 !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
}

.ai-chat .message-content p:last-child {
    margin-bottom: 0 !important;
}


/* =========================================================
   QUICK QUESTIONS
   ========================================================= */

.ai-chat .ai-quick-actions {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 7px !important;

    margin-top: 10px !important;
}

.ai-chat .ai-quick-actions button {
    padding: 7px 10px !important;

    border: 1px solid #ddd !important;
    border-radius: 15px !important;

    background: #fff !important;

    color: #333 !important;

    font-size: 10px !important;

    cursor: pointer !important;
}


/* =========================================================
   INPUT
   ========================================================= */

.ai-chat .ai-input-area {
    flex: 0 0 55px !important;

    display: flex !important;
    align-items: center !important;

    gap: 8px !important;

    padding: 8px 12px !important;

    background: #fff !important;

    border-top: 1px solid #eee !important;
}

.ai-chat .ai-input-area input {
    flex: 1 !important;

    height: 38px !important;

    padding: 0 14px !important;

    border: 1px solid #ddd !important;
    border-radius: 20px !important;

    outline: none !important;

    font-family: inherit !important;
    font-size: 13px !important;
}

.ai-chat .ai-input-area input:focus {
    border-color: #08a84f !important;
}

.ai-chat .ai-input-area button {
    width: 38px !important;
    height: 38px !important;

    flex: 0 0 38px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #08a84f !important;
    color: #fff !important;

    font-size: 17px !important;

    cursor: pointer !important;
}


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

.support-chat-footer {
    flex: 0 0 52px !important;

    display: flex !important;

    border-top: 1px solid #eee !important;

    background: #fff !important;
}

.support-footer-item {
    flex: 1 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 2px !important;

    border: 0 !important;
    background: transparent !important;

    color: #777 !important;

    font-size: 9px !important;

    cursor: pointer !important;
}

.support-footer-item.active {
    color: #08a84f !important;
}

.support-footer-icon {
    font-size: 18px !important;
    line-height: 1 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px) {

    .ai-chat {
        right: 10px !important;
        bottom: 82px !important;

        width: calc(100vw - 20px) !important;

        height: min(560px, calc(100vh - 100px)) !important;
    }

    .ai-launcher {
        right: 14px !important;
        bottom: 14px !important;
    }

}

/* =========================================================
   HSJ HERO — LIVE CAMPAIGN
   ========================================================= */

.hero-slide {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
}


/* ---------------------------------------------------------
   HERO SLIDE COPY
   --------------------------------------------------------- */

.hero-slide-kicker {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 11px;

    max-width: 760px;

    margin-top: 4px;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .17em;
    text-transform: uppercase;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.hero-slide-kicker::before {
    content: "";

    width: 38px;
    height: 2px;

    flex: 0 0 auto;

    background: var(--orange);
}


.hero-copy-transition {
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.hero-copy-changing {
    opacity: 0 !important;
    transform: translateY(8px);
}


/* ---------------------------------------------------------
   HERO DOTS
   --------------------------------------------------------- */

.hero-slide-indicators {
    position: absolute;

    right: 32px;
    bottom: 28px;

    z-index: 20;

    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-dot {
    width: 26px;
    height: 2px;

    padding: 0;

    background: rgba(255,255,255,.30);

    transition:
        width .3s ease,
        background .3s ease;
}

.hero-dot.is-active {
    width: 48px;
    background: var(--orange);
}

.hero-dot:hover {
    background: #ffffff;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .hero-slide-kicker {
        font-size: 8px;
        letter-spacing: .13em;
    }

    .hero-slide-kicker::before {
        width: 28px;
    }

    .hero-slide-indicators {
        right: 18px;
        bottom: 20px;
    }

    .hero-dot {
        width: 20px;
    }

    .hero-dot.is-active {
        width: 34px;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .hero-slide,
    .hero-copy-transition,
    .hero-slide-kicker {
        transition: none !important;
    }

}

/* =========================================================
   HSJ HERO — REDUCED TYPOGRAPHY
   ========================================================= */

/* Company name */
.hero-brand-name {
    font-size: 13px !important;
    letter-spacing: .10em !important;
    line-height: 1.15 !important;
}

/* Small campaign heading */
.hero-slide-kicker {
    font-size: 10px !important;
    letter-spacing: .16em !important;
    line-height: 1.3 !important;
}

/* Main hero heading */
.hero-title,
.hero h1 {
    font-size: clamp(42px, 5vw, 68px) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    max-width: 760px !important;
}

/* Hero paragraph */
.hero-text,
.hero-description {
    font-size: 13px !important;
    line-height: 1.6 !important;
    max-width: 560px !important;
}

/* Hero buttons */
.hero-actions {
    gap: 12px !important;
    margin-top: 26px !important;
}

.hero-actions .button,
.hero-actions .btn {
    font-size: 10px !important;
    padding: 13px 18px !important;
}

/* Bottom statistics */
.hero-meta strong {
    font-size: 17px !important;
}

.hero-meta span {
    font-size: 8px !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hero-brand-name {
        font-size: 11px !important;
    }

    .hero-slide-kicker {
        font-size: 9px !important;
    }

    .hero-title,
    .hero h1 {
        font-size: clamp(38px, 7vw, 56px) !important;
    }

    .hero-text,
    .hero-description {
        font-size: 13px !important;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .hero-brand-name {
        font-size: 9px !important;
        letter-spacing: .07em !important;
    }

    .hero-slide-kicker {
        font-size: 8px !important;
        letter-spacing: .12em !important;
    }

    .hero-title,
    .hero h1 {
        font-size: 40px !important;
        line-height: .96 !important;
    }

    .hero-text,
    .hero-description {
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hero-title,
    .hero h1 {
        font-size: 34px !important;
    }

    .hero-text,
    .hero-description {
        font-size: 11px !important;
    }

}

/* =========================================================
   HSJ HERO — NATURAL IMAGE COLOUR
   Final override: photographs must not be darkened
   ========================================================= */

.hero-overlay,
.hero-image-slideshow::after {
    background: none !important;
    opacity: 0 !important;
    display: none !important;
}

.hero-background img,
.hero-slide img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}


/* =====================================================
   OUR APPROACH — EDUCATION IMAGE
   ===================================================== */

.statement {
    position: relative !important;
    overflow: hidden !important;
}

.statement-layout {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr) !important;
    gap: 58px !important;
    align-items: center !important;
}

.statement-copy {
    min-width: 0 !important;
}

.statement-copy h2 {
    max-width: 760px !important;
}

.statement-copy p {
    max-width: 520px !important;
}

.statement-image {
    width: 100% !important;
    height: 280px !important;
    overflow: hidden !important;
    background: transparent !important;
}

.statement-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

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

@media (max-width: 820px) {
    .statement-layout {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .statement-image {
        height: 260px !important;
    }
}

@media (max-width: 560px) {
    .statement-image {
        height: 220px !important;
    }
}

/* =========================================================
   HSJ SERVICES — FULL-FRAME SERVICE IMAGES
   Final override: service photographs fill their allocated
   image frame consistently across all six service items.
   ========================================================= */

.service-image-wrap {
    position: relative !important;
    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--navy-2) !important;
    display: block !important;
}

.service-image-wrap img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
}

.service-image-wrap img.is-changing {
    opacity: .18 !important;
    transform: scale(1.025) !important;
}

/* Keep the image label inside the photograph without creating extra space. */
.service-image-wrap span {
    z-index: 12 !important;
}

@media (max-width: 900px) {
    .service-image-wrap {
        height: 220px !important;
        min-height: 220px !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 820px) {
    .service-image-wrap {
        height: 230px !important;
        min-height: 230px !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 560px) {
    .service-image-wrap {
        height: 200px !important;
        min-height: 200px !important;
        margin-bottom: 18px !important;
    }
}

/* =========================================================
   HSJ FINAL — COMPLETE SERVICE IMAGE + PARTNER LOGO FIX
   This block is intentionally at the end so it overrides
   earlier duplicate/legacy rules in this stylesheet.
   ========================================================= */

/* SERVICES — IMAGE MUST STAY IN THE RIGHT PANEL */
.service-experience {
    overflow: hidden !important;
}

.service-list {
    position: relative !important;
    z-index: 20 !important;
    overflow: hidden !important;
}

.service-item {
    position: relative !important;
    z-index: 21 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.service-item i {
    position: relative !important;
    z-index: 22 !important;
    pointer-events: none !important;
}

.service-detail {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 58px !important;
}

.service-image-wrap {
    position: relative !important;
    z-index: 10 !important;
    width: calc(100% + 116px) !important;
    height: 255px !important;
    min-height: 255px !important;
    margin-top: -58px !important;
    margin-left: -58px !important;
    margin-right: -58px !important;
    margin-bottom: 28px !important;
    overflow: hidden !important;
    background: #0d2940 !important;
}

.service-image-wrap img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 11 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 1 !important;
    transform: none !important;
}

.service-image-wrap img.is-changing {
    opacity: .18 !important;
    transform: scale(1.025) !important;
}

.service-image-wrap span {
    position: absolute !important;
    left: 18px !important;
    bottom: 16px !important;
    z-index: 20 !important;
    padding: 7px 10px !important;
    background: rgba(7,27,45,.82) !important;
    color: #fff !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* PARTNER LOGOS — CONSISTENT STAGE, NO CROPPING */
.partner-logo {
    position: relative !important;
    width: 184px !important;
    height: 112px !important;
    flex: 0 0 184px !important;
    margin-right: 14px !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(7,27,45,.085) !important;
}

.partner-logo img,
.partner-apa img,
.partner-jubilee img,
.partner-pacis img,
.partner-aar img,
.partner-old-mutual img,
.partner-first img,
.partner-heritage img,
.partner-vumi img,
.partner-geminia img,
.partner-bupa img,
.partner-ga img,
.partner-cigna img,
.partner-now img,
.partner-april img,
.partner-axa img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none;
}

.partner-logo:hover img {
    transform: scale(1.04) !important;
}

/* TABLET */
@media (max-width: 900px) {
    .service-detail {
        padding: 40px !important;
    }

    .service-image-wrap {
        width: calc(100% + 80px) !important;
        height: 225px !important;
        min-height: 225px !important;
        margin-top: -40px !important;
        margin-left: -40px !important;
        margin-right: -40px !important;
        margin-bottom: 25px !important;
    }

    .partner-logo {
        width: 162px !important;
        height: 98px !important;
        flex-basis: 162px !important;
        margin-right: 11px !important;
        padding: 7px !important;
    }
}

/* MOBILE */
@media (max-width: 560px) {
    .service-detail {
        padding: 25px !important;
    }

    .service-image-wrap {
        width: calc(100% + 50px) !important;
        height: 205px !important;
        min-height: 205px !important;
        margin-top: -25px !important;
        margin-left: -25px !important;
        margin-right: -25px !important;
        margin-bottom: 22px !important;
    }

    .service-image-wrap span {
        left: 12px !important;
        bottom: 12px !important;
    }

    .partner-logo {
        width: 142px !important;
        height: 88px !important;
        flex-basis: 142px !important;
        margin-right: 9px !important;
        padding: 6px !important;
    }
}