/* ==========================================================================
   AVANGARD - Home V2 - additive styles (loaded only by index-full.html)
   Two extra sections that SHOW the work: Iconic projects + Trusted by.
   Reuses the "Controlled Vortex" tokens and grammar from styles.css.
   Nothing here overrides V1 rules; only .projects and .trusted are styled.
   ========================================================================== */

/* ==========================================================================
   04 - ICONIC PROJECTS (editorial mosaic)
   ========================================================================== */
.projects .display{font-size:clamp(2.3rem,5vw,4.4rem);max-width:16ch}

/* One continuous framed mosaic: a 2-up feature band seamed to a 3-up grid.
   Same 1px-hairline technique as .counters / .process-track (gap on --line). */
.proj-mosaic{margin-top:clamp(28px,4vh,44px)}
.proj-feature,
.proj-grid{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.proj-feature{grid-template-columns:1fr 1fr}
.proj-grid{grid-template-columns:repeat(3,1fr);border-top:0}

.proj{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--carbon);margin:0;
}
.proj-feature .proj{aspect-ratio:16/9}
.proj-grid .proj{aspect-ratio:4/3}

.proj img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.18) contrast(1.04) brightness(.82);
  transition:filter .7s ease,transform 1.3s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.proj:hover img{filter:grayscale(0) contrast(1.05) brightness(.96);transform:scale(1.045)}

/* Prism accent revealed on hover (echoes .process-step::after) */
.proj::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:var(--prism);opacity:0;transform:scaleX(.28);transform-origin:left;
  transition:opacity .5s ease,transform .6s ease;
}
.proj:hover::after{opacity:.9;transform:scaleX(1)}

/* Corner index (Vortex numbering grammar) */
.pnum{
  position:absolute;top:14px;left:16px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--bone-2);
  opacity:.72;text-shadow:0 1px 8px rgba(3,3,4,.7);
}

/* Caption (exact deck grammar: pname semibold uppercase + pmeta mono) */
.pcap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,1.4vw,18px) clamp(15px,1.6vw,20px);
  display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(0deg,rgba(3,3,4,.94) 0%,rgba(3,3,4,.5) 62%,transparent 100%);
}
.pname{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(13.5px,1.15vw,16px);line-height:1.24;letter-spacing:.03em;
  text-transform:uppercase;color:var(--bone);
}
.pmeta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ash);
}

/* ==========================================================================
   06 - TRUSTED BY (aerated white-logo band)
   ========================================================================== */
/* Longer access-promise headline (3 lines, FR runs wide) : calmer size */
.trusted .display{font-size:clamp(1.7rem,3.4vw,3.1rem);max-width:34ch}

.logo-wall{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(26px,3.4vw,52px) clamp(32px,4.6vw,74px);
  padding:clamp(30px,5vh,58px) clamp(8px,3vw,40px);
  margin-top:8px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;justify-content:center;height:46px}
/* Definite height (not max-height): lets width resolve from the viewBox aspect
   ratio, so viewBox-only SVGs (fifa, coca-cola, mercedes...) don't collapse to 0. */
.logo img{
  height:32px;width:auto;max-width:150px;object-fit:contain;
  /* force uniform white regardless of the source asset's colours */
  filter:brightness(0) invert(1);
  opacity:.5;transition:opacity .4s ease,transform .4s ease;
}
.logo:hover img{opacity:.95;transform:translateY(-2px)}

/* Optical size balancing per logo (heights tuned to equalise visual weight) */
.logo img[src*="unesco"]{height:42px}
.logo img[src*="fft"]{height:40px}
.logo img[src*="visit-qatar"]{height:36px}
.logo img[src*="al-wasl"]{height:36px}
.logo img[src*="saudi"]{height:34px}
.logo img[src*="expo-osaka"]{height:34px}
.logo img[src*="mercedes"]{height:34px}
.logo img[src*="qiddiya"]{height:32px}
.logo img[src*="delvaux"]{height:32px}
.logo img[src*="les-ardentes"]{height:30px}
.logo img[src*="msg"]{height:30px}
.logo img[src*="coca-cola"]{height:30px;max-width:140px}
.logo img[src*="accor"]{height:30px}
.logo img[src*="lvmh"]{height:28px}
.logo img[src*="disney"]{height:26px;max-width:150px}
.logo img[src*="emaar"]{height:24px;max-width:130px}
.logo img[src*="fifa"]{height:24px}
.logo img[src*="samsung"]{height:22px;max-width:150px}
.logo img[src*="citizen"]{height:22px}
.logo img[src*="dragone"]{height:22px}
.logo img[src*="auditoire"]{height:14px;max-width:120px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .proj-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .proj-feature{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr}
  .proj-feature .proj{aspect-ratio:16/10}
  .proj-grid .proj{aspect-ratio:3/2}
}

@media (prefers-reduced-motion:reduce){
  .proj img,.proj::after,.logo img{transition:none}
}

/* ==========================================================================
   MEGA MENU (V2 : 9 entries, tightened so they all fit one viewport)
   ========================================================================== */
.mega-menu-v2 .ml-name{font-size:clamp(1.6rem,4.2vw,3.4rem)}
.mega-menu-v2 .mega-link{padding:clamp(8px,1.15vh,16px) 0}
@media (max-width:600px){
  .mega-menu-v2 .ml-name{font-size:clamp(1.55rem,7vw,2.4rem)}
}