/* Carry the approved landing's type, palette and thread language through the page. */
:root { --muted: #85899e; }
.suite-header nav a { position: relative; }
.hero-link .round-arrow { box-shadow: inset 0 0 0 0 var(--lime); }
main > .intro, main > .work, main > .practice { background: var(--night); color: var(--paper); }
.intro { position: relative; isolation: isolate; overflow: hidden; padding-block: 130px 110px; border-top: 1px solid #ffffff0d; }
.intro-top, .intro h2, .intro-bottom, .studio-disciplines { position: relative; z-index: 1; }
.intro-top { color: #b8bbcc; }
.intro h2 { font-weight: 650; }
.intro h2 .muted { color: var(--lime); }
.intro-bottom p { color: #bfc1ce; font-size: 16px; }
.studio-stream { position: absolute; width: 74%; height: 95%; right: -20%; top: -7%; object-fit: contain; opacity: .48; pointer-events: none; }
.studio-disciplines { display: flex; align-items: center; gap: 26px; margin-top: 65px; font-size: 10px; letter-spacing: .15em; color: #aeb2c4; }
.studio-disciplines i { display: block; width: 50px; height: 1px; background: #60667e; }
.work { padding-top: 35px; padding-bottom: 120px; }
.work-heading { align-items: end; border-color: #41445a; margin-bottom: 60px; padding-top: 40px; }
.work-heading h2 { font-size: clamp(36px, 4.4vw, 70px); font-weight: 650; letter-spacing: -.065em; line-height: 1; }
.work-heading h2 > span { color: var(--lime); font-size: 11px; margin-top: 6px; }
.work-heading p { color: #acb0c2; font-size: 9px; line-height: 1.7; max-width: 220px; padding-bottom: 3px; }
.project-surface { border: 1px solid #ffffff16; }
.culture-scene { background: #202137; }
.culture-title em { color: var(--lime); }
.scene-top { color: #c1c5d8; font-size: 10px; }
.project-caption { padding-block: 30px; }
.project-caption h3 { font-size: clamp(25px, 2.7vw, 40px); font-weight: 600; letter-spacing: -.055em; }
.project-index { color: var(--lime); }
.project-caption p { color: #acb0c2; font-size: 12px; }
.concept { margin-bottom: 100px; }
.concept-notes { border-color: #41445a; }
.concept-notes summary { min-height: 54px; font-size: 12px; color: #c0c4d6; }
.concept-notes summary > span { color: var(--lime); }
.concept-notes h4 { font-weight: 600; color: var(--paper); }
.concept-notes p { color: #b5bacd; font-size: 14px; }
.concept-notes > div > span { color: var(--lime); }
.objects-scene { background: #252d2c; color: #eeede6; }
.objects-scene .scene-top { color: #bdc9bf; }
.object-copy strong { font-weight: 650; }
.object-copy em { font-family: Syne, Arial, sans-serif; font-weight: 600; font-style: normal; font-size: clamp(42px, 4.8vw, 74px); color: var(--lime); }
.object-caption { color: #e2e3d4; }
.object-caption span { color: #a8b7a8; }
.objects-scene .surface-action { background: #252d2c; }
.vase-art { filter: brightness(1.12); }
.tools-scene { background: #22283e; color: var(--paper); }
.tools-heading { font-weight: 650; }
.tools-heading em { color: var(--lime); }
.planner { background: #292c3d; color: #edf0e5; box-shadow: 0 25px 60px #00000040; border: 1px solid #696f8a; }
.planner-sidebar { background: #212535; border-color: #40465c; }
.planner-item { color: #a6adc4; }
.planner-item.active { color: var(--lime); background: #373d42; }
.planner-bottom { color: #9fa9bc; }
.planner-days { color: #a1aac1; }
.planner-grid { background: repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),#454b60 calc(20% - 1px),#454b60 20%),repeating-linear-gradient(0deg,transparent 0,transparent calc(25% - 1px),#454b60 calc(25% - 1px),#454b60 25%); }
.block-one { background: #d5e7a3; color: #263229; }
.block-two { background: #54556f; }
.block-three { background: #705f4a; }
.block-four { background: #3c6261; }
.practice { padding-top: 60px; padding-bottom: 120px; align-items: start; }
.practice-heading > .overline { color: #b3b8cc; }
.practice h2 { font-weight: 650; }
.practice h2 .muted { color: var(--lime); }
.practice-art { margin-top: 28px; overflow: hidden; }
.practice-art img { display: block; width: 100%; height: 235px; object-fit: contain; opacity: .8; }
.practice-art span { display: block; font-size: 8px; letter-spacing: .1em; color: #9ca5bf; margin-top: 16px; }
.practice-list, .practice-list > details { border-color: #43485d; }
.practice-list > details { padding-block: 23px; }
.practice-list h3 { font-weight: 600; }
.practice-list summary > span { color: #a6acc4; }
.practice-list summary > b { color: var(--lime); }
.practice-list details[open] h3 { color: var(--lime); }
.practice-list p { color: #b7bdd0; font-size: 14px; }
footer { position: relative; isolation: isolate; border-top: 1px solid #3b4054; padding-top: 100px; }
.contact-top, .contact-title, .footer-bottom, .study-disclosure { position: relative; z-index: 1; }
.contact-weave { position: absolute; right: -15%; top: -5%; width: 60%; height: 100%; object-fit: contain; opacity: .4; pointer-events: none; }
.contact-title { margin-block: 75px 110px; }
.footer-bottom { border-color: #41485d; }
.js-motion .studio-stream { animation: studio-thread 18s ease-in-out infinite alternate; }
.js-motion .practice-art img { animation: practice-thread 20s ease-in-out infinite alternate; }
.js-motion .contact-weave { animation: contact-thread 24s ease-in-out infinite alternate; }
@keyframes studio-thread { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(2deg) translateY(15px); } }
@keyframes practice-thread { from { transform: scale(.95) rotate(-6deg); } to { transform: scale(1.03) rotate(3deg); } }
@keyframes contact-thread { from { transform: rotate(-15deg); } to { transform: rotate(-4deg); } }
@media (min-width: 701px) {
  .suite-header nav a:last-child > span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #777d91; border-radius: 50%; font-size: 11px; transition: background .3s,color .3s; }
  .suite-header nav a:last-child:hover > span { background: var(--lime); color: var(--night); border-color: var(--lime); }
}
@media (max-width: 1000px) {
  .intro { padding-block: 90px; }
  .intro-bottom p { font-size: 14px; }
  .work-heading { display: block; }
  .work-heading p { margin-top: 20px; max-width: none; }
  .project-caption { display: block; }
  .project-caption p { padding-left: 38px; margin-top: 12px; }
  .object-copy em { font-size: 5.1vw; }
  .practice-list p { font-size: 13px; }
}
@media (max-width: 700px) {
  .intro { padding-block: 65px 60px; }
  .intro h2 { font-size: clamp(29px,7.7vw,49px); }
  .intro-bottom p { font-size: 12px; }
  .studio-stream { width: 125%; height: 75%; top: -3%; right: -65%; opacity: .3; }
  .studio-disciplines { gap: 14px; margin-top: 35px; font-size: 7px; letter-spacing: .07em; }
  .studio-disciplines i { width: 22px; }
  .work { padding-bottom: 55px; }
  .work-heading { padding-top: 26px; margin-bottom: 30px; }
  .work-heading h2 { font-size: 36px; }
  .work-heading p { font-size: 7px; margin-top: 15px; }
  .scene-top { font-size: 7px; }
  .project-caption { padding-block: 20px 16px; }
  .project-caption h3 { font-size: 23px; }
  .project-caption p { font-size: 10px; padding-left: 28px; margin-top: 10px; }
  .concept { margin-bottom: 55px; }
  .concept-notes summary { font-size: 11px; }
  .concept-notes p { font-size: 12px; }
  .object-copy em { font-size: 8.6vw; }
  .practice { padding-top: 30px; padding-bottom: 65px; }
  .practice-art { margin-top: 18px; }
  .practice-art img { height: 160px; }
  .practice-art span { font-size: 6px; margin-top: 8px; }
  .practice-list { margin-top: 38px; }
  .practice-list > details { padding-block: 16px; }
  .practice-list p { font-size: 12px; }
  footer { padding-top: 55px; }
  .contact-title { margin-block: 45px 65px; }
  .contact-weave { right: -55%; width: 105%; height: 75%; top: -10%; opacity: .24; }
}
@media (max-width: 360px) { .intro h2 { font-size: 27px; } .work-heading h2 { font-size: 31px; } .project-caption h3 { font-size: 20px; } }

@media (min-width: 1000px) {
  .contact-title { width: 100%; padding-right: 0; }
  .contact-title .contact-address {
    position: absolute;
    right: 4vw;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column-reverse;
    gap: 18px;
    margin-top: 0;
  }
  .contact-title .contact-address i {
    font-size: clamp(100px, 9vw, 160px);
    line-height: 1;
  }
  .contact-address:hover i { transform: translate(8px,-8px); }
}