:root {
  --ink: #0a1726;
  --line: #e1e5e8;
  --paper: #ffffff;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--paper);
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

.gateway {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
}

.gateway::before,
.gateway::after {
  position: absolute;
  z-index: 12;
  top: 31px;
  width: min(23vw, 350px);
  height: 1px;
  background: #dfe3e6;
  content: "";
  pointer-events: none;
  transform-origin: center;
  animation: rule-in 1100ms var(--ease-out) both;
}

.gateway::before {
  right: calc(50% + 102px);
  animation-delay: 480ms;
}

.gateway::after {
  left: calc(50% + 102px);
  animation-delay: 620ms;
}

.gateway-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 27px 32px;
  pointer-events: none;
}

.gateway-kicker,
.gateway-instruction {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  line-height: 1;
  text-transform: uppercase;
}

.gateway-kicker {
  justify-self: start;
  animation: fade-down 900ms 220ms var(--ease-out) both;
}

.gateway-instruction {
  justify-self: end;
  color: #949ba2;
  animation: fade-down 900ms 460ms var(--ease-out) both;
}

.instruction-mobile {
  display: none;
}

.brand-grid {
  display: grid;
  min-height: 100svh;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  background: var(--paper);
}

.brand-card {
  --accent: #879099;
  --accent-soft: rgb(102 112 121 / 12%);
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  isolation: isolate;
  outline: none;
  text-decoration: none;
  animation: panel-in 900ms var(--ease-out) both;
  transition:
    opacity 650ms var(--ease-out),
    filter 650ms var(--ease-out),
    background-color 650ms ease,
    box-shadow 750ms var(--ease-out),
    transform 750ms var(--ease-out);
}

.brand-card:nth-child(-n + 4) {
  grid-column: span 3;
}

.brand-card:nth-child(n + 5) {
  grid-column: span 4;
  border-bottom: 0;
}

.brand-card:nth-child(2) { animation-delay: 60ms; }
.brand-card:nth-child(3) { animation-delay: 120ms; }
.brand-card:nth-child(4) { animation-delay: 180ms; }
.brand-card:nth-child(5) { animation-delay: 240ms; }
.brand-card:nth-child(6) { animation-delay: 300ms; }
.brand-card:nth-child(7) { animation-delay: 360ms; }

.brand-card:nth-child(4),
.brand-card:nth-child(7) {
  border-right: 0;
}

.brand-card::before {
  position: absolute;
  z-index: 0;
  top: -25%;
  bottom: -25%;
  left: 50%;
  width: 1px;
  background: var(--accent);
  content: "";
  opacity: 0.07;
  pointer-events: none;
  transform: translateX(-22vw) rotate(15deg);
  transform-origin: center;
  animation: line-travel 13s ease-in-out infinite alternate;
  transition:
    opacity 650ms ease,
    transform 950ms var(--ease-out);
}

.brand-card::after {
  position: absolute;
  z-index: 0;
  top: 49%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-soft);
  content: "";
  opacity: 0.2;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: signal-pulse 5.4s ease-out infinite;
}

.brand-card--green-list {
  --accent: #3bbb12;
  --accent-soft: rgb(59 187 18 / 11%);
}

.brand-card--precision {
  --accent: #079bd3;
  --accent-soft: rgb(7 155 211 / 11%);
}

.brand-card--roofing {
  --accent: #bd582b;
  --accent-soft: rgb(189 88 43 / 11%);
}

.brand-card--holdings {
  --accent: #848b91;
  --accent-soft: rgb(72 80 87 / 10%);
}

.brand-card--two-four {
  --accent: #c09a5c;
  --accent-soft: rgb(192 154 92 / 11%);
}

.brand-card--meddev {
  --accent: #0d9fd4;
  --accent-soft: rgb(13 159 212 / 11%);
}

.brand-card--treecare {
  --accent: #477a52;
  --accent-soft: rgb(71 122 82 / 11%);
}

.brand-grid:has(.brand-card:is(:hover, :focus-visible))
  .brand-card:not(:is(:hover, :focus-visible)) {
  opacity: 0.23;
  filter: grayscale(0.74) contrast(0.92);
}

.brand-card:is(:hover, :focus-visible) {
  z-index: 3;
  background-color: color-mix(in srgb, var(--accent) 3%, white);
  box-shadow:
    inset 0 0 0 1px var(--accent-soft),
    0 22px 70px var(--accent-soft);
  transform: translateY(-2px);
}

.brand-card:is(:hover, :focus-visible)::before {
  opacity: 0.28;
  transform: translateX(15vw) rotate(15deg);
}

.brand-card:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.brand-number {
  position: absolute;
  z-index: 3;
  top: 70px;
  left: 24px;
  color: #a0a7ad;
  font-family: "Courier New", Courier, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  transition:
    color 450ms ease,
    transform 600ms var(--ease-out);
}

.brand-stage {
  position: relative;
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 86px 34px 62px;
}

.motion-orbit {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0.08;
  pointer-events: none;
  transition:
    opacity 700ms ease,
    transform 1000ms var(--ease-out);
}

.motion-orbit::before,
.motion-orbit::after {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.motion-orbit::before {
  top: -3px;
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
}

.motion-orbit::after {
  right: -2px;
  bottom: 25%;
  width: 3px;
  height: 3px;
}

.motion-orbit--outer {
  width: min(69%, 250px);
  animation: orbit-slow 26s linear infinite;
}

.motion-orbit--inner {
  width: min(51%, 185px);
  border-style: dashed;
  animation: orbit-reverse 33s linear infinite;
}

.motion-line {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  display: block;
  width: min(76%, 285px);
  height: 1px;
  background: var(--accent);
  opacity: 0.06;
  pointer-events: none;
  transform: translate(-50%, -50%) scaleX(0.65);
  transition:
    opacity 650ms ease,
    transform 900ms var(--ease-out);
}

.brand-logo {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  animation: logo-float 7.5s ease-in-out infinite;
  transform-origin: center;
  transition:
    transform 850ms var(--ease-out),
    filter 750ms var(--ease-out);
}

.brand-card:nth-child(2) .brand-logo { animation-delay: -1.1s; }
.brand-card:nth-child(3) .brand-logo { animation-delay: -2.2s; }
.brand-card:nth-child(4) .brand-logo { animation-delay: -3.3s; }
.brand-card:nth-child(5) .brand-logo { animation-delay: -4.4s; }
.brand-card:nth-child(6) .brand-logo { animation-delay: -5.5s; }
.brand-card:nth-child(7) .brand-logo { animation-delay: -6.6s; }

.brand-logo--green-list { width: min(84%, 310px); }
.brand-logo--precision { width: min(86%, 325px); }
.brand-logo--roofing { width: min(55%, 205px); max-height: 72%; }
.brand-logo--holdings { width: min(88%, 390px); }
.brand-logo--two-four { width: min(48%, 205px); max-height: 73%; }
.brand-logo--meddev { width: min(80%, 350px); }
.brand-logo--treecare { width: min(48%, 210px); max-height: 74%; }

.brand-card:is(:hover, :focus-visible) .brand-logo {
  filter: drop-shadow(0 18px 24px var(--accent-soft));
  transform: translateY(-5px) scale(1.06);
}

.brand-card:is(:hover, :focus-visible) .motion-orbit {
  opacity: 0.28;
}

.brand-card:is(:hover, :focus-visible) .motion-orbit--outer {
  transform: translate(-50%, -50%) rotate(36deg) scale(1.1);
}

.brand-card:is(:hover, :focus-visible) .motion-orbit--inner {
  opacity: 0.16;
  transform: translate(-50%, -50%) rotate(-28deg) scale(0.94);
}

.brand-card:is(:hover, :focus-visible) .motion-line {
  opacity: 0.19;
  transform: translate(-50%, -50%) scaleX(1);
}

.brand-card:is(:hover, :focus-visible) .brand-number {
  color: var(--accent);
  transform: translateY(-2px);
}

.brand-meta {
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: 18px;
  left: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: transform 600ms var(--ease-out);
}

.brand-domain,
.brand-action {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.brand-domain {
  overflow: hidden;
  color: #69737c;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-action {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  opacity: 0;
  transform: translateX(-7px);
  transition:
    opacity 400ms ease,
    transform 550ms var(--ease-out);
}

.brand-arrow {
  display: inline-grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid #b4bac0;
  border-radius: 50%;
  font-size: 11px;
  transition:
    color 350ms ease,
    border-color 350ms ease,
    background 350ms ease,
    transform 550ms var(--ease-out);
}

.brand-card:is(:hover, :focus-visible) .brand-meta {
  transform: translateY(-3px);
}

.brand-card:is(:hover, :focus-visible) .brand-action {
  opacity: 1;
  transform: translateX(0);
}

.brand-card:is(:hover, :focus-visible) .brand-arrow {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
  transform: rotate(45deg);
}

@keyframes panel-in {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes rule-in {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes logo-float {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

@keyframes orbit-slow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbit-reverse {
  from { transform: translate(-50%, -50%) rotate(105deg); }
  to { transform: translate(-50%, -50%) rotate(-255deg); }
}

@keyframes line-travel {
  from { transform: translateX(-22vw) rotate(15deg); }
  to { transform: translateX(22vw) rotate(15deg); }
}

@keyframes signal-pulse {
  0% { box-shadow: 0 0 0 0 var(--accent-soft); }
  55%, 100% { box-shadow: 0 0 0 24px transparent; }
}

@media (max-width: 980px) {
  body {
    overflow: auto;
  }

  .gateway {
    overflow: visible;
  }

  .gateway::before,
  .gateway::after {
    display: none;
  }

  .gateway-header {
    position: fixed;
    grid-template-columns: 1fr 1fr;
    padding: 22px 20px;
    border-bottom: 1px solid #edf0f2;
    background: rgb(255 255 255 / 94%);
    backdrop-filter: blur(12px);
  }

  .gateway-kicker,
  .gateway-instruction {
    font-size: 8px;
    letter-spacing: 0.2em;
  }

  .brand-grid {
    min-height: 200svh;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(310px, 1fr));
  }

  .brand-card,
  .brand-card:nth-child(-n + 4),
  .brand-card:nth-child(n + 5) {
    grid-column: span 3;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .brand-card:nth-child(even) {
    border-right: 0;
  }

  .brand-card:nth-child(7) {
    grid-column: span 6;
    border-right: 0;
    border-bottom: 0;
  }

  .brand-stage {
    padding: 74px 30px 58px;
  }
}

@media (max-width: 640px) {
  .instruction-desktop {
    display: none;
  }

  .instruction-mobile {
    display: inline;
  }

  .brand-grid {
    min-height: 224svh;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, minmax(30svh, 1fr));
  }

  .brand-card,
  .brand-card:nth-child(-n + 4),
  .brand-card:nth-child(n + 5),
  .brand-card:nth-child(7) {
    min-height: 30svh;
    grid-column: 1;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .brand-card:last-child {
    border-bottom: 0;
  }

  .brand-grid:has(.brand-card:is(:hover, :focus-visible))
    .brand-card:not(:is(:hover, :focus-visible)) {
    opacity: 0.55;
  }

  .brand-number {
    top: 68px;
    left: 20px;
    font-size: 8px;
  }

  .brand-stage {
    padding: 73px 35px 52px;
  }

  .brand-meta {
    right: 20px;
    bottom: 14px;
    left: 20px;
  }

  .brand-domain,
  .brand-action {
    font-size: 8px;
  }

  .brand-action {
    opacity: 1;
    transform: none;
  }

  .brand-logo--roofing,
  .brand-logo--two-four,
  .brand-logo--treecare {
    width: auto;
    max-width: 47%;
    max-height: 68%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}