* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #eee;
  font-family: "DM Sans", sans-serif;
  color: #23231f;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid #c66c42;
  outline-offset: 6px;
}
button {
  border: 0;
  background: none;
}
a {
  color: inherit;
  text-decoration: none;
}
figure,
h1,
p {
  margin: 0;
}
button span {
  display: inline-block;
}
button:hover span:last-child {
  transform: translate(3px, -2px);
}
button span {
  transition: transform 0.25s;
}
button:disabled {
  cursor: default;
}
[hidden] {
  display: none !important;
}
.studio {
  min-height: 65px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 28px;
  border-bottom: 1px solid #ddd;
}
.studio-brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}
.studio-brand span {
  display: block;
  font-size: 8px;
  font-weight: 400;
  color: #777;
  margin-top: 4px;
  letter-spacing: 1.3px;
}
.switcher {
  display: flex;
  gap: 5px;
}
.switcher button {
  font-size: 10px;
  color: #777;
  border-radius: 5px;
  padding: 10px 14px;
  white-space: nowrap;
}
.switcher button span {
  margin-left: 6px;
  color: #333;
}
.switcher button[aria-selected="true"] {
  background: #272923;
  color: #d0d2bd;
}
.switcher button[aria-selected="true"] span {
  color: #fff;
}
.studio-scope {
  font-size: 8px;
  letter-spacing: 1.1px;
  color: #888;
}
.concept {
  min-height: calc(100svh - 140px);
  overflow: hidden;
  animation: enter 0.6s both;
}
.site-header {
  height: 100px;
  margin: 0 4.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid;
  gap: 25px;
}
.logo {
  white-space: nowrap;
}
.site-header nav {
  display: flex;
  gap: 30px;
}
.site-header nav button {
  font-size: 11px;
  padding: 10px 0;
}
.site-header nav button:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.eyebrow {
  font-size: 9px;
  letter-spacing: 1.8px;
  font-weight: 500;
}
.study-notes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  background: #fff;
  border-top: 1px solid #ddd;
  gap: 20px;
  min-height: 75px;
}
.study-notes > div {
  display: flex;
  align-items: center;
  gap: 30px;
}
.study-notes > div > span {
  font-size: 9px;
  letter-spacing: 1px;
  white-space: nowrap;
  font-weight: 600;
}
.study-notes p {
  font-size: 11px;
  line-height: 1.5;
  color: #777;
}
.study-notes button {
  font-size: 11px;
  white-space: nowrap;
}
.study-notes button span {
  margin-left: 18px;
}
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #333;
  box-shadow: 0 8px 40px #0003;
  border: 1px solid #ddd;
  z-index: 9;
  padding: 18px 24px;
  border-radius: 5px;
  font-size: 12px;
  width: max-content;
  max-width: 90%;
  line-height: 1.6;
}
/* 01: editorial — expressive type and a photographic composition */
.editorial {
  background: #eeeae2;
  color: #282920;
}
.editorial .site-header {
  border-color: #c5c1b8;
  height: 94px;
}
.editorial-logo {
  font-family: "Instrument Serif", serif;
  font-size: 31px;
  letter-spacing: -1px;
  line-height: 0.85;
}
.editorial-logo span {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 7px;
  letter-spacing: 3px;
  margin: 12px 0 0 3px;
}
.editorial-contact {
  font-size: 12px;
  border-bottom: 1px solid;
  padding: 9px 0;
  min-width: 102px;
  display: flex;
  justify-content: space-between;
}
.editorial-hero {
  padding: 30px 4.5% 24px;
}
.editorial-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.editorial-index {
  font-size: 9px;
  color: #74766a;
}
.editorial h1 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: clamp(74px, 8.5vw, 142px);
  line-height: 0.91;
  letter-spacing: -0.045em;
  margin: 29px 0 24px;
  position: relative;
  z-index: 2;
}
.editorial h1 em {
  font-weight: 400;
  color: #787b62;
}
.editorial-bottom {
  display: grid;
  grid-template-columns: 32% 68%;
  align-items: end;
  margin-top: -40px;
}
.editorial-copy {
  padding: 95px 52px 7px 0;
}
.small-line {
  display: block;
  width: 32px;
  border-top: 1px solid #686a5b;
  margin-bottom: 22px;
}
.editorial-copy > p {
  font-size: 15px;
  line-height: 1.6;
}
.editorial-copy > p.muted {
  font-size: 12px;
  line-height: 1.9;
  color: #6b6d62;
  margin: 14px 0 24px;
  max-width: 275px;
}
.editorial-cta {
  background: #30362e;
  color: #fff;
  width: 100%;
  max-width: 245px;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.text-link {
  font-size: 9px;
  padding: 20px 0 0;
  color: #6c6d61;
}
.editorial-art {
  position: relative;
  height: 340px;
  overflow: hidden;
}
.editorial-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slowZoom 24s ease-in-out infinite alternate;
}
.editorial-art:after {
  content: "";
  position: absolute;
  inset: 60% 0 0;
  background: linear-gradient(transparent, #0009);
}
.editorial-art figcaption {
  position: absolute;
  bottom: 21px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  z-index: 1;
  font-size: 9px;
}
.editorial-art figcaption span:first-child {
  letter-spacing: 1.4px;
  font-size: 7px;
}
.editorial-footer {
  margin: 0 4.5%;
  border-top: 1px solid #c5c1b8;
  padding: 22px 0;
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 8px;
  letter-spacing: 1.4px;
}
.editorial-footer i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #898a7f;
}
.footer-right {
  margin-left: auto;
  letter-spacing: 0;
  font-size: 10px;
  color: #737469;
}
/* 02: signal — midnight blue and animated orbital connections */
.signal {
  background: #0d1725;
  color: #e9ecf1;
}
.signal .site-header {
  border-color: #ffffff21;
}
.signal-logo {
  display: flex;
  align-items: center;
  font-family: "Manrope", sans-serif;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -1px;
}
.signal-mark {
  font-size: 28px;
  font-weight: 400;
  border: 1px solid #afbed1;
  width: 36px;
  height: 36px;
  margin-right: 12px;
  line-height: 29px;
  text-align: center;
}
.logo-dot {
  color: #c6b587;
}
.signal nav {
  color: #aeb8c8;
}
.signal-contact {
  font-size: 10px;
  border: 1px solid #687182;
  border-radius: 30px;
  padding: 13px 19px;
}
.signal-contact span {
  margin-left: 23px;
}
.signal-hero {
  display: grid;
  grid-template-columns: 49% 51%;
  padding: 35px 4.5% 35px;
  align-items: center;
  min-height: 530px;
  position: relative;
}
.signal-copy {
  position: relative;
  z-index: 2;
}
.signal-eyebrow {
  color: #9aa9c3;
  letter-spacing: 1.4px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 8px;
}
.signal-eyebrow > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d8c28f;
  box-shadow: 0 0 15px #d8c28f;
}
.signal h1 {
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: clamp(60px, 6vw, 110px);
  line-height: 1.04;
  letter-spacing: -0.065em;
  margin: 30px 0 26px;
}
.signal h1 em {
  font-family: "Instrument Serif", serif;
  letter-spacing: -0.025em;
  font-size: 1.14em;
  color: #c4cfff;
}
.signal-copy > p {
  max-width: 325px;
  font-size: 12px;
  line-height: 1.9;
  color: #9daabd;
}
.signal-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 30px;
}
.signal-cta {
  background: #d5ddf2;
  color: #172137;
  padding: 17px 20px;
  font-size: 11px;
  display: flex;
  gap: 32px;
  border-radius: 3px;
}
.signal-secondary {
  font-size: 10px;
  color: #b0bbce;
}
.signal-visual {
  position: relative;
  aspect-ratio: 1;
  max-height: 490px;
  margin: -20px -30px -20px -15px;
}
.signal-visual svg {
  width: 100%;
  height: 100%;
  position: relative;
}
.signal-grid {
  position: absolute;
  inset: 5%;
  background-image:
    linear-gradient(#9dadc009 1px, transparent 1px),
    linear-gradient(90deg, #9dadc009 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse, #000, transparent 70%);
}
.orbits ellipse {
  fill: none;
  stroke: url(#orbitColor);
  stroke-width: 0.8;
  opacity: 0.35;
}
.orbits ellipse.orbit-trace {
  stroke-width: 2;
  stroke-dasharray: 160 1100;
  opacity: 1;
  animation: trace 15s linear infinite;
}
.orbits ellipse.trace-two {
  animation-duration: 20s;
  animation-direction: reverse;
  stroke-dasharray: 90 1170;
}
.orbit-satellite {
  transform-origin: 320px 320px;
  animation: spin 28s linear infinite;
}
.satellite-two {
  animation-duration: 37s;
  animation-direction: reverse;
}
.signal-label {
  position: absolute;
  font-size: 7px;
  letter-spacing: 1.6px;
  color: #b2bed2;
  border: 1px solid #68799066;
  background: #111f30b5;
  padding: 13px 17px;
  border-radius: 3px;
  animation: float 8s ease-in-out infinite alternate;
}
.signal-label b {
  font-size: 15px;
  color: #d4c393;
  margin-left: 20px;
  font-weight: 400;
}
.label-one {
  top: 19%;
  left: 13%;
}
.label-two {
  bottom: 20%;
  right: 1%;
  animation-delay: -4s;
}
.alignment {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  letter-spacing: 2px;
  color: #8395ad;
  white-space: nowrap;
}
.alignment span {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #c6b587;
  border-radius: 50%;
  margin-right: 8px;
}
.signal-footer {
  border-top: 1px solid #ffffff21;
  margin: 0 4.5%;
  padding: 23px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.signal-footer > span:first-child {
  font-size: 7px;
  letter-spacing: 1.4px;
  color: #8293ad;
}
.signal-footer > div {
  font-size: 11px;
  color: #a8b5cb;
  display: flex;
  gap: 25px;
}
.signal-footer i {
  color: #66758f;
  font-style: normal;
}
.signal-number {
  font-family: "Instrument Serif", serif;
  font-size: 21px;
  color: #c7cbd3;
}
/* 03: good company — bright, type-led, human */
.bold {
  background: #e6ebaa;
  color: #26371e;
}
.bold .site-header {
  height: 95px;
  border-color: #26371e44;
}
.bold-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -1.3px;
}
.bold-logo svg {
  width: 31px;
  height: 31px;
}
.bold-contact {
  background: #26371e;
  color: #e6ebaa;
  padding: 14px 18px;
  font-size: 10px;
  display: flex;
  gap: 28px;
}
.bold-hero {
  padding: 34px 4.5% 50px;
}
.bold-kicker {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 1.2px;
  line-height: 1.7;
}
.bold-kicker span:last-child {
  text-align: right;
}
.bold-headline {
  position: relative;
}
.bold h1 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(70px, 9.7vw, 160px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.075em;
  margin: 34px 0 36px;
  position: relative;
  z-index: 1;
}
.bold h1 em {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  letter-spacing: -0.035em;
}
.bold-flower {
  position: absolute;
  right: 0;
  top: -3%;
  width: 23%;
  color: #526b38;
  animation: spin 70s linear infinite;
}
.bold-flower svg {
  width: 100%;
  height: auto;
}
.bold-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7%;
  border-top: 1px solid #26371e44;
  padding-top: 27px;
  align-items: start;
}
.bold-intro {
  display: flex;
  gap: 25px;
  align-items: start;
}
.bold-arrow {
  font-size: 50px;
  line-height: 1;
  font-weight: 400;
}
.bold-intro p {
  font-size: 18px;
  line-height: 1.5;
  max-width: 260px;
  letter-spacing: -0.4px;
}
.bold-roles .eyebrow {
  font-size: 8px;
  letter-spacing: 1px;
}
.role-pills {
  display: flex;
  gap: 7px;
  margin: 15px 0;
}
.role-pills button {
  border: 1px solid #26371e66;
  border-radius: 24px;
  padding: 10px 13px;
  font-size: 10px;
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s;
}
.role-pills button[aria-pressed="true"] {
  background: #26371e;
  color: #e6ebaa;
  border-color: #26371e;
}
.bold-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 13px;
  border-bottom: 1px solid #26371e;
  padding: 13px 0;
}
.bold-cta > span:last-child {
  font-size: 25px;
}
.bold-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 4.5%;
  background: #26371e;
  color: #e6ebaa;
  font-size: 7px;
  letter-spacing: 1.3px;
}
/* 00: the original direction, retained as a reference */
.original {
  background: #f7f4ef;
  color: #25251f;
}
.original .site-header {
  border-color: #d7d2c9;
}
.original-logo {
  font-size: 23px;
  letter-spacing: -1px;
  font-weight: 500;
}
.original-logo > span {
  color: #683f45;
  font-size: 38px;
  margin-right: 6px;
}
.original-contact {
  border: 1px solid #d2cbc4;
  padding: 14px 20px;
  font-size: 10px;
}
.original-contact span {
  margin-left: 30px;
}
.original-hero {
  display: grid;
  grid-template-columns: 52% 48%;
  padding: 44px 4.5% 40px;
  gap: 20px;
}
.original h1 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: clamp(65px, 7.6vw, 120px);
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 28px 0;
}
.original h1 em {
  color: #623744;
}
.original-copy > p {
  max-width: 350px;
  font-size: 12px;
  line-height: 1.9;
  color: #7d7974;
}
.original-copy .eyebrow {
  font-size: 7px;
  color: #8e8277;
}
.original-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}
.original-actions button {
  font-size: 10px;
}
.original-actions button:first-child {
  background: #572d3b;
  color: #fff;
  padding: 18px 23px;
  display: flex;
  gap: 28px;
}
.original-copy small {
  display: block;
  font-size: 8px;
  line-height: 1.8;
  color: #aaa195;
  margin: 26px 0 0 45px;
  position: relative;
}
.original-copy small:before {
  content: "";
  position: absolute;
  left: -45px;
  top: 10px;
  width: 30px;
  height: 1px;
  background: #aaa195;
}
.original-art {
  position: relative;
  overflow: hidden;
  height: 560px;
  margin-right: 20px;
}
.original-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slowZoom 24s ease-in-out infinite alternate;
}
.original-art figcaption {
  position: absolute;
  bottom: 25px;
  left: 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.original-art figcaption span {
  font-size: 7px;
  letter-spacing: 2px;
}
.original-art figcaption b {
  font:
    34px "Instrument Serif",
    serif;
  font-weight: 400;
}
@keyframes trace {
  to {
    stroke-dashoffset: -1260;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes slowZoom {
  to {
    transform: scale(1.065);
  }
}
@keyframes float {
  to {
    transform: translateY(12px);
  }
}
@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1500px) {
  .concept {
    padding-left: calc((100vw - 1500px) / 2);
    padding-right: calc((100vw - 1500px) / 2);
  }
  .editorial h1 {
    font-size: 130px;
  }
  .bold h1 {
    font-size: 145px;
  }
  .signal h1 {
    font-size: 100px;
  }
  .original h1 {
    font-size: 110px;
  }
}
@media (max-width: 1000px) {
  .studio-scope {
    display: none;
  }
  .site-header nav {
    gap: 15px;
  }
  .editorial-bottom {
    grid-template-columns: 38% 62%;
    margin-top: -32px;
  }
  .editorial-copy {
    padding-right: 30px;
    padding-top: 60px;
  }
  .editorial-art {
    height: 330px;
  }
  .signal-hero {
    grid-template-columns: 52% 48%;
    padding-top: 42px;
    min-height: 530px;
  }
  .signal-visual {
    margin: 0 -30px 0 -20px;
  }
  .signal-actions {
    gap: 12px;
    flex-wrap: wrap;
  }
  .signal-label {
    font-size: 6px;
    padding: 10px;
  }
  .signal-footer > div {
    gap: 12px;
  }
  .bold h1 {
    font-size: 10vw;
  }
  .bold-intro p {
    font-size: 16px;
  }
  .role-pills {
    flex-wrap: wrap;
  }
  .original-art {
    height: 520px;
  }
  .original-actions {
    gap: 12px;
  }
  .original-actions button:first-child {
    padding: 15px;
    gap: 13px;
  }
}
@media (max-width: 700px) {
  .studio {
    display: block;
    padding: 14px 14px 9px;
  }
  .studio-brand {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
  }
  .studio-brand span {
    margin: 0;
    font-size: 8px;
  }
  .switcher {
    margin-top: 12px;
    justify-content: space-between;
    gap: 2px;
  }
  .switcher button {
    padding: 9px 8px;
    font-size: 9px;
  }
  .switcher button span {
    margin-left: 3px;
  }
  .site-header,
  .editorial .site-header,
  .bold .site-header {
    height: 85px;
    margin: 0 6%;
    gap: 15px;
  }
  .site-header nav {
    display: none;
  }
  .editorial-logo {
    font-size: 28px;
  }
  .editorial-logo span {
    font-size: 6px;
  }
  .editorial-contact {
    font-size: 11px;
    min-width: 90px;
  }
  .editorial-hero {
    padding: 24px 6%;
  }
  .editorial-top .eyebrow {
    font-size: 7px;
    letter-spacing: 1.3px;
  }
  .editorial-index {
    display: none;
  }
  .editorial h1 {
    font-size: 18vw;
    line-height: 1;
    margin: 25px 0 25px;
  }
  .editorial-bottom {
    display: flex;
    flex-direction: column-reverse;
    margin: 0;
    align-items: stretch;
  }
  .editorial-art {
    height: 240px;
  }
  .editorial-copy {
    padding: 26px 0 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  .small-line {
    display: none;
  }
  .editorial-copy > p {
    font-size: 14px;
  }
  .editorial-copy > p.muted {
    margin: 0;
    font-size: 10px;
    line-height: 1.8;
  }
  .editorial-cta {
    margin-top: 5px;
    font-size: 10px;
    padding: 15px;
  }
  .text-link {
    padding: 0;
    font-size: 9px;
    text-align: left;
  }
  .editorial-art figcaption {
    left: 15px;
    right: 15px;
    bottom: 16px;
    font-size: 8px;
    gap: 12px;
  }
  .editorial-art figcaption span:first-child {
    font-size: 6px;
  }
  .editorial-footer {
    margin: 0 6%;
    padding: 18px 0;
    gap: 12px;
    font-size: 6px;
    letter-spacing: 1px;
  }
  .footer-right {
    display: none;
  }
  .study-notes {
    padding: 17px 18px;
    align-items: flex-start;
  }
  .study-notes > div {
    display: block;
  }
  .study-notes p {
    margin-top: 7px;
    font-size: 10px;
    max-width: 260px;
  }
  .study-notes button {
    font-size: 10px;
    margin-top: -4px;
  }
  .study-notes button span {
    margin-left: 7px;
  }
  .signal-logo {
    font-size: 21px;
  }
  .signal-mark {
    width: 29px;
    height: 29px;
    font-size: 23px;
    line-height: 24px;
    margin-right: 9px;
  }
  .signal-contact {
    font-size: 9px;
    padding: 11px 13px;
  }
  .signal-contact span {
    margin-left: 8px;
  }
  .signal-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 35px 6% 15px;
    min-height: 0;
  }
  .signal h1 {
    font-size: 18vw;
    margin: 27px 0 23px;
  }
  .signal-copy > p {
    font-size: 12px;
    max-width: 310px;
  }
  .signal-eyebrow {
    font-size: 6px;
    letter-spacing: 1.2px;
  }
  .signal-actions {
    margin-top: 24px;
    gap: 20px;
  }
  .signal-cta {
    padding: 15px 17px;
    gap: 27px;
    font-size: 10px;
  }
  .signal-secondary {
    font-size: 9px;
  }
  .signal-visual {
    margin: -8px 3% 0;
    aspect-ratio: 1;
    max-height: 350px;
  }
  .signal-label {
    font-size: 6px;
  }
  .label-two {
    right: -3%;
  }
  .signal-footer {
    margin: 0 6%;
    padding: 18px 0;
    display: block;
  }
  .signal-footer > div {
    margin-top: 12px;
    font-size: 10px;
    justify-content: space-between;
    gap: 6px;
  }
  .signal-number {
    display: none;
  }
  .bold-logo {
    font-size: 20px;
    gap: 7px;
  }
  .bold-logo svg {
    width: 25px;
  }
  .bold-contact {
    font-size: 8px;
    padding: 12px;
    gap: 10px;
  }
  .bold-hero {
    padding: 25px 6% 30px;
  }
  .bold-kicker {
    font-size: 6px;
    letter-spacing: 0.7px;
  }
  .bold h1 {
    font-size: 15.8vw;
    line-height: 1.05;
    margin: 40px 0 35px;
    letter-spacing: -0.075em;
  }
  .bold-flower {
    position: relative;
    width: 33%;
    margin: 0 0 26px auto;
  }
  .bold-headline {
    display: flex;
    flex-direction: column;
  }
  .bold-bottom {
    display: block;
    padding-top: 22px;
  }
  .bold-intro {
    gap: 20px;
    align-items: center;
  }
  .bold-arrow {
    font-size: 38px;
  }
  .bold-intro p {
    font-size: 17px;
    max-width: 250px;
  }
  .bold-roles {
    margin-top: 30px;
  }
  .role-pills {
    gap: 6px;
  }
  .role-pills button {
    font-size: 10px;
    padding: 10px 13px;
  }
  .bold-cta {
    font-size: 12px;
  }
  .bold-footer {
    padding: 20px 6%;
    font-size: 6px;
    line-height: 1.6;
    gap: 18px;
  }
  .bold-footer span:last-child {
    display: none;
  }
  .original-logo {
    font-size: 21px;
  }
  .original-contact {
    padding: 13px;
    font-size: 10px;
  }
  .original-contact span {
    margin-left: 16px;
  }
  .original-hero {
    display: flex;
    flex-direction: column;
    padding: 33px 6%;
    gap: 35px;
  }
  .original h1 {
    font-size: 19vw;
    margin: 30px 0;
  }
  .original-copy > p {
    font-size: 12px;
    max-width: 100%;
  }
  .original-art {
    height: 420px;
    margin: 0;
  }
  .original-actions button {
    font-size: 10px;
  }
  .original-actions button:first-child {
    padding: 17px 20px;
    gap: 30px;
  }
  .original-copy small {
    margin-top: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}