/* site.css  ===================================



/* ===================================

   Base / General

   =================================== */

html {

    font-size: 14px;

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

    position: relative;

    min-height: 100%;

    scrollbar-gutter: stable;

    overflow-y: scroll;

}



body {

    font-family: "avenir-lt-pro", sans-serif;

    font-weight: 400;

}



strong {

    font-weight: 700;

}



@media (min-width: 768px) {

    html {

        font-size: 16px;

    }

}



html, body {

    margin: 0;

}



body {

    margin-bottom: 60px;

}



a {

    text-decoration: none;

}



    a:hover {

        text-decoration: none;

    }



/* ===================================

   Global Variables

   =================================== */

:root {

    --nav-height: 64px;

    /* NEW: pre-measured totals (nav + contact) */

    --header-expanded-height: var(--nav-height);

    --header-compact-height: var(--nav-height);

    /* NEW: constant used for layout (prevents jank while animating) */

    --header-layout-height: var(--header-expanded-height);

    /* existing vars */

    --anchor-offset: calc(var(--header-expanded-height) + 16px);

    --toc-sticky-top: var(--anchor-offset);

}



/* ===================================

   Scroll & Anchors

   =================================== */

.blog-article section[id] {

    scroll-margin-top: var(--anchor-offset);

}



html {

    scroll-behavior: smooth;

}



:root {

    --toc-width: 0px;

    --toc-gap: 20px;

    --toc-top-extra: 0px;

}



.blog-post-hero, .blog-layout-row {

    overflow: visible;

}



@media (min-width: 992px) {

    .blog-aside {

        position: fixed;

        left: 0 !important;

        width: var(--toc-width);

        z-index: 100;

    }



    .blog-article {

        margin-left: calc(var(--toc-width));

        max-width: calc(100% - var(--toc-width) - var(--toc-gap));

    }

}



@media (min-width: 992px) {

    .blog-toc {

        width: clamp(240px, 22vw, 300px);

    }

}



.blog-toc .nav-link.active,

.blog-toc .nav-link[aria-current="true"] {

    font-weight: 600;

    text-decoration: underline;

}



.excerpt-clamp {

    display: -webkit-box;

    -webkit-line-clamp: 5;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}



/* ===================================

   Headings

   =================================== */

h1, .text-lsblue {

    background: linear-gradient(90deg, rgba(23,41,131,1) 0%, rgba(23,47,167,1) 100%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    display: inline-block;

    -webkit-box-decoration-break: clone;

    box-decoration-break: clone;

    --desc-pad: .14em;

    padding-bottom: var(--desc-pad);

    line-height: 1.2;

    overflow: visible;

}



h1 {

    margin-bottom: calc(3rem - var(--desc-pad));

}



.bg-lsblue {

    background: linear-gradient(90deg, rgba(23,41,131,1) 0%, rgba(23,47,167,1) 100%);

}



/* ===================================

   Hero

   =================================== */

.section-full-height {

    min-height: calc(100vh - var(--header-layout-height)); /* FIXED: stable var */

    display: flex;

    width: 100%;

    flex-direction: column;

}



.section-full-height-center {

    padding-right: var(--bs-gutter-x, 10rem);

    padding-left: var(--bs-gutter-x, 10rem);

    justify-content: center;

}



.section-full-height .hero-inner {

    max-width: 900px;

    margin-inline: auto;

    padding-inline: 1rem;

}



.section-full-height h1 {

    margin-top: 0;

}



/* ===================================

   Navbar (fixed)

   =================================== */

#main-nav.navbar.fixed-top {

    transition: padding .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1), background-color .28s cubic-bezier(.2,.8,.2,1), backdrop-filter .28s cubic-bezier(.2,.8,.2,1);

    will-change: padding, background-color, backdrop-filter, box-shadow;

}



/* NEW: no transition when snapping back to expanded */

#main-nav.snap {

    transition: none !important;

}



/* Link contact styles */

.link-contact {

    color: #fff !important;

    text-decoration: none;

}



    .link-contact:hover {

        opacity: .8 !important;

        text-decoration: none !important;

    }



/* Navbar defaults (expanded) */

#main-nav {

    padding-top: .6rem;

    padding-bottom: .6rem;

    background-color: rgba(255,255,255,.75);

    -webkit-backdrop-filter: saturate(180%) blur(6px);

    backdrop-filter: saturate(180%) blur(6px);

    box-shadow: 0 6px 18px rgba(0,0,0,.05);

    z-index: 1050;

}



    /* Scrolled (compact) */

    #main-nav.scrolled {

        padding-top: .35rem;

        padding-bottom: .35rem;

        background-color: rgba(255,255,255,.9);

        box-shadow: 0 8px 24px rgba(0,0,0,.06);

        -webkit-backdrop-filter: saturate(180%) blur(8px);

        backdrop-filter: saturate(180%) blur(8px);

    }



/* Logo */

.brand-logo {

    display: block;

    height: 44px;

    width: auto;

    transition: height .14s cubic-bezier(.2,.8,.2,1);

}



@media (min-width: 992px) {

    .brand-logo {

        height: 48px;

    }



    #main-nav.scrolled .brand-logo {

        height: 38px;

    }

}



/* Desktop alignment */

@media (min-width: 992px) {

    #main-nav .container {

        align-items: flex-end;

    }



    #main-nav .navbar-collapse {

        align-items: flex-end !important;

    }



    #main-nav .navbar-nav {

        align-items: flex-end;

        gap: 1.25rem;

    }



    #main-nav .nav-link {

        padding-top: .25rem;

        padding-bottom: .35rem;

        line-height: 1.1;

        text-decoration: none;

    }

}



/* Gradient nav links */

#main-nav .nav-link,

#main-nav .nav-link.text-dark,

#main-nav .nav-link:focus,

#main-nav .nav-link:hover,

#main-nav .nav-link.active {

    background: linear-gradient(90deg, rgba(23,41,131,1) 0%, rgba(23,47,167,1) 100%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent !important;

    text-decoration: none;

}



.navbar .nav-link::after {

    content: none !important;

}



#main-nav .nav-link:hover {

    opacity: .9;

}



/* ===================================

   Contact Bar (desktop only)

   =================================== */

.ls-topbar {

    background: linear-gradient(90deg,#0b1d5b,#183291);

    color: #fff;

    border-bottom-left-radius: 12px;

    border-bottom-right-radius: 12px;

}



    .ls-topbar a {

        color: #fff;

        text-decoration: none;

    }



        .ls-topbar a:hover {

            text-decoration: underline;

        }



@media (max-width: 991.98px) {

    .ls-topbar {

        display: none !important;

    }

}



#contact-bar {

    position: relative;

    margin-top: var(--nav-height);

    z-index: 1;

    transition: none;

}



/* Mobile: push page below header */

@media (max-width: 991.98px) {

    body {

        padding-top: var(--nav-height);

    }

}



/* ===================================

   Mobile Hamburger

   =================================== */

.hamburger {

    width: 28px;

    height: 20px;

    display: inline-block;

    position: relative;

    margin-left: auto;

    background: transparent;

    border: 0;

    padding: 0;

    cursor: pointer;

    z-index: 1051;

}



    .hamburger:focus {

        outline: none;

    }



    .hamburger .bar {

        position: absolute;

        left: 0;

        right: 0;

        height: 2px;

        width: 100%;

        background: rgba(23,41,131,1);

        border-radius: 2px;

        transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s cubic-bezier(.2,.8,.2,1);

    }



        .hamburger .bar:nth-child(1) {

            top: 0;

        }



        .hamburger .bar:nth-child(2) {

            top: 9px;

        }



        .hamburger .bar:nth-child(3) {

            top: 18px;

        }



    .hamburger.is-open .bar:nth-child(1) {

        transform: translateY(9px) rotate(45deg);

    }



    .hamburger.is-open .bar:nth-child(2) {

        opacity: 0;

    }



    .hamburger.is-open .bar:nth-child(3) {

        transform: translateY(-9px) rotate(-45deg);

    }



/* ===================================

   Full-Screen Mobile Menu

   =================================== */

.mobile-menu {

    position: fixed;

    inset: 0;

    background: rgba(255,255,255,.98);

    -webkit-backdrop-filter: blur(6px) saturate(180%);

    backdrop-filter: blur(6px) saturate(180%);

    z-index: 1040;

    transform: translateY(-100%);

    transition: transform .45s cubic-bezier(.2,.8,.2,1);

}



    .mobile-menu.open {

        transform: translateY(0);

    }



.mobile-menu-inner {

    display: flex;

    flex-direction: column;

    padding-top: var(--nav-height);

    height: 100%;

}



.mobile-menu-list {

    list-style: none;

    margin: 2rem 0 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    align-items: center;

    justify-content: flex-start;

}



    .mobile-menu-list a {

        font-size: 1.25rem;

        font-weight: 600;

        background: linear-gradient(90deg, rgba(23,41,131,1) 0%, rgba(23,47,167,1) 100%);

        -webkit-background-clip: text;

        background-clip: text;

        -webkit-text-fill-color: transparent;

        color: transparent;

        text-decoration: none;

    }



body.menu-open {

    overflow: hidden;

}



@media (max-width: 991.98px) {

    .mobile-menu-inner {

        padding-left: 24px;

        padding-right: 24px;

    }



    .mobile-menu-list {

        align-items: flex-start;

        gap: .5rem;

    }



        .mobile-menu-list a {

            display: block;

            width: 100%;

            text-align: left;

            font-size: 2rem;

            line-height: 1.35;

            padding: .6rem 0;

        }



    body.menu-open #main-nav,

    body.menu-open #main-nav.scrolled {

        background-color: transparent !important;

        -webkit-backdrop-filter: none !important;

        backdrop-filter: none !important;

        box-shadow: none !important;

        border-bottom: none !important;

    }

}



/* ===================================

   Forms / Buttons

   =================================== */

.form-control, .form-select {

    border-radius: .6rem;

}



    .form-control:focus,

    .form-control:focus-visible,

    .form-select:focus,

    .form-select:focus-visible,

    .form-check-input:focus,

    .form-check-input:focus-visible,

    .input-group .form-control:focus,

    .input-group .form-select:focus,

    .btn:focus,

    .btn:active:focus,

    .btn:focus-visible,

    .btn-check:focus + .btn,

    .was-validated .form-control:valid:focus,

    .was-validated .form-control:invalid:focus,

    .was-validated .form-select:valid:focus,

    .was-validated .form-select:invalid:focus,

    .form-switch .form-check-input:focus {

        outline: none !important;

        box-shadow: none !important;

    }



    .form-control:focus,

    .form-select:focus,

    .form-check-input:focus {

        border-color: inherit !important;

    }



    .form-control.is-valid:focus,

    .form-control.is-invalid:focus,

    .form-select.is-valid:focus,

    .form-select.is-invalid:focus {

        box-shadow: none !important;

        border-color: inherit !important;

    }



.btn-primary {

    background-color: rgba(23,41,131,1);

    border: none;

}



    .btn-primary:hover {

        background-color: rgba(23,41,131,.9);

        border: none;

    }



.btn {

    border-radius: .6rem;

}



/* ===================================

   Accessibility

   =================================== */

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

    * {

        transition: none !important;

        animation: none !important;

    }

}



/* ===================================

   Visual Styles / Cards / etc

   =================================== */

.glass-card {

    border-radius: 25px;

    padding: 2rem;

    background: rgba(255, 255, 255, .35);

    -webkit-backdrop-filter: blur(3px) saturate(140%);

    backdrop-filter: blur(14px) saturate(140%);

    border: 1px solid rgba(255, 255, 255, .45);

    box-shadow: 0 12px 32px rgba(17, 17, 17, .08);

}



.card-hover:hover {

    box-shadow: 0 15px 40px rgba(17, 17, 17, .12);

}



.summary-card {

    border-radius: 25px;

    padding: 2rem;

    border: 1px solid rgba(255, 255, 255, .45);

    box-shadow: 0 12px 32px rgba(17, 17, 17, .08);

}



@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {

    .glass-card {

        background: rgba(255, 255, 255, .92);

    }

}



/* =========================

   CONSULT CARD + RING (Home hero)

   ========================= */

.consult-card {

    position: relative;

    overflow: visible; /* ensure the ring can extend outside the card */

}



    .consult-card .text-body {

        position: relative;

        z-index: 1; /* keep form/content above the ring */

    }



.card-ring {

    position: absolute;

    top: 0;

    right: 0;

    width: clamp(360px, 36vmin, 520px);

    height: auto;

    transform-origin: top right;

    transform: translate(50%, -50%); /* anchor in top-right “outside” the card */

    z-index: 0; /* sit behind .text-body */

    pointer-events: none;

}



/* Ring strokes (matches your original) */

.ns {

    vector-effect: non-scaling-stroke;

}



.card-ring .ring-strong,

.card-ring .ring-mid,

.card-ring .ring-thin,

.card-ring .thin {

    fill: none;

}



.card-ring .ring-strong {

    stroke: var(--ink);

    stroke-width: 6;

    opacity: .85;

}



.card-ring .ring-mid {

    stroke: url(#inkGradCard);

    stroke-width: 2;

    opacity: .80;

}



.card-ring .ring-thin {

    stroke: var(--ink);

    stroke-width: 1;

    opacity: .50;

}



.card-ring .dash {

    stroke: var(--ink);

    stroke-width: 3;

    opacity: .55;

    fill: none;

    stroke-linecap: round;

    stroke-dasharray: 1 12;

    animation: dashLoop 18s linear infinite;

}



@keyframes dashLoop {

    to {

        stroke-dashoffset: -800;

    }

}



/* =========================

   ACCORDION (Support page – glass style)

   ========================= */

.accordion-item {

    border: none;

    margin-bottom: 1rem;

    border-radius: 25px !important; /* match .glass-card */

    overflow: hidden;

    background: rgba(255, 255, 255, .10);

    -webkit-backdrop-filter: blur(3px) saturate(140%);

    backdrop-filter: blur(14px) saturate(140%);

    border: 1px solid rgba(255, 255, 255, .45);

    box-shadow: 0 6px 18px rgba(0,0,0,.08);

    transition: transform .25s ease, box-shadow .25s ease;

}



    .accordion-item:hover {

        transform: translateY(-2px);

        box-shadow: 0 12px 32px rgba(0,0,0,.12);

    }



.accordion-button {

    font-weight: 600;

    font-size: 1.05rem;

    color: var(--ink);

    background: transparent;

    padding: 1.25rem 1.5rem;

    border: none;

    box-shadow: none !important;

    transition: background .2s ease, color .2s ease;

}



    .accordion-button:hover {

        background: rgba(23,41,131,.06);

    }



    .accordion-button:focus {

        box-shadow: none !important;

        outline: none !important;

    }



    .accordion-button::after {

        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23232983' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");

        background-repeat: no-repeat;

        background-size: 1rem;

        flex-shrink: 0;

        width: 1rem;

        height: 1rem;

        margin-left: auto;

        align-self: center;

        transform: rotate(0deg);

        transition: transform .3s ease;

    }



    .accordion-button:not(.collapsed)::after {

        transform: rotate(180deg);

    }



.accordion-body {

    padding: 1.25rem 1.5rem;

    background: transparent;

    font-size: 0.95rem;

    line-height: 1.6;

}



@keyframes float-horizontal {

    0%, 100% {

        transform: translateX(0);

    }



    50% {

        transform: translateX(150px); /* distance */

    }

}



@keyframes float-vertical {

    0%, 100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(150px); /* distance */

    }

}



/* Classes you can assign to any element */

.floating-horizontal {

    animation: float-horizontal 10s ease-in-out infinite;

    will-change: transform;

}



.floating-vertical {

    animation: float-vertical 15s ease-in-out infinite;

    will-change: transform;

}



/* Optional: respect user's motion settings */

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

    .floating-horizontal,

    .floating-vertical {

        animation: none !important;

        transform: none !important;

    }

}



/* Fade-up animation */

[data-animate="fade-up"] {

    opacity: 0;

    transform: translateY(25px);

    transition: opacity 0.8s ease, transform 0.8s ease;

}



    [data-animate="fade-up"].animate {

        opacity: 1;

        transform: translateY(0);

    }