/* SAFARI/FIREFOX FLIP-CARD FIX — use opacity gating instead of backface-visibility
 * Safari's backface-visibility is unreliable when transforms animate; opacity is
 * universally supported and renders identically across all browsers. */
@media (hover:hover){
  .about-member__face{transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);will-change:opacity}
  .about-member__back{opacity:0;pointer-events:none}
  .about-member__front{opacity:1}
  .about-member:hover .about-member__back,
  .about-member:focus-within .about-member__back{opacity:1;pointer-events:auto;transition-delay:0.18s}
  .about-member:hover .about-member__front,
  .about-member:focus-within .about-member__front{opacity:0;pointer-events:none}
  /* Keep the rotateY for the subtle tilt effect, but the opacity is what gates visibility */
  .about-member:hover .about-member__inner,
  .about-member:focus-within .about-member__inner{transform:rotateY(180deg)}
  .about-member__back{transform:rotateY(180deg)}
}




/* === Bento services grid (replaces .cap-services) ============================== */
.cap-bento{padding:var(--section-pad) var(--gutter);max-width:1480px;margin:0 auto;background:#FFFFFF;}
.cap-bento__head{display:flex;flex-direction:column;gap:0.85rem;margin-bottom:clamp(2.5rem,5vw,4rem);align-items:flex-start;max-width:780px;}
.cap-bento__head .red{color:var(--red);}
.cap-bento__sub{font-size:1.05rem;line-height:1.55;color:var(--text-mute);margin:0;}
.cap-bento__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,auto);gap:clamp(0.85rem,1.25vw,1.25rem);}
.cap-bento__card{position:relative;display:flex;flex-direction:column;gap:0.85rem;padding:clamp(1.5rem,2vw,2rem);border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none;overflow:hidden;transition:transform 0.4s var(--ease),border-color 0.4s var(--ease),box-shadow 0.4s var(--ease),background 0.4s var(--ease);will-change:transform;}
.cap-bento__card::before{content:"";position:absolute;top:0;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--red),transparent);transition:width 0.5s var(--ease);}
.cap-bento__card:hover{transform:translateY(-4px);border-color:rgba(255,36,60,0.30);box-shadow:0 12px 32px rgba(15,13,11,0.06);}
.cap-bento__card:hover::before{width:100%;}

.cap-bento__card--hero{grid-column:span 2;grid-row:span 2;background:linear-gradient(155deg,#15110E 0%,#0A0908 60%,#15110E 100%);color:#F5F2EA;border-color:rgba(255,255,255,0.06);padding:clamp(2rem,3vw,2.75rem);}
.cap-bento__card--hero::after{content:"";position:absolute;top:-40%;right:-20%;width:80%;height:120%;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(255,36,60,0.18) 0%,transparent 70%);pointer-events:none;}
.cap-bento__card--hero:hover{border-color:rgba(255,36,60,0.4);box-shadow:0 20px 50px rgba(0,0,0,0.25);}
/* Decorative diamond fills the lower area of the hero card */
.cap-bento__card--hero .cap-bento__deco{position:absolute;bottom:-20%;right:-10%;width:60%;aspect-ratio:1/1;pointer-events:none;opacity:0.5;color:var(--red);transform:rotate(12deg);transition:transform 0.6s var(--ease),opacity 0.4s ease;z-index:0;}
.cap-bento__card--hero .cap-bento__deco svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 24px rgba(255,36,60,0.35));}
.cap-bento__card--hero:hover .cap-bento__deco{transform:rotate(18deg) scale(1.05);opacity:0.65;}

.cap-bento__card--tall1{grid-column:3 / span 2;grid-row:1;}
.cap-bento__card--tall2{grid-column:3 / span 2;grid-row:2;}
.cap-bento__card--small{grid-column:1;grid-row:3;}
.cap-bento__card--wide{grid-column:2 / span 3;grid-row:3;}

.cap-bento__icon{position:relative;width:44px;height:44px;border-radius:12px;background:var(--red);color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 16px rgba(255,36,60,0.25);transition:transform 0.4s var(--ease),box-shadow 0.4s ease;z-index:1;}
.cap-bento__icon svg{width:22px;height:22px;}
.cap-bento__card:hover .cap-bento__icon{transform:translateY(-2px) scale(1.05);box-shadow:0 10px 22px rgba(255,36,60,0.35);}
.cap-bento__card--hero .cap-bento__icon{width:52px;height:52px;}
.cap-bento__card--hero .cap-bento__icon svg{width:26px;height:26px;}

.cap-bento__title{position:relative;font-family:var(--font-display);font-weight:500;font-size:1.35rem;line-height:1.15;letter-spacing:-0.02em;margin:0;color:inherit;z-index:1;}
.cap-bento__card--hero .cap-bento__title{font-size:clamp(1.75rem,2.6vw,2.4rem);line-height:1.05;}

.cap-bento__pitch{position:relative;font-size:14px;line-height:1.6;color:var(--text-mute);margin:0;z-index:1;}
.cap-bento__card--hero .cap-bento__pitch{font-size:15.5px;line-height:1.55;color:rgba(245,242,234,0.78);max-width:42ch;}

.cap-bento__tags{position:relative;list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;z-index:1;}
.cap-bento__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:0;color:var(--text-mute);padding:5px 10px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--line);white-space:nowrap;}
.cap-bento__card--hero .cap-bento__tag{color:rgba(245,242,234,0.78);background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.10);}

.cap-bento__cta{position:relative;margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font);font-size:13.5px;font-weight:500;color:var(--text);letter-spacing:-0.005em;z-index:1;}
.cap-bento__card--hero .cap-bento__cta{color:#F5F2EA;font-size:14.5px;}
.cap-bento__arrow{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--chip-bg);transition:transform 0.4s var(--ease),background 0.3s ease;}
.cap-bento__card--hero .cap-bento__arrow{background:var(--red);color:#FFFFFF;}
.cap-bento__arrow-svg{width:11px;height:11px;}
.cap-bento__card:hover .cap-bento__arrow{transform:translateX(3px);background:var(--red);color:#FFFFFF;}
.cap-bento__card--hero:hover .cap-bento__arrow{background:var(--red-bright);}

.cap-bento__footer{margin-top:clamp(2rem,3.5vw,3rem);display:flex;flex-wrap:wrap;gap:0.9rem;align-items:center;}

/* === RTL fixes — flip the directional bits ===================================== */
:root[lang="ar"] .cap-bento__head{align-items:flex-end;text-align:right;}
:root[lang="ar"] .cap-bento__card{text-align:right;}
:root[lang="ar"] .cap-bento__cta{flex-direction:row-reverse;}
:root[lang="ar"] .cap-bento__arrow-svg{transform:scaleX(-1);}
:root[lang="ar"] .cap-bento__card:hover .cap-bento__arrow{transform:translateX(-3px);background:var(--red);color:#FFFFFF;}
:root[lang="ar"] .cap-bento__card::before{left:auto;right:0;background:linear-gradient(-90deg,var(--red),transparent);}
:root[lang="ar"] .cap-bento__card--hero::after{right:auto;left:-20%;}

/* === Tablet (≤900px): 2-col, hero spans 2 ====================================== */
@media (max-width:900px){
  .cap-bento__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(160px,auto);}
  .cap-bento__card--hero{grid-column:span 2;grid-row:auto;}
  .cap-bento__card--tall1,
  .cap-bento__card--tall2,
  .cap-bento__card--small,
  .cap-bento__card--wide{grid-column:auto;grid-row:auto;}
  .cap-bento__card--wide{grid-column:span 2;}
}

/* === Mobile (≤600px): single column ============================================ */
@media (max-width:600px){
  .cap-bento__grid{grid-template-columns:1fr;}
  .cap-bento__card--hero,
  .cap-bento__card--wide{grid-column:auto;}
  .cap-bento__card{min-height:auto;}
  .cap-bento__footer{flex-direction:column;align-items:stretch;}
  .cap-bento__footer .btn{justify-content:center;}
}
/* ================================================================================ */


/* === Solutions mega-4 dropdown (added) ========================================
   4-column variant of the existing nav mega menu, plus optional 'sub-title as
   link' styling for clickable category headings.                              */
.nav__dropdown--mega-4 .nav__dropdown-mega-grid{
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.nav__dropdown--mega-4{
  /* Center the 4-column dropdown under the Solutions nav item (LTR).
     Override the parent .nav__dropdown--mega left:0 anchoring. */
  left:50%;
  right:auto;
  transform:translate(-50%, -8px);
  min-width:1080px;
  max-width:calc(100vw - 64px);
}
.nav__item-wrap:hover .nav__dropdown--mega-4,
.nav__item-wrap:focus-within .nav__dropdown--mega-4{
  transform:translate(-50%, 0);
}
/* RTL: there's a higher-specificity rule [dir="rtl"] .nav__dropdown--mega
   {right:0 !important} that wins, so use a stronger selector to anchor
   the centered version under the Solutions item in RTL too. */
[dir="rtl"] .nav__dropdown--mega.nav__dropdown--mega-4,
:root[lang="ar"] .nav__dropdown--mega.nav__dropdown--mega-4{
  right:50% !important;
  left:auto !important;
  transform:translate(50%, -8px);
}
[dir="rtl"] .nav__item-wrap:hover .nav__dropdown--mega.nav__dropdown--mega-4,
[dir="rtl"] .nav__item-wrap:focus-within .nav__dropdown--mega.nav__dropdown--mega-4,
:root[lang="ar"] .nav__item-wrap:hover .nav__dropdown--mega.nav__dropdown--mega-4,
:root[lang="ar"] .nav__item-wrap:focus-within .nav__dropdown--mega.nav__dropdown--mega-4{
  transform:translate(50%, 0);
}
.nav__dropdown-title--link{
  color:var(--text);
  text-decoration:none;
  transition:color 0.25s ease;
}
.nav__dropdown-title--link:hover{
  color:var(--red);
}
.m-drawer__sub-title--link{
  /* Inherit base sub-title styling (drawer is dark-themed) but make it a link. */
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(245,242,234,0.55);
  padding:14px 0 8px;
  border-top:1px solid rgba(245,242,234,0.05);
  margin-top:6px;
  display:block;
  text-decoration:none;
  transition:color 0.25s ease;
}
.m-drawer__sub:first-child .m-drawer__sub-title--link:first-child,
.m-drawer__sub-title--link:first-child{
  border-top:0;
  margin-top:0;
  padding-top:6px;
}
.m-drawer__sub-title--link:hover{color:#F5F2EA;}
/* Tablet/mobile fallback for the desktop mega-4 when viewport is narrow but
   the desktop nav is still visible (e.g. ~960–1180px). Drop to 2 columns. */
@media (max-width:1180px){
  .nav__dropdown--mega-4{min-width:0;width:calc(100vw - 64px);}
  .nav__dropdown--mega-4 .nav__dropdown-mega-grid{grid-template-columns:repeat(2,1fr);}
}
/* ============================================================================ */