/*
|--------------------------------------------------------------------------
| Property Definitions
|--------------------------------------------------------------------------
*/
:root {
  --Color_Text: #f4efe8;
  --Color_TextMuted: rgba(244, 239, 232, 0.82);
  --Color_Border: rgba(244, 239, 232, 0.28);
  --Color_Overlay: rgba(28, 28, 28, 0.46);
  --Color_Background: #16231b;
  --Color_Menu: #f9f5eb;
  --Color_QuoteFill: #f4efe8;
  --Color_QuoteMute: rgba(244, 239, 232, 0.22);
  --Font_Sans: 'Inter', sans-serif;
  --Font_Display: 'Host Grotesk', sans-serif;
  --Font_Serif: 'Instrument Serif', serif;
  --Font_Mono: 'DM Mono', monospace;
  --Header_Height: 64px;
  --Header_LogoWidth: 110px;
}
@media (min-width: 768px) {
:root {
    --Header_Height: 72px;
    --Header_LogoWidth: 128px
}
  }
/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-block-size: 100%;
  overflow-x: clip;
}

body {
  min-block-size: 100vh;
  background-color: var(--Color_Background);
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lyt-Skip {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 2000;
  padding: 8px 12px;
  background-color: var(--Color_Background);
  color: var(--Color_Text);
  transform: translateY(calc(-100% - 8px));
}

.lyt-Skip:focus {
    transform: translateY(0);
  }

:focus-visible {
  outline: 2px solid var(--Color_Text);
  outline-offset: 2px;
}

.lyt-Overlap {
  position: relative;
  z-index: 2;
  min-block-size: 100vh;
  background-color: var(--Color_Background);
}

/*
|--------------------------------------------------------------------------
| Fonts
|--------------------------------------------------------------------------
*/
body {
  font-family: var(--Font_Sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--Color_Text);
}
/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
| @namespace: btn-
|
*/
.btn-Button {
  position: relative;

  align-items: center;
  justify-content: center;

  display: inline-flex;
  padding: 8px 16px;

  font-family: var(--Font_Sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;

  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
}
@media (hover: hover) {
    .btn-Button:hover .btn-Button_Bg {
      inset: 2px;
    }

    .btn-Button:hover [data-button-animate-chars] span {
      transform: translateY(-17px) rotate(0.001deg);
    }
  }
.btn-Button-outline {
  border-color: var(--Color_Border);
  color: var(--Color_Text);
}
@media (hover: hover) {
    .btn-Button-outline:hover {
      border-color: var(--Color_Text);
    }
  }
.btn-Button-solid {
  border-radius: 8px;
  color: var(--Color_Background);
}
.btn-Button-solid .btn-Button_Bg {
    background-color: var(--Color_Menu);
  }
.btn-Button-solid:focus-visible {
    outline-color: var(--Color_Background);
  }

.btn-Button_Bg {
  position: absolute;
  inset: 0;
  z-index: 0;

  border-radius: inherit;
  pointer-events: none;
  transition: inset 600ms cubic-bezier(0.625, 0.05, 0, 1), background-color 300ms ease;
}

@media (prefers-reduced-motion: reduce) {

.btn-Button_Bg {
    transition: none
}
  }

.btn-Button_Text {
  position: relative;
  z-index: 1;
}

[data-button-animate-chars] {
  overflow: hidden;
  position: relative;

  display: inline-block;
  white-space: nowrap;
  line-height: 17px;
}

[data-button-animate-chars] span {
  position: relative;

  display: inline-block;

  text-shadow: 0 17px currentColor;
  transform: translateY(0) rotate(0.001deg);
  transition: transform 600ms cubic-bezier(0.625, 0.05, 0, 1);
}

@media (prefers-reduced-motion: reduce) {

[data-button-animate-chars] span {
    transition: none
}
  }

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
| The global site header that appears at the top of every page
|
| @namespace: hd-
|
*/
.hd-Banner {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 1000;

  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  min-block-size: var(--Header_Height);

  border-block-end: 1px solid var(--Color_Border);
  transition: transform 400ms ease, border-color 300ms ease, background-color 300ms ease;
}
@media (min-width: 768px) {
.hd-Banner {
    grid-template-columns: auto 1fr auto
}
  }

.hd-Banner-isOpen {
  --Header_OpenBorder: rgba(22, 35, 27, 0.16);

  border-block-end-color: var(--Header_OpenBorder);
}

.hd-Banner-isOpen:focus-visible,
  .hd-Banner-isOpen :focus-visible {
    outline-color: var(--Color_Background);
  }

@media (min-width: 768px) {

.hd-Banner-isOpen {
    border-block-end-color: var(--Color_Border)
}
  }
.hd-Banner-isHidden {
  transform: translateY(-100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.hd-Banner-isHidden {
    transition: none
}
  }

.hd-Banner-isFilled {
  --Color_Text: var(--Color_Background);
  --Color_TextMuted: rgba(22, 35, 27, 0.7);
  --Color_Border: rgba(22, 35, 27, 0.16);
  background-color: var(--Color_Menu);
}

.hd-Banner-isFilled .hd-Banner_Logo {
    --Header_LogoSparkle: var(--Color_Menu);
  }

.hd-Banner-isFilled .hd-Banner_Cta {
    border-color: var(--Color_Background);
    color: var(--Color_Menu);
  }

.hd-Banner-isFilled .hd-Banner_Cta .btn-Button_Bg {
      background-color: var(--Color_Background);
    }

.hd-Banner_Logo {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  inline-size: fit-content;
  padding-inline: 16px;
  color: var(--Color_Text);
  --Header_LogoSparkle: var(--Color_Background);
  transition: color 300ms ease;
}

.hd-Banner-isOpen .hd-Banner_Logo {
    color: var(--Color_Background);
    --Header_LogoSparkle: var(--Color_Menu);
  }

@media (min-width: 768px) {

.hd-Banner_Logo {
    align-self: stretch;
    padding-inline: 24px;
    border-inline-end: 1px solid var(--Color_Border)
}

    .hd-Banner-isOpen .hd-Banner_Logo {
      color: var(--Color_Text);
      --Header_LogoSparkle: var(--Color_Background);
    }
  }

.hd-Banner_LogoImage {
  display: block;
  inline-size: var(--Header_LogoWidth);
  block-size: auto;
}

.hd-Banner_LogoSparkle {
  fill: var(--Header_LogoSparkle);
  transition: fill 300ms ease;
}

.hd-Banner_Toggle {
  position: relative;
  z-index: 2;

  align-items: center;
  justify-content: center;

  display: flex;
  inline-size: var(--Header_Height);
  block-size: var(--Header_Height);
  padding: 0;

  color: var(--Color_Text);
  border-inline-start: 1px solid var(--Color_Border);
  transition: color 300ms ease, border-color 300ms ease;
}

.hd-Banner-isOpen .hd-Banner_Toggle {
    color: var(--Color_Background);
    border-inline-start-color: var(--Header_OpenBorder);
  }

@media (min-width: 768px) {

.hd-Banner_Toggle {
    display: none
}
  }

.hd-Banner_ToggleIcon {
  position: relative;

  display: block;
  inline-size: 18px;
  block-size: 12px;
}

.hd-Banner_ToggleBar {
  position: absolute;
  inset-inline: 0;

  display: block;
  block-size: 2px;

  background-color: currentColor;
  transition: transform 300ms ease, opacity 300ms ease;
}

.hd-Banner_ToggleBar:nth-child(1) {
    inset-block-start: 0;
  }

.hd-Banner_ToggleBar:nth-child(2) {
    inset-block-start: 5px;
  }

.hd-Banner_ToggleBar:nth-child(3) {
    inset-block-start: 10px;
  }

.hd-Banner-isOpen .hd-Banner_ToggleBar:nth-child(1) {
      transform: translateY(5px) rotate(45deg);
    }

.hd-Banner-isOpen .hd-Banner_ToggleBar:nth-child(2) {
      opacity: 0;
    }

.hd-Banner-isOpen .hd-Banner_ToggleBar:nth-child(3) {
      transform: translateY(-5px) rotate(-45deg);
    }

.hd-Banner_Nav {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 1;

  padding-block-start: var(--Header_Height);

  background-color: var(--Color_Menu);
  transform: translateY(-100%);
  transition: transform 350ms ease;
  pointer-events: none;
}

.hd-Banner-isOpen .hd-Banner_Nav {
    transform: translateY(0);
    pointer-events: auto;
  }

@media (min-width: 768px) {

.hd-Banner_Nav {
    position: static;
    inset: auto;
    z-index: auto;

    display: flex;
    justify-content: center;
    padding-block-start: 0;

    background-color: transparent;
    transform: none;
    transition: none;
    pointer-events: auto
}
  }

.hd-Banner_Items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px 24px;

  opacity: 0;
  transition: opacity 200ms ease;
}

.hd-Banner-isOpen .hd-Banner_Items {
    opacity: 1;
    transition-delay: 350ms;
  }

@media (min-width: 768px) {

.hd-Banner_Items {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 0;

    opacity: 1;
    transition: none
}
  }

.hd-Banner_Link {
  display: inline-flex;
  align-items: center;
  font-family: var(--Font_Sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--Color_Background);
}

@media (hover: hover) {
    .hd-Banner_Link:hover {
      color: var(--Color_Background);
    }

    .hd-Banner_Link:hover [data-button-animate-chars] span {
      transform: translateY(-21px) rotate(0.001deg);
    }
  }

@media (min-width: 768px) {

.hd-Banner_Link {
    font-size: 14px;
    color: var(--Color_TextMuted)
}

    @media (hover: hover) {
      .hd-Banner_Link:hover {
        color: var(--Color_Text);
      }

      .hd-Banner_Link:hover [data-button-animate-chars] span {
        transform: translateY(-18px) rotate(0.001deg);
      }
    }
  }
.hd-Banner_Link-isActive {
  text-decoration: underline;
  color: var(--Color_Background);
}
@media (min-width: 768px) {
.hd-Banner_Link-isActive {
    text-decoration: none;
    color: var(--Color_Text)
}
  }

.hd-Banner_LinkText {
  line-height: 21px;
}

.hd-Banner_LinkText span {
    text-shadow: 0 21px currentColor;
  }

@media (min-width: 768px) {

.hd-Banner_LinkText {
    line-height: 18px
}

    .hd-Banner_LinkText span {
      text-shadow: 0 18px currentColor;
    }
  }

.hd-Banner_Ancillary {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  align-self: stretch;
  padding-inline-end: 12px;
}

@media (min-width: 768px) {

.hd-Banner_Ancillary {
    justify-self: end;
    padding-inline: 24px;
    border-inline-start: 1px solid var(--Color_Border)
}
  }

.hd-Banner_Cta {
  border-radius: 8px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: color 300ms ease, border-color 300ms ease;
}

.hd-Banner_Cta .btn-Button_Bg {
    background-color: rgba(244, 239, 232, 0.12);
  }

.hd-Banner-isOpen .hd-Banner_Cta {
    border-color: var(--Color_Background);
    color: var(--Color_Menu);
  }

.hd-Banner-isOpen .hd-Banner_Cta .btn-Button_Bg {
      background-color: var(--Color_Background);
    }

@media (min-width: 768px) {
    .hd-Banner-isOpen .hd-Banner_Cta {
      border-color: var(--Color_Border);
      color: var(--Color_Text);
    }

      .hd-Banner-isOpen .hd-Banner_Cta .btn-Button_Bg {
        background-color: rgba(244, 239, 232, 0.12);
      }
  }

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
| The homepage introduction that sits under the overlay header
|
| @namespace: hr-
|
*/
.hr-Hero {
  position: sticky;
  inset-block-start: 0;
  z-index: 0;
  overflow-x: clip;
  min-block-size: 100vh;
  background-color: var(--Color_Background);
  background-image:
    linear-gradient(var(--Color_Overlay), var(--Color_Overlay)),
    url('../assets/hero.jpg');
  background-position: center;
  background-size: cover;
}

.hr-Hero_Inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-block-size: 100vh;
  padding: 80px 16px 40px;
}

@media (min-width: 768px) {

.hr-Hero_Inner {
    padding: 80px 24px 80px
}
  }

.hr-Hero_TitleGroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  container-type: inline-size;
}

.hr-Hero_Title {
  margin: 0;
  margin-inline-end: -0.02em;

  font-family: var(--Font_Display);
  font-size: 15.4cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hr-Hero_Meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.hr-Hero_Eyebrow {
  margin: 0;

  font-family: var(--Font_Mono);
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hr-Hero_Eyebrow:last-child {
    text-align: end;
  }

.hr-Hero_Intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-inline-size: 480px;
}

.hr-Hero_Lede {
  margin: 0;

  font-family: var(--Font_Serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -1px;
}

@media (min-width: 768px) {

.hr-Hero_Lede {
    font-size: 46px;
    line-height: 46px
}
  }

/*
|--------------------------------------------------------------------------
| Quote
|--------------------------------------------------------------------------
| Pinned statement that fills from muted to cream on scroll
|
| @namespace: qt-
|
*/
.qt-Quote {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-block-size: 100vh;
  padding: 80px 16px;
  color: var(--Color_Text);
  text-align: center;
}
@media (min-width: 768px) {
.qt-Quote {
    gap: 32px;
    padding: 80px 24px
}
  }

.qt-Quote_Eyebrow {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--Color_Border);
  border-radius: 999px;

  font-family: var(--Font_Sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.qt-Quote_Block {
  margin: 0;
  max-inline-size: 100%;
}

@media (min-width: 768px) {

.qt-Quote_Block {
    max-inline-size: 720px
}
  }

@media (min-width: 1024px) {

.qt-Quote_Block {
    max-inline-size: 880px
}
  }

.qt-Quote_Text {
  margin: 0;

  font-family: var(--Font_Serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1px;
  color: var(--Color_QuoteMute);
}

@media (min-width: 768px) {

.qt-Quote_Text {
    font-size: 72px;
    line-height: 76px
}
  }

@media (min-width: 1024px) {

.qt-Quote_Text {
    font-size: 88px;
    line-height: 92px
}
  }

@media (prefers-reduced-motion: reduce) {

.qt-Quote_Text {
    color: var(--Color_QuoteFill)
}
  }

.qt-Quote_Line {
  --Quote_Fill: 0%;

  display: block;
  width: fit-content;
  max-inline-size: 100%;
  margin-inline: auto;
  background-image: linear-gradient(
    to right,
    var(--Color_QuoteFill) var(--Quote_Fill),
    var(--Color_QuoteMute) var(--Quote_Fill)
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {

.qt-Quote_Line {
    --Quote_Fill: 100%
}
  }

.qt-Quote_Lede {
  margin: 0;
  max-inline-size: 520px;

  font-family: var(--Font_Sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Color_TextMuted);
}

@media (min-width: 768px) {

.qt-Quote_Lede {
    font-size: 18px;
    line-height: 26px
}
  }

/*
|--------------------------------------------------------------------------
| Story
|--------------------------------------------------------------------------
| Cream split with sticky copy on the left and a full-height image
|
| @namespace: st-
|
*/
.st-Story {
  position: relative;
  z-index: 3;
  background-color: var(--Color_Menu);
  color: var(--Color_Background);
}
@media (min-width: 768px) {
.st-Story {
    min-block-size: 280vh
}
  }

.st-Story :focus-visible {
  outline-color: var(--Color_Background);
}

.st-Story_Inner {
  display: grid;
  min-block-size: 100vh;
}

@media (min-width: 768px) {

.st-Story_Inner {
    position: sticky;
    inset-block-start: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 100vh;
    min-block-size: 100vh
}
  }

.st-Story_Content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 80px 16px 40px;
}

@media (min-width: 768px) {

.st-Story_Content {
    justify-content: flex-start;
    gap: 20px;
    min-block-size: 100vh;
    padding: calc(var(--Header_Height) + 36px) 40px 40px
}
  }

.st-Story_Logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-block-end: 16px;
}

@media (min-width: 768px) {

.st-Story_Logos {
    gap: 20px;
    margin-block-end: 28px
}
  }

.st-Story_Logos-bottom {
  margin-block-start: 16px;
}

@media (min-width: 768px) {

.st-Story_Logos-bottom {
    margin-block-start: 28px
}
  }

.st-Story_Partner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.st-Story_PartnerMark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: var(--Color_Background);
}

@media (min-width: 768px) {

.st-Story_PartnerMark {
    width: 44px;
    height: 44px
}
  }

.st-Story_PartnerIcon {
  display: block;
  width: 22px;
  height: 22px;
  filter: invert(1);
}

@media (min-width: 768px) {

.st-Story_PartnerIcon {
    width: 24px;
    height: 24px
}
  }

.st-Story_PartnerName {
  font-family: var(--Font_Sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

@media (min-width: 768px) {

.st-Story_PartnerName {
    font-size: 13px;
    line-height: 16px
}
  }

.st-Story_Rule {
  flex-shrink: 0;
  width: 1px;
  height: 32px;
  background-color: rgba(22, 35, 27, 0.2);
}

@media (min-width: 768px) {

.st-Story_Rule {
    height: 36px
}
  }

.st-Story_LogoLink {
  display: flex;
  color: inherit;
  text-decoration: none;
}

.st-Story_Fiverr {
  display: block;
  width: 88px;
  height: auto;
}

@media (min-width: 768px) {

.st-Story_Fiverr {
    width: 104px
}
  }

.st-Story_Storetasker {
  display: block;
  width: 148px;
  height: auto;
}

@media (min-width: 768px) {

.st-Story_Storetasker {
    width: 172px
}
  }

.st-Story_Label {
  margin: 0;

  font-family: var(--Font_Mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.st-Story_Title {
  margin: 0;

  font-family: var(--Font_Serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
}

@media (min-width: 768px) {

.st-Story_Title {
    font-size: 44px
}
  }

@media (min-width: 1024px) {

.st-Story_Title {
    font-size: 56px
}
  }

.st-Story_CopyGroup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-inline-size: 480px;
}

.st-Story_Copy {
  margin: 0;

  font-family: var(--Font_Sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

@media (min-width: 768px) {

.st-Story_Copy {
    font-size: 18px;
    line-height: 28px
}
  }

.st-Story_Cta {
  border-color: var(--Color_Background);
  color: var(--Color_Background);
}

@media (hover: hover) {
    .st-Story_Cta:hover {
      border-color: var(--Color_Background);
    }
  }

.st-Story_Media {
  position: relative;
  overflow: hidden;
  min-block-size: 420px;
}

@media (min-width: 768px) {

.st-Story_Media {
    min-block-size: 100vh
}
  }

.st-Story_Image {
  display: block;
  width: 100%;
  height: 100%;
  min-block-size: 420px;
  object-fit: cover;
}

@media (min-width: 768px) {

.st-Story_Image {
    min-block-size: 100vh
}
  }

.st-Story_Messages {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.st-Story_Message {
  position: absolute;
  z-index: 1;
  width: min(280px, calc(100% - 32px));
  padding: 10px 12px 12px;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--Color_Background);
  border: 1px solid rgba(22, 35, 27, 0.06);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(22, 35, 27, 0.06), 0 18px 40px rgba(22, 35, 27, 0.18);
  backdrop-filter: blur(16px);
  opacity: 0;
}

@media (min-width: 768px) {

.st-Story_Message {
    width: 320px;
    padding: 12px 14px 14px
}
  }

@media (prefers-reduced-motion: reduce) {

.st-Story_Message {
    opacity: 1
}
  }

.st-Story_Message-one {
  top: 14%;
  left: 16px;
  rotate: -1.5deg;
}

@media (min-width: 768px) {

.st-Story_Message-one {
    left: 28px
}
  }

.st-Story_Message-two {
  top: 30%;
  right: 16px;
  left: auto;
  rotate: 1.5deg;
}

@media (min-width: 768px) {

.st-Story_Message-two {
    top: 29%;
    right: 20px
}
  }

.st-Story_Message-three {
  top: 48%;
  left: 28px;
  z-index: 2;
  rotate: -0.8deg;
}

@media (min-width: 768px) {

.st-Story_Message-three {
    top: 47%;
    left: 48px
}
  }

.st-Story_Message-four {
  top: 68%;
  right: 24px;
  left: auto;
  z-index: 3;
  rotate: 1deg;
}

@media (min-width: 768px) {

.st-Story_Message-four {
    top: 67%;
    right: 40px
}
  }

.st-Story_MessageHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 8px;
  padding-block-end: 8px;
  border-block-end: 1px solid rgba(22, 35, 27, 0.08);
}

.st-Story_MessageAvatar {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(22, 35, 27, 0.08);
}

@media (min-width: 768px) {

.st-Story_MessageAvatar {
    width: 36px;
    height: 36px
}
  }

.st-Story_MessagePhoto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-Story_MessageMeta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0;
  flex: 1 1 auto;
}

.st-Story_MessageFrom {
  font-family: var(--Font_Sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
}

.st-Story_MessageRole {
  font-family: var(--Font_Mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(22, 35, 27, 0.55);
}

.st-Story_MessageTime {
  flex-shrink: 0;
  align-self: flex-start;

  font-family: var(--Font_Mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(22, 35, 27, 0.42);
}

.st-Story_MessageText {
  margin: 0;

  font-family: var(--Font_Sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

@media (min-width: 768px) {

.st-Story_MessageText {
    font-size: 15px;
    line-height: 22px
}
  }

/*
|--------------------------------------------------------------------------
| Services
|--------------------------------------------------------------------------
| Dark accordion of what I offer
|
| @namespace: sv-
|
*/
.sv-Services {
  position: relative;
  z-index: 4;
  min-block-size: 100vh;
  background-color: var(--Color_Background);
  color: var(--Color_Text);
}
@media (min-width: 768px) {
.sv-Services {
    min-block-size: 320vh
}
  }

.sv-Services_Inner {
  display: grid;
  align-items: center;
  gap: 40px;
  min-block-size: 100vh;
  padding: 80px 16px;
}

@media (min-width: 768px) {

.sv-Services_Inner {
    position: sticky;
    inset-block-start: 0;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 64px;
    height: 100vh;
    min-block-size: 100vh;
    padding: 80px 24px
}
  }

@media (min-width: 1024px) {

.sv-Services_Inner {
    gap: 96px;
    padding: 120px 40px
}
  }

.sv-Services_Intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sv-Services_Title {
  margin: 0;

  font-family: var(--Font_Serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1px;
}

@media (min-width: 768px) {

.sv-Services_Title {
    font-size: 56px
}
  }

@media (min-width: 1024px) {

.sv-Services_Title {
    font-size: 72px
}
  }

.sv-Services_Lede {
  margin: 0;
  max-inline-size: 400px;

  font-family: var(--Font_Sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Color_TextMuted);
}

.sv-Services_Item {
  border-bottom: 1px solid var(--Color_Border);
  interpolate-size: allow-keywords;
}

.sv-Services_Item:first-child {
    border-top: 1px solid var(--Color_Border);
  }

.sv-Services_Item::details-content {
    block-size: 0px;
    overflow: hidden;
    transition: block-size 280ms ease, content-visibility 280ms allow-discrete;
  }

@media (prefers-reduced-motion: reduce) {

.sv-Services_Item::details-content {
      transition: none
  }
    }

.sv-Services_Item[open]::details-content {
    block-size: auto;
  }

.sv-Services_Summary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-block: 20px;

  font-family: var(--Font_Display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.5px;
  cursor: pointer;
  list-style: none;
}

@media (min-width: 768px) {

.sv-Services_Summary {
    gap: 16px;
    padding-block: 28px;
    font-size: 28px
}
  }

.sv-Services_Summary::-webkit-details-marker {
    display: none;
  }

.sv-Services_Summary:focus-visible {
    outline: 2px solid var(--Color_Text);
    outline-offset: 4px;
  }

.sv-Services_Index {
  flex-shrink: 0;
  width: 28px;

  font-family: var(--Font_Mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.8px;
  color: rgba(244, 239, 232, 0.42);
}

@media (min-width: 768px) {

.sv-Services_Index {
    width: 36px;
    font-size: 12px
}
  }

.sv-Services_Name {
  flex: 1 1 auto;
}

.sv-Services_Icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--Color_Border);
  border-radius: 50%;

  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  text-align: center;
  transition: transform 200ms ease, border-color 200ms ease;
}

@media (min-width: 768px) {

.sv-Services_Icon {
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 30px
}
  }

@media (prefers-reduced-motion: reduce) {

.sv-Services_Icon {
    transition: none
}
  }

.sv-Services_Item[open] .sv-Services_Index {
  color: var(--Color_Text);
}

.sv-Services_Item[open] .sv-Services_Icon {
  border-color: var(--Color_Text);
  transform: rotate(45deg);
}

.sv-Services_Copy {
  margin: 0;
  padding: 0 0 24px 40px;
  max-inline-size: 640px;

  font-family: var(--Font_Sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Color_TextMuted);
}

@media (min-width: 768px) {

.sv-Services_Copy {
    padding: 0 0 32px 52px;
    font-size: 16px;
    line-height: 26px
}
  }

/*
|--------------------------------------------------------------------------
| Capability
|--------------------------------------------------------------------------
| Cream split with a two-column service list
|
| @namespace: cp-
|
*/
.cp-Capability {
  position: relative;
  z-index: 5;
  min-block-size: 100vh;
  background-color: var(--Color_Menu);
  color: var(--Color_Background);
}
@media (min-width: 768px) {
.cp-Capability {
    min-block-size: 280vh
}
  }

.cp-Capability :focus-visible {
  outline-color: var(--Color_Background);
}

.cp-Capability_Inner {
  display: grid;
  align-items: center;
  gap: 40px;
  min-block-size: 100vh;
  padding: 80px 16px;
}

@media (min-width: 768px) {

.cp-Capability_Inner {
    position: sticky;
    inset-block-start: 0;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 64px;
    height: 100vh;
    min-block-size: 100vh;
    padding: 80px 24px
}
  }

@media (min-width: 1024px) {

.cp-Capability_Inner {
    gap: 96px;
    padding: 120px 40px
}
  }

.cp-Capability_Label {
  margin: 0;

  font-family: var(--Font_Mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cp-Capability_Content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

@media (min-width: 768px) {

.cp-Capability_Content {
    gap: 40px
}
  }

.cp-Capability_Title {
  margin: 0;

  font-family: var(--Font_Serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
}

@media (min-width: 768px) {

.cp-Capability_Title {
    font-size: 36px
}
  }

@media (min-width: 1024px) {

.cp-Capability_Title {
    font-size: 44px;
    line-height: 1.1
}
  }

.cp-Capability_CopyGroup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-inline-size: 560px;
}

.cp-Capability_Copy {
  margin: 0;

  font-family: var(--Font_Sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(22, 35, 27, 0.72);
}

@media (min-width: 768px) {

.cp-Capability_Copy {
    font-size: 18px;
    line-height: 28px
}
  }

.cp-Capability_List {
  display: grid;
  width: 100%;
}

@media (min-width: 768px) {

.cp-Capability_List {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px
}
  }

.cp-Capability_ListItem {
  padding-block: 16px;
  border-bottom: 1px solid rgba(22, 35, 27, 0.15);
  opacity: 0;

  font-family: var(--Font_Sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

@media (min-width: 768px) {

.cp-Capability_ListItem {
    padding-block: 20px
}
  }

@media (prefers-reduced-motion: reduce) {

.cp-Capability_ListItem {
    opacity: 1
}
  }

.cp-Capability_Cta {
  border-color: var(--Color_Background);
  color: var(--Color_Background);
}

@media (hover: hover) {
    .cp-Capability_Cta:hover {
      border-color: var(--Color_Background);
    }
  }

/*
|--------------------------------------------------------------------------
| Tools
|--------------------------------------------------------------------------
| Dark band listing platforms and apps I work with
|
| @namespace: tl-
|
*/
.tl-Tools {
  position: relative;
  z-index: 6;
  min-block-size: 100vh;
  background-color: var(--Color_Menu);
  color: var(--Color_Background);
}
@media (min-width: 768px) {
.tl-Tools {
    min-block-size: 280vh
}
  }

.tl-Tools :focus-visible {
  outline-color: var(--Color_Background);
}

.tl-Tools_Inner {
  display: grid;
  align-items: center;
  gap: 40px;
  min-block-size: 100vh;
  padding: 80px 16px;
}

@media (min-width: 768px) {

.tl-Tools_Inner {
    position: sticky;
    inset-block-start: 0;
    height: 100vh;
    min-block-size: 100vh;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 64px;
    padding: 80px 24px
}
  }

@media (min-width: 1024px) {

.tl-Tools_Inner {
    gap: 96px;
    padding: 120px 40px
}
  }

.tl-Tools_Label {
  margin: 0;

  font-family: var(--Font_Mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tl-Tools_Content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 768px) {

.tl-Tools_Content {
    gap: 56px
}
  }

.tl-Tools_Title {
  margin: 0;
  max-inline-size: 720px;

  font-family: var(--Font_Serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
}

@media (min-width: 768px) {

.tl-Tools_Title {
    font-size: 36px
}
  }

@media (min-width: 1024px) {

.tl-Tools_Title {
    font-size: 44px;
    line-height: 1.15
}
  }

.tl-Tools_CopyGroup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-inline-size: 560px;
}

.tl-Tools_Copy {
  margin: 0;

  font-family: var(--Font_Sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(22, 35, 27, 0.72);
}

@media (min-width: 768px) {

.tl-Tools_Copy {
    font-size: 18px;
    line-height: 28px
}
  }

.tl-Tools_Grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px 40px;
}

@media (min-width: 768px) {

.tl-Tools_Grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 72px 64px
}
  }

.tl-Tools_Tool {
  display: flex;
  align-items: center;
  min-block-size: 40px;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

.tl-Tools_Tool {
    opacity: 1
}
  }

.tl-Tools_Logo {
  display: block;
  width: auto;
  max-inline-size: 120px;
  max-block-size: 28px;
  object-fit: contain;
  object-position: left center;
}

@media (min-width: 768px) {

.tl-Tools_Logo {
    max-inline-size: 140px;
    max-block-size: 32px
}
  }

.tl-Tools_Partner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tl-Tools_PartnerMark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background-color: var(--Color_Text);
}

.tl-Tools_PartnerIcon {
  display: block;
  width: 18px;
  height: 18px;
}

.tl-Tools_PartnerName {
  font-family: var(--Font_Sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/*
|--------------------------------------------------------------------------
| Work
|--------------------------------------------------------------------------
| Cream band with a centred headline and scattered photo frames
|
| @namespace: wk-
|
*/
.wk-Work {
  position: relative;
  z-index: 7;
  min-block-size: 420vh;
  background-color: var(--Color_Menu);
  color: var(--Color_Background);
}
@media (min-width: 768px) {
.wk-Work {
    min-block-size: 480vh
}
  }

.wk-Work :focus-visible {
  outline-color: var(--Color_Background);
}

.wk-Work_Inner {
  display: block;
  position: sticky;
  inset-block-start: 0;
  overflow: hidden;
  height: 100vh;
  min-block-size: 100vh;
  padding: 80px 16px;
}

@media (min-width: 768px) {

.wk-Work_Inner {
    padding: 80px 24px
}
  }

@media (min-width: 1024px) {

.wk-Work_Inner {
    padding: 120px 40px
}
  }

.wk-Work_Copy {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline: 20px;
  padding-block: 0;
  text-align: center;
  transform: translateY(-50%);
  opacity: 0;
}

@media (min-width: 768px) {

.wk-Work_Copy {
    inset-inline: 120px
}
  }

@media (prefers-reduced-motion: reduce) {

.wk-Work_Copy {
    opacity: 1
}
  }

.wk-Work_Eyebrow {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  margin: 0;
  font-family: var(--Font_Sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.2px;
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {

.wk-Work_Eyebrow {
    position: static;
    margin-bottom: 12px;
    transform: none
}
  }

.wk-Work_Labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 8px;
  row-gap: 0;
  margin: 0;

  font-family: var(--Font_Serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
}

@media (min-width: 768px) {

.wk-Work_Labels {
    font-size: 52px
}
  }

@media (min-width: 1024px) {

.wk-Work_Labels {
    font-size: 64px
}
  }

.wk-Work_Labels {
  position: relative;
  flex-direction: column;
  align-items: center;
  min-block-size: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {

.wk-Work_Labels {
    position: static;
    row-gap: 8px;
    pointer-events: auto
}
  }

.wk-Work_Label {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  column-gap: 8px;
  position: relative;
  height: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: none;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {

.wk-Work_Label {
    position: static;
    height: auto;
    overflow: visible;
    pointer-events: auto
}
  }

.wk-Work_Word {
  display: block;
  overflow: hidden;
}

.wk-Work_WordInner {
  display: block;
}

.wk-Work_Photo {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  margin: 0;
  border-radius: 16px;
  background-color: rgba(22, 35, 27, 0.1);
  box-shadow: 0 12px 32px rgba(22, 35, 27, 0.16);
}

.wk-Work_Image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-block-size: 0;
  object-fit: cover;
}

.wk-Work_Photo-one {
  z-index: 8;
  inset-block-start: 56px;
  inset-inline-start: 8px;
  width: 132px;
  height: 90px;
  rotate: -5deg;
}

@media (min-width: 768px) {

.wk-Work_Photo-one {
    inset-block-start: 80px;
    inset-inline-start: 24px;
    width: 260px;
    height: 176px
}
  }

@media (min-width: 1024px) {

.wk-Work_Photo-one {
    width: 320px;
    height: 210px
}
  }

.wk-Work_Photo-two {
  z-index: 7;
  inset-block-start: 40px;
  inset-inline-end: 8px;
  width: 80px;
  height: 58px;
  rotate: 4deg;
}

@media (min-width: 768px) {

.wk-Work_Photo-two {
    inset-block-start: 64px;
    inset-inline-end: 48px;
    width: 150px;
    height: 110px
}
  }

@media (min-width: 1024px) {

.wk-Work_Photo-two {
    width: 168px;
    height: 120px
}
  }

.wk-Work_Photo-three {
  z-index: 5;
  inset-block-end: 72px;
  inset-inline-start: 12px;
  width: 96px;
  height: 68px;
  rotate: 2deg;
}

@media (min-width: 768px) {

.wk-Work_Photo-three {
    inset-block-end: 80px;
    inset-inline-start: 72px;
    width: 180px;
    height: 128px
}
  }

@media (min-width: 1024px) {

.wk-Work_Photo-three {
    width: 200px;
    height: 140px
}
  }

.wk-Work_Photo-four {
  z-index: 3;
  inset-block-end: 12px;
  inset-inline-end: 8px;
  width: 100px;
  height: 148px;
  rotate: -3deg;
}

@media (min-width: 768px) {

.wk-Work_Photo-four {
    inset-block-end: 24px;
    inset-inline-end: 20px;
    width: 220px;
    height: 320px
}
  }

@media (min-width: 1024px) {

.wk-Work_Photo-four {
    width: 260px;
    height: 400px
}
  }

.wk-Work_Photo-five {
  z-index: 9;
  inset-block-start: 38%;
  inset-inline-start: 8px;
  width: 84px;
  height: 120px;
  rotate: 6deg;
}

@media (min-width: 768px) {

.wk-Work_Photo-five {
    inset-block-start: 42%;
    inset-inline-start: 16px;
    width: 170px;
    height: 250px
}
  }

@media (min-width: 1024px) {

.wk-Work_Photo-five {
    width: 200px;
    height: 310px
}
  }

.wk-Work_Photo-six {
  z-index: 6;
  inset-block-start: 150px;
  inset-inline-end: 8px;
  width: 68px;
  height: 90px;
  rotate: -2deg;
}

@media (min-width: 768px) {

.wk-Work_Photo-six {
    inset-block-start: 210px;
    inset-inline-end: 24px;
    width: 120px;
    height: 160px
}
  }

@media (min-width: 1024px) {

.wk-Work_Photo-six {
    inset-block-start: 220px;
    inset-inline-end: 28px;
    width: 140px;
    height: 188px
}
  }

.wk-Work_Photo-seven {
  z-index: 4;
  inset-block-end: 20px;
  inset-inline-start: 100px;
  width: 68px;
  height: 52px;
  rotate: 3deg;
}

@media (min-width: 768px) {

.wk-Work_Photo-seven {
    inset-block-end: 40px;
    inset-inline-start: 280px;
    width: 112px;
    height: 84px
}
  }

@media (min-width: 1024px) {

.wk-Work_Photo-seven {
    inset-inline-start: 320px;
    width: 128px;
    height: 96px
}
  }

/*
|--------------------------------------------------------------------------
| Clients
|--------------------------------------------------------------------------
| Slim logo band for brands worked on, including agency engagements
|
| @namespace: cl-
|
*/
.cl-Clients {
  position: relative;
  z-index: 7;
  background-color: var(--Color_Background);
  color: var(--Color_Text);
}

.cl-Clients_Inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 64px 0;
}

@media (min-width: 768px) {

.cl-Clients_Inner {
    gap: 40px;
    padding: 80px 0
}
  }

@media (min-width: 1024px) {

.cl-Clients_Inner {
    padding: 96px 0
}
  }

.cl-Clients_Label {
  margin: 0;
  padding-inline: 16px;

  font-family: var(--Font_Mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (min-width: 768px) {

.cl-Clients_Label {
    padding-inline: 24px
}
  }

@media (min-width: 1024px) {

.cl-Clients_Label {
    padding-inline: 40px
}
  }

.cl-Clients_Viewport {
  overflow: hidden;
  width: 100%;
}

.cl-Clients_Track {
  display: flex;
  width: max-content;
  animation: cl-Clients_Scroll 32s linear infinite;
}

@media (prefers-reduced-motion: reduce) {

.cl-Clients_Track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%
}
  }

.cl-Clients:hover .cl-Clients_Track,
.cl-Clients:focus-within .cl-Clients_Track {
  animation-play-state: paused;
}

.cl-Clients_List {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 48px;
  padding-inline-end: 48px;
}

@media (min-width: 768px) {

.cl-Clients_List {
    gap: 72px;
    padding-inline-end: 72px
}
  }
@media (prefers-reduced-motion: reduce) {
.cl-Clients_List-isClone {
    display: none
}
  }

.cl-Clients_Item {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 4px;
}

.cl-Clients_Logo {
  display: block;
  width: auto;
  max-inline-size: 140px;
  max-block-size: 28px;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 768px) {

.cl-Clients_Logo {
    max-inline-size: 160px;
    max-block-size: 32px
}
  }

.cl-Clients_Star {
  font-family: var(--Font_Sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--Color_TextMuted);
}

.cl-Clients_Note {
  margin: 0;
  padding-inline: 16px;
  max-inline-size: 560px;

  font-family: var(--Font_Sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--Color_TextMuted);
  text-align: center;
}

@media (min-width: 768px) {

.cl-Clients_Note {
    padding-inline: 24px
}
  }

@keyframes cl-Clients_Scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-25%);
  }
}

/*
|--------------------------------------------------------------------------
| Testimonials
|--------------------------------------------------------------------------
| Desktop: pinned row of quote cards that travel and tighten on scroll
| Mobile: stacked cards you can swipe
|
| @namespace: tm-
|
*/
.tm-Testimonials {
  position: relative;
  z-index: 8;
  min-block-size: 100vh;
  background-color: var(--Color_Background);
  color: var(--Color_Text);
}
@media (min-width: 768px) {
.tm-Testimonials {
    min-block-size: 320vh
}
  }

.tm-Testimonials :focus-visible {
  outline-color: var(--Color_Text);
}

.tm-Testimonials_Pin {
  display: block;
  overflow: visible;
  min-block-size: 100vh;
  padding: 80px 16px;
}

@media (min-width: 768px) {

.tm-Testimonials_Pin {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    gap: 32px;
    height: 100vh;
    height: 100svh;
    min-block-size: 100vh;
    min-block-size: 100svh;
    padding: 48px 24px
}
  }

@media (min-width: 1024px) {

.tm-Testimonials_Pin {
    padding: 64px 40px
}
  }

.tm-Testimonials_Intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-inline-size: 640px;
}

.tm-Testimonials_Eyebrow {
  margin: 0;

  font-family: var(--Font_Mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tm-Testimonials_Title {
  margin: 0;

  font-family: var(--Font_Serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: -1px;
}

@media (min-width: 768px) {

.tm-Testimonials_Title {
    font-size: 36px;
    line-height: 42px
}
  }

.tm-Testimonials_Lede {
  margin: 0;
  max-inline-size: 520px;

  font-family: var(--Font_Sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Color_TextMuted);
}

@media (min-width: 768px) {

.tm-Testimonials_Lede {
    font-size: 18px;
    line-height: 28px
}
  }

.tm-Testimonials_Track {
  position: relative;
  display: block;
  overflow: visible;
  margin-block-start: 24px;
}

@media (min-width: 768px) {

.tm-Testimonials_Track {
    position: static;
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 80px;
    width: max-content;
    margin-block-start: 0;
    overflow: hidden
}
  }
.tm-Testimonials_Track:focus-visible {
  outline: 2px solid var(--Color_Text);
  outline-offset: 4px;
}

.tm-Testimonials_Card {
  --Testimonials_CardFill: var(--Color_Menu);
  --Testimonials_CardText: var(--Color_Background);

  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding: 24px;
  border-radius: 20px;
  background-color: var(--Testimonials_CardFill);
  color: var(--Testimonials_CardText);
  opacity: 0;
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

@media (min-width: 768px) {

.tm-Testimonials_Card {
    position: relative;
    flex: 0 0 360px;
    width: 360px;
    height: 480px;
    min-block-size: 480px;
    padding: 32px;
    overflow: hidden;
    touch-action: auto !important;
    user-select: auto;
    -webkit-user-select: auto
}
  }

@media (prefers-reduced-motion: reduce) {

.tm-Testimonials_Card {
    opacity: 1
}
  }
.tm-Testimonials_Card-cream {
  --Testimonials_CardFill: #f9f5eb;
  --Testimonials_CardText: #16231b;
}
.tm-Testimonials_Card-sand {
  --Testimonials_CardFill: #e4d5b8;
  --Testimonials_CardText: #16231b;
}
.tm-Testimonials_Card-sage {
  --Testimonials_CardFill: #b7c7b0;
  --Testimonials_CardText: #16231b;
}
.tm-Testimonials_Card-moss {
  --Testimonials_CardFill: #2c3f32;
  --Testimonials_CardText: #f4efe8;
}
.tm-Testimonials_Card-clay {
  --Testimonials_CardFill: #d7b8a3;
  --Testimonials_CardText: #16231b;
}
.tm-Testimonials_Card-gold {
  --Testimonials_CardFill: #c9b27a;
  --Testimonials_CardText: #16231b;
}

.tm-Testimonials_Card :focus-visible {
  outline-color: currentColor;
}

.tm-Testimonials_Content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  height: 100%;
}

.tm-Testimonials_Quote {
  margin: 0;

  font-family: var(--Font_Serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.5px;
}

@media (min-width: 768px) {

.tm-Testimonials_Quote {
    font-size: 28px;
    line-height: 34px
}
  }

.tm-Testimonials_Quote p {
  margin: 0;
}

.tm-Testimonials_Person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.tm-Testimonials_Photo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
  -webkit-user-drag: none;
}

.tm-Testimonials_Identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tm-Testimonials_Name {
  margin: 0;

  font-family: var(--Font_Sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.tm-Testimonials_Role {
  margin: 0;

  font-family: var(--Font_Sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  opacity: 0.72;
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
| Dark close with a newsletter form and a large wordmark
|
| @namespace: ft-
|
*/
.ft-Footer {
  position: relative;
  z-index: 9;
  min-block-size: 200vh;
  background-color: var(--Color_Background);
  color: var(--Color_Text);
}
@media (min-width: 768px) {
.ft-Footer {
    min-block-size: 220vh
}
  }

.ft-Footer_Pin {
  position: sticky;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  padding: 80px 16px 16px;
}

@media (min-width: 768px) {

.ft-Footer_Pin {
    height: 100vh;
    min-block-size: 100vh;
    padding: 90px 24px 24px
}
  }

@media (min-width: 1024px) {

.ft-Footer_Pin {
    padding: 90px 40px 24px
}
  }

.ft-Footer :focus-visible {
  outline-color: var(--Color_Text);
}

.ft-Footer_Top {
  display: grid;
  gap: 40px;
  margin-block-end: 48px;
}

@media (min-width: 768px) {

.ft-Footer_Top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    gap: 64px;
    margin-block-end: 72px
}
  }

.ft-Footer_Intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ft-Footer_Label {
  margin: 0;

  font-family: var(--Font_Mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ft-Footer_Title {
  margin: 0;
  max-inline-size: 560px;

  font-family: var(--Font_Serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
}

@media (min-width: 768px) {

.ft-Footer_Title {
    font-size: 48px
}
  }

@media (min-width: 1024px) {

.ft-Footer_Title {
    font-size: 64px
}
  }

.ft-Footer_Copy {
  margin: 0;
  max-inline-size: 420px;

  font-family: var(--Font_Sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Color_TextMuted);
}

@media (min-width: 768px) {

.ft-Footer_Copy {
    font-size: 18px;
    line-height: 28px
}
  }

.ft-Footer_Form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.ft-Footer_Field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ft-Footer_LabelText {
  font-family: var(--Font_Sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}

.ft-Footer_Input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background-color: transparent;
  border: 1px solid var(--Color_Border);
  border-radius: 8px;
  color: var(--Color_Text);

  font-family: var(--Font_Sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.ft-Footer_Input::placeholder {
  color: rgba(244, 239, 232, 0.42);
}

.ft-Footer_Submit {
  align-self: flex-start;
  height: 48px;
  padding: 0 24px;
}

.ft-Footer_Status {
  margin: 0;
  min-block-size: 20px;

  font-family: var(--Font_Sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--Color_TextMuted);
}

.ft-Footer_Nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-block-end: 24px;
}

@media (min-width: 768px) {

.ft-Footer_Nav {
    margin-block-end: 50px
}
  }

.ft-Footer_Link {
  font-family: var(--Font_Sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ft-Footer_MarkWrap {
  width: 100%;
  margin-block-start: auto;
}

.ft-Footer_Mark {
  display: block;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.ft-Footer_MarkText {
  fill: var(--Color_Menu);
  font-family: var(--Font_Display), 'Noto Sans JP', sans-serif;
  font-size: 140px;
  font-weight: 700;
  letter-spacing: -4px;
  text-transform: lowercase;
}

.ft-Footer_Social {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  margin-block: 24px;
}

.ft-Footer_SocialLink {
  display: flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  color: var(--Color_Text);
}

.ft-Footer_SocialIcon {
  display: block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  max-inline-size: 24px;
  fill: currentColor;
}

.ft-Footer_Legal {
  margin: 0;

  font-family: var(--Font_Mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--Color_TextMuted);
}

/*
|--------------------------------------------------------------------------
| Back to top
|--------------------------------------------------------------------------
| Fixed circular control with path text that turns on scroll
|
| @namespace: bt-
|
*/
.bt-BackTop {
  position: fixed;
  z-index: 1100;
  inset-block-end: 16px;
  inset-inline-end: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background-color: var(--Color_Menu);
  color: var(--Color_Background);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(22, 35, 27, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}
@media (min-width: 768px) {
.bt-BackTop {
    inset-block-end: 24px;
    inset-inline-end: 24px;
    width: 88px;
    height: 88px
}
  }
@media (prefers-reduced-motion: reduce) {
.bt-BackTop {
    transition: none
}
  }

.bt-BackTop-isVisible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.bt-BackTop:focus-visible {
  outline: 2px solid var(--Color_Background);
  outline-offset: 3px;
}

.bt-BackTop_Ring {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  overflow: visible;
}

.bt-BackTop_Text {
  fill: currentColor;
  font-family: var(--Font_Mono);
  font-size: 9.2px;
  font-weight: 500;
  letter-spacing: 1.4px;
}

.bt-BackTop_Arrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--Color_Background);
}

@media (min-width: 768px) {

.bt-BackTop_Arrow {
    width: 22px;
    height: 22px
}
  }

.bt-BackTop_Arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

/*
|--------------------------------------------------------------------------
| Marquee
|--------------------------------------------------------------------------
| Closing CTA band that sits after the stacked sections
|
| @namespace: mq-
|
*/
.mq-Marquee {
  position: relative;
  z-index: 8;

  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding-block: 16px;
  background-color: var(--Color_Menu);
  color: var(--Color_Background);
}
@media (min-width: 768px) {
.mq-Marquee {
    padding-block: 24px
}
  }

.mq-Marquee_Track {
  display: flex;
  width: max-content;
  animation: mq-Marquee_Scroll 28s linear infinite;
}

@media (prefers-reduced-motion: reduce) {

.mq-Marquee_Track {
    animation: none;
    justify-content: center;
    width: 100%
}
  }
.mq-Marquee_Track-isReverse {
  animation-direction: reverse;
}

.mq-Marquee:hover .mq-Marquee_Track,
.mq-Marquee:focus-within .mq-Marquee_Track {
  animation-play-state: paused;
}

.mq-Marquee_Item {
  flex-shrink: 0;
  padding-inline-end: 40px;

  font-family: var(--Font_Display);
  font-size: 72px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -2px;
  white-space: nowrap;
}

@media (min-width: 768px) {

.mq-Marquee_Item {
    padding-inline-end: 48px;
    font-size: 140px;
    letter-spacing: -4px
}
  }

@media (min-width: 1024px) {

.mq-Marquee_Item {
    font-size: 180px
}
  }

@media (prefers-reduced-motion: reduce) {

.mq-Marquee_Item {
    padding-inline-end: 0;
    font-size: 40px;
    letter-spacing: -1px
}

    .mq-Marquee_Item:not(:first-child) {
      display: none;
    }
  }

@keyframes mq-Marquee_Scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}