:root {
  --bg:#060816;--surface:rgba(15,23,42,.72);--text:#edf2ff;--muted:#a8b4d4;--primary:#68a4ff;--secondary:#8b5cf6;--accent:#2ee6d6;--border:rgba(255,255,255,.1);--shadow:0 30px 80px rgba(2,8,24,.46);--container:1180px;
}
*{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Inter',sans-serif;background:radial-gradient(circle at 15% 15%,rgba(104,164,255,.16),transparent 25%),radial-gradient(circle at 85% 12%,rgb(90, 0, 98),transparent 22%),linear-gradient(180deg,#1a0420 0%,#1a0420 52%,#300038 100%);color:var(--text);line-height:1.65;overflow-x:hidden} body.menu-open{overflow:hidden} a{text-decoration:none;color:inherit} button,input,textarea{font:inherit} .container{width:min(calc(100% - 2rem),var(--container));margin:auto} .narrow{max-width:840px} .site-shell{position:relative;isolation:isolate} .section-block{padding:7rem 0;position:relative} .page-hero{padding:11rem 0 4rem} .glass-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--border);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow)}
.bg-orb,.bg-grid{pointer-events:none;position:fixed}
.bg-orb{border-radius:999px;filter:blur(30px);opacity:.6;z-index:-2}
.orb-one{top:6rem;left:-8rem;width:22rem;height:22rem;background:radial-gradient(circle,rgba(74,132,255,.28),transparent 70%);animation:drift 14s ease-in-out infinite}
.orb-two{right:-6rem;top:24rem;width:20rem;height:20rem;background:radial-gradient(circle,rgba(151,71,255,.22),transparent 70%);animation:drift 18s ease-in-out infinite reverse}
.bg-grid{inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:110px 110px;mask-image:radial-gradient(circle at center,black 40%,transparent 78%);opacity:.26;z-index:-3}
.progress-bar{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));box-shadow:0 0 18px rgba(104,164,255,.7);z-index:1200}
.page-loader{position:fixed;inset:0;display:grid;place-items:center;gap:1rem;background:rgba(5,8,18,.97);z-index:1400;transition:opacity .45s ease,visibility .45s ease}
.page-loader p{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:#dbe5ff}
.loader-mark{display:flex;gap:.6rem}
.loader-mark span{width:.7rem;height:.7rem;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 0 22px rgba(104,164,255,.5);animation:pulse 1s infinite ease-in-out}
.loader-mark span:nth-child(2){animation-delay:.15s}
.loader-mark span:nth-child(3){animation-delay:.3s} 
body.loaded .page-loader{opacity:0;visibility:hidden;pointer-events:none}
.navbar{position:sticky;top:0;z-index:1100;transition:.25s ease}
.navbar.scrolled{position: sticky; background:rgba(7,10,22,.8);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 18px 45px rgba(4,8,22,.36);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.nav-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 0}.logo{ padding-top: 12px; font-family:'Poppins',sans-serif;font-size:1.35rem;font-weight:700;letter-spacing:-.04em}.logo span{color:#91b6ff}.nav-panel{margin-left:auto}.nav-links{display:flex;align-items:center;gap:1.45rem;list-style:none}.nav-link,.btn-nav{position:relative;font-size:.96rem}.nav-link{color:rgba(237,242,255,.88);padding-bottom:.25rem}.nav-link:after,.btn-nav:after{content:"";position:absolute;left:0;bottom:-.2rem;width:100%;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent));transform:scaleX(0);transform-origin:left;transition:.24s ease}.nav-link:hover:after,.nav-link.active:after,.btn-nav.active:after{transform:scaleX(1)}.nav-link.active,.btn-nav.active{color:#fff}.menu-toggle{display:none;flex-direction:column;gap:.35rem;width:3rem;height:3rem;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer}.menu-toggle span{width:1.15rem;height:2px;border-radius:999px;background:currentColor;transition:.24s ease}.menu-toggle.is-active span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle.is-active span:last-child{transform:translateY(-4px) rotate(-45deg)}
.btn-primary,.btn-secondary,.btn-nav{display:inline-flex;align-items:center;justify-content:center;min-height:3.35rem;padding:.95rem 1.45rem;border-radius:999px;font-weight:600;transition:.24s ease}.btn-primary,.btn-nav{color:#fff;background:linear-gradient(135deg,rgba(92,141,255,.92),rgba(139,92,246,.92));box-shadow:0 14px 35px rgba(92,141,255,.26)}.btn-secondary{color:var(--text);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}.btn-primary:hover,.btn-secondary:hover,.btn-nav:hover{transform:translateY(-3px) scale(1.02)}.btn-primary:hover,.btn-nav:hover{box-shadow:0 18px 42px rgba(104,164,255,.32),0 0 25px rgba(139,92,246,.18)}.btn-secondary:hover{border-color:rgba(255,255,255,.24);box-shadow:0 12px 32px rgba(7,15,30,.36)}
.section-kicker,.eyebrow{display:inline-flex;align-items:center;padding:.45rem .85rem;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04);color:#d7e1ff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}.section-title,.hero h1,.about-text h2,.cta h2{font-family:'Poppins',sans-serif;letter-spacing:-.04em}.section-heading{max-width:760px;margin-bottom:3.5rem}.section-title{font-size:clamp(2.35rem,4vw,4rem);line-height:1.05;margin-top:1.1rem}.section-copy,.hero p,.about-text p,.cta p,.contact-copy p,.metric-card span,.service-card p,.overlay span,.about-stat span,.visual-card p{color:var(--muted)}
.hero{padding:7rem 0 5rem}.hero-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);align-items:center;gap:3rem;min-height:calc(100vh - 7rem)}.hero h1{margin-top:1.35rem;font-size:clamp(3.2rem,7vw,6.4rem);line-height:.95}.hero p{max-width:620px;margin-top:1.5rem;font-size:1.08rem}.hero-buttons{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}.hero-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2.2rem}.metric-card{padding:1.35rem;border-radius:20px}.metric-card strong{display:block;font-size:1.9rem;margin-bottom:.45rem}.hero-visual{position:relative;padding:1rem 0 1rem 2rem;transition:transform .15s linear}.main-visual{position:relative;padding:1.6rem;border-radius:32px;overflow:hidden}.visual-topline{display:flex;justify-content:space-between;gap:1rem;color:#cfdbff;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase}.visual-card h2{margin-top:1.25rem;font-family:'Poppins',sans-serif;font-size:clamp(2rem,4vw,3rem);line-height:1}.visual-card p{margin-top:.95rem;max-width:28rem}.visual-stack{position:relative;margin-top:2rem;min-height:21rem;border-radius:26px;background:radial-gradient(circle at top,rgba(82,126,255,.28),transparent 40%),#081022;overflow:hidden}.stack-panel{height: 222px; position:absolute;border-radius:24px;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 36px rgba(0,0,0,.3)}
.stack-primary{inset:1.3rem 1.8rem 4.2rem 1.8rem;}.section-title2{font-size: 79px; justify-content: center; align-items: center; align-self: center; align-content: center; padding-bottom: 10px;}.alak-title{padding-left: 553px; padding-bottom: 25px;}
.stack-panel2{position:absolute;border-radius:24px;border:transparent;box-shadow:transparent}
.manasa{border-radius: 23px;}
.stack-secondary{inset:8.3rem 3rem 1.5rem 8rem;background:transparent}.stack-badge{position:absolute;top:44rem;right:6rem;padding:.65rem .95rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}.floating-chip{position:absolute;padding:.85rem 1rem;border-radius:999px;font-size:.9rem}.chip-one{left: 49rem;bottom:30rem;animation:floatChip 7s ease-in-out infinite}.chip-two{animation:floatChip 9s ease-in-out infinite reverse}
.services-grid,.portfolio-grid{display:grid;gap:1.4rem}.services-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.service-card{padding:1.7rem;border-radius:28px;transition:.24s ease}.service-card:hover{transform:translateY(-10px);border-color:rgba(104,164,255,.28);box-shadow:0 20px 45px rgba(7,12,26,.4),0 0 28px rgba(104,164,255,.12);background:linear-gradient(180deg,rgba(30,42,80,.72),rgba(15,21,40,.8))}.service-icon{display:inline-grid;place-items:center;width:3.35rem;height:3.35rem;margin-bottom:1.35rem;border-radius:18px;background:linear-gradient(135deg,rgba(95,140,255,.18),rgba(46,230,214,.18));color:#bcd3ff}.service-icon svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.service-card h3{font-size:1.2rem;margin-bottom:.75rem}
.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-item{position:relative;min-height:20rem;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);transition:.24s ease}.portfolio-item:hover{transform:translateY(-10px);box-shadow:0 25px 58px rgba(5,9,24,.44)}.portfolio-art{position:absolute;inset:0;transition:transform .5s ease}.portfolio-item:hover .portfolio-art{transform:scale(1.08)}.art-one{background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.28),transparent 18%),linear-gradient(135deg,#1d2f68,#7739ea 48%,#10172d)}.art-two{background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.28),transparent 18%),linear-gradient(135deg,#0f2f49,#2285f5 45%,#11172d)}.art-three{background:radial-gradient(circle at 15% 72%,rgba(255,255,255,.24),transparent 18%),linear-gradient(135deg,#18233f,#2eb0b5 52%,#0f1528)}.art-four{background:radial-gradient(circle at 78% 28%,rgba(255,255,255,.28),transparent 18%),linear-gradient(135deg,#20183b,#ff5fa2 42%,#0e1021)}.overlay{position:absolute;inset:auto 1.25rem 1.25rem 1.25rem;padding:1.2rem 1.25rem;border-radius:22px;transform:translateY(18px);opacity:0;transition:.24s ease}.portfolio-item:hover .overlay{opacity:1;transform:translateY(0)}.overlay span{display:inline-block;margin-bottom:.35rem;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}.overlay h3{color:#fff;font-size:1.2rem}
.about-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:2rem;padding:2rem;border-radius:32px}.about-text h2{margin-top:1rem;font-size:clamp(2rem,4vw,3.6rem);line-height:1.06}.about-text p{max-width:48rem;margin-top:1.15rem}.about-rail{display:grid;gap:1rem}.about-stat{padding:1.35rem;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.about-stat strong{display:block;margin-bottom:.45rem;font-size:1.45rem}.cta{padding-top:1rem}.cta-panel{text-align:center;padding:3rem 2rem;border-radius:34px;background:radial-gradient(circle at top,rgba(104,164,255,.15),transparent 40%),linear-gradient(180deg,rgba(20,28,58,.92),rgba(10,14,30,.94))}.cta-panel h2{margin-top:1rem;font-size:clamp(2rem,4vw,3.6rem);line-height:1.08}.cta-panel p{max-width:42rem;margin:1rem auto 0}.cta-panel .btn-primary{margin-top:1.8rem}.contact-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(320px,.85fr);gap:2rem;align-items:start}.contact-form{display:grid;gap:1rem;padding:1.55rem;border-radius:28px}.contact-form input,.contact-form textarea{width:100%;padding:1rem 1.05rem;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--text);outline:none;transition:.24s ease}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#8d9ab8}.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(104,164,255,.45);box-shadow:0 0 0 5px rgba(104,164,255,.12);transform:translateY(-1px)}.contact-form textarea{resize:vertical;min-height:9rem}.footer{padding:1.2rem 0 2rem}.footer-content{display:flex;justify-content:center;color:#8995b4;text-align:center}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}.reveal[data-reveal="left"]{transform:translateX(36px)}.reveal.is-visible{opacity:1;transform:translate(0,0)}
.Ezz{border: #8f8f8f; border-radius: 150px; justify-content: left;}
.hero-copy {
  opacity: 1 !important;
  transform: none !important;
}
@keyframes pulse{0%,100%{opacity:.4;transform:translateY(0) scale(.88)}50%{opacity:1;transform:translateY(-6px) scale(1)}}@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(24px,28px,0)}}@keyframes floatChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (max-width:1080px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-layout,.contact-layout,.about-layout{grid-template-columns:1fr}.hero-visual{padding-left:0}}
@media (max-width:820px){.section-block{padding:5.5rem 0}.page-hero{padding:9rem 0 3rem}.nav-container{position:relative}.menu-toggle{display:inline-flex}.nav-panel{position:absolute;top:calc(100% + .8rem);left:0;right:0;padding:1rem;border-radius:26px;background:rgba(8,12,26,.96);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-10px);transition:.24s ease}.nav-panel.open{opacity:1;visibility:visible;transform:translateY(0)}.nav-links{flex-direction:column;align-items:stretch;gap:.4rem}.nav-links li,.nav-link,.btn-nav{width:100%}.nav-link,.btn-nav{padding:.95rem 1rem;border-radius:18px}.nav-link:after,.btn-nav:after{display:none}.hero{padding-top:5rem}.hero-layout{min-height:auto}.hero h1{font-size:clamp(2.75rem,11vw,4.2rem)}.hero-metrics,.portfolio-grid,.services-grid{grid-template-columns:1fr}.portfolio-item{min-height:17rem}}
@media (max-width:560px){.container{width:min(calc(100% - 1.25rem),var(--container))}.hero-buttons{flex-direction:column;align-items:stretch}.btn-primary,.btn-secondary,.btn-nav{width:100%}.main-visual,.cta-panel,.contact-form,.about-layout{padding:1.35rem}.floating-chip{display:none}} 
.section-kicker {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
}
.clients{border-radius: 20px; border: #2c2c2c;}
.casa{padding-bottom: -5%;}

.client-hover{ cursor: pointer;}


.about-agency-intro {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  text-align: center;
}

.about-agency-intro img {
  width: min(100%, 500px);
  height: auto;
  display: block;
}

.about-agency-intro p {
  max-width: 56rem;
  margin: 0 auto;
  color: var(--muted);
  text-align: justify;
  text-align-last: center;
}


/* SERVICES MEDIA GRID */
.services-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.client-media-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.centerbaaaa{
  align-items: center;
  align-self: center;
  align-content: center;
  text-align: center;
  justify-content: center;
  justify-self: center;
  justify-items: center;
}

.client-media-card video {
  transition: transform 0.5s ease;
}

.client-media-card:hover video {
  transform: scale(1.05);
}

.client-media-card.tall {
  grid-column: span 5;
  min-height: 38rem;
}

/* CARD */
.services-media-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
}

/* IMAGE */
.services-media-card img {
  width: 100%;
  height: 100%;
  display: block;
  transition: 0.4s ease;
}

/* VIDEO */
.services-media-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: 0.4s ease;
}

/* OVERLAY */
.services-media-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

.services-media-overlay h3 {
  font-size: 1.1rem;
  color: #fff;
}

/* HOVER EFFECT (LIGHT — no lag) */
.services-media-card:hover img {
  opacity: 0;
  transform: scale(1.04);
}

.services-media-card:hover video {
  opacity: 1;
}

/*------------------------------------------------------------------*/

/* CARD */
.services-media-card-inner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

/* IMAGE */
.services-media-card-inner img {
  width: 100%;
  height: 100%;
  display: block;
  transition: 0.4s ease;
}

/* VIDEO */
.services-media-card-inner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: 0.4s ease;
}

/* OVERLAY */
.services-media-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

.services-media-overlay h3 {
  font-size: 1.1rem;
  color: #fff;
}

/* HOVER EFFECT (LIGHT — no lag) */
.services-media-card:hover img {
  opacity: 0;
  transform: scale(1.04);
}

.services-media-card:hover video {
  opacity: 1;
}

.videos-grid {
  display: flex;            /* 👈 يخليهم جنب بعض */
  gap: 20px;
  margin-top: 40px;
}

.video-card {
  flex: 1;                  /* 👈 كل فيديو ياخد نفس المساحة */
}

.video-card video {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

/* CLIENT LOGOS STRIP */
.clients-logos {
  padding: 2rem 0 3rem;
}

.clients-logos-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  opacity: 1;
}

.clients-logos-wrapper img {
  height: 100px;
  object-fit: contain;
  transition: 0.3s ease;
}

.clients-logos-wrapper img:hover {
  opacity: 1;
  transform: scale(1.1);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body:not(.loaded) {
  overflow: hidden;
}

body.loaded {
  overflow-y: auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  padding-top: 0;
}

.logo img {
  display: block;
  width: 88px;
  height: auto;
  object-fit: contain;
}

.nav-container {
  padding: .9rem 0;
}

.hero {
  padding: clamp(3.5rem, 6vh, 5rem) 0 clamp(3rem, 5vh, 4.5rem);
}

.hero-layout {
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
  gap: clamp(2rem, 4vw, 4rem);
  min-height: min(620px, calc(100svh - 5rem));
  align-items: center;
}

.hero-copy {
  max-width: 590px;
}

.hero h1 {
  max-width: 640px;
  font-size: clamp(2.55rem, 3.45vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.hero p {
  max-width: 560px;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.05vw, 1.08rem);
}

.hero-buttons {
  margin-top: 1.65rem;
}

.hero-metrics {
  margin-top: 1.7rem;
}

.metric-card {
  border-radius: 18px;
  padding: 1.05rem 1.1rem;
}

.metric-card strong {
  font-size: clamp(1.45rem, 2vw, 1.8rem);
}

.hero-visual {
  position: relative;
  width: min(100%, 620px);
  margin-left: auto;
  padding: 1.1rem 0;
  transition: transform .15s linear;
}

.main-visual {
  border-radius: 28px;
  padding: clamp(1.25rem, 2vw, 1.7rem);
}

.visual-card h2 {
  font-size: clamp(1.85rem, 2.8vw, 2.8rem);
}

.visual-card p {
  max-width: 32rem;
}

.visual-stack {
  min-height: clamp(18rem, 31vw, 22rem);
  margin-top: 1.6rem;
}

.stack-panel,
.stack-panel2 {
  overflow: hidden;
}

.stack-primary {
  height: auto;
  inset: 1.25rem 1.4rem 5rem 1.4rem;
}

.stack-secondary {
  inset: auto 2rem 1.35rem auto;
  width: min(48%, 270px);
  aspect-ratio: 247 / 177;
}

.manasa {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.floating-chip,
.stack-badge {
  z-index: 3;
  white-space: nowrap;
}

.chip-one {
  left: auto;
  right: -1rem;
  bottom: auto;
  top: 7.5rem;
}

.stack-badge {
  top: auto;
  right: auto;
  left: -1rem;
  bottom: 4.2rem;
}

@media (min-width: 1440px) {
  .hero-copy {
    max-width: 620px;
  }

  .hero h1 {
    max-width: 660px;
  }
}

@media (max-width: 1080px) {
  .hero-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-copy,
  .hero h1,
  .hero p {
    max-width: 760px;
  }

  .hero-visual {
    width: min(100%, 680px);
    margin: 0;
  }
}

@media (max-width: 820px) {
  .nav-container {
    padding: .85rem 0;
  }

  .logo img {
    width: 86px;
  }

  .hero {
    padding-top: 3.25rem;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 9vw, 3.6rem);
    line-height: 1.05;
  }

  .hero-visual {
    padding-top: .4rem;
  }

  .chip-one,
  .stack-badge {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .visual-stack {
    min-height: 15.5rem;
  }

  .stack-primary {
    inset: 1rem 1rem 4.4rem 1rem;
  }

  .stack-secondary {
    right: 1rem;
    bottom: 1rem;
    width: 56%;
  }
}

/* Shared about and portfolio page rules */
.about-hero-copy {
  text-align: center;
}

.about-hero-copy .section-copy {
  margin-inline: auto;
}

.about-profile-card {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

.about-profile-photo {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}

.about-profile-copy h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem,4vw,3rem);
  line-height: 1.05;
}

.about-profile-copy p {
  margin-top: 1rem;
  color: var(--muted);
  max-width: 42rem;
}

.about-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.about-photo-card {
  padding: 1rem;
  border-radius: 28px;
}

.about-photo-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 22px;
  display: block;
  border: 1px solid rgba(255,255,255,.08);
}

.about-photo-card p {
  margin-top: .9rem;
  text-align: center;
  color: var(--muted);
}

.about-agency-intro {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  margin: 2rem auto 0;
  padding: 2rem;
  border-radius: 32px;
  text-align: center;
}

.about-agency-intro img {
  width: min(100%, 500px);
  height: auto;
  display: block;
}

.about-agency-intro p {
  max-width: 56rem;
  margin: 0 auto;
  color: var(--muted);
  text-align: justify;
  text-align-last: center;
}

.section-heading.center {
  margin-inline: auto;
  text-align: center;
}

.client-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.client-tile {
  position: relative;
  display: block;
  min-height: 19rem;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  isolation: isolate;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.client-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.client-tile:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(8,12,26,.08),rgba(8,12,26,.78));
  z-index: 1;
}

.client-tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(5,9,24,.42);
  border-color: rgba(104,164,255,.25);
}

.client-tile:hover img {
  transform: scale(1.06);
}

.client-tile-overlay {
  position: absolute;
  inset: auto 1.2rem 1.2rem 1.2rem;
  z-index: 2;
  padding: 1.2rem;
  border-radius: 22px;
  background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.client-tile-overlay span {
  display: inline-block;
  color: #d7e1ff;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .45rem;
}

.client-tile-overlay h3 {
  font-size: 1.35rem;
  line-height: 1.15;
}

.client-page-hero {
  padding-top: 10rem;
  padding-bottom: 3rem;
}

.client-page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: 2rem;
  align-items: center;
}

.client-page-copy .section-title {
  margin-top: 1rem;
}

.client-page-copy .section-copy {
  max-width: 42rem;
  margin-top: 1rem;
  font-size: 1.02rem;
}

.client-service-list {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.6rem;
}

.client-service-list span {
  display: inline-flex;
  align-items: center;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #dfe8ff;
}

.client-back-link {
  margin-top: 1.8rem;
}

.client-page-visual {
  position: relative;
  padding: 1rem;
  border-radius: 34px;
  overflow: hidden;
}

.client-cover-image {
  width: 100%;
  display: block;
  border-radius: 26px;
  object-fit: cover;
  max-height: 540px;
}

.client-section-title {
  font-size: clamp(2rem,4vw,3.2rem);
}

.client-showcase-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
}

.client-media-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 18rem;
  background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}

.client-media-card.wide {
  grid-column: span 7;
}

.client-media-card.tall {
  grid-column: span 5;
  min-height: 38rem;
}

.client-media-card.square {
  grid-column: span 6;
}

.client-media-card img,
.client-media-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.client-media-card:after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg,transparent,rgba(8,12,26,.8));
}

.client-media-label {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  z-index: 1;
  color: #f5f7ff;
  font-size: .86rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.client-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.client-video-card {
  position: relative;
  min-height: 18rem;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
}

.client-video-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(8,12,26,.2),rgba(8,12,26,.82));
}

.client-video-content {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
}

.client-video-content span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #edf2ff;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.client-video-content h3 {
  margin-top: .9rem;
  font-size: 1.45rem;
}

.client-video-content p {
  margin-top: .55rem;
  color: #d0daf6;
}

@media (max-width: 900px) {
  .client-page-shell,
  .client-portfolio-grid,
  .client-video-grid,
  .about-profile-card,
  .about-photo-grid {
    grid-template-columns: 1fr;
  }

  .client-showcase-grid {
    grid-template-columns: 1fr;
  }

  .client-media-card.wide,
  .client-media-card.tall,
  .client-media-card.square {
    grid-column: auto;
    min-height: 18rem;
  }

  .about-profile-photo {
    max-width: 100%;
  }

  .about-agency-intro {
    padding: 1.5rem;
    gap: 1.1rem;
  }
}