/* ============================================================
   ASAS homepage layout (index.html only) — 14 Oct 2026 redesign
   Sections: .ah-logos, .ah-intro, .ah-projects, .ah-services,
             .ah-why, .ah-cta. Prefix ah- = "ASAS home".
   ============================================================ */
:root{
  --ah-navy:#243a76;
  --ah-navy-deep:#16244d;
  --ah-gold:#c8a350;
  --ah-ink:#1f2333;
  --ah-muted:#5f6475;
  --ah-soft:#f4f6fa;
  --ah-line:#e4e7ee;
  --ah-serif:'Libre Baskerville', serif;
  --ah-sans:'Manrope', sans-serif;
}

/* ── shared ─────────────────────────────────────────────── */
.ah-wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.ah-section{padding:110px 0}
.ah-eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;
  font:700 13px/1 var(--ah-sans) !important;letter-spacing:.18em;text-transform:uppercase;color:var(--ah-gold) !important;
}
.ah-eyebrow::before{content:"";width:36px;height:2px;background:var(--ah-gold)}
.ah-h2{
  font:400 44px/1.18 var(--ah-serif) !important;color:var(--ah-ink) !important;
  margin:0 0 22px;letter-spacing:-.01em;
}
.ah-lead{font:400 18px/1.75 var(--ah-sans);color:var(--ah-muted);margin:0 0 20px}
.ah-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px}
.ah-head .ah-h2{margin:0}
.ah-head > p{max-width:440px;margin:0;font:400 16px/1.7 var(--ah-sans);color:var(--ah-muted)}

.ah-btn{
  display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:2px;
  font:700 13px/1 var(--ah-sans);letter-spacing:.12em;text-transform:uppercase;
  background:var(--ah-navy);color:#fff !important;border:1px solid var(--ah-navy);
  transition:background .25s,color .25s,border-color .25s;
}
.ah-btn:hover{background:var(--ah-navy-deep);border-color:var(--ah-navy-deep)}
.ah-btn--ghost{background:transparent;color:var(--ah-navy) !important}
.ah-btn--ghost:hover{background:var(--ah-navy);color:#fff !important}
.ah-btn--gold{background:var(--ah-gold);border-color:var(--ah-gold);color:#1b1b1b !important}
.ah-btn--gold:hover{background:#b48f3e;border-color:#b48f3e}
.ah-btn--light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff !important}
.ah-btn--light:hover{background:#fff;color:var(--ah-navy) !important}
.ah-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* reveal on scroll (only when JS is on; content stays visible without it) */
.ah-js .ah-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.ah-js .ah-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ah-js .ah-reveal{opacity:1;transform:none;transition:none}}

/* ── 1. Trusted-by logo strip ───────────────────────────── */
.ah-logos{background:#fff;border-bottom:1px solid var(--ah-line);padding:26px 0;overflow:hidden}
.ah-logos__inner{display:flex;align-items:center;gap:40px}
.ah-logos__label{
  flex:0 0 auto;padding-left:32px;max-width:150px;
  font:700 12px/1.5 var(--ah-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ah-muted);
}
.ah-logos__viewport{
  flex:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ah-logos__track{display:flex;width:max-content;animation:ah-marquee 45s linear infinite}
.ah-logos__viewport:hover .ah-logos__track{animation-play-state:paused}
.ah-logos__track ul{display:flex;align-items:center;gap:22px;margin:0;padding:0 11px;list-style:none}
.ah-logos__track li{width:150px;height:84px;flex:0 0 auto;overflow:hidden}
.ah-logos__track img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.ah-logos__track a:hover img{filter:none;opacity:1}
@keyframes ah-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ah-logos__track{animation:none}}

/* ── 2. Intro ───────────────────────────────────────────── */
.ah-intro__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.ah-intro__media{position:relative;padding:0 0 70px 0}
.ah-intro__img-main{width:86%;aspect-ratio:4/5;object-fit:cover;display:block}
.ah-intro__img-sub{
  position:absolute;right:0;bottom:0;width:52%;aspect-ratio:1/1;object-fit:cover;
  border:10px solid #fff;box-shadow:0 30px 60px -20px rgba(22,36,77,.35);
}
  position:absolute;left:-22px;top:46px;background:var(--ah-navy);color:#fff;padding:22px 26px;
  box-shadow:0 20px 40px -18px rgba(22,36,77,.6);
}
.ah-intro__points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.ah-intro__points li{display:flex;gap:14px;align-items:flex-start;font:500 16px/1.6 var(--ah-sans);color:var(--ah-ink)}
.ah-intro__points li::before{
  content:"";flex:0 0 22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--ah-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ── 3. Featured projects (bento) ───────────────────────── */
.ah-projects{background:var(--ah-soft)}
.ah-projects__grid{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:270px;gap:18px;
  grid-template-areas:"a a b b" "a a c d" "e e f f";
  list-style:none;margin:0;padding:0;
}
.ah-projects__grid > li:nth-child(1){grid-area:a}
.ah-projects__grid > li:nth-child(2){grid-area:b}
.ah-projects__grid > li:nth-child(3){grid-area:c}
.ah-projects__grid > li:nth-child(4){grid-area:d}
.ah-projects__grid > li:nth-child(5){grid-area:e}
.ah-projects__grid > li:nth-child(6){grid-area:f}
.ah-card{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#0d1530;color:#fff}
.ah-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ah-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,21,48,0) 35%,rgba(13,21,48,.55) 65%,rgba(13,21,48,.92) 100%);
  transition:background .4s;
}
.ah-card:hover img{transform:scale(1.06)}
.ah-card:hover::after{background:linear-gradient(180deg,rgba(13,21,48,.1) 20%,rgba(13,21,48,.6) 60%,rgba(13,21,48,.95) 100%)}
.ah-card__body{position:absolute;left:26px;right:26px;bottom:24px;z-index:1}
.ah-card__loc{display:block;font:700 12px/1 var(--ah-sans);letter-spacing:.16em;text-transform:uppercase;color:#e5c77f;margin-bottom:10px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.ah-card__title{display:block;font:400 22px/1.25 var(--ah-serif);color:#fff}
li:nth-child(1) > .ah-card .ah-card__title{font-size:32px}
.ah-card__more{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font:700 12px/1 var(--ah-sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;
}
.ah-card:hover .ah-card__more,.ah-card:focus-visible .ah-card__more{opacity:1;transform:none}
.ah-projects__foot{margin-top:44px;text-align:center}
.ah-projects__hint{display:none;margin:14px 0 0;font:600 12px/1 var(--ah-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ah-muted)}

/* ── 4. Services ────────────────────────────────────────── */
.ah-services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;margin:0;padding:0}
.ah-service{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--ah-line);transition:box-shadow .35s,transform .35s,border-color .35s}
.ah-service:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 30px 60px -28px rgba(22,36,77,.4)}
.ah-service__img{aspect-ratio:4/3;overflow:hidden}
.ah-service__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.ah-service:hover .ah-service__img img{transform:scale(1.06)}
.ah-service__body{position:relative;padding:30px 26px 28px;flex:1;display:flex;flex-direction:column}
.ah-service__num{
  position:absolute;top:-26px;left:26px;width:52px;height:52px;display:grid;place-items:center;
  background:var(--ah-navy);color:var(--ah-gold);font:400 18px/1 var(--ah-serif);
}
.ah-service__title{font:400 22px/1.3 var(--ah-serif) !important;color:var(--ah-ink) !important;margin:14px 0 12px}
.ah-service__text{font:400 15px/1.65 var(--ah-sans);color:var(--ah-muted);margin:0 0 20px;flex:1}
.ah-service__link{font:700 12px/1 var(--ah-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ah-navy)}
.ah-service__link i{margin-left:6px;transition:transform .3s}
.ah-service:hover .ah-service__link i{transform:translateX(4px)}

/* ── 5. Why ASAS ────────────────────────────────────────── */
.ah-why{background:var(--ah-navy-deep);color:#fff;position:relative;overflow:hidden}
.ah-why::before{
  content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;
  border:1px solid rgba(200,163,80,.18);
}
.ah-why .ah-h2{color:#fff !important}
.ah-why__grid{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:start;position:relative}
.ah-why__intro p{font:400 17px/1.75 var(--ah-sans);color:rgba(255,255,255,.75);margin:0}
.ah-why__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ah-why__item{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:32px 0;border-top:1px solid rgba(255,255,255,.14)}
.ah-why__item:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.ah-why__icon{
  width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--ah-gold);
  color:var(--ah-gold);font-size:24px;
}
.ah-why__item h3{font:400 22px/1.3 var(--ah-serif) !important;color:#fff !important;margin:4px 0 10px}
.ah-why__item p{font:400 15.5px/1.7 var(--ah-sans);color:rgba(255,255,255,.72);margin:0}
.ah-why__item a{color:var(--ah-gold)}

/* ── 6. Closing call to action ──────────────────────────── */
.ah-cta{position:relative;padding:130px 0;color:#fff;text-align:center;overflow:hidden}
.ah-cta__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.ah-cta::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(22,36,77,.82),rgba(22,36,77,.9))}
.ah-cta .ah-wrap{position:relative;z-index:1;max-width:900px}
.ah-cta .ah-eyebrow{justify-content:center}
.ah-cta .ah-eyebrow::after{content:"";width:36px;height:2px;background:var(--ah-gold)}
.ah-cta__quote{font:400 30px/1.5 var(--ah-serif);color:#fff;margin:0 0 26px}
.ah-cta__who{font:600 14px/1.5 var(--ah-sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);margin:0}
.ah-cta__who strong{color:#fff;font-weight:700}
.ah-cta .ah-btns{justify-content:center;margin-top:44px}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:1199px){
  .ah-h2{font-size:38px !important}
  .ah-intro__grid,.ah-why__grid{gap:56px}
  .ah-services__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .ah-section{padding:88px 0}
  .ah-intro__grid,.ah-why__grid{grid-template-columns:1fr}
  .ah-intro__media{max-width:620px}
  .ah-head{flex-direction:column;align-items:flex-start;gap:16px}
  .ah-projects__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:240px;grid-template-areas:"a a" "a a" "b b" "c d" "e f"}
}
@media (max-width:767px){
  .ah-wrap{padding:0 20px}
  .ah-section{padding:68px 0}
  .ah-h2{font-size:30px !important;margin-bottom:16px}
  .ah-lead{font-size:16px}
  .ah-btns{gap:10px;margin-top:26px}
  .ah-btn{padding:15px 22px}

  .ah-logos{padding:18px 0}
  .ah-logos__inner{flex-direction:column;align-items:stretch;gap:10px}
  .ah-logos__label{max-width:none;padding:0;text-align:center}
  .ah-logos__track li{width:110px;height:62px}

  .ah-intro__grid{gap:40px}
  .ah-intro__media{padding-bottom:48px}
  .ah-intro__img-sub{border-width:6px}

  /* projects: swipeable row on phones */
  .ah-projects__grid{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin:0 -20px;padding:0 20px 6px;scrollbar-width:none;
  }
  .ah-projects__grid::-webkit-scrollbar{display:none}
  .ah-projects__grid > li{flex:0 0 82%;height:380px;scroll-snap-align:center}
  li:nth-child(1) > .ah-card .ah-card__title{font-size:24px}
  .ah-card__more{opacity:1;transform:none}
  .ah-projects__hint{display:block}

  .ah-services__grid{grid-template-columns:1fr;gap:14px}
  .ah-service{flex-direction:row}
  .ah-service:hover{transform:none}
  .ah-service__img{flex:0 0 112px;aspect-ratio:auto}
  .ah-service__body{padding:18px 18px 18px 18px}
  .ah-service__num{position:static;width:auto;height:auto;display:block;background:none;font-size:14px;color:var(--ah-gold);margin-bottom:4px}
  .ah-service__title{font-size:19px !important;margin:0 0 6px}
  .ah-service__text{font-size:14px;line-height:1.55;margin-bottom:10px}

  .ah-why__item{grid-template-columns:48px 1fr;gap:18px;padding:26px 0}
  .ah-why__icon{width:48px;height:48px;font-size:18px}

  .ah-cta{padding:84px 0}
  .ah-cta__quote{font-size:21px}
}