/* ==========================================================================
   PHOTOGRAPHS — the one file to edit to change the pictures on this site.

   Every block below is either LIVE (a photo is in use) or COMMENTED OUT (the
   original line illustration is showing because no photo file exists yet).

     To ADD a photo    put the named .jpg into assets/img/photos/ and remove
                       the two marker lines the block tells you to remove.
     To REMOVE a photo wrap the block back in comment markers. The illustration
                       returns. Nothing breaks either way.

   Paths are relative to THIS file, so they start with ../img/photos/
   Sizes, sources and what each image shows: see PHOTOS.md.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */
:root {
  --hero-scrim: .74;   /* 0 = photo at full strength, 1 = solid navy. Tune it. */
  --band-scrim: .80;   /* same idea for the two dark bands below. */
}

.hero {
  background-image:
    linear-gradient(158deg,
      color-mix(in srgb, var(--brand-900) calc(var(--hero-scrim) * 100%), transparent),
      color-mix(in srgb, var(--brand-700) calc(var(--hero-scrim) * 100%), transparent)),
    var(--photo-hero, none),
    radial-gradient(1100px 520px at 88% -10%, rgba(214,178,95,.16), transparent 62%),
    linear-gradient(160deg, var(--brand-900) 0%, var(--brand-800) 46%, var(--brand-700) 100%);
  background-size: cover, cover, auto, auto;
  background-position: center, center 38%, center, center;
  background-repeat: no-repeat;
}

/* ---- Hero photograph — hero.jpg ------------------------------
   A photograph is in use here. To go back to the illustration, put
   this block back inside comment markers.
   ------------------------------------------------------------------ */
.hero { --photo-hero: url("../img/photos/hero.jpg"); }
.hero-art { display: none; }
.hero-split { grid-template-columns: minmax(0, 1fr); }
.hero .lede { max-width: 48ch; }



/* --------------------------------------------------------------------------
   2. SECTION BACKGROUNDS
   The two dark bands. Both keep their navy gradient on top of the photo, so
   the white text stays readable whatever the image is doing underneath.
   -------------------------------------------------------------------------- */
.why-band, .cta-band {
  background-image:
    linear-gradient(150deg,
      color-mix(in srgb, var(--brand-900) calc(var(--band-scrim) * 100%), transparent),
      color-mix(in srgb, var(--brand-700) calc(var(--band-scrim) * 100%), transparent)),
    var(--photo-band, none),
    radial-gradient(800px 420px at 92% 4%, rgba(214,178,95,.14), transparent 62%),
    linear-gradient(150deg, var(--brand-900), var(--brand-800) 62%, var(--brand-700));
  background-size: cover, cover, auto, auto;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* ---- Why Vasistha band — band-why.jpg ------------------------
   A photograph is in use here. To go back to the illustration, put
   this block back inside comment markers.
   ------------------------------------------------------------------ */
.why-band { --photo-band: url("../img/photos/band-why.jpg"); }


/* ---- Closing call-to-action band — band-cta.jpg --------------
   A photograph is in use here. To go back to the illustration, put
   this block back inside comment markers.
   ------------------------------------------------------------------ */
.cta-band { --photo-band: url("../img/photos/band-cta.jpg"); }



/* --------------------------------------------------------------------------
   3. SERVICE IMAGES
   Each block covers both places a service appears: the card on the home page
   and the wide panel on the services page. 1200 x 690 px, JPG, under 250 KB.
   -------------------------------------------------------------------------- */

.svc-card .thumb,
.svc-row .svc-media {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.svc-card .thumb { aspect-ratio: 400 / 230; padding: 0; }
.svc-card .thumb .illus { height: 100%; }
.svc-row .svc-media { border-radius: 12px; overflow: hidden; }

/* ---- Corporate Travel Management -----------------------------
   A photograph is in use here. To go back to the illustration, put
   this block back inside comment markers.
   ------------------------------------------------------------------ */
.svc-card[data-svc="corporate-travel"] .thumb { background-image: url("../img/photos/corporate-travel.jpg"); }
.svc-card[data-svc="corporate-travel"] .illus { display: none; }
.svc-row#corporate-travel .svc-media { background-image: url("../img/photos/corporate-travel.jpg"); aspect-ratio: 400 / 260; }
.svc-row#corporate-travel .svc-media .illus-frame { background: none; border: 0; height: 100%; }
.svc-row#corporate-travel .svc-media .illus { display: none; }


/* ---- HR & Manpower Consultancy -------------------------------
   A photograph is in use here. To go back to the illustration, put
   this block back inside comment markers.
   ------------------------------------------------------------------ */
.svc-card[data-svc="hr-manpower"] .thumb { background-image: url("../img/photos/hr-manpower.jpg"); }
.svc-card[data-svc="hr-manpower"] .illus { display: none; }
.svc-row#hr-manpower .svc-media { background-image: url("../img/photos/hr-manpower.jpg"); aspect-ratio: 400 / 260; }
.svc-row#hr-manpower .svc-media .illus-frame { background: none; border: 0; height: 100%; }
.svc-row#hr-manpower .svc-media .illus { display: none; }


/* ---- Event Management ----------------------------------------
   A photograph is in use here. To go back to the illustration, put
   this block back inside comment markers.
   ------------------------------------------------------------------ */
.svc-card[data-svc="event-management"] .thumb { background-image: url("../img/photos/event-management.jpg"); }
.svc-card[data-svc="event-management"] .illus { display: none; }
.svc-row#event-management .svc-media { background-image: url("../img/photos/event-management.jpg"); aspect-ratio: 400 / 260; }
.svc-row#event-management .svc-media .illus-frame { background: none; border: 0; height: 100%; }
.svc-row#event-management .svc-media .illus { display: none; }


/* ---- Horticulture & Landscaping ------------------------------
   A photograph is in use here. To go back to the illustration, put
   this block back inside comment markers.
   ------------------------------------------------------------------ */
.svc-card[data-svc="horticulture-landscaping"] .thumb { background-image: url("../img/photos/horticulture-landscaping.jpg"); }
.svc-card[data-svc="horticulture-landscaping"] .illus { display: none; }
.svc-row#horticulture-landscaping .svc-media { background-image: url("../img/photos/horticulture-landscaping.jpg"); aspect-ratio: 400 / 260; }
.svc-row#horticulture-landscaping .svc-media .illus-frame { background: none; border: 0; height: 100%; }
.svc-row#horticulture-landscaping .svc-media .illus { display: none; }


/* ---- Government & Corporate Liaison --------------------------
   A photograph is in use here. To go back to the illustration, put
   this block back inside comment markers.
   ------------------------------------------------------------------ */
.svc-card[data-svc="government-liaison"] .thumb { background-image: url("../img/photos/government-liaison.jpg"); }
.svc-card[data-svc="government-liaison"] .illus { display: none; }
.svc-row#government-liaison .svc-media { background-image: url("../img/photos/government-liaison.jpg"); aspect-ratio: 400 / 260; }
.svc-row#government-liaison .svc-media .illus-frame { background: none; border: 0; height: 100%; }
.svc-row#government-liaison .svc-media .illus { display: none; }



/* --------------------------------------------------------------------------
   4. OUR WORK — an optional gallery of real photographs.
   The markup for this section is in PHOTOS.md. Styles are ready either way.
   -------------------------------------------------------------------------- */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.gallery figure {
  margin: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2);
}
.gallery img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }
.gallery figcaption { padding: .75rem .9rem; font-size: .85rem; color: var(--text-muted); }