/* ==========================================================================
   ILNB GROUP — PHOTO LAYER
   --------------------------------------------------------------------------
   THIS IS THE ONLY FILE YOU EDIT TO PUT REAL PHOTOGRAPHY ON THE SITE.

   Every image on the site is referenced through one of the variables below.
   The site ships with hand-drawn illustrations so it looks finished today.
   To swap any one of them for a real photo:

     1. Put your photo in  assets/img/people/
     2. Change that one line below to point at it, e.g.
            --photo-01: url("../img/people/priya-laptop.jpg");
     3. Save. Done — no HTML changes anywhere.

   Recommended photo specs
     Portrait tiles (01, 02, 04, 06)  ~1200 x 1500 px, JPG, under 300 KB
     Landscape tiles (03, 05, 07-12)  ~1200 x 860 px,  JPG, under 300 KB
     Faces should sit in the upper-middle third — tiles crop from the centre.

   Licensing note: only use photography you own or have licensed. Do not
   hotlink images from other websites.
   ========================================================================== */

:root {
  /* --- People: the 23–45 earning audience --- */
  --photo-01: url("../img/people/01-young-professional-woman.svg"); /* woman, 20s–30s, laptop      */
  --photo-02: url("../img/people/02-young-professional-man.svg");   /* man, 20s–30s, phone         */
  --photo-03: url("../img/people/03-couple-planning.svg");          /* young couple planning       */
  --photo-04: url("../img/people/04-nri-global.svg");               /* NRI / global investor       */
  --photo-05: url("../img/people/05-family-first-home.svg");        /* young family, first home    */
  --photo-06: url("../img/people/06-woman-leader.svg");             /* woman professional, senior  */
  --photo-07: url("../img/people/07-first-salary.svg");             /* first salary / first SIP    */
  --photo-08: url("../img/people/08-advisor-meeting.svg");          /* advisor with client         */

  /* --- Concept / motif tiles --- */
  --photo-09: url("../img/people/09-goal-education.svg");           /* education goal              */
  --photo-10: url("../img/people/10-dollar-growth.svg");            /* dollar + rupee growth       */
  --photo-11: url("../img/people/11-city-night.svg");               /* city skyline                */
  --photo-12: url("../img/people/12-secure.svg");                   /* security / trust            */
}

/* --------------------------------------------------------------------------
   Wiring — you should not need to change anything below this line.
   -------------------------------------------------------------------------- */
.ph-01 { background-image: var(--photo-01); }
.ph-02 { background-image: var(--photo-02); }
.ph-03 { background-image: var(--photo-03); }
.ph-04 { background-image: var(--photo-04); }
.ph-05 { background-image: var(--photo-05); }
.ph-06 { background-image: var(--photo-06); }
.ph-07 { background-image: var(--photo-07); }
.ph-08 { background-image: var(--photo-08); }
.ph-09 { background-image: var(--photo-09); }
.ph-10 { background-image: var(--photo-10); }
.ph-11 { background-image: var(--photo-11); }
.ph-12 { background-image: var(--photo-12); }

[class*="ph-"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}