@charset "UTF-8";
/* ==========================================================================
   DBeeta — repositioning layer
   --------------------------------------------------------------------------
   Loaded after assets/css/style.css so it can correct the theme without
   !important. Authored as plain CSS on purpose: the repository ships a
   pre-built style.css with no SCSS compiler configured (no package.json,
   gulpfile or webpack config), so a parallel .scss source would silently
   drift out of step with what the browser actually loads.

   Brand colours, typography and radii are unchanged — they are lifted
   verbatim from assets/scss/_variabls.scss.

   Contents
     01. Tokens
     02. Overflow & layout safety
     03. Typography rhythm
     04. Buttons, links, focus
     05. Header & desktop navigation
     06. Mobile drawer
     07. Sections & containers
     08. Hero
     09. Cards & grids
     10. Stepper / process flow
     11. Ecosystem diagram
     12. Capability lists
     13. Case studies
     14. Contact & forms
     15. Footer
     16. Breadcrumb, 404, utilities
     17. Reduced motion & print
   ========================================================================== */

/* ==========================================================================
   01. Tokens
   ========================================================================== */

:root {
    /* Brand — unchanged from _variabls.scss */
    --db-yellow: #ffc315;
    --db-blue: #004395;
    --db-blue-deep: #002fa6;
    --db-ink: #333333;
    --db-body: #5b5b5b;
    --db-muted: #6d70a6;
    --db-green: #38cb89;

    /* Surfaces */
    --db-bg: #ffffff;
    --db-bg-soft: #f7f9fc;
    --db-bg-deep: #0f1c33;
    --db-border: #e3e9f2;
    --db-border-strong: #cdd7e6;

    /* Text — chosen for >= 4.5:1 on their own background.
       Brand yellow is 1.7:1 on white, so it is only ever used as a
       background, border or icon fill, never as text on white. */
    --db-text: #333333;
    --db-text-soft: #5b5b5b;
    --db-text-on-dark: #eef2f8;
    --db-text-on-dark-soft: #b9c4d6;
    --db-link: #004395;
    --db-link-hover: #002fa6;

    /* Fluid type — min at 320px, max at 1280px */
    --db-fs-xs: 0.8125rem;
    --db-fs-sm: 0.875rem;
    --db-fs-base: clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem);
    --db-fs-lead: clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
    --db-fs-h4: clamp(1.0625rem, 1rem + 0.31vw, 1.25rem);
    --db-fs-h3: clamp(1.1875rem, 1.06rem + 0.63vw, 1.625rem);
    --db-fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --db-fs-h1: clamp(1.875rem, 1.3rem + 2.9vw, 3.75rem);

    /* Spacing */
    --db-space-2xs: 0.25rem;
    --db-space-xs: 0.5rem;
    --db-space-sm: 0.75rem;
    --db-space-md: 1rem;
    --db-space-lg: 1.5rem;
    --db-space-xl: 2rem;
    --db-space-2xl: 3rem;
    --db-section: clamp(2.75rem, 1.6rem + 5.75vw, 6rem);
    --db-section-tight: clamp(2rem, 1.3rem + 3.5vw, 4rem);
    --db-gutter: clamp(1rem, 0.7rem + 1.5vw, 2rem);

    /* Shape */
    --db-radius: 10px;
    --db-radius-lg: 16px;
    --db-radius-pill: 999px;

    --db-shadow-sm: 0 2px 8px rgba(15, 28, 51, 0.06);
    --db-shadow: 0 6px 24px rgba(15, 28, 51, 0.08);
    --db-shadow-lg: 0 18px 48px rgba(15, 28, 51, 0.12);

    /* Layout */
    --db-max: 1200px;
    --db-header-h: 68px;
    --db-tap: 44px;

    --db-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 992px) {
    :root { --db-header-h: 80px; }
}

/* ==========================================================================
   02. Overflow & layout safety
   --------------------------------------------------------------------------
   The single largest source of horizontal scrolling on the old site was
   fixed-px widths on layout elements plus long unbreakable strings (emails,
   URLs, IBANs). These rules make overflow structurally impossible.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

html, body {
    max-width: 100%;
    overflow-x: clip;
}

body {
    background: var(--db-bg);
    color: var(--db-text-soft);
    font-size: var(--db-fs-base);
}

/* Flex and grid children default to min-width:auto, which refuses to shrink
   below their content and pushes the page wider than the viewport. */
.db-page :where(.db-grid, .db-flex, .db-nav__list, .db-footer__grid) > * { min-width: 0; }

.db-page :where(img, svg, video, canvas, iframe, table) { max-width: 100%; }
.db-page :where(img, svg, video) { height: auto; }

/* Long strings must wrap rather than widen their container. */
.db-page :where(p, li, dd, dt, td, th, h1, h2, h3, h4, figcaption) { overflow-wrap: break-word; }
.db-page :where(a[href^="mailto:"], a[href^="tel:"], code, .db-break) { overflow-wrap: anywhere; }

/* Any wide block scrolls inside itself, never the page. */
.db-scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.db-scroller > table { min-width: 32rem; }

.db-scroll-locked { overflow: hidden; }

/* ==========================================================================
   03. Typography rhythm
   ========================================================================== */

.db-page { color: var(--db-text-soft); }

.db-page :where(h1, h2, h3, h4) {
    color: var(--db-text);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 var(--db-space-md);
    letter-spacing: -0.01em;
}

.db-h1 { font-size: var(--db-fs-h1); }
.db-h2 { font-size: var(--db-fs-h2); }
.db-h3 { font-size: var(--db-fs-h3); }
.db-h4 { font-size: var(--db-fs-h4); line-height: 1.3; }

.db-page p { margin: 0 0 var(--db-space-md); line-height: 1.7; }
.db-page p:last-child { margin-bottom: 0; }

.db-lead {
    font-size: var(--db-fs-lead);
    line-height: 1.6;
    color: var(--db-text-soft);
    max-width: 62ch;
}

.db-kicker {
    display: inline-block;
    font-size: var(--db-fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--db-blue);
    margin-bottom: var(--db-space-sm);
}

.db-kicker--onDark { color: var(--db-yellow); }

.db-measure { max-width: 68ch; }

.db-strong { color: var(--db-text); font-weight: 700; }

/* ==========================================================================
   04. Buttons, links, focus
   ========================================================================== */

.db-page a { color: var(--db-link); text-decoration: none; }
.db-page a:hover, .db-page a:focus-visible { color: var(--db-link-hover); text-decoration: underline; }

/* Visible focus everywhere, including on dark panels. */
.db-page :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.db-header :where(a, button):focus-visible,
.db-drawer :where(a, button):focus-visible,
.db-footer :where(a, button):focus-visible {
    outline: 3px solid var(--db-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.db-onDark :where(a, button):focus-visible,
.db-footer :where(a, button):focus-visible {
    outline-color: var(--db-yellow);
}

.db-skip-link {
    position: absolute;
    left: var(--db-space-md);
    top: var(--db-space-md);
    z-index: 200;
    transform: translateY(-200%);
    background: var(--db-blue);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--db-radius);
    font-weight: 600;
    transition: transform 0.2s var(--db-ease);
}
.db-skip-link:focus { transform: translateY(0); color: #fff; }

.db-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--db-tap);
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--db-radius-pill);
    font-size: var(--db-fs-base);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s var(--db-ease), color 0.2s var(--db-ease),
                border-color 0.2s var(--db-ease), transform 0.2s var(--db-ease);
}
.db-btn:hover, .db-btn:focus-visible { text-decoration: none; transform: translateY(-1px); }

/* Yellow is 1.7:1 on white as text, but 11.3:1 with ink text on top of it. */
.db-btn--primary { background: var(--db-yellow); color: var(--db-ink); border-color: var(--db-yellow); }
.db-btn--primary:hover, .db-btn--primary:focus-visible { background: #f0b400; border-color: #f0b400; color: var(--db-ink); }

.db-btn--secondary { background: transparent; color: var(--db-blue); border-color: var(--db-border-strong); }
.db-btn--secondary:hover, .db-btn--secondary:focus-visible { border-color: var(--db-blue); color: var(--db-blue); background: var(--db-bg-soft); }

.db-btn--onDark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.db-btn--onDark:hover, .db-btn--onDark:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

.db-btn--block { width: 100%; }

.db-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--db-space-sm);
    margin-top: var(--db-space-lg);
}
.db-btn-group > * { flex: 1 1 auto; }
@media (min-width: 480px) { .db-btn-group > * { flex: 0 0 auto; } }

.db-arrowlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--db-tap);
    font-weight: 700;
}
.db-arrowlink span { transition: transform 0.2s var(--db-ease); }
.db-arrowlink:hover span, .db-arrowlink:focus-visible span { transform: translateX(3px); }

/* ==========================================================================
   05. Header & desktop navigation
   ========================================================================== */

.db-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--db-border);
    padding-top: env(safe-area-inset-top);
}

.db-header__bar {
    display: flex;
    align-items: center;
    gap: var(--db-space-md);
    min-height: var(--db-header-h);
}

.db-header__logo { flex: 0 0 auto; margin: 0; }
.db-header__logo img { display: block; width: auto; height: 34px; }
@media (min-width: 992px) { .db-header__logo img { height: 42px; } }

.db-nav { flex: 1 1 auto; }

.db-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.db-nav__item { position: relative; }

.db-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--db-tap);
    padding: 0.5rem 0.75rem;
    background: none;
    border: 0;
    border-radius: var(--db-radius);
    color: var(--db-text);
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}
.db-nav__link:hover { background: var(--db-bg-soft); color: var(--db-blue); text-decoration: none; }

.db-nav__link.is-current { color: var(--db-blue); }
.db-nav__link.is-current::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.35rem;
    height: 2px;
    background: var(--db-yellow);
    border-radius: 2px;
}

.db-nav__link--cta {
    background: var(--db-yellow);
    color: var(--db-ink);
    padding-inline: 1.1rem;
    border-radius: var(--db-radius-pill);
}
.db-nav__link--cta:hover, .db-nav__link--cta:focus-visible { background: #f0b400; color: var(--db-ink); }
.db-nav__link--cta.is-current::after { display: none; }

.db-nav__caret {
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.2s var(--db-ease);
}
.db-nav__toggle[aria-expanded="true"] .db-nav__caret { transform: rotate(-135deg) translate(-2px, -2px); }

.db-megamenu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 110;
    width: min(46rem, calc(100vw - 2rem));
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-lg);
    box-shadow: var(--db-shadow-lg);
}
.db-megamenu[hidden] { display: none; }

.db-megamenu__inner { padding: var(--db-space-lg); }

.db-megamenu__intro {
    margin: 0 0 var(--db-space-md);
    font-size: var(--db-fs-sm);
    color: var(--db-text-soft);
}

.db-megamenu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.25rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.db-megamenu__link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.65rem;
    border-radius: var(--db-radius);
    color: var(--db-text);
}
.db-megamenu__link:hover, .db-megamenu__link:focus-visible {
    background: var(--db-bg-soft);
    color: var(--db-text);
    text-decoration: none;
}

.db-megamenu__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: rgba(255, 195, 21, 0.18);
    color: #7a5a00;
    font-size: 0.9rem;
}

.db-megamenu__text { display: block; min-width: 0; }
.db-megamenu__title { display: block; font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
.db-megamenu__desc {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--db-fs-xs);
    line-height: 1.45;
    color: var(--db-text-soft);
}

.db-megamenu__all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--db-space-md);
    padding-top: var(--db-space-md);
    border-top: 1px solid var(--db-border);
    width: 100%;
    font-weight: 700;
    font-size: var(--db-fs-sm);
    min-height: var(--db-tap);
}

.db-header__actions {
    display: flex;
    align-items: center;
    gap: var(--db-space-xs);
    margin-left: auto;
    flex: 0 0 auto;
}

.db-langswitch {
    display: inline-grid;
    place-items: center;
    min-width: var(--db-tap);
    min-height: var(--db-tap);
    border: 1px solid var(--db-border-strong);
    border-radius: var(--db-radius-pill);
    padding-inline: 0.6rem;
    font-size: var(--db-fs-sm);
    font-weight: 700;
    color: var(--db-text);
}
.db-langswitch:hover, .db-langswitch:focus-visible { border-color: var(--db-blue); color: var(--db-blue); text-decoration: none; }

.db-header__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--db-tap);
    padding-inline: 0.6rem;
    font-size: var(--db-fs-sm);
    font-weight: 700;
    color: var(--db-text);
    white-space: nowrap;
}
.db-header__phone:hover, .db-header__phone:focus-visible { color: var(--db-blue); }

.db-burger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: var(--db-tap);
    min-height: var(--db-tap);
    padding: 0.5rem 0.75rem;
    background: none;
    border: 1px solid var(--db-border-strong);
    border-radius: var(--db-radius);
    color: var(--db-text);
    font-family: inherit;
    font-size: var(--db-fs-sm);
    font-weight: 700;
    cursor: pointer;
}
.db-burger__box { position: relative; display: block; width: 18px; height: 12px; }
.db-burger__bar, .db-burger__bar::before, .db-burger__bar::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}
.db-burger__bar { top: 5px; }
.db-burger__bar::before { content: ""; top: -5px; }
.db-burger__bar::after { content: ""; top: 5px; }
.db-burger__label { display: none; }
@media (min-width: 480px) { .db-burger__label { display: inline; } }

/* ==========================================================================
   06. Mobile drawer
   ========================================================================== */

.db-drawer { position: fixed; inset: 0; z-index: 200; }
.db-drawer[hidden] { display: none; }

.db-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 28, 51, 0.5);
    opacity: 0;
    transition: opacity 0.25s var(--db-ease);
}
.db-drawer.is-open .db-drawer__backdrop { opacity: 1; }

.db-drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    width: min(22rem, 100%);
    background: #fff;
    box-shadow: var(--db-shadow-lg);
    transform: translateX(100%);
    transition: transform 0.25s var(--db-ease);
    /* Respect notches and the iOS home indicator. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
.db-drawer.is-open .db-drawer__panel { transform: translateX(0); }

.db-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--db-space-md);
    padding: var(--db-space-md);
    border-bottom: 1px solid var(--db-border);
    flex: 0 0 auto;
}
.db-drawer__logo img { display: block; width: auto; height: 32px; }

.db-drawer__close {
    display: grid;
    place-items: center;
    width: var(--db-tap);
    height: var(--db-tap);
    background: none;
    border: 1px solid var(--db-border-strong);
    border-radius: var(--db-radius);
    color: var(--db-text);
    font-size: 1.1rem;
    cursor: pointer;
}

/* The nav scrolls; header and footer stay put, so the CTA is always reachable
   even on a 500px-tall landscape phone. */
.db-drawer__nav { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.db-drawer__list, .db-drawer__sub { list-style: none; margin: 0; padding: 0; }

.db-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--db-space-sm);
    width: 100%;
    min-height: 52px;
    padding: 0.75rem var(--db-space-md);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--db-border);
    color: var(--db-text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.db-drawer__link:hover, .db-drawer__link:focus-visible { background: var(--db-bg-soft); text-decoration: none; }
.db-drawer__link.is-current { color: var(--db-blue); box-shadow: inset 3px 0 0 var(--db-yellow); }

.db-drawer__caret {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s var(--db-ease);
}
.db-drawer__accordion[aria-expanded="true"] .db-drawer__caret { transform: rotate(-135deg); }

.db-drawer__sub { background: var(--db-bg-soft); }
.db-drawer__sub[hidden] { display: none; }

.db-drawer__sublink {
    display: flex;
    align-items: center;
    min-height: var(--db-tap);
    padding: 0.7rem var(--db-space-md) 0.7rem 2rem;
    border-bottom: 1px solid var(--db-border);
    color: var(--db-text-soft);
    font-size: 0.9375rem;
}
.db-drawer__sublink:hover, .db-drawer__sublink:focus-visible { color: var(--db-blue); text-decoration: none; }
.db-drawer__sublink--all { font-weight: 700; color: var(--db-blue); }

.db-drawer__footer {
    flex: 0 0 auto;
    padding: var(--db-space-md);
    border-top: 1px solid var(--db-border);
}
.db-drawer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--db-space-md);
    margin-top: var(--db-space-sm);
}
.db-drawer__meta a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--db-tap);
    font-size: var(--db-fs-sm);
    font-weight: 600;
}

/* ==========================================================================
   07. Sections & containers
   ========================================================================== */

.db-page { padding-top: 0; }

.db-section { padding-block: var(--db-section); }
.db-section--tight { padding-block: var(--db-section-tight); }
.db-section--soft { background: var(--db-bg-soft); }
.db-section--deep { background: var(--db-bg-deep); color: var(--db-text-on-dark); }

.db-section--deep :where(h1, h2, h3, h4) { color: #fff; }
.db-section--deep p { color: var(--db-text-on-dark-soft); }
.db-section--deep a { color: var(--db-yellow); }

.db-wrap {
    width: 100%;
    max-width: var(--db-max);
    margin-inline: auto;
    padding-inline: var(--db-gutter);
}

.db-section__head { margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.db-section__head--center { text-align: center; }
.db-section__head--center .db-lead { margin-inline: auto; }

/* Anchor targets clear the sticky header. */
.db-page :where([id]) { scroll-margin-top: calc(var(--db-header-h) + 1rem); }

/* ==========================================================================
   08. Hero
   ========================================================================== */

.db-hero {
    position: relative;
    padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
    background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
    border-bottom: 1px solid var(--db-border);
}

.db-hero__inner { max-width: 56rem; }
.db-hero--center .db-hero__inner { margin-inline: auto; text-align: center; }
.db-hero--center .db-lead { margin-inline: auto; }
.db-hero--center .db-btn-group { justify-content: center; }

.db-hero__title { font-size: var(--db-fs-h1); margin-bottom: var(--db-space-md); }
.db-hero__sub { font-size: var(--db-fs-lead); line-height: 1.55; max-width: 52ch; }

.db-strip { margin-top: clamp(1.75rem, 1rem + 3vw, 3rem); }

.db-strip__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--db-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.db-strip__item {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.9rem;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-pill);
    font-size: var(--db-fs-sm);
    font-weight: 700;
    color: var(--db-text);
    white-space: nowrap;
}
.db-strip__item::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: var(--db-yellow);
    flex: 0 0 auto;
}

/* Page hero for interior pages */
.db-pagehero {
    padding-block: clamp(2rem, 1.2rem + 3.5vw, 4rem);
    background: var(--db-bg-soft);
    border-bottom: 1px solid var(--db-border);
}
.db-pagehero__promise {
    font-size: var(--db-fs-h3);
    font-weight: 700;
    color: var(--db-blue);
    margin: 0 0 var(--db-space-md);
    max-width: 40ch;
}

/* ==========================================================================
   09. Cards & grids
   --------------------------------------------------------------------------
   Every grid uses auto-fit + minmax so column counts respond to the space
   available rather than to a hard-coded col-lg-4.
   ========================================================================== */

.db-grid {
    display: grid;
    gap: var(--db-gutter);
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.db-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.db-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

.db-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--db-space-lg);
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-lg);
    transition: border-color 0.2s var(--db-ease), box-shadow 0.2s var(--db-ease), transform 0.2s var(--db-ease);
}
.db-card:hover { border-color: var(--db-border-strong); box-shadow: var(--db-shadow); transform: translateY(-2px); }

.db-card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--db-space-md);
    border-radius: 12px;
    background: rgba(255, 195, 21, 0.18);
    color: #7a5a00;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.db-card__title { font-size: var(--db-fs-h4); margin-bottom: var(--db-space-xs); }

/* The whole card is clickable, but only the title is a real link, so the
   accessible name stays meaningful and the link is keyboard-reachable. */
.db-card__title a { color: inherit; }
.db-card__title a::after { content: ""; position: absolute; inset: 0; }
.db-card--link { position: relative; }
.db-card__title a:hover, .db-card__title a:focus-visible { color: var(--db-blue); text-decoration: none; }
.db-card--link:focus-within { border-color: var(--db-blue); }

.db-card__text { font-size: var(--db-fs-sm); line-height: 1.6; margin: 0; }
.db-card__more { margin-top: auto; padding-top: var(--db-space-md); font-weight: 700; font-size: var(--db-fs-sm); color: var(--db-blue); }

/* Compact tile used for industries and "why" blocks */
.db-tile {
    padding: var(--db-space-lg);
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-lg);
    height: 100%;
}
.db-tile__title { font-size: var(--db-fs-h4); margin-bottom: var(--db-space-xs); }
.db-tile__text { font-size: var(--db-fs-sm); line-height: 1.6; margin: 0; }
.db-tile__icon { color: var(--db-blue); font-size: 1.35rem; margin-bottom: var(--db-space-sm); display: block; }

.db-section--deep .db-tile { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.db-section--deep .db-tile__icon { color: var(--db-yellow); }

/* ==========================================================================
   10. Stepper / process flow
   --------------------------------------------------------------------------
   Vertical timeline first (mobile), horizontal stepper from 768px up. Never
   scrolls horizontally at any width.
   ========================================================================== */

.db-steps {
    display: grid;
    gap: var(--db-space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: db-step;
}

.db-step {
    position: relative;
    counter-increment: db-step;
    padding-left: 3.25rem;
}

.db-step::before {
    content: counter(db-step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--db-yellow);
    color: var(--db-ink);
    font-weight: 700;
    font-size: 0.9375rem;
    z-index: 1;
}

/* Connector line down the left on mobile. */
.db-step::after {
    content: "";
    position: absolute;
    left: calc(1.125rem - 1px);
    top: 2.25rem;
    bottom: calc(var(--db-space-lg) * -1);
    width: 2px;
    background: var(--db-border);
}
.db-step:last-child::after { display: none; }

.db-step__title { font-size: var(--db-fs-h4); margin-bottom: 0.35rem; }
.db-step__text { font-size: var(--db-fs-sm); line-height: 1.6; margin: 0; }

@media (min-width: 768px) {
    .db-steps--horizontal {
        grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
        gap: var(--db-space-lg) var(--db-space-md);
    }
    .db-steps--horizontal .db-step { padding-left: 0; padding-top: 3.25rem; text-align: left; }
    .db-steps--horizontal .db-step::before { left: 0; top: 0; }
    .db-steps--horizontal .db-step::after {
        left: 2.25rem;
        right: calc(var(--db-space-md) * -1);
        top: calc(1.125rem - 1px);
        bottom: auto;
        width: auto;
        height: 2px;
    }
    /* Hide the connector on the last item of each visual row. */
    .db-steps--horizontal .db-step:last-child::after { display: none; }
}

/* Chain flow: A -> B -> C. Wraps instead of scrolling. */
.db-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--db-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.db-chain__item {
    display: flex;
    align-items: center;
    gap: var(--db-space-xs);
    flex: 1 1 auto;
    min-width: 0;
}

.db-chain__label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: var(--db-tap);
    padding: 0.65rem 0.9rem;
    background: #fff;
    border: 1px solid var(--db-border);
    border-left: 3px solid var(--db-yellow);
    border-radius: var(--db-radius);
    font-size: var(--db-fs-sm);
    font-weight: 700;
    color: var(--db-text);
    text-align: center;
    line-height: 1.35;
}

.db-chain__arrow {
    flex: 0 0 auto;
    color: var(--db-muted);
    font-weight: 700;
    line-height: 1;
}
.db-chain__item:last-child .db-chain__arrow { display: none; }

.db-section--deep .db-chain__label { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); border-left-color: var(--db-yellow); color: #fff; }
.db-section--deep .db-chain__arrow { color: var(--db-text-on-dark-soft); }

.db-flow { padding: var(--db-space-lg); background: var(--db-bg-soft); border: 1px solid var(--db-border); border-radius: var(--db-radius-lg); }
.db-flow__note { margin-top: var(--db-space-md); font-size: var(--db-fs-sm); }
.db-section--deep .db-flow { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }

/* ==========================================================================
   11. Ecosystem diagram
   --------------------------------------------------------------------------
   Built from HTML + CSS rather than a fixed-size image, so it reflows from
   one column at 320px to three at desktop.
   ========================================================================== */

.db-eco {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--db-space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: db-eco;
}

.db-eco__item {
    display: flex;
    align-items: center;
    gap: var(--db-space-sm);
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--db-radius);
    color: #fff;
    font-weight: 600;
    font-size: var(--db-fs-sm);
    line-height: 1.35;
    min-width: 0;
}

.db-eco__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: rgba(255, 195, 21, 0.2);
    color: var(--db-yellow);
    font-size: 1rem;
}

.db-eco__label { min-width: 0; overflow-wrap: break-word; }

/* ==========================================================================
   12. Capability lists
   --------------------------------------------------------------------------
   Long feature lists flow into as many columns as fit, rather than a fixed
   three that overflow at 320px.
   ========================================================================== */

.db-caps { display: grid; gap: var(--db-gutter); }

.db-capgroup {
    padding: var(--db-space-lg);
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-lg);
}
.db-capgroup__title {
    font-size: var(--db-fs-h4);
    margin-bottom: var(--db-space-md);
    padding-bottom: var(--db-space-sm);
    border-bottom: 1px solid var(--db-border);
}

.db-caplist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 0.15rem var(--db-space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.db-caplist li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.5rem;
    font-size: var(--db-fs-sm);
    line-height: 1.55;
    min-width: 0;
}
.db-caplist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--db-yellow);
}

/* Checkmark variant for "what's included" on service pages */
.db-caplist--check li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    background: none;
    width: auto;
    height: auto;
    top: 0.3em;
    color: var(--db-green);
    font-size: 0.7rem;
    border-radius: 0;
}

/* ==========================================================================
   13. Case studies
   ========================================================================== */

.db-case { display: grid; gap: var(--db-section-tight); }

.db-case__block { }
.db-case__label {
    display: inline-block;
    margin-bottom: var(--db-space-sm);
    padding: 0.25rem 0.7rem;
    background: rgba(255, 195, 21, 0.2);
    border-radius: var(--db-radius-pill);
    font-size: var(--db-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a5a00;
}

.db-case__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--db-space-sm); }
.db-case__list li {
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.65;
}
.db-case__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--db-yellow);
}

.db-note {
    padding: var(--db-space-md) var(--db-space-lg);
    background: var(--db-bg-soft);
    border-left: 4px solid var(--db-border-strong);
    border-radius: 0 var(--db-radius) var(--db-radius) 0;
    font-size: var(--db-fs-sm);
}

/* ==========================================================================
   14. Contact & forms
   ========================================================================== */

.db-formgrid { display: grid; gap: var(--db-space-md); }
@media (min-width: 640px) {
    .db-formgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.db-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }

.db-field__label { font-size: var(--db-fs-sm); font-weight: 700; color: var(--db-text); }
.db-field__opt { font-weight: 400; color: var(--db-text-soft); }

.db-field__hint { font-size: var(--db-fs-xs); color: var(--db-text-soft); }

.db-field__control {
    width: 100%;
    min-height: var(--db-tap);
    padding: 0.7rem 0.9rem;
    background: #fff;
    border: 1px solid var(--db-border-strong);
    border-radius: var(--db-radius);
    color: var(--db-text);
    font-family: inherit;
    /* 16px minimum stops iOS Safari zooming on focus. */
    font-size: 1rem;
    line-height: 1.5;
}
.db-field__control:focus { border-color: var(--db-blue); }
textarea.db-field__control { min-height: 9rem; resize: vertical; }

.db-field__control[aria-invalid="true"] { border-color: #c22a2a; background: #fff8f8; }

.db-field__error { font-size: var(--db-fs-xs); font-weight: 600; color: #a81f1f; }
.db-field__error[hidden] { display: none; }

/* Honeypot: off-screen but not display:none, so bots still fill it. */
.db-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.db-form-status { margin-top: var(--db-space-md); font-weight: 600; font-size: var(--db-fs-sm); }
.db-form-status--ok { color: #1c7c4a; }
.db-form-status--error { color: #a81f1f; }

.db-contactgrid { display: grid; gap: var(--db-section-tight); }
@media (min-width: 900px) { .db-contactgrid { grid-template-columns: 1.15fr 0.85fr; gap: var(--db-space-2xl); } }

.db-office { padding: var(--db-space-lg); background: #fff; border: 1px solid var(--db-border); border-radius: var(--db-radius-lg); }
.db-office__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: var(--db-fs-sm); }
.db-office__list a { overflow-wrap: anywhere; }

.db-deflist { display: grid; gap: 0.5rem; margin: 0; }
@media (min-width: 480px) { .db-deflist { grid-template-columns: auto 1fr; gap: 0.5rem var(--db-space-md); } }
.db-deflist dt { font-weight: 700; color: var(--db-text); font-size: var(--db-fs-sm); }
.db-deflist dd { margin: 0; font-size: var(--db-fs-sm); overflow-wrap: anywhere; }

/* ==========================================================================
   15. Footer
   ========================================================================== */

.db-footer {
    background: var(--db-bg-deep);
    color: var(--db-text-on-dark-soft);
    padding-block: var(--db-section-tight);
    padding-bottom: calc(var(--db-section-tight) + env(safe-area-inset-bottom));
}

.db-footer .container { max-width: var(--db-max); }

.db-footer__grid {
    display: grid;
    gap: var(--db-space-xl);
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
@media (min-width: 992px) { .db-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.db-footer__logo { display: block; width: auto; height: 40px; margin-bottom: var(--db-space-md); }
.db-footer__tagline { font-size: var(--db-fs-sm); color: var(--db-text-on-dark-soft); margin-bottom: var(--db-space-md); }

.db-footer__title {
    font-size: var(--db-fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 var(--db-space-md);
}

.db-footer__list, .db-footer__contact, .db-footer__legal { list-style: none; margin: 0; padding: 0; }
.db-footer__list li, .db-footer__contact li { margin-bottom: 0.15rem; }

.db-footer__list a, .db-footer__contact a, .db-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: var(--db-tap);
    padding-block: 0.15rem;
    font-size: var(--db-fs-sm);
    color: var(--db-text-on-dark-soft);
    overflow-wrap: anywhere;
}
.db-footer__list a:hover, .db-footer__contact a:hover, .db-footer__legal a:hover,
.db-footer__list a:focus-visible, .db-footer__contact a:focus-visible, .db-footer__legal a:focus-visible {
    color: var(--db-yellow);
    text-decoration: underline;
}

.db-footer__contact li { font-size: var(--db-fs-sm); line-height: 1.6; }

.db-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--db-space-md);
    margin-top: var(--db-space-xl);
    padding-top: var(--db-space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.db-footer__copy { margin: 0; font-size: var(--db-fs-xs); }
.db-footer__legal { display: flex; flex-wrap: wrap; gap: var(--db-space-md); }

/* ==========================================================================
   16. Breadcrumb, 404, utilities
   ========================================================================== */

.db-crumbs { padding-block: var(--db-space-sm); border-bottom: 1px solid var(--db-border); background: #fff; }
.db-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--db-fs-xs);
}
.db-crumbs__list li { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.db-crumbs__list li + li::before { content: "/"; color: var(--db-border-strong); }
.db-crumbs__list a { color: var(--db-text-soft); }
.db-crumbs__list [aria-current="page"] { color: var(--db-text); font-weight: 600; }

.db-404 { text-align: center; padding-block: clamp(3rem, 2rem + 6vw, 7rem); }
.db-404__code {
    font-size: clamp(3.5rem, 2rem + 10vw, 8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--db-yellow);
    margin: 0 0 var(--db-space-md);
}

.db-cta {
    background: var(--db-bg-deep);
    color: var(--db-text-on-dark);
    padding-block: var(--db-section-tight);
}
.db-cta__inner { display: grid; gap: var(--db-space-lg); align-items: center; }
@media (min-width: 900px) { .db-cta__inner { grid-template-columns: 1.4fr auto; gap: var(--db-space-2xl); } }
.db-cta h2 { color: #fff; margin-bottom: var(--db-space-xs); }
.db-cta p { color: var(--db-text-on-dark-soft); margin: 0; max-width: 60ch; }
.db-cta .db-btn-group { margin-top: 0; }

.db-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.db-stack { display: grid; gap: var(--db-space-md); }
.db-stack--lg { gap: var(--db-space-lg); }

/* --------------------------------------------------------------------------
   Legal pages
   The privacy/cookie text is generator output full of inline styles and
   fixed-width tables. Rather than editing the legal wording, contain it.
   -------------------------------------------------------------------------- */

.db-legal { max-width: 80ch; font-size: var(--db-fs-sm); line-height: 1.7; }
.db-legal :where(h1, h2, h3, h4) { margin-top: var(--db-space-xl); }
.db-legal :where(p, li) { overflow-wrap: break-word; }
.db-legal a { overflow-wrap: anywhere; }

/* Neutralise the hard-coded widths and font sizes in the generated markup. */
.db-legal :where([style*="width"]) { max-width: 100%; }
.db-legal :where(span, div) { font-size: inherit !important; line-height: inherit !important; }

/* Tables scroll inside their own box instead of widening the page. */
.db-legal table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}
.db-legal :where(td, th) { padding: 0.5rem; vertical-align: top; min-width: 8rem; }

/* ==========================================================================
   17. Reduced motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .db-page *,
    .db-header *,
    .db-drawer *,
    .db-footer * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .db-card:hover, .db-btn:hover { transform: none; }
}

@media print {
    .db-header, .db-drawer, .db-cta, .db-footer__legal { display: none; }
    .db-page { color: #000; }
    .db-section { padding-block: 1rem; }
}