/* Branding page styles */

/* Branding intro section */
.brand-intro{background:#fff;padding:50px 0;}

/* Grid container: title above, then text left (RTL content) and image right */
.bi-inner{max-width:1400px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'title title' 'text image';gap:28px;align-items:center;direction:ltr;}

/* Title centered across two columns */
.bi-title{grid-area:title;margin:0 0 16px;text-align:center;font-family:'Assistant',var(--font-sans);font-weight:800;font-size:clamp(1.6rem,3.5vw,2.4rem);color:#111;padding:28px 16px;margin:32px 0;border:none;box-shadow:none;line-height:1.2;letter-spacing:.2px}

/* Text block (RTL) */
.bi-text{grid-area:text;text-align:right;direction:rtl;}
/* Uniform typography for branding intro text, list and outcome */
.bi-text,
.bi-text p,
.bi-list,
.bi-list li,
.bi-outcome{
  font-family:'Assistant',var(--font-sans);
  font-weight:600;
  font-size:clamp(1rem,1.6vw,1.15rem);
  line-height:1.6;
  color:#111;
}

/* List styling */
.bi-list{margin:4px 0 10px;padding:0 1.2em 0 0;list-style:none;}
.bi-list li{margin:0 0 6px;}
.bi-outcome{font-weight:700;margin-top:10px;}

/* Image on the right */
.bi-image{grid-area:image;margin:0;justify-self:end;}
.bi-image img{width:82%;max-width:480px;height:auto;display:block;box-shadow:0 2px 6px rgba(0,0,0,.12);} 

/* CTA under branding grid (unique class) */
.branding-cta{display:flex;justify-content:center;margin:80px 0;}

/* Responsive */
@media (max-width:960px){
  .bi-inner{grid-template-columns:1fr;grid-template-areas:'title' 'text' 'image';}
  .bi-image{margin-top:10px;}
}

/* Branding 3x3 gallery grid */
.branding-grid{padding:10px 0 60px;background:#fff;}
.branding-grid .bg-inner{max-width:1400px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.branding-grid .bg-item{position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:#f0f2f4;border:1px solid #cfd4da;box-shadow:0 1px 2px rgba(0,0,0,.06);} 
.branding-grid .bg-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.branding-grid .bg-empty{opacity:.35;}
@media (max-width:900px){.branding-grid .bg-inner{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:720px){
  .branding-grid .bg-inner{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
  /* Mobile: remove default figure margins so items align to grid edges */
  .branding-grid .bg-item{margin:0}
}
@media (max-width:460px){.branding-grid .bg-inner{grid-template-columns:repeat(2,minmax(0,1fr));}}