/* ==========================================================================
   Fonts
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
  --ink: #171918;
  --paper: #f4f2ec;
  --lime: #c8ff27;
  --coral: #ff6b58;
  --blue: #65b9ff;
  --violet: #b9a5ff;
  --gold: #ffbf47;
  --line: rgba(23, 25, 24, .18);
  --muted: #72756f;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Background grain overlay */
.noise {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  inset: 0;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Global Typography
   ========================================================================== */

.eyebrow {
  margin: 0;
  font: 500 11px/1.2 "DM Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  letter-spacing: -.065em;
  line-height: .96;
}

h1 {
  max-width: 1110px;
  margin: clamp(28px, 5vw, 66px) 0 clamp(50px, 8vw, 105px);
  font-size: clamp(54px, 9.4vw, 144px);
  font-weight: 700;
}

em {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
}

/* ==========================================================================
   Page Shell
   ========================================================================== */

.site-header,
.section-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: clamp(24px, 5vw, 76px);
  padding-right: clamp(24px, 5vw, 76px);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

.site-header {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.07em;
}

.wordmark span {
  color: var(--coral);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px;
  font-weight: 700;
}

.site-nav a {
  transition: opacity .2s ease;
}

.site-nav a:hover {
  opacity: .55;
}

.nav-contact {
  border: 1px solid var(--ink);
  padding: 10px 14px;
  border-radius: 999px;
}

.nav-contact span,
.text-link span,
.contact-links span {
  color: var(--coral);
}

.nav-toggle {
  display: none;
  border: 0;
  background: none;
  font-weight: 700;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-top: clamp(62px, 10vw, 150px);
  padding-bottom: 45px;
  min-height: min(660px, calc(100vh - 86px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Headline sits beside the avatar; copy/CTA run full-width beneath both.
   The text column is minmax(0, 1fr) so it soaks up whatever isn't used by
   the avatar's own fixed footprint and the (now tight) column-gap — the
   avatar's decorative wrapper (300–340px, unchanged) already sits flush
   against the hero's normal right inset, so shrinking the gap is what
   actually reclaims space for the headline without touching the avatar. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 340px);
  grid-template-areas:
    "headline avatar"
    "bottom   bottom";
  align-items: start;
  column-gap: clamp(16px, 2.2vw, 28px);
  row-gap: clamp(40px, 6vw, 64px);
}

.hero-grid h1 {
  grid-area: headline;
}

.hero-bottom {
  grid-area: bottom;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 40px);
}

/* Avatar cell — a square positioning box, comfortably larger than the
   photo. Every decorative layer below is sized in fixed pixels against
   this box, so nothing bleeds past its edges. */
.hero-image {
  grid-area: avatar;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image img {
  position: relative;
  z-index: 2;
  width: clamp(180px, 15vw, 200px);
  height: clamp(180px, 15vw, 200px);
  border-radius: 50%;
  border: 1px solid var(--ink);
  object-fit: cover;
  background: #a9efd5;
}

/* Soft radial glow behind the avatar */
.hero-avatar-glow {
  position: absolute;
  inset: -8px;
  z-index: 0;
  border-radius: 50%;
  /* rgba equivalents of --lime, layered so the wash reads clearly */
  background: radial-gradient(circle, rgba(200, 255, 39, .55) 0%, rgba(200, 255, 39, .2) 45%, rgba(200, 255, 39, 0) 72%);
  filter: blur(26px);
  pointer-events: none;
}

/* Two thin rings, rotating at different speeds in opposite directions.
   Fixed pixel insets keep both rings well inside the 300–340px wrapper. */
.hero-avatar-ring {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.hero-avatar-ring--inner {
  inset: 45px;
  border: 1.5px solid rgba(23, 25, 24, .3);
}

.hero-avatar-ring--outer {
  inset: 20px;
  border: 1.5px dashed rgba(200, 255, 39, .5);
}

/* Particles: placement (angle + fixed distance from center) keeps every
   one inside the wrapper and clearly outside the avatar's radius — they
   can never cover the photo. Only opacity and a small vertical drift
   move. Tune --angle/--distance/--size/--duration/--delay/--peak per
   particle below to restyle the field. */
.hero-avatar-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-avatar-particles span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--ink);
  opacity: .32;
  transform: rotate(var(--angle)) translate(var(--distance)) rotate(calc(-1 * var(--angle)));
}

.hero-avatar-particles span:nth-child(1) {
  --angle: 8deg;
  --distance: 112px;
  --size: 7px;
  --duration: 8s;
  --delay: 0s;
  --peak: .8;
}

.hero-avatar-particles span:nth-child(2) {
  --angle: 33deg;
  --distance: 128px;
  --size: 6px;
  --duration: 10s;
  --delay: .8s;
  --peak: .6;
}

.hero-avatar-particles span:nth-child(3) {
  --angle: 58deg;
  --distance: 118px;
  --size: 9px;
  --duration: 7s;
  --delay: 1.6s;
  --peak: .75;
}

.hero-avatar-particles span:nth-child(4) {
  --angle: 84deg;
  --distance: 133px;
  --size: 6px;
  --duration: 11s;
  --delay: 2.4s;
  --peak: .55;
}

.hero-avatar-particles span:nth-child(5) {
  --angle: 110deg;
  --distance: 110px;
  --size: 8px;
  --duration: 9s;
  --delay: 3.2s;
  --peak: .85;
}

.hero-avatar-particles span:nth-child(6) {
  --angle: 136deg;
  --distance: 130px;
  --size: 6px;
  --duration: 12s;
  --delay: 4s;
  --peak: .6;
}

.hero-avatar-particles span:nth-child(7) {
  --angle: 162deg;
  --distance: 120px;
  --size: 10px;
  --duration: 6.5s;
  --delay: 4.8s;
  --peak: .7;
}

.hero-avatar-particles span:nth-child(8) {
  --angle: 188deg;
  --distance: 132px;
  --size: 7px;
  --duration: 13s;
  --delay: 5.6s;
  --peak: .55;
}

.hero-avatar-particles span:nth-child(9) {
  --angle: 214deg;
  --distance: 115px;
  --size: 11px;
  --duration: 8.5s;
  --delay: .4s;
  --peak: .9;
}

.hero-avatar-particles span:nth-child(10) {
  --angle: 240deg;
  --distance: 126px;
  --size: 6px;
  --duration: 10.5s;
  --delay: 1.2s;
  --peak: .6;
}

.hero-avatar-particles span:nth-child(11) {
  --angle: 266deg;
  --distance: 122px;
  --size: 8px;
  --duration: 7.5s;
  --delay: 2s;
  --peak: .75;
}

.hero-avatar-particles span:nth-child(12) {
  --angle: 292deg;
  --distance: 131px;
  --size: 7px;
  --duration: 11.5s;
  --delay: 2.8s;
  --peak: .55;
}

.hero-avatar-particles span:nth-child(13) {
  --angle: 318deg;
  --distance: 113px;
  --size: 9px;
  --duration: 9.5s;
  --delay: 3.6s;
  --peak: .8;
}

.hero-avatar-particles span:nth-child(14) {
  --angle: 344deg;
  --distance: 127px;
  --size: 6px;
  --duration: 12.5s;
  --delay: 5.2s;
  --peak: .6;
}

/* Motion is opt-in: only runs when the visitor hasn't asked for less of it */
@media (prefers-reduced-motion: no-preference) {
  .hero-avatar-ring--inner {
    animation: hero-orbit 30s linear infinite;
  }

  .hero-avatar-ring--outer {
    animation: hero-orbit 55s linear infinite reverse;
  }

  .hero-avatar-particles span {
    animation: hero-particle-drift var(--duration) ease-in-out var(--delay) infinite;
  }
}

@keyframes hero-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hero-particle-drift {
  0%,
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translate(var(--distance)) rotate(calc(-1 * var(--angle))) translateY(0);
  }

  50% {
    opacity: var(--peak);
    transform: rotate(var(--angle)) translate(var(--distance)) rotate(calc(-1 * var(--angle))) translateY(-16px);
  }
}

.hero-copy {
  width: min(520px, 100%);
  margin: 0;
  font-size: clamp(16px, 1.45vw, 21px);
  letter-spacing: -.035em;
  line-height: 1.43;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 13px;
}

.resume-download {
  min-width: 186px;
  padding: 11px 13px 11px 16px;
  border: 1px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  font-weight: 800;
  transition: background .2s ease, color .2s ease;
}

.resume-download:hover {
  background: var(--ink);
  color: var(--paper);
}

.resume-download .file-type {
  font: 500 10px "DM Mono", monospace;
  color: var(--coral);
}

.round-link {
  width: 60px;
  height: 60px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  transition: background .2s, transform .2s;
}

.round-link:hover {
  background: var(--lime);
  transform: translateY(4px);
}

.signal-line {
  margin-top: clamp(55px, 10vw, 135px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  align-items: end;
  height: 45px;
}

.signal-line span {
  background: var(--ink);
}

.signal-line span:nth-child(1) {
  height: 20%;
}

.signal-line span:nth-child(2) {
  height: 46%;
}

.signal-line span:nth-child(3) {
  height: 100%;
  background: var(--coral);
}

.signal-line span:nth-child(4) {
  height: 60%;
}

.signal-line span:nth-child(5) {
  height: 31%;
}

/* ==========================================================================
   Proof Strip
   ========================================================================== */

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ink);
  color: var(--paper);
}

.proof-strip div {
  padding: 30px clamp(24px, 5vw, 76px);
  border-right: 1px solid rgba(244, 242, 236, .24);
}

.proof-strip div+div {
  padding-left: clamp(24px, 3vw, 48px);
}

.proof-strip strong {
  display: block;
  font-size: clamp(25px, 3vw, 43px);
  line-height: 1;
  letter-spacing: -.07em;
}

.proof-strip span {
  display: block;
  margin-top: 7px;
  font: 400 10px/1.25 "DM Mono", monospace;
  text-transform: uppercase;
  color: #bdbeb8;
}

/* ==========================================================================
   Section Shared Utilities
   ========================================================================== */

.section {
  padding-top: clamp(90px, 14vw, 190px);
  padding-bottom: clamp(90px, 14vw, 190px);
}

.section-intro {
  display: grid;
  grid-template-columns: 1.1fr 2fr 1.1fr;
  gap: 25px;
  align-items: start;
  margin-bottom: 72px;
}

.section-intro h2,
.split-heading h2,
.contact h2 {
  margin: 0;
  font-size: clamp(39px, 5.6vw, 78px);
  font-weight: 700;
}

.section-intro > p:last-child,
.split-heading > p {
  margin: 8px 0 0;
  font-size: 15px;
  color: #4d504b;
}

/* ==========================================================================
   Case Studies
   ========================================================================== */

.case-study-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.case-study {
  min-height: 550px;
  padding: 19px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink);
  background: #e9e7e0;
  transition: transform .25s ease;
}

.case-study:hover {
  transform: translateY(-6px);
}

.case-study.lime {
  background: var(--lime);
}

.case-study.coral {
  background: var(--coral);
}

.case-study.blue {
  background: var(--blue);
}

.case-study.violet {
  background: var(--violet);
}

.case-study.gold {
  background: var(--gold);
}

.case-meta {
  display: grid;
  grid-template-columns: 45px 1fr auto;
  gap: 12px;
  font: 500 10px/1.3 "DM Mono", monospace;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(23, 25, 24, .48);
  padding-bottom: 12px;
}

.case-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: clamp(36px, 4vw, 66px) 4px 3px;
}

.case-role {
  font: 500 11px/1.3 "DM Mono", monospace;
  text-transform: uppercase;
}

.case-content h3 {
  max-width: 590px;
  margin: 0;
  font-size: clamp(33px, 4vw, 60px);
  font-weight: 700;
}

.case-summary {
  max-width: 410px;
  margin: 30px 0;
  font-size: 16px;
  letter-spacing: -.03em;
}

.case-footer {
  margin-top: auto;
}

.result-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.result-list li {
  padding: 6px 9px;
  background: rgba(244, 242, 236, .5);
  border-radius: 3px;
  font: 500 10px/1.2 "DM Mono", monospace;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-list span {
  font-size: 11px;
}

.tag-list span:not(:last-child)::after {
  content: '·';
  margin-left: 6px;
}

/* ==========================================================================
   Field Gallery
   ========================================================================== */

.field-gallery {
  padding-bottom: clamp(100px, 14vw, 190px);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(35px, 7vw, 105px);
}

.gallery-intro h2 {
  max-width: 470px;
  margin: 27px 0 20px;
  font-size: clamp(38px, 4.7vw, 66px);
}

.gallery-intro > p:last-child {
  max-width: 390px;
  margin: 0;
  color: #4d504b;
  font-size: 15px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.gallery-photo {
  margin: 0;
  overflow: hidden;
  background: #dedbd4;
}

.gallery-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.gallery-photo:hover img {
  transform: scale(1.025);
}

.gallery-photo figcaption {
  padding: 9px 2px 0;
  font: 500 10px "DM Mono", monospace;
  text-transform: uppercase;
  color: var(--muted);
}

.photo-room {
  grid-row: span 2;
}

.photo-room img {
  aspect-ratio: 2/3;
}

.photo-conversation img,
.photo-group img,
.photo-huddle img {
  aspect-ratio: 4/3;
}

/* ==========================================================================
   Approach
   ========================================================================== */

.approach {
  padding-top: 0;
  padding-bottom: clamp(100px, 14vw, 190px);
}

.approach > .eyebrow {
  margin-bottom: 35px;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.approach-grid article {
  padding: 24px 30px 0 0;
  min-height: 245px;
}

.approach-grid article+article {
  padding-left: 30px;
  border-left: 1px solid var(--line);
}

.approach-grid span {
  color: var(--coral);
  font: 500 11px "DM Mono", monospace;
}

.approach-grid h3 {
  margin: 38px 0 12px;
  font-size: 29px;
}

.approach-grid p {
  max-width: 310px;
  font-size: 14px;
  color: #4d504b;
}

/* ==========================================================================
   Split Sections (Writing / Tools)
   ========================================================================== */

.split-section {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(45px, 10vw, 140px);
  border-top: 1px solid var(--line);
}

.split-heading > p {
  max-width: 350px;
  margin-top: 25px;
}

.text-link {
  display: inline-block;
  margin-top: 35px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  font-size: 13px;
  font-weight: 700;
}

.article-list {
  border-top: 1px solid var(--ink);
}

.article-item {
  display: grid;
  grid-template-columns: 44px 1fr 20px;
  gap: 13px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.article-item > span:first-child,
.article-item p {
  font: 500 10px/1.25 "DM Mono", monospace;
  color: var(--muted);
  text-transform: uppercase;
}

.article-item h3 {
  margin: 5px 0 0;
  font-size: 25px;
}

.article-item .item-description {
  max-width: 410px;
  margin: 10px 0 0;
  color: #555854;
  font: 400 13px/1.45 Manrope, Arial, sans-serif;
  text-transform: none;
}

.article-arrow {
  font-size: 20px;
}

.empty-card {
  min-height: 285px;
  padding: 26px;
  background: #e9e7e0;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.empty-card > span {
  font: 500 10px "DM Mono", monospace;
  text-transform: uppercase;
  color: var(--muted);
}

.empty-card h3 {
  max-width: 410px;
  margin: 14px 0 12px;
  font-size: clamp(32px, 4vw, 52px);
}

.empty-card p {
  margin: 0;
  font-size: 14px;
  color: #555854;
}

.empty-card code {
  background: rgba(23, 25, 24, .07);
  padding: 2px 4px;
}

/* ==========================================================================
   Events
   ========================================================================== */

.events-section {
  background: var(--ink);
  color: var(--paper);
  max-width: none;
  padding-top: clamp(90px, 14vw, 190px);
  padding-bottom: clamp(90px, 14vw, 190px);
}

.events-section .section-intro {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.events-section .eyebrow {
  color: #aaaca5;
}

.events-list {
  max-width: 1440px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(244, 242, 236, .32);
}

.event-item {
  padding: 23px 28px 0 0;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.event-item+.event-item {
  padding-left: 28px;
  border-left: 1px solid rgba(244, 242, 236, .32);
}

.event-number,
.event-type {
  font: 500 10px/1.2 "DM Mono", monospace;
  color: #aaaca5;
  text-transform: uppercase;
}

.event-type {
  margin: 35px 0 10px;
}

.event-item h3 {
  margin: 0;
  font-size: 31px;
}

.event-description {
  max-width: 330px;
  margin: 18px 0;
  color: #c2c4bc;
  font-size: 14px;
}

.event-item strong {
  margin-top: auto;
  color: var(--lime);
  font: 500 11px "DM Mono", monospace;
  text-transform: uppercase;
}

/* ==========================================================================
   Quote / Testimonials
   ========================================================================== */

.quote-section {
  padding: clamp(90px, 14vw, 190px) 0;
  text-align: center;
}

.quote-section .eyebrow {
  margin-bottom: 42px;
}

.quote-section blockquote {
  max-width: 1080px;
  margin: 0 auto;
  font: 500 clamp(34px, 5vw, 68px)/1.06 "Playfair Display", Georgia, serif;
  letter-spacing: -.045em;
}

.quote-source {
  margin: 28px 0;
  font: 500 11px "DM Mono", monospace;
  text-transform: uppercase;
  color: var(--muted);
}

.quote-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.quote-controls button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.quote-controls button:hover {
  background: var(--lime);
  border-color: var(--ink);
}

.quote-controls span {
  font: 500 10px "DM Mono", monospace;
}

.ethos-proof {
  width: min(780px, 100%);
  margin: 55px auto 0;
}

.ethos-proof img {
  display: block;
  width: 100%;
  border: 1px solid var(--ink);
}

.ethos-proof figcaption {
  margin-top: 9px;
  font: 500 10px "DM Mono", monospace;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Now (Building)
   ========================================================================== */

.now-section {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 2.3fr;
  gap: 20px;
}

.now-label {
  display: flex;
  gap: 10px;
  align-items: center;
}

.live-dot {
  font: 500 9px "DM Mono", monospace;
  text-transform: uppercase;
  color: #2f5100;
  background: var(--lime);
  padding: 4px 6px;
  border-radius: 20px;
}

.now-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.now-card {
  min-height: 215px;
  padding: 20px;
  background: #e9e7e0;
}

.now-card p {
  margin: 0 0 42px;
  font: 500 10px "DM Mono", monospace;
  color: var(--muted);
  text-transform: uppercase;
}

.now-card h3 {
  margin: 0 0 14px;
  font-size: 25px;
}

.now-card span {
  color: #555854;
  font-size: 13px;
}

/* ==========================================================================
   Contact & Footer
   ========================================================================== */

.contact {
  margin-top: clamp(90px, 14vw, 190px);
  padding-top: clamp(75px, 10vw, 145px);
  padding-bottom: clamp(50px, 8vw, 110px);
  background: var(--lime);
  max-width: none;
}

.contact > * {
  max-width: 1288px;
  margin-left: auto;
  margin-right: auto;
}

.contact h2 {
  margin-top: 26px;
  font-size: clamp(66px, 10.6vw, 158px);
}

.contact-links {
  display: flex;
  gap: 12px;
  margin-top: clamp(52px, 8vw, 100px);
}

.contact-links a {
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 700;
}

.contact-links a:hover {
  background: var(--paper);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  padding: 18px clamp(24px, 5vw, 76px);
  background: var(--ink);
  color: #adb0a9;
  font: 400 10px "DM Mono", monospace;
  text-transform: uppercase;
}

/* ==========================================================================
   Responsive — Mobile (max-width: 760px)
   ========================================================================== */

@media (max-width: 760px) {
  /* Header & Navigation */
  .site-header {
    min-height: 70px;
  }

  .nav-toggle {
    display: block;
    position: relative;
    z-index: 3;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    padding: 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    z-index: 2;
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-contact {
    margin-top: 5px;
  }

  /* Hero: stack into a single column — headline, then copy/CTA, then the
     avatar last. grid-area resets to auto on every item so the stacking
     order comes from plain DOM order, not from the desktop area names.
     No absolute positioning, no transforms, no particles or rings — just
     the avatar with a static CSS glow (box-shadow, not a layered scene). */
  .hero {
    min-height: calc(100vh - 70px);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    row-gap: clamp(32px, 8vw, 48px);
  }

  .hero-grid h1,
  .hero-bottom,
  .hero-image {
    grid-area: auto;
  }

  .hero-image {
    position: static;
    width: auto;
    aspect-ratio: auto;
    display: flex;
    justify-content: center;
  }

  .hero-image img {
    width: clamp(120px, 20vw, 140px);
    height: clamp(120px, 20vw, 140px);
    box-shadow: 0 0 36px 6px rgba(200, 255, 39, .28);
  }

  .hero-avatar-glow,
  .hero-avatar-ring,
  .hero-avatar-particles {
    display: none;
  }

  .hero-actions {
    width: 100%;
    justify-content: space-between;
  }

  .resume-download {
    flex: 1;
    max-width: 290px;
  }

  .round-link {
    flex: none;
    width: 48px;
    height: 48px;
  }

  /* Proof Strip */
  .proof-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .proof-strip div {
    padding: 24px;
  }

  .proof-strip div:nth-child(2) {
    border-right: 0;
  }

  .proof-strip div:nth-child(n+3) {
    border-top: 1px solid rgba(244, 242, 236, .24);
  }

  /* Section Shared Utilities */
  .section-intro,
  .split-section,
  .now-section,
  .field-gallery {
    grid-template-columns: 1fr;
  }

  .section-intro {
    gap: 21px;
    margin-bottom: 45px;
  }

  .section-intro > p:last-child {
    max-width: 370px;
  }

  /* Field Gallery */
  .field-gallery {
    gap: 35px;
  }

  .gallery-grid {
    gap: 8px;
  }

  /* Case Studies */
  .case-study-list {
    grid-template-columns: 1fr;
  }

  .case-study {
    min-height: 460px;
  }

  /* Approach / Events / Now — shared single-column grid */
  .approach-grid,
  .events-list,
  .now-list {
    grid-template-columns: 1fr;
  }

  .approach-grid article,
  .approach-grid article+article {
    min-height: auto;
    padding: 25px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .approach-grid h3 {
    margin-top: 28px;
  }

  /* Split Sections (Writing / Tools) */
  .split-heading .text-link {
    margin-top: 20px;
  }

  /* Events */
  .events-section {
    padding-left: 0;
    padding-right: 0;
  }

  .events-section .section-intro {
    padding-left: 24px;
    padding-right: 24px;
  }

  .events-list {
    margin: 0 24px;
  }

  .event-item,
  .event-item+.event-item {
    min-height: 220px;
    padding: 24px 0;
    border-left: 0;
    border-bottom: 1px solid rgba(244, 242, 236, .32);
  }

  .event-type {
    margin-top: 25px;
  }

  /* Quote / Testimonials */
  .quote-section blockquote {
    font-size: 35px;
  }

  /* Now (Building) */
  .now-section {
    gap: 35px;
  }

  .now-list {
    gap: 1px;
  }

  .now-card {
    min-height: 190px;
  }

  /* Contact & Footer */
  .contact-links {
    flex-wrap: wrap;
  }

  .site-footer {
    gap: 18px;
    flex-direction: column;
  }
}