:root {
  --ink: #021d30;
  --ink-deep: #041420;
  --accent: #efa420;
  --text: #aae0ff;
  --muted: #628fad;
  --overlay: rgba(4, 20, 32, 0.85);

  --gutter: 15px;
  --container-max: 1170px;

  --scroll-duration: 700ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {

  font-size: 14px;
  line-height: 1.42857143;
}

html,
body {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,

.tagline {

  font-weight: 500;
  line-height: 1.1;
}

h1,
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h1 {
  font-size: 36px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 14px;
}
h6 {
  font-size: 12px;
}

h4,
h5,
h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

p {
  margin: 0 0 10px;
}

a {
  text-decoration: none;
}

img {
  max-width: 100% !important;
  vertical-align: middle;
  border: 0;
}

button,
input,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.container,
.container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container {
  max-width: var(--container-max);
}

.row {

  margin-inline: -15px;
}

.about-grid > *,
.work-grid > *,
.form-wrap {
  position: relative;
  min-height: 1px;
  padding-inline: 15px;
}

#fullpage {
  height: 100vh;
  height: 100dvh;

  overflow: hidden;

  scroll-behavior: auto;

  overscroll-behavior-y: none;
  scrollbar-width: none;
}

#fullpage::-webkit-scrollbar {
  display: none;
}

#fullpage > section {
  position: relative;
  width: 100%;

  height: 100vh;
  height: 100dvh;
}

#fullpage > section:not(.scroll-tall) {
  overflow: hidden;
}

#fullpage > #info,
#fullpage > #contactme {
  display: flex;
  align-items: safe center;
  justify-content: center;
}

.scroll-tall {
  overflow-x: hidden;
  overflow-y: auto;

  padding-bottom: var(--overlay-bottom, 0px);
}

#info > .container {
  padding-block: 20px;
}

#work {
  --work-nav-h: 50px;
}

#work-track > .slide:first-child .content-area,
#work-track > .slide:first-child .port-imac .device,
#work-track > .slide:first-child .port-iphone .device {
  visibility: hidden;
}

.slide-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.slide-track::-webkit-scrollbar {
  display: none;
}

.slide-track > .slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

#work .slide {
  display: flex;
  align-items: safe center;
}

.about-grid {
  display: grid;
  grid-template-columns: 100%;
}

@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 50% 50%;
  }
}

.work-grid {
  display: grid;
  grid-template-columns: 100%;
  align-items: start;
}

@media (min-width: 768px) {

  .work-grid {
    grid-template-columns: 66.66666667%;
    justify-content: center;
  }
}

@media (min-width: 992px) {

  .work-grid {
    grid-template-columns: 58.33333333% 33.33333333%;
    column-gap: 2%;
    justify-content: start;
  }
}

.device-row {
  width: 100%;
}

.device-row > .port-imac {
  position: relative;
  min-height: 1px;
  width: 75%;
}

@media (min-width: 768px) {
  .device-row > .port-imac {
    margin-left: 2%;
  }
}

.showcase .port-iphone {
  width: 20%;
}

.form-wrap {
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .form-wrap {
    max-width: 66.6667%;
  }
}

@media (min-width: 992px) {
  .form-wrap {
    max-width: 50%;
  }
}

button,
[role="button"] {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

.slider-nav .button-wrapper[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
}

.slider-nav .button-wrapper[aria-disabled="true"]:hover .curtain {
  right: -100%;
}

.slider-nav .button-wrapper[aria-disabled="true"]:hover .arrow-next {
  border-right-color: #efa420;
  border-bottom-color: #efa420;
}

.slider-nav .button-wrapper[aria-disabled="true"]:hover .arrow-prev {
  border-left-color: #efa420;
  border-bottom-color: #efa420;
}

.btn {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  background-image: none;
  touch-action: manipulation;
  user-select: none;
}

.form-control {
  display: block;
  width: 100%;
  padding: 6px 12px;

  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
}

input.form-control,
textarea.form-control {
  -webkit-appearance: none;
  appearance: none;
}

input.form-control {
  height: 34px;
}

.cardWrapper {
  perspective: 800px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cardFace {
  backface-visibility: hidden;
}

.cardFace.back {
  transform: rotateY(-180deg);
}

@media (hover: hover) and (pointer: fine) {
  .cardWrapper:hover .card,
  .cardWrapper:focus-within .card {
    transform: rotateY(180deg);
  }

  #photo-menu-container.is-entering .cardWrapper:hover .card,
  #photo-menu-container.is-entering .cardWrapper:focus-within .card {
    transform: none;
  }
}

#photo-menu-container.is-warming .cardContainer {
  opacity: 0.001;
}

.header-circle.reveal span {
  animation: circle-in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both;
}

@keyframes circle-in {
  from {
    opacity: 0;
    transform: perspective(800px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg);
  }
}

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

.button-wrapper:focus-visible,
.down-button:focus-visible {
  outline-color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  #fullpage,
  .slide-track {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.showcase .port-iphone .device {
  position: relative;
}

.showcase .port-iphone .mock-cavity {
  position: absolute;
  display: block;

  left: 4.38%;
  top: 1.75%;
  width: 91.24%;
  height: 96.5%;

  z-index: 96;
  overflow: hidden;

  border-radius: 9% / 4.13% !important;
}

.showcase .port-iphone .screen.mock-screen {
  position: static;

  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: auto;
  border-radius: 0 !important;
}

.showcase .port-imac .imac-stage {

  height: 64%;
  overflow: hidden;
  background: #0a0c18;

  border-radius: 0.6% / 1% !important;
  display: flex;
  align-items: center;
  justify-content: center;

  container-type: inline-size;
}

.showcase .port-imac .imac-stage__glow {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 52cqw;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50% !important;
  background: #3e7ae9;
  opacity: 0.1;
  filter: blur(10.4cqw);
  pointer-events: none;
}

.showcase .port-imac .setlas-logo--imac {
  --setlas-pin-w: 17cqw;
  --setlas-word-w: 37cqw;
  gap: 3cqw;
  position: relative;
  z-index: 1;
}

.showcase .port-imac .imac-stage--ptv {

  background: #0b0a09;
}

.showcase .port-imac .imac-stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;

  filter: sepia(0.35) saturate(1.35) hue-rotate(-12deg) brightness(1.02);

  margin: 0;
  border: 0;
  pointer-events: none;
}

.showcase .port-imac .play-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgb(0 0 0 / 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.3) 3px
  );
  pointer-events: none;
}

.showcase .port-imac .vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 55%,
    rgba(17, 17, 17, 0.6) 100%
  );
}

.showcase .port-imac .ptv-wordmark--imac {
  width: 60cqw;
  position: relative;
  z-index: 4;
}

.showcase .port-imac .ptv-wordmark--imac svg {
  width: 100%;
  height: auto;
  display: block;
}

.showcase .port-imac .imac-stage--kroll .kc-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.showcase .port-imac .imac-stage--kroll .kroll-mark {
  position: absolute;
  z-index: 2;
  top: 18%;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: 22cqw;
  height: auto;
  display: block;
}

.kc-loading{
  --kc-bg: url("../media/krollcase-display/loading-bg.webp");
  position:relative;width:100%;height:100%;overflow:hidden;
  background:#07070a;
  isolation:isolate;
  contain:layout paint style;
  pointer-events:none;user-select:none
}
.kc-loading *{box-sizing:border-box;margin:0;padding:0}
@keyframes kc-push{
  0%{transform:scale(0.945)}
  1.667%{transform:scale(0.951426)}
  3.333%{transform:scale(0.957014)}
  5%{transform:scale(0.961875)}
  6.667%{transform:scale(0.966106)}
  8.333%{transform:scale(0.969791)}
  12.5%{transform:scale(0.977067)}
  16.667%{transform:scale(0.982255)}
  22.222%{transform:scale(0.986978)}
  27.778%{transform:scale(0.990074)}
  33.333%{transform:scale(0.992159)}
  44.444%{transform:scale(0.994683)}
  55.556%{transform:scale(0.996182)}
  66.667%{transform:scale(0.997286)}
  83.333%{transform:scale(0.998688)}
  100%{transform:scale(1)}
}
@keyframes kc-drift{from{transform:translate3d(-1.4%,-0.9%,0)}to{transform:translate3d(1.4%,0.9%,0)}}
@keyframes kc-vig{from{opacity:.76}to{opacity:1}}
@keyframes kc-grain{
  0.000%{transform:translate3d(-0.57%,-0.88%,0);animation-timing-function:steps(1,end)}
  2.941%{transform:translate3d(1.28%,0.36%,0);animation-timing-function:steps(1,end)}
  5.882%{transform:translate3d(0.14%,-1.39%,0);animation-timing-function:steps(1,end)}
  8.824%{transform:translate3d(-1.01%,-0.15%,0);animation-timing-function:steps(1,end)}
  11.765%{transform:translate3d(0.84%,1.09%,0);animation-timing-function:steps(1,end)}
  14.706%{transform:translate3d(-0.30%,-0.67%,0);animation-timing-function:steps(1,end)}
  17.647%{transform:translate3d(-1.45%,0.58%,0);animation-timing-function:steps(1,end)}
  20.588%{transform:translate3d(0.41%,-1.18%,0);animation-timing-function:steps(1,end)}
  23.529%{transform:translate3d(-0.74%,0.06%,0);animation-timing-function:steps(1,end)}
  26.471%{transform:translate3d(1.11%,1.31%,0);animation-timing-function:steps(1,end)}
  29.412%{transform:translate3d(-0.03%,-0.45%,0);animation-timing-function:steps(1,end)}
  32.353%{transform:translate3d(-1.18%,0.79%,0);animation-timing-function:steps(1,end)}
  35.294%{transform:translate3d(0.68%,-0.97%,0);animation-timing-function:steps(1,end)}
  38.235%{transform:translate3d(-0.47%,0.28%,0);animation-timing-function:steps(1,end)}
  41.176%{transform:translate3d(1.38%,-1.48%,0);animation-timing-function:steps(1,end)}
  44.118%{transform:translate3d(0.24%,-0.24%,0);animation-timing-function:steps(1,end)}
  47.059%{transform:translate3d(-0.91%,1.00%,0);animation-timing-function:steps(1,end)}
  50.000%{transform:translate3d(0.95%,-0.75%,0);animation-timing-function:steps(1,end)}
  52.941%{transform:translate3d(-0.20%,0.49%,0);animation-timing-function:steps(1,end)}
  55.882%{transform:translate3d(-1.35%,-1.27%,0);animation-timing-function:steps(1,end)}
  58.824%{transform:translate3d(0.51%,-0.03%,0);animation-timing-function:steps(1,end)}
  61.765%{transform:translate3d(-0.64%,1.22%,0);animation-timing-function:steps(1,end)}
  64.706%{transform:translate3d(1.22%,-0.54%,0);animation-timing-function:steps(1,end)}
  67.647%{transform:translate3d(0.07%,0.70%,0);animation-timing-function:steps(1,end)}
  70.588%{transform:translate3d(-1.07%,-1.06%,0);animation-timing-function:steps(1,end)}
  73.529%{transform:translate3d(0.78%,0.19%,0);animation-timing-function:steps(1,end)}
  76.471%{transform:translate3d(-0.37%,1.43%,0);animation-timing-function:steps(1,end)}
  79.412%{transform:translate3d(1.49%,-0.33%,0);animation-timing-function:steps(1,end)}
  82.353%{transform:translate3d(0.34%,0.92%,0);animation-timing-function:steps(1,end)}
  85.294%{transform:translate3d(-0.80%,-0.84%,0);animation-timing-function:steps(1,end)}
  88.235%{transform:translate3d(1.05%,0.40%,0);animation-timing-function:steps(1,end)}
  91.176%{transform:translate3d(-0.10%,-1.36%,0);animation-timing-function:steps(1,end)}
  94.118%{transform:translate3d(-1.24%,-0.11%,0);animation-timing-function:steps(1,end)}
  97.059%{transform:translate3d(0.61%,1.13%,0);animation-timing-function:steps(1,end)}
  100%{transform:translate3d(0,0,0)}
}
.kc-stage{position:absolute;inset:0;overflow:hidden}

.kc-drift{position:absolute;inset:-5%;animation:kc-drift 18s ease-in-out -4.5s infinite alternate}
.kc-shot{
  position:absolute;inset:0;
  background:var(--kc-bg) 44% 50%/cover no-repeat;
  transform-origin:50% 58%;
  animation:kc-push 60s linear forwards
}
.kc-vig{
  position:absolute;inset:0;opacity:.88;
  background:radial-gradient(118% 88% at 50% 44%,rgba(0,0,0,0) 34%,rgba(0,0,0,.40) 72%,rgba(0,0,0,.84) 100%);
  animation:kc-vig 23s ease-in-out -5.75s infinite alternate
}

.kc-grain{
  position:absolute;inset:-20%;opacity:.34;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:kc-grain 1.4s infinite
}
@media (prefers-reduced-motion:reduce){
  .kc-drift,.kc-shot,.kc-vig,.kc-grain{animation:none}
  .kc-shot{transform:scale(.97)}
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}