/* LXGROUP public site. Fonts are self-hosted (OFL): no call to any third-party CDN. */

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 600;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 600;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/instrument-sans-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */

:root {
    --color-accent: #1E9AAA;
    --color-accent-hover: #25B0C1;
    --color-accent-light: #7FD3DC;
    --color-accent-nav: #4FC3CF;
    --color-bg: #F6F5F2;
    --color-border: #ECEAE5;
    --color-border-strong: #D9D5CD;
    --color-error: #B42318;
    --color-ink: #0E1C2B;
    --color-link: #1E8C9C;
    --color-muted: #6B7A86;
    --color-navy: #0B1824;
    --color-navy-deep: #08131D;
    --color-on-dark: #B4C4CD;
    --color-on-dark-muted: #6E828E;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F2F0EB;
    --color-text: #4A5A68;
    --color-text-strong: #33434F;

    --font-body: 'Instrument Sans', system-ui, sans-serif;
    --font-display: 'Montserrat', sans-serif;

    --gutter: clamp(20px, 4vw, 56px);
    --radius: 6px;
    --radius-pill: 999px;
    --section-space: clamp(80px, 10vw, 140px);
    --transition: .2s ease;
}

.brand--vecter {
    --brand-grad: linear-gradient(180deg, #4B2C55, #E5484D);
    --brand-grad-h: linear-gradient(90deg, #E5484D, #4B2C55);
    --brand-ink: #E5484D;
}

.brand--luxapps {
    --brand-grad: linear-gradient(180deg, #2B2F7A, #2AB3D3);
    --brand-grad-h: linear-gradient(90deg, #2AB3D3, #2B2F7A);
    --brand-ink: #2AA6C6;
}

.brand--luxgap {
    --brand-grad: linear-gradient(180deg, #2C3A78, #2A9AA0);
    --brand-grad-h: linear-gradient(90deg, #2A9AA0, #2C3A78);
    --brand-ink: #2A9AA0;
}

.brand--luxops {
    --brand-grad: linear-gradient(180deg, #1E3554, #D4AE2A);
    --brand-grad-h: linear-gradient(90deg, #D4AE2A, #1E3554);
    --brand-ink: #C59F1C;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

a:hover {
    color: var(--color-ink);
}

a:focus-visible {
    outline: 2px solid var(--color-accent-light);
    outline-offset: 3px;
}

img {
    display: block;
}

.container {
    max-width: 1320px;
    margin: 0 auto;
}

.eyebrow {
    margin-bottom: 20px;
    color: var(--color-link);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .32em;
}

.eyebrow--light {
    color: var(--color-accent-light);
}

/* ---------- Buttons & links ---------- */

.button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
}

.button--primary {
    background: var(--color-accent);
}

.button--primary:hover {
    background: var(--color-accent-hover);
    color: #FFFFFF;
}

.button--ghost {
    border-color: rgba(255, 255, 255, .35);
}

.button--ghost:hover {
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.link-underline {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--color-ink);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
}

.link-underline:hover {
    border-color: var(--color-link);
    color: var(--color-link);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    color: var(--color-text-strong);
    font-size: 12px;
    font-weight: 500;
}

.tag--outline {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: none;
    color: #E3ECF0;
}

/* ---------- Header ---------- */

.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px var(--gutter);
    transition: padding var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.site-header--scrolled {
    padding-block: 12px;
    background-color: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 0 var(--color-border), 0 8px 24px rgba(11, 24, 36, .06);
    backdrop-filter: blur(12px);
}

.site-header__logo img {
    width: auto;
    height: 60px;
    transition: height var(--transition);
}

.site-header--scrolled .site-header__logo img {
    height: 44px;
}

.site-header__logo-color,
.site-header--scrolled .site-header__logo-light {
    display: none;
}

.site-header--scrolled .site-header__logo-color {
    display: block;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(16px, 2.6vw, 36px);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
}

.site-nav__link {
    color: #FFFFFF;
    opacity: .85;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
    color: #FFFFFF;
    opacity: 1;
}

.site-nav__link--cta {
    padding: 10px 22px;
    border: 1px solid var(--color-accent-nav);
    border-radius: var(--radius-pill);
    opacity: 1;
}

.site-nav__link--cta:hover {
    background: var(--color-accent-nav);
    color: var(--color-navy);
}

.site-header--scrolled .site-nav__link {
    color: var(--color-ink);
}

.site-header--scrolled .site-nav__link--cta {
    border-color: var(--color-accent);
}

.site-header--scrolled .site-nav__link--cta:hover {
    background: var(--color-accent);
    color: #FFFFFF;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-navy);
}

/* Moved by public/js/site.js on scroll (parallax). */
.hero__background {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: center / cover no-repeat;
    will-change: transform;
}

.hero--home {
    min-height: min(92vh, 860px);
}

.hero--home .hero__background {
    background-image: url('../images/hero-home.jpg');
    background-position: center right;
}

.hero--home::before,
.hero--home::after {
    position: absolute;
    content: '';
}

.hero--home::before {
    inset: 0;
    background: linear-gradient(90deg, rgba(9, 22, 34, .94) 0%, rgba(9, 22, 34, .86) max(38%, 600px), rgba(9, 22, 34, .3) max(64%, 820px), rgba(9, 22, 34, 0) max(82%, 960px));
}

.hero--home::after {
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(0deg, rgba(9, 22, 34, .9), rgba(9, 22, 34, 0));
}

.hero--group {
    min-height: 620px;
}

.hero--group .hero__background {
    background-image: url('../images/hero-group.jpg');
    opacity: .55;
}

.hero--group::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(90deg, rgba(9, 22, 34, .95) 0%, rgba(9, 22, 34, .7) 50%, rgba(9, 22, 34, .2) 100%);
}

.hero--plain {
    min-height: 380px;
}

.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1762px;
    margin: 0 auto;
    padding: 180px var(--gutter) 64px;
}

.hero__inner--narrow {
    max-width: 1320px;
    padding-bottom: 80px;
}

.hero__text {
    max-width: min(780px, 100%);
}

.hero__title {
    margin: 0;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: clamp(44px, 6vw, 92px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.02em;
}

.hero__title--page {
    max-width: 760px;
    margin-bottom: 28px;
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.05;
}

.hero__values {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 28px 0 24px;
    color: var(--color-accent-light);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .3em;
}

.hero__divider {
    width: 1px;
    height: 14px;
    background: var(--color-accent-light);
    opacity: .5;
}

.hero__lead {
    max-width: 600px;
    margin: 0 0 40px;
    color: #D6E2E8;
    font-size: 19px;
    line-height: 1.55;
    text-wrap: pretty;
}

.hero--group .hero__lead {
    margin-bottom: 0;
    line-height: 1.6;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero__brands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 32px 28px;
    margin-top: 88px;
}

.hero-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    color: #A9BCC6;
}

.hero-brand:hover {
    color: #FFFFFF;
}

.hero-brand__mark {
    flex: none;
    width: auto;
    height: 44px;
}

.hero-brand__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-brand__name {
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .06em;
}

.hero-brand__focus {
    font-size: 13px;
}

.hero-brand__bar {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 120px;
    height: 3px;
    background: var(--brand-grad-h);
}

/* ---------- Sections ---------- */

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

.section--flush-top {
    padding-top: 0;
}

.section--compact {
    padding-block: clamp(80px, 10vw, 120px);
}

.section--dark {
    position: relative;
    overflow: hidden;
    background: var(--color-navy);
    color: #FFFFFF;
}

.section__intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 32px 80px;
    align-items: end;
    margin-bottom: 64px;
}

.section__intro--vision {
    gap: 32px 88px;
    margin-bottom: 0;
}

.section__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 3.6vw, 50px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.015em;
}

.section__lead {
    max-width: 520px;
    margin: 0;
    color: var(--color-text);
    font-size: 18px;
    line-height: 1.6;
    text-wrap: pretty;
}

.vision__text {
    align-self: end;
    margin: 0;
    color: var(--color-text-strong);
    font-size: 21px;
    line-height: 1.55;
    text-wrap: pretty;
}

/* ---------- Ecosystem cards ---------- */

.ecosystem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: 20px;
}

.ecosystem-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(14, 28, 43, .05), 0 18px 40px -24px rgba(14, 28, 43, .25);
    color: var(--color-ink);
    transition: transform .3s, box-shadow .3s;
}

.ecosystem-card:hover {
    box-shadow: 0 1px 2px rgba(14, 28, 43, .05), 0 30px 60px -28px rgba(14, 28, 43, .35);
    color: var(--color-ink);
    transform: translateY(-4px);
}

.ecosystem-card__bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    background: var(--brand-grad);
}

.ecosystem-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    padding: 28px;
    border-bottom: 1px solid var(--color-border);
}

.ecosystem-card__logo img {
    max-width: 80%;
    max-height: 118px;
}

.ecosystem-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 28px 28px 30px 34px;
}

.ecosystem-card__tag {
    color: var(--color-muted);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .28em;
}

.ecosystem-card__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.ecosystem-card__text {
    flex: 1;
    margin: 0;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.55;
}

.ecosystem-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
}

.ecosystem-card__arrow {
    color: var(--brand-ink);
}

/* ---------- Complementary expertise ---------- */

.expertise__glow {
    position: absolute;
    top: -30%;
    right: -20%;
    width: 70%;
    height: 120%;
    background: radial-gradient(closest-side, rgba(30, 154, 170, .22), rgba(30, 154, 170, 0));
}

.expertise__inner {
    position: relative;
}

.expertise__title {
    max-width: 820px;
    margin-bottom: 20px;
}

.expertise__lead {
    max-width: 640px;
    margin: 0 0 72px;
    color: var(--color-on-dark);
    font-size: 18px;
    line-height: 1.6;
    text-wrap: pretty;
}

.disciplines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.discipline {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 36px 32px 36px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.discipline__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.discipline__number {
    color: var(--color-accent-light);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
}

.discipline__line {
    width: 28px;
    height: 1px;
    background: var(--brand-grad-h);
}

.discipline__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.discipline__text {
    margin: 0;
    color: var(--color-on-dark);
    font-size: 15px;
    line-height: 1.6;
}

.discipline .tags {
    margin-top: 6px;
}

.discipline__brand {
    margin-top: 10px;
    color: #8EA3AF;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .24em;
}

.steps {
    margin-top: 96px;
}

.steps .eyebrow {
    margin-bottom: 32px;
}

.steps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: 4px;
}

.step {
    padding: 26px 22px 28px;
    border-top: 3px solid var(--step-color);
    background: rgba(255, 255, 255, .04);
}

.step--1 { --step-color: #E5484D; }
.step--2 { --step-color: #8A3D5E; }
.step--3 { --step-color: #2AB3D3; }
.step--4 { --step-color: #2A9AA0; }
.step--5 { --step-color: #D4AE2A; }

.step__number {
    margin-bottom: 28px;
    color: #8EA3AF;
    font-family: var(--font-display);
    font-size: 12px;
}

.step__title {
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
}

.step__text {
    color: var(--color-on-dark);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Why LXGROUP ---------- */

.why {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(88vh, 820px);
    overflow: hidden;
    background-color: var(--color-navy);
}

/* Moved by public/js/site.js while the section crosses the screen (parallax): it overflows the section by
   10% of its height plus 10% of the viewport on each side, the course of that movement.
   An image named in this file is not versioned by asset(): browsers keep it 14 days, so a new photo takes a new name. */
.why__background {
    position: absolute;
    inset: calc(-10% - 10vh) 0;
    background: url('../images/why-lounge.webp') center / cover no-repeat;
    will-change: transform;
}

.why__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9, 22, 34, 0) 30%, rgba(9, 22, 34, .35) 100%);
}

.why__inner {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 1432px;
    margin: 0 auto;
    padding: clamp(80px, 10vw, 120px) var(--gutter);
}

.why__panel {
    width: min(100%, 640px);
    padding: clamp(32px, 4vw, 56px);
    border-radius: var(--radius);
    background: rgba(246, 245, 242, .94);
    box-shadow: 0 40px 80px -40px rgba(9, 22, 34, .5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.why__title {
    margin-bottom: 40px;
    color: var(--color-ink);
}

.why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px 36px;
}

.why__item {
    padding-top: 18px;
    border-top: 1px solid var(--color-border-strong);
}

.why__item-title {
    margin-bottom: 10px;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
}

.why__item-text {
    margin: 0;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.6;
}

.why__motto {
    position: absolute;
    bottom: 28px;
    left: var(--gutter);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3em;
    text-shadow: 0 1px 12px rgba(9, 22, 34, .6);
}

/* ---------- Contact card ---------- */

.contact-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(32px, 4vw, 56px);
    border-radius: var(--radius);
    background: linear-gradient(135deg, #0E2534 0%, var(--color-navy) 60%, #123B48 100%);
    color: #FFFFFF;
}

.contact-card .eyebrow {
    margin-bottom: 0;
}

.contact-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.15;
}

.contact-card__text {
    max-width: 420px;
    margin: 0 0 12px;
    color: var(--color-on-dark);
    font-size: 16px;
    line-height: 1.6;
}

.contact-card__button {
    align-self: flex-start;
    padding: 15px 28px;
}

/* ---------- Our Group ---------- */

.companies {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.company {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 24px 56px;
    align-items: center;
    padding: 40px 48px 40px 56px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 18px 40px -28px rgba(14, 28, 43, .25);
}

.company__bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    background: var(--brand-grad);
}

.company__logo {
    max-width: 100%;
    height: 110px;
    object-fit: contain;
    object-position: left center;
}

.company__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.company__tagline {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}

.company__text {
    margin: 0;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.6;
}

.company__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.strengths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.strength {
    padding: 32px 24px 0 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
}

/* ---------- Legal notice ---------- */

.legal {
    max-width: 820px;
    color: var(--color-text-strong);
    font-size: 16px;
    line-height: 1.7;
}

.legal h2 {
    margin: 48px 0 12px;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
}

.legal h2:first-child {
    margin-top: 0;
}

.legal p {
    margin: 0 0 16px;
}

/* ---------- Feedback form ---------- */

.feedback {
    max-width: 820px;
    color: var(--color-text-strong);
    font-size: 16px;
    line-height: 1.7;
}

.feedback__lead {
    margin: 0 0 32px;
}

.feedback__alert {
    margin: 0 0 32px;
    padding: 16px 20px;
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-surface-alt);
    color: var(--color-ink);
}

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.feedback-form ul {
    margin: 8px 0 0;
    padding: 0;
    color: var(--color-error);
    font-size: 14px;
    list-style: none;
}

.feedback-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.feedback-form__label {
    padding: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
}

.feedback-form .help-text {
    color: var(--color-muted);
    font-size: 14px;
}

.feedback-form__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
}

.feedback-form__choice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.feedback-form__choice input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-accent);
}

.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    transition: border-color var(--transition);
}

.feedback-form input[type="text"]:focus-visible,
.feedback-form input[type="email"]:focus-visible,
.feedback-form textarea:focus-visible {
    border-color: var(--color-accent);
    outline: 2px solid var(--color-accent-light);
    outline-offset: 1px;
}

.feedback-form textarea {
    resize: vertical;
}

.feedback-form .button {
    align-self: flex-start;
    cursor: pointer;
}

/* Honeypot: out of sight and out of the tab order; only bots fill it in. */
.feedback-form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

.site-footer {
    padding: 72px var(--gutter) 40px;
    background: var(--color-navy-deep);
    color: var(--color-on-dark);
}

.site-footer a {
    color: var(--color-on-dark);
}

.site-footer a:hover {
    color: #FFFFFF;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.site-footer__about {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.site-footer__about p {
    max-width: 260px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.site-footer__logo {
    align-self: flex-start;
    max-width: 100%;
    height: 60px;
    width: auto;
    object-fit: contain;
    object-position: left;
}

.site-footer__column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
}

.site-footer__heading {
    margin-bottom: 6px;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .28em;
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-footer__brand-bar {
    width: 10px;
    height: 2px;
    background: var(--brand-grad-h);
}

.site-footer__domain {
    color: var(--color-on-dark-muted);
}

.site-footer a.site-footer__contact {
    color: var(--color-accent-light);
}

.site-footer a.site-footer__contact:hover {
    color: #FFFFFF;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding-top: 28px;
    color: var(--color-on-dark-muted);
    font-size: 12px;
}

.site-footer__motto {
    font-family: var(--font-display);
    letter-spacing: .3em;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}