/* ============================================================
   home.css — the Home page (index.html) in the new identity
   Loaded after style.css. Every class is prefixed hm- so the legacy
   rules never match it, and every colour, size and space comes from
   variables.css. The page is light (<html data-theme="light">); the
   dark stat blocks are deliberate dark panels inside it.
   ============================================================ */

/* ---- Shared: section titles, eyebrows, body copy, buttons ----
   Short text blocks are <div>s, not <p>s: style.css forces every <p> to
   18px !important below 768px. */
.hm-eyebrow {
    color: var(--ink-muted);
    margin: 0 0 var(--space-2);
}

.hm-title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-display-md-size);
    line-height: var(--text-display-md-line);
    color: var(--accent);
    margin: 0 0 var(--space-4);
    text-align: left;
}

.hm-text {
    font-family: var(--font-sans);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line);
    color: var(--ink-muted);
    margin: 0;
}

/* Solid accent button; hover inverts it (surface fill, accent text and border). */
.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    border: 2px solid var(--accent);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--ink-on-accent);
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.hm-btn:visited,
.hm-btn:hover,
.hm-btn:focus {
    color: var(--ink-on-accent);
    text-decoration: none;
}

/* Keyboard focus for every other link in the page content: style.css strips the outline from a:focus.
   Buttons, rows and chips keep their own (more specific) rings. */
main a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.hm-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (hover: hover) {
    .hm-btn:hover {
        background: var(--surface);
        color: var(--accent);
    }
}

.hm-section {
    padding: var(--space-10) 0;
    background: var(--surface);
}

.hm-section--alt {
    background: var(--surface-alt);
}

.hm-difference {
    padding-bottom: var(--space-12);
}

.hm-work {
    padding: var(--space-12) 0;
}

/* ---- 1. Hero: flat --gray-dark, solid white title, muted subtitle ----
   Shared by every page that uses .hm-hero (home, about, points, privacy-policy, terms). */
.hm-hero {
    background-color: var(--gray-dark);
    background-image: none;
}

/* Clear the full desktop header (was an inline <style> in index.html). */
@media (min-width: 992px) {
    .slide.hm-hero.slider-fixed--height {
        padding-top: var(--hero-padding-top);
        padding-bottom: var(--hero-padding-bottom);
    }
}

/* Phones: style.css stacks the slider's padding (60px) and .inner's padding-bottom (47px) under the hero
   text, 107px in all. Bring it down to one --hero-padding-bottom-sm. Tablet keeps style.css's values. */
@media (max-width: 767px) {
    .slide.hm-hero.slider-fixed--height {
        padding-bottom: var(--hero-padding-bottom-sm);
    }

    .slide.hm-hero .inner {
        padding-bottom: 0;
    }
}

/* style.css sizes this h1 per breakpoint with .slide.slide-style-1 .inner h1.title, so these rules
   repeat that weight; the box width sets the line break (two lines on desktop) and the leading is steady. */
.slide.hm-hero .inner h1.hm-hero-title {
    font-family: var(--font-display);
    color: var(--white);
    max-width: 21ch;  /* narrowest box that keeps two lines: "Technology that transforms / everyday experiences." */
    line-height: 1.1;
    text-wrap: balance;
}

@media (max-width: 767px) {
    .slide.hm-hero .inner h1.hm-hero-title {
        font-size: var(--home-hero-title-size-sm);
        max-width: none;
    }

    /* style.css forces every <p> to 18px / 28px !important below 768px; keep ours on the type scale. */
    p.hm-text {
        font-size: var(--text-body-lg-size) !important;
        line-height: var(--text-body-lg-line) !important;
    }
}

.hm-hero-subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line);
    color: var(--home-hero-subtitle-ink);
    max-width: 40ch;
}

/* ---- 2. About teaser (grid stays Bootstrap's col-lg-6 / col-lg-6) ---- */
/* team.png is 1672x941: a 16:9 frame shows the whole illustration without cropping anyone. */
.hm-about-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.hm-about-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

@media (max-width: 991px) {
    .hm-about-media {
        margin-bottom: var(--space-6);
    }
}

.hm-about .hm-text {
    margin-top: var(--space-2);
}

.hm-about .hm-actions {
    margin-top: var(--space-6);
}

/* ---- 3. How it's different ---- */
.hm-stats {
    display: grid;
    gap: var(--space-5);
    margin: var(--space-6) 0;
}

.hm-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--gray-dark);
}

.hm-stat-label {
    color: var(--header-ink-muted);
    margin: 0;
}

.hm-stat-value {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-display-lg-size);
    line-height: var(--text-display-lg-line);
    margin: 0;
}

.hm-stat-value--accent {
    color: var(--accent);
}

.hm-stat-value--points {
    color: var(--token-points);
}

.hm-stat-text {
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    color: var(--gray-light);
    margin: 0;
}

.hm-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.hm-rows li {
    border-top: 1px solid var(--border);
}

.hm-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    color: var(--ink);
    text-decoration: none;
}

.hm-row:visited,
.hm-row:hover,
.hm-row:focus {
    color: var(--ink);
    text-decoration: none;
}

.hm-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Brand icons: Points as the header draws it on its own page (gold mask), Wallet and
   Merchant Portal in their full-colour versions. */
.hm-row-icon {
    display: block;
    flex: none;
    width: var(--home-row-icon-size);
    height: var(--home-row-icon-size);
}

.hm-row-icon--points {
    background-color: var(--token-points);
    -webkit-mask: url("/assets/images/icons/pointsIconColor.svg") center / contain no-repeat;
    mask: url("/assets/images/icons/pointsIconColor.svg") center / contain no-repeat;
}

.hm-row-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hm-row-title {
    font-family: var(--font-sans);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line);
    font-weight: var(--weight-semibold);
}

.hm-row-text {
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    color: var(--ink-muted);
}

.hm-row-chevron {
    color: var(--ink-muted);
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

@media (hover: hover) {
    .hm-row:hover .hm-row-title,
    .hm-row:hover .hm-row-chevron {
        color: var(--accent);
    }

    .hm-row:hover .hm-row-chevron {
        transform: translateX(var(--space-1));
    }
}

/* ---- 5. Closing line before the footer: phoenix sketch + one quiet line, centred ---- */
.hm-closing {
    text-align: center;
}

.hm-closing-mark {
    display: block;
    width: auto;
    height: var(--home-closing-mark-height);
    margin: 0 auto var(--space-5);
}

.hm-closing-text {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line);
    color: var(--gray-dark);
    margin: 0;
}

/* ---- 4. What we build ---- */
.hm-projects {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);
}

.hm-project {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.hm-project img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.hm-project-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
}

.hm-project-name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-display-sm-size);
    line-height: var(--text-display-sm-line);
    color: var(--ink);
    margin: 0;
}

@media (min-width: 768px) {
    .hm-stats {
        grid-template-columns: 1fr 1fr;
    }

    .hm-projects {
        grid-template-columns: repeat(3, 1fr);
    }

    .hm-title {
        font-size: var(--text-display-lg-size);
        line-height: var(--text-display-lg-line);
    }

    .hm-stat-value {
        font-size: var(--text-display-xl-size);
        line-height: var(--text-display-xl-line);
    }

    .hm-hero-subtitle {
        font-size: var(--text-display-sm-size);
        line-height: var(--text-display-sm-line);
    }
}