/* arvindtogra.com: sunrise over India, Barcelona and Dubai */

@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url("../fonts/mona-sans-latin-standard-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url("../fonts/mona-sans-latin-ext-standard-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens: morning sky, navy ink, glass */
:root {
  --ink: #12233C;
  --ink-2: #3E516B;
  --ink-3: #5F7189;
  --navy: #16294A;
  --gold: #E9962B;

  --glass: rgb(255 255 255 / 0.52);
  --glass-strong: rgb(255 255 255 / 0.72);
  --glass-edge: rgb(255 255 255 / 0.85);
  --glass-shadow: 0 12px 32px -14px rgb(18 35 60 / 0.32);

  --font: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --scene-h: clamp(15rem, 42svh, 32rem);
  --scene-ratio: 5.1724;
  --max: 88rem;   /* the frame: every page's header, content and corners share its edges */
  --gutter: clamp(1rem, 4vw, 3rem);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #E7EEF5;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
svg { display: block; }
/* shared drawings (the flags), kept rendered so their clip path works everywhere */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }   /* a heading that needs two lines gets two even ones */
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 999px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 30;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 1rem; }

/* Glass, used for the header, chips and secondary buttons */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgb(255 255 255 / 0.95);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-gloss {
  background: linear-gradient(180deg, #36598F 0%, #1C335A 52%, #14274A 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -3px 8px rgb(0 0 0 / 0.22),
    0 14px 28px -12px rgb(20 39 74 / 0.65);
}
.btn-gloss::before {
  content: "";
  position: absolute;
  inset: 1px 1px 52% 1px;
  border-radius: 999px 999px 18px 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.04));
  pointer-events: none;
}
.btn-gloss::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.5), rgb(255 255 255 / 0));
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.btn-gloss:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -3px 8px rgb(0 0 0 / 0.2), 0 18px 32px -12px rgb(20 39 74 / 0.7); }

.btn-glass { color: var(--ink); }
.btn-glass:hover { background: var(--glass-strong); }

.btn-sm { min-height: 2.6rem; padding: 0.55rem 1.15rem; font-size: 0.975rem; }

/* Header: a floating glass bar, flat. Arvind and the ways to reach him on the left, the sections in the
   middle, the day and the time in India on the right. */
.site-header {
  position: absolute;
  top: 1rem;
  left: 50%;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "id nav now";
  align-items: center;
  column-gap: 1rem;
  width: min(var(--max), 100% - 2 * var(--gutter));   /* the frame */
  padding: 0.45rem 1.35rem 0.45rem 0.45rem;
  border-radius: 999px;
  transform: translateX(-50%);
}

.id { grid-area: id; display: flex; align-items: center; gap: 0.85rem; min-width: 0; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.125rem;
  font-weight: 720;
  font-stretch: 105%;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.reach { display: flex; gap: 0.15rem; }
.icon-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: var(--ink-2);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.icon-link:hover,
.icon-link[aria-current="page"] { background: rgb(255 255 255 / 0.65); color: var(--ink); }
.icon-link svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* a service's own logo, as its owner supplies it */
.icon-link .brand-logo { display: block; width: 1.25rem; height: 1.25rem; }

/* the contact links name themselves on hover and on keyboard focus */
.icon-link[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.icon-link[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) {
  .icon-link[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
}

.nav { grid-area: nav; display: flex; gap: 0.25rem; }
.nav a {
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.975rem;
  font-weight: 560;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav a:hover { background: rgb(255 255 255 / 0.65); color: var(--ink); }

/* the right end: the time in India, then Upvote, Downvote and Suggest (feedback.js) */
.end {
  grid-area: now;
  justify-self: end;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.react { display: flex; gap: 0.1rem; padding-left: 0.6rem; border-left: 1px solid rgb(18 35 60 / 0.12); }
.react .icon-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.react .icon-link[aria-pressed="true"] { background: rgb(255 255 255 / 0.75); color: #2F4C78; }
.react .icon-link[aria-pressed="true"] svg { fill: #2F4C78; stroke: #2F4C78; }
/* the last button's name opens leftward, so it never reaches past the screen's edge */
.react .icon-link:last-child[data-tip]::after { left: auto; right: 0; transform: translateY(-3px); }
.react .icon-link:last-child[data-tip]:focus-visible::after { transform: none; }
@media (hover: hover) {
  .react .icon-link:last-child[data-tip]:hover::after { transform: none; }
}
/* thanks for a vote, under the buttons for a few seconds */
.react-note {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem 0.55rem 0.9rem;
  border-radius: 0.85rem;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 560;
  white-space: nowrap;
  box-shadow: 0 14px 28px -14px rgb(14 28 51 / 0.6);
}
.react-note[hidden] { display: none; }
.react-note-go {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 999px;
  background: none;
  color: #FFFFFF;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.react-note-go:hover { background: rgb(255 255 255 / 0.12); }
@media (prefers-reduced-motion: no-preference) {
  .react-note { animation: lift 0.25s ease-out both; }
}

.now {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink-3);
  font-size: 0.9375rem;
  white-space: nowrap;
}
.now-time {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 60rem) {
  .now-date { display: none; }
}
/* Narrower: the menu and the time take a second row, the menu at its left, under Arvind's name, the time
   and the feedback buttons at its right (a centred menu left a gap under the name) */
@media (max-width: 56rem) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "id id" "nav now";
    row-gap: 0.35rem;
    padding: 0.45rem 0.95rem 0.4rem 0.45rem;
    border-radius: 1.65rem;
  }
  .id { justify-content: space-between; }
  /* the last link sits at the bar's right end: its name opens leftward, so it never reaches past the
     screen's edge (even unseen, it would let a phone scroll sideways) */
  .reach .icon-link:last-child[data-tip]::after { left: auto; right: 0; transform: translateY(-3px); }
  .reach .icon-link:last-child[data-tip]:focus-visible::after { transform: none; }
}
@media (max-width: 56rem) and (hover: hover) {
  .reach .icon-link:last-child[data-tip]:hover::after { transform: none; }
}
/* narrower still: the same rows, closer together */
@media (max-width: 36rem) {
  .site-header { column-gap: 0.5rem; }
  .nav a { padding: 0.45rem 0.75rem; }
  .end { gap: 0.45rem; }
  .react { padding-left: 0.4rem; }
  .react .icon-link { width: 2.15rem; height: 2.15rem; }
}
@media (max-width: 24.5rem) {
  .now { display: none; }
  .react { padding-left: 0; border-left: 0; }
}
@media (max-width: 23rem) {
  .brand { gap: 0.5rem; font-size: 1rem; }
  .icon-link { width: 2.2rem; height: 2.2rem; }
}

/* Keys (the booking page): buttons that stand off the card like pressed metal keys, lit from above.
   The stacked shadows under each key are its edge; a chosen key loses its edge and darkens, sunk into
   the card. A key's face never moves at rest, chosen or not, so the labels in a row share one line;
   it lifts only under the pointer and dips only while pressed. */
.key {
  --edge: 0 1px 0 #C6D1DF, 0 2px 0 #B8C5D6, 0 3px 0 #ACBBCE, 0 4px 0 #A2B2C7;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FA 46%, #DFE6F0 100%);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 -2px 3px rgb(46 76 120 / 0.1),
    var(--edge),
    0 9px 14px -7px rgb(18 35 60 / 0.5);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.975rem;
  font-weight: 620;
  letter-spacing: 0.005em;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.95), 0 -1px 0 rgb(18 35 60 / 0.1);
  white-space: nowrap;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.key:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 -2px 3px rgb(46 76 120 / 0.1),
    var(--edge), 0 5px 0 #99AAC1,
    0 14px 18px -8px rgb(18 35 60 / 0.5);
}
.key:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px rgb(46 76 120 / 0.18),
    inset 0 -1px 0 rgb(255 255 255 / 0.8),
    0 1px 0 #C8D3E1,
    0 3px 6px -4px rgb(18 35 60 / 0.4);
}
/* a chosen key stays pressed in, and turns dark */
.key.is-on,
.key[aria-pressed="true"],
.key:has(> input:checked) {
  transform: none;
  background: linear-gradient(180deg, #2C4B7B 0%, #1A2F52 100%);
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 0.35),
    inset 0 -1px 0 rgb(255 255 255 / 0.12),
    0 1px 0 #C6D1DF;
  color: #FFFFFF;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.3);
}
.key svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.key-round { width: 2.5rem; padding: 0; }

/* Hero: the morning sky */
.hero {
  /* the open sky the words sit in the middle of: from just under the top bar (it floats 1rem down and is
     about 3.6rem tall) to just over the skyline, which reaches up out of its box by 37% of its height */
  --sky-top: 4.6rem;
  --sky-bottom: calc(var(--scene-h) * 0.37);
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: max(40rem, 100svh);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(34% 30% at 79% 76%, rgb(255 226 176 / 0.9), rgb(255 226 176 / 0) 72%),
    linear-gradient(180deg, #A7C9EA 0%, #C3DAF0 24%, #DFE8F1 42%, #F2E4DE 57%, #F8D5C3 68%, #FDCB9C 78%, #FDE1C5 87%, #E6EDF4 100%);
}

/* Thin sunlit clouds */
.hero::after {
  content: "";
  position: absolute;
  inset: 10% -10% auto 38%;
  z-index: 0;
  height: 42%;
  background:
    radial-gradient(30% 9% at 30% 30%, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 70%),
    radial-gradient(22% 6% at 44% 36%, rgb(255 236 214 / 0.7), rgb(255 236 214 / 0) 72%),
    radial-gradient(26% 7% at 72% 18%, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 70%),
    radial-gradient(18% 5% at 80% 24%, rgb(255 231 205 / 0.6), rgb(255 231 205 / 0) 72%),
    radial-gradient(34% 8% at 58% 62%, rgb(255 250 244 / 0.5), rgb(255 250 244 / 0) 70%);
  pointer-events: none;
}

/* Before sunrise: a dusky veil that lifts */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, #4E6488 0%, #7D8CAB 55%, #B4958F 100%);
  opacity: 0;
  pointer-events: none;
}

/* What he does in one line, the five principles he builds on, then the button: on the left, and in the
   middle of the open sky between the top bar and the skyline */
.hero-copy {
  position: relative;
  grid-row: 1;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "principles" "cta";
  align-content: center;
  justify-items: start;
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-top: calc(var(--sky-top) + 1.75rem);
  padding-bottom: calc(var(--sky-bottom) + 1.75rem);
}
.hero h1 { grid-area: title; }
.principles { grid-area: principles; }
.cta { grid-area: cta; }

.hero h1 {
  color: var(--ink);
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  font-weight: 660;
  font-stretch: 104%;
  line-height: 1.04;
  letter-spacing: -0.038em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background: linear-gradient(180deg, #2F4C78 0%, #172C4C 46%, #0E1C33 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.06em;
    margin-bottom: -0.06em;
  }
}

/* The principles, in order along one line of the network that links the cities below: each is a node on
   it, its word for what in bold, what it is about under it. Across on wider screens, down on phones. */
.principles {
  --node: 0.625rem;
  --gap: 1.5rem;
  --line: rgb(47 76 120 / 0.45);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--gap);
  width: min(100%, 50rem);
  margin-top: clamp(1.5rem, 3.6vh, 2.4rem);
}
.principles li {
  position: relative;
  padding-top: calc(var(--node) + 0.9rem);
  color: var(--ink-2);
  font-size: clamp(0.9375rem, 1.25vw + 0.4rem, 1.0625rem);
  font-weight: 480;
  line-height: 1.3;
}
.principles b {
  display: block;
  color: var(--ink);
  font-weight: 660;
  letter-spacing: -0.005em;
}
/* the node */
.principles li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: #2F4C78;
  box-shadow: 0 0 0 2.5px #FFFFFF, 0 0 0 7px rgb(255 255 255 / 0.4), 0 3px 8px 1px rgb(18 35 60 / 0.25);
}
/* the line on to the next node; after the last it runs on a little and fades */
.principles li::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 0.75px);
  left: calc(var(--node) / 2);
  width: calc(100% + var(--gap));
  height: 1.5px;
  background: var(--line);
  transform-origin: 0 50%;
}
.principles li:last-child::after {
  width: 75%;
  background: linear-gradient(90deg, var(--line), rgb(47 76 120 / 0));
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
}

.flag {
  flex: none;
  width: 1.35rem;
  height: 0.9rem;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgb(18 35 60 / 0.22);
}

/* The scene: skyline, sun and water. It keeps its height and crops the outer
   suburbs on narrow screens, so the landmarks stay in view. */
.scene-wrap {
  position: relative;
  grid-row: 2;
  z-index: 1;
  height: max(var(--scene-h), calc(100vw / var(--scene-ratio)));
  margin-top: calc(var(--scene-h) * -0.37);
  overflow: hidden;
}
.scene-pan {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 2400 / 464;
  transform: translateX(-50%);
}
.scene { width: 100%; height: 100%; }

.scene-pan .sun-disc { fill: #FFFDF6; }
.scene-pan .win { fill: #FFFFFF; opacity: 0.38; }
.scene-pan .sheen { opacity: 0.85; }
.scene-pan .glitter { fill: #FFF7E6; opacity: 0.9; }
.scene-pan .ripples { fill: none; stroke: #FFFFFF; stroke-width: 1; stroke-linecap: round; opacity: 0.6; }
.scene-pan .shore { fill: #FFF3DF; opacity: 0.95; }
.scene-pan .glint { fill: #FFFFFF; }

/* Clean energy, greenery, traffic and data */
.scene-pan .tw-mast, .scene-pan .rotor path, .scene-pan .hub { fill: #F8FAFD; stroke: #A3B5CB; stroke-width: 0.6; }
.scene-pan .cells { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 0.5; }
.scene-pan .arm { fill: none; stroke: #EF9F2E; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.scene-pan .palm-trunk { fill: none; stroke: #A88563; stroke-width: 1.8; stroke-linecap: round; }
.scene-pan .frond { fill: none; stroke: #4E9A68; stroke-width: 1.7; stroke-linecap: round; }
.scene-pan .curb { fill: #F3F7FB; }
.scene-pan .lane { fill: none; stroke: #FFFFFF; stroke-width: 1; stroke-dasharray: 10 14; opacity: 0.75; }
.scene-pan .lamp-front { fill: #FFF1C4; stroke: #E2B65C; stroke-width: 0.35; }
.scene-pan .lamp-rear { fill: #E5484D; }
.scene-pan .arc { fill: none; stroke: #FFFFFF; stroke-width: 1.4; stroke-linecap: round; opacity: 0.85; }
.scene-pan .node { fill: #FFFFFF; stroke: #2F4C78; stroke-width: 1.3; }
.scene-pan .node-halo { fill: #FFFFFF; opacity: 0.38; }
.scene-pan .drone-body { fill: #2A3B55; }
.scene-pan .rotor-blur { fill: #2A3B55; opacity: 0.45; }
.scene-pan .blink { fill: #E5484D; }

/* Farmland, wildlife, the sea, trade and energy */
.scene-pan .row-young { fill: none; stroke: #7DB45A; stroke-width: 0.6; opacity: 0.5; }
.scene-pan .row-mustard { fill: none; stroke: #D6A21E; stroke-width: 0.7; opacity: 0.45; }
.scene-pan .mustard-flowers { fill: #FFF6BD; opacity: 0.9; }
.scene-pan .wheat-stalks { fill: none; stroke: #BF893C; stroke-width: 0.7; opacity: 0.55; }
.scene-pan .paddy-tufts { fill: none; stroke: #3F8A5C; stroke-width: 0.7; opacity: 0.6; }
.scene-pan .paddy-water { fill: none; stroke: #EEF8FF; stroke-width: 1; opacity: 0.85; }
.scene-pan .fg-shine { fill: #FFFFFF; opacity: 0.7; }
.scene-pan .roots { fill: none; stroke: #8C6A50; stroke-width: 1; opacity: 0.8; }
.scene-pan .frame { fill: none; stroke: #2A3B55; stroke-width: 1; }
.scene-pan .peacock .legs { fill: none; stroke: #6B5A4A; stroke-width: 0.9; }
.scene-pan .crest { fill: none; stroke: #2A7BD1; stroke-width: 0.6; }
.scene-pan .egret-legs { fill: none; stroke: #4A4A4A; stroke-width: 0.7; }
.scene-pan .egret-neck { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; }
.scene-pan .vine-wire { fill: none; stroke: #B99B6E; stroke-width: 0.4; opacity: 0.6; }
.scene-pan .fl-legs { fill: none; stroke: #E07A94; stroke-width: 0.8; }
.scene-pan .fl-neck { fill: none; stroke: #F5A3B5; stroke-width: 2.2; stroke-linecap: round; }
.scene-pan .crane-steel { fill: none; stroke: #2D5B98; stroke-width: 2.2; stroke-linejoin: round; }
.scene-pan .crane-cable { fill: none; stroke: #2A3B55; stroke-width: 0.6; }
.scene-pan .mast { fill: none; stroke: #6E4A2E; stroke-width: 1.4; }
.scene-pan .rig-steel { fill: none; stroke: #5B6F8C; stroke-width: 2; }
.scene-pan .derrick { fill: none; stroke: #C64B3B; stroke-width: 1.4; }
.scene-pan .panel-legs { fill: none; stroke: #7A8899; stroke-width: 0.8; }
.scene-pan .dc-led { fill: #3BC4E8; }
.scene-pan .dc-lights { fill: #3BC4E8; }
.scene-pan .dune-lines { fill: none; stroke: #FFFFFF; stroke-width: 1.2; opacity: 0.55; }
.scene-pan .bird { fill: none; stroke: #3E516B; stroke-width: 1.5; stroke-linecap: round; }

.scene-pan .ring { fill: none; stroke: #FFFFFF; stroke-width: 1.2; }
.scene-pan .beacon { fill: #E5484D; }
.scene-pan .fan { opacity: 0; }

.places {
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  pointer-events: none;
}
/* each city's flag sits on its node in the data network, on a frosted white tab (the pulsing rings pass
   under it, and live glass would redo its blur on every frame of every pulse) */
.places li {
  position: absolute;
  padding: 3px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 5px 12px -5px rgb(18 35 60 / 0.5);
  transform: translate(-50%, calc(-100% - 10px));
}
.places .flag { width: 1.6rem; height: 1.0667rem; box-shadow: none; }
.places .p-in  { transform: translate(12px, -50%); }
.places .p-dxb { transform: translate(calc(-100% - 12px), -50%); }

@media (max-height: 50rem) and (min-width: 60.01rem) {
  .hero h1 { font-size: clamp(2.1rem, 3.9vw, 3.4rem); }
  .principles { margin-top: 1.3rem; }
  .cta { margin-top: 1.6rem; }
}

@media (max-width: 60rem) {
  .hero h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
}

/* phones: the principles down the screen, one to a line, the line running down through the nodes */
@media (max-width: 43.99rem) {
  .principles {
    --gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--gap);
    width: auto;
    margin-top: 1.4rem;
  }
  .principles li {
    padding: 0 0 0 calc(var(--node) + 0.95rem);
    font-size: 1rem;
    line-height: 1.35;
  }
  .principles b { display: inline; }
  .principles li::before { top: calc(0.675em - var(--node) / 2); }
  .principles li::after {
    top: 0.675em;
    left: calc(var(--node) / 2 - 0.75px);
    width: 1.5px;
    height: calc(100% + var(--gap));
    transform-origin: 50% 0;
  }
  .principles li:last-child::after { width: 1.5px; height: 1.4rem; background: linear-gradient(180deg, var(--line), rgb(47 76 120 / 0)); }
}

/* the scene keeps its height and pans from India to Dubai; it sits under the sky rather than reaching into it */
@media (max-width: 52rem) {
  .hero { --sky-bottom: -1.5rem; }   /* less the gap above the scene */
  .scene-wrap { height: clamp(15.5rem, 36svh, 24rem); margin-top: 1.5rem; }
  .scene-pan { left: 0; transform: translateX(calc(-90% + 100vw)); }
}

/* the sky starts under the header's two rows */
@media (max-width: 56rem) {
  .hero { --sky-top: 7.45rem; }
}

/* a phone */
@media (max-width: 37.5rem) {
  .hero { --sky-bottom: -1rem; }
  .hero h1 { font-size: 2.1rem; }
  .cta { margin-top: 1.6rem; }
  .scene-wrap { margin-top: 1rem; }
}

/* The scene is drawn in still layers that are painted once. Everything that moves is a sprite, a
   small svg of its own placed over the scene, which the browser moves on the compositor. */
.scene-pan > .scene { position: absolute; inset: 0; }
.sprite {
  position: absolute;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.ring-1, .ring-2, .ring-3, .ring-4, .ring-5, .ring-6, .ring-7, .ring-8,
[class*=" glint-"] { opacity: 0; }

/* One morning, in order: the veil lifts, the sun rises, the city is built */
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: veil 2.4s ease-out both; }
  .hero::after { animation: clouds 50s ease-in-out infinite alternate; }
  /* the line rises; then the network line draws through the principles, each node lighting as it
     arrives (one even stroke, no stops); the button comes up on the way */
  .hero h1 { animation: word 0.9s cubic-bezier(0.2, 0.75, 0.25, 1) 0.15s both; }
  .principles li { animation: fade 0.5s ease-out both; }
  .principles li::before { animation: node 0.5s cubic-bezier(0.34, 1.45, 0.5, 1) both; }
  .principles li::after { animation: draw-x 0.34s linear both; }
  .principles li:nth-child(1) { --at: 0.6s; }
  .principles li:nth-child(2) { --at: 0.94s; }
  .principles li:nth-child(3) { --at: 1.28s; }
  .principles li:nth-child(4) { --at: 1.62s; }
  .principles li:nth-child(5) { --at: 1.96s; }
  .principles li,
  .principles li::before,
  .principles li::after { animation-delay: var(--at); }
  @media (max-width: 43.99rem) {
    .principles li::after { animation-name: draw-y; }
  }
  .cta { animation: lift 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s both; }
  .btn-gloss::after { animation: shine 1.1s ease-out 2.6s both; }
  .btn-gloss:hover::after { animation: shine 0.9s ease-out both; }

  /* each building is a sprite that rises out of the ground; its own layer from the start, so nothing is
     drawn for the first time as the city builds (each one's delay is generated below) */
  .scene-pan .bldg {
    will-change: transform;
    animation: rise 0.9s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }
  .places { animation: fade 0.8s ease-out 1.8s both; }

  @media (max-width: 52rem) {
    .scene-pan { animation: pan 14s cubic-bezier(0.45, 0, 0.3, 1) 1.4s both; }
  }
}

.hero.is-offscreen *,
.hero.is-offscreen *::before,
.hero.is-offscreen *::after,
.hero.is-offscreen::after { animation-play-state: paused !important; }

@keyframes veil { from { opacity: 0.62; } to { opacity: 0; } }
@keyframes clouds { from { transform: translateX(2%); } to { transform: translateX(-9%); } }
@keyframes lift { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { transform: translateY(102%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes glint {
  0%, 70%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  80% { opacity: 1; transform: scale(1) rotate(25deg); }
  90% { opacity: 0; transform: scale(0.4) rotate(45deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes word { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }
@keyframes node { from { opacity: 0; transform: scale(0.3); } }
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes draw-y { from { transform: scaleY(0); } }
/* the sheen crosses the button by transform, on the compositor: from left -60% to 130%, 190% of the
   button, is 422% of its own 45% width */
@keyframes shine { from { transform: translateX(0) skewX(-20deg); opacity: 1; } to { transform: translateX(422.22%) skewX(-20deg); opacity: 1; } }
@keyframes ring { from { transform: scale(0.6); opacity: 0.8; } to { transform: scale(2.6); opacity: 0; } }
@keyframes pan { from { transform: translateX(-16.7%); } to { transform: translateX(calc(-90% + 100vw)); } }

/* ---------- Arvind's photo: a round portrait at the left of the top bar ---------- */
.brand-face {
  display: block;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(180deg, #A7C9EA, #F8D5C3);
  box-shadow: 0 0 0 2px #FFFFFF, 0 8px 16px -8px rgb(18 35 60 / 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .brand-face { animation: fade 0.8s ease-out 0.3s both; }
}

/* ---------- Intro: the road so far, before the morning (only when intro-gate.js allows it) ---------- */
.intro { display: none; }
html.has-intro .intro,
html.intro-handoff .intro { display: block; }
html.has-intro,
html.intro-handoff { overflow: hidden; }
/* The page under the intro is painted while the intro loads and then holds still: its morning waits
   until Arvind lands in the top bar, so nothing there is drawn for the first time during the hand-off. */
html.has-intro .hero *,
html.has-intro .hero *::before,
html.has-intro .hero *::after,
html.has-intro .hero::before,
html.has-intro .hero::after { animation-play-state: paused !important; }
html.has-intro .brand-face,
html.intro-handoff .brand-face { animation: none; opacity: 0; }
/* At landing the photo appears at once underneath the clip, which then fades off it: no dip.
   Its white ring draws in on its own. */
html.intro-handoff .brand-face.revealed { opacity: 1; }
html.intro-handoff .brand-face { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); }
html.intro-handoff .brand-face.revealed {
  box-shadow: 0 0 0 2px #FFFFFF, 0 8px 16px -8px rgb(18 35 60 / 0.55);
  transition: box-shadow 0.4s ease;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
}
.intro-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.intro-sky,
.intro-dawn {
  position: absolute;
  inset: 0;
}
.intro-sky {
  overflow: hidden;
  background: linear-gradient(180deg, #0B1830 0%, #172A4C 32%, #33496F 58%, #6F7491 80%, #A88D8B 100%);
}
.intro-dawn {
  opacity: 0;
  background: linear-gradient(180deg, #708AAD 0%, #8EA0BD 28%, #A9AEBF 55%, #BEB2B7 78%, #C7B6B5 100%);
}
.intro-glow {
  position: absolute;
  left: 50%;
  bottom: -34vh;
  width: max(120vh, 90vw);
  height: 84vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 222 176 / 0.9), rgb(255 196 150 / 0.4) 48%, rgb(255 196 150 / 0) 100%);
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
}

.intro-reel {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* One photo at a time, in career order. intro.js sets each card's box (beside Arvind on wide
   screens, above him on tall ones) and glides it in from the right. */
.reel-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 20rem;
  opacity: 0;
  will-change: transform, opacity;
  container-type: inline-size;
}
.reel-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1.1rem;
  background: #DCE5EF;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.6), 0 30px 60px -26px rgb(4 10 24 / 0.75);
}
.reel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.1rem;
  background: linear-gradient(165deg, rgb(255 255 255 / 0.26) 0%, rgb(255 255 255 / 0.06) 30%, rgb(255 255 255 / 0) 46%);
  pointer-events: none;
}
/* The place's name on its photo, sized to the photo, on white so the place's own logo sits on it as
   it was made to (the logo, where there is one, comes first) */
.reel-tag {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  left: 4cqi;
  bottom: 4cqi;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 1em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.95);
  box-shadow: 0 10px 24px -10px rgb(4 10 24 / 0.7), 0 1px 2px rgb(4 10 24 / 0.2);
  color: var(--ink);
  font-size: 0.9375rem;
  font-size: clamp(0.75rem, 3.6cqi, 1.0625rem);
  font-weight: 680;
  letter-spacing: 0.005em;
  line-height: 1.1;
  white-space: nowrap;
}
.reel-tag.has-logo { padding: 0.3em 1.05em 0.3em 0.45em; }
.reel-tag img { display: block; width: auto; height: 2.1em; }

.intro-person {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
.intro-video {
  position: absolute;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}
/* Music and Skip, top right for the whole intro */
.intro-controls {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(var(--gutter), env(safe-area-inset-right));
  z-index: 2;
  display: flex;
  gap: 0.5rem;
  opacity: 0;
}
.intro-controls .sound-toggle {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 0.5);
  background: rgb(8 18 36 / 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
}
.intro-controls .sound-toggle:hover { background: rgb(8 18 36 / 0.62); border-color: rgb(255 255 255 / 0.8); }
.intro-controls .sound-toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.intro-skip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.55rem 1rem 0.55rem 1.2rem;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 999px;
  background: rgb(8 18 36 / 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  font: 600 0.975rem/1 var(--font);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.intro-skip:hover { background: rgb(8 18 36 / 0.62); border-color: rgb(255 255 255 / 0.8); }
.intro-skip:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.intro-skip svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Music on and off: beside Skip in the intro, and at the bottom right of the page ---------- */
.sound-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sound-toggle svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sound-toggle[aria-pressed="true"] .s-off,
.sound-toggle[aria-pressed="false"] .s-on { display: none; }

/* The bottom of the screen: the way into Arvind's workspace on the left, the music on the right, the
   credit between them. Solid rather than glass: they sit over the moving traffic, and live glass would
   redo its blur every frame. */
.dock {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "ws credit sound";
  align-items: end;
  row-gap: 0.55rem;
  /* the corners sit on the frame's edges */
  padding: 0 max(var(--gutter), (100% - var(--max)) / 2, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(var(--gutter), (100% - var(--max)) / 2, env(safe-area-inset-left));
  pointer-events: none;
}
.dock > * { pointer-events: auto; }
.dock-link { grid-area: ws; justify-self: start; }
.dock-sound { grid-area: sound; justify-self: end; }
/* a label, not a button: smaller than the two beside it, and without their lift */
.dock-credit {
  grid-area: credit;
  align-self: center;
  justify-self: center;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.95);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.84);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.4;
  white-space: nowrap;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
/* phones: no room between the two, so the credit takes its own line underneath */
@media (max-width: 36rem) {
  .dock {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ws . sound" "credit credit credit";
  }
}
.dock-link,
.dock-sound {
  border: 1px solid rgb(255 255 255 / 0.95);
  background: rgb(255 255 255 / 0.84);
  box-shadow: 0 10px 22px -12px rgb(18 35 60 / 0.55);
}
.dock-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.45rem 1.05rem 0.45rem 0.85rem;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
/* it steps aside while the CV is on screen (site.js), so it never covers a line of it; so does the
   credit, which the footer then carries at the end of the page */
html.reading-work .dock-link,
html.reading-work .dock-credit { opacity: 0; visibility: hidden; transform: translateY(0.5rem); }
.dock-link svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dock-sound {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ink-2);
}
.dock-link:hover,
.dock-sound:hover { background: #FFFFFF; color: var(--ink); }
/* it names its state on hover and on keyboard focus */
.dock-sound[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.6rem);
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.dock-sound[data-tip]:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) {
  .dock-sound[data-tip]:hover::after { opacity: 1; transform: none; }
}
/* the corners come up with the morning, after the intro when it plays */
@media (prefers-reduced-motion: no-preference) {
  .dock { animation: fade 0.8s ease-out 1.6s both; }
}
html.has-intro .dock { animation-play-state: paused !important; }

/* ---------- One set of type for Work and Ventures ----------
   The two screens after the landing set their words in the same few styles, so the same kind of thing
   is the same size, weight and colour on both:
     --t-lede    the line under a section's heading                               ink-2
     --t-group   a part's title ("Education and experience", "My venture")        660, ink
     --t-title   an organization; a venture or a project                         680, ink
     --t-lead    a position; a project's role                                    560, ink
     --t-name    a skill, a certification, a recommender                         640, ink
     --t-body    what a role covered and what came of it; a project's lines;
                 a recommendation                                                ink-2
     --t-list    a skill's items                                                 ink-2
     --t-meta    a date, an issuer, a project's company and dates, a recommender's
                 role (ink-3); and a link (640, navy, underlined)
     --t-note    the note on the rates                                           ink-3
     --t-chip    a currency, a status, in a pill                                 620
   A figure is 640 in ink; a status ("Open to the next role", "In development") is navy. On a computer
   the screens are set a size smaller (below), a part's title becomes a label on a hairline (--t-label:
   640, ink-3, as the table's headings), and the light grey is a shade darker. */
.work, .ventures {
  --t-lede: 1.125rem;
  --t-group: 1.375rem;
  --t-title: 1.1875rem;
  --t-lead: 1rem;
  --t-name: 1rem;
  --t-body: 1rem;
  --t-list: 1rem;
  --t-meta: 0.9375rem;
  --t-note: 0.8125rem;
  --t-chip: 0.875rem;
}
/* a phone: a position (and a project's role) at a size that keeps the longest position on one line from
   360 px wide */
@media (max-width: 39.99rem) {
  .work, .ventures { --t-lead: clamp(0.875rem, 4vw, 1rem); }
}
/* a computer: readable as shown (the screens are scaled a little below full size on many laptops), and
   the light grey a shade darker, at least 6:1 on every background it sits on */
@media (min-width: 80rem) {
  .work, .ventures {
    --ink-3: #4A5C75;
    --t-title: 0.9375rem;   /* 15px */
    --t-lead: 0.875rem;     /* 14px */
    --t-name: 0.875rem;
    --t-body: 0.875rem;
    --t-list: 0.84375rem;   /* 13.5px */
    --t-meta: 0.84375rem;
    --t-label: 0.84375rem;
    --t-note: 0.84375rem;
  }
}
/* and where each is one screen: the lede on one line, as large as the frame's width allows, up to 16px
   (101em: Work's lede is 98.1em long, and a little to spare; its size follows the width of the head it
   sits in, a size container, so it is the same on both screens); the pills a size smaller */
@media (min-width: 80rem) and (min-height: 37.5rem) {
  .work, .ventures {
    --t-lede: min(1rem, 100cqi / 101);
    --t-chip: 0.78125rem;   /* 12.5px */
  }
}

/* Work: the CV, under the skyline. A table from the engineering degree through each job and the MBA to
   now, one row a stage, then the certifications and the skills. On a computer it is one screen (below);
   on a phone and a tablet each row of the table reads as a card. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.work {
  position: relative;
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 8vw, 6.5rem);
  background: linear-gradient(180deg, #E6EDF4 0%, #E9EFF6 40%, #EFF3F8 100%);
}
/* The last line of the page, in line with the music button; its height keeps the CV clear of the dock */
.site-foot {
  padding: 0.5rem var(--gutter) calc(max(1rem, env(safe-area-inset-bottom)) + 0.6rem);
  background: #EFF3F8;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.4;
  text-align: center;
}
.page-book .site-foot { background: none; }
.work-in {
  display: grid;
  --step: 3rem;                                /* between the parts of Work: the heading, the table, the certifications, the skills */
  --near: 1.25rem;                             /* between a part's title and its content */
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--step);
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.work-head { display: grid; gap: 1.6rem; max-width: 46rem; }
.work-intro { display: grid; gap: 1.1rem; }
/* the heading of Work and of Ventures */
.work h2, .ventures h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.1rem, 3.5vw, 3rem);
  font-weight: 660;
  font-stretch: 104%;
  line-height: 1.06;
  letter-spacing: -0.034em;
  text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .work h2, .ventures h2 {
    background: linear-gradient(180deg, #2F4C78 0%, #172C4C 46%, #0E1C33 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.06em;
    margin-bottom: -0.06em;
  }
}
.work-lede { color: var(--ink-2); font-size: var(--t-lede); line-height: 1.55; }
.work-lede span { display: block; text-wrap: balance; }   /* a sentence a line, its lines even */
/* the currency: one small pill of five, the chosen one filled */
.currency { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.currency-label { color: var(--ink-3); font-size: 0.875rem; }
.currency-set {
  display: inline-flex;
  padding: 0.15rem;
  border: 1px solid rgb(255 255 255 / 0.95);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.62);
  box-shadow: 0 6px 16px -12px rgb(18 35 60 / 0.5);
}
.currency-opt {
  min-width: 2.75rem;
  height: 2.25rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font: 620 var(--t-chip, 0.875rem)/1 var(--font);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.currency-opt:hover { background: rgb(255 255 255 / 0.9); color: var(--ink); }
.currency-opt[aria-pressed="true"] { background: #1F3760; color: #FFFFFF; }
.currency-opt:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
/* the résumé, as a PDF: a round button at the table's top right, its name on hover and focus */
.resume-dl {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #36598F 0%, #1C335A 52%, #14274A 100%);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -3px 8px rgb(0 0 0 / 0.22), 0 10px 22px -10px rgb(20 39 74 / 0.65);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.resume-dl:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -3px 8px rgb(0 0 0 / 0.2), 0 14px 26px -10px rgb(20 39 74 / 0.7); }
.resume-dl:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.resume-dl svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.resume-dl::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.resume-dl:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) {
  .resume-dl:hover::after { opacity: 1; transform: none; }
}

.cv-path, .cv-row { min-width: 0; }
.cv-path-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--near); }
/* the round button stands out above and below the title's line, so the title sits a step under the text above it like the other titles */
.cv-path-head .resume-dl { margin-block: -0.55rem; }
.cv-path-head > .cv-title { margin: 0; }
.cv-title { margin: 0 0 var(--near); color: var(--ink); font-size: var(--t-group); font-weight: 660; letter-spacing: -0.012em; line-height: 1.2; }

/* The table. On a phone and a tablet each row is a card: the dates, the organization with its mark,
   the position and the course or function, then the responsibility and the achievements, each under
   its label. The table's own headings are kept for screen readers. */
.cv-table, .cv-table tbody, .cv-table tr, .cv-table th, .cv-table td { display: block; }
.cv-table { width: 100%; border-collapse: collapse; }
.cv-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cv-table tbody { display: grid; gap: 1rem; }
.cv-table tbody tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: flex-start;   /* a card made taller by the one beside it keeps its lines together at the top */
  padding: 0.95rem 1.2rem 0.85rem;   /* the same space above the dates as below the last line */
  border: 1px solid rgb(255 255 255 / 0.9);
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.62);
  box-shadow: 0 14px 30px -24px rgb(18 35 60 / 0.45);
}
.cv-table td, .cv-table th { color: var(--ink-2); font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: left; }
.cv-table strong { color: var(--ink); font-weight: 640; }
.t-when { font-variant-numeric: tabular-nums; }   /* in a card the dates are the card's first line, as its text */
/* the organization: its mark, and beside it the name with the place under it, lighter */
.cv-table .t-org { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.65rem; margin-top: 0.55rem; color: var(--ink); font-size: var(--t-title); font-weight: 680; line-height: 1.25; }
.t-org .t-loc { grid-column: 2; color: var(--ink-3); font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
.t-org img {
  grid-row: 1 / span 2;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  object-fit: cover;
  background: #FFFFFF;
  box-shadow: 0 0 0 2px #FFFFFF, 0 6px 14px -8px rgb(18 35 60 / 0.55);
}
.t-when, .cv-table .t-org, .cv-table .t-prof { flex: 1 0 100%; }
/* the position or course on its own line under the name */
.cv-table .t-pos { flex: 1 0 100%; margin-top: 0.6rem; color: var(--ink); font-size: var(--t-lead); font-weight: 560; text-wrap: pretty; }
/* in a card it runs on as one line ("Lead, Corporate Marketing Planning"): the break after its comma is
   the table's alone (on a phone at a size that keeps the longest on one line: --t-lead) */
@media (max-width: 79.99rem) {
  .cv-table .t-pos br { display: none; }
}
/* the profile: what the role covered, then what came of it, a line each */
.cv-table .t-prof { margin-top: 0.55rem; }
.p-role, .p-wins { display: block; text-wrap: balance; }   /* wrapped, its lines even */
.p-wins { margin-top: 0.25rem; }
/* under the table: the currency, then the rates it uses */
.cv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: calc(var(--near) - var(--step)); }   /* close under the cards */
.cv-note { max-width: 42rem; color: var(--ink-3); font-size: var(--t-note); line-height: 1.5; text-wrap: balance; }

/* certifications and skills */
.certs { display: grid; gap: var(--near); }
.certs li { color: var(--ink-3); font-size: var(--t-meta); line-height: 1.45; }
.certs b { display: block; color: var(--ink); font-size: var(--t-name); font-weight: 640; text-wrap: balance; }
.certs span { display: block; margin-top: 0.15rem; }
.skills { display: grid; gap: var(--near) 2.5rem; margin: 0; }
.skills dt { color: var(--ink); font-size: var(--t-name); font-weight: 640; }
.skills dd { margin: 0.3rem 0 0; color: var(--ink-2); font-size: var(--t-list); line-height: 1.55; text-wrap: balance; }

/* a tablet: the cards, certifications and skills two to a row */
@media (min-width: 40rem) {
  .cv-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .certs, .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--near) 2.5rem; }
}

/* A phone: Work's paragraphs are set justified, every line filled edge to edge (pretty, not balanced:
   balanced lines are short and ragged), no word left alone on a last line. The two sentences under the
   heading and the note on the rates run on as one paragraph each (a long word there is hyphenated where
   a line would gape). A card's profile is set line by line: each statement starts a line, and a phrase
   that reads as one ("Building AvyFin, an AI investment-research tool", "Integrated an acquired business
   in Spain") keeps a line to itself (the breaks are <br class="m"> in the page, a phone's only). Its
   size follows the card's width (100cqi: the card is a size container), so the longest of those phrases
   always fits and every phone breaks the lines in the same places. Lists (the skills, the
   certifications' titles) stay ranged left: justifying a line or two of a list only stretches its gaps. */
@media (max-width: 39.99rem) {
  .work-lede, .cv-table .t-prof, .cv-note { text-align: justify; text-wrap: pretty; }
  .cv-table .t-prof, .p-role, .p-wins { text-wrap: wrap; }   /* a card's lines fill before they break: two-line statements, balanced, gaped */
  .work-lede, .cv-note { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 3; }
  .work-lede span, .cv-note > span { display: inline; }
  .skills dd, .certs b { text-wrap: pretty; }   /* a list fills its first line before breaking (balanced, it left a short one) */
  .cv-table tbody tr { container-type: inline-size; padding-inline: 0.875rem; }
  .cv-table .t-prof { font-size: min(1rem, 100cqi / 22.6); }   /* 22.6: the AvyFin line's length in ems, and a little */
  .p-wins { margin-top: 0.3rem; }
  .t-prof .on-wide { display: none; }
  .p-lines > span { display: block; }
  .p-lines > span + span { margin-top: 0.3rem; }   /* Hult's: Dean's List, then the competitions and clubs, a line each */
}
/* the phone's own lines and breaks, hidden wider (where the profile reads as two lines in the table) */
@media (min-width: 40rem) {
  .t-prof br.m, .t-prof .on-phone { display: none; }
}

/* A wide window. The table as a table, four columns, a hairline between rows, in a light panel; the
   skills in a panel of their own to its left, as tall as it, their heading on the line of the table's
   headings; the table out to the frame's right edge, and the download button above it, on the
   heading's line; under the table the currency and the rates, then the certifications, their title
   under the skills. Every text edge in a panel is the
   same distance from the panel's edge (--inset), so the columns line up from top to bottom, and the
   certifications stand in the table's columns. Below this width the rows are cards (above): the four
   columns need the room. */
@media (min-width: 80rem) {
  /* (the type: one set with Ventures, above: the organizations at 15px; the profiles, the positions,
     the skills and the certifications at 14px; the dates, the places, the labels, the skills' items
     and the rates at 13.5px) */
  .work-in {
    --side: 12rem;                             /* the skills, left of the table */
    --gap: 1rem;                               /* between the skills and the table */
    --pad: 0.5rem;                             /* a cell's side padding */
    --edge: calc(0.55rem + 1px);               /* a panel's border and padding */
    --inset: calc(var(--edge) + var(--pad));   /* from a panel's edge to its text */
    /* the fixed columns are as wide as their longest entry, measured, plus the cell's padding: a time
       period; a name with its mark; a line of a position */
    --c-when: 9.7rem;
    --c-org: 11.7rem;
    --c-pos: 14rem;
    position: relative;
    grid-template-columns: var(--side) minmax(0, 1fr);
    grid-template-areas: "head head" "skills path" ". foot" "certs certs";
    column-gap: var(--gap);
  }
  .work-head { grid-area: head; }

  /* the table, the width of the frame beside the skills */
  .cv-path {
    grid-area: path;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;                      /* the table as tall as the skills beside it, and the other way */
  }
  /* the download button: at the frame's right edge, centred on the heading's line, where it gives the
     table its width */
  .cv-path-head { position: absolute; top: calc(clamp(2.1rem, 3.5vw, 3rem) * 0.53 - 1.375rem); right: 0; margin: 0; }
  .cv-path-head .resume-dl { margin-block: 0; }
  /* the table says what it is; its heading stays for screen readers */
  .cv-path-head > .cv-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* the two panels */
  .cv-table-wrap, .cv-skills {
    padding: 0.3rem 0.55rem 0.4rem;
    border: 1px solid rgb(255 255 255 / 0.9);
    border-radius: 1.2rem;
    background: rgb(255 255 255 / 0.62);
    box-shadow: 0 18px 40px -28px rgb(18 35 60 / 0.45);
  }
  /* their headings, on one line across both, the same height */
  .cv-table thead th, .cv-skills > .cv-title {
    margin: 0;
    padding: 0.6rem var(--pad) 0.5rem;
    border-bottom: 1px solid rgb(47 76 120 / 0.22);
    color: var(--ink-3);
    font-size: var(--t-label);
    font-weight: 640;
    letter-spacing: 0;
    line-height: 1.3;
    white-space: nowrap;
  }
  .cv-table thead th { vertical-align: bottom; }

  /* the table */
  .cv-table { display: table; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
  .cv-table thead { position: static; display: table-header-group; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .cv-table tbody { display: table-row-group; }
  .cv-table tr, .cv-table tbody tr { display: table-row; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .cv-table th, .cv-table td, .cv-table .t-org, .cv-table .t-pos, .cv-table .t-prof { display: table-cell; margin: 0; }
  .c-when { width: var(--c-when); }
  .c-org { width: var(--c-org); }
  .c-pos { width: var(--c-pos); }
  /* every cell's first line on one baseline */
  .cv-table tbody td, .cv-table tbody th {
    padding: 0.4rem var(--pad);
    border-top: 1px solid rgb(47 76 120 / 0.1);
    font-size: var(--t-body);
    line-height: 1.45;
    vertical-align: baseline;
  }
  .cv-table tbody tr:first-child > * { border-top: 0; }
  .cv-table .t-when { color: var(--ink-3); font-size: var(--t-meta); white-space: nowrap; }   /* a time period never wraps */
  /* the name and the place a line each, as tall as the other cells' lines (14px at 1.45), so the place
     sits on the line of the position's and the profile's second lines: its line is set on the name's
     size, so its baseline falls exactly one line under the name's at every scale, and its words, inside,
     at a date's size */
  .cv-table .t-org { line-height: calc(var(--t-body) * 1.45); }
  .t-org img { float: left; width: 1.9rem; height: 1.9rem; margin: -0.05rem 0.6rem 0 0; }
  .t-org span { display: block; overflow: hidden; padding-top: 0.2rem; white-space: nowrap; }
  .t-org .t-loc { padding-top: 0; font-size: inherit; font-weight: 400; line-height: inherit; }
  .t-org .t-loc > span { display: inline; padding-top: 0; font-size: var(--t-meta); line-height: 1; }
  .p-wins { margin-top: 0; }   /* every cell's second line on one baseline too */
  .p-wins strong { white-space: nowrap; }   /* a figure is never split across lines */
  /* now: the first row, a shade lighter, its status in the navy of the selected currency */
  .cv-table .is-now > * { background: rgb(255 255 255 / 0.55); }
  .is-now .p-wins strong { color: #1F3760; }

  /* the skills: one group under another, the first level with the table's first row and the last with
     its last, the same space between each (no hairlines: they could not meet the table's) */
  .cv-skills { grid-area: skills; align-self: stretch; display: flex; flex-direction: column; }
  .cv-skills .skills { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; padding: 0.4rem var(--pad) 0.45rem; }
  .cv-skills dt { line-height: 1.45; }
  .cv-skills dd { margin-top: 0.1rem; line-height: 1.45; }   /* three lines each in the panel, all five within the table's height */

  /* under the table: the currency and the rates, in line with its text */
  .cv-foot { grid-area: foot; flex-wrap: nowrap; gap: 1.25rem; margin-top: 0; padding-inline: var(--inset); }
  .cv-foot .currency { flex: none; flex-wrap: nowrap; }
  .cv-note abbr { text-decoration: none; }
  .cv-note { max-width: none; line-height: 1.45; }

  /* the certifications: the title under the skills' text; the six three to a row, in the table's columns
     (the time period's, the position's and the profile's), each where its title fits on one line: the
     longest under the profile, the shortest under the position. They are listed latest first; the
     placing below goes by that order. */
  .cv-certs {
    grid-area: certs;
    display: grid;
    grid-template-columns: var(--side) minmax(0, 1fr);
    column-gap: var(--gap);
    align-items: baseline;
  }
  .cv-certs > .cv-title { margin: 0; padding-left: var(--inset); color: var(--ink-3); font-size: var(--t-label); font-weight: 640; letter-spacing: 0; line-height: 1.3; }
  .cv-certs .certs {
    grid-template-columns: calc(var(--c-when) + var(--c-org)) var(--c-pos) minmax(0, 1fr);
    gap: 0.75rem 0;
    padding-inline: var(--edge);
  }
  .cv-certs .certs li { padding-inline: var(--pad); }
  .cv-certs .certs li:nth-child(1) { grid-area: 1 / 1; }   /* Management Consulting, Emory */
  .cv-certs .certs li:nth-child(2) { grid-area: 1 / 3; }   /* Mergers and Acquisitions, Illinois */
  .cv-certs .certs li:nth-child(3) { grid-area: 1 / 2; }   /* Agile Project Management, Google */
  .cv-certs .certs li:nth-child(4) { grid-area: 2 / 2; }   /* Operations Excellence, Rutgers */
  .cv-certs .certs li:nth-child(5) { grid-area: 2 / 1; }   /* Visualization with Tableau, UC Davis */
  .cv-certs .certs li:nth-child(6) { grid-area: 2 / 3; }   /* AI For Everyone, DeepLearning.AI */
  .certs span { margin-top: 0.1rem; }
}

/* ---------- On a computer, Work is one screen ----------
   The heading and the download button; the skills and the table; the currency and the rates; the
   certifications. screens.js scales the whole screen down a little where a laptop's window is narrow
   or short, so it fits, but never so far that the text gets hard to read: in a small laptop's window
   it scrolls instead. */
@media (min-width: 80rem) and (min-height: 37.5rem) {
  .work.screen {
    display: grid;
    align-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(1.25rem, 3.5vh, 3rem) 0 4.4rem;   /* the bottom clear of the dock's credit */
  }
  .work-in {
    width: var(--frame-w, min(var(--max), 100% - 2 * var(--gutter)));   /* the frame, as shown when scaled (screens.js) */
    row-gap: clamp(0.9rem, 2.2vh, 1.6rem);
    zoom: var(--fit, 1);
  }
  .work-head { max-width: none; container-type: inline-size; }   /* the lede's size follows its width (below) */
  .work-intro { gap: 0.6rem; max-width: none; }
  .work h2, .ventures h2 { font-size: clamp(2rem, 2.6vw, 2.5rem); }
  .cv-path-head { top: calc(clamp(2rem, 2.6vw, 2.5rem) * 0.53 - 1.375rem); }   /* on the heading's line, at the screen's size */
  /* the two sentences under the heading on one line (--t-lede), so the screen has room for the rest */
  .work-lede { line-height: 1.5; white-space: nowrap; }
  .work-lede span { display: inline; }
  /* the currency, a size smaller here */
  .currency-label { font-size: var(--t-meta); }
  .currency-set { padding: 0.1rem; }
  .currency-opt { min-width: 2.1rem; height: 1.5rem; padding: 0 0.5rem; }

  /* the corners stay put on every screen, and the credit with them: there is no footer to scroll to.
     (Where Work is too tall for the window even scaled, it scrolls like a page: the corners step aside
     while it is read and the footer has the credit, as on a phone; screens.js marks it.) */
  html:not(.work-scrolls):not(.ventures-scrolls).reading-work .dock-link,
  html:not(.work-scrolls):not(.ventures-scrolls).reading-work .dock-credit { opacity: 1; visibility: visible; transform: none; }
  html:not(.work-scrolls):not(.ventures-scrolls) body:has(.dock) .site-foot { display: none; }
}

/* ---------- Ventures, projects and recommendations ----------
   One screen on a computer: the heading and the way to book a meeting; AvyFin, Arvind's own venture,
   under "My venture", and two projects from his earlier employment under a title of their own, in
   three even columns; under them three recommendations in the same columns. Set in Work's type (the
   styles above): a venture's or a project's name as an organization's, a project's role as a position,
   its lines and the recommendations as a profile, its company and dates as a certification's issuer and
   date, a recommender as a certification; a group's title as a part's title in Work (on a computer a
   label on a hairline, as the table's headings); the panels are Work's. screens.js scales the screen
   with Work, to the same size. On a tablet the venture sits above the projects; on a phone everything
   stacks, and a card's lines are the size of a Work card's. */
.ventures {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 8vw, 5.5rem);
  background: #EFF3F8;   /* where Work's ends, so the two run on */
}
.ventures-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2rem;
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.sec-head { display: grid; gap: 1.25rem; justify-items: start; }
.sec-words { display: grid; gap: 1.1rem; max-width: 46rem; }   /* as Work's heading and lede */
.sec-lede { color: var(--ink-2); font-size: var(--t-lede); line-height: 1.55; text-wrap: pretty; }

.v-groups { display: grid; gap: 2rem 1.25rem; }
.v-group { display: grid; align-content: start; gap: 1.25rem; min-width: 0; }
/* a group's title, as a part's title in Work */
.v-label { margin: 0; color: var(--ink); font-size: var(--t-group); font-weight: 660; letter-spacing: -0.012em; line-height: 1.2; }
/* the recommendations' title, with the way to all of them at its right */
.v-label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.v-label-row h3 { margin: 0; color: inherit; font: inherit; letter-spacing: inherit; }
/* a link: the size of a date, navy, underlined */
.v-more, .v-cta {
  color: #1F3760;
  font-size: var(--t-meta);
  font-weight: 640;
  letter-spacing: 0;
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.v-more { white-space: nowrap; }
.v-more:hover, .v-cta:hover { color: var(--ink); text-decoration-thickness: 2px; }
.v-more:focus-visible, .v-cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 0.25rem; }

.v-cards { display: grid; gap: 1.25rem; }
.v-card, .quote {
  min-width: 0;
  border: 1px solid rgb(255 255 255 / 0.9);
  border-radius: 1.2rem;
  background: rgb(255 255 255 / 0.62);
  box-shadow: 0 18px 40px -28px rgb(18 35 60 / 0.45);
}
.v-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.2rem 1.3rem 1.3rem; }
.v-own .v-card { background: rgb(255 255 255 / 0.8); }   /* his own: a shade brighter */
.v-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; }
.v-card h4 { margin: 0; color: var(--ink); font-size: var(--t-title); font-weight: 680; line-height: 1.25; text-wrap: balance; }
/* a status, in the navy of the chosen currency */
.v-status { padding: 0.22rem 0.7rem; border-radius: 999px; background: #1F3760; color: #FFFFFF; font-size: var(--t-chip); font-weight: 620; line-height: 1.35; white-space: nowrap; }
.v-meta { color: var(--ink-3); font-size: var(--t-meta); line-height: 1.45; }
.v-role { color: var(--ink); font-size: var(--t-lead); font-weight: 560; line-height: 1.5; text-wrap: pretty; }
.v-result { color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; text-wrap: pretty; }
.v-card strong { color: var(--ink); font-weight: 640; white-space: nowrap; }   /* a figure, as in Work; never split */
.v-points { display: grid; gap: 0.45rem; margin: 0.1rem 0 0; padding: 0; list-style: none; }
.v-points li { position: relative; padding-left: 1.05rem; color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; text-wrap: pretty; }
.v-points li::before { content: ""; position: absolute; top: 0.715em; top: calc(0.5lh - 0.035em); left: 0; width: 0.5rem; height: 2px; border-radius: 1px; background: #8FA3BD; }   /* on the first line's middle, at any line height */
/* the venture's way in: at the foot of its card, however tall the row makes it */
.v-cta { align-self: flex-start; margin-top: auto; padding-top: 0.5rem; }

/* the recommendations: the words between curly quotes, the opening one hung outside the text's edge;
   then who wrote them, what they do now and how they know Arvind */
.quotes { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.quote { display: flex; flex-direction: column; gap: 1rem; height: 100%; margin: 0; padding: 1.2rem 1.3rem; }
.quote blockquote { margin: 0; }
.quote blockquote p { color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; text-indent: -0.42em; text-wrap: pretty; }
.quote blockquote p::before { content: "“"; }
.quote blockquote p::after { content: "”"; }
.quote figcaption { display: grid; gap: 0.1rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid rgb(47 76 120 / 0.14); color: var(--ink-3); font-size: var(--t-meta); line-height: 1.45; }
.quote figcaption b { color: var(--ink); font-size: var(--t-name); font-weight: 640; }

/* a phone: a card's lines the size of a Work card's profile (the card a size container with a Work
   card's inset, so they match on every phone) */
@media (max-width: 39.99rem) {
  .v-card, .quote { container-type: inline-size; padding-inline: 0.875rem; }
  .v-result, .v-points li, .quote blockquote p { font-size: min(1rem, 100cqi / 22.6); }
}
/* a tablet: the venture above, the two projects side by side */
@media (min-width: 48rem) {
  .v-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the recommendations side by side: their words in one band and who wrote them in the next, so the
   hairlines and the names line up across the row however long the words (a subgrid) */
@media (min-width: 64rem) {
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; row-gap: 0; }
  .quotes > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .quote { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 1rem; }
  .quote figcaption { margin-top: 0; align-self: start; }
}
/* a computer: three even columns, the venture first, the projects' label across the other two, the
   recommendations under all three in the same columns; the way to book a meeting on the heading's line;
   a group's title a label on a hairline, as the table's headings; the lines as Work's table's */
@media (min-width: 80rem) {
  .sec-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 2rem; }
  .sec-words { max-width: none; }
  .sec-cta { margin-top: calc(clamp(2.1rem, 3.5vw, 3rem) * 0.53 - 1.3rem); }
  .v-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-own { grid-column: 1; grid-template-rows: auto 1fr; }
  .v-past { grid-column: 2 / span 2; grid-template-rows: auto 1fr; }
  .v-recs { grid-column: 1 / -1; }
  .quotes { column-gap: 1.25rem; }
  .v-label { padding: 0 0 0.5rem; border-bottom: 1px solid rgb(47 76 120 / 0.22); color: var(--ink-3); font-size: var(--t-label); font-weight: 640; letter-spacing: 0; line-height: 1.3; }
  .v-card h4 { line-height: 1.35; }
  .v-role, .v-result, .v-points li, .quote blockquote p { line-height: 1.45; }
}
/* and one screen, like Work's: the corners clear of it, its parts in the middle of the window, closer
   set, and scaled with Work where the window is short (screens.js) */
@media (min-width: 80rem) and (min-height: 37.5rem) {
  .ventures.screen {
    display: grid;
    align-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(1.25rem, 3.5vh, 3rem) 0 4.4rem;
  }
  .ventures-in {
    width: var(--frame-w, min(var(--max), 100% - 2 * var(--gutter)));   /* the frame, as shown when scaled */
    row-gap: clamp(1rem, 2.4vh, 1.6rem);
    zoom: var(--fit, 1);
  }
  .sec-head { container-type: inline-size; }   /* the lede's size follows its width, as Work's (--t-lede) */
  .sec-words { gap: 0.6rem; }
  .sec-lede { line-height: 1.5; white-space: nowrap; }
  .sec-cta { margin-top: calc(clamp(2rem, 2.6vw, 2.5rem) * 0.53 - 1.3rem); }
  .v-groups { row-gap: clamp(1rem, 2.4vh, 1.6rem); }
  .v-group { gap: 0.7rem; }
  .v-card { gap: 0.45rem; padding: 1rem 1.15rem 1.05rem; }
  .v-points { gap: 0.3rem; }
  .v-cta { padding-top: 0.35rem; }
  .quote { padding: 0.95rem 1.15rem; }
  .quote figcaption { padding-top: 0.6rem; }
  .quotes .quote { row-gap: 0.8rem; }
}

/* The suggestion box (feedback.js): under the top bar's right end on wide screens, up from the bottom on
   phones. Type, record a voice note, or both. */
.suggest {
  width: min(27rem, calc(100% - 2rem));
  max-height: calc(100% - 6.4rem);
  margin: 5.4rem max(1rem, calc((100% - var(--max)) / 2)) auto auto;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.95);
  border-radius: 1.4rem;
  background: rgb(250 252 255 / 0.97);
  color: var(--ink);
  box-shadow: 0 30px 60px -30px rgb(14 28 51 / 0.55), inset 0 1px 0 #FFFFFF;
  overflow: auto;
}
.suggest::backdrop { background: rgb(14 28 51 / 0.22); }
.suggest [hidden] { display: none !important; }
.suggest-form { display: grid; gap: 0.6rem; padding: 1.3rem 1.35rem 1.25rem; }
.suggest-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.suggest h2 { margin: 0; font-size: 1.3rem; font-weight: 680; letter-spacing: -0.02em; line-height: 1.2; }
.suggest-x { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; margin: -0.35rem -0.45rem -0.35rem 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.suggest-x:hover { background: rgb(18 35 60 / 0.06); color: var(--ink); }
.suggest-x svg, .voice-rec svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.suggest-lede { margin-bottom: 0.35rem; color: var(--ink-2); font-size: 0.975rem; line-height: 1.5; }
.suggest-label { margin-top: 0.4rem; color: var(--ink); font-size: 0.9375rem; font-weight: 620; }
.suggest-label span { color: var(--ink-3); font-weight: 480; }
.suggest-input {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #CBD6E4;
  border-radius: 0.8rem;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
}
.suggest-text { min-height: 6.5rem; resize: vertical; }
.suggest-input::placeholder { color: #8A99AD; }
.suggest-input:focus-visible { border-color: #2F4C78; outline: 2px solid rgb(47 76 120 / 0.25); outline-offset: 0; border-radius: 0.8rem; }
.voice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; min-height: 2.6rem; }
.voice-rec {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  border: 1px solid #CBD6E4;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.voice-rec:hover { border-color: #9FB3CB; }
.voice-rec .stop { display: none; }
.voice-rec.is-recording { border-color: #E5484D; background: #FFF1F1; color: #B4232F; }
.voice-rec.is-recording .mic { display: none; }
.voice-rec.is-recording .stop { display: inline; fill: currentColor; stroke: none; }
.voice-time { color: var(--ink-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.voice-rec.is-recording + .voice-time::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-radius: 50%; background: #E5484D; vertical-align: 0.05rem; }
.voice-play { width: 100%; height: 2.6rem; }
.voice-del { padding: 0.3rem 0; border: 0; background: none; color: #2F4C78; font: inherit; font-size: 0.9375rem; font-weight: 620; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.suggest-trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.suggest-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; }
.suggest-status { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.4; }
.suggest-foot .btn { flex: none; }
.suggest-foot .btn:disabled { opacity: 0.55; cursor: default; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .suggest[open] { animation: lift 0.22s ease-out both; }
  .voice-rec.is-recording + .voice-time::before { animation: blink 1s ease-in-out infinite; }
}
@keyframes blink { 50% { opacity: 0.25; } }
@media (max-width: 36rem) {
  .suggest { width: 100%; max-width: none; max-height: calc(100% - 3rem); margin: auto 0 0; border-radius: 1.4rem 1.4rem 0 0; }
  .suggest-form { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
}

/* scene timing (generated) */
@media (prefers-reduced-motion: no-preference) {
  .scene-pan .bldg-1 { animation-delay: 0.33s; }
  .scene-pan .bldg-2 { animation-delay: 0.30s; }
  .scene-pan .bldg-3 { animation-delay: 0.30s; }
  .scene-pan .bldg-4 { animation-delay: 0.30s; }
  .scene-pan .bldg-5 { animation-delay: 0.30s; }
  .scene-pan .bldg-6 { animation-delay: 0.30s; }
  .scene-pan .bldg-7 { animation-delay: 0.30s; }
  .scene-pan .bldg-8 { animation-delay: 0.30s; }
  .scene-pan .bldg-9 { animation-delay: 0.30s; }
  .scene-pan .bldg-10 { animation-delay: 0.30s; }
  .scene-pan .bldg-11 { animation-delay: 0.30s; }
  .scene-pan .bldg-12 { animation-delay: 0.30s; }
  .scene-pan .bldg-13 { animation-delay: 0.35s; }
  .scene-pan .bldg-14 { animation-delay: 0.36s; }
  .scene-pan .bldg-15 { animation-delay: 0.36s; }
  .scene-pan .bldg-16 { animation-delay: 0.37s; }
  .scene-pan .bldg-17 { animation-delay: 0.38s; }
  .scene-pan .bldg-18 { animation-delay: 0.39s; }
  .scene-pan .bldg-19 { animation-delay: 0.39s; }
  .scene-pan .bldg-20 { animation-delay: 0.40s; }
  .scene-pan .bldg-21 { animation-delay: 0.40s; }
  .scene-pan .bldg-22 { animation-delay: 0.41s; }
  .scene-pan .bldg-23 { animation-delay: 0.41s; }
  .scene-pan .bldg-24 { animation-delay: 0.42s; }
  .scene-pan .bldg-25 { animation-delay: 0.44s; }
  .scene-pan .bldg-26 { animation-delay: 0.46s; }
  .scene-pan .bldg-27 { animation-delay: 0.46s; }
  .scene-pan .bldg-28 { animation-delay: 0.47s; }
  .scene-pan .bldg-29 { animation-delay: 0.48s; }
  .scene-pan .bldg-30 { animation-delay: 0.48s; }
  .scene-pan .bldg-31 { animation-delay: 0.49s; }
  .scene-pan .bldg-32 { animation-delay: 0.50s; }
  .scene-pan .bldg-33 { animation-delay: 0.50s; }
  .scene-pan .bldg-34 { animation-delay: 0.50s; }
  .scene-pan .bldg-35 { animation-delay: 0.53s; }
  .scene-pan .bldg-36 { animation-delay: 0.55s; }
  .scene-pan .bldg-37 { animation-delay: 0.55s; }
  .scene-pan .bldg-38 { animation-delay: 0.56s; }
  .scene-pan .bldg-39 { animation-delay: 0.57s; }
  .scene-pan .bldg-40 { animation-delay: 0.57s; }
  .scene-pan .bldg-41 { animation-delay: 0.58s; }
  .scene-pan .bldg-42 { animation-delay: 0.59s; }
  .scene-pan .bldg-43 { animation-delay: 0.60s; }
  .scene-pan .bldg-44 { animation-delay: 0.60s; }
  .scene-pan .bldg-45 { animation-delay: 0.61s; }
  .scene-pan .bldg-46 { animation-delay: 0.61s; }
  .scene-pan .bldg-47 { animation-delay: 0.62s; }
  .scene-pan .bldg-48 { animation-delay: 0.62s; }
  .scene-pan .bldg-49 { animation-delay: 0.64s; }
  .scene-pan .bldg-50 { animation-delay: 0.65s; }
  .scene-pan .bldg-51 { animation-delay: 0.66s; }
  .scene-pan .bldg-52 { animation-delay: 0.67s; }
  .scene-pan .bldg-53 { animation-delay: 0.68s; }
  .scene-pan .bldg-54 { animation-delay: 0.68s; }
  .scene-pan .bldg-55 { animation-delay: 0.70s; }
  .scene-pan .bldg-56 { animation-delay: 0.71s; }
  .scene-pan .bldg-57 { animation-delay: 0.72s; }
  .scene-pan .bldg-58 { animation-delay: 0.72s; }
  .scene-pan .bldg-59 { animation-delay: 0.73s; }
  .scene-pan .bldg-60 { animation-delay: 0.74s; }
  .scene-pan .bldg-61 { animation-delay: 0.75s; }
  .scene-pan .bldg-62 { animation-delay: 0.75s; }
  .scene-pan .bldg-63 { animation-delay: 0.76s; }
  .scene-pan .bldg-64 { animation-delay: 0.77s; }
  .scene-pan .bldg-65 { animation-delay: 0.78s; }
  .scene-pan .bldg-66 { animation-delay: 0.79s; }
  .scene-pan .bldg-67 { animation-delay: 0.79s; }
  .scene-pan .bldg-68 { animation-delay: 0.80s; }
  .scene-pan .bldg-69 { animation-delay: 0.81s; }
  .scene-pan .bldg-70 { animation-delay: 0.82s; }
  .scene-pan .bldg-71 { animation-delay: 0.82s; }
  .scene-pan .bldg-72 { animation-delay: 0.83s; }
  .scene-pan .bldg-73 { animation-delay: 0.83s; }
  .scene-pan .bldg-74 { animation-delay: 0.84s; }
  .scene-pan .bldg-75 { animation-delay: 0.84s; }
  .scene-pan .bldg-76 { animation-delay: 0.85s; }
  .scene-pan .bldg-77 { animation-delay: 0.47s; }
  .scene-pan .bldg-78 { animation-delay: 0.60s; }
  .scene-pan .bldg-79 { animation-delay: 0.73s; }
}
.sun-rays, .sun, .plane-1, .plane-2, .rotor-1, .rotor-2, .rotor-3, .car-6, .car-7, .car-8, .car-9, .car-11, .car-13, .car-1, .car-2, .car-3, .car-4, .car-5, .car-10, .car-12, .rider-1, .rider-2, .rider-3, .rider-4, .metro-west, .metro-east, .ring-1, .ring-2, .ring-3, .ring-4, .ring-5, .drone-1, .drone-2, .flock, .glint-1, .glint-2, .glint-3, .glint-4, .glint-5, .glint-6, .glint-7, .glint-8, .glint-9, .glint-10 { will-change: transform; }
.places .p-in { left: 26.000%; top: 58.621%; }
.places .p-bcn { left: 46.333%; top: 43.103%; }
.places .p-dxb { left: 74.417%; top: 7.328%; }
.sun-rays { left: 56.3333%; top: -14.2241%; width: 25.0000%; height: 129.3103%; }
@media (prefers-reduced-motion: no-preference) {
  .sun-rays { animation: fade 1.6s ease-out 1.1s both; }
}
.sun { left: 55.0833%; top: -20.6897%; width: 27.5000%; height: 142.2414%; }
@keyframes sunrise { from { transform: translateY(25.76%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .sun { animation: sunrise 2.6s cubic-bezier(0.25, 0.6, 0.2, 1) both; }
}
.plane-1 { left: -8.6250%; top: 8.0172%; width: 8.8500%; height: 3.6853%; }
.plane-1 { transform: translateX(375.14%); }
@keyframes fly-east { from { transform: translateX(-37.66%); } to { transform: translateX(1252.35%); } }
@media (prefers-reduced-motion: no-preference) {
  .plane-1 { animation: fly-east 150s linear -48.0s infinite; }
}
.plane-2 { left: -0.1375%; top: 20.9914%; width: 5.4083%; height: 2.2522%; }
.plane-2 { transform: translateX(432.97%); }
@keyframes fly-west { from { transform: translateX(1910.63%); } to { transform: translateX(-200.31%); } }
@media (prefers-reduced-motion: no-preference) {
  .plane-2 { animation: fly-west 210s linear -147.0s infinite; }
}
.rotor-1 { left: 6.6350%; top: 53.2845%; width: 4.5633%; height: 23.6034%; }
@media (prefers-reduced-motion: no-preference) {
  .rotor-1 { animation: spin 9s linear infinite; }
}
.rotor-2 { left: 11.3817%; top: 45.9397%; width: 5.4033%; height: 27.9483%; }
@media (prefers-reduced-motion: no-preference) {
  .rotor-2 { animation: spin 11s linear -3s infinite; }
}
.rotor-3 { left: 16.5117%; top: 56.9569%; width: 4.1433%; height: 21.4310%; }
@media (prefers-reduced-motion: no-preference) {
  .rotor-3 { animation: spin 8s linear -5s infinite; }
}
.bldg-1 { left: 9.3125%; top: 78.9871%; width: 7.2083%; height: 14.2241%; }
.bldg-2 { left: -0.1042%; top: 81.0129%; width: 1.2542%; height: 12.1983%; }
.bldg-3 { left: 0.9417%; top: 84.7845%; width: 0.9458%; height: 8.4267%; }
.bldg-4 { left: 1.6958%; top: 84.0733%; width: 0.8875%; height: 9.1379%; }
.bldg-5 { left: 2.4542%; top: 86.0991%; width: 1.2417%; height: 7.1121%; }
.bldg-6 { left: 3.5500%; top: 83.2759%; width: 0.8000%; height: 9.9353%; }
.bldg-7 { left: 4.1875%; top: 82.0259%; width: 0.5833%; height: 11.1853%; }
.bldg-8 { left: 4.7292%; top: 71.5517%; width: 1.2083%; height: 21.6595%; }
.bldg-9 { left: 5.8125%; top: 76.8319%; width: 1.0417%; height: 16.3793%; }
.bldg-10 { left: 6.8125%; top: 85.6034%; width: 0.7667%; height: 7.6078%; }
.bldg-11 { left: 7.4417%; top: 82.8017%; width: 0.9958%; height: 10.4095%; }
.bldg-12 { left: 8.3083%; top: 86.9828%; width: 0.8125%; height: 6.2284%; }
.bldg-13 { left: 16.5625%; top: 86.2716%; width: 0.9542%; height: 6.9397%; }
.bldg-14 { left: 17.3125%; top: 86.6164%; width: 1.2042%; height: 6.5948%; }
.bldg-15 { left: 18.3167%; top: 87.2845%; width: 1.0417%; height: 5.9267%; }
.bldg-16 { left: 19.2042%; top: 83.8578%; width: 0.5333%; height: 9.3534%; }
.bldg-17 { left: 19.5417%; top: 72.1983%; width: 3.2500%; height: 21.0129%; }
.bldg-18 { left: 22.6458%; top: 84.9569%; width: 0.7708%; height: 8.2543%; }
.bldg-19 { left: 23.2792%; top: 80.4310%; width: 0.9083%; height: 12.7802%; }
.bldg-20 { left: 24.0458%; top: 83.7931%; width: 0.7750%; height: 9.4181%; }
.bldg-21 { left: 24.6875%; top: 82.1983%; width: 0.6250%; height: 11.0129%; }
.bldg-22 { left: 25.3250%; top: 58.0819%; width: 1.3500%; height: 35.1293%; }
.bldg-23 { left: 26.7292%; top: 84.5043%; width: 0.9750%; height: 8.7069%; }
.bldg-24 { left: 27.5833%; top: 83.8578%; width: 0.9458%; height: 9.3534%; }
.bldg-25 { left: 28.8958%; top: 79.6336%; width: 5.7083%; height: 13.5776%; }
.bldg-26 { left: 34.4792%; top: 83.6853%; width: 0.8500%; height: 9.5259%; }
.bldg-27 { left: 35.1667%; top: 84.4397%; width: 0.6042%; height: 8.7716%; }
.bldg-28 { left: 35.6458%; top: 66.7026%; width: 1.3750%; height: 26.5086%; }
.bldg-29 { left: 36.9375%; top: 59.8060%; width: 1.6250%; height: 33.4052%; }
.bldg-30 { left: 38.4792%; top: 70.1509%; width: 1.2083%; height: 23.0603%; }
.bldg-31 { left: 39.5625%; top: 75.1078%; width: 1.0417%; height: 18.1034%; }
.bldg-32 { left: 40.4792%; top: 82.9310%; width: 0.8917%; height: 10.2802%; }
.bldg-33 { left: 41.2542%; top: 82.7155%; width: 0.8875%; height: 10.4957%; }
.bldg-34 { left: 41.9958%; top: 83.4698%; width: 0.8458%; height: 9.7414%; }
.bldg-35 { left: 42.9792%; top: 42.5647%; width: 6.7083%; height: 50.6466%; }
.bldg-36 { left: 49.5625%; top: 84.6336%; width: 0.9500%; height: 8.5776%; }
.bldg-37 { left: 50.3458%; top: 83.7284%; width: 0.6750%; height: 9.4828%; }
.bldg-38 { left: 50.8958%; top: 60.0216%; width: 2.2083%; height: 33.1897%; }
.bldg-39 { left: 52.9792%; top: 84.4181%; width: 0.7333%; height: 8.7931%; }
.bldg-40 { left: 53.5083%; top: 82.0690%; width: 0.8875%; height: 11.1422%; }
.bldg-41 { left: 54.2208%; top: 83.2112%; width: 0.5500%; height: 10.0000%; }
.bldg-42 { left: 54.6458%; top: 58.5129%; width: 3.3750%; height: 34.6983%; }
.bldg-43 { left: 57.8958%; top: 76.1853%; width: 0.9083%; height: 17.0259%; }
.bldg-44 { left: 58.6042%; top: 83.7931%; width: 1.0500%; height: 9.4181%; }
.bldg-45 { left: 59.4958%; top: 80.9483%; width: 1.0958%; height: 12.2629%; }
.bldg-46 { left: 60.4375%; top: 74.0733%; width: 0.5000%; height: 19.1379%; }
.bldg-47 { left: 60.8125%; top: 62.8233%; width: 1.1250%; height: 30.3879%; }
.bldg-48 { left: 61.8125%; top: 51.6164%; width: 1.3750%; height: 41.5948%; }
.bldg-49 { left: 63.1458%; top: 35.6681%; width: 3.3333%; height: 57.5431%; }
.bldg-50 { left: 66.3958%; top: 59.8060%; width: 1.2083%; height: 33.4052%; }
.bldg-51 { left: 67.4792%; top: 66.2716%; width: 0.9583%; height: 26.9397%; }
.bldg-52 { left: 67.6042%; top: 78.9871%; width: 3.2917%; height: 14.2241%; }
.bldg-53 { left: 70.7292%; top: 46.0129%; width: 1.2917%; height: 47.1983%; }
.bldg-54 { left: 71.8958%; top: 52.0474%; width: 1.0417%; height: 41.1638%; }
.bldg-55 { left: 72.8958%; top: 6.7888%; width: 3.0417%; height: 86.4224%; }
.bldg-56 { left: 75.8958%; top: 36.5302%; width: 1.2917%; height: 56.6810%; }
.bldg-57 { left: 77.0625%; top: 49.8922%; width: 1.5417%; height: 43.3190%; }
.bldg-58 { left: 78.4792%; top: 33.0819%; width: 1.1250%; height: 60.1293%; }
.bldg-59 { left: 79.4792%; top: 53.7716%; width: 1.4583%; height: 39.4397%; }
.bldg-60 { left: 80.8125%; top: 55.9267%; width: 1.2083%; height: 37.2845%; }
.bldg-61 { left: 81.8958%; top: 66.7026%; width: 1.5417%; height: 26.5086%; }
.bldg-62 { left: 83.3958%; top: 41.2716%; width: 1.3750%; height: 51.9397%; }
.bldg-63 { left: 84.7292%; top: 50.3233%; width: 1.2083%; height: 42.8879%; }
.bldg-64 { left: 85.8958%; top: 59.8060%; width: 1.6250%; height: 33.4052%; }
.bldg-65 { left: 87.4792%; top: 45.1509%; width: 1.1250%; height: 48.0603%; }
.bldg-66 { left: 88.5625%; top: 63.6853%; width: 1.4583%; height: 29.5259%; }
.bldg-67 { left: 89.9792%; top: 64.1164%; width: 1.2917%; height: 29.0948%; }
.bldg-68 { left: 91.2292%; top: 71.4440%; width: 1.6250%; height: 21.7672%; }
.bldg-69 { left: 92.8125%; top: 74.0302%; width: 1.2083%; height: 19.1810%; }
.bldg-70 { left: 93.9792%; top: 78.8362%; width: 1.1583%; height: 14.3750%; }
.bldg-71 { left: 94.9500%; top: 82.8879%; width: 0.9792%; height: 10.3233%; }
.bldg-72 { left: 95.7958%; top: 78.1250%; width: 0.9208%; height: 15.0862%; }
.bldg-73 { left: 96.6250%; top: 80.5819%; width: 1.0417%; height: 12.6293%; }
.bldg-74 { left: 97.5042%; top: 79.1595%; width: 1.0417%; height: 14.0517%; }
.bldg-75 { left: 98.4083%; top: 84.7414%; width: 1.0250%; height: 8.4698%; }
.bldg-76 { left: 99.3125%; top: 83.6207%; width: 0.7917%; height: 9.5905%; }
.bldg-77 { left: 33.4583%; top: 66.2716%; width: 5.2500%; height: 26.9397%; }
.bldg-78 { left: 57.2292%; top: 81.3578%; width: 3.8750%; height: 11.8534%; }
.bldg-79 { left: 76.6458%; top: 79.5259%; width: 6.7083%; height: 13.6853%; }
.car-6 { left: -0.1667%; top: 82.5000%; width: 2.8000%; height: 9.0517%; }
.car-6 { transform: translateX(332.14%); }
@keyframes drive-6 { from { transform: translateX(-178.57%); } to { transform: translateX(3750%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-6 { animation: drive-6 230s linear -29.9s infinite; }
}
.car-7 { left: -0.1667%; top: 82.5000%; width: 2.7333%; height: 9.0517%; }
.car-7 { transform: translateX(1265.85%); }
@keyframes drive-7 { from { transform: translateX(-182.93%); } to { transform: translateX(3841.46%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-7 { animation: drive-7 230s linear -82.8s infinite; }
}
.car-8 { left: -0.1667%; top: 82.5000%; width: 2.7333%; height: 9.0517%; }
.car-8 { transform: translateX(2110.98%); }
@keyframes drive-8 { from { transform: translateX(-182.93%); } to { transform: translateX(3841.46%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-8 { animation: drive-8 230s linear -131.1s infinite; }
}
.car-9 { left: -0.1667%; top: 82.5000%; width: 2.8000%; height: 9.0517%; }
.car-9 { transform: translateX(2925%); }
@keyframes drive-9 { from { transform: translateX(-178.57%); } to { transform: translateX(3750%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-9 { animation: drive-9 230s linear -181.7s infinite; }
}
.car-11 { left: -0.1667%; top: 82.5000%; width: 2.7333%; height: 9.0517%; }
.car-11 { transform: translateX(803.05%); }
@keyframes drive-11 { from { transform: translateX(-182.93%); } to { transform: translateX(3841.46%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-11 { animation: drive-11 230s linear -56.4s infinite; }
}
.car-13 { left: -0.1667%; top: 82.5000%; width: 2.7333%; height: 9.0517%; }
.car-13 { transform: translateX(2553.66%); }
@keyframes drive-13 { from { transform: translateX(-182.93%); } to { transform: translateX(3841.46%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-13 { animation: drive-13 230s linear -156.4s infinite; }
}
.car-1 { left: -0.1667%; top: 84.1810%; width: 2.7333%; height: 9.0517%; }
.car-1 { transform: translateX(-21.95%); }
@keyframes drive-1 { from { transform: translateX(-182.93%); } to { transform: translateX(3841.46%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-1 { animation: drive-1 260s linear -10.4s infinite; }
}
.car-2 { left: -0.1667%; top: 84.1810%; width: 2.8000%; height: 9.0517%; }
.car-2 { transform: translateX(803.57%); }
@keyframes drive-2 { from { transform: translateX(-178.57%); } to { transform: translateX(3750%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-2 { animation: drive-2 260s linear -65.0s infinite; }
}
.car-3 { left: -0.1667%; top: 84.1810%; width: 5.1333%; height: 9.0517%; }
.car-3 { transform: translateX(866.88%); }
@keyframes drive-3 { from { transform: translateX(-97.4%); } to { transform: translateX(2045.45%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-3 { animation: drive-3 260s linear -117.0s infinite; }
}
.car-4 { left: -0.1667%; top: 84.1810%; width: 2.7333%; height: 9.0517%; }
.car-4 { transform: translateX(2392.68%); }
@keyframes drive-4 { from { transform: translateX(-182.93%); } to { transform: translateX(3841.46%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-4 { animation: drive-4 260s linear -166.4s infinite; }
}
.car-5 { left: -0.1667%; top: 84.1810%; width: 2.7333%; height: 9.0517%; }
.car-5 { transform: translateX(3197.56%); }
@keyframes drive-5 { from { transform: translateX(-182.93%); } to { transform: translateX(3841.46%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-5 { animation: drive-5 260s linear -218.4s infinite; }
}
.car-10 { left: -0.1667%; top: 84.1810%; width: 2.7333%; height: 9.0517%; }
.car-10 { transform: translateX(400.61%); }
@keyframes drive-10 { from { transform: translateX(-182.93%); } to { transform: translateX(3841.46%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-10 { animation: drive-10 260s linear -37.7s infinite; }
}
.car-12 { left: -0.1667%; top: 84.1810%; width: 2.7333%; height: 9.0517%; }
.car-12 { transform: translateX(2010.37%); }
@keyframes drive-12 { from { transform: translateX(-182.93%); } to { transform: translateX(3841.46%); } }
@media (prefers-reduced-motion: no-preference) {
  .car-12 { animation: drive-12 260s linear -141.7s infinite; }
}
.rider-1 { left: -0.2083%; top: 88.5776%; width: 0.9167%; height: 5.6034%; }
.rider-1 { transform: translateX(1170.91%); }
@keyframes ride-1 { from { transform: translateX(-181.82%); } to { transform: translateX(11090.91%); } }
@media (prefers-reduced-motion: no-preference) {
  .rider-1 { animation: ride-1 380s linear -45.6s infinite; }
}
.rider-2 { left: -0.2083%; top: 88.5776%; width: 0.9167%; height: 5.6034%; }
.rider-2 { transform: translateX(6130.91%); }
@keyframes ride-2 { from { transform: translateX(-181.82%); } to { transform: translateX(11090.91%); } }
@media (prefers-reduced-motion: no-preference) {
  .rider-2 { animation: ride-2 430s linear -240.8s infinite; }
}
.rider-3 { left: -0.2083%; top: 88.5776%; width: 0.9167%; height: 5.6034%; }
.rider-3 { transform: translateX(7370.91%); }
@keyframes ride-3 { from { transform: translateX(11090.91%); } to { transform: translateX(-181.82%); } }
@media (prefers-reduced-motion: no-preference) {
  .rider-3 { animation: ride-3 400s linear -132.0s infinite; }
}
.rider-4 { left: -0.2083%; top: 88.5776%; width: 0.9167%; height: 5.6034%; }
.rider-4 { transform: translateX(2072.73%); }
@keyframes ride-4 { from { transform: translateX(11090.91%); } to { transform: translateX(-181.82%); } }
@media (prefers-reduced-motion: no-preference) {
  .rider-4 { animation: ride-4 460s linear -368.0s infinite; }
}
.metro-west { left: -0.1667%; top: 94.6121%; width: 7.7500%; height: 4.0948%; }
.metro-west { transform: translateX(423.25%); }
@keyframes run-west { from { transform: translateX(1322.58%); } to { transform: translateX(-127.96%); } }
@media (prefers-reduced-motion: no-preference) {
  .metro-west { animation: run-west 135s linear -83.7s infinite; }
}
.metro-east { left: -0.1667%; top: 94.6121%; width: 7.7500%; height: 4.0948%; }
.metro-east { transform: translateX(133.14%); }
@keyframes run-east { from { transform: translateX(-127.96%); } to { transform: translateX(1322.58%); } }
@media (prefers-reduced-motion: no-preference) {
  .metro-east { animation: run-east 110s linear -19.8s infinite; }
}
.ring-1 { left: 12.5417%; top: 77.5862%; width: 0.7500%; height: 3.8793%; }
@media (prefers-reduced-motion: no-preference) {
  .ring-1 { animation: ring 3s ease-out 0.00s infinite; }
}
.ring-2 { left: 25.6250%; top: 56.6810%; width: 0.7500%; height: 3.8793%; }
@media (prefers-reduced-motion: no-preference) {
  .ring-2 { animation: ring 3s ease-out 0.75s infinite; }
}
.ring-3 { left: 45.9583%; top: 41.1638%; width: 0.7500%; height: 3.8793%; }
@media (prefers-reduced-motion: no-preference) {
  .ring-3 { animation: ring 3s ease-out 1.50s infinite; }
}
.ring-4 { left: 64.2083%; top: 34.2672%; width: 0.7500%; height: 3.8793%; }
@media (prefers-reduced-motion: no-preference) {
  .ring-4 { animation: ring 3s ease-out 2.25s infinite; }
}
.ring-5 { left: 74.0417%; top: 5.3879%; width: 0.7500%; height: 3.8793%; }
@media (prefers-reduced-motion: no-preference) {
  .ring-5 { animation: ring 3s ease-out 0.00s infinite; }
}
.drone-1 { left: 69.7917%; top: 24.3534%; width: 1.0833%; height: 2.1552%; }
@keyframes hover-1 { from { transform: translate(-38.46%, -30%); } to { transform: translate(38.46%, 30%); } }
@media (prefers-reduced-motion: no-preference) {
  .drone-1 { animation: hover-1 3.6s ease-in-out infinite alternate; }
}
.drone-2 { left: 88.6250%; top: 81.6810%; width: 1.0833%; height: 2.1552%; }
@keyframes hover-2 { from { transform: translate(-38.46%, -30%); } to { transform: translate(38.46%, 30%); } }
@media (prefers-reduced-motion: no-preference) {
  .drone-2 { animation: hover-2 4.4s ease-in-out -1.6s infinite alternate; }
}
.flock { left: 15.5000%; top: 30.8190%; width: 2.3333%; height: 10.5603%; }
@keyframes fly { from { transform: translateX(-1250%); } to { transform: translateX(4107.14%); } }
@media (prefers-reduced-motion: no-preference) {
  .flock { animation: fly 80s linear -24s infinite both; }
}
.glint-1 { left: 62.6987%; top: 57.9232%; width: 0.5193%; height: 2.6861%; }
@media (prefers-reduced-motion: no-preference) {
  .glint-1 { animation: glint 5.5s ease-in-out 3.33s infinite; }
}
.glint-2 { left: 66.0005%; top: 48.5173%; width: 0.4990%; height: 2.5808%; }
@media (prefers-reduced-motion: no-preference) {
  .glint-2 { animation: glint 5.5s ease-in-out 4.06s infinite; }
}
.glint-3 { left: 67.0917%; top: 64.1228%; width: 0.5667%; height: 2.9312%; }
@media (prefers-reduced-motion: no-preference) {
  .glint-3 { animation: glint 5.5s ease-in-out 4.79s infinite; }
}
.glint-4 { left: 71.4945%; top: 61.5191%; width: 0.5943%; height: 3.0740%; }
@media (prefers-reduced-motion: no-preference) {
  .glint-4 { animation: glint 5.5s ease-in-out 5.52s infinite; }
}
.glint-5 { left: 72.4375%; top: 58.0490%; width: 0.5416%; height: 2.8016%; }
@media (prefers-reduced-motion: no-preference) {
  .glint-5 { animation: glint 5.5s ease-in-out 6.25s infinite; }
}
.glint-6 { left: 75.4123%; top: 29.2842%; width: 0.5920%; height: 3.0621%; }
@media (prefers-reduced-motion: no-preference) {
  .glint-6 { animation: glint 5.5s ease-in-out 6.98s infinite; }
}
.glint-7 { left: 76.7359%; top: 49.1836%; width: 0.4449%; height: 2.3010%; }
@media (prefers-reduced-motion: no-preference) {
  .glint-7 { animation: glint 5.5s ease-in-out 7.71s infinite; }
}
.glint-8 { left: 78.1061%; top: 57.0588%; width: 0.5377%; height: 2.7814%; }
@media (prefers-reduced-motion: no-preference) {
  .glint-8 { animation: glint 5.5s ease-in-out 8.44s infinite; }
}
.glint-9 { left: 79.0430%; top: 52.1489%; width: 0.6640%; height: 3.4347%; }
@media (prefers-reduced-motion: no-preference) {
  .glint-9 { animation: glint 5.5s ease-in-out 9.17s infinite; }
}
.glint-10 { left: 80.4229%; top: 60.3236%; width: 0.5709%; height: 2.9531%; }
@media (prefers-reduced-motion: no-preference) {
  .glint-10 { animation: glint 5.5s ease-in-out 9.90s infinite; }
}