/* =========================================================
   BRAND BULL MARKETING & ADVERTISING AGENCY — main stylesheet
   Built by iTech19 · Design: Homepage Design.html (Claude Design)
   ========================================================= */

/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:'Inter Tight',system-ui,sans-serif;font-size:1rem;line-height:1.65;color:#0a0a0a;background:#fafaf7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
img,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
ul{list-style:none;padding:0;margin:0;}
h1,h2,h3,h4,h5,h6{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;margin:0;color:#0a0a0a;}
p{margin:0;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

/* ===== TOKENS ===== */
:root{
  --red:#9f0a10;--red-dark:#7c080c;--red-soft:#fff1f2;--red-glow:rgba(159,10,16,0.18);
  --black:#080808;--charcoal:#111111;--graphite:#1e1e1e;
  --grey-700:#404040;--grey-500:#737373;--grey-300:#d4d4d4;--grey-100:#f5f5f4;
  --off-white:#f5f3ef;--white:#ffffff;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-in:cubic-bezier(0.4,0,1,1);
  --section-y:clamp(80px,11vw,148px);
  --container:1300px;
  --r:3px;

  /* legacy aliases used by other pages */
  --bb-red:var(--red);--bb-red-dark:var(--red-dark);--bb-red-soft:var(--red-soft);
  --bb-black:var(--black);--bb-charcoal:var(--charcoal);--bb-graphite:var(--graphite);
  --bb-grey-700:var(--grey-700);--bb-grey-500:var(--grey-500);--bb-grey-300:var(--grey-300);--bb-grey-100:var(--grey-100);
  --bb-off-white:var(--off-white);--bb-white:var(--white);
  --bb-bg:var(--white);--bb-text:#0a0a0a;--bb-text-muted:var(--grey-500);--bb-border:var(--grey-300);--bb-accent:var(--red);
  --bb-font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --bb-font-body:'Inter Tight',system-ui,sans-serif;
  --bb-section-y:var(--section-y);--bb-container:var(--container);--bb-radius:var(--r);
  --bb-ease:var(--ease);
}

/* ===== LOADER ===== */
#bb-loader{position:fixed;inset:0;z-index:9999;background:var(--black);display:flex;align-items:center;justify-content:center;transition:opacity 0.6s var(--ease),visibility 0.6s var(--ease);}
#bb-loader.hide{opacity:0;visibility:hidden;}
.loader-bar{width:160px;height:2px;background:rgba(255,255,255,0.12);border-radius:99px;overflow:hidden;}
.loader-bar__fill{height:100%;background:var(--red);border-radius:99px;animation:loaderFill 0.9s var(--ease) forwards;}
@keyframes loaderFill{from{width:0}to{width:100%}}

/* ===== CUSTOM CURSOR ===== */
.bb-cursor{position:fixed;top:0;left:0;width:10px;height:10px;background:var(--red);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:transform 0.1s,width 0.35s var(--ease),height 0.35s var(--ease),opacity 0.35s;opacity:0;}
.bb-cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:1.5px solid rgba(159,10,16,0.5);border-radius:50%;pointer-events:none;z-index:9997;transform:translate(-50%,-50%);transition:transform 0.25s var(--ease),width 0.4s var(--ease),height 0.4s var(--ease),opacity 0.4s;}
.bb-cursor.hover{width:6px;height:6px;}
.bb-cursor-ring.hover{width:54px;height:54px;border-color:var(--red);}
@media(hover:none){.bb-cursor,.bb-cursor-ring{display:none;}}

/* ===== LAYOUT ===== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(24px,5vw,56px);}
.section{padding-block:var(--section-y);}
.section--tight{padding-block:clamp(56px,7vw,96px);}
.section--off-white{background:var(--off-white);}
.section--charcoal{background:var(--charcoal);color:var(--white);}
.section--charcoal h1,.section--charcoal h2,.section--charcoal h3{color:var(--white);}

/* ===== TYPE ===== */
.eyebrow{font-family:'Inter Tight',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:'';display:inline-block;width:20px;height:1.5px;background:var(--red);flex-shrink:0;}
.eyebrow--light{color:rgba(255,255,255,0.6);}
.eyebrow--light::before{background:rgba(255,255,255,0.4);}
.h1{font-size:clamp(2.4rem,6.5vw,5.25rem);font-weight:900;line-height:1.02;letter-spacing:-0.03em;}
.h2{font-size:clamp(1.875rem,4.2vw,3.5rem);font-weight:800;line-height:1.08;letter-spacing:-0.025em;}
.h3{font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:700;line-height:1.2;}
.lead{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.65;color:var(--grey-700);}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;font-family:'Bricolage Grotesque',sans-serif;font-size:0.9375rem;font-weight:700;letter-spacing:0.01em;border-radius:var(--r);border:1.5px solid transparent;transition:transform 0.3s var(--ease),background 0.3s var(--ease),color 0.3s var(--ease),border-color 0.3s var(--ease),box-shadow 0.3s var(--ease);white-space:nowrap;cursor:pointer;position:relative;overflow:hidden;}
.btn:hover{transform:translateY(-2px);}
.btn::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.18),transparent);transition:left 0.8s var(--ease);}
.btn:hover::after{left:120%;}
.btn--primary{background:var(--red);color:var(--white);border-color:var(--red);}
.btn--primary:hover{background:var(--red-dark);border-color:var(--red-dark);box-shadow:0 12px 32px rgba(159,10,16,0.35);}
.btn--outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.5);}
.btn--outline-white:hover{background:var(--white);color:var(--black);border-color:var(--white);}
.btn--white{background:var(--white);color:var(--red);border-color:var(--white);}
.btn--white:hover{background:transparent;color:var(--white);border-color:var(--white);}
.btn--ghost{background:transparent;color:var(--black);border-color:var(--black);}
.btn--ghost:hover{background:var(--black);color:var(--white);}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}

.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:0.9375rem;color:var(--black);border-bottom:1.5px solid var(--grey-300);padding-bottom:3px;transition:color 0.25s var(--ease),border-color 0.25s var(--ease);}
.text-link .arrow{color:var(--red);transition:transform 0.3s var(--ease);}
.text-link:hover{color:var(--red);border-color:var(--red);}
.text-link:hover .arrow{transform:translateX(5px);}

/* ===== HEADER — transparent over hero, frosted-dark on scroll ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:200;transition:background 0.5s var(--ease),border-color 0.5s var(--ease),box-shadow 0.5s var(--ease);border-bottom:1px solid transparent;}
.site-header.is-scrolled{background:rgba(8,8,8,0.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom-color:rgba(255,255,255,0.07);box-shadow:0 8px 40px rgba(0,0,0,0.4);}
/* On interior pages (no dark hero), header stays glass-dark always */
body.has-light-hero .site-header{background:rgba(8,8,8,0.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom-color:rgba(255,255,255,0.07);}
.header-container{display:flex;align-items:stretch;justify-content:space-between;height:88px;padding:0 !important;max-width:none !important;width:100%;}
@media(min-width:960px){.header-container{height:96px;}}
.site-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--red);padding:8px 28px;transition:background 0.3s var(--ease);}
.site-logo:hover{background:var(--red-dark);}
.site-logo img{display:block;height:100%;max-height:68px;width:auto;object-fit:contain;}
@media(min-width:960px){.site-logo{padding:10px 40px;}.site-logo img{max-height:76px;}}

.header-right{display:flex;align-items:center;gap:32px;padding-right:clamp(24px,5vw,56px);padding-left:clamp(20px,3vw,40px);flex:1;justify-content:flex-end;}
.main-navigation{display:none;}
.nav-menu{display:flex;align-items:center;gap:36px;}
.nav-menu a{position:relative;font-weight:600;font-size:0.875rem;letter-spacing:0.03em;color:rgba(255,255,255,0.85);padding:8px 0;transition:color 0.25s var(--ease);}
.nav-menu a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 0.35s var(--ease);}
.nav-menu a:hover{color:var(--white);}
.nav-menu a:hover::after,.nav-menu a.is-active::after{transform:scaleX(1);}
.nav-menu a.is-active{color:var(--white);}
.header-cta{display:none;}
.menu-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;align-items:center;}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:transform 0.3s var(--ease),opacity 0.2s var(--ease);}
@media(min-width:960px){.main-navigation{display:block;}.header-cta{display:inline-flex;}.menu-toggle{display:none;}}

/* Mobile menu overlay */
.mobile-menu{position:fixed;inset:0;background-color:#080808;background-image:linear-gradient(160deg,#080808 0%,#0f0306 100%);z-index:300;padding:28px;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.4s var(--ease);visibility:hidden;overflow-y:auto;}
.mobile-menu.is-open{transform:translateX(0);visibility:visible;}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:56px;}
.mobile-menu .site-logo{background:var(--red);padding:10px 22px;}
.mobile-menu .site-logo img{max-height:56px;}
.mobile-menu-close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:28px;color:var(--white);line-height:1;}
.mobile-menu-list{display:flex;flex-direction:column;gap:4px;}
.mobile-menu-list a{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(2rem,8vw,3rem);font-weight:900;color:var(--white);padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.08);letter-spacing:-0.02em;transition:color 0.25s var(--ease);}
.mobile-menu-list a:hover{color:var(--red);}
.mobile-menu-cta{margin-top:auto;}
.mobile-menu-cta .btn{width:100%;}
body.is-menu-open{overflow:hidden;}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;color:var(--white);overflow:hidden;padding-bottom:0;}
.hero__bg{position:absolute;inset:0;z-index:0;}
/* Mobile: darker blanket for text legibility. Desktop: strong left vignette, image dominates right */
.hero__bg-img{position:absolute;inset:0;background-image:
  linear-gradient(180deg,rgba(8,8,8,0.78) 0%,rgba(8,8,8,0.55) 40%,rgba(8,8,8,0.8) 100%),
  url('../images/hero-lahore-night-mobile.jpeg');
background-color:#0f0306;background-size:cover;background-position:center;animation:heroZoom 18s ease-out forwards;}
@media(min-width:768px){
  .hero__bg-img{background-image:
    linear-gradient(90deg,rgba(8,8,8,0.92) 0%,rgba(8,8,8,0.78) 28%,rgba(8,8,8,0.45) 55%,rgba(60,4,6,0.45) 100%),
    url('../images/hero-lahore-night.jpeg');}
}
@keyframes heroZoom{from{transform:scale(1.06);}to{transform:scale(1);}}
.hero__grain{position:absolute;inset:0;opacity:0.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");background-size:200px;pointer-events:none;}
.hero__ghost{position:absolute;bottom:-0.05em;right:-0.03em;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(120px,20vw,280px);font-weight:900;line-height:1;letter-spacing:-0.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.06);pointer-events:none;user-select:none;white-space:nowrap;}
.hero__body{position:relative;z-index:1;width:100%;padding-top:clamp(130px,16vw,180px);padding-bottom:0;}
.hero__content{padding-inline:clamp(24px,5vw,56px);max-width:1300px;padding-bottom:clamp(60px,8vw,100px);}
.hero .eyebrow{display:none;color:rgba(255,255,255,0.55);margin-bottom:28px;opacity:0;animation:bbUp 0.8s var(--ease) 1.1s forwards;}
@media(min-width:768px){.hero .eyebrow{display:inline-flex;}}
.hero__headline{margin-bottom:32px;color:var(--white);}
.hero__line{display:block;overflow:hidden;}
.hero__word{display:inline-block;clip-path:inset(0 0 100% 0);animation:wordUp 0.9s var(--ease) forwards;}
.hero__line:nth-child(1) .hero__word{animation-delay:1.15s;}
.hero__line:nth-child(2) .hero__word{animation-delay:1.32s;}
.hero__line:nth-child(3) .hero__word{animation-delay:1.49s;}
@keyframes wordUp{to{clip-path:inset(0 0 0% 0);}}
.hero__line .hero__word--red{color:var(--red);}
.hero__sub{max-width:560px;color:rgba(255,255,255,0.7);font-size:clamp(0.9375rem,1.3vw,1.0625rem);line-height:1.75;opacity:0;animation:bbUp 0.8s var(--ease) 1.75s forwards;}
.hero__core{margin-top:28px;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.25rem,2.4vw,1.875rem);font-weight:800;letter-spacing:-0.02em;line-height:1.2;color:var(--white);opacity:0;animation:bbUp 0.8s var(--ease) 1.85s forwards;}
.hero__core span{display:inline-block;color:var(--red);}
.hero__cta{opacity:0;animation:bbUp 0.8s var(--ease) 1.95s forwards;}
@keyframes bbUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.hero__scroll-hint{display:none;}
@media(min-width:960px){.hero__scroll-hint{display:flex;align-items:center;gap:10px;position:absolute;bottom:36px;right:clamp(24px,5vw,56px);font-size:0.75rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.35);z-index:2;}
.hero__scroll-hint::before{content:'';width:36px;height:1px;background:rgba(255,255,255,0.3);}}
.hero__stats-bar{position:relative;z-index:1;background:rgba(8,8,8,0.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,0.07);display:grid;grid-template-columns:repeat(3,1fr);}
.hero__stat{padding:clamp(20px,3vw,32px) clamp(24px,4vw,48px);border-right:1px solid rgba(255,255,255,0.07);text-align:center;}
.hero__stat:last-child{border-right:none;}
.hero__stat-num{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:900;color:var(--white);letter-spacing:-0.025em;line-height:1;}
.hero__stat-num span{color:var(--red);}
.hero__stat-label{font-size:0.75rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-top:6px;}

/* ===== PAGE HERO (interior pages) ===== */
.page-hero{position:relative;background:var(--black);color:var(--white);padding-top:clamp(140px,16vw,200px);padding-bottom:clamp(72px,10vw,120px);overflow:hidden;}
.page-hero::before{content:'';position:absolute;inset:0;background:
  linear-gradient(160deg,rgba(8,8,8,0.85) 0%,rgba(8,8,8,0.6) 60%,rgba(100,6,10,0.5) 100%),
  repeating-linear-gradient(45deg,rgba(255,255,255,0.012) 0px,rgba(255,255,255,0.012) 1px,transparent 1px,transparent 48px);
background-size:cover,96px 96px;pointer-events:none;}
.page-hero__inner{position:relative;z-index:1;max-width:900px;}
.page-hero .eyebrow{color:rgba(255,255,255,0.55);margin-bottom:24px;}
.page-hero h1{color:var(--white);margin-bottom:24px;}
.page-hero p{color:rgba(255,255,255,0.7);max-width:680px;}

/* ===== MARQUEE ===== */
.marquee-strip{background:var(--red);padding:14px 0;overflow:hidden;position:relative;}
.marquee-track{display:flex;gap:0;animation:marqueeRun 18s linear infinite;}
@media(min-width:768px){.marquee-track{animation-duration:28s;}}
.marquee-track:hover{animation-play-state:paused;}
.marquee-item{display:inline-flex;align-items:center;gap:32px;padding:0 32px;white-space:nowrap;font-family:'Bricolage Grotesque',sans-serif;font-size:0.9375rem;font-weight:700;color:rgba(255,255,255,0.9);letter-spacing:0.04em;text-transform:uppercase;}
.marquee-item::after{content:'✦';color:rgba(255,255,255,0.45);font-size:0.625rem;}
@keyframes marqueeRun{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===== PILLARS ===== */
.pillars{display:grid;grid-template-columns:1fr;}
@media(min-width:900px){.pillars{grid-template-columns:1fr 1fr;}}
.pillar{position:relative;padding:clamp(56px,8vw,96px) clamp(32px,5vw,72px);color:var(--white);overflow:hidden;transition:background 0.4s var(--ease);}
.pillar__bg-num{position:absolute;bottom:-0.1em;right:-0.05em;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(120px,18vw,220px);font-weight:900;line-height:1;letter-spacing:-0.05em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.06);pointer-events:none;user-select:none;transition:transform 0.6s var(--ease);}
.pillar:hover .pillar__bg-num{transform:scale(1.04) translateX(6px);}
.pillar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,0.2);transform:scaleX(0);transform-origin:left;transition:transform 0.6s var(--ease);}
.pillar:hover::after{transform:scaleX(1);}
/* Pillars: photo shows through, color tint preserves brand identity. multiply-ish mood. */
.pillar--red{background:
  linear-gradient(135deg,rgba(159,10,16,0.78) 0%,rgba(124,8,12,0.7) 100%),
  url('../images/services-outdoor-mobile.jpeg') center/cover no-repeat,
  var(--red);}
.pillar--red:hover{background:
  linear-gradient(135deg,rgba(159,10,16,0.85) 0%,rgba(124,8,12,0.78) 100%),
  url('../images/services-outdoor-mobile.jpeg') center/cover no-repeat,
  var(--red-dark);}
.pillar--black{background:
  linear-gradient(135deg,rgba(8,8,8,0.78) 0%,rgba(8,8,8,0.68) 100%),
  url('../images/services-marketing-mobile.jpeg') center/cover no-repeat,
  var(--black);}
.pillar--black:hover{background:
  linear-gradient(135deg,rgba(8,8,8,0.85) 0%,rgba(8,8,8,0.75) 100%),
  url('../images/services-marketing-mobile.jpeg') center/cover no-repeat,
  #111;}
@media(min-width:768px){
  .pillar--red{background:
    linear-gradient(135deg,rgba(159,10,16,0.78) 0%,rgba(124,8,12,0.7) 100%),
    url('../images/services-outdoor.jpeg') center/cover no-repeat,
    var(--red);}
  .pillar--red:hover{background:
    linear-gradient(135deg,rgba(159,10,16,0.85) 0%,rgba(124,8,12,0.78) 100%),
    url('../images/services-outdoor.jpeg') center/cover no-repeat,
    var(--red-dark);}
  .pillar--black{background:
    linear-gradient(135deg,rgba(8,8,8,0.78) 0%,rgba(8,8,8,0.68) 100%),
    url('../images/services-marketing.jpeg') center/cover no-repeat,
    var(--black);}
  .pillar--black:hover{background:
    linear-gradient(135deg,rgba(8,8,8,0.85) 0%,rgba(8,8,8,0.75) 100%),
    url('../images/services-marketing.jpeg') center/cover no-repeat,
    #111;}
}
.pillar>*{position:relative;z-index:1;}
.pillar .eyebrow{color:rgba(255,255,255,0.5);margin-bottom:20px;}
.pillar .eyebrow::before{background:rgba(255,255,255,0.3);}
.pillar h2{color:var(--white);margin-bottom:14px;font-size:clamp(2rem,4vw,3rem);}
.pillar__tagline{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1rem,1.8vw,1.375rem);font-weight:700;color:rgba(255,255,255,0.6);margin-bottom:28px;letter-spacing:-0.01em;}
.pillar__body{color:rgba(255,255,255,0.78);margin-bottom:20px;max-width:520px;font-size:0.9375rem;line-height:1.75;}
.pillar__body:last-of-type{margin-bottom:32px;}
.pillar__support{color:rgba(255,255,255,0.95);font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(0.9375rem,1.3vw,1.0625rem);letter-spacing:-0.005em;line-height:1.45;margin-bottom:24px;max-width:520px;border-left:2px solid rgba(255,255,255,0.35);padding-left:14px;}
.pillar__subhead{color:rgba(255,255,255,0.95);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1rem,1.4vw,1.125rem);letter-spacing:0.06em;text-transform:uppercase;margin:8px 0 14px;}
.pillar__list{display:flex;flex-direction:column;gap:0;margin-bottom:36px;}
.pillar__list li{position:relative;padding:12px 0;font-weight:500;color:rgba(255,255,255,0.9);font-size:0.9375rem;border-bottom:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;gap:14px;}
.pillar__list li::before{content:'';width:20px;height:1.5px;background:rgba(255,255,255,0.4);flex-shrink:0;}
.pillar__footer{margin-top:28px;font-style:italic;color:rgba(255,255,255,0.5);font-size:0.875rem;}

/* ===== ABOUT SNIPPET ===== */
.about-snippet{text-align:center;max-width:960px;margin-inline:auto;}
.about-snippet .eyebrow{justify-content:center;margin-bottom:20px;}
.about-snippet h2{margin-bottom:32px;}
.about-snippet p{color:var(--grey-700);margin-bottom:20px;font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.8;}
.about-snippet__power{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.625rem,3.5vw,2.625rem);font-weight:900;line-height:1.15;letter-spacing:-0.025em;margin:44px 0 36px;}
.about-snippet__power span{position:relative;display:inline-block;}
.about-snippet__power span::after{content:'';position:absolute;left:0;right:0;bottom:0.04em;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease);}
.is-visible .about-snippet__power span::after{transform:scaleX(1);}

/* ===== TWO COL ===== */
.two-col{display:grid;grid-template-columns:1fr;gap:clamp(48px,6vw,88px);align-items:start;}
@media(min-width:960px){.two-col{grid-template-columns:2fr 3fr;}.two-col--even{grid-template-columns:1fr 1fr;}}
.two-col__text h2{margin-bottom:20px;}
.two-col__text .lead{margin-bottom:20px;}
.two-col__text p{color:var(--grey-700);margin-bottom:16px;}
.two-col__media{aspect-ratio:4/3;background-image:url('../images/about-lahore-billboards-mobile.jpeg');background-size:cover;background-position:center;border-radius:var(--r);transition:transform 0.8s var(--ease);}
.two-col__media:hover{transform:scale(1.02);}
@media(min-width:768px){
  .two-col__media{background-image:url('../images/about-lahore-billboards.jpeg');}
}

/* ===== CARDS (icon) ===== */
.card-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:16px;}
@media(min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.card-grid--3{grid-template-columns:repeat(3,1fr);}}
.card-grid--5{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(min-width:768px){.card-grid--5{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1100px){.card-grid--5{grid-template-columns:repeat(5,1fr);}}

.icon-card{background:var(--white);border:1px solid rgba(0,0,0,0.07);padding:28px;border-radius:6px;transition:transform 0.35s var(--ease),box-shadow 0.35s var(--ease),border-color 0.35s var(--ease);}
.icon-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,0.08);border-color:var(--red);}
.icon-card__icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--red);margin-bottom:16px;}
.icon-card__icon svg{width:28px;height:28px;transition:transform 0.35s var(--ease);}
.icon-card:hover .icon-card__icon svg{transform:scale(1.15) rotate(-4deg);}
.icon-card h3{font-size:1rem;font-weight:700;margin-bottom:8px;}
.icon-card p{font-size:0.875rem;color:var(--grey-500);line-height:1.6;}

.section-closing{text-align:center;margin-top:56px;font-style:italic;color:var(--grey-500);font-size:1rem;}
.section-closing--bold{font-style:normal;font-weight:600;color:var(--black);font-size:clamp(1rem,1.5vw,1.25rem);}

/* ===== PROCESS ===== */
.process{display:grid;grid-template-columns:1fr;gap:0;margin-top:64px;}
@media(min-width:1024px){.process{grid-template-columns:repeat(5,1fr);}}
.process-step{position:relative;padding:36px 28px;border-top:2px solid var(--grey-300);transition:border-color 0.35s var(--ease),background 0.35s var(--ease);}
@media(min-width:1024px){.process-step{padding:36px 24px;}}
.process-step:hover{border-top-color:var(--red);background:var(--off-white);}
.process-step__num{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(3rem,5vw,4.5rem);font-weight:900;line-height:1;color:var(--red);margin-bottom:20px;letter-spacing:-0.04em;opacity:0.9;transition:transform 0.35s var(--ease);}
.process-step:hover .process-step__num{transform:translateX(5px);}
.process-step h3{font-size:1rem;font-weight:700;margin-bottom:10px;line-height:1.3;}
.process-step p{font-size:0.875rem;color:var(--grey-500);line-height:1.65;}

/* ===== CLIENTS ===== */
.clients-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:56px;}
@media(min-width:900px){.clients-grid{grid-template-columns:1fr 1fr;}}
.client-card{padding:44px;background:var(--graphite);border:1px solid rgba(255,255,255,0.06);border-radius:6px;position:relative;overflow:hidden;transition:transform 0.35s var(--ease),border-color 0.35s var(--ease);}
.client-card:hover{transform:translateY(-5px);border-color:rgba(159,10,16,0.5);}
.client-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(159,10,16,0.15),transparent 60%);opacity:0;transition:opacity 0.5s var(--ease);pointer-events:none;}
.client-card:hover::before{opacity:1;}
.client-card__label{font-size:0.6875rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--red);margin-bottom:14px;position:relative;z-index:1;}
.client-card__name{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.625rem,2.8vw,2.125rem);font-weight:900;line-height:1.1;color:var(--white);margin-bottom:20px;letter-spacing:-0.02em;position:relative;z-index:1;}
.client-card p{color:rgba(255,255,255,0.7);margin-bottom:18px;font-size:0.9375rem;line-height:1.7;position:relative;z-index:1;}
.client-card p:last-of-type{margin-bottom:28px;}
.client-card__list{position:relative;z-index:1;margin:0 0 20px;padding:0 0 0 4px;display:flex;flex-direction:column;gap:8px;}
.client-card__list li{color:rgba(255,255,255,0.85);font-size:0.9375rem;line-height:1.5;display:flex;align-items:center;gap:12px;}
.client-card__list li::before{content:'';width:14px;height:1.5px;background:var(--red);flex-shrink:0;}
.client-card__tag{display:inline-flex;align-items:center;padding:7px 16px;border:1px solid rgba(159,10,16,0.6);color:rgba(255,255,255,0.7);border-radius:999px;font-size:0.75rem;font-weight:600;letter-spacing:0.04em;position:relative;z-index:1;}

/* ===== DATA BLOCK — dark cinematic band ===== */
.data-section{position:relative;background:var(--black);color:var(--white);padding-block:clamp(96px,12vw,160px);overflow:hidden;}
.data-section::before{content:'';position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,8,8,0.85) 0%,rgba(8,8,8,0.6) 50%,rgba(8,8,8,0.5) 100%),
  url('../images/data-visualization-mobile.jpeg') center bottom/cover no-repeat;
  pointer-events:none;}
@media(min-width:768px){
  .data-section::before{background:
    linear-gradient(90deg,rgba(8,8,8,0.95) 0%,rgba(8,8,8,0.7) 50%,rgba(8,8,8,0.25) 100%),
    url('../images/data-visualization.jpeg') right bottom/cover no-repeat;}
}
.data-section .container{position:relative;z-index:1;}
.data-block{max-width:640px;}
.data-block .eyebrow{color:rgba(255,255,255,0.55);margin-bottom:20px;}
.data-block .eyebrow::before{background:rgba(255,255,255,0.4);}
.data-block h2{color:var(--white);margin-bottom:24px;}
.data-block p{color:rgba(255,255,255,0.72);margin-bottom:28px;font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.8;}
.data-block__pull{font-style:italic;color:var(--red);font-weight:600;font-size:clamp(1.0625rem,1.5vw,1.25rem);display:inline-block;border-left:3px solid var(--red);padding-left:18px;}

/* ===== CTA BLOCK — clean solid red ===== */
.cta-block{background:var(--red);color:var(--white);text-align:center;padding-block:clamp(80px,11vw,128px);}
.cta-block h2{color:var(--white);font-size:clamp(2rem,5vw,3.75rem);margin-bottom:20px;}
.cta-block p{max-width:560px;margin-inline:auto;color:rgba(255,255,255,0.85);margin-bottom:36px;}
.cta-block .btn-row{justify-content:center;margin-top:0;}

/* ===== SERVICES PAGE PILLARS ===== */
.pillar-section{padding-bottom:var(--section-y);position:relative;}
.pillar-section--alt{background:var(--off-white);}
.pillar-section>.container{padding-top:clamp(48px,6vw,80px);}
.pillar-section__head{max-width:880px;margin-bottom:56px;position:relative;z-index:1;}
.pillar-section__head .eyebrow{margin-bottom:16px;}
.pillar-section__head h2{margin-bottom:12px;}
.pillar-section__head .tagline{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:700;color:var(--red);margin-bottom:20px;}
.pillar-section__head p{color:var(--grey-700);max-width:760px;margin-bottom:14px;}
.pillar-section__head p:last-child{margin-bottom:0;}
.pillar-section__support{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--black);font-size:clamp(1rem,1.3vw,1.125rem);letter-spacing:-0.005em;line-height:1.45;border-left:3px solid var(--red);padding-left:16px;margin-bottom:22px !important;max-width:760px;}
.pillar-section__subhead{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.125rem,1.6vw,1.375rem);letter-spacing:0.04em;text-transform:uppercase;color:var(--black);margin:0 0 28px;display:flex;align-items:center;gap:14px;}
.pillar-section__subhead::before{content:'';width:28px;height:2px;background:var(--red);flex-shrink:0;}

/* Cinematic banner strip above each services pillar */
.pillar-banner{position:relative;height:clamp(220px,30vw,380px);margin-bottom:clamp(56px,7vw,96px);overflow:hidden;background:var(--black);}
.pillar-banner::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;animation:heroZoom 22s ease-out forwards;}
.pillar-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,0.35) 0%,rgba(8,8,8,0.85) 100%);}
/* background-position tuned so the BrandBull billboard/logo in each shot stays in frame */
.pillar-banner--outdoor::before{background-image:url('../images/services-outdoor-mobile.jpeg');background-position:center 38%;}
.pillar-banner--marketing::before{background-image:url('../images/services-marketing-mobile.jpeg');background-position:center center;}
@media(min-width:768px){
  .pillar-banner--outdoor::before{background-image:url('../images/services-outdoor.jpeg');background-position:center 40%;}
  .pillar-banner--marketing::before{background-image:url('../images/services-marketing.jpeg');background-position:center 45%;}
}
.pillar-banner__label{position:absolute;left:clamp(24px,5vw,56px);bottom:clamp(24px,4vw,40px);z-index:1;color:var(--white);font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;letter-spacing:-0.03em;line-height:1;text-transform:uppercase;}
.pillar-banner__label em{font-style:normal;color:var(--red);}

/* ===== ABOUT PAGE VALUES / CHECKLIST ===== */
.values-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px;}
@media(min-width:900px){.values-grid{grid-template-columns:repeat(3,1fr);}}
.value-card{padding:32px;background:var(--white);border-top:3px solid var(--red);border-left:1px solid var(--grey-300);border-right:1px solid var(--grey-300);border-bottom:1px solid var(--grey-300);}
.value-card__icon{width:40px;height:40px;color:var(--red);margin-bottom:20px;}
.value-card h3{margin-bottom:10px;font-size:1.25rem;}
.value-card p{color:var(--grey-500);font-size:0.975rem;}

.checklist{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px;}
@media(min-width:768px){.checklist{grid-template-columns:1fr 1fr;gap:18px 48px;}}
.checklist li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--grey-300);font-weight:500;}
.checklist li svg{flex-shrink:0;width:22px;height:22px;color:var(--red);margin-top:3px;}

.positioning{background:var(--off-white);text-align:center;padding-block:clamp(72px,10vw,140px);}
.positioning__display{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(2rem,6vw,4.5rem);font-weight:900;line-height:1.05;letter-spacing:-0.025em;max-width:1100px;margin-inline:auto;}
.positioning__display em{font-style:normal;color:var(--red);position:relative;display:inline-block;}
.positioning__display em::after{content:'';position:absolute;left:0;right:0;bottom:0.05em;height:0.12em;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 0.8s var(--ease);}
.is-visible .positioning__display em::after{transform:scaleX(1);}
.positioning__sub{margin-top:24px;color:var(--grey-500);font-size:1.0625rem;}

/* ===== CONTACT PAGE ===== */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,72px);align-items:start;}
@media(min-width:960px){.contact-grid{grid-template-columns:5fr 7fr;}}
.contact-info__list{display:flex;flex-direction:column;gap:24px;}
.contact-info__item{display:flex;gap:18px;align-items:flex-start;}
.contact-info__icon{flex-shrink:0;width:48px;height:48px;background:var(--red-soft);color:var(--red);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);}
.contact-info__icon svg{width:22px;height:22px;}
.contact-info__label{font-size:0.75rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey-500);margin-bottom:4px;}
.contact-info__value{font-weight:600;font-size:1.0625rem;color:var(--black);line-height:1.4;}
.contact-info__value a:hover{color:var(--red);}
.contact-socials{margin-top:32px;display:flex;gap:12px;}
.contact-socials a{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--grey-300);color:var(--black);border-radius:var(--r);transition:background 0.25s var(--ease),color 0.25s var(--ease),border-color 0.25s var(--ease);}
.contact-socials a:hover{background:var(--red);color:var(--white);border-color:var(--red);}
.contact-socials svg{width:18px;height:18px;}

.contact-form{background:var(--white);padding:clamp(28px,4vw,48px);border:1px solid var(--grey-300);border-radius:var(--r);box-shadow:0 4px 28px rgba(0,0,0,0.04);}
.contact-form h2{font-size:clamp(1.5rem,2.4vw,1.875rem);margin-bottom:6px;}
.contact-form__sub{color:var(--grey-500);margin-bottom:28px;font-size:0.9375rem;}
.form-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr;}}
.form-group--full{grid-column:1 / -1;}
.form-group label{display:block;font-size:0.8125rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--grey-700);margin-bottom:8px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:13px 14px;font-family:inherit;font-size:0.9375rem;color:var(--black);background:var(--white);border:1.5px solid var(--grey-300);border-radius:var(--r);transition:border-color 0.2s var(--ease),box-shadow 0.2s var(--ease);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(159,10,16,0.12);}
.form-group textarea{min-height:140px;resize:vertical;}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px;}
.form-submit{margin-top:8px;}
.form-submit .btn{width:100%;}
@media(min-width:640px){.form-submit .btn{width:auto;min-width:200px;}}

.map-section iframe{display:block;width:100%;height:320px;border:0;}
@media(min-width:900px){.map-section iframe{height:420px;}}

.whatsapp-band{background:var(--charcoal);color:var(--white);text-align:center;padding-block:40px;}
.whatsapp-band a{display:inline-flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.125rem,2vw,1.5rem);font-weight:700;color:var(--white);border-bottom:2px solid var(--red);padding-bottom:6px;}
.whatsapp-band a:hover{color:var(--red);}

/* ===== FOOTER ===== */
.site-footer{background:#000;color:rgba(255,255,255,0.7);padding-top:clamp(72px,9vw,112px);position:relative;}
.footer-top-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(159,10,16,0.8) 20%,rgba(159,10,16,0.8) 80%,transparent);margin-bottom:0;position:absolute;top:0;left:0;right:0;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:48px;}
@media(min-width:640px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.footer-grid{grid-template-columns:2.2fr 1fr 1fr 1.4fr;gap:56px;}}
.footer-brand__logo{display:inline-flex;align-items:center;justify-content:center;background:var(--red);padding:18px 36px;margin-bottom:28px;transition:background 0.3s var(--ease);}
.footer-brand__logo:hover{background:var(--red-dark);}
.footer-brand__logo img{display:block;height:88px;width:auto;object-fit:contain;}
.footer-brand p{max-width:320px;font-size:0.9375rem;line-height:1.7;margin-bottom:28px;color:rgba(255,255,255,0.5);}
.footer-socials{display:flex;gap:10px;}
.footer-socials a{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.6);border-radius:4px;transition:background 0.25s var(--ease),color 0.25s var(--ease),border-color 0.25s var(--ease);}
.footer-socials a:hover{background:var(--red);color:var(--white);border-color:var(--red);}
.footer-socials svg{width:16px;height:16px;}
.footer-col h4{font-family:'Bricolage Grotesque',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--white);margin-bottom:24px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a,.footer-col li{font-size:0.9375rem;color:rgba(255,255,255,0.5);transition:color 0.2s var(--ease);}
.footer-col a:hover{color:var(--red);}
.footer-contact li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:0.875rem;}
.footer-contact svg{width:15px;height:15px;color:var(--red);flex-shrink:0;margin-top:4px;}
.footer-contact a{color:rgba(255,255,255,0.5);}
.footer-contact a:hover{color:var(--red);}
.footer-bottom{margin-top:clamp(56px,6vw,80px);padding-block:24px;border-top:1px solid rgba(255,255,255,0.07);display:flex;flex-direction:column;gap:10px;justify-content:space-between;align-items:center;font-size:0.8125rem;color:rgba(255,255,255,0.3);text-align:center;}
@media(min-width:768px){.footer-bottom{flex-direction:row;text-align:left;}}

/* ===== WA FLOAT ===== */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;color:var(--white);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(37,211,102,0.4);animation:waPulse 2.4s infinite;transition:transform 0.25s var(--ease);}
.wa-float:hover{transform:scale(1.1);}
.wa-float svg{width:30px;height:30px;}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,0.5);}70%{box-shadow:0 0 0 18px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}
.wa-float__tooltip{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);background:var(--black);color:var(--white);padding:8px 14px;font-size:0.8125rem;font-weight:600;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s var(--ease);}
@media(min-width:960px){.wa-float:hover .wa-float__tooltip{opacity:1;}}

/* ===== SCROLL ANIMATIONS ===== */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.85s var(--ease),transform 0.85s var(--ease);}
  .reveal.is-visible{opacity:1;transform:none;}
  .reveal--left{transform:translateX(-28px);}
  .reveal--left.is-visible{transform:none;}
  .reveal--right{transform:translateX(28px);}
  .reveal--right.is-visible{transform:none;}
  .reveal--scale{transform:scale(0.95);}
  .reveal--scale.is-visible{transform:scale(1);}
  .stagger>*{opacity:0;transform:translateY(22px);transition:opacity 0.75s var(--ease),transform 0.75s var(--ease);}
  .stagger.is-visible>*{opacity:1;transform:none;}
  .stagger.is-visible>*:nth-child(1){transition-delay:0.05s;}
  .stagger.is-visible>*:nth-child(2){transition-delay:0.13s;}
  .stagger.is-visible>*:nth-child(3){transition-delay:0.21s;}
  .stagger.is-visible>*:nth-child(4){transition-delay:0.29s;}
  .stagger.is-visible>*:nth-child(5){transition-delay:0.37s;}
  .stagger.is-visible>*:nth-child(6){transition-delay:0.45s;}
  .stagger.is-visible>*:nth-child(7){transition-delay:0.53s;}
  .stagger.is-visible>*:nth-child(8){transition-delay:0.61s;}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.stagger>*{opacity:1!important;transform:none!important;}
  .hero .eyebrow,.hero__headline,.hero__sub,.hero__cta{opacity:1;animation:none;}
  .hero__word{clip-path:none;}
  .loader-bar__fill{animation:none;width:100%;}
  .hero__bg-img{animation:none;}
  .marquee-track{animation:none;}
}