/* =========================================================================
   BrandUI — Modern Design Layer
   Loaded AFTER css/style.css. Purely additive: refines typography, depth,
   colour and motion without altering the existing markup structure.

   01. Design tokens
   02. Base & typography
   03. Ambient atmosphere (grain, aurora, progress)
   04. Navigation
   05. Buttons, links & icons
   06. Section rhythm & headings
   07. Surfaces & cards
   08. Hero
   09. Forms
   10. Footer
   11. Reveal & micro-interaction utilities
   12. Component refinements
   13. Responsive
   14. Accessibility / reduced motion
   ========================================================================= */

/* ================== 01. Design tokens ================== */

:root {
    /* Brand ramp — warm ember, built around the existing #ff7f00 */
    --bu-brand: #ff7f00;
    --bu-brand-100: #ffd9ad;
    --bu-brand-300: #ffb35c;
    --bu-brand-500: #ff7f00;
    --bu-brand-700: #e2590a;
    --bu-brand-900: #8f3403;

    --bu-gradient: linear-gradient(135deg, #ffa02e 0%, #ff7f00 45%, #db5405 100%);
    --bu-gradient-soft: linear-gradient(135deg, rgba(255, 179, 92, .16), rgba(226, 89, 10, .04));

    /* Neutral surfaces — warm-tinted ink rather than flat black */
    --bu-ink: #050506;
    --bu-surface: #0b0b0e;
    --bu-surface-2: #101014;
    --bu-surface-3: #16161b;
    --bu-line: rgba(255, 255, 255, .075);
    --bu-line-strong: rgba(255, 255, 255, .14);
    --bu-text: #ececf1;
    --bu-muted: #9b9ba6;

    /* Elevation — layered, low-opacity, never a single hard drop shadow */
    --bu-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .22);
    --bu-shadow-md: 0 2px 6px rgba(0, 0, 0, .28), 0 14px 34px rgba(0, 0, 0, .34);
    --bu-shadow-lg: 0 4px 12px rgba(0, 0, 0, .3), 0 30px 70px rgba(0, 0, 0, .45);
    --bu-glow: 0 10px 40px -12px rgba(255, 127, 0, .55);

    /* Radii */
    --bu-r-sm: 12px;
    --bu-r-md: 18px;
    --bu-r-lg: 26px;
    --bu-r-xl: 34px;
    --bu-r-pill: 999px;

    /* Easing — custom curves, not the browser defaults */
    --bu-ease: cubic-bezier(.22, .61, .36, 1);
    --bu-ease-out: cubic-bezier(.16, 1, .3, 1);
    --bu-ease-spring: cubic-bezier(.34, 1.32, .64, 1);
    --bu-dur: .45s;

    /* Spatial rhythm */
    --bu-space-section: clamp(72px, 9vw, 140px);
    --bu-gutter: clamp(18px, 4vw, 40px);

    /* Logo sizing — both theme variants share one box, they are cropped
       to the same 3:1 ratio so they must render at the same size. */
    --bu-logo-h: clamp(30px, 4.5vw, 42px);
    --bu-logo-h-footer: clamp(26px, 4vw, 34px);

    /* Wave masks. Each path spans exactly two periods across the 1440
       viewBox and ends at the same height and tangent it started on, so
       the tile repeats without a visible seam. */
    --bu-wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 140 C120 60 240 60 360 140 C480 220 600 220 720 140 C840 60 960 60 1080 140 C1200 220 1320 220 1440 140 L1440 320 L0 320 Z' fill='%23fff'/%3E%3C/svg%3E");
    --bu-wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 160 C120 100 240 100 360 160 C480 220 600 220 720 160 C840 100 960 100 1080 160 C1200 220 1320 220 1440 160 L1440 320 L0 320 Z' fill='%23fff'/%3E%3C/svg%3E");
    --bu-wave-b-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 160 C120 100 240 100 360 160 C480 220 600 220 720 160 C840 100 960 100 1080 160 C1200 220 1320 220 1440 160' fill='none' stroke='%23fff' stroke-width='4'/%3E%3C/svg%3E");
    --bu-wave-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 180 C120 135 240 135 360 180 C480 225 600 225 720 180 C840 135 960 135 1080 180 C1200 225 1320 225 1440 180 L1440 320 L0 320 Z' fill='%23fff'/%3E%3C/svg%3E");
}

body.lightmode {
    --bu-ink: #ffffff;
    --bu-surface: #ffffff;
    --bu-surface-2: #f7f6f4;
    --bu-surface-3: #f1efec;
    --bu-line: rgba(12, 10, 8, .09);
    --bu-line-strong: rgba(12, 10, 8, .16);
    --bu-text: #16151a;
    --bu-muted: #5d5c66;
    --bu-shadow-sm: 0 1px 2px rgba(24, 18, 10, .06), 0 4px 12px rgba(24, 18, 10, .05);
    --bu-shadow-md: 0 2px 6px rgba(24, 18, 10, .06), 0 16px 34px rgba(24, 18, 10, .09);
    --bu-shadow-lg: 0 4px 12px rgba(24, 18, 10, .07), 0 32px 70px rgba(24, 18, 10, .13);
}

/* The template marks permanently dark islands (hero, CTA banners) with
   .keep-dark — re-assert the dark token set there so light mode never
   paints dark-on-dark text. */
body.lightmode .keep-dark {
    --bu-ink: #050506;
    --bu-surface: #0b0b0e;
    --bu-surface-2: #101014;
    --bu-surface-3: #16161b;
    --bu-line: rgba(255, 255, 255, .075);
    --bu-line-strong: rgba(255, 255, 255, .14);
    --bu-text: #ececf1;
    --bu-muted: #9b9ba6;
}

/* ================== 02. Base & typography ================== */

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

body {
    color: var(--bu-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    /* `clip` (not `hidden`) — `hidden` would turn <body> into a scroll
       container and break the sticky header. */
    overflow-x: clip;
}

::selection {
    background: var(--bu-brand-500);
    color: #fff;
}

/* Fluid type scale — one ratio, applied consistently */
h1,
.title-heading-banner {
    font-size: clamp(2.35rem, 1.05rem + 4.6vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 800;
}

h2,
.title-heading {
    font-size: clamp(1.9rem, 1.05rem + 2.7vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 800;
}

h3 {
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
    line-height: 1.14;
    letter-spacing: -.022em;
}

h4 {
    font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem);
    line-height: 1.25;
    letter-spacing: -.015em;
}

h5 {
    font-size: clamp(1.05rem, .98rem + .35vw, 1.28rem);
    line-height: 1.35;
    letter-spacing: -.01em;
}

h6 {
    font-size: 1.02rem;
    line-height: 1.4;
    letter-spacing: -.005em;
}

p {
    font-size: clamp(.98rem, .94rem + .18vw, 1.075rem);
    line-height: 1.72;
    font-weight: 400;
    color: var(--bu-muted);
    margin-bottom: 1.05em;
    max-width: 68ch;
    text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

/* Restore crisp headline colour: the template faded headings into
   transparency, which killed contrast. Keep a subtle sheen instead. */
.title-heading,
.title-heading-banner {
    background-image: linear-gradient(176deg, var(--bu-text) 0%, var(--bu-text) 74%, color-mix(in srgb, var(--bu-text) 72%, transparent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--bu-text);
}

.accent-color,
.text-accent {
    color: var(--bu-brand-500);
}

/* Custom scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 127, 0, .5) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--bu-brand-300), var(--bu-brand-700));
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bu-brand-500);
    background-clip: padding-box;
    border: 3px solid transparent;
}

/* Visible, on-brand focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--bu-brand-500);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ================== 03. Ambient atmosphere ================== */

/* Fine film grain — keeps large flat areas from banding */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: .028;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.lightmode::after {
    opacity: .05;
    mix-blend-mode: multiply;
}

/* Ambient page glow — a static gradient pair. This used to be two
   blur(90px) layers drifting on a 22s loop, which cost more GPU time than
   the rest of the site combined; the hero waves now carry the atmosphere,
   so this is paint-once and never animates. */
.bu-aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
    background:
        radial-gradient(38vw 38vw at 8% 0%, rgba(255, 138, 16, .13), transparent 62%),
        radial-gradient(32vw 32vw at 96% 100%, rgba(226, 89, 10, .10), transparent 64%);
}

body.lightmode .bu-aurora {
    background:
        radial-gradient(38vw 38vw at 8% 0%, rgba(255, 138, 16, .09), transparent 62%),
        radial-gradient(32vw 32vw at 96% 100%, rgba(226, 89, 10, .07), transparent 64%);
}

/* Pause anything decorative while it is scrolled out of view. Toggled by
   js/brandui-modern.js — off-screen animations still burn GPU otherwise. */
.bu-idle,
.bu-idle * {
    animation-play-state: paused !important;
}

/* Keep real content above the atmosphere */
header,
main,
footer,
.section-footer {
    position: relative;
    z-index: 1;
}

/* Reading-progress hairline */
.bu-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--bu-gradient);
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 0 14px rgba(255, 127, 0, .8);
}

/* ================== 04. Navigation ================== */

header {
    position: sticky;
    top: 0;
    z-index: 900;
}

.navbar-wrapper {
    padding: 18px var(--bu-gutter);
    transition: padding var(--bu-dur) var(--bu-ease);
}

.navbar {
    border: 1px solid var(--bu-line);
    background: color-mix(in srgb, var(--bu-surface) 72%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-radius: var(--bu-r-lg);
    padding: 12px 14px 12px 24px;
    box-shadow: var(--bu-shadow-sm);
    transition: background var(--bu-dur) var(--bu-ease),
        border-color var(--bu-dur) var(--bu-ease),
        box-shadow var(--bu-dur) var(--bu-ease),
        transform var(--bu-dur) var(--bu-ease);
}

body.lightmode .navbar {
    background: color-mix(in srgb, #fff 78%, transparent);
}

/* Compact, lifted state once the page scrolls */
.bu-scrolled .navbar-wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
}

.bu-scrolled .navbar {
    border-color: var(--bu-line-strong);
    box-shadow: var(--bu-shadow-md), 0 0 0 1px rgba(255, 127, 0, .1);
    background: color-mix(in srgb, var(--bu-surface) 88%, transparent);
}

body.lightmode.bu-scrolled .navbar {
    background: color-mix(in srgb, #fff 92%, transparent);
}

.navbar-container {
    align-items: center;
}

/* The template's .logo-container/.logo-container img rules set percentage
   widths that fight with the logo's own aspect ratio at every breakpoint
   (40%/60%/80%/100% depending on viewport), stretching and warping the
   mark. Own the sizing here with a single fluid height and width:auto so
   the image always keeps its native proportions, on every device. Selector
   specificity (.logo-container .site-logo) intentionally outranks the
   legacy `.logo-container img` rule so this wins regardless of viewport. */
.logo-container {
    width: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.logo-container .site-logo,
.navbar-brand .site-logo,
.site-logo {
    width: auto;
    height: var(--bu-logo-h);
    /* Both theme variants are cropped to the same 3:1 ratio, so reserving the
       box keeps the logo identical in size across themes and prevents the
       width collapsing to 0 while the swapped bitmap decodes. */
    aspect-ratio: 3 / 1;
    max-width: 46vw;
    object-fit: contain;
    object-position: left center;
    transition: opacity .3s var(--bu-ease);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
}

.navbar-brand:hover .site-logo {
    opacity: .82;
}

/* Nav links — a sliding pill indicator instead of a flat colour change */
.navbar-nav {
    gap: 2px;
}

.nav-item {
    position: relative;
}

.nav-link {
    position: relative;
    color: var(--bu-muted);
    font-weight: 500;
    letter-spacing: -.005em;
    padding: 10px 18px !important;
    border-radius: var(--bu-r-pill);
    transition: color .3s var(--bu-ease);
    z-index: 1;
}

.nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--bu-brand-500) 12%, transparent);
    opacity: 0;
    transform: scale(.86);
    transition: opacity .32s var(--bu-ease), transform .38s var(--bu-ease-spring);
    z-index: -1;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    color: var(--bu-text);
}

.nav-link:hover::before,
.nav-link:focus::before,
.nav-link.active::before {
    opacity: 1;
    transform: scale(1);
}

.nav-link.active {
    color: var(--bu-brand-500);
}

/* Phone pill */
.navbar-icon-wrapper {
    width: auto;
    gap: 12px;
    padding: 5px 5px 5px 5px;
    border: 1px solid var(--bu-line);
    background: color-mix(in srgb, var(--bu-surface-2) 60%, transparent);
    transition: border-color .35s var(--bu-ease), background .35s var(--bu-ease), transform .35s var(--bu-ease);
}

.navbar-icon-wrapper:hover {
    border-color: color-mix(in srgb, var(--bu-brand-500) 55%, transparent);
    transform: translateY(-1px);
    box-shadow: var(--bu-glow);
}

.navbar-icon-wrapper h6 {
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-right: 14px;
    white-space: nowrap;
}

.themeswitch {
    border: 1px solid var(--bu-line);
    background: var(--bu-surface-2);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform .5s var(--bu-ease-spring), border-color .3s var(--bu-ease), background .3s var(--bu-ease);
}

.themeswitch:hover {
    transform: rotate(-25deg) scale(1.06);
    border-color: color-mix(in srgb, var(--bu-brand-500) 60%, transparent);
    background: color-mix(in srgb, var(--bu-brand-500) 14%, var(--bu-surface-2));
}

.nav-btn {
    border-radius: var(--bu-r-md);
    background: var(--bu-gradient);
    border: none;
    box-shadow: var(--bu-glow);
    transition: transform .35s var(--bu-ease-spring), box-shadow .35s var(--bu-ease);
}

.nav-btn:active {
    transform: scale(.94);
}

/* ================== 05. Buttons, links & icons ================== */

.btn-accent {
    position: relative;
    isolation: isolate;
    background: var(--bu-surface-2);
    border: 1px solid var(--bu-line-strong);
    box-shadow: var(--bu-shadow-sm);
    overflow: hidden;
    transition: transform .5s var(--bu-ease-out),
        box-shadow .5s var(--bu-ease-out),
        border-color .4s var(--bu-ease);
    will-change: transform;
}

/* Gradient wash that wipes in from the left on hover */
.btn-accent::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bu-gradient);
    transform: translateX(-101%) skewX(-8deg);
    transition: transform .6s var(--bu-ease-out);
    z-index: -1;
}

.btn-accent:hover,
.btn-accent:focus-visible {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--bu-shadow-md), var(--bu-glow);
    background: var(--bu-surface-2);
}

.btn-accent:hover::before,
.btn-accent:focus-visible::before {
    transform: translateX(0) skewX(0deg);
}

.btn-accent:active {
    transform: translateY(-1px) scale(.985);
}

.btn-title {
    padding: 16px 8px 16px 24px;
    letter-spacing: -.01em;
    font-weight: 600;
    white-space: nowrap;
}

.btn:hover .btn-title a,
.btn:hover .btn-title span,
.btn:focus .btn-title a,
.btn:focus .btn-title span {
    color: #fff !important;
}

body.lightmode .btn-accent {
    background: var(--bu-surface);
    border-color: var(--bu-line-strong);
}

body.lightmode .keep-dark .btn-accent {
    background: var(--bu-surface-2);
}

/* Circular icon chip — used inside buttons, cards and the navbar */
.icon-circle {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bu-gradient);
    color: #fff;
    transition: transform .55s var(--bu-ease-spring), box-shadow .4s var(--bu-ease);
}

.icon-circle i {
    transition: transform .45s var(--bu-ease-out);
}

.btn:hover .icon-circle,
.btn:focus-visible .icon-circle {
    background: #fff;
    color: var(--bu-brand-700);
    transform: rotate(-45deg);
}

.btn:hover .icon-circle i,
.btn:focus-visible .icon-circle i {
    color: var(--bu-brand-700);
}

.navbar-icon-wrapper:hover .icon-circle {
    transform: scale(1.08) rotate(-12deg);
}

/* Inline text links: underline grows from the left */
.expertise-link a,
.footer-list a,
.detail-list a,
.link-wrapper a {
    position: relative;
    background-image: linear-gradient(var(--bu-brand-500), var(--bu-brand-500));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: background-size .45s var(--bu-ease-out), color .3s var(--bu-ease);
    padding-bottom: 2px;
}

.expertise-link a:hover,
.footer-list a:hover,
.detail-list a:hover,
.link-wrapper a:hover {
    background-size: 100% 1.5px;
    color: var(--bu-brand-500);
}

.expertise-link i {
    transition: transform .45s var(--bu-ease-spring);
}

.expertise-link:hover i {
    transform: translateX(6px);
}

/* Check lists — the template drew these bullets with Font Awesome glyphs,
   but Font Awesome is not loaded on any page, so they rendered as tofu.
   Redrawn in pure CSS: a gradient chip with a stroked tick. */
.check-list li,
.single-service-list li {
    position: relative;
    padding-left: 34px;
    transition: transform .35s var(--bu-ease), color .35s var(--bu-ease);
}

.check-list li:hover,
.single-service-list li:hover {
    transform: translateX(4px);
}

.check-list li::before,
.single-service-list li::before {
    content: "";
    font-family: inherit;
    position: absolute;
    left: 0;
    top: .1em;
    width: 21px;
    height: 21px;
    border-radius: 7px;
    background: var(--bu-gradient);
    box-shadow: 0 5px 12px -5px rgba(255, 127, 0, .9);
}

.check-list li::after,
.single-service-list li::after {
    content: "";
    position: absolute;
    left: 7px;
    top: calc(.1em + 5px);
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(43deg);
}

/* Chevron bullets */
.service-list li::before {
    content: "";
    font-family: inherit;
    position: absolute;
    left: 2px;
    top: .55em;
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    opacity: .85;
}

/* Small diamond bullets */
.list-icon li::before {
    content: "";
    font-family: inherit;
    position: absolute;
    left: 2px;
    top: .58em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--bu-brand-500);
    transform: rotate(45deg);
}

/* ================== 06. Section rhythm & headings ================== */

.section {
    padding: var(--bu-space-section) var(--bu-gutter);
}

.section-banner,
.section-guide,
.section-footer,
.section-partner {
    padding-left: var(--bu-gutter);
    padding-right: var(--bu-gutter);
}

.hero-container {
    max-width: 1240px;
    padding-inline: 0;
}

/* Eyebrow: a pill with a pulsing brand dot */
.sub-heading {
    width: fit-content;
    gap: 10px;
    padding: 7px 16px 7px 13px;
    border: 1px solid var(--bu-line);
    border-radius: var(--bu-r-pill);
    background: var(--bu-gradient-soft);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.sub-heading i {
    font-size: 1rem;
    animation: bu-spin 9s linear infinite;
}

.sub-heading span {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bu-text);
}

@keyframes bu-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Numeric counters get tabular figures so they don't jitter while counting */
.counter,
.counter-detail {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -.04em;
}

/* ================== 07. Surfaces & cards ================== */

.card {
    border-radius: var(--bu-r-lg);
    background-color: var(--bu-surface);
    border: 1px solid var(--bu-line);
    box-shadow: var(--bu-shadow-sm);
    transition: transform .55s var(--bu-ease-out),
        box-shadow .55s var(--bu-ease-out),
        border-color .45s var(--bu-ease);
    will-change: transform;
}

/* Pointer-tracked spotlight (coords fed by js/brandui-modern.js) */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s var(--bu-ease);
    background: radial-gradient(340px circle at var(--bu-mx, 50%) var(--bu-my, 50%),
            rgba(255, 138, 16, .14), transparent 62%);
    z-index: 2;
}

.card:hover::after {
    opacity: 1;
}

.card-expertise,
.card-service,
.card-blog,
.card-chooseus,
.card-pricing,
.card-testimonial,
.card-case-studies {
    position: relative;
}

.card-expertise:hover,
.card-service:hover,
.card-blog:hover,
.card-chooseus:hover,
.card-pricing:hover,
.card-testimonial:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--bu-brand-500) 34%, transparent);
    box-shadow: var(--bu-shadow-lg), 0 0 0 1px rgba(255, 127, 0, .12);
}

.card-expertise.card-expertise-counter:hover {
    transform: translateY(-6px);
}

/* Images: contained, with a slow, restrained zoom */
.image-container {
    border-radius: var(--bu-r-lg);
    overflow: hidden;
    position: relative;
}

.image-container>img,
.card-blog .blog-image,
.card-service img {
    transition: transform 1.1s var(--bu-ease-out), filter .6s var(--bu-ease);
    will-change: transform;
}

.image-container:hover>img,
.card-blog:hover .blog-image {
    transform: scale(1.045);
}

/* Divider */
.spacer {
    background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bu-brand-500) 60%, transparent), transparent);
}

/* Accordion */
.accordion-button {
    border-radius: var(--bu-r-md) !important;
    transition: background .35s var(--bu-ease), color .35s var(--bu-ease);
}

.accordion-button:not(.collapsed) {
    color: var(--bu-brand-500);
    background: var(--bu-gradient-soft);
}

.accordion-item {
    border: 1px solid var(--bu-line);
    border-radius: var(--bu-r-md);
    overflow: hidden;
    background: var(--bu-surface);
}

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

.banner-video-container {
    border-radius: var(--bu-r-xl);
    border: 1px solid var(--bu-line);
    padding: clamp(88px, 12vw, 156px) clamp(20px, 4vw, 56px);
    background: var(--bu-ink);
    box-shadow: var(--bu-shadow-lg);
    isolation: isolate;
}

/* ---------------------------------------------------------------
   "Ember Horizon" — the hero backdrop.
   A warm light rising from below the fold, concentric signal rings
   expanding out of it, a masked dot matrix for texture and two slow
   drifting ribbons. Built from composited layers only (transform +
   opacity), so it animates on the GPU and costs no layout work.
   Markup is injected by js/brandui-modern.js.
   --------------------------------------------------------------- */
.bu-hero-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    contain: strict;
    /* Intensity dial: the layers are tuned for the dark hero, so lighter
       surfaces dim the whole stack rather than restating every colour. */
    opacity: var(--bu-fx, 1);
}

/* Horizon glow — static gradient, no filter, so it rasterises once */
.bu-hero-glow {
    position: absolute;
    left: 50%;
    bottom: -18%;
    width: 130%;
    aspect-ratio: 2.1 / 1;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 100%,
            rgba(255, 176, 84, .55) 0%,
            rgba(255, 126, 16, .30) 26%,
            rgba(214, 74, 6, .13) 46%,
            transparent 70%);
}

/* --- Wave stack ---------------------------------------------------
   Each band is a 200%-wide element carrying a seamless two-period SVG
   mask tiled twice. Sliding it exactly -50% of its own width lands the
   second tile where the first began, so the loop is invisible. Only
   `transform` animates: no repaint, no blur, no layout. Cheap enough to
   run on low-end phones. */
.bu-hero-waves {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.bu-hero-wave {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: var(--h);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: 50% 100%;
    mask-size: 50% 100%;
    -webkit-mask-position: var(--mp, left bottom);
    mask-position: var(--mp, left bottom);
    animation: bu-wave var(--dur) linear infinite;
    will-change: transform;
}

.bu-hero-wave--back {
    --h: 32%;
    --dur: 26s;
    --mp: left bottom;
    background: linear-gradient(180deg, rgba(255, 138, 16, .26) 0%, rgba(255, 138, 16, .05) 100%);
    -webkit-mask-image: var(--bu-wave-a);
    mask-image: var(--bu-wave-a);
}

.bu-hero-wave--mid {
    --h: 26%;
    --dur: 18s;
    --mp: 28% bottom;
    background: linear-gradient(180deg, rgba(226, 89, 10, .50) 0%, rgba(226, 89, 10, .10) 100%);
    -webkit-mask-image: var(--bu-wave-b);
    mask-image: var(--bu-wave-b);
}

/* Luminous crest riding the mid band — same geometry, stroked not filled */
.bu-hero-wave--crest {
    --h: 26%;
    --dur: 18s;
    --mp: 28% bottom;
    background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--bu-brand-300) 85%, transparent) 30%,
            color-mix(in srgb, var(--bu-brand-100) 90%, transparent) 50%,
            color-mix(in srgb, var(--bu-brand-300) 85%, transparent) 70%,
            transparent 100%);
    -webkit-mask-image: var(--bu-wave-b-line);
    mask-image: var(--bu-wave-b-line);
    opacity: .55;
}

/* Front band is ink-coloured so the hero grounds into the page below */
.bu-hero-wave--front {
    --h: 19%;
    --dur: 13s;
    --mp: 62% bottom;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--bu-ink) 88%, transparent) 0%,
            var(--bu-ink) 70%);
    -webkit-mask-image: var(--bu-wave-c);
    mask-image: var(--bu-wave-c);
    animation-direction: reverse;
}

/* Dot matrix texture */
.bu-hero-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--bu-text) 30%, transparent) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(62% 54% at 50% 26%, #000 0%, transparent 78%);
    mask-image: radial-gradient(62% 54% at 50% 26%, #000 0%, transparent 78%);
    opacity: .4;
}

/* Floating embers */
.bu-hero-motes i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: var(--bu-brand-300);
    opacity: 0;
    box-shadow: 0 0 8px 1px rgba(255, 150, 50, .5);
    animation: bu-mote var(--dur) ease-in-out infinite;
    animation-delay: var(--d);
}

/* Top fade so the sticky navbar always sits on a clean field */
.bu-hero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--bu-ink) 62%, transparent) 0%,
            transparent 22%);
}

@keyframes bu-wave {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes bu-mote {

    0%,
    100% {
        opacity: 0;
        transform: translateY(6px);
    }

    18%,
    72% {
        opacity: .75;
    }

    100% {
        transform: translateY(-46px);
    }
}

/* Same treatment for the inner pages' banner */
.banner-layout-wrapper {
    border-color: var(--bu-line);
    border-radius: var(--bu-r-xl);
    box-shadow: var(--bu-shadow-md);
}

.banner-layout-wrapper .bu-hero-fx {
    z-index: 0;
    --bu-fx: .7;
}

body.lightmode .banner-layout-wrapper .bu-hero-fx {
    --bu-fx: .26;
}

.banner-layout-wrapper .bu-hero-veil {
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--secondary) 62%, transparent) 0%,
            transparent 30%);
}

.hero-container.position-relative {
    z-index: 2;
}

/* The template reserved a 38% column for a hero video that was never used,
   which shoved the copy into the right half. Collapse it when empty and let
   the headline / copy / CTA read as one deliberate left-aligned column. */
.section-banner .banner-video-content:not(:has(*)) {
    display: none;
}

.section-banner .banner-heading {
    flex-wrap: wrap;
    gap: 24px;
}

.section-banner .hero-container>.d-flex.flex-column {
    gap: clamp(22px, 3vw, 38px);
}

.title-heading-banner {
    max-width: 15ch;
    margin-bottom: 0;
}

.banner-content {
    width: 100%;
    max-width: 620px;
    gap: clamp(22px, 2.4vw, 34px);
}

.banner-content p {
    font-size: clamp(1.02rem, .96rem + .4vw, 1.22rem);
    line-height: 1.65;
    color: var(--bu-muted);
    max-width: 52ch;
    margin-bottom: 0;
}

.banner-reviewer {
    gap: 18px;
    padding-left: 22px;
    position: relative;
}

/* Hairline separating the CTA from the social proof */
.banner-reviewer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, transparent, var(--bu-line-strong), transparent);
}

.banner-reviewer .detail {
    line-height: 1.2;
    gap: 3px;
}

.banner-reviewer .detail span:first-child {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    background: var(--bu-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner-reviewer .detail span:last-child {
    color: var(--bu-muted);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .68rem;
}

/* Scroll cue */
.bu-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    width: 24px;
    height: 38px;
    border: 1.5px solid var(--bu-line-strong);
    border-radius: var(--bu-r-pill);
    z-index: 3;
    pointer-events: none;
    opacity: .8;
}

.bu-scroll-cue::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 7px;
    width: 3px;
    height: 7px;
    border-radius: 3px;
    background: var(--bu-brand-500);
    transform: translateX(-50%);
    animation: bu-cue 1.9s var(--bu-ease) infinite;
}

@keyframes bu-cue {

    0%,
    100% {
        transform: translate(-50%, 0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        transform: translate(-50%, 14px);
        opacity: 0;
    }
}

/* ================== 09. Forms ================== */

.form input,
.form textarea,
.form select {
    border-radius: var(--bu-r-md);
    border: 1px solid var(--bu-line);
    background: var(--bu-surface-2);
    transition: border-color .3s var(--bu-ease), box-shadow .3s var(--bu-ease), background .3s var(--bu-ease);
}

.form input:focus,
.form textarea:focus,
.form select:focus {
    border-color: color-mix(in srgb, var(--bu-brand-500) 65%, transparent);
    box-shadow: 0 0 0 4px rgba(255, 127, 0, .14);
    outline: none;
    background: var(--bu-surface-3);
}

.form input::placeholder,
.form textarea::placeholder {
    color: color-mix(in srgb, var(--bu-muted) 78%, transparent);
}

/* ================== 10. Footer ================== */

.footer {
    border-top: 1px solid var(--bu-line);
    position: relative;
}

.footer-list a {
    color: var(--bu-muted);
    font-weight: 500;
}

.footer-list a:hover {
    color: var(--bu-brand-500);
}

.social-icon,
.social-container a {
    transition: transform .45s var(--bu-ease-spring), color .3s var(--bu-ease), background .3s var(--bu-ease);
}

.social-icon:hover,
.social-container a:hover {
    transform: translateY(-3px);
    color: var(--bu-brand-500);
}

/* Back to top */
.bu-top {
    position: fixed;
    right: clamp(16px, 3vw, 30px);
    bottom: clamp(16px, 3vw, 30px);
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--bu-line-strong);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bu-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--bu-text);
    cursor: pointer;
    z-index: 950;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.9);
    transition: opacity .45s var(--bu-ease), transform .5s var(--bu-ease-spring), visibility .45s;
    box-shadow: var(--bu-shadow-md);
}

.bu-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.bu-top:hover {
    background: var(--bu-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--bu-glow);
}

.bu-top i {
    font-size: 1.2rem;
    line-height: 1;
}

/* ================== 11. Reveal & micro-interactions ================== */

[data-bu-reveal] {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
        opacity .8s var(--bu-ease-out),
        transform .8s var(--bu-ease-out);
    transition-delay: var(--bu-delay, 0ms);
    will-change: opacity, transform;
}

[data-bu-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

[data-bu-reveal="left"] {
    transform: translate3d(-32px, 0, 0);
}

[data-bu-reveal="right"] {
    transform: translate3d(32px, 0, 0);
}

[data-bu-reveal="zoom"] {
    transform: scale(.955);
}

/* Parallax layer */
[data-bu-parallax] {
    will-change: transform;
}

/* Magnetic elements are transformed inline by JS; keep the easing here */
.bu-magnetic {
    transition: transform .5s var(--bu-ease-out);
}

.bu-magnetic.is-pulled {
    transition: transform .12s linear;
}

/* Retune the template's animate.css entrances: shorter travel, softer curve.
   The stock 100%-viewport slides read as cheap; 32px reads as intentional. */
.animated {
    animation-duration: .85s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

.animate__animated.animate__fadeInUp {
    animation-name: bu-in-up;
}

.animate__animated.animate__fadeInDown {
    animation-name: bu-in-down;
}

.animate__animated.animate__fadeInLeft {
    animation-name: bu-in-left;
}

.animate__animated.animate__fadeInRight {
    animation-name: bu-in-right;
}

@keyframes bu-in-up {
    from {
        opacity: 0;
        transform: translate3d(0, 34px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bu-in-down {
    from {
        opacity: 0;
        transform: translate3d(0, -28px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bu-in-left {
    from {
        opacity: 0;
        transform: translate3d(-38px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bu-in-right {
    from {
        opacity: 0;
        transform: translate3d(38px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ================== 12. Component refinements ================== */

/* Anchored jumps must clear the sticky header */
[id] {
    scroll-margin-top: 120px;
}

/* --- Expertise stat block --- */
.card-expertise,
.card-expertise.card-expertise-counter {
    box-shadow: var(--bu-shadow-sm);
}

.card-expertise:hover,
.card-expertise.card-expertise-counter:hover {
    box-shadow: var(--bu-shadow-lg), 0 0 0 1px rgba(255, 127, 0, .16);
}

/* The stock light-mode gradient washed the card in solid orange, which
   erased the outlined numeral sitting on top of it. */
body.lightmode .card-expertise,
body.lightmode .card-expertise.card-expertise-counter {
    background-color: var(--bu-surface);
    background-image: linear-gradient(140deg, rgba(255, 127, 0, .11) 0%, rgba(255, 127, 0, .02) 55%);
    border: 1px solid var(--bu-line);
}

.card-expertise.card-expertise-counter {
    padding: clamp(24px, 2.4vw, 34px);
}

.card-expertise .counter {
    font-size: clamp(3.4rem, 2rem + 3.6vw, 5.2rem);
    line-height: .92;
    -webkit-text-stroke-width: 1.5px;
    letter-spacing: -.04em;
}

.card-expertise .counter-detail {
    font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem);
    line-height: .92;
    -webkit-text-stroke-width: 1.5px;
    color: transparent;
    margin-left: -.04em;
}

body.lightmode .card-expertise .counter,
body.lightmode .card-expertise .counter-detail {
    -webkit-text-stroke-color: var(--bu-brand-700);
    stroke: var(--bu-brand-700);
}

body.lightmode .card-expertise .counter,
body.lightmode .card-expertise .counter-detail {
    -webkit-text-stroke-color: var(--bu-brand-700);
    stroke: var(--bu-brand-700);
}

.card-expertise.card-expertise-counter h3 {
    font-size: clamp(1.15rem, .95rem + .7vw, 1.5rem);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.expertise-list h5 {
    margin-bottom: 6px;
    letter-spacing: -.01em;
}

/* The source photo has the brandUI wordmark painted on the wall; crop to the
   people so the overlay card never slices the logo in half. */
.expertise-img>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 82%;
}

.check-list li {
    padding-block: 5px;
}

/* --- Full-bleed guide banner --- */
.guide-banner {
    border-radius: var(--bu-r-xl);
    border-color: var(--bu-line);
    padding: clamp(150px, 20vw, 250px) clamp(24px, 5vw, 64px) clamp(70px, 8vw, 110px);
    box-shadow: var(--bu-shadow-lg);
}

/* Directional scrim so the copy always sits on a readable field */
.guide-banner::before {
    background-image: linear-gradient(100deg,
            rgba(4, 4, 5, .94) 0%,
            rgba(4, 4, 5, .82) 38%,
            rgba(4, 4, 5, .34) 72%,
            rgba(4, 4, 5, .12) 100%);
    opacity: 1;
}

body.lightmode .guide-banner::before {
    background-image: linear-gradient(100deg,
            rgba(255, 253, 250, .96) 0%,
            rgba(255, 253, 250, .86) 38%,
            rgba(255, 253, 250, .42) 74%,
            rgba(255, 253, 250, .12) 100%);
}

.guide-content {
    max-width: min(680px, 68%);
    gap: 20px;
}

.guide-content p {
    color: var(--bu-muted);
    max-width: 56ch;
    margin-bottom: 0;
}

/* --- Service cards --- */
.card-service {
    height: 100%;
}

.card-service .service-title {
    align-self: flex-start;
}

/* --- Blog cards: one aspect ratio, one baseline --- */
.blog-image {
    aspect-ratio: 16 / 10;
    border-radius: var(--bu-r-md);
    height: auto;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s var(--bu-ease-out), opacity .5s var(--bu-ease);
}

/* The stock hover rotated the whole frame; scale the photo inside instead */
.card-blog:hover .blog-image {
    transform: none;
    opacity: 1;
}

.card-blog:hover .blog-image img {
    transform: scale(1.06);
}

.card-blog .card-body {
    gap: 14px;
}

/* Reserve a fixed band for the date/category row so titles share a baseline
   even when a category wraps to two lines. */
.card-blog .card-body>.d-flex:first-child {
    min-height: 42px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.meta-data {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--bu-muted);
}

.card-blog .card_footer {
    border-top: 1px solid var(--bu-line);
    margin-top: auto;
    letter-spacing: .02em;
}

.card-blog h4,
.card-blog h5 {
    letter-spacing: -.02em;
}

/* --- Testimonials --- */
/* The gradient-edge wrapper showed a bare orange strip whenever the inner
   panel was shorter than its container. */
.card-testimonial-header-title,
.card-testimonial-reviewer {
    height: 100%;
}

.testimonial-header-wrapper::before,
.testimonial-header-wrapper-title::before {
    opacity: .35;
}

.card-testimonial {
    border-color: var(--bu-line);
}

.testimonial-description {
    line-height: 1.7;
}

/* --- Inner-page banner --- */
.banner-layout-wrapper {
    border-radius: var(--bu-r-xl);
    border-color: var(--bu-line);
    box-shadow: var(--bu-shadow-lg);
    background-image: radial-gradient(120% 100% at 50% -20%, rgba(255, 138, 16, .18), transparent 60%),
        linear-gradient(180deg, var(--bu-surface-2), var(--bu-ink));
}

.banner-layout {
    padding: clamp(72px, 8.5vw, 110px) 20px 0;
    gap: clamp(48px, 6.5vw, 88px);
}

.banner-layout h1,
.banner-layout .title-heading {
    max-width: 20ch;
}

.breadcrumb {
    gap: 4px;
    font-size: .95rem;
    padding: 8px 18px;
    border: 1px solid var(--bu-line);
    border-radius: var(--bu-r-pill);
    background: color-mix(in srgb, var(--bu-surface) 55%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    width: fit-content;
    margin-inline: auto;
}

.breadcrumb a {
    font-size: .95rem;
    font-weight: 600;
}

.breadcrumb .separator {
    margin: 0 4px;
    opacity: .5;
}

.breadcrumb .current {
    font-size: .95rem;
    color: var(--bu-muted);
}

/* --- Service icons --- */
.service-icon i {
    color: var(--bu-brand-500);
    transition: transform .45s var(--bu-ease-spring), color .3s var(--bu-ease);
}

body.lightmode .service-icon i {
    color: var(--bu-brand-700) !important;
}

.card-service:hover .service-icon i {
    transform: scale(1.12) rotate(-6deg);
}

/* --- Map embed --- */
.maps {
    border-radius: var(--bu-r-lg);
    border: 1px solid var(--bu-line);
    box-shadow: var(--bu-shadow-md);
    display: block;
}

/* --- Footer --- */
.footer-content-spacer {
    height: clamp(48px, 6vw, 80px);
}

/* Light mode inherited a radial gradient that flooded the whole footer with
   solid orange — swap it for a corner tint on a neutral surface. */
body.lightmode .bg-footer {
    background-image:
        radial-gradient(120% 95% at 0% 0%, rgba(255, 127, 0, .13) 0%, transparent 58%),
        linear-gradient(180deg, var(--bu-surface-2), var(--bu-surface));
}

body.lightmode .bg-footer::before {
    opacity: .09;
}

body.lightmode .bg-footer-wrapper::before {
    opacity: .38;
}

.footer h5,
.footer h6 {
    letter-spacing: -.01em;
    margin-bottom: 4px;
}

.footer-logo-container img {
    height: var(--bu-logo-h-footer);
    width: auto;
}

.copyright-container {
    border-top: 1px solid var(--bu-line);
    padding-top: 22px;
}

.copyright,
.legal-link a {
    font-size: .86rem;
    color: var(--bu-muted);
}

.legal-link a:hover {
    color: var(--bu-brand-500);
}

.social-item {
    border: 1px solid var(--bu-line);
    border-radius: var(--bu-r-md);
    background-color: var(--bu-surface-2);
    background-image: none;
    box-shadow: var(--bu-shadow-sm);
    color: var(--bu-brand-500);
    transition: transform .45s var(--bu-ease-spring), border-color .3s var(--bu-ease),
        background .3s var(--bu-ease), color .3s var(--bu-ease);
}

.social-item i {
    font-size: 1.15rem;
    transition: color .3s var(--bu-ease);
}

.social-item:hover {
    transform: translateY(-3px);
    border-color: transparent;
    background-image: var(--bu-gradient);
    color: #fff;
    box-shadow: var(--bu-glow);
}

.social-item:hover i {
    color: #fff;
}

.social-item-wrapper {
    background-color: transparent;
}

/* --- Mobile drawer --------------------------------------------------- */

/* Width-independent slide so the panel can be resized freely
   (the template hard-coded translateX(300px) against left:-300px). */
.sidebar {
    left: 0;
    width: min(88vw, 380px);
    max-width: 100%;
    transform: translateX(-102%);
    padding: 0 0 32px;
    background: var(--bu-surface);
    border-right: 1px solid var(--bu-line);
    box-shadow: 24px 0 80px rgba(0, 0, 0, .55);
    transition: transform .55s var(--bu-ease-out);
    overscroll-behavior: contain;
}

body.lightmode .sidebar {
    box-shadow: 24px 0 80px rgba(24, 18, 10, .18);
}

.sidebar.active {
    transform: translateX(0);
}

/* Brand light bleeding in from the top of the panel */
.sidebar::before {
    content: "";
    position: absolute;
    top: -120px;
    left: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 138, 16, .3), transparent 68%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

.sidebar>* {
    position: relative;
    z-index: 1;
}

.sidebar-overlay {
    background: rgba(4, 4, 6, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* Must sit above the sticky header (z-index 900) but below the panel. */
    z-index: 999;
}

.sidebar-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 20px 22px;
    background: linear-gradient(180deg, var(--bu-surface) 72%, transparent);
    border-bottom: 1px solid var(--bu-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.sidebar-header .logo {
    width: auto;
}

.sidebar-header .logo img {
    width: 148px;
    max-width: 100%;
    height: auto;
}

.close-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    flex: 0 0 42px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--bu-line-strong);
    color: var(--bu-text);
    font-size: 1.15rem;
    line-height: 1;
    transition: transform .45s var(--bu-ease-spring), background .3s var(--bu-ease), border-color .3s var(--bu-ease), color .3s var(--bu-ease);
}

.close-btn:hover,
.close-btn:focus-visible {
    background: var(--bu-gradient);
    border-color: transparent;
    color: #fff;
    transform: rotate(90deg);
}

/* Primary navigation */
.sidebar .menu {
    margin: 18px 0 0;
    padding: 0 14px;
}

.sidebar .menu li {
    margin-bottom: 2px;
}

.sidebar .menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    border-radius: var(--bu-r-md);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--bu-text);
    text-transform: none;
    transition: background .35s var(--bu-ease), color .3s var(--bu-ease), padding-left .35s var(--bu-ease-out);
}

/* Trailing chevron drawn in CSS so the markup stays untouched */
.sidebar .menu a::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg) translateX(-4px);
    opacity: 0;
    transition: opacity .3s var(--bu-ease), transform .4s var(--bu-ease-out);
}

.sidebar .menu a:hover,
.sidebar .menu a:focus-visible,
.sidebar .menu a.active {
    background: color-mix(in srgb, var(--bu-brand-500) 12%, transparent);
    color: var(--bu-brand-500);
    padding-left: 24px;
}

.sidebar .menu a:hover::after,
.sidebar .menu a:focus-visible::after,
.sidebar .menu a.active::after {
    opacity: 1;
    transform: rotate(45deg) translateX(0);
}

/* Staggered entrance while the drawer opens */
.sidebar.active .menu li {
    animation: bu-drawer-item .5s var(--bu-ease-out) both;
}

.sidebar.active .menu li:nth-child(1) {
    animation-delay: .08s;
}

.sidebar.active .menu li:nth-child(2) {
    animation-delay: .14s;
}

.sidebar.active .menu li:nth-child(3) {
    animation-delay: .2s;
}

.sidebar.active .menu li:nth-child(4) {
    animation-delay: .26s;
}

.sidebar.active .sidebar-extra {
    animation: bu-drawer-item .6s var(--bu-ease-out) .3s both;
}

@keyframes bu-drawer-item {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.sidebar-extra {
    padding: 0 22px;
    margin-top: 26px !important;
}

.sidebar-text {
    padding-top: 24px;
    border-top: 1px solid var(--bu-line);
}

.sidebar-text h4 {
    font-size: 1.08rem;
    line-height: 1.35;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}

.sidebar-text p {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--bu-muted);
    margin-bottom: 0;
}

.sidebar-contact,
.sidebar-social {
    padding-top: 22px;
    margin-top: 22px !important;
    border-top: 1px solid var(--bu-line);
}

.sidebar-contact h5,
.sidebar-social h5 {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bu-muted);
    margin-bottom: 14px;
}

.sidebar-contact ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-contact li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .92rem;
    color: var(--bu-muted);
    line-height: 1.4;
}

.sidebar-contact li i {
    flex: 0 0 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1rem;
    color: var(--bu-brand-500);
    background: color-mix(in srgb, var(--bu-brand-500) 13%, transparent);
}

.sidebar-contact li a {
    color: var(--bu-text);
    font-weight: 500;
    word-break: break-word;
    transition: color .3s var(--bu-ease);
}

.sidebar-contact li a:hover {
    color: var(--bu-brand-500);
}

.sidebar-social .d-flex {
    gap: 10px;
}

.sidebar-social a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--bu-line-strong);
    color: var(--bu-text);
    font-size: 1.1rem;
    transition: transform .45s var(--bu-ease-spring), background .3s var(--bu-ease), color .3s var(--bu-ease), border-color .3s var(--bu-ease);
}

.sidebar-social a:hover {
    background: var(--bu-gradient);
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
}

/* --- SEO accordion block (page-level component) --- */.seo-dropdown-section {
    max-width: 1240px;
    padding-inline: var(--bu-gutter);
    font-family: var(--global-font) !important;
}

.seo-dropdown-btn {
    background: var(--bu-gradient);
    border-radius: var(--bu-r-lg);
    padding: 20px 26px;
    font-size: clamp(1rem, .92rem + .4vw, 1.15rem);
    font-weight: 700;
    letter-spacing: -.015em;
    text-align: left;
    gap: 20px;
    box-shadow: var(--bu-shadow-md);
    transition: transform .4s var(--bu-ease-out), box-shadow .4s var(--bu-ease), filter .3s var(--bu-ease);
}

.seo-dropdown-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--bu-shadow-lg), var(--bu-glow);
}

.seo-dropdown-content {
    background: var(--bu-surface);
    border: 1px solid var(--bu-line);
    border-radius: var(--bu-r-lg);
    color: var(--bu-muted);
    box-shadow: var(--bu-shadow-sm);
    padding: clamp(24px, 3vw, 38px);
}

.seo-dropdown-content h1,
.seo-dropdown-content h2,
.seo-dropdown-content h3 {
    color: var(--bu-text);
}

/* ================== 13. Responsive ================== */

@media (max-width: 1199px) {
    .navbar-action-container {
        width: auto;
    }

    .navbar-icon-wrapper {
        display: none;
    }

    .banner-content {
        width: 100%;
    }

    .banner-video-content {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .title-heading-banner {
        max-width: 100%;
    }

    .card::after {
        display: none;
    }

    .guide-content {
        max-width: 100%;
    }

    .guide-banner {
        background-attachment: scroll;
        padding-top: clamp(120px, 26vw, 190px);
    }

    /* The CTA card overlays the photo on desktop. At tablet width it covers
       most of the image, so stack it underneath instead. */
    .expertise-img {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .expertise-img>img {
        aspect-ratio: 4 / 3;
        object-position: center bottom;
        border-radius: var(--bu-r-lg);
    }

    .expertise-img .expertise-layout {
        position: static;
        margin-top: 16px;
    }

    .expertise-img .expertise-spacer {
        display: none;
    }

    .expertise-img .card-expertise-wrapper {
        padding: 0;
        background: transparent;
        width: 100%;
    }

    .expertise-img .card-expertise {
        width: 100%;
    }
}

@media (max-width: 767px) {
    :root {
        --bu-space-section: 68px;
    }

    .navbar-wrapper {
        padding: 12px 14px;
    }

    .navbar {
        padding: 10px 12px 10px 16px;
        border-radius: var(--bu-r-md);
    }

    .btn {
        align-self: auto;
    }

    .btn-title {
        padding: 14px 6px 14px 20px;
    }

    .bu-scroll-cue {
        display: none;
    }

    /* Two large blurred layers are the single most expensive thing on a
       phone GPU, and the hero waves already carry the atmosphere. */
    .bu-aurora {
        display: none;
    }

    /* Fewer, calmer bands: less overdraw on small screens */
    .bu-hero-wave--crest,
    .bu-hero-dots {
        display: none;
    }

    /* The mobile hero is far taller, so the same percentage heights would
       push the crests up over the CTA row. Shorter bands, quicker cycle. */
    .bu-hero-wave--back {
        --h: 18%;
        --dur: 20s;
    }

    .bu-hero-wave--mid {
        --h: 15%;
        --dur: 14s;
    }

    .bu-hero-wave--front {
        --h: 11%;
        --dur: 10s;
    }

    .banner-reviewer {
        padding-left: 0;
    }

    .banner-reviewer::before {
        display: none;
    }

    /* Hero: one left-aligned column instead of a left headline over
       centred copy and CTA. */
    .section-banner .banner-content,
    .section-banner .banner-content .btn,
    .section-banner .banner-content>.d-flex {
        text-align: left;
        align-self: flex-start !important;
        justify-content: flex-start !important;
    }

    .section-banner .banner-content>.d-flex {
        align-items: flex-start;
        gap: 22px;
    }

    .section-banner .btn-accent {
        align-self: flex-start;
    }

    [id] {
        scroll-margin-top: 86px;
    }
}

/* Coarse pointers get no hover-dependent effects */
@media (hover: none) {

    .card::after,
    .bu-progress {
        display: none;
    }
}

/* ================== 14. Accessibility / reduced motion ================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    [data-bu-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .bu-aurora {
        display: none;
    }
}