@font-face {
  font-family:Barlow Condensed;
  src:url('assets/barlow-condensed-semibold.ttf') format('truetype');
  font-style:normal;
  font-weight:600;
  font-display:swap
}
:root {
  --bg:#101112;
  --paper:#f3f1eb;
  --muted:#b2b2af;
  --line:#343536;
  --accent:#ff6b43;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:95px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img {
  max-width:100%;
  display:block
}
p {
  line-height:1.7
}
h1,h2,h3,h4,p {
  margin-top:0
}
h1,h2,h3,h4 {
  font-weight:600
}
h1,h2,h3 {
  font-family:var(--display)
}
a,button {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px
}
.wrap {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto
}
.eyebrow {
  font-size:11px;
  font-weight:650;
  letter-spacing:2px;
  line-height:1.5;
  text-transform:uppercase
}
.skip-link {
  position:fixed;
  z-index:100;
  top:15px;
  left:20px;
  background:var(--paper);
  color:var(--bg);
  padding:15px;
  clip-path:inset(50%);
  width:1px;
  height:1px;
  overflow:hidden
}
.skip-link:focus {
  clip-path:none;
  width:auto;
  height:auto;
  overflow:visible
}
.site-header {
  height:90px;
  background:var(--bg);
  border-bottom:1px solid var(--line)
}
.header-inner {
  height:100%;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.brand {
  display:flex;
  align-items:center;
  gap:30px
}
.brand img {
  width:167px;
  height:38px;
  object-fit:contain
}
.brand-label {
  font-size:9px;
  line-height:1.5;
  letter-spacing:1.5px;
  color:var(--muted);
  max-width:100px;
  padding-left:25px;
  border-left:1px solid var(--line)
}
nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:13px;
  font-weight:500
}
nav a {
  transition:color .2s
}
nav a:hover {
  color:var(--accent)
}
.nav-contact {
  border:1px solid #656563;
  padding:12px 18px
}
.nav-contact span {
  margin-left:17px;
  font-size:18px
}
.menu-toggle {
  display:none
}
.hero {
  min-height:690px;
  height:calc(100svh - 165px);
  max-height:870px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#1d1917
}
.hero-art,.hero-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% center;
  z-index:-2
}
.hero-shade {
  z-index:-1;
  background:linear-gradient(90deg,rgba(10,11,12,.77) 0%,rgba(10,11,12,.38) 43%,rgba(10,11,12,.01) 72%),linear-gradient(0deg,rgba(10,11,12,.66),transparent 24%)
}
.hero-inner {
  height:100%;
  position:relative;
  padding-top:90px;
  padding-bottom:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start
}
.hero .eyebrow {
  margin-bottom:30px;
  color:#ece4d7;
  font-size:10px
}
.signal-dot {
  width:7px;
  height:7px;
  background:var(--accent);
  display:inline-block;
  margin-right:9px;
  border-radius:50%
}
h1 {
  font-size:clamp(80px,8vw,120px);
  line-height:.94;
  letter-spacing:-1.7px;
  margin-bottom:29px
}
h1 span {
  color:var(--accent)
}
.hero-description {
  font-size:16px;
  color:#e0ddd6;
  max-width:540px;
  line-height:1.8;
  margin-bottom:34px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:18px 22px;
  font-size:13px;
  font-weight:650;
  transition:background .2s,transform .2s
}
.button span {
  font-size:22px;
  line-height:1
}
.button-primary {
  color:#101112;
  background:var(--accent)
}
.button-primary:hover {
  background:#ff8968;
  transform:translateY(-2px)
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:22px;
  font-size:13px;
  font-weight:600
}
.text-link span {
  font-size:21px;
  line-height:1;
  color:var(--accent);
  transition:transform .2s
}
.text-link:hover span {
  transform:translate(3px,-2px)
}
.hero-feature {
  position:absolute;
  right:0;
  bottom:45px;
  padding-top:14px;
  border-top:1px solid #ffffff66;
  min-width:280px
}
.feature-kicker {
  display:block;
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:8px;
  color:#d4cec5
}
.feature-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:17px;
  font-weight:600
}
.feature-title span {
  color:var(--accent);
  font-size:25px;
  margin-left:40px
}
.hero-index {
  position:absolute;
  left:30px;
  bottom:46px;
  font-size:9px;
  writing-mode:vertical-rl;
  letter-spacing:2px;
  color:#aaa59f
}
.platform-strip {
  border-bottom:1px solid var(--line);
  background:#171819
}
.platform-strip>.wrap {
  min-height:70px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  font-weight:600;
  letter-spacing:1.5px;
  color:#a8a8a5
}
.platform-strip div div {
  display:flex;
  gap:32px;
  align-items:center;
  font-size:12px;
  color:var(--paper);
  letter-spacing:0
}
.platform-strip i {
  font-style:normal;
  color:var(--accent)
}
.games-section {
  padding-top:108px;
  padding-bottom:110px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:50px;
  gap:30px
}
.section-heading .eyebrow,.studio-section .eyebrow,.contact-section .eyebrow {
  color:var(--accent);
  margin-bottom:22px
}
h2 {
  font-size:72px;
  line-height:1;
  letter-spacing:-.5px;
  margin-bottom:0
}
.section-heading>p {
  font-size:14px;
  color:var(--muted);
  margin-bottom:5px
}
.game-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px
}
.game-card {
  min-width:0
}
.game-art-link {
  display:block;
  overflow:hidden;
  position:relative;
  aspect-ratio:2796/1290;
  background:#202126
}
.game-art-link>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s
}
.game-art-link:hover>img {
  transform:scale(1.025)
}
.image-tag {
  position:absolute;
  top:20px;
  left:20px;
  background:var(--paper);
  color:var(--bg);
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  padding:9px 12px
}
.image-arrow {
  position:absolute;
  bottom:20px;
  right:20px;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  background:var(--bg);
  font-size:25px;
  border:1px solid #ffffff55
}
.game-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:9px;
  font-weight:600;
  letter-spacing:1.1px;
  color:#aaa9a6;
  margin-top:24px;
  margin-bottom:18px
}
.game-meta>span:first-child {
  color:var(--accent)
}
.game-card h3 {
  font-size:47px;
  line-height:1;
  margin-bottom:20px
}
.game-subtitle {
  display:block;
  font-family:var(--body);
  font-size:13px;
  letter-spacing:.4px;
  font-weight:500;
  margin-top:9px;
  color:#c3c2bc
}
.game-card>p {
  font-size:14px;
  color:var(--muted);
  max-width:520px;
  min-height:72px;
  margin-bottom:26px
}
.game-links {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid var(--line);
  padding-top:19px
}
.store-links {
  display:flex;
  gap:17px;
  font-size:11px;
  color:#c9c9c4
}
.store-links a:hover,.small-link:hover {
  color:var(--accent)
}
.platform-note {
  font-size:10px;
  color:#8f908d
}
.spectral-card {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:70px;
  border:1px solid var(--line);
  background:#17191c;
  min-height:555px
}
.spectral-visual {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#080a15;
  min-height:555px
}
.spectral-backdrop,.spectral-overlay {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2
}
.spectral-overlay {
  z-index:-1;
  background:linear-gradient(180deg,rgba(4,7,16,.8),rgba(4,7,16,.85))
}
.deception-logo {
  position:absolute;
  width:74%;
  top:33px;
  left:13%;
  height:auto;
  object-fit:contain
}
.phone-screen {
  position:absolute;
  border:6px solid #05070b;
  border-radius:28px;
  box-shadow:0 12px 35px #0008;
  width:180px;
  height:auto;
  top:185px
}
.phone-back {
  left:20%;
  transform:rotate(-9deg);
  top:207px
}
.phone-front {
  right:17%;
  transform:rotate(7deg)
}
.visual-caption {
  position:absolute;
  bottom:23px;
  left:0;
  width:100%;
  text-align:center;
  font-size:8px;
  letter-spacing:1.6px;
  color:#b2bdd9;
  background:#080a1599;
  padding:15px 0;
  z-index:2
}
.spectral-content {
  padding:35px 42px
}
.spectral-content .game-meta {
  margin-top:0;
  margin-bottom:25px
}
.spectral-content h3 {
  font-size:49px;
  line-height:1;
  margin-bottom:10px
}
.spectral-intro {
  color:#c3c2bc;
  font-size:15px;
  margin-bottom:30px
}
.experience h4 {
  font-size:17px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:9px
}
.experience h4 span {
  font-size:8px;
  font-weight:500;
  letter-spacing:1px;
  color:#919aaa
}
.experience p {
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:15px
}
.small-link {
  display:block;
  font-size:10px;
  color:#aaa;
  margin-top:14px
}
.browser-experience {
  margin-top:27px;
  border-top:1px solid var(--line);
  padding-top:23px
}
.studio-section {
  background:var(--paper);
  color:var(--bg);
  padding:100px 0
}
.studio-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}
.studio-section h2 {
  font-size:72px
}
.studio-section .eyebrow {
  color:#a7442e
}
.studio-mark {
  font-family:var(--display);
  font-size:110px;
  line-height:1;
  display:inline-flex;
  align-items:flex-start;
  gap:20px;
  margin-top:55px;
  letter-spacing:-5px;
  color:#d7d5ce
}
.studio-mark span {
  font-family:var(--body);
  font-size:75px;
  color:var(--accent);
  letter-spacing:0
}
.studio-copy {
  padding-top:33px
}
.studio-copy .studio-lead {
  font-size:24px;
  line-height:1.5;
  color:#1f2020;
  font-weight:500;
  margin-bottom:25px
}
.studio-copy>p {
  font-size:14px;
  color:#5b5c5a;
  line-height:1.8;
  margin-bottom:20px
}
.studio-principles {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:35px;
  padding-top:28px;
  border-top:1px solid #cfcec6
}
.studio-principles span {
  color:#b75236;
  font-size:10px
}
.studio-principles h3 {
  font-family:var(--body);
  font-size:14px;
  margin:13px 0 7px
}
.studio-principles p {
  font-size:12px;
  color:#656560;
  margin-bottom:0;
  line-height:1.7
}
.contact-section {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  padding-top:105px;
  padding-bottom:105px;
  align-items:center
}
.contact-section h2 {
  font-size:69px;
  margin-bottom:23px
}
.contact-section p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin:0
}
.contact-link {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border-bottom:1px solid #73736e;
  padding-bottom:25px;
  gap:15px;
  justify-self:end;
  transition:border-color .2s;
  font-size:21px
}
.contact-link:hover {
  border-color:var(--accent)
}
.contact-arrow {
  font-size:75px;
  line-height:1;
  color:var(--accent);
  margin-bottom:15px;
  transition:transform .2s
}
.contact-link:hover .contact-arrow {
  transform:translate(5px,-5px)
}
.contact-label {
  font-size:9px;
  letter-spacing:2px;
  color:var(--muted)
}
.site-footer {
  border-top:1px solid var(--line);
  background:#151617
}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-top:40px;
  padding-bottom:35px
}
.footer-top p {
  color:var(--muted);
  font-size:13px;
  margin:0
}
.footer-top>a:last-child {
  font-size:12px
}
.footer-top>a:last-child span {
  color:var(--accent);
  margin-left:12px
}
.footer-bottom {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  font-size:9px;
  color:#a4a5a0;
  padding-top:25px;
  padding-bottom:30px
}
.footer-bottom div {
  display:flex;
  gap:20px
}
.footer-bottom>span:last-child {
  font-size:8px;
  letter-spacing:1.7px
}
.footer-bottom a:hover {
  color:var(--paper)
}
@media(min-width:1600px) {
  .hero-art {
    object-position:center 58%
  }
  .hero-inner {
    padding-top:100px
  }
  .hero-shade {
    background:linear-gradient(90deg,#0a0b0ce0,#0a0b0c55 45%,transparent 72%),linear-gradient(0deg,#0a0b0caa,transparent 24%)
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .brand-label {
    display:none
  }
  .hero {
    min-height:640px
  }
  .hero-inner {
    padding-top:70px
  }
  .hero-actions {
    gap:20px
  }
  h1 {
    font-size:95px
  }
  h2,.studio-section h2,.contact-section h2 {
    font-size:60px
  }
  .game-grid {
    gap:28px
  }
  .game-meta {
    font-size:8px;
    letter-spacing:.6px
  }
  .game-card h3 {
    font-size:41px
  }
  .game-links {
    align-items:flex-start;
    flex-direction:column;
    gap:13px
  }
  .spectral-content {
    padding:30px
  }
  .phone-screen {
    width:165px
  }
  .phone-back {
    left:13%
  }
  .phone-front {
    right:11%
  }
  .studio-grid {
    gap:45px
  }
  .contact-link {
    font-size:18px
  }
  .footer-bottom>span:last-child {
    display:none
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:20px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    height:74px
  }
  .brand img {
    width:145px;
    height:33px
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    gap:6px;
    border:1px solid #555;
    background:transparent;
    color:var(--paper);
    padding:12px;
    width:42px;
    height:40px;
    justify-content:center
  }
  .menu-toggle span {
    display:block;
    height:1px;
    background:currentColor;
    width:16px
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  nav {
    display:none;
    position:absolute;
    top:74px;
    left:0;
    right:0;
    background:#151617;
    z-index:10;
    padding:25px 20px;
    border-bottom:1px solid #555;
    gap:25px
  }
  nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%
  }
  .nav-contact {
    width:100%;
    display:flex;
    justify-content:space-between
  }
  .hero {
    height:680px;
    min-height:0;
    max-height:none
  }
  .hero-art {
    object-position:64% center
  }
  .hero-shade {
    background:linear-gradient(90deg,#0a0b0cbb,#0a0b0c33),linear-gradient(0deg,#0a0b0cd9,transparent 60%)
  }
  .hero-inner {
    padding-top:55px;
    padding-bottom:170px;
    justify-content:flex-start
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.5px;
    margin-bottom:29px
  }
  h1 {
    font-size:84px;
    letter-spacing:-1px;
    line-height:.96;
    margin-bottom:25px
  }
  .hero-description {
    font-size:14px;
    max-width:310px;
    line-height:1.75;
    margin-bottom:26px
  }
  .desktop-break {
    display:none
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:23px
  }
  .button {
    padding:16px 18px;
    font-size:12px;
    gap:25px
  }
  .hero-feature {
    bottom:30px;
    left:0;
    right:0;
    min-width:0;
    width:100%;
    padding-top:15px
  }
  .feature-kicker {
    font-size:8px
  }
  .feature-title {
    font-size:15px
  }
  .hero-index {
    display:none
  }
  .platform-strip>.wrap {
    min-height:72px;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:13px;
    font-size:8px;
    letter-spacing:1.2px
  }
  .platform-strip div div {
    font-size:10px;
    gap:24px
  }
  .games-section {
    padding-top:65px;
    padding-bottom:65px
  }
  .section-heading {
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    margin-bottom:33px
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.5px
  }
  .section-heading .eyebrow,.studio-section .eyebrow,.contact-section .eyebrow {
    margin-bottom:17px
  }
  h2,.studio-section h2,.contact-section h2 {
    font-size:55px;
    line-height:1
  }
  .section-heading>p {
    font-size:13px;
    margin-bottom:0
  }
  .game-grid {
    grid-template-columns:1fr;
    gap:49px
  }
  .game-meta {
    font-size:8px;
    margin-top:19px;
    margin-bottom:16px;
    letter-spacing:.7px
  }
  .game-card h3 {
    font-size:42px;
    margin-bottom:17px
  }
  .game-card>p {
    min-height:0;
    font-size:13px;
    margin-bottom:20px
  }
  .game-links {
    flex-direction:row;
    align-items:center;
    gap:15px;
    flex-wrap:wrap
  }
  .store-links {
    font-size:10px;
    gap:12px
  }
  .image-tag {
    top:14px;
    left:14px;
    font-size:8px;
    padding:8px 10px
  }
  .image-arrow {
    bottom:14px;
    right:14px;
    width:35px;
    height:35px;
    font-size:22px
  }
  .spectral-card {
    grid-template-columns:1fr;
    margin-top:50px
  }
  .spectral-visual {
    min-height:435px
  }
  .deception-logo {
    width:68%;
    left:16%;
    top:15px
  }
  .phone-screen {
    top:136px;
    width:145px;
    border-radius:23px;
    border-width:5px
  }
  .phone-back {
    top:152px;
    left:19%
  }
  .phone-front {
    right:16%
  }
  .visual-caption {
    bottom:0;
    font-size:7px
  }
  .spectral-content {
    padding:28px 23px 33px
  }
  .spectral-content h3 {
    font-size:43px
  }
  .spectral-content .game-meta {
    font-size:7px;
    letter-spacing:.7px;
    margin-bottom:21px
  }
  .spectral-intro {
    font-size:13px;
    margin-bottom:25px
  }
  .experience h4 {
    font-size:16px
  }
  .experience h4 span {
    font-size:7px
  }
  .experience p {
    font-size:12px
  }
  .studio-section {
    padding:65px 0
  }
  .studio-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .studio-mark {
    display:none
  }
  .studio-copy {
    padding:0
  }
  .studio-copy .studio-lead {
    font-size:21px;
    line-height:1.5;
    margin-bottom:20px
  }
  .studio-copy>p {
    font-size:13px
  }
  .studio-principles {
    margin-top:27px;
    padding-top:24px
  }
  .contact-section {
    grid-template-columns:1fr;
    padding-top:65px;
    padding-bottom:65px;
    gap:35px
  }
  .contact-section h2 {
    margin-bottom:20px
  }
  .contact-section p:not(.eyebrow) {
    font-size:13px
  }
  .contact-link {
    justify-self:start;
    font-size:19px;
    gap:12px;
    width:100%
  }
  .contact-arrow {
    font-size:57px;
    margin-bottom:4px
  }
  .footer-top {
    flex-wrap:wrap;
    justify-content:flex-start;
    padding-top:30px;
    padding-bottom:25px;
    gap:19px
  }
  .footer-top p {
    margin-left:auto;
    font-size:10px
  }
  .footer-top>a:last-child {
    width:100%;
    font-size:11px
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding-top:23px;
    padding-bottom:26px;
    font-size:8px
  }
  .footer-bottom div {
    gap:22px
  }
}
@media(max-width:370px) {
  h1 {
    font-size:72px
  }
  .wrap {
    width:calc(100% - 32px)
  }
  .hero .eyebrow {
    font-size:7px
  }
  .phone-back {
    left:12%
  }
  .phone-front {
    right:12%
  }
  .game-meta {
    font-size:7px
  }
  .game-card h3 {
    font-size:37px
  }
  .experience h4 {
    align-items:flex-start;
    flex-direction:column;
    gap:6px
  }
  .contact-link {
    font-size:17px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}