/* Archivo, self-hosted. Google Fonts would hand every visitor's IP address to
   a third party on page load; serving the two Latin subsets ourselves removes
   the site's only outbound request. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.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;
}

/* ==========================================================================
   Niccolo Sapio: site.css
   One typeface (Archivo variable), three widths, each encoding a kind of
   information: EXPANDED = display, NORMAL = prose, CONDENSED = data.
   Palette derived from the vintage reference: peach, ochre, sage, bark, straw.
   ========================================================================== */

:root {
  /* --- palette ---------------------------------------------------------- */
  --peach:  #E8B38C;
  --ochre:  #BB8644;
  --sage:   #909E84;
  --bark:   #75654C;
  --straw:  #E3D477;
  --sand:   #C7B9A0;   /* derived: bark, lightened: 5th sector tone */

  --paper:  #FBF8F2;   /* derived: warm page field */
  --paper-2:#F4EEE3;   /* derived: recessed band */
  --ink:    #2E2721;   /* derived: headings + all text on colour */
  --deep:   #3F362A;   /* derived: hero + footer field */

  --rule:   rgba(46, 39, 33, .14);
  --rule-lt:rgba(232, 179, 140, .22);

  /* --- type ------------------------------------------------------------- */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- metrics ----------------------------------------------------------- */
  /* motion: raise a number to make the effect louder */
  --ticker-duration: 90s;
  --grain-opacity: .035;

  --wrap: 1160px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --header-h: 68px;
}

/* --- width axis as a semantic device ------------------------------------ */
.display { font-family: var(--sans); font-variation-settings: "wdth" 118, "wght" 600; letter-spacing: -.02em; line-height: 1.02; }
.data    { font-family: var(--sans); font-variation-settings: "wdth" 74,  "wght" 600;
           text-transform: uppercase; letter-spacing: .14em; font-size: .6875rem; }

/* ==========================================================================
   base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

/* ==========================================================================
   header
   ========================================================================== */

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.hdr--stuck {
  background: rgba(251, 248, 242, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--rule);
}

.mark {
  font-variation-settings: "wdth" 112, "wght" 700;
  font-size: 1.0625rem; letter-spacing: -.015em;
  text-decoration: none; white-space: nowrap;
}
.mark span { color: var(--ochre); }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  position: relative;
  text-decoration: none;
  font-size: .875rem;
  font-variation-settings: "wdth" 100, "wght" 500;
  padding: .35rem 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 1.5px; width: 0; background: var(--ochre);
  transition: width .3s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--ochre); }

.burger {
  display: none; background: none; border: 0; padding: .5rem; cursor: pointer;
  color: inherit; line-height: 0;
}

/* header sitting on the dark hero */
.hdr--onDark:not(.hdr--stuck) { color: var(--peach); }
.hdr--onDark:not(.hdr--stuck) .mark span { color: var(--straw); }
.hdr--onDark:not(.hdr--stuck) .nav a::after { background: var(--straw); }

/* ==========================================================================
   hero: a drafting sheet. Paper ground, hairline frame, and an ink pixel
   field that reacts to the cursor.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 4rem) 0 7rem;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

/* the pixel field, drawn by motion.js */
#hero-field {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}

/* a warm wash that eases toward the pointer. Static without scripting. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(40vmax circle at var(--lx, 62%) var(--ly, 78%),
              rgba(187, 134, 68, .07), transparent 62%);
  pointer-events: none;
}

/* the drafting frame: hairline rule, corner crosses, and a rail of + marks
   straddling the top and bottom edges */
.hero__frame {
  position: absolute; inset: 22px; z-index: 2;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.hero__frame::before,
.hero__frame::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116' height='9'%3E%3Cpath d='M58.5 0v9M54 4.5h9' stroke='%2375654C' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 116px 9px;
  background-position: center;
}
.hero__frame::before { top: -4.5px }
.hero__frame::after  { bottom: -4.5px }

.xh { position: absolute; width: 13px; height: 13px; }
.xh::before, .xh::after { content: ""; position: absolute; background: var(--bark); opacity: .65 }
.xh::before { left: 6px; top: 0; width: 1px; height: 13px }
.xh::after  { top: 6px; left: 0; height: 1px; width: 13px }
.xh--tl { top: -7px;    left: -7px }
.xh--tr { top: -7px;    right: -7px }
.xh--bl { bottom: -7px; left: -7px }
.xh--br { bottom: -7px; right: -7px }

/* film grain, the layer that ties the page back to the faded album sleeve */
.hero__grain {
  position: absolute; inset: -50%; z-index: 3;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  animation: grain 8s steps(1, end) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0) }
  20%      { transform: translate(-2%, 1%) }
  40%      { transform: translate(1%, -2%) }
  60%      { transform: translate(-1%, -1%) }
  80%      { transform: translate(2%, 1%) }
}

.hero__in { position: relative; z-index: 4; }

.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .4rem .9rem;
  background: rgba(251, 248, 242, .7);
  color: var(--bark);
}
.tag svg { width: 11px; height: 11px; flex: 0 0 auto; }

.hero h1 {
  margin: 0;
  font-size: clamp(2.75rem, 8.2vw, 6.75rem);
  max-width: 15ch;
  color: var(--ink);
}
.hero h1 em {
  font-style: normal;
  color: var(--ochre);
}

.scroll {
  position: absolute; left: 0; right: 0; bottom: 2.6rem; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: var(--bark);
  text-decoration: none;
}
.scroll::after {
  content: ""; width: 1px; height: 28px;
  background: linear-gradient(var(--bark), transparent);
  animation: drop 2.2s ease-in-out infinite;
}
@keyframes drop { 0%,100% { transform: translateY(0); opacity: .35 } 50% { transform: translateY(6px); opacity: 1 } }

/* --- kinetic type: the width axis, animated -----------------------------
   The H1 ships as plain text and fades in with .rise. When motion.js splits it
   into letters it adds .kt, which cancels that fade and hands the entrance to
   the letters themselves. */
.kt { opacity: 1 !important; transform: none !important; animation: none !important; }
.kt-w { display: inline-block; }
.kt-l {
  display: inline-block;
  opacity: 0;
  animation: kt-in .9s cubic-bezier(.22, 1, .36, 1) forwards;
  will-change: font-variation-settings, opacity, transform;
}
@keyframes kt-in {
  from { opacity: 0; transform: translateY(.1em); font-variation-settings: "wdth" 62,  "wght" 600 }
  to   { opacity: 1; transform: none;             font-variation-settings: "wdth" 118, "wght" 600 }
}
.kt-ready .kt-l {
  opacity: 1; transform: none; animation: none;
  font-variation-settings: "wdth" 118, "wght" 600;
  will-change: font-variation-settings;
}
.kt-still .kt-l { opacity: 1; animation: none; }

/* --- load sequence ------------------------------------------------------ */
.rise { opacity: 0; transform: translateY(14px); animation: rise .85s cubic-bezier(.22,1,.36,1) forwards; }
.rise--1 { animation-delay: .05s } .rise--2 { animation-delay: .18s }
.rise--3 { animation-delay: .32s } .rise--4 { animation-delay: .5s }
@keyframes rise { to { opacity: 1; transform: none } }

/* ==========================================================================
   portfolio ticker
   Pure CSS over static markup: it runs with scripting disabled, and search
   engines see all sixteen names.
   ========================================================================== */

.ticker {
  position: relative;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding: 1.35rem 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track {
  display: flex; width: max-content;
  animation: ticker var(--ticker-duration) linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__half { display: flex; }
@keyframes ticker { to { transform: translate3d(-50%, 0, 0) } }

.tick {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: 0 1.7rem;
  text-decoration: none; white-space: nowrap;
  opacity: .72; transition: opacity .3s ease;
}
.tick:hover { opacity: 1; }
.tick__logo {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--rule); border-radius: 5px;
  overflow: hidden;
}
.tick__logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.tick__txt { color: var(--ink); display: inline-flex; align-items: center; gap: .6rem; }
.tick__txt i { font-style: normal; color: var(--bark); }
.tick__txt i::before { content: "/"; margin-right: .6rem; opacity: .4 }

/* ==========================================================================
   shared section furniture
   ========================================================================== */

.sec { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.sec--tint { background: var(--paper-2); }

.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  color: var(--bark); margin-bottom: 1.5rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 90px; }

.h2 { margin: 0 0 1.25rem; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.lede { margin: 0; color: var(--bark); font-size: 1.125rem; max-width: 56ch; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   about
   ========================================================================== */

.about__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
.about__copy p { margin: 0 0 1.25rem; font-size: 1.125rem; max-width: 52ch; }
.about__copy p:last-child { margin-bottom: 0; }

.portrait { position: relative; margin: 0; }
.portrait img {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: 50% 50%;
  border-radius: 3px;
  filter: saturate(.88) contrast(1.04);
}
/* one offset block behind the photo: the sleeve's second colour, nothing more */
.portrait::before {
  content: ""; position: absolute; z-index: -1; border-radius: 3px;
  background: var(--sage);
  inset: -1.4rem 56% 56% -1.4rem;
}

.portrait__cap {
  margin-top: 1rem; color: var(--bark);
}

/* ==========================================================================
   paths: the three cards
   ========================================================================== */

.paths { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 3rem; }

.path {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2rem 1.75rem 1.5rem;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.path:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(46,39,33,.10); border-color: var(--ochre); }
.path__no { color: var(--ochre); margin-bottom: 1.5rem; }
.path h3 { margin: 0 0 .6rem; font-size: 1.3rem; font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: -.015em; }
.path p { margin: 0 0 1.75rem; color: var(--bark); font-size: .9875rem; }
.path__go { margin-top: auto; color: var(--ochre); display: inline-flex; align-items: center; gap: .5rem; }
.path__go::after { content: "→"; transition: transform .3s ease; }
.path:hover .path__go::after { transform: translateX(4px); }

/* ==========================================================================
   contact
   ========================================================================== */

.contact { background: var(--deep); color: var(--peach); text-align: center; }
.contact .h2 { color: var(--straw); }
.contact .lede { color: rgba(232,179,140,.82); margin-inline: auto; }
.contact .eyebrow { color: rgba(232,179,140,.7); justify-content: center; }
.contact .eyebrow::after { background: var(--rule-lt); }

.btn {
  display: inline-block; margin-top: 2.25rem;
  background: var(--peach); color: var(--ink);
  text-decoration: none;
  padding: .95rem 2.1rem; border-radius: 999px;
  font-variation-settings: "wdth" 100, "wght" 600;
  transition: background-color .3s ease, transform .3s ease;
}
.btn:hover { background: var(--straw); transform: translateY(-2px); }

/* ==========================================================================
   footer
   ========================================================================== */

.ftr { background: var(--deep); color: rgba(232,179,140,.72); padding: 4.5rem 0 2rem; }
.ftr__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.ftr .mark { color: var(--peach); display: inline-block; margin-bottom: .85rem; }
.ftr .mark span { color: var(--straw); }
.ftr h4 { margin: 0 0 1rem; color: var(--straw); font-size: .8125rem; font-variation-settings: "wdth" 74, "wght" 600; text-transform: uppercase; letter-spacing: .14em; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ftr a { text-decoration: none; transition: color .25s ease; }
.ftr a:hover { color: var(--straw); }
.ftr__tag { margin: 0; max-width: 30ch; font-size: .9375rem; }
.ftr__base {
  margin-top: 3.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule-lt);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  color: rgba(232,179,140,.55);
}
.ftr__base p { margin: 0; }

/* ==========================================================================
   page header band (portfolio / stubs)
   ========================================================================== */

.pagehead {
  padding: calc(var(--header-h) + clamp(4rem, 8vw, 6.5rem)) 0 clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border-bottom: 1px solid var(--rule);
}
.pagehead h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.25rem); }
.pagehead h1 + .lede { margin-top: 1rem; }
.pagehead .lede { font-size: 1.1875rem; }


/* ==========================================================================
   portfolio
   ========================================================================== */

.filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: 1.75rem 0 0;
}
.filter {
  font-family: var(--sans);
  font-variation-settings: "wdth" 74, "wght" 600;
  text-transform: uppercase; letter-spacing: .12em; font-size: .6875rem;
  background: transparent; color: var(--bark);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .55rem 1rem; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.filter:hover { border-color: var(--ochre); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter i { font-style: normal; opacity: .55; margin-left: .4em; }

.grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(4.5rem, 9vw, 7rem);
}

.card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.5rem;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(46,39,33,.11); border-color: var(--ochre); }
.card.is-out { display: none; }

.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }

/* the company's own logo, on a neutral tile so sixteen brands sit together */
.chip {
  flex: 0 0 auto;
  width: 60px; height: 60px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.chip img { width: 100%; height: 100%; object-fit: contain; padding: 9px; }

.card__meta { text-align: right; color: var(--bark); display: grid; gap: .3rem; padding-top: .3rem; }
.card__meta span { display: block; }
.card__meta .stage { color: var(--ink); }

.card h2 {
  margin: 0 0 .65rem;
  font-size: 1.375rem;
  font-variation-settings: "wdth" 112, "wght" 600;
  letter-spacing: -.02em; line-height: 1.15;
}
.card:hover h2 { color: var(--ochre); }
.card p { margin: 0 0 1.5rem; color: var(--bark); font-size: .9375rem; line-height: 1.6; }

.card__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.card__tags span {
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .3rem .7rem; color: var(--bark);
  font-variation-settings: "wdth" 74, "wght" 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .625rem;
}
/* the primary sector carries the colour, so the grid still reads as an index */
.card__tags .tag--fintech,
.card__tags .tag--insurtech,
.card__tags .tag--ai,
.card__tags .tag--hrtech,
.card__tags .tag--adtech { color: var(--ink); border-color: transparent; }
.card__tags .tag--fintech   { background: var(--ochre); }
.card__tags .tag--insurtech { background: var(--sage); }
.card__tags .tag--ai        { background: var(--peach); }
.card__tags .tag--hrtech    { background: var(--straw); }
.card__tags .tag--adtech    { background: var(--sand); }

.pf-status { margin: 1.35rem 0 0; min-height: 1em; color: var(--bark); }

/* ==========================================================================
   stub page
   ========================================================================== */

.stub { padding: clamp(3rem, 7vw, 5rem) 0 clamp(5rem, 10vw, 8rem); }
.stub__box {
  border: 1px solid var(--rule); border-left: 3px solid var(--ochre);
  border-radius: 4px; background: #fff;
  padding: clamp(2rem, 5vw, 3rem);
  max-width: 62ch;
}
.stub__box p { margin: 0 0 1.25rem; color: var(--bark); }
.stub__box p:last-child { margin-bottom: 0; }

/* ==========================================================================
   career: sticky globe beside a scrolling timeline
   ========================================================================== */

.cv { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(5rem, 10vw, 8rem); }
.cv__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: start; }

.cv__globe {
  position: sticky; top: 0; z-index: 20;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
.cv__stage { position: relative; width: min(100%, 62svh); aspect-ratio: 1 / 1; margin-inline: auto; }
#globe { position: absolute; inset: 0; width: 100%; height: 100%; }

.cv__place {
  margin: .35rem 0 0; text-align: center; color: var(--ink);
  font-variation-settings: "wdth" 88, "wght" 700; letter-spacing: .1em;
}

.rail { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem; margin-top: 1rem; }
.rail a {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .4rem .5rem; text-decoration: none; color: var(--bark);
  font-variation-settings: "wdth" 74, "wght" 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: .5625rem;
  opacity: .55; transition: opacity .25s ease;
}
.rail a i { width: 5px; height: 5px; background: var(--bark); border-radius: 1px; }
.rail a:hover { opacity: 1; }

/* --- the timeline ------------------------------------------------------- */

.chapter {
  display: flex; align-items: center; gap: .8rem;
  margin: 2.5rem 0 1.25rem; color: var(--ochre);
}
.chapter::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.cv__steps > .chapter:first-child { margin-top: 0; }

.step {
  position: relative;
  padding: 1.6rem 0 1.6rem 1.75rem;
  border-left: 1px solid var(--rule);
  opacity: .5;
  transition: opacity .45s ease, border-color .45s ease;
}
.step.is-active { opacity: 1; border-left-color: var(--ochre); }
.step::before {
  content: ""; position: absolute; left: -4.5px; top: 2.05rem;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--paper); border: 1px solid var(--rule);
  transition: background-color .45s ease, border-color .45s ease;
}
.step.is-active::before { background: var(--ochre); border-color: var(--ochre); }

.step__meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0 0 .9rem; color: var(--bark); }
.step__meta b { color: var(--ink); font-variation-settings: "wdth" 74, "wght" 700; }

.step__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.step__logo {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 5px;
  display: grid; place-items: center; overflow: hidden;
  background: #fff; border: 1px solid var(--rule);
}
.step__logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.step h2 {
  margin: 0; font-size: 1.25rem;
  font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: -.015em;
}
.step__role { margin: .15rem 0 0; color: var(--bark); font-size: .9375rem; }
.step__body { margin: 0 0 .9rem; font-size: 1rem; max-width: 54ch; }
.step__body:last-child { margin-bottom: 0; }

.stats {
  list-style: none; margin: 1.35rem 0 0; padding: 0;
  display: grid; gap: 1.1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.stat { display: flex; flex-direction: column; gap: .1rem; }
.stat b {
  font-size: 1.5rem; color: var(--ochre);
  font-variation-settings: "wdth" 112, "wght" 700; letter-spacing: -.02em;
}
.stat span { color: var(--bark); }

.step__clients { margin-top: 1.4rem; }
.step__clients > p { margin: 0 0 .6rem; color: var(--bark); }
.clients { display: flex; flex-wrap: wrap; gap: .5rem; }
.client {
  width: 84px; height: 40px; border-radius: 4px;
  display: block; padding: 6px; overflow: hidden;
  background: #fff; border: 1px solid var(--rule);
  opacity: .85;
  transition: opacity .3s ease, border-color .3s ease;
}
/* a definite content box, so the image has a real 100% to resolve against;
   centring the item instead leaves the height indefinite and it overflows */
.client img { display: block; width: 100%; height: 100%; object-fit: contain; }
.client:hover { opacity: 1; border-color: var(--ochre); }

/* ==========================================================================
   contact dialog
   The site publishes no email address; this posts to a form handler instead.
   ========================================================================== */

.cbox {
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 0; width: min(92vw, 520px);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 70px -20px rgba(46, 39, 33, .35);
}
.cbox::backdrop { background: rgba(46, 39, 33, .5); }
.cbox__in { padding: clamp(1.5rem, 4vw, 2.25rem); }
.cbox__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cbox h2 {
  margin: 0 0 .4rem; font-size: 1.5rem;
  font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: -.02em;
}
.cbox__sub { margin: 0 0 1.5rem; color: var(--bark); font-size: .9375rem; max-width: 44ch; }

.cbox__x {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: var(--bark); padding: .25rem; line-height: 0; border-radius: 3px;
}
.cbox__x:hover { color: var(--ink); }

.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; margin-bottom: .4rem; color: var(--bark); }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  font-variation-settings: "wdth" 100, "wght" 400;
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  padding: .7rem .85rem;
  transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--ochre); outline: none; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ochre); outline-offset: 1px; }
.field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

/* the honeypot: a real field, hidden from people and from screen readers */
.cbox__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cbox__foot { display: flex; align-items: center; gap: 1rem; margin-top: 1.35rem; flex-wrap: wrap; }
.cbox__send {
  font: inherit; cursor: pointer;
  font-variation-settings: "wdth" 100, "wght" 600;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 999px; padding: .8rem 2rem;
  transition: background-color .25s ease, opacity .25s ease;
}
.cbox__send:hover { background: var(--ochre); }
.cbox__send:disabled { opacity: .55; cursor: default; }
.cbox__status { margin: 0; color: var(--bark); }
.cbox__status.is-bad { color: #9B3A22; }

.cbox__done h2 { margin-bottom: .5rem; }
.cbox__done p { margin: 0 0 1.5rem; color: var(--bark); }

/* footer and inline links that open the dialog rather than an email client */
.linklike {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: none;
  font-variation-settings: inherit;
  transition: color .25s ease;
}
.ftr .linklike:hover { color: var(--straw); }
.stub__box .linklike { text-decoration: underline; }

/* ==========================================================================
   responsive
   ========================================================================== */

@media (max-width: 800px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gut) 1.25rem;
    color: var(--ink);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; padding: .85rem 0; font-size: 1.0625rem; border-bottom: 1px solid var(--rule); }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }
  .burger { display: block; }
  .hdr--onDark:not(.hdr--stuck) .nav a { color: var(--ink); }
}

@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* the globe becomes a band pinned under the header */
  .cv__globe {
    top: var(--header-h);
    height: auto; display: block;
    background: var(--paper);
    padding: .75rem 0 .5rem;
    box-shadow: 0 10px 14px -12px rgba(46, 39, 33, .35);
  }
  .cv__stage { aspect-ratio: auto; height: 190px; }
  .rail { display: none; }
}

@media (min-width: 901px) {
  .cv__grid { grid-template-columns: minmax(300px, .85fr) 1.15fr; }
  /* Runway above and below the timeline. Without it the sticky globe is still
     sliding into place while the first step is being read, and releases again
     under the last one. With it, the globe is motionless the whole way. */
  .cv__steps { padding-block: 38svh 45svh; }
}

@media (min-width: 801px) {
  .about__grid { grid-template-columns: 1.3fr .7fr; }
  .portrait { position: sticky; top: calc(var(--header-h) + 2rem); }
  .paths { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr; }
}

@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rise, .reveal { opacity: 1 !important; transform: none !important; }
  .kt-l { opacity: 1 !important; transform: none !important; }
  .hero__grain { animation: none; }
  /* the band stops moving and becomes an ordinary scrollable row */
  .ticker { overflow-x: auto; }
  .ticker__track { animation: none; width: auto; }
  .ticker__half[aria-hidden="true"] { display: none; }
  /* every step stays legible; nothing eases */
  .step { opacity: 1 !important; }
}

/* ==========================================================================
   print
   ========================================================================== */

@media print {
  .hdr, .scroll, .filters, .ticker, .hero__grain, #hero-field,
  .cv__globe { display: none; }
  .step { opacity: 1; }
  body { background: #fff; }
  .card, .path { break-inside: avoid; }
}