/* =========================================================
   Headworks v5 — featured work (home) + wide video tiles
   ========================================================= */

/* ---------- Featured work on home ---------- */
.fw{background:var(--paper);color:var(--ink);padding:var(--sec-y,140px) 0}
.fw-head{max-width:1400px;margin:0 auto clamp(36px,5vw,64px);padding:0 var(--gutter,36px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.fw-head .eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--coral);font-weight:700;
  display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.fw-head .eyebrow::before{content:"";width:32px;height:1px;background:var(--coral)}
.fw-head h2{font-family:var(--font-head);font-weight:800;font-size:clamp(44px,7.4vw,124px);line-height:.9;
  letter-spacing:-.04em;text-transform:uppercase}
.fw-head h2 em{font-style:normal;color:var(--coral)}
.fw-all{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--ink);
  border-bottom:1px solid currentColor;padding-bottom:6px;white-space:nowrap}
.fw-all:hover{color:var(--coral)}

.fw-grid{max-width:1400px;margin:0 auto;padding:0 var(--gutter,36px);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,26px)}
.fw-card{position:relative;display:block;grid-column:span 4;color:#fff;border-radius:10px;overflow:hidden;
  background:#16161a;aspect-ratio:4/5;isolation:isolate}
.fw-card.w7{grid-column:span 7;aspect-ratio:auto;min-height:clamp(320px,36vw,560px)}
.fw-card.w5{grid-column:span 5;aspect-ratio:auto;min-height:clamp(320px,36vw,560px)}
.fw-card .m{position:absolute;inset:0;z-index:-1}
.fw-card .m img,.fw-card .m video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.fw-card:hover .m img,.fw-card:hover .m video{transform:scale(1.045)}
.fw-card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.88) 100%)}
.fw-card .meta{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,26px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.fw-card .n{font-size:10px;letter-spacing:.26em;font-weight:700;opacity:.8;margin-bottom:8px}
.fw-card h3{font-family:var(--font-head);font-weight:800;font-size:clamp(20px,2.1vw,32px);line-height:1;
  letter-spacing:-.02em;text-transform:uppercase}
.fw-card.w7 h3,.fw-card.w5 h3{font-size:clamp(26px,3.2vw,48px)}
.fw-card .k{margin-top:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;font-weight:600}
.fw-card .arr{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  display:grid;place-items:center;font-size:16px;transition:background .35s ease,border-color .35s ease,transform .35s ease}
.fw-card:hover .arr{background:var(--coral);border-color:var(--coral);transform:rotate(-45deg)}
.fw-card .tag{position:absolute;top:14px;left:14px;padding:6px 11px;border-radius:100px;font-size:9px;
  letter-spacing:.2em;font-weight:700;text-transform:uppercase;background:rgba(0,0,0,.42);backdrop-filter:blur(8px)}

@media (max-width:900px){
  .fw-card,.fw-card.w7,.fw-card.w5{grid-column:span 6;min-height:0;aspect-ratio:4/5}
  .fw-card.w7{grid-column:span 12;aspect-ratio:16/11}
}
@media (max-width:560px){
  .fw-card,.fw-card.w5{grid-column:span 12;aspect-ratio:4/4.4}
  .fw-card.w7{aspect-ratio:4/4.4}
}

/* ---------- Case study: 16:9 video tiles ---------- */
.cs-grid .g.g-video.is-wide{aspect-ratio:16/9}
.cs-grid .g.g-video.is-sq{aspect-ratio:1/1}
.cs-grid .g.g-video video{cursor:pointer}
.cs-grid .g .g-cap{position:absolute;left:14px;top:12px;z-index:2;padding:6px 11px;border-radius:100px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);color:#fff;font-size:9px;letter-spacing:.2em;
  font-weight:700;text-transform:uppercase}
@media (max-width:900px){ .cs-grid .g.g-video.is-wide{grid-column:span 12} }

/* dark logos on dark chips (work page + case heroes) */
.hw-logo img[src*="/qatar-foundation/"],.hw-logo img[src*="/estithmar-holding/"],.hw-logo img[src*="/al-maha-island/"]{filter:brightness(0) invert(1)}

/* ---------- v5.1 Video Edit: simple library by client ---------- */
.ve .head{margin-bottom:36px}
.ve-index{max-width:1500px;margin:0 auto 56px;display:flex;flex-wrap:wrap;gap:8px}
.ve-index .chip{text-decoration:none}
.ve-index .chip b{opacity:.55;font-weight:700;margin-left:4px}
.ve-brand{max-width:1500px;margin:0 auto;padding:38px 0 46px;border-top:1px solid rgba(255,255,255,.12);scroll-margin-top:90px}
.ve-bh{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ve-bh h3{font-family:var(--font-head);font-weight:800;font-size:clamp(26px,3vw,44px);letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.ve-n{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.55;font-weight:700}
.ve-link{margin-left:auto;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--coral);text-decoration:none}
.ve-grid{display:grid;gap:16px;margin-bottom:16px;align-items:start}
.ve-grid.is-wide{grid-template-columns:repeat(2,1fr)}
.ve-grid.is-sq{grid-template-columns:repeat(3,1fr)}
.ve-grid.is-tall{grid-template-columns:repeat(5,1fr)}
.ve-tile{margin:0;min-width:0}
.ve-tile>button,.ve-tile>video{display:block;width:100%;border:0;padding:0;border-radius:10px;overflow:hidden;background:#000;position:relative;cursor:pointer}
.ve-tile.is-wide>*:first-child{aspect-ratio:16/9}
.ve-tile.is-sq>*:first-child{aspect-ratio:1/1}
.ve-tile.is-tall>*:first-child{aspect-ratio:9/16}
.ve-tile video{object-fit:contain;height:auto}
.ve-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,opacity .3s}
.ve-tile button:hover img{transform:scale(1.04);opacity:.85}
.ve-ic{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.6);transition:background .3s}
.ve-ic::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff}
.ve-tile button:hover .ve-ic{background:var(--coral)}
.ve-dur{position:absolute;right:10px;bottom:10px;padding:4px 8px;border-radius:5px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:600;letter-spacing:.06em}
.ve-tile figcaption{margin-top:10px;font-size:13px;line-height:1.35;opacity:.8}
@media (max-width:1100px){.ve-grid.is-tall{grid-template-columns:repeat(4,1fr)}}
@media (max-width:800px){.ve-grid.is-wide{grid-template-columns:1fr}.ve-grid.is-sq{grid-template-columns:repeat(2,1fr)}.ve-grid.is-tall{grid-template-columns:repeat(2,1fr)}
  .ve-ic{width:46px;height:46px;margin:-23px 0 0 -23px}.ve-ic::after{left:18px;top:13px;border-width:10px 0 10px 15px}
  .ve-link{margin-left:0;flex-basis:100%}}

/* ---------- v5.1 Home intro film: never crop on mobile (sit below the fixed nav, full 16:9) ---------- */
@media (max-width:900px){
  section.hw-intro{height:auto !important;min-height:0 !important;aspect-ratio:auto !important;padding-top:72px;background:#000}
  section.hw-intro video{position:relative !important;inset:auto;display:block;width:100% !important;height:auto !important;aspect-ratio:16/9;object-fit:contain !important;transform:none !important}
}
@media (max-width:800px){.ve-index{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin-bottom:36px;scrollbar-width:none}
  .ve-index .chip{flex:0 0 auto;white-space:nowrap}}