/* s-hero.css: section styles, owned by the hero agent */
/* hidden initial states: only with JS on and motion not failed; .is-shown (set by js/s-hero.js) lifts them */
html.js:not(.motion-failed) .home-hero:not(.is-shown) .home-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js:not(.motion-failed) .home-hero:not(.is-shown) .home-hero__line { transform: scaleX(0); transform-origin: 0 50%; }
html.js:not(.motion-failed) .home-hero:not(.is-shown) .home-hero__words span { opacity: 0; transform: translateY(14px); }
html.js:not(.motion-failed) .home-hero:not(.is-shown) .home-hero__intro { opacity: 0; transform: translateY(40px); }
.home-hero .home-mark path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.home-hero .home-wordmark[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .home-hero * { transition: none !important; animation: none !important; }
  .home-hero__line { transform: none !important; }
  .home-hero__words span, .home-hero__intro { opacity: 1 !important; transform: none !important; }
}

/* the global canvas max-width:100% squashed the ink letters (thin, widely spaced look) */
.ink-wordmark .ink-canvas { max-width: none; }

/* ===== single hero, in flow: graphic row, rail, paragraph, wordmark. Nothing is absolutely stacked over the wordmark, so the paragraph can never collide with it. ===== */
.home-hero {
  height: auto; min-height: calc(100svh - var(--header-h, 56px));
  display: flex; flex-direction: column;
  padding: var(--hero-nav) 0 clamp(20px, 4vh, 44px);
  --hero-nav: 24px; --hg-tile: clamp(96px, min(17vh, 11vw), 190px); --hg-avatar: clamp(96px, 8vw, 128px);
}
.home-hero .home-hero__rail { position: relative; left: auto; right: auto; top: auto; margin: 48px var(--rg) 0; flex: none; }
.home-hero .home-hero__intro { position: relative; left: auto; right: auto; top: auto; flex: none; margin: 24px auto 0; width: min(calc(100% - 2 * var(--rg)), clamp(320px, 46vw, 720px)); }
.home-hero .home-wordmark-wrap { position: relative; left: auto; right: auto; bottom: auto; flex: none; margin: clamp(18px, 3.2vh, 40px) var(--rg) 0; padding-inline: 0; }
.home-wordmark { letter-spacing: -0.055em; }
.hg { position: relative; margin-inline: var(--rg); flex: 1 0 auto; min-height: clamp(340px, 46vh, 560px); display: flex; flex-direction: column; justify-content: space-between; }
.hg-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.hg-tiles { position: relative; display: flex; gap: 16px; }
.hg-tile {
  position: relative; width: var(--hg-tile); height: var(--hg-tile); flex: none;
  display: flex; flex-direction: column; justify-content: space-between; padding: 10px;
  background: var(--white); color: var(--black);
  font-size: 12px; font-weight: 500; line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase;
}
.hg-edges { position: absolute; inset: 0; pointer-events: none; }
.hg-e { position: absolute; background: currentColor; }
.hg-e--t, .hg-e--b { left: 0; right: 0; height: 1px; transform-origin: 0 50%; }
.hg-e--r, .hg-e--l { top: 0; bottom: 0; width: 1px; transform-origin: 50% 0; }
.hg-e--t { top: 0; } .hg-e--b { bottom: 0; transform-origin: 100% 50%; }
.hg-e--l { left: 0; transform-origin: 50% 100%; } .hg-e--r { right: 0; }
.hg-tile__g { font-size: clamp(28px, 3.2vw, 48px); font-weight: 500; line-height: 1; text-transform: none; letter-spacing: -0.04em; }
.hg-tile__n { align-self: flex-end; }
.hg-merged { position: absolute; inset: 0; display: grid; place-items: center; color: var(--blue); opacity: 0; pointer-events: none; }
.hg-merged__t { font-size: clamp(16px, 1.9vw, 28px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; text-align: center; padding: 0 12px; }
html.js:not(.motion-failed) .hg:not(.is-armed) .hg-tile { visibility: hidden; }

/* profile picture: the one round element in the hero; specificity beats the flat reset (1,0,2) */
.hg-lower { display: contents; }
.hg-foot { display: flex; align-items: flex-end; gap: 16px; align-self: flex-start; }
.hg-facts { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.home-hero .hg-avatar:not(#a):not(#b) { display: block; flex: none; width: var(--hg-avatar); height: var(--hg-avatar); border-radius: 50%; object-fit: cover; background: var(--blue); }

/* reel: 9:16, square edged. Desktop: right of the tiles, full height of the graphic row */
.hg-reel { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 9 / 16; margin: 0; transform-origin: 100% 0; will-change: transform; }
.hg-reel__v { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--black); clip-path: inset(0); }
.hg-reel__btn {
  position: absolute; left: 0; bottom: 0; z-index: 2; min-width: 44px; min-height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; background: var(--white); color: var(--black); border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase;
}
.hg-reel__btn:hover { background: var(--black); color: var(--white); }
.hg-reel__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hg-reel__btn[hidden] { display: none; }

@media (max-width: 1023px) {
  .home-hero { --hero-nav: 20px; --hg-tile: clamp(96px, min(15vh, 18vw), 170px); }
  .hg { min-height: 0; gap: 28px; }
  .hg-stage { flex: none; }
  .hg-lower { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
  .hg-reel { position: relative; top: auto; right: auto; height: auto; width: min(40vw, 260px); flex: none; transform-origin: 50% 100%; }
}
@media (max-width: 767px) {
  .home-hero { --hg-tile: calc((100vw - 2 * var(--rg) - 24px) / 3); --hg-avatar: 96px; }
  .hg-tiles { gap: 12px; }
  .hg-reel { width: min(46vw, 200px); }
  .hg-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .home-hero .home-hero__rail { margin-top: 48px; }
  .home-hero .home-hero__intro { margin-top: 24px; width: calc(100% - 2 * var(--rg)); max-width: 460px; }
  .home-hero .home-wordmark-wrap { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-merged { opacity: 0 !important; }
  .hg-tile { visibility: visible !important; }
}

/* ===== toolkit icon, inline in the hero sentence: one macOS squircle at a time ===== */
.home-hero .home-hero__intro { line-height: 1.2; }
.hg-use-line { white-space: nowrap; }
.hg-use {
  display: inline-block; position: relative; width: 1.3em; height: 1.3em;
  margin: 0 0.12em; padding: 0; border: 0; background: var(--white);
  vertical-align: -0.3em; cursor: pointer; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s var(--ease);
}
/* s-flat.css squares every corner; app icons are a documented exception, so out-specify it */
html body .hg-use:not(#flat) { border-radius: 23%; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.1); }
.hg-use__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; transition: opacity 0.3s var(--ease);
}
.hg-use__img.is-active { opacity: 1; }
.hg-use__img[data-fit="inset"] { transform: scale(0.64); }
.hg-use:hover { transform: scale(1.08); }
.hg-use:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hg-use__name { display: inline-block; transition: opacity 0.18s var(--ease); }
.hg-use__name.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hg-use, .hg-use__img { transition: none; }
  .hg-use:hover { transform: none; }
}