/*
 * Humm landing page — built 1:1 from Figma "Humm Landing Page" (844:33), 1440px artboard.
 * Decorative sections that must keep their proportions (signal photo + tracking
 * overlay, the "How we work" orbits) are laid out in design px × --u, which
 * shrinks them with the viewport below 1440 and caps them at 1:1 above it.
 */

:root {
  --c-light: #dfe4dd;
  --c-ink: #363e32;
  --c-dim: #6c7d64;
  --c-sage: #8a9b82;
  --c-muted: #b5c0b0;
  --c-white: #fff;

  --f-alpino: 'Alpino', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-jost: 'Jost', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-manrope: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  --u: min(1px, 100vw / 1440);
  --pad: 56px;
}

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

html { scroll-behavior: smooth; }
html, body { background: var(--c-light); color: var(--c-ink); }
body {
  font-family: var(--f-alpino);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
img, video, canvas, svg { display: block; }
button { appearance: none; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }

/* Figma trims text boxes to cap height — match it where the browser can */
.trim { text-box: trim-both cap alphabetic; }

/* ---------- Pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 7px;
  font: 400 12px/1.45 var(--f-alpino);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink);
}
.pill--sage { background: var(--c-muted); }
.pill--light { background: var(--c-light); }

/* ---------- 01 Hero ---------- */

.hero { padding: 14px 17px 0 18px; }

.hero__frame {
  position: relative;
  height: clamp(640px, calc(100svh - 14px), 995px);
  border-radius: 15px;
  overflow: hidden;
  background: var(--c-light);
  isolation: isolate;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  z-index: -1;
}

.nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 82px;
}
.nav__logo { position: absolute; left: 40px; top: 38px; }
.nav__logo img { width: 145.676px; height: 34.0033px; }

.nav__links {
  position: absolute;
  left: 50%;
  top: 45px;
  transform: translateX(-50%);
  display: flex;
  gap: 36px;
  white-space: nowrap;
}
.nav__links a {
  font: 400 15px/20px var(--f-alpino);
  color: var(--c-ink);
  transition: opacity .2s ease;
}
.nav__links a:hover { opacity: .6; }

.nav__dock {
  position: absolute;
  right: 39px;
  top: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px;
  border-radius: 15px;
  background: var(--c-ink);
}
.dock__login,
.dock__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font: 400 14px/normal var(--f-alpino);
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.dock__login { border-radius: 999px; color: rgba(255, 255, 255, .7); }
.dock__login:hover { color: var(--c-white); }
.dock__cta {
  width: 96px;
  padding: 10px 0;
  border-radius: 10px;
  background: var(--c-light);
  color: var(--c-ink);
}
.dock__cta:hover { background: var(--c-white); }

.hero__copy {
  position: absolute;
  left: 50%;
  top: 43%;
  z-index: 1;
  width: 591px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 33px;
  text-align: center;
  color: var(--c-ink);
}
.hero__copy h1 {
  font: 400 64px/.96 var(--f-alpino);
  letter-spacing: -2.56px;
}
.hero__copy p { font: 400 20px/normal var(--f-alpino); }

/* Ask Humm chat card */
.chat {
  position: absolute;
  left: 14px;
  bottom: 15px;
  z-index: 2;
  width: 237px;
  height: 237px;
  border-radius: 10px;
  background: var(--c-light);
  -webkit-backdrop-filter: blur(13.65px);
  backdrop-filter: blur(13.65px);
}
.chat__head { position: absolute; inset: 15px 0 auto; height: 23px; }
.chat__title {
  position: absolute;
  left: 16px;
  top: 0;
  font: 400 15px/normal var(--f-alpino);
  color: #000;
}
.chat__dot { position: absolute; left: 82px; top: -1px; width: 6px; height: 6px; animation: blink 1.6s ease-in-out infinite; }
.chat__min {
  position: absolute;
  left: 205px;
  top: 0;
  font: 400 16px/normal var(--f-jost);
  color: var(--c-dim);
}
.chat__sphere { position: absolute; left: 72px; top: 57px; }

.chat__input {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 237px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 7.791px 7.791px 7.791px 15.583px;
  border-radius: 10px;
  background: var(--c-white);
  overflow: hidden;
}
.chat__input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: 400 13.635px/normal var(--f-jost);
  color: var(--c-ink);
}
.chat__input input::placeholder { color: var(--c-dim); }
.chat__input button img { width: 35.0609px; height: 35.0609px; }

@keyframes blink { 50% { opacity: .35; } }

/* ---------- Thinking sphere ---------- */

.sphere { position: relative; }
.sphere > img, .sphere > svg { display: block; overflow: visible; }
.sphere[data-sphere="light"] { --s-front: #363e32; --s-back: rgba(108, 125, 100, .61); }
.sphere[data-sphere="dark"] { --s-front: #fff; --s-back: rgba(211, 211, 211, .61); }

/* ---------- 02 Manifesto ---------- */

.manifesto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 37px;
  padding: 119px var(--pad) 94px;
  text-align: center;
}
.manifesto__text {
  max-width: 784px;
  font: 400 40px/1.18 var(--f-alpino);
  letter-spacing: -1.2px;
  color: var(--c-ink);
}
.manifesto__text span { color: var(--c-dim); }

/* ---------- 03 Results ---------- */

.stats { padding-bottom: 40px; }
.stats__row {
  position: relative;
  width: 1036px;
  max-width: calc(100% - 2 * var(--pad));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 68px;
}
.stats__rules { position: absolute; left: 325px; top: 82px; width: 384px; height: 129px; pointer-events: none; }
.stat {
  height: 300px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 70px;
  text-align: center;
}
.stat__num {
  font: 300 48px/1 var(--f-manrope);
  letter-spacing: -1.44px;
  color: var(--c-ink);
  text-box: trim-both cap alphabetic;
}
.stat__label {
  width: 213px;
  font: 400 16px/normal var(--f-alpino);
  color: var(--c-dim);
  text-box: trim-both cap alphabetic;
}

/* ---------- Dark block ---------- */

.dark {
  border-radius: 15px;
  background: var(--c-ink);
  color: var(--c-light);
  padding-bottom: 92px;
}

/* ---------- 04 Industries ---------- */

.industries {
  position: relative;
  width: 1440px;
  max-width: 100%;
  margin: 0 auto;
  padding: 90px 60px 0 57px;
  display: grid;
  grid-template-columns: 465px 34px 1fr;
  column-gap: 0;
}
.industries__intro { grid-column: 1; }
.industries__title {
  width: 309px;
  margin-top: 39px;
  font: 400 40px/1.05 var(--f-alpino);
  letter-spacing: -1.2px;
  color: var(--c-white);
  text-box: trim-both cap alphabetic;
}
.industries__text {
  width: 320px;
  margin: 48px 0 0 2px;
  font: 400 16px/1.5 var(--f-alpino);
  color: var(--c-light);
  text-box: trim-both cap alphabetic;
}

.rail { grid-column: 2; position: relative; width: 34px; height: 1056.8px; margin-top: 88px; }
.rail img {
  position: absolute;
  left: 0;
  top: 0;
  width: 1056.8px;
  height: 34px;
  max-width: none;
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(-34px);
}

.ind-list {
  grid-column: 3;
  margin: 88px 0 0 59px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* One row is lit at a time: the first by default, the hovered one while pointing */
.ind {
  --t: rgba(255, 255, 255, .5);
  --tx: rgba(223, 228, 221, .4);
  display: flex;
  align-items: flex-end;
  gap: 68px;
}
.ind.is-active,
.ind-list:hover .ind:hover {
  --t: var(--c-white);
  --tx: var(--c-light);
}
.ind-list:hover .ind.is-active:not(:hover) {
  --t: rgba(255, 255, 255, .5);
  --tx: rgba(223, 228, 221, .4);
}

.ind__media { display: flex; align-items: flex-start; gap: 37px; }
.ind__img {
  width: 237px;
  height: 237px;
  border-radius: 10px;
  object-fit: cover;
  background: #8b8b8b;
}
.ind__num {
  width: 150px;
  height: 46px;
  font: 200 40px/1 var(--f-manrope);
  letter-spacing: -1.2px;
  text-align: center;
  color: var(--tx);
  transition: color .3s ease;
  text-box: trim-both cap alphabetic;
}
.ind__body {
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
}
.ind__copy { display: flex; flex-direction: column; gap: 37px; }
.ind__title {
  font: 400 32px/1.2 var(--f-alpino);
  letter-spacing: -.32px;
  color: var(--t);
  transition: color .3s ease;
  text-box: trim-both cap alphabetic;
}
.ind__text {
  font: 400 16px/1.5 var(--f-alpino);
  color: var(--tx);
  transition: color .3s ease;
  text-box: trim-both cap alphabetic;
}
.ind__btn {
  padding: 14px;
  border: 1px solid rgba(223, 228, 221, .3);
  border-radius: 7px;
  font: 400 14px/normal var(--f-alpino);
  white-space: nowrap;
  color: var(--c-white);
  text-box: trim-both cap alphabetic;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.ind.is-active .ind__btn,
.ind-list:hover .ind:hover .ind__btn {
  border-color: var(--c-dim);
  background: var(--c-dim);
  color: var(--c-light);
}
.ind-list:hover .ind.is-active:not(:hover) .ind__btn {
  border-color: rgba(223, 228, 221, .3);
  background: none;
  color: var(--c-white);
}

/* ---------- 05 Signal ---------- */

/*
 * Full width with the hero's side margins, and no taller than the screen
 * (1410 × 994 on the 1440 × 1024 artboard). The photo, its tracking overlay and
 * the line under it form one piece (.signal__art, the photo's 1809 × 1010 box)
 * that covers the frame like object-fit: cover, so the dots stay on the man
 * at every size. Positions inside it are shares of that box.
 */
.signal { padding: calc(117 * var(--u)) 17px 0 18px; }
.signal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1410 / 994;
  max-height: calc(100svh - 30px);
  border-radius: 15px;
  overflow: hidden;
  background: #cfd8cc;
  container-type: size;
}
.signal__art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * 1809 / 1010);
  aspect-ratio: 1809 / 1010;
  transform: translate(-50%, -50%);
  container-type: inline-size;
}
.signal__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.signal__overlay {
  position: absolute;
  left: 10.2266%;   /* 185 / 1809 */
  top: -0.6931%;    /* -7 / 1010 */
  width: 79.6020%;  /* 1440 / 1809 */
  height: auto;
  max-width: none;
  pointer-events: none;
}
.signal__title {
  position: absolute;
  left: 34.0520%;   /* 616 / 1809 */
  top: 73.1683%;    /* 739 / 1010 */
  width: 32.6700%;  /* 591 / 1809 */
  font: 400 2.2112cqw/1.05 var(--f-jost);   /* 40px on the artboard */
  letter-spacing: -.0663cqw;
  text-align: center;
  color: var(--c-ink);
}

/* ---------- 06 Humm.OS ---------- */

.os { padding-top: 10px; }
.os__title {
  position: relative;
  z-index: 1;
  width: 393px;
  margin: -34px auto 0;
  font: 400 40px/1.05 var(--f-alpino);
  letter-spacing: -1.2px;
  text-align: center;
  color: var(--c-white);
}
.os__title span { color: var(--c-muted); }

/* ---------- 07 Case studies → cases.css ---------- */

/* ---------- 08 How we work ---------- */

.flow { overflow: hidden; }
.flow__canvas {
  position: relative;
  width: calc(1440 * var(--u));
  height: calc(1107 * var(--u));
  margin: 0 auto;
}
.flow__title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(167 * var(--u));
  font: 400 calc(40 * var(--u))/calc(48 * var(--u)) var(--f-alpino);
  text-align: center;
  white-space: nowrap;
  color: var(--c-ink);
  text-box: trim-both cap alphabetic;
}
.flow__title span { color: var(--c-sage); }

.orbit {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  max-width: none;
  height: auto;
}
.orbit--flip { transform: scaleX(-1); }

.step { position: absolute; inset: 0; pointer-events: none; }
.step__node {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(54, 62, 50, .4);
  border-radius: 999px;
  background: var(--c-light);
  font: 400 calc(10 * var(--u))/normal var(--f-mono);
  color: var(--c-ink);
}
.step__node--dark { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-light); }
.step__label {
  position: absolute;
  left: calc(var(--lx) * var(--u));
  top: calc(var(--ly) * var(--u));
  font: 400 calc(22 * var(--u))/1.2 var(--f-jost);
  letter-spacing: calc(-.22 * var(--u));
  white-space: nowrap;
  color: var(--c-ink);
}

/* ---------- 09 Ask Humm ---------- */

.ask {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 147px var(--pad) 160px;
  background: var(--c-ink);
}
.ask__head {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.ask__label {
  font: 400 11px/normal var(--f-mono);
  letter-spacing: .44px;
  color: var(--c-dim);
}
.ask__title {
  width: 640px;
  max-width: 100%;
  font: 400 40px/1.05 var(--f-jost);
  letter-spacing: -1.2px;
  color: var(--c-white);
}
.ask__title span { color: rgba(255, 255, 255, .55); }
.ask__intro {
  width: 520px;
  max-width: 100%;
  font: 400 17px/1.45 var(--f-jost);
  color: var(--c-light);
}
.ask__input {
  width: 720px;
  max-width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 24px;
  border-radius: 10px;
  background: var(--c-white);
  transition: box-shadow .25s ease;
}
.ask__input:focus-within { box-shadow: 0 0 0 4px rgba(223, 228, 221, .14); }
.ask__input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: 400 15px/normal var(--f-jost);
  color: var(--c-ink);
}
.ask__input input::placeholder { color: var(--c-dim); }
.ask__input button {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--c-ink);
}
.ask__input button img { width: 16px; height: 16px; }
.ask__chips { width: 732px; max-width: 100%; height: 25px; }

/* ---------- 10 CTA ---------- */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200px 46px 72px;
}
.cta__title {
  width: 640px;
  max-width: 100%;
  font: 400 40px/1.05 var(--f-alpino);
  letter-spacing: -1.2px;
  text-align: center;
  color: var(--c-ink);
}
.cta__title span { color: rgba(54, 62, 50, .55); }
.cta__actions { display: flex; gap: 8px; margin-top: 40px; }
.btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 10px;
  font: 400 14px/normal var(--f-jost);
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease;
}
.btn--primary { background: var(--c-ink); color: var(--c-light); }
.btn--primary:hover { background: #2a3127; }
.btn--secondary { border: 1px solid rgba(54, 62, 50, .24); color: var(--c-ink); }
.btn--secondary:hover { border-color: rgba(54, 62, 50, .5); }

.logos {
  width: 1344px;
  max-width: 100%;
  margin-top: 103px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
  border-radius: 10px;
  background: rgba(223, 228, 221, .72);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  overflow: hidden;
}
.logos__label {
  font: 500 12px/normal var(--f-jost);
  letter-spacing: .96px;
  white-space: nowrap;
  color: var(--c-dim);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: .85;
  white-space: nowrap;
  color: var(--c-ink);
}
.logo--arcfield { font: 600 15px/normal 'Archivo', sans-serif; letter-spacing: 1.8px; }
.logo--arcfield img { width: 22px; height: 14px; }
.logo--northgrid { font: 600 16px/normal var(--f-manrope); letter-spacing: -.32px; }
.logo--northgrid img { width: 16px; height: 16px; }
.logo--kestrel { gap: 6px; font: 300 17px/normal 'Barlow Condensed', sans-serif; letter-spacing: 1.02px; }
.logo--kestrel b { font-weight: 600; }
.logo--kestrel img { width: 18px; height: 16px; }
.logo--halden { font: 400 21px/normal 'Instrument Serif', serif; }
.logo--fabrik { gap: 7px; font: 700 17px/normal 'Syne', sans-serif; letter-spacing: -.51px; }
.logo--fabrik img { width: 16px; height: 16px; }

/* ---------- 11 Footer ---------- */

.footer {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 64px var(--pad) 40px;
  background: var(--c-ink);
  color: var(--c-light);
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer__brand { display: flex; flex-direction: column; gap: 20px; }
.footer__brand img { width: 145.676px; height: 34.0033px; }
.footer__brand p { width: 240px; font: 400 13px/normal var(--f-alpino); color: var(--c-white); }
.footer__col { display: flex; flex-direction: column; gap: 12px; font: 400 13px/normal var(--f-alpino); }
.footer__col a { transition: opacity .2s ease; }
.footer__col a:hover { opacity: .6; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font: 400 10px/normal var(--f-mono);
  letter-spacing: .4px;
  color: var(--c-white);
}

/* ---------- Responsive (structure only — refined later) ---------- */

@media (max-width: 1200px) {
  .industries { grid-template-columns: 1fr; padding: 90px var(--pad) 0; }
  .rail { display: none; }
  .ind-list { grid-column: 1; margin: 64px 0 0; }
  .stats__rules { display: none; }
}

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .stats__row { grid-template-columns: 1fr; row-gap: 0; }
  .stat { height: auto; padding: 40px 10px; gap: 40px; }
}

@media (max-width: 900px) {
  .ind { flex-wrap: wrap; gap: 24px; }
  .ind__num { width: auto; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}

@media (max-width: 759px) {
  :root { --pad: 20px; }
  .hero { padding: 8px 8px 0; }
  .nav__logo { left: 20px; top: 24px; }
  .nav__logo img { width: 110px; height: auto; }
  .nav__dock { right: 16px; top: 16px; padding: 5px; border-radius: 13px; }
  .dock__login { display: none; }
  .hero__copy { width: calc(100% - 40px); top: 30%; gap: 18px; }
  .hero__copy h1 { font-size: clamp(34px, 10vw, 48px); letter-spacing: -1.4px; }
  .hero__copy p { font-size: 16px; }
  .chat { left: 8px; bottom: 8px; }
  .manifesto { padding: 80px var(--pad) 56px; }
  .manifesto__text, .cta__title, .ask__title, .os__title { font-size: clamp(26px, 7.4vw, 34px); }
  .manifesto__text br { display: none; }
  .industries__title { width: auto; font-size: 32px; }
  .industries__text { width: auto; }
  .ind__media { width: 100%; }
  .ind__img { width: 50%; height: auto; aspect-ratio: 1; }
  .ind__body { width: 100%; }
  .os__title { width: auto; padding: 0 var(--pad); }
  .ask { padding: 96px var(--pad) 104px; }
  .cta { padding: 120px var(--pad) 48px; }
  .cta__actions { flex-wrap: wrap; justify-content: center; }
  .logos { flex-wrap: wrap; justify-content: center; gap: 18px 28px; }
  .logos__label { width: 100%; text-align: center; }
  .footer__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chat__dot { animation: none; }
}