@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap");
/* Animatable angle for the socials halo ring */
@property --halo-end {
  syntax: "<angle>";
  initial-value: 8deg;
  inherits: false;
}
:root {
  color-scheme: light dark;
  /* Backgrounds */
  --bg-page: #fff;
  --bg-section: #fbfbff;
  --bg-section-mist: #ece8f9;
  --bg-elevated: #fff;
  --bg-hero: #fff;
  /* Text */
  --text: #252526;
  --text-muted: #5a5a64;
  --text-faint: #797a7f;
  --text-eyebrow: #cfced9;
  --text-stories-eyebrow: #8a82b8;
  --text-on-brand: #fff;
  /* Brand */
  --brand-blue: #4816e9;
  --brand-purple: #6707f8;
  --brand-highlight: #dcd9fc;
  --brand-mist: #ece8f9;
  /* Borders */
  --border-faint: rgba(37, 37, 38, 0.18);
  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.05);
  --shadow-paper: #dcd9fc;
  --shadow-paper-hover: #c9c4f0;
  /* Hairline tones (Stories) */
  --rule-tone: rgba(37, 37, 38, 0.18);
  --dek-tone: #4a4a52;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

.hidden {
  display: none !important;
}

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

@-webkit-keyframes bgGradientAnim {
  0% {
    background-position: top left;
  }
  100% {
    background-position: bottom right;
  }
}
@keyframes bgGradientAnim {
  0% {
    background-position: top left;
  }
  100% {
    background-position: bottom right;
  }
}
body {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
  padding: 0;
  margin: 0;
  transition: color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h2 {
  font-family: var(--font-display, "Vidaloka", Times, serif);
  line-height: 1.1666;
  font-weight: 400;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 0;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
.h2:first-child {
  margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
.h2:last-child {
  margin-bottom: 0;
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong,
.h2 strong {
  position: relative;
  font-weight: 400;
}

@media screen and (min-width: 480px) {
  h1 strong,
  h2 strong,
  h3 strong,
  h4 strong,
  h5 strong,
  h6 strong,
  .h2 strong {
    white-space: nowrap;
  }
}
h1 strong:before,
h2 strong:before,
h3 strong:before,
h4 strong:before,
h5 strong:before,
h6 strong:before,
.h2 strong:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  left: 0.25em;
  right: -0.25em;
  top: 0.8em;
  height: 0.3em;
  background-color: var(--brand-highlight);
}

h1 {
  font-size: 3rem;
}

@media screen and (max-width: 1439px) {
  h1 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 1199px) {
  h1 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  h1 {
    font-size: 1.5rem;
  }
}
h2,
.h2 {
  font-size: 36px;
  margin-bottom: 1em;
}

@media screen and (max-width: 1439px) {
  h2,
  .h2 {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  h2,
  .h2 {
    font-size: 1.25rem;
  }
}
h3 {
  font-size: 1.5rem;
}

p,
ul,
ol,
table {
  margin-top: 0;
  margin-bottom: 1.66rem;
}

p:last-child,
ul:last-child,
ol:last-child,
table:last-child {
  margin-bottom: 0;
}

p {
  margin-bottom: 24px;
}

a {
  text-decoration: none;
}

q {
  font-style: italic;
}

.btn {
  display: inline-block;
  padding: 16px 24px;
  color: #fff;
  line-height: 1.166;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  background: none;
  border: none;
}

.btn:disabled {
  cursor: not-allowed;
}

.btn strong {
  text-transform: none;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.04em;
  font-family: var(--font-display, "Vidaloka", Times, serif);
}

@media screen and (min-width: 1200px) {
  .btn {
    padding: 24px 36px;
    font-size: 16px;
  }
  .btn strong {
    font-size: 22px;
  }
}
.btn.btn-primary {
  border-radius: 10px;
  background-image: linear-gradient(160deg, #4776e6, #8e54e9);
  background-repeat: repeat-x;
  -webkit-box-shadow: 0 10px 20px rgba(142, 84, 233, 0.4);
  box-shadow: 0 10px 20px rgba(142, 84, 233, 0.4);
  position: relative;
  z-index: 0;
  padding-right: 56px;
  text-align: left;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.btn.btn-primary:after {
  content: "⟶";
  color: #fff;
  margin-left: 1em;
  position: absolute;
  top: 50%;
  right: 24px;
  margin-top: -0.5em;
  -webkit-transition: transform 300ms ease-in-out;
  -o-transition: transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

@media screen and (min-width: 1200px) {
  .btn.btn-primary {
    padding-right: 72px;
  }
  .btn.btn-primary:after {
    right: 36px;
  }
}
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus {
  box-shadow: 0 0 10px rgba(142, 84, 233, 0.4);
}

.btn.btn-primary:hover:after, .btn.btn-primary:active:after, .btn.btn-primary:focus:after {
  -webkit-transform: translate(50%, 0);
  -ms-transform: translate(50%, 0);
  -o-transform: translate(50%, 0);
  transform: translate(50%, 0);
}

.btn.btn-secondary {
  position: relative;
  z-index: 0;
  padding: 16px 40px 16px 0;
  text-align: left;
  line-height: 1;
  -webkit-transition: all 400ms cubic-bezier(0.63, 0.1, 0.4, 0.86);
  -o-transition: all 400ms cubic-bezier(0.63, 0.1, 0.4, 0.86);
  transition: all 400ms cubic-bezier(0.63, 0.1, 0.4, 0.86);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 14px;
  color: var(--brand-purple);
}

.btn.btn-secondary:before {
  content: "";
  position: absolute;
  left: -23px;
  top: 50%;
  margin-top: -23px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQYV2P8//9/AyMjYwMDEmBE5sDYFAoCAJmnBAYW6PnrAAAAAElFTkSuQmCC") repeat top left;
  border-radius: 23px;
  width: 46px;
  height: 46px;
  -webkit-transition: all 400ms cubic-bezier(0.63, 0.1, 0.4, 0.86);
  -o-transition: all 400ms cubic-bezier(0.63, 0.1, 0.4, 0.86);
  transition: all 400ms cubic-bezier(0.63, 0.1, 0.4, 0.86);
}

.btn.btn-secondary:after {
  content: "⟶";
  color: var(--brand-purple);
  margin-left: 1em;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -0.5em;
  -webkit-transition: transform 400ms cubic-bezier(0.63, 0.1, 0.4, 0.86);
  -o-transition: transform 400ms cubic-bezier(0.63, 0.1, 0.4, 0.86);
  transition: transform 400ms cubic-bezier(0.63, 0.1, 0.4, 0.86);
}

.btn.btn-secondary:hover, .btn.btn-secondary:active, .btn.btn-secondary:focus {
  padding-left: 10px;
  padding-right: 50px;
}

.btn.btn-secondary:hover:before, .btn.btn-secondary:active:before, .btn.btn-secondary:focus:before {
  width: calc(100% + 46px);
}

.btn-link {
  position: relative;
  display: inline-block;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
}

.btn-link:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background-image: linear-gradient(to right, var(--link-a, var(--brand-blue)) 0%, var(--link-b, var(--brand-purple)) 100%);
  background-repeat: repeat-x;
  transition: transform 300ms 300ms ease-in-out;
  transform-origin: right center;
}

.btn-link:after {
  content: "⟶";
  position: absolute;
  top: 50%;
  right: -2em;
  background-image: linear-gradient(160deg, var(--link-a, var(--brand-blue)), var(--link-b, var(--brand-purple)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}

.btn-link:hover:before, .btn-link:focus:before {
  transform: scale(0, 1);
  transition-delay: 0ms;
}

.btn-link:hover:after, .btn-link:focus:after {
  transform: translate(0, -50%);
  opacity: 1;
  transition-delay: 300ms, 300ms;
}

.btn-link--flow:after {
  content: none;
}

#main-nav {
  position: absolute;
  top: 2.7777777778vw;
  left: 0;
  right: 0;
  z-index: 1000;
  padding-left: 4.1666666667vw;
  padding-right: 4.1666666667vw;
}

#main-nav::after {
  display: block;
  clear: both;
  content: "";
}

@media screen and (max-width: 991px) {
  #main-nav {
    top: 24px;
    padding-left: 36px;
    padding-right: 36px;
  }
}
#main-nav .socials {
  float: right;
}

@media screen and (min-width: 768px) {
  #main-nav .socials {
    margin-left: 4.1666666667vw;
  }
}
#main-nav .btn-link {
  float: right;
  color: inherit;
  font-weight: 700;
  display: block;
  position: relative;
  margin-left: 4.1666666667vw;
}

@media screen and (max-width: 767px) {
  #main-nav .btn-link {
    display: none;
  }
}
#main-nav .btn-link:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-image: linear-gradient(to right, #4776e6 0%, #8e54e9 100%);
  background-repeat: repeat-x;
  -webkit-transition: transform 300ms 300ms ease-in-out;
  -o-transition: transform 300ms 300ms ease-in-out;
  transition: transform 300ms 300ms ease-in-out;
  transform-origin: right center;
}

#main-nav .btn-link:after {
  content: "⟶";
  position: absolute;
  top: 50%;
  right: -1.75em;
  background-image: linear-gradient(160deg, #4776e6, #8e54e9);
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}

#main-nav .btn-link:hover:before, #main-nav .btn-link:active:before, #main-nav .btn-link:focus:before {
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  -o-transform: scale(0, 1);
  transform: scale(0, 1);
  transition-delay: 0ms;
}

#main-nav .btn-link:hover:after, #main-nav .btn-link:active:after, #main-nav .btn-link:focus:after {
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  transition-delay: 300ms, 300ms;
  opacity: 1;
}

.socials {
  list-style: none;
  padding: 0;
  margin: 0;
}

.socials li {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  color: var(--text);
  position: relative;
}

.socials li:not(:last-child) {
  margin-right: 0.5em;
}

.socials li a {
  color: inherit;
  position: relative;
  display: inline-block;
  isolation: isolate;
}

/* Original dot — visible always, sits inline to the right of the icon */
.socials li:after {
  content: "";
  display: inline-block;
  height: 5px;
  width: 5px;
  background-image: linear-gradient(160deg, var(--brand-blue), var(--brand-purple));
  border-radius: 50%;
  vertical-align: middle;
}

/* Progressive ring border — draws around the icon on hover (header only). */
.socials--halo li a:after {
  --halo-end: 0deg;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 90deg, var(--brand-blue) 0deg, var(--brand-purple) calc(var(--halo-end) / 2), var(--brand-blue) var(--halo-end), transparent var(--halo-end));
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 4px), #000 50%, transparent 50%);
  mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 4px), #000 50%, transparent 50%);
  transition: --halo-end 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.socials--halo li a:hover:after,
.socials--halo li a:focus:after {
  --halo-end: 360deg;
}

/* Nudge the rest dot a half-pixel to align horizontally with the halo's
   start point (the halo's translate(-50%) centering lands on a half-pixel),
   and drop it behind so the halo ring draws over it. */
.socials--halo li:after {
  position: relative;
  left: -0.5px;
  z-index: -1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* On hover, shrink the dot so it tucks under the closing ring. */
.socials--halo li:hover:after,
.socials--halo li:focus-within:after {
  transform: scale(0.5);
}

/* .socials--halo li:hover:after,
.socials--halo li:focus:after {
  opacity: 0;
} */
@media screen and (max-width: 991px) {
  .socials li {
    font-size: 20px;
  }
  .socials li:after {
    height: 4px;
    width: 4px;
    margin-left: 4px;
  }
  .socials li a:after {
    width: 48px;
    height: 48px;
  }
}
@media screen and (min-width: 768px) {
  .socials .socials--mail {
    display: none;
  }
}
#main-footer {
  text-align: center;
  z-index: 1000;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  padding: 120px 4.1666666667vw 72px;
  background-color: var(--bg-elevated);
  margin: 0 5px 5px 5px;
  transition: background-color 0.3s ease;
}

#main-footer a {
  color: inherit;
}

.cookies-modal {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: calc(100% - 40px);
  max-width: 480px;
  z-index: 9998;
  background-color: var(--bg-elevated);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 20px 60px 20px 30px;
  font-size: 14px;
  line-height: 1.5;
}

.cookies-modal p a {
  text-decoration: underline;
}

.cookies-modal .btn-close {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  z-index: 1;
  top: 15px;
  right: 10px;
  text-align: center;
  line-height: 30px;
  /* it's a <button> now — strip the UA chrome, keep the icon styling */
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.cookies-modal .btn-close:before {
  content: "\f00d";
  display: inline-block;
  font: normal 900 14px/1 "Font Awesome 7 Free";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes id-leak-breathe {
  0%, 100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}
.id-blog, .id-contact, .id-start, .id-faq, .id-folio, .id-product, .id-bridge, .id-craft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.id-wrap {
  width: calc(var(--content-cols) * var(--grid-size));
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 1139px) {
  .id-wrap {
    width: auto;
    margin-left: var(--grid-size);
    margin-right: var(--grid-size);
  }
}

.id-blog, .id-contact, .id-start, .id-faq, .id-folio, .id-product, .id-bridge, .id-craft {
  position: relative;
  z-index: 0;
}
.id-blog::before, .id-contact::before, .id-start::before, .id-faq::before, .id-folio::before, .id-product::before, .id-bridge::before, .id-craft::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--grid-margin) + var(--grid-size) / 2);
  bottom: calc(var(--grid-margin) - var(--grid-size) / 2);
  left: 50%;
  transform: translateX(-50%);
  margin-left: calc(var(--grid-size) / 2);
  width: min(var(--grid-cols) * var(--grid-size), 100%);
}
@media screen and (max-width: 1139px) {
  .id-blog::before, .id-contact::before, .id-start::before, .id-faq::before, .id-folio::before, .id-product::before, .id-bridge::before, .id-craft::before {
    width: calc(100% - var(--grid-size));
  }
}
.id-blog::before, .id-contact::before, .id-start::before, .id-faq::before, .id-folio::before, .id-product::before, .id-bridge::before, .id-craft::before {
  pointer-events: none;
  background-image: var(--dot-tile);
  background-repeat: repeat;
  background-size: var(--grid-size) var(--grid-size);
  background-position: 0 0;
  opacity: 0.28;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 42%, #000 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.12) 100%);
  mask-image: radial-gradient(120% 90% at 50% 42%, #000 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.12) 100%);
}
.id-blog, .id-contact, .id-start, .id-faq, .id-folio, .id-product, .id-bridge, .id-craft {
  --content-cols: 34;
  justify-content: flex-start;
  margin: 0 var(--frame);
  padding: calc(3 * var(--grid-size)) 0;
  transition: background-color 0.3s ease;
}

.id-article__end, .id-form__price {
  position: relative;
}

.id-article__end::before, .id-form__price::before {
  content: "+";
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: var(--id-orange);
  opacity: 0.75;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(3.5% 24% at 0% 8%, rgba(var(--leak-c, 146, 44, 133), calc(0.75 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.262 * var(--leak-boost, 1))) 40%, rgba(var(--leak-c, 146, 44, 133), 0) 80%), radial-gradient(6% 38% at 0% 8%, rgba(var(--leak-c, 146, 44, 133), calc(0.45 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.18 * var(--leak-boost, 1))) 45%, rgba(var(--leak-c, 146, 44, 133), 0) 90%), radial-gradient(1.8% 18% at 0% 42%, rgba(var(--leak-c, 146, 44, 133), calc(0.5 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.175 * var(--leak-boost, 1))) 40%, rgba(var(--leak-c, 146, 44, 133), 0) 80%), radial-gradient(3% 30% at 0% 42%, rgba(var(--leak-c, 146, 44, 133), calc(0.26 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.104 * var(--leak-boost, 1))) 45%, rgba(var(--leak-c, 146, 44, 133), 0) 90%), radial-gradient(3% 26% at 0% 74%, rgba(var(--leak-c, 146, 44, 133), calc(0.68 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.238 * var(--leak-boost, 1))) 40%, rgba(var(--leak-c, 146, 44, 133), 0) 80%), radial-gradient(5% 42% at 0% 74%, rgba(var(--leak-c, 146, 44, 133), calc(0.4 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.16 * var(--leak-boost, 1))) 45%, rgba(var(--leak-c, 146, 44, 133), 0) 90%), radial-gradient(5% 16% at 0% 102%, rgba(var(--leak-c, 146, 44, 133), calc(0.6 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.21 * var(--leak-boost, 1))) 40%, rgba(var(--leak-c, 146, 44, 133), 0) 80%), radial-gradient(8% 26% at 0% 102%, rgba(var(--leak-c, 146, 44, 133), calc(0.36 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.144 * var(--leak-boost, 1))) 45%, rgba(var(--leak-c, 146, 44, 133), 0) 90%), radial-gradient(40% 3.5% at 26% 0%, rgba(var(--leak-c, 146, 44, 133), calc(0.7 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.245 * var(--leak-boost, 1))) 40%, rgba(var(--leak-c, 146, 44, 133), 0) 80%), radial-gradient(62% 6% at 26% 0%, rgba(var(--leak-c, 146, 44, 133), calc(0.42 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.168 * var(--leak-boost, 1))) 45%, rgba(var(--leak-c, 146, 44, 133), 0) 90%), radial-gradient(28% 3% at 82% 0%, rgba(var(--leak-c, 146, 44, 133), calc(0.5 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.175 * var(--leak-boost, 1))) 40%, rgba(var(--leak-c, 146, 44, 133), 0) 80%), radial-gradient(44% 5% at 82% 0%, rgba(var(--leak-c, 146, 44, 133), calc(0.3 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.12 * var(--leak-boost, 1))) 45%, rgba(var(--leak-c, 146, 44, 133), 0) 90%), radial-gradient(3% 33% at 100% 72%, rgba(var(--leak-c, 146, 44, 133), calc(0.48 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.168 * var(--leak-boost, 1))) 40%, rgba(var(--leak-c, 146, 44, 133), 0) 80%), radial-gradient(5% 52% at 100% 72%, rgba(var(--leak-c, 146, 44, 133), calc(0.26 * var(--leak-boost, 1))), rgba(var(--leak-c, 146, 44, 133), calc(0.104 * var(--leak-boost, 1))) 45%, rgba(var(--leak-c, 146, 44, 133), 0) 90%);
  background-repeat: no-repeat;
}

@property --grid-size {
  syntax: "<length>";
  inherits: true;
  initial-value: 47px;
}
@font-face {
  font-family: "EYN Dots";
  src: url("./fonts/eyn-dots.woff2") format("woff2");
  unicode-range: U+2059;
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-display:
  	"EYN Dots", "Noto Serif Display", "Noto Serif", Georgia, Times, serif;
  --id-orange: #ff7c1f;
  --id-purple: #6707f8;
  --id-purple-lit: #a165fb;
  --brand-blue: var(--id-orange);
  --brand-purple: var(--id-purple);
  --id-ink: #14141b;
  --id-ink-tile: #0f0f14;
  --id-paper-ink: #3f1a72;
  --id-paper-ink-soft: rgba(63, 26, 114, 0.82);
  --dot-size: 2px;
  --grid-size: round(calc(min(2.2vw, 45.06px) + var(--dot-size)), 1px);
  --grid-cols: 41;
  --grid-margin: calc(
  	var(--grid-size) / 2
  );
  --content-cols: 28;
  --frame: 0px;
  --hero-side: var(--grid-size);
  --hairline: rgba(255, 255, 255, 0.1);
  --dot-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='rgb(150,150,165)' fill-opacity='0.55'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.6 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media screen and (max-width: 1139px) {
  :root {
    --grid-cols: 20;
    --grid-size: round(calc((100vw - 2 * var(--frame)) / 21), 1px);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --grid-cols: 12;
    --grid-size: round(calc((100vw - 2 * var(--frame)) / 13), 1px);
  }
}
:root {
  --bg-elevated: #15111c;
}

.id-twinkles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  contain: layout paint;
}

.id-twinkle {
  --size: 8px;
  position: absolute;
  will-change: transform, opacity;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  background: radial-gradient(closest-side, color-mix(in srgb, currentColor 55%, transparent) 0%, color-mix(in srgb, currentColor 22%, transparent) 32%, color-mix(in srgb, currentColor 6%, transparent) 60%, transparent 100%), radial-gradient(closest-side, currentColor 0%, currentColor 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%, 2px 2px;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .id-twinkle {
    display: none;
  }
}
.id-soft {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .id-soft {
    opacity: 1;
  }
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--id-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.id-blogteasers strong,
.id-craft__sign {
  font-style: italic;
}

.id-folio h2 strong,
.id-product h2 strong {
  --strong-c: var(--id-purple);
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong,
.h2 strong {
  color: var(--strong-c, var(--id-orange));
  font-weight: 300;
  font-style: italic;
}
h1 strong:before,
h2 strong:before,
h3 strong:before,
h4 strong:before,
h5 strong:before,
h6 strong:before,
.h2 strong:before {
  content: none;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  position: relative;
  z-index: 0;
}

.id-wrap {
  position: relative;
}
@media screen and (max-width: 767px) {
  .id-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }
}

.id-eyebrow {
  font-size: 12px;
  line-height: 24px;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--id-orange);
  margin: 0 0 24px;
}
@media screen and (max-width: 767px) {
  .id-eyebrow {
    font-size: max(12px, 2.5vw);
  }
}

.id-eyebrow:before {
  content: "⁙";
  margin-right: 0.7em;
  opacity: 0.7;
}

.id-sep {
  background-image: linear-gradient(160deg, var(--id-purple), var(--id-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  padding: 0 0.12em;
}

.id-hero {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-sizing: border-box;
  min-height: 100svh;
  margin: var(--frame) var(--frame) 0;
  padding: 0;
  background-color: var(--bg-hero);
  background-image: url("./images/noise-lift.png"), linear-gradient(180deg, transparent, var(--id-ink-tile)), url("./images/bg-hero-left-fade.jpg"), linear-gradient(160deg, #1c034d 0%, #1b0241 100%);
  background-size: 96px 96px, 100% calc(4 * var(--grid-size)), auto 100%, 100% 100%;
  background-position: 0 0, left bottom, left center, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
@media screen and (max-width: 1139px) {
  .id-hero {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 767px) {
  .id-hero {
    min-height: auto;
  }
}

.id-hero__veil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: calc(4 * var(--grid-size));
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--id-ink-tile));
}

.id-hero__inner::before,
.id-hero__fine::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-image: var(--dot-tile);
  background-repeat: repeat;
  background-position: 0 0;
  image-rendering: pixelated;
}

.id-hero__inner::before {
  background-size: var(--grid-size) var(--grid-size);
  top: var(--seat);
  right: calc(1 * var(--grid-size));
  bottom: calc(2 * var(--grid-size));
  left: var(--seat);
}
@media screen and (max-width: 1139px) {
  .id-hero__inner::before {
    left: calc(1 * var(--grid-size));
    right: calc(1 * var(--grid-size));
  }
}
.id-hero__inner::before {
  -webkit-mask-image: radial-gradient(130% 105% at 72% 40%, #000 0%, rgba(0, 0, 0, 0.6) 42%, rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0.09) 100%);
  mask-image: radial-gradient(130% 105% at 72% 40%, #000 0%, rgba(0, 0, 0, 0.6) 42%, rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0.09) 100%);
}

.id-hero__fine {
  position: relative;
  z-index: 0;
  overflow: clip;
  margin: 10px 10px 10px 0;
  border-radius: 10px;
  --fp: calc(var(--grid-size) / 2);
  --seat: calc(var(--hero-side) + var(--fp) / 2 - 10px);
  box-shadow: 0 10px 30px rgba(8, 6, 24, 0.4);
  background-color: #151320;
  background-image: url("./images/bg-hero-right-2.jpg");
  background-image: image-set(url("./images/bg-hero-right-2.jpg") 1x, url("./images/bg-hero-right-2@2x.jpg") 2x);
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 1139px) {
  .id-hero__fine {
    display: block;
    margin: 0 10px 10px;
    --fp: calc((100vw - 2 * var(--hero-side)) / 37);
    height: calc(40 * var(--fp));
  }
}

.id-cell__face--spec {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: var(--fp);
  border: 1px solid color-mix(in srgb, var(--id-purple) 35%, transparent);
  background: color-mix(in srgb, var(--id-purple) 20%, transparent);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: max(15px, var(--fp));
  line-height: 1.25;
  color: var(--id-orange);
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.id-cell__face--spec > span {
  min-width: 0;
}

@media screen and (max-width: 767px) {
  .id-cell__face--spec {
    padding: var(--fp);
    font-size: max(12px, var(--fp));
  }
}
.id-hero__fine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("./images/bg-hero-right-1.jpg");
  background-image: image-set(url("./images/bg-hero-right-1.jpg") 1x, url("./images/bg-hero-right-1@2x.jpg") 2x);
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: id-fine-alternate 30s ease-in-out infinite;
  will-change: opacity;
}

@keyframes id-fine-alternate {
  0%, 38% {
    opacity: 0;
  }
  50%, 88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .id-hero__fine::after {
    animation: none;
  }
}
.id-hero__fine::before {
  background-size: var(--fp) var(--fp);
  inset: var(--seat);
  opacity: 0.5;
}

.id-hero__board {
  position: absolute;
  width: calc(36.0454545455 * var(--fp));
  height: calc(36.0454545455 * var(--fp));
  left: calc(var(--seat) + round(nearest, (100% - 36.0454545455 * var(--fp)) / 2 - var(--seat), var(--fp)));
  top: calc(var(--seat) + round(nearest, (100% - 36.0454545455 * var(--fp)) / 2 - var(--seat), var(--fp)));
}

.id-hero__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.id-cell {
  position: absolute;
  left: calc((2 + var(--bx) * 8) * var(--fp));
  top: calc((2 + var(--by) * 8) * var(--fp));
  width: calc(8 * var(--fp));
  height: calc(8 * var(--fp));
}

.id-cell__face {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.id-cell > .id-cell__face--glyph {
  visibility: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.id-cell.show-spec > .id-cell__face--glyph {
  visibility: hidden;
}

.id-cell.show-spec > .id-cell__face--spec {
  visibility: visible;
}

html.js .id-hero__board:not(.is-static) .id-cell__face--glyph img,
html.js .id-hero__board:not(.is-static) img.id-hero__lines {
  visibility: hidden;
}

.id-cell__face--glyph img,
.id-cell__face--glyph svg {
  height: 100%;
  width: auto;
  max-width: none;
}

.id-hero__inner {
  position: relative;
  z-index: 0;
  min-width: 0;
  --seat: calc(var(--hero-side) + var(--grid-size) / 4);
  container: id-hero-half/inline-size;
  padding: var(--seat) calc(1 * var(--grid-size)) calc(1.75 * var(--grid-size)) var(--seat);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (max-width: 1139px) {
  .id-hero__inner {
    padding-left: calc(1 * var(--grid-size));
    padding-right: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-hero__inner {
    padding-top: var(--seat);
    padding-bottom: calc(1.75 * var(--grid-size));
  }
}

.id-hero__inner::after {
  content: "";
  position: absolute;
  top: calc(var(--seat) + var(--grid-size) / 2);
  left: calc(var(--seat) + 5.652174 * var(--grid-size));
  right: calc(var(--seat) - var(--grid-size) / 2);
  height: 1px;
  background: var(--hairline);
  pointer-events: none;
}
@media screen and (max-width: 1139px) {
  .id-hero__inner::after {
    left: calc(calc(1 * var(--grid-size)) + 5.652174 * var(--grid-size));
    right: calc(3 * var(--grid-size));
  }
}

.id-hero__inner .id-lockup {
  margin-bottom: 0;
}

.id-hero__tick {
  flex: 1;
  min-height: var(--grid-size);
  width: 1px;
  margin: var(--grid-size) 0 var(--grid-size) calc(2 * var(--grid-size));
  background: var(--hairline);
  pointer-events: none;
}

.id-hero__grow {
  flex: 1;
}

.id-lockup {
  --lk: var(--grid-size);
  position: relative;
  display: block;
  height: var(--lk);
  width: calc(4.652174 * var(--lk));
  text-decoration: none;
  color: var(--text);
}

.id-lockup__mark {
  position: absolute;
  top: calc(-0.021739 * var(--lk));
  left: calc(-0.021739 * var(--lk));
  width: calc(4.673913 * var(--lk));
  height: calc(1.043478 * var(--lk));
  max-width: none;
}

.id-hero h1 strong {
  white-space: inherit;
}

.id-hero h1 {
  font-size: clamp(32px, 3vw, 61.4px);
  line-height: calc(2 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(2 * var(--grid-size)) - 0.714 * clamp(32px, 3vw, 61.4px));
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-hero h1 {
    font-size: clamp(34px, 4.04vw, 46px);
    padding-top: calc(calc(2 * var(--grid-size)) - 0.714 * clamp(34px, 4.04vw, 46px));
  }
}
.id-hero h1 {
  max-width: calc(20 * var(--grid-size));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-hero h1 {
    line-height: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-hero h1 {
    font-size: max(32px, 6.6666666667vw);
    line-height: calc(1.5 * var(--grid-size));
    padding-top: calc(calc(2 * var(--grid-size)) - 0.714 * max(32px, 6.6666666667vw));
  }
  .id-hero h1 br {
    display: none;
  }
}

.id-hero__lead {
  font-size: clamp(16px, 1vw, 20.5px);
  line-height: calc(1 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(16px, 1vw, 20.5px));
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-hero__lead {
    font-size: clamp(17px, 1.93vw, 22px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(17px, 1.93vw, 22px));
  }
}
.id-hero__lead {
  color: var(--text-muted);
  max-width: calc(18 * var(--grid-size));
  margin: 0 0 calc(2 * var(--grid-size));
  font-weight: 100;
}
@media screen and (max-width: 767px) {
  .id-hero__lead {
    font-weight: 300;
    font-size: max(16px, 3.3333333333vw);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * max(16px, 3.3333333333vw));
  }
}

.id-hero__lead strong {
  font-weight: 600;
  color: var(--text);
}

.id-hero__foot {
  margin-top: auto;
  padding-top: calc(1 * var(--grid-size));
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(1 * var(--grid-size));
}
@container id-hero-half (width < 480px) {
  .id-hero__foot {
    margin-top: 0;
    padding-top: 0;
  }
}

.id-hero__ctalead {
  font-size: clamp(15px, 1.05vw, 21.5px);
  line-height: calc(1 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(15px, 1.05vw, 21.5px));
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-hero__ctalead {
    font-size: clamp(16px, 1.76vw, 20px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(16px, 1.76vw, 20px));
  }
}
.id-hero__ctalead {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--text-muted);
}
@media screen and (max-width: 767px) {
  .id-hero__ctalead {
    font-size: max(15px, 3.125vw);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * max(15px, 3.125vw));
  }
}

.id-hero__cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: calc(0.5 * var(--grid-size));
  }
  .id-hero__cta::after {
    display: none;
  }
}
@container id-hero-half (width < 480px) {
  .id-hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: calc(0.5 * var(--grid-size));
  }
  .id-hero__cta::after {
    display: none;
  }
}

.id-hero__cta::after {
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.id-hero__cta .btn-link {
  order: 2;
  margin-left: 1.75em;
  margin-right: 2em;
  white-space: nowrap;
}
@container id-hero-half (width < 480px) {
  .id-hero__cta .btn-link {
    align-self: center;
  }
}

.id-hero__cta .btn {
  height: auto;
  min-height: calc(2 * var(--grid-size));
  padding-top: 12px;
  padding-bottom: 12px;
  display: inline-flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .id-hero__cta .btn {
    min-height: max(calc(1.5 * var(--grid-size)), 44px);
    padding: 10px calc(0.5 * var(--grid-size));
  }
}

.id-hero__mailrow {
  position: absolute;
  left: calc(50% + var(--grid-size));
  bottom: calc(2 * var(--grid-size));
  height: calc(2 * var(--grid-size));
  display: flex;
  align-items: center;
  z-index: 1;
}
@media screen and (max-width: 1139px) {
  .id-hero__mailrow {
    position: static;
    height: auto;
    justify-content: center;
    margin: calc(0.5 * var(--grid-size)) calc(1 * var(--grid-size)) calc(1 * var(--grid-size));
  }
}

.id-hero__mailrow .btn-link {
  margin-left: 1.75em;
}

.id-hero__cta .btn.btn-primary {
  justify-content: center;
  line-height: 1.3;
  padding-left: calc(0.5 * var(--grid-size));
  padding-right: calc(0.5 * var(--grid-size));
}
@media screen and (min-width: 768px) {
  .id-hero__cta .btn.btn-primary {
    width: calc(6 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-hero__cta .btn.btn-primary {
    min-width: calc(6 * var(--grid-size));
  }
}
.id-hero__cta .btn.btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 22px 50px -16px rgba(249, 115, 22, 0.45);
}

.id-hero__cta .btn.btn-primary::after {
  position: static;
  margin-left: 0.75em;
}

@container id-hero-half (width < 480px) {
  .id-hero__cta .btn.btn-primary {
    justify-content: flex-start;
    text-align: left;
    padding-right: calc(1.5 * var(--grid-size));
  }
  .id-hero__cta .btn.btn-primary::after {
    position: absolute;
    right: calc(0.5 * var(--grid-size));
    top: 50%;
    margin-top: -0.5em;
    margin-left: 0;
  }
}
.id-hero__cta .btn-primary.id-cta--logo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(to bottom right, #6707f8 0%, #ff7c1f 100%);
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  box-shadow: 0 8px 24px rgba(255, 124, 31, 0.28);
}

.id-hero__cta .btn-primary.id-cta--web {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(to bottom right, #4816e9 0%, #6707f8 100%);
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  box-shadow: 0 8px 24px rgba(72, 22, 233, 0.32);
}

@media screen and (max-width: 767px) {
  .id-hero h1,
  .id-hero__foot {
    padding-top: 0;
  }
}
@media screen and (max-width: 767px) {
  .id-hero__cta .btn.btn-primary::after {
    top: 0;
    margin-top: 0;
    transform: none;
  }
}
#main-nav {
  top: calc(var(--hero-side) + var(--grid-size) / 4);
  left: 50%;
  right: 0;
  padding-left: calc(var(--hero-side) + var(--grid-size) / 4);
  padding-right: calc(var(--hero-side) + var(--grid-size) / 4 + calc(1.25 * var(--grid-size)));
  height: var(--grid-size);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
#main-nav .id-nav {
  margin-right: auto;
}
@media screen and (min-width: 1140px) {
  #main-nav .socials {
    margin-left: 0;
  }
}
@media screen and (max-width: 1139px) {
  #main-nav {
    top: calc(var(--hero-side) + var(--grid-size) / 4);
    left: calc(var(--grid-size) / 2);
    right: calc(var(--grid-size) / 2);
    padding-left: calc(var(--grid-size) / 2);
    padding-right: calc(var(--grid-size) / 2);
    height: var(--grid-size);
    flex-direction: row;
  }
}

.id-burger {
  --bsz: calc(1 * var(--grid-size));
  position: fixed;
  top: calc(var(--hero-side) + var(--grid-size) / 4 + var(--grid-size) / 2 - var(--bsz) / 2);
  right: calc(var(--hero-side) + var(--grid-size) / 4 + var(--grid-size) / 2 - var(--bsz) / 2);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--bsz);
  height: var(--bsz);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(to bottom right, #4816e9 0%, #6707f8 35.6%, #ff7c1f 100%);
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(103, 7, 248, 0.32);
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}
.id-burger:hover, .id-burger:focus-visible {
  transform: scale(1.08);
  filter: brightness(1.15);
  box-shadow: 0 0 14px rgba(103, 7, 248, 0.5);
}
@media screen and (max-width: 1139px) {
  .id-burger {
    right: calc(var(--grid-size) + var(--grid-size) / 2 - var(--bsz) / 2);
  }
}
@media screen and (max-width: 767px) {
  .id-burger {
    --bsz: calc(1.75 * var(--grid-size));
    font-size: var(--grid-size);
  }
}

.id-sheet {
  width: min(80vw, clamp(480px, 22vw, 900px));
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: 0;
  margin: 0 0 0 auto;
  padding: calc(2 * var(--grid-size)) calc(1.5 * var(--grid-size));
  background: var(--bg-hero);
  color: var(--text);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, display 0.35s allow-discrete, overlay 0.35s allow-discrete;
  transform: translateX(100%);
  opacity: 0;
}

.id-sheet[open] {
  transform: translateX(0);
  opacity: 1;
}
@starting-style {
  .id-sheet[open] {
    transform: translateX(100%);
    opacity: 0;
  }
}

.id-sheet::backdrop {
  background: rgba(8, 6, 15, 0.45);
  transition: background 0.35s ease, display 0.35s allow-discrete, overlay 0.35s allow-discrete;
}

@starting-style {
  .id-sheet[open]::backdrop {
    background: rgba(8, 6, 15, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .id-sheet,
  .id-sheet::backdrop {
    transition: none;
  }
}
.id-sheet__close {
  position: absolute;
  top: calc(0.5 * var(--grid-size));
  right: calc(0.5 * var(--grid-size));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(1 * var(--grid-size));
  height: calc(1 * var(--grid-size));
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
}

.id-sheet__links {
  list-style: none;
  margin: calc(1 * var(--grid-size)) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(0.5 * var(--grid-size));
}

.id-sheet__links a {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(20px, 2.166667vw, 32px);
  font-weight: 700;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--text);
  transition: color 0.25s ease;
}

.id-sheet__links a::before {
  content: "⁙ ";
  opacity: 0.7;
  font-weight: 300;
}

.id-sheet__links a[href="#logo"]:hover,
.id-sheet__links a[href="#logo"]:focus-visible,
.id-sheet__links a[href="#about"]:hover,
.id-sheet__links a[href="#about"]:focus-visible,
.id-sheet__links a[href="#contact"]:hover,
.id-sheet__links a[href="#contact"]:focus-visible {
  color: var(--id-orange);
}

.id-sheet__links a[href="#gallery"]:hover,
.id-sheet__links a[href="#gallery"]:focus-visible,
.id-sheet__links a[href="#website"]:hover,
.id-sheet__links a[href="#website"]:focus-visible,
.id-sheet__links a[href="#faq"]:hover,
.id-sheet__links a[href="#faq"]:focus-visible {
  color: var(--id-purple);
}

.id-sheet__label {
  margin: calc(1.5 * var(--grid-size)) 0 0;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.id-sheet__langs {
  list-style: none;
  margin: calc(0.5 * var(--grid-size)) 0 0;
  padding: 0;
  display: flex;
  gap: calc(1 * var(--grid-size));
}

.id-sheet__langs a {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(20px, 2.166667vw, 32px);
  font-weight: 700;
  text-decoration: none;
  color: var(--text-muted);
}

.id-sheet__langs a.active {
  color: var(--id-orange);
}

.btn {
  padding: 24px 32px;
  font-size: 16px;
  line-height: 24px;
}
@media screen and (max-width: 767px) {
  .btn {
    font-size: max(16px, 3.3333333333vw);
    line-height: 1.5;
  }
}

.btn.btn-primary {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(to bottom right, #4816e9 0%, #6707f8 35.6%, #ff7c1f 100%);
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(103, 7, 248, 0.32);
  padding-right: 72px;
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
  box-shadow: 0 0 8px rgba(103, 7, 248, 0.4);
}

.btn.btn-secondary {
  color: var(--text);
  padding: 24px 48px 24px 0;
  line-height: 24px;
}

.btn.btn-secondary::before {
  left: -24px;
  top: 50%;
  margin-top: -24px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAE0lEQVR4nGNgGISgL+RlA52tBAAFIgJMx86S+gAAAABJRU5ErkJggg==");
  background-repeat: repeat;
  background-size: 8px 8px;
  image-rendering: pixelated;
  opacity: 0.55;
}

.btn.btn-secondary:hover::before,
.btn.btn-secondary:focus::before,
.btn.btn-secondary:active::before {
  width: calc(100% + 48px);
  opacity: 0.85;
}

.btn.btn-secondary::after {
  background-image: linear-gradient(160deg, var(--id-purple), var(--id-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.btn.btn-primary::after,
.btn.btn-secondary::after {
  top: 0;
  bottom: 0;
  margin-top: 0;
  height: auto;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transform: translateY(-0.228em);
}

.btn.btn-primary:hover::after,
.btn.btn-primary:active::after,
.btn.btn-primary:focus::after {
  transform: translate(50%, -0.228em);
}

#main-nav,
#main-footer,
.id-faq {
  --link-a: var(--id-orange);
  --link-b: var(--id-purple);
}

.id-craft {
  padding-left: 5vw;
  padding-right: 5vw;
  background-color: #05061a;
  background-image: url("./images/noise-lift.png"), linear-gradient(180deg, rgba(29, 12, 64, 0) 78%, #1d0c40 100%), radial-gradient(60% 50% at 74% 4%, rgba(64, 52, 150, 0.22), rgba(64, 52, 150, 0) 70%), linear-gradient(160deg, #05061a 0%, #0d0a2e 55%, #1d0c40 100%);
  background-size: 96px 96px, 100% 100%, 100% 100%, 100% 100%;
}

.id-craft::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(38% 52% at 58% 30%, rgba(255, 124, 31, 0.13), transparent 70%), radial-gradient(50% 40% at 42% 78%, rgba(255, 124, 31, 0.05), transparent 70%);
  background-repeat: no-repeat;
}

.id-craft__letter-col {
  max-width: calc(24 * var(--grid-size));
  margin: 0 auto calc(3 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-craft__letter-col {
    margin-bottom: 48px;
  }
}

.id-craft__dialog {
  display: grid;
  grid-template-columns: calc(5 * var(--grid-size)) minmax(0, 1fr);
  column-gap: calc(1 * var(--grid-size));
  align-items: start;
}
@media screen and (max-width: 767px) {
  .id-craft__dialog {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
}

.id-craft__sheet {
  position: relative;
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  padding: calc(calc(1 * var(--grid-size)) - 1px) calc(1 * var(--grid-size));
  --sheet: #fdfcff;
  background-color: #fdfcff;
  background-image: url("./images/noise-ink.png"), url("./images/daylight.jpg");
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  color: var(--id-ink);
}
@media screen and (max-width: 767px) {
  .id-craft__sheet {
    padding: 23px 24px;
  }
}

.id-craft__dateline {
  line-height: calc(1 * var(--grid-size));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-craft__dateline {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-craft__dateline {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
.id-craft__dateline {
  text-align: right;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--id-purple);
}

.id-craft__sheet::before,
.id-craft__sheet::after {
  content: "";
  position: absolute;
  top: calc(1 * var(--grid-size));
  width: 0;
  height: 0;
  border: 10px solid transparent;
}

.id-craft__sheet::before {
  left: -20px;
  border-right-color: var(--border-faint);
}

.id-craft__sheet::after {
  left: -19px;
  border-right-color: var(--sheet);
}

@media screen and (max-width: 767px) {
  .id-craft__sheet::before,
  .id-craft__sheet::after {
    top: auto;
    left: 32px;
    border-right-color: transparent;
  }
  .id-craft__sheet::before {
    bottom: 100%;
    border-bottom-color: var(--border-faint);
  }
  .id-craft__sheet::after {
    bottom: calc(100% - 1px);
    border-bottom-color: var(--sheet);
  }
}
.id-craft__sheet .id-brandmark {
  color: var(--id-ink);
  margin-left: 0.5em;
}

.id-brandmark img {
  display: inline-block;
  height: 1.35em;
  width: auto;
  max-width: none;
  vertical-align: -0.3em;
}

.id-craft .id-eyebrow {
  line-height: calc(1 * var(--grid-size));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-craft .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-craft .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}

.id-craft h2 {
  font-size: clamp(24px, 3vw, 61.4px);
  line-height: calc(2 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(24px, 3vw, 61.4px));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-craft h2 {
    line-height: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-craft h2 {
    font-size: max(28px, 5.8333333333vw);
    line-height: calc(1.5 * var(--grid-size));
    padding-top: calc(calc(1.5 * var(--grid-size)) - 0.714 * max(28px, 5.8333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-craft h2 {
    font-size: clamp(28px, 3.34vw, 38px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(28px, 3.34vw, 38px));
  }
}
.id-craft h2 {
  margin: 0 0 calc(2 * var(--grid-size));
}

.id-craft__letter {
  font-size: clamp(16px, 1.5vw, 30.7px);
  line-height: 1.75;
}
@media screen and (max-width: 767px) {
  .id-craft__letter {
    font-weight: 200;
  }
}
.id-craft__letter {
  text-box: trim-both cap alphabetic;
  font-family: var(--font-display);
  max-width: none;
  margin: 0;
  font-weight: 100;
  font-style: italic;
  color: var(--id-ink);
}
@media screen and (max-width: 767px) {
  .id-craft__letter {
    font-size: max(16px, 3.3333333333vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-craft__letter {
    font-size: clamp(17px, 1.93vw, 22px);
  }
}

.id-craft__letter p {
  margin: 0 0 calc(1 * var(--grid-size));
  text-wrap: pretty;
}

.id-craft__letter p:last-child {
  margin-bottom: 0;
}

.id-craft__sign {
  margin: calc(2 * var(--grid-size)) 0 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 2vw, 41px);
  line-height: calc(2 * var(--grid-size));
  color: var(--id-ink);
}
@media screen and (max-width: 767px) {
  .id-craft__sign {
    margin-top: 32px;
    font-size: max(28px, 5.8333333333vw);
    line-height: 1.2;
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-craft__sign {
    margin-top: calc(1 * var(--grid-size));
    font-size: clamp(30px, 3.07vw, 35px);
    line-height: 1.3;
  }
}

.id-craft__sign-svg {
  display: inline-block;
  height: 1.5em;
  width: auto;
  vertical-align: -0.45em;
}

.id-craft__sign-svg path {
  stroke-dasharray: 320;
  stroke-dashoffset: 0;
}

.id-craft__sign.will-sign .id-craft__sign-svg path {
  stroke-dashoffset: 320;
}

.id-craft__sign.is-signed .id-craft__sign-svg path {
  transition: stroke-dashoffset 1.6s ease 0.3s;
  stroke-dashoffset: 0;
}

.id-craft__ps {
  margin: calc(1 * var(--grid-size)) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(14px, 1.05vw, 21.5px);
  line-height: 1.75;
  color: rgba(20, 20, 27, 0.65);
  text-wrap: pretty;
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-craft__ps {
    font-size: clamp(15px, 1.62vw, 18.5px);
    margin-top: calc(0.5 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-craft__ps {
    font-size: max(14px, 2.9166666667vw);
    line-height: 1.5;
  }
}

html[data-theme=dark]:root {
  --brand-blue: var(--id-orange);
  --brand-purple: var(--id-purple);
}

.id-craft__portrait {
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  width: calc(5 * var(--grid-size));
  aspect-ratio: 1/1;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-faint);
}
@media screen and (max-width: 767px) {
  .id-craft__portrait {
    width: calc(5 * var(--grid-size));
    max-width: none;
  }
}

.id-craft__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.id-craft__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--id-orange), var(--id-purple));
  mix-blend-mode: color;
  opacity: 0.22;
  pointer-events: none;
}

.id-proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
@media screen and (max-width: 1139px) {
  .id-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .id-proof {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

.id-proof li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 calc(0.5 * var(--grid-size)) 0 calc(1 * var(--grid-size));
  gap: calc(0.5 * var(--grid-size));
  position: relative;
}
.id-proof li:first-child {
  padding-left: 0;
}
.id-proof li:last-child {
  padding-right: 0;
}
.id-proof li:not(:first-child)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--border-faint);
}
@media screen and (max-width: 1139px) {
  .id-proof li:nth-child(odd) {
    padding-left: 0;
  }
  .id-proof li:nth-child(even) {
    padding-right: 0;
  }
  .id-proof li:not(:first-child)::after {
    content: none;
  }
  .id-proof li:nth-child(n+3) {
    padding-top: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-proof li {
    padding: 0;
    gap: 16px;
  }
  .id-proof li::after {
    content: none;
  }
  .id-proof li:nth-child(n+2) {
    padding-top: 24px;
    border-top: 1px solid var(--border-faint);
  }
}

.id-proof__item {
  width: 100%;
}

.id-proof__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(0.5 * var(--grid-size));
  cursor: default;
  list-style: none;
}
.id-proof__head::-webkit-details-marker {
  display: none;
}
@media screen and (min-width: 768px) {
  .id-proof__head {
    pointer-events: none;
  }
}
@media screen and (max-width: 767px) {
  .id-proof__head {
    flex-direction: row;
    align-items: center;
    gap: calc(0.5 * var(--grid-size));
    cursor: pointer;
    padding: 4px 0;
  }
}

.id-proof__chev {
  display: none;
}
@media screen and (max-width: 767px) {
  .id-proof__chev {
    display: block;
    margin-left: auto;
    font-size: calc(0.75 * var(--grid-size));
    color: var(--text-muted);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }
}

.id-proof__item.is-open .id-proof__chev {
  transform: rotate(180deg);
}

.id-proof__fold {
  overflow: hidden;
  will-change: height;
}

.id-proof__icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(1.5 * var(--grid-size));
  height: calc(1.5 * var(--grid-size));
  flex: none;
}
@media screen and (max-width: 767px) {
  .id-proof__icon {
    width: calc(1 * var(--grid-size));
    height: calc(1 * var(--grid-size));
  }
}

.id-proof__icon i {
  font-size: calc(1.5 * var(--grid-size));
  line-height: 1;
  background-image: linear-gradient(160deg, var(--id-purple), var(--id-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media screen and (max-width: 767px) {
  .id-proof__icon i {
    font-size: calc(1 * var(--grid-size));
  }
}

.id-proof__title {
  display: block;
  font-size: clamp(17px, 1.15vw, 23.6px);
  line-height: 1.2;
  margin: 0;
  font-family: var(--font-display);
  color: var(--text);
}
@media screen and (max-width: 767px) {
  .id-proof__title {
    font-size: max(20px, 4.1666666667vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-proof__title {
    font-size: clamp(18px, 2.02vw, 23px);
  }
}

.id-proof__desc {
  font-size: clamp(14px, 1vw, 20.5px);
  line-height: 1.5;
  margin: calc(0.5 * var(--grid-size)) 0 0;
  color: var(--text-muted);
}
@media screen and (max-width: 767px) {
  .id-proof__desc {
    font-size: max(16px, 3.3333333333vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-proof__desc {
    font-size: clamp(15px, 1.62vw, 18.5px);
  }
}

.id-nav {
  display: flex;
  align-items: center;
  gap: 2vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 1139px) {
  .id-nav {
    display: none;
  }
}

.id-nav a {
  position: relative;
  display: block;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: var(--grid-size);
  text-transform: lowercase;
  color: var(--text);
  text-decoration: none;
  transition: color 0.25s ease;
}

.id-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-image: linear-gradient(90deg, var(--id-purple), var(--id-orange));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.id-nav a:hover,
.id-nav a:focus-visible {
  color: var(--text);
}

.id-nav a:hover::after,
.id-nav a:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .id-nav a::after {
    transition: none;
  }
}
.btn,
.btn.btn-primary,
.btn.btn-secondary {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
  font-size: 14px;
}

.id-brandmark {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
}

.id-product {
  --content-cols: 38;
  background-color: var(--bg-section);
  background-image: url("./images/noise-lift.png");
  background-size: 96px 96px;
}

.id-product .id-eyebrow {
  line-height: calc(1 * var(--grid-size));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-product .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-product .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}

.id-product h2 {
  font-size: clamp(24px, 3vw, 61.4px);
  line-height: calc(2 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(24px, 3vw, 61.4px));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-product h2 {
    line-height: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-product h2 {
    font-size: max(28px, 5.8333333333vw);
    line-height: calc(1.5 * var(--grid-size));
    padding-top: calc(calc(1.5 * var(--grid-size)) - 0.714 * max(28px, 5.8333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-product h2 {
    font-size: clamp(28px, 3.34vw, 38px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(28px, 3.34vw, 38px));
  }
}
.id-product h2 {
  max-width: calc(20 * var(--grid-size));
}

.id-product__lead {
  font-size: clamp(15px, 1.15vw, 23.6px);
  line-height: calc(1 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(15px, 1.15vw, 23.6px));
  color: var(--text-muted);
  max-width: calc(14 * var(--grid-size));
  margin: 0 0 calc(2 * var(--grid-size));
  font-weight: 100;
}
@media screen and (max-width: 767px) {
  .id-product__lead {
    font-weight: 300;
    max-width: none;
    font-size: max(16px, 3.3333333333vw);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * max(16px, 3.3333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-product__lead {
    font-size: clamp(16px, 1.84vw, 21px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(16px, 1.84vw, 21px));
  }
}
.id-product__lead {
  max-width: calc(18 * var(--grid-size));
}

.id-product__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: calc(1 * var(--grid-size)) calc(2 * var(--grid-size));
  align-items: start;
}
@media screen and (max-width: 1139px) {
  .id-product__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(2 * var(--grid-size));
  }
}

.id-product__content {
  grid-column: 1/-1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(2 * var(--grid-size));
  align-items: baseline;
}
.id-product__content > * {
  grid-column: 1/-1;
}
.id-product__content > h2 {
  grid-column: 1;
  max-width: none;
}
.id-product__content > .id-product__lead {
  grid-column: 2;
  max-width: 58ch;
  justify-self: end;
  text-align: right;
}
@media screen and (max-width: 1139px) {
  .id-product__content {
    column-gap: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-product__content {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .id-product__content > h2,
  .id-product__content > .id-product__lead {
    grid-column: 1;
  }
  .id-product__content > .id-product__lead {
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }
}

.id-product__layout > .id-product__args {
  grid-column: 1;
  grid-row: 2;
}

.id-board {
  grid-column: 2;
  grid-row: 2;
}

.id-product--logo {
  padding-top: calc(5 * var(--grid-size));
  background-color: #fdf8f2;
  background-image: url("./images/noise-ink.png");
  background-size: 96px 96px;
  background-blend-mode: normal;
  --product-grad: linear-gradient(160deg, #76219b 20%, #cf661d 100%);
  --product-shadow: rgba(112, 19, 146, 0.5);
}
.id-product--logo h2 {
  color: var(--id-paper-ink);
}
.id-product--logo h2 strong {
  --strong-c: var(--id-orange);
}
.id-product--logo .id-product__lead {
  color: var(--id-paper-ink-soft);
}

.id-product--web {
  border-top: 1px solid var(--border-faint);
}
.id-product--web .id-eyebrow {
  color: var(--id-purple);
}
.id-product--web {
  --leak-c: 28, 22, 110;
  --product-grad: linear-gradient(
  	160deg,
  	color-mix(in srgb, #4816e9 60%, #0d0b1a),
  	#9407f8
  );
  --product-shadow: rgba(72, 22, 233, 0.5);
}

.id-product--web .id-product__layout > .id-product__args {
  grid-column: 2;
  grid-row: 2;
}

.id-product--web .id-board {
  grid-column: 1;
  grid-row: 2;
}

.id-product--logo .id-offer,
.id-product--web .id-offer {
  grid-column: 1/-1;
  grid-row: 4;
}

.id-product__optrow {
  grid-column: 1/-1;
  grid-row: 3;
}

.id-product__opts {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  background-image: repeating-linear-gradient(45deg, rgba(255, 124, 31, 0.12) 0 1px, transparent 1px 9px);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
}
.id-product__opts::before, .id-product__opts::after {
  content: "";
  position: absolute;
  left: calc(-0.5 * var(--grid-size));
  right: calc(-0.5 * var(--grid-size));
  height: 1px;
  background: rgba(255, 124, 31, 0.45);
}
.id-product__opts::before {
  top: 0;
}
.id-product__opts::after {
  bottom: 0;
}
@media screen and (max-width: 1139px) {
  .id-product__opts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
}
@media screen and (max-width: 767px) {
  .id-product__opts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.id-product__opt {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: calc(0.25 * var(--grid-size));
}
.id-product__opt::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-0.375 * var(--grid-size));
  bottom: calc(-0.375 * var(--grid-size));
  width: 1px;
  background: rgba(255, 124, 31, 0.45);
}
.id-product__opt:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(-0.375 * var(--grid-size));
  bottom: calc(-0.375 * var(--grid-size));
  width: 1px;
  background: rgba(255, 124, 31, 0.45);
}
@media screen and (max-width: 1139px) {
  .id-product__opt:last-child::after {
    content: none;
  }
  .id-product__opt:nth-child(n+5)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    width: auto;
    background: rgba(255, 124, 31, 0.45);
  }
  .id-product__opt:nth-child(4n) span::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(-0.375 * var(--grid-size));
    bottom: calc(-0.375 * var(--grid-size));
    width: 1px;
    background: rgba(255, 124, 31, 0.45);
  }
}
@media screen and (max-width: 767px) {
  .id-product__opt:nth-child(n+3)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    width: auto;
    background: rgba(255, 124, 31, 0.45);
  }
  .id-product__opt:nth-child(2n) span::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(-0.375 * var(--grid-size));
    bottom: calc(-0.375 * var(--grid-size));
    width: 1px;
    background: rgba(255, 124, 31, 0.45);
  }
}

.id-product__opt .ph-thin {
  font-size: calc(1 * var(--grid-size));
  line-height: 1;
  color: var(--id-orange);
}

.id-product__opt span {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 calc(0.25 * var(--grid-size));
  color: var(--id-paper-ink);
}

@media screen and (max-width: 767px) {
  .id-product__opt {
    padding: calc(0.25 * var(--grid-size));
  }
  .id-product__opt .ph-thin {
    font-size: calc(1 * var(--grid-size));
  }
}
.id-product__showcase {
  grid-column: 1/-1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(1 * var(--grid-size)) calc(2 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-product__showcase {
    grid-template-columns: minmax(0, 1fr);
  }
  .id-product__showcase > .id-product__pair {
    grid-row: 1;
  }
  .id-product__showcase > .id-product__cell {
    grid-row: 3;
  }
}

.id-product__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-product__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.id-product__cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.id-product__minihead::before {
  content: "⁙ ";
  opacity: 0.7;
}

.id-product--logo .id-product__minihead {
  color: var(--id-orange);
}

.id-product__minihead {
  margin: 0 0 calc(0.5 * var(--grid-size));
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--id-purple);
}

.id-product__etc {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}
@media screen and (max-width: 1139px) {
  .id-product__etc {
    grid-column: 1;
  }
}
.id-product__etc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1vw, 20.5px);
  line-height: calc(1 * var(--grid-size));
  color: var(--text-muted);
}

.id-case {
  position: relative;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
}

.id-case--site {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23t)'/%3E%3C/svg%3E"), var(--product-grad);
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  box-shadow: 0 8px 40px var(--product-shadow);
}

.id-case--wide {
  aspect-ratio: auto;
  flex: 1;
}
@media screen and (max-width: 1139px) {
  .id-case--wide {
    flex: none;
    aspect-ratio: 16/10;
  }
}

.id-case__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: top;
  animation: id-case-scroll 16s ease-in-out infinite alternate;
  animation-play-state: paused;
  animation-delay: 2s;
}

.id-case--site.is-live .id-case__shot {
  animation-play-state: running;
}

@keyframes id-case-scroll {
  from {
    object-position: center top;
  }
  to {
    object-position: center bottom;
  }
}
@media (prefers-reduced-motion: reduce) {
  .id-case__shot {
    animation: none;
  }
}
.id-case--wide .id-case__shot {
  animation-duration: var(--browse-time, 18s);
}

.id-case--carousel .id-case__shot {
  opacity: 0;
  transition: opacity 0.6s ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

.id-case--carousel .id-case__shot.is-active {
  opacity: 1;
}

.id-case--carousel .id-case__shot:not(.is-active) {
  animation-play-state: paused;
}

.id-case__nav {
  position: absolute;
  right: calc(0.5 * var(--grid-size));
  bottom: calc(0.5 * var(--grid-size));
  display: flex;
  gap: 8px;
}

.id-case__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--id-purple);
  color: #fff;
  cursor: pointer;
  transition: filter 0.25s ease;
}

.id-case__arrow:hover {
  filter: brightness(1.2);
}

.id-case__arrow .ph-thin {
  font-size: 20px;
  line-height: 1;
}

.id-product--web .id-product__arg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.id-product--web .id-product__arg > * {
  position: relative;
}

.id-product--web .id-product__arg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
  mask-image: linear-gradient(215deg, #000 15%, transparent 75%);
}

.id-product--web .id-product__arg:nth-child(1)::after {
  background-image: url("./images/web-args/w1.jpg");
}

.id-product--web .id-product__arg:nth-child(2)::after {
  background-image: url("./images/web-args/w2.jpg");
}

.id-product--web .id-product__arg:nth-child(3)::after {
  background-image: url("./images/web-args/w3.jpg");
}

.id-product--web .id-product__arg:nth-child(4)::after {
  background-image: url("./images/web-args/w4.jpg");
}

.id-case--args.id-case--lines {
  gap: 0;
  overflow: visible;
  background-image: repeating-linear-gradient(45deg, rgba(169, 138, 255, 0.12) 0 1px, transparent 1px 9px);
}
.id-case--args.id-case--lines::before, .id-case--args.id-case--lines::after {
  content: "";
  position: absolute;
  left: calc(-0.375 * var(--grid-size));
  right: calc(-0.375 * var(--grid-size));
  height: 1px;
  background: rgba(169, 138, 255, 0.45);
}
.id-case--args.id-case--lines::before {
  top: 0;
}
.id-case--args.id-case--lines::after {
  bottom: 0;
}

.id-case--lines .id-case__mini {
  background: none;
  box-shadow: none;
  border-radius: 0;
  position: relative;
}

.id-case--lines .id-case__mini .ph-thin {
  color: #a98aff;
}

.id-case--lines .id-case__mini:nth-child(1)::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-0.375 * var(--grid-size));
  height: calc(200% + calc(0.75 * var(--grid-size)));
  width: 1px;
  background: rgba(169, 138, 255, 0.45);
}

.id-case--lines .id-case__mini:nth-child(1)::after {
  content: "";
  position: absolute;
  left: calc(-0.375 * var(--grid-size));
  top: 100%;
  width: calc(200% + calc(0.75 * var(--grid-size)));
  height: 1px;
  background: rgba(169, 138, 255, 0.45);
}

.id-case--lines .id-case__mini:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-0.375 * var(--grid-size));
  height: calc(200% + calc(0.75 * var(--grid-size)));
  width: 1px;
  background: rgba(169, 138, 255, 0.45);
}

.id-case--lines .id-case__mini:nth-child(2)::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(-0.375 * var(--grid-size));
  height: calc(200% + calc(0.75 * var(--grid-size)));
  width: 1px;
  background: rgba(169, 138, 255, 0.45);
}

.id-product--logo .id-product__arg {
  position: relative;
  overflow: hidden;
}

.id-product--logo .id-product__arg > * {
  position: relative;
}

.id-product--logo .id-product__arg {
  isolation: isolate;
}

.id-product--logo .id-product__arg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  mask-image: linear-gradient(215deg, #000 15%, transparent 75%);
}

@supports (animation-timeline: view()) {
  .id-product--logo .id-product__arg {
    view-timeline: --id-sketch block;
  }
  .id-product--logo .id-product__arg::after {
    animation: id-sketch-drift linear both;
    animation-timeline: --id-sketch;
  }
  @media (prefers-reduced-motion: reduce) {
    .id-product--logo .id-product__arg::after {
      animation: none;
    }
  }
}
@keyframes id-sketch-drift {
  from {
    background-position: center 25%;
  }
  to {
    background-position: center 75%;
  }
}
.id-product--logo .id-product__arg:nth-child(1)::after {
  background-image: url("./images/lettering-sketches-1.jpg");
}

.id-product--logo .id-product__arg:nth-child(2)::after {
  background-image: url("./images/portfolio/ch-creation-sketches-3.jpg");
}

.id-product--logo .id-product__arg:nth-child(3)::after {
  background-image: url("./images/portfolio/natura-camping-sketches-3.jpg");
}

.id-product--logo .id-product__arg:nth-child(4)::after {
  background-image: url("./images/portfolio/confort-air-ventilation-sketches-1.jpg");
}

.id-case--args {
  list-style: none;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(0.5 * var(--grid-size));
}

.id-case__mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23t)'/%3E%3C/svg%3E"), var(--product-grad);
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  box-shadow: 0 8px 40px var(--product-shadow);
  background-size: 96px 96px, 205% 205%;
}

.id-case__mini:nth-child(1) {
  background-position: 0 0, 0% 0%;
}

.id-case__mini:nth-child(2) {
  background-position: 0 0, 100% 0%;
}

.id-case__mini:nth-child(3) {
  background-position: 0 0, 0% 100%;
}

.id-case__mini:nth-child(4) {
  background-position: 0 0, 100% 100%;
}

.id-case__mini .ph-thin {
  font-size: calc(1 * var(--grid-size));
  line-height: 1;
}

.id-case__mini span {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 calc(0.25 * var(--grid-size));
}

@media screen and (max-width: 1139px) {
  .id-product__layout > .id-product__args,
  .id-product--web .id-product__layout > .id-product__args {
    grid-column: 1;
    grid-row: 3;
  }
  .id-board,
  .id-product--web .id-board {
    grid-column: 1;
    grid-row: 2;
  }
  .id-product__showcase,
  .id-product__optrow {
    grid-column: 1;
    grid-row: 4;
  }
  .id-product--logo .id-offer,
  .id-product--web .id-offer {
    grid-column: 1;
    grid-row: 5;
  }
  .id-product--web .id-product__options {
    grid-column: 1;
    grid-row: 7;
  }
}
.id-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  justify-self: center;
  align-self: start;
  margin-top: calc(1 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-board {
    max-width: calc(14 * var(--grid-size));
  }
}

.id-board__frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.id-board__stage {
  position: absolute;
  inset: 0;
}

.id-board__lines {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.id-board__glyph {
  position: absolute;
  width: 22.19%;
  height: 22.19%;
  left: calc((2 + var(--bx) * 8) * 2.7743%);
  top: calc((2 + var(--by) * 8) * 2.7743%);
  max-width: none;
}

.id-product--logo .id-board__glyph {
  filter: grayscale(1) brightness(2.6) sepia(1) saturate(5) hue-rotate(-8deg);
}

.id-product--logo .id-board__lines {
  filter: hue-rotate(115deg);
}

.id-product--logo .id-board__glyph[src$="glyph-5-dots.svg"],
.id-product--logo .id-board__glyph[data-glyph="glyph-5-dots.svg"] {
  filter: hue-rotate(238deg) saturate(1.4);
}

html.js .id-board:not(.is-static) img.id-board__glyph {
  visibility: hidden;
}

.id-product__args {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(1 * var(--grid-size));
  row-gap: calc(1 * var(--grid-size));
  width: 100%;
}
@media screen and (max-width: 767px) {
  .id-product__args {
    grid-template-columns: minmax(0, 1fr);
  }
}

.id-product__arg {
  padding: calc(0.75 * var(--grid-size));
  border-radius: 10px;
  color: #fff;
  text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23t)'/%3E%3C/svg%3E"), var(--product-grad);
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  box-shadow: 0 8px 40px var(--product-shadow);
}

.id-product__arg {
  background-size: 96px 96px, 205% 205%;
}

.id-product__arg:nth-child(1) {
  background-position: 0 0, 0% 0%;
}

.id-product__arg:nth-child(2) {
  background-position: 0 0, 100% 0%;
}

.id-product__arg:nth-child(3) {
  background-position: 0 0, 0% 100%;
}

.id-product__arg:nth-child(4) {
  background-position: 0 0, 100% 100%;
}

.id-product__arg .ph-thin {
  display: block;
  font-size: calc(1.5 * var(--grid-size));
  line-height: 1;
  margin-bottom: calc(0.5 * var(--grid-size));
  color: #fff;
}

.id-product__arg h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 32.8px);
  line-height: 1.2;
  margin: 0 0 0.4em;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .id-product__arg h3 {
    font-size: max(24px, 5vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-product__arg h3 {
    font-size: clamp(21px, 2.37vw, 27px);
  }
}

.id-product__arg p {
  font-size: clamp(14px, 1vw, 20.5px);
  line-height: 1.5;
  margin: 0;
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-product__arg p {
    font-size: clamp(15px, 1.62vw, 18.5px);
  }
}
.id-product__arg p {
  color: rgba(255, 255, 255, 0.82);
}
@media screen and (max-width: 767px) {
  .id-product__arg p {
    font-size: max(16px, 3.3333333333vw);
  }
}

.id-offer {
  --offer-c: var(--id-orange);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
  grid-template-rows: auto auto;
  column-gap: calc(2.5 * var(--grid-size));
  align-items: center;
  padding: calc(1 * var(--grid-size));
  border-radius: 10px;
}
@media screen and (max-width: 1139px) {
  .id-offer {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(1 * var(--grid-size));
  }
}

.id-offer__head {
  grid-column: 1;
  grid-row: 1/3;
  margin: 0;
  padding: 0;
}

.id-offer .id-offer__list {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.id-offer .id-offer__menu {
  grid-column: 2;
  grid-row: 2;
}

.id-offer__foot {
  grid-column: 3;
  grid-row: 1/3;
}

.id-offer::before,
.id-offer::after {
  content: "";
  position: absolute;
  top: calc(1 * var(--grid-size));
  bottom: calc(1 * var(--grid-size));
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--offer-line) 18%, var(--offer-line) 82%, transparent);
}
@media screen and (max-width: 1139px) {
  .id-offer::before,
  .id-offer::after {
    content: none;
  }
}

.id-offer::before {
  left: calc(calc(1 * var(--grid-size)) + (100% - calc(2 * var(--grid-size)) - calc(5 * var(--grid-size))) / 3 + calc(1.25 * var(--grid-size)));
}

.id-offer::after {
  left: calc(calc(1 * var(--grid-size)) + (100% - calc(2 * var(--grid-size)) - calc(5 * var(--grid-size))) * 2.2 / 3 + calc(3.75 * var(--grid-size)));
}

@media screen and (max-width: 1139px) {
  .id-offer__head,
  .id-offer .id-offer__list,
  .id-offer .id-offer__menu,
  .id-offer__foot {
    grid-column: 1;
    grid-row: auto;
  }
}
.id-offer__step::before {
  content: "⁙ ";
  opacity: 0.7;
}

.id-offer__step {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: calc(1 * var(--grid-size));
  margin: 0;
  color: var(--offer-c);
}

.id-offer--logo {
  --offer-c: var(--id-orange);
  --offer-line: rgba(20, 20, 27, 0.12);
  background-color: #fdfcff;
  background-image: url("./images/noise-ink.png"), url("./images/daylight.jpg");
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  color: var(--id-ink);
  border: 1px solid rgba(20, 20, 27, 0.14);
  box-shadow: 0 8px 40px var(--product-shadow);
}

.id-offer--logo .id-offer__name {
  color: var(--id-paper-ink);
}

.id-offer--logo .id-offer__desc,
.id-offer--logo .id-offer__list li,
.id-offer--logo .id-offer__price,
.id-offer--logo .id-offer__vat {
  color: var(--id-paper-ink);
}

.id-offer--web {
  --offer-c: var(--id-purple);
  --offer-line: rgba(20, 20, 27, 0.12);
  color: var(--id-ink);
  background-color: #fdfcff;
  background-image: url("./images/noise-ink.png"), url("./images/daylight.jpg");
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  box-shadow: 0 8px 40px var(--product-shadow);
}

.id-offer--web .id-offer__name,
.id-offer--web .id-offer__desc,
.id-offer--web .id-offer__list li,
.id-offer--web .id-offer__price,
.id-offer--web .id-offer__vat {
  color: var(--id-paper-ink);
}

.id-offer--web .id-offer__opt {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.id-offer--web .id-offer__opt:last-child {
  border-bottom: 0;
}

.id-offer--web .id-price__amount {
  color: var(--id-orange);
}

.id-offer__head .id-offer__desc {
  margin-bottom: 0;
}

.id-offer__name {
  font-size: clamp(20px, 1.6vw, 32.8px);
  line-height: 1.2;
  font-family: var(--font-display);
  margin: 0 0 0.5em;
  color: var(--text);
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-offer__name {
    font-size: clamp(21px, 2.37vw, 27px);
  }
}
@media screen and (max-width: 767px) {
  .id-offer__name {
    font-size: max(24px, 5vw);
    margin: 0 0 8px;
  }
}

.id-offer__desc {
  font-size: clamp(14px, 1vw, 20.5px);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 calc(0.5 * var(--grid-size));
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-offer__desc {
    font-size: clamp(15px, 1.62vw, 18.5px);
  }
}
@media screen and (max-width: 767px) {
  .id-offer__desc {
    font-size: max(16px, 3.3333333333vw);
    margin: 0 0 calc(0.5 * var(--grid-size));
  }
}

.id-product__options {
  display: none;
  --offer-c: var(--id-orange);
  position: relative;
  z-index: 1;
  flex-direction: column;
  padding: calc(0.5 * var(--grid-size)) 0 calc(0.5 * var(--grid-size)) calc(0.5 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-product__options {
    padding: calc(0.5 * var(--grid-size)) 0 0;
  }
}

.id-product__options .id-offer__step {
  margin-bottom: calc(0.5 * var(--grid-size));
}

.id-product__options .id-offer__price--soft {
  margin: calc(0.5 * var(--grid-size)) 0 0;
}

.id-offer__list {
  list-style: none;
  margin: 0 0 calc(0.5 * var(--grid-size));
  padding: 0;
  display: grid;
  gap: 0.5em;
}
@media screen and (max-width: 767px) {
  .id-offer__list {
    margin: 0 0 calc(0.5 * var(--grid-size));
  }
}

.id-offer__list li {
  display: grid;
  grid-template-columns: clamp(16px, 1vw, 20.5px) minmax(0, 1fr);
  column-gap: calc(0.375 * var(--grid-size));
  align-items: baseline;
  font-size: clamp(14px, 1vw, 20.5px);
  line-height: 1.5;
  color: var(--text);
}
@media screen and (max-width: 767px) {
  .id-offer__list li {
    font-size: max(16px, 3.3333333333vw);
  }
}

.id-offer__list li .ph-thin {
  justify-self: center;
  font-family: "Phosphor-Light" !important;
  font-size: clamp(14px, 1vw, 20.5px);
  color: var(--offer-c);
}

.id-offer__foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(1 * var(--grid-size));
}

.id-offer__from,
.id-offer__vat {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: inherit;
  text-transform: uppercase;
}

.id-offer__from {
  margin-bottom: 2px;
}

.id-offer__vat {
  margin-top: 2px;
}

.id-offer__price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  font-size: clamp(32px, 2.4vw, 49px);
  font-weight: 700;
  line-height: 1.1;
  font-family: var(--font-display);
  color: var(--text);
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-offer__price {
    font-size: clamp(36px, 3.95vw, 45px);
  }
}
@media screen and (max-width: 767px) {
  .id-offer__price {
    font-size: max(32px, 6.6666666667vw);
  }
}

.id-offer__price--soft {
  display: block;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-faint);
}

.id-offer__menu {
  list-style: none;
  margin: 0 0 calc(0.5 * var(--grid-size));
  padding: 0;
}
@media screen and (max-width: 767px) {
  .id-offer__menu {
    margin: 0 0 24px;
  }
}

.id-offer__opt {
  display: flex;
  align-items: baseline;
  gap: calc(0.375 * var(--grid-size));
  padding: calc(0.375 * var(--grid-size)) 0;
  border-bottom: 1px dashed var(--border-faint);
}
@media screen and (max-width: 767px) {
  .id-offer__opt {
    padding: 12px 0;
  }
}

.id-offer__opt:last-child {
  border-bottom: 0;
}

.id-offer__opt-icon {
  flex: none;
  width: clamp(18px, 1.15vw, 23.6px);
  text-align: center;
  font-family: "Phosphor-Light" !important;
  font-size: clamp(14px, 1vw, 20.5px);
  color: var(--offer-c);
}

.id-offer__note {
  grid-column: 1/-1;
  grid-row: 5;
}
@media screen and (max-width: 1139px) {
  .id-offer__note {
    grid-row: 6;
  }
}
.id-offer__note {
  margin: 0;
  max-width: 640px;
  font-size: clamp(12px, 0.85vw, 17.4px);
  line-height: 1.6;
  color: var(--text-muted);
}
.id-offer__note a {
  color: var(--id-purple-lit);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--id-purple-lit) 45%, transparent);
  transition: border-color 0.25s ease;
}
.id-offer__note a:hover, .id-offer__note a:focus-visible {
  border-bottom-color: var(--id-purple-lit);
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-offer__note {
    font-size: clamp(13px, 1.4vw, 16px);
  }
}
@media screen and (max-width: 767px) {
  .id-offer__note {
    font-size: max(13px, 2.7083333333vw);
    margin-top: 16px;
  }
}

.id-offer__opt-name {
  font-size: clamp(14px, 1vw, 20.5px);
  line-height: 1.4;
  color: var(--text);
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-offer__opt-name {
    font-size: clamp(15px, 1.62vw, 18.5px);
  }
}
@media screen and (max-width: 767px) {
  .id-offer__opt-name {
    font-size: max(14px, 2.9166666667vw);
  }
}

.id-offer__opt-price {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  white-space: nowrap;
}

.id-offer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  width: calc(2.5 * var(--grid-size));
  height: calc(2.5 * var(--grid-size));
  padding: calc(0.25 * var(--grid-size));
  border-radius: 50%;
  text-decoration: none;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(to bottom right, #4816e9 0%, #6707f8 35.6%, #ff7c1f 100%);
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  box-shadow: 0 8px 24px rgba(103, 7, 248, 0.32);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.id-offer__cta:hover,
.id-offer__cta:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 0 14px rgba(103, 7, 248, 0.5);
}

.id-bridge {
  --drift: 40px;
  background-color: #120b36;
  overflow: clip;
  padding: calc(2 * var(--grid-size)) 0;
}
@media screen and (max-width: 767px) {
  .id-bridge {
    --drift: 30px;
  }
}

.id-bridge__bg {
  position: absolute;
  inset: calc(-1 * var(--drift));
  z-index: -2;
  pointer-events: none;
  background-image: url("./images/bg-bridge.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}

@supports (animation-timeline: view()) {
  .id-bridge__bg {
    animation: id-bridge-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    .id-bridge__bg {
      animation: none;
    }
  }
  @media screen and (max-width: 767px) {
    .id-bridge__bg {
      animation-name: id-bridge-pan;
    }
  }
}
@keyframes id-bridge-drift {
  from {
    transform: translateY(calc(-1 * var(--drift)));
  }
  to {
    transform: translateY(var(--drift));
  }
}
@keyframes id-bridge-pan {
  from {
    transform: translateX(calc(-1 * var(--drift)));
  }
  to {
    transform: translateX(var(--drift));
  }
}
.id-bridge__band {
  display: flex;
  align-items: center;
  gap: calc(1.5 * var(--grid-size));
  margin: 0;
  text-align: center;
}

.id-bridge__band::before,
.id-bridge__band::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--hairline);
}

.id-bridge__inner {
  max-width: calc(18 * var(--grid-size));
}

.id-bridge__mark {
  display: block;
  font-size: 20px;
  line-height: 1;
  margin-bottom: calc(0.5 * var(--grid-size));
  color: var(--id-orange);
}

.id-bridge__claim {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.6vw, 32.8px);
  line-height: 1.3;
  margin: 0 0 0.4em;
  color: var(--text);
}
@media screen and (max-width: 767px) {
  .id-bridge__claim {
    font-size: max(24px, 5vw);
  }
}

.id-bridge__sub {
  font-size: clamp(16px, 1.15vw, 23.6px);
  line-height: 1.5;
  margin: 0;
  color: var(--text);
}
@media screen and (max-width: 767px) {
  .id-bridge__sub {
    font-size: max(16px, 3.3333333333vw);
  }
}

.id-product__etc a {
  color: var(--id-orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 124, 31, 0.5);
  transition: border-color 0.25s ease;
}

.id-product__etc a:hover,
.id-product__etc a:focus-visible {
  border-color: var(--id-orange);
}

.id-folio {
  z-index: 1;
  margin: 0 var(--frame);
  padding: calc(3 * var(--grid-size)) 0 0;
  background-color: var(--id-ink-tile);
  background-image: url("./images/noise-ink.png"), linear-gradient(180deg, rgba(253, 248, 242, 0) calc(100% - 6 * var(--grid-size)), #fdf8f2 100%);
  background-size: 96px 96px, auto;
  background-repeat: repeat, no-repeat;
  color: #f4f4f6;
  --dot-tile: var(
  	--dot-tile-band,
  	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E")
  );
}

.id-folio .id-wrap:not(.id-folio__skip) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(2 * var(--grid-size));
  align-items: baseline;
}
.id-folio .id-wrap:not(.id-folio__skip) > * {
  grid-column: 1/-1;
}
.id-folio .id-wrap:not(.id-folio__skip) > h2 {
  grid-column: 1;
  max-width: none;
}
.id-folio .id-wrap:not(.id-folio__skip) > .id-folio__lead {
  grid-column: 2;
  max-width: 58ch;
  justify-self: end;
  text-align: right;
}
@media screen and (max-width: 1139px) {
  .id-folio .id-wrap:not(.id-folio__skip) {
    column-gap: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-folio .id-wrap:not(.id-folio__skip) {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .id-folio .id-wrap:not(.id-folio__skip) > h2,
  .id-folio .id-wrap:not(.id-folio__skip) > .id-folio__lead {
    grid-column: 1;
  }
  .id-folio .id-wrap:not(.id-folio__skip) > .id-folio__lead {
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }
}

.id-folio .id-eyebrow {
  line-height: calc(1 * var(--grid-size));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-folio .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-folio .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
.id-folio .id-eyebrow {
  color: var(--id-purple);
}

.id-folio h2 {
  font-size: clamp(24px, 3vw, 61.4px);
  line-height: calc(2 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(24px, 3vw, 61.4px));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-folio h2 {
    line-height: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-folio h2 {
    font-size: max(28px, 5.8333333333vw);
    line-height: calc(1.5 * var(--grid-size));
    padding-top: calc(calc(1.5 * var(--grid-size)) - 0.714 * max(28px, 5.8333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-folio h2 {
    font-size: clamp(28px, 3.34vw, 38px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(28px, 3.34vw, 38px));
  }
}
.id-folio h2 {
  color: #fff;
}

.id-folio__lead {
  font-size: clamp(15px, 1.15vw, 23.6px);
  line-height: calc(1 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(15px, 1.15vw, 23.6px));
  color: var(--text-muted);
  max-width: calc(14 * var(--grid-size));
  margin: 0 0 calc(2 * var(--grid-size));
  font-weight: 100;
}
@media screen and (max-width: 767px) {
  .id-folio__lead {
    font-weight: 300;
    max-width: none;
    font-size: max(16px, 3.3333333333vw);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * max(16px, 3.3333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-folio__lead {
    font-size: clamp(16px, 1.84vw, 21px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(16px, 1.84vw, 21px));
  }
}
.id-folio__lead {
  color: rgba(244, 244, 246, 0.66);
  margin: 0;
}
@media screen and (max-width: 767px) {
  .id-folio__lead {
    margin: 0;
  }
}

.id-folio__grid {
  margin-top: calc(3 * var(--grid-size));
  margin-bottom: calc(-2 * var(--grid-size));
  padding: 0 calc(1 * var(--grid-size));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-folio__grid {
    margin-top: calc(3 * var(--grid-size));
    gap: calc(0.5 * var(--grid-size));
    padding: 0 calc(0.5 * var(--grid-size));
  }
}
@media screen and (max-width: 599px) {
  .id-folio__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.id-folio__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background-color: #17141d;
  border-radius: 10px;
  overflow: hidden;
  transition: background-color 0.4s ease;
}

.id-folio__item:hover {
  background-color: #ffffff;
}

.id-folio__item > img {
  max-width: 48%;
  max-height: 48%;
}

.id-folio__slides {
  position: absolute;
  inset: 0;
  transition: transform 1s ease-out;
}

.id-folio__item:hover .id-folio__slides,
.id-folio__item:focus-visible .id-folio__slides {
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .id-folio__item:hover .id-folio__slides,
  .id-folio__item:focus-visible .id-folio__slides {
    transform: none;
  }
}
.id-folio__slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  will-change: opacity;
}

.id-folio__slides img.is-active {
  opacity: 1;
}

.id-folio__slides img:only-child {
  opacity: 1;
}

.id-folio__item:before {
  content: attr(data-ref);
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.22);
}

.id-folio__skip {
  display: none;
}

.id-folio__item.is-zoomable {
  cursor: pointer;
}

.id-folio__hint {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: rgba(16, 14, 21, 0.72);
  color: #ffffff;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 400;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.id-folio__hint span {
  display: block;
  transform: translateY(10px);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.id-folio__item:hover .id-folio__hint,
.id-folio__item:focus-visible .id-folio__hint {
  opacity: 1;
}

.id-folio__item:hover .id-folio__hint span,
.id-folio__item:focus-visible .id-folio__hint span {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .id-folio__hint span {
    transform: none;
    transition: none;
  }
}
.id-folio__item.is-zoomable:focus-visible {
  outline: 2px solid var(--id-orange);
  outline-offset: -2px;
}

.id-lightbox {
  border-radius: 12px;
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(2 * var(--grid-size)) calc(3 * var(--grid-size));
  opacity: 0;
  transition: opacity 0.26s ease;
}
@media screen and (max-width: 767px) {
  .id-lightbox {
    padding: 72px 16px 96px;
  }
}

.id-lightbox[hidden] {
  display: none;
}

.id-lightbox:not(.is-open) {
  pointer-events: none;
}

.id-lightbox.is-open {
  opacity: 1;
}

html.is-lightbox-open,
html.is-lightbox-open body {
  overflow: hidden;
}

.id-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 15, 20, 0.94);
  backdrop-filter: blur(6px);
}

.id-lightbox__stage {
  position: relative;
  margin: 0;
  max-width: min(1000px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(0.75 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-lightbox__stage {
    gap: 16px;
  }
}

.id-lightbox__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(1 * var(--grid-size));
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .id-lightbox__plate {
    padding: 16px;
  }
}

.id-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 68vh;
  opacity: 0;
  transition: opacity 0.35s ease;
}
@media screen and (max-width: 767px) {
  .id-lightbox__img {
    max-height: 58vh;
  }
}

.id-lightbox__img.is-in {
  opacity: 1;
}

.id-lightbox__caption {
  display: flex;
  align-items: baseline;
  gap: calc(0.5 * var(--grid-size));
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .id-lightbox__caption {
    gap: 12px;
  }
}

.id-lightbox__project {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
}

.id-lightbox__count {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

.id-lightbox__btn {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.id-lightbox__btn i {
  font-size: 22px;
  line-height: 1;
}

.id-lightbox__btn:hover,
.id-lightbox__btn:focus-visible {
  background-color: rgba(249, 115, 22, 0.18);
  border-color: var(--id-orange);
}

.id-lightbox__btn--prev,
.id-lightbox__btn--next {
  top: 50%;
  transform: translateY(-50%);
}

.id-lightbox__btn--prev {
  left: calc(1 * var(--grid-size));
}

.id-lightbox__btn--next {
  right: calc(1 * var(--grid-size));
}

.id-lightbox__btn--close {
  top: calc(1 * var(--grid-size));
  right: calc(1 * var(--grid-size));
}

@media screen and (max-width: 767px) {
  .id-lightbox__btn--prev,
  .id-lightbox__btn--next {
    top: auto;
    bottom: 24px;
    left: 50%;
    right: auto;
  }
  .id-lightbox__btn--prev {
    transform: translateX(calc(-50% - 36px));
  }
  .id-lightbox__btn--next {
    transform: translateX(calc(-50% + 36px));
  }
  .id-lightbox__btn--close {
    top: 16px;
    right: 16px;
  }
}
html.is-project-open,
html.is-project-open body {
  overflow: hidden;
}

.id-project[hidden] {
  display: none;
}

.id-project {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.26s ease;
}

.id-project.is-open {
  opacity: 1;
}

.id-project__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 12, 0.78);
}

.id-project__sheet {
  position: relative;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(0.75 * var(--grid-size));
  overflow: hidden;
  border-radius: 10px;
  background-color: #fdfcff;
  background-image: url("./images/noise-ink.png"), url("./images/daylight.jpg");
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  color: var(--id-ink);
  padding: calc(1.25 * var(--grid-size));
  box-shadow: 0 40px 90px rgba(5, 4, 12, 0.6);
  transform: translateY(14px);
  transition: transform 0.26s ease;
}

.id-project__sheet.has-capture {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

.id-project.is-open .id-project__sheet {
  transform: none;
}

.id-project__info {
  grid-column: 1;
  grid-row: 1;
  padding-right: calc(1.5 * var(--grid-size));
}

.id-project__close {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--id-ink);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(5, 4, 12, 0.4);
}

.id-project__kind {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--id-orange);
  margin: 0 0 8px;
}

.id-project__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 41px);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.4em;
  color: var(--id-paper-ink);
}

.id-project__story {
  margin: 0 0 calc(0.5 * var(--grid-size));
  font-size: clamp(14px, 1vw, 20.5px);
  line-height: 1.65;
  color: var(--id-paper-ink-soft);
  max-width: 60ch;
}

.id-project__visit {
  margin: 0;
  font-size: clamp(14px, 0.95vw, 19.5px);
}

.id-project__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--id-ink);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(5, 4, 12, 0.4);
}

.id-project__nav--prev {
  left: 26px;
}

.id-project__nav--next {
  right: 26px;
}

@media screen and (max-width: 767px) {
  .id-project__nav {
    top: auto;
    bottom: 18px;
    transform: none;
  }
  .id-project__nav--prev {
    left: calc(50% - 54px);
  }
  .id-project__nav--next {
    right: calc(50% - 54px);
  }
}
.id-project__made {
  margin: calc(0.5 * var(--grid-size)) 0 0;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(63, 26, 114, 0.6);
}

.id-project__visit .btn-link {
  color: var(--id-paper-ink);
}

.id-project__shots {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  align-items: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.id-project__sheet:not(.has-capture) .id-project__shots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.id-project__shots button {
  position: relative;
  height: 0;
  padding: 0 0 100%;
  border: 1px solid rgba(20, 20, 27, 0.14);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
}

.id-project__shots img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.id-project__browser[hidden] {
  display: none;
}

.id-project__browser {
  grid-column: 2;
  grid-row: 1/-1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(20, 20, 27, 0.18);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.id-project__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: #f1eff7;
  border-bottom: 1px solid rgba(20, 20, 27, 0.14);
}

.id-project__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4d0e2;
}

.id-project__host {
  margin-left: 8px;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(20, 20, 27, 0.55);
}

.id-project__page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.id-project__capture {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

@media screen and (max-width: 767px) {
  .id-project {
    padding: 8px;
  }
  .id-project__sheet,
  .id-project__sheet.has-capture {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 20px;
  }
  .id-project__info {
    padding-right: 48px;
  }
  .id-project__shots,
  .id-project__sheet:not(.has-capture) .id-project__shots {
    margin: 20px 0;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .id-project__page {
    flex: none;
    overflow: visible;
    max-height: none;
  }
  .id-project__close {
    top: 20px;
    right: 20px;
  }
}
.id-faq .id-eyebrow {
  color: var(--id-purple);
}

.id-faq {
  background-color: var(--id-ink-tile);
  background-image: url("./images/noise-lift.png");
  background-size: 96px 96px;
}

.id-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.id-faq__col {
  padding: calc(1 * var(--grid-size)) calc(1 * var(--grid-size)) calc(1.25 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-faq__col {
    padding: 0;
  }
}

.id-faq__blog {
  background-color: #fdfcff;
  background-image: url("./images/noise-ink.png"), url("./images/daylight.jpg");
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  border-radius: 10px;
  padding: calc(1 * var(--grid-size)) calc(1 * var(--grid-size)) calc(1.25 * var(--grid-size));
  color: var(--id-ink);
  box-shadow: 0 24px 60px rgba(10, 8, 20, 0.5);
}

.id-faq__blog h2 {
  color: var(--id-paper-ink);
  margin-bottom: calc(0.75 * var(--grid-size));
}

.id-blogteasers {
  list-style: none;
  margin: 0;
  padding: 0;
}

.id-blogteasers li {
  margin: 0;
}

.id-blogteasers li + li {
  border-top: 1px solid rgba(20, 20, 27, 0.14);
}

.id-blogteasers a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.5 * var(--grid-size));
  padding: calc(0.5 * var(--grid-size)) 0;
  text-decoration: none;
  color: inherit;
}

.id-blogteasers strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 1.15vw, 23.6px);
  line-height: 1.3;
  color: var(--id-ink);
  transition: color 0.3s ease;
}
@media screen and (max-width: 767px) {
  .id-blogteasers strong {
    font-size: max(17px, 3.5416666667vw);
  }
}

.id-blogteasers a:hover strong,
.id-blogteasers a:focus-visible strong {
  color: var(--id-orange);
}

.id-blogteasers .ph-thin {
  flex: none;
  font-size: clamp(18px, 1.2vw, 24.6px);
  color: color-mix(in srgb, var(--id-purple) 70%, transparent);
  transition: color 0.3s ease;
}

.id-blogteasers a:hover .ph-thin,
.id-blogteasers a:focus-visible .ph-thin {
  color: var(--id-purple);
}

.btn-link .ph-thin {
  position: absolute;
  top: 50%;
  left: -1.75em;
  margin-top: -0.5em;
  font-size: inherit;
}

.socials .ph-thin {
  font-family: "Phosphor-Regular" !important;
}

#main-nav .btn-link .ph-thin {
  font-family: "Phosphor-Regular" !important;
}

.id-faq__ask {
  margin: calc(1 * var(--grid-size)) 0 0;
  font-size: clamp(14px, 0.95vw, 19.5px);
  line-height: calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-faq__ask {
    font-size: max(14px, 2.9166666667vw);
  }
}

.id-faq__ask span {
  color: var(--text-muted);
  margin-right: 0.75em;
}

.id-faq .id-eyebrow {
  line-height: calc(1 * var(--grid-size));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-faq .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-faq .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}

.id-faq h2 {
  font-size: clamp(24px, 3vw, 61.4px);
  line-height: calc(2 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(24px, 3vw, 61.4px));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-faq h2 {
    line-height: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-faq h2 {
    font-size: max(28px, 5.8333333333vw);
    line-height: calc(1.5 * var(--grid-size));
    padding-top: calc(calc(1.5 * var(--grid-size)) - 0.714 * max(28px, 5.8333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-faq h2 {
    font-size: clamp(28px, 3.34vw, 38px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(28px, 3.34vw, 38px));
  }
}
.id-faq h2 {
  max-width: calc(20 * var(--grid-size));
  margin-bottom: calc(2 * var(--grid-size));
}

.id-faq__list {
  max-width: calc(22 * var(--grid-size));
}

.id-faq__cat {
  margin: 0 0 calc(0.5 * var(--grid-size));
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--id-purple);
}

.id-faq__item + .id-faq__cat {
  margin-top: calc(1.5 * var(--grid-size));
}

.id-faq__cat--logo {
  color: var(--id-orange);
}

.id-faq__cat--web ~ .id-faq__item summary::after {
  color: var(--id-purple);
}

.id-faq__item {
  border-top: 1px solid var(--hairline);
}

.id-faq__item:last-child,
.id-faq__item:has(+ .id-faq__cat) {
  border-bottom: 1px solid var(--hairline);
}

.id-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.5 * var(--grid-size));
  box-sizing: border-box;
  min-height: calc(2 * var(--grid-size));
  padding: calc(0.5 * var(--grid-size)) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.3vw, 26.6px);
  color: var(--text);
  transition: color 0.3s ease;
}
@media screen and (max-width: 767px) {
  .id-faq__item summary {
    font-size: max(18px, 3.75vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-faq__item summary {
    font-size: clamp(19px, 2.11vw, 24px);
  }
}

.id-faq__item summary:hover {
  color: var(--id-orange);
}

.id-faq__cat--web ~ .id-faq__item summary:hover {
  color: var(--id-purple-lit);
}

.id-faq__item summary::-webkit-details-marker {
  display: none;
}

.id-faq__item summary::after {
  content: "+";
  flex: none;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1em;
  color: var(--id-orange);
  transition: transform 0.3s ease;
}

.id-faq__item[open] summary::after {
  transform: rotate(45deg);
}

.id-faq__item p {
  margin: 0;
  padding: 0 0 calc(0.75 * var(--grid-size));
  max-width: 60ch;
  font-size: clamp(14px, 0.95vw, 19.5px);
  line-height: 1.5;
  color: var(--text-muted);
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-faq__item p {
    font-size: clamp(15px, 1.62vw, 18.5px);
  }
}
@media screen and (max-width: 767px) {
  .id-faq__item p {
    font-size: max(14px, 2.9166666667vw);
  }
}

.id-faq__item[open] p {
  animation: id-faq-settle 0.45s ease both;
}

@keyframes id-faq-settle {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .id-faq__item[open] p {
    animation: none;
  }
}
.id-start {
  min-height: 100vh;
  background-color: var(--bg-hero);
  margin-top: var(--frame);
}

.id-start .id-eyebrow {
  line-height: calc(1 * var(--grid-size));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-start .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-start .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}

.id-start h1 {
  font-size: clamp(24px, 3vw, 61.4px);
  line-height: calc(2 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(24px, 3vw, 61.4px));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-start h1 {
    line-height: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-start h1 {
    font-size: max(28px, 5.8333333333vw);
    line-height: calc(1.5 * var(--grid-size));
    padding-top: calc(calc(1.5 * var(--grid-size)) - 0.714 * max(28px, 5.8333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-start h1 {
    font-size: clamp(28px, 3.34vw, 38px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(28px, 3.34vw, 38px));
  }
}
.id-start h1 {
  max-width: calc(20 * var(--grid-size));
}

.id-start__lead {
  font-size: clamp(15px, 1.15vw, 23.6px);
  line-height: calc(1 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(15px, 1.15vw, 23.6px));
  color: var(--text-muted);
  max-width: calc(14 * var(--grid-size));
  margin: 0 0 calc(2 * var(--grid-size));
  font-weight: 100;
}
@media screen and (max-width: 767px) {
  .id-start__lead {
    font-weight: 300;
    max-width: none;
    font-size: max(16px, 3.3333333333vw);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * max(16px, 3.3333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-start__lead {
    font-size: clamp(16px, 1.84vw, 21px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(16px, 1.84vw, 21px));
  }
}
.id-start__lead {
  max-width: calc(16 * var(--grid-size));
}

.id-start.is-done > .id-wrap > h1,
.id-start.is-done > .id-wrap > .id-start__lead {
  display: none;
}

.id-form {
  max-width: calc(34 * var(--grid-size));
}

.id-form__step.is-active {
  max-width: calc(16 * var(--grid-size));
}

.id-form__step--wide.is-active {
  max-width: none;
}

.id-form__progress {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: calc(1 * var(--grid-size));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--id-orange);
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-form__progress {
    font-size: max(12px, 2.5vw);
  }
}

.id-form__head {
  margin-bottom: calc(1 * var(--grid-size));
}

.id-form__bar {
  height: 2px;
  border-radius: 2px;
  background-color: var(--border-faint);
  overflow: hidden;
}

.id-form__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background-image: linear-gradient(90deg, var(--id-purple), var(--id-orange));
  transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .id-form__bar span {
    transition: none;
  }
}
.id-form__actions {
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--grid-size));
  margin-top: calc(0.5 * var(--grid-size));
}

.id-form__back {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.id-form__back:hover {
  color: var(--id-orange);
}

.id-form__status {
  margin: calc(0.5 * var(--grid-size)) 0 0;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  min-height: calc(0.75 * var(--grid-size));
}

.id-form__step {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.id-form__step.is-active {
  display: block;
}

.id-field {
  margin-bottom: calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-field {
    margin-bottom: 24px;
  }
}

.id-field label,
.id-field__legend {
  display: block;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-field label,
  .id-field__legend {
    font-size: max(12px, 2.5vw);
  }
}

.id-field input[type=text],
.id-field input[type=email],
.id-field input[type=tel],
.id-field textarea {
  width: 100%;
  box-sizing: border-box;
  height: calc(2 * var(--grid-size));
  padding: 0 calc(0.5 * var(--grid-size));
  font-family: inherit;
  font-size: clamp(16px, 1vw, 20.5px);
  color: var(--text);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  border-radius: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
@media screen and (max-width: 767px) {
  .id-field input[type=text],
  .id-field input[type=email],
  .id-field input[type=tel],
  .id-field textarea {
    height: 56px;
    padding: 0 16px;
    font-size: max(16px, 3.3333333333vw);
  }
}

.id-field textarea {
  display: block;
  height: auto;
  min-height: calc(4 * var(--grid-size));
  padding: calc(0.5 * var(--grid-size));
  resize: vertical;
}
@media screen and (max-width: 767px) {
  .id-field textarea {
    min-height: 132px;
    padding: 16px;
  }
}

.id-field input:focus,
.id-field textarea:focus {
  outline: none;
  border-color: var(--id-orange);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}

.id-field input.is-invalid,
.id-field textarea.is-invalid {
  border-color: var(--id-orange);
}

.id-field__error {
  display: none;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: calc(1 * var(--grid-size));
  color: var(--id-orange);
  margin: 0;
}
@media screen and (max-width: 767px) {
  .id-field__error {
    font-size: max(12px, 2.5vw);
  }
}

.id-field__error.is-visible {
  display: block;
}

.id-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.25 * var(--grid-size));
  padding-bottom: calc(0.5 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-chips {
    gap: 8px;
    padding-bottom: 0;
  }
}

.id-chip {
  cursor: pointer;
}

.id-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.id-chip span {
  display: inline-flex;
  align-items: center;
  height: calc(1.5 * var(--grid-size));
  padding: 0 calc(0.5 * var(--grid-size));
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
@media screen and (max-width: 767px) {
  .id-chip span {
    height: 44px;
    padding: 0 16px;
    font-size: max(12px, 2.5vw);
  }
}

.id-chip:hover span {
  border-color: var(--id-orange);
}

.id-chip input:checked + span {
  color: var(--text);
  border-color: var(--id-orange);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}

.id-chip input:focus-visible + span {
  border-color: var(--id-orange);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}

.id-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.id-rappel {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(1 * var(--grid-size)) calc(1 * var(--grid-size)) calc(2 * var(--grid-size));
  background-color: #151320;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(160deg, #1c034d 0%, #150f33 60%, #0f0f14 100%);
  background-size: 96px 96px, 100% 100%;
  background-blend-mode: soft-light, normal;
  color: var(--text);
}

.id-rappel::before {
  content: "";
  position: absolute;
  inset: var(--grid-size);
  z-index: -1;
  pointer-events: none;
  background-image: var(--dot-tile);
  background-repeat: repeat;
  background-size: var(--grid-size) var(--grid-size);
  background-position: 0 0;
  opacity: 0.35;
}

.id-rappel__bar {
  width: 100%;
  max-width: calc(24 * var(--grid-size));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1 * var(--grid-size));
  margin-bottom: calc(2 * var(--grid-size));
  padding-top: calc(var(--grid-size) / 4);
}
@media screen and (max-width: 767px) {
  .id-rappel__bar {
    margin-bottom: calc(1 * var(--grid-size));
  }
}

.id-rappel__lang {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--grid-size));
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.id-rappel__lang span {
  color: var(--id-orange);
}

.id-rappel__lang a {
  color: var(--text-muted);
  transition: color 0.25s ease;
}
.id-rappel__lang a:hover, .id-rappel__lang a:focus-visible {
  color: var(--text);
}

.id-rappel__card {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(24 * var(--grid-size));
  padding: calc(2 * var(--grid-size));
  border-radius: 10px;
  background-color: #fdfcff;
  background-image: url("./images/noise-ink.png"), url("./images/daylight.jpg");
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  color: var(--id-paper-ink);
  box-shadow: 0 24px 60px rgba(10, 8, 20, 0.5);
}
@media screen and (max-width: 767px) {
  .id-rappel__card {
    padding: calc(1 * var(--grid-size));
  }
}

.id-rappel__card .id-eyebrow {
  line-height: calc(1 * var(--grid-size));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-rappel__card .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-rappel__card .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
.id-rappel__card .id-eyebrow {
  color: var(--id-orange);
}

.id-rappel__card h1 {
  font-size: clamp(24px, 3vw, 61.4px);
  line-height: calc(2 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(24px, 3vw, 61.4px));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-rappel__card h1 {
    line-height: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-rappel__card h1 {
    font-size: max(28px, 5.8333333333vw);
    line-height: calc(1.5 * var(--grid-size));
    padding-top: calc(calc(1.5 * var(--grid-size)) - 0.714 * max(28px, 5.8333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-rappel__card h1 {
    font-size: clamp(28px, 3.34vw, 38px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(28px, 3.34vw, 38px));
  }
}
.id-rappel__card h1 {
  max-width: calc(16 * var(--grid-size));
  color: var(--id-paper-ink);
}

.id-rappel__lead {
  font-size: clamp(15px, 1.15vw, 23.6px);
  line-height: calc(1 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(15px, 1.15vw, 23.6px));
  color: var(--text-muted);
  max-width: calc(14 * var(--grid-size));
  margin: 0 0 calc(2 * var(--grid-size));
  font-weight: 100;
}
@media screen and (max-width: 767px) {
  .id-rappel__lead {
    font-weight: 300;
    max-width: none;
    font-size: max(16px, 3.3333333333vw);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * max(16px, 3.3333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-rappel__lead {
    font-size: clamp(16px, 1.84vw, 21px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(16px, 1.84vw, 21px));
  }
}
.id-rappel__lead {
  max-width: calc(16 * var(--grid-size));
  color: var(--id-paper-ink-soft);
}

.id-rappel__form {
  max-width: calc(18 * var(--grid-size));
  margin-top: calc(1 * var(--grid-size));
}

.id-rappel__form fieldset {
  border: 0;
  margin: 0 0 calc(1 * var(--grid-size));
  padding: 0;
}
@media screen and (max-width: 767px) {
  .id-rappel__form fieldset {
    margin-bottom: 24px;
  }
}

.id-rappel__card {
  --paper-line: rgba(63, 26, 114, 0.24);
  --paper-alert: #c2410c;
}

.id-rappel__card .id-field label,
.id-rappel__card .id-field__legend {
  color: var(--id-paper-ink-soft);
}

.id-rappel__card .id-field input[type=text],
.id-rappel__card .id-field input[type=tel],
.id-rappel__card .id-field input[type=email],
.id-rappel__card .id-field textarea {
  color: var(--id-paper-ink);
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--paper-line);
  border-radius: 4px;
}

.id-rappel__card .id-field input:focus,
.id-rappel__card .id-field textarea:focus {
  border-color: var(--id-purple);
  box-shadow: 0 0 0 4px rgba(103, 7, 248, 0.16);
}

.id-rappel__card .id-field input.is-invalid,
.id-rappel__card .id-field textarea.is-invalid {
  border-color: var(--paper-alert);
}

.id-rappel__card .id-field__hint {
  color: var(--id-paper-ink-soft);
}

.id-rappel__card .id-field__opt {
  color: var(--id-paper-ink-soft);
  opacity: 0.75;
}

.id-rappel__card .id-field__error {
  color: var(--paper-alert);
}

.id-rappel__card .id-chip span {
  color: var(--id-paper-ink-soft);
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--paper-line);
  border-radius: 4px;
}

.id-rappel__card .id-chip:hover span {
  border-color: var(--id-purple);
}

.id-rappel__card .id-chip input:checked + span,
.id-rappel__card .id-chip input:focus-visible + span {
  color: var(--id-paper-ink);
  border-color: var(--id-purple);
  box-shadow: 0 0 0 4px rgba(103, 7, 248, 0.16);
}

.id-rappel__form .btn-primary {
  margin-top: calc(0.5 * var(--grid-size));
}

.id-rappel__status {
  margin: calc(0.5 * var(--grid-size)) 0 0;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-alert);
}
@media screen and (max-width: 767px) {
  .id-rappel__status {
    font-size: max(13px, 2.7083333333vw);
  }
}

.id-rappel__status:empty {
  margin: 0;
}

.id-rappel__consent {
  margin: calc(1 * var(--grid-size)) 0 0;
  font-size: clamp(13px, 0.85vw, 17.4px);
  line-height: 1.6;
  color: var(--id-paper-ink-soft);
}
@media screen and (max-width: 767px) {
  .id-rappel__consent {
    margin-top: 24px;
    font-size: max(13px, 2.7083333333vw);
  }
}

.id-rappel__consent a {
  color: var(--id-paper-ink);
  border-bottom: 1px solid rgba(255, 124, 31, 0.6);
  transition: border-color 0.25s ease;
}

.id-rappel__consent a:hover,
.id-rappel__consent a:focus-visible {
  border-bottom-color: var(--id-purple);
}

.id-rappel__done {
  max-width: calc(18 * var(--grid-size));
  margin-top: calc(1 * var(--grid-size));
  padding: calc(1 * var(--grid-size));
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--paper-line);
}
@media screen and (max-width: 767px) {
  .id-rappel__done {
    padding: 24px;
  }
}

.id-rappel__done h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.5vw, 30.7px);
  line-height: 1.25;
  color: var(--id-paper-ink);
  margin: 0 0 0.5em;
}
@media screen and (max-width: 767px) {
  .id-rappel__done h2 {
    font-size: max(20px, 4.1666666667vw);
  }
}

.id-rappel__done h2:focus-visible {
  outline: 2px solid var(--id-orange);
  outline-offset: 4px;
}

.id-rappel__done p {
  margin: 0;
  font-size: clamp(15px, 1vw, 20.5px);
  line-height: 1.6;
  color: var(--id-paper-ink-soft);
}
@media screen and (max-width: 767px) {
  .id-rappel__done p {
    font-size: max(15px, 3.125vw);
  }
}

.id-rappel__foot {
  width: 100%;
  max-width: calc(24 * var(--grid-size));
  margin-top: calc(1.5 * var(--grid-size));
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-align: center;
}
.id-rappel__foot p {
  margin: 0;
}
.id-rappel__foot a {
  color: var(--text-muted);
  transition: color 0.25s ease;
}
.id-rappel__foot a:hover, .id-rappel__foot a:focus-visible {
  color: var(--text);
}
.id-rappel__foot .id-foot__bit::after {
  content: " · ";
  opacity: 0.5;
}
@media screen and (max-width: 767px) {
  .id-rappel__foot .id-foot__bit {
    display: block;
  }
  .id-rappel__foot .id-foot__bit::after {
    content: none;
  }
  .id-rappel__foot .id-foot__links {
    display: block;
    margin-top: 6px;
  }
}

.id-form__nav {
  display: flex;
  align-items: center;
  gap: calc(1.5 * var(--grid-size));
  margin-top: calc(2 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-form__nav {
    gap: 32px;
    margin-top: 48px;
  }
}

.id-form__nav .btn {
  padding-top: 0;
  padding-bottom: 0;
  height: calc(2 * var(--grid-size));
  display: inline-flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .id-form__nav .btn {
    height: calc(1.5 * var(--grid-size));
    min-height: 44px;
    padding: 0 calc(0.5 * var(--grid-size));
  }
}

.id-form__nav .btn.btn-primary {
  min-width: calc(6 * var(--grid-size));
  justify-content: center;
  padding-left: calc(0.5 * var(--grid-size));
  padding-right: calc(0.5 * var(--grid-size));
}

.id-form__nav .btn.btn-primary::after {
  position: static;
  margin-left: 0.75em;
}

.id-form__back {
  padding-right: 0;
}

.id-form__recap p {
  display: grid;
  grid-template-columns: calc(5 * var(--grid-size)) minmax(0, 1fr);
  column-gap: calc(0.5 * var(--grid-size));
  margin: 0 0 calc(0.5 * var(--grid-size));
  font-size: clamp(14px, 0.95vw, 19.5px);
  line-height: calc(1 * var(--grid-size));
  color: var(--text);
}
@media screen and (max-width: 767px) {
  .id-form__recap p {
    grid-template-columns: minmax(0, 1fr);
    font-size: max(14px, 2.9166666667vw);
    line-height: 1.5;
  }
}

.id-form__recap p span {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media screen and (max-width: 767px) {
  .id-form__recap p span {
    font-size: max(11px, 2.2916666667vw);
  }
}

.id-form__price {
  margin-top: calc(1 * var(--grid-size));
  padding: calc(0.5 * var(--grid-size));
  font-size: clamp(14px, 0.95vw, 19.5px);
  line-height: 1.5;
  color: var(--text-muted);
  border: 1px dashed var(--border-faint);
}
@media screen and (max-width: 767px) {
  .id-form__price {
    font-size: max(14px, 2.9166666667vw);
  }
}
.id-form__price strong {
  color: var(--text);
  font-family: var(--font-display);
}

.id-form__done h2 {
  font-size: clamp(24px, 3vw, 61.4px);
  line-height: calc(2 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(24px, 3vw, 61.4px));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-form__done h2 {
    line-height: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-form__done h2 {
    font-size: max(28px, 5.8333333333vw);
    line-height: calc(1.5 * var(--grid-size));
    padding-top: calc(calc(1.5 * var(--grid-size)) - 0.714 * max(28px, 5.8333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-form__done h2 {
    font-size: clamp(28px, 3.34vw, 38px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(28px, 3.34vw, 38px));
  }
}

.id-form__done p {
  font-size: clamp(14px, 0.95vw, 19.5px);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-form__done p {
    font-size: max(14px, 2.9166666667vw);
  }
}

.id-form__optnote {
  font-size: clamp(14px, 1vw, 20.5px);
  line-height: calc(1 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(14px, 1vw, 20.5px));
  margin: 0 0 calc(1 * var(--grid-size));
  color: var(--text-muted);
}
@media screen and (max-width: 767px) {
  .id-form__optnote {
    font-size: max(14px, 2.9166666667vw);
    line-height: 1.5;
    padding-top: 0;
    margin: 0 0 24px;
  }
}

.id-optgroup {
  margin-bottom: calc(0.5 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-optgroup {
    margin-bottom: 24px;
  }
}

.id-optgroup__title {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--id-orange);
  line-height: calc(1 * var(--grid-size));
  margin: 0 0 calc(0.5 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-optgroup__title {
    font-size: max(12px, 2.5vw);
    line-height: 24px;
    margin: 0 0 12px;
  }
}

.id-opt {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: calc(0.5 * var(--grid-size));
  min-height: calc(1.5 * var(--grid-size));
  border-bottom: 1px dashed var(--border-faint);
}
@media screen and (max-width: 767px) {
  .id-opt {
    min-height: 52px;
  }
}

.id-opt:last-child {
  border-bottom: 0;
}

.id-opt__check {
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--grid-size));
  cursor: pointer;
  font-size: clamp(15px, 1.05vw, 21.5px);
  color: var(--text);
}
@media screen and (max-width: 767px) {
  .id-opt__check {
    gap: 12px;
    font-size: max(15px, 3.125vw);
  }
}

.id-opt__check input {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--id-orange);
  cursor: pointer;
}

.id-opt__actions {
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-opt__actions {
    gap: 12px;
  }
}

.id-opt__info {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-faint);
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-style: italic;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.id-opt__info:hover,
.id-opt__info:focus-visible,
.id-opt__info[aria-expanded=true] {
  color: var(--id-orange);
  border-color: var(--id-orange);
}

.id-opt__tip {
  grid-column: 1/-1;
  margin: calc(0.25 * var(--grid-size)) 0 0;
  padding: calc(0.5 * var(--grid-size));
  background-color: var(--bg-elevated);
  border-left: 2px solid var(--id-orange);
  font-size: clamp(13px, 0.9vw, 18.4px);
  line-height: 1.5;
  color: var(--text-muted);
}
@media screen and (max-width: 767px) {
  .id-opt__tip {
    font-size: max(13px, 2.7083333333vw);
  }
}

.id-opt__qty {
  display: inline-flex;
  align-items: center;
  gap: calc(0.5 * var(--grid-size));
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
}
@media screen and (max-width: 767px) {
  .id-opt__qty {
    font-size: max(14px, 2.9166666667vw);
  }
}

.id-opt__qty button {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-faint);
  background: none;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.id-opt__qty button:hover,
.id-opt__qty button:focus-visible {
  border-color: var(--id-orange);
}

.id-opt__price {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(14px, 0.95vw, 19.5px);
  color: var(--id-orange);
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .id-opt__price {
    font-size: max(14px, 2.9166666667vw);
  }
}

.id-opt--base {
  margin-bottom: calc(0.5 * var(--grid-size));
}

.id-opt--base .id-opt__check {
  font-size: clamp(15px, 1.05vw, 21.5px);
  color: var(--text);
}

.id-opt__baseflag {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--id-orange);
  border: 1px solid var(--border-faint);
  padding: 2px 8px;
}
@media screen and (max-width: 767px) {
  .id-opt__baseflag {
    font-size: max(11px, 2.2916666667vw);
  }
}

.id-path {
  display: flex;
  gap: calc(0.5 * var(--grid-size));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-path {
    flex-direction: column;
    gap: 12px;
    margin: 0 0 24px;
  }
}

.id-path__card {
  flex: 1;
  box-sizing: border-box;
  height: calc(4 * var(--grid-size));
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: calc(0.5 * var(--grid-size));
  background-color: var(--bg-section);
  border: 1px solid color-mix(in srgb, var(--tier-c) 26%, transparent);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media screen and (max-width: 767px) {
  .id-path__card {
    height: auto;
  }
}

.id-path__card--logo {
  --tier-c: var(--id-purple);
}

.id-path__card--custom {
  --tier-c: var(--id-orange);
}

.id-path__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.5 * var(--grid-size));
  margin: calc(-0.5 * var(--grid-size)) calc(-0.5 * var(--grid-size)) calc(0.5 * var(--grid-size));
  padding: calc(0.5 * var(--grid-size));
  background-color: color-mix(in srgb, var(--tier-c) 10%, transparent);
  transition: background-color 0.2s ease;
}

.id-path__radio {
  flex: none;
  width: clamp(18px, 1.2vw, 24.6px);
  height: clamp(18px, 1.2vw, 24.6px);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--tier-c) 40%, transparent);
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.id-path__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.5 * var(--grid-size));
}

.id-path__card:hover,
.id-path__card:focus-visible {
  border-color: color-mix(in srgb, var(--tier-c) 55%, transparent);
}

.id-path__card:hover .id-path__radio,
.id-path__card:focus-visible .id-path__radio {
  border-color: color-mix(in srgb, var(--tier-c) 70%, transparent);
}

.id-path__card.is-active {
  border-color: var(--tier-c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier-c) 30%, transparent);
}

.id-path__card.is-active .id-path__head {
  background-color: color-mix(in srgb, var(--tier-c) 26%, transparent);
}

.id-path__card.is-active .id-path__radio {
  border-color: var(--tier-c);
}

.id-path__card.is-active .id-path__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--tier-c);
}

.id-path__label {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.1vw, 22.5px);
  color: var(--tier-c);
}
@media screen and (max-width: 767px) {
  .id-path__label {
    font-size: max(16px, 3.3333333333vw);
  }
}

.id-path__desc {
  font-size: clamp(13px, 0.9vw, 18.4px);
  line-height: 1.4;
  color: var(--text-muted);
}
@media screen and (max-width: 767px) {
  .id-path__desc {
    font-size: max(13px, 2.7083333333vw);
  }
}

.id-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  white-space: nowrap;
}

.id-price__from,
.id-price__per {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
@media screen and (max-width: 767px) {
  .id-price__from,
  .id-price__per {
    font-size: max(11px, 2.2916666667vw);
  }
}

.id-price__amount {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.15vw, 23.6px);
  line-height: 1;
  color: var(--tier-c, var(--id-orange));
}
@media screen and (max-width: 767px) {
  .id-price__amount {
    font-size: max(17px, 3.5416666667vw);
  }
}

.id-path__card .id-price {
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1em;
}

.id-path__card .id-price__amount {
  font-size: clamp(22px, 1.5vw, 30.7px);
}
@media screen and (max-width: 767px) {
  .id-path__card .id-price__amount {
    font-size: max(22px, 4.5833333333vw);
  }
}

.id-form__total {
  margin: calc(0.5 * var(--grid-size)) 0 0;
  padding: calc(0.5 * var(--grid-size));
  background-color: var(--bg-elevated);
  border-left: 2px solid var(--id-orange);
  font-size: clamp(14px, 0.95vw, 19.5px);
  line-height: 1.5;
  color: var(--text-muted);
}
.id-form__total strong {
  color: var(--text);
  font-family: var(--font-display);
}
@media screen and (max-width: 767px) {
  .id-form__total {
    margin: 24px 0 0;
    font-size: max(14px, 2.9166666667vw);
  }
}

.id-form__total-sum {
  margin: 0;
  font-size: clamp(18px, 1.3vw, 26.6px);
  line-height: calc(1 * var(--grid-size));
  color: var(--text);
}
@media screen and (max-width: 767px) {
  .id-form__total-sum {
    font-size: max(18px, 3.75vw);
  }
}

.id-form__vat {
  display: block;
  font-size: clamp(13px, 0.9vw, 18.4px);
  line-height: calc(1 * var(--grid-size));
  color: var(--text-muted);
}
@media screen and (max-width: 767px) {
  .id-form__vat {
    font-size: max(13px, 2.7083333333vw);
  }
}

.id-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(14 * var(--grid-size));
  column-gap: calc(2 * var(--grid-size));
  align-items: start;
}
@media screen and (max-width: 1139px) {
  .id-select {
    grid-template-columns: minmax(0, 1fr);
  }
}

.id-select__detail {
  position: sticky;
  top: calc(2 * var(--grid-size));
  padding: calc(0.75 * var(--grid-size));
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-faint);
}
@media screen and (max-width: 1139px) {
  .id-select__detail {
    display: none;
  }
}

.id-detail__illus {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3/2;
  margin-bottom: calc(0.5 * var(--grid-size));
  background: color-mix(in srgb, var(--id-orange) 10%, var(--bg-section));
  border: 1px solid var(--border-faint);
  color: var(--id-orange);
  overflow: hidden;
}

.id-detail__illus span {
  font-size: 2.5rem;
  opacity: 0.6;
}

.id-detail__illus i {
  font-size: clamp(72px, 6vw, 122.9px);
  line-height: 1;
}

.id-detail__illus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.id-detail__title {
  margin: 0 0 0.2em;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.25vw, 25.6px);
  line-height: 1.25;
  color: var(--text);
}
@media screen and (max-width: 767px) {
  .id-detail__title {
    font-size: max(18px, 3.75vw);
  }
}

.id-detail__price {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.05vw, 21.5px);
  color: var(--id-orange);
}
@media screen and (max-width: 767px) {
  .id-detail__price {
    font-size: max(15px, 3.125vw);
  }
}

.id-detail__text {
  margin: 0;
  font-size: clamp(14px, 0.95vw, 19.5px);
  line-height: 1.6;
  color: var(--text-muted);
}
@media screen and (max-width: 767px) {
  .id-detail__text {
    font-size: max(14px, 2.9166666667vw);
  }
}

.id-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(15, 15, 20, 0.7);
}

.id-modal__box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-faint);
}

.id-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.id-modal__close:hover,
.id-modal__close:focus-visible {
  color: var(--id-orange);
}

.id-form__back.btn.btn-secondary {
  padding-left: 48px;
  padding-right: 0;
}

.id-form__back.btn.btn-secondary::before {
  left: auto;
  right: -24px;
}

.id-form__back.btn.btn-secondary::after {
  content: "⟵";
  right: auto;
  left: 0;
  margin-left: 0;
}

.id-form__back.btn.btn-secondary:hover,
.id-form__back.btn.btn-secondary:focus,
.id-form__back.btn.btn-secondary:active {
  padding-left: 58px;
  padding-right: 0;
}

.id-contact {
  color: var(--id-paper-ink);
  background-image: url("./images/noise-lift.png"), linear-gradient(180deg, #1d0c40 0%, #0f0f14 100%);
  background-size: 96px 96px, 100% 100%;
  padding: 10px 5vw;
}
.id-contact::before {
  content: none;
}

.id-contact__card {
  position: relative;
  z-index: 0;
  background-color: #fdfcff;
  background-image: url("./images/noise-ink.png"), url("./images/daylight.jpg");
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  border-radius: 10px;
  overflow: hidden;
  padding: calc(3 * var(--grid-size)) 0;
}

.id-contact .id-eyebrow {
  line-height: calc(1 * var(--grid-size));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-contact .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-contact .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
.id-contact .id-eyebrow {
  color: var(--id-orange);
}

.id-contact h2 {
  font-size: clamp(24px, 3vw, 61.4px);
  line-height: calc(2 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(24px, 3vw, 61.4px));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-contact h2 {
    line-height: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-contact h2 {
    font-size: max(28px, 5.8333333333vw);
    line-height: calc(1.5 * var(--grid-size));
    padding-top: calc(calc(1.5 * var(--grid-size)) - 0.714 * max(28px, 5.8333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-contact h2 {
    font-size: clamp(28px, 3.34vw, 38px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(28px, 3.34vw, 38px));
  }
}
.id-contact h2 {
  color: var(--id-paper-ink);
  max-width: calc(20 * var(--grid-size));
  line-height: calc(1.5 * var(--grid-size));
}

.id-contact__lead {
  font-size: clamp(15px, 1.15vw, 23.6px);
  line-height: calc(1 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(15px, 1.15vw, 23.6px));
  color: var(--text-muted);
  max-width: calc(14 * var(--grid-size));
  margin: 0 0 calc(2 * var(--grid-size));
  font-weight: 100;
}
@media screen and (max-width: 767px) {
  .id-contact__lead {
    font-weight: 300;
    max-width: none;
    font-size: max(16px, 3.3333333333vw);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * max(16px, 3.3333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-contact__lead {
    font-size: clamp(16px, 1.84vw, 21px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(16px, 1.84vw, 21px));
  }
}
.id-contact__lead {
  color: var(--id-paper-ink-soft);
  line-height: 1.75;
  padding-top: 0;
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-contact__lead {
    margin-bottom: calc(1 * var(--grid-size));
  }
}

.id-contact__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.id-board--hello {
  width: min(calc(14 * var(--grid-size)), 92%);
  max-width: none;
  aspect-ratio: 1335/267;
  margin: 0 0 calc(1 * var(--grid-size));
  align-self: center;
}

.id-board--hello .id-board__glyph {
  width: 13.333%;
  height: 66.667%;
  top: 16.667%;
  left: calc(3.333% + var(--i) * 13.333%);
}

.id-board--hello .id-board__glyph[data-glyph="glyph-5-dots.svg"] rect {
  fill: #f65a00;
}

.id-contact__facts {
  list-style: none;
  margin: calc(0.75 * var(--grid-size)) 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-contact__facts {
    margin-top: calc(0.25 * var(--grid-size));
  }
}
.id-contact__facts {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(63, 26, 114, 0.75);
}

.id-contact__facts li::before {
  content: "⁙ ";
  color: var(--id-purple);
}

.id-contact__lead .btn-link {
  color: var(--id-paper-ink);
}

.id-contact__lead a.btn-link {
  white-space: nowrap;
}

#main-footer {
  position: relative;
  z-index: 0;
  margin: 0 var(--frame) var(--frame);
  padding-top: calc(2.5 * var(--grid-size));
  padding-bottom: calc(2.5 * var(--grid-size));
}

.copyright .id-foot__bit::after {
  content: " · ";
  opacity: 0.5;
}

@media screen and (max-width: 767px) {
  .copyright .id-foot__bit {
    display: block;
  }
  .copyright .id-foot__bit::after {
    content: none;
  }
  .copyright .id-foot__links {
    display: block;
    margin-top: 6px;
    white-space: nowrap;
  }
}
.id-footnav {
  list-style: none;
  margin: 0 0 calc(1 * var(--grid-size));
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}
.id-footnav a {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.3s ease;
}
.id-footnav a:hover {
  color: var(--id-orange);
}

#main-footer {
  background-color: var(--id-ink-tile);
  background-image: url("./images/noise-lift.png");
  background-size: 96px 96px;
}

.id-contact__form {
  width: min(100%, calc(20 * var(--grid-size)));
  margin: 0 auto;
  text-align: left;
}

.id-contact__form .id-form__step.is-active {
  max-width: none;
}

.id-contact__form .id-form__step + .id-form__step {
  margin-top: calc(0.75 * var(--grid-size));
}

.id-say {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.45vw, 29.7px);
  line-height: 2;
  color: var(--id-paper-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.2em;
  text-align: left;
}

.id-say ~ .id-say {
  margin-top: calc(0.75 * var(--grid-size));
}

.id-say__ask {
  flex: none;
}

.id-say .id-write {
  flex: 1 1 8em;
  min-width: 8em;
}

.id-say .id-write input {
  width: 100%;
}

.id-say__hint {
  margin: 0.9em 0 0;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-size: clamp(12px, 0.85vw, 15px);
  line-height: 1.5;
  color: var(--id-paper-ink-soft);
}

.id-say--long {
  line-height: 1.7;
}

.id-write {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}

.id-write input,
.id-write textarea {
  font-family: var(--font-display);
  font-style: italic;
  font-size: inherit;
  line-height: 1.5;
  padding: 0 1.4em 0.1em 0.1em;
  color: var(--id-purple);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(20, 20, 27, 0.28);
  border-radius: 0;
  transition: border-color 0.25s ease;
  field-sizing: content;
  min-width: 6ch;
  max-width: 100%;
}

.id-write textarea {
  width: 100%;
  resize: none;
  field-sizing: fixed;
  padding: 0 1.6em 0 0.1em;
  border-bottom: 0;
  background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(1.5em - 1px), rgba(20, 20, 27, 0.28) calc(1.5em - 1px), rgba(20, 20, 27, 0.28) 1.5em);
  transition: none;
}

.id-write textarea:focus {
  background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(1.5em - 1px), var(--id-purple) calc(1.5em - 1px), var(--id-purple) 1.5em);
}

.id-say .id-write--long {
  display: block;
  flex: 1 1 100%;
  margin-top: calc(0.25 * var(--grid-size));
}

.id-write--long .id-write__pen {
  top: 0.3em;
  transform: rotate(90deg);
}

.id-write input::placeholder,
.id-write textarea::placeholder {
  font-style: italic;
  color: rgba(63, 26, 114, 0.46);
}

#c-name::-webkit-contacts-auto-fill-button,
#c-company::-webkit-contacts-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.id-write input:focus,
.id-write textarea:focus {
  outline: none;
  border-bottom-color: var(--id-purple);
  box-shadow: 0 1px 0 0 var(--id-purple);
}

.id-write input.is-invalid,
.id-write textarea.is-invalid {
  border-bottom-color: #c2410c;
  box-shadow: none;
}

.id-write__pen {
  position: absolute;
  right: 0.25em;
  top: 50%;
  font-family: "Phosphor-Light" !important;
  font-size: 0.9em;
  line-height: 1;
  color: var(--id-purple);
  opacity: 0.5;
  pointer-events: none;
  transform: translateY(-50%) rotate(90deg);
}

.id-pick {
  display: inline-flex;
  align-items: baseline;
  gap: 0.8em;
  margin: 0 0.1em;
  cursor: pointer;
  white-space: nowrap;
  font-style: italic;
  transition: color 0.2s ease;
}

.id-pick:hover {
  color: var(--id-purple-lit);
}

.id-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.id-tick {
  position: relative;
  flex: none;
  width: 0.86em;
  height: 0.86em;
  align-self: center;
  transition: background-color 0.2s ease;
}

.id-tick::before {
  content: "";
  position: absolute;
  inset: -0.34em;
  background-image: linear-gradient(var(--text-muted) 0 100%), linear-gradient(var(--text-muted) 0 100%), linear-gradient(var(--text-muted) 0 100%), linear-gradient(var(--text-muted) 0 100%);
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: left top 0.34em, left bottom 0.34em, left 0.34em top, right 0.34em top;
  background-repeat: no-repeat;
  transition: background-image 0.2s ease;
}

.id-tick::after {
  content: "";
  position: absolute;
  inset: 0.08em;
  background-image: linear-gradient(45deg, transparent calc(50% - 0.85px), var(--id-purple) calc(50% - 0.85px) calc(50% + 0.85px), transparent calc(50% + 0.85px)), linear-gradient(-45deg, transparent calc(50% - 0.85px), var(--id-purple) calc(50% - 0.85px) calc(50% + 0.85px), transparent calc(50% + 0.85px));
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.id-pick:hover .id-tick::before {
  background-image: linear-gradient(var(--id-purple-lit) 0 100%), linear-gradient(var(--id-purple-lit) 0 100%), linear-gradient(var(--id-purple-lit) 0 100%), linear-gradient(var(--id-purple-lit) 0 100%);
}

.id-pick input:checked ~ .id-tick::after {
  opacity: 1;
  transform: none;
}

.id-pick input:checked ~ .id-tick {
  background-color: rgba(103, 7, 248, 0.12);
  color: var(--id-purple);
}
.id-pick input:checked ~ .id-tick:before {
  background-image: linear-gradient(var(--id-purple-lit) 0 100%), linear-gradient(var(--id-purple-lit) 0 100%), linear-gradient(var(--id-purple-lit) 0 100%), linear-gradient(var(--id-purple-lit) 0 100%);
}

.id-pick input:focus-visible ~ .id-tick {
  outline: 2px solid var(--id-orange);
  outline-offset: 3px;
}

.id-contact__form .id-form__actions {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: calc(1.25 * var(--grid-size)) auto 0;
}

.id-contact__form .id-form__back {
  position: relative;
  color: var(--id-paper-ink-soft);
  text-decoration: none;
}

.id-contact__form .id-form__back::before {
  content: "⟵";
  margin-right: 0.6em;
}

.id-contact__form .id-form__back::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background-image: linear-gradient(to right, var(--brand-blue) 0%, var(--brand-purple) 100%);
  opacity: 0.4;
  transition: opacity 300ms ease-in-out;
}

.id-contact__form .id-form__back:hover {
  color: var(--id-paper-ink);
}

.id-contact__form .id-form__back:hover::after {
  opacity: 1;
}

.id-contact__form .btn-link {
  color: var(--id-paper-ink);
}

.id-contact__form .id-form__status {
  color: var(--id-paper-ink-soft);
}

.id-contact__form .id-field__error {
  color: #c2410c;
  text-align: left;
}

.id-contact__facts {
  margin-top: calc(1.5 * var(--grid-size));
}

.id-contact__done h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 32.8px);
  line-height: 1.2;
  margin: 0 0 calc(0.5 * var(--grid-size));
  color: var(--id-paper-ink);
}

.id-contact__done p:not(.id-eyebrow) {
  margin: 0;
  color: var(--id-paper-ink-soft);
}

.id-blog {
  min-height: 100vh;
  background-color: var(--bg-hero);
}

.id-blog .id-eyebrow {
  line-height: calc(1 * var(--grid-size));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-blog .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-blog .id-eyebrow {
    margin-bottom: calc(0.5 * var(--grid-size));
  }
}

.id-blog h1 {
  font-size: clamp(24px, 3vw, 61.4px);
  line-height: calc(2 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(24px, 3vw, 61.4px));
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 1139px) {
  .id-blog h1 {
    line-height: calc(1 * var(--grid-size));
  }
}
@media screen and (max-width: 767px) {
  .id-blog h1 {
    font-size: max(28px, 5.8333333333vw);
    line-height: calc(1.5 * var(--grid-size));
    padding-top: calc(calc(1.5 * var(--grid-size)) - 0.714 * max(28px, 5.8333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-blog h1 {
    font-size: clamp(28px, 3.34vw, 38px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.714 * clamp(28px, 3.34vw, 38px));
  }
}
.id-blog h1 {
  max-width: calc(22 * var(--grid-size));
}

.id-blog__lead {
  font-size: clamp(15px, 1.15vw, 23.6px);
  line-height: calc(1 * var(--grid-size));
  text-box: trim-both cap alphabetic;
  padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(15px, 1.15vw, 23.6px));
  color: var(--text-muted);
  max-width: calc(14 * var(--grid-size));
  margin: 0 0 calc(2 * var(--grid-size));
  font-weight: 100;
}
@media screen and (max-width: 767px) {
  .id-blog__lead {
    font-weight: 300;
    max-width: none;
    font-size: max(16px, 3.3333333333vw);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * max(16px, 3.3333333333vw));
  }
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
  .id-blog__lead {
    font-size: clamp(16px, 1.84vw, 21px);
    padding-top: calc(calc(1 * var(--grid-size)) - 0.7 * clamp(16px, 1.84vw, 21px));
  }
}
.id-blog__lead {
  max-width: calc(18 * var(--grid-size));
}

.id-blog__meta {
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: calc(1 * var(--grid-size));
  color: var(--text-faint);
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-blog__meta {
    font-size: max(12px, 2.5vw);
  }
}

.id-bloglist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: calc(20 * var(--grid-size));
}

.id-bloglist li {
  margin-bottom: calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-bloglist li {
    margin-bottom: 24px;
  }
}

.id-bloglist a {
  display: block;
  padding: calc(0.5 * var(--grid-size));
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease;
}
@media screen and (max-width: 767px) {
  .id-bloglist a {
    padding: 24px;
  }
}

.id-bloglist a:hover,
.id-bloglist a:focus-visible {
  border-color: var(--id-orange);
}

.id-bloglist h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.3vw, 26.6px);
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 0.4em;
}
@media screen and (max-width: 767px) {
  .id-bloglist h2 {
    font-size: max(20px, 4.1666666667vw);
  }
}

.id-bloglist p {
  margin: 0;
  font-size: clamp(14px, 1vw, 20.5px);
  line-height: 1.6;
  color: var(--text-muted);
}
@media screen and (max-width: 767px) {
  .id-bloglist p {
    font-size: max(14px, 2.9166666667vw);
  }
}

.id-article {
  max-width: calc(18 * var(--grid-size));
  font-size: clamp(16px, 1.05vw, 21.5px);
  line-height: 1.7;
  color: var(--text-muted);
}
@media screen and (max-width: 767px) {
  .id-article {
    font-size: max(16px, 3.3333333333vw);
  }
}

.id-article h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.5vw, 30.7px);
  line-height: 1.25;
  color: var(--text);
  margin: 1.8em 0 0.6em;
}
@media screen and (max-width: 767px) {
  .id-article h2 {
    font-size: max(22px, 4.5833333333vw);
  }
}

.id-article p {
  margin: 0 0 1.2em;
}

.id-article strong {
  color: var(--text);
  font-weight: 600;
}

.id-article a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--id-orange);
  transition: border-color 0.25s ease;
}

.id-article a:hover,
.id-article a:focus-visible {
  border-bottom-color: var(--id-purple);
}

.id-article__end {
  margin-top: calc(2 * var(--grid-size));
  padding: calc(1 * var(--grid-size));
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-faint);
}
@media screen and (max-width: 767px) {
  .id-article__end {
    margin-top: 48px;
    padding: 24px;
  }
}

.id-article__end-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.5vw, 30.7px);
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 0.4em;
}
@media screen and (max-width: 767px) {
  .id-article__end-title {
    font-size: max(20px, 4.1666666667vw);
  }
}

.id-article__end-lead {
  font-size: clamp(14px, 1vw, 20.5px);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-article__end-lead {
    margin: 0 0 24px;
    font-size: max(14px, 2.9166666667vw);
  }
}

.id-article__end-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(1 * var(--grid-size)) calc(2.5 * var(--grid-size));
  font-size: clamp(14px, 0.95vw, 19.5px);
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .id-article__end-actions {
    gap: 24px 40px;
    font-size: max(14px, 2.9166666667vw);
  }
}

.id-article__end-actions .btn-link {
  margin-left: 1.75em;
}

.id-legal {
  counter-reset: clause;
}

.id-clause {
  counter-increment: clause;
  display: grid;
  grid-template-columns: calc(1 * var(--grid-size)) minmax(0, 1fr);
  column-gap: calc(0.5 * var(--grid-size));
  align-items: baseline;
  margin-top: calc(1.5 * var(--grid-size));
  scroll-margin-top: calc(1 * var(--grid-size));
}
@media screen and (max-width: 767px) {
  .id-clause {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 12px;
    margin-top: 40px;
  }
}

.id-clause:first-child {
  margin-top: 0;
}

.id-clause::before {
  content: counter(clause, decimal-leading-zero);
  grid-column: 1;
  text-align: right;
  font-family: "EYN Dots", "Quicksand", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  color: var(--id-orange);
}

.id-clause > * {
  grid-column: 2;
}

.id-clause h2 {
  margin-top: 0;
}

.id-clause > :last-child {
  margin-bottom: 0;
}

.id-404 {
  position: relative;
  z-index: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1 * var(--grid-size));
  background-color: #151320;
  --fp: calc(var(--grid-size) / 2);
  --bsz: min(calc(793 / 22 * var(--fp)), calc(100dvh - calc(10 * var(--grid-size))));
}
@media screen and (max-width: 767px) {
  .id-404 {
    --bsz: calc(10 * var(--grid-size));
  }
}

.id-404::before {
  content: "";
  position: absolute;
  inset: var(--grid-size);
  z-index: -1;
  pointer-events: none;
  background-image: var(--dot-tile);
  background-repeat: repeat;
  background-size: var(--fp) var(--fp);
  background-position: 0 0;
  opacity: 0.5;
}

.id-404 .id-board {
  position: absolute;
  width: var(--bsz);
  height: var(--bsz);
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  left: calc(var(--grid-size) + round(nearest, (100% - var(--bsz)) / 2 - var(--grid-size), var(--fp)));
  top: calc(var(--grid-size) + round(nearest, (100% - var(--bsz)) / 2 - var(--grid-size), var(--fp)));
}

.id-404__logo {
  position: absolute;
  top: calc(var(--grid-size) + round(nearest, (100% - var(--bsz)) / 2 - var(--grid-size), var(--fp)) - calc(4.5 * var(--grid-size)));
  left: 50%;
  transform: translateX(-50%);
  height: calc(var(--grid-size) * 2);
}
@media screen and (max-width: 767px) {
  .id-404__logo {
    height: auto;
    width: min(60vw, var(--grid-size) * 8);
  }
}

.id-404__logo img {
  height: 100%;
  width: auto;
  max-width: none;
}
@media screen and (max-width: 767px) {
  .id-404__logo img {
    width: 100%;
    height: auto;
  }
}

.id-404 .id-404__home {
  position: absolute;
  top: calc(var(--grid-size) + round(nearest, (100% - var(--bsz)) / 2 - var(--grid-size), var(--fp)) + var(--bsz) + calc(2.5 * var(--grid-size)));
  left: 50%;
  transform: translateX(-50%);
}

html[data-theme=dark] {
  /* Backgrounds */
  --bg-page: #0f0f14;
  --bg-section: #100e15;
  --bg-section-mist: #1d1a2a;
  --bg-elevated: #1c1c25;
  --bg-hero: #100e15;
  /* Text */
  --text: #e4e4ea;
  --text-muted: #9696a4;
  --text-faint: #6a6a78;
  --text-eyebrow: #3a3a48;
  --text-stories-eyebrow: #8674c4;
  --text-on-brand: #fff;
  /* Brand */
  --brand-blue: #4816e9;
  --brand-purple: #6707f8;
  --brand-highlight: #3a2f5e;
  --brand-mist: #1d1a2a;
  /* Borders */
  --border-faint: rgba(255, 255, 255, 0.08);
  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.4);
  --shadow-paper: #3a2f5e;
  --shadow-paper-hover: #4e3d7a;
  /* Hairline tones (Stories) */
  --rule-tone: rgba(255, 255, 255, 0.12);
  --dek-tone: #9c95b8;
}

/* Dark theme — applied via [data-theme="dark"] on <html>, which theme.js sets
   from the user's saved choice or, absent one, the OS preference. The dark
   token values live in _dark-tokens.generated.scss (from tokens.json); the
   rules below are the non-token dark fixes. */
/* Stories image: multiply over a light backplate is a light-mode trick.
   On dark, drop the blend so the photo reads naturally. */
html[data-theme=dark] .home-stories__lead-media img {
  mix-blend-mode: normal;
  filter: brightness(0.92) contrast(1.02);
}

html[data-theme=dark] .home-stories__lead-media:hover img {
  filter: none;
}

/* Service icon dot pattern: the base64 PNG is dark dots on transparent,
   invisible on dark bg. Replace with a CSS-only light-on-dark dot grid. */
html[data-theme=dark] .home-services__list--item .icon:before {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAF0lEQVR4nGNgGILg////eiBMPYWDEAAALNIMrZ9o18AAAAAASUVORK5CYII=") repeat;
  image-rendering: pixelated;
  opacity: 0.7;
}

/* Share section's flanking dot bands: same fix */
html[data-theme=dark] .share:before,
html[data-theme=dark] .share:after {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAF0lEQVR4nGNgGILg////KiBMPYWDEAAADQYMhTFZHfwAAAAASUVORK5CYII=") repeat;
  image-rendering: pixelated;
}

/* Hero dot pattern: replace the inline dark-dot PNG with a light one */
html[data-theme=dark] .home-intro {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAF0lEQVR4nGNgGILg/////CBMPYWDEAAAyjEMMT7ugngAAAAASUVORK5CYII=") repeat top right var(--bg-hero);
  image-rendering: pixelated;
}

/* Cookies modal needs a darker shadow that actually shows on a dark page edge */
html[data-theme=dark] .cookies-modal {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}