/* ==========================================================================
   Home page (design/reference/01-home.png). Tokens only: var(--ab-*).
   Section templates: templates/sections/{hero,marquee,about_split,stat_bar,
   feature_cards,_services_grid_split,process_steps,stats_cards,
   projects_featured,testimonials,faq_preview}.php
   ========================================================================== */

/* Whole-card links: the title link's ::after covers the card, not just the body. */
.hp-service-card .ab-card__body,
.hp-project .ab-card__body { position: static; }
.hp-stretched { color: inherit; text-decoration: none; }
.hp-stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* ---------- Hero ---------- */
.hp-hero { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem); }
.hp-hero__title { margin-bottom: 1.25rem; }
.hp-hero__title .ab-accent { display: block; }
.hp-hero__lead { max-width: 52ch; }
.hp-hero__lead strong { color: var(--ab-dark); font-weight: 700; }
.hp-hero__content .ab-btn-row { margin-top: .5rem; }
.hp-hero__trust li span strong { display: inline; }
.hp-hero__media { inset: 0 0 0 46%; }
.hp-hero__media picture { display: contents; }
.hp-hero__media img { object-position: center 40%; }

@media (max-width: 991.98px) {
    /* Stack: text first, then the photo as a rounded card (keeps the DMIG visible). */
    .hp-hero { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; }
    .hp-hero--photo { padding-bottom: 2rem; }
    .hp-hero__media {
        position: relative; inset: auto; z-index: 0; order: 2;
        margin: 2rem var(--ab-gutter) 0; border-radius: var(--ab-radius-lg); overflow: hidden;
        aspect-ratio: 4 / 3; box-shadow: var(--ab-shadow-lg);
    }
    .hp-hero__media::after { display: none; }
    .hp-hero > .ab-container { order: 1; }
}

/* ---------- Marquee ---------- */
.hp-marquee { background: var(--ab-white); border-block: 1px solid var(--ab-gray-2); padding-block: 1rem; }
.hp-marquee__inner { display: flex; align-items: center; gap: 1.5rem; }
.hp-marquee__title {
    flex: none; max-width: 17rem; margin: 0;
    font: 700 .6875rem/1.5 var(--ab-font); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ab-primary);
}
.hp-marquee__viewport {
    flex: 1; min-width: 0; display: flex; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hp-marquee__track {
    flex: none; display: flex; align-items: center; gap: 2.5rem; margin: 0; padding: 0 2.5rem 0 0; list-style: none;
    animation: hp-marquee 40s linear infinite;
}
.hp-marquee__track li {
    display: inline-flex; align-items: center; gap: 2.5rem; white-space: nowrap;
    font: 600 .9375rem/1.4 var(--ab-font); color: var(--ab-text-soft);
}
.hp-marquee__track li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ab-primary-light); margin-left: 0; }
.hp-marquee:hover .hp-marquee__track,
.hp-marquee:focus-within .hp-marquee__track { animation-play-state: paused; }
/* Once the visitor uses the toggle, only their choice counts (hover/focus on the button no longer pause). */
.hp-marquee.is-controlled .hp-marquee__track { animation-play-state: running; }
.hp-marquee.is-controlled.is-paused .hp-marquee__track { animation-play-state: paused; }
/* Pause/play: 36px disc with a 44px hit area; centred when the row stacks on phones. */
.hp-marquee__toggle { position: relative; width: 36px; height: 36px; font-size: .95rem; align-self: center; }
.hp-marquee__toggle::before { content: ""; position: absolute; inset: -4px; }
.hp-marquee__toggle .bi-play-fill, .hp-marquee.is-paused .hp-marquee__toggle .bi-pause-fill { display: none; }
.hp-marquee.is-paused .hp-marquee__toggle .bi-play-fill { display: inline; }
@keyframes hp-marquee { to { transform: translateX(-100%); } }
@media (max-width: 767.98px) {
    .hp-marquee__inner { flex-direction: column; align-items: stretch; gap: .75rem; }
    .hp-marquee__title { max-width: none; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-marquee__track { animation: none; flex-wrap: wrap; row-gap: .5rem; padding-right: 0; }
    .hp-marquee__track--clone, .hp-marquee__toggle { display: none; }
    .hp-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Services (split layout) ---------- */
.hp-services__head { position: sticky; top: 110px; }
.hp-services__head .ab-lead { font-size: 1rem; }
.hp-service-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 480px) { .hp-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hp-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-service-card .ab-card__media { aspect-ratio: 4 / 3; }
.hp-service-card .ab-card__body { padding: 14px 16px 16px; gap: .3rem; }
.hp-service-card .ab-card__title { font-size: 1rem; line-height: 1.3; }
.hp-service-card .ab-card__meta { font-size: .78rem; }
.hp-service-card__icon { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2.5rem; color: var(--ab-primary); }
.hp-service-card__arrow { color: var(--ab-primary); font-size: 1.05rem; padding-top: .5rem; transition: transform .25s var(--ab-ease); }
.hp-service-card:hover .hp-service-card__arrow,
.hp-service-card:focus-within .hp-service-card__arrow { transform: translateX(4px); }
.hp-service-card--all {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
    min-height: 180px; padding: 20px; border-radius: var(--ab-radius);
    background: linear-gradient(145deg, var(--ab-primary) 0%, var(--ab-dark-2) 100%); color: var(--ab-white);
    box-shadow: var(--ab-shadow-primary);
}
.hp-service-card--all > i { font-size: 1.75rem; opacity: .85; margin-bottom: auto; }
.hp-service-card--all a { font: 700 1.0625rem/1.3 var(--ab-font); color: var(--ab-white); }
.hp-service-card--all .hp-service-card__arrow { color: var(--ab-white); padding-top: 0; }
.hp-service-card--all a:focus-visible { outline: 2px solid var(--ab-white); outline-offset: 4px; }
@media (max-width: 991.98px) { .hp-services__head { position: static; } }

/* ---------- Why choose us (about_split) ---------- */
.hp-split__media {
    position: relative; border-radius: var(--ab-radius-lg); overflow: hidden;
    aspect-ratio: 5 / 4; background: var(--ab-primary-50); box-shadow: var(--ab-shadow-lg);
}
.hp-split__media picture { display: contents; }
.hp-split__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-split__badge {
    position: absolute; left: 16px; bottom: 16px; right: 16px; max-width: 340px;
    display: flex; align-items: center; gap: .85rem; padding: 14px 16px;
    background: rgba(15, 23, 42, .86); color: var(--ab-white);
    border-radius: var(--ab-radius); backdrop-filter: blur(6px);
}
.hp-split__badge .ab-icon-badge { --_s: 44px; }
.hp-split__badge strong { display: block; font: 700 .9375rem/1.3 var(--ab-font); }
.hp-split__badge small { display: block; font: var(--ab-caption); opacity: .8; }
.hp-split__text { font: var(--ab-small); color: var(--ab-text-soft); margin: 0 0 1.5rem; max-width: 60ch; }
.hp-split__text strong { color: var(--ab-dark); }
.hp-feature-grid {
    list-style: none; margin: 0 0 2rem; padding: 0;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px;
}
@media (min-width: 576px) { .hp-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hp-feature { display: flex; align-items: flex-start; gap: .9rem; }
.hp-feature .ab-icon-badge { --_s: 48px; }
.hp-feature__title { display: block; font: var(--ab-h4); font-size: 1rem; color: var(--ab-dark); margin-bottom: .2rem; }
.hp-feature__text { display: block; font: var(--ab-small); font-size: .8125rem; color: var(--ab-text-muted); }

/* ---------- Stat bar ---------- */
.hp-statbar { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.hp-statbar__list {
    list-style: none; margin: 0; padding: 20px;
    display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
    background: var(--ab-white); border: 1px solid var(--ab-gray-2); border-radius: var(--ab-radius-lg); box-shadow: var(--ab-shadow);
}
@media (min-width: 768px) {
    .hp-statbar__list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; padding: 24px 12px; }
    .hp-statbar__item + .hp-statbar__item { border-left: 1px solid var(--ab-gray-2); }
}
.hp-statbar__item { display: flex; align-items: center; justify-content: center; gap: .9rem; padding-inline: 12px; }
.hp-statbar__value { display: block; font: 800 1.75rem/1.1 var(--ab-font); color: var(--ab-dark); letter-spacing: -.02em; }
.hp-statbar__label { display: block; font: var(--ab-small); color: var(--ab-text-muted); }
.hp-unit { font-size: .5em; font-weight: 600; opacity: .75; margin-left: .2em; }

/* ---------- Feature cards (DMIG spotlight) ---------- */
.hp-fc-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) { .hp-fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .hp-fc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hp-fc { padding: 28px; gap: .6rem; }
.hp-fc__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .5rem; }
.hp-fc .ab-icon-badge--lg { --_s: 60px; }
.hp-fc__num { font: 800 1.5rem/1 var(--ab-font); color: var(--ab-primary-100); letter-spacing: -.02em; }
.hp-fc .ab-card__text { margin: 0; }
.hp-center-cta { display: flex; justify-content: center; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* ---------- By the numbers (dark) ---------- */
.hp-numbers__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px) { .hp-numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .hp-numbers__grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; } }
.hp-numbers__item {
    padding: 28px 24px; border-radius: var(--ab-radius);
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.hp-numbers__value { display: block; font: 800 clamp(2.25rem, 1.8rem + 1.5vw, 3rem)/1 var(--ab-font); color: var(--ab-white); letter-spacing: -.03em; margin-bottom: .75rem; }
.hp-numbers__text { margin: 0; font: var(--ab-small); color: rgba(255, 255, 255, .78); }

/* ---------- Featured projects ---------- */
.hp-projects__head { position: sticky; top: 110px; }
.hp-projects__head .ab-lead { font-size: 1rem; }
.hp-project-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px) { .hp-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hp-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hp-project .ab-card__body { padding: 16px 18px 18px; }
.hp-project .ab-card__title { font-size: 1rem; line-height: 1.3; }
.hp-project__loc i { color: var(--ab-primary); }
.hp-project .ab-card__text { font-size: .8125rem; margin-bottom: .75rem; }
.hp-project .ab-card__body > .ab-card__text:last-child { margin-top: .25rem; margin-bottom: 0; }
.hp-project__tag { font-size: .6875rem; }
.hp-project__more { display: inline-flex; align-items: center; gap: .4rem; font: 700 .875rem/1.3 var(--ab-font); color: var(--ab-primary); }
.hp-project__more i { transition: transform .25s var(--ab-ease); }
.hp-project:hover .hp-project__more i,
.hp-project:focus-within .hp-project__more i { transform: translateX(4px); }
@media (max-width: 991.98px) { .hp-projects__head { position: static; } }

/* ---------- Testimonials ---------- */
.hp-quotes.ab-grid {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 20px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 4px 4px 16px; margin: -4px;
    scrollbar-width: thin; scrollbar-color: var(--ab-primary-100) transparent;
}
@media (min-width: 768px) { .hp-quotes.ab-grid { grid-template-columns: none; grid-auto-columns: calc(50% - 10px); } }
.hp-quotes:focus-visible { outline: 2px solid var(--ab-primary); outline-offset: 4px; border-radius: var(--ab-radius); }
.hp-quote { scroll-snap-align: start; position: relative; }

.hp-quote .ab-testimonial__quote { font-size: .9375rem; }
.hp-quote__avatar { font-size: 1.15rem; }

/* ---------- FAQ preview ---------- */
.hp-faq .ab-lead { font-size: 1rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .hp-service-card__arrow, .hp-project__more i { transition: none; }
}