.ks-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--ks-header-height);
    border-bottom: 1px solid rgba(214, 168, 63, 0.12);
    background: rgba(7, 7, 7, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        height 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.ks-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(214, 168, 63, 0.025) 20%, rgba(255, 42, 36, 0.018) 80%, transparent),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 42px);
    opacity: .8;
}

.ks-header__glow {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(214, 168, 63, 0.08),
        rgba(242, 204, 107, 0.55),
        rgba(255, 42, 36, 0.20),
        rgba(214, 168, 63, 0.08),
        transparent
    );
    pointer-events: none;
}

.ks-header.is-scrolled {
    --ks-header-height: 70px;
    background: rgba(7, 7, 7, 0.965);
    border-bottom-color: rgba(214, 168, 63, 0.22);
    box-shadow: 0 12px 44px rgba(0,0,0,.28);
}

.ks-header__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(245px, auto) 1fr auto;
    align-items: center;
    gap: 28px;
}

.ks-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ks-brand__mark {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(242, 204, 107, 0.36),
        0 0 28px rgba(214, 168, 63, 0.13);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.ks-brand:hover .ks-brand__mark {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(242, 204, 107, 0.60),
        0 0 32px rgba(214, 168, 63, 0.18);
}

.ks-brand__mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ks-brand__text {
    display: grid;
    line-height: 1.05;
}

.ks-brand__text strong {
    color: var(--ks-ivory);
    font-size: 15px;
    letter-spacing: .12em;
    white-space: nowrap;
}

.ks-brand__text small {
    margin-top: 5px;
    color: var(--ks-gold-bright);
    font-size: 10px;
    letter-spacing: .10em;
    white-space: nowrap;
    opacity: .92;
}

.ks-nav {
    justify-self: center;
}

.ks-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ks-nav__item {
    position: relative;
}

.ks-nav__row {
    display: flex;
    align-items: center;
}

.ks-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    color: #ddd6ca;
    font-size: 14px;
    font-weight: 620;
    letter-spacing: .01em;
    transition: color 150ms ease;
}

.ks-nav__link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 1px;
    transform: scaleX(0);
    transform-origin: center;
    background: linear-gradient(90deg, var(--ks-gold), var(--ks-gold-bright));
    box-shadow: 0 0 10px rgba(214, 168, 63, 0.4);
    transition: transform 160ms ease;
}

.ks-nav__link:hover,
.ks-nav__link.is-active {
    color: var(--ks-ivory);
}

.ks-nav__link:hover::after,
.ks-nav__link.is-active::after {
    transform: scaleX(1);
}

.ks-dropdown-toggle {
    width: 28px;
    height: 44px;
    margin-left: -8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.ks-dropdown-toggle svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    color: #9c958a;
    transition: transform 160ms ease, color 160ms ease;
}

.ks-has-dropdown.is-open .ks-dropdown-toggle svg,
.ks-dropdown-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
    color: var(--ks-gold-bright);
}

.ks-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 20;
    width: 290px;
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    border: 1px solid var(--ks-border);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 24%),
        rgba(14, 15, 17, 0.985);
    box-shadow: var(--ks-shadow);
    transition:
        opacity 150ms ease,
        transform 150ms ease,
        visibility 150ms ease;
}

.ks-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.ks-has-dropdown:hover > .ks-dropdown,
.ks-has-dropdown:focus-within > .ks-dropdown,
.ks-has-dropdown.is-open > .ks-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.ks-dropdown__lead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--ks-gold-bright);
    font-size: 13px;
    font-weight: 760;
    letter-spacing: .02em;
    background: linear-gradient(90deg, rgba(214,168,63,.09), rgba(214,168,63,.025));
}

.ks-dropdown__divider {
    height: 1px;
    margin: 8px 4px;
    background: linear-gradient(90deg, transparent, rgba(214,168,63,.25), transparent);
}

.ks-dropdown__grid {
    display: grid;
    gap: 2px;
}

.ks-dropdown__grid a {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 9px;
    color: #cbc5bb;
    font-size: 13.5px;
    transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.ks-dropdown__grid a:hover,
.ks-dropdown__grid a:focus-visible {
    color: var(--ks-ivory);
    background: linear-gradient(90deg, rgba(214,168,63,.08), rgba(255,42,36,.035));
    transform: translateX(2px);
}

.ks-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ks-search-trigger {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(214,168,63,.15);
    border-radius: 50%;
    background: rgba(255,255,255,.02);
    cursor: pointer;
}

.ks-search-trigger svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--ks-ivory);
    stroke-width: 1.65;
}

.ks-youtube-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid rgba(214,168,63,.48);
    border-radius: 999px;
    color: var(--ks-ivory);
    font-size: 13px;
    font-weight: 760;
    white-space: nowrap;
    background:
        radial-gradient(circle at 10% 50%, rgba(255,42,36,.10), transparent 32%),
        linear-gradient(180deg, rgba(214,168,63,.09), rgba(214,168,63,.035));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 0 rgba(214,168,63,0);
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

.ks-youtube-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.11), transparent);
    transition: transform 460ms ease;
}

.ks-youtube-cta:hover {
    transform: translateY(-1px);
    border-color: rgba(242,204,107,.78);
    box-shadow: 0 0 26px rgba(214,168,63,.13);
}

.ks-youtube-cta:hover::after {
    transform: translateX(110%);
}

.ks-youtube-cta__icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--ks-red), var(--ks-red-deep));
    box-shadow: 0 0 16px rgba(255,42,36,.16);
}

.ks-youtube-cta__icon svg {
    width: 16px;
    height: 16px;
    fill: white;
}

.ks-menu-toggle {
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(214,168,63,.22);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
}

.ks-menu-toggle span {
    width: 20px;
    height: 1.5px;
    border-radius: 999px;
    background: var(--ks-ivory);
}

/* Mobile drawer */

.ks-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ks-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    width: min(92vw, 420px);
    height: 100dvh;
    padding: 18px;
    transform: translateX(105%);
    border-left: 1px solid rgba(214,168,63,.18);
    background:
        radial-gradient(circle at 100% 0, rgba(214,168,63,.09), transparent 36%),
        linear-gradient(180deg, #0c0d0f 0%, #08090a 100%);
    box-shadow: -30px 0 80px rgba(0,0,0,.50);
    transition: transform 220ms cubic-bezier(.2,.7,.2,1);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ks-mobile-menu.is-open {
    transform: translateX(0);
}

.ks-mobile-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(214,168,63,.13);
}

.ks-mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ks-mobile-brand img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(214,168,63,.34);
}

.ks-mobile-brand span {
    display: grid;
    line-height: 1.06;
}

.ks-mobile-brand strong {
    font-size: 14px;
    letter-spacing: .10em;
    color: var(--ks-ivory);
}

.ks-mobile-brand small {
    margin-top: 5px;
    color: var(--ks-gold-bright);
    font-size: 9.5px;
    letter-spacing: .08em;
}

.ks-mobile-close {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(214,168,63,.20);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    color: var(--ks-ivory);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.ks-mobile-nav {
    display: grid;
    margin-top: 14px;
}

.ks-mobile-nav > a,
.ks-mobile-accordion__button {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 6px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
    background: transparent;
    color: #e4ddd2;
    font-size: 15px;
    font-weight: 670;
    text-align: left;
}

.ks-mobile-nav > a.is-active {
    color: var(--ks-gold-bright);
}

.ks-mobile-accordion__button {
    cursor: pointer;
}

.ks-mobile-accordion__icon {
    color: var(--ks-gold-bright);
    font-size: 21px;
    font-weight: 400;
    transition: transform 150ms ease;
}

.ks-mobile-accordion__button[aria-expanded="true"] .ks-mobile-accordion__icon {
    transform: rotate(45deg);
}

.ks-mobile-submenu {
    display: grid;
    padding: 8px 0 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.ks-mobile-submenu[hidden] {
    display: none;
}

.ks-mobile-submenu a {
    position: relative;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding-left: 16px;
    color: #aaa49a;
    font-size: 14px;
}

.ks-mobile-submenu a::before {
    content: "";
    position: absolute;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ks-gold);
    box-shadow: 0 0 8px rgba(214,168,63,.45);
}

.ks-mobile-menu__footer {
    padding-top: 24px;
}

.ks-mobile-youtube {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(214,168,63,.48);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(214,168,63,.09), rgba(255,42,36,.07));
    color: var(--ks-ivory);
    font-weight: 760;
}

.ks-mobile-youtube span {
    color: var(--ks-red);
}

.ks-mobile-menu__footer p {
    margin: 14px 0 0;
    text-align: center;
    color: #7f796f;
    font-size: 12px;
    letter-spacing: .08em;
}

/* Breakpoints */

@media (max-width: 1180px) {
    .ks-header__inner {
        grid-template-columns: minmax(220px, auto) 1fr auto;
        gap: 18px;
    }

    .ks-brand__text small {
        display: none;
    }

    .ks-nav__link {
        padding-inline: 9px;
        font-size: 13.5px;
    }

    .ks-youtube-cta {
        padding-inline: 13px;
    }
}

@media (max-width: 1040px) {
    .ks-nav {
        display: none;
    }

    .ks-header__inner {
        grid-template-columns: 1fr auto;
    }

    .ks-menu-toggle {
        display: flex;
    }
}

@media (max-width: 620px) {
    :root {
        --ks-header-height: 68px;
    }

    .ks-header.is-scrolled {
        --ks-header-height: 64px;
    }

    .ks-brand__mark {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .ks-brand__text strong {
        font-size: 13px;
        letter-spacing: .09em;
    }

    .ks-brand__text small {
        display: block;
        font-size: 8.5px;
    }

    .ks-youtube-cta {
        display: none;
    }

    .ks-header__actions {
        gap: 7px;
    }
}

@media (max-width: 390px) {
    .ks-brand {
        gap: 9px;
    }

    .ks-brand__text strong {
        font-size: 12px;
        letter-spacing: .075em;
    }

    .ks-brand__text small {
        font-size: 8px;
    }
}
/* ============================================================
   KITAAB SPEAKS — CINEMATIC PREMIUM HEADER FX — FINAL
   Scope: shared public header only.
   Adds:
   1) soft gold background sweep
   2) thin travelling signal line
   3) refined nav underline glow
   4) tiny brand micro-wave
   5) subtle YouTube CTA breathing glow

   No JS required. No header geometry changes.
   ============================================================ */

/* Dedicated decorative layers stay behind all interactive content. */
#site-header .ks-headerfx-sweep,
#site-header .ks-headerfx-pulse{
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* 1) Cinematic soft-gold light sweep — background-position only,
      so it cannot create horizontal page overflow. */
#site-header .ks-headerfx-sweep{
    inset: 0;
    z-index: 0;
    opacity: .72;
    background:
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 34%,
            rgba(214,168,63,.018) 40%,
            rgba(242,204,107,.055) 47%,
            rgba(255,255,255,.018) 50%,
            rgba(255,155,50,.020) 53%,
            transparent 61%,
            transparent 100%
        );
    background-size: 230% 100%;
    background-position: 135% 50%;
    animation: ks-headerfx-sweep 13.5s ease-in-out infinite;
}

/* 2) Thin pulse rail. Wrapper clips the travelling streak locally,
      without clipping desktop dropdowns. */
#site-header .ks-headerfx-pulse{
    z-index: 3;
    bottom: 0;
    height: 2px;
    overflow: hidden;
    opacity: .9;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(214,168,63,.035) 12%,
            rgba(214,168,63,.11) 50%,
            rgba(214,168,63,.035) 88%,
            transparent 100%
        );
}

#site-header .ks-headerfx-pulse > span{
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(84px, 9vw, 150px);
    height: 2px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(242,204,107,.18) 16%,
            rgba(242,204,107,.98) 43%,
            rgba(255,155,50,.92) 66%,
            rgba(255,42,36,.58) 82%,
            transparent 100%
        );
    box-shadow:
        0 0 7px rgba(242,204,107,.22),
        0 0 11px rgba(255,42,36,.08);
    transform: translate3d(-160px,0,0);
    animation: ks-headerfx-pulse-travel 5.8s linear infinite;
    will-change: transform, opacity;
}

/* 3) Existing nav underline is enhanced, not duplicated. */
#site-header .ks-nav__link::after{
    height: 1px;
    background:
        linear-gradient(
            90deg,
            rgba(214,168,63,.20),
            #f2cc6b 46%,
            #ff9b32 78%,
            rgba(255,42,36,.52)
        );
    box-shadow:
        0 0 8px rgba(214,168,63,.30),
        0 0 14px rgba(255,155,50,.08);
    transition:
        transform 220ms cubic-bezier(.2,.72,.2,1),
        opacity 220ms ease;
    opacity: .88;
}

#site-header .ks-nav__link:hover,
#site-header .ks-nav__link:focus-visible,
#site-header .ks-nav__link.is-active{
    color: #fff8e8;
    text-shadow: 0 0 12px rgba(242,204,107,.055);
}

#site-header .ks-nav__link:hover::after,
#site-header .ks-nav__link:focus-visible::after,
#site-header .ks-nav__link.is-active::after{
    transform: scaleX(1);
    opacity: 1;
}

/* 5) Existing YouTube button keeps its dimensions and existing sheen.
      Only a restrained outer breathing light is added. */
#site-header .ks-youtube-cta{
    animation: ks-headerfx-cta-breathe 5.2s ease-in-out infinite;
}

#site-header .ks-youtube-cta:hover,
#site-header .ks-youtube-cta:focus-visible{
    border-color: rgba(242,204,107,.84);
}

/* Search gets only a static interaction polish; no additional constant motion. */
#site-header .ks-search-trigger{
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

#site-header .ks-search-trigger:hover,
#site-header .ks-search-trigger:focus-visible{
    border-color: rgba(242,204,107,.45);
    background: rgba(214,168,63,.045);
    box-shadow: 0 0 18px rgba(214,168,63,.08);
}

/* Animation definitions */
@keyframes ks-headerfx-sweep{
    0%, 64%, 100%{
        background-position: 135% 50%;
        opacity: .40;
    }
    78%{
        background-position: 54% 50%;
        opacity: .72;
    }
    92%{
        background-position: -35% 50%;
        opacity: .34;
    }
}

@keyframes ks-headerfx-pulse-travel{
    0%{
        transform: translate3d(-160px,0,0);
        opacity: 0;
    }
    7%{
        opacity: .95;
    }
    90%{
        opacity: .95;
    }
    100%{
        transform: translate3d(calc(100vw + 160px),0,0);
        opacity: 0;
    }
}

@keyframes ks-headerfx-wave{
    0%, 100%{
        transform: scaleY(.55);
        opacity: .58;
    }
    26%{
        transform: scaleY(1.02);
        opacity: .92;
    }
    52%{
        transform: scaleY(.72);
        opacity: .70;
    }
    76%{
        transform: scaleY(1.18);
        opacity: 1;
    }
}

@keyframes ks-headerfx-cta-breathe{
    0%, 100%{
        filter: drop-shadow(0 0 0 rgba(214,168,63,0));
    }
    50%{
        filter: drop-shadow(0 0 7px rgba(214,168,63,.10));
    }
}

/* At the existing 1180px compression point the tagline is hidden,
   so the micro-wave is also hidden to keep the brand block clean. */
@media (max-width: 1180px){
    #site-header .ks-headerfx-sweep{
        opacity: .52;
        animation-duration: 15s;
    }
}

/* Tablet/mobile: preserve menu geometry and reduce decorative intensity. */
@media (max-width: 1040px){
    #site-header .ks-headerfx-sweep{
        opacity: .38;
    }

    #site-header .ks-headerfx-pulse{
        opacity: .66;
    }

    #site-header .ks-headerfx-pulse > span{
        width: 82px;
        animation-duration: 6.8s;
        box-shadow: 0 0 5px rgba(242,204,107,.15);
    }
}

@media (max-width: 620px){
    #site-header .ks-headerfx-sweep{
        animation: none;
        opacity: .22;
        background-position: 55% 50%;
    }

    #site-header .ks-headerfx-pulse{
        height: 1px;
        opacity: .50;
    }

    #site-header .ks-headerfx-pulse > span{
        height: 1px;
        width: 64px;
        animation-duration: 7.6s;
        box-shadow: none;
    }

    /* Desktop CTA is already hidden by the existing stylesheet at this width. */
    #site-header .ks-youtube-cta{
        animation: none;
    }
}

/* Accessibility: decorative motion stops completely. */
@media (prefers-reduced-motion: reduce){
    #site-header .ks-headerfx-sweep,
    #site-header .ks-headerfx-pulse > span,
    #site-header .ks-headerfx-logo-wave > i,
    #site-header .ks-youtube-cta{
        animation: none !important;
    }

    #site-header .ks-headerfx-sweep{
        opacity: .20;
        background-position: 50% 50%;
    }

    #site-header .ks-headerfx-pulse > span{
        display: none;
    }

    #site-header .ks-headerfx-logo-wave > i{
        transform: none !important;
        opacity: .72;
    }
}
/* ============================================================
   KITAAB SPEAKS — REALISTIC BRAND AUDIO WAVE — FINAL
   Scope: ONLY the small waveform inside the shared header brand block.
   Goals:
   - centered under KITAAB SPEAKS / tagline
   - wider and more natural on desktop
   - visible and responsive on mobile
   - zero header-height / nav / dropdown / menu logic changes
   ============================================================ */

#site-header .ks-headerfx-logo-wave{
    justify-self:center;
    align-self:center;
    width:78px;
    height:13px;
    margin-top:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    pointer-events:none;
    user-select:none;
    overflow:visible;
}

/* Soft baseline makes the wave feel like a live audio monitor,
   without adding layout size. */
#site-header .ks-headerfx-logo-wave::before{
    content:"";
    position:absolute;
    width:84px;
    height:1px;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(214,168,63,.16) 14%,
        rgba(242,204,107,.32) 46%,
        rgba(255,155,50,.24) 72%,
        transparent 100%
    );
    box-shadow:0 0 5px rgba(242,204,107,.08);
    opacity:.78;
}

/* Nine uneven bars = more like speech, less like a music equalizer. */
#site-header .ks-headerfx-logo-wave > i{
    position:relative;
    z-index:1;
    display:block;
    flex:0 0 3px;
    width:3px;
    border-radius:999px;
    transform-origin:center;
    background:linear-gradient(
        180deg,
        #f2cc6b 0%,
        #ffb33f 38%,
        #ff7a2e 68%,
        #ff2a24 100%
    );
    box-shadow:
        0 0 5px rgba(242,204,107,.16),
        0 0 7px rgba(255,42,36,.07);
    animation:ks-headerfx-real-wave 1.55s ease-in-out infinite;
    will-change:transform,opacity;
}

/* Natural voice profile: edges low, center stronger, deliberately asymmetric. */
#site-header .ks-headerfx-logo-wave > i:nth-child(1){height:4px; animation-delay:-.10s}
#site-header .ks-headerfx-logo-wave > i:nth-child(2){height:7px; animation-delay:-.72s}
#site-header .ks-headerfx-logo-wave > i:nth-child(3){height:10px;animation-delay:-1.18s}
#site-header .ks-headerfx-logo-wave > i:nth-child(4){height:7px; animation-delay:-.36s}
#site-header .ks-headerfx-logo-wave > i:nth-child(5){height:13px;animation-delay:-1.34s}
#site-header .ks-headerfx-logo-wave > i:nth-child(6){height:9px; animation-delay:-.58s}
#site-header .ks-headerfx-logo-wave > i:nth-child(7){height:11px;animation-delay:-1.02s}
#site-header .ks-headerfx-logo-wave > i:nth-child(8){height:6px; animation-delay:-.24s}
#site-header .ks-headerfx-logo-wave > i:nth-child(9){height:4px; animation-delay:-.88s}

@keyframes ks-headerfx-real-wave{
    0%,100%{
        transform:scaleY(.48);
        opacity:.58;
    }
    18%{
        transform:scaleY(.86);
        opacity:.84;
    }
    36%{
        transform:scaleY(.62);
        opacity:.68;
    }
    56%{
        transform:scaleY(1.16);
        opacity:1;
    }
    74%{
        transform:scaleY(.73);
        opacity:.78;
    }
    88%{
        transform:scaleY(.98);
        opacity:.92;
    }
}

/* Wide laptop / desktop: give the audio signature a little more presence. */
@media (min-width:1181px){
    #site-header .ks-headerfx-logo-wave{
        width:86px;
        height:14px;
        gap:3px;
    }

    #site-header .ks-headerfx-logo-wave::before{
        width:92px;
    }
}

/* 1180px and below:
   tagline may be hidden by the existing header rules, but the wave STAYS visible. */
@media (max-width:1180px){
    #site-header .ks-headerfx-logo-wave{
        width:68px;
        height:11px;
        margin-top:3px;
        gap:2px;
    }

    #site-header .ks-headerfx-logo-wave::before{
        width:72px;
    }

    #site-header .ks-headerfx-logo-wave > i{
        flex-basis:2px;
        width:2px;
    }
}

/* Mobile: explicitly keep it visible, centered and compact.
   No header height change; it remains inside the existing brand text block. */
@media (max-width:620px){
    #site-header .ks-headerfx-logo-wave{
        display:flex;
        width:58px;
        height:9px;
        margin-top:2px;
        gap:2px;
        justify-self:center;
    }

    #site-header .ks-headerfx-logo-wave::before{
        width:62px;
        opacity:.60;
    }

    #site-header .ks-headerfx-logo-wave > i{
        flex-basis:2px;
        width:2px;
        box-shadow:0 0 3px rgba(242,204,107,.12);
        animation-duration:1.72s;
    }

    #site-header .ks-headerfx-logo-wave > i:nth-child(1){height:3px}
    #site-header .ks-headerfx-logo-wave > i:nth-child(2){height:5px}
    #site-header .ks-headerfx-logo-wave > i:nth-child(3){height:7px}
    #site-header .ks-headerfx-logo-wave > i:nth-child(4){height:5px}
    #site-header .ks-headerfx-logo-wave > i:nth-child(5){height:9px}
    #site-header .ks-headerfx-logo-wave > i:nth-child(6){height:6px}
    #site-header .ks-headerfx-logo-wave > i:nth-child(7){height:8px}
    #site-header .ks-headerfx-logo-wave > i:nth-child(8){height:5px}
    #site-header .ks-headerfx-logo-wave > i:nth-child(9){height:3px}
}

/* Extra-small phones: preserve space while keeping the live signature visible. */
@media (max-width:390px){
    #site-header .ks-headerfx-logo-wave{
        width:52px;
        height:8px;
        gap:1.5px;
        margin-top:2px;
    }

    #site-header .ks-headerfx-logo-wave::before{
        width:55px;
    }
}

/* Accessibility: static waveform remains visible when motion is reduced. */
@media (prefers-reduced-motion:reduce){
    #site-header .ks-headerfx-logo-wave > i{
        animation:none !important;
        transform:none !important;
        opacity:.82 !important;
        will-change:auto;
    }
}