/* ==========================================================================
   MTech Engineering — ABOUT section layer (light)                  about3d.css
   --------------------------------------------------------------------------
   The About family (Message from the CEO, and the pages that follow it) is on
   the SAME design system as the home and service pages: same type scale, same
   spacing rhythm, same HUD, same section head, checks list, card matrix,
   standard chips, related cards, CTA band, buttons and footer. It layers on
   top of home3d.css exactly the way service3d.css layers on it.

   The theme is the site's standard light theme. Two scenes stand behind these
   pages, both in the same daylight: the executive desk where the letter is
   signed (about3d.js, the Message from the CEO page) and the discipline model
   of a building, one system lit at a time (aboutfirm3d.js, the firm overview).
   Either way the canvas reads as part of the page rather than an inset.

   Ownership: a component that more than one page family renders belongs to
   home3d.css (section 11) — the card matrix, standards strip, related list and
   four-column facts strip are all there, not here. This file owns only what is
   scoped to body.hx-abt, so an About page never has to know which family sheet
   happened to declare a shared component first.

   What this file adds — the only pieces that are not shared furniture:
     · the hero letter: the CEO's portrait, salutation, message and signature
     · the studio plate: the story and the four points, two columns wide
     · the scroll-focus plate: on the live-model page a plate's opacity answers
       how far its middle is from the middle of the window, so the copy being
       read is solid and the copy on its way out lets the model through (§5)
   Everything else on the page is home3d.css — including .hx-plate, the paper
   surface every block of body copy sits on (the About pages are read over a
   lit render, and unplated prose on that render is a contrast problem).

   Depends: assets/css/main.css, home3d.css      Scope: body.hx-abt
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PLATE
   -------------------------------------------------------------------------- */
.hx.hx-abt { background: var(--hx-bg); }
/* the canvas plate: the same paper white the page sits on */
.hx.hx-abt #gl { background: var(--hx-bg); }

/* --------------------------------------------------------------------------
   2. HERO — the message, and the man who signed it, at the top of the page
   The type stack keeps the home hero's measure (the shared 1.15fr / 0.85fr
   copy grid, so the headline and the lead are the same width here as on every
   other 3D page); the letter plate below it spans BOTH columns, i.e. the full
   container — the block a visitor reads first lines up with the commitments
   matrix and every other section instead of floating in a narrow right column.
   -------------------------------------------------------------------------- */
/* The hero is a header, not a screen: it holds the headline, the lead and the
   letter, and then it gets out of the way. Capped so a 1440x900 visitor sees
   the signed letter inside the fold and the studio section immediately after,
   instead of a full viewport of sky between the two. */
.hx-abt .hx-hero { min-height: min(78svh, 700px); }
.hx-abt .hx-hero__inner { padding-bottom: clamp(18px, 3vh, 34px); }
/* the hero veil runs top-down: the headline is protected at the top, and the
   desk gets the bottom of the frame back so the render is not flat white */
.hx-abt .hx-hero::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 34%, rgba(255, 255, 255, 0.34) 66%, rgba(255, 255, 255, 0.12) 100%);
}
.hx-abt .abt-letter {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr) minmax(190px, 246px);
  gap: clamp(18px, 2.2vw, 34px);
  align-items: start;
  /* the whole letter has to clear the fold on a 1440x900 screen: the margin,
     padding and quote size below are tuned to that, and the signature is the
     last thing you should be able to read without scrolling */
  margin-top: clamp(12px, 1.4vw, 17px);
  padding: clamp(12px, 1.4vw, 17px);
  background: var(--hx-panel);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-r);
  box-shadow: var(--hx-shadow);
  backdrop-filter: blur(6px);
}
.hx-abt .abt-letter__body { min-width: 0; }
.hx-abt .abt-letter__salute {
  margin: 0 0 12px;
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hx-dim);
}
/* the quote keeps a readable measure: the plate is a third of a screen wider
   than the column this text used to sit in, and a 110-character line is not a
   letter, it is a ticker */
.hx-abt .abt-letter .abt-quote { font-size: clamp(1.05rem, 1.22vw, 1.12rem); line-height: 1.55; max-width: 70ch; }
.hx-abt .abt-letter .abt-quote::before { width: 42px; height: 2px; margin-bottom: 14px; }
.hx-abt .abt-letter .abt-portrait { padding: 6px; box-shadow: none; }
.hx-abt .abt-letter .abt-portrait figcaption { padding: 8px 2px 0; }
/* the signature owns the third column of the plate: on letterhead the name
   sits beside the body, not under it, and it gives the wide plate a right edge */
.hx-abt .abt-letter__sig {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0 0 0 clamp(18px, 2vw, 30px);
  border-top: 0;
  border-left: 1px solid var(--hx-line);
}
.hx-abt .abt-letter__sig .abt-sig__rule { flex: none; width: 100%; }

/* --------------------------------------------------------------------------
   2b. TITLE BLOCK — the studio overview's hero artifact
   The CEO page's hero carries a signed letter; this page carries the block a
   drawing set is identified by. Same plate, same span (both columns of the
   copy grid, i.e. the full container), different artifact — a ruled key/value
   block on the left and the firm's position on the right.
   -------------------------------------------------------------------------- */
.hx-abt .abt-tblock {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(18px, 2.2vw, 34px);
  align-items: center;
  margin-top: clamp(12px, 1.4vw, 17px);
  padding: clamp(12px, 1.4vw, 17px);
  background: var(--hx-panel);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-r);
  box-shadow: var(--hx-shadow);
  backdrop-filter: blur(6px);
}
/* the sheet itself: a hairline-ruled block, closed on all four sides so it
   reads as a page inside the plate rather than a loose list */
.hx-abt .abt-tblock__sheet {
  border: 1px solid var(--hx-line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}
.hx-abt .abt-tblock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--hx-line);
  background: rgba(11, 95, 191, 0.045);
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hx-dim);
}
.hx-abt .abt-tblock__rows { margin: 0; }
.hx-abt .abt-tblock__rows > div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 13px;
  border-top: 1px solid var(--hx-line);
}
.hx-abt .abt-tblock__rows > div:first-child { border-top: 0; }
.hx-abt .abt-tblock__rows dt {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hx-dim);
  padding-top: 3px;
}
.hx-abt .abt-tblock__rows dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hx-navy);
  letter-spacing: -0.01em;
}
.hx-abt .abt-tblock__note { min-width: 0; }
.hx-abt .abt-tblock__note .eyebrow { display: inline-flex; margin-bottom: 10px; }
.hx-abt .abt-tblock__note p {
  margin: 0 0 10px;
  max-width: 62ch;
  color: var(--hx-mute);
  font-size: clamp(1.05rem, 1.1vw, 1.06rem);
  line-height: 1.66;
}
.hx-abt .abt-tblock__note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   3. PORTRAIT, QUOTE, SIGNATURE — the letter furniture
   -------------------------------------------------------------------------- */
.hx-abt .abt-portrait {
  position: relative;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-r);
  background: linear-gradient(165deg, #ffffff, #eef3fa);
  box-shadow: var(--hx-shadow);
}
.hx-abt .abt-portrait img {
  width: 100%;
  /* height:auto beats the height attribute's presentational hint — without it
     the photo renders at its attribute height (stretched, not 5:6) */
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: calc(var(--hx-r) - 4px);
  filter: saturate(0.94) contrast(1.03);
}
.hx-abt .abt-portrait figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 4px 2px;
}
.hx-abt .abt-portrait figcaption b { font-family: var(--hx-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hx-blue); }
.hx-abt .abt-portrait figcaption span { font-family: var(--hx-mono); font-size: 13.5px; color: var(--hx-dim); }

.hx-abt .abt-quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.66rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--hx-navy);
  letter-spacing: -0.01em;
}
.hx-abt .abt-quote::before {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, var(--hx-red), transparent);
}
.hx-abt .abt-sig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--hx-line);
}
.hx-abt .abt-sig__name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--hx-navy); }
.hx-abt .abt-sig__role { font-family: var(--hx-mono); font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--hx-dim); }
.hx-abt .abt-sig__rule { flex: 1 1 40px; height: 1px; background: var(--hx-line-2); }

/* --------------------------------------------------------------------------
   4. THE STUDIO SECTION — one wide plate, story on the left, points on the
      right. It used to be a portrait collage of two photographs beside a
      narrow copy column; the section is landscape now, the same shape as the
      commitments and regulation sections, and the plate is what keeps the
      prose off the render.
   -------------------------------------------------------------------------- */
.hx-abt .abt-studio {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 32px);
  /* the points column is the taller of the two; centring the story against it
     spends the difference on both sides instead of pooling it under the text */
  align-items: center;
}
.hx-abt .abt-studio__story p {
  margin: 0 0 16px;
  color: var(--hx-mute);
  line-height: 1.72;
}
.hx-abt .abt-studio__story p:last-child { margin-bottom: 0; }
/* the letter drops a capital, the way a signed statement does */
.hx-abt .abt-studio__story p:first-child::first-letter {
  float: left;
  margin: 6px 10px 0 0;
  font-family: var(--font-display);
  font-size: 3.05rem;
  font-weight: 700;
  line-height: 0.82;
  color: var(--hx-blue);
}
.hx-abt .abt-studio__points .checks { margin: 0; }
/* --------------------------------------------------------------------------
   5. SCROLL-FOCUS PLATES — opt-in per page, <body data-plate-fade>
   The About pages are read over a live render, so their copy stands on a
   translucent plate. That plate is also exactly what hides the render: it is
   opaque right where the reader is looking. So the plates answer the scroll —
   and they answer it PER ROW, not per card.

   plate-fade.js samples each surface at five heights and writes the result on
   it as keep factors: --plate-1 … --plate-5 (its 0 / 25 / 50 / 75 / 100% rows,
   where 1 is the authored surface and 0.1 — a tenth of the white, so 90%
   transparent — is what a row keeps once it is a third of a window off the
   middle) and --plate-fx, the value at its centre, for what cannot be per-row:
   the backdrop blur, and a grid container's hairline fill. The roll opens with
   a flat band around the centre (plate-fade.js DEAD), so the row crossing the
   middle of the window keeps everything while the rows above and below it have
   already begun to let go. ONE CARD therefore carries several transparencies at
   once — solid where it is being read, clearing towards its ends — which is
   what keeps a tall plate legible in the middle and the render visible around
   it.

   Each surface declares the two alphas the site already paints it at, top and
   bottom (--plate-top / --plate-bottom); the three rows in between are
   interpolated from them. Those numbers come from home3d.css and this file's
   §3–§4, so with no script — or no WebGL, or a page that has not opted in —
   every rule here is exactly the surface the site already had. The shared
   defaults cover anything that has no business being special.

   The card matrix's background transition is switched off: it was there for
   hover, and a 0.45s transition on a value that changes on every scroll frame
   drags a smear behind the wheel.
   -------------------------------------------------------------------------- */
body[data-plate-fade] {
  --plate-top: 0.88;                   /* the shared plate: top and bottom */
  --plate-bottom: 0.72;
}
body[data-plate-fade] :is(
  .hx-plate,
  .grid-2 > div[data-reveal="right"],
  .section-head,
  .card,
  .info-tile,
  .rel-card,
  .std-chip,
  .hx-facts > div,
  .abt-letter,
  .abt-tblock
) {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, calc(var(--plate-top) * var(--plate-1, 1))) 0%,
    rgba(255, 255, 255, calc((0.75 * var(--plate-top) + 0.25 * var(--plate-bottom)) * var(--plate-2, 1))) 25%,
    rgba(255, 255, 255, calc((0.50 * var(--plate-top) + 0.50 * var(--plate-bottom)) * var(--plate-3, 1))) 50%,
    rgba(255, 255, 255, calc((0.25 * var(--plate-top) + 0.75 * var(--plate-bottom)) * var(--plate-4, 1))) 75%,
    rgba(255, 255, 255, calc(var(--plate-bottom) * var(--plate-5, 1))) 100%) !important;
}
/* only the prose plates frost what is behind them. The tiles are dozens to a
   page, and a blur each is a bill the phone pays for every scroll frame. */
body[data-plate-fade] :is(.hx-plate, .grid-2 > div[data-reveal="right"], .section-head, .abt-letter, .abt-tblock) {
  backdrop-filter: blur(calc(2px + 7px * var(--plate-fx, 1)));
}

/* --- the authored values, one line per surface, straight from the sheets ---- */
body[data-plate-fade] .hx-plate,
body[data-plate-fade] .grid-2 > div[data-reveal="right"] { --plate-top: 0.92; --plate-bottom: 0.66; }
body[data-plate-fade] .section-head { --plate-top: 0.90; --plate-bottom: 0.66; }
body[data-plate-fade] .card { --plate-top: 0.86; --plate-bottom: 0.86; }          /* main.css paints it flat */
body[data-plate-fade] .hx-matrix .card { --plate-top: 0.985; --plate-bottom: 0.985; transition: none; }
body[data-plate-fade] .hx-facts > div { --plate-top: 0.84; --plate-bottom: 0.84; }
body[data-plate-fade] .std-chip,
body[data-plate-fade] .rel-card { --plate-top: 0.94; --plate-bottom: 0.94; }
body[data-plate-fade] .info-tile { --plate-top: 1; --plate-bottom: 1; }
body[data-plate-fade] .abt-letter,
body[data-plate-fade] .abt-tblock { --plate-top: 0.86; --plate-bottom: 0.86; }
/* hover still restores a tile: that is the affordance, and a reader who has
   stopped to point at a card is not reading the render through it */
body[data-plate-fade] .hx-matrix .card:hover { background: #fff !important; }

/* the lead-out cell of a matrix is a blue tint rather than white, so it fades
   its own two colours — the same treatment, different pair */
body[data-plate-fade] .hx-matrix__more {
  background: linear-gradient(180deg,
    rgba(228, 238, 251, calc(var(--plate-1, 1))) 0%,
    rgba(241, 247, 253, calc(var(--plate-3, 1))) 50%,
    rgba(255, 255, 255, calc(var(--plate-5, 1))) 100%) !important;
}

/* A grid container carries no surface of its own — only the hairline colour
   showing in the 1px gaps between its tiles, and under them. Once the tiles
   have let go, THAT is the block still covering the render, so it fades on the
   container's own centre value. color-mix keeps it tied to --hx-line instead of
   repeating the token's 0.14 here, where it could drift. */
body[data-plate-fade] :is(.hx-matrix, .hx-facts, .std-strip, .related) {
  background-color: color-mix(in srgb, var(--hx-line) calc(var(--plate-fx, 1) * 100%), transparent);
}

/* --------------------------------------------------------------------------
   6. THE LIVE-MODEL VEILS — <body data-abt="model">
   This page exists to show a modelling scene, and the site's veils were drawn
   for a page whose scene sits in the lower third of the hero. Two changes, both
   about WHERE the white is rather than how much of it there is:
     · the hero veil runs left-to-right instead of top-to-bottom. The copy column
       keeps its protection; the right of the frame, where the model is framed,
       is left clear — plus a short band at the very top, because no scene should
       sit under the breadcrumb.
     · the fixed page veil loses most of its bottom-up wash, which was laying 55%
       white over the middle of every viewport, i.e. over the model.
   Message from the CEO keeps the original veils: its desk sits low in the frame,
   and the top-down veil is what makes the letter read.
   -------------------------------------------------------------------------- */
body.hx[data-abt="model"] .hx-hero::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0) 26%),
    linear-gradient(97deg,
      rgba(255, 255, 255, 0.90) 0%,
      rgba(255, 255, 255, 0.62) 34%,
      rgba(255, 255, 255, 0.14) 62%,
      rgba(255, 255, 255, 0) 100%) !important;
}
body.hx[data-abt="model"]::before {
  background:
    radial-gradient(120% 80% at 78% 42%, rgba(47, 143, 255, 0.06), transparent 62%),
    radial-gradient(160% 120% at 50% 110%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(150% 120% at 50% 50%, transparent 62%, rgba(232, 239, 248, 0.26) 100%) !important;
}

/* --------------------------------------------------------------------------
   7. SHARED FURNITURE — the standard light values, nothing re-invented
   -------------------------------------------------------------------------- */
.hx-abt .fab { background: rgba(255, 255, 255, 0.9); border-color: var(--hx-line); color: var(--hx-navy); }
.hx-abt .site-header { box-shadow: 0 1px 0 rgba(12, 42, 84, 0.08); }

/* --------------------------------------------------------------------------
   8. ART-DIRECTION SWITCH — ?solo3d
   The scene is judged with the page curtain out of the way: no copy, no HUD,
   no scrim. Dev-only; the flag lives in the URL and nowhere else.
   -------------------------------------------------------------------------- */
html.abt-solo .hx::before,
html.abt-solo .hx::after,
html.abt-solo .hx-hero::after { display: none !important; }
html.abt-solo main > section > *:not(.hx-hud),
html.abt-solo .site-header,
html.abt-solo .site-footer,
html.abt-solo .hx-hud__hint,
html.abt-solo .hx-rail,
html.abt-solo .fab-stack { visibility: hidden !important; }

/* --------------------------------------------------------------------------
   9. RHYTHM — the About family runs tighter than the shared chapter spacing
   Home and a service page are model-led: their sections need air around the
   render. An About page is prose-led, and 46–78px of padding per section side
   reads as a gap rather than breathing room. The section hairline and the
   section head already carry the separation, so the padding can come down
   without the page filling up. Everything here is family-scoped; the shared
   values in home3d.css are untouched.
   -------------------------------------------------------------------------- */
.hx-abt .section { padding: clamp(26px, 2.4vw, 38px) 0; }
.hx-abt .section-head {
  padding: clamp(12px, 1.3vw, 16px) clamp(18px, 2vw, 24px);
  margin-bottom: clamp(14px, 1.5vw, 18px);
}
.hx-abt .section-head .hx-idx { margin-bottom: 8px; }
.hx-abt .section-head .h-2 { margin-top: 7px; margin-bottom: 8px; }
.hx-abt .section-head .lead { margin-bottom: 0; }
.hx-abt .hx-plate { padding: clamp(16px, 1.7vw, 22px); }
.hx-abt .grid-2 { gap: clamp(18px, 2.1vw, 28px); }
.hx-abt .checks li + li { margin-top: 10px; }
/* the shared card keeps a 196px floor for the model-led pages, where a row of
   short cards would look unfinished under a 3D render. On a prose page the
   floor is just air, so the cards size to their text. */
.hx-abt .hx-matrix .card { min-height: 0; }
/* two-up matrix: the mission/vision pair. No other family renders a 2-across
   tile matrix, so the variant lives here rather than in the shared layer. */
.hx-abt .hx-matrix--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------------------- */
/* two columns of plate, and the signature folds back under the body */
@media (max-width: 1180px) {
  .hx-abt .abt-letter { grid-template-columns: 190px minmax(0, 1fr); }
  .hx-abt .abt-letter__sig {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 6px 16px;
    margin-top: 4px;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--hx-line);
  }
  .hx-abt .abt-letter__sig .abt-sig__rule { flex: 1 1 40px; width: auto; }
}
@media (max-width: 1024px) {
  .hx-abt .abt-studio { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* the title block stacks: the sheet first, the position under it */
  .hx-abt .abt-tblock { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hx-abt .hx-matrix--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hx-abt .hx-hero { min-height: auto; padding-bottom: 30px; }
  .hx-abt .abt-letter { grid-template-columns: 118px minmax(0, 1fr); gap: 14px; padding: 13px; }
  .hx-abt .abt-letter__salute { margin-bottom: 9px; letter-spacing: 0.14em; }
  .hx-abt .abt-letter .abt-quote { font-size: 1.08rem; line-height: 1.58; }
  .hx-abt .abt-letter .abt-quote::before { width: 34px; margin-bottom: 11px; }
  .hx-abt .abt-letter__sig { gap: 4px 10px; padding-top: 11px; }
  .hx-abt .abt-sig__name { font-size: 1.05rem; }
  .hx-abt .abt-tblock__rows > div { grid-template-columns: 88px minmax(0, 1fr); padding: 7px 11px; }
  .hx-abt .abt-tblock__rows dd { font-size: 1.02rem; }
}
@media (max-width: 560px) {
  .hx-abt .abt-letter { grid-template-columns: minmax(0, 1fr); }
  .hx-abt .abt-letter .abt-portrait { width: min(60%, 200px); }
}

/* --------------------------------------------------------------------------
   Kicker row — match the home page's section heads
   The base sheet gives .hx-idx a full-width ::after rule, which pushes the
   eyebrow onto its own line. On home the kicker and eyebrow share one row
   ("06 Brief · Ready when you are"); the About pages now do the same.
   -------------------------------------------------------------------------- */
.hx-abt .section-head .hx-idx { display: inline-flex; margin-bottom: 0; }
.hx-abt .section-head .hx-idx::after { content: none; }
.hx-abt .section-head .eyebrow { margin: 0 0 10px; }