/* ==========================================================================
   layout.css — nav, hero, section shells, footer
   ========================================================================== */

/* ==========================================================================
   nav — floating glass capsule
   The bar is fixed and transparent at rest so the dark hero runs edge to edge
   under it. Blur is switched on only once content is actually behind the
   capsule: backdrop-filter is the most expensive paint on the page, and there
   is nothing to blur at scroll 0. .nav--dark is toggled by app.js while the
   hero is on screen, which flips the whole lockup to the light-on-dark set.
   ========================================================================== */

.nav {
  /* sticky, not fixed. A fixed ancestor puts the capsule on its own
     composited layer with an empty backdrop, so backdrop-filter has nothing
     to sample and the glass silently degrades to a flat tint. Sticky keeps
     the capsule in the page's backdrop root; the hero is pulled up under it
     with a negative margin to get the same edge-to-edge result. */
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: calc(var(--nav-inset) + env(safe-area-inset-top, 0px));
  padding-inline: var(--gutter);
  /* the shell spans the viewport but must not eat clicks either side of the
     capsule, or the top of the hero stops being selectable */
  pointer-events: none;
}

.nav__inner {
  pointer-events: auto;
  max-width: var(--wrap);
  margin-inline: auto;
  height: var(--nav-cap);
  padding: 0 8px 0 16px;
  border-radius: var(--pill);
  background: transparent;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: max-width .5s var(--ease), height .4s var(--ease),
              background .4s var(--ease), border-color .4s var(--ease),
              box-shadow .4s var(--ease);
}

/* condensed + glass. contain:paint keeps the blur from sampling more of the
   page than the capsule actually covers */
.nav.scrolled .nav__inner {
  max-width: calc(var(--wrap) - 90px);
  height: 48px;
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: var(--glass-rim),
              0 10px 30px -14px rgba(0, 0, 0, .3),
              0 2px 8px -4px rgba(0, 0, 0, .12);
}

.nav--dark.scrolled .nav__inner {
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur-d);
  backdrop-filter: var(--glass-blur-d);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: var(--glass-rim-d),
              0 12px 34px -16px rgba(0, 0, 0, .66);
}

/* no backdrop-filter (older Firefox): fall back to near-opaque, never to a
   transparent bar with unreadable text over the hero photo */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.scrolled .nav__inner { background: rgba(251, 251, 253, .97); }
  .nav--dark.scrolled .nav__inner { background: rgba(20, 20, 26, .95); }
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .4s var(--ease);
}
.brand > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand__mark {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  flex: none;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.brand__mark .ico { width: 14px; height: 14px; }

.nav--dark .brand { color: var(--on-dark); }
.nav--dark .brand__mark { background: var(--on-dark); color: var(--dark); }

/* ---- links + travelling active pill ---- */

.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 30px;
  margin-top: -15px;
  border-radius: var(--pill);
  background: rgba(0, 0, 0, .06);
  opacity: 0;
  z-index: 0;
  transition: transform .42s cubic-bezier(.34, 1.28, .5, 1),
              width .42s cubic-bezier(.34, 1.28, .5, 1),
              opacity .3s var(--ease), background .4s var(--ease);
}
.nav--dark .nav__pill { background: rgba(255, 255, 255, .14); }

.nav__link {
  position: relative;
  z-index: 1;
  /* 12px was below the readable floor for a control people aim at */
  font-size: 13px;
  line-height: 1;
  padding: 9px 12px;
  color: var(--ink);
  opacity: .72;
  transition: opacity .2s var(--ease), color .4s var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link[aria-current="true"] { opacity: 1; font-weight: 500; }
.nav--dark .nav__link { color: var(--on-dark); }

.nav__right { display: flex; align-items: center; gap: 8px; flex: none; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--ink);
  padding: 9px 16px;
  border-radius: var(--pill);
  white-space: nowrap;
  transition: opacity .2s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.nav__cta:hover { opacity: .82; }
.nav__cta .ico { width: 13px; height: 13px; }
.nav--dark .nav__cta { background: var(--on-dark); color: var(--dark); }

/* burger — a real circular target rather than three floating bars */
.burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, .5);
  position: relative;
  flex: none;
  transition: background .3s var(--ease), border-color .4s var(--ease);
}
.nav--dark .burger { border-color: var(--hair-d2); background: rgba(255, 255, 255, .08); }
.burger span {
  position: absolute;
  left: 12px;
  width: 16px; height: 1.6px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .34s var(--ease), opacity .2s var(--ease), background .4s var(--ease);
}
.nav--dark .burger span { background: var(--on-dark); }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 19.5px; }
.burger span:nth-child(3) { top: 24px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* ==========================================================================
   mobile menu — a sheet that scales out of the capsule's own corner
   ========================================================================== */

.mobnav {
  position: fixed;
  top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 6px);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 55;
  max-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top, 0px) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* a wider radius than a card would take — the corner is part of the
     material, and a tight radius makes glass read as a plain sheet */
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: var(--glass-light-thick);
  -webkit-backdrop-filter: var(--glass-blur-thick);
  backdrop-filter: var(--glass-blur-thick);
  box-shadow: var(--glass-rim),
              0 32px 70px -22px rgba(0, 0, 0, .5),
              0 4px 14px -6px rgba(0, 0, 0, .18);
  padding: 18px 20px 20px;
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  transition: opacity .3s var(--ease), transform .38s cubic-bezier(.34, 1.2, .5, 1);
}
.mobnav.open { opacity: 1; transform: none; }

/* the specular sweep. One soft diagonal band catching the top-left corner —
   this is the thing that reads as a curved surface rather than a flat pane.
   It sits under the content, so it can never wash out a label. */
.mobnav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, .55) 0%,
      rgba(255, 255, 255, .16) 18%,
      rgba(255, 255, 255, 0) 42%),
    radial-gradient(120% 60% at 50% 100%, rgba(255, 255, 255, .22), transparent 70%);
}
.mobnav > * { position: relative; z-index: 1; }

/* over the hero the material takes the dark tint, the way an Apple sheet
   adapts to what it is sitting on rather than forcing one fixed colour */
.nav--dark ~ .mobnav {
  background: var(--glass-dark-thick);
  -webkit-backdrop-filter: var(--glass-blur-thick-d);
  backdrop-filter: var(--glass-blur-thick-d);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: var(--glass-rim-d),
              0 32px 70px -22px rgba(0, 0, 0, .7);
}
.nav--dark ~ .mobnav::before {
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, .18) 0%,
      rgba(255, 255, 255, .05) 20%,
      rgba(255, 255, 255, 0) 44%),
    radial-gradient(120% 60% at 50% 100%, rgba(255, 255, 255, .07), transparent 70%);
}
.nav--dark ~ .mobnav .mobnav__link { color: var(--on-dark); border-bottom-color: rgba(255, 255, 255, .14); }
.nav--dark ~ .mobnav .mobnav__link span,
.nav--dark ~ .mobnav .mobnav__label { color: var(--on-dark-2); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobnav { background: rgba(251, 251, 253, .99); }
  .nav--dark ~ .mobnav { background: rgba(22, 22, 28, .97); }
}

.mobnav__label { margin-bottom: 10px; }

.mobnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.018em;
  color: var(--ink);
}
.mobnav__link:last-of-type { border-bottom: 0; }
.mobnav__link span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

.mobnav__foot {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ==========================================================================
   hero — dark panel, centred, product-intro proportions
   ========================================================================== */

.hero {
  /* slides up under the floating header */
  margin-top: calc((var(--nav-h) + env(safe-area-inset-top, 0px)) * -1);
  background: var(--dark);
  color: var(--on-dark);
  padding-block: 0;
  min-height: clamp(640px, 86vh, 880px);
  display: flex;
  align-items: center;
  text-align: left;
  overflow: hidden;
  position: relative;
}

/* static, so the photo below positions against .hero and can bleed to the
   viewport edge rather than being trapped inside the centred wrap */
.hero__inner {
  position: static;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 96px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  align-items: center;
  column-gap: 40px;
}

.hero__copy {
  grid-column: 1;
  max-width: 660px;
  position: relative;
  z-index: 2;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--on-dark-2);
  letter-spacing: -.008em;
  margin-bottom: 18px;
}
.hero__badge i { font-style: normal; opacity: .5; }

.hero__title {
  color: #fff;
  margin-bottom: 20px;
  /* held below the global .h-display ceiling so the headline sets on three
     lines beside the photo instead of five */
  font-size: clamp(38px, 5.1vw, 62px);
}

.hero__sub {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.42;
  letter-spacing: -.014em;
  color: var(--on-dark-2);
  max-width: 540px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

.hero__cv { color: var(--blue-dark); }

/* full-bleed subject filling the right half, top to bottom */
.hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(440px, 54%, 940px);
  max-width: none;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__photo img,
.hero__photo picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

/* the scene fades into the panel on its left edge so the copy stays legible
   over it at every width, instead of hitting a hard photo boundary */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              var(--dark) 0%,
              rgba(16, 16, 20, .82) 9%,
              rgba(16, 16, 20, .30) 24%,
              rgba(16, 16, 20, 0) 40%);
}

/* core stack strip */
.tech {
  grid-column: 1;
  position: relative;
  z-index: 2;
  width: 100%;
  /* no rule on desktop: the strip sits directly under the hero CTAs there, so
     the border reads as a divider belonging to the buttons rather than as the
     start of the tech row. It comes back on the stacked layout, where the
     strip is centred and genuinely needs separating. */
  border-top: 0;
  /* bottom padding clears the overlapping stats card (-68px) plus breathing
     room, so the icons are never covered */
  padding-block: 26px 116px;
  margin-top: 8px;
}
.tech__label {
  text-align: left;
  font-size: 12px;
  color: var(--on-dark-2);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}
.tech__row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}
.tech__item {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07);
  display: grid;
  place-items: center;
  color: var(--on-dark);
  transition: background .28s var(--ease), transform .28s var(--ease);
  position: relative;
}
.tech__item svg { width: 22px; height: 22px; }
.tech__item:hover, .tech__item:focus-visible {
  background: rgba(255, 255, 255, .13);
  transform: translateY(-3px);
}
.tech__item::after {
  content: attr(data-name);
  position: absolute;
  bottom: -28px;
  font-size: 11px;
  color: var(--on-dark-2);
  opacity: 0;
  transition: opacity .22s var(--ease);
  pointer-events: none;
  white-space: nowrap;
}
.tech__item:hover::after, .tech__item:focus-visible::after { opacity: 1; }

/* ==========================================================================
   stats rail — hairline strip, not cards
   ========================================================================== */

.stats {
  background: transparent;
  border-bottom: 0;
  position: relative;
  z-index: 3;
  margin-top: -68px;
  padding-bottom: 20px;
}

.stats__card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 30px 20px;
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .45);
}

.stat {
  text-align: center;
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.stat:last-child { border-right: 0; }

.stat__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink-2);
  display: grid;
  place-items: center;
}
.stat__icon svg { width: 17px; height: 17px; }

.stat__text { display: block; }
.stat__value {
  display: block;
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.06;
  color: var(--ink);
}
.stat__value--text { font-size: clamp(20px, 2.4vw, 27px); }
.stat__label {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 6px;
  letter-spacing: -.006em;
}

/* ==========================================================================
   section panels — the alternating light / grey / dark rhythm
   ========================================================================== */

.svc-section { background: var(--paper-2); }
.work        { background: var(--paper); }
.approach    { background: var(--dark); color: var(--on-dark); }
.skills      { background: var(--paper); }
.exp         { background: var(--paper-2); }
.contact     { background: var(--dark); color: var(--on-dark); }

.approach .section-head {
  margin-inline: 0;
  text-align: left;
  max-width: 760px;
}

.approach .eyebrow,
.contact .eyebrow { color: var(--on-dark-2); }
.approach .h-section,
.contact .h-section { color: #fff; }
.approach .lede,
.contact .lede { color: var(--on-dark-2); }

/* ==========================================================================
   services
   ========================================================================== */

.svc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 52px;
}

.svc__note {
  margin-top: 44px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.svc__note-lead {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .01em;
  margin-bottom: 12px;
}

/* ==========================================================================
   work
   ========================================================================== */

.work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.work__more {
  display: contents;
}

/* ==========================================================================
   approach
   ========================================================================== */

.approach__context {
  max-width: 680px;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.approach__context p {
  font-size: clamp(17px, 1.8vw, 19px);
  line-height: 1.5;
  color: var(--on-dark-2);
  letter-spacing: -.012em;
}
.approach__context strong { color: #fff; font-weight: 600; }

.process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 4px;
  margin-top: 64px;
}

.process__step {
  padding: 0 22px;
  border-left: 1px solid var(--hair-d);
}
.process__step:first-child { border-left: 0; padding-left: 0; }

.process__num {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-dark);
  letter-spacing: .04em;
  margin-bottom: 16px;
}
.process__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .07);
  color: var(--on-dark);
  margin-bottom: 16px;
}
.process__icon svg { width: 19px; height: 19px; }
.process__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.016em;
  color: #fff;
  margin-bottom: 8px;
}
.process__desc {
  font-size: 14px;
  line-height: 1.46;
  color: var(--on-dark-2);
  letter-spacing: -.006em;
}

/* ==========================================================================
   skills
   ========================================================================== */

.skills__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 52px;
}

/* ==========================================================================
   experience
   ========================================================================== */

.timeline {
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tl-item { position: relative; }
.tl-item__dot { display: none; }

.edu__strip {
  margin-top: 20px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.edu__strip-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .01em;
  flex: none;
}
.edu__strip-label .ico { width: 16px; height: 16px; }
.edu__strip-items {
  display: flex;
  gap: 14px 40px;
  flex-wrap: wrap;
  align-items: center;
}
.edu__mini b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.012em;
  margin-bottom: 3px;
}
.edu__mini span {
  font-size: 13px;
  color: var(--ink-2);
}

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

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

/* status chip. The plain grey eyebrow read as a caption; a live dot is the
   one piece of the block that has to say "yes, right now". */
/* the CTA column has no .section-head wrapper, so the heading needs its own
   rhythm against the lede */
.contact__cta .h-section { margin-bottom: 18px; }

.contact__status {
  color: var(--on-dark-2);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 22px;
}

/* capabilities.
   These were white pills, which on a dark panel outweighed the actual CTA and
   wrapped into a ragged second row. As a quiet two-column list they read as
   substance instead of competing with the button. */
.cta-caps {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--hair-d);
}
.cta-caps__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: 16px;
}
.cta-caps__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
}
.cta-caps__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  letter-spacing: -.008em;
  color: var(--on-dark);
}
.cta-caps__list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue-dark);
  flex: none;
}

.contact__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.contact__links {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.footer {
  background: var(--paper-2);
  border-top: 1px solid var(--hair);
  padding-block: 48px 36px;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--hair);
}

.footer__brand { max-width: 420px; }
.footer__brand .brand { margin-bottom: 12px; }
.footer__role {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

.footer__socials { display: flex; gap: 8px; margin-top: 16px; }
.footer__social {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.footer__social:hover { color: var(--ink); border-color: var(--hair-2); }
.footer__social svg { width: 16px; height: 16px; }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-content: flex-start;
  max-width: 460px;
}
.footer__nav a {
  font-size: 12px;
  color: var(--ink-2);
  transition: color .2s var(--ease);
}
.footer__nav a:hover { color: var(--ink); text-decoration: underline; }

.footer__bottom {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__bottom p { font-size: 12px; color: var(--ink-3); }
.footer__up {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--blue);
}
.footer__up:hover { text-decoration: underline; }
.footer__up .ico { width: 13px; height: 13px; }

/* ==========================================================================
   fixes + accent modifiers
   ========================================================================== */

/* superseded by the global [hidden] guard in base.css */

/* stat accents — the icon tile carries the colour, the number stays ink */
/* one accent for all four — matches the blue used for links, CTAs and the
   headline gradient elsewhere on the page, instead of a different colour
   per stat */
.stat--violet .stat__icon,
.stat--blue   .stat__icon,
.stat--emerald .stat__icon,
.stat--amber  .stat__icon { background: rgba(0, 113, 227, .10); color: var(--blue); }

/* the current role reads slightly heavier than past roles */
.tl-item--now .tl-item__card { border-color: var(--hair-2); }

.contact__cta { min-width: 0; }