/* Hallmark · macrostructure: Marquee Hero (long-scroll agency) · theme: studied-DNA (source: https://www.digitalgravity.ae/)
 * nav: N5 floating pill · footer: Ft5 statement · studied: yes · DNA-source: url
 */

/* ============ base ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}

a { color: var(--color-ink); }

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

::selection { background: var(--color-accent); color: var(--color-paper); }

.section__title {
  font-size: var(--text-display-s);
  margin-bottom: var(--space-lg);
}

main > section { padding-inline: clamp(1.25rem, 5vw, 5rem); scroll-margin-top: 5.5rem; }

/* ============ buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  padding: 0.8em 1.6em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(100deg, var(--color-accent), var(--color-accent-2));
  color: var(--color-paper);
  border: none;
}
.btn--primary:hover { filter: brightness(1.1); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule);
}
.btn--ghost:hover { border-color: var(--color-neutral); background: var(--color-paper-2); }

.btn--lg { font-size: var(--text-md); padding: 0.9em 1.8em; }

/* ============ scroll progress ============ */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: var(--z-nav);
  background: transparent;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-accent);
}

/* ============ social rail ============ */
.rail {
  position: fixed;
  left: var(--space-md);
  top: 50%;
  translate: 0 -50%;
  display: none;
  flex-direction: column;
  gap: var(--space-lg);
  z-index: var(--z-raised);
}
.rail__link {
  writing-mode: vertical-rl;
  text-decoration: none;
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-neutral);
  letter-spacing: 0.08em;
  transition: color var(--dur-micro) var(--ease-out);
}
.rail__link:hover { color: var(--color-ink); }
@media (min-width: 90rem) { .rail { display: flex; } }

/* ============ nav (N5 floating pill) ============ */
.nav {
  position: fixed;
  inset: 0.9rem 0 auto 0;
  display: flex;
  justify-content: center;
  z-index: var(--z-nav);
  padding-inline: var(--space-md);
}
.nav__pill {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: 0.5rem 0.6rem 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-rule);
  background: oklch(15% 0.016 300 / 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: 100%;
}
.nav__brand {
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__brand-bts { font-weight: 700; }
.nav__brand-digital { font-weight: 400; color: var(--color-neutral); }
.nav__links { display: flex; gap: var(--space-md); }
.nav__link {
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--text-base);
  color: var(--color-muted);
  padding: 0.35em 0.5em;
  transition: color var(--dur-micro) var(--ease-out);
}
.nav__link:hover { color: var(--color-ink); }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  transition: transform var(--dur-short) var(--ease-in-out), opacity var(--dur-short) var(--ease-in-out);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 60rem) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__pill { gap: var(--space-sm); }
}

/* mobile sheet */
.sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  background: oklch(13% 0.015 300 / 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-2xl) clamp(1.5rem, 8vw, 4rem);
}
.sheet[hidden] { display: none; }
.sheet__link {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.sheet__link:hover { color: var(--color-accent); }
.sheet__cta { margin-top: var(--space-md); }

/* ============ hero ============ */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  padding-block: var(--space-3xl) var(--space-2xl);
}
.hero__canvas { position: absolute; inset: 0; overflow: clip; }
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, oklch(40% 0.03 300 / 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(40% 0.03 300 / 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 60%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 60%, black 30%, transparent 75%);
}
.hero__bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.hero__bloom--a {
  width: 44vw; height: 44vw;
  min-width: 320px; min-height: 320px;
  left: -10vw; top: 8%;
  background: oklch(40% 0.16 305 / 0.35);
}
.hero__bloom--b {
  width: 36vw; height: 36vw;
  min-width: 260px; min-height: 260px;
  right: -8vw; bottom: -12%;
  background: oklch(38% 0.17 340 / 0.28);
}
.hero__inner {
  position: relative;
  width: min(52rem, 100%);
  margin-inline: auto;
  text-align: center;
}
.hero__kicker {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
  margin-bottom: var(--space-md);
}
.hero__title {
  font-size: var(--text-display);
  margin-bottom: var(--space-md);
}
.hero__sub {
  font-size: var(--text-md);
  color: var(--color-muted);
  max-width: 42ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}
.hero__ctas {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* hero entrance — the page's one orchestrated moment */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ============ marquee ============ */
.marquee {
  overflow: clip;
  border-block: 1px solid var(--color-rule);
  padding-block: var(--space-md);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-neutral);
  white-space: nowrap;
}
.marquee__track i {
  font-style: normal;
  color: var(--color-accent);
  font-size: var(--text-sm);
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ work ============ */
.work { padding-block: var(--space-3xl) var(--space-2xl); }
.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.work__head .section__title { margin-bottom: 0; }
.work__lede { color: var(--color-neutral); max-width: 38ch; }

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
.workcard {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: clip;
  transition: background-color var(--dur-short) var(--ease-out);
}
.workcard:hover { background: var(--color-paper-3); }
.workcard--wide { grid-column: span 2; }
.workcard__body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.workcard__body h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.workcard__body p { color: var(--color-neutral); max-width: 52ch; }

/* stock photo cards — dark-treated so they sit in the theme */
.workcard__img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid var(--color-rule);
  filter: saturate(0.85) brightness(0.82);
}
.insight__img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-md);
  filter: saturate(0.85) brightness(0.85);
}
.pageimg {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-rule);
  filter: saturate(0.9) brightness(0.88);
  margin-top: var(--space-lg);
  position: relative;
}

/* Tier-A CSS-art thumbnails — abstract wireframe shapes, no stock imagery */
.workcard__art {
  height: 180px;
  position: relative;
  border-bottom: 1px solid var(--color-rule);
  overflow: clip;
}
.workcard__art span { position: absolute; border-radius: 6px; }

.workcard__art--corporate span:nth-child(1) {
  inset: 24px 55% 40% 32px;
  background: oklch(30% 0.08 305 / 0.7);
}
.workcard__art--corporate span:nth-child(2) {
  inset: 24px 32px 40% 48%;
  border: 1px solid var(--color-rule);
}
.workcard__art--corporate span:nth-child(3) {
  inset: 68% 32px 24px 32px;
  background: oklch(24% 0.04 300);
}

.workcard__art--commerce span:nth-child(1) {
  inset: 24px 40% 24px 24px;
  background: oklch(28% 0.09 340 / 0.6);
}
.workcard__art--commerce span:nth-child(2) {
  inset: 24px 24px 24px 64%;
  border: 1px solid var(--color-rule);
  background: oklch(22% 0.03 300);
}

.workcard__art--landing span:nth-child(1) {
  inset: 24px 24px 55% 24px;
  background: oklch(29% 0.1 305 / 0.55);
}
.workcard__art--landing span:nth-child(2) {
  inset: 55% 30% 24px 30%;
  border-radius: var(--radius-pill);
  background: oklch(45% 0.16 305 / 0.7);
}

.workcard__art--platform span:nth-child(1) {
  inset: 24px 70% 24px 24px;
  background: oklch(22% 0.03 300);
}
.workcard__art--platform span:nth-child(2) {
  inset: 24px 24px 60% 36%;
  background: oklch(28% 0.08 340 / 0.5);
}
.workcard__art--platform span:nth-child(3) {
  inset: 50% 40% 24px 36%;
  border: 1px solid var(--color-rule);
}
.workcard__art--platform span:nth-child(4) {
  inset: 50% 24px 24px 64%;
  background: oklch(30% 0.09 305 / 0.5);
}

@media (max-width: 60rem) {
  .work__grid { grid-template-columns: minmax(0, 1fr); }
  .workcard--wide { grid-column: auto; }
}

/* ============ services ============ */
.services {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-rule);
}
.services__split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl);
  align-items: start;
}
.services__cats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}
.services__cat {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: none;
  border: none;
  color: var(--color-rule);
  cursor: pointer;
  padding: 0.1em 0;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.services__cat:hover { color: var(--color-neutral); }
.services__cat.is-active { color: var(--color-ink); }
.services__cat.is-active::after {
  content: "";
  display: block;
  height: 3px;
  width: 2.5em;
  margin-top: 0.15em;
  background: var(--color-accent);
}

.services__panelwrap {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}
.services__panel { list-style: none; }
.services__panel li {
  font-size: var(--text-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}
.services__panel li:last-child { border-bottom: none; }

@media (max-width: 60rem) {
  .services__split { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .services__cats { flex-direction: row; flex-wrap: wrap; gap: var(--space-md); }
  .services__panelwrap { padding: var(--space-md) var(--space-lg); }
}

/* ============ process ============ */
.process { padding-block: var(--space-2xl); }
.process__head { margin-bottom: var(--space-xl); }
.process__head .section__title { margin-bottom: var(--space-sm); }
.process__lede { color: var(--color-neutral); max-width: 44ch; }

.process__list {
  list-style: none;
  display: grid;
  gap: 0;
  max-width: 56rem;
}
.step {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.step:last-child { border-bottom: 1px solid var(--color-rule); }
.step__num {
  font-family: var(--font-outlier);
  font-size: var(--text-lg);
  color: var(--color-accent);
  line-height: 1.3;
}
.step__body h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.step__body p { color: var(--color-neutral); max-width: 58ch; }

@media (max-width: 40rem) {
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}

/* ============ why ============ */
.why {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-rule);
}
.why__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-2xl);
  max-width: 64rem;
}
.whyrow h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.whyrow p { color: var(--color-neutral); max-width: 48ch; }
.whyrow:nth-child(even) { translate: 0 var(--space-lg); }

@media (max-width: 60rem) {
  .why__rows { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .whyrow:nth-child(even) { translate: none; }
}

/* ============ faq ============ */
.faq { padding-block: var(--space-2xl); }
.faq__list { max-width: 52rem; }
.qa { border-top: 1px solid var(--color-rule); }
.qa:last-child { border-bottom: 1px solid var(--color-rule); }
.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  padding-block: var(--space-md);
  transition: color var(--dur-micro) var(--ease-out);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--color-accent); }
.qa__mark {
  flex: none;
  width: 14px; height: 14px;
  position: relative;
}
.qa__mark::before, .qa__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--color-accent);
  transition: transform var(--dur-short) var(--ease-in-out);
}
.qa__mark::after { transform: rotate(90deg); }
.qa[open] .qa__mark::after { transform: rotate(0deg); }
.qa__wrap { overflow: clip; }
.qa__a {
  color: var(--color-neutral);
  max-width: 62ch;
  padding-bottom: var(--space-md);
}

/* ============ final CTA ============ */
.cta {
  position: relative;
  text-align: center;
  padding-block: var(--space-3xl);
  overflow: clip;
}
.cta__bloom {
  position: absolute;
  left: 50%;
  bottom: -30%;
  translate: -50% 0;
  width: 60vw; height: 40vw;
  min-width: 400px; min-height: 280px;
  border-radius: 50%;
  background: oklch(38% 0.15 320 / 0.3);
  filter: blur(100px);
}
.cta__title {
  position: relative;
  font-size: var(--text-display-s);
  margin-bottom: var(--space-md);
}
.cta__sub {
  position: relative;
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
}
.cta__actions {
  position: relative;
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.cta__meta {
  position: relative;
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral);
}

/* ============ footer ============ */
.foot {
  border-top: 1px solid var(--color-rule);
  padding: var(--space-xl) clamp(1.25rem, 5vw, 5rem) 0;
  overflow: clip;
}
.foot__statement {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
}
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.foot__link {
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-neutral);
  transition: color var(--dur-micro) var(--ease-out);
}
.foot__link:hover { color: var(--color-ink); }
.foot__legal { color: var(--color-neutral); font-size: var(--text-sm); }

.foot__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 14vw, 12rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: oklch(20% 0.03 300);
  text-align: center;
  user-select: none;
  translate: 0 0.08em;
}

/* ============ subpages ============ */
.nav__link[aria-current="page"],
.sheet__link[aria-current="page"] { color: var(--color-ink); }
.nav__link[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 2px;
  background: var(--color-accent);
}

.pagehead {
  position: relative;
  padding-block: calc(var(--space-3xl) + var(--space-lg)) var(--space-xl);
  overflow: clip;
}
.pagehead__bloom {
  position: absolute;
  right: -12vw; top: -20%;
  width: 40vw; height: 40vw;
  min-width: 300px; min-height: 300px;
  border-radius: 50%;
  background: oklch(36% 0.14 320 / 0.28);
  filter: blur(90px);
  pointer-events: none;
}
.pagehead__kicker {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
  margin-bottom: var(--space-sm);
}
.pagehead__title {
  position: relative;
  font-size: var(--text-display-s);
  max-width: 18ch;
  margin-bottom: var(--space-md);
}
.pagehead__lede {
  position: relative;
  font-size: var(--text-md);
  color: var(--color-muted);
  max-width: 52ch;
}

/* service category blocks */
.svc {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl);
  scroll-margin-top: 5.5rem;
}
.svc__intro h2 { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
.svc__intro p { color: var(--color-neutral); max-width: 40ch; }
.svc__note {
  margin-top: var(--space-md);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-accent);
}
.svc__items { list-style: none; }
.svc__items li {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}
.svc__items li:first-child { padding-top: 0; }
.svc__items li:last-child { border-bottom: none; }
.svc__items h3 { font-size: var(--text-md); margin-bottom: var(--space-2xs); }
.svc__items p { color: var(--color-neutral); max-width: 56ch; }
@media (max-width: 60rem) {
  .svc { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

/* checklist (work standards, deliverables) */
.checklist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-xl);
  max-width: 56rem;
}
.checklist li {
  position: relative;
  padding-left: 1.6em;
  color: var(--color-muted);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.6em; height: 0.6em;
  border-radius: 2px;
  background: var(--color-accent);
}
@media (max-width: 40rem) {
  .checklist { grid-template-columns: minmax(0, 1fr); }
}

/* prose blocks (about, articles) */
.prose {
  max-width: 62ch;
  padding-block: var(--space-xl);
}
.prose > * + * { margin-top: var(--space-md); }
.prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-xl);
}
.prose p { color: var(--color-muted); }
.prose strong { color: var(--color-ink); font-weight: 600; }
.prose ul { padding-left: 1.2em; color: var(--color-muted); }
.prose li + li { margin-top: var(--space-xs); }
.prose a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.prose a:hover { color: var(--color-accent); }

.article__meta {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral);
  margin-bottom: var(--space-sm);
}

/* insight cards */
.insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  padding-block: var(--space-xl) var(--space-2xl);
}
.insight {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out);
}
.insight:hover { background: var(--color-paper-3); }
.insight__tag {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.insight h2, .insight h3 { font-size: var(--text-lg); }
.insight p { color: var(--color-neutral); }
.insight__more {
  margin-top: auto;
  padding-top: var(--space-sm);
  color: var(--color-muted);
  font-weight: 600;
}
.insight:hover .insight__more { color: var(--color-ink); }
@media (max-width: 60rem) {
  .insights { grid-template-columns: minmax(0, 1fr); }
}

/* contact page */
.contactgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  max-width: 56rem;
  padding-block: var(--space-lg) var(--space-2xl);
}
.contactcard {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.contactcard h2 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.contactcard p { color: var(--color-neutral); margin-bottom: var(--space-md); max-width: 40ch; }
@media (max-width: 40rem) {
  .contactgrid { grid-template-columns: minmax(0, 1fr); }
}

/* roles (careers) */
.roles { list-style: none; max-width: 56rem; }
.role {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-rule);
}
.role:last-child { border-bottom: 1px solid var(--color-rule); }
.role h3 { font-size: var(--text-md); margin-bottom: var(--space-2xs); }
.role p { color: var(--color-neutral); max-width: 52ch; }
.role__type {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-neutral);
  white-space: nowrap;
}
@media (max-width: 40rem) {
  .role { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}

/* bottom page CTA band */
.pageband {
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-2xl);
  text-align: center;
}
.pageband h2 { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.pageband .btn { margin-inline: var(--space-2xs); }

/* ============ space hero v2 ============ */
.hero--space { min-height: 92svh; }

.hero__stars {
  position: absolute;
  inset: -10%;
  background-repeat: repeat;
  background-size: 720px 720px;
}
.hero__stars--far {
  background-image:
    radial-gradient(1px 1px at 40px 60px,  oklch(90% 0.01 300 / 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 180px 120px, oklch(90% 0.01 300 / 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 320px 40px,  oklch(90% 0.01 300 / 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 480px 200px, oklch(90% 0.01 300 / 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 600px 90px,  oklch(90% 0.01 300 / 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 100px 300px, oklch(90% 0.01 300 / 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 260px 420px, oklch(90% 0.01 300 / 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 520px 380px, oklch(90% 0.01 300 / 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 660px 500px, oklch(90% 0.01 300 / 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 560px,  oklch(90% 0.01 300 / 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 380px 640px, oklch(90% 0.01 300 / 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 700px 260px, oklch(90% 0.01 300 / 0.5) 50%, transparent 51%);
  animation: twinkle 7s ease-in-out infinite alternate;
}
.hero__stars--near {
  background-image:
    radial-gradient(1.5px 1.5px at 120px 200px, oklch(94% 0.01 300 / 0.9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 420px 100px, oklch(80% 0.08 305 / 0.9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 240px 520px, oklch(94% 0.01 300 / 0.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 560px 300px,    oklch(78% 0.1 340 / 0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80px 440px,  oklch(94% 0.01 300 / 0.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 640px 620px,    oklch(94% 0.01 300 / 0.9) 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* Tier-A CSS planet */
.planet {
  position: absolute;
  right: clamp(2rem, 10vw, 12rem);
  top: 16%;
  width: clamp(120px, 16vw, 220px);
  aspect-ratio: 1;
  animation: drift 14s ease-in-out infinite alternate;
}
.planet__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, oklch(55% 0.16 320) 0%, oklch(32% 0.12 300) 55%, oklch(20% 0.06 290) 100%);
  box-shadow: inset -14px -10px 40px oklch(10% 0.02 300 / 0.9);
}
.planet__ring {
  position: absolute;
  inset: 22% -34%;
  border-radius: 50%;
  border: 2px solid oklch(70% 0.12 320 / 0.5);
  border-top-color: transparent;
  rotate: -18deg;
  z-index: 1;
}
.planet__moon {
  position: absolute;
  width: 12%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(80% 0.03 300), oklch(50% 0.03 300));
  right: -12%;
  top: 12%;
  animation: drift 9s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translateY(-8px); }
  to   { transform: translateY(10px); }
}
@media (max-width: 60rem) {
  .planet { top: 8%; right: 6%; width: 100px; opacity: 0.8; }
}

/* hero video (DG-style) — sits over the CSS scene; veil keeps text readable */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    oklch(13% 0.015 300 / 0.6) 0%,
    oklch(13% 0.015 300 / 0.3) 40%,
    oklch(13% 0.015 300 / 0.55) 75%,
    var(--color-paper) 98%);
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

.hero__scrollhint {
  display: inline-flex;
  margin-top: var(--space-xl);
  width: 26px; height: 42px;
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-pill);
  justify-content: center;
  padding-top: 8px;
}
.hero__scrollhint span {
  width: 3px; height: 8px;
  border-radius: 2px;
  background: var(--color-accent);
  animation: scrollhint 1.8s var(--ease-in-out) infinite;
}
@keyframes scrollhint {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ============ stats strip ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  padding-block: var(--space-lg) var(--space-xl);
  scroll-margin-top: 5.5rem;
}
.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--font-outlier);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  color: var(--color-neutral);
  font-size: var(--text-sm);
}
@media (max-width: 40rem) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
}

/* ============ portfolio filter tabs ============ */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.filter__tab {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-neutral);
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: 0.45em 1.1em;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
.filter__tab:hover { color: var(--color-ink); border-color: var(--color-neutral); }
.filter__tab.is-active {
  color: var(--color-paper);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.workcard[hidden] { display: none; }

/* ============ tech + industries chips ============ */
.tech, .logos {
  padding-block: var(--space-lg);
  border-block: 1px solid var(--color-rule);
  text-align: center;
}
.tech__label {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
  margin-bottom: var(--space-md);
}
.tech__chips, .industries__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
}
.tech__chips span, .industries__chips span {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: 0.4em 1em;
  color: var(--color-muted);
  white-space: nowrap;
}
.industries { padding-block: var(--space-2xl); text-align: center; border-top: 1px solid var(--color-rule); }
.industries .section__title { margin-inline: auto; }

/* ============ testimonials ============ */
.testis {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-rule);
}
.testis__nav { display: flex; gap: var(--space-xs); }
.testis__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-rule);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-md);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.testis__btn:hover { border-color: var(--color-neutral); background: var(--color-paper-2); }
.testis__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: var(--space-2xs);
}
.testis__track::-webkit-scrollbar { display: none; }
.testi {
  flex: 0 0 min(34rem, 88%);
  scroll-snap-align: start;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.testi__quote {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: var(--space-md);
}
.testi__who {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

/* ============ client logo slots ============ */
.logos__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}
.logos__slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8.5rem; height: 3.25rem;
  border: 1px dashed var(--color-rule);
  border-radius: var(--radius-md);
  color: var(--color-rule);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============ mega footer ============ */
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  padding-block: var(--space-lg) var(--space-xl);
}
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.foot__brandline { font-family: var(--font-display); font-size: var(--text-lg); }
.foot__blurb { color: var(--color-neutral); max-width: 30ch; }
.foot__colhead {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral);
  margin-bottom: var(--space-2xs);
}
@media (max-width: 60rem) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  .foot__col--brand { grid-column: span 2; }
}

/* ============ floats: WhatsApp + quote tab ============ */
.wafloat {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-raised);
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: oklch(62% 0.17 150);
  color: oklch(15% 0.02 150);
  text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-out);
}
.wafloat:hover { transform: translateY(-2px); }
.wafloat svg { width: 30px; height: 30px; }

.quotetab {
  position: fixed;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  z-index: var(--z-raised);
  writing-mode: vertical-rl;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-ink);
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
  color: var(--color-paper);
  padding: 1.1em 0.55em;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.quotetab:hover { filter: brightness(1.1); }
@media (max-width: 60rem) { .quotetab { display: none; } }

/* ============ services mega menu ============ */
.mega {
  position: fixed;
  left: 50%;
  top: 4.6rem;
  translate: -50% 0;
  z-index: var(--z-nav);
  width: min(56rem, calc(100vw - 2rem));
  background: oklch(16% 0.017 300 / 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.mega.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mega__col { display: flex; flex-direction: column; gap: var(--space-2xs); }
.mega__head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-ink);
  margin-bottom: var(--space-2xs);
  text-decoration: none;
}
.mega__head:hover { color: var(--color-accent); }
.mega__link {
  color: var(--color-neutral);
  text-decoration: none;
  font-size: var(--text-sm);
  padding-block: 0.15em;
}
.mega__link:hover { color: var(--color-ink); }
@media (max-width: 60rem) { .mega { display: none; } }

/* ============ reveal on scroll (one-shot) ============ */
.rv { opacity: 0; transform: translateY(12px); }
.rv.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
  .marquee__track { animation: none; transform: none; }
}