/* ============================================================================
   No Name Advertising — Brand layer
   Loaded AFTER pixora-core.css so these :root token overrides win the cascade.
   Palette (official): Black #000 / White #FFF base + 6 service accents.
   Lead/UI accent: Social-media Orange #FF7A00.
   This file only re-skins the template's existing design tokens — it does not
   change layout or markup, so it is fully reversible (delete to restore demo).
   ========================================================================== */

:root {
  /* --- Brand core --- */
  --nn-black: #000000;
  --nn-white: #FFFFFF;
  --nn-orange: #FF7A00;        /* lead accent (Social Media) */
  --nn-orange-dark: #E66E00;

  /* --- Official 6-colour service spectrum --- */
  --nn-printing: #55B9EA;
  --nn-media: #6C2BD9;
  --nn-branding: #235CC1;
  --nn-social: #FF7A00;
  --nn-marketing: #00D30F;
  --nn-event: #E50328;

  /* --- Re-point the theme's "pixora" accent tokens to the brand orange --- */
  --tp-common-px-orange: #FF7A00;
  --tp-common-px-orange-dark: #E66E00;
  --tp-theme-px-1: #FF7A00;
  --tp-common-px-red: #E50328;

  /* Keep the mono base crisp & true-black for the brand */
  --tp-common-px-black: #0A0A0A;
  --tp-common-px-white: #FFFFFF;
}

/* Selection + accessibility focus pick up the brand orange */
::selection { background: var(--nn-orange); color: #fff; }

/* ---- Per-service accent helpers (rainbow system) ----------------------------
   Apply .nn-accent--{service} to a service card / tag to colour its icon,
   top border and hover state with that service's official colour. */
.nn-accent--branding  { --nn-accent: var(--nn-branding); }
.nn-accent--photography,
.nn-accent--media     { --nn-accent: var(--nn-media); }
.nn-accent--design    { --nn-accent: var(--nn-printing); }
.nn-accent--printing  { --nn-accent: var(--nn-printing); }
.nn-accent--social    { --nn-accent: var(--nn-social); }
.nn-accent--video     { --nn-accent: var(--nn-event); }
.nn-accent--event     { --nn-accent: var(--nn-event); }
.nn-accent--booth     { --nn-accent: var(--nn-marketing); }

/* Rainbow top-edge on the Home/Services service rows (applied by nth-child so
   it works on the template's repeating service list without markup changes). */
.tp-service-2-item,
.tp-service-5-item,
.service-list-wrap .tp-service-list-item {
  position: relative;
  transition: background-color .35s ease;
}
.tp-service-2-item::before,
.service-list-wrap .tp-service-list-item::before {
  content: "";
  position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--nn-accent, var(--nn-orange));
  transition: width .35s ease;
}
.tp-service-2-item:hover::before,
.service-list-wrap .tp-service-list-item:hover::before { width: 100%; }

/* Assign the spectrum across the first eight service rows */
.service-list-wrap .tp-service-list-item:nth-child(1) { --nn-accent: var(--nn-branding); }
.service-list-wrap .tp-service-list-item:nth-child(2) { --nn-accent: var(--nn-media); }
.service-list-wrap .tp-service-list-item:nth-child(3) { --nn-accent: var(--nn-printing); }
.service-list-wrap .tp-service-list-item:nth-child(4) { --nn-accent: var(--nn-event); }
.service-list-wrap .tp-service-list-item:nth-child(5) { --nn-accent: var(--nn-social); }
.service-list-wrap .tp-service-list-item:nth-child(6) { --nn-accent: var(--nn-marketing); }
.service-list-wrap .tp-service-list-item:nth-child(7) { --nn-accent: var(--nn-printing); }
.service-list-wrap .tp-service-list-item:nth-child(8) { --nn-accent: var(--nn-branding); }

/* Header logo: ensure the white wordmark sits comfortably in the transparent
   header (which overlays the dark hero across the main pages).
   The theme puts an inline width:90px on the logo <img>; combined with a height
   cap that stretched it (object-fit:fill) to the wrong ratio. Force auto
   dimensions (!important beats the inline width) so the real aspect ratio is
   kept, and cap the height to sit nicely in the header. */
.tp-header-logo img,
.px-header-logo img {
	width: auto !important;
	height: auto !important;
	max-height: 54px !important;
	object-fit: contain;
	object-position: left center;
}

/* Partner/brand strip: tidy demo marquee so client logos read on white */
.tp-brand-2-item img,
.tp-brand-item img { filter: none; opacity: .85; transition: opacity .3s ease; }
.tp-brand-2-item img:hover,
.tp-brand-item img:hover { opacity: 1; }

/* Services accordion (Home "What We Do"): the brand photos are full-res and
   the theme sets no size on the thumbnail, so they overflowed their column
   and showed an awkward, blurry crop. Constrain to a clean, uniform tile. */
.px-service-area .px-service-thumb { flex: 0 0 auto; margin-right: 40px; }
.px-service-area .px-service-thumb img {
  width: clamp(220px, 26vw, 360px);
  height: 240px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  display: block;
}
@media (max-width: 991px) {
  .px-service-area .px-service-thumb { margin-right: 0; margin-bottom: 16px; }
  .px-service-area .px-service-thumb img { width: 100%; height: 200px; }
}

/* Footer brand word ("No Name Advertising") — break only at spaces, never
   mid-word, so the big phrase wraps cleanly. */
.elementor-element-e9ff71d * { hyphens: none; overflow-wrap: normal; word-break: keep-all; }

/* Partners strip ("Trusted by leading brands") -> seamless moving marquee.
   Markup: .px-brand-area > .row.gx-5 > .col-* > .px-brand-item > img.
   The logo row is flattened to one nowrap track and translated by 50%
   (logos are duplicated 2x for a seamless loop). Pauses on hover. */
.elementor-element-a08f405 .px-brand-area { overflow: hidden; }
.elementor-element-a08f405 .px-brand-area > .row.gx-5 {
  flex-wrap: nowrap !important;
  width: max-content;
  --bs-gutter-x: 0;
  margin: 0;
  animation: nn-brand-marquee 55s linear infinite;
  will-change: transform;
}
.elementor-element-a08f405 .px-brand-area:hover > .row.gx-5 { animation-play-state: paused; }
.elementor-element-a08f405 .px-brand-area > .row.gx-5 > [class*="col-"] {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 10px !important;
}
.elementor-element-a08f405 .px-brand-item {
  display: flex; align-items: center; justify-content: center;
  width: 215px; height: 150px; margin: 0;
  background: #fff; border-radius: 16px;
}
.elementor-element-a08f405 .px-brand-item img {
  max-height: 70px; max-width: 165px; width: auto !important; height: auto;
  object-fit: contain;
}
@keyframes nn-brand-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) {
  .elementor-element-a08f405 .px-brand-item { width: 175px; height: 120px; }
  .elementor-element-a08f405 .px-brand-item img { max-height: 56px; max-width: 135px; }
  .elementor-element-a08f405 .px-brand-area > .row.gx-5 { animation-duration: 40s; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor-element-a08f405 .px-brand-area > .row.gx-5 { animation: none; flex-wrap: wrap !important; width: auto; }
}

/* Portfolio detail (shared "Template B" projects): hide the leftover demo
   "% increase in conversions" counters and the "Visit Site -> Envato" button. */
.elementor-element-3e167163,
.elementor-element-32e92346 { display: none !important; }

/* ============================================================================
   Project detail page (single-tp-portfolios.php) — No Name Advertising
   Reels-dominant layout. Namespaced .nn-pd-* so it never touches other pages.
   ========================================================================== */
.nn-pd { background: #0A0A0A; color: #fff; }
.nn-pd-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Hero */
.nn-pd-hero { padding: 150px 0 70px; background:#0A0A0A; background-size:cover; background-position:center; }
.nn-pd-hero.has-poster { padding-top: 190px; }
.nn-pd-back { display:inline-block; color:#bdbdc4; font-size:14px; text-decoration:none; margin-bottom:22px; transition:color .2s; }
.nn-pd-back:hover { color: var(--nn-orange); }
.nn-pd-tag { display:inline-block; background:var(--nn-orange); color:#0A0A0A; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:6px 14px; border-radius:30px; }
.nn-pd-title { font-family:"Space Grotesk",Inter,sans-serif; font-weight:700; font-size:clamp(40px,7vw,92px); line-height:1.02; margin:18px 0 30px; color:#fff; }
.nn-pd-meta { list-style:none; display:flex; flex-wrap:wrap; gap:14px 56px; margin:0; padding:0; }
.nn-pd-meta li { display:flex; flex-direction:column; gap:4px; }
.nn-pd-meta span { color:#8a8a92; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.nn-pd-meta strong { color:#fff; font-size:17px; font-weight:600; }

/* Overview */
.nn-pd-overview { padding:54px 0 10px; }
.nn-pd-eyebrow, .nn-pd-sec-head h2 { font-family:"Space Grotesk",Inter,sans-serif; }
.nn-pd-eyebrow { color:var(--nn-orange); font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; }
.nn-pd-overview p { font-size:clamp(19px,2.3vw,28px); line-height:1.5; color:#dcdce2; max-width:980px; margin:0; }

/* Section heads */
.nn-pd-sec-head { margin:0 0 34px; }
.nn-pd-sec-head h2 { font-size:clamp(30px,4vw,52px); font-weight:700; color:#fff; margin:0; }
.nn-pd-sec-head h2 em { color:var(--nn-orange); font-style:normal; font-size:.55em; vertical-align:super; margin-inline-start:6px; }
.nn-pd-sec-head p { color:#9a9aa2; margin:8px 0 0; font-size:16px; }

/* Reels — the dominant block */
.nn-pd-reels { padding:70px 0 30px; }
.nn-pd-reels-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px; }
.nn-reel { position:relative; margin:0; aspect-ratio:9/16; border-radius:16px; overflow:hidden; background:#141418; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.nn-reel-video { width:100%; height:100%; object-fit:cover; display:block; background:#141418; }
.nn-reel-play { position:absolute; inset:0; margin:auto; width:64px; height:64px; border:0; border-radius:50%; background:rgba(255,122,0,.92); cursor:pointer; transition:transform .2s,opacity .2s; }
.nn-reel-play::after { content:""; position:absolute; top:50%; left:53%; transform:translate(-50%,-50%); border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #0A0A0A; }
.nn-reel-play:hover { transform:scale(1.08); }
.nn-reel-play.is-hidden { opacity:0; pointer-events:none; }

/* Gallery */
.nn-pd-gallery { padding:64px 0 20px; }
.nn-pd-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.nn-pd-shot { display:block; border-radius:14px; overflow:hidden; background:#141418; }
.nn-pd-shot img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.nn-pd-shot:hover img { transform:scale(1.04); }

/* Next / prev nav */
.nn-pd-nav { padding:70px 0 110px; }
.nn-pd-nav-row { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid #222; padding-top:40px; }
.nn-pd-navlink { text-decoration:none; display:flex; flex-direction:column; gap:6px; max-width:42%; }
.nn-pd-navlink.next { text-align:right; }
.nn-pd-navlink span { color:#8a8a92; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.nn-pd-navlink strong { color:#fff; font-size:22px; font-weight:700; transition:color .2s; }
.nn-pd-navlink:hover strong { color:var(--nn-orange); }
.nn-pd-allbtn { color:#0A0A0A; background:#fff; padding:13px 26px; border-radius:30px; text-decoration:none; font-weight:700; font-size:14px; transition:background .2s,color .2s; }
.nn-pd-allbtn:hover { background:var(--nn-orange); }

/* RTL tweaks */
.nn-pd[dir="rtl"] .nn-pd-navlink.next { text-align:left; }

@media (max-width:768px){
  .nn-pd-reels-grid { grid-template-columns:repeat(auto-fill,minmax(46%,1fr)); gap:14px; }
  .nn-pd-hero { padding-top:120px; }
  .nn-pd-nav-row { flex-direction:column; align-items:flex-start; }
  .nn-pd-navlink, .nn-pd-navlink.next { max-width:100%; text-align:left; }
}

/* ============================================================================
   Home "What We Do" (Services) heading fit.
   The theme's .px-section-title is 144px / line-height:0.83 — built for the
   demo's short title. No Name's copy ("Eight services. One uncompromising
   standard.") wraps to several lines that overlapped vertically and overflowed
   next to the "All Services" button. Scoped to the services section only.
   ========================================================================== */
.px-service-area .px-service-title-box{
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 26px 44px;
}
.px-service-area .px-service-title-box .px-section-title{
  flex: 1 1 560px;
  font-size: clamp(34px, 4.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
  word-break: normal;
  margin-bottom: 0;
}
.px-service-area .px-service-title-box .px-btn-white{ flex: 0 0 auto; }

/* Arabic: the heading reads cleaner a touch tighter */
.pixora-ar .px-service-area .px-service-title-box .px-section-title{
  letter-spacing: 0;
  line-height: 1.15;
}

@media (max-width: 575px){
  .px-service-area .px-service-title-box .px-section-title{ font-size: clamp(30px, 9vw, 48px); }
}

/* Splitting.js (.text-effect headings) wraps each inter-word space in a
   <span class="whitespace"> that collapses to ~0 width once the chars become
   inline-block — so "Eight services" rendered as "Eightservices". Restore a
   real gap. Applies to all split headings (services, Selected Projects, etc.). */
.text-effect .whitespace{ display:inline-block; width:0.28em; }

/* ============================================================================
   Services accordion — open-reveal animations + hover polish (home only).
   Bootstrap collapse adds .show to the open panel, so these replay every time
   a service is opened. Scoped to .px-service-area. Honors reduced-motion.
   ========================================================================== */
@keyframes nnFadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes nnImgReveal { from { opacity:0; transform:scale(1.08); clip-path:inset(0 0 100% 0); }
                          to   { opacity:1; transform:scale(1);   clip-path:inset(0 0 0 0); } }

/* Image: cinematic reveal on open + smooth zoom on hover */
.px-service-area .px-service-thumb{ overflow:hidden; border-radius:14px; }
.px-service-area .px-service-thumb img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.px-service-area .accordion-collapse.show .px-service-thumb img{ animation:nnImgReveal .9s cubic-bezier(.2,.7,.2,1) both; }
.px-service-area .px-service-content:hover .px-service-thumb img,
.px-service-area .px-service-thumb:hover img{ transform:scale(1.06); }

/* Description: fade-up shortly after the panel opens */
.px-service-area .accordion-collapse.show .px-service-content p.tp-el-desc{ animation:nnFadeUp .7s ease .15s both; }

/* Capability pills: staggered fade-up on open + lively hover */
.px-service-area .px-service-category span{
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
  cursor:default;
}
.px-service-area .accordion-collapse.show .px-service-category span{ animation:nnFadeUp .55s ease both; }
.px-service-area .accordion-collapse.show .px-service-category span:nth-child(1){ animation-delay:.20s; }
.px-service-area .accordion-collapse.show .px-service-category span:nth-child(2){ animation-delay:.28s; }
.px-service-area .accordion-collapse.show .px-service-category span:nth-child(3){ animation-delay:.36s; }
.px-service-area .accordion-collapse.show .px-service-category span:nth-child(4){ animation-delay:.44s; }
.px-service-area .accordion-collapse.show .px-service-category span:nth-child(5){ animation-delay:.52s; }
.px-service-area .accordion-collapse.show .px-service-category span:nth-child(6){ animation-delay:.60s; }
.px-service-area .px-service-category span:hover{ background:var(--nn-orange); color:#0A0A0A; transform:translateY(-4px); }

/* Closed rows: brand-accent nudge on hover */
.px-service-area .accordion-buttons .px-service-title h4,
.px-service-area .accordion-buttons .px-service-num span{ transition:color .3s ease, transform .3s ease; }
.px-service-area .accordion-buttons:hover .px-service-title h4{ color:var(--nn-orange); transform:translateX(8px); }
.px-service-area .accordion-buttons:hover .px-service-num span{ color:var(--nn-orange); }
.pixora-ar .px-service-area .accordion-buttons:hover .px-service-title h4{ transform:translateX(-8px); }

@media (prefers-reduced-motion: reduce){
  .px-service-area .accordion-collapse.show .px-service-thumb img,
  .px-service-area .accordion-collapse.show .px-service-content p.tp-el-desc,
  .px-service-area .accordion-collapse.show .px-service-category span{ animation:none; }
}

/* "Our Core Values" list (award-list widget #8174394) is repurposed from an
   awards layout — it has no real icon, so hide the logo image slot (a brand
   mark there just rendered as a big black box). Clean rows: number · value · desc. */
.elementor-element-8174394 .px-award-category img{ display:none !important; }
.elementor-element-8174394 .px-award-category{ display:flex; align-items:center; }
.elementor-element-8174394 .px-award-category .tp-el-title{ margin: 0; }

/* Service 1 (Branding) page: hide the leftover demo testimonial block
   ("Royal Caribbean" quotes) — no real testimonials are available yet. */
.elementor-element-1c2ec5a{ display:none !important; }

/* ============================================================================
   Service 1 (Branding) page polish
   ========================================================================== */
/* Hide the demo "PIXORA COMPANY" barcode shape in the hero */
.elementor-element-2158f7e{ display:none !important; }

/* Client-logo strip -> seamless moving marquee (logos duplicated in content) */
.elementor-element-5dcc31e{ overflow:hidden; }
.elementor-element-2e06e2d{ flex-wrap:nowrap !important; width:max-content !important; animation:nn-svc-logos 38s linear infinite; }
.elementor-element-5dcc31e:hover .elementor-element-2e06e2d{ animation-play-state:paused; }
.elementor-element-2e06e2d > [data-element_type="container"]{ flex:0 0 auto !important; width:180px; justify-content:center; }
@keyframes nn-svc-logos{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (max-width:991px){ .elementor-element-2e06e2d{ animation-duration:24s; } .elementor-element-2e06e2d > [data-element_type="container"]{ width:130px; } }

/* (The "How We Work" step section uses the theme's original design, unmodified.
   Only its text content was updated — no CSS/design changes here.) */


/* ============================================================================
   Service 1 — premium hero treatment
   (eyebrow + balanced title + supporting line + framed/badged video + soft glow)
   ========================================================================== */
.page-id-11093 .elementor-element-8560326{
  position:relative; overflow:hidden;
  padding-top:104px; padding-bottom:52px;
  background:radial-gradient(58% 78% at 80% 32%, rgba(255,122,0,.13), transparent 62%);
}
.page-id-11093 .elementor-element-8560326::after{
  content:""; position:absolute; left:var(--nn-hero-x,0); top:84px; width:64px; height:4px; background:var(--nn-orange);
}
.page-id-11093 .elementor-element-5ab4688 .tp-el-title{
  font-size:clamp(44px,6vw,104px) !important; line-height:0.92 !important; letter-spacing:-.01em;
}
.page-id-11093 .elementor-element-5ab4688 .tp-el-title::before{
  content:"Our Service / 01"; display:block;
  font-family:Inter,sans-serif; font-weight:700; font-size:13px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--nn-orange); margin-bottom:22px;
}
.page-id-11093 .elementor-element-5ab4688 .tp-el-title::after{
  content:"Identity \00b7 Naming \00b7 Campaigns"; display:block;
  font-family:Inter,sans-serif; font-weight:500; font-size:18px; letter-spacing:.01em;
  text-transform:none; color:#56565e; margin-top:26px;
}
.page-id-11093 .elementor-element-5feff64{ position:relative; }
.page-id-11093 .elementor-element-5feff64 video{
  border-radius:20px; box-shadow:0 28px 64px rgba(10,10,10,.32);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.page-id-11093 .elementor-element-5feff64:hover video{ transform:translateY(-6px) scale(1.015); }
.page-id-11093 .elementor-element-5feff64::before{
  content:""; position:absolute; inset:-6px; border-radius:26px; z-index:-1;
  background:linear-gradient(135deg, rgba(255,122,0,.9), rgba(255,122,0,0) 55%);
}
.page-id-11093 .elementor-element-5feff64::after{
  content:"\25CF  Featured branding"; position:absolute; left:16px; bottom:16px;
  font-family:Inter,sans-serif; font-size:12px; font-weight:600; letter-spacing:.04em; color:#fff;
  background:rgba(10,10,10,.55); backdrop-filter:blur(8px);
  padding:8px 14px; border-radius:30px;
}
@media (max-width:991px){
  .page-id-11093 .elementor-element-5ab4688 .tp-el-title::after{ font-size:15px; margin-top:18px; }
}

/* Service 1 — fix the step section's pinned video bleeding over the FAQ.
   The FAQ section was transparent; give it the page background + a high stacking
   order so it cleanly covers the pinned media as it scrolls up. (Step design
   itself is untouched.) */
.page-id-11093 .elementor-element-b392dd8{ position:relative; z-index:999; background-color:#FFF5F3; }

/* About "Trusted by leading brands" (#d06f6c1): real client logos render at full
   size — constrain to a neat icon and align the logo + client name cleanly. */
.page-id-11517 .elementor-element-d06f6c1 .px-award-category{ display:flex; align-items:center; gap:18px; }
.page-id-11517 .elementor-element-d06f6c1 .px-award-category img{ height:44px !important; width:auto !important; max-width:120px; object-fit:contain; flex:0 0 auto; }
.page-id-11517 .elementor-element-d06f6c1 .px-award-category .tp-el-title{ margin:0; line-height:1.25; }


/* ============================================================================
   About "Our approach" — two-column spacing + premium video (#0566116 row,
   #6a68e81 video col, #973af2f text col, #ead374f video). Scoped to About.
   ========================================================================== */
.page-id-11517 .elementor-element-0566116{ column-gap:60px; align-items:center; flex-wrap:nowrap; }
.page-id-11517 .elementor-element-6a68e81{ position:relative; width:calc(50% - 30px) !important; flex:0 0 calc(50% - 30px) !important; }
.page-id-11517 .elementor-element-973af2f{ width:auto !important; flex:1 1 auto !important; }

/* soft brand blob behind the video */
.page-id-11517 .elementor-element-6a68e81::before{
  content:""; position:absolute; z-index:0; left:-7%; top:-9%; width:72%; height:78%;
  background:radial-gradient(closest-side, rgba(255,122,0,.55), rgba(255,122,0,0) 72%);
  filter:blur(34px); border-radius:50%; pointer-events:none;
}
.page-id-11517 .elementor-element-ead374f{ position:relative; z-index:1; }

/* the video itself: 16:9 lock, rounded, layered shadow, hover lift */
.page-id-11517 .elementor-element-ead374f .tp-el-video{ width:100%; }
.page-id-11517 .elementor-element-ead374f .tp-el-video video{
  width:100% !important; aspect-ratio:16/9; height:auto !important; object-fit:cover; display:block;
  border-radius:18px;
  box-shadow:0 8px 20px rgba(10,10,10,.12), 0 34px 70px rgba(10,10,10,.24);
  transition:transform .3s ease, box-shadow .3s ease;
}
.page-id-11517 .elementor-element-ead374f:hover .tp-el-video video{
  transform:scale(1.02); box-shadow:0 12px 26px rgba(10,10,10,.16), 0 40px 80px rgba(10,10,10,.28);
}

/* reveal-on-scroll (JS adds .nn-reveal-ready then .nn-inview; no-JS = visible) */
.page-id-11517 .elementor-element-ead374f.nn-reveal-ready{ opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.page-id-11517 .elementor-element-ead374f.nn-reveal-ready.nn-inview{ opacity:1; transform:none; }

/* RTL: mirror columns (video on the right) + blob offset */
.pixora-ar .page-id-11517 .elementor-element-0566116{ flex-direction:row-reverse; }
.pixora-ar .page-id-11517 .elementor-element-6a68e81::before{ left:auto; right:-7%; }

/* mobile: stack with 32px vertical gap + equal side padding */
@media (max-width:991px){
  .page-id-11517 .elementor-element-0566116{ flex-direction:column; row-gap:32px; column-gap:0; }
  .page-id-11517 .elementor-element-6a68e81,
  .page-id-11517 .elementor-element-973af2f{ width:100% !important; flex:1 1 100% !important; }
  .page-id-11517 .elementor-element-6a68e81{ padding:0 4px; }
}
@media (prefers-reduced-motion:reduce){
  .page-id-11517 .elementor-element-ead374f.nn-reveal-ready{ opacity:1; transform:none; }
  .page-id-11517 .elementor-element-ead374f:hover .tp-el-video video{ transform:none; }
}

/* ============================================================================
   Portfolio hero (page 10841, .px-hero-4-area): fix the oversized "OUR WORK"
   display text + premium polish + Showreel video. Scoped to this page. ====== */
.page-id-10841 .px-hero-4-area{ padding-top:120px; padding-bottom:96px; overflow:hidden; }
.page-id-10841 .px-hero-4-content .tp-el-pre{ max-width:520px; }

/* Giant "OUR WORK": responsive (never clips), tight, premium gradient fill */
.page-id-10841 .px-hero-4-bigtitle{ margin-top:36px; overflow:hidden; }
.page-id-10841 .px-hero-4-bigtitle .tp-el-title,
.page-id-10841 .px-hero-4-bigtitle h1,
.page-id-10841 .px-hero-4-bigtitle h2,
.page-id-10841 .px-hero-4-bigtitle h3{
  font-size:clamp(4rem, 14vw, 12rem) !important;
  line-height:.84 !important; letter-spacing:-.02em !important; margin:0; white-space:nowrap;
  background:linear-gradient(180deg,#2b2b30 0%, #0a0a0a 78%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
/* reveal on scroll */
.page-id-10841 .px-hero-4-bigtitle.nn-reveal-ready{ opacity:0; transform:translateY(42px); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.page-id-10841 .px-hero-4-bigtitle.nn-reveal-ready.nn-inview{ opacity:1; transform:none; }

/* Showreel video: 16:9, rounded, layered shadow, hover, clean label */
.page-id-10841 .px-hero-4-video{ position:relative; width:100%; max-width:540px; }
.page-id-10841 .px-hero-4-video video{
  width:100% !important; aspect-ratio:16/9; height:auto !important; object-fit:cover; display:block;
  border-radius:18px; box-shadow:0 18px 40px rgba(10,10,10,.16), 0 48px 90px rgba(10,10,10,.26);
  transition:transform .3s ease, box-shadow .3s ease;
}
.page-id-10841 .px-hero-4-video:hover video{ transform:scale(1.02); box-shadow:0 24px 50px rgba(10,10,10,.2), 0 60px 110px rgba(10,10,10,.32); }
.page-id-10841 .px-hero-4-video-btn{
  position:absolute; left:16px; bottom:16px; z-index:2; gap:10px;
  background:rgba(10,10,10,.55); backdrop-filter:blur(8px); color:#fff;
  padding:8px 14px; border-radius:30px; font-size:12px; font-weight:600; letter-spacing:.03em; width:auto;
}
.page-id-10841 .px-hero-4-video.nn-reveal-ready{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.page-id-10841 .px-hero-4-video.nn-reveal-ready.nn-inview{ opacity:1; transform:none; }

/* RTL: Showreel on the left, content on the right */
.pixora-ar .page-id-10841 .px-hero-4-area .row:first-child{ flex-direction:row-reverse; }
.pixora-ar .page-id-10841 .px-hero-4-video-wrap{ justify-content:flex-start !important; }
.pixora-ar .page-id-10841 .px-hero-4-video-btn{ left:auto; right:16px; }
.pixora-ar .page-id-10841 .px-hero-4-content{ text-align:right; }

@media (max-width:991px){
  .page-id-10841 .px-hero-4-area{ padding-top:90px; padding-bottom:56px; }
  .page-id-10841 .px-hero-4-video{ max-width:100%; margin-top:24px; }
  .page-id-10841 .px-hero-4-bigtitle .tp-el-title,
  .page-id-10841 .px-hero-4-bigtitle h1,
  .page-id-10841 .px-hero-4-bigtitle h2,
  .page-id-10841 .px-hero-4-bigtitle h3{ white-space:normal; }
}
@media (prefers-reduced-motion:reduce){
  .page-id-10841 .px-hero-4-bigtitle.nn-reveal-ready,
  .page-id-10841 .px-hero-4-video.nn-reveal-ready{ opacity:1; transform:none; }
  .page-id-10841 .px-hero-4-video:hover video{ transform:none; }
}

/* ============================================================================
   Portfolio hero REELS WALL (page 10841) — FULL-WIDTH geometric video wall.
   Left text column hidden; reels span the whole hero in COLS columns that
   scroll in alternating directions (seamless loop). Built by JS. Scoped. ===== */
/* hide the left "Selected work…" text column; let the wall use the full width */
.page-id-10841 .px-hero-4-area > .row:first-child{ margin:0; }
.page-id-10841 .px-hero-4-area > .row:first-child > [class*="col-"]:first-child{ display:none !important; }
.page-id-10841 .px-hero-4-area > .row:first-child > [class*="col-"]:last-child{ flex:0 0 100%; max-width:100%; width:100%; }
.page-id-10841 .px-hero-4-video-wrap{ width:100%; justify-content:center !important; }

.page-id-10841 .nn-reels-wall{ display:flex; gap:16px; width:100%; height:600px; align-items:flex-start; position:relative; z-index:1; }
.page-id-10841 .nn-reels-col{
  flex:1 1 0; min-width:0; overflow:hidden; position:relative;
  -webkit-mask:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.page-id-10841 .nn-reels-col-down{ margin-top:-70px; }   /* stagger the down columns */
.page-id-10841 .nn-reels-track{ display:flex; flex-direction:column; gap:16px; will-change:transform; }
.page-id-10841 .nn-reels-col-up   .nn-reels-track{ animation:nn-reels-up   50s linear infinite; }
.page-id-10841 .nn-reels-col-down .nn-reels-track{ animation:nn-reels-down 50s linear infinite; }
.page-id-10841 .nn-reels-wall:hover .nn-reels-track{ animation-play-state:paused; }
@keyframes nn-reels-up   { from{ transform:translateY(0); }    to{ transform:translateY(-50%); } }
@keyframes nn-reels-down { from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
.page-id-10841 .nn-reel-card{
  margin:0; border-radius:16px; overflow:hidden; aspect-ratio:9/16; background:#111; position:relative;
  box-shadow:0 10px 22px rgba(10,10,10,.16), 0 26px 50px rgba(10,10,10,.22);
  transition:transform .3s ease, box-shadow .3s ease;
}
.page-id-10841 .nn-reel-card video{ width:100%; height:100%; object-fit:cover; display:block; }
.page-id-10841 .nn-reel-card:hover{ transform:scale(1.03) translateY(-4px); z-index:3; box-shadow:0 16px 32px rgba(10,10,10,.22), 0 38px 72px rgba(10,10,10,.30); }
/* reveal on scroll */
.page-id-10841 .nn-reels-wall.nn-reveal-ready{ opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.page-id-10841 .nn-reels-wall.nn-reveal-ready.nn-inview{ opacity:1; transform:none; }
/* RTL: reverse column directions */
.pixora-ar .page-id-10841 .nn-reels-col-up   .nn-reels-track{ animation-name:nn-reels-down; }
.pixora-ar .page-id-10841 .nn-reels-col-down .nn-reels-track{ animation-name:nn-reels-up; }
/* tablet: fewer columns */
@media (max-width:1199px){ .page-id-10841 .nn-reels-col:nth-child(n+4){ display:none; } }
@media (max-width:767px){
  .page-id-10841 .nn-reels-wall{ height:460px; gap:12px; }
  .page-id-10841 .nn-reels-col:nth-child(n+2){ display:none; }
  .page-id-10841 .nn-reels-col-down{ margin-top:0; }
}
@media (prefers-reduced-motion:reduce){
  .page-id-10841 .nn-reels-track{ animation:none !important; }
  .page-id-10841 .nn-reels-wall.nn-reveal-ready{ opacity:1; transform:none; }
}

/* Reels wall fix: clip each column to the wall height so the track scrolls
   within a fixed viewport (was showing the whole tall stack, pushing content). */
.page-id-10841 .nn-reels-col{ height:100%; }
.page-id-10841 .nn-reels-col-down{ margin-top:0; }

/* ===== Service 1 — contact CTA social icons (#28b5218) =====
   The widget outputs <img> + a text label per item. Source icons are large
   PNGs, so cap them to neat circular icon-buttons sized for the orange CTA. */
.elementor-element-28b5218 .px-social-icon{
	display:flex; align-items:center; gap:14px; flex-wrap:wrap;
	justify-content:flex-end;
}
.elementor-element-28b5218 .px-social-icon a{
	display:inline-flex; align-items:center; justify-content:center;
	width:46px; height:46px; border-radius:50%;
	background:rgba(255,255,255,.16);
	transition:background .25s ease, transform .25s ease;
	flex:0 0 auto;
}
.elementor-element-28b5218 .px-social-icon a:hover{
	background:rgba(255,255,255,.30); transform:translateY(-3px);
}
.elementor-element-28b5218 .px-social-icon a img{
	width:20px; height:20px; object-fit:contain; margin:0;
}
.elementor-element-28b5218 .px-social-icon .tp-el-text{
	position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}
@media (max-width:767px){
	.elementor-element-28b5218 .px-social-icon{ justify-content:center; }
}

/* ===== Service 1 (#11093) — mobile/tablet responsive containment =====
   The page rendered ~1560px wide on phones because the partner-logos row
   (#2e06e2d: 12 logos × 16.66%, no wrap, min-width from intrinsic images)
   never shrank — stretching <body> so every section's content shifted right
   and clipped. Wrapping the logos collapses the page back to viewport width. */
@media (max-width: 991px){
	.page-id-11093 .elementor-element-2e06e2d{
		flex-wrap: wrap !important;
		width: 100% !important;
		row-gap: 22px;
		justify-content: center;
	}
	.page-id-11093 .elementor-element-2e06e2d > *{
		flex: 0 0 33.333% !important;
		width: 33.333% !important;
		min-width: 0 !important;
	}
	/* scrolling text marquee must not widen the page */
	.page-id-11093 .elementor-element-ea9f301{ overflow: hidden !important; }
	/* safety net against any remaining horizontal bleed */
	html:has(body.page-id-11093){ overflow-x: clip; }
	body.page-id-11093{ overflow-x: clip; max-width: 100%; }
	.page-id-11093 .elementor,
	.page-id-11093 .e-con,
	.page-id-11093 .e-con-inner{ max-width: 100%; }
}

/* ===== Service 1 (#11093) — step-section intro on mobile/tablet =====
   The theme hard-codes .px-step-item{height:860px} with .px-step-video
   absolutely positioned (top:11%;left:9%) and NO responsive override, so on
   phones the video floats at the top and ~600px of the item stays empty.
   Collapse the item to its content and put the video back in normal flow. */
@media (max-width: 991px){
	.page-id-11093 .px-step-item{
		height: auto !important;
		min-height: 0 !important;
		padding: 10px 0 24px !important;
		justify-content: flex-start !important;
	}
	.page-id-11093 .px-step-video{
		position: static !important;
		top: auto !important; left: auto !important;
		width: 100%; max-width: 100%;
		margin: 0 0 18px;
	}
	.page-id-11093 .px-step-video video{
		width: 100%; height: auto; max-width: 100%; display: block;
	}
}

/* ===== Service 1 (#11093) — "WE CAN HELP WITH…" capsules on mobile/tablet =====
   The capsule list is a throwable.js physics scene: fixed-height wrapper
   (540/633px) with absolutely-positioned 160px circle pills + negative
   margins. The physics needs a wide canvas, so on phones the pills pile up
   off-view and leave a tall empty gap. Replace the scene with a simple,
   visible wrapped list of pill badges. */
@media (max-width: 991px){
	.page-id-11093 .px-capsule-item-wrapper{
		height: auto !important;
		margin-top: 0 !important;
		overflow: visible !important;
		display: flex !important;
		flex-wrap: wrap;
		gap: 12px;
		justify-content: center;
		pointer-events: auto;
	}
	.page-id-11093 .px-capsule-item-wrapper > *{
		position: static !important;
		transform: none !important;
		inset: auto !important;
	}
	.page-id-11093 .px-capsule-item{
		width: auto !important;
		height: auto !important;
		border-radius: 40px !important;
		padding: 13px 26px !important;
		font-size: 18px !important;
	}
}

/* ===== Portfolio detail (single tp-portfolios) — navbar over dark hero =====
   These pages render with the dark-text header style (px-header-style-black)
   but the project hero is always dark, so the menu text was invisible. The
   header is not sticky here, so simply force the menu, dropdown arrows and
   hamburger bars to white. */
body.single-tp-portfolios .px-header-style-black .px-header-menu nav > ul > li > a,
body.single-tp-portfolios .px-header-style-black .px-header-menu nav > ul > li.has-dropdown a::after{
	color: var(--tp-common-px-white, #fff);
}
body.single-tp-portfolios .px-header-style-black .px-header-bar span{
	background-color: var(--tp-common-px-white, #fff);
}

/* ==========================================================================
   Service 1 (#11093) — PREMIUM animated service cards (container #2ec1c45)
   Gradient icon badge, big index watermark, lift + glow on hover, animated
   icon/arrow, and a staggered scroll-reveal. Brand accent = orange→red.
   ========================================================================== */
.elementor-element-2ec1c45{ counter-reset: nnsvc; --nn-o:#FF7A00; --nn-r:#E50328; align-items: stretch; }

/* Equal-height cards WITHOUT percentage heights (which, on a wrapped flex
   row, made every card the full container height and overflowed the next
   section). Each widget is stretched to its row by align-items:stretch; a
   flex chain lets the visual card fill that height. */
.elementor-element-2ec1c45 .elementor-widget-tp-px-service-box{ display:flex; flex-direction:column; }
.elementor-element-2ec1c45 .elementor-widget-tp-px-service-box > .elementor-widget-container{ flex:1 1 auto; display:flex; flex-direction:column; }

/* ---- card shell ---- */
.elementor-element-2ec1c45 .px-service-5-item{
	counter-increment: nnsvc;
	position: relative;
	overflow: hidden;
	flex: 1 1 auto;
	padding: 42px 34px 34px;
	background: #fff;
	border: 1px solid rgba(20,20,20,.10);
	border-radius: 22px;
	isolation: isolate;
	transition: transform .55s cubic-bezier(.19,1,.22,1),
	            box-shadow .55s cubic-bezier(.19,1,.22,1),
	            border-color .45s ease;
	will-change: transform;
}
/* soft brand wash that fades in on hover */
.elementor-element-2ec1c45 .px-service-5-item::before{
	content:""; position:absolute; inset:0; z-index:-1; opacity:0;
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(255,122,0,.12), transparent 55%),
		radial-gradient(120% 120% at 100% 100%, rgba(229,3,40,.10), transparent 55%);
	transition: opacity .5s ease;
}
/* big index watermark 01–08 */
.elementor-element-2ec1c45 .px-service-5-item::after{
	content:"0" counter(nnsvc);
	position:absolute; top:8px; right:22px; z-index:0;
	font-family: var(--tp-ff-thundermed, "Phudu", sans-serif);
	font-size:92px; font-weight:700; line-height:1; letter-spacing:-.05em;
	color: rgba(20,20,20,.045);
	transition: color .5s ease, transform .6s cubic-bezier(.19,1,.22,1);
	pointer-events:none;
}
.elementor-element-2ec1c45 .px-service-5-item:hover{
	transform: translateY(-12px);
	border-color: rgba(255,122,0,.6);
	box-shadow: 0 34px 64px -26px rgba(229,3,40,.4), 0 10px 26px -14px rgba(20,20,20,.16);
}
.elementor-element-2ec1c45 .px-service-5-item:hover::before{ opacity:1; }
.elementor-element-2ec1c45 .px-service-5-item:hover::after{
	color: rgba(255,122,0,.18); transform: translateY(-4px) scale(1.06);
}

/* ---- gradient icon badge ---- */
.elementor-element-2ec1c45 .px-service-5-icon{
	position:relative; z-index:1; overflow:hidden;
	width:76px; height:76px; margin-bottom:28px;
	display:inline-flex; align-items:center; justify-content:center;
	border-radius:20px;
	background:#f5f4f2; border:1px solid rgba(20,20,20,.08);
	transition: transform .6s cubic-bezier(.19,1,.22,1), box-shadow .5s ease, border-color .5s ease;
}
.elementor-element-2ec1c45 .px-service-5-icon::before{
	content:""; position:absolute; inset:0; z-index:0; opacity:0;
	background: linear-gradient(135deg, var(--nn-o), var(--nn-r));
	transition: opacity .5s ease;
}
.elementor-element-2ec1c45 .px-service-5-icon svg{
	position:relative; z-index:1; width:38px; height:38px;
	stroke:#141414;
	transition: stroke .45s ease, transform .6s cubic-bezier(.19,1,.22,1);
}
.elementor-element-2ec1c45 .px-service-5-item:hover .px-service-5-icon{
	transform: translateY(-2px) rotate(-5deg);
	border-color: transparent;
	box-shadow: 0 16px 28px -12px rgba(229,3,40,.55);
}
.elementor-element-2ec1c45 .px-service-5-item:hover .px-service-5-icon::before{ opacity:1; }
.elementor-element-2ec1c45 .px-service-5-item:hover .px-service-5-icon svg{ stroke:#fff; transform: scale(1.1); }

/* ---- text ---- */
.elementor-element-2ec1c45 .px-service-5-content,
.elementor-element-2ec1c45 .px-service-5-link{ position:relative; z-index:1; }
.elementor-element-2ec1c45 .px-service-5-title{ margin-bottom:12px; }
.elementor-element-2ec1c45 .px-service-5-title a{ transition: color .4s ease; }
.elementor-element-2ec1c45 .px-service-5-item:hover .px-service-5-title a{ color: var(--nn-r); }

/* ---- link + arrow ---- */
.elementor-element-2ec1c45 .px-service-5-link{ margin-top:24px; }
.elementor-element-2ec1c45 .px-service-5-link .tp-el-btn{
	font-weight:600; letter-spacing:-.01em;
	transition: color .4s ease, letter-spacing .4s ease;
}
.elementor-element-2ec1c45 .px-service-5-item:hover .px-service-5-link .tp-el-btn{ color: var(--nn-r); }
.elementor-element-2ec1c45 .px-service-5-link svg{ transition: transform .45s cubic-bezier(.19,1,.22,1); }
.elementor-element-2ec1c45 .px-service-5-item:hover .px-service-5-link svg{ transform: translate(5px,-5px); }

/* ---- staggered scroll reveal (JS toggles .nn-in) ---- */
.elementor-element-2ec1c45.nn-reveal .elementor-widget-tp-px-service-box{
	opacity:0; transform: translateY(42px);
	transition: opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1);
}
.elementor-element-2ec1c45.nn-reveal.nn-in .elementor-widget-tp-px-service-box{ opacity:1; transform:none; }
.elementor-element-2ec1c45.nn-in .elementor-widget-tp-px-service-box:nth-child(1){ transition-delay:.04s; }
.elementor-element-2ec1c45.nn-in .elementor-widget-tp-px-service-box:nth-child(2){ transition-delay:.12s; }
.elementor-element-2ec1c45.nn-in .elementor-widget-tp-px-service-box:nth-child(3){ transition-delay:.20s; }
.elementor-element-2ec1c45.nn-in .elementor-widget-tp-px-service-box:nth-child(4){ transition-delay:.28s; }
.elementor-element-2ec1c45.nn-in .elementor-widget-tp-px-service-box:nth-child(5){ transition-delay:.36s; }
.elementor-element-2ec1c45.nn-in .elementor-widget-tp-px-service-box:nth-child(6){ transition-delay:.44s; }
.elementor-element-2ec1c45.nn-in .elementor-widget-tp-px-service-box:nth-child(7){ transition-delay:.52s; }
.elementor-element-2ec1c45.nn-in .elementor-widget-tp-px-service-box:nth-child(8){ transition-delay:.60s; }
@media (prefers-reduced-motion: reduce){
	.elementor-element-2ec1c45 .px-service-5-item,
	.elementor-element-2ec1c45 .px-service-5-icon,
	.elementor-element-2ec1c45 .elementor-widget-tp-px-service-box{ transition:none !important; }
}

/* ==========================================================================
   Home (#7030) — "What We Do" PREMIUM service grid (replaces the accordion).
   Dark section · 4×2 image cards · zoom + reveal on hover · staggered reveal.
   ========================================================================== */
.nn-svc-sec{
	--nn-o:#FF7A00; --nn-r:#E50328;
	background:#0A0A0A; color:#fff;
	border-radius:28px;
	padding:clamp(64px,7vw,110px) 0 clamp(78px,8vw,130px);
}
.nn-svc-head,
.nn-svc-grid{ max-width:1550px; margin-left:auto; margin-right:auto; padding-left:clamp(20px,3vw,40px); padding-right:clamp(20px,3vw,40px); }
.nn-svc-head{
	display:grid; grid-template-columns:1fr auto;
	grid-template-areas:"eye btn" "title btn";
	align-items:end; gap:8px 40px; margin-bottom:50px;
}
.nn-svc-eyebrow{ grid-area:eye; color:rgba(255,255,255,.55); font-size:14px; letter-spacing:.14em; text-transform:uppercase; }
.nn-svc-heading{ grid-area:title; margin:0; color:#fff; font-size:clamp(32px,4vw,56px); line-height:1.03; letter-spacing:-.03em; max-width:18ch; }
.nn-svc-all{ grid-area:btn; align-self:center; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; padding:14px 28px; border-radius:100px; border:1px solid rgba(255,255,255,.28); color:#fff; font-weight:600; transition:background .4s ease,color .4s ease,gap .4s ease; }
.nn-svc-all:hover{ background:#fff; color:#111; gap:15px; }
.nn-svc-all svg{ transition:transform .4s ease; }
.nn-svc-all:hover svg{ transform:translate(2px,-2px); }

.nn-svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

.nn-svc-card{
	position:relative; display:block; overflow:hidden;
	border-radius:16px; aspect-ratio:16/9; isolation:isolate;
	border:1px solid rgba(255,255,255,.08);
	transition:transform .6s cubic-bezier(.19,1,.22,1), box-shadow .6s ease, border-color .5s ease;
}
.nn-svc-img{
	position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
	filter:grayscale(.25) brightness(.72); transform:scale(1.03);
	transition:transform 1s cubic-bezier(.19,1,.22,1), filter .6s ease;
}
.nn-svc-shade{
	position:absolute; inset:0; z-index:1;
	background:linear-gradient(to top, rgba(8,8,10,.92) 0%, rgba(8,8,10,.35) 40%, transparent 72%);
	opacity:.42; transition:opacity .5s ease;
}
.nn-svc-card:hover .nn-svc-shade{ opacity:1; }
.nn-svc-num{
	position:absolute; top:16px; left:18px; z-index:3;
	font-family:var(--tp-ff-thundermed, sans-serif); font-size:20px; font-weight:700; letter-spacing:.05em;
	color:rgba(255,255,255,.6); transition:color .45s ease;
}
.nn-svc-body{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:22px 22px 24px; }
.nn-svc-name{ display:block; color:#fff; font-weight:600; letter-spacing:-.02em; font-size:clamp(19px,1.5vw,23px); line-height:1.12; transition:transform .5s cubic-bezier(.19,1,.22,1); }
.nn-svc-reveal{ display:block; max-height:0; opacity:0; overflow:hidden; transition:max-height .6s cubic-bezier(.19,1,.22,1), opacity .45s ease; }
.nn-svc-reveal-in{ display:block; padding-top:13px; }
.nn-svc-desc{ display:block; color:rgba(255,255,255,.72); font-size:13.5px; line-height:1.5; margin-bottom:12px; }
.nn-svc-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.nn-svc-tags span{ font-size:11px; font-weight:500; padding:5px 11px; border-radius:100px; color:rgba(255,255,255,.88); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.15); }
.nn-svc-arrow{
	position:absolute; top:15px; right:15px; z-index:3;
	width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
	color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
	opacity:0; transform:translate(6px,-6px) scale(.9); transition:.5s cubic-bezier(.19,1,.22,1);
}
.nn-svc-card:hover{ transform:translateY(-6px); border-color:rgba(255,122,0,.6); box-shadow:0 40px 72px -30px rgba(229,3,40,.55); }
.nn-svc-card:hover .nn-svc-img{ transform:scale(1.1); filter:grayscale(0) brightness(.86); }
.nn-svc-card:hover .nn-svc-name{ transform:translateY(-2px); }
.nn-svc-card:hover .nn-svc-reveal{ max-height:300px; opacity:1; }
.nn-svc-card:hover .nn-svc-num{ color:var(--nn-o); }
.nn-svc-card:hover .nn-svc-arrow{ opacity:1; transform:none; background:linear-gradient(135deg,var(--nn-o),var(--nn-r)); border-color:transparent; }

/* staggered scroll reveal */
.nn-svc-grid.nn-svc-ready .nn-svc-card{ opacity:0; transform:translateY(42px); transition:opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1); }
.nn-svc-grid.nn-svc-ready.nn-svc-in .nn-svc-card{ opacity:1; transform:none; }
.nn-svc-grid.nn-svc-in .nn-svc-card{ transition-delay:calc(var(--i) * .07s); }

/* responsive */
@media (max-width:1199px){ .nn-svc-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:991px){
	.nn-svc-head{ grid-template-columns:1fr; grid-template-areas:"eye" "title" "btn"; gap:12px; margin-bottom:34px; }
	.nn-svc-all{ justify-self:start; margin-top:6px; }
}
@media (max-width:767px){ .nn-svc-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } .nn-svc-arrow{ display:none; } }
@media (max-width:479px){ .nn-svc-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
	.nn-svc-card, .nn-svc-img, .nn-svc-name, .nn-svc-reveal{ transition:none !important; }
}

/* ============================================================
   Home "Selected Projects" cards — equal height thumbnails.
   The tp-px-portfolio-card widget's own height control emits CSS
   for `.tp-img img`, but the theme renders the image as
   `.px-project-thumb .ripple-image img`, so the setting never
   matched. Force a uniform image height here (EN + AR).
   ============================================================ */
.elementor-widget-tp-px-portfolio-card .px-project-thumb .ripple-image,
.elementor-widget-tp-px-portfolio-card .px-project-thumb .ripple-image img{
	height:520px;
}
.elementor-widget-tp-px-portfolio-card .px-project-thumb .ripple-image img{
	width:100%;
	object-fit:cover;
	object-position:center;
}
@media (max-width:767px){
	.elementor-widget-tp-px-portfolio-card .px-project-thumb .ripple-image,
	.elementor-widget-tp-px-portfolio-card .px-project-thumb .ripple-image img{
		height:360px;
	}
}

/* ============================================================
   Home hero showreel — click to open a fullscreen player.
   Hover reveals a play button + a slight dim; click opens the
   lightbox (markup + JS in home-binding.php). No resize.
   ============================================================ */
.elementor-element-157605e .px-hero-video{ position:relative; cursor:pointer; }
.elementor-element-157605e .px-hero-video::after{
	content:""; position:absolute; inset:0; background:rgba(0,0,0,0);
	transition:background .35s ease; pointer-events:none; z-index:1;
}
.elementor-element-157605e .px-hero-video::before{
	content:""; position:absolute; top:50%; left:50%; width:66px; height:66px; z-index:2;
	transform:translate(-50%,-50%) scale(.7); opacity:0; pointer-events:none; border-radius:50%;
	box-shadow:0 8px 24px rgba(0,0,0,.4);
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%23FF7A00'/%3E%3Cpath d='M26 20 L46 33 L26 46 Z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
	transition:opacity .35s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.elementor-element-157605e .px-hero-video:hover::after{ background:rgba(0,0,0,.35); }
.elementor-element-157605e .px-hero-video:hover::before{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* Fullscreen showreel lightbox */
.nn-reel-lightbox{
	position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
	padding:24px; background:rgba(0,0,0,.92); opacity:0; visibility:hidden;
	transition:opacity .3s ease, visibility .3s ease;
}
.nn-reel-lightbox.is-open{ opacity:1; visibility:visible; }
.nn-reel-frame{ width:min(1100px,94vw); }
.nn-reel-frame video{
	width:100%; max-height:86vh; display:block; border-radius:12px; background:#000;
	box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.nn-reel-close{
	position:absolute; top:22px; right:28px; width:48px; height:48px; border:0; border-radius:50%;
	background:rgba(255,255,255,.14); color:#fff; font-size:28px; line-height:46px; cursor:pointer;
	transition:background .25s ease, transform .25s ease;
}
.nn-reel-close:hover{ background:var(--nn-orange); transform:rotate(90deg); }
@media (prefers-reduced-motion: reduce){
	.elementor-element-157605e .px-hero-video::before,
	.elementor-element-157605e .px-hero-video::after,
	.nn-reel-lightbox, .nn-reel-close{ transition:none; }
}

/* Project card SHORT description (injected on Home + Portfolio cards):
   a small orange category pill above a tidy description line. */
.nn-card-short{
	margin:14px 0 4px;
	display:flex;
	flex-direction:column;
	align-items:flex-start;   /* follows text direction: left in LTR, right in RTL */
	gap:9px;
	max-width:52ch;
}
.nn-card-tag{
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--nn-orange);
	background:rgba(255,122,0,.10);
	border:1px solid rgba(255,122,0,.22);
	padding:4px 12px;
	border-radius:999px;
	line-height:1.5;
	white-space:nowrap;
}
.nn-card-text{
	font-size:14px;
	line-height:1.6;
	opacity:.72;
}
[dir="rtl"] .nn-card-text{ text-align:right; }
@media (max-width:767px){
	.nn-card-short{ gap:7px; margin-top:11px; }
	.nn-card-text{ font-size:13px; }
}

/* Reel that is an embedded link (Google Drive / YouTube / Vimeo) — fills the
   same 9:16 .nn-reel frame as an uploaded video. */
.nn-reel--embed { background:#000; }
.nn-reel-embed { width:100%; height:100%; border:0; display:block; }

/* Team cards: hide the social icons that appear on photo hover (not wanted). */
.elementor-widget-tp-px-team-box .px-team-social { display: none !important; }