:root {
    --hv4-blue: #17479d;
    --hv4-grad: linear-gradient(90deg, #215cc2 0%, #0d337a 100%);
    --hv4-ink: #26262b;
    --hv4-muted: #6c6c6c;
    --hv4-orange: #faa635;
    --hv4-red: #d7182a;
    --hv4-teal: #108fbb;
    --hv4-line: #dbe5e9;
    --hv4-line-soft: #f0f1f4;
    --hv4-wrap: min(1620px, calc(100% - 32px));
}

*, *::before, *::after { box-sizing: border-box; }

body.hv4 { margin: 0; }
.hv4-standalone-top { padding-top: 24px; }
.hv4 img { display: block; max-width: 100%; }
.hv4 a { color: inherit; text-decoration: none; }
.hv4 :where(p, h1, h2, h3, h4, ul, dl, dd, figure, blockquote) { margin: 0; padding: 0; }
.hv4 :where(ul) { list-style: none; }
.hv4 button {  cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hv4-wrap { margin: 0 auto; }

/* Missing-asset placeholder (see home-v4.blade.php) */
.hv4-slot {
    display: block;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, #eef1f5 0 10px, #e5e9ef 10px 20px);
}
.hv4-ai .hv4-slot, .hv4-career .hv4-slot { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 10px, rgba(255,255,255,.14) 10px 20px); }

/* ---------- Shared type ---------- */
.hv4-h2 { font-size: clamp(25px, 2.5vw, 48px); font-weight: 400; }
.hv4-h2--light { color: #fff; }
.hv4-h3 { font-size: clamp(20px, 1.67vw, 32px); font-weight: 400;  line-height: 1.19; color: #fff; }
.hv4-h3--dark { color: var(--hv4-ink);  }
.hv4-muted {
    color: var(--hv4-muted);
    /* font-size: clamp(17px, 1.04vw, 20px);  */
    line-height: 1.3;
    min-height: 60px;
    }

.hv4-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.hv4-head--tight { margin-bottom: 36px; }
.hv4-link { display: inline-flex; align-items: center; gap: 6px; color: var(--hv4-blue) !important; font-size: clamp(18px, 1.25vw, 24px); font-weight: 500; line-height: 1; white-space: nowrap; }
.hv4-link .hv4-arrow { display: block; } /* no inline baseline gap, so text and arrow centre on the same line */
.hv4-link--sm { font-size: 20px; }
.hv4-arrow { flex: none; transition: transform .5s cubic-bezier(.22, 1, .36, 1), color .5s ease; }
.hv4-link:hover .hv4-arrow, .hv4-ai__item:hover .hv4-arrow { transform: translateX(4px); }
/* Blog "Read More": arrow turns orange on hover, matching its orange label */
.hv4-feature:hover .hv4-link--sm .hv4-arrow, .hv4-link--sm:hover .hv4-arrow, .hv4-link--sm:focus-visible .hv4-arrow { color: var(--hv4-orange) !important; }
/* AI cards: "Know More" and its arrow both turn orange on hover */
.hv4-ai__item:hover .hv4-arrow, .hv4-ai__item:focus-visible .hv4-arrow,
.hv4-ai__item:hover .hv4-ai__more .hv4-ai__more-text, .hv4-ai__item:focus-visible .hv4-ai__more .hv4-ai__more-text { color: var(--hv4-orange) !important; }
/* Mobile: "Read More" is always shown, so its arrow is always orange too */
@media (max-width: 800px) {
    .hv4-link--sm .hv4-arrow { color: var(--hv4-orange) !important; }
}

.hv4-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 16px;
    padding: 10px 20px; border: 0; border-radius: 100px;
    font-weight: 600; white-space: nowrap;
    transition: transform .2s, box-shadow .2s;
}
.hv4-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(13, 51, 122, .25); }
/* Hover: the Subscribe blue gradient fades in over the white, with a #335799 outline and white text */
.hv4-btn--white {
    position: relative; isolation: isolate; overflow: hidden;
    background: #fff; color: var(--hv4-blue) !important; border: 1px solid #fff;
    transition: transform .2s, box-shadow .2s, border-color .3s, color .3s;
}
.hv4-btn--white::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: linear-gradient(90deg, #215cc2 0%, #0d337a 50%, #215cc2 100%) 100% 0 / 200% 100%;
    opacity: 0; transition: opacity .3s ease;
}
.hv4-btn--white:hover { border-color: #335799; color: #fff !important;background: #ffffff36; }
.hv4-btn--white:hover::before { opacity: 1; }
/* Gradient is drawn twice as wide (light → dark → light) and slid on hover, so the colours swap sides smoothly */
.hv4-btn--grad {
    background: linear-gradient(90deg, #215cc2 0%, #0d337a 50%, #215cc2 100%) 0 0 / 200% 100%;
    color: #fff !important;
    transition: transform .2s, box-shadow .2s, background-position .4s ease;
}
.hv4-btn--grad:hover { background-position: 100% 0; }
.hv4-btn--sm { height: 45px;  font-size: 15px; }
@media (max-width: 767px) {
    .hv4-btn--sm { height: 42px; width: 246px; font-size: 15px; }
}

/* ---------- Hero ---------- */
.hv4-hero { position: relative; padding-top: 24px; isolation: isolate; }
/* Soft cyan gradient behind the hero, full browser width (the section itself sits in the 1600px container; .hv4 clips any overflow) */
.hv4-hero::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: url('../../img/website/custom/hero-bg.jpg') center / cover no-repeat; pointer-events: none; }
.hv4-hero__bg { position: absolute; inset: 0 0 auto; width: 100%; height: 919px; object-fit: cover; opacity: .7; z-index: -1; }

.hv4-nav {
    position: relative;
    z-index: 10;
    width: var(--hv4-wrap);
    height: 72px;
    /* margin: 0 auto; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* padding: 0 28px; */
    background: #fff;
    border-radius: 12px;
}
.hv4-nav__logo { flex: none; display: block; width: 135px; }
.hv4-nav__logo img { width: 135px; height: auto; }
.hv4-nav__links { display: flex; gap: 40px; }
.hv4-nav__links a { display: inline-flex; align-items: center; gap: 8px; color: #3d3d3d; font-size: 18px; font-weight: 500; line-height: 21px; white-space: nowrap; }
.hv4-nav__links a:hover { color: var(--hv4-blue); }
.hv4-nav__actions { display: flex; align-items: center; gap: 20px; }
.hv4-nav__country { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; }
.hv4-nav__country svg:first-child { outline: 1.2px solid #fff; }
.hv4-nav__actions .hv4-btn { height: 47px; padding: 13px 22px; font-size: 18px; font-weight: 500; }
.hv4-nav__toggle { display: none; width: 40px; height: 40px; padding: 10px 8px; background: none; border: 0; flex-direction: column; justify-content: space-between; }
.hv4-nav__toggle span { display: block; height: 2px; background: #3d3d3d; border-radius: 2px; }

.hv4-hero__title {
    max-width: 900px; margin: 55px auto 0; padding: 0 16px;
    text-align: center; color: #000;
    font-size: clamp(25px, 2.93vw, 62px); font-weight: 600; letter-spacing: -.048em; line-height: 1.18;
}

@media(max-width:1600px)
{
    .hv4-hero__title {
        margin: 20px auto 0;
        line-height: 1.04;
    }
}
.hv4-hero__title span { color: var(--hv4-blue); }

.hv4-tabs { display: flex; justify-content: center; gap: 100px; margin: 50px auto 40px; padding: 0 16px; }
@media(max-width:1600px)
{
.hv4-tabs {
    margin: 30px auto 18px;
}
}

.hv4-tab {
    position: relative;
    padding: 0 0 20px;
    background: none;
    font-weight: 500;
    border: 0;
    color: rgb(0 0 0 / 38%);
    font-size: 1.2rem;
    line-height: 24px;
    white-space: nowrap;
    font-family: 'Maven Pro', sans-serif;
}
@media(max-width:1600px)
{
.hv4-tab 
{
    padding:0 0 12px;
    font-size: 1rem;
}
}

@media (max-width: 1024px) {
    .hv4-tab {
        font-size: 1rem;
    }
}
.hv4-tab::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 90px; height: 3px; background: var(--hv4-orange); transform: translateX(-50%) scaleX(0); transition: transform .25s; }
.hv4-tab.is-active { color: #000; font-weight: 500; }
/* Hidden bold copy of the label reserves the bold width, so tabs don't shift when one turns bold */
.hv4-tab::before { content: attr(data-text); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
.hv4-tab.is-active::after { transform: translateX(-50%) scaleX(1); }
/* No box on mouse click; keyboard users still get a focus ring */
.hv4-tab:focus { outline: none; }
.hv4-tab:focus-visible { outline: 2px solid var(--hv4-blue); outline-offset: 6px; border-radius: 4px; }

.hv4-compare {
    position: relative;
    /* width: var(--hv4-wrap); */
    height: 500px;
    margin: 0 auto;
    border-radius: 30px 30px 0 0;
    overflow: hidden;
    user-select: none;
    border: 1px solid #e7e7e7;
}
@media(max-width:1600px)
{
    .hv4-compare 
    {
        height: 364px;
    }
}
@media(max-width:1024px)
{
    .hv4-compare 
    {
        height: 365px;
    }
}
/* Desktop/tablet: height follows the banner's 1302×460 shape so the full photo shows, not a cropped strip */

.hv4-compare { cursor: ew-resize; touch-action: pan-y; }
.hv4-compare.is-dragging, .hv4-compare.is-dragging * { cursor: ew-resize; }
.hv4 .hv4-compare__handle { cursor: ew-resize; } /* beats ".hv4 button" pointer */
.hv4-compare img { -webkit-user-drag: none; }
.hv4-glass { cursor: auto; }
/* Tab change: no left/right slide; the new panel just appears in place */
/* Autoplay: the active tab's underline fills like a progress bar over the script's 6s (AUTOPLAY_MS);
   the script adds .is-paused while the photos/tabs are hovered or the divider is dragged. */
.hv4-tabs.is-auto .hv4-tab.is-active::after { transform-origin: left center; animation: hv4-progress 6s linear forwards; }
@keyframes hv4-progress { from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } }
.hv4-tabs.is-auto.is-paused .hv4-tab.is-active::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .hv4-compare[data-dir]:not([hidden]) { animation: none; }
    .hv4-tabs.is-auto .hv4-tab.is-active::after { animation: none; transform: translateX(-50%) scaleX(1); }
}
/* Both photos span the full panel and never move or resize; the divider drags 0–100% and clips the
   before photo. Each panel sets --before-focus / --after-focus (vertical focus point) so the cropped
   top/bottom keeps the subject in view. */
.hv4-compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hv4-compare__img--before { object-position: center var(--before-focus, 50%); clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 1; }
.hv4-compare__img--after { object-position: center var(--after-focus, 50%); }
.hv4-compare__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: #fff; z-index: 2; }
.hv4-compare__handle {
    position: absolute; top: 50%; left: var(--pos); z-index: 3; margin-top: -26px; /* vertically centred at every height */
    width: 52px; height: 52px; margin-left: -26px; padding: 0; border: 0; background: none; border-radius: 50%;
    filter: drop-shadow(0 6.12px 9.18px rgba(0, 0, 0, .25)); cursor: ew-resize; touch-action: none;
}
.hv4-compare__handle img { position: absolute; }
.hv4-compare__ring { inset: 0; }
.hv4-compare__knob { top: 3px; left: 3px; }
.hv4-compare__chev { top: 20px; width: 8px; height: 13px; }
.hv4-compare__chev--l { left: 14px; }
.hv4-compare__chev--r { left: 30px; }.hv4-glass {
    position: absolute; z-index: 4; width: 305px;
    background: rgba(255, 255, 255, .77); border-radius: 19px 19px 0 0;
    -webkit-backdrop-filter: blur(29px); backdrop-filter: blur(29px);
    color: #100101;
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

@media(max-width:1600px)
{
    .hv4-glass {
        width: 285px;
    }
}

/* The slider script clips each card (inline clip-path) where the divider passes over it */

.hv4-label { font-size: 12px !important; font-weight: 700; letter-spacing: 1.6px; color: var(--hv4-red); margin-bottom: 10px !important; }
.hv4-glass--barrier { left: 34px; bottom: 41px; min-height: 152px; padding: 16px 19px 17px 20px; }
.hv4-glass--breakthrough { right: 42px; bottom: 0;  padding: 20px 20px 20px 20px; width: 360px; } /* wider than the barrier card so the product name, chips and stat fit in the photo height */
@media (max-width: 1600px) {
    .hv4-glass--breakthrough { width: 370px; padding: 16px 18px; }
    .hv4-glass--breakthrough .hv4-glass__title { font-size: 16px; }
    .hv4-glass--breakthrough .hv4-glass__sector { font-size: 12px; margin-bottom: 10px !important; padding-bottom: 8px; }
    .hv4-glass--breakthrough .hv4-label { margin-bottom: 6px !important; }
    .hv4-glass--breakthrough .hv4-glass__chips { gap: 6px; margin: 8px 0 10px; }
    .hv4-glass--breakthrough .hv4-glass__chips span { padding: 5px 12px; }
}

.hv4-glass__lead { font-weight: 500; line-height: 1.3;}
/* Product name + sector at the top of the breakthrough card */
.hv4-glass__title { font-size: 18px; font-weight: 700; line-height: 1.25; margin-bottom: 2px !important; }
.hv4-glass__sector { font-size: 13px; color: #5d6265; margin-bottom: 14px !important; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.hv4-glass__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.hv4-glass__chips span { padding: 7px 14px; border: 1px solid #fff; border-radius: 100px; background: rgba(238, 237, 237, .32); font-size: 12.5px; }
.hv4-glass__stat-label { font-weight: 500; margin-bottom: 20px; } /* sits under the number, as in the Figma */
.hv4-glass__stat {
    margin-bottom: 2px;
    font-size: 35px; line-height: 40px; font-weight: 700; letter-spacing: -1px;
    background: linear-gradient(90deg, #cc820e 0%, #a7181d 98.9%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Trusted by ---------- */
.hv4-trusted { display: flex; align-items: center; gap: 23px; width: var(--hv4-wrap); height: 172px; margin: 0 auto; }
@media(max-width:1600px)
{
    .hv4-trusted {
        height: 130px;
    }

    .hv4-glass__stat {
        font-size: 30px; line-height: 30px;
    }
    .hv4-glass__stat-label {  margin-bottom: 10px;font-size:14px; }
    .hv4-glass__lead { font-size: 16px;}
}
.hv4-trusted__label {flex: none;width: 187px;color: #5d6265;font-size: 20px;line-height: 23px;}
/* Manual slider: arrows either side of a scrollable logo row (no auto-scroll) */
.hv4-trusted__slider { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.hv4-trusted__viewport { flex: 1; min-width: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.hv4-trusted__viewport::-webkit-scrollbar { display: none; }
.hv4-trusted__track { display: flex; align-items: center; gap: 62px; width: max-content; }
.hv4-trusted__logo { flex: none; display: block; }
.hv4-trusted__nav { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #d9dde3; border-radius: 50%; background: #fff; color: var(--hv4-blue); transition: background .3s, color .3s, border-color .3s, opacity .3s; }
.hv4-trusted__nav:hover:not(:disabled) { background: var(--hv4-blue); border-color: var(--hv4-blue); color: #fff; }
.hv4-trusted__nav:disabled { opacity: .35; cursor: default; }
.hv4-trusted__logo img { width: 100%; height: 100%; object-fit: contain; }
/* Per-logo box sizes (were inline styles) */
.hv4-trusted__logo--world-bank { width: 109px; height: 47px; }
.hv4-trusted__logo--govt-odisha { width: 159px; height: 57px; }
.hv4-trusted__logo--govt-kenya { width: 168px; height: 57px; }
.hv4-trusted__logo--omc { width: 160px; height: 47px; }
.hv4-trusted__logo--spds-tamil-nadu { width: 195px; height: 57px; }
.hv4-trusted__logo--wrsc { width: 188px; height: 56px; }
.hv4-trusted__logo--dgm-chhattisgarh { width: 201px; height: 56px; }
.hv4-trusted__logo--odisha { width: 158px; height: 48px; }
.hv4-trusted__logo--trademark-africa { width: 152px; height: 53px; }
.hv4-trusted__logo--swasthya-bima-hp { width: 228px; height: 56px; }
.hv4-trusted__logo--moa-ethiopia { width: 223px; height: 56px; }
.hv4-trusted__logo--nhm-india { width: 223px; height: 56px; }
.hv4-trusted__logo--ministry-of-mines { width: 136px; height: 56px; }
.hv4-trusted__logo--bis { width: 216px; height: 56px; }
.hv4-trusted__logo--dmg-jharkhand { width: 198px; height: 56px; }
.hv4-trusted__logo--kephis { width: 194px; height: 56px; }
.hv4-trusted__logo--auric { width: 218px; height: 56px; }
.hv4-trusted__logo--nlc-india { width: 124px; height: 56px; }
.hv4-trusted__logo--adani { width: 160px; height: 56px; }
.hv4-trusted__logo--gmdc { width: 183px; height: 56px; }
.hv4-trusted__logo--jsw { width: 118px; height: 56px; }
/* Track holds the logo set twice, each followed by one 62px gap, so half its width is exactly one loop */
@keyframes hv4-marquee { to { transform: translateX(-50%); } }

/* ---------- Governed Intelligence ---------- */
.hv4-ai { background: linear-gradient(160deg, #215cc2 0%, #0d337a 100%); color: #fff; } /* vertical spacing: .section (common.css) */
.hv4-ai .hv4-h2 { margin-bottom: 40px; }
.hv4-ai__grid { display: grid; grid-template-columns: 530px 1fr; gap: 155px; position: relative; }
.hv4-ai__grid::before { content: ''; position: absolute; top: 0; bottom: -5px; left: 609px; border-left: 1px solid rgba(255, 255, 255, .2); }
.hv4-ai__foundry, .hv4-ai__services { display: flex; flex-direction: column; align-items: flex-start; }
.hv4-ai__media { position: relative; width: 100%; height: 318px; margin-bottom: 25px; }
@media(max-width:1600px)
{
    .hv4-ai__media {
        height: 260px;
    }
}

.hv4-ai__img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px 30px 0 0;}
.hv4-ai__badge { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 17px; width: 229px; height: 64px; padding: 0 25px;    border-radius: 20px 0 0 0; background: #fff; color: var(--hv4-ink); font-size: 16px; font-weight: 500; line-height: 18px; }
.hv4-ai__badge-icon { flex: none; width: 41px; height: 33px; object-fit: contain; }
.hv4-ai__text { color: rgba(255, 255, 255, .7); 
    /* font-size: clamp(17px, 1.04vw, 20px);  */
    line-height: 1.3; }
.hv4-ai__foundry .hv4-ai__text { max-width: 482px; margin-top: 15px; }
.hv4-pills { display: flex; flex-wrap: wrap; gap: 8px; max-width: 474px; margin: 28px 0 36px; }
.hv4-pills li { padding: 6px 13px; border-radius: 100px; background: rgba(255, 255, 255, .1); font-size: 12.5px; }
.hv4-ai__foundry .hv4-btn { margin-top: auto; }
.hv4-ai__services { min-width: 0; }
.hv4-ai__list { display: grid; grid-template-columns: repeat(2, minmax(0, 345px)); column-gap: 131px; row-gap: 76px; margin-bottom: 30px; }
.hv4-ai__item { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
.hv4-ai__icon { width: 52px !important; height: 52px !important; margin-bottom: 20px; }
.hv4-ai__item .hv4-ai__text { margin: 7px 0 20px; }
/* "Know More" label slides out next to the arrow on hover */
.hv4-ai__more { display: inline-flex; align-items: center; }
.hv4-link--sm .hv4-ai__more .hv4-ai__more-text { color: var(--hv4-orange); } /* blog "Read More" sits on a light background, so it matches the orange hover arrow */
.hv4-ai__more .hv4-arrow { display: block; }
/* The label opens with a grid 0fr -> 1fr column, which animates to the text's exact width (max-width overshoots and makes it stop abruptly).
   Width, spacing, fade and slide share one duration and curve so everything glides out together. */
.hv4-ai__more .hv4-ai__more-text { display: grid; grid-template-columns: minmax(0, 0fr); margin: 0; overflow: hidden; white-space: nowrap; opacity: 0; transform: translateX(-6px); color: var(--bs-body-bg); font-size: 18px; font-weight: 500; line-height: 1;
    transition: grid-template-columns .6s cubic-bezier(.25, .8, .25, 1), margin .6s cubic-bezier(.25, .8, .25, 1), opacity .45s ease, transform .6s cubic-bezier(.25, .8, .25, 1), color .4s ease; }
.hv4-ai__item:hover .hv4-ai__more-text, .hv4-ai__item:focus-visible .hv4-ai__more-text, .hv4-ai__item:active .hv4-ai__more-text,
.hv4-feature:hover .hv4-ai__more-text, .hv4-link--sm:hover .hv4-ai__more-text, .hv4-link--sm:focus-visible .hv4-ai__more-text, .hv4-link--sm:active .hv4-ai__more-text { grid-template-columns: minmax(0, 1fr); margin-right: 6px; opacity: 1; transform: none; transition-delay: 0s, 0s, .08s, 0s, 0s; }
/* Below 800px: always shown (no hover on phones) */
@media (max-width: 800px) {
    .hv4-ai__more .hv4-ai__more-text { grid-template-columns: minmax(0, 1fr); opacity: 1; transform: none; margin: 0 4px 0 0; font-size: 16px; } /* also undoes the cookie-banner .Accept-cokkie spacing */
    .hv4-ai__more .hv4-arrow { width: 26px; height: 26px; } /* slightly smaller label + arrow on phones */
}
.hv4-ai__services .hv4-btn { margin-top: auto; }

/* ---------- Case studies ---------- */
.hv4-tech { position: relative; overflow: hidden; }
/* Glow rests bottom-left; script sets --glow-x/--glow-y to follow the pointer */
.hv4-tech::before {
    content: ''; position: absolute; z-index: 0; left: var(--glow-x, 251px); top: var(--glow-y, 780px);
    width: 679px; height: 679px; border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--hv4-blue); opacity: .1; filter: blur(108px); pointer-events: none;
    transition: left .5s ease-out, top .5s ease-out;
}
.hv4-tech > * { position: relative; z-index: 1; }
.hv4-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; }
.hv4-case { padding: 13px 13px 34px; background: #fff; border: 1px solid var(--hv4-line); border-radius: 30px 30px 0 0; }
.hv4-case__media { position: relative; height: 316px; }
@media(max-width:1600px)
{
    .hv4-case__media {
        height: 235px;
    }
}
@media (max-width: 1600px) {
    .hv4-case__media {
        height: 185px;
    }
}
.hv4-case__img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px 20px 0 0; border: 1px solid #f1f1f1; }
.hv4-case__badge { position: absolute; top: 15px; right: 11px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 6px; background: var(--hv4-blue); color: #fff; font-size: 14px; font-weight: 500; line-height: 16px; }
.hv4-case__badge-icon { flex: none; width: 12px; height: 14px; }
.hv4-case__body { padding: 28px 0px 0; }
@media(max-width:1600px)
{
    .hv4-case__body { padding: 28px 6px 0; }  
}
.hv4-case__body .hv4-h3 { margin-bottom: 18px; transition: color .25s; min-height: 76px; }
@media (min-width: 1200px) and (max-width: 1399px) {
    .hv4-case__body .hv4-h3 { min-height: 40px; }
}
@media (min-width: 901px) and (max-width: 1024px) {
    .hv4-case__body .hv4-h3 { min-height: 50px; }
}
/* Hover: a round ↗ button pops in at the centre of the photo; title turns blue */
.hv4-case__media { overflow: hidden; border-radius: 20px 20px 0 0; cursor: pointer; }
.hv4-case__badge { z-index: 2; }
.hv4-case__cursor {
    position: absolute; z-index: 1; left: 50%; top: 50%;
    display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%;
    background: #fff; color: var(--hv4-blue); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    opacity: 0; transform: translate(-50%, -50%) scale(.6); pointer-events: none;
    transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1); /* soft fade + grow, no bounce */
}
.hv4-case:hover .hv4-case__cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hv4-case:hover .hv4-case__cursor { pointer-events: auto; } /* so its title shows on hover; it's inside the card link, so clicks still open the case study */
/* photo dims slightly on hover; sits under the arrow (z 1) and badge (z 2) */
.hv4-case__media::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(10, 18, 40, .32); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.hv4-case:hover .hv4-case__media::after { opacity: 1; }
.hv4-case:hover .hv4-case__body .hv4-h3 { color: var(--hv4-blue); }
/* Mobile / touch screens: no hover, so the arrow is always shown */
@media (hover: none), (max-width: 800px) {
    .hv4-case__cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.hv4-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hv4-tags span { padding: 7px 14px; border-radius: 20px; font-size: 14px; font-weight: 500; line-height: 16px; }
@media(max-width:1600px)
{
    .hv4-tags span { font-size: 12px; }  
}
.hv4-tags--orange span { background: rgba(250, 166, 53, .14); }
.hv4-tags--red span { background: rgba(215, 24, 42, .08); }
.hv4-tags--blue span { background: rgb(210 243 251);}

/* ---------- Industries ---------- */
.hv4-ind { position: relative; overflow: hidden; background: rgba(250, 166, 53, .07); }
/* Glow rests in the same spot as before (centre 878px / 429px); script sets --glow-x/--glow-y to follow the pointer */
.hv4-ind::before {
    content: ''; position: absolute; left: var(--glow-x, 878px); top: var(--glow-y, 429px);
    width: 629px; height: 629px; border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--hv4-orange); opacity: .2; filter: blur(108px); pointer-events: none;
    transition: left .5s ease-out, top .5s ease-out;
}
.hv4-ind .hv4-wrap { position: relative; }
.hv4-ind__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hv4-ind__card { display: flex; flex-direction: column; min-height: 460px; padding: 38px 30px 40px; background: #fff; border: 1px solid var(--hv4-line-soft); border-radius: 30px 30px 0 0; transition: box-shadow .2s, transform .2s; }
@media(max-width:1600px)
{
    .hv4-ind__card {
        min-height: 400px;
        padding: 30px 15px 30px;
    }
}

@media(max-width:992px)
{
.hv4-ind__card
{
    box-shadow: 0 16px 40px rgba(38, 38, 43, .08);
}
}
.hv4-ind__card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(38, 38, 43, .08); }
/* Top-right arrow link; on hover only the arrow shows (blue, no filled background) and keeps pointing ↗ */
.hv4-ind__card { position: relative; }
.hv4-ind__arrow {
    position: absolute; top: 0; right: 0; /* flush in the card's top-right corner */
    display: grid; place-items: center; width: 64px; height: 64px;
    border: 0; border-radius: 0 29px 0 29px; color: var(--hv4-ink); background: #fff; transform-origin: top right;
    transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.hv4-ind__arrow svg { width: 26px; height: 26px; transition: transform .3s; }
/* All devices: the arrow appears only on hover / focus (on touch screens, while the card is tapped) */
.hv4-ind__arrow { opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s, background .3s, border-color .3s, color .3s; }
.hv4-ind__card:hover .hv4-ind__arrow, .hv4-ind__card:focus-visible .hv4-ind__arrow, .hv4-ind__card:active .hv4-ind__arrow { opacity: 1; transform: scale(1); }
.hv4-ind__card:hover .hv4-ind__arrow, .hv4-ind__card:focus-visible .hv4-ind__arrow, .hv4-ind__card:active .hv4-ind__arrow { background: transparent; color: var(--hv4-blue); }
/* Blue while the card is hovered; orange when the pointer is on the arrow itself */
.hv4-ind__card .hv4-ind__arrow:hover { color: var(--hv4-orange); }
/* Mobile: no hover, so the arrow is always shown */
@media (max-width: 767px) {
    .hv4-ind__arrow { opacity: 1; transform: scale(1); }
}
/* Title turns blue with the arrow, like the case study cards */
.hv4-ind__card .hv4-h3 { transition: color .3s; }
.hv4-ind__card:hover .hv4-h3, .hv4-ind__card:focus-visible .hv4-h3 { color: var(--hv4-blue); }
.hv4-ind__icon { width: 115px; height: 115px ; margin-bottom: 80px; object-fit: contain; }
@media(max-width:1600px)
{
    .hv4-ind__icon {
        margin-bottom: 50px;
    }
}

.hv4-ind__card .hv4-h3 { min-height: 76px; margin-bottom: 30px; }
@media(max-width:1600px)
{
    .hv4-ind__card .hv4-h3 {
        margin-bottom: 5px;
    }
}
@media (min-width: 901px) and (max-width: 1024px) {
    .hv4-ind__card .hv4-h3 { min-height: 50px; }
}


/* ---------- Testimonial + stats ---------- */
.hv4-proof { position: relative; overflow: hidden; background: rgba(161, 241, 255, .3); }
/* Glow rests in the same spot as before (centre 17px / 294px); script sets --glow-x/--glow-y to follow the pointer */
.hv4-proof::before {
    content: ''; position: absolute; left: var(--glow-x, 17px); top: var(--glow-y, 294px);
    width: 629px; height: 629px; border-radius: 50%; transform: translate(-50%, -50%);
    background: #9ed5de; opacity: .5; filter: blur(108px); pointer-events: none;
    transition: left .5s ease-out, top .5s ease-out;
}
.hv4-proof__grid { position: relative; display: grid; grid-template-columns: 578px 1fr; gap: 70px; }
.hv4-quote { position: relative; display: flex; flex-direction: column; min-height: 497px; padding: 150px 44px 47px 53px; background: #fff; border: 1px solid var(--hv4-line-soft); border-radius: 30px 30px 0 0; }
@media(max-width:1600px)
{
    .hv4-quote {
        min-height: 450px;
        padding: 142px 40px 47px 40px;
    }
}
.hv4-quote__dots { position: absolute; z-index: 2; top: 61px; right: 44px; display: flex; gap: 10px; }
.hv4-quote__dot { width: 16px; height: 4px; padding: 0; border: 0; background: rgba(108, 108, 108, .4); transition: width .3s, background-color .3s; }
.hv4-quote__dot.is-active { width: 51px; background: var(--hv4-blue); }
.hv4-quote__dots.swiper-pagination-lock { display: flex; } /* keep the design's indicator even with a single testimonial */
.hv4-quote__slider { flex: 1 1 auto; width: 100%; min-width: 0; overflow: hidden; } /* the next slide stays inside the card while sliding */
.hv4-quote__slide { display: flex; flex-direction: column; height: auto; margin: 0; }
.hv4-quote__mark { position: absolute; top: 74px; left: 40px; color: var(--hv4-orange); font-size: 160px; font-weight: 700; line-height: 34px; height: 34px; overflow: hidden; padding-top: 52px; }
.hv4-quote blockquote { max-width: 448px; font-size: clamp(26px, 1.77vw, 28px); font-weight: 500;  line-height: 1.18; }
.hv4-quote figcaption { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 24px; }
.hv4-quote strong { display: block; color: var(--hv4-blue); font-size: 24px; font-weight: 600; line-height: 23px; margin-bottom: 5px; }
.hv4-quote small { display: block; color: var(--hv4-muted); font-size: 16px; line-height: 23px; }
.hv4-quote__avatar { flex: none; width: 93px; height: 93px; border-radius: 50%; object-fit: cover; border: 1px solid #e7e7e7; }

/* .hv4-stats { max-width: 960px; padding-top: 9px; } */
.hv4-stats__nums { display: grid; grid-template-columns: 306fr 374fr 280fr; padding-bottom: 32px; border-bottom: 1px solid rgba(0, 0, 0, .2); }
.hv4-stats__nums dt {
    font-size: clamp(56px, 4.27vw, 82px); font-weight: 500; letter-spacing: -1px; line-height: 1.17;
    background: linear-gradient(90deg, #e5262d 0%, #f7a21b 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    width: max-content;
}
.hv4-stats__nums b { font-weight: 700; }
.hv4-stats__nums dd { margin-top: 6px; padding-left: 4px; font-size: 18px; line-height: 18px; }
/* Five per row; a shorter last row starts at the left. Each logo sits in a fixed-height box so the names below line up */
.hv4-certs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 55px 0; margin-top: 55px; }
.hv4-certs span, .hv4-cert { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 0 0 20%; min-width: 0; margin: 0; padding: 0 8px; text-align: center; }
.hv4-certs img { display: block; max-width: 100%; height: 55px; object-fit: contain; }
.hv4-cert figcaption { margin-top: 16px; color: var(--hv4-ink); font-size: 16px; font-weight: 500; line-height: 1.25; }

@media(max-width:1600px)
{
.hv4-certs img 
{
    height: 45px;
    object-fit: contain;
}
.hv4-cert figcaption { font-size: 14px; margin-top: 10px;
}
.hv4-certs span, .hv4-cert {
    flex: 0 0 25%;
}
}

@media(max-width:1024px)
{
.hv4-certs span, .hv4-cert {
    flex: 0 0 20%;
}
}

/* ---------- Insights ---------- */
.hv4-insights__card { display: grid; grid-template-columns: 803px 1fr; padding: 59px 50px 46px; background: #fff;  border-radius: 30px;     box-shadow: 0 16px 40px rgba(38, 38, 43, .08);}
/* Section glow (outside the white card): rests top-right; script sets --glow-x/--glow-y to follow the pointer */
.hv4-insights { position: relative; overflow: hidden; }
.hv4-insights::before {
    content: ''; position: absolute; z-index: 0; left: var(--glow-x, calc(100% - 120px)); top: var(--glow-y, 80px);
    width: 560px; height: 560px; border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--hv4-orange); opacity: .18; filter: blur(110px); pointer-events: none;
    transition: left .5s ease-out, top .5s ease-out;
}
.hv4-insights > * { position: relative; z-index: 1; }
/* All mouse-follow glows ([data-glow] sections): when the mouse leaves, glide slowly and smoothly back to the resting spot */
[data-glow]:not(:hover)::before { transition: left 1.6s cubic-bezier(.45, 0, .2, 1), top 1.6s cubic-bezier(.45, 0, .2, 1); }
.hv4-feature { display: flex; gap: 29px; padding-right: 40px; }
.hv4-feature__img { flex: none; width: 261px; border-radius: 16px; object-fit: cover; border: 1px solid #dfdfdf;}
.hv4-feature > div {max-width: 465px; }
.hv4-feature__title { margin: 14px 0 24px; font-size: clamp(24px, 1.67vw, 32px); font-weight: 500; letter-spacing: -1px; }
.hv4-feature .hv4-link { margin-top: 25px; }
.hv4-meta { display: block; font-size: 18px; line-height: 23px; }
.hv4-meta--orange { color: var(--hv4-orange); }
.hv4-meta--red { color: var(--hv4-red); }
.hv4-meta--teal { color: var(--hv4-teal); }
.hv4-insights__list { position: relative; display: flex; flex-direction: column; gap: 26px; padding: 6px 0 0 63px; border-left: 1px solid rgba(0, 0, 0, .2); }
.hv4-insights__list a { display: flex; align-items: center; gap: 29px; }
.hv4-insights__thumb { flex: none; width: 152px !important; height: 104px !important; border-radius: 12px; object-fit: cover; border: 1px solid var(--hv4-line); }
.hv4-insights__title { display: block; margin-top: 14px; max-width: 386px; font-size: 20px; font-weight: 500; letter-spacing: -1px; line-height: 26px; }
.hv4-insights__list a:hover .hv4-insights__title { color: var(--hv4-blue); }

/* ---------- Careers ---------- */
.hv4-career-section {
    border-radius: 20px 20px 0 0;
    background: #191919; 
    color: #fff;
    margin: 0 24px; min-height: 584px;
    position: relative; overflow: hidden; /* career-bg covers the whole band, padding included */
}
.hv4-career {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 40px;
    padding: 0 max(16px, calc((100% - 1620px) / 2)); /* top/bottom spacing comes from .section on the band */
    
}

.hv4-career__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.hv4-career__copy, .hv4-career__photos { position: relative; }
.hv4-career__copy { max-width: 509px; }
@media (max-width: 1024px) {
    .hv4-career__copy { max-width: none; }
}
.hv4-career__copy p { margin: 22px 0 60px; font-size: 20px; line-height: 26px; }
.hv4-career__photos { display: grid; grid-template-columns: 344fr 673fr; grid-template-rows: 213px 221px; gap: 15px; width: min(1032px, 62%); }
.hv4-career__photos > * { width: 100% !important; height: 100% !important; object-fit: cover; }
.hv4-career__p3 { grid-column: 2; grid-row: 1 / span 2; }
/* The exported photos carry a white rounded corner; matching radii hide it on the dark band */
.hv4-career__p1 { border-top-left-radius: 30px; }
.hv4-career__p3 { border-top-right-radius: 30px; }

/* ---------- Footer ---------- */
.hv4-footer { padding-top: 70px;  }
.hv4-footer__grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 4rem;padding-bottom: 51px; }
.hv4-footer__logo { width: 171px; height: auto; }
.hv4-footer__brand p { margin: 29px 0 38px; color: var(--hv4-muted); font-size: 18px; line-height: 26px; }
.hv4-footer__brand strong { color: var(--hv4-ink); font-size: 20px; font-weight: 500; }
.hv4-subscribe { display: flex; gap: 10px; max-width: 491px; }
.hv4-footer__logos { display: flex; align-items: center; gap: 22px; }
.hv4-footer__logos-divider { flex-shrink: 0;
    width: 1.5px;
    height: 44px;
    background: #dbdbdb; }
.hv4-footer__gptw { display: block; height: 64px; width: auto; }
@media (max-width: 767px) {
    .hv4-footer__logos { gap: 14px; }
    .hv4-footer__logos-divider { height: 40px; }
    .hv4-footer__gptw { height: 54px; }
}
.hv4-subscribe input { flex: 1; min-width: 0; height: 47px; padding: 12px 20px; border: 0; border-radius: 100px; border:1px solid #ebebeb; color: var(--hv4-ink); font: 400 16px 'Maven Pro', sans-serif; }
.hv4-subscribe input::placeholder { color: #626262; }
.hv4-subscribe input:focus { outline: 2px solid var(--hv4-blue); outline-offset: 0; background: #ebebeb; }
.hv4-subscribe .hv4-btn { flex-shrink: 0; height: 47px; padding: 13px 22px; font-size: 16px; font-weight: 500; }
.hv4-footer__col { display: flex; flex-direction: column; gap: 16px; }

.hv4-footer__col h4 { font-size: 16px; font-weight: 700; }
.hv4-footer__col a { color: #414141; font-size: 18px;    line-height: 1.2; }
/* Bold look on hover via text-shadow, not font-weight, so the text doesn't widen and nothing shifts */
.hv4-footer__col a:hover { color: var(--hv4-blue); text-shadow: 0 0 .6px currentColor, 0 0 .6px currentColor; }
@media (max-width: 767px) {
    .hv4-footer__col a { color: #414141; font-size: 16px; line-height: 1.2; }
}
.hv4-footer__bar {border-top: 1px solid rgba(0, 0, 0, .1); }
.hv4-footer__bar a { color: inherit; transition: color .2s; }
.hv4-footer__bar a:hover { color: var(--hv4-blue); }
.hv4-footer__bar .hv4-wrap { display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--hv4-muted);
    font-size: 16px;
    line-height: 19px;
    padding: 25px 0;
    margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1600px) {
    .hv4-ai__grid { grid-template-columns: minmax(0, 460px) 1fr; gap: 9vw; }
    .hv4-ai__grid::before { left: calc(min(530px, 40%) + 4.5vw); }
    .hv4-ai__list { column-gap: 3vw;    row-gap: 45px; }
    .hv4-insights__card { grid-template-columns: minmax(0, 1.25fr) 1fr; padding: 40px 40px; }
    .hv4-proof__grid { grid-template-columns: 450px 1fr; gap: 40px; }
}
@media (max-width: 1440px) {
    .hv4-nav__links { gap: 24px; }
    .hv4-nav__links a { font-size: 16px; }
    .hv4-proof__grid { grid-template-columns: 450px 1fr; gap: 40px; }
    .hv4-ind__card { min-height: 0; }
    .hv4-ind__icon { margin-bottom: 40px; }
}
@media (max-width: 1200px) {
    .hv4-nav__toggle { display: flex; }
    .hv4-nav__links {
        position: absolute; top: calc(100% + 8px); left: 0; right: 0;
        display: none; flex-direction: column; gap: 0; padding: 8px 0;
        background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
    }
    .hv4-nav__links a { padding: 14px 28px; }
    .hv4-nav.is-open .hv4-nav__links { display: flex; }
    .hv4-nav__actions { margin-left: auto; }
    .hv4-tabs { gap: 40px; overflow-x: auto; justify-content: center; scrollbar-width: none; }
    .hv4-ai__grid { gap: 48px; } /* still two columns (Foundry | services) down to 901px */
    .hv4-ai__grid::before { display: none; }
    .hv4-ai__media { max-width: 530px; }
    .hv4-ai__list { padding-top: 0; }
    .hv4-case__media { height: 148px; } /* still three cards in a row down to 901px, with shorter photos */
    .hv4-ind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv4-proof__grid { grid-template-columns: minmax(0, 1fr); } /* minmax: let the slider shrink below its content width */
    .hv4-quote { max-width: none; } /* stacked above the stats: same full width as them */
    .hv4-insights__card { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 1024px) {
    .hv4-insights__card { padding: 30px 30px; }
    .hv4-quote { padding: 140px 30px 40px 30px; }
}
@media (max-width: 1200px) {
    .hv4-insights__list { border-left: 0; padding: 40px 0 0; border-top: 1px solid rgba(0, 0, 0, .2); }
    .hv4-career { flex-direction: column; align-items: flex-start; }
    .hv4-career__photos { width: 100%; }
    .hv4-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; }
    .hv4-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .hv4-ai__grid { grid-template-columns: 1fr; gap: 64px; } /* stack Foundry above the services */
    .hv4-ai__media { max-width: none; height: 400px; } /* tablets: Foundry photo spans the full width */
    .hv4-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv4-case__media { height: 200px; }
    .hv4-case__body .hv4-h3 { min-height: 50px; }

    .hv4-ind__icon { margin-bottom: 30px; }
    .hv4-ind__card .hv4-h3 { margin-bottom: 1rem; min-height: 40px; }
    .hv4-tab::after { width: 100%; }
    .hv4-certs { gap: 32px 0; }
    .hv4-cert { flex-basis: 25%; }
    .hv4-cert figcaption { font-size: 14px; margin-top: 12px; }
    .hv4-feature { flex-direction: column; padding: 0; }
    .hv4-feature > div { padding-top: 0; }
    .hv4-feature__img { width: 100% !important; height: 260px !important; }
}
/* Hero before/after (phones, tablets and 1024px screens): photo on top (still draggable), the two cards stacked below it instead of covering it */
@media (max-width: 1024px) {
    .hv4-compare {
        --ph: clamp(240px, 62vw, 420px);
        height: auto; padding: calc(var(--ph) + 16px) 16px 16px;
        display: flex; flex-direction: column; gap: 12px;
        background: #f4f4f6; border-radius: 24px 24px 0 0;
    }
    .hv4-compare__img, .hv4-compare__divider { bottom: auto; height: var(--ph); }
    .hv4-compare__handle { top: calc(var(--ph) / 2); } /* centred on the photo, not the whole panel */
    .hv4-glass, .hv4-glass--barrier, .hv4-glass--breakthrough {
        position: relative; inset: auto; width: auto; min-height: 0; padding: 18px 20px;
        border-radius: 19px; background: #fff; border: 1px solid #ececec;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .hv4-glass__stat { font-size: 36px; line-height: 42px; margin-bottom: 2px; }
    .hv4-glass__stat-label { margin-bottom: 16px; }
    /* The two headings also shown on the photo (top-left / top-right); the cards keep their own */
    .hv4-compare { position: relative; }
    .hv4-compare::before, .hv4-compare::after {
        position: absolute; z-index: 3; top: 16px; padding: 6px 10px;
        background: rgba(255, 255, 255, .92); border-radius: 6px;
        color: var(--hv4-red); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; line-height: 1;
        pointer-events: none; transition: opacity .25s;
    }
    .hv4-compare::before { content: 'THE BARRIER'; left: 16px; }
    .hv4-compare::after { content: 'BREAKTHROUGH'; right: 16px; }
    /* script adds these when the divider is dragged over a heading */
    .hv4-compare.hide-barrier::before, .hv4-compare.hide-breakthrough::after { opacity: 0; }
}
@media (max-width: 800px) {
    .hv4-compare {
        --ph: clamp(200px, 50vw, 410px);
    }
    .hv4-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 42px; }
}
@media (max-width: 640px) {
    .hv4-nav { gap: 8px; padding: 0 12px; }
    .hv4-nav__actions { gap: 8px; }
    .hv4-nav__country { display: none; }
    .hv4-nav__actions .hv4-btn { gap: 8px; padding: 12px 16px; font-size: 16px; }
    .hv4-hero__title { margin-top: 40px; letter-spacing: -1px; }
    .hv4-hero__title br, .hv4-h2 br { display: none; }
    .hv4-tabs { margin-top: 32px; gap: 28px; }
    .hv4-tab { font-size: 16px; }
    .hv4-trusted { flex-direction: column; align-items: flex-start; gap: 16px; height: auto; padding: 32px 0; }
    .hv4-trusted__label { width: auto; }
    .hv4-trusted__slider { width: 100%; }
    .hv4-head { flex-direction: column; align-items: flex-start; gap: 5px; margin-bottom: 32px; }
    .hv4-career__copy p { margin: 15px 0 35px; font-size: 17px; line-height: 23px; }
    .hv4-ai__list { grid-template-columns: 1fr; row-gap: 50px; }
    .hv4-ai__media { height: 240px; }
    .hv4-cases, .hv4-ind__grid { grid-template-columns: 1fr; }
    .hv4-case__media { height: 220px; }
    .hv4-case__body { padding: 24px 12px 0; }
    .hv4-quote { min-height: 0; padding: 96px 20px 28px; }
    .hv4-quote__dots { top: 40px; right: 20px; }
    .hv4-quote__mark { top: 20px; left: 16px; font-size: 120px; }
    .hv4-quote blockquote { max-width: none; font-size: 20px; line-height: 1.3; }
    /* Name block shrinks and wraps beside a smaller photo */
    .hv4-quote figcaption { align-items: center; gap: 12px; padding-top: 20px; }
    .hv4-quote figcaption > span { min-width: 0; }
    .hv4-quote strong { font-size: 18px; line-height: 22px; }
    .hv4-quote small { font-size: 14px; line-height: 19px; }
    .hv4-quote__avatar { width: 64px; height: 64px; }
    .hv4-stats__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .hv4-stats__nums dt { font-size: 30px; }
    .hv4-stats__nums dd { font-size: 14px; }
    .hv4-insights__card { padding: 24px 16px; }
    .hv4-insights__list a { gap: 16px; }
    .hv4-insights__thumb { width: 96px !important; height: 72px !important; }
    .hv4-insights__title { font-size: 14px; line-height: 20px; margin-top: 3px; }
    .hv4-meta { font-size: 14px; }
    .hv4-career { margin: 0; padding: 0 16px; }
    .hv4-career__photos { grid-template-rows: 120px 120px; }
    /* .hv4-footer__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } */
    .hv4-footer__bar { margin: 0; }
    .hv4-footer__bar .hv4-wrap { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .hv4-trusted__track { animation: none; }
}

body:not(.hv4) .hv4-hero { padding-top: 55px; }
@media (min-width: 769px) {
    body:not(.hv4) .hv4-hero { padding-top: 70px; }
}
@media (min-width: 992px) {
    body:not(.hv4) .hv4-hero { padding-top: 60px; }
}
@media (min-width: 1200px) {
    body:not(.hv4) .hv4-hero { padding-top: 72px; }
}

/* Mobile: drop every fixed min-height so blocks size to their content */
@media (max-width: 767px) {
    .hv4-glass--barrier,
    .hv4-case__body .hv4-h3,
    .hv4-ind__card,
    .hv4-ind__card .hv4-h3,
    .hv4-quote,
    .hv4-career-section { min-height: auto; }
}
/* Phones: two certification logos per row */
@media (max-width: 640px) {
    .hv4-cert { flex-basis: 50%; }
    .hv4-certs img { height: 48px; }
}