/* ---------- Home: positioning-first hero ---------- */
/* One vertical rhythm for the whole page: every section is the same distance from the next */
:root { --rhythm: clamp(72px, 9vw, 104px); }
.hero { padding-bottom: var(--rhythm); }
@media (min-width: 721px) { .hero { grid-template-columns: auto minmax(0, 500px); } }
.hero-copy { min-width: 0; }
.hero .avatar { top: 0; } /* photo and text block share one centre line */
/* Intro line: the name, then rotating phrases about who I am */
.intro {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2.2vw, 22px); line-height: 1.4; white-space: nowrap;
  opacity: 0; translate: 0 8px; animation: rise .6s ease .05s forwards;
}
.intro .wave { margin-inline: 2px; }
.intro .typed { color: var(--text); background: none; font-weight: 700; }
.pitch {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
  opacity: 0; translate: 0 8px;
  animation: rise .6s ease .2s forwards;
}
/* "simple." gets the same marker underline as the typed word, drawn in after the line lands */
.pitch em {
  font-style: normal;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 80%, transparent) 62%) no-repeat 0 0 / 0% 100%;
  animation: mark .7s cubic-bezier(.22, 1, .36, 1) .9s forwards;
}
@keyframes mark { to { background-size: 100% 100%; } }
/* CTA: an underlined link with one solid line. Hover only darkens the text and nudges the arrow,
   so its size never changes and nothing around it moves */
.hero .hero-cta { margin-top: 36px; }
.hero .hero-cta .text-link {
  font-size: 18px; font-weight: 600; gap: 10px; padding: 0 0 5px;
  background: none; border-bottom: 2px solid var(--text); color: var(--text);
}
.hero .hero-cta .text-link:hover { background-size: auto; }
.hero .hero-cta .text-link:hover span { translate: 0 3px; }
@media (max-width: 720px) { .pitch { margin-inline: auto; max-width: 16ch; } .intro { white-space: normal; min-height: 2.8em; } }
@media (prefers-reduced-motion: reduce) { .intro { opacity: 1; translate: none; } .pitch { opacity: 1; translate: none; } .pitch em { background-size: 100% 100%; } }

/* ---------- Client logos ----------
   A centred label above one row. Every logo sits in an identical cell and is
   sized to the same visual weight, in one muted tone; colour returns on hover. */
.clients { text-align: center; padding-bottom: var(--rhythm); }
.clients-label {
  margin: 0 0 22px; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.clients .logo-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 20px clamp(32px, 5vw, 64px); padding: 0; border: 0;
}
.clients .logo-row li { display: grid; place-items: center; height: 40px; }
.clients .logo-row li::after { display: none; }
.clients .logo-row li:hover { scale: none; }
/* every mark flattened to one exact tone (solid, then faded), so no logo reads darker than another */
.clients .logo-row img { filter: brightness(0); opacity: .5; transition: filter .3s ease, opacity .3s ease; }
:root[data-theme="dark"] .clients .logo-row img { filter: brightness(0) invert(1); opacity: .6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clients .logo-row img { filter: brightness(0) invert(1); opacity: .6; } }
.clients .logo-row li:hover img { filter: none !important; opacity: 1; }
/* Sized by measured visual mass (ink area weighted by how dense each mark is),
   so a compact mark like CDW stands taller and a long, solid one like Nokia shorter. */
.clients .logo-amex { height: 29px; }
.clients .logo-vmware { height: 18px; } /* wordmark only, sized by the same visual-mass measure */
.clients .logo-nokia { height: 16px; }
.clients .logo-redseal { height: 20px; }
.clients .logo-cdw { height: 34px; }
@media (max-width: 720px) { .clients .logo-row { gap: 20px 32px; } }

/* ---------- Work: a calm 2 × 2 grid ---------- */
.card-info p { text-wrap: pretty; }
.card-info .wip { white-space: nowrap; font-style: italic; }
.card-info h3 { white-space: nowrap; }

/* ---------- Range: domains as a secondary section ---------- */
.container > .range { padding-top: var(--range-top, var(--rhythm)); padding-bottom: var(--range-bottom, var(--rhythm)); }
.range .section-title { margin-bottom: 12px; }
.range-lede { margin: 0 auto 28px; max-width: 52ch; color: var(--muted); font-size: 15px; text-wrap: balance; }
/* same gap above and below as every other section on the page (one --rhythm) */

/* ---------- Anchoring: group the intro, then give each section a hairline "chapter" edge ----------
   The logos sit close under the hero (they back up the pitch), set off by a hairline;
   every section title below starts from the same hairline, all centred. */
.hero { padding-bottom: clamp(44px, 5vw, 56px); }
.clients { border-top: 1px solid var(--line); padding-top: 28px; }
#work > .section-title, .range > .section-title {
  border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 32px);
}

/* "simple" marker: sits behind the lower half of the letters (not below them), word only, readable in dark mode */
.pitch em {
  --mark: color-mix(in srgb, var(--accent) 80%, transparent);
  background-image: linear-gradient(transparent 50%, var(--mark) 50%, var(--mark) 86%, transparent 86%);
  padding: 0 .04em; margin: 0 -.04em;
}
:root[data-theme="dark"] .pitch em { --mark: color-mix(in srgb, #b8932e 55%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pitch em { --mark: color-mix(in srgb, #b8932e 55%, transparent); } }