/* ==========================================================================
   CODETICA — Header, navigation, footer
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    transition: background var(--dur-2) var(--ease-out),
                border-color var(--dur-2) var(--ease-out),
                backdrop-filter var(--dur-2) var(--ease-out);
    border-bottom: 1px solid transparent;
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 10, 14, .78) 0%, rgba(2, 10, 14, .28) 55%, transparent 100%);
    opacity: 1;
    transition: opacity var(--dur-2) var(--ease-out);
    pointer-events: none;
}

.site-header.is-stuck {
    background: rgba(3, 12, 17, .86);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom-color: var(--line-dark);
}

.site-header.is-stuck::before,
.site-header.is-open::before {
    opacity: 0;
}

.site-header.is-open {
    background: var(--ink-1000);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    height: var(--header-h);
    position: relative;
    z-index: 2;
}

/*
| The brand mark alternates between two lockups, CODETICA and REPRESENTATIVE.
|
| --brand-mark is the height of the INK in both — the glyph and the letters,
| not the canvas. The two files carry different amounts of transparent padding
| and different canvas proportions, so every other number below is derived
| from that one height by the ratios measured in each file:
|
|              canvas h / ink h   ink left / ink h   ink top / ink h   ink w / ink h
|   CODETICA       1.518182           0.200000          0.286364          8.540909
|   REPRESENT.     1.520231           0.219653          0.306358          9.057803
|
| Each image is given its own height and pulled back by its own insets, which
| lands the ink of both at the top-left corner of the stack at exactly the same
| size. The circuit glyph is common to both files, so it sits still while the
| word behind it changes — the whole point of the effect.
|
| The stack is the width of the WIDER of the two, fixed, so the navigation
| cannot move when the logo swaps. Nothing is ever stretched: both images keep
| width:auto and are only ever scaled by their height.
*/
.brand {
    --brand-mark: 32px;
    --brand-cycle: 7s;
    display: inline-flex;
    align-items: center;
    flex: none;
}

.brand__stack {
    position: relative;
    display: block;
    flex: none;
    width: calc(var(--brand-mark) * 9.057803);
    height: var(--brand-mark);
}

/*
| The board around the mark. Decoration only: it sits under the two lockups,
| takes no pointer events, and is drawn entirely outside the band the letters
| occupy, so it can never be read as part of the wordmark.
|
| It is allowed out of its own box on purpose — the routes run above and below
| the logo — but it is bounded horizontally by the slot, so nothing reaches the
| navigation. The strokes are non-scaling, which keeps them a true hairline at
| every size instead of thinning away as the logo shrinks.
*/
.brand__circuit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.brand__circuit-trace path {
    stroke: rgba(35, 180, 95, .44);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
| One cycle, three layers, all on the same clock.
|
| --brand-cycle is the length of the relay: five routes starting 1.4s apart.
| A run takes 38% of it, so two routes are lit at a time and the board always
| has something moving on it without ever being busy.
*/
.brand__circuit-spark path,
.brand__circuit-head path {
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    animation-name: brandPulse;
    animation-duration: var(--brand-cycle, 7s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: var(--delay, 0s);
}

/* The tail: a fifth of the conductor, lit. */
.brand__circuit-spark path {
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-dasharray: 22 100;
    filter: drop-shadow(0 0 4px rgba(35, 180, 95, .75));
}

/* The head, riding the same point of the same path: shorter, brighter, and
   the reason the pulse reads as going somewhere. */
.brand__circuit-head path {
    stroke: var(--accent-bright);
    stroke-width: 2.1;
    stroke-dasharray: 4 100;
    filter: drop-shadow(0 0 6px rgba(94, 227, 155, .95));
}

@keyframes brandPulse {
    0% { stroke-dashoffset: 22; opacity: 0; }
    3% { opacity: 1; }
    33% { opacity: 1; }
    38% { stroke-dashoffset: -100; opacity: 0; }
    100% { stroke-dashoffset: -100; opacity: 0; }
}

/* A node lights as its own route arrives, then settles back. */
.brand__circuit-node circle {
    fill: rgba(35, 180, 95, .5);
    transform-box: fill-box;
    transform-origin: center;
    animation: brandNode var(--brand-cycle, 7s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes brandNode {
    0%, 26% { fill: rgba(35, 180, 95, .5); transform: scale(1); }
    34% { fill: var(--accent-bright); transform: scale(1.6); }
    46%, 100% { fill: rgba(35, 180, 95, .5); transform: scale(1); }
}

.brand__logo {
    position: absolute;
    width: auto;
    max-width: none;
    object-fit: contain;

    opacity: 0;
    transform: translateX(5px);
    transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
    will-change: opacity, transform;
}

/* The one on screen. */
.brand__logo.is-on {
    opacity: 1;
    transform: translateX(0);
}

/* The one leaving: it drifts a few pixels to the left as it fades, and the
   incoming one arrives from the right, so both travel the same way. */
.brand__logo.is-leaving {
    opacity: 0;
    transform: translateX(-5px);
}

.brand__logo--codetica {
    height: calc(var(--brand-mark) * 1.518182);
    left: calc(var(--brand-mark) * -0.200000);
    top: calc(var(--brand-mark) * -0.286364);
}

.brand__logo--representative {
    height: calc(var(--brand-mark) * 1.520231);
    left: calc(var(--brand-mark) * -0.219653);
    top: calc(var(--brand-mark) * -0.306358);
}

/*
| The slot is 9.06x the mark height, so the mark alone decides whether the
| brand still clears whatever sits to its right. 32px holds everywhere the
| menu bar is a drawer — which is every width below 1240px, down to about
| 520px — and on screens of 1440px and up.
|
| Between those two the full menu bar is on screen next to the logo, and that
| row is already dense: six items whose Spanish labels are the long ones, plus
| the search, language and Contact controls. There the mark takes what is left
| and no more. The images are never distorted at any size — only this one
| number changes.
*/
@media (min-width: 1240px) and (max-width: 1439px) {
    .brand {
        --brand-mark: clamp(15px, calc(7vw - 72px), 28px);
    }
}

@media (max-width: 520px) {
    .brand {
        --brand-mark: clamp(12px, 3.8vw, 18px);
    }
}

/* Once the menu bar is gone the header is a short row, and three fragments
   read as clutter rather than detail: only the one below the mark stays. */
@media (max-width: 1023px) {
    .brand {
        --brand-cycle: 4.6s;
    }

    .brand__circuit-trace path:not(:nth-child(2)):not(:nth-child(3)),
    .brand__circuit-spark path:not(:nth-child(2)):not(:nth-child(3)),
    .brand__circuit-head path:not(:nth-child(2)):not(:nth-child(3)),
    .brand__circuit-node circle:not(:nth-child(3)):not(:nth-child(5)) {
        display: none;
    }

    /* Two routes left, so they share the cycle between them instead of
       waiting out the three that are no longer there. */
    .brand__circuit-spark path:nth-child(2),
    .brand__circuit-head path:nth-child(2),
    .brand__circuit-node circle:nth-child(3) {
        animation-delay: 0s;
    }

    .brand__circuit-spark path:nth-child(3),
    .brand__circuit-head path:nth-child(3),
    .brand__circuit-node circle:nth-child(5) {
        animation-delay: 2.3s;
    }
}

/* On a phone the mark is small enough that anything around it crowds it. */
@media (max-width: 600px) {
    .brand__circuit {
        display: none;
    }
}

/* No motion: CODETICA, standing still, and the board with it — the lines stay,
   the pulse does not. */
@media (prefers-reduced-motion: reduce) {
    .brand__circuit-spark,
    .brand__circuit-head {
        display: none;
    }

    .brand__circuit-node circle {
        animation: none;
    }

    .brand__logo {
        transition: none;
    }

    .brand__logo--codetica {
        opacity: 1;
        transform: none;
    }

    .brand__logo--representative {
        display: none;
    }
}

/* ------------------------------------------------------------ Primary nav */

.nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: clamp(0.5rem, 2vw, 2rem);
}

.nav__item {
    position: static;
}

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.55rem 0.95rem;
    border-radius: var(--r-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--on-dark-2);
    letter-spacing: -0.005em;
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
    cursor: pointer;
}

.nav__link:hover,
.nav__item.is-open > .nav__link {
    color: var(--on-dark);
    background: rgba(255, 255, 255, .05);
}

.nav__link[aria-current='page'],
.nav__link.is-active {
    color: var(--on-dark);
}

.nav__link.is-active::after {
    content: '';
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: -2px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.nav__caret {
    width: 9px;
    height: 9px;
    opacity: .55;
    transition: transform var(--dur-2) var(--ease-out);
}

.nav__item.is-open .nav__caret {
    transform: rotate(180deg);
    opacity: 1;
}

/* --------------------------------------------------------------- Actions */

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-left: auto;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-dark);
    border-radius: var(--r-sm);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: .1em;
}

.lang-switch a {
    padding: 0.42rem 0.6rem;
    color: var(--on-dark-4);
    transition: all var(--dur-1) var(--ease-out);
}

.lang-switch a:hover {
    color: var(--on-dark);
    background: rgba(255, 255, 255, .06);
}

.lang-switch a[aria-current='true'] {
    color: var(--ink-1000);
    background: var(--accent);
    font-weight: 600;
}

.header-search {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    color: var(--on-dark-2);
    transition: all var(--dur-1) var(--ease-out);
}

.header-search:hover {
    color: var(--accent-bright);
    background: rgba(255, 255, 255, .06);
}

.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--on-dark);
    border-radius: var(--r-sm);
}

.nav-toggle__bars {
    position: relative;
    width: 20px;
    height: 12px;
}

.nav-toggle__bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }

.site-header.is-open .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.site-header.is-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ------------------------------------------------------------- Mega menu */

.mega {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    z-index: var(--z-mega);
    background: rgba(4, 14, 19, .97);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid var(--line-dark-2);
    border-radius: var(--r-lg);
    box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .95);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out),
                visibility var(--dur-2);
}

.nav__item.is-open .mega {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.mega > .container {
    padding-inline: clamp(1.5rem, 2.4vw, 2.75rem);
    max-width: none;
}

.mega__inner {
    display: grid;
    gap: clamp(1.5rem, 2.4vw, 2.25rem);
    padding-block: clamp(1.75rem, 2.6vw, 2.5rem);
}

.mega__inner--split {
    gap: clamp(2rem, 4vw, 4rem);
}

.mega__inner--split {
    grid-template-columns: minmax(240px, 300px) 1fr;
}

.mega__intro {
    display: grid;
    gap: var(--s-4);
    align-content: start;
    padding-right: var(--s-8);
    border-right: 1px solid var(--line-dark);
}

.mega__intro-title {
    font-size: 1.35rem;
    line-height: 1.2;
}

.mega__intro-text {
    font-size: var(--fs-sm);
    color: var(--on-dark-3);
    line-height: var(--lh-relaxed);
}

.mega__cols {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.mega__col-title {
    margin-bottom: var(--s-4);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-dark-4);
}

.mega__list {
    display: grid;
    gap: 2px;
}

.mega__link {
    display: grid;
    gap: 2px;
    padding: var(--s-3);
    margin-inline: calc(var(--s-3) * -1);
    border-radius: var(--r-sm);
    transition: background var(--dur-1) var(--ease-out);
}

.mega__link:hover {
    background: rgba(255, 255, 255, .05);
}

.mega__link strong {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--on-dark);
}

.mega__link span {
    font-size: var(--fs-xs);
    color: var(--on-dark-4);
}

.mega__link:hover strong {
    color: var(--accent-bright);
}

/* Industries mega grid */
.mega-industries {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mega-industry {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 1px solid var(--line-dark);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .02);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--on-dark-2);
    transition: all var(--dur-2) var(--ease-out);
}

.mega-industry:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: rgba(35, 180, 95, .08);
    color: var(--on-dark);
    transform: translateY(-2px);
}

.mega-industry svg {
    color: var(--accent);
    flex: none;
}

.mega-manufacturers {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mega-manufacturer {
    display: grid;
    gap: 3px;
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--line-dark);
    border-radius: var(--r-sm);
    transition: all var(--dur-2) var(--ease-out);
}

.mega-manufacturer:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: rgba(35, 180, 95, .07);
}

.mega-manufacturer strong {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mega-manufacturer span {
    font-size: var(--fs-xs);
    color: var(--on-dark-4);
}

.mega__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-6);
    padding-block: var(--s-4);
    border-top: 1px solid var(--line-dark);
}

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

.mobile-nav {
    position: fixed;
    inset: calc(var(--header-h) + var(--ribbon-h, 0px)) 0 0;
    z-index: var(--z-mega);
    background: var(--ink-1000);
    overflow-y: auto;
    padding: var(--s-6) 0 var(--s-16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
    display: none;
}

.site-header.is-open .mobile-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.acc__item {
    border-bottom: 1px solid var(--line-dark);
}

.acc__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--s-5) 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--on-dark);
    text-align: left;
}

.acc__trigger svg {
    color: var(--on-dark-4);
    transition: transform var(--dur-2) var(--ease-out);
    flex: none;
}

.acc__item.is-open .acc__trigger svg {
    transform: rotate(180deg);
    color: var(--accent);
}

.acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-3) var(--ease-out);
}

.acc__item.is-open .acc__panel {
    grid-template-rows: 1fr;
}

.acc__panel > div {
    overflow: hidden;
}

.acc__links {
    display: grid;
    gap: 1px;
    padding-bottom: var(--s-5);
}

.acc__links a {
    padding: var(--s-3) 0 var(--s-3) var(--s-4);
    border-left: 1px solid var(--line-dark);
    font-size: 0.9375rem;
    color: var(--on-dark-2);
}

.acc__links a:hover {
    color: var(--accent-bright);
    border-color: var(--accent);
}

.mobile-nav__actions {
    display: grid;
    gap: var(--s-3);
    padding-top: var(--s-8);
}

@media (max-width: 640px) {
    /* Keep the mobile header to four touch targets. */
    .header-actions .btn--primary {
        display: none;
    }

    .lang-switch a {
        padding: 0.42rem 0.5rem;
    }
}

/* The desktop bar carries six items, and the Spanish labels are the long
   ones ("Industrias que atendemos", "Mapa de clientes"): they need 1214px
   beside the logo and the actions. Below this width the bar hands over to
   the drawer rather than crushing the labels. */
@media (max-width: 1239px) {
    .nav {
        display: none;
    }

    .nav-toggle {
        display: grid;
    }

    .mobile-nav {
        display: block;
    }
}

/* ---------------------------------------------------------------- Footer */

.site-footer {
    background: var(--ink-1000);
    color: var(--on-dark-2);
    border-top: 1px solid var(--line-dark);
    padding-block: clamp(3.5rem, 2rem + 4vw, 6rem) var(--s-8);
}

.footer__top {
    display: grid;
    gap: clamp(2.5rem, 4vw, 5rem);
    grid-template-columns: minmax(240px, 320px) 1fr;
    padding-bottom: clamp(2.5rem, 4vw, 4rem);
    border-bottom: 1px solid var(--line-dark);
}

.footer__brand {
    display: grid;
    gap: var(--s-5);
    align-content: start;
}

.footer__brand img {
    height: 42px;
    width: auto;
}

.footer__tagline {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--on-dark);
    max-width: 24ch;
}

.footer__cols {
    display: grid;
    gap: clamp(1.75rem, 3vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

.footer__col-title {
    margin-bottom: var(--s-4);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-dark-4);
}

.footer__links {
    display: grid;
    gap: var(--s-3);
    font-size: var(--fs-sm);
}

.footer__links a,
.footer__links .linkish {
    color: var(--on-dark-2);
    transition: color var(--dur-1) var(--ease-out);
    width: fit-content;
}

.footer__links a:hover,
.footer__links .linkish:hover {
    color: var(--accent-bright);
}

.footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding-top: var(--s-6);
    font-size: var(--fs-xs);
    color: var(--on-dark-4);
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
}

.footer__legal a:hover {
    color: var(--on-dark-2);
}

.social-row {
    display: flex;
    gap: var(--s-2);
}

.social-row a,
.social-row span {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line-dark);
    border-radius: var(--r-sm);
    color: var(--on-dark-3);
    transition: all var(--dur-2) var(--ease-out);
}

.social-row a:hover {
    border-color: var(--accent);
    color: var(--accent-bright);
}

.social-row span {
    opacity: .45;
}

@media (max-width: 860px) {
    .footer__top {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------- Demo ribbon */

.demo-ribbon {
    position: relative;
    z-index: calc(var(--z-header) + 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    padding: var(--s-2) var(--gutter);
    background: var(--green-900);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-glow);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: .06em;
    text-align: center;
}

.demo-ribbon button {
    color: inherit;
    opacity: .7;
    text-decoration: underline;
}

.demo-ribbon button:hover {
    opacity: 1;
}

body.demo .site-header {
    top: var(--ribbon-h, 0px);
}

.footer__offices {
    display: grid;
    gap: var(--s-2);
}

.footer__offices li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

/* ------------------------------------------- Header over a white hero
   The bar is built for a dark hero: its scrim and its link colours assume an
   ink background. An industry page opens on white, so while the header is
   still transparent there it inverts to dark type on the light page. Once it
   sticks it becomes the solid dark bar again and the normal rules resume.
   Nothing about the header's layout, size or behaviour changes. */

body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open)::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .55) 60%, transparent 100%);
}

body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .nav__link {
    color: var(--on-light-2);
}

body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .nav__link:hover,
body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .nav__item.is-open > .nav__link,
body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .nav__link[aria-current='page'],
body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .nav__link.is-active {
    color: var(--on-light);
    background: rgba(6, 16, 21, .05);
}

/* The two brand lockups are a dark green that already reads on a white hero,
   so they are left exactly as supplied — no filter, no recolouring. */
body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .brand__logo {
    filter: none;
}

body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .icon-btn,
body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .nav-toggle__bars span {
    color: var(--on-light-2);
    background-color: currentColor;
}

body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .icon-btn {
    background-color: transparent;
}

body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .lang-switch {
    border-color: var(--line-light-2);
}

body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .lang-switch a {
    color: var(--on-light-3);
}

body:has(.industry-hero) .site-header:not(.is-stuck):not(.is-open) .lang-switch a[aria-current='true'] {
    color: var(--on-light);
}