/* /life-at-aistechnolabs — AISHTMLNEWDESIGN-594
   Page-owned styles. EVERY selector is scoped to #page-life-at-aistechnolabs
   or a lat- prefixed class: this sheet must never style body, a bare element,
   #ais-header or #ais-footer. The document reset (html,body{margin:0}) is
   owned by the shared layout sheet and is neither restated nor re-scoped here.
   Font is Inter; no body/UI text below 16px.

   ══════════════════════════════════════════════════════════════════════
   Visual direction: "THE NOTICEBOARD".

   This page is twelve photographs and ONE sentence. The record carries no
   argument to typeset, so the usual shape — hero, prose bands, card grids —
   would be mostly empty containers. The board IS the page: every event hangs
   as a pinned print, and the composition does the work the copy cannot.

     · PAPER  #f3efe4 — warm manila. The board itself.
     · INK    #1e1b16 — the hero block and all body text.
     · PIN    #a8331c — oxide red. Tacks, rules, the CTA, link underlines.
              One accent only; nothing else is coloured.
     · CARD   #ffffff — each print sits on white stock with a real border,
              so the photographs read as objects on a surface rather than
              as tiles in a grid.

   Restraint matters here: no cork texture, no fake tape, no rotation. The
   tack is a 10px dot and the "pinning" is carried by the shadow and the
   white stock, not by skeuomorphic decoration (rule 37).

   Tiles are locked to 401/296 — the ratio eleven of the twelve source images
   share — with object-fit:cover, so diwali-celebration.webp (372x296, the one
   odd size) fills its frame without distorting or shifting the grid.

   Deliberately NOT: CIVIC HALL (/about-us), HEAD TABLE (/leadership),
   OPEN LETTER (/clients-testimonials), CALL SHEET (/hire-game-developer) —
   the whole people-adjacent cluster.

   Motion is finite and user-initiated only (rule 26): hover, focus, press.
   No scroll observer, no autoplay, nothing repeating.
   ══════════════════════════════════════════════════════════════════════ */

#page-life-at-aistechnolabs{
  --lat-paper:#f3efe4;
  --lat-paper-2:#e9e3d4;
  --lat-card:#ffffff;
  --lat-ink:#1e1b16;
  --lat-ink-2:#4a4539;
  --lat-pin:#a8331c;
  --lat-pin-dk:#8c2815;
  --lat-line:#d5cdba;
  --lat-onink:#f3efe4;
  --lat-onink-2:#c2baa8;

  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--lat-ink);
  background:var(--lat-paper);
  -webkit-font-smoothing:antialiased;
}

#page-life-at-aistechnolabs *{box-sizing:border-box;}

#page-life-at-aistechnolabs h1,
#page-life-at-aistechnolabs h2,
#page-life-at-aistechnolabs h3,
#page-life-at-aistechnolabs h4,
#page-life-at-aistechnolabs h5{
  margin:0;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.12;
  color:var(--lat-ink);
}
#page-life-at-aistechnolabs p{margin:0;}
#page-life-at-aistechnolabs ul,
#page-life-at-aistechnolabs ol{margin:0;padding:0;list-style:none;}
#page-life-at-aistechnolabs img{max-width:100%;display:block;}

#page-life-at-aistechnolabs :focus-visible{
  outline:3px solid var(--lat-pin);
  outline-offset:3px;
  border-radius:2px;
}

/* ── shell ─────────────────────────────────────────────────────────── */
#page-life-at-aistechnolabs .lat-wrap{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:24px;
}

/* ── the single CTA. It is an <a>, not a modal trigger: the record shows
      no enquiry form on this page, so the one destination that exists is
      the real /career page. It owns its foreground behind the page id so
      no prose rule can outrank it (rule 39A). ───────────────────────── */
#page-life-at-aistechnolabs a.lat-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 32px;
  border:2px solid var(--lat-pin);
  border-radius:3px;
  background:var(--lat-pin);
  color:#fff;
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease,transform .12s ease;
}
#page-life-at-aistechnolabs a.lat-btn:hover{
  background:var(--lat-pin-dk);
  border-color:var(--lat-pin-dk);
}
#page-life-at-aistechnolabs a.lat-btn:active{transform:translateY(1px);}

/* ══ HERO — full-bleed ink. Static gradient only: no image, no motion.
      The source splits its headline across H1 and H2, so the split is the
      composition — "JOIN THE" sets large, "Talented Team" answers it. ══ */
#page-life-at-aistechnolabs .lat-hero{
  width:100%;
  padding:clamp(66px,8vw,118px) 24px clamp(70px,8.5vw,124px);
  background:linear-gradient(170deg,#262219 0%,var(--lat-ink) 55%,#14120e 100%);
}
#page-life-at-aistechnolabs .lat-hero__inner{
  max-width:900px;
  margin-inline:auto;
  text-align:center;
}
#page-life-at-aistechnolabs .lat-eyebrow{
  font-size:16px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--lat-pin);
  margin-bottom:22px;
}
#page-life-at-aistechnolabs .lat-hero h1{
  font-size:clamp(46px,7vw,84px);
  line-height:1;
  letter-spacing:.02em;
  color:#fff;
}
#page-life-at-aistechnolabs .lat-hero__second{
  margin-top:8px;
  font-size:clamp(30px,4.4vw,54px);
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--lat-onink-2);
}
#page-life-at-aistechnolabs .lat-hero a.lat-btn{margin-top:36px;}

/* ── breadcrumb strip ──────────────────────────────────────────────── */
#page-life-at-aistechnolabs .lat-crumb{
  background:var(--lat-paper-2);
  border-bottom:1px solid var(--lat-line);
  padding:16px 0;
}
#page-life-at-aistechnolabs .lat-crumb ol{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:600;
}
#page-life-at-aistechnolabs .lat-crumb a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--lat-pin);
  text-decoration:none;
}
#page-life-at-aistechnolabs .lat-crumb a:hover{color:var(--lat-pin-dk);}
#page-life-at-aistechnolabs .lat-crumb img{width:16px;height:16px;}
#page-life-at-aistechnolabs .lat-crumb li[aria-current]{color:var(--lat-ink-2);}

/* ══ BANNER — the record's hero image, hung as the first and largest print
      on the board. Its real ratio is 801/343. ══ */
#page-life-at-aistechnolabs .lat-banner{padding:clamp(34px,4.5vw,58px) 0 0;}
#page-life-at-aistechnolabs .lat-banner__fig{
  margin:0;
  background:var(--lat-card);
  border:1px solid var(--lat-line);
  padding:14px;
  box-shadow:0 18px 40px -26px rgba(30,27,22,.6);
}
#page-life-at-aistechnolabs .lat-banner__fig img{
  width:100%;
  height:auto;
  aspect-ratio:801/343;
  object-fit:cover;
}

/* ══ THE BOARD ══ */
#page-life-at-aistechnolabs .lat-events{padding:clamp(52px,6.5vw,88px) 0;}
#page-life-at-aistechnolabs .lat-events h2{
  font-size:clamp(28px,3.6vw,44px);
  padding-bottom:14px;
  border-bottom:3px solid var(--lat-pin);
  display:inline-block;
}
#page-life-at-aistechnolabs .lat-lede{
  margin-top:20px;
  max-width:680px;
  font-size:18px;
  line-height:1.7;
  color:var(--lat-ink-2);
}

#page-life-at-aistechnolabs .lat-board{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,2.6vw,34px);
  margin-top:clamp(36px,4vw,56px);
}
#page-life-at-aistechnolabs .lat-pin a{
  position:relative;
  display:block;
  height:100%;
  background:var(--lat-card);
  border:1px solid var(--lat-line);
  padding:12px 12px 0;
  text-decoration:none;
  box-shadow:0 14px 30px -22px rgba(30,27,22,.75);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#page-life-at-aistechnolabs .lat-pin a:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 44px -24px rgba(30,27,22,.8);
  border-color:var(--lat-pin);
}
/* the tack: a dot, not a skeuomorph */
#page-life-at-aistechnolabs .lat-pin__tack{
  position:absolute;
  top:-5px;
  left:50%;
  width:10px;
  height:10px;
  margin-left:-5px;
  border-radius:50%;
  background:var(--lat-pin);
  box-shadow:0 2px 4px rgba(30,27,22,.45);
}
#page-life-at-aistechnolabs .lat-pin img{
  width:100%;
  height:auto;
  aspect-ratio:401/296;
  object-fit:cover;
}
#page-life-at-aistechnolabs .lat-pin h5{
  padding:16px 4px 18px;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  color:var(--lat-ink);
  text-align:center;
}
#page-life-at-aistechnolabs .lat-pin a:hover h5{color:var(--lat-pin);}

/* ══ STORIES ══ */
#page-life-at-aistechnolabs .lat-stories{
  padding:clamp(52px,6.5vw,88px) 0;
  background:var(--lat-paper-2);
  border-block:1px solid var(--lat-line);
}
#page-life-at-aistechnolabs .lat-stories h4{
  font-size:clamp(24px,3vw,34px);
  margin-bottom:30px;
}
#page-life-at-aistechnolabs .lat-stories__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
#page-life-at-aistechnolabs .lat-story{
  background:var(--lat-card);
  border:1px solid var(--lat-line);
  overflow:hidden;
}
#page-life-at-aistechnolabs button.lat-vid{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:var(--lat-ink);
  cursor:pointer;
  line-height:0;
}
#page-life-at-aistechnolabs button.lat-vid img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:opacity .18s ease;
}
#page-life-at-aistechnolabs button.lat-vid:hover img{opacity:.82;}
#page-life-at-aistechnolabs .lat-vid__play{
  position:absolute;
  left:50%;
  top:50%;
  width:62px;
  height:62px;
  margin:-31px 0 0 -31px;
  border-radius:50%;
  background:var(--lat-pin);
  box-shadow:0 4px 18px rgba(0,0,0,.4);
}
#page-life-at-aistechnolabs .lat-vid__play::after{
  content:"";
  position:absolute;
  left:25px;
  top:19px;
  border-style:solid;
  border-width:12px 0 12px 19px;
  border-color:transparent transparent transparent #fff;
}
#page-life-at-aistechnolabs .lat-story__frame{
  width:100%;
  aspect-ratio:4/3;
  border:0;
  display:block;
}
#page-life-at-aistechnolabs .lat-story p{
  padding:20px;
  font-size:17px;
  line-height:1.65;
  color:var(--lat-ink-2);
}
#page-life-at-aistechnolabs .lat-more{margin-top:28px;}
#page-life-at-aistechnolabs .lat-more a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:17px;
  font-weight:700;
  color:var(--lat-pin);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}
#page-life-at-aistechnolabs .lat-more a:hover{color:var(--lat-pin-dk);}

/* ══ AREA WE SERVE ══ */
#page-life-at-aistechnolabs .lat-areas{padding:clamp(52px,6.5vw,88px) 0;}
#page-life-at-aistechnolabs .lat-areas h2{
  font-size:clamp(26px,3.2vw,38px);
  margin-bottom:30px;
}
#page-life-at-aistechnolabs .lat-areas__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}
#page-life-at-aistechnolabs .lat-area{
  background:var(--lat-card);
  border-top:4px solid var(--lat-pin);
  border-inline:1px solid var(--lat-line);
  border-bottom:1px solid var(--lat-line);
  padding:26px 22px;
}
#page-life-at-aistechnolabs .lat-area h3{
  font-size:18px;
  letter-spacing:.06em;
  margin-bottom:14px;
}
#page-life-at-aistechnolabs .lat-area__tel{margin-bottom:10px;}
#page-life-at-aistechnolabs .lat-area__tel a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:17px;
  font-weight:700;
  color:var(--lat-pin);
  text-decoration:none;
}
#page-life-at-aistechnolabs .lat-area__tel a:hover{color:var(--lat-pin-dk);}
#page-life-at-aistechnolabs .lat-area p{
  font-size:16px;
  line-height:1.62;
  color:var(--lat-ink-2);
}

/* ══ RESPONSIVE ══ */
@media (max-width:1024px){
  #page-life-at-aistechnolabs .lat-board{grid-template-columns:repeat(3,1fr);}
  #page-life-at-aistechnolabs .lat-areas__grid{grid-template-columns:repeat(2,1fr);}
  #page-life-at-aistechnolabs .lat-stories__grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:720px){
  #page-life-at-aistechnolabs .lat-board{grid-template-columns:repeat(2,1fr);gap:18px;}
  #page-life-at-aistechnolabs .lat-stories__grid{grid-template-columns:1fr;}
  #page-life-at-aistechnolabs .lat-areas__grid{grid-template-columns:1fr;}
  #page-life-at-aistechnolabs .lat-hero__inner{text-align:left;}
  #page-life-at-aistechnolabs a.lat-btn{width:100%;}
  #page-life-at-aistechnolabs .lat-pin h5{font-size:17px;padding:14px 2px 16px;}
  #page-life-at-aistechnolabs .lat-banner__fig{padding:10px;}
  /* standalone text link becomes a real tap target on touch (>=44px) */
  #page-life-at-aistechnolabs .lat-crumb a{min-height:44px;}
}

@media (max-width:420px){
  #page-life-at-aistechnolabs .lat-board{grid-template-columns:1fr;}
  #page-life-at-aistechnolabs .lat-wrap{padding-inline:20px;}
  #page-life-at-aistechnolabs .lat-hero{padding-inline:20px;}
}

/* Rule 26 — honour the OS preference for whatever finite motion remains. */
@media (prefers-reduced-motion:reduce){
  #page-life-at-aistechnolabs *,
  #page-life-at-aistechnolabs *::before,
  #page-life-at-aistechnolabs *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
}

/* ── ENQUIRY FORM (restored; see restore-enquiry-forms.py) ─────────── */
#page-life-at-aistechnolabs .lat-enquiry{padding:54px 0;}
#page-life-at-aistechnolabs .lat-enquiry__frame{
  display:block;width:100%;border:0;min-height:860px;background:#fff;
}
@media (max-width:640px){
  #page-life-at-aistechnolabs .lat-enquiry__frame{min-height:900px;}
}