/* ==========================================================================
   Home 1 — menu, hero and portfolio strip after the doublle.com reference.
   Loaded only by index1.php, after site.css. Everything is prefixed dbl-.
   ========================================================================== */

:root {
    --dbl-black: #000;
    --dbl-espresso: #1a120f;
    --dbl-warm: #fbf4ed;
    --dbl-white: #fff;
    --dbl-cream: #fdf4e6;
    /* Accent follows the logo red (was the reference orange #ff4000). */
    --dbl-orange: #d80810;
    --dbl-navy: #003070;
    --dbl-band: #02050d;
    --dbl-gray: #797979;
    --dbl-ghost: rgba(0, 0, 0, .07);
    --dbl-border: #eee;
    --dbl-container: 90rem;
    --dbl-pad-x: clamp(1.5rem, 7.708vw, 6.9375rem);
    --dbl-btn-h: 2.5rem;
    --dbl-nav-inner: 2.5rem;
    --dbl-nav-h: calc(1rem * 2 + var(--dbl-nav-inner) + 1px);
    --dbl-radius-sm: .625rem;
    --dbl-radius-lg: 1.25rem;
    --dbl-head: 'Bricolage Grotesque', sans-serif;
    --dbl-body: 'Instrument Sans', sans-serif;
    --dbl-serif: 'Playfair Display', Georgia, serif;
}

.dbl-container { width: 100%; max-width: var(--dbl-container); margin-inline: auto; padding-inline: var(--dbl-pad-x); box-sizing: border-box; }

/* ================================================================== Nav */
.dbl-nav { position: sticky; top: 0; z-index: 1000; width: 100%; padding-block: 1rem; border-bottom: 1px solid var(--dbl-border); background: var(--dbl-white); }
.dbl-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--dbl-nav-inner); }
.dbl-nav__left, .dbl-nav__right { display: flex; align-items: center; }
.dbl-nav__left { gap: 5rem; min-width: 0; }
.dbl-nav__logo { display: flex; flex-shrink: 0; align-items: center; line-height: 0; text-decoration: none; }
.dbl-nav__logo img { display: block; width: auto; height: 2.75rem; margin: -.125rem 0; }
.dbl-nav__links { display: flex; align-items: center; gap: 2rem; overflow: visible; transform: translateY(.125rem); }
.dbl-nav__item { position: relative; }

.dbl-nav__link { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: 0; overflow: visible; border: 0; background: none; color: var(--dbl-espresso); font-family: var(--dbl-head); font-size: .875rem; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.dbl-nav__link > span:not(.dbl-mark) { padding-block: 2px; }
.dbl-nav__item--dropdown > .dbl-nav__link { gap: .25rem; }
.dbl-nav__chevron { flex-shrink: 0; width: .625rem; height: .375rem; opacity: .7; transition: transform .2s; }
.dbl-nav__item--dropdown:hover .dbl-nav__chevron, .dbl-nav__item--dropdown:focus-within .dbl-nav__chevron, .dbl-nav__item--dropdown.is-open .dbl-nav__chevron { transform: rotate(180deg); }

/* The two orange slashes that slide in beside a link on hover. */
.dbl-mark { position: absolute; top: 50%; right: 100%; display: inline-flex; align-items: center; justify-content: center; width: auto; height: .875rem; margin-right: .25rem; overflow: visible; color: var(--dbl-orange); pointer-events: none; transform: translateY(-50%); }
.dbl-mark svg { display: block; width: .4rem; height: 100%; overflow: visible; opacity: 0; transform: translateX(-.35rem); transition: opacity .2s, transform .2s; }
.dbl-mark svg:first-child { transition-delay: 90ms; }
.dbl-mark svg:last-child { margin-left: -.22rem; transition-delay: 0s; }
.dbl-nav__link:hover .dbl-mark svg, .dbl-nav__link:focus-visible .dbl-mark svg,
.dbl-nav__item--dropdown:hover > .dbl-nav__link .dbl-mark svg, .dbl-nav__item--dropdown:focus-within > .dbl-nav__link .dbl-mark svg,
.dbl-nav__dropdown-link:hover .dbl-mark svg, .dbl-nav__dropdown-link:focus-visible .dbl-mark svg { opacity: 1; transform: translateX(0); }
.dbl-nav__link:hover .dbl-mark svg:first-child, .dbl-nav__dropdown-link:hover .dbl-mark svg:first-child { transition-delay: 0s; }
.dbl-nav__link:hover .dbl-mark svg:last-child, .dbl-nav__dropdown-link:hover .dbl-mark svg:last-child { transition-delay: 90ms; }

.dbl-nav__dropdown { position: absolute; top: 100%; left: 0; z-index: 20; display: flex; flex-direction: column; gap: .25rem; min-width: 11.5rem; padding: 1.25rem .5rem .5rem; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-.25rem); transition: opacity .15s, transform .15s, visibility .15s; }
.dbl-nav__dropdown::before { content: ''; position: absolute; top: .75rem; right: 0; bottom: 0; left: 0; z-index: -1; border: 1px solid var(--dbl-border); border-radius: var(--dbl-radius-sm); background: var(--dbl-white); box-shadow: 0 .5rem 1.5rem rgba(26, 18, 15, .08); }
.dbl-nav__item--dropdown:hover .dbl-nav__dropdown, .dbl-nav__item--dropdown:focus-within .dbl-nav__dropdown, .dbl-nav__item--dropdown.is-open .dbl-nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.dbl-nav__dropdown-link { position: relative; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem .5rem 1.875rem; overflow: visible; border-radius: calc(var(--dbl-radius-sm) - .125rem); color: var(--dbl-espresso); font-family: var(--dbl-head); font-size: .875rem; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.dbl-nav__dropdown-link .dbl-mark { right: auto; left: .75rem; margin-right: 0; }
.dbl-nav__dropdown-link:hover, .dbl-nav__dropdown-link:focus-visible { outline: none; background: var(--dbl-warm); }

.dbl-nav__right { flex-shrink: 0; gap: 1.5rem; }
.dbl-nav__divider { align-self: stretch; border-left: 1px solid var(--dbl-border); }
.dbl-nav__call { display: inline-flex; align-items: center; gap: .25rem; padding-right: .25rem; color: var(--dbl-gray); font-family: var(--dbl-head); font-size: .875rem; font-weight: 500; line-height: 1.44; letter-spacing: .017em; text-decoration: none; white-space: nowrap; }
.dbl-nav__call i { display: flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; padding: .25rem; color: #1e1e1e; font-size: 1rem; }
.dbl-nav__cta-group { display: flex; align-items: center; gap: .5rem; }
.dbl-nav__cta { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: var(--dbl-btn-h); min-height: var(--dbl-btn-h); padding: .25rem 1.5rem; border-radius: 6.25rem; background: var(--dbl-ghost); color: var(--dbl-espresso); font-family: var(--dbl-head); font-size: .875rem; font-weight: 500; line-height: .75rem; text-align: center; text-decoration: none; white-space: nowrap; }
.dbl-nav__cta i { color: #25d366; font-size: .875rem; }

/* Gradient-rimmed pill with a light sweep on hover. */
.dbl-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: var(--dbl-btn-h); min-height: var(--dbl-btn-h); padding: 0 39px; overflow: hidden; border: 0; border-radius: 999px; background: linear-gradient(#1a6d3a 0%, #198d40 20%, #6db81c 58%, #aeec27 82%, #b8e830 100%); color: #fff; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; isolation: isolate; transition: opacity .2s; }
.dbl-btn__fill { position: absolute; inset: 2px; z-index: 1; border-radius: inherit; background: #3f8a05; pointer-events: none; }
.dbl-btn::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 48%, rgba(245, 255, 200, .35) 52%, transparent 65%) 120% 0 / 220% 100%; opacity: 0; pointer-events: none; }
.dbl-btn:hover::after, .dbl-btn:focus-visible::after { opacity: 1; animation: dbl-splash .7s ease-out; }
@keyframes dbl-splash { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.dbl-btn__label { position: relative; z-index: 3; display: block; margin: 0; color: #fff; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .2px; white-space: nowrap; transform: translateY(-1px); }

.dbl-nav__toggle { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; cursor: pointer; }
.dbl-nav__toggle-icon { display: flex; flex-direction: column; justify-content: center; gap: .3125rem; width: 1.125rem; height: 1.125rem; }
.dbl-nav__toggle-icon span { display: block; width: 100%; height: .125rem; border-radius: 6.25rem; background: var(--dbl-espresso); transition: transform .2s, opacity .2s; }
.dbl-nav__toggle[aria-expanded='true'] .dbl-nav__toggle-icon span:first-child { transform: translateY(.4375rem) rotate(45deg); }
.dbl-nav__toggle[aria-expanded='true'] .dbl-nav__toggle-icon span:nth-child(2) { opacity: 0; }
.dbl-nav__toggle[aria-expanded='true'] .dbl-nav__toggle-icon span:nth-child(3) { transform: translateY(-.4375rem) rotate(-45deg); }

.dbl-nav__mobile { position: fixed; inset: var(--dbl-mobile-offset, 57px) 0 0; z-index: 999; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 1.5rem; overflow-y: auto; background: var(--dbl-white); }
.dbl-nav__mobile[hidden] { display: none; }
.dbl-nav__mobile-links { display: flex; flex-direction: column; }
.dbl-nav__mobile-link { padding: .875rem 0; border-bottom: 1px solid var(--dbl-border); color: var(--dbl-espresso); font-family: var(--dbl-head); font-size: 1.125rem; font-weight: 500; text-decoration: none; }
.dbl-nav__mobile-link--sub { padding-left: 1rem; font-size: 1rem; font-weight: 400; opacity: .85; }
.dbl-nav__mobile-actions { display: flex; flex-direction: column; gap: .75rem; }
.dbl-nav__mobile-actions .dbl-nav__cta, .dbl-nav__mobile-actions .dbl-btn { width: 100%; }

@media (max-width: 48rem) {
    .dbl-nav { padding-block: .75rem; }
    .dbl-nav__inner { gap: .75rem; height: 2rem; }
    .dbl-nav__logo img { height: 2.25rem; margin: -.125rem 0; }
    .dbl-nav__links, .dbl-nav__divider, .dbl-nav__call, .dbl-nav__cta-group { display: none; }
    .dbl-nav__left, .dbl-nav__right { gap: 0; }
    .dbl-nav__toggle { display: inline-flex; }
}

/* ============================================================ First view */
@media (min-width: 768px) {
    .dbl-first { --dbl-first-min: 585px; display: flex; flex-direction: column; min-height: max(var(--dbl-first-min), calc(100svh - var(--dbl-nav-h))); }
    .dbl-first .dbl-hero { flex: auto; min-height: 516px; }
    .dbl-first .dbl-showcase { flex: none; }
}

/* ================================================================= Hero */
.dbl-hero { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: max(32.25rem, 35.7836vw); padding-block: 7.5rem; overflow: hidden; background: #01040d; }
.dbl-hero__bg-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; container: dbl-hero-bg / size; }

/* Logo colours left to right, like the tagline: navy glowing in from the
   left edge, pure Cloudi5 red from the right, deep navy-black between. */
.dbl-hero__bg {
    position: absolute;
    inset: 0;
    background-color: #01040d;
    background-image:
        radial-gradient(75% 130% at 0% 50%, rgba(0, 72, 168, .95) 0%, rgba(0, 48, 112, .6) 28%, rgba(0, 24, 104, .2) 48%, transparent 68%),
        radial-gradient(75% 130% at 100% 50%, rgba(216, 8, 16, .92) 0%, rgba(176, 6, 12, .55) 28%, rgba(120, 0, 0, .2) 48%, transparent 68%),
        linear-gradient(90deg, rgba(0, 48, 112, .35) 0%, transparent 38%, transparent 62%, rgba(154, 0, 0, .35) 100%);
}

@container dbl-hero-bg (aspect-ratio <= 1442 / 516) {
    .dbl-hero__bg { --top-h: 48%; --top-h2: 50%; --bot-h: 46%; --bot-h2: 48%; --fade-top: 58%; --fade-bot: 56%; }
}

@media (max-width: 80rem) {
    .dbl-hero__bg { --top-h: 42%; --top-h2: 44%; --bot-h: 40%; --bot-h2: 42%; --fade-top: 50%; --fade-bot: 48%; --op-warm: .48; --op-warm-mid: .18; --op-hot: .82; --op-hot-mid: .42; --op-hot-far: .14; --op-bot-warm: .4; --op-bot-warm-mid: .16; --op-bot-hot: .72; --op-bot-hot-mid: .36; --op-bot-hot-far: .12; }
}

@media (max-width: 64rem) {
    .dbl-hero__bg { --top-h: 48%; --top-h2: 50%; --bot-h: 46%; --bot-h2: 48%; --fade-top: 56%; --fade-bot: 54%; --op-warm: .52; --op-warm-mid: .2; --op-hot: .88; --op-hot-mid: .46; --op-hot-far: .16; --op-bot-warm: .44; --op-bot-warm-mid: .18; --op-bot-hot: .78; --op-bot-hot-mid: .4; --op-bot-hot-far: .14; }
}

.dbl-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; width: 100%; margin: 0 auto; padding-inline: 1.5rem; }
.dbl-hero__text { display: flex; flex-direction: column; align-items: center; gap: 1.625rem; width: 100%; }
.dbl-hero__h { width: 100%; margin: 0; color: var(--dbl-white); font-family: var(--dbl-head); font-size: 2.5rem; font-weight: 500; line-height: 1.5; letter-spacing: -.03em; text-align: center; }
.dbl-hero__line, .dbl-hero__sub { display: block; }
.dbl-hero__break { display: none; }
.dbl-hero__sub { font-size: 2.25rem; line-height: 1.5; letter-spacing: -.03em; }

/* Accent: orange sweeping to white, played once on load. */
.dbl-hero__accent { color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(92deg, var(--dbl-orange) 0%, var(--dbl-orange) 36%, color-mix(in srgb, var(--dbl-orange) 55%, var(--dbl-white)) 44%, var(--dbl-white) 52%, var(--dbl-white) 100%); background-position: 100% 0; background-repeat: no-repeat; background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; animation: dbl-accent-wave 1.2s cubic-bezier(.33, 1, .68, 1) .3s forwards; }
.dbl-hero__accent .dbl-hero__em { display: contents; }
@keyframes dbl-accent-wave { to { background-position: 0 0; } }
.dbl-hero__em { font-family: var(--dbl-serif); font-style: italic; font-weight: 500; }

/* Underline that draws itself in under the middle phrase. */
.dbl-hero__underline { color: var(--dbl-white); background-image: linear-gradient(currentColor, currentColor); background-position: 0 92%; background-repeat: no-repeat; background-size: 0% .07em; animation: dbl-underline .7s cubic-bezier(.33, 1, .68, 1) 1.15s forwards; }
@keyframes dbl-underline { to { background-size: 100% .07em; } }

.dbl-hero__body { max-width: 45.625rem; margin: 0; color: var(--dbl-white); font-family: var(--dbl-body); font-size: 1.125rem; line-height: 1.37; letter-spacing: -.02em; text-align: center; }

@media (max-width: 1349px) {
    .dbl-hero__break { display: inline; }
}

@media (min-width: 48.0625rem) and (max-width: 63.9375rem) {
    .dbl-hero__h { font-size: 3.1875rem; }
    .dbl-hero__sub { font-size: 2.8125rem; }
    .dbl-hero__body { max-width: 90%; font-size: 1rem; }
}

@media (max-width: 48rem) {
    .dbl-hero { min-height: 0; padding: 0; }
    .dbl-hero__content { gap: 1.25rem; padding-block: 4rem; }
    .dbl-hero__h { font-size: 2.375rem; line-height: 1.1; }
    .dbl-hero__sub { font-size: 2.0625rem; line-height: 1.15; }
    .dbl-hero__body { max-width: 100%; font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dbl-hero__accent { color: var(--dbl-orange); -webkit-text-fill-color: var(--dbl-orange); background-image: none; animation: none; }
    .dbl-hero__underline { background-size: 100% .07em; animation: none; }
}

/* ============================================================ Showcase */
.dbl-showcase { position: relative; display: flex; align-items: stretch; width: 100%; padding-block: 1.25rem; padding-inline-end: 1.25rem; overflow: hidden; background: var(--dbl-band); }
.dbl-showcase__marquee { position: relative; display: flex; flex: auto; align-items: center; min-width: 0; overflow: hidden; }
.dbl-showcase__track { --gap: clamp(.875rem, 1.53vw, 1.375rem); display: flex; flex-wrap: nowrap; align-items: center; gap: var(--gap); width: max-content; margin: 0; padding: 0 0 0 1rem; list-style: none; will-change: transform; animation: dbl-showcase 40s linear infinite; }
@media (hover: hover) and (pointer: fine) {
    .dbl-showcase__marquee:hover .dbl-showcase__track { animation-play-state: paused; }
}
@keyframes dbl-showcase { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.dbl-showcase__card { flex: none; margin: 0; overflow: hidden; border-radius: var(--dbl-radius-lg); line-height: 0; }
.dbl-showcase__card img { display: block; width: clamp(9.5rem, 13.2vw, 15rem); height: auto; aspect-ratio: 191 / 249; border-radius: var(--dbl-radius-lg); background: #2a201c; object-fit: cover; object-position: center; }

/* Frosted glass: a red-to-navy tint over a heavy blur, a fine white rim,
   an inner top highlight and a soft diagonal sheen. On desktop the card
   floats over the strip, so the moving project cards show through it. */
.dbl-showcase__cta {
    position: relative;
    z-index: 2;
    display: block;
    flex: none;
    align-self: stretch;
    box-sizing: border-box;
    width: 20.125rem;
    margin-left: .5rem;
    padding: 2.4375rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--dbl-radius-lg);
    background: radial-gradient(90% 70% at 100% 0%, rgba(255, 60, 60, .35) 0%, transparent 60%), linear-gradient(135deg, #0a2a6e 0%, #071a45 38%, #4a0a18 72%, #8e0a12 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 24px 48px -16px rgba(0, 0, 0, .65);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    transition: background .3s, border-color .3s, transform .3s;
}

.dbl-showcase__cta::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .02) 32%, transparent 55%); pointer-events: none; }
.dbl-showcase__cta::after { content: ''; position: absolute; top: -40%; right: -30%; width: 70%; height: 80%; border-radius: 50%; background: radial-gradient(circle, rgba(216, 8, 16, .22), transparent 70%); pointer-events: none; }
.dbl-showcase__cta:hover { border-color: rgba(255, 255, 255, .32); filter: brightness(1.08); }
.dbl-showcase__cta-inner { position: relative; z-index: 1; }

@media (min-width: 48.0625rem) {
    .dbl-showcase__marquee { margin-right: -21.375rem; }
    .dbl-showcase__cta { margin-left: auto; }
}
.dbl-showcase__cta-inner { display: flex; flex-direction: column; justify-content: space-between; gap: 3.375rem; height: 100%; }
.dbl-showcase__cta-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .875rem; width: 100%; min-width: 0; }
.dbl-showcase__cta-title { flex: auto; min-width: 0; max-width: 9.5rem; margin: 0; font-family: var(--dbl-head); font-size: 1.25rem; font-weight: 700; line-height: 1.36; letter-spacing: -.03em; text-transform: uppercase; }
.dbl-showcase__cta-icon { display: inline-grid; flex: none; place-items: center; width: 2.6875rem; height: 2.585rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.1rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dbl-showcase__cta-icon i { display: block; will-change: transform, opacity; }
.dbl-showcase__cta:hover .dbl-showcase__cta-icon i, .dbl-showcase__cta:focus-visible .dbl-showcase__cta-icon i { animation: dbl-cta-arrow .6s cubic-bezier(.4, 0, .2, 1); }
@keyframes dbl-cta-arrow { 0% { opacity: 1; transform: translate(0); } 40% { opacity: 0; transform: translate(120%, -120%); } 41% { opacity: 0; transform: translate(-120%, 120%); } to { opacity: 1; transform: translate(0); } }
.dbl-showcase__cta-body { max-width: 15.1875rem; margin: 0; color: rgba(255, 255, 255, .8); font-family: var(--dbl-body); font-size: .875rem; font-weight: 400; line-height: 1.35; }

.dbl-showcase__fade { position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none; }
.dbl-showcase__fade--left { left: 0; width: clamp(6rem, 13.6vw, 12.25rem); background: linear-gradient(to right, var(--dbl-band) 0%, transparent 100%); }
.dbl-showcase__fade--right { right: 0; width: clamp(3rem, 6vw, 5.5rem); background: linear-gradient(to left, var(--dbl-band) 0%, transparent 100%); }

@media (max-width: 48rem) {
    .dbl-showcase { flex-direction: column; gap: 1.25rem; padding: 1.25rem; }
    .dbl-showcase__marquee { width: 100%; }
    .dbl-showcase__track { --gap: .75rem; padding-left: .25rem; animation-duration: 18s; }
    .dbl-showcase__card img { width: clamp(10.5rem, 44vw, 13.5rem); }
    .dbl-showcase__cta { width: 100%; margin-inline: 0; padding: 1.5rem; }
    .dbl-showcase__cta-inner { gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dbl-showcase__track { animation: none; }
    .dbl-showcase__cta:hover .dbl-showcase__cta-icon i { animation: none; }
}

/* ======================================================= Hero tiles */
/* Small app/AI tiles floating in the bands above and below the headline.
   Each fades in on load, then bobs on its own slow rhythm; the layer also
   leans a little toward the pointer (home1.js sets --mx / --my). */
.dbl-float { --mx: 0; --my: 0; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dbl-tile { position: absolute; transform: translate3d(calc(var(--mx) * var(--depth) * 1px), calc(var(--my) * var(--depth) * 1px), 0); transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.dbl-tile__in { opacity: 0; transform: rotate(var(--r)); animation: dbl-tile-in .9s cubic-bezier(.22, .61, .36, 1) var(--delay) forwards, dbl-bob var(--d) ease-in-out calc(var(--delay) + .9s) infinite; }
@keyframes dbl-tile-in { from { opacity: 0; transform: translateY(18px) scale(.86) rotate(var(--r)); } to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r)); } }
@keyframes dbl-bob { 0%, 100% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 50% { opacity: 1; transform: translateY(-10px) rotate(calc(var(--r) * -.4)); } }

/* Image tile: just a rounded photo with a soft shadow — no frame, no text. */
.dbl-tile__in { width: var(--s); height: var(--s); overflow: hidden; border-radius: 18px; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .75); }
.dbl-tile__in img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Tablet: the four outer tiles only, a touch smaller. Phone: none. */
@media (max-width: 1099px) {
    .dbl-tile--minor { display: none; }
    .dbl-tile__in { width: calc(var(--s) * .8); height: calc(var(--s) * .8); }
}

@media (max-width: 767px) {
    .dbl-float { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dbl-tile__in { opacity: 1; animation: none; }
    .dbl-tile { transition: none; transform: none; }
}

/* ====================================================== Client logos */
/* After the reference: a centred line, then a hairline grid of logo cells
   (6 across). Logos rest in grey and turn to full colour on hover. */
.dbl-clients { padding: 40px 1rem 80px; background: #fff; }
.dbl-clients__h { margin: 0 auto 40px; padding-inline: 1rem; color: #0f0f0f; font-family: var(--dbl-body); font-size: 1.5rem; font-weight: 400; line-height: 130%; letter-spacing: -.12px; text-align: center; }
.dbl-clients__h b { font-weight: 700; }
.dbl-clients__grid { --border-c: #e4e5e5; --cols: 6; position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); max-width: 1280px; margin: 0 auto; padding: 0; border-top: 1px solid var(--border-c); border-left: 1px solid var(--border-c); list-style: none; }
.dbl-clients__item { position: relative; display: flex; align-items: center; justify-content: center; height: 110px; padding-inline: 28px; border-right: 1px solid var(--border-c); border-bottom: 1px solid var(--border-c); }
.dbl-clients__item img { position: absolute; max-width: calc(100% - 50px); max-height: calc(100% - 50px); object-fit: contain; transition: .4s cubic-bezier(.25, .46, .45, .94); }
.dbl-clients__item img.is-color { opacity: 0; visibility: hidden; }
.dbl-clients__item:hover img { opacity: 0; visibility: hidden; }
.dbl-clients__item:hover img.is-color { opacity: 1; visibility: visible; }
.dbl-clients__more { flex-direction: column; gap: .25rem; color: #5f636b; font-family: var(--dbl-body); text-align: center; }
.dbl-clients__more b { color: #0f0f0f; font-family: var(--dbl-head); font-size: 1.75rem; font-weight: 700; line-height: 1; }
.dbl-clients__more b i { color: var(--dbl-orange); font-style: normal; }
.dbl-clients__more span { font-size: .8125rem; }

@media (max-width: 1300px) { .dbl-clients__grid { max-width: 900px; } }
@media (max-width: 1075px) { .dbl-clients__grid { overflow: hidden; } }
@media (max-width: 767px) {
    .dbl-clients { padding-top: 20px; }
    .dbl-clients__h { margin-bottom: 24px; font-size: 1rem; text-align: start; }
    .dbl-clients__grid { --cols: 3; margin: 32px auto; }
    .dbl-clients__item { height: 114px; padding-inline: 16px; }
}

/* Rise in: 60px, 1.8s, power3-out — as the reference. */
.dbl-rise-pre { opacity: 0; transform: translateY(60px); }
.dbl-rise-in { opacity: 1; transform: none; transition: opacity 1.8s cubic-bezier(.215, .61, .355, 1), transform 1.8s cubic-bezier(.215, .61, .355, 1); }
@media (prefers-reduced-motion: reduce) { .dbl-rise-pre { opacity: 1; transform: none; } }

/* ===================================================== Hero accent line */
/* "Real engineers," keeps its load-in sweep, then a slow light glints
   across it on a loop. The italic phrase after it rotates through words,
   each rising in from a blur while the old one lifts away. */
.dbl-hero__accent {
    background-image: linear-gradient(100deg, var(--dbl-orange) 0%, var(--dbl-orange) 40%, #ff8a8f 48%, #fff 50%, #ff8a8f 52%, var(--dbl-orange) 60%, var(--dbl-orange) 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    animation: dbl-glint 4.5s cubic-bezier(.45, 0, .2, 1) .4s infinite;
}
@keyframes dbl-glint { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }

.dbl-rot { position: relative; display: inline-block; height: 1.5em; overflow-x: visible; overflow-y: clip; vertical-align: bottom; color: var(--dbl-orange); font-family: var(--dbl-serif); font-style: italic; font-weight: 500; transition: width .5s cubic-bezier(.65, 0, .35, 1); }
.dbl-rot__word { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; filter: blur(8px); transform: translateY(100%); transition: opacity .55s ease, transform .6s cubic-bezier(.22, 1, .36, 1), filter .55s ease; }
.dbl-rot__word.is-on { position: relative; opacity: 1; filter: blur(0); transform: translateY(0); }
.dbl-rot__word.is-out { opacity: 0; filter: blur(8px); transform: translateY(-100%); }

@media (max-width: 48rem) {
    .dbl-rot { height: 1.15em; }
}

@media (prefers-reduced-motion: reduce) {
    .dbl-hero__accent { animation: none; background: none; color: var(--dbl-orange); -webkit-text-fill-color: var(--dbl-orange); }
    .dbl-rot, .dbl-rot__word { transition: none; }
}

/* ========================================================= Offerings */
/* After the reference: chip, heading and intro on the left, controls on
   the right, then large themed cards — a frosted panel of text over a
   photo. Here the cards slide (two on screen) instead of switching tabs. */
.dbl-off { padding: 96px 0 104px; background: #fff; color: #0d0d0d; }
.dbl-off__in { max-width: 1336px; margin: 0 auto; padding-inline: 56px; }
.dbl-off__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 36px; }
.dbl-off__chip { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; padding: .3rem .75rem; border: 1px solid #e3e3e3; border-radius: 999px; font-family: 'Manrope', sans-serif; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.dbl-off__chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--dbl-orange); }
.dbl-off__h { margin: 0; font-family: 'Red Hat Display', sans-serif; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.dbl-off__p { max-width: 36rem; margin: 1.25rem 0 0; color: #2b2b2b; font-family: 'Manrope', sans-serif; font-size: .95rem; line-height: 1.6; }

.dbl-off__nav { display: flex; flex-shrink: 0; align-items: center; gap: .625rem; }
.dbl-off__btn { display: grid; place-items: center; width: 3rem; height: 2.5rem; border: 1px solid #cfcfcf; border-radius: 0; background: #fff; color: #0d0d0d; font-size: 1rem; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.dbl-off__btn:hover, .dbl-off__btn.is-active { border-color: #000; background: #000; color: #fff; }
.dbl-off__btn:disabled { border-color: #cfcfcf; background: #fff; color: #0d0d0d; opacity: .35; cursor: default; }
.dbl-off__count { min-width: 4.5rem; font-family: 'Manrope', sans-serif; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-align: center; }

.dbl-off__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.25rem) / 2); gap: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline: none; }
.dbl-off__track::-webkit-scrollbar { display: none; }

.dbl-card { --bg: 0, 0, 0; --fg: #fff; --sub: rgba(255, 255, 255, .8); --acc: #22e05c; --acc-fg: #000; --rule: rgba(255, 255, 255, .25);
    position: relative; min-height: 470px; overflow: hidden; scroll-snap-align: start; background: rgb(var(--bg)); color: var(--fg); isolation: isolate; }
.dbl-card > img { position: absolute; inset: 0 0 0 auto; z-index: -2; width: 46%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
.dbl-card:hover > img { transform: scale(1.05); }
/* Frosted panel: the card colour over a heavy blur, easing out at its right edge. */
/* 60% colour, 40% clear image; the panel blurs the strip where they meet. */
.dbl-card__panel { position: absolute; inset: 0 auto 0 0; z-index: -1; width: 60%; background: linear-gradient(90deg, rgba(var(--bg), 1) 0%, rgba(var(--bg), 1) 88%, rgba(var(--bg), .7) 100%); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); }
.dbl-card__body { position: relative; display: flex; flex-direction: column; width: 60%; height: 100%; padding: 2.5rem 2rem 2.25rem; }
.dbl-card__t { margin: 0; font-family: 'Red Hat Display', sans-serif; font-size: clamp(1.75rem, 2.4vw, 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.dbl-card__for { margin: .75rem 0 0; color: var(--sub); font-family: 'Manrope', sans-serif; font-size: .875rem; }
.dbl-card__rule { width: 8rem; height: 1px; margin: 2.5rem 0 2rem; background: var(--rule); }
.dbl-card__list { display: flex; flex-direction: column; gap: .9rem; margin: 0; padding: 0; list-style: none; font-family: 'Manrope', sans-serif; font-size: .875rem; line-height: 1.4; }
.dbl-card__list li { display: flex; align-items: flex-start; gap: .75rem; }
.dbl-card__list i { display: grid; flex: none; place-items: center; width: 1.125rem; height: 1.125rem; margin-top: .05rem; border-radius: 3px; background: var(--acc); color: var(--acc-fg); font-size: .7rem; }
.dbl-card__more { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: 2rem; color: var(--fg); font-family: 'Manrope', sans-serif; font-size: .875rem; font-weight: 600; text-decoration: none; }
.dbl-card__more i { transition: transform .25s; }
.dbl-card__more:hover i { transform: translateX(4px); }

.dbl-card--night { --bg: 0, 0, 0; --acc: #22e05c; }
.dbl-card--mint  { --bg: 196, 234, 214; --fg: #0d3b26; --sub: #1f5a3f; --acc: #12704a; --acc-fg: #fff; --rule: rgba(13, 59, 38, .25); }
.dbl-card--navy  { --bg: 8, 26, 64; --acc: #4d8bff; --acc-fg: #fff; }
.dbl-card--cream { --bg: 250, 240, 228; --fg: #2a1609; --sub: #6a4630; --acc: #d80810; --acc-fg: #fff; --rule: rgba(42, 22, 9, .2); }
.dbl-card--red   { --bg: 120, 6, 14; --acc: #fff; --acc-fg: #8e0a12; }

.dbl-off__bar { position: relative; height: 2px; margin-top: 1.75rem; background: #ececec; }
.dbl-off__bar i { position: absolute; inset: 0 auto 0 0; width: 40%; background: #000; transition: left .4s cubic-bezier(.65, 0, .35, 1), width .4s; }

@media (max-width: 1023px) {
    .dbl-off__in { padding-inline: 1.5rem; }
    .dbl-off__track { grid-auto-columns: 78%; }
}

@media (max-width: 767px) {
    .dbl-off { padding: 64px 0 72px; }
    .dbl-off__head { flex-direction: column; align-items: flex-start; }
    .dbl-off__track { grid-auto-columns: 88%; gap: .875rem; }
    .dbl-card { min-height: 520px; }
    .dbl-card > img { inset: auto 0 0 0; width: 100%; height: 42%; }
    .dbl-card__panel { inset: 0 0 auto 0; width: 100%; height: 62%; background: linear-gradient(180deg, rgba(var(--bg), .97) 0%, rgba(var(--bg), .9) 80%, rgba(var(--bg), 0) 100%); }
    .dbl-card__body { width: 100%; padding: 1.75rem 1.5rem; }
    .dbl-card__rule { margin: 1.5rem 0 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dbl-off__track { scroll-behavior: auto; }
    .dbl-card > img { transition: none; }
}

/* ===================================================== One type system */
/* Every section below the menu uses the hero's fonts: Instrument Sans for
   reading, Bricolage Grotesque for headings and figures, Playfair Display
   italic for accent words. Icon glyphs (<i>, .bi) are left alone. */
body.home1 { font-family: var(--dbl-body); }

:where(body.home1) :where(main, footer, .wa) :where(*:not(i, .bi, svg, svg *)) { font-family: var(--dbl-body) !important; }

body.home1 :is(main, footer) :is(h1, h2, h3, h4, h5,
    .title, .stat__v, .why__n, .band__title, .hero__title,
    .mfs__num, .mfs__big, .mfs__mid,
    .fs__h, .fs__title, .mw__heading, .mw__prefix, .mw__logo b, .msv__heading, .msv__title, .msv__index,
    .tm__h, .pf__title, .pf__name, .case__title, .post__title, .prod h3, .ui-ring b, .ui-pipe i,
    .dbl-off__h, .dbl-card__t, .dbl-clients__h, .dbl-clients__more b,
    .dbl-showcase__cta-title, .ftr__h) { font-family: var(--dbl-head) !important; letter-spacing: -.02em; }

body.home1 :is(main, footer) :is(.ital, .dbl-hero__em, .dbl-rot, .dbl-rot__word, .hero__accent) { font-family: var(--dbl-serif) !important; font-style: italic; letter-spacing: 0; }

/* The client sentence keeps a light weight with the brand name in bold. */
body.home1 .dbl-clients__h { font-weight: 400; letter-spacing: -.01em; }

/* =========================================================== Ecosystem */
/* After the reference: heading block with an italic accent line that
   sweeps from red to espresso when it enters view, a support line and
   button on the right, then a bento of four image cards (two small, one
   wide, one tall) with floating UI chips. */
.dbl-intel { --intel-gap: 1.5rem; --intel-radius: 1.125rem; width: 100%; max-width: 100%; overflow-x: clip; background: #fff; }
.dbl-intel__inner { display: flex; flex-direction: column; gap: 4.4375rem; padding-block: 7.5rem; box-sizing: border-box; }
.dbl-intel__header { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(1.5rem, 3vw, 3rem); width: 100%; }
.dbl-intel__heading-block { display: flex; flex: 1 1 0; flex-direction: column; gap: .75rem; min-width: 0; max-width: min(46.875rem, 100%); }
.dbl-intel__eyebrow { margin: 0; color: #0a211f; font-family: var(--dbl-head); font-size: .875rem; font-weight: 400; line-height: 1.54; letter-spacing: 1px; text-transform: uppercase; }
.dbl-intel__heading { display: flex; flex-direction: column; margin: 0; color: var(--dbl-espresso); font-family: var(--dbl-head); font-size: clamp(2.375rem, 4.2vw, 60px); font-weight: 500; line-height: 1.2; letter-spacing: -.05em; }
.dbl-intel__heading-plain { display: block; }
.dbl-intel__heading-accent { display: block; padding-inline-end: .18em; color: transparent; -webkit-text-fill-color: transparent; font-family: var(--dbl-serif); font-style: italic; font-weight: 500; white-space: normal; text-wrap: balance; background-image: linear-gradient(92deg, var(--dbl-orange) 0%, var(--dbl-orange) 36%, color-mix(in srgb, var(--dbl-orange) 55%, var(--dbl-espresso)) 44%, var(--dbl-espresso) 52%, var(--dbl-espresso) 100%); background-position: 100% 0; background-repeat: no-repeat; background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; }
.dbl-intel__heading-accent.is-waved { animation: dbl-intel-wave 1.2s cubic-bezier(.33, 1, .68, 1) forwards; }
@keyframes dbl-intel-wave { to { background-position: 0 0; } }

.dbl-intel__intro { display: flex; flex: 0 24.3125rem; flex-direction: column; align-items: flex-start; gap: 1.5rem; width: min(24.3125rem, 38%); min-width: 0; max-width: 100%; }
.dbl-intel__support { margin: 0; color: #574d4a; font-family: var(--dbl-body); font-size: 1rem; font-weight: 400; line-height: 1.5; }
.dbl-intel__cta-slot--footer { display: none; }

.dbl-intel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 24.375rem); grid-template-rows: 22.5rem 22.5rem; gap: var(--intel-gap); width: 100%; min-width: 0; }
.dbl-intel-card { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; border-radius: var(--intel-radius); background: #111; container: intel-card / inline-size; }
.dbl-intel-card--brand { grid-area: 1 / 1; }
.dbl-intel-card--workflow { grid-area: 1 / 2; background: linear-gradient(180deg, #fff 0%, #fde8e6 55%, #f9d3cd 100%); }
.dbl-intel-card--agents { grid-area: 2 / 1 / auto / 3; }
.dbl-intel-card--command { grid-area: 1 / 3 / 3; }

.dbl-intel-card__bg { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: center bottom; pointer-events: none; user-select: none; transition: transform 1s cubic-bezier(.22, .61, .36, 1); }
.dbl-intel-card:hover .dbl-intel-card__bg { transform: scale(1.04); }
.dbl-intel-card--command .dbl-intel-card__bg { object-position: center center; }

/* Photos get a dark wash from the top so the white copy always reads. */
.dbl-intel-card--brand::before, .dbl-intel-card--agents::before, .dbl-intel-card--command::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dbl-intel-card--brand::before { background: linear-gradient(180deg, rgba(10, 6, 4, .78) 0%, rgba(10, 6, 4, .45) 42%, rgba(10, 6, 4, .1) 75%); }
.dbl-intel-card--agents::before { background: linear-gradient(90deg, rgba(10, 6, 4, .86) 0%, rgba(10, 6, 4, .6) 38%, rgba(10, 6, 4, .1) 70%); }
.dbl-intel-card--command::before { background: linear-gradient(180deg, rgba(10, 6, 4, .7) 0%, rgba(10, 6, 4, .15) 32%, rgba(10, 6, 4, .2) 60%, rgba(10, 6, 4, .85) 100%); }

.dbl-intel-card__copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1rem; max-width: 23.9375rem; padding: 1.5rem 1.75rem 0; box-sizing: border-box; }
.dbl-intel-card__copy--light { color: #fff; }
.dbl-intel-card__copy--dark { color: #000; }
.dbl-intel-card__title { margin: 0; font-family: var(--dbl-head); font-size: 1.75rem; font-weight: 500; line-height: 1.25; letter-spacing: -.04em; }
.dbl-intel-card__body { margin: 0; font-family: var(--dbl-body); font-size: .875rem; font-weight: 400; line-height: 1.4286; hyphens: auto; }
.dbl-intel-card__body--agents { max-width: 18.5625rem; hyphens: none; }
.dbl-intel-card__body--command { position: absolute; right: 1.75rem; bottom: 1.75rem; left: 1.75rem; z-index: 2; max-width: 21.5625rem; margin: 0; color: #fff; font-family: var(--dbl-body); font-size: .875rem; line-height: 1.4286; }

/* Workflow card: tool icons orbiting a Cloudi5 tile. */
.dbl-intel-orbit { position: absolute; left: 50%; bottom: -3.25rem; width: 13rem; height: 13rem; transform: translateX(-50%); }
.dbl-intel-orbit__ring { position: absolute; inset: 1.25rem; border: 1px dashed rgba(216, 8, 16, .28); border-radius: 50%; animation: dbl-orbit 40s linear infinite; }
.dbl-intel-orbit__hub { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px -12px rgba(216, 8, 16, .45); transform: translate(-50%, -50%); }
.dbl-intel-orbit__hub img { width: 78%; height: auto; }
.dbl-intel-orbit__app { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px -10px rgba(26, 18, 15, .35); font-size: 1.1rem; transform: rotate(var(--a)) translateX(5.25rem) rotate(calc(var(--a) * -1)); animation: dbl-orbit-app 40s linear infinite; }
@keyframes dbl-orbit { to { transform: rotate(360deg); } }
@keyframes dbl-orbit-app { from { transform: rotate(var(--a)) translateX(5.25rem) rotate(calc(var(--a) * -1)); } to { transform: rotate(calc(var(--a) + 360deg)) translateX(5.25rem) rotate(calc((var(--a) + 360deg) * -1)); } }

/* Floating chips. */
.dbl-intel-chip { position: absolute; z-index: 3; display: flex; align-items: center; box-sizing: border-box; border: 1px solid #fff; background: rgba(255, 255, 255, .85); pointer-events: none; }
.dbl-intel-chip--ready { right: clamp(1rem, 12.6%, 6.3125rem); bottom: clamp(1rem, 19.7%, 4.4375rem); gap: .25rem; padding: 3px 11px 3px 3px; border-radius: 6.25rem; animation: dbl-chip-float 6s ease-in-out infinite; }
.dbl-intel-chip__ready-icon { display: grid; flex-shrink: 0; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #2ec36b; color: #fff; font-size: .7rem; }
.dbl-intel-chip__ready-label { color: #000; font-family: var(--dbl-body); font-size: .625rem; font-weight: 400; line-height: 1rem; white-space: nowrap; }
.dbl-intel-chip--prompt { top: 37.6%; left: 50%; gap: .625rem; width: max-content; max-width: min(28rem, 100% - 3rem); height: 3.5rem; padding: .4375rem 1.125rem; border-radius: 1.9375rem; transform: translateX(-50%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dbl-intel-chip__prompt-sparkle { flex-shrink: 0; color: var(--dbl-orange); font-size: 1rem; }
.dbl-intel-chip__prompt-mic { flex-shrink: 0; color: #555; font-size: .875rem; }
.dbl-intel-chip__prompt-text { flex: auto; min-width: 0; max-width: 9.875rem; color: #000; font-family: var(--dbl-body); font-size: .75rem; font-weight: 400; line-height: 1rem; }
.dbl-intel-chip__prompt-divider { flex-shrink: 0; width: 1px; height: 1.5rem; background: #ccc; }
.dbl-intel-chip__prompt-send { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 6.25rem; background: var(--dbl-orange); color: #fff; font-size: .7rem; }
@keyframes dbl-chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (min-width: 1024px) and (max-width: 1439px) {
    .dbl-intel__inner { padding-block: 6rem; }
    .dbl-intel__heading { font-size: clamp(2.375rem, 3.6vw, 3.25rem); }
}

@media (min-width: 1440px) {
    .dbl-intel__heading { font-size: 60px; line-height: 1.2; letter-spacing: -.05em; }
    .dbl-intel__heading-accent { white-space: nowrap; }
    .dbl-intel__intro { flex: 0 0 24.3125rem; width: 24.3125rem; }
}

@media (max-width: 1279px) {
    .dbl-intel__inner { gap: 3rem; }
    .dbl-intel__grid { display: flex; flex-direction: column; gap: 1rem; }
    .dbl-intel-card--brand, .dbl-intel-card--workflow, .dbl-intel-card--agents, .dbl-intel-card--command { width: 100%; height: auto; min-height: 26rem; max-height: 38rem; }
    .dbl-intel-card__copy { max-width: none; }
    .dbl-intel-card--brand .dbl-intel-card__copy, .dbl-intel-card--workflow .dbl-intel-card__copy, .dbl-intel-card--agents .dbl-intel-card__copy { padding-bottom: max(10rem, 42%); }
    .dbl-intel-card__body--command { max-width: 32rem; }
    .dbl-intel-chip--ready { bottom: 28%; left: 50%; right: auto; transform: translateX(-50%); animation: none; }
    .dbl-intel-chip--prompt { top: 42%; max-width: min(32rem, 100% - 3rem); }
    .dbl-intel-card--agents::before { background: linear-gradient(180deg, rgba(10, 6, 4, .88) 0%, rgba(10, 6, 4, .6) 30%, rgba(10, 6, 4, .1) 70%); }
}

@media (min-width: 820px) and (max-width: 1279px) {
    .dbl-intel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: stretch; gap: 1rem; }
    .dbl-intel-card--brand { grid-area: 1 / 1; }
    .dbl-intel-card--workflow { grid-area: 1 / 2; }
    .dbl-intel-card--agents, .dbl-intel-card--command { grid-column: 1 / -1; height: 34rem; min-height: 34rem; max-height: 34rem; }
    .dbl-intel-card--agents { grid-row: 2; }
    .dbl-intel-card--command { grid-row: 3; }
    .dbl-intel-card--agents .dbl-intel-card__copy { padding-bottom: 40%; }
}

@media (max-width: 1023px) {
    .dbl-intel__inner { padding-block: 4rem; }
    .dbl-intel__header { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
    .dbl-intel__heading-block { max-width: none; }
    .dbl-intel__intro { flex: none; width: 100%; max-width: 28rem; }
    .dbl-intel__cta-slot--header { display: none; }
    .dbl-intel__cta-slot--footer { display: flex; justify-content: center; width: 100%; }
}

@media (max-width: 767px) {
    .dbl-intel__inner { gap: 2.25rem; }
    .dbl-intel__heading { font-size: 2.375rem; letter-spacing: -.04em; }
    .dbl-intel-card__copy { padding: 1.25rem 1.25rem 0; }
    .dbl-intel-card--brand .dbl-intel-card__copy, .dbl-intel-card--workflow .dbl-intel-card__copy { padding-bottom: max(14rem, 55%); }
    .dbl-intel-card--agents, .dbl-intel-card--command { height: 36rem; min-height: 36rem; max-height: 36rem; }
    .dbl-intel-card--agents .dbl-intel-card__copy { padding-bottom: 40%; }
    .dbl-intel-card__title { font-size: 1.5rem; }
    .dbl-intel-card__body--command { right: 1.25rem; bottom: 1.25rem; left: 1.25rem; line-height: 1.4; }
    .dbl-intel-card__body br { display: none; }
    .dbl-intel-chip--prompt { gap: .375rem; height: 3.25rem; padding: .375rem 1rem .375rem .75rem; top: 40%; max-width: min(28rem, 100% - 2rem); }
    .dbl-intel-chip__prompt-text { max-width: none; font-size: .625rem; line-height: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dbl-intel__heading-accent, .dbl-intel__heading-accent.is-waved { color: var(--dbl-orange); -webkit-text-fill-color: var(--dbl-orange); background-image: none; animation: none; }
    .dbl-intel-orbit__ring, .dbl-intel-orbit__app, .dbl-intel-chip--ready { animation: none; }
    .dbl-intel-card__bg { transition: none; }
}

/* Keep the reference's tracking and faces inside the type-system override. */
body.home1 .dbl-intel__heading { letter-spacing: -.05em !important; }
body.home1 .dbl-intel-card__title { letter-spacing: -.04em !important; }
body.home1 .dbl-intel__eyebrow { font-family: var(--dbl-head) !important; letter-spacing: 1px !important; }
body.home1 .dbl-intel__heading-accent { font-family: var(--dbl-serif) !important; font-style: italic; letter-spacing: 0 !important; }

/* =========================================== Our Work — dark red stage */
/* Near-black with Cloudi5 red light pooling in from the lower left and a
   cooler ember at the top right, plus a fine grain so it never looks flat. */
body.home1 .mw {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(60% 55% at 0% 100%, rgba(216, 8, 16, .55) 0%, rgba(140, 4, 10, .25) 40%, transparent 70%),
        radial-gradient(45% 40% at 100% 0%, rgba(216, 8, 16, .35) 0%, transparent 70%),
        radial-gradient(70% 50% at 50% 50%, rgba(40, 4, 8, .6) 0%, transparent 80%),
        #050405;
    color: #fff;
}
body.home1 .mw::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .06; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.home1 .mw__eyebrow-label, body.home1 .mw__prefix, body.home1 .mw__heading, body.home1 .mw__desc { color: #fff; }
body.home1 .mw__desc { opacity: .62; }
body.home1 .mw__heading { background: linear-gradient(180deg, #fff 30%, #ffb3b6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.home1 .mw__cta { background: linear-gradient(135deg, #d80810, #6e0810); box-shadow: 0 14px 34px -12px rgba(216, 8, 16, .7); }
body.home1 .mw__surface { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }

/* ------------------------------------------------- Service pill rows */
.wp { --pill-bg: rgba(255, 255, 255, .045); position: relative; display: flex; flex-direction: column; gap: 1rem; width: 100vw; margin: 0 calc(50% - 50vw) 64px; perspective: 900px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.wp__row { overflow: visible; transform: rotateX(var(--tilt, 0deg)); transform-origin: 50% 50%; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.wp__track { display: flex; gap: 1rem; width: max-content; padding: 6px 0; animation: wp-left 46s linear infinite; }
.wp__row--rev .wp__track { animation-name: wp-right; animation-duration: 52s; }
.wp__row:hover .wp__track { animation-play-state: paused; }
@keyframes wp-left { to { transform: translateX(-50%); } }
@keyframes wp-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Pill: frosted dark glass; a red light travels round its border. */
@property --wp-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.wp__pill { position: relative; display: inline-flex; flex: none; align-items: center; gap: .875rem; height: 3.8rem; padding: 0 1.5rem 0 .75rem; border-radius: 15px; background: var(--pill-bg); color: #fcfcfa; font-family: var(--dbl-head); font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .35s cubic-bezier(.22, .61, .36, 1), background .35s, box-shadow .35s; }
.wp__pill::before { content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--wp-a), transparent 0 70%, rgba(216, 8, 16, .9) 82%, #ff8a8f 86%, transparent 94%); -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 exclude, linear-gradient(#000 0 0); animation: wp-trace 5s linear infinite; animation-delay: calc(var(--i, 0) * -.7s); pointer-events: none; }
@keyframes wp-trace { to { --wp-a: 360deg; } }
.wp__ico { display: grid; flex: none; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 11px; background: linear-gradient(145deg, rgba(216, 8, 16, .28), rgba(216, 8, 16, .08)); box-shadow: inset 0 0 0 1px rgba(255, 90, 97, .35); color: #ff3b42; font-size: 1.15rem; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background .35s, color .35s; }
.wp__pill:hover { background: rgba(216, 8, 16, .14); transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 90, 97, .45), 0 18px 34px -16px rgba(216, 8, 16, .8); }
.wp__pill:hover .wp__ico { background: #d80810; color: #fff; transform: rotate(-12deg) scale(1.08); }

@media (max-width: 767px) {
    .wp { gap: .75rem; margin-bottom: 40px; }
    .wp__pill { height: 3rem; gap: .625rem; padding: 0 1.1rem 0 .55rem; border-radius: 12px; font-size: 1.05rem; }
    .wp__ico { width: 1.95rem; height: 1.95rem; border-radius: 9px; font-size: .95rem; }
    .wp__track { animation-duration: 30s; }
    .wp__row--rev .wp__track { animation-duration: 34s; }
}

@media (prefers-reduced-motion: reduce) {
    .wp__track, .wp__pill::before { animation: none; }
    .wp__row { transform: none; }
}



/* ================================================= Words from the teams */
/* After the reference: heading left, dark square arrows right, then a
   carousel of tall cards that runs past the right edge. Video cards play
   a muted preview on hover and open full-size on click; text cards carry
   the quote, a pair of metrics and the person. */
.tw { padding: 112px 0; overflow: hidden; background: #fff; color: #242424; }
.tw__container { width: calc(100% - clamp(1.25rem, .6667rem + 2.9167vw, 3rem) * 2); max-width: 80rem; margin: 0 auto; }
.tw__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 4rem; }
.tw__h { max-width: 38.75rem; margin: 0; font-family: var(--dbl-head); font-size: clamp(2.25rem, 1.8333rem + 2.0833vw, 3.5rem); font-weight: 500; line-height: 110%; letter-spacing: -.02em; }
.tw__arrows { display: flex; gap: .75rem; }
.tw__arrow { display: flex; align-items: center; justify-content: center; width: 3.38rem; height: 3.38rem; border: 0; border-radius: .38rem; background: #242424; color: #fff; font-size: 1.25rem; cursor: pointer; transition: background .3s, color .3s; }
.tw__arrow:hover { background: #d80810; }
.tw__arrow:disabled { opacity: .35; cursor: default; background: #242424; }

.tw__swiper { overflow: visible; }
.tw__track { display: flex; gap: 10px; overflow-x: auto; overflow-y: visible; margin-right: calc((100vw - 100%) / -2); padding-right: calc((100vw - 100%) / 2); scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.tw__track::-webkit-scrollbar { display: none; }

.tw__card { position: relative; flex: 0 0 min(38.9rem, 84vw); height: 35rem; overflow: hidden; border-radius: .75rem; background: #111; color: #fff; scroll-snap-align: start; opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1); }
.tw.is-in .tw__card { opacity: 1; transform: none; }
.tw.is-in .tw__card:nth-child(2) { transition-delay: .12s; }
.tw.is-in .tw__card:nth-child(3) { transition-delay: .24s; }
.tw.is-in .tw__card:nth-child(n + 4) { transition-delay: .36s; }

.tw__poster, .tw__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tw__preview { opacity: 0; transition: opacity .4s ease; }
.tw__card.is-playing .tw__preview { opacity: 1; }
.tw__card--video { cursor: pointer; }

.tw__content { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: space-between; padding: 1.75rem; pointer-events: none; background-image: linear-gradient(rgba(0, 0, 0, .45), rgba(43, 43, 43, 0) 20%, rgba(235, 235, 235, 0) 75%, rgba(0, 0, 0, .83) 93%); }
.tw__card-head { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; }
.tw__logo { max-width: 40%; max-height: 3rem; object-fit: contain; }
.tw__logo-text { font-family: var(--dbl-head); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.tw__play { display: grid; place-items: center; width: 3rem; height: 3rem; margin-left: auto; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.4rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, transform .3s; }
.tw__card--video:hover .tw__play { background: #d80810; transform: scale(1.08); }
.tw__foot { display: flex; flex-direction: column; gap: 1rem; }
.tw__quote { margin: 0; font-family: var(--dbl-head); font-size: clamp(1rem, .9167rem + .4167vw, 1.25rem); font-weight: 600; line-height: 1.4; }
.tw__label { display: inline-flex; align-self: flex-start; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .16); font-family: var(--dbl-body); font-size: .8rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tw__person { display: flex; align-items: center; gap: 1rem; }
.tw__photo { display: grid; flex: none; place-items: center; width: 3rem; height: 3rem; overflow: hidden; border-radius: .25rem; background: rgba(255, 255, 255, .16); font-family: var(--dbl-head); font-weight: 600; }
.tw__photo img { width: 100%; height: 100%; object-fit: cover; }
.tw__name { display: block; font-family: var(--dbl-head); font-size: clamp(1rem, .9167rem + .4167vw, 1.25rem); font-weight: 600; }
.tw__role { display: block; color: #bbb; font-family: var(--dbl-body); font-size: .875rem; }

/* Text card: brand-coloured panel, quote on top, metrics, then the person. */
.tw__card--text .tw__content { gap: 3rem; background-image: none; }
.tw__card--text .tw__foot { justify-content: space-between; height: 100%; }
.tw__card--text .tw__role { color: #fff; }
.tw__card--navy { background: radial-gradient(70% 60% at 100% 0%, rgba(60, 110, 220, .45) 0%, transparent 70%), linear-gradient(160deg, #0a2a6e 0%, #071a45 60%, #040d24 100%); }
.tw__card--red { background: radial-gradient(70% 60% at 100% 0%, rgba(255, 90, 97, .4) 0%, transparent 70%), linear-gradient(160deg, #9a0a12 0%, #5e060c 60%, #2a0306 100%); }
.tw__card--black { background: radial-gradient(70% 60% at 100% 0%, rgba(216, 8, 16, .35) 0%, transparent 70%), linear-gradient(160deg, #1a1414 0%, #0b0b0b 100%); }
.tw__card--text .tw__quote { font-size: clamp(1.25rem, 1.0833rem + .8333vw, 1.75rem); line-height: 1.35; letter-spacing: -.01em; }
.tw__metrics { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 2.5rem; }
.tw__metric { display: flex; flex-direction: column; gap: .25rem; }
.tw__metric span { color: rgba(255, 255, 255, .7); font-family: var(--dbl-body); font-size: .875rem; }
.tw__metric b { color: #fff; font-family: var(--dbl-head); font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.tw__mark { position: absolute; right: 1.5rem; bottom: 1.25rem; color: rgba(255, 255, 255, .12); font-family: var(--dbl-serif); font-size: 8rem; line-height: .7; pointer-events: none; }

/* Modal. */
.tw__modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .9); }
.tw__modal[hidden] { display: none; }
.tw__modal-video { max-width: min(100%, 1100px); max-height: 90vh; border-radius: 12px; background: #000; }
.tw__close { position: absolute; top: 24px; right: 24px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background .25s, transform .25s; }
.tw__close:hover { background: rgba(255, 255, 255, .28); transform: scale(1.06); }

@media (max-width: 991px) {
    .tw { padding: 80px 0; }
    .tw__head { margin-bottom: 2.5rem; }
    .tw__card { height: 25rem; }
    .tw__card--text .tw__content { gap: 1.5rem; }
}

@media (max-width: 767px) {
    .tw__head { flex-direction: column; align-items: flex-start; }
    .tw__card { height: 20rem; flex-basis: 86vw; }
    .tw__card--text .tw__quote { font-size: 1.05rem; }
    .tw__metric b { font-size: 1.25rem; }
    .tw__mark { font-size: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tw__card { opacity: 1; transform: none; transition: none; }
    .tw__track { scroll-behavior: auto; }
}

body.home1 .tw__mark { font-family: var(--dbl-serif) !important; }

/* Long quotes stay inside the card: trimmed to a few lines, never pushing the person out. */
.tw__card--text .tw__quote { display: -webkit-box; overflow: hidden; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); -webkit-line-clamp: 7; -webkit-box-orient: vertical; }
.tw__card--text .tw__content { gap: 1.5rem; }
.tw__card--text .tw__foot { gap: 1.5rem; }
@media (max-width: 767px) {
    .tw__card--text { height: auto; min-height: 20rem; }
    .tw__card--text .tw__content { position: relative; }
    .tw__card--text .tw__quote { -webkit-line-clamp: 6; }
}

/* Narrower cards: about three on screen at 1440px. */
.tw__card { flex-basis: min(25rem, 80vw); }
.tw__card--text .tw__quote { -webkit-line-clamp: 8; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); }
.tw__metrics { gap: 1rem 1.75rem; }
.tw__metric b { font-size: 1.4rem; }
@media (max-width: 767px) { .tw__card { flex-basis: 82vw; } }

/* ================================================================ Menu */
/* After the reference: a dark bar (logo, menu, one button). A grey pill
   slides behind whichever item the pointer is on. A toggle opens a white
   full-width mega panel that wipes down from the top; the bar turns light
   and the page behind it blurs. Moving between toggles slides the panels
   sideways. Below 992px: burger, light full-screen menu with accordions. */
.fn { --fn-dur: .5s; --fn-ease: cubic-bezier(.4, 0, .2, 1); --fn-pill: cubic-bezier(.22, 1, .36, 1);
    position: sticky; top: 0; z-index: 1000; width: 100%; padding: .75rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); background: #0c0e13; color: #fff; transition: background-color .35s var(--fn-ease), border-color .35s var(--fn-ease), color .35s var(--fn-ease); }
.fn__bar { display: flex; align-items: center; gap: 3.5rem; width: calc(100% - clamp(1.25rem, .6667rem + 2.9167vw, 3rem) * 2); max-width: 80rem; margin: 0 auto; }
.fn__logo { flex: none; display: flex; align-items: center; line-height: 0; }
.fn__logo img { width: auto; height: 2.6rem; filter: brightness(0) invert(1); transition: filter .35s var(--fn-ease); }
.fn__menu { flex: 1; display: flex; }
.fn__links { position: relative; display: flex; align-items: center; }
.fn__pill { position: absolute; top: 50%; left: 0; width: 0; height: 0; border-radius: .13rem; background: rgba(185, 185, 185, .3); opacity: 0; pointer-events: none; transform: translate3d(0, -50%, 0); transition: transform .4s var(--fn-pill), width .4s var(--fn-pill), height .4s var(--fn-pill), opacity .25s ease; }
.fn__pill.is-visible { opacity: 1; }
.fn-toggle { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .38rem; padding: .5rem 1rem; border: 0; background: none; color: inherit; font-family: var(--dbl-head); font-size: .875rem; font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer; }
.fn-toggle__icon { font-size: .7rem; transition: transform .35s var(--fn-ease); }
.fn-toggle.is-open .fn-toggle__icon { transform: rotate(180deg); }

/* Button: dark tile with a red rim and a glowing icon square. */
.fn__btn { position: relative; display: flex; flex: none; align-items: center; gap: .75rem; padding: .38rem .38rem .38rem .75rem; overflow: hidden; border: 1px solid rgba(255, 90, 97, .6); border-radius: .31rem; background: #1a1012; color: #fff; font-family: var(--dbl-head); font-size: .875rem; font-weight: 600; line-height: 1.45; text-decoration: none; box-shadow: 0 1px 5px rgba(0, 0, 0, .2), inset 0 0 5px 1px rgba(0, 0, 0, .3), 0 0 0 1.5px #120b0c, inset 0 1px 4px rgba(255, 255, 255, .1), inset .5px 0 6px rgba(216, 8, 16, .12); }
.fn__btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, rgba(16, 25, 25, 0), rgba(216, 8, 16, .25)); opacity: .5; pointer-events: none; transition: opacity .4s ease; }
.fn__btn:hover::before { opacity: 1; }
.fn__btn span { position: relative; }
.fn__btn-ico { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .25rem; background: #fff; color: #0c0e13; font-size: 1rem; }

/* Mega drop. */
.fn__drop { position: absolute; top: 100%; left: 0; right: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); transition: opacity .45s ease, clip-path .45s var(--fn-ease), height var(--fn-dur) var(--fn-ease); }
.fn.is-open .fn__drop { opacity: 1; pointer-events: auto; clip-path: inset(0 0 0% 0); }
.fn__drop-bg { position: absolute; inset: 0; border-bottom: 1px solid #eee; background: #fff; }
.fn-panel { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; transform: translate3d(0, 0, 0); transition: transform var(--fn-dur) var(--fn-ease); will-change: transform; }
.fn-panel.is-active, .fn-panel.is-leaving { visibility: visible; }
.fn-panel.is-leaving { pointer-events: none; }
.fn-panel__in { display: flex; justify-content: space-between; gap: 1.5rem; width: calc(100% - clamp(1.25rem, .6667rem + 2.9167vw, 3rem) * 2); max-width: 80rem; margin: 0 auto; padding: 2.5rem 0 2.5rem; color: #242424; }
.fn-col { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.fn-col__title { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; padding: 0 1rem; color: #6b6b6b; font-family: var(--dbl-head); font-size: .75rem; font-weight: 500; letter-spacing: .06em; line-height: 1; text-transform: uppercase; }
.fn-col__rule { width: 100%; height: 1px; background: rgba(30, 34, 39, .1); }
.fn-col__links { display: flex; flex-direction: column; gap: .25rem; }
.fn-mlink { display: flex; align-items: center; gap: .75rem; padding: .63rem 1rem; border-radius: .25rem; color: #242424; font-family: var(--dbl-head); font-size: .95rem; font-weight: 500; line-height: 1.1; text-decoration: none; transition: background-color .3s; }
.fn-mlink:hover { background: #f1f1f1; }
.fn-mlink__ico { display: grid; flex: none; place-items: center; width: 1.5rem; height: 1.5rem; color: #d80810; font-size: 1.05rem; }
.fn-cta { display: flex; flex: none; flex-direction: column; width: 16rem; overflow: hidden; border-radius: .38rem; background: #f4f4f4; color: #25281e; text-decoration: none; }
.fn-cta__img { display: block; height: 10rem; overflow: hidden; }
.fn-cta__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.fn-cta:hover .fn-cta__img img { transform: scale(1.05); }
.fn-cta__body { position: relative; display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1rem 2.5rem 1rem 1rem; }
.fn-cta__body b { font-family: var(--dbl-head); font-size: 1rem; font-weight: 600; }
.fn-cta__body span { color: #383d31; font-family: var(--dbl-body); font-size: .85rem; opacity: .75; }
.fn-cta__body i { position: absolute; top: 1rem; right: 1rem; color: #d80810; transition: transform .3s ease; }
.fn-cta:hover .fn-cta__body i { transform: rotate(45deg); }

/* Light state while a panel is open. */
.fn.is-open { border-color: #fafafa; background: #fafafa; color: #242424; }
.fn.is-open .fn__logo img { filter: none; }
.fn.is-open .fn__pill { background: rgba(185, 185, 185, .3); }
.fn-veil { position: fixed; inset: 0; z-index: 999; background: rgba(10, 10, 12, .25); opacity: 0; pointer-events: none; transition: opacity .4s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.fn-open .fn-veil { opacity: 1; pointer-events: auto; }

/* Mobile. */
.fn__burger { display: none; position: relative; width: 2.6rem; height: 2.6rem; margin-left: auto; border: 1px solid rgba(255, 255, 255, .2); border-radius: .25rem; background: none; cursor: pointer; }
.fn__burger span { position: absolute; left: 25%; width: 50%; height: 1.5px; background: currentColor; transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
.fn__burger span:nth-child(1) { top: 34%; }
.fn__burger span:nth-child(2) { top: 50%; }
.fn__burger span:nth-child(3) { top: 66%; }
.fn.is-mobile-open .fn__burger span:nth-child(1) { transform: translateY(.42rem) rotate(45deg); }
.fn.is-mobile-open .fn__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.fn.is-mobile-open .fn__burger span:nth-child(3) { transform: translateY(-.42rem) rotate(-45deg); }
.fn-m { display: none; }

@media (max-width: 991px) {
    .fn__menu, .fn__bar > .fn__btn, .fn__drop { display: none; }
    .fn__burger { display: block; color: inherit; }
    .fn__logo img { height: 2.2rem; }
    .fn.is-mobile-open { background: #fafafa; color: #242424; border-color: #fafafa; }
    .fn.is-mobile-open .fn__logo img { filter: none; }
    .fn.is-mobile-open .fn__burger { border-color: rgba(0, 0, 0, .15); }
    .fn-m { position: absolute; top: 100%; left: 0; right: 0; display: block; height: 0; overflow: hidden; background: #fafafa; transition: height .45s cubic-bezier(.22, 1, .36, 1); }
    .fn.is-mobile-open .fn-m { height: calc(100dvh - 100%); overflow-y: auto; }
    .fn-m__in { display: flex; flex-direction: column; gap: 0; padding: 1rem clamp(1.25rem, 5vw, 3rem) 2rem; }
    .fn-m__toggle, .fn-m__link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0; border: 0; border-bottom: 1px solid #e6e6e6; background: none; color: #242424; font-family: var(--dbl-head); font-size: 1.15rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
    .fn-m__toggle i { font-size: .8rem; transition: transform .35s ease; }
    .fn-m__toggle[aria-expanded='true'] i { transform: rotate(180deg); }
    .fn-m__acc { height: 0; overflow: hidden; transition: height .4s cubic-bezier(.22, 1, .36, 1); }
    .fn-m__acc-in { display: flex; flex-direction: column; padding: .25rem 0 .75rem; }
    .fn-m__sub { padding: .55rem 0 .55rem .75rem; color: #555; font-family: var(--dbl-body); font-size: .95rem; text-decoration: none; }
    .fn__btn--block { justify-content: space-between; margin-top: 1.5rem; padding: .6rem .6rem .6rem 1rem; }
    body.fn-open .fn-veil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fn, .fn__drop, .fn-panel, .fn__pill, .fn-m, .fn-m__acc { transition: none; }
}

/* ============================================================ AI + humans */
/* After the reference: a dark stage (black into Cloudi5 red, sparkles, a
   glowing red horizon) with a team around a table; a centred heading whose
   words rise in one by one, the last phrase in italic gradient; and a
   carousel bent round a 3D arc — the centre item large with its line,
   the others smaller, further back and fading. */
.rh { position: relative; z-index: 10; display: flex; flex-direction: column; width: 100%; aspect-ratio: 1440 / 1061; min-height: 640px; margin-bottom: 56px; overflow-x: clip; border-radius: 50% 50% 0 0 / 80px 80px 0 0; background: #050203; color: #f9f9f9; }
.rh__bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; background: radial-gradient(90% 55% at 50% 0%, rgba(120, 6, 14, .55) 0%, transparent 70%), linear-gradient(180deg, #120305 0%, #050203 55%, #0a0102 100%); }
.rh__video { position: absolute; left: 50%; top: 14%; width: min(62%, 900px); aspect-ratio: 16 / 9; object-fit: cover; transform: translateX(-50%); opacity: .9; filter: saturate(.85) contrast(1.05) brightness(.8); -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); }
.rh__video { mix-blend-mode: screen; }
.rh__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 30% at 50% 38%, rgba(255, 140, 60, .18) 0%, transparent 70%); pointer-events: none; }

/* Red horizon curving up at the bottom. */
.rh__glow { position: absolute; left: -10%; right: -10%; bottom: -38%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 30, 30, .95) 0%, rgba(216, 8, 16, .75) 35%, rgba(120, 4, 10, .35) 65%, transparent 100%); filter: blur(10px); }
.rh__glow::after { content: ''; position: absolute; left: 6%; right: 6%; top: 18%; height: 2px; border-radius: 50%; background: rgba(255, 200, 200, .55); filter: blur(1px); }

/* Four-point sparkles that slowly twinkle. */
.rh__spark { position: absolute; width: 22px; height: 22px; background: rgba(216, 8, 16, .55); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: rh-twinkle 3.6s ease-in-out infinite; }
.rh__spark--sm { width: 10px; height: 10px; animation-delay: -1.4s; }
@keyframes rh-twinkle { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }

.rh__content { position: relative; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 28px 24px 232px; }
.rh__title { width: 100%; max-width: 819px; margin: 0 auto; color: #f9f9f9; font-family: var(--dbl-head); font-size: 56px; font-weight: 500; line-height: 120%; letter-spacing: -1.12px; text-align: center; overflow: visible; }
.rh__word { display: inline-block; margin-bottom: -.15em; padding: 0 .05em .15em 0; white-space: pre; opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.25, .46, .45, .94), transform .6s cubic-bezier(.25, .46, .45, .94); transition-delay: calc(var(--i) * 50ms); }
.rh.is-in .rh__word { opacity: 1; transform: none; }
.rh__word--hl { margin-bottom: -.18em; padding: 0 .08em .18em 0; background: linear-gradient(324deg, #ff8a8f 6.77%, #fff 102.62%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--dbl-serif); font-style: italic; font-weight: 400; letter-spacing: -.42px; }

/* Carousel on an arc. */
.rh__area { position: relative; width: calc(100% + 48px); margin: 100px -24px 0; overflow-x: clip; perspective: 1200px; perspective-origin: 50% 60%; }
.rh__fade { position: absolute; top: -120px; bottom: 84px; z-index: 50; width: 120px; pointer-events: none; }
.rh__fade--left { left: 0; background: linear-gradient(90deg, #050203 10%, rgba(5, 2, 3, 0)); }
.rh__fade--right { right: 0; background: linear-gradient(270deg, #050203 10%, rgba(5, 2, 3, 0)); }
.rh__swiper { width: 100%; overflow: visible; transform-style: preserve-3d; }
.rh__track { display: flex; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.25, 1, .5, 1); will-change: transform; }
.rh__track.no-anim { transition: none; }
.rh__slide { display: flex; flex: none; justify-content: center; transform-style: preserve-3d; backface-visibility: hidden; transition: transform .6s cubic-bezier(.25, 1, .5, 1), opacity .6s; will-change: transform, opacity; }
.rh__track.no-anim .rh__slide { transition: none; }
.rh__item { display: flex; flex-direction: column; align-items: center; text-align: center; opacity: .85; transition: all .4s; }
.rh__row { display: flex; align-items: center; justify-content: center; gap: 7px; }
.rh__star { flex: none; width: 17px; height: 17px; background: rgba(255, 255, 255, .55); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transition: all .4s; }
.rh__name { margin: 0; color: #fff; font-family: var(--dbl-head); font-size: 20px; font-weight: 500; line-height: 150%; letter-spacing: -.1px; white-space: nowrap; transition: font-size .4s; }
.rh__desc { width: 337px; max-width: 100%; height: 0; margin: 8px auto 0; overflow: hidden; color: #fff; font-family: var(--dbl-body); font-size: 16px; font-weight: 400; line-height: 172%; letter-spacing: .16px; opacity: 0; transition: opacity .4s; }
.rh__slide.is-active .rh__item { opacity: 1; }
.rh__slide.is-active .rh__row { gap: 18px; }
.rh__slide.is-active .rh__star { width: 27px; height: 27px; background: #ff2a33; }
.rh__slide.is-active .rh__name { font-size: 28px; line-height: 125%; letter-spacing: -.28px; }
.rh__slide.is-active .rh__desc { height: auto; opacity: 1; }

@media (max-width: 1199px) { .rh__slide { transform: none !important; } }
@media (max-width: 991px) {
    .rh__title { font-size: 40px; line-height: 125%; letter-spacing: -.64px; }
    .rh__area { margin-top: 140px; }
}
@media (max-width: 767px) {
    .rh { aspect-ratio: 360 / 711; min-height: 600px; border-radius: 50% 50% 0 0 / 30px 30px 0 0; }
    .rh__video { top: 24%; width: 120%; }
    .rh__glow { bottom: -20%; height: 45%; }
    .rh__content { justify-content: flex-start; padding: 70px 16px 120px; }
    .rh__title { font-size: 32px; letter-spacing: -.64px; }
    .rh__area { width: 100%; margin: auto 0 0; overflow: visible; perspective: 800px; }
    .rh__fade { display: none; }
    .rh__name, .rh__slide.is-active .rh__name { font-size: 24px; letter-spacing: -.24px; line-height: 125%; }
    .rh__desc { width: 100%; font-size: 14px; line-height: 165%; }
}

@media (prefers-reduced-motion: reduce) {
    .rh__word { opacity: 1; transform: none; transition: none; }
    .rh__spark { animation: none; }
    .rh__track, .rh__slide { transition: none; }
}

body.home1 .rh__title, body.home1 .rh__word { letter-spacing: -1.12px !important; }
body.home1 .rh__word--hl { font-family: var(--dbl-serif) !important; letter-spacing: -.42px !important; }

/* ======================================================= Let's create */
/* After the reference: a dark rounded panel inset from the page edges;
   centred heading and intro; below, two columns — the founder's square
   photo with social icons on it, a short note and a WhatsApp pill; and a
   booking panel (here a day/time picker and short form). */
.cc { margin: 0 2.5rem 6rem; padding: 7rem 1.25rem; border-radius: 1.25rem; background: #1a1a1a; color: #f6f6f6; }
.cc__head { display: flex; flex-direction: column; align-items: center; max-width: 72rem; margin: 0 auto 4rem; text-align: center; }
.cc__h { max-width: 30ch; margin: 0 0 1.5rem; font-family: var(--dbl-head); font-size: 3rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.cc__p { max-width: 60ch; margin: 0; color: rgba(246, 246, 246, .75); font-family: var(--dbl-body); font-size: 1.125rem; line-height: 1.5; }
.cc__wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; max-width: 62.5rem; margin: 0 auto; }

.cc__photo { position: relative; aspect-ratio: 1; margin-bottom: 1.25rem; overflow: hidden; border-radius: 1rem; background: #2a2a2a; }
.cc__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.cc__photo:hover img { transform: scale(1.04); }
.cc__socials { position: absolute; right: 1.25rem; bottom: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: .5rem .75rem; border-radius: 999px; background: rgba(10, 10, 12, .55); list-style: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cc__socials a { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: #fff; font-size: 1.05rem; text-decoration: none; transition: color .2s; }
.cc__socials a:hover { color: #ff3b42; }
.cc__text { margin: 0 0 2rem; color: rgba(246, 246, 246, .8); font-family: var(--dbl-body); font-size: 1rem; line-height: 1.6; }
.cc__text strong { color: #fff; font-weight: 600; }
.cc__text a { color: #fff; text-decoration: underline; text-decoration-color: #d80810; text-underline-offset: 3px; }
.cc__wa { display: inline-flex; align-items: center; gap: .5em; padding: 1em 1.5em; border-radius: 30em; background: #fcfcfc; color: #1a1a1a; font-family: var(--dbl-head); font-weight: 500; line-height: 1; text-decoration: none; transition: color .2s, background-color .2s; }
.cc__wa i { color: #25d366; font-size: 1.2rem; transition: color .2s; }
.cc__wa:hover { background: #d80810; color: #fff; }
.cc__wa:hover i { color: #fff; }

/* Booking panel. */
.cc__form { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; background: #222; }
.cc__form-head { display: flex; flex-direction: column; gap: .35rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cc__form-head b { font-family: var(--dbl-head); font-size: 1.2rem; font-weight: 600; }
.cc__form-head span { color: rgba(246, 246, 246, .6); font-family: var(--dbl-body); font-size: .85rem; }
.cc__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.cc__days label, .cc__slots label { position: relative; cursor: pointer; }
.cc__days input, .cc__slots input { position: absolute; opacity: 0; pointer-events: none; }
.cc__days span { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .25rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: .6rem; background: rgba(255, 255, 255, .04); font-family: var(--dbl-body); font-size: .72rem; color: rgba(246, 246, 246, .6); transition: all .2s; }
.cc__days span b { color: #fff; font-family: var(--dbl-head); font-size: 1.15rem; font-weight: 600; }
.cc__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.cc__slots span { display: block; padding: .55rem .25rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: .6rem; background: rgba(255, 255, 255, .04); color: #f6f6f6; font-family: var(--dbl-body); font-size: .8rem; text-align: center; transition: all .2s; }
.cc__days label:hover span, .cc__slots label:hover span { border-color: rgba(255, 255, 255, .3); }
.cc__days input:checked + span, .cc__slots input:checked + span { border-color: #d80810; background: rgba(216, 8, 16, .18); color: #fff; }
.cc__days input:focus-visible + span, .cc__slots input:focus-visible + span { outline: 2px solid #d80810; outline-offset: 2px; }
.cc__fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cc__field { display: flex; flex-direction: column; gap: .35rem; color: rgba(246, 246, 246, .7); font-family: var(--dbl-body); font-size: .78rem; }
.cc__field--full { grid-column: 1 / -1; }
.cc__field input, .cc__field textarea { width: 100%; padding: .7rem .8rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: .6rem; background: #1a1a1a; color: #fff; font: inherit; font-size: .95rem; resize: vertical; transition: border-color .2s; }
.cc__field input:focus, .cc__field textarea:focus { outline: none; border-color: #d80810; }
.cc__field.is-invalid input { border-color: #ff5a61; }
.cc__submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.5rem; border: 0; border-radius: 30em; background: #d80810; color: #fff; font-family: var(--dbl-head); font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.cc__submit:hover { background: #fff; color: #1a1a1a; }
.cc__status { margin: 0; padding: .75rem 1rem; border-radius: .6rem; background: rgba(46, 224, 124, .12); color: #2ee07c; font-family: var(--dbl-body); font-size: .9rem; }
.cc__status.is-error { background: rgba(255, 90, 97, .12); color: #ff8a8f; }

@media (max-width: 991px) {
    .cc { margin: 0 1.75rem 4rem; padding: 5rem 1.25rem; }
    .cc__h { font-size: 2.5rem; }
}

@media (max-width: 767px) {
    .cc { margin: 0 .75rem 3rem; padding: 4rem 1rem; }
    .cc__h { font-size: 2rem; }
    .cc__p { font-size: 1rem; }
    .cc__wrap { grid-template-columns: 1fr; gap: 2.5rem; }
    .cc__fields { grid-template-columns: 1fr; }
    .cc__days { grid-template-columns: repeat(5, 1fr); }
    .cc__slots { grid-template-columns: repeat(2, 1fr); }
}

/* Let's create: black into Cloudi5 red. */
.cc { position: relative; overflow: hidden; isolation: isolate; background:
    radial-gradient(60% 55% at 100% 100%, rgba(216, 8, 16, .55) 0%, rgba(140, 4, 10, .25) 45%, transparent 75%),
    radial-gradient(45% 40% at 0% 0%, rgba(216, 8, 16, .22) 0%, transparent 70%),
    linear-gradient(160deg, #0b0607 0%, #050304 45%, #1a0406 100%); }
.cc::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); pointer-events: none; }
.cc__form { border-color: rgba(255, 90, 97, .18); background: rgba(10, 6, 7, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cc__field input, .cc__field textarea { background: rgba(0, 0, 0, .45); }
.cc__days span, .cc__slots span { background: rgba(255, 255, 255, .03); }
.cc { background:
    radial-gradient(55% 45% at 100% 100%, rgba(216, 8, 16, .7) 0%, rgba(140, 4, 10, .3) 45%, transparent 75%),
    radial-gradient(50% 40% at 0% 0%, rgba(216, 8, 16, .42) 0%, rgba(120, 4, 10, .15) 45%, transparent 75%),
    radial-gradient(40% 30% at 85% 15%, rgba(216, 8, 16, .18) 0%, transparent 70%),
    linear-gradient(160deg, #0b0607 0%, #050304 45%, #1a0406 100%); }

/* Founder note: a frosted card with a red edge, a large quote mark,
   the message in italic serif and a signature-style sign-off. */
.cc__note { position: relative; margin: 0 0 2rem; padding: 1.5rem 1.5rem 1.25rem 1.75rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1rem; background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cc__note::before { content: ''; position: absolute; top: 1.1rem; bottom: 1.1rem; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #ff3b42, #d80810 60%, rgba(216, 8, 16, 0)); }
.cc__note-mark { position: absolute; top: -.6rem; right: 1rem; color: rgba(216, 8, 16, .35); font-family: var(--dbl-serif); font-size: 6rem; line-height: 1; pointer-events: none; }
.cc__note-text { position: relative; margin: 0; color: #f6f6f6; font-family: var(--dbl-serif); font-size: 1.3rem; font-style: italic; font-weight: 400; line-height: 1.45; }
.cc__note-text em { color: #ff8a8f; font-style: italic; }
.cc__note-by { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .1rem 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed rgba(255, 255, 255, .15); }
.cc__note-sign { grid-column: 1; color: #fff; font-family: var(--dbl-serif); font-size: 1.6rem; font-style: italic; line-height: 1; letter-spacing: .01em; }
.cc__note-role { grid-column: 1; color: rgba(246, 246, 246, .6); font-family: var(--dbl-body); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.cc__note-link { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border: 1px solid rgba(255, 90, 97, .5); border-radius: 999px; color: #fff; font-family: var(--dbl-head); font-size: .85rem; font-weight: 600; text-decoration: none; transition: background .25s, border-color .25s; }
.cc__note-link:hover { border-color: #d80810; background: #d80810; }
.cc__note-link i { transition: transform .25s; }
.cc__note-link:hover i { transform: translateX(3px); }
body.home1 .cc__note-text, body.home1 .cc__note-text em, body.home1 .cc__note-sign, body.home1 .cc__note-mark { font-family: var(--dbl-serif) !important; }
@media (max-width: 575px) {
    .cc__note-text { font-size: 1.1rem; }
    .cc__note-by { grid-template-columns: 1fr; }
    .cc__note-link { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .75rem; }
}

/* ================================================== Invitation envelope */
/* Closed envelope -> seal pops -> flap opens -> letter rises out ->
   envelope drops away -> message types itself -> signature appears.
   Steps are classes set by home1.js: is-seal, is-open, is-out, is-done, is-typed. */
.inv { position: relative; margin: 0 0 2rem; overflow: hidden; perspective: 1200px; border-radius: 1rem; }
.inv.is-done { overflow: visible; }

.inv__letter { position: relative; z-index: 2; padding: 1.6rem 1.6rem 1.3rem; border-radius: 1rem; background: linear-gradient(160deg, #fffaf4 0%, #fbefe4 100%); color: #2a1a14; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7); transform: translateY(calc(100% - 4.5rem)) scale(.94); transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.inv__letter::before { content: ''; position: absolute; inset: .55rem; border: 1px solid rgba(216, 8, 16, .22); border-radius: .7rem; pointer-events: none; }
.inv.is-out .inv__letter { transform: none; }
.inv__stamp { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.6rem; height: 3rem; border: 2px dashed rgba(216, 8, 16, .45); border-radius: 4px; background: #fff; transform: rotate(6deg); }
.inv__stamp img { width: 70%; }
.inv__hello { margin: 0 0 .6rem; color: #d80810; font-family: var(--dbl-head); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.inv__type { position: relative; margin: 0; padding-right: 2.5rem; font-family: var(--dbl-serif); font-size: 1.3rem; font-style: italic; line-height: 1.45; }
.inv__type em { color: #d80810; font-style: italic; }
.inv__ghost { visibility: hidden; }
.inv__typed { position: absolute; inset: 0 2.5rem 0 0; }
.inv__typed::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: #d80810; vertical-align: -.15em; animation: inv-caret .8s steps(1) infinite; }
.inv.is-typed .inv__typed::after { opacity: 0; animation: none; }
@keyframes inv-caret { 50% { opacity: 0; } }

.inv__by { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .1rem 1rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed rgba(42, 26, 20, .2); opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s cubic-bezier(.22, 1, .36, 1); }
.inv.is-typed .inv__by { opacity: 1; transform: none; }
.inv__sign { grid-column: 1; font-family: var(--dbl-serif); font-size: 1.7rem; font-style: italic; line-height: 1; }
.inv__role { grid-column: 1; color: #7a6258; font-family: var(--dbl-body); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.inv__link { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border-radius: 999px; background: #d80810; color: #fff; font-family: var(--dbl-head); font-size: .85rem; font-weight: 600; text-decoration: none; transition: background .25s; }
.inv__link:hover { background: #1a0d0b; }

/* The envelope sits over the bottom of the card. */
.inv__env { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 10.5rem; pointer-events: none; transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .5s; }
.inv.is-out .inv__env { opacity: 0; transform: translateY(40%); transition-delay: .5s; }
.inv.is-done .inv__env { visibility: hidden; }
.inv__back { position: absolute; inset: 0; z-index: -2; border-radius: .9rem; background: #5e060c; }
.inv__pocket { position: absolute; inset: 0; z-index: 2; border-radius: 0 0 .9rem .9rem; background: linear-gradient(160deg, #a80a12 0%, #6e0810 100%); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); }
.inv__flap { position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 62%; background: linear-gradient(180deg, #c50b14 0%, #8e0a12 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.inv.is-open .inv__flap { z-index: -1; transform: rotateX(180deg); }
.inv__seal { position: absolute; left: 50%; top: 62%; z-index: 5; display: grid; place-items: center; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff5a61, #b50a12 60%, #7a0610); color: #ffd7d9; font-family: var(--dbl-serif); font-size: 1rem; font-style: italic; font-weight: 600; box-shadow: 0 6px 14px rgba(0, 0, 0, .4), inset 0 -2px 4px rgba(0, 0, 0, .3); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .35s; }
.inv:not(.is-seal) .inv__seal { animation: inv-pulse 1.8s ease-in-out infinite; }
@keyframes inv-pulse { 50% { transform: scale(1.08); } }
.inv.is-seal .inv__seal { opacity: 0; transform: scale(1.6) rotate(25deg); }

body.home1 .inv__type, body.home1 .inv__type em, body.home1 .inv__sign, body.home1 .inv__seal { font-family: var(--dbl-serif) !important; }

@media (max-width: 575px) {
    .inv__type { font-size: 1.1rem; }
    .inv__by { grid-template-columns: 1fr; }
    .inv__link { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .75rem; }
}
body.home1 .inv__typed, body.home1 .inv__ghost, body.home1 .inv__typed em, body.home1 .inv__ghost em { font-family: var(--dbl-serif) !important; }

/* ======================================== Invitation: "An invitation to Grow." */
/* Dark-to-red card stock with a dotted grid and gold accents. The big word
   rises letter by letter when the card comes out of the envelope; the growth
   chart draws itself (bars grow, line traces upward, arrow + spark) before
   the message types. */
.inv__letter { background:
        radial-gradient(70% 60% at 100% 0%, rgba(255, 90, 97, .28) 0%, transparent 65%),
        radial-gradient(1px 1px at 1px 1px, rgba(255, 255, 255, .12) 1px, transparent 0) 0 0 / 14px 14px,
        linear-gradient(155deg, #1a0a0b 0%, #120708 45%, #3a0609 100%);
    color: #f7ece4; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08); }
.inv__letter::before { border-color: rgba(255, 213, 138, .28); }
.inv__stamp { border-color: rgba(255, 213, 138, .55); background: #fffaf4; }

.inv__hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; padding-right: 2.6rem; }
.inv__headline { display: flex; flex-direction: column; }
.inv__kicker { color: #ffd58a; font-family: var(--dbl-head); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.inv__word { display: flex; margin-top: .1rem; font-family: var(--dbl-serif); font-size: clamp(3.4rem, 6vw, 4.6rem); font-style: italic; font-weight: 500; line-height: .95; letter-spacing: -.02em; }
.inv__word span { display: inline-block; background: linear-gradient(180deg, #fff 30%, #ffb3b6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; transform: translateY(60%) rotate(8deg); transition: opacity .5s, transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.inv__word .inv__dot { background: none; -webkit-text-fill-color: #ff3b42; color: #ff3b42; }
.inv.is-out .inv__word span { opacity: 1; transform: none; }
.inv.is-out .inv__word span:nth-child(1) { transition-delay: .35s; }
.inv.is-out .inv__word span:nth-child(2) { transition-delay: .45s; }
.inv.is-out .inv__word span:nth-child(3) { transition-delay: .55s; }
.inv.is-out .inv__word span:nth-child(4) { transition-delay: .65s; }
.inv.is-out .inv__word span:nth-child(5) { transition-delay: .85s; }

.inv__chart { flex: none; width: 9.5rem; height: auto; overflow: visible; }
.inv__bars rect { fill: rgba(255, 255, 255, .1); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.inv.is-done .inv__bars rect { transform: scaleY(1); }
.inv.is-done .inv__bars rect:nth-child(2) { transition-delay: .08s; }
.inv.is-done .inv__bars rect:nth-child(3) { transition-delay: .16s; }
.inv.is-done .inv__bars rect:nth-child(4) { transition-delay: .24s; }
.inv.is-done .inv__bars rect:nth-child(5) { transition-delay: .32s; fill: rgba(255, 90, 97, .35); }
.inv__line, .inv__arrow { fill: none; stroke: url(#invLine); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(255, 90, 97, .6)); }
.inv.is-done .inv__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1) .2s; }
.inv.is-done .inv__arrow { stroke-dashoffset: 0; transition: stroke-dashoffset .35s ease 1.35s; }
.inv__spark { fill: #ffd58a; opacity: 0; transform-box: fill-box; transform-origin: center; }
.inv.is-done .inv__spark { animation: inv-spark 1.8s ease-in-out 1.5s infinite; }
@keyframes inv-spark { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .4; transform: scale(1.8); } }

.inv__type { color: #f7ece4; }
.inv__type em { color: #ff8a8f; }
.inv__typed::after { background: #ffd58a; }
.inv__by { border-top-color: rgba(255, 213, 138, .22); }
.inv__sign { color: #fff; }
.inv__role { color: rgba(247, 236, 228, .6); }
.inv__link:hover { background: #fff; color: #1a0a0b; }

body.home1 .inv__word, body.home1 .inv__word span { font-family: var(--dbl-serif) !important; }

@media (max-width: 575px) {
    .inv__hero { flex-direction: column; align-items: flex-start; }
    .inv__chart { width: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .inv__word span, .inv__bars rect { opacity: 1; transform: none; transition: none; }
    .inv__line, .inv__arrow { stroke-dashoffset: 0; transition: none; }
    .inv__spark { opacity: .9; animation: none; }
}/* Draw the growth line with keyframes (transitions on stroke-dashoffset can skip). */
@keyframes inv-draw { from { stroke-dashoffset: 100px; } to { stroke-dashoffset: 0px; } }
.inv.is-done .inv__line { transition: none; animation: inv-draw 1.2s cubic-bezier(.65, 0, .35, 1) .2s both; }
.inv.is-done .inv__arrow { transition: none; animation: inv-draw .35s ease 1.35s both; }
@media (prefers-reduced-motion: reduce) { .inv.is-done .inv__line, .inv.is-done .inv__arrow { animation: none; stroke-dashoffset: 0; } }
.inv__word { line-height: 1.1; padding: 0 .12em .08em 0; }
.inv__word span { padding: 0 .04em .06em 0; }
.inv__line, .inv__arrow { stroke: #ff5a61; }
.inv__arrow { stroke: #ffd58a; }
@keyframes inv-rise { from { opacity: 0; transform: translateY(60%) rotate(8deg); } to { opacity: 1; transform: none; } }
.inv__word span { transition: none; }
.inv.is-out .inv__word span { animation: inv-rise .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.inv.is-out .inv__word span:nth-child(1) { animation-delay: .35s; }
.inv.is-out .inv__word span:nth-child(2) { animation-delay: .45s; }
.inv.is-out .inv__word span:nth-child(3) { animation-delay: .55s; }
.inv.is-out .inv__word span:nth-child(4) { animation-delay: .65s; }
.inv.is-out .inv__word span:nth-child(5) { animation-delay: .85s; }
@keyframes inv-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.inv__bars rect { transition: none; }
.inv.is-done .inv__bars rect { animation: inv-bar .6s cubic-bezier(.22, 1, .36, 1) both; }
.inv.is-done .inv__bars rect:nth-child(2) { animation-delay: .08s; }
.inv.is-done .inv__bars rect:nth-child(3) { animation-delay: .16s; }
.inv.is-done .inv__bars rect:nth-child(4) { animation-delay: .24s; }
.inv.is-done .inv__bars rect:nth-child(5) { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .inv__word span, .inv__bars rect { animation: none !important; opacity: 1; transform: none; } }

/* ======================================================== Specialists */
/* After the reference, on a light background: a big heading, then a slow,
   endless row of photos alternating tall portraits and shorter office shots,
   centred on one line. Hover pauses the row and lifts the photo. */
.sp { padding: 7rem 0 6rem; overflow: hidden; background: #fff; color: #0d0d0d; }
.sp__head { width: calc(100% - clamp(1.25rem, .6667rem + 2.9167vw, 3rem) * 2); max-width: 1272px; margin: 0 auto 4.5rem; }
.sp__h { max-width: 46%; margin: 0; font-family: var(--dbl-head); font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; }
.sp__marquee { overflow: hidden; }
.sp__track { display: flex; align-items: center; gap: 30px; width: max-content; animation: sp-scroll 60s linear infinite; }
.sp__marquee:hover .sp__track { animation-play-state: paused; }
@keyframes sp-scroll { to { transform: translateX(calc(-50% - 15px)); } }
.sp__item { flex: none; overflow: hidden; border-radius: 1rem; background: #eee; transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s; }
.sp__item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.sp__item--big { width: 380px; height: 548px; }
.sp__item--small { width: 370px; height: 400px; }
.sp__item:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .45); }
.sp__item:hover img { transform: scale(1.05); }

@media (max-width: 991px) {
    .sp { padding: 5rem 0 4rem; }
    .sp__h { max-width: none; }
    .sp__item--big { width: 280px; height: 448px; }
    .sp__item--small { width: 270px; height: 320px; }
}
@media (max-width: 575px) {
    .sp__head { margin-bottom: 2.5rem; }
    .sp__track { gap: 16px; animation-duration: 40s; }
    @keyframes sp-scroll { to { transform: translateX(calc(-50% - 8px)); } }
    .sp__item--big { width: 220px; height: 340px; }
    .sp__item--small { width: 210px; height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
    .sp__track { animation: none; }
    .sp__marquee { overflow-x: auto; scrollbar-width: none; }
}/* Specialists: smaller photos. */
.sp__track { gap: 20px; }
@keyframes sp-scroll { to { transform: translateX(calc(-50% - 10px)); } }
.sp__item--big { width: 260px; height: 360px; }
.sp__item--small { width: 250px; height: 270px; }
@media (max-width: 991px) { .sp__item--big { width: 220px; height: 310px; } .sp__item--small { width: 210px; height: 230px; } }
@media (max-width: 575px) { .sp__track { gap: 14px; } .sp__item--big { width: 170px; height: 240px; } .sp__item--small { width: 160px; height: 180px; } }

/* Landscape photos get a wide tile so group shots aren't cropped to a sliver. */
.sp__item--wide { width: 380px; height: 285px; }
.sp__item--wide img { object-position: center 40%; }
@media (max-width: 991px) { .sp__item--wide { width: 320px; height: 240px; } }
@media (max-width: 575px) { .sp__item--wide { width: 240px; height: 180px; } }

/* ======================================================== Have questions */
/* After the reference: heading and a dark call card on the left (sticky on
   desktop), an accordion of questions on the right. The card uses the
   black-to-red brand gradient with three overlapping team faces. */
.hq { padding: 7.5rem 0; background: #fff; color: #0d0d0d; }
.hq__wrap { display: grid; grid-template-columns: 1fr 1.75fr; gap: 0 100px; align-items: start; width: calc(100% - clamp(1.25rem, .6667rem + 2.9167vw, 3rem) * 2); max-width: 1272px; margin: 0 auto; }
.hq__side { position: sticky; top: 100px; }
.hq__h { margin: 0; font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.hq__card { position: relative; min-height: 238px; margin-top: 40px; padding: 24px; overflow: hidden; border-radius: 1.25rem; color: #fff;
    background:
        radial-gradient(80% 70% at 100% 100%, rgba(216, 8, 16, .55) 0%, transparent 70%),
        radial-gradient(1px 1px at 1px 1px, rgba(255, 255, 255, .1) 1px, transparent 0) 0 0 / 14px 14px,
        linear-gradient(150deg, #0d0d0d 0%, #1a0a0b 55%, #5e060c 100%); }
.hq__faces { display: flex; align-items: center; }
.hq__faces img { width: 52px; height: 52px; object-fit: cover; object-position: center 20%; border: 2px solid #1a0a0b; border-radius: 50%; background: #2a1a1a; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.hq__faces img + img { margin-left: -18px; }
.hq__faces img:hover { position: relative; z-index: 1; transform: translateY(-4px) scale(1.08); }
.hq__lead { max-width: 280px; margin: 14px 0 0; color: #fff; font-size: 1.5rem; font-weight: 500; line-height: 1.25; }
.hq__btn { display: inline-flex; align-items: center; gap: .55rem; margin-top: 24px; padding: 14px 22px; border-radius: 100px; background: #d80810; color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background .3s, color .3s; }
.hq__btn i { transition: transform .3s; }
.hq__btn:hover { background: #fff; color: #0d0d0d; }
.hq__btn:hover i { transform: translate(2px, -2px); }

.hq__item { border-bottom: 1.5px solid #d4d7d9; }
.hq__q { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; width: 100%; padding: 20px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.hq__q span { font-size: 1.375rem; font-weight: 500; line-height: 1.4; }
.hq__arrow { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #edf0f2; color: #0d0d0d; transition: background .3s, color .3s, transform .45s cubic-bezier(.22, 1, .36, 1); }
.hq__q:hover .hq__arrow { background: #0d0d0d; color: #fff; }
.hq__item.is-open .hq__arrow { background: #d80810; color: #fff; transform: rotate(-180deg); }
.hq__a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s cubic-bezier(.165, .84, .44, 1), opacity .4s; }
.hq__item.is-open .hq__a { grid-template-rows: 1fr; opacity: 1; }
.hq__a > div { overflow: hidden; }
.hq__a p { margin: 0; padding: 0 60px 24px 0; color: #4b5154; font-size: 1.0625rem; line-height: 1.6; }

@media (max-width: 991px) {
    .hq { padding: 5rem 0; }
    .hq__wrap { grid-template-columns: 1fr; gap: 2.5rem; }
    .hq__side { position: static; }
    .hq__card { min-height: 0; margin-top: 24px; }
}
@media (max-width: 575px) {
    .hq__q span { font-size: 1.125rem; }
    .hq__arrow { width: 38px; height: 38px; }
    .hq__a p { padding-right: 0; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hq__a, .hq__arrow { transition: none; }
}

/* ======================================== Menu, after the 3minds bar */
/* See-through dark glass so the hero shows under it; links centred with
   slash dividers; a glowing "AI" pill; a white call-to-action with a red
   arrow box (same as the hero button). Turns solid white when a mega panel
   is open, as before. */
.fn { padding: .7rem 0; border-bottom-color: rgba(255, 255, 255, .1); background: rgba(12, 6, 8, .55); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.fn.is-scrolled, .fn.is-mobile-open { background: rgba(12, 6, 8, .85); }
.fn__menu { justify-content: center; }
.fn-toggle { padding: .5rem 1.05rem; font-size: .9rem; }
.fn__links > .fn-toggle + .fn-toggle::before,
.fn__links > .fn-toggle + .fn-ai::before { content: '/'; position: absolute; left: 0; top: 50%; color: rgba(255, 255, 255, .28); font-weight: 300; transform: translate(-50%, -52%) skewX(-8deg); pointer-events: none; }
.fn.is-open .fn__links > .fn-toggle + .fn-toggle::before,
.fn.is-open .fn__links > .fn-toggle + .fn-ai::before { color: rgba(0, 0, 0, .25); }

.fn-ai { position: relative; z-index: 1; margin-left: 1.35rem; padding: .45rem 1rem; border-radius: 100px; background: #0c0607; color: #fff; font-family: var(--dbl-head); font-size: .88rem; font-weight: 600; line-height: 1.3; text-decoration: none; isolation: isolate; }
.fn-ai::before { left: -.68rem !important; }
.fn-ai::after { content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--fn-ai-a, 0deg), #d80810, #ff8a8f, #3a0609, #d80810); animation: fn-ai-spin 4s linear infinite; }
.fn-ai span { position: relative; display: block; padding: 0; }
.fn-ai i { margin-right: .3rem; color: #ff5a61; font-size: .8rem; }
.fn-ai > b { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #0c0607; }
.fn-ai:hover > b { background: #1c0a0c; }
@property --fn-ai-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes fn-ai-spin { to { --fn-ai-a: 360deg; } }
.fn.is-open .fn-ai { color: #fff; }

.fn__btn { gap: .85rem; padding: 4px 4px 4px 1rem; border: 0; border-radius: 4px; background: #fff; color: #0d0d0d; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; }
.fn__btn::before { display: none; }
.fn__btn-ico { position: relative; width: 2.15rem; height: 2.15rem; overflow: hidden; border-radius: 3px; background: #d80810; color: #fff; }
.fn__btn-ico i { position: absolute; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.fn__btn-ico i + i { transform: translateX(-260%); }
.fn__btn:hover .fn__btn-ico i:first-child { transform: translateX(260%); }
.fn__btn:hover .fn__btn-ico i + i { transform: none; }
.fn__btn:hover { background: #f1f1f1; }
.fn.is-open .fn__btn { background: #0d0d0d; color: #fff; }
@media (max-width: 1180px) { .fn-ai { display: none; } }

/* The AI pill shows only a ring. */
.fn-ai > b { inset: 1.5px; z-index: 0; }
.fn-ai span { z-index: 1; }
/* Without the full-bleed hero under it, the bar goes back to solid dark (still blurs when scrolling over content). */
.fn, .fn.is-scrolled, .fn.is-mobile-open { background: rgba(12, 14, 19, .94); }

/* ======================================== Glass menu */
/* Frosted bar over the hero: light tint, strong blur, a bright top edge and
   a hairline below. The hero tucks under it so its glow shows through. Past
   the hero the glass darkens (is-scrolled) so white links stay readable over
   light sections. Open mega panel still turns it solid white. */
.fn, .fn.is-mobile-open { background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .03) 100%), rgba(12, 14, 19, .18);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 30px -18px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
    transition: background-color .35s var(--fn-ease), background .35s var(--fn-ease), border-color .35s var(--fn-ease), color .35s var(--fn-ease); }
.fn.is-scrolled, .fn.is-scrolled.is-mobile-open { background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%), rgba(12, 14, 19, .72); }
.fn.is-open { background: #fafafa; box-shadow: none; }
.fn-ai > b { background: rgba(12, 6, 7, .75); }

.dbl-first { margin-top: calc(-1 * var(--fn-h, 66px)); }
.dbl-hero { padding-top: calc(7.5rem + var(--fn-h, 66px)); }
@media (min-width: 768px) {
    .dbl-first { min-height: max(var(--dbl-first-min), 100svh); }
}
@media (max-width: 48rem) {
    .dbl-hero { padding-top: var(--fn-h, 64px); }
}
.fn.is-scrolled, .fn.is-scrolled.is-mobile-open { background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 100%), rgba(10, 11, 16, .82); }

/* Client logos always in their own colours; hover gives a small lift. */
.dbl-clients__item:hover img { opacity: 1; visibility: visible; transform: scale(1.06); }

/* ======================================================== Hero (flowtrix layout) */
/* Dark stage with a red orb top right and a red-to-blue floor glow. Short
   copy on the left; the last line types itself (AI product / mobile app /
   web platform). On the right a particle canvas spells AI, App, Web in step
   with the typed line. */
.fh { position: relative; flex: auto; display: flex; align-items: center; min-height: max(760px, calc(100svh - 140px)); padding: calc(var(--fn-h, 66px) + 3.5rem) 0 5rem; overflow: hidden; background: #07070a; color: #fff; isolation: isolate; }
.fh__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fh__bg::before { content: ''; position: absolute; inset: 0; background:
        radial-gradient(50% 60% at 0% 100%, rgba(0, 48, 112, .45) 0%, transparent 70%),
        radial-gradient(1px 1px at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0) 0 0 / 22px 22px; }
.fh__orb { position: absolute; top: -18%; right: -8%; width: min(46vw, 640px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 30% 70%, rgba(7, 7, 10, 1) 0%, rgba(7, 7, 10, .9) 38%, rgba(120, 4, 10, .7) 62%, #d80810 82%, #ff6a70 100%);
    filter: blur(2px); opacity: .9; animation: fh-orb 14s ease-in-out infinite alternate; }
.fh__orb::after { content: ''; position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(216, 8, 16, .35), transparent); filter: blur(30px); z-index: -1; }
@keyframes fh-orb { to { transform: translate(-3%, 4%) scale(1.04); } }
.fh__floor { position: absolute; left: -10%; right: -10%; bottom: -120px; height: 240px; border-radius: 50%; background: linear-gradient(90deg, rgba(0, 72, 168, .7) 0%, rgba(120, 20, 60, .4) 45%, rgba(216, 8, 16, .85) 100%); filter: blur(70px); opacity: .75; }

.fh__wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2rem; width: calc(100% - clamp(1.25rem, .6667rem + 2.9167vw, 3rem) * 2); max-width: 80rem; margin: 0 auto; }
.fh__proof { display: inline-flex; align-items: center; gap: .75rem; margin: 0 0 1.5rem; color: rgba(255, 255, 255, .82); font-size: .95rem; }
.fh__proof b { color: #fff; font-weight: 700; }
.fh__faces { display: flex; }
.fh__faces i { width: 26px; height: 26px; border: 2px solid #07070a; border-radius: 50%; background: center 20% / cover no-repeat; }
.fh__faces i + i { margin-left: -9px; }
.fh__faces i:nth-child(1) { background-image: url(../img/team/ramya.webp); }
.fh__faces i:nth-child(2) { background-image: url(../img/team/parthiban.webp); }
.fh__faces i:nth-child(3) { background-image: url(../img/team/angavai.webp); }

.fh__h { margin: 0; font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 700; line-height: 1.04; letter-spacing: -.045em; }
.fh__type { display: inline-block; min-height: 1.04em; padding-right: .06em; background: linear-gradient(90deg, #ff3b42 0%, #ff7a80 45%, #6f9bff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.fh__type::after { content: ''; display: inline-block; width: .07em; height: .82em; margin-left: .06em; background: #ff3b42; vertical-align: -.04em; animation: fh-caret .9s steps(1) infinite; }
@keyframes fh-caret { 50% { opacity: 0; } }

.fh__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
.fh__btn { display: inline-flex; align-items: center; gap: .9rem; min-height: 56px; padding: 0 1.4rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; color: #fff; font-size: 1.05rem; font-weight: 600; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.fh__btn--primary { padding: 0 6px 0 1.4rem; border-color: #fff; background: #fff; color: #0d0d0d; }
.fh__btn--primary:hover { background: #f1f1f1; }
.fh__btn-ico { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 4px; background: #d80810; color: #fff; font-size: 1.15rem; }
.fh__btn-ico i { grid-area: 1 / 1; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.fh__btn-ico i + i { transform: translateX(-260%); }
.fh__btn--primary:hover .fh__btn-ico i:first-child { transform: translateX(260%); }
.fh__btn--primary:hover .fh__btn-ico i + i { transform: none; }
.fh__btn--ghost { background: rgba(255, 255, 255, .04); }
.fh__btn--ghost:hover { border-color: #fff; background: #fff; color: #0d0d0d; }
.fh__note { margin: 1rem 0 0; color: #fff; font-size: .95rem; font-weight: 500; }
.fh__note i { color: #ff3b42; }
.fh__note span { color: rgba(255, 255, 255, .65); }
.fh__sub { max-width: 32rem; margin: 3.5rem 0 0; color: rgba(255, 255, 255, .72); font-size: 1.1rem; line-height: 1.6; }

.fh__stage { position: relative; height: clamp(380px, 46vw, 560px); }
.fh__canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.fh__label { position: absolute; left: 50%; bottom: 0; display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .45rem .9rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 100px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .85); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fh__label i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b42; box-shadow: 0 0 10px #ff3b42; animation: fh-blink 1.6s ease-in-out infinite; }
.fh__label span { transition: opacity .3s; }
@keyframes fh-blink { 50% { opacity: .3; } }

body.home1 .fh__h, body.home1 .fh__type { font-family: var(--dbl-head) !important; }

@media (max-width: 991px) {
    .fh { min-height: 0; padding: calc(var(--fn-h, 64px) + 2.5rem) 0 3rem; }
    .fh__wrap { grid-template-columns: 1fr; gap: 1rem; }
    .fh__stage { height: 300px; }
    .fh__sub { margin-top: 2rem; }
    .fh__orb { width: 80vw; top: auto; bottom: -10%; right: -30%; opacity: .55; }
}
@media (max-width: 575px) {
    .fh__proof { font-size: .82rem; }
    .fh__btn { min-height: 52px; font-size: .95rem; }
    .fh__stage { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    .fh__orb, .fh__type::after, .fh__label i { animation: none; }
}

/* ======================================== Menu: floating glass capsule */
/* The header itself goes clear; the bar inside becomes a rounded frosted
   capsule tinted blue at the left and red at the right (the hero colours),
   with a bright top edge and a blue-to-red hairline under it. It darkens
   after the hero; with a mega panel open the header is solid white again. */
.fn, .fn.is-mobile-open, .fn.is-scrolled, .fn.is-scrolled.is-mobile-open { padding: 12px 0 0; border-bottom: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fn__bar { position: relative; padding: .5rem .5rem .5rem 1.1rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(0, 72, 168, .22) 0%, rgba(255, 255, 255, .05) 35%, rgba(255, 255, 255, .05) 65%, rgba(216, 8, 16, .24) 100%),
        rgba(16, 13, 18, .36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 20px 40px -22px rgba(0, 0, 0, .8);
    -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
    transition: background .35s var(--fn-ease), border-color .35s var(--fn-ease), box-shadow .35s var(--fn-ease); }
.fn__bar::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, #3d7bff 25%, #ff3b42 75%, transparent); opacity: .75; pointer-events: none; }
.fn.is-scrolled .fn__bar { background:
        linear-gradient(90deg, rgba(0, 72, 168, .16) 0%, rgba(255, 255, 255, .03) 35%, rgba(255, 255, 255, .03) 65%, rgba(216, 8, 16, .18) 100%),
        rgba(12, 11, 15, .8); }
.fn.is-open { background: #fafafa; }
.fn.is-open .fn__bar { border-color: transparent; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fn.is-open .fn__bar::after { opacity: 0; }
@media (max-width: 991px) {
    .fn, .fn.is-scrolled { padding-top: 10px; }
    .fn__bar { padding: .45rem .45rem .45rem .9rem; border-radius: 14px; }
    .fn.is-mobile-open { background: #fafafa; }
    .fn.is-mobile-open .fn__bar { border-color: transparent; background: transparent; box-shadow: none; }
}

/* ======================================================== Industries (glass cards) */
/* Dark stage, centred heading, then a slider of frosted-glass cards. Each
   card has a two-line headline, a short description, its own glowing
   artwork drawn in SVG (gear, orb, beam, pulse, skyline, dots) and a round
   glass arrow. Cards lift on hover and the artwork brightens. */
.igl { position: relative; padding: 6.5rem 0 5.5rem; overflow: hidden; color: #fff; isolation: isolate;
    background:
        radial-gradient(40% 55% at 15% 85%, rgba(47, 85, 255, .22) 0%, transparent 70%),
        radial-gradient(40% 55% at 90% 20%, rgba(216, 8, 16, .18) 0%, transparent 70%),
        #07070b; }
.igl::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background: repeating-linear-gradient(90deg, transparent 0 120px, rgba(120, 140, 255, .05) 120px 121px, transparent 121px 260px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); }

.igl__head { max-width: 40rem; margin: 0 auto 3.5rem; padding: 0 1.25rem; text-align: center; }
.igl__kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; color: rgba(255, 255, 255, .8); font-size: .85rem; }
.igl__kicker i { width: 10px; height: 10px; background: #ff3b42; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.igl__h { margin: 0; font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 500; letter-spacing: -.03em; }
.igl__lead { margin: 1.1rem 0 0; color: rgba(255, 255, 255, .72); font-size: 1rem; line-height: 1.65; }

.igl__viewport { --gap: 24px; --w: min(340px, 78vw); padding: 12px 0 20px; }
.igl__track { display: flex; gap: var(--gap); padding: 0 max(1.25rem, calc((100vw - 80rem) / 2)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 max(1.25rem, calc((100vw - 80rem) / 2)); scrollbar-width: none; cursor: grab; }
.igl__track::-webkit-scrollbar { display: none; }
.igl__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.igl__track.is-drag * { pointer-events: none; }

.igl__card { --tint: 47, 85, 255; position: relative; flex: none; width: var(--w); height: 420px; overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; color: #fff; text-decoration: none; isolation: isolate;
    background:
        radial-gradient(90% 70% at 40% 100%, rgba(var(--tint), .45) 0%, transparent 70%),
        linear-gradient(180deg, rgba(40, 42, 70, .55) 0%, rgba(22, 22, 40, .55) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 60px -30px rgba(0, 0, 0, .9);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .4s, box-shadow .5s; }
.igl__card--red { --tint: 216, 8, 16; }
.igl__card:hover { transform: translateY(-8px); border-color: rgba(255, 255, 255, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 40px 70px -30px rgba(var(--tint), .6); }
.igl__title { position: relative; z-index: 2; margin: 0; padding: 26px 24px 0; font-size: 1.6rem; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.igl__text { position: relative; z-index: 2; margin: 1rem 0 0; padding: 0 24px; color: rgba(255, 255, 255, .78); font-size: .9rem; line-height: 1.6; }
.igl__art { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 58%; pointer-events: none; transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .5s; }
.igl__art svg { width: 100%; height: 100%; overflow: visible; }
.igl__card:hover .igl__art { transform: scale(1.05); filter: brightness(1.2); }
.igl__go { position: absolute; right: 22px; bottom: 22px; z-index: 3; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff; font-size: 1.2rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .35s, color .35s, transform .5s cubic-bezier(.22, 1, .36, 1); }
.igl__card:hover .igl__go { background: #fff; color: #0d0d0d; transform: rotate(45deg); }

.igl__controls { display: flex; align-items: center; gap: 1rem; width: calc(100% - clamp(1.25rem, .6667rem + 2.9167vw, 3rem) * 2); max-width: 80rem; margin: 1.5rem auto 0; }
.igl__btn { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(255, 255, 255, .04); color: #fff; font-size: 1.1rem; cursor: pointer; transition: background .3s, color .3s, opacity .3s; }
.igl__btn:hover:not(:disabled) { background: #fff; color: #0d0d0d; }
.igl__btn:disabled { opacity: .3; cursor: default; }
.igl__bar { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.igl__bar span { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: inherit; background: linear-gradient(90deg, #3d7bff, #ff3b42); transition: transform .3s ease, width .3s ease; }

/* Artwork motion */
.igl-spin { transform-box: fill-box; transform-origin: center; animation: igl-spin 18s linear infinite; }
.igl-pulse { animation: igl-pulse 2.6s ease-in-out infinite; }
.igl-dash { stroke-dasharray: 420; stroke-dashoffset: 420; animation: igl-dash 2.8s ease-in-out infinite; }
.igl-twinkle { animation: igl-twinkle 2.4s ease-in-out infinite; }
@keyframes igl-spin { to { transform: rotate(360deg); } }
@keyframes igl-pulse { 50% { opacity: .55; } }
@keyframes igl-dash { 60%, 100% { stroke-dashoffset: 0; } }
@keyframes igl-twinkle { 50% { opacity: .15; } }

body.home1 .igl__h, body.home1 .igl__title { font-family: var(--dbl-head) !important; }

@media (max-width: 575px) {
    .igl { padding: 5rem 0 4rem; }
    .igl__card { height: 400px; }
    .igl__title { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
    .igl-spin, .igl-pulse, .igl-dash, .igl-twinkle { animation: none; }
    .igl-dash { stroke-dashoffset: 0; }
}

/* Icon artwork motion: a gentle float, rising steam, a swinging tassel. */
.igl-float { animation: igl-float 4s ease-in-out infinite; }
.igl-steam { stroke-dasharray: 90; stroke-dashoffset: 90; opacity: 0; animation: igl-steam 2.6s ease-in-out infinite; }
.igl-swing { animation: igl-swing 3s ease-in-out infinite; }
@keyframes igl-float { 50% { transform: translateY(-8px); } }
@keyframes igl-steam { 0% { stroke-dashoffset: 90; opacity: 0; transform: translateY(6px); } 40% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-10px); } }
@keyframes igl-swing { 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
    .igl-float, .igl-swing { animation: none; }
    .igl-steam { animation: none; opacity: .7; stroke-dashoffset: 0; }
}
/* Card artwork at 85% size, still sitting on the card's bottom edge. */
.igl__art svg { transform: scale(.85); transform-origin: 30% 100%; }

/* Industries: tighter spacing now the small label is gone. */
.igl { padding: 4.5rem 0 3.75rem; }
.igl__head { margin-bottom: 2.25rem; }
.igl__viewport { padding: 8px 0 12px; }
.igl__controls { margin-top: 1rem; }
@media (max-width: 575px) { .igl { padding: 3.5rem 0 3rem; } }

/* AI section: less empty space under the carousel. */
.rh { aspect-ratio: 1440 / 930; }
.rh__content { padding-bottom: 120px; }
@media (max-width: 767px) { .rh { aspect-ratio: 360 / 711; } .rh__content { padding-bottom: 120px; } }

/* Services: no grey strip around the dark card. */
body.home1 .msv { padding-bottom: 0; background: #fff; }
.igl__head { max-width: 46rem; }
.igl__lead { white-space: nowrap; }
@media (max-width: 575px) { .igl__lead { white-space: normal; } }

/* Team: smaller heading, no summary line, button under the photos. */
body.home1 .tm__h { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.12; }
.tm__after { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: -1.5rem; }
@media (max-width: 991px) { .tm__after { margin-top: 2rem; } }
.tm__mobile .tm__h { margin-bottom: 1rem; }

/* ======================================== One type scale for every section */
/* Every section heading, the line under it and the small label above it
   share one style, so sections read as one site. Colours stay per section.
   The hero headline is the page title and keeps its own size. */
:root {
    --t-h2: clamp(2rem, 1.35rem + 2.2vw, 3rem);
    --t-lead: 1.125rem;
    --t-label: .8rem;
}
body.home1 main :is(.dbl-clients__h, .dbl-off__h, .title, .fs__h, .mw__heading, .tw__h, .msv__heading, .igl__h, .tm__h, .rh__title, .sp__h, .cc__h, .hq__h) {
    font-family: var(--dbl-head) !important;
    font-size: var(--t-h2) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
}
body.home1 main :is(.dbl-clients__h, .dbl-off__h, .title, .fs__h, .mw__heading, .tw__h, .msv__heading, .igl__h, .tm__h, .rh__title, .sp__h, .cc__h, .hq__h) b { font-weight: inherit; }
body.home1 main :is(.dbl-off__p, .fs__text, .msv__subtitle, .igl__lead, .cc__p) {
    font-family: var(--dbl-body) !important;
    font-size: var(--t-lead) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: normal !important;
}
body.home1 main :is(.kicker, .dbl-off__chip, .msv__eyebrow-label, .mw__prefix) {
    font-family: var(--dbl-body) !important;
    font-size: var(--t-label) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
}
body.home1 main .mw .mw__prefix { font-family: var(--dbl-body) !important; }

/* AI section fills exactly one screen: the video scales with the screen
   height so the heading, video and carousel all fit without scrolling. */
.rh { aspect-ratio: auto; height: 100svh; min-height: 620px; max-height: 1080px; }
.rh__video { top: 15%; width: min(62%, 900px, 108svh); }
@media (max-width: 767px) {
    .rh { aspect-ratio: auto; height: 100svh; min-height: 600px; }
    .rh__video { top: 26%; }
}
.rh__content { padding-top: calc(var(--fn-h, 70px) + 1.5rem); }
.rh__video { top: calc(var(--fn-h, 70px) + 9rem); }
@media (max-width: 767px) {
    .rh__content { padding-top: calc(var(--fn-h, 64px) + 1.25rem); padding-bottom: 100px; }
    .rh__video { top: calc(var(--fn-h, 64px) + 10rem); width: 150%; }
}

/* AI section: the video is sized from the screen height so heading, video
   and carousel never overlap. */
.rh__video { top: calc(var(--fn-h, 70px) + 8.5rem); width: min(62%, 900px, 70svh); }
@media (max-width: 767px) { .rh__video { top: calc(var(--fn-h, 64px) + 10rem); width: 150%; } }

/* ======================================== Team: "Schedule a call" button */
/* Black pill with a slowly turning red-blue gradient edge, a light sweep
   every few seconds, a soft red pulse around it, and a red arrow circle
   that turns white and tilts on hover (the text roll stays). */
@property --tmb-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tm__after { margin-top: 3.5rem; }
.tm__layout { padding-bottom: 6rem; }
.tm__after .tm-btn { gap: 1.1rem; padding: 7px 7px 7px 1.75rem; overflow: hidden; border-radius: 100px; background: transparent; font-family: var(--dbl-head); font-size: 1.05rem; isolation: isolate;
    box-shadow: 0 20px 40px -18px rgba(216, 8, 16, .55); animation: tmb-pulse 2.4s ease-out infinite; }
.tm__after .tm-btn::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: conic-gradient(from var(--tmb-a), #d80810, #3d7bff, #ff8a8f, #d80810); animation: tmb-spin 4s linear infinite; }
.tm__after .tm-btn::after { content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: inherit;
    background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 60%) 150% 0 / 250% 100% no-repeat, #0d0d0d;
    animation: tmb-shine 3.6s ease-in-out infinite; }
.tm__after .tm-btn__arrow { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; overflow: hidden; border-radius: 50%; background: #d80810; color: #fff; transition: background .35s, color .35s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.tm__after .tm-btn__arrow-wrap { width: 1.2rem; height: 1.2rem; }
.tm__after .tm-btn:hover .tm-btn__arrow { background: #fff; color: #0d0d0d; transform: rotate(-45deg) scale(1.06); }
@keyframes tmb-spin { to { --tmb-a: 360deg; } }
@keyframes tmb-shine { 0%, 55% { background-position: 150% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
@keyframes tmb-pulse { 0% { box-shadow: 0 20px 40px -18px rgba(216, 8, 16, .55), 0 0 0 0 rgba(216, 8, 16, .4); } 100% { box-shadow: 0 20px 40px -18px rgba(216, 8, 16, .55), 0 0 0 16px rgba(216, 8, 16, 0); } }
@media (max-width: 991px) {
    .tm__after { margin-top: 2.5rem; }
    .tm__layout { padding-bottom: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .tm__after .tm-btn, .tm__after .tm-btn::before, .tm__after .tm-btn::after { animation: none; }
}
.tm__after .tm-btn__arrow svg:last-child { transform: translateX(-260%); }
.tm__after .tm-btn:hover .tm-btn__arrow svg:first-child { transform: translateX(260%); }
.tm__after .tm-btn:hover .tm-btn__arrow svg:last-child { transform: translateX(0); }

/* Contact: a more compact invitation card and a shorter photo so the left
   column matches the booking form instead of stretching it. */
.cc__photo { aspect-ratio: 5 / 4; }
.cc__photo img { object-position: center 30%; }
.inv { margin-bottom: 1.25rem; }
.inv__letter { padding: 1.1rem 1.25rem 1rem; }
.inv__letter::before { inset: .4rem; }
.inv__hero { margin-bottom: .6rem; }
.inv__kicker { font-size: .66rem; }
.inv__word { font-size: clamp(2.4rem, 3.6vw, 3rem); }
.inv__chart { width: 6.5rem; }
.inv__type { font-size: 1.05rem; line-height: 1.4; }
.inv__by { margin-top: .75rem; padding-top: .65rem; }
.inv__sign { font-size: 1.35rem; }
.inv__stamp { top: .75rem; right: .75rem; width: 2.2rem; height: 2.5rem; }
.inv__env { height: 8.5rem; }

/* ======================================== Invitation: scratch ticket */
/* A champagne-gold foil ticket inside the invitation, notched like a real
   ticket. Scratching it (mouse or finger) wipes the foil away; at about half
   it dissolves with a small sparkle burst and shows the offer, its code and
   a Claim button that carries the offer into the booking form. Every visitor
   wins one of four offers, and it's remembered so a reload doesn't reroll. */
.scr { position: relative; height: 76px; margin: .9rem 0 .2rem; border-radius: 12px; isolation: isolate;
    -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.scr__prize { position: absolute; inset: 0; display: flex; align-items: center; gap: .85rem; padding: 0 1rem 0 1.25rem; border: 1px solid rgba(255, 213, 138, .35); border-radius: inherit;
    background: radial-gradient(80% 140% at 0% 50%, rgba(216, 8, 16, .35), transparent 70%), linear-gradient(135deg, #1c0a0c 0%, #2a0c0f 100%); }
.scr__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ffd58a, #c9a66b); color: #2a1408; font-size: 1.05rem; box-shadow: 0 0 0 4px rgba(255, 213, 138, .14); }
.scr__txt { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.2; }
.scr__txt small { color: rgba(255, 213, 138, .8); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.scr__txt b { overflow: hidden; color: #fff; font-family: var(--dbl-serif); font-size: 1.15rem; font-style: italic; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.scr__code { align-self: flex-start; margin-top: .2rem; padding: .05rem .45rem; border: 1px dashed rgba(255, 213, 138, .5); border-radius: 4px; color: #ffd58a; font-family: ui-monospace, Consolas, monospace; font-size: .68rem; letter-spacing: .08em; }
.scr__claim { display: inline-flex; flex: none; align-items: center; gap: .35rem; padding: .55rem .9rem; border-radius: 999px; background: #d80810; color: #fff; font-family: var(--dbl-head); font-size: .82rem; font-weight: 600; text-decoration: none; transition: background .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.scr__claim:hover { background: #fff; color: #1a0a0b; transform: translateX(2px); }

.scr__foil { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border-radius: inherit; cursor: grab; touch-action: none; transition: opacity .7s ease, filter .7s ease; }
.scr__foil:active { cursor: grabbing; }
.scr.is-revealed .scr__foil { opacity: 0; filter: blur(6px); pointer-events: none; }
.scr__shine { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; pointer-events: none; }
.scr__shine::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: scr-shine 3.2s ease-in-out infinite; }
.scr.is-touched .scr__shine, .scr.is-revealed .scr__shine { display: none; }
@keyframes scr-shine { 0%, 40% { left: -40%; } 100% { left: 120%; } }

.scr__kbd { position: absolute; right: .5rem; bottom: .5rem; z-index: 4; padding: .3rem .6rem; border: 0; border-radius: 6px; background: #1a0a0b; color: #ffd58a; font-size: .7rem; font-weight: 600; opacity: 0; pointer-events: none; }
.scr__kbd:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid #ffd58a; outline-offset: 2px; }
.scr.is-revealed .scr__kbd { display: none; }

.scr__burst { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.scr__burst i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #ffd58a; box-shadow: 0 0 8px #ffd58a; animation: scr-burst .9s cubic-bezier(.22, 1, .36, 1) forwards; }
.scr__burst i:nth-child(3n) { width: 8px; height: 8px; background: #ff3b42; box-shadow: 0 0 8px #ff3b42; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); border-radius: 0; }
@keyframes scr-burst { from { opacity: 1; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); } }
.scr.is-revealed .scr__prize { animation: scr-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes scr-pop { 40% { transform: scale(1.03); } }

/* Offer applied to the booking form. */
.cc__offer { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .6rem .8rem; border: 1px dashed rgba(255, 213, 138, .45); border-radius: .6rem; background: rgba(255, 213, 138, .08); color: #ffe7bd; font-size: .85rem; }
.cc__offer i { color: #ffd58a; }
.cc__offer b { color: #fff; font-weight: 600; }
.cc__offer[hidden] { display: none; }
.cc__form.is-offer { animation: scr-glow 1.4s ease; }
@keyframes scr-glow { 30% { box-shadow: 0 0 0 3px rgba(255, 213, 138, .45), 0 0 40px rgba(255, 213, 138, .25); } }

/* The ticket adds height, so the photo gives a little back. */
.cc__photo { aspect-ratio: 16 / 11; }
.inv__by { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
    .scr__shine::after, .scr__burst i, .scr.is-revealed .scr__prize, .cc__form.is-offer { animation: none; }
}
body.home1 .scr__txt b { font-family: var(--dbl-serif) !important; }
body.home1 .scr__claim { font-family: var(--dbl-head) !important; }

/* ======================================== Booking form: offer ticket + services picker */
.cc__form .scr { margin: 0; }
.scr.is-applied .scr__claim { background: rgba(46, 224, 124, .16); color: #7af0ae; cursor: default; }
.scr.is-applied .scr__claim:hover { transform: none; }

/* Services: a dark multi-select with search, chips and grouped options. */
.msel { position: relative; }
.msel__control { position: relative; display: flex; align-items: center; min-height: 46px; padding: .35rem 2.3rem .35rem .45rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: .6rem; background: rgba(0, 0, 0, .45); color: #fff; font-size: .95rem; cursor: pointer; transition: border-color .2s; }
.msel__control:focus-visible, .msel.is-open .msel__control { outline: none; border-color: #d80810; }
.cc__field.is-invalid .msel__control { border-color: #ff5a61; }
.msel__value { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.msel__placeholder { padding: .25rem .35rem; color: rgba(246, 246, 246, .4); }
.msel__caret { position: absolute; top: 50%; right: .8rem; color: rgba(255, 255, 255, .6); transform: translateY(-50%); transition: transform .3s; }
.msel.is-open .msel__caret { transform: translateY(-50%) rotate(180deg); }
.msel__chip { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .25rem .22rem .6rem; border: 1px solid rgba(216, 8, 16, .5); border-radius: 999px; background: rgba(216, 8, 16, .2); color: #fff; font-size: .78rem; white-space: nowrap; animation: msel-in .25s cubic-bezier(.34, 1.56, .64, 1); }
.msel__chip button { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: .8rem; cursor: pointer; transition: background .2s; }
.msel__chip button:hover { background: #d80810; }
.msel__more { align-self: center; padding: 0 .3rem; color: rgba(246, 246, 246, .65); font-size: .78rem; }
@keyframes msel-in { from { opacity: 0; transform: scale(.85); } }

.msel__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; padding: .5rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: .8rem; background: #141012; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .95); opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden; transition: opacity .2s, transform .25s, visibility 0s .25s; }
.msel.is-open .msel__panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .2s, transform .25s; }
.msel__find { position: relative; }
.msel__find i { position: absolute; top: 50%; left: .75rem; color: rgba(255, 255, 255, .45); font-size: .85rem; transform: translateY(-50%); }
.cc__field .msel__search { padding-left: 2.1rem; background: rgba(255, 255, 255, .05); font-size: .9rem; }
.msel__list { max-height: 240px; margin: .4rem 0 0; padding: 0 .1rem 0 0; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.msel__group { padding: .6rem .5rem .25rem; color: rgba(255, 213, 138, .8); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.msel__opt { display: flex; align-items: center; gap: .6rem; padding: .5rem; border-radius: .5rem; color: rgba(246, 246, 246, .88); font-size: .88rem; cursor: pointer; transition: background .15s; }
.msel__opt:hover, .msel__opt.is-active { background: rgba(255, 255, 255, .07); }
.msel__opt mark { background: none; color: #ff8a8f; font-weight: 600; }
.msel__box { display: grid; place-items: center; flex: none; width: 17px; height: 17px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 5px; color: transparent; font-size: .8rem; transition: background .2s, border-color .2s, color .2s; }
.msel__opt[aria-selected="true"] { color: #fff; }
.msel__opt[aria-selected="true"] .msel__box { border-color: #d80810; background: #d80810; color: #fff; }
.msel__empty { margin: 0; padding: .9rem .5rem; color: rgba(246, 246, 246, .55); font-size: .85rem; }
.msel__foot { display: flex; align-items: center; justify-content: space-between; margin-top: .45rem; padding: .5rem .25rem 0; border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(246, 246, 246, .6); font-size: .78rem; }
.msel__link, .msel__done { border: 0; background: none; color: rgba(246, 246, 246, .7); font: inherit; cursor: pointer; }
.msel__link:hover { color: #fff; }
.msel__done { margin-left: .75rem; padding: .35rem .8rem; border-radius: 999px; background: #d80810; color: #fff; font-weight: 600; }

/* After a successful booking: optional WhatsApp follow-up. */
.cc__wa-follow { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding: .5rem .9rem; border-radius: 999px; background: #25d366; color: #fff; font-weight: 600; text-decoration: none; }
.cc__wa-follow:hover { background: #1fb556; }

/* Invitation gets its own "Pick a time" link back; the photo is square again
   to balance the taller form. */
.inv__by { grid-template-columns: 1fr auto; }
.cc__photo { aspect-ratio: 1; }

/* Team: tighter gap between the photos and the button. */
.tm__after { margin-top: -1.5rem; }
.tm__layout { padding-bottom: 4.5rem; }
@media (max-width: 991px) { .tm__after { margin-top: 1.5rem; } .tm__layout { padding-bottom: 3rem; } }

/* ======================================== Small-phone fixes (≤ 480px) */
@media (max-width: 480px) {
    /* Hero: heading fits in four lines. */
    .fh__h { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
    .fh__cta { gap: .6rem; }
    /* Services: the icon goes above the title so long titles don't clip. */
    .msv__left { flex-direction: column; align-items: flex-start; gap: 14px; }
    .msv__info { padding-right: 44px; }
    .msv__brand { width: auto; height: 44px; }
    .msv__brand i { width: 44px; height: 44px; font-size: 19px; }
    .msv__title { max-width: none; font-size: 24px; line-height: 30px; letter-spacing: -.8px; }
    /* Booking form: a little more room for the five day buttons. */
    .cc { margin-left: .75rem; margin-right: .75rem; padding-left: .9rem; padding-right: .9rem; }
    .cc__form { padding: 1.1rem; }
    .cc__days { gap: .35rem; }
}

/* ======================================== No menu: logo + CTA in the hero */
/* On this page the top menu is hidden; the hero carries the Cloudi5 logo
   (top left) and a "Start a project" button (top right). */
body.no-nav .fn, body.no-nav .fn-veil { display: none !important; }
.fh__top { position: absolute; top: 0; left: 50%; z-index: 5; display: flex; align-items: center; justify-content: space-between; width: calc(100% - clamp(1.25rem, .6667rem + 2.9167vw, 3rem) * 2); max-width: 80rem; padding-top: 1.5rem; transform: translateX(-50%); animation: fh-top-in .8s cubic-bezier(.22, 1, .36, 1) both; }
.fh__logo { display: flex; line-height: 0; }
.fh__logo img { width: auto; height: 3rem; filter: brightness(0) invert(1); }
.fh__topbtn { display: inline-flex; align-items: center; gap: .85rem; padding: 4px 4px 4px 1.1rem; border-radius: 6px; background: #fff; color: #0d0d0d; font-family: var(--dbl-head); font-size: .85rem; font-weight: 600; letter-spacing: .03em; text-decoration: none; text-transform: uppercase; transition: background .3s; }
.fh__topbtn:hover { background: #f1f1f1; }
.fh__topbtn-ico { position: relative; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; overflow: hidden; border-radius: 4px; background: #d80810; color: #fff; }
.fh__topbtn-ico i { grid-area: 1 / 1; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.fh__topbtn-ico i + i { transform: translateX(-260%); }
.fh__topbtn:hover .fh__topbtn-ico i:first-child { transform: translateX(260%); }
.fh__topbtn:hover .fh__topbtn-ico i + i { transform: none; }
body.no-nav .fh { padding-top: 8rem; }
@keyframes fh-top-in { from { opacity: 0; transform: translate(-50%, -12px); } }
body.home1 .fh__topbtn { font-family: var(--dbl-head) !important; }
@media (max-width: 575px) {
    .fh__top { padding-top: 1rem; }
    .fh__logo img { height: 2.4rem; }
    .fh__topbtn { gap: .6rem; padding-left: .8rem; font-size: .72rem; }
    .fh__topbtn-ico { width: 2rem; height: 2rem; }
    body.no-nav .fh { padding-top: 6rem; }
}
@media (prefers-reduced-motion: reduce) { .fh__top { animation: none; } }