/* ==========================================================================
   FAYYAZ — PORTFOLIO DESIGN SYSTEM
   Dark cinematic showreel aesthetic. Charcoal base, orange + electric blue
   accents, Sora display / Inter body. This file defines the tokens every
   later page must reuse.
   ========================================================================== */

:root{
  /* color */
  --bg:        #0A0C11;
  --bg-alt:    #101319;
  --panel:     #161A22;
  --panel-2:   #1C212B;
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);

  --orange:      #FF5A1F;
  --orange-soft: #FF8A50;
  --blue:        #2FD8FF;
  --blue-soft:   #7CE8FF;

  --text:      #F4F5F8;
  --text-dim:  #9BA2B4;
  --text-mute: #6C7386;

  /* type */
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* layout */
  --wrap: 1180px;
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;

  --ease: cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--text);
  margin:0 0 .5em;
  line-height:1.12;
  letter-spacing:-0.01em;
}

p{ margin:0 0 1em; color:var(--text-dim); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 32px;
}

@media (max-width:640px){
  .wrap{ padding:0 20px; }
}

/* respect reduced motion globally */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   AMBIENT BACKGROUND — soft drifting glow, no lines / scans
   ========================================================================== */

.bg-scene{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.35;
  will-change:transform;
}

.blob--orange{
  width:520px;height:520px;
  background:radial-gradient(circle at 30% 30%, var(--orange), transparent 70%);
  top:-120px; left:-100px;
  animation:drift1 26s ease-in-out infinite;
}

.blob--blue{
  width:600px;height:600px;
  background:radial-gradient(circle at 60% 40%, var(--blue), transparent 70%);
  bottom:-200px; right:-160px;
  animation:drift2 32s ease-in-out infinite;
}

.blob--small{
  width:320px;height:320px;
  opacity:.22;
  top:50%; left:60%;
  animation:drift3 22s ease-in-out infinite;
}

@keyframes drift1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(60px,80px) scale(1.15); }
}
@keyframes drift2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-70px,-50px) scale(1.1); }
}
@keyframes drift3{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.18; }
  50%{ transform:translate(-40px,40px) scale(1.25); opacity:.28; }
}

main, header, footer{ position:relative; z-index:1; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }

.btn--primary{
  background:linear-gradient(135deg, var(--orange), var(--orange-soft));
  color:#0A0C11;
  box-shadow:0 8px 28px -6px color-mix(in srgb, var(--orange) 55%, transparent);
}
.btn--primary:hover{ box-shadow:0 12px 34px -6px color-mix(in srgb, var(--orange) 70%, transparent); }

.btn--outline{
  border-color:var(--border-2);
  color:var(--text);
  background:transparent;
}
.btn--outline:hover{ border-color:var(--blue); color:var(--blue-soft); }

.btn--ghost{
  color:var(--text);
  padding:10px 22px;
  border:1px solid var(--border-2);
}
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange-soft); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,12,17,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 32px;
  gap:24px;
}

.brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:-0.02em;
}
.brand-dot{ color:var(--orange); }

.main-nav{
  display:flex;
  gap:32px;
  margin-left:auto;
  margin-right:24px;
}
.main-nav a{
  font-size:.95rem;
  color:var(--text-dim);
  position:relative;
  padding:4px 0;
  transition:color .25s var(--ease);
}
.main-nav a:hover, .main-nav a.is-active{ color:var(--text); }
.main-nav a.is-active::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  background:linear-gradient(90deg, var(--orange), var(--blue));
  border-radius:2px;
}

.header-cta{ flex-shrink:0; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px;height:38px;
  background:transparent;
  border:1px solid var(--border-2);
  border-radius:8px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  margin:0 8px;
  background:var(--text);
  border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}

.mobile-nav{
  display:none;
  flex-direction:column;
  padding:8px 32px 20px;
  border-top:1px solid var(--border);
}
.mobile-nav a{
  padding:12px 0;
  color:var(--text-dim);
  border-bottom:1px solid var(--border);
}
.mobile-nav a.is-active{ color:var(--orange-soft); }

@media (max-width:860px){
  .main-nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav.is-open{ display:flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
  gap:64px;
  padding:100px 32px 120px;
  min-height:calc(100vh - 76px);
}

.hero-photo{ position:relative; justify-self:center; }

.hero-photo__frame{
  position:relative;
  width:320px;
  height:384px;
  border-radius:var(--radius-l);
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--border-2);
  box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 30px 60px -20px rgba(0,0,0,.6);
}

.hero-photo__placeholder{ width:100%; height:100%; }

.hero-photo__tag{
  position:absolute;
  bottom:16px; left:16px; right:16px;
  text-align:center;
  font-size:.75rem;
  color:var(--text-mute);
  background:rgba(10,12,17,.55);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
}

.frame-ring{
  position:absolute;
  inset:-14px;
  border-radius:calc(var(--radius-l) + 14px);
  background:conic-gradient(from 0deg, var(--orange), var(--blue), var(--orange));
  filter:blur(22px);
  opacity:.5;
  z-index:-1;
  animation:ringPulse 6s ease-in-out infinite;
}

@keyframes ringPulse{
  0%,100%{ opacity:.4; transform:scale(1); }
  50%{ opacity:.65; transform:scale(1.04); }
}

/* photo reveal wipe on load */
.reveal-photo .hero-photo__frame{
  clip-path:inset(0 100% 0 0);
  animation:wipeIn 1.1s var(--ease) .3s forwards;
}
.reveal-photo .frame-ring{ opacity:0; animation:ringFadeIn 1s ease .9s forwards, ringPulse 6s ease-in-out 1.9s infinite; }

@keyframes wipeIn{ to{ clip-path:inset(0 0 0 0); } }
@keyframes ringFadeIn{ to{ opacity:.5; } }

.hero-kicker{
  font-size:.95rem;
  font-weight:600;
  color:var(--blue-soft);
  margin-bottom:14px;
}

.hero-name{
  font-size:clamp(3rem, 7vw, 5.2rem);
  font-weight:800;
}

.hero-tagline{
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight:600;
  color:var(--orange-soft);
  margin-bottom:18px;
}

.hero-sub{
  max-width:520px;
  font-size:1.05rem;
}

.hero-actions{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:10px;
}

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; text-align:center; padding-top:64px; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
}

/* ==========================================================================
   SCROLL REVEAL (shared utility)
   ========================================================================== */

.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.section-head{
  max-width:640px;
  margin:0 auto 48px;
  text-align:center;
}
.section-head h2{ font-size:clamp(1.8rem,3.4vw,2.5rem); }
.section-head p{ font-size:1.05rem; }

/* ==========================================================================
   STATS
   ========================================================================== */

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  padding:60px 32px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.stat{
  text-align:center;
  padding:28px 12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
}

.stat__number{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:800;
  background:linear-gradient(135deg, var(--orange-soft), var(--blue-soft));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.stat__label{
  display:block;
  margin-top:8px;
  color:var(--text-dim);
  font-size:.92rem;
}

@media (max-width:800px){
  .stats{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */

.services{ padding:120px 32px; }

.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.service-card{
  padding:32px 24px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:var(--border-2);
  background:var(--panel-2);
}

.service-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  border-radius:12px;
  margin-bottom:18px;
  color:var(--orange-soft);
  background:color-mix(in srgb, var(--orange) 10%, transparent);
}
.service-icon svg{ width:24px; height:24px; }

.service-card:nth-child(2) .service-icon{ color:var(--blue-soft); background:color-mix(in srgb, var(--blue) 10%, transparent); }
.service-card:nth-child(4) .service-icon{ color:var(--blue-soft); background:color-mix(in srgb, var(--blue) 10%, transparent); }

.service-card h3{ font-size:1.1rem; margin-bottom:8px; }
.service-card p{ font-size:.92rem; margin:0; }

@media (max-width:900px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .services-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   FEATURED WORK
   ========================================================================== */

.work{ padding:60px 32px 120px; }

.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.work-item{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  border-radius:var(--radius-m);
  overflow:hidden;
  border:1px solid var(--border);
}

.work-item__thumb{
  position:absolute; inset:0;
  transition:transform .6s var(--ease);
}
.thumb--1{ background:linear-gradient(135deg,#2a1a12,#FF5A1F55); }
.thumb--2{ background:linear-gradient(135deg,#0e2530,#2FD8FF44); }
.thumb--3{ background:linear-gradient(135deg,#241a10,#FF8A5055); }
.thumb--4{ background:linear-gradient(135deg,#0f1c28,#7CE8FF3a); }
.thumb--5{ background:linear-gradient(135deg,#231016,#FF5A1F40); }
.thumb--6{ background:linear-gradient(135deg,#0c1f22,#2FD8FF33); }

.work-item::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,7,10,.85), transparent 60%);
}

.work-item__play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.7);
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(10,12,17,.55);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
  opacity:0;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  z-index:2;
}

.work-item__title{
  position:absolute;
  left:18px; bottom:16px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem;
  z-index:2;
}

.work-item:hover .work-item__thumb{ transform:scale(1.08); }
.work-item:hover .work-item__play{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.work-cta{ text-align:center; margin-top:48px; }

@media (max-width:900px){
  .work-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .work-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

.testimonials{ padding:60px 32px 120px; }

.testi-slider{ max-width:720px; margin:0 auto; }

.testi-track{
  position:relative;
  min-height:180px;
}

.testi-card{
  position:absolute;
  inset:0;
  margin:0;
  padding:40px 44px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  opacity:0;
  transform:translateX(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.testi-card.is-active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
  position:relative;
}

.testi-card p{
  font-family:var(--font-display);
  font-size:1.2rem;
  color:var(--text);
  margin-bottom:18px;
}
.testi-card footer{ color:var(--blue-soft); font-size:.9rem; font-weight:600; }

.testi-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:28px;
}
.testi-dots button{
  width:9px; height:9px;
  border-radius:50%;
  border:none;
  background:var(--border-2);
  cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.testi-dots button.is-active{
  background:linear-gradient(135deg,var(--orange),var(--blue));
  transform:scale(1.3);
}

/* ==========================================================================
   BRANDS MARQUEE
   ========================================================================== */

.brands{ padding:20px 0 120px; }

.brands-label{
  text-align:center;
  color:var(--text-mute);
  font-size:.85rem;
  margin-bottom:28px;
}

.marquee{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:22px 0;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track{
  display:flex;
  gap:64px;
  width:max-content;
  animation:scrollMarquee 26s linear infinite;
}

.marquee-track span{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:.02em;
  color:var(--text-mute);
  white-space:nowrap;
}

@keyframes scrollMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */

.closing{
  text-align:center;
  padding:80px 32px 120px;
}
.closing h2{ font-size:clamp(1.9rem,4vw,2.7rem); max-width:640px; margin:0 auto .4em; }
.closing p{ max-width:480px; margin:0 auto 32px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer{
  border-top:1px solid var(--border);
  background:var(--bg-alt);
  padding-top:64px;
}

.footer-inner{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
}

.footer-brand p{ margin-top:10px; font-size:.9rem; }

.footer-links h4, .footer-social h4{
  font-family:var(--font-display);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-mute);
  margin-bottom:16px;
}

.footer-links{ display:flex; flex-direction:column; }
.footer-links a{
  color:var(--text-dim);
  padding:6px 0;
  font-size:.92rem;
  transition:color .25s var(--ease);
}
.footer-links a:hover{ color:var(--orange-soft); }

.social-icons{ display:flex; gap:12px; }
.social-icons a{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--border-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim);
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social-icons a svg{ width:18px; height:18px; }
.social-icons a:hover{ border-color:var(--blue); color:var(--blue-soft); transform:translateY(-3px); }

.footer-bottom{
  border-top:1px solid var(--border);
  padding:22px 32px;
  text-align:center;
}
.footer-bottom p{ margin:0; font-size:.85rem; color:var(--text-mute); }

@media (max-width:760px){
  .footer-inner{ grid-template-columns:1fr; text-align:center; }
  .social-icons{ justify-content:center; }
}

/* ==========================================================================
   PORTFOLIO PAGE
   ========================================================================== */

.page-header{
  padding:80px 32px 20px;
  max-width:760px;
}
.page-title{ font-size:clamp(2.4rem,5vw,3.6rem); }
.page-sub{ font-size:1.05rem; max-width:560px; }

.filter-bar{ padding:32px 32px 8px; }

.filter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.filter-tab{
  padding:12px 22px;
  border-radius:999px;
  border:1px solid var(--border-2);
  background:transparent;
  color:var(--text-dim);
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}

.filter-tab:hover{ border-color:var(--blue); color:var(--text); }

.filter-tab.is-active{
  background:linear-gradient(135deg, var(--orange), var(--blue));
  border-color:transparent;
  color:var(--bg);
  transform:translateY(-1px);
}

.project-section{ padding:40px 32px 100px; }

.project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.project-card{
  text-align:left;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  overflow:hidden;
  cursor:pointer;
  padding:0;
  color:inherit;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), opacity .45s var(--ease);
  opacity:0;
  transform:translateY(28px);
}

.project-card.is-visible{ opacity:1; transform:translateY(0); }

/* staggered reveal delays */
.project-grid.is-visible .project-card:nth-child(1){ transition-delay:.02s; }
.project-grid.is-visible .project-card:nth-child(2){ transition-delay:.09s; }
.project-grid.is-visible .project-card:nth-child(3){ transition-delay:.16s; }
.project-grid.is-visible .project-card:nth-child(4){ transition-delay:.23s; }
.project-grid.is-visible .project-card:nth-child(5){ transition-delay:.30s; }
.project-grid.is-visible .project-card:nth-child(6){ transition-delay:.37s; }
.project-grid.is-visible .project-card:nth-child(7){ transition-delay:.44s; }
.project-grid.is-visible .project-card:nth-child(8){ transition-delay:.51s; }
.project-grid.is-visible .project-card:nth-child(9){ transition-delay:.58s; }

.project-card:hover{
  transform:translateY(-6px);
  border-color:var(--border-2);
  box-shadow:0 22px 44px -22px color-mix(in srgb, var(--blue) 35%, transparent), 0 22px 44px -26px color-mix(in srgb, var(--orange) 25%, transparent);
}

.project-card.is-hiding{
  opacity:0 !important;
  transform:translateY(16px) scale(.97) !important;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.project-card.is-filtered-out{ display:none; }

.project-card__thumb{
  aspect-ratio:16/10;
  width:100%;
}
.thumb--yt1{ background:linear-gradient(135deg,#2a1a12,#FF5A1F55); }
.thumb--yt2{ background:linear-gradient(135deg,#241a10,#FF8A5055); }
.thumb--yt3{ background:linear-gradient(135deg,#231016,#FF5A1F40); }
.thumb--sh1{ background:linear-gradient(135deg,#0e2530,#2FD8FF44); }
.thumb--sh2{ background:linear-gradient(135deg,#0f1c28,#7CE8FF3a); }
.thumb--sh3{ background:linear-gradient(135deg,#0c1f22,#2FD8FF33); }
.thumb--co1{ background:linear-gradient(135deg,#1a1420,#FF5A1F33,#2FD8FF33); }
.thumb--co2{ background:linear-gradient(135deg,#141a20,#7CE8FF2e); }
.thumb--co3{ background:linear-gradient(135deg,#20161a,#FF8A502e,#2FD8FF2e); }

.project-card__body{
  padding:20px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.project-card__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.02rem;
  color:var(--text);
}
.project-card__desc{
  font-size:.88rem;
  color:var(--text-dim);
}

@media (max-width:900px){
  .project-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .project-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.lightbox.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .35s var(--ease);
}

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(6,7,10,.82);
  backdrop-filter:blur(6px);
}

.lightbox-panel{
  position:relative;
  z-index:1;
  width:min(720px, 100%);
  background:var(--panel);
  border:1px solid var(--border-2);
  border-radius:var(--radius-l);
  overflow:hidden;
  transform:translateY(24px) scale(.97);
  opacity:0;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.lightbox.is-open .lightbox-panel{
  transform:translateY(0) scale(1);
  opacity:1;
}

.lightbox-image{
  display:block;
  width:100%;
  aspect-ratio:16/9;
}

.lightbox-info{ padding:26px 30px 30px; }
.lightbox-info h3{ font-size:1.3rem; margin-bottom:8px; }
.lightbox-info p{ margin:0; }

.lightbox-close{
  position:absolute;
  top:16px; right:16px;
  z-index:2;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(10,12,17,.55);
  color:#fff;
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.lightbox-close:hover{ border-color:var(--orange); transform:rotate(90deg); }

body.lightbox-open{ overflow:hidden; }

/* ==========================================================================
   ABOUT PAGE — STORY
   ========================================================================== */

.story{ padding:20px 32px 100px; }

.story-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:56px;
  align-items:start;
}

.story-lead{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  font-weight:600;
  color:var(--text);
  line-height:1.4;
}

.story-body p{ font-size:1.02rem; }

@media (max-width:840px){
  .story-grid{ grid-template-columns:1fr; gap:24px; }
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */

.timeline-section{ padding:20px 32px 100px; }

.timeline{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding-left:36px;
}

.timeline-line{
  position:absolute;
  left:9px; top:6px; bottom:6px;
  width:2px;
  background:var(--border-2);
  border-radius:2px;
  overflow:hidden;
}
.timeline-line__fill{
  position:absolute;
  top:0; left:0; right:0;
  height:0%;
  background:linear-gradient(180deg, var(--orange), var(--blue));
  transition:height 1.1s var(--ease);
}

.timeline-item{
  position:relative;
  padding-bottom:48px;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.timeline-item.is-visible{ opacity:1; transform:translateY(0); }
.timeline-item:last-child{ padding-bottom:0; }

.timeline-dot{
  position:absolute;
  left:-36px; top:4px;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--border-2);
  transition:border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.timeline-item.is-visible .timeline-dot{
  border-color:var(--orange);
  background:linear-gradient(135deg, var(--orange), var(--blue));
  box-shadow:0 0 0 6px rgba(255,90,31,.12);
}

.timeline-tag{
  display:inline-block;
  font-size:.78rem;
  font-weight:600;
  color:var(--blue-soft);
  margin-bottom:6px;
}

.timeline-content h3{ font-size:1.15rem; margin-bottom:6px; }
.timeline-content p{ margin:0; font-size:.95rem; }

/* ==========================================================================
   SKILLS
   ========================================================================== */

.skills-section{ padding:20px 32px 100px; }

.skills-list{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.skill-label{
  display:flex;
  justify-content:space-between;
  margin-bottom:10px;
  font-weight:600;
  font-size:.95rem;
}
.skill-pct{ color:var(--text-mute); font-weight:500; }

.skill-track{
  width:100%;
  height:10px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--border);
  overflow:hidden;
}

.skill-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--orange), var(--blue));
  transition:width 1.4s var(--ease);
}

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */

.services-page{ padding:20px 32px 100px; }

.services-page-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.pricing-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:34px 28px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.services-page-grid.is-visible .pricing-card{ opacity:1; transform:translateY(0); }
.services-page-grid.is-visible .pricing-card:nth-child(1){ transition-delay:.05s; }
.services-page-grid.is-visible .pricing-card:nth-child(2){ transition-delay:.16s; }
.services-page-grid.is-visible .pricing-card:nth-child(3){ transition-delay:.27s; }
.services-page-grid.is-visible .pricing-card:nth-child(4){ transition-delay:.38s; }

.pricing-card:hover{
  transform:translateY(-8px);
  border-color:var(--border-2);
  box-shadow:0 26px 50px -24px rgba(47,216,255,.3), 0 26px 50px -28px rgba(255,90,31,.22);
}

.pricing-card--featured{
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border-color:var(--border-2);
}

.pricing-badge{
  position:absolute;
  top:-13px; left:28px;
  padding:6px 14px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  color:#0A0C11;
  background:linear-gradient(135deg, var(--orange), var(--blue));
}

.pricing-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;height:52px;
  border-radius:14px;
  margin-bottom:20px;
  color:var(--orange-soft);
  background:color-mix(in srgb, var(--orange) 10%, transparent);
}
.pricing-icon svg{ width:26px; height:26px; }

.pricing-card:nth-child(2) .pricing-icon,
.pricing-card:nth-child(4) .pricing-icon{
  color:var(--blue-soft);
  background:color-mix(in srgb, var(--blue) 10%, transparent);
}

.pricing-card h3{ font-size:1.15rem; margin-bottom:10px; }
.pricing-card > p{ font-size:.92rem; flex-grow:1; }

.pricing-tag{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:18px 0 20px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.pricing-from{ font-size:.78rem; color:var(--text-mute); }
.pricing-amount{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:800;
  color:var(--text);
}
.pricing-amount span{
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:500;
  color:var(--text-mute);
}

.pricing-cta{ width:100%; justify-content:center; }

@media (max-width:960px){
  .services-page-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .services-page-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   AWARDS PAGE
   ========================================================================== */

.awards-section{ padding:20px 32px 100px; }

.awards-list{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.award-card{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:28px;
  padding:32px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  opacity:0;
  transform:translateY(30px);
  transition:opacity .75s var(--ease), transform .75s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.award-card.is-visible{ opacity:1; transform:translateY(0); }

.award-card:hover{
  border-color:var(--border-2);
  box-shadow:0 24px 48px -26px color-mix(in srgb, var(--orange) 25%, transparent), 0 24px 48px -28px color-mix(in srgb, var(--blue) 22%, transparent);
}

.award-card__year{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:800;
  background:linear-gradient(135deg, var(--orange-soft), var(--blue-soft));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.award-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:12px;
  margin-bottom:14px;
  color:var(--orange-soft);
  background:color-mix(in srgb, var(--orange) 10%, transparent);
}
.award-card__icon svg{ width:22px; height:22px; }

.award-card:nth-child(2) .award-card__icon,
.award-card:nth-child(2) .award-card__year{ color:var(--blue-soft); }
.award-card:nth-child(2) .award-card__icon{ background:color-mix(in srgb, var(--blue) 10%, transparent); }

.award-card__body h3{ font-size:1.2rem; margin-bottom:6px; }
.award-card__meta{
  font-size:.85rem;
  color:var(--text-mute);
  margin-bottom:10px;
}
.award-card__desc{ margin:0; font-size:.95rem; }

@media (max-width:600px){
  .award-card{ grid-template-columns:1fr; gap:10px; }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-section{ padding:20px 32px 120px; }

.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:start;
}

.contact-info h2{ font-size:1.6rem; }
.contact-info > p{ font-size:.98rem; margin-bottom:32px; }

.contact-detail{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px 0;
  border-top:1px solid var(--border);
}
.contact-detail:first-of-type{ border-top:none; }

.contact-detail__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  flex-shrink:0;
  border-radius:12px;
  color:var(--blue-soft);
  background:color-mix(in srgb, var(--blue) 10%, transparent);
}
.contact-detail__icon svg{ width:20px; height:20px; }

.contact-detail__label{
  display:block;
  font-size:.78rem;
  color:var(--text-mute);
  margin-bottom:4px;
}
.contact-detail__value{
  display:block;
  font-weight:600;
  font-size:1rem;
  color:var(--text);
  transition:color .3s var(--ease);
}
a.contact-detail__value:hover{ color:var(--orange-soft); }
.contact-detail__value--muted{ font-weight:500; color:var(--text-dim); }

.contact-socials{ margin-top:28px; }
.social-icons--lg a{ width:44px; height:44px; }
.social-icons--lg{ margin-top:10px; }

.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:36px;
}

.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field--full{ grid-column:1 / -1; }

.form-field label{
  font-size:.85rem;
  font-weight:600;
  color:var(--text-dim);
}

.form-field input,
.form-field select,
.form-field textarea{
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--text);
  background:var(--bg-alt);
  border:1px solid var(--border-2);
  border-radius:var(--radius-s);
  padding:13px 16px;
  outline:none;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}

.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--text-mute); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--orange) 15%, transparent), 0 0 24px -4px color-mix(in srgb, var(--blue) 25%, transparent);
  background:var(--panel-2);
}

.form-field select{ cursor:pointer; }
.form-field textarea{ resize:vertical; min-height:120px; }

.form-submit{
  grid-column:1 / -1;
  justify-self:start;
  margin-top:6px;
}

.form-note{
  grid-column:1 / -1;
  margin:0;
  font-size:.88rem;
  color:var(--blue-soft);
  min-height:1.2em;
}

@media (max-width:840px){
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .contact-form{ grid-template-columns:1fr; padding:26px; }
}

/* Admin-managed theme overrides */
:root{--bg:var(--theme-bg,#0A0C11);--bg-alt:var(--theme-bg,#101319);--panel:var(--theme-panel,#161A22);--panel-2:var(--theme-panel,#1C212B);--text:var(--theme-text,#F4F5F8);--text-dim:var(--theme-muted,#9BA2B4);--orange:var(--theme-accent,#FF5A1F);--orange-soft:var(--theme-accent,#FF8A50);--blue:var(--theme-accent-2,#2FD8FF);--blue-soft:var(--theme-accent-2,#7CE8FF)}
body{background:var(--bg);color:var(--text)}
.hero-photo__img{display:block;width:100%;height:100%;object-fit:cover}.hero-photo__placeholder{width:100%;height:100%;background:linear-gradient(145deg,var(--panel-2),var(--bg));position:relative}.hero-photo__placeholder:after{content:'Profile photo';position:absolute;inset:0;display:grid;place-items:center;color:var(--text-dim);font-size:1rem}
.project-card__thumb[style],.work-item__thumb[style]{background-color:var(--panel-2)}


/* Final responsive polish */
html, body { max-width:100%; }
button, input, textarea, select { max-width:100%; }
@media (max-width:900px){
  .header-inner{ padding-left:20px; padding-right:20px; }
  .hero, .stats, .services, .work, .testimonials, .closing, .page-header, .filter-bar, .project-section, .story, .timeline-section, .skills-section, .services-page, .awards-section, .contact-section{ padding-left:20px; padding-right:20px; }
}
@media (max-width:560px){
  .hero{ min-height:auto; padding-top:54px; padding-bottom:72px; gap:42px; }
  .hero-photo__frame{ width:min(280px,78vw); height:min(336px,94vw); }
  .hero-name{ font-size:clamp(2.6rem,14vw,4rem); }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .stats{ gap:12px; padding-top:42px; padding-bottom:42px; }
  .stat{ padding:22px 8px; }
  .section-head{ margin-bottom:32px; }
  .testi-card{ padding:28px 22px; }
  .marquee-track{ gap:38px; }
  .page-header{ padding-top:54px; }
  .filter-tabs{ gap:8px; }
  .filter-tab{ padding:10px 16px; }
  .project-section{ padding-bottom:72px; }
  .lightbox{ padding:16px; }
  .lightbox-info{ padding:22px; }
  .award-card{ padding:24px; }
  .contact-form{ padding:22px; }
}
/* Contact/social polish */
.social-icons a,.social-icons-lg a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;line-height:1}
.social-link--instagram{font-size:22px}.social-link--youtube{font-size:16px}.social-link--linkedin{font-size:14px}.social-link--facebook{font-size:19px}.social-link--whatsapp{font-size:19px}


/* ========================================================================== 
   FAYYAZ PERSONAL SECTIONS — Urdu, video, investments, gallery, Pakistan
   ========================================================================== */
.poetry-grid,.investment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.poetry-card,.investment-card{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid var(--border);border-radius:var(--radius-m);padding:28px;box-shadow:0 18px 50px rgba(0,0,0,.16)}
.poetry-text{font-family:'Noto Nastaliq Urdu',serif!important;font-size:1.5rem;line-height:2.15;color:var(--text);margin:0 0 16px;text-align:right}
.poetry-by{color:var(--accent,var(--orange-soft));font-size:.9rem}
.video-section{padding-top:40px;padding-bottom:110px}.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border-2);background:var(--panel);box-shadow:0 24px 70px rgba(0,0,0,.25)}.video-frame iframe{width:100%;height:100%;border:0}
.investments{padding-bottom:110px}.investment-grid{grid-template-columns:repeat(2,1fr)}.investment-card{position:relative;overflow:hidden}.investment-card:after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--accent2,var(--blue)),transparent 70%);right:-90px;top:-90px;opacity:.18}.investment-label{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--text-mute)}.investment-card h3{font-size:1.35rem;margin-top:10px}.investment-card strong{display:block;font-family:var(--font-display);font-size:clamp(2rem,5vw,3.2rem);color:var(--text);margin:8px 0}.investment-card p{margin:0}
.gallery-section{padding-bottom:110px}.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.gallery-card{position:relative;margin:0;min-height:260px;border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--border);background:var(--panel)}.gallery-card:nth-child(1){grid-column:span 7;grid-row:span 2}.gallery-card:nth-child(2),.gallery-card:nth-child(3),.gallery-card:nth-child(4),.gallery-card:nth-child(5){grid-column:span 5}.gallery-card img{width:100%;height:100%;min-height:260px;object-fit:cover;transition:transform .7s var(--ease);filter:saturate(.92)}.gallery-card:hover img{transform:scale(1.04)}.gallery-card:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.85));pointer-events:none}.gallery-card figcaption{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;display:flex;flex-direction:column;gap:3px}.gallery-card strong{font-family:var(--font-display);font-size:1.05rem}.gallery-card span{font-size:.82rem;color:#d5d8df}
.pakistan-banner{padding:0 0 110px}.pakistan-banner-inner{border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));border-radius:var(--radius-l);padding:50px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 11%,transparent),color-mix(in srgb,var(--accent2) 8%,transparent));position:relative;overflow:hidden}.pakistan-banner h2{font-size:clamp(2rem,5vw,4rem);margin:4px 0 8px}.pakistan-banner p{margin-bottom:0}.flag{font-size:2rem}.pakistan-badge{font-family:'Noto Nastaliq Urdu',serif;font-size:1.35rem;padding:18px 26px;border:1px solid var(--border-2);border-radius:999px;background:rgba(255,255,255,.04);white-space:nowrap}
.whatsapp-float{position:fixed;z-index:30;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#20c463;color:white;box-shadow:0 14px 34px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.22);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}.whatsapp-float:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 18px 40px rgba(0,0,0,.45)}.whatsapp-float svg{width:29px;height:29px;fill:currentColor}
.social-icons a svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.5}.social-icons-lg a svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1.5}
@media(max-width:800px){.poetry-grid{grid-template-columns:1fr}.investment-grid{grid-template-columns:1fr}.pakistan-banner-inner{padding:34px 26px;flex-direction:column;align-items:flex-start}.gallery-card:nth-child(1){grid-column:span 12;grid-row:span 1}.gallery-card:nth-child(n+2){grid-column:span 6}.gallery-card img{min-height:230px}}
@media(max-width:560px){.poetry-text{font-size:1.2rem}.gallery-grid{gap:12px}.gallery-card:nth-child(n){grid-column:span 12}.gallery-card img{min-height:260px}.pakistan-badge{font-size:1.05rem}.whatsapp-float{width:54px;height:54px;right:16px;bottom:16px}}
.experience-section{padding:20px 32px 100px}.experience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.experience-grid .pricing-card{height:100%}
@media(max-width:700px){.experience-section{padding-left:20px;padding-right:20px}.experience-grid{grid-template-columns:1fr}}

/* ========================================================================== 
   Pakistan editorial layer — culture, inspiration, education, leadership
   ========================================================================== */
@font-face{
  font-family:'Jameel Noori Nastaleeq Web';
  src:url('https://cdn.jsdelivr.net/gh/tariq-abdullah/urdu-web-font-CDN/JameelNooriNastaleeq.woff') format('woff');
  font-display:swap;
}
.poetry-text,.pakistan-badge,[lang="ur"]{font-family:'Jameel Noori Nastaleeq Web','Noto Nastaliq Urdu',serif!important}
.poetry-grid--five{grid-template-columns:repeat(5,minmax(0,1fr));}
.poetry-card{position:relative;min-height:235px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.poetry-card:before{content:'';position:absolute;inset:auto -35px -45px auto;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,var(--orange),transparent 68%);opacity:.12}
.poetry-ornament{position:absolute;top:12px;left:18px;font-size:2.3rem;color:var(--orange-soft);opacity:.65}
.poetry-by{font-family:var(--font-display);font-weight:700}
.inspiration-section,.school-section,.pakistan-section,.admin-snapshot,.signature-section{padding-bottom:110px}
.inspiration-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;align-items:stretch}
.inspiration-media{position:relative;min-height:460px;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border);background:var(--panel);box-shadow:0 24px 70px rgba(0,0,0,.2)}
.inspiration-media img{width:100%;height:100%;min-height:460px;object-fit:cover;display:block}
.image-source-badge{position:absolute;left:18px;bottom:18px;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.62);backdrop-filter:blur(10px);font-size:.72rem;color:#fff}
.inspiration-copy{padding:40px;border:1px solid var(--border);border-radius:var(--radius-l);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));display:flex;flex-direction:column;justify-content:center}
.inspiration-copy h2{font-size:clamp(2.2rem,5vw,4rem);margin:0 0 8px}
.inspiration-copy h3{font-size:1.1rem;color:var(--orange-soft);margin:0 0 18px}
.text-link,.source-note{color:var(--orange-soft);text-decoration:none;font-weight:700}
.school-card{display:grid;grid-template-columns:110px 1fr;gap:26px;align-items:center;padding:34px;border-radius:var(--radius-l);border:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 8%,transparent),color-mix(in srgb,var(--orange) 7%,transparent))}
.school-mark{width:90px;height:90px;border-radius:26px;display:grid;place-items:center;background:linear-gradient(145deg,var(--orange),var(--blue));font-family:var(--font-display);font-weight:800;font-size:1.45rem;color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.school-card h2{margin:0 0 4px;font-size:2rem}.school-card h3{margin:0 0 10px;color:var(--text-dim)}.school-card p{margin:0;max-width:850px}
.pakistan-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.fact-card{padding:24px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--panel);min-height:170px}
.fact-card span,.leader-card>span,.culture-region{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--orange-soft);font-weight:700;margin-bottom:8px}
.fact-card strong{display:block;font-family:var(--font-display);font-size:1.15rem;margin-bottom:8px}.fact-card p{margin:0;font-size:.9rem;color:var(--text-dim)}
.culture-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.culture-card{position:relative;margin:0;min-height:360px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--panel)}
.culture-card:nth-child(1){grid-column:span 2;grid-row:span 2;min-height:736px}
.culture-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.culture-card:hover img{transform:scale(1.05)}
.culture-card:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.9));z-index:1}
.culture-card figcaption{position:absolute;z-index:2;left:20px;right:20px;bottom:18px}.culture-card strong{display:block;font-family:var(--font-display);font-size:1.2rem;margin-bottom:6px}.culture-card p{font-size:.84rem;color:#e4e7eb;margin:0 0 8px}.culture-card a{font-size:.75rem;color:#fff;text-decoration:underline}
.leaders-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.leader-card{padding:22px;border:1px solid var(--border);border-radius:var(--radius-m);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));min-height:155px}
.leader-card h3{font-size:1.02rem;margin:0 0 6px}.leader-card p{margin:0;color:var(--text-dim);font-size:.84rem}.source-note{display:inline-block;font-size:.82rem}
.signature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.signature-card{padding:30px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--panel);position:relative;overflow:hidden}.signature-card span{font-family:var(--font-display);font-size:3rem;font-weight:800;color:var(--orange);opacity:.3}.signature-card h3{margin:4px 0 8px}.signature-card p{margin:0;color:var(--text-dim)}
@media(max-width:1100px){.poetry-grid--five{grid-template-columns:repeat(3,1fr)}.pakistan-facts,.leaders-grid{grid-template-columns:repeat(2,1fr)}.culture-grid{grid-template-columns:repeat(2,1fr)}.culture-card:nth-child(1){grid-column:span 2;min-height:520px}.culture-card:nth-child(n+2){grid-column:span 1}.signature-grid{grid-template-columns:1fr}}
@media(max-width:800px){.inspiration-grid{grid-template-columns:1fr}.inspiration-media,.inspiration-media img{min-height:360px}.school-card{grid-template-columns:1fr}.school-mark{width:72px;height:72px;border-radius:20px}.poetry-grid--five{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.poetry-grid--five,.pakistan-facts,.leaders-grid,.culture-grid{grid-template-columns:1fr}.culture-card:nth-child(1),.culture-card:nth-child(n){grid-column:span 1;min-height:320px}.culture-card:nth-child(1){min-height:390px}.inspiration-copy{padding:28px}.inspiration-media,.inspiration-media img{min-height:300px}.school-card{padding:26px}.poetry-card{min-height:210px}.pakistan-section,.admin-snapshot,.inspiration-section,.school-section,.signature-section{padding-bottom:76px}}
/* Reliable web-embedded editorial images */
.poet-card{position:relative;overflow:hidden;display:grid;grid-template-rows:220px 1fr;min-width:0;border:1px solid var(--border);border-radius:var(--radius-l);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:0 20px 55px rgba(0,0,0,.16)}
.poet-media{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--panel),#080a10)}
.poet-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 22%;transition:transform .65s var(--ease)}
.poet-card:hover .poet-media img{transform:scale(1.04)}
.poet-years{position:absolute;left:14px;bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.68);color:#fff;font-size:.72rem;font-weight:700}
.poet-body{padding:20px;display:flex;flex-direction:column;min-width:0}
.poet-body h3{font-family:'Jameel Noori Nastaleeq Web','Noto Nastaliq Urdu',serif;font-size:1.55rem;margin:0 0 2px;text-align:right}
.poet-role{font-size:.95rem;color:var(--orange-soft);margin:0 0 5px}
.poet-latin{font-family:var(--font-display);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);margin:0 0 12px}
.poet-bio{font-size:.86rem;line-height:2;color:var(--text-dim);margin:0 0 12px}
.poet-works{font-size:.78rem;line-height:1.7;color:var(--text-dim);margin:0 0 14px}.poet-works strong{color:var(--text)}
.poet-verse{margin:auto 0 14px;padding:14px 15px;border-right:3px solid var(--orange);border-left:0;border-radius:12px;background:rgba(255,255,255,.035);font-family:'Jameel Noori Nastaleeq Web','Noto Nastaliq Urdu',serif;font-size:1rem;line-height:2.2;text-align:right;color:var(--text)}
.leaders-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.leader-card{padding:0;overflow:hidden;min-height:0;display:flex;flex-direction:column}
.leader-media{height:210px;background:linear-gradient(145deg,var(--panel),#080a10);overflow:hidden}
.leader-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 18%;transition:transform .65s var(--ease)}
.leader-card:hover .leader-media img{transform:scale(1.04)}
.leader-body{padding:18px}.leader-body h3{margin:0 0 6px}.leader-body>span{margin-bottom:6px}.leader-source{display:inline-block;margin-top:12px;font-size:.72rem;color:var(--orange-soft);text-decoration:none;font-weight:700}
.culture-card img,.gallery-card img,.inspiration-media img{background:linear-gradient(145deg,var(--panel),#080a10)}
@media(max-width:1100px){.poetry-grid--five{grid-template-columns:repeat(2,minmax(0,1fr))}.leaders-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.poetry-grid--five,.leaders-grid{grid-template-columns:1fr}.poet-card{grid-template-rows:250px 1fr}.leader-media{height:250px}}