/* The Vanta House — static site */
:root {
  --paper: #eaeaea;
  --ink: #0a0a10;
  --navy: #0b1020;
  --blue: #2f7be0;
  --night: #0d0d10;
  --f-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Fira Sans", "Inter", system-ui, sans-serif;
  --f-label: "Montserrat", "Inter", system-ui, sans-serif;
  --f-mono: "Inconsolata", "DejaVu Sans Mono", ui-monospace, Menlo, monospace;
  --bar-h: 58px;
  --pad: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-body);
  overflow-x: hidden;
}
/* Page tint + paper grain live on two fixed, GPU-composited layers behind the content.
   Previously they were the body background: every tint change repainted the whole
   (very tall) page through an SVG noise filter, and scrolling repainted it again. */
body::before, body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  will-change: transform; transform: translateZ(0);
}
/* the page tint shifts from section to section (set from script.js) */
body::before { background-color: var(--bg, var(--paper)); transition: background-color .9s ease; }
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Header ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(16px, 3vw, 40px);
  transition: background .25s, box-shadow .25s;
}
/* no backdrop-filter: re-blurring everything under the header on every scroll frame was a major cost */
.bar.is-stuck, .bar.is-open { background: rgba(234, 234, 234, .96); box-shadow: 0 1px 0 rgba(10, 10, 16, .12); }
.bar.is-open { background: var(--paper); }
.bar__logo img { height: 22px; width: auto; display: block; }
.bar__ig { display: none; font: 500 12.5px/1 var(--f-label); text-decoration: none; padding: 8px 0; border-bottom: 1.5px solid transparent; }
.bar__ig:hover { border-color: var(--ink); }

/* mobile menu */
.bar__toggle { display: flex; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; margin-right: -10px; padding: 0 10px; background: none; border: 0; cursor: pointer; }
.bar__toggle span { display: block; height: 2px; background: var(--ink); transition: transform .25s; }
.bar.is-open .bar__toggle span:first-child { transform: translateY(4.5px) rotate(45deg); }
.bar.is-open .bar__toggle span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.bar__nav {
  display: none; position: fixed; top: var(--bar-h); left: 0; right: 0; flex-direction: column;
  padding: 6px var(--pad) 28px; background: var(--paper); border-bottom: 2px solid var(--ink);
  max-height: calc(100vh - var(--bar-h)); overflow: auto;
}
.bar__nav.is-open { display: flex; }
.bar__nav a { text-decoration: none; padding: 15px 0; border-bottom: 1px solid rgba(10, 10, 16, .14); font: 500 clamp(22px, 6.4vw, 30px)/1 var(--f-display); letter-spacing: -.03em; }
.bar__nav a[aria-current="page"] { color: var(--blue); }
.bar__nav .nav-ig { border: 0; padding-top: 22px; font: 400 14px/1 var(--f-mono); letter-spacing: 0; opacity: .7; }
@media (min-width: 1100px) {
  .bar__toggle { display: none; }
  .bar__ig { display: block; }
  .bar__nav { display: flex; position: static; flex-direction: row; gap: clamp(14px, 1.9vw, 30px); padding: 0; background: none; border: 0; max-height: none; overflow: visible; }
  .bar__nav a { padding: 8px 0; border-bottom: 1.5px solid transparent; font: 500 13px/1 var(--f-label); letter-spacing: .01em; transition: border-color .2s; }
  .bar__nav a:hover, .bar__nav a[aria-current="page"] { color: inherit; border-color: var(--ink); }
  .bar__nav .nav-ig { display: none; }
}

/* ---------- Selection box (headings) ---------- */
.select { position: relative; display: inline-block; max-width: 100%; margin: 0; border: 2px solid var(--navy); }
.select--thin { border-width: 1.5px; }
.select i {
  position: absolute; width: 11px; height: 11px; background: #fff; border: 1.8px solid var(--navy);
  transform: translate(-50%, -50%);
}
.select .tl { left: -1px; top: -1px; } .select .tm { left: 50%; top: -1px; } .select .tr { left: calc(100% + 1px); top: -1px; }
.select .ml { left: -1px; top: 50%; } .select .mr { left: calc(100% + 1px); top: 50%; }
.select .bl { left: -1px; top: calc(100% + 1px); } .select .bm { left: 50%; top: calc(100% + 1px); } .select .br { left: calc(100% + 1px); top: calc(100% + 1px); }
.select__text {
  display: block; padding: .04em .42em .12em;
  font: 500 clamp(34px, 7.6vw, 92px)/1.08 var(--f-display); letter-spacing: -.035em; text-wrap: balance;
}
.select--page .select__text { font-size: clamp(30px, 6.4vw, 76px); }
.select--sm .select__text { font-size: clamp(26px, 4.4vw, 56px); }
/* brand logo used in place of a text heading (Bhaag Bros) */
.select--logo .select__text { padding: .32em .5em; line-height: 0; }
.brand-logo { display: block; width: clamp(220px, 52vw, 620px); height: auto; }
.tree__logo { display: block; height: clamp(20px, 2.6vw, 30px); width: auto; }

.lead { margin: clamp(18px, 3vw, 30px) auto 0; max-width: 30ch; font: 300 clamp(18px, 2.4vw, 28px)/1.3 var(--f-body); text-wrap: balance; }
.crumb { margin: 0 0 clamp(16px, 2.6vw, 26px); font: 400 clamp(12px, 1.5vw, 15px)/1 var(--f-mono); letter-spacing: .02em; opacity: .75; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.hero {
  padding: calc(var(--bar-h) + clamp(28px, 6vw, 72px)) var(--pad) clamp(40px, 7vw, 90px);
  text-align: center;
}
.hero__title { margin: 0; display: flex; flex-direction: column; align-items: center; translate: 0 calc(var(--hp, 0) * 70px); opacity: calc(1 - var(--hp, 0) * .85); }
.hero__script { width: clamp(230px, 56vw, 700px); height: auto; translate: calc(var(--mx, 0) * -8px) calc(var(--my, 0) * -5px); }
.hero__bold {
  font: 800 clamp(34px, 8.6vw, 112px)/1 var(--f-display); letter-spacing: -.025em;
  text-shadow: 0 .035em .06em rgba(0, 0, 0, .22); margin-top: -.02em;
  translate: calc(var(--mx, 0) * 6px) calc(var(--my, 0) * 4px);
}
.handle-wrap { position: relative; display: inline-block; margin: clamp(28px, 5vw, 56px) auto clamp(28px, 5vw, 64px); }
.handle { padding: .7em 1.9em; font: 400 clamp(15px, 2.1vw, 24px)/1 var(--f-label); text-decoration: none; background: transparent; }
.handle:hover { background: rgba(255, 255, 255, .55); }
.cursor { width: 28px; height: auto; aspect-ratio: 28/38; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); pointer-events: none; }
.cursor--hero { position: absolute; right: -34px; bottom: -34px; width: clamp(22px, 2.6vw, 32px); }

.hero__stage { container-type: inline-size; width: min(100%, 1000px); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 32px; text-align: left; }
@media (min-width: 720px) {
  .hero__stage { grid-template-columns: 74fr 17fr; column-gap: 9%; align-items: start; }
}

.mac {
  margin: 0; background: #fff; border: 2.5px solid var(--ink);
  border-radius: clamp(26px, 5.6cqw, 56px); overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .35);
  translate: calc(var(--mx, 0) * -4px) calc(var(--my, 0) * -3px);
}
.mac__bar { display: flex; align-items: center; gap: clamp(8px, 1.5cqw, 16px); padding: clamp(10px, 2.2cqw, 22px) clamp(14px, 2.8cqw, 30px); border-bottom: 2.5px solid var(--ink); }
.mac__dots { display: flex; gap: clamp(5px, 1cqw, 10px); }
.mac__dots i { width: clamp(15px, 2.9cqw, 30px); aspect-ratio: 1; border: 2.5px solid var(--ink); border-radius: 50%; }
.mac__side { width: clamp(26px, 4.8cqw, 48px); height: auto; aspect-ratio: 56/48; margin-left: clamp(4px, 1cqw, 10px); }
.mac__caret { width: clamp(10px, 1.8cqw, 18px); height: auto; aspect-ratio: 24/16; }
.mac__name { font: 400 clamp(14px, 3.2cqw, 32px)/1 var(--f-mono); letter-spacing: .02em; margin-left: clamp(2px, 1cqw, 10px); }
.mac__tools { margin-left: auto; display: flex; gap: clamp(8px, 1.6cqw, 18px); }
.mac__tools svg { width: clamp(22px, 4.2cqw, 44px); height: auto; aspect-ratio: 1; }
.mac__body { padding: clamp(6px, 1.2cqw, 12px); line-height: 0; }
.mac__body img { width: 100%; display: block; border-radius: clamp(14px, 3.4cqw, 34px); }

/* hero folders */
.folders { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 4%; }
.folders .folder { flex: 0 0 29%; }
@media (min-width: 720px) {
  .folders { flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-self: stretch; gap: 0; margin-top: -3%; }
  .folders .folder { flex: 0 0 auto; width: 100%; }
}
.folders .folder:nth-child(1) { --d: 14; } .folders .folder:nth-child(2) { --d: -9; } .folders .folder:nth-child(3) { --d: 18; }
.folders .folder:nth-child(4) { --d: -12; } .folders .folder:nth-child(5) { --d: 10; }
.folders .folder { translate: calc(var(--mx, 0) * var(--d, 0) * 1px) calc(var(--my, 0) * var(--d, 0) * .6px + var(--hp, 0) * var(--d, 0) * -9px); }

.folder {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .55em;
  text-decoration: none; text-align: center; font: 400 clamp(11px, 1.55cqw, 16px)/1.2 var(--f-label);
}
.folder__icon { width: 100%; height: auto; aspect-ratio: 236/196; transition: transform .25s cubic-bezier(.2, .7, .2, 1), filter .25s; }
.folder__label { padding: .18em .6em; border-radius: .45em; transition: background .2s, color .2s; }
.folders .folder:hover .folder__icon, .folders .folder:focus-visible .folder__icon { transform: translateY(-5px) rotate(-2deg); filter: drop-shadow(0 10px 12px rgba(47, 123, 224, .3)); }
.folders .folder:hover .folder__label, .folders .folder:focus-visible .folder__label { background: var(--blue); color: #fff; }
.folder .cursor { position: absolute; right: -4%; bottom: -14%; width: clamp(16px, 2.6cqw, 28px); }
.folders .folder .cursor { opacity: 0; transform: translate(10px, 10px); transition: opacity .2s, transform .25s; }
.folders .folder:hover .cursor, .folders .folder:focus-visible .cursor { opacity: 1; transform: none; }

.hint { display: inline-block; margin-top: clamp(24px, 4vw, 48px); width: 40px; color: var(--ink); animation: bob 2.2s ease-in-out infinite; }
.hint svg { width: 100%; height: auto; aspect-ratio: 2/1; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* hero entrance (only with JS, never for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__script { animation: rise 1s cubic-bezier(.2, .7, .2, 1) .05s backwards; }
  .js .hero__bold { animation: rise 1s cubic-bezier(.2, .7, .2, 1) .2s backwards; }
  .js .handle-wrap { animation: rise .9s cubic-bezier(.2, .7, .2, 1) .4s backwards; }
  .js .mac { animation: rise 1s cubic-bezier(.2, .7, .2, 1) .5s backwards; }
  .js .mac__body img { animation: iris 1.5s cubic-bezier(.65, 0, .25, 1) .7s backwards; }
  .js .folders .folder { animation: drop .9s cubic-bezier(.3, 1.4, .5, 1) backwards; }
  .js .folders .folder:nth-child(1) { animation-delay: .8s; } .js .folders .folder:nth-child(2) { animation-delay: .92s; }
  .js .folders .folder:nth-child(3) { animation-delay: 1.04s; } .js .folders .folder:nth-child(4) { animation-delay: 1.16s; }
  .js .folders .folder:nth-child(5) { animation-delay: 1.28s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(34px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-90px) rotate(-10deg); } }
@keyframes iris { from { clip-path: circle(7% at 50% 52%); } to { clip-path: circle(80% at 50% 52%); } }

/* ---------- Marquee band (scroll-linked) ---------- */
.marquee { overflow: hidden; border-block: 2px solid var(--navy); padding: clamp(14px, 2.6vw, 30px) 0; background: rgba(255, 255, 255, .25); }
.marquee__track { display: flex; width: max-content; translate: var(--mq, 0px) 0; will-change: translate; }
.marquee__item { display: inline-flex; align-items: center; gap: clamp(18px, 3vw, 44px); padding-right: clamp(18px, 3vw, 44px); white-space: nowrap; font: 800 clamp(40px, 8vw, 112px)/1 var(--f-display); letter-spacing: -.04em; }
.marquee__item:nth-child(even) { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.marquee__folder { width: clamp(46px, 7vw, 100px); height: auto; aspect-ratio: 236/196; }

/* ---------- Windows ---------- */
.win { background: #fff; border: 2px solid var(--ink); }
.wbtns, .fbtns { display: flex; align-items: center; }
.wbtns { gap: clamp(2px, .5cqw, 6px); }
.wbtns svg { width: clamp(20px, 3cqw, 32px); height: auto; aspect-ratio: 1; }
.fbtns { gap: clamp(8px, 1.8cqw, 22px); }
.fbtns svg { width: clamp(14px, 2.4cqw, 24px); height: auto; aspect-ratio: 1; }

.win--text { display: flex; flex-direction: column; }
.win__bar { display: flex; justify-content: flex-end; align-items: center; height: clamp(34px, 6cqw, 62px); padding: 0 clamp(8px, 1cqw, 14px); border-bottom: 2px solid var(--ink); box-shadow: inset 0 -5px 0 #fff, inset 0 -7px 0 rgba(10, 10, 16, .5); }
.win__frame {
  position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr clamp(12px, 1.4cqw, 20px);
  margin: clamp(6px, 1.3cqw, 14px); border: 2px solid var(--ink);
}
.win__text { padding: clamp(18px, 3.4cqw, 42px) clamp(18px, 3.1cqw, 40px) clamp(52px, 6cqw, 72px); font: 400 clamp(16px, 2.45cqw, 26px)/1.32 var(--f-body); }
.win__text p { margin: 0 0 .42em; }
.win__text p:last-child { margin-bottom: 0; }
.win__scroll { position: relative; border-left: 2px solid var(--ink); }
.win__scroll i { position: absolute; left: -2px; right: -2px; top: 3%; height: 38%; background: #fff; border: 2px solid var(--ink); border-radius: 999px; }
.win__chev { position: absolute; right: clamp(24px, 3.4cqw, 44px); bottom: clamp(10px, 1.8cqw, 22px); width: clamp(22px, 3.4cqw, 38px); height: auto; aspect-ratio: 2/1; }
.win__foot { height: clamp(22px, 5.4cqw, 56px); border-top: 2px solid var(--ink); }

.win--viewer { margin: 0; display: flex; flex-direction: column; }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; height: clamp(30px, 4.6cqw, 52px); padding: 0 clamp(10px, 1.8cqw, 20px); border-bottom: 2px solid var(--ink); font: 400 clamp(13px, 2.1cqw, 23px)/1 var(--f-mono); letter-spacing: .02em; }
.viewer__frame { margin: clamp(8px, 1.8cqw, 22px) 8.4% 0; overflow: hidden; background: #0d0d10; line-height: 0; }
.viewer__frame > img { width: 100%; height: auto; display: block; transform-origin: 50% 50%; transition: transform .35s cubic-bezier(.2, .7, .2, 1); cursor: zoom-in; }
.viewer__tools { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.9cqw, 24px); padding: clamp(10px, 1.8cqw, 22px) 0 clamp(12px, 2.2cqw, 28px); }
.tool { appearance: none; background: none; border: 0; padding: 0; margin: 0; color: var(--ink); cursor: pointer; width: clamp(22px, 3.4cqw, 36px); aspect-ratio: 1; border-radius: 50%; transition: transform .15s, opacity .15s; }
.tool svg { width: 100%; height: 100%; }
.tool--circle { width: clamp(34px, 5.8cqw, 62px); margin: 0 clamp(2px, .8cqw, 10px); }
.tool:hover { transform: scale(1.1); }
.tool:active { transform: scale(.94); }
.flip { transform: scaleX(-1); }
.tool:hover .flip { transform: scaleX(-1); }

/* gallery slider (sub-pages) */
.slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: -3px; }
.slider__track::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; aspect-ratio: 3 / 2; scroll-snap-align: start; overflow: hidden; line-height: 1.3; }
.slide img.photo, .slide > img:not(.slide__logo) { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(120% 90% at 50% 40%, #1b1b21, #0b0b0e); color: #a4a4ae; }
.slide__logo { width: min(34%, 190px); height: auto; filter: invert(1); opacity: .5; }
.slide__logo--wide { width: min(58%, 340px); opacity: .7; }
.slide--empty span { font: 400 clamp(12px, 1.7cqw, 16px)/1 var(--f-mono); letter-spacing: .06em; text-transform: lowercase; }
.dots { display: flex; gap: 10px; align-items: center; }
.dot { appearance: none; width: 11px; height: 11px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer; transition: background .2s, transform .2s; }
.dot[aria-current="true"] { background: var(--ink); transform: scale(1.15); }
.gallery.is-single .gallery__tools { display: none; }

/* ---------- Service sections (mobile-first: stacked) ---------- */
.service, .branches { position: relative; overflow: hidden; padding: clamp(44px, 8vw, 100px) var(--pad); scroll-margin-top: calc(var(--bar-h) - 8px); }
.service > *:not(.ghost), .branches > * { position: relative; z-index: 1; }
.service__head { text-align: center; margin-bottom: clamp(28px, 5vw, 64px); }
.service--sub { padding-top: calc(var(--bar-h) + clamp(40px, 7vw, 90px)); }

/* giant outlined word that slides behind the windows as you scroll */
.ghost {
  position: absolute; z-index: 0; left: 0; top: clamp(90px, 16vw, 240px); white-space: nowrap; pointer-events: none; user-select: none;
  font: 800 clamp(120px, 24vw, 360px)/.9 var(--f-display); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px rgba(10, 10, 16, .17);
  translate: calc(var(--p, .5) * -34vw + 6vw) 0;
  will-change: translate;
}
.service--even .ghost { left: auto; right: 0; translate: calc(var(--p, .5) * 34vw - 6vw) 0; }

.stage { container-type: inline-size; width: min(100%, 980px); margin: 0 auto; display: flex; flex-direction: column; }
.folder--deco { width: 96px; margin-bottom: 14px; font-size: 12px; }
.service--odd .folder--deco { align-self: flex-start; margin-left: 4%; }
.service--even .folder--deco { align-self: flex-end; margin-right: 4%; }
.service .win--text { width: 100%; }
.service .win__text { font-size: 17px; }
.service .win--viewer { width: 88%; margin-top: -30px; position: relative; z-index: 2; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .4); }
.service--odd .win--viewer { align-self: flex-start; }
.service--even .win--viewer { align-self: flex-end; }

/* ---------- Service sections (desktop: the posts' composition) ---------- */
@media (min-width: 720px) {
  .stage { display: block; position: relative; }
  .service--odd .stage { aspect-ratio: 100 / 87; }
  .service--even .stage { aspect-ratio: 100 / 108; }
  .stage > * { position: absolute; margin: 0; }
  .folder--deco { width: 17%; margin: 0; font-size: clamp(11px, 1.6cqw, 17px); }
  .service--odd .folder--deco { left: 8%; top: 0; align-self: auto; }
  .service--even .folder--deco { right: 8%; top: 0; align-self: auto; }

  .service .win--text { width: 60%; top: 7%; aspect-ratio: 1 / 1.06; }
  .service--even .win--text { left: 0; top: 5.5%; width: 67%; aspect-ratio: 1 / 1; }
  .service--odd .win--text { right: 0; }
  .service .win__text { font-size: clamp(15px, 2.3cqw, 25px); }
  .service--even .win__text { font-size: clamp(16px, 2.3cqw, 24px); }

  .service .win--viewer { position: absolute; width: var(--vw); margin: 0; bottom: 0; z-index: 2; box-shadow: none; }
  .service--odd .win--viewer { left: 0; }
  .service--even .win--viewer { right: 0; }
  .service--even .win--text { z-index: 1; }

  /* sub-pages: tuned heights because their copy is shorter */
  .service--sub .stage { aspect-ratio: 100 / var(--sh, 108); }
  .service--sub .win--text { aspect-ratio: 1 / var(--th, 1); }
}

/* scroll-linked depth: each layer drifts at its own speed (desktop, motion allowed) */
@media (min-width: 720px) and (prefers-reduced-motion: no-preference) {
  .js .service .folder--deco { translate: 0 calc((var(--p, .5) - .5) * -130px); rotate: calc((var(--p, .5) - .5) * 18deg); }
  .js .service .win--text { translate: 0 calc((var(--p, .5) - .5) * -24px); }
  .js .service .win--viewer { translate: 0 calc((var(--p, .5) - .5) * -60px); }
  .js .viewer__frame > img { scale: 1.06; translate: 0 calc((var(--p, .5) - .5) * -5%); }
}

/* ---------- Branches (tree) ---------- */
.branches__win { width: min(100%, 780px); margin: 0 auto; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35); }
.branches__win .viewer__bar { height: 46px; font-size: 18px; }
.branches__win .fbtns svg { width: 20px; }
.branches__body { padding: clamp(18px, 3.4vw, 40px) clamp(14px, 3.4vw, 40px) clamp(14px, 2.6vw, 30px); }
.tree__root { margin: 0 0 4px; font: 400 clamp(15px, 2vw, 19px)/1 var(--f-mono); }
.tree { list-style: none; margin: 0; padding: 0; }
.tree li { position: relative; padding-left: 34px; }
.tree li::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; border-left: 2px solid var(--ink); }
.tree li:last-child::before { bottom: 50%; }
.tree li::after { content: ""; position: absolute; left: 10px; top: 50%; width: 18px; border-top: 2px solid var(--ink); }
.tree a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(14px, 2vw, 22px) 14px; text-decoration: none; border-radius: 10px; transition: background .2s; }
.tree a:hover, .tree a:focus-visible { background: rgba(47, 123, 224, .1); }
.tree__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tree strong { font: 500 clamp(20px, 2.8vw, 32px)/1.05 var(--f-display); letter-spacing: -.035em; }
.tree__text span { font: 300 clamp(14px, 1.6vw, 17px)/1.3 var(--f-body); opacity: .8; }
.tree a svg { flex: none; width: 26px; height: 26px; transition: transform .2s; }
.tree a:hover svg { transform: translateX(6px); }

/* ---------- Cards (sub-pages) ---------- */
.spaces { position: relative; overflow: hidden; padding: clamp(24px, 5vw, 60px) var(--pad) clamp(40px, 7vw, 90px); }
.cards { width: min(100%, 980px); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.6vw, 30px); container-type: inline-size; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(var(--cols, 3), 1fr); } }
.card { box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .35); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .4); }
.card .viewer__bar { height: 40px; font-size: 15px; }
.card .fbtns svg { width: 16px; }
.card__body { padding: clamp(20px, 2.6vw, 30px); min-height: 150px; }
.card h3 { margin: 0 0 12px; font: 500 clamp(22px, 2.6vw, 30px)/1.08 var(--f-display); letter-spacing: -.035em; }
.card p { margin: 0; font: 400 clamp(16px, 1.8vw, 18px)/1.4 var(--f-body); }
.card .tag { display: inline-block; margin-top: 4px; padding: .35em .8em; border: 1.5px solid var(--ink); border-radius: 999px; font: 400 13px/1 var(--f-mono); letter-spacing: .04em; }
.card h3 + .tag { margin-top: 0; }

/* ---------- Finale: dark sheet with CTA + giant wordmark ---------- */
.finale { position: relative; margin-top: clamp(40px, 7vw, 90px); background: var(--night); color: #eaeaea; border-radius: clamp(28px, 6vw, 80px) clamp(28px, 6vw, 80px) 0 0; overflow: hidden; }
.cta { padding: clamp(56px, 9vw, 120px) var(--pad) clamp(24px, 4vw, 48px); display: flex; justify-content: center; scroll-margin-top: var(--bar-h); }
.cta__win { width: min(100%, 780px); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.cta__win .viewer__bar { height: 46px; font-size: 18px; }
.cta__win .fbtns svg { width: 20px; }
.cta__body { padding: clamp(28px, 5vw, 60px); }
.cta__body h2 { margin: 0; font: 500 clamp(28px, 4.6vw, 52px)/1.06 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.btn {
  display: inline-flex; align-items: center; gap: .6em; margin-top: clamp(24px, 4vw, 40px); padding: .95em 1.5em;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff;
  font: 500 clamp(13px, 1.7vw, 15px)/1 var(--f-label); text-decoration: none; transition: background .2s, color .2s, transform .2s;
}
.btn svg { width: 1.3em; height: 1.3em; transition: transform .2s; }
.btn:hover { background: #fff; color: var(--ink); }
.btn:hover svg { transform: translateX(4px); }
.cta__handle { margin: 18px 0 0; font: 400 13px/1 var(--f-mono); letter-spacing: .04em; opacity: .7; }

.foot { padding: clamp(24px, 4vw, 48px) var(--pad) clamp(28px, 4vw, 44px); text-align: center; }
.foot__mark { display: block; width: min(100%, 1300px); margin: 0 auto; }
.foot__mark img { width: 100%; height: auto; display: block; filter: invert(1); opacity: .94; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(16px, 2.4vw, 32px); margin-top: clamp(24px, 4vw, 44px); font: 500 13px/1.2 var(--f-label); }
.foot__links a, .foot p a { text-decoration: none; opacity: .8; }
.foot__links a:hover, .foot p a:hover { opacity: 1; text-decoration: underline; }
.foot p { margin: 22px 0 0; font: 400 12.5px/1.4 var(--f-label); opacity: .65; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.service .cursor { animation: tap 2.4s ease-in-out infinite; }
@keyframes tap { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(-4px, -4px); } 55% { transform: translate(-4px, -4px) scale(.92); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hint, .service .cursor { animation: none; }
  .viewer__frame > img, .folder__icon, .card { transition: none; }
  .ghost { translate: none; }
}