/* ============================================================
   Hosam Agwa — Modern polish layer (2026). Additive & non-destructive.
   Refreshes typography, buttons, video cards, icons, sections, footer.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root{
  --ha-accent:#fa620a; --ha-accent-2:#ff7d2e; --ha-accent-dark:#d94e00;
  --ha-ink:#16181d; --ha-muted:#6b7280; --ha-radius:16px;
  --ha-shadow:0 10px 30px -12px rgba(0,0,0,.28);
  --ha-shadow-lg:0 24px 50px -12px rgba(0,0,0,.40);
}

/* ---------- Typography ---------- */
body{ font-family:"Inter",-apple-system,sans-serif !important; color:var(--ha-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,.section-title,.entry-title,.apex-icon-title,.main-navigation a{ font-family:"Poppins",sans-serif !important; letter-spacing:-.015em; }
.section-title{ font-weight:800 !important; font-size:2.6rem !important; }
.section-tagline{ font-family:"Poppins",sans-serif !important; font-weight:400 !important; color:var(--ha-muted) !important; font-size:1.15rem !important; }
p{ line-height:1.75 !important; }

/* modern gradient underline under section titles */
.section-header-sep span, .section-tagline + *:empty{ }
.section-title + .section-header-sep span, .section-header-sep span{ border-top:0 !important; }
.section-header-sep{ position:relative; }
.section-header-sep span{ display:inline-block; width:64px; height:4px !important; border-radius:4px; background:linear-gradient(90deg,var(--ha-accent),var(--ha-accent-2)) !important; }

/* ---------- Buttons ---------- */
.btn,.gform_button,a.btn,button.btn,input[type=submit]{
  font-family:"Poppins",sans-serif !important; font-weight:600 !important; letter-spacing:.01em !important;
  border-radius:50px !important; padding:.85em 2em !important; border:2px solid transparent !important;
  background:linear-gradient(135deg,var(--ha-accent),var(--ha-accent-2)) !important; color:#fff !important;
  box-shadow:0 8px 20px -8px rgba(250,98,10,.55) !important;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background .25s ease !important;
}
.btn:hover,.gform_button:hover,a.btn:hover{ transform:translateY(-3px) !important; box-shadow:0 16px 30px -8px rgba(250,98,10,.6) !important; color:#fff !important; }
.btn:active{ transform:translateY(-1px) !important; }

/* ---------- Hero menu buttons (About/Services/Showcase/Clients/Contact) ---------- */
.apex-hero-menu-container a, .apex-icon-round{
  transition:transform .3s cubic-bezier(.2,.7,.3,1), background .3s ease, box-shadow .3s ease !important;
  border-radius:14px !important;
}
.apex-hero-menu-container a:hover{ transform:translateY(-4px) !important; }
.apex-icon-round{ border-width:2px !important; }
a.apex-icon-round:hover{ transform:translateY(-4px) scale(1.04) !important; box-shadow:0 14px 28px -10px rgba(250,98,10,.5) !important; }
.apex-icon-title{ font-family:"Poppins",sans-serif !important; font-weight:600 !important; letter-spacing:.02em; }

/* ---------- Video / Showcase cards ---------- */
.mtphr-gallery-block{
  border-radius:var(--ha-radius) !important; overflow:hidden !important; background:#0d0d0f !important;
  box-shadow:var(--ha-shadow) !important; transition:transform .38s cubic-bezier(.2,.7,.3,1), box-shadow .38s ease !important;
}
.mtphr-gallery-block:hover{ transform:translateY(-8px) !important; box-shadow:var(--ha-shadow-lg) !important; }
.entry-featured-archive{ position:relative !important; overflow:hidden !important; border-radius:var(--ha-radius) !important; }
.entry-featured-archive img{ transition:transform .55s cubic-bezier(.2,.7,.3,1), filter .4s ease !important; display:block !important; width:100% !important; height:auto !important; }
.mtphr-gallery-block:hover .entry-featured-archive img{ transform:scale(1.07) !important; filter:brightness(.72) !important; }
/* gradient scrim for legibility */
.entry-featured-archive::before{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:2 !important; pointer-events:none !important;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%) !important;
  opacity:.9; transition:opacity .35s ease !important;
}
/* cinematic play button */
.entry-featured-archive::after{
  content:"" !important; position:absolute !important; top:50%; left:50%; z-index:3 !important;
  width:70px; height:70px; transform:translate(-50%,-50%) scale(.8) !important; pointer-events:none !important;
  background:rgba(250,98,10,.95) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27white%27%3E%3Cpath d=%27M8 5v14l11-7z%27/%3E%3C/svg%3E") center/30px no-repeat !important;
  border-radius:50% !important; opacity:0 !important; box-shadow:0 10px 30px rgba(0,0,0,.5) !important;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1) !important;
}
.mtphr-gallery-block:hover .entry-featured-archive::after{ opacity:1 !important; transform:translate(-50%,-50%) scale(1) !important; }
/* title on card */
.mtphr-gallery-block .entry-title, .mtphr-gallery-block .apex-format-gallery-title{ font-weight:700 !important; }

/* ---------- Section rhythm ---------- */
section[id^="hosamagwa-page-"]{ }
.mtphr-gallery-block-wrapper{ gap:26px !important; }

/* ---------- Cards / clients logos ---------- */
.apex-icon-round, .mtphr-social-widget-site{ transition:all .3s ease !important; }

/* ---------- Smooth global ---------- */
a{ transition:color .2s ease, background .2s ease, border-color .2s ease !important; }
img{ image-rendering:auto; }

/* ============ Professional footer (2026) ============ */
#site-footer.ha-modern-footer{ background:#0d0f14 !important; color:#c7ccd6 !important; padding:0 !important; }
.ha-foot-wrap{ max-width:1180px; margin:0 auto; padding:64px 24px 28px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:44px; }
@media(max-width:900px){ .ha-foot-wrap{ grid-template-columns:1fr 1fr; gap:36px; } }
@media(max-width:560px){ .ha-foot-wrap{ grid-template-columns:1fr; gap:30px; text-align:center; } }
.ha-foot-brand h3{ font-family:"Poppins",sans-serif; font-weight:800; font-size:1.7rem; margin:0 0 6px; color:#fff; letter-spacing:-.02em; }
.ha-foot-brand h3 span{ color:var(--ha-accent); }
.ha-foot-brand .ha-role{ font-family:"Poppins",sans-serif; font-weight:600; letter-spacing:.28em; text-transform:uppercase; font-size:.72rem; color:var(--ha-accent-2); margin-bottom:16px; }
.ha-foot-brand p{ font-size:.95rem; line-height:1.7 !important; color:#9aa1ad; max-width:340px; margin:0; }
@media(max-width:560px){ .ha-foot-brand p{ margin:0 auto; } }
.ha-foot-col h4{ font-family:"Poppins",sans-serif; font-weight:700; font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; color:#fff; margin:0 0 18px; position:relative; padding-bottom:12px; }
.ha-foot-col h4::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--ha-accent),var(--ha-accent-2)); }
@media(max-width:560px){ .ha-foot-col h4::after{ left:50%; transform:translateX(-50%); } }
.ha-foot-col ul{ list-style:none; margin:0; padding:0; }
.ha-foot-col li{ margin:0 0 11px; }
.ha-foot-col a{ color:#9aa1ad !important; text-decoration:none; font-size:.93rem; display:inline-flex; align-items:center; gap:8px; transition:color .2s ease, transform .2s ease !important; }
.ha-foot-col a:hover{ color:#fff !important; transform:translateX(3px); }
.ha-foot-col a::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ha-accent); opacity:.7; flex:0 0 auto; }
@media(max-width:560px){ .ha-foot-col a{ justify-content:center; } }
.ha-foot-contact a.ha-mail{ color:#e6e8ec !important; font-weight:500; }
.ha-social{ display:flex; gap:12px; margin-top:18px; }
@media(max-width:560px){ .ha-social{ justify-content:center; } }
.ha-social a{ width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); color:#c7ccd6 !important; transition:all .25s cubic-bezier(.2,.7,.3,1) !important; }
.ha-social a::before{ display:none !important; }
.ha-social a svg{ width:20px; height:20px; fill:currentColor; }
.ha-social a:hover{ background:linear-gradient(135deg,var(--ha-accent),var(--ha-accent-2)); color:#fff !important; transform:translateY(-4px); box-shadow:0 12px 22px -8px rgba(250,98,10,.6); }
.ha-foot-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:20px 24px; text-align:center; font-size:.86rem; color:#7a808c; max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
@media(max-width:560px){ .ha-foot-bottom{ justify-content:center; } }
.ha-foot-bottom .ha-tag{ color:var(--ha-accent-2); font-family:"Poppins",sans-serif; font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.74rem; }

/* ============================================================
   Round 2 — UX/UI audit upgrades (2026-07-07)
   1) Cinematic duotone hero grade  2) Glass-pill hero nav
   3) About stats strip  4) Elevated service cards
   5) Section rhythm + modern form fields
   ============================================================ */

/* ---------- 1. Cinematic duotone hero ----------
   Source hero photo is genuinely B&W (0% saturation) — no color to "restore".
   Apply an intentional warm duotone grade instead of flat gray, so it reads
   as a deliberate cinematic choice (fits a Producer/Director brand) rather
   than a broken/dated image. */
#hosamagwa-page-125-hero{ position:relative !important; }
#hosamagwa-page-125-hero::before{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important;
  background:
    linear-gradient(115deg, rgba(20,10,4,.78) 0%, rgba(20,10,4,.15) 42%, rgba(250,98,10,.16) 78%, rgba(255,125,46,.22) 100%),
    linear-gradient(to top, rgba(10,8,6,.55) 0%, rgba(10,8,6,0) 38%);
  mix-blend-mode:multiply !important;
}
#hosamagwa-page-125-hero::after{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important;
  background:linear-gradient(120deg, rgba(250,98,10,.10), transparent 55%) !important;
  mix-blend-mode:screen !important;
}
#apex-hero-inner, #hero-rotator, .apex-hero-menu-container, #site-navigation-contents{ position:relative !important; z-index:3 !important; }

/* ---------- 2. Glass-pill hero navigation ---------- */
nav.apex-hero-menu-container{
  position:relative !important; z-index:5 !important;
  background:rgba(15,16,20,.42) !important;
  -webkit-backdrop-filter:blur(14px) saturate(160%) !important; backdrop-filter:blur(14px) saturate(160%) !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.5) !important;
}
ul.apex-hero-menu{ display:flex !important; justify-content:center !important; flex-wrap:wrap !important; gap:10px !important; padding:16px 20px !important; margin:0 !important; list-style:none !important; }
ul.apex-hero-menu > li{ display:inline-flex !important; }
ul.apex-hero-menu > li > a{
  display:flex !important; align-items:center !important; gap:9px !important;
  font-family:"Poppins",sans-serif !important; font-weight:600 !important; font-size:.82rem !important; letter-spacing:.06em !important; text-transform:uppercase !important;
  color:#e9ebef !important; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important; padding:11px 20px !important;
  transition:all .3s cubic-bezier(.2,.7,.3,1) !important;
}
ul.apex-hero-menu > li > a i{ font-size:1.05em !important; opacity:.9; }
ul.apex-hero-menu > li > a:hover{
  color:#fff !important; background:linear-gradient(135deg,var(--ha-accent),var(--ha-accent-2)) !important;
  border-color:transparent !important; transform:translateY(-3px) !important;
  box-shadow:0 14px 26px -10px rgba(250,98,10,.55) !important;
}
/* hide legacy square icon boxes if template renders a duplicate set */
.apex-icon-round.mtphr-dnt-control-button{ display:none !important; }

/* ---------- 3. About stats strip ---------- */
.ha-stats-strip{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:18px !important;
  max-width:920px !important; margin:8px auto 34px !important; padding:0 !important;
}
@media(max-width:800px){ .ha-stats-strip{ grid-template-columns:1fr 1fr !important; } }
.ha-stat{
  background:#fff !important; border-radius:16px !important; padding:22px 14px !important; text-align:center !important;
  box-shadow:0 10px 24px -14px rgba(20,20,30,.18) !important; border:1px solid rgba(0,0,0,.04) !important;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease !important;
}
.ha-stat:hover{ transform:translateY(-5px) !important; box-shadow:0 18px 32px -14px rgba(250,98,10,.28) !important; }
.ha-stat-num{
  display:block !important; font-family:"Poppins",sans-serif !important; font-weight:800 !important; font-size:1.7rem !important;
  background:linear-gradient(135deg,var(--ha-accent),var(--ha-accent-2)) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
  line-height:1.15 !important;
}
.ha-stat-label{ display:block !important; margin-top:6px !important; font-size:.78rem !important; font-weight:600 !important; letter-spacing:.03em !important; color:var(--ha-muted) !important; }

/* ---------- 4. Elevated service cards ---------- */
#hosamagwa-page-116 .col-sm-3, #hosamagwa-page-116 .col-md-3{ margin-bottom:18px; }
.apex-icon.apex-icon-round, section[id^="hosamagwa-page-116"] .apex-icon-round{
  width:96px !important; height:96px !important; border-width:0 !important;
  background:radial-gradient(circle at 30% 25%, rgba(250,98,10,.16), rgba(250,98,10,.05) 70%) !important;
  box-shadow:inset 0 0 0 2px rgba(250,98,10,.28) !important;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, background .35s ease !important;
}
section[id^="hosamagwa-page-116"] .col-sm-3:hover .apex-icon-round,
section[id^="hosamagwa-page-116"] .col-md-3:hover .apex-icon-round{
  transform:translateY(-6px) scale(1.05) !important;
  box-shadow:inset 0 0 0 2px var(--ha-accent), 0 16px 30px -12px rgba(250,98,10,.4) !important;
  background:radial-gradient(circle at 30% 25%, rgba(250,98,10,.28), rgba(250,98,10,.08) 70%) !important;
}
section[id^="hosamagwa-page-116"] h3{ font-weight:700 !important; margin-top:22px !important; }
section[id^="hosamagwa-page-116"] .col-sm-3, section[id^="hosamagwa-page-116"] .col-md-3{
  border-radius:18px !important; padding:28px 18px !important; transition:box-shadow .35s ease, transform .35s ease !important;
}
section[id^="hosamagwa-page-116"] .col-sm-3:hover, section[id^="hosamagwa-page-116"] .col-md-3:hover{
  box-shadow:0 20px 40px -20px rgba(20,20,30,.18) !important;
}

/* ---------- 5. Section rhythm + modern form ---------- */
#hosamagwa-page-129{ background-color:#fbfbfc !important; }
#hosamagwa-page-944{ background-color:#f6f7f9 !important; }

.wpcf7-form-control.form-control{
  border:2px solid #e7e9ee !important; border-radius:14px !important; background:#fff !important;
  padding:14px 18px !important; font-family:"Inter",sans-serif !important; font-size:.95rem !important;
  transition:border-color .25s ease, box-shadow .25s ease !important; box-shadow:none !important;
}
.wpcf7-form-control.form-control:focus{
  border-color:var(--ha-accent) !important; outline:none !important;
  box-shadow:0 0 0 4px rgba(250,98,10,.14) !important;
}
.wpcf7-submit.btn{ border-radius:999px !important; }

/* ============================================================
   Gallery/video sub-page fixes (2026-07-07)
   Shorter, lighter hero + legible title; lite YouTube facade (see hosam-lite-embed.js)
   ============================================================ */
.apex-section-mtphr_gallery{
  min-height:0 !important; height:auto !important;
}
.apex-section-mtphr_gallery .apex-section-inner{
  min-height:340px !important; display:flex !important; align-items:center !important; padding:70px 0 !important;
}
.apex-section-mtphr_gallery .apex-section-overlay,
.apex-section-mtphr_gallery::before{
  content:"" !important; position:absolute !important; inset:0 !important;
  background:linear-gradient(180deg, rgba(10,8,6,.68) 0%, rgba(10,8,6,.42) 45%, rgba(10,8,6,.7) 100%) !important;
}
.apex-section-mtphr_gallery .section-title, .apex-section-mtphr_gallery h1{
  text-shadow:0 3px 18px rgba(0,0,0,.55) !important; font-weight:800 !important;
}
.apex-section-mtphr_gallery #breadcrumbs, .apex-section-mtphr_gallery .breadcrumbs{
  background:rgba(255,255,255,.12) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-radius:999px !important; padding:8px 18px !important;
}

/* Lite YouTube facade (built by hosam-lite-embed.js) */
.ha-lite-yt{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; cursor:pointer; box-shadow:var(--ha-shadow); }
.ha-lite-yt img{ width:100%; height:100%; object-fit:cover; display:block; transition:filter .3s ease, transform .5s ease; }
.ha-lite-yt:hover img{ filter:brightness(.78); transform:scale(1.03); }
.ha-lite-yt .ha-lite-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:80px; height:80px; border-radius:50%;
  background:rgba(250,98,10,.95); box-shadow:0 14px 34px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), background .3s ease;
}
.ha-lite-yt:hover .ha-lite-play{ transform:translate(-50%,-50%) scale(1.1); background:var(--ha-accent-2); }
.ha-lite-yt .ha-lite-play svg{ width:32px; height:32px; fill:#fff; margin-left:4px; }
.ha-lite-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }