/* ===== About ===== */
.ab-hero { background: linear-gradient(160deg,var(--navy),var(--navy-2)); color:#dbe7f7; padding: var(--s-8) 0; }
.ab-hero h1 { color:#fff; max-width:16ch; }
.ab-hero .lead { color:#c2d3ea; max-width:60ch; }

.ab-lead-cols { display:grid; grid-template-columns: 1.3fr 1fr; gap:2.5rem; align-items:start; }
@media (max-width:860px){ .ab-lead-cols { grid-template-columns:1fr; } }
.ab-lead-cols p { color:var(--slate); font-size:1.05rem; }
.ab-aside { background:var(--blue-soft); border:1px solid #d4e4fb; border-radius:var(--r-lg); padding:1.6rem; }
.ab-aside h3 { margin-top:0; }
.ab-aside .checks li { color:var(--slate); }

/* journey */
.journey { display:grid; grid-template-columns: repeat(5,1fr); gap:.8rem; counter-reset:j; }
@media (max-width:820px){ .journey { grid-template-columns: repeat(2,1fr); } }
@media (max-width:460px){ .journey { grid-template-columns:1fr; } }
.jstep { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1rem; position:relative; }
.jstep .num { width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; font-weight:800; display:grid; place-items:center; margin-bottom:.7rem; }
.jstep h4 { margin:0 0 .2rem; color:var(--navy); }
.jstep p { margin:0; font-size:.85rem; color:var(--slate); }

/* The founder avatar and portrait rules that used to sit here lost their
   selectors when the MD message became the full-bleed .md-hero section. Two
   selector-less declaration blocks are not "dead but harmless": CSS error
   recovery skips forward to the next "{", so they were silently eating the
   .ab-pres-grid rule below. Confirmed in the browser's own CSSOM — the rule
   was absent from document.styleSheets while its neighbours were present.
   The elements they styled no longer exist, so the blocks are removed. */


.ab-cta { background: linear-gradient(120deg,var(--blue),var(--blue-bright)); color:#fff; border-radius:var(--r-xl); padding: clamp(2rem, 1.5rem + 3vw, 3.2rem); text-align:center; }
.ab-cta h2 { color:#fff; } .ab-cta p { color:#eaf2fd; max-width:50ch; margin-inline:auto; }
.ab-cta .btns { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem; }

/* ============================================================
   Why ART — eight reasons, two columns of four.

   The first pass was a flat list with hairline rules and no feedback at
   all. The old WordPress section it replaces at least responded to the
   cursor, so this version has to earn its place: each reason is a real
   surface that lifts, its number fills with ART blue, and an accent bar
   wipes in from the left. They also stagger in on scroll via the site's
   existing .reveal observer rather than a second animation system.

   Deliberately NOT focusable: these are statements, not links. Adding
   tabindex would put eight dead stops in the keyboard path to promise an
   action that does not exist.

   Column-first fill keeps the DOM in natural 01-08 order, so a screen
   reader and the mobile single column both read in sequence.
   ============================================================ */
.wy-grid {
  display: grid; gap: .9rem 1.4rem; margin-top: 2.4rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
}
.wy-item {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  padding: 1.25rem 1.35rem 1.3rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              border-color .28s var(--ease);
}
/* accent bar wipes down the left edge */
.wy-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .32s var(--ease);
}
.wy-item:hover {
  transform: translateY(-3px);
  border-color: var(--blue-soft);
  box-shadow: 0 14px 30px rgba(11, 44, 94, .10);
}
.wy-item:hover::before { transform: scaleY(1); }

.wy-num {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  font-family: var(--font-mono, monospace); font-size: .74rem; font-weight: 700;
  letter-spacing: .04em;
  color: var(--blue); background: var(--blue-soft);
  border: 1px solid transparent;
  transition: background .28s var(--ease), color .28s var(--ease),
              transform .28s var(--ease);
}
.wy-item:hover .wy-num {
  background: var(--accent); color: #fff; transform: scale(1.06);
}
.wy-item h3 {
  margin: .28rem 0 .35rem; font-size: 1.02rem; color: var(--ink); line-height: 1.3;
  transition: color .28s var(--ease);
}
.wy-item:hover h3 { color: var(--blue); }
.wy-item p { margin: 0; color: var(--slate); font-size: .92rem; line-height: 1.65; }

/* stagger the reveal down each column so the two columns arrive together */
.wy-item.reveal { transition-delay: 0s; }
.wy-item:nth-child(2), .wy-item:nth-child(6) { transition-delay: .07s; }
.wy-item:nth-child(3), .wy-item:nth-child(7) { transition-delay: .14s; }
.wy-item:nth-child(4), .wy-item:nth-child(8) { transition-delay: .21s; }

@media (max-width: 900px) {
  .wy-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .wy-item { padding: 1.1rem 1.1rem 1.15rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wy-item, .wy-item::before, .wy-num, .wy-item h3 { transition: none; }
  .wy-item:hover { transform: none; }
  .wy-item:hover::before { transform: scaleY(1); }
  .wy-item.reveal { transition-delay: 0s !important; }
}

/* ============================================================
   MD message — full-bleed navy, portrait 40% / message 60%.
   The text is real HTML on top, not baked into a picture: these are
   Anurag's own words, they need to be indexable and readable by a
   screen reader, and they have to reflow on a phone.
   ============================================================ */
.md-hero {
  display: grid; grid-template-columns: 40% 60%;
  /* generated plate behind the gradients — defocused hall, right 60% held
     under 7% luma so white body text keeps 8.7:1 against it */
  background:
    linear-gradient(160deg, rgba(11,44,94,.55) 0%, rgba(7,26,56,.72) 62%, rgba(5,18,42,.88) 100%),
    url("../assets/founder/md-backdrop.webp") center/cover no-repeat,
    linear-gradient(160deg, var(--navy) 0%, #071A38 62%, #05122A 100%);
  color: #dfe8f5;
  position: relative; overflow: hidden;
}
/* faint engineering grid, so the flat navy has some structure */
.md-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 70% 40%, #000, transparent 75%);
}
/* `align-self: end` here left the portrait 92px short of the row at 1440px, so
   it sat at the bottom with a strip of bare navy above it and a hard horizontal
   line where the photograph began. The ::after top-fade below could not soften
   that, because the fade is inset to this box — it started at the very edge it
   was meant to dissolve. Stretching makes the image fill the full row height,
   which is what gives the fade something to work on. object-position keeps the
   head anchored while cover takes the extra crop off the sides. */
.md-hero__figure { position: relative; align-self: stretch; min-height: 520px; }
.md-hero__figure img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
/* The three blue washes that blended the old portrait's ground into the navy
   are GONE on Yash's instruction (2026-08-29, "remove the blue thing on the
   photo") — the v2 portrait shows untinted, its own studio ground meeting the
   navy panel directly. Don't reintroduce a wash without asking him. */
/* ============================================================
   Installed lines — the six customer-plant photographs.

   `.inst-grid` was in about.html but had NO CSS anywhere on the site, so each
   <figure> fell back to a full-width block and the six photographs became six
   full screens of scrolling. This is the grid the markup always assumed.

   The six images are not one shape — four are 4:3 and two are 16:9.6 — so a
   plain grid would give ragged rows. `aspect-ratio` on the figure plus
   object-fit: cover normalises them to one shape, and 4:3 is the majority so it
   crops the two wide ones least.
   ============================================================ */
.inst-sub { max-width: 62ch; }
.inst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.2rem;
}
.inst-grid figure {
  margin: 0;                       /* <figure> ships with 40px of UA margin */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--mist);         /* holds the shape before the image lands */
}
.inst-grid img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
/* A slow push-in on hover. transform only, and the figure's overflow:hidden is
   what turns it into a crop rather than a shove against its neighbours. */
.inst-grid figure:hover img { transform: scale(1.045); }

@media (max-width: 860px) { .inst-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .inst-grid { grid-template-columns: 1fr; gap: .8rem; }
  /* One-up on a phone can afford the wider frame, and it shows more of the line */
  .inst-grid figure { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .inst-grid img { transition: none; }
  .inst-grid figure:hover img { transform: none; }
}

.md-hero__panel { display: grid; align-items: center; position: relative; z-index: 1; }
/* MEASURED, and the fix for a real complaint. This rule used to be
   `max-width: 62ch` with `padding-left: 0`, which at 1440px put a 533px block
   of text inside an 864px grid cell, hard against the photograph's edge, and
   dumped all 331px of the slack on the right — a dead zone the client saw
   immediately and described as "empty space on the right side of the page".

   Two changes. The measure widens to 68ch, because 62ch is a book column and
   this is a 60% panel on a wide screen. And `margin-inline: auto` with
   symmetric padding centres what remains inside the cell, so the leftover space
   splits evenly and reads as a gutter on both sides rather than a hole on one.
   The left gutter also stops the first word butting against the portrait.

   Keep the padding symmetric. Setting the left to 0 again is what caused this. */
.md-hero__inner {
  max-width: 68ch;
  margin-inline: auto;
  padding: clamp(3rem,5vw,5.5rem) clamp(1.5rem,3.5vw,3.25rem) clamp(3rem,5vw,5.5rem);
}
.md-hero__inner .eyebrow { color: #bdd7f6; }
.md-hero__inner h2 { color: #fff; margin: .35rem 0 1.6rem; }
.md-hero__body { margin: 0; padding: 0; border: 0; }
.md-hero__body p { margin: 0 0 1rem; line-height: 1.78; color: #c6d5ea; }
.md-hero__body p:first-child { color: #eaf1fb; font-size: 1.06rem; }
.md-hero__body p:last-child { margin-bottom: 0; }
.md-hero__body b { color: var(--blue-bright); font-weight: 700; }
.md-hero__sig { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.16); }
.md-hero__sig b { display: block; color: #fff; font-size: 1.05rem; }
.md-hero__sig span { display: block; color: #c9d5e7; font-size: .87rem; margin-top: .12rem; }

@media (max-width: 900px) {
  .md-hero { grid-template-columns: 1fr; }
  .md-hero__figure { min-height: 0; max-height: 62vh; }
  .md-hero__inner { padding: 2rem clamp(1.2rem,6vw,2.5rem) 3rem; max-width: none; }
}

/* The hero now carries what was a separate "Who we are" section. That block
   was written for a white background, so on the dark hero its heading and body
   inherited --ink and --slate and rendered navy-on-navy — invisible. Everything
   in this column is recoloured for the dark ground; the aside keeps its own
   light card, so it is left alone. */
.ab-hero__cols { margin-top: clamp(2.2rem, 4vw, 3.2rem); }
.ab-hero__cols .ab-lead-cols { margin-top: 0; }
.ab-hero__cols .eyebrow { color: #bdd7f6; }
.ab-hero__cols h2 { color: #fff; }
.ab-hero__cols > .ab-lead-cols > div > p { color: #c6d5ea; }
.ab-hero__cols strong { color: #fff; }

/* ============================================================
   Manufacturing team — full-bleed band, caption beneath.
   Sits directly under the navy MD message so owner -> team ->
   photo reads as one movement.
   ============================================================ */
.team-shot { position: relative; background: var(--navy); }
.team-shot img { display: block; width: 100%; height: auto; }
.team-shot__cap {
  background: var(--navy); color: #dfe8f5;
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.5rem, 6vw, 4rem) clamp(1.8rem, 3.5vw, 2.6rem);
  text-align: center;
}
.team-shot__cap h2 { color: #fff; margin: 0 0 .35rem; font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
.team-shot__cap p { margin: 0; color: #c9d5e7; font-size: .95rem; }

/* ============================================================
   MOBILE PASS — 2026-08-01. Three defects, each measured at 375px and 320px
   before and after, not eyeballed.

   1. BODY TEXT BELOW THE READABLE FLOOR. Two rules set body copy in rem values
      tuned for desktop: `.jstep p` at .85rem (13.6px) and `.wy-item p` at
      .92rem (14.72px) — 13 paragraphs in total, both under the 16px that is the
      practical minimum for sustained reading on a phone held at arm's length.
      They are raised only at the phone breakpoint, so the desktop composition
      the client already signed off is untouched.

      NOT raised, deliberately: `.eyebrow` at 12.48px and `.wy-num` at 11.84px.
      Those are a tracked-out uppercase label and a decorative numeral in a
      circle — neither is read as prose, and enlarging them would break the
      typographic hierarchy they exist to create.

   2. THE TEAM PHOTOGRAPH WAS A SLIVER. manufacturing-team.webp is 2.29:1, so at
      375px it rendered 163px tall and at 320px only 140px — roughly 150 people
      in a band the height of two lines of text, where no face is resolvable.
      A phone crop trades width for height: the aspect ratio is forced taller and
      object-position holds the centre, so fewer people are in frame but the ones
      who are can actually be seen. The desktop band keeps the full 2.29:1.

   3. CONTENT EDGES DID NOT LINE UP. `.wrap` gives 19px of side padding, but the
      two full-bleed sections set their own inner padding — 23px in the MD
      message, 24px in the team caption. Scrolling the page, the left edge of the
      text stepped 19 → 23 → 24 → 19. All three now resolve to the same value.
   ============================================================ */
@media (max-width: 620px) {
  .jstep p { font-size: 1rem; line-height: 1.6; }
  .wy-item p { font-size: 1rem; line-height: 1.62; }
  .wy-item h3 { font-size: 1.08rem; }

  /* 3:2 instead of 2.29:1 — the group fills 250px instead of 163px */
  .team-shot img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: center; }

  /* one padding value for every section, full-bleed or not */
  .md-hero__inner { padding-inline: 19px; }
  .team-shot__cap { padding-inline: 19px; }
}

/* ============================================================
   Team message — .team-msg, .team-msg__body and .team-msg__stats were in
   about.html with NO CSS anywhere on the site, so the two paragraphs ran the
   full 1280px container: 150 characters per line at 1440px, where comfortable
   reading tops out around 75. Same class of miss as .inst-grid.
   ============================================================ */
.team-msg { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2.6rem; align-items: start; }
.team-msg__body { margin: 0; padding: 0; border: 0; max-width: 68ch; }
.team-msg__body p { margin: 0 0 1rem; color: var(--slate); line-height: 1.75; }
.team-msg__body p:last-child { margin-bottom: 0; }
.team-msg__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.team-msg__stats li {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem;
}
.team-msg__stats b { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--navy); }
.team-msg__stats li > span { display: block; margin-top: .3rem; font-size: .88rem; color: var(--steel); line-height: 1.45; }
@media (max-width: 900px) { .team-msg { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ============================================================
   MANUFACTURING FACILITY (added 2026-08-26) — the six capability
   cards from Anurag's brochure page, plus his R&D paragraph.
   Image on top, numbered body below.
   ============================================================ */
.fac-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem; margin-top: 2.4rem;
}
.fac-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.fac-card img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  /* height:auto is load-bearing — the height attribute otherwise becomes a
     real height and cancels the aspect ratio (same trap as .pg-strip img). */
  height: auto;
  background: var(--mist); border-bottom: 1px solid var(--line);
}
.fac-card__tx { padding: 1.15rem 1.3rem 1.3rem; }
.fac-card__num {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
  color: var(--blue-bright); letter-spacing: .08em;
}
.fac-card h3 { margin: .35rem 0 .45rem; font-size: 1.08rem; }
.fac-card p { margin: 0; font-size: .92rem; color: var(--slate); line-height: 1.6; }

/* the R&D note under the grid — the client's own paragraph, quoted whole */
.fac-rnd { margin-top: 2.6rem; padding: 1.5rem 1.6rem; background: var(--mist);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; }
.fac-rnd h3 { margin: 0 0 .55rem; font-size: 1.05rem; }
.fac-rnd p { margin: 0; color: var(--slate); line-height: 1.7; max-width: 90ch; }

@media (max-width: 980px) { .fac-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .fac-grid { grid-template-columns: 1fr; } }

/* Media-page category cards removed 2026-08-31 — the page now carries real
   photo galleries (pj-grid, styled in base.css); the placeholder .media-cat
   cards and their CSS went with them. */
/* Infrastructure page hero centred (Yash 2026-08-31: "align all the headings
   in the centre like the home page"). Scoped by page — the About hero stays
   left-aligned as the founder approved it. The h1/lead carry max-widths, so
   centring the text alone would leave their boxes pinned left. */
body[data-page="infrastructure"] .ab-hero h1,
body[data-page="infrastructure"] .ab-hero .lead { margin-inline: auto; }

/* ===== TEAM PHOTOGRAPHS (Yash 2026-09-01, after reviewing rendered options)
   The two photographs are different shapes — the staff photo is a 2.35:1
   panorama, the ceremony photo is 4:3 — so side by side they could only match
   on height, which left the widths visibly unequal. Stacked at one width they
   align properly instead.
   The panorama is shown COMPLETE and uncropped: people stand right to both
   edges of that frame, so any side crop drops staff out of the picture.
   Only the ceremony photo is cropped, to 16:9 — tested against 2:1 and 2.35:1,
   which both cut the havan and the offerings out of the bottom of the frame.
   Centre position keeps the people and the ceremony together.
   Inside the page margins, matching every other section on this page. */
.team-duo {
  display: grid; gap: 1rem;
  /* identical to .wrap so the photographs line up exactly with the text
     column above them — not merely close to it. */
  width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto;
}
.team-duo img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.team-duo img:last-child { aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }


/* ============================================================
   CAPABILITIES ACCORDION (Anurag's 16 departments, 2026-08-31)
   Native <details>/<summary> — zero JavaScript, so it survives JS being off,
   and the keyboard/screen-reader behaviour is the platform's, not ours.
   Two columns on desktop so 16 rows do not become a 16-screen scroll; one
   column on phones. Open rows span both columns so a long list never squeezes
   into half the width beside a closed neighbour.
   ============================================================ */
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; align-items: start; }
.cap-item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.cap-item[open] { grid-column: 1 / -1; border-color: var(--accent); box-shadow: var(--shadow-sm); }
.cap-item summary {
  display: flex; align-items: center; gap: .85rem; cursor: pointer;
  padding: 1rem 1.15rem; list-style: none; font-weight: 700; color: var(--navy);
}
.cap-item summary::-webkit-details-marker { display: none; }   /* Safari's arrow */
.cap-item summary:hover { color: var(--blue); }
.cap-item summary:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: -3px; }
.cap-num { font-family: var(--font-mono); font-size: .76rem; font-weight: 700; color: var(--blue); }
.cap-title { flex: 1; font-size: 1rem; line-height: 1.35; }
.cap-chev { flex: 0 0 auto; color: var(--steel); transition: transform .18s var(--ease); }
.cap-item[open] .cap-chev { transform: rotate(180deg); }
.cap-body { padding: 0 1.15rem 1.15rem; }
.cap-list { columns: 2; column-gap: 1.6rem; margin: 0; padding-left: 1.1rem; }
.cap-list li { break-inside: avoid; color: var(--slate); font-size: .93rem; margin-bottom: .3rem; }
/* One photo per department (Yash 2026-08-31). It floats beside the list on
   desktop so an open row stays compact; above the list on phones. */
.cap-shot { margin: 0 0 1rem 1.4rem; float: right; width: 30%; }
/* Height is capped and the crop is centred: a 4:3 photo floated beside a short
   list would otherwise be taller than the text and leave a hole under it.
   Measured at 1440 with the shortest list (six lines) and the longest (ten). */
.cap-shot img {
  display: block; width: 100%; height: auto; max-height: 210px; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--line);
}
.cap-body::after { content: ""; display: block; clear: both; }
@media (max-width: 900px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap-list { columns: 1; }
  .cap-shot { float: none; width: 100%; margin-left: 0; }
}