/* === Typography ===
   Inter (SIL Open Font License), self-hosted so no visitor data goes to a font CDN. One variable file per subset;
   latin-ext covers Polish. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Brand tokens ===
   Bound to the audited brand values (see docs/plans/…_Implementation_Plan.md §2).
   Bootstrap's own --bs-orange (#fd7e14) is not the brand orange; use --cp-orange.
   Visual direction: deep navy for navigation, page openings, bands and footer; white for reading; orange is the
   single accent. Yellow is no longer used for text or backgrounds. */
:root {
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    --cp-orange: #ff6600;             /* logo orange: fills, graphics, text on navy (4.9:1 on #24285b) */
    --cp-orange-hover: #ff7a1f;
    --cp-orange-light: #ff8a3d;       /* links and small text on navy */
    --cp-orange-text: #d94f00;        /* orange text and icons on white (4.2:1, headings and graphics only) */
    --cp-navy: var(--bs-primary);     /* #24285b */
    --cp-navy-ink: #121643;           /* = --bs-body-color */
    --cp-navy-deep: #0c0f30;          /* navigation, footer */
    --cp-navy-tint: #eef0f8;          /* light navy wash for highlights on white */
    --cp-yellow: var(--bs-secondary); /* #ffd200, reserved for the logo and rare highlights */
    --cp-gray-logo: #545454;
    --cp-surface: var(--bs-body-bg);
    --cp-surface-muted: #f4f5f9;
    --cp-border: #e3e6f0;
    --cp-nav-h: 74px;                 /* fixed navbar height (phones); page openings start below it */
}

body {
    font-feature-settings: "cv11", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .h1, .h2, .h3 {
    letter-spacing: -0.02em;
}

.display-4,
.display-5,
.display-6 {
    font-weight: 700;
    letter-spacing: -0.03em;
}

.lead,
.fs-5 {
    line-height: 1.6;
}

img.logo {
  height: auto;
}

/* The official logo (with the "task-based software development" tagline), 20% below its original size. The navigation and
   footer are dark, so they use logo_codedprojects_2025_v2_light.png: the same logo with the grey lettering in white. */
@media (min-width: 576px) {
  :root {
    --cp-nav-h: 87px;
  }

  img.logo {
    width: 200pt;
  }
}

@media (max-width: 575px) {
  img.logo {
    width: 144pt;
  }
}

svg.icon-tabler-ext {
  width: 30pt;
  height: 30pt;
  /*border: 1px var(--bs-black) solid;*/
  padding: 3pt;
  border-radius: 3pt;
}

.task-flow-container {
  border: 1px solid var(--cp-border);
  border-radius: 1.25rem;
  background-color: #fff;
  box-shadow: 0 6px 24px rgba(18, 22, 67, 0.06);
}

.task-flow-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--cp-navy);
  color: #fff;
  border-radius: 0.6rem;
  margin-right: 0.6rem;
  font-size: 1.1rem;
}

.success-modal {
  background-color: var(--bs-success);
  color: var(--bs-light);
  /*font-weight: bold !important;*/
}

.modal-icon {
  font-size: 50pt;
  color: var(--bs-success);
}

.nav-item {
  font-size: 0.95rem;
}

/* notification styles */

.notification-message {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    max-width: 320px;
    font-weight: bold;
    font-size: 1rem;
}
.error-notification {
    background-color: var(--bs-danger);
    color: var(--bs-white);
}
.info-notification {
    background-color: var(--bs-info);
    color: var(--bs-white);
}
.warn-notification {
    background-color: var(--bs-warning);
    color: var(--bs-black);
}

.fade-in {
    opacity: 1;
}

.fade-out {
    opacity: 0;
}


/* cookie banner */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--cp-navy-deep);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -10px 30px rgba(5, 7, 31, 0.3);
    color: rgba(255, 255, 255, 0.85);
    padding: 1rem;
    text-align: center;
    z-index: 9999;
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .cookie-banner a {
        color: var(--cp-orange-light);
        margin-left: 5px;
    }

.cookie-buttons {
    margin-top: 0.75rem;
}

    .cookie-buttons button {
        margin: 0 5px;
        background-color: var(--cp-orange);
        color: var(--cp-navy-ink);
        border: 1px solid var(--cp-orange);
        padding: 0.45rem 1.1rem;
        cursor: pointer;
        font-weight: 700;
        border-radius: 0.375rem;
    }

    .cookie-buttons .btn-necessary {
        background-color: transparent;
        color: #fff;
        border-color: rgba(255, 255, 255, 0.45);
    }

/* cookie banner styles end */

/* === Products index cards === */

/* The intro floats the logo so the product name and description wrap around it.
   It is its own block because floats have no effect on flex items, and the
   card body is a flex column. */
.product-card__intro::after {
    content: "";
    display: block;
    clear: both;
}

.product-card__logo {
    float: left;
    margin: 0.25rem 1.25rem 0.75rem 0;
    max-height: 4.5rem;
    max-width: 9rem;
}

.product-card__actions .btn {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* Too narrow to wrap text beside a logo — stack instead. */
    .product-card__logo {
        float: none;
        display: block;
        margin: 0 auto 1.25rem;
    }
}

@media (max-width: 767.98px) {
    .product-card__actions .btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* === Highlighted words in headings === */

/* Highlighted words are set in orange: the deeper shade on white, the brand orange on navy.
   bootstrap.min.css also draws .underline with an absolutely positioned ::after, which is switched off. */
.underline {
    color: var(--cp-orange-text);
}

.underline::after {
    content: none;
}

.page-hero .underline,
.page-section--navy .underline,
.cta-band .underline {
    color: var(--cp-orange);
}

.text-accent {
    color: var(--cp-orange-text) !important;
}

/* Key figures, e.g. years of experience on the home page. */
.stat-figure {
    display: block;
    color: var(--cp-orange-text);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* === Page content offset === */

/* The navbar is fixed-top and dark. Every page opens with a dark .page-hero that reserves the navbar height itself,
   so the main element adds no offset of its own. */
.site-main {
    padding-top: 0;
}

/* === Buttons === */

/* Orange call to action. White text on #ff6600 fails WCAG AA (2.9:1); navy text passes (4.7:1). */
.btn-accent {
    --bs-btn-color: var(--cp-navy-ink);
    --bs-btn-bg: var(--cp-orange);
    --bs-btn-border-color: var(--cp-orange);
    --bs-btn-hover-color: var(--cp-navy-ink);
    --bs-btn-hover-bg: var(--cp-orange-hover);
    --bs-btn-hover-border-color: var(--cp-orange-hover);
    --bs-btn-focus-shadow-rgb: 255, 102, 0;
    --bs-btn-active-color: var(--cp-navy-ink);
    --bs-btn-active-bg: var(--cp-orange-hover);
    --bs-btn-active-border-color: var(--cp-navy);
    --bs-btn-disabled-color: var(--cp-navy-ink);
    --bs-btn-disabled-bg: var(--cp-orange);
    --bs-btn-disabled-border-color: var(--cp-orange);
    font-weight: 700;
}

.btn {
    font-weight: 600;
}

/* === Backgrounds === */

/* Brand colours only, no image downloads.
   --cp-pattern-network repeats a few connected nodes (systems joined through an integration layer). */
:root {
    --cp-pattern-network: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%2324285b' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M20 30 L90 20 L140 70 L120 140 L60 100 Z'/%3E%3Cpath d='M60 100 L20 150'/%3E%3Cpath d='M90 20 L60 100'/%3E%3C/g%3E%3Cg fill='%23ff6600' fill-opacity='0.22'%3E%3Ccircle cx='20' cy='30' r='2.5'/%3E%3Ccircle cx='90' cy='20' r='2.5'/%3E%3Ccircle cx='140' cy='70' r='3'/%3E%3Ccircle cx='120' cy='140' r='2.5'/%3E%3Ccircle cx='60' cy='100' r='3.5'/%3E%3Ccircle cx='20' cy='150' r='2'/%3E%3C/g%3E%3C/svg%3E");
    --cp-pattern-network-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M20 30 L90 20 L140 70 L120 140 L60 100 Z'/%3E%3Cpath d='M60 100 L20 150'/%3E%3Cpath d='M90 20 L60 100'/%3E%3C/g%3E%3Cg fill='%23ff6600' fill-opacity='0.35'%3E%3Ccircle cx='20' cy='30' r='2.5'/%3E%3Ccircle cx='90' cy='20' r='2.5'/%3E%3Ccircle cx='140' cy='70' r='3'/%3E%3Ccircle cx='120' cy='140' r='2.5'/%3E%3Ccircle cx='60' cy='100' r='3.5'/%3E%3Ccircle cx='20' cy='150' r='2'/%3E%3C/g%3E%3C/svg%3E");
    --cp-dark-surface:
        radial-gradient(circle at 85% 15%, rgba(255, 102, 0, 0.16), transparent 42%),
        radial-gradient(circle at 5% 95%, rgba(107, 115, 214, 0.22), transparent 48%),
        linear-gradient(160deg, #1f2362 0%, #121643 55%, #0c0f30 100%);
}

/* === Navigation === */

/* Bootstrap Studio styles #mainNav with the light body background; these rules take the same selectors. */
#mainNav,
#mainNav.navbar-shrink {
    background-color: rgba(12, 15, 48, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
}

#mainNav .navbar-nav > li.nav-item > a.nav-link {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus-visible,
#mainNav .navbar-nav > li.nav-item > a.nav-link.active {
    color: #fff;
}

@media (min-width: 992px) {
    #mainNav .navbar-nav > li.nav-item > a.nav-link.active {
        box-shadow: inset 0 -2px 0 var(--cp-orange);
    }
}

.navbar .nav-cta {
    margin-left: 0.75rem;
}

@media (max-width: 991.98px) {
    .navbar .nav-cta {
        margin: 0.5rem 0 0.75rem;
        display: inline-block;
    }
}

/* === Page openings === */

.page-hero {
    position: relative;
    padding: calc(var(--cp-nav-h) + 3.5rem) 0 4rem;
    background: var(--cp-dark-surface);
    color: rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

/* The node pattern frames the opening from the edges and fades out behind the text. */
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cp-pattern-network-dark);
    background-size: 160px 160px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 50%, transparent 25%, #000 85%);
    mask-image: radial-gradient(ellipse at 30% 50%, transparent 25%, #000 85%);
    pointer-events: none;
}

.page-hero > .container {
    position: relative;
}

.page-hero h1,
.page-hero h2,
.page-hero h3 {
    color: #fff;
}

.page-hero .text-muted {
    color: rgba(255, 255, 255, 0.76) !important;
}

.page-hero a:not(.btn) {
    color: var(--cp-orange-light);
}

.page-hero .section-eyebrow {
    color: var(--cp-orange-light);
}

.page-hero .context-note {
    color: rgba(255, 255, 255, 0.76);
}

.page-hero__image {
    max-height: 460px;
    object-fit: contain;
    filter: drop-shadow(0 30px 50px rgba(3, 5, 25, 0.55));
}

/* === Sections === */

.page-section {
    padding: 4.5rem 0;
}

/* Keeps in-page anchors (e.g. /services#engineering) clear of the fixed navbar. */
.anchor-target {
    scroll-margin-top: calc(var(--cp-nav-h) + 2rem);
}

.page-section--muted {
    background-color: var(--cp-surface-muted);
    background-image: var(--cp-pattern-network);
    background-size: 160px 160px;
    border-top: 1px solid var(--cp-border);
    border-bottom: 1px solid var(--cp-border);
}

/* Dark band for rhythm between light sections. Text colours are overridden for contrast on navy. */
/* The pattern sits on a pseudo-element masked away from the centre, so it frames the content instead of
   running behind the text. */
.page-section--navy {
    position: relative;
    background: var(--cp-dark-surface);
    color: rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

.page-section--navy::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cp-pattern-network-dark);
    background-size: 160px 160px;
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 80%);
    mask-image: radial-gradient(ellipse at center, transparent 30%, #000 80%);
    pointer-events: none;
}

.page-section--navy > .container {
    position: relative;
}

.page-section--navy h2,
.page-section--navy h3 {
    color: #fff;
}

.page-section--navy .section-eyebrow {
    color: var(--cp-orange-light);
}

.page-section--navy .text-muted {
    color: rgba(255, 255, 255, 0.76) !important;
}

.page-section--navy .step-list__item {
    border-top-color: var(--cp-orange);
}

.page-section--navy .step-list__number {
    background-color: var(--cp-orange);
    color: var(--cp-navy-ink);
}

.page-section--navy a:not(.btn) {
    color: var(--cp-orange-light);
}

/* Closing call-to-action band. */
.cta-band {
    position: relative;
    background: var(--cp-dark-surface);
    box-shadow: 0 24px 48px rgba(18, 22, 67, 0.18);
    overflow: hidden;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cp-pattern-network-dark);
    background-size: 160px 160px;
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
    pointer-events: none;
}

.cta-band > * {
    position: relative;
}

.cta-band p {
    color: rgba(255, 255, 255, 0.8);
}

/* Cards read as raised white panels on the tinted and patterned sections. */
.icon-card,
.product-spotlight {
    background-color: #fff;
    border: 1px solid var(--cp-border) !important;
    box-shadow: 0 6px 24px rgba(18, 22, 67, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.icon-card:hover,
.product-spotlight:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 102, 0, 0.45) !important;
    box-shadow: 0 16px 36px rgba(18, 22, 67, 0.12);
}

.section-header {
    max-width: 52rem;
    margin-bottom: 2.5rem;
}

/* On white the eyebrow text stays navy for contrast; the orange bar is a graphic accent. */
.section-eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding-left: 0.6rem;
    border-left: 3px solid var(--cp-orange);
    color: var(--cp-navy);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* A one-line note that places a page in context, e.g. the delivery model page. */
.context-note {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.25rem 0 0.25rem 0.75rem;
    border-left: 3px solid var(--cp-orange);
    color: var(--bs-secondary-color);
    text-align: left;
}

/* Icon tiles (Bootstrap Studio's .bs-icon-secondary was yellow): navy tile with an orange glyph, as in the illustrations. */
.bs-icon.bs-icon-secondary {
    background-color: var(--cp-navy);
    color: var(--cp-orange);
}

.icon-card__link {
    color: var(--cp-navy);
}

.step-list__item {
    padding-top: 1rem;
    border-top: 3px solid var(--cp-navy);
}

.step-list__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    background-color: var(--cp-navy);
    color: #fff;
    font-weight: 700;
}

.feature-row + .feature-row,
.anchor-target + .anchor-target {
    /* The second selector covers rows wrapped in an anchor (Services page), which are not siblings of each other. */
    margin-top: 5rem;
}

/* "Why it matters" note under a step's description (AI Transformation page). */
.feature-why {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--cp-orange);
    border-radius: 0 0.5rem 0.5rem 0;
    background-color: var(--cp-surface-muted);
}

.feature-why__label {
    margin-bottom: 0.4rem;
    color: var(--cp-navy);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.feature-row__image {
    max-height: 420px;
    object-fit: contain;
    filter: drop-shadow(0 22px 34px rgba(18, 22, 67, 0.22));
}

/* Illustrations placed directly in older page layouts (workspace, careers, delivery model). */
img[src*="/illustrations/"].rounded {
    border-radius: 0 !important;
    filter: drop-shadow(0 18px 28px rgba(18, 22, 67, 0.2));
}

.illustrative-label {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background-color: var(--cp-navy-tint);
    color: var(--cp-navy-ink);
    font-size: 0.875rem;
}

.product-spotlight__logo {
    height: 3rem;
    width: auto;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--cp-navy);
    background-color: var(--cp-navy-tint);
    box-shadow: inset 3px 0 0 var(--cp-orange);
}

.check-list {
    padding-left: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.4rem;
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 2px;
    background-color: var(--cp-orange);
}

/* === Places & People (contact page) === */

.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.75rem;
    background-color: #fff;
    border: 1px solid var(--cp-border);
    border-radius: 1rem;
    box-shadow: 0 6px 24px rgba(18, 22, 67, 0.06);
}

.contact-card__media {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 0.9rem;
    object-fit: cover;
}

.contact-card__media--person {
    border-radius: 50%;
}

.contact-card__body {
    min-width: 0;
}

.contact-card__links li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.contact-card__links .icon {
    flex: 0 0 auto;
    color: var(--cp-orange-text);
    font-size: 1.15rem;
}

.contact-card__links a {
    color: var(--cp-navy);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-card__links a:hover,
.contact-card__links a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .contact-card {
        flex-direction: column;
        gap: 1rem;
    }
}

/* === Insights articles === */

.article-body {
    font-size: 1.125rem;
    line-height: 1.75;
}

.article-body h2,
.article-body h3 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.article-body img {
    max-width: 100%;
    height: auto;
}

/* Image styles an article can pick with {.left}, {.right}, ... (MarkdownArticleStore.ImageStyles). */
.article-body .article-img--left {
    float: left;
    max-width: 50%;
    margin: 0.35rem 1.75rem 1rem 0;
}

.article-body .article-img--right {
    float: right;
    max-width: 50%;
    margin: 0.35rem 0 1rem 1.75rem;
}

.article-body .article-img--center {
    display: block;
    margin: 2rem auto;
}

.article-body .article-img--wide {
    display: block;
    width: 100%;
    margin: 2rem 0;
}

.article-body .article-img--rounded {
    border-radius: 0.75rem;
}

.article-body .article-img--shadow {
    box-shadow: 0 16px 36px rgba(18, 22, 67, 0.16);
}

.article-body .article-img--border {
    border: 1px solid var(--cp-border);
}

/* A new section starts below a floated image instead of wrapping around it. */
.article-body h2,
.article-body h3,
.article-body hr {
    clear: both;
}

/* Too narrow for text beside an image: floated images stack, full width. */
@media (max-width: 575.98px) {
    .article-body .article-img--left,
    .article-body .article-img--right {
        float: none;
        display: block;
        max-width: 100%;
        margin: 1.5rem auto;
    }
}

.article-body blockquote {
    padding-left: 1rem;
    border-left: 3px solid var(--cp-orange);
    color: var(--bs-secondary-color);
}

.article-body pre {
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--cp-surface-muted);
}

.article-body table {
    width: 100%;
    margin-bottom: 1.5rem;
}

.article-body th,
.article-body td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

/* === Footer === */

.site-footer {
    padding: 4rem 0 1.5rem;
    background: linear-gradient(180deg, var(--cp-navy-ink) 0%, var(--cp-navy-deep) 100%);
    color: rgba(255, 255, 255, 0.72);
}

.site-footer .text-muted {
    color: rgba(255, 255, 255, 0.62) !important;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.72);
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--cp-orange-light);
}

.site-footer .lang-select-btn {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.site-footer .lang-select-btn:hover,
.site-footer .lang-select-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.site-footer .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
}

.footer-nav__title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}

.footer-nav a {
    text-decoration: none;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    text-decoration: underline;
}

.site-footer__bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* === Motion === */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}