/* ═══════════════════════════════════════════════════════════
   Styles for the multipage build — page headers, About story,
   services cards, gallery + lightbox, expanded footer.
   Loaded after site.css on every page.
   ═══════════════════════════════════════════════════════════ */

/* ── PAGE HEADER (inner pages) ─────────────────────────── */
/* The inner-page header was a flat navy band with the whole right half empty —
   consistent across five pages, and consistently the weakest thing on them.
   It now carries the home hero's language: a faint engineering grid and an
   outlined ghost figure. The figure is a NUMERAL on purpose — it stays correct
   when the page switches to Gujarati, which a word would not. */
.phead{position:relative;overflow:hidden;isolation:isolate;
  background:var(--navy-deep);color:#fff;
  padding:clamp(110px,14vh,170px) 0 clamp(48px,7vw,86px)}
.phead::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:clamp(48px,5vw,72px) clamp(48px,5vw,72px);
  -webkit-mask:radial-gradient(130% 95% at 76% 42%,#000 10%,transparent 74%);
  mask:radial-gradient(130% 95% at 76% 42%,#000 10%,transparent 74%);
}
.phead::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--red) 0 22%,rgba(255,255,255,.12) 22%);
}
.phead__ghost{
  /* Sits fully inside the band rather than bleeding off the edge: a numeral
     clipped through the middle of a glyph reads as a mistake, not a device.
     Sized off the character count so the four-glyph "111A" fits the same box
     as a two-glyph "25". */
  position:absolute;z-index:0;right:clamp(12px,3vw,64px);top:50%;
  transform:translateY(-48%);
  font-family:var(--ff-hero);font-weight:900;line-height:.7;
  font-size:clamp(140px,19vw,320px);letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.11);
  pointer-events:none;user-select:none;white-space:nowrap;
}
.phead .container{position:relative;z-index:1}
/* Below ~760px the headline fills the full band width, so the ghost figure has
   nowhere to sit that is not directly behind the type — on a phone it ran
   straight through "BUILDING SAFER WORKPLACES" and hurt the legibility of
   both. The grid texture alone carries the band at that size. */
@media(max-width:760px){
  .phead__ghost{display:none}
  .phead::before{-webkit-mask:radial-gradient(150% 100% at 80% 30%,#000 5%,transparent 78%);
    mask:radial-gradient(150% 100% at 80% 30%,#000 5%,transparent 78%)}
}
.phead .h-sec{color:#fff}
.phead__lede{color:rgba(255,255,255,.7);max-width:56ch}

/* ── SHARED LINK BUTTON ────────────────────────────────── */
.btn-line{display:inline-block;font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ink);
  border-bottom:1.5px solid var(--red);padding-bottom:5px;transition:color .2s,border-color .2s}
.btn-line:hover{color:var(--red)}

/* ── STORY (about) ─────────────────────────────────────── */
.story{background:var(--paper);padding:clamp(60px,9vw,120px) 0}
.story__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.story__lead{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;
  font-size:clamp(26px,3.6vw,46px);line-height:1.02;margin:16px 0 24px;max-width:20ch}
.story__grid p{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin:0 0 16px;max-width:60ch}
.story__side{display:grid;gap:0;border-top:1px solid var(--line)}
.story__stat{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px 2px;border-bottom:1px solid var(--line)}
.story__stat b{font-family:var(--ff-hero);font-weight:900;font-size:clamp(26px,3vw,38px);line-height:1}
.story__stat span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);text-align:right}

/* ── TEAM with portrait ────────────────────────────────── */
/* The card has four children (img, name, role, bio) in a two-column grid, so
   auto-placement dropped name onto row 1 and role onto row 2 *under the
   portrait* — separating a person's name from their title by the full height
   of the photo. Pin the portrait to a spanning first column and stack the
   text explicitly in the second. */
.tm--has-img{grid-column:1/-1;display:grid;grid-template-columns:180px minmax(0,1fr);
  grid-template-rows:auto auto 1fr;
  column-gap:clamp(18px,2.6vw,34px);row-gap:6px;align-items:start}
.tm--has-img .tm__img{grid-column:1;grid-row:1/span 3;align-self:start}
.tm--has-img .tm__n{grid-column:2;grid-row:1}
.tm--has-img .tm__r{grid-column:2;grid-row:2}
.tm--has-img .tm__d{grid-column:2;grid-row:3;margin-top:8px}
.tm__img{width:180px;height:180px;object-fit:cover;filter:grayscale(.2)}

/* ── SERVICES TEASER (home) ────────────────────────────── */
.svct{background:var(--paper);padding:clamp(64px,9vw,120px) 0}
.svct__grid{margin-top:clamp(30px,4vw,50px);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc{display:block;padding:clamp(20px,2.6vw,30px);text-decoration:none;color:inherit;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .3s var(--ease)}
.svc:hover{background:#fff}
.svc__i{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--red)}
.svc__t{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,28px);line-height:1;margin:12px 0 0}
.svc__ref{display:inline-block;margin-top:8px;font-family:var(--ff-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.svc__d{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}

/* ── PROGRAMME CARDS (services) ────────────────────────── */
.progs{background:var(--paper);padding:clamp(60px,9vw,110px) 0}
.progs__grid{margin-top:clamp(30px,4vw,50px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,26px)}
.prog{background:#fff;border:1px solid var(--line);padding:clamp(22px,2.8vw,32px);
  display:flex;flex-direction:column}
.prog__h{display:flex;align-items:center;justify-content:space-between;gap:14px}
.prog__i{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--red)}
.prog__tag{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);border:1px solid var(--line);padding:4px 8px}
.prog__t{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;
  font-size:clamp(24px,2.8vw,34px);line-height:1;margin:16px 0 0}
.prog__d{margin:12px 0 0;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.prog__spec{margin-top:20px;display:grid;gap:0;border-top:1px solid var(--line)}
.prog__spec div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--line);font-family:var(--ff-mono);font-size:11px}
.prog__spec b{font-weight:400;color:var(--ink-2)}
.prog__spec span{text-align:right}
.prog__cta{margin-top:20px;font-weight:600;font-size:14px;text-decoration:none;color:var(--red);
  display:inline-flex;align-items:center;min-height:26px;align-self:flex-start}
.prog__cta:hover{text-decoration:underline}

/* ── GALLERY + LIGHTBOX ────────────────────────────────── */
.gal{background:var(--paper);padding:clamp(48px,7vw,90px) 0 clamp(60px,9vw,110px)}
.gal__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.gi{position:relative;padding:0;border:0;background:var(--navy-deep);cursor:pointer;
  overflow:hidden;display:block;width:100%}
.gi img{width:100%;height:clamp(220px,26vw,330px);object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.gi:hover img{transform:scale(1.05)}
.gi:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.gi__cap{position:absolute;left:0;right:0;bottom:0;padding:16px;text-align:left;
  display:flex;flex-direction:column;gap:2px;color:#fff;
  background:linear-gradient(0deg,rgba(4,23,61,.9),rgba(4,23,61,0))}
.gi__cap b{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;font-size:16px}
.gi__cap span{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}

.lb{position:fixed;inset:0;z-index:300;background:rgba(4,23,61,.96);
  display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,60px)}
.lb[hidden]{display:none}
.lb__fig{margin:0;max-width:min(1100px,92vw);text-align:center}
.lb__fig img{max-width:100%;max-height:76vh;width:auto;height:auto;margin:0 auto}
.lb__fig figcaption{margin-top:14px;color:rgba(255,255,255,.8);font-size:14px}
.lb__fig figcaption b{color:#fff;font-family:var(--ff-hero);font-weight:900;
  text-transform:uppercase;font-size:18px}
.lb__close{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;
  font-size:34px;line-height:1;cursor:pointer;padding:8px}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;
  color:#fff;font-size:44px;line-height:1;cursor:pointer;padding:12px 18px;opacity:.7}
.lb__nav:hover{opacity:1}
.lb__prev{left:6px}
.lb__next{right:6px}
.lb__close:focus-visible,.lb__nav:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px}

/* ── CTA row (inner pages) ─────────────────────────────── */
.cta__row2{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,3.6vw,42px)}
.cta__btn{display:inline-flex;align-items:center;padding:15px 26px;background:#fff;
  color:var(--red);font-weight:600;font-size:15px;text-decoration:none;transition:opacity .2s}
.cta__btn:hover{opacity:.88}
.cta__btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.cta__btn--ghost:hover{background:#fff;color:var(--red)}

/* ── FOOTER (expanded) ─────────────────────────────────── */
.foot__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,48px);padding-bottom:clamp(28px,3.6vw,44px);
  border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:22px}
.foot__brand img{height:52px;width:auto;margin-bottom:14px}
.foot__brand p{margin:0;font-size:14px;line-height:1.7;color:var(--on-dark-2)}
.foot__col h3,.foot__col h4{margin:0 0 12px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:400}
.foot__col a,.foot__col p{display:block;color:var(--on-dark-2);text-decoration:none;
  font-size:14px;line-height:1.65;margin:0 0 7px;word-break:break-word}
.foot__col a:hover{color:#fff}

/* ── NAV states ────────────────────────────────────────── */
.nav.solid{background:var(--navy-deep)}
.nav__links a.on{color:#fff;border-bottom-color:var(--red-bright)}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media(max-width:1000px){
  .story__grid{grid-template-columns:1fr}
  .svct__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .progs__grid{grid-template-columns:1fr}
  .gal__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm--has-img{grid-template-columns:120px minmax(0,1fr)}
  .tm__img{width:120px;height:120px}
}
@media(max-width:640px){
  .svct__grid{grid-template-columns:1fr}
  .gal__grid{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr}
  .tm--has-img{grid-template-columns:1fr;grid-template-rows:none}
  .tm--has-img .tm__img,.tm--has-img .tm__n,
  .tm--has-img .tm__r,.tm--has-img .tm__d{grid-column:1;grid-row:auto}
  .tm__img{width:100%;height:220px}
}