/* ── sections/dotac.css — the dotted split AC, in its own section (owner's round two, item 20) ──
   A full-width dark stage in the colours of an earlier homepage hero, edge to edge
   like the other round-two sections. The live canvas fills the whole section, so the cold air can flow
   out of the unit and across to the words; the unit itself is fitted by dotac.js into .s7d-ac, which is
   the only thing CSS has to place.
   Since the owner's note of 29 Sep the section also carries the two leaders, so it is laid out as:
     • wide screens (≥ 900px): the unit top left, the owner's line under it where its air falls, and the two
       leaders' cards in the right-hand column, centred beside them: side by side from 1000px, and below that
       stacked, each turned on its side (photo left, words right), since upright they were too narrow there;
     • portrait tablets and phones: the unit on top, its air falling to the line centred below it, and under that
       the two cards stacked, each on its side.
   About 690px tall on a 1366 × 900 laptop, 580px at 1024, 890px on a 375 phone.
   Nothing starts hidden except under full motion (the shared .rv6 rise-in of the line and the cards), so reduced
   motion, ?static=1 or a script failure all show the finished section. */

.s7d-root {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: calc(var(--s7-sec) * 1.15);   /* off the site's section step (round three: 99px at 1366 x 900, was 77) */
  color: #D5E1EE;
  /* the stage: deep navy, a cold blue glow where the unit hangs, a faint warm one low right */
  background:
    radial-gradient(46% 62% at 30% 34%, rgba(40, 120, 220, .24), transparent 70%),
    radial-gradient(36% 50% at 86% 96%, rgba(247, 183, 68, .05), transparent 70%),
    linear-gradient(180deg, #041326, #06203C 70%, #072646);
}
/* Stacking: grid, canvas, then the words, in source order, with no z-index on any of them. The still picture's
   screen blend (below) needs that: it must blend with the stage itself, not with an isolated layer of its own. */
/* the live dots (dotac.js). It fades in once the first frame is drawn (and the still, if it was shown, fades out) */
.s7d-root .s7d-canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity .9s var(--ease); pointer-events: none;
}
.s7d-root.is-live .s7d-canvas { opacity: 1; }
/* faint graph paper, strongest round the unit */
.s7d-root .s7d-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(170, 205, 245, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 205, 245, .07) 1px, transparent 1px);
  background-size: 120px 120px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(60% 80% at 30% 38%, #000 20%, transparent 78%);
  mask-image: radial-gradient(60% 80% at 30% 38%, #000 20%, transparent 78%);
}

.s7d-root .s7d-wrap {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(32px, 4.6vw, 72px);
  grid-template-rows: auto 1fr; grid-template-areas: "ac team" "words team";
}
/* the box the unit is fitted into: its ratio is the unit's own outline (dot centres) in its pose, 1200 × 405.5 */
.s7d-root .s7d-ac { grid-area: ac; position: relative; align-self: start; width: 100%; aspect-ratio: 1200 / 405.5; pointer-events: none; }
/* the still: the same outline plus 8px round it for the edge dots (1216 × 422), rendered on black; screen blend
   drops the black, so the dots sit on the stage as the live ones do */
.s7d-root .s7d-poster {
  position: absolute; left: calc(-8 / 1200 * 100%); top: calc(-8 / 405.5 * 100%); width: calc(1216 / 1200 * 100%); height: auto; max-width: none;
  mix-blend-mode: screen; transition: opacity .9s var(--ease);
}
.s7d-root .s7d-poster:not([src]), .s7d-root.is-live .s7d-poster { opacity: 0; }

/* the owner's line, under the unit where its air falls (dotac.js fades the air out as it reaches it) */
.s7d-root .s7d-words { grid-area: words; align-self: end; display: grid; gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(84px, 8.4vw, 124px); }
.s7d-root .s7d-h {
  margin: 0; max-width: 17em;
  font: 400 clamp(28px, 2.9vw, 44px)/1.12 var(--display); letter-spacing: -.016em; color: #fff; text-wrap: pretty;
  text-shadow: 0 2px 24px rgba(4, 19, 38, .55);            /* keeps the words crisp where the cold air drifts behind them */
}
.s7d-root .s7d-h em { font-style: italic; color: var(--gold-60); }

/* ── the two leaders (owner's note of 29 Sep) ──
   A solid navy card each, beside the unit and the line: the photo, then the name, the title in gold caps, the
   deck's background lines and a LinkedIn button, which sits on the card's bottom edge so the two buttons line up
   however many lines the background takes. The photos get no tint or overlay, only a hairline edge, so they stay
   as warm and sharp as the originals. The cards are painted over the canvas (source order), so the air never
   drifts across a face. */
.s7d-root .s7d-team {
  grid-area: team; align-self: center; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 16px);
}
.s7d-root .s7d-lead {
  display: flex; flex-direction: column; min-width: 0; padding: 8px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 58%), var(--navy-deep);
  border: 1px solid rgba(186, 206, 223, .18);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .7);
}
.s7d-root .s7d-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px;
  background: var(--navy);                                  /* while it loads */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.s7d-root .s7d-who { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 14px 8px 6px; text-align: left; }
.s7d-root .s7d-name { margin: 0; font: 400 clamp(21px, 1.75vw, 25px)/1.1 var(--display); letter-spacing: -.012em; color: #fff; }
.s7d-root .s7d-role { margin: 7px 0 10px; font: 700 11px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.s7d-root .s7d-cv { display: grid; gap: 3px; margin: 0 0 16px; font: 500 13.5px/1.42 var(--font); color: rgba(213, 225, 238, .84); text-wrap: pretty; }
.s7d-root .s7d-cv p { margin: 0; }
.s7d-root .s7d-cv b { font-weight: 700; color: #fff; }
.s7d-root .s7d-nw { white-space: nowrap; }                 /* never "Ex-" at a line end */
/* LinkedIn: an outline pill on the card, filled white on hover (opens the profile in a new tab) */
.s7d-root .s7d-in {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px 0 12px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06);
  font: 700 13px/1 var(--font); letter-spacing: .01em; color: #fff; text-decoration: none; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.s7d-root .s7d-in svg { flex: none; }
.s7d-root .s7d-in:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* the hint, for a mouse only (touch visitors get the ripple on a tap instead) */
.s7d-root .s7d-hint {
  position: absolute; left: max(var(--s7-gutter), (100% - var(--s7-max)) / 2); bottom: clamp(18px, 3.4vh, 34px);
  margin: 0; pointer-events: none; display: none;
  font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(190, 225, 255, .62);
  transition: opacity .6s ease;
}
.s7d-root .s7d-hint::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; vertical-align: middle; background: currentColor; }
@media (hover: hover) and (pointer: fine) { .s7d-root .s7d-hint { display: block; } }
.s7d-root:not(.is-live) .s7d-hint, .s7d-root.touched .s7d-hint { opacity: 0; }   /* only while the live unit is there to answer */

html.fx-reduce .s7d-root :is(.s7d-canvas, .s7d-poster) { transition: none; }

/* laptops and small desktops: the unit a touch smaller so the words keep their room */
@media (max-width: 1180px) {
  .s7d-root .s7d-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .s7d-root .s7d-h { font-size: clamp(27px, 3.1vw, 36px); }
}
/* portrait tablets and phones: the unit on top, the air falling to the line centred below, the two cards under it */
@media (max-width: 899px) {
  .s7d-root { padding-block: calc(var(--s7-sec) * 1.05); }   /* 67px on a phone (was 57) */
  .s7d-root .s7d-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "ac" "words" "team"; justify-items: center; }
  .s7d-root .s7d-ac { width: min(560px, 94%); }
  .s7d-root .s7d-words { margin-top: clamp(118px, 30vw, 190px); justify-items: center; text-align: center; }
  .s7d-root .s7d-h { font-size: clamp(26px, 6.4vw, 36px); max-width: 20em; text-wrap: balance; }
  .s7d-root .s7d-team { width: 100%; max-width: 560px; margin-top: clamp(28px, 6vw, 40px); }
  .s7d-root .s7d-hint { left: 50%; transform: translateX(-50%); white-space: nowrap; }   /* a narrow window with a mouse */
  .s7d-root .s7d-grid {
    -webkit-mask-image: radial-gradient(90% 46% at 50% 22%, #000 20%, transparent 80%);
    mask-image: radial-gradient(90% 46% at 50% 22%, #000 20%, transparent 80%);
  }
  .s7d-root { background:
    radial-gradient(70% 34% at 50% 20%, rgba(40, 120, 220, .26), transparent 72%),
    linear-gradient(180deg, #041326, #06203C 70%, #072646); }
}
/* below 1000px: each card on its side, photo left and words right, the two stacked (side by side they were too
   narrow on a phone for "Seemant Sharma" and the backgrounds, cramped from 900 to 1000px, and too tall on a tablet).
   The photo fills the card's height, and the rows are equal (1fr), so both photos get the same box whatever each
   background's line count: object-fit then gives both the same head size and eye line, as the files have. */
@media (max-width: 999px) {
  .s7d-root .s7d-team { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 12px; }
  .s7d-root .s7d-lead { display: grid; grid-template-columns: clamp(104px, 32vw, 140px) minmax(0, 1fr); align-items: stretch; }
  .s7d-root .s7d-photo { height: 100%; min-height: 124px; aspect-ratio: auto; }
  .s7d-root .s7d-who { padding: 6px 4px 4px 14px; }
  .s7d-root .s7d-name { font-size: 22px; }
  .s7d-root .s7d-role { margin-bottom: 8px; }
  .s7d-root .s7d-cv { margin-bottom: 12px; font-size: 13px; }
}