/* ==========================================================================
   Borderless — additions on top of the AIXOR template (aixor.css).
   Type:   the template's own pair — Urbanist, with Arapey italic for accents.
   Colour: black and white from the template, plus the Borderless palette:
           ink #002B2E · teal #116265 · sage #AFCFC0 · amber #F4BC05 ·
           coral #FF3924 · sand #ECE9E2
   ========================================================================== */
@font-face { font-family: "Urbanist"; src: url("../fonts/urbanist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("../fonts/urbanist-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Arapey"; src: url("../fonts/arapey.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Arapey"; src: url("../fonts/arapey-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root {
    --font_heading: "Urbanist", sans-serif;
    --font_body: "Urbanist", sans-serif;
    --font_accent: "Arapey", serif;
    /* the template's two font slots */
    --font_urbanist: var(--font_body);
    --font_arapey: var(--font_accent);

    --ink: #002B2E;
    --ink-deep: #001A1C;
    --teal: #116265;
    --sage: #AFCFC0;
    --amber: #F4BC05;
    --coral: #FF3924;
    --sand: #ECE9E2;
    --accent: var(--teal);
    --line: #262626;

    /* one type scale for the whole site */
    --fs-display: clamp(52px, 6.6vw, 104px);
    --fs-h2: clamp(32px, 3.4vw, 52px);
    --fs-h3: clamp(26px, 2.3vw, 36px);
    --fs-h4: 20px;
    --fs-body: 16px;
    --fs-small: 13px;
    --lh-body: 1.8;

    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-reveal: cubic-bezier(.316, -.015, .018, 1.02);
    --ease-io: cubic-bezier(.7, 0, .2, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; font-synthesis: none; }
body {
    color: var(--primary);
    font-family: var(--font_body);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: var(--lh-body);
    overflow-x: hidden;
}
p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
button { font: inherit; }

/* Headings: one face, one weight, solid colour — no gradients, no italics */
h1, h2, h3, h4, h5, h6,
.section-title,
.section-subtitle,
.contact-sec .contact-content h3,
.team-cv-box .team-cv-header .title,
.footer-widget h4,
.footer-link ul li a,
.footer-widget .copyright,
.footer-contact-infos .footer-widget-top a,
.header-menu-wrap .navbar .menu li a,
.theme-btn {
    font-family: var(--font_heading);
    font-weight: 400;
}
/* Accent words: Arapey italic in sage (as the template does with "Imagination") */
h1 em, h2 em, h3 em, h4 em, h5 em, .bl-em {
    font-family: var(--font_accent);
    font-style: italic;
    font-weight: 400;
    color: var(--sage);
    letter-spacing: 0;
}
/* Small uppercase labels: one weight everywhere */
.section-subtitle, .header-menu-wrap .navbar .menu li a, .footer-widget h4, .footer-link ul li a,
.footer-widget .copyright, .theme-btn, .bl-card__label, .bl-side__sub a, .bl-side__reach span,
.bl-back, .bl-globe__hint, .bl-globe__tip-note, .bl-side__n {
    font-weight: 600;
}
.section-title,
.contact-sec .contact-content h3 {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--primary);
}

/* Label style (small caps line above a heading) */
.section-subtitle {
    width: auto;
    font-size: var(--fs-small);
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary);
}
.section-subtitle img { display: none; }
.section-subtitle::before {
    content: "";
    flex: none;
    width: 18px;
    height: 10px;
    background: var(--amber);
    -webkit-mask: url(../images/Union.svg) center / contain no-repeat;
    mask: url(../images/Union.svg) center / contain no-repeat;
}

/* Section headings */
.section-header { align-items: flex-start; }
.section-header .section-subtitle { width: 26%; padding-top: 14px; }
.section-header .section-title { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: 0; }

/* Buttons: white outline; hover fills with the accent */
.theme-btn { font-size: 15px; letter-spacing: .01em; padding: 15px 26px; gap: 12px; line-height: 1; }
.theme-btn:before { background: var(--accent); }
.theme-btn:hover { color: #fff; border-color: var(--accent); }
.theme-btn:hover img { filter: none; }
a.with-border:before { background: var(--amber); }

/* ---------- The logo (traced from the brand artwork; see borderless-logo.js) ---------- */
.bl-name { display: inline-block; line-height: 0; color: var(--primary); }
.bl-name svg, .bl-name img { display: block; height: 100%; width: auto; }
.bl-logo { fill: currentColor; fill-rule: evenodd; overflow: visible; }
.bl-logo__word { opacity: 0; transition: opacity .25s ease; }
.bl-logo__word.is-active { opacity: 1; transition: opacity .4s ease .25s; }
.bl-logo__fly, .bl-logo__all { transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.bl-logo__wing--l { transform-box: view-box; transform-origin: 1743px 470px; animation: bl-wing 3.6s ease-in-out infinite; }
@keyframes bl-wing { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.9); } }

.header-menu-wrap .logo { display: block; flex: none; padding: 4px 0; }
.header-menu-wrap .logo .bl-name { height: 48px; }
.bl-name--xl { height: clamp(48px, 7vw, 96px); }
.footer-area .footer-bottom { height: auto; padding: 0 20px 4vw; overflow: hidden; }
.footer-area .footer-bottom .split-text-anim { display: flex; justify-content: center; }
.bl-name--footer { width: min(1500px, 94vw); height: auto; color: var(--sand); }
.bl-name--footer svg, .bl-name--footer img { width: 100%; height: auto; }

/* ---------- Butterfly cursor (replaces the template's dot) ---------- */
#magic-cursor { mix-blend-mode: normal; }
#ball {
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    background: none;
    backdrop-filter: none;
    border-radius: 0;
    color: #fff;
}
#ball svg { position: relative; width: 100%; height: 100%; overflow: visible; fill: currentColor; fill-rule: evenodd; transition: transform .35s var(--ease-io), color .3s; filter: drop-shadow(0 0 4px rgba(255, 236, 196, .55)) drop-shadow(0 2px 5px rgba(0, 0, 0, .45)); }
/* a soft light that breathes around the butterfly, brighter while it flies */
#ball::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 240, 205, .5) 0%, rgba(244, 188, 5, .2) 32%, rgba(175, 207, 192, .1) 52%, transparent 70%);
    opacity: .55;
    pointer-events: none;
    animation: bl-glow 2.8s ease-in-out infinite;
    transition: opacity .4s var(--ease-out), background .3s;
}
@keyframes bl-glow { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.08); } }
#ball.is-moving::before { opacity: .9; }
#ball.hovered::before { opacity: 1; background: radial-gradient(circle, rgba(255, 228, 150, .6) 0%, rgba(244, 188, 5, .3) 35%, transparent 70%); }
/* over the light sand sections the butterfly turns ink with a teal glow */
#ball.on-light { color: var(--ink); }
#ball.on-light svg { filter: drop-shadow(0 0 4px rgba(17, 98, 101, .35)) drop-shadow(0 2px 4px rgba(0, 43, 46, .2)); }
#ball.on-light::before { background: radial-gradient(circle, rgba(17, 98, 101, .32) 0%, rgba(175, 207, 192, .3) 38%, transparent 70%); }
#ball.on-light.hovered { color: var(--teal); }
#ball .bl-cursor__l, #ball .bl-cursor__r { transform-box: view-box; transform-origin: 1743px 470px; }
#ball.is-moving .bl-cursor__l { animation: bl-flutter .16s ease-in-out infinite alternate; }
#ball.is-moving .bl-cursor__r { animation: bl-flutter-r .16s ease-in-out infinite alternate; }
@keyframes bl-flutter { to { transform: scaleX(.35); } }
@keyframes bl-flutter-r { to { transform: scaleX(.8) skewY(-4deg); } }
#ball.hovered svg { transform: scale(1.5); color: var(--amber); }
#ball.hide-mouse { opacity: 0 !important; }
@media (hover: none) { #magic-cursor { display: none; } }

/* ---------- Header ---------- */
.header-menu-wrap .custom-container { padding-top: 14px; }
.header-menu-wrap .navbar .menu { gap: clamp(28px, 3.2vw, 60px); }
.header-menu-wrap .navbar .menu li a { font-size: var(--fs-small); letter-spacing: .12em; color: #bfbfbf; }
.header-menu-wrap .navbar .menu li a > span { font-size: 12px; }
.header-menu-wrap .navbar .menu li a:before { background: var(--amber); height: 2px; }
.header-menu-wrap .navbar .menu li .dropdown-list { width: 290px; padding: 36px 34px; gap: 24px; }
.header-menu-wrap .navbar .menu li .dropdown-list li a { font-size: var(--fs-small); letter-spacing: .12em; color: #fff; }
.header-menu-wrap .navbar .menu li:focus-within > .dropdown-list { opacity: 1; visibility: visible; }
.header-menu-wrap .header-right-info { gap: 28px; }
.header-social { display: flex; align-items: center; gap: 10px; }
.header-social a,
.bl-side__social a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #666;
    color: #bfbfbf !important;
    font-size: 18px;
    transition: .3s;
}
.header-social a:hover, .bl-side__social a:hover { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.ico-x { width: 14px; height: 14px; display: block; }
.hamburg-menu { padding: 0; }
.hamburg-menu:hover { background: var(--accent); border-color: var(--accent); }
.hamburg-menu:hover span { background: #fff; }
.hamburg-menu--inline { display: none; position: static; transform: none; width: 48px; height: 48px; border-width: 1.6px; }

/* keep the full menu on laptops (the template hides it below 1440px) */
@media (max-width: 1439px) {
    .header-menu-wrap .navbar > ul > li:not(.dropdown-menu-item) { display: block; }
    .header-menu-wrap .navbar { margin-left: auto; margin-right: 40px; }
}
@media (max-width: 1180px) {
    .header-menu-wrap .navbar,
    .header-social { display: none; }
    .hamburg-menu--inline { display: flex; }
    .scroll-to-show-menu .hamburg-menu { right: 20px; }
}
@media (max-width: 809px) {
    .header-menu-wrap .header-right-info { gap: 18px; }
    .header-menu-wrap .logo .bl-name { height: 38px; }
}

/* The sphere video sits on black: screen blending drops its background so it
   melts into any section colour */
.preloader-wrap video { mix-blend-mode: screen; filter: contrast(1.15); }

/* ---------- Preloader ---------- */
.preloader-wrap { gap: 32px; }
.preloader-wrap video { width: min(420px, 70vw); }

/* ==========================================================================
   Hero: "Ideas without borders"
   Two streams of light (amber from above, teal from below) drift toward each
   other and meet behind the "Let's connect" button: East meets West. The
   streams are drawn on the canvas by borderless.js; the gradients here are what
   shows before it starts (or without JavaScript / canvas).
   ========================================================================== */
.bl-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(112px, 15vh, 150px) 24px clamp(22px, 3.6vh, 40px);
    color: #fff;
    text-align: center;
    background:
        radial-gradient(60% 46% at 50% 56%, rgba(17, 98, 101, .38), transparent 70%),
        radial-gradient(40% 30% at 50% 30%, rgba(244, 188, 5, .07), transparent 70%),
        linear-gradient(180deg, #000 0%, #00181a 62%, var(--ink) 100%);
}
.bl-hero__media { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* two layers: a quarter-size glow the browser scales up (soft for free), and the sharp strands on top */
.bl-hero__glow, .bl-hero__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s var(--ease-out); }
.bl-hero__media.is-on .bl-hero__glow, .bl-hero__media.is-on .bl-hero__canvas { opacity: 1; }
/* keeps the words readable over the light, and melts the bottom into the About section */
.bl-hero__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(52% 30% at 50% 32%, rgba(0, 10, 12, .55), rgba(0, 10, 12, .2) 60%, transparent 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 18%, transparent 72%, rgba(0, 43, 46, .85) 96%, var(--ink) 100%);
}

.bl-hero__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2.6vh, 30px);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.bl-hero__kicker {
    margin: 0;
    color: var(--sage);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}
.bl-hero__title {
    margin: 0;
    /* sized by width and height, so it never pushes the hero past one screen */
    font-size: clamp(50px, min(7.5vw, 13vh), 132px);
    line-height: 1;
    letter-spacing: -0.035em;
    color: #fff;
}
.bl-hero__line { display: block; }
.bl-hero__line + .bl-hero__line { margin-top: .04em; }
.bl-hero__kicker + .bl-hero__title { margin-top: clamp(2px, .6vh, 8px); }
.bl-hero__title em { color: var(--sage); letter-spacing: -0.01em; padding-right: .04em; }
.bl-hero__sub {
    max-width: 560px;
    margin: 0;
    color: #c6d4d1;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.6;
    text-wrap: balance;
}

/* the glass button the two streams meet behind: warm edge on the left, cool on the right */
.bl-hero__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: clamp(8px, 1.8vh, 20px);
    padding: 17px 32px;
    border-radius: 999px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
    background:
        linear-gradient(90deg, rgba(244, 188, 5, .16) 0%, rgba(255, 255, 255, .05) 35%, rgba(255, 255, 255, .03) 65%, rgba(94, 196, 192, .16) 100%),
        rgba(4, 22, 24, .38);
    -webkit-backdrop-filter: blur(14px) saturate(.6);
    backdrop-filter: blur(14px) saturate(.6);
    box-shadow: 0 0 34px rgba(244, 188, 5, .12), 0 0 46px rgba(94, 196, 192, .12), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .16s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s var(--ease-out);
}
.bl-hero__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.3px;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(244, 188, 5, .95), rgba(255, 255, 255, .18) 32%, rgba(255, 255, 255, .06) 60%, rgba(175, 207, 192, .95));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
.bl-hero__cta svg { width: 16px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s var(--ease-out); }
.bl-hero__cta:hover { color: #fff; box-shadow: 0 0 44px rgba(244, 188, 5, .22), 0 0 60px rgba(94, 196, 192, .22), inset 0 1px 0 rgba(255, 255, 255, .35); }
.bl-hero__cta:hover svg { transform: translateX(4px); }
.bl-hero__cta:active { transform: scale(.97); }

.bl-hero__feats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 34px;
    margin: clamp(10px, 3vh, 34px) 0 0;
    padding: 0;
    list-style: none;
}
.bl-hero__feats a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    color: #dfe9e6;
    font-size: 15px;
    font-weight: 500;
    transition: color .2s var(--ease-out);
}
.bl-hero__feats svg { width: 7px; height: 13px; fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
.bl-hero__feats a:hover { color: #fff; }
.bl-hero__feats a:hover svg { transform: translateX(3px); }

/* scroll cue: a light slides down a hairline */
.bl-hero__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: clamp(22px, 4vh, 44px) auto 0;
    color: #a9bdb8;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-wrap: balance;
    transition: color .2s var(--ease-out);
}
.bl-hero__foot:hover { color: #fff; }
.bl-hero__foot i { font-style: normal; color: var(--amber); margin: 0 4px; }
.bl-hero__foot b { font-weight: inherit; white-space: nowrap; }
.bl-hero__rule { position: relative; width: 1px; height: 46px; overflow: hidden; background: rgba(175, 207, 192, .25); }
.bl-hero__rule::after {
    content: "";
    position: absolute;
    left: 0;
    top: -40%;
    width: 1px;
    height: 40%;
    background: linear-gradient(180deg, transparent, var(--amber));
    animation: bl-cue 2.4s var(--ease-io) infinite;
}
@keyframes bl-cue { to { top: 100%; } }

/* entrance, once the loading screen has gone: the title lines open downward, the rest lifts in */
@media (prefers-reduced-motion: no-preference) {
    html.js .bl-hero__kicker, html.js .bl-hero__line > *, html.js .bl-hero__sub, html.js .bl-hero__cta,
    html.js .bl-hero__feats li, html.js .bl-hero__foot { opacity: 0; }
    html.is-loaded .bl-hero__kicker { animation: bl-lift .7s var(--ease-out) .15s both; }
    html.is-loaded .bl-hero__line > * { display: inline-block; animation: bl-wipe 1s var(--ease-out) .25s both; }
    html.is-loaded .bl-hero__line + .bl-hero__line > * { animation-delay: .38s; }
    html.is-loaded .bl-hero__sub { animation: bl-lift .8s var(--ease-out) .62s both; }
    html.is-loaded .bl-hero__cta { animation: bl-lift .8s var(--ease-out) .78s both; }
    html.is-loaded .bl-hero__feats li { animation: bl-lift .7s var(--ease-out) .92s both; }
    html.is-loaded .bl-hero__feats li:nth-child(2) { animation-delay: 1s; }
    html.is-loaded .bl-hero__feats li:nth-child(3) { animation-delay: 1.08s; }
    html.is-loaded .bl-hero__foot { animation: bl-lift .8s var(--ease-out) 1.2s both; }
}
@keyframes bl-wipe {
    from { opacity: 1; clip-path: inset(-.2em 0 100% 0); translate: 0 .18em; }
    to { opacity: 1; clip-path: inset(-.2em 0 -.25em 0); translate: 0 0; }
}
@keyframes bl-lift { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* tablets */
@media (max-width: 1024px) {
    .bl-hero__title { font-size: clamp(50px, min(9vw, 11vh), 94px); }
}
/* phones */
@media (max-width: 809px) {
    .bl-hero { padding: 108px 20px 22px; }
    .bl-hero__kicker { font-size: 11px; letter-spacing: .2em; }
    .bl-hero__title { font-size: clamp(42px, 12.6vw, 68px); line-height: 1; }
    .bl-hero__sub { font-size: 15.5px; max-width: 34ch; }
    .bl-hero__cta { padding: 16px 28px; font-size: 16px; }
    .bl-hero__feats { flex-direction: column; align-items: center; gap: 2px; }
    .bl-hero__feats a { font-size: 14.5px; min-height: 40px; }
    .bl-hero__foot { font-size: 11px; letter-spacing: .1em; max-width: 34ch; line-height: 1.7; }
    .bl-hero__rule { height: 34px; }
    .bl-hero__veil {
        background:
            radial-gradient(90% 36% at 50% 38%, rgba(0, 10, 12, .62), rgba(0, 10, 12, .25) 65%, transparent 100%),
            linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, transparent 16%, transparent 74%, rgba(0, 43, 46, .9) 97%, var(--ink) 100%);
    }
}
/* short phones (e.g. 360x640, or a phone with the browser bars showing) */
@media (max-width: 809px) and (max-height: 700px) {
    .bl-hero { padding-top: 92px; }
    .bl-hero__inner { gap: 14px; }
    .bl-hero__title { font-size: clamp(40px, 11.5vw, 56px); }
    .bl-hero__sub { font-size: 14.5px; line-height: 1.5; }
    .bl-hero__feats { flex-direction: row; flex-wrap: wrap; gap: 0 18px; margin-top: 4px; }
    .bl-hero__feats a { font-size: 13.5px; }
    .bl-hero__foot { margin-top: 12px; }
    .bl-hero__rule { display: none; }
}
/* phones on their side, small laptops with little height */
@media (max-height: 520px) and (orientation: landscape) {
    .bl-hero { padding: 84px 32px 16px; }
    .bl-hero__inner { gap: 10px; }
    .bl-hero__kicker { display: none; }
    .bl-hero__title { font-size: clamp(36px, 9vh, 52px); }
    .bl-hero__line { display: inline; }
    .bl-hero__sub { font-size: 14px; line-height: 1.45; max-width: 60ch; }
    .bl-hero__cta { padding: 12px 24px; font-size: 15px; margin-top: 0; }
    .bl-hero__feats { flex-direction: row; gap: 0 26px; margin-top: 0; }
    .bl-hero__feats a { font-size: 13.5px; min-height: 36px; }
    .bl-hero__foot { margin-top: 8px; font-size: 10.5px; }
    .bl-hero__rule { display: none; }
}
/* laptops with little height (e.g. 1280x720, 1366x768) */
@media (min-width: 810px) and (max-height: 800px) {
    .bl-hero { padding-top: 100px; }
    .bl-hero__feats { margin-top: 4px; }
    .bl-hero__foot { margin-top: 18px; gap: 10px; }
    .bl-hero__rule { height: 28px; }
}
/* very large screens */
@media (min-width: 1800px) {
    .bl-hero__title { font-size: clamp(132px, min(6.8vw, 13.5vh), 162px); }
    .bl-hero__sub { max-width: 640px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .bl-hero__rule::after { animation: none; top: 30%; }
    .bl-hero__glow, .bl-hero__canvas { transition: none; }
}

/* 3D boxes (the menu's glass butterfly) */
.bl3d { position: relative; }
.bl3d canvas { width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity 1.2s ease; }
.bl3d.bl3d-ready canvas { opacity: 1; }
.bl3d.bl3d-fallback::after {
    content: "";
    position: absolute;
    inset: 22%;
    background: url("../brand/butterfly.svg") center / contain no-repeat;
    opacity: .85;
    animation: upDownAnim 3s infinite linear;
}

/* ---------- About (text left, globe right) ---------- */
.about-sec { padding-top: 140px; padding-bottom: 140px; background: linear-gradient(180deg, var(--ink) 0%, #000 100%); }
.bl-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 110px);
    align-items: center;
}
.bl-about__copy .section-subtitle { margin-bottom: 32px; }
.bl-about__copy .section-title { font-size: var(--fs-h2); line-height: 1.15; margin: 0 0 32px; }
.bl-about__lead {
    font-family: var(--font_heading);
    font-size: var(--fs-h4);
    line-height: 1.5;
    color: var(--primary);
    margin: 0 0 32px !important;
    max-width: 560px;
}
.bl-about__copy p:not(.bl-about__lead) { color: #b8c4c1; margin: 0 0 22px; max-width: 560px; }
.bl-about__more { margin-top: 38px; }

.bl-globe { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; justify-self: center; }
.bl-globe::before {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(17, 98, 101, .55), rgba(17, 98, 101, .12) 55%, transparent 70%);
    filter: blur(40px);
}
/* touch-action: pan-y lets a vertical swipe scroll the page while a sideways drag turns the globe */
.bl-globe__canvas { position: relative; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity 1s ease; }
.bl-globe__canvas.is-dragging { cursor: grabbing; }
.bl-globe__canvas.is-ready { opacity: 1; }
.bl-globe__canvas.is-over { cursor: pointer; }
.bl-globe__hint { position: absolute; bottom: 1%; left: 50%; transform: translateX(-50%); margin: 0; color: var(--tertiary); font-family: var(--font_heading); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.only-touch { display: none; }
@media (hover: none) { .only-fine { display: none; } .only-touch { display: inline; } }
.bl-globe__tip {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    pointer-events: none;
    margin: -14px 0 0 20px;
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(17, 17, 17, .75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--teal);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .7);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s ease;
}
.bl-globe__tip.is-on { opacity: 1; }
.bl-globe__tip p { margin: 0; }
.bl-globe__tip-note { display: none; font-family: var(--font_heading); font-size: 11px; line-height: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px !important; }
.bl-globe__tip-country { font-family: var(--font_heading); font-size: 18px; line-height: 22px; color: var(--primary); }
.bl-globe.is-fallback::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid #333; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .12), transparent 60%); }
@media (max-width: 1100px) {
    .bl-about { grid-template-columns: 1fr; }
    .bl-globe { max-width: min(520px, 86vw); }
}
@media (max-width: 809px) { .about-sec { padding: 96px 0; } }

/* ---------- Numbers: 20+ creative partners → 1500+ projects around the world ---------- */
.numbers { position: relative; height: 300vh; background: var(--sand); color: var(--ink); }
.numbers__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.numbers__big { grid-area: 1 / 1; margin: 0; font-family: var(--font_heading); font-size: min(39vw, 80vh); font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.numbers__big sup { font-size: .32em; top: -1.5em; color: var(--coral); }
.numbers__intro {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: center;
    margin: 14vh 0 0 30vw;
    text-align: center;
    font-family: var(--font_heading);
    font-size: var(--fs-h4);
    line-height: 1.3;
    font-family: var(--font_accent);
    font-style: italic;
    font-size: clamp(22px, 2vw, 30px);
    color: var(--teal);
    text-transform: lowercase;
}
.numbers__outro { grid-area: 1 / 1; text-align: center; pointer-events: none; }
.numbers__caption {
    margin: 0 0 36px;
    font-family: var(--font_heading);
    font-size: var(--fs-h4);
    color: #4a5a5a;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s, transform .6s;
}
.numbers__caption span { color: var(--ink); font-weight: 600; }
.numbers__line { margin: 0; overflow: hidden; font-family: var(--font_heading); font-size: clamp(60px, 9vw, 160px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.numbers__caption + .numbers__line { font-family: var(--font_accent); font-style: italic; letter-spacing: 0; color: var(--teal); }
.numbers__line span { display: block; padding: 0 .08em .08em; transform: translateY(120%); transition: transform 1s var(--ease-reveal); }
.numbers__line + .numbers__line span { transition-delay: .12s; }
.numbers.is-outro .numbers__caption { opacity: 1; transform: none; }
.numbers.is-outro .numbers__line span { transform: none; }
/* Same story, same pace on every screen (300vh); only the layout adapts */
@media (max-width: 1024px) { .numbers__intro { margin-left: 38vw; } }
@media (max-width: 767px) {
    .numbers__big { font-size: min(64vw, 46vh); }
    /* on phones the label sits under the number instead of above-right */
    .numbers__intro { align-self: end; margin: 0 0 18vh; font-size: 24px; }
    .numbers__intro br { display: none; }
    .numbers__caption { font-size: 17px; margin-bottom: 24px; padding: 0 22px; }
    .numbers__line { font-size: min(17vw, 9vh); }
}
/* landscape phones: keep everything inside the short screen */
@media (max-height: 500px) and (orientation: landscape) {
    .numbers__big { font-size: 62vh; }
    .numbers__intro { margin-top: 8vh; }
    .numbers__line { font-size: 15vh; }
    .numbers__caption { margin-bottom: 12px; }
}

/* ---------- Services: stacked 3D cards ---------- */
.service-sec { padding: 140px 72px 120px; background: linear-gradient(180deg, #000 0%, var(--ink) 18%, var(--ink) 82%, #000 100%); }
.service-sec > .custom-container { padding: 0; }
/* services and contact share one content width */
.service-sec > .custom-container, .bl-contact > .custom-container { max-width: 1296px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
.service-sec .section-header { margin-bottom: 80px; }
.bl-stack { position: relative; }
.bl-card { position: sticky; top: calc(96px + var(--i) * 22px); margin-bottom: 48px; perspective: 1600px; }
.bl-card:last-child { margin-bottom: 0; }
.bl-card__inner {
    --mx: 80%;
    --my: 0%;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(32px, 5vw, 96px);
    min-height: 540px;
    padding: clamp(36px, 4.4vw, 64px);
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(900px circle at var(--mx) var(--my), rgba(17, 98, 101, .85), transparent 55%),
        radial-gradient(500px circle at 0% 100%, rgba(244, 188, 5, .10), transparent 60%),
        linear-gradient(155deg, #0e3b3e 0%, #04211f 55%, #021213 100%);
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .08) inset;
    transform-origin: 50% 0;
    transform: scale(var(--s, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    will-change: transform;
}
/* dims as the next card slides over it: a dark layer that fades in (a CSS filter
   would make the browser repaint the whole animated card every frame) */
.bl-card__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background: #010d0e;
    opacity: calc(1 - var(--b, 1));
    pointer-events: none;
}
/* glossy edge */
.bl-card__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(175, 207, 192, .6), rgba(255, 255, 255, 0) 30%, rgba(17, 98, 101, .9) 70%, rgba(244, 188, 5, .35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
/* each service's own animation fills the card (borderless-art.js), shaded on the
   text side so the words stay readable; a <video> can sit here instead */
.bl-card__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bl-card__art canvas, .bl-card__art video, .bl-shero__art canvas, .bl-shero__art video {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.bl-art { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.bl-art.is-on { opacity: 1; }
.bl-card__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 18, 19, .82) 0%, rgba(2, 18, 19, .5) 34%, rgba(2, 18, 19, 0) 62%),
        linear-gradient(0deg, rgba(2, 18, 19, .55) 0%, transparent 40%);
}
/* the whole card opens the service page (the title link stretches over it) */
.bl-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bl-card__inner { cursor: pointer; }
.bl-card__main .theme-btn { position: relative; z-index: 2; }
@media (hover: hover) {
    .bl-card__inner:hover .theme-btn { color: #fff; border-color: var(--accent); }
    .bl-card__inner:hover .theme-btn:before { height: 100%; }
    .bl-card__inner:hover .theme-btn img { filter: none; transform: translate(2px, -2px); }
}
.bl-card__inner:has(.bl-card__title a:focus-visible) { outline: 2px solid var(--sage); outline-offset: 4px; }
.bl-card__title a:focus-visible { outline: none; }
.bl-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 40px;
    border-radius: 50%;
    border: 1px solid var(--amber);
    background: rgba(244, 188, 5, .08);
    color: var(--amber);
    font-family: var(--font_heading);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .06em;
}
.bl-card__title { margin: 0 0 24px; font-size: clamp(34px, 3.6vw, 58px); line-height: 1.05; letter-spacing: -0.02em; }
.bl-card__title a { color: var(--primary); }
/* each service name in its own colour, as on its page */
.bl-card[data-svc="strategy"] .bl-card__title em { color: var(--amber); }
.bl-card[data-svc="intelligence"] .bl-card__title em { color: var(--sage); }
.bl-card[data-svc="creativity"] .bl-card__title em { color: var(--coral); }
.bl-card__desc { margin: 0 0 40px !important; max-width: 480px; color: #c4d2ce; }
.bl-card__side { align-self: end; }
.bl-card__label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    font-size: var(--fs-small);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sage);
}
.bl-card__label::after { content: ""; flex: 1; height: 1px; background: rgba(175, 207, 192, .3); }
.bl-card__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-card__tags li {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(175, 207, 192, .25);
    background: rgba(0, 43, 46, .45);
    font-family: var(--font_heading);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #e6e6e6;
    transition: background .3s, border-color .3s, transform .3s var(--ease-io);
}
@media (max-width: 1024px) { .service-sec { padding-left: 42px; padding-right: 42px; } }
@media (max-width: 900px) {
    .bl-card__inner { grid-template-columns: 1fr; min-height: 0; gap: 36px; }
    /* stacked layout: the text runs over the whole card, so the picture sits quieter */
    .bl-art.is-on { opacity: .62; }
    .bl-card__art::after { background: linear-gradient(180deg, rgba(2, 18, 19, .35) 0%, rgba(2, 18, 19, .55) 45%, rgba(2, 18, 19, .82) 100%); }
    .bl-card { top: calc(80px + var(--i) * 16px); }
}
@media (max-width: 560px) { .bl-hide-sm { display: none; } }
@media (max-width: 809px) {
    .service-sec { padding: 96px 22px 72px; }
    .bl-card__inner { padding: 30px 24px 32px; border-radius: 22px; }
    .bl-card__num { margin-bottom: 28px; }
}

/* ---------- Contact + join our team ---------- */
.bl-contact {
    position: relative;
    padding: 140px 72px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(60% 50% at 85% 10%, rgba(17, 98, 101, .45), transparent 70%),
        linear-gradient(180deg, #000 0%, var(--ink-deep) 100%);
}
.bl-contact .custom-container { padding: 0; }
.bl-contact__head { max-width: 880px; margin-bottom: 72px; }
.bl-contact__head .section-subtitle { margin-bottom: 28px; padding: 0; }
.bl-contact__title { margin: 0 0 24px; font-size: var(--fs-display); line-height: 1; letter-spacing: -0.03em; color: var(--primary); }
.bl-contact__lead { max-width: 620px; color: #b8c4c1; }
.bl-contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: stretch; }

/* the form, on a glass card */
.bl-form {
    position: relative;
    padding: clamp(28px, 3.4vw, 48px);
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(14, 59, 62, .7) 0%, rgba(2, 18, 19, .85) 100%);
    border: 1px solid rgba(175, 207, 192, .16);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06) inset;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.bl-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bl-field { position: relative; margin-bottom: 16px; }
.bl-field input, .bl-field textarea {
    display: block;
    width: 100%;
    padding: 28px 20px 12px;
    border-radius: 14px;
    border: 1px solid rgba(175, 207, 192, .2);
    background: rgba(0, 0, 0, .25);
    color: #fff;
    font: 500 16px/1.5 var(--font_body);
    transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.bl-field textarea { min-height: 170px; resize: vertical; }
.bl-field label {
    position: absolute;
    left: 21px;
    top: 20px;
    color: #8fa5a0;
    font-size: 16px;
    line-height: 1.2;
    pointer-events: none;
    transform-origin: 0 0;
    transition: transform .2s var(--ease-out), color .2s var(--ease-out);
}
.bl-field input:focus, .bl-field textarea:focus { outline: none; border-color: var(--sage); background: rgba(0, 0, 0, .4); }
.bl-field input:focus + label, .bl-field input:not(:placeholder-shown) + label,
.bl-field textarea:focus + label, .bl-field textarea:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.72); color: var(--sage); }
.bl-field .is-invalid { border-color: var(--coral); }
.bl-field .is-invalid + label { color: var(--coral); }
.bl-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 8px; }
#result { min-height: 20px; font-size: 14px; color: var(--sage); }

/* the join card fills the column beside the form */
.bl-contact__side { display: flex; flex-direction: column; }
.bl-joincard {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(32px, 3.4vw, 48px) clamp(28px, 3vw, 44px);
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    background: var(--sand);
    color: var(--ink);
}
.bl-joincard::before {
    content: "";
    position: absolute;
    right: -30%;
    top: -40%;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 188, 5, .45), transparent 65%);
    z-index: -1;
}
.bl-joincard__mark { position: absolute; right: 30px; top: 30px; width: 64px; height: 66px; color: var(--teal); }
.bl-joincard__k { display: block; margin-bottom: 14px; color: var(--teal); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.bl-joincard__title { margin: 0 0 18px; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.bl-joincard__title em { color: var(--teal); }
.bl-joincard p { max-width: 440px; margin: 0 0 26px; color: #3d4f4f; }
.bl-joincard__roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.bl-joincard__roles li { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(0, 43, 46, .18); color: var(--ink); font-size: 14px; font-weight: 500; }
.bl-joincard .theme-btn { align-self: flex-start; margin-top: auto; }

/* button variants */
.theme-btn--amber { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.theme-btn--amber img { filter: brightness(0); }
.theme-btn--amber:before { background: #fff; }
.theme-btn--amber:hover { color: var(--ink); border-color: #fff; }
.theme-btn--amber:hover img { filter: brightness(0); }
.theme-btn--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.theme-btn--ink:before { background: var(--teal); }
.theme-btn--ink:hover { border-color: var(--teal); }

@media (max-width: 1100px) { .bl-contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 1024px) { .bl-contact { padding: 110px 42px; } }
@media (max-width: 809px) {
    .bl-contact { padding: 96px 22px; }
    .bl-contact__head { margin-bottom: 48px; }
    .bl-form__row { grid-template-columns: 1fr; gap: 0; }
    .bl-form { border-radius: 22px; }
}

/* ---------- Footer ---------- */
.footer-area { background: var(--ink-deep); }
.footer-link ul li a img { filter: none; }
.footer-widget h4, .footer-widget .bl-foot-h { margin: 0; font-family: var(--font_heading); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.footer-link ul li a { font-size: 14px; letter-spacing: .06em; display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; padding: 0; }
.footer-link ul { gap: 0; }
.footer-widget .copyright { font-size: 12px; letter-spacing: .1em; color: #9fb3ae; }
.footer-contact-infos .footer-widget-top a { word-break: break-word; }
@media (max-width: 809px) { .footer-contact-infos .footer-widget-top a { font-size: 22px; line-height: 40px; } }

/* ---------- Menu panel ---------- */
.header-sidebar-wrap { background: rgba(0, 26, 28, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.header-sidebar-wrap .header-sidebar-content { width: min(620px, 100%); padding: 34px 56px 40px; gap: 40px; overflow: hidden; background: linear-gradient(180deg, var(--ink) 0%, #000 100%); transition: transform .7s var(--ease-io); }
.bl-side__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.bl-side__top .bl-name { height: 32px; }
.header-sidebar-wrap .header-sidebar-content .close-header-sidebar {
    position: relative;
    top: auto;
    right: auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.6px solid #fff;
    background: #1a1a1a;
    transition: background .3s, border-color .3s, transform .5s var(--ease-io);
}
.close-header-sidebar span { position: absolute; left: 50%; top: 50%; width: 20px; height: 1.5px; background: #fff; }
.close-header-sidebar span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.close-header-sidebar span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.header-sidebar-wrap .header-sidebar-content .close-header-sidebar:hover { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
.bl-side__nav { position: relative; z-index: 1; width: 100%; }
.bl-side__nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bl-side__nav ol > li { overflow: hidden; }
.bl-side__nav ol > li > a {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    color: var(--primary);
    font-family: var(--font_heading);
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.18;
    transform: translateY(105%);
    transition: transform .9s var(--ease-reveal), color .3s;
}
.header-sidebar-wrap.active .bl-side__nav ol > li > a { transform: none; transition-delay: calc(.18s + var(--i) * .07s), 0s; }
.bl-side__n { padding-top: .6em; font-family: var(--font_heading); font-size: 12px; line-height: 1; letter-spacing: .1em; color: var(--amber); }
.bl-side__t { position: relative; }
.bl-side__t::after { content: ""; position: absolute; left: 0; bottom: .04em; width: 100%; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-io); }
.bl-side__nav ol:hover > li > a { color: #4d6b67; }
.bl-side__nav ol > li > a:hover,
.bl-side__nav ol > li > a:focus-visible { color: var(--primary); }
.bl-side__nav ol > li > a:hover .bl-side__t::after { transform: scaleX(1); transform-origin: left; }
.bl-side__sub { list-style: none; margin: 0; padding: 10px 0 12px 42px; display: grid; gap: 12px; }
.bl-side__sub a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #a6a6a6;
    font-family: var(--font_heading);
    font-size: var(--fs-small);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity .6s ease, transform .6s var(--ease-reveal), color .3s;
}
.bl-side__sub a::before { content: ""; width: 14px; height: 2px; background: var(--amber); transition: width .3s; }
.bl-side__sub a:hover { color: var(--primary); }
.bl-side__sub a:hover::before { width: 24px; }
.header-sidebar-wrap.active .bl-side__sub a { opacity: 1; transform: none; transition-delay: .5s, .5s, 0s; }
.bl-side__foot { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; padding-top: 26px; border-top: 1px solid rgba(175, 207, 192, .2); opacity: 0; transition: opacity .8s ease; }
.header-sidebar-wrap.active .bl-side__foot { opacity: 1; transition-delay: .55s; }
.bl-side__reach { display: flex; flex-direction: column; gap: 8px; }
.bl-side__reach span { color: var(--sage); font-family: var(--font_heading); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.bl-side__reach a { color: var(--primary); font-size: 15px; }
.bl-side__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
@media (max-width: 809px) {
    .header-sidebar-wrap .header-sidebar-content { padding: 24px 22px 30px; gap: 28px; }
    .bl-side__foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1439px) {
    .section-header { gap: 24px; }
    .section-header .section-subtitle { width: auto; padding-top: 0; }
}
@media (max-width: 809px) {
    .footer-area .footer-top { padding-top: 60px; }
}

/* ---------- Reduced motion / no JavaScript ---------- */
html:not(.js) .preloader-wrap { display: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .numbers { height: auto; }
    .numbers__sticky { position: relative; height: auto; padding: 100px 0; gap: 20px; }
    .numbers__sticky > * { grid-area: auto; }
    .numbers__intro { margin: 0; }
    .numbers__big { opacity: 1 !important; transform: none !important; }
    .numbers__caption, .numbers__line span { transition: none; }
    .bl-logo__word, .bl-logo__fly, .bl-logo__wing--l { transition: none; animation: none; }
    .bl-card { position: relative; top: auto; }
    .bl-side__nav ol > li > a, .bl-side__sub a, .bl-side__foot { transform: none !important; opacity: 1 !important; transition: color .3s !important; }
    .bl3d.bl3d-fallback::after { animation: none !important; }
}

/* ==========================================================================
   Motion polish
   Fast ease-out for anything that responds to the user, small distances,
   transform/opacity only, a press state on everything clickable.
   ========================================================================== */
.theme-btn { transition: color .25s var(--ease-out), border-color .25s var(--ease-out), transform .16s var(--ease-out); }
.theme-btn:before { transition: height .35s var(--ease-out); }
.theme-btn img { transition: transform .25s var(--ease-out), filter .25s var(--ease-out); }
.theme-btn:hover img { transform: translate(2px, -2px); }
.theme-btn:active, .hamburg-menu:active, .header-social a:active, .bl-side__social a:active, .bl-back:active { transform: scale(.97); }
.hamburg-menu { transition: transform .3s var(--ease-out), background-color .25s var(--ease-out), border-color .25s var(--ease-out); }

/* dropdown grows out of its tab instead of just appearing */
.header-menu-wrap .navbar .menu li .dropdown-list {
    transform: translateY(8px) scale(.98);
    transform-origin: 24px 0;
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s;
}
.header-menu-wrap .navbar .menu li:hover > .dropdown-list,
.header-menu-wrap .navbar .menu li:focus-within > .dropdown-list,
.header-menu-wrap .navbar .menu li.is-open > .dropdown-list { opacity: 1; visibility: visible; transform: none; }

/* service cards follow the pointer smoothly */
.bl-card__inner { transition: transform .25s var(--ease-out), filter .3s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
    .theme-btn:active, .hamburg-menu:active { transform: none; }
}

/* ---------- Back to top: appears once you scroll, the ring fills as you go down ---------- */
.bl-totop {
    position: fixed;
    right: 35px;
    bottom: 32px;
    z-index: 1025;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 26, 28, .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.9);
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s, background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.bl-totop.is-on { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .bl-totop:hover { background: var(--amber); color: var(--ink); } .bl-totop:hover .bl-totop__bar { stroke: var(--ink); } .bl-totop:hover .bl-totop__arrow { transform: translateY(-2px); } }
.bl-totop:active { transform: scale(.94); }
.bl-totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bl-totop__ring circle { fill: none; stroke-width: 2; }
.bl-totop__track { stroke: rgba(175, 207, 192, .25); }
.bl-totop__bar { stroke: var(--amber); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bl-totop__arrow { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
@media (max-width: 809px) { .bl-totop { right: 20px; bottom: 20px; width: 50px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .bl-totop { transition: opacity .2s, visibility .2s; transform: none !important; } }

/* ---------- Footer: logo in the middle column, takes you back up ---------- */
.footer-area .footer-top { padding-bottom: 72px; }
.footer-area .footer-top > .row { align-items: stretch; }
.bl-foot-mid { display: flex; align-items: center; justify-content: center; }
.bl-foot-logo { display: block; width: min(100%, 520px); padding: 12px 0; color: var(--sand); transition: color .25s var(--ease-out), transform .16s var(--ease-out); }
.bl-foot-logo .bl-name { display: block; width: 100%; height: auto; color: inherit; }
.bl-foot-logo .bl-name svg, .bl-foot-logo .bl-name img { width: 100%; height: auto; }
.bl-foot-logo:hover { color: #fff; }
.bl-foot-logo:active { transform: scale(.98); }
@media (max-width: 809px) {
    .bl-foot-mid { order: -1; margin-bottom: 48px; }
    .bl-foot-logo { width: min(100%, 360px); }
}

/* ==========================================================================
   Service pages
   Each service has its own accent: Strategy amber, Intelligence sage,
   Creativity coral. Everything else follows the home page.
   ========================================================================== */
/* --svc: the bright accent (tabs, dots, fills); --svc-ink: the same hue deep enough to read as text on sand */
.svc-strategy { --svc: var(--amber); --svc-rgb: 244, 188, 5; --svc-ink: #7A5800; }
.svc-intelligence { --svc: var(--sage); --svc-rgb: 175, 207, 192; --svc-ink: var(--teal); }
.svc-creativity { --svc: var(--coral); --svc-rgb: 255, 57, 36; --svc-ink: var(--coral); }

/* back button (used on these pages) */
.bl-back { display: inline-flex; align-items: center; gap: 14px; color: #bfbfbf; font-size: var(--fs-small); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: color .2s var(--ease-out), transform .16s var(--ease-out); }
.bl-back span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.6px solid currentColor; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .3s var(--ease-out); }
.bl-back span img { width: 13px; transform: rotate(-135deg); filter: invert(75%); transition: filter .2s; }
.bl-back:hover { color: var(--primary); }
.bl-back:hover span { background: var(--teal); border-color: var(--teal); transform: translateX(-4px); }
.bl-back:hover span img { filter: none; }

/* --- hero --- */
.bl-shero {
    position: relative;
    min-height: 88vh;
    min-height: 88svh;
    display: flex;
    align-items: flex-end;
    padding: 170px 72px 96px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(60% 70% at 85% 30%, rgba(var(--svc-rgb), .22), transparent 70%),
        radial-gradient(45% 50% at 8% 62%, rgba(17, 98, 101, .4), transparent 70%),
        linear-gradient(180deg, #000 0%, var(--ink) 100%);
}
.bl-shero > .custom-container { width: 100%; max-width: 1296px; padding: 0; }
/* About page header: the butterfly, large and faint, floating */
.bl-shero__mark {
    position: absolute;
    right: -6vw;
    top: 50%;
    width: min(62vw, 760px);
    aspect-ratio: 312 / 326;
    transform: translateY(-50%);
    color: var(--svc);
    opacity: .09;
    z-index: -1;
    animation: bl-float 9s ease-in-out infinite;
}
@keyframes bl-float { 0%, 100% { transform: translateY(-50%) rotate(0deg); } 50% { transform: translateY(-53%) rotate(-3deg); } }
@media (max-width: 809px) { .bl-shero__mark { width: 90vw; right: -30vw; opacity: .07; } }
@media (prefers-reduced-motion: reduce) { .bl-shero__mark { animation: none; } }
.bl-shero__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bl-shero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 20, 22, .85) 0%, rgba(0, 20, 22, .6) 42%, rgba(0, 20, 22, .25) 72%, rgba(0, 20, 22, 0) 88%),
        linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 22%, transparent 78%, rgba(0, 43, 46, .7) 100%);
}
.bl-shero__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-bottom: 56px; }
.bl-shero__crumb { color: #9fb3ae; font-size: var(--fs-small); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.bl-shero__crumb a { display: inline-flex; align-items: center; min-height: 40px; color: #9fb3ae; transition: color .2s var(--ease-out); }
.bl-shero__crumb a:hover { color: #fff; }
.bl-shero__crumb i { font-style: normal; margin: 0 6px; color: var(--svc); }
.bl-shero__idx { margin-left: auto; color: var(--svc); font-size: var(--fs-small); font-weight: 600; letter-spacing: .14em; }
.bl-shero__idx i { font-style: normal; color: #6f8582; }
.bl-shero__title { margin: 0 0 32px; font-size: clamp(56px, 9vw, 150px); line-height: .95; letter-spacing: -0.035em; color: #fff; text-shadow: 0 2px 28px rgba(0, 12, 14, .55); }
.bl-shero__title em { color: var(--svc); }
.bl-shero__lead { max-width: 760px; margin: 0 0 44px; color: #d2dfdb; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.6; }
.bl-shero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- sticky in-page menu --- */
.bl-subnav {
    position: sticky;
    top: 18px;
    z-index: 900;
    display: flex;
    gap: 4px;
    width: max-content;
    max-width: calc(100% - 140px);
    margin: -26px auto 0;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid rgba(175, 207, 192, .18);
    background: rgba(0, 26, 28, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8);
}
.bl-subnav::-webkit-scrollbar { display: none; }
.bl-subnav a {
    flex: none;
    padding: 10px 18px;
    border-radius: 999px;
    color: #b8c4c1;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    white-space: nowrap;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.bl-subnav a:hover { color: #fff; }
.bl-subnav a.is-active { background: var(--svc); color: var(--ink); }

/* --- sections --- */
.bl-svcpage { padding: 0 72px 140px; background: linear-gradient(180deg, var(--ink) 0%, #000 22%, #000 70%, var(--ink-deep) 100%); }
.bl-svcpage > .custom-container { max-width: 1296px; padding: 0; }
.bl-sec { padding-top: 130px; scroll-margin-top: 70px; }
.bl-sec__head { display: flex; flex-direction: column; gap: 22px; margin-bottom: 48px; }
.bl-sec__head .section-subtitle { width: auto; padding: 0; }
.bl-sec__head .section-subtitle::before { background: var(--svc); }
.bl-sec__title { margin: 0; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.02em; color: #fff; }

/* what we do: cards that light up under the pointer */
[data-spot] { --mx: 50%; --my: 50%; }
.bl-do-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bl-do-grid > li, .bl-projs > div, .bl-more > div { display: flex; }
.bl-do-grid > li > *, .bl-projs > div > *, .bl-more > div > * { flex: 1; }
.bl-do {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 36px;
    min-height: 168px;
    padding: 26px 26px 28px;
    border-radius: 20px;
    border: 1px solid rgba(175, 207, 192, .14);
    background:
        radial-gradient(260px circle at var(--mx) var(--my), rgba(var(--svc-rgb), .18), transparent 70%),
        linear-gradient(160deg, rgba(14, 59, 62, .55) 0%, rgba(2, 18, 19, .85) 100%);
    transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.bl-do:hover { border-color: rgba(var(--svc-rgb), .55); transform: translateY(-3px); }
.bl-do__n { color: var(--svc); font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.bl-do__t { color: #fff; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; letter-spacing: -0.01em; }

/* how we work: framed walkthrough */
.bl-frame {
    padding: 10px;
    border-radius: 34px;
    border: 1px solid rgba(175, 207, 192, .16);
    background: linear-gradient(160deg, rgba(var(--svc-rgb), .12), rgba(17, 98, 101, .2) 40%, rgba(0, 0, 0, .3));
    box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .95);
}
.bl-frame video, .bl-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 26px; background: #000; }

/* placeholders (swap for real photos/videos: see the comments in each page) */
.bl-ph {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    overflow: hidden;
    border: 1px dashed rgba(175, 207, 192, .3);
    background:
        radial-gradient(110% 110% at 100% 0%, rgba(var(--svc-rgb), .2), transparent 60%),
        radial-gradient(90% 90% at 0% 100%, rgba(17, 98, 101, .5), transparent 65%),
        linear-gradient(160deg, #0b3134 0%, #021213 100%);
}
img.bl-ph { display: block; object-fit: cover; border: 0; height: auto; }
.bl-ph span { color: var(--sage); font-size: var(--fs-small); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.bl-ph--video { aspect-ratio: 16 / 9; border-radius: 26px; }
.bl-ph--video::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--svc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23002B2E' d='M9 7l9 5-9 5z'/%3E%3C/svg%3E") 55% 50% / 34px no-repeat;
    box-shadow: 0 0 0 14px rgba(var(--svc-rgb), .15), 0 0 0 30px rgba(var(--svc-rgb), .07);
}
.bl-ph--video span { position: absolute; bottom: 30px; }

/* selected work */
.bl-projs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bl-proj { border-radius: 24px; overflow: hidden; border: 1px solid rgba(175, 207, 192, .14); background: linear-gradient(180deg, #072a2c 0%, #020d0e 100%); transition: border-color .25s var(--ease-out), transform .25s var(--ease-out); }
.bl-proj:hover { border-color: rgba(var(--svc-rgb), .5); transform: translateY(-4px); }
.bl-proj__media { overflow: hidden; }
.bl-proj__media .bl-ph { aspect-ratio: 16 / 10; border: 0; border-radius: 0; transition: transform .6s var(--ease-out); }
.bl-proj:hover .bl-proj__media .bl-ph { transform: scale(1.03); }
.bl-proj__body { padding: 26px 30px 32px; }
.bl-proj__title { margin: 14px 0 10px; font-size: var(--fs-h3); line-height: 1.15; color: #fff; }
.bl-proj__body p { margin: 0; color: #b8c4c1; }
.bl-soon { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(var(--svc-rgb), .14); color: var(--svc); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* gallery: one large photo, four small, one wide */
.bl-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bl-gal .bl-ph { aspect-ratio: auto; min-height: 220px; height: 100%; }
.bl-gal .bl-gal__1 { grid-column: span 2; grid-row: span 2; min-height: 454px; }
.bl-gal .bl-gal__6 { grid-column: 1 / -1; min-height: 280px; }

/* the other two services */
.bl-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bl-more__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 300px;
    padding: 34px 36px 36px;
    border-radius: 26px;
    border: 1px solid rgba(175, 207, 192, .16);
    color: #fff;
    background:
        radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--svc-rgb), .2), transparent 70%),
        linear-gradient(155deg, #0e3b3e 0%, #04211f 55%, #021213 100%);
    transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.bl-more__card:hover { color: #fff; border-color: rgba(var(--svc-rgb), .6); transform: translateY(-4px); }
.bl-more__card:active { transform: scale(.985); }
.bl-more__k { color: var(--svc); font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.bl-more__t { font-size: clamp(30px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.02em; }
.bl-more__t em { font-family: var(--font_accent); font-style: italic; color: var(--svc); }
.bl-more__d { max-width: 440px; margin-top: auto; color: #b8c4c1; }
.bl-more__go {
    position: absolute;
    top: 30px;
    right: 30px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.bl-more__go img { width: 13px; }
.bl-more__card:hover .bl-more__go { background: var(--svc); border-color: var(--svc); transform: rotate(45deg); }
.bl-more__card:hover .bl-more__go img { filter: brightness(0); }

/* closing call to action */
.bl-band {
    margin-top: 130px;
    padding: clamp(40px, 6vw, 88px);
    border-radius: 32px;
    text-align: center;
    color: var(--ink);
    background:
        radial-gradient(500px circle at var(--mx) var(--my), rgba(var(--svc-rgb), .45), transparent 70%),
        var(--sand);
}
.bl-band__title { margin: 0 0 18px; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.bl-band__title em { color: var(--teal); }
.bl-band p { max-width: 520px; margin: 0 auto 34px; color: #3d4f4f; }
.bl-band__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 28px; }
.bl-band .theme-btn--amber:before { background: var(--ink); }
.bl-band .theme-btn--amber:hover { color: #fff; border-color: var(--ink); }
.bl-band .theme-btn--amber:hover img { filter: none; }
.bl-band__mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; }
.bl-band__mail:hover { color: var(--teal); }

/* ==========================================================================
   Service pages, light version: the content sits on sand like the home page's
   20+ / 1500+ section (ink type, teal italics). The dark ink hero stays on top,
   and the "other services" cards and the closing band stay dark, so each
   service's own colour still carries the tabs, numbers and highlights.
   ========================================================================== */
.pg-svc { background: var(--sand); }
.pg-svc .bl-shero {
    background:
        radial-gradient(60% 70% at 85% 30%, rgba(var(--svc-rgb), .2), transparent 70%),
        radial-gradient(45% 50% at 8% 62%, rgba(17, 98, 101, .45), transparent 70%),
        linear-gradient(180deg, #001416 0%, var(--ink) 100%);
}
.pg-svc .bl-svcpage { background: var(--sand); color: #3d4f4f; }
/* the sticky in-page menu turns into light glass over sand */
.pg-svc .bl-subnav { border-color: rgba(0, 43, 46, .12); background: rgba(247, 245, 240, .82); box-shadow: 0 18px 40px -22px rgba(0, 43, 46, .45); }
.pg-svc .bl-subnav a { color: #34474a; }
.pg-svc .bl-subnav a:hover { color: var(--ink); }
.pg-svc .bl-subnav a.is-active { background: var(--svc); color: var(--ink); }
.pg-svc.svc-intelligence .bl-subnav a.is-active { background: var(--teal); color: #fff; }
.pg-svc.svc-creativity .bl-subnav a.is-active { color: #000; }
/* headings and labels: ink, with the italic word in the service's deep shade */
.pg-svc .bl-svcpage .section-subtitle { color: var(--ink); }
.pg-svc .bl-sec__title { color: var(--ink); }
.pg-svc .bl-sec__title em { color: var(--svc-ink); }
/* what we do */
.pg-svc .bl-do {
    --spot-a: .1;
    border-color: rgba(0, 43, 46, .1);
    background:
        radial-gradient(260px circle at var(--mx) var(--my), rgba(var(--svc-rgb), var(--spot-a)), transparent 70%),
        #F7F5F0;
    transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), --spot-a .3s;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 12px 30px -24px rgba(0, 43, 46, .5);
}
.pg-svc .bl-do:hover { --spot-a: .34; border-color: rgba(var(--svc-rgb), .9); }
@property --spot-a { syntax: "<number>"; inherits: true; initial-value: .1; }
.pg-svc .bl-do__n { color: var(--svc-ink); }
.pg-svc .bl-do__t { color: var(--ink); }
/* video frame and photo placeholders */
.pg-svc .bl-frame { border-color: rgba(0, 43, 46, .1); background: linear-gradient(160deg, rgba(var(--svc-rgb), .25), rgba(17, 98, 101, .12) 45%, rgba(255, 255, 255, .4)); box-shadow: 0 50px 90px -60px rgba(0, 43, 46, .55); }
.pg-svc .bl-ph {
    border-color: rgba(0, 43, 46, .2);
    background:
        radial-gradient(110% 110% at 100% 0%, rgba(var(--svc-rgb), .35), transparent 60%),
        radial-gradient(90% 90% at 0% 100%, rgba(17, 98, 101, .22), transparent 65%),
        linear-gradient(160deg, #F4F1EA 0%, #DCD7CC 100%);
}
.pg-svc .bl-ph span { color: var(--teal); }
.pg-svc .bl-ph--video::after { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ECE9E2' d='M9 7l9 5-9 5z'/%3E%3C/svg%3E"); box-shadow: 0 0 0 14px rgba(var(--svc-rgb), .3), 0 0 0 30px rgba(var(--svc-rgb), .14); }
/* selected work */
.pg-svc .bl-proj { border-color: rgba(0, 43, 46, .1); background: #F7F5F0; box-shadow: 0 30px 60px -45px rgba(0, 43, 46, .55); }
.pg-svc .bl-proj:hover { border-color: rgba(var(--svc-rgb), .9); }
.pg-svc .bl-proj__title { color: var(--ink); }
.pg-svc .bl-proj__body p { color: #4a5a5a; }
.pg-svc .bl-soon { background: rgba(var(--svc-rgb), .16); color: var(--svc-ink); }
/* the other services stay dark, like tabs in their own colour */
.pg-svc .bl-more__card { box-shadow: 0 30px 60px -40px rgba(0, 43, 46, .7); }
/* closing band flips to ink on the sand page */
.pg-svc .bl-band {
    color: var(--sand);
    background:
        radial-gradient(500px circle at var(--mx) var(--my), rgba(var(--svc-rgb), .3), transparent 70%),
        linear-gradient(160deg, #0b3a3d 0%, var(--ink) 55%, #001416 100%);
}
.pg-svc .bl-band__title { color: #fff; }
.pg-svc .bl-band__title em { color: var(--svc); }
.pg-svc .bl-band p { color: #c6d4d1; }
.pg-svc .bl-band .theme-btn--amber:before { background: var(--sand); }
.pg-svc .bl-band .theme-btn--amber:hover { color: var(--ink); border-color: var(--sand); }
.pg-svc .bl-band .theme-btn--amber:hover img { filter: brightness(0); }
.pg-svc .bl-band__mail { color: var(--sand); }
.pg-svc .bl-band__mail:hover { color: var(--svc); }

/* ==========================================================================
   About page (about.html): reuses the service-page pieces above, plus
   story, quote, stats, values, places and team. Accent: sage.
   ========================================================================== */
.pg-about { --svc: var(--sage); --svc-rgb: 175, 207, 192; }
.pg-about .bl-shero__title { max-width: 1100px; }

.bl-story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.bl-story__copy .section-subtitle { display: inline-flex; margin-bottom: 22px; }
.bl-story__copy .bl-sec__title { margin-bottom: 30px; }
.bl-story__copy p { max-width: 560px; margin: 0 0 20px; color: #b8c4c1; }
.bl-story__copy .bl-story__lead { color: #e6eeeb; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.6; }
.bl-story__photo { aspect-ratio: 4 / 5; border-radius: 28px; }

.bl-quote { margin: clamp(80px, 10vw, 140px) auto 0; max-width: 1050px; padding: 0; text-align: center; }
.bl-quote p { margin: 0; color: #fff; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.12; letter-spacing: -0.025em; }
.bl-quote em { color: var(--svc); }

.bl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(70px, 8vw, 110px); }
.bl-stat { padding: 30px 30px 32px; border-radius: 22px; border: 1px solid rgba(175, 207, 192, .14); background: linear-gradient(160deg, rgba(14, 59, 62, .55) 0%, rgba(2, 18, 19, .85) 100%); }
.bl-stat__n { margin: 0 0 6px; color: #fff; font-size: clamp(54px, 6vw, 88px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bl-stat__n span { color: #fff; }
.bl-stat__t { margin: 0; color: var(--svc); font-size: var(--fs-small); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.bl-val-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bl-val { gap: 18px; min-height: 230px; justify-content: flex-start; }
.bl-val .bl-do__t { margin-top: auto; font-size: clamp(24px, 2.2vw, 32px); }
.bl-val p { margin: 0; max-width: 460px; color: #b8c4c1; }



.bl-more--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl-more--3 .bl-more__card { min-height: 340px; padding: 30px 30px 32px; }
.bl-more--3 .bl-more__t { font-size: clamp(28px, 2.4vw, 38px); padding-right: 52px; }

@media (max-width: 1100px) {
    .bl-more--3 { grid-template-columns: 1fr; }
    .bl-more--3 .bl-more__card { min-height: 240px; }
}
@media (max-width: 809px) {
    .bl-story { grid-template-columns: 1fr; }
    .bl-story__photo { aspect-ratio: 4 / 3; }
    .bl-stats { grid-template-columns: 1fr; gap: 12px; }
    .bl-stat { padding: 22px 24px 24px; }
}
@media (max-width: 560px) {
    .bl-val-grid { grid-template-columns: 1fr; }
    .bl-val { min-height: 0; }
}

/* --- tablets and phones --- */
@media (max-width: 1100px) {
    .bl-do-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl-gal .bl-gal__1 { grid-row: span 1; min-height: 320px; }
}
@media (max-width: 1024px) {
    .bl-shero { padding-left: 42px; padding-right: 42px; }
    .bl-svcpage { padding-left: 42px; padding-right: 42px; }
}
@media (max-width: 809px) {
    .bl-shero { min-height: 0; padding: 130px 22px 80px; }
    .bl-shero__art::after { background: linear-gradient(180deg, rgba(0, 20, 22, .55) 0%, rgba(0, 20, 22, .7) 50%, rgba(0, 43, 46, .85) 100%); }
    .bl-shero__bar { margin-bottom: 40px; }
    .bl-shero__idx { margin-left: 0; }
    .bl-svcpage { padding: 0 22px 96px; }
    .bl-subnav { top: 14px; max-width: calc(100% - 74px); margin: -24px 0 0; }
    .bl-sec { padding-top: 96px; }
    .bl-projs, .bl-more { grid-template-columns: 1fr; }
    .bl-more__card { min-height: 240px; }
    .bl-band { margin-top: 96px; border-radius: 24px; }
}
@media (max-width: 560px) {
    .bl-do-grid { grid-template-columns: 1fr; }
    .bl-do { min-height: 0; gap: 18px; }
    .bl-gal { grid-template-columns: 1fr; }
    .bl-gal .bl-gal__1, .bl-gal .bl-gal__6 { grid-column: auto; min-height: 240px; }
    .bl-gal .bl-ph { min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .bl-do:hover, .bl-proj:hover, .bl-more__card:hover { transform: none; }
}

/* ---------- Card → service page: the picture expands into the page ----------
   Cross-document view transitions (recent Chrome, Edge, Safari); other browsers
   simply open the page. */
@view-transition { navigation: auto; }
.bl-card[data-svc="strategy"] .bl-card__art, .pg-svc.svc-strategy .bl-shero__art { view-transition-name: art-strategy; }
.bl-card[data-svc="intelligence"] .bl-card__art, .pg-svc.svc-intelligence .bl-shero__art { view-transition-name: art-intelligence; }
.bl-card[data-svc="creativity"] .bl-card__art, .pg-svc.svc-creativity .bl-shero__art { view-transition-name: art-creativity; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}