:root {
    --brand-blue: #2E6F97; /* hero band */
    --brand-cyan: #0A8ED3; /* footer band, buttons */
    --text: #23303A;
    --muted: #6b7a86;
    --radius: 12px;
    --border: #d6dde5; /* light border for inputs/cards */
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0; padding: 0;
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background-color: #d5e6f1;
}

.landing {
    max-width: 980px; /* email layout look */
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 10px 10px rgba(0,0,0,.1);
}

/* Header */
.landing__header {
    text-align: center;
    padding: 24px 24px 8px;
}

.landing__header .logo {
    height: 125px;
    width: auto;
    position: relative;
    z-index: 1;
}

/* Hero */
.hero {
    position: relative;
    margin-bottom: 2rem;
    padding-block: 2rem;
    background-size: cover;
    background-position: center;
    font-family: "Gotham", Arial, sans-serif;
}

.hero__banner {
    width: 100%;
    display: block;
    height: auto;
    background: var(--brand-blue);
}

.hero__people {
    position: absolute;
    left: clamp(.5rem, 2vw, 2rem);
    bottom: clamp(-2rem, -5vw, -1rem);
    height: clamp(100px, 25vw, 250px);
    object-fit: cover;
    z-index: 0
}

.hero__content {
    position: relative;
    color: #fff;
    text-align: center;
    max-width: 350px;
    margin-inline: auto
}

.hero h1 {
    margin: 0;
    font-weight: 800;
    font-size: clamp(20px, 4.2vw, 36px);
    line-height: 1.05;
    letter-spacing: 0.02em;
}

/* Intro */
.intro {
    padding: 0 24px;
    text-align: center;
}

.intro p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 14px;
}

.intro__hello {
    font-weight: 600;
    margin-top: 8px;
}

.intro__hint {
    color: var(--muted);
    font-style: italic;
    margin-top: 8px;
}

.btn {
    display: inline-block;
    background: var(--brand-cyan);
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 14px 22px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.btn:hover {
    filter: brightness(1.05);
}

/* Features area */
.features {
    margin: 26px 24px;
    padding: 18px;
    border: 2px solid #4fb1e2;
    border-radius: var(--radius);
}

.features h2 {
    text-align: center;
    font-size: 20px;
    margin: 0 0 18px;
}

.grid {
    display: grid;
    gap: 20px;
    align-items: start;
    justify-items: center;
    margin-bottom: 14px;
}
.grid--top, .grid--bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--middle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
    text-align: center;
    padding: 8px;
}

.card img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px;
}

.card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.also {
    text-align: center;
    margin: 6px 0 8px;
    font-size: 18px;
    color: var(--brand-cyan);
}

/* Signature */
.signature {
    text-align: center;
    margin: 26px 0;
    font-size: 18px;
}

/* Footer */
.landing__footer {
    position: relative;
    margin-top: 14px;
    background: var(--brand-cyan);
    padding: 14px 24px;
}

.footer__brand {
    display: flex;
    align-items: center;
    justify-content: end;
}

.footer__logo {
    height: 100px;
    width: auto;
}

.footer__motto {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.footer__motto span {
    opacity: .85;
}

/* Responsive */
@media (max-width: 760px) {
    .landing {
        max-width: 100%;
    }
    .features {
        margin: 20px 12px;
        padding: 14px;
    }

    .grid--top, .grid--bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--middle {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    .hero {
        padding: 1rem;
    }
    .hero__content {
        max-width: 250px;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .grid--top, .grid--bottom {
        grid-template-columns: 1fr;
    }
}

/* Fonts */
@font-face {
    font-family: "Gotham";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Gotham/Gotham-Ultra-7d7b945f895f0375050cb5d334f4d0ca.eot");
    src: url("../fonts/Gotham/Gotham-Ultra-7d7b945f895f0375050cb5d334f4d0ca.eot") format("embedded-opentype"),
    url("../fonts/Gotham/Gotham-Ultra-11bbd966cb441a1a663ffa724a2d01f9.woff2") format("woff2"),
    url("../fonts/Gotham/Gotham-Ultra-78711146284705f1d2acf887d0ff338a.woff") format("woff"),
    url("../fonts/Gotham/Gotham-Ultra-a4ae9ba58aefbf97cf2ba35cdf1d7446.ttf") format("truetype"),
    url("../fonts/Gotham/Gotham-Ultra-4331c5b92f7b4e83d467c041ce224371.svg") format("svg");
}
@font-face {
    font-family: "Gotham";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Gotham/Gotham-Book-e8fc40647c52df33dab6f463903bb8d7.eot");
    src: url("../fonts/Gotham/Gotham-Book-e8fc40647c52df33dab6f463903bb8d7.eot") format("embedded-opentype"),
    url("../fonts/Gotham/Gotham-Book-76631f1bef3e9fd730458a83624da2d3.woff2") format("woff2"),
    url("../fonts/Gotham/Gotham-Book-7c09d203d561ab2e7a71e58c0acef46c.woff") format("woff"),
    url("../fonts/Gotham/Gotham-Book-8d598a4a256d84d13fe51c9790f2ae42.ttf") format("truetype"),
    url("../fonts/Gotham/Gotham-Book-8f0b38a1a0c09fe4e5128ed0bfd55299.svg") format("svg");
}
@font-face {
    font-family: "Gotham";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Gotham/Gotham-Bold-e2251993a2524b27adae01667c737f6f.eot");
    src: url("../fonts/Gotham/Gotham-Bold-e2251993a2524b27adae01667c737f6f.eot") format("embedded-opentype"),
    url("../fonts/Gotham/Gotham-Bold-921246f303beee86476ad54262847711.woff2") format("woff2"),
    url("../fonts/Gotham/Gotham-Bold-db7328ef10f2dd6f0db4bb648abfdd9c.woff") format("woff"),
    url("../fonts/Gotham/Gotham-Bold-c3c99d245fc57e44a9ca9061cd39a60e.ttf") format("truetype"),
    url("../fonts/Gotham/Gotham-Bold-f0b368b68435093079378a10787887b5.svg") format("svg");
}
@font-face {
    font-family: "Gotham";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Gotham/Gotham-UltraItalic-fa4b6734720ee2270abf1e631faed03a.eot");
    src: url("../fonts/Gotham/Gotham-UltraItalic-fa4b6734720ee2270abf1e631faed03a.eot") format("embedded-opentype"),
    url("../fonts/Gotham/Gotham-UltraItalic-d967b32923662133b11f52e3edd27f05.woff2") format("woff2"),
    url("../fonts/Gotham/Gotham-UltraItalic-266606b909e83812bc8979a499330400.woff") format("woff"),
    url("../fonts/Gotham/Gotham-UltraItalic-e669b85c72ff666f1aa23914c0e4d2da.ttf") format("truetype"),
    url("../fonts/Gotham/Gotham-UltraItalic-8b6cc6d70e8e1a0de30fd391d35e4d83.svg") format("svg");
}
@font-face {
    font-family: "Gotham";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Gotham/Gotham-Medium-be8ad36b4dd19f1257b459fc0b7d8190.eot");
    src: url("../fonts/Gotham/Gotham-Medium-be8ad36b4dd19f1257b459fc0b7d8190.eot") format("embedded-opentype"),
    url("../fonts/Gotham/Gotham-Medium-52d6aa156f9dfefc369c20a0785adec9.woff2") format("woff2"),
    url("../fonts/Gotham/Gotham-Medium-5dc49cd9d31a89ad357e03729d98b9af.woff") format("woff"),
    url("../fonts/Gotham/Gotham-Medium-0f9b47daff6ea3044a9e2ccf1a4f5755.ttf") format("truetype"),
    url("../fonts/Gotham/Gotham-Medium-7cdec17ce31e0fc2ec867a677be21385.svg") format("svg");
}
@font-face {
    font-family: "Lexend";
    src: url("../fonts/Lexend/Lexend-Regular-ab53a5acc66da3013006e18eb060f0f8.eot");
    src: url("../fonts/Lexend/Lexend-Regular-ab53a5acc66da3013006e18eb060f0f8.eot") format("embedded-opentype"),
    url("../fonts/Lexend/Lexend-Regular-4e01db509108f70b77af6d4c86891d98.woff2") format("woff2"),
    url("../fonts/Lexend/Lexend-Regular-11384ae5ee0ac7c9e057e21ca039063b.woff") format("woff"),
    url("../fonts/Lexend/Lexend-Regular-5dfe0b7db59a457b14212cf9bab93271.ttf") format("truetype"),
    url("../fonts/Lexend/Lexend-Regular-04d1a7f8220f9e223714f6d0000426e7.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lexend";
    src: url("../fonts/Lexend/Lexend-Bold-5a4465312791093f4fc667ae3fba6815.eot");
    src: url("../fonts/Lexend/Lexend-Bold-5a4465312791093f4fc667ae3fba6815.eot") format("embedded-opentype"),
    url("../fonts/Lexend/Lexend-Bold-bf2919502219226c0bfd2a6a189a49cc.woff2") format("woff2"),
    url("../fonts/Lexend/Lexend-Bold-53ac6286499478076d95b01b4bab803c.woff") format("woff"),
    url("../fonts/Lexend/Lexend-Bold-bdcacc5fd53112266742a5d7ef0bbb87.ttf") format("truetype"),
    url("../fonts/Lexend/Lexend-Bold-7b97ea275f61edd0a9ecf1468716b57d.svg") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lexend";
    src: url("../fonts/Lexend/Lexend-ExtraLight-3e2def09c952fd1e468391044524de60.eot");
    src: url("../fonts/Lexend/Lexend-ExtraLight-3e2def09c952fd1e468391044524de60.eot") format("embedded-opentype"),
    url("../fonts/Lexend/Lexend-ExtraLight-710472aa8ec3582d185b13a867689a72.woff2") format("woff2"),
    url("../fonts/Lexend/Lexend-ExtraLight-1db4671fd85490c583d36f283ad1d47f.woff") format("woff"),
    url("../fonts/Lexend/Lexend-ExtraLight-9f599207759e5afef492f108dffd86f9.ttf") format("truetype"),
    url("../fonts/Lexend/Lexend-ExtraLight-3ef8d858414f796d69c42f331acdbcff.svg") format("svg");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lexend";
    src: url("../fonts/Lexend/Lexend-Thin-a7d194cd89cfa254af8f695efee6a6eb.eot");
    src: url("../fonts/Lexend/Lexend-Thin-a7d194cd89cfa254af8f695efee6a6eb.eot") format("embedded-opentype"),
    url("../fonts/Lexend/Lexend-Thin-107b1d1118907e4744c55dbb9328e217.woff2") format("woff2"),
    url("../fonts/Lexend/Lexend-Thin-9c5bbcd69de26068da579133a7451dd3.woff") format("woff"),
    url("../fonts/Lexend/Lexend-Thin-253acb1f777e514d2b799a7c878dcfbd.ttf") format("truetype"),
    url("../fonts/Lexend/Lexend-Thin-967b7cc5ab03b815967fe5b2ad645d7d.svg") format("svg");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lexend";
    src: url("../fonts/Lexend/Lexend-Light-b1f6ebc257203b3180af37950ead0334.eot");
    src: url("../fonts/Lexend/Lexend-Light-b1f6ebc257203b3180af37950ead0334.eot") format("embedded-opentype"),
    url("../fonts/Lexend/Lexend-Light-1129d0f42179e198b1bd0bef872d940b.woff2") format("woff2"),
    url("../fonts/Lexend/Lexend-Light-a90f0276dc6a1b3c7d5bb0aaedf8b7d5.woff") format("woff"),
    url("../fonts/Lexend/Lexend-Light-3b415044c4fe655ba30e4c13b87bc320.ttf") format("truetype"),
    url("../fonts/Lexend/Lexend-Light-151f839bdbed5bf125d9dfbcf17ce900.svg") format("svg");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lexend";
    src: url("../fonts/Lexend/Lexend-Black-be0bce69c27a479e45acdac343f8b631.eot");
    src: url("../fonts/Lexend/Lexend-Black-be0bce69c27a479e45acdac343f8b631.eot") format("embedded-opentype"),
    url("../fonts/Lexend/Lexend-Black-f7ab1a036ace4dfefe0ecff8ac781845.woff2") format("woff2"),
    url("../fonts/Lexend/Lexend-Black-37af1613660aa6cb917acdd5877a0901.woff") format("woff"),
    url("../fonts/Lexend/Lexend-Black-ff620d0ebfd2c73ec47943b095afa7ec.ttf") format("truetype"),
    url("../fonts/Lexend/Lexend-Black-2b6f12238f875c40dad3ce8ffbdcdc9d.svg") format("svg");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lexend";
    src: url("../fonts/Lexend/Lexend-SemiBold-b03f193959b820d4f033fe8f2f72406d.eot");
    src: url("../fonts/Lexend/Lexend-SemiBold-b03f193959b820d4f033fe8f2f72406d.eot") format("embedded-opentype"),
    url("../fonts/Lexend/Lexend-SemiBold-0ef94bf7dc00069c2ed87fc58054ed95.woff2") format("woff2"),
    url("../fonts/Lexend/Lexend-SemiBold-a234eacc41774e764a03db760ac7514c.woff") format("woff"),
    url("../fonts/Lexend/Lexend-SemiBold-ca9e3f0423afeb949c7c2829db1bab1a.ttf") format("truetype"),
    url("../fonts/Lexend/Lexend-SemiBold-e89fbbc5dbc5cb8287d6f172996a1fc6.svg") format("svg");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lexend";
    src: url("../fonts/Lexend/Lexend-Medium-962aa632a59418b67cce9f44c55fea27.eot");
    src: url("../fonts/Lexend/Lexend-Medium-962aa632a59418b67cce9f44c55fea27.eot") format("embedded-opentype"),
    url("../fonts/Lexend/Lexend-Medium-0b65c4cdb04eb30bdb8c41abc4ce5ce4.woff2") format("woff2"),
    url("../fonts/Lexend/Lexend-Medium-e3c7f867ed900dba7fcac3b3bd9a2ee2.woff") format("woff"),
    url("../fonts/Lexend/Lexend-Medium-f8295bf6c3a384bb8a471d76a1e443f1.ttf") format("truetype"),
    url("../fonts/Lexend/Lexend-Medium-b774fb882e36276d069e6f630b41a848.svg") format("svg");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lexend";
    src: url("../fonts/Lexend/Lexend-ExtraBold-c94159008de31d495e6423c73ccec4b5.eot");
    src: url("../fonts/Lexend/Lexend-ExtraBold-c94159008de31d495e6423c73ccec4b5.eot") format("embedded-opentype"),
    url("../fonts/Lexend/Lexend-ExtraBold-3ff58111c82f88007eef1a63a44ab34a.woff2") format("woff2"),
    url("../fonts/Lexend/Lexend-ExtraBold-3f77ef51417bb81e9a5a2f22428c448c.woff") format("woff"),
    url("../fonts/Lexend/Lexend-ExtraBold-11eee26291b5096e46108b4954e6392b.ttf") format("truetype"),
    url("../fonts/Lexend/Lexend-ExtraBold-4bd746d327551d76cc070d6c8e6313ff.svg") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* === Client form styles === */
.client-form {
    margin: 1.5rem 0 2.5rem;
    padding: clamp(16px, 2.5vw, 24px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #f7fbfe;
    box-shadow: 0 1px 2px rgba(18, 34, 55, .04);
}

.client-form fieldset {
    margin: 0; padding: 0; border: 0;
}

.client-form legend {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .75rem;
    color: var(--brand-blue);
}

/* Layout */
.client-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

@media (max-width: 720px) {
    .client-form__grid { grid-template-columns: 1fr; }
}

/* Fallback when default theme does not output row classes */
.client-form > div,
.client-form .form-row,
.client-form .form-group {
    margin-bottom: 14px;
}

/* Labels */
.client-form label {
    display: inline-block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

/* Inputs */
.client-form input[type="text"],
.client-form input[type="email"],
.client-form input[type="password"],
.client-form input[type="search"],
.client-form input[type="tel"],
.client-form input[type="url"],
.client-form select,
.client-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    line-height: 1.3;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.client-form input[disabled],
.client-form input[readonly] {
    background: #f1f5f9;
    color: #6b7a8a;
}

.client-form input:focus,
.client-form select:focus,
.client-form textarea:focus {
    outline: none;
    border-color: var(--brand-cyan);
    box-shadow: 0 0 0 3px rgba(10, 142, 211, .15);
}

/* Help & errors (Symfony default themes) */
.client-form .form-help,
.client-form .help,
.client-form small.help {
    display: block;
    margin-top: 6px;
    color: #5e738b;
}

.client-form .form-error-message,
.client-form .form-errors,
.client-form .invalid-feedback { /* catch Bootstrap theme too */
    color: #c0392b;
    margin-top: 6px;
    font-size: .95rem;
}

.client-form ul.form-errors {
    margin: 6px 0 0; padding-left: 18px;
}

/* Align actions */
.client-form .form-actions,
.client-form .actions {
    margin-top: 18px;
}

.client-form .form-fields > div {
    margin-top: 2rem;
}

/* Make it visually aligned with the page CTA */
.client-form button,
.client-form .btn {
    appearance: none;
    border: 0;
    background: var(--brand-cyan);
    color: #fff;
    font-weight: 700;
    padding: 10px 18px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-top: 2rem;
}

.client-form button:hover,
.client-form .btn:hover {
    background: #087bb7;
}

/* Place the three fields in a sensible grid:
   - accountNumber full row (read-only)
   - newName / newEmail side-by-side on desktop */
.client-form .row-accountNumber { grid-column: 1 / -1; }

/* If you decide later to add row classes in the twig theme, these will apply. */


/* === Alert messages (success / warning) === */
.alert {
    margin: 1.25rem auto;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left-width: 5px;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--text);
    line-height: 1.5;
    max-width: 820px;
    box-shadow: 0 1px 2px rgba(18, 34, 55, .04);
}

.alert--success {
    border-color: #16a34a;            /* green-600 */
    border-left-color: #16a34a;
    background: #f0fdf4;              /* green-50 */
    color: #14532d;                    /* green-900 */
}

.alert--warning {
    border-color: #f59e0b;            /* amber-500 */
    border-left-color: #f59e0b;
    background: #fffbeb;              /* amber-50 */
    color: #7c2d12;                    /* amber-900 */
}

/* Optional icon-like accent using ::before if needed later */
.alert strong { font-weight: 700; }