@font-face {
  font-family: "Beirut Display";
  src: url("../fonts/BeirutDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Beirut Display";
  src: url("../fonts/BeirutDisplay-SemiBold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Beirut Display";
  src: url("../fonts/BeirutDisplay-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Beirut Text";
  src: url("../fonts/BeirutText-Book.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Beirut Text Book";
  src: url("../fonts/BeirutText-Book.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("../fonts/SuisseIntl-Book.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("../fonts/SuisseIntl-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("../fonts/SuisseIntl-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --home-bg: #000;
  --home-heading: rgba(255, 255, 255, 0.9);
  --home-copy: rgba(255, 255, 255, 0.75);
  --home-muted: rgba(255, 255, 255, 0.65);
  --home-panel: rgba(255, 255, 255, 0.1);
  --home-border: rgba(255, 255, 255, 0.1);
  --home-control: rgba(255, 255, 255, 0.7);
  --home-accent: #00e935;
}
:root[data-theme="light"] {
  color-scheme: light;
  --home-bg: #fff;
  --home-heading: rgba(0, 0, 0, 0.9);
  --home-copy: rgba(0, 0, 0, 0.75);
  --home-muted: rgba(0, 0, 0, 0.65);
  --home-panel: rgba(0, 0, 0, 0.06);
  --home-border: rgba(0, 0, 0, 0.1);
  --home-control: rgba(0, 0, 0, 0.1);
  --home-accent: #00e935;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--home-bg);
  color: var(--home-copy);
  font-family: "Beirut Text", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
button {
  font: inherit;
  cursor: var(--click-cursor, pointer);
}
:focus-visible {
  outline: 2px solid var(--home-accent);
  outline-offset: 6px;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--home-accent);
  color: var(--home-bg);
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 12px;
  background: var(--home-bg);
}
.skip-link:focus {
  top: 16px;
}
.home {
  padding-top: 32px;
}
.home-column {
  width: min(100%, 720px);
  margin-inline: auto;
  border-inline: 1px solid var(--home-border);
  padding-inline: 28.8px;
}
.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-brand {
  width: 48px;
  color: var(--home-heading);
  font:
    700 48px/48px "Beirut Display",
    Georgia,
    serif;
  letter-spacing: -0.96px;
  text-align: center;
}
.home-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-control {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--home-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
}
.home-control:is(:hover, :focus-visible) { color: var(--home-accent); }
.home-view-label { display: none; }
.home-control .home-view-icon,
.home-control .home-theme-icon,
.home-control img { display: block; width: 48px; height: 48px; }
.home-control img { filter: invert(1); }
[data-theme="light"] .home-control img { filter: none; }
.home-main {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: 64px;
}
.home-intro {
  padding-top: 48px;
}
.home-headline {
  color: var(--home-heading);
  font:
    400 64px/1.05 "Beirut Display",
    Georgia,
    serif;
  margin: 0 0 72px;
  letter-spacing: -0.03125em;
}
.home-prose {
  font-size: 20px;
  line-height: 1.4;
}
.home-prose p {
  margin: 0 0 28px;
}
.home-prose p:last-child {
  margin-bottom: 0;
}
.home-intro-copy {
  max-width: 499.057px;
  text-wrap: pretty;
}
.home-founder {
  color: var(--home-heading);
  white-space: nowrap;
}
.home-founder:hover,
.home-founder:focus-visible {
  color: var(--home-accent);
  text-decoration: none;
}
.home-contact {
  font-size: 20px;
  line-height: 1.4;
  margin: 28px 0 0;
}
.home-section-title {
  color: var(--home-heading);
  font:
    400 32px/42px "Suisse Intl",
    Arial,
    sans-serif;
  letter-spacing: -0.868px;
  margin: 0;
}
.engagement-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 0;
  margin: 32px 0 0;
  list-style: none;
}
.engagement {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 42.06px;
  width: 100%;
  color: var(--home-heading);
  font-family: "Suisse Intl", Arial, sans-serif;
}
.engagement[href]::after {
  content: "";
  flex: 0 0 16px;
  height: 16px;
  margin-left: auto;
  margin-right: 2px;
  opacity: 0.35;
  background: currentColor;
  mask: url("../asset/home/external-mask.svg") center / 10.0672px 10.0669px no-repeat;
}
.engagement-tags {
  display: flex;
  gap: 3px;
}
.engagement-tags > span {
  border-radius: 999px;
  background: var(--home-panel);
  padding: 7.6px 10.254px;
  font-size: 15px;
  line-height: 15.3px;
  letter-spacing: 0.459px;
  text-transform: uppercase;
  white-space: nowrap;
}
.engagement-name {
  font-size: 42.4px;
  line-height: 42px;
  letter-spacing: -0.868px;
}
.engagement-year {
  font:
    400 11.3px/11.28px "Suisse Intl",
    Arial,
    sans-serif;
  opacity: 0.7;
  align-self: flex-start;
  padding-top: 2px;
  margin-left: 6px;
}
.home-services {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding-block: 115.2px;
}
.home-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.statement-mark {
  width: 92px;
  height: 92px;
}
.home-statement {
  margin: 0;
  max-width: 591.356px;
  text-wrap: balance;
  color: var(--home-heading);
  text-align: center;
  font:
    700 36px/1.2 "Beirut Display",
    Georgia,
    serif;
  letter-spacing: -0.868px;
}
.home-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
.home-service {
  background: var(--home-panel);
  border-radius: 24px;
  padding: 16px 12px 20px;
  min-height: 258px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.home-service-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-service-icon img,
.statement-mark img,
.home-glyph {
  display: block;
  width: 100%;
  height: 100%;
}
.home-service h3 {
  margin: 0 0 16px;
  color: var(--home-heading);
  font:
    700 20px/1.2 "Beirut Display",
    Georgia,
    serif;
  text-transform: none;
}
.home-service p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}
.home-team-copy {
  max-width: 533.791px;
  margin-top: 24px;
}
.home-team-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.home-team-panels > div {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--home-panel);
  color: var(--home-muted);
  transition: background-color 180ms ease, color 180ms ease;
}
.team-card-link {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: 230px;
  padding: 12px 12px 16px;
  color: inherit;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
}
.team-card-link:hover { text-decoration: none; }
.team-card-link:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; border-radius: inherit; }
.home-team-panels > div:focus-within { background: #00dd28; color: #000; }
@media (hover: hover) {
  .home-team-panels > div:hover { background: #00dd28; color: #000; }
}
/* Two real faces keep the values readable and keyboard-operable. */
.team-card { perspective: 1000px; }
.team-card-inner { border-radius: inherit; display: grid; min-height: 100%; transform-style: preserve-3d; transition: transform 550ms cubic-bezier(.2, .7, .2, 1); }
.team-card.is-flipped .team-card-inner { transform: rotateY(180deg); }
.team-card-face { border-radius: inherit; grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.team-card-back {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 14px 20px;
  min-height: 280px;
  color: #000;
  background: var(--home-accent);
  transform: rotateY(180deg);
}
.team-card-back > img { display: block; width: 48px; height: 48px; margin-bottom: auto; }
.team-card-back h3 { margin: 48px 0 16px; font: 400 20px/1.2 "Beirut Text", Georgia, serif; text-wrap: initial; }
.team-card-back p { margin: 0; font: 400 15px/1.4 "Suisse Intl", Arial, sans-serif; }
.team-card-return { position: absolute; inset: 0; width: 100%; border: 0; border-radius: inherit; background: transparent; }
.team-card-return:focus-visible { outline: 2px solid #000; outline-offset: -6px; }
.team-card.is-flipped { background: var(--home-accent); color: #000; }
.team-card .team-linkedin { z-index: 2; width: 32px; height: 32px; right: 6px; bottom: 10px; mask-size: 20px 20px; }
/* Reserve icon space on the labels, keeping the portrait area symmetric. */
.team-card-front > span:not(.team-avatar) { padding-right: 26px; }
@media (max-width: 480px) and (min-width: 381px) {
  .team-card-back { padding: 12px 9px 16px; }
  .team-card-back h3 { font-size: 17px; margin-top: 24px; }
  .team-card-back p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .team-card-inner { transition: none; } }
.team-avatar {
  position: relative;
  width: 100%;
  height: 170px;
  margin-bottom: 2px;
  pointer-events: none;
}
.team-avatar img,
.team-avatar canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.is-model-ready .team-avatar img { visibility: hidden; }
.home-team-role { font-size: 12px; }
.team-linkedin {
  position: absolute;
  right: 12px;
  bottom: 16px;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: url('../asset/team/linkedin.svg') center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .home-team-panels > div { transition: none; }
}
.home-footer {
  margin-top: 64px;
}
.home-footer-column {
  padding-bottom: 54px;
}
.home-footer-row {
  border-top: 1px solid var(--home-border);
  padding-top: 64px;
  display: grid;
  grid-template-columns: 122.48px 244.97px minmax(0, 1fr);
  gap: 24px;
  min-height: 169.59px;
}
.footer-mark {
  width: 104.59px;
  height: 104.59px;
}
.home-footer-note {
  font:
    400 16px/19.2px "Beirut Text Book",
    Georgia,
    serif;
  color: var(--home-muted);
}
.home-footer-note p {
  margin: 0;
}
.home-footer-note .home-footer-prompt {
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 8px;
}
.home-footer-note .home-footer-invitation {
  margin-bottom: 17.59px;
}
.home-booking {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--home-heading);
  white-space: nowrap;
}
.home-booking:hover,
.home-booking:focus-visible {
  color: var(--home-accent);
  text-decoration: none;
}
.home-booking .home-external-icon {
  background: currentColor;
  mask: url("../asset/home/external-mask.svg") center / 10.0672px 10.0669px no-repeat;
}
.home-booking[aria-busy="true"] {
  cursor: progress;
}
.home-location {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 14px;
}
.home-location img {
  display: block;
}
.home-socials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font:
    400 16px/19.2px "Beirut Text Book",
    Georgia,
    serif;
  color: var(--home-heading);
}
.home-socials a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.home-socials img {
  display: block;
}
.home-external-icon,
.home-theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-external-icon {
  width: 16px;
  height: 16px;
}
.home-theme-icon {
  width: 24px;
  height: 24px;
}
.home-wordmark {
  position: relative;
  height: 24.8192vw;
  overflow: hidden;
  color: #1a1a1a;
}
[data-theme="light"] .home-wordmark {
  color: #e6e6e6;
}
.home-wordmark > span {
  position: absolute;
  width: 103.88%;
  left: 50.833%;
  top: -2.674vw;
  transform: translateX(-50%);
  font:
    700 31.0755vw/1.3088 "Beirut Display",
    Georgia,
    serif;
  letter-spacing: -1.15214vw;
  text-align: center;
  white-space: nowrap;
}
[data-theme="light"] .home-control:not(:hover):not(:focus-visible) {
  color: var(--home-heading);
}
[data-theme="light"] .home-socials img {
  filter: invert(1);
}
[data-theme="light"] .home-mark img,
[data-theme="light"] .home-location img {
  filter: none;
}
@media (max-width: 720px) {
  .home-intro-copy,
  .home-contact {
    font-size: 16px;
  }
  .home {
    padding-top: 24px;
  }
  .home-column {
    padding-inline: 20px;
  }
  .home-main {
    margin-top: 48px;
    gap: 48px;
  }
  .home-intro {
    padding-top: 24px;
  }
  .home-headline {
    font-size: clamp(36px, 8.9vw, 64px);
    margin-bottom: 48px;
  }
  .home-services {
    padding-block: 64px;
    gap: 36px;
  }
  .home-statement {
    font-size: clamp(28px, 5vw, 36px);
  }
  .home-socials {
    grid-column: 2;
  }
}
@media (max-width: 480px) {
  .home-services-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .home-service {
    min-height: auto;
    flex-direction: row;
    gap: 24px;
    padding: 24px 20px;
  }
  .home-service-icon {
    flex-shrink: 0;
  }
  .home-service h3 {
    margin-bottom: 12px;
  }
  .home-team-panels {
    gap: 8px;
  }
  .home-team-panels > div { border-radius: 16px; }
  .team-card-link { min-height: 170px; padding: 8px 8px 12px; font-size: 14px; }
  .team-avatar { height: 115px; }
  .team-linkedin { width: 16px; height: 16px; right: 7px; bottom: 12px; }
  .home-team-role { font-size: 11px; }
  .engagement-tags > span {
    font-size: 10px;
    line-height: 12px;
    padding: 6px 7px;
  }
  .engagement-name {
    font-size: 32px;
    line-height: 38px;
  }
  .engagement-year {
    margin-left: 3px;
  }
  .home-section-title {
    font-size: 28px;
  }
  .home-location {
    white-space: normal;
    font-size: 14px;
  }
}

/* The complete linked engagement row shares the accent on interaction. */
.engagement > *, .engagement[href]::after { transition: color 180ms ease, opacity 180ms ease; }
.engagement:is(:hover, :focus-visible) { text-decoration: none; }
.engagement[href]:is(:hover, :focus-visible) { color: var(--home-accent); }
.engagement[href]:is(:hover, :focus-visible) > *,
.engagement[href]:is(:hover, :focus-visible)::after { opacity: 1; }
.home-wordmark {
  margin-top: 0;
}
.home-projects[hidden],
.home-engagements[hidden] {
  display: none;
}
.home-projects {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  background: var(--home-bg);
}
.home-projects-grid {
  --project-card-base-width: 660.4px;
  --project-card-width: calc(var(--project-card-base-width) * var(--project-card-scale, 1));
  --card-row-gap: 28.8px;
  --card-row-inset: calc((100vw - var(--project-card-width)) / 2);
  position: relative;
  display: flex;
  gap: var(--card-row-gap);
  padding-inline: var(--card-row-inset);
  padding-block: var(--card-row-gap);
  border-block: 1px solid var(--home-border);
  overflow-x: auto;
  overscroll-behavior-x: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--card-row-inset);
  scrollbar-width: none;
  touch-action: pan-y pinch-zoom;
}
.home-projects-grid::-webkit-scrollbar {
  display: none;
}
.home-projects-grid.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.home-projects-grid.is-dragging .home-project-card {
  transition: opacity 180ms ease;
  cursor: grabbing;
}
.home-project-resize {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--home-border);
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.home-project-resize::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 1px;
  background: transparent;
}
.home-project-resize > span {
  pointer-events: none;
}
.home-project-resize-grip {
  z-index: 1;
  width: 44px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: var(--home-bg);
}
.home-project-resize:hover,
.home-project-resize:focus-visible,
.home-projects.is-resizing .home-project-resize {
  color: #00e935;
}
.home-project-resize:hover::before,
.home-project-resize:focus-visible::before,
.home-projects.is-resizing .home-project-resize::before {
  background: currentColor;
}
.home-project-resize:focus-visible {
  outline: none;
}
.home-projects.is-resizing {
  user-select: none;
}
.home-control img {
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .home-projects-grid {
    --project-card-base-width: calc(100vw - 42px);
    --card-row-gap: 20px;
  }
  .home-footer-row {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 24px;
  }
  .footer-mark {
    width: 80px;
    height: 80px;
  }
  .home-footer-column {
    padding-bottom: 64px;
  }
}
@media (max-width: 380px) {
  .engagement-tags > span {
    font-size: 9px;
    padding: 5px;
  }
  .home-footer-row {
    grid-template-columns: 1fr;
  }
  .home-socials {
    grid-column: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .engagement {
    transition: none;
  }
}

.home-projects .case-card {
  display: block;
  flex: 0 0 var(--project-card-width);
  height: calc(440px * var(--project-card-scale, 1));
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform: translateX(var(--card-pull, 0px));
  transition: opacity 200ms ease, transform 350ms ease;
  touch-action: pan-y pinch-zoom;
  background: var(--home-panel);
}
.home-project-card-content {
  width: var(--project-card-base-width);
  height: 440px;
  transform: scale(var(--project-card-scale, 1));
  transform-origin: top left;
}
.home-projects .case-image {
  position: relative;
  margin: 0;
  height: 100%;
  overflow: hidden;
}
.home-projects .case-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 90ms ease;
}
.home-projects .case-image img.is-visible { opacity: 1; }
.home-project-eye {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--home-accent);
  mix-blend-mode: difference;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.home-project-eye::after {
  content: "";
  width: 64px;
  height: 64px;
  background: #000;
  mask: url("../asset/home/eye.svg") center / contain no-repeat;
}
.home-projects a:hover,
.home-projects a:focus-visible { text-decoration: none; }
.home-project-card.is-active:focus-visible:not(.has-eye-cursor) .home-project-eye { opacity: 1; }
.home-project-cursor {
  position: fixed;
  z-index: 1000;
  opacity: 1;
}
.has-eye-cursor,
.has-eye-cursor * { cursor: none; }
.home-main > :not(.home-projects) { transition: filter 250ms ease; }
.home:has(.is-previewing) .home-main > :not(.home-projects) { filter: blur(4px); }
@media (max-width: 720px) {
  .home-projects .case-card { height: auto; aspect-ratio: 3 / 2; }
  .home-project-card-content { width: 100%; height: 100%; transform: none; }
}
@media (max-width: 720px), (hover: none), (pointer: coarse) {
  .home-projects-grid {
    --project-card-scale: 1;
    border-block: 0;
  }
  .home-project-resize { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-projects .case-card,
  .home-projects .case-image img,
  .home-project-eye,
  .home-main > :not(.home-projects) { transition: none; }
  .home:has(.is-previewing) .home-main > :not(.home-projects) { filter: none; }
}
/* The enhanced wheel keeps five cards in view, with one expanded center.
   Without JavaScript the original horizontal image list remains usable. */
.home-projects-grid.is-wheel-ready {
  display: block;
  height: calc(var(--wheel-height, 440px) + 2 * var(--card-row-gap));
  padding: 0;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.home-projects .is-wheel-ready .case-card {
  position: absolute;
  top: var(--card-row-gap);
  left: 50%;
  width: var(--wheel-card-width);
  height: var(--wheel-height);
  transform-origin: 50% 0;
  aspect-ratio: auto;
  opacity: .3;
  transform: translate3d(calc(-50% + var(--wheel-x)), 0, 0);
  transition: width var(--wheel-duration, 400ms) ease, height var(--wheel-duration, 400ms) ease, transform var(--wheel-duration, 400ms) ease, opacity 250ms ease;
  cursor: var(--click-cursor, pointer);
}
.home-projects .is-wheel-ready .case-card:not(.is-active) {
  width: var(--wheel-side-base-width);
  height: var(--wheel-base-height);
  transform-origin: 50% 0;
  transform: translate3d(calc(-50% + var(--wheel-x)), 0, 0) scale(var(--wheel-scale, 1));
}
.home-projects .is-wheel-ready .case-card.is-active { opacity: 1; z-index: 2; }
.home-projects .is-wheel-ready .case-card.is-offscreen { pointer-events: none; }
.home-projects .is-wheel-ready .home-project-card-content { width: 100%; height: 100%; transform: none; }
.home-projects .is-wheel-ready.is-rebasing .case-card { transition: none; }
.home-wheel-track {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 0, 0);
  transition: transform var(--wheel-duration, 400ms) ease;
}
.is-dragging .home-wheel-track { transition: none; will-change: transform; }
.home:has(.is-dragging) .home-main > :not(.home-projects) { filter: none; transition: none; }

.home-projects .is-wheel-ready.is-dragging .case-card { cursor: grabbing; }
.home-projects .is-wheel-ready .has-eye-cursor,
.home-projects .is-wheel-ready .has-eye-cursor * { cursor: none; }
.home-wheel-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .home-projects .is-wheel-ready .case-card, .home-wheel-track { transition: none; }
}

.footer-mark .home-glyph {
  width: 101.654px;
  height: 101.654px;
  flex-shrink: 0;
  transform: scale(0.87167);
}
@media (max-width: 720px) {
  .footer-mark .home-glyph {
    transform: scale(0.6667);
  }
}

.home-view-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home.is-grid .home-intro-copy,
.home.is-grid .home-contact {
  display: none;
}
.home.is-grid .home-headline {
  margin-bottom: 0;
}

.wordmark-baseline {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}
.home-wordmark > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: inherit;
}
.home-wordmark.is-interactive > span {
  visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .home-wordmark.is-interactive {
    cursor: none;
  }
}
.wordmark-readout {
  position: absolute;
  z-index: 1;
  padding: 4px 6px;
  border-radius: 3px;
  background: var(--home-bg);
  color: var(--home-heading);
  font:
    400 10px/1.3 "Suisse Intl",
    Arial,
    sans-serif;
  white-space: pre;
  pointer-events: none;
}
.home-wordmark > svg {
  transform: translateZ(0);
}

/* Home link interactions have their own treatments instead of the generic underline. */
.home-socials a { transition: color 180ms ease; }
.home-socials .home-external-icon {
  background: currentColor;
  mask: url("../asset/home/external-mask.svg") center / 10.0672px 10.0669px no-repeat;
}
.home-socials .home-external-icon img { visibility: hidden; }
.home-socials a:hover,
.home-socials a:focus-visible {
  text-decoration: none;
  color: var(--home-accent);
}
.home-brand {
  display: inline-flex;
  align-items: center;
  min-width: 48px;
  width: auto;
  padding-inline: 5px;
  white-space: nowrap;
}
.home-brand:hover,
.home-brand:focus-visible {
  color: var(--home-accent);
  text-decoration: none;
}
.home-brand.is-typing .home-brand-suffix::after {
  content: "|";
  margin-left: 0.04em;
}
.home-email-controls {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  vertical-align: baseline;
}
.home-email-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  transition: color 180ms ease;
}
.home-email-link:is(:hover, :focus-visible) { color: var(--home-accent); text-decoration: none; }
.home-email-address { overflow-wrap: anywhere; }
.home-copy-icon {
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: url("../asset/home/copy.svg") center / contain no-repeat;
}
.home-copy-status {
  position: absolute;
  top: 100%;
  left: 0;
  font:
    400 12px/1.4 "Suisse Intl",
    Arial,
    sans-serif;
  color: var(--home-heading);
}
@media (prefers-reduced-motion: reduce) {
  .home-socials a,
  .home-email-link {
    transition: none;
  }
}

.engagement[aria-disabled="true"],
.engagement[aria-disabled="true"]:hover {
  opacity: 0.35;
  cursor: default;
}
:root[data-theme="light"] ::selection {
  color: #000;
}

.home-copy-status:not(:empty) {
  top: calc(100% + 8px);
  width: max-content;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  background: #00e935;
  color: #000;
}

.home-copy-status.is-above:not(:empty) {
  top: auto;
  bottom: calc(100% + 8px);
}


@media (max-width: 360px) {
  .home-statement { font-size: 26px; }
}

/* Each icon gets a 4.8-second turn, drawing before holding for the next card. */
.home-service { --service-delay: 0s; }
.home-service:nth-child(2) { --service-delay: 4.8s; }
.home-service:nth-child(3) { --service-delay: 9.6s; }
.home-service-icon .home-glyph path,
.home-service-icon .home-glyph ellipse {
  stroke-dasharray: 1;
  animation-duration: 14.4s;
  animation-delay: var(--service-delay);
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.home-services.is-animating .home-service-icon .home-glyph path,
.home-services.is-animating .home-service-icon .home-glyph ellipse {
  animation-play-state: running;
}
.footer-mark .home-glyph path {
  stroke-dasharray: 1;
  animation-duration: 14.4s;
  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  animation-iteration-count: infinite;
}
.home-glyph [data-step="1"] > * { animation-name: service-step-1; }
.home-glyph [data-step="2"] > * { animation-name: service-step-2; }
.home-glyph [data-step="3"] > * { animation-name: service-step-3; }
.home-glyph [data-step="4"] > * { animation-name: service-step-4; }
.footer-mark .home-glyph [data-step="1"] > * { animation-name: footer-step-1; }
.footer-mark .home-glyph [data-step="2"] > * { animation-name: footer-step-2; }
.footer-mark .home-glyph [data-step="3"] > * { animation-name: footer-step-3; }
.footer-mark .home-glyph [data-step="4"] > * { animation-name: footer-step-4; }
@keyframes footer-step-1 { 0% { stroke-dashoffset: 1; } 5.2%, 100% { stroke-dashoffset: 0; } }
@keyframes footer-step-2 { 0%, 5.2% { stroke-dashoffset: 1; } 10.4%, 100% { stroke-dashoffset: 0; } }
@keyframes footer-step-3 { 0%, 10.4% { stroke-dashoffset: 1; } 15.6%, 100% { stroke-dashoffset: 0; } }
@keyframes footer-step-4 { 0%, 15.6% { stroke-dashoffset: 1; } 20.8%, 100% { stroke-dashoffset: 0; } }
@keyframes service-step-1 {
  0% { stroke-dashoffset: 1; }
  4.041%, 100% { stroke-dashoffset: 0; }
}
@keyframes service-step-2 {
  0%, 1.796% { stroke-dashoffset: 1; }
  6.735%, 100% { stroke-dashoffset: 0; }
}
@keyframes service-step-3 {
  0%, 5.613% { stroke-dashoffset: 1; }
  10.777%, 100% { stroke-dashoffset: 0; }
}
@keyframes service-step-4 {
  0%, 8.981% { stroke-dashoffset: 1; }
  14.593%, 100% { stroke-dashoffset: 0; }
}
/* The ring draws first; strands then grow upward through its opening. */
.home-glyph--strategy ellipse { animation-name: service-step-1; }
.home-service-icon .home-glyph--strategy .strategy-flow { animation-name: strategy-draw; }
@keyframes strategy-draw {
  0%, 2.694% { stroke-dashoffset: 1; }
  15.267%, 100% { stroke-dashoffset: 0; }
}
.home-glyph--build path:nth-of-type(1) { animation-name: build-orbit-first; }
.home-glyph--build path:nth-of-type(2) { animation-name: build-orbit-second; }
@keyframes build-orbit-first {
  0% { stroke-dashoffset: 1; }
  8.532%, 100% { stroke-dashoffset: 0; }
}
@keyframes build-orbit-second {
  0%, 7.184% { stroke-dashoffset: 1; }
  16.165%, 100% { stroke-dashoffset: 0; }
}
/* Supplied heart: trace the ring and heart, then complete three full turns.
   Three full six-second revolutions follow the opening path drawing. */
.home-glyph--heart path {
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  animation: heart-ring-draw 22s cubic-bezier(.4, 0, .2, 1) infinite;
}
.home-glyph--heart path:last-of-type { animation-name: heart-outline-draw; }
.heart-turn {
  transform-origin: 46px 46px;
  animation: heart-turn 22s linear infinite;
}
@keyframes heart-ring-draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  2% { opacity: 1; }
  6%, 90.909% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes heart-outline-draw {
  0%, 3% { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
  9%, 90.909% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes heart-turn {
  0%, 9.091% { transform: rotateY(0deg); }
  90.909%, 100% { transform: rotateY(1080deg); }
}
@media (prefers-reduced-motion: reduce) {
  .home-glyph path, .home-glyph ellipse, .heart-turn { animation: none !important; }
}

@media (hover: hover) and (pointer: fine) {
  :root { --click-cursor: url("../asset/home/click-cursor.svg") 16 16, pointer; }
  .team-card { --click-cursor: url("../asset/home/click-cursor-dark.svg") 16 16, pointer; }
  :where(a[href], button:enabled, summary, [role="button"]):not([aria-disabled="true"]) {
    cursor: var(--click-cursor, pointer);
  }
}

/* Mask the supplied navigation glyphs so their hover color follows the text. */
.home-view-icon { --control-glyph: url("../asset/home/folder.svg"); }
.view-toggle[aria-pressed="true"] .home-view-icon { --control-glyph: url("../asset/home/doc.svg"); }
.home-theme-icon { --control-glyph: url("../asset/home/dark.svg"); }
.theme-toggle[aria-pressed="true"] .home-theme-icon { --control-glyph: url("../asset/home/light.svg"); }
.home-control:is(:hover, :focus-visible) :is(.home-view-icon, .home-theme-icon) {
  background: currentColor;
  mask: var(--control-glyph) center / contain no-repeat;
}
.home-control:is(:hover, :focus-visible) img { visibility: hidden; }

/* A short entrance on refresh; words remain ordinary, selectable text.
   Backwards fill ends cleanly, so transforms never linger on interactive UI. */
.home-headline-word { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .home-header {
    animation: home-enter 480ms cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .home-headline { animation: home-headline-rise 820ms cubic-bezier(.22, 1, .36, 1) 80ms backwards; }
  .home-headline-word {
    animation: home-word-enter 620ms cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: calc(80ms + var(--word-order, 0) * 28ms);
  }
  .home-intro-copy p, .home-contact {
    animation: home-enter 560ms cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: 260ms;
  }
  .home-intro-copy p:nth-child(2) { animation-delay: 340ms; }
  .home-intro-copy p:nth-child(n+3) { animation-delay: 420ms; }
  .home-contact { animation-delay: 480ms; }
  .home-engagements > h2, .engagement-list > li {
    animation: home-enter 520ms cubic-bezier(.22, 1, .36, 1) 440ms backwards;
  }
  .engagement-list > li:nth-child(1) { animation-delay: 480ms; }
  .engagement-list > li:nth-child(2) { animation-delay: 530ms; }
  .engagement-list > li:nth-child(3) { animation-delay: 580ms; }
  .engagement-list > li:nth-child(4) { animation-delay: 630ms; }
  .engagement-list > li:nth-child(5) { animation-delay: 680ms; }
  .engagement-list > li:nth-child(n+6) { animation-delay: 730ms; }
  .home-projects { animation: home-fade-in 680ms ease 240ms backwards; }
  .home-services > .home-mark, .home-statement,
  .home-services-grid, .home-team-copy, .home-team > h2 {
    animation: home-enter 620ms cubic-bezier(.22, 1, .36, 1) 160ms backwards;
  }
  .home-statement { animation-delay: 220ms; }
  .home-services-grid { animation-delay: 300ms; }
  .home-team-panels > .team-card {
    animation: home-enter 600ms cubic-bezier(.22, 1, .36, 1) 220ms backwards;
  }
  .home-team-panels > .team-card:nth-child(2) { animation-delay: 290ms; }
  .home-team-panels > .team-card:nth-child(3) { animation-delay: 360ms; }
  .home-footer-row, .home-wordmark { animation: home-fade-in 680ms ease 180ms backwards; }
  .home-header:focus-within, .home-intro-copy p:focus-within,
  .home-contact:focus-within, .engagement-list > li:focus-within,
  .home-projects:focus-within, .home-team-panels > .team-card:focus-within,
  .home-footer-row:focus-within { animation: none; }
}
@keyframes home-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes home-headline-rise {
  from { transform: translateY(10px); }
  to { transform: translateY(0); }
}
@keyframes home-word-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes home-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Limit the entrance to the initial load, preserving immediate view switches. */
html.home-entrance-complete :is(
  .home-header, .home-headline, .home-headline-word, .home-intro-copy p, .home-contact,
  .home-engagements > h2, .engagement-list > li, .home-projects,
  .home-services > .home-mark, .home-statement, .home-services-grid,
  .home-team-copy, .home-team > h2, .home-team-panels > .team-card,
  .home-footer-row, .home-wordmark, .projects-header, .project-rail, .project-dock
) { animation: none; }

/* Room to read each portrait, with neighboring cards inviting a swipe. */
@media (max-width: 720px) {
  .home-team-panels {
    display: flex;
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    gap: 12px;
    padding: 0 calc((100vw - min(72vw, 300px)) / 2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .home-team-panels::-webkit-scrollbar { display: none; }
  .home-team-panels > .team-card {
    flex: 0 0 min(72vw, 300px);
    border-radius: 24px;
    scroll-snap-align: center;
  }
  .home-team-panels .team-card-link {
    min-height: 310px;
    padding: 16px 16px 20px;
    font-size: 20px;
    line-height: 26px;
  }
  .home-team-panels .team-avatar { height: 230px; }
  .home-team-panels .team-card-front > span:not(.team-avatar) { padding-right: 32px; }
  .home-team-panels .home-team-role { font-size: 14px; }
  .home-team-panels .team-linkedin { right: 12px; bottom: 18px; }
  .home-team-panels .team-card-back { min-height: 310px; padding: 24px; }
  .home-team-panels .team-card-back h3 { font-size: 22px; margin-top: 36px; }
  .home-team-panels .team-card-back p { font-size: 15px; }
  .home-projects .is-wheel-ready .case-card { border-radius: 20px; }
}

@media (max-width: 720px) {
  .home-projects-grid { --wheel-duration: 240ms; }
}
.home-projects-grid .case-image img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Native, compositor-driven scrolling on touch devices. */
.home-projects-grid.is-native-wheel {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x pan-y pinch-zoom;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--native-inset);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.is-native-wheel .home-wheel-track {
  position: relative;
  inset: auto;
  display: flex;
  gap: 12px;
  width: max-content;
  height: 100%;
  padding: 12px var(--native-inset) 0;
  transform: none;
  transition: none;
}
.home-projects .is-native-wheel .case-card,
.home-projects .is-native-wheel .case-card:not(.is-active) {
  position: relative;
  top: auto;
  left: auto;
  touch-action: auto;
  flex: 0 0 var(--native-card-width);
  width: var(--native-card-width);
  height: var(--wheel-height);
  transform: none;
  transition: opacity 160ms ease;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
/* Explicit face visibility also hides Safari's composited WebGL canvas. */
.team-card-inner { transition-timing-function: cubic-bezier(.45, 0, .55, 1); }
.team-card-front { visibility: visible; transition: visibility 0s 275ms; }
.team-card.is-flipped .team-card-front { visibility: hidden; }
.team-card-front .team-avatar canvas { visibility: inherit; opacity: 1; transition: opacity 0s 275ms; }
.team-card.is-flipped .team-avatar canvas { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .team-card-front, .team-card-front .team-avatar canvas { transition: none; }
  .home-projects .is-native-wheel .case-card { transition: none; }
}