:root {
  --night:#080a17;
  --paper:#f1eade;
  --red:#f34449;
  --blue:#294cf2;
  --line:#ffffff25}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:20px}
body {
  margin:0;
  background:var(--night);
  color:var(--paper);
  font-family:'DM Sans',sans-serif}
a {
  color:inherit}
h1,h2,h3,p {
  margin:0}
header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 4%;
  border-bottom:1px solid #ffffff24}
.logo {
  font-size:30px;
  font-weight:700;
  letter-spacing:-2px;
  text-decoration:none}
.logo span {
  color:var(--red)}
nav {
  display:flex;
  gap:35px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.6px}
nav a {
  text-decoration:none}
.wrap {
  padding:0}
.hero {
  height:100svh;
  min-height:850px;
  max-height:1200px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#090e29}
.stage-glow {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 25% 22%,#213a98 0,transparent 55%),radial-gradient(ellipse at 80% 30%,#811b3a,transparent 65%);
  z-index:-4}
.hero-art {
  position:absolute;
  inset:0 0 0 36%;
  z-index:-2}
.hero-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:55% 37%;
  mask-image:linear-gradient(90deg,transparent,black 19%)}
.hero:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#080a17 0,transparent 27%),linear-gradient(90deg,#080d2999,transparent 70%);
  z-index:-1;
  pointer-events:none}
.hero-heading {
  position:absolute;
  top:125px;
  left:4%;
  right:3%}
.eyebrow {
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:2.2px;
  font-weight:600}
.hero-heading .eyebrow {
  color:#aebaf7;
  margin-bottom:22px}
h1 {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-weight:800;
  font-size:clamp(65px,8.7vw,150px);
  line-height:.86;
  letter-spacing:-.035em;
  max-width:1000px;
  text-shadow:0 2px 30px #07102033}
h1 span {
  color:var(--red)}
h1 i {
  font-style:normal;
  color:var(--paper)}
.hero-offer {
  position:absolute;
  left:4%;
  top:55%;
  width:330px}
.hero-offer>p:first-child {
  font-weight:600;
  font-size:23px;
  line-height:1.22;
  letter-spacing:-.6px}
.intro {
  font-size:13px;
  line-height:1.8;
  color:#c0c7e0;
  margin-top:18px;
  max-width:315px}
.btn {
  display:inline-flex;
  justify-content:space-between;
  gap:50px;
  padding:17px 22px;
  background:var(--red);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  margin-top:26px;
  border-radius:3px;
  transition:background .2s}
.btn:hover {
  background:#cf3039}
.hero-seal {
  position:absolute;
  right:4%;
  bottom:11%;
  width:110px;
  height:110px;
  border-radius:50%;
  border:1px solid #eae1db99;
  background:#08133766;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transform:rotate(12deg);
  gap:5px}
.hero-seal span {
  font-size:7px;
  letter-spacing:1.1px}
.hero-seal b {
  font-size:38px;
  line-height:1;
  color:var(--red)}
.hero-bottom {
  position:absolute;
  left:4%;
  right:4%;
  bottom:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:8px;
  letter-spacing:1.5px}
.hero-bottom a {
  text-decoration:none}
.checker-floor {
  position:absolute;
  left:-25%;
  width:100%;
  height:400px;
  bottom:-190px;
  transform:perspective(430px) rotateX(60deg) rotateZ(-14deg);
  background:repeating-conic-gradient(#7786af 0 25%,#111834 0 50%) 0 0/85px 85px;
  opacity:.4;
  z-index:-3;
  mask-image:linear-gradient(90deg,transparent,#000 25%,#000 60%,transparent)}
.partners {
  padding:30px 4%;
  background:#ec3d43;
  color:#180c21}
.partners .eyebrow {
  font-size:8px;
  opacity:.75}
.partner-names {
  display:flex;
  gap:22px 42px;
  flex-wrap:wrap;
  margin-top:16px;
  font-weight:600;
  font-size:18px;
  letter-spacing:-.5px}
.section {
  padding:90px 6%;
  border-bottom:1px solid var(--line)}
.section-head {
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:30px;
  margin-bottom:50px}
.section-head>.eyebrow {
  color:#9fa9cc;
  padding-top:8px}
h2 {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:clamp(55px,7vw,105px);
  line-height:.9;
  font-weight:700;
  letter-spacing:-.02em}
h2 em {
  font-style:normal;
  color:var(--red)}
.lead {
  font-size:15px;
  line-height:1.8;
  color:#afb5c9;
  max-width:550px;
  margin-top:25px}
.services {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line)}
.service {
  padding:30px 30px 10px 0}
.service+.service {
  padding-left:30px;
  border-left:1px solid var(--line)}
.num {
  font-size:10px;
  letter-spacing:1px;
  color:var(--red);
  margin-bottom:30px}
h3 {
  font-size:22px;
  font-weight:500;
  letter-spacing:-.6px;
  margin-bottom:16px}
.service p,.step p {
  font-size:14px;
  line-height:1.8;
  color:#afb5c9}
.tags {
  font-size:8px;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-top:28px;
  color:#93a7ff}
.production {
  padding:80px 6%;
  background:#243ecc;
  position:relative;
  overflow:hidden}
.production>.eyebrow {
  margin-bottom:30px;
  color:#c8d1ff}
.production h2 {
  font-size:clamp(52px,6vw,90px)}
.production h2 em {
  color:#fff}
.process {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin-top:45px}
.step {
  border-top:1px solid #ffffff4a;
  padding-top:25px}
.step .num {
  color:#d3dcff;
  margin-bottom:22px}
.step h3 {
  font-size:19px}
.step p {
  color:#d3d9ff;
  font-size:13px}
.personal {
  padding:65px 6%;
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:30px;
  border-bottom:1px solid var(--line)}
.personal>.eyebrow {
  color:#a8b4df;
  font-size:9px;
  line-height:1.7}
.personal p {
  font-size:20px;
  line-height:1.65;
  max-width:850px}
.portfolio {
  padding:90px 0 0;
  border:0}
.portfolio>.section-head {
  padding:0 6%;
  margin-bottom:65px}
.portfolio-grid {
  display:block}
.work {
  margin:0;
  position:relative;
  overflow:hidden;
  background:#080a17}
.work-visual {
  display:block;
  width:100%;
  height:115svh;
  min-height:800px;
  max-height:1400px;
  object-fit:cover}
.work:after {
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:100px;
  background:linear-gradient(transparent,#0008);
  pointer-events:none}
.work figcaption {
  position:absolute;
  z-index:1;
  bottom:25px;
  left:4%;
  right:4%;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:2px;
  color:#fff;
  text-shadow:0 1px 5px #000}
.work:nth-child(4n+1) {
  border-top:6px solid var(--red)}
.work:nth-child(4n+3) {
  border-top:6px solid var(--blue)}
footer {
  padding:30px 4%;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#a5adc5}
a:focus-visible {
  outline:3px solid white;
  outline-offset:6px}
@media(min-width:1700px) {
  .hero-art {
  left:40%}
.hero-heading {
  top:145px}
.hero-offer {
  top:56%}
.work-visual {
  height:1400px}
}

@media(max-width:800px) {
  header {
  padding:20px 5%}
nav {
  gap:20px;
  font-size:9px}
.hero {
  min-height:1000px;
  max-height:none;
  height:120svh}
.hero-art {
  inset:100px 0 120px 0}
.hero-art img {
  object-fit:cover;
  object-position:50% 25%;
  mask-image:linear-gradient(0deg,transparent,black 35%,black 85%,transparent)}
.hero:after {
  background:linear-gradient(0deg,#080a17 0%,#080a17de 15%,transparent 52%)}
.hero-heading {
  top:112px;
  left:5%;
  right:4%}
.hero-heading .eyebrow {
  font-size:8px;
  margin-bottom:18px}
h1 {
  font-size:clamp(62px,10.3vw,100px)}
.hero-offer {
  left:5%;
  top:auto;
  bottom:85px;
  width:90%}
.hero-offer>p:first-child {
  font-size:22px}
.intro {
  max-width:360px;
  font-size:13px;
  line-height:1.6}
.hero-seal {
  bottom:300px;
  right:6%;
  width:85px;
  height:85px}
.hero-bottom {
  font-size:7px;
  left:5%;
  right:5%}
.hero-bottom span:last-child {
  display:none}
.checker-floor {
  bottom:-200px;
  opacity:.2}
.partner-names {
  font-size:15px;
  gap:15px 25px}
.section {
  padding:65px 6%}
.section-head,.personal {
  grid-template-columns:1fr;
  gap:25px}
.services {
  grid-template-columns:1fr}
.service,.service+.service {
  border-left:0;
  border-bottom:1px solid var(--line);
  padding:25px 0}
.num {
  margin-bottom:20px}
.production {
  padding:65px 6%}
.process {
  grid-template-columns:1fr 1fr;
  gap:30px}
.personal {
  padding:50px 6%}
.personal p {
  font-size:17px}
.portfolio {
  padding:60px 0 0}
.portfolio>.section-head {
  margin-bottom:40px}
.work-visual {
  height:auto;
  min-height:0;
  max-height:none;
  object-fit:cover}
.work figcaption {
  font-size:8px;
  bottom:18px}
.work:nth-child(4n+1),.work:nth-child(4n+3) {
  border-top-width:3px}
}

@media(max-width:460px) {
  .logo {
  font-size:26px}
nav a[href="#process"] {
  display:none}
nav {
  font-size:8px;
  gap:15px;
  letter-spacing:1px}
.hero {
  min-height:990px;
  height:115svh}
.hero-heading {
  top:105px}
h1 {
  font-size:12vw;
  line-height:.95;
  letter-spacing:-.025em}
.hero-art {
  inset:180px 0 210px}
.hero-art img {
  object-position:50% 30%;
  mask-image:linear-gradient(0deg,transparent,black 24%,black 90%,transparent)}
.hero-heading .eyebrow {
  letter-spacing:1.8px}
.hero-offer {
  bottom:78px}
.hero-seal {
  bottom:350px;
  width:78px;
  height:78px}
.hero-seal span {
  font-size:6px}
.hero-offer>p:first-child {
  font-size:21px}
.btn {
  padding:14px 20px;
  margin-top:18px}
.process {
  grid-template-columns:1fr}
.hero-bottom {
  letter-spacing:1px;
  font-size:6px}
h2 {
  font-size:57px}
footer {
  font-size:8px;
  gap:20px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}


/* Editorial art direction */
header {
  padding-top:22px;
  padding-bottom:22px}
.hero {
  height:112svh;
  min-height:1080px;
  max-height:1450px;
  background:#080c26}
.stage-glow {
  background:radial-gradient(ellipse at 33% 45%,#1c2e77,transparent 60%),radial-gradient(ellipse at 85% 45%,#792036,transparent 60%)}
.hero-art {
  inset:100px 3% 80px 48%;
  z-index:0;
  transform:rotate(2deg);
  border-radius:240px 240px 12px 12px;
  overflow:hidden;
  border:1px solid #ffffff32;
  box-shadow:0 35px 100px #0007}
.hero-art img {
  mask-image:none;
  object-fit:cover;
  object-position:50% 38%}
.hero:after {
  z-index:-1;
  background:linear-gradient(0deg,#080a17,transparent 32%)}
.hero-heading {
  top:125px;
  left:4%;
  right:auto;
  width:62%;
  z-index:2;
  pointer-events:none}
.hero-heading .eyebrow {
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:24px;
  display:flex;
  gap:10px;
  align-items:center}
.status-dot {
  width:6px;
  height:6px;
  background:#ed595d;
  border-radius:50%;
  box-shadow:0 0 12px #ef505d}
.hero h1 {
  font-size:clamp(68px,7.5vw,130px);
  line-height:.84;
  letter-spacing:-.02em;
  font-weight:700}
.hero h1 span {
  display:block;
  white-space:nowrap;
  font-size:.70em;
  margin-top:12px}
.hero h1 i {
  font-family:'Italiana',Georgia,serif;
  font-weight:400;
  font-size:1.22em;
  letter-spacing:-.08em}
.handwritten {
  display:block;
  color:#c4c9e5;
  font-family:'Italiana',Georgia,serif;
  font-size:25px;
  line-height:1.4;
  margin-top:23px;
  transform:rotate(-5deg);
  transform-origin:left}
.hero-offer {
  z-index:2;
  top:54%;
  width:38%;
  max-width:450px}
.hero-offer>p:first-child {
  font-size:25px;
  font-weight:500}
.intro {
  max-width:390px;
  font-size:13px;
  line-height:1.8}
.intro-secondary {
  color:#929ebe;
  font-size:12px;
  margin-top:14px}
.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:25px}
.hero-actions .btn {
  margin:0;
  border-radius:50px;
  padding:18px 24px;
  gap:25px}
.text-link {
  font-size:11px;
  text-decoration:none;
  border-bottom:1px solid #8f9dc3;
  padding-bottom:6px}
.hero-seal {
  z-index:3;
  right:1%;
  bottom:25%;
  background:#264de4;
  border:0;
  box-shadow:0 8px 30px #0004;
  transform:rotate(15deg);
  width:120px;
  height:120px}
.hero-seal b {
  color:white}
.hero-seal span {
  color:#dbe3ff}
.image-ticket {
  z-index:3;
  position:absolute;
  right:7%;
  bottom:9%;
  background:#f0e9dc;
  color:#182345;
  padding:20px 25px;
  transform:rotate(-5deg);
  width:235px;
  box-shadow:0 5px 40px #0005}
.image-ticket:before {
  content:'';
  position:absolute;
  left:-7px;
  top:15px;
  bottom:15px;
  width:14px;
  background:radial-gradient(circle,#0c1130 4px,transparent 4.5px) 0 0/14px 18px}
.image-ticket span {
  display:block;
  font-size:7px;
  letter-spacing:1px}
.image-ticket strong {
  display:block;
  font-family:'Italiana',Georgia,serif;
  font-size:36px;
  font-weight:400;
  line-height:1;
  margin:15px 0}
.stage-type {
  position:absolute;
  z-index:-3;
  right:-2%;
  top:7%;
  font-family:'Barlow Condensed',sans-serif;
  line-height:.8;
  font-weight:800;
  font-size:25vw;
  color:transparent;
  -webkit-text-stroke:1px #7583c234;
  letter-spacing:-.02em;
  transform:rotate(-7deg);
  pointer-events:none}
.orbit {
  border:1px solid #93a5ef33;
  border-radius:50%;
  position:absolute;
  z-index:-2;
  pointer-events:none}
.orbit-one {
  width:1000px;
  height:1000px;
  top:2%;
  left:25%}
.orbit-two {
  width:1150px;
  height:1150px;
  top:-5%;
  left:19%}
.stage-star {
  position:absolute;
  z-index:2;
  color:#ed474d;
  pointer-events:none}
.star-one {
  font-size:65px;
  left:40%;
  top:42%;
  transform:rotate(12deg)}
.star-two {
  font-size:30px;
  left:45%;
  bottom:19%;
  color:#8097ff}
.checker-floor {
  left:-20%;
  bottom:-110px;
  opacity:.5;
  height:440px;
  z-index:-2;
  width:95%;
  transform:perspective(470px) rotateX(61deg) rotateZ(-12deg)}
.hero-bottom {
  z-index:4}
.edition-strip {
  background:var(--red);
  color:#10152e;
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:25px;
  padding:19px 3%;
  font-family:'Barlow Condensed',sans-serif;
  font-size:25px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden}
.edition-strip b {
  font-size:24px}
.partners {
  background:#0d122c;
  color:#d3d8e9;
  padding-top:35px;
  padding-bottom:35px;
  border-bottom:1px solid var(--line)}
.partners .eyebrow {
  color:#8d9abf}
.deliverables {
  list-style:none;
  padding:0;
  margin:25px 0 0}
.deliverables li {
  padding:10px 0;
  border-top:1px solid #ffffff15;
  color:#d6daea;
  font-size:12px;
  line-height:1.5}
.deliverables li:before {
  content:'↗';
  color:#ec5157;
  margin-right:10px}
.services {
  gap:0}
.service {
  padding-bottom:25px}
.section-head h2 em {
  font-family:'Italiana',Georgia,serif;
  font-size:.8em;
  letter-spacing:-.045em}
.personal p {
  font-size:18px;
  color:#c6cce0}
.portfolio>.section-head {
  position:relative}
.portfolio>.section-head:after {
  content:'✳';
  position:absolute;
  right:6%;
  top:-20px;
  font-size:110px;
  color:#f34449;
  transform:rotate(15deg);
  opacity:.65}
.portfolio .lead {
  max-width:440px}

@media(min-width:1700px) {
  .hero-art {
  inset:110px 5% 100px 48%}
.hero-heading {
  top:145px}
.hero-offer {
  top:55%}
}
@media(max-width:1000px) and (min-width:801px) {
  .hero-offer {
  top:48%}
.hero-heading {
  top:120px}
.hero h1 {
  font-size:75px}
.handwritten {
  font-size:22px}
.image-ticket {
  right:6%;
  width:195px}
.hero-seal {
  width:95px;
  height:95px}
}

@media(max-width:800px) {
  .hero {
  min-height:1430px;
  height:auto;
  max-height:none}
.hero-heading {
  left:5%;
  top:110px;
  width:90%;
  right:5%}
.hero h1 {
  font-size:clamp(72px,14vw,105px)}
.hero h1 span {
  font-size:.7em;
  margin-top:10px}
.hero-heading .eyebrow {
  font-size:7px;
  letter-spacing:1.1px}
.handwritten {
  font-size:22px;
  margin-top:20px}
.hero-art {
  inset:400px 7% 420px 12%;
  transform:rotate(3deg);
  border-radius:220px 220px 8px 8px;
  z-index:0}
.hero-art img {
  object-position:50% 38%;
  mask-image:none}
.hero-offer {
  top:auto;
  bottom:90px;
  left:6%;
  width:88%;
  max-width:520px}
.hero-offer>p:first-child {
  font-size:23px}
.intro {
  font-size:13px;
  max-width:490px}
.intro-secondary {
  font-size:12px}
.hero-actions {
  gap:22px;
  margin-top:22px}
.hero-seal {
  right:3%;
  top:620px;
  bottom:auto;
  width:96px;
  height:96px}
.image-ticket {
  right:3%;
  bottom:400px;
  width:175px;
  padding:15px 18px}
.image-ticket strong {
  font-size:29px;
  margin:10px 0}
.image-ticket span {
  font-size:6px}
.stage-type {
  top:34%;
  left:-6%;
  right:auto;
  font-size:46vw}
.star-one {
  left:auto;
  right:8%;
  top:310px;
  font-size:50px}
.star-two {
  left:6%;
  bottom:450px;
  font-size:30px}
.checker-floor {
  bottom:340px;
  height:400px;
  width:150%;
  left:-35%}
.orbit-one {
  top:300px;
  left:-40%;
  width:850px;
  height:850px}
.orbit-two {
  top:230px;
  left:-55%;
  width:1000px;
  height:1000px}
.edition-strip {
  font-size:20px;
  justify-content:flex-start;
  padding:15px 5%;
  gap:25px}
.portfolio>.section-head:after {
  font-size:65px;
  top:0}
.personal p {
  font-size:16px}
}

@media(max-width:460px) {
  .hero {
  min-height:1410px}
.hero-heading {
  top:110px}
.hero h1 {
  font-size:18vw}
.hero h1 span {
  font-size:.65em}
.hero-art {
  inset:380px 7% 480px 8%}
.hero-offer {
  bottom:85px}
.hero-seal {
  top:610px;
  width:80px;
  height:80px}
.hero-seal span {
  font-size:6px}
.image-ticket {
  bottom:455px;
  width:155px}
.image-ticket strong {
  font-size:27px}
.handwritten {
  font-size:21px}
.hero-actions .btn {
  padding:15px 20px;
  font-size:11px}
.text-link {
  font-size:10px}
.hero-actions {
  gap:15px}
.hero-offer>p:first-child {
  font-size:21px}
.intro {
  font-size:12px}
.intro-secondary {
  font-size:11px}
.hero-heading .eyebrow {
  max-width:none;
  letter-spacing:1px;
  font-size:6px}
.star-one {
  top:300px}
.checker-floor {
  bottom:385px}
.portfolio>.section-head:after {
  font-size:45px}
.section-head h2 {
  font-size:54px}
}


.mobile-offer {
  display:none}
@media(max-width:800px) {
  .mobile-offer {
  display:block;
  font-size:11px;
  line-height:1.6;
  color:#c4cce5;
  margin-top:22px}
.hero-art {
  top:435px}
}


/* Vivid red / electric blue: cleaner, bolder art direction. */
:root {
  --red:#ff263c;
  --blue:#2448ff;
  --paper:#fffdf3;
  --night:#03071c}
.hero {
  background:#133bff;
  min-height:1050px;
  height:112svh;
  max-height:1350px}
.stage-glow {
  background:linear-gradient(110deg,#173dff 0%,#173dff 42%,#0d228e 74%,#510013 100%)}
.hero:after {
  background:linear-gradient(0deg,#03071c 0%,transparent 24%)}
.hero-art {
  inset:0 0 0 42%;
  border-radius:0;
  border:0;
  box-shadow:none;
  transform:none;
  z-index:0}
.hero-art img {
  object-position:50% 38%;
  mask-image:linear-gradient(90deg,transparent,#000 17%)}
.hero-heading {
  top:128px;
  left:4%;
  width:66%;
  z-index:2}
.hero-heading .eyebrow {
  color:#e6ebff;
  font-size:8px;
  letter-spacing:1.7px}
.status-dot {
  background:white;
  box-shadow:none}
.hero h1 {
  font-size:clamp(80px,9.1vw,156px);
  line-height:.79;
  font-weight:800;
  letter-spacing:-.045em;
  color:#fffdf3;
  text-shadow:none}
.hero h1 span {
  font-size:.78em;
  line-height:.87;
  margin-top:17px;
  color:#ff3146;
  white-space:normal}
.hero h1 i {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  font-size:1em;
  letter-spacing:-.045em;
  color:#fffdf3}
.hero-offer {
  top:auto;
  bottom:106px;
  width:35%;
  max-width:430px}
.hero-offer>p:first-child {
  font-size:22px;
  color:white}
.intro {
  color:#edf0ff;
  font-size:13px;
  line-height:1.7}
.intro-secondary {
  color:#c8d4ff;
  font-size:11px}
.btn,.hero-actions .btn {
  background:#ff263c;
  border-radius:0;
  color:white;
  padding:17px 22px;
  box-shadow:5px 5px 0 #06145c;
  font-weight:700}
.btn:hover {
  background:#e50025;
  transform:translateY(-2px)}
.text-link {
  color:white;
  border-color:white}
.hero-actions {
  gap:22px}
.stage-type {
  display:none}
.orbit,.stage-star {
  display:none}
.checker-floor {
  bottom:-150px;
  left:-22%;
  width:95%;
  height:430px;
  background:repeating-conic-gradient(#fbfaf4 0 25%,#030718 0 50%) 0 0/85px 85px;
  opacity:.8;
  transform:perspective(450px) rotateX(60deg) rotateZ(-12deg);
  mask-image:linear-gradient(90deg,transparent,#000 25%,#000 65%,transparent);
  z-index:-1}
.hero-bottom {
  color:#fff}
.edition-strip {
  background:#ff263c;
  color:#fff;
  font-size:27px;
  padding:20px 3%}
.partners {
  background:#fffdf3;
  color:#091137}
.partners .eyebrow {
  color:#4d5575}
.partner-names {
  font-size:18px;
  font-weight:700}
.section {
  background:#03071c}
.section-head h2 em {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:1em;
  letter-spacing:-.02em;
  color:#ff3146}
.production {
  background:#2448ff}
.production h2 em {
  color:#fff}
.step p {
  color:#e0e6ff}
.personal {
  background:#090e28}
.personal p {
  color:#f1f3ff}
.portfolio {
  background:#03071c}
.portfolio>.section-head:after {
  display:none}
.lead,.service p {
  color:#c0c9e2}
.tags {
  color:#7f9cff}
.num,.deliverables li:before {
  color:#ff4356}
.work:nth-child(4n+1) {
  border-top-color:#ff263c}
.work:nth-child(4n+3) {
  border-top-color:#2448ff}
header {
  border-bottom:1px solid #ffffff38}
.logo {
  color:#fff}
.logo span {
  color:#ff3046!important}
.mobile-offer {
  display:none}
footer {
  background:#03071c}

@media(min-width:1700px) {
  .hero-art {
  inset:0 0 0 44%}
.hero-offer {
  top:auto;
  bottom:135px}
.hero h1 {
  font-size:150px}
}

@media(max-width:1000px) and (min-width:801px) {
  .hero-offer {
  top:auto;
  bottom:90px;
  width:38%}
.hero h1 {
  font-size:9.5vw}
.hero-heading {
  top:130px}
.hero-offer>p:first-child {
  font-size:19px}
.intro {
  font-size:12px}
.hero-actions {
  gap:15px}
}

@media(max-width:800px) {
  .hero {
  height:auto;
  min-height:1350px;
  max-height:none}
.hero-heading {
  top:110px;
  left:5%;
  width:92%}
.hero h1 {
  font-size:17vw;
  line-height:.82}
.hero h1 span {
  font-size:.7em;
  line-height:.86;
  margin-top:15px}
.hero h1 span br {
  display:none}
.hero-art {
  inset:300px 0 400px 0;
  transform:none;
  border-radius:0}
.hero-art img {
  mask-image:linear-gradient(0deg,transparent,#000 20%,#000 82%,transparent);
  object-position:50% 38%;
  object-fit:cover}
.hero:after {
  background:linear-gradient(0deg,#03071c 0%,#03071c 18%,transparent 45%)}
.hero-offer {
  top:auto;
  bottom:85px;
  left:6%;
  width:88%;
  max-width:560px}
.hero-offer>p:first-child {
  font-size:23px}
.intro {
  max-width:500px}
.intro-secondary {
  font-size:12px}
.hero-actions {
  gap:24px}
.checker-floor {
  bottom:300px;
  left:-40%;
  width:160%;
  height:400px;
  opacity:.4;
  z-index:-1}
.edition-strip {
  font-size:23px}
.partners {
  padding:30px 5%}
.partner-names {
  font-size:15px}
.mobile-offer {
  display:block;
  margin-top:25px;
  font-size:11px;
  line-height:1.6;
  color:#e2eaff;
  max-width:310px}
.hero-heading .eyebrow {
  font-size:7px;
  letter-spacing:1px}
.hero-bottom {
  font-size:7px}
}

@media(max-width:460px) {
  .hero {
  min-height:1370px}
.hero-art {
  inset:410px 0 460px}
.hero-heading {
  top:112px}
.hero h1 {
  font-size:17.7vw}
.hero h1 span {
  font-size:.66em;
  margin-top:18px}
.hero-offer {
  bottom:90px}
.hero-offer>p:first-child {
  font-size:22px}
.intro {
  font-size:12px;
  line-height:1.7}
.intro-secondary {
  font-size:11px}
.hero-actions {
  gap:18px}
.hero-actions .btn {
  padding:15px 18px;
  font-size:11px}
.text-link {
  font-size:10px}
.hero-art img {
  object-position:center 38%}
.checker-floor {
  bottom:380px}
.mobile-offer {
  margin-top:22px;
  font-size:10px}
.hero-heading .eyebrow {
  font-size:6px;
  letter-spacing:.9px}
.hero-bottom {
  font-size:6px}
}



.element-01  {
  color:var(--red)}


.element-02  {
  object-position:50% 35%}


.element-03  {
  object-position:50% 30%}


.element-04  {
  object-position:50% 28%}


.element-05  {
  object-position:50% 45%}


.element-06  {
  object-position:50% 29%}


.element-07  {
  object-position:50% 30%}


.element-08  {
  object-position:50% 35%}


.element-09  {
  object-position:50% 25%}


.element-10  {
  object-position:50% 28%}


.element-11  {
  object-position:50% 65%}


.element-12  {
  object-position:50% 25%}


.element-13  {
  object-position:50% 28%}


.element-14  {
  object-position:50% 30%}


.element-15  {
  object-position:50% 35%}


.element-16  {
  object-position:50% 25%}


.element-17  {
  object-position:50% 27%}


.element-18  {
  object-position:50% 24%}


.element-19  {
  object-position:50% 25%}


.element-20  {
  object-position:50% 30%}


.element-21  {
  object-position:50% 28%}


.element-22  {
  object-position:50% 38%}


.element-23  {
  object-position:50% 26%}


.element-24  {
  object-position:50% 50%}


.element-25  {
  object-position:50% 32%}


.element-26  {
  object-position:50% 15%}


.element-27  {
  object-position:50% 15%}