/* Homepage v2 — the humanbetween.ai look: steel-blue mist hero, centred film card, slate body, Manrope + Georgia italic accents.
Loaded only by index.html, after style.css and mobile.css. Everything is scoped to body.hb-v2. */
body.hb-v2{
--hb-ink:#f1f4f8;--hb-soft:#c9d3df;--hb-mute:#a3b0c2;--hb-accent:#a9b7cb;--hb-mist:#eef2f7;
--hb-slate:#2c3a50;--hb-deep:#1f2735;--hb-steel:#41536c;--hb-steel2:#546682;--hb-line:#d6dfe826;--hb-glass:#ffffff0d;
background:radial-gradient(ellipse 90% 30% at 100% 45%,#546682a0,transparent 70%),radial-gradient(ellipse 90% 26% at 0% 72%,#41536cb0,transparent 72%),radial-gradient(ellipse 120% 22% at 60% 100%,#546682a0,transparent 80%),var(--hb-slate);
color:var(--hb-ink);
padding-top:0!important;
}
body.hb-v2 h1,body.hb-v2 h2,body.hb-v2 h3,body.hb-v2 .contact-title,body.hb-v2 button,body.hb-v2 input,body.hb-v2 textarea,body.hb-v2 select{font-family:inherit}
body.hb-v2 .section-heading h2,body.hb-v2 .studio-grid h2{font-weight:600;letter-spacing:-.055em}
body.hb-v2 .section-heading h2 em,body.hb-v2 .contact-title em,body.hb-v2 .growth-invitation h2 em{font-family:Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.045em;background:linear-gradient(105deg,#9cafc9 5%,#acbdd3 60%,#ccd8e7);-webkit-background-clip:text;background-clip:text;color:transparent}
body.hb-v2 .section-top,body.hb-v2 .mono{color:var(--hb-mute)}
/* Header: frosted steel glass, mist CTA. */
body.hb-v2 .header .project-button{background:var(--hb-mist);color:var(--hb-slate);border-color:transparent}
body.hb-v2 .header .project-button span{color:var(--hb-slate)}
body.hb-v2 .language-control>button{background:#2c3a50b8;border-color:var(--hb-line)}
body.hb-v2 .mega-panel{background:#2c3a50f5;border-color:var(--hb-line)}
/* ---------- Hero ---------- */
.hb-hero{position:relative;isolation:isolate;text-align:center;padding-top:96px;padding-bottom:28px;overflow:hidden}
.hb-hero:before{content:"";position:absolute;z-index:-1;inset:0 0 -40px;pointer-events:none;background:
radial-gradient(38% 30% at 12% 6%,#d6dfe866,transparent 70%),
radial-gradient(34% 28% at 90% 10%,#a0b2c655,transparent 70%),
radial-gradient(60% 40% at 50% 55%,#a0b2c640,transparent 75%),
linear-gradient(180deg,#41536c 0%,#546682 26%,#8396ae 50%,#546682 72%,#2c3a50 100%);
-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.hb-stage{min-height:calc(100svh - 132px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.hb-clocks{position:static!important;display:flex!important;justify-content:center;gap:28px;margin:0 0 18px!important;color:#dfe6ee!important;opacity:.8;font-size:10px!important;letter-spacing:.14em}
.hb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hb-headline{margin:0 0 26px;font-size:clamp(34px,4.6vw,66px);font-weight:800;letter-spacing:-.055em;line-height:1.1;color:var(--hb-ink);text-shadow:0 2px 24px #1f273555}
.hb-line{color:var(--hb-ink)!important;-webkit-text-fill-color:currentColor;display:flex;align-items:center;justify-content:center;gap:.2em;white-space:nowrap}
.hb-line+.hb-line{margin-top:8px}
.hb-pill{display:inline-flex;align-items:center;justify-content:center;gap:.3em;height:1.24em;min-width:4.6em;padding:0 .5em;border-radius:99px;background:linear-gradient(115deg,#eef2f7,#b0c2d2);color:var(--hb-slate);font-weight:600;letter-spacing:-.04em;text-shadow:none;box-shadow:0 10px 30px #1f273540,inset 0 1px 0 #fff;transition:opacity .26s,transform .26s,filter .26s}
.hb-pill i{width:.2em;height:.2em;border-radius:50%;background:var(--hb-steel2)}
.hb-pill>span{font-size:.8em;line-height:1}
.hb-pill.is-out{opacity:0;transform:translateY(.12em) scale(.97);filter:blur(4px)}
.hb-film-wrap{width:100%;display:flex;justify-content:center}
.hb-film{position:relative;display:block;width:min(100%,1240px,calc((100svh - 200px) * 16 / 9));min-width:min(100%,640px);aspect-ratio:16/9;padding:0;border:0;border-radius:20px;overflow:hidden;isolation:isolate;cursor:pointer;
background:radial-gradient(60% 70% at 25% 20%,#e8edf4,transparent),radial-gradient(70% 70% at 85% 90%,#546682,transparent),#a0b2c6;
box-shadow:0 0 0 1px #d6dfe833,0 30px 80px -24px #1f2735b3;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.hb-film:hover{transform:translateY(-3px) scale(1.012);box-shadow:0 0 0 1px #d6dfe855,0 40px 90px -24px #1f2735cc}
.hb-film:focus-visible{outline:2px solid var(--hb-mist);outline-offset:5px}
.hb-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-film:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#1f273566,transparent 45%);pointer-events:none}
.hb-play{position:absolute;z-index:1;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border-radius:99px;background:#ffffffeb;color:var(--hb-slate);font-size:14px;font-weight:700;backdrop-filter:blur(12px);box-shadow:0 10px 30px #1f273559;transition:transform .3s;white-space:nowrap}
.hb-film:hover .hb-play{transform:translateX(-50%) scale(1.06)}
.hb-play small{font-weight:500;color:var(--hb-steel2);font-size:12px}
.hb-play-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--hb-slate);color:#fff;padding-left:2px}
.hb-sub{margin:22px 0 0;color:#e3e9f0;font-size:15px;line-height:1.55;max-width:560px}
.hb-actions{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.hb-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:12px;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s}
.hb-btn:hover{transform:translateY(-2px)}
.hb-btn-ghost{background:#2c3a5099;color:var(--hb-ink);border:1px solid #d6dfe840;backdrop-filter:blur(10px)}
.hb-btn-ghost:hover{background:#2c3a50cc}
.hb-btn-light{background:var(--hb-mist);color:var(--hb-slate);border:1px solid transparent}
.hb-btn-light:hover{background:#fff}
/* Film player overlay */
.hb-film-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:4vw}
.hb-film-modal[hidden]{display:none}
.hb-film-backdrop{position:absolute;inset:0;background:#141b27d9;backdrop-filter:blur(14px);opacity:0;transition:opacity .3s}
.hb-film-modal.is-open .hb-film-backdrop{opacity:1}
.hb-film-frame{position:relative;width:min(100%,1280px,calc((100svh - 8vw) * 16 / 9));aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0e121a;box-shadow:0 40px 120px #000a;transform-origin:center}
.hb-film-frame video{width:100%;height:100%;display:block;object-fit:contain;background:#0e121a}
.hb-film-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;background:#ffffffe6;color:var(--hb-slate);font-size:15px;cursor:pointer;box-shadow:0 6px 20px #0005}
html.hb-film-open{overflow:hidden}
/* Logos right under the hero, on the mist. */
body.hb-v2 .client-strip{border:0;padding-top:18px}
body.hb-v2 .client-set img{opacity:.7}
/* ---------- Sections in slate + glass ---------- */
body.hb-v2 .work-card figure,body.hb-v2 .work-card .work-visual,body.hb-v2 .service-visual,body.hb-v2 .process>*,body.hb-v2 .process article{border-color:var(--hb-line)!important}
body.hb-v2 .process article,body.hb-v2 .process>div{background:linear-gradient(160deg,#ffffff12,#ffffff05)!important;border:1px solid var(--hb-line)!important;box-shadow:0 20px 50px -30px #0d131d}
body.hb-v2 .service-list details{border-color:var(--hb-line)}
body.hb-v2 .service-content p,body.hb-v2 .studio-grid p,body.hb-v2 .section-heading p,body.hb-v2 .work-caption span{color:var(--hb-soft)}
body.hb-v2 .faq details{background:#ffffff0d;border:1px solid var(--hb-line);border-radius:12px;padding:0 20px;margin-bottom:10px;transition:background .2s}
body.hb-v2 .faq details:hover,body.hb-v2 .faq details[open]{background:#ffffff16}
body.hb-v2 .faq summary{border:0;padding:17px 0}
body.hb-v2 .faq details p{color:var(--hb-soft);margin-top:0;padding-bottom:16px}
body.hb-v2 .growth-glass{background:linear-gradient(160deg,#ffffff1c,#ffffff08)!important;border-color:#d6dfe833!important}
body.hb-v2 .contact{background:transparent!important}
body.hb-v2 footer{background:transparent;color:var(--hb-soft)}
@media(max-width:900px){
.hb-hero{padding-top:96px}
.hb-stage{min-height:auto;padding:26px 0 10px}
.hb-clocks{gap:16px;font-size:9px!important}
.hb-clocks .clock-offset{display:none}
}
@media(max-width:600px){
.hb-hero{padding-top:92px}
.hb-headline{font-size:clamp(26px,7.4vw,36px)}
.hb-clocks{display:none!important}
.hb-film{border-radius:14px}
.hb-play{bottom:12px;font-size:13px}
.hb-sub{font-size:14px}
.hb-sub br{display:none}
.hb-btn{padding:12px 16px;font-size:13px}
.hb-film-modal{padding:10px}
.hb-film-frame{border-radius:12px}
}
@media(prefers-reduced-motion:reduce){.hb-film,.hb-pill,.hb-btn{transition:none}}
/* v5: the original wordmark instead of a headline — human, not techy. */
.hb-wordmark{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;width:min(100%,1180px);margin:0 auto 22px;text-align:left}
.hb-wordmark h1{margin:0;white-space:nowrap;color:var(--hb-ink);font-size:clamp(56px,7.2vw,108px);font-weight:700;letter-spacing:-.075em;line-height:.9;text-shadow:0 2px 30px #1f273540}
.hb-wordmark h1>span{font-size:.16em;vertical-align:top;display:inline-block;margin:.9em 0 0 .35em;color:var(--hb-ink);letter-spacing:0}
.hb-positioning{margin:0 0 .35em;white-space:nowrap;color:var(--hb-ink);font-size:clamp(18px,1.9vw,27px);font-weight:600;letter-spacing:-.035em;line-height:1.08;text-align:right}
.hb-positioning em{display:block;font-family:Georgia,serif;font-style:italic;font-weight:400;color:#dfe7f0}
.hb-clocks{margin-bottom:26px!important}
@media(max-width:900px){.hb-wordmark{flex-direction:column;align-items:flex-start;gap:12px}.hb-positioning{text-align:left}}
@media(max-width:600px){.hb-wordmark h1{font-size:10.8vw}.hb-wordmark{align-items:center}.hb-positioning{text-align:center;white-space:normal}.hb-wordmark{margin-bottom:18px}.hb-positioning{font-size:19px}}
/* Scrolled header in steel instead of near-black. */
body.hb-v2 .header:before{background:#2c3a50e8!important;border-bottom:1px solid #d6dfe81a}
/* v8: no big wordmark — a quiet centred line above the film. */
.hb-wordmark{justify-content:center;margin-bottom:20px}
.hb-positioning{text-align:center!important;margin:0;font-size:clamp(20px,2vw,28px)}
.hb-positioning em{display:inline}
/* v9: "Made to stand out" as a premium reel of tall cards with video inside. */
.hb-possibilities .section-heading{display:block;text-align:center;max-width:1180px;margin:0 auto}
.hb-possibilities .section-heading h2{font-size:clamp(44px,6vw,92px);line-height:.98}
.hb-possibilities .section-heading p{width:auto!important;margin:22px auto 0!important;max-width:640px;text-align:center;font-size:16px;line-height:1.55}
.hb-possibilities .section-heading p br{display:none}
.hb-reel{position:relative;margin-top:44px;margin-right:calc(-1 * var(--page-gutter))}
.hb-reel-nav{display:flex;justify-content:flex-end;gap:10px;padding-right:var(--page-gutter);margin-bottom:18px}
.hb-reel-btn{width:46px;height:46px;border-radius:12px;border:1px solid var(--hb-line);background:#ffffff12;color:var(--hb-ink);font-size:18px;cursor:pointer;transition:background .2s,opacity .2s}
.hb-reel-btn:hover{background:#ffffff24}
.hb-reel-btn:disabled{opacity:.35;cursor:default}
.hb-reel-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px var(--page-gutter) 24px 0;outline:0}
.hb-reel-track::-webkit-scrollbar{display:none}
.hb-card{position:relative;flex:0 0 clamp(260px,29vw,420px);aspect-ratio:5/7;border-radius:10px;overflow:hidden;scroll-snap-align:start;isolation:isolate;color:#fff;text-decoration:none;background:#1f2735;box-shadow:0 30px 60px -30px #0d131dcc}
.hb-card video,.hb-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.hb-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0e121ae0 0%,#0e121a66 26%,transparent 52%);pointer-events:none}
.hb-card:hover video,.hb-card:hover img{transform:scale(1.05)}
.hb-card h3{position:absolute;z-index:1;left:28px;right:28px;bottom:24px;margin:0;font-size:clamp(30px,2.9vw,44px);font-weight:600;letter-spacing:-.045em;line-height:1.02;max-width:9em}
.hb-card-tag{position:absolute;z-index:1;left:28px;top:24px;padding:6px 11px;border-radius:99px;background:#0e121a8c;backdrop-filter:blur(8px);font:10px/1.2 monospace;letter-spacing:.08em;text-transform:uppercase;color:#e6edf5}
.hb-card-arrow{position:absolute;z-index:1;right:22px;top:20px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ffffffe6;color:var(--hb-slate);font-size:16px;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.hb-card:hover .hb-card-arrow,.hb-card:focus-visible .hb-card-arrow{opacity:1;transform:none}
.hb-card:focus-visible{outline:2px solid var(--hb-mist);outline-offset:3px}
@media(max-width:600px){.hb-card{flex-basis:78vw}.hb-card h3{left:20px;right:20px;bottom:18px;font-size:30px}.hb-card-tag{left:18px;top:18px}.hb-reel{margin-top:30px}.hb-reel-btn{width:40px;height:40px}}
/* v13: dark page with a blue gradient atmosphere (owner: "make it dark, blue gradient"). */
body.hb-v2{--hb-slate:#0b1622;--hb-line:#b5d8f226;
background:
radial-gradient(ellipse 70% 40% at 50% 0%,#1d4a7280,transparent 70%),
radial-gradient(ellipse 90% 26% at 100% 30%,#16466c8c,transparent 72%),
radial-gradient(ellipse 90% 24% at 0% 50%,#123d6088,transparent 72%),
radial-gradient(ellipse 80% 18% at 100% 70%,#1a52808a,transparent 72%),
radial-gradient(ellipse 120% 22% at 60% 100%,#1f5f8f80,transparent 80%),
#05090e}
body.hb-v2 .hb-hero:before{background:
radial-gradient(45% 38% at 50% 8%,#3a78b04d,transparent 72%),
radial-gradient(40% 35% at 12% 30%,#1c4c7650,transparent 72%),
radial-gradient(40% 35% at 88% 30%,#24598a45,transparent 72%),
radial-gradient(70% 45% at 50% 62%,#2a6aa233,transparent 75%)}
body.hb-v2 .hb-film{box-shadow:0 0 0 1px #b5d8f22e,0 40px 100px -30px #000d,0 0 120px -20px #2f74b040}
body.hb-v2 .hb-film:after{background:linear-gradient(0deg,#05090e55,transparent 40%)}
body.hb-v2 .hb-pill,body.hb-v2 .hb-btn-light,body.hb-v2 .header .project-button{color:#0b1622}
body.hb-v2 .hb-play{color:#0b1622}
body.hb-v2 .hb-play-icon{background:#0b1622}
body.hb-v2 .header:before{background:#060c14e6!important;border-bottom:1px solid #b5d8f21a}
body.hb-v2 .language-control>button{background:#0b1622b8}
body.hb-v2 .mega-panel{background:#0a1520f7}
body.hb-v2 .hb-card{background:#0b1622}
body.hb-v2 .hb-reel-btn{background:#ffffff0d}
body.hb-v2 .section-heading h2 em,body.hb-v2 .contact-title em,body.hb-v2 .growth-invitation h2 em,body.hb-v2 .hb-positioning em{background:linear-gradient(105deg,#8ec5f0 0%,#b9dcf7 55%,#e6f4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
/* v15: hero tighter so the client logos show at the bottom of the first screen. */
.hb-hero{padding-top:100px;padding-bottom:10px}
.hb-stage{min-height:0;justify-content:flex-start;padding-top:0}
.hb-clocks{margin-bottom:12px!important}
.hb-wordmark{margin-bottom:14px}
.hb-film{width:min(100%,1240px,calc((100svh - 330px) * 16 / 9))}
body.hb-v2 .client-strip{padding-top:22px;padding-bottom:22px}
@media(max-width:900px){.hb-hero{padding-top:92px}}
/* v17: the live site's crowd/inflatable video as the hero background + logo band pinned to the bottom of the first screen. */
.hb-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.hb-bg video{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hb-bg:after{content:"";position:absolute;inset:0;background:
linear-gradient(180deg,#05090ee6 0%,#05090e8c 22%,#071422a6 55%,#05090ef2 100%),
radial-gradient(60% 50% at 50% 55%,#0b2a4a40,transparent 75%)}
body.hb-v2 .hb-hero:before{z-index:-1}
.hb-hero{min-height:calc(100svh - 107px);display:flex;flex-direction:column;justify-content:center;padding-bottom:26px}
body.hb-v2 .client-strip{border-top:1px solid #b5d8f21f;border-bottom:1px solid #b5d8f214;background:#05090e;padding:34px 0}
@media(max-width:900px){.hb-hero{min-height:0}}
@media(max-width:600px){body.hb-v2 .client-strip{padding:27px 0}}
/* v18: split hero — headline left, "Who we are" film card right, logos over the video at the bottom. */
.hb-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:0;padding-bottom:0;text-align:left}
.hb-split{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;padding:150px 0 40px}
.hb-split .hb-clocks{position:absolute!important;top:104px;left:0;right:0;justify-content:space-between!important;margin:0!important;opacity:.75}
.hb-head{margin:0;font-size:clamp(52px,6.6vw,104px);font-weight:700;letter-spacing:-.06em;line-height:.98;color:var(--hb-ink);text-shadow:0 4px 40px #0008}
.hb-head span{display:block}
.hb-head-mute{color:#ffffff73!important}
.hb-head-main{color:#f4f8fc!important}
.hb-lede{margin:26px 0 0;max-width:520px;color:#d5e1ec;font-size:18px;line-height:1.5;text-shadow:0 2px 20px #0009}
.hb-cta{margin-top:30px;display:inline-flex;align-items:center;gap:16px;padding:6px 26px 6px 6px;border:0;border-radius:16px;background:#f4f8fc;color:#0b1622;font-size:17px;font-weight:600;cursor:pointer;box-shadow:0 18px 40px -16px #000c;transition:transform .2s,background .2s}
.hb-cta:hover{transform:translateY(-2px);background:#fff}
.hb-cta-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:#0b1622;color:#fff;font-size:20px}
.hb-film.hb-film-card{width:clamp(300px,27vw,420px);aspect-ratio:auto;padding:7px;border-radius:24px;background:linear-gradient(160deg,#ffffff2b,#ffffff10);border:1px solid #ffffff30;backdrop-filter:blur(18px);box-shadow:0 30px 80px -24px #000d;text-align:left;align-self:start;margin-top:40px}
.hb-film.hb-film-card:after{display:none}
.hb-film-media{position:relative;display:block;aspect-ratio:16/9;border-radius:17px;overflow:hidden;background:#a0b2c6}
.hb-film-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-film-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;background:#ffffffe6;color:#0b1622;padding-left:3px;box-shadow:0 10px 30px #0006;transition:transform .3s}
.hb-film-card:hover .hb-film-play{transform:scale(1.1)}
.hb-film-meta{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 8px 12px;color:#fff}
.hb-film-meta b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.hb-film-meta small{display:block;margin-top:4px;font:11px/1.2 monospace;color:#a9bfd3;letter-spacing:.04em}
.hb-film-arrow{font-size:20px;transition:transform .3s}
.hb-film-card:hover .hb-film-arrow{transform:translateX(4px)}
.hb-film.hb-film-card:hover{transform:translateY(-4px)}
.hb-bg:after{background:
linear-gradient(90deg,#05090ee6 0%,#05090eb3 34%,#05090e4d 70%,#05090e66 100%),
linear-gradient(180deg,#05090ecc 0%,transparent 26%,transparent 70%,#05090ef2 100%)!important}
body.hb-v2 .hb-hero:before{opacity:.6}
body.hb-v2 .hb-logos{position:relative;z-index:1;margin:0 calc(-1 * var(--page-gutter));background:transparent!important;border-top:1px solid #ffffff1f!important;border-bottom:0!important;padding:28px 0!important}
@media(max-width:900px){
.hb-hero{min-height:0}
.hb-split{grid-template-columns:1fr;gap:34px;padding:120px 0 34px}
.hb-film.hb-film-card{width:100%;max-width:520px;margin-top:0}
.hb-split .hb-clocks{display:none!important}
}
@media(max-width:600px){
.hb-split{padding-top:104px}
.hb-head{font-size:clamp(42px,12vw,56px)}
.hb-lede{font-size:16px}
.hb-cta{font-size:15px}.hb-cta-icon{width:44px;height:44px}
}
/* v19: no background loop — dark blue gradient hero again. */
body.hb-v2 .hb-hero:before{opacity:1}
/* v20: plain dark page, no blue atmosphere (owner: "dark instead of dark blue"). */
body.hb-v2{--hb-slate:#0b0c0e;--hb-line:#ffffff1f;background:#08090a}
body.hb-v2 .hb-hero:before{background:radial-gradient(50% 40% at 50% 0%,#ffffff0d,transparent 70%);opacity:1}
body.hb-v2 .header:before{background:#08090ae6!important;border-bottom:1px solid #ffffff14}
body.hb-v2 .language-control>button{background:#111214b8}
body.hb-v2 .mega-panel{background:#0d0e10f7}
body.hb-v2 .hb-card{background:#111214}
body.hb-v2 .hb-logos{background:transparent!important}
body.hb-v2 .client-strip{background:#08090a}
body.hb-v2 .contact{background:#08090a!important}
body.hb-v2 .services{background:transparent!important}
body.hb-v2 .hb-film.hb-film-card{background:linear-gradient(160deg,#ffffff1f,#ffffff0a)}
/* v21: the flying mark ("snitch") — catch it to open the film. */
@media(min-width:901px){.hb-split{grid-template-columns:minmax(0,1fr) minmax(320px,40%)}}
.hb-snitch-zone{position:relative;align-self:stretch;min-height:420px}
.hb-snitch{position:absolute;left:0;top:0;width:76px;height:76px;padding:0;border:0;background:none;cursor:pointer;z-index:5;will-change:transform;touch-action:manipulation}
.hb-snitch-body{position:absolute;inset:14px;display:grid;place-items:center;color:#fff;filter:drop-shadow(0 0 10px #ffffffb3) drop-shadow(0 0 26px #9fd3ff80);transition:transform .25s}
.hb-snitch-body svg{width:100%;height:100%}
.hb-snitch:hover .hb-snitch-body{transform:scale(1.12)}
.hb-wing{position:absolute;top:18px;width:44px;height:30px;border-radius:100% 0 100% 0;background:linear-gradient(120deg,#ffffffe6,#ffffff33 70%,transparent);opacity:.85;transform-origin:100% 80%;animation:hb-flap .14s ease-in-out infinite alternate}
.hb-wing-l{left:-22px;transform-origin:100% 80%}
.hb-wing-r{right:-22px;transform:scaleX(-1);transform-origin:0% 80%;animation-name:hb-flap-r}
@keyframes hb-flap{from{transform:rotate(18deg) scaleY(1)}to{transform:rotate(-32deg) scaleY(.55)}}
@keyframes hb-flap-r{from{transform:scaleX(-1) rotate(18deg) scaleY(1)}to{transform:scaleX(-1) rotate(-32deg) scaleY(.55)}}
.hb-snitch.is-tired .hb-wing{animation-duration:.32s}
.hb-snitch.is-tired .hb-snitch-body{filter:drop-shadow(0 0 14px #fff) drop-shadow(0 0 40px #9fd3ffcc)}
.hb-snitch.is-caught{pointer-events:none}
.hb-snitch.is-caught .hb-snitch-body{animation:hb-caught .45s ease-out forwards}
.hb-snitch.is-caught .hb-wing{animation:none;opacity:0;transition:opacity .2s}
@keyframes hb-caught{0%{transform:scale(1)}40%{transform:scale(1.6);filter:drop-shadow(0 0 30px #fff) drop-shadow(0 0 80px #9fd3ff)}100%{transform:scale(.2);opacity:0}}
.hb-snitch-trail{position:absolute;width:6px;height:6px;border-radius:50%;background:#cfe9ff;pointer-events:none;opacity:.7;filter:blur(1px);animation:hb-trail .7s ease-out forwards;z-index:4}
@keyframes hb-trail{to{opacity:0;transform:scale(.2)}}
.hb-snitch-hint{position:absolute;left:0;right:0;bottom:0;margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.hb-snitch-label{font:12px/1.2 monospace;letter-spacing:.14em;text-transform:uppercase;color:#cfd6de}
.hb-snitch-skip{border:0;background:none;color:#8d97a3;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.hb-snitch-skip:hover{color:#fff}
.hb-snitch-zone.is-done .hb-snitch-label{opacity:0}
@media(max-width:900px){.hb-split{grid-template-columns:1fr}.hb-snitch-zone{min-height:300px}}
@media(prefers-reduced-motion:reduce){.hb-wing{animation:none}}
/* v22: feathered SVG wings on both sides, bigger mark. */
.hb-snitch{width:96px;height:96px}
.hb-snitch-body{inset:24px}
.hb-wing{top:22px;width:58px;height:33px;border-radius:0;background:none;opacity:.95;filter:drop-shadow(0 0 8px #bfe0ff99)}
.hb-wing svg{width:100%;height:100%;display:block}
.hb-wing-l{left:-14px;transform-origin:100% 85%;animation:hb-flap .13s ease-in-out infinite alternate}
.hb-wing-r{right:-14px;left:auto;transform-origin:0% 85%;animation:hb-flap-r .13s ease-in-out infinite alternate}
.hb-wing-r svg{transform:scaleX(-1)}
@keyframes hb-flap{from{transform:rotate(14deg) scaleY(1)}to{transform:rotate(-38deg) scaleY(.5)}}
@keyframes hb-flap-r{from{transform:rotate(-14deg) scaleY(1)}to{transform:rotate(38deg) scaleY(.5)}}
.hb-wing{top:16px;width:54px;height:30px;opacity:.85;z-index:0}
.hb-wing-l{left:-38px}.hb-wing-r{right:-38px}
.hb-snitch-body{z-index:1}
.hb-wing-l{left:-22px}.hb-wing-r{right:-22px}.hb-wing{top:14px}
/* v25: headline that stands out — chrome "Get noticed." with a light sweep, glowing "Win customers." */
.hb-head{font-size:clamp(56px,7.4vw,120px);letter-spacing:-.065em;line-height:.95}
.hb-head-mute{color:transparent!important;background:linear-gradient(100deg,#5e6670 0%,#9aa3ad 22%,#f4f8fc 34%,#9aa3ad 46%,#5e6670 62%,#8a939d 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;text-shadow:none;animation:hb-shine 5.5s cubic-bezier(.4,0,.2,1) infinite;padding-bottom:.04em}
@keyframes hb-shine{0%{background-position:120% 0}55%,100%{background-position:-60% 0}}
.hb-head-main{text-shadow:0 0 40px #ffffff38,0 0 90px #ffffff1a}
.hb-cta{box-shadow:0 0 0 1px #ffffff40,0 0 40px -6px #ffffff66,0 18px 40px -16px #000c}
@media(prefers-reduced-motion:reduce){.hb-head-mute{animation:none;background-position:30% 0}}
@media(min-width:901px){.hb-split{grid-template-columns:minmax(0,1fr) minmax(280px,32%)}}
.hb-head span{white-space:nowrap}@media(max-width:400px){.hb-head span{white-space:normal}}
.hb-head{font-size:clamp(48px,6.8vw,116px)}
@media(max-width:600px){.hb-head{font-size:clamp(38px,11vw,54px)}}
/* v28: flying mark removed (owner) — film card back on the right. */
.hb-film.hb-film-card{justify-self:end;width:100%;max-width:440px}
/* v29: film card centred in the hero and bigger. */
@media(min-width:901px){.hb-split{grid-template-columns:minmax(0,1fr) minmax(320px,40%);align-items:center}}
.hb-film.hb-film-card{align-self:center;margin-top:0;max-width:580px;padding:8px;border-radius:26px}
.hb-film-media{border-radius:19px}
.hb-film-meta{padding:16px 14px 10px}
.hb-film-meta b{font-size:19px}
/* v30: our film big behind the hero, the logo on top as the play button. */
.hb-bg-film video{object-position:center}
.hb-bg-film:after{content:"";position:absolute;inset:0;background:
linear-gradient(90deg,#08090af2 0%,#08090acc 30%,#08090a40 58%,#08090a26 100%),
linear-gradient(180deg,#08090ae6 0%,#08090a33 22%,transparent 50%,#08090a59 78%,#08090af7 100%)!important}
body.hb-v2 .hb-hero:before{opacity:0}
@media(min-width:901px){.hb-split{grid-template-columns:minmax(0,1fr) minmax(300px,38%);align-items:center}}
.hb-logo-play{position:relative;justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;gap:22px;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.hb-logo-play-mark{position:relative;z-index:1;display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#ffffff2e,#ffffff0d 60%,transparent 72%);backdrop-filter:blur(6px);border:1px solid #ffffff38;box-shadow:0 0 60px -10px #ffffffa0,inset 0 1px 0 #ffffff55;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.hb-logo-play-mark svg{width:70px;height:70px;filter:drop-shadow(0 0 14px #fff) drop-shadow(0 0 34px #cfe6ffaa);animation:hb-mark-breathe 3.6s ease-in-out infinite}
@keyframes hb-mark-breathe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(6deg)}}
.hb-logo-play-ring{position:absolute;top:0;left:50%;width:150px;height:150px;margin-left:-75px;border-radius:50%;border:1px solid #ffffff66;animation:hb-ring 2.8s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
@keyframes hb-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.hb-logo-play:hover .hb-logo-play-mark{transform:scale(1.08);box-shadow:0 0 90px -6px #ffffffd0,inset 0 1px 0 #ffffff77}
.hb-logo-play:focus-visible .hb-logo-play-mark{outline:2px solid #fff;outline-offset:6px}
.hb-logo-play-label{display:flex;flex-direction:column;align-items:center;gap:6px;text-shadow:0 2px 18px #000c}
.hb-logo-play-label b{font-size:20px;font-weight:600;letter-spacing:-.02em}
.hb-logo-play-label small{font:12px/1.2 monospace;letter-spacing:.12em;text-transform:uppercase;color:#dfe6ee}
@media(max-width:900px){.hb-logo-play{margin:10px 0 20px}.hb-logo-play-mark,.hb-logo-play-ring{width:120px;height:120px}.hb-logo-play-ring{margin-left:-60px}.hb-logo-play-mark svg{width:56px;height:56px}
.hb-bg-film:after{background:linear-gradient(180deg,#08090ae6 0%,#08090aa6 45%,#08090a66 70%,#08090af2 100%)!important}}
@media(prefers-reduced-motion:reduce){.hb-logo-play-ring,.hb-logo-play-mark svg{animation:none}}
/* v31: reference-style hero text — smaller, calmer, top-left; stronger shade behind it. */
@media(min-width:901px){.hb-split{align-items:start;padding-top:190px}}
.hb-head{font-size:clamp(40px,4.6vw,72px);font-weight:600;letter-spacing:-.05em;line-height:1.02}
.hb-head-main{font-weight:700;text-shadow:0 0 30px #ffffff26}
.hb-lede{margin-top:20px;max-width:440px;font-size:16px;line-height:1.55;color:#c9d1da}
.hb-cta{margin-top:26px;padding:5px 22px 5px 5px;border-radius:14px;font-size:15px;gap:14px}
.hb-cta-icon{width:44px;height:44px;border-radius:10px;font-size:17px}
.hb-bg-film:after{background:
linear-gradient(90deg,#08090afa 0%,#08090af0 26%,#08090ab3 42%,#08090a33 62%,#08090a1a 100%),
linear-gradient(180deg,#08090ae6 0%,#08090a33 22%,transparent 50%,#08090a66 78%,#08090af7 100%)!important}
@media(min-width:901px){.hb-logo-play{align-self:center;margin-top:-40px}}
.hb-logo-play-label{padding:10px 18px;border-radius:14px;background:#08090aa6;backdrop-filter:blur(10px);border:1px solid #ffffff1f}
@media(max-width:900px){.hb-head{font-size:clamp(36px,10vw,48px)}}
/* v32: play button lower-right (clear of the film's centred titles); no divider above logos; brighter logos. */
@media(min-width:901px){.hb-logo-play{align-self:end;justify-self:end;margin:0 4% 26px 0}}
body.hb-v2 .hb-logos{border-top:0!important}
body.hb-v2 .hb-logos .client-set img{opacity:.95;filter:grayscale(1) invert(1) brightness(1.25)}
/* v34: edge-to-edge layout like the reference — small fixed side margins instead of a centred 1280px column. */
body.hb-v2{--page-gutter:clamp(20px,3.4vw,64px)}
@media(max-width:600px){body.hb-v2{--page-gutter:5%}}
body.hb-v2 .header{left:var(--page-gutter)!important;right:var(--page-gutter)!important;max-width:none!important;margin:0!important;width:auto!important;transform:none!important}
/* v37: lighter shade on the left so the film shows through; text keeps a soft shadow for legibility. */
.hb-bg-film:after{background:
linear-gradient(90deg,#08090ab8 0%,#08090a99 24%,#08090a59 44%,#08090a1a 64%,transparent 100%),
linear-gradient(180deg,#08090acc 0%,transparent 20%,transparent 66%,#08090ae6 100%)!important}
.hb-head{text-shadow:0 4px 30px #000a}
.hb-lede{color:#e3e8ee;text-shadow:0 2px 14px #000d,0 0 2px #0008}
.hb-split .hb-clocks{text-shadow:0 1px 8px #000c}
/* v38: middle-ground shade. */
.hb-bg-film:after{background:
linear-gradient(90deg,#08090ae0 0%,#08090ac7 28%,#08090a73 46%,#08090a26 66%,transparent 100%),
linear-gradient(180deg,#08090acc 0%,transparent 20%,transparent 66%,#08090ae6 100%)!important}
/* v39: framed hero like the reference — inset with rounded corners. */
@media(min-width:601px){
.hb-hero{margin:12px 12px 0;border-radius:22px;overflow:hidden;min-height:calc(100svh - 24px);padding-left:calc(var(--page-gutter) - 12px);padding-right:calc(var(--page-gutter) - 12px);box-shadow:0 0 0 1px #ffffff14}
}
@media(max-width:600px){.hb-hero{margin:8px 8px 0;border-radius:16px;overflow:hidden;padding-left:calc(5% - 8px);padding-right:calc(5% - 8px)}}
body.hb-v2 .hb-logos{margin:0 calc(-1 * (var(--page-gutter) - 12px))}
/* v40: brighter hero — film at full brightness, only a soft local shade behind the text. */
.hb-bg-film:after{background:
radial-gradient(60% 75% at 0% 42%,#08090ab3 0%,#08090a66 45%,transparent 75%),
linear-gradient(180deg,#08090a59 0%,transparent 14%,transparent 82%,#08090a8c 100%)!important}
.hb-bg-film video{filter:brightness(1.05) contrast(1.02)}
.hb-head-mute{background:linear-gradient(100deg,#c4ccd5 0%,#e3e8ee 22%,#ffffff 34%,#e3e8ee 46%,#c4ccd5 62%,#d5dce4 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text}
/* v41: bright film, but enough local shade for the text (left) and logos (bottom). */
.hb-bg-film:after{background:
radial-gradient(55% 70% at 0% 40%,#08090ad9 0%,#08090a99 40%,#08090a33 65%,transparent 80%),
linear-gradient(180deg,#08090a59 0%,transparent 14%,transparent 74%,#08090acc 100%)!important}
/* v43: simple, like the reference — no dark patch, plain text, no glow effects. */
.hb-bg-film:after{background:linear-gradient(180deg,transparent 0%,transparent 80%,#08090a99 100%)!important}
.hb-head{text-shadow:0 1px 18px #0000004d}
.hb-head-mute{animation:none!important;background:none!important;-webkit-background-clip:border-box;background-clip:border-box;color:#ffffffb3!important}
.hb-head-main{color:#fff!important;text-shadow:0 1px 18px #0000004d}
.hb-lede{color:#fff;text-shadow:0 1px 10px #00000059}
.hb-cta{box-shadow:none}
/* v44: one even light dim over the whole film — no patches. */
.hb-bg-film:after{background:#08090a59!important}
/* v45: much lighter dim so the film shows; text carries its own shadow. */
.hb-bg-film:after{background:#08090a26!important}
.hb-bg-film video{filter:none}
.hb-head,.hb-head-main{text-shadow:0 2px 24px #00000080,0 0 2px #0006}
.hb-head-mute{color:#ffffffd9!important}
.hb-lede{text-shadow:0 1px 12px #000000a6,0 0 2px #0008}
/* v46: no dim at all — the film at full brightness. */
.hb-bg-film:after{background:none!important}
/* v47: dark text on the light film, like the reference. */
.hb-head,.hb-head-main,.hb-lede{text-shadow:0 1px 16px #ffffff59}
.hb-head-mute{color:#3b4250b3!important}
.hb-head-main{color:#0d1117!important}
.hb-lede{color:#1b2129}
.hb-cta{background:#0d1117;color:#fff}
.hb-cta-icon{background:#fff;color:#0d1117}
.hb-cta:hover{background:#000}
body.hb-v2 .hb-logos .client-set img{filter:grayscale(1) brightness(0)!important;opacity:.75}
/* v48: text colour follows the film (body.hb-film-dark while the film is dark). */
.hb-head-mute,.hb-head-main,.hb-lede,.hb-cta,.hb-cta-icon,body.hb-v2 .hb-logos .client-set img,body.hb-v2 .header a,body.hb-v2 .header nav button,body.hb-v2 .header-brand,body.hb-v2 .language-control>button{transition:color .5s,background-color .5s,filter .5s,opacity .5s}
body.hb-v2 .hb-logos .client-set img{filter:grayscale(1)!important;opacity:.8}
body.hb-v2.hb-at-top:not(.hb-film-dark) .header-brand,body.hb-v2.hb-at-top:not(.hb-film-dark) .header nav>a,body.hb-v2.hb-at-top:not(.hb-film-dark) .header nav>button,body.hb-v2.hb-at-top:not(.hb-film-dark) .language-control>button{color:#0d1117!important}
body.hb-film-dark .hb-head-mute{color:#ffffffb3!important}
body.hb-film-dark .hb-head-main{color:#fff!important}
body.hb-film-dark .hb-lede{color:#e9edf2}
body.hb-film-dark .hb-head,body.hb-film-dark .hb-head-main,body.hb-film-dark .hb-lede{text-shadow:0 1px 16px #0008}
body.hb-film-dark .hb-cta{background:#f4f8fc;color:#0d1117}
body.hb-film-dark .hb-cta-icon{background:#0d1117;color:#fff}
body.hb-film-dark .hb-logos .client-set img{filter:grayscale(1) invert(1)!important}
/* v49: play button as one clean pill. */
.hb-logo-play{flex-direction:row;gap:14px;padding:7px 22px 7px 7px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(14px);box-shadow:0 14px 40px -14px #0007;color:#0d1117;transition:transform .3s,background .3s}
.hb-logo-play:hover{transform:translateY(-2px);background:#fff}
.hb-logo-play-ring{display:none}
.hb-logo-play-mark{width:52px;height:52px;border:0;background:#0d1117;box-shadow:none;backdrop-filter:none}
.hb-logo-play-mark svg{width:26px;height:26px;color:#fff;filter:none}
.hb-logo-play:hover .hb-logo-play-mark{transform:rotate(12deg);box-shadow:none}
.hb-logo-play-label{align-items:flex-start;gap:3px;padding:0;background:none;border:0;backdrop-filter:none;text-shadow:none}
.hb-logo-play-label b{font-size:16px;color:#0d1117}
.hb-logo-play-label small{font-size:10px;color:#5b6470}
.hb-logo-play:after{content:"→";font-size:18px;margin-left:10px;color:#0d1117}
@media(max-width:900px){.hb-logo-play-mark{width:46px;height:46px}.hb-logo-play-mark svg{width:22px;height:22px}}
/* v51: play-button mark in the Instagram logo colours — white mark on a light steel-blue gradient. */
.hb-logo-play-mark{background:radial-gradient(circle at 30% 25%,#dde6f1 0%,#b4c4d9 45%,#8fa3bf 100%);box-shadow:inset 0 1px 0 #ffffff80,0 2px 8px #4a5d7a40}
.hb-logo-play-mark svg{color:#fff;filter:drop-shadow(0 0 4px #ffffffb3)}
/* v52: no header bar over the film; dark bar only after scrolling past the hero. */
body.hb-v2.hb-at-top .header:before{background:transparent!important;border-bottom-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* v53: film 20% smaller, feathered into a matching light steel-blue background. */
.hb-hero{background:radial-gradient(70% 80% at 65% 45%,#c3cfdc 0%,#aebdcf 55%,#9aabc0 100%)}
.hb-bg-film video{transform:scale(.8);transform-origin:70% 48%;
-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%)}
/* v55: soft rectangular edge fade instead of the oval. */
.hb-bg-film video{
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
mask-composite:intersect}
/* v56: white CTA pill matching the "Who we are" pill. */
.hb-cta,body.hb-film-dark .hb-cta{background:#ffffffeb;color:#0d1117;border-radius:999px;padding:6px 26px 6px 6px;gap:14px;font-size:16px;font-weight:600;box-shadow:0 14px 40px -14px #0007;backdrop-filter:blur(14px);transition:transform .3s,background .3s}
.hb-cta:hover{background:#fff;transform:translateY(-2px)}
.hb-cta-icon,body.hb-film-dark .hb-cta-icon{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#dde6f1 0%,#b4c4d9 45%,#8fa3bf 100%);color:#fff;font-size:18px;box-shadow:inset 0 1px 0 #ffffff80;transition:transform .3s}
.hb-cta:hover .hb-cta-icon{transform:rotate(45deg)}
/* v57: no heading above the card row. */
.hb-possibilities .hb-reel{margin-top:0}
.hb-cta-icon,body.hb-film-dark .hb-cta-icon{color:#0d1117}
/* v59: header sits a little lower inside the framed hero. */
body.hb-v2 .header{transition:top .35s ease}
@media(min-width:601px){body.hb-v2.hb-at-top .header{top:26px!important}}
@media(max-width:600px){body.hb-v2.hb-at-top .header{top:14px!important}}
/* Soft hand-off from the light hero panel into the dark page */
body.hb-v2 .hb-possibilities{position:relative;isolation:isolate}
body.hb-v2 .hb-possibilities::before{content:'';position:absolute;z-index:-1;left:50%;transform:translateX(-50%);top:-140px;width:120%;height:620px;background:radial-gradient(ellipse 55% 60% at 50% 0%,#aebdcf33 0%,#aebdcf14 38%,#08090a00 72%);pointer-events:none}
body.hb-v2 .hb-hero{box-shadow:0 40px 120px -20px #aebdcf2e,0 90px 180px -60px #aebdcf1f}
/* Reel heading, left of the arrows */
.hb-reel-nav{align-items:flex-end}
.hb-reel-head{margin-right:auto}
.hb-reel-head p{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#ffffff8c}
.hb-reel-head h2{margin:0;font-size:clamp(34px,4.4vw,64px);font-weight:700;letter-spacing:-.05em;line-height:.98;color:#fff}
/* Mouse drag */
.hb-reel-track{cursor:grab;user-select:none;-webkit-user-select:none}
.hb-reel-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.hb-reel-track.is-dragging .hb-card{pointer-events:none}
.hb-reel-track img,.hb-reel-track video{-webkit-user-drag:none}
@media(max-width:600px){.hb-reel-head h2{font-size:34px}.hb-reel-nav{gap:8px}}
/* v60: "What we do" — tabs with media / copy / media. */
.hb-wwd{padding-top:110px;padding-bottom:90px}
.hb-wwd-top{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.hb-wwd-top h2{margin:0;font-size:clamp(48px,7vw,104px);font-weight:700;letter-spacing:-.055em;line-height:.95;color:#f4f8fc}
.hb-wwd-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;border:1px solid #ffffff4d;background:transparent;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .25s,color .25s}
.hb-wwd-btn:hover{background:#fff;color:#0d1117}
.hb-wwd-tabs{display:flex;gap:6px;margin:44px 0 0;border-bottom:1px solid #ffffff1f;overflow-x:auto;scrollbar-width:none}
.hb-wwd-tabs::-webkit-scrollbar{display:none}
.hb-wwd-tabs button{flex:none;position:relative;padding:18px 22px;border:0;background:none;color:#8b95a3;font-size:15px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.hb-wwd-tabs button:hover{color:#dfe6ee}
.hb-wwd-tabs button[aria-selected="true"]{color:#fff}
.hb-wwd-tabs button[aria-selected="true"]:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#dde6f1,#8fa3bf)}
.hb-wwd-panel{display:grid;grid-template-columns:1.1fr .9fr 1.1fr;gap:20px;margin-top:28px;min-height:520px;animation:hb-wwd-in .45s cubic-bezier(.2,.8,.2,1)}
.hb-wwd-panel[hidden]{display:none}
@keyframes hb-wwd-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hb-wwd-media{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#111214;min-height:520px}
.hb-wwd-media img,.hb-wwd-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-wwd-copy{display:flex;flex-direction:column;justify-content:center;padding:20px 12px}
.hb-wwd-copy h3{margin:0;font-size:clamp(28px,2.6vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:#fff}
.hb-wwd-copy p{margin:20px 0 0;color:#c9d1da;font-size:16px;line-height:1.6}
.hb-wwd-copy a{margin-top:26px;align-self:flex-start;color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid #ffffff59;padding-bottom:4px}
.hb-wwd-copy a:hover{border-color:#fff}
@media(max-width:900px){.hb-wwd-panel{grid-template-columns:1fr 1fr;min-height:0}.hb-wwd-copy{grid-column:1/-1;grid-row:1;padding:6px 0 10px}.hb-wwd-media{min-height:360px}}
@media(max-width:600px){.hb-wwd{padding-top:70px}.hb-wwd-tabs button{padding:14px 14px;font-size:13px}.hb-wwd-media{min-height:260px}}
@media(prefers-reduced-motion:reduce){.hb-wwd-panel{animation:none}}
.hb-possibilities{overflow-x:clip}
/* v62: "You could be growing right now" — full-bleed film, text straight on it, white pill CTA. */
body.hb-v2 .hb-growth{position:relative;isolation:isolate;overflow:hidden;max-width:none;margin:40px 12px 60px;padding:110px var(--page-gutter);border-radius:22px;background:#0b0c0e;min-height:560px;display:flex;align-items:center}
.hb-growth:before{display:none!important}
.hb-growth-bg{position:absolute;inset:0;z-index:-1}
.hb-growth-bg video{width:100%;height:100%;object-fit:cover}
.hb-growth-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#08090ad9 0%,#08090a99 38%,#08090a1a 70%,transparent 100%)}
.hb-growth-inner{max-width:640px}
.hb-growth .growth-eyebrow{color:#dbe4ee}
.hb-growth h2{margin:18px 0 0;font-size:clamp(44px,5.6vw,84px);font-weight:700;letter-spacing:-.055em;line-height:1;color:#fff}
.hb-growth h2 em{font-family:Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.04em;background:linear-gradient(105deg,#dde6f1,#b4c4d9 60%,#8fa3bf);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-growth p{margin:22px 0 0;color:#dfe6ee;font-size:17px;line-height:1.55;max-width:520px}
.hb-growth .growth-tags{margin:26px 0 34px}
.hb-growth .growth-tags a{display:block;padding:9px 16px;border-radius:999px;border:1px solid #ffffff40;background:#ffffff12;backdrop-filter:blur(8px);color:#fff;font-size:14px;text-decoration:none;transition:background .2s,color .2s}
.hb-growth .growth-tags a:hover{background:#fff;color:#0d1117}
.hb-growth .growth-tags li{border:0;padding:0;background:none}
@media(max-width:700px){body.hb-v2 .hb-growth{margin:24px 8px 40px;padding:70px 20px;min-height:0}.hb-growth-bg:after{background:linear-gradient(180deg,#08090ab3,#08090ad9)}}
/* v63: platform logo tiles floating on the Ads card. */
.hb-card-logos{position:absolute;z-index:1;left:50%;top:44%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(3,auto);gap:12px;justify-content:center}
.hb-logo-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:clamp(64px,6.4vw,92px);aspect-ratio:1;border-radius:22px;background:var(--bg);color:var(--fg);box-shadow:0 18px 40px -14px #000a,inset 0 1px 0 #ffffff66;animation:hb-tile-float 4.5s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
.hb-logo-tile svg{width:42%;height:42%}
.hb-logo-tile small{font-size:clamp(9px,.75vw,11px);font-weight:600;letter-spacing:-.01em;opacity:.85}
.hb-logo-tile:nth-child(4){grid-column:1/2;margin-left:calc(clamp(64px,6.4vw,92px)/2 + 6px)}
.hb-logo-tile:nth-child(5){margin-left:calc(clamp(64px,6.4vw,92px)/2 + 6px)}
@keyframes hb-tile-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hb-card:hover .hb-logo-tile{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hb-logo-tile{animation:none}}
/* v64: logo tiles as one neat row above the title. */
.hb-card-logos{top:auto;bottom:108px;left:28px;right:28px;transform:none;display:flex;flex-wrap:nowrap;gap:8px;justify-content:flex-start}
.hb-logo-tile{width:clamp(48px,4.4vw,62px);border-radius:16px;gap:3px}
.hb-logo-tile small{font-size:9px}
.hb-logo-tile:nth-child(4),.hb-logo-tile:nth-child(5){margin-left:0;grid-column:auto}
@media(max-width:600px){.hb-card-logos{left:20px;bottom:76px;gap:6px}.hb-logo-tile{width:44px;border-radius:12px}.hb-logo-tile small{display:none}}
.hb-growth-inner{max-width:760px}
/* v66: Ads card = logos only, no photo. */
.hb-card-platforms{background:radial-gradient(120% 80% at 50% 0%,#1b2433 0%,#0d1117 55%,#08090a 100%)}
.hb-card-platforms:after{background:linear-gradient(0deg,#08090acc 0%,transparent 35%)}
.hb-plat-glow{position:absolute;inset:0;pointer-events:none;background:
radial-gradient(28% 22% at 25% 34%,#0866ff59,transparent 70%),
radial-gradient(26% 20% at 75% 30%,#4285f44d,transparent 70%),
radial-gradient(26% 22% at 30% 62%,#ff004f40,transparent 70%),
radial-gradient(26% 22% at 74% 60%,#10a37f40,transparent 70%);filter:blur(10px)}
.hb-card-platforms .hb-card-logos{top:46%;bottom:auto;left:50%;right:auto;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(2,auto);gap:18px;justify-content:center}
.hb-card-platforms .hb-logo-tile{width:clamp(92px,8.6vw,124px);border-radius:28px;gap:8px;box-shadow:0 24px 50px -16px #000c,inset 0 1px 0 #ffffffaa,0 0 0 1px #ffffff1a}
.hb-card-platforms .hb-logo-tile small{font-size:13px}
.hb-card-platforms .hb-logo-tile:nth-child(odd){transform:rotate(-4deg)}
.hb-card-platforms .hb-logo-tile:nth-child(even){transform:rotate(4deg)}
.hb-card-platforms .hb-logo-seo{grid-column:1/-1;justify-self:center}
@keyframes hb-tile-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hb-card-platforms:hover .hb-logo-tile{animation-play-state:running}
.hb-card-platforms:hover .hb-logo-tile:nth-child(1){translate:-6px -6px}
@media(max-width:600px){.hb-card-platforms .hb-logo-tile{width:76px;border-radius:20px}.hb-card-platforms .hb-logo-tile small{display:block;font-size:10px}.hb-card-platforms .hb-card-logos{gap:12px}}
.hb-plat-glow{background:
radial-gradient(30% 22% at 30% 28%,#0866ffa6,transparent 70%),
radial-gradient(30% 22% at 72% 28%,#4285f499,transparent 70%),
radial-gradient(30% 24% at 28% 56%,#ff004f80,transparent 70%),
radial-gradient(30% 24% at 74% 56%,#10a37f80,transparent 70%);filter:blur(24px)}
.hb-card-platforms .hb-card-tag{z-index:2;background:#ffffff14;border:1px solid #ffffff26}
/* v68: real full-colour platform logos in a clean 3x2 grid. */
.hb-card-platforms .hb-plat-grid{top:45%;left:50%;bottom:auto;right:auto;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(84%,330px)}
.hb-plat{display:flex;flex-direction:column;align-items:center;gap:9px;animation:hb-tile-float 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.8s)}
.hb-plat-icon{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:24px;background:linear-gradient(160deg,#ffffff,#eef1f5);box-shadow:0 18px 36px -16px #000d,inset 0 1px 0 #fff,0 0 0 1px #ffffff26}
.hb-plat-icon img{width:48%;height:48%;object-fit:contain}
.hb-plat small{font-size:12px;font-weight:600;color:#dfe6ee;letter-spacing:-.01em;white-space:nowrap}
.hb-card-platforms:hover .hb-plat-icon{transform:translateY(-2px)}
.hb-plat-icon{transition:transform .3s}
@media(max-width:600px){.hb-card-platforms .hb-plat-grid{gap:10px}.hb-plat-icon{border-radius:18px}.hb-plat small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hb-plat{animation:none}}
/* v69: reel arrows as glass buttons over the images, left and right. */
.hb-reel{position:relative}
.hb-reel-nav{position:static;margin-bottom:18px}
.hb-reel-nav .hb-reel-btn{position:absolute;z-index:5;top:calc(50% + 40px);transform:translateY(-50%);width:58px;height:58px;border-radius:50%;border:1px solid #ffffff40;background:#0d111799;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;font-size:20px;box-shadow:0 14px 40px -12px #000c;transition:opacity .3s,transform .3s,background .3s}
.hb-reel-nav [data-reel-prev]{left:18px}
.hb-reel-nav [data-reel-next]{right:calc(var(--page-gutter) + 18px)}
.hb-reel-nav .hb-reel-btn:hover{background:#fff;color:#0d1117;transform:translateY(-50%) scale(1.06)}
.hb-reel-nav .hb-reel-btn:disabled{opacity:0;pointer-events:none}
@media(max-width:600px){.hb-reel-nav .hb-reel-btn{display:none}}
.hb-card .hb-plat-icon img{position:static;inset:auto;width:50%;height:50%;object-fit:contain;transform:none!important}
/* v71: "The human part" — film card instead of the chrome h*b graphic. */
.hb-studio .studio-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center}
.hb-studio-film{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;border-radius:22px;overflow:hidden;cursor:pointer;background:#111214;box-shadow:0 40px 90px -40px #000,0 0 0 1px #ffffff14}
.hb-studio-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.hb-studio-film:hover video{transform:scale(1.04)}
.hb-studio-play{position:absolute;left:22px;bottom:22px;display:flex;align-items:center;gap:12px;padding:6px 22px 6px 6px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(14px);color:#0d1117;text-align:left;box-shadow:0 14px 40px -14px #0008}
.hb-studio-play b{display:block;font-size:15px}
.hb-studio-play small{display:block;font:10px/1.3 monospace;letter-spacing:.1em;text-transform:uppercase;color:#5b6470}
.hb-studio-play .hb-cta-icon{font-size:13px;padding-left:2px}
.hb-studio h2{font-size:clamp(34px,3.6vw,54px)}
.hb-studio .hb-cta{margin-top:28px}
@media(max-width:900px){.hb-studio .studio-grid{grid-template-columns:1fr;gap:34px}}
/* v61: film full-bleed in the hero — no edge mask, no shrink. White hero text (body.hb-film-dark is set in index.html). */
.hb-bg-film video{transform:none!important;-webkit-mask-image:none!important;mask-image:none!important}
/* v62: no light glow over the bottom of the full-bleed hero film. */
body.hb-v2 .hb-possibilities::before{display:none}
/* v62: hero CTA — clean solid pill, no icon; dark fill sweeps in on hover. */
.hb-hero .hb-hero-cta{position:relative;overflow:hidden;isolation:isolate;height:56px;padding:0 32px!important;gap:0;background:#fff!important;color:#0d1117;font-size:16px;font-weight:600;letter-spacing:-.01em;box-shadow:0 18px 44px -18px #000a,inset 0 0 0 1px #ffffff;backdrop-filter:none;transition:color .35s ease,transform .35s ease,box-shadow .35s ease}
.hb-hero .hb-hero-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:#0d1117;border-radius:inherit;transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hb-hero .hb-hero-cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 22px 50px -18px #000c,inset 0 0 0 1px #ffffff}
.hb-hero .hb-hero-cta:hover::before{transform:translateY(0)}
.hb-hero .hb-hero-cta:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* v62: tagline — larger, crisper, sits closer to the headline. */
body.hb-film-dark .hb-lede{font-size:clamp(18px,1.45vw,22px);font-weight:500;line-height:1.35;letter-spacing:-.015em;color:#fffffff0;text-shadow:0 1px 2px #0006,0 2px 22px #0009}
@media(max-width:600px){.hb-hero .hb-hero-cta{height:52px;padding:0 26px!important;font-size:15px}}
/* v63: bigger "Who we are" pill with a play glyph instead of the arrow. */
.hb-logo-play{gap:18px;padding:10px 30px 10px 10px}
.hb-logo-play-mark{width:68px;height:68px}
.hb-logo-play-mark svg{width:32px;height:32px}
.hb-logo-play-label{gap:5px}
.hb-logo-play-label b{font-size:20px;letter-spacing:-.02em}
.hb-logo-play-label small{font-size:11px;letter-spacing:.14em}
.hb-logo-play:after{content:"";width:0;height:0;margin-left:14px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #0d1117;transition:transform .3s}
.hb-logo-play:hover:after{transform:scale(1.15)}
@media(max-width:900px){.hb-logo-play{gap:14px;padding:8px 24px 8px 8px}.hb-logo-play-mark{width:56px;height:56px}.hb-logo-play-mark svg{width:26px;height:26px}.hb-logo-play-label b{font-size:18px}}
/* v65: square logo tile in the pill — dark tile, glowing white star, no video. */
.hb-logo-play-tile{width:68px;height:68px;border-radius:50%!important;background:radial-gradient(120% 120% at 30% 15%,#2a3446 0%,#121722 55%,#0b0e14 100%)!important;box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 1px #ffffff14,0 6px 16px -4px #0d111759!important;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.hb-logo-play-tile svg{animation:none!important;width:34px;height:34px;color:#fff;filter:drop-shadow(0 0 6px #ffffffb3) drop-shadow(0 0 16px #b9d4ff80)!important;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hb-logo-play:hover .hb-logo-play-tile{transform:scale(1.04)!important;box-shadow:inset 0 1px 0 #ffffff33,inset 0 0 0 1px #ffffff1f,0 10px 22px -6px #0d111780!important}
.hb-logo-play:hover .hb-logo-play-tile svg{transform:rotate(45deg)}
.hb-logo-play:focus:not(:focus-visible){outline:none}
@media(max-width:900px){.hb-logo-play-tile{width:56px;height:56px;border-radius:50%!important}.hb-logo-play-tile svg{width:28px;height:28px}}
/* v66: language menu — light frosted card matching the white pills, round flags, dark active row. */
body.hb-v2 #language-panel{min-width:236px;padding:6px;border:0;border-radius:22px;background:#ffffffed;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:0 28px 70px -20px #000b,0 0 0 1px #ffffff,inset 0 1px 0 #fff}
body.hb-v2 #language-panel>button{grid-template-columns:26px 1fr auto;gap:12px;padding:10px 14px 10px 10px;border:0;border-radius:16px;color:#0d1117;font-size:15px;font-weight:500;letter-spacing:-.01em;transition:background .2s,color .2s}
body.hb-v2 #language-panel>button:hover{background:#0d11170d;transform:none}
body.hb-v2 #language-panel>button+button{margin-top:2px}
body.hb-v2 #language-panel .language-flag{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;overflow:hidden;font-size:36px;line-height:1;box-shadow:0 0 0 1px #0d11171a,0 2px 6px #0d111726}
body.hb-v2 #language-panel>button>span{font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;color:#6b7380}
body.hb-v2 #language-panel>button[aria-pressed=true]{background:#0d1117;color:#fff;font-weight:600;border:0}
body.hb-v2 #language-panel>button[aria-pressed=true] .language-flag{box-shadow:0 0 0 2px #ffffff40}
body.hb-v2 #language-panel>button[aria-pressed=true]>span{color:#ffffffb3}
body.hb-v2 #language-panel>button[aria-pressed=true]>span:after{content:"";display:inline-block;width:5px;height:9px;margin:0 2px 1px 9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);vertical-align:middle}
body.hb-v2 #language-panel>button:focus-visible{outline:2px solid #0d1117;outline-offset:2px}
body.hb-v2 #language-status{color:#4b5563}
body.hb-v2 #language-panel .language-flag{font-size:0;color:transparent;background:#fff center/cover no-repeat}
body.hb-v2 #language-panel [data-language=en] .language-flag{background-image:url("data:image/svg+xml,")}
body.hb-v2 #language-panel [data-language=da] .language-flag{background-image:url("data:image/svg+xml,")}
body.hb-v2 #language-panel [data-language=de] .language-flag{background-image:url("data:image/svg+xml,")}
body.hb-v2 #language-panel [data-language=fi] .language-flag{background-image:url("data:image/svg+xml,")}
/* v67: laptop/desktop scale-up — hero type, header and pills grow with the viewport (were capped small on 14" laptops). */
@media(min-width:901px){
.hb-head{font-size:clamp(48px,5.4vw,124px)}
body.hb-film-dark .hb-lede{font-size:clamp(18px,1.5vw,28px);max-width:34em}
body.hb-v2 .hb-hero .hb-hero-cta{height:clamp(56px,3.9vw,72px);padding:0 clamp(30px,2.2vw,44px)!important;font-size:clamp(16px,1.1vw,20px)!important}
body.hb-v2 .header nav>a,body.hb-v2 .header nav>button,body.hb-v2 .header .mega-trigger{font-size:clamp(14.5px,1.02vw,18px)!important}
body.hb-v2 .header .project-button{font-size:clamp(13px,.98vw,17px)}
body.hb-v2 #language-toggle{font-size:clamp(10px,.82vw,14px)}
body.hb-v2 #language-toggle svg{width:clamp(19px,1.3vw,24px);height:clamp(19px,1.3vw,24px)}
body.hb-v2 .header-brand-mark{width:clamp(43px,2.9vw,54px);height:clamp(43px,2.9vw,54px)}
body.hb-v2 .header-brand-name{font-size:clamp(29px,1.95vw,37px);letter-spacing:-.062em}
body.hb-v2 .hb-logos .client-set{--logo-h:clamp(38px,2.8vw,54px)}
}
@media(min-width:1400px){
.hb-logo-play{gap:20px;padding:11px 34px 11px 11px}
.hb-logo-play-tile{width:76px;height:76px}
.hb-logo-play-tile svg{width:38px;height:38px}
.hb-logo-play-label b{font-size:23px!important}
.hb-logo-play-label small{font-size:12px}
}
@media(min-width:1800px){
.hb-logo-play-tile{width:86px;height:86px}
.hb-logo-play-tile svg{width:42px;height:42px}
.hb-logo-play-label b{font-size:26px!important}
.hb-logo-play-label small{font-size:13px}
}