/* The original company marks, carried on a calm, seamless loop. */
.company-carousel {
  --brand-gap: clamp(32px, 3.2vw, 48px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding-block: 34px;
  border-bottom: 1px solid var(--line);
}
.carousel-label { color: var(--muted); line-height: 1.9; }
.brand-marquee {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-block: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.brand-marquee:focus-visible { outline-offset: 5px; }
.brand-track { display: flex; width: max-content; }
.brand-marquee[data-ready] .brand-track {
  animation: company-drift 48s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.brand-strip {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--brand-gap);
  /* Two half-gaps meet at the repeat, matching the space between any two marks. */
  padding: 0 calc(var(--brand-gap) / 2);
  margin: 0;
  width: max-content;
}
.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 40px;
  gap: .55em;
  color: var(--muted);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  transition: color .25s;
}
.brand svg { display: block; fill: currentColor; flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.brand-marquee[data-ready] { scrollbar-width: none; }
.brand-marquee[data-ready]::-webkit-scrollbar { display: none; }
@keyframes company-drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.motion-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  transition: border-color .2s, color .2s, background .2s;
}
.motion-toggle:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.motion-toggle svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.motion-toggle .motion-play { display: none; }
.motion-toggle[aria-pressed=true] .motion-pause { display: none; }
.motion-toggle[aria-pressed=true] .motion-play { display: block; }

/* Slow ambient movement uses transforms; all continuous motion can be paused. */
@media (prefers-reduced-motion: no-preference) {
  .architecture { animation: diagram-float 8s ease-in-out infinite; animation-play-state: paused; }
  .map-connections path {
    stroke-dasharray: 5 9;
    animation: connection-flow 12s linear infinite;
    animation-play-state: paused;
  }
  .contact-section { position: relative; isolation: isolate; overflow: clip; }
  .contact-section::before {
    content: '';
    position: absolute;
    inset: -8%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 8% 12%, rgb(186 211 255 / .2), transparent 52%),
                radial-gradient(ellipse at 90% 92%, rgb(2 25 101 / .18), transparent 52%);
    animation: contact-light 16s ease-in-out infinite alternate;
    animation-play-state: paused;
  }
}
@keyframes diagram-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes connection-flow { to { stroke-dashoffset: -112; } }
@keyframes contact-light { to { transform: translate3d(3%, -2%, 0); } }
:root[data-motion=running] .brand-marquee[data-ready] .brand-track,
:root[data-motion=running] .architecture,
:root[data-motion=running] .map-connections path,
:root[data-motion=running] .contact-section::before { animation-play-state: running; }
:root[data-motion=running] .brand-marquee[data-ready]:is(:hover, :focus-within, [data-motion-offscreen]) .brand-track,
:root[data-motion=running] [data-motion-offscreen] .architecture,
:root[data-motion=running] [data-motion-offscreen] .map-connections path,
:root[data-motion=running] .contact-section[data-motion-offscreen]::before { animation-play-state: paused; }
:root[data-motion=paused] *, :root[data-motion=paused] *::before, :root[data-motion=paused] *::after {
  animation-play-state: paused !important;
}

/* A small response to touch, focus, or a pointer — never a moving target. */
.case-study, .small-project, .certification {
  position: relative;
  transition: border-color .3s, box-shadow .4s, translate .4s var(--ease);
}
.case-study::after, .small-project::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(440px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgb(92 144 255 / .10), transparent 72%);
  transition: opacity .4s;
}
.case-study:focus-within, .small-project:focus-within { border-color: var(--blue); }
.cert-art img { transition: transform .45s var(--ease); }
.button { position: relative; overflow: hidden; }
.button::after {
  content: '';
  position: absolute;
  inset: -50% auto -50% -60%;
  width: 40%;
  pointer-events: none;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .22), transparent);
}
.big-metric, .about-numbers strong { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root[data-motion=running] .case-study:hover { border-color: color-mix(in srgb, var(--blue) 48%, var(--line)); box-shadow: 0 12px 36px -28px rgb(20 53 123 / .5); }
  :root[data-motion=running] .small-project:hover,
  :root[data-motion=running] .certification:hover { translate: 0 -4px; border-color: color-mix(in srgb, var(--blue) 48%, var(--line)); }
  :root[data-motion=running] .case-study:hover::after,
  :root[data-motion=running] .small-project:hover::after { opacity: 1; }
  :root[data-motion=running] .certification:hover .cert-art img { transform: translateY(-3px) rotate(-3deg); }
  :root[data-motion=running] .button:hover::after { animation: button-glint .65s var(--ease); }
}
@keyframes button-glint { to { left: 140%; } }

@media (max-width: 850px) {
  .company-carousel { gap: 18px; }
  .carousel-label { max-width: 145px; }
}
@media (max-width: 640px) {
  .company-carousel { --brand-gap: 32px; grid-template-columns: minmax(0, 1fr) 44px; gap: 14px 12px; padding-block: 24px; }
  .carousel-label { max-width: none; }
  .carousel-label br { display: none; }
  .motion-toggle { grid-row: 1; grid-column: 2; }
  .brand-marquee { grid-row: 2; grid-column: 1 / -1; padding-block: 15px; }
  .brand { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee[data-ready] .brand-track { animation: none !important; transform: none !important; will-change: auto; }
  .brand-strip[aria-hidden=true] { display: none; }
  .brand-marquee, .brand-marquee[data-ready] { scrollbar-width: thin; mask-image: none; -webkit-mask-image: none; }
  .brand-marquee[data-ready]::-webkit-scrollbar { display: initial; }
  .motion-toggle { display: none; }
  .case-study::after, .small-project::after, .button::after { display: none; }
  .architecture, .map-connections path, .contact-section::before { animation: none !important; }
}
@media print {
  .company-carousel { display: block; padding-block: 18pt; }
  .brand-marquee { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .brand-track, .brand-marquee[data-ready] .brand-track { display: block; width: auto; transform: none !important; animation: none !important; }
  .brand-strip { width: auto; flex-wrap: wrap; gap: 20pt; padding: 0; }
  .brand-strip[aria-hidden=true], .motion-toggle { display: none !important; }
  .case-study::after, .small-project::after, .button::after, .contact-section::before { display: none; }
}