:root {
  --info-ink: #000000;
  --info-muted: #000000;
}

html body.info-open .info-intro p,
html body .info-panel.is-open .info-intro p {
  margin: 0 0 18px !important;
}

html body.info-open .info-intro p:last-child,
html body .info-panel.is-open .info-intro p:last-child {
  margin-bottom: 0 !important;
}

.info-details {
  position: relative;
  display: grid;
  grid-template-columns:
  minmax(0, 1.25fr)
  minmax(0, 0.8fr)
  minmax(0, 1fr);
  column-gap: clamp(22px, 2.5vw, 44px);
  width: 100%;
  margin-top: 46px;
  padding-top: 0;
  border: 0;
  border-top: 0;
  color: #000000;
  font-family: "JoustFont", Arial, Helvetica, sans-serif;
}

.info-detail {
  position: relative;
  min-width: 0;
  color: #000000;
}

.info-detail-label {
  display: block;
  margin: 0 0 7px;
  color: #000000;
  font-family: inherit;
  font-size: clamp(11px, 0.68vw, 13px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.035em;
}

.info-detail-value {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000000;
  font-family: inherit;
  font-size: clamp(16px, 1.05vw, 19px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
}

a.info-detail-value,
a.info-detail-value:visited,
a.info-detail-value:hover,
a.info-detail-value:active {
  color: #000000;
}

a.info-detail-value::after,
.selected-clients-trigger > span:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: #000000;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}

a.info-detail-value:hover::after,
a.info-detail-value:focus-visible::after,
.selected-clients:hover .selected-clients-trigger > span:first-child::after,
.selected-clients:focus-within .selected-clients-trigger > span:first-child::after {
  transform: scaleX(1);
}

a.info-detail-value:focus-visible,
.selected-clients-trigger:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 6px;
}

.selected-clients {
  position: relative;
  color: #000000;
}

.selected-clients-trigger {
  appearance: none;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  color: #000000;
}

.selected-clients-trigger span {
  color: #000000;
}

.selected-clients-symbol {
  display: inline-block;
  color: #000000;
  font-size: 1.02em;
  font-weight: 400;
  line-height: 1;
  transform-origin: center;
  transition: transform 220ms ease;
}

.selected-clients:hover .selected-clients-symbol,
.selected-clients:focus-within .selected-clients-symbol {
  transform: rotate(45deg);
}

.selected-clients-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 19px);
  z-index: 20;

  display: grid;
  grid-template-columns:
  repeat(2, minmax(210px, 1fr));
  column-gap: 38px;
  row-gap: 6px;

  width: min(650px, 43vw);
  padding: 0 0 22px;

  background: rgba(241, 240, 236, 0.97);
  color: #000000;

  font-family: "JoustFont", Arial, Helvetica, sans-serif;
  font-size: clamp(17px, 1.02vw, 21px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-align: left;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);

  transition:
  opacity 180ms ease,
  transform 220ms ease,
  visibility 0s linear 220ms;
}

.selected-clients-panel span {
  display: block;
  color: #000000;
  white-space: nowrap;
}

.selected-clients:hover .selected-clients-panel,
.selected-clients:focus-within .selected-clients-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

@media (max-width: 700px) {
  .info-details {
    grid-template-columns: 1fr;
    row-gap: 25px;
    width: min(100%, 520px);
    margin: 42px auto 0;
    padding-top: 0;
    border: 0;
    border-top: 0;
    color: #000000;
    text-align: center;
  }

  .info-detail-label {
    margin-bottom: 8px;
    color: #000000;
    font-size: 12px;
  }

  .info-detail-value {
    justify-content: center;
    color: #000000;
    font-size: 20px;
    white-space: normal;
  }

  .selected-clients-trigger {
    margin: 0 auto;
    color: #000000;
    text-align: center;
  }

  .selected-clients-panel {
    position: static;
    grid-template-columns: 1fr;
    gap: 7px;
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    color: #000000;
    font-size: 19px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: none;

    transition:
    max-height 340ms ease,
    opacity 180ms ease,
    margin 220ms ease,
    visibility 0s linear 340ms;

  }

  .selected-clients:focus-within
  .selected-clients-panel,
  .selected-clients:hover
  .selected-clients-panel {
    max-height: 560px;
    margin-top: 22px;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .selected-clients-panel span {
    color: #000000;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.info-detail-value::after,
  .selected-clients-trigger
  > span:first-child::after,
  .selected-clients-symbol,
  .selected-clients-panel {
    transition: none !important;
  }
}

.info-footer {
  display: none;

  align-items: center;
  gap: 18px;

  color: #000000;
  font-family: "JoustFont", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;

  pointer-events: none;
}

.info-panel.is-open > .info-footer {
  display: flex;
}

@media (min-width: 701px) {
  .info-panel.is-open > .info-footer {
    position: fixed;
    left: 28px;
    bottom: 24px;
    z-index: 5000;
  }
}

@media (max-width: 700px) {
  .info-panel > .info-footer {
    display: none;

    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;

    margin:
    110px
    0
    calc(env(safe-area-inset-bottom) + 22px)
    18px;

    padding: 0;

    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 9px;

    color: #000000;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
  }

  .info-panel.is-open > .info-footer {
    display: flex;
  }

  .info-panel > .info-footer span {
    margin: 0;
    color: #000000;
    white-space: nowrap;
  }

  body.info-open .info-details,
  .info-panel.is-open .info-details {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 700px) {

  .info-panel.is-open > .info-content,
  body.info-open .info-panel > .info-content {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .info-panel.is-open > .info-footer {
    position: static !important;

    margin:
    1px
    0
    calc(env(safe-area-inset-bottom) + 24px)
    18px !important;

    padding: 0 !important;
  }
}

.info-services {
width: 100%;
max-width: 760px;
margin: 0 0 clamp(38px, 4vw, 64px);
color: #332c2b;
font-family: "JoustFont", Arial, Helvetica, sans-serif;
text-align: left;
}

.info-services-label {
display: block;
margin: 0 0 12px;

font-size: 10px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.11em;
text-transform: uppercase;

opacity: 0.58;
}

.info-services-list {
max-width: 720px;
margin: 0;

font-size: clamp(19px, 1.35vw, 27px);
font-weight: 400;
line-height: 1.18;
letter-spacing: -0.035em;
}

@media (max-width: 700px) {
.info-services {
width: 100%;
margin: 0 0 38px;
padding: 0 18px;
box-sizing: border-box;
text-align: center;
}

.info-services-label {
margin-bottom: 11px;
font-size: 9px;
}

.info-services-list {
max-width: 340px;
margin: 0 auto;

```
font-size: clamp(18px, 5.2vw, 23px);
line-height: 1.22;
```

}
}

body.info-open .info-panel,
body.info-open .info-panel p,
body.info-open .info-panel a,
body.info-open .info-panel span,
body.info-open .info-panel button,
body.info-open .info-intro,
body.info-open .info-services,
body.info-open .info-services-label,
body.info-open .info-services-list,
body.info-open .info-detail-label,
body.info-open .info-detail-value,
body.info-open .selected-clients-trigger,
body.info-open .selected-clients-panel,
body.info-open .selected-clients-panel span,
body.info-open .info-footer,
body.info-open .info-footer span {
color: #000000 !important;
font-family:
"JoustFont",
Arial,
Helvetica,
sans-serif !important;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body.info-open .info-services-label,
body.info-open .info-detail-label,
body.info-open .selected-clients-symbol,
body.info-open .info-footer span {
opacity: 1 !important;
}

body.info-open .info-panel a,
body.info-open .info-panel a:visited,
body.info-open .info-panel a:hover,
body.info-open .info-panel a:focus-visible {
color: #000000 !important;
text-decoration-color: #000000 !important;
}

body.info-open .selected-clients-trigger {
color: #000000 !important;
}

body.info-open .selected-clients-trigger span:first-child::after {
background: #000000 !important;
}

body.info-open .logo-letter,
body.info-open .logo-studio-letter,
body.info-open .logo-svg text {
color: #000000 !important;
fill: #000000 !important;
}

body.info-open .info-button {
color: #000000 !important;
fill: #000000 !important;
}

body.info-open .info-detail-label,
body.info-open .selected-clients-trigger {
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}

body.info-open .info-services-label {
font-size: clamp(13px, 0.85vw, 16px) !important;
line-height: 1 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
opacity: 1 !important;
}

body.info-open .info-services-list {
margin-top: 14px !important;
}


/* =========================================================
JOUST — FINAL INFO PAGE
========================================================= */

:root {
--info-background: #f3f1ed;
--info-colour: #000000;
--info-width: min(90vw, 1380px);
}

body.info-open .info-panel,
body .info-panel.is-open {
position: fixed !important;
inset: 0 !important;
z-index: 2000 !important;

display: block !important;

overflow-x: hidden !important;
overflow-y: auto !important;

background: var(--info-background) !important;
color: var(--info-colour) !important;
}

body.info-open .info-panel,
body.info-open .info-panel p,
body.info-open .info-panel a,
body.info-open .info-panel span,
body.info-open .info-panel button,
body .info-panel.is-open,
body .info-panel.is-open p,
body .info-panel.is-open a,
body .info-panel.is-open span,
body .info-panel.is-open button {
color: var(--info-colour) !important;

font-family:
"JoustBioFont",
"JoustFont",
Arial,
Helvetica,
sans-serif !important;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body.info-open .info-content,
body .info-panel.is-open .info-content {
width: var(--info-width) !important;
min-height: 100svh !important;

margin: 0 auto !important;

padding:
clamp(100px, 13vh, 150px)
0
clamp(140px, 17vh, 200px) !important;

box-sizing: border-box !important;

display: grid !important;

grid-template-columns:
minmax(340px, 0.8fr)
minmax(500px, 1fr) !important;

column-gap: clamp(70px, 8vw, 150px) !important;
align-items: start !important;
}

body.info-open .info-text,
body .info-panel.is-open .info-text {
grid-column: 2 !important;

width: 100% !important;
max-width: 650px !important;

margin: 0 !important;
padding: 0 !important;
}

/* BIO */

body.info-open .info-intro,
body .info-panel.is-open .info-intro {
width: 100% !important;
max-width: 650px !important;

margin: 0 !important;
padding: 0 !important;
}

body.info-open .info-intro p,
body .info-panel.is-open .info-intro p {
margin: 0 0 20px !important;

color: var(--info-colour) !important;

font-family: inherit !important;
font-size: clamp(23px, 1.55vw, 30px) !important;
font-weight: 500 !important;
line-height: 1.03 !important;
letter-spacing: -0.045em !important;
}

body.info-open .info-intro p:last-child,
body .info-panel.is-open .info-intro p:last-child {
margin-bottom: 0 !important;
}

/* CREATIVE SERVICES */

body.info-open .info-services,
body .info-panel.is-open .info-services {
width: 100% !important;
max-width: 650px !important;

margin: clamp(48px, 6vh, 72px) 0 0 !important;
padding: 0 !important;
}

body.info-open .info-services-label,
body .info-panel.is-open .info-services-label {
display: block !important;

margin: 0 0 13px !important;

color: var(--info-colour) !important;

font-family: inherit !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;

opacity: 1 !important;
}

body.info-open .info-services-list,
body .info-panel.is-open .info-services-list {
max-width: 620px !important;

margin: 0 !important;

color: var(--info-colour) !important;

font-family: inherit !important;
font-size: clamp(16px, 1.05vw, 20px) !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: -0.025em !important;
}

/* CONTACT ROW */

body.info-open .info-details,
body .info-panel.is-open .info-details {
position: relative !important;

width: 100% !important;

margin: clamp(48px, 6vh, 72px) 0 0 !important;
padding: 0 !important;

display: grid !important;
grid-template-columns: 1.25fr 0.85fr 1fr !important;
column-gap: clamp(24px, 3vw, 48px) !important;
align-items: start !important;
}

body.info-open .info-detail,
body .info-panel.is-open .info-detail {
width: 100% !important;

margin: 0 !important;
padding: 0 !important;
}

body.info-open .info-detail-label,
body .info-panel.is-open .info-detail-label {
display: block !important;

margin: 0 0 8px !important;

color: var(--info-colour) !important;

font-family: inherit !important;
font-size: 9px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;

opacity: 1 !important;
}

body.info-open .info-detail-value,
body.info-open .selected-clients-trigger,
body .info-panel.is-open .info-detail-value,
body .info-panel.is-open .selected-clients-trigger {
margin: 0 !important;
padding: 0 !important;

color: var(--info-colour) !important;
background: transparent !important;

font-family: inherit !important;
font-size: clamp(13px, 0.82vw, 15px) !important;
font-weight: 500 !important;
line-height: 1.12 !important;
letter-spacing: -0.015em !important;
}

body.info-open .info-detail-value,
body .info-panel.is-open .info-detail-value {
text-decoration-color: var(--info-colour) !important;
text-underline-offset: 3px !important;
}

body.info-open .selected-clients,
body .info-panel.is-open .selected-clients {
position: static !important;

width: 100% !important;

margin: 0 !important;
padding: 0 !important;
}

body.info-open .selected-clients-trigger,
body .info-panel.is-open .selected-clients-trigger {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;

border: 0 !important;

text-transform: uppercase !important;
letter-spacing: 0.045em !important;

cursor: pointer !important;
}

/* CLIENT LIST */

body.info-open .selected-clients-panel,
body .info-panel.is-open .selected-clients-panel {
position: absolute !important;

left: 0 !important;
right: 0 !important;
top: calc(100% + 28px) !important;

width: 100% !important;

padding: 25px 0 45px !important;

display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: 30px !important;
row-gap: 8px !important;

background: var(--info-background) !important;
color: var(--info-colour) !important;

font-family: inherit !important;
font-size: clamp(13px, 0.85vw, 15px) !important;
font-weight: 500 !important;
line-height: 1.12 !important;
letter-spacing: -0.015em !important;
}

/* LOGO */

body.info-open .logo {
position: fixed !important;

left: max(
5vw,
calc((100vw - min(90vw, 1380px)) / 2)
) !important;

top: clamp(100px, 13vh, 150px) !important;

width: min(30vw, 460px) !important;
height: auto !important;

margin: 0 !important;

transform: none !important;

z-index: 2200 !important;
}

/* FOOTER */

body.info-open .info-footer,
body .info-panel.is-open .info-footer {
position: fixed !important;

left: clamp(20px, 2vw, 38px) !important;
bottom: clamp(18px, 2vw, 30px) !important;

z-index: 2200 !important;

display: flex !important;
gap: 13px !important;

margin: 0 !important;
padding: 0 !important;

color: var(--info-colour) !important;

font-family:
"JoustBioFont",
"JoustFont",
Arial,
Helvetica,
sans-serif !important;

font-size: 9px !important;
font-weight: 500 !important;
line-height: 1 !important;
}

/* CLOSE CONTROL */

body.info-open .info-button {
right: clamp(24px, 3vw, 48px) !important;
bottom: clamp(22px, 3vw, 44px) !important;

width: 48px !important;
height: 48px !important;

color: var(--info-colour) !important;
}

/* MOBILE */

@media (max-width: 700px) {
body.info-open .info-content,
body .info-panel.is-open .info-content {
width: 100% !important;
min-height: auto !important;


padding:
  140px
  20px
  120px !important;

display: block !important;


}

body.info-open .logo {
left: 20px !important;
top: 26px !important;


width: min(57vw, 250px) !important;


}

body.info-open .info-text,
body .info-panel.is-open .info-text {
width: 100% !important;
max-width: none !important;
}

body.info-open .info-intro p,
body .info-panel.is-open .info-intro p {
font-size: clamp(22px, 6.5vw, 28px) !important;
line-height: 1.04 !important;
}

body.info-open .info-services,
body .info-panel.is-open .info-services {
margin-top: 42px !important;
}

body.info-open .info-services-list,
body .info-panel.is-open .info-services-list {
font-size: 17px !important;
line-height: 1.22 !important;
}

body.info-open .info-details,
body .info-panel.is-open .info-details {
margin-top: 44px !important;


display: grid !important;
grid-template-columns: 1fr !important;
row-gap: 28px !important;


}

body.info-open .info-detail-value,
body.info-open .selected-clients-trigger,
body .info-panel.is-open .info-detail-value,
body .info-panel.is-open .selected-clients-trigger {
font-size: 14px !important;
}

body.info-open .selected-clients-panel,
body .info-panel.is-open .selected-clients-panel {
position: static !important;


grid-template-columns: 1fr !important;
row-gap: 8px !important;

max-height: 0 !important;

margin: 0 !important;
padding: 0 !important;

overflow: hidden !important;
text-align: left !important;


}

body.info-open
.selected-clients:hover
.selected-clients-panel,
body.info-open
.selected-clients:focus-within
.selected-clients-panel,
body
.info-panel.is-open
.selected-clients:hover
.selected-clients-panel,
body
.info-panel.is-open
.selected-clients:focus-within
.selected-clients-panel {
max-height: 700px !important;

margin-top: 20px !important;
padding-bottom: 24px !important;


}

body.info-open .info-footer,
body .info-panel.is-open .info-footer {
position: static !important;


margin:
  34px
  20px
  22px !important;

flex-wrap: wrap !important;


}

body.info-open .info-button {
right: 18px !important;
bottom: 18px !important;


width: 38px !important;
height: 38px !important;


}
}


/* =========================================================
JOUST — EASY SIZE CONTROLS
Change only these numbers
========================================================= */

:root {
/* EMAIL / INSTAGRAM / SELECTED CLIENTS */
--contact-size-desktop: 18px;
--contact-size-mobile: 18px;

/* EMAIL / INSTAGRAM / CLIENTS small headings */
--contact-label-size: 15px;

/* Bottom-left copyright footer */
--info-footer-size-desktop: 17px;
--info-footer-size-mobile: 11px;
}

/* CONTACT VALUES */

body.info-open .info-detail-value,
body.info-open .selected-clients-trigger,
body .info-panel.is-open .info-detail-value,
body .info-panel.is-open .selected-clients-trigger {
font-size: var(--contact-size-desktop) !important;
line-height: 1.12 !important;
}

/* CONTACT HEADINGS */

body.info-open .info-detail-label,
body .info-panel.is-open .info-detail-label {
font-size: var(--contact-label-size) !important;
}

/* SELECTED CLIENTS — NORMAL CASE */

body.info-open .selected-clients-trigger,
body .info-panel.is-open .selected-clients-trigger {
text-transform: none !important;
letter-spacing: -0.015em !important;
}

/* BOTTOM-LEFT FOOTER */

body.info-open .info-footer,
body .info-panel.is-open .info-footer {
font-size: var(--info-footer-size-desktop) !important;
line-height: 1 !important;
gap: 14px !important;
}

/* MOBILE */

@media (max-width: 700px) {
body.info-open .info-detail-value,
body.info-open .selected-clients-trigger,
body .info-panel.is-open .info-detail-value,
body .info-panel.is-open .selected-clients-trigger {
font-size: var(--contact-size-mobile) !important;
}

body.info-open .info-footer,
body .info-panel.is-open .info-footer {
font-size: var(--info-footer-size-mobile) !important;
}
}