/* ================================================================
   AMEMOR GUIDE — stylesheet.css

   DESIGN RULES
   ----------------------------------------------------------------
   - Thin typography. Never use weight as the main emphasis.
   - Size, spacing, colour and capitals create hierarchy.
   - No rounded corners.
   - No gradients.
   - No decorative UI.
   - Tiles are navigation.
   - The logo is a node/tile, not a conventional header logo.
   - The page should feel like a knowledge map, not a normal website.
   ================================================================ */

:root {
   --red: #f01523;
	--maroon: #970811;
    --blue: #535682;
    --yellow: #e0a030;
    --green: #21622f;
	--slogan:#f4ca80; 
	--teal:#16a6a6;
--purple: #662a81;
	--khaki: #6a7e27;
	--deep-blue: #0d4553;
	--gold: #855a1d;
	--link: #8a90df;
    --line: rgba(255, 255, 255, 0.18);

     --bg: #02242c;
    --panel: #02242c;
    --line: rgba(255,255,255,0.20);
    --text: #f4f5f5;
    --muted: #8eabb0;
    --white: #fff;}
--link-purple: #a37ab6;
--link-red: #fa5a64;
--link-khaki: #a6b379;
--link-green: #77d18b;

    --tile-size: clamp(180px, 18vw, 260px);
    --logo-size: clamp(250px, 27vw, 390px);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

html {
    background: var(--bg);
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);

    font-family:
        "Helvetica Neue",
        "Segoe UI Light",
        "Arial",
        sans-serif;

    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

a {
    color: inherit;
}

button {
    font: inherit;
}


/* ================================================================
   TOP BAR
   ================================================================ */

.topbar {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    right: 0;
    height: 76px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(2,36,44,0.84);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-button {
    height: 35px;
    min-width: 108px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 0;
    background: #000;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.7px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.control-button:hover { background:#000; color:#fff; border-color:#000; }
.back-button,.home-button { font-size:24px; }
.language-button { min-width:118px; font-size:13px; letter-spacing:1px; }

/* ================================================================
   KNOWLEDGE MAP
   ================================================================ */

.map {
    width: min(1120px, 94vw);

    margin: 84px auto 0;

    display: grid;

    grid-template-columns: 1fr 1.18fr 1fr;
    grid-template-rows: auto auto auto;

    align-items: center;
    justify-items: center;

    column-gap: clamp(24px, 4vw, 64px);
    row-gap: clamp(26px, 4vw, 58px);
}


/* ================================================================
   CENTRAL AMEMOR NODE
   ================================================================ */

.brand-node {
    grid-column: 2;
    grid-row: 2;

    width: var(--logo-size);
    min-height: 230px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid var(--line);
    border-radius: 0;

    background: rgba(0, 0, 0, 0.10);

    position: relative;
    z-index: 3;
}

.brand-node::before,
.brand-node::after {
    content: "";
    position: absolute;
    background: var(--line);
    pointer-events: none;
}

.brand-node::before {
    width: 1px;
    height: 58px;
    top: -59px;
    left: 50%;
}

.brand-node::after {
    width: 1px;
    height: 58px;
    bottom: -59px;
    left: 50%;
}

.brand-node picture {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    display: block;
    width: min(78%, 300px);
    height: auto;
    max-height: 120px;
    margin: 0 auto;
    object-fit: contain;
}

.brand-caption {
    margin-top: 18px;

    font-size: 21px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--muted);
}


/* ================================================================
   JOURNEY TILES
   ================================================================ */

.tile {
    position: relative;

    width: var(--tile-size);
    min-height: 170px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 28px;

    text-align: center;
    text-decoration: none;

    border-radius: 0;
    color: #fff;

    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.tile:hover,
.tile:focus-visible {
    background: var(--black);
    color: #fff;
    transform: scale(1.025);
    outline: none;
}

.number {
    margin-bottom: 18px;

    font-size: 11px;
    font-weight: 300;
    letter-spacing: 3px;

    opacity: 0.72;
}

.title {
    font-size: clamp(25px, 2.5vw, 36px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: uppercase;
}

.description {
    margin-top: 13px;

    max-width: 220px;

    font-size: 21px;
    line-height: 1.25;
    font-weight: 500;

    opacity: 0.82;
}


/* ================================================================
   TILE POSITIONS + COLOURS
   ================================================================ */

.tile-build {
    grid-column: 2;
    grid-row: 1;
    background: var(--blue);
}

.tile-understand {
    grid-column: 1;
    grid-row: 2;
    background: var(--maroon);
}

.tile-deploy {
    grid-column: 3;
    grid-row: 2;
    background: var(--yellow);
    color: #111;
}

/* Required: yellow tile becomes white text when it turns black. */
.tile-deploy:hover,
.tile-deploy:focus-visible {
    background: var(--black);
    color: #fff;
}

.tile {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.tile-explore {
    grid-column: 2;
    grid-row: 3;
    background: var(--green);
}


/* ================================================================
   CONNECTORS
   ================================================================ */

.tile-build::after,
.tile-understand::after,
.tile-deploy::after,
.tile-explore::after {
    content: "";
    position: absolute;
    background: var(--line);
    pointer-events: none;
}

.tile-build::after {
    width: 1px;
    height: 30px;
    bottom: -30px;
    left: 50%;
}

.tile-understand::after {
    width: 42px;
    height: 1px;
    right: -42px;
    top: 50%;
}

.tile-deploy::after {
    width: 42px;
    height: 1px;
    left: -42px;
    top: 50%;
}

.tile-explore::after {
    width: 1px;
    height: 30px;
    top: -30px;
    left: 50%;
}


/* ================================================================
   FOOTER STATEMENT
   ================================================================ */

.statement{
    margin: 92px auto 0;

    text-align: center;
}


.statement  p {
    margin: 0;

    font-size: clamp(24px, 2.5vw, 36px);
    line-height: 1.3;

    font-weight: 300;
    letter-spacing: 0.4px;
}

.statement p + p {
    margin-top: 10px;
	margin-bottom: 70px;

    color: var(--muted);
}



/* ================================================================
   LIGHT THEME
   ================================================================ */


/* ================================================================
   RESPONSIVE — TABLET
   ================================================================ */

@media (max-width: 900px) {

    .map {
        width: min(760px, 94vw);
        column-gap: 18px;
        row-gap: 28px;
    }

    :root {
        --tile-size: clamp(150px, 24vw, 210px);
        --logo-size: clamp(220px, 31vw, 300px);
    }

    .tile {
        min-height: 145px;
    }

    .title {
        font-size: 26px;
    }

    .description {
        font-size: 20px;
    }

    .control {
        width: 90px;
        height: 70px;
    }
}


/* ================================================================
   RESPONSIVE — MOBILE
   ================================================================ */

@media (max-width: 650px) {

    .top-controls {
        top: 0;
        left: 0;
        right: 0;
        min-height: 72px;
        padding: 10px 14px;
    }

    .control {
        width: 72px;
        height: 58px;
        font-size: 14px;
    }

    .login {
        width: 72px;
    }

    .login-icon,
    .login-icon svg {
        width: 32px;
        height: 32px;
    }

    .map {
        width: 100%;
        margin-top: 92px;

        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .brand-node {
        order: 1;
        width: min(88vw, 340px);
        min-height: 190px;
        margin-bottom: 18px;
    }

    .brand-node::before,
    .brand-node::after,
    .tile::after {
        display: none;
    }

    .tile-build { order: 2; }
    .tile-understand { order: 3; }
    .tile-deploy { order: 4; }
    .tile-explore { order: 5; }

    .tile {
        width: min(88vw, 340px);
        min-height: 135px;
    }

    .description {
        font-size: 18px;
    }

    .statement {
        width: 90vw;
        margin-top: 65px;
        margin-bottom: 36px;
    }
}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

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

/* Shared top-level Knowledge navigation */
.knowledge-button{background:#f0770b;color:#fff;text-decoration:none;}
.knowledge-button:hover{background:#000;color:#fff;}